@cryptlex/web-components 6.6.19 → 6.6.22

package/dist/components/object-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"object-table.js","sources":["../../lib/components/object-table.tsx"],"sourcesContent":["import { Badge } from '../components/badge';\nimport { Card, CardContent, CardHeader, CardTitle } from '../components/card';\nimport { Skeleton } from '../components/skeleton';\nimport { formatDate } from '../utilities/date';\n\n// Utility type to handle nested keys (dot notation) in any object\ntype NestedKeyOf<T> = T extends object\n    ? {\n          [K in keyof T]: K extends string | number ? `${K & string}` | `${K & string}.${NestedKeyOf<T[K]>}` : never;\n      }[keyof T]\n    : never;\n\n// DisplayField type that works with nested keys\nexport type DisplayField<T> = {\n    display: string;\n    accessor: NestedKeyOf<T>;\n    type?: 'text' | 'badge' | 'boolean' | 'date' | 'yesno' | 'copyButton' | 'link'; // Field types\n    render?: (value: T) => React.ReactNode;\n};\n\nexport interface KeyValueCardProps<T> {\n    data: T; // Ensure data is of type T\n    label: string;\n    fields: DisplayField<T>[];\n    className?: string;\n}\n\n// This component is used to render object values in a tabular format\n// General patterns in the table are\n// Number\n// Status properties\n\nexport function ObjectTable<T extends object>({ data, label, fields }: KeyValueCardProps<T>) {\n    const renderValue = (field: DisplayField<T>, value: any) => {\n        if (field.render) {\n            return field.render(value);\n        }\n        if (value === undefined || value === null) {\n            return '-';\n        }\n        switch (field.type) {\n            case 'date':\n                return <span>{formatDate(value)}</span>;\n            case 'yesno':\n                return <span>{value ? 'Yes' : 'No'}</span>;\n            case 'badge':\n                return (\n                    <div className=\"flex flex-wrap gap-1\">\n                        {Array.isArray(value)\n                            ? value.map((item, index) => (\n                                  <Badge key={index}>{typeof item === 'object' ? item?.name || item?.id : item}</Badge>\n                              ))\n                            : value}\n                    </div>\n                );\n\n            case 'boolean':\n                return <span>{value.toString()}</span>;\n            default:\n                return <span>{value}</span>;\n        }\n    };\n\n    return (\n        <Card>\n            <CardHeader>\n                <CardTitle>{label}</CardTitle>\n            </CardHeader>\n            <CardContent>\n                <div className=\"flex flex-col gap-2\">\n                    {data\n                        ? fields.map(field => {\n                              // TODO: improve this\n                              const value = field.accessor\n                                  ? field.accessor\n                                        .split('.')\n                                        .reduce(\n                                            (obj, key) => (obj && key in obj ? obj[key] : undefined),\n                                            data as Record<string, any>\n                                        )\n                                  : null;\n\n                              return (\n                                  <div\n                                      key={field.display}\n                                      className=\"flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0\"\n                                  >\n                                      <p className=\"body flex w-full justify-start col-span-1\">{field.display}</p>\n                                      <div className=\"body flex w-full justify-start text-wrap break-all\">\n                                          {renderValue(field, value)}\n                                      </div>\n                                  </div>\n                              );\n                          })\n                        : fields.map((_, index) => <Skeleton key={index} className=\"h-12 w-full\" />)}\n                </div>\n            </CardContent>\n        </Card>\n    );\n}\n"],"names":["ObjectTable","data","label","fields","renderValue","field","value","jsx","formatDate","item","index","Badge","Card","CardHeader","CardTitle","CardContent","obj","key","jsxs","_","Skeleton"],"mappings":"4SAgCO,SAASA,EAA8B,CAAE,KAAAC,EAAM,MAAAC,EAAO,OAAAC,GAAgC,CACzF,MAAMC,EAAc,CAACC,EAAwBC,IAAe,CACxD,GAAID,EAAM,OACN,OAAOA,EAAM,OAAOC,CAAK,EAE7B,GAA2BA,GAAU,KACjC,MAAO,IAEX,OAAQD,EAAM,KAAA,CACV,IAAK,OACD,OAAOE,EAAC,OAAA,CAAM,SAAAC,EAAWF,CAAK,EAAE,EACpC,IAAK,QACD,OAAOC,EAAC,OAAA,CAAM,SAAAD,EAAQ,MAAQ,KAAK,EACvC,IAAK,QACD,OACIC,EAAC,MAAA,CAAI,UAAU,uBACV,SAAA,MAAM,QAAQD,CAAK,EACdA,EAAM,IAAI,CAACG,EAAMC,MACZC,EAAA,CAAmB,SAAA,OAAOF,GAAS,SAAWA,GAAM,MAAQA,GAAM,GAAKA,CAAA,EAA5DC,CAAiE,CAChF,EACDJ,CAAA,CACV,EAGR,IAAK,UACD,OAAOC,EAAC,OAAA,CAAM,SAAAD,EAAM,SAAA,EAAW,EACnC,QACI,OAAOC,EAAC,QAAM,SAAAD,CAAA,CAAM,CAAA,CAEhC,EAEA,SACKM,EAAA,CACG,SAAA,CAAAL,EAACM,EAAA,CACG,SAAAN,EAACO,EAAA,CAAW,SAAAZ,CAAA,CAAM,EACtB,EACAK,EAACQ,GACG,SAAAR,EAAC,MAAA,CAAI,UAAU,sBACV,SAAAN,EACKE,EAAO,IAAIE,GAAS,CAEhB,MAAMC,EAAQD,EAAM,SACdA,EAAM,SACD,MAAM,GAAG,EACT,OACG,CAACW,EAAKC,IAASD,GAAOC,KAAOD,EAAMA,EAAIC,CAAG,EAAI,OAC9ChB,CAAA,EAER,KAEN,OACIiB,EAAC,MAAA,CAEG,UAAU,wEAEV,SAAA,CAAAX,EAAC,IAAA,CAAE,UAAU,4CAA6C,SAAAF,EAAM,QAAQ,IACvE,MAAA,CAAI,UAAU,qDACV,SAAAD,EAAYC,EAAOC,CAAK,CAAA,CAC7B,CAAA,CAAA,EANKD,EAAM,OAAA,CASvB,CAAC,EACDF,EAAO,IAAI,CAACgB,EAAGT,IAAUH,EAACa,EAAA,CAAqB,UAAU,aAAA,EAAjBV,CAA+B,CAAE,EACnF,CAAA,CACJ,CAAA,EACJ,CAER"}
+{"version":3,"file":"object-table.js","sources":["../../lib/components/object-table.tsx"],"sourcesContent":["import { Badge } from '../components/badge';\nimport { Card, CardContent, CardHeader, CardTitle } from '../components/card';\nimport { Skeleton } from '../components/skeleton';\nimport { formatDate } from '../utilities/date';\n\n// Utility type to handle nested keys (dot notation) in any object\ntype NestedKeyOf<T> = T extends object\n    ? {\n          [K in keyof T]: K extends string | number ? `${K & string}` | `${K & string}.${NestedKeyOf<T[K]>}` : never;\n      }[keyof T]\n    : never;\n\n// DisplayField type that works with nested keys\nexport type DisplayField<T> = {\n    display: string;\n    accessor: NestedKeyOf<T>;\n    type?: 'text' | 'badge' | 'boolean' | 'date' | 'yesno' | 'copyButton' | 'link'; // Field types\n    render?: (value: T) => React.ReactNode;\n};\n\nexport interface KeyValueCardProps<T> {\n    data: T; // Ensure data is of type T\n    label: string;\n    fields: DisplayField<T>[];\n    className?: string;\n}\n\n// This component is used to render object values in a tabular format\n// General patterns in the table are\n// Number\n// Status properties\n\nexport function ObjectTable<T extends object>({ data, label, fields }: KeyValueCardProps<T>) {\n    const renderValue = (field: DisplayField<T>, value: any) => {\n        if (field.render) {\n            return field.render(value);\n        }\n        if (value === undefined || value === null) {\n            return '-';\n        }\n        switch (field.type) {\n            case 'date':\n                return <span>{formatDate(value)}</span>;\n            case 'yesno':\n                return <span>{value ? 'Yes' : 'No'}</span>;\n            case 'badge':\n                return (\n                    <div className=\"flex flex-wrap gap-1\">\n                        {Array.isArray(value)\n                            ? value.map((item, index) => (\n                                  <Badge key={index}>{typeof item === 'object' ? item?.name || item?.id : item}</Badge>\n                              ))\n                            : value}\n                    </div>\n                );\n\n            case 'boolean':\n                return <span>{value.toString()}</span>;\n            default:\n                return <span>{value}</span>;\n        }\n    };\n\n    return (\n        <Card>\n            <CardHeader>\n                <CardTitle>{label}</CardTitle>\n            </CardHeader>\n            <CardContent>\n                <div className=\"flex flex-col gap-2\">\n                    {data\n                        ? fields.map(field => {\n                              // TODO: improve this\n                              const value = field.accessor\n                                  ? field.accessor\n                                        .split('.')\n                                        .reduce(\n                                            (obj, key) => (obj && key in obj ? obj[key] : undefined),\n                                            data as Record<string, any>\n                                        )\n                                  : null;\n\n                              return (\n                                  <div\n                                      key={field.display}\n                                      className=\"flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0\"\n                                  >\n                                      <p className=\"body flex w-full justify-start col-span-1\">{field.display}</p>\n                                      <div className=\"body flex w-full justify-start text-wrap break-all\">\n                                          {renderValue(field, value)}\n                                      </div>\n                                  </div>\n                              );\n                          })\n                        : fields.map((_, index) => <Skeleton key={index} className=\"h-12 w-full\" />)}\n                </div>\n            </CardContent>\n        </Card>\n    );\n}\n"],"names":["ObjectTable","data","label","fields","renderValue","field","value","jsx","formatDate","item","index","Badge","Card","CardHeader","CardTitle","CardContent","obj","key","jsxs","_","Skeleton"],"mappings":"6UAgCO,SAASA,EAA8B,CAAE,KAAAC,EAAM,MAAAC,EAAO,OAAAC,GAAgC,CACzF,MAAMC,EAAc,CAACC,EAAwBC,IAAe,CACxD,GAAID,EAAM,OACN,OAAOA,EAAM,OAAOC,CAAK,EAE7B,GAA2BA,GAAU,KACjC,MAAO,IAEX,OAAQD,EAAM,KAAA,CACV,IAAK,OACD,OAAOE,EAAC,OAAA,CAAM,SAAAC,EAAWF,CAAK,EAAE,EACpC,IAAK,QACD,OAAOC,EAAC,OAAA,CAAM,SAAAD,EAAQ,MAAQ,KAAK,EACvC,IAAK,QACD,OACIC,EAAC,MAAA,CAAI,UAAU,uBACV,SAAA,MAAM,QAAQD,CAAK,EACdA,EAAM,IAAI,CAACG,EAAMC,MACZC,EAAA,CAAmB,SAAA,OAAOF,GAAS,SAAWA,GAAM,MAAQA,GAAM,GAAKA,CAAA,EAA5DC,CAAiE,CAChF,EACDJ,CAAA,CACV,EAGR,IAAK,UACD,OAAOC,EAAC,OAAA,CAAM,SAAAD,EAAM,SAAA,EAAW,EACnC,QACI,OAAOC,EAAC,QAAM,SAAAD,CAAA,CAAM,CAAA,CAEhC,EAEA,SACKM,EAAA,CACG,SAAA,CAAAL,EAACM,EAAA,CACG,SAAAN,EAACO,EAAA,CAAW,SAAAZ,CAAA,CAAM,EACtB,EACAK,EAACQ,GACG,SAAAR,EAAC,MAAA,CAAI,UAAU,sBACV,SAAAN,EACKE,EAAO,IAAIE,GAAS,CAEhB,MAAMC,EAAQD,EAAM,SACdA,EAAM,SACD,MAAM,GAAG,EACT,OACG,CAACW,EAAKC,IAASD,GAAOC,KAAOD,EAAMA,EAAIC,CAAG,EAAI,OAC9ChB,CAAA,EAER,KAEN,OACIiB,EAAC,MAAA,CAEG,UAAU,wEAEV,SAAA,CAAAX,EAAC,IAAA,CAAE,UAAU,4CAA6C,SAAAF,EAAM,QAAQ,IACvE,MAAA,CAAI,UAAU,qDACV,SAAAD,EAAYC,EAAOC,CAAK,CAAA,CAC7B,CAAA,CAAA,EANKD,EAAM,OAAA,CASvB,CAAC,EACDF,EAAO,IAAI,CAACgB,EAAGT,IAAUH,EAACa,EAAA,CAAqB,UAAU,aAAA,EAAjBV,CAA+B,CAAE,EACnF,CAAA,CACJ,CAAA,EACJ,CAER"}

package/dist/components/progress-bar.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { ProgressBarProps as AriaProgressBarProps } from 'react-aria-components';
+export type ProgressBarProps = AriaProgressBarProps & {
+    label?: ReactNode;
+    showValueLabel?: boolean;
+};
+export declare function ProgressBar({ className, label, showValueLabel, ...props }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/progress-bar.js

@@ -0,0 +1,2 @@
+"use client";import{jsx as e,jsxs as a,Fragment as m}from"react/jsx-runtime";import{useId as n}from"react";import{ProgressBar as c,composeRenderProps as f}from"react-aria-components";import{classNames as o}from"../utilities/theme.js";import"clsx";function N({className:l,label:s,showValueLabel:i=!1,...t}){return e(c,{...t,"aria-labelledby":n(),className:f(l,r=>o("w-96 flex flex-col gap-1",r)),children:({percentage:r,valueText:d})=>a(m,{children:[(s||i)&&a("div",{className:"flex items-center justify-between body-sm",children:[e("div",{className:"text-foreground",children:s}),i&&e("div",{className:"tabular-nums text-muted-foreground",children:d})]}),e("div",{className:"h-2 w-full overflow-hidden rounded-full bg-primary/15",children:e("div",{className:o("h-full bg-primary transition-[width] duration-300 ease-out"),style:{width:`${r}%`}})})]})})}export{N as ProgressBar};
+//# sourceMappingURL=progress-bar.js.map

package/dist/components/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.js","sources":["../../lib/components/progress-bar.tsx"],"sourcesContent":["'use client';\nimport { useId, type ReactNode } from 'react';\nimport {\n    ProgressBar as AriaProgressBar,\n    composeRenderProps,\n    type ProgressBarProps as AriaProgressBarProps,\n} from 'react-aria-components';\nimport { classNames } from '../utilities/theme';\n\nexport type ProgressBarProps = AriaProgressBarProps & {\n    label?: ReactNode;\n    showValueLabel?: boolean;\n};\n\nexport function ProgressBar({ className, label, showValueLabel = false, ...props }: ProgressBarProps) {\n    return (\n        <AriaProgressBar\n            {...props}\n            aria-labelledby={useId()}\n            className={composeRenderProps(className, className => classNames('w-96 flex flex-col gap-1', className))}\n        >\n            {({ percentage, valueText }) => (\n                <>\n                    {(label || showValueLabel) && (\n                        <div className=\"flex items-center justify-between body-sm\">\n                            <div className=\"text-foreground\">{label}</div>\n                            {showValueLabel && <div className=\"tabular-nums text-muted-foreground\">{valueText}</div>}\n                        </div>\n                    )}\n\n                    <div className=\"h-2 w-full overflow-hidden rounded-full bg-primary/15\">\n                        <div\n                            className={classNames('h-full bg-primary transition-[width] duration-300 ease-out')}\n                            style={{ width: `${percentage}%` }}\n                        />\n                    </div>\n                </>\n            )}\n        </AriaProgressBar>\n    );\n}\n"],"names":["ProgressBar","className","label","showValueLabel","props","jsx","AriaProgressBar","useId","composeRenderProps","classNames","percentage","valueText","jsxs","Fragment"],"mappings":"uPAcO,SAASA,EAAY,CAAE,UAAAC,EAAW,MAAAC,EAAO,eAAAC,EAAiB,GAAO,GAAGC,GAA2B,CAClG,OACIC,EAACC,EAAA,CACI,GAAGF,EACJ,kBAAiBG,EAAA,EACjB,UAAWC,EAAmBP,EAAWA,GAAaQ,EAAW,2BAA4BR,CAAS,CAAC,EAEtG,SAAA,CAAC,CAAE,WAAAS,EAAY,UAAAC,CAAA,IACZC,EAAAC,EAAA,CACM,SAAA,EAAAX,GAASC,IACPS,EAAC,MAAA,CAAI,UAAU,4CACX,SAAA,CAAAP,EAAC,MAAA,CAAI,UAAU,kBAAmB,SAAAH,EAAM,EACvCC,GAAkBE,EAAC,MAAA,CAAI,UAAU,qCAAsC,SAAAM,CAAA,CAAU,CAAA,EACtF,EAGJN,EAAC,MAAA,CAAI,UAAU,wDACX,SAAAA,EAAC,MAAA,CACG,UAAWI,EAAW,4DAA4D,EAClF,MAAO,CAAE,MAAO,GAAGC,CAAU,GAAA,CAAI,CAAA,CACrC,CACJ,CAAA,CAAA,CACJ,CAAA,CAAA,CAIhB"}

package/dist/components/sidebar.d.ts

@@ -96,6 +96,7 @@ export declare function SidebarMenuSub({ className, ...props }: React.ComponentP
  * Submenu item wrapper
  */
 export declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
+export declare const sidebarMenuButtonClasses = "btn-tab py-3 h-auto rounded-none w-full selected:shadow-[inset_2px_0_0_0_var(--color-primary)] group-data-[collapsible=icon]:![font-size:0] group-data-[collapsible=icon]:!justify-center group-data-[collapsible=icon]:!px-0 group-data-[collapsible=icon]:!gap-0 group-data-[collapsible=icon]:!rounded-md group-data-[collapsible=icon]:selected:shadow-none";
 /**
  * Main menu button. Pass isActive for current page.
  */
@@ -111,6 +112,13 @@ export declare function SidebarMenuButton({ isActive, tooltip, className, ...pro
 export declare function SidebarMenuSubButton({ isActive, className, ...props }: React.ComponentProps<'button'> & {
     isActive?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+/**
+ * Sticky header at the top of the sidebar. Displays a square logo slot aligned with the outlet header.
+ */
+export declare function SidebarHeader({ className, logo, children, ...props }: React.ComponentProps<'div'> & {
+    /** Square logo/icon to display */
+    logo?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 /**
  * The main content area next to the sidebar
  */

package/dist/components/sidebar.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as a,Fragment as O,jsxs as S}from"react/jsx-runtime";import{createContext as k,use as _,useState as v,useCallback as x,useEffect as I,useMemo as D}from"react";import{Button as T}from"./button.js";import{DialogTrigger as z,DialogOverlay as B,DialogContent as E}from"./dialog.js";import{TooltipTrigger as G,Tooltip as K}from"./tooltip.js";import{classNames as i}from"../utilities/theme.js";import{useIsMobile as L}from"../utilities/use-mobile.js";import{IcMoreHorizontal as R,IcLeft as j,IcRight as A}from"./icons.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";const H="/",N=k(null);function h(){const e=_(N);if(!e)throw new Error("useSidebar must be used within a SidebarProvider.");return e}function ee({defaultOpen:e=!0,open:t,onOpenChange:n,className:l,style:d,children:r,...s}){const u=L(),[p,b]=v(!1),[M,y]=v(e),f=t??M,m=x(o=>{const c=typeof o=="function"?o(f):o;n?n(c):y(c)},[n,f]),g=x(()=>u?b(o=>!o):m(o=>!o),[u,m,b]);I(()=>{const o=c=>{c.key===H&&(c.metaKey||c.ctrlKey)&&(c.preventDefault(),g())};return window.addEventListener("keydown",o),()=>window.removeEventListener("keydown",o)},[g]);const w=f?"expanded":"collapsed",C=D(()=>({state:w,open:f,setOpen:m,isMobile:u,openMobile:p,setOpenMobile:b,toggleSidebar:g}),[w,f,m,u,p,b,g]);return a(N.Provider,{value:C,children:a("div",{className:i("group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-elevation-1",l),...s,children:r})})}function te({side:e="left",variant:t="sidebar",collapsible:n="offcanvas",className:l,children:d,...r}){const{isMobile:s,state:u,openMobile:p,setOpenMobile:b}=h();return n==="none"?a("div",{className:i("flex h-full w-[--sidebar-width] flex-col bg-elevation-1 text-foreground",l),...r,children:d}):s?a(z,{isOpen:p,onOpenChange:b,...r,children:a(B,{children:a(E,{"data-sidebar":"sidebar","data-mobile":"true",className:"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden",side:"left",children:()=>a(O,{children:d})})})}):S("div",{className:"group peer hidden text-foreground md:block","data-state":u,"data-collapsible":u==="collapsed"?n:"","data-variant":t,"data-side":e,children:[a("div",{className:i("relative w-(--sidebar-width) bg-elevation-1 transition-[width] duration-200 ease-linear","group-data-[collapsible=offcanvas]:w-0","group-data-[side=right]:rotate-180",t==="floating"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]":"group-data-[collapsible=icon]:w-[--sidebar-width-icon]")}),a("div",{className:i("absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",e==="left"?"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]":"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",t==="floating"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]":"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",l),...r,children:a("div",{"data-sidebar":"sidebar",className:"flex h-full w-full flex-col bg-elevation-1 group-data-[variant=floating]:border group-data-[variant=floating]:border-border",children:d})})]})}function ae({className:e,onClick:t,...n}){const{toggleSidebar:l,open:d,isMobile:r}=h();return a(T,{"data-sidebar":"trigger",variant:"neutral",size:"icon",className:"rounded-full",onClick:s=>{t?.(s),l()},...n,children:r?a(R,{}):d?a(j,{}):a(A,{})})}function ie({className:e,...t}){return a("div",{"data-sidebar":"content",className:i("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",e),...t})}function ne({className:e,...t}){return a("div",{"data-sidebar":"group",className:i("relative flex w-full min-w-0 flex-col",e),...t})}function oe({className:e,...t}){return a("div",{"data-sidebar":"group-label",className:i("flex h-input shrink-0 items-center px-2 body-sm font-medium text-sidebar-foreground/70 outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0","group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0",e),...t})}function re({className:e,...t}){return a("div",{"data-sidebar":"group-content",className:i("w-full body-sm",e),...t})}function le({className:e,...t}){return a("ul",{"data-sidebar":"menu",className:i("flex w-full min-w-0 flex-col",e),...t})}function de({className:e,...t}){return a("li",{"data-sidebar":"menu-item",className:i("group/menu-item relative list-none",e),...t})}function se({className:e,...t}){return a("button",{"data-sidebar":"menu-action",className:i("absolute top-0 right-0 btn btn-ghost h-input","group-data-[collapsible=icon]:hidden",e),...t})}function ue({className:e,number:t,...n}){return a("div",{"data-sidebar":"menu-badge",className:i("absolute pointer-events-none top-0 right-0 font-light h-input select-none flex items-center justify-center body-sm tabular-nums","group-data-[collapsible=icon]:hidden",e),...n,children:new Intl.NumberFormat(navigator.language,{useGrouping:!0}).format(t)})}function ce({className:e,...t}){return a("ul",{"data-sidebar":"menu-sub",className:i("ms-2 flex min-w-0 flex-col border-l border-border","group-data-[collapsible=icon]:hidden",e),...t})}function be({className:e,...t}){return a("li",{className:i("list-none ms-0",e),...t})}function fe({isActive:e=!1,tooltip:t,className:n,...l}){const{isMobile:d,state:r}=h(),s=a("button",{"data-sidebar":"menu-button",...e&&{"data-selected":!0},className:i("peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input group-data-[collapsible=icon]:!size-icon group-data-[collapsible=icon]:!p-2 ","btn-tab rounded-none w-full",n),...l});return t?S(G,{children:[s,a(K,{hidden:r!=="collapsed"||d,...t})]}):s}function pe({isActive:e,className:t,...n}){return a("button",{"data-sidebar":"menu-sub-button","data-active":e,className:i("group-data-[collapsible=icon]:hidden","btn-tab rounded-none w-full",t),...n})}function me({className:e,...t}){return a("div",{className:i(e,"w-full overflow-auto"),...t})}function ge({className:e,...t}){return a("nav",{className:i("flex items-center h-header bg-elevation-1 sticky top-0 z-50 p-2 border-b",e),...t})}export{te as Sidebar,ie as SidebarContent,N as SidebarContext,ne as SidebarGroup,re as SidebarGroupContent,oe as SidebarGroupLabel,le as SidebarMenu,se as SidebarMenuAction,ue as SidebarMenuBadge,fe as SidebarMenuButton,de as SidebarMenuItem,ce as SidebarMenuSub,pe as SidebarMenuSubButton,be as SidebarMenuSubItem,me as SidebarOutlet,ge as SidebarOutletHeader,ee as SidebarProvider,ae as SidebarTrigger,h as useSidebar};
+"use client";import{jsx as t,Fragment as C,jsxs as h}from"react/jsx-runtime";import{createContext as O,use as I,useState as x,useCallback as S,useEffect as z,useMemo as B}from"react";import{Button as D}from"./button.js";import{DialogTrigger as T,DialogOverlay as j,DialogContent as E}from"./dialog.js";import{TooltipTrigger as G,Tooltip as H}from"./tooltip.js";import{classNames as i}from"../utilities/theme.js";import{useIsMobile as K}from"../utilities/use-mobile.js";import{IcMoreHorizontal as L,IcLeft as R,IcRight as A}from"./icons.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";const F="/",N=O(null);function v(){const a=I(N);if(!a)throw new Error("useSidebar must be used within a SidebarProvider.");return a}function ae({defaultOpen:a=!0,open:e,onOpenChange:n,className:o,style:s,children:l,...d}){const u=K(),[f,b]=x(!1),[M,_]=x(a),p=e??M,m=S(r=>{const c=typeof r=="function"?r(p):r;n?n(c):_(c)},[n,p]),g=S(()=>u?b(r=>!r):m(r=>!r),[u,m,b]);z(()=>{const r=c=>{c.key===F&&(c.metaKey||c.ctrlKey)&&(c.preventDefault(),g())};return window.addEventListener("keydown",r),()=>window.removeEventListener("keydown",r)},[g]);const w=p?"expanded":"collapsed",k=B(()=>({state:w,open:p,setOpen:m,isMobile:u,openMobile:f,setOpenMobile:b,toggleSidebar:g}),[w,p,m,u,f,b,g]);return t(N.Provider,{value:k,children:t("div",{className:i("group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-elevation-1",o),...d,children:l})})}function te({side:a="left",variant:e="sidebar",collapsible:n="icon",className:o,children:s,...l}){const{isMobile:d,state:u,openMobile:f,setOpenMobile:b}=v();return n==="none"?t("div",{className:i("flex h-full w-[--sidebar-width] flex-col bg-elevation-1 text-foreground",o),...l,children:s}):d?t(T,{isOpen:f,onOpenChange:b,...l,children:t(j,{children:t(E,{"data-sidebar":"sidebar","data-mobile":"true",className:"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden",side:"left",children:()=>t(C,{children:s})})})}):h("div",{className:"group peer hidden text-foreground md:block","data-state":u,"data-collapsible":u==="collapsed"?n:"","data-variant":e,"data-side":a,children:[t("div",{className:i("relative w-(--sidebar-width) bg-elevation-1 transition-[width] duration-200 ease-linear","group-data-[collapsible=offcanvas]:w-0","group-data-[side=right]:rotate-180",e==="floating"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]":"group-data-[collapsible=icon]:w-(--sidebar-width-icon)")}),t("div",{className:i("absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",a==="left"?"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]":"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",e==="floating"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]":"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",o),...l,children:t("div",{"data-sidebar":"sidebar",className:"flex h-full w-full flex-col bg-elevation-1 group-data-[variant=floating]:border group-data-[variant=floating]:border-border",children:s})})]})}function ie({className:a,onClick:e,...n}){const{toggleSidebar:o,open:s,isMobile:l}=v();return t(D,{"data-sidebar":"trigger",variant:"neutral",size:"icon",className:"!rounded-full",onClick:d=>{e?.(d),o()},...n,children:l?t(L,{}):s?t(R,{}):t(A,{})})}function ne({className:a,...e}){return t("div",{"data-sidebar":"content",className:i("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",a),...e})}function oe({className:a,...e}){return t("div",{"data-sidebar":"group",className:i("relative flex w-full min-w-0 flex-col group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-2",a),...e})}function re({className:a,...e}){return t("div",{"data-sidebar":"group-label",className:i("flex h-input shrink-0 items-center px-2 body-sm font-medium text-sidebar-foreground/70 outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0","group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0",a),...e})}function le({className:a,...e}){return t("div",{"data-sidebar":"group-content",className:i("w-full body-sm",a),...e})}function se({className:a,...e}){return t("ul",{"data-sidebar":"menu",className:i("flex w-full min-w-0 flex-col",a),...e})}function de({className:a,...e}){return t("li",{"data-sidebar":"menu-item",className:i("group/menu-item relative list-none group-data-[collapsible=icon]:[&>*:not([data-sidebar=menu-button])]:hidden",a),...e})}function ue({className:a,...e}){return t("button",{"data-sidebar":"menu-action",className:i("absolute top-0 right-0 btn btn-ghost h-input","group-data-[collapsible=icon]:hidden",a),...e})}function ce({className:a,number:e,...n}){return t("div",{"data-sidebar":"menu-badge",className:i("absolute pointer-events-none top-0 right-0 font-light h-input select-none flex items-center justify-center body-sm tabular-nums","group-data-[collapsible=icon]:hidden",a),...n,children:new Intl.NumberFormat(navigator.language,{useGrouping:!0}).format(e)})}function be({className:a,...e}){return t("ul",{"data-sidebar":"menu-sub",className:i("ms-2 flex min-w-0 flex-col border-l border-border","group-data-[collapsible=icon]:hidden",a),...e})}function pe({className:a,...e}){return t("li",{className:i("list-none ms-0",a),...e})}const y="btn-tab py-3 h-auto rounded-none w-full selected:shadow-[inset_2px_0_0_0_var(--color-primary)] group-data-[collapsible=icon]:![font-size:0] group-data-[collapsible=icon]:!justify-center group-data-[collapsible=icon]:!px-0 group-data-[collapsible=icon]:!gap-0 group-data-[collapsible=icon]:!rounded-md group-data-[collapsible=icon]:selected:shadow-none";function fe({isActive:a=!1,tooltip:e,className:n,...o}){const{isMobile:s,state:l}=v(),d=t("button",{"data-sidebar":"menu-button",...a&&{"data-selected":!0},className:i("peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input",y,n),...o});return e?h(G,{children:[d,t(H,{hidden:l!=="collapsed"||s,...e})]}):d}function me({isActive:a,className:e,...n}){return t("button",{"data-sidebar":"menu-sub-button","data-active":a,className:i(y,e),...n})}function ge({className:a,logo:e,children:n,...o}){return h("div",{"data-sidebar":"header",className:i("flex items-center h-header select-none shrink-0 border-b px-2 gap-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0",a),...o,children:[e&&t("div",{className:"flex items-center justify-center size-input shrink-0",children:e}),n&&t("div",{className:"flex-1 min-w-0 group-data-[collapsible=icon]:hidden",children:n})]})}function he({className:a,...e}){return t("div",{className:i(a,"w-full overflow-auto"),...e})}function ve({className:a,...e}){return t("nav",{className:i("flex items-center h-header bg-elevation-1 sticky top-0 z-50 p-2 border-b",a),...e})}export{te as Sidebar,ne as SidebarContent,N as SidebarContext,oe as SidebarGroup,le as SidebarGroupContent,re as SidebarGroupLabel,ge as SidebarHeader,se as SidebarMenu,ue as SidebarMenuAction,ce as SidebarMenuBadge,fe as SidebarMenuButton,de as SidebarMenuItem,be as SidebarMenuSub,me as SidebarMenuSubButton,pe as SidebarMenuSubItem,he as SidebarOutlet,ve as SidebarOutletHeader,ae as SidebarProvider,ie as SidebarTrigger,y as sidebarMenuButtonClasses,v as useSidebar};
 //# sourceMappingURL=sidebar.js.map

package/dist/components/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","sources":["../../lib/components/sidebar.tsx"],"sourcesContent":["'use client';\nimport { createContext, use, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Button } from '../components/button';\nimport { DialogContent, DialogOverlay, DialogTrigger } from '../components/dialog';\nimport { Tooltip, TooltipTrigger } from '../components/tooltip';\nimport { classNames } from '../utilities/theme';\nimport { useIsMobile } from '../utilities/use-mobile';\nimport { IcLeft, IcMoreHorizontal, IcRight } from './icons';\n\nconst SIDEBAR_KEYBOARD_SHORTCUT = '/';\n\ntype SidebarContextProps = {\n    state: 'expanded' | 'collapsed';\n    open: boolean;\n    setOpen: (open: boolean) => void;\n    openMobile: boolean;\n    setOpenMobile: (open: boolean) => void;\n    isMobile: boolean;\n    toggleSidebar: () => void;\n};\n\nexport const SidebarContext = createContext<SidebarContextProps | null>(null);\n\n/**\n * Get the current sidebar state and controls. Must be inside SidebarProvider.\n * @throws When used outside of SidebarProvider\n */\nexport function useSidebar() {\n    const context = use(SidebarContext);\n    if (!context) {\n        throw new Error('useSidebar must be used within a SidebarProvider.');\n    }\n\n    return context;\n}\n\n/**\n * Wraps your app layout and manages sidebar state. Handles keyboard shortcuts (Cmd/Ctrl + /)\n * and mobile vs desktop behavior.\n *\n * @example\n * <SidebarProvider>\n *   <Sidebar>...</Sidebar>\n *   <SidebarOutlet>\n *     <main>Your app content</main>\n *   </SidebarOutlet>\n * </SidebarProvider>\n */\nexport function SidebarProvider({\n    defaultOpen = true,\n    open: openProp,\n    onOpenChange: setOpenProp,\n    className,\n    style,\n    children,\n    ...props\n}: React.ComponentProps<'div'> & {\n    /** Initial open state. Defaults to true */\n    defaultOpen?: boolean;\n    /** Control the open state yourself */\n    open?: boolean;\n    /** Callback when sidebar opens/closes */\n    onOpenChange?: (open: boolean) => void;\n}) {\n    const isMobile = useIsMobile();\n    const [openMobile, setOpenMobile] = useState(false);\n\n    // This is the internal state of the sidebar.\n    // We use openProp and setOpenProp for control from outside the component.\n    const [_open, _setOpen] = useState(defaultOpen);\n    const open = openProp ?? _open;\n    const setOpen = useCallback(\n        (value: boolean | ((value: boolean) => boolean)) => {\n            const openState = typeof value === 'function' ? value(open) : value;\n            if (setOpenProp) {\n                setOpenProp(openState);\n            } else {\n                _setOpen(openState);\n            }\n        },\n        [setOpenProp, open]\n    );\n\n    // Helper to toggle the sidebar.\n    const toggleSidebar = useCallback(() => {\n        return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);\n    }, [isMobile, setOpen, setOpenMobile]);\n\n    // Adds a keyboard shortcut to toggle the sidebar.\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n                event.preventDefault();\n                toggleSidebar();\n            }\n        };\n\n        window.addEventListener('keydown', handleKeyDown);\n        return () => window.removeEventListener('keydown', handleKeyDown);\n    }, [toggleSidebar]);\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = open ? 'expanded' : 'collapsed';\n\n    const contextValue = useMemo<SidebarContextProps>(\n        () => ({\n            state,\n            open,\n            setOpen,\n            isMobile,\n            openMobile,\n            setOpenMobile,\n            toggleSidebar,\n        }),\n        [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n    );\n\n    return (\n        <SidebarContext.Provider value={contextValue}>\n            <div\n                className={classNames(\n                    'group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-elevation-1',\n                    className\n                )}\n                {...props}\n            >\n                {children}\n            </div>\n        </SidebarContext.Provider>\n    );\n}\n\n/**\n * The actual sidebar panel. On mobile it becomes a modal dialog.\n */\nexport function Sidebar({\n    side = 'left',\n    variant = 'sidebar',\n    collapsible = 'offcanvas',\n    className,\n    children,\n    ...props\n}: React.ComponentProps<'div'> & {\n    /** Where to dock the sidebar. Default: left */\n    side?: 'left' | 'right';\n    /** Style variant. Default: sidebar */\n    variant?: 'sidebar' | 'floating';\n    /** How it collapses. Default: offcanvas */\n    collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n    if (collapsible === 'none') {\n        return (\n            <div\n                className={classNames(\n                    'flex h-full w-[--sidebar-width] flex-col bg-elevation-1 text-foreground',\n                    className\n                )}\n                {...props}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    if (isMobile) {\n        return (\n            <DialogTrigger isOpen={openMobile} onOpenChange={setOpenMobile} {...props}>\n                <DialogOverlay>\n                    <DialogContent\n                        data-sidebar=\"sidebar\"\n                        data-mobile=\"true\"\n                        className=\"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden\"\n                        side=\"left\"\n                    >\n                        {() => <>{children}</>}\n                    </DialogContent>\n                </DialogOverlay>\n            </DialogTrigger>\n        );\n    }\n\n    return (\n        <div\n            className=\"group peer hidden text-foreground md:block\"\n            data-state={state}\n            data-collapsible={state === 'collapsed' ? collapsible : ''}\n            data-variant={variant}\n            data-side={side}\n        >\n            {/* This is what handles the sidebar gap on desktop */}\n            <div\n                className={classNames(\n                    'relative w-(--sidebar-width) bg-elevation-1 transition-[width] duration-200 ease-linear',\n                    'group-data-[collapsible=offcanvas]:w-0',\n                    'group-data-[side=right]:rotate-180',\n                    variant === 'floating'\n                        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n                        : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]'\n                )}\n            />\n            <div\n                className={classNames(\n                    'absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n                    side === 'left'\n                        ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n                        : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n                    // Adjust the padding for floating variant.\n                    variant === 'floating'\n                        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n                        : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n                    className\n                )}\n                {...props}\n            >\n                <div\n                    data-sidebar=\"sidebar\"\n                    className=\"flex h-full w-full flex-col bg-elevation-1 group-data-[variant=floating]:border group-data-[variant=floating]:border-border\"\n                >\n                    {children}\n                </div>\n            </div>\n        </div>\n    );\n}\n\n/**\n * Button that toggles the sidebar. Shows arrow icons.\n */\nexport function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n    const { toggleSidebar, open, isMobile } = useSidebar();\n\n    return (\n        <Button\n            data-sidebar=\"trigger\"\n            variant=\"neutral\"\n            size=\"icon\"\n            className={'rounded-full'}\n            onClick={event => {\n                onClick?.(event);\n                toggleSidebar();\n            }}\n            {...props}\n        >\n            {/* Use transition to rotate a single icon */}\n            {isMobile ? <IcMoreHorizontal /> : open ? <IcLeft /> : <IcRight />}\n        </Button>\n    );\n}\n\n/**\n * Scrollable container for sidebar content\n */\nexport function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div\n            data-sidebar=\"content\"\n            className={classNames(\n                'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Groups related menu items together\n */\nexport function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div\n            data-sidebar=\"group\"\n            className={classNames('relative flex w-full min-w-0 flex-col', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Label for a group.\n */\nexport function SidebarGroupLabel({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div\n            data-sidebar=\"group-label\"\n            className={classNames(\n                'flex h-input shrink-0 items-center px-2 body-sm font-medium text-sidebar-foreground/70 outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0',\n                'group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Content wrapper for a group\n */\nexport function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div data-sidebar=\"group-content\" className={classNames('w-full body-sm', className)} {...props} />;\n}\n\n/**\n * Container for menu items\n */\nexport function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n    return <ul data-sidebar=\"menu\" className={classNames('flex w-full min-w-0 flex-col', className)} {...props} />;\n}\n\n/**\n * Single menu item wrapper\n */\nexport function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n    return (\n        <li\n            data-sidebar=\"menu-item\"\n            className={classNames('group/menu-item relative list-none', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Extra action button that appears on the right side of menu items\n */\nexport function SidebarMenuAction({\n    className,\n    ...props\n}: React.ComponentProps<'button'> & {\n    /** Only show on hover */\n    showOnHover?: boolean;\n}) {\n    return (\n        <button\n            data-sidebar=\"menu-action\"\n            className={classNames(\n                'absolute top-0 right-0 btn btn-ghost h-input',\n                'group-data-[collapsible=icon]:hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Shows a number badge on menu items. Auto-formats large numbers.\n */\nexport function SidebarMenuBadge({\n    className,\n    number,\n    ...props\n}: Omit<React.ComponentProps<'div'>, 'children'> & {\n    /** The count to display */\n    number: number | bigint;\n}) {\n    return (\n        <div\n            data-sidebar=\"menu-badge\"\n            className={classNames(\n                'absolute pointer-events-none top-0 right-0 font-light h-input select-none flex items-center justify-center body-sm tabular-nums',\n                'group-data-[collapsible=icon]:hidden',\n                className\n            )}\n            {...props}\n        >\n            {/* Format the number  */}\n            {new Intl.NumberFormat(navigator.language, { useGrouping: true }).format(number)}\n        </div>\n    );\n}\n\n/**\n * Nested submenu container\n */\nexport function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n    return (\n        <ul\n            data-sidebar=\"menu-sub\"\n            className={classNames(\n                'ms-2 flex min-w-0 flex-col border-l border-border',\n                'group-data-[collapsible=icon]:hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Submenu item wrapper\n */\nexport function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n    return <li className={classNames('list-none ms-0', className)} {...props} />;\n}\n\n// Common interaction logic for SidebarMenuButton and SidebarMenuSubButton\n/**\n * Main menu button. Pass isActive for current page.\n */\nexport function SidebarMenuButton({\n    isActive = false,\n    tooltip,\n    className,\n    ...props\n}: React.ComponentProps<'button'> & {\n    /** Mark as currently active page */\n    isActive?: boolean;\n    /** Tooltip when sidebar is collapsed */\n    tooltip?: React.ComponentProps<typeof Tooltip>;\n}) {\n    const { isMobile, state } = useSidebar();\n\n    const button = (\n        <button\n            data-sidebar=\"menu-button\"\n            {...(isActive && { 'data-selected': true })}\n            className={classNames(\n                'peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input group-data-[collapsible=icon]:!size-icon group-data-[collapsible=icon]:!p-2 ',\n                'btn-tab rounded-none w-full',\n                className\n            )}\n            {...props}\n        />\n    );\n\n    if (!tooltip) {\n        return button;\n    }\n\n    return (\n        <TooltipTrigger>\n            {button}\n            <Tooltip hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n        </TooltipTrigger>\n    );\n}\n\n/**\n * Button for submenu items\n */\nexport function SidebarMenuSubButton({\n    isActive,\n    className,\n    ...props\n}: React.ComponentProps<'button'> & {\n    isActive?: boolean;\n}) {\n    return (\n        <button\n            data-sidebar=\"menu-sub-button\"\n            data-active={isActive}\n            className={classNames('group-data-[collapsible=icon]:hidden', 'btn-tab rounded-none w-full', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * The main content area next to the sidebar\n */\nexport function SidebarOutlet({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div className={classNames(className, 'w-full overflow-auto')} {...props} />;\n}\n\n/**\n *\n * @example Basic usage\n * ```tsx\n * <SidebarOutlet>\n *  <SidebarOutletHeader><SidebarTrigger/></SidebarOutletHeader>\n * </SidebarOutlet>\n * ```\n */\nexport function SidebarOutletHeader({ className, ...props }: React.ComponentProps<'nav'>) {\n    return (\n        <nav\n            className={classNames(\n                'flex items-center h-header bg-elevation-1 sticky top-0 z-50 p-2 border-b',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n"],"names":["SIDEBAR_KEYBOARD_SHORTCUT","SidebarContext","createContext","useSidebar","context","use","SidebarProvider","defaultOpen","openProp","setOpenProp","className","style","children","props","isMobile","useIsMobile","openMobile","setOpenMobile","useState","_open","_setOpen","open","setOpen","useCallback","value","openState","toggleSidebar","useEffect","handleKeyDown","event","state","contextValue","useMemo","jsx","classNames","Sidebar","side","variant","collapsible","DialogTrigger","DialogOverlay","DialogContent","jsxs","SidebarTrigger","onClick","Button","IcMoreHorizontal","IcLeft","IcRight","SidebarContent","SidebarGroup","SidebarGroupLabel","SidebarGroupContent","SidebarMenu","SidebarMenuItem","SidebarMenuAction","SidebarMenuBadge","number","SidebarMenuSub","SidebarMenuSubItem","SidebarMenuButton","isActive","tooltip","button","TooltipTrigger","Tooltip","SidebarMenuSubButton","SidebarOutlet","SidebarOutletHeader"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","sources":["../../lib/components/sidebar.tsx"],"sourcesContent":["'use client';\nimport { createContext, use, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Button } from '../components/button';\nimport { DialogContent, DialogOverlay, DialogTrigger } from '../components/dialog';\nimport { Tooltip, TooltipTrigger } from '../components/tooltip';\nimport { classNames } from '../utilities/theme';\nimport { useIsMobile } from '../utilities/use-mobile';\nimport { IcLeft, IcMoreHorizontal, IcRight } from './icons';\n\nconst SIDEBAR_KEYBOARD_SHORTCUT = '/';\n\ntype SidebarContextProps = {\n    state: 'expanded' | 'collapsed';\n    open: boolean;\n    setOpen: (open: boolean) => void;\n    openMobile: boolean;\n    setOpenMobile: (open: boolean) => void;\n    isMobile: boolean;\n    toggleSidebar: () => void;\n};\n\nexport const SidebarContext = createContext<SidebarContextProps | null>(null);\n\n/**\n * Get the current sidebar state and controls. Must be inside SidebarProvider.\n * @throws When used outside of SidebarProvider\n */\nexport function useSidebar() {\n    const context = use(SidebarContext);\n    if (!context) {\n        throw new Error('useSidebar must be used within a SidebarProvider.');\n    }\n\n    return context;\n}\n\n/**\n * Wraps your app layout and manages sidebar state. Handles keyboard shortcuts (Cmd/Ctrl + /)\n * and mobile vs desktop behavior.\n *\n * @example\n * <SidebarProvider>\n *   <Sidebar>...</Sidebar>\n *   <SidebarOutlet>\n *     <main>Your app content</main>\n *   </SidebarOutlet>\n * </SidebarProvider>\n */\nexport function SidebarProvider({\n    defaultOpen = true,\n    open: openProp,\n    onOpenChange: setOpenProp,\n    className,\n    style,\n    children,\n    ...props\n}: React.ComponentProps<'div'> & {\n    /** Initial open state. Defaults to true */\n    defaultOpen?: boolean;\n    /** Control the open state yourself */\n    open?: boolean;\n    /** Callback when sidebar opens/closes */\n    onOpenChange?: (open: boolean) => void;\n}) {\n    const isMobile = useIsMobile();\n    const [openMobile, setOpenMobile] = useState(false);\n\n    // This is the internal state of the sidebar.\n    // We use openProp and setOpenProp for control from outside the component.\n    const [_open, _setOpen] = useState(defaultOpen);\n    const open = openProp ?? _open;\n    const setOpen = useCallback(\n        (value: boolean | ((value: boolean) => boolean)) => {\n            const openState = typeof value === 'function' ? value(open) : value;\n            if (setOpenProp) {\n                setOpenProp(openState);\n            } else {\n                _setOpen(openState);\n            }\n        },\n        [setOpenProp, open]\n    );\n\n    // Helper to toggle the sidebar.\n    const toggleSidebar = useCallback(() => {\n        return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);\n    }, [isMobile, setOpen, setOpenMobile]);\n\n    // Adds a keyboard shortcut to toggle the sidebar.\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n                event.preventDefault();\n                toggleSidebar();\n            }\n        };\n\n        window.addEventListener('keydown', handleKeyDown);\n        return () => window.removeEventListener('keydown', handleKeyDown);\n    }, [toggleSidebar]);\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = open ? 'expanded' : 'collapsed';\n\n    const contextValue = useMemo<SidebarContextProps>(\n        () => ({\n            state,\n            open,\n            setOpen,\n            isMobile,\n            openMobile,\n            setOpenMobile,\n            toggleSidebar,\n        }),\n        [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n    );\n\n    return (\n        <SidebarContext.Provider value={contextValue}>\n            <div\n                className={classNames(\n                    'group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-elevation-1',\n                    className\n                )}\n                {...props}\n            >\n                {children}\n            </div>\n        </SidebarContext.Provider>\n    );\n}\n\n/**\n * The actual sidebar panel. On mobile it becomes a modal dialog.\n */\nexport function Sidebar({\n    side = 'left',\n    variant = 'sidebar',\n    collapsible = 'icon',\n    className,\n    children,\n    ...props\n}: React.ComponentProps<'div'> & {\n    /** Where to dock the sidebar. Default: left */\n    side?: 'left' | 'right';\n    /** Style variant. Default: sidebar */\n    variant?: 'sidebar' | 'floating';\n    /** How it collapses. Default: offcanvas */\n    collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n    if (collapsible === 'none') {\n        return (\n            <div\n                className={classNames(\n                    'flex h-full w-[--sidebar-width] flex-col bg-elevation-1 text-foreground',\n                    className\n                )}\n                {...props}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    if (isMobile) {\n        return (\n            <DialogTrigger isOpen={openMobile} onOpenChange={setOpenMobile} {...props}>\n                <DialogOverlay>\n                    <DialogContent\n                        data-sidebar=\"sidebar\"\n                        data-mobile=\"true\"\n                        className=\"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden\"\n                        side=\"left\"\n                    >\n                        {() => <>{children}</>}\n                    </DialogContent>\n                </DialogOverlay>\n            </DialogTrigger>\n        );\n    }\n\n    return (\n        <div\n            className=\"group peer hidden text-foreground md:block\"\n            data-state={state}\n            data-collapsible={state === 'collapsed' ? collapsible : ''}\n            data-variant={variant}\n            data-side={side}\n        >\n            {/* This is what handles the sidebar gap on desktop */}\n            <div\n                className={classNames(\n                    'relative w-(--sidebar-width) bg-elevation-1 transition-[width] duration-200 ease-linear',\n                    'group-data-[collapsible=offcanvas]:w-0',\n                    'group-data-[side=right]:rotate-180',\n                    variant === 'floating'\n                        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n                        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'\n                )}\n            />\n            <div\n                className={classNames(\n                    'absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n                    side === 'left'\n                        ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n                        : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n                    // Adjust the padding for floating variant.\n                    variant === 'floating'\n                        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n                        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n                    className\n                )}\n                {...props}\n            >\n                <div\n                    data-sidebar=\"sidebar\"\n                    className=\"flex h-full w-full flex-col bg-elevation-1 group-data-[variant=floating]:border group-data-[variant=floating]:border-border\"\n                >\n                    {children}\n                </div>\n            </div>\n        </div>\n    );\n}\n\n/**\n * Button that toggles the sidebar. Shows arrow icons.\n */\nexport function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n    const { toggleSidebar, open, isMobile } = useSidebar();\n\n    return (\n        <Button\n            data-sidebar=\"trigger\"\n            variant=\"neutral\"\n            size=\"icon\"\n            className={'!rounded-full'}\n            onClick={event => {\n                onClick?.(event);\n                toggleSidebar();\n            }}\n            {...props}\n        >\n            {/* Use transition to rotate a single icon */}\n            {isMobile ? <IcMoreHorizontal /> : open ? <IcLeft /> : <IcRight />}\n        </Button>\n    );\n}\n\n/**\n * Scrollable container for sidebar content\n */\nexport function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div\n            data-sidebar=\"content\"\n            className={classNames(\n                'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Groups related menu items together\n */\nexport function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div\n            data-sidebar=\"group\"\n            className={classNames(\n                'relative flex w-full min-w-0 flex-col group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-2',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Label for a group.\n */\nexport function SidebarGroupLabel({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div\n            data-sidebar=\"group-label\"\n            className={classNames(\n                'flex h-input shrink-0 items-center px-2 body-sm font-medium text-sidebar-foreground/70 outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0',\n                'group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Content wrapper for a group\n */\nexport function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div data-sidebar=\"group-content\" className={classNames('w-full body-sm', className)} {...props} />;\n}\n\n/**\n * Container for menu items\n */\nexport function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n    return <ul data-sidebar=\"menu\" className={classNames('flex w-full min-w-0 flex-col', className)} {...props} />;\n}\n\n/**\n * Single menu item wrapper\n */\nexport function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n    return (\n        <li\n            data-sidebar=\"menu-item\"\n            className={classNames(\n                'group/menu-item relative list-none group-data-[collapsible=icon]:[&>*:not([data-sidebar=menu-button])]:hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Extra action button that appears on the right side of menu items\n */\nexport function SidebarMenuAction({\n    className,\n    ...props\n}: React.ComponentProps<'button'> & {\n    /** Only show on hover */\n    showOnHover?: boolean;\n}) {\n    return (\n        <button\n            data-sidebar=\"menu-action\"\n            className={classNames(\n                'absolute top-0 right-0 btn btn-ghost h-input',\n                'group-data-[collapsible=icon]:hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Shows a number badge on menu items. Auto-formats large numbers.\n */\nexport function SidebarMenuBadge({\n    className,\n    number,\n    ...props\n}: Omit<React.ComponentProps<'div'>, 'children'> & {\n    /** The count to display */\n    number: number | bigint;\n}) {\n    return (\n        <div\n            data-sidebar=\"menu-badge\"\n            className={classNames(\n                'absolute pointer-events-none top-0 right-0 font-light h-input select-none flex items-center justify-center body-sm tabular-nums',\n                'group-data-[collapsible=icon]:hidden',\n                className\n            )}\n            {...props}\n        >\n            {/* Format the number  */}\n            {new Intl.NumberFormat(navigator.language, { useGrouping: true }).format(number)}\n        </div>\n    );\n}\n\n/**\n * Nested submenu container\n */\nexport function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n    return (\n        <ul\n            data-sidebar=\"menu-sub\"\n            className={classNames(\n                'ms-2 flex min-w-0 flex-col border-l border-border',\n                'group-data-[collapsible=icon]:hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Submenu item wrapper\n */\nexport function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n    return <li className={classNames('list-none ms-0', className)} {...props} />;\n}\n\nexport const sidebarMenuButtonClasses =\n    'btn-tab py-3 h-auto rounded-none w-full selected:shadow-[inset_2px_0_0_0_var(--color-primary)] group-data-[collapsible=icon]:![font-size:0] group-data-[collapsible=icon]:!justify-center group-data-[collapsible=icon]:!px-0 group-data-[collapsible=icon]:!gap-0 group-data-[collapsible=icon]:!rounded-md group-data-[collapsible=icon]:selected:shadow-none';\n\n// Common interaction logic for SidebarMenuButton and SidebarMenuSubButton\n/**\n * Main menu button. Pass isActive for current page.\n */\nexport function SidebarMenuButton({\n    isActive = false,\n    tooltip,\n    className,\n    ...props\n}: React.ComponentProps<'button'> & {\n    /** Mark as currently active page */\n    isActive?: boolean;\n    /** Tooltip when sidebar is collapsed */\n    tooltip?: React.ComponentProps<typeof Tooltip>;\n}) {\n    const { isMobile, state } = useSidebar();\n\n    const button = (\n        <button\n            data-sidebar=\"menu-button\"\n            {...(isActive && { 'data-selected': true })}\n            className={classNames(\n                'peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input',\n                sidebarMenuButtonClasses,\n                className\n            )}\n            {...props}\n        />\n    );\n\n    if (!tooltip) {\n        return button;\n    }\n\n    return (\n        <TooltipTrigger>\n            {button}\n            <Tooltip hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n        </TooltipTrigger>\n    );\n}\n\n/**\n * Button for submenu items\n */\nexport function SidebarMenuSubButton({\n    isActive,\n    className,\n    ...props\n}: React.ComponentProps<'button'> & {\n    isActive?: boolean;\n}) {\n    return (\n        <button\n            data-sidebar=\"menu-sub-button\"\n            data-active={isActive}\n            className={classNames(sidebarMenuButtonClasses, className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Sticky header at the top of the sidebar. Displays a square logo slot aligned with the outlet header.\n */\nexport function SidebarHeader({\n    className,\n    logo,\n    children,\n    ...props\n}: React.ComponentProps<'div'> & {\n    /** Square logo/icon to display */\n    logo?: React.ReactNode;\n}) {\n    return (\n        <div\n            data-sidebar=\"header\"\n            className={classNames(\n                'flex items-center h-header select-none shrink-0 border-b px-2 gap-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0',\n                className\n            )}\n            {...props}\n        >\n            {logo && <div className=\"flex items-center justify-center size-input shrink-0\">{logo}</div>}\n            {children && <div className=\"flex-1 min-w-0 group-data-[collapsible=icon]:hidden\">{children}</div>}\n        </div>\n    );\n}\n\n/**\n * The main content area next to the sidebar\n */\nexport function SidebarOutlet({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div className={classNames(className, 'w-full overflow-auto')} {...props} />;\n}\n\n/**\n *\n * @example Basic usage\n * ```tsx\n * <SidebarOutlet>\n *  <SidebarOutletHeader><SidebarTrigger/></SidebarOutletHeader>\n * </SidebarOutlet>\n * ```\n */\nexport function SidebarOutletHeader({ className, ...props }: React.ComponentProps<'nav'>) {\n    return (\n        <nav\n            className={classNames(\n                'flex items-center h-header bg-elevation-1 sticky top-0 z-50 p-2 border-b',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n"],"names":["SIDEBAR_KEYBOARD_SHORTCUT","SidebarContext","createContext","useSidebar","context","use","SidebarProvider","defaultOpen","openProp","setOpenProp","className","style","children","props","isMobile","useIsMobile","openMobile","setOpenMobile","useState","_open","_setOpen","open","setOpen","useCallback","value","openState","toggleSidebar","useEffect","handleKeyDown","event","state","contextValue","useMemo","jsx","classNames","Sidebar","side","variant","collapsible","DialogTrigger","DialogOverlay","DialogContent","jsxs","SidebarTrigger","onClick","Button","IcMoreHorizontal","IcLeft","IcRight","SidebarContent","SidebarGroup","SidebarGroupLabel","SidebarGroupContent","SidebarMenu","SidebarMenuItem","SidebarMenuAction","SidebarMenuBadge","number","SidebarMenuSub","SidebarMenuSubItem","sidebarMenuButtonClasses","SidebarMenuButton","isActive","tooltip","button","TooltipTrigger","Tooltip","SidebarMenuSubButton","SidebarHeader","logo","SidebarOutlet","SidebarOutletHeader"],"mappings":"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"}

package/dist/components/toast.js

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as n}from"react/jsx-runtime";import{UNSTABLE_ToastQueue as u,UNSTABLE_ToastRegion as f,UNSTABLE_Toast as p,UNSTABLE_ToastContent as h}from"react-aria-components";import{flushSync as N}from"react-dom";import{classNames as x}from"../utilities/theme.js";import{alertVariants as T}from"./alert.js";import{Button as r}from"./button.js";import{IcClose as v,IcInfo as o,IcCheck as w,IcError as g}from"./icons.js";import"clsx";import"class-variance-authority";import"react";import"./loader.js";const a=new u({wrapUpdate(e){"startViewTransition"in document?document.startViewTransition(()=>{N(e)}):e()}});function _(){return t(f,{queue:a,className:"fixed z-50 top-4 right-4 flex flex-col-reverse justify-end gap-2",children:({toast:e})=>t(p,{style:{viewTransitionName:e.key},toast:e,className:"animate-in fade-in-0 slide-in-from-right duration-300 ease-out",children:n(h,{className:x(T({variant:e.content.variant}),"flex flex-col items-stretch max-w-sm gap-2 w-full min-w-sm"),children:[n("div",{className:"flex flex-row items-start gap-3",children:[t("span",{className:"shrink-0",children:y(e.content.variant)}),n("div",{className:"flex-1 min-w-0",children:[t("p",{slot:"title",className:"font-medium body-base",children:e.content.title}),e.content.description&&t("p",{slot:"description",className:"body-sm",children:e.content.description})]}),!e.content.autoDismiss&&n(r,{slot:"close",size:"icon",variant:"neutral",className:"rounded-full border-none shrink-0 -mr-1 -mt-1",children:[t(v,{className:"size-4"}),t("span",{className:"sr-only",children:"Close"})]})]}),e.content.action&&t("div",{className:"flex w-full justify-end gap-2 mt-1",children:t(r,{slot:"close",onPress:()=>{e.content.action?.()},variant:"neutral",className:"shrink-0",children:e.content.actionLabel||"Action"})})]})})})}function y(e){switch(e){case"destructive":return t(g,{});case"success":return t(w,{});case"muted":return t(o,{});default:return t(o,{})}}function z({title:e,description:c,variant:l,autoDismiss:i=!0,action:s,actionLabel:m}){const d=i&&!s?{timeout:3e3}:{};a.add({title:e,description:c,variant:l,autoDismiss:i,action:s,actionLabel:m},d)}export{_ as ToastProvider,z as toast};
+import{jsx as t,jsxs as n}from"react/jsx-runtime";import{UNSTABLE_ToastQueue as u,UNSTABLE_ToastRegion as f,UNSTABLE_Toast as p,UNSTABLE_ToastContent as h}from"react-aria-components";import{flushSync as N}from"react-dom";import{classNames as x}from"../utilities/theme.js";import{alertVariants as T}from"./alert.js";import{Button as s}from"./button.js";import{IcClose as v,IcInfo as o,IcCheck as w,IcError as g}from"./icons.js";import"clsx";import"class-variance-authority";import"react";import"./loader.js";const a=new u({wrapUpdate(e){"startViewTransition"in document?document.startViewTransition(()=>{N(e)}):e()}});function _(){return t(f,{queue:a,className:"fixed z-50 top-4 right-4 flex flex-col-reverse justify-end gap-2",children:({toast:e})=>t(p,{style:{viewTransitionName:e.key},toast:e,className:"animate-in fade-in-0 slide-in-from-right duration-300 ease-out",children:n(h,{className:x(T({variant:e.content.variant}),"flex flex-col items-stretch max-w-sm gap-2 w-full min-w-sm"),children:[n("div",{className:"flex flex-row items-start gap-3",children:[t("span",{className:"shrink-0",children:y(e.content.variant)}),n("div",{className:"flex-1 min-w-0",children:[t("p",{slot:"title",className:"font-medium body-base",children:e.content.title}),e.content.description&&t("p",{slot:"description",className:"body-sm",children:e.content.description})]}),!e.content.autoDismiss&&n(s,{slot:"close",size:"icon",variant:"neutral",className:"rounded-full border-none shrink-0 -mr-1 -mt-1",children:[t(v,{className:"size-4"}),t("span",{className:"sr-only",children:"Close"})]})]}),e.content.action&&t("div",{className:"flex w-full justify-end gap-2 mt-1",children:t(s,{slot:"close",onPress:()=>{e.content.action?.()},variant:"neutral",className:"shrink-0",children:e.content.actionLabel||"Action"})})]})})})}function y(e){switch(e){case"destructive":return t(g,{});case"success":return t(w,{});case"neutral":return t(o,{});default:return t(o,{})}}function z({title:e,description:c,variant:l,autoDismiss:i=!0,action:r,actionLabel:m}){const d=i&&!r?{timeout:3e3}:{};a.add({title:e,description:c,variant:l,autoDismiss:i,action:r,actionLabel:m},d)}export{_ as ToastProvider,z as toast};
 //# sourceMappingURL=toast.js.map

package/dist/components/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../../lib/components/toast.tsx"],"sourcesContent":["import type { VariantProps } from 'class-variance-authority';\nimport {\n    UNSTABLE_Toast as AriaToast,\n    UNSTABLE_ToastContent as AriaToastContent,\n    UNSTABLE_ToastQueue as AriaToastQueue,\n    UNSTABLE_ToastRegion as AriaToastRegion,\n} from 'react-aria-components';\nimport { flushSync } from 'react-dom';\nimport { classNames } from '../utilities/theme';\nimport { alertVariants } from './alert';\nimport { Button } from './button';\nimport { IcCheck, IcClose, IcError, IcInfo } from './icons';\n\nexport interface ToastProps {\n    title: string;\n    description?: string;\n    variant: VariantProps<typeof alertVariants>['variant'];\n    action?: () => void;\n    actionLabel?: string;\n    autoDismiss?: boolean;\n}\n\n/**\n * Toast queue.\n * @returns The toast queue.\n */\nconst queue = new AriaToastQueue<ToastProps>({\n    wrapUpdate(fn) {\n        if ('startViewTransition' in document) {\n            document.startViewTransition(() => {\n                flushSync(fn);\n            });\n        } else {\n            fn();\n        }\n    },\n});\n\n/**\n * Toast provider.\n * @returns The toast provider.\n */\nexport function ToastProvider() {\n    return (\n        <AriaToastRegion queue={queue} className=\"fixed z-50 top-4 right-4 flex flex-col-reverse justify-end gap-2\">\n            {({ toast }) => (\n                <AriaToast\n                    style={{ viewTransitionName: toast.key }}\n                    toast={toast}\n                    className=\"animate-in fade-in-0 slide-in-from-right duration-300 ease-out\"\n                >\n                    <AriaToastContent\n                        className={classNames(\n                            alertVariants({ variant: toast.content.variant }),\n                            'flex flex-col items-stretch max-w-sm gap-2 w-full min-w-sm'\n                        )}\n                    >\n                        <div className=\"flex flex-row items-start gap-3\">\n                            <span className=\"shrink-0\">{getToastIcon(toast.content.variant)}</span>\n                            <div className=\"flex-1 min-w-0\">\n                                <p slot=\"title\" className=\"font-medium body-base\">\n                                    {toast.content.title}\n                                </p>\n                                {toast.content.description && (\n                                    <p slot=\"description\" className=\"body-sm\">\n                                        {toast.content.description}\n                                    </p>\n                                )}\n                            </div>\n                            {!toast.content.autoDismiss && (\n                                <Button\n                                    slot=\"close\"\n                                    size=\"icon\"\n                                    variant=\"neutral\"\n                                    className=\"rounded-full border-none shrink-0 -mr-1 -mt-1\"\n                                >\n                                    <IcClose className=\"size-4\" />\n                                    <span className=\"sr-only\">Close</span>\n                                </Button>\n                            )}\n                        </div>\n                        {toast.content.action && (\n                            <div className=\"flex w-full justify-end gap-2 mt-1\">\n                                <Button\n                                    slot=\"close\"\n                                    onPress={() => {\n                                        toast.content.action?.();\n                                    }}\n                                    variant=\"neutral\"\n                                    className=\"shrink-0\"\n                                >\n                                    {toast.content.actionLabel || 'Action'}\n                                </Button>\n                            </div>\n                        )}\n                    </AriaToastContent>\n                </AriaToast>\n            )}\n        </AriaToastRegion>\n    );\n}\n\n/**\n * Get the icon for a toast notification.\n * @param variant - The variant of the toast.\n * @returns The icon for the toast.\n */\nfunction getToastIcon(variant: ToastProps['variant']) {\n    switch (variant) {\n        case 'destructive':\n            return <IcError />;\n        case 'success':\n            return <IcCheck />;\n        case 'muted':\n            return <IcInfo />;\n        default:\n            return <IcInfo />;\n    }\n}\n\n/**\n * Show a toast notification.\n * @param title - The title of the toast.\n * @param description - The description of the toast.\n * @param variant - The variant of the toast.\n * @param autoDismiss - Whether to automatically dismiss the toast.\n */\nexport function toast({ title, description, variant, autoDismiss = true, action, actionLabel }: ToastProps) {\n    const options = autoDismiss && !action ? { timeout: 3000 } : {};\n    queue.add({ title, description, variant, autoDismiss, action, actionLabel }, options);\n}\n"],"names":["queue","AriaToastQueue","fn","flushSync","ToastProvider","jsx","AriaToastRegion","toast","AriaToast","jsxs","AriaToastContent","classNames","alertVariants","Button","IcClose","getToastIcon","variant","IcError","IcCheck","IcInfo","title","description","autoDismiss","action","actionLabel","options"],"mappings":"2fA0BA,MAAMA,EAAQ,IAAIC,EAA2B,CACzC,WAAWC,EAAI,CACP,wBAAyB,SACzB,SAAS,oBAAoB,IAAM,CAC/BC,EAAUD,CAAE,CAChB,CAAC,EAEDA,EAAA,CAER,CACJ,CAAC,EAMM,SAASE,GAAgB,CAC5B,OACIC,EAACC,GAAgB,MAAAN,EAAc,UAAU,mEACpC,SAAA,CAAC,CAAE,MAAAO,CAAAA,IACAF,EAACG,EAAA,CACG,MAAO,CAAE,mBAAoBD,EAAM,GAAA,EACnC,MAAOA,EACP,UAAU,iEAEV,SAAAE,EAACC,EAAA,CACG,UAAWC,EACPC,EAAc,CAAE,QAASL,EAAM,QAAQ,QAAS,EAChD,4DAAA,EAGJ,SAAA,CAAAE,EAAC,MAAA,CAAI,UAAU,kCACX,SAAA,CAAAJ,EAAC,QAAK,UAAU,WAAY,WAAaE,EAAM,QAAQ,OAAO,EAAE,EAChEE,EAAC,MAAA,CAAI,UAAU,iBACX,SAAA,CAAAJ,EAAC,IAAA,CAAE,KAAK,QAAQ,UAAU,wBACrB,SAAAE,EAAM,QAAQ,KAAA,CACnB,EACCA,EAAM,QAAQ,aACXF,EAAC,IAAA,CAAE,KAAK,cAAc,UAAU,UAC3B,SAAAE,EAAM,QAAQ,WAAA,CACnB,CAAA,EAER,EACC,CAACA,EAAM,QAAQ,aACZE,EAACI,EAAA,CACG,KAAK,QACL,KAAK,OACL,QAAQ,UACR,UAAU,gDAEV,SAAA,CAAAR,EAACS,EAAA,CAAQ,UAAU,QAAA,CAAS,EAC5BT,EAAC,OAAA,CAAK,UAAU,UAAU,SAAA,OAAA,CAAK,CAAA,CAAA,CAAA,CACnC,EAER,EACCE,EAAM,QAAQ,QACXF,EAAC,MAAA,CAAI,UAAU,qCACX,SAAAA,EAACQ,EAAA,CACG,KAAK,QACL,QAAS,IAAM,CACXN,EAAM,QAAQ,SAAA,CAClB,EACA,QAAQ,UACR,UAAU,WAET,SAAAA,EAAM,QAAQ,aAAe,QAAA,CAAA,CAClC,CACJ,CAAA,CAAA,CAAA,CAER,CAAA,EAGZ,CAER,CAOA,SAASQ,EAAaC,EAAgC,CAClD,OAAQA,EAAA,CACJ,IAAK,cACD,SAAQC,EAAA,EAAQ,EACpB,IAAK,UACD,SAAQC,EAAA,EAAQ,EACpB,IAAK,QACD,SAAQC,EAAA,EAAO,EACnB,QACI,SAAQA,EAAA,EAAO,CAAA,CAE3B,CASO,SAASZ,EAAM,CAAE,MAAAa,EAAO,YAAAC,EAAa,QAAAL,EAAS,YAAAM,EAAc,GAAM,OAAAC,EAAQ,YAAAC,GAA2B,CACxG,MAAMC,EAAUH,GAAe,CAACC,EAAS,CAAE,QAAS,GAAA,EAAS,CAAA,EAC7DvB,EAAM,IAAI,CAAE,MAAAoB,EAAO,YAAAC,EAAa,QAAAL,EAAS,YAAAM,EAAa,OAAAC,EAAQ,YAAAC,CAAA,EAAeC,CAAO,CACxF"}
+{"version":3,"file":"toast.js","sources":["../../lib/components/toast.tsx"],"sourcesContent":["import type { VariantProps } from 'class-variance-authority';\nimport {\n    UNSTABLE_Toast as AriaToast,\n    UNSTABLE_ToastContent as AriaToastContent,\n    UNSTABLE_ToastQueue as AriaToastQueue,\n    UNSTABLE_ToastRegion as AriaToastRegion,\n} from 'react-aria-components';\nimport { flushSync } from 'react-dom';\nimport { classNames } from '../utilities/theme';\nimport { alertVariants } from './alert';\nimport { Button } from './button';\nimport { IcCheck, IcClose, IcError, IcInfo } from './icons';\n\nexport interface ToastProps {\n    title: string;\n    description?: string;\n    variant: VariantProps<typeof alertVariants>['variant'];\n    action?: () => void;\n    actionLabel?: string;\n    autoDismiss?: boolean;\n}\n\n/**\n * Toast queue.\n * @returns The toast queue.\n */\nconst queue = new AriaToastQueue<ToastProps>({\n    wrapUpdate(fn) {\n        if ('startViewTransition' in document) {\n            document.startViewTransition(() => {\n                flushSync(fn);\n            });\n        } else {\n            fn();\n        }\n    },\n});\n\n/**\n * Toast provider.\n * @returns The toast provider.\n */\nexport function ToastProvider() {\n    return (\n        <AriaToastRegion queue={queue} className=\"fixed z-50 top-4 right-4 flex flex-col-reverse justify-end gap-2\">\n            {({ toast }) => (\n                <AriaToast\n                    style={{ viewTransitionName: toast.key }}\n                    toast={toast}\n                    className=\"animate-in fade-in-0 slide-in-from-right duration-300 ease-out\"\n                >\n                    <AriaToastContent\n                        className={classNames(\n                            alertVariants({ variant: toast.content.variant }),\n                            'flex flex-col items-stretch max-w-sm gap-2 w-full min-w-sm'\n                        )}\n                    >\n                        <div className=\"flex flex-row items-start gap-3\">\n                            <span className=\"shrink-0\">{getToastIcon(toast.content.variant)}</span>\n                            <div className=\"flex-1 min-w-0\">\n                                <p slot=\"title\" className=\"font-medium body-base\">\n                                    {toast.content.title}\n                                </p>\n                                {toast.content.description && (\n                                    <p slot=\"description\" className=\"body-sm\">\n                                        {toast.content.description}\n                                    </p>\n                                )}\n                            </div>\n                            {!toast.content.autoDismiss && (\n                                <Button\n                                    slot=\"close\"\n                                    size=\"icon\"\n                                    variant=\"neutral\"\n                                    className=\"rounded-full border-none shrink-0 -mr-1 -mt-1\"\n                                >\n                                    <IcClose className=\"size-4\" />\n                                    <span className=\"sr-only\">Close</span>\n                                </Button>\n                            )}\n                        </div>\n                        {toast.content.action && (\n                            <div className=\"flex w-full justify-end gap-2 mt-1\">\n                                <Button\n                                    slot=\"close\"\n                                    onPress={() => {\n                                        toast.content.action?.();\n                                    }}\n                                    variant=\"neutral\"\n                                    className=\"shrink-0\"\n                                >\n                                    {toast.content.actionLabel || 'Action'}\n                                </Button>\n                            </div>\n                        )}\n                    </AriaToastContent>\n                </AriaToast>\n            )}\n        </AriaToastRegion>\n    );\n}\n\n/**\n * Get the icon for a toast notification.\n * @param variant - The variant of the toast.\n * @returns The icon for the toast.\n */\nfunction getToastIcon(variant: ToastProps['variant']) {\n    switch (variant) {\n        case 'destructive':\n            return <IcError />;\n        case 'success':\n            return <IcCheck />;\n        case 'neutral':\n            return <IcInfo />;\n        default:\n            return <IcInfo />;\n    }\n}\n\n/**\n * Show a toast notification.\n * @param title - The title of the toast.\n * @param description - The description of the toast.\n * @param variant - The variant of the toast.\n * @param autoDismiss - Whether to automatically dismiss the toast.\n */\nexport function toast({ title, description, variant, autoDismiss = true, action, actionLabel }: ToastProps) {\n    const options = autoDismiss && !action ? { timeout: 3000 } : {};\n    queue.add({ title, description, variant, autoDismiss, action, actionLabel }, options);\n}\n"],"names":["queue","AriaToastQueue","fn","flushSync","ToastProvider","jsx","AriaToastRegion","toast","AriaToast","jsxs","AriaToastContent","classNames","alertVariants","Button","IcClose","getToastIcon","variant","IcError","IcCheck","IcInfo","title","description","autoDismiss","action","actionLabel","options"],"mappings":"2fA0BA,MAAMA,EAAQ,IAAIC,EAA2B,CACzC,WAAWC,EAAI,CACP,wBAAyB,SACzB,SAAS,oBAAoB,IAAM,CAC/BC,EAAUD,CAAE,CAChB,CAAC,EAEDA,EAAA,CAER,CACJ,CAAC,EAMM,SAASE,GAAgB,CAC5B,OACIC,EAACC,GAAgB,MAAAN,EAAc,UAAU,mEACpC,SAAA,CAAC,CAAE,MAAAO,CAAAA,IACAF,EAACG,EAAA,CACG,MAAO,CAAE,mBAAoBD,EAAM,GAAA,EACnC,MAAOA,EACP,UAAU,iEAEV,SAAAE,EAACC,EAAA,CACG,UAAWC,EACPC,EAAc,CAAE,QAASL,EAAM,QAAQ,QAAS,EAChD,4DAAA,EAGJ,SAAA,CAAAE,EAAC,MAAA,CAAI,UAAU,kCACX,SAAA,CAAAJ,EAAC,QAAK,UAAU,WAAY,WAAaE,EAAM,QAAQ,OAAO,EAAE,EAChEE,EAAC,MAAA,CAAI,UAAU,iBACX,SAAA,CAAAJ,EAAC,IAAA,CAAE,KAAK,QAAQ,UAAU,wBACrB,SAAAE,EAAM,QAAQ,KAAA,CACnB,EACCA,EAAM,QAAQ,aACXF,EAAC,IAAA,CAAE,KAAK,cAAc,UAAU,UAC3B,SAAAE,EAAM,QAAQ,WAAA,CACnB,CAAA,EAER,EACC,CAACA,EAAM,QAAQ,aACZE,EAACI,EAAA,CACG,KAAK,QACL,KAAK,OACL,QAAQ,UACR,UAAU,gDAEV,SAAA,CAAAR,EAACS,EAAA,CAAQ,UAAU,QAAA,CAAS,EAC5BT,EAAC,OAAA,CAAK,UAAU,UAAU,SAAA,OAAA,CAAK,CAAA,CAAA,CAAA,CACnC,EAER,EACCE,EAAM,QAAQ,QACXF,EAAC,MAAA,CAAI,UAAU,qCACX,SAAAA,EAACQ,EAAA,CACG,KAAK,QACL,QAAS,IAAM,CACXN,EAAM,QAAQ,SAAA,CAClB,EACA,QAAQ,UACR,UAAU,WAET,SAAAA,EAAM,QAAQ,aAAe,QAAA,CAAA,CAClC,CACJ,CAAA,CAAA,CAAA,CAER,CAAA,EAGZ,CAER,CAOA,SAASQ,EAAaC,EAAgC,CAClD,OAAQA,EAAA,CACJ,IAAK,cACD,SAAQC,EAAA,EAAQ,EACpB,IAAK,UACD,SAAQC,EAAA,EAAQ,EACpB,IAAK,UACD,SAAQC,EAAA,EAAO,EACnB,QACI,SAAQA,EAAA,EAAO,CAAA,CAE3B,CASO,SAASZ,EAAM,CAAE,MAAAa,EAAO,YAAAC,EAAa,QAAAL,EAAS,YAAAM,EAAc,GAAM,OAAAC,EAAQ,YAAAC,GAA2B,CACxG,MAAMC,EAAUH,GAAe,CAACC,EAAS,CAAE,QAAS,GAAA,EAAS,CAAA,EAC7DvB,EAAM,IAAI,CAAE,MAAAoB,EAAO,YAAAC,EAAa,QAAAL,EAAS,YAAAM,EAAa,OAAAC,EAAQ,YAAAC,CAAA,EAAeC,CAAO,CACxF"}

package/lib/index.css

@@ -63,32 +63,45 @@
     --color-success-9: var(--success-9);
     --color-success-10: var(--success-10);
 
+    --color-warning-1: var(--warning-1);
+    --color-warning-2: var(--warning-2);
+    --color-warning-3: var(--warning-3);
+    --color-warning-4: var(--warning-4);
+    --color-warning-5: var(--warning-5);
+    --color-warning-6: var(--warning-6);
+    --color-warning-7: var(--warning-7);
+    --color-warning-8: var(--warning-8);
+    --color-warning-9: var(--warning-9);
+    --color-warning-10: var(--warning-10);
+
     --color-foreground: var(--color-neutral-9);
     --color-background: var(--color-neutral-2);
     --color-elevation-1: var(--color-neutral-1);
 
     --color-primary: var(--color-primary-7);
-    --color-primary-foreground: var(--color-primary-2);
+    --color-primary-foreground: var(--color-neutral-2);
     --color-secondary: var(--color-secondary-7);
-    --color-secondary-foreground: var(--color-secondary-2);
+    --color-secondary-foreground: var(--color-neutral-2);
     --color-muted: var(--color-neutral-7);
     --color-muted-foreground: var(--color-neutral-4);
     --color-accent: var(--color-neutral-7);
-    --color-accent-foreground: var(--color-neutral-4);
+    --color-accent-foreground: var(--color-neutral-2);
     --color-destructive: var(--color-destructive-7);
-    --color-destructive-foreground: var(--color-destructive-2);
+    --color-destructive-foreground: var(--color-neutral-2);
     --color-success: var(--color-success-7);
-    --color-success-foreground: var(--color-success-2);
+    --color-success-foreground: var(--color-neutral-2);
+    --color-warning: var(--color-warning-7);
+    --color-warning-foreground: var(--color-neutral-2);
 
     --color-border: var(--color-neutral-4);
     --color-input: var(--color-border);
     --color-ring: var(--color-neutral-5);
 
-    --color-chart-1: var(--color-primary-6);
-    --color-chart-2: var(--color-secondary-6);
-    --color-chart-3: var(--color-destructive-6);
-    --color-chart-4: var(--color-secondary-6);
-    --color-chart-5: var(--color-destructive-6);
+    --color-chart-1: var(--color-primary-5);
+    --color-chart-2: var(--color-primary-6);
+    --color-chart-3: var(--color-warning-5);
+    --color-chart-4: var(--color-warning-6);
+    --color-chart-5: var(--color-neutral-6);
 
     --spacing-input: --spacing(8);
     --spacing-icon: --spacing(4);
@@ -301,19 +314,19 @@
     @apply border border-destructive text-destructive-foreground bg-destructive;
 }
 @utility btn-destructive-neutral {
-    @apply text-destructive bg-elevation-1 border border-destructive;
+    @apply text-destructive bg-elevation-1;
 }
 @utility btn-secondary {
     @apply border border-secondary text-secondary-foreground bg-secondary;
 }
 @utility btn-secondary-neutral {
-    @apply text-secondary bg-elevation-1 border border-secondary;
+    @apply text-secondary bg-elevation-1;
 }
 @utility btn-neutral {
     @apply border border-input text-accent bg-elevation-1;
 }
 @utility btn-primary-neutral {
-    @apply text-primary border border-primary bg-elevation-1;
+    @apply text-primary bg-elevation-1;
 }
 @utility btn-ghost {
     @apply bg-transparent focus:bg-accent/20 hover:bg-accent/20;

package/lib/tokens.css

@@ -219,6 +219,59 @@
     --success-8: var(--xsuccess-8);
     --success-9: var(--xsuccess-9);
     --success-10: var(--xsuccess-10);
+    --warning-hue: 75;
+    --warning-c-start: var(--c-range-start);
+    --warning-c-end: var(--c-range-end);
+    --xwarning-1: oklch(
+        calc(var(--lc-range-start) + (var(--lc-range-end) - var(--lc-range-start)) * (10 / 10))
+            calc((var(--warning-c-end) - var(--warning-c-start)) * (10 / 10)) var(--warning-hue)
+    );
+    --xwarning-2: oklch(
+        calc(var(--lc-range-start) + (var(--lc-range-end) - var(--lc-range-start)) * (9 / 10))
+            calc((var(--warning-c-end) - var(--warning-c-start)) * (9 / 10)) var(--warning-hue)
+    );
+    --xwarning-3: oklch(
+        calc(var(--lc-range-start) + (var(--lc-range-end) - var(--lc-range-start)) * (8 / 10))
+            calc((var(--warning-c-end) - var(--warning-c-start)) * (8 / 10)) var(--warning-hue)
+    );
+    --xwarning-4: oklch(
+        calc(var(--lc-range-start) + (var(--lc-range-end) - var(--lc-range-start)) * (7 / 10))
+            calc((var(--warning-c-end) - var(--warning-c-start)) * (7 / 10)) var(--warning-hue)
+    );
+    --xwarning-5: oklch(
+        calc(var(--lc-range-start) + (var(--lc-range-end) - var(--lc-range-start)) * (6 / 10))
+            calc((var(--warning-c-end) - var(--warning-c-start)) * (6 / 10)) var(--warning-hue)
+    );
+    --xwarning-6: oklch(
+        calc(var(--lc-range-start) + (var(--lc-range-end) - var(--lc-range-start)) * (5 / 10))
+            calc((var(--warning-c-end) - var(--warning-c-start)) * (5 / 10)) var(--warning-hue)
+    );
+    --xwarning-7: oklch(
+        calc(var(--lc-range-start) + (var(--lc-range-end) - var(--lc-range-start)) * (4 / 10))
+            calc((var(--warning-c-end) - var(--warning-c-start)) * (7 / 10)) var(--warning-hue)
+    );
+    --xwarning-8: oklch(
+        calc(var(--lc-range-start) + (var(--lc-range-end) - var(--lc-range-start)) * (3 / 10))
+            calc((var(--warning-c-end) - var(--warning-c-start)) * (8 / 10)) var(--warning-hue)
+    );
+    --xwarning-9: oklch(
+        calc(var(--lc-range-start) + (var(--lc-range-end) - var(--lc-range-start)) * (2 / 10))
+            calc((var(--warning-c-end) - var(--warning-c-start)) * (9 / 10)) var(--warning-hue)
+    );
+    --xwarning-10: oklch(
+        calc(var(--lc-range-start) + (var(--lc-range-end) - var(--lc-range-start)) * (1 / 10))
+            calc((var(--warning-c-end) - var(--warning-c-start)) * (10 / 10)) var(--warning-hue)
+    );
+    --warning-1: var(--xwarning-1);
+    --warning-2: var(--xwarning-2);
+    --warning-3: var(--xwarning-3);
+    --warning-4: var(--xwarning-4);
+    --warning-5: var(--xwarning-5);
+    --warning-6: var(--xwarning-6);
+    --warning-7: var(--xwarning-7);
+    --warning-8: var(--xwarning-8);
+    --warning-9: var(--xwarning-9);
+    --warning-10: var(--xwarning-10);
     --neutral-hue: var(--primary-hue);
     --neutral-c-start: var(--c-range-start);
     --neutral-c-end: var(--c-range-end);
@@ -323,6 +376,16 @@
         --success-8: var(--xsuccess-3);
         --success-9: var(--xsuccess-2);
         --success-10: var(--xsuccess-1);
+        --warning-1: var(--xwarning-10);
+        --warning-2: var(--xwarning-9);
+        --warning-3: var(--xwarning-8);
+        --warning-4: var(--xwarning-7);
+        --warning-5: var(--xwarning-6);
+        --warning-6: var(--xwarning-5);
+        --warning-7: var(--xwarning-4);
+        --warning-8: var(--xwarning-3);
+        --warning-9: var(--xwarning-2);
+        --warning-10: var(--xwarning-1);
         --neutral-1: var(--xneutral-10);
         --neutral-2: var(--xneutral-9);
         --neutral-3: var(--xneutral-8);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "6.6.19",
+  "version": "6.6.22",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",