@udixio/ui-react 2.9.13 → 2.9.15

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

@@ -0,0 +1,39 @@
+import React from 'react';
+
+type Props = {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  name?: string;
+  id?: string;
+  value?: string;
+  style?: React.CSSProperties;
+  className?: string;
+};
+
+export type CheckboxStates = {
+  isChecked: boolean;
+  isIndeterminate: boolean;
+  isDisabled: boolean;
+  isError: boolean;
+  isFocused: boolean;
+  isHovered: boolean;
+};
+
+export interface CheckboxInterface {
+  type: 'div';
+  props: Props;
+  states: CheckboxStates;
+  elements: [
+    'checkbox',
+    'input',
+    'container',
+    'box',
+    'icon',
+    'stateLayer',
+    'ripple',
+  ];
+}

package/src/lib/interfaces/date-picker.interface.ts

@@ -0,0 +1,79 @@
+import React from 'react';
+
+export type DateRange = [Date | null, Date | null];
+
+type Props = {
+  /**
+   * Selection mode: 'single' for one date, 'range' for start/end period.
+   * @default 'single'
+   */
+  mode?: 'single' | 'range';
+
+  /**
+   * The currently selected date(s).
+   * Date for single mode, [start, end] tuple for range mode.
+   */
+  value?: Date | DateRange | null;
+  
+  /**
+   * Default selected date(s) for uncontrolled usage.
+   */
+  defaultValue?: Date | DateRange | null;
+
+  /**
+   * Callback fired when selection changes.
+   * Returns Date in single mode, DateRange in range mode.
+   */
+  onChange?: (value: any) => void;
+
+  /**
+   * Minimum selectable date.
+   */
+  minDate?: Date;
+
+  /**
+   * Maximum selectable date.
+   */
+  maxDate?: Date;
+
+  /**
+   * Disables specific dates.
+   */
+  shouldDisableDate?: (date: Date) => boolean;
+
+  /**
+   * Locale for formatting dates.
+   */
+  locale?: string;
+
+  /**
+   * First day of the week (0=Sunday, 1=Monday).
+   * @default 0
+   */
+  weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export type DatePickerStates = {
+  // Can be expanded if we need specific state-driven styles exposed to the config
+  hasSelected: boolean;
+};
+
+export interface DatePickerInterface {
+  type: 'div';
+  props: Props;
+  states: DatePickerStates;
+  elements: [
+    'datePicker',
+    'header',
+    'monthNav',
+    'monthLabel',
+    'weekDays',
+    'weekDay',
+    'daysGrid',
+    'dayCell',
+    'dayButton', // The interactive part of the day
+  ];
+}

package/src/lib/interfaces/icon-button.interface.ts

@@ -7,7 +7,7 @@ import { Icon } from '../icon';
 type Props = {
   label?: string;
   children?: string;
-  icon: Icon;
+  icon?: Icon;
   size?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
   width?: 'default' | 'narrow' | 'wide';
   iconSelected?: IconDefinition;
@@ -15,6 +15,7 @@ type Props = {
   variant?: IconButtonVariant;
   disabled?: boolean;
   activated?: boolean;
+  title?: string | null;
 
   /**
    * The shape of the button defines whether it is squared or rounded.

package/src/lib/interfaces/index.ts

@@ -2,6 +2,7 @@ export * from './button.interface';
 export * from './card.interface';
 export * from './carousel-item.interface';
 export * from './carousel.interface';
+export * from './checkbox.interface';
 export * from './chip.interface';
 export * from './chips.interface';
 export * from './divider.interface';

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

@@ -6,22 +6,25 @@ export type TextFieldVariant = 'filled' | 'outlined';
 
 type Props = {
   placeholder?: string;
-  name: string;
+  name?: string;
   label: string;
   disabled?: boolean;
   errorText?: string | null;
   supportingText?: string;
   trailingIcon?: React.ReactElement<typeof IconButton> | Icon;
   leadingIcon?: React.ReactElement<typeof IconButton> | Icon;
-  onChange?: (value: string) => void;
+  onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   showSupportingText?: boolean;
   suffix?: string;
 
-  value: string;
+  value?: string;
+  defaultValue?: string;
+  id?: string;
+  style?: React.CSSProperties;
   variant?: TextFieldVariant;
-  type?: 'text' | 'password' | 'number';
+  type?: 'text' | 'password' | 'number' | 'date';
   autoComplete?: 'on' | 'off' | string;
-  textLine?: 'singleLine' | 'multiLine' | 'textAreas';
+  multiline?: boolean;
 };
 export type TextFieldStates = {
   isFocused: boolean;

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

@@ -38,6 +38,8 @@ export type ToolTipInterface<T extends HTMLElement = any> = {
     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;

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

@@ -0,0 +1,64 @@
+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/date-picker.style.ts

@@ -0,0 +1,43 @@
+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/index.ts

@@ -2,6 +2,7 @@ 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';

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

@@ -25,9 +25,9 @@ export const sideSheetConfig: ClassNameComponent<SideSheetInterface> = ({
       },
     ],
   ),
-  container: classNames('w-full overflow-hidden', {}),
-  content: classNames('w-fit '),
+  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' }),

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

@@ -16,14 +16,14 @@ const textFieldConfig: ClassNameComponent<TextFieldInterface> = ({
   isFocused,
   value,
   suffix,
-  textLine,
+  multiline,
 }) => ({
   textField: classNames({
     'opacity-[.38]': disabled,
   }),
   content: classNames(
     'group/text-field  transition-border duration-200 relative  flex  items-center ',
-    { 'h-14': textLine == 'singleLine' },
+    { 'h-14': !multiline },
     {
       'border-on-surface-variant':
         !errorText?.length && !isFocused && variant == 'filled',

package/src/stories/containment/card.stories.tsx

@@ -25,7 +25,7 @@ const createCardStory = (variant: ReactProps<CardInterface>['variant']) => {
       <Card className={'w-[360px] h-[360px]'} {...args}></Card>
       <a className={'group'} href={'https://example.com/'} target={'_blank'}>
         <Card
-          isInteractive={true}
+          interactive={true}
           className={'w-[360px] h-[360px]'}
           {...args}
         ></Card>

package/dist/lib/hooks/useTooltipPosition.d.ts

@@ -1,22 +0,0 @@
-import { RefObject } from 'react';
-type Position = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-type Variant = 'plain' | 'rich';
-export interface UseTooltipPositionOptions {
-    targetRef: RefObject<HTMLElement | null>;
-    position?: Position;
-    variant?: Variant;
-    isOpen: boolean;
-}
-export interface UseTooltipPositionReturn {
-    resolvedPosition: Position;
-}
-/**
- * Hook to calculate tooltip position using useLayoutEffect.
- * Auto-flips position if not enough viewport space.
- *
- * For plain variant: prefers left/right, falls back to top/bottom
- * For rich variant: uses corner positions (top-left, top-right, bottom-left, bottom-right)
- */
-export declare function useTooltipPosition({ targetRef, position: positionProp, variant, isOpen, }: UseTooltipPositionOptions): UseTooltipPositionReturn;
-export {};
-//# sourceMappingURL=useTooltipPosition.d.ts.map

package/dist/lib/hooks/useTooltipPosition.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTooltipPosition.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/useTooltipPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAE7D,KAAK,QAAQ,GACT,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;AAEnB,KAAK,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,wBAAwB;IACvC,gBAAgB,EAAE,QAAQ,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,QAAQ,EAAE,YAAY,EACtB,OAAiB,EACjB,MAAM,GACP,EAAE,yBAAyB,GAAG,wBAAwB,CAyDtD"}

package/src/lib/hooks/useTooltipPosition.ts

@@ -1,95 +0,0 @@
-import { RefObject, useLayoutEffect, useState } from 'react';
-
-type Position =
-  | 'top'
-  | 'bottom'
-  | 'left'
-  | 'right'
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right';
-
-type Variant = 'plain' | 'rich';
-
-export interface UseTooltipPositionOptions {
-  targetRef: RefObject<HTMLElement | null>;
-  position?: Position;
-  variant?: Variant;
-  isOpen: boolean;
-}
-
-export interface UseTooltipPositionReturn {
-  resolvedPosition: Position;
-}
-
-/**
- * Hook to calculate tooltip position using useLayoutEffect.
- * Auto-flips position if not enough viewport space.
- *
- * For plain variant: prefers left/right, falls back to top/bottom
- * For rich variant: uses corner positions (top-left, top-right, bottom-left, bottom-right)
- */
-export function useTooltipPosition({
-  targetRef,
-  position: positionProp,
-  variant = 'plain',
-  isOpen,
-}: UseTooltipPositionOptions): UseTooltipPositionReturn {
-  const [resolvedPosition, setResolvedPosition] = useState<Position>(
-    positionProp ?? 'bottom',
-  );
-
-  useLayoutEffect(() => {
-    // If position is explicitly set, use it
-    if (positionProp) {
-      setResolvedPosition(positionProp);
-      return;
-    }
-
-    // Only calculate if open and we have a target
-    if (!isOpen || !targetRef.current || typeof window === 'undefined') {
-      return;
-    }
-
-    const targetElement = targetRef.current;
-    const rect = targetElement.getBoundingClientRect();
-
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-
-    // Normalized position (0-1 range)
-    const x = rect.left / viewportWidth;
-    const y = rect.top / viewportHeight;
-
-    let newPosition: Position;
-
-    if (variant === 'plain') {
-      // Plain variant: prefer horizontal positioning, fall back to vertical
-      if (x < 1 / 3) {
-        newPosition = 'right';
-      } else if (x > 2 / 3) {
-        newPosition = 'left';
-      } else {
-        newPosition = y > 0.5 ? 'top' : 'bottom';
-      }
-    } else {
-      // Rich variant: use corner positions
-      if (x < 0.5 && y < 0.5) {
-        newPosition = 'bottom-right';
-      } else if (x >= 0.5 && y < 0.5) {
-        newPosition = 'bottom-left';
-      } else if (x >= 0.5 && y >= 0.5) {
-        newPosition = 'top-left';
-      } else {
-        newPosition = 'top-right';
-      }
-    }
-
-    setResolvedPosition(newPosition);
-  }, [isOpen, targetRef, positionProp, variant]);
-
-  return {
-    resolvedPosition,
-  };
-}