@raystack/apsara 1.0.0-rc.0 → 1.0.0-rc.1

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 &&
@@ -23,7 +23,6 @@ const SidebarItem = React.forwardRef(({ classNames, leadingIcon, children, activ
         '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,
@@ -39,7 +38,7 @@ const SidebarItem = React.forwardRef(({ classNames, leadingIcon, children, activ
         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      'aria-hidden': 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: '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);\n\nSidebarItem.displayName = 'Sidebar.Item';\n"],"names":[],"mappings":";;;;;;;;;;;;AA6BO;;AAgBH;;;AAIE;AAEF;AACE;AACA;;AAEA;;AAGF;;;AAKI;AACA;AACA;;AAEA;AACA;AACE;;AAEF;;AAyBJ;;;AASA;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,gHA8EvB,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 &&
@@ -21,7 +21,6 @@ const SidebarItem = forwardRef(({ classNames, leadingIcon, children, active, dis
         'aria-hidden': true
     };
     const content = cloneElement(as, {
-        ref,
         className: cx(styles['nav-item'], classNames?.root),
         'data-active': active,
         'data-disabled': disabled,
@@ -37,7 +36,7 @@ const SidebarItem = forwardRef(({ classNames, leadingIcon, children, active, dis
         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      'aria-hidden': 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: '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);\n\nSidebarItem.displayName = 'Sidebar.Item';\n"],"names":[],"mappings":";;;;;;;;;;AA6BO;;AAgBH;;;AAIE;AAEF;AACE;AACA;;AAEA;;AAGF;;;AAKI;AACA;AACA;;AAEA;AACA;AACE;;AAEF;;AAyBJ;;;AASA;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: 'list', "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='list'\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;;;;"}

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

@@ -1,7 +1,14 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-export declare const SidebarHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SidebarFooter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export interface SidebarNavigationGroupProps extends ComponentPropsWithoutRef<'div'> {
+import { ComponentProps, ReactNode } from 'react';
+import { Flex } from '../flex';
+export declare function SidebarHeader({ className, ...props }: ComponentProps<typeof Flex>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SidebarHeader {
+    var displayName: string;
+}
+export declare function SidebarFooter({ className, ...props }: ComponentProps<typeof Flex>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SidebarFooter {
+    var displayName: string;
+}
+export interface SidebarNavigationGroupProps extends ComponentProps<'section'> {
     label: string;
     leadingIcon?: ReactNode;
     classNames?: {
@@ -11,5 +18,8 @@ export interface SidebarNavigationGroupProps extends ComponentPropsWithoutRef<'d
         icon?: string;
     };
 }
-export declare const SidebarNavigationGroup: import("react").ForwardRefExoticComponent<SidebarNavigationGroupProps & import("react").RefAttributes<HTMLElement>>;
+export declare function SidebarNavigationGroup({ className, label, leadingIcon, classNames, children, ...props }: SidebarNavigationGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SidebarNavigationGroup {
+    var displayName: string;
+}
 //# sourceMappingURL=sidebar-misc.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar-misc.d.ts","sourceRoot":"","sources":["../../../components/sidebar/sidebar-misc.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAIxE,eAAO,MAAM,aAAa,2MAaxB,CAAC;AAGH,eAAO,MAAM,aAAa,2MAcxB,CAAC;AAGH,MAAM,WAAW,2BACf,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE;QACX,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,eAAO,MAAM,sBAAsB,qHAgCjC,CAAC"}
+{"version":3,"file":"sidebar-misc.d.ts","sourceRoot":"","sources":["../../../components/sidebar/sidebar-misc.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,2CAS7B;yBAZe,aAAa;;;AAe7B,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,2CAU7B;yBAbe,aAAa;;;AAgB7B,MAAM,WAAW,2BAA4B,SAAQ,cAAc,CAAC,SAAS,CAAC;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE;QACX,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,2CA8B7B;yBArCe,sBAAsB"}

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

@@ -1,15 +1,20 @@
 "use client";
 import { jsx, jsxs } 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 SidebarHeader = forwardRef(({ className, children, ...props }, ref) => (jsx(Flex, { align: 'center', ref: ref, className: cx(styles.header, className), role: 'banner', ...props, children: children })));
+function SidebarHeader({ className, ...props }) {
+    return (jsx(Flex, { align: 'center', className: cx(styles.header, className), role: 'banner', ...props }));
+}
 SidebarHeader.displayName = 'Sidebar.Header';
-const SidebarFooter = forwardRef(({ className, children, ...props }, ref) => (jsx(Flex, { ref: ref, className: cx(styles.footer, className), direction: 'column', role: 'list', "aria-label": 'Footer navigation', ...props, children: children })));
+function SidebarFooter({ className, ...props }) {
+    return (jsx(Flex, { className: cx(styles.footer, className), direction: 'column', role: 'list', "aria-label": 'Footer navigation', ...props }));
+}
 SidebarFooter.displayName = 'Sidebar.Footer';
-const SidebarNavigationGroup = forwardRef(({ className, label, leadingIcon, classNames, 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: cx(styles['nav-group-header'], classNames?.header), children: [leadingIcon && (jsx("span", { className: cx(styles['nav-leading-icon'], classNames?.icon), children: leadingIcon })), jsx("span", { className: cx(styles['nav-group-label'], classNames?.label), children: label })] }), jsx(Flex, { direction: 'column', className: cx(styles['nav-group-items'], classNames?.items), role: 'list', children: children })] })));
+function SidebarNavigationGroup({ className, label, leadingIcon, classNames, children, ...props }) {
+    return (jsxs("section", { className: cx(styles['nav-group'], className), "aria-label": label, ...props, children: [jsxs(Flex, { align: 'center', gap: 3, className: cx(styles['nav-group-header'], classNames?.header), children: [leadingIcon && (jsx("span", { className: cx(styles['nav-leading-icon'], classNames?.icon), children: leadingIcon })), jsx("span", { className: cx(styles['nav-group-label'], classNames?.label), children: label })] }), jsx(Flex, { direction: 'column', className: cx(styles['nav-group-items'], classNames?.items), role: 'list', children: children })] }));
+}
 SidebarNavigationGroup.displayName = 'Sidebar.Group';
 
 export { SidebarFooter, SidebarHeader, SidebarNavigationGroup };

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar-misc.js","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='list'\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.js","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;;"}

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

@@ -10,21 +10,21 @@ var sidebar_module = require('./sidebar.module.css.cjs');
 const SidebarContext = React.createContext({
     isCollapsed: false
 });
-const SidebarRoot = React.forwardRef(({ className, position = 'left', open: providedOpen, onOpenChange, hideCollapsedItemTooltip, collapsible = true, tooltipMessage, defaultOpen = true, children, ...props }, ref) => {
+function SidebarRoot({ className, position = 'left', open: providedOpen, onOpenChange, hideCollapsedItemTooltip, collapsible = true, tooltipMessage, defaultOpen = true, children, ...props }) {
     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.jsxs("aside", { ref: ref, className: classVarianceAuthority.cx(sidebar_module.default.root, className), "data-position": position, "data-open": open ? '' : undefined, "data-closed": !open ? '' : undefined, "data-collapse-disabled": !collapsible ? '' : undefined, "aria-label": 'Navigation Sidebar', "aria-expanded": open, role: 'navigation', ...props, children: [collapsible && (jsxRuntime.jsxs(tooltip.Tooltip, { trackCursorAxis: 'y', children: [jsxRuntime.jsx(tooltip.Tooltip.Trigger, { render: jsxRuntime.jsx("div", { className: sidebar_module.default.resizeHandle, onClick: () => handleOpenChange(!open), role: 'button', tabIndex: 0, "aria-label": open ? 'Collapse sidebar' : 'Expand sidebar', onKeyDown: e => {
+    return (jsxRuntime.jsx(SidebarContext, { value: { isCollapsed: !open, hideCollapsedItemTooltip }, children: jsxRuntime.jsxs("aside", { className: classVarianceAuthority.cx(sidebar_module.default.root, className), "data-position": position, "data-open": open ? '' : undefined, "data-closed": !open ? '' : undefined, "data-collapse-disabled": !collapsible ? '' : undefined, "aria-label": 'Navigation Sidebar', "aria-expanded": open, role: 'navigation', ...props, children: [collapsible && (jsxRuntime.jsxs(tooltip.Tooltip, { trackCursorAxis: 'y', children: [jsxRuntime.jsx(tooltip.Tooltip.Trigger, { render: 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);
                                     }
                                 } }) }), jsxRuntime.jsx(tooltip.Tooltip.Content, { side: position === 'left' ? 'right' : 'left', sideOffset: 10, children: tooltipMessage ??
                                 (open ? 'Click to collapse' : 'Click to expand') })] })), children] }) }));
-});
+}
 SidebarRoot.displayName = 'Sidebar';
 
 exports.SidebarContext = SidebarContext;

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar-root.cjs","sources":["../../../components/sidebar/sidebar-root.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport {\n  ComponentPropsWithoutRef,\n  createContext,\n  forwardRef,\n  ReactNode,\n  useCallback,\n  useState\n} from 'react';\nimport { Tooltip } from '../tooltip';\nimport styles from './sidebar.module.css';\n\nexport interface SidebarContextValue {\n  isCollapsed: boolean;\n  hideCollapsedItemTooltip?: boolean;\n}\n\nexport const SidebarContext = createContext<SidebarContextValue>({\n  isCollapsed: false\n});\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<'aside'> {\n  position?: 'left' | 'right';\n  hideCollapsedItemTooltip?: boolean;\n  collapsible?: boolean;\n  tooltipMessage?: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport const SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(\n  (\n    {\n      className,\n      position = 'left',\n      open: providedOpen,\n      onOpenChange,\n      hideCollapsedItemTooltip,\n      collapsible = true,\n      tooltipMessage,\n      defaultOpen = true,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\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        <aside\n          ref={ref}\n          className={cx(styles.root, className)}\n          data-position={position}\n          data-open={open ? '' : undefined}\n          data-closed={!open ? '' : undefined}\n          data-collapse-disabled={!collapsible ? '' : undefined}\n          aria-label='Navigation Sidebar'\n          aria-expanded={open}\n          role='navigation'\n          {...props}\n        >\n          {collapsible && (\n            <Tooltip trackCursorAxis='y'>\n              <Tooltip.Trigger\n                render={\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                }\n              />\n              <Tooltip.Content\n                side={position === 'left' ? 'right' : 'left'}\n                sideOffset={10}\n              >\n                {tooltipMessage ??\n                  (open ? 'Click to collapse' : 'Click to expand')}\n              </Tooltip.Content>\n            </Tooltip>\n          )}\n          {children}\n        </aside>\n      </SidebarContext.Provider>\n    );\n  }\n);\n\nSidebarRoot.displayName = 'Sidebar';\n"],"names":[],"mappings":";;;;;;;;;AAmBO;AACL;AACD;AAYY;;AAiBT;AAEA;;AAGI;AACF;AAIF;AA2BkB;;AAEE;;;AAWN;AAQhB;AAGF;;;"}
+{"version":3,"file":"sidebar-root.cjs","sources":["../../../components/sidebar/sidebar-root.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport {\n  ComponentProps,\n  createContext,\n  ReactNode,\n  useCallback,\n  useState\n} from 'react';\nimport { Tooltip } from '../tooltip';\nimport styles from './sidebar.module.css';\n\nexport interface SidebarContextValue {\n  isCollapsed: boolean;\n  hideCollapsedItemTooltip?: boolean;\n}\n\nexport const SidebarContext = createContext<SidebarContextValue>({\n  isCollapsed: false\n});\n\nexport interface SidebarRootProps extends ComponentProps<'aside'> {\n  position?: 'left' | 'right';\n  hideCollapsedItemTooltip?: boolean;\n  collapsible?: boolean;\n  tooltipMessage?: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport function SidebarRoot({\n  className,\n  position = 'left',\n  open: providedOpen,\n  onOpenChange,\n  hideCollapsedItemTooltip,\n  collapsible = true,\n  tooltipMessage,\n  defaultOpen = true,\n  children,\n  ...props\n}: SidebarRootProps) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\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 value={{ isCollapsed: !open, hideCollapsedItemTooltip }}>\n      <aside\n        className={cx(styles.root, className)}\n        data-position={position}\n        data-open={open ? '' : undefined}\n        data-closed={!open ? '' : undefined}\n        data-collapse-disabled={!collapsible ? '' : undefined}\n        aria-label='Navigation Sidebar'\n        aria-expanded={open}\n        role='navigation'\n        {...props}\n      >\n        {collapsible && (\n          <Tooltip trackCursorAxis='y'>\n            <Tooltip.Trigger\n              render={\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              }\n            />\n            <Tooltip.Content\n              side={position === 'left' ? 'right' : 'left'}\n              sideOffset={10}\n            >\n              {tooltipMessage ??\n                (open ? 'Click to collapse' : 'Click to expand')}\n            </Tooltip.Content>\n          </Tooltip>\n        )}\n        {children}\n      </aside>\n    </SidebarContext>\n  );\n}\n\nSidebarRoot.displayName = 'Sidebar';\n"],"names":[],"mappings":";;;;;;;;;AAkBO;AACL;AACD;AAYe;;AAad;AAEA;;AAGI;AACF;AAIF;AAwBkB;;AAEE;;;AAWN;AAQhB;AAEA;;;"}

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

@@ -1,10 +1,10 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 export interface SidebarContextValue {
     isCollapsed: boolean;
     hideCollapsedItemTooltip?: boolean;
 }
 export declare const SidebarContext: import("react").Context<SidebarContextValue>;
-export interface SidebarRootProps extends ComponentPropsWithoutRef<'aside'> {
+export interface SidebarRootProps extends ComponentProps<'aside'> {
     position?: 'left' | 'right';
     hideCollapsedItemTooltip?: boolean;
     collapsible?: boolean;
@@ -13,5 +13,8 @@ export interface SidebarRootProps extends ComponentPropsWithoutRef<'aside'> {
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
-export declare const SidebarRoot: import("react").ForwardRefExoticComponent<SidebarRootProps & import("react").RefAttributes<HTMLElement>>;
+export declare function SidebarRoot({ className, position, open: providedOpen, onOpenChange, hideCollapsedItemTooltip, collapsible, tooltipMessage, defaultOpen, children, ...props }: SidebarRootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SidebarRoot {
+    var displayName: string;
+}
 //# sourceMappingURL=sidebar-root.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar-root.d.ts","sourceRoot":"","sources":["../../../components/sidebar/sidebar-root.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,wBAAwB,EAGxB,SAAS,EAGV,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,OAAO,CAAC;IACrB,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,cAAc,8CAEzB,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,wBAAwB,CAAC,OAAO,CAAC;IACzE,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,WAAW,0GA4EvB,CAAC"}
+{"version":3,"file":"sidebar-root.d.ts","sourceRoot":"","sources":["../../../components/sidebar/sidebar-root.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,cAAc,EAEd,SAAS,EAGV,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,OAAO,CAAC;IACrB,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,cAAc,8CAEzB,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,OAAO,CAAC;IAC/D,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAiB,EACjB,IAAI,EAAE,YAAY,EAClB,YAAY,EACZ,wBAAwB,EACxB,WAAkB,EAClB,cAAc,EACd,WAAkB,EAClB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAyDlB;yBApEe,WAAW"}