@mieweb/ui 0.1.0 → 0.2.0

package/dist/components/Modal/index.cjs

@@ -1,43 +1,44 @@
 'use strict';
 
-var chunkNH2JVQ6V_cjs = require('../../chunk-NH2JVQ6V.cjs');
-require('../../chunk-BR2XGATJ.cjs');
+var chunkI7L6CQXR_cjs = require('../../chunk-I7L6CQXR.cjs');
+require('../../chunk-NNEFAUHV.cjs');
 require('../../chunk-FHY3K6PL.cjs');
+require('../../chunk-SCV7C55E.cjs');
 require('../../chunk-OR5DRJCW.cjs');
 
 
 
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
-  get: function () { return chunkNH2JVQ6V_cjs.Modal; }
+  get: function () { return chunkI7L6CQXR_cjs.Modal; }
 });
 Object.defineProperty(exports, "ModalBody", {
   enumerable: true,
-  get: function () { return chunkNH2JVQ6V_cjs.ModalBody; }
+  get: function () { return chunkI7L6CQXR_cjs.ModalBody; }
 });
 Object.defineProperty(exports, "ModalClose", {
   enumerable: true,
-  get: function () { return chunkNH2JVQ6V_cjs.ModalClose; }
+  get: function () { return chunkI7L6CQXR_cjs.ModalClose; }
 });
 Object.defineProperty(exports, "ModalFooter", {
   enumerable: true,
-  get: function () { return chunkNH2JVQ6V_cjs.ModalFooter; }
+  get: function () { return chunkI7L6CQXR_cjs.ModalFooter; }
 });
 Object.defineProperty(exports, "ModalHeader", {
   enumerable: true,
-  get: function () { return chunkNH2JVQ6V_cjs.ModalHeader; }
+  get: function () { return chunkI7L6CQXR_cjs.ModalHeader; }
 });
 Object.defineProperty(exports, "ModalTitle", {
   enumerable: true,
-  get: function () { return chunkNH2JVQ6V_cjs.ModalTitle; }
+  get: function () { return chunkI7L6CQXR_cjs.ModalTitle; }
 });
 Object.defineProperty(exports, "modalContentVariants", {
   enumerable: true,
-  get: function () { return chunkNH2JVQ6V_cjs.modalContentVariants; }
+  get: function () { return chunkI7L6CQXR_cjs.modalContentVariants; }
 });
 Object.defineProperty(exports, "modalOverlayVariants", {
   enumerable: true,
-  get: function () { return chunkNH2JVQ6V_cjs.modalOverlayVariants; }
+  get: function () { return chunkI7L6CQXR_cjs.modalOverlayVariants; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/components/Modal/index.js

@@ -1,6 +1,7 @@
-export { Modal, ModalBody, ModalClose, ModalFooter, ModalHeader, ModalTitle, modalContentVariants, modalOverlayVariants } from '../../chunk-D5IBXXF2.js';
-import '../../chunk-CLNOI5J7.js';
+export { Modal, ModalBody, ModalClose, ModalFooter, ModalHeader, ModalTitle, modalContentVariants, modalOverlayVariants } from '../../chunk-SD44QJIP.js';
+import '../../chunk-4SMSH4OY.js';
 import '../../chunk-T4ME7QCT.js';
+import '../../chunk-VSQF22GL.js';
 import '../../chunk-F3SOEIN2.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/RecordButton/index.cjs

@@ -1,25 +1,21 @@
 'use strict';
 
-var chunkHLW3XD5R_cjs = require('../../chunk-HLW3XD5R.cjs');
+var chunk5T3AWNHG_cjs = require('../../chunk-5T3AWNHG.cjs');
 require('../../chunk-OR5DRJCW.cjs');
 
 
 
 Object.defineProperty(exports, "RecordButton", {
   enumerable: true,
-  get: function () { return chunkHLW3XD5R_cjs.RecordButton; }
+  get: function () { return chunk5T3AWNHG_cjs.RecordButton; }
 });
 Object.defineProperty(exports, "formatDuration", {
   enumerable: true,
-  get: function () { return chunkHLW3XD5R_cjs.formatDuration; }
+  get: function () { return chunk5T3AWNHG_cjs.formatDuration; }
 });
 Object.defineProperty(exports, "recordButtonVariants", {
   enumerable: true,
-  get: function () { return chunkHLW3XD5R_cjs.recordButtonVariants; }
-});
-Object.defineProperty(exports, "recordingIndicatorVariants", {
-  enumerable: true,
-  get: function () { return chunkHLW3XD5R_cjs.recordingIndicatorVariants; }
+  get: function () { return chunk5T3AWNHG_cjs.recordButtonVariants; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/components/RecordButton/index.d.cts

@@ -1,9 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
-import { VariantProps } from 'class-variance-authority';
 
-type RecordButtonState = 'idle' | 'recording' | 'processing';
+type RecordButtonState = 'idle' | 'recording' | 'processing' | 'disabled' | 'error' | 'success';
+type RecordButtonVariant = 'default' | 'outline' | 'ghost' | 'minimal';
+type RecordButtonSize = 'sm' | 'md' | 'lg';
 /** Transcription state for integration with transcription services */
 type TranscriptionState = 'idle' | 'recording' | 'transcribing' | 'streaming' | 'complete' | 'error';
 interface TranscriptionResult {
@@ -14,23 +14,17 @@ interface TranscriptionResult {
     /** Confidence score (0-1) if available */
     confidence?: number;
 }
-interface RecordButtonProps extends VariantProps<typeof recordButtonVariants> {
-    /** Callback when recording is complete with the audio blob */
-    onRecordingComplete?: (blob: Blob, duration: number) => void;
-    /** Callback when recording starts */
-    onRecordingStart?: () => void;
-    /** Callback when an error occurs */
-    onError?: (error: Error) => void;
-    /** Maximum recording duration in seconds (0 for unlimited) */
-    maxDuration?: number;
-    /** Audio MIME type */
-    mimeType?: string;
-    /** Whether the button is disabled */
-    disabled?: boolean;
-    /** Additional class name */
-    className?: string;
-    /** Accessible label */
-    'aria-label'?: string;
+interface RecordButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Current state of the button */
+    state?: RecordButtonState;
+    /** Size of the button */
+    size?: RecordButtonSize;
+    /** Visual style variant */
+    variant?: RecordButtonVariant;
+    /** Show waveform bars when recording (instead of stop icon) */
+    showWaveform?: boolean;
+    /** Show pulse rings when recording */
+    showPulse?: boolean;
     /** Show recording duration while recording */
     showDuration?: boolean;
     /** Custom idle icon */
@@ -41,43 +35,62 @@ interface RecordButtonProps extends VariantProps<typeof recordButtonVariants> {
     transcriptionState?: TranscriptionState;
     /** Show transcription state indicator */
     showTranscriptionState?: boolean;
+    /** Callback when recording is complete with the audio blob */
+    onRecordingComplete?: (blob: Blob, duration: number) => void;
+    /** Callback when recording starts */
+    onRecordingStart?: () => void;
+    /** Callback when a recording error occurs */
+    onRecordingError?: (error: Error) => void;
+    /** Maximum recording duration in seconds (0 for unlimited) */
+    maxDuration?: number;
+    /** Audio MIME type */
+    mimeType?: string;
 }
 declare const recordButtonVariants: (props?: ({
-    variant?: "primary" | "default" | "filled" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const recordingIndicatorVariants: (props?: ({
+    variant?: "ghost" | "outline" | "default" | "minimal" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function formatDuration(seconds: number): string;
 /**
- * A simple microphone recording button that can be placed anywhere.
- * Perfect for adding voice input to text fields, chat inputs, or forms.
+ * A voice recording button with 6 states and 4 visual variants.
+ * Supports pulse animations, waveform visualization, and transcription integration.
+ *
+ * ## Controlled vs Uncontrolled Mode
+ *
+ * **Uncontrolled mode** (default): The component manages its own recording state.
+ * Use `onRecordingComplete`, `onRecordingStart`, and `onRecordingError` callbacks.
+ *
+ * **Controlled mode**: When the `state` prop is provided, the component becomes
+ * controlled and you must manage state changes externally. Note: In controlled mode,
+ * the internal MediaRecorder functionality is disabled - you must implement your own
+ * recording logic.
+ *
+ * ## State Precedence
+ *
+ * When multiple state-controlling props are provided, they follow this precedence:
+ * 1. `disabled` prop (highest priority)
+ * 2. `transcriptionState` prop
+ * 3. `state` prop
+ * 4. Internal state (uncontrolled)
  *
  * @example
  * ```tsx
- * // Basic usage
+ * // Uncontrolled with recording callbacks
  * <RecordButton
- *   onRecordingComplete={(blob, duration) => {
- *     console.log('Recorded:', blob, duration);
- *   }}
+ *   onRecordingComplete={(blob, duration) => console.log('Recorded:', blob)}
+ *   onRecordingError={(error) => console.error('Recording failed:', error)}
  * />
  *
- * // In an input field
- * <div className="relative">
- *   <Input className="pr-12" />
- *   <div className="absolute right-2 top-1/2 -translate-y-1/2">
- *     <RecordButton size="sm" onRecordingComplete={handleRecording} />
- *   </div>
- * </div>
+ * // Controlled state (requires external recording implementation)
+ * <RecordButton state="idle" onClick={handleClick} />
+ *
+ * // Different variants
+ * <RecordButton variant="outline" size="lg" />
  *
- * // With max duration
- * <RecordButton maxDuration={30} showDuration />
+ * // With waveform animation
+ * <RecordButton state="recording" showWaveform showPulse />
  * ```
  */
-declare function RecordButton({ onRecordingComplete, onRecordingStart, onError, maxDuration, mimeType, disabled, variant, size, className, 'aria-label': ariaLabel, showDuration, idleIcon, recordingIcon, transcriptionState, showTranscriptionState, }: RecordButtonProps): react_jsx_runtime.JSX.Element;
-declare namespace RecordButton {
-    var displayName: string;
-}
+declare const RecordButton: React.ForwardRefExoticComponent<RecordButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
-export { RecordButton, type RecordButtonProps, type RecordButtonState, type TranscriptionResult, type TranscriptionState, formatDuration, recordButtonVariants, recordingIndicatorVariants };
+export { RecordButton, type RecordButtonProps, type RecordButtonSize, type RecordButtonState, type RecordButtonVariant, type TranscriptionResult, type TranscriptionState, formatDuration, recordButtonVariants };

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

@@ -1,9 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
-import { VariantProps } from 'class-variance-authority';
 
-type RecordButtonState = 'idle' | 'recording' | 'processing';
+type RecordButtonState = 'idle' | 'recording' | 'processing' | 'disabled' | 'error' | 'success';
+type RecordButtonVariant = 'default' | 'outline' | 'ghost' | 'minimal';
+type RecordButtonSize = 'sm' | 'md' | 'lg';
 /** Transcription state for integration with transcription services */
 type TranscriptionState = 'idle' | 'recording' | 'transcribing' | 'streaming' | 'complete' | 'error';
 interface TranscriptionResult {
@@ -14,23 +14,17 @@ interface TranscriptionResult {
     /** Confidence score (0-1) if available */
     confidence?: number;
 }
-interface RecordButtonProps extends VariantProps<typeof recordButtonVariants> {
-    /** Callback when recording is complete with the audio blob */
-    onRecordingComplete?: (blob: Blob, duration: number) => void;
-    /** Callback when recording starts */
-    onRecordingStart?: () => void;
-    /** Callback when an error occurs */
-    onError?: (error: Error) => void;
-    /** Maximum recording duration in seconds (0 for unlimited) */
-    maxDuration?: number;
-    /** Audio MIME type */
-    mimeType?: string;
-    /** Whether the button is disabled */
-    disabled?: boolean;
-    /** Additional class name */
-    className?: string;
-    /** Accessible label */
-    'aria-label'?: string;
+interface RecordButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Current state of the button */
+    state?: RecordButtonState;
+    /** Size of the button */
+    size?: RecordButtonSize;
+    /** Visual style variant */
+    variant?: RecordButtonVariant;
+    /** Show waveform bars when recording (instead of stop icon) */
+    showWaveform?: boolean;
+    /** Show pulse rings when recording */
+    showPulse?: boolean;
     /** Show recording duration while recording */
     showDuration?: boolean;
     /** Custom idle icon */
@@ -41,43 +35,62 @@ interface RecordButtonProps extends VariantProps<typeof recordButtonVariants> {
     transcriptionState?: TranscriptionState;
     /** Show transcription state indicator */
     showTranscriptionState?: boolean;
+    /** Callback when recording is complete with the audio blob */
+    onRecordingComplete?: (blob: Blob, duration: number) => void;
+    /** Callback when recording starts */
+    onRecordingStart?: () => void;
+    /** Callback when a recording error occurs */
+    onRecordingError?: (error: Error) => void;
+    /** Maximum recording duration in seconds (0 for unlimited) */
+    maxDuration?: number;
+    /** Audio MIME type */
+    mimeType?: string;
 }
 declare const recordButtonVariants: (props?: ({
-    variant?: "primary" | "default" | "filled" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const recordingIndicatorVariants: (props?: ({
+    variant?: "ghost" | "outline" | "default" | "minimal" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function formatDuration(seconds: number): string;
 /**
- * A simple microphone recording button that can be placed anywhere.
- * Perfect for adding voice input to text fields, chat inputs, or forms.
+ * A voice recording button with 6 states and 4 visual variants.
+ * Supports pulse animations, waveform visualization, and transcription integration.
+ *
+ * ## Controlled vs Uncontrolled Mode
+ *
+ * **Uncontrolled mode** (default): The component manages its own recording state.
+ * Use `onRecordingComplete`, `onRecordingStart`, and `onRecordingError` callbacks.
+ *
+ * **Controlled mode**: When the `state` prop is provided, the component becomes
+ * controlled and you must manage state changes externally. Note: In controlled mode,
+ * the internal MediaRecorder functionality is disabled - you must implement your own
+ * recording logic.
+ *
+ * ## State Precedence
+ *
+ * When multiple state-controlling props are provided, they follow this precedence:
+ * 1. `disabled` prop (highest priority)
+ * 2. `transcriptionState` prop
+ * 3. `state` prop
+ * 4. Internal state (uncontrolled)
  *
  * @example
  * ```tsx
- * // Basic usage
+ * // Uncontrolled with recording callbacks
  * <RecordButton
- *   onRecordingComplete={(blob, duration) => {
- *     console.log('Recorded:', blob, duration);
- *   }}
+ *   onRecordingComplete={(blob, duration) => console.log('Recorded:', blob)}
+ *   onRecordingError={(error) => console.error('Recording failed:', error)}
  * />
  *
- * // In an input field
- * <div className="relative">
- *   <Input className="pr-12" />
- *   <div className="absolute right-2 top-1/2 -translate-y-1/2">
- *     <RecordButton size="sm" onRecordingComplete={handleRecording} />
- *   </div>
- * </div>
+ * // Controlled state (requires external recording implementation)
+ * <RecordButton state="idle" onClick={handleClick} />
+ *
+ * // Different variants
+ * <RecordButton variant="outline" size="lg" />
  *
- * // With max duration
- * <RecordButton maxDuration={30} showDuration />
+ * // With waveform animation
+ * <RecordButton state="recording" showWaveform showPulse />
  * ```
  */
-declare function RecordButton({ onRecordingComplete, onRecordingStart, onError, maxDuration, mimeType, disabled, variant, size, className, 'aria-label': ariaLabel, showDuration, idleIcon, recordingIcon, transcriptionState, showTranscriptionState, }: RecordButtonProps): react_jsx_runtime.JSX.Element;
-declare namespace RecordButton {
-    var displayName: string;
-}
+declare const RecordButton: React.ForwardRefExoticComponent<RecordButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
-export { RecordButton, type RecordButtonProps, type RecordButtonState, type TranscriptionResult, type TranscriptionState, formatDuration, recordButtonVariants, recordingIndicatorVariants };
+export { RecordButton, type RecordButtonProps, type RecordButtonSize, type RecordButtonState, type RecordButtonVariant, type TranscriptionResult, type TranscriptionState, formatDuration, recordButtonVariants };

package/dist/components/RecordButton/index.js

@@ -1,4 +1,4 @@
-export { RecordButton, formatDuration, recordButtonVariants, recordingIndicatorVariants } from '../../chunk-FQ5G7J24.js';
+export { RecordButton, formatDuration, recordButtonVariants } from '../../chunk-XVZ4SLQB.js';
 import '../../chunk-F3SOEIN2.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/Select/index.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
-var chunkLEE3NMNP_cjs = require('../../chunk-LEE3NMNP.cjs');
-require('../../chunk-SWMRCGL4.cjs');
+var chunk5UUL5EEO_cjs = require('../../chunk-5UUL5EEO.cjs');
 require('../../chunk-FHY3K6PL.cjs');
 require('../../chunk-OR5DRJCW.cjs');
 
@@ -9,11 +8,11 @@ require('../../chunk-OR5DRJCW.cjs');
 
 Object.defineProperty(exports, "Select", {
   enumerable: true,
-  get: function () { return chunkLEE3NMNP_cjs.Select; }
+  get: function () { return chunk5UUL5EEO_cjs.Select; }
 });
 Object.defineProperty(exports, "selectTriggerVariants", {
   enumerable: true,
-  get: function () { return chunkLEE3NMNP_cjs.selectTriggerVariants; }
+  get: function () { return chunk5UUL5EEO_cjs.selectTriggerVariants; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/components/Select/index.js

@@ -1,5 +1,4 @@
-export { Select, selectTriggerVariants } from '../../chunk-KJOFWJHV.js';
-import '../../chunk-OT36EMM5.js';
+export { Select, selectTriggerVariants } from '../../chunk-QSMMFATL.js';
 import '../../chunk-T4ME7QCT.js';
 import '../../chunk-F3SOEIN2.js';
 //# sourceMappingURL=index.js.map

package/dist/components/Slider/index.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var chunkBV75DAKO_cjs = require('../../chunk-BV75DAKO.cjs');
+require('../../chunk-OR5DRJCW.cjs');
+
+
+
+Object.defineProperty(exports, "Slider", {
+  enumerable: true,
+  get: function () { return chunkBV75DAKO_cjs.Slider; }
+});
+Object.defineProperty(exports, "sliderRangeVariants", {
+  enumerable: true,
+  get: function () { return chunkBV75DAKO_cjs.sliderRangeVariants; }
+});
+Object.defineProperty(exports, "sliderThumbVariants", {
+  enumerable: true,
+  get: function () { return chunkBV75DAKO_cjs.sliderThumbVariants; }
+});
+Object.defineProperty(exports, "sliderTrackVariants", {
+  enumerable: true,
+  get: function () { return chunkBV75DAKO_cjs.sliderTrackVariants; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/components/Slider/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}

package/dist/components/Slider/index.d.cts

@@ -0,0 +1,82 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const sliderTrackVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sliderRangeVariants: (props?: ({
+    variant?: "danger" | "default" | "success" | "warning" | "neutral" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sliderThumbVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    variant?: "danger" | "default" | "success" | "warning" | "neutral" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SliderProps extends VariantProps<typeof sliderTrackVariants>, VariantProps<typeof sliderRangeVariants> {
+    /** Current value (controlled) */
+    value?: number;
+    /** Default value (uncontrolled) */
+    defaultValue?: number;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Callback when value changes */
+    onValueChange?: (value: number) => void;
+    /** Callback when interaction ends (mouseup / touchend) */
+    onValueCommit?: (value: number) => void;
+    /** Whether the slider is disabled */
+    disabled?: boolean;
+    /** Label for the slider */
+    label?: string;
+    /** Show the current value */
+    showValue?: boolean;
+    /** Format the displayed value */
+    formatValue?: (value: number) => string;
+    /** Description text below the label */
+    description?: string;
+    /** Min label displayed below the track (left) */
+    minLabel?: string;
+    /** Max label displayed below the track (right) */
+    maxLabel?: string;
+    /** Additional class name for the root container */
+    className?: string;
+    /** Additional class name for the track */
+    trackClassName?: string;
+    /** ID for the underlying input */
+    id?: string;
+    /** Name for form submission */
+    name?: string;
+    /** Accessible label for the slider */
+    'aria-label'?: string;
+    /** ID of the element that labels the slider */
+    'aria-labelledby'?: string;
+}
+/**
+ * A fully branded, accessible slider/range input component.
+ *
+ * Uses brand design tokens for colors, border-radius, and sizing.
+ * Supports controlled and uncontrolled usage, labels, descriptions,
+ * min/max labels, value display, and multiple color variants.
+ *
+ * @example
+ * ```tsx
+ * <Slider label="Volume" min={0} max={100} defaultValue={50} />
+ * <Slider
+ *   label="Border Radius"
+ *   min={0}
+ *   max={32}
+ *   value={radius}
+ *   onValueChange={setRadius}
+ *   showValue
+ *   formatValue={(v) => `${v}px`}
+ *   minLabel="Square"
+ *   maxLabel="Rounded"
+ * />
+ * ```
+ */
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Slider, type SliderProps, sliderRangeVariants, sliderThumbVariants, sliderTrackVariants };

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

@@ -0,0 +1,82 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const sliderTrackVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sliderRangeVariants: (props?: ({
+    variant?: "danger" | "default" | "success" | "warning" | "neutral" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sliderThumbVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    variant?: "danger" | "default" | "success" | "warning" | "neutral" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SliderProps extends VariantProps<typeof sliderTrackVariants>, VariantProps<typeof sliderRangeVariants> {
+    /** Current value (controlled) */
+    value?: number;
+    /** Default value (uncontrolled) */
+    defaultValue?: number;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Callback when value changes */
+    onValueChange?: (value: number) => void;
+    /** Callback when interaction ends (mouseup / touchend) */
+    onValueCommit?: (value: number) => void;
+    /** Whether the slider is disabled */
+    disabled?: boolean;
+    /** Label for the slider */
+    label?: string;
+    /** Show the current value */
+    showValue?: boolean;
+    /** Format the displayed value */
+    formatValue?: (value: number) => string;
+    /** Description text below the label */
+    description?: string;
+    /** Min label displayed below the track (left) */
+    minLabel?: string;
+    /** Max label displayed below the track (right) */
+    maxLabel?: string;
+    /** Additional class name for the root container */
+    className?: string;
+    /** Additional class name for the track */
+    trackClassName?: string;
+    /** ID for the underlying input */
+    id?: string;
+    /** Name for form submission */
+    name?: string;
+    /** Accessible label for the slider */
+    'aria-label'?: string;
+    /** ID of the element that labels the slider */
+    'aria-labelledby'?: string;
+}
+/**
+ * A fully branded, accessible slider/range input component.
+ *
+ * Uses brand design tokens for colors, border-radius, and sizing.
+ * Supports controlled and uncontrolled usage, labels, descriptions,
+ * min/max labels, value display, and multiple color variants.
+ *
+ * @example
+ * ```tsx
+ * <Slider label="Volume" min={0} max={100} defaultValue={50} />
+ * <Slider
+ *   label="Border Radius"
+ *   min={0}
+ *   max={32}
+ *   value={radius}
+ *   onValueChange={setRadius}
+ *   showValue
+ *   formatValue={(v) => `${v}px`}
+ *   minLabel="Square"
+ *   maxLabel="Rounded"
+ * />
+ * ```
+ */
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Slider, type SliderProps, sliderRangeVariants, sliderThumbVariants, sliderTrackVariants };

package/dist/components/Slider/index.js

@@ -0,0 +1,4 @@
+export { Slider, sliderRangeVariants, sliderThumbVariants, sliderTrackVariants } from '../../chunk-4T2ZNPTC.js';
+import '../../chunk-F3SOEIN2.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/components/Spinner/index.d.cts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
-    variant?: "default" | "white" | "muted" | null | undefined;
+    variant?: "white" | "default" | "muted" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof spinnerVariants> {
     /** Accessible label for the spinner */

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

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
-    variant?: "default" | "white" | "muted" | null | undefined;
+    variant?: "white" | "default" | "muted" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof spinnerVariants> {
     /** Accessible label for the spinner */