@sabrenski/spire-ui-vue 0.3.1 → 0.3.3

package/README.md

@@ -264,10 +264,12 @@ resetDefaults()
 ## Composables
 
 ```ts
-import { useToast, useRovingFocus, useVirtualScroll, useComponentDefault } from '@sabrenski/spire-ui-vue'
+import { useToast, useDarkMode, useTheme, useRovingFocus, useVirtualScroll, useComponentDefault } from '@sabrenski/spire-ui-vue'
 ```
 
 - **useToast** - Toast notification management
+- **useDarkMode** - Dark mode management with system preference detection
+- **useTheme** - Color scheme theme management
 - **useRovingFocus** - Keyboard navigation for lists
 - **useVirtualScroll** - Virtualized scrolling for large lists
 - **useAnchor** - CSS anchor positioning
@@ -276,6 +278,75 @@ import { useToast, useRovingFocus, useVirtualScroll, useComponentDefault } from
 - **useChart** - Chart utilities
 - **useComponentDefault** - Resolve component defaults from global config
 
+### useDarkMode
+
+Manage dark mode with system preference detection and localStorage persistence.
+
+```vue
+<script setup>
+import { useDarkMode } from '@sabrenski/spire-ui-vue'
+
+const { isDark, toggle, set, clearPreference } = useDarkMode()
+</script>
+
+<template>
+  <button @click="toggle">
+    {{ isDark ? 'Light Mode' : 'Dark Mode' }}
+  </button>
+</template>
+```
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `storageKey` | `string` | `'spire-dark-mode'` | localStorage key for persistence |
+| `initialValue` | `boolean` | System preference | Initial dark mode state |
+| `selector` | `string` | `'html'` | Element to apply dark class |
+| `darkClass` | `string` | `'dark'` | CSS class for dark mode |
+| `listenToSystemChanges` | `boolean` | `true` | React to system preference changes |
+
+| Return | Type | Description |
+|--------|------|-------------|
+| `isDark` | `Ref<boolean>` | Reactive dark mode state |
+| `toggle` | `() => void` | Toggle dark mode on/off |
+| `set` | `(value: boolean) => void` | Set dark mode explicitly |
+| `clearPreference` | `() => void` | Clear stored preference and follow system |
+
+### useTheme
+
+Manage color scheme themes with localStorage persistence.
+
+```vue
+<script setup>
+import { useTheme } from '@sabrenski/spire-ui-vue'
+
+const { schemes, currentScheme, setScheme } = useTheme()
+</script>
+
+<template>
+  <select v-model="currentScheme">
+    <option v-for="scheme in schemes" :key="scheme" :value="scheme">
+      {{ scheme }}
+    </option>
+  </select>
+</template>
+```
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `storageKey` | `string` | `'spire-theme-scheme'` | localStorage key for persistence |
+| `initialScheme` | `ThemeScheme` | `'default'` | Initial color scheme |
+| `selector` | `string` | `'html'` | Element to apply theme class |
+| `customSchemes` | `string[]` | `[]` | Additional custom schemes |
+
+| Return | Type | Description |
+|--------|------|-------------|
+| `schemes` | `ComputedRef<ThemeScheme[]>` | All available scheme names |
+| `currentScheme` | `Ref<ThemeScheme>` | Current active scheme |
+| `setScheme` | `(scheme: ThemeScheme) => void` | Set the color scheme |
+| `clearPreference` | `() => void` | Clear stored preference and reset to default |
+
+Available schemes: `'default'`, `'ocean'`, `'forest'`, `'sunset'`, `'rose'`, `'midnight'`
+
 ## Component Examples
 
 ### Button

package/dist/components/Autocomplete/Autocomplete.vue.d.ts

@@ -3,16 +3,25 @@ declare function focus(): void;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
+        option?(_: {
+            selected: boolean;
+            active: boolean;
+            option: AutocompleteOptionData;
+        }): any;
         option?(_: {
             selected: boolean;
             active: boolean;
             option: AutocompleteOptionData;
         }): any;
         default?(_: {}): any;
+        default?(_: {}): any;
+        empty?(_: {}): any;
         empty?(_: {}): any;
     };
     refs: {
         inputRef: HTMLInputElement;
+        dialogRef: HTMLDialogElement;
+        mobileSearchRef: HTMLInputElement;
     };
     rootEl: any;
 };
@@ -37,8 +46,8 @@ declare const __VLS_component: import('vue').DefineComponent<AutocompleteProps,
     loading: boolean;
     placeholder: string;
     invalid: boolean;
-    clearable: boolean;
     readonly: boolean;
+    clearable: boolean;
     minQueryLength: number;
     debounceMs: number;
     allowCustomValue: boolean;
@@ -49,6 +58,8 @@ declare const __VLS_component: import('vue').DefineComponent<AutocompleteProps,
     strategy: "absolute" | "fixed";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     inputRef: HTMLInputElement;
+    dialogRef: HTMLDialogElement;
+    mobileSearchRef: HTMLInputElement;
 }, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/Badge/types.d.ts

@@ -1,7 +1,7 @@
 import { Component } from 'vue';
 export type BadgeVariant = 'solid' | 'flat' | 'outline';
 export type BadgeColor = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
-export type BadgeSize = 'sm' | 'md' | 'lg';
+export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type BadgeShape = 'circle' | 'rectangle';
 export type BadgePlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 export interface BadgeProps {

package/dist/components/DatePicker/DatePicker.vue.d.ts

@@ -11,13 +11,17 @@ declare const _default: import('vue').DefineComponent<DatePickerProps, {}, {}, {
     variant: DatePickerVariant;
     disabled: boolean;
     placement: import('../..').Placement;
+    loading: boolean;
     placeholder: string;
-    clearable: boolean;
     readonly: boolean;
+    clearable: boolean;
     strategy: "absolute" | "fixed";
     locale: string;
     mode: import('..').CalendarMode;
     firstDayOfWeek: 0 | 1;
     numberOfMonths: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+    useNativeDialog: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    dialogRef: HTMLDialogElement;
+}, HTMLDivElement>;
 export default _default;

package/dist/components/DatePicker/types.d.ts

@@ -1,6 +1,6 @@
 import { CalendarMode, DateRange, DateRangePreset } from '../Calendar/types';
 import { Placement } from '../../composables';
-export type DatePickerSize = 'sm' | 'md' | 'lg';
+export type DatePickerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type DatePickerVariant = 'outline' | 'filled' | 'underline';
 export interface DatePickerProps {
     /** Selected date value */
@@ -15,6 +15,8 @@ export interface DatePickerProps {
     readonly?: boolean;
     /** Show clear button when value exists */
     clearable?: boolean;
+    /** Show loading spinner */
+    loading?: boolean;
     /** Component size */
     size?: DatePickerSize;
     /** Visual variant */
@@ -43,4 +45,6 @@ export interface DatePickerProps {
     placement?: Placement;
     /** Positioning strategy for the dropdown */
     strategy?: 'absolute' | 'fixed';
+    /** Use native dialog on mobile instead of popover (default: true) */
+    useNativeDialog?: boolean;
 }

package/dist/components/Dropdown/DropdownMenu.vue.d.ts

@@ -3,16 +3,27 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         topContent?(_: {}): any;
+        topContent?(_: {}): any;
+        item?(_: {
+            item: import('./types').DropdownItemData;
+            isSelected: boolean;
+            isActive: boolean;
+        }): any;
         item?(_: {
             item: import('./types').DropdownItemData;
             isSelected: boolean;
             isActive: boolean;
         }): any;
         default?(_: {}): any;
+        default?(_: {}): any;
+        emptyContent?(_: {}): any;
         emptyContent?(_: {}): any;
         bottomContent?(_: {}): any;
+        bottomContent?(_: {}): any;
+    };
+    refs: {
+        dialogRef: HTMLDialogElement;
     };
-    refs: {};
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -29,7 +40,9 @@ declare const __VLS_component: import('vue').DefineComponent<DropdownMenuProps,
     color: DropdownMenuColor;
     selectionMode: import('./types').DropdownSelectionMode;
     hideSelectedIcon: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    dialogRef: HTMLDialogElement;
+}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/IconPicker/IconPicker.vue.d.ts

@@ -39,6 +39,8 @@ declare const _default: import('vue').DefineComponent<IconPickerProps, {}, {}, {
         };
         $refs: {
             [x: string]: unknown;
+        } & {
+            dialogRef: HTMLDialogElement;
         };
         $slots: Readonly<{
             [name: string]: import('vue').Slot<any> | undefined;
@@ -59,6 +61,7 @@ declare const _default: import('vue').DefineComponent<IconPickerProps, {}, {}, {
             isOpen: import('vue').Ref<boolean, boolean>;
             triggerRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
             contentRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+            dialogRef: import('vue').Ref<HTMLDialogElement | null, HTMLDialogElement | null>;
         }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
             close: () => any;
             "update:modelValue": (value: boolean) => any;
@@ -105,13 +108,14 @@ declare const _default: import('vue').DefineComponent<IconPickerProps, {}, {}, {
         onClose?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         onOpen?: (() => any) | undefined;
-    }>, "close" | "isOpen" | "open" | "toggle" | "triggerRef" | "contentRef" | ("disabled" | "placement" | "trigger" | "showDelay" | "hideDelay" | "strategy" | "closeOnClickOutside" | "closeOnEscape")> & import('vue').ShallowUnwrapRef<{
+    }>, "close" | "isOpen" | "open" | "toggle" | "triggerRef" | "dialogRef" | "contentRef" | ("disabled" | "placement" | "trigger" | "showDelay" | "hideDelay" | "strategy" | "closeOnClickOutside" | "closeOnEscape")> & import('vue').ShallowUnwrapRef<{
         open: () => void;
         close: () => void;
         toggle: () => void;
         isOpen: import('vue').Ref<boolean, boolean>;
         triggerRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
         contentRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+        dialogRef: import('vue').Ref<HTMLDialogElement | null, HTMLDialogElement | null>;
     }> & {} & import('vue').ComponentCustomProperties & {} & {
         $slots: {
             default?(_: {}): any;
@@ -119,6 +123,10 @@ declare const _default: import('vue').DefineComponent<IconPickerProps, {}, {}, {
                 close: () => void;
                 isOpen: boolean;
             }): any;
+            content?(_: {
+                close: () => void;
+                isOpen: boolean;
+            }): any;
         };
     }) | null;
     searchInputRef: ({
@@ -134,6 +142,7 @@ declare const _default: import('vue').DefineComponent<IconPickerProps, {}, {}, {
             readonly readonly?: boolean | undefined;
             readonly invalid?: boolean | undefined;
             readonly clearable?: boolean | undefined;
+            readonly loading?: boolean | undefined;
             readonly icon?: import('vue').Component | undefined;
             readonly iconEnd?: import('vue').Component | undefined;
             readonly onClear?: (() => any) | undefined;
@@ -167,9 +176,10 @@ declare const _default: import('vue').DefineComponent<IconPickerProps, {}, {}, {
         }, string, {
             type: import('..').InputType;
             disabled: boolean;
+            loading: boolean;
             invalid: boolean;
-            clearable: boolean;
             readonly: boolean;
+            clearable: boolean;
         }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -193,13 +203,14 @@ declare const _default: import('vue').DefineComponent<IconPickerProps, {}, {}, {
     } & Readonly<{
         type: import('..').InputType;
         disabled: boolean;
+        loading: boolean;
         invalid: boolean;
-        clearable: boolean;
         readonly: boolean;
+        clearable: boolean;
     }> & Omit<Readonly<import('..').InputProps> & Readonly<{
         onClear?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
-    }>, "focus" | "inputRef" | ("type" | "disabled" | "invalid" | "clearable" | "readonly")> & import('vue').ShallowUnwrapRef<{
+    }>, "focus" | "inputRef" | ("type" | "disabled" | "loading" | "invalid" | "readonly" | "clearable")> & import('vue').ShallowUnwrapRef<{
         focus: () => void;
         inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
     }> & {} & import('vue').ComponentCustomProperties & {} & {

package/dist/components/Input/Input.vue.d.ts

@@ -24,9 +24,10 @@ declare const __VLS_component: import('vue').DefineComponent<InputProps, {
 }>, {
     type: import('./types').InputType;
     disabled: boolean;
+    loading: boolean;
     invalid: boolean;
-    clearable: boolean;
     readonly: boolean;
+    clearable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     inputRef: HTMLInputElement;
 }, HTMLDivElement>;

package/dist/components/Input/types.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'vue';
 export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
-export type InputSize = 'sm' | 'md' | 'lg';
+export type InputSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type InputVariant = 'outline' | 'filled' | 'underline';
 export interface InputProps {
     /** Current input value */
@@ -25,6 +25,8 @@ export interface InputProps {
     invalid?: boolean;
     /** Show clear button when input has value */
     clearable?: boolean;
+    /** Show loading spinner */
+    loading?: boolean;
     /** Icon component to display at start (renders before #start slot) */
     icon?: Component;
     /** Icon component to display at end (renders after #end slot) */

package/dist/components/LineChart/LineChart.vue.d.ts

@@ -54,7 +54,6 @@ declare const __VLS_component: import('vue').DefineComponent<LineChartProps, {},
     areaOpacity: number;
     showPoints: boolean;
     pointRadius: number;
-    showToolbar: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     containerRef: HTMLDivElement;
     svgWrapperRef: HTMLDivElement;

package/dist/components/LineChart/constants.d.ts

@@ -6,7 +6,7 @@ export declare const COLOR_TO_CSS_VAR: Record<string, string>;
 /** Map chart colors to subtle/fill variants for area fills (same color, use opacity in component) */
 export declare const COLOR_TO_SUBTLE_VAR: Record<string, string>;
 /** Default prop values for LineChart */
-export declare const DEFAULT_PROPS: Required<Pick<LineChartProps, 'curve' | 'area' | 'areaOpacity' | 'showPoints' | 'pointRadius' | 'strokeWidth' | 'showLegend' | 'legendPosition' | 'legendToggle' | 'showTooltip' | 'showToolbar' | 'animated' | 'animationDuration' | 'height' | 'loading' | 'disabled'>>;
+export declare const DEFAULT_PROPS: Required<Pick<LineChartProps, 'curve' | 'area' | 'areaOpacity' | 'showPoints' | 'pointRadius' | 'strokeWidth' | 'showLegend' | 'legendPosition' | 'legendToggle' | 'showTooltip' | 'animated' | 'animationDuration' | 'height' | 'loading' | 'disabled'>>;
 /** Default axis configuration */
 export declare const DEFAULT_X_AXIS: {
     gridlines: boolean;
@@ -23,13 +23,6 @@ export declare const DEFAULT_CHART_MARGINS: {
     bottom: number;
     left: number;
 };
-/** Animation easing CSS values */
-export declare const ANIMATION_EASING: {
-    smooth: string;
-    spring: string;
-};
-/** Threshold for showing performance warning in console */
-export declare const PERFORMANCE_WARNING_THRESHOLD = 1000;
 /**
  * Get CSS color value from ChartColor or custom color string
  */

package/dist/components/LineChart/types.d.ts

@@ -137,8 +137,6 @@ export interface LineChartProps {
     legendToggle?: boolean;
     /** Show tooltip on hover */
     showTooltip?: boolean;
-    /** Show zoom/pan toolbar */
-    showToolbar?: boolean;
     /** Enable animations */
     animated?: boolean;
     /** Animation duration in milliseconds */

package/dist/components/LineChart/utils.d.ts

@@ -28,14 +28,6 @@ export declare function generateChartId(): string;
  * Format a number for display (removes trailing zeros)
  */
 export declare function formatNumber(value: number, precision?: number): string;
-/**
- * Clamp a value between min and max
- */
-export declare function clamp(value: number, min: number, max: number): number;
-/**
- * Linear interpolation between two values
- */
-export declare function lerp(start: number, end: number, t: number): number;
 /**
  * Check if a value is a valid number (not NaN, not Infinity)
  */

package/dist/components/PhoneInput/PhoneInput.vue.d.ts

@@ -41,6 +41,7 @@ declare const _default: import('vue').DefineComponent<PhoneInputProps, {
             readonly readonly?: boolean | undefined;
             readonly invalid?: boolean | undefined;
             readonly clearable?: boolean | undefined;
+            readonly loading?: boolean | undefined;
             readonly icon?: import('vue').Component | undefined;
             readonly iconEnd?: import('vue').Component | undefined;
             readonly onClear?: (() => any) | undefined;
@@ -74,9 +75,10 @@ declare const _default: import('vue').DefineComponent<PhoneInputProps, {
         }, string, {
             type: import('..').InputType;
             disabled: boolean;
+            loading: boolean;
             invalid: boolean;
-            clearable: boolean;
             readonly: boolean;
+            clearable: boolean;
         }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -100,13 +102,14 @@ declare const _default: import('vue').DefineComponent<PhoneInputProps, {
     } & Readonly<{
         type: import('..').InputType;
         disabled: boolean;
+        loading: boolean;
         invalid: boolean;
-        clearable: boolean;
         readonly: boolean;
+        clearable: boolean;
     }> & Omit<Readonly<import('..').InputProps> & Readonly<{
         onClear?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
-    }>, "focus" | "inputRef" | ("type" | "disabled" | "invalid" | "clearable" | "readonly")> & import('vue').ShallowUnwrapRef<{
+    }>, "focus" | "inputRef" | ("type" | "disabled" | "loading" | "invalid" | "readonly" | "clearable")> & import('vue').ShallowUnwrapRef<{
         focus: () => void;
         inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
     }> & {} & import('vue').ComponentCustomProperties & {} & {

package/dist/components/Popover/Popover.vue.d.ts

@@ -9,8 +9,14 @@ declare function __VLS_template(): {
             close: typeof close;
             isOpen: boolean;
         }): any;
+        content?(_: {
+            close: typeof close;
+            isOpen: boolean;
+        }): any;
+    };
+    refs: {
+        dialogRef: HTMLDialogElement;
     };
-    refs: {};
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -21,6 +27,7 @@ declare const __VLS_component: import('vue').DefineComponent<PopoverProps, {
     isOpen: import('vue').Ref<boolean, boolean>;
     triggerRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
     contentRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    dialogRef: import('vue').Ref<HTMLDialogElement | null, HTMLDialogElement | null>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     close: () => any;
     "update:modelValue": (value: boolean) => any;
@@ -38,7 +45,9 @@ declare const __VLS_component: import('vue').DefineComponent<PopoverProps, {
     strategy: import('./types').PopoverStrategy;
     closeOnClickOutside: boolean;
     closeOnEscape: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    dialogRef: HTMLDialogElement;
+}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {