@udixio/ui-react 2.10.13 → 2.10.15

package/src/lib/interfaces/tooltip.interface.ts

@@ -1,61 +0,0 @@
-import { ReactProps } from '../utils';
-import { ButtonInterface } from './button.interface';
-import { ReactNode, RefObject } from 'react';
-import { Transition } from 'motion';
-
-type Trigger = 'hover' | 'click' | 'focus' | null;
-
-export type ToolTipInterface<T extends HTMLElement = any> = {
-  type: 'div';
-  props: {
-    variant?: 'plain' | 'rich';
-    title?: string;
-    /** Supporting text for the tooltip. Optional when using `content` prop. */
-    text?: string;
-    /** Custom content slot that replaces title/text/buttons when provided */
-    content?: ReactNode;
-    buttons?: ReactProps<ButtonInterface> | ReactProps<ButtonInterface>[];
-    position?:
-      | 'top'
-      | 'bottom'
-      | 'left'
-      | 'right'
-      | 'top-left'
-      | 'top-right'
-      | 'bottom-left'
-      | 'bottom-right';
-    trigger?: Trigger | Trigger[];
-    transition?: Transition;
-    /** Delay in milliseconds before showing the tooltip. Default: 400ms */
-    openDelay?: number;
-    /** Delay in milliseconds before hiding the tooltip. Default: 150ms */
-    closeDelay?: number;
-    /** Controlled mode: explicitly control whether the tooltip is open */
-    isOpen?: boolean;
-    /** Uncontrolled mode: default open state */
-    defaultOpen?: boolean;
-    /** Callback when the open state changes */
-    onOpenChange?: (open: boolean) => void;
-    /** Custom ID for accessibility linking. Auto-generated if not provided. */
-    id?: string;
-    /** Custom anchor for positioning. Defaults to the trigger element. */
-    anchorRef?: RefObject<HTMLElement>;
-  } & (
-    | {
-        children?: never;
-        targetRef: RefObject<T>;
-      }
-    | {
-        children: ReactNode;
-        targetRef?: never;
-      }
-  );
-  elements: [
-    'toolTip',
-    'container',
-    'subHead',
-    'supportingText',
-    'actions',
-    'content',
-  ];
-};

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

@@ -1,136 +0,0 @@
-import type { ClassNameComponent } from '../utils';
-import { classNames, createUseClassNames, defaultClassNames } from '../utils';
-import { ButtonInterface } from '../interfaces';
-
-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 w-fit  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',
-      },
-    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,
-        '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',
-      ],
-    ],
-    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',
-      },
-  ),
-  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,29 +0,0 @@
-import { CardInterface } from '../interfaces';
-import {
-  type ClassNameComponent,
-  classNames,
-  createUseClassNames,
-  defaultClassNames,
-} from '../utils';
-
-const cardConfig: ClassNameComponent<CardInterface> = ({
-  variant,
-  interactive,
-}) => ({
-  card: classNames(
-    ' rounded-xl overflow-hidden ',
-    variant === 'outlined' && 'bg-surface border border-outline-variant',
-    variant === 'elevated' && 'bg-surface-container-low shadow-1',
-    variant === 'filled' && 'bg-surface-container-highest',
-    {
-      'group/card cursor-pointer': interactive,
-    },
-  ),
-});
-
-export const cardStyle = defaultClassNames<CardInterface>('card', cardConfig);
-
-export const useCardStyle = createUseClassNames<CardInterface>(
-  'card',
-  cardConfig,
-);

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

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

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

@@ -1,22 +0,0 @@
-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',
-  carouselConfig,
-);
-
-export const useCarouselStyle = createUseClassNames<CarouselInterface>(
-  'carousel',
-  carouselConfig,
-);

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

@@ -1,64 +0,0 @@
-import {
-  type ClassNameComponent,
-  classNames,
-  createUseClassNames,
-  defaultClassNames,
-} from '../utils';
-import { CheckboxInterface } from '../interfaces/checkbox.interface';
-
-const checkboxConfig: ClassNameComponent<CheckboxInterface> = ({
-  isChecked,
-  isIndeterminate,
-  isDisabled,
-  isError,
-  isFocused,
-  isHovered,
-}) => ({
-  checkbox: classNames(
-    'inline-flex items-center justify-center relative size-4.5 ',
-    {
-      'pointer-events-none opacity-[0.38]': isDisabled,
-    },
-  ),
-  input: classNames(
-    'absolute inset-0 w-full h-full opacity-0 z-10 cursor-pointer',
-  ),
-  container: classNames(
-    'relative flex items-center justify-center w-[18px] h-[18px] ',
-  ),
-  box: classNames(
-    'absolute left-1/2 top-1/2 -translate-1/2 to rounded-[2px] size-4 border-2 transition-colors duration-200',
-    // Unchecked state (Border only)
-    !isChecked &&
-      !isIndeterminate && {
-        'border-on-surface-variant': !isError && !isDisabled,
-        'border-error': isError && !isDisabled,
-        'border-on-surface': isDisabled,
-      },
-    // Checked or Indeterminate state (Filled)
-    (isChecked || isIndeterminate) && {
-      'bg-primary border-primary': !isError && !isDisabled,
-      'bg-error border-error': isError && !isDisabled,
-      'bg-on-surface border-on-surface': isDisabled,
-    },
-  ),
-  icon: classNames(
-    'z-10 relative text-on-primary w-full h-full flex items-center justify-center pointer-events-none',
-    {
-      'text-on-error': isError && !isDisabled,
-      'text-surface': isDisabled, // Usually on-surface with opacity against on-surface bg? No, checked disabled is on-surface bg with surface icon usually.
-    },
-  ),
-  stateLayer:
-    'size-10 state-ripple-group-[checkbox] rounded-full cursor-pointer pointer-events-auto absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
-});
-
-export const checkboxStyle = defaultClassNames<CheckboxInterface>(
-  'checkbox',
-  checkboxConfig,
-);
-
-export const useCheckboxStyle = createUseClassNames<CheckboxInterface>(
-  'checkbox',
-  checkboxConfig,
-);

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

@@ -1,62 +0,0 @@
-import type { ClassNameComponent } from '../utils';
-import { classNames, createUseClassNames, defaultClassNames } from '../utils';
-import { ChipInterface } from '../interfaces';
-
-const chipConfig: ClassNameComponent<ChipInterface> = ({
-  variant,
-
-  disabled,
-  trailingIcon,
-  icon,
-  isActive,
-  isInteractive,
-  activated,
-  isFocused,
-  isDragging,
-  isEditing,
-}) => ({
-  chip: classNames(
-    ' group/chip px-3 py-1.5  rounded-lg flex items-center gap-2 outline-none',
-    {
-      'pl-2': icon,
-      'pr-2': trailingIcon,
-      'cursor-pointer': !disabled && isInteractive,
-    },
-    {
-      ' text-on-surface-variant': (!activated && !isFocused) || isEditing,
-      'bg-secondary-container text-on-secondary-container':
-        (activated || isFocused) && !isEditing,
-    },
-    // Dragging feedback
-    isDragging && ['opacity-100 cursor-grabbing shadow-3'],
-    variant === 'outlined' && [
-      'border border-outline-variant',
-      {
-        'border-transparent': isEditing,
-      },
-    ],
-    variant === 'elevated' &&
-      !isEditing && [
-        'shadow-1 bg-surface-container-low',
-        'border border-outline-variant',
-      ],
-  ),
-
-  stateLayer: classNames('rounded-lg overflow-hidden', {}),
-  label: classNames('outline-none text-nowrap', {
-    'opacity-[0.38]': disabled,
-  }),
-  leadingIcon: classNames('text-primary size-[18px]', {
-    'opacity-[0.38]': disabled,
-  }),
-  trailingIcon: classNames('cursor-pointer size-[18px]', {
-    'opacity-[0.38]': disabled,
-  }),
-});
-
-export const chipStyle = defaultClassNames<ChipInterface>('chip', chipConfig);
-
-export const useChipStyle = createUseClassNames<ChipInterface>(
-  'chip',
-  chipConfig,
-);

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

@@ -1,20 +0,0 @@
-import type { ClassNameComponent } from '../utils';
-import { classNames, createUseClassNames, defaultClassNames } from '../utils';
-import { ChipsInterface } from '../interfaces';
-
-const chipsConfig: ClassNameComponent<ChipsInterface> = ({ scrollable }) => ({
-  chips: classNames(' flex  gap-3 outline-none', {
-    'flex-wrap': !scrollable,
-    'overflow-x-auto': scrollable,
-  }),
-});
-
-export const chipsStyle = defaultClassNames<ChipsInterface>(
-  'chips',
-  chipsConfig,
-);
-
-export const useChipsStyle = createUseClassNames<ChipsInterface>(
-  'chips',
-  chipsConfig,
-);

package/src/lib/styles/date-picker.style.ts

@@ -1,43 +0,0 @@
-import {
-  type ClassNameComponent,
-  classNames,
-  createUseClassNames,
-  defaultClassNames,
-} from '../utils';
-import { DatePickerInterface } from '../interfaces/date-picker.interface';
-
-const datePickerConfig: ClassNameComponent<DatePickerInterface> = ({
-  hasSelected,
-}) => ({
-  datePicker: classNames(
-    'inline-flex flex-col bg-surface-container-high rounded-[28px] p-3 select-none', // Using shadow-sm as placeholder for elevation
-    'min-w-[320px]',
-  ),
-  header: classNames('flex items-center justify-between h-12 mb-2 px-2'),
-  monthNav: classNames(
-    'flex items-center justify-center w-10 h-10 rounded-full text-on-surface-variant hover:bg-on-surface-variant/8 transition-colors cursor-pointer',
-  ),
-  monthLabel: classNames(
-    'text-label-large text-on-surface font-bold capitalize',
-  ),
-  weekDays: classNames('grid grid-cols-7 mb-2'),
-  weekDay: classNames(
-    'h-10 flex items-center justify-center text-body-small text-on-surface-variant',
-  ),
-  daysGrid: classNames('grid grid-cols-7 row-auto gap-y-2'),
-  dayCell: classNames('flex items-center justify-center  h-10 p-0 relative'),
-  dayButton: classNames(
-    'w-10 h-10 rounded-full flex items-center justify-center text-body-large transition-all duration-200 relative overflow-hidden z-10 outline-none',
-    // Base style is implicit text-on-surface
-  ),
-});
-
-export const datePickerStyle = defaultClassNames<DatePickerInterface>(
-  'datePicker',
-  datePickerConfig,
-);
-
-export const useDatePickerStyle = createUseClassNames<DatePickerInterface>(
-  'datePicker',
-  datePickerConfig,
-);

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

@@ -1,31 +0,0 @@
-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',
-  dividerConfig,
-);
-
-export const useDividerStyle = createUseClassNames<DividerInterface>(
-  'divider',
-  dividerConfig,
-);

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

@@ -1,29 +0,0 @@
-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',
-  ),
-  label: classNames('text-nowrap'),
-});
-
-export const fabMenuStyle = defaultClassNames<FabMenuInterface>(
-  'fabMenu',
-  fabMenuConfig,
-);
-
-export const useFabMenuStyle = createUseClassNames<FabMenuInterface>(
-  'fabMenu',
-  fabMenuConfig,
-);

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

@@ -1,49 +0,0 @@
-import {
-  type ClassNameComponent,
-  classNames,
-  createUseClassNames,
-  defaultClassNames,
-} from '../utils';
-import { FabInterface } from '../interfaces/fab.interface';
-
-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',
-      'rounded-[16px]': size == 'medium',
-      'rounded-[28px]': size == 'large',
-    },
-    {
-      'p-2': size == 'small',
-      'p-4': size == 'medium',
-      'p-[30px]': size == 'large',
-    },
-    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',
-    'size-9': size == 'large',
-  }),
-  label: classNames('text-nowrap', {
-    'text-title-medium': size == 'small',
-    'text-title-large': size == 'medium',
-    'text-headline-small': size == 'large',
-  }),
-});
-
-export const fabStyle = defaultClassNames<FabInterface>('fab', fabConfig);
-
-export const useFabStyle = createUseClassNames<FabInterface>('fab', fabConfig);