@proyecto-viviana/silapse 0.4.0

package/src/button/index.ts

@@ -0,0 +1,12 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonStyle, ButtonSize, StaticColor } from './types';
+export { ToggleButton } from './ToggleButton';
+export type { ToggleButtonProps, ToggleButtonSize } from './ToggleButton';
+export { ActionButton } from './ActionButton';
+export type { ActionButtonProps, ActionButtonSize } from './ActionButton';
+export { ClearButton } from './ClearButton';
+export type { ClearButtonProps, ClearButtonSize } from './ClearButton';
+export { FieldButton } from './FieldButton';
+export type { FieldButtonProps } from './FieldButton';
+export { LogicButton } from './LogicButton';
+export type { LogicButtonProps } from './LogicButton';

package/src/button/types.ts

@@ -0,0 +1,24 @@
+import type { JSX } from 'solid-js';
+import type { ButtonProps as HeadlessButtonProps } from '@proyecto-viviana/solidaria-components';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'accent' | 'positive' | 'negative' | 'ghost' | 'link';
+export type ButtonStyle = 'fill' | 'outline';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type StaticColor = 'white' | 'black';
+
+export interface ButtonProps extends Omit<HeadlessButtonProps, 'class' | 'children' | 'style'> {
+  /** The content to display in the button. */
+  children?: JSX.Element;
+  /** The visual style of the button. */
+  variant?: ButtonVariant;
+  /** The background style of the button. */
+  buttonStyle?: ButtonStyle;
+  /** The size of the button. */
+  size?: ButtonSize;
+  /** Whether the button should take up the full width of its container. */
+  fullWidth?: boolean;
+  /** The static color style to apply. Useful when the button appears over a color background. */
+  staticColor?: StaticColor;
+  /** Additional CSS class name. */
+  class?: string;
+}

package/src/buttongroup/index.tsx

@@ -0,0 +1,25 @@
+/**
+ * ButtonGroup component for proyecto-viviana-silapse.
+ *
+ * Styling-only button grouping primitive.
+ */
+
+import { type JSX, splitProps } from 'solid-js';
+
+export interface ButtonGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export function ButtonGroup(props: ButtonGroupProps): JSX.Element {
+  const [local, domProps] = splitProps(props, ['class', 'children']);
+  return (
+    <div
+      {...domProps}
+      role={domProps.role ?? 'group'}
+      class={`inline-flex items-center gap-2 ${local.class ?? ''}`}
+    >
+      {local.children}
+    </div>
+  );
+}
+

package/src/calendar/DateField.tsx

@@ -0,0 +1,208 @@
+/**
+ * DateField component for proyecto-viviana-silapse
+ *
+ * Styled date field component with segment-based editing.
+ */
+
+import { type JSX, splitProps } from 'solid-js';
+import {
+  DateField as HeadlessDateField,
+  DateFieldLabel,
+  DateFieldDescription,
+  DateFieldErrorMessage,
+  DateInput,
+  DateSegment,
+  type DateFieldProps as HeadlessDateFieldProps,
+  type CalendarDate,
+  type DateValue,
+} from '@proyecto-viviana/solidaria-components';
+import { useProviderProps } from '../provider';
+
+// ============================================
+// TYPES
+// ============================================
+
+export type DateFieldSize = 'sm' | 'md' | 'lg';
+
+export interface DateFieldProps<T extends DateValue = DateValue>
+  extends Omit<HeadlessDateFieldProps<T>, 'class' | 'style' | 'children'> {
+  /** The size of the field. @default 'md' */
+  size?: DateFieldSize;
+  /** 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',
+  },
+};
+
+// ============================================
+// DATE FIELD COMPONENT
+// ============================================
+
+/**
+ * A date field allows users to enter and edit date values using a keyboard.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <DateField label="Birth date" />
+ *
+ * // Controlled
+ * const [date, setDate] = createSignal<CalendarDate | null>(null);
+ * <DateField
+ *   label="Event date"
+ *   value={date()}
+ *   onChange={setDate}
+ * />
+ *
+ * // With validation
+ * <DateField
+ *   label="Future date"
+ *   minValue={today(getLocalTimeZone())}
+ *   errorMessage="Date must be in the future"
+ * />
+ * ```
+ */
+export function DateField<T extends DateValue = CalendarDate>(
+  props: DateFieldProps<T>
+): JSX.Element {
+  const mergedProps = useProviderProps(props);
+  const [local, rest] = splitProps(mergedProps, [
+    'size',
+    'class',
+    'label',
+    'description',
+    'errorMessage',
+    'isInvalid',
+  ]);
+
+  const size = () => local.size ?? 'md';
+  const sizeConfig = () => sizeStyles[size()];
+  const isInvalid = () => local.isInvalid || !!local.errorMessage;
+
+  return (
+    <HeadlessDateField
+      {...rest}
+      label={local.label}
+      description={local.description}
+      errorMessage={local.errorMessage}
+      isInvalid={isInvalid()}
+      class={`
+        flex flex-col gap-1
+        ${sizeConfig().container}
+        ${local.class ?? ''}
+      `}
+    >
+      {/* Label */}
+      {local.label && (
+        <DateFieldLabel class={`font-medium text-primary-200 ${sizeConfig().label}`}>
+          {local.label}
+          {rest.isRequired && <span class="text-red-500 ml-0.5">*</span>}
+        </DateFieldLabel>
+      )}
+
+      {/* Input container */}
+      <DateInput
+        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) => (
+          <DateSegment
+            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-bg-400'
+                : '';
+
+              return `${base} ${stateClass} ${focusClass}`.trim();
+            }}
+          />
+        )}
+      </DateInput>
+
+      {/* Description */}
+      {local.description && !isInvalid() && (
+        <DateFieldDescription class={`text-primary-400 ${sizeConfig().label}`}>
+          {local.description}
+        </DateFieldDescription>
+      )}
+
+      {/* Error message */}
+      {isInvalid() && local.errorMessage && (
+        <DateFieldErrorMessage class={`text-red-500 ${sizeConfig().label}`}>
+          {local.errorMessage}
+        </DateFieldErrorMessage>
+      )}
+    </HeadlessDateField>
+  );
+}
+
+// Re-export types
+export type { CalendarDate, DateValue };

package/src/calendar/DatePicker.tsx

@@ -0,0 +1,257 @@
+/**
+ * DatePicker component for proyecto-viviana-silapse
+ *
+ * Styled date picker component that combines a date field with a calendar popup.
+ */
+
+import { type JSX, splitProps, Show } from 'solid-js'
+import {
+  DatePicker as HeadlessDatePicker,
+  DatePickerLabel as HeadlessDatePickerLabel,
+  DatePickerDescription as HeadlessDatePickerDescription,
+  DatePickerErrorMessage as HeadlessDatePickerErrorMessage,
+  DatePickerButton,
+  DatePickerContent,
+  DateInput,
+  DateSegment,
+  type DatePickerProps as HeadlessDatePickerProps,
+  type CalendarDate,
+  type DateValue,
+} from '@proyecto-viviana/solidaria-components'
+import { Calendar } from './index'
+import { useProviderProps } from '../provider'
+
+// Calendar icon component - use function to ensure consistent hydration
+function CalendarIcon(): JSX.Element {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="w-5 h-5"
+      aria-hidden="true"
+    >
+      <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+      <line x1="16" y1="2" x2="16" y2="6" />
+      <line x1="8" y1="2" x2="8" y2="6" />
+      <line x1="3" y1="10" x2="21" y2="10" />
+    </svg>
+  )
+}
+
+// ============================================
+// TYPES
+// ============================================
+
+export type DatePickerSize = 'sm' | 'md' | 'lg'
+
+export interface DatePickerProps<T extends DateValue = DateValue>
+  extends Omit<HeadlessDatePickerProps<T>, 'class' | 'style' | 'children'> {
+  /** The size of the picker. @default 'md' */
+  size?: DatePickerSize
+  /** Additional CSS class name. */
+  class?: string
+  /** Label for the field. */
+  label?: string
+  /** Description text. */
+  description?: string
+  /** Error message. */
+  errorMessage?: string
+  /** Placeholder text. */
+  placeholder?: string
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const sizeStyles = {
+  sm: {
+    container: 'text-sm',
+    input: 'px-2 py-1 gap-0.5',
+    segment: 'px-0.5',
+    label: 'text-xs',
+    button: 'w-7 h-7',
+  },
+  md: {
+    container: 'text-base',
+    input: 'px-3 py-2 gap-1',
+    segment: 'px-1',
+    label: 'text-sm',
+    button: 'w-9 h-9',
+  },
+  lg: {
+    container: 'text-lg',
+    input: 'px-4 py-3 gap-1.5',
+    segment: 'px-1.5',
+    label: 'text-base',
+    button: 'w-11 h-11',
+  },
+}
+
+// ============================================
+// DATE PICKER COMPONENT
+// ============================================
+
+/**
+ * A date picker combines a date field and a calendar popup.
+ */
+export function DatePicker<T extends DateValue = CalendarDate>(
+  props: DatePickerProps<T>
+): JSX.Element {
+  const mergedProps = useProviderProps(props)
+  const [local, rest] = splitProps(mergedProps, [
+    'size',
+    'class',
+    'label',
+    'description',
+    'errorMessage',
+    'isInvalid',
+    'placeholder',
+  ])
+
+  const size = () => local.size ?? 'md'
+  const sizeConfig = () => sizeStyles[size()]
+  const isInvalid = () => local.isInvalid || !!local.errorMessage
+
+  return (
+    <HeadlessDatePicker
+      {...rest}
+      label={local.label}
+      description={local.description}
+      errorMessage={local.errorMessage}
+      isInvalid={isInvalid()}
+      class={`flex flex-col gap-1 relative ${sizeConfig().container} ${local.class ?? ''}`}
+    >
+      <Show when={local.label}>
+        <HeadlessDatePickerLabel class={`font-medium text-primary-200 ${sizeConfig().label}`}>
+          {local.label}
+          <Show when={rest.isRequired}>
+            <span class="text-red-500 ml-0.5">*</span>
+          </Show>
+        </HeadlessDatePickerLabel>
+      </Show>
+
+      <div class="relative flex items-center">
+        <DateInput
+          class={({ isFocused, isDisabled }) => {
+            const base = `
+              inline-flex items-center flex-1
+              ${sizeConfig().input}
+              bg-bg-400 rounded-l-md border-y border-l
+              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) => (
+            <DateSegment
+              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-bg-400'
+                  : ''
+
+                return `${base} ${stateClass} ${focusClass}`.trim()
+              }}
+            />
+          )}
+        </DateInput>
+
+        <DatePickerButton
+          class={({ isDisabled, isOpen }) => {
+            const base = `
+              ${sizeConfig().button}
+              flex items-center justify-center
+              bg-bg-400 border-y border-r rounded-r-md
+              text-primary-200
+              transition-colors duration-150
+              focus:outline-none focus:ring-2 focus:ring-accent/50
+            `
+
+            let borderClass = 'border-primary-600'
+            if (isInvalid()) {
+              borderClass = 'border-red-500'
+            } else if (isOpen) {
+              borderClass = 'border-accent bg-bg-300'
+            }
+
+            const disabledClass = isDisabled
+              ? 'opacity-50 cursor-not-allowed'
+              : 'hover:bg-bg-300 cursor-pointer'
+
+            return `${base} ${borderClass} ${disabledClass}`.trim()
+          }}
+        >
+          <CalendarIcon />
+        </DatePickerButton>
+
+        <DatePickerPopup size={size()} />
+      </div>
+
+      <Show when={local.description && !isInvalid()}>
+        <HeadlessDatePickerDescription class={`text-primary-400 ${sizeConfig().label}`}>
+          {local.description}
+        </HeadlessDatePickerDescription>
+      </Show>
+
+      <Show when={isInvalid() && local.errorMessage}>
+        <HeadlessDatePickerErrorMessage class={`text-red-500 ${sizeConfig().label}`}>
+          {local.errorMessage}
+        </HeadlessDatePickerErrorMessage>
+      </Show>
+    </HeadlessDatePicker>
+  )
+}
+
+// ============================================
+// POPUP COMPONENT (uses context)
+// ============================================
+
+function DatePickerPopup(props: { size: DatePickerSize }): JSX.Element {
+  return (
+    <DatePickerContent
+      class="z-50 shadow-lg rounded-lg"
+    >
+      <Calendar size={props.size} />
+    </DatePickerContent>
+  )
+}
+
+// Re-export types
+export type { CalendarDate, DateValue }