@shohojdhara/atomix 0.5.4 → 0.5.6

package/dist/config.js

@@ -1,7 +1,3 @@
-import "fs";
-
-import "path";
-
 /**
  * Configuration Types
  *
@@ -9,7 +5,8 @@ import "path";
  */
 /**
  * Helper function to define Atomix configuration with type safety
- */ function defineConfig(config) {
+ */
+function defineConfig(config) {
     return config;
 }
 

package/dist/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../src/lib/config/types.ts"],"sourcesContent":[null],"names":["defineConfig","config"],"mappings":";;;;;;;;;;;GAkYM,UAAUA,aAAaC;IAC3B,OAAOA;AACT;;"}
+{"version":3,"file":"config.js","sources":["../src/lib/config/types.ts"],"sourcesContent":[null],"names":["defineConfig","config"],"mappings":";;;;;;;;AAkYM,SAAUA,aAAaC;IAC3B,OAAOA;AACT;;"}

package/dist/core.d.ts

@@ -1,4 +1,4 @@
-import React$1, { ReactNode, HTMLAttributes, ElementType } from 'react';
+import React$1, { ReactNode, HTMLAttributes, MouseEvent, ComponentType, AnchorHTMLAttributes, ElementType } from 'react';
 import * as _phosphor_icons_react from '@phosphor-icons/react';
 
 /**
@@ -897,6 +897,49 @@ interface SpinnerProps 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 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;
+}
 /**
  * Card component props
  */
@@ -1261,6 +1304,11 @@ interface BreadcrumbItemData {
      */
     className?: string;
 }
+interface LinkComponentProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    href?: string;
+    to?: string;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+}
 interface BreadcrumbItemProps extends React$1.HTMLAttributes<HTMLLIElement> {
     /**
      * URL for the breadcrumb item
@@ -1277,15 +1325,15 @@ interface BreadcrumbItemProps extends React$1.HTMLAttributes<HTMLLIElement> {
     /**
      * Optional click handler for the link
      */
-    onClick?: (event: React$1.MouseEvent<any>) => void;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
     /**
      * Optional custom link component
      */
-    linkAs?: React$1.ElementType<any>;
+    linkAs?: ComponentType<LinkComponentProps>;
     /**
      * Link props to pass to the underlying anchor or linkComponent
      */
-    linkProps?: Record<string, any>;
+    linkProps?: Partial<LinkComponentProps>;
 }
 declare const BreadcrumbItem: React$1.ForwardRefExoticComponent<BreadcrumbItemProps & React$1.RefAttributes<HTMLLIElement>>;
 interface BreadcrumbProps {
@@ -1329,11 +1377,55 @@ type ButtonAsProp = {
     to?: string;
     href?: string;
     linkComponent?: React$1.ElementType;
-    [key: string]: any;
 };
-declare const Button: React$1.NamedExoticComponent<Omit<ButtonProps & ButtonAsProp, "ref"> & React$1.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+declare const Button: React$1.NamedExoticComponent<ButtonProps & ButtonAsProp & React$1.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
-declare const Card: React$1.NamedExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
+interface CardHeaderProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * Header title
+     */
+    title?: React$1.ReactNode;
+    /**
+     * Header subtitle
+     */
+    subtitle?: React$1.ReactNode;
+    /**
+     * Action element (e.g., button) to display in header
+     */
+    action?: React$1.ReactNode;
+    /**
+     * Icon to display in header
+     */
+    icon?: React$1.ReactNode;
+}
+declare const CardHeader: React$1.ForwardRefExoticComponent<CardHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
+interface CardBodyProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Make body scrollable
+     */
+    scrollable?: boolean;
+    /**
+     * Maximum height for scrollable body
+     */
+    maxHeight?: string | number;
+}
+declare const CardBody: React$1.ForwardRefExoticComponent<CardBodyProps & React$1.RefAttributes<HTMLDivElement>>;
+interface CardFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Footer alignment
+     */
+    align?: 'start' | 'center' | 'end' | 'between';
+}
+declare const CardFooter: React$1.ForwardRefExoticComponent<CardFooterProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Card component with subcomponents for creating card layouts
+ */
+type CardComponent = React$1.FC<CardProps> & {
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
+    Footer: typeof CardFooter;
+};
+declare const Card: CardComponent;
 
 declare const ElevationCard: React$1.FC<ElevationCardProps>;
 
@@ -1411,7 +1503,7 @@ declare const List: ListComponent;
 type ListGroupProps = ListGroupProps$1;
 declare const ListGroup: React$1.FC<ListGroupProps>;
 
-declare const Spinner: React$1.FC<SpinnerProps>;
+declare const Spinner: React$1.NamedExoticComponent<SpinnerProps & React$1.RefAttributes<HTMLDivElement>>;
 
 export { _default as Accordion, Badge, Block, Breadcrumb, Button, Callout, Card, ElevationCard, Icon, List, ListGroup, Spinner };
 export type { AccordionProps, BadgeProps, BlockProps, BreadcrumbProps, ButtonProps, CalloutProps, CardProps, ElevationCardProps, IconProps, ListGroupProps, ListProps, SpinnerProps };

package/dist/core.js

@@ -3155,29 +3155,30 @@ const AccordionImpl =  memo((({title: title, children: children, defaultOpen: de
     }), headerClassNames = generateHeaderClassNames(), panelClassNames = ACCORDION.SELECTORS.PANEL.replace(".", ""), hasCompoundComponents = React.Children.toArray(children).some((child => {
         var _context;
         
-        return React.isValidElement(child) && _includesInstanceProperty(_context = [ "AccordionHeader", "AccordionBody" ]).call(_context, child.type.displayName);
+        return React.isValidElement(child) && _includesInstanceProperty(_context = [ "AccordionHeader", "AccordionBody" ]).call(_context, child.type.displayName || "");
     })), content = jsx("div", {
         className: generateClassNames(className) + (glass ? " c-accordion--glass" : ""),
         style: style,
         children: hasCompoundComponents ? React.Children.map(children, (child => {
             if ( React.isValidElement(child)) {
+                const childProps = child.props;
                 if ("AccordionHeader" === child.type.displayName) 
                 return React.cloneElement(child, {
                     id: buttonId,
-                    className: `${headerClassNames} ${child.props.className || ""}`.trim(),
+                    className: `${headerClassNames} ${childProps.className || ""}`.trim(),
                     onClick: e => {
-                        toggle(), child.props.onClick?.(e);
+                        toggle(), childProps?.onClick?.(e);
                     },
                     "aria-expanded": state.isOpen,
                     "aria-controls": panelId,
                     "aria-disabled": disabled,
                     disabled: disabled,
-                    iconPosition: child.props.iconPosition || iconPosition
+                    iconPosition: childProps.iconPosition || iconPosition
                 });
                 if ("AccordionBody" === child.type.displayName) 
                 return React.cloneElement(child, {
                     id: panelId,
-                    className: `${panelClassNames} ${child.props.className || ""}`.trim(),
+                    className: `${panelClassNames} ${childProps.className || ""}`.trim(),
                     "aria-labelledby": buttonId,
                     panelRef: panelRef,
                     contentRef: contentRef
@@ -3468,8 +3469,9 @@ const Breadcrumb =  memo((function({items: items, divider: divider, className: c
         const childrenCount = Children.count(children);
         content = Children.map(children, ((child, index) => {
             if ( isValidElement(child)) {
-                const isLast = index === childrenCount - 1, childProps = child.props, {active: active, linkAs: linkAs, ...otherProps} = childProps;
-                
+                const isLast = index === childrenCount - 1, {active: active, linkAs: linkAs, ...otherProps} = child.props;
+                // Extract props from the child element with proper typing
+                                
                 return cloneElement(child, {
                     active: active ?? (!!isLast || void 0),
                     linkAs: linkAs ?? linkComponent
@@ -3490,7 +3492,7 @@ const Breadcrumb =  memo((function({items: items, divider: divider, className: c
 
 Breadcrumb.displayName = "Breadcrumb", Breadcrumb.Item = BreadcrumbItem;
 
-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 Spinner =  memo( forwardRef((({size: size = "md", variant: variant = "primary", fullscreen: fullscreen = !1, className: className = "", style: style, glass: glass, "aria-label": ariaLabel, role: role = "status", "aria-live": ariaLive = "polite", "aria-describe": ariaDescribe, ...rest}, ref) => {
     const {generateSpinnerClass: generateSpinnerClass} = 
     /**
  * Spinner state and functionality
@@ -3526,13 +3528,17 @@ const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullsc
         fullscreen: fullscreen,
         className: `${className} ${glass ? "c-spinner--glass" : ""}`.trim()
     }), spinnerContent = jsx("div", {
+        ref: ref,
         className: spinnerClass,
         style: style,
         role: role,
         "aria-label": ariaLabel || "Loading",
+        "aria-live": ariaLive,
+        "aria-describe": ariaDescribe,
+        ...rest,
         children: jsx("span", {
             className: "u-visually-hidden",
-            children: ariaLabel || "Loading..."
+            children: ariaLabel || "Loading content..."
         })
     });
     if (glass) {
@@ -3551,7 +3557,7 @@ const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullsc
         });
     }
     return spinnerContent;
-}));
+})));
 
 Spinner.displayName = "Spinner";
 
@@ -3840,7 +3846,66 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
 
 Button.displayName = "Button";
 
-const Card =  React.memo( forwardRef((({
+const CardHeader =  forwardRef((({title: title, subtitle: subtitle, action: action, icon: icon, children: children, className: className = "", ...props}, ref) => {
+    const headerClasses = `${CARD.SELECTORS.HEADER.substring(1)} ${className}`.trim();
+    return jsxs("div", {
+        ref: ref,
+        className: headerClasses,
+        ...props,
+        children: [ icon && jsx("div", {
+            className: CARD.SELECTORS.ICON.substring(1),
+            children: icon
+        }), (title || subtitle) && jsxs("div", {
+            children: [ title && jsx("h3", {
+                className: CARD.SELECTORS.TITLE.substring(1),
+                children: title
+            }), subtitle && jsx("p", {
+                className: CARD.SELECTORS.TEXT.substring(1),
+                children: subtitle
+            }) ]
+        }), action && jsx("div", {
+            className: CARD.SELECTORS.ACTIONS.substring(1),
+            children: action
+        }), children ]
+    });
+}));
+
+CardHeader.displayName = "CardHeader";
+
+const CardBody =  forwardRef((({scrollable: scrollable = !1, maxHeight: maxHeight, children: children, className: className = "", style: style, ...props}, ref) => {
+    const bodyClasses = `${CARD.SELECTORS.BODY.substring(1)} ${scrollable ? "c-card__body--scrollable" : ""} ${className}`.trim(), bodyStyle = {
+        ...style,
+        ...scrollable && maxHeight ? {
+            maxHeight: "number" == typeof maxHeight ? `${maxHeight}px` : maxHeight,
+            overflowY: "auto"
+        } : {}
+    };
+    return jsx("div", {
+        ref: ref,
+        className: bodyClasses,
+        style: bodyStyle,
+        ...props,
+        children: children
+    });
+}));
+
+CardBody.displayName = "CardBody";
+
+const CardFooter =  forwardRef((({align: align, children: children, className: className = "", style: style, ...props}, ref) => {
+    const footerClasses = `${CARD.SELECTORS.FOOTER.substring(1)} ${align ? `c-card__footer--align-${align}` : ""} ${className}`.trim();
+    return jsx("div", {
+        ref: ref,
+        className: footerClasses,
+        style: style,
+        ...props,
+        children: children
+    });
+}));
+
+CardFooter.displayName = "CardFooter";
+
+// Main Card component implementation
+const CardImpl =  React.memo( forwardRef((({
 // Variants
 size: size = "md", variant: variant = "", appearance: appearance = "filled", elevation: elevation = "none", hoverable: hoverable = !1, hoverElevation: hoverElevation = "md", 
 // Layout
@@ -3971,75 +4036,15 @@ className: className = "", style: style, ...rest}, ref) => {
     }) : divElement;
 })));
 
-Card.displayName = "Card";
+CardImpl.displayName = "Card";
 
-const CardHeader =  forwardRef((({title: title, subtitle: subtitle, action: action, icon: icon, children: children, className: className = "", ...props}, ref) => {
-    const headerClasses = `${CARD.SELECTORS.HEADER.substring(1)} ${className}`.trim();
-    return jsxs("div", {
-        ref: ref,
-        className: headerClasses,
-        ...props,
-        children: [ icon && jsx("div", {
-            className: CARD.SELECTORS.ICON.substring(1),
-            children: icon
-        }), (title || subtitle) && jsxs("div", {
-            children: [ title && jsx("h3", {
-                className: CARD.SELECTORS.TITLE.substring(1),
-                children: title
-            }), subtitle && jsx("p", {
-                className: CARD.SELECTORS.TEXT.substring(1),
-                children: subtitle
-            }) ]
-        }), action && jsx("div", {
-            className: CARD.SELECTORS.ACTIONS.substring(1),
-            children: action
-        }), children ]
-    });
-}));
+// Create compound component with proper typing
+const CardWithSubcomponents = CardImpl;
 
-CardHeader.displayName = "CardHeader";
+CardWithSubcomponents.Header = CardHeader, CardWithSubcomponents.Body = CardBody, 
+CardWithSubcomponents.Footer = CardFooter;
 
-const CardBody =  forwardRef((({scrollable: scrollable = !1, maxHeight: maxHeight, children: children, className: className = "", style: style, ...props}, ref) => {
-    const bodyClasses = `${CARD.SELECTORS.BODY.substring(1)} ${scrollable ? "c-card__body--scrollable" : ""} ${className}`.trim(), bodyStyle = {
-        ...style,
-        ...scrollable && maxHeight ? {
-            maxHeight: "number" == typeof maxHeight ? `${maxHeight}px` : maxHeight,
-            overflowY: "auto"
-        } : {}
-    };
-    return jsx("div", {
-        ref: ref,
-        className: bodyClasses,
-        style: bodyStyle,
-        ...props,
-        children: children
-    });
-}));
-
-CardBody.displayName = "CardBody";
-
-const CardFooter =  forwardRef((({align: align, children: children, className: className = "", style: style, ...props}, ref) => {
-    const footerClasses = `${CARD.SELECTORS.FOOTER.substring(1)} ${align ? `c-card__footer--align-${align}` : ""} ${className}`.trim();
-    return jsx("div", {
-        ref: ref,
-        className: footerClasses,
-        style: style,
-        ...props,
-        children: children
-    });
-}));
-
-CardFooter.displayName = "CardFooter", 
-// Attach subcomponents to Card
-Card.Header = CardHeader, Card.Body = CardBody, Card.Footer = CardFooter;
-
-/**
- * Hook for managing Card component state and behaviors
- *
- * @param options - Configuration options for the card
- * @returns Card state and handlers
- */
-const ElevationCard = ({elevationClass: elevationClass = "is-elevated", className: className = "", style: style, children: children, onClick: onClick, ...props}) => {
+const Card = CardWithSubcomponents, ElevationCard = ({elevationClass: elevationClass = "is-elevated", className: className = "", style: style, children: children, onClick: onClick, ...props}) => {
     const {getCardProps: getCardProps} = ((options = {}) => {
         const {elevationEffect: elevationEffect = !1, elevationClass: elevationClass = CARD.CLASSES.ACTIVE, flipEffect: flipEffect = !1, flipTrigger: flipTrigger = "click", focusEffect: focusEffect = !1, clickable: clickable = !1, onClick: onClick} = options, cardRef = useRef(null), frontRef = useRef(null), backRef = useRef(null), [isFlipped, setIsFlipped] = useState(!1), [isElevated, setIsElevated] = useState(!1), [isFocused, setIsFocused] = useState(!1), [isHovered, setIsHovered] = useState(!1), handleClick = useCallback((event => {
             flipEffect && "click" === flipTrigger && setIsFlipped((prev => !prev)), onClick && onClick(event);
@@ -4110,7 +4115,12 @@ const ElevationCard = ({elevationClass: elevationClass = "is-elevated", classNam
     });
 };
 
-ElevationCard.displayName = "ElevationCard";
+/**
+ * Hook for managing Card component state and behaviors
+ *
+ * @param options - Configuration options for the card
+ * @returns Card state and handlers
+ */ ElevationCard.displayName = "ElevationCard";
 
 // Subcomponents
 const CalloutIcon =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
@@ -4231,7 +4241,7 @@ const Callout =  memo((({title: title, children: children, icon: icon, variant:
     }, calloutContent = React.Children.toArray(children).some((child => {
         var _context3;
         
-        return React.isValidElement(child) && _includesInstanceProperty(_context3 = [ "CalloutIcon", "CalloutMessage", "CalloutTitle", "CalloutText", "CalloutActions", "CalloutContent" ]).call(_context3, child.type.displayName);
+        return React.isValidElement(child) && _includesInstanceProperty(_context3 = [ "CalloutIcon", "CalloutMessage", "CalloutTitle", "CalloutText", "CalloutActions", "CalloutContent" ]).call(_context3, child.type.displayName || "");
     })) ? children : jsxs(Fragment, {
         children: [ jsxs("div", {
             className: "c-callout__content",