@shohojdhara/atomix 0.3.12 → 0.3.14

package/dist/core.d.ts

@@ -384,7 +384,7 @@ interface OverLightObjectConfig {
  * AtomixGlass component props interface
  */
 interface AtomixGlassProps {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     displacementScale?: number;
     blurAmount?: number;
     saturation?: number;
@@ -500,6 +500,7 @@ interface ListProps extends BaseComponentProps {
     variant?: listvariant;
     /**
      * List size
+     * @default 'md'
      */
     size?: Size;
     /**
@@ -542,10 +543,12 @@ interface ButtonProps extends BaseComponentProps {
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Button variant
+     * @default 'solid'
      */
     variant?: Variant;
     /**
      * Button size
+     * @default 'md'
      */
     size?: Size;
     /**
@@ -642,19 +645,19 @@ interface ButtonProps extends BaseComponentProps {
     /**
      * ARIA label for accessibility
      */
-    ariaLabel?: string;
+    'aria-label'?: string;
     /**
      * ARIA described by reference
      */
-    ariaDescribedBy?: string;
+    'aria-describedby'?: string;
     /**
      * ARIA expanded state (for toggle buttons)
      */
-    ariaExpanded?: boolean;
+    'aria-expanded'?: boolean;
     /**
      * ARIA controls reference
      */
-    ariaControls?: string;
+    'aria-controls'?: string;
     /**
      * Tab index for keyboard navigation
      */
@@ -683,16 +686,26 @@ interface BadgeProps extends BaseComponentProps {
     label: string;
     /**
      * Badge color variant
+     * @default 'primary'
      */
     variant?: ThemeColor;
     /**
      * Badge size
+     * @default 'md'
      */
     size?: Size;
     /**
      * Optional icon
      */
     icon?: ReactNode;
+    /**
+     * Callback for dismissible badges (shows close button when provided)
+     */
+    onRemove?: () => void;
+    /**
+     * Accessible label for the badge
+     */
+    'aria-label'?: string;
     /**
      * Glass morphism effect for the badge
      * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
@@ -764,13 +777,13 @@ interface CalloutProps extends BaseComponentProps {
      */
     actions?: ReactNode;
     /**
-     * Display in one line mode
+     * Display in compact (one-line) mode
      */
-    oneLine?: boolean;
+    compact?: boolean;
     /**
      * Display as toast notification
      */
-    toast?: boolean;
+    isToast?: boolean;
     /**
      * Glass morphism effect for the callout
      * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
@@ -813,12 +826,17 @@ interface AccordionProps$1 extends BaseComponentProps {
      * Whether the accordion is disabled
      */
     disabled?: boolean;
+    /**
+     * Callback called when the open state changes
+     */
     onOpenChange?: (open: boolean) => void;
     /**
+     * @deprecated Use onOpenChange instead
      * Optional open handler
      */
     onOpen?: () => void;
     /**
+     * @deprecated Use onOpenChange instead
      * Optional close handler
      */
     onClose?: () => void;
@@ -834,16 +852,28 @@ interface AccordionProps$1 extends BaseComponentProps {
 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
@@ -982,11 +1012,11 @@ interface CardProps extends BaseComponentProps {
     /**
      * ARIA label for accessibility
      */
-    ariaLabel?: string;
+    'aria-label'?: string;
     /**
      * ARIA described by reference
      */
-    ariaDescribedBy?: string;
+    'aria-describedby'?: string;
     /**
      * Tab index for keyboard navigation
      */
@@ -1210,7 +1240,7 @@ interface BreadcrumbProps {
     /**
      * Aria label for the navigation
      */
-    ariaLabel?: string;
+    'aria-label'?: string;
     /**
      * Optional custom link component
      */

package/dist/core.js

@@ -588,7 +588,13 @@ import * as PhosphorIcons from "@phosphor-icons/react";
 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 = {
@@ -599,10 +605,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 ? 
@@ -643,9 +647,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
@@ -664,20 +668,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("");
@@ -744,7 +743,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;
@@ -833,7 +832,6 @@ const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
     });
 }));
 
-// Module-level shared shader cache with LRU eviction
 AtomixGlassContainer.displayName = "AtomixGlassContainer";
 
 // Singleton instance
@@ -1581,7 +1579,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     });
 }
 
-const Accordion =  memo((({title: title, children: children, defaultOpen: defaultOpen = !1, isOpen: controlledOpen, onOpenChange: onOpenChange, disabled: disabled = !1, iconPosition: iconPosition = "right", icon: icon, className: className = "", style: style, glass: glass}) => {
+const Accordion =  memo((({title: title, children: children, defaultOpen: defaultOpen = !1, isOpen: controlledOpen, onOpenChange: onOpenChange, onOpen: onOpen, onClose: onClose, disabled: disabled = !1, iconPosition: iconPosition = "right", icon: icon, className: className = "", style: style, glass: glass}) => {
     // Generate unique IDs for accessibility
     const instanceId = useId(), buttonId = `accordion-header-${instanceId}`, panelId = `accordion-panel-${instanceId}`, {state: state, toggle: toggle, updatePanelHeight: updatePanelHeight, panelRef: panelRef, contentRef: contentRef, generateClassNames: generateClassNames, generateHeaderClassNames: generateHeaderClassNames} = 
     /**
@@ -1623,7 +1621,12 @@ const Accordion =  memo((({title: title, children: children, defaultOpen: defaul
                 panelHeight: panelHeight
             },
             toggle: () => {
-                defaultProps.disabled || (isControlled ? defaultProps.onOpenChange && defaultProps.onOpenChange(!isOpen) : setInternalOpen((prev => !prev)));
+                if (!defaultProps.disabled) {
+                    const nextOpen = !isOpen;
+                    isControlled || setInternalOpen(nextOpen), defaultProps.onOpenChange?.(nextOpen), 
+                    // Call legacy handlers
+                    nextOpen ? defaultProps.onOpen?.() : defaultProps.onClose?.();
+                }
             },
             updatePanelHeight: updatePanelHeight,
             panelRef: panelRef,
@@ -1636,7 +1639,9 @@ const Accordion =  memo((({title: title, children: children, defaultOpen: defaul
         disabled: disabled,
         iconPosition: iconPosition,
         isOpen: controlledOpen,
-        onOpenChange: onOpenChange
+        onOpenChange: onOpenChange,
+        onOpen: onOpen,
+        onClose: onClose
     }), defaultIcon = jsx("i", {
         className: "c-accordion__icon",
         "aria-hidden": "true",
@@ -1705,7 +1710,7 @@ const Accordion =  memo((({title: title, children: children, defaultOpen: defaul
 // Set display name for debugging
 Accordion.displayName = "Accordion";
 
-const Badge =  memo((({label: label, variant: variant = "primary", size: size = "md", disabled: disabled = !1, icon: icon, className: className = "", glass: glass, style: style}) => {
+const Badge =  memo((({label: label, variant: variant = "primary", size: size = "md", disabled: disabled = !1, icon: icon, onRemove: onRemove, "aria-label": ariaLabel, className: className = "", glass: glass, style: style}) => {
     const {generateBadgeClass: generateBadgeClass} = 
     /**
  * Badge state and functionality
@@ -1743,6 +1748,7 @@ const Badge =  memo((({label: label, variant: variant = "primary", size: size =
     }), badgeElement = jsxs("span", {
         className: badgeClass,
         "aria-disabled": disabled,
+        "aria-label": ariaLabel,
         ref: ref,
         style: style,
         children: [ icon && jsx("span", {
@@ -1750,6 +1756,13 @@ const Badge =  memo((({label: label, variant: variant = "primary", size: size =
             children: icon
         }), jsx("span", {
             children: label
+        }), onRemove && jsx("button", {
+            type: "button",
+            className: "c-badge__close",
+            onClick: onRemove,
+            "aria-label": "Remove badge",
+            disabled: disabled,
+            children: "×"
         }) ]
     });
     if (glass) {
@@ -1877,7 +1890,7 @@ const Block =  forwardRef((({children: children, as: Component = "section", spac
  * ```
  */ Block.displayName = "Block";
 
-const Breadcrumb =  memo((({items: items, divider: divider, className: className = "", ariaLabel: ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style}) => {
+const Breadcrumb =  memo((({items: items, divider: divider, className: className = "", "aria-label": ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style}) => {
     const breadcrumbClasses = [ BREADCRUMB.CLASSES.BASE, className ].filter(Boolean).join(" ");
     return jsx("nav", {
         "aria-label": ariaLabel,
@@ -1914,7 +1927,7 @@ const Breadcrumb =  memo((({items: items, divider: divider, className: className
 
 Breadcrumb.displayName = "Breadcrumb";
 
-const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullscreen: fullscreen = !1, className: className = "", style: style, glass: glass}) => {
+const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullscreen: fullscreen = !1, className: className = "", style: style, glass: glass, "aria-label": ariaLabel, role: role = "status"}) => {
     const {generateSpinnerClass: generateSpinnerClass} = 
     /**
  * Spinner state and functionality
@@ -1952,10 +1965,11 @@ const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullsc
     }), spinnerContent = jsx("div", {
         className: spinnerClass,
         style: style,
-        role: "status",
+        role: role,
+        "aria-label": ariaLabel || "Loading",
         children: jsx("span", {
             className: "u-visually-hidden",
-            children: "Loading..."
+            children: ariaLabel || "Loading..."
         })
     });
     if (glass) {
@@ -2036,7 +2050,7 @@ class ThemeNaming {
    * Convert kebab-case to camelCase for JavaScript properties
    * @param str - String to convert
    */    static kebabToCamel(str) {
-        return str.replace(/-([a-z])/g, (g => g[1].toUpperCase()));
+        return str.replace(/-([a-z])/g, (g => g[1]?.toUpperCase() ?? ""));
     }
     /**
    * Create a CSS variable name
@@ -2097,7 +2111,7 @@ class ThemeNaming {
 
 ThemeNaming.prefix = "atomix";
 
-const Button =  React.memo( forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, ariaExpanded: ariaExpanded, ariaControls: ariaControls, tabIndex: tabIndex, style: style, LinkComponent: LinkComponent, ...props}, ref) => {
+const Button =  React.memo( forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, LinkComponent: LinkComponent, ...props}, ref) => {
     const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href && !isDisabled), iconElement = iconName ? jsx(Icon, {
         name: iconName,
         size: iconSize
@@ -2220,7 +2234,7 @@ onClick: onClick, onHover: onHover, onFocus: onFocus, href: href, target: target
 // Glass
 glass: glass, 
 // Accessibility
-role: role, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, tabIndex: tabIndex, 
+role: role, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, tabIndex: tabIndex, 
 // Styling
 className: className = "", style: style, ...rest}, ref) => {
     // Determine if card is clickable/interactive
@@ -2838,7 +2852,7 @@ var includes$3 = getBuiltInPrototypeMethod$2("String", "includes"), isPrototypeO
 const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
     var own = it.includes;
     return it === ArrayPrototype || isPrototypeOf(ArrayPrototype, it) && own === ArrayPrototype.includes ? arrayMethod : "string" == typeof it || it === StringPrototype || isPrototypeOf(StringPrototype, it) && own === StringPrototype.includes ? stringMethod : own;
-})), Callout = ({title: title, children: children, icon: icon, variant: variant = "primary", onClose: onClose, actions: actions, oneLine: oneLine = !1, toast: toast = !1, glass: glass, className: className, style: style, ...props}) => {
+})), Callout = ({title: title, children: children, icon: icon, variant: variant = "primary", onClose: onClose, actions: actions, compact: compact = !1, isToast: isToast = !1, glass: glass, className: className, style: style, ...props}) => {
     const {generateCalloutClass: generateCalloutClass, handleClose: handleClose} = 
     /**
  * Callout state and functionality
@@ -2849,8 +2863,8 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         // Default callout properties
         const defaultProps = {
             variant: "primary",
-            oneLine: !1,
-            toast: !1,
+            compact: !1,
+            isToast: !1,
             glass: !1,
             ...initialProps
         };
@@ -2861,8 +2875,8 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
    */        return {
             defaultProps: defaultProps,
             generateCalloutClass: props => {
-                const {variant: variant = defaultProps.variant, oneLine: oneLine = defaultProps.oneLine, toast: toast = defaultProps.toast, glass: glass = defaultProps.glass, className: className = ""} = props;
-                return `c-callout ${variant ? `c-callout--${variant}` : ""} ${oneLine ? "c-callout--oneline" : ""} ${toast ? "c-callout--toast" : ""} ${glass ? "c-callout--glass" : ""} ${className}`.trim();
+                const {variant: variant = defaultProps.variant, compact: compact = defaultProps.compact, isToast: isToast = defaultProps.isToast, glass: glass = defaultProps.glass, className: className = ""} = props;
+                return `c-callout ${variant ? `c-callout--${variant}` : ""} ${compact ? "c-callout--compact" : ""} ${isToast ? "c-callout--toast" : ""} ${glass ? "c-callout--glass" : ""} ${className}`.trim();
             },
             handleClose: handler => () => {
                 handler && handler();
@@ -2873,8 +2887,8 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
  * Callout component for displaying important messages, notifications, or alerts
  */ ({
         variant: variant,
-        oneLine: oneLine,
-        toast: toast,
+        compact: compact,
+        isToast: isToast,
         glass: glass,
         className: className,
         style: style
@@ -2884,7 +2898,7 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
             role: "region"
         };
         // For toast notifications or alerts, use appropriate role and live region
-                return toast ? (baseAttributes.role = "alert", baseAttributes["aria-live"] = "polite") : _includesInstanceProperty(_context = [ "warning", "error" ]).call(_context, variant) ? (baseAttributes.role = "alert", 
+                return isToast ? (baseAttributes.role = "alert", baseAttributes["aria-live"] = "polite") : _includesInstanceProperty(_context = [ "warning", "error" ]).call(_context, variant) ? (baseAttributes.role = "alert", 
         baseAttributes["aria-live"] = "assertive") : _includesInstanceProperty(_context2 = [ "info", "success" ]).call(_context2, variant) && (baseAttributes.role = "status", 
         baseAttributes["aria-live"] = "polite"), baseAttributes;
     }, calloutContent = jsxs(Fragment, {
@@ -2930,8 +2944,8 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         return jsx("div", {
             className: generateCalloutClass({
                 variant: variant,
-                oneLine: oneLine,
-                toast: toast,
+                compact: compact,
+                isToast: isToast,
                 glass: glass,
                 className: className
             }),
@@ -2953,8 +2967,8 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
     return jsx("div", {
         className: generateCalloutClass({
             variant: variant,
-            oneLine: oneLine,
-            toast: toast,
+            compact: compact,
+            isToast: isToast,
             glass: glass,
             className: className
         }),