@proyecto-viviana/silapse 0.4.0

package/src/calendar/index.tsx

@@ -0,0 +1,225 @@
+/**
+ * Calendar component for proyecto-viviana-silapse
+ *
+ * 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';
+import { useProviderProps } from '../provider';
+
+// ============================================
+// 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 mergedProps = useProviderProps(props);
+  const [local, rest] = splitProps(mergedProps, [
+    '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-bg-400 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/card/index.tsx

@@ -0,0 +1,24 @@
+/**
+ * Card component for proyecto-viviana-silapse.
+ *
+ * Styling-only surface container primitive.
+ */
+
+import { type JSX, splitProps } from 'solid-js';
+
+export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export function Card(props: CardProps): JSX.Element {
+  const [local, domProps] = splitProps(props, ['class', 'children']);
+  return (
+    <div
+      {...domProps}
+      class={`rounded-xl border border-primary-600 bg-bg-300 p-4 ${local.class ?? ''}`}
+    >
+      {local.children}
+    </div>
+  );
+}
+

package/src/checkbox/index.tsx

@@ -0,0 +1,259 @@
+/**
+ * Checkbox component for proyecto-viviana-silapse
+ *
+ * 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'
+import { useProviderProps } from '../provider'
+
+// ============================================
+// 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 providerProps = useProviderProps(props)
+  const defaultProps: Partial<CheckboxProps> = {
+    size: 'md',
+  }
+
+  const merged = solidMergeProps(defaultProps, providerProps)
+
+  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 mergedProps = useProviderProps(props)
+  const [local, headlessProps] = splitProps(mergedProps, [
+    '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}
+    />
+  )
+}

package/src/color/ColorEditor.tsx

@@ -0,0 +1,60 @@
+/**
+ * ColorEditor component for proyecto-viviana-silapse
+ *
+ * Styled color editor composing ColorArea, ColorSliders, and ColorFields.
+ */
+
+import { type JSX, splitProps } from 'solid-js'
+import {
+  ColorEditor as HeadlessColorEditor,
+  type ColorEditorProps as HeadlessColorEditorProps,
+} from '@proyecto-viviana/solidaria-components'
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface ColorEditorProps extends Omit<HeadlessColorEditorProps, 'class' | 'style'> {
+  /** Additional CSS class name. */
+  class?: string
+}
+
+// ============================================
+// COMPONENT
+// ============================================
+
+/**
+ * A complete color editor with area, hue slider, alpha slider,
+ * color space selector, and channel fields.
+ */
+export function ColorEditor(props: ColorEditorProps): JSX.Element {
+  const [local, headlessProps] = splitProps(props, ['class'])
+
+  return (
+    <HeadlessColorEditor
+      {...headlessProps}
+      class={({ colorSpace }) => {
+        const base = [
+          // Container
+          'flex flex-col gap-3',
+          // Ensure readable defaults for nested native form controls
+          '[&_label]:text-primary-200 [&_input]:text-primary-100',
+          // Top row (area + sliders)
+          '[&_.solidaria-ColorEditor-top]:flex [&_.solidaria-ColorEditor-top]:gap-3',
+          // Bottom row (format + fields)
+          '[&_.solidaria-ColorEditor-bottom]:flex [&_.solidaria-ColorEditor-bottom]:gap-2 [&_.solidaria-ColorEditor-bottom]:items-end',
+          // Format selector styling
+          '[&_.solidaria-ColorEditor-format]:h-8 [&_.solidaria-ColorEditor-format]:px-2 [&_.solidaria-ColorEditor-format]:text-sm',
+          '[&_.solidaria-ColorEditor-format]:rounded-md [&_.solidaria-ColorEditor-format]:border [&_.solidaria-ColorEditor-format]:border-bg-300',
+          '[&_.solidaria-ColorEditor-format]:bg-bg-400 [&_.solidaria-ColorEditor-format]:text-primary-200',
+          '[&_.solidaria-ColorEditor-format]:outline-none [&_.solidaria-ColorEditor-format]:focus:ring-2 [&_.solidaria-ColorEditor-format]:focus:ring-accent',
+          // Channel fields
+          '[&_.solidaria-ColorField-input]:bg-bg-400 [&_.solidaria-ColorField-input]:border [&_.solidaria-ColorField-input]:border-bg-300',
+          '[&_.solidaria-ColorField-input]:text-primary-100 [&_.solidaria-ColorField-input]:rounded-md',
+        ].join(' ')
+
+        return `${base} ${local.class ?? ''}`
+      }}
+    />
+  )
+}