@aurora-ds/components 0.20.0 → 0.21.0

package/README.md

@@ -212,7 +212,7 @@ The `defaultTheme` includes these token categories:
 **Layout:** Card, Stack, Grid, Page, PageSection, Separator  
 **Typography:** Text  
 **Forms:** Input, TextArea, Select, DatePicker, Form  
-**Data Display:** Chip, Avatar, AvatarGroup, Icon  
+**Data Display:** Status, Avatar, AvatarGroup, Icon  
 **Navigation:** Breadcrumb, Tabs, DrawerItem, Menu, Pagination  
 **Feedback:** Alert, Accordion
 

package/dist/cjs/components/data-display/status/Status.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { StatusProps } from '@components/data-display/status/Status.props';
+/**
+ * Status component
+ *
+ * A compact element for displaying status, tags, or information.
+ *
+ * **Variants:**
+ * - `filled`: Solid background (default)
+ * - `outlined`: Border only
+ *
+ * **Colors:**
+ * - `default`, `primary`, `success`, `warning`, `error`, `info`, `highlight`, `accent`, `new`, `rose`, `yellow`
+ */
+declare const Status: FC<StatusProps>;
+export default Status;

package/dist/cjs/components/data-display/status/Status.props.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { ThemeContract } from '@/interfaces';
+import { StatusColor, StatusSize, StatusVariant } from '@interfaces/status.types';
+export type StatusProps = {
+    /** Text label to display */
+    label?: string;
+    /** Icon to display before the label */
+    icon?: ReactNode;
+    /** Status variant style */
+    variant?: StatusVariant;
+    /** Status color from theme */
+    color?: StatusColor;
+    /** Status size */
+    size?: StatusSize;
+    /** Gap between icon and text (theme spacing key) */
+    gap?: keyof ThemeContract['spacing'];
+    /** Border radius from theme */
+    radius?: keyof ThemeContract['radius'];
+    /** Disabled state */
+    disabled?: boolean;
+    /** Accessibility label for screen readers */
+    ariaLabel?: string;
+    /** ID of element that labels this status */
+    ariaLabelledBy?: string;
+    /** ID of element that describes this status */
+    ariaDescribedBy?: string;
+    /** ARIA role */
+    role?: string;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
+};
+export type StatusStyleParams = {
+    variant: StatusVariant;
+    color: StatusColor;
+    size: StatusSize;
+    isIconOnly: boolean;
+    disabled: boolean;
+    gap?: keyof ThemeContract['spacing'];
+    radius?: keyof ThemeContract['radius'];
+};

package/dist/cjs/components/data-display/status/Status.styles.d.ts

@@ -0,0 +1,4 @@
+import { StatusStyleParams } from '@components/data-display/status/Status.props';
+export declare const STATUS_STYLES: {
+    root: (args_0: StatusStyleParams) => string;
+};

package/dist/cjs/components/data-display/status/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Status } from '@components/data-display/status/Status';
+export type { StatusProps } from '@components/data-display/status/Status.props';

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

@@ -1,6 +1,6 @@
 export * from '@components/foundation/icon';
 export * from '@components/foundation/text';
-export * from '@components/data-display/chip';
+export * from '@components/data-display/status';
 export * from '@components/data-display/avatar';
 export * from '@components/data-display/skeleton';
 export * from '@components/actions/button';
@@ -27,5 +27,5 @@ export * from '@components/navigation/pagination';
 export type { AlertVariant, AlertPosition } from '@interfaces/alert.types';
 export type { ButtonVariants, ButtonVariantStyle } from '@interfaces/button.types';
 export type { TextVariants, TextVariantStyle } from '@interfaces/text.types';
-export type { ChipVariant, ChipColor, ChipSize } from '@interfaces/chip.types';
+export type { StatusVariant, StatusColor, StatusSize } from '@interfaces/status.types';
 export type { SelectOption } from '@interfaces/select.types';

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ChipProps } from '@/components';
+import { StatusProps } from '@/components';
 export type DrawerItemProps = {
     /** DrawerItem text label */
     label: string;
@@ -14,7 +14,7 @@ export type DrawerItemProps = {
     /** Disabled state */
     disabled?: boolean;
     /** Optional chip to display */
-    chip?: Omit<ChipProps, 'size' | 'disabled'>;
+    chip?: Omit<StatusProps, 'size' | 'disabled'>;
     /** Accessibility label for screen readers */
     ariaLabel?: string;
     /** ID of element that labels this item */

package/dist/cjs/index.js

@@ -236,7 +236,7 @@ const Text = ({ children, variant = 'span', color, fontSize, fontFamily, maxLine
 };
 Text.displayName = 'Text';
 
-const getChipColorStyles = (theme, color, variant, disabled) => {
+const getStatusColorStyles = (theme, color, variant, disabled) => {
     if (disabled) {
         return {
             filled: {
@@ -254,7 +254,7 @@ const getChipColorStyles = (theme, color, variant, disabled) => {
     const colorMap = {
         default: {
             filled: {
-                backgroundColor: theme.colors.surfaceHover,
+                backgroundColor: theme.colors.border,
                 color: theme.colors.text,
                 borderColor: 'transparent',
             },
@@ -266,12 +266,12 @@ const getChipColorStyles = (theme, color, variant, disabled) => {
         },
         primary: {
             filled: {
-                backgroundColor: theme.colors.primary,
-                color: theme.colors.onPrimary,
+                backgroundColor: theme.colors.primarySubtle,
+                color: theme.colors.primary,
                 borderColor: 'transparent',
             },
             outlined: {
-                backgroundColor: 'transparent',
+                backgroundColor: theme.colors.primarySubtle,
                 color: theme.colors.primary,
                 borderColor: theme.colors.primary,
             },
@@ -324,17 +324,77 @@ const getChipColorStyles = (theme, color, variant, disabled) => {
                 borderColor: theme.colors.info,
             },
         },
+        highlight: {
+            filled: {
+                backgroundColor: theme.colors.highlightSubtle,
+                color: theme.colors.highlight,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: theme.colors.highlightSubtle,
+                color: theme.colors.highlight,
+                borderColor: theme.colors.highlight,
+            },
+        },
+        accent: {
+            filled: {
+                backgroundColor: theme.colors.accentSubtle,
+                color: theme.colors.accent,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: theme.colors.accentSubtle,
+                color: theme.colors.accent,
+                borderColor: theme.colors.accent,
+            },
+        },
+        new: {
+            filled: {
+                backgroundColor: theme.colors.newSubtle,
+                color: theme.colors.new,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: theme.colors.newSubtle,
+                color: theme.colors.new,
+                borderColor: theme.colors.new,
+            },
+        },
+        rose: {
+            filled: {
+                backgroundColor: theme.colors.roseSubtle,
+                color: theme.colors.rose,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: theme.colors.roseSubtle,
+                color: theme.colors.rose,
+                borderColor: theme.colors.rose,
+            },
+        },
+        yellow: {
+            filled: {
+                backgroundColor: theme.colors.yellowSubtle,
+                color: theme.colors.yellow,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: theme.colors.yellowSubtle,
+                color: theme.colors.yellow,
+                borderColor: theme.colors.yellow,
+            },
+        },
     };
     return colorMap[color][variant];
 };
 
 /**
- * Get chip size styles based on the theme, size and icon-only state
+ * Get status size styles based on the theme, size and icon-only state
  * @param theme - Theme object
- * @param size - Chip size
- * @param isIconOnly - Whether the chip has only an icon (no label)
+ * @param size - Status size
+ * @param isIconOnly - Whether the status has only an icon (no label)
  */
-const getChipSizeStyles = (theme, size, isIconOnly) => {
+const getStatusSizeStyles = (theme, size, isIconOnly) => {
     const sizeMap = {
         '2xs': {
             iconOnly: { padding: theme.spacing.xs, fontSize: theme.fontSize['2xs'] },
@@ -360,10 +420,10 @@ const getChipSizeStyles = (theme, size, isIconOnly) => {
     return isIconOnly ? sizeMap[size].iconOnly : sizeMap[size].withLabel;
 };
 
-const CHIP_STYLES = theme.createStyles((theme) => ({
+const STATUS_STYLES = theme.createStyles((theme) => ({
     root: ({ variant, color, size, isIconOnly, disabled, gap, radius }) => {
-        const colorStyles = getChipColorStyles(theme, color, variant, disabled);
-        const sizeStyles = getChipSizeStyles(theme, size, isIconOnly);
+        const colorStyles = getStatusColorStyles(theme, color, variant, disabled);
+        const sizeStyles = getStatusSizeStyles(theme, size, isIconOnly);
         return {
             display: 'flex',
             alignItems: 'center',
@@ -385,11 +445,11 @@ const CHIP_STYLES = theme.createStyles((theme) => ({
 }));
 
 /**
- * Get chip content size based on the chip size
+ * Get status content size based on the status size
  * @param size
  * @constructor
  */
-const getChipContentSize = (size) => {
+const getStatusContentSize = (size) => {
     const sizeMap = {
         '2xs': '2xs',
         xs: 'xs',
@@ -401,20 +461,20 @@ const getChipContentSize = (size) => {
 };
 
 /**
- * Chip component
+ * Status component
  *
- * A compact element for displaying information, tags, or actions.
+ * A compact element for displaying status, tags, or information.
  *
  * **Variants:**
  * - `filled`: Solid background (default)
  * - `outlined`: Border only
  *
  * **Colors:**
- * - `default`, `primary`, `success`, `warning`, `error`, `info`
+ * - `default`, `primary`, `success`, `warning`, `error`, `info`, `highlight`, `accent`, `new`, `rose`, `yellow`
  */
-const Chip = ({ label, icon, variant = 'filled', color = 'default', size = 'md', gap, radius, disabled = false, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+const Status = ({ label, icon, variant = 'filled', color = 'default', size = 'md', gap, radius, disabled = false, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     const isIconOnly = Boolean(icon) && !label;
-    return (jsxRuntime.jsxs("span", { className: CHIP_STYLES.root({
+    return (jsxRuntime.jsxs("span", { className: STATUS_STYLES.root({
             variant,
             color,
             size,
@@ -422,9 +482,9 @@ const Chip = ({ label, icon, variant = 'filled', color = 'default', size = 'md',
             disabled,
             gap,
             radius,
-        }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [icon && (jsxRuntime.jsx(Icon, { size: getChipContentSize(size), children: icon })), label && (jsxRuntime.jsx(Text, { variant: 'label', fontSize: getChipContentSize(size), children: label }))] }));
+        }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [icon && (jsxRuntime.jsx(Icon, { size: getStatusContentSize(size), children: icon })), label && (jsxRuntime.jsx(Text, { variant: 'label', fontSize: getStatusContentSize(size), children: label }))] }));
 };
-Chip.displayName = 'Chip';
+Status.displayName = 'Status';
 
 const BUTTON_SIZE = 36;
 const ALERT_MAX_WIDTH = 320;
@@ -2419,7 +2479,7 @@ const DRAWER_ITEM_STYLES = theme.createStyles((theme) => ({
  * Similar to a text button with selected state support.
  */
 const DrawerItem = ({ label, startIcon, endIcon, selected = false, onClick, disabled, chip, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
-    return (jsxRuntime.jsxs("button", { onClick: onClick, disabled: disabled, type: 'button', className: DRAWER_ITEM_STYLES.root({ selected }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [jsxRuntime.jsxs(Stack, { children: [startIcon && (jsxRuntime.jsx(Icon, { children: startIcon })), jsxRuntime.jsx(Text, { variant: 'label', maxLines: 1, children: label }), endIcon && (jsxRuntime.jsx(Icon, { children: endIcon }))] }), chip && !selected && (jsxRuntime.jsx(Chip, { ...chip, size: '2xs', color: chip.color ?? 'info', disabled: disabled }))] }));
+    return (jsxRuntime.jsxs("button", { onClick: onClick, disabled: disabled, type: 'button', className: DRAWER_ITEM_STYLES.root({ selected }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [jsxRuntime.jsxs(Stack, { children: [startIcon && (jsxRuntime.jsx(Icon, { children: startIcon })), jsxRuntime.jsx(Text, { variant: 'label', maxLines: 1, children: label }), endIcon && (jsxRuntime.jsx(Icon, { children: endIcon }))] }), chip && !selected && (jsxRuntime.jsx(Status, { ...chip, size: '2xs', color: chip.color ?? 'info', disabled: disabled }))] }));
 };
 DrawerItem.displayName = 'DrawerItem';
 
@@ -3020,24 +3080,33 @@ const themeColors = {
     disabled: theme.colors.slate[300],
     // Semantic colors - Success (Emerald)
     success: theme.colors.emerald[600],
-    successSubtle: theme.colors.emerald[50],
+    successSubtle: theme.colors.emerald[100],
     // Semantic colors - Warning (Amber)
-    warning: theme.colors.amber[500],
-    warningSubtle: theme.colors.amber[50],
+    warning: theme.colors.amber[600],
+    warningSubtle: theme.colors.amber[100],
     // Semantic colors - Error (Red)
     error: theme.colors.red[600],
     errorHover: theme.colors.red[700],
-    errorSubtle: theme.colors.red[50],
+    errorSubtle: theme.colors.red[100],
     onError: theme.colors.white,
     // Semantic colors - Info (Blue)
     info: theme.colors.blue[600],
-    infoSubtle: theme.colors.blue[50],
+    infoSubtle: theme.colors.blue[100],
     // Semantic colors - Highlight (Orange)
     highlight: theme.colors.orange[500],
     highlightSubtle: theme.colors.orange[100],
     // Semantic colors - Accent (Purple)
     accent: theme.colors.purple[500],
     accentSubtle: theme.colors.purple[100],
+    // Status colors - New (Cyan)
+    new: theme.colors.cyan[600],
+    newSubtle: theme.colors.cyan[100],
+    // Status colors - Rose (Pink)
+    rose: theme.colors.rose[500],
+    roseSubtle: theme.colors.rose[100],
+    // Status colors - Yellow
+    yellow: theme.colors.yellow[600],
+    yellowSubtle: theme.colors.yellow[100],
     // Link colors (Indigo)
     link: theme.colors.indigo[600],
     linkHover: theme.colors.indigo[700],
@@ -3218,7 +3287,6 @@ exports.BreadcrumbPage = BreadcrumbPage;
 exports.BreadcrumbSeparator = BreadcrumbSeparator;
 exports.Button = Button;
 exports.Card = Card;
-exports.Chip = Chip;
 exports.DatePicker = DatePicker_default;
 exports.DrawerItem = DrawerItem;
 exports.Form = Form$1;
@@ -3237,6 +3305,7 @@ exports.Select = Select;
 exports.Separator = Separator;
 exports.Skeleton = Skeleton;
 exports.Stack = Stack;
+exports.Status = Status;
 exports.TabItem = TabItem;
 exports.Tabs = Tabs;
 exports.Text = Text;