@proyecto-viviana/ui 0.2.3 → 0.3.1

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 };

package/src/checkbox/index.tsx

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