@aurora-ds/components 0.2.0 → 0.4.0

package/README.md

@@ -46,11 +46,13 @@ function App() {
 
 | Component | Description |
 |-----------|-------------|
+| **Accordion** | Collapsible container to show/hide content |
 | **Button** | Button with variants (contained, outlined, text), icons, and states |
 | **IconButton** | Icon-only button component |
 | **Text** | Typography component with semantic HTML tags (h1-h6, p, span, label) |
 | **Stack** | Flexbox container for horizontal/vertical layouts |
 | **Card** | Container with background, border radius, and shadow |
+| **Chip** | Compact element for tags, labels, or status indicators |
 | **Icon** | Icon wrapper component |
 
 ## License

package/dist/cjs/components/data-display/chip/Chip.props.d.ts

@@ -16,12 +16,15 @@ export type ChipProps = {
     gap?: keyof Theme['spacing'];
     /** Border radius from theme */
     radius?: keyof Theme['radius'];
+    /** Disabled state */
+    disabled?: boolean;
 };
 export type ChipStyleParams = {
     variant: ChipVariant;
     color: ChipColor;
     size: ChipSize;
     isIconOnly: boolean;
+    disabled: boolean;
     gap?: keyof Theme['spacing'];
     radius?: keyof Theme['radius'];
 };

package/dist/cjs/components/index.d.ts

@@ -5,6 +5,8 @@ export * from '@components/inputs/button';
 export * from '@components/inputs/icon-button';
 export * from '@components/layout/stack';
 export * from '@components/layout/card';
+export * from '@components/layout/accordion';
+export * from '@components/navigation/drawer-item';
 export type { ButtonVariants, ButtonVariantStyle } from '@interfaces/button.types';
 export type { TextVariants, TextVariantStyle } from '@interfaces/text.types';
 export type { StackDirection, StackAlign, StackJustify, StackWrap } from '@interfaces/stack.types';

package/dist/cjs/components/layout/accordion/Accordion.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { AccordionProps } from '@components/layout/accordion/Accordion.props.ts';
+/**
+ * Accordion component
+ *
+ * A collapsible container that can show/hide content.
+ * Supports controlled and uncontrolled modes.
+ */
+declare const Accordion: FC<AccordionProps>;
+export default Accordion;

package/dist/cjs/components/layout/accordion/Accordion.props.d.ts

@@ -0,0 +1,36 @@
+import { Theme } from '@aurora-ds/theme';
+import { CSSProperties, ReactNode } from 'react';
+export type AccordionProps = {
+    /** Title displayed in the accordion header */
+    title: string;
+    /** Content to show/hide when accordion is expanded */
+    children: ReactNode;
+    /** Whether the accordion is expanded */
+    expanded?: boolean;
+    /** Default expanded state (for uncontrolled mode) */
+    defaultExpanded?: boolean;
+    /** Callback fired when the accordion expands or collapses */
+    onChange?: (expanded: boolean) => void;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Optional icon to display before title */
+    icon?: ReactNode;
+    /** Optional background color */
+    backgroundColor?: keyof Theme['colors'];
+    /** Optional width */
+    width?: CSSProperties['width'];
+};
+export type AccordionStyleParams = {
+    disabled: boolean;
+    width?: CSSProperties['width'];
+};
+export type AccordionHeaderStyleParams = {
+    disabled: boolean;
+    backgroundColor?: keyof Theme['colors'];
+};
+export type AccordionContentStyleParams = {
+    expanded: boolean;
+};
+export type AccordionIconStyleParams = {
+    expanded: boolean;
+};

package/dist/cjs/components/layout/accordion/Accordion.styles.d.ts

@@ -0,0 +1,7 @@
+import { AccordionContentStyleParams, AccordionHeaderStyleParams, AccordionIconStyleParams, AccordionStyleParams } from '@components/layout/accordion/Accordion.props.ts';
+export declare const ACCORDION_STYLES: {
+    root: (args_0: AccordionStyleParams) => string;
+    header: (args_0: AccordionHeaderStyleParams) => string;
+    expandIcon: (args_0: AccordionIconStyleParams) => string;
+    content: (args_0: AccordionContentStyleParams) => string;
+};

package/dist/cjs/components/layout/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Accordion } from '@components/layout/accordion/Accordion.tsx';
+export type { AccordionProps } from '@components/layout/accordion/Accordion.props.ts';

package/dist/cjs/components/navigation/drawer-item/DrawerItem.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { DrawerItemProps } from '@components/navigation/drawer-item/DrawerItem.props';
+/**
+ * DrawerItem component
+ *
+ * A navigation item for use in drawers/sidebars.
+ * Similar to a text button with selected state support.
+ */
+declare const DrawerItem: FC<DrawerItemProps>;
+export default DrawerItem;

package/dist/cjs/components/navigation/drawer-item/DrawerItem.props.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { ChipColor, ChipVariant } from '@interfaces/chip.types';
+export type DrawerItemProps = {
+    /** DrawerItem text label */
+    label: string;
+    /** Optional icon to display before label */
+    startIcon?: ReactNode;
+    /** Optional icon to display after label */
+    endIcon?: ReactNode;
+    /** Click handler */
+    onClick?: () => void;
+    /** Selected state */
+    selected?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Optional chip to display */
+    chip?: DrawerItemChip;
+};
+type DrawerItemChip = {
+    /** Chip text label */
+    label?: string;
+    /** Chip icon */
+    icon?: ReactNode;
+    /** Chip color */
+    color?: ChipColor;
+    /** Chip variant */
+    variant?: ChipVariant;
+};
+export type DrawerItemStyleParams = {
+    selected?: boolean;
+};
+export {};

package/dist/cjs/components/navigation/drawer-item/DrawerItem.styles.d.ts

@@ -0,0 +1,7 @@
+import { DrawerItemStyleParams } from '@components/navigation/drawer-item/DrawerItem.props';
+/**
+ * DrawerItem styles using createStyles from @aurora-ds/theme
+ */
+export declare const DRAWER_ITEM_STYLES: {
+    root: (args_0: DrawerItemStyleParams) => string;
+};

package/dist/cjs/components/navigation/drawer-item/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DrawerItem } from '@components/navigation/drawer-item/DrawerItem';
+export type { DrawerItemProps } from '@components/navigation/drawer-item/DrawerItem.props';

package/dist/cjs/constants/globalConstants.d.ts

@@ -1,2 +1,2 @@
-/** Button height constant */
 export declare const BUTTON_SIZE = 36;
+export declare const DRAWER_ITEM_HEIGHT = 32;

package/dist/cjs/index.js

@@ -1367,6 +1367,7 @@ const ICON_STYLES = pr((theme) => ({
         justifyContent: 'center',
         overflow: 'hidden',
         transition: 'color 150ms ease-in-out',
+        flexShrink: 0,
         lineHeight: 0,
         height: theme.fontSize[size ?? 'md'],
         width: theme.fontSize[size ?? 'md'],
@@ -1415,7 +1416,21 @@ const Icon = ({ children, size, color, backgroundColor, padding, borderRadius, }
 };
 Icon.displayName = 'Icon';
 
-const getChipColorStyles = (theme, color, variant) => {
+const getChipColorStyles = (theme, color, variant, disabled) => {
+    if (disabled) {
+        return {
+            filled: {
+                backgroundColor: theme.colors.disabled,
+                color: theme.colors.disabledText,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: 'transparent',
+                color: theme.colors.disabledText,
+                borderColor: theme.colors.disabled,
+            },
+        }[variant];
+    }
     const colorMap = {
         default: {
             filled: {
@@ -1501,6 +1516,10 @@ const getChipColorStyles = (theme, color, variant) => {
  */
 const getChipSizeStyles = (theme, size, isIconOnly) => {
     const sizeMap = {
+        '2xs': {
+            iconOnly: { padding: theme.spacing.xs, fontSize: theme.fontSize['2xs'] },
+            withLabel: { padding: `${theme.spacing.xs} ${theme.spacing.sm}`, fontSize: theme.fontSize['2xs'] },
+        },
         xs: {
             iconOnly: { padding: theme.spacing.xs, fontSize: theme.fontSize.xs },
             withLabel: { padding: `${theme.spacing.xs} ${theme.spacing.sm}`, fontSize: theme.fontSize.xs },
@@ -1522,8 +1541,8 @@ const getChipSizeStyles = (theme, size, isIconOnly) => {
 };
 
 const CHIP_STYLES = pr((theme) => ({
-    root: ({ variant, color, size, isIconOnly, gap, radius }) => {
-        const colorStyles = getChipColorStyles(theme, color, variant);
+    root: ({ variant, color, size, isIconOnly, disabled, gap, radius }) => {
+        const colorStyles = getChipColorStyles(theme, color, variant, disabled);
         const sizeStyles = getChipSizeStyles(theme, size, isIconOnly);
         return {
             display: 'flex',
@@ -1670,6 +1689,7 @@ Text.displayName = 'Text';
  */
 const getChipContentSize = (size) => {
     const sizeMap = {
+        '2xs': '2xs',
         xs: 'xs',
         sm: 'sm',
         md: 'sm',
@@ -1690,21 +1710,22 @@ const getChipContentSize = (size) => {
  * **Colors:**
  * - `default`, `primary`, `success`, `warning`, `error`, `info`
  */
-const Chip = ({ label, icon, variant = 'filled', color = 'default', size = 'md', gap, radius, }) => {
+const Chip = ({ label, icon, variant = 'filled', color = 'default', size = 'md', gap, radius, disabled = false, }) => {
     const isIconOnly = Boolean(icon) && !label;
     return (jsxRuntimeExports.jsxs("span", { className: CHIP_STYLES.root({
             variant,
             color,
             size,
             isIconOnly,
+            disabled,
             gap,
             radius,
         }), children: [icon && (jsxRuntimeExports.jsx(Icon, { size: getChipContentSize(size), children: icon })), label && (jsxRuntimeExports.jsx(Text, { variant: 'label', fontSize: getChipContentSize(size), children: label }))] }));
 };
 Chip.displayName = 'Chip';
 
-/** Button height constant */
 const BUTTON_SIZE = 36;
+const DRAWER_ITEM_HEIGHT = 32;
 
 /**
  * Get button variant styles based on the theme
@@ -1870,7 +1891,7 @@ const STACK_STYLES = pr((theme) => ({
  * - `row`: Horizontal layout (default)
  * - `column`: Vertical layout
  */
-const Stack = ({ children, direction = 'row', gap, width, height, align = 'center', justify, wrap, padding, }) => {
+const Stack = ({ children, direction = 'row', gap = 'sm', width, height, align = 'center', justify, wrap, padding, }) => {
     return (jsxRuntimeExports.jsx("div", { className: STACK_STYLES.root({
             direction,
             gap,
@@ -1932,9 +1953,122 @@ const Card = ({ children, direction = 'column', padding = 'md', width, height, g
 };
 Card.displayName = 'Card';
 
+const ACCORDION_STYLES = pr((theme) => {
+    return {
+        root: ({ disabled, width }) => ({
+            width: width ?? '100%',
+            overflow: 'hidden',
+            opacity: disabled ? 0.8 : 1,
+            borderRadius: theme.radius.md,
+        }),
+        header: ({ disabled, backgroundColor }) => ({
+            display: 'flex',
+            alignItems: 'center',
+            width: '100%',
+            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+            border: 'none',
+            backgroundColor: backgroundColor ? theme.colors[backgroundColor] : 'transparent',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            transition: `background-color ${theme.transition.fast}`,
+            gap: theme.spacing.sm,
+            borderRadius: theme.radius.md,
+            ':hover': {
+                backgroundColor: disabled ? 'transparent' : theme.colors.surfaceHover,
+            },
+        }),
+        expandIcon: ({ expanded }) => ({
+            transition: `transform ${theme.transition.fast}`,
+            transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
+        }),
+        content: ({ expanded }) => ({
+            display: expanded ? 'block' : 'none',
+            padding: `0 ${theme.spacing.md} ${theme.spacing.md}`,
+        }),
+    };
+});
+
+const ChevronDownIcon = () => {
+    return (jsxRuntimeExports.jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '100%', height: '100%', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round', "stroke-linejoin": 'round', className: 'lucide lucide-chevron-down-icon lucide-chevron-down', children: jsxRuntimeExports.jsx("path", { d: 'm6 9 6 6 6-6' }) }));
+};
+
+/**
+ * Accordion component
+ *
+ * A collapsible container that can show/hide content.
+ * Supports controlled and uncontrolled modes.
+ */
+const Accordion = ({ title, children, expanded, defaultExpanded = false, onChange, disabled = false, icon, backgroundColor, width }) => {
+    const [internalExpanded, setInternalExpanded] = require$$0.useState(defaultExpanded);
+    // Use controlled value if provided, otherwise use internal state
+    const isExpanded = expanded !== undefined ? expanded : internalExpanded;
+    const handleToggle = () => {
+        if (disabled) {
+            return;
+        }
+        const newExpanded = !isExpanded;
+        // Update internal state for uncontrolled mode
+        if (expanded === undefined) {
+            setInternalExpanded(newExpanded);
+        }
+        // Call onChange callback
+        onChange?.(newExpanded);
+    };
+    return (jsxRuntimeExports.jsxs("div", { className: ACCORDION_STYLES.root({ disabled, width }), children: [jsxRuntimeExports.jsxs("button", { type: 'button', className: ACCORDION_STYLES.header({ disabled, backgroundColor }), onClick: handleToggle, disabled: disabled, "aria-expanded": isExpanded, children: [jsxRuntimeExports.jsxs(Stack, { direction: 'row', align: 'center', gap: 'sm', width: '100%', children: [icon && (jsxRuntimeExports.jsx(Icon, { color: disabled ? 'disabledText' : 'text', children: icon })), jsxRuntimeExports.jsx(Text, { variant: 'label', color: disabled ? 'disabledText' : 'text', children: title })] }), jsxRuntimeExports.jsx("div", { className: ACCORDION_STYLES.expandIcon({ expanded: isExpanded }), children: jsxRuntimeExports.jsx(Icon, { color: disabled ? 'disabledText' : 'text', children: jsxRuntimeExports.jsx(ChevronDownIcon, {}) }) })] }), jsxRuntimeExports.jsx("div", { className: ACCORDION_STYLES.content({ expanded: isExpanded }), role: 'region', "aria-hidden": !isExpanded, children: children })] }));
+};
+Accordion.displayName = 'Accordion';
+
+/**
+ * DrawerItem styles using createStyles from @aurora-ds/theme
+ */
+const DRAWER_ITEM_STYLES = pr((theme) => ({
+    root: ({ selected = false }) => ({
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        boxSizing: 'border-box',
+        gap: theme.spacing.sm,
+        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+        borderRadius: theme.radius.md,
+        cursor: 'pointer',
+        transition: `background-color ${theme.transition.fast}, color ${theme.transition.fast}`,
+        fontFamily: 'inherit',
+        width: '100%',
+        minHeight: DRAWER_ITEM_HEIGHT,
+        maxHeight: DRAWER_ITEM_HEIGHT,
+        backgroundColor: selected ? theme.colors.primary : 'transparent',
+        color: selected ? theme.colors.onPrimary : theme.colors.textSecondary,
+        border: 'none',
+        ':hover': {
+            backgroundColor: selected ? theme.colors.primaryHover : theme.colors.surfaceHover,
+            color: selected ? theme.colors.onPrimary : theme.colors.text,
+        },
+        ':active': {
+            backgroundColor: selected ? theme.colors.primaryActive : theme.colors.surfaceActive,
+        },
+        ':disabled': {
+            color: theme.colors.disabledText,
+            backgroundColor: selected ? theme.colors.disabled : 'transparent',
+            cursor: 'not-allowed',
+        },
+    }),
+}));
+
+/**
+ * DrawerItem component
+ *
+ * A navigation item for use in drawers/sidebars.
+ * Similar to a text button with selected state support.
+ */
+const DrawerItem = ({ label, startIcon, endIcon, selected = false, onClick, disabled, chip }) => {
+    return (jsxRuntimeExports.jsxs("button", { onClick: onClick, disabled: disabled, type: 'button', className: DRAWER_ITEM_STYLES.root({ selected }), children: [jsxRuntimeExports.jsxs(Stack, { children: [startIcon && (jsxRuntimeExports.jsx(Icon, { children: startIcon })), jsxRuntimeExports.jsx(Text, { variant: 'label', maxLines: 1, children: label }), endIcon && (jsxRuntimeExports.jsx(Icon, { children: endIcon }))] }), chip && !selected && (jsxRuntimeExports.jsx(Chip, { label: chip.label, size: '2xs', color: chip.color ?? 'info', icon: chip.icon, variant: chip.variant, disabled: disabled }))] }));
+};
+DrawerItem.displayName = 'DrawerItem';
+
+exports.Accordion = Accordion;
 exports.Button = Button;
 exports.Card = Card;
 exports.Chip = Chip;
+exports.DrawerItem = DrawerItem;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Stack = Stack;