@udixio/ui-react 0.0.1 → 0.1.0

package/src/lib/interfaces/text-field.interface.ts

@@ -0,0 +1,48 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import React from 'react';
+import { IconButton } from '../components/IconButton';
+
+export type TextFieldVariant = 'filled' | 'outlined';
+
+type Props = {
+  placeholder?: string;
+  name: string;
+  label: string;
+  disabled?: boolean;
+  errorText?: string | null;
+  supportingText?: string;
+  trailingIcon?: React.ReactElement<typeof IconButton> | IconDefinition;
+  leadingIcon?: React.ReactElement<typeof IconButton> | IconDefinition;
+  onChange?: (value: string) => void;
+  showSupportingText?: boolean;
+  suffix?: string;
+
+  value: string;
+  variant?: TextFieldVariant;
+  type?: 'text' | 'password' | 'number';
+  autoComplete?: 'on' | 'off' | string;
+  textLine?: 'singleLine' | 'multiLine' | 'textAreas';
+};
+export type TextFieldStates = {
+  isFocused: boolean;
+  showErrorIcon: boolean;
+  showSupportingText: boolean;
+};
+
+export interface TextFieldInterface {
+  type: 'div';
+  props: Props;
+  states: TextFieldStates;
+  elements: [
+    'textField',
+    'content',
+    'label',
+    'input',
+    'activeIndicator',
+    'supportingText',
+    'leadingIcon',
+    'trailingIcon',
+    'suffix',
+    'stateLayer',
+  ];
+}

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

@@ -0,0 +1,35 @@
+import { ReactProps } from '../utils';
+import { ButtonInterface } from './button.interface';
+import { ReactNode, RefObject } from 'react';
+
+type Trigger = 'hover' | 'click' | 'focus' | null;
+
+export type ToolTipInterface<T extends HTMLElement = any> = {
+  type: 'div';
+  props: {
+    variant?: 'plain' | 'rich';
+    title?: string;
+    text: string;
+    buttons?: ReactProps<ButtonInterface> | ReactProps<ButtonInterface>[];
+    position?:
+      | 'top'
+      | 'bottom'
+      | 'left'
+      | 'right'
+      | 'top-left'
+      | 'top-right'
+      | 'bottom-left'
+      | 'bottom-right';
+    trigger?: Trigger | Trigger[];
+  } & (
+    | {
+        children?: never;
+        targetRef: RefObject<T>;
+      }
+    | {
+        children: ReactNode;
+        targetRef?: never;
+      }
+  );
+  elements: ['toolTip', 'container', 'subHead', 'supportingText', 'actions'];
+};

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

@@ -0,0 +1,155 @@
+import { classNames, defaultClassNames } from '../utils';
+import { ButtonInterface } from '../interfaces';
+
+export const buttonStyle = defaultClassNames<ButtonInterface>(
+  'button',
+  ({
+    variant,
+    disabled,
+    iconPosition,
+    icon,
+    loading,
+    shape,
+    size,
+    allowShapeTransformation,
+  }) => ({
+    button: classNames(
+      'group flex items-center cursor-pointer',
+      size === 'xSmall' && 'py-2',
+      size === 'small' && 'py-1',
+      variant === 'text' && [
+        size === 'xSmall' && '-my-2',
+        size === 'small' && '-my-1',
+      ],
+    ),
+    container: classNames(
+      ' relative outline-none overflow-hidden 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' && {
+        '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 === 'elevated' && {
+        'bg-surface-container-low  shadow-1 hover:shadow-2': !disabled,
+      },
+      variant === 'filled' && {
+        'bg-primary hover:shadow-1': !disabled,
+      },
+      variant === 'filledTonal' && {
+        'bg-secondary-container hover:shadow-1': !disabled,
+      },
+      variant === 'outlined' && [
+        ' border',
+        {
+          'border-on-surface/[0.12]': disabled,
+          ' border-outline focus:border-primary': !disabled,
+        },
+      ],
+      variant === 'text' && [
+        'w-fit',
+        {
+          'text-primary': !disabled,
+          'text-on-surface/[0.38]': disabled,
+        },
+        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',
+    ),
+    stateLayer: classNames(
+      'state-layer min-h-full min-w-full absolute top-0 left-0 ',
+      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,
+      },
+      variant === 'filledTonal' && {
+        '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 },
+      variant === 'elevated' && {
+        'text-primary': !disabled,
+        'text-on-surface/[38%]': disabled,
+      },
+      variant === 'filled' && {
+        'text-on-primary': !disabled,
+        'text-on-surface/[38%]': disabled,
+      },
+      variant === 'filledTonal' && {
+        'text-on-secondary-container': !disabled,
+        'text-on-surface/[0.38]': disabled,
+      },
+      variant === 'outlined' && {
+        'text-primary': !disabled,
+        'text-on-surface/[0.38]': disabled,
+      },
+      variant === 'text' && {
+        'text-primary': !disabled,
+        'text-on-surface/[0.38]': disabled,
+      },
+    ),
+    icon: classNames(
+      { invisible: loading },
+      size === 'xSmall' && 'size-5',
+      size === 'small' && 'size-5',
+      size === 'medium' && 'size-6',
+      size === 'large' && 'size-8',
+      size === 'xLarge' && 'size-10',
+      variant === 'elevated' && {
+        'text-primary': !disabled,
+        'text-on-surface/[38%]': disabled,
+      },
+      variant === 'filled' && {
+        'text-on-primary': !disabled,
+        'text-on-surface/[38%]': disabled,
+      },
+      variant === 'filledTonal' && {
+        'text-on-secondary-container': !disabled,
+        'text-on-surface/[0.38]': disabled,
+      },
+      variant === 'outlined' && {
+        'text-primary': !disabled,
+        'text-on-surface/[0.38]': disabled,
+      },
+      variant === 'text' && {
+        'text-primary': !disabled,
+        'text-on-surface/[0.38]': disabled,
+      },
+    ),
+  }),
+);

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

@@ -0,0 +1,22 @@
+import { CardInterface } from '../interfaces';
+import { classNames, defaultClassNames } from '../utils';
+
+export const cardStyle = defaultClassNames<CardInterface>(
+  'card',
+  ({ variant, isInteractive }) => ({
+    card: classNames(
+      'card group/card rounded-xl overflow-hidden z-10',
+      variant === 'outlined' && 'bg-surface',
+      variant === 'elevated' && 'bg-surface-container-low shadow-1',
+      variant === 'filled' && 'bg-surface-container-highest',
+      variant !== 'filled' && 'border border-outline-variant'
+    ),
+    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,
+      },
+    ]),
+  })
+);

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

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

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

@@ -0,0 +1,12 @@
+import { classNames, defaultClassNames } from '../utils';
+import { CarouselInterface } from '../interfaces';
+
+export const carouselStyle = defaultClassNames<CarouselInterface>(
+  'carousel',
+  () => ({
+    carousel: classNames(['w-full h-[400px]']),
+    track: classNames(
+      'grid grid-flow-col h-full transition-transform  ease-out w-fit',
+    ),
+  }),
+);

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

@@ -0,0 +1,17 @@
+import { DividerInterface } from '../interfaces/divider.interface';
+import { classNames, defaultClassNames } from '../utils';
+
+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',
+      }
+    ),
+  })
+);

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

@@ -0,0 +1,55 @@
+import { classNames, 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',
+    ),
+    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',
+    ),
+
+    icon: classNames(
+      {
+        'size-6': size == 'small' || size == 'medium' || isExtended,
+        'size-9': size == 'large' && !isExtended,
+      },
+      variant === 'surface' && 'text-primary',
+      variant === 'primary' && 'text-on-primary-container',
+      variant === 'secondary' && 'text-on-secondary-container',
+      variant === 'tertiary' && 'text-on-tertiary-container',
+    ),
+
+    label: classNames(
+      'text-title-medium text-nowrap',
+      variant === 'surface' && 'text-primary',
+      variant === 'primary' && 'text-on-primary-container',
+      variant === 'secondary' && 'text-on-secondary-container',
+      variant === 'tertiary' && 'text-on-tertiary-container',
+    ),
+  }),
+);

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

@@ -0,0 +1,140 @@
+import { IconButtonInterface } from '../interfaces/icon-button.interface';
+import { classNames, defaultClassNames } from '../utils';
+
+export const iconButtonStyle = defaultClassNames<IconButtonInterface>(
+  'iconButton',
+  ({
+    variant,
+    disabled,
+    onToggle,
+    isActive,
+    size,
+    width,
+    shape,
+    allowShapeTransformation,
+  }) => {
+    return {
+      iconButton: classNames(
+        'group  min-h-12 flex items-center cursor-pointer',
+        {
+          'cursor-default': disabled,
+        },
+      ),
+      container: classNames(
+        'rounded-full relative flex overflow-hidden transition-all duration-300',
+        (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:rounded-[12px]': size === 'xSmall' || size == 'small',
+            'group-active:rounded-[16px]': size === 'medium',
+            'group-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,
+          },
+        ],
+      ),
+      stateLayer: classNames(
+        'absolute top-0 left-0 h-full w-full ',
+        !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]',
+      ),
+    };
+  },
+);

package/src/lib/styles/index.ts

@@ -0,0 +1,15 @@
+export * from './button.style';
+export * from './card.style';
+export * from './carousel-item.style';
+export * from './carousel.style';
+export * from './divider.style';
+export * from './fab.style';
+export * from './icon-button.style';
+export * from './progress-indicator.style';
+export * from './slider.style';
+export * from './snackbar.style';
+export * from './switch.style';
+export * from './tab.style';
+export * from './tabs.style';
+export * from './text-field.style';
+export * from './tooltip.style';

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

@@ -0,0 +1,44 @@
+import { classNames, defaultClassNames } from '../utils';
+import { NavigationRailItemInterface } from '../interfaces';
+
+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,
+        }
+      ),
+
+      icon: classNames('size-6 flex'),
+      label: classNames('w-fit mx-auto', {
+        'text-label-large ': variant == 'horizontal',
+        'text-label-medium': variant == 'vertical',
+      }),
+    })
+  );

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

@@ -0,0 +1,20 @@
+import { classNames, defaultClassNames } from '../utils';
+import { NavigationRailInterface } from '../interfaces/navigation-rail.interface';
+
+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,
+    }),
+  })
+);

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

@@ -0,0 +1,30 @@
+import { ProgressIndicatorInterface } from '../interfaces/progress-indicator.interface';
+import { classNames, defaultClassNames } from '../utils';
+
+export const progressIndicatorStyle =
+  defaultClassNames<ProgressIndicatorInterface>(
+    'progressIndicator',
+    ({ variant, isVisible }) => ({
+      progressIndicator: classNames(
+        (variant === 'linear-determinate' ||
+          variant == 'linear-indeterminate') &&
+          'flex w-full'
+      ),
+      track: 'h-full rounded-full bg-primary rounded-l-full',
+      activeIndicator: classNames(
+        (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: 'absolute right-0 bg-primary rounded-full',
+    })
+  );

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

@@ -0,0 +1,27 @@
+import { classNames, defaultClassNames } from '../utils';
+import { SliderInterface } from '../interfaces/slider.interface';
+
+export const sliderStyle = defaultClassNames<SliderInterface>(
+  'slider',
+  ({ isChanging }) => ({
+    slider: classNames([
+      'relative w-full h-11 flex items-center rounded gap-x-1.5 cursor-pointer',
+    ]),
+    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 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',
+    ]),
+  })
+);

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

@@ -0,0 +1,14 @@
+import { classNames, defaultClassNames } from '../utils';
+import { SnackbarInterface } from '../interfaces/snackbar.interface';
+
+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'),
+  }),
+);