@udixio/ui-react 2.10.12 → 2.10.14

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

@@ -1,168 +0,0 @@
-import { IconButtonInterface } from '../interfaces/icon-button.interface';
-import {
-  type ClassNameComponent,
-  classNames,
-  createUseClassNames,
-  defaultClassNames,
-} from '../utils';
-
-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,
-        },
-        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 === '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

@@ -1,25 +0,0 @@
-export * from './button.style';
-export * from './card.style';
-export * from './carousel-item.style';
-export * from './carousel.style';
-export * from './checkbox.style';
-export * from './chip.style';
-export * from './chips.style';
-export * from './divider.style';
-export * from './fab.style';
-export * from './fab-menu.style';
-export * from './icon-button.style';
-export * from './menu.style';
-export * from './menu-group.style';
-export * from './progress-indicator.style';
-export * from './side-sheet.style';
-export * from './slider.style';
-export * from './snackbar.style';
-export * from './switch.style';
-export * from './tab.style';
-export * from './tabs.style';
-export * from './tab-panels.style';
-export * from './text-field.style';
-export * from './tooltip.style';
-export { useButtonStyle } from './button.style';
-export { useMenuStyle } from './menu.style';

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

@@ -1,34 +0,0 @@
-import {
-  type ClassNameComponent,
-  classNames,
-  createUseClassNames,
-  defaultClassNames,
-} from '../utils';
-import { MenuGroupInterface } from '../interfaces/menu-group.interface';
-
-const menuGroupConfig: ClassNameComponent<MenuGroupInterface> = ({
-  variant,
-}) => ({
-  menuGroup: classNames(
-    'flex flex-col gap-0.5 mb-0.5 last:mb-0',
-    'rounded-lg py-0.5 px-1 shadow-2 first:rounded-t-2xl last:rounded-b-2xl',
-    {
-      'bg-surface-container': variant === 'standard',
-      'bg-tertiary-container text-on-tertiary-container': variant === 'vibrant',
-    },
-  ),
-  groupLabel: classNames('px-3 pt-2  text-label-small tracking-wide ', {
-    'text-on-surface-variant': variant === 'standard',
-    'text-on-tertiary-container opacity-80': variant === 'vibrant',
-  }),
-});
-
-export const menuGroupStyle = defaultClassNames<MenuGroupInterface>(
-  'menuGroup',
-  menuGroupConfig,
-);
-
-export const useMenuGroupStyle = createUseClassNames<MenuGroupInterface>(
-  'menuGroup',
-  menuGroupConfig,
-);

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

@@ -1,20 +0,0 @@
-
-import { type ClassNameComponent, classNames, defaultClassNames, createUseClassNames } from '../utils';
-
-export interface MenuHeadlineInterface {
-    label?: string;
-    variant?: 'standard' | 'vibrant';
-    type: 'div';
-    props: { label?: string; variant?: 'standard' | 'vibrant' };
-    states: Record<string, any>;
-    elements: ['headline'];
-}
-
-const menuHeadlineConfig: ClassNameComponent<MenuHeadlineInterface> = ({ props }) => ({
-  headline: classNames('px-3 py-1 text-label-small opacity-60 mt-1', {
-      'text-on-surface-variant': !props?.variant || props.variant === 'standard',
-       // Vibrant treatment if different
-  }),
-});
-
-export const useMenuHeadlineStyle = createUseClassNames<MenuHeadlineInterface>('menu-headline', menuHeadlineConfig);

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

@@ -1,45 +0,0 @@
-import {
-  type ClassNameComponent,
-  classNames,
-  createUseClassNames,
-  defaultClassNames,
-} from '../utils';
-import { MenuItemInterface } from '../interfaces/menu-item.interface';
-
-const menuItemConfig: ClassNameComponent<MenuItemInterface> = ({
-  variant,
-  disabled,
-  isActive,
-}) => ({
-  menuItem: classNames(
-    'group/menu-item text-start  overflow-hidden flex items-center h-12 px-3 cursor-pointer outline-none select-none shrink-0 ',
-    'text-label-large',
-    'transition-colors duration-200',
-    'rounded-xl',
-
-    {
-      'text-on-surface': !variant || variant === 'standard',
-      // 'hover:bg-on-surface/[0.08] focus:bg-on-surface/[0.12]': !props?.variant || props.variant === 'standard', // Handled by State
-      // 'hover:bg-on-tertiary-container/[0.08] focus:bg-on-tertiary-container/[0.12]': props?.variant === 'vibrant', // Handled by State
-      'opacity-38 pointer-events-none': disabled,
-    },
-    (variant === 'vibrant' || isActive) && [
-      'bg-secondary-container text-on-secondary-container',
-    ],
-  ),
-  itemLabel: classNames('flex-1 truncate'),
-  itemIcon: classNames(
-    'w-6 h-6 flex items-center justify-center menu-item-icon',
-  ),
-  leadingIcon: classNames('mr-3'),
-  trailingIcon: classNames('ml-3'),
-});
-
-export const menuItemStyle = defaultClassNames<MenuItemInterface>(
-  'menuItem',
-  menuItemConfig,
-);
-export const useMenuItemStyle = createUseClassNames<MenuItemInterface>(
-  'menuItem',
-  menuItemConfig,
-);

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

@@ -1,32 +0,0 @@
-import {
-  type ClassNameComponent,
-  classNames,
-  createUseClassNames,
-  defaultClassNames,
-} from '../utils';
-import { MenuInterface } from '../interfaces';
-
-const menuConfig: ClassNameComponent<MenuInterface> = ({
-  variant,
-  hasGroups,
-}) => ({
-  menu: classNames(
-    'z-50 min-w-[112px] max-w-[280px] max-h-[300px] ',
-    'flex flex-col',
-    { 'overflow-y-auto': !hasGroups },
-    {
-      'bg-surface-container': !variant || variant === 'standard',
-      // Vibrant uses tertiary-container (approximated) or just colored surface
-      'bg-tertiary-container text-on-tertiary-container': variant === 'vibrant',
-      'py-0.5 shadow-2 px-1 rounded-2xl': !hasGroups,
-      'bg-transparent ': hasGroups,
-    },
-  ),
-});
-
-export const menuStyle = defaultClassNames<MenuInterface>('menu', menuConfig);
-
-export const useMenuStyle = createUseClassNames<MenuInterface>(
-  'menu',
-  menuConfig,
-);

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

@@ -1,56 +0,0 @@
-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',
-    navigationRailItemConfig,
-  );
-
-export const useNavigationRailItemStyle =
-  createUseClassNames<NavigationRailItemInterface>(
-    'navigationRailItem',
-    navigationRailItemConfig,
-  );

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

@@ -1,36 +0,0 @@
-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',
-  navigationRailConfig,
-);
-
-export const useNavigationRailStyle =
-  createUseClassNames<NavigationRailInterface>(
-    'navigationRail',
-    navigationRailConfig,
-  );

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

@@ -1,72 +0,0 @@
-import { ProgressIndicatorInterface } from '../interfaces/progress-indicator.interface';
-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',
-    variant === 'linear-indeterminate' &&
-      'relative overflow-hidden rounded-full',
-  ),
-  firstTrack: classNames(
-    (variant === 'linear-determinate' || variant === 'linear-indeterminate') &&
-      'h-full rounded-full bg-primary-container',
-    {
-      'max-h-0': !isVisible,
-      'max-h-full': isVisible,
-    },
-  ),
-  activeIndicator: classNames(
-    'h-full rounded-full bg-primary',
-    variant === 'linear-determinate' && {
-      'rounded-l-full': true,
-    },
-    (variant === 'linear-indeterminate' ||
-      variant === 'linear-determinate') && {
-      'max-h-0': !isVisible,
-      'max-h-full': isVisible,
-    },
-    (variant === 'circular-determinate' ||
-      variant == 'circular-indeterminate') && [
-      'stroke-primary fill-transparent ',
-      {
-        'stroke-[4px]': isVisible,
-        'stroke-[0px]': !isVisible,
-      },
-    ],
-  ),
-  lastTrack: classNames(
-    (variant === 'linear-determinate' || variant == 'linear-indeterminate') &&
-      'h-full flex-1 rounded-full bg-primary-container',
-    {
-      'max-h-0': !isVisible,
-      'max-h-full': 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',
-    progressIndicatorConfig,
-  );
-
-export const useProgressIndicatorStyle =
-  createUseClassNames<ProgressIndicatorInterface>(
-    'progressIndicator',
-    progressIndicatorConfig,
-  );

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

@@ -1,45 +0,0 @@
-import {
-  type ClassNameComponent,
-  classNames,
-  createUseClassNames,
-  defaultClassNames,
-} from '../utils';
-
-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)]',
-      {
-        'right-0': position == 'right',
-        'left-0': position == 'left',
-      },
-    ],
-  ),
-  container: classNames('w-full overflow-hidden flex flex-col', {}),
-  header: classNames('p-4 flex items-center gap-2'),
-  content: classNames('flex-1 overflow-y-auto'),
-  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,
-);

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

@@ -1,41 +0,0 @@
-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',
-  sliderConfig,
-);
-
-export const useSliderStyle = createUseClassNames<SliderInterface>(
-  'slider',
-  sliderConfig,
-);

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

@@ -1,26 +0,0 @@
-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',
-  snackbarConfig,
-);
-
-export const useSnackbarStyle = createUseClassNames<SnackbarInterface>(
-  'snackbar',
-  snackbarConfig,
-);

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

@@ -1,67 +0,0 @@
-import {
-  type ClassNameComponent,
-  classNames,
-  createUseClassNames,
-  defaultClassNames,
-} from '../utils';
-import { SwitchInterface } from '../interfaces';
-
-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-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 },
-    ],
-
-    { 'text-on-surface/[0.38]': disabled },
-  ),
-});
-
-export const switchStyle = defaultClassNames<SwitchInterface>(
-  'switch',
-  switchConfig,
-);
-
-export const useSwitchStyle = createUseClassNames<SwitchInterface>(
-  'switch',
-  switchConfig,
-);