@aurora-ds/components 0.20.0 → 0.21.1

package/dist/esm/interfaces/index.d.ts

@@ -1,7 +1,7 @@
 export * from '@interfaces/alert.types';
 export * from '@interfaces/button.types';
 export * from '@interfaces/text.types';
-export * from '@interfaces/chip.types';
+export * from '@interfaces/status.types';
 export * from '@interfaces/avatar.types';
 export * from '@interfaces/select.types';
 export type { ThemeContract, ThemeColorContract, ThemeSpacingContract, ThemeRadiusContract, ThemeFontSizeContract, ThemeFontWeightContract, ThemeLineHeightContract, ThemeOpacityContract, ThemeShadowsContract, ThemeTransitionContract, ThemeBreakpointsContract, ThemeZIndexContract, } from '@interfaces/theme.contracts';

package/dist/esm/interfaces/status.types.d.ts

@@ -0,0 +1,6 @@
+/** Status variant options */
+export type StatusVariant = 'filled' | 'outlined';
+/** Status color options */
+export type StatusColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'highlight' | 'accent' | 'new' | 'rose' | 'yellow';
+/** Status size options */
+export type StatusSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg';

package/dist/esm/interfaces/theme.contracts.d.ts

@@ -61,6 +61,14 @@ export interface ThemeColorContract {
     highlightSubtle: string;
     accent: string;
     accentSubtle: string;
+    default: string;
+    defaultSubtle: string;
+    new: string;
+    newSubtle: string;
+    rose: string;
+    roseSubtle: string;
+    yellow: string;
+    yellowSubtle: string;
     link: string;
     linkHover: string;
     linkActive: string;

package/dist/esm/utils/ui/components/data-display/status/getStatusColorStyles.utils.d.ts

@@ -0,0 +1,7 @@
+import { ThemeContract } from '@/interfaces';
+import { StatusStyleParams } from '@components/data-display/status/Status.props.ts';
+export declare const getStatusColorStyles: (theme: ThemeContract, color: StatusStyleParams["color"], variant: StatusStyleParams["variant"], disabled: StatusStyleParams["disabled"]) => {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+};

package/dist/esm/utils/ui/components/data-display/status/getStatusContentSize.utils.d.ts

@@ -0,0 +1,8 @@
+import { StatusStyleParams } from '@components/data-display/status/Status.props.ts';
+import { ThemeFontSizeContract } from '@interfaces/theme.contracts';
+/**
+ * Get status content size based on the status size
+ * @param size
+ * @constructor
+ */
+export declare const getStatusContentSize: (size: StatusStyleParams["size"]) => keyof ThemeFontSizeContract;

package/dist/esm/utils/ui/components/data-display/status/getStatusSizeStyles.utils.d.ts

@@ -0,0 +1,12 @@
+import { ThemeContract } from '@/interfaces';
+import { StatusStyleParams } from '@components/data-display/status/Status.props.ts';
+/**
+ * Get status size styles based on the theme, size and icon-only state
+ * @param theme - Theme object
+ * @param size - Status size
+ * @param isIconOnly - Whether the status has only an icon (no label)
+ */
+export declare const getStatusSizeStyles: (theme: ThemeContract, size: StatusStyleParams["size"], isIconOnly: StatusStyleParams["isIconOnly"]) => {
+    padding: string;
+    fontSize: string;
+};

package/dist/index.d.ts

@@ -54,12 +54,12 @@ type TextVariantStyle = {
     lineHeight: number;
 };
 
-/** Chip variant options */
-type ChipVariant = 'filled' | 'outlined';
-/** Chip color options */
-type ChipColor = 'default' | 'success' | 'warning' | 'error' | 'info';
-/** Chip size options */
-type ChipSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg';
+/** Status variant options */
+type StatusVariant = 'filled' | 'outlined';
+/** Status color options */
+type StatusColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'highlight' | 'accent' | 'new' | 'rose' | 'yellow';
+/** Status size options */
+type StatusSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg';
 
 /** Avatar size variants */
 type AvatarSize = 'small' | 'medium' | 'large';
@@ -133,6 +133,14 @@ interface ThemeColorContract {
     highlightSubtle: string;
     accent: string;
     accentSubtle: string;
+    default: string;
+    defaultSubtle: string;
+    new: string;
+    newSubtle: string;
+    rose: string;
+    roseSubtle: string;
+    yellow: string;
+    yellowSubtle: string;
     link: string;
     linkHover: string;
     linkActive: string;
@@ -408,17 +416,17 @@ type TextProps = PropsWithChildren<{
  */
 declare const Text: FC<TextProps>;
 
-type ChipProps = {
+type StatusProps = {
     /** Text label to display */
     label?: string;
     /** Icon to display before the label */
     icon?: ReactNode;
-    /** Chip variant style */
-    variant?: ChipVariant;
-    /** Chip color from theme */
-    color?: ChipColor;
-    /** Chip size */
-    size?: ChipSize;
+    /** 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 */
@@ -427,9 +435,9 @@ type ChipProps = {
     disabled?: boolean;
     /** Accessibility label for screen readers */
     ariaLabel?: string;
-    /** ID of element that labels this chip */
+    /** ID of element that labels this status */
     ariaLabelledBy?: string;
-    /** ID of element that describes this chip */
+    /** ID of element that describes this status */
     ariaDescribedBy?: string;
     /** ARIA role */
     role?: string;
@@ -438,18 +446,18 @@ type ChipProps = {
 };
 
 /**
- * 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`
  */
-declare const Chip: FC<ChipProps>;
+declare const Status: FC<StatusProps>;
 
 type AvatarProps = {
     /** Image source URL */
@@ -1120,7 +1128,7 @@ 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 */
@@ -1463,5 +1471,5 @@ declare module '@aurora-ds/theme' {
  */
 declare const defaultTheme: Theme;
 
-export { Accordion, Alert, AlertProvider, Avatar, AvatarGroup, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Chip, _default as DatePicker, DrawerItem, _default$3 as Form, Grid, Icon, IconButton, _default$2 as Input, Menu, MenuGroup, MenuItem, Modal, Page, PageSection, Pagination, Select, Separator, Skeleton, Stack, TabItem, Tabs, Text, _default$1 as TextArea, defaultTheme, useAlert, useAnchorPosition, useClickOutside, useTransitionRender };
-export type { AccordionProps, AlertContextValue, AlertPosition, AlertProps, AlertProviderProps, AlertVariant, AnchorOrigin, AnchorPosition, AvatarGroupProps, AvatarProps, BreadcrumbEllipsisProps, BreadcrumbLinkProps, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparatorProps, ButtonProps, ButtonVariantStyle, ButtonVariants, CardProps, ChipColor, ChipProps, ChipSize, ChipVariant, DateFormat, DatePickerProps, DrawerItemProps, FormProps, GridProps, IconButtonProps, IconProps, InputProps, MenuGroupProps, MenuItemProps, MenuProps, ModalProps, PageProps, PageSectionProps, PaginationProps, SelectOption, SelectProps, SeparatorProps, ShowAlertOptions, SkeletonProps, StackProps, TabItemProps, TabsProps, TextAreaProps, TextProps, TextVariantStyle, TextVariants, Theme, ThemeBreakpointsContract, ThemeColorContract, ThemeContract, ThemeFontSizeContract, ThemeFontWeightContract, ThemeLineHeightContract, ThemeOpacityContract, ThemeRadiusContract, ThemeShadowsContract, ThemeSpacingContract, ThemeTransitionContract, ThemeZIndexContract, UseTransitionRenderReturnType };
+export { Accordion, Alert, AlertProvider, Avatar, AvatarGroup, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, Card, _default as DatePicker, DrawerItem, _default$3 as Form, Grid, Icon, IconButton, _default$2 as Input, Menu, MenuGroup, MenuItem, Modal, Page, PageSection, Pagination, Select, Separator, Skeleton, Stack, Status, TabItem, Tabs, Text, _default$1 as TextArea, defaultTheme, useAlert, useAnchorPosition, useClickOutside, useTransitionRender };
+export type { AccordionProps, AlertContextValue, AlertPosition, AlertProps, AlertProviderProps, AlertVariant, AnchorOrigin, AnchorPosition, AvatarGroupProps, AvatarProps, BreadcrumbEllipsisProps, BreadcrumbLinkProps, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparatorProps, ButtonProps, ButtonVariantStyle, ButtonVariants, CardProps, DateFormat, DatePickerProps, DrawerItemProps, FormProps, GridProps, IconButtonProps, IconProps, InputProps, MenuGroupProps, MenuItemProps, MenuProps, ModalProps, PageProps, PageSectionProps, PaginationProps, SelectOption, SelectProps, SeparatorProps, ShowAlertOptions, SkeletonProps, StackProps, StatusColor, StatusProps, StatusSize, StatusVariant, TabItemProps, TabsProps, TextAreaProps, TextProps, TextVariantStyle, TextVariants, Theme, ThemeBreakpointsContract, ThemeColorContract, ThemeContract, ThemeFontSizeContract, ThemeFontWeightContract, ThemeLineHeightContract, ThemeOpacityContract, ThemeRadiusContract, ThemeShadowsContract, ThemeSpacingContract, ThemeTransitionContract, ThemeZIndexContract, UseTransitionRenderReturnType };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurora-ds/components",
-  "version": "0.20.0",
+  "version": "0.21.1",
   "type": "module",
   "description": "Aurora DS - React Components Library",
   "main": "dist/cjs/index.js",