@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/datepicker/createTimeField.ts

@@ -1,154 +0,0 @@
-/**
- * createTimeField hook for Solidaria
- *
- * Provides the behavior and accessibility implementation for a time field component.
- * Based on @react-aria/datepicker useTimeField
- */
-
-import { createMemo } from 'solid-js';
-import { createId } from '../ssr';
-import { createLabel } from '../label/createLabel';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import { mergeProps } from '../utils/mergeProps';
-import type { TimeFieldState, TimeSegment, TimeValue } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaTimeFieldProps {
-  /** An ID for the time field. */
-  id?: string;
-  /** A visible label for the time field. */
-  label?: string;
-  /** An accessible label for the time field. */
-  'aria-label'?: string;
-  /** The ID of an element that labels the time field. */
-  'aria-labelledby'?: string;
-  /** The ID of an element that describes the time field. */
-  'aria-describedby'?: string;
-  /** Whether the time field is disabled. */
-  isDisabled?: boolean;
-  /** Whether the time field is read-only. */
-  isReadOnly?: boolean;
-  /** Whether the time field is required. */
-  isRequired?: boolean;
-  /** Whether the time field is invalid. */
-  isInvalid?: boolean;
-  /** Description text. */
-  description?: string;
-  /** Error message. */
-  errorMessage?: string;
-}
-
-export interface TimeFieldAria {
-  /** Props for the label element. */
-  labelProps: Record<string, unknown>;
-  /** Props for the field container element. */
-  fieldProps: Record<string, unknown>;
-  /** Props for the input container (holds segments). */
-  inputProps: Record<string, unknown>;
-  /** Props for the description element. */
-  descriptionProps: Record<string, unknown>;
-  /** Props for the error message element. */
-  errorMessageProps: Record<string, unknown>;
-  /** The segments to render. */
-  segments: TimeSegment[];
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Provides the behavior and accessibility implementation for a time field component.
- */
-export function createTimeField<T extends TimeFieldState<TimeValue>>(
-  props: MaybeAccessor<AriaTimeFieldProps>,
-  state: T,
-  _ref?: () => HTMLElement | null
-): TimeFieldAria {
-  const getProps = () => access(props);
-  const id = createId(getProps().id);
-  const descriptionId = createId();
-  const errorMessageId = createId();
-
-  // Create label handling
-  const { labelProps, fieldProps: labelFieldProps } = createLabel({
-    get label() { return getProps().label; },
-    get 'aria-label'() { return getProps()['aria-label']; },
-    get 'aria-labelledby'() { return getProps()['aria-labelledby']; },
-    labelElementType: 'span',
-  });
-
-  // Build aria-describedby
-  const getAriaDescribedBy = () => {
-    const p = getProps();
-    const ids: string[] = [];
-    if (p['aria-describedby']) {
-      ids.push(p['aria-describedby']);
-    }
-    if (p.description) {
-      ids.push(descriptionId);
-    }
-    if (p.isInvalid && p.errorMessage) {
-      ids.push(errorMessageId);
-    }
-    return ids.length > 0 ? ids.join(' ') : undefined;
-  };
-
-  // Segments from state
-  const segments = createMemo(() => state.segments());
-
-  // Field container props
-  const fieldProps = createMemo(() => {
-    const p = getProps();
-
-    return mergeProps(labelFieldProps as Record<string, unknown>, {
-      id,
-      role: 'group',
-      'aria-disabled': p.isDisabled || state.isDisabled() || undefined,
-      'aria-readonly': p.isReadOnly || state.isReadOnly() || undefined,
-      'aria-required': p.isRequired || state.isRequired() || undefined,
-      'aria-invalid': p.isInvalid || state.isInvalid() || undefined,
-      'aria-describedby': getAriaDescribedBy(),
-    });
-  });
-
-  // Input container props
-  const inputProps = createMemo(() => ({
-    role: 'presentation',
-  }));
-
-  // Description props
-  const descriptionProps = createMemo(() => ({
-    id: descriptionId,
-  }));
-
-  // Error message props
-  const errorMessageProps = createMemo(() => ({
-    id: errorMessageId,
-    role: 'alert',
-  }));
-
-  return {
-    get labelProps() {
-      return labelProps as Record<string, unknown>;
-    },
-    get fieldProps() {
-      return fieldProps();
-    },
-    get inputProps() {
-      return inputProps();
-    },
-    get descriptionProps() {
-      return descriptionProps();
-    },
-    get errorMessageProps() {
-      return errorMessageProps();
-    },
-    get segments() {
-      return segments();
-    },
-  };
-}

package/src/datepicker/index.ts

@@ -1,28 +0,0 @@
-// Date Field
-export {
-  createDateField,
-  type AriaDateFieldProps,
-  type DateFieldAria,
-} from './createDateField';
-
-// Date Segment
-export {
-  createDateSegment,
-  type AriaDateSegmentProps,
-  type DateSegmentAria,
-} from './createDateSegment';
-
-// Time Field
-export {
-  createTimeField,
-  type AriaTimeFieldProps,
-  type TimeFieldAria,
-} from './createTimeField';
-
-// Date Picker
-export {
-  createDatePicker,
-  type AriaDatePickerProps,
-  type DatePickerAria,
-  type DatePickerState,
-} from './createDatePicker';

package/src/dialog/createDialog.ts

@@ -1,120 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/**
- * Ported from React Aria:
- * 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'
-
-export interface AriaDialogProps extends DOMProps, AriaLabelingProps {
-  /**
-   * The role of the dialog element.
-   * @default 'dialog'
-   */
-  role?: 'dialog' | 'alertdialog'
-}
-
-export interface DialogAria {
-  /** Props for the dialog container element. */
-  dialogProps: Accessor<Record<string, any>>
-
-  /** Props for the dialog title element. */
-  titleProps: Accessor<Record<string, any>>
-}
-
-/**
- * Provides the behavior and accessibility implementation for a dialog component.
- * A dialog is an overlay shown above other content in an application.
- */
-export function createDialog(
-  props: AriaDialogProps | Accessor<AriaDialogProps>,
-  ref: Accessor<HTMLElement | undefined>
-): DialogAria {
-  // Support both direct props and accessor pattern
-  const getProps = typeof props === 'function' ? props : () => props
-
-  const role = () => getProps().role ?? 'dialog'
-  const generatedTitleId = createUniqueId()
-  const [isRefocusing, setIsRefocusing] = createSignal(false)
-
-  const titleId = createMemo(() => {
-    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
-  })
-
-  // 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
-
-    const dialogEl = ref()
-    if (dialogEl && !dialogEl.contains(document.activeElement)) {
-      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
-      // is to wait for half a second, then blur and re-focus the dialog.
-      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)
-        }
-      }, 500)
-
-      onCleanup(() => {
-        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()
-    return {
-      ...filterDOMProps(p),
-      role: role(),
-      tabIndex: -1,
-      '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()
-        }
-      }
-    }
-  })
-
-  const titlePropsValue = createMemo(() => ({
-    id: titleId()
-  }))
-
-  return {
-    dialogProps,
-    titleProps: titlePropsValue
-  }
-}

package/src/dialog/index.ts

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

package/src/dialog/types.ts

@@ -1,19 +0,0 @@
-/**
- * Type definitions for dialog accessibility hooks
- */
-
-export interface DOMProps {
-  /** The element's unique identifier. */
-  id?: string;
-}
-
-export interface AriaLabelingProps {
-  /** Defines a string value that labels the current element. */
-  'aria-label'?: string;
-  /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby'?: string;
-  /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby'?: string;
-  /** Identifies the element (or elements) that provide a detailed, extended description for the object. */
-  'aria-details'?: string;
-}

package/src/disclosure/createDisclosure.ts

@@ -1,131 +0,0 @@
-/**
- * createDisclosure hook for Solidaria
- *
- * Provides the behavior and accessibility implementation for a disclosure component.
- *
- * Port of @react-aria/disclosure useDisclosure.
- */
-
-import { type JSX, createEffect } from 'solid-js';
-import { type DisclosureState } from '@proyecto-viviana/solid-stately';
-import { createId, canUseDOM } from '../ssr';
-import { createPress } from '../interactions/createPress';
-import { mergeProps } from '../utils/mergeProps';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaDisclosureProps {
-  /** Whether the disclosure is disabled. */
-  isDisabled?: boolean;
-}
-
-export interface DisclosureAria {
-  /** Props for the disclosure trigger button. */
-  buttonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-  /** Props for the disclosure panel. */
-  panelProps: JSX.HTMLAttributes<HTMLElement>;
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Provides the behavior and accessibility implementation for a disclosure component.
- *
- * A disclosure is a widget that can be toggled to show or hide content.
- * It consists of a trigger button and a panel.
- *
- * @example
- * ```tsx
- * import { createDisclosure } from 'solidaria';
- * import { createDisclosureState } from 'solid-stately';
- *
- * function Disclosure(props) {
- *   const state = createDisclosureState(props);
- *   let panelRef;
- *   const { buttonProps, panelProps } = createDisclosure(
- *     { get isDisabled() { return props.isDisabled; } },
- *     state,
- *     () => panelRef
- *   );
- *
- *   return (
- *     <div>
- *       <button {...buttonProps}>Toggle</button>
- *       <div {...panelProps} ref={panelRef}>
- *         {props.children}
- *       </div>
- *     </div>
- *   );
- * }
- * ```
- */
-export function createDisclosure(
-  props: AriaDisclosureProps | (() => AriaDisclosureProps),
-  state: DisclosureState,
-  panelRef: () => HTMLElement | null
-): DisclosureAria {
-  // Handle both plain object and accessor function patterns
-  const getProps = typeof props === 'function' ? props : () => props;
-
-  const triggerId = createId();
-  const panelId = createId();
-
-  // Handle panel visibility with hidden attribute
-  createEffect(() => {
-    if (!canUseDOM) return;
-
-    const panel = panelRef();
-    if (!panel) return;
-
-    if (state.isExpanded()) {
-      panel.removeAttribute('hidden');
-    } else {
-      // Use 'until-found' for find-in-page support where available
-      panel.setAttribute('hidden', 'until-found');
-    }
-  });
-
-  // Use createPress for proper interaction handling (matches Select/Menu pattern)
-  const { pressProps } = createPress({
-    get isDisabled() {
-      return getProps().isDisabled;
-    },
-    onPress() {
-      state.toggle();
-    },
-  });
-
-  return {
-    // Button props - merge with pressProps for consistent interaction handling
-    // Using getter (not createMemo) to match createSelect pattern
-    get buttonProps(): JSX.ButtonHTMLAttributes<HTMLButtonElement> {
-      const p = getProps();
-      // Note: Don't add duplicate onKeyDown handler here!
-      // createPress already handles Enter/Space via its onPress callback.
-      // Adding another toggle call would double-toggle (toggle on keydown, toggle again on keyup).
-      return mergeProps(
-        pressProps as Record<string, unknown>,
-        {
-          id: triggerId,
-          type: 'button',
-          'aria-expanded': state.isExpanded(),
-          'aria-controls': panelId,
-          disabled: p.isDisabled,
-        } as Record<string, unknown>
-      ) as JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    },
-    // Panel props
-    get panelProps(): JSX.HTMLAttributes<HTMLElement> {
-      return {
-        id: panelId,
-        role: 'region',
-        'aria-labelledby': triggerId,
-        hidden: !state.isExpanded() || undefined,
-      };
-    },
-  };
-}

package/src/disclosure/createDisclosureGroup.ts

@@ -1,62 +0,0 @@
-/**
- * createDisclosureGroup hook for Solidaria
- *
- * Provides accessibility implementation for a group of disclosures (accordion).
- *
- * Port of @react-aria/disclosure.
- */
-
-import { type JSX, createMemo } from 'solid-js';
-import { type DisclosureGroupState } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaDisclosureGroupProps {
-  /** Whether the disclosure group is disabled. */
-  isDisabled?: boolean;
-}
-
-export interface DisclosureGroupAria {
-  /** Props for the disclosure group container. */
-  groupProps: JSX.HTMLAttributes<HTMLElement>;
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Provides accessibility implementation for a group of disclosures (accordion).
- *
- * @example
- * ```tsx
- * import { createDisclosureGroup } from 'solidaria';
- * import { createDisclosureGroupState } from 'solid-stately';
- *
- * function Accordion(props) {
- *   const state = createDisclosureGroupState(props);
- *   const { groupProps } = createDisclosureGroup(props, state);
- *
- *   return (
- *     <div {...groupProps}>
- *       {props.children}
- *     </div>
- *   );
- * }
- * ```
- */
-export function createDisclosureGroup(
-  props: AriaDisclosureGroupProps,
-  state: DisclosureGroupState
-): DisclosureGroupAria {
-  const groupProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({
-    role: 'group',
-    'aria-disabled': props.isDisabled || state.isDisabled || undefined,
-  }));
-
-  return {
-    get groupProps() { return groupProps(); },
-  };
-}

package/src/disclosure/index.ts

@@ -1,11 +0,0 @@
-export {
-  createDisclosure,
-  type AriaDisclosureProps,
-  type DisclosureAria,
-} from './createDisclosure';
-
-export {
-  createDisclosureGroup,
-  type AriaDisclosureGroupProps,
-  type DisclosureGroupAria,
-} from './createDisclosureGroup';