@aurora-ds/components 0.1.0 → 0.2.1

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

@@ -0,0 +1,6 @@
+/** Chip variant options */
+export type ChipVariant = 'filled' | 'outlined';
+/** Chip color options */
+export type ChipColor = 'default' | 'success' | 'warning' | 'error' | 'info';
+/** Chip size options */
+export type ChipSize = 'xs' | 'sm' | 'md' | 'lg';

package/dist/esm/utils/ui/components/chip/getChipColorStyles.utils.d.ts

@@ -0,0 +1,43 @@
+import { Theme } from '@aurora-ds/theme';
+import { ChipStyleParams } from '@components/data-display/chip/Chip.props.ts';
+export declare const getChipColorStyles: (theme: Theme, color: ChipStyleParams["color"], variant: ChipStyleParams["variant"]) => {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+} | {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+} | {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+} | {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+} | {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+} | {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+} | {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+} | {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+} | {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+} | {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+};

package/dist/esm/utils/ui/components/chip/getChipContentSize.utils.d.ts

@@ -0,0 +1,8 @@
+import { BaseFontSize } from '@aurora-ds/theme';
+import { ChipStyleParams } from '@components/data-display/chip/Chip.props';
+/**
+ * Get chip content size based on the chip size
+ * @param size
+ * @constructor
+ */
+export declare const getChipContentSize: (size: ChipStyleParams["size"]) => keyof BaseFontSize;

package/dist/esm/utils/ui/components/chip/getChipSizeStyles.utils.d.ts

@@ -0,0 +1,12 @@
+import { Theme } from '@aurora-ds/theme';
+import { ChipStyleParams } from '@components/data-display/chip/Chip.props';
+/**
+ * Get chip 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)
+ */
+export declare const getChipSizeStyles: (theme: Theme, size: ChipStyleParams["size"], isIconOnly: ChipStyleParams["isIconOnly"]) => {
+    padding: string;
+    fontSize: string;
+};

package/dist/esm/utils/ui/components/text/getTextVariantStyles.utils.d.ts

@@ -1,5 +1,5 @@
 import { Theme } from '@aurora-ds/theme';
-import { TextVariants, TextVariantStyle } from '@/utils';
+import { TextVariants, TextVariantStyle } from '@interfaces/text.types';
 /**
  * Get text variant styles based on the theme
  * @param theme

package/dist/index.d.ts

@@ -47,6 +47,44 @@ type IconProps = PropsWithChildren<{
  */
 declare const Icon: FC<IconProps>;
 
+/** Chip variant options */
+type ChipVariant = 'filled' | 'outlined';
+/** Chip color options */
+type ChipColor = 'default' | 'success' | 'warning' | 'error' | 'info';
+/** Chip size options */
+type ChipSize = 'xs' | 'sm' | 'md' | 'lg';
+
+type ChipProps = {
+    /** 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;
+    /** Gap between icon and text (theme spacing key) */
+    gap?: keyof Theme['spacing'];
+    /** Border radius from theme */
+    radius?: keyof Theme['radius'];
+};
+
+/**
+ * Chip component
+ *
+ * A compact element for displaying information, tags, or actions.
+ *
+ * **Variants:**
+ * - `filled`: Solid background (default)
+ * - `outlined`: Border only
+ *
+ * **Colors:**
+ * - `default`, `primary`, `success`, `warning`, `error`, `info`
+ */
+declare const Chip: FC<ChipProps>;
+
 type TextVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label';
 type TextVariantStyle = {
     tag: TextVariants;
@@ -60,6 +98,8 @@ type TextProps = PropsWithChildren<{
     variant?: TextVariants;
     /** Text color from theme */
     color?: keyof Theme['colors'];
+    /** Font size from theme (overrides variant fontSize if provided) */
+    fontSize?: keyof Theme['fontSize'];
     /** Maximum number of lines before truncation with ellipsis */
     maxLines?: number;
     /** Add underline text decoration */
@@ -215,6 +255,10 @@ type CardProps = {
     align?: StackAlign;
     /** Justification of items on the main axis */
     justify?: StackJustify;
+    /** Background color of the card */
+    backgroundColor?: keyof Theme['colors'];
+    /** Border color of the card */
+    borderColor?: keyof Theme['colors'];
 };
 
 /**
@@ -229,5 +273,5 @@ type CardProps = {
  */
 declare const Card: FC<CardProps>;
 
-export { Button, Card, Icon, IconButton, Stack, Text };
-export type { ButtonProps, ButtonVariantStyle, ButtonVariants, CardDirection, CardProps, IconButtonProps, IconProps, StackAlign, StackDirection, StackJustify, StackProps, StackWrap, TextProps, TextVariantStyle, TextVariants };
+export { Button, Card, Chip, Icon, IconButton, Stack, Text };
+export type { ButtonProps, ButtonVariantStyle, ButtonVariants, CardDirection, CardProps, ChipColor, ChipProps, ChipSize, ChipVariant, IconButtonProps, IconProps, StackAlign, StackDirection, StackJustify, StackProps, StackWrap, TextProps, TextVariantStyle, TextVariants };

package/package.json

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