@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/TimeField.tsx

@@ -14,18 +14,20 @@ import {
   useContext,
   For,
   Show,
-} from 'solid-js';
+} from "solid-js";
 import {
   createTimeField,
+  createTimeSegment,
   type AriaTimeFieldProps,
-} from '@proyecto-viviana/solidaria';
+} from "@proyecto-viviana/solidaria";
 import {
   createTimeFieldState,
+  access,
   type TimeFieldState,
   type TimeFieldStateProps,
   type TimeSegment as TimeSegmentType,
   type TimeValue,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -34,11 +36,9 @@ import {
   useRenderProps,
   dataAttr,
   useIsHydrated,
-} from './utils';
-
-// ============================================
-// TYPES
-// ============================================
+} from "./utils";
+import { HiddenTimeInput } from "./HiddenTimeInput";
+import { FormContext, type FormProps } from "./Form";
 
 export interface TimeFieldRenderProps {
   /** Whether the field is disabled. */
@@ -52,8 +52,9 @@ export interface TimeFieldRenderProps {
 }
 
 export interface TimeFieldProps<T extends TimeValue = TimeValue>
-  extends Omit<AriaTimeFieldProps, 'id' | 'isDisabled' | 'isReadOnly' | 'isRequired'>,
-    Omit<TimeFieldStateProps<T>, 'locale'>,
+  extends
+    Omit<AriaTimeFieldProps, "id" | "isDisabled" | "isReadOnly" | "isRequired">,
+    Omit<TimeFieldStateProps<T>, "locale">,
     SlotProps {
   /** The children of the component. */
   children?: JSX.Element | ((segment: TimeSegmentType) => JSX.Element);
@@ -89,7 +90,7 @@ export interface TimeSegmentRenderProps {
   /** Whether the segment is a placeholder. */
   isPlaceholder: boolean;
   /** The segment type. */
-  type: TimeSegmentType['type'];
+  type: TimeSegmentType["type"];
   /** The text to display. */
   text: string;
 }
@@ -105,23 +106,77 @@ export interface TimeSegmentProps extends SlotProps {
   style?: StyleOrFunction<TimeSegmentRenderProps>;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
+export interface TimeFieldContextValue {
+  state: TimeFieldState<TimeValue>;
+  aria: {
+    labelProps: Record<string, unknown>;
+    inputProps: Record<string, unknown>;
+    descriptionProps: Record<string, unknown>;
+    errorMessageProps: Record<string, unknown>;
+  };
+}
 
-export const TimeFieldContext = createContext<TimeFieldState<TimeValue> | null>(null);
+export const TimeFieldContext = createContext<TimeFieldContextValue | null>(null);
+export const TimeFieldStateContext = createContext<TimeFieldState<TimeValue> | null>(null);
 
-export function useTimeFieldContext(): TimeFieldState<TimeValue> {
+function withFormValidationBehavior<P extends object>(props: P, formContext: FormProps | null): P {
+  if (!formContext?.validationBehavior) {
+    return props;
+  }
+
+  return new Proxy(props, {
+    get(target, property, receiver) {
+      const localValue = Reflect.get(target, property, receiver);
+      if (property === "validationBehavior" && localValue === undefined) {
+        return formContext.validationBehavior;
+      }
+
+      return localValue;
+    },
+    has(target, property) {
+      return (
+        Reflect.has(target, property) ||
+        (property === "validationBehavior" && formContext.validationBehavior !== undefined)
+      );
+    },
+    ownKeys(target) {
+      const keys = new Set(Reflect.ownKeys(target));
+      if (formContext.validationBehavior !== undefined) {
+        keys.add("validationBehavior");
+      }
+
+      return Array.from(keys);
+    },
+    getOwnPropertyDescriptor(target, property) {
+      const descriptor = Reflect.getOwnPropertyDescriptor(target, property);
+      if (descriptor) {
+        return descriptor;
+      }
+
+      if (property === "validationBehavior" && formContext.validationBehavior !== undefined) {
+        return {
+          enumerable: true,
+          configurable: true,
+          get: () => formContext.validationBehavior,
+        };
+      }
+
+      return undefined;
+    },
+  });
+}
+
+function useTimeFieldContextValue(): TimeFieldContextValue {
   const context = useContext(TimeFieldContext);
   if (!context) {
-    throw new Error('TimeField components must be used within a TimeField');
+    throw new Error("TimeField components must be used within a TimeField");
   }
   return context;
 }
 
-// ============================================
-// TIME FIELD COMPONENT
-// ============================================
+export function useTimeFieldContext(): TimeFieldState<TimeValue> {
+  return useTimeFieldContextValue().state;
+}
 
 /**
  * A time field allows users to enter and edit time values using a keyboard.
@@ -136,57 +191,75 @@ export function useTimeFieldContext(): TimeFieldState<TimeValue> {
  * </TimeField>
  * ```
  */
-export function TimeField<T extends TimeValue = TimeValue>(
-  props: TimeFieldProps<T>
-): JSX.Element {
+export function TimeField<T extends TimeValue = TimeValue>(props: TimeFieldProps<T>): JSX.Element {
   // Use hydration-safe pattern for client-only rendering
   const isHydrated = useIsHydrated();
+  const formContext = useContext(FormContext);
 
   return (
     <Show
       when={isHydrated()}
-      fallback={<div class="solidaria-TimeField solidaria-TimeField--placeholder" aria-hidden="true" />}
+      fallback={
+        <div class="solidaria-TimeField solidaria-TimeField--placeholder" aria-hidden="true" />
+      }
     >
-      <TimeFieldInner {...props} />
+      <TimeFieldInner {...props} __formContext={formContext} />
     </Show>
   );
 }
 
+type TimeFieldInnerProps<T extends TimeValue = TimeValue> = TimeFieldProps<T> & {
+  __formContext?: FormProps | null;
+};
+
 /**
  * Internal TimeField component that renders after client mount.
  */
 function TimeFieldInner<T extends TimeValue = TimeValue>(
-  props: TimeFieldProps<T>
+  props: TimeFieldInnerProps<T>,
 ): JSX.Element {
+  const formContext = props.__formContext ?? useContext(FormContext);
+  const mergedProps = withFormValidationBehavior(props, formContext);
   const [local, stateProps, rest] = splitProps(
-    props,
-    ['children', 'class', 'style', 'slot'],
+    mergedProps,
+    ["children", "class", "style", "slot", "__formContext"],
     [
-      'value',
-      'defaultValue',
-      'onChange',
-      'minValue',
-      'maxValue',
-      'isDisabled',
-      'isReadOnly',
-      'isRequired',
-      'locale',
-      'granularity',
-      'hourCycle',
-      'validationState',
-      'placeholderValue',
-    ]
+      "value",
+      "defaultValue",
+      "onChange",
+      "minValue",
+      "maxValue",
+      "isInvalid",
+      "isDisabled",
+      "isReadOnly",
+      "isRequired",
+      "locale",
+      "granularity",
+      "hourCycle",
+      "shouldForceLeadingZeros",
+      "validationState",
+      "validationBehavior",
+      "validate",
+      "description",
+      "errorMessage",
+      "placeholderValue",
+    ],
   );
 
   const [fieldRef, setFieldRef] = createSignal<HTMLDivElement | null>(null);
 
-  // Create time field state
   const state = createTimeFieldState(stateProps);
 
-  // Create time field ARIA props
-  const fieldAria = createTimeField(rest, state as unknown as TimeFieldState<TimeValue>, fieldRef);
+  const fieldAria = createTimeField(
+    () => ({
+      ...(rest as Record<string, unknown>),
+      description: stateProps.description,
+      errorMessage: stateProps.errorMessage,
+    }),
+    state as unknown as TimeFieldState<TimeValue>,
+    fieldRef,
+  );
 
-  // Render props values
   const renderValues = createMemo<TimeFieldRenderProps>(() => ({
     isDisabled: state.isDisabled(),
     isReadOnly: state.isReadOnly(),
@@ -194,64 +267,92 @@ function TimeFieldInner<T extends TimeValue = TimeValue>(
     isInvalid: state.isInvalid(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-TimeField',
+      defaultClassName: "solidaria-TimeField",
     },
-    renderValues
+    renderValues,
   );
 
+  const validationBehavior = () =>
+    (stateProps as { validationBehavior?: "aria" | "native" }).validationBehavior ??
+    formContext?.validationBehavior ??
+    "native";
+
   return (
-    <TimeFieldContext.Provider value={state as unknown as TimeFieldState<TimeValue>}>
-      <div
-        ref={setFieldRef}
-        {...fieldAria.fieldProps}
-        class={renderProps.class()}
-        style={renderProps.style()}
-        data-disabled={dataAttr(state.isDisabled())}
-        data-readonly={dataAttr(state.isReadOnly())}
-        data-required={dataAttr(state.isRequired())}
-        data-invalid={dataAttr(state.isInvalid())}
+    <TimeFieldStateContext.Provider value={state as unknown as TimeFieldState<TimeValue>}>
+      <TimeFieldContext.Provider
+        value={{
+          state: state as unknown as TimeFieldState<TimeValue>,
+          aria: {
+            labelProps: fieldAria.labelProps,
+            inputProps: fieldAria.inputProps,
+            descriptionProps: fieldAria.descriptionProps,
+            errorMessageProps: fieldAria.errorMessageProps,
+          },
+        }}
       >
-        {props.children as JSX.Element}
-      </div>
-    </TimeFieldContext.Provider>
+        <div
+          ref={setFieldRef}
+          {...fieldAria.fieldProps}
+          class={renderProps.class()}
+          style={renderProps.style()}
+          data-disabled={dataAttr(state.isDisabled())}
+          data-readonly={dataAttr(state.isReadOnly())}
+          data-required={dataAttr(state.isRequired())}
+          data-invalid={dataAttr(state.isInvalid())}
+        >
+          {local.children as JSX.Element}
+        </div>
+        <Show when={(rest as Record<string, unknown>).name}>
+          <HiddenTimeInput
+            name={(rest as Record<string, unknown>).name as string | undefined}
+            form={(rest as Record<string, unknown>).form as string | undefined}
+            value={state.value()}
+            autoComplete={(rest as Record<string, unknown>).autoComplete as string | undefined}
+            isDisabled={state.isDisabled()}
+            isRequired={state.isRequired()}
+            validationBehavior={validationBehavior()}
+            validationState={state}
+            focus={() => {
+              fieldRef()?.querySelector<HTMLElement>('[role="spinbutton"]')?.focus();
+            }}
+            minValue={access(stateProps.minValue) as TimeValue | undefined}
+            maxValue={access(stateProps.maxValue) as TimeValue | undefined}
+            granularity={state.granularity}
+          />
+        </Show>
+      </TimeFieldContext.Provider>
+    </TimeFieldStateContext.Provider>
   );
 }
 
-// ============================================
-// TIME INPUT COMPONENT
-// ============================================
-
 /**
  * The input area containing time segments.
  */
 export function TimeInput(props: TimeInputProps): JSX.Element {
-  const state = useTimeFieldContext();
+  const { state, aria } = useTimeFieldContextValue();
   const [isFocused, setIsFocused] = createSignal(false);
 
-  // Render props values
   const renderValues = createMemo<TimeInputRenderProps>(() => ({
     isDisabled: state.isDisabled(),
     isFocused: isFocused(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: props.class,
       style: props.style,
-      defaultClassName: 'solidaria-TimeInput',
+      defaultClassName: "solidaria-TimeInput",
     },
-    renderValues
+    renderValues,
   );
 
   return (
     <div
-      role="presentation"
+      {...aria.inputProps}
       class={renderProps.class()}
       style={renderProps.style()}
       data-disabled={dataAttr(state.isDisabled())}
@@ -259,172 +360,59 @@ export function TimeInput(props: TimeInputProps): JSX.Element {
       onFocusIn={() => setIsFocused(true)}
       onFocusOut={() => setIsFocused(false)}
     >
-      <For each={state.segments()}>
-        {(segment) => props.children?.(segment)}
-      </For>
+      <For each={state.segments()}>{(segment) => props.children?.(segment)}</For>
     </div>
   );
 }
 
-// ============================================
-// TIME SEGMENT COMPONENT
-// ============================================
-
 /**
  * A segment of a time field (hour, minute, second, AM/PM).
  */
 export function TimeSegment(props: TimeSegmentProps): JSX.Element {
   const state = useTimeFieldContext();
-  const [_segmentRef, setSegmentRef] = createSignal<HTMLDivElement | null>(null);
-
-  // Create segment ARIA props
-  // We use a simplified version for time segments
-  const [isFocused, setIsFocused] = createSignal(false);
-  const [enteredKeys, setEnteredKeys] = createSignal('');
-
-  const isEditable = createMemo(() => {
-    const seg = props.segment;
-    return seg.isEditable && !state.isDisabled() && !state.isReadOnly();
-  });
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (!isEditable()) return;
-
-    const seg = props.segment;
-    const type = seg.type;
-
-    if (type === 'literal') return;
-
-    switch (e.key) {
-      case 'ArrowUp':
-        e.preventDefault();
-        state.incrementSegment(type);
-        break;
-      case 'ArrowDown':
-        e.preventDefault();
-        state.decrementSegment(type);
-        break;
-      case 'Backspace':
-      case 'Delete':
-        e.preventDefault();
-        state.clearSegment(type);
-        setEnteredKeys('');
-        break;
-      default:
-        if (/^\d$/.test(e.key)) {
-          e.preventDefault();
-          const newKeys = enteredKeys() + e.key;
-          const numValue = parseInt(newKeys, 10);
-          const maxValue = seg.maxValue ?? 59;
-          const minValue = seg.minValue ?? 0;
-
-          if (numValue <= maxValue) {
-            state.setSegment(type, numValue);
-            if (numValue * 10 > maxValue || newKeys.length >= 2) {
-              setEnteredKeys('');
-            } else {
-              setEnteredKeys(newKeys);
-            }
-          } else {
-            const singleValue = parseInt(e.key, 10);
-            if (singleValue >= minValue && singleValue <= maxValue) {
-              state.setSegment(type, singleValue);
-            }
-            setEnteredKeys(e.key);
-          }
-        }
-        break;
-    }
-  };
+  const [segmentRef, setSegmentRef] = createSignal<HTMLDivElement | null>(null);
 
-  const handleFocus = () => {
-    setIsFocused(true);
-    setEnteredKeys('');
-  };
-
-  const handleBlur = () => {
-    setIsFocused(false);
-    setEnteredKeys('');
-  };
-
-  // Segment props
-  const segmentProps = createMemo(() => {
-    const seg = props.segment;
-    const type = seg.type;
-
-    if (type === 'literal') {
-      return {
-        'aria-hidden': true,
-      };
-    }
-
-    return {
-      role: 'spinbutton' as const,
-      tabIndex: isEditable() ? 0 : -1,
-      'aria-label': getTimeSegmentLabel(type),
-      'aria-valuenow': seg.value,
-      'aria-valuemin': seg.minValue,
-      'aria-valuemax': seg.maxValue,
-      'aria-valuetext': seg.isPlaceholder ? seg.placeholder : seg.text,
-      'aria-readonly': state.isReadOnly() || undefined,
-      'aria-disabled': state.isDisabled() || undefined,
-      'aria-invalid': state.isInvalid() || undefined,
-      contentEditable: isEditable(),
-      inputMode: 'numeric' as const,
-      autoCorrect: 'off',
-      enterKeyHint: 'next' as const,
-      spellCheck: false,
-      onKeyDown: handleKeyDown,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onMouseDown: (e: MouseEvent) => {
-        e.preventDefault();
-      },
-    };
-  });
-
-  const text = createMemo(() => {
-    const seg = props.segment;
-    return seg.isPlaceholder ? seg.placeholder : seg.text;
-  });
+  const segmentAria = createTimeSegment(
+    { segment: props.segment },
+    state as unknown as TimeFieldState,
+    segmentRef,
+  );
 
-  // Render props values
   const renderValues = createMemo<TimeSegmentRenderProps>(() => ({
-    isFocused: isFocused(),
-    isEditable: isEditable(),
-    isPlaceholder: props.segment.isPlaceholder,
+    isFocused: segmentAria.isFocused,
+    isEditable: segmentAria.isEditable,
+    isPlaceholder: segmentAria.isPlaceholder,
     type: props.segment.type,
-    text: text(),
+    text: segmentAria.text,
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: props.class,
       style: props.style,
-      defaultClassName: 'solidaria-TimeSegment',
+      defaultClassName: "solidaria-TimeSegment",
     },
-    renderValues
+    renderValues,
   );
 
   // Determine children content - avoid Show for SSR hydration compatibility
   const getChildren = () => {
-    if (typeof props.children === 'function') {
+    if (typeof props.children === "function") {
       return renderProps.renderChildren();
     }
-    return text();
+    return segmentAria.text;
   };
 
   return (
     <div
       ref={setSegmentRef}
-      {...segmentProps()}
+      {...segmentAria.segmentProps}
       class={renderProps.class()}
       style={renderProps.style()}
-      data-focused={dataAttr(isFocused())}
-      data-editable={dataAttr(isEditable())}
-      data-placeholder={dataAttr(props.segment.isPlaceholder)}
+      data-focused={dataAttr(segmentAria.isFocused)}
+      data-editable={dataAttr(segmentAria.isEditable)}
+      data-placeholder={dataAttr(segmentAria.isPlaceholder)}
       data-type={props.segment.type}
     >
       {getChildren()}
@@ -432,24 +420,46 @@ export function TimeSegment(props: TimeSegmentProps): JSX.Element {
   );
 }
 
-// ============================================
-// HELPER FUNCTIONS
-// ============================================
-
-function getTimeSegmentLabel(type: TimeSegmentType['type']): string {
-  switch (type) {
-    case 'hour':
-      return 'Hour';
-    case 'minute':
-      return 'Minute';
-    case 'second':
-      return 'Second';
-    case 'dayPeriod':
-      return 'AM/PM';
-    default:
-      return '';
-  }
+export interface TimeFieldLabelProps {
+  children?: JSX.Element;
+  class?: string;
+}
+
+export function TimeFieldLabel(props: TimeFieldLabelProps): JSX.Element {
+  const { aria } = useTimeFieldContextValue();
+  return (
+    <span {...aria.labelProps} class={props.class}>
+      {props.children}
+    </span>
+  );
+}
+
+export interface TimeFieldDescriptionProps {
+  children?: JSX.Element;
+  class?: string;
+}
+
+export function TimeFieldDescription(props: TimeFieldDescriptionProps): JSX.Element {
+  const { aria } = useTimeFieldContextValue();
+  return (
+    <p {...aria.descriptionProps} class={props.class}>
+      {props.children}
+    </p>
+  );
+}
+
+export interface TimeFieldErrorMessageProps {
+  children?: JSX.Element;
+  class?: string;
+}
+
+export function TimeFieldErrorMessage(props: TimeFieldErrorMessageProps): JSX.Element {
+  const { aria } = useTimeFieldContextValue();
+  return (
+    <p {...aria.errorMessageProps} class={props.class}>
+      {props.children}
+    </p>
+  );
 }
 
-// Re-export types
 export type { TimeFieldState, TimeSegmentType, TimeValue };