@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/TimeField.js

@@ -0,0 +1,372 @@
+import { Provider, dataAttr, useIsHydrated, useRenderProps } from "./utils.js";
+import { TextContext } from "./Text.js";
+import { FormContext } from "./Form.js";
+import { HiddenTimeInput } from "./HiddenTimeInput.js";
+import { createComponent, getNextElement, insert, mergeProps, runHydrationEvents, spread, template, use } from "solid-js/web";
+import { For, Show, createContext, createMemo, createSignal, splitProps, useContext } from "solid-js";
+import { createTimeField, createTimeSegment } from "@proyecto-viviana/solidaria";
+import { access, createTimeFieldState } from "@proyecto-viviana/solid-stately";
+//#region src/TimeField.tsx
+/**
+* TimeField component for solidaria-components
+*
+* Pre-wired headless time field component with segment-based editing.
+* Port of react-aria-components/src/TimeField.tsx
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<div class="solidaria-TimeField solidaria-TimeField--placeholder"aria-hidden=true>`), _tmpl$2 = /*#__PURE__*/ template(`<div>`), _tmpl$3 = /*#__PURE__*/ template(`<span>`), _tmpl$4 = /*#__PURE__*/ template(`<p>`);
+const TimeFieldContext = createContext(null);
+const TimeFieldStateContext = createContext(null);
+function withFormValidationBehavior(props, formContext) {
+	if (!formContext?.validationBehavior) return props;
+	return new Proxy(props, {
+		get(target, property, receiver) {
+			const localValue = Reflect.get(target, property, receiver);
+			if (property === "validationBehavior" && localValue === void 0) return formContext.validationBehavior;
+			return localValue;
+		},
+		has(target, property) {
+			return Reflect.has(target, property) || property === "validationBehavior" && formContext.validationBehavior !== void 0;
+		},
+		ownKeys(target) {
+			const keys = new Set(Reflect.ownKeys(target));
+			if (formContext.validationBehavior !== void 0) 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 !== void 0) return {
+				enumerable: true,
+				configurable: true,
+				get: () => formContext.validationBehavior
+			};
+		}
+	});
+}
+function useTimeFieldContextValue() {
+	const context = useContext(TimeFieldContext);
+	if (!context) throw new Error("TimeField components must be used within a TimeField");
+	return context;
+}
+function useTimeFieldContext() {
+	return useTimeFieldContextValue().state;
+}
+/**
+* A time field allows users to enter and edit time values using a keyboard.
+*
+* @example
+* ```tsx
+* <TimeField label="Time">
+*   <Label>Time</Label>
+*   <TimeInput>
+*     {(segment) => <TimeSegment segment={segment} />}
+*   </TimeInput>
+* </TimeField>
+* ```
+*/
+function TimeField(props) {
+	const isHydrated = useIsHydrated();
+	const formContext = useContext(FormContext);
+	return createComponent(Show, {
+		get when() {
+			return isHydrated();
+		},
+		get fallback() {
+			return getNextElement(_tmpl$);
+		},
+		get children() {
+			return createComponent(TimeFieldInner, mergeProps(props, { __formContext: formContext }));
+		}
+	});
+}
+/**
+* Internal TimeField component that renders after client mount.
+*/
+function TimeFieldInner(props) {
+	const formContext = props.__formContext ?? useContext(FormContext);
+	const [local, stateProps, rest] = splitProps(withFormValidationBehavior(props, formContext), [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"__formContext"
+	], [
+		"value",
+		"defaultValue",
+		"onChange",
+		"minValue",
+		"maxValue",
+		"isInvalid",
+		"isDisabled",
+		"isReadOnly",
+		"isRequired",
+		"locale",
+		"granularity",
+		"hourCycle",
+		"shouldForceLeadingZeros",
+		"validationState",
+		"validationBehavior",
+		"validate",
+		"description",
+		"errorMessage",
+		"placeholderValue"
+	]);
+	const [fieldRef, setFieldRef] = createSignal(null);
+	const state = createTimeFieldState(stateProps);
+	const fieldAria = createTimeField(() => ({
+		...rest,
+		description: stateProps.description,
+		errorMessage: stateProps.errorMessage
+	}), state, fieldRef);
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled(),
+		isReadOnly: state.isReadOnly(),
+		isRequired: state.isRequired(),
+		isInvalid: state.isInvalid()
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-TimeField"
+	}, renderValues);
+	const validationBehavior = () => stateProps.validationBehavior ?? formContext?.validationBehavior ?? "native";
+	const textSlots = { slots: {
+		get description() {
+			return fieldAria.descriptionProps;
+		},
+		get errorMessage() {
+			return fieldAria.errorMessageProps;
+		}
+	} };
+	return createComponent(TimeFieldStateContext.Provider, {
+		value: state,
+		get children() {
+			return createComponent(TimeFieldContext.Provider, {
+				get value() {
+					return {
+						state,
+						aria: {
+							labelProps: fieldAria.labelProps,
+							inputProps: fieldAria.inputProps,
+							descriptionProps: fieldAria.descriptionProps,
+							errorMessageProps: fieldAria.errorMessageProps
+						}
+					};
+				},
+				get children() {
+					return [(() => {
+						var _el$2 = getNextElement(_tmpl$2);
+						use(setFieldRef, _el$2);
+						spread(_el$2, mergeProps(() => fieldAria.fieldProps, {
+							get ["class"]() {
+								return renderProps.class();
+							},
+							get style() {
+								return renderProps.style();
+							},
+							get ["data-disabled"]() {
+								return dataAttr(state.isDisabled());
+							},
+							get ["data-readonly"]() {
+								return dataAttr(state.isReadOnly());
+							},
+							get ["data-required"]() {
+								return dataAttr(state.isRequired());
+							},
+							get ["data-invalid"]() {
+								return dataAttr(state.isInvalid());
+							}
+						}), false, true);
+						insert(_el$2, createComponent(Provider, {
+							values: [[TextContext, textSlots]],
+							get children() {
+								return local.children;
+							}
+						}));
+						runHydrationEvents();
+						return _el$2;
+					})(), createComponent(Show, {
+						get when() {
+							return rest.name;
+						},
+						get children() {
+							return createComponent(HiddenTimeInput, {
+								get name() {
+									return rest.name;
+								},
+								get form() {
+									return rest.form;
+								},
+								get value() {
+									return state.value();
+								},
+								get autoComplete() {
+									return rest.autoComplete;
+								},
+								get isDisabled() {
+									return state.isDisabled();
+								},
+								get isRequired() {
+									return state.isRequired();
+								},
+								get validationBehavior() {
+									return validationBehavior();
+								},
+								validationState: state,
+								focus: () => {
+									fieldRef()?.querySelector("[role=\"spinbutton\"]")?.focus();
+								},
+								get minValue() {
+									return access(stateProps.minValue);
+								},
+								get maxValue() {
+									return access(stateProps.maxValue);
+								},
+								get granularity() {
+									return state.granularity;
+								}
+							});
+						}
+					})];
+				}
+			});
+		}
+	});
+}
+/**
+* The input area containing time segments.
+*/
+function TimeInput(props) {
+	const { state, aria } = useTimeFieldContextValue();
+	const [isFocused, setIsFocused] = createSignal(false);
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled(),
+		isFocused: isFocused()
+	}));
+	const renderProps = useRenderProps({
+		class: props.class,
+		style: props.style,
+		defaultClassName: "solidaria-TimeInput"
+	}, renderValues);
+	return (() => {
+		var _el$3 = getNextElement(_tmpl$2);
+		spread(_el$3, mergeProps(() => aria.inputProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get ["data-disabled"]() {
+				return dataAttr(state.isDisabled());
+			},
+			get ["data-focused"]() {
+				return dataAttr(isFocused());
+			},
+			"onFocusIn": () => setIsFocused(true),
+			"onFocusOut": () => setIsFocused(false)
+		}), false, true);
+		insert(_el$3, createComponent(For, {
+			get each() {
+				return state.segments();
+			},
+			children: (segment) => props.children?.(segment)
+		}));
+		runHydrationEvents();
+		return _el$3;
+	})();
+}
+/**
+* A segment of a time field (hour, minute, second, AM/PM).
+*/
+function TimeSegment(props) {
+	const state = useTimeFieldContext();
+	const [segmentRef, setSegmentRef] = createSignal(null);
+	const segmentAria = createTimeSegment({ segment: props.segment }, state, segmentRef);
+	const renderValues = createMemo(() => ({
+		isFocused: segmentAria.isFocused,
+		isEditable: segmentAria.isEditable,
+		isPlaceholder: segmentAria.isPlaceholder,
+		type: props.segment.type,
+		text: segmentAria.text
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: props.class,
+		style: props.style,
+		defaultClassName: "solidaria-TimeSegment"
+	}, renderValues);
+	const getChildren = () => {
+		if (typeof props.children === "function") return renderProps.renderChildren();
+		return segmentAria.text;
+	};
+	return (() => {
+		var _el$4 = getNextElement(_tmpl$2);
+		use(setSegmentRef, _el$4);
+		spread(_el$4, mergeProps(() => segmentAria.segmentProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get ["data-focused"]() {
+				return dataAttr(segmentAria.isFocused);
+			},
+			get ["data-editable"]() {
+				return dataAttr(segmentAria.isEditable);
+			},
+			get ["data-placeholder"]() {
+				return dataAttr(segmentAria.isPlaceholder);
+			},
+			get ["data-type"]() {
+				return props.segment.type;
+			}
+		}), false, true);
+		insert(_el$4, getChildren);
+		runHydrationEvents();
+		return _el$4;
+	})();
+}
+function TimeFieldLabel(props) {
+	const { aria } = useTimeFieldContextValue();
+	return (() => {
+		var _el$5 = getNextElement(_tmpl$3);
+		spread(_el$5, mergeProps(() => aria.labelProps, { get ["class"]() {
+			return props.class;
+		} }), false, true);
+		insert(_el$5, () => props.children);
+		runHydrationEvents();
+		return _el$5;
+	})();
+}
+function TimeFieldDescription(props) {
+	const { aria } = useTimeFieldContextValue();
+	return (() => {
+		var _el$6 = getNextElement(_tmpl$4);
+		spread(_el$6, mergeProps(() => aria.descriptionProps, { get ["class"]() {
+			return props.class;
+		} }), false, true);
+		insert(_el$6, () => props.children);
+		runHydrationEvents();
+		return _el$6;
+	})();
+}
+function TimeFieldErrorMessage(props) {
+	const { aria } = useTimeFieldContextValue();
+	return (() => {
+		var _el$7 = getNextElement(_tmpl$4);
+		spread(_el$7, mergeProps(() => aria.errorMessageProps, { get ["class"]() {
+			return props.class;
+		} }), false, true);
+		insert(_el$7, () => props.children);
+		runHydrationEvents();
+		return _el$7;
+	})();
+}
+//#endregion
+export { TimeField, TimeFieldContext, TimeFieldDescription, TimeFieldErrorMessage, TimeFieldLabel, TimeFieldStateContext, TimeInput, TimeSegment, useTimeFieldContext };
+
+//# sourceMappingURL=TimeField.js.map

package/dist/TimeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeField.js","names":["JSX","Context","createContext","createMemo","createSignal","splitProps","useContext","For","Show","createTimeField","createTimeSegment","AriaTimeFieldProps","createTimeFieldState","access","TimeFieldState","TimeFieldStateProps","TimeSegment","TimeSegmentType","TimeValue","RenderChildren","ClassNameOrFunction","StyleOrFunction","SlotProps","useRenderProps","dataAttr","useIsHydrated","Provider","TextContext","HiddenTimeInput","FormContext","FormProps","TimeFieldRenderProps","isDisabled","isReadOnly","isRequired","isInvalid","TimeFieldProps","Omit","T","children","Element","segment","class","style","locale","TimeInputRenderProps","isFocused","TimeInputProps","TimeSegmentRenderProps","isEditable","isPlaceholder","type","text","TimeSegmentProps","TimeFieldContextValue","state","aria","labelProps","Record","inputProps","descriptionProps","errorMessageProps","TimeFieldContext","TimeFieldStateContext","withFormValidationBehavior","props","P","formContext","validationBehavior","Proxy","get","target","property","receiver","localValue","Reflect","undefined","has","ownKeys","keys","Set","add","Array","from","getOwnPropertyDescriptor","descriptor","enumerable","configurable","useTimeFieldContextValue","context","Error","useTimeFieldContext","TimeField","isHydrated","_$createComponent","when","fallback","_$getNextElement","_tmpl$","TimeFieldInner","_$mergeProps","__formContext","TimeFieldInnerProps","mergedProps","local","stateProps","rest","fieldRef","setFieldRef","HTMLDivElement","fieldAria","description","errorMessage","renderValues","renderProps","defaultClassName","textSlots","slots","value","_el$2","_tmpl$2","_$use","_$spread","fieldProps","data-disabled","data-readonly","data-required","data-invalid","_$insert","values","_$runHydrationEvents","name","form","autoComplete","validationState","focus","querySelector","HTMLElement","minValue","maxValue","granularity","TimeInput","setIsFocused","_el$3","data-focused","onFocusIn","onFocusOut","each","segments","segmentRef","setSegmentRef","segmentAria","getChildren","renderChildren","_el$4","segmentProps","data-editable","data-placeholder","data-type","TimeFieldLabelProps","TimeFieldLabel","_el$5","_tmpl$3","TimeFieldDescriptionProps","TimeFieldDescription","_el$6","_tmpl$4","TimeFieldErrorMessageProps","TimeFieldErrorMessage","_el$7"],"sources":["../src/TimeField.tsx"],"sourcesContent":["/**\n * TimeField component for solidaria-components\n *\n * Pre-wired headless time field component with segment-based editing.\n * Port of react-aria-components/src/TimeField.tsx\n */\n\nimport {\n  type JSX,\n  type Context,\n  createContext,\n  createMemo,\n  createSignal,\n  splitProps,\n  useContext,\n  For,\n  Show,\n} from \"solid-js\";\nimport {\n  createTimeField,\n  createTimeSegment,\n  type AriaTimeFieldProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n  createTimeFieldState,\n  access,\n  type TimeFieldState,\n  type TimeFieldStateProps,\n  type TimeSegment as TimeSegmentType,\n  type TimeValue,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  dataAttr,\n  useIsHydrated,\n  Provider,\n} from \"./utils\";\nimport { TextContext } from \"./Text\";\nimport { HiddenTimeInput } from \"./HiddenTimeInput\";\nimport { FormContext, type FormProps } from \"./Form\";\n\nexport interface TimeFieldRenderProps {\n  /** Whether the field is disabled. */\n  isDisabled: boolean;\n  /** Whether the field is read-only. */\n  isReadOnly: boolean;\n  /** Whether the field is required. */\n  isRequired: boolean;\n  /** Whether the field is invalid. */\n  isInvalid: boolean;\n}\n\nexport interface TimeFieldProps<T extends TimeValue = TimeValue>\n  extends\n    Omit<AriaTimeFieldProps, \"id\" | \"isDisabled\" | \"isReadOnly\" | \"isRequired\">,\n    Omit<TimeFieldStateProps<T>, \"locale\">,\n    SlotProps {\n  /** The children of the component. */\n  children?: JSX.Element | ((segment: TimeSegmentType) => JSX.Element);\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<TimeFieldRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<TimeFieldRenderProps>;\n  /** The locale to use for formatting. */\n  locale?: string;\n}\n\nexport interface TimeInputRenderProps {\n  /** Whether the input is disabled. */\n  isDisabled: boolean;\n  /** Whether the input is focused. */\n  isFocused: boolean;\n}\n\nexport interface TimeInputProps extends SlotProps {\n  /** The children of the component (render function receiving segments). */\n  children?: (segment: TimeSegmentType) => JSX.Element;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<TimeInputRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<TimeInputRenderProps>;\n}\n\nexport interface TimeSegmentRenderProps {\n  /** Whether the segment is focused. */\n  isFocused: boolean;\n  /** Whether the segment is editable. */\n  isEditable: boolean;\n  /** Whether the segment is a placeholder. */\n  isPlaceholder: boolean;\n  /** The segment type. */\n  type: TimeSegmentType[\"type\"];\n  /** The text to display. */\n  text: string;\n}\n\nexport interface TimeSegmentProps extends SlotProps {\n  /** The segment data. */\n  segment: TimeSegmentType;\n  /** The children of the component. A function may be provided to receive render props. */\n  children?: RenderChildren<TimeSegmentRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<TimeSegmentRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<TimeSegmentRenderProps>;\n}\n\nexport interface TimeFieldContextValue {\n  state: TimeFieldState<TimeValue>;\n  aria: {\n    labelProps: Record<string, unknown>;\n    inputProps: Record<string, unknown>;\n    descriptionProps: Record<string, unknown>;\n    errorMessageProps: Record<string, unknown>;\n  };\n}\n\nexport const TimeFieldContext = createContext<TimeFieldContextValue | null>(null);\nexport const TimeFieldStateContext = createContext<TimeFieldState<TimeValue> | null>(null);\n\nfunction withFormValidationBehavior<P extends object>(props: P, formContext: FormProps | null): P {\n  if (!formContext?.validationBehavior) {\n    return props;\n  }\n\n  return new Proxy(props, {\n    get(target, property, receiver) {\n      const localValue = Reflect.get(target, property, receiver);\n      if (property === \"validationBehavior\" && localValue === undefined) {\n        return formContext.validationBehavior;\n      }\n\n      return localValue;\n    },\n    has(target, property) {\n      return (\n        Reflect.has(target, property) ||\n        (property === \"validationBehavior\" && formContext.validationBehavior !== undefined)\n      );\n    },\n    ownKeys(target) {\n      const keys = new Set(Reflect.ownKeys(target));\n      if (formContext.validationBehavior !== undefined) {\n        keys.add(\"validationBehavior\");\n      }\n\n      return Array.from(keys);\n    },\n    getOwnPropertyDescriptor(target, property) {\n      const descriptor = Reflect.getOwnPropertyDescriptor(target, property);\n      if (descriptor) {\n        return descriptor;\n      }\n\n      if (property === \"validationBehavior\" && formContext.validationBehavior !== undefined) {\n        return {\n          enumerable: true,\n          configurable: true,\n          get: () => formContext.validationBehavior,\n        };\n      }\n\n      return undefined;\n    },\n  });\n}\n\nfunction useTimeFieldContextValue(): TimeFieldContextValue {\n  const context = useContext(TimeFieldContext);\n  if (!context) {\n    throw new Error(\"TimeField components must be used within a TimeField\");\n  }\n  return context;\n}\n\nexport function useTimeFieldContext(): TimeFieldState<TimeValue> {\n  return useTimeFieldContextValue().state;\n}\n\n/**\n * A time field allows users to enter and edit time values using a keyboard.\n *\n * @example\n * ```tsx\n * <TimeField label=\"Time\">\n *   <Label>Time</Label>\n *   <TimeInput>\n *     {(segment) => <TimeSegment segment={segment} />}\n *   </TimeInput>\n * </TimeField>\n * ```\n */\nexport function TimeField<T extends TimeValue = TimeValue>(props: TimeFieldProps<T>): JSX.Element {\n  // Use hydration-safe pattern for client-only rendering\n  const isHydrated = useIsHydrated();\n  const formContext = useContext(FormContext);\n\n  return (\n    <Show\n      when={isHydrated()}\n      fallback={\n        <div class=\"solidaria-TimeField solidaria-TimeField--placeholder\" aria-hidden=\"true\" />\n      }\n    >\n      <TimeFieldInner {...props} __formContext={formContext} />\n    </Show>\n  );\n}\n\ntype TimeFieldInnerProps<T extends TimeValue = TimeValue> = TimeFieldProps<T> & {\n  __formContext?: FormProps | null;\n};\n\n/**\n * Internal TimeField component that renders after client mount.\n */\nfunction TimeFieldInner<T extends TimeValue = TimeValue>(\n  props: TimeFieldInnerProps<T>,\n): JSX.Element {\n  const formContext = props.__formContext ?? useContext(FormContext);\n  const mergedProps = withFormValidationBehavior(props, formContext);\n  const [local, stateProps, rest] = splitProps(\n    mergedProps,\n    [\"children\", \"class\", \"style\", \"slot\", \"__formContext\"],\n    [\n      \"value\",\n      \"defaultValue\",\n      \"onChange\",\n      \"minValue\",\n      \"maxValue\",\n      \"isInvalid\",\n      \"isDisabled\",\n      \"isReadOnly\",\n      \"isRequired\",\n      \"locale\",\n      \"granularity\",\n      \"hourCycle\",\n      \"shouldForceLeadingZeros\",\n      \"validationState\",\n      \"validationBehavior\",\n      \"validate\",\n      \"description\",\n      \"errorMessage\",\n      \"placeholderValue\",\n    ],\n  );\n\n  const [fieldRef, setFieldRef] = createSignal<HTMLDivElement | null>(null);\n\n  const state = createTimeFieldState(stateProps);\n\n  const fieldAria = createTimeField(\n    () => ({\n      ...(rest as Record<string, unknown>),\n      description: stateProps.description,\n      errorMessage: stateProps.errorMessage,\n    }),\n    state as unknown as TimeFieldState<TimeValue>,\n    fieldRef,\n  );\n\n  const renderValues = createMemo<TimeFieldRenderProps>(() => ({\n    isDisabled: state.isDisabled(),\n    isReadOnly: state.isReadOnly(),\n    isRequired: state.isRequired(),\n    isInvalid: state.isInvalid(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-TimeField\",\n    },\n    renderValues,\n  );\n\n  const validationBehavior = () =>\n    (stateProps as { validationBehavior?: \"aria\" | \"native\" }).validationBehavior ??\n    formContext?.validationBehavior ??\n    \"native\";\n\n  const textSlots = {\n    slots: {\n      get description() {\n        return fieldAria.descriptionProps;\n      },\n      get errorMessage() {\n        return fieldAria.errorMessageProps;\n      },\n    },\n  };\n\n  return (\n    <TimeFieldStateContext.Provider value={state as unknown as TimeFieldState<TimeValue>}>\n      <TimeFieldContext.Provider\n        value={{\n          state: state as unknown as TimeFieldState<TimeValue>,\n          aria: {\n            labelProps: fieldAria.labelProps,\n            inputProps: fieldAria.inputProps,\n            descriptionProps: fieldAria.descriptionProps,\n            errorMessageProps: fieldAria.errorMessageProps,\n          },\n        }}\n      >\n        <div\n          ref={setFieldRef}\n          {...fieldAria.fieldProps}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          data-disabled={dataAttr(state.isDisabled())}\n          data-readonly={dataAttr(state.isReadOnly())}\n          data-required={dataAttr(state.isRequired())}\n          data-invalid={dataAttr(state.isInvalid())}\n        >\n          <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>\n            {local.children as JSX.Element}\n          </Provider>\n        </div>\n        <Show when={(rest as Record<string, unknown>).name}>\n          <HiddenTimeInput\n            name={(rest as Record<string, unknown>).name as string | undefined}\n            form={(rest as Record<string, unknown>).form as string | undefined}\n            value={state.value()}\n            autoComplete={(rest as Record<string, unknown>).autoComplete as string | undefined}\n            isDisabled={state.isDisabled()}\n            isRequired={state.isRequired()}\n            validationBehavior={validationBehavior()}\n            validationState={state}\n            focus={() => {\n              fieldRef()?.querySelector<HTMLElement>('[role=\"spinbutton\"]')?.focus();\n            }}\n            minValue={access(stateProps.minValue) as TimeValue | undefined}\n            maxValue={access(stateProps.maxValue) as TimeValue | undefined}\n            granularity={state.granularity}\n          />\n        </Show>\n      </TimeFieldContext.Provider>\n    </TimeFieldStateContext.Provider>\n  );\n}\n\n/**\n * The input area containing time segments.\n */\nexport function TimeInput(props: TimeInputProps): JSX.Element {\n  const { state, aria } = useTimeFieldContextValue();\n  const [isFocused, setIsFocused] = createSignal(false);\n\n  const renderValues = createMemo<TimeInputRenderProps>(() => ({\n    isDisabled: state.isDisabled(),\n    isFocused: isFocused(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      class: props.class,\n      style: props.style,\n      defaultClassName: \"solidaria-TimeInput\",\n    },\n    renderValues,\n  );\n\n  return (\n    <div\n      {...aria.inputProps}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      data-disabled={dataAttr(state.isDisabled())}\n      data-focused={dataAttr(isFocused())}\n      onFocusIn={() => setIsFocused(true)}\n      onFocusOut={() => setIsFocused(false)}\n    >\n      <For each={state.segments()}>{(segment) => props.children?.(segment)}</For>\n    </div>\n  );\n}\n\n/**\n * A segment of a time field (hour, minute, second, AM/PM).\n */\nexport function TimeSegment(props: TimeSegmentProps): JSX.Element {\n  const state = useTimeFieldContext();\n  const [segmentRef, setSegmentRef] = createSignal<HTMLDivElement | null>(null);\n\n  const segmentAria = createTimeSegment(\n    { segment: props.segment },\n    state as unknown as TimeFieldState,\n    segmentRef,\n  );\n\n  const renderValues = createMemo<TimeSegmentRenderProps>(() => ({\n    isFocused: segmentAria.isFocused,\n    isEditable: segmentAria.isEditable,\n    isPlaceholder: segmentAria.isPlaceholder,\n    type: props.segment.type,\n    text: segmentAria.text,\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return props.children;\n      },\n      class: props.class,\n      style: props.style,\n      defaultClassName: \"solidaria-TimeSegment\",\n    },\n    renderValues,\n  );\n\n  // Determine children content - avoid Show for SSR hydration compatibility\n  const getChildren = () => {\n    if (typeof props.children === \"function\") {\n      return renderProps.renderChildren();\n    }\n    return segmentAria.text;\n  };\n\n  return (\n    <div\n      ref={setSegmentRef}\n      {...segmentAria.segmentProps}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      data-focused={dataAttr(segmentAria.isFocused)}\n      data-editable={dataAttr(segmentAria.isEditable)}\n      data-placeholder={dataAttr(segmentAria.isPlaceholder)}\n      data-type={props.segment.type}\n    >\n      {getChildren()}\n    </div>\n  );\n}\n\nexport interface TimeFieldLabelProps {\n  children?: JSX.Element;\n  class?: string;\n}\n\nexport function TimeFieldLabel(props: TimeFieldLabelProps): JSX.Element {\n  const { aria } = useTimeFieldContextValue();\n  return (\n    <span {...aria.labelProps} class={props.class}>\n      {props.children}\n    </span>\n  );\n}\n\nexport interface TimeFieldDescriptionProps {\n  children?: JSX.Element;\n  class?: string;\n}\n\nexport function TimeFieldDescription(props: TimeFieldDescriptionProps): JSX.Element {\n  const { aria } = useTimeFieldContextValue();\n  return (\n    <p {...aria.descriptionProps} class={props.class}>\n      {props.children}\n    </p>\n  );\n}\n\nexport interface TimeFieldErrorMessageProps {\n  children?: JSX.Element;\n  class?: string;\n}\n\nexport function TimeFieldErrorMessage(props: TimeFieldErrorMessageProps): JSX.Element {\n  const { aria } = useTimeFieldContextValue();\n  return (\n    <p {...aria.errorMessageProps} class={props.class}>\n      {props.children}\n    </p>\n  );\n}\n\nexport type { TimeFieldState, TimeSegmentType, TimeValue };\n"],"mappings":"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"}

package/dist/TimeField.jsx

@@ -0,0 +1,224 @@
+import { Provider, dataAttr, useIsHydrated, useRenderProps } from "./utils.jsx";
+import { TextContext } from "./Text.jsx";
+import { FormContext } from "./Form.jsx";
+import { HiddenTimeInput } from "./HiddenTimeInput.jsx";
+import { For, Show, createContext, createMemo, createSignal, splitProps, useContext } from "solid-js";
+import { createTimeField, createTimeSegment } from "@proyecto-viviana/solidaria";
+import { access, createTimeFieldState } from "@proyecto-viviana/solid-stately";
+//#region src/TimeField.tsx
+/**
+* TimeField component for solidaria-components
+*
+* Pre-wired headless time field component with segment-based editing.
+* Port of react-aria-components/src/TimeField.tsx
+*/
+const TimeFieldContext = createContext(null);
+const TimeFieldStateContext = createContext(null);
+function withFormValidationBehavior(props, formContext) {
+	if (!formContext?.validationBehavior) return props;
+	return new Proxy(props, {
+		get(target, property, receiver) {
+			const localValue = Reflect.get(target, property, receiver);
+			if (property === "validationBehavior" && localValue === void 0) return formContext.validationBehavior;
+			return localValue;
+		},
+		has(target, property) {
+			return Reflect.has(target, property) || property === "validationBehavior" && formContext.validationBehavior !== void 0;
+		},
+		ownKeys(target) {
+			const keys = new Set(Reflect.ownKeys(target));
+			if (formContext.validationBehavior !== void 0) 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 !== void 0) return {
+				enumerable: true,
+				configurable: true,
+				get: () => formContext.validationBehavior
+			};
+		}
+	});
+}
+function useTimeFieldContextValue() {
+	const context = useContext(TimeFieldContext);
+	if (!context) throw new Error("TimeField components must be used within a TimeField");
+	return context;
+}
+function useTimeFieldContext() {
+	return useTimeFieldContextValue().state;
+}
+/**
+* A time field allows users to enter and edit time values using a keyboard.
+*
+* @example
+* ```tsx
+* <TimeField label="Time">
+*   <Label>Time</Label>
+*   <TimeInput>
+*     {(segment) => <TimeSegment segment={segment} />}
+*   </TimeInput>
+* </TimeField>
+* ```
+*/
+function TimeField(props) {
+	const isHydrated = useIsHydrated();
+	const formContext = useContext(FormContext);
+	return <Show when={isHydrated()} fallback={<div class="solidaria-TimeField solidaria-TimeField--placeholder" aria-hidden="true" />}>
+      <TimeFieldInner {...props} __formContext={formContext} />
+    </Show>;
+}
+/**
+* Internal TimeField component that renders after client mount.
+*/
+function TimeFieldInner(props) {
+	const formContext = props.__formContext ?? useContext(FormContext);
+	const [local, stateProps, rest] = splitProps(withFormValidationBehavior(props, formContext), [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"__formContext"
+	], [
+		"value",
+		"defaultValue",
+		"onChange",
+		"minValue",
+		"maxValue",
+		"isInvalid",
+		"isDisabled",
+		"isReadOnly",
+		"isRequired",
+		"locale",
+		"granularity",
+		"hourCycle",
+		"shouldForceLeadingZeros",
+		"validationState",
+		"validationBehavior",
+		"validate",
+		"description",
+		"errorMessage",
+		"placeholderValue"
+	]);
+	const [fieldRef, setFieldRef] = createSignal(null);
+	const state = createTimeFieldState(stateProps);
+	const fieldAria = createTimeField(() => ({
+		...rest,
+		description: stateProps.description,
+		errorMessage: stateProps.errorMessage
+	}), state, fieldRef);
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled(),
+		isReadOnly: state.isReadOnly(),
+		isRequired: state.isRequired(),
+		isInvalid: state.isInvalid()
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-TimeField"
+	}, renderValues);
+	const validationBehavior = () => stateProps.validationBehavior ?? formContext?.validationBehavior ?? "native";
+	const textSlots = { slots: {
+		get description() {
+			return fieldAria.descriptionProps;
+		},
+		get errorMessage() {
+			return fieldAria.errorMessageProps;
+		}
+	} };
+	return <TimeFieldStateContext.Provider value={state}>
+      <TimeFieldContext.Provider value={{
+		state,
+		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())}>
+          <Provider values={[[TextContext, textSlots]]}>
+            {local.children}
+          </Provider>
+        </div>
+        <Show when={rest.name}>
+          <HiddenTimeInput name={rest.name} form={rest.form} value={state.value()} autoComplete={rest.autoComplete} isDisabled={state.isDisabled()} isRequired={state.isRequired()} validationBehavior={validationBehavior()} validationState={state} focus={() => {
+		fieldRef()?.querySelector("[role=\"spinbutton\"]")?.focus();
+	}} minValue={access(stateProps.minValue)} maxValue={access(stateProps.maxValue)} granularity={state.granularity} />
+        </Show>
+      </TimeFieldContext.Provider>
+    </TimeFieldStateContext.Provider>;
+}
+/**
+* The input area containing time segments.
+*/
+function TimeInput(props) {
+	const { state, aria } = useTimeFieldContextValue();
+	const [isFocused, setIsFocused] = createSignal(false);
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled(),
+		isFocused: isFocused()
+	}));
+	const renderProps = useRenderProps({
+		class: props.class,
+		style: props.style,
+		defaultClassName: "solidaria-TimeInput"
+	}, 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).
+*/
+function TimeSegment(props) {
+	const state = useTimeFieldContext();
+	const [segmentRef, setSegmentRef] = createSignal(null);
+	const segmentAria = createTimeSegment({ segment: props.segment }, state, segmentRef);
+	const renderValues = createMemo(() => ({
+		isFocused: segmentAria.isFocused,
+		isEditable: segmentAria.isEditable,
+		isPlaceholder: segmentAria.isPlaceholder,
+		type: props.segment.type,
+		text: segmentAria.text
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: props.class,
+		style: props.style,
+		defaultClassName: "solidaria-TimeSegment"
+	}, renderValues);
+	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>;
+}
+function TimeFieldLabel(props) {
+	const { aria } = useTimeFieldContextValue();
+	return <span {...aria.labelProps} class={props.class}>
+      {props.children}
+    </span>;
+}
+function TimeFieldDescription(props) {
+	const { aria } = useTimeFieldContextValue();
+	return <p {...aria.descriptionProps} class={props.class}>
+      {props.children}
+    </p>;
+}
+function TimeFieldErrorMessage(props) {
+	const { aria } = useTimeFieldContextValue();
+	return <p {...aria.errorMessageProps} class={props.class}>
+      {props.children}
+    </p>;
+}
+//#endregion
+export { TimeField, TimeFieldContext, TimeFieldDescription, TimeFieldErrorMessage, TimeFieldLabel, TimeFieldStateContext, TimeInput, TimeSegment, useTimeFieldContext };
+
+//# sourceMappingURL=TimeField.jsx.map