@proyecto-viviana/solidaria 0.4.0 → 0.4.1

package/src/datepicker/createDisplayNames.ts

@@ -0,0 +1,45 @@
+/**
+ * createDisplayNames hook for Solidaria
+ *
+ * Returns an `Intl.DisplayNames`-compatible object for the `dateTimeField` type,
+ * falling back to a dictionary-backed polyfill in engines that support
+ * `Intl.DisplayNames` but not the v2 `dateTimeField` type. Port of
+ * @react-aria/datepicker `useDisplayNames`.
+ */
+
+import { createMemo, type Accessor } from "solid-js";
+import { useLocale } from "../i18n";
+import { datePickerDictionary } from "./intl";
+
+export interface DisplayNames {
+  of(field: string): string;
+}
+
+class DisplayNamesPolyfill implements DisplayNames {
+  constructor(
+    private locale: string,
+    private dictionary: typeof datePickerDictionary,
+  ) {}
+
+  of(field: string): string {
+    return this.dictionary.getStringForLocale(field, this.locale) as unknown as string;
+  }
+}
+
+/**
+ * Returns an accessor to a localized `DisplayNames` instance for date field names.
+ */
+export function createDisplayNames(): Accessor<DisplayNames> {
+  const localeAccessor = useLocale();
+
+  return createMemo(() => {
+    const locale = localeAccessor().locale;
+    // Try to use Intl.DisplayNames if possible. It may be supported in browsers, but not support the
+    // dateTimeField type as that was only added in v2. https://github.com/tc39/intl-displaynames-v2
+    try {
+      return new Intl.DisplayNames(locale, { type: "dateTimeField" }) as unknown as DisplayNames;
+    } catch {
+      return new DisplayNamesPolyfill(locale, datePickerDictionary);
+    }
+  });
+}

package/src/datepicker/createTimeField.ts

@@ -1,158 +1,65 @@
 /**
  * createTimeField hook for Solidaria
  *
- * Provides the behavior and accessibility implementation for a time field component.
- * Based on @react-aria/datepicker useTimeField
+ * Faithful port of `@react-aria/datepicker` `useTimeField`, which is a thin
+ * wrapper over `useDateField`: it delegates entirely to the date-field behavior
+ * and only rewrites `inputProps.value` to the value in the `Time` domain
+ * (`state.timeValue`) so the hidden form input submits e.g. "09:30:00" rather
+ * than the anchored `CalendarDateTime` string. TimeField reuses the certified
+ * DateField segment/group behavior wholesale — there is no parallel time hook.
  */
 
-import { createMemo } from "solid-js";
-import { createId } from "../ssr";
-import { createLabel } from "../label/createLabel";
 import { access, type MaybeAccessor } from "../utils/reactivity";
-import { mergeProps } from "../utils/mergeProps";
-import type { TimeFieldState, TimeSegment, TimeValue } from "@proyecto-viviana/solid-stately";
+import {
+  createDateField,
+  type AriaDateFieldProps,
+  type DateFieldAria,
+} from "./createDateField";
+import type { TimeFieldState, TimeValue } from "@proyecto-viviana/solid-stately";
 
-export interface AriaTimeFieldProps {
-  /** An ID for the time field. */
-  id?: string;
-  /** A visible label for the time field. */
-  label?: string;
-  /** An accessible label for the time field. */
-  "aria-label"?: string;
-  /** The ID of an element that labels the time field. */
-  "aria-labelledby"?: string;
-  /** The ID of an element that describes the time field. */
-  "aria-describedby"?: string;
-  /** Whether the time field is disabled. */
-  isDisabled?: boolean;
-  /** Whether the time field is read-only. */
-  isReadOnly?: boolean;
-  /** Whether the time field is required. */
-  isRequired?: boolean;
-  /** Whether the time field is invalid. */
-  isInvalid?: boolean;
-  /** Description text. */
-  description?: string;
-  /** Error message. */
-  errorMessage?: string;
-  /** The name of the input element, used when submitting an HTML form. */
-  name?: string;
-  /** The id of the form the hidden input belongs to. */
-  form?: string;
-  /** Describes the autocomplete behavior for the hidden input. */
-  autoComplete?: string;
-}
-
-export interface TimeFieldAria {
-  /** Props for the label element. */
-  labelProps: Record<string, unknown>;
-  /** Props for the field container element. */
-  fieldProps: Record<string, unknown>;
-  /** Props for the input container (holds segments). */
-  inputProps: Record<string, unknown>;
-  /** Props for the description element. */
-  descriptionProps: Record<string, unknown>;
-  /** Props for the error message element. */
-  errorMessageProps: Record<string, unknown>;
-  /** The segments to render. */
-  segments: TimeSegment[];
-}
+export type AriaTimeFieldProps = AriaDateFieldProps;
+export type TimeFieldAria = DateFieldAria;
 
 /**
- * Provides the behavior and accessibility implementation for a time field component.
+ * Provides the behavior and accessibility implementation for a time field.
  */
 export function createTimeField<T extends TimeFieldState<TimeValue>>(
   props: MaybeAccessor<AriaTimeFieldProps>,
   state: T,
-  _ref?: () => HTMLElement | null,
+  ref: () => HTMLElement | null,
 ): TimeFieldAria {
-  const getProps = () => access(props);
-  const id = createId(getProps().id);
-  const descriptionId = createId();
-  const errorMessageId = createId();
-
-  // Create label handling
-  const { labelProps, fieldProps: labelFieldProps } = createLabel({
-    get label() {
-      return getProps().label;
-    },
-    get "aria-label"() {
-      return getProps()["aria-label"];
-    },
-    get "aria-labelledby"() {
-      return getProps()["aria-labelledby"];
-    },
-    labelElementType: "span",
-  });
-
-  // Build aria-describedby
-  const getAriaDescribedBy = () => {
-    const p = getProps();
-    const ids: string[] = [];
-    if (p["aria-describedby"]) {
-      ids.push(p["aria-describedby"]);
-    }
-    if (p.description) {
-      ids.push(descriptionId);
-    }
-    if ((p.isInvalid || state.isInvalid()) && p.errorMessage) {
-      ids.push(errorMessageId);
-    }
-    return ids.length > 0 ? ids.join(" ") : undefined;
-  };
-
-  // Segments from state
-  const segments = createMemo(() => state.segments());
-
-  // Field container props
-  const fieldProps = createMemo(() => {
-    const p = getProps();
-
-    return mergeProps(labelFieldProps as Record<string, unknown>, {
-      id,
-      role: "group",
-      "aria-disabled": p.isDisabled || state.isDisabled() || undefined,
-      "aria-readonly": p.isReadOnly || state.isReadOnly() || undefined,
-      "aria-required": p.isRequired || state.isRequired() || undefined,
-      "aria-invalid": p.isInvalid || state.isInvalid() || undefined,
-      "aria-describedby": getAriaDescribedBy(),
-    });
-  });
-
-  // Input container props
-  const inputProps = createMemo(() => ({
-    role: "presentation",
-  }));
-
-  // Description props
-  const descriptionProps = createMemo(() => ({
-    id: descriptionId,
-  }));
-
-  // Error message props
-  const errorMessageProps = createMemo(() => ({
-    id: errorMessageId,
-    role: "alert",
-  }));
+  // TimeFieldState IS a DateFieldState (plus `timeValue`), so it drives the
+  // certified date-field behavior directly.
+  const res = createDateField(props, state, ref);
 
+  // Delegate every prop bag via getters (spreading would freeze the reactive
+  // getters). Only `inputProps.value` is rewritten to the Time-domain value.
   return {
     get labelProps() {
-      return labelProps as Record<string, unknown>;
+      return res.labelProps;
     },
     get fieldProps() {
-      return fieldProps();
+      return res.fieldProps;
     },
     get inputProps() {
-      return inputProps();
+      // Ignore access() lint: state.timeValue is a plain accessor.
+      void access;
+      return { ...res.inputProps, value: state.timeValue()?.toString() || "" };
     },
     get descriptionProps() {
-      return descriptionProps();
+      return res.descriptionProps;
     },
     get errorMessageProps() {
-      return errorMessageProps();
+      return res.errorMessageProps;
+    },
+    get isInvalid() {
+      return res.isInvalid;
+    },
+    get validationErrors() {
+      return res.validationErrors;
     },
-    get segments() {
-      return segments();
+    get validationDetails() {
+      return res.validationDetails;
     },
   };
 }

package/src/datepicker/index.ts

@@ -1,5 +1,15 @@
 // Date Field
-export { createDateField, type AriaDateFieldProps, type DateFieldAria } from "./createDateField";
+export {
+  createDateField,
+  hookData,
+  roleSymbol,
+  focusManagerSymbol,
+  type AriaDateFieldProps,
+  type DateFieldAria,
+} from "./createDateField";
+
+// Display names (localized date-field segment names)
+export { createDisplayNames, type DisplayNames } from "./createDisplayNames";
 
 // Date Segment
 export {
@@ -8,16 +18,9 @@ export {
   type DateSegmentAria,
 } from "./createDateSegment";
 
-// Time Field
+// Time Field (thin wrapper over createDateField — reuses the DateSegment stack)
 export { createTimeField, type AriaTimeFieldProps, type TimeFieldAria } from "./createTimeField";
 
-// Time Segment
-export {
-  createTimeSegment,
-  type AriaTimeSegmentProps,
-  type TimeSegmentAria,
-} from "./createTimeSegment";
-
 // Date Picker
 export {
   createDatePicker,
@@ -27,11 +30,7 @@ export {
 } from "./createDatePicker";
 
 // Date Picker Group
-export {
-  createDatePickerGroup,
-  type AriaDatePickerGroupProps,
-  type DatePickerGroupAria,
-} from "./createDatePickerGroup";
+export { createDatePickerGroup, type DatePickerGroupState } from "./createDatePickerGroup";
 
 // Date Range Picker
 export {