@mieweb/ui 0.1.0 → 0.1.1

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 chunkNL3CZNBH_cjs = require('../../chunk-NL3CZNBH.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 chunkNL3CZNBH_cjs.Select; }
 });
 Object.defineProperty(exports, "selectTriggerVariants", {
   enumerable: true,
-  get: function () { return chunkLEE3NMNP_cjs.selectTriggerVariants; }
+  get: function () { return chunkNL3CZNBH_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-MFB4FS7D.js';
 import '../../chunk-T4ME7QCT.js';
 import '../../chunk-F3SOEIN2.js';
 //# sourceMappingURL=index.js.map

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 */

package/dist/hooks/index.cjs

@@ -3,9 +3,10 @@
 var chunkR4DM4635_cjs = require('../chunk-R4DM4635.cjs');
 var chunk2O7D6F67_cjs = require('../chunk-2O7D6F67.cjs');
 var chunk6HFFWEM3_cjs = require('../chunk-6HFFWEM3.cjs');
-var chunkBR2XGATJ_cjs = require('../chunk-BR2XGATJ.cjs');
+var chunkNNEFAUHV_cjs = require('../chunk-NNEFAUHV.cjs');
 var chunkSWMRCGL4_cjs = require('../chunk-SWMRCGL4.cjs');
 var chunkFHY3K6PL_cjs = require('../chunk-FHY3K6PL.cjs');
+require('../chunk-SCV7C55E.cjs');
 
 
 
@@ -55,7 +56,7 @@ Object.defineProperty(exports, "usePrefersReducedMotion", {
 });
 Object.defineProperty(exports, "useFocusTrap", {
   enumerable: true,
-  get: function () { return chunkBR2XGATJ_cjs.useFocusTrap; }
+  get: function () { return chunkNNEFAUHV_cjs.useFocusTrap; }
 });
 Object.defineProperty(exports, "useClickOutside", {
   enumerable: true,

package/dist/hooks/index.js

@@ -1,8 +1,9 @@
 export { useCommandK, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useMediaQuery } from '../chunk-CP7NPDQW.js';
 export { useTheme } from '../chunk-KJZNEVYM.js';
 export { usePrefersReducedMotion } from '../chunk-HB7C7NB5.js';
-export { useFocusTrap } from '../chunk-CLNOI5J7.js';
+export { useFocusTrap } from '../chunk-4SMSH4OY.js';
 export { useClickOutside } from '../chunk-OT36EMM5.js';
 export { useEscapeKey } from '../chunk-T4ME7QCT.js';
+import '../chunk-VSQF22GL.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map