@raystack/apsara 0.49.1 → 0.50.1

package/dist/components/sheet/sheet.js

@@ -1,9 +1,10 @@
-import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
-import { Cross1Icon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Cross1Icon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
 import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
 import { forwardRef } from 'react';
 import styles from './sheet.module.css.js';
-import { Portal, Content, Overlay as Overlay$1, Close, Trigger, Title, Description, Root } from '../../node_modules/.pnpm/@radix-ui_react-dialog@1.1.14_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-dialog/dist/index.js';
+import { Portal, Content, Overlay as Overlay$1, Close, Trigger, Title, Description, Root } from '../../node_modules/.pnpm/@radix-ui_react-dialog@1.1.14_@types_react-dom@19.1.7_@types_react@19.1.9__@types_react@19.1._i7gyttlqowrnok6rwi63tbbmni/node_modules/@radix-ui/react-dialog/dist/index.js';
 
 const sheetContent = cva(styles.sheetContent, {
     variants: {
@@ -19,17 +20,17 @@ const sheetContent = cva(styles.sheetContent, {
     }
 });
 const SheetContent = forwardRef(({ className, children, close, side, ariaLabel, ariaDescription, ...props }, forwardedRef) => {
-    return (jsxRuntimeExports.jsx(Portal, { children: jsxRuntimeExports.jsx(Overlay, { children: jsxRuntimeExports.jsxs(Content, { ...props, ref: forwardedRef, className: sheetContent({ side, className }), "aria-label": ariaLabel || 'Sheet with overlay', "aria-describedby": ariaDescription ? 'sheet with overlay' : undefined, role: 'dialog', tabIndex: -1, children: [children, close && (jsxRuntimeExports.jsx(CloseButton, { "aria-label": 'Close sheet', children: jsxRuntimeExports.jsx(Cross1Icon, { "aria-hidden": 'true' }) })), ariaDescription && (jsxRuntimeExports.jsx("div", { id: 'sheet-description', className: 'sr-only', children: ariaDescription }))] }) }) }));
+    return (jsx(Portal, { children: jsx(Overlay, { children: jsxs(Content, { ...props, ref: forwardedRef, className: sheetContent({ side, className }), "aria-label": ariaLabel || 'Sheet with overlay', "aria-describedby": ariaDescription ? 'sheet with overlay' : undefined, role: 'dialog', tabIndex: -1, children: [children, close && (jsx(CloseButton, { "aria-label": 'Close sheet', children: jsx(Cross1Icon, { "aria-hidden": 'true' }) })), ariaDescription && (jsx("div", { id: 'sheet-description', className: 'sr-only', children: ariaDescription }))] }) }) }));
 });
 const overlay = cva(styles.overlay);
-const Overlay = forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(Overlay$1, { ref: ref, className: overlay({ className }), "aria-hidden": 'true', role: 'presentation', ...props })));
+const Overlay = forwardRef(({ className, ...props }, ref) => (jsx(Overlay$1, { ref: ref, className: overlay({ className }), "aria-hidden": 'true', role: 'presentation', ...props })));
 Overlay.displayName = Overlay$1.displayName;
 const close = cva(styles.close);
 function CloseButton({ children, className, ...props }) {
-    return (jsxRuntimeExports.jsx(Close, { className: close({ className }), ...props, "aria-label": 'Close', children: children }));
+    return (jsx(Close, { className: close({ className }), ...props, "aria-label": 'Close', children: children }));
 }
 function RootSheet({ children, ariaLabel, ...props }) {
-    return jsxRuntimeExports.jsx(Root, { ...props, children: children });
+    return jsx(Root, { ...props, children: children });
 }
 const Sheet = Object.assign(RootSheet, {
     Trigger: Trigger,

package/dist/components/sheet/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","sources":["../../../components/sheet/sheet.tsx"],"sourcesContent":["import { Cross1Icon } from '@radix-ui/react-icons';\nimport { VariantProps, cva } from 'class-variance-authority';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  ElementRef,\n  forwardRef\n} from 'react';\n\nimport styles from './sheet.module.css';\n\nconst sheetContent = cva(styles.sheetContent, {\n  variants: {\n    side: {\n      top: styles['sheetContent-top'],\n      bottom: styles['sheetContent-bottom'],\n      left: styles['sheetContent-left'],\n      right: styles['sheetContent-right']\n    }\n  },\n  defaultVariants: {\n    side: 'right'\n  }\n});\n\nexport interface DialogContentProps\n  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n    VariantProps<typeof sheetContent> {\n  ariaLabel?: string;\n  ariaDescription?: string;\n}\n\nexport const SheetContent = forwardRef<\n  ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps & { close?: boolean; children?: React.ReactNode }\n>(\n  (\n    { className, children, close, side, ariaLabel, ariaDescription, ...props },\n    forwardedRef\n  ) => {\n    return (\n      <DialogPrimitive.Portal>\n        <Overlay>\n          <DialogPrimitive.Content\n            {...props}\n            ref={forwardedRef}\n            className={sheetContent({ side, className })}\n            aria-label={ariaLabel || 'Sheet with overlay'}\n            aria-describedby={\n              ariaDescription ? 'sheet with overlay' : undefined\n            }\n            role='dialog'\n            tabIndex={-1}\n          >\n            {children}\n            {close && (\n              <CloseButton aria-label='Close sheet'>\n                <Cross1Icon aria-hidden='true' />\n              </CloseButton>\n            )}\n            {ariaDescription && (\n              <div id='sheet-description' className='sr-only'>\n                {ariaDescription}\n              </div>\n            )}\n          </DialogPrimitive.Content>\n        </Overlay>\n      </DialogPrimitive.Portal>\n    );\n  }\n);\n\nconst overlay = cva(styles.overlay);\nexport interface OverlayProps\n  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>,\n    VariantProps<typeof overlay> {}\n\nconst Overlay = forwardRef<\n  ElementRef<typeof DialogPrimitive.Overlay>,\n  OverlayProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={overlay({ className })}\n    aria-hidden='true'\n    role='presentation'\n    {...props}\n  />\n));\n\nOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst close = cva(styles.close);\ntype CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;\n\nexport function CloseButton({\n  children,\n  className,\n  ...props\n}: CloseButtonProps) {\n  return (\n    <DialogPrimitive.Close\n      className={close({ className })}\n      {...props}\n      aria-label='Close'\n    >\n      {children}\n    </DialogPrimitive.Close>\n  );\n}\n\ntype SheetProps = ComponentProps<typeof DialogPrimitive.Root> & {\n  ariaLabel?: string;\n};\n\nexport function RootSheet({ children, ariaLabel, ...props }: SheetProps) {\n  return <DialogPrimitive.Root {...props}>{children}</DialogPrimitive.Root>;\n}\n\nexport const Sheet = Object.assign(RootSheet, {\n  Trigger: DialogPrimitive.Trigger,\n  Content: SheetContent,\n  Close: DialogPrimitive.Close,\n  Title: DialogPrimitive.Title,\n  Description: DialogPrimitive.Description\n});\n"],"names":["_jsx","DialogPrimitive.Portal","_jsxs","DialogPrimitive.Content","DialogPrimitive.Overlay","DialogPrimitive.Close","DialogPrimitive.Root","DialogPrimitive.Trigger","DialogPrimitive.Title","DialogPrimitive.Description"],"mappings":"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"}
+{"version":3,"file":"sheet.js","sources":["../../../components/sheet/sheet.tsx"],"sourcesContent":["'use client';\n\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { VariantProps, cva } from 'class-variance-authority';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  ElementRef,\n  forwardRef\n} from 'react';\n\nimport styles from './sheet.module.css';\n\nconst sheetContent = cva(styles.sheetContent, {\n  variants: {\n    side: {\n      top: styles['sheetContent-top'],\n      bottom: styles['sheetContent-bottom'],\n      left: styles['sheetContent-left'],\n      right: styles['sheetContent-right']\n    }\n  },\n  defaultVariants: {\n    side: 'right'\n  }\n});\n\nexport interface DialogContentProps\n  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n    VariantProps<typeof sheetContent> {\n  ariaLabel?: string;\n  ariaDescription?: string;\n}\n\nexport const SheetContent = forwardRef<\n  ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps & { close?: boolean; children?: React.ReactNode }\n>(\n  (\n    { className, children, close, side, ariaLabel, ariaDescription, ...props },\n    forwardedRef\n  ) => {\n    return (\n      <DialogPrimitive.Portal>\n        <Overlay>\n          <DialogPrimitive.Content\n            {...props}\n            ref={forwardedRef}\n            className={sheetContent({ side, className })}\n            aria-label={ariaLabel || 'Sheet with overlay'}\n            aria-describedby={\n              ariaDescription ? 'sheet with overlay' : undefined\n            }\n            role='dialog'\n            tabIndex={-1}\n          >\n            {children}\n            {close && (\n              <CloseButton aria-label='Close sheet'>\n                <Cross1Icon aria-hidden='true' />\n              </CloseButton>\n            )}\n            {ariaDescription && (\n              <div id='sheet-description' className='sr-only'>\n                {ariaDescription}\n              </div>\n            )}\n          </DialogPrimitive.Content>\n        </Overlay>\n      </DialogPrimitive.Portal>\n    );\n  }\n);\n\nconst overlay = cva(styles.overlay);\nexport interface OverlayProps\n  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>,\n    VariantProps<typeof overlay> {}\n\nconst Overlay = forwardRef<\n  ElementRef<typeof DialogPrimitive.Overlay>,\n  OverlayProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={overlay({ className })}\n    aria-hidden='true'\n    role='presentation'\n    {...props}\n  />\n));\n\nOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst close = cva(styles.close);\ntype CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;\n\nexport function CloseButton({\n  children,\n  className,\n  ...props\n}: CloseButtonProps) {\n  return (\n    <DialogPrimitive.Close\n      className={close({ className })}\n      {...props}\n      aria-label='Close'\n    >\n      {children}\n    </DialogPrimitive.Close>\n  );\n}\n\ntype SheetProps = ComponentProps<typeof DialogPrimitive.Root> & {\n  ariaLabel?: string;\n};\n\nexport function RootSheet({ children, ariaLabel, ...props }: SheetProps) {\n  return <DialogPrimitive.Root {...props}>{children}</DialogPrimitive.Root>;\n}\n\nexport const Sheet = Object.assign(RootSheet, {\n  Trigger: DialogPrimitive.Trigger,\n  Content: SheetContent,\n  Close: DialogPrimitive.Close,\n  Title: DialogPrimitive.Title,\n  Description: DialogPrimitive.Description\n});\n"],"names":[],"mappings":";;;;;;;;AAcA;AACE;AACE;AACE;AACA;AACA;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AASY;AAQT;AA6BF;AAGF;AAKA;AAaA;AAEA;AAGM;;AAcN;AAMM;;AAEN;;;AAIE;;;;AAID;;"}

package/dist/components/side-panel/side-panel.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
 var sidePanel_module = require('./side-panel.module.css.cjs');
@@ -19,13 +19,13 @@ const sidePanelRoot = index.cva(sidePanel_module.default["side-panel"], {
     },
 });
 const SidePanelRoot = ({ children, side = "right", className, }) => {
-    return (jsxRuntime.jsxRuntimeExports.jsx("aside", { className: sidePanelRoot({ side, className }), children: children }));
+    return (jsxRuntime.jsx("aside", { className: sidePanelRoot({ side, className }), children: children }));
 };
 const SidePanelHeader = ({ title, icon, actions = [], description, }) => {
-    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: sidePanel_module.default["side-panel-header"], children: [jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: 3, justify: "between", align: "center", children: [jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: 3, children: [icon, jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 5, weight: 500, children: title })] }), jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { gap: 3, children: actions?.map((action, index) => (jsxRuntime.jsxRuntimeExports.jsx(React.Fragment, { children: action }, index))) })] }), description ? jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 2, children: description }) : null] }));
+    return (jsxRuntime.jsxs("div", { className: sidePanel_module.default["side-panel-header"], children: [jsxRuntime.jsxs(flex.Flex, { gap: 3, justify: "between", align: "center", children: [jsxRuntime.jsxs(flex.Flex, { gap: 3, children: [icon, jsxRuntime.jsx(text.Text, { size: 5, weight: 500, children: title })] }), jsxRuntime.jsx(flex.Flex, { gap: 3, children: actions?.map((action, index) => (jsxRuntime.jsx(React.Fragment, { children: action }, index))) })] }), description ? jsxRuntime.jsx(text.Text, { size: 2, children: description }) : null] }));
 };
 const SidePanelSection = ({ children }) => {
-    return jsxRuntime.jsxRuntimeExports.jsx("div", { className: sidePanel_module.default["side-panel-section"], children: children });
+    return jsxRuntime.jsx("div", { className: sidePanel_module.default["side-panel-section"], children: children });
 };
 const SidePanel = Object.assign(SidePanelRoot, {
     Header: SidePanelHeader,

package/dist/components/side-panel/side-panel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"side-panel.cjs","sources":["../../../components/side-panel/side-panel.tsx"],"sourcesContent":["import React from \"react\";\nimport { VariantProps, cva } from \"class-variance-authority\";\n\nimport styles from \"./side-panel.module.css\";\nimport { Flex } from \"../flex\";\nimport { Text } from \"../text\";\n\nconst sidePanelRoot = cva(styles[\"side-panel\"], {\n  variants: {\n    side: {\n      left: styles[\"side-panel-left\"],\n      right: styles[\"side-panel-right\"],\n    },\n  },\n  defaultVariants: {\n    side: \"right\",\n  },\n});\n\ninterface SidePanelProps extends VariantProps<typeof sidePanelRoot> {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst SidePanelRoot = ({\n  children,\n  side = \"right\",\n  className,\n}: SidePanelProps) => {\n  return (\n    <aside className={sidePanelRoot({ side, className })}>{children}</aside>\n  );\n};\n\ninterface SidePanelHeaderProps {\n  title: string;\n  icon?: React.ReactNode;\n  actions?: Array<React.ReactNode>;\n  description?: string;\n}\n\nconst SidePanelHeader = ({\n  title,\n  icon,\n  actions = [],\n  description,\n}: SidePanelHeaderProps) => {\n  return (\n    <div className={styles[\"side-panel-header\"]}>\n      <Flex gap={3} justify=\"between\" align=\"center\">\n        <Flex gap={3}>\n          {icon}\n          <Text size={5} weight={500}>\n            {title}\n          </Text>\n        </Flex>\n        <Flex gap={3}>\n          {actions?.map((action, index) => (\n            <React.Fragment key={index}>{action}</React.Fragment>\n          ))}\n        </Flex>\n      </Flex>\n      {description ? <Text size={2}>{description}</Text> : null}\n    </div>\n  );\n};\n\ninterface SidePanelSectionProps {\n  children: React.ReactNode;\n}\n\nconst SidePanelSection = ({ children }: SidePanelSectionProps) => {\n  return <div className={styles[\"side-panel-section\"]}>{children}</div>;\n};\n\nexport const SidePanel = Object.assign(SidePanelRoot, {\n  Header: SidePanelHeader,\n  Section: SidePanelSection,\n});\n"],"names":["cva","styles","_jsx","_jsxs","Flex","Text"],"mappings":";;;;;;;;;AAOA,MAAM,aAAa,GAAGA,SAAG,CAACC,wBAAM,CAAC,YAAY,CAAC,EAAE;AAC9C,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAEA,wBAAM,CAAC,iBAAiB,CAAC;AAC/B,YAAA,KAAK,EAAEA,wBAAM,CAAC,kBAAkB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,OAAO;AACd,KAAA;AACF,CAAA,CAAC,CAAC;AAOH,MAAM,aAAa,GAAG,CAAC,EACrB,QAAQ,EACR,IAAI,GAAG,OAAO,EACd,SAAS,GACM,KAAI;AACnB,IAAA,QACEC,gCAAO,CAAA,OAAA,EAAA,EAAA,SAAS,EAAE,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAS,EACxE;AACJ,CAAC,CAAC;AASF,MAAM,eAAe,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,OAAO,GAAG,EAAE,EACZ,WAAW,GACU,KAAI;IACzB,QACEC,2CAAK,SAAS,EAAEF,wBAAM,CAAC,mBAAmB,CAAC,EAAA,QAAA,EAAA,CACzCE,iCAAC,CAAAC,SAAI,IAAC,GAAG,EAAE,CAAC,EAAE,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAA,QAAA,EAAA,CAC5CD,kCAACC,SAAI,EAAA,EAAC,GAAG,EAAE,CAAC,aACT,IAAI,EACLF,gCAAC,CAAAG,SAAI,EAAC,EAAA,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,YACvB,KAAK,EAAA,CACD,CACF,EAAA,CAAA,EACPH,gCAAC,CAAAE,SAAI,IAAC,GAAG,EAAE,CAAC,EACT,QAAA,EAAA,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC1BF,gCAAC,CAAA,KAAK,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAc,MAAM,EAAA,EAAd,KAAK,CAA2B,CACtD,CAAC,EAAA,CACG,IACF,EACN,WAAW,GAAGA,gCAAC,CAAAG,SAAI,EAAC,EAAA,IAAI,EAAE,CAAC,EAAA,QAAA,EAAG,WAAW,EAAQ,CAAA,GAAG,IAAI,CACrD,EAAA,CAAA,EACN;AACJ,CAAC,CAAC;AAMF,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAyB,KAAI;IAC/D,OAAOH,gCAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAED,wBAAM,CAAC,oBAAoB,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CAAC;AACxE,CAAC,CAAC;MAEW,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE;AACpD,IAAA,MAAM,EAAE,eAAe;AACvB,IAAA,OAAO,EAAE,gBAAgB;AAC1B,CAAA;;;;"}
+{"version":3,"file":"side-panel.cjs","sources":["../../../components/side-panel/side-panel.tsx"],"sourcesContent":["import React from \"react\";\nimport { VariantProps, cva } from \"class-variance-authority\";\n\nimport styles from \"./side-panel.module.css\";\nimport { Flex } from \"../flex\";\nimport { Text } from \"../text\";\n\nconst sidePanelRoot = cva(styles[\"side-panel\"], {\n  variants: {\n    side: {\n      left: styles[\"side-panel-left\"],\n      right: styles[\"side-panel-right\"],\n    },\n  },\n  defaultVariants: {\n    side: \"right\",\n  },\n});\n\ninterface SidePanelProps extends VariantProps<typeof sidePanelRoot> {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst SidePanelRoot = ({\n  children,\n  side = \"right\",\n  className,\n}: SidePanelProps) => {\n  return (\n    <aside className={sidePanelRoot({ side, className })}>{children}</aside>\n  );\n};\n\ninterface SidePanelHeaderProps {\n  title: string;\n  icon?: React.ReactNode;\n  actions?: Array<React.ReactNode>;\n  description?: string;\n}\n\nconst SidePanelHeader = ({\n  title,\n  icon,\n  actions = [],\n  description,\n}: SidePanelHeaderProps) => {\n  return (\n    <div className={styles[\"side-panel-header\"]}>\n      <Flex gap={3} justify=\"between\" align=\"center\">\n        <Flex gap={3}>\n          {icon}\n          <Text size={5} weight={500}>\n            {title}\n          </Text>\n        </Flex>\n        <Flex gap={3}>\n          {actions?.map((action, index) => (\n            <React.Fragment key={index}>{action}</React.Fragment>\n          ))}\n        </Flex>\n      </Flex>\n      {description ? <Text size={2}>{description}</Text> : null}\n    </div>\n  );\n};\n\ninterface SidePanelSectionProps {\n  children: React.ReactNode;\n}\n\nconst SidePanelSection = ({ children }: SidePanelSectionProps) => {\n  return <div className={styles[\"side-panel-section\"]}>{children}</div>;\n};\n\nexport const SidePanel = Object.assign(SidePanelRoot, {\n  Header: SidePanelHeader,\n  Section: SidePanelSection,\n});\n"],"names":["cva","styles","_jsx","_jsxs","Flex","Text"],"mappings":";;;;;;;;;AAOA,MAAM,aAAa,GAAGA,SAAG,CAACC,wBAAM,CAAC,YAAY,CAAC,EAAE;AAC9C,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAEA,wBAAM,CAAC,iBAAiB,CAAC;AAC/B,YAAA,KAAK,EAAEA,wBAAM,CAAC,kBAAkB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,OAAO;AACd,KAAA;AACF,CAAA,CAAC,CAAC;AAOH,MAAM,aAAa,GAAG,CAAC,EACrB,QAAQ,EACR,IAAI,GAAG,OAAO,EACd,SAAS,GACM,KAAI;AACnB,IAAA,QACEC,cAAO,CAAA,OAAA,EAAA,EAAA,SAAS,EAAE,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAS,EACxE;AACJ,CAAC,CAAC;AASF,MAAM,eAAe,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,OAAO,GAAG,EAAE,EACZ,WAAW,GACU,KAAI;IACzB,QACEC,yBAAK,SAAS,EAAEF,wBAAM,CAAC,mBAAmB,CAAC,EAAA,QAAA,EAAA,CACzCE,eAAC,CAAAC,SAAI,IAAC,GAAG,EAAE,CAAC,EAAE,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAA,QAAA,EAAA,CAC5CD,gBAACC,SAAI,EAAA,EAAC,GAAG,EAAE,CAAC,aACT,IAAI,EACLF,cAAC,CAAAG,SAAI,EAAC,EAAA,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,YACvB,KAAK,EAAA,CACD,CACF,EAAA,CAAA,EACPH,cAAC,CAAAE,SAAI,IAAC,GAAG,EAAE,CAAC,EACT,QAAA,EAAA,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC1BF,cAAC,CAAA,KAAK,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAc,MAAM,EAAA,EAAd,KAAK,CAA2B,CACtD,CAAC,EAAA,CACG,IACF,EACN,WAAW,GAAGA,cAAC,CAAAG,SAAI,EAAC,EAAA,IAAI,EAAE,CAAC,EAAA,QAAA,EAAG,WAAW,EAAQ,CAAA,GAAG,IAAI,CACrD,EAAA,CAAA,EACN;AACJ,CAAC,CAAC;AAMF,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAyB,KAAI;IAC/D,OAAOH,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAED,wBAAM,CAAC,oBAAoB,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CAAC;AACxE,CAAC,CAAC;MAEW,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE;AACpD,IAAA,MAAM,EAAE,eAAe;AACvB,IAAA,OAAO,EAAE,gBAAgB;AAC1B,CAAA;;;;"}

package/dist/components/side-panel/side-panel.js

@@ -1,4 +1,4 @@
-import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
 import styles from './side-panel.module.css.js';
@@ -17,13 +17,13 @@ const sidePanelRoot = cva(styles["side-panel"], {
     },
 });
 const SidePanelRoot = ({ children, side = "right", className, }) => {
-    return (jsxRuntimeExports.jsx("aside", { className: sidePanelRoot({ side, className }), children: children }));
+    return (jsx("aside", { className: sidePanelRoot({ side, className }), children: children }));
 };
 const SidePanelHeader = ({ title, icon, actions = [], description, }) => {
-    return (jsxRuntimeExports.jsxs("div", { className: styles["side-panel-header"], children: [jsxRuntimeExports.jsxs(Flex, { gap: 3, justify: "between", align: "center", children: [jsxRuntimeExports.jsxs(Flex, { gap: 3, children: [icon, jsxRuntimeExports.jsx(Text, { size: 5, weight: 500, children: title })] }), jsxRuntimeExports.jsx(Flex, { gap: 3, children: actions?.map((action, index) => (jsxRuntimeExports.jsx(React__default.Fragment, { children: action }, index))) })] }), description ? jsxRuntimeExports.jsx(Text, { size: 2, children: description }) : null] }));
+    return (jsxs("div", { className: styles["side-panel-header"], children: [jsxs(Flex, { gap: 3, justify: "between", align: "center", children: [jsxs(Flex, { gap: 3, children: [icon, jsx(Text, { size: 5, weight: 500, children: title })] }), jsx(Flex, { gap: 3, children: actions?.map((action, index) => (jsx(React__default.Fragment, { children: action }, index))) })] }), description ? jsx(Text, { size: 2, children: description }) : null] }));
 };
 const SidePanelSection = ({ children }) => {
-    return jsxRuntimeExports.jsx("div", { className: styles["side-panel-section"], children: children });
+    return jsx("div", { className: styles["side-panel-section"], children: children });
 };
 const SidePanel = Object.assign(SidePanelRoot, {
     Header: SidePanelHeader,

package/dist/components/side-panel/side-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-panel.js","sources":["../../../components/side-panel/side-panel.tsx"],"sourcesContent":["import React from \"react\";\nimport { VariantProps, cva } from \"class-variance-authority\";\n\nimport styles from \"./side-panel.module.css\";\nimport { Flex } from \"../flex\";\nimport { Text } from \"../text\";\n\nconst sidePanelRoot = cva(styles[\"side-panel\"], {\n  variants: {\n    side: {\n      left: styles[\"side-panel-left\"],\n      right: styles[\"side-panel-right\"],\n    },\n  },\n  defaultVariants: {\n    side: \"right\",\n  },\n});\n\ninterface SidePanelProps extends VariantProps<typeof sidePanelRoot> {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst SidePanelRoot = ({\n  children,\n  side = \"right\",\n  className,\n}: SidePanelProps) => {\n  return (\n    <aside className={sidePanelRoot({ side, className })}>{children}</aside>\n  );\n};\n\ninterface SidePanelHeaderProps {\n  title: string;\n  icon?: React.ReactNode;\n  actions?: Array<React.ReactNode>;\n  description?: string;\n}\n\nconst SidePanelHeader = ({\n  title,\n  icon,\n  actions = [],\n  description,\n}: SidePanelHeaderProps) => {\n  return (\n    <div className={styles[\"side-panel-header\"]}>\n      <Flex gap={3} justify=\"between\" align=\"center\">\n        <Flex gap={3}>\n          {icon}\n          <Text size={5} weight={500}>\n            {title}\n          </Text>\n        </Flex>\n        <Flex gap={3}>\n          {actions?.map((action, index) => (\n            <React.Fragment key={index}>{action}</React.Fragment>\n          ))}\n        </Flex>\n      </Flex>\n      {description ? <Text size={2}>{description}</Text> : null}\n    </div>\n  );\n};\n\ninterface SidePanelSectionProps {\n  children: React.ReactNode;\n}\n\nconst SidePanelSection = ({ children }: SidePanelSectionProps) => {\n  return <div className={styles[\"side-panel-section\"]}>{children}</div>;\n};\n\nexport const SidePanel = Object.assign(SidePanelRoot, {\n  Header: SidePanelHeader,\n  Section: SidePanelSection,\n});\n"],"names":["_jsx","_jsxs","React"],"mappings":";;;;;;;AAOA,MAAM,aAAa,GAAG,GAAG,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE;AAC9C,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAC/B,YAAA,KAAK,EAAE,MAAM,CAAC,kBAAkB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,OAAO;AACd,KAAA;AACF,CAAA,CAAC,CAAC;AAOH,MAAM,aAAa,GAAG,CAAC,EACrB,QAAQ,EACR,IAAI,GAAG,OAAO,EACd,SAAS,GACM,KAAI;AACnB,IAAA,QACEA,qBAAO,CAAA,OAAA,EAAA,EAAA,SAAS,EAAE,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAS,EACxE;AACJ,CAAC,CAAC;AASF,MAAM,eAAe,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,OAAO,GAAG,EAAE,EACZ,WAAW,GACU,KAAI;IACzB,QACEC,gCAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,EAAA,QAAA,EAAA,CACzCA,sBAAC,CAAA,IAAI,IAAC,GAAG,EAAE,CAAC,EAAE,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAA,QAAA,EAAA,CAC5CA,uBAAC,IAAI,EAAA,EAAC,GAAG,EAAE,CAAC,aACT,IAAI,EACLD,qBAAC,CAAA,IAAI,EAAC,EAAA,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,YACvB,KAAK,EAAA,CACD,CACF,EAAA,CAAA,EACPA,qBAAC,CAAA,IAAI,IAAC,GAAG,EAAE,CAAC,EACT,QAAA,EAAA,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC1BA,qBAAC,CAAAE,cAAK,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAc,MAAM,EAAA,EAAd,KAAK,CAA2B,CACtD,CAAC,EAAA,CACG,IACF,EACN,WAAW,GAAGF,qBAAC,CAAA,IAAI,EAAC,EAAA,IAAI,EAAE,CAAC,EAAA,QAAA,EAAG,WAAW,EAAQ,CAAA,GAAG,IAAI,CACrD,EAAA,CAAA,EACN;AACJ,CAAC,CAAC;AAMF,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAyB,KAAI;IAC/D,OAAOA,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CAAC;AACxE,CAAC,CAAC;MAEW,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE;AACpD,IAAA,MAAM,EAAE,eAAe;AACvB,IAAA,OAAO,EAAE,gBAAgB;AAC1B,CAAA;;;;"}
+{"version":3,"file":"side-panel.js","sources":["../../../components/side-panel/side-panel.tsx"],"sourcesContent":["import React from \"react\";\nimport { VariantProps, cva } from \"class-variance-authority\";\n\nimport styles from \"./side-panel.module.css\";\nimport { Flex } from \"../flex\";\nimport { Text } from \"../text\";\n\nconst sidePanelRoot = cva(styles[\"side-panel\"], {\n  variants: {\n    side: {\n      left: styles[\"side-panel-left\"],\n      right: styles[\"side-panel-right\"],\n    },\n  },\n  defaultVariants: {\n    side: \"right\",\n  },\n});\n\ninterface SidePanelProps extends VariantProps<typeof sidePanelRoot> {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst SidePanelRoot = ({\n  children,\n  side = \"right\",\n  className,\n}: SidePanelProps) => {\n  return (\n    <aside className={sidePanelRoot({ side, className })}>{children}</aside>\n  );\n};\n\ninterface SidePanelHeaderProps {\n  title: string;\n  icon?: React.ReactNode;\n  actions?: Array<React.ReactNode>;\n  description?: string;\n}\n\nconst SidePanelHeader = ({\n  title,\n  icon,\n  actions = [],\n  description,\n}: SidePanelHeaderProps) => {\n  return (\n    <div className={styles[\"side-panel-header\"]}>\n      <Flex gap={3} justify=\"between\" align=\"center\">\n        <Flex gap={3}>\n          {icon}\n          <Text size={5} weight={500}>\n            {title}\n          </Text>\n        </Flex>\n        <Flex gap={3}>\n          {actions?.map((action, index) => (\n            <React.Fragment key={index}>{action}</React.Fragment>\n          ))}\n        </Flex>\n      </Flex>\n      {description ? <Text size={2}>{description}</Text> : null}\n    </div>\n  );\n};\n\ninterface SidePanelSectionProps {\n  children: React.ReactNode;\n}\n\nconst SidePanelSection = ({ children }: SidePanelSectionProps) => {\n  return <div className={styles[\"side-panel-section\"]}>{children}</div>;\n};\n\nexport const SidePanel = Object.assign(SidePanelRoot, {\n  Header: SidePanelHeader,\n  Section: SidePanelSection,\n});\n"],"names":["_jsx","_jsxs","React"],"mappings":";;;;;;;AAOA,MAAM,aAAa,GAAG,GAAG,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE;AAC9C,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAC/B,YAAA,KAAK,EAAE,MAAM,CAAC,kBAAkB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,OAAO;AACd,KAAA;AACF,CAAA,CAAC,CAAC;AAOH,MAAM,aAAa,GAAG,CAAC,EACrB,QAAQ,EACR,IAAI,GAAG,OAAO,EACd,SAAS,GACM,KAAI;AACnB,IAAA,QACEA,GAAO,CAAA,OAAA,EAAA,EAAA,SAAS,EAAE,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAS,EACxE;AACJ,CAAC,CAAC;AASF,MAAM,eAAe,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,OAAO,GAAG,EAAE,EACZ,WAAW,GACU,KAAI;IACzB,QACEC,cAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,EAAA,QAAA,EAAA,CACzCA,IAAC,CAAA,IAAI,IAAC,GAAG,EAAE,CAAC,EAAE,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAA,QAAA,EAAA,CAC5CA,KAAC,IAAI,EAAA,EAAC,GAAG,EAAE,CAAC,aACT,IAAI,EACLD,GAAC,CAAA,IAAI,EAAC,EAAA,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,YACvB,KAAK,EAAA,CACD,CACF,EAAA,CAAA,EACPA,GAAC,CAAA,IAAI,IAAC,GAAG,EAAE,CAAC,EACT,QAAA,EAAA,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC1BA,GAAC,CAAAE,cAAK,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAc,MAAM,EAAA,EAAd,KAAK,CAA2B,CACtD,CAAC,EAAA,CACG,IACF,EACN,WAAW,GAAGF,GAAC,CAAA,IAAI,EAAC,EAAA,IAAI,EAAE,CAAC,EAAA,QAAA,EAAG,WAAW,EAAQ,CAAA,GAAG,IAAI,CACrD,EAAA,CAAA,EACN;AACJ,CAAC,CAAC;AAMF,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAyB,KAAI;IAC/D,OAAOA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CAAC;AACxE,CAAC,CAAC;MAEW,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE;AACpD,IAAA,MAAM,EAAE,eAAe;AACvB,IAAA,OAAO,EAAE,gBAAgB;AAC1B,CAAA;;;;"}

package/dist/components/sidebar/sidebar.cjs

@@ -1,28 +1,37 @@
+"use client";
 'use strict';
 
-var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var jsxRuntime = require('react/jsx-runtime');
 var index$1 = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
 var React = require('react');
 var avatar = require('../avatar/avatar.cjs');
 var flex = require('../flex/flex.cjs');
 var tooltip = require('../tooltip/tooltip.cjs');
 var sidebar_module = require('./sidebar.module.css.cjs');
-var index = require('../../node_modules/.pnpm/@radix-ui_react-collapsible@1.1.11_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18_qdnr5tshbuses2czt45n43so7q/node_modules/@radix-ui/react-collapsible/dist/index.cjs');
+var index = require('../../node_modules/.pnpm/@radix-ui_react-collapsible@1.1.11_@types_react-dom@19.1.7_@types_react@19.1.9__@types_react@_a35yqe6vcc2vmteafw4xyimtca/node_modules/@radix-ui/react-collapsible/dist/index.cjs');
 
 const SidebarContext = React.createContext({
     isCollapsed: false
 });
 const root = index$1.cva(sidebar_module.default.root);
-const SidebarRoot = React.forwardRef(({ className, position = 'left', open, onOpenChange, hideCollapsedItemTooltip, collapsible = true, children, ...props }, ref) => (jsxRuntime.jsxRuntimeExports.jsx(SidebarContext.Provider, { value: { isCollapsed: !open, hideCollapsedItemTooltip }, children: jsxRuntime.jsxRuntimeExports.jsx(tooltip.Tooltip.Provider, { children: jsxRuntime.jsxRuntimeExports.jsx(index.Root, { ref: ref, className: root({ className }), "data-position": position, "data-state": open ? 'expanded' : 'collapsed', "data-collapse-disabled": !collapsible, open: open, onOpenChange: collapsible ? onOpenChange : undefined, "aria-label": 'Navigation Sidebar', "aria-expanded": open, role: 'navigation', ...props, asChild: true, children: jsxRuntime.jsxRuntimeExports.jsxs("aside", { children: [collapsible && (jsxRuntime.jsxRuntimeExports.jsx(tooltip.Tooltip, { message: open ? 'Click to collapse' : 'Click to expand', side: position === 'left' ? 'right' : 'left', asChild: true, followCursor: true, sideOffset: 10, children: jsxRuntime.jsxRuntimeExports.jsx("div", { className: sidebar_module.default.resizeHandle, onClick: () => onOpenChange?.(!open), role: 'button', tabIndex: 0, "aria-label": open ? 'Collapse sidebar' : 'Expand sidebar', onKeyDown: e => {
-                                if (e.key === 'Enter' || e.key === ' ') {
-                                    e.preventDefault();
-                                    onOpenChange?.(!open);
-                                }
-                            } }) })), children] }) }) }) })));
-const SidebarHeader = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { align: 'center', ref: ref, className: sidebar_module.default.header, role: 'banner', ...props, children: children })));
-const SidebarMain = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { ref: ref, className: sidebar_module.default.main, direction: 'column', role: 'group', "aria-label": 'Main navigation', ...props, children: children })));
-const SidebarFooter = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { ref: ref, className: sidebar_module.default.footer, direction: 'column', role: 'group', "aria-label": 'Footer navigation', ...props, children: children })));
-const SidebarItem = React.forwardRef(({ classNames, leadingIcon, children, active, disabled, as = jsxRuntime.jsxRuntimeExports.jsx("a", {}), ...props }, ref) => {
+const SidebarRoot = React.forwardRef(({ className, position = 'left', open: providedOpen, onOpenChange, hideCollapsedItemTooltip, collapsible = true, defaultOpen, children, ...props }, ref) => {
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const open = providedOpen ?? internalOpen;
+    const handleOpenChange = React.useCallback((value) => {
+        setInternalOpen(value);
+        onOpenChange?.(value);
+    }, [onOpenChange]);
+    return (jsxRuntime.jsx(SidebarContext.Provider, { value: { isCollapsed: !open, hideCollapsedItemTooltip }, children: jsxRuntime.jsx(tooltip.Tooltip.Provider, { children: jsxRuntime.jsx(index.Root, { ref: ref, className: root({ className }), "data-position": position, "data-state": open ? 'expanded' : 'collapsed', "data-collapse-disabled": !collapsible, open: open, onOpenChange: collapsible ? handleOpenChange : undefined, "aria-label": 'Navigation Sidebar', "aria-expanded": open, role: 'navigation', ...props, asChild: true, children: jsxRuntime.jsxs("aside", { children: [collapsible && (jsxRuntime.jsx(tooltip.Tooltip, { message: open ? 'Click to collapse' : 'Click to expand', side: position === 'left' ? 'right' : 'left', asChild: true, followCursor: true, sideOffset: 10, children: jsxRuntime.jsx("div", { className: sidebar_module.default.resizeHandle, onClick: () => handleOpenChange(!open), role: 'button', tabIndex: 0, "aria-label": open ? 'Collapse sidebar' : 'Expand sidebar', onKeyDown: e => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        e.preventDefault();
+                                        handleOpenChange(!open);
+                                    }
+                                } }) })), children] }) }) }) }));
+});
+const SidebarHeader = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsx(flex.Flex, { align: 'center', ref: ref, className: sidebar_module.default.header, role: 'banner', ...props, children: children })));
+const SidebarMain = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsx(flex.Flex, { ref: ref, className: sidebar_module.default.main, direction: 'column', role: 'group', "aria-label": 'Main navigation', ...props, children: children })));
+const SidebarFooter = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsx(flex.Flex, { ref: ref, className: sidebar_module.default.footer, direction: 'column', role: 'group', "aria-label": 'Footer navigation', ...props, children: children })));
+const SidebarItem = React.forwardRef(({ classNames, leadingIcon, children, active, disabled, as = jsxRuntime.jsx("a", {}), ...props }, ref) => {
     const { isCollapsed, hideCollapsedItemTooltip } = React.useContext(SidebarContext);
     const shouldShowFallback = leadingIcon == undefined &&
         isCollapsed &&
@@ -37,13 +46,13 @@ const SidebarItem = React.forwardRef(({ classNames, leadingIcon, children, activ
         'aria-current': active ? 'page' : undefined,
         'aria-disabled': disabled,
         ...props
-    }, jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { align: 'center', gap: 3, className: index$1.cx(sidebar_module.default['nav-leading-icon'], classNames?.leadingIcon), "aria-hidden": 'true', children: shouldShowFallback ? (jsxRuntime.jsxRuntimeExports.jsx(avatar.Avatar, { size: 1, variant: 'soft', color: 'neutral', fallback: children[0].toUpperCase(), style: { cursor: 'pointer' } })) : (leadingIcon) }), !isCollapsed && jsxRuntime.jsxRuntimeExports.jsx("span", { className: sidebar_module.default['nav-text'], children: children })] }));
+    }, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(flex.Flex, { align: 'center', gap: 3, className: index$1.cx(sidebar_module.default['nav-leading-icon'], classNames?.leadingIcon), "aria-hidden": 'true', children: shouldShowFallback ? (jsxRuntime.jsx(avatar.Avatar, { size: 1, variant: 'soft', color: 'neutral', fallback: children[0].toUpperCase(), style: { cursor: 'pointer' } })) : (leadingIcon) }), !isCollapsed && jsxRuntime.jsx("span", { className: sidebar_module.default['nav-text'], children: children })] }));
     if (isCollapsed && !hideCollapsedItemTooltip) {
-        return (jsxRuntime.jsxRuntimeExports.jsx(tooltip.Tooltip, { message: children, side: 'right', children: content }));
+        return (jsxRuntime.jsx(tooltip.Tooltip, { message: children, side: 'right', children: content }));
     }
     return content;
 });
-const SidebarNavigationGroup = React.forwardRef(({ className, label, leadingIcon, children, ...props }, ref) => (jsxRuntime.jsxRuntimeExports.jsxs("section", { ref: ref, className: index$1.cx(sidebar_module.default['nav-group'], className), "aria-label": label, ...props, children: [jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: 'center', gap: 3, className: sidebar_module.default['nav-group-header'], children: [leadingIcon && (jsxRuntime.jsxRuntimeExports.jsx("span", { className: sidebar_module.default['nav-leading-icon'], children: leadingIcon })), jsxRuntime.jsxRuntimeExports.jsx("span", { className: sidebar_module.default['nav-group-label'], children: label })] }), jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { direction: 'column', className: sidebar_module.default['nav-group-items'], role: 'list', children: children })] })));
+const SidebarNavigationGroup = React.forwardRef(({ className, label, leadingIcon, children, ...props }, ref) => (jsxRuntime.jsxs("section", { ref: ref, className: index$1.cx(sidebar_module.default['nav-group'], className), "aria-label": label, ...props, children: [jsxRuntime.jsxs(flex.Flex, { align: 'center', gap: 3, className: sidebar_module.default['nav-group-header'], children: [leadingIcon && (jsxRuntime.jsx("span", { className: sidebar_module.default['nav-leading-icon'], children: leadingIcon })), jsxRuntime.jsx("span", { className: sidebar_module.default['nav-group-label'], children: label })] }), jsxRuntime.jsx(flex.Flex, { direction: 'column', className: sidebar_module.default['nav-group-items'], role: 'list', children: children })] })));
 SidebarRoot.displayName = 'Sidebar.Root';
 SidebarHeader.displayName = 'Sidebar.Header';
 SidebarMain.displayName = 'Sidebar.Main';

package/dist/components/sidebar/sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.cjs","sources":["../../../components/sidebar/sidebar.tsx"],"sourcesContent":["import { cva, cx } from 'class-variance-authority';\nimport { Collapsible } from 'radix-ui';\nimport {\n  ComponentPropsWithoutRef,\n  ComponentRef,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  createContext,\n  forwardRef,\n  useContext\n} from 'react';\nimport { Avatar } from '../avatar';\nimport { Flex } from '../flex';\nimport { Tooltip } from '../tooltip';\nimport styles from './sidebar.module.css';\n\ninterface SidebarContextValue {\n  isCollapsed: boolean;\n  hideCollapsedItemTooltip?: boolean;\n}\n\nconst SidebarContext = createContext<SidebarContextValue>({\n  isCollapsed: false\n});\n\nconst root = cva(styles.root);\n\ninterface SidebarProps\n  extends ComponentPropsWithoutRef<typeof Collapsible.Root> {\n  position?: 'left' | 'right';\n  hideCollapsedItemTooltip?: boolean;\n  collapsible?: boolean;\n}\n\ninterface SidebarItemProps extends ComponentPropsWithoutRef<'a'> {\n  leadingIcon?: ReactNode;\n  active?: boolean;\n  disabled?: boolean;\n  as?: ReactElement;\n  classNames?: {\n    root?: string;\n    leadingIcon?: string;\n    text?: string;\n  };\n}\n\ninterface SidebarFooterProps extends ComponentPropsWithoutRef<'div'> {}\n\ninterface SidebarNavigationGroupProps extends ComponentPropsWithoutRef<'div'> {\n  label: string;\n  leadingIcon?: ReactNode;\n}\n\nconst SidebarRoot = forwardRef<\n  ComponentRef<typeof Collapsible.Root>,\n  SidebarProps\n>(\n  (\n    {\n      className,\n      position = 'left',\n      open,\n      onOpenChange,\n      hideCollapsedItemTooltip,\n      collapsible = true,\n      children,\n      ...props\n    },\n    ref\n  ) => (\n    <SidebarContext.Provider\n      value={{ isCollapsed: !open, hideCollapsedItemTooltip }}\n    >\n      <Tooltip.Provider>\n        <Collapsible.Root\n          ref={ref}\n          className={root({ className })}\n          data-position={position}\n          data-state={open ? 'expanded' : 'collapsed'}\n          data-collapse-disabled={!collapsible}\n          open={open}\n          onOpenChange={collapsible ? onOpenChange : undefined}\n          aria-label='Navigation Sidebar'\n          aria-expanded={open}\n          role='navigation'\n          {...props}\n          asChild\n        >\n          <aside>\n            {collapsible && (\n              <Tooltip\n                message={open ? 'Click to collapse' : 'Click to expand'}\n                side={position === 'left' ? 'right' : 'left'}\n                asChild\n                followCursor\n                sideOffset={10}\n              >\n                <div\n                  className={styles.resizeHandle}\n                  onClick={() => onOpenChange?.(!open)}\n                  role='button'\n                  tabIndex={0}\n                  aria-label={open ? 'Collapse sidebar' : 'Expand sidebar'}\n                  onKeyDown={e => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault();\n                      onOpenChange?.(!open);\n                    }\n                  }}\n                />\n              </Tooltip>\n            )}\n            {children}\n          </aside>\n        </Collapsible.Root>\n      </Tooltip.Provider>\n    </SidebarContext.Provider>\n  )\n);\n\nconst SidebarHeader = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<'div'>\n>(({ className, children, ...props }, ref) => (\n  <Flex\n    align='center'\n    ref={ref}\n    className={styles.header}\n    role='banner'\n    {...props}\n  >\n    {children}\n  </Flex>\n));\n\nconst SidebarMain = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, children, ...props }, ref) => (\n    <Flex\n      ref={ref}\n      className={styles.main}\n      direction='column'\n      role='group'\n      aria-label='Main navigation'\n      {...props}\n    >\n      {children}\n    </Flex>\n  )\n);\n\nconst SidebarFooter = forwardRef<HTMLDivElement, SidebarFooterProps>(\n  ({ className, children, ...props }, ref) => (\n    <Flex\n      ref={ref}\n      className={styles.footer}\n      direction='column'\n      role='group'\n      aria-label='Footer navigation'\n      {...props}\n    >\n      {children}\n    </Flex>\n  )\n);\n\nconst SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(\n  (\n    {\n      classNames,\n      leadingIcon,\n      children,\n      active,\n      disabled,\n      as = <a />,\n      ...props\n    },\n    ref\n  ) => {\n    const { isCollapsed, hideCollapsedItemTooltip } =\n      useContext(SidebarContext);\n\n    const shouldShowFallback =\n      leadingIcon == undefined &&\n      isCollapsed &&\n      typeof children === 'string' &&\n      children.length > 0;\n\n    const content = cloneElement(\n      as,\n      {\n        ref,\n        className: cx(styles['nav-item'], classNames?.root),\n        'data-active': active,\n        'data-disabled': disabled,\n        role: 'menuitem',\n        'aria-current': active ? 'page' : undefined,\n        'aria-disabled': disabled,\n        ...props\n      },\n      <>\n        <Flex\n          align='center'\n          gap={3}\n          className={cx(styles['nav-leading-icon'], classNames?.leadingIcon)}\n          aria-hidden='true'\n        >\n          {shouldShowFallback ? (\n            <Avatar\n              size={1}\n              variant='soft'\n              color='neutral'\n              fallback={children[0].toUpperCase()}\n              style={{ cursor: 'pointer' }}\n            />\n          ) : (\n            leadingIcon\n          )}\n        </Flex>\n        {!isCollapsed && <span className={styles['nav-text']}>{children}</span>}\n      </>\n    );\n\n    if (isCollapsed && !hideCollapsedItemTooltip) {\n      return (\n        <Tooltip message={children} side='right'>\n          {content}\n        </Tooltip>\n      );\n    }\n\n    return content;\n  }\n);\n\nconst SidebarNavigationGroup = forwardRef<\n  HTMLElement,\n  SidebarNavigationGroupProps\n>(({ className, label, leadingIcon, children, ...props }, ref) => (\n  <section\n    ref={ref}\n    className={cx(styles['nav-group'], className)}\n    aria-label={label}\n    {...props}\n  >\n    <Flex align='center' gap={3} className={styles['nav-group-header']}>\n      {leadingIcon && (\n        <span className={styles['nav-leading-icon']}>{leadingIcon}</span>\n      )}\n      <span className={styles['nav-group-label']}>{label}</span>\n    </Flex>\n    <Flex direction='column' className={styles['nav-group-items']} role='list'>\n      {children}\n    </Flex>\n  </section>\n));\n\nSidebarRoot.displayName = 'Sidebar.Root';\nSidebarHeader.displayName = 'Sidebar.Header';\nSidebarMain.displayName = 'Sidebar.Main';\nSidebarFooter.displayName = 'Sidebar.Footer';\nSidebarItem.displayName = 'Sidebar.Item';\nSidebarNavigationGroup.displayName = 'Sidebar.Group';\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n  Header: SidebarHeader,\n  Main: SidebarMain,\n  Footer: SidebarFooter,\n  Item: SidebarItem,\n  Group: SidebarNavigationGroup\n});\n"],"names":["createContext","cva","styles","forwardRef","_jsx","Tooltip","Collapsible.Root","_jsxs","Flex","useContext","cloneElement","cx","Avatar"],"mappings":"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"}
+{"version":3,"file":"sidebar.cjs","sources":["../../../components/sidebar/sidebar.tsx"],"sourcesContent":["'use client';\n\nimport { cva, cx } from 'class-variance-authority';\nimport { Collapsible } from 'radix-ui';\nimport {\n  ComponentPropsWithoutRef,\n  ComponentRef,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useState\n} from 'react';\nimport { Avatar } from '../avatar';\nimport { Flex } from '../flex';\nimport { Tooltip } from '../tooltip';\nimport styles from './sidebar.module.css';\n\ninterface SidebarContextValue {\n  isCollapsed: boolean;\n  hideCollapsedItemTooltip?: boolean;\n}\n\nconst SidebarContext = createContext<SidebarContextValue>({\n  isCollapsed: false\n});\n\nconst root = cva(styles.root);\n\ninterface SidebarProps\n  extends ComponentPropsWithoutRef<typeof Collapsible.Root> {\n  position?: 'left' | 'right';\n  hideCollapsedItemTooltip?: boolean;\n  collapsible?: boolean;\n}\n\ninterface SidebarItemProps extends ComponentPropsWithoutRef<'a'> {\n  leadingIcon?: ReactNode;\n  active?: boolean;\n  disabled?: boolean;\n  as?: ReactElement;\n  classNames?: {\n    root?: string;\n    leadingIcon?: string;\n    text?: string;\n  };\n}\n\ninterface SidebarFooterProps extends ComponentPropsWithoutRef<'div'> {}\n\ninterface SidebarNavigationGroupProps extends ComponentPropsWithoutRef<'div'> {\n  label: string;\n  leadingIcon?: ReactNode;\n}\n\nconst SidebarRoot = forwardRef<\n  ComponentRef<typeof Collapsible.Root>,\n  SidebarProps\n>(\n  (\n    {\n      className,\n      position = 'left',\n      open: providedOpen,\n      onOpenChange,\n      hideCollapsedItemTooltip,\n      collapsible = true,\n      defaultOpen,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n\n    const open = providedOpen ?? internalOpen;\n\n    const handleOpenChange = useCallback(\n      (value: boolean) => {\n        setInternalOpen(value);\n        onOpenChange?.(value);\n      },\n      [onOpenChange]\n    );\n\n    return (\n      <SidebarContext.Provider\n        value={{ isCollapsed: !open, hideCollapsedItemTooltip }}\n      >\n        <Tooltip.Provider>\n          <Collapsible.Root\n            ref={ref}\n            className={root({ className })}\n            data-position={position}\n            data-state={open ? 'expanded' : 'collapsed'}\n            data-collapse-disabled={!collapsible}\n            open={open}\n            onOpenChange={collapsible ? handleOpenChange : undefined}\n            aria-label='Navigation Sidebar'\n            aria-expanded={open}\n            role='navigation'\n            {...props}\n            asChild\n          >\n            <aside>\n              {collapsible && (\n                <Tooltip\n                  message={open ? 'Click to collapse' : 'Click to expand'}\n                  side={position === 'left' ? 'right' : 'left'}\n                  asChild\n                  followCursor\n                  sideOffset={10}\n                >\n                  <div\n                    className={styles.resizeHandle}\n                    onClick={() => handleOpenChange(!open)}\n                    role='button'\n                    tabIndex={0}\n                    aria-label={open ? 'Collapse sidebar' : 'Expand sidebar'}\n                    onKeyDown={e => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault();\n                        handleOpenChange(!open);\n                      }\n                    }}\n                  />\n                </Tooltip>\n              )}\n              {children}\n            </aside>\n          </Collapsible.Root>\n        </Tooltip.Provider>\n      </SidebarContext.Provider>\n    );\n  }\n);\n\nconst SidebarHeader = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<'div'>\n>(({ className, children, ...props }, ref) => (\n  <Flex\n    align='center'\n    ref={ref}\n    className={styles.header}\n    role='banner'\n    {...props}\n  >\n    {children}\n  </Flex>\n));\n\nconst SidebarMain = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, children, ...props }, ref) => (\n    <Flex\n      ref={ref}\n      className={styles.main}\n      direction='column'\n      role='group'\n      aria-label='Main navigation'\n      {...props}\n    >\n      {children}\n    </Flex>\n  )\n);\n\nconst SidebarFooter = forwardRef<HTMLDivElement, SidebarFooterProps>(\n  ({ className, children, ...props }, ref) => (\n    <Flex\n      ref={ref}\n      className={styles.footer}\n      direction='column'\n      role='group'\n      aria-label='Footer navigation'\n      {...props}\n    >\n      {children}\n    </Flex>\n  )\n);\n\nconst SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(\n  (\n    {\n      classNames,\n      leadingIcon,\n      children,\n      active,\n      disabled,\n      as = <a />,\n      ...props\n    },\n    ref\n  ) => {\n    const { isCollapsed, hideCollapsedItemTooltip } =\n      useContext(SidebarContext);\n\n    const shouldShowFallback =\n      leadingIcon == undefined &&\n      isCollapsed &&\n      typeof children === 'string' &&\n      children.length > 0;\n\n    const content = cloneElement(\n      as,\n      {\n        ref,\n        className: cx(styles['nav-item'], classNames?.root),\n        'data-active': active,\n        'data-disabled': disabled,\n        role: 'menuitem',\n        'aria-current': active ? 'page' : undefined,\n        'aria-disabled': disabled,\n        ...props\n      },\n      <>\n        <Flex\n          align='center'\n          gap={3}\n          className={cx(styles['nav-leading-icon'], classNames?.leadingIcon)}\n          aria-hidden='true'\n        >\n          {shouldShowFallback ? (\n            <Avatar\n              size={1}\n              variant='soft'\n              color='neutral'\n              fallback={children[0].toUpperCase()}\n              style={{ cursor: 'pointer' }}\n            />\n          ) : (\n            leadingIcon\n          )}\n        </Flex>\n        {!isCollapsed && <span className={styles['nav-text']}>{children}</span>}\n      </>\n    );\n\n    if (isCollapsed && !hideCollapsedItemTooltip) {\n      return (\n        <Tooltip message={children} side='right'>\n          {content}\n        </Tooltip>\n      );\n    }\n\n    return content;\n  }\n);\n\nconst SidebarNavigationGroup = forwardRef<\n  HTMLElement,\n  SidebarNavigationGroupProps\n>(({ className, label, leadingIcon, children, ...props }, ref) => (\n  <section\n    ref={ref}\n    className={cx(styles['nav-group'], className)}\n    aria-label={label}\n    {...props}\n  >\n    <Flex align='center' gap={3} className={styles['nav-group-header']}>\n      {leadingIcon && (\n        <span className={styles['nav-leading-icon']}>{leadingIcon}</span>\n      )}\n      <span className={styles['nav-group-label']}>{label}</span>\n    </Flex>\n    <Flex direction='column' className={styles['nav-group-items']} role='list'>\n      {children}\n    </Flex>\n  </section>\n));\n\nSidebarRoot.displayName = 'Sidebar.Root';\nSidebarHeader.displayName = 'Sidebar.Header';\nSidebarMain.displayName = 'Sidebar.Main';\nSidebarFooter.displayName = 'Sidebar.Footer';\nSidebarItem.displayName = 'Sidebar.Item';\nSidebarNavigationGroup.displayName = 'Sidebar.Group';\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n  Header: SidebarHeader,\n  Main: SidebarMain,\n  Footer: SidebarFooter,\n  Item: SidebarItem,\n  Group: SidebarNavigationGroup\n});\n"],"names":[],"mappings":";;;;;;;;;;;;AA0BA;AACE;AACD;AAED;AA4BA;;AAoBI;AAEA;;AAGI;AACF;AAIF;AAmCkB;;AAEE;;;AAYtB;AAGF;AAeA;AAeA;AAeA;;AAgBI;;;AAIE;AAEF;;;AAKI;AACA;AACA;;AAEA;AACA;AACD;AAwBH;AACE;;AAOF;AACF;AAGF;AAsBA;AACA;AACA;AACA;AACA;AACA;;AAGE;AACA;AACA;AACA;AACA;AACD;;"}

package/dist/components/sidebar/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../components/sidebar/sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EACL,wBAAwB,EAExB,YAAY,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAiBf,UAAU,YACR,SAAQ,wBAAwB,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,gBAAiB,SAAQ,wBAAwB,CAAC,GAAG,CAAC;IAC9D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,UAAU,kBAAmB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;CAAG;AAEvE,UAAU,2BAA4B,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAoND,eAAO,MAAM,OAAO;;;;;;CAMlB,CAAC"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../components/sidebar/sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EACL,wBAAwB,EAExB,YAAY,EACZ,SAAS,EAOV,MAAM,OAAO,CAAC;AAiBf,UAAU,YACR,SAAQ,wBAAwB,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,gBAAiB,SAAQ,wBAAwB,CAAC,GAAG,CAAC;IAC9D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,UAAU,kBAAmB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;CAAG;AAEvE,UAAU,2BAA4B,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAmOD,eAAO,MAAM,OAAO;;;;;;CAMlB,CAAC"}

package/dist/components/sidebar/sidebar.js

@@ -1,26 +1,35 @@
-import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx, cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
-import { createContext, forwardRef, useContext, cloneElement } from 'react';
+import { createContext, forwardRef, useState, useCallback, useContext, cloneElement } from 'react';
 import { Avatar } from '../avatar/avatar.js';
 import { Flex } from '../flex/flex.js';
 import { Tooltip } from '../tooltip/tooltip.js';
 import styles from './sidebar.module.css.js';
-import { Root } from '../../node_modules/.pnpm/@radix-ui_react-collapsible@1.1.11_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18_qdnr5tshbuses2czt45n43so7q/node_modules/@radix-ui/react-collapsible/dist/index.js';
+import { Root } from '../../node_modules/.pnpm/@radix-ui_react-collapsible@1.1.11_@types_react-dom@19.1.7_@types_react@19.1.9__@types_react@_a35yqe6vcc2vmteafw4xyimtca/node_modules/@radix-ui/react-collapsible/dist/index.js';
 
 const SidebarContext = createContext({
     isCollapsed: false
 });
 const root = cva(styles.root);
-const SidebarRoot = forwardRef(({ className, position = 'left', open, onOpenChange, hideCollapsedItemTooltip, collapsible = true, children, ...props }, ref) => (jsxRuntimeExports.jsx(SidebarContext.Provider, { value: { isCollapsed: !open, hideCollapsedItemTooltip }, children: jsxRuntimeExports.jsx(Tooltip.Provider, { children: jsxRuntimeExports.jsx(Root, { ref: ref, className: root({ className }), "data-position": position, "data-state": open ? 'expanded' : 'collapsed', "data-collapse-disabled": !collapsible, open: open, onOpenChange: collapsible ? onOpenChange : undefined, "aria-label": 'Navigation Sidebar', "aria-expanded": open, role: 'navigation', ...props, asChild: true, children: jsxRuntimeExports.jsxs("aside", { children: [collapsible && (jsxRuntimeExports.jsx(Tooltip, { message: open ? 'Click to collapse' : 'Click to expand', side: position === 'left' ? 'right' : 'left', asChild: true, followCursor: true, sideOffset: 10, children: jsxRuntimeExports.jsx("div", { className: styles.resizeHandle, onClick: () => onOpenChange?.(!open), role: 'button', tabIndex: 0, "aria-label": open ? 'Collapse sidebar' : 'Expand sidebar', onKeyDown: e => {
-                                if (e.key === 'Enter' || e.key === ' ') {
-                                    e.preventDefault();
-                                    onOpenChange?.(!open);
-                                }
-                            } }) })), children] }) }) }) })));
-const SidebarHeader = forwardRef(({ className, children, ...props }, ref) => (jsxRuntimeExports.jsx(Flex, { align: 'center', ref: ref, className: styles.header, role: 'banner', ...props, children: children })));
-const SidebarMain = forwardRef(({ className, children, ...props }, ref) => (jsxRuntimeExports.jsx(Flex, { ref: ref, className: styles.main, direction: 'column', role: 'group', "aria-label": 'Main navigation', ...props, children: children })));
-const SidebarFooter = forwardRef(({ className, children, ...props }, ref) => (jsxRuntimeExports.jsx(Flex, { ref: ref, className: styles.footer, direction: 'column', role: 'group', "aria-label": 'Footer navigation', ...props, children: children })));
-const SidebarItem = forwardRef(({ classNames, leadingIcon, children, active, disabled, as = jsxRuntimeExports.jsx("a", {}), ...props }, ref) => {
+const SidebarRoot = forwardRef(({ className, position = 'left', open: providedOpen, onOpenChange, hideCollapsedItemTooltip, collapsible = true, defaultOpen, children, ...props }, ref) => {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const open = providedOpen ?? internalOpen;
+    const handleOpenChange = useCallback((value) => {
+        setInternalOpen(value);
+        onOpenChange?.(value);
+    }, [onOpenChange]);
+    return (jsx(SidebarContext.Provider, { value: { isCollapsed: !open, hideCollapsedItemTooltip }, children: jsx(Tooltip.Provider, { children: jsx(Root, { ref: ref, className: root({ className }), "data-position": position, "data-state": open ? 'expanded' : 'collapsed', "data-collapse-disabled": !collapsible, open: open, onOpenChange: collapsible ? handleOpenChange : undefined, "aria-label": 'Navigation Sidebar', "aria-expanded": open, role: 'navigation', ...props, asChild: true, children: jsxs("aside", { children: [collapsible && (jsx(Tooltip, { message: open ? 'Click to collapse' : 'Click to expand', side: position === 'left' ? 'right' : 'left', asChild: true, followCursor: true, sideOffset: 10, children: jsx("div", { className: styles.resizeHandle, onClick: () => handleOpenChange(!open), role: 'button', tabIndex: 0, "aria-label": open ? 'Collapse sidebar' : 'Expand sidebar', onKeyDown: e => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        e.preventDefault();
+                                        handleOpenChange(!open);
+                                    }
+                                } }) })), children] }) }) }) }));
+});
+const SidebarHeader = forwardRef(({ className, children, ...props }, ref) => (jsx(Flex, { align: 'center', ref: ref, className: styles.header, role: 'banner', ...props, children: children })));
+const SidebarMain = forwardRef(({ className, children, ...props }, ref) => (jsx(Flex, { ref: ref, className: styles.main, direction: 'column', role: 'group', "aria-label": 'Main navigation', ...props, children: children })));
+const SidebarFooter = forwardRef(({ className, children, ...props }, ref) => (jsx(Flex, { ref: ref, className: styles.footer, direction: 'column', role: 'group', "aria-label": 'Footer navigation', ...props, children: children })));
+const SidebarItem = forwardRef(({ classNames, leadingIcon, children, active, disabled, as = jsx("a", {}), ...props }, ref) => {
     const { isCollapsed, hideCollapsedItemTooltip } = useContext(SidebarContext);
     const shouldShowFallback = leadingIcon == undefined &&
         isCollapsed &&
@@ -35,13 +44,13 @@ const SidebarItem = forwardRef(({ classNames, leadingIcon, children, active, dis
         'aria-current': active ? 'page' : undefined,
         'aria-disabled': disabled,
         ...props
-    }, jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Flex, { align: 'center', gap: 3, className: cx(styles['nav-leading-icon'], classNames?.leadingIcon), "aria-hidden": 'true', children: shouldShowFallback ? (jsxRuntimeExports.jsx(Avatar, { size: 1, variant: 'soft', color: 'neutral', fallback: children[0].toUpperCase(), style: { cursor: 'pointer' } })) : (leadingIcon) }), !isCollapsed && jsxRuntimeExports.jsx("span", { className: styles['nav-text'], children: children })] }));
+    }, jsxs(Fragment, { children: [jsx(Flex, { align: 'center', gap: 3, className: cx(styles['nav-leading-icon'], classNames?.leadingIcon), "aria-hidden": 'true', children: shouldShowFallback ? (jsx(Avatar, { size: 1, variant: 'soft', color: 'neutral', fallback: children[0].toUpperCase(), style: { cursor: 'pointer' } })) : (leadingIcon) }), !isCollapsed && jsx("span", { className: styles['nav-text'], children: children })] }));
     if (isCollapsed && !hideCollapsedItemTooltip) {
-        return (jsxRuntimeExports.jsx(Tooltip, { message: children, side: 'right', children: content }));
+        return (jsx(Tooltip, { message: children, side: 'right', children: content }));
     }
     return content;
 });
-const SidebarNavigationGroup = forwardRef(({ className, label, leadingIcon, children, ...props }, ref) => (jsxRuntimeExports.jsxs("section", { ref: ref, className: cx(styles['nav-group'], className), "aria-label": label, ...props, children: [jsxRuntimeExports.jsxs(Flex, { align: 'center', gap: 3, className: styles['nav-group-header'], children: [leadingIcon && (jsxRuntimeExports.jsx("span", { className: styles['nav-leading-icon'], children: leadingIcon })), jsxRuntimeExports.jsx("span", { className: styles['nav-group-label'], children: label })] }), jsxRuntimeExports.jsx(Flex, { direction: 'column', className: styles['nav-group-items'], role: 'list', children: children })] })));
+const SidebarNavigationGroup = forwardRef(({ className, label, leadingIcon, children, ...props }, ref) => (jsxs("section", { ref: ref, className: cx(styles['nav-group'], className), "aria-label": label, ...props, children: [jsxs(Flex, { align: 'center', gap: 3, className: styles['nav-group-header'], children: [leadingIcon && (jsx("span", { className: styles['nav-leading-icon'], children: leadingIcon })), jsx("span", { className: styles['nav-group-label'], children: label })] }), jsx(Flex, { direction: 'column', className: styles['nav-group-items'], role: 'list', children: children })] })));
 SidebarRoot.displayName = 'Sidebar.Root';
 SidebarHeader.displayName = 'Sidebar.Header';
 SidebarMain.displayName = 'Sidebar.Main';

package/dist/components/sidebar/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","sources":["../../../components/sidebar/sidebar.tsx"],"sourcesContent":["import { cva, cx } from 'class-variance-authority';\nimport { Collapsible } from 'radix-ui';\nimport {\n  ComponentPropsWithoutRef,\n  ComponentRef,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  createContext,\n  forwardRef,\n  useContext\n} from 'react';\nimport { Avatar } from '../avatar';\nimport { Flex } from '../flex';\nimport { Tooltip } from '../tooltip';\nimport styles from './sidebar.module.css';\n\ninterface SidebarContextValue {\n  isCollapsed: boolean;\n  hideCollapsedItemTooltip?: boolean;\n}\n\nconst SidebarContext = createContext<SidebarContextValue>({\n  isCollapsed: false\n});\n\nconst root = cva(styles.root);\n\ninterface SidebarProps\n  extends ComponentPropsWithoutRef<typeof Collapsible.Root> {\n  position?: 'left' | 'right';\n  hideCollapsedItemTooltip?: boolean;\n  collapsible?: boolean;\n}\n\ninterface SidebarItemProps extends ComponentPropsWithoutRef<'a'> {\n  leadingIcon?: ReactNode;\n  active?: boolean;\n  disabled?: boolean;\n  as?: ReactElement;\n  classNames?: {\n    root?: string;\n    leadingIcon?: string;\n    text?: string;\n  };\n}\n\ninterface SidebarFooterProps extends ComponentPropsWithoutRef<'div'> {}\n\ninterface SidebarNavigationGroupProps extends ComponentPropsWithoutRef<'div'> {\n  label: string;\n  leadingIcon?: ReactNode;\n}\n\nconst SidebarRoot = forwardRef<\n  ComponentRef<typeof Collapsible.Root>,\n  SidebarProps\n>(\n  (\n    {\n      className,\n      position = 'left',\n      open,\n      onOpenChange,\n      hideCollapsedItemTooltip,\n      collapsible = true,\n      children,\n      ...props\n    },\n    ref\n  ) => (\n    <SidebarContext.Provider\n      value={{ isCollapsed: !open, hideCollapsedItemTooltip }}\n    >\n      <Tooltip.Provider>\n        <Collapsible.Root\n          ref={ref}\n          className={root({ className })}\n          data-position={position}\n          data-state={open ? 'expanded' : 'collapsed'}\n          data-collapse-disabled={!collapsible}\n          open={open}\n          onOpenChange={collapsible ? onOpenChange : undefined}\n          aria-label='Navigation Sidebar'\n          aria-expanded={open}\n          role='navigation'\n          {...props}\n          asChild\n        >\n          <aside>\n            {collapsible && (\n              <Tooltip\n                message={open ? 'Click to collapse' : 'Click to expand'}\n                side={position === 'left' ? 'right' : 'left'}\n                asChild\n                followCursor\n                sideOffset={10}\n              >\n                <div\n                  className={styles.resizeHandle}\n                  onClick={() => onOpenChange?.(!open)}\n                  role='button'\n                  tabIndex={0}\n                  aria-label={open ? 'Collapse sidebar' : 'Expand sidebar'}\n                  onKeyDown={e => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault();\n                      onOpenChange?.(!open);\n                    }\n                  }}\n                />\n              </Tooltip>\n            )}\n            {children}\n          </aside>\n        </Collapsible.Root>\n      </Tooltip.Provider>\n    </SidebarContext.Provider>\n  )\n);\n\nconst SidebarHeader = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<'div'>\n>(({ className, children, ...props }, ref) => (\n  <Flex\n    align='center'\n    ref={ref}\n    className={styles.header}\n    role='banner'\n    {...props}\n  >\n    {children}\n  </Flex>\n));\n\nconst SidebarMain = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, children, ...props }, ref) => (\n    <Flex\n      ref={ref}\n      className={styles.main}\n      direction='column'\n      role='group'\n      aria-label='Main navigation'\n      {...props}\n    >\n      {children}\n    </Flex>\n  )\n);\n\nconst SidebarFooter = forwardRef<HTMLDivElement, SidebarFooterProps>(\n  ({ className, children, ...props }, ref) => (\n    <Flex\n      ref={ref}\n      className={styles.footer}\n      direction='column'\n      role='group'\n      aria-label='Footer navigation'\n      {...props}\n    >\n      {children}\n    </Flex>\n  )\n);\n\nconst SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(\n  (\n    {\n      classNames,\n      leadingIcon,\n      children,\n      active,\n      disabled,\n      as = <a />,\n      ...props\n    },\n    ref\n  ) => {\n    const { isCollapsed, hideCollapsedItemTooltip } =\n      useContext(SidebarContext);\n\n    const shouldShowFallback =\n      leadingIcon == undefined &&\n      isCollapsed &&\n      typeof children === 'string' &&\n      children.length > 0;\n\n    const content = cloneElement(\n      as,\n      {\n        ref,\n        className: cx(styles['nav-item'], classNames?.root),\n        'data-active': active,\n        'data-disabled': disabled,\n        role: 'menuitem',\n        'aria-current': active ? 'page' : undefined,\n        'aria-disabled': disabled,\n        ...props\n      },\n      <>\n        <Flex\n          align='center'\n          gap={3}\n          className={cx(styles['nav-leading-icon'], classNames?.leadingIcon)}\n          aria-hidden='true'\n        >\n          {shouldShowFallback ? (\n            <Avatar\n              size={1}\n              variant='soft'\n              color='neutral'\n              fallback={children[0].toUpperCase()}\n              style={{ cursor: 'pointer' }}\n            />\n          ) : (\n            leadingIcon\n          )}\n        </Flex>\n        {!isCollapsed && <span className={styles['nav-text']}>{children}</span>}\n      </>\n    );\n\n    if (isCollapsed && !hideCollapsedItemTooltip) {\n      return (\n        <Tooltip message={children} side='right'>\n          {content}\n        </Tooltip>\n      );\n    }\n\n    return content;\n  }\n);\n\nconst SidebarNavigationGroup = forwardRef<\n  HTMLElement,\n  SidebarNavigationGroupProps\n>(({ className, label, leadingIcon, children, ...props }, ref) => (\n  <section\n    ref={ref}\n    className={cx(styles['nav-group'], className)}\n    aria-label={label}\n    {...props}\n  >\n    <Flex align='center' gap={3} className={styles['nav-group-header']}>\n      {leadingIcon && (\n        <span className={styles['nav-leading-icon']}>{leadingIcon}</span>\n      )}\n      <span className={styles['nav-group-label']}>{label}</span>\n    </Flex>\n    <Flex direction='column' className={styles['nav-group-items']} role='list'>\n      {children}\n    </Flex>\n  </section>\n));\n\nSidebarRoot.displayName = 'Sidebar.Root';\nSidebarHeader.displayName = 'Sidebar.Header';\nSidebarMain.displayName = 'Sidebar.Main';\nSidebarFooter.displayName = 'Sidebar.Footer';\nSidebarItem.displayName = 'Sidebar.Item';\nSidebarNavigationGroup.displayName = 'Sidebar.Group';\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n  Header: SidebarHeader,\n  Main: SidebarMain,\n  Footer: SidebarFooter,\n  Item: SidebarItem,\n  Group: SidebarNavigationGroup\n});\n"],"names":["_jsx","Collapsible.Root","_jsxs"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","sources":["../../../components/sidebar/sidebar.tsx"],"sourcesContent":["'use client';\n\nimport { cva, cx } from 'class-variance-authority';\nimport { Collapsible } from 'radix-ui';\nimport {\n  ComponentPropsWithoutRef,\n  ComponentRef,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useState\n} from 'react';\nimport { Avatar } from '../avatar';\nimport { Flex } from '../flex';\nimport { Tooltip } from '../tooltip';\nimport styles from './sidebar.module.css';\n\ninterface SidebarContextValue {\n  isCollapsed: boolean;\n  hideCollapsedItemTooltip?: boolean;\n}\n\nconst SidebarContext = createContext<SidebarContextValue>({\n  isCollapsed: false\n});\n\nconst root = cva(styles.root);\n\ninterface SidebarProps\n  extends ComponentPropsWithoutRef<typeof Collapsible.Root> {\n  position?: 'left' | 'right';\n  hideCollapsedItemTooltip?: boolean;\n  collapsible?: boolean;\n}\n\ninterface SidebarItemProps extends ComponentPropsWithoutRef<'a'> {\n  leadingIcon?: ReactNode;\n  active?: boolean;\n  disabled?: boolean;\n  as?: ReactElement;\n  classNames?: {\n    root?: string;\n    leadingIcon?: string;\n    text?: string;\n  };\n}\n\ninterface SidebarFooterProps extends ComponentPropsWithoutRef<'div'> {}\n\ninterface SidebarNavigationGroupProps extends ComponentPropsWithoutRef<'div'> {\n  label: string;\n  leadingIcon?: ReactNode;\n}\n\nconst SidebarRoot = forwardRef<\n  ComponentRef<typeof Collapsible.Root>,\n  SidebarProps\n>(\n  (\n    {\n      className,\n      position = 'left',\n      open: providedOpen,\n      onOpenChange,\n      hideCollapsedItemTooltip,\n      collapsible = true,\n      defaultOpen,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n\n    const open = providedOpen ?? internalOpen;\n\n    const handleOpenChange = useCallback(\n      (value: boolean) => {\n        setInternalOpen(value);\n        onOpenChange?.(value);\n      },\n      [onOpenChange]\n    );\n\n    return (\n      <SidebarContext.Provider\n        value={{ isCollapsed: !open, hideCollapsedItemTooltip }}\n      >\n        <Tooltip.Provider>\n          <Collapsible.Root\n            ref={ref}\n            className={root({ className })}\n            data-position={position}\n            data-state={open ? 'expanded' : 'collapsed'}\n            data-collapse-disabled={!collapsible}\n            open={open}\n            onOpenChange={collapsible ? handleOpenChange : undefined}\n            aria-label='Navigation Sidebar'\n            aria-expanded={open}\n            role='navigation'\n            {...props}\n            asChild\n          >\n            <aside>\n              {collapsible && (\n                <Tooltip\n                  message={open ? 'Click to collapse' : 'Click to expand'}\n                  side={position === 'left' ? 'right' : 'left'}\n                  asChild\n                  followCursor\n                  sideOffset={10}\n                >\n                  <div\n                    className={styles.resizeHandle}\n                    onClick={() => handleOpenChange(!open)}\n                    role='button'\n                    tabIndex={0}\n                    aria-label={open ? 'Collapse sidebar' : 'Expand sidebar'}\n                    onKeyDown={e => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault();\n                        handleOpenChange(!open);\n                      }\n                    }}\n                  />\n                </Tooltip>\n              )}\n              {children}\n            </aside>\n          </Collapsible.Root>\n        </Tooltip.Provider>\n      </SidebarContext.Provider>\n    );\n  }\n);\n\nconst SidebarHeader = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<'div'>\n>(({ className, children, ...props }, ref) => (\n  <Flex\n    align='center'\n    ref={ref}\n    className={styles.header}\n    role='banner'\n    {...props}\n  >\n    {children}\n  </Flex>\n));\n\nconst SidebarMain = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, children, ...props }, ref) => (\n    <Flex\n      ref={ref}\n      className={styles.main}\n      direction='column'\n      role='group'\n      aria-label='Main navigation'\n      {...props}\n    >\n      {children}\n    </Flex>\n  )\n);\n\nconst SidebarFooter = forwardRef<HTMLDivElement, SidebarFooterProps>(\n  ({ className, children, ...props }, ref) => (\n    <Flex\n      ref={ref}\n      className={styles.footer}\n      direction='column'\n      role='group'\n      aria-label='Footer navigation'\n      {...props}\n    >\n      {children}\n    </Flex>\n  )\n);\n\nconst SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(\n  (\n    {\n      classNames,\n      leadingIcon,\n      children,\n      active,\n      disabled,\n      as = <a />,\n      ...props\n    },\n    ref\n  ) => {\n    const { isCollapsed, hideCollapsedItemTooltip } =\n      useContext(SidebarContext);\n\n    const shouldShowFallback =\n      leadingIcon == undefined &&\n      isCollapsed &&\n      typeof children === 'string' &&\n      children.length > 0;\n\n    const content = cloneElement(\n      as,\n      {\n        ref,\n        className: cx(styles['nav-item'], classNames?.root),\n        'data-active': active,\n        'data-disabled': disabled,\n        role: 'menuitem',\n        'aria-current': active ? 'page' : undefined,\n        'aria-disabled': disabled,\n        ...props\n      },\n      <>\n        <Flex\n          align='center'\n          gap={3}\n          className={cx(styles['nav-leading-icon'], classNames?.leadingIcon)}\n          aria-hidden='true'\n        >\n          {shouldShowFallback ? (\n            <Avatar\n              size={1}\n              variant='soft'\n              color='neutral'\n              fallback={children[0].toUpperCase()}\n              style={{ cursor: 'pointer' }}\n            />\n          ) : (\n            leadingIcon\n          )}\n        </Flex>\n        {!isCollapsed && <span className={styles['nav-text']}>{children}</span>}\n      </>\n    );\n\n    if (isCollapsed && !hideCollapsedItemTooltip) {\n      return (\n        <Tooltip message={children} side='right'>\n          {content}\n        </Tooltip>\n      );\n    }\n\n    return content;\n  }\n);\n\nconst SidebarNavigationGroup = forwardRef<\n  HTMLElement,\n  SidebarNavigationGroupProps\n>(({ className, label, leadingIcon, children, ...props }, ref) => (\n  <section\n    ref={ref}\n    className={cx(styles['nav-group'], className)}\n    aria-label={label}\n    {...props}\n  >\n    <Flex align='center' gap={3} className={styles['nav-group-header']}>\n      {leadingIcon && (\n        <span className={styles['nav-leading-icon']}>{leadingIcon}</span>\n      )}\n      <span className={styles['nav-group-label']}>{label}</span>\n    </Flex>\n    <Flex direction='column' className={styles['nav-group-items']} role='list'>\n      {children}\n    </Flex>\n  </section>\n));\n\nSidebarRoot.displayName = 'Sidebar.Root';\nSidebarHeader.displayName = 'Sidebar.Header';\nSidebarMain.displayName = 'Sidebar.Main';\nSidebarFooter.displayName = 'Sidebar.Footer';\nSidebarItem.displayName = 'Sidebar.Item';\nSidebarNavigationGroup.displayName = 'Sidebar.Group';\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n  Header: SidebarHeader,\n  Main: SidebarMain,\n  Footer: SidebarFooter,\n  Item: SidebarItem,\n  Group: SidebarNavigationGroup\n});\n"],"names":[],"mappings":";;;;;;;;;;AA0BA;AACE;AACD;AAED;AA4BA;;AAoBI;AAEA;;AAGI;AACF;AAIF;AAmCkB;;AAEE;;;AAYtB;AAGF;AAeA;AAeA;AAeA;;AAgBI;;;AAIE;AAEF;;;AAKI;AACA;AACA;;AAEA;AACA;AACD;AAwBH;AACE;;AAOF;AACF;AAGF;AAsBA;AACA;AACA;AACA;AACA;AACA;;AAGE;AACA;AACA;AACA;AACA;AACD;;"}

package/dist/components/skeleton/skeleton.cjs

@@ -1,6 +1,7 @@
+"use client";
 'use strict';
 
-var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var jsxRuntime = require('react/jsx-runtime');
 var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
 var React = require('react');
 var skeleton_module = require('./skeleton.module.css.cjs');
@@ -12,12 +13,12 @@ const SkeletonBase = (props) => {
     const skeletonClassName = index.cx(skeleton_module.default.skeleton, inline && skeleton_module.default.inline, enableAnimation && skeleton_module.default.animate, className);
     const Container = inline ? 'span' : 'div';
     const defaultWidth = inline ? '50px' : '100%';
-    return (jsxRuntime.jsxRuntimeExports.jsx(Container, { className: containerClassName, style: {
+    return (jsxRuntime.jsx(Container, { className: containerClassName, style: {
             display: inline ? 'inline-block' : 'flex',
             flexDirection: !inline ? 'column' : undefined,
             gap: !inline && count > 1 ? 'var(--rs-space-3)' : undefined,
             ...containerStyle
-        }, children: Array.from({ length: count }).map((_, i) => (jsxRuntime.jsxRuntimeExports.jsx("span", { className: skeletonClassName, style: {
+        }, children: Array.from({ length: count }).map((_, i) => (jsxRuntime.jsx("span", { className: skeletonClassName, style: {
                 width: width ?? defaultWidth,
                 height,
                 borderRadius,
@@ -28,7 +29,7 @@ const SkeletonBase = (props) => {
             } }, i))) }));
 };
 const Provider = ({ children, ...props }) => {
-    return (jsxRuntime.jsxRuntimeExports.jsx(SkeletonContext.Provider, { value: props, children: children }));
+    return (jsxRuntime.jsx(SkeletonContext.Provider, { value: props, children: children }));
 };
 const Skeleton = Object.assign(SkeletonBase, { Provider });
 

package/dist/components/skeleton/skeleton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.cjs","sources":["../../../components/skeleton/skeleton.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { CSSProperties, createContext, useContext } from 'react';\nimport styles from './skeleton.module.css';\n\nexport interface SkeletonProps {\n  baseColor?: string;\n  highlightColor?: string;\n  width?: string | number;\n  height?: string | number;\n  borderRadius?: string | number;\n  inline?: boolean;\n  duration?: number;\n  enableAnimation?: boolean;\n  count?: number;\n  style?: CSSProperties;\n  className?: string;\n  containerStyle?: CSSProperties;\n  containerClassName?: string;\n}\n\nconst SkeletonContext = createContext<SkeletonProps | null>(null);\n\ninterface SkeletonProviderProps extends SkeletonProps {\n  children: React.ReactNode;\n}\n\nconst SkeletonBase = (props: SkeletonProps) => {\n  const contextProps = useContext(SkeletonContext);\n\n  const {\n    baseColor,\n    highlightColor,\n    width,\n    height = 'var(--rs-space-4)',\n    borderRadius = 'var(--rs-radius-2)',\n    inline = false,\n    duration = 1.5,\n    count = 1,\n    enableAnimation = true,\n    style,\n    className,\n    containerStyle,\n    containerClassName\n  } = { ...contextProps, ...props };\n\n  const skeletonClassName = cx(\n    styles.skeleton,\n    inline && styles.inline,\n    enableAnimation && styles.animate,\n    className\n  );\n\n  const Container = inline ? 'span' : 'div';\n  const defaultWidth = inline ? '50px' : '100%';\n\n  return (\n    <Container\n      className={containerClassName}\n      style={{\n        display: inline ? 'inline-block' : 'flex',\n        flexDirection: !inline ? 'column' : undefined,\n        gap: !inline && count > 1 ? 'var(--rs-space-3)' : undefined,\n        ...containerStyle\n      }}\n    >\n      {Array.from({ length: count }).map((_, i) => (\n        <span\n          key={i}\n          className={skeletonClassName}\n          style={\n            {\n              width: width ?? defaultWidth,\n              height,\n              borderRadius,\n              '--skeleton-base-color': baseColor,\n              '--skeleton-highlight-color': highlightColor,\n              '--skeleton-duration': `${duration}s`,\n              ...style\n            } as CSSProperties\n          }\n        />\n      ))}\n    </Container>\n  );\n};\n\nconst Provider = ({ children, ...props }: SkeletonProviderProps) => {\n  return (\n    <SkeletonContext.Provider value={props}>\n      {children}\n    </SkeletonContext.Provider>\n  );\n};\n\nexport const Skeleton = Object.assign(SkeletonBase, { Provider });\n"],"names":["createContext","useContext","cx","styles","_jsx"],"mappings":";;;;;;;AAoBA,MAAM,eAAe,GAAGA,mBAAa,CAAuB,IAAI,CAAC,CAAC;AAMlE,MAAM,YAAY,GAAG,CAAC,KAAoB,KAAI;AAC5C,IAAA,MAAM,YAAY,GAAGC,gBAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,MAAM,EACJ,SAAS,EACT,cAAc,EACd,KAAK,EACL,MAAM,GAAG,mBAAmB,EAC5B,YAAY,GAAG,oBAAoB,EACnC,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,GAAG,EACd,KAAK,GAAG,CAAC,EACT,eAAe,GAAG,IAAI,EACtB,KAAK,EACL,SAAS,EACT,cAAc,EACd,kBAAkB,EACnB,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,EAAE,CAAC;IAElC,MAAM,iBAAiB,GAAGC,QAAE,CAC1BC,uBAAM,CAAC,QAAQ,EACf,MAAM,IAAIA,uBAAM,CAAC,MAAM,EACvB,eAAe,IAAIA,uBAAM,CAAC,OAAO,EACjC,SAAS,CACV,CAAC;IAEF,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;IAC1C,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAE9C,QACEC,iCAAC,SAAS,EAAA,EACR,SAAS,EAAE,kBAAkB,EAC7B,KAAK,EAAE;YACL,OAAO,EAAE,MAAM,GAAG,cAAc,GAAG,MAAM;YACzC,aAAa,EAAE,CAAC,MAAM,GAAG,QAAQ,GAAG,SAAS;AAC7C,YAAA,GAAG,EAAE,CAAC,MAAM,IAAI,KAAK,GAAG,CAAC,GAAG,mBAAmB,GAAG,SAAS;AAC3D,YAAA,GAAG,cAAc;SAClB,EAEA,QAAA,EAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MACtCA,gCAEE,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EACH;gBACE,KAAK,EAAE,KAAK,IAAI,YAAY;gBAC5B,MAAM;gBACN,YAAY;AACZ,gBAAA,uBAAuB,EAAE,SAAS;AAClC,gBAAA,4BAA4B,EAAE,cAAc;gBAC5C,qBAAqB,EAAE,CAAG,EAAA,QAAQ,CAAG,CAAA,CAAA;AACrC,gBAAA,GAAG,KAAK;AACQ,aAAA,EAAA,EAXf,CAAC,CAaN,CACH,CAAC,EAAA,CACQ,EACZ;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAyB,KAAI;AACjE,IAAA,QACEA,gCAAA,CAAC,eAAe,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EACnC,QAAQ,EAAA,CACgB,EAC3B;AACJ,CAAC,CAAC;AAEK,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE;;;;"}
+{"version":3,"file":"skeleton.cjs","sources":["../../../components/skeleton/skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { CSSProperties, createContext, useContext } from 'react';\nimport styles from './skeleton.module.css';\n\nexport interface SkeletonProps {\n  baseColor?: string;\n  highlightColor?: string;\n  width?: string | number;\n  height?: string | number;\n  borderRadius?: string | number;\n  inline?: boolean;\n  duration?: number;\n  enableAnimation?: boolean;\n  count?: number;\n  style?: CSSProperties;\n  className?: string;\n  containerStyle?: CSSProperties;\n  containerClassName?: string;\n}\n\nconst SkeletonContext = createContext<SkeletonProps | null>(null);\n\ninterface SkeletonProviderProps extends SkeletonProps {\n  children: React.ReactNode;\n}\n\nconst SkeletonBase = (props: SkeletonProps) => {\n  const contextProps = useContext(SkeletonContext);\n\n  const {\n    baseColor,\n    highlightColor,\n    width,\n    height = 'var(--rs-space-4)',\n    borderRadius = 'var(--rs-radius-2)',\n    inline = false,\n    duration = 1.5,\n    count = 1,\n    enableAnimation = true,\n    style,\n    className,\n    containerStyle,\n    containerClassName\n  } = { ...contextProps, ...props };\n\n  const skeletonClassName = cx(\n    styles.skeleton,\n    inline && styles.inline,\n    enableAnimation && styles.animate,\n    className\n  );\n\n  const Container = inline ? 'span' : 'div';\n  const defaultWidth = inline ? '50px' : '100%';\n\n  return (\n    <Container\n      className={containerClassName}\n      style={{\n        display: inline ? 'inline-block' : 'flex',\n        flexDirection: !inline ? 'column' : undefined,\n        gap: !inline && count > 1 ? 'var(--rs-space-3)' : undefined,\n        ...containerStyle\n      }}\n    >\n      {Array.from({ length: count }).map((_, i) => (\n        <span\n          key={i}\n          className={skeletonClassName}\n          style={\n            {\n              width: width ?? defaultWidth,\n              height,\n              borderRadius,\n              '--skeleton-base-color': baseColor,\n              '--skeleton-highlight-color': highlightColor,\n              '--skeleton-duration': `${duration}s`,\n              ...style\n            } as CSSProperties\n          }\n        />\n      ))}\n    </Container>\n  );\n};\n\nconst Provider = ({ children, ...props }: SkeletonProviderProps) => {\n  return (\n    <SkeletonContext.Provider value={props}>\n      {children}\n    </SkeletonContext.Provider>\n  );\n};\n\nexport const Skeleton = Object.assign(SkeletonBase, { Provider });\n"],"names":[],"mappings":";;;;;;;;AAsBA;AAMA;AACE;;;;;;;;AAkCM;AACA;;;;;AAYM;AACA;;AAEA;AACgB;AAM9B;AAEA;AACE;AAKF;AAEO;;"}

package/dist/components/skeleton/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../components/skeleton/skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAA6B,MAAM,OAAO,CAAC;AAGjE,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID,UAAU,qBAAsB,SAAQ,aAAa;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAsED,eAAO,MAAM,QAAQ,WApEQ,aAAa;uCA4DA,qBAAqB;CAQE,CAAC"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAA6B,MAAM,OAAO,CAAC;AAGjE,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID,UAAU,qBAAsB,SAAQ,aAAa;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAsED,eAAO,MAAM,QAAQ,WApEQ,aAAa;uCA4DA,qBAAqB;CAQE,CAAC"}

package/dist/components/skeleton/skeleton.js

@@ -1,4 +1,5 @@
-import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+"use client";
+import { jsx } from 'react/jsx-runtime';
 import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
 import { createContext, useContext } from 'react';
 import styles from './skeleton.module.css.js';
@@ -10,12 +11,12 @@ const SkeletonBase = (props) => {
     const skeletonClassName = cx(styles.skeleton, inline && styles.inline, enableAnimation && styles.animate, className);
     const Container = inline ? 'span' : 'div';
     const defaultWidth = inline ? '50px' : '100%';
-    return (jsxRuntimeExports.jsx(Container, { className: containerClassName, style: {
+    return (jsx(Container, { className: containerClassName, style: {
             display: inline ? 'inline-block' : 'flex',
             flexDirection: !inline ? 'column' : undefined,
             gap: !inline && count > 1 ? 'var(--rs-space-3)' : undefined,
             ...containerStyle
-        }, children: Array.from({ length: count }).map((_, i) => (jsxRuntimeExports.jsx("span", { className: skeletonClassName, style: {
+        }, children: Array.from({ length: count }).map((_, i) => (jsx("span", { className: skeletonClassName, style: {
                 width: width ?? defaultWidth,
                 height,
                 borderRadius,
@@ -26,7 +27,7 @@ const SkeletonBase = (props) => {
             } }, i))) }));
 };
 const Provider = ({ children, ...props }) => {
-    return (jsxRuntimeExports.jsx(SkeletonContext.Provider, { value: props, children: children }));
+    return (jsx(SkeletonContext.Provider, { value: props, children: children }));
 };
 const Skeleton = Object.assign(SkeletonBase, { Provider });
 

package/dist/components/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["../../../components/skeleton/skeleton.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { CSSProperties, createContext, useContext } from 'react';\nimport styles from './skeleton.module.css';\n\nexport interface SkeletonProps {\n  baseColor?: string;\n  highlightColor?: string;\n  width?: string | number;\n  height?: string | number;\n  borderRadius?: string | number;\n  inline?: boolean;\n  duration?: number;\n  enableAnimation?: boolean;\n  count?: number;\n  style?: CSSProperties;\n  className?: string;\n  containerStyle?: CSSProperties;\n  containerClassName?: string;\n}\n\nconst SkeletonContext = createContext<SkeletonProps | null>(null);\n\ninterface SkeletonProviderProps extends SkeletonProps {\n  children: React.ReactNode;\n}\n\nconst SkeletonBase = (props: SkeletonProps) => {\n  const contextProps = useContext(SkeletonContext);\n\n  const {\n    baseColor,\n    highlightColor,\n    width,\n    height = 'var(--rs-space-4)',\n    borderRadius = 'var(--rs-radius-2)',\n    inline = false,\n    duration = 1.5,\n    count = 1,\n    enableAnimation = true,\n    style,\n    className,\n    containerStyle,\n    containerClassName\n  } = { ...contextProps, ...props };\n\n  const skeletonClassName = cx(\n    styles.skeleton,\n    inline && styles.inline,\n    enableAnimation && styles.animate,\n    className\n  );\n\n  const Container = inline ? 'span' : 'div';\n  const defaultWidth = inline ? '50px' : '100%';\n\n  return (\n    <Container\n      className={containerClassName}\n      style={{\n        display: inline ? 'inline-block' : 'flex',\n        flexDirection: !inline ? 'column' : undefined,\n        gap: !inline && count > 1 ? 'var(--rs-space-3)' : undefined,\n        ...containerStyle\n      }}\n    >\n      {Array.from({ length: count }).map((_, i) => (\n        <span\n          key={i}\n          className={skeletonClassName}\n          style={\n            {\n              width: width ?? defaultWidth,\n              height,\n              borderRadius,\n              '--skeleton-base-color': baseColor,\n              '--skeleton-highlight-color': highlightColor,\n              '--skeleton-duration': `${duration}s`,\n              ...style\n            } as CSSProperties\n          }\n        />\n      ))}\n    </Container>\n  );\n};\n\nconst Provider = ({ children, ...props }: SkeletonProviderProps) => {\n  return (\n    <SkeletonContext.Provider value={props}>\n      {children}\n    </SkeletonContext.Provider>\n  );\n};\n\nexport const Skeleton = Object.assign(SkeletonBase, { Provider });\n"],"names":["_jsx"],"mappings":";;;;;AAoBA,MAAM,eAAe,GAAG,aAAa,CAAuB,IAAI,CAAC,CAAC;AAMlE,MAAM,YAAY,GAAG,CAAC,KAAoB,KAAI;AAC5C,IAAA,MAAM,YAAY,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,MAAM,EACJ,SAAS,EACT,cAAc,EACd,KAAK,EACL,MAAM,GAAG,mBAAmB,EAC5B,YAAY,GAAG,oBAAoB,EACnC,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,GAAG,EACd,KAAK,GAAG,CAAC,EACT,eAAe,GAAG,IAAI,EACtB,KAAK,EACL,SAAS,EACT,cAAc,EACd,kBAAkB,EACnB,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,EAAE,CAAC;IAElC,MAAM,iBAAiB,GAAG,EAAE,CAC1B,MAAM,CAAC,QAAQ,EACf,MAAM,IAAI,MAAM,CAAC,MAAM,EACvB,eAAe,IAAI,MAAM,CAAC,OAAO,EACjC,SAAS,CACV,CAAC;IAEF,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;IAC1C,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAE9C,QACEA,sBAAC,SAAS,EAAA,EACR,SAAS,EAAE,kBAAkB,EAC7B,KAAK,EAAE;YACL,OAAO,EAAE,MAAM,GAAG,cAAc,GAAG,MAAM;YACzC,aAAa,EAAE,CAAC,MAAM,GAAG,QAAQ,GAAG,SAAS;AAC7C,YAAA,GAAG,EAAE,CAAC,MAAM,IAAI,KAAK,GAAG,CAAC,GAAG,mBAAmB,GAAG,SAAS;AAC3D,YAAA,GAAG,cAAc;SAClB,EAEA,QAAA,EAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MACtCA,qBAEE,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EACH;gBACE,KAAK,EAAE,KAAK,IAAI,YAAY;gBAC5B,MAAM;gBACN,YAAY;AACZ,gBAAA,uBAAuB,EAAE,SAAS;AAClC,gBAAA,4BAA4B,EAAE,cAAc;gBAC5C,qBAAqB,EAAE,CAAG,EAAA,QAAQ,CAAG,CAAA,CAAA;AACrC,gBAAA,GAAG,KAAK;AACQ,aAAA,EAAA,EAXf,CAAC,CAaN,CACH,CAAC,EAAA,CACQ,EACZ;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAyB,KAAI;AACjE,IAAA,QACEA,qBAAA,CAAC,eAAe,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EACnC,QAAQ,EAAA,CACgB,EAC3B;AACJ,CAAC,CAAC;AAEK,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE;;;;"}
+{"version":3,"file":"skeleton.js","sources":["../../../components/skeleton/skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { CSSProperties, createContext, useContext } from 'react';\nimport styles from './skeleton.module.css';\n\nexport interface SkeletonProps {\n  baseColor?: string;\n  highlightColor?: string;\n  width?: string | number;\n  height?: string | number;\n  borderRadius?: string | number;\n  inline?: boolean;\n  duration?: number;\n  enableAnimation?: boolean;\n  count?: number;\n  style?: CSSProperties;\n  className?: string;\n  containerStyle?: CSSProperties;\n  containerClassName?: string;\n}\n\nconst SkeletonContext = createContext<SkeletonProps | null>(null);\n\ninterface SkeletonProviderProps extends SkeletonProps {\n  children: React.ReactNode;\n}\n\nconst SkeletonBase = (props: SkeletonProps) => {\n  const contextProps = useContext(SkeletonContext);\n\n  const {\n    baseColor,\n    highlightColor,\n    width,\n    height = 'var(--rs-space-4)',\n    borderRadius = 'var(--rs-radius-2)',\n    inline = false,\n    duration = 1.5,\n    count = 1,\n    enableAnimation = true,\n    style,\n    className,\n    containerStyle,\n    containerClassName\n  } = { ...contextProps, ...props };\n\n  const skeletonClassName = cx(\n    styles.skeleton,\n    inline && styles.inline,\n    enableAnimation && styles.animate,\n    className\n  );\n\n  const Container = inline ? 'span' : 'div';\n  const defaultWidth = inline ? '50px' : '100%';\n\n  return (\n    <Container\n      className={containerClassName}\n      style={{\n        display: inline ? 'inline-block' : 'flex',\n        flexDirection: !inline ? 'column' : undefined,\n        gap: !inline && count > 1 ? 'var(--rs-space-3)' : undefined,\n        ...containerStyle\n      }}\n    >\n      {Array.from({ length: count }).map((_, i) => (\n        <span\n          key={i}\n          className={skeletonClassName}\n          style={\n            {\n              width: width ?? defaultWidth,\n              height,\n              borderRadius,\n              '--skeleton-base-color': baseColor,\n              '--skeleton-highlight-color': highlightColor,\n              '--skeleton-duration': `${duration}s`,\n              ...style\n            } as CSSProperties\n          }\n        />\n      ))}\n    </Container>\n  );\n};\n\nconst Provider = ({ children, ...props }: SkeletonProviderProps) => {\n  return (\n    <SkeletonContext.Provider value={props}>\n      {children}\n    </SkeletonContext.Provider>\n  );\n};\n\nexport const Skeleton = Object.assign(SkeletonBase, { Provider });\n"],"names":[],"mappings":";;;;;;AAsBA;AAMA;AACE;;;;;;;;AAkCM;AACA;;;;;AAYM;AACA;;AAEA;AACgB;AAM9B;AAEA;AACE;AAKF;AAEO;;"}