@proyecto-viviana/ui 0.3.5 → 0.4.0

package/src/icon/icons/GitHubIcon.tsx

@@ -1,20 +0,0 @@
-import type { JSX } from 'solid-js';
-
-export interface GitHubIconProps {
-  size?: number;
-  color?: string;
-}
-
-export function GitHubIcon(props: GitHubIconProps): JSX.Element {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      width={props.size}
-      height={props.size}
-      fill={props.color}
-      aria-hidden="true"
-    >
-      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
-    </svg>
-  );
-}

package/src/icon/index.tsx

@@ -1,48 +0,0 @@
-import type { Component, JSX } from 'solid-js'
-
-export interface IconProps {
-  /** The icon component to render (should accept size and color props) */
-  icon: Component<{ size?: string | number; color?: string }>
-  /** Size of the icon (e.g., '24px' or 24) */
-  size?: string | number
-  /** Color of the icon */
-  color?: string
-  /** Whether to show the accent shadow effect (4px offset to bottom) */
-  withShadow?: boolean
-  /** Additional CSS class */
-  class?: string
-  /** Click handler */
-  onClick?: () => void
-}
-
-/**
- * Icon wrapper component with optional accent shadow effect.
- *
- * The shadow effect creates a 4px offset accent-colored duplicate
- * of the icon behind it for a stylized look.
- */
-export function Icon(props: IconProps): JSX.Element {
-  const size = () => props.size ?? 24
-  const color = () => props.color ?? 'var(--color-primary-500)'
-  const IconComponent = props.icon
-
-  return (
-    <div
-      class={`vui-icon ${props.withShadow ? 'vui-icon--with-shadow' : ''} ${props.class ?? ''}`}
-      onClick={props.onClick}
-    >
-      {props.withShadow && (
-        <div class="vui-icon__shadow">
-          <IconComponent size={size()} color="var(--color-accent)" />
-        </div>
-      )}
-      <div class="vui-icon__main">
-        <IconComponent size={size()} color={color()} />
-      </div>
-    </div>
-  )
-}
-
-// Re-export common icons
-export { GitHubIcon } from './icons/GitHubIcon'
-export type { GitHubIconProps } from './icons/GitHubIcon'

package/src/landmark/index.tsx

@@ -1,231 +0,0 @@
-/**
- * Landmark component for proyecto-viviana-ui
- *
- * Styled landmark component built on top of solidaria-components.
- * Landmarks help screen reader users navigate between major sections of a page.
- * Press F6 to cycle through landmarks, or Shift+F6 to go backwards.
- */
-
-import { type JSX, splitProps, Show } from 'solid-js'
-import {
-  Landmark as HeadlessLandmark,
-  useLandmarkController,
-  type LandmarkProps as HeadlessLandmarkProps,
-  type AriaLandmarkRole,
-  type LandmarkController,
-} from '@proyecto-viviana/solidaria-components'
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface LandmarkProps extends Omit<HeadlessLandmarkProps, 'class' | 'style'> {
-  /** Additional CSS class name. */
-  class?: string
-  /** Whether to show a visual indicator (for development). */
-  showLabel?: boolean
-}
-
-export type { AriaLandmarkRole, LandmarkController }
-
-// ============================================
-// STYLES
-// ============================================
-
-const roleLabels: Record<AriaLandmarkRole, string> = {
-  main: 'Main',
-  navigation: 'Navigation',
-  search: 'Search',
-  banner: 'Banner',
-  contentinfo: 'Footer',
-  complementary: 'Aside',
-  form: 'Form',
-  region: 'Region',
-}
-
-const roleColors: Record<AriaLandmarkRole, string> = {
-  main: 'bg-accent/10 border-accent-300',
-  navigation: 'bg-primary-500/10 border-primary-400',
-  search: 'bg-warning-400/10 border-warning-400',
-  banner: 'bg-success-400/10 border-success-400',
-  contentinfo: 'bg-danger-400/10 border-danger-400',
-  complementary: 'bg-primary-300/10 border-primary-300',
-  form: 'bg-accent-200/10 border-accent-200',
-  region: 'bg-bg-200/50 border-bg-300',
-}
-
-// ============================================
-// LANDMARK COMPONENT
-// ============================================
-
-/**
- * A landmark is a region of the page that helps screen reader users navigate.
- * Press F6 to cycle through landmarks, or Shift+F6 to go backwards.
- *
- * @example
- * ```tsx
- * // Main content area
- * <Landmark role="main" aria-label="Main content">
- *   <h1>Welcome</h1>
- *   <p>Page content here...</p>
- * </Landmark>
- *
- * // Navigation
- * <Landmark role="navigation" aria-label="Primary navigation">
- *   <nav>...</nav>
- * </Landmark>
- *
- * // With development label visible
- * <Landmark role="main" aria-label="Main content" showLabel>
- *   ...
- * </Landmark>
- * ```
- */
-export function Landmark(props: LandmarkProps): JSX.Element {
-  const [local, headlessProps] = splitProps(props, ['class', 'showLabel'])
-  const customClass = local.class ?? ''
-
-  const role = () => headlessProps.role
-
-  const getClassName = (): string => {
-    const base = 'relative'
-    const debugClass = local.showLabel
-      ? `border-2 border-dashed ${roleColors[role()]}`
-      : ''
-    return [base, debugClass, customClass].filter(Boolean).join(' ')
-  }
-
-  return (
-    <HeadlessLandmark {...headlessProps} class={getClassName()}>
-      <Show when={local.showLabel}>
-        <div
-          class={`absolute -top-3 left-2 px-2 py-0.5 text-xs font-medium rounded ${roleColors[role()]} text-primary-200`}
-        >
-          {roleLabels[role()]}
-          <Show when={headlessProps['aria-label']}>
-            <span class="text-primary-400"> - {headlessProps['aria-label']}</span>
-          </Show>
-        </div>
-      </Show>
-      {props.children}
-    </HeadlessLandmark>
-  )
-}
-
-// ============================================
-// SKIP LINK COMPONENT
-// ============================================
-
-export interface SkipLinkProps {
-  /** The ID of the element to skip to (usually the main landmark). */
-  href: string
-  /** The text to display in the skip link. */
-  children?: JSX.Element
-  /** Additional CSS class name. */
-  class?: string
-}
-
-/**
- * A skip link allows keyboard users to bypass repetitive navigation and jump directly to main content.
- * The link is visually hidden until focused.
- *
- * @example
- * ```tsx
- * <SkipLink href="#main-content">Skip to main content</SkipLink>
- *
- * <Landmark role="navigation">...</Landmark>
- *
- * <Landmark role="main" id="main-content">
- *   ...
- * </Landmark>
- * ```
- */
-export function SkipLink(props: SkipLinkProps): JSX.Element {
-  const customClass = props.class ?? ''
-
-  const className = [
-    // Visually hidden by default
-    'absolute left-0 top-0 -translate-y-full',
-    // Show when focused
-    'focus:translate-y-0',
-    // Styling
-    'z-50 px-4 py-2 bg-accent text-white font-medium rounded-br-lg',
-    'transition-transform duration-200',
-    'focus:outline-none focus:ring-2 focus:ring-accent-300 focus:ring-offset-2',
-    customClass,
-  ]
-    .filter(Boolean)
-    .join(' ')
-
-  return (
-    <a href={props.href} class={className}>
-      {props.children ?? 'Skip to main content'}
-    </a>
-  )
-}
-
-// ============================================
-// LANDMARK NAVIGATOR COMPONENT
-// ============================================
-
-export interface LandmarkNavigatorProps {
-  /** Additional CSS class name. */
-  class?: string
-  /** Whether to show the navigator (for development/accessibility testing). */
-  isVisible?: boolean
-}
-
-/**
- * A floating navigator for landmarks, useful for development and accessibility testing.
- * Provides buttons to navigate between landmarks programmatically.
- *
- * @example
- * ```tsx
- * // Show in development only
- * <LandmarkNavigator isVisible={import.meta.env.DEV} />
- * ```
- */
-export function LandmarkNavigator(props: LandmarkNavigatorProps): JSX.Element {
-  const controller = useLandmarkController()
-
-  return (
-    <Show when={props.isVisible}>
-      <div
-        class={`fixed bottom-4 right-4 z-50 flex flex-col gap-2 p-3 bg-bg-400 border border-bg-300 rounded-lg shadow-lg ${props.class ?? ''}`}
-      >
-        <span class="text-xs font-medium text-primary-400 uppercase tracking-wider">
-          Landmarks (F6)
-        </span>
-        <div class="flex gap-1">
-          <button
-            type="button"
-            onClick={() => controller.focusPrevious()}
-            class="px-2 py-1 text-sm bg-bg-300 hover:bg-bg-200 text-primary-200 rounded transition-colors"
-            title="Previous landmark (Shift+F6)"
-          >
-            ←
-          </button>
-          <button
-            type="button"
-            onClick={() => controller.focusMain()}
-            class="px-3 py-1 text-sm bg-accent hover:bg-accent-200 text-white rounded transition-colors"
-            title="Go to main content"
-          >
-            Main
-          </button>
-          <button
-            type="button"
-            onClick={() => controller.focusNext()}
-            class="px-2 py-1 text-sm bg-bg-300 hover:bg-bg-200 text-primary-200 rounded transition-colors"
-            title="Next landmark (F6)"
-          >
-            →
-          </button>
-        </div>
-      </div>
-    </Show>
-  )
-}
-
-// Export controller hook for convenience
-export { useLandmarkController }

package/src/link/index.tsx

@@ -1,130 +0,0 @@
-/**
- * Link component for proyecto-viviana-ui
- *
- * Styled link component built on top of solidaria-components.
- */
-
-import { type JSX, splitProps } from 'solid-js';
-import {
-  Link as HeadlessLink,
-  type LinkProps as HeadlessLinkProps,
-  type LinkRenderProps,
-} from '@proyecto-viviana/solidaria-components';
-
-// ============================================
-// TYPES
-// ============================================
-
-export type LinkVariant = 'primary' | 'secondary' | 'subtle';
-
-export interface LinkProps extends Omit<HeadlessLinkProps, 'class' | 'style' | 'children'> {
-  /** The visual style of the link. @default 'primary' */
-  variant?: LinkVariant;
-  /** Whether the link is on its own vs inside a longer string of text. */
-  isStandalone?: boolean;
-  /** Whether the link should be displayed with a quiet style (no underline by default). */
-  isQuiet?: boolean;
-  /** Additional CSS class name. */
-  class?: string;
-  /** The content of the link. */
-  children?: JSX.Element;
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const variantStyles = {
-  primary: 'text-accent hover:text-accent-300',
-  secondary: 'text-primary-300 hover:text-primary-200',
-  subtle: 'text-primary-400 hover:text-primary-300',
-};
-
-// ============================================
-// LINK COMPONENT
-// ============================================
-
-/**
- * Links allow users to navigate to a different location.
- * They can be presented inline inside a paragraph or as standalone text.
- *
- * Built on solidaria-components Link for full accessibility support.
- *
- * @example
- * ```tsx
- * <Link href="/about">About Us</Link>
- *
- * // Secondary variant
- * <Link href="/help" variant="secondary">Help</Link>
- *
- * // Standalone (bold, no underline until hover)
- * <Link href="/home" isStandalone isQuiet>Home</Link>
- * ```
- */
-export function Link(props: LinkProps): JSX.Element {
-  const [local, headlessProps] = splitProps(props, [
-    'variant',
-    'isStandalone',
-    'isQuiet',
-    'class',
-  ]);
-
-  const variant = local.variant ?? 'primary';
-  const customClass = local.class ?? '';
-
-  // Generate class based on render props
-  const getClassName = (renderProps: LinkRenderProps): string => {
-    const base = 'transition-colors duration-200 cursor-pointer rounded-sm outline-none';
-
-    // Variant colors
-    const variantClass = variantStyles[variant];
-
-    // Underline behavior
-    let underlineClass: string;
-    if (local.isStandalone && local.isQuiet) {
-      // Quiet standalone: no underline by default, underline on hover/focus
-      underlineClass = renderProps.isHovered || renderProps.isFocusVisible
-        ? 'underline'
-        : 'no-underline';
-    } else {
-      // Inline links always have underline for accessibility
-      underlineClass = 'underline';
-    }
-
-    // Font weight for standalone
-    const weightClass = local.isStandalone ? 'font-medium' : '';
-
-    // Focus ring
-    const focusClass = renderProps.isFocusVisible
-      ? 'ring-2 ring-accent-300 ring-offset-2 ring-offset-bg-400'
-      : '';
-
-    // Disabled state
-    const disabledClass = renderProps.isDisabled
-      ? 'opacity-50 cursor-not-allowed'
-      : '';
-
-    // Pressed state
-    const pressedClass = renderProps.isPressed ? 'opacity-80' : '';
-
-    return [
-      base,
-      variantClass,
-      underlineClass,
-      weightClass,
-      focusClass,
-      disabledClass,
-      pressedClass,
-      customClass,
-    ].filter(Boolean).join(' ');
-  };
-
-  return (
-    <HeadlessLink
-      {...headlessProps}
-      class={getClassName}
-    >
-      {props.children}
-    </HeadlessLink>
-  );
-}

package/src/listbox/index.tsx

@@ -1,231 +0,0 @@
-/**
- * ListBox component for proyecto-viviana-ui
- *
- * Styled listbox component built on top of solidaria-components.
- * Inspired by Spectrum 2's ListBox component patterns.
- */
-
-import { type JSX, splitProps, createContext, useContext, Show } from 'solid-js'
-import {
-  ListBox as HeadlessListBox,
-  ListBoxOption as HeadlessListBoxOption,
-  type ListBoxProps as HeadlessListBoxProps,
-  type ListBoxOptionProps as HeadlessListBoxOptionProps,
-  type ListBoxRenderProps,
-  type ListBoxOptionRenderProps,
-} from '@proyecto-viviana/solidaria-components'
-import type { Key } from '@proyecto-viviana/solid-stately'
-
-// ============================================
-// SIZE CONTEXT
-// ============================================
-
-export type ListBoxSize = 'sm' | 'md' | 'lg'
-
-const ListBoxSizeContext = createContext<ListBoxSize>('md')
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface ListBoxProps<T> extends Omit<HeadlessListBoxProps<T>, 'class' | 'style'> {
-  /** The size of the listbox. */
-  size?: ListBoxSize
-  /** Additional CSS class name. */
-  class?: string
-  /** Label for the listbox. */
-  label?: string
-  /** Description for the listbox. */
-  description?: string
-}
-
-export interface ListBoxOptionProps<T> extends Omit<HeadlessListBoxOptionProps<T>, 'class' | 'style'> {
-  /** Additional CSS class name. */
-  class?: string
-  /** Optional description text. */
-  description?: string
-  /**
-   * Optional icon to display before the label.
-   * Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`
-   */
-  icon?: () => JSX.Element
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const sizeStyles = {
-  sm: {
-    list: 'py-1',
-    option: 'text-sm py-1.5 px-3 gap-2',
-    icon: 'h-4 w-4',
-    label: 'text-sm',
-    description: 'text-xs',
-  },
-  md: {
-    list: 'py-1.5',
-    option: 'text-base py-2 px-4 gap-3',
-    icon: 'h-5 w-5',
-    label: 'text-base',
-    description: 'text-sm',
-  },
-  lg: {
-    list: 'py-2',
-    option: 'text-lg py-2.5 px-5 gap-3',
-    icon: 'h-6 w-6',
-    label: 'text-lg',
-    description: 'text-base',
-  },
-}
-
-// ============================================
-// LISTBOX COMPONENT
-// ============================================
-
-/**
- * A listbox displays a list of options and allows a user to select one or more of them.
- *
- * Built on solidaria-components ListBox for full accessibility support.
- */
-export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
-  const [local, headlessProps] = splitProps(props, [
-    'size',
-    'class',
-    'label',
-    'description',
-    'renderEmptyState',
-  ])
-
-  const size = local.size ?? 'md'
-  const styles = sizeStyles[size]
-  const customClass = local.class ?? ''
-
-  const getClassName = (renderProps: ListBoxRenderProps): string => {
-    const base = 'rounded-lg border-2 border-primary-600 bg-bg-400 overflow-auto focus:outline-none'
-    const sizeClass = styles.list
-
-    let stateClass: string
-    if (renderProps.isDisabled) {
-      stateClass = 'opacity-50'
-    } else {
-      stateClass = ''
-    }
-
-    const focusClass = renderProps.isFocusVisible
-      ? 'ring-2 ring-accent-300 ring-offset-2 ring-offset-bg-400'
-      : ''
-
-    return [base, sizeClass, stateClass, focusClass, customClass].filter(Boolean).join(' ')
-  }
-
-  const defaultEmptyState = () => (
-    <li class="py-4 px-4 text-center text-primary-500">
-      No items
-    </li>
-  )
-
-  return (
-    <ListBoxSizeContext.Provider value={size}>
-      <div class="flex flex-col gap-1.5">
-        <Show when={local.label}>
-          <label class={`text-primary-200 font-medium ${styles.label}`}>
-            {local.label}
-          </label>
-        </Show>
-        <HeadlessListBox
-          {...headlessProps}
-          class={getClassName}
-          renderEmptyState={local.renderEmptyState ?? defaultEmptyState}
-          children={props.children}
-        />
-        <Show when={local.description}>
-          <span class="text-primary-400 text-sm">{local.description}</span>
-        </Show>
-      </div>
-    </ListBoxSizeContext.Provider>
-  )
-}
-
-// ============================================
-// LISTBOX OPTION COMPONENT
-// ============================================
-
-/**
- * An option in a listbox.
- * SSR-compatible - renders icon, check, content, and description directly without render props.
- */
-export function ListBoxOption<T>(props: ListBoxOptionProps<T>): JSX.Element {
-  const [local, headlessProps] = splitProps(props, ['class', 'description', 'icon'])
-  const size = useContext(ListBoxSizeContext)
-  const sizeStyle = sizeStyles[size]
-  const customClass = local.class ?? ''
-
-  const getClassName = (renderProps: ListBoxOptionRenderProps): string => {
-    const base = 'flex items-center cursor-pointer transition-colors duration-150 outline-none'
-    const sizeClass = sizeStyle.option
-
-    let colorClass: string
-    if (renderProps.isDisabled) {
-      colorClass = 'text-primary-500 cursor-not-allowed'
-    } else if (renderProps.isSelected) {
-      if (renderProps.isFocused || renderProps.isHovered) {
-        colorClass = 'bg-accent/30 text-accent'
-      } else {
-        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(' ')
-  }
-
-  return (
-    <HeadlessListBoxOption
-      {...headlessProps}
-      class={getClassName}
-    >
-      {local.icon && <span class={`shrink-0 ${sizeStyle.icon}`}>{local.icon()}</span>}
-      <CheckIcon class={`shrink-0 ${sizeStyle.icon} text-accent hidden data-selected:block`} />
-      <div class="flex flex-col flex-1 min-w-0">
-        <span class="truncate">{props.children as JSX.Element}</span>
-        {local.description && (
-          <span class={`text-primary-400 truncate ${sizeStyle.description}`}>
-            {local.description}
-          </span>
-        )}
-      </div>
-    </HeadlessListBoxOption>
-  )
-}
-
-// ============================================
-// ICONS
-// ============================================
-
-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
-ListBox.Option = ListBoxOption
-
-// Re-export Key type for convenience
-export type { Key }