@shohojdhara/atomix 0.3.12 → 0.3.14

package/dist/forms.d.ts

@@ -328,7 +328,7 @@ interface OverLightObjectConfig {
  * AtomixGlass component props interface
  */
 interface AtomixGlassProps {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     displacementScale?: number;
     blurAmount?: number;
     saturation?: number;
@@ -504,12 +504,17 @@ interface FormGroupProps extends BaseComponentProps {
 interface InputProps extends BaseComponentProps {
     /**
      * Input type
+     * @default 'text'
      */
     type?: string;
     /**
      * Input value
      */
     value?: string | number;
+    /**
+     * Default value for uncontrolled input
+     */
+    defaultValue?: string | number;
     /**
      * Change handler
      */
@@ -552,6 +557,7 @@ interface InputProps extends BaseComponentProps {
     autoFocus?: boolean;
     /**
      * Size variant
+     * @default 'md'
      */
     size?: Size;
     /**
@@ -593,11 +599,11 @@ interface InputProps extends BaseComponentProps {
     /**
      * Accessible label (if no visible label)
      */
-    ariaLabel?: string;
+    'aria-label'?: string;
     /**
      * ID of element that describes this input
      */
-    ariaDescribedBy?: string;
+    'aria-describedby'?: string;
     /**
      * Glass morphism effect
      */
@@ -702,6 +708,7 @@ interface SelectProps extends BaseComponentProps {
     name?: string;
     /**
      * Size variant
+     * @default 'md'
      */
     size?: Size;
     /**
@@ -719,11 +726,11 @@ interface SelectProps extends BaseComponentProps {
     /**
      * Accessible label (if no visible label)
      */
-    ariaLabel?: string;
+    'aria-label'?: string;
     /**
      * ID of element that describes this select
      */
-    ariaDescribedBy?: string;
+    'aria-describedby'?: string;
     /**
      * Glass morphism effect for the select
      * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
@@ -789,16 +796,20 @@ interface CheckboxProps extends BaseComponentProps {
     /**
      * Accessible label (if no visible label)
      */
-    ariaLabel?: string;
+    'aria-label'?: string;
     /**
      * ID of element that describes this checkbox
      */
-    ariaDescribedBy?: string;
+    'aria-describedby'?: string;
     /**
      * Glass morphism effect for the checkbox
      * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
      */
     glass?: AtomixGlassProps | boolean;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
     /**
      * Error message to display
      */
@@ -884,11 +895,11 @@ interface RadioProps extends BaseComponentProps {
     /**
      * Accessible label (if no visible label)
      */
-    ariaLabel?: string;
+    'aria-label'?: string;
     /**
      * ID of element that describes this radio
      */
-    ariaDescribedBy?: string;
+    'aria-describedby'?: string;
     /**
      * Glass morphism effect for the radio button
      * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
@@ -944,6 +955,10 @@ interface TextareaProps extends BaseComponentProps {
      * Textarea value
      */
     value?: string;
+    /**
+     * Default value for uncontrolled textarea
+     */
+    defaultValue?: string;
     /**
      * Change handler
      */
@@ -978,6 +993,7 @@ interface TextareaProps extends BaseComponentProps {
     name?: string;
     /**
      * Number of rows
+     * @default 4
      */
     rows?: number;
     /**
@@ -994,6 +1010,7 @@ interface TextareaProps extends BaseComponentProps {
     minLength?: number;
     /**
      * Size variant
+     * @default 'md'
      */
     size?: Size;
     /**
@@ -1015,11 +1032,11 @@ interface TextareaProps extends BaseComponentProps {
     /**
      * Accessible label (if no visible label)
      */
-    ariaLabel?: string;
+    'aria-label'?: string;
     /**
      * ID of element that describes this textarea
      */
-    ariaDescribedBy?: string;
+    'aria-describedby'?: string;
     /**
      * Glass morphism effect
      */

package/dist/forms.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 
-import React, { useRef, useEffect, memo, forwardRef, useState, useMemo, useCallback } from "react";
+import React, { useRef, useEffect, memo, forwardRef, useMemo, useState, useCallback } from "react";
 
 // Define checkbox class constants
 const FORM_CLASSES_BASE = "c-form", FORM_CLASSES_DISABLED = "c-form--disabled", FORM_GROUP_CLASSES_BASE = "c-form-group", FORM_GROUP_CLASSES_SMALL = "c-form-group--sm", FORM_GROUP_CLASSES_LARGE = "c-form-group--lg", FORM_GROUP_CLASSES_INVALID = "c-form-group--invalid", FORM_GROUP_CLASSES_VALID = "c-form-group--valid", FORM_GROUP_CLASSES_DISABLED = "c-form-group--disabled", INPUT_CLASSES_BASE = "c-input", INPUT_CLASSES_SMALL = "c-input--sm", INPUT_CLASSES_LARGE = "c-input--lg", INPUT_CLASSES_INVALID = "is-invalid", INPUT_CLASSES_VALID = "is-valid", INPUT_CLASSES_DISABLED = "is-disabled", INPUT_CLASSES_FULL_WIDTH = "c-input--full-width", INPUT_CLASSES_PREFIX_ICON = "c-input--prefix-icon", INPUT_CLASSES_SUFFIX_ICON = "c-input--suffix-icon", INPUT_CLASSES_CLEARABLE = "c-input--clearable", INPUT_CLASSES_WITH_COUNTER = "c-input--with-counter", INPUT_CLASSES_PASSWORD_TOGGLE = "c-input--password-toggle", INPUT_ELEMENTS_WRAPPER = "c-input-wrapper", RADIO_CLASSES_BASE = "c-radio", RADIO_CLASSES_INVALID = "is-error", RADIO_CLASSES_VALID = "is-valid", RADIO_CLASSES_DISABLED = "is-disabled", SELECT_CLASSES_BASE = "c-select", SELECT_CLASSES_SELECTED = "c-select__selected", SELECT_CLASSES_SELECT_BODY = "c-select__body", SELECT_CLASSES_SELECT_PANEL = "c-select__panel", SELECT_CLASSES_SELECT_ITEMS = "c-select__items", SELECT_CLASSES_SELECT_ITEM = "c-select__item", SELECT_CLASSES_TOGGLE_ICON = "c-select__toggle-icon", SELECT_CLASSES_ICON_CARET = "icon-atomix-caret-down", SELECT_CLASSES_SMALL = "c-select--sm", SELECT_CLASSES_LARGE = "c-select--lg", SELECT_CLASSES_INVALID = "is-invalid", SELECT_CLASSES_VALID = "is-valid", SELECT_CLASSES_DISABLED = "is-disabled", SELECT_CLASSES_IS_OPEN = "is-open", TEXTAREA_CLASSES_BASE = "c-input c-input--textarea", TEXTAREA_CLASSES_SMALL = "c-input--sm", TEXTAREA_CLASSES_LARGE = "c-input--lg", TEXTAREA_CLASSES_INVALID = "is-invalid", TEXTAREA_CLASSES_VALID = "is-valid", TEXTAREA_CLASSES_DISABLED = "is-disabled", ATOMIX_GLASS = {
@@ -444,7 +444,13 @@ const FORM_CLASSES_BASE = "c-form", FORM_CLASSES_DISABLED = "c-form--disabled",
  */ GlassFilterComponent.displayName = "GlassFilter";
 
 // Memoize component to prevent unnecessary re-renders
-const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.displacementScale === nextProps.displacementScale && prevProps.aberrationIntensity === nextProps.aberrationIntensity && prevProps.mode === nextProps.mode && prevProps.shaderMapUrl === nextProps.shaderMapUrl && prevProps.blurAmount === nextProps.blurAmount)), sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
+const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.displacementScale === nextProps.displacementScale && prevProps.aberrationIntensity === nextProps.aberrationIntensity && prevProps.mode === nextProps.mode && prevProps.shaderMapUrl === nextProps.shaderMapUrl && prevProps.blurAmount === nextProps.blurAmount));
+
+// Module-level counter for deterministic ID generation
+let idCounter = 0;
+
+// Module-level shared shader cache with LRU eviction
+const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
     x: 0,
     y: 0
 }, globalMousePosition: globalMousePosition = {
@@ -455,10 +461,8 @@ const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
     height: 0
 }, onClick: onClick, mode: mode = "standard", effectiveDisableEffects: effectiveDisableEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", enableLiquidBlur: enableLiquidBlur = !1, elasticity: elasticity = 0, contentRef: contentRef}, ref) => {
     // Generate a stable, deterministic ID for SSR compatibility
-    // Use a counter-based approach to avoid hydration mismatches
-    const [filterId] = useState((() => 
-    // Use a simple counter for deterministic IDs
-    "undefined" == typeof window ? `atomix-glass-filter-ssr-${Math.random().toString(36).substring(2, 11)}` : `atomix-glass-filter-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`)), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null);
+    // Use a module-level counter that's consistent across server and client
+    const filterId = useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null);
     // Lazy load shader utilities only when shader mode is needed
     useEffect((() => {
         "shader" === mode ? 
@@ -499,9 +503,9 @@ const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
                         width: glassSize.width,
                         height: glassSize.height,
                         fragment: selectedShader
-                    });
-                    // Use requestIdleCallback if available for non-blocking generation
-                    const generate = () => {
+                    }), 
+                    // Defer shader generation with longer delay to avoid blocking
+                    setTimeout((() => {
                         const url = shaderGeneratorRef.current?.updateShader() || "";
                         ((key, url) => {
                             // Evict oldest entries if at capacity
@@ -520,20 +524,15 @@ const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
                             // Development mode: log cache size
                             "undefined" != typeof process && "production" === process.env?.NODE_ENV || sharedShaderCache.size;
                         })(cacheKey, url), setShaderMapUrl(url);
-                    };
-                    "undefined" != typeof requestIdleCallback ? requestIdleCallback(generate, {
-                        timeout: 1e3
-                    }) : 
-                    // Fallback to setTimeout for browsers without requestIdleCallback
-                    setTimeout(generate, 0);
+                    }), 100);
                 } catch (error) {
                     console.warn("AtomixGlassContainer: Error generating shader map", error), setShaderMapUrl("");
                 } else 
                 // Shader utils not loaded yet, retry after a short delay
                 shaderDebounceTimeoutRef.current = setTimeout(generateShader, 100);
             };
-            // Debounce with 300ms delay
-                        shaderDebounceTimeoutRef.current = setTimeout(generateShader, 300);
+            // Debounce with 500ms delay to reduce frequency
+                        shaderDebounceTimeoutRef.current = setTimeout(generateShader, 500);
         } else 
         // Not in shader mode, clear URL
         setShaderMapUrl("");
@@ -600,7 +599,7 @@ const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
                 backdropFilter: `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`
             };
         }
-    }), [ filterId, liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveDisableEffects, enableLiquidBlur ]), containerVars = useMemo((() => {
+    }), [ liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveDisableEffects, enableLiquidBlur ]), containerVars = useMemo((() => {
         try {
             // Safe extraction of mouse offset values
             const mx = mouseOffset && "number" == typeof mouseOffset.x && !isNaN(mouseOffset.x) ? mouseOffset.x : 0, my = mouseOffset && "number" == typeof mouseOffset.y && !isNaN(mouseOffset.y) ? mouseOffset.y : 0;
@@ -689,7 +688,6 @@ const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
     });
 }));
 
-// Module-level shared shader cache with LRU eviction
 AtomixGlassContainer.displayName = "AtomixGlassContainer";
 
 // Singleton instance
@@ -1439,7 +1437,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
 
 /**
  * Checkbox - A component for checkbox inputs
- */ const Checkbox =  memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, indeterminate: indeterminate = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
+ */ const Checkbox =  memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, indeterminate: indeterminate = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onClick: onClick, glass: glass}) => {
     const {generateCheckboxClass: generateCheckboxClass, checkboxRef: checkboxRef} = function(initialProps) {
         // Default checkbox properties
         const defaultProps = {
@@ -1489,6 +1487,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             className: "c-checkbox__input",
             checked: checked,
             onChange: onChange,
+            onClick: onClick,
             disabled: disabled,
             required: required,
             id: id,
@@ -1648,7 +1647,7 @@ FormGroup.displayName = "FormGroup";
 /**
  * Input - A component for text input fields
  */
-const Input =  memo( forwardRef((({type: type = "text", value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, autoComplete: autoComplete, autoFocus: autoFocus = !1, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, maxLength: maxLength, minLength: minLength, pattern: pattern, min: min, max: max, step: step, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}, ref) => {
+const Input =  memo( forwardRef((({type: type = "text", value: value, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, autoComplete: autoComplete, autoFocus: autoFocus = !1, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, maxLength: maxLength, minLength: minLength, pattern: pattern, min: min, max: max, step: step, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}, ref) => {
     const {generateInputClass: generateInputClass} = 
     /**
  * Input state and functionality
@@ -1703,6 +1702,7 @@ const Input =  memo( forwardRef((({type: type = "text", value: value, onChange:
         type: type,
         className: inputClass,
         value: value,
+        defaultValue: defaultValue,
         onChange: onChange,
         onBlur: onBlur,
         onFocus: onFocus,
@@ -1753,7 +1753,7 @@ Input.displayName = "Input";
 /**
  * Radio - A component for radio button inputs
  */
-const Radio =  memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
+const Radio =  memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}) => {
     const {generateRadioClass: generateRadioClass} = 
     /**
  * Radio state and functionality
@@ -1838,7 +1838,7 @@ Radio.displayName = "Radio";
 /**
  * Select - A component for dropdown selection
  */
-const Select =  memo((({options: options = [], value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder = "Select an option", className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, size: size = "md", invalid: invalid = !1, valid: valid = !1, multiple: multiple = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
+const Select =  memo((({options: options = [], value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder = "Select an option", className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, size: size = "md", invalid: invalid = !1, valid: valid = !1, multiple: multiple = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}) => {
     const {generateSelectClass: generateSelectClass} = 
     /**
  * Select state and functionality
@@ -2017,7 +2017,7 @@ Select.displayName = "Select";
 /**
  * Textarea - A component for multiline text input
  */
-const Textarea =  memo( forwardRef((({value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, rows: rows = 4, cols: cols, maxLength: maxLength, minLength: minLength, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, autoFocus: autoFocus = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}, ref) => {
+const Textarea =  memo( forwardRef((({value: value, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, rows: rows = 4, cols: cols, maxLength: maxLength, minLength: minLength, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, autoFocus: autoFocus = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}, ref) => {
     const {generateTextareaClass: generateTextareaClass} = function(initialProps) {
         // Default textarea properties
         const defaultProps = {
@@ -2057,6 +2057,7 @@ const Textarea =  memo( forwardRef((({value: value, onChange: onChange, onBlur:
         ref: ref,
         className: textareaClass,
         value: value,
+        defaultValue: defaultValue,
         onChange: onChange,
         onBlur: onBlur,
         onFocus: onFocus,