@raystack/apsara 0.56.7 → 1.0.0-rc.1

package/dist/components/select/select.module.css.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"content":"select-module_content__Du64z","menuitem":"select-module_menuitem__dJfYG","label":"select-module_label__LXFWZ","separator":"select-module_separator__9CYDY","trigger":"select-module_trigger__vW-JA","trigger-outline":"select-module_trigger-outline__llM-Z","trigger-text":"select-module_trigger-text__agtgX","trigger-small":"select-module_trigger-small__GWDnR","triggerContent":"select-module_triggerContent__FEfyb","trigger-medium":"select-module_trigger-medium__4Uyjl","triggerIcon":"select-module_triggerIcon__GaINJ","valueContent":"select-module_valueContent__qjT6c","itemIcon":"select-module_itemIcon__IBsS4","placeholder":"select-module_placeholder__PSr94","comboboxContent":"select-module_comboboxContent__NRAbk","viewport":"select-module_viewport__6eCxI","comboboxViewport":"select-module_comboboxViewport__Zn68D","comboboxContainer":"select-module_comboboxContainer__aNQuA","comboboxInput":"select-module_comboboxInput__Ox9-U","hidden":"select-module_hidden__NMsTy","trigger___outline":"select-module_trigger-outline__llM-Z","trigger___text":"select-module_trigger-text__agtgX","trigger___small":"select-module_trigger-small__GWDnR","trigger___medium":"select-module_trigger-medium__4Uyjl"};
+var styles = {"positioner":"select-module_positioner__dIsqN","content":"select-module_content__Du64z","menuitem":"select-module_menuitem__dJfYG","label":"select-module_label__LXFWZ","separator":"select-module_separator__9CYDY","trigger":"select-module_trigger__vW-JA","trigger-outline":"select-module_trigger-outline__llM-Z","trigger-text":"select-module_trigger-text__agtgX","trigger-small":"select-module_trigger-small__GWDnR","triggerContent":"select-module_triggerContent__FEfyb","trigger-medium":"select-module_trigger-medium__4Uyjl","triggerIcon":"select-module_triggerIcon__GaINJ","valueContent":"select-module_valueContent__qjT6c","itemIcon":"select-module_itemIcon__IBsS4","placeholder":"select-module_placeholder__PSr94","comboboxContent":"select-module_comboboxContent__NRAbk","viewport":"select-module_viewport__6eCxI","comboboxInput":"select-module_comboboxInput__Ox9-U","hidden":"select-module_hidden__NMsTy","trigger___outline":"select-module_trigger-outline__llM-Z","trigger___text":"select-module_trigger-text__agtgX","trigger___small":"select-module_trigger-small__GWDnR","trigger___medium":"select-module_trigger-medium__4Uyjl"};
 
 exports.default = styles;
 //# sourceMappingURL=select.module.css.cjs.map

package/dist/components/select/select.module.css.js

@@ -1,4 +1,4 @@
-var styles = {"content":"select-module_content__Du64z","menuitem":"select-module_menuitem__dJfYG","label":"select-module_label__LXFWZ","separator":"select-module_separator__9CYDY","trigger":"select-module_trigger__vW-JA","trigger-outline":"select-module_trigger-outline__llM-Z","trigger-text":"select-module_trigger-text__agtgX","trigger-small":"select-module_trigger-small__GWDnR","triggerContent":"select-module_triggerContent__FEfyb","trigger-medium":"select-module_trigger-medium__4Uyjl","triggerIcon":"select-module_triggerIcon__GaINJ","valueContent":"select-module_valueContent__qjT6c","itemIcon":"select-module_itemIcon__IBsS4","placeholder":"select-module_placeholder__PSr94","comboboxContent":"select-module_comboboxContent__NRAbk","viewport":"select-module_viewport__6eCxI","comboboxViewport":"select-module_comboboxViewport__Zn68D","comboboxContainer":"select-module_comboboxContainer__aNQuA","comboboxInput":"select-module_comboboxInput__Ox9-U","hidden":"select-module_hidden__NMsTy","trigger___outline":"select-module_trigger-outline__llM-Z","trigger___text":"select-module_trigger-text__agtgX","trigger___small":"select-module_trigger-small__GWDnR","trigger___medium":"select-module_trigger-medium__4Uyjl"};
+var styles = {"positioner":"select-module_positioner__dIsqN","content":"select-module_content__Du64z","menuitem":"select-module_menuitem__dJfYG","label":"select-module_label__LXFWZ","separator":"select-module_separator__9CYDY","trigger":"select-module_trigger__vW-JA","trigger-outline":"select-module_trigger-outline__llM-Z","trigger-text":"select-module_trigger-text__agtgX","trigger-small":"select-module_trigger-small__GWDnR","triggerContent":"select-module_triggerContent__FEfyb","trigger-medium":"select-module_trigger-medium__4Uyjl","triggerIcon":"select-module_triggerIcon__GaINJ","valueContent":"select-module_valueContent__qjT6c","itemIcon":"select-module_itemIcon__IBsS4","placeholder":"select-module_placeholder__PSr94","comboboxContent":"select-module_comboboxContent__NRAbk","viewport":"select-module_viewport__6eCxI","comboboxInput":"select-module_comboboxInput__Ox9-U","hidden":"select-module_hidden__NMsTy","trigger___outline":"select-module_trigger-outline__llM-Z","trigger___text":"select-module_trigger-text__agtgX","trigger___small":"select-module_trigger-small__GWDnR","trigger___medium":"select-module_trigger-medium__4Uyjl"};
 
 export { styles as default };
 //# sourceMappingURL=select.module.css.js.map

package/dist/components/separator/separator.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var separator$1 = require('@base-ui/react/separator');
 var classVarianceAuthority = require('class-variance-authority');
-var radixUi = require('radix-ui');
 var separator_module = require('./separator.module.css.cjs');
 
 const separator = classVarianceAuthority.cva(separator_module.default.separator, {
@@ -23,8 +23,8 @@ const separator = classVarianceAuthority.cva(separator_module.default.separator,
         color: 'primary'
     }
 });
-function Separator({ className, orientation = 'horizontal', size, color, 'aria-label': ariaLabel, ...props }) {
-    return (jsxRuntime.jsx(radixUi.Separator.Root, { decorative: true, orientation: orientation, className: separator({ size, color, className }), "aria-orientation": orientation, "aria-label": ariaLabel || `${orientation} separator`, role: 'separator', ...props }));
+function Separator({ className, orientation = 'horizontal', size, color, ...props }) {
+    return (jsxRuntime.jsx(separator$1.Separator, { orientation: orientation, className: separator({ size, color, className }), ...props }));
 }
 Separator.displayName = 'Separator';
 

package/dist/components/separator/separator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"separator.cjs","sources":["../../../components/separator/separator.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { Separator as SeparatorPrimitive } from 'radix-ui';\n\nimport styles from './separator.module.css';\n\nconst separator = cva(styles.separator, {\n  variants: {\n    size: {\n      small: styles['separator-small'],\n      half: styles['separator-half'],\n      full: styles['separator-full']\n    },\n    color: {\n      primary: styles['separator-primary'],\n      secondary: styles['separator-secondary'],\n      tertiary: styles['separator-tertiary']\n    }\n  },\n  defaultVariants: {\n    size: 'full',\n    color: 'primary'\n  }\n});\n\ninterface SeparatorProps {\n  className?: string;\n  orientation?: 'horizontal' | 'vertical';\n  size?: 'small' | 'half' | 'full';\n  color?: 'primary' | 'secondary' | 'tertiary';\n  'aria-label'?: string;\n}\n\nexport function Separator({\n  className,\n  orientation = 'horizontal',\n  size,\n  color,\n  'aria-label': ariaLabel,\n  ...props\n}: SeparatorProps) {\n  return (\n    <SeparatorPrimitive.Root\n      decorative\n      orientation={orientation}\n      className={separator({ size, color, className })}\n      aria-orientation={orientation}\n      aria-label={ariaLabel || `${orientation} separator`}\n      role='separator'\n      {...props}\n    />\n  );\n}\n\nSeparator.displayName = 'Separator';\n"],"names":["cva","styles","_jsx","SeparatorPrimitive"],"mappings":";;;;;;;AAKA,MAAM,SAAS,GAAGA,0BAAG,CAACC,wBAAM,CAAC,SAAS,EAAE;AACtC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAEA,wBAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,IAAI,EAAEA,wBAAM,CAAC,gBAAgB,CAAC;AAC9B,YAAA,IAAI,EAAEA,wBAAM,CAAC,gBAAgB,CAAC;AAC/B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAEA,wBAAM,CAAC,mBAAmB,CAAC;AACpC,YAAA,SAAS,EAAEA,wBAAM,CAAC,qBAAqB,CAAC;AACxC,YAAA,QAAQ,EAAEA,wBAAM,CAAC,oBAAoB,CAAC;AACvC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;AACF,CAAA,CAAC,CAAC;AAUG,SAAU,SAAS,CAAC,EACxB,SAAS,EACT,WAAW,GAAG,YAAY,EAC1B,IAAI,EACJ,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACO,EAAA;AACf,IAAA,QACEC,cAAC,CAAAC,iBAAkB,CAAC,IAAI,EAAA,EACtB,UAAU,EACV,IAAA,EAAA,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAA,kBAAA,EAC9B,WAAW,EACjB,YAAA,EAAA,SAAS,IAAI,CAAG,EAAA,WAAW,CAAY,UAAA,CAAA,EACnD,IAAI,EAAC,WAAW,KACZ,KAAK,EAAA,CACT,EACF;AACJ,CAAC;AAED,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}
+{"version":3,"file":"separator.cjs","sources":["../../../components/separator/separator.tsx"],"sourcesContent":["import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';\nimport { cva } from 'class-variance-authority';\n\nimport styles from './separator.module.css';\n\nconst separator = cva(styles.separator, {\n  variants: {\n    size: {\n      small: styles['separator-small'],\n      half: styles['separator-half'],\n      full: styles['separator-full']\n    },\n    color: {\n      primary: styles['separator-primary'],\n      secondary: styles['separator-secondary'],\n      tertiary: styles['separator-tertiary']\n    }\n  },\n  defaultVariants: {\n    size: 'full',\n    color: 'primary'\n  }\n});\n\ninterface SeparatorProps extends SeparatorPrimitive.Props {\n  size?: 'small' | 'half' | 'full';\n  color?: 'primary' | 'secondary' | 'tertiary';\n}\n\nexport function Separator({\n  className,\n  orientation = 'horizontal',\n  size,\n  color,\n  ...props\n}: SeparatorProps) {\n  return (\n    <SeparatorPrimitive\n      orientation={orientation}\n      className={separator({ size, color, className })}\n      {...props}\n    />\n  );\n}\n\nSeparator.displayName = 'Separator';\n"],"names":["cva","styles","_jsx","SeparatorPrimitive"],"mappings":";;;;;;;AAKA,MAAM,SAAS,GAAGA,0BAAG,CAACC,wBAAM,CAAC,SAAS,EAAE;AACtC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAEA,wBAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,IAAI,EAAEA,wBAAM,CAAC,gBAAgB,CAAC;AAC9B,YAAA,IAAI,EAAEA,wBAAM,CAAC,gBAAgB,CAAC;AAC/B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAEA,wBAAM,CAAC,mBAAmB,CAAC;AACpC,YAAA,SAAS,EAAEA,wBAAM,CAAC,qBAAqB,CAAC;AACxC,YAAA,QAAQ,EAAEA,wBAAM,CAAC,oBAAoB,CAAC;AACvC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;AACF,CAAA,CAAC,CAAC;SAOa,SAAS,CAAC,EACxB,SAAS,EACT,WAAW,GAAG,YAAY,EAC1B,IAAI,EACJ,KAAK,EACL,GAAG,KAAK,EACO,EAAA;IACf,QACEC,cAAC,CAAAC,qBAAkB,EACjB,EAAA,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAC5C,GAAA,KAAK,EACT,CAAA,EACF;AACJ,CAAC;AAED,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}

package/dist/components/separator/separator.d.ts

@@ -1,11 +1,9 @@
-interface SeparatorProps {
-    className?: string;
-    orientation?: 'horizontal' | 'vertical';
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+interface SeparatorProps extends SeparatorPrimitive.Props {
     size?: 'small' | 'half' | 'full';
     color?: 'primary' | 'secondary' | 'tertiary';
-    'aria-label'?: string;
 }
-export declare function Separator({ className, orientation, size, color, 'aria-label': ariaLabel, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
+export declare function Separator({ className, orientation, size, color, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Separator {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../components/separator/separator.tsx"],"names":[],"mappings":"AAwBA,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACjC,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,WAA0B,EAC1B,IAAI,EACJ,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,cAAc,2CAYhB;yBAnBe,SAAS"}
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../components/separator/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAwB3E,UAAU,cAAe,SAAQ,kBAAkB,CAAC,KAAK;IACvD,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACjC,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CAC9C;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,WAA0B,EAC1B,IAAI,EACJ,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,2CAQhB;yBAde,SAAS"}

package/dist/components/separator/separator.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { cva } from 'class-variance-authority';
-import { Separator as Separator$1 } from 'radix-ui';
 import styles from './separator.module.css.js';
 
 const separator = cva(styles.separator, {
@@ -21,8 +21,8 @@ const separator = cva(styles.separator, {
         color: 'primary'
     }
 });
-function Separator({ className, orientation = 'horizontal', size, color, 'aria-label': ariaLabel, ...props }) {
-    return (jsx(Separator$1.Root, { decorative: true, orientation: orientation, className: separator({ size, color, className }), "aria-orientation": orientation, "aria-label": ariaLabel || `${orientation} separator`, role: 'separator', ...props }));
+function Separator({ className, orientation = 'horizontal', size, color, ...props }) {
+    return (jsx(Separator$1, { orientation: orientation, className: separator({ size, color, className }), ...props }));
 }
 Separator.displayName = 'Separator';
 

package/dist/components/separator/separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","sources":["../../../components/separator/separator.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { Separator as SeparatorPrimitive } from 'radix-ui';\n\nimport styles from './separator.module.css';\n\nconst separator = cva(styles.separator, {\n  variants: {\n    size: {\n      small: styles['separator-small'],\n      half: styles['separator-half'],\n      full: styles['separator-full']\n    },\n    color: {\n      primary: styles['separator-primary'],\n      secondary: styles['separator-secondary'],\n      tertiary: styles['separator-tertiary']\n    }\n  },\n  defaultVariants: {\n    size: 'full',\n    color: 'primary'\n  }\n});\n\ninterface SeparatorProps {\n  className?: string;\n  orientation?: 'horizontal' | 'vertical';\n  size?: 'small' | 'half' | 'full';\n  color?: 'primary' | 'secondary' | 'tertiary';\n  'aria-label'?: string;\n}\n\nexport function Separator({\n  className,\n  orientation = 'horizontal',\n  size,\n  color,\n  'aria-label': ariaLabel,\n  ...props\n}: SeparatorProps) {\n  return (\n    <SeparatorPrimitive.Root\n      decorative\n      orientation={orientation}\n      className={separator({ size, color, className })}\n      aria-orientation={orientation}\n      aria-label={ariaLabel || `${orientation} separator`}\n      role='separator'\n      {...props}\n    />\n  );\n}\n\nSeparator.displayName = 'Separator';\n"],"names":["_jsx","SeparatorPrimitive"],"mappings":";;;;;AAKA,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE;AACtC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,IAAI,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC9B,YAAA,IAAI,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC/B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,MAAM,CAAC,mBAAmB,CAAC;AACpC,YAAA,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC;AACxC,YAAA,QAAQ,EAAE,MAAM,CAAC,oBAAoB,CAAC;AACvC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;AACF,CAAA,CAAC,CAAC;AAUG,SAAU,SAAS,CAAC,EACxB,SAAS,EACT,WAAW,GAAG,YAAY,EAC1B,IAAI,EACJ,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACO,EAAA;AACf,IAAA,QACEA,GAAC,CAAAC,WAAkB,CAAC,IAAI,EAAA,EACtB,UAAU,EACV,IAAA,EAAA,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAA,kBAAA,EAC9B,WAAW,EACjB,YAAA,EAAA,SAAS,IAAI,CAAG,EAAA,WAAW,CAAY,UAAA,CAAA,EACnD,IAAI,EAAC,WAAW,KACZ,KAAK,EAAA,CACT,EACF;AACJ,CAAC;AAED,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}
+{"version":3,"file":"separator.js","sources":["../../../components/separator/separator.tsx"],"sourcesContent":["import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';\nimport { cva } from 'class-variance-authority';\n\nimport styles from './separator.module.css';\n\nconst separator = cva(styles.separator, {\n  variants: {\n    size: {\n      small: styles['separator-small'],\n      half: styles['separator-half'],\n      full: styles['separator-full']\n    },\n    color: {\n      primary: styles['separator-primary'],\n      secondary: styles['separator-secondary'],\n      tertiary: styles['separator-tertiary']\n    }\n  },\n  defaultVariants: {\n    size: 'full',\n    color: 'primary'\n  }\n});\n\ninterface SeparatorProps extends SeparatorPrimitive.Props {\n  size?: 'small' | 'half' | 'full';\n  color?: 'primary' | 'secondary' | 'tertiary';\n}\n\nexport function Separator({\n  className,\n  orientation = 'horizontal',\n  size,\n  color,\n  ...props\n}: SeparatorProps) {\n  return (\n    <SeparatorPrimitive\n      orientation={orientation}\n      className={separator({ size, color, className })}\n      {...props}\n    />\n  );\n}\n\nSeparator.displayName = 'Separator';\n"],"names":["_jsx","SeparatorPrimitive"],"mappings":";;;;;AAKA,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE;AACtC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,IAAI,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC9B,YAAA,IAAI,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC/B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,MAAM,CAAC,mBAAmB,CAAC;AACpC,YAAA,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC;AACxC,YAAA,QAAQ,EAAE,MAAM,CAAC,oBAAoB,CAAC;AACvC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;AACF,CAAA,CAAC,CAAC;SAOa,SAAS,CAAC,EACxB,SAAS,EACT,WAAW,GAAG,YAAY,EAC1B,IAAI,EACJ,KAAK,EACL,GAAG,KAAK,EACO,EAAA;IACf,QACEA,GAAC,CAAAC,WAAkB,EACjB,EAAA,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAC5C,GAAA,KAAK,EACT,CAAA,EACF;AACJ,CAAC;AAED,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}

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

@@ -18,15 +18,18 @@ const sidePanelRoot = classVarianceAuthority.cva(sidePanel_module.default['side-
         side: 'right'
     }
 });
-const SidePanelRoot = ({ children, side = 'right', className }) => {
-    return (jsxRuntime.jsx("aside", { className: sidePanelRoot({ side, className }), children: children }));
+const SidePanelRoot = ({ side = 'right', className, ...props }) => {
+    return jsxRuntime.jsx("aside", { className: sidePanelRoot({ side, className }), ...props });
 };
-const SidePanelHeader = ({ title, icon, actions = [], description }) => {
-    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] }));
+SidePanelRoot.displayName = 'SidePanel';
+const SidePanelHeader = ({ title, icon, actions = [], description, ...props }) => {
+    return (jsxRuntime.jsxs("div", { className: sidePanel_module.default['side-panel-header'], ...props, 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.jsx("div", { className: sidePanel_module.default['side-panel-section'], children: children });
+SidePanelHeader.displayName = 'SidePanel.Header';
+const SidePanelSection = ({ className, ...props }) => {
+    return (jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(sidePanel_module.default['side-panel-section'], className), ...props }));
 };
+SidePanelSection.displayName = 'SidePanel.Section';
 const SidePanel = Object.assign(SidePanelRoot, {
     Header: SidePanelHeader,
     Section: SidePanelSection

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 { cva, VariantProps } from 'class-variance-authority';\nimport { Fragment, ReactNode } from 'react';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './side-panel.module.css';\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: 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?: ReactNode;\n  actions?: Array<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            <Fragment key={index}>{action}</Fragment>\n          ))}\n        </Flex>\n      </Flex>\n      {description ? <Text size={2}>{description}</Text> : null}\n    </div>\n  );\n};\n\ninterface SidePanelSectionProps {\n  children: 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","Fragment"],"mappings":";;;;;;;;;AAMA,MAAM,aAAa,GAAGA,0BAAG,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,EACM,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,EACU,KAAI;IACzB,QACEC,yBAAK,SAAS,EAAEF,wBAAM,CAAC,mBAAmB,CAAC,EACzC,QAAA,EAAA,CAAAE,eAAA,CAACC,SAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EAAE,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,aAC5CD,eAAC,CAAAC,SAAI,IAAC,GAAG,EAAE,CAAC,EACT,QAAA,EAAA,CAAA,IAAI,EACLF,cAAA,CAACG,SAAI,EAAA,EAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EACvB,QAAA,EAAA,KAAK,EACD,CAAA,CAAA,EAAA,CACF,EACPH,cAAA,CAACE,SAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EAAA,QAAA,EACT,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC1BF,eAACI,cAAQ,EAAA,EAAA,QAAA,EAAc,MAAM,EAAA,EAAd,KAAK,CAAqB,CAC1C,CAAC,EAAA,CACG,IACF,EACN,WAAW,GAAGJ,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;;;;"}
+{"version":3,"file":"side-panel.cjs","sources":["../../../components/side-panel/side-panel.tsx"],"sourcesContent":["import { cva, cx, VariantProps } from 'class-variance-authority';\nimport { ComponentProps, Fragment, ReactNode } from 'react';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './side-panel.module.css';\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\n  extends ComponentProps<'aside'>,\n    VariantProps<typeof sidePanelRoot> {}\n\nconst SidePanelRoot = ({\n  side = 'right',\n  className,\n  ...props\n}: SidePanelProps) => {\n  return <aside className={sidePanelRoot({ side, className })} {...props} />;\n};\n\nSidePanelRoot.displayName = 'SidePanel';\n\ninterface SidePanelHeaderProps extends ComponentProps<'div'> {\n  title: string;\n  icon?: ReactNode;\n  actions?: Array<ReactNode>;\n  description?: string;\n}\n\nconst SidePanelHeader = ({\n  title,\n  icon,\n  actions = [],\n  description,\n  ...props\n}: SidePanelHeaderProps) => {\n  return (\n    <div className={styles['side-panel-header']} {...props}>\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            <Fragment key={index}>{action}</Fragment>\n          ))}\n        </Flex>\n      </Flex>\n      {description ? <Text size={2}>{description}</Text> : null}\n    </div>\n  );\n};\n\nSidePanelHeader.displayName = 'SidePanel.Header';\n\ninterface SidePanelSectionProps extends ComponentProps<'div'> {}\n\nconst SidePanelSection = ({ className, ...props }: SidePanelSectionProps) => {\n  return (\n    <div className={cx(styles['side-panel-section'], className)} {...props} />\n  );\n};\n\nSidePanelSection.displayName = 'SidePanel.Section';\n\nexport const SidePanel = Object.assign(SidePanelRoot, {\n  Header: SidePanelHeader,\n  Section: SidePanelSection\n});\n"],"names":["cva","styles","_jsx","_jsxs","Flex","Text","Fragment","cx"],"mappings":";;;;;;;;;AAMA,MAAM,aAAa,GAAGA,0BAAG,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;AAMH,MAAM,aAAa,GAAG,CAAC,EACrB,IAAI,GAAG,OAAO,EACd,SAAS,EACT,GAAG,KAAK,EACO,KAAI;AACnB,IAAA,OAAOC,cAAO,CAAA,OAAA,EAAA,EAAA,SAAS,EAAE,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAM,GAAA,KAAK,GAAI,CAAC;AAC7E,CAAC,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,WAAW,CAAC;AASxC,MAAM,eAAe,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,OAAO,GAAG,EAAE,EACZ,WAAW,EACX,GAAG,KAAK,EACa,KAAI;IACzB,QACEC,yBAAK,SAAS,EAAEF,wBAAM,CAAC,mBAAmB,CAAC,EAAA,GAAM,KAAK,EAAA,QAAA,EAAA,CACpDE,gBAACC,SAAI,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAC5C,QAAA,EAAA,CAAAD,eAAA,CAACC,SAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CACT,IAAI,EACLF,cAAC,CAAAG,SAAI,IAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAA,QAAA,EACvB,KAAK,EAAA,CACD,CACF,EAAA,CAAA,EACPH,eAACE,SAAI,EAAA,EAAC,GAAG,EAAE,CAAC,YACT,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC1BF,eAACI,cAAQ,EAAA,EAAA,QAAA,EAAc,MAAM,EAAA,EAAd,KAAK,CAAqB,CAC1C,CAAC,EAAA,CACG,IACF,EACN,WAAW,GAAGJ,cAAC,CAAAG,SAAI,EAAC,EAAA,IAAI,EAAE,CAAC,EAAA,QAAA,EAAG,WAAW,EAAQ,CAAA,GAAG,IAAI,CACrD,EAAA,CAAA,EACN;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAIjD,MAAM,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAyB,KAAI;AAC1E,IAAA,QACEH,cAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEK,yBAAE,CAACN,wBAAM,CAAC,oBAAoB,CAAC,EAAE,SAAS,CAAC,KAAM,KAAK,EAAA,CAAI,EAC1E;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,mBAAmB,CAAC;MAEtC,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.d.ts

@@ -1,24 +1,30 @@
 import { VariantProps } from 'class-variance-authority';
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 declare const sidePanelRoot: (props?: ({
     side?: "left" | "right" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-interface SidePanelProps extends VariantProps<typeof sidePanelRoot> {
-    children: ReactNode;
-    className?: string;
+interface SidePanelProps extends ComponentProps<'aside'>, VariantProps<typeof sidePanelRoot> {
 }
-interface SidePanelHeaderProps {
+interface SidePanelHeaderProps extends ComponentProps<'div'> {
     title: string;
     icon?: ReactNode;
     actions?: Array<ReactNode>;
     description?: string;
 }
-interface SidePanelSectionProps {
-    children: ReactNode;
+interface SidePanelSectionProps extends ComponentProps<'div'> {
 }
-export declare const SidePanel: (({ children, side, className }: SidePanelProps) => import("react/jsx-runtime").JSX.Element) & {
-    Header: ({ title, icon, actions, description }: SidePanelHeaderProps) => import("react/jsx-runtime").JSX.Element;
-    Section: ({ children }: SidePanelSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidePanel: {
+    ({ side, className, ...props }: SidePanelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Header: {
+        ({ title, icon, actions, description, ...props }: SidePanelHeaderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Section: {
+        ({ className, ...props }: SidePanelSectionProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
 };
 export {};
 //# sourceMappingURL=side-panel.d.ts.map

package/dist/components/side-panel/side-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-panel.d.ts","sourceRoot":"","sources":["../../../components/side-panel/side-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAK5C,QAAA,MAAM,aAAa;;8EAUjB,CAAC;AAEH,UAAU,cAAe,SAAQ,YAAY,CAAC,OAAO,aAAa,CAAC;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA4BD,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAMD,eAAO,MAAM,SAAS,mCA/CnB,cAAc;oDAkBd,oBAAoB;4BAyBiB,qBAAqB;CAO3D,CAAC"}
+{"version":3,"file":"side-panel.d.ts","sourceRoot":"","sources":["../../../components/side-panel/side-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAK5D,QAAA,MAAM,aAAa;;8EAUjB,CAAC;AAEH,UAAU,cACR,SAAQ,cAAc,CAAC,OAAO,CAAC,EAC7B,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAYzC,UAAU,oBAAqB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA+BD,UAAU,qBAAsB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAUhE,eAAO,MAAM,SAAS;oCApDnB,cAAc;;;;0DAmBd,oBAAoB;;;;kCAyB4B,qBAAqB;;;CAWtE,CAAC"}

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { cva } from 'class-variance-authority';
+import { cva, cx } from 'class-variance-authority';
 import { Fragment } from 'react';
 import { Flex } from '../flex/flex.js';
 import { Text } from '../text/text.js';
@@ -16,15 +16,18 @@ const sidePanelRoot = cva(styles['side-panel'], {
         side: 'right'
     }
 });
-const SidePanelRoot = ({ children, side = 'right', className }) => {
-    return (jsx("aside", { className: sidePanelRoot({ side, className }), children: children }));
+const SidePanelRoot = ({ side = 'right', className, ...props }) => {
+    return jsx("aside", { className: sidePanelRoot({ side, className }), ...props });
 };
-const SidePanelHeader = ({ title, icon, actions = [], description }) => {
-    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(Fragment, { children: action }, index))) })] }), description ? jsx(Text, { size: 2, children: description }) : null] }));
+SidePanelRoot.displayName = 'SidePanel';
+const SidePanelHeader = ({ title, icon, actions = [], description, ...props }) => {
+    return (jsxs("div", { className: styles['side-panel-header'], ...props, 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(Fragment, { children: action }, index))) })] }), description ? jsx(Text, { size: 2, children: description }) : null] }));
 };
-const SidePanelSection = ({ children }) => {
-    return jsx("div", { className: styles['side-panel-section'], children: children });
+SidePanelHeader.displayName = 'SidePanel.Header';
+const SidePanelSection = ({ className, ...props }) => {
+    return (jsx("div", { className: cx(styles['side-panel-section'], className), ...props }));
 };
+SidePanelSection.displayName = 'SidePanel.Section';
 const SidePanel = Object.assign(SidePanelRoot, {
     Header: SidePanelHeader,
     Section: SidePanelSection

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 { cva, VariantProps } from 'class-variance-authority';\nimport { Fragment, ReactNode } from 'react';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './side-panel.module.css';\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: 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?: ReactNode;\n  actions?: Array<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            <Fragment key={index}>{action}</Fragment>\n          ))}\n        </Flex>\n      </Flex>\n      {description ? <Text size={2}>{description}</Text> : null}\n    </div>\n  );\n};\n\ninterface SidePanelSectionProps {\n  children: 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"],"mappings":";;;;;;;AAMA,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,EACM,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,EACU,KAAI;IACzB,QACEC,cAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,EACzC,QAAA,EAAA,CAAAA,IAAA,CAAC,IAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EAAE,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,aAC5CA,IAAC,CAAA,IAAI,IAAC,GAAG,EAAE,CAAC,EACT,QAAA,EAAA,CAAA,IAAI,EACLD,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EACvB,QAAA,EAAA,KAAK,EACD,CAAA,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EAAA,QAAA,EACT,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC1BA,IAAC,QAAQ,EAAA,EAAA,QAAA,EAAc,MAAM,EAAA,EAAd,KAAK,CAAqB,CAC1C,CAAC,EAAA,CACG,IACF,EACN,WAAW,GAAGA,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;;;;"}
+{"version":3,"file":"side-panel.js","sources":["../../../components/side-panel/side-panel.tsx"],"sourcesContent":["import { cva, cx, VariantProps } from 'class-variance-authority';\nimport { ComponentProps, Fragment, ReactNode } from 'react';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './side-panel.module.css';\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\n  extends ComponentProps<'aside'>,\n    VariantProps<typeof sidePanelRoot> {}\n\nconst SidePanelRoot = ({\n  side = 'right',\n  className,\n  ...props\n}: SidePanelProps) => {\n  return <aside className={sidePanelRoot({ side, className })} {...props} />;\n};\n\nSidePanelRoot.displayName = 'SidePanel';\n\ninterface SidePanelHeaderProps extends ComponentProps<'div'> {\n  title: string;\n  icon?: ReactNode;\n  actions?: Array<ReactNode>;\n  description?: string;\n}\n\nconst SidePanelHeader = ({\n  title,\n  icon,\n  actions = [],\n  description,\n  ...props\n}: SidePanelHeaderProps) => {\n  return (\n    <div className={styles['side-panel-header']} {...props}>\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            <Fragment key={index}>{action}</Fragment>\n          ))}\n        </Flex>\n      </Flex>\n      {description ? <Text size={2}>{description}</Text> : null}\n    </div>\n  );\n};\n\nSidePanelHeader.displayName = 'SidePanel.Header';\n\ninterface SidePanelSectionProps extends ComponentProps<'div'> {}\n\nconst SidePanelSection = ({ className, ...props }: SidePanelSectionProps) => {\n  return (\n    <div className={cx(styles['side-panel-section'], className)} {...props} />\n  );\n};\n\nSidePanelSection.displayName = 'SidePanel.Section';\n\nexport const SidePanel = Object.assign(SidePanelRoot, {\n  Header: SidePanelHeader,\n  Section: SidePanelSection\n});\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;AAMA,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;AAMH,MAAM,aAAa,GAAG,CAAC,EACrB,IAAI,GAAG,OAAO,EACd,SAAS,EACT,GAAG,KAAK,EACO,KAAI;AACnB,IAAA,OAAOA,GAAO,CAAA,OAAA,EAAA,EAAA,SAAS,EAAE,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAM,GAAA,KAAK,GAAI,CAAC;AAC7E,CAAC,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,WAAW,CAAC;AASxC,MAAM,eAAe,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,OAAO,GAAG,EAAE,EACZ,WAAW,EACX,GAAG,KAAK,EACa,KAAI;IACzB,QACEC,cAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,EAAA,GAAM,KAAK,EAAA,QAAA,EAAA,CACpDA,KAAC,IAAI,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAC5C,QAAA,EAAA,CAAAA,IAAA,CAAC,IAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CACT,IAAI,EACLD,GAAC,CAAA,IAAI,IAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAA,QAAA,EACvB,KAAK,EAAA,CACD,CACF,EAAA,CAAA,EACPA,IAAC,IAAI,EAAA,EAAC,GAAG,EAAE,CAAC,YACT,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC1BA,IAAC,QAAQ,EAAA,EAAA,QAAA,EAAc,MAAM,EAAA,EAAd,KAAK,CAAqB,CAC1C,CAAC,EAAA,CACG,IACF,EACN,WAAW,GAAGA,GAAC,CAAA,IAAI,EAAC,EAAA,IAAI,EAAE,CAAC,EAAA,QAAA,EAAG,WAAW,EAAQ,CAAA,GAAG,IAAI,CACrD,EAAA,CAAA,EACN;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAIjD,MAAM,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAyB,KAAI;AAC1E,IAAA,QACEA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,SAAS,CAAC,KAAM,KAAK,EAAA,CAAI,EAC1E;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,mBAAmB,CAAC;MAEtC,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-item.cjs

@@ -10,7 +10,7 @@ var tooltip = require('../tooltip/tooltip.cjs');
 var sidebar_module = require('./sidebar.module.css.cjs');
 var sidebarRoot = require('./sidebar-root.cjs');
 
-const SidebarItem = React.forwardRef(({ classNames, leadingIcon, children, active, disabled, as = jsxRuntime.jsx("a", {}), ...props }, ref) => {
+function SidebarItem({ classNames, leadingIcon, children, active, disabled, as = jsxRuntime.jsx("a", {}), ...props }) {
     const { isCollapsed, hideCollapsedItemTooltip } = React.useContext(sidebarRoot.SidebarContext);
     const shouldShowFallback = leadingIcon == undefined &&
         isCollapsed &&
@@ -20,23 +20,25 @@ const SidebarItem = React.forwardRef(({ classNames, leadingIcon, children, activ
         align: 'center',
         gap: 3,
         className: classVarianceAuthority.cx(sidebar_module.default['nav-leading-icon'], classNames?.leadingIcon),
-        ariaHidden: true
+        'aria-hidden': true
     };
     const content = React.cloneElement(as, {
-        ref,
         className: classVarianceAuthority.cx(sidebar_module.default['nav-item'], classNames?.root),
         'data-active': active,
         'data-disabled': disabled,
-        role: 'menuitem',
+        role: 'listitem',
         'aria-current': active ? 'page' : undefined,
         'aria-disabled': disabled,
+        ...(isCollapsed && typeof children === 'string'
+            ? { 'aria-label': children }
+            : {}),
         ...props
-    }, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [shouldShowFallback ? (jsxRuntime.jsx(flex.Flex, { ...iconProps, children: jsxRuntime.jsx(avatar.Avatar, { size: 1, variant: 'soft', color: 'neutral', fallback: children[0].toUpperCase(), style: { cursor: 'pointer' } }) })) : null, !shouldShowFallback && leadingIcon ? (jsxRuntime.jsx(flex.Flex, { ...iconProps, children: leadingIcon })) : null, !isCollapsed && (jsxRuntime.jsx("span", { className: classVarianceAuthority.cx(sidebar_module.default['nav-text'], classNames?.text), children: children }))] }));
+    }, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [shouldShowFallback ? (jsxRuntime.jsx(flex.Flex, { ...iconProps, children: jsxRuntime.jsx(avatar.Avatar, { size: 1, variant: 'soft', color: 'neutral', fallback: children[0].toUpperCase(), className: sidebar_module.default['nav-fallback-avatar'] }) })) : null, !shouldShowFallback && leadingIcon ? (jsxRuntime.jsx(flex.Flex, { ...iconProps, children: leadingIcon })) : null, !isCollapsed && (jsxRuntime.jsx("span", { className: classVarianceAuthority.cx(sidebar_module.default['nav-text'], classNames?.text), children: children }))] }));
     if (isCollapsed && !hideCollapsedItemTooltip) {
-        return (jsxRuntime.jsx(tooltip.Tooltip, { message: children, side: 'right', children: content }));
+        return (jsxRuntime.jsxs(tooltip.Tooltip, { children: [jsxRuntime.jsx(tooltip.Tooltip.Trigger, { render: content }), jsxRuntime.jsx(tooltip.Tooltip.Content, { side: 'right', children: children })] }));
     }
     return content;
-});
+}
 SidebarItem.displayName = 'Sidebar.Item';
 
 exports.SidebarItem = SidebarItem;

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar-item.cjs","sources":["../../../components/sidebar/sidebar-item.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport {\n  ComponentPropsWithoutRef,\n  cloneElement,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  useContext\n} from 'react';\nimport { Avatar } from '../avatar';\nimport { Flex } from '../flex';\nimport { Tooltip } from '../tooltip';\nimport styles from './sidebar.module.css';\nimport { SidebarContext } from './sidebar-root';\n\nexport interface 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\nexport const 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 iconProps = {\n      align: 'center',\n      gap: 3,\n      className: cx(styles['nav-leading-icon'], classNames?.leadingIcon),\n      ariaHidden: true\n    } as const;\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        {shouldShowFallback ? (\n          <Flex {...iconProps}>\n            <Avatar\n              size={1}\n              variant='soft'\n              color='neutral'\n              fallback={children[0].toUpperCase()}\n              style={{ cursor: 'pointer' }}\n            />\n          </Flex>\n        ) : null}\n        {!shouldShowFallback && leadingIcon ? (\n          <Flex {...iconProps}>{leadingIcon}</Flex>\n        ) : null}\n        {!isCollapsed && (\n          <span className={cx(styles['nav-text'], classNames?.text)}>\n            {children}\n          </span>\n        )}\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\nSidebarItem.displayName = 'Sidebar.Item';\n"],"names":[],"mappings":";;;;;;;;;;;;AA6BO;;AAgBH;;;AAIE;AAEF;AACE;AACA;;AAEA;;AAGF;;;AAKI;AACA;AACA;;AAEA;AACA;;AAyBJ;AACE;;AAOF;AACF;AAGF;;"}
+{"version":3,"file":"sidebar-item.cjs","sources":["../../../components/sidebar/sidebar-item.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport {\n  ComponentProps,\n  cloneElement,\n  ReactElement,\n  ReactNode,\n  useContext\n} from 'react';\nimport { Avatar } from '../avatar';\nimport { Flex } from '../flex';\nimport { Tooltip } from '../tooltip';\nimport styles from './sidebar.module.css';\nimport { SidebarContext } from './sidebar-root';\n\nexport interface SidebarItemProps extends ComponentProps<'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\nexport function SidebarItem({\n  classNames,\n  leadingIcon,\n  children,\n  active,\n  disabled,\n  as = <a />,\n  ...props\n}: SidebarItemProps) {\n  const { isCollapsed, hideCollapsedItemTooltip } = useContext(SidebarContext);\n\n  const shouldShowFallback =\n    leadingIcon == undefined &&\n    isCollapsed &&\n    typeof children === 'string' &&\n    children.length > 0;\n\n  const iconProps = {\n    align: 'center',\n    gap: 3,\n    className: cx(styles['nav-leading-icon'], classNames?.leadingIcon),\n    'aria-hidden': true\n  } as const;\n\n  const content = cloneElement(\n    as,\n    {\n      className: cx(styles['nav-item'], classNames?.root),\n      'data-active': active,\n      'data-disabled': disabled,\n      role: 'listitem',\n      'aria-current': active ? 'page' : undefined,\n      'aria-disabled': disabled,\n      ...(isCollapsed && typeof children === 'string'\n        ? { 'aria-label': children }\n        : {}),\n      ...props\n    },\n    <>\n      {shouldShowFallback ? (\n        <Flex {...iconProps}>\n          <Avatar\n            size={1}\n            variant='soft'\n            color='neutral'\n            fallback={children[0].toUpperCase()}\n            className={styles['nav-fallback-avatar']}\n          />\n        </Flex>\n      ) : null}\n      {!shouldShowFallback && leadingIcon ? (\n        <Flex {...iconProps}>{leadingIcon}</Flex>\n      ) : null}\n      {!isCollapsed && (\n        <span className={cx(styles['nav-text'], classNames?.text)}>\n          {children}\n        </span>\n      )}\n    </>\n  );\n\n  if (isCollapsed && !hideCollapsedItemTooltip) {\n    return (\n      <Tooltip>\n        <Tooltip.Trigger render={content} />\n        <Tooltip.Content side='right'>{children}</Tooltip.Content>\n      </Tooltip>\n    );\n  }\n\n  return content;\n}\n\nSidebarItem.displayName = 'Sidebar.Item';\n"],"names":[],"mappings":";;;;;;;;;;;;AA4BM;;AAWJ;;;AAIE;AAEF;AACE;AACA;;AAEA;;AAGF;;AAII;AACA;AACA;;AAEA;AACA;AACE;;AAEF;;AAyBJ;;;AASA;AACF;AAEA;;"}

package/dist/components/sidebar/sidebar-item.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
-export interface SidebarItemProps extends ComponentPropsWithoutRef<'a'> {
+import { ComponentProps, ReactElement, ReactNode } from 'react';
+export interface SidebarItemProps extends ComponentProps<'a'> {
     leadingIcon?: ReactNode;
     active?: boolean;
     disabled?: boolean;
@@ -10,5 +10,8 @@ export interface SidebarItemProps extends ComponentPropsWithoutRef<'a'> {
         text?: string;
     };
 }
-export declare const SidebarItem: import("react").ForwardRefExoticComponent<SidebarItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare function SidebarItem({ classNames, leadingIcon, children, active, disabled, as, ...props }: SidebarItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SidebarItem {
+    var displayName: string;
+}
 //# sourceMappingURL=sidebar-item.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar-item.d.ts","sourceRoot":"","sources":["../../../components/sidebar/sidebar-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,wBAAwB,EAGxB,YAAY,EACZ,SAAS,EAEV,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,gBAAiB,SAAQ,wBAAwB,CAAC,GAAG,CAAC;IACrE,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,eAAO,MAAM,WAAW,gHA0EvB,CAAC"}
+{"version":3,"file":"sidebar-item.d.ts","sourceRoot":"","sources":["../../../components/sidebar/sidebar-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,cAAc,EAEd,YAAY,EACZ,SAAS,EAEV,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,GAAG,CAAC;IAC3D,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,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,WAAW,EACX,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,EAAU,EACV,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA+DlB;yBAvEe,WAAW"}

package/dist/components/sidebar/sidebar-item.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { cx } from 'class-variance-authority';
-import { forwardRef, useContext, cloneElement } from 'react';
+import { 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 { SidebarContext } from './sidebar-root.js';
 
-const SidebarItem = forwardRef(({ classNames, leadingIcon, children, active, disabled, as = jsx("a", {}), ...props }, ref) => {
+function SidebarItem({ classNames, leadingIcon, children, active, disabled, as = jsx("a", {}), ...props }) {
     const { isCollapsed, hideCollapsedItemTooltip } = useContext(SidebarContext);
     const shouldShowFallback = leadingIcon == undefined &&
         isCollapsed &&
@@ -18,23 +18,25 @@ const SidebarItem = forwardRef(({ classNames, leadingIcon, children, active, dis
         align: 'center',
         gap: 3,
         className: cx(styles['nav-leading-icon'], classNames?.leadingIcon),
-        ariaHidden: true
+        'aria-hidden': true
     };
     const content = cloneElement(as, {
-        ref,
         className: cx(styles['nav-item'], classNames?.root),
         'data-active': active,
         'data-disabled': disabled,
-        role: 'menuitem',
+        role: 'listitem',
         'aria-current': active ? 'page' : undefined,
         'aria-disabled': disabled,
+        ...(isCollapsed && typeof children === 'string'
+            ? { 'aria-label': children }
+            : {}),
         ...props
-    }, jsxs(Fragment, { children: [shouldShowFallback ? (jsx(Flex, { ...iconProps, children: jsx(Avatar, { size: 1, variant: 'soft', color: 'neutral', fallback: children[0].toUpperCase(), style: { cursor: 'pointer' } }) })) : null, !shouldShowFallback && leadingIcon ? (jsx(Flex, { ...iconProps, children: leadingIcon })) : null, !isCollapsed && (jsx("span", { className: cx(styles['nav-text'], classNames?.text), children: children }))] }));
+    }, jsxs(Fragment, { children: [shouldShowFallback ? (jsx(Flex, { ...iconProps, children: jsx(Avatar, { size: 1, variant: 'soft', color: 'neutral', fallback: children[0].toUpperCase(), className: styles['nav-fallback-avatar'] }) })) : null, !shouldShowFallback && leadingIcon ? (jsx(Flex, { ...iconProps, children: leadingIcon })) : null, !isCollapsed && (jsx("span", { className: cx(styles['nav-text'], classNames?.text), children: children }))] }));
     if (isCollapsed && !hideCollapsedItemTooltip) {
-        return (jsx(Tooltip, { message: children, side: 'right', children: content }));
+        return (jsxs(Tooltip, { children: [jsx(Tooltip.Trigger, { render: content }), jsx(Tooltip.Content, { side: 'right', children: children })] }));
     }
     return content;
-});
+}
 SidebarItem.displayName = 'Sidebar.Item';
 
 export { SidebarItem };

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar-item.js","sources":["../../../components/sidebar/sidebar-item.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport {\n  ComponentPropsWithoutRef,\n  cloneElement,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  useContext\n} from 'react';\nimport { Avatar } from '../avatar';\nimport { Flex } from '../flex';\nimport { Tooltip } from '../tooltip';\nimport styles from './sidebar.module.css';\nimport { SidebarContext } from './sidebar-root';\n\nexport interface 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\nexport const 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 iconProps = {\n      align: 'center',\n      gap: 3,\n      className: cx(styles['nav-leading-icon'], classNames?.leadingIcon),\n      ariaHidden: true\n    } as const;\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        {shouldShowFallback ? (\n          <Flex {...iconProps}>\n            <Avatar\n              size={1}\n              variant='soft'\n              color='neutral'\n              fallback={children[0].toUpperCase()}\n              style={{ cursor: 'pointer' }}\n            />\n          </Flex>\n        ) : null}\n        {!shouldShowFallback && leadingIcon ? (\n          <Flex {...iconProps}>{leadingIcon}</Flex>\n        ) : null}\n        {!isCollapsed && (\n          <span className={cx(styles['nav-text'], classNames?.text)}>\n            {children}\n          </span>\n        )}\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\nSidebarItem.displayName = 'Sidebar.Item';\n"],"names":[],"mappings":";;;;;;;;;;AA6BO;;AAgBH;;;AAIE;AAEF;AACE;AACA;;AAEA;;AAGF;;;AAKI;AACA;AACA;;AAEA;AACA;;AAyBJ;AACE;;AAOF;AACF;AAGF;;"}
+{"version":3,"file":"sidebar-item.js","sources":["../../../components/sidebar/sidebar-item.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport {\n  ComponentProps,\n  cloneElement,\n  ReactElement,\n  ReactNode,\n  useContext\n} from 'react';\nimport { Avatar } from '../avatar';\nimport { Flex } from '../flex';\nimport { Tooltip } from '../tooltip';\nimport styles from './sidebar.module.css';\nimport { SidebarContext } from './sidebar-root';\n\nexport interface SidebarItemProps extends ComponentProps<'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\nexport function SidebarItem({\n  classNames,\n  leadingIcon,\n  children,\n  active,\n  disabled,\n  as = <a />,\n  ...props\n}: SidebarItemProps) {\n  const { isCollapsed, hideCollapsedItemTooltip } = useContext(SidebarContext);\n\n  const shouldShowFallback =\n    leadingIcon == undefined &&\n    isCollapsed &&\n    typeof children === 'string' &&\n    children.length > 0;\n\n  const iconProps = {\n    align: 'center',\n    gap: 3,\n    className: cx(styles['nav-leading-icon'], classNames?.leadingIcon),\n    'aria-hidden': true\n  } as const;\n\n  const content = cloneElement(\n    as,\n    {\n      className: cx(styles['nav-item'], classNames?.root),\n      'data-active': active,\n      'data-disabled': disabled,\n      role: 'listitem',\n      'aria-current': active ? 'page' : undefined,\n      'aria-disabled': disabled,\n      ...(isCollapsed && typeof children === 'string'\n        ? { 'aria-label': children }\n        : {}),\n      ...props\n    },\n    <>\n      {shouldShowFallback ? (\n        <Flex {...iconProps}>\n          <Avatar\n            size={1}\n            variant='soft'\n            color='neutral'\n            fallback={children[0].toUpperCase()}\n            className={styles['nav-fallback-avatar']}\n          />\n        </Flex>\n      ) : null}\n      {!shouldShowFallback && leadingIcon ? (\n        <Flex {...iconProps}>{leadingIcon}</Flex>\n      ) : null}\n      {!isCollapsed && (\n        <span className={cx(styles['nav-text'], classNames?.text)}>\n          {children}\n        </span>\n      )}\n    </>\n  );\n\n  if (isCollapsed && !hideCollapsedItemTooltip) {\n    return (\n      <Tooltip>\n        <Tooltip.Trigger render={content} />\n        <Tooltip.Content side='right'>{children}</Tooltip.Content>\n      </Tooltip>\n    );\n  }\n\n  return content;\n}\n\nSidebarItem.displayName = 'Sidebar.Item';\n"],"names":[],"mappings":";;;;;;;;;;AA4BM;;AAWJ;;;AAIE;AAEF;AACE;AACA;;AAEA;;AAGF;;AAII;AACA;AACA;;AAEA;AACA;AACE;;AAEF;;AAyBJ;;;AASA;AACF;AAEA;;"}

package/dist/components/sidebar/sidebar-main.cjs

@@ -3,11 +3,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var flex = require('../flex/flex.cjs');
 var sidebar_module = require('./sidebar.module.css.cjs');
 
-const SidebarMain = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsx(flex.Flex, { ref: ref, className: classVarianceAuthority.cx(sidebar_module.default.main, className), direction: 'column', role: 'group', "aria-label": 'Main navigation', ...props, children: children })));
+function SidebarMain({ className, ...props }) {
+    return (jsxRuntime.jsx(flex.Flex, { className: classVarianceAuthority.cx(sidebar_module.default.main, className), direction: 'column', role: 'group', "aria-label": 'Main navigation', ...props }));
+}
 SidebarMain.displayName = 'Sidebar.Main';
 
 exports.SidebarMain = SidebarMain;

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar-main.cjs","sources":["../../../components/sidebar/sidebar-main.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentPropsWithoutRef, forwardRef } from 'react';\nimport { Flex } from '../flex';\nimport styles from './sidebar.module.css';\n\nexport const SidebarMain = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<'div'>\n>(({ className, children, ...props }, ref) => (\n  <Flex\n    ref={ref}\n    className={cx(styles.main, className)}\n    direction='column'\n    role='group'\n    aria-label='Main navigation'\n    {...props}\n  >\n    {children}\n  </Flex>\n));\n\nSidebarMain.displayName = 'Sidebar.Main';\n"],"names":[],"mappings":";;;;;;;;;AAOa;AAgBb;;"}
+{"version":3,"file":"sidebar-main.cjs","sources":["../../../components/sidebar/sidebar-main.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps } from 'react';\nimport { Flex } from '../flex';\nimport styles from './sidebar.module.css';\n\nexport function SidebarMain({\n  className,\n  ...props\n}: ComponentProps<typeof Flex>) {\n  return (\n    <Flex\n      className={cx(styles.main, className)}\n      direction='column'\n      role='group'\n      aria-label='Main navigation'\n      {...props}\n    />\n  );\n}\n\nSidebarMain.displayName = 'Sidebar.Main';\n"],"names":[],"mappings":";;;;;;;;AAOM;AAIJ;AASF;AAEA;;"}

package/dist/components/sidebar/sidebar-main.d.ts

@@ -1,2 +1,7 @@
-export declare const SidebarMain: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import { ComponentProps } from 'react';
+import { Flex } from '../flex';
+export declare function SidebarMain({ className, ...props }: ComponentProps<typeof Flex>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SidebarMain {
+    var displayName: string;
+}
 //# sourceMappingURL=sidebar-main.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar-main.d.ts","sourceRoot":"","sources":["../../../components/sidebar/sidebar-main.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,2MActB,CAAC"}
+{"version":3,"file":"sidebar-main.d.ts","sourceRoot":"","sources":["../../../components/sidebar/sidebar-main.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,2CAU7B;yBAbe,WAAW"}

package/dist/components/sidebar/sidebar-main.js

@@ -1,11 +1,12 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import { Flex } from '../flex/flex.js';
 import styles from './sidebar.module.css.js';
 
-const SidebarMain = forwardRef(({ className, children, ...props }, ref) => (jsx(Flex, { ref: ref, className: cx(styles.main, className), direction: 'column', role: 'group', "aria-label": 'Main navigation', ...props, children: children })));
+function SidebarMain({ className, ...props }) {
+    return (jsx(Flex, { className: cx(styles.main, className), direction: 'column', role: 'group', "aria-label": 'Main navigation', ...props }));
+}
 SidebarMain.displayName = 'Sidebar.Main';
 
 export { SidebarMain };

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar-main.js","sources":["../../../components/sidebar/sidebar-main.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentPropsWithoutRef, forwardRef } from 'react';\nimport { Flex } from '../flex';\nimport styles from './sidebar.module.css';\n\nexport const SidebarMain = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<'div'>\n>(({ className, children, ...props }, ref) => (\n  <Flex\n    ref={ref}\n    className={cx(styles.main, className)}\n    direction='column'\n    role='group'\n    aria-label='Main navigation'\n    {...props}\n  >\n    {children}\n  </Flex>\n));\n\nSidebarMain.displayName = 'Sidebar.Main';\n"],"names":[],"mappings":";;;;;;;AAOa;AAgBb;;"}
+{"version":3,"file":"sidebar-main.js","sources":["../../../components/sidebar/sidebar-main.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps } from 'react';\nimport { Flex } from '../flex';\nimport styles from './sidebar.module.css';\n\nexport function SidebarMain({\n  className,\n  ...props\n}: ComponentProps<typeof Flex>) {\n  return (\n    <Flex\n      className={cx(styles.main, className)}\n      direction='column'\n      role='group'\n      aria-label='Main navigation'\n      {...props}\n    />\n  );\n}\n\nSidebarMain.displayName = 'Sidebar.Main';\n"],"names":[],"mappings":";;;;;;AAOM;AAIJ;AASF;AAEA;;"}

package/dist/components/sidebar/sidebar-misc.cjs

@@ -3,15 +3,20 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var flex = require('../flex/flex.cjs');
 var sidebar_module = require('./sidebar.module.css.cjs');
 
-const SidebarHeader = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsx(flex.Flex, { align: 'center', ref: ref, className: classVarianceAuthority.cx(sidebar_module.default.header, className), role: 'banner', ...props, children: children })));
+function SidebarHeader({ className, ...props }) {
+    return (jsxRuntime.jsx(flex.Flex, { align: 'center', className: classVarianceAuthority.cx(sidebar_module.default.header, className), role: 'banner', ...props }));
+}
 SidebarHeader.displayName = 'Sidebar.Header';
-const SidebarFooter = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsx(flex.Flex, { ref: ref, className: classVarianceAuthority.cx(sidebar_module.default.footer, className), direction: 'column', role: 'group', "aria-label": 'Footer navigation', ...props, children: children })));
+function SidebarFooter({ className, ...props }) {
+    return (jsxRuntime.jsx(flex.Flex, { className: classVarianceAuthority.cx(sidebar_module.default.footer, className), direction: 'column', role: 'list', "aria-label": 'Footer navigation', ...props }));
+}
 SidebarFooter.displayName = 'Sidebar.Footer';
-const SidebarNavigationGroup = React.forwardRef(({ className, label, leadingIcon, classNames, children, ...props }, ref) => (jsxRuntime.jsxs("section", { ref: ref, className: classVarianceAuthority.cx(sidebar_module.default['nav-group'], className), "aria-label": label, ...props, children: [jsxRuntime.jsxs(flex.Flex, { align: 'center', gap: 3, className: classVarianceAuthority.cx(sidebar_module.default['nav-group-header'], classNames?.header), children: [leadingIcon && (jsxRuntime.jsx("span", { className: classVarianceAuthority.cx(sidebar_module.default['nav-leading-icon'], classNames?.icon), children: leadingIcon })), jsxRuntime.jsx("span", { className: classVarianceAuthority.cx(sidebar_module.default['nav-group-label'], classNames?.label), children: label })] }), jsxRuntime.jsx(flex.Flex, { direction: 'column', className: classVarianceAuthority.cx(sidebar_module.default['nav-group-items'], classNames?.items), role: 'list', children: children })] })));
+function SidebarNavigationGroup({ className, label, leadingIcon, classNames, children, ...props }) {
+    return (jsxRuntime.jsxs("section", { className: classVarianceAuthority.cx(sidebar_module.default['nav-group'], className), "aria-label": label, ...props, children: [jsxRuntime.jsxs(flex.Flex, { align: 'center', gap: 3, className: classVarianceAuthority.cx(sidebar_module.default['nav-group-header'], classNames?.header), children: [leadingIcon && (jsxRuntime.jsx("span", { className: classVarianceAuthority.cx(sidebar_module.default['nav-leading-icon'], classNames?.icon), children: leadingIcon })), jsxRuntime.jsx("span", { className: classVarianceAuthority.cx(sidebar_module.default['nav-group-label'], classNames?.label), children: label })] }), jsxRuntime.jsx(flex.Flex, { direction: 'column', className: classVarianceAuthority.cx(sidebar_module.default['nav-group-items'], classNames?.items), role: 'list', children: children })] }));
+}
 SidebarNavigationGroup.displayName = 'Sidebar.Group';
 
 exports.SidebarFooter = SidebarFooter;

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar-misc.cjs","sources":["../../../components/sidebar/sidebar-misc.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react';\nimport { Flex } from '../flex';\nimport styles from './sidebar.module.css';\n\nexport const SidebarHeader = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<'div'>\n>(({ className, children, ...props }, ref) => (\n  <Flex\n    align='center'\n    ref={ref}\n    className={cx(styles.header, className)}\n    role='banner'\n    {...props}\n  >\n    {children}\n  </Flex>\n));\nSidebarHeader.displayName = 'Sidebar.Header';\n\nexport const SidebarFooter = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<'div'>\n>(({ className, children, ...props }, ref) => (\n  <Flex\n    ref={ref}\n    className={cx(styles.footer, className)}\n    direction='column'\n    role='group'\n    aria-label='Footer navigation'\n    {...props}\n  >\n    {children}\n  </Flex>\n));\nSidebarFooter.displayName = 'Sidebar.Footer';\n\nexport interface SidebarNavigationGroupProps\n  extends ComponentPropsWithoutRef<'div'> {\n  label: string;\n  leadingIcon?: ReactNode;\n  classNames?: {\n    header?: string;\n    items?: string;\n    label?: string;\n    icon?: string;\n  };\n}\n\nexport const SidebarNavigationGroup = forwardRef<\n  HTMLElement,\n  SidebarNavigationGroupProps\n>(({ className, label, leadingIcon, classNames, children, ...props }, ref) => (\n  <section\n    ref={ref}\n    className={cx(styles['nav-group'], className)}\n    aria-label={label}\n    {...props}\n  >\n    <Flex\n      align='center'\n      gap={3}\n      className={cx(styles['nav-group-header'], classNames?.header)}\n    >\n      {leadingIcon && (\n        <span className={cx(styles['nav-leading-icon'], classNames?.icon)}>\n          {leadingIcon}\n        </span>\n      )}\n      <span className={cx(styles['nav-group-label'], classNames?.label)}>\n        {label}\n      </span>\n    </Flex>\n    <Flex\n      direction='column'\n      className={cx(styles['nav-group-items'], classNames?.items)}\n      role='list'\n    >\n      {children}\n    </Flex>\n  </section>\n));\n\nSidebarNavigationGroup.displayName = 'Sidebar.Group';\n"],"names":[],"mappings":";;;;;;;;;AAOa;AAcb;AAEa;AAeb;AAcO;AAkCP;;;;"}
+{"version":3,"file":"sidebar-misc.cjs","sources":["../../../components/sidebar/sidebar-misc.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps, ReactNode } from 'react';\nimport { Flex } from '../flex';\nimport styles from './sidebar.module.css';\n\nexport function SidebarHeader({\n  className,\n  ...props\n}: ComponentProps<typeof Flex>) {\n  return (\n    <Flex\n      align='center'\n      className={cx(styles.header, className)}\n      role='banner'\n      {...props}\n    />\n  );\n}\nSidebarHeader.displayName = 'Sidebar.Header';\n\nexport function SidebarFooter({\n  className,\n  ...props\n}: ComponentProps<typeof Flex>) {\n  return (\n    <Flex\n      className={cx(styles.footer, className)}\n      direction='column'\n      role='list'\n      aria-label='Footer navigation'\n      {...props}\n    />\n  );\n}\nSidebarFooter.displayName = 'Sidebar.Footer';\n\nexport interface SidebarNavigationGroupProps extends ComponentProps<'section'> {\n  label: string;\n  leadingIcon?: ReactNode;\n  classNames?: {\n    header?: string;\n    items?: string;\n    label?: string;\n    icon?: string;\n  };\n}\n\nexport function SidebarNavigationGroup({\n  className,\n  label,\n  leadingIcon,\n  classNames,\n  children,\n  ...props\n}: SidebarNavigationGroupProps) {\n  return (\n    <section\n      className={cx(styles['nav-group'], className)}\n      aria-label={label}\n      {...props}\n    >\n      <Flex\n        align='center'\n        gap={3}\n        className={cx(styles['nav-group-header'], classNames?.header)}\n      >\n        {leadingIcon && (\n          <span className={cx(styles['nav-leading-icon'], classNames?.icon)}>\n            {leadingIcon}\n          </span>\n        )}\n        <span className={cx(styles['nav-group-label'], classNames?.label)}>\n          {label}\n        </span>\n      </Flex>\n      <Flex\n        direction='column'\n        className={cx(styles['nav-group-items'], classNames?.items)}\n        role='list'\n      >\n        {children}\n      </Flex>\n    </section>\n  );\n}\n\nSidebarNavigationGroup.displayName = 'Sidebar.Group';\n"],"names":[],"mappings":";;;;;;;;AAOM;;AAYN;AACA;AAEM;AAIJ;AASF;AACA;;;AAkDA;AAEA;;;;"}