@raystack/apsara 0.56.7 → 1.0.0-rc.1

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: 'group', "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='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.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

@@ -3,7 +3,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
-var radixUi = require('radix-ui');
 var React = require('react');
 var tooltip = require('../tooltip/tooltip.cjs');
 var sidebar_module = require('./sidebar.module.css.cjs');
@@ -11,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, 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.jsx(tooltip.Tooltip.Provider, { children: jsxRuntime.jsx(radixUi.Collapsible.Root, { ref: ref, className: classVarianceAuthority.cx(sidebar_module.default.root, className), "data-position": position, "data-state": open ? 'expanded' : 'collapsed', "data-collapse-disabled": !collapsible, open: open, onOpenChange: collapsible ? handleOpenChange : undefined, "aria-label": 'Navigation Sidebar', "aria-expanded": open, role: 'navigation', ...props, asChild: true, children: jsxRuntime.jsxs("aside", { children: [collapsible && (jsxRuntime.jsx(tooltip.Tooltip, { message: tooltipMessage ??
-                                (open ? 'Click to collapse' : 'Click to expand'), side: position === 'left' ? 'right' : 'left', asChild: true, followCursor: true, sideOffset: 10, children: jsxRuntime.jsx("div", { className: sidebar_module.default.resizeHandle, onClick: () => handleOpenChange(!open), role: 'button', tabIndex: 0, "aria-label": open ? 'Collapse sidebar' : 'Expand sidebar', onKeyDown: e => {
+    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);
                                     }
-                                } }) })), children] }) }) }) }));
-});
+                                } }) }), 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 { Collapsible } from 'radix-ui';\nimport {\n  ComponentPropsWithoutRef,\n  ComponentRef,\n  ReactNode,\n  createContext,\n  forwardRef,\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\n  extends ComponentPropsWithoutRef<typeof Collapsible.Root> {\n  position?: 'left' | 'right';\n  hideCollapsedItemTooltip?: boolean;\n  collapsible?: boolean;\n  tooltipMessage?: ReactNode;\n}\n\nexport const SidebarRoot = forwardRef<\n  ComponentRef<typeof Collapsible.Root>,\n  SidebarRootProps\n>(\n  (\n    {\n      className,\n      position = 'left',\n      open: providedOpen,\n      onOpenChange,\n      hideCollapsedItemTooltip,\n      collapsible = true,\n      tooltipMessage,\n      defaultOpen,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n\n    const open = providedOpen ?? internalOpen;\n\n    const handleOpenChange = useCallback(\n      (value: boolean) => {\n        setInternalOpen(value);\n        onOpenChange?.(value);\n      },\n      [onOpenChange]\n    );\n\n    return (\n      <SidebarContext.Provider\n        value={{ isCollapsed: !open, hideCollapsedItemTooltip }}\n      >\n        <Tooltip.Provider>\n          <Collapsible.Root\n            ref={ref}\n            className={cx(styles.root, className)}\n            data-position={position}\n            data-state={open ? 'expanded' : 'collapsed'}\n            data-collapse-disabled={!collapsible}\n            open={open}\n            onOpenChange={collapsible ? handleOpenChange : undefined}\n            aria-label='Navigation Sidebar'\n            aria-expanded={open}\n            role='navigation'\n            {...props}\n            asChild\n          >\n            <aside>\n              {collapsible && (\n                <Tooltip\n                  message={\n                    tooltipMessage ??\n                    (open ? 'Click to collapse' : 'Click to expand')\n                  }\n                  side={position === 'left' ? 'right' : 'left'}\n                  asChild\n                  followCursor\n                  sideOffset={10}\n                >\n                  <div\n                    className={styles.resizeHandle}\n                    onClick={() => handleOpenChange(!open)}\n                    role='button'\n                    tabIndex={0}\n                    aria-label={open ? 'Collapse sidebar' : 'Expand sidebar'}\n                    onKeyDown={e => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault();\n                        handleOpenChange(!open);\n                      }\n                    }}\n                  />\n                </Tooltip>\n              )}\n              {children}\n            </aside>\n          </Collapsible.Root>\n        </Tooltip.Provider>\n      </SidebarContext.Provider>\n    );\n  }\n);\n\nSidebarRoot.displayName = 'Sidebar';\n"],"names":[],"mappings":";;;;;;;;;;AAqBO;AACL;AACD;AAUY;;AAqBT;AAEA;;AAGI;AACF;;AA4Bc;AAcE;;AAEE;;;AAYtB;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,15 +1,20 @@
-import { Collapsible } from 'radix-ui';
-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<typeof Collapsible.Root> {
+export interface SidebarRootProps extends ComponentProps<'aside'> {
     position?: 'left' | 'right';
     hideCollapsedItemTooltip?: boolean;
     collapsible?: boolean;
     tooltipMessage?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+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;
 }
-export declare const SidebarRoot: import("react").ForwardRefExoticComponent<SidebarRootProps & import("react").RefAttributes<HTMLDivElement>>;
 //# 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,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EACL,wBAAwB,EAExB,SAAS,EAKV,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,gBACf,SAAQ,wBAAwB,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,6GAoFvB,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"}

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

@@ -1,29 +1,28 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cx } from 'class-variance-authority';
-import { Collapsible } from 'radix-ui';
-import { createContext, forwardRef, useState, useCallback } from 'react';
+import { createContext, useState, useCallback } from 'react';
 import { Tooltip } from '../tooltip/tooltip.js';
 import styles from './sidebar.module.css.js';
 
 const SidebarContext = createContext({
     isCollapsed: false
 });
-const SidebarRoot = forwardRef(({ className, position = 'left', open: providedOpen, onOpenChange, hideCollapsedItemTooltip, collapsible = true, tooltipMessage, defaultOpen, children, ...props }, ref) => {
+function SidebarRoot({ className, position = 'left', open: providedOpen, onOpenChange, hideCollapsedItemTooltip, collapsible = true, tooltipMessage, defaultOpen = true, children, ...props }) {
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
     const open = providedOpen ?? internalOpen;
     const handleOpenChange = useCallback((value) => {
         setInternalOpen(value);
         onOpenChange?.(value);
     }, [onOpenChange]);
-    return (jsx(SidebarContext.Provider, { value: { isCollapsed: !open, hideCollapsedItemTooltip }, children: jsx(Tooltip.Provider, { children: jsx(Collapsible.Root, { ref: ref, className: cx(styles.root, className), "data-position": position, "data-state": open ? 'expanded' : 'collapsed', "data-collapse-disabled": !collapsible, open: open, onOpenChange: collapsible ? handleOpenChange : undefined, "aria-label": 'Navigation Sidebar', "aria-expanded": open, role: 'navigation', ...props, asChild: true, children: jsxs("aside", { children: [collapsible && (jsx(Tooltip, { message: tooltipMessage ??
-                                (open ? 'Click to collapse' : 'Click to expand'), side: position === 'left' ? 'right' : 'left', asChild: true, followCursor: true, sideOffset: 10, children: jsx("div", { className: styles.resizeHandle, onClick: () => handleOpenChange(!open), role: 'button', tabIndex: 0, "aria-label": open ? 'Collapse sidebar' : 'Expand sidebar', onKeyDown: e => {
+    return (jsx(SidebarContext, { value: { isCollapsed: !open, hideCollapsedItemTooltip }, children: jsxs("aside", { className: cx(styles.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 && (jsxs(Tooltip, { trackCursorAxis: 'y', children: [jsx(Tooltip.Trigger, { render: jsx("div", { className: styles.resizeHandle, onClick: () => handleOpenChange(!open), role: 'button', tabIndex: 0, "aria-label": open ? 'Collapse sidebar' : 'Expand sidebar', onKeyDown: e => {
                                     if (e.key === 'Enter' || e.key === ' ') {
                                         e.preventDefault();
                                         handleOpenChange(!open);
                                     }
-                                } }) })), children] }) }) }) }));
-});
+                                } }) }), jsx(Tooltip.Content, { side: position === 'left' ? 'right' : 'left', sideOffset: 10, children: tooltipMessage ??
+                                (open ? 'Click to collapse' : 'Click to expand') })] })), children] }) }));
+}
 SidebarRoot.displayName = 'Sidebar';
 
 export { SidebarContext, SidebarRoot };

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar-root.js","sources":["../../../components/sidebar/sidebar-root.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Collapsible } from 'radix-ui';\nimport {\n  ComponentPropsWithoutRef,\n  ComponentRef,\n  ReactNode,\n  createContext,\n  forwardRef,\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\n  extends ComponentPropsWithoutRef<typeof Collapsible.Root> {\n  position?: 'left' | 'right';\n  hideCollapsedItemTooltip?: boolean;\n  collapsible?: boolean;\n  tooltipMessage?: ReactNode;\n}\n\nexport const SidebarRoot = forwardRef<\n  ComponentRef<typeof Collapsible.Root>,\n  SidebarRootProps\n>(\n  (\n    {\n      className,\n      position = 'left',\n      open: providedOpen,\n      onOpenChange,\n      hideCollapsedItemTooltip,\n      collapsible = true,\n      tooltipMessage,\n      defaultOpen,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n\n    const open = providedOpen ?? internalOpen;\n\n    const handleOpenChange = useCallback(\n      (value: boolean) => {\n        setInternalOpen(value);\n        onOpenChange?.(value);\n      },\n      [onOpenChange]\n    );\n\n    return (\n      <SidebarContext.Provider\n        value={{ isCollapsed: !open, hideCollapsedItemTooltip }}\n      >\n        <Tooltip.Provider>\n          <Collapsible.Root\n            ref={ref}\n            className={cx(styles.root, className)}\n            data-position={position}\n            data-state={open ? 'expanded' : 'collapsed'}\n            data-collapse-disabled={!collapsible}\n            open={open}\n            onOpenChange={collapsible ? handleOpenChange : undefined}\n            aria-label='Navigation Sidebar'\n            aria-expanded={open}\n            role='navigation'\n            {...props}\n            asChild\n          >\n            <aside>\n              {collapsible && (\n                <Tooltip\n                  message={\n                    tooltipMessage ??\n                    (open ? 'Click to collapse' : 'Click to expand')\n                  }\n                  side={position === 'left' ? 'right' : 'left'}\n                  asChild\n                  followCursor\n                  sideOffset={10}\n                >\n                  <div\n                    className={styles.resizeHandle}\n                    onClick={() => handleOpenChange(!open)}\n                    role='button'\n                    tabIndex={0}\n                    aria-label={open ? 'Collapse sidebar' : 'Expand sidebar'}\n                    onKeyDown={e => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault();\n                        handleOpenChange(!open);\n                      }\n                    }}\n                  />\n                </Tooltip>\n              )}\n              {children}\n            </aside>\n          </Collapsible.Root>\n        </Tooltip.Provider>\n      </SidebarContext.Provider>\n    );\n  }\n);\n\nSidebarRoot.displayName = 'Sidebar';\n"],"names":[],"mappings":";;;;;;;;AAqBO;AACL;AACD;AAUY;;AAqBT;AAEA;;AAGI;AACF;;AA4Bc;AAcE;;AAEE;;;AAYtB;AAGF;;"}
+{"version":3,"file":"sidebar-root.js","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.d.ts

@@ -1,8 +1,12 @@
-export declare const Sidebar: import("react").ForwardRefExoticComponent<import("./sidebar-root").SidebarRootProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Main: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Item: import("react").ForwardRefExoticComponent<import("./sidebar-item").SidebarItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
-    Group: import("react").ForwardRefExoticComponent<import("./sidebar-misc").SidebarNavigationGroupProps & import("react").RefAttributes<HTMLElement>>;
+import { SidebarItem } from './sidebar-item';
+import { SidebarMain } from './sidebar-main';
+import { SidebarFooter, SidebarHeader, SidebarNavigationGroup } from './sidebar-misc';
+import { SidebarRoot } from './sidebar-root';
+export declare const Sidebar: typeof SidebarRoot & {
+    Header: typeof SidebarHeader;
+    Main: typeof SidebarMain;
+    Footer: typeof SidebarFooter;
+    Item: typeof SidebarItem;
+    Group: typeof SidebarNavigationGroup;
 };
 //# sourceMappingURL=sidebar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../components/sidebar/sidebar.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,OAAO;;;;;;CAMlB,CAAC"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../components/sidebar/sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EACL,aAAa,EACb,aAAa,EACb,sBAAsB,EACvB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAO,MAAM,OAAO;;;;;;CAMlB,CAAC"}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"root":"sidebar-module_root__EkOqU","header":"sidebar-module_header__KmG4y","main":"sidebar-module_main__qDvo4","footer":"sidebar-module_footer__uSfma","nav-item":"sidebar-module_nav-item__vd4i1","nav-leading-icon":"sidebar-module_nav-leading-icon__OyAl-","nav-text":"sidebar-module_nav-text__LTn8p","resizeHandle":"sidebar-module_resizeHandle__6zeTV","nav-group":"sidebar-module_nav-group__-7EWF","nav-group-header":"sidebar-module_nav-group-header__doG8b","nav-group-label":"sidebar-module_nav-group-label__3wOAj","nav-group-items":"sidebar-module_nav-group-items__hMXBY","nav___item":"sidebar-module_nav-item__vd4i1","nav___leading___icon":"sidebar-module_nav-leading-icon__OyAl-","nav___text":"sidebar-module_nav-text__LTn8p","nav___group":"sidebar-module_nav-group__-7EWF","nav___group___header":"sidebar-module_nav-group-header__doG8b","nav___group___label":"sidebar-module_nav-group-label__3wOAj","nav___group___items":"sidebar-module_nav-group-items__hMXBY"};
+var styles = {"root":"sidebar-module_root__EkOqU","header":"sidebar-module_header__KmG4y","main":"sidebar-module_main__qDvo4","footer":"sidebar-module_footer__uSfma","nav-item":"sidebar-module_nav-item__vd4i1","nav-leading-icon":"sidebar-module_nav-leading-icon__OyAl-","nav-fallback-avatar":"sidebar-module_nav-fallback-avatar__Yl-YE","nav-text":"sidebar-module_nav-text__LTn8p","resizeHandle":"sidebar-module_resizeHandle__6zeTV","nav-group":"sidebar-module_nav-group__-7EWF","nav-group-header":"sidebar-module_nav-group-header__doG8b","nav-group-label":"sidebar-module_nav-group-label__3wOAj","nav-group-items":"sidebar-module_nav-group-items__hMXBY","nav___item":"sidebar-module_nav-item__vd4i1","nav___leading___icon":"sidebar-module_nav-leading-icon__OyAl-","nav___fallback___avatar":"sidebar-module_nav-fallback-avatar__Yl-YE","nav___text":"sidebar-module_nav-text__LTn8p","nav___group":"sidebar-module_nav-group__-7EWF","nav___group___header":"sidebar-module_nav-group-header__doG8b","nav___group___label":"sidebar-module_nav-group-label__3wOAj","nav___group___items":"sidebar-module_nav-group-items__hMXBY"};
 
 exports.default = styles;
 //# sourceMappingURL=sidebar.module.css.cjs.map

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

@@ -1,4 +1,4 @@
-var styles = {"root":"sidebar-module_root__EkOqU","header":"sidebar-module_header__KmG4y","main":"sidebar-module_main__qDvo4","footer":"sidebar-module_footer__uSfma","nav-item":"sidebar-module_nav-item__vd4i1","nav-leading-icon":"sidebar-module_nav-leading-icon__OyAl-","nav-text":"sidebar-module_nav-text__LTn8p","resizeHandle":"sidebar-module_resizeHandle__6zeTV","nav-group":"sidebar-module_nav-group__-7EWF","nav-group-header":"sidebar-module_nav-group-header__doG8b","nav-group-label":"sidebar-module_nav-group-label__3wOAj","nav-group-items":"sidebar-module_nav-group-items__hMXBY","nav___item":"sidebar-module_nav-item__vd4i1","nav___leading___icon":"sidebar-module_nav-leading-icon__OyAl-","nav___text":"sidebar-module_nav-text__LTn8p","nav___group":"sidebar-module_nav-group__-7EWF","nav___group___header":"sidebar-module_nav-group-header__doG8b","nav___group___label":"sidebar-module_nav-group-label__3wOAj","nav___group___items":"sidebar-module_nav-group-items__hMXBY"};
+var styles = {"root":"sidebar-module_root__EkOqU","header":"sidebar-module_header__KmG4y","main":"sidebar-module_main__qDvo4","footer":"sidebar-module_footer__uSfma","nav-item":"sidebar-module_nav-item__vd4i1","nav-leading-icon":"sidebar-module_nav-leading-icon__OyAl-","nav-fallback-avatar":"sidebar-module_nav-fallback-avatar__Yl-YE","nav-text":"sidebar-module_nav-text__LTn8p","resizeHandle":"sidebar-module_resizeHandle__6zeTV","nav-group":"sidebar-module_nav-group__-7EWF","nav-group-header":"sidebar-module_nav-group-header__doG8b","nav-group-label":"sidebar-module_nav-group-label__3wOAj","nav-group-items":"sidebar-module_nav-group-items__hMXBY","nav___item":"sidebar-module_nav-item__vd4i1","nav___leading___icon":"sidebar-module_nav-leading-icon__OyAl-","nav___fallback___avatar":"sidebar-module_nav-fallback-avatar__Yl-YE","nav___text":"sidebar-module_nav-text__LTn8p","nav___group":"sidebar-module_nav-group__-7EWF","nav___group___header":"sidebar-module_nav-group-header__doG8b","nav___group___label":"sidebar-module_nav-group-label__3wOAj","nav___group___items":"sidebar-module_nav-group-items__hMXBY"};
 
 export { styles as default };
 //# sourceMappingURL=sidebar.module.css.js.map

package/dist/components/skeleton/skeleton.cjs

@@ -28,9 +28,11 @@ const SkeletonBase = (props) => {
                 ...style
             } }, i))) }));
 };
+SkeletonBase.displayName = 'Skeleton';
 const Provider = ({ children, ...props }) => {
-    return (jsxRuntime.jsx(SkeletonContext.Provider, { value: props, children: children }));
+    return jsxRuntime.jsx(SkeletonContext, { value: props, children: children });
 };
+Provider.displayName = 'Skeleton.Provider';
 const Skeleton = Object.assign(SkeletonBase, { Provider });
 
 exports.Skeleton = Skeleton;

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.cjs","sources":["../../../components/skeleton/skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { CSSProperties, createContext, useContext } from 'react';\nimport styles from './skeleton.module.css';\n\nexport interface SkeletonProps {\n  baseColor?: string;\n  highlightColor?: string;\n  width?: string | number;\n  height?: string | number;\n  borderRadius?: string | number;\n  inline?: boolean;\n  duration?: number;\n  enableAnimation?: boolean;\n  count?: number;\n  style?: CSSProperties;\n  className?: string;\n  containerStyle?: CSSProperties;\n  containerClassName?: string;\n}\n\nconst SkeletonContext = createContext<SkeletonProps | null>(null);\n\ninterface SkeletonProviderProps extends SkeletonProps {\n  children: React.ReactNode;\n}\n\nconst SkeletonBase = (props: SkeletonProps) => {\n  const contextProps = useContext(SkeletonContext);\n\n  const {\n    baseColor,\n    highlightColor,\n    width,\n    height = 'var(--rs-space-4)',\n    borderRadius = 'var(--rs-radius-2)',\n    inline = false,\n    duration = 1.5,\n    count = 1,\n    enableAnimation = true,\n    style,\n    className,\n    containerStyle,\n    containerClassName\n  } = { ...contextProps, ...props };\n\n  const skeletonClassName = cx(\n    styles.skeleton,\n    inline && styles.inline,\n    enableAnimation && styles.animate,\n    className\n  );\n\n  const Container = inline ? 'span' : 'div';\n  const defaultWidth = inline ? '50px' : '100%';\n\n  return (\n    <Container\n      className={containerClassName}\n      style={{\n        display: inline ? 'inline-block' : 'flex',\n        flexDirection: !inline ? 'column' : undefined,\n        gap: !inline && count > 1 ? 'var(--rs-space-3)' : undefined,\n        ...containerStyle\n      }}\n    >\n      {Array.from({ length: count }).map((_, i) => (\n        <span\n          key={i}\n          className={skeletonClassName}\n          style={\n            {\n              width: width ?? defaultWidth,\n              height,\n              borderRadius,\n              '--skeleton-base-color': baseColor,\n              '--skeleton-highlight-color': highlightColor,\n              '--skeleton-duration': `${duration}s`,\n              ...style\n            } as CSSProperties\n          }\n        />\n      ))}\n    </Container>\n  );\n};\n\nconst Provider = ({ children, ...props }: SkeletonProviderProps) => {\n  return (\n    <SkeletonContext.Provider value={props}>\n      {children}\n    </SkeletonContext.Provider>\n  );\n};\n\nexport const Skeleton = Object.assign(SkeletonBase, { Provider });\n"],"names":[],"mappings":";;;;;;;;AAsBA;AAMA;AACE;;;;;;;;AAkCM;AACA;;;;;AAYM;AACA;;AAEA;AACgB;AAM9B;AAEA;AACE;AAKF;AAEO;;"}
+{"version":3,"file":"skeleton.cjs","sources":["../../../components/skeleton/skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { CSSProperties, createContext, ReactNode, useContext } from 'react';\nimport styles from './skeleton.module.css';\n\nexport interface SkeletonProps {\n  baseColor?: string;\n  highlightColor?: string;\n  width?: string | number;\n  height?: string | number;\n  borderRadius?: string | number;\n  inline?: boolean;\n  duration?: number;\n  enableAnimation?: boolean;\n  count?: number;\n  style?: CSSProperties;\n  className?: string;\n  containerStyle?: CSSProperties;\n  containerClassName?: string;\n}\n\nconst SkeletonContext = createContext<SkeletonProps | null>(null);\n\ninterface SkeletonProviderProps extends SkeletonProps {\n  children: ReactNode;\n}\n\nconst SkeletonBase = (props: SkeletonProps) => {\n  const contextProps = useContext(SkeletonContext);\n\n  const {\n    baseColor,\n    highlightColor,\n    width,\n    height = 'var(--rs-space-4)',\n    borderRadius = 'var(--rs-radius-2)',\n    inline = false,\n    duration = 1.5,\n    count = 1,\n    enableAnimation = true,\n    style,\n    className,\n    containerStyle,\n    containerClassName\n  } = { ...contextProps, ...props };\n\n  const skeletonClassName = cx(\n    styles.skeleton,\n    inline && styles.inline,\n    enableAnimation && styles.animate,\n    className\n  );\n\n  const Container = inline ? 'span' : 'div';\n  const defaultWidth = inline ? '50px' : '100%';\n\n  return (\n    <Container\n      className={containerClassName}\n      style={{\n        display: inline ? 'inline-block' : 'flex',\n        flexDirection: !inline ? 'column' : undefined,\n        gap: !inline && count > 1 ? 'var(--rs-space-3)' : undefined,\n        ...containerStyle\n      }}\n    >\n      {Array.from({ length: count }).map((_, i) => (\n        <span\n          key={i}\n          className={skeletonClassName}\n          style={\n            {\n              width: width ?? defaultWidth,\n              height,\n              borderRadius,\n              '--skeleton-base-color': baseColor,\n              '--skeleton-highlight-color': highlightColor,\n              '--skeleton-duration': `${duration}s`,\n              ...style\n            } as CSSProperties\n          }\n        />\n      ))}\n    </Container>\n  );\n};\n\nSkeletonBase.displayName = 'Skeleton';\n\nconst Provider = ({ children, ...props }: SkeletonProviderProps) => {\n  return <SkeletonContext value={props}>{children}</SkeletonContext>;\n};\n\nProvider.displayName = 'Skeleton.Provider';\n\nexport const Skeleton = Object.assign(SkeletonBase, { Provider });\n"],"names":[],"mappings":";;;;;;;;AAsBA;AAMA;AACE;;;;;;;;AAkCM;AACA;;;;;AAYM;AACA;;AAEA;AACgB;AAM9B;AAEA;AAEA;;AAEA;AAEA;AAEO;;"}

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

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 export interface SkeletonProps {
     baseColor?: string;
     highlightColor?: string;
@@ -15,10 +15,16 @@ export interface SkeletonProps {
     containerClassName?: string;
 }
 interface SkeletonProviderProps extends SkeletonProps {
-    children: React.ReactNode;
+    children: ReactNode;
 }
-export declare const Skeleton: ((props: SkeletonProps) => import("react/jsx-runtime").JSX.Element) & {
-    Provider: ({ children, ...props }: SkeletonProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Skeleton: {
+    (props: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Provider: {
+        ({ children, ...props }: SkeletonProviderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
 };
 export {};
 //# sourceMappingURL=skeleton.d.ts.map

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

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

package/dist/components/skeleton/skeleton.js

@@ -26,9 +26,11 @@ const SkeletonBase = (props) => {
                 ...style
             } }, i))) }));
 };
+SkeletonBase.displayName = 'Skeleton';
 const Provider = ({ children, ...props }) => {
-    return (jsx(SkeletonContext.Provider, { value: props, children: children }));
+    return jsx(SkeletonContext, { value: props, children: children });
 };
+Provider.displayName = 'Skeleton.Provider';
 const Skeleton = Object.assign(SkeletonBase, { Provider });
 
 export { Skeleton };

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["../../../components/skeleton/skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { CSSProperties, createContext, useContext } from 'react';\nimport styles from './skeleton.module.css';\n\nexport interface SkeletonProps {\n  baseColor?: string;\n  highlightColor?: string;\n  width?: string | number;\n  height?: string | number;\n  borderRadius?: string | number;\n  inline?: boolean;\n  duration?: number;\n  enableAnimation?: boolean;\n  count?: number;\n  style?: CSSProperties;\n  className?: string;\n  containerStyle?: CSSProperties;\n  containerClassName?: string;\n}\n\nconst SkeletonContext = createContext<SkeletonProps | null>(null);\n\ninterface SkeletonProviderProps extends SkeletonProps {\n  children: React.ReactNode;\n}\n\nconst SkeletonBase = (props: SkeletonProps) => {\n  const contextProps = useContext(SkeletonContext);\n\n  const {\n    baseColor,\n    highlightColor,\n    width,\n    height = 'var(--rs-space-4)',\n    borderRadius = 'var(--rs-radius-2)',\n    inline = false,\n    duration = 1.5,\n    count = 1,\n    enableAnimation = true,\n    style,\n    className,\n    containerStyle,\n    containerClassName\n  } = { ...contextProps, ...props };\n\n  const skeletonClassName = cx(\n    styles.skeleton,\n    inline && styles.inline,\n    enableAnimation && styles.animate,\n    className\n  );\n\n  const Container = inline ? 'span' : 'div';\n  const defaultWidth = inline ? '50px' : '100%';\n\n  return (\n    <Container\n      className={containerClassName}\n      style={{\n        display: inline ? 'inline-block' : 'flex',\n        flexDirection: !inline ? 'column' : undefined,\n        gap: !inline && count > 1 ? 'var(--rs-space-3)' : undefined,\n        ...containerStyle\n      }}\n    >\n      {Array.from({ length: count }).map((_, i) => (\n        <span\n          key={i}\n          className={skeletonClassName}\n          style={\n            {\n              width: width ?? defaultWidth,\n              height,\n              borderRadius,\n              '--skeleton-base-color': baseColor,\n              '--skeleton-highlight-color': highlightColor,\n              '--skeleton-duration': `${duration}s`,\n              ...style\n            } as CSSProperties\n          }\n        />\n      ))}\n    </Container>\n  );\n};\n\nconst Provider = ({ children, ...props }: SkeletonProviderProps) => {\n  return (\n    <SkeletonContext.Provider value={props}>\n      {children}\n    </SkeletonContext.Provider>\n  );\n};\n\nexport const Skeleton = Object.assign(SkeletonBase, { Provider });\n"],"names":[],"mappings":";;;;;;AAsBA;AAMA;AACE;;;;;;;;AAkCM;AACA;;;;;AAYM;AACA;;AAEA;AACgB;AAM9B;AAEA;AACE;AAKF;AAEO;;"}
+{"version":3,"file":"skeleton.js","sources":["../../../components/skeleton/skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { CSSProperties, createContext, ReactNode, useContext } from 'react';\nimport styles from './skeleton.module.css';\n\nexport interface SkeletonProps {\n  baseColor?: string;\n  highlightColor?: string;\n  width?: string | number;\n  height?: string | number;\n  borderRadius?: string | number;\n  inline?: boolean;\n  duration?: number;\n  enableAnimation?: boolean;\n  count?: number;\n  style?: CSSProperties;\n  className?: string;\n  containerStyle?: CSSProperties;\n  containerClassName?: string;\n}\n\nconst SkeletonContext = createContext<SkeletonProps | null>(null);\n\ninterface SkeletonProviderProps extends SkeletonProps {\n  children: ReactNode;\n}\n\nconst SkeletonBase = (props: SkeletonProps) => {\n  const contextProps = useContext(SkeletonContext);\n\n  const {\n    baseColor,\n    highlightColor,\n    width,\n    height = 'var(--rs-space-4)',\n    borderRadius = 'var(--rs-radius-2)',\n    inline = false,\n    duration = 1.5,\n    count = 1,\n    enableAnimation = true,\n    style,\n    className,\n    containerStyle,\n    containerClassName\n  } = { ...contextProps, ...props };\n\n  const skeletonClassName = cx(\n    styles.skeleton,\n    inline && styles.inline,\n    enableAnimation && styles.animate,\n    className\n  );\n\n  const Container = inline ? 'span' : 'div';\n  const defaultWidth = inline ? '50px' : '100%';\n\n  return (\n    <Container\n      className={containerClassName}\n      style={{\n        display: inline ? 'inline-block' : 'flex',\n        flexDirection: !inline ? 'column' : undefined,\n        gap: !inline && count > 1 ? 'var(--rs-space-3)' : undefined,\n        ...containerStyle\n      }}\n    >\n      {Array.from({ length: count }).map((_, i) => (\n        <span\n          key={i}\n          className={skeletonClassName}\n          style={\n            {\n              width: width ?? defaultWidth,\n              height,\n              borderRadius,\n              '--skeleton-base-color': baseColor,\n              '--skeleton-highlight-color': highlightColor,\n              '--skeleton-duration': `${duration}s`,\n              ...style\n            } as CSSProperties\n          }\n        />\n      ))}\n    </Container>\n  );\n};\n\nSkeletonBase.displayName = 'Skeleton';\n\nconst Provider = ({ children, ...props }: SkeletonProviderProps) => {\n  return <SkeletonContext value={props}>{children}</SkeletonContext>;\n};\n\nProvider.displayName = 'Skeleton.Provider';\n\nexport const Skeleton = Object.assign(SkeletonBase, { Provider });\n"],"names":[],"mappings":";;;;;;AAsBA;AAMA;AACE;;;;;;;;AAkCM;AACA;;;;;AAYM;AACA;;AAEA;AACgB;AAM9B;AAEA;AAEA;;AAEA;AAEA;AAEO;;"}

package/dist/components/slider/index.d.ts

@@ -1,2 +1,2 @@
-export { Slider } from "./slider";
+export { Slider } from './slider';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/slider/slider.cjs

@@ -2,12 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
 var classVarianceAuthority = require('class-variance-authority');
-var radixUi = require('radix-ui');
 var React = require('react');
 var text = require('../text/text.cjs');
 var slider_module = require('./slider.module.css.cjs');
-var thumb = require('./thumb.cjs');
 
 const slider = classVarianceAuthority.cva(slider_module.default.slider, {
     variants: {
@@ -20,34 +19,24 @@ const slider = classVarianceAuthority.cva(slider_module.default.slider, {
         variant: 'single'
     }
 });
-const Slider = React.forwardRef(({ className, variant = 'single', value, defaultValue, min = 0, max = 100, step = 1, label, onChange, 'aria-label': ariaLabel, 'aria-valuetext': ariaValueText, thumbSize = 'large', ...props }, ref) => {
+function SliderRoot({ className, variant = 'single', label, thumbSize = 'large', ...props }) {
     const isRange = variant === 'range';
     const isThumbSmall = thumbSize === 'small';
-    const defaultVal = isRange
-        ? defaultValue || [min, max]
-        : [defaultValue || min];
-    const currentValue = value
-        ? isRange
-            ? value
-            : [value]
-        : defaultVal;
-    const getLabel = (index) => {
+    const getLabel = React.useCallback((index) => {
         if (!label)
             return undefined;
         if (typeof label === 'string')
             return label;
         return label[index];
-    };
-    const getAriaValueText = (index) => {
-        if (ariaValueText)
-            return ariaValueText;
-        const labelText = getLabel(index);
-        const val = currentValue[index];
-        return labelText ? `${labelText}: ${val}` : `${val}`;
-    };
-    return (jsxRuntime.jsxs(radixUi.Slider.Root, { ref: ref, className: `${slider({ variant })} ${className || ''}`, value: value ? currentValue : undefined, defaultValue: defaultVal, min: min, max: max, step: step, onValueChange: val => onChange?.(isRange ? val : val[0]), "aria-label": ariaLabel || (isRange ? 'Range slider' : 'Slider'), ...props, children: [jsxRuntime.jsx(radixUi.Slider.Track, { className: slider_module.default.track, children: jsxRuntime.jsx(radixUi.Slider.Range, { className: slider_module.default.range }) }), defaultVal.map((_, i) => (jsxRuntime.jsx(radixUi.Slider.Thumb, { className: classVarianceAuthority.cx(slider_module.default.thumb), asChild: true, "aria-label": getLabel(i) || `Thumb ${i + 1}`, "aria-valuetext": getAriaValueText(i), "data-size": thumbSize, children: jsxRuntime.jsxs("div", { children: [isThumbSmall ? (jsxRuntime.jsx("div", { className: slider_module.default.thumbSmall })) : (jsxRuntime.jsx(thumb.ThumbIcon, {})), getLabel(i) && (jsxRuntime.jsx(text.Text, { className: slider_module.default.label, size: isThumbSmall ? 'micro' : 'mini', weight: 'medium', children: getLabel(i) }))] }) }, i)))] }));
+    }, [label]);
+    const thumbCount = isRange ? 2 : 1;
+    return (jsxRuntime.jsx(react.Slider.Root, { className: slider({ variant, className }), thumbAlignment: 'edge', ...props, children: jsxRuntime.jsx(react.Slider.Control, { className: slider_module.default.control, children: jsxRuntime.jsxs(react.Slider.Track, { className: slider_module.default.track, children: [jsxRuntime.jsx(react.Slider.Indicator, { className: slider_module.default.indicator }), Array.from({ length: thumbCount }).map((_, i) => (jsxRuntime.jsxs(react.Slider.Thumb, { index: isRange ? i : undefined, className: classVarianceAuthority.cx(slider_module.default.thumb), "aria-label": getLabel(i) || (isRange ? `Thumb ${i + 1}` : 'Slider thumb'), "data-size": thumbSize, children: [isThumbSmall ? (jsxRuntime.jsx("div", { className: slider_module.default.thumbSmall })) : (jsxRuntime.jsxs("div", { className: slider_module.default.thumbLarge, children: [jsxRuntime.jsx("div", { className: slider_module.default.thumbLargeLine }), jsxRuntime.jsx("div", { className: slider_module.default.thumbLargeLine }), jsxRuntime.jsx("div", { className: slider_module.default.thumbLargeLine })] })), getLabel(i) && (jsxRuntime.jsx(text.Text, { className: slider_module.default.label, size: isThumbSmall ? 'micro' : 'mini', weight: 'medium', children: getLabel(i) }))] }, i)))] }) }) }));
+}
+SliderRoot.displayName = 'Slider';
+const Slider = Object.assign(SliderRoot, {
+    Value: react.Slider.Value
 });
-Slider.displayName = 'Slider';
+Slider.Value.displayName = 'Slider.Value';
 
 exports.Slider = Slider;
 //# sourceMappingURL=slider.cjs.map

package/dist/components/slider/slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"slider.cjs","sources":["../../../components/slider/slider.tsx"],"sourcesContent":["'use client';\n\nimport { type VariantProps, cva, cx } from 'class-variance-authority';\nimport { Slider as SliderPrimitive } from 'radix-ui';\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  forwardRef\n} from 'react';\nimport { Text } from '../text';\nimport styles from './slider.module.css';\nimport { ThumbIcon } from './thumb';\n\nconst slider = cva(styles.slider, {\n  variants: {\n    variant: {\n      single: styles['slider-variant-single'],\n      range: styles['slider-variant-range']\n    }\n  },\n  defaultVariants: {\n    variant: 'single'\n  }\n});\n\nexport interface SliderProps\n  extends Omit<\n      ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,\n      'value' | 'defaultValue' | 'onChange'\n    >,\n    VariantProps<typeof slider> {\n  value?: number | [number, number];\n  defaultValue?: number | [number, number];\n  min?: number;\n  max?: number;\n  step?: number;\n  label?: string | [string, string];\n  onChange?: (value: number | [number, number]) => void;\n  'aria-label'?: string;\n  'aria-valuetext'?: string;\n  thumbSize?: 'small' | 'large';\n}\n\nexport const Slider = forwardRef<\n  ElementRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(\n  (\n    {\n      className,\n      variant = 'single',\n      value,\n      defaultValue,\n      min = 0,\n      max = 100,\n      step = 1,\n      label,\n      onChange,\n      'aria-label': ariaLabel,\n      'aria-valuetext': ariaValueText,\n      thumbSize = 'large',\n      ...props\n    },\n    ref\n  ) => {\n    const isRange = variant === 'range';\n    const isThumbSmall = thumbSize === 'small';\n    const defaultVal = isRange\n      ? (defaultValue as [number, number]) || [min, max]\n      : [(defaultValue as number) || min];\n    const currentValue = value\n      ? isRange\n        ? (value as [number, number])\n        : [value as number]\n      : defaultVal;\n\n    const getLabel = (index: number) => {\n      if (!label) return undefined;\n      if (typeof label === 'string') return label;\n      return label[index];\n    };\n\n    const getAriaValueText = (index: number) => {\n      if (ariaValueText) return ariaValueText;\n      const labelText = getLabel(index);\n      const val = currentValue[index];\n      return labelText ? `${labelText}: ${val}` : `${val}`;\n    };\n\n    return (\n      <SliderPrimitive.Root\n        ref={ref}\n        className={`${slider({ variant })} ${className || ''}`}\n        value={value ? currentValue : undefined}\n        defaultValue={defaultVal}\n        min={min}\n        max={max}\n        step={step}\n        onValueChange={val =>\n          onChange?.(isRange ? (val as [number, number]) : val[0])\n        }\n        aria-label={ariaLabel || (isRange ? 'Range slider' : 'Slider')}\n        {...props}\n      >\n        <SliderPrimitive.Track className={styles.track}>\n          <SliderPrimitive.Range className={styles.range} />\n        </SliderPrimitive.Track>\n        {defaultVal.map((_, i) => (\n          <SliderPrimitive.Thumb\n            key={i}\n            className={cx(styles.thumb)}\n            asChild\n            aria-label={getLabel(i) || `Thumb ${i + 1}`}\n            aria-valuetext={getAriaValueText(i)}\n            data-size={thumbSize}\n          >\n            <div>\n              {isThumbSmall ? (\n                <div className={styles.thumbSmall} />\n              ) : (\n                <ThumbIcon />\n              )}\n              {getLabel(i) && (\n                <Text\n                  className={styles.label}\n                  size={isThumbSmall ? 'micro' : 'mini'}\n                  weight='medium'\n                >\n                  {getLabel(i)}\n                </Text>\n              )}\n            </div>\n          </SliderPrimitive.Thumb>\n        ))}\n      </SliderPrimitive.Root>\n    );\n  }\n);\n\nSlider.displayName = 'Slider';\n"],"names":[],"mappings":";;;;;;;;;;;AAaA;AACE;AACE;AACE;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAoBY;AAsBT;AACA;;AAEE;AACA;;AAEA;AACE;;;AAIJ;AACE;AAAY;;AACmB;AAC/B;AACF;AAEA;AACE;AAAmB;AACnB;AACA;AACA;AACF;;AAiDF;AAGF;;"}
+{"version":3,"file":"slider.cjs","sources":["../../../components/slider/slider.tsx"],"sourcesContent":["'use client';\n\nimport { Slider as SliderPrimitive } from '@base-ui/react';\nimport { cva, cx, type VariantProps } from 'class-variance-authority';\nimport { useCallback } from 'react';\nimport { Text } from '../text';\nimport styles from './slider.module.css';\n\nconst slider = cva(styles.slider, {\n  variants: {\n    variant: {\n      single: styles['slider-variant-single'],\n      range: styles['slider-variant-range']\n    }\n  },\n  defaultVariants: {\n    variant: 'single'\n  }\n});\n\nexport interface SliderProps\n  extends SliderPrimitive.Root.Props,\n    VariantProps<typeof slider> {\n  label?: string | [string, string];\n  thumbSize?: 'small' | 'large';\n}\n\nfunction SliderRoot({\n  className,\n  variant = 'single',\n  label,\n  thumbSize = 'large',\n  ...props\n}: SliderProps) {\n  const isRange = variant === 'range';\n  const isThumbSmall = thumbSize === 'small';\n\n  const getLabel = useCallback(\n    (index: number) => {\n      if (!label) return undefined;\n      if (typeof label === 'string') return label;\n      return label[index];\n    },\n    [label]\n  );\n\n  const thumbCount = isRange ? 2 : 1;\n\n  return (\n    <SliderPrimitive.Root\n      className={slider({ variant, className })}\n      thumbAlignment='edge'\n      {...props}\n    >\n      <SliderPrimitive.Control className={styles.control}>\n        <SliderPrimitive.Track className={styles.track}>\n          <SliderPrimitive.Indicator className={styles.indicator} />\n          {Array.from({ length: thumbCount }).map((_, i) => (\n            <SliderPrimitive.Thumb\n              key={i}\n              index={isRange ? i : undefined}\n              className={cx(styles.thumb)}\n              aria-label={\n                getLabel(i) || (isRange ? `Thumb ${i + 1}` : 'Slider thumb')\n              }\n              data-size={thumbSize}\n            >\n              {isThumbSmall ? (\n                <div className={styles.thumbSmall} />\n              ) : (\n                <div className={styles.thumbLarge}>\n                  <div className={styles.thumbLargeLine} />\n                  <div className={styles.thumbLargeLine} />\n                  <div className={styles.thumbLargeLine} />\n                </div>\n              )}\n              {getLabel(i) && (\n                <Text\n                  className={styles.label}\n                  size={isThumbSmall ? 'micro' : 'mini'}\n                  weight='medium'\n                >\n                  {getLabel(i)}\n                </Text>\n              )}\n            </SliderPrimitive.Thumb>\n          ))}\n        </SliderPrimitive.Track>\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n}\n\nSliderRoot.displayName = 'Slider';\n\nexport const Slider = Object.assign(SliderRoot, {\n  Value: SliderPrimitive.Value\n});\n\nSlider.Value.displayName = 'Slider.Value';\n"],"names":[],"mappings":";;;;;;;;;;AAQA;AACE;AACE;AACE;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AASD;AAOE;AACA;AAEA;AAEI;AAAY;;AACmB;AAC/B;AACF;;;AAiDJ;AAEA;;;AAIC;AAED;;"}

package/dist/components/slider/slider.d.ts

@@ -1,21 +1,18 @@
+import { Slider as SliderPrimitive } from '@base-ui/react';
 import { type VariantProps } from 'class-variance-authority';
-import { Slider as SliderPrimitive } from 'radix-ui';
-import { type ComponentPropsWithoutRef } from 'react';
 declare const slider: (props?: ({
-    variant?: "single" | "range" | null | undefined;
+    variant?: "range" | "single" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface SliderProps extends Omit<ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'value' | 'defaultValue' | 'onChange'>, VariantProps<typeof slider> {
-    value?: number | [number, number];
-    defaultValue?: number | [number, number];
-    min?: number;
-    max?: number;
-    step?: number;
+export interface SliderProps extends SliderPrimitive.Root.Props, VariantProps<typeof slider> {
     label?: string | [string, string];
-    onChange?: (value: number | [number, number]) => void;
-    'aria-label'?: string;
-    'aria-valuetext'?: string;
     thumbSize?: 'small' | 'large';
 }
-export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLSpanElement>>;
+declare function SliderRoot({ className, variant, label, thumbSize, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SliderRoot {
+    var displayName: string;
+}
+export declare const Slider: typeof SliderRoot & {
+    Value: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SliderValueProps, "ref"> & import("react").RefAttributes<HTMLOutputElement>>;
+};
 export {};
 //# sourceMappingURL=slider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../components/slider/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAW,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EACL,KAAK,wBAAwB,EAG9B,MAAM,OAAO,CAAC;AAKf,QAAA,MAAM,MAAM;;8EAUV,CAAC;AAEH,MAAM,WAAW,WACf,SAAQ,IAAI,CACR,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EACrD,OAAO,GAAG,cAAc,GAAG,UAAU,CACtC,EACD,YAAY,CAAC,OAAO,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,MAAM,yGA8FlB,CAAC"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../components/slider/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKtE,QAAA,MAAM,MAAM;;8EAUV,CAAC;AAEH,MAAM,WAAW,WACf,SAAQ,eAAe,CAAC,IAAI,CAAC,KAAK,EAChC,YAAY,CAAC,OAAO,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC/B;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,OAAkB,EAClB,KAAK,EACL,SAAmB,EACnB,GAAG,KAAK,EACT,EAAE,WAAW,2CA0Db;kBAhEQ,UAAU;;;AAoEnB,eAAO,MAAM,MAAM;;CAEjB,CAAC"}