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

package/dist/cjs/components/select/Select.js

@@ -1,6 +1,5 @@
 // @unocss-include
 "use strict";
-'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -45,117 +44,75 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = exports.NativeSelect = exports.SelectContent = exports.SelectIcon = exports.SelectSeparator = exports.SelectLabel = exports.SelectValue = exports.SelectTrigger = exports.UnstyledSelectTrigger = exports.SelectTriggerBase = exports.selectTriggerClassName = exports.SelectRoot = exports.SelectGroup = exports.SelectItemText = exports.SelectItemIndicator = exports.SelectItemIndicatorRoot = exports.SelectItemRoot = exports.SelectItem = void 0;
+exports.Select = exports.SelectContent = exports.SelectArrow = exports.SelectIcon = exports.SelectSeparator = exports.SelectGroupLabel = exports.SelectValue = exports.SelectTrigger = exports.UnstyledSelectTrigger = exports.SelectTriggerBase = exports.selectTriggerClassName = exports.SelectRoot = exports.SelectGroup = exports.SelectItemText = exports.SelectItemIndicator = exports.SelectItemIndicatorRoot = exports.SelectItemRoot = exports.SelectItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const SelectPrimitive = __importStar(require("@radix-ui/react-select"));
-const clsx_1 = __importDefault(require("clsx"));
-const react_1 = require("react");
+const select_1 = require("@base-ui/react/select");
+const clsx_1 = __importStar(require("clsx"));
 const withClassName_js_1 = require("../../hooks/withClassName.js");
 const GroupScale_js_1 = require("../../systems/GroupScale.js");
 const Button_js_1 = require("../button/Button.js");
 const classes_js_1 = require("../button/classes.js");
 const index_js_1 = require("../icon/index.js");
+const ArrowSvg_js_1 = require("../utility/ArrowSvg.js");
 const SelectItem = (_a) => {
     var { ref: forwardedRef, children, className } = _a, props = __rest(_a, ["ref", "children", "className"]);
-    const isNative = (0, react_1.useContext)(IsNativeContext);
-    if (isNative) {
-        return (0, jsx_runtime_1.jsx)("option", { value: props.value, children: children });
-    }
-    return ((0, jsx_runtime_1.jsxs)(exports.SelectItemRoot, Object.assign({ className: className }, props, { ref: forwardedRef, children: [(0, jsx_runtime_1.jsx)(SelectPrimitive.ItemText, { children: children }), (0, jsx_runtime_1.jsx)(exports.SelectItemIndicator, {})] })));
+    return ((0, jsx_runtime_1.jsxs)(exports.SelectItemRoot, Object.assign({ className: className }, props, { ref: forwardedRef, children: [(0, jsx_runtime_1.jsx)(exports.SelectItemText, { children: children }), (0, jsx_runtime_1.jsx)(exports.SelectItemIndicator, {})] })));
 };
 exports.SelectItem = SelectItem;
-exports.SelectItemRoot = (0, withClassName_js_1.withClassName)(SelectPrimitive.Item, 'layer-components:text-md layer-components:leading-4 layer-components:color-black layer-components:flex layer-components:items-center layer-components:flex-row layer-components:h-36px layer-components:pr-4 layer-components:pl-35px layer-components:min-h-touch-large layer-components:relative layer-components:select-none', 'layer-components:[&[data-disabled]]:color-gray layer-components:[&[data-disabled]]:pointer-events-none [&[data-highlighted]]:outline-none [&[data-highlighted]]:bg-gray-light [&[data-highlighted]]:color-black');
-exports.SelectItemIndicatorRoot = (0, withClassName_js_1.withClassName)(SelectPrimitive.ItemIndicator, 'layer-components:absolute layer-components:left-0 layer-components:w-25px layer-components:inline-flex layer-components:items-center layer-components:justify-center');
-exports.SelectItemIndicator = withNoNativeRender((props) => ((0, jsx_runtime_1.jsx)(exports.SelectItemIndicatorRoot, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "check" }) }))));
-exports.SelectItemText = (0, withClassName_js_1.withClassName)(SelectPrimitive.ItemText, '');
-const SelectGroup = (props) => {
-    const isNative = (0, react_1.useContext)(IsNativeContext);
-    if (isNative) {
-        return ((0, jsx_runtime_1.jsx)("optgroup", { id: props.id, className: props.className, children: props.children }));
-    }
-    return (0, jsx_runtime_1.jsx)(SelectPrimitive.Group, Object.assign({}, props));
-};
-exports.SelectGroup = SelectGroup;
-exports.SelectRoot = SelectPrimitive.Root;
-exports.selectTriggerClassName = (0, clsx_1.default)((0, classes_js_1.getButtonClassName)({}), 'layer-components:([all:unset] inline-flex [&[data-placeholder]]:color-gray-dark)');
-exports.SelectTriggerBase = withNoNativeRender((0, withClassName_js_1.withClassName)(SelectPrimitive.Trigger, exports.selectTriggerClassName));
-exports.UnstyledSelectTrigger = withNoNativeRender(SelectPrimitive.Trigger);
+exports.SelectItemRoot = (0, withClassName_js_1.withClassName)(select_1.Select.Item, 'layer-components:text-md layer-components:leading-4 layer-components:color-black layer-components:flex layer-components:items-center layer-components:flex-row layer-components:h-36px layer-components:pr-4 layer-components:pl-35px layer-components:min-h-touch-large layer-components:relative layer-components:select-none', 'layer-components:[&[data-disabled]]:color-gray layer-components:[&[data-disabled]]:pointer-events-none [&[data-highlighted]]:outline-none [&[data-highlighted]]:bg-gray-light [&[data-highlighted]]:color-black');
+exports.SelectItemIndicatorRoot = (0, withClassName_js_1.withClassName)(select_1.Select.ItemIndicator, 'layer-components:absolute layer-components:left-0 layer-components:w-25px layer-components:inline-flex layer-components:items-center layer-components:justify-center');
+const SelectItemIndicator = (props) => ((0, jsx_runtime_1.jsx)(exports.SelectItemIndicatorRoot, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "check" }) })));
+exports.SelectItemIndicator = SelectItemIndicator;
+exports.SelectItemText = (0, withClassName_js_1.withClassName)(select_1.Select.ItemText, '');
+exports.SelectGroup = select_1.Select.Group;
+exports.SelectRoot = select_1.Select.Root;
+exports.selectTriggerClassName = (0, clsx_1.default)((0, classes_js_1.getButtonClassName)({}), 'layer-components:[all:unset] layer-components:inline-flex layer-components:data-[placeholder]:color-gray-dark');
+exports.SelectTriggerBase = (0, withClassName_js_1.withClassName)(select_1.Select.Trigger, exports.selectTriggerClassName);
+exports.UnstyledSelectTrigger = select_1.Select.Trigger;
 const SelectTrigger = function SelectTrigger(_a) {
-    var { ref, children, asChild } = _a, props = __rest(_a, ["ref", "children", "asChild"]);
-    return ((0, jsx_runtime_1.jsx)(exports.UnstyledSelectTrigger, Object.assign({ asChild: true }, props, { ref: ref, children: (0, jsx_runtime_1.jsx)(Button_js_1.Button, { className: "gap-2 font-normal", asChild: asChild, children: children || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.SelectValue, {}), (0, jsx_runtime_1.jsx)(exports.SelectIcon, {})] })) }) })));
+    var { ref, children, render } = _a, props = __rest(_a, ["ref", "children", "render"]);
+    return ((0, jsx_runtime_1.jsx)(exports.UnstyledSelectTrigger, Object.assign({}, props, { className: "layer-components:font-normal", ref: ref, render: render || (0, jsx_runtime_1.jsx)(Button_js_1.Button, { className: "gap-2 font-normal" }), children: children || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.SelectValue, {}), (0, jsx_runtime_1.jsx)(exports.SelectIcon, {})] })) })));
 };
 exports.SelectTrigger = SelectTrigger;
-exports.SelectValue = withNoNativeRender((0, withClassName_js_1.withClassName)(SelectPrimitive.Value, 'flex flex-row'));
-exports.SelectLabel = withNoNativeRender((0, withClassName_js_1.withClassName)(SelectPrimitive.Label, 'px-25px text-xs leading-6 color-black select-none'));
-exports.SelectSeparator = withNoNativeRender((0, withClassName_js_1.withClassName)(SelectPrimitive.Separator, 'h-1px bg-gray-light m-1'));
-exports.SelectIcon = withNoNativeRender((_a) => {
+exports.SelectValue = (0, withClassName_js_1.withClassName)(select_1.Select.Value, 'flex flex-row');
+exports.SelectGroupLabel = (0, withClassName_js_1.withClassName)(select_1.Select.GroupLabel, 'px-25px text-xs leading-6 color-black select-none');
+exports.SelectSeparator = (0, withClassName_js_1.withClassName)(select_1.Select.Separator, 'h-1px bg-gray-light m-1');
+const SelectIcon = (_a) => {
     var { ref: forwardedRef, className } = _a, props = __rest(_a, ["ref", "className"]);
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, Object.assign({ className: (0, clsx_1.default)('color-inherit ml-auto', className) }, props, { ref: forwardedRef, children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "chevron", className: "w-[12px] h-[12px] relative top-1px" }) })));
-});
+    return ((0, jsx_runtime_1.jsx)(select_1.Select.Icon, Object.assign({ className: (0, clsx_1.default)('color-inherit ml-auto', className) }, props, { ref: forwardedRef, children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "chevron", className: "w-[12px] h-[12px] relative top-1px" }) })));
+};
+exports.SelectIcon = SelectIcon;
+const SelectArrow = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)(select_1.Select.Arrow, Object.assign({ className: (0, clsx_1.clsx)('layer-components:arrow', className) }, props, { children: (0, jsx_runtime_1.jsx)(ArrowSvg_js_1.ArrowSvg, {}) })));
+};
+exports.SelectArrow = SelectArrow;
+const scrollArrowClass = (0, clsx_1.clsx)('layer-components:w-full layer-components:bg-white layer-components:z-1 layer-components:text-center layer-components:cursor-default layer-components:select-none layer-components:rounded-sm layer-components:h-1rem layer-components:text-xs layer-components:flex layer-components:items-center layer-components:justify-center', 'layer-components:before:content-empty layer-components:before:absolute layer-components:before:w-full layer-components:before:h-full layer-components:before:left-0', 'layer-components:data-[direction=up]:data-[side=none]:before:-top-full', 'layer-components:data-[direction=down]:bottom-0 layer-components:data-[direction=down]:data-[side=none]:before:-bottom-full');
 const contentStyle = {
     zIndex: 1001,
     '--local-corner-scale': '1',
 };
 const viewportStyle = { '--local-corner-scale': '0.9' };
-exports.SelectContent = withPassthroughNativeRender((_a) => {
-    var { ref: forwardedRef, children, inDialog, className } = _a, props = __rest(_a, ["ref", "children", "inDialog", "className"]);
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(GroupScale_js_1.GroupScaleReset, { children: (0, jsx_runtime_1.jsxs)(SelectPrimitive.Content, Object.assign({ className: (0, clsx_1.default)('layer-components:overflow-hidden layer-components:bg-white layer-components:rounded-md layer-components:border layer-components:border-solid layer-components:border layer-components:border-black layer-components:z-menu layer-components:shadow-lg', 'layer-components:transform-origin-[var(--radix-select-content-transform-origin)]', 'layer-components:[&[data-state=open]]:animate-popover-in', 'layer-components:[&[data-state=closed]]:animate-popover-out', 'layer-components:min-w-[var(--radix-select-trigger-width)] layer-components:max-h-[var(--radix-select-content-available-height)]', inDialog && 'z-[calc(var(--z-dialog)+1)]', className), style: contentStyle }, props, { ref: forwardedRef, children: [(0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, { className: "flex items-center justify-center h-25px bg-white color-main-dark cursor-default", children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "chevron", className: "rotate-180" }) }), (0, jsx_runtime_1.jsx)(SelectPrimitive.Viewport, { style: viewportStyle, children: children }), (0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollDownButton, { className: "flex items-center justify-center h-25px bg-white color-main-dark cursor-default", children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "chevron" }) })] })) }) }));
-});
-const NativeSelect = (_a) => {
-    var { ref: forwardedRef, className } = _a, props = __rest(_a, ["ref", "className"]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('relative', className), children: [(0, jsx_runtime_1.jsx)("select", Object.assign({ className: (0, clsx_1.default)('appearance-none font-inherit bg-white inline-flex items-center justify-center rounded-lg px-3 py-1 pr-8 text-sm gap-2 color-black border-solid border border-gray hover:border-gray-dark focus:outline-none focus-visible:shadow-focus [&[data-placeholder]]:color-gray-dark') }, props, { ref: forwardedRef })), (0, jsx_runtime_1.jsx)("div", { className: "absolute right-1 top-50% translate-y-[-50%] pointer-events-none", children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "chevron", className: "w-4 h-4 m-2" }) })] }));
-};
-exports.NativeSelect = NativeSelect;
-/**
- * A high-level Select which converts to native on mobile. Use with SelectItem.
- */
-const SelectBase = (_a) => {
-    var { children, value, onValueChange, mobileNative } = _a, rest = __rest(_a, ["children", "value", "onValueChange", "mobileNative"]);
-    const mobile = isMobile();
-    if (mobile && mobileNative) {
-        return ((0, jsx_runtime_1.jsx)(IsNativeContext.Provider, { value: true, children: (0, jsx_runtime_1.jsx)(exports.NativeSelect, Object.assign({ onChange: (ev) => {
-                    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(ev.target.value);
-                }, value: value }, rest, { children: children })) }));
-    }
-    return ((0, jsx_runtime_1.jsx)(exports.SelectRoot, { value: value, onValueChange: onValueChange, children: children }));
+const SelectContent = (_a) => {
+    var { ref: forwardedRef, children, className, side, sideOffset = 8, align, alignOffset, alignItemWithTrigger = true, disableAnchorTracking, arrowPadding, anchor, collisionAvoidance, collisionBoundary, collisionPadding, sticky, positionMethod } = _a, props = __rest(_a, ["ref", "children", "className", "side", "sideOffset", "align", "alignOffset", "alignItemWithTrigger", "disableAnchorTracking", "arrowPadding", "anchor", "collisionAvoidance", "collisionBoundary", "collisionPadding", "sticky", "positionMethod"]);
+    return ((0, jsx_runtime_1.jsx)(select_1.Select.Portal, { children: (0, jsx_runtime_1.jsxs)(GroupScale_js_1.GroupScaleReset, { children: [(0, jsx_runtime_1.jsx)(select_1.Select.Backdrop, {}), (0, jsx_runtime_1.jsxs)(select_1.Select.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, disableAnchorTracking: disableAnchorTracking, arrowPadding: arrowPadding, anchor: anchor, collisionAvoidance: collisionAvoidance, collisionBoundary: collisionBoundary, collisionPadding: collisionPadding, sticky: sticky, positionMethod: positionMethod, className: (0, clsx_1.default)('layer-components:z-1 layer-components:outline-none layer-components:select-none', 'layer-components:transform-origin-[--transform-origin]'), children: [(0, jsx_runtime_1.jsx)(exports.SelectArrow, { className: (0, clsx_1.clsx)('layer-components:border-black layer-components:transition layer-components:transform', 'layer-components:data-[closed]:opacity-0 layer-components:data-[closed]:scale-0', 'layer-components:data-[open]:opacity-100 layer-components:data-[open]:scale-100') }), (0, jsx_runtime_1.jsxs)(select_1.Select.Popup, Object.assign({ className: (0, clsx_1.default)('layer-components:overflow-hidden layer-components:bg-white layer-components:rounded-md layer-components:border layer-components:border-solid layer-components:border layer-components:border-black layer-components:shadow-lg layer-components:bg-clip-padding layer-components:transition', 'layer-components:transform-origin-[var(--transform-origin)]', 'layer-components:data-[starting-style]:data-[side=bottom]:opacity-0 layer-components:data-[starting-style]:data-[side=bottom]:translate-y-4px', 'layer-components:data-[ending-style]:data-[side=bottom]:opacity-0 layer-components:data-[ending-style]:data-[side=bottom]:translate-y-4px', 'layer-components:data-[starting-style]:data-[side=top]:opacity-0 layer-components:data-[starting-style]:data-[side=top]:translate-y--4px', 'layer-components:data-[ending-style]:data-[side=top]:opacity-0 layer-components:data-[ending-style]:data-[side=top]:translate-y-0', 'layer-components:data-[starting-style]:data-[side=right]:opacity-0 layer-components:data-[starting-style]:data-[side=right]:translate-x-4px', 'layer-components:data-[ending-style]:data-[side=right]:opacity-0 layer-components:data-[ending-style]:data-[side=right]:translate-x-0', 'layer-components:data-[starting-style]:data-[side=left]:opacity-0 layer-components:data-[starting-style]:data-[side=left]:translate-x--4px', 'layer-components:data-[ending-style]:data-[side=left]:opacity-0 layer-components:data-[ending-style]:data-[side=left]:translate-x-0', 'important:motion-reduce:animate-none', 'layer-components:data-[side=none]:translate-y-0px layer-components:data-[side=none]:min-w-[calc(var(--anchor-width)+2rem)]', 'layer-components:min-w-[var(--anchor-width)] layer-components:max-h-[var(--available-height)]', className), style: contentStyle }, props, { ref: forwardedRef, children: [(0, jsx_runtime_1.jsx)(select_1.Select.ScrollUpArrow, { className: scrollArrowClass, children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "chevron", className: "rotate-180" }) }), (0, jsx_runtime_1.jsx)(select_1.Select.List, { style: viewportStyle, children: children }), (0, jsx_runtime_1.jsx)(select_1.Select.ScrollDownArrow, { className: scrollArrowClass, children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "chevron" }) })] }))] })] }) }));
 };
+exports.SelectContent = SelectContent;
+const SelectBase = exports.SelectRoot;
 exports.Select = Object.assign(SelectBase, {
     Root: exports.SelectRoot,
     Item: exports.SelectItem,
     Group: exports.SelectGroup,
     Trigger: exports.SelectTrigger,
     Value: exports.SelectValue,
-    Label: exports.SelectLabel,
+    GroupLabel: exports.SelectGroupLabel,
     Separator: exports.SelectSeparator,
     Icon: exports.SelectIcon,
     Content: exports.SelectContent,
+    Arrow: exports.SelectArrow,
+    ItemRoot: exports.SelectItemRoot,
+    ItemText: exports.SelectItemText,
+    ItemIndicator: exports.SelectItemIndicator,
 });
-function isMobile() {
-    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-}
-// facilitate the auto native switching
-const IsNativeContext = (0, react_1.createContext)(false);
-function withNoNativeRender(Component) {
-    const WithNoNativeRender = (props) => {
-        const isNative = (0, react_1.useContext)(IsNativeContext);
-        if (isNative)
-            return null;
-        return (0, jsx_runtime_1.jsx)(Component, Object.assign({}, props));
-    };
-    return WithNoNativeRender;
-}
-function withPassthroughNativeRender(Component) {
-    const WithPassthroughNativeRender = (props) => {
-        const isNative = (0, react_1.useContext)(IsNativeContext);
-        if (isNative) {
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
-        }
-        return (0, jsx_runtime_1.jsx)(Component, Object.assign({}, props));
-    };
-    return WithPassthroughNativeRender;
-}
 //# sourceMappingURL=Select.js.map

package/dist/cjs/components/select/Select.js.map

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

package/dist/cjs/components/select/Select.stories.d.ts

@@ -2,22 +2,28 @@ import type { StoryObj } from '@storybook/react';
 import { Select } from './Select.js';
 declare const meta: {
     title: string;
-    component: (<T extends string = string>({ children, value, onValueChange, mobileNative, ...rest }: import("./Select.js").SelectProps<T>) => import("react/jsx-runtime.js").JSX.Element) & {
-        Root: import("react").FC<import("@radix-ui/react-select").SelectProps>;
-        Item: ({ ref: forwardedRef, children, className, ...props }: import("@radix-ui/react-select").SelectItemProps & {
+    component: typeof import("@base-ui/react/select/index.parts.js").Root & {
+        Root: typeof import("@base-ui/react/select/index.parts.js").Root;
+        Item: ({ ref: forwardedRef, children, className, ...props }: import("@base-ui/react/select/index.js").SelectItemProps & {
             ref?: React.Ref<HTMLDivElement>;
         }) => import("react/jsx-runtime.js").JSX.Element;
-        Group: (props: import("@radix-ui/react-select").SelectGroupProps) => import("react/jsx-runtime.js").JSX.Element;
-        Trigger: ({ ref, children, asChild, ...props }: import("./Select.js").SelectTriggerProps & {
+        Group: import("react").ForwardRefExoticComponent<import("@base-ui/react/select/index.js").SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+        Trigger: ({ ref, children, render, ...props }: import("./Select.js").SelectTriggerProps & {
             ref?: React.Ref<HTMLButtonElement>;
         }) => import("react/jsx-runtime.js").JSX.Element;
-        Value: import("react").FunctionComponent<import("@radix-ui/react-select").SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
-        Label: import("react").FunctionComponent<import("@radix-ui/react-select").SelectLabelProps & import("react").RefAttributes<HTMLDivElement>>;
-        Separator: import("react").FunctionComponent<import("@radix-ui/react-select").SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
-        Icon: import("react").FunctionComponent<import("@radix-ui/react-select").SelectIconProps & {
+        Value: import("react").FunctionComponent<import("@base-ui/react/select/index.js").SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+        GroupLabel: import("react").FunctionComponent<import("@base-ui/react/select/index.js").SelectGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+        Separator: import("react").FunctionComponent<import("@base-ui/react/separator/Separator.js").SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+        Icon: ({ ref: forwardedRef, className, ...props }: import("@base-ui/react/select/index.js").SelectIconProps & {
             ref?: React.Ref<HTMLDivElement>;
-        }>;
-        Content: import("react").FunctionComponent<any>;
+        }) => import("react/jsx-runtime.js").JSX.Element;
+        Content: ({ ref: forwardedRef, children, className, side, sideOffset, align, alignOffset, alignItemWithTrigger, disableAnchorTracking, arrowPadding, anchor, collisionAvoidance, collisionBoundary, collisionPadding, sticky, positionMethod, ...props }: import("@base-ui/react/select/index.js").SelectPopupProps & import("@base-ui/react/select/index.js").SelectPositionerProps & {
+            ref?: import("react").Ref<HTMLDivElement>;
+        }) => import("react/jsx-runtime.js").JSX.Element;
+        Arrow: ({ className, ...props }: import("@base-ui/react/select/index.js").SelectArrowProps) => import("react/jsx-runtime.js").JSX.Element;
+        ItemRoot: import("react").FunctionComponent<import("@base-ui/react/select/index.js").SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+        ItemText: import("react").FunctionComponent<import("@base-ui/react/select/index.js").SelectItemTextProps & import("react").RefAttributes<HTMLDivElement>>;
+        ItemIndicator: (props: import("@base-ui/react/select/index.js").SelectItemIndicatorProps) => import("react/jsx-runtime.js").JSX.Element;
     };
     argTypes: {};
     parameters: {
@@ -32,4 +38,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof Select>;
 export declare const Default: Story;
+export declare const LongListWithItemLabels: Story;
 export declare const CompareSelectAndButton: Story;

package/dist/cjs/components/select/Select.stories.js

@@ -1,8 +1,20 @@
 // @unocss-include
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompareSelectAndButton = exports.Default = void 0;
+exports.CompareSelectAndButton = exports.LongListWithItemLabels = exports.Default = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const Box_js_1 = require("../box/Box.js");
 const index_js_1 = require("../button/index.js");
 const Select_js_1 = require("./Select.js");
 const meta = {
@@ -19,7 +31,16 @@ const meta = {
 exports.default = meta;
 exports.Default = {
     render(args) {
-        return ((0, jsx_runtime_1.jsxs)(Select_js_1.Select, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(Select_js_1.SelectTrigger, {}), (0, jsx_runtime_1.jsx)(Select_js_1.SelectContent, { children: ['One', 'Two', 'Three'].map((item) => ((0, jsx_runtime_1.jsx)(Select_js_1.SelectItem, { value: item, children: item }, item))) })] })));
+        return ((0, jsx_runtime_1.jsx)(Box_js_1.Box, { full: true, layout: "center center", className: "min-h-200px", children: (0, jsx_runtime_1.jsxs)(Select_js_1.Select, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(Select_js_1.SelectTrigger, {}), (0, jsx_runtime_1.jsx)(Select_js_1.SelectContent, { children: ['One', 'Two', 'Three'].map((item) => ((0, jsx_runtime_1.jsx)(Select_js_1.SelectItem, { value: item, children: item }, item))) })] })) }));
+    },
+};
+exports.LongListWithItemLabels = {
+    render(_a) {
+        var { defaultValue, value } = _a, args = __rest(_a, ["defaultValue", "value"]);
+        return ((0, jsx_runtime_1.jsx)(Box_js_1.Box, { full: true, layout: "center center", className: "min-h-200px", children: (0, jsx_runtime_1.jsxs)(Select_js_1.Select, Object.assign({}, args, { defaultValue: 0, itemToStringLabel: (i) => `Item number ${i + 1}`, children: [(0, jsx_runtime_1.jsx)(Select_js_1.SelectTrigger, {}), (0, jsx_runtime_1.jsx)(Select_js_1.SelectContent, { children: new Array(50).fill(null).map((_, i) => {
+                            const item = `Item number ${i + 1}`;
+                            return ((0, jsx_runtime_1.jsx)(Select_js_1.SelectItem, { value: i, children: item }, item));
+                        }) })] })) }));
     },
 };
 exports.CompareSelectAndButton = {

package/dist/cjs/components/select/Select.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.js","sourceRoot":"","sources":["../../../../src/components/select/Select.stories.tsx"],"names":[],"mappings":";;;;AACA,iDAA4C;AAC5C,2CAA+E;AAE/E,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,kBAAM;IACjB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;IACD,IAAI,EAAE;QACL,KAAK,EAAE,KAAK;KACZ;CAC6B,CAAC;AAEhC,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,wBAAC,kBAAM,oBAAK,IAAI,eACf,uBAAC,yBAAa,KAAG,EACjB,uBAAC,yBAAa,cACZ,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACtC,uBAAC,sBAAU,IAAY,KAAK,EAAE,IAAI,YAChC,IAAI,IADW,IAAI,CAER,CACb,CAAC,GACa,KACR,CACT,CAAC;IACH,CAAC;CACD,CAAC;AAEW,QAAA,sBAAsB,GAAU;IAC5C,MAAM,CAAC,IAAI;QACV,OAAO,CACN,iCAAK,SAAS,EAAC,KAAK,aACnB,wBAAC,kBAAM,oBAAK,IAAI,eACf,uBAAC,yBAAa,KAAG,EACjB,uBAAC,yBAAa,cACZ,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACtC,uBAAC,sBAAU,IAAY,KAAK,EAAE,IAAI,YAChC,IAAI,IADW,IAAI,CAER,CACb,CAAC,GACa,KACR,EACT,uBAAC,iBAAM,yBAAgB,EAEvB,wBAAC,kBAAM,oBAAK,IAAI,eACf,uBAAC,yBAAa,IAAC,IAAI,EAAC,OAAO,GAAG,EAC9B,uBAAC,yBAAa,cACZ,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACtC,uBAAC,sBAAU,IAAY,KAAK,EAAE,IAAI,YAChC,IAAI,IADW,IAAI,CAER,CACb,CAAC,GACa,KACR,EACT,uBAAC,iBAAM,IAAC,IAAI,EAAC,OAAO,uBAAgB,IAC/B,CACN,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"Select.stories.js","sourceRoot":"","sources":["../../../../src/components/select/Select.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,0CAAoC;AACpC,iDAA4C;AAC5C,2CAA+E;AAE/E,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,kBAAM;IACjB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;IACD,IAAI,EAAE;QACL,KAAK,EAAE,KAAK;KACZ;CAC6B,CAAC;AAEhC,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,uBAAC,YAAG,IAAC,IAAI,QAAC,MAAM,EAAC,eAAe,EAAC,SAAS,EAAC,aAAa,YACvD,wBAAC,kBAAM,oBAAK,IAAI,eACf,uBAAC,yBAAa,KAAG,EACjB,uBAAC,yBAAa,cACZ,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACtC,uBAAC,sBAAU,IAAY,KAAK,EAAE,IAAI,YAChC,IAAI,IADW,IAAI,CAER,CACb,CAAC,GACa,KACR,GACJ,CACN,CAAC;IACH,CAAC;CACD,CAAC;AAEW,QAAA,sBAAsB,GAAU;IAC5C,MAAM,CAAC,EAAgC;YAAhC,EAAE,YAAY,EAAE,KAAK,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;QACpC,OAAO,CACN,uBAAC,YAAG,IAAC,IAAI,QAAC,MAAM,EAAC,eAAe,EAAC,SAAS,EAAC,aAAa,YACvD,wBAAC,kBAAM,oBACF,IAAI,IACR,YAAY,EAAE,CAAC,EACf,iBAAiB,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,aAExD,uBAAC,yBAAa,KAAG,EACjB,uBAAC,yBAAa,cACZ,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;4BACtC,MAAM,IAAI,GAAG,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;4BACpC,OAAO,CACN,uBAAC,sBAAU,IAAY,KAAK,EAAE,CAAC,YAC7B,IAAI,IADW,IAAI,CAER,CACb,CAAC;wBACH,CAAC,CAAC,GACa,KACR,GACJ,CACN,CAAC;IACH,CAAC;CACD,CAAC;AAEW,QAAA,sBAAsB,GAAU;IAC5C,MAAM,CAAC,IAAI;QACV,OAAO,CACN,iCAAK,SAAS,EAAC,KAAK,aACnB,wBAAC,kBAAM,oBAAK,IAAI,eACf,uBAAC,yBAAa,KAAG,EACjB,uBAAC,yBAAa,cACZ,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACtC,uBAAC,sBAAU,IAAY,KAAK,EAAE,IAAI,YAChC,IAAI,IADW,IAAI,CAER,CACb,CAAC,GACa,KACR,EACT,uBAAC,iBAAM,yBAAgB,EAEvB,wBAAC,kBAAM,oBAAK,IAAI,eACf,uBAAC,yBAAa,IAAC,IAAI,EAAC,OAAO,GAAG,EAC9B,uBAAC,yBAAa,cACZ,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACtC,uBAAC,sBAAU,IAAY,KAAK,EAAE,IAAI,YAChC,IAAI,IADW,IAAI,CAER,CACb,CAAC,GACa,KACR,EACT,uBAAC,iBAAM,IAAC,IAAI,EAAC,OAAO,uBAAgB,IAC/B,CACN,CAAC;IACH,CAAC;CACD,CAAC"}

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

@@ -1,18 +1,41 @@
-import * as SliderPrimitive from '@radix-ui/react-slider';
+import { Slider as BaseSlider, SliderRootProps } from '@base-ui/react/slider';
+import { Ref } from 'react';
 import { PaletteName } from '../../uno/index.js';
-export declare const SliderRoot: import("react").FunctionComponent<SliderPrimitive.SliderProps & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const SliderTrack: import("react").FunctionComponent<SliderPrimitive.SliderTrackProps & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const SliderRange: import("react").FunctionComponent<SliderPrimitive.SliderRangeProps & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const SliderThumb: import("react").FunctionComponent<SliderPrimitive.SliderThumbProps & import("react").RefAttributes<HTMLSpanElement>>;
-export interface SliderProps extends SliderPrimitive.SliderProps {
+export declare const SliderRoot: import("react").FunctionComponent<BaseSlider.Root.Props<number | readonly number[]> & {
+    ref?: React.Ref<HTMLDivElement>;
+}>;
+export declare const SliderControl: import("react").FunctionComponent<import("@base-ui/react/slider/index.js").SliderControlProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderTrack: import("react").FunctionComponent<import("@base-ui/react/slider/index.js").SliderTrackProps & import("react").RefAttributes<HTMLElement>>;
+export declare const SliderRange: import("react").FunctionComponent<import("@base-ui/react/slider/index.js").SliderIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderThumb: import("react").FunctionComponent<import("@base-ui/react/slider/index.js").SliderThumbProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderBase: ({ children, color, className, ...props }: SliderProps) => import("react/jsx-runtime.js").JSX.Element;
+/**
+ * A pre-configured Slider UI component. Meant to compose
+ * under Slider.Root when you want to use Slider.Value, too
+ */
+export declare const SliderUi: ({ label, className, }: {
+    label?: string;
+    className?: string;
+}) => import("react/jsx-runtime.js").JSX.Element;
+export interface SliderProps extends SliderRootProps {
     label?: string;
     color?: PaletteName;
+    ref?: Ref<HTMLDivElement>;
 }
-export declare const Slider: (({ ref, label, color, className, ...props }: SliderProps & {
-    ref?: React.Ref<HTMLDivElement>;
-}) => import("react/jsx-runtime.js").JSX.Element) & {
-    Root: import("react").FunctionComponent<SliderPrimitive.SliderProps & import("react").RefAttributes<HTMLSpanElement>>;
-    Track: import("react").FunctionComponent<SliderPrimitive.SliderTrackProps & import("react").RefAttributes<HTMLSpanElement>>;
-    Range: import("react").FunctionComponent<SliderPrimitive.SliderRangeProps & import("react").RefAttributes<HTMLSpanElement>>;
-    Thumb: import("react").FunctionComponent<SliderPrimitive.SliderThumbProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Slider: (({ label, ...props }: SliderProps) => import("react/jsx-runtime.js").JSX.Element) & {
+    Root: import("react").FunctionComponent<BaseSlider.Root.Props<number | readonly number[]> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }>;
+    Base: ({ children, color, className, ...props }: SliderProps) => import("react/jsx-runtime.js").JSX.Element;
+    Control: import("react").FunctionComponent<import("@base-ui/react/slider/index.js").SliderControlProps & import("react").RefAttributes<HTMLDivElement>>;
+    Track: import("react").FunctionComponent<import("@base-ui/react/slider/index.js").SliderTrackProps & import("react").RefAttributes<HTMLElement>>;
+    /** @deprecated - use Indicator */
+    Range: import("react").FunctionComponent<import("@base-ui/react/slider/index.js").SliderIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Indicator: import("react").FunctionComponent<import("@base-ui/react/slider/index.js").SliderIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Thumb: import("react").FunctionComponent<import("@base-ui/react/slider/index.js").SliderThumbProps & import("react").RefAttributes<HTMLDivElement>>;
+    Value: import("react").ForwardRefExoticComponent<import("@base-ui/react/slider/index.js").SliderValueProps & import("react").RefAttributes<HTMLOutputElement>>;
+    Ui: ({ label, className, }: {
+        label?: string;
+        className?: string;
+    }) => import("react/jsx-runtime.js").JSX.Element;
 };

package/dist/cjs/components/slider/Slider.js

@@ -1,38 +1,5 @@
 // @unocss-include
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -48,22 +15,40 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Slider = exports.SliderThumb = exports.SliderRange = exports.SliderTrack = exports.SliderRoot = void 0;
+exports.Slider = exports.SliderUi = exports.SliderBase = exports.SliderThumb = exports.SliderRange = exports.SliderTrack = exports.SliderControl = exports.SliderRoot = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const SliderPrimitive = __importStar(require("@radix-ui/react-slider"));
+const slider_1 = require("@base-ui/react/slider");
 const clsx_1 = __importDefault(require("clsx"));
 const hooks_js_1 = require("../../hooks.js");
-exports.SliderRoot = (0, hooks_js_1.withClassName)(SliderPrimitive.Root, 'layer-components:relative layer-components:flex layer-components:items-center layer-components:select-none layer-components:touch-none layer-components:w-full layer-components:h-30px layer-components:translate-z-0', 'layer-variants:[&[data-orientation=vertical]]:flex-col layer-variants:[&[data-orientation=vertical]]:h-full layer-variants:[&[data-orientation=vertical]]:w-30px');
-exports.SliderTrack = (0, hooks_js_1.withClassName)(SliderPrimitive.Track, 'layer-components:bg-transparent layer-components:relative layer-components:grow layer-components:rounded-lg layer-components:h-9px layer-components:border layer-components:border-1 layer-components:border-solid layer-components:border-black layer-components:transition-colors', 'layer-variants:[&[data-orientation=vertical]]:w-9px layer-variants:[&[data-orientation=vertical]]:h-full layer-variants:[&[data-orientation=vertical]]:flex-1');
-exports.SliderRange = (0, hooks_js_1.withClassName)(SliderPrimitive.Range, 'layer-components:absolute layer-components:bg-main layer-components:rounded-lg layer-components:h-full layer-components:transition-colors', 'layer-variants:[&[data-orientation=vertical]]:w-full layer-variants:[&[data-orientation=vertical]]:h-auto');
-exports.SliderThumb = (0, hooks_js_1.withClassName)(SliderPrimitive.Thumb, 'layer-components:flex layer-components:items-center layer-components:justify-center layer-components:leading-none layer-components:cursor-pointer layer-components:w-5 layer-components:h-5 layer-components:bg-white layer-components:shadow-sm layer-components:rounded-lg layer-components:ring-2 layer-components:ring-black layer-components:touch-none layer-components:transition-all', 'layer-components:hover:shadow-md', 'layer-components:active:shadow-lg layer-components:active:ring-4 layer-components:active:ring-main-dark layer-components:active:ring-opacity-50 layer-components:active:bg-main-light', 'layer-components:focus-visible:shadow-lg layer-components:focus-visible:ring-4 layer-components:focus-visible:ring-accent layer-components:focus-visible:ring-opacity-50 layer-components:focus-visible:outline-none layer-components:focus-visible:bg-main-light', 'layer-components:focus:outline-none', 'layer-components:disabled:opacity-50');
+exports.SliderRoot = (0, hooks_js_1.withClassName)(slider_1.Slider.Root, 'layer-components:w-full');
+exports.SliderControl = (0, hooks_js_1.withClassName)(slider_1.Slider.Control, 'layer-components:relative layer-components:flex layer-components:items-center layer-components:select-none layer-components:touch-none layer-components:w-full layer-components:h-30px layer-components:translate-z-0', 'layer-variants:[&[data-orientation=vertical]]:flex-col layer-variants:[&[data-orientation=vertical]]:h-full layer-variants:[&[data-orientation=vertical]]:w-30px');
+exports.SliderTrack = (0, hooks_js_1.withClassName)(slider_1.Slider.Track, 'layer-components:bg-transparent layer-components:relative layer-components:grow layer-components:rounded-lg layer-components:h-7px layer-components:ring-1 layer-components:ring-black layer-components:transition-colors layer-components:select-none', 'layer-variants:[&[data-orientation=vertical]]:w-7px layer-variants:[&[data-orientation=vertical]]:h-full layer-variants:[&[data-orientation=vertical]]:flex-1');
+exports.SliderRange = (0, hooks_js_1.withClassName)(slider_1.Slider.Indicator, 'layer-components:bg-main layer-components:rounded-lg layer-components:transition-colors', 'layer-variants:[&[data-orientation=vertical]]:bg-main');
+exports.SliderThumb = (0, hooks_js_1.withClassName)(slider_1.Slider.Thumb, 'layer-components:flex layer-components:items-center layer-components:justify-center layer-components:leading-none layer-components:cursor-pointer layer-components:w-5 layer-components:h-5 layer-components:bg-white layer-components:shadow-sm layer-components:rounded-lg layer-components:ring-2 layer-components:ring-black layer-components:touch-none layer-components:transition-color', 'layer-components:hover:shadow-md', 'layer-components:active:shadow-lg layer-components:active:ring-4 layer-components:active:ring-main-dark layer-components:active:ring-opacity-50 layer-components:active:bg-main-light', 'layer-components:focus-visible:shadow-lg layer-components:focus-visible:ring-4 layer-components:focus-visible:ring-accent layer-components:focus-visible:ring-opacity-50 layer-components:focus-visible:outline-none layer-components:focus-visible:bg-main-light', 'layer-components:focus:outline-none', 'layer-components:disabled:opacity-50');
+const SliderBase = (_a) => {
+    var { children, color, className } = _a, props = __rest(_a, ["children", "color", "className"]);
+    return ((0, jsx_runtime_1.jsx)(exports.SliderRoot, Object.assign({}, props, { className: (0, clsx_1.default)(color && `palette-${color}`, className), children: (0, jsx_runtime_1.jsx)(exports.SliderControl, { children: children }) })));
+};
+exports.SliderBase = SliderBase;
+/**
+ * A pre-configured Slider UI component. Meant to compose
+ * under Slider.Root when you want to use Slider.Value, too
+ */
+const SliderUi = ({ label, className, }) => ((0, jsx_runtime_1.jsx)(exports.Slider.Control, { className: className, children: (0, jsx_runtime_1.jsxs)(exports.SliderTrack, { children: [(0, jsx_runtime_1.jsx)(exports.SliderRange, {}), (0, jsx_runtime_1.jsx)(exports.SliderThumb, { "aria-label": label })] }) }));
+exports.SliderUi = SliderUi;
 exports.Slider = Object.assign(function Slider(_a) {
-    var { ref, label, color, className } = _a, props = __rest(_a, ["ref", "label", "color", "className"]);
-    return ((0, jsx_runtime_1.jsxs)(exports.SliderRoot, Object.assign({ ref: ref, className: (0, clsx_1.default)(color && `palette-${color}`, className) }, props, { children: [(0, jsx_runtime_1.jsx)(exports.SliderTrack, { children: (0, jsx_runtime_1.jsx)(exports.SliderRange, { "data-color": color }) }), (0, jsx_runtime_1.jsx)(exports.SliderThumb, { "aria-label": label, "data-color": color })] })));
+    var { label } = _a, props = __rest(_a, ["label"]);
+    return ((0, jsx_runtime_1.jsx)(exports.SliderRoot, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(exports.SliderUi, {}) })));
 }, {
     Root: exports.SliderRoot,
+    Base: exports.SliderBase,
+    Control: exports.SliderControl,
     Track: exports.SliderTrack,
+    /** @deprecated - use Indicator */
     Range: exports.SliderRange,
+    Indicator: exports.SliderRange,
     Thumb: exports.SliderThumb,
+    Value: slider_1.Slider.Value,
+    Ui: exports.SliderUi,
 });
 //# sourceMappingURL=Slider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../../src/components/slider/Slider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wEAA0D;AAC1D,gDAAwB;AACxB,6CAA+C;AAGlC,QAAA,UAAU,GAAG,IAAA,wBAAa,EACtC,eAAe,CAAC,IAAI,EACpB,kGAAkG,EAClG,wEAAwE,CACxE,CAAC;AACW,QAAA,WAAW,GAAG,IAAA,wBAAa,EACvC,eAAe,CAAC,KAAK,EACrB,8HAA8H,EAC9H,qEAAqE,CACrE,CAAC;AACW,QAAA,WAAW,GAAG,IAAA,wBAAa,EACvC,eAAe,CAAC,KAAK,EACrB,yEAAyE,EACzE,+DAA+D,CAC/D,CAAC;AACW,QAAA,WAAW,GAAG,IAAA,wBAAa,EACvC,eAAe,CAAC,KAAK,EACrB,mKAAmK,EACnK,oCAAoC,EACpC,yFAAyF,EACzF,0GAA0G,EAC1G,uCAAuC,EACvC,wCAAwC,CACxC,CAAC;AAOW,QAAA,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,wBAAC,kBAAU,kBACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,KAAK,IAAI,WAAW,KAAK,EAAE,EAAE,SAAS,CAAC,IACnD,KAAK,eAET,uBAAC,mBAAW,cACX,uBAAC,mBAAW,kBAAa,KAAK,GAAI,GACrB,EACd,uBAAC,mBAAW,kBAAa,KAAK,gBAAc,KAAK,GAAI,KACzC,CACb,CAAC;AACH,CAAC,EACD;IACC,IAAI,EAAE,kBAAU;IAChB,KAAK,EAAE,mBAAW;IAClB,KAAK,EAAE,mBAAW;IAClB,KAAK,EAAE,mBAAW;CAClB,CACD,CAAC"}
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../../src/components/slider/Slider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,kDAA8E;AAC9E,gDAAwB;AAExB,6CAA+C;AAGlC,QAAA,UAAU,GAAG,IAAA,wBAAa,EACtC,eAAU,CAAC,IAAI,EACf,yBAAyB,CACzB,CAAC;AAEW,QAAA,aAAa,GAAG,IAAA,wBAAa,EACzC,eAAU,CAAC,OAAO,EAClB,kGAAkG,EAClG,wEAAwE,CACxE,CAAC;AACW,QAAA,WAAW,GAAG,IAAA,wBAAa,EACvC,eAAU,CAAC,KAAK,EAChB,kHAAkH,EAClH,qEAAqE,CACrE,CAAC;AACW,QAAA,WAAW,GAAG,IAAA,wBAAa,EACvC,eAAU,CAAC,SAAS,EACpB,yDAAyD,EACzD,yDAAyD,CACzD,CAAC;AACW,QAAA,WAAW,GAAG,IAAA,wBAAa,EACvC,eAAU,CAAC,KAAK,EAChB,qKAAqK,EACrK,oCAAoC,EACpC,yFAAyF,EACzF,0GAA0G,EAC1G,uCAAuC,EACvC,wCAAwC,CACxC,CAAC;AAEK,MAAM,UAAU,GAAG,CAAC,EAKb,EAAE,EAAE;QALS,EAC1B,QAAQ,EACR,KAAK,EACL,SAAS,OAEI,EADV,KAAK,cAJkB,kCAK1B,CADQ;IAER,OAAO,CACN,uBAAC,kBAAU,oBACN,KAAK,IACT,SAAS,EAAE,IAAA,cAAI,EAAC,KAAK,IAAI,WAAW,KAAK,EAAE,EAAE,SAAS,CAAC,YAEvD,uBAAC,qBAAa,cAAE,QAAQ,GAAiB,IAC7B,CACb,CAAC;AACH,CAAC,CAAC;AAdW,QAAA,UAAU,cAcrB;AAEF;;;GAGG;AACI,MAAM,QAAQ,GAAG,CAAC,EACxB,KAAK,EACL,SAAS,GAIT,EAAE,EAAE,CAAC,CACL,uBAAC,cAAM,CAAC,OAAO,IAAC,SAAS,EAAE,SAAS,YACnC,wBAAC,mBAAW,eACX,uBAAC,mBAAW,KAAG,EACf,uBAAC,mBAAW,kBAAa,KAAK,GAAI,IACrB,GACE,CACjB,CAAC;AAbW,QAAA,QAAQ,YAanB;AAQW,QAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAClC,SAAS,MAAM,CAAC,EAAgC;QAAhC,EAAE,KAAK,OAAyB,EAApB,KAAK,cAAjB,SAAmB,CAAF;IAChC,OAAO,CACN,uBAAC,kBAAU,oBAAK,KAAK,cACpB,uBAAC,gBAAQ,KAAG,IACA,CACb,CAAC;AACH,CAAC,EACD;IACC,IAAI,EAAE,kBAAU;IAChB,IAAI,EAAE,kBAAU;IAChB,OAAO,EAAE,qBAAa;IACtB,KAAK,EAAE,mBAAW;IAClB,kCAAkC;IAClC,KAAK,EAAE,mBAAW;IAClB,SAAS,EAAE,mBAAW;IACtB,KAAK,EAAE,mBAAW;IAClB,KAAK,EAAE,eAAU,CAAC,KAAK;IACvB,EAAE,EAAE,gBAAQ;CACZ,CACD,CAAC"}

package/dist/cjs/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.js").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.js").JSX.Element) & {
+        Root: import("react").FunctionComponent<import("@base-ui/react/slider/index.parts.js").Root.Props<number | readonly number[]> & {
+            ref?: React.Ref<HTMLDivElement>;
+        }>;
+        Base: ({ children, color, className, ...props }: import("./Slider.js").SliderProps) => import("react/jsx-runtime.js").JSX.Element;
+        Control: import("react").FunctionComponent<import("@base-ui/react/slider/index.js").SliderControlProps & import("react").RefAttributes<HTMLDivElement>>;
+        Track: import("react").FunctionComponent<import("@base-ui/react/slider/index.js").SliderTrackProps & import("react").RefAttributes<HTMLElement>>;
+        Range: import("react").FunctionComponent<import("@base-ui/react/slider/index.js").SliderIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+        Indicator: import("react").FunctionComponent<import("@base-ui/react/slider/index.js").SliderIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+        Thumb: import("react").FunctionComponent<import("@base-ui/react/slider/index.js").SliderThumbProps & import("react").RefAttributes<HTMLDivElement>>;
+        Value: import("react").ForwardRefExoticComponent<import("@base-ui/react/slider/index.js").SliderValueProps & import("react").RefAttributes<HTMLOutputElement>>;
+        Ui: ({ label, className, }: {
+            label?: string;
+            className?: string;
+        }) => import("react/jsx-runtime.js").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/cjs/components/slider/Slider.stories.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomStyles = exports.Vertical = exports.Default = void 0;
+exports.WithValue = exports.CustomStyles = exports.Vertical = exports.Default = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = require("react");
@@ -31,17 +31,30 @@ exports.CustomStyles = {
         style: { height: '200px' },
         min: -2,
         max: 2,
-        defaultValue: [0],
+        defaultValue: 0,
     },
     render: (args) => {
-        const [value, setValue] = (0, react_1.useState)([0]);
-        return ((0, jsx_runtime_1.jsxs)(Slider_js_1.Slider.Root, Object.assign({ value: value, onValueChange: setValue }, args, { children: [(0, jsx_runtime_1.jsx)(Slider_js_1.Slider.Track, { className: (0, clsx_1.default)({
-                        '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,
-                    }) }), (0, jsx_runtime_1.jsx)(Slider_js_1.Slider.Thumb, { className: "w-24px h-24px", children: (0, jsx_runtime_1.jsx)("div", { className: "text-lg", children: ['😭', '😔', '😐', '😊', '😃'][value[0] + 2] }) })] })));
+        const [value, setValue] = (0, react_1.useState)(0);
+        return ((0, jsx_runtime_1.jsx)(Slider_js_1.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: (0, jsx_runtime_1.jsxs)(Slider_js_1.Slider.Track, { className: (0, clsx_1.default)({
+                    'bg-attention': value === -2,
+                    'bg-attention-light': value === -1,
+                    'bg-main': value === 0,
+                    'bg-success-light': value === 1,
+                    'bg-success': value === 2,
+                }), children: [(0, jsx_runtime_1.jsx)(Slider_js_1.Slider.Indicator, {}), (0, jsx_runtime_1.jsx)(Slider_js_1.Slider.Thumb, { className: "w-24px h-24px", children: (0, jsx_runtime_1.jsx)("div", { className: "text-lg", children: ['😭', '😔', '😐', '😊', '😃'][value + 2] }) })] }) })));
     },
 };
+exports.WithValue = {
+    args: {
+        defaultValue: 50,
+    },
+    render: (args) => ((0, jsx_runtime_1.jsxs)(Slider_js_1.Slider.Root, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(Slider_js_1.Slider.Ui, {}), (0, jsx_runtime_1.jsx)(Slider_js_1.Slider.Value, {})] }))),
+};
 //# sourceMappingURL=Slider.stories.js.map