@noxickon/onyx 0.0.4-dev.8 → 1.0.0

package/dist/layouts/layouts.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../chunks/ui-ChsTPgui.js"),x=require("react"),C=({brand:t,children:n,className:s,hasSidebar:r=!1,navClassName:o,toggleSidebar:a,...i})=>e.jsxRuntimeExports.jsx("header",{className:e.cn("max-h-15 min-h-15 sticky top-0 z-10 bg-gray-100",s),"data-ox-slot":"header",...i,children:e.jsxRuntimeExports.jsxs("nav",{className:e.cn("max-w-10xl mx-auto flex items-center justify-between px-4 py-2.5",o),children:[e.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-[17px]",children:[r?e.jsxRuntimeExports.jsx(e.OxButton,{"aria-label":"Open menu","data-ox-slot":"header-toggle",size:"md",variant:"ghost",onClick:a,children:e.jsxRuntimeExports.jsx(e.OxButton.Icon,{path:"mdiMenu"})}):null,t?e.jsxRuntimeExports.jsx("div",{children:t}):null]}),n]})}),O="group ox-gray-inset-focus items-center rounded-lg text-sm transition-colors text-left col-span-2 grid grid-cols-subgrid",h="size-10 justify-center",S="h-10 w-full px-2",v="bg-gray-300 text-gray-1200",I="h-15",y=x.createContext(void 0),k=({children:t,className:n,desktopCollapsed:s=!1,hasHeader:r=!1,mobileCollapsed:o=!0,onClose:a,...i})=>{const[l,d]=x.useState(window.innerWidth<e.MOBILE_BREAKPOINT),m=l?o:s,E=x.useMemo(()=>({collapsed:m,isMobile:l}),[m,l]);return x.useEffect(()=>{const u=()=>{d(window.innerWidth<e.MOBILE_BREAKPOINT)};return u(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)}},[]),e.jsxRuntimeExports.jsx(y.Provider,{value:E,children:l?e.jsxRuntimeExports.jsx(e.OxDrawer,{open:!m,onOpenChange:u=>!u&&a?.(),children:e.jsxRuntimeExports.jsx(e.OxDrawer.Content,{closeOnOutsideClick:!!a,side:"left",...i,children:e.jsxRuntimeExports.jsxs("nav",{"aria-label":"Mobile navigation",className:e.cn("flex h-screen w-full flex-col bg-gray-100",n),"data-ox-slot":"sidebar",role:"navigation",...i,children:[a?e.jsxRuntimeExports.jsx("div",{className:e.cn("h-15 flex items-center gap-[17px] px-4",I),children:e.jsxRuntimeExports.jsx(e.OxButton,{"aria-label":"Close sidebar",size:"md",variant:"ghost",onClick:a,children:e.jsxRuntimeExports.jsx(e.OxButton.Icon,{path:"mdiClose"})})}):null,t]})})}):e.jsxRuntimeExports.jsx("nav",{"aria-label":"Desktop navigation",className:e.cn("sticky box-content flex flex-col overflow-y-auto bg-gray-100",{"top-0 h-screen":!r,"viewport-minus-header top-15":r,'max-w-18 min-w-18 [&_[data-ox-slot="sidebar-label"]]:hidden':m,"min-w-64 max-w-64":!m},n),"data-ox-slot":"sidebar",role:"navigation",...i,children:t})})},g=()=>{const t=x.useContext(y);if(!t)throw new Error("useSidebar must be used within a SidebarProvider");return t},L=({children:t,className:n,...s})=>{const{collapsed:r,isMobile:o}=g();return e.jsxRuntimeExports.jsx("div",{className:e.cn("grid flex-1 content-start gap-y-1 overflow-y-auto p-4",{"grid-cols-1 place-items-center":r&&!o,"grid-cols-[auto_1fr]":!r||o},'[&_[data-ox-slot="sidebar-link"]]:col-span-2 [&_[data-ox-slot="sidebar-link"]]:grid [&_[data-ox-slot="sidebar-link"]]:grid-cols-subgrid','[&_[data-ox-slot="sidebar-button"]]:col-span-2 [&_[data-ox-slot="sidebar-button"]]:grid [&_[data-ox-slot="sidebar-button"]]:grid-cols-subgrid','[&_[data-ox-slot="sidebar-icon"]]:justify-self-center [&_[data-ox-slot="sidebar-icon"]]:[grid-column-start:var(--ox-menu-icon-col)]','[&_[data-ox-slot="sidebar-label"]]:[grid-column-start:var(--ox-menu-label-col)]',n),"data-ox-slot":"sidebar-body",...s,children:t})},_=({active:t=!1,children:n,className:s,disabled:r=!1,...o})=>{const{collapsed:a}=g();return e.jsxRuntimeExports.jsx("button",{className:e.cn("enabled:text-gray-1000 enabled:hover:text-gray-1200 enabled:cursor-pointer enabled:hover:bg-gray-300",O,{[h]:a,[S]:!a,[v]:t&&!r,"disabled:ox-default-disabled":r},s),"data-ox-slot":"sidebar-button",disabled:r,type:"button",...o,"data-ox-state":t?"active":"inactive",children:n})},B=({children:t,className:n,...s})=>e.jsxRuntimeExports.jsx("div",{className:e.cn("p-4",n),"data-ox-slot":"sidebar-footer",...s,children:t}),T=({children:t,className:n,headline:s,...r})=>{const{collapsed:o,isMobile:a}=g();return e.jsxRuntimeExports.jsxs("div",{className:e.cn("contents",n),"data-ox-slot":"sidebar-group",...r,children:[e.jsxRuntimeExports.jsx("h3",{className:e.cn("text-gray-1000 col-span-full mb-2 mt-4 block cursor-default text-xs",{invisible:o&&!a}),children:s}),t]})},z=({children:t,className:n,...s})=>e.jsxRuntimeExports.jsx("div",{className:e.cn("h-15 flex items-center px-4",n),"data-ox-slot":"sidebar-header",...s,children:t}),A=({className:t,size:n=.8,...s})=>{const{collapsed:r}=g();return e.jsxRuntimeExports.jsx(e.OxIcon,{className:e.cn("shrink-0 text-current",{"mr-2":!r},t),"data-ox-slot":"sidebar-icon",size:n,...s})},D=({children:t,className:n,...s})=>e.jsxRuntimeExports.jsx("span",{className:e.cn("overflow-hidden text-ellipsis",n),"data-ox-slot":"sidebar-label",...s,children:t}),H=({active:t=!1,children:n,className:s,disabled:r=!1,href:o,...a})=>{const{collapsed:i}=g();return e.jsxRuntimeExports.jsx("a",{"aria-current":t?"page":void 0,className:e.cn(O,{[h]:i,[S]:!i,[v]:t&&!r,"text-gray-1000 hover:text-gray-1200 cursor-pointer hover:bg-gray-300":!t&&!r,"ox-default-disabled":r},s),"data-ox-slot":"sidebar-link",href:r?void 0:o,role:"link",onClick:r?l=>l.preventDefault():void 0,...a,"data-ox-state":t?"active":"inactive",children:n})},b=k;b.Body=L;b.Button=_;b.Footer=B;b.Group=T;b.Header=z;b.Icon=A;b.Label=D;b.Link=H;const P=({children:t,className:n,color:s="purple",icon:r,subtitle:o,title:a,...i})=>{const l=a||o||r,d=e.COLOR_STYLES[s];return e.jsxRuntimeExports.jsxs("main",{"aria-labelledby":l?"main-headline":void 0,className:e.cn("w-full p-6",n),"data-ox-slot":"main-content",...i,children:[l?e.jsxRuntimeExports.jsx("div",{className:"mb-8 border-b border-gray-400 pb-6",children:e.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-4",children:[r?e.jsxRuntimeExports.jsx("div",{className:e.cn("rounded-lg border p-3",d.border,d.background),children:e.jsxRuntimeExports.jsx(e.OxIcon,{className:d.text,path:r,size:1.41})}):null,e.jsxRuntimeExports.jsxs("div",{children:[a?e.jsxRuntimeExports.jsx("h2",{id:"main-headline",className:"text-gray-1200 text-xl font-semibold","data-ox-slot":"main-headline",children:a}):null,o&&e.jsxRuntimeExports.jsx("p",{className:"mt-1 text-sm",children:o})]})]})}):null,t]})},G=({children:t,className:n,...s})=>{const{isMobile:r}=j();return e.jsxRuntimeExports.jsx("div",{className:e.cn("max-w-10xl mx-auto grid min-h-screen bg-transparent",r?"grid-cols-1":"grid-cols-[auto_1fr]",n),"data-ox-slot":"app-layout",...s,children:t})},$=({children:t,className:n,...s})=>e.jsxRuntimeExports.jsx("main",{className:e.cn("flex flex-col overflow-y-auto",n),"data-ox-slot":"main-content",...s,children:t}),W=({children:t,className:n,...s})=>e.jsxRuntimeExports.jsx("div",{className:e.cn("flex-1 overflow-y-auto px-6 py-6",n),"data-ox-slot":"main-content-body",...s,children:t}),Y=({children:t,className:n,...s})=>e.jsxRuntimeExports.jsx("div",{className:e.cn("flex-shrink-0 border-b border-gray-400 bg-gray-100 px-6 py-4",n),"data-ox-slot":"main-content-header",...s,children:t}),F=Object.assign($,{Header:Y,Body:W}),R=x.createContext(void 0);function j(){const t=x.useContext(R);if(!t)throw new Error("useOxSidebar must be used within a SidebarProvider");return t}const K=256,q=({children:t,className:n,...s})=>{const{isMobile:r,mobileOpen:o,toggleSidebar:a}=j();return r?e.jsxRuntimeExports.jsx(e.OxDrawer,{open:o,onOpenChange:a,children:e.jsxRuntimeExports.jsx(e.OxDrawer.Content,{closeOnOutsideClick:!0,side:"left",children:e.jsxRuntimeExports.jsx("aside",{className:e.cn("bg-gray-150 flex h-full flex-col",n),"data-ox-slot":"sidebar",...s,children:t})})}):e.jsxRuntimeExports.jsx("aside",{className:e.cn("bg-gray-150 sticky top-0 flex h-screen flex-col overflow-y-auto",n),"data-ox-slot":"sidebar",style:{width:K},...s,children:t})},V=({children:t,className:n,...s})=>e.jsxRuntimeExports.jsx("div",{className:e.cn("flex-1 overflow-y-auto p-2",n),"data-ox-slot":"sidebar-content",...s,children:t}),J=({children:t,className:n,...s})=>e.jsxRuntimeExports.jsx("div",{className:e.cn("flex shrink-0 flex-col p-2",n),"data-ox-slot":"sidebar-footer",...s,children:t}),Q=({children:t,className:n,...s})=>e.jsxRuntimeExports.jsx("div",{className:e.cn("flex flex-wrap items-center gap-2",'[&_[data-ox-slot="sidebar-group-content"]]:w-full',n),"data-ox-slot":"sidebar-group",...s,children:t}),U=({children:t,className:n,...s})=>e.jsxRuntimeExports.jsx("button",{className:e.cn("mr-1.5 inline-flex size-6 shrink-0 items-center justify-center rounded-md","enabled:hover:text-gray-1200 enabled:cursor-pointer enabled:text-gray-900 enabled:hover:bg-gray-300","ox-gray-outset-focus disabled:ox-default-disabled",n),"data-ox-slot":"sidebar-group-action",type:"button",...s,children:t}),X=({children:t,className:n,...s})=>e.jsxRuntimeExports.jsx("div",{className:e.cn(n),"data-ox-slot":"sidebar-group-content",...s,children:t}),Z=({children:t,className:n,...s})=>e.jsxRuntimeExports.jsx("div",{className:e.cn("flex flex-1 items-center pl-2 text-xs font-medium text-gray-900",n),"data-ox-slot":"sidebar-group-label",...s,children:t}),ee=({children:t,className:n,...s})=>e.jsxRuntimeExports.jsx("div",{className:e.cn("flex shrink-0 flex-col p-2",n),"data-ox-slot":"sidebar-header",...s,children:t}),te=({children:t,className:n,...s})=>e.jsxRuntimeExports.jsx("ul",{className:e.cn("flex flex-col items-stretch gap-1",n),"data-ox-slot":"sidebar-menu",...s,children:t}),se=({children:t,className:n,...s})=>e.jsxRuntimeExports.jsx("button",{className:e.cn("inline-flex size-9 shrink-0 items-center justify-center rounded-lg border border-transparent","enabled:text-gray-1200 enabled:cursor-pointer enabled:bg-transparent enabled:hover:bg-gray-300","ox-gray-outset-focus disabled:ox-default-disabled",n),"data-ox-slot":"sidebar-menu-action",type:"button",...s,children:t}),ne=({children:t,className:n})=>e.jsxRuntimeExports.jsx(e.OxBadge,{className:e.cn("ml-auto",n),"data-ox-slot":"sidebar-menu-badge",size:"sm",children:t}),w=x.createContext(void 0),N=()=>{const t=x.useContext(w);if(!t)throw new Error("useMenuItemContext must be used within MenuItemProvider");return t},M=({className:t,path:n,placeholder:s})=>e.jsxRuntimeExports.jsx(e.OxIcon,{className:e.cn("shrink-0",t),"data-ox-slot":"sidebar-menu-icon",path:n,placeholder:s,size:.8}),re=({children:t,className:n,disabled:s=!1,href:r,onClick:o,...a})=>{const{hasSub:i,isOpen:l,toggleOpen:d}=N(),m=e.cn("flex h-9 flex-1 items-center gap-2 rounded-lg border border-transparent bg-transparent px-2 text-left text-sm","ox-gray-outset-focus",n);if(r)return e.jsxRuntimeExports.jsx("a",{"aria-disabled":s?"true":void 0,className:e.cn(m,{"text-gray-1200 cursor-pointer hover:bg-gray-300":!s,"ox-default-disabled":s}),"data-ox-slot":"sidebar-menu-button",href:s?void 0:r,onClick:s?u=>u.preventDefault():void 0,...a,children:t});const E=u=>{i&&d(),o&&o(u)};return e.jsxRuntimeExports.jsxs("button",{className:e.cn(m,"enabled:text-gray-1200 enabled:cursor-pointer enabled:hover:bg-gray-300","disabled:ox-default-disabled"),"data-ox-slot":"sidebar-menu-button",disabled:s,type:"button",onClick:E,...a,children:[t,i?e.jsxRuntimeExports.jsx(M,{className:e.cn("ml-auto transition-transform duration-200",{"rotate-180":l}),path:"mdiChevronDown"}):null]})};function oe({children:t,defaultOpen:n=!1,hasSub:s=!1}){const[r,o]=x.useState(n),a=()=>o(i=>!i);return e.jsxRuntimeExports.jsx(w.Provider,{value:{hasSub:s,isOpen:r,setIsOpen:o,toggleOpen:a},children:t})}const ae=({children:t,className:n,defaultOpen:s=!1,hasSub:r=!1,...o})=>e.jsxRuntimeExports.jsx(oe,{defaultOpen:s,hasSub:r,children:e.jsxRuntimeExports.jsx("li",{className:e.cn("group flex flex-wrap items-center gap-x-2",n),"data-ox-slot":"sidebar-menu-item",...o,children:t})}),ie=({className:t})=>e.jsxRuntimeExports.jsx(e.OxSkeleton,{className:t,"data-ox-slot":"sidebar-menu-skeleton",fullWidth:!0,height:36}),xe=({children:t,className:n,...s})=>{const{isOpen:r}=N();return e.jsxRuntimeExports.jsx("div",{className:"ox-sidebar-submenu w-content grid w-full","data-ox-slot":"sidebar-menu-sub-wrapper","data-ox-state":r?"open":"closed",children:e.jsxRuntimeExports.jsx("ul",{className:e.cn("ml-4.5 flex flex-col gap-1 border-l border-gray-400 py-0.5 pl-2.5",n),"data-ox-slot":"sidebar-menu-sub",...s,children:t})})},le=({children:t,className:n,href:s,...r})=>{const o=e.cn("text-gray-1200 flex h-8 flex-1 cursor-pointer items-center gap-2 rounded-lg border border-transparent bg-transparent px-2 text-left text-sm hover:bg-gray-300","ox-gray-outset-focus",n);return s?e.jsxRuntimeExports.jsx("a",{className:o,"data-ox-slot":"sidebar-menu-sub-button",href:s,...r,children:t}):e.jsxRuntimeExports.jsx("button",{className:o,"data-ox-slot":"sidebar-menu-sub-button",type:"button",...r,children:t})},de=({children:t,className:n,...s})=>e.jsxRuntimeExports.jsx("li",{className:e.cn("flex items-center gap-2",n),"data-ox-slot":"sidebar-menu-sub-item",...s,children:t}),ce=({className:t,...n})=>e.jsxRuntimeExports.jsx(e.OxSeparator,{className:t,"data-ox-slot":"sidebar-separator",...n}),ue=({className:t,onClick:n})=>{const{isMobile:s,toggleSidebar:r}=j(),o=()=>{s?r():n&&n()},a=s||n;return e.jsxRuntimeExports.jsx("button",{"aria-label":"Toggle sidebar",className:e.cn("inline-flex size-8 items-center justify-center rounded-lg","text-gray-1200 border border-transparent bg-transparent",{"ox-gray-outset-focus cursor-pointer hover:bg-gray-300":a},t),"data-ox-slot":"sidebar-trigger",disabled:!a,type:"button",onClick:o,children:e.jsxRuntimeExports.jsx(e.OxIcon,{path:"mdiDockLeft",size:.8})})};function be({children:t}){const[n,s]=x.useState(!1),[r,o]=x.useState(!1);x.useEffect(()=>{const d=()=>{o(window.innerWidth<e.MOBILE_BREAKPOINT)};return d(),window.addEventListener("resize",d),()=>window.removeEventListener("resize",d)},[]);const a=x.useCallback(()=>{s(!0)},[]),i=x.useCallback(()=>{s(!1)},[]),l=x.useCallback(()=>{s(d=>!d)},[]);return e.jsxRuntimeExports.jsx(R.Provider,{value:{closeSidebar:i,isMobile:r,mobileOpen:n,openSidebar:a,toggleSidebar:l},children:t})}const p=q,c=te,f=Q;p.Header=ee;p.Content=V;p.Footer=J;p.Separator=ce;p.Trigger=ue;c.Item=ae;c.Button=re;c.Icon=M;c.Badge=ne;c.Action=se;c.Skeleton=ie;c.Sub=xe;c.SubItem=de;c.SubButton=le;f.Label=Z;f.Action=U;f.Content=X;exports.OxAppLayout=G;exports.OxLegacyHeader=C;exports.OxLegacyMainContent=P;exports.OxLegacySidebar=b;exports.OxMainContent=F;exports.OxSidebar=p;exports.OxSidebarGroup=f;exports.OxSidebarMenu=c;exports.OxSidebarProvider=be;exports.useOxSidebar=j;