@udixio/ui-react 0.4.2 → 1.0.0

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,167 @@
+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(
+        'rounded-full relative flex transition-all duration-300',
+        'group cursor-pointer',
+        {
+          'cursor-default': disabled,
+        },
+        (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,
+          },
+        ],
+      ),
+      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: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]',
+      ),
+    };
+  },
+);

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,43 @@
+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 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,
+        },
+      ),
+    }),
+  );

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'),
+  }),
+);

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

@@ -0,0 +1,51 @@
+import { classNames, defaultClassNames } from '../utils';
+import { SwitchInterface } from '../interfaces/switch.interface';
+
+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',
+
+      { '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:h-[28px] group-active:w-[28px]',
+        { 'bg-on-primary group-hover:bg-primary-container': isSelected },
+        { 'bg-outline group-hover: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 }
+    ),
+  })
+);

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

@@ -0,0 +1,68 @@
+import { classNames } from '../utils';
+import { TabInterface } from '../interfaces/tab.interface';
+import { defaultClassNames } from '../utils/styles/get-classname';
+
+export const tabStyle = defaultClassNames<TabInterface>(
+  'tab',
+  ({ isSelected, icon, label, variant }) => ({
+    tab: classNames(
+      'bg-surface 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),
+      },
+
+      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',
+    ),
+  }),
+);

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

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

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

@@ -0,0 +1,104 @@
+import React from 'react';
+import { classNames } from '../utils';
+import { TextFieldInterface } from '../interfaces/text-field.interface';
+import { defaultClassNames } from '../utils/styles/get-classname';
+
+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 },
+      ],
+
+      variant == 'outlined' && [
+        'border rounded box-border',
+        {
+          'border-[3px]': isFocused,
+        },
+      ]
+    ),
+    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 },
+      ]
+    ),
+    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'
+    ),
+  })
+);

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

@@ -0,0 +1,37 @@
+import { classNames, defaultClassNames } from '../utils';
+import { ToolTipInterface } from '../interfaces/tooltip.interface';
+
+export const toolStyle = defaultClassNames<ToolTipInterface>(
+  'toolTip',
+  ({ position, variant }) => ({
+    toolTip: classNames(
+      ' pointer-events-auto w-max z-10  absolute  m-1 w-max-content max-w-[312px]',
+      {
+        'bottom-full left-1/2 -translate-x-1/2': position == 'top',
+        'top-full left-1/2 -translate-x-1/2': position == 'bottom',
+        'right-full top-1/2 -translate-y-1/2': position == 'left',
+        'left-full top-1/2 -translate-y-1/2': position == 'right',
+        'bottom-full right-full': position == 'top-left',
+        'bottom-full left-full': position == 'top-right',
+        'top-full right-full': position == 'bottom-left',
+        'top-full left-full': position == 'bottom-right',
+      }
+    ),
+    container: classNames(
+      'pb-2',
+      variant == 'rich' &&
+        'bg-surface-container rounded-2xl text-on-surface-container px-4 pt-3 shadow-2',
+      variant == 'plain' &&
+        'bg-inverse-surface rounded text-inverse-on-surface px-2 py-1'
+    ),
+    actions: classNames(
+      'flex gap-10 px-1 mt-2',
+      variant == 'plain' && 'hidden'
+    ),
+    subHead: classNames(
+      'text-title-small mb-1',
+      variant == 'plain' && 'hidden'
+    ),
+    supportingText: classNames(''),
+  })
+);