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

package/dist/esm/components/scrollArea/ScrollArea.stories.js

@@ -1,25 +1,26 @@
 // @unocss-include
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
 import { ScrollArea } from './ScrollArea.js';
 const meta = {
     title: 'Components/ScrollArea',
-    component: ScrollArea,
-    argTypes: {},
+    argTypes: {
+        direction: {
+            control: { type: 'select' },
+            options: ['vertical', 'horizontal', 'both'],
+        },
+    },
+    args: {
+        direction: 'vertical',
+    },
     parameters: {
         controls: { expanded: true },
     },
 };
 export default meta;
 export const Default = {
-    render(args) {
-        return (_jsx(ScrollArea, Object.assign({}, args, { children: _jsx("div", { className: "flex flex-col gap-2", children: Array.from({ length: 100 }, (_, i) => (_jsxs("div", { className: "h-10 w-full bg-primary-wash color-primary flex items-center justify-center", children: ["Item ", i + 1] }, i))) }) })));
-    },
-};
-export const StickToBottom = {
-    render(args) {
-        const [itemCount, setItemCount] = useState(50);
-        return (_jsxs("div", { className: "flex flex-col gap-2 w-full h-full overflow-hidden", children: [_jsx("button", { onClick: () => setItemCount((prev) => prev + 1), children: "Add Item" }), _jsx("button", { onClick: () => setItemCount((prev) => prev - 1), children: "Remove Item" }), _jsx(ScrollArea, Object.assign({}, args, { className: "flex-1", stickToBottom: true, children: _jsx("div", { className: "flex flex-col gap-2", children: Array.from({ length: itemCount }, (_, i) => (_jsxs("div", { className: "h-10 w-full bg-primary-wash color-primary flex items-center justify-center", children: ["Item ", i + 1] }, i))) }) }))] }));
+    render({ direction }) {
+        return (_jsx(ScrollArea, { style: { height: '200px', width: '400px' }, children: _jsx(ScrollArea.Content, { children: _jsxs("div", { className: clsx(direction === 'horizontal' && 'w-10000px', direction === 'both' && 'w-800px'), children: [_jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sollicitudin ornare. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consectetur. Vivamus fermentum nibh in augue. Praesent a lacus at urna consequat rhoncus. Morbi dapibus sapien vel ante. Aliquam erat volutpat. Pellentesque sagittis ligula eget metus. Vestibulum commodo. Ut rhoncus gravida arcu." }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sollicitudin ornare. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consectetur. Vivamus fermentum nibh in augue. Praesent a lacus at urna consequat rhoncus. Morbi dapibus sapien vel ante. Aliquam erat volutpat. Pellentesque sagittis ligula eget metus. Vestibulum commodo. Ut rhoncus gravida arcu." }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sollicitudin ornare. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consectetur. Vivamus fermentum nibh in augue. Praesent a lacus at urna consequat rhoncus. Morbi dapibus sapien vel ante. Aliquam erat volutpat. Pellentesque sagittis ligula eget metus. Vestibulum commodo. Ut rhoncus gravida arcu." })] }) }) }));
     },
 };
 //# sourceMappingURL=ScrollArea.stories.js.map

package/dist/esm/components/scrollArea/ScrollArea.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.stories.js","sourceRoot":"","sources":["../../../../src/components/scrollArea/ScrollArea.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACiC,CAAC;AAEpC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,KAAC,UAAU,oBAAK,IAAI,cACnB,cAAK,SAAS,EAAC,qBAAqB,YAClC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACtC,eAEC,SAAS,EAAC,4EAA4E,sBAEhF,CAAC,GAAG,CAAC,KAHN,CAAC,CAID,CACN,CAAC,GACG,IACM,CACb,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IACnC,MAAM,CAAC,IAAI;QACV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC/C,OAAO,CACN,eAAK,SAAS,EAAC,mDAAmD,aACjE,iBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,yBAE9C,EACT,iBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,4BAE9C,EACT,KAAC,UAAU,oBAAK,IAAI,IAAE,SAAS,EAAC,QAAQ,EAAC,aAAa,kBACrD,cAAK,SAAS,EAAC,qBAAqB,YAClC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC5C,eAEC,SAAS,EAAC,4EAA4E,sBAEhF,CAAC,GAAG,CAAC,KAHN,CAAC,CAID,CACN,CAAC,GACG,IACM,IACR,CACN,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"ScrollArea.stories.js","sourceRoot":"","sources":["../../../../src/components/scrollArea/ScrollArea.stories.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE;QACT,SAAS,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,MAAM,CAAC;SAC3C;KACD;IACD,IAAI,EAAE;QACL,SAAS,EAAE,UAAU;KACrB;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACiE,CAAC;AAEpE,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,EAAE,SAAS,EAAE;QACnB,OAAO,CACN,KAAC,UAAU,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,YACrD,KAAC,UAAU,CAAC,OAAO,cAClB,eACC,SAAS,EAAE,IAAI,CACd,SAAS,KAAK,YAAY,IAAI,WAAW,EACzC,SAAS,KAAK,MAAM,IAAI,SAAS,CACjC,aAED,4sCAoBI,EACJ,4sCAoBI,EACJ,4sCAoBI,IACC,GACc,GACT,CACb,CAAC;IACH,CAAC;CACD,CAAC"}

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

@@ -1,60 +1,51 @@
-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;
 };

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,63 @@ 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(BaseSelect.ItemText, { 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,
 });
-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,25 @@ 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;
     };
     argTypes: {};
     parameters: {
@@ -32,4 +35,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: <Value extends number | readonly number[]>(props: BaseSlider.Root.Props<Value> & {
+    ref?: Ref<HTMLDivElement>;
+}) => import("react").JSX.Element;
+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: <Value extends number | readonly number[]>(props: BaseSlider.Root.Props<Value> & {
+        ref?: Ref<HTMLDivElement>;
+    }) => import("react").JSX.Element;
+    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 = BaseSlider.Root;
+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