@shohojdhara/atomix 0.3.13 → 0.3.14

package/dist/charts.d.ts

@@ -157,7 +157,7 @@ interface OverLightObjectConfig {
  * AtomixGlass component props interface
  */
 interface AtomixGlassProps {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     displacementScale?: number;
     blurAmount?: number;
     saturation?: number;

package/dist/charts.js

@@ -3167,7 +3167,7 @@ toolbarConfig: toolbarConfig, customToolbarActions: customToolbarActions, custom
         tabIndex: 0,
         ...props,
         children: [ (title || subtitle || showToolbar) && jsxs("div", {
-            className: `${CHART.HEADER_CLASS} u-d-flex u-justify-between u-align-items-start u-gap-4`,
+            className: `${CHART.HEADER_CLASS} u-flex u-justify-between u-items-start u-gap-4`,
             children: [ jsxs("div", {
                 className: `${CHART.HEADER_CONTENT_CLASS} u-flex-1`,
                 children: [ title && jsx("h3", {

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

@@ -1579,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} = 
     /**
@@ -1621,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,
@@ -1634,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",
@@ -1703,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
@@ -1741,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", {
@@ -1748,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) {
@@ -1875,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,
@@ -1912,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
@@ -1950,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) {
@@ -2034,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
@@ -2095,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
@@ -2218,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
@@ -2836,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
@@ -2847,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
         };
@@ -2859,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();
@@ -2871,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
@@ -2882,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, {
@@ -2928,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
             }),
@@ -2951,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
         }),