@skalar-saas/design-system 0.1.87 → 0.1.89

package/dist/index.js

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),Z=require("@headlessui/react"),J=require("framer-motion"),h=require("clsx"),V=require("tailwind-merge"),z=require("iconsax-react"),qr=require("@radix-ui/react-tooltip"),_t=require("react-dom"),Qr=require("@radix-ui/react-toast"),Kr=require("react-day-picker"),xe=require("@tanstack/react-table"),Yr=require("@tanstack/react-virtual"),Jr=t=>t&&t.__esModule?t:{default:t};function it(t){if(t&&t.__esModule)return t;const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(s,r,a.get?a:{enumerable:!0,get:()=>t[r]})}}return s.default=t,Object.freeze(s)}const k=it(j),Q=Jr(h),ee=it(qr),se=it(Qr),Xr={default:"max-w-container",narrow:"max-w-container-narrow",medium:"max-w-container-medium",wide:"max-w-container-wide",full:"max-w-none"},en={none:"",responsive:"px-container-mobile md:px-container-tablet lg:px-container-desktop",fixed:"px-container-desktop"},Gt=k.default.forwardRef(({size:t="default",centered:s=!0,padding:r="responsive",as:a="div",className:n,children:l,...i},x)=>{const o=V.twMerge(h.clsx("w-full",Xr[t],s&&"mx-auto",en[r],n));return e.jsx(a,{ref:x,className:o,...i,children:l})});Gt.displayName="Container";const Ut=k.default.forwardRef(({className:t,children:s,...r},a)=>e.jsx("div",{ref:a,className:V.twMerge(h.clsx("flex items-center justify-between","py-6 md:py-8",t)),...r,children:s}));Ut.displayName="Container.Header";const qt=k.default.forwardRef(({className:t,children:s,...r},a)=>e.jsx("div",{ref:a,className:V.twMerge(h.clsx("flex-1",t)),...r,children:s}));qt.displayName="Container.Content";const Qt=k.default.forwardRef(({className:t,children:s,...r},a)=>e.jsx("div",{ref:a,className:V.twMerge(h.clsx("flex items-center justify-between","py-6 md:py-8","border-t border-surface-3",t)),...r,children:s}));Qt.displayName="Container.Footer";const Ve=Gt;Ve.Header=Ut;Ve.Content=qt;Ve.Footer=Qt;const tn={none:"py-0",xs:"py-2 md:py-4",sm:"py-4 md:py-6",md:"py-6 md:py-8",lg:"py-8 md:py-10",xl:"py-10 md:py-12 lg:py-14","2xl":"py-12 md:py-14 lg:py-15"},sn={transparent:"bg-transparent","surface-bg":"bg-surface-bg","surface-1":"bg-surface-1","surface-2":"bg-surface-2",white:"bg-white"},We=k.default.forwardRef(({spacing:t="lg",background:s="transparent",bordered:r=!1,as:a="section",className:n,children:l,...i},x)=>{const o=V.twMerge(h.clsx("w-full",tn[t],sn[s],r&&"border-b border-surface-3",n));return e.jsx(a,{ref:x,className:o,...i,children:l})});We.displayName="Section";const Kt=k.default.forwardRef(({spacing:t="2xl",...s},r)=>e.jsx(We,{ref:r,spacing:t,...s}));Kt.displayName="SectionHero";const Yt=k.default.forwardRef(({background:t="surface-1",...s},r)=>e.jsx(We,{ref:r,background:t,...s}));Yt.displayName="SectionFeatures";const Se={sm:640,md:768,lg:1024,xl:1280,"2xl":1400,"3xl":1600},Jt={default:1400,narrow:896,medium:1152,wide:1600},Xt={mobile:16,tablet:24,desktop:32,desktopLarge:48},es={width:280,collapsedWidth:64,navigationWidth:240},ts={headerHeight:60,tabsHeight:48,totalHeight:108},ss={none:0,xs:8,sm:16,md:24,lg:32,xl:48,"2xl":64},rs={containerMaxWidth:"--layout-container-max-width",containerNarrow:"--layout-container-narrow",containerMedium:"--layout-container-medium",containerWide:"--layout-container-wide",containerPaddingMobile:"--layout-container-padding-mobile",containerPaddingTablet:"--layout-container-padding-tablet",containerPaddingDesktop:"--layout-container-padding-desktop",containerPaddingDesktopLg:"--layout-container-padding-desktop-lg",sidebarWidth:"--layout-sidebar-width",sidebarCollapsed:"--layout-sidebar-collapsed",sidebarNavigation:"--layout-sidebar-navigation",navbarHeaderHeight:"--layout-navbar-header-height",navbarTabsHeight:"--layout-navbar-tabs-height",navbarTotalHeight:"--layout-navbar-total-height"},rn={breakpoints:Se,container:Jt,containerPadding:Xt,sidebar:es,navbar:ts,spacing:ss,cssVariables:rs};function nn(t){return`${t/16}rem`}function an(t){return`${t}px`}function ln(t,s="min"){const r=typeof t=="number"?t:Se[t],a=s==="max"?r-1:r;return`(${s}-width: ${a}px)`}function on(t,s,r="gte"){const a=Se[s];return r==="gte"?t>=a:t<a}function cn(t){const r=Object.entries(Se).sort((a,n)=>n[1]-a[1]);for(const[a,n]of r)if(t>=n)return a;return"sm"}const ns=j.createContext(null);function dn(){const t=j.useContext(ns);if(!t)throw new Error("usePanelContext must be used within a PanelLayout");return t}const q={minWidth:200,maxWidthPercent:50,minCentralWidth:150,minCentralPercent:10,closeZoneMin:10,closeZoneMax:15,snapMinWidth:15,exitAnimationDuration:100};function xn(t){return t>=q.closeZoneMin&&t<=q.closeZoneMax}function Rt(t){return t<q.snapMinWidth?q.snapMinWidth:t}function Pe(t,s,r=0,a=q.minCentralWidth){const n=s-a-r,i=Math.min(t,n)/s*100;return Math.max(10,Math.min(i,q.maxWidthPercent))}function as(t,s,r,a=0,n=q.minCentralWidth,l=0,i=0){const x=l/100*r;let o;t==="left"?o=s-x:o=r-s-x;const c=o/r*100,d=100-n/r*100-a-l;return Math.max(q.closeZoneMin,Math.min(c,d))}function Te(t){return t.filter(s=>s.open).reduce((s,r)=>s+r.width,0)}function ls(t){return Te(t.left)+Te(t.right)}function ae(t,s){const r=t.left.find(n=>n.id===s);if(r)return{panel:r,side:"left"};const a=t.right.find(n=>n.id===s);if(a)return{panel:a,side:"right"}}function un(t){return 100-ls(t)}function et(t,s=typeof window<"u"?window.innerWidth:1920){const r={left:[],right:[]};return t.forEach(a=>{const l=t.filter(o=>o.side===a.side&&o.id!==a.id).reduce((o,c)=>o+c.defaultWidth,0),i=Pe(a.defaultWidth,s,l),x={id:a.id,open:!0,width:i};r[a.side].push(x)}),r}const is=k.default.memo(({children:t,panels:s,onPanelResize:r,onCloseZoneChange:a,onPanelClose:n,minCentralWidth:l=q.minCentralWidth,className:i})=>{const[x,o]=j.useState(null),c=j.useRef(null),u=j.useCallback(v=>{o(v)},[]),d=j.useCallback((v,y)=>{r(v,y)},[r]),m=j.useCallback((v,y)=>{o(null),y&&n&&n(v)},[n]),p=j.useCallback((v,y)=>{a&&a(v,y)},[a]),b=j.useCallback(v=>{const y=ae(s,v);if(y)return{...y.panel,isResizing:x===v}},[s,x]),w=j.useMemo(()=>({panels:s,onResizeStart:u,onResize:d,onResizeEnd:m,onCloseZoneChange:p,getPanelState:b,minCentralWidth:l,containerRef:c}),[s,u,d,m,p,b,l]),{leftPanels:g,rightPanels:f,mainContent:C}=j.useMemo(()=>{const v=[],y=[];let M=null;return k.default.Children.forEach(t,I=>{if(k.default.isValidElement(I)){if(I.type&&I.type.displayName==="PanelMain"){M=I;return}if(I.type&&I.type.displayName==="Panel"){const T=I.props;T.side==="left"?v.push(I):T.side==="right"&&y.push(I)}}}),{leftPanels:v,rightPanels:y,mainContent:M}},[t]),N=x!==null;return e.jsx(ns.Provider,{value:w,children:e.jsxs("div",{ref:c,className:h.clsx("flex h-full w-full overflow-hidden","transition-all duration-100 ease-out",N&&"select-none",i),"data-panel-layout":!0,"data-resizing":N,children:[g,C,f]})})});is.displayName="PanelLayout";const hn=({height:t=200,side:s="right",fillColor:r="var(--surface-1)",className:a})=>{const o=(t-48)/2,c=o+48,u=s==="right",d=u?.5:9-.5,m=u?9-.5:.5,p=u?`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),Z=require("@headlessui/react"),J=require("framer-motion"),h=require("clsx"),V=require("tailwind-merge"),z=require("iconsax-react"),qr=require("@radix-ui/react-tooltip"),_t=require("react-dom"),Qr=require("@radix-ui/react-toast"),Kr=require("react-day-picker"),xe=require("@tanstack/react-table"),Yr=require("@tanstack/react-virtual"),Jr=t=>t&&t.__esModule?t:{default:t};function it(t){if(t&&t.__esModule)return t;const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(s,r,a.get?a:{enumerable:!0,get:()=>t[r]})}}return s.default=t,Object.freeze(s)}const k=it(j),Q=Jr(h),ee=it(qr),se=it(Qr),Xr={default:"max-w-container",narrow:"max-w-container-narrow",medium:"max-w-container-medium",wide:"max-w-container-wide",full:"max-w-none"},en={none:"",responsive:"px-container-mobile md:px-container-tablet lg:px-container-desktop",fixed:"px-container-desktop"},Gt=k.default.forwardRef(({size:t="default",centered:s=!0,padding:r="responsive",as:a="div",className:n,children:l,...i},x)=>{const o=V.twMerge(h.clsx("w-full",Xr[t],s&&"mx-auto",en[r],n));return e.jsx(a,{ref:x,className:o,...i,children:l})});Gt.displayName="Container";const Ut=k.default.forwardRef(({className:t,children:s,...r},a)=>e.jsx("div",{ref:a,className:V.twMerge(h.clsx("flex items-center justify-between","py-6 md:py-8",t)),...r,children:s}));Ut.displayName="Container.Header";const qt=k.default.forwardRef(({className:t,children:s,...r},a)=>e.jsx("div",{ref:a,className:V.twMerge(h.clsx("flex-1",t)),...r,children:s}));qt.displayName="Container.Content";const Qt=k.default.forwardRef(({className:t,children:s,...r},a)=>e.jsx("div",{ref:a,className:V.twMerge(h.clsx("flex items-center justify-between","py-6 md:py-8","border-t border-surface-3",t)),...r,children:s}));Qt.displayName="Container.Footer";const Ve=Gt;Ve.Header=Ut;Ve.Content=qt;Ve.Footer=Qt;const tn={none:"py-0",xs:"py-2 md:py-4",sm:"py-4 md:py-6",md:"py-6 md:py-8",lg:"py-8 md:py-10",xl:"py-10 md:py-12 lg:py-14","2xl":"py-12 md:py-14 lg:py-15"},sn={transparent:"bg-transparent","surface-bg":"bg-surface-bg","surface-1":"bg-surface-1","surface-2":"bg-surface-2",white:"bg-white"},We=k.default.forwardRef(({spacing:t="lg",background:s="transparent",bordered:r=!1,as:a="section",className:n,children:l,...i},x)=>{const o=V.twMerge(h.clsx("w-full",tn[t],sn[s],r&&"border-b border-surface-3",n));return e.jsx(a,{ref:x,className:o,...i,children:l})});We.displayName="Section";const Kt=k.default.forwardRef(({spacing:t="2xl",...s},r)=>e.jsx(We,{ref:r,spacing:t,...s}));Kt.displayName="SectionHero";const Yt=k.default.forwardRef(({background:t="surface-1",...s},r)=>e.jsx(We,{ref:r,background:t,...s}));Yt.displayName="SectionFeatures";const Se={sm:640,md:768,lg:1024,xl:1280,"2xl":1400,"3xl":1600},Jt={default:1400,narrow:896,medium:1152,wide:1600},Xt={mobile:16,tablet:24,desktop:32,desktopLarge:48},es={width:280,collapsedWidth:64,navigationWidth:240},ts={headerHeight:60,tabsHeight:48,totalHeight:108},ss={none:0,xs:8,sm:16,md:24,lg:32,xl:48,"2xl":64},rs={containerMaxWidth:"--layout-container-max-width",containerNarrow:"--layout-container-narrow",containerMedium:"--layout-container-medium",containerWide:"--layout-container-wide",containerPaddingMobile:"--layout-container-padding-mobile",containerPaddingTablet:"--layout-container-padding-tablet",containerPaddingDesktop:"--layout-container-padding-desktop",containerPaddingDesktopLg:"--layout-container-padding-desktop-lg",sidebarWidth:"--layout-sidebar-width",sidebarCollapsed:"--layout-sidebar-collapsed",sidebarNavigation:"--layout-sidebar-navigation",navbarHeaderHeight:"--layout-navbar-header-height",navbarTabsHeight:"--layout-navbar-tabs-height",navbarTotalHeight:"--layout-navbar-total-height"},rn={breakpoints:Se,container:Jt,containerPadding:Xt,sidebar:es,navbar:ts,spacing:ss,cssVariables:rs};function nn(t){return`${t/16}rem`}function an(t){return`${t}px`}function ln(t,s="min"){const r=typeof t=="number"?t:Se[t],a=s==="max"?r-1:r;return`(${s}-width: ${a}px)`}function on(t,s,r="gte"){const a=Se[s];return r==="gte"?t>=a:t<a}function cn(t){const r=Object.entries(Se).sort((a,n)=>n[1]-a[1]);for(const[a,n]of r)if(t>=n)return a;return"sm"}const ns=j.createContext(null);function dn(){const t=j.useContext(ns);if(!t)throw new Error("usePanelContext must be used within a PanelLayout");return t}const q={minWidth:200,maxWidthPercent:50,minCentralWidth:150,minCentralPercent:10,closeZoneMin:10,closeZoneMax:15,snapMinWidth:15,exitAnimationDuration:100};function xn(t){return t>=q.closeZoneMin&&t<=q.closeZoneMax}function Rt(t){return t<q.snapMinWidth?q.snapMinWidth:t}function Pe(t,s,r=0,a=q.minCentralWidth){const n=s-a-r,i=Math.min(t,n)/s*100;return Math.max(10,Math.min(i,q.maxWidthPercent))}function as(t,s,r,a=0,n=q.minCentralWidth,l=0,i=0){const x=l/100*r;let o;t==="left"?o=s-x:o=r-s-x;const c=o/r*100,d=100-n/r*100-a-l;return Math.max(q.closeZoneMin,Math.min(c,d))}function Te(t){return t.filter(s=>s.open).reduce((s,r)=>s+r.width,0)}function ls(t){return Te(t.left)+Te(t.right)}function ae(t,s){const r=t.left.find(n=>n.id===s);if(r)return{panel:r,side:"left"};const a=t.right.find(n=>n.id===s);if(a)return{panel:a,side:"right"}}function un(t){return 100-ls(t)}function et(t,s=typeof window<"u"?window.innerWidth:1920){const r={left:[],right:[]};return t.forEach(a=>{const l=t.filter(o=>o.side===a.side&&o.id!==a.id).reduce((o,c)=>o+c.defaultWidth,0),i=Pe(a.defaultWidth,s,l),x={id:a.id,open:!0,width:i};r[a.side].push(x)}),r}const is=k.default.memo(({children:t,panels:s,onPanelResize:r,onCloseZoneChange:a,onPanelClose:n,minCentralWidth:l=q.minCentralWidth,className:i})=>{const[x,o]=j.useState(null),c=j.useRef(null),u=j.useCallback(v=>{o(v)},[]),d=j.useCallback((v,y)=>{r(v,y)},[r]),m=j.useCallback((v,y)=>{o(null),y&&n&&n(v)},[n]),p=j.useCallback((v,y)=>{a&&a(v,y)},[a]),b=j.useCallback(v=>{const y=ae(s,v);if(y)return{...y.panel,isResizing:x===v}},[s,x]),w=j.useMemo(()=>({panels:s,onResizeStart:u,onResize:d,onResizeEnd:m,onCloseZoneChange:p,getPanelState:b,minCentralWidth:l,containerRef:c}),[s,u,d,m,p,b,l]),{leftPanels:g,rightPanels:f,mainContent:C}=j.useMemo(()=>{const v=[],y=[];let M=null;return k.default.Children.forEach(t,I=>{if(k.default.isValidElement(I)){if(I.type&&I.type.displayName==="PanelMain"){M=I;return}if(I.type&&I.type.displayName==="Panel"){const T=I.props;T.side==="left"?v.push(I):T.side==="right"&&y.push(I)}}}),{leftPanels:v,rightPanels:y,mainContent:M}},[t]),N=x!==null;return e.jsx(ns.Provider,{value:w,children:e.jsxs("div",{ref:c,className:h.clsx("flex h-full w-full overflow-hidden","transition-all duration-100 ease-out",N&&"select-none",i),"data-panel-layout":!0,"data-resizing":N,children:[g,C,f]})})});is.displayName="PanelLayout";const hn=({height:t=200,side:s="right",fillColor:r="var(--surface-1)",className:a})=>{const o=(t-48)/2,c=o+48,u=s==="right",d=u?0:9,m=u?9-.5:.5,p=u?`
       M ${d} 0
       L ${d} ${o}
       Q ${d} ${o+4}, ${d+4} ${o+4}