@udixio/ui-react 2.5.2 → 2.7.0

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

@@ -1,27 +1,41 @@
-import { classNames, defaultClassNames } from '../utils';
-import { SliderInterface } from '../interfaces/slider.interface';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
+import { SliderInterface } from '../interfaces';
+
+export const sliderConfig: ClassNameComponent<SliderInterface> = ({
+  isChanging,
+}) => ({
+  slider: classNames([
+    'relative w-full h-11 flex items-center rounded gap-x-1.5 cursor-pointer min-w-32',
+  ]),
+  activeTrack: classNames([
+    'h-4 relative transition-all duration-100 bg-primary overflow-hidden rounded-l-full ',
+  ]),
+  inactiveTrack: classNames([
+    'h-4 relative transition-all duration-100 bg-primary-container rounded-r-full overflow-hidden',
+  ]),
+  handle: classNames([
+    'transform relative transition-all duration-100 bg-primary h-full rounded-full ',
+    { 'w-0.5': isChanging, 'w-1': !isChanging },
+  ]),
+  valueIndicator: classNames([
+    'absolute select-none bg-inverse-surface text-inverse-on-surface py-3 px-4 text-label-large rounded-full bottom-[calc(100%+4px)] transform left-1/2 -translate-x-1/2',
+  ]),
+  dot: classNames([
+    'h-1 w-1 absolute transform -translate-y-1/2 -translate-x-1/2 top-1/2 rounded-full',
+  ]),
+});
 
 export const sliderStyle = defaultClassNames<SliderInterface>(
   'slider',
-  ({ isChanging }) => ({
-    slider: classNames([
-      'relative w-full h-11 flex items-center rounded gap-x-1.5 cursor-pointer min-w-32',
-    ]),
-    activeTrack: classNames([
-      'h-4 relative transition-all duration-100 bg-primary overflow-hidden rounded-l-full ',
-    ]),
-    inactiveTrack: classNames([
-      'h-4 relative transition-all duration-100 bg-primary-container rounded-r-full overflow-hidden',
-    ]),
-    handle: classNames([
-      'transform relative transition-all duration-100 bg-primary h-full rounded-full ',
-      { 'w-0.5': isChanging, 'w-1': !isChanging },
-    ]),
-    valueIndicator: classNames([
-      'absolute select-none bg-inverse-surface text-inverse-on-surface py-3 px-4 text-label-large rounded-full bottom-[calc(100%+4px)] transform left-1/2 -translate-x-1/2',
-    ]),
-    dot: classNames([
-      'h-1 w-1 absolute transform -translate-y-1/2 -translate-x-1/2 top-1/2 rounded-full',
-    ]),
-  }),
+  sliderConfig,
+);
+
+export const useSliderStyle = createUseClassNames<SliderInterface>(
+  'slider',
+  sliderConfig,
 );

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

@@ -1,14 +1,26 @@
-import { classNames, defaultClassNames } from '../utils';
-import { SnackbarInterface } from '../interfaces/snackbar.interface';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
+import { SnackbarInterface } from '../interfaces';
+
+const snackbarConfig: ClassNameComponent<SnackbarInterface> = () => ({
+  snackbar: classNames(' rounded bg-inverse-surface '),
+  container: classNames(
+    'pl-4 pr-2 max-w-full py-1 flex items-center flex-wrap',
+  ),
+  supportingText: classNames('text-body-medium text-inverse-on-surface '),
+  icon: classNames(' ml-auto mr-0 text-inverse-on-surface block dark'),
+});
 
 export const snackbarStyle = defaultClassNames<SnackbarInterface>(
   'snackbar',
-  () => ({
-    snackbar: classNames(' rounded bg-inverse-surface '),
-    container: classNames(
-      'pl-4 pr-2 max-w-full py-1 flex items-center flex-wrap',
-    ),
-    supportingText: classNames('text-body-medium text-inverse-on-surface '),
-    icon: classNames(' ml-auto mr-0 text-inverse-on-surface block dark'),
-  }),
+  snackbarConfig,
+);
+
+export const useSnackbarStyle = createUseClassNames<SnackbarInterface>(
+  'snackbar',
+  snackbarConfig,
 );

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

@@ -1,51 +1,67 @@
-import { classNames, defaultClassNames } from '../utils';
-import { SwitchInterface } from '../interfaces/switch.interface';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
+import { SwitchInterface } from '../interfaces';
 
-export const switchStyle = defaultClassNames<SwitchInterface>(
-  'switch',
-  ({ isSelected, disabled, inactiveIcon }) => ({
-    switch: classNames(
-      'group w-[52px] h-[32px] outline-none rounded-full  border-2 flex items-center',
+const switchConfig: ClassNameComponent<SwitchInterface> = ({
+  isSelected,
+  disabled,
+  inactiveIcon,
+}) => ({
+  switch: classNames(
+    'group/switch w-[52px] h-[32px] outline-none rounded-full  border-2 flex items-center',
+
+    { 'bg-on-surface/[0.12] border-transparent': disabled },
+    !disabled && [
+      'cursor-pointer ',
+      { 'bg-primary  border-primary': isSelected },
+      { 'bg-surface-container border-outline': !isSelected },
+    ],
+
+    // { 'justify-start': !isSelected },
+    // { 'justify-end': isSelected },
+  ),
+  handleContainer: classNames(
+    'flex items-center justify-center absolute',
+    { 'left-[14px]': !isSelected },
+    { 'right-[14px]': isSelected },
+  ),
+  handle: classNames(
+    'transition-all duration-100  z-10 rounded-full  flex items-center justify-center',
+    { 'w-[16px] h-[16px]': !isSelected && !inactiveIcon },
+    { 'w-[24px] h-[24px]': !(!isSelected && !inactiveIcon) },
+    !disabled && [
+      'cursor-pointer group-active/switch:h-[28px] group-active/switch:w-[28px]',
+      { 'bg-on-primary group-hover/switch:bg-primary-container': isSelected },
+      { 'bg-outline group-hover/switch:bg-on-surface-variant': !isSelected },
+    ],
 
-      { 'bg-on-surface/[0.12] border-transparent': disabled },
-      !disabled && [
-        'cursor-pointer ',
-        { 'bg-primary  border-primary': isSelected },
-        { 'bg-surface-container border-outline': !isSelected },
-      ]
+    { 'bg-surface': disabled },
+  ),
+  handleStateLayer: classNames(
+    'w-[40px] h-[40px] -z-10 rounded-full absolute',
+    { 'group-state-primary': !disabled },
+  ),
+  icon: classNames(
+    'w-[16px] h-[16px]',
+    !disabled && [
+      { 'text-on-primary-container': isSelected },
+      { 'text-on-primary': !isSelected },
+    ],
 
-      // { 'justify-start': !isSelected },
-      // { 'justify-end': isSelected },
-    ),
-    handleContainer: classNames(
-      'flex items-center justify-center absolute',
-      { 'left-[14px]': !isSelected },
-      { 'right-[14px]': isSelected }
-    ),
-    handle: classNames(
-      'transition-all duration-100  z-10 rounded-full  flex items-center justify-center',
-      { 'w-[16px] h-[16px]': !isSelected && !inactiveIcon },
-      { 'w-[24px] h-[24px]': !(!isSelected && !inactiveIcon) },
-      !disabled && [
-        'cursor-pointer group-active:h-[28px] group-active:w-[28px]',
-        { 'bg-on-primary group-hover:bg-primary-container': isSelected },
-        { 'bg-outline group-hover:bg-on-surface-variant': !isSelected },
-      ],
+    { 'text-on-surface/[0.38]': disabled },
+  ),
+});
 
-      { 'bg-surface': disabled }
-    ),
-    handleStateLayer: classNames(
-      'w-[40px] h-[40px] -z-10 rounded-full absolute',
-      { 'group-state-primary': !disabled }
-    ),
-    icon: classNames(
-      'w-[16px] h-[16px]',
-      !disabled && [
-        { 'text-on-primary-container': isSelected },
-        { 'text-on-primary': !isSelected },
-      ],
+export const switchStyle = defaultClassNames<SwitchInterface>(
+  'switch',
+  switchConfig,
+);
 
-      { 'text-on-surface/[0.38]': disabled }
-    ),
-  })
+export const useSwitchStyle = createUseClassNames<SwitchInterface>(
+  'switch',
+  switchConfig,
 );

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

@@ -1,68 +1,78 @@
-import { classNames } from '../utils';
-import { TabInterface } from '../interfaces/tab.interface';
-import { defaultClassNames } from '../utils/styles/get-classname';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
+import { TabInterface } from '../interfaces';
 
-export const tabStyle = defaultClassNames<TabInterface>(
-  'tab',
-  ({ isSelected, icon, label, variant }) => ({
-    tab: classNames(
-      'flex-1 group outline-none flex px-4 justify-center items-center cursor-pointer',
-      { 'z-10': isSelected },
-      Boolean(icon && label) && variant === 'primary' && 'h-16',
-      !(Boolean(icon && label) && variant === 'primary') && 'h-12',
-    ),
-    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 === 'primary' && {
-        'group-hover:hover-state-on-surface group-focus-visible:focus-state-on-surface':
-          !isSelected,
-        'group-hover:hover-state-primary group-focus-visible:focus-state-primary':
-          isSelected,
-      },
-      variant === 'secondary' &&
-        'group-hover:hover-state-on-surface group-focus-visible:focus-state-on-surface',
-    ),
-    content: classNames(
-      'flex  gap-0.5 h-full justify-center',
-      {
-        relative: variant == 'primary',
-      },
-      {
-        '': Boolean(label && !icon),
-      },
+const tabConfig: ClassNameComponent<TabInterface> = ({
+  isSelected,
+  icon,
+  label,
+  variant,
+}) => ({
+  tab: classNames(
+    'flex-1 group/tab outline-none flex px-4 justify-center items-center cursor-pointer',
+    { 'z-10': isSelected },
+    Boolean(icon && label) && variant === 'primary' && 'h-16',
+    !(Boolean(icon && label) && variant === 'primary') && 'h-12',
+  ),
+  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 === 'primary' && {
+      'group-hover/tab:hover-state-on-surface group-focus-visible/tab:focus-state-on-surface':
+        !isSelected,
+      'group-hover/tab:hover-state-primary group-focus-visible/tab:focus-state-primary':
+        isSelected,
+    },
+    variant === 'secondary' &&
+      'group-hover/tab:hover-state-on-surface group-focus-visible/tab:focus-state-on-surface',
+  ),
+  content: classNames(
+    'flex  gap-0.5 h-full justify-center',
+    {
+      relative: variant == 'primary',
+    },
+    {
+      '': Boolean(label && !icon),
+    },
 
-      variant === 'primary' && 'flex-col items-center',
-      variant === 'secondary' && {
-        'flex-col items-center': Boolean(!(label && icon)),
-        'flex-row items-center gap-2': Boolean(label && icon),
-      },
-    ),
-    icon: classNames(
-      'h-6 w-6 p-0.5 !box-border',
-      variant === 'primary' && {
-        'text-on-surface-variant': !isSelected,
-        'text-primary': isSelected,
-      },
-      variant === 'secondary' && {
-        'text-on-surface-variant': !isSelected,
-        'text-on-surface': isSelected,
-      },
-    ),
-    label: classNames(
-      'text-title-small  text-nowrap',
-      variant === 'primary' && {
-        'text-on-surface-variant': !isSelected,
-        'text-primary': isSelected,
-      },
-      variant === 'secondary' && {
-        'text-on-surface-variant': !isSelected,
-        'text-on-surface': isSelected,
-      },
-    ),
-    underline: classNames(
-      'bg-primary  absolute w-full left-0 bottom-0',
-      variant === 'primary' && 'h-[3px] rounded-t',
-      variant === 'secondary' && 'h-0.5',
-    ),
-  }),
-);
+    variant === 'primary' && 'flex-col items-center',
+    variant === 'secondary' && {
+      'flex-col items-center': Boolean(!(label && icon)),
+      'flex-row items-center gap-2': Boolean(label && icon),
+    },
+  ),
+  icon: classNames(
+    'h-6 w-6 p-0.5 !box-border',
+    variant === 'primary' && {
+      'text-on-surface-variant': !isSelected,
+      'text-primary': isSelected,
+    },
+    variant === 'secondary' && {
+      'text-on-surface-variant': !isSelected,
+      'text-on-surface': isSelected,
+    },
+  ),
+  label: classNames(
+    'text-title-small  text-nowrap',
+    variant === 'primary' && {
+      'text-on-surface-variant': !isSelected,
+      'text-primary': isSelected,
+    },
+    variant === 'secondary' && {
+      'text-on-surface-variant': !isSelected,
+      'text-on-surface': isSelected,
+    },
+  ),
+  underline: classNames(
+    'bg-primary  absolute w-full left-0 bottom-0',
+    variant === 'primary' && 'h-[3px] rounded-t',
+    variant === 'secondary' && 'h-0.5',
+  ),
+});
+
+export const tabStyle = defaultClassNames<TabInterface>('tab', tabConfig);
+
+export const useTabStyle = createUseClassNames<TabInterface>('tab', tabConfig);

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

@@ -1,13 +1,22 @@
-import { TabsInterface } from '../interfaces/tabs.interface';
-import { classNames, defaultClassNames } from '../utils';
+import { TabsInterface } from '../interfaces';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
 
-export const tabsStyle = defaultClassNames<TabsInterface>(
+const tabsConfig: ClassNameComponent<TabsInterface> = ({ scrollable }) => ({
+  tabs: classNames(
+    'border-b border-surface-container-highest bg-surface',
+    'flex relative ',
+    { 'overflow-x-auto': scrollable },
+  ),
+});
+
+export const tabsStyle = defaultClassNames<TabsInterface>('tabs', tabsConfig);
+
+export const useTabsStyle = createUseClassNames<TabsInterface>(
   'tabs',
-  ({ scrollable }) => ({
-    tabs: classNames(
-      'border-b border-surface-container-highest bg-surface',
-      'flex relative ',
-      { 'overflow-x-auto': scrollable },
-    ),
-  }),
+  tabsConfig,
 );

package/src/lib/styles/text-field.style.ts

@@ -1,104 +1,115 @@
 import React from 'react';
-import { classNames } from '../utils';
-import { TextFieldInterface } from '../interfaces/text-field.interface';
-import { defaultClassNames } from '../utils/styles/get-classname';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
+import { TextFieldInterface } from '../interfaces';
 
-export const textFieldStyle = defaultClassNames<TextFieldInterface>(
-  'textField',
-  ({
-    disabled,
-    leadingIcon,
-    trailingIcon,
-    variant,
-    errorText,
-    isFocused,
-    value,
-    suffix,
-    textLine,
-  }) => ({
-    textField: classNames({
-      'opacity-[.38]': disabled,
-    }),
-    content: classNames(
-      'group  transition-border duration-200 relative  flex  items-center ',
-      { 'h-14': textLine == 'singleLine' },
-      {
-        'border-on-surface-variant':
-          !errorText?.length && !isFocused && variant == 'filled',
-        'border-outline':
-          !errorText?.length && !isFocused && variant == 'outlined',
-        'border-primary': !errorText?.length && isFocused,
-        'border-error': !!errorText?.length,
-      },
-      { 'bg-on-surface/[0.04]': disabled },
-      variant == 'filled' && [
-        'rounded-t overflow-hidden border-b',
-        { 'bg-surface-container-highest': !disabled },
-      ],
+const textFieldConfig: ClassNameComponent<TextFieldInterface> = ({
+  disabled,
+  leadingIcon,
+  trailingIcon,
+  variant,
+  errorText,
+  isFocused,
+  value,
+  suffix,
+  textLine,
+}) => ({
+  textField: classNames({
+    'opacity-[.38]': disabled,
+  }),
+  content: classNames(
+    'group/text-field  transition-border duration-200 relative  flex  items-center ',
+    { 'h-14': textLine == 'singleLine' },
+    {
+      'border-on-surface-variant':
+        !errorText?.length && !isFocused && variant == 'filled',
+      'border-outline':
+        !errorText?.length && !isFocused && variant == 'outlined',
+      'border-primary': !errorText?.length && isFocused,
+      'border-error': !!errorText?.length,
+    },
+    { 'bg-on-surface/[0.04]': disabled },
+    variant == 'filled' && [
+      'rounded-t overflow-hidden border-b',
+      { 'bg-surface-container-highest': !disabled },
+    ],
 
-      variant == 'outlined' && [
-        'border rounded box-border',
-        {
-          'border-[3px]': isFocused,
-        },
-      ]
-    ),
-    stateLayer: classNames(
-      'absolute -z-10 w-full h-full top-0 left-0',
+    variant == 'outlined' && [
+      'border rounded box-border',
       {
-        hidden: variant == 'outlined',
+        'border-[3px]': isFocused,
       },
-      {
-        'group-state-on-surface': !disabled,
-        'focus-state-on-surface': isFocused,
-      }
-    ),
-    label: classNames(
-      'inline-flex outline-none  whitespace-nowrap',
-      { 'text-on-surface-variant': !disabled && !errorText?.length },
-      { 'text-on-surface': disabled },
-      { 'text-error': !!errorText?.length },
-      { 'text-primary': !errorText?.length && isFocused }
-    ),
-    input: classNames(
-      'w-full resize-none px-4 text-body-large bg-[inherit] outline-none autofill:transition-colors autofill:duration-[5000000ms]',
-      {
-        ' text-on-surface placeholder:text-on-surface-variant': !disabled,
-        'placeholder:text-on-surface text-on-surface': disabled,
-      },
-      {
-        'pr-0': !!suffix,
-      },
-      variant == 'filled' && ' pb-2 pt-6',
-      variant == 'outlined' && 'py-4 relative z-10'
-    ),
-    activeIndicator: classNames(
-      'absolute w-0 inset-x-0 border-rounded mx-auto bottom-0',
-      variant == 'filled' && [
-        'h-[2px] transition-all duration-300',
-        { 'bg-primary': !errorText?.length },
-        { 'bg-error': !!errorText?.length },
-        { '!w-full': isFocused },
-      ]
-    ),
-    supportingText: classNames(
-      ' text-body-small px-4 pt-1',
-      { 'text-on-surface-variant': !disabled && !errorText?.length },
-      { 'text-on-surface': disabled },
+    ],
+  ),
+  stateLayer: classNames(
+    'absolute -z-10 w-full h-full top-0 left-0',
+    {
+      hidden: variant == 'outlined',
+    },
+    {
+      'group-state-on-surface': !disabled,
+      'focus-state-on-surface': isFocused,
+    },
+  ),
+  label: classNames(
+    'inline-flex outline-none  whitespace-nowrap',
+    { 'text-on-surface-variant': !disabled && !errorText?.length },
+    { 'text-on-surface': disabled },
+    { 'text-error': !!errorText?.length },
+    { 'text-primary': !errorText?.length && isFocused },
+  ),
+  input: classNames(
+    'w-full resize-none px-4 text-body-large bg-[inherit] outline-none autofill:transition-colors autofill:duration-[5000000ms]',
+    {
+      ' text-on-surface placeholder:text-on-surface-variant': !disabled,
+      'placeholder:text-on-surface text-on-surface': disabled,
+    },
+    {
+      'pr-0': !!suffix,
+    },
+    variant == 'filled' && ' pb-2 pt-6',
+    variant == 'outlined' && 'py-4 relative z-10',
+  ),
+  activeIndicator: classNames(
+    'absolute w-0 inset-x-0 border-rounded mx-auto bottom-0',
+    variant == 'filled' && [
+      'h-[2px] transition-all duration-300',
+      { 'bg-primary': !errorText?.length },
+      { 'bg-error': !!errorText?.length },
       { '!w-full': isFocused },
-      { 'text-error': !!errorText?.length }
-    ),
-    leadingIcon: classNames([
-      'h-12 ml-3 flex items-center justify-center',
-      { 'cursor-text': !React.isValidElement(leadingIcon) },
-    ]),
-    trailingIcon: classNames('h-12 w-12 flex items-center justify-center', {
-      'cursor-text': !React.isValidElement(trailingIcon),
-    }),
-    suffix: classNames(
-      'text-on-surface-variant pl-0 pr-4',
-      variant == 'filled' && ' pb-2 pt-6',
-      variant == 'outlined' && 'py-4 relative z-10'
-    ),
-  })
+    ],
+  ),
+  supportingText: classNames(
+    ' text-body-small px-4 pt-1',
+    { 'text-on-surface-variant': !disabled && !errorText?.length },
+    { 'text-on-surface': disabled },
+    { '!w-full': isFocused },
+    { 'text-error': !!errorText?.length },
+  ),
+  leadingIcon: classNames([
+    'h-12 ml-3 flex items-center justify-center',
+    { 'cursor-text': !React.isValidElement(leadingIcon) },
+  ]),
+  trailingIcon: classNames('h-12 w-12 flex items-center justify-center', {
+    'cursor-text': !React.isValidElement(trailingIcon),
+  }),
+  suffix: classNames(
+    'text-on-surface-variant pl-0 pr-4',
+    variant == 'filled' && ' pb-2 pt-6',
+    variant == 'outlined' && 'py-4 relative z-10',
+  ),
+});
+
+export const textFieldStyle = defaultClassNames<TextFieldInterface>(
+  'textField',
+  textFieldConfig,
+);
+
+export const useTextFieldStyle = createUseClassNames<TextFieldInterface>(
+  'textField',
+  textFieldConfig,
 );