@skalar-saas/design-system 0.1.151 → 0.1.152

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"),g=require("react"),Z=require("@headlessui/react"),ue=require("framer-motion"),h=require("clsx"),F=require("tailwind-merge"),L=require("iconsax-react"),Xt=require("@radix-ui/react-tooltip"),Ze=require("react-dom"),ka=require("@radix-ui/react-toast"),Sa=require("react-day-picker"),he=require("@dnd-kit/core"),de=require("@dnd-kit/sortable"),_s=require("@dnd-kit/utilities"),Ce=require("@tanstack/react-table"),La=require("@tanstack/react-virtual"),za=s=>s&&s.__esModule?s:{default:s};function Bs(s){if(s&&s.__esModule)return s;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const n in s)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(s,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:()=>s[n]})}}return t.default=s,Object.freeze(t)}const S=Bs(g),re=za(h),me=Bs(Xt),fe=Bs(ka),Ia={default:"max-w-container",narrow:"max-w-container-narrow",medium:"max-w-container-medium",wide:"max-w-container-wide",full:"max-w-none"},Ma={none:"",responsive:"px-container-mobile md:px-container-tablet lg:px-container-desktop",fixed:"px-container-desktop"},Yt=S.default.forwardRef(({size:s="default",centered:t=!0,padding:n="responsive",as:a="div",className:l,children:r,...i},c)=>{const o=F.twMerge(h.clsx("w-full",Ia[s],t&&"mx-auto",Ma[n],l));return e.jsx(a,{ref:c,className:o,...i,children:r})});Yt.displayName="Container";const Jt=S.default.forwardRef(({className:s,children:t,...n},a)=>e.jsx("div",{ref:a,className:F.twMerge(h.clsx("flex items-center justify-between","py-6 md:py-8",s)),...n,children:t}));Jt.displayName="Container.Header";const en=S.default.forwardRef(({className:s,children:t,...n},a)=>e.jsx("div",{ref:a,className:F.twMerge(h.clsx("flex-1",s)),...n,children:t}));en.displayName="Container.Content";const sn=S.default.forwardRef(({className:s,children:t,...n},a)=>e.jsx("div",{ref:a,className:F.twMerge(h.clsx("flex items-center justify-between","py-6 md:py-8","border-t border-surface-3",s)),...n,children:t}));sn.displayName="Container.Footer";const ds=Yt;ds.Header=Jt;ds.Content=en;ds.Footer=sn;const Ta={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"},Pa={transparent:"bg-transparent","surface-bg":"bg-surface-bg","surface-1":"bg-surface-1","surface-2":"bg-surface-2",white:"bg-white"},xs=S.default.forwardRef(({spacing:s="lg",background:t="transparent",bordered:n=!1,as:a="section",className:l,children:r,...i},c)=>{const o=F.twMerge(h.clsx("w-full",Ta[s],Pa[t],n&&"border-b border-surface-3",l));return e.jsx(a,{ref:c,className:o,...i,children:r})});xs.displayName="Section";const tn=S.default.forwardRef(({spacing:s="2xl",...t},n)=>e.jsx(xs,{ref:n,spacing:s,...t}));tn.displayName="SectionHero";const nn=S.default.forwardRef(({background:s="surface-1",...t},n)=>e.jsx(xs,{ref:n,background:s,...t}));nn.displayName="SectionFeatures";const Qe={sm:640,md:768,lg:1024,xl:1280,"2xl":1400,"3xl":1600},rn={default:1400,narrow:896,medium:1152,wide:1600},an={mobile:16,tablet:24,desktop:32,desktopLarge:48},ln={width:280,collapsedWidth:64,navigationWidth:240},on={headerHeight:60,tabsHeight:48,totalHeight:108},cn={none:0,xs:8,sm:16,md:24,lg:32,xl:48,"2xl":64},dn={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"},Da={breakpoints:Qe,container:rn,containerPadding:an,sidebar:ln,navbar:on,spacing:cn,cssVariables:dn};function Ra(s){return`${s/16}rem`}function Ea(s){return`${s}px`}function Aa(s,t="min"){const n=typeof s=="number"?s:Qe[s],a=t==="max"?n-1:n;return`(${t}-width: ${a}px)`}function Ha(s,t,n="gte"){const a=Qe[t];return n==="gte"?s>=a:s<a}function Va(s){const n=Object.entries(Qe).sort((a,l)=>l[1]-a[1]);for(const[a,l]of n)if(s>=l)return a;return"sm"}const xn=g.createContext(null);function $a(){const s=g.useContext(xn);if(!s)throw new Error("usePanelContext must be used within a PanelLayout");return s}const se={minWidth:200,maxWidthPercent:50,minCentralWidth:150,minCentralPercent:10,closeZoneMin:10,closeZoneMax:15,snapMinWidth:15,exitAnimationDuration:100};function Fa(s){return s>=se.closeZoneMin&&s<=se.closeZoneMax}function Et(s){return s<se.snapMinWidth?se.snapMinWidth:s}function ns(s,t,n=0,a=se.minCentralWidth){const l=t-a-n,i=Math.min(s,l)/t*100;return Math.max(10,Math.min(i,se.maxWidthPercent))}function un(s,t,n,a=0,l=se.minCentralWidth,r=0,i=0){const c=r/100*n;let o;s==="left"?o=t-c:o=n-t-c;const d=o/n*100,u=100-l/n*100-a-r;return Math.max(se.closeZoneMin,Math.min(d,u))}function rs(s){return s.filter(t=>t.open).reduce((t,n)=>t+n.width,0)}function hn(s){return rs(s.left)+rs(s.right)}function ve(s,t){const n=s.left.find(l=>l.id===t);if(n)return{panel:n,side:"left"};const a=s.right.find(l=>l.id===t);if(a)return{panel:a,side:"right"}}function Wa(s){return 100-hn(s)}function ts(s,t=typeof window<"u"?window.innerWidth:1920){const n={left:[],right:[]};return s.forEach(a=>{const r=s.filter(o=>o.side===a.side&&o.id!==a.id).reduce((o,d)=>o+d.defaultWidth,0),i=ns(a.defaultWidth,t,r),c={id:a.id,open:!0,width:i};n[a.side].push(c)}),n}const mn=S.default.memo(({children:s,panels:t,onPanelResize:n,onCloseZoneChange:a,onPanelClose:l,minCentralWidth:r=se.minCentralWidth,className:i})=>{const[c,o]=g.useState(null),d=g.useRef(null),x=g.useCallback(k=>{o(k)},[]),u=g.useCallback((k,N)=>{n(k,N)},[n]),m=g.useCallback((k,N)=>{o(null),N&&l&&l(k)},[l]),f=g.useCallback((k,N)=>{a&&a(k,N)},[a]),j=g.useCallback(k=>{const N=ve(t,k);if(N)return{...N.panel,isResizing:c===k}},[t,c]),v=g.useMemo(()=>({panels:t,onResizeStart:x,onResize:u,onResizeEnd:m,onCloseZoneChange:f,getPanelState:j,minCentralWidth:r,containerRef:d}),[t,x,u,m,f,j,r]),{leftPanels:b,rightPanels:p,mainContent:w}=g.useMemo(()=>{const k=[],N=[];let C=null;return S.default.Children.forEach(s,P=>{if(S.default.isValidElement(P)){if(P.type&&P.type.displayName==="PanelMain"){C=P;return}if(P.type&&P.type.displayName==="Panel"){const D=P.props;D.side==="left"?k.push(P):D.side==="right"&&N.push(P)}}}),{leftPanels:k,rightPanels:N,mainContent:C}},[s]),y=c!==null;return e.jsx(xn.Provider,{value:v,children:e.jsxs("div",{ref:d,className:h.clsx("flex h-full w-full overflow-hidden","transition-all duration-100 ease-out",y&&"select-none",i),"data-panel-layout":!0,"data-resizing":y,children:[b,w,p]})})});mn.displayName="PanelLayout";const fn=({height:s=200,side:t="right",fillColor:n="var(--surface-1)",className:a})=>{const o=(s-48)/2,d=o+48,x=t==="right",u=x?.5:9-.5,m=x?9-.5:.5,f=x?0:9-.5,j=x?`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),Z=require("@headlessui/react"),ue=require("framer-motion"),h=require("clsx"),F=require("tailwind-merge"),L=require("iconsax-react"),Xt=require("@radix-ui/react-tooltip"),Ze=require("react-dom"),ka=require("@radix-ui/react-toast"),Sa=require("react-day-picker"),he=require("@dnd-kit/core"),de=require("@dnd-kit/sortable"),_s=require("@dnd-kit/utilities"),Ce=require("@tanstack/react-table"),La=require("@tanstack/react-virtual"),za=s=>s&&s.__esModule?s:{default:s};function Bs(s){if(s&&s.__esModule)return s;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const n in s)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(s,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:()=>s[n]})}}return t.default=s,Object.freeze(t)}const S=Bs(g),re=za(h),me=Bs(Xt),fe=Bs(ka),Ia={default:"max-w-container",narrow:"max-w-container-narrow",medium:"max-w-container-medium",wide:"max-w-container-wide",full:"max-w-none"},Ma={none:"",responsive:"px-container-mobile md:px-container-tablet lg:px-container-desktop",fixed:"px-container-desktop"},Yt=S.default.forwardRef(({size:s="default",centered:t=!0,padding:n="responsive",as:a="div",className:l,children:r,...i},c)=>{const o=F.twMerge(h.clsx("w-full",Ia[s],t&&"mx-auto",Ma[n],l));return e.jsx(a,{ref:c,className:o,...i,children:r})});Yt.displayName="Container";const Jt=S.default.forwardRef(({className:s,children:t,...n},a)=>e.jsx("div",{ref:a,className:F.twMerge(h.clsx("flex items-center justify-between","py-6 md:py-8",s)),...n,children:t}));Jt.displayName="Container.Header";const en=S.default.forwardRef(({className:s,children:t,...n},a)=>e.jsx("div",{ref:a,className:F.twMerge(h.clsx("flex-1",s)),...n,children:t}));en.displayName="Container.Content";const sn=S.default.forwardRef(({className:s,children:t,...n},a)=>e.jsx("div",{ref:a,className:F.twMerge(h.clsx("flex items-center justify-between","py-6 md:py-8","border-t border-surface-3",s)),...n,children:t}));sn.displayName="Container.Footer";const ds=Yt;ds.Header=Jt;ds.Content=en;ds.Footer=sn;const Ta={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"},Pa={transparent:"bg-transparent","surface-bg":"bg-surface-bg","surface-1":"bg-surface-1","surface-2":"bg-surface-2",white:"bg-white"},xs=S.default.forwardRef(({spacing:s="lg",background:t="transparent",bordered:n=!1,as:a="section",className:l,children:r,...i},c)=>{const o=F.twMerge(h.clsx("w-full",Ta[s],Pa[t],n&&"border-b border-surface-3",l));return e.jsx(a,{ref:c,className:o,...i,children:r})});xs.displayName="Section";const tn=S.default.forwardRef(({spacing:s="2xl",...t},n)=>e.jsx(xs,{ref:n,spacing:s,...t}));tn.displayName="SectionHero";const nn=S.default.forwardRef(({background:s="surface-1",...t},n)=>e.jsx(xs,{ref:n,background:s,...t}));nn.displayName="SectionFeatures";const Qe={sm:640,md:768,lg:1024,xl:1280,"2xl":1400,"3xl":1600},rn={default:1400,narrow:896,medium:1152,wide:1600},an={mobile:16,tablet:24,desktop:32,desktopLarge:48},ln={width:280,collapsedWidth:64,navigationWidth:240},on={headerHeight:60,tabsHeight:48,totalHeight:108},cn={none:0,xs:8,sm:16,md:24,lg:32,xl:48,"2xl":64},dn={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"},Da={breakpoints:Qe,container:rn,containerPadding:an,sidebar:ln,navbar:on,spacing:cn,cssVariables:dn};function Ra(s){return`${s/16}rem`}function Ea(s){return`${s}px`}function Aa(s,t="min"){const n=typeof s=="number"?s:Qe[s],a=t==="max"?n-1:n;return`(${t}-width: ${a}px)`}function Ha(s,t,n="gte"){const a=Qe[t];return n==="gte"?s>=a:s<a}function Va(s){const n=Object.entries(Qe).sort((a,l)=>l[1]-a[1]);for(const[a,l]of n)if(s>=l)return a;return"sm"}const xn=g.createContext(null);function $a(){const s=g.useContext(xn);if(!s)throw new Error("usePanelContext must be used within a PanelLayout");return s}const se={minWidth:200,maxWidthPercent:50,minCentralWidth:150,minCentralPercent:10,closeZoneMin:10,closeZoneMax:15,snapMinWidth:15,exitAnimationDuration:100};function Fa(s){return s>=se.closeZoneMin&&s<=se.closeZoneMax}function Et(s){return s<se.snapMinWidth?se.snapMinWidth:s}function ns(s,t,n=0,a=se.minCentralWidth){const l=t-a-n,i=Math.min(s,l)/t*100;return Math.max(10,Math.min(i,se.maxWidthPercent))}function un(s,t,n,a=0,l=se.minCentralWidth,r=0,i=0){const c=r/100*n;let o;s==="left"?o=t-c:o=n-t-c;const d=o/n*100,u=100-l/n*100-a-r;return Math.max(se.closeZoneMin,Math.min(d,u))}function rs(s){return s.filter(t=>t.open).reduce((t,n)=>t+n.width,0)}function hn(s){return rs(s.left)+rs(s.right)}function ve(s,t){const n=s.left.find(l=>l.id===t);if(n)return{panel:n,side:"left"};const a=s.right.find(l=>l.id===t);if(a)return{panel:a,side:"right"}}function Wa(s){return 100-hn(s)}function ts(s,t=typeof window<"u"?window.innerWidth:1920){const n={left:[],right:[]};return s.forEach(a=>{const r=s.filter(o=>o.side===a.side&&o.id!==a.id).reduce((o,d)=>o+d.defaultWidth,0),i=ns(a.defaultWidth,t,r),c={id:a.id,open:a.defaultOpen??!0,width:i};n[a.side].push(c)}),n}const mn=S.default.memo(({children:s,panels:t,onPanelResize:n,onCloseZoneChange:a,onPanelClose:l,minCentralWidth:r=se.minCentralWidth,className:i})=>{const[c,o]=g.useState(null),d=g.useRef(null),x=g.useCallback(k=>{o(k)},[]),u=g.useCallback((k,N)=>{n(k,N)},[n]),m=g.useCallback((k,N)=>{o(null),N&&l&&l(k)},[l]),f=g.useCallback((k,N)=>{a&&a(k,N)},[a]),j=g.useCallback(k=>{const N=ve(t,k);if(N)return{...N.panel,isResizing:c===k}},[t,c]),v=g.useMemo(()=>({panels:t,onResizeStart:x,onResize:u,onResizeEnd:m,onCloseZoneChange:f,getPanelState:j,minCentralWidth:r,containerRef:d}),[t,x,u,m,f,j,r]),{leftPanels:b,rightPanels:p,mainContent:w}=g.useMemo(()=>{const k=[],N=[];let C=null;return S.default.Children.forEach(s,P=>{if(S.default.isValidElement(P)){if(P.type&&P.type.displayName==="PanelMain"){C=P;return}if(P.type&&P.type.displayName==="Panel"){const D=P.props;D.side==="left"?k.push(P):D.side==="right"&&N.push(P)}}}),{leftPanels:k,rightPanels:N,mainContent:C}},[s]),y=c!==null;return e.jsx(xn.Provider,{value:v,children:e.jsxs("div",{ref:d,className:h.clsx("flex h-full w-full overflow-hidden","transition-all duration-100 ease-out",y&&"select-none",i),"data-panel-layout":!0,"data-resizing":y,children:[b,w,p]})})});mn.displayName="PanelLayout";const fn=({height:s=200,side:t="right",fillColor:n="var(--surface-1)",className:a})=>{const o=(s-48)/2,d=o+48,x=t==="right",u=x?.5:9-.5,m=x?9-.5:.5,f=x?0:9-.5,j=x?`
       M ${u} 0
       L ${u} ${o}
       Q ${u} ${o+4}, ${u+4} ${o+4}