@proyecto-viviana/ui 0.3.1 → 0.3.3

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

@@ -0,0 +1,257 @@
+/**
+ * Checkbox component for proyecto-viviana-ui
+ *
+ * A styled checkbox component built on top of solidaria-components.
+ * This component only handles styling - all behavior and accessibility
+ * is provided by the headless Checkbox from solidaria-components.
+ */
+
+import { type JSX, splitProps, mergeProps as solidMergeProps, Show } from 'solid-js'
+import {
+  Checkbox as HeadlessCheckbox,
+  CheckboxGroup as HeadlessCheckboxGroup,
+  type CheckboxProps as HeadlessCheckboxProps,
+  type CheckboxGroupProps as HeadlessCheckboxGroupProps,
+  type CheckboxRenderProps,
+  type CheckboxGroupRenderProps,
+} from '@proyecto-viviana/solidaria-components'
+
+// ============================================
+// TYPES
+// ============================================
+
+export type CheckboxSize = 'sm' | 'md' | 'lg'
+
+export interface CheckboxProps extends Omit<HeadlessCheckboxProps, 'class' | 'children' | 'style'> {
+  /** The size of the checkbox. */
+  size?: CheckboxSize
+  /** Additional CSS class name. */
+  class?: string
+  /** Label text for the checkbox. */
+  children?: JSX.Element
+}
+
+export interface CheckboxGroupProps extends Omit<HeadlessCheckboxGroupProps, 'class' | 'children' | 'style'> {
+  /** Additional CSS class name. */
+  class?: string
+  /** Children checkboxes. */
+  children?: JSX.Element
+  /** Label for the group. */
+  label?: string
+  /** Description for the group. */
+  description?: string
+  /** Error message when invalid. */
+  errorMessage?: string
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const sizeStyles = {
+  sm: {
+    box: 'h-4 w-4',
+    icon: 'h-3 w-3',
+    label: 'text-sm',
+  },
+  md: {
+    box: 'h-5 w-5',
+    icon: 'h-3.5 w-3.5',
+    label: 'text-base',
+  },
+  lg: {
+    box: 'h-6 w-6',
+    icon: 'h-4 w-4',
+    label: 'text-lg',
+  },
+}
+
+// ============================================
+// ICONS
+// ============================================
+
+function CheckIcon(props: { class?: string }) {
+  return (
+    <svg
+      class={props.class}
+      viewBox="0 0 12 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 5L4.5 8.5L11 1"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+function IndeterminateIcon(props: { class?: string }) {
+  return (
+    <svg
+      class={props.class}
+      viewBox="0 0 12 2"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 1H11"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+      />
+    </svg>
+  )
+}
+
+// ============================================
+// CHECKBOX COMPONENT
+// ============================================
+
+/**
+ * A checkbox allows users to select one or more items from a set.
+ *
+ * Built on solidaria-components Checkbox for full accessibility support.
+ */
+export function Checkbox(props: CheckboxProps): JSX.Element {
+  const defaultProps: Partial<CheckboxProps> = {
+    size: 'md',
+  }
+
+  const merged = solidMergeProps(defaultProps, props)
+
+  const [local, headlessProps] = splitProps(merged, [
+    'size',
+    'class',
+    'children',
+  ])
+
+  const size = () => sizeStyles[local.size!]
+
+  // Generate class based on render props
+  const getClassName = (renderProps: CheckboxRenderProps): string => {
+    const base = 'inline-flex items-center gap-2 cursor-pointer'
+    const disabledClass = renderProps.isDisabled ? 'cursor-not-allowed opacity-50' : ''
+    const custom = local.class || ''
+    return [base, disabledClass, custom].filter(Boolean).join(' ')
+  }
+
+  return (
+    <HeadlessCheckbox
+      {...headlessProps}
+      class={getClassName}
+    >
+      {(renderProps: CheckboxRenderProps) => {
+        const boxClasses = () => {
+          const base = 'relative flex items-center justify-center rounded border-2 transition-all duration-200'
+          const sizeClass = size().box
+
+          let colorClass: string
+          if (renderProps.isDisabled) {
+            colorClass = 'border-bg-300 bg-bg-200'
+          } else if (renderProps.isSelected || renderProps.isIndeterminate) {
+            colorClass = 'border-accent bg-accent'
+          } else {
+            colorClass = 'border-primary-600 bg-transparent hover:border-accent-300'
+          }
+
+          const focusClass = renderProps.isFocusVisible
+            ? 'ring-2 ring-accent-300 ring-offset-2 ring-offset-bg-400'
+            : ''
+          const cursorClass = renderProps.isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'
+
+          return [base, sizeClass, colorClass, focusClass, cursorClass].filter(Boolean).join(' ')
+        }
+
+        const iconClasses = () => {
+          const base = 'text-white transition-opacity duration-200'
+          const sizeClass = size().icon
+          const visibilityClass = (renderProps.isSelected || renderProps.isIndeterminate)
+            ? 'opacity-100'
+            : 'opacity-0'
+
+          return [base, sizeClass, visibilityClass].filter(Boolean).join(' ')
+        }
+
+        const labelClasses = () => {
+          const base = 'text-primary-200'
+          const sizeClass = size().label
+          const disabledClass = renderProps.isDisabled ? 'opacity-50' : ''
+
+          return [base, sizeClass, disabledClass].filter(Boolean).join(' ')
+        }
+
+        return (
+          <>
+            <span class={boxClasses()}>
+              <Show
+                when={!renderProps.isIndeterminate}
+                fallback={<IndeterminateIcon class={iconClasses()} />}
+              >
+                <CheckIcon class={iconClasses()} />
+              </Show>
+            </span>
+            <Show when={props.children}>
+              <span class={labelClasses()}>{props.children}</span>
+            </Show>
+          </>
+        )
+      }}
+    </HeadlessCheckbox>
+  )
+}
+
+// ============================================
+// CHECKBOX GROUP COMPONENT
+// ============================================
+
+/**
+ * A checkbox group allows users to select multiple items from a list.
+ *
+ * Built on solidaria-components CheckboxGroup for full accessibility support.
+ */
+export function CheckboxGroup(props: CheckboxGroupProps): JSX.Element {
+  const [local, headlessProps] = splitProps(props, [
+    'class',
+    'label',
+    'description',
+    'errorMessage',
+  ])
+
+  // Generate class based on render props
+  const getClassName = (renderProps: CheckboxGroupRenderProps): string => {
+    const base = 'flex flex-col gap-2'
+    const disabledClass = renderProps.isDisabled ? 'opacity-50' : ''
+    const custom = local.class || ''
+    return [base, disabledClass, custom].filter(Boolean).join(' ')
+  }
+
+  // Render children function for the headless component
+  const renderChildren = (renderProps: CheckboxGroupRenderProps) => (
+    <>
+      <Show when={local.label}>
+        <span class="text-sm font-medium text-primary-200">{local.label}</span>
+      </Show>
+      <div class="flex flex-col gap-2">
+        {props.children}
+      </div>
+      <Show when={local.description && !renderProps.isInvalid}>
+        <span class="text-sm text-primary-400">{local.description}</span>
+      </Show>
+      <Show when={local.errorMessage && renderProps.isInvalid}>
+        <span class="text-sm text-danger-400">{local.errorMessage}</span>
+      </Show>
+    </>
+  )
+
+  return (
+    <HeadlessCheckboxGroup
+      {...headlessProps}
+      class={getClassName}
+      children={renderChildren as any}
+    />
+  )
+}