@udixio/ui-react 2.10.12 → 2.10.14

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

@@ -1,35 +0,0 @@
-import { TabPanelsInterface, TabPanelInterface } from '../interfaces';
-import {
-  type ClassNameComponent,
-  classNames,
-  createUseClassNames,
-  defaultClassNames,
-} from '../utils';
-
-const tabPanelsConfig: ClassNameComponent<TabPanelsInterface> = () => ({
-  tabPanels: classNames('overflow-hidden'),
-});
-
-export const tabPanelsStyle = defaultClassNames<TabPanelsInterface>(
-  'tabPanels',
-  tabPanelsConfig,
-);
-
-export const useTabPanelsStyle = createUseClassNames<TabPanelsInterface>(
-  'tabPanels',
-  tabPanelsConfig,
-);
-
-const tabPanelConfig: ClassNameComponent<TabPanelInterface> = () => ({
-  tabPanel: classNames(''),
-});
-
-export const tabPanelStyle = defaultClassNames<TabPanelInterface>(
-  'tabPanel',
-  tabPanelConfig,
-);
-
-export const useTabPanelStyle = createUseClassNames<TabPanelInterface>(
-  'tabPanel',
-  tabPanelConfig,
-);

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

@@ -1,78 +0,0 @@
-import {
-  type ClassNameComponent,
-  classNames,
-  createUseClassNames,
-  defaultClassNames,
-} from '../utils';
-import { TabInterface } from '../interfaces';
-
-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',
-  ),
-});
-
-export const tabStyle = defaultClassNames<TabInterface>('tab', tabConfig);
-
-export const useTabStyle = createUseClassNames<TabInterface>('tab', tabConfig);

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

@@ -1,22 +0,0 @@
-import { TabsInterface } from '../interfaces';
-import {
-  type ClassNameComponent,
-  classNames,
-  createUseClassNames,
-  defaultClassNames,
-} from '../utils';
-
-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',
-  tabsConfig,
-);

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

@@ -1,115 +0,0 @@
-import React from 'react';
-import {
-  type ClassNameComponent,
-  classNames,
-  createUseClassNames,
-  defaultClassNames,
-} from '../utils';
-import { TextFieldInterface } from '../interfaces';
-
-const textFieldConfig: ClassNameComponent<TextFieldInterface> = ({
-  disabled,
-  leadingIcon,
-  trailingIcon,
-  variant,
-  errorText,
-  isFocused,
-  value,
-  suffix,
-  multiline,
-}) => ({
-  textField: classNames({
-    'opacity-[.38]': disabled,
-  }),
-  content: classNames(
-    'group/text-field  transition-border duration-200 relative  flex  items-center ',
-    { 'h-14': !multiline },
-    {
-      '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',
-  ),
-});
-
-export const textFieldStyle = defaultClassNames<TextFieldInterface>(
-  'textField',
-  textFieldConfig,
-);
-
-export const useTextFieldStyle = createUseClassNames<TextFieldInterface>(
-  'textField',
-  textFieldConfig,
-);

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

@@ -1,48 +0,0 @@
-import {
-  type ClassNameComponent,
-  classNames,
-  createUseClassNames,
-  defaultClassNames,
-} from '../utils';
-import { ToolTipInterface } from '../interfaces';
-
-const toolTipConfig: ClassNameComponent<ToolTipInterface> = ({
-  position,
-  variant,
-}) => ({
-  toolTip: classNames(
-    ' pointer-events-auto w-max z-10  absolute  m-1 w-max-content max-w-[312px]',
-    variant == 'rich' &&
-      'bg-surface-container rounded-2xl text-on-surface-container shadow-2',
-    variant == 'plain' && 'bg-inverse-surface rounded text-inverse-on-surface ',
-    {
-      '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' && 'px-4 pt-3 ',
-    variant == 'plain' && '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(''),
-  content: classNames('w-full'),
-});
-
-export const toolStyle = defaultClassNames<ToolTipInterface>(
-  'toolTip',
-  toolTipConfig,
-);
-
-export const useToolTipStyle = createUseClassNames<ToolTipInterface>(
-  'toolTip',
-  toolTipConfig,
-);

package/src/lib/utils/component-helper.ts

@@ -1,134 +0,0 @@
-import { StyleProps } from './styles';
-import { ComponentInterface } from './component';
-
-export interface HTMLElements {
-  a: HTMLAnchorElement;
-  abbr: HTMLElement;
-  address: HTMLElement;
-  area: HTMLAreaElement;
-  article: HTMLElement;
-  aside: HTMLElement;
-  audio: HTMLAudioElement;
-  b: HTMLElement;
-  base: HTMLBaseElement;
-  bdi: HTMLElement;
-  bdo: HTMLElement;
-  big: HTMLElement;
-  blockquote: HTMLQuoteElement;
-  body: HTMLBodyElement;
-  br: HTMLBRElement;
-  button: HTMLButtonElement;
-  canvas: HTMLCanvasElement;
-  caption: HTMLElement;
-  center: HTMLElement;
-  cite: HTMLElement;
-  code: HTMLElement;
-  col: HTMLTableColElement;
-  colgroup: HTMLTableColElement;
-  data: HTMLDataElement;
-  datalist: HTMLDataListElement;
-  dd: HTMLElement;
-  del: HTMLModElement;
-  details: HTMLDetailsElement;
-  dfn: HTMLElement;
-  dialog: HTMLDialogElement;
-  div: HTMLDivElement;
-  dl: HTMLDListElement;
-  dt: HTMLElement;
-  em: HTMLElement;
-  embed: HTMLEmbedElement;
-  fieldset: HTMLFieldSetElement;
-  figcaption: HTMLElement;
-  figure: HTMLElement;
-  footer: HTMLElement;
-  form: HTMLFormElement;
-  h1: HTMLHeadingElement;
-  h2: HTMLHeadingElement;
-  h3: HTMLHeadingElement;
-  h4: HTMLHeadingElement;
-  h5: HTMLHeadingElement;
-  h6: HTMLHeadingElement;
-  head: HTMLHeadElement;
-  header: HTMLElement;
-  hgroup: HTMLElement;
-  hr: HTMLHRElement;
-  html: HTMLHtmlElement;
-  i: HTMLElement;
-  iframe: HTMLIFrameElement;
-  img: HTMLImageElement;
-  input: HTMLInputElement;
-  ins: HTMLModElement;
-  kbd: HTMLElement;
-  keygen: HTMLElement;
-  label: HTMLLabelElement;
-  legend: HTMLLegendElement;
-  li: HTMLLIElement;
-  link: HTMLLinkElement;
-  main: HTMLElement;
-  map: HTMLMapElement;
-  mark: HTMLElement;
-  menu: HTMLElement;
-  menuitem: HTMLElement;
-  meta: HTMLMetaElement;
-  meter: HTMLMeterElement;
-  nav: HTMLElement;
-  noindex: HTMLElement;
-  noscript: HTMLElement;
-  object: HTMLObjectElement;
-  ol: HTMLOListElement;
-  optgroup: HTMLOptGroupElement;
-  option: HTMLOptionElement;
-  output: HTMLOutputElement;
-  p: HTMLParagraphElement;
-  param: HTMLParamElement;
-  picture: HTMLElement;
-  pre: HTMLPreElement;
-  progress: HTMLProgressElement;
-  q: HTMLQuoteElement;
-  rp: HTMLElement;
-  rt: HTMLElement;
-  ruby: HTMLElement;
-  s: HTMLElement;
-  samp: HTMLElement;
-  search: HTMLElement;
-  slot: HTMLSlotElement;
-  script: HTMLScriptElement;
-  section: HTMLElement;
-  select: HTMLSelectElement;
-  small: HTMLElement;
-  source: HTMLSourceElement;
-  span: HTMLSpanElement;
-  strong: HTMLElement;
-  style: HTMLStyleElement;
-  sub: HTMLElement;
-  summary: HTMLElement;
-  sup: HTMLElement;
-  table: HTMLTableElement;
-  template: HTMLTemplateElement;
-  tbody: HTMLTableSectionElement;
-  td: HTMLTableDataCellElement;
-  textarea: HTMLTextAreaElement;
-  tfoot: HTMLTableSectionElement;
-  th: HTMLTableHeaderCellElement;
-  thead: HTMLTableSectionElement;
-  time: HTMLTimeElement;
-  title: HTMLTitleElement;
-  tr: HTMLTableRowElement;
-  track: HTMLTrackElement;
-  u: HTMLElement;
-  ul: HTMLUListElement;
-  var: HTMLElement;
-  video: HTMLVideoElement;
-  wbr: HTMLElement;
-  webview: HTMLWebViewElement;
-}
-
-// export type MotionComponentProps<
-//   Props extends object,
-//   States extends object,
-//   Elements extends string,
-//   ElementType extends keyof HTMLElements,
-// > = ComponentProps<Props, States, Elements, ElementType> &
-//   Omit<HTMLMotionProps<ElementType>, 'ref' | 'className'>;
-
-export type ComponentClassName<T extends ComponentInterface> = StyleProps<T>;

package/src/lib/utils/component.ts

@@ -1,34 +0,0 @@
-import { JSX } from 'react/jsx-runtime';
-import React from 'react';
-import { ComponentClassName, HTMLElements } from './component-helper';
-import { HTMLMotionProps } from 'motion/react';
-
-export type ReactProps<T extends ComponentInterface> = Omit<
-  JSX.IntrinsicElements[T['type']],
-  keyof T['props'] | 'className' | 'children'
-> &
-  ComponentClassName<T> & {
-    ref?: React.RefObject<HTMLElements[T['type']] | null>;
-  } & T['props'];
-
-export type MotionProps<T extends ComponentInterface> = ReactProps<T> &
-  HTMLMotionProps<T['type']>;
-
-export interface LinkInterface<Props> {
-  type: 'a';
-  props: Props & { href?: string };
-}
-
-export interface ActionInterface<Props> {
-  type: 'button';
-  props: Props & { href?: never };
-}
-
-export type ActionOrLink<Props> = LinkInterface<Props> | ActionInterface<Props>;
-
-export interface ComponentInterface {
-  type: keyof HTMLElements;
-  props?: object;
-  states?: object;
-  elements: string[];
-}

package/src/lib/utils/index.ts

@@ -1,7 +0,0 @@
-export * from './component-helper';
-export * from './component';
-export * from './component';
-export * from './component';
-export * from './component';
-export * from './component';
-export * from './styles';

package/src/lib/utils/string.ts

@@ -1,9 +0,0 @@
-export function convertToKebabCase(text: string) {
-  return text
-    .replace(/([a-z])([A-Z])/g, '$1-$2') // Gérer les transitions camelCase (ajouter un tiret entre les lettres)
-    .toLowerCase() // Convertir tout en minuscules
-    .normalize('NFD') // Décomposer les caractères accentués
-    .replace(/[\u0300-\u036f]/g, '') // Supprimer les accents (diacritics)
-    .replace(/[^a-z0-9]+/g, '-') // Remplacer les caractères non-alphanumériques par des tirets
-    .replace(/^-+|-+$/g, ''); // Supprimer les tirets en début/fin
-}

package/src/lib/utils/styles/classnames.ts

@@ -1,49 +0,0 @@
-import { ClassValue, clsx } from 'clsx';
-import { extendTailwindMerge } from 'tailwind-merge';
-
-type AdditionalClassGroupIds = 'font';
-
-const twMerge = extendTailwindMerge<AdditionalClassGroupIds>({
-  override: {
-    classGroups: {
-      'text-color': [
-        {
-          text: [
-            (value: string) =>
-              !value.startsWith('display-') &&
-              !value.startsWith('headline-') &&
-              !value.startsWith('title-') &&
-              !value.startsWith('body-') &&
-              !value.startsWith('label-'),
-          ],
-        },
-      ],
-    },
-  },
-  extend: {
-    classGroups: {
-      font: [
-        {
-          text: [
-            (value: string) =>
-              value.startsWith('display-') ||
-              value.startsWith('headline-') ||
-              value.startsWith('title-') ||
-              value.startsWith('body-') ||
-              value.startsWith('label-'),
-          ],
-        },
-      ],
-    },
-    conflictingClassGroups: {
-      font: ['font'],
-    },
-  },
-});
-
-export const classNames = (...args: ClassValue[]) => {
-  return twMerge(clsx(args));
-};
-export const classnames = (...args: ClassValue[]) => {
-  return twMerge(clsx(args));
-};

package/src/lib/utils/styles/get-classname.ts

@@ -1,96 +0,0 @@
-import { useMemo } from 'react';
-import { ComponentInterface } from '../component';
-import { convertToKebabCase } from '../string';
-import { classnames } from './classnames';
-
-type RequiredNullable<T> = {
-  [K in keyof T]-?: any;
-};
-
-export interface StyleProps<T extends ComponentInterface> {
-  className?: string | ClassNameComponent<T>;
-}
-
-export type ClassNameComponent<T extends ComponentInterface> = (
-  states: T['states'] & T['props'],
-) => Partial<Record<T['elements'][number], string>>;
-
-export const getClassNames = <T extends ComponentInterface>(args: {
-  classNameList: (ClassNameComponent<T> | string | undefined)[];
-  default: T['elements'][0];
-  states: T['states'] & T['props'];
-}): Record<T['elements'][number], string> => {
-  const classNames: Partial<Record<T['elements'][number], string[]>> = {};
-  args.classNameList.forEach((classNameComponent) => {
-    if (classNameComponent) {
-      if (typeof classNameComponent == 'string') {
-        (classNames[args.default] ??= []).push(classNameComponent);
-      } else {
-        const result = classNameComponent(args.states);
-        Object.entries(result).map((argsElement) => {
-          const [key, value] = argsElement as [T['elements'][number], string];
-          (classNames[key] ??= []).push(value);
-        });
-      }
-    }
-  });
-
-  const result = classNames as unknown as Record<T['elements'][number], string>;
-
-  Object.entries(classNames).map((argsElement) => {
-    // eslint-disable-next-line prefer-const
-    let [key, value] = argsElement as [T['elements'][number], string[]];
-
-    value = value.reverse();
-
-    if (key == args.default) {
-      value.unshift('relative');
-    }
-
-    value.unshift(convertToKebabCase(key));
-
-    result[key] = classnames(...value);
-  });
-
-  return result;
-};
-
-export const defaultClassNames = <T extends ComponentInterface>(
-  element: T['elements'][0],
-  defaultClassName: ClassNameComponent<T> | string,
-) => {
-  return (
-    states: RequiredNullable<T['props']> &
-      T['props'] &
-      T['states'] & {
-        className: ClassNameComponent<T> | string | undefined;
-      },
-  ) =>
-    getClassNames({
-      classNameList: [states.className, defaultClassName],
-      default: element,
-      states,
-    });
-};
-
-export const createUseClassNames = <T extends ComponentInterface>(
-  element: T['elements'][0],
-  defaultClassName: ClassNameComponent<T> | string,
-) => {
-  return (
-    states: T['states'] & T['props'] & {
-      className?: string | ClassNameComponent<T>;
-    },
-  ): Record<T['elements'][number], string> => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useMemo(
-      () =>
-        getClassNames<T>({
-          classNameList: [states.className, defaultClassName],
-          default: element,
-          states,
-        }),
-      [states],
-    );
-  };
-};

package/src/lib/utils/styles/index.ts

@@ -1,4 +0,0 @@
-export * from './classnames';
-export * from './classnames';
-export * from './get-classname';
-export * from './use-classnames';

package/src/lib/utils/styles/use-classnames.ts

@@ -1,25 +0,0 @@
-import { useMemo } from 'react';
-import { ComponentInterface } from '../component';
-import { ClassNameComponent, getClassNames } from './get-classname';
-
-export function useClassNames<T extends ComponentInterface>(
-  element: T['elements'][0],
-  defaultClassName: ClassNameComponent<T> | string,
-  states: (T['states'] & T['props']) & { className?: string | ClassNameComponent<T> },
-): Record<T['elements'][number], string> {
-  return useMemo(
-    () =>
-      getClassNames<T>({
-        classNameList: [states?.className, defaultClassName],
-        default: element,
-        states: states as any,
-      }),
-    [element, defaultClassName, states],
-  );
-}
-
-// Documentation note:
-// - This hook centralizes class name merging logic (string or function),
-//   prefixes each element key with its kebab-case name, and adds `relative` on the root element by default.
-// - It preserves current order/priority where consumer overrides take precedence over defaults.
-// - Pass overrides via props.className (string or function) — see Button for example usage.