@udixio/ui-react 2.9.13 → 2.9.14

package/src/lib/components/TextField.tsx

@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useId, useState } from 'react';
 import { Icon } from '../icon';
 import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons';
 import { motion } from 'motion/react';
-import { v4 as uuidv4 } from 'uuid';
 
 import TextareaAutosize from 'react-textarea-autosize';
 import { useTextFieldStyle } from '../styles/text-field.style';
@@ -15,10 +14,10 @@ import { TextFieldInterface } from '../interfaces/text-field.interface';
  * @status beta
  * @category Input
  * @devx
- * - `onChange` receives the string value (not the DOM event).
- * - `value` syncs internal state; not a fully controlled input.
+ * - Supports controlled (`value`) and uncontrolled (`defaultValue`) usage.
+ * - `multiline` switches to textarea mode.
  * @a11y
- * - Uses `label` for `aria-label`; no `aria-describedby` for supporting text.
+ * - `aria-describedby` links supporting text/error to input.
  */
 export const TextField = ({
   variant = 'filled',
@@ -33,51 +32,35 @@ export const TextField = ({
   trailingIcon,
   leadingIcon,
   type = 'text',
-  textLine = 'singleLine',
+  multiline = false,
   autoComplete = 'on',
   onChange,
-  value: defaultValue,
-  showSupportingText: defaultShowSupportingText = false,
+  value: valueProp,
+  defaultValue,
+  showSupportingText,
+  id: idProp,
+  style,
   ...restProps
 }: ReactProps<TextFieldInterface>) => {
-  const [value, setValue] = useState(defaultValue ?? '');
-  const [isFocused, setIsFocused] = useState(false);
-  const [showErrorIcon, setShowErrorIcon] = useState(false);
-  const [showSupportingText, setShowSupportingText] = useState(
-    defaultShowSupportingText,
-  );
+  const generatedId = useId();
+  const id = idProp || generatedId;
+  const helperTextId = `${id}-helper`;
 
-  useEffect(() => {
-    setValue(defaultValue ?? '');
-  }, [defaultValue]);
+  const isControlled = valueProp !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+  const value = isControlled ? valueProp : internalValue;
 
-  useEffect(() => {
-    if (errorText?.length) {
-      setShowErrorIcon(true);
-    } else {
-      setShowErrorIcon(false);
-    }
-  }, [errorText]);
+  const [isFocused, setIsFocused] = useState(false);
+  const [showErrorIcon, setShowErrorIcon] = useState(!!errorText?.length);
 
-  useEffect(() => {
-    if (defaultShowSupportingText) {
-      setShowSupportingText(defaultShowSupportingText);
-    } else {
-      if (supportingText?.length) {
-        setShowSupportingText(true);
-      } else {
-        setShowSupportingText(false);
-      }
-    }
-  }, [showSupportingText, supportingText]);
+  const hasSupportingText =
+    showSupportingText ?? (!!errorText?.length || !!supportingText?.length);
 
   useEffect(() => {
-    if (isFocused) {
-      setShowErrorIcon(false);
-    }
-  }, [isFocused]);
+    setShowErrorIcon(!!errorText?.length);
+  }, [errorText]);
 
-  const inputRef = React.useRef<HTMLInputElement & HTMLTextAreaElement>(null);
+  const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);
 
   const focusInput = () => {
     if (inputRef.current && !isFocused) {
@@ -87,28 +70,34 @@ export const TextField = ({
 
   const handleOnFocus = () => {
     setIsFocused(true);
+    setShowErrorIcon(false);
   };
 
   const handleChange = (
-    event: React.ChangeEvent<HTMLInputElement & HTMLTextAreaElement>,
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
     const newValue = event.target.value;
-    setValue(newValue); // Update local state
+
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
 
     setShowErrorIcon(false);
 
-    // If external onChange prop is provided, call it with the new value
-    if (typeof onChange === 'function') {
-      onChange(newValue);
+    if (onChange) {
+      onChange(event);
     }
   };
 
   const handleBlur = () => {
     setIsFocused(false);
+    if (errorText?.length) {
+      setShowErrorIcon(true);
+    }
   };
 
   const styles = useTextFieldStyle({
-    showSupportingText,
+    showSupportingText: hasSupportingText,
     isFocused,
     showErrorIcon,
     disabled,
@@ -124,34 +113,26 @@ export const TextField = ({
     trailingIcon,
     variant,
     errorText,
-    value,
+    value: String(value),
     suffix,
-    textLine,
+    multiline,
   });
 
-  const [uuid] = useState(uuidv4());
+  const TextComponent = multiline ? TextareaAutosize : 'input';
+  const textComponentProps = multiline ? {} : { type };
 
-  let textComponentProps: object;
-  let TextComponent;
-  switch (textLine) {
-    case 'multiLine':
-      TextComponent = TextareaAutosize;
-      textComponentProps = {};
-      break;
-    case 'textAreas':
-      TextComponent = 'textarea';
-      textComponentProps = {};
-      break;
-    case 'singleLine':
-    default:
-      TextComponent = 'input';
-      textComponentProps = { type: type };
-      break;
-  }
+  const isFloating =
+    isFocused || (typeof value === 'string' && value.length > 0);
+  const showLegend = isFloating && variant === 'outlined';
+  const showLabel = !showLegend;
 
   return (
-    <div className={styles.textField} {...restProps}>
-      <fieldset onClick={focusInput} className={styles.content}>
+    <div className={styles.textField} style={style}>
+      <fieldset
+        onClick={focusInput}
+        className={styles.content}
+        role="presentation"
+      >
         <div className={styles.stateLayer}></div>
         {leadingIcon && (
           <div className={styles.leadingIcon}>
@@ -163,59 +144,64 @@ export const TextField = ({
           </div>
         )}
 
-        {!((!isFocused && !value.length) || variant == 'filled') && (
-          <motion.legend
-            variants={{
-              hidden: { width: 0, padding: 0 },
-              visible: { width: 'auto', padding: '0 8px' },
-            }}
-            initial={'hidden'}
-            animate={!(!isFocused && !value.length) ? 'visible' : 'hidden'}
-            className={'max-w-full ml-2 px-2 text-body-small h-0'}
-            transition={{ duration: 0.2 }}
-          >
-            <span className={'transform inline-flex -translate-y-1/2'}>
-              <motion.span
-                className={styles.label}
-                transition={{ duration: 0.3 }}
-                layoutId={uuid}
-              >
-                {label}
-              </motion.span>
-            </span>
-          </motion.legend>
-        )}
+        <motion.legend
+          aria-hidden="true"
+          variants={{
+            hidden: { width: 0, padding: 0 },
+            visible: { width: 'auto', padding: '0 8px' },
+          }}
+          initial={showLegend ? 'visible' : 'hidden'}
+          animate={showLegend ? 'visible' : 'hidden'}
+          className={
+            'max-w-full ml-2 px-2 text-body-small h-0 overflow-hidden whitespace-nowrap'
+          }
+          transition={{ duration: 0.2 }}
+        >
+          <span className={'transform inline-flex -translate-y-1/2 opacity-0'}>
+            {label}
+          </span>
+        </motion.legend>
+
         <div className={'flex-1 relative'}>
-          {((!isFocused && !value.length) || variant == 'filled') && (
+          {showLabel && (
             <motion.label
-              htmlFor={name}
+              htmlFor={id}
               className={classNames(
-                'absolute left-4  transition-all duration-300',
+                'absolute left-4  transition-all duration-300 pointer-events-none',
                 {
-                  'text-body-small top-2':
-                    variant == 'filled' && !(!isFocused && !value.length),
+                  'text-body-small top-2': variant == 'filled' && isFloating,
                   'text-body-large top-1/2 transform -translate-y-1/2': !(
-                    variant == 'filled' && !(!isFocused && !value.length)
+                    variant == 'filled' && isFloating
                   ),
                 },
               )}
               transition={{ duration: 0.3 }}
+              layoutId={variant === 'outlined' ? `${id}-label` : undefined}
             >
-              <motion.span
-                className={styles.label}
-                transition={{ duration: 0.3 }}
-                layoutId={variant == 'outlined' ? uuid : undefined}
-              >
-                {label}
-              </motion.span>
+              <span className={styles.label}>{label}</span>
+            </motion.label>
+          )}
+
+          {showLegend && (
+            <motion.label
+              htmlFor={id}
+              className={classNames(
+                'absolute left-2 -top-3 px-1 text-body-small z-10',
+                styles.label,
+              )}
+              layoutId={`${id}-label`}
+              transition={{ duration: 0.3 }}
+            >
+              {label}
             </motion.label>
           )}
+
           <TextComponent
-            ref={inputRef}
+            ref={inputRef as any}
             value={value}
             onChange={handleChange}
             className={styles.input}
-            id={name}
+            id={id}
             name={name}
             placeholder={isFocused ? (placeholder ?? undefined) : ''}
             onFocus={handleOnFocus}
@@ -223,8 +209,9 @@ export const TextField = ({
             disabled={disabled}
             autoComplete={autoComplete}
             aria-invalid={!!errorText?.length}
-            aria-label={label}
+            aria-describedby={hasSupportingText ? helperTextId : undefined}
             {...textComponentProps}
+            {...(restProps as any)}
           />
         </div>
 
@@ -265,8 +252,8 @@ export const TextField = ({
           </div>
         )}
       </fieldset>
-      {showSupportingText && (
-        <p className={styles.supportingText}>
+      {hasSupportingText && (
+        <p className={styles.supportingText} id={helperTextId}>
           {errorText?.length
             ? errorText
             : supportingText?.length

package/src/lib/components/index.ts

@@ -3,6 +3,7 @@ export * from './Card';
 export * from './Carousel';
 export * from './CarouselItem';
 export * from './CarouselItem';
+export * from './Checkbox';
 export * from './Chip';
 export * from './Chips';
 export * from './Divider';
@@ -24,3 +25,4 @@ export * from './TextField';
 export * from './NavigationRailItem';
 export * from './NavigationRail';
 export * from './Tooltip';
+export * from './DatePicker';

package/src/lib/effects/State.tsx

@@ -18,6 +18,7 @@ export interface StateInterface {
       | 'state-layer';
     className?: string;
     style?: React.CSSProperties;
+    children?: React.ReactNode;
   };
   states: { isClient: boolean };
   elements: ['stateLayer'];
@@ -27,6 +28,7 @@ export const State = ({
   style,
   colorName,
   stateClassName = 'state-ripple-group',
+  children,
   className,
 }: ReactProps<StateInterface>) => {
   const ref = useRef<HTMLDivElement>(null);
@@ -67,6 +69,7 @@ export const State = ({
       }}
     >
       {isClient && <RippleEffect triggerRef={groupStateRef} />}
+      {children}
     </div>
   );
 };
@@ -76,8 +79,8 @@ const cardConfig: ClassNameComponent<StateInterface> = ({
   stateClassName,
 }) => ({
   stateLayer: classNames([
-    stateClassName,
     'w-full top-0 left-0 h-full absolute pointer-events-none overflow-hidden',
+    stateClassName,
   ]),
 });
 

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

@@ -4,7 +4,7 @@ export interface CardInterface {
   type: 'div';
   props: {
     variant?: 'outlined' | 'elevated' | 'filled';
-    isInteractive?: boolean;
+    interactive?: boolean;
     children: ReactNode;
   };
   elements: ['card', 'stateLayer'];

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';
   autoComplete?: 'on' | 'off' | string;
-  textLine?: 'singleLine' | 'multiLine' | 'textAreas';
+  multiline?: boolean;
 };
 export type TextFieldStates = {
   isFocused: boolean;

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 shadow-sm 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/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',