A design system in a box.
hip-ui.tngl.io/docs/introduction
1import{i as e,t}from"./jsx-runtime-D-oznMWL.js";import{t as n}from"./react-DNjXG-IQ.js";import{f as r,t as i}from"./button-B3FtKFjE.js";import{n as a}from"./link-CghA3pO1.js";import{a as o,n as s,o as ee,r as c}from"./_virtual_content-FazmLmqR.js";import{t as l}from"./useLocation-ITrbnl1F.js";import{_ as u}from"./typography.stylex-ZkAqsnF0.js";import{t as d}from"./icon-button-BFGSYviR.js";import{t as f}from"./select-DPWMB9nm.js";import{r as p}from"./typography-DYed328x.js";import{t as m}from"./sidebar-layout-DGc-vn3w.js";import{t as h}from"./flex-oubf-_sd.js";import{a as g,bt as _,i as v,n as y,r as b,yt as x}from"./main-C54yPR-t.js";import{t as S}from"./text-B77JGejP.js";import{n as C,t as te}from"./UnShiki-EBFEVXkE.js";import{n as ne}from"./listbox-Clp-j1PB.js";import{a as re,i as ie,n as ae,t as w}from"./dialog-DGX3aEDV.js";import{a as T,i as E,n as D,r as O,t as k}from"./sidebar-BxDooHSf.js";import{t as A}from"./table-of-contents-4OHKHUOU.js";var j=r(`moon`,[[`path`,{d:`M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401`,key:`kfwtm`}]]),M=r(`sun`,[[`circle`,{cx:`12`,cy:`12`,r:`4`,key:`4exip2`}],[`path`,{d:`M12 2v2`,key:`tus03m`}],[`path`,{d:`M12 20v2`,key:`1lh1kg`}],[`path`,{d:`m4.93 4.93 1.41 1.41`,key:`149t6j`}],[`path`,{d:`m17.66 17.66 1.41 1.41`,key:`ptbguv`}],[`path`,{d:`M2 12h2`,key:`1t8f8n`}],[`path`,{d:`M20 12h2`,key:`1q8mjw`}],[`path`,{d:`m6.34 17.66-1.41 1.41`,key:`1m8zz5`}],[`path`,{d:`m19.07 4.93-1.41 1.41`,key:`1shlcs`}]]),N=e(n(),1),P=/([\p{Ll}\d])(\p{Lu})/gu,F=/(\p{Lu})([\p{Lu}][\p{Ll}])/gu,I=/(\d)\p{Ll}|(\p{L})\d/u,L=/[^\p{L}\d]+/giu,R=`$1\0$2`,z=``;function B(e){let t=e.trim();t=t.replace(P,R).replace(F,R),t=t.replace(L,`\0`);let n=0,r=t.length;for(;t.charAt(n)===`\0`;)n++;if(n===r)return[];for(;t.charAt(r-1)===`\0`;)r--;return t.slice(n,r).split(/\0/g)}function V(e){let t=B(e);for(let e=0;e<t.length;e++){let n=t[e],r=I.exec(n);if(r){let i=r.index+(r[1]??r[2]).length;t.splice(e,1,n.slice(0,i),n.slice(i))}}return t}function H(e,t){let[n,r,i]=K(e,t),a=U(t?.locale),o=W(t?.locale);return n+r.map(G(a,o)).join(t?.delimiter??` `)+i}function U(e){return e===!1?e=>e.toLowerCase():t=>t.toLocaleLowerCase(e)}function W(e){return e===!1?e=>e.toUpperCase():t=>t.toLocaleUpperCase(e)}function G(e,t){return n=>`${t(n[0])}${e(n.slice(1))}`}function K(e,t={}){let n=t.split??(t.separateNumbers?V:B),r=t.prefixCharacters??z,i=t.suffixCharacters??z,a=0,o=e.length;for(;a<e.length;){let t=e.charAt(a);if(!r.includes(t))break;a++}for(;o>a;){let t=o-1,n=e.charAt(t);if(!i.includes(n))break;o=t}return[e.slice(0,a),n(e.slice(a,o)),e.slice(o)]}var q=t(),J={dot:{kaIpWk:`xnxfpsy`,kGNEyG:`x6s0dn4`,kZKoxP:`xwvo3h1`,kzqmXN:`x1tlr9ck`,$$css:!0},preview:e=>[{kWkggS:b[e].solid1==null?b[e].solid1:`xl8spv7`,$$css:!0},{"--x-backgroundColor":b[e].solid1==null?void 0:b[e].solid1}]},Y=({color:e})=>(0,q.jsx)(`div`,{...u(J.dot,J.preview(e))});function X({color:e,colors:t,label:n,onChange:r}){return(0,q.jsx)(f,{prefix:(0,q.jsx)(Y,{color:e}),label:n,value:e,onChange:e=>r(e),children:t.map(e=>(0,q.jsx)(ne,{id:e,prefix:(0,q.jsx)(Y,{color:e}),children:H(e)},e))})}var oe=()=>{let{theme:e,setTheme:t}=(0,N.use)(y),[n,r]=(0,N.useState)(!1);return(0,q.jsxs)(w,{isOpen:n,onOpenChange:r,trigger:(0,q.jsx)(d,{"aria-label":`Theme`,variant:`tertiary`,children:(0,q.jsx)(`div`,{children:(0,q.jsx)(Y,{color:e.primaryColor})})}),children:[(0,q.jsx)(re,{children:`Theme`}),(0,q.jsx)(ae,{children:(0,q.jsxs)(h,{direction:`column`,gap:`2xl`,children:[(0,q.jsx)(X,{color:e.primaryColor,colors:v,label:`Primary Color`,onChange:n=>t({...e,primaryColor:n})}),(0,q.jsx)(X,{color:e.uiColor,colors:g,label:`UI Color`,onChange:n=>t({...e,uiColor:n})}),(0,q.jsx)(X,{color:e.successColor,colors:v,label:`Success Color`,onChange:n=>t({...e,successColor:n})}),(0,q.jsx)(X,{color:e.warningColor,colors:v,label:`Warning Color`,onChange:n=>t({...e,warningColor:n})}),(0,q.jsx)(X,{color:e.criticalColor,colors:v,label:`Critical Color`,onChange:n=>t({...e,criticalColor:n})})]})}),(0,q.jsx)(ie,{children:(0,q.jsx)(i,{onClick:()=>r(!1),children:`Done`})})]})},Z=a(E),se=c.filter(e=>e._meta.directory.startsWith(`components`)),ce=c.filter(e=>e._meta.directory.startsWith(`foundations`)),le=c.filter(e=>e._meta.directory.startsWith(`showcase`)),ue=se.reduce((e,t)=>{let n=t._meta.path.split(`/`),r=n.length>2&&n[1]?n[1]:`components`;return e[r]||(e[r]=[]),e[r]?.push(t),e},{}),Q=Object.entries(ue).toSorted(([e],[t])=>e.localeCompare(t)).map(([e,t])=>({id:`components-${e}`,label:e.charAt(0).toUpperCase()+e.slice(1),items:t.toSorted((e,t)=>e.title.localeCompare(t.title)).map(e=>({id:e._meta.path,label:e.title,to:`/docs/$`,params:{_splat:e._meta.path}}))})),$=[{id:`getting-started`,items:[{id:`introduction`,label:`Introduction`,to:`/docs/$`,params:{_splat:`introduction`}},{id:`ai`,label:`AI Usage`,to:`/docs/$`,params:{_splat:`ai`}}]},{id:`foundations`,label:`Foundations`,items:ce.map(e=>({id:e._meta.path,label:e.title,to:`/docs/$`,params:{_splat:e._meta.path}}))},{id:`components`,label:`Components`,items:Q},{id:`showcases`,label:`Showcases`,items:le.map(e=>({id:e._meta.path,label:e.title,to:`/docs/$`,params:{_splat:e._meta.path}}))}],de=$.flatMap(e=>`items`in e?e.items.flatMap(e=>`items`in e?e.items:[e]):[e]);function fe(){let[e,t]=(0,N.useState)(`light`);return(0,N.useEffect)(()=>{let e=localStorage.getItem(`hip-ui-color-scheme`);e&&t(e)},[]),(0,q.jsx)(d,{variant:`secondary`,label:`Toggle Dark Mode`,onPress:()=>{let n=e===`light`?`dark`:`light`;t(n),localStorage.setItem(`hip-ui-color-scheme`,n),document.body.style.colorScheme=n},children:e===`dark`?(0,q.jsx)(j,{}):(0,q.jsx)(M,{})})}function pe(){let e=l(),t=x().find(t=>t.pathname===e.pathname),n=t?.params&&`_splat`in t.params&&typeof t.params._splat==`string`?t.params._splat.replace(`/docs/`,``):void 0,r=de.find(e=>e.id===n);return(0,q.jsxs)(k,{children:[(0,q.jsx)(O,{action:(0,q.jsxs)(h,{gap:`xxs`,align:`center`,children:[(0,q.jsx)(oe,{}),(0,q.jsx)(fe,{})]}),children:(0,q.jsx)(S,{font:`title`,size:`4xl`,weight:`bold`,children:`Hip UI`})}),$.map(e=>`items`in e?e.label?(0,q.jsx)(D,{title:e.label,children:e.items.map(e=>`items`in e?(0,q.jsx)(T,{title:e.label,children:e.items.map(e=>(0,q.jsx)(Z,{to:e.to,params:e.params,isActive:r?.id===e.id,children:e.label},e.id))},e.id):(0,q.jsx)(Z,{to:e.to,params:e.params,isActive:r?.id===e.id,children:e.label},e.id))},e.id):(0,q.jsx)(T,{children:e.items.map(e=>`items`in e?(0,q.jsx)(q.Fragment,{children:e.items.map(e=>(0,q.jsx)(Z,{to:e.to,params:e.params,isActive:r?.id===e.id,children:e.label},e.id))}):(0,q.jsx)(Z,{to:e.to,params:e.params,isActive:r?.id===e.id,children:e.label},e.id))},e.id):(0,q.jsx)(Z,{to:e.to,params:e.params,isActive:r?.id===e.id,children:e.label},e.id))]})}function me(){let e=l(),t=x().find(t=>t.pathname===e.pathname),n=e.pathname.replace(/\.md$/,``),r=e.pathname.endsWith(`.md`),i=c.find(e=>n.match(RegExp(`${e._meta.path}$`)));if(!i)return(0,q.jsx)(_,{});let a=s[n];if(!a)throw Error(`Content not found: ${n}`);let u=n.includes(`showcase`),d=t?.loaderData?.toc;return u?(0,q.jsx)(a,{components:o}):r?(0,q.jsx)(C.Provider,{value:{isMarkdown:r,docPath:n},children:(0,q.jsxs)(`div`,{"data-markdown-export":!0,children:[(0,q.jsxs)(h,{direction:`column`,gap:`7xl`,style:ee.header,children:[(0,q.jsx)(p,{children:i.title}),(0,q.jsx)(S,{size:`xl`,variant:`secondary`,children:i.description})]}),(0,q.jsx)(a,{components:{code:e=>e.className?.includes(`language-`)?(0,q.jsx)(te,{...e}):(0,q.jsx)(`code`,{...e})}})]})}):(0,q.jsxs)(m.Root,{children:[(0,q.jsx)(m.NavigationSidebar,{children:(0,q.jsx)(pe,{})}),(0,q.jsx)(m.Page,{children:(0,q.jsx)(N.Suspense,{children:(0,q.jsx)(_,{})})}),d&&(0,q.jsx)(m.InconsequentialSidebar,{visible:`md`,children:(0,q.jsx)(A,{toc:d})})]})}export{me as component};