@udixio/ui-react 2.5.2 → 2.7.0

package/src/lib/styles/button.style.ts

@@ -1,145 +1,136 @@
-import { classNames, defaultClassNames } from '../utils';
+import type { ClassNameComponent } from '../utils';
+import { classNames, createUseClassNames, defaultClassNames } from '../utils';
 import { ButtonInterface } from '../interfaces';
 
-export const buttonStyle = defaultClassNames<ButtonInterface>(
-  'button',
-  ({
-    variant,
-    disableTextMargins,
-    disabled,
-    iconPosition,
-    icon,
-    isActive,
-    loading,
-    shape,
-    onToggle,
-    size,
-    allowShapeTransformation,
-  }) => ({
-    button: classNames(
-      ' relative cursor-pointer group outline-none inline-block flex  justify-center   items-center  ',
-      size === 'xSmall' && 'text-label-large px-3 py-1.5 gap-1',
-      size === 'small' && 'text-label-large px-4 py-2.5 gap-2',
-      size === 'medium' && 'text-title-medium px-6 py-4 gap-2',
-      size === 'large' && 'text-headline-small px-12 py-8 gap-3',
-      size === 'xLarge' && 'text-headline-large px-16 py-12 gap-4',
-      shape === 'rounded' && {
-        'rounded-[30px]': size === 'xSmall' || size == 'small',
-        'rounded-[40px]': size === 'medium',
-        'rounded-[70px]': size === 'large' || size == 'xLarge',
-      },
-      (shape === 'squared' || (allowShapeTransformation && isActive)) && {
-        'rounded-[12px]': size === 'xSmall' || size == 'small',
-        'rounded-[16px]': size === 'medium',
-        'rounded-[28px]': size === 'large' || size == 'xLarge',
+const buttonConfig: ClassNameComponent<ButtonInterface> = ({
+  variant,
+  disableTextMargins,
+  disabled,
+  iconPosition,
+  icon,
+  isActive,
+  loading,
+  shape,
+  onToggle,
+  size,
+  allowShapeTransformation,
+}) => ({
+  button: classNames(
+    ' relative cursor-pointer group/button outline-none inline-block flex  justify-center   items-center  ',
+    size === 'xSmall' && 'text-label-large px-3 py-1.5 gap-1',
+    size === 'small' && 'text-label-large px-4 py-2.5 gap-2',
+    size === 'medium' && 'text-title-medium px-6 py-4 gap-2',
+    size === 'large' && 'text-headline-small px-12 py-8 gap-3',
+    size === 'xLarge' && 'text-headline-large px-16 py-12 gap-4',
+    shape === 'rounded' && {
+      'rounded-[30px]': size === 'xSmall' || size == 'small',
+      'rounded-[40px]': size === 'medium',
+      'rounded-[70px]': size === 'large' || size == 'xLarge',
+    },
+    (shape === 'squared' || (allowShapeTransformation && isActive)) && {
+      'rounded-[12px]': size === 'xSmall' || size == 'small',
+      'rounded-[16px]': size === 'medium',
+      'rounded-[28px]': size === 'large' || size == 'xLarge',
+    },
+    allowShapeTransformation &&
+      !disabled && {
+        'active:rounded-[12px]': size === 'xSmall' || size == 'small',
+        'active:rounded-[16px]': size === 'medium',
+        'active:rounded-[28px]': size === 'large' || size == 'xLarge',
       },
-      allowShapeTransformation &&
-        !disabled && {
-          'active:rounded-[12px]': size === 'xSmall' || size == 'small',
-          'active:rounded-[16px]': size === 'medium',
-          'active:rounded-[28px]': size === 'large' || size == 'xLarge',
-        },
-      variant === 'elevated' && {
-        'shadow-1 hover:shadow-2': !disabled,
-        'bg-surface-container-low text-primary': !disabled && !isActive,
-        'bg-primary text-on-primary': !disabled && isActive,
-        'text-on-surface/[38%]': disabled,
-      },
-      variant === 'filled' && {
-        'hover:shadow-1': !disabled,
-        'bg-surface-container text-on-surface-variant':
-          !disabled && !isActive && onToggle,
-        'bg-primary text-on-primary':
-          !disabled && ((isActive && onToggle) || !onToggle),
-        'text-on-surface/[38%]': disabled,
-      },
-      variant === 'tonal' && {
-        'hover:shadow-1': !disabled,
-        'bg-secondary-container text-on-secondary-container':
+    variant === 'elevated' && {
+      'shadow-1 hover:shadow-2': !disabled,
+      'bg-surface-container-low text-primary': !disabled && !isActive,
+      'bg-primary text-on-primary': !disabled && isActive,
+      'text-on-surface/[38%]': disabled,
+    },
+    variant === 'filled' && {
+      'hover:shadow-1': !disabled,
+      'bg-surface-container text-on-surface-variant':
+        !disabled && !isActive && onToggle,
+      'bg-primary text-on-primary':
+        !disabled && ((isActive && onToggle) || !onToggle),
+      'text-on-surface/[38%]': disabled,
+    },
+    variant === 'tonal' && {
+      'hover:shadow-1': !disabled,
+      'bg-secondary-container text-on-secondary-container':
+        !disabled && !isActive,
+      'bg-secondary text-on-secondary': !disabled && isActive,
+      'text-on-surface/[0.38]': disabled,
+    },
+    variant === 'outlined' && [
+      ' border',
+      {
+        'border-on-surface/[0.12] text-on-surface/[0.38]': disabled,
+
+        'text-primary border-outline focus:border-primary':
           !disabled && !isActive,
-        'bg-secondary text-on-secondary': !disabled && isActive,
+        'text-inverse-on-surface bg-inverse-surface border-inverse-surface':
+          !disabled && isActive,
+      },
+    ],
+    variant === 'text' && [
+      'w-fit',
+      {
+        'text-primary': !disabled,
         'text-on-surface/[0.38]': disabled,
       },
-      variant === 'outlined' && [
-        ' border',
-        {
-          'border-on-surface/[0.12] text-on-surface/[0.38]': disabled,
-
-          'text-primary border-outline focus:border-primary':
-            !disabled && !isActive,
-          'text-inverse-on-surface bg-inverse-surface border-inverse-surface':
-            !disabled && isActive,
-        },
-      ],
-      variant === 'text' && [
-        'w-fit',
-        {
-          'text-primary': !disabled,
-          'text-on-surface/[0.38]': disabled,
-        },
-        disableTextMargins && [
-          size === 'xSmall' && '-mx-3 ',
-          size === 'small' && '-mx-4 ',
-          size === 'medium' && '-mx-6 ',
-          size === 'large' && '-mx-12',
-          size === 'xLarge' && '-mx-16 ',
-          // size === 'small' && ' -my-2.5',
-          // size === 'medium' && ' -my-4',
-          // size === 'large' && '-my-8',
-          // size === 'xLarge' && ' -my-12',
-        ],
+      disableTextMargins && [
+        size === 'xSmall' && '-mx-3 ',
+        size === 'small' && '-mx-4 ',
+        size === 'medium' && '-mx-6 ',
+        size === 'large' && '-mx-12',
+        size === 'xLarge' && '-mx-16 ',
+        // size === 'small' && ' -my-2.5',
+        // size === 'medium' && ' -my-4',
+        // size === 'large' && '-my-8',
+        // size === 'xLarge' && ' -my-12',
       ],
-      disabled && 'cursor-default',
-    ),
-    touchTarget: classNames(
-      'absolute -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2 h-12 w-full',
-    ),
-    stateLayer: classNames(
-      'min-h-full min-w-full absolute top-0 left-0 overflow-hidden',
-      variant === 'elevated' && {
-        'bg-on-surface/[0.12]': disabled,
-        'group-state-primary': !disabled,
-      },
-      variant === 'filled' && {
-        'bg-on-surface/[0.12]': disabled,
-        'group-state-on-primary': !disabled && !onToggle,
-        'group-state-on-surface-variant': !disabled && onToggle,
-      },
-      shape === 'rounded' && {
-        'rounded-[30px]': size === 'xSmall' || size == 'small',
-        'rounded-[40px]': size === 'medium',
-        'rounded-[70px]': size === 'large' || size == 'xLarge',
+    ],
+    disabled && 'cursor-default',
+  ),
+  touchTarget: classNames(
+    'absolute -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2 h-12 w-full',
+  ),
+  stateLayer: classNames(
+    'overflow-hidden',
+    shape === 'rounded' && {
+      'rounded-[30px]': size === 'xSmall' || size == 'small',
+      'rounded-[40px]': size === 'medium',
+      'rounded-[70px]': size === 'large' || size == 'xLarge',
+    },
+    (shape === 'squared' || (allowShapeTransformation && isActive)) && {
+      'rounded-[12px]': size === 'xSmall' || size == 'small',
+      'rounded-[16px]': size === 'medium',
+      'rounded-[28px]': size === 'large' || size == 'xLarge',
+    },
+    allowShapeTransformation &&
+      !disabled && {
+        'group-active/button:rounded-[12px]':
+          size === 'xSmall' || size == 'small',
+        'group-active/button:rounded-[16px]': size === 'medium',
+        'group-active/button:rounded-[28px]':
+          size === 'large' || size == 'xLarge',
       },
-      (shape === 'squared' || (allowShapeTransformation && isActive)) && {
-        'rounded-[12px]': size === 'xSmall' || size == 'small',
-        'rounded-[16px]': size === 'medium',
-        'rounded-[28px]': size === 'large' || size == 'xLarge',
-      },
-      allowShapeTransformation &&
-        !disabled && {
-          'group-active:rounded-[12px]': size === 'xSmall' || size == 'small',
-          'group-active:rounded-[16px]': size === 'medium',
-          'group-active:rounded-[28px]': size === 'large' || size == 'xLarge',
-        },
-      variant === 'tonal' && {
-        'bg-on-surface/[0.12]': disabled,
-        'group-state-on-secondary-container ': !disabled,
-      },
-      variant === 'outlined' && {
-        'group-state-primary  group-state-primary': !disabled,
-      },
-      variant === 'text' && {
-        'group-state-primary': !disabled,
-      },
-    ),
-    label: classNames({ invisible: loading }),
-    icon: classNames(
-      { invisible: loading },
-      size === 'xSmall' && 'size-5',
-      size === 'small' && 'size-5',
-      size === 'medium' && 'size-6',
-      size === 'large' && 'size-8',
-      size === 'xLarge' && 'size-10',
-    ),
-  }),
+  ),
+  label: classNames({ invisible: loading }),
+  icon: classNames(
+    { invisible: loading },
+    size === 'xSmall' && 'size-5',
+    size === 'small' && 'size-5',
+    size === 'medium' && 'size-6',
+    size === 'large' && 'size-8',
+    size === 'xLarge' && 'size-10',
+  ),
+});
+
+export const buttonStyle = defaultClassNames<ButtonInterface>(
+  'button',
+  buttonConfig,
+);
+
+export const useButtonStyle = createUseClassNames<ButtonInterface>(
+  'button',
+  buttonConfig,
 );

package/src/lib/styles/card.style.ts

@@ -1,21 +1,26 @@
 import { CardInterface } from '../interfaces';
-import { classNames, defaultClassNames } from '../utils';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
 
-export const cardStyle = defaultClassNames<CardInterface>(
+const cardConfig: ClassNameComponent<CardInterface> = ({
+  variant,
+  isInteractive,
+}) => ({
+  card: classNames(
+    'group/card rounded-xl overflow-hidden z-10',
+    variant === 'outlined' && 'bg-surface border border-outline-variant',
+    variant === 'elevated' && 'bg-surface-container-low shadow-1',
+    variant === 'filled' && 'bg-surface-container-highest',
+  ),
+});
+
+export const cardStyle = defaultClassNames<CardInterface>('card', cardConfig);
+
+export const useCardStyle = createUseClassNames<CardInterface>(
   'card',
-  ({ variant, isInteractive }) => ({
-    card: classNames(
-      'group/card rounded-xl overflow-hidden z-10',
-      variant === 'outlined' && 'bg-surface border border-outline-variant',
-      variant === 'elevated' && 'bg-surface-container-low shadow-1',
-      variant === 'filled' && 'bg-surface-container-highest',
-    ),
-    stateLayer: classNames([
-      'w-full top-0 left-0 h-full absolute -z-10',
-      {
-        ' group-hover/card:hover-state-on-surface group-focus-visible/card:focus-state-on-surface':
-          isInteractive,
-      },
-    ]),
-  }),
+  cardConfig,
 );

package/src/lib/styles/carousel-item.style.ts

@@ -1,14 +1,28 @@
 import { CarouselItemInterface } from '../interfaces';
-import { classNames, defaultClassNames } from '../utils';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
+
+export const carouselItemConfig: ClassNameComponent<CarouselItemInterface> = ({
+  width,
+}) => {
+  return {
+    carouselItem: classNames('rounded-[28px] overflow-hidden flex-none', {
+      hidden: width === undefined,
+      'flex-1': width == null,
+    }),
+  };
+};
 
 export const carouselItemStyle = defaultClassNames<CarouselItemInterface>(
   'carouselItem',
-  ({ width }) => {
-    return {
-      carouselItem: classNames('rounded-[28px] overflow-hidden flex-none', {
-        hidden: width === undefined,
-        'flex-1': width == null,
-      }),
-    };
-  },
+  carouselItemConfig,
+);
+
+export const useCarouselItemStyle = createUseClassNames<CarouselItemInterface>(
+  'carouselItem',
+  carouselItemConfig,
 );

package/src/lib/styles/carousel.style.ts

@@ -1,10 +1,22 @@
-import { classNames, defaultClassNames } from '../utils';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
 import { CarouselInterface } from '../interfaces';
 
+const carouselConfig: ClassNameComponent<CarouselInterface> = () => ({
+  carousel: classNames(['w-full h-[400px]']),
+  track: classNames('flex h-full w-full'),
+});
+
 export const carouselStyle = defaultClassNames<CarouselInterface>(
   'carousel',
-  () => ({
-    carousel: classNames(['w-full h-[400px]']),
-    track: classNames('flex h-full w-full'),
-  }),
+  carouselConfig,
+);
+
+export const useCarouselStyle = createUseClassNames<CarouselInterface>(
+  'carousel',
+  carouselConfig,
 );

package/src/lib/styles/divider.style.ts

@@ -1,17 +1,31 @@
-import { DividerInterface } from '../interfaces/divider.interface';
-import { classNames, defaultClassNames } from '../utils';
+import { DividerInterface } from '../interfaces';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
+
+const dividerConfig: ClassNameComponent<DividerInterface> = ({
+  orientation,
+}) => ({
+  divider: classNames(
+    'border-outline-variant ',
+    {
+      'h-fit w-full border-t': orientation === 'horizontal',
+    },
+    {
+      'h-auto self-stretch w-fit border-l': orientation === 'vertical',
+    },
+  ),
+});
 
 export const dividerStyle = defaultClassNames<DividerInterface>(
   'divider',
-  ({ orientation }) => ({
-    divider: classNames(
-      'border-outline-variant ',
-      {
-        'h-fit w-full border-t': orientation === 'horizontal',
-      },
-      {
-        'h-auto self-stretch w-fit border-l': orientation === 'vertical',
-      }
-    ),
-  })
+  dividerConfig,
+);
+
+export const useDividerStyle = createUseClassNames<DividerInterface>(
+  'divider',
+  dividerConfig,
 );

package/src/lib/styles/fab-menu.style.ts

@@ -0,0 +1,28 @@
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
+import { FabMenuInterface } from '../interfaces/fab-menu.interface';
+
+const fabMenuConfig: ClassNameComponent<FabMenuInterface> = ({
+  size,
+  variant,
+  open,
+}) => ({
+  fabMenu: classNames('relative inline-flex flex-col items-end'),
+  actions: classNames(
+    'flex flex-col gap-1 items-end absolute bottom-[calc(100%_+_8px)] right-0',
+  ),
+});
+
+export const fabMenuStyle = defaultClassNames<FabMenuInterface>(
+  'fabMenu',
+  fabMenuConfig,
+);
+
+export const useFabMenuStyle = createUseClassNames<FabMenuInterface>(
+  'fabMenu',
+  fabMenuConfig,
+);

package/src/lib/styles/fab.style.ts

@@ -1,47 +1,45 @@
-import { classNames, defaultClassNames } from '../utils';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
 import { FabInterface } from '../interfaces/fab.interface';
 
-export const fabStyle = defaultClassNames<FabInterface>(
-  'fab',
-  ({ size, variant, isExtended }) => ({
-    fab: classNames(
-      'flex shadow-3 hover:shadow-4 group overflow-hidden outline-none items-center cursor-pointer',
-      {
-        'rounded-[12px]': size == 'small' && !isExtended,
-        'rounded-[16px]': size == 'medium' || isExtended,
-        'rounded-[28px]': size == 'large' && !isExtended,
-      },
-      {
-        'p-2': size == 'small' && !isExtended,
-        'p-4': size == 'medium' || isExtended,
-        'p-[30px]': size == 'large' && !isExtended,
-      },
-      variant === 'surface' && 'bg-surface-container',
-      variant === 'primary' && 'bg-primary-container',
-      variant === 'secondary' && 'bg-secondary-container',
-      variant === 'tertiary' && 'bg-tertiary-container',
-      variant === 'surface' && 'text-primary',
-      variant === 'primary' && 'text-on-primary-container',
-      variant === 'secondary' && 'text-on-secondary-container',
-      variant === 'tertiary' && 'text-on-tertiary-container',
-    ),
-    stateLayer: classNames(
-      'absolute w-full h-full overflow-hidden left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2',
-      variant === 'surface' &&
-        'group-hover:hover-state-primary group-focus:focus-state-primary',
-      variant === 'primary' &&
-        'group-hover:hover-state-on-primary-container group-focus-visible:focus-state-on-primary-container',
-      variant === 'secondary' &&
-        'group-hover:hover-state-on-secondary-container group-focus-visible:focus-state-on-secondary-container',
-      variant === 'tertiary' &&
-        'group-hover:hover-state-on-tertiary-container group-focus-visible:focus-state-on-tertiary-container',
-    ),
+const fabConfig: ClassNameComponent<FabInterface> = ({
+  size,
+  variant,
+  extended,
+}) => ({
+  fab: classNames(
+    'flex shadow-3 hover:shadow-4 group/fab overflow-hidden outline-none items-center cursor-pointer',
+    {
+      'rounded-[12px]': size == 'small' && !extended,
+      'rounded-[16px]': size == 'medium' || extended,
+      'rounded-[28px]': size == 'large' && !extended,
+    },
+    {
+      'p-2': size == 'small' && !extended,
+      'p-4': size == 'medium' || extended,
+      'p-[30px]': size == 'large' && !extended,
+    },
+    variant === 'primary' && 'bg-primary text-on-primary',
+    variant === 'secondary' && 'bg-secondary text-on-secondary',
+    variant === 'tertiary' && 'bg-tertiary text-on-tertiary',
+    variant === 'primaryContainer' &&
+      'bg-primary-container text-on-primary-container',
+    variant === 'secondaryContainer' &&
+      'bg-secondary-container text-on-secondary-container',
+    variant === 'tertiaryContainer' &&
+      'bg-tertiary-container text-on-tertiary-container',
+  ),
+  icon: classNames({
+    'size-6': size == 'small' || size == 'medium' || extended,
+    'size-9': size == 'large' && !extended,
+  }),
+  label: classNames('text-title-medium text-nowrap'),
+});
 
-    icon: classNames({
-      'size-6': size == 'small' || size == 'medium' || isExtended,
-      'size-9': size == 'large' && !isExtended,
-    }),
+export const fabStyle = defaultClassNames<FabInterface>('fab', fabConfig);
 
-    label: classNames('text-title-medium text-nowrap'),
-  }),
-);
+export const useFabStyle = createUseClassNames<FabInterface>('fab', fabConfig);