@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

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

@@ -0,0 +1,133 @@
+/**
+ * Icon component for solidaria-components
+ *
+ * Minimal headless Icon that owns ARIA semantics:
+ * - Decorative (no label): aria-hidden="true"
+ * - Informative (aria-label): role="img" + aria-label
+ * - Interactive (onPress): wraps content in headless Button
+ *
+ * The UI layer consumes this for styling/composition only.
+ */
+
+import { type JSX, createContext, createMemo, Show, splitProps } from "solid-js";
+import {
+  type RenderChildren,
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from "./utils";
+import { Button } from "./Button";
+import type { PressEvent } from "@proyecto-viviana/solidaria";
+
+export interface IconRenderProps {
+  /** Whether the icon is purely decorative (no label). */
+  isDecorative: boolean;
+  /** Whether the icon is interactive (has onPress). */
+  isInteractive: boolean;
+}
+
+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;
+  /** ID of an element that labels this icon. */
+  "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. */
+  class?: ClassNameOrFunction<IconRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<IconRenderProps>;
+  /** The id of the element. */
+  id?: string;
+}
+
+export const IconContext = createContext<IconProps | null>(null);
+
+/**
+ * An icon wrapper that provides correct ARIA semantics.
+ *
+ * - **Decorative** (no `aria-label`): renders `<span aria-hidden="true">`
+ * - **Informative** (`aria-label` provided): renders `<span role="img" aria-label="...">`
+ * - **Interactive** (`onPress` provided): wraps in headless `Button`
+ *
+ * @example
+ * ```tsx
+ * // Decorative
+ * <Icon><SearchSvg /></Icon>
+ *
+ * // Informative
+ * <Icon aria-label="Search"><SearchSvg /></Icon>
+ *
+ * // Interactive
+ * <Icon onPress={handleSearch} aria-label="Search"><SearchSvg /></Icon>
+ * ```
+ */
+export function Icon(props: IconProps): JSX.Element {
+  const [local, rest] = splitProps(props, [
+    "children",
+    "class",
+    "style",
+    "slot",
+    "onPress",
+    "aria-label",
+    "aria-labelledby",
+  ]);
+
+  const hasLabel = () => !!(local["aria-label"] || local["aria-labelledby"]);
+  const isInteractive = () => !!local.onPress;
+  const isDecorative = () => !hasLabel();
+
+  const renderValues = createMemo<IconRenderProps>(() => ({
+    isDecorative: isDecorative(),
+    isInteractive: isInteractive(),
+  }));
+
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-Icon",
+    },
+    renderValues,
+  );
+
+  const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+
+  return (
+    <Show
+      when={isInteractive()}
+      fallback={
+        <span
+          {...domProps()}
+          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}
+          data-decorative={isDecorative() || undefined}
+        >
+          {renderProps.renderChildren()}
+        </span>
+      }
+    >
+      <Button
+        {...domProps()}
+        onPress={local.onPress}
+        aria-label={local["aria-label"]}
+        aria-labelledby={local["aria-labelledby"]}
+        class={renderProps.class()}
+        style={renderProps.style()}
+        data-interactive=""
+      >
+        {renderProps.renderChildren()}
+      </Button>
+    </Show>
+  );
+}

package/src/Keyboard.tsx

@@ -0,0 +1,26 @@
+/**
+ * Keyboard primitive for solidaria-components.
+ *
+ * Displays keyboard key hints with semantic <kbd> markup.
+ * Port direction: react-aria-components/src/Keyboard.tsx
+ */
+
+import { type JSX, createContext, splitProps, useContext } from "solid-js";
+
+export interface KeyboardProps extends JSX.HTMLAttributes<HTMLElement> {
+  children?: JSX.Element;
+}
+
+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"]);
+
+  return (
+    <kbd dir="ltr" {...domProps}>
+      {local.children}
+    </kbd>
+  );
+}

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.
  *