@shohojdhara/atomix 0.6.2 → 0.6.4

package/dist/index.d.ts

@@ -1440,11 +1440,11 @@ type ThemeName = string;
 /**
  * Theme color variants
  */
-type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'invert' | 'brand' | 'error' | 'success' | 'warning' | 'info' | 'light' | 'dark';
+type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'invert' | 'brand' | 'error' | 'danger' | 'success' | 'warning' | 'info' | 'light' | 'dark';
 /**
  * Component variant including theme colors and outline variants
  */
-type Variant = ThemeColor | `outline-${ThemeColor}` | 'link';
+type Variant = ThemeColor | `outline-${ThemeColor}` | 'link' | 'ghost';
 /**
  * Base component properties interface
  */
@@ -2145,6 +2145,49 @@ interface HeroProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' |
      */
     backgroundElement?: ReactNode;
 }
+/**
+ * Spinner component properties
+ */
+interface SpinnerProps extends BaseComponentProps {
+    /**
+     * Spinner color variant
+     * @default 'primary'
+     */
+    variant?: ThemeColor;
+    /**
+     * Spinner size
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * Whether the spinner should be displayed fullscreen
+     */
+    fullscreen?: boolean;
+    /**
+     * Accessible label for screen readers
+     * @default 'Loading'
+     */
+    'aria-label'?: string;
+    /**
+     * ARIA live region setting
+     * @default 'polite'
+     */
+    'aria-live'?: 'off' | 'assertive' | 'polite';
+    /**
+     * ARIA description
+     */
+    'aria-describe'?: string;
+    /**
+     * ARIA role for the spinner
+     * @default 'status'
+     */
+    role?: 'status' | 'alert';
+    /**
+     * Glass morphism effect for the spinner
+     * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+     */
+    glass?: AtomixGlassProps | boolean;
+}
 /**
  * Icon weight/style options
  */
@@ -2950,83 +2993,6 @@ interface TodoProps extends BaseComponentProps {
      */
     glass?: AtomixGlassProps | boolean;
 }
-/**
- * Spinner component properties
- */
-interface SpinnerProps extends BaseComponentProps {
-    /**
-     * Spinner color variant
-     * @default 'primary'
-     */
-    variant?: ThemeColor;
-    /**
-     * Spinner size
-     * @default 'md'
-     */
-    size?: Size;
-    /**
-     * Whether the spinner should be displayed fullscreen
-     */
-    fullscreen?: boolean;
-    /**
-     * Accessible label for screen readers
-     * @default 'Loading'
-     */
-    'aria-label'?: string;
-    /**
-     * ARIA role for the spinner
-     * @default 'status'
-     */
-    role?: 'status' | 'alert';
-    /**
-     * Glass morphism effect for the spinner
-     * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
-     */
-    glass?: AtomixGlassProps | boolean;
-}
-/**
- * Spinner component properties
- */
-interface SpinnerProps extends BaseComponentProps {
-    /**
-     * Spinner color variant
-     * @default 'primary'
-     */
-    variant?: ThemeColor;
-    /**
-     * Spinner size
-     * @default 'md'
-     */
-    size?: Size;
-    /**
-     * Whether the spinner should be displayed fullscreen
-     */
-    fullscreen?: boolean;
-    /**
-     * Accessible label for screen readers
-     * @default 'Loading'
-     */
-    'aria-label'?: string;
-    /**
-     * ARIA live property to control how updates are announced
-     * @default 'polite'
-     */
-    'aria-live'?: 'off' | 'polite' | 'assertive';
-    /**
-     * ARIA descriptor property for additional description
-     */
-    'aria-describe'?: string;
-    /**
-     * ARIA role for the spinner
-     * @default 'status'
-     */
-    role?: 'status' | 'alert';
-    /**
-     * Glass morphism effect for the spinner
-     * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
-     */
-    glass?: AtomixGlassProps | boolean;
-}
 /**
  * Icon size options
  */
@@ -6955,6 +6921,44 @@ type ListComponent = React__default.FC<ListProps> & {
 };
 declare const List: ListComponent;
 
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
+type PhosphorIconsType = Exclude<keyof typeof _phosphor_icons_react, 'Icon' | 'IconContext' | 'IconBase' | 'IconProps' | 'createIcon' | 'default' | 'SSR'>;
+interface IconProps {
+    /**
+     * Icon name from Phosphor Icons
+     */
+    name: PhosphorIconsType;
+    /**
+     * Icon size
+     */
+    size?: IconSize | number;
+    /**
+     * Icon weight/style
+     */
+    weight?: IconWeight;
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React__default.CSSProperties;
+    /**
+     * Alt text for accessibility
+     */
+    alt?: string;
+}
+/**
+ * Icon component that displays a Phosphor icon
+ */
+declare const Icon: React__default.FC<IconProps>;
+
 interface HeroTitleProps extends React__default.HTMLAttributes<HTMLHeadingElement> {
     level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
 }
@@ -6986,6 +6990,7 @@ declare const Hero: React__default.FC<HeroProps> & {
 
 interface SelectOptionProps {
     value: string;
+    label?: string;
     children?: ReactNode;
     disabled?: boolean;
     className?: string;
@@ -8001,44 +8006,6 @@ declare const ChartRenderer: React$1.NamedExoticComponent<{
     renderContent: (params: ChartRenderContentParams) => React.ReactNode;
 } & React$1.RefAttributes<SVGSVGElement>>;
 
-type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
-type PhosphorIconsType = Exclude<keyof typeof _phosphor_icons_react, 'Icon' | 'IconContext' | 'IconBase' | 'IconProps' | 'createIcon' | 'default' | 'SSR'>;
-interface IconProps {
-    /**
-     * Icon name from Phosphor Icons
-     */
-    name: PhosphorIconsType;
-    /**
-     * Icon size
-     */
-    size?: IconSize | number;
-    /**
-     * Icon weight/style
-     */
-    weight?: IconWeight;
-    /**
-     * Icon color
-     */
-    color?: string;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Custom style
-     */
-    style?: React__default.CSSProperties;
-    /**
-     * Alt text for accessibility
-     */
-    alt?: string;
-}
-/**
- * Icon component that displays a Phosphor icon
- */
-declare const Icon: React__default.FC<IconProps>;
-
 /**
  * Pie chart specific options
  */
@@ -10788,11 +10755,11 @@ declare const ATOMIX_GLASS: {
     };
     DEFAULTS: {
         DISPLACEMENT_SCALE: number;
-        BLUR_AMOUNT: number;
-        SATURATION: number;
-        ABERRATION_INTENSITY: number;
+        readonly BLUR_AMOUNT: number;
+        readonly SATURATION: number;
+        readonly ABERRATION_INTENSITY: number;
         ELASTICITY: number;
-        CORNER_RADIUS: number;
+        readonly CORNER_RADIUS: number;
         PADDING: string;
         MODE: "standard";
         OVER_LIGHT: false;
@@ -10815,6 +10782,11 @@ declare const ATOMIX_GLASS: {
         ELASTICITY_TRANSLATION_FACTOR: number;
         ELASTICITY_DISTANCE_THRESHOLD: number;
         ELASTICITY_COMPRESSION_FACTOR: number;
+        ELASTICITY_STIFFNESS: number;
+        ELASTICITY_DAMPING: number;
+        ELASTICITY_VELOCITY_FACTOR: number;
+        ELASTICITY_STRETCH_RATIO: number;
+        ELASTICITY_MAGNIFICATION_BASE: number;
         DEFAULT_CORNER_RADIUS: number;
         MAX_SIZE: number;
         PALETTE: {
@@ -10824,84 +10796,86 @@ declare const ATOMIX_GLASS: {
         GRADIENT: {
             BASE_ANGLE: number;
             ANGLE_MULTIPLIER: number;
+            VELOCITY_ANGLE_MULTIPLIER: number;
+            CHROMATIC_OFFSET: number;
             BORDER_STOP_1: {
                 MIN: number;
                 BASE: number;
-                MULTIPLIER: number;
+                readonly MULTIPLIER: number;
             };
             BORDER_STOP_2: {
                 MAX: number;
                 BASE: number;
-                MULTIPLIER: number;
+                readonly MULTIPLIER: number;
             };
             BORDER_OPACITY: {
                 BASE_1: number;
-                BASE_2: number;
-                BASE_3: number;
-                BASE_4: number;
-                MULTIPLIER_LOW: number;
-                MULTIPLIER_HIGH: number;
+                readonly BASE_2: number;
+                readonly BASE_3: number;
+                readonly BASE_4: number;
+                readonly MULTIPLIER_LOW: number;
+                readonly MULTIPLIER_HIGH: number;
             };
             CENTER_POSITION: number;
             HOVER_POSITION: {
                 DIVISOR_1: number;
-                DIVISOR_2: number;
-                MULTIPLIER_3: number;
+                readonly DIVISOR_2: number;
+                readonly MULTIPLIER_3: number;
             };
-            BASE_LAYER_MULTIPLIER: number;
+            readonly BASE_LAYER_MULTIPLIER: number;
         };
         GRADIENT_OPACITY: {
             HOVER_1: {
                 BLACK_START: number;
-                BLACK_MID: number;
+                readonly BLACK_MID: number;
                 BLACK_STOP: number;
-                BLACK_END: number;
+                readonly BLACK_END: number;
                 WHITE_START: number;
-                WHITE_STOP: number;
+                readonly WHITE_STOP: number;
             };
             HOVER_2: {
                 BLACK_START: number;
-                BLACK_MID: number;
+                readonly BLACK_MID: number;
                 BLACK_STOP: number;
-                BLACK_END: number;
+                readonly BLACK_END: number;
                 WHITE_START: number;
-                WHITE_STOP: number;
+                readonly WHITE_STOP: number;
             };
             HOVER_3: {
                 BLACK_START: number;
-                BLACK_MID: number;
+                readonly BLACK_MID: number;
                 BLACK_STOP: number;
-                BLACK_END: number;
+                readonly BLACK_END: number;
                 WHITE_START: number;
-                WHITE_STOP: number;
+                readonly WHITE_STOP: number;
             };
         };
         BASE_GRADIENT: {
             ANGLE: number;
             BLACK_START_BASE: number;
-            BLACK_START_MULTIPLIER: number;
+            readonly BLACK_START_MULTIPLIER: number;
             BLACK_MID_BASE: number;
-            BLACK_MID_MULTIPLIER: number;
+            readonly BLACK_MID_MULTIPLIER: number;
             BLACK_MID_STOP: number;
-            BLACK_END_BASE: number;
-            BLACK_END_MULTIPLIER: number;
-            WHITE_OPACITY: number;
+            readonly BLACK_END_BASE: number;
+            readonly BLACK_END_MULTIPLIER: number;
+            readonly WHITE_OPACITY: number;
         };
         OVERLAY_GRADIENT: {
             BLACK_START_BASE: number;
-            BLACK_START_MULTIPLIER: number;
-            BLACK_MID: number;
+            readonly BLACK_START_MULTIPLIER: number;
+            readonly BLACK_MID: number;
             BLACK_MID_STOP: number;
-            BLACK_END_BASE: number;
-            BLACK_END_MULTIPLIER: number;
-            WHITE_OPACITY: number;
+            readonly BLACK_END_BASE: number;
+            readonly BLACK_END_MULTIPLIER: number;
+            readonly WHITE_OPACITY: number;
         };
         OVERLAY_HIGHLIGHT: {
             POSITION_X: number;
             POSITION_Y: number;
             WHITE_OPACITY: number;
-            STOP: number;
-            OPACITY_MULTIPLIER: number;
+            readonly STOP: number;
+            readonly OPACITY_MULTIPLIER: number;
         };
         MULTIPLIERS: {
             SHADER_DISPLACEMENT: number;
@@ -14230,6 +14204,20 @@ declare function applyComponentTheme(component: string, style?: React.CSSPropert
  */
 declare function useComponentTheme(component: string, variant?: string, size?: string, tokens?: Partial<DesignTokens>): (property: string) => string;
 
+/**
+ * Theme Manager Utility Functions
+ *
+ * Helper functions for theme operations including CSS loading, DOM manipulation,
+ * and theme validation.
+ */
+
+/**
+ * Detect system theme preference
+ *
+ * @returns 'dark' if system prefers dark mode, 'light' otherwise
+ */
+declare const getSystemTheme: () => "light" | "dark";
+
 /**
  * Theme Utilities
  *
@@ -14299,12 +14287,6 @@ declare function toggleTheme(options?: ThemeSwitcherOptions): ThemeMode;
  * @returns Current theme mode or 'light' if not set
  */
 declare function getCurrentTheme(storageKey?: string): ThemeMode;
-/**
- * Get system theme preference
- *
- * @returns 'dark' if system prefers dark mode, 'light' otherwise
- */
-declare function getSystemTheme(): ThemeMode;
 /**
  * Initialize theme based on saved preference or system preference
  *
@@ -16103,7 +16085,7 @@ declare const _default: {
     switchTheme: typeof switchTheme;
     toggleTheme: typeof toggleTheme;
     getCurrentTheme: typeof getCurrentTheme;
-    getSystemTheme: typeof getSystemTheme;
+    getSystemTheme: () => "light" | "dark";
     initializeTheme: typeof initializeTheme;
     listenToSystemTheme: typeof listenToSystemTheme;
     persistTheme: typeof persistTheme;