@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/datepicker/createTimeSegment.ts

@@ -5,14 +5,10 @@
  * Based on @react-aria/datepicker useDateSegment semantics (time-field scope).
  */
 
-import { createMemo, createSignal } from 'solid-js';
-import { useLocale } from '../i18n';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import type { TimeFieldState, TimeSegment, TimeSegmentType } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
+import { createMemo, createSignal } from "solid-js";
+import { useLocale } from "../i18n";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import type { TimeFieldState, TimeSegment, TimeSegmentType } from "@proyecto-viviana/solid-stately";
 
 export interface AriaTimeSegmentProps {
   /** The segment data. */
@@ -32,21 +28,17 @@ export interface TimeSegmentAria {
   text: string;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a time segment.
  */
 export function createTimeSegment<T extends TimeFieldState>(
   props: MaybeAccessor<AriaTimeSegmentProps>,
   state: T,
-  ref?: () => HTMLElement | null
+  ref?: () => HTMLElement | null,
 ): TimeSegmentAria {
   const getProps = () => access(props);
   const [isFocused, setIsFocused] = createSignal(false);
-  const [enteredKeys, setEnteredKeys] = createSignal('');
+  const [enteredKeys, setEnteredKeys] = createSignal("");
   const [isComposing, setIsComposing] = createSignal(false);
   const locale = useLocale();
 
@@ -57,25 +49,23 @@ export function createTimeSegment<T extends TimeFieldState>(
     return seg.isEditable && !state.isDisabled() && !state.isReadOnly();
   });
 
-  const focusSegment = (target: 'first' | 'last' | 'prev' | 'next') => {
+  const focusSegment = (target: "first" | "last" | "prev" | "next") => {
     const el = ref?.();
     if (!el) return;
 
     const container = el.parentElement;
     if (!container) return;
 
-    const segments = Array.from(
-      container.querySelectorAll<HTMLElement>('[role="spinbutton"]')
-    );
+    const segments = Array.from(container.querySelectorAll<HTMLElement>('[role="spinbutton"]'));
 
     if (segments.length === 0) return;
 
-    if (target === 'first') {
+    if (target === "first") {
       segments[0]?.focus();
       return;
     }
 
-    if (target === 'last') {
+    if (target === "last") {
       segments[segments.length - 1]?.focus();
       return;
     }
@@ -83,7 +73,7 @@ export function createTimeSegment<T extends TimeFieldState>(
     const currentIndex = segments.indexOf(el);
     if (currentIndex < 0) return;
 
-    const nextIndex = target === 'next' ? currentIndex + 1 : currentIndex - 1;
+    const nextIndex = target === "next" ? currentIndex + 1 : currentIndex - 1;
     if (nextIndex >= 0 && nextIndex < segments.length) {
       segments[nextIndex]?.focus();
     }
@@ -91,14 +81,10 @@ export function createTimeSegment<T extends TimeFieldState>(
 
   const clearCurrentSegment = (type: TimeSegmentType) => {
     state.clearSegment(type);
-    setEnteredKeys('');
+    setEnteredKeys("");
   };
 
-  const handleNumericInput = (
-    key: string,
-    type: TimeSegmentType,
-    seg: TimeSegment
-  ) => {
+  const handleNumericInput = (key: string, type: TimeSegmentType, seg: TimeSegment) => {
     const newKeys = enteredKeys() + key;
     const numValue = parseInt(newKeys, 10);
     const maxValue = seg.maxValue ?? 99;
@@ -108,10 +94,10 @@ export function createTimeSegment<T extends TimeFieldState>(
     if (numValue <= maxValue) {
       state.setSegment(type, numValue);
 
-      const potentialNextValue = parseInt(newKeys + '0', 10);
+      const potentialNextValue = parseInt(newKeys + "0", 10);
       if (potentialNextValue > maxValue || newKeys.length >= maxDigits) {
-        setEnteredKeys('');
-        focusSegment('next');
+        setEnteredKeys("");
+        focusSegment("next");
       } else {
         setEnteredKeys(newKeys);
       }
@@ -119,15 +105,15 @@ export function createTimeSegment<T extends TimeFieldState>(
       const singleValue = parseInt(key, 10);
       if (singleValue >= minValue && singleValue <= maxValue) {
         state.setSegment(type, singleValue);
-        const potentialNextValue = parseInt(key + '0', 10);
+        const potentialNextValue = parseInt(key + "0", 10);
         if (potentialNextValue > maxValue || key.length >= maxDigits) {
-          setEnteredKeys('');
-          focusSegment('next');
+          setEnteredKeys("");
+          focusSegment("next");
         } else {
           setEnteredKeys(key);
         }
       } else {
-        setEnteredKeys('');
+        setEnteredKeys("");
       }
     }
   };
@@ -139,42 +125,42 @@ export function createTimeSegment<T extends TimeFieldState>(
     const seg = segment();
     const type = seg.type;
 
-    if (type === 'literal') return;
+    if (type === "literal") return;
 
     switch (e.key) {
-      case 'ArrowRight':
+      case "ArrowRight":
         e.preventDefault();
-        focusSegment(locale().direction === 'rtl' ? 'prev' : 'next');
+        focusSegment(locale().direction === "rtl" ? "prev" : "next");
         break;
-      case 'ArrowLeft':
+      case "ArrowLeft":
         e.preventDefault();
-        focusSegment(locale().direction === 'rtl' ? 'next' : 'prev');
+        focusSegment(locale().direction === "rtl" ? "next" : "prev");
         break;
-      case 'ArrowUp':
+      case "ArrowUp":
         e.preventDefault();
         state.incrementSegment(type);
         break;
-      case 'ArrowDown':
+      case "ArrowDown":
         e.preventDefault();
         state.decrementSegment(type);
         break;
-      case 'Home':
+      case "Home":
         e.preventDefault();
-        focusSegment('first');
+        focusSegment("first");
         break;
-      case 'End':
+      case "End":
         e.preventDefault();
-        focusSegment('last');
+        focusSegment("last");
         break;
-      case 'Backspace':
+      case "Backspace":
         e.preventDefault();
         if (seg.isPlaceholder) {
-          focusSegment('prev');
+          focusSegment("prev");
         } else {
           clearCurrentSegment(type);
         }
         break;
-      case 'Delete':
+      case "Delete":
         e.preventDefault();
         clearCurrentSegment(type);
         break;
@@ -193,15 +179,15 @@ export function createTimeSegment<T extends TimeFieldState>(
     if (isComposing()) return;
 
     const seg = segment();
-    if (seg.type === 'literal') return;
+    if (seg.type === "literal") return;
 
-    if (e.inputType === 'deleteContentBackward' || e.inputType === 'deleteContentForward') {
+    if (e.inputType === "deleteContentBackward" || e.inputType === "deleteContentForward") {
       e.preventDefault();
       clearCurrentSegment(seg.type);
       return;
     }
 
-    if (e.inputType === 'insertText' && e.data) {
+    if (e.inputType === "insertText" && e.data) {
       const normalizedDigit = normalizeDigit(e.data);
       if (!normalizedDigit) return;
       e.preventDefault();
@@ -212,7 +198,7 @@ export function createTimeSegment<T extends TimeFieldState>(
   const handleCompositionStart = () => {
     if (!isEditable()) return;
     setIsComposing(true);
-    setEnteredKeys('');
+    setEnteredKeys("");
   };
 
   const handleCompositionEnd = (e: CompositionEvent) => {
@@ -220,9 +206,9 @@ export function createTimeSegment<T extends TimeFieldState>(
     setIsComposing(false);
 
     const seg = segment();
-    if (seg.type === 'literal') return;
+    if (seg.type === "literal") return;
 
-    const digits = extractNormalizedDigits(e.data ?? '');
+    const digits = extractNormalizedDigits(e.data ?? "");
     if (digits.length === 0) return;
 
     for (const digit of digits) {
@@ -232,12 +218,12 @@ export function createTimeSegment<T extends TimeFieldState>(
 
   const handleFocus = () => {
     setIsFocused(true);
-    setEnteredKeys('');
+    setEnteredKeys("");
   };
 
   const handleBlur = () => {
     setIsFocused(false);
-    setEnteredKeys('');
+    setEnteredKeys("");
 
     const maybeState = state as unknown as { confirmPlaceholder?: () => void };
     maybeState.confirmPlaceholder?.();
@@ -247,28 +233,28 @@ export function createTimeSegment<T extends TimeFieldState>(
     const seg = segment();
     const type = seg.type;
 
-    if (type === 'literal') {
+    if (type === "literal") {
       return {
-        'aria-hidden': true,
+        "aria-hidden": true,
       };
     }
 
     return {
-      role: 'spinbutton',
+      role: "spinbutton",
       tabIndex: isEditable() ? 0 : -1,
-      'aria-label': getSegmentLabel(type, locale().locale),
-      'aria-valuenow': seg.value,
-      'aria-valuemin': seg.minValue,
-      'aria-valuemax': seg.maxValue,
-      'aria-valuetext': seg.isPlaceholder ? seg.placeholder : seg.text,
-      'aria-readonly': state.isReadOnly() || undefined,
-      'aria-disabled': state.isDisabled() || undefined,
-      'aria-invalid': state.isInvalid() || undefined,
+      "aria-label": getSegmentLabel(type, locale().locale),
+      "aria-valuenow": seg.value,
+      "aria-valuemin": seg.minValue,
+      "aria-valuemax": seg.maxValue,
+      "aria-valuetext": seg.isPlaceholder ? seg.placeholder : seg.text,
+      "aria-readonly": state.isReadOnly() || undefined,
+      "aria-disabled": state.isDisabled() || undefined,
+      "aria-invalid": state.isInvalid() || undefined,
       contentEditable: isEditable(),
       suppressContentEditableWarning: true,
-      inputMode: 'numeric' as const,
-      autoCorrect: 'off',
-      enterKeyHint: 'next' as const,
+      inputMode: "numeric" as const,
+      autoCorrect: "off",
+      enterKeyHint: "next" as const,
       spellCheck: false,
       onKeyDown: handleKeyDown,
       onFocus: handleFocus,
@@ -306,31 +292,27 @@ export function createTimeSegment<T extends TimeFieldState>(
   };
 }
 
-// ============================================
-// HELPERS
-// ============================================
-
-type EditableTimeSegmentType = Exclude<TimeSegmentType, 'literal'>;
+type EditableTimeSegmentType = Exclude<TimeSegmentType, "literal">;
 
 const SEGMENT_LABELS: Record<string, Record<EditableTimeSegmentType, string>> = {
   en: {
-    hour: 'Hour',
-    minute: 'Minute',
-    second: 'Second',
-    dayPeriod: 'AM/PM',
+    hour: "Hour",
+    minute: "Minute",
+    second: "Second",
+    dayPeriod: "AM/PM",
   },
   es: {
-    hour: 'Hora',
-    minute: 'Minuto',
-    second: 'Segundo',
-    dayPeriod: 'AM/PM',
+    hour: "Hora",
+    minute: "Minuto",
+    second: "Segundo",
+    dayPeriod: "AM/PM",
   },
 };
 
 function getSegmentLabel(type: TimeSegmentType, locale: string): string {
-  if (type === 'literal') return '';
+  if (type === "literal") return "";
 
-  const language = locale.toLowerCase().split('-')[0] ?? 'en';
+  const language = locale.toLowerCase().split("-")[0] ?? "en";
   const labels = SEGMENT_LABELS[language] ?? SEGMENT_LABELS.en;
   return labels[type];
 }

package/src/datepicker/index.ts

@@ -1,30 +1,22 @@
 // Date Field
-export {
-  createDateField,
-  type AriaDateFieldProps,
-  type DateFieldAria,
-} from './createDateField';
+export { createDateField, type AriaDateFieldProps, type DateFieldAria } from "./createDateField";
 
 // Date Segment
 export {
   createDateSegment,
   type AriaDateSegmentProps,
   type DateSegmentAria,
-} from './createDateSegment';
+} from "./createDateSegment";
 
 // Time Field
-export {
-  createTimeField,
-  type AriaTimeFieldProps,
-  type TimeFieldAria,
-} from './createTimeField';
+export { createTimeField, type AriaTimeFieldProps, type TimeFieldAria } from "./createTimeField";
 
 // Time Segment
 export {
   createTimeSegment,
   type AriaTimeSegmentProps,
   type TimeSegmentAria,
-} from './createTimeSegment';
+} from "./createTimeSegment";
 
 // Date Picker
 export {
@@ -32,11 +24,18 @@ export {
   type AriaDatePickerProps,
   type DatePickerAria,
   type DatePickerState,
-} from './createDatePicker';
+} from "./createDatePicker";
+
+// Date Picker Group
+export {
+  createDatePickerGroup,
+  type AriaDatePickerGroupProps,
+  type DatePickerGroupAria,
+} from "./createDatePickerGroup";
 
 // Date Range Picker
 export {
   createDateRangePicker,
   type AriaDateRangePickerProps,
   type DateRangePickerAria,
-} from './createDateRangePicker';
+} from "./createDateRangePicker";

package/src/dialog/createDialog.ts

@@ -15,24 +15,31 @@
  * https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/dialog/src/useDialog.ts
  */
 
-import { Accessor, createEffect, createMemo, createSignal, createUniqueId, onCleanup } from 'solid-js'
-import { filterDOMProps, focusSafely } from '../utils'
-import type { AriaLabelingProps, DOMProps } from './types'
+import {
+  Accessor,
+  createEffect,
+  createMemo,
+  createSignal,
+  createUniqueId,
+  onCleanup,
+} from "solid-js";
+import { filterDOMProps, focusSafely } from "../utils";
+import type { AriaLabelingProps, DOMProps } from "./types";
 
 export interface AriaDialogProps extends DOMProps, AriaLabelingProps {
   /**
    * The role of the dialog element.
    * @default 'dialog'
    */
-  role?: 'dialog' | 'alertdialog'
+  role?: "dialog" | "alertdialog";
 }
 
 export interface DialogAria {
   /** Props for the dialog container element. */
-  dialogProps: Accessor<Record<string, any>>
+  dialogProps: Accessor<Record<string, unknown>>;
 
   /** Props for the dialog title element. */
-  titleProps: Accessor<Record<string, any>>
+  titleProps: Accessor<Record<string, unknown>>;
 }
 
 /**
@@ -41,31 +48,31 @@ export interface DialogAria {
  */
 export function createDialog(
   props: AriaDialogProps | Accessor<AriaDialogProps>,
-  ref: Accessor<HTMLElement | undefined>
+  ref: Accessor<HTMLElement | undefined>,
 ): DialogAria {
   // Support both direct props and accessor pattern
-  const getProps = typeof props === 'function' ? props : () => props
+  const getProps = typeof props === "function" ? props : () => props;
 
-  const role = () => getProps().role ?? 'dialog'
-  const generatedTitleId = createUniqueId()
-  const [isRefocusing, setIsRefocusing] = createSignal(false)
+  const role = () => getProps().role ?? "dialog";
+  const generatedTitleId = createUniqueId();
+  const [isRefocusing, setIsRefocusing] = createSignal(false);
 
   const titleId = createMemo(() => {
-    const p = getProps()
+    const p = getProps();
     // Use provided aria-labelledby, or generated ID if no aria-label
-    if (p['aria-labelledby']) return undefined
-    return p['aria-label'] ? undefined : generatedTitleId
-  })
+    if (p["aria-labelledby"]) return undefined;
+    return p["aria-label"] ? undefined : generatedTitleId;
+  });
 
   // Focus the dialog itself on mount, unless a child element is already focused.
   // Only run on the client (SSR-safe)
   createEffect(() => {
     // Guard against SSR - document is not available on the server
-    if (typeof document === 'undefined') return
+    if (typeof document === "undefined") return;
 
-    const dialogEl = ref()
+    const dialogEl = ref();
     if (dialogEl && !dialogEl.contains(document.activeElement)) {
-      focusSafely(dialogEl)
+      focusSafely(dialogEl);
 
       // Safari on iOS does not move the VoiceOver cursor to the dialog
       // or announce that it has opened until it has rendered. A workaround
@@ -73,48 +80,48 @@ export function createDialog(
       const timeout = setTimeout(() => {
         // Check that the dialog is still focused, or focused was lost to the body.
         if (document.activeElement === dialogEl || document.activeElement === document.body) {
-          setIsRefocusing(true)
-          dialogEl.blur()
-          focusSafely(dialogEl)
-          setIsRefocusing(false)
+          setIsRefocusing(true);
+          dialogEl.blur();
+          focusSafely(dialogEl);
+          setIsRefocusing(false);
         }
-      }, 500)
+      }, 500);
 
       onCleanup(() => {
-        clearTimeout(timeout)
-      })
+        clearTimeout(timeout);
+      });
     }
-  })
+  });
 
   // Note: Focus containment is typically handled by createModal at a higher level
   // For standalone dialogs, focus containment should be managed by the overlay system
 
   const dialogProps = createMemo(() => {
-    const p = getProps()
+    const p = getProps();
     return {
       ...filterDOMProps(p),
       role: role(),
       tabIndex: -1,
-      'aria-label': p['aria-label'],
-      'aria-labelledby': p['aria-labelledby'] || titleId(),
-      'aria-describedby': p['aria-describedby'],
+      "aria-label": p["aria-label"],
+      "aria-labelledby": p["aria-labelledby"] || titleId(),
+      "aria-describedby": p["aria-describedby"],
       // Prevent blur events from reaching createOverlay, which may cause
       // popovers to close. Since focus is contained within the dialog,
       // we don't want this to occur due to the above createEffect.
       onBlur: (e: FocusEvent) => {
         if (isRefocusing()) {
-          e.stopPropagation()
+          e.stopPropagation();
         }
-      }
-    }
-  })
+      },
+    };
+  });
 
   const titlePropsValue = createMemo(() => ({
-    id: titleId()
-  }))
+    id: titleId(),
+  }));
 
   return {
     dialogProps,
-    titleProps: titlePropsValue
-  }
+    titleProps: titlePropsValue,
+  };
 }

package/src/dialog/index.ts

@@ -1,2 +1,2 @@
-export { createDialog } from './createDialog'
-export type { AriaDialogProps, DialogAria } from './createDialog'
+export { createDialog } from "./createDialog";
+export type { AriaDialogProps, DialogAria } from "./createDialog";

package/src/dialog/types.ts

@@ -9,11 +9,11 @@ export interface DOMProps {
 
 export interface AriaLabelingProps {
   /** Defines a string value that labels the current element. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Identifies the element (or elements) that provide a detailed, extended description for the object. */
-  'aria-details'?: string;
+  "aria-details"?: string;
 }