@proyecto-viviana/ui 0.3.4 → 0.4.0

package/src/calendar/RangeCalendar.tsx

@@ -1,236 +0,0 @@
-/**
- * RangeCalendar component for proyecto-viviana-ui
- *
- * Styled range calendar component built on top of solidaria-components.
- * A range calendar displays a grid of days and allows users to select a date range.
- */
-
-import { type JSX, splitProps } from 'solid-js';
-import {
-  RangeCalendar as HeadlessRangeCalendar,
-  RangeCalendarHeading,
-  RangeCalendarButton,
-  RangeCalendarGrid,
-  RangeCalendarCell,
-  type CalendarDate,
-  type DateValue,
-  type RangeValue,
-} from '@proyecto-viviana/solidaria-components';
-import type { RangeCalendarStateProps } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
-
-export type RangeCalendarSize = 'sm' | 'md' | 'lg';
-
-export interface RangeCalendarProps<T extends DateValue = DateValue>
-  extends Omit<RangeCalendarStateProps<T>, 'locale'> {
-  /** The size of the calendar. @default 'md' */
-  size?: RangeCalendarSize;
-  /** Additional CSS class name. */
-  class?: string;
-  /** The locale to use for formatting. */
-  locale?: string;
-  /** Custom aria label. */
-  'aria-label'?: string;
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const sizeStyles = {
-  sm: {
-    container: 'w-64',
-    header: 'text-sm',
-    cell: 'w-8 h-8 text-xs',
-    button: 'w-6 h-6',
-  },
-  md: {
-    container: 'w-80',
-    header: 'text-base',
-    cell: 'w-10 h-10 text-sm',
-    button: 'w-8 h-8',
-  },
-  lg: {
-    container: 'w-96',
-    header: 'text-lg',
-    cell: 'w-12 h-12 text-base',
-    button: 'w-10 h-10',
-  },
-};
-
-// ============================================
-// RANGE CALENDAR COMPONENT
-// ============================================
-
-/**
- * A range calendar displays a grid of days and allows users to select a date range.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <RangeCalendar
- *   aria-label="Trip dates"
- *   onChange={(range) => console.log(range)}
- * />
- *
- * // Controlled
- * const [range, setRange] = createSignal<RangeValue<CalendarDate> | null>(null);
- * <RangeCalendar
- *   value={range()}
- *   onChange={setRange}
- * />
- * ```
- */
-export function RangeCalendar<T extends DateValue = CalendarDate>(
-  props: RangeCalendarProps<T>
-): JSX.Element {
-  const [local, rest] = splitProps(props, [
-    'size',
-    'class',
-    'aria-label',
-  ]);
-
-  const size = () => local.size ?? 'md';
-  const sizeConfig = () => sizeStyles[size()];
-
-  return (
-    <HeadlessRangeCalendar
-      {...rest}
-      aria-label={local['aria-label']}
-      class={`
-        ${sizeConfig().container}
-        bg-bg-500 rounded-lg border border-primary-700 p-4
-        ${local.class ?? ''}
-      `}
-    >
-      {/* Header with navigation */}
-      <header class="flex items-center justify-between mb-4">
-        <RangeCalendarButton
-          slot="previous"
-          class={`
-            ${sizeConfig().button}
-            flex items-center justify-center
-            rounded-md text-primary-200
-            hover:bg-bg-400 transition-colors
-            disabled:opacity-50 disabled:cursor-not-allowed
-            focus:outline-none focus:ring-2 focus:ring-accent/50
-          `}
-        >
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="w-4 h-4"
-          >
-            <polyline points="15 18 9 12 15 6" />
-          </svg>
-        </RangeCalendarButton>
-
-        <RangeCalendarHeading
-          class={`
-            font-semibold text-primary-100
-            ${sizeConfig().header}
-          `}
-        />
-
-        <RangeCalendarButton
-          slot="next"
-          class={`
-            ${sizeConfig().button}
-            flex items-center justify-center
-            rounded-md text-primary-200
-            hover:bg-bg-400 transition-colors
-            disabled:opacity-50 disabled:cursor-not-allowed
-            focus:outline-none focus:ring-2 focus:ring-accent/50
-          `}
-        >
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="w-4 h-4"
-          >
-            <polyline points="9 18 15 12 9 6" />
-          </svg>
-        </RangeCalendarButton>
-      </header>
-
-      {/* Calendar grid */}
-      <RangeCalendarGrid
-        class="w-full border-collapse"
-      >
-        {(date) => (
-          <RangeCalendarCell
-            date={date}
-            class={({
-              isSelected,
-              isSelectionStart,
-              isSelectionEnd,
-              isFocused,
-              isDisabled,
-              isOutsideMonth,
-              isToday,
-              isPressed,
-            }) => {
-              const base = `
-                ${sizeConfig().cell}
-                flex items-center justify-center
-                cursor-pointer
-                transition-colors duration-150
-                focus:outline-none
-              `;
-
-              let stateClass = '';
-              let roundedClass = 'rounded-md';
-
-              if (isDisabled) {
-                stateClass = 'text-primary-600 cursor-not-allowed';
-              } else if (isSelectionStart && isSelectionEnd) {
-                // Single day selection
-                stateClass = 'bg-accent text-white font-medium';
-                roundedClass = 'rounded-md';
-              } else if (isSelectionStart) {
-                stateClass = 'bg-accent text-white font-medium';
-                roundedClass = 'rounded-l-md rounded-r-none';
-              } else if (isSelectionEnd) {
-                stateClass = 'bg-accent text-white font-medium';
-                roundedClass = 'rounded-r-md rounded-l-none';
-              } else if (isSelected) {
-                stateClass = 'bg-accent/20 text-primary-100';
-                roundedClass = 'rounded-none';
-              } else if (isOutsideMonth) {
-                stateClass = 'text-primary-600';
-              } else if (isToday) {
-                stateClass = 'ring-1 ring-accent text-primary-100';
-              } else {
-                stateClass = 'text-primary-200 hover:bg-bg-400';
-              }
-
-              const focusClass = isFocused && !isSelected
-                ? 'ring-2 ring-accent/50'
-                : '';
-
-              const pressedClass = isPressed && !isDisabled
-                ? 'scale-95'
-                : '';
-
-              return `${base} ${stateClass} ${roundedClass} ${focusClass} ${pressedClass}`.trim();
-            }}
-          />
-        )}
-      </RangeCalendarGrid>
-    </HeadlessRangeCalendar>
-  );
-}
-
-// Re-export types
-export type { RangeValue };

package/src/calendar/TimeField.tsx

@@ -1,196 +0,0 @@
-/**
- * TimeField component for proyecto-viviana-ui
- *
- * Styled time field component with segment-based editing.
- */
-
-import { type JSX, splitProps } from 'solid-js';
-import {
-  TimeField as HeadlessTimeField,
-  TimeInput,
-  TimeSegment,
-  type TimeFieldProps as HeadlessTimeFieldProps,
-  type TimeValue,
-} from '@proyecto-viviana/solidaria-components';
-
-// ============================================
-// TYPES
-// ============================================
-
-export type TimeFieldSize = 'sm' | 'md' | 'lg';
-
-export interface TimeFieldProps<T extends TimeValue = TimeValue>
-  extends Omit<HeadlessTimeFieldProps<T>, 'class' | 'style' | 'children'> {
-  /** The size of the field. @default 'md' */
-  size?: TimeFieldSize;
-  /** Additional CSS class name. */
-  class?: string;
-  /** Label for the field. */
-  label?: string;
-  /** Description text. */
-  description?: string;
-  /** Error message. */
-  errorMessage?: string;
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const sizeStyles = {
-  sm: {
-    container: 'text-sm',
-    input: 'px-2 py-1 gap-0.5',
-    segment: 'px-0.5',
-    label: 'text-xs',
-  },
-  md: {
-    container: 'text-base',
-    input: 'px-3 py-2 gap-1',
-    segment: 'px-1',
-    label: 'text-sm',
-  },
-  lg: {
-    container: 'text-lg',
-    input: 'px-4 py-3 gap-1.5',
-    segment: 'px-1.5',
-    label: 'text-base',
-  },
-};
-
-// ============================================
-// TIME FIELD COMPONENT
-// ============================================
-
-/**
- * A time field allows users to enter and edit time values using a keyboard.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <TimeField label="Start time" />
- *
- * // With 24-hour format
- * <TimeField
- *   label="Meeting time"
- *   hourCycle={24}
- * />
- *
- * // With seconds
- * <TimeField
- *   label="Precise time"
- *   granularity="second"
- * />
- * ```
- */
-export function TimeField<T extends TimeValue = TimeValue>(
-  props: TimeFieldProps<T>
-): JSX.Element {
-  const [local, rest] = splitProps(props, [
-    'size',
-    'class',
-    'label',
-    'description',
-    'errorMessage',
-    'isInvalid',
-  ]);
-
-  const size = () => local.size ?? 'md';
-  const sizeConfig = () => sizeStyles[size()];
-  const isInvalid = () => local.isInvalid || !!local.errorMessage;
-
-  return (
-    <HeadlessTimeField
-      {...rest}
-      isInvalid={isInvalid()}
-      class={`
-        flex flex-col gap-1
-        ${sizeConfig().container}
-        ${local.class ?? ''}
-      `}
-    >
-      {/* Label */}
-      {local.label && (
-        <label class={`font-medium text-primary-200 ${sizeConfig().label}`}>
-          {local.label}
-          {rest.isRequired && <span class="text-red-500 ml-0.5">*</span>}
-        </label>
-      )}
-
-      {/* Input container */}
-      <TimeInput
-        class={({ isFocused, isDisabled }) => {
-          const base = `
-            inline-flex items-center
-            ${sizeConfig().input}
-            bg-bg-400 rounded-md border
-            transition-colors duration-150
-          `;
-
-          let borderClass = 'border-primary-600';
-          if (isInvalid()) {
-            borderClass = 'border-red-500';
-          } else if (isFocused) {
-            borderClass = 'border-accent';
-          }
-
-          const disabledClass = isDisabled
-            ? 'opacity-50 cursor-not-allowed'
-            : '';
-
-          const focusClass = isFocused
-            ? 'ring-2 ring-accent/30'
-            : '';
-
-          return `${base} ${borderClass} ${disabledClass} ${focusClass}`.trim();
-        }}
-      >
-        {(segment) => (
-          <TimeSegment
-            segment={segment}
-            class={({ isFocused, isPlaceholder, isEditable }) => {
-              const base = `
-                ${sizeConfig().segment}
-                rounded
-                outline-none
-                tabular-nums
-              `;
-
-              let stateClass = '';
-              if (segment.type === 'literal') {
-                stateClass = 'text-primary-400';
-              } else if (isPlaceholder) {
-                stateClass = 'text-primary-500 italic';
-              } else {
-                stateClass = 'text-primary-100';
-              }
-
-              const focusClass = isFocused && isEditable
-                ? 'bg-accent text-white'
-                : '';
-
-              return `${base} ${stateClass} ${focusClass}`.trim();
-            }}
-          />
-        )}
-      </TimeInput>
-
-      {/* Description */}
-      {local.description && !isInvalid() && (
-        <p class={`text-primary-400 ${sizeConfig().label}`}>
-          {local.description}
-        </p>
-      )}
-
-      {/* Error message */}
-      {isInvalid() && local.errorMessage && (
-        <p class={`text-red-500 ${sizeConfig().label}`}>
-          {local.errorMessage}
-        </p>
-      )}
-    </HeadlessTimeField>
-  );
-}
-
-// Re-export types
-export type { TimeValue };

package/src/calendar/index.tsx

@@ -1,223 +0,0 @@
-/**
- * Calendar component for proyecto-viviana-ui
- *
- * Styled calendar component built on top of solidaria-components.
- * A calendar displays a grid of days and allows users to select dates.
- */
-
-import { type JSX, splitProps } from 'solid-js';
-import {
-  Calendar as HeadlessCalendar,
-  CalendarHeading,
-  CalendarButton,
-  CalendarGrid,
-  CalendarCell,
-  type CalendarDate,
-  type DateValue,
-} from '@proyecto-viviana/solidaria-components';
-import type { CalendarStateProps } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
-
-export type CalendarSize = 'sm' | 'md' | 'lg';
-
-export interface CalendarProps<T extends DateValue = DateValue>
-  extends Omit<CalendarStateProps<T>, 'locale'> {
-  /** The size of the calendar. @default 'md' */
-  size?: CalendarSize;
-  /** Additional CSS class name. */
-  class?: string;
-  /** Whether to show week numbers. */
-  showWeekNumbers?: boolean;
-  /** The locale to use for formatting. */
-  locale?: string;
-  /** Custom aria label. */
-  'aria-label'?: string;
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const sizeStyles = {
-  sm: {
-    container: 'w-64',
-    header: 'text-sm',
-    cell: 'w-8 h-8 text-xs',
-    button: 'w-6 h-6',
-  },
-  md: {
-    container: 'w-80',
-    header: 'text-base',
-    cell: 'w-10 h-10 text-sm',
-    button: 'w-8 h-8',
-  },
-  lg: {
-    container: 'w-96',
-    header: 'text-lg',
-    cell: 'w-12 h-12 text-base',
-    button: 'w-10 h-10',
-  },
-};
-
-// ============================================
-// CALENDAR COMPONENT
-// ============================================
-
-/**
- * A calendar displays a grid of days and allows users to select a date.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <Calendar
- *   aria-label="Event date"
- *   onChange={(date) => console.log(date)}
- * />
- *
- * // Controlled
- * const [date, setDate] = createSignal<CalendarDate | null>(null);
- * <Calendar
- *   value={date()}
- *   onChange={setDate}
- * />
- *
- * // With min/max dates
- * <Calendar
- *   minValue={today(getLocalTimeZone())}
- *   maxValue={today(getLocalTimeZone()).add({ months: 3 })}
- * />
- * ```
- */
-export function Calendar<T extends DateValue = CalendarDate>(
-  props: CalendarProps<T>
-): JSX.Element {
-  const [local, rest] = splitProps(props, [
-    'size',
-    'class',
-    'showWeekNumbers',
-    'aria-label',
-  ]);
-
-  const size = () => local.size ?? 'md';
-  const sizeConfig = () => sizeStyles[size()];
-
-  return (
-    <HeadlessCalendar
-      {...rest}
-      aria-label={local['aria-label']}
-      class={`
-        ${sizeConfig().container}
-        bg-bg-500 rounded-lg border border-primary-700 p-4
-        ${local.class ?? ''}
-      `}
-    >
-      {/* Header with navigation */}
-      <header class="flex items-center justify-between mb-4">
-        <CalendarButton
-          slot="previous"
-          class={`
-            ${sizeConfig().button}
-            flex items-center justify-center
-            rounded-md text-primary-200
-            hover:bg-bg-400 transition-colors
-            disabled:opacity-50 disabled:cursor-not-allowed
-            focus:outline-none focus:ring-2 focus:ring-accent/50
-          `}
-        >
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="w-4 h-4"
-          >
-            <polyline points="15 18 9 12 15 6" />
-          </svg>
-        </CalendarButton>
-
-        <CalendarHeading
-          class={`
-            font-semibold text-primary-100
-            ${sizeConfig().header}
-          `}
-        />
-
-        <CalendarButton
-          slot="next"
-          class={`
-            ${sizeConfig().button}
-            flex items-center justify-center
-            rounded-md text-primary-200
-            hover:bg-bg-400 transition-colors
-            disabled:opacity-50 disabled:cursor-not-allowed
-            focus:outline-none focus:ring-2 focus:ring-accent/50
-          `}
-        >
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="w-4 h-4"
-          >
-            <polyline points="9 18 15 12 9 6" />
-          </svg>
-        </CalendarButton>
-      </header>
-
-      {/* Calendar grid */}
-      <CalendarGrid
-        class="w-full border-collapse"
-      >
-        {(date) => (
-          <CalendarCell
-            date={date}
-            class={({ isSelected, isFocused, isDisabled, isOutsideMonth, isToday, isPressed }) => {
-              const base = `
-                ${sizeConfig().cell}
-                flex items-center justify-center
-                rounded-md cursor-pointer
-                transition-colors duration-150
-                focus:outline-none
-              `;
-
-              let stateClass = '';
-
-              if (isDisabled) {
-                stateClass = 'text-primary-600 cursor-not-allowed';
-              } else if (isSelected) {
-                stateClass = 'bg-accent text-white font-medium';
-              } else if (isOutsideMonth) {
-                stateClass = 'text-primary-600';
-              } else if (isToday) {
-                stateClass = 'ring-1 ring-accent text-primary-100';
-              } else {
-                stateClass = 'text-primary-200 hover:bg-bg-400';
-              }
-
-              const focusClass = isFocused && !isSelected
-                ? 'ring-2 ring-accent/50'
-                : '';
-
-              const pressedClass = isPressed && !isDisabled
-                ? 'scale-95'
-                : '';
-
-              return `${base} ${stateClass} ${focusClass} ${pressedClass}`.trim();
-            }}
-          />
-        )}
-      </CalendarGrid>
-    </HeadlessCalendar>
-  );
-}
-
-// Re-export types
-export type { CalendarDate, DateValue };