@aurora-ds/components 0.1.0 → 0.2.0

package/dist/esm/index.js

@@ -1365,11 +1365,12 @@ const ICON_STYLES = pr((theme) => ({
         justifyContent: 'center',
         overflow: 'hidden',
         transition: 'color 150ms ease-in-out',
+        lineHeight: 0,
         height: theme.fontSize[size ?? 'md'],
         width: theme.fontSize[size ?? 'md'],
         minWidth: theme.fontSize[size ?? 'md'],
         minHeight: theme.fontSize[size ?? 'md'],
-        color: theme.colors[color ?? 'text'],
+        color: color ? theme.colors[color] : 'inherit',
         backgroundColor: backgroundColor ? theme.colors[backgroundColor] : undefined,
         padding: padding ? theme.spacing[padding] : 0,
         borderRadius: theme.radius[borderRadius ?? 'md'],
@@ -1412,6 +1413,136 @@ const Icon = ({ children, size, color, backgroundColor, padding, borderRadius, }
 };
 Icon.displayName = 'Icon';
 
+const getChipColorStyles = (theme, color, variant) => {
+    const colorMap = {
+        default: {
+            filled: {
+                backgroundColor: theme.colors.surfaceHover,
+                color: theme.colors.text,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: 'transparent',
+                color: theme.colors.text,
+                borderColor: theme.colors.border,
+            },
+        },
+        primary: {
+            filled: {
+                backgroundColor: theme.colors.primary,
+                color: theme.colors.onPrimary,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: 'transparent',
+                color: theme.colors.primary,
+                borderColor: theme.colors.primary,
+            },
+        },
+        success: {
+            filled: {
+                backgroundColor: theme.colors.successSubtle,
+                color: theme.colors.success,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: theme.colors.successSubtle,
+                color: theme.colors.success,
+                borderColor: theme.colors.success,
+            },
+        },
+        warning: {
+            filled: {
+                backgroundColor: theme.colors.warningSubtle,
+                color: theme.colors.warning,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: theme.colors.warningSubtle,
+                color: theme.colors.warning,
+                borderColor: theme.colors.warning,
+            },
+        },
+        error: {
+            filled: {
+                backgroundColor: theme.colors.errorSubtle,
+                color: theme.colors.error,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: theme.colors.errorSubtle,
+                color: theme.colors.error,
+                borderColor: theme.colors.error,
+            },
+        },
+        info: {
+            filled: {
+                backgroundColor: theme.colors.infoSubtle,
+                color: theme.colors.info,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: theme.colors.infoSubtle,
+                color: theme.colors.info,
+                borderColor: theme.colors.info,
+            },
+        },
+    };
+    return colorMap[color][variant];
+};
+
+/**
+ * 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)
+ */
+const getChipSizeStyles = (theme, size, isIconOnly) => {
+    const sizeMap = {
+        xs: {
+            iconOnly: { padding: theme.spacing.xs, fontSize: theme.fontSize.xs },
+            withLabel: { padding: `${theme.spacing.xs} ${theme.spacing.sm}`, fontSize: theme.fontSize.xs },
+        },
+        sm: {
+            iconOnly: { padding: theme.spacing.xs, fontSize: theme.fontSize.sm },
+            withLabel: { padding: `${theme.spacing.xs} ${theme.spacing.sm}`, fontSize: theme.fontSize.sm },
+        },
+        md: {
+            iconOnly: { padding: theme.spacing.sm, fontSize: theme.fontSize.md },
+            withLabel: { padding: `${theme.spacing.sm} ${theme.spacing.md}`, fontSize: theme.fontSize.sm },
+        },
+        lg: {
+            iconOnly: { padding: theme.spacing.md, fontSize: theme.fontSize.lg },
+            withLabel: { padding: `${theme.spacing.sm} ${theme.spacing.lg}`, fontSize: theme.fontSize.md },
+        },
+    };
+    return isIconOnly ? sizeMap[size].iconOnly : sizeMap[size].withLabel;
+};
+
+const CHIP_STYLES = pr((theme) => ({
+    root: ({ variant, color, size, isIconOnly, gap, radius }) => {
+        const colorStyles = getChipColorStyles(theme, color, variant);
+        const sizeStyles = getChipSizeStyles(theme, size, isIconOnly);
+        return {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: gap ? theme.spacing[gap] : theme.spacing.sm,
+            borderRadius: radius ? theme.radius[radius] : theme.radius.md,
+            border: variant === 'outlined' ? '1px solid' : 'none',
+            aspectRatio: isIconOnly ? 1 : undefined,
+            height: 'fit-content',
+            width: 'fit-content',
+            fontFamily: 'inherit',
+            fontWeight: theme.fontWeight.medium,
+            whiteSpace: 'nowrap',
+            boxSizing: 'border-box',
+            ...sizeStyles,
+            ...colorStyles,
+        };
+    },
+}));
+
 /**
  * Get text variant styles based on the theme
  * @param theme
@@ -1491,12 +1622,12 @@ const getTruncateTextStyles = (maxLines) => (maxLines === 1
 const TEXT_STYLES = pr((theme) => {
     const variantStyles = getTextVariantStyles(theme);
     return {
-        root: ({ variant = 'span', color, maxLines, underline }) => ({
+        root: ({ variant = 'span', color, fontSize, maxLines, underline }) => ({
             margin: 0,
-            fontSize: variantStyles[variant].fontSize,
+            fontSize: fontSize ? theme.fontSize[fontSize] : variantStyles[variant].fontSize,
             fontWeight: variantStyles[variant].fontWeight,
             lineHeight: variantStyles[variant].lineHeight,
-            color: theme.colors[color ?? 'text'],
+            color: color ? theme.colors[color] : 'inherit',
             cursor: 'inherit',
             ...(underline && {
                 textDecoration: 'underline',
@@ -1522,14 +1653,54 @@ const TEXT_STYLES = pr((theme) => {
  * - Text truncation with `maxLines`
  * - Underline support
  */
-const Text = ({ children, variant = 'span', color, maxLines, underline, }) => {
+const Text = ({ children, variant = 'span', color, fontSize, maxLines, underline, }) => {
     const theme = rr();
     const variantStyles = useMemo(() => getTextVariantStyles(theme), [theme]);
     const tag = variantStyles[variant].tag;
-    return createElement(tag, { className: TEXT_STYLES.root({ variant, color, maxLines, underline }) }, children);
+    return createElement(tag, { className: TEXT_STYLES.root({ variant, color, fontSize, maxLines, underline }) }, children);
 };
 Text.displayName = 'Text';
 
+/**
+ * Get chip content size based on the chip size
+ * @param size
+ * @constructor
+ */
+const getChipContentSize = (size) => {
+    const sizeMap = {
+        xs: 'xs',
+        sm: 'sm',
+        md: 'sm',
+        lg: 'md',
+    };
+    return sizeMap[size];
+};
+
+/**
+ * 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`
+ */
+const Chip = ({ label, icon, variant = 'filled', color = 'default', size = 'md', gap, radius, }) => {
+    const isIconOnly = Boolean(icon) && !label;
+    return (jsxRuntimeExports.jsxs("span", { className: CHIP_STYLES.root({
+            variant,
+            color,
+            size,
+            isIconOnly,
+            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;
 
@@ -1697,7 +1868,7 @@ const STACK_STYLES = pr((theme) => ({
  * - `row`: Horizontal layout (default)
  * - `column`: Vertical layout
  */
-const Stack = ({ children, direction = 'row', gap, width, height, align, justify, wrap, padding, }) => {
+const Stack = ({ children, direction = 'row', gap, width, height, align = 'center', justify, wrap, padding, }) => {
     return (jsxRuntimeExports.jsx("div", { className: STACK_STYLES.root({
             direction,
             gap,
@@ -1715,7 +1886,7 @@ Stack.displayName = 'Stack';
  * Card styles using createStyles from @aurora-ds/theme
  */
 const CARD_STYLES = pr((theme) => ({
-    root: ({ direction, padding, width, height, gap, radius, shadow, align, justify, }) => ({
+    root: ({ direction, padding, width, height, gap, radius, shadow, align, justify, backgroundColor, borderColor }) => ({
         display: 'flex',
         flexDirection: direction,
         padding: padding ? theme.spacing[padding] : undefined,
@@ -1724,7 +1895,8 @@ const CARD_STYLES = pr((theme) => ({
         gap: gap ? theme.spacing[gap] : undefined,
         borderRadius: theme.radius[radius],
         boxShadow: theme.shadows[shadow],
-        backgroundColor: theme.colors.background,
+        backgroundColor: theme.colors[backgroundColor],
+        border: borderColor ? `1px solid ${theme.colors[borderColor]}` : 'none',
         alignItems: align,
         justifyContent: justify,
         boxSizing: 'border-box',
@@ -1741,7 +1913,7 @@ const CARD_STYLES = pr((theme) => ({
  * - `column`: Vertical layout (default)
  * - `row`: Horizontal layout
  */
-const Card = ({ children, direction = 'column', padding = 'md', width, height, gap, radius = 'md', shadow = 'sm', align, justify, }) => {
+const Card = ({ children, direction = 'column', padding = 'md', width, height, gap, radius = 'md', shadow = 'sm', align, justify, backgroundColor = 'background', borderColor }) => {
     return (jsxRuntimeExports.jsx("div", { className: CARD_STYLES.root({
             direction,
             padding,
@@ -1752,9 +1924,11 @@ const Card = ({ children, direction = 'column', padding = 'md', width, height, g
             shadow,
             align,
             justify,
+            backgroundColor,
+            borderColor
         }), children: children }));
 };
 Card.displayName = 'Card';
 
-export { Button, Card, Icon, IconButton, Stack, Text };
+export { Button, Card, Chip, Icon, IconButton, Stack, Text };
 //# sourceMappingURL=index.js.map