@proyecto-viviana/solidaria-components 0.3.2 → 0.4.1

package/src/TimeField.tsx

@@ -1,25 +1,29 @@
 /**
  * TimeField component for solidaria-components
  *
- * Pre-wired headless time field component with segment-based editing.
- * Port of react-aria-components/src/TimeField.tsx
+ * Pre-wired headless time field. Faithful port of react-aria-components'
+ * TimeField, which does NOT define its own segment primitives — it reuses
+ * `DateInput`/`DateSegment` (there is no `TimeInput`/`TimeSegment` upstream).
+ * `TimeFieldState` IS a `DateFieldState` (plus `timeValue`), so this component
+ * drives the certified DateField segment/group stack directly: it provides the
+ * shared `DateFieldContext`/`DateFieldStateContext` that `DateInput`/`DateSegment`
+ * read, plus a `TimeFieldContext` for the time-field label/description/error
+ * chrome. Unlike DateField, TimeField renders NO root hidden autofill input (RAC
+ * TimeField renders none); its native-validation `<input>` is still emitted by
+ * the inner DateInput sibling.
  */
 
 import {
   type JSX,
+  type Context,
   createContext,
   createMemo,
   createSignal,
   splitProps,
   useContext,
-  For,
   Show,
 } from "solid-js";
-import {
-  createTimeField,
-  createTimeSegment,
-  type AriaTimeFieldProps,
-} from "@proyecto-viviana/solidaria";
+import { createTimeField, mergeProps, type AriaTimeFieldProps } from "@proyecto-viviana/solidaria";
 import {
   createTimeFieldState,
   access,
@@ -29,15 +33,20 @@ import {
   type TimeValue,
 } from "@proyecto-viviana/solid-stately";
 import {
-  type RenderChildren,
+  DateFieldContext,
+  DateFieldStateContext,
+  type DateFieldContextValue,
+} from "./DateField";
+import {
   type ClassNameOrFunction,
   type StyleOrFunction,
   type SlotProps,
   useRenderProps,
   dataAttr,
   useIsHydrated,
+  Provider,
 } from "./utils";
-import { HiddenTimeInput } from "./HiddenTimeInput";
+import { TextContext } from "./Text";
 import { FormContext, type FormProps } from "./Form";
 
 export interface TimeFieldRenderProps {
@@ -66,46 +75,6 @@ export interface TimeFieldProps<T extends TimeValue = TimeValue>
   locale?: string;
 }
 
-export interface TimeInputRenderProps {
-  /** Whether the input is disabled. */
-  isDisabled: boolean;
-  /** Whether the input is focused. */
-  isFocused: boolean;
-}
-
-export interface TimeInputProps extends SlotProps {
-  /** The children of the component (render function receiving segments). */
-  children?: (segment: TimeSegmentType) => JSX.Element;
-  /** The CSS className for the element. */
-  class?: ClassNameOrFunction<TimeInputRenderProps>;
-  /** The inline style for the element. */
-  style?: StyleOrFunction<TimeInputRenderProps>;
-}
-
-export interface TimeSegmentRenderProps {
-  /** Whether the segment is focused. */
-  isFocused: boolean;
-  /** Whether the segment is editable. */
-  isEditable: boolean;
-  /** Whether the segment is a placeholder. */
-  isPlaceholder: boolean;
-  /** The segment type. */
-  type: TimeSegmentType["type"];
-  /** The text to display. */
-  text: string;
-}
-
-export interface TimeSegmentProps extends SlotProps {
-  /** The segment data. */
-  segment: TimeSegmentType;
-  /** The children of the component. A function may be provided to receive render props. */
-  children?: RenderChildren<TimeSegmentRenderProps>;
-  /** The CSS className for the element. */
-  class?: ClassNameOrFunction<TimeSegmentRenderProps>;
-  /** The inline style for the element. */
-  style?: StyleOrFunction<TimeSegmentRenderProps>;
-}
-
 export interface TimeFieldContextValue {
   state: TimeFieldState<TimeValue>;
   aria: {
@@ -185,9 +154,9 @@ export function useTimeFieldContext(): TimeFieldState<TimeValue> {
  * ```tsx
  * <TimeField label="Time">
  *   <Label>Time</Label>
- *   <TimeInput>
- *     {(segment) => <TimeSegment segment={segment} />}
- *   </TimeInput>
+ *   <DateInput>
+ *     {(segment) => <DateSegment segment={segment} />}
+ *   </DateInput>
  * </TimeField>
  * ```
  */
@@ -236,6 +205,7 @@ function TimeFieldInner<T extends TimeValue = TimeValue>(
       "locale",
       "granularity",
       "hourCycle",
+      "hideTimeZone",
       "shouldForceLeadingZeros",
       "validationState",
       "validationBehavior",
@@ -247,14 +217,29 @@ function TimeFieldInner<T extends TimeValue = TimeValue>(
   );
 
   const [fieldRef, setFieldRef] = createSignal<HTMLDivElement | null>(null);
+  // Ref to the hidden validation <input> (the DateInput's `<Input>` sibling).
+  // Mirrors DateField: create it here, hand it to createTimeField below, and
+  // attach it to the same input through the DateFieldContext getter.
+  const [validationInputRef, setValidationInputRef] =
+    createSignal<HTMLInputElement | null>(null);
 
   const state = createTimeFieldState(stateProps);
 
   const fieldAria = createTimeField(
     () => ({
       ...(rest as Record<string, unknown>),
+      // RAC threads these props into both useTimeFieldState and useTimeField;
+      // they live in `stateProps` here, so forward them for the field hook's
+      // aria-disabled and the native validation <input> (type/required).
+      isDisabled: access(stateProps.isDisabled),
+      isReadOnly: access(stateProps.isReadOnly),
+      isRequired: access(stateProps.isRequired),
+      // Standalone default flips the hidden input to type="text" so an empty
+      // required value blocks HTML form submission (mirrors DateField).
+      validationBehavior: stateProps.validationBehavior ?? "native",
       description: stateProps.description,
       errorMessage: stateProps.errorMessage,
+      inputRef: () => validationInputRef() ?? undefined,
     }),
     state as unknown as TimeFieldState<TimeValue>,
     fieldRef,
@@ -276,147 +261,97 @@ function TimeFieldInner<T extends TimeValue = TimeValue>(
     renderValues,
   );
 
-  const validationBehavior = () =>
-    (stateProps as { validationBehavior?: "aria" | "native" }).validationBehavior ??
-    formContext?.validationBehavior ??
-    "native";
-
-  return (
-    <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,
-          },
-        }}
-      >
-        <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>
-  );
-}
-
-/**
- * The input area containing time segments.
- */
-export function TimeInput(props: TimeInputProps): JSX.Element {
-  const { state, aria } = useTimeFieldContextValue();
-  const [isFocused, setIsFocused] = createSignal(false);
-
-  const renderValues = createMemo<TimeInputRenderProps>(() => ({
-    isDisabled: state.isDisabled(),
-    isFocused: isFocused(),
-  }));
-
-  const renderProps = useRenderProps(
-    {
-      class: props.class,
-      style: props.style,
-      defaultClassName: "solidaria-TimeInput",
+  const textSlots = {
+    slots: {
+      get description() {
+        return fieldAria.descriptionProps;
+      },
+      get errorMessage() {
+        return fieldAria.errorMessageProps;
+      },
     },
-    renderValues,
-  );
-
-  return (
-    <div
-      {...aria.inputProps}
-      class={renderProps.class()}
-      style={renderProps.style()}
-      data-disabled={dataAttr(state.isDisabled())}
-      data-focused={dataAttr(isFocused())}
-      onFocusIn={() => setIsFocused(true)}
-      onFocusOut={() => setIsFocused(false)}
-    >
-      <For each={state.segments()}>{(segment) => props.children?.(segment)}</For>
-    </div>
-  );
-}
-
-/**
- * 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);
-
-  const segmentAria = createTimeSegment(
-    { segment: props.segment },
-    state as unknown as TimeFieldState,
-    segmentRef,
-  );
-
-  const renderValues = createMemo<TimeSegmentRenderProps>(() => ({
-    isFocused: segmentAria.isFocused,
-    isEditable: segmentAria.isEditable,
-    isPlaceholder: segmentAria.isPlaceholder,
-    type: props.segment.type,
-    text: segmentAria.text,
-  }));
+  };
 
-  const renderProps = useRenderProps(
-    {
-      children: props.children,
-      class: props.class,
-      style: props.style,
-      defaultClassName: "solidaria-TimeSegment",
+  // The shared context read by the reused DateInput/DateSegment. Read through
+  // getters so consumers see the LIVE memo values (createDescription appends the
+  // value-description id via a deferred effect; a frozen snapshot would miss it).
+  const dateFieldContextValue: DateFieldContextValue = {
+    get state() {
+      return state as unknown as DateFieldContextValue["state"];
+    },
+    aria: {
+      get labelProps() {
+        return fieldAria.labelProps;
+      },
+      // The segment group props (role="group", aria-labelledby, unicode-bidi
+      // isolate, arrow-key nav, focus-within handlers) are routed to the
+      // DateInput element; the outer wrapper stays roleless.
+      get inputProps() {
+        return fieldAria.fieldProps;
+      },
+      // The native validation <input> props (type/hidden/required/onChange under
+      // native validation), rendered as the DateInput's sibling. Thread the
+      // validation-input ref so createTimeField's form-reset/validation wiring
+      // resolves to the mounted element.
+      get hiddenInputProps() {
+        return mergeProps(fieldAria.inputProps, { ref: setValidationInputRef });
+      },
+      get descriptionProps() {
+        return fieldAria.descriptionProps;
+      },
+      get errorMessageProps() {
+        return fieldAria.errorMessageProps;
+      },
     },
-    renderValues,
-  );
-
-  // Determine children content - avoid Show for SSR hydration compatibility
-  const getChildren = () => {
-    if (typeof props.children === "function") {
-      return renderProps.renderChildren();
-    }
-    return segmentAria.text;
   };
 
   return (
-    <div
-      ref={setSegmentRef}
-      {...segmentAria.segmentProps}
-      class={renderProps.class()}
-      style={renderProps.style()}
-      data-focused={dataAttr(segmentAria.isFocused)}
-      data-editable={dataAttr(segmentAria.isEditable)}
-      data-placeholder={dataAttr(segmentAria.isPlaceholder)}
-      data-type={props.segment.type}
-    >
-      {getChildren()}
-    </div>
+    <TimeFieldStateContext.Provider value={state as unknown as TimeFieldState<TimeValue>}>
+      <DateFieldStateContext.Provider
+        value={state as unknown as DateFieldContextValue["state"]}
+      >
+        <DateFieldContext.Provider value={dateFieldContextValue}>
+          <TimeFieldContext.Provider
+            value={{
+              state: state as unknown as TimeFieldState<TimeValue>,
+              aria: {
+                get labelProps() {
+                  return fieldAria.labelProps;
+                },
+                get inputProps() {
+                  return fieldAria.fieldProps;
+                },
+                get descriptionProps() {
+                  return fieldAria.descriptionProps;
+                },
+                get errorMessageProps() {
+                  return fieldAria.errorMessageProps;
+                },
+              },
+            }}
+          >
+            <div
+              ref={setFieldRef}
+              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())}
+            >
+              <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>
+                {local.children as JSX.Element}
+              </Provider>
+            </div>
+            {/*
+              Unlike DateField, TimeField renders NO root hidden autofill input —
+              RAC TimeField renders none (react-aria-components TimeField.mjs). The
+              native-validation <input> is emitted by the inner DateInput sibling.
+            */}
+          </TimeFieldContext.Provider>
+        </DateFieldContext.Provider>
+      </DateFieldStateContext.Provider>
+    </TimeFieldStateContext.Provider>
   );
 }
 
@@ -442,9 +377,9 @@ export interface TimeFieldDescriptionProps {
 export function TimeFieldDescription(props: TimeFieldDescriptionProps): JSX.Element {
   const { aria } = useTimeFieldContextValue();
   return (
-    <p {...aria.descriptionProps} class={props.class}>
+    <span {...aria.descriptionProps} class={props.class}>
       {props.children}
-    </p>
+    </span>
   );
 }
 
@@ -456,9 +391,9 @@ export interface TimeFieldErrorMessageProps {
 export function TimeFieldErrorMessage(props: TimeFieldErrorMessageProps): JSX.Element {
   const { aria } = useTimeFieldContextValue();
   return (
-    <p {...aria.errorMessageProps} class={props.class}>
+    <span {...aria.errorMessageProps} class={props.class}>
       {props.children}
-    </p>
+    </span>
   );
 }
 

package/src/Toast.tsx

@@ -131,6 +131,7 @@ export const ToastContext = createContext<ToastState<ToastContent> | null>(null)
 interface ToastAriaContextValue {
   titleProps: JSX.HTMLAttributes<HTMLElement>;
   descriptionProps: JSX.HTMLAttributes<HTMLElement>;
+  contentProps: JSX.HTMLAttributes<HTMLElement>;
 }
 
 const ToastAriaContext = createContext<ToastAriaContextValue | null>(null);
@@ -265,8 +266,6 @@ export function ToastRegion(props: ToastRegionProps): JSX.Element {
     },
     renderValues,
   );
-  const renderedChildren = createMemo(() => renderProps.renderChildren());
-
   const domProps = createMemo(() =>
     filterDOMProps(rest as Record<string, unknown>, { global: true }),
   );
@@ -317,14 +316,19 @@ export function ToastRegion(props: ToastRegionProps): JSX.Element {
 
   const visibleToasts = () => state()?.visibleToasts() ?? [];
   const hasToasts = () => visibleToasts().length > 0;
+  const hasAuthoredRegionStyle = () => local.class != null || local.style != null;
 
   const regionContent = () => {
     if (!state()) return null;
 
-    // Merge styles - placement styles are base, renderProps.style() overrides
     const mergedStyle = () => {
-      const placement = placementStyles();
       const custom = renderProps.style();
+      // React Aria Components leaves ToastRegion unstyled. Keep this package's
+      // fallback placement only for bare regions so styled layers such as S2 can
+      // own fixed viewport geometry with their generated classes.
+      if (hasAuthoredRegionStyle()) return custom;
+
+      const placement = placementStyles();
       if (!custom) return placement;
       return { ...placement, ...custom } as JSX.CSSProperties;
     };
@@ -340,7 +344,7 @@ export function ToastRegion(props: ToastRegionProps): JSX.Element {
         style={mergedStyle()}
         data-placement={normalizedPlacement()}
       >
-        {renderedChildren()}
+        {renderProps.renderChildren()}
       </div>
     );
   };
@@ -403,7 +407,9 @@ export function Toast(props: ToastProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Toast",
@@ -478,8 +484,10 @@ export function Toast(props: ToastProps): JSX.Element {
 
   const { ref: _ref, ...cleanToastProps } = toastAria.toastProps as Record<string, unknown>;
 
-  // Ensure ARIA title/description IDs are present on rendered sub-components,
-  // even when children are pre-composed outside the Toast provider owner.
+  // Ensure ARIA title/description IDs and the content live-region attributes are
+  // present on rendered sub-components, even when children are pre-composed outside
+  // the Toast provider owner (as DefaultToast does), where useContext can't reach
+  // this owner's ToastAriaContext.
   createEffect(() => {
     if (!toastRef) return;
 
@@ -487,6 +495,7 @@ export function Toast(props: ToastProps): JSX.Element {
     const descriptionId = (toastAria.descriptionProps as Record<string, unknown>).id as
       | string
       | undefined;
+    const contentProps = toastAria.contentProps as Record<string, unknown>;
 
     if (titleId) {
       const titleEl = toastRef.querySelector("[data-solidaria-toast-title]");
@@ -501,11 +510,27 @@ export function Toast(props: ToastProps): JSX.Element {
         descriptionEl.id = descriptionId;
       }
     }
+
+    // Wire the content area as a live region (role="alert" / aria-live="assertive")
+    // so the toast message is announced to screen readers when it appears.
+    const contentEl = toastRef.querySelector("[data-solidaria-toast-content]");
+    if (contentEl instanceof HTMLElement) {
+      const role = contentProps.role as string | undefined;
+      const ariaLive = contentProps["aria-live"] as string | undefined;
+      const ariaAtomic = contentProps["aria-atomic"] as string | undefined;
+      if (role) contentEl.setAttribute("role", role);
+      if (ariaLive) contentEl.setAttribute("aria-live", ariaLive);
+      if (ariaAtomic) contentEl.setAttribute("aria-atomic", ariaAtomic);
+    }
   });
 
   return (
     <ToastAriaContext.Provider
-      value={{ titleProps: toastAria.titleProps, descriptionProps: toastAria.descriptionProps }}
+      value={{
+        titleProps: toastAria.titleProps,
+        descriptionProps: toastAria.descriptionProps,
+        contentProps: toastAria.contentProps,
+      }}
     >
       <div
         ref={toastRef}
@@ -537,10 +562,14 @@ export function ToastTitle(props: ToastTitleProps): JSX.Element {
   const context = useContext(ToastAriaContext);
   const { ref: _ref, ...ariaTitleProps } = (context?.titleProps ?? {}) as Record<string, unknown>;
 
+  // Upstream S2 Toast renders the title via `<Text slot="title">`, and RAC `Text`
+  // defaults to `elementType="span"` — so the title's text-node container is a
+  // `<span>`, not a `<div>`. Mirror that (the D7 contrast descriptor keys on the
+  // container tag name; a `<div>` here diverged on every variant × theme). (parity rule #1/#2)
   return (
-    <div data-solidaria-toast-title="" {...ariaTitleProps} class={props.class} style={props.style}>
+    <span data-solidaria-toast-title="" {...ariaTitleProps} class={props.class} style={props.style}>
       {props.children}
-    </div>
+    </span>
   );
 }
 
@@ -560,14 +589,50 @@ export function ToastDescription(props: ToastDescriptionProps): JSX.Element {
     unknown
   >;
 
+  // Match the title: upstream toast text is rendered in `<span>` elements (RAC
+  // `Text`). The port additionally supports a description (upstream S2 has only a
+  // title); keep it as a `<span>` sibling so its text-node container tag is faithful.
   return (
-    <div
+    <span
       data-solidaria-toast-description=""
       {...ariaDescriptionProps}
       class={props.class}
       style={props.style}
     >
       {props.children}
+    </span>
+  );
+}
+
+export interface ToastContentProps {
+  children: JSX.Element;
+  class?: string;
+  style?: JSX.CSSProperties;
+}
+
+/**
+ * ToastContent wraps the toast message (title + description) in the live region
+ * announced to screen readers. It carries `role="alert"` / `aria-live="assertive"`
+ * from createToast's contentProps so the toast text is announced when it appears.
+ *
+ * It is rendered as a sibling of the close button (never wrapping it) so screen
+ * readers announce the message without reading the close button first.
+ */
+export function ToastContent(props: ToastContentProps): JSX.Element {
+  const context = useContext(ToastAriaContext);
+  const { ref: _ref, ...ariaContentProps } = (context?.contentProps ?? {}) as Record<
+    string,
+    unknown
+  >;
+
+  return (
+    <div
+      data-solidaria-toast-content=""
+      {...ariaContentProps}
+      class={props.class}
+      style={props.style}
+    >
+      {props.children}
     </div>
   );
 }
@@ -633,7 +698,7 @@ export function DefaultToast(props: DefaultToastProps): JSX.Element {
   return (
     <Toast toast={props.toast}>
       <div style={{ display: "flex", "align-items": "flex-start", gap: "12px" }}>
-        <div style={{ flex: 1 }}>
+        <ToastContent style={{ flex: 1 }}>
           <Show when={title()}>
             <ToastTitle style={{ "font-weight": "bold", "margin-bottom": "4px" }}>
               {title()}
@@ -647,7 +712,7 @@ export function DefaultToast(props: DefaultToastProps): JSX.Element {
               {actionLabel()}
             </button>
           </Show>
-        </div>
+        </ToastContent>
         <ToastCloseButton toast={props.toast} />
       </div>
     </Toast>

package/src/ToggleButton.tsx

@@ -118,7 +118,9 @@ export function ToggleButton(props: ToggleButtonProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ToggleButton",

package/src/ToggleButtonGroup.tsx

@@ -95,7 +95,9 @@ export function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ToggleButtonGroup",

package/src/Tooltip.tsx

@@ -574,7 +574,9 @@ function TooltipContent(
     {
       class: props.class,
       style: props.style,
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       defaultClassName: "solidaria-Tooltip",
     },
     values,