@a-type/ui 5.0.21 → 6.0.0

package/dist/components/select/Select.js

@@ -0,0 +1,70 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { Select as BaseSelect, } from '@base-ui/react/select';
+import classNames, { clsx } from 'clsx';
+import { withClassName } from '../../hooks/withClassName.js';
+import { Button } from '../button/Button.js';
+import buttonCls from '../button/Button.module.css';
+import { Icon } from '../icon/index.js';
+import menuCls from '../primitives/menus.module.css';
+import { ArrowSvg } from '../utility/ArrowSvg.js';
+import cls from './Select.module.css';
+export const SelectItem = (_a) => {
+    var { ref: forwardedRef, children, className } = _a, props = __rest(_a, ["ref", "children", "className"]);
+    return (_jsxs(SelectItemRoot, Object.assign({ className: className }, props, { ref: forwardedRef, children: [_jsx(SelectItemText, { children: children }), _jsx(SelectItemIndicator, {})] })));
+};
+export const SelectItemRoot = withClassName(BaseSelect.Item, menuCls.item);
+export const SelectItemIndicatorRoot = withClassName(BaseSelect.ItemIndicator, menuCls.itemIndicator);
+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(buttonCls.root, cls.trigger);
+export const SelectTriggerBase = withClassName(BaseSelect.Trigger, selectTriggerClassName);
+export const UnstyledSelectTrigger = BaseSelect.Trigger;
+export const SelectTrigger = function SelectTrigger(_a) {
+    var { ref, children, render, placeholder } = _a, props = __rest(_a, ["ref", "children", "render", "placeholder"]);
+    return (_jsx(UnstyledSelectTrigger, Object.assign({}, props, { ref: ref, render: render || _jsx(Button, { className: cls.trigger }), children: children || (_jsxs(_Fragment, { children: [_jsx(SelectValue, { placeholder: placeholder }), _jsx(SelectIcon, {})] })) })));
+};
+export const SelectValue = withClassName(BaseSelect.Value, cls.value);
+export const SelectGroupLabel = withClassName(BaseSelect.GroupLabel, menuCls.groupLabel, cls.groupLabel);
+export const SelectSeparator = withClassName(BaseSelect.Separator, menuCls.separator);
+export const SelectIcon = (_a) => {
+    var { ref: forwardedRef, className } = _a, props = __rest(_a, ["ref", "className"]);
+    return (_jsx(BaseSelect.Icon, Object.assign({ className: classNames(cls.icon, className) }, props, { ref: forwardedRef, children: _jsx(Icon, { name: "chevron" }) })));
+};
+export const SelectArrow = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(BaseSelect.Arrow, Object.assign({ className: clsx(menuCls.arrow, className) }, props, { children: _jsx(ArrowSvg, {}) })));
+};
+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 (_jsxs(BaseSelect.Portal, { children: [_jsx(BaseSelect.Backdrop, {}), _jsx(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(cls.positioner), children: _jsxs(BaseSelect.Popup, Object.assign({ className: classNames(menuCls.popup, cls.popup, className) }, props, { ref: forwardedRef, children: [_jsx(SelectArrow, {}), _jsx(BaseSelect.ScrollUpArrow, { className: menuCls.scrollArrow, children: _jsx(Icon, { name: "chevron", style: { transform: 'rotate(180deg)' } }) }), _jsx(BaseSelect.List, { className: menuCls.itemList, children: children }), _jsx(BaseSelect.ScrollDownArrow, { className: menuCls.scrollArrow, children: _jsx(Icon, { name: "chevron" }) })] })) })] }));
+};
+const SelectBase = SelectRoot;
+export const Select = Object.assign(SelectBase, {
+    Root: SelectRoot,
+    Item: SelectItem,
+    Group: SelectGroup,
+    Trigger: SelectTrigger,
+    Value: SelectValue,
+    GroupLabel: SelectGroupLabel,
+    Separator: SelectSeparator,
+    Icon: SelectIcon,
+    Content: SelectContent,
+    Arrow: SelectArrow,
+    ItemRoot: SelectItemRoot,
+    ItemText: SelectItemText,
+    ItemIndicator: SelectItemIndicator,
+});
+//# sourceMappingURL=Select.js.map

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

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

package/dist/components/select/Select.module.css

@@ -0,0 +1,46 @@
+.trigger {
+	display: inline-flex;
+	font-weight: normal;
+	gap: var(--m-spacing-md);
+
+	&[data-placeholder] {
+		color: var(--m-color-neutral-heavy);
+	}
+}
+
+.value {
+	display: flex;
+	flex-direction: row;
+}
+
+.groupLabel {
+	padding-inline: var(--m-spacing-lg);
+}
+
+.icon {
+	margin-left: auto;
+	@apply --mx-fg(inherit);
+
+	& > [data-icon] {
+		position: relative;
+		top: --fn-literal(1px);
+		width: --fn-literal(12px);
+		height: --fn-literal(12px);
+	}
+}
+
+.positioner {
+	user-select: none;
+	transform-origin: var(--transform-origin);
+
+	&:focus {
+		outline: none;
+	}
+}
+
+.popup {
+	min-width: var(--anchor-width);
+	&[data-side='none'] {
+		min-width: calc(var(--anchor-width) + 2rem);
+	}
+}

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

@@ -0,0 +1,44 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Select } from './Select.js';
+declare const meta: {
+    title: string;
+    component: typeof import("@base-ui/react").SelectRoot & {
+        Root: typeof import("@base-ui/react").SelectRoot;
+        Item: ({ ref: forwardedRef, children, className, ...props }: import("@base-ui/react").SelectItemProps & {
+            ref?: React.Ref<HTMLDivElement>;
+        }) => import("react/jsx-runtime").JSX.Element;
+        Group: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+        Trigger: ({ ref, children, render, placeholder, ...props }: import("./Select.js").SelectTriggerProps & {
+            ref?: React.Ref<HTMLButtonElement>;
+            placeholder?: string;
+        }) => import("react/jsx-runtime").JSX.Element;
+        Value: import("react").FunctionComponent<Omit<import("@base-ui/react").SelectValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+        GroupLabel: import("react").FunctionComponent<Omit<import("@base-ui/react").SelectGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+        Separator: import("react").FunctionComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+        Icon: ({ ref: forwardedRef, className, ...props }: import("@base-ui/react").SelectIconProps & {
+            ref?: React.Ref<HTMLDivElement>;
+        }) => 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").SelectPopupProps & import("@base-ui/react").SelectPositionerProps & {
+            ref?: import("react").Ref<HTMLDivElement>;
+        }) => import("react/jsx-runtime").JSX.Element;
+        Arrow: ({ className, ...props }: import("@base-ui/react").SelectArrowProps) => import("react/jsx-runtime").JSX.Element;
+        ItemRoot: import("react").FunctionComponent<Omit<import("@base-ui/react").SelectItemProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+        ItemText: import("react").FunctionComponent<Omit<import("@base-ui/react").SelectItemTextProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+        ItemIndicator: (props: import("@base-ui/react").SelectItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    };
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+    args: {
+        value: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const Default: Story;
+export declare const Empty: Story;
+export declare const LongListWithItemLabels: Story;
+export declare const CompareSelectAndButton: Story;

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

@@ -0,0 +1,52 @@
+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 = {
+    title: 'Components/Select',
+    component: Select,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+    args: {
+        value: 'One',
+    },
+};
+export default meta;
+export const Default = {
+    render(args) {
+        return (_jsx(Box, { full: true, layout: "center center", style: { minHeight: 200 }, 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 Empty = {
+    render(args) {
+        return (_jsx(Box, { full: true, layout: "center center", style: { minHeight: 200 }, children: _jsxs(Select, { value: null, children: [_jsx(SelectTrigger, { placeholder: "Select an option" }), _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", style: { minHeight: 200 }, 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 = {
+    render(args) {
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row' }, children: [_jsxs(Select, Object.assign({}, args, { children: [_jsx(SelectTrigger, {}), _jsx(SelectContent, { children: ['One', 'Two', 'Three'].map((item) => (_jsx(SelectItem, { value: item, children: item }, item))) })] })), _jsx(Button, { children: "Button" }), _jsxs(Select, Object.assign({}, args, { children: [_jsx(SelectTrigger, { size: "small" }), _jsx(SelectContent, { children: ['One', 'Two', 'Three'].map((item) => (_jsx(SelectItem, { value: item, children: item }, item))) })] })), _jsx(Button, { size: "small", children: "Button" })] }));
+    },
+};
+//# sourceMappingURL=Select.stories.js.map

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

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

package/dist/components/select/index.js

@@ -0,0 +1,2 @@
+export * from './Select.js';
+//# sourceMappingURL=index.js.map

package/dist/components/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/select/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/skeletons/TextSkeleton.stories.d.ts

@@ -0,0 +1,29 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { TextSkeleton } from './skeletons.js';
+declare const meta: {
+    title: string;
+    component: ({ maxLength, className, }: {
+        maxLength: number;
+        className?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        maxLength: {
+            control: {
+                type: "number";
+            };
+            description: string;
+        };
+    };
+    args: {
+        maxLength: number;
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof TextSkeleton>;
+export declare const Default: Story;
+export declare const OnBackground: Story;

package/dist/components/skeletons/TextSkeleton.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../index.js';
+import { TextSkeleton } from './skeletons.js';
+const meta = {
+    title: 'Components/TextSkeleton',
+    component: TextSkeleton,
+    argTypes: {
+        maxLength: {
+            control: { type: 'number' },
+            description: 'Maximum length of the random skeleton text',
+        },
+    },
+    args: {
+        maxLength: 20,
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render(args) {
+        return _jsx(TextSkeleton, Object.assign({}, args));
+    },
+};
+export const OnBackground = {
+    render(args) {
+        return (_jsxs(Box, { col: true, gap: true, p: true, color: "attention", surface: true, layout: "start center", children: [_jsx(TextSkeleton, Object.assign({}, args)), _jsx(TextSkeleton, Object.assign({}, args)), _jsx(TextSkeleton, Object.assign({}, args))] }));
+    },
+};
+//# sourceMappingURL=TextSkeleton.stories.js.map

package/dist/components/skeletons/TextSkeleton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextSkeleton.stories.js","sourceRoot":"","sources":["../../../src/components/skeletons/TextSkeleton.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE;QACT,SAAS,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,4CAA4C;SACzD;KACD;IACD,IAAI,EAAE;QACL,SAAS,EAAE,EAAE;KACb;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACmC,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,KAAC,YAAY,oBAAK,IAAI,EAAI,CAAC;IACnC,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IAClC,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,QAAC,GAAG,QAAC,CAAC,QAAC,KAAK,EAAC,WAAW,EAAC,OAAO,QAAC,MAAM,EAAC,cAAc,aAC7D,KAAC,YAAY,oBAAK,IAAI,EAAI,EAC1B,KAAC,YAAY,oBAAK,IAAI,EAAI,EAC1B,KAAC,YAAY,oBAAK,IAAI,EAAI,IACrB,CACN,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/components/skeletons/skeletons.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'clsx';
+import { useState } from 'react';
+import cls from './skeletons.module.css';
+export const TextSkeleton = ({ maxLength, className, }) => {
+    const [length] = useState(() => Math.round(Math.random() * (maxLength - 5) + 5));
+    return (_jsx("span", { className: classNames(cls.textSkeleton, className), style: {
+            width: `${length}ch`,
+            height: '1.2em',
+        } }));
+};
+//# sourceMappingURL=skeletons.js.map

package/dist/components/skeletons/skeletons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeletons.js","sourceRoot":"","sources":["../../../src/components/skeletons/skeletons.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,GAAG,MAAM,wBAAwB,CAAC;AAEzC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC5B,SAAS,EACT,SAAS,GAIT,EAAE,EAAE;IACJ,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC9B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAC/C,CAAC;IAEF,OAAO,CACN,eACC,SAAS,EAAE,UAAU,CAAC,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,EAClD,KAAK,EAAE;YACN,KAAK,EAAE,GAAG,MAAM,IAAI;YACpB,MAAM,EAAE,OAAO;SACf,GACA,CACF,CAAC;AACH,CAAC,CAAC"}

package/dist/components/skeletons/skeletons.module.css

@@ -0,0 +1,33 @@
+@keyframes skeleton {
+	0% {
+		background-position: 0% 50%;
+	}
+	100% {
+		background-position: 100% 50%;
+	}
+}
+
+.textSkeleton {
+	background-size: 400%, 400%;
+	display: inline-block;
+	height: 100%;
+	max-width: 100%;
+	border-radius: var(--m-radius-md);
+	width: 100%;
+	flex-shrink: 0;
+	opacity: 20%;
+
+	animation-name: skeleton;
+	animation-duration: 1.5s;
+	animation-iteration-count: infinite;
+	animation-timing-function: var(--m-easing);
+	animation-direction: alternate;
+	animation-play-state: running;
+
+	background-image: linear-gradient(
+		to right,
+		transparent 0%,
+		var(--mx-fg-ref, var(--m-color-main-ink)) 50%,
+		transparent 100%
+	);
+}

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

@@ -0,0 +1,39 @@
+import { Slider as BaseSlider, SliderRootProps } from '@base-ui/react/slider';
+import { Ref } from 'react';
+export declare const SliderRoot: import("react").FunctionComponent<BaseSlider.Root.Props<number | readonly number[]> & {
+    ref?: Ref<HTMLDivElement> | undefined;
+}>;
+export declare const SliderControl: import("react").FunctionComponent<Omit<import("@base-ui/react/slider").SliderControlProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderTrack: import("react").FunctionComponent<Omit<import("@base-ui/react/slider").SliderTrackProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderRange: import("react").FunctionComponent<Omit<import("@base-ui/react/slider").SliderIndicatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderThumb: import("react").FunctionComponent<Omit<import("@base-ui/react/slider").SliderThumbProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderBase: ({ children, 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 {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const Slider: ((props: SliderProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: import("react").FunctionComponent<BaseSlider.Root.Props<number | readonly number[]> & {
+        ref?: Ref<HTMLDivElement> | undefined;
+    }>;
+    Base: ({ children, className, ...props }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+    Control: import("react").FunctionComponent<Omit<import("@base-ui/react/slider").SliderControlProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Track: import("react").FunctionComponent<Omit<import("@base-ui/react/slider").SliderTrackProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    /** @deprecated - use Indicator */
+    Range: import("react").FunctionComponent<Omit<import("@base-ui/react/slider").SliderIndicatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Indicator: import("react").FunctionComponent<Omit<import("@base-ui/react/slider").SliderIndicatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Thumb: import("react").FunctionComponent<Omit<import("@base-ui/react/slider").SliderThumbProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Value: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/slider").SliderValueProps, "ref"> & import("react").RefAttributes<HTMLOutputElement>>;
+    Ui: ({ label, className, }: {
+        label?: string;
+        className?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    getSingle: (v: number | readonly number[]) => any;
+};

package/dist/components/slider/Slider.js

@@ -0,0 +1,50 @@
+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 { Slider as BaseSlider } from '@base-ui/react/slider';
+import clsx from 'clsx';
+import { withClassName } from '../../hooks.js';
+import cls from './Slider.module.css';
+export const SliderRoot = withClassName(BaseSlider.Root, cls.root);
+export const SliderControl = withClassName(BaseSlider.Control, cls.control);
+export const SliderTrack = withClassName(BaseSlider.Track, cls.track);
+export const SliderRange = withClassName(BaseSlider.Indicator, cls.range);
+export const SliderThumb = withClassName(BaseSlider.Thumb, cls.thumb);
+export const SliderBase = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (_jsx(SliderRoot, Object.assign({}, props, { className: clsx(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(props) {
+    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,
+    getSingle: (v) => {
+        if (Array.isArray(v))
+            return v[0];
+        return v;
+    },
+});
+//# sourceMappingURL=Slider.js.map

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

@@ -0,0 +1 @@
+{"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;AAC/C,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;AAEnE,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC;AACtE,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,UAAU,CAAC,SAAS,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC;AAC1E,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC;AAEtE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAA8C,EAAE,EAAE;QAAlD,EAAE,QAAQ,EAAE,SAAS,OAAyB,EAApB,KAAK,cAA/B,yBAAiC,CAAF;IACzD,OAAO,CACN,KAAC,UAAU,oBAAK,KAAK,IAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,YAChD,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;AAMF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAClC,SAAS,MAAM,CAAC,KAAkB;IACjC,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;IAEZ,SAAS,EAAE,CAAC,CAA6B,EAAE,EAAE;QAC5C,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;YAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;QAClC,OAAO,CAAC,CAAC;IACV,CAAC;CACD,CACD,CAAC"}

package/dist/components/slider/Slider.module.css

@@ -0,0 +1,97 @@
+.root {
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.control {
+	position: relative;
+	height: 30px;
+	width: 100%;
+	display: flex;
+	user-select: none;
+	align-items: center;
+	touch-action: none;
+	box-sizing: border-box;
+
+	&[data-orientation='vertical'] {
+		height: 100%;
+		width: 30px;
+		flex-direction: column;
+	}
+}
+
+.track {
+	--size: 8px;
+	position: relative;
+	height: var(--size);
+	flex-grow: 1;
+	user-select: none;
+	transition: background-color var(--m-duration) var(--m-easing);
+	box-sizing: border-box;
+
+	@apply --mx-bg(transparent);
+	border-radius: var(--m-radius-lg);
+	@apply --mx-ring(--fn-ring(var(--m-color-neutral-ink), 1px));
+
+	&[data-orientation='vertical'] {
+		height: 100%;
+		width: var(--size);
+		flex: 1;
+	}
+}
+
+.range {
+	box-sizing: border-box;
+	transition: background-color var(--m-duration) var(--m-easing);
+	@apply --mx-bg(var(--m-color-main));
+	border-radius: var(--m-radius-lg);
+}
+
+.thumb {
+	--thumb-size: 20px;
+
+	height: var(--thumb-size);
+	width: var(--thumb-size);
+	display: flex;
+	cursor: pointer;
+	align-items: center;
+	justify-content: center;
+	line-height: 1;
+	touch-action: none;
+	transition:
+		background-color var(--m-duration) var(--m-easing),
+		box-shadow var(--m-duration) var(--m-easing);
+
+	@apply --mx-shadow;
+	--mx-shadow-value: var(--m-shadow-sm);
+
+	@apply --mx-borderColor(var(--m-color-neutral-ink));
+	border-width: var(--m-lineWidth-md);
+
+	@apply --mx-bg(var(--m-control-bg));
+	border-radius: var(--m-control-radius);
+
+	&:hover {
+		--mx-shadow-value: var(--m-shadow-md);
+	}
+
+	&:active {
+		@apply --mx-bg(var(--m-color-main-light));
+		--mx-shadow-value: var(--m-shadow-lg);
+		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 4px);
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		@apply --mx-bg(var(--m-color-main-light));
+		--mx-shadow-value: var(--m-shadow-lg);
+		--mx-ring-value: --fn-focus-ring();
+	}
+
+	&:disabled {
+		opacity: 0.5;
+	}
+}

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

@@ -0,0 +1,34 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Slider } from './Slider.js';
+declare const meta: {
+    title: string;
+    component: ((props: import("./Slider.js").SliderProps) => import("react/jsx-runtime").JSX.Element) & {
+        Root: import("react").FunctionComponent<import("@base-ui/react").SliderRoot.Props<number | readonly number[]> & {
+            ref?: import("react").Ref<HTMLDivElement> | undefined;
+        }>;
+        Base: ({ children, className, ...props }: import("./Slider.js").SliderProps) => import("react/jsx-runtime").JSX.Element;
+        Control: import("react").FunctionComponent<Omit<import("@base-ui/react").SliderControlProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+        Track: import("react").FunctionComponent<Omit<import("@base-ui/react").SliderTrackProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+        Range: import("react").FunctionComponent<Omit<import("@base-ui/react").SliderIndicatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+        Indicator: import("react").FunctionComponent<Omit<import("@base-ui/react").SliderIndicatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+        Thumb: import("react").FunctionComponent<Omit<import("@base-ui/react").SliderThumbProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+        Value: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SliderValueProps, "ref"> & import("react").RefAttributes<HTMLOutputElement>>;
+        Ui: ({ label, className, }: {
+            label?: string;
+            className?: string;
+        }) => import("react/jsx-runtime").JSX.Element;
+        getSingle: (v: number | readonly number[]) => any;
+    };
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Slider>;
+export declare const Default: Story;
+export declare const Vertical: Story;
+export declare const CustomStyles: Story;
+export declare const WithValue: Story;

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useState } from 'react';
+import { Slider } from './Slider.js';
+const meta = {
+    title: 'Components/Slider',
+    component: Slider,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {};
+export const Vertical = {
+    args: {
+        orientation: 'vertical',
+        style: { height: '200px' },
+    },
+};
+export const CustomStyles = {
+    args: {
+        orientation: 'vertical',
+        style: { height: '200px' },
+        min: -2,
+        max: 2,
+        defaultValue: 0,
+    },
+    render: (args) => {
+        const [value, setValue] = useState(0);
+        return (_jsx(Slider.Base, Object.assign({ value: value, onValueChange: (v) => {
+                if (Array.isArray(v)) {
+                    setValue(v[0]);
+                }
+                else {
+                    setValue(v);
+                }
+            }, className: value < 0
+                ? '@mode-attention'
+                : value > 0
+                    ? '@mode-success'
+                    : '@mode-base' }, args, { children: _jsxs(Slider.Track, { className: clsx({
+                    'bg-attention': value === -2,
+                    'bg-attention-light': value === -1,
+                    'bg-main': value === 0,
+                    'bg-success-light': value === 1,
+                    'bg-success': value === 2,
+                }), children: [_jsx(Slider.Indicator, {}), _jsx(Slider.Thumb, { style: { height: 24, width: 24 }, children: _jsx("div", { className: "text-primary", children: ['😭', '😔', '😐', '😊', '😃'][value + 2] }) })] }) })));
+    },
+};
+export const WithValue = {
+    args: {
+        defaultValue: 50,
+    },
+    render: (args) => (_jsxs(Slider.Root, Object.assign({}, args, { children: [_jsx(Slider.Ui, {}), _jsx(Slider.Value, {})] }))),
+};
+//# sourceMappingURL=Slider.stories.js.map