@proyecto-viviana/ui 0.1.7 → 0.2.0

package/src/calendar/RangeCalendar.tsx

@@ -0,0 +1,236 @@
+/**
+ * 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

@@ -0,0 +1,196 @@
+/**
+ * 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

@@ -0,0 +1,223 @@
+/**
+ * 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 };

package/src/checkbox/index.tsx

@@ -194,8 +194,8 @@ export function Checkbox(props: CheckboxProps): JSX.Element {
                 <CheckIcon class={iconClasses()} />
               </Show>
             </span>
-            <Show when={local.children}>
-              <span class={labelClasses()}>{local.children}</span>
+            <Show when={props.children}>
+              <span class={labelClasses()}>{props.children}</span>
             </Show>
           </>
         )
@@ -216,7 +216,6 @@ export function Checkbox(props: CheckboxProps): JSX.Element {
 export function CheckboxGroup(props: CheckboxGroupProps): JSX.Element {
   const [local, headlessProps] = splitProps(props, [
     'class',
-    'children',
     'label',
     'description',
     'errorMessage',
@@ -237,7 +236,7 @@ export function CheckboxGroup(props: CheckboxGroupProps): JSX.Element {
         <span class="text-sm font-medium text-primary-200">{local.label}</span>
       </Show>
       <div class="flex flex-col gap-2">
-        {local.children}
+        {props.children}
       </div>
       <Show when={local.description && !renderProps.isInvalid}>
         <span class="text-sm text-primary-400">{local.description}</span>