@a-type/ui 3.1.1 → 4.0.0-beta.2

package/dist/esm/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../../src/components/slider/Slider.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAG/C,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CACtC,eAAe,CAAC,IAAI,EACpB,kGAAkG,EAClG,wEAAwE,CACxE,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,eAAe,CAAC,KAAK,EACrB,8HAA8H,EAC9H,qEAAqE,CACrE,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,eAAe,CAAC,KAAK,EACrB,yEAAyE,EACzE,+DAA+D,CAC/D,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,eAAe,CAAC,KAAK,EACrB,mKAAmK,EACnK,oCAAoC,EACpC,yFAAyF,EACzF,0GAA0G,EAC1G,uCAAuC,EACvC,wCAAwC,CACxC,CAAC;AAOF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAClC,SAAS,MAAM,CAAC,EAQf;QARe,EACf,GAAG,EACH,KAAK,EACL,KAAK,EACL,SAAS,OAIT,EAHG,KAAK,cALO,sCAMf,CADQ;IAIR,OAAO,CACN,MAAC,UAAU,kBACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,KAAK,IAAI,WAAW,KAAK,EAAE,EAAE,SAAS,CAAC,IACnD,KAAK,eAET,KAAC,WAAW,cACX,KAAC,WAAW,kBAAa,KAAK,GAAI,GACrB,EACd,KAAC,WAAW,kBAAa,KAAK,gBAAc,KAAK,GAAI,KACzC,CACb,CAAC;AACH,CAAC,EACD;IACC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,WAAW;IAClB,KAAK,EAAE,WAAW;IAClB,KAAK,EAAE,WAAW;CAClB,CACD,CAAC"}
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../../src/components/slider/Slider.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAmB,MAAM,uBAAuB,CAAC;AAC9E,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAG/C,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC;AAE1C,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CACzC,UAAU,CAAC,OAAO,EAClB,kGAAkG,EAClG,wEAAwE,CACxE,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,UAAU,CAAC,KAAK,EAChB,kHAAkH,EAClH,qEAAqE,CACrE,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,UAAU,CAAC,SAAS,EACpB,yDAAyD,EACzD,yDAAyD,CACzD,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,UAAU,CAAC,KAAK,EAChB,qKAAqK,EACrK,oCAAoC,EACpC,yFAAyF,EACzF,0GAA0G,EAC1G,uCAAuC,EACvC,wCAAwC,CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAKb,EAAE,EAAE;QALS,EAC1B,QAAQ,EACR,KAAK,EACL,SAAS,OAEI,EADV,KAAK,cAJkB,kCAK1B,CADQ;IAER,OAAO,CACN,KAAC,UAAU,oBACN,KAAK,IACT,SAAS,EAAE,IAAI,CAAC,KAAK,IAAI,WAAW,KAAK,EAAE,EAAE,SAAS,CAAC,YAEvD,KAAC,aAAa,cAAE,QAAQ,GAAiB,IAC7B,CACb,CAAC;AACH,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACxB,KAAK,EACL,SAAS,GAIT,EAAE,EAAE,CAAC,CACL,KAAC,MAAM,CAAC,OAAO,IAAC,SAAS,EAAE,SAAS,YACnC,MAAC,WAAW,eACX,KAAC,WAAW,KAAG,EACf,KAAC,WAAW,kBAAa,KAAK,GAAI,IACrB,GACE,CACjB,CAAC;AAQF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAClC,SAAS,MAAM,CAAC,EAAgC;QAAhC,EAAE,KAAK,OAAyB,EAApB,KAAK,cAAjB,SAAmB,CAAF;IAChC,OAAO,CACN,KAAC,UAAU,oBAAK,KAAK,cACpB,KAAC,QAAQ,KAAG,IACA,CACb,CAAC;AACH,CAAC,EACD;IACC,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa;IACtB,KAAK,EAAE,WAAW;IAClB,kCAAkC;IAClC,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,WAAW;IAClB,KAAK,EAAE,UAAU,CAAC,KAAK;IACvB,EAAE,EAAE,QAAQ;CACZ,CACD,CAAC"}

package/dist/esm/components/slider/Slider.stories.d.ts

@@ -2,13 +2,21 @@ import type { StoryObj } from '@storybook/react';
 import { Slider } from './Slider.js';
 declare const meta: {
     title: string;
-    component: (({ ref, label, color, className, ...props }: import("./Slider.js").SliderProps & {
-        ref?: React.Ref<HTMLDivElement>;
-    }) => import("react/jsx-runtime").JSX.Element) & {
-        Root: import("react").FunctionComponent<import("@radix-ui/react-slider").SliderProps & import("react").RefAttributes<HTMLSpanElement>>;
-        Track: import("react").FunctionComponent<import("@radix-ui/react-slider").SliderTrackProps & import("react").RefAttributes<HTMLSpanElement>>;
-        Range: import("react").FunctionComponent<import("@radix-ui/react-slider").SliderRangeProps & import("react").RefAttributes<HTMLSpanElement>>;
-        Thumb: import("react").FunctionComponent<import("@radix-ui/react-slider").SliderThumbProps & import("react").RefAttributes<HTMLSpanElement>>;
+    component: (({ label, ...props }: import("./Slider.js").SliderProps) => import("react/jsx-runtime").JSX.Element) & {
+        Root: <Value extends number | readonly number[]>(props: import("@base-ui/react/slider").SliderRoot.Props<Value> & {
+            ref?: import("react").Ref<HTMLDivElement>;
+        }) => import("react").JSX.Element;
+        Base: ({ children, color, className, ...props }: import("./Slider.js").SliderProps) => import("react/jsx-runtime").JSX.Element;
+        Control: import("react").FunctionComponent<import("@base-ui/react/slider").SliderControlProps & import("react").RefAttributes<HTMLDivElement>>;
+        Track: import("react").FunctionComponent<import("@base-ui/react/slider").SliderTrackProps & import("react").RefAttributes<HTMLElement>>;
+        Range: import("react").FunctionComponent<import("@base-ui/react/slider").SliderIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+        Indicator: import("react").FunctionComponent<import("@base-ui/react/slider").SliderIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+        Thumb: import("react").FunctionComponent<import("@base-ui/react/slider").SliderThumbProps & import("react").RefAttributes<HTMLDivElement>>;
+        Value: import("react").ForwardRefExoticComponent<import("@base-ui/react/slider").SliderValueProps & import("react").RefAttributes<HTMLOutputElement>>;
+        Ui: ({ label, className, }: {
+            label?: string;
+            className?: string;
+        }) => import("react/jsx-runtime").JSX.Element;
     };
     argTypes: {};
     parameters: {
@@ -22,3 +30,4 @@ type Story = StoryObj<typeof Slider>;
 export declare const Default: Story;
 export declare const Vertical: Story;
 export declare const CustomStyles: Story;
+export declare const WithValue: Story;

package/dist/esm/components/slider/Slider.stories.js

@@ -25,17 +25,30 @@ export const CustomStyles = {
         style: { height: '200px' },
         min: -2,
         max: 2,
-        defaultValue: [0],
+        defaultValue: 0,
     },
     render: (args) => {
-        const [value, setValue] = useState([0]);
-        return (_jsxs(Slider.Root, Object.assign({ value: value, onValueChange: setValue }, args, { children: [_jsx(Slider.Track, { className: clsx({
-                        'bg-attention': value[0] === -2,
-                        'bg-attention-light': value[0] === -1,
-                        'bg-main': value[0] === 0,
-                        'bg-success-light': value[0] === 1,
-                        'bg-success': value[0] === 2,
-                    }) }), _jsx(Slider.Thumb, { className: "w-24px h-24px", children: _jsx("div", { className: "text-lg", children: ['😭', '😔', '😐', '😊', '😃'][value[0] + 2] }) })] })));
+        const [value, setValue] = useState(0);
+        return (_jsx(Slider.Base, Object.assign({ value: value, onValueChange: (v) => {
+                if (Array.isArray(v)) {
+                    setValue(v[0]);
+                }
+                else {
+                    setValue(v);
+                }
+            }, color: value < 0 ? 'attention' : value > 0 ? 'success' : 'primary' }, args, { children: _jsxs(Slider.Track, { className: clsx({
+                    'bg-attention': value === -2,
+                    'bg-attention-light': value === -1,
+                    'bg-main': value === 0,
+                    'bg-success-light': value === 1,
+                    'bg-success': value === 2,
+                }), children: [_jsx(Slider.Indicator, {}), _jsx(Slider.Thumb, { className: "w-24px h-24px", children: _jsx("div", { className: "text-lg", children: ['😭', '😔', '😐', '😊', '😃'][value + 2] }) })] }) })));
     },
 };
+export const WithValue = {
+    args: {
+        defaultValue: 50,
+    },
+    render: (args) => (_jsxs(Slider.Root, Object.assign({}, args, { children: [_jsx(Slider.Ui, {}), _jsx(Slider.Value, {})] }))),
+};
 //# sourceMappingURL=Slider.stories.js.map

package/dist/esm/components/slider/Slider.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.stories.js","sourceRoot":"","sources":["../../../../src/components/slider/Slider.stories.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC6B,CAAC;AAEhC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AAEjC,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC9B,IAAI,EAAE;QACL,WAAW,EAAE,UAAU;QACvB,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE;KAC1B;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IAClC,IAAI,EAAE;QACL,WAAW,EAAE,UAAU;QACvB,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE;QAC1B,GAAG,EAAE,CAAC,CAAC;QACP,GAAG,EAAE,CAAC;QACN,YAAY,EAAE,CAAC,CAAC,CAAC;KACjB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACxC,OAAO,CACN,MAAC,MAAM,CAAC,IAAI,kBAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,IAAM,IAAI,eAC3D,KAAC,MAAM,CAAC,KAAK,IACZ,SAAS,EAAE,IAAI,CAAC;wBACf,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;wBAC/B,oBAAoB,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;wBACrC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;wBACzB,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;wBAClC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;qBAC5B,CAAC,GACD,EACF,KAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAC,eAAe,YACtC,cAAK,SAAS,EAAC,SAAS,YACtB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GACxC,GACQ,KACF,CACd,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"Slider.stories.js","sourceRoot":"","sources":["../../../../src/components/slider/Slider.stories.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC6B,CAAC;AAEhC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AAEjC,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC9B,IAAI,EAAE;QACL,WAAW,EAAE,UAAU;QACvB,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE;KAC1B;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IAClC,IAAI,EAAE;QACL,WAAW,EAAE,UAAU;QACvB,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE;QAC1B,GAAG,EAAE,CAAC,CAAC;QACP,GAAG,EAAE,CAAC;QACN,YAAY,EAAE,CAAC;KACf;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;QAC9C,OAAO,CACN,KAAC,MAAM,CAAC,IAAI,kBACX,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;gBACpB,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;oBACtB,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAChB,CAAC;qBAAM,CAAC;oBACP,QAAQ,CAAC,CAAW,CAAC,CAAC;gBACvB,CAAC;YACF,CAAC,EACD,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAC9D,IAAI,cAER,MAAC,MAAM,CAAC,KAAK,IACZ,SAAS,EAAE,IAAI,CAAC;oBACf,cAAc,EAAE,KAAK,KAAK,CAAC,CAAC;oBAC5B,oBAAoB,EAAE,KAAK,KAAK,CAAC,CAAC;oBAClC,SAAS,EAAE,KAAK,KAAK,CAAC;oBACtB,kBAAkB,EAAE,KAAK,KAAK,CAAC;oBAC/B,YAAY,EAAE,KAAK,KAAK,CAAC;iBACzB,CAAC,aAEF,KAAC,MAAM,CAAC,SAAS,KAAG,EACpB,KAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAC,eAAe,YACtC,cAAK,SAAS,EAAC,SAAS,YACtB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAE,KAAgB,GAAG,CAAC,CAAC,GACjD,GACQ,IACD,IACF,CACd,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC/B,IAAI,EAAE;QACL,YAAY,EAAE,EAAE;KAChB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACjB,MAAC,MAAM,CAAC,IAAI,oBAAK,IAAI,eACpB,KAAC,MAAM,CAAC,EAAE,KAAG,EACb,KAAC,MAAM,CAAC,KAAK,KAAG,KACH,CACd;CACD,CAAC"}

package/dist/esm/components/switch/Switch.d.ts

@@ -1,7 +1,7 @@
-import { SwitchProps } from '@radix-ui/react-switch';
-export declare const Switch: (({ ref, ...props }: SwitchProps & {
+import { SwitchRootProps } from '@base-ui/react/switch';
+export declare const Switch: (({ ref, ...props }: SwitchRootProps & {
     ref?: React.Ref<HTMLButtonElement>;
 }) => import("react/jsx-runtime").JSX.Element) & {
-    Root: import("react").FunctionComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Thumb: import("react").FunctionComponent<import("@radix-ui/react-switch").SwitchThumbProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Root: import("react").FunctionComponent<SwitchRootProps & import("react").RefAttributes<HTMLElement>>;
+    Thumb: import("react").FunctionComponent<import("@base-ui/react/switch").SwitchThumbProps & import("react").RefAttributes<HTMLSpanElement>>;
 };

package/dist/esm/components/switch/Switch.js

@@ -11,10 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Root, Thumb } from '@radix-ui/react-switch';
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
 import { withClassName } from '../../hooks/withClassName.js';
-const SwitchRoot = withClassName(Root, 'layer-components:unset layer-components:transition-all layer-components:cursor-pointer layer-components:w-42px layer-components:h-25px layer-components:bg-white layer-components:rounded-lg layer-components:relative layer-components:border-default layer-components:flex-shrink-0 layer-components:shadow-sm', 'layer-components:[&[data-state=checked]]:bg-main', 'layer-components:hover:[&:not(:disabled)]:bg-lighten-2 layer-components:hover:[&:not(:disabled)]:ring-2 layer-components:hover:[&:not(:disabled)]:ring-bg', 'layer-components:active:[&:not(:disabled)]:bg-darken-1 layer-components:active:[&:not(:disabled)]:ring-4', 'layer-components:focus:outline-none', 'layer-components:focus-visible:ring-4 layer-components:focus-visible:ring-accent layer-components:focus-visible:outline-off');
-const SwitchThumb = withClassName(Thumb, 'layer-components:block layer-components:w-21px layer-components:h-21px layer-components:bg-white layer-components:rounded-lg layer-components:border-default layer-components:transition-transform layer-components:will-change-transform', 'layer-components:[&[data-state=checked]]:translate-x-18px');
+const SwitchRoot = withClassName(BaseSwitch.Root, 'layer-components:unset layer-components:appearance-none layer-components:flex layer-components:transition-all layer-components:cursor-pointer layer-components:w-42px layer-components:h-25px layer-components:p-2px layer-components:bg-gray-light layer-components:rounded-lg layer-components:relative layer-components:border-default layer-components:flex-shrink-0 layer-components:shadow-sm', 'layer-components:data-[checked]:bg-main', 'layer-components:hover:[&:not(:disabled)]:bg-lighten-2 layer-components:hover:[&:not(:disabled)]:ring-2 layer-components:hover:[&:not(:disabled)]:ring-bg', 'layer-components:active:[&:not(:disabled)]:bg-darken-1 layer-components:active:[&:not(:disabled)]:ring-4', 'layer-components:focus:outline-none', 'layer-components:focus-visible:ring-4 layer-components:focus-visible:ring-accent layer-components:focus-visible:outline-off');
+const SwitchThumb = withClassName(BaseSwitch.Thumb, 'layer-components:block layer-components:aspect-1 layer-components:h-full layer-components:bg-white layer-components:rounded-lg layer-components:border-default layer-components:transition-transform layer-components:will-change-transform', 'layer-components:data-[checked]:translate-x-1rem', 'layer-components:data-[checked]:before:content-["✓"] layer-components:data-[checked]:before:flex layer-components:data-[checked]:before:items-center layer-components:data-[checked]:before:justify-center layer-components:data-[checked]:before:absolute layer-components:data-[checked]:before:top-0 layer-components:data-[checked]:before:left-0 layer-components:data-[checked]:before:w-full layer-components:data-[checked]:before:h-full layer-components:data-[checked]:before:text-xs layer-components:data-[checked]:before:text-main-ink');
 export const Switch = Object.assign(function Switch(_a) {
     var { ref } = _a, props = __rest(_a, ["ref"]);
     return (_jsx(SwitchRoot, Object.assign({}, props, { ref: ref, children: _jsx(SwitchThumb, {}) })));

package/dist/esm/components/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAe,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,UAAU,GAAG,aAAa,CAC/B,IAAI,EACJ,0IAA0I,EAC1I,kDAAkD,EAClD,yEAAyE,EACzE,iEAAiE,EACjE,qCAAqC,EACrC,iEAAiE,CACjE,CAAC;AAEF,MAAM,WAAW,GAAG,aAAa,CAChC,KAAK,EACL,sHAAsH,EACtH,2DAA2D,CAC3D,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAClC,SAAS,MAAM,CAAC,EAKf;QALe,EACf,GAAG,OAIH,EAHG,KAAK,cAFO,OAGf,CADQ;IAIR,OAAO,CACN,KAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,YAC9B,KAAC,WAAW,KAAG,IACH,CACb,CAAC;AACH,CAAC,EACD;IACC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,WAAW;CAClB,CACD,CAAC"}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAmB,MAAM,uBAAuB,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,UAAU,GAAG,aAAa,CAC/B,UAAU,CAAC,IAAI,EACf,0KAA0K,EAC1K,yCAAyC,EACzC,yEAAyE,EACzE,iEAAiE,EACjE,qCAAqC,EACrC,iEAAiE,CACjE,CAAC;AAEF,MAAM,WAAW,GAAG,aAAa,CAChC,UAAU,CAAC,KAAK,EAChB,wHAAwH,EACxH,oDAAoD,EACpD,mJAAmJ,CACnJ,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAClC,SAAS,MAAM,CAAC,EAKf;QALe,EACf,GAAG,OAIH,EAHG,KAAK,cAFO,OAGf,CADQ;IAIR,OAAO,CACN,KAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,YAC9B,KAAC,WAAW,KAAG,IACH,CACb,CAAC;AACH,CAAC,EACD;IACC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,WAAW;CAClB,CACD,CAAC"}

package/dist/esm/components/switch/Switch.stories.d.ts

@@ -0,0 +1,27 @@
+import type { StoryObj } from '@storybook/react';
+import { Switch } from './Switch.js';
+declare const meta: {
+    title: string;
+    component: (({ ref, ...props }: import("@base-ui/react/switch").SwitchRootProps & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }) => import("react/jsx-runtime").JSX.Element) & {
+        Root: import("react").FunctionComponent<import("@base-ui/react/switch").SwitchRootProps & import("react").RefAttributes<HTMLElement>>;
+        Thumb: import("react").FunctionComponent<import("@base-ui/react/switch").SwitchThumbProps & import("react").RefAttributes<HTMLSpanElement>>;
+    };
+    argTypes: {
+        checked: {
+            control: "boolean";
+        };
+        disabled: {
+            control: "boolean";
+        };
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Switch>;
+export declare const Default: Story;

package/dist/esm/components/switch/Switch.stories.js

@@ -0,0 +1,21 @@
+// @unocss-include
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch } from './Switch.js';
+const meta = {
+    title: 'Components/Switch',
+    component: Switch,
+    argTypes: {
+        checked: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render(args) {
+        return _jsx(Switch, Object.assign({}, args));
+    },
+};
+//# sourceMappingURL=Switch.stories.js.map

package/dist/esm/components/switch/Switch.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.stories.js","sourceRoot":"","sources":["../../../../src/components/switch/Switch.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE;QACT,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC/B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAChC;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC6B,CAAC;AAEhC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,KAAC,MAAM,oBAAK,IAAI,EAAI,CAAC;IAC7B,CAAC;CACD,CAAC"}

package/dist/esm/components/tabs/tabs.d.ts

@@ -1,14 +1,18 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-export declare const TabsRoot: import("react").FunctionComponent<TabsPrimitive.TabsProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const TabsList: import("react").FunctionComponent<TabsPrimitive.TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const TabsTriggerBase: import("react").FunctionComponent<TabsPrimitive.TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export interface TabsTriggerProps extends Omit<TabsPrimitive.TabsTriggerProps, 'color'> {
-    color?: 'default' | 'primary';
+import { TabsListProps, TabsTabProps } from '@base-ui/react/tabs';
+export declare const TabsRoot: import("react").FunctionComponent<import("@base-ui/react/tabs").TabsRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: import("react").FunctionComponent<TabsTabProps & import("react").RefAttributes<Element>>;
+export declare const TabsIndicator: import("react").FunctionComponent<import("@base-ui/react/tabs").TabsIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface TabsTriggerProps extends Omit<TabsTabProps, 'color'> {
 }
-export declare const TabsTrigger: ({ className, color, ...props }: TabsTriggerProps) => import("react/jsx-runtime").JSX.Element;
-export declare const TabsContent: import("react").FunctionComponent<TabsPrimitive.TabsContentProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Tabs: import("react").FunctionComponent<TabsPrimitive.TabsProps & import("react").RefAttributes<HTMLDivElement>> & {
-    List: import("react").FunctionComponent<TabsPrimitive.TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
-    Trigger: ({ className, color, ...props }: TabsTriggerProps) => import("react/jsx-runtime").JSX.Element;
-    Content: import("react").FunctionComponent<TabsPrimitive.TabsContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsContent: import("react").FunctionComponent<import("@base-ui/react/tabs").TabsPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsList: ({ children, className, color, ...props }: TabsListProps & {
+    color?: "gray" | "primary";
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: import("react").FunctionComponent<import("@base-ui/react/tabs").TabsRootProps & import("react").RefAttributes<HTMLDivElement>> & {
+    List: ({ children, className, color, ...props }: TabsListProps & {
+        color?: "gray" | "primary";
+    }) => import("react/jsx-runtime").JSX.Element;
+    Trigger: import("react").FunctionComponent<TabsTabProps & import("react").RefAttributes<Element>>;
+    Content: import("react").FunctionComponent<import("@base-ui/react/tabs").TabsPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+    Indicator: import("react").FunctionComponent<import("@base-ui/react/tabs").TabsIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
 };

package/dist/esm/components/tabs/tabs.js

@@ -10,25 +10,23 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs as TabsPrimitive, } from '@base-ui/react/tabs';
 import clsx from 'clsx';
 import { withClassName } from '../../hooks/withClassName.js';
 export const TabsRoot = withClassName(TabsPrimitive.Root, '');
-export const TabsList = withClassName(TabsPrimitive.List, 'layer-components:flex layer-components:flex-row layer-components:items-start layer-components:gap-2', 'layer-components:border-solid layer-components:border-thin layer-components:border-fg layer-components:rounded-xl', 'layer-components:shadow-sm layer-components:bg-white', 'layer-components:overflow-x-auto layer-components:overflow-unstable layer-components:w-max-content layer-components:max-w-full');
-export const TabsTriggerBase = withClassName(TabsPrimitive.Trigger, 'layer-components:flex layer-components:flex-row layer-components:items-center layer-components:justify-center layer-components:gap-2 layer-components:py-xs layer-components:px-lg', 'layer-components:transition-all layer-components:cursor-pointer layer-components:select-none', 'layer-components:text-center layer-components:text-md layer-components:font-semibold layer-components:color-gray-ink layer-components:font-inherit layer-components:text-nowrap', 'layer-components:min-w-100px layer-components:min-h-touch layer-components:flex-shrink-0', 'layer-components:bg-transparent layer-components:border layer-components:border-transparent layer-components:rounded-lg', 'layer-components:hover:[&[data-state=inactive]]:bg-gray-light layer-components:hover:[&[data-state=inactive]]:bg-darken-1 layer-components:hover:[&[data-state=inactive]]:ring-4 layer-components:hover:[&[data-state=inactive]]:ring-bg', 'layer-components:focus-visible:bg-darken-1 layer-components:focus-visible:ring-4 layer-components:focus-visible:ring-accent layer-components:focus-visible:outline-off layer-components:focus-visible:border layer-components:focus-visible:border-black', '[&[data-state=active]]:cursor-default [&[data-state=active]]:border-gray-dark [&[data-state=active]]:relative [&[data-state=active]]:z-1');
-const colorClasses = {
-    default: 'layer-variants:[&[data-state=active]]:bg-gray',
-    primary: 'layer-variants:[&[data-state=active]]:bg-main-light',
+const StyledTabsList = withClassName(TabsPrimitive.List, 'layer-components:flex layer-components:flex-row layer-components:items-start layer-components:gap-2 layer-components:relative', 'layer-components:border-solid layer-components:border-thin layer-components:border-fg layer-components:rounded-xl', 'layer-components:shadow-sm layer-components:bg-white', 'layer-components:overflow-x-auto layer-components:overflow-y-clip layer-components:overflow-unstable layer-components:w-max-content layer-components:max-w-full');
+export const TabsTrigger = withClassName(TabsPrimitive.Tab, 'layer-components:flex layer-components:flex-row layer-components:items-center layer-components:justify-center layer-components:gap-2 layer-components:py-xs layer-components:px-lg layer-components:relative layer-components:z-1', 'layer-components:transition-all layer-components:cursor-pointer layer-components:select-none', 'layer-components:text-center layer-components:text-md layer-components:font-semibold layer-components:color-gray-ink layer-components:font-inherit layer-components:text-nowrap', 'layer-components:min-w-100px layer-components:min-h-touch layer-components:flex-shrink-0', 'layer-components:bg-transparent layer-components:border layer-components:border-transparent layer-components:rounded-lg', 'layer-components:hover:[&[data-state=inactive]]:bg-gray-light layer-components:hover:[&[data-state=inactive]]:bg-darken-1 layer-components:hover:[&[data-state=inactive]]:ring-4 layer-components:hover:[&[data-state=inactive]]:ring-bg', 'layer-components:focus-visible:bg-darken-1 layer-components:focus-visible:ring-4 layer-components:focus-visible:ring-accent layer-components:focus-visible:outline-off layer-components:focus-visible:border layer-components:focus-visible:border-black', 'data-[active]:cursor-default');
+export const TabsIndicator = withClassName(TabsPrimitive.Indicator, 'layer-components:absolute layer-components:block layer-components:[transition-property:transform,width,color] layer-components:duration-300 layer-components:ease-out layer-components:rounded-full layer-components:b-gray-dark layer-components:bg-main-light', 'layer-components:left-0 layer-components:top-1/2 layer-components:translate-x-[--active-tab-left] layer-components:-translate-y-1/2 layer-components:w-[--active-tab-width] layer-components:h-full layer-components:z-0', 'layer-components:b-1 layer-components:b-gray-dark');
+export const TabsContent = withClassName(TabsPrimitive.Panel, 'layer-components:focus:outline-none layer-components:focus-visible:outline-none layer-components:focus-visible:ring-inset layer-components:focus-visible:ring-2 layer-components:focus-visible:ring-gray');
+export const TabsList = (_a) => {
+    var { children, className, color = 'gray' } = _a, props = __rest(_a, ["children", "className", "color"]);
+    return (_jsxs(StyledTabsList, Object.assign({}, props, { className: clsx(`palette-${color}`, className), children: [children, _jsx(TabsIndicator, {})] })));
 };
-export const TabsTrigger = (_a) => {
-    var { className, color = 'primary' } = _a, props = __rest(_a, ["className", "color"]);
-    return (_jsx(TabsTriggerBase, Object.assign({ className: clsx(colorClasses[color], `btn-color-${color}`, className) }, props)));
-};
-export const TabsContent = withClassName(TabsPrimitive.Content, 'layer-components:focus:outline-none layer-components:focus-visible:outline-none layer-components:focus-visible:ring-inset layer-components:focus-visible:ring-2 layer-components:focus-visible:ring-gray');
 export const Tabs = Object.assign(TabsRoot, {
     List: TabsList,
     Trigger: TabsTrigger,
     Content: TabsContent,
+    Indicator: TabsIndicator,
 });
 //# sourceMappingURL=tabs.js.map

package/dist/esm/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAE9D,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,aAAa,CAAC,IAAI,EAClB,oDAAoD,EACpD,kEAAkE,EAClE,uCAAuC,EACvC,+EAA+E,CAC/E,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAC3C,aAAa,CAAC,OAAO,EACrB,gFAAgF,EAChF,8DAA8D,EAC9D,8FAA8F,EAC9F,0DAA0D,EAC1D,wEAAwE,EACxE,4FAA4F,EAC5F,iGAAiG,EACjG,uEAAuE,CACvE,CAAC;AAEF,MAAM,YAAY,GAAG;IACpB,OAAO,EAAE,iDAAiD;IAC1D,OAAO,EAAE,uDAAuD;CAChE,CAAC;AAOF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAIT,EAAE,EAAE;QAJK,EAC3B,SAAS,EACT,KAAK,GAAG,SAAS,OAEC,EADf,KAAK,cAHmB,sBAI3B,CADQ;IACe,OAAA,CACvB,KAAC,eAAe,kBACf,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,aAAa,KAAK,EAAE,EAAE,SAAS,CAAC,IACjE,KAAK,EACR,CACF,CAAA;CAAA,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,aAAa,CAAC,OAAO,EACrB,gGAAgG,CAChG,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IAC3C,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,WAAW;CACpB,CAAC,CAAC"}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAEN,IAAI,IAAI,aAAa,GAErB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAE9D,MAAM,cAAc,GAAG,aAAa,CACnC,aAAa,CAAC,IAAI,EAClB,6DAA6D,EAC7D,kEAAkE,EAClE,uCAAuC,EACvC,+FAA+F,CAC/F,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,aAAa,CAAC,GAAG,EACjB,6FAA6F,EAC7F,8DAA8D,EAC9D,8FAA8F,EAC9F,0DAA0D,EAC1D,wEAAwE,EACxE,4FAA4F,EAC5F,iGAAiG,EACjG,gCAAgC,CAChC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CACzC,aAAa,CAAC,SAAS,EACvB,4IAA4I,EAC5I,sHAAsH,EACtH,oCAAoC,CACpC,CAAC;AAIF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,aAAa,CAAC,KAAK,EACnB,gGAAgG,CAChG,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAOxB,EAAE,EAAE;QAPoB,EACxB,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,MAAM,OAId,EAHG,KAAK,cAJgB,kCAKxB,CADQ;IAGH,OAAA,CACL,MAAC,cAAc,oBAAK,KAAK,IAAE,SAAS,EAAE,IAAI,CAAC,WAAW,KAAK,EAAE,EAAE,SAAS,CAAC,aACvE,QAAQ,EACT,KAAC,aAAa,KAAG,KACD,CACjB,CAAA;CAAA,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IAC3C,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,WAAW;IACpB,SAAS,EAAE,aAAa;CACxB,CAAC,CAAC"}

package/dist/esm/components/tabs/tabs.stories.js

@@ -7,7 +7,7 @@ const meta = {
     argTypes: {
         color: {
             control: 'select',
-            options: ['default', 'primary'],
+            options: ['gray', 'primary'],
         },
     },
     parameters: {
@@ -18,13 +18,13 @@ export default meta;
 export const Default = {
     render: (args) => {
         const [value, setValue] = useState('tab1');
-        return (_jsxs(TabsRoot, { value: value, onValueChange: setValue, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "tab1", color: args.color, children: "Tab 1" }), _jsx(TabsTrigger, { value: "tab2", color: args.color, children: "Tab 2 (long)" }), _jsx(TabsTrigger, { value: "tab3", color: args.color, children: "Tab 3" })] }), _jsx(TabsContent, { value: "tab1", children: _jsx("div", { children: "Tab 1 content" }) }), _jsx(TabsContent, { value: "tab2", children: _jsx("div", { children: "Tab 2 content" }) }), _jsx(TabsContent, { value: "tab3", children: _jsx("div", { children: "Tab 3 content" }) })] }));
+        return (_jsxs(TabsRoot, { value: value, onValueChange: setValue, children: [_jsxs(TabsList, { color: args.color, children: [_jsx(TabsTrigger, { value: "tab1", children: "Tab 1" }), _jsx(TabsTrigger, { value: "tab2", children: "Tab 2 (long)" }), _jsx(TabsTrigger, { value: "tab3", children: "Tab 3" })] }), _jsx(TabsContent, { value: "tab1", children: _jsx("div", { children: "Tab 1 content" }) }), _jsx(TabsContent, { value: "tab2", children: _jsx("div", { children: "Tab 2 content" }) }), _jsx(TabsContent, { value: "tab3", children: _jsx("div", { children: "Tab 3 content" }) })] }));
     },
 };
 export const WithManyTabs = {
     render: (args) => {
         const [value, setValue] = useState('tab1');
-        return (_jsxs(TabsRoot, { value: value, onValueChange: setValue, children: [_jsx(TabsList, { children: Array.from({ length: 20 }).map((_, i) => (_jsxs(TabsTrigger, { value: `tab${i + 1}`, color: args.color, children: ["Tab ", i + 1] }, i))) }), Array.from({ length: 20 }).map((_, i) => (_jsx(TabsContent, { value: `tab${i + 1}`, children: _jsxs("div", { children: ["Tab ", i + 1, " content"] }) }, i)))] }));
+        return (_jsxs(TabsRoot, { value: value, onValueChange: setValue, children: [_jsx(TabsList, { color: args.color, children: Array.from({ length: 20 }).map((_, i) => (_jsxs(TabsTrigger, { value: `tab${i + 1}`, children: ["Tab ", i + 1] }, i))) }), Array.from({ length: 20 }).map((_, i) => (_jsx(TabsContent, { value: `tab${i + 1}`, children: _jsxs("div", { children: ["Tab ", i + 1, " content"] }) }, i)))] }));
     },
 };
 //# sourceMappingURL=tabs.stories.js.map

package/dist/esm/components/tabs/tabs.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEzE,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;SAC/B;KACD;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC3C,OAAO,CACN,MAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,aAC9C,MAAC,QAAQ,eACR,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,sBAE7B,EACd,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,6BAE7B,EACd,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,sBAE7B,IACJ,EACX,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,YACxB,0CAAwB,GACX,EACd,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,YACxB,0CAAwB,GACX,EACd,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,YACxB,0CAAwB,GACX,IACJ,CACX,CAAC;IACH,CAAC;CACe,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAU;IAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC3C,OAAO,CACN,MAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,aAC9C,KAAC,QAAQ,cACP,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACzC,MAAC,WAAW,IAAS,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,qBACtD,CAAC,GAAG,CAAC,KADO,CAAC,CAEL,CACd,CAAC,GACQ,EACV,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACzC,KAAC,WAAW,IAAS,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,EAAE,YACxC,kCAAU,CAAC,GAAG,CAAC,gBAAe,IADb,CAAC,CAEL,CACd,CAAC,IACQ,CACX,CAAC;IACH,CAAC;CACe,CAAC"}
+{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEzE,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC;SAC5B;KACD;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC3C,OAAO,CACN,MAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,aAC9C,MAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,aAC1B,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,sBAAoB,EAC7C,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,6BAA2B,EACpD,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,sBAAoB,IACnC,EACX,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,YACxB,0CAAwB,GACX,EACd,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,YACxB,0CAAwB,GACX,EACd,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,YACxB,0CAAwB,GACX,IACJ,CACX,CAAC;IACH,CAAC;CACe,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAU;IAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC3C,OAAO,CACN,MAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,aAC9C,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,YACzB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACzC,MAAC,WAAW,IAAS,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,EAAE,qBACnC,CAAC,GAAG,CAAC,KADO,CAAC,CAEL,CACd,CAAC,GACQ,EACV,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACzC,KAAC,WAAW,IAAS,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,EAAE,YACxC,kCAAU,CAAC,GAAG,CAAC,gBAAe,IADb,CAAC,CAEL,CACd,CAAC,IACQ,CACX,CAAC;IACH,CAAC;CACe,CAAC"}

package/dist/esm/components/textArea/TextArea.d.ts

@@ -1,13 +1,13 @@
-import { HTMLProps } from 'react';
-export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'ref'> {
+import { InputProps } from '@base-ui/react/input';
+export interface TextAreaProps extends InputProps {
     className?: string;
     autoSize?: boolean;
     autoSelect?: boolean;
     padBottomPixels?: number;
     placeholders?: string[];
     placeholdersIntervalMs?: number;
-    onValueChange?: (value: string) => void;
+    rows?: number;
 }
 export declare const TextArea: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels, onChange, placeholder, placeholders, placeholdersIntervalMs, onValueChange, ...rest }: TextAreaProps & {
-    ref?: React.Ref<HTMLTextAreaElement>;
+    ref?: React.Ref<any>;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/textArea/TextArea.js

@@ -12,8 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from '@base-ui/react/input';
 import classNames from 'clsx';
-import { useCallback, useLayoutEffect, useRef, useState, } from 'react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import useMergedRef from '../../hooks/useMergedRef.js';
 import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
 import { inputClassName } from '../input/index.js';
@@ -37,13 +38,10 @@ export const TextArea = function TextArea(_a) {
             }
         }
     }, [autoSize, padBottomPixels, finalValue]);
-    const handleChange = useCallback((e) => {
-        setInnerValue(e.target.value);
-        if (onChange) {
-            onChange(e);
-        }
+    const handleValueChange = useCallback((value, eventDetails) => {
+        setInnerValue(value);
         if (onValueChange) {
-            onValueChange(e.target.value);
+            onValueChange(value, eventDetails);
         }
     }, [onChange, onValueChange]);
     const handleFocus = useCallback((e) => {
@@ -55,9 +53,9 @@ export const TextArea = function TextArea(_a) {
         }
     }, [autoSelect, onFocus]);
     const randomPlaceholder = useRotatingShuffledValue(placeholders !== null && placeholders !== void 0 ? placeholders : [], placeholdersIntervalMs);
-    return (_jsx("textarea", Object.assign({ ref: finalRef, className: classNames(inputClassName, 'layer-components:[font-family:inherit] layer-components:color-inherit layer-components:overflow-hidden layer-components:resize-none', 'layer-variants:rounded-lg layer-variants:px-4 layer-variants:py-4', {
+    return (_jsx(Input, Object.assign({ render: _jsx("textarea", { rows: autoSize ? 1 : rows }), ref: finalRef, className: classNames(inputClassName, 'layer-components:[font-family:inherit] layer-components:color-inherit layer-components:overflow-hidden layer-components:resize-none', 'layer-variants:rounded-lg layer-variants:px-4 layer-variants:py-4', {
             'layer-components:[resize:vertical]': !autoSize,
             'layer-components:[resize:none]': autoSize,
-        }, className), rows: autoSize ? 1 : rows, onChange: handleChange, onFocus: handleFocus, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : randomPlaceholder }, rest)));
+        }, className), onValueChange: handleValueChange, onFocus: handleFocus, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : randomPlaceholder }, rest)));
 };
 //# sourceMappingURL=TextArea.js.map

package/dist/esm/components/textArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/textArea/TextArea.stories.d.ts

@@ -3,7 +3,7 @@ import { TextArea } from './TextArea.js';
 declare const meta: {
     title: string;
     component: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels, onChange, placeholder, placeholders, placeholdersIntervalMs, onValueChange, ...rest }: import("./TextArea.js").TextAreaProps & {
-        ref?: React.Ref<HTMLTextAreaElement>;
+        ref?: React.Ref<any>;
     }) => import("react/jsx-runtime").JSX.Element;
     argTypes: {};
     parameters: {

package/dist/esm/components/toggleGroup/toggleGroup.d.ts

@@ -1,7 +1,6 @@
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-export declare const ToggleGroupRoot: import("react").FunctionComponent<(ToggleGroupPrimitive.ToggleGroupSingleProps | ToggleGroupPrimitive.ToggleGroupMultipleProps) & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ToggleGroupItem: import("react").FunctionComponent<ToggleGroupPrimitive.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
-export type ToggleGroupProps = ToggleGroupPrimitive.ToggleGroupMultipleProps | ToggleGroupPrimitive.ToggleGroupSingleProps;
-export declare const ToggleGroup: import("react").FunctionComponent<(ToggleGroupPrimitive.ToggleGroupSingleProps | ToggleGroupPrimitive.ToggleGroupMultipleProps) & import("react").RefAttributes<HTMLDivElement>> & {
-    Item: import("react").FunctionComponent<ToggleGroupPrimitive.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+import { ToggleGroupProps } from '@base-ui/react/toggle-group';
+export declare const ToggleGroupItem: import("react").FunctionComponent<import("@base-ui/react/toggle").ToggleProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type { ToggleGroupProps };
+export declare const ToggleGroup: import("react").FunctionComponent<ToggleGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: import("react").FunctionComponent<import("@base-ui/react/toggle").ToggleProps & import("react").RefAttributes<HTMLButtonElement>>;
 };

package/dist/esm/components/toggleGroup/toggleGroup.js

@@ -1,8 +1,9 @@
 // @unocss-include
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroupPrimitive, } from '@base-ui/react/toggle-group';
 import { withClassName } from '../../hooks/withClassName.js';
-export const ToggleGroupRoot = withClassName(ToggleGroupPrimitive.Root, 'layer-components:inline-flex layer-components:bg-main-light/20 layer-components:rounded-lg layer-components:gap-sm layer-components:w-fit');
-export const ToggleGroupItem = withClassName(ToggleGroupPrimitive.Item, 'layer-components:rounded-full layer-components:text-nowrap layer-components:transition-all layer-components:color-black layer-components:bg-gray/30 layer-components:py-sm layer-components:px-md layer-components:flex layer-components:items-center layer-components:border-transparent layer-components:border-1 layer-components:border-solid layer-components:justify-center layer-components:cursor-pointer', 'layer-components:hover:bg-lighten-2 layer-components:hover:border-main-ink/20 layer-components:hover:ring-bg layer-components:hover:ring-2', 'layer-components:active:bg-darken-1 layer-components:active:border-main-ink/30 layer-components:active:ring-4', 'layer-components:focus-visible:ring-4 layer-components:focus-visible:ring-accent layer-components:focus-visible:outline-off', 'layer-components:[&[data-state=on]]:bg-main layer-components:[&[data-state=on]]:border-default layer-components:[&[data-state=on]]:shadow-sm layer-components:[&[data-state=on]]:hover:border-default');
+const ToggleGroupRoot = withClassName(ToggleGroupPrimitive, 'layer-components:inline-flex layer-components:bg-main-light/20 layer-components:rounded-lg layer-components:gap-sm layer-components:w-fit');
+export const ToggleGroupItem = withClassName(TogglePrimitive, 'layer-components:rounded-full layer-components:text-nowrap layer-components:transition-all layer-components:color-black layer-components:bg-gray/30 layer-components:py-sm layer-components:px-md layer-components:flex layer-components:items-center layer-components:border-transparent layer-components:border-1 layer-components:border-solid layer-components:justify-center layer-components:cursor-pointer', 'layer-components:hover:bg-lighten-2 layer-components:hover:border-main-ink/20 layer-components:hover:ring-bg layer-components:hover:ring-2', 'layer-components:active:bg-darken-1 layer-components:active:border-main-ink/30 layer-components:active:ring-4', 'layer-components:focus-visible:ring-4 layer-components:focus-visible:ring-accent layer-components:focus-visible:outline-off', 'layer-components:data-[pressed]:bg-main layer-components:data-[pressed]:border-default layer-components:data-[pressed]:shadow-sm layer-components:data-[pressed]:hover:border-default');
 export const ToggleGroup = Object.assign(ToggleGroupRoot, {
     Item: ToggleGroupItem,
 });

package/dist/esm/components/toggleGroup/toggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggleGroup.js","sourceRoot":"","sources":["../../../../src/components/toggleGroup/toggleGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAC3C,oBAAoB,CAAC,IAAI,EACzB,yEAAyE,CACzE,CAAC;AACF,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAC3C,oBAAoB,CAAC,IAAI,EACzB,wLAAwL,EACxL,yEAAyE,EACzE,iEAAiE,EACjE,iEAAiE,EACjE,6FAA6F,CAC7F,CAAC;AAKF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;IACzD,IAAI,EAAE,eAAe;CACrB,CAAC,CAAC"}
+{"version":3,"file":"toggleGroup.js","sourceRoot":"","sources":["../../../../src/components/toggleGroup/toggleGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EACN,WAAW,IAAI,oBAAoB,GAEnC,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,eAAe,GAAG,aAAa,CACpC,oBAAoB,EACpB,yEAAyE,CACzE,CAAC;AACF,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAC3C,eAAe,EACf,wLAAwL,EACxL,yEAAyE,EACzE,iEAAiE,EACjE,iEAAiE,EACjE,yFAAyF,CACzF,CAAC;AAGF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;IACzD,IAAI,EAAE,eAAe;CACrB,CAAC,CAAC"}

package/dist/esm/components/toggleGroup/toggleGroup.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react';
+import { ToggleGroup } from './toggleGroup.js';
+declare const meta: {
+    title: string;
+    component: import("react").FunctionComponent<import("./toggleGroup.js").ToggleGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
+        Item: import("react").FunctionComponent<import("@base-ui/react/toggle").ToggleProps & import("react").RefAttributes<HTMLButtonElement>>;
+    };
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof ToggleGroup>;
+export declare const Default: Story;

package/dist/esm/components/toggleGroup/toggleGroup.stories.js

@@ -0,0 +1,18 @@
+// @unocss-include
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToggleGroup } from './toggleGroup.js';
+const meta = {
+    title: 'Components/ToggleGroup',
+    component: ToggleGroup,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render(args) {
+        return (_jsxs(ToggleGroup, Object.assign({}, args, { children: [_jsx(ToggleGroup.Item, { children: "Option 1" }), _jsx(ToggleGroup.Item, { children: "Option 2" }), _jsx(ToggleGroup.Item, { children: "Option 3" })] })));
+    },
+};
+//# sourceMappingURL=toggleGroup.stories.js.map

package/dist/esm/components/toggleGroup/toggleGroup.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggleGroup.stories.js","sourceRoot":"","sources":["../../../../src/components/toggleGroup/toggleGroup.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACkC,CAAC;AAErC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,WAAW,oBAAK,IAAI,eACpB,KAAC,WAAW,CAAC,IAAI,2BAA4B,EAC7C,KAAC,WAAW,CAAC,IAAI,2BAA4B,EAC7C,KAAC,WAAW,CAAC,IAAI,2BAA4B,KAChC,CACd,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/esm/components/tooltip/Tooltip.d.ts

@@ -1,18 +1,21 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-export interface TooltipContentProps extends TooltipPrimitive.TooltipContentProps {
+import { TooltipPopupProps, TooltipPositionerProps, Tooltip as TooltipPrimitive, TooltipTriggerProps } from '@base-ui/react/tooltip';
+import { ReactElement, ReactNode } from 'react';
+export type * from '@base-ui/react/tooltip';
+export interface TooltipContentProps extends TooltipPopupProps, Omit<TooltipPositionerProps, 'className' | 'style' | 'render'> {
     color?: 'contrast' | 'white' | 'neutral' | 'attention';
 }
-declare function Content({ children, className, color, ...props }: TooltipPrimitive.TooltipContentProps): import("react/jsx-runtime").JSX.Element;
-export declare const TooltipProvider: import("react").FC<TooltipPrimitive.TooltipProviderProps>;
-export interface TooltipProps extends Omit<TooltipPrimitive.TooltipTriggerProps, 'content'> {
-    content: React.ReactNode;
+declare function Content({ children, className, color, render, side, sideOffset, align, alignOffset, anchor, disableAnchorTracking, sticky, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, positionMethod, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
+export declare const TooltipProvider: import("react").FC<import("@base-ui/react/tooltip").TooltipProviderProps>;
+export interface TooltipProps extends Omit<TooltipTriggerProps, 'content' | 'children'>, Pick<TooltipContentProps, 'side' | 'sideOffset' | 'color'> {
+    content: ReactNode;
+    children?: ReactElement;
     open?: boolean;
     disabled?: boolean;
 }
 export declare const Tooltip: (({ ref, content, children, open, disabled, className, sideOffset, side, color, ...rest }: TooltipProps & {
     ref?: React.Ref<HTMLButtonElement>;
-} & Pick<TooltipContentProps, "color" | "sideOffset" | "side">) => import("react/jsx-runtime").JSX.Element) & {
-    Trigger: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    Trigger: TooltipPrimitive.Trigger;
     Content: typeof Content;
+    createHandle: typeof TooltipPrimitive.createHandle;
 };
-export {};

package/dist/esm/components/tooltip/Tooltip.js

@@ -11,23 +11,25 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { Tooltip as TooltipPrimitive, } from '@base-ui/react/tooltip';
 import classNames from 'clsx';
 import { GroupScaleReset } from '../../systems/GroupScale.js';
+import { ArrowSvg } from '../utility/ArrowSvg.js';
 function Content(_a) {
-    var { children, className, color = 'contrast' } = _a, props = __rest(_a, ["children", "className", "color"]);
-    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(GroupScaleReset, { children: _jsxs(TooltipPrimitive.Content, Object.assign({ className: classNames('layer-components:relative layer-components:rounded-sm layer-components:py-2 layer-components:px-3 layer-components:text-sm layer-components:leading-tight layer-components:shadow-sm layer-components:select-none layer-components:hidden layer-components:z-tooltip', '[&[data-state=delayed-open]]:flex', '[&[data-state=instant-open]]:flex', 'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]', 'layer-components:[&[data-state=delayed-open]]:animate-popover-in', {
-                    'layer-variants:bg-black layer-variants:color-white': color === 'contrast',
-                    'layer-variants:bg-white layer-variants:color-black': color === 'white' || color === 'neutral',
-                    'layer-variants:bg-attention-ink layer-variants:color-white': color === 'attention',
-                }, className) }, props, { children: [children, _jsx(TooltipPrimitive.Arrow, { className: "layer-components:arrow" })] })) }) }));
+    var { children, className, color = 'contrast', render, side, sideOffset, align, alignOffset, anchor, disableAnchorTracking, sticky, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, positionMethod } = _a, props = __rest(_a, ["children", "className", "color", "render", "side", "sideOffset", "align", "alignOffset", "anchor", "disableAnchorTracking", "sticky", "arrowPadding", "collisionAvoidance", "collisionBoundary", "collisionPadding", "positionMethod"]);
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(GroupScaleReset, { children: _jsx(TooltipPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, disableAnchorTracking: disableAnchorTracking, sticky: sticky, arrowPadding: arrowPadding, collisionAvoidance: collisionAvoidance, collisionBoundary: collisionBoundary, collisionPadding: collisionPadding, positionMethod: positionMethod, children: _jsxs(TooltipPrimitive.Popup, Object.assign({ render: render, className: classNames('layer-components:relative layer-components:rounded-sm layer-components:py-xs layer-components:px-sm layer-components:text-sm layer-components:leading-tight layer-components:shadow-sm layer-components:select-none layer-components:flex layer-components:transition', 'layer-components:data-[instant]:transition-none', 'layer-components:data-[starting-style]:opacity-0 layer-components:data-[starting-style]:scale-95', 'layer-components:data-[ending-style]:opacity-0 layer-components:data-[ending-style]:scale-95', 'layer-components:transform-origin-[var(--transform-origin)]', {
+                        'layer-variants:bg-black layer-variants:color-white': color === 'contrast',
+                        'layer-variants:bg-white layer-variants:color-black layer-variants:border layer-variants:border-gray': color === 'white' || color === 'neutral',
+                        'layer-variants:bg-attention-ink layer-variants:color-white': color === 'attention',
+                    }, className) }, props, { children: [children, _jsx(TooltipPrimitive.Arrow, { className: "layer-components:arrow", children: _jsx(ArrowSvg, {}) })] })) }) }) }));
 }
 export const TooltipProvider = TooltipPrimitive.Provider;
 export const Tooltip = Object.assign(function Tooltip(_a) {
     var { ref, content, children, open, disabled, className, sideOffset = 12, side, color } = _a, rest = __rest(_a, ["ref", "content", "children", "open", "disabled", "className", "sideOffset", "side", "color"]);
-    return (_jsxs(TooltipPrimitive.Root, { open: open, children: [disabled ? (children) : (_jsx(TooltipPrimitive.TooltipTrigger, Object.assign({ asChild: true, ref: ref }, rest, { children: children }))), _jsx(Content, { color: color, side: side, sideOffset: sideOffset, className: className, children: content })] }));
+    return (_jsxs(TooltipPrimitive.Root, { open: open, children: [disabled ? (children) : (_jsx(TooltipPrimitive.Trigger, Object.assign({ ref: ref }, rest, { render: children }))), _jsx(Content, { color: color, side: side, sideOffset: sideOffset, className: className, children: content })] }));
 }, {
-    Trigger: TooltipPrimitive.TooltipTrigger,
+    Trigger: TooltipPrimitive.Trigger,
     Content,
+    createHandle: TooltipPrimitive.createHandle,
 });
 //# sourceMappingURL=Tooltip.js.map