@proyecto-viviana/solidaria-components 0.1.2 → 0.2.1

package/src/DateField.tsx

@@ -1,337 +0,0 @@
-/**
- * DateField component for solidaria-components
- *
- * Pre-wired headless date field component with segment-based editing.
- * Port of react-aria-components/src/DateField.tsx
- */
-
-import {
-  type JSX,
-  createContext,
-  createMemo,
-  createSignal,
-  splitProps,
-  useContext,
-  For,
-  Show,
-} from 'solid-js';
-import {
-  createDateField,
-  createDateSegment,
-  type AriaDateFieldProps,
-} from '@proyecto-viviana/solidaria';
-import {
-  createDateFieldState,
-  type DateFieldState,
-  type DateFieldStateProps,
-  type DateSegment as DateSegmentType,
-  type CalendarDate,
-  type DateValue,
-} from '@proyecto-viviana/solid-stately';
-import {
-  type RenderChildren,
-  type ClassNameOrFunction,
-  type StyleOrFunction,
-  type SlotProps,
-  useRenderProps,
-  dataAttr,
-  useIsHydrated,
-} from './utils';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface DateFieldRenderProps {
-  /** Whether the field is disabled. */
-  isDisabled: boolean;
-  /** Whether the field is read-only. */
-  isReadOnly: boolean;
-  /** Whether the field is required. */
-  isRequired: boolean;
-  /** Whether the field is invalid. */
-  isInvalid: boolean;
-}
-
-export interface DateFieldProps<T extends DateValue = DateValue>
-  extends Omit<AriaDateFieldProps, 'id' | 'isDisabled' | 'isReadOnly' | 'isRequired'>,
-    Omit<DateFieldStateProps<T>, 'locale'>,
-    SlotProps {
-  /** The children of the component. */
-  children?: JSX.Element | ((segment: DateSegmentType) => JSX.Element);
-  /** The CSS className for the element. */
-  class?: ClassNameOrFunction<DateFieldRenderProps>;
-  /** The inline style for the element. */
-  style?: StyleOrFunction<DateFieldRenderProps>;
-  /** The locale to use for formatting. */
-  locale?: string;
-}
-
-export interface DateInputRenderProps {
-  /** Whether the input is disabled. */
-  isDisabled: boolean;
-  /** Whether the input is focused. */
-  isFocused: boolean;
-}
-
-export interface DateInputProps extends SlotProps {
-  /** The children of the component (render function receiving segments). */
-  children?: (segment: DateSegmentType) => JSX.Element;
-  /** The CSS className for the element. */
-  class?: ClassNameOrFunction<DateInputRenderProps>;
-  /** The inline style for the element. */
-  style?: StyleOrFunction<DateInputRenderProps>;
-}
-
-export interface DateSegmentRenderProps {
-  /** Whether the segment is focused. */
-  isFocused: boolean;
-  /** Whether the segment is editable. */
-  isEditable: boolean;
-  /** Whether the segment is a placeholder. */
-  isPlaceholder: boolean;
-  /** The segment type. */
-  type: DateSegmentType['type'];
-  /** The text to display. */
-  text: string;
-}
-
-export interface DateSegmentProps extends SlotProps {
-  /** The segment data. */
-  segment: DateSegmentType;
-  /** The children of the component. A function may be provided to receive render props. */
-  children?: RenderChildren<DateSegmentRenderProps>;
-  /** The CSS className for the element. */
-  class?: ClassNameOrFunction<DateSegmentRenderProps>;
-  /** The inline style for the element. */
-  style?: StyleOrFunction<DateSegmentRenderProps>;
-}
-
-// ============================================
-// CONTEXT
-// ============================================
-
-export const DateFieldContext = createContext<DateFieldState<DateValue> | null>(null);
-
-export function useDateFieldContext(): DateFieldState<DateValue> {
-  const context = useContext(DateFieldContext);
-  if (!context) {
-    throw new Error('DateField components must be used within a DateField');
-  }
-  return context;
-}
-
-// ============================================
-// DATE FIELD COMPONENT
-// ============================================
-
-/**
- * A date field allows users to enter and edit date values using a keyboard.
- *
- * @example
- * ```tsx
- * <DateField label="Date">
- *   <Label>Date</Label>
- *   <DateInput>
- *     {(segment) => <DateSegment segment={segment} />}
- *   </DateInput>
- * </DateField>
- * ```
- */
-export function DateField<T extends DateValue = CalendarDate>(
-  props: DateFieldProps<T>
-): JSX.Element {
-  // Use hydration-safe pattern for client-only rendering
-  const isHydrated = useIsHydrated();
-
-  return (
-    <Show
-      when={isHydrated()}
-      fallback={<div class="solidaria-DateField solidaria-DateField--placeholder" aria-hidden="true" />}
-    >
-      <DateFieldInner {...props} />
-    </Show>
-  );
-}
-
-/**
- * Internal DateField component that renders after client mount.
- */
-function DateFieldInner<T extends DateValue = CalendarDate>(
-  props: DateFieldProps<T>
-): JSX.Element {
-  const [local, stateProps, rest] = splitProps(
-    props,
-    ['children', 'class', 'style', 'slot'],
-    [
-      'value',
-      'defaultValue',
-      'onChange',
-      'minValue',
-      'maxValue',
-      'isDisabled',
-      'isReadOnly',
-      'isRequired',
-      'locale',
-      'granularity',
-      'hourCycle',
-      'hideTimeZone',
-      'placeholderValue',
-      'validationState',
-      'description',
-      'errorMessage',
-    ]
-  );
-
-  const [fieldRef, setFieldRef] = createSignal<HTMLDivElement | null>(null);
-
-  // Create date field state
-  const state = createDateFieldState(stateProps);
-
-  // Create date field ARIA props
-  const fieldAria = createDateField(rest, state as unknown as DateFieldState<DateValue>, fieldRef);
-
-  // Render props values
-  const renderValues = createMemo<DateFieldRenderProps>(() => ({
-    isDisabled: state.isDisabled(),
-    isReadOnly: state.isReadOnly(),
-    isRequired: state.isRequired(),
-    isInvalid: state.isInvalid(),
-  }));
-
-  // Resolve render props
-  const renderProps = useRenderProps(
-    {
-      class: local.class,
-      style: local.style,
-      defaultClassName: 'solidaria-DateField',
-    },
-    renderValues
-  );
-
-  return (
-    <DateFieldContext.Provider value={state as unknown as DateFieldState<DateValue>}>
-      <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())}
-      >
-        {props.children as JSX.Element}
-      </div>
-    </DateFieldContext.Provider>
-  );
-}
-
-// ============================================
-// DATE INPUT COMPONENT
-// ============================================
-
-/**
- * The input area containing date segments.
- */
-export function DateInput(props: DateInputProps): JSX.Element {
-  const state = useDateFieldContext();
-  const [isFocused, setIsFocused] = createSignal(false);
-
-  // Render props values
-  const renderValues = createMemo<DateInputRenderProps>(() => ({
-    isDisabled: state.isDisabled(),
-    isFocused: isFocused(),
-  }));
-
-  // Resolve render props
-  const renderProps = useRenderProps(
-    {
-      class: props.class,
-      style: props.style,
-      defaultClassName: 'solidaria-DateInput',
-    },
-    renderValues
-  );
-
-  return (
-    <div
-      role="presentation"
-      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>
-  );
-}
-
-// ============================================
-// DATE SEGMENT COMPONENT
-// ============================================
-
-/**
- * A segment of a date field (year, month, day, etc.).
- */
-export function DateSegment(props: DateSegmentProps): JSX.Element {
-  const state = useDateFieldContext();
-  const [segmentRef, setSegmentRef] = createSignal<HTMLDivElement | null>(null);
-
-  // Create segment ARIA props
-  const segmentAria = createDateSegment(
-    { segment: props.segment },
-    state,
-    segmentRef
-  );
-
-  // Render props values
-  const renderValues = createMemo<DateSegmentRenderProps>(() => ({
-    isFocused: segmentAria.isFocused,
-    isEditable: segmentAria.isEditable,
-    isPlaceholder: segmentAria.isPlaceholder,
-    type: props.segment.type,
-    text: segmentAria.text,
-  }));
-
-  // Resolve render props
-  const renderProps = useRenderProps(
-    {
-      children: props.children,
-      class: props.class,
-      style: props.style,
-      defaultClassName: 'solidaria-DateSegment',
-    },
-    renderValues
-  );
-
-  // Determine children content - avoid Show for SSR hydration compatibility
-  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>
-  );
-}
-
-// Re-export types
-export type { DateFieldState, DateSegmentType };

package/src/DatePicker.tsx

@@ -1,367 +0,0 @@
-/**
- * DatePicker component for solidaria-components
- *
- * Pre-wired headless date picker component that combines a date field with a calendar popup.
- * Port of react-aria-components/src/DatePicker.tsx
- */
-
-import {
-  type JSX,
-  createContext,
-  createMemo,
-  createSignal,
-  splitProps,
-  useContext,
-  Show,
-} from 'solid-js';
-import {
-  createDatePicker,
-  type AriaDatePickerProps,
-  type DatePickerState as AriaDatePickerState,
-} from '@proyecto-viviana/solidaria';
-import {
-  createDateFieldState,
-  createCalendarState,
-  type DateFieldState,
-  type CalendarState,
-  type DateFieldStateProps,
-  type CalendarDate,
-  type DateValue,
-} from '@proyecto-viviana/solid-stately';
-import {
-  type RenderChildren,
-  type ClassNameOrFunction,
-  type StyleOrFunction,
-  type SlotProps,
-  useRenderProps,
-  dataAttr,
-  useIsHydrated,
-} from './utils';
-import { DateFieldContext } from './DateField';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface DatePickerRenderProps {
-  /** Whether the picker is disabled. */
-  isDisabled: boolean;
-  /** Whether the picker is read-only. */
-  isReadOnly: boolean;
-  /** Whether the picker is required. */
-  isRequired: boolean;
-  /** Whether the picker is invalid. */
-  isInvalid: boolean;
-  /** Whether the calendar is open. */
-  isOpen: boolean;
-}
-
-export interface DatePickerContextValue {
-  fieldState: DateFieldState<DateValue>;
-  calendarState: CalendarState<DateValue>;
-  overlayState: {
-    isOpen: boolean;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-  };
-  pickerAria: ReturnType<typeof createDatePicker>;
-}
-
-export interface DatePickerProps<T extends DateValue = DateValue>
-  extends Omit<AriaDatePickerProps, 'id' | 'isDisabled' | 'isReadOnly' | 'isRequired'>,
-    Omit<DateFieldStateProps<T>, 'locale'>,
-    SlotProps {
-  /** The children of the component. */
-  children?: JSX.Element;
-  /** The CSS className for the element. */
-  class?: ClassNameOrFunction<DatePickerRenderProps>;
-  /** The inline style for the element. */
-  style?: StyleOrFunction<DatePickerRenderProps>;
-  /** The locale to use for formatting. */
-  locale?: string;
-  /** Whether the calendar should close when a date is selected. */
-  shouldCloseOnSelect?: boolean;
-}
-
-export interface DatePickerButtonRenderProps {
-  /** Whether the button is disabled. */
-  isDisabled: boolean;
-  /** Whether the calendar is open. */
-  isOpen: boolean;
-}
-
-export interface DatePickerButtonProps extends SlotProps {
-  /** The children of the component. */
-  children?: RenderChildren<DatePickerButtonRenderProps>;
-  /** The CSS className for the element. */
-  class?: ClassNameOrFunction<DatePickerButtonRenderProps>;
-  /** The inline style for the element. */
-  style?: StyleOrFunction<DatePickerButtonRenderProps>;
-  /** Whether the button is disabled. */
-  isDisabled?: boolean;
-}
-
-// ============================================
-// CONTEXT
-// ============================================
-
-export const DatePickerContext = createContext<DatePickerContextValue | null>(null);
-
-export function useDatePickerContext(): DatePickerContextValue {
-  const context = useContext(DatePickerContext);
-  if (!context) {
-    throw new Error('DatePicker components must be used within a DatePicker');
-  }
-  return context;
-}
-
-// ============================================
-// DATE PICKER COMPONENT
-// ============================================
-
-/**
- * A date picker combines a DateField and a Calendar popover.
- *
- * @example
- * ```tsx
- * <DatePicker label="Event date">
- *   <Label>Event date</Label>
- *   <Group>
- *     <DateInput>
- *       {(segment) => <DateSegment segment={segment} />}
- *     </DateInput>
- *     <DatePickerButton>📅</DatePickerButton>
- *   </Group>
- *   <Popover>
- *     <Dialog>
- *       <Calendar>
- *         <CalendarGrid>
- *           {(date) => <CalendarCell date={date} />}
- *         </CalendarGrid>
- *       </Calendar>
- *     </Dialog>
- *   </Popover>
- * </DatePicker>
- * ```
- */
-export function DatePicker<T extends DateValue = CalendarDate>(
-  props: DatePickerProps<T>
-): JSX.Element {
-  // Use hydration-safe pattern for client-only rendering
-  const isHydrated = useIsHydrated();
-
-  return (
-    <Show
-      when={isHydrated()}
-      fallback={<div class="solidaria-DatePicker solidaria-DatePicker--placeholder" aria-hidden="true" />}
-    >
-      <DatePickerInner {...props} />
-    </Show>
-  );
-}
-
-/**
- * Internal DatePicker component that renders after client mount.
- */
-function DatePickerInner<T extends DateValue = CalendarDate>(
-  props: DatePickerProps<T>
-): JSX.Element {
-  const [local, stateProps, rest] = splitProps(
-    props,
-    ['children', 'class', 'style', 'slot', 'shouldCloseOnSelect'],
-    [
-      'value',
-      'defaultValue',
-      'onChange',
-      'minValue',
-      'maxValue',
-      'isDisabled',
-      'isReadOnly',
-      'isRequired',
-      'locale',
-      'granularity',
-      'hourCycle',
-      'hideTimeZone',
-      'placeholderValue',
-      'validationState',
-      'description',
-      'errorMessage',
-    ]
-  );
-
-  // Create overlay trigger state
-  const [isOpen, setIsOpen] = createSignal(false);
-
-  const overlayState = {
-    get isOpen() { return isOpen(); },
-    open: () => setIsOpen(true),
-    close: () => setIsOpen(false),
-    toggle: () => setIsOpen((prev) => !prev),
-  };
-
-  // Create date field state
-  const fieldState = createDateFieldState({
-    ...stateProps,
-    onChange: (value) => {
-      stateProps.onChange?.(value);
-      if (local.shouldCloseOnSelect !== false && value) {
-        overlayState.close();
-      }
-    },
-  });
-
-  // Create calendar state that syncs with field
-  const calendarState = createCalendarState({
-    value: () => fieldState.value(),
-    onChange: (value) => {
-      fieldState.setValue(value as T | null);
-      if (local.shouldCloseOnSelect !== false) {
-        overlayState.close();
-      }
-    },
-    minValue: stateProps.minValue,
-    maxValue: stateProps.maxValue,
-    isDisabled: stateProps.isDisabled,
-    isReadOnly: stateProps.isReadOnly,
-    locale: stateProps.locale,
-  });
-
-  // Create date picker ARIA props
-  const pickerAria = createDatePicker(
-    rest,
-    fieldState as unknown as DateFieldState<DateValue>,
-    overlayState as AriaDatePickerState,
-    calendarState as unknown as CalendarState<DateValue>
-  );
-
-  // Context value
-  const contextValue: DatePickerContextValue = {
-    fieldState: fieldState as unknown as DateFieldState<DateValue>,
-    calendarState: calendarState as unknown as CalendarState<DateValue>,
-    overlayState,
-    pickerAria,
-  };
-
-  // Render props values
-  const renderValues = createMemo<DatePickerRenderProps>(() => ({
-    isDisabled: fieldState.isDisabled(),
-    isReadOnly: fieldState.isReadOnly(),
-    isRequired: fieldState.isRequired(),
-    isInvalid: fieldState.isInvalid(),
-    isOpen: overlayState.isOpen,
-  }));
-
-  // Resolve render props
-  const renderProps = useRenderProps(
-    {
-      class: local.class,
-      style: local.style,
-      defaultClassName: 'solidaria-DatePicker',
-    },
-    renderValues
-  );
-
-  return (
-    <DatePickerContext.Provider value={contextValue}>
-      {/* Also provide DateFieldContext so DateInput/DateSegment work inside DatePicker */}
-      <DateFieldContext.Provider value={fieldState as unknown as DateFieldState<DateValue>}>
-        <div
-          {...pickerAria.groupProps}
-          class={renderProps.class()}
-          style={renderProps.style()}
-          data-disabled={dataAttr(fieldState.isDisabled())}
-          data-readonly={dataAttr(fieldState.isReadOnly())}
-          data-required={dataAttr(fieldState.isRequired())}
-          data-invalid={dataAttr(fieldState.isInvalid())}
-          data-open={dataAttr(overlayState.isOpen)}
-        >
-          {props.children}
-        </div>
-      </DateFieldContext.Provider>
-    </DatePickerContext.Provider>
-  );
-}
-
-// ============================================
-// DATE PICKER BUTTON COMPONENT
-// ============================================
-
-/**
- * A button that opens the date picker calendar.
- */
-export function DatePickerButton(props: DatePickerButtonProps): JSX.Element {
-  const context = useDatePickerContext();
-
-  // Render props values
-  const renderValues = createMemo<DatePickerButtonRenderProps>(() => ({
-    isDisabled: context.fieldState.isDisabled() || (props.isDisabled ?? false),
-    isOpen: context.overlayState.isOpen,
-  }));
-
-  // Resolve render props
-  const renderProps = useRenderProps(
-    {
-      children: props.children,
-      class: props.class,
-      style: props.style,
-      defaultClassName: 'solidaria-DatePickerButton',
-    },
-    renderValues
-  );
-
-  // Determine children content - avoid Show for SSR hydration compatibility
-  const getChildren = () => {
-    if (typeof props.children === 'function') {
-      return renderProps.renderChildren();
-    }
-    return props.children ?? '📅';
-  };
-
-  return (
-    <button
-      {...context.pickerAria.buttonProps}
-      class={renderProps.class()}
-      style={renderProps.style()}
-      disabled={context.fieldState.isDisabled() || props.isDisabled}
-      data-disabled={dataAttr(context.fieldState.isDisabled() || props.isDisabled)}
-      data-open={dataAttr(context.overlayState.isOpen)}
-    >
-      {getChildren()}
-    </button>
-  );
-}
-
-// ============================================
-// DATE PICKER CONTENT COMPONENT
-// ============================================
-
-export interface DatePickerContentProps extends SlotProps {
-  /** The children of the component. */
-  children?: JSX.Element;
-  /** The CSS className for the element. */
-  class?: string;
-  /** The inline style for the element. */
-  style?: JSX.CSSProperties;
-}
-
-/**
- * The content area of the date picker (typically contains a Calendar).
- */
-export function DatePickerContent(props: DatePickerContentProps): JSX.Element {
-  const context = useDatePickerContext();
-
-  return (
-    <Show when={context.overlayState.isOpen}>
-      <div
-        {...context.pickerAria.dialogProps}
-        class={props.class ?? 'solidaria-DatePickerContent'}
-        style={props.style}
-      >
-        {props.children}
-      </div>
-    </Show>
-  );
-}
-
-// DatePickerContextValue is already exported at declaration