@moduix/react 2.1.0 → 2.2.4

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

@@ -1,28 +1,23 @@
-import { ReactNode } from "react";
-import { Slider, useSlider, useSliderContext } from "@ark-ui/react/slider";
-
-//#region src/components/slider/Slider.d.ts
-declare function SliderThumbs({
-  className
-}: {
-  className?: string;
+import { Slider as SliderPrimitive, useSlider, useSliderContext } from '@ark-ui/react/slider';
+import type { ReactNode } from 'react';
+declare function SliderThumbs({ className }: {
+    className?: string;
 }): import("react").JSX.Element[];
-declare const Slider$1: import("react").ForwardRefExoticComponent<Omit<Slider.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<Slider.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<Slider.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Context: (props: Slider.ContextProps) => ReactNode;
-  useSlider: (props?: import("@ark-ui/react/slider").UseSliderProps) => import("@ark-ui/react/slider").UseSliderReturn;
-  useSliderContext: () => import("@ark-ui/react/slider").UseSliderContext;
-  Label: import("react").ForwardRefExoticComponent<Omit<Slider.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-  ValueText: import("react").ForwardRefExoticComponent<Omit<Slider.ValueTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Control: import("react").ForwardRefExoticComponent<Omit<Slider.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Track: import("react").ForwardRefExoticComponent<Omit<Slider.TrackProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Range: import("react").ForwardRefExoticComponent<Omit<Slider.RangeProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Thumb: import("react").ForwardRefExoticComponent<Omit<Slider.ThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Thumbs: typeof SliderThumbs;
-  MarkerGroup: import("react").ForwardRefExoticComponent<Omit<Slider.MarkerGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Marker: import("react").ForwardRefExoticComponent<Omit<Slider.MarkerProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  DraggingIndicator: import("react").ForwardRefExoticComponent<Omit<Slider.DraggingIndicatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Slider: import("react").ForwardRefExoticComponent<Omit<SliderPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<SliderPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<SliderPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: SliderPrimitive.ContextProps) => ReactNode;
+    useSlider: (props?: import("@ark-ui/react/slider").UseSliderProps) => import("@ark-ui/react/slider").UseSliderReturn;
+    useSliderContext: () => import("@ark-ui/react/slider").UseSliderContext;
+    Label: import("react").ForwardRefExoticComponent<Omit<SliderPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    ValueText: import("react").ForwardRefExoticComponent<Omit<SliderPrimitive.ValueTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Control: import("react").ForwardRefExoticComponent<Omit<SliderPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Track: import("react").ForwardRefExoticComponent<Omit<SliderPrimitive.TrackProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Range: import("react").ForwardRefExoticComponent<Omit<SliderPrimitive.RangeProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Thumb: import("react").ForwardRefExoticComponent<Omit<SliderPrimitive.ThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Thumbs: typeof SliderThumbs;
+    MarkerGroup: import("react").ForwardRefExoticComponent<Omit<SliderPrimitive.MarkerGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Marker: import("react").ForwardRefExoticComponent<Omit<SliderPrimitive.MarkerProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    DraggingIndicator: import("react").ForwardRefExoticComponent<Omit<SliderPrimitive.DraggingIndicatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 };
-//#endregion
-export { Slider$1 as Slider, useSlider, useSliderContext };
+export { Slider, useSlider, useSliderContext };

package/dist/components/slider/Slider.js

@@ -1,128 +1,137 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import Slider_module_default from "./Slider.module.js";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slider, useSlider, useSliderContext } from "@ark-ui/react/slider";
 import { clsx } from "clsx";
 import { Children, cloneElement, forwardRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Slider, useSlider, useSliderContext } from "@ark-ui/react/slider";
-//#region src/components/slider/Slider.tsx
-const SliderRoot = forwardRef(function SliderRoot({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Slider.Root, {
-		ref,
-		"data-slot": "slider-root",
-		className: clsx(Slider_module_default.root, normalizeClassName(className)),
-		...props
-	});
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Slider_module from "./Slider.module.js";
+const Slider_SliderRoot = /*#__PURE__*/ forwardRef(function({ className, readOnly, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Slider.Root, {
+        ref: ref,
+        "data-slot": "slider-root",
+        "data-readonly": readOnly ? '' : void 0,
+        className: clsx(Slider_module.root, normalizeClassName(className)),
+        readOnly: readOnly,
+        ...props
+    });
 });
-const SliderRootProvider = forwardRef(function SliderRootProvider({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Slider.RootProvider, {
-		ref,
-		"data-slot": "slider-root-provider",
-		className: clsx(Slider_module_default.root, normalizeClassName(className)),
-		...props
-	});
+const Slider_SliderRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Slider.RootProvider, {
+        ref: ref,
+        "data-slot": "slider-root-provider",
+        className: clsx(Slider_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const SliderLabel = forwardRef(function SliderLabel({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Slider.Label, {
-		ref,
-		"data-slot": "slider-label",
-		className: clsx(Slider_module_default.label, normalizeClassName(className)),
-		...props
-	});
+const Slider_SliderLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Slider.Label, {
+        ref: ref,
+        "data-slot": "slider-label",
+        className: clsx(Slider_module.label, normalizeClassName(className)),
+        ...props
+    });
 });
-const SliderValueText = forwardRef(function SliderValueText({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Slider.ValueText, {
-		ref,
-		"data-slot": "slider-value-text",
-		className: clsx(Slider_module_default.valueText, normalizeClassName(className)),
-		...props
-	});
+const Slider_SliderValueText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Slider.ValueText, {
+        ref: ref,
+        "data-slot": "slider-value-text",
+        className: clsx(Slider_module.valueText, normalizeClassName(className)),
+        ...props
+    });
 });
-const SliderControl = forwardRef(function SliderControl({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Slider.Control, {
-		ref,
-		"data-slot": "slider-control",
-		className: clsx(Slider_module_default.control, normalizeClassName(className)),
-		...props
-	});
+const Slider_SliderControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Slider.Control, {
+        ref: ref,
+        "data-slot": "slider-control",
+        className: clsx(Slider_module.control, normalizeClassName(className)),
+        ...props
+    });
 });
-const SliderTrack = forwardRef(function SliderTrack({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Slider.Track, {
-		ref,
-		"data-slot": "slider-track",
-		className: clsx(Slider_module_default.track, normalizeClassName(className)),
-		...props
-	});
+const Slider_SliderTrack = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Slider.Track, {
+        ref: ref,
+        "data-slot": "slider-track",
+        className: clsx(Slider_module.track, normalizeClassName(className)),
+        ...props
+    });
 });
-const SliderRange = forwardRef(function SliderRange({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Slider.Range, {
-		ref,
-		"data-slot": "slider-range",
-		className: clsx(Slider_module_default.range, normalizeClassName(className)),
-		...props
-	});
+const Slider_SliderRange = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Slider.Range, {
+        ref: ref,
+        "data-slot": "slider-range",
+        className: clsx(Slider_module.range, normalizeClassName(className)),
+        ...props
+    });
 });
-const SliderThumb = forwardRef(function SliderThumb({ asChild, children, className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Slider.Thumb, {
-		ref,
-		asChild,
-		"data-slot": "slider-thumb",
-		className: clsx(Slider_module_default.thumb, normalizeClassName(className)),
-		...props,
-		children: withHiddenInput(children, asChild)
-	});
+const Slider_SliderThumb = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Slider.Thumb, {
+        ref: ref,
+        asChild: asChild,
+        "data-slot": "slider-thumb",
+        className: clsx(Slider_module.thumb, normalizeClassName(className)),
+        ...props,
+        children: withHiddenInput(children, asChild)
+    });
 });
 function withHiddenInput(children, asChild) {
-	const hiddenInput = /* @__PURE__ */ jsx(Slider.HiddenInput, { "data-slot": "slider-hidden-input" });
-	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
-	const child = Children.only(children);
-	return cloneElement(child, {}, child.props.children, hiddenInput);
+    const hiddenInput = /*#__PURE__*/ jsx(Slider.HiddenInput, {
+        "data-slot": "slider-hidden-input"
+    });
+    if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            children,
+            hiddenInput
+        ]
+    });
+    const child = Children.only(children);
+    return /*#__PURE__*/ cloneElement(child, {}, child.props.children, hiddenInput);
 }
 function SliderThumbs({ className }) {
-	return useSliderContext().value.map((_, index) => /* @__PURE__ */ jsx(SliderThumb, {
-		index,
-		className
-	}, index));
+    const slider = useSliderContext();
+    return slider.value.map((_, index)=>/*#__PURE__*/ jsx(Slider_SliderThumb, {
+            index: index,
+            className: className
+        }, index));
 }
-const SliderMarkerGroup = forwardRef(function SliderMarkerGroup({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Slider.MarkerGroup, {
-		ref,
-		"data-slot": "slider-marker-group",
-		className: clsx(Slider_module_default.markerGroup, normalizeClassName(className)),
-		...props
-	});
+const Slider_SliderMarkerGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Slider.MarkerGroup, {
+        ref: ref,
+        "data-slot": "slider-marker-group",
+        className: clsx(Slider_module.markerGroup, normalizeClassName(className)),
+        ...props
+    });
 });
-const SliderMarker = forwardRef(function SliderMarker({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Slider.Marker, {
-		ref,
-		"data-slot": "slider-marker",
-		className: clsx(Slider_module_default.marker, normalizeClassName(className)),
-		...props
-	});
+const Slider_SliderMarker = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Slider.Marker, {
+        ref: ref,
+        "data-slot": "slider-marker",
+        className: clsx(Slider_module.marker, normalizeClassName(className)),
+        ...props
+    });
 });
-const SliderDraggingIndicator = forwardRef(function SliderDraggingIndicator({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Slider.DraggingIndicator, {
-		ref,
-		"data-slot": "slider-dragging-indicator",
-		className: clsx(Slider_module_default.draggingIndicator, normalizeClassName(className)),
-		...props
-	});
+const Slider_SliderDraggingIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Slider.DraggingIndicator, {
+        ref: ref,
+        "data-slot": "slider-dragging-indicator",
+        className: clsx(Slider_module.draggingIndicator, normalizeClassName(className)),
+        ...props
+    });
 });
-const Slider$1 = Object.assign(SliderRoot, {
-	Root: SliderRoot,
-	RootProvider: SliderRootProvider,
-	Context: Slider.Context,
-	useSlider,
-	useSliderContext,
-	Label: SliderLabel,
-	ValueText: SliderValueText,
-	Control: SliderControl,
-	Track: SliderTrack,
-	Range: SliderRange,
-	Thumb: SliderThumb,
-	Thumbs: SliderThumbs,
-	MarkerGroup: SliderMarkerGroup,
-	Marker: SliderMarker,
-	DraggingIndicator: SliderDraggingIndicator
+const Slider_Slider = Object.assign(Slider_SliderRoot, {
+    Root: Slider_SliderRoot,
+    RootProvider: Slider_SliderRootProvider,
+    Context: Slider.Context,
+    useSlider: useSlider,
+    useSliderContext: useSliderContext,
+    Label: Slider_SliderLabel,
+    ValueText: Slider_SliderValueText,
+    Control: Slider_SliderControl,
+    Track: Slider_SliderTrack,
+    Range: Slider_SliderRange,
+    Thumb: Slider_SliderThumb,
+    Thumbs: SliderThumbs,
+    MarkerGroup: Slider_SliderMarkerGroup,
+    Marker: Slider_SliderMarker,
+    DraggingIndicator: Slider_SliderDraggingIndicator
 });
-//#endregion
-export { Slider$1 as Slider, useSlider, useSliderContext };
+export { Slider_Slider as Slider, useSlider, useSliderContext };

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

@@ -1,16 +1,14 @@
-import './Slider.css';
-//#region src/components/slider/Slider.module.css
-var Slider_module_default = {
-	"control": "NN9-IW_control",
-	"draggingIndicator": "NN9-IW_draggingIndicator",
-	"label": "NN9-IW_label",
-	"marker": "NN9-IW_marker",
-	"markerGroup": "NN9-IW_markerGroup",
-	"range": "NN9-IW_range",
-	"root": "NN9-IW_root",
-	"thumb": "NN9-IW_thumb",
-	"track": "NN9-IW_track",
-	"valueText": "NN9-IW_valueText"
+import "./Slider_module.css";
+const Slider_module = {
+    root: "root-dI3Ye4",
+    label: "label-cCfbP0",
+    valueText: "valueText-qR8bCh",
+    control: "control-GAKJM5",
+    markerGroup: "markerGroup-LGDl6p",
+    track: "track-sx0K_D",
+    range: "range-DYKNW4",
+    thumb: "thumb-dktwnB",
+    draggingIndicator: "draggingIndicator-wUdzng",
+    marker: "marker-RkqZdP"
 };
-//#endregion
-export { Slider_module_default as default };
+export default Slider_module;

package/dist/components/slider/Slider_module.css

@@ -0,0 +1,222 @@
+@layer moduix.components {
+  .root-dI3Ye4 {
+    box-sizing: border-box;
+    gap: var(--moduix-slider-gap, var(--moduix-spacing-2));
+    width: var(--moduix-slider-width, 12rem);
+    max-inline-size: 100%;
+    color: var(--moduix-slider-color, var(--moduix-color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .root-dI3Ye4[data-orientation="vertical"] {
+    column-gap: var(--moduix-slider-marker-group-margin-inline-start, var(--moduix-spacing-2));
+    width: var(--moduix-slider-width-vertical, max-content);
+    height: var(--moduix-slider-height, 12rem);
+    grid-template: "label value"
+                   "control markers" minmax(0, 1fr)
+                   / auto max-content;
+    align-items: center;
+    display: grid;
+  }
+
+  .root-dI3Ye4[data-orientation="vertical"] .label-cCfbP0 {
+    grid-area: label;
+  }
+
+  .root-dI3Ye4[data-orientation="vertical"] .valueText-qR8bCh {
+    grid-area: value;
+    justify-self: end;
+  }
+
+  .root-dI3Ye4[data-orientation="vertical"] .control-GAKJM5 {
+    grid-area: control;
+  }
+
+  .root-dI3Ye4[data-orientation="vertical"] .markerGroup-LGDl6p {
+    grid-area: markers;
+  }
+
+  .root-dI3Ye4[data-disabled] {
+    opacity: var(--moduix-slider-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .label-cCfbP0 {
+    color: var(--moduix-slider-label-color, var(--moduix-slider-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-slider-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-slider-label-font-weight, var(--moduix-weight-regular));
+    line-height: var(--moduix-slider-label-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .valueText-qR8bCh {
+    color: var(--moduix-slider-value-text-color, var(--moduix-slider-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-slider-value-text-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-slider-value-text-font-weight, var(--moduix-weight-regular));
+    line-height: var(--moduix-slider-value-text-line-height, var(--moduix-line-height-text-sm));
+    text-align: right;
+  }
+
+  .control-GAKJM5 {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: var(--moduix-slider-control-size, var(--moduix-spacing-5));
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    align-items: center;
+    display: flex;
+    position: relative;
+  }
+
+  .control-GAKJM5[data-orientation="vertical"] {
+    width: var(--moduix-slider-control-size, var(--moduix-spacing-5));
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .control-GAKJM5[data-disabled], .root-dI3Ye4[data-readonly] .control-GAKJM5 {
+    cursor: default;
+  }
+
+  .track-sx0K_D {
+    width: 100%;
+    height: var(--moduix-slider-track-size, var(--moduix-spacing-1-5));
+    border-radius: var(--moduix-slider-track-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-slider-track-bg, var(--moduix-color-muted));
+    box-shadow: inset 0 0 0 var(--moduix-slider-track-border-width, var(--moduix-border-width-sm))
+      var(--moduix-slider-track-border-color, var(--moduix-color-border));
+    -webkit-user-select: none;
+    user-select: none;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .track-sx0K_D[data-orientation="vertical"] {
+    width: var(--moduix-slider-track-size, var(--moduix-spacing-1-5));
+    height: 100%;
+  }
+
+  .track-sx0K_D[data-invalid] {
+    box-shadow: inset 0 0 0 var(--moduix-slider-track-border-width, var(--moduix-border-width-sm))
+        var(--moduix-color-destructive);
+  }
+
+  .range-DYKNW4 {
+    border-radius: var(--moduix-slider-range-radius, inherit);
+    background-color: var(--moduix-slider-range-bg, var(--moduix-color-primary));
+    height: 100%;
+  }
+
+  .range-DYKNW4[data-orientation="vertical"] {
+    width: 100%;
+  }
+
+  .range-DYKNW4[data-invalid] {
+    background-color: var(--moduix-color-destructive);
+  }
+
+  .thumb-dktwnB {
+    box-sizing: border-box;
+    width: var(--moduix-slider-thumb-size, var(--moduix-spacing-4));
+    height: var(--moduix-slider-thumb-size, var(--moduix-spacing-4));
+    border: var(--moduix-slider-thumb-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-slider-thumb-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-slider-thumb-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-slider-thumb-bg, var(--moduix-color-background));
+    box-shadow: var(--moduix-slider-thumb-shadow, var(--moduix-shadow-sm));
+    -webkit-user-select: none;
+    user-select: none;
+    transition: border-color var(--moduix-slider-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-slider-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-slider-transition, var(--moduix-transition-default));
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  .thumb-dktwnB[data-dragging] {
+    border-color: var(--moduix-slider-focus-ring-color, var(--moduix-color-ring));
+    box-shadow: 0 0 0 var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))
+          var(--moduix-slider-focus-ring-color, var(--moduix-color-ring)),
+        var(--moduix-slider-thumb-shadow-dragging, var(--moduix-shadow-md));
+  }
+
+  .thumb-dktwnB:focus-visible {
+    border-color: var(--moduix-slider-focus-ring-color, var(--moduix-color-ring));
+    box-shadow: 0 0 0 var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))
+        var(--moduix-slider-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .thumb-dktwnB[data-disabled] {
+    pointer-events: none;
+  }
+
+  .thumb-dktwnB[data-invalid] {
+    border-color: var(--moduix-color-destructive);
+  }
+
+  .thumb-dktwnB[data-invalid]:focus-visible {
+    box-shadow: 0 0 0 var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))
+          var(--moduix-color-destructive);
+  }
+
+  .draggingIndicator-wUdzng {
+    top: calc(-1 * var(--moduix-spacing-8));
+    padding: var(--moduix-spacing-1) var(--moduix-spacing-2);
+    border-radius: var(--moduix-slider-dragging-indicator-radius, var(--moduix-radius-sm));
+    background-color: var(--moduix-slider-dragging-indicator-bg, var(--moduix-color-foreground));
+    color: var(--moduix-slider-dragging-indicator-color, var(--moduix-color-background));
+    font-size: var(--moduix-slider-dragging-indicator-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-slider-dragging-indicator-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-slider-dragging-indicator-line-height, 1);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  .markerGroup-LGDl6p {
+    margin-top: var(--moduix-slider-marker-group-margin-top, var(--moduix-spacing-2));
+    justify-content: space-between;
+    display: flex;
+  }
+
+  .markerGroup-LGDl6p[data-orientation="vertical"] {
+    flex-direction: column;
+    height: 100%;
+    margin: 0;
+  }
+
+  .marker-RkqZdP {
+    color: var(--moduix-slider-marker-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-slider-marker-font-size, var(--moduix-text-xs));
+    line-height: var(--moduix-slider-marker-line-height, var(--moduix-line-height-text-xs));
+    position: relative;
+  }
+
+  .marker-RkqZdP:before {
+    width: var(--moduix-slider-marker-dot-size, var(--moduix-spacing-1));
+    height: var(--moduix-slider-marker-dot-size, var(--moduix-spacing-1));
+    border-radius: var(--moduix-radius-full);
+    background-color: var(--moduix-slider-marker-dot-bg, var(--moduix-color-border));
+    content: "";
+    position: absolute;
+    inset-block-start: calc(-1 * var(--moduix-spacing-2));
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+
+  .marker-RkqZdP:is([data-state="under-value"], [data-state="at-value"]):before {
+    background-color: var(--moduix-slider-marker-dot-bg-active, var(--moduix-slider-range-bg, var(--moduix-color-primary)));
+  }
+
+  .marker-RkqZdP[data-orientation="vertical"]:before {
+    inset-block-start: 50%;
+    inset-inline-start: calc(-1 * var(--moduix-spacing-2));
+    transform: translate(-50%, -50%);
+  }
+}
+

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

@@ -1,2 +1 @@
-import { Slider, useSlider, useSliderContext } from "./Slider.js";
-export { Slider, useSlider, useSliderContext };
+export * from './Slider.js';

package/dist/components/slider/index.js

@@ -0,0 +1 @@
+export * from "./Slider.js";

package/dist/components/spinner/Spinner.d.ts

@@ -1,12 +1,10 @@
-//#region src/components/spinner/Spinner.d.ts
 declare const Spinner: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  decorative?: boolean;
-} & import("react").RefAttributes<HTMLSpanElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
-    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    size?: "inherit" | "xs" | "sm" | "md" | "lg" | "xl";
     decorative?: boolean;
-  } & import("react").RefAttributes<HTMLSpanElement>>;
+} & import("react").RefAttributes<HTMLSpanElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+        size?: "inherit" | "xs" | "sm" | "md" | "lg" | "xl";
+        decorative?: boolean;
+    } & import("react").RefAttributes<HTMLSpanElement>>;
 };
-//#endregion
-export { Spinner };
+export { Spinner };