@udixio/ui-react 2.5.2 → 2.7.0

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

@@ -1,157 +1,168 @@
 import { IconButtonInterface } from '../interfaces/icon-button.interface';
-import { classNames, defaultClassNames } from '../utils';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
 
-export const iconButtonStyle = defaultClassNames<IconButtonInterface>(
-  'iconButton',
-  ({
-    variant,
-    disabled,
-    onToggle,
-    isActive,
-    size,
-    width,
-    shape,
-    allowShapeTransformation,
-  }) => {
-    return {
-      iconButton: classNames(
-        'rounded-full relative flex transition-all duration-300',
-        'group cursor-pointer',
-        {
-          'cursor-default': disabled,
+const iconButtonConfig: ClassNameComponent<IconButtonInterface> = ({
+  variant,
+  disabled,
+  onToggle,
+  isActive,
+  size,
+  width,
+  shape,
+  allowShapeTransformation,
+}) => {
+  return {
+    iconButton: classNames(
+      'rounded-full relative flex transition-all duration-300',
+      'group/icon-button cursor-pointer',
+      {
+        'cursor-default': disabled,
+      },
+      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',
+        },
+      variant === 'filled' && [
+        !disabled && {
+          'bg-surface-container': !isActive && Boolean(onToggle),
+          'bg-primary': isActive || !onToggle,
+        },
+        Boolean(disabled) && 'bg-on-surface/[0.12]',
+      ],
+      variant === 'tonal' && [
+        !disabled && {
+          'bg-secondary-container text-on-secondary-container':
+            !isActive && Boolean(onToggle),
+          'bg-secondary text-on-secondary': isActive || !onToggle,
+        },
+        Boolean(disabled) && 'bg-on-surface/[0.12]',
+      ],
+      variant === 'outlined' && [
+        !disabled && {
+          'border border-outline': !isActive,
+          'border border-transparent bg-inverse-surface': isActive,
+        },
+        Boolean(disabled) && {
+          'border border-on-surface/[0.12]': !isActive,
+          'border border-transparent bg-on-surface/[0.12]': isActive,
+        },
+      ],
+    ),
+    touchTarget: classNames(
+      'absolute -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2 h-12 w-full',
+    ),
+    stateLayer: classNames(
+      'absolute top-0 left-0 h-full w-full overflow-hidden',
+      (shape === 'rounded' ||
+        (shape === 'squared' &&
+          onToggle &&
+          !disabled &&
+          isActive &&
+          allowShapeTransformation)) && {
+        'rounded-[30px]': size === 'xSmall' || size == 'small',
+        'rounded-[40px]': size === 'medium',
+        'rounded-[70px]': size === 'large' || size == 'xLarge',
+      },
+      (shape === 'squared' ||
+        (shape === 'rounded' &&
+          onToggle &&
+          !disabled &&
+          isActive &&
+          allowShapeTransformation)) && {
+        'rounded-[12px]': size === 'xSmall' || size == 'small',
+        'rounded-[16px]': size === 'medium',
+        'rounded-[28px]': size === 'large' || size == 'xLarge',
+      },
+      allowShapeTransformation &&
+        !disabled && {
+          'group-active/icon-button:rounded-[12px]':
+            size === 'xSmall' || size == 'small',
+          'group-active/icon-button:rounded-[16px]': size === 'medium',
+          'group-active/icon-button:rounded-[28px]':
+            size === 'large' || size == 'xLarge',
+        },
+      !disabled && [
+        variant === 'standard' && {
+          'state-on-surface-variant': !isActive,
+          'state-primary': isActive,
         },
-        shape === 'rounded' && {
-          'rounded-[30px]': size === 'xSmall' || size == 'small',
-          'rounded-[40px]': size === 'medium',
-          'rounded-[70px]': size === 'large' || size == 'xLarge',
+        variant === 'filled' && {
+          'state-primary': !isActive && Boolean(onToggle),
+          'state-inverse-on-surface': isActive || !onToggle,
         },
-        (shape === 'squared' || (allowShapeTransformation && isActive)) && {
-          'rounded-[12px]': size === 'xSmall' || size == 'small',
-          'rounded-[16px]': size === 'medium',
-          'rounded-[28px]': size === 'large' || size == 'xLarge',
+        variant === 'tonal' && {
+          'state-on-surface-variant': !isActive && Boolean(onToggle),
+          'state-on-secondary-container': isActive || !onToggle,
         },
-        allowShapeTransformation &&
-          !disabled && {
-            'active:rounded-[12px]': size === 'xSmall' || size == 'small',
-            'active:rounded-[16px]': size === 'medium',
-            'active:rounded-[28px]': size === 'large' || size == 'xLarge',
-          },
-        variant === 'filled' && [
-          !disabled && {
-            'bg-surface-container': !isActive && Boolean(onToggle),
-            'bg-primary': isActive || !onToggle,
-          },
-          Boolean(disabled) && 'bg-on-surface/[0.12]',
-        ],
-        variant === 'tonal' && [
-          !disabled && {
-            'bg-surface-container': !isActive && Boolean(onToggle),
-            'bg-secondary-container': isActive || !onToggle,
-          },
-          Boolean(disabled) && 'bg-on-surface/[0.12]',
-        ],
-        variant === 'outlined' && [
-          !disabled && {
-            'border border-outline': !isActive,
-            'border border-transparent bg-inverse-surface': isActive,
-          },
-          Boolean(disabled) && {
-            'border border-on-surface/[0.12]': !isActive,
-            'border border-transparent bg-on-surface/[0.12]': isActive,
-          },
-        ],
-      ),
-      touchTarget: classNames(
-        'absolute -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2 h-12 w-full',
-      ),
-      stateLayer: classNames(
-        'absolute top-0 left-0 h-full w-full overflow-hidden',
-        (shape === 'rounded' ||
-          (shape === 'squared' &&
-            onToggle &&
-            !disabled &&
-            isActive &&
-            allowShapeTransformation)) && {
-          'rounded-[30px]': size === 'xSmall' || size == 'small',
-          'rounded-[40px]': size === 'medium',
-          'rounded-[70px]': size === 'large' || size == 'xLarge',
+        variant === 'outlined' && {
+          'state-on-surface-variant': !isActive,
+          'state-on-primary': isActive,
         },
-        (shape === 'squared' ||
-          (shape === 'rounded' &&
-            onToggle &&
-            !disabled &&
-            isActive &&
-            allowShapeTransformation)) && {
-          'rounded-[12px]': size === 'xSmall' || size == 'small',
-          'rounded-[16px]': size === 'medium',
-          'rounded-[28px]': size === 'large' || size == 'xLarge',
+      ],
+    ),
+    icon: classNames(
+      '  transition-all duration-300',
+      { 'size-5 p-1.5': size === 'xSmall' },
+      { 'size-6 p-2': size === 'small' },
+      { 'size-6 p-4': size === 'medium' },
+      { 'size-8 p-8': size === 'large' },
+      { 'size-10 p-12': size === 'xLarge' },
+      width == 'narrow' && [
+        { 'px-1': size === 'xSmall' },
+        { 'px-1': size === 'small' },
+        { 'px-3': size === 'medium' },
+        { 'px-4': size === 'large' },
+        { 'px-8': size === 'xLarge' },
+      ],
+      width == 'wide' && [
+        { 'px-2.5': size === 'xSmall' },
+        { 'px-3.5': size === 'small' },
+        { 'px-6': size === 'medium' },
+        { 'px-12': size === 'large' },
+        { 'px-[72px]': size === 'xLarge' },
+      ],
+      !disabled && [
+        variant === 'standard' && {
+          'text-on-surface-variant': !isActive,
+          'text-primary': isActive,
         },
-        allowShapeTransformation &&
-          !disabled && {
-            'group-active:rounded-[12px]': size === 'xSmall' || size == 'small',
-            'group-active:rounded-[16px]': size === 'medium',
-            'group-active:rounded-[28px]': size === 'large' || size == 'xLarge',
-          },
-        !disabled && [
-          variant === 'standard' && {
-            'state-on-surface-variant': !isActive,
-            'state-primary': isActive,
-          },
-          variant === 'filled' && {
-            'state-primary': !isActive && Boolean(onToggle),
-            'state-inverse-on-surface': isActive || !onToggle,
-          },
-          variant === 'tonal' && {
-            'state-on-surface-variant': !isActive && Boolean(onToggle),
-            'state-on-secondary-container': isActive || !onToggle,
-          },
-          variant === 'outlined' && {
-            'state-on-surface-variant': !isActive,
-            'state-on-primary': isActive,
-          },
-        ],
-      ),
-      icon: classNames(
-        '  transition-all duration-300',
-        { 'size-5 p-1.5': size === 'xSmall' },
-        { 'size-6 p-2': size === 'small' },
-        { 'size-6 p-4': size === 'medium' },
-        { 'size-8 p-8': size === 'large' },
-        { 'size-10 p-12': size === 'xLarge' },
-        width == 'narrow' && [
-          { 'px-1': size === 'xSmall' },
-          { 'px-1': size === 'small' },
-          { 'px-3': size === 'medium' },
-          { 'px-4': size === 'large' },
-          { 'px-8': size === 'xLarge' },
-        ],
-        width == 'wide' && [
-          { 'px-2.5': size === 'xSmall' },
-          { 'px-3.5': size === 'small' },
-          { 'px-6': size === 'medium' },
-          { 'px-12': size === 'large' },
-          { 'px-[72px]': size === 'xLarge' },
-        ],
-        !disabled && [
-          variant === 'standard' && {
-            'text-on-surface-variant': !isActive,
-            'text-primary': isActive,
-          },
-          variant === 'filled' && {
-            'text-primary': !isActive && Boolean(onToggle),
-            'text-on-primary': isActive || !onToggle,
-          },
-          variant === 'tonal' && {
-            'text-on-surface-variant': !isActive && Boolean(onToggle),
-            'text-on-secondary-container': isActive || !onToggle,
-          },
-          variant === 'outlined' && {
-            'text-on-surface-variant': !isActive,
-            'text-inverse-on-surface': isActive,
-          },
-        ],
-        Boolean(disabled) && 'text-on-surface/[0.38]',
-      ),
-    };
-  },
+        variant === 'filled' && {
+          'text-primary': !isActive && Boolean(onToggle),
+          'text-on-primary': isActive || !onToggle,
+        },
+        variant === 'outlined' && {
+          'text-on-surface-variant': !isActive,
+          'text-inverse-on-surface': isActive,
+        },
+      ],
+      Boolean(disabled) && 'text-on-surface/[0.38]',
+    ),
+  };
+};
+
+export const iconButtonStyle = defaultClassNames<IconButtonInterface>(
+  'iconButton',
+  iconButtonConfig,
+);
+
+export const useIconButtonStyle = createUseClassNames<IconButtonInterface>(
+  'iconButton',
+  iconButtonConfig,
 );

package/src/lib/styles/index.ts

@@ -4,6 +4,7 @@ export * from './carousel-item.style';
 export * from './carousel.style';
 export * from './divider.style';
 export * from './fab.style';
+export * from './fab-menu.style';
 export * from './icon-button.style';
 export * from './progress-indicator.style';
 export * from './side-sheet.style';
@@ -14,3 +15,4 @@ export * from './tab.style';
 export * from './tabs.style';
 export * from './text-field.style';
 export * from './tooltip.style';
+export { useButtonStyle } from './button.style';

package/src/lib/styles/navigation-rail-item.style.ts

@@ -1,47 +1,56 @@
-import { classNames, defaultClassNames } from '../utils';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
 import { NavigationRailItemInterface } from '../interfaces';
 
+const navigationRailItemConfig: ClassNameComponent<
+  NavigationRailItemInterface
+> = ({ isSelected, icon, label, variant }) => ({
+  navigationRailItem: classNames(
+    ' group/navigation-rail-item flex flex-col  pt-1 pb-1.5 cursor-pointer',
+    {
+      'text-on-surface-variant': !isSelected,
+      'text-on-secondary-container': isSelected,
+      'gap-2  h-[68px]': variant == 'vertical',
+      'gap-0  h-[66px]': variant == 'horizontal',
+    },
+  ),
+  container: classNames(
+    ' w-fit flex justify-center  relative rounded-full items-center mx-5',
+    {
+      'bg-secondary-container overflow-hidden': isSelected,
+      'gap-2 ': variant == 'horizontal',
+      'gap-0 ': variant == 'vertical',
+      'p-4': !label,
+    },
+    label && [
+      'px-4',
+      {
+        'py-1 ': variant == 'vertical',
+        'py-4 ': variant == 'horizontal',
+      },
+    ],
+  ),
+  stateLayer: classNames('rounded-full'),
+
+  icon: classNames('size-6 flex'),
+  label: classNames('w-fit mx-auto text-nowrap', {
+    'text-label-large ': variant == 'horizontal',
+    'text-label-medium': variant == 'vertical',
+  }),
+});
+
 export const navigationRailItemStyle =
   defaultClassNames<NavigationRailItemInterface>(
     'navigationRailItem',
-    ({ isSelected, icon, label, variant }) => ({
-      navigationRailItem: classNames(
-        ' group flex flex-col  pt-1 pb-1.5 cursor-pointer',
-        {
-          'text-on-surface-variant': !isSelected,
-          'text-on-secondary-container': isSelected,
-          'gap-2  h-[68px]': variant == 'vertical',
-          'gap-0  h-[66px]': variant == 'horizontal',
-        },
-      ),
-      container: classNames(
-        ' w-fit flex justify-center  relative rounded-full items-center mx-5',
-        {
-          'bg-secondary-container overflow-hidden': isSelected,
-          'gap-2 ': variant == 'horizontal',
-          'gap-0 ': variant == 'vertical',
-          'p-4': !label,
-        },
-        label && [
-          'px-4',
-          {
-            'py-1 ': variant == 'vertical',
-            'py-4 ': variant == 'horizontal',
-          },
-        ],
-      ),
-      stateLayer: classNames(
-        '  absolute w-full rounded-full h-full left-0 top-0  ',
-        {
-          'group-state-on-surface': !isSelected,
-          'group-state-on-secondary-container': isSelected,
-        },
-      ),
+    navigationRailItemConfig,
+  );
 
-      icon: classNames('size-6 flex'),
-      label: classNames('w-fit mx-auto text-nowrap', {
-        'text-label-large ': variant == 'horizontal',
-        'text-label-medium': variant == 'vertical',
-      }),
-    }),
+export const useNavigationRailItemStyle =
+  createUseClassNames<NavigationRailItemInterface>(
+    'navigationRailItem',
+    navigationRailItemConfig,
   );

package/src/lib/styles/navigation-rail.style.ts

@@ -1,20 +1,36 @@
-import { classNames, defaultClassNames } from '../utils';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
 import { NavigationRailInterface } from '../interfaces/navigation-rail.interface';
 
+const navigationRailConfig: ClassNameComponent<NavigationRailInterface> = ({
+  isExtended,
+  alignment,
+}) => ({
+  navigationRail: classNames('flex flex-col  left-0 h-full top-0 pt-11', {
+    'w-fit max-w-24': !isExtended,
+    'w-fit min-w-[220px] max-w-[360px]': isExtended,
+    'justify-between': alignment == 'middle',
+    'justify-start': alignment == 'top',
+  }),
+  header: classNames('flex flex-col gap-1 items-start'),
+  menuIcon: 'mx-5',
+  segments: classNames(' flex flex-col  overflow-auto min-w-full mt-10', {
+    'w-full': !isExtended,
+    'w-fit  items-start': isExtended,
+  }),
+});
+
 export const navigationRailStyle = defaultClassNames<NavigationRailInterface>(
   'navigationRail',
-  ({ isExtended, alignment }) => ({
-    navigationRail: classNames('flex flex-col  left-0 h-full top-0 pt-11', {
-      'w-fit max-w-24': !isExtended,
-      'w-fit min-w-[220px] max-w-[360px]': isExtended,
-      'justify-between': alignment == 'middle',
-      'justify-start': alignment == 'top',
-    }),
-    header: classNames('flex flex-col gap-1 items-start'),
-    menuIcon: 'mx-5',
-    segments: classNames(' flex flex-col  overflow-auto min-w-full mt-10', {
-      'w-full': !isExtended,
-      'w-fit  items-start': isExtended,
-    }),
-  })
+  navigationRailConfig,
 );
+
+export const useNavigationRailStyle =
+  createUseClassNames<NavigationRailInterface>(
+    'navigationRail',
+    navigationRailConfig,
+  );

package/src/lib/styles/progress-indicator.style.ts

@@ -1,43 +1,56 @@
 import { ProgressIndicatorInterface } from '../interfaces/progress-indicator.interface';
-import { classNames, defaultClassNames } from '../utils';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
+
+const progressIndicatorConfig: ClassNameComponent<
+  ProgressIndicatorInterface
+> = ({ variant, isVisible }) => ({
+  progressIndicator: classNames(
+    (variant === 'linear-determinate' || variant == 'linear-indeterminate') &&
+      'flex w-full h-1',
+  ),
+  track: classNames('h-full rounded-full bg-primary rounded-l-full', {
+    'max-h-0': !isVisible,
+    'max-h-full': isVisible,
+  }),
+  activeIndicator: classNames(
+    {
+      'max-h-0': !isVisible,
+      'max-h-full': isVisible,
+    },
+    (variant === 'linear-determinate' || variant == 'linear-indeterminate') &&
+      'h-full flex-1 rounded-full bg-primary-container',
+
+    (variant === 'circular-determinate' ||
+      variant == 'circular-indeterminate') && [
+      'stroke-primary fill-transparent ',
+      {
+        'stroke-[4px]': isVisible,
+        'stroke-[0px]': !isVisible,
+      },
+    ],
+  ),
+  stop: classNames(
+    'absolute top-1/2 -translate-y-1/2 right-0 bg-primary rounded-full size-1',
+    {
+      'max-h-0': !isVisible,
+      'max-h-full': isVisible,
+    },
+  ),
+});
 
 export const progressIndicatorStyle =
   defaultClassNames<ProgressIndicatorInterface>(
     'progressIndicator',
-    ({ variant, isVisible }) => ({
-      progressIndicator: classNames(
-        (variant === 'linear-determinate' ||
-          variant == 'linear-indeterminate') &&
-          'flex w-full h-1',
-      ),
-      track: classNames('h-full rounded-full bg-primary rounded-l-full', {
-        'max-h-0': !isVisible,
-        'max-h-full': isVisible,
-      }),
-      activeIndicator: classNames(
-        {
-          'max-h-0': !isVisible,
-          'max-h-full': isVisible,
-        },
-        (variant === 'linear-determinate' ||
-          variant == 'linear-indeterminate') &&
-          'h-full flex-1 rounded-full bg-primary-container',
+    progressIndicatorConfig,
+  );
 
-        (variant === 'circular-determinate' ||
-          variant == 'circular-indeterminate') && [
-          'stroke-primary fill-transparent ',
-          {
-            'stroke-[4px]': isVisible,
-            'stroke-[0px]': !isVisible,
-          },
-        ],
-      ),
-      stop: classNames(
-        'absolute top-1/2 -translate-y-1/2 right-0 bg-primary rounded-full size-1',
-        {
-          'max-h-0': !isVisible,
-          'max-h-full': isVisible,
-        },
-      ),
-    }),
+export const useProgressIndicatorStyle =
+  createUseClassNames<ProgressIndicatorInterface>(
+    'progressIndicator',
+    progressIndicatorConfig,
   );

package/src/lib/styles/side-sheet.style.ts

@@ -1,31 +1,45 @@
-import { classNames, defaultClassNames } from '../utils';
-import { SideSheetInterface } from '../interfaces/side-sheet.interface';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
 
-export const sideSheetStyle = defaultClassNames<SideSheetInterface>(
-  'slideSheet',
-  ({ variant, position }) => ({
-    slideSheet: classNames(
-      'bg-surface flex justify-between  max-w-xs z-10',
+import { SideSheetInterface } from '../interfaces';
+
+export const sideSheetConfig: ClassNameComponent<SideSheetInterface> = ({
+  variant,
+  position,
+}) => ({
+  sideSheet: classNames(
+    'bg-surface flex justify-between  max-w-xs z-10',
+    {
+      'flex-row-reverse': position == 'right',
+      'h-full': variant == 'standard',
+    },
+    variant == 'modal' && [
+      'rounded-2xl fixed top-0 m-[1rem] h-[calc(100dvh-2rem)]',
       {
-        'flex-row-reverse': position == 'right',
-        'h-full': variant == 'standard',
+        'right-0': position == 'right',
+        'left-0': position == 'left',
       },
-      variant == 'modal' && [
-        'rounded-2xl fixed top-0 m-[1rem] h-[calc(100dvh-2rem)]',
-        {
-          'right-0': position == 'right',
-          'left-0': position == 'left',
-        },
-      ],
-    ),
-    container: classNames('w-full overflow-hidden', {}),
-    content: classNames('w-fit '),
-    header: classNames('p-4 flex items-center gap-2'),
-    title: classNames('text-on-surface-variant text-title-large'),
-    closeButton: classNames('ml-auto'),
-    divider: classNames({ hidden: variant == 'modal' }),
-    overlay: classNames(
-      'bg-[black]/[0.32] fixed top-0 left-0 w-screen h-screen',
-    ),
-  }),
+    ],
+  ),
+  container: classNames('w-full overflow-hidden', {}),
+  content: classNames('w-fit '),
+  header: classNames('p-4 flex items-center gap-2'),
+  title: classNames('text-on-surface-variant text-title-large'),
+  closeButton: classNames('ml-auto'),
+  divider: classNames({ hidden: variant == 'modal' }),
+  overlay: classNames('bg-[black]/[0.32] fixed top-0 left-0 w-screen h-screen'),
+});
+
+export const sideSheetStyle = defaultClassNames<SideSheetInterface>(
+  'sideSheet',
+  sideSheetConfig,
+);
+
+export const useSideSheetStyle = createUseClassNames<SideSheetInterface>(
+  'sideSheet',
+  sideSheetConfig,
 );