@aurora-ds/components 0.6.6 → 0.6.8

package/dist/cjs/components/inputs/button/Button.props.d.ts

@@ -24,4 +24,5 @@ export type ButtonProps = {
 export type ButtonStyleParams = {
     variant?: ButtonVariants;
     active?: boolean;
+    textColor?: keyof Theme['colors'];
 };

package/dist/cjs/components/inputs/icon-button/IconButton.props.d.ts

@@ -1,6 +1,6 @@
 import { Theme } from '@aurora-ds/theme';
 import { ReactNode } from 'react';
-import { ButtonVariants } from '@/interfaces';
+import { ButtonVariants, IconButtonSizes } from '@/interfaces';
 export type IconButtonProps = {
     /** IconButton icon */
     icon?: ReactNode;
@@ -16,13 +16,12 @@ export type IconButtonProps = {
     disabled?: boolean;
     /** Custom text/icon color (overrides variant color) */
     textColor?: keyof Theme['colors'];
-    /** Custom text/icon color (overrides variant color) */
-    padding?: keyof Theme['spacing'];
-    /** Custom text/icon color (overrides variant color) */
-    iconSize?: keyof Theme['fontSize'];
+    /** Size of the icon button */
+    size?: IconButtonSizes;
 };
 export type IconButtonStyleParams = {
     variant?: ButtonVariants;
     active?: boolean;
-    padding?: keyof Theme['spacing'];
+    size?: IconButtonSizes;
+    textColor?: keyof Theme['colors'];
 };

package/dist/cjs/components/layout/text/Text.d.ts

@@ -14,6 +14,7 @@ import { TextProps } from '@components/layout/text/Text.props.ts';
  * - Theme-aware colors
  * - Text truncation with `maxLines`
  * - Underline support
+ * - Preserve whitespace with `preserveWhitespace` prop
  * - Bold text with **double asterisks** syntax
  */
 declare const Text: FC<TextProps>;

package/dist/cjs/components/layout/text/Text.props.d.ts

@@ -14,6 +14,8 @@ export type TextProps = PropsWithChildren<{
     maxLines?: number;
     /** Add underline text decoration */
     underline?: boolean;
+    /** Preserve whitespace and line breaks */
+    preserveWhitespace?: boolean;
 }>;
 export type TextStyleParams = {
     variant?: TextVariants;
@@ -22,4 +24,5 @@ export type TextStyleParams = {
     fontFamily?: string;
     maxLines?: number;
     underline?: boolean;
+    preserveWhitespace?: boolean;
 };

package/dist/cjs/index.js

@@ -296,14 +296,15 @@ const getTruncateTextStyles = (maxLines) => (maxLines === 1
 const TEXT_STYLES = theme.createStyles((theme) => {
     const variantStyles = getTextVariantStyles(theme);
     return {
-        root: ({ variant = 'span', color, fontSize, fontFamily, maxLines, underline }) => ({
+        root: ({ variant = 'span', color, fontSize, fontFamily, maxLines, underline, preserveWhitespace, }) => ({
             margin: 0,
             fontSize: fontSize ? theme.fontSize[fontSize] : variantStyles[variant].fontSize,
             fontWeight: variantStyles[variant].fontWeight,
             lineHeight: variantStyles[variant].lineHeight,
             color: color ? theme.colors[color] : 'inherit',
             cursor: 'inherit',
-            ...(fontFamily && { fontFamily }),
+            fontFamily,
+            ...(preserveWhitespace && { whiteSpace: 'pre-wrap' }),
             ...(underline && {
                 textDecoration: 'underline',
                 textUnderlineOffset: '3px',
@@ -356,14 +357,15 @@ const parseTextWithBold = (children) => {
  * - Theme-aware colors
  * - Text truncation with `maxLines`
  * - Underline support
+ * - Preserve whitespace with `preserveWhitespace` prop
  * - Bold text with **double asterisks** syntax
  */
-const Text = ({ children, variant = 'span', color, fontSize, fontFamily, maxLines, underline, }) => {
+const Text = ({ children, variant = 'span', color, fontSize, fontFamily, maxLines, underline, preserveWhitespace, }) => {
     const theme$1 = theme.useTheme();
     const variantStyles = react.useMemo(() => getTextVariantStyles(theme$1), [theme$1]);
     const tag = variantStyles[variant].tag;
     const parsedChildren = react.useMemo(() => parseTextWithBold(children), [children]);
-    return react.createElement(tag, { className: TEXT_STYLES.root({ variant, color, fontSize, fontFamily, maxLines, underline }) }, parsedChildren);
+    return react.createElement(tag, { className: TEXT_STYLES.root({ variant, color, fontSize, fontFamily, maxLines, underline, preserveWhitespace }) }, parsedChildren);
 };
 Text.displayName = 'Text';
 
@@ -477,25 +479,32 @@ const getButtonVariantStyles = (theme$1) => {
 const BUTTON_STYLES = theme.createStyles((theme) => {
     const variantStyles = getButtonVariantStyles(theme);
     return {
-        root: ({ variant = 'contained', active = false }) => ({
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            boxSizing: 'border-box',
-            gap: theme.spacing.sm,
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
-            borderRadius: theme.radius.md,
-            cursor: 'pointer',
-            transition: `background-color ${theme.transition.fast}, color ${theme.transition.fast}`,
-            minHeight: BUTTON_SIZE,
-            maxHeight: BUTTON_SIZE,
-            fontFamily: 'inherit',
-            ...variantStyles[variant].default,
-            ...(active && variantStyles[variant].pressed),
-            ':hover': variantStyles[variant].hover,
-            ':active': variantStyles[variant].pressed,
-            ':disabled': variantStyles[variant].disabled,
-        }),
+        root: ({ variant = 'contained', active = false, textColor }) => {
+            const overrides = textColor ? {
+                ...(variant !== 'contained' && { color: theme.colors[textColor] }),
+                ...(variant === 'outlined' && { border: `1px solid ${theme.colors[textColor]}` }),
+            } : {};
+            return {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                boxSizing: 'border-box',
+                gap: theme.spacing.sm,
+                padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+                borderRadius: theme.radius.md,
+                cursor: 'pointer',
+                transition: `background-color ${theme.transition.fast}, color ${theme.transition.fast}`,
+                minHeight: BUTTON_SIZE,
+                maxHeight: BUTTON_SIZE,
+                fontFamily: 'inherit',
+                ...variantStyles[variant].default,
+                ...(active && variantStyles[variant].pressed),
+                ':hover': variantStyles[variant].hover,
+                ':active': variantStyles[variant].pressed,
+                ':disabled': variantStyles[variant].disabled,
+                ...overrides,
+            };
+        },
     };
 });
 
@@ -511,42 +520,70 @@ const Button = ({ label, startIcon, endIcon, variant = 'contained', active = fal
     const theme$1 = theme.useTheme();
     const variantStyles = getButtonVariantStyles(theme$1);
     const textColor = disabled ? 'disabledText' : (customTextColor ?? variantStyles[variant].textColor);
-    return (jsxRuntime.jsxs("button", { onClick: onClick, disabled: disabled, type: type, className: BUTTON_STYLES.root({ variant, active }), children: [startIcon && (jsxRuntime.jsx(Icon, { color: textColor, children: startIcon })), jsxRuntime.jsx(Text, { variant: 'label', color: textColor, children: label }), endIcon && (jsxRuntime.jsx(Icon, { color: textColor, children: endIcon }))] }));
+    return (jsxRuntime.jsxs("button", { onClick: onClick, disabled: disabled, type: type, className: BUTTON_STYLES.root({ variant, active, textColor: customTextColor }), children: [startIcon && (jsxRuntime.jsx(Icon, { color: textColor, children: startIcon })), jsxRuntime.jsx(Text, { variant: 'label', color: textColor, children: label }), endIcon && (jsxRuntime.jsx(Icon, { color: textColor, children: endIcon }))] }));
 };
 Button.displayName = 'Button';
 
+const getIconButtonSizeStyles = () => ({
+    small: {
+        size: BUTTON_SIZE - 8,
+        padding: 'xs',
+        iconSize: 'md'
+    },
+    medium: {
+        size: BUTTON_SIZE,
+        padding: 'sm',
+        iconSize: 'lg'
+    },
+    large: {
+        size: BUTTON_SIZE + 8,
+        padding: 'sm',
+        iconSize: 'xl'
+    }
+});
+
 const ICON_BUTTON_STYLES = theme.createStyles((theme) => {
     const variantStyles = getButtonVariantStyles(theme);
+    const sizeStyles = getIconButtonSizeStyles();
     return {
-        root: ({ variant = 'contained', active = false, padding }) => ({
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            boxSizing: 'border-box',
-            gap: theme.spacing.sm,
-            padding: padding ? theme.spacing[padding] : `${theme.spacing.sm} ${theme.spacing.md}`,
-            borderRadius: theme.radius.md,
-            cursor: 'pointer',
-            transition: `background-color ${theme.transition.fast}, color ${theme.transition.fast}`,
-            minHeight: BUTTON_SIZE,
-            maxHeight: BUTTON_SIZE,
-            minWidth: BUTTON_SIZE,
-            maxWidth: BUTTON_SIZE,
-            fontFamily: 'inherit',
-            ...variantStyles[variant].default,
-            ...(active && variantStyles[variant].pressed),
-            ':hover': variantStyles[variant].hover,
-            ':active': variantStyles[variant].pressed,
-            ':disabled': variantStyles[variant].disabled,
-        }),
+        root: ({ variant = 'contained', active = false, size = 'medium', textColor }) => {
+            const sizeConfig = sizeStyles[size];
+            const overrides = textColor ? {
+                ...(variant !== 'contained' && { color: theme.colors[textColor] }),
+                ...(variant === 'outlined' && { border: `1px solid ${theme.colors[textColor]}` }),
+            } : {};
+            return {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                boxSizing: 'border-box',
+                gap: theme.spacing.sm,
+                padding: theme.spacing[sizeConfig.padding],
+                borderRadius: theme.radius.md,
+                cursor: 'pointer',
+                transition: `background-color ${theme.transition.fast}, color ${theme.transition.fast}`,
+                minHeight: sizeConfig.size,
+                maxHeight: sizeConfig.size,
+                minWidth: sizeConfig.size,
+                maxWidth: sizeConfig.size,
+                fontFamily: 'inherit',
+                ...variantStyles[variant].default,
+                ...(active && variantStyles[variant].pressed),
+                ':hover': variantStyles[variant].hover,
+                ':active': variantStyles[variant].pressed,
+                ':disabled': variantStyles[variant].disabled,
+                ...overrides,
+            };
+        },
     };
 });
 
-const IconButton = ({ icon, variant = 'contained', active = false, type = 'button', onClick, disabled, textColor: customTextColor, padding, iconSize }) => {
+const IconButton = ({ icon, variant = 'contained', active = false, type = 'button', onClick, disabled, textColor: customTextColor, size = 'medium' }) => {
     const theme$1 = theme.useTheme();
     const variantStyles = getButtonVariantStyles(theme$1);
     const textColor = disabled ? 'disabledText' : (customTextColor ?? variantStyles[variant].textColor);
-    return (jsxRuntime.jsx("button", { onClick: onClick, disabled: disabled, type: type, className: ICON_BUTTON_STYLES.root({ variant, active, padding }), children: jsxRuntime.jsx(Icon, { color: textColor, size: iconSize, children: icon }) }));
+    const iconSize = getIconButtonSizeStyles()[size].iconSize;
+    return (jsxRuntime.jsx("button", { onClick: onClick, disabled: disabled, type: type, className: ICON_BUTTON_STYLES.root({ variant, active, size, textColor: customTextColor }), children: jsxRuntime.jsx(Icon, { color: textColor, size: iconSize, children: icon }) }));
 };
 IconButton.displayName = 'IconButton';