@aurora-ds/components 0.25.0 → 0.25.1

package/dist/esm/index.js

@@ -490,7 +490,7 @@ const DEFAULT_TRANSITION_DURATION_MS = 150;
  * Get avatar sizes configuration based on the theme
  * @param theme
  */
-const getAvatarSizes$1 = (theme) => ({
+const getAvatarSizes = (theme) => ({
     small: { size: BUTTON_SIZE - 8, fontSize: 'xs', overlap: `-${theme.spacing.md}` },
     medium: { size: BUTTON_SIZE, fontSize: 'sm', overlap: `-${theme.spacing.md}` },
     large: { size: BUTTON_SIZE + 8, fontSize: 'sm', overlap: `-${theme.spacing.lg}` },
@@ -500,7 +500,7 @@ const getAvatarSizes$1 = (theme) => ({
  * Avatar styles using createStyles from @aurora-ds/theme
  */
 const AVATAR_STYLES = createStyles((theme) => {
-    const AVATAR_SIZES = getAvatarSizes$1(theme);
+    const AVATAR_SIZES = getAvatarSizes(theme);
     return {
         root: ({ hasImage = false, clickable = false, size = 'medium', color, borderColor, backgroundColor }) => {
             const sizeConfig = AVATAR_SIZES[size];
@@ -552,7 +552,7 @@ const Avatar = ({ image, label, onClick, size = 'medium', color, borderColor, ba
     // hooks
     const theme = useTheme();
     // variables
-    const AVATAR_SIZES = getAvatarSizes$1(theme);
+    const AVATAR_SIZES = getAvatarSizes(theme);
     const hasImage = !!image;
     const clickable = !!onClick;
     const handleKeyDown = (event) => {
@@ -565,16 +565,6 @@ const Avatar = ({ image, label, onClick, size = 'medium', color, borderColor, ba
 };
 Avatar.displayName = 'Avatar';
 
-/**
- * Get avatar sizes configuration based on the theme
- * @param theme
- */
-const getAvatarSizes = (theme) => ({
-    small: { size: BUTTON_SIZE - 8, fontSize: 'xs', overlap: `-${theme.spacing.md}` },
-    medium: { size: BUTTON_SIZE, fontSize: 'sm', overlap: `-${theme.spacing.md}` },
-    large: { size: BUTTON_SIZE + 8, fontSize: 'sm', overlap: `-${theme.spacing.lg}` },
-});
-
 /**
  * AvatarGroup styles using createStyles from @aurora-ds/theme
  */
@@ -621,7 +611,7 @@ const AvatarGroup = ({ children, limit, size = 'medium' }) => {
     // hooks
     const theme = useTheme();
     // variables
-    const AVATAR_SIZES = getAvatarSizes$1(theme);
+    const AVATAR_SIZES = getAvatarSizes(theme);
     const childArray = Children.toArray(children);
     const displayedChildren = limit ? childArray.slice(0, limit) : childArray;
     const moreCount = limit && childArray.length > limit ? childArray.length - limit : 0;
@@ -654,7 +644,7 @@ const Skeleton = ({ width, height, borderRadius }) => {
 };
 Skeleton.displayName = 'Skeleton';
 
-const getButtonSizeStyles$1 = () => ({
+const getButtonSizeStyles = () => ({
     small: {
         height: BUTTON_SIZE - 8,
         padding: {
@@ -685,7 +675,7 @@ const getButtonSizeStyles$1 = () => ({
  * Get button variant styles based on the theme
  * @param theme
  */
-const getButtonVariantStyles$1 = (theme) => {
+const getButtonVariantStyles = (theme) => {
     // Shared base styles
     const transparentBase = {
         backgroundColor: colors.transparent,
@@ -763,8 +753,8 @@ const getButtonVariantStyles$1 = (theme) => {
  * ```
  */
 const BUTTON_STYLES = createStyles((theme) => {
-    const variantStyles = getButtonVariantStyles$1(theme);
-    const sizeStyles = getButtonSizeStyles$1();
+    const variantStyles = getButtonVariantStyles(theme);
+    const sizeStyles = getButtonSizeStyles();
     return {
         root: ({ variant = 'contained', active = false, textColor, backgroundColor, hoverBackgroundColor, activeBackgroundColor, size = 'medium' }) => {
             const sizeConfig = sizeStyles[size];
@@ -806,100 +796,6 @@ const BUTTON_STYLES = createStyles((theme) => {
     };
 });
 
-const getButtonSizeStyles = () => ({
-    small: {
-        height: BUTTON_SIZE - 8,
-        padding: {
-            vertical: 'xs',
-            horizontal: 'sm'
-        },
-        fontSize: 'sm'
-    },
-    medium: {
-        height: BUTTON_SIZE,
-        padding: {
-            vertical: 'sm',
-            horizontal: 'md'
-        },
-        fontSize: 'sm'
-    },
-    large: {
-        height: BUTTON_SIZE + 8,
-        padding: {
-            vertical: 'sm',
-            horizontal: 'lg'
-        },
-        fontSize: 'md'
-    }
-});
-
-/**
- * Get button variant styles based on the theme
- * @param theme
- */
-const getButtonVariantStyles = (theme) => {
-    // Shared base styles
-    const transparentBase = {
-        backgroundColor: colors.transparent,
-        color: theme.colors.primary,
-    };
-    const surfaceStates = {
-        hover: { backgroundColor: theme.colors.surfaceHover },
-        pressed: { backgroundColor: theme.colors.surfaceActive },
-    };
-    const baseDisabled = {
-        color: theme.colors.disabledText,
-        cursor: 'not-allowed',
-        opacity: theme.opacity.high
-    };
-    return {
-        contained: {
-            default: {
-                backgroundColor: theme.colors.primary,
-                color: theme.colors.onPrimary,
-                border: 'none',
-            },
-            hover: { backgroundColor: theme.colors.primaryHover },
-            pressed: { backgroundColor: theme.colors.primaryActive },
-            disabled: { ...baseDisabled, backgroundColor: theme.colors.disabled },
-            textColor: 'onPrimary',
-        },
-        outlined: {
-            default: {
-                ...transparentBase,
-                border: `1px solid ${theme.colors.primary}`,
-            },
-            ...surfaceStates,
-            disabled: { ...baseDisabled, backgroundColor: 'transparent', borderColor: theme.colors.disabled },
-            textColor: 'primary',
-        },
-        text: {
-            default: { ...transparentBase, border: 'none' },
-            ...surfaceStates,
-            disabled: { ...baseDisabled, backgroundColor: 'transparent' },
-            textColor: 'primary',
-        },
-        destructive: {
-            default: {
-                backgroundColor: theme.colors.error,
-                color: theme.colors.onError,
-                border: 'none',
-            },
-            hover: { backgroundColor: theme.colors.errorHover },
-            pressed: { backgroundColor: theme.colors.error },
-            disabled: { ...baseDisabled, backgroundColor: theme.colors.disabled },
-            textColor: 'onError',
-        },
-        link: {
-            default: { ...transparentBase, border: 'none', textDecoration: 'underline', textDecorationColor: 'transparent', textUnderlineOffset: '3px' },
-            hover: { backgroundColor: 'transparent', textDecorationColor: 'currentColor' },
-            pressed: { backgroundColor: 'transparent', textDecorationColor: 'currentColor', color: theme.colors.linkActive },
-            disabled: { ...baseDisabled, backgroundColor: 'transparent', textDecoration: 'none' },
-            textColor: 'link',
-        },
-    };
-};
-
 /**
  * Button component
  *
@@ -925,7 +821,7 @@ const Button = ({ label, startIcon, endIcon, variant = 'contained', active = fal
 };
 Button.displayName = 'Button';
 
-const getIconButtonSizeStyles$1 = () => ({
+const getIconButtonSizeStyles = () => ({
     small: {
         size: BUTTON_SIZE - 8,
         padding: 'xs',
@@ -944,8 +840,8 @@ const getIconButtonSizeStyles$1 = () => ({
 });
 
 const ICON_BUTTON_STYLES = createStyles((theme) => {
-    const variantStyles = getButtonVariantStyles$1(theme);
-    const sizeStyles = getIconButtonSizeStyles$1();
+    const variantStyles = getButtonVariantStyles(theme);
+    const sizeStyles = getIconButtonSizeStyles();
     return {
         root: ({ variant = 'contained', active = false, size = 'medium', textColor, backgroundColor, hoverBackgroundColor, activeBackgroundColor }) => {
             const sizeConfig = sizeStyles[size];
@@ -989,24 +885,6 @@ const ICON_BUTTON_STYLES = createStyles((theme) => {
     };
 });
 
-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'
-    }
-});
-
 /**
  * IconButton component
  *
@@ -1030,8 +908,8 @@ const IconButton = ({ icon, variant = 'contained', active = false, type = 'butto
 IconButton.displayName = 'IconButton';
 
 const BUTTON_TOGGLE_STYLES = createStyles((theme) => {
-    const variantStyles = getButtonVariantStyles$1(theme);
-    const sizeStyles = getIconButtonSizeStyles$1();
+    const variantStyles = getButtonVariantStyles(theme);
+    const sizeStyles = getIconButtonSizeStyles();
     const textVariant = variantStyles.text;
     return {
         root: ({ active = false, size = 'medium', activeTextColor = 'primary', inactiveTextColor = 'textSecondary', textColor, backgroundColor, hoverBackgroundColor, activeBackgroundColor }) => {