@proyecto-viviana/ui 0.2.3 → 0.3.1

package/src/select/index.tsx

@@ -1,349 +0,0 @@
-/**
- * Select component for proyecto-viviana-ui
- *
- * Styled select component built on top of solidaria-components.
- * Inspired by Spectrum 2's Picker component patterns.
- */
-
-import { type JSX, Show, splitProps, createContext, useContext } from 'solid-js'
-import {
-  Select as HeadlessSelect,
-  SelectTrigger as HeadlessSelectTrigger,
-  SelectValue as HeadlessSelectValue,
-  SelectListBox as HeadlessSelectListBox,
-  SelectOption as HeadlessSelectOption,
-  type SelectProps as HeadlessSelectProps,
-  type SelectTriggerProps as HeadlessSelectTriggerProps,
-  type SelectValueProps as HeadlessSelectValueProps,
-  type SelectListBoxProps as HeadlessSelectListBoxProps,
-  type SelectOptionProps as HeadlessSelectOptionProps,
-  type SelectRenderProps,
-  type SelectTriggerRenderProps,
-  type SelectValueRenderProps,
-  type SelectListBoxRenderProps,
-  type SelectOptionRenderProps,
-} from '@proyecto-viviana/solidaria-components'
-import type { Key } from '@proyecto-viviana/solid-stately'
-
-// ============================================
-// SIZE CONTEXT
-// ============================================
-
-export type SelectSize = 'sm' | 'md' | 'lg'
-
-const SelectSizeContext = createContext<SelectSize>('md')
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface SelectProps<T> extends Omit<HeadlessSelectProps<T>, 'class' | 'style'> {
-  /** The size of the select. */
-  size?: SelectSize
-  /** Additional CSS class name. */
-  class?: string
-  /** Label for the select. */
-  label?: string
-  /** Description for the select. */
-  description?: string
-  /** Error message when invalid. */
-  errorMessage?: string
-  /** Whether the select is invalid. */
-  isInvalid?: boolean
-}
-
-export interface SelectTriggerProps extends Omit<HeadlessSelectTriggerProps, 'class' | 'style'> {
-  /** Additional CSS class name. */
-  class?: string
-}
-
-export interface SelectValueProps<T> extends Omit<HeadlessSelectValueProps<T>, 'class' | 'style'> {
-  /** Additional CSS class name. */
-  class?: string
-}
-
-export interface SelectListBoxProps<T> extends Omit<HeadlessSelectListBoxProps<T>, 'class' | 'style'> {
-  /** Additional CSS class name. */
-  class?: string
-}
-
-export interface SelectOptionProps<T> extends Omit<HeadlessSelectOptionProps<T>, 'class' | 'style'> {
-  /** Additional CSS class name. */
-  class?: string
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const sizeStyles = {
-  sm: {
-    trigger: 'h-8 text-sm px-3 gap-2',
-    label: 'text-sm',
-    option: 'text-sm py-1.5 px-3',
-    icon: 'h-4 w-4',
-  },
-  md: {
-    trigger: 'h-10 text-base px-4 gap-2',
-    label: 'text-base',
-    option: 'text-base py-2 px-4',
-    icon: 'h-5 w-5',
-  },
-  lg: {
-    trigger: 'h-12 text-lg px-5 gap-3',
-    label: 'text-lg',
-    option: 'text-lg py-2.5 px-5',
-    icon: 'h-6 w-6',
-  },
-}
-
-// ============================================
-// SELECT COMPONENT
-// ============================================
-
-/**
- * A select displays a collapsible list of options and allows a user to select one of them.
- *
- * Built on solidaria-components Select for full accessibility support.
- */
-export function Select<T>(props: SelectProps<T>): JSX.Element {
-  const [local, headlessProps] = splitProps(props, [
-    'size',
-    'class',
-    'label',
-    'description',
-    'errorMessage',
-    'isInvalid',
-  ])
-
-  const size = local.size ?? 'md'
-  const customClass = local.class ?? ''
-
-  const getClassName = (renderProps: SelectRenderProps): string => {
-    const base = 'relative inline-flex flex-col gap-1.5'
-    const disabledClass = renderProps.isDisabled ? 'opacity-50' : ''
-    return [base, disabledClass, customClass].filter(Boolean).join(' ')
-  }
-
-  return (
-    <SelectSizeContext.Provider value={size}>
-      <HeadlessSelect
-        {...headlessProps}
-        class={getClassName}
-      >
-        <Show when={local.label}>
-          <label class={`text-primary-200 font-medium ${sizeStyles[size].label}`}>
-            {local.label}
-          </label>
-        </Show>
-        {props.children}
-        <Show when={local.description && !local.isInvalid}>
-          <span class="text-primary-400 text-sm">{local.description}</span>
-        </Show>
-        <Show when={local.errorMessage && local.isInvalid}>
-          <span class="text-danger-400 text-sm">{local.errorMessage}</span>
-        </Show>
-      </HeadlessSelect>
-    </SelectSizeContext.Provider>
-  )
-}
-
-// ============================================
-// SELECT TRIGGER COMPONENT
-// ============================================
-
-/**
- * The trigger button for a select.
- * SSR-compatible - renders children and chevron icon directly without render props.
- */
-export function SelectTrigger(props: SelectTriggerProps): JSX.Element {
-  const [local, headlessProps] = splitProps(props, ['class'])
-  const size = useContext(SelectSizeContext)
-  const sizeStyle = sizeStyles[size]
-  const customClass = local.class ?? ''
-
-  const getClassName = (renderProps: SelectTriggerRenderProps): string => {
-    const base = 'inline-flex items-center justify-between rounded-lg border-2 transition-all duration-200 w-full'
-    const sizeClass = sizeStyle.trigger
-
-    let colorClass: string
-    if (renderProps.isDisabled) {
-      colorClass = 'border-bg-300 bg-bg-200 text-primary-500 cursor-not-allowed'
-    } else if (renderProps.isOpen) {
-      colorClass = 'border-accent bg-bg-300 text-primary-100'
-    } else if (renderProps.isHovered) {
-      colorClass = 'border-accent-300 bg-bg-300 text-primary-100 cursor-pointer'
-    } else {
-      colorClass = 'border-primary-600 bg-bg-400 text-primary-200 cursor-pointer'
-    }
-
-    const focusClass = renderProps.isFocusVisible
-      ? 'ring-2 ring-accent-300 ring-offset-2 ring-offset-bg-400'
-      : ''
-
-    return [base, sizeClass, colorClass, focusClass, customClass].filter(Boolean).join(' ')
-  }
-
-  return (
-    <HeadlessSelectTrigger
-      {...headlessProps}
-      class={getClassName}
-    >
-      {props.children as JSX.Element}
-      {/* Chevron rotates via CSS based on data-open attribute from headless component */}
-      <ChevronIcon class={`${sizeStyle.icon} transition-transform duration-200 data-open:rotate-180`} />
-    </HeadlessSelectTrigger>
-  )
-}
-
-// ============================================
-// SELECT VALUE COMPONENT
-// ============================================
-
-/**
- * Displays the selected value in a select.
- */
-export function SelectValue<T>(props: SelectValueProps<T>): JSX.Element {
-  const [local, headlessProps] = splitProps(props, ['class'])
-  const customClass = local.class ?? ''
-
-  const getClassName = (renderProps: SelectValueRenderProps<T>): string => {
-    const base = 'truncate flex-1 text-left'
-    const placeholderClass = !renderProps.isSelected ? 'text-primary-500' : ''
-    return [base, placeholderClass, customClass].filter(Boolean).join(' ')
-  }
-
-  return (
-    <HeadlessSelectValue
-      {...headlessProps}
-      class={getClassName}
-      children={props.children}
-    />
-  )
-}
-
-// ============================================
-// SELECT LISTBOX COMPONENT
-// ============================================
-
-/**
- * The listbox popup for a select.
- */
-export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
-  const [local, headlessProps] = splitProps(props, ['class'])
-  const customClass = local.class ?? ''
-
-  const getClassName = (_renderProps: SelectListBoxRenderProps): string => {
-    const base = 'absolute z-50 mt-1 w-full rounded-lg border-2 border-primary-600 bg-bg-400 py-1 shadow-lg max-h-60 overflow-auto'
-    return [base, customClass].filter(Boolean).join(' ')
-  }
-
-  return (
-    <HeadlessSelectListBox
-      {...headlessProps}
-      class={getClassName}
-      children={props.children}
-    />
-  )
-}
-
-// ============================================
-// SELECT OPTION COMPONENT
-// ============================================
-
-// Padding classes for when no check icon is shown (to maintain alignment)
-const paddingStyles = {
-  sm: 'pl-6',  // h-4 (1rem) + gap-2 (0.5rem) = 1.5rem = pl-6
-  md: 'pl-7',  // h-5 (1.25rem) + gap-2 (0.5rem) = 1.75rem ≈ pl-7
-  lg: 'pl-9',  // h-6 (1.5rem) + gap-3 (0.75rem) = 2.25rem = pl-9
-}
-
-/**
- * An option in a select listbox.
- * SSR-compatible - renders check icon and content directly without render props.
- */
-export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
-  const [local, headlessProps] = splitProps(props, ['class'])
-  const size = useContext(SelectSizeContext)
-  const sizeStyle = sizeStyles[size]
-  const customClass = local.class ?? ''
-
-  const getClassName = (renderProps: SelectOptionRenderProps): string => {
-    const base = 'flex items-center gap-2 cursor-pointer transition-colors duration-150'
-    const sizeClass = sizeStyle.option
-
-    let colorClass: string
-    if (renderProps.isDisabled) {
-      colorClass = 'text-primary-500 cursor-not-allowed'
-    } else if (renderProps.isSelected) {
-      colorClass = 'bg-accent/20 text-accent'
-    } else if (renderProps.isFocused || renderProps.isHovered) {
-      colorClass = 'bg-bg-300 text-primary-100'
-    } else {
-      colorClass = 'text-primary-200'
-    }
-
-    const focusClass = renderProps.isFocusVisible
-      ? 'ring-2 ring-inset ring-accent-300'
-      : ''
-
-    return [base, sizeClass, colorClass, focusClass, customClass].filter(Boolean).join(' ')
-  }
-
-  const iconClass = `${sizeStyle.icon} text-accent shrink-0 hidden data-selected:block`
-  const paddingClass = paddingStyles[size]
-
-  return (
-    <HeadlessSelectOption
-      {...headlessProps}
-      class={getClassName}
-    >
-      {/* Check icon shows only when selected via data-selected attribute */}
-      <CheckIcon class={iconClass} />
-      <span class={`flex-1 data-selected:pl-0 ${paddingClass}`}>
-        {props.children as JSX.Element}
-      </span>
-    </HeadlessSelectOption>
-  )
-}
-
-// ============================================
-// ICONS
-// ============================================
-
-function ChevronIcon(props: { class?: string }): JSX.Element {
-  return (
-    <svg
-      class={props.class}
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      stroke-width="2"
-    >
-      <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
-    </svg>
-  )
-}
-
-function CheckIcon(props: { class?: string }): JSX.Element {
-  return (
-    <svg
-      class={props.class}
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      stroke-width="2"
-    >
-      <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-    </svg>
-  )
-}
-
-// Attach sub-components for convenience
-Select.Trigger = SelectTrigger
-Select.Value = SelectValue
-Select.ListBox = SelectListBox
-Select.Option = SelectOption
-
-// Re-export Key type for convenience
-export type { Key }

package/src/separator/index.tsx

@@ -1,141 +0,0 @@
-/**
- * Separator component for proyecto-viviana-ui
- *
- * Styled separator component built on top of solidaria hook directly.
- */
-
-import { type JSX, splitProps, createMemo, Show } from 'solid-js';
-import { createSeparator, type Orientation } from '@proyecto-viviana/solidaria';
-
-// ============================================
-// TYPES
-// ============================================
-
-export type SeparatorVariant = 'default' | 'subtle' | 'strong';
-export type SeparatorSize = 'sm' | 'md' | 'lg';
-
-export interface SeparatorProps {
-  /** The orientation of the separator. @default 'horizontal' */
-  orientation?: Orientation;
-  /** The visual style variant. @default 'default' */
-  variant?: SeparatorVariant;
-  /** The size/thickness of the separator. @default 'md' */
-  size?: SeparatorSize;
-  /** Additional CSS class name. */
-  class?: string;
-  /** An accessibility label for the separator. */
-  'aria-label'?: string;
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const variantStyles = {
-  default: 'bg-bg-100',
-  subtle: 'bg-bg-200',
-  strong: 'bg-primary-600',
-};
-
-const horizontalSizeStyles = {
-  sm: 'h-px',
-  md: 'h-0.5',
-  lg: 'h-1',
-};
-
-const verticalSizeStyles = {
-  sm: 'w-px',
-  md: 'w-0.5',
-  lg: 'w-1',
-};
-
-// ============================================
-// SEPARATOR COMPONENT
-// ============================================
-
-/**
- * A separator is a visual divider between two groups of content,
- * e.g. groups of menu items or sections of a page.
- *
- * @example
- * ```tsx
- * <Separator />
- *
- * // Vertical separator
- * <div class="flex items-center gap-4">
- *   <span>Item 1</span>
- *   <Separator orientation="vertical" />
- *   <span>Item 2</span>
- * </div>
- *
- * // Different variants
- * <Separator variant="strong" />
- * ```
- */
-export function Separator(props: SeparatorProps): JSX.Element {
-  const [local, ariaProps] = splitProps(props, [
-    'orientation',
-    'variant',
-    'size',
-    'class',
-  ]);
-
-  const orientation = () => local.orientation ?? 'horizontal';
-  const variant = () => local.variant ?? 'default';
-  const size = () => local.size ?? 'md';
-
-  // Determine the element type
-  const elementType = createMemo(() => {
-    // If vertical, use div since hr is inherently horizontal
-    if (orientation() === 'vertical') {
-      return 'div';
-    }
-    return 'hr';
-  });
-
-  // Create separator aria props
-  const separatorAria = createSeparator({
-    get orientation() { return orientation(); },
-    get elementType() { return elementType(); },
-    get 'aria-label'() { return ariaProps['aria-label']; },
-  });
-
-  // Build class string
-  const className = createMemo(() => {
-    const isVertical = orientation() === 'vertical';
-    const sizeStyles = isVertical ? verticalSizeStyles : horizontalSizeStyles;
-
-    const base = [
-      variantStyles[variant()],
-      sizeStyles[size()],
-      isVertical ? 'h-full self-stretch' : 'w-full',
-      'border-0', // Reset hr default border
-      local.class ?? '',
-    ];
-
-    return base.filter(Boolean).join(' ');
-  });
-
-  // Extract props without ref to avoid type issues with specific element types
-  const getAriaProps = () => {
-    const { ref: _, ...props } = separatorAria.separatorProps as Record<string, unknown>;
-    return props;
-  };
-
-  return (
-    <Show
-      when={orientation() === 'vertical'}
-      fallback={
-        <hr
-          {...getAriaProps()}
-          class={className()}
-        />
-      }
-    >
-      <div
-        {...getAriaProps()}
-        class={className()}
-      />
-    </Show>
-  );
-}