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

package/dist/esm/components/select/Select.d.ts

@@ -1,60 +1,54 @@
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { FunctionComponent, ReactNode } from 'react';
+import { Select as BaseSelect, SelectArrowProps, SelectIconProps, SelectItemIndicatorProps, SelectItemProps, SelectPopupProps, SelectPositionerProps, SelectRootProps } from '@base-ui/react/select';
+import { Ref } from 'react';
 import { ButtonProps } from '../button/Button.js';
-export declare const SelectItem: ({ ref: forwardedRef, children, className, ...props }: SelectPrimitive.SelectItemProps & {
+export declare const SelectItem: ({ ref: forwardedRef, children, className, ...props }: SelectItemProps & {
     ref?: React.Ref<HTMLDivElement>;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const SelectItemRoot: FunctionComponent<SelectPrimitive.SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SelectItemIndicatorRoot: FunctionComponent<SelectPrimitive.SelectItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const SelectItemIndicator: FunctionComponent<SelectPrimitive.SelectItemIndicatorProps>;
-export declare const SelectItemText: FunctionComponent<SelectPrimitive.SelectItemTextProps & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const SelectGroup: (props: SelectPrimitive.SelectGroupProps) => import("react/jsx-runtime").JSX.Element;
-export declare const SelectRoot: import("react").FC<SelectPrimitive.SelectProps>;
+export declare const SelectItemRoot: import("react").FunctionComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectItemIndicatorRoot: import("react").FunctionComponent<SelectItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const SelectItemIndicator: (props: SelectItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectItemText: import("react").FunctionComponent<import("@base-ui/react/select").SelectItemTextProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectGroup: import("react").ForwardRefExoticComponent<import("@base-ui/react/select").SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectRoot: typeof BaseSelect.Root;
 export declare const selectTriggerClassName: string;
-export declare const SelectTriggerBase: FunctionComponent<SelectPrimitive.SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const UnstyledSelectTrigger: FunctionComponent<SelectPrimitive.SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export interface SelectTriggerProps extends ButtonProps {
-}
-export declare const SelectTrigger: ({ ref, children, asChild, ...props }: SelectTriggerProps & {
+export declare const SelectTriggerBase: import("react").FunctionComponent<import("@base-ui/react/select").SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const UnstyledSelectTrigger: import("react").ForwardRefExoticComponent<import("@base-ui/react/select").SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type SelectTriggerProps = ButtonProps;
+export declare const SelectTrigger: ({ ref, children, render, ...props }: SelectTriggerProps & {
     ref?: React.Ref<HTMLButtonElement>;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const SelectValue: FunctionComponent<SelectPrimitive.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const SelectLabel: FunctionComponent<SelectPrimitive.SelectLabelProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SelectSeparator: FunctionComponent<SelectPrimitive.SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SelectIcon: FunctionComponent<SelectPrimitive.SelectIconProps & {
+export declare const SelectValue: import("react").FunctionComponent<import("@base-ui/react/select").SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const SelectGroupLabel: import("react").FunctionComponent<import("@base-ui/react/select").SelectGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectSeparator: import("react").FunctionComponent<import("@base-ui/react/separator").SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectIcon: ({ ref: forwardedRef, className, ...props }: SelectIconProps & {
     ref?: React.Ref<HTMLDivElement>;
-}>;
-export declare const SelectContent: FunctionComponent<any>;
-export declare const NativeSelect: ({ ref: forwardedRef, className, ...props }: React.SelectHTMLAttributes<HTMLSelectElement> & {
-    ref?: React.Ref<HTMLSelectElement>;
 }) => import("react/jsx-runtime").JSX.Element;
-export type SelectProps<T extends string = string> = {
-    children?: ReactNode;
-    value: T;
-    onValueChange?: (value: T) => void;
-    className?: string;
-    id?: string;
-    /** Native on mobile; otherwise use custom select impl */
-    mobileNative?: boolean;
-    /** won't work on mobile and mobileNative=true */
-    open?: boolean;
-    /** won't work on mobile and mobileNative=true */
-    onOpenChange?: (open: boolean) => void;
-};
-export declare const Select: (<T extends string = string>({ children, value, onValueChange, mobileNative, ...rest }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element) & {
-    Root: import("react").FC<SelectPrimitive.SelectProps>;
-    Item: ({ ref: forwardedRef, children, className, ...props }: SelectPrimitive.SelectItemProps & {
+export declare const SelectArrow: ({ className, ...props }: SelectArrowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectContent: ({ ref: forwardedRef, children, className, side, sideOffset, align, alignOffset, alignItemWithTrigger, disableAnchorTracking, arrowPadding, anchor, collisionAvoidance, collisionBoundary, collisionPadding, sticky, positionMethod, ...props }: SelectPopupProps & SelectPositionerProps & {
+    ref?: Ref<HTMLDivElement>;
+}) => import("react/jsx-runtime").JSX.Element;
+export interface SelectProps<T extends string = string> extends SelectRootProps<T> {
+}
+export declare const Select: typeof BaseSelect.Root & {
+    Root: typeof BaseSelect.Root;
+    Item: ({ ref: forwardedRef, children, className, ...props }: SelectItemProps & {
         ref?: React.Ref<HTMLDivElement>;
     }) => import("react/jsx-runtime").JSX.Element;
-    Group: (props: SelectPrimitive.SelectGroupProps) => import("react/jsx-runtime").JSX.Element;
-    Trigger: ({ ref, children, asChild, ...props }: SelectTriggerProps & {
+    Group: import("react").ForwardRefExoticComponent<import("@base-ui/react/select").SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: ({ ref, children, render, ...props }: SelectTriggerProps & {
         ref?: React.Ref<HTMLButtonElement>;
     }) => import("react/jsx-runtime").JSX.Element;
-    Value: FunctionComponent<SelectPrimitive.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
-    Label: FunctionComponent<SelectPrimitive.SelectLabelProps & import("react").RefAttributes<HTMLDivElement>>;
-    Separator: FunctionComponent<SelectPrimitive.SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
-    Icon: FunctionComponent<SelectPrimitive.SelectIconProps & {
+    Value: import("react").FunctionComponent<import("@base-ui/react/select").SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+    GroupLabel: import("react").FunctionComponent<import("@base-ui/react/select").SelectGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").FunctionComponent<import("@base-ui/react/separator").SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Icon: ({ ref: forwardedRef, className, ...props }: SelectIconProps & {
         ref?: React.Ref<HTMLDivElement>;
-    }>;
-    Content: FunctionComponent<any>;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ ref: forwardedRef, children, className, side, sideOffset, align, alignOffset, alignItemWithTrigger, disableAnchorTracking, arrowPadding, anchor, collisionAvoidance, collisionBoundary, collisionPadding, sticky, positionMethod, ...props }: SelectPopupProps & SelectPositionerProps & {
+        ref?: Ref<HTMLDivElement>;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Arrow: ({ className, ...props }: SelectArrowProps) => import("react/jsx-runtime").JSX.Element;
+    ItemRoot: import("react").FunctionComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").FunctionComponent<import("@base-ui/react/select").SelectItemTextProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemIndicator: (props: SelectItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,5 +1,4 @@
 // @unocss-include
-'use client';
 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)
@@ -12,107 +11,66 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as SelectPrimitive from '@radix-ui/react-select';
-import classNames from 'clsx';
-import { createContext, useContext, } from 'react';
+import { Select as BaseSelect, } from '@base-ui/react/select';
+import classNames, { clsx } from 'clsx';
 import { withClassName } from '../../hooks/withClassName.js';
 import { GroupScaleReset } from '../../systems/GroupScale.js';
 import { Button } from '../button/Button.js';
 import { getButtonClassName } from '../button/classes.js';
 import { Icon } from '../icon/index.js';
+import { ArrowSvg } from '../utility/ArrowSvg.js';
 export const SelectItem = (_a) => {
     var { ref: forwardedRef, children, className } = _a, props = __rest(_a, ["ref", "children", "className"]);
-    const isNative = useContext(IsNativeContext);
-    if (isNative) {
-        return _jsx("option", { value: props.value, children: children });
-    }
-    return (_jsxs(SelectItemRoot, Object.assign({ className: className }, props, { ref: forwardedRef, children: [_jsx(SelectPrimitive.ItemText, { children: children }), _jsx(SelectItemIndicator, {})] })));
+    return (_jsxs(SelectItemRoot, Object.assign({ className: className }, props, { ref: forwardedRef, children: [_jsx(SelectItemText, { children: children }), _jsx(SelectItemIndicator, {})] })));
 };
-export const SelectItemRoot = 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');
-export const SelectItemIndicatorRoot = 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');
-export const SelectItemIndicator = withNoNativeRender((props) => (_jsx(SelectItemIndicatorRoot, Object.assign({}, props, { children: _jsx(Icon, { name: "check" }) }))));
-export const SelectItemText = withClassName(SelectPrimitive.ItemText, '');
-export const SelectGroup = (props) => {
-    const isNative = useContext(IsNativeContext);
-    if (isNative) {
-        return (_jsx("optgroup", { id: props.id, className: props.className, children: props.children }));
-    }
-    return _jsx(SelectPrimitive.Group, Object.assign({}, props));
-};
-export const SelectRoot = SelectPrimitive.Root;
-export const selectTriggerClassName = classNames(getButtonClassName({}), 'layer-components:([all:unset] inline-flex [&[data-placeholder]]:color-gray-dark)');
-export const SelectTriggerBase = withNoNativeRender(withClassName(SelectPrimitive.Trigger, selectTriggerClassName));
-export const UnstyledSelectTrigger = withNoNativeRender(SelectPrimitive.Trigger);
+export const SelectItemRoot = withClassName(BaseSelect.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');
+export const SelectItemIndicatorRoot = withClassName(BaseSelect.ItemIndicator, 'layer-components:absolute layer-components:left-0 layer-components:w-25px layer-components:inline-flex layer-components:items-center layer-components:justify-center');
+export const SelectItemIndicator = (props) => (_jsx(SelectItemIndicatorRoot, Object.assign({}, props, { children: _jsx(Icon, { name: "check" }) })));
+export const SelectItemText = withClassName(BaseSelect.ItemText, '');
+export const SelectGroup = BaseSelect.Group;
+export const SelectRoot = BaseSelect.Root;
+export const selectTriggerClassName = classNames(getButtonClassName({}), 'layer-components:[all:unset] layer-components:inline-flex layer-components:data-[placeholder]:color-gray-dark');
+export const SelectTriggerBase = withClassName(BaseSelect.Trigger, selectTriggerClassName);
+export const UnstyledSelectTrigger = BaseSelect.Trigger;
 export const SelectTrigger = function SelectTrigger(_a) {
-    var { ref, children, asChild } = _a, props = __rest(_a, ["ref", "children", "asChild"]);
-    return (_jsx(UnstyledSelectTrigger, Object.assign({ asChild: true }, props, { ref: ref, children: _jsx(Button, { className: "gap-2 font-normal", asChild: asChild, children: children || (_jsxs(_Fragment, { children: [_jsx(SelectValue, {}), _jsx(SelectIcon, {})] })) }) })));
+    var { ref, children, render } = _a, props = __rest(_a, ["ref", "children", "render"]);
+    return (_jsx(UnstyledSelectTrigger, Object.assign({}, props, { className: "layer-components:font-normal", ref: ref, render: render || _jsx(Button, { className: "gap-2 font-normal" }), children: children || (_jsxs(_Fragment, { children: [_jsx(SelectValue, {}), _jsx(SelectIcon, {})] })) })));
 };
-export const SelectValue = withNoNativeRender(withClassName(SelectPrimitive.Value, 'flex flex-row'));
-export const SelectLabel = withNoNativeRender(withClassName(SelectPrimitive.Label, 'px-25px text-xs leading-6 color-black select-none'));
-export const SelectSeparator = withNoNativeRender(withClassName(SelectPrimitive.Separator, 'h-1px bg-gray-light m-1'));
-export const SelectIcon = withNoNativeRender((_a) => {
+export const SelectValue = withClassName(BaseSelect.Value, 'flex flex-row');
+export const SelectGroupLabel = withClassName(BaseSelect.GroupLabel, 'px-25px text-xs leading-6 color-black select-none');
+export const SelectSeparator = withClassName(BaseSelect.Separator, 'h-1px bg-gray-light m-1');
+export const SelectIcon = (_a) => {
     var { ref: forwardedRef, className } = _a, props = __rest(_a, ["ref", "className"]);
-    return (_jsx(SelectPrimitive.Icon, Object.assign({ className: classNames('color-inherit ml-auto', className) }, props, { ref: forwardedRef, children: _jsx(Icon, { name: "chevron", className: "w-[12px] h-[12px] relative top-1px" }) })));
-});
+    return (_jsx(BaseSelect.Icon, Object.assign({ className: classNames('color-inherit ml-auto', className) }, props, { ref: forwardedRef, children: _jsx(Icon, { name: "chevron", className: "w-[12px] h-[12px] relative top-1px" }) })));
+};
+export const SelectArrow = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(BaseSelect.Arrow, Object.assign({ className: clsx('layer-components:arrow', className) }, props, { children: _jsx(ArrowSvg, {}) })));
+};
+const scrollArrowClass = 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' };
-export const SelectContent = withPassthroughNativeRender((_a) => {
-    var { ref: forwardedRef, children, inDialog, className } = _a, props = __rest(_a, ["ref", "children", "inDialog", "className"]);
-    return (_jsx(SelectPrimitive.Portal, { children: _jsx(GroupScaleReset, { children: _jsxs(SelectPrimitive.Content, Object.assign({ className: classNames('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: [_jsx(SelectPrimitive.ScrollUpButton, { className: "flex items-center justify-center h-25px bg-white color-main-dark cursor-default", children: _jsx(Icon, { name: "chevron", className: "rotate-180" }) }), _jsx(SelectPrimitive.Viewport, { style: viewportStyle, children: children }), _jsx(SelectPrimitive.ScrollDownButton, { className: "flex items-center justify-center h-25px bg-white color-main-dark cursor-default", children: _jsx(Icon, { name: "chevron" }) })] })) }) }));
-});
-export const NativeSelect = (_a) => {
-    var { ref: forwardedRef, className } = _a, props = __rest(_a, ["ref", "className"]);
-    return (_jsxs("div", { className: classNames('relative', className), children: [_jsx("select", Object.assign({ className: classNames('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 })), _jsx("div", { className: "absolute right-1 top-50% translate-y-[-50%] pointer-events-none", children: _jsx(Icon, { name: "chevron", className: "w-4 h-4 m-2" }) })] }));
-};
-/**
- * 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 (_jsx(IsNativeContext.Provider, { value: true, children: _jsx(NativeSelect, Object.assign({ onChange: (ev) => {
-                    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(ev.target.value);
-                }, value: value }, rest, { children: children })) }));
-    }
-    return (_jsx(SelectRoot, { value: value, onValueChange: onValueChange, children: children }));
+export 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 (_jsx(BaseSelect.Portal, { children: _jsxs(GroupScaleReset, { children: [_jsx(BaseSelect.Backdrop, {}), _jsxs(BaseSelect.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: classNames('layer-components:z-1 layer-components:outline-none layer-components:select-none', 'layer-components:transform-origin-[--transform-origin]'), children: [_jsx(SelectArrow, { className: 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') }), _jsxs(BaseSelect.Popup, Object.assign({ className: classNames('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: [_jsx(BaseSelect.ScrollUpArrow, { className: scrollArrowClass, children: _jsx(Icon, { name: "chevron", className: "rotate-180" }) }), _jsx(BaseSelect.List, { style: viewportStyle, children: children }), _jsx(BaseSelect.ScrollDownArrow, { className: scrollArrowClass, children: _jsx(Icon, { name: "chevron" }) })] }))] })] }) }));
 };
+const SelectBase = SelectRoot;
 export const Select = Object.assign(SelectBase, {
     Root: SelectRoot,
     Item: SelectItem,
     Group: SelectGroup,
     Trigger: SelectTrigger,
     Value: SelectValue,
-    Label: SelectLabel,
+    GroupLabel: SelectGroupLabel,
     Separator: SelectSeparator,
     Icon: SelectIcon,
     Content: SelectContent,
+    Arrow: SelectArrow,
+    ItemRoot: SelectItemRoot,
+    ItemText: SelectItemText,
+    ItemIndicator: SelectItemIndicator,
 });
-function isMobile() {
-    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-}
-// facilitate the auto native switching
-const IsNativeContext = createContext(false);
-function withNoNativeRender(Component) {
-    const WithNoNativeRender = (props) => {
-        const isNative = useContext(IsNativeContext);
-        if (isNative)
-            return null;
-        return _jsx(Component, Object.assign({}, props));
-    };
-    return WithNoNativeRender;
-}
-function withPassthroughNativeRender(Component) {
-    const WithPassthroughNativeRender = (props) => {
-        const isNative = useContext(IsNativeContext);
-        if (isNative) {
-            return _jsx(_Fragment, { children: props.children });
-        }
-        return _jsx(Component, Object.assign({}, props));
-    };
-    return WithPassthroughNativeRender;
-}
 //# sourceMappingURL=Select.js.map

package/dist/esm/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/esm/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").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").SelectRoot & {
+        Root: typeof import("@base-ui/react/select").SelectRoot;
+        Item: ({ ref: forwardedRef, children, className, ...props }: import("@base-ui/react/select").SelectItemProps & {
             ref?: React.Ref<HTMLDivElement>;
         }) => import("react/jsx-runtime").JSX.Element;
-        Group: (props: import("@radix-ui/react-select").SelectGroupProps) => import("react/jsx-runtime").JSX.Element;
-        Trigger: ({ ref, children, asChild, ...props }: import("./Select.js").SelectTriggerProps & {
+        Group: import("react").ForwardRefExoticComponent<import("@base-ui/react/select").SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+        Trigger: ({ ref, children, render, ...props }: import("./Select.js").SelectTriggerProps & {
             ref?: React.Ref<HTMLButtonElement>;
         }) => import("react/jsx-runtime").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").SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+        GroupLabel: import("react").FunctionComponent<import("@base-ui/react/select").SelectGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+        Separator: import("react").FunctionComponent<import("@base-ui/react/separator").SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+        Icon: ({ ref: forwardedRef, className, ...props }: import("@base-ui/react/select").SelectIconProps & {
             ref?: React.Ref<HTMLDivElement>;
-        }>;
-        Content: import("react").FunctionComponent<any>;
+        }) => import("react/jsx-runtime").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").SelectPopupProps & import("@base-ui/react/select").SelectPositionerProps & {
+            ref?: import("react").Ref<HTMLDivElement>;
+        }) => import("react/jsx-runtime").JSX.Element;
+        Arrow: ({ className, ...props }: import("@base-ui/react/select").SelectArrowProps) => import("react/jsx-runtime").JSX.Element;
+        ItemRoot: import("react").FunctionComponent<import("@base-ui/react/select").SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+        ItemText: import("react").FunctionComponent<import("@base-ui/react/select").SelectItemTextProps & import("react").RefAttributes<HTMLDivElement>>;
+        ItemIndicator: (props: import("@base-ui/react/select").SelectItemIndicatorProps) => import("react/jsx-runtime").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/esm/components/select/Select.stories.js

@@ -1,5 +1,17 @@
 // @unocss-include
+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;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../box/Box.js';
 import { Button } from '../button/index.js';
 import { Select, SelectContent, SelectItem, SelectTrigger } from './Select.js';
 const meta = {
@@ -16,7 +28,16 @@ const meta = {
 export default meta;
 export const Default = {
     render(args) {
-        return (_jsxs(Select, Object.assign({}, args, { children: [_jsx(SelectTrigger, {}), _jsx(SelectContent, { children: ['One', 'Two', 'Three'].map((item) => (_jsx(SelectItem, { value: item, children: item }, item))) })] })));
+        return (_jsx(Box, { full: true, layout: "center center", className: "min-h-200px", children: _jsxs(Select, Object.assign({}, args, { children: [_jsx(SelectTrigger, {}), _jsx(SelectContent, { children: ['One', 'Two', 'Three'].map((item) => (_jsx(SelectItem, { value: item, children: item }, item))) })] })) }));
+    },
+};
+export const LongListWithItemLabels = {
+    render(_a) {
+        var { defaultValue, value } = _a, args = __rest(_a, ["defaultValue", "value"]);
+        return (_jsx(Box, { full: true, layout: "center center", className: "min-h-200px", children: _jsxs(Select, Object.assign({}, args, { defaultValue: 0, itemToStringLabel: (i) => `Item number ${i + 1}`, children: [_jsx(SelectTrigger, {}), _jsx(SelectContent, { children: new Array(50).fill(null).map((_, i) => {
+                            const item = `Item number ${i + 1}`;
+                            return (_jsx(SelectItem, { value: i, children: item }, item));
+                        }) })] })) }));
     },
 };
 export const CompareSelectAndButton = {

package/dist/esm/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,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE/E,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;IACD,IAAI,EAAE;QACL,KAAK,EAAE,KAAK;KACZ;CAC6B,CAAC;AAEhC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,MAAM,oBAAK,IAAI,eACf,KAAC,aAAa,KAAG,EACjB,KAAC,aAAa,cACZ,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACtC,KAAC,UAAU,IAAY,KAAK,EAAE,IAAI,YAChC,IAAI,IADW,IAAI,CAER,CACb,CAAC,GACa,KACR,CACT,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAU;IAC5C,MAAM,CAAC,IAAI;QACV,OAAO,CACN,eAAK,SAAS,EAAC,KAAK,aACnB,MAAC,MAAM,oBAAK,IAAI,eACf,KAAC,aAAa,KAAG,EACjB,KAAC,aAAa,cACZ,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACtC,KAAC,UAAU,IAAY,KAAK,EAAE,IAAI,YAChC,IAAI,IADW,IAAI,CAER,CACb,CAAC,GACa,KACR,EACT,KAAC,MAAM,yBAAgB,EAEvB,MAAC,MAAM,oBAAK,IAAI,eACf,KAAC,aAAa,IAAC,IAAI,EAAC,OAAO,GAAG,EAC9B,KAAC,aAAa,cACZ,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACtC,KAAC,UAAU,IAAY,KAAK,EAAE,IAAI,YAChC,IAAI,IADW,IAAI,CAER,CACb,CAAC,GACa,KACR,EACT,KAAC,MAAM,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":"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"}

package/dist/esm/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?: Ref<HTMLDivElement>;
+}>;
+export declare const SliderControl: import("react").FunctionComponent<import("@base-ui/react/slider").SliderControlProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderTrack: import("react").FunctionComponent<import("@base-ui/react/slider").SliderTrackProps & import("react").RefAttributes<HTMLElement>>;
+export declare const SliderRange: import("react").FunctionComponent<import("@base-ui/react/slider").SliderIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderThumb: import("react").FunctionComponent<import("@base-ui/react/slider").SliderThumbProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderBase: ({ children, color, className, ...props }: SliderProps) => import("react/jsx-runtime").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").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").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").JSX.Element) & {
+    Root: import("react").FunctionComponent<BaseSlider.Root.Props<number | readonly number[]> & {
+        ref?: Ref<HTMLDivElement>;
+    }>;
+    Base: ({ children, color, className, ...props }: 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>>;
+    /** @deprecated - use Indicator */
+    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;
 };

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

@@ -11,20 +11,36 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as SliderPrimitive from '@radix-ui/react-slider';
+import { Slider as BaseSlider } from '@base-ui/react/slider';
 import clsx from 'clsx';
 import { withClassName } from '../../hooks.js';
-export const SliderRoot = 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');
-export const SliderTrack = 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');
-export const SliderRange = 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');
-export const SliderThumb = 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');
+export const SliderRoot = withClassName(BaseSlider.Root, 'layer-components:w-full');
+export const SliderControl = withClassName(BaseSlider.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');
+export const SliderTrack = withClassName(BaseSlider.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');
+export const SliderRange = withClassName(BaseSlider.Indicator, 'layer-components:bg-main layer-components:rounded-lg layer-components:transition-colors', 'layer-variants:[&[data-orientation=vertical]]:bg-main');
+export const SliderThumb = withClassName(BaseSlider.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');
+export const SliderBase = (_a) => {
+    var { children, color, className } = _a, props = __rest(_a, ["children", "color", "className"]);
+    return (_jsx(SliderRoot, Object.assign({}, props, { className: clsx(color && `palette-${color}`, className), children: _jsx(SliderControl, { children: children }) })));
+};
+/**
+ * A pre-configured Slider UI component. Meant to compose
+ * under Slider.Root when you want to use Slider.Value, too
+ */
+export const SliderUi = ({ label, className, }) => (_jsx(Slider.Control, { className: className, children: _jsxs(SliderTrack, { children: [_jsx(SliderRange, {}), _jsx(SliderThumb, { "aria-label": label })] }) }));
 export const Slider = Object.assign(function Slider(_a) {
-    var { ref, label, color, className } = _a, props = __rest(_a, ["ref", "label", "color", "className"]);
-    return (_jsxs(SliderRoot, Object.assign({ ref: ref, className: clsx(color && `palette-${color}`, className) }, props, { children: [_jsx(SliderTrack, { children: _jsx(SliderRange, { "data-color": color }) }), _jsx(SliderThumb, { "aria-label": label, "data-color": color })] })));
+    var { label } = _a, props = __rest(_a, ["label"]);
+    return (_jsx(SliderRoot, Object.assign({}, props, { children: _jsx(SliderUi, {}) })));
 }, {
     Root: SliderRoot,
+    Base: SliderBase,
+    Control: SliderControl,
     Track: SliderTrack,
+    /** @deprecated - use Indicator */
     Range: SliderRange,
+    Indicator: SliderRange,
     Thumb: SliderThumb,
+    Value: BaseSlider.Value,
+    Ui: SliderUi,
 });
 //# sourceMappingURL=Slider.js.map

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,aAAa,CACtC,UAAU,CAAC,IAAI,EACf,yBAAyB,CACzB,CAAC;AAEF,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: import("react").FunctionComponent<import("@base-ui/react/slider").SliderRoot.Props<number | readonly number[]> & {
+            ref?: import("react").Ref<HTMLDivElement>;
+        }>;
+        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;