@proyecto-viviana/solidaria-components 0.2.9 → 0.3.1

package/src/HiddenDateInput.tsx

@@ -0,0 +1,153 @@
+/**
+ * HiddenDateInput component for solidaria-components
+ *
+ * A hidden native date/datetime-local input for form submission.
+ * Renders server-side with the initial value for SSR safety.
+ */
+import { type JSX, createEffect, createSignal } from "solid-js";
+import { type DateValue, type FormValidationState } from "@proyecto-viviana/solid-stately";
+import { createFormValidation } from "@proyecto-viviana/solidaria";
+
+type MaybeAccessor<T> = T | (() => T);
+
+export interface HiddenDateInputProps {
+  name?: string;
+  form?: string;
+  value?: MaybeAccessor<DateValue | null | undefined>;
+  autoComplete?: string;
+  isDisabled?: boolean;
+  isRequired?: boolean;
+  validationBehavior?: "aria" | "native";
+  validationState?: FormValidationState;
+  focus?: () => void;
+  minValue?: MaybeAccessor<DateValue | undefined>;
+  maxValue?: MaybeAccessor<DateValue | undefined>;
+  granularity?: "day" | "hour" | "minute" | "second";
+}
+
+function accessValue<T>(value: MaybeAccessor<T> | undefined): T | undefined {
+  return typeof value === "function" ? (value as () => T)() : value;
+}
+
+function formatDateValue(
+  value: DateValue | undefined | null,
+  granularity: "day" | "hour" | "minute" | "second",
+): string {
+  if (!value) return "";
+
+  if ("timeZone" in value) {
+    return String(value);
+  }
+
+  const dateValue = value;
+
+  const year = String(dateValue.year).padStart(4, "0");
+  const month = String(dateValue.month).padStart(2, "0");
+  const day = String(dateValue.day).padStart(2, "0");
+
+  if (granularity === "day") {
+    return `${year}-${month}-${day}`;
+  }
+
+  const hasHour = "hour" in dateValue;
+  const hour = hasHour ? String((dateValue as { hour: number }).hour).padStart(2, "0") : "00";
+  const hasMinute = hasHour && "minute" in dateValue;
+  const minute = hasMinute
+    ? String((dateValue as { minute: number }).minute).padStart(2, "0")
+    : "00";
+
+  if (granularity === "second" && hasMinute && "second" in dateValue) {
+    const second = String((dateValue as { second: number }).second).padStart(2, "0");
+    return `${year}-${month}-${day}T${hour}:${minute}:${second}`;
+  }
+
+  return `${year}-${month}-${day}T${hour}:${minute}`;
+}
+
+export function HiddenDateInput(props: HiddenDateInputProps): JSX.Element {
+  const granularity = () => props.granularity ?? "day";
+  const hasValidationBehavior = () => props.validationBehavior != null;
+  const validationBehavior = () => props.validationBehavior;
+  const usesNativeValidation = () => validationBehavior() === "native";
+  const value = () => accessValue(props.value);
+  const minValue = () => accessValue(props.minValue);
+  const maxValue = () => accessValue(props.maxValue);
+  const hasTimeZoneValue = () =>
+    Boolean(
+      (value() && "timeZone" in value()!) ||
+      (minValue() && "timeZone" in minValue()!) ||
+      (maxValue() && "timeZone" in maxValue()!),
+    );
+  const inputType = () =>
+    usesNativeValidation()
+      ? "text"
+      : hasValidationBehavior()
+        ? "hidden"
+        : hasTimeZoneValue()
+          ? "hidden"
+          : granularity() === "day"
+            ? "date"
+            : "datetime-local";
+  const formattedValue = () => formatDateValue(value(), granularity());
+  const formattedMin = () => formatDateValue(minValue(), granularity());
+  const formattedMax = () => formatDateValue(maxValue(), granularity());
+
+  const [inputRef, setInputRef] = createSignal<HTMLInputElement>();
+
+  if (props.validationState) {
+    createFormValidation(
+      {
+        get validationBehavior() {
+          return validationBehavior();
+        },
+        get focus() {
+          return props.focus;
+        },
+      },
+      props.validationState,
+      inputRef,
+    );
+  }
+
+  createEffect(() => {
+    const val = formattedValue();
+    const input = inputRef();
+    if (input && input.value !== val) {
+      input.value = val;
+    }
+  });
+
+  return (
+    <input
+      ref={(el) => {
+        setInputRef(el);
+      }}
+      type={inputType()}
+      name={props.name}
+      form={props.form}
+      value={formattedValue()}
+      autocomplete={props.autoComplete}
+      disabled={props.isDisabled}
+      required={usesNativeValidation() && props.isRequired ? true : undefined}
+      hidden={usesNativeValidation() || undefined}
+      min={hasValidationBehavior() ? undefined : formattedMin() || undefined}
+      max={hasValidationBehavior() ? undefined : formattedMax() || undefined}
+      onChange={usesNativeValidation() ? () => {} : undefined}
+      tabIndex={-1}
+      aria-hidden="true"
+      style={
+        {
+          position: "absolute",
+          width: "1px",
+          height: "1px",
+          padding: "0",
+          margin: "-1px",
+          overflow: "hidden",
+          clip: "rect(0, 0, 0, 0)",
+          "white-space": "nowrap",
+          "border-width": "0",
+        } as JSX.CSSProperties
+      }
+    />
+  );
+}

package/src/HiddenTimeInput.tsx

@@ -0,0 +1,133 @@
+/**
+ * HiddenTimeInput component for solidaria-components
+ *
+ * A hidden native time input for form submission.
+ */
+import { type JSX, createEffect, createSignal } from "solid-js";
+import { type FormValidationState, type TimeValue } from "@proyecto-viviana/solid-stately";
+import { createFormValidation } from "@proyecto-viviana/solidaria";
+
+type MaybeAccessor<T> = T | (() => T);
+
+export interface HiddenTimeInputProps {
+  name?: string;
+  form?: string;
+  value?: MaybeAccessor<TimeValue | null | undefined>;
+  autoComplete?: string;
+  isDisabled?: boolean;
+  isRequired?: boolean;
+  validationBehavior?: "aria" | "native";
+  validationState?: FormValidationState;
+  focus?: () => void;
+  minValue?: MaybeAccessor<TimeValue | undefined>;
+  maxValue?: MaybeAccessor<TimeValue | undefined>;
+  granularity?: "hour" | "minute" | "second";
+}
+
+function accessValue<T>(value: MaybeAccessor<T> | undefined): T | undefined {
+  return typeof value === "function" ? (value as () => T)() : value;
+}
+
+function formatTimeValue(
+  value: TimeValue | undefined | null,
+  granularity: "hour" | "minute" | "second",
+): string {
+  if (!value) return "";
+
+  const hour = String(value.hour).padStart(2, "0");
+  const minute = String(granularity === "hour" ? 0 : value.minute).padStart(2, "0");
+
+  if (granularity === "second") {
+    const second = String(value.second).padStart(2, "0");
+    return `${hour}:${minute}:${second}`;
+  }
+
+  return `${hour}:${minute}`;
+}
+
+function stepForGranularity(granularity: "hour" | "minute" | "second"): number {
+  switch (granularity) {
+    case "hour":
+      return 3600;
+    case "second":
+      return 1;
+    case "minute":
+    default:
+      return 60;
+  }
+}
+
+export function HiddenTimeInput(props: HiddenTimeInputProps): JSX.Element {
+  const granularity = () => props.granularity ?? "minute";
+  const hasValidationBehavior = () => props.validationBehavior != null;
+  const validationBehavior = () => props.validationBehavior;
+  const usesNativeValidation = () => validationBehavior() === "native";
+  const value = () => accessValue(props.value);
+  const minValue = () => accessValue(props.minValue);
+  const maxValue = () => accessValue(props.maxValue);
+  const inputType = () =>
+    usesNativeValidation() ? "text" : hasValidationBehavior() ? "hidden" : "time";
+  const formattedValue = () => formatTimeValue(value(), granularity());
+  const formattedMin = () => formatTimeValue(minValue(), granularity());
+  const formattedMax = () => formatTimeValue(maxValue(), granularity());
+
+  const [inputRef, setInputRef] = createSignal<HTMLInputElement>();
+
+  if (props.validationState) {
+    createFormValidation(
+      {
+        get validationBehavior() {
+          return validationBehavior();
+        },
+        get focus() {
+          return props.focus;
+        },
+      },
+      props.validationState,
+      inputRef,
+    );
+  }
+
+  createEffect(() => {
+    const val = formattedValue();
+    const input = inputRef();
+    if (input && input.value !== val) {
+      input.value = val;
+    }
+  });
+
+  return (
+    <input
+      ref={(el) => {
+        setInputRef(el);
+      }}
+      type={inputType()}
+      name={props.name}
+      form={props.form}
+      value={formattedValue()}
+      autocomplete={props.autoComplete}
+      disabled={props.isDisabled}
+      required={usesNativeValidation() && props.isRequired ? true : undefined}
+      hidden={usesNativeValidation() || undefined}
+      min={hasValidationBehavior() ? undefined : formattedMin() || undefined}
+      max={hasValidationBehavior() ? undefined : formattedMax() || undefined}
+      step={hasValidationBehavior() ? undefined : stepForGranularity(granularity())}
+      onChange={usesNativeValidation() ? () => {} : undefined}
+      tabIndex={-1}
+      aria-hidden="true"
+      style={
+        {
+          position: "absolute",
+          width: "1px",
+          height: "1px",
+          padding: "0",
+          margin: "-1px",
+          overflow: "hidden",
+          clip: "rect(0, 0, 0, 0)",
+          "white-space": "nowrap",
+          "border-width": "0",
+        } as JSX.CSSProperties
+      }
+    />
+  );
+}

package/src/Icon.tsx

@@ -9,13 +9,7 @@
  * The UI layer consumes this for styling/composition only.
  */
 
-import {
-  type JSX,
-  createContext,
-  createMemo,
-  Show,
-  splitProps,
-} from 'solid-js';
+import { type JSX, createContext, createMemo, Show, splitProps } from "solid-js";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -23,13 +17,9 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
-import { Button } from './Button';
-import type { PressEvent } from '@proyecto-viviana/solidaria';
-
-// ============================================
-// TYPES
-// ============================================
+} from "./utils";
+import { Button } from "./Button";
+import type { PressEvent } from "@proyecto-viviana/solidaria";
 
 export interface IconRenderProps {
   /** Whether the icon is purely decorative (no label). */
@@ -42,9 +32,9 @@ export interface IconProps extends SlotProps {
   /** Handler called when the icon is pressed (makes it interactive). */
   onPress?: (e: PressEvent) => void;
   /** Accessible label for the icon. When provided, the icon is informative (role="img"). */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** ID of an element that labels this icon. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** The children of the component. A function may be provided to receive render props. */
   children?: RenderChildren<IconRenderProps>;
   /** The CSS className for the element. */
@@ -55,16 +45,8 @@ export interface IconProps extends SlotProps {
   id?: string;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 export const IconContext = createContext<IconProps | null>(null);
 
-// ============================================
-// ICON COMPONENT
-// ============================================
-
 /**
  * An icon wrapper that provides correct ARIA semantics.
  *
@@ -86,37 +68,34 @@ export const IconContext = createContext<IconProps | null>(null);
  */
 export function Icon(props: IconProps): JSX.Element {
   const [local, rest] = splitProps(props, [
-    'children',
-    'class',
-    'style',
-    'slot',
-    'onPress',
-    'aria-label',
-    'aria-labelledby',
+    "children",
+    "class",
+    "style",
+    "slot",
+    "onPress",
+    "aria-label",
+    "aria-labelledby",
   ]);
 
-  const hasLabel = () => !!(local['aria-label'] || local['aria-labelledby']);
+  const hasLabel = () => !!(local["aria-label"] || local["aria-labelledby"]);
   const isInteractive = () => !!local.onPress;
   const isDecorative = () => !hasLabel();
 
-  // Render props values
   const renderValues = createMemo<IconRenderProps>(() => ({
     isDecorative: isDecorative(),
     isInteractive: isInteractive(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: local.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-Icon',
+      defaultClassName: "solidaria-Icon",
     },
-    renderValues
+    renderValues,
   );
 
-  // Filter DOM props
   const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
 
   return (
@@ -125,10 +104,10 @@ export function Icon(props: IconProps): JSX.Element {
       fallback={
         <span
           {...domProps()}
-          role={hasLabel() ? 'img' : undefined}
-          aria-hidden={isDecorative() ? 'true' : undefined}
-          aria-label={local['aria-label']}
-          aria-labelledby={local['aria-labelledby']}
+          role={hasLabel() ? "img" : undefined}
+          aria-hidden={isDecorative() ? "true" : undefined}
+          aria-label={local["aria-label"]}
+          aria-labelledby={local["aria-labelledby"]}
           class={renderProps.class()}
           style={renderProps.style()}
           data-interactive={undefined}
@@ -141,8 +120,8 @@ export function Icon(props: IconProps): JSX.Element {
       <Button
         {...domProps()}
         onPress={local.onPress}
-        aria-label={local['aria-label']}
-        aria-labelledby={local['aria-labelledby']}
+        aria-label={local["aria-label"]}
+        aria-labelledby={local["aria-labelledby"]}
         class={renderProps.class()}
         style={renderProps.style()}
         data-interactive=""

package/src/Keyboard.tsx

@@ -5,7 +5,7 @@
  * Port direction: react-aria-components/src/Keyboard.tsx
  */
 
-import { type JSX, createContext, splitProps, useContext } from 'solid-js';
+import { type JSX, createContext, splitProps, useContext } from "solid-js";
 
 export interface KeyboardProps extends JSX.HTMLAttributes<HTMLElement> {
   children?: JSX.Element;
@@ -15,8 +15,8 @@ export const KeyboardContext = createContext<KeyboardProps | null>(null);
 
 export function Keyboard(props: KeyboardProps): JSX.Element {
   const context = useContext(KeyboardContext);
-  const merged = () => ({ ...(context ?? {}), ...props });
-  const [local, domProps] = splitProps(merged(), ['children']);
+  const merged = () => ({ ...context, ...props });
+  const [local, domProps] = splitProps(merged(), ["children"]);
 
   return (
     <kbd dir="ltr" {...domProps}>

package/src/Landmark.tsx

@@ -5,38 +5,23 @@
  * Enables F6 keyboard navigation between major page sections.
  */
 
-import {
-  type JSX,
-  createContext,
-  createMemo,
-  createSignal,
-  splitProps,
-} from 'solid-js';
-import { Dynamic } from 'solid-js/web';
+import { type JSX, createContext, createMemo, createSignal, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
 import {
   createLandmark,
   getLandmarkController,
   type AriaLandmarkProps,
   type AriaLandmarkRole,
   type LandmarkController,
-} from '@proyecto-viviana/solidaria';
-import {
-  type SlotProps,
-  filterDOMProps,
-} from './utils';
-
-// ============================================
-// TYPES
-// ============================================
+} from "@proyecto-viviana/solidaria";
+import { type SlotProps, filterDOMProps } from "./utils";
 
 export interface LandmarkRenderProps {
   /** The ARIA landmark role. */
   role: AriaLandmarkRole;
 }
 
-export interface LandmarkProps
-  extends AriaLandmarkProps,
-    SlotProps {
+export interface LandmarkProps extends AriaLandmarkProps, SlotProps {
   /**
    * The HTML element type to render.
    * @default 'div' (or semantic element based on role)
@@ -50,38 +35,25 @@ export interface LandmarkProps
   children?: JSX.Element;
 }
 
-// Re-export types
 export type { AriaLandmarkRole, LandmarkController };
 
-// ============================================
-// CONTEXT
-// ============================================
-
 export const LandmarkContext = createContext<LandmarkProps | null>(null);
 
-// ============================================
-// SEMANTIC ELEMENT MAPPING
-// ============================================
-
 /**
  * Maps ARIA landmark roles to their semantic HTML elements.
  * Using semantic elements is preferred when possible.
  */
 const roleToSemanticElement: Partial<Record<AriaLandmarkRole, keyof JSX.IntrinsicElements>> = {
-  main: 'main',
-  navigation: 'nav',
-  search: 'search', // HTML5.3 <search> element
-  banner: 'header',
-  contentinfo: 'footer',
-  complementary: 'aside',
-  form: 'form',
-  region: 'section',
+  main: "main",
+  navigation: "nav",
+  search: "search", // HTML5.3 <search> element
+  banner: "header",
+  contentinfo: "footer",
+  complementary: "aside",
+  form: "form",
+  region: "section",
 };
 
-// ============================================
-// LANDMARK COMPONENT
-// ============================================
-
 /**
  * A landmark is a region of the page that helps screen reader users navigate.
  * Press F6 to cycle through landmarks, or Shift+F6 to go backwards.
@@ -112,11 +84,11 @@ const roleToSemanticElement: Partial<Record<AriaLandmarkRole, keyof JSX.Intrinsi
  */
 export function Landmark(props: LandmarkProps): JSX.Element {
   const [local, ariaProps] = splitProps(props, [
-    'class',
-    'style',
-    'slot',
-    'children',
-    'elementType',
+    "class",
+    "style",
+    "slot",
+    "children",
+    "elementType",
   ]);
 
   // Element ref
@@ -127,45 +99,51 @@ export function Landmark(props: LandmarkProps): JSX.Element {
     if (local.elementType) {
       return local.elementType;
     }
-    return roleToSemanticElement[ariaProps.role] ?? 'div';
+    return roleToSemanticElement[ariaProps.role] ?? "div";
   });
 
   // Create landmark aria props
   const landmarkAria = createLandmark(
     {
-      get role() { return ariaProps.role; },
-      get 'aria-label'() { return ariaProps['aria-label']; },
-      get 'aria-labelledby'() { return ariaProps['aria-labelledby']; },
-      get id() { return ariaProps.id; },
-      get focus() { return ariaProps.focus; },
+      get role() {
+        return ariaProps.role;
+      },
+      get "aria-label"() {
+        return ariaProps["aria-label"];
+      },
+      get "aria-labelledby"() {
+        return ariaProps["aria-labelledby"];
+      },
+      get id() {
+        return ariaProps.id;
+      },
+      get focus() {
+        return ariaProps.focus;
+      },
     },
-    ref
+    ref,
   );
 
-  // Render props values
   const renderValues = createMemo<LandmarkRenderProps>(() => ({
     role: ariaProps.role,
   }));
 
-  // Resolve class
   const resolvedClass = createMemo(() => {
     const cls = local.class;
-    if (typeof cls === 'function') {
+    if (typeof cls === "function") {
       return cls(renderValues());
     }
     return cls ?? `solidaria-Landmark solidaria-Landmark--${ariaProps.role}`;
   });
 
-  // Resolve style
   const resolvedStyle = createMemo(() => {
     const style = local.style;
-    if (typeof style === 'function') {
+    if (typeof style === "function") {
       return style(renderValues());
     }
     return style;
   });
 
-  // Filter DOM props
   const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
 
   return (
@@ -183,10 +161,6 @@ export function Landmark(props: LandmarkProps): JSX.Element {
   );
 }
 
-// ============================================
-// LANDMARK CONTROLLER EXPORT
-// ============================================
-
 /**
  * Returns a controller for programmatic landmark navigation.
  *