@proyecto-viviana/ui 0.3.1 → 0.3.3

package/src/link/index.tsx

@@ -0,0 +1,130 @@
+/**
+ * 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

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

package/src/menu/index.tsx

@@ -0,0 +1,297 @@
+/**
+ * Menu component for proyecto-viviana-ui
+ *
+ * Styled menu component built on top of solidaria-components.
+ * Inspired by Spectrum 2's Menu component patterns.
+ */
+
+import { type JSX, splitProps, createContext, useContext } from 'solid-js'
+import {
+  Menu as HeadlessMenu,
+  MenuItem as HeadlessMenuItem,
+  MenuTrigger as HeadlessMenuTrigger,
+  MenuButton as HeadlessMenuButton,
+  type MenuProps as HeadlessMenuProps,
+  type MenuItemProps as HeadlessMenuItemProps,
+  type MenuTriggerProps as HeadlessMenuTriggerProps,
+  type MenuButtonProps as HeadlessMenuButtonProps,
+  type MenuRenderProps,
+  type MenuItemRenderProps,
+  type MenuTriggerRenderProps,
+} from '@proyecto-viviana/solidaria-components'
+import type { Key } from '@proyecto-viviana/solid-stately'
+
+// ============================================
+// SIZE CONTEXT
+// ============================================
+
+export type MenuSize = 'sm' | 'md' | 'lg'
+
+const MenuSizeContext = createContext<MenuSize>('md')
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface MenuTriggerProps extends Omit<HeadlessMenuTriggerProps, 'class' | 'style'> {
+  /** The size of the menu. */
+  size?: MenuSize
+  /** Additional CSS class name. */
+  class?: string
+}
+
+export interface MenuButtonProps extends Omit<HeadlessMenuButtonProps, 'class' | 'style'> {
+  /** Additional CSS class name. */
+  class?: string
+  /** Visual variant of the button. */
+  variant?: 'primary' | 'secondary' | 'quiet'
+}
+
+export interface MenuProps<T> extends Omit<HeadlessMenuProps<T>, 'class' | 'style'> {
+  /** Additional CSS class name. */
+  class?: string
+}
+
+export interface MenuItemProps<T> extends Omit<HeadlessMenuItemProps<T>, 'class' | 'style'> {
+  /** Additional CSS class name. */
+  class?: string
+  /**
+   * Optional icon to display before the label.
+   * Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`
+   */
+  icon?: () => JSX.Element
+  /** Optional keyboard shortcut to display. */
+  shortcut?: string
+  /** Whether this is a destructive action. */
+  isDestructive?: boolean
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const sizeStyles = {
+  sm: {
+    button: 'h-8 text-sm px-3 gap-2',
+    menu: 'py-1',
+    item: 'text-sm py-1.5 px-3 gap-2',
+    icon: 'h-4 w-4',
+  },
+  md: {
+    button: 'h-10 text-base px-4 gap-2',
+    menu: 'py-1.5',
+    item: 'text-base py-2 px-4 gap-3',
+    icon: 'h-5 w-5',
+  },
+  lg: {
+    button: 'h-12 text-lg px-5 gap-3',
+    menu: 'py-2',
+    item: 'text-lg py-2.5 px-5 gap-3',
+    icon: 'h-6 w-6',
+  },
+}
+
+const buttonVariants = {
+  primary: 'bg-accent text-bg-500 border-accent hover:bg-accent-300 hover:border-accent-300',
+  secondary: 'bg-bg-400 text-primary-200 border-primary-600 hover:bg-bg-300 hover:border-accent-300',
+  quiet: 'bg-transparent text-primary-200 border-transparent hover:bg-bg-300',
+}
+
+// ============================================
+// MENU TRIGGER COMPONENT
+// ============================================
+
+/**
+ * A menu trigger wraps a button and menu, handling the open/close state.
+ */
+export function MenuTrigger(props: MenuTriggerProps): JSX.Element {
+  const [local, headlessProps] = splitProps(props, ['size', 'class'])
+  const size = local.size ?? 'md'
+
+  return (
+    <MenuSizeContext.Provider value={size}>
+      <div class={`relative inline-block ${local.class ?? ''}`}>
+        <HeadlessMenuTrigger {...headlessProps}>
+          {props.children}
+        </HeadlessMenuTrigger>
+      </div>
+    </MenuSizeContext.Provider>
+  )
+}
+
+// ============================================
+// MENU BUTTON COMPONENT
+// ============================================
+
+/**
+ * A button that opens a menu.
+ * SSR-compatible - renders children and chevron icon directly without render props.
+ */
+export function MenuButton(props: MenuButtonProps): JSX.Element {
+  const [local, headlessProps] = splitProps(props, ['class', 'variant'])
+  const size = useContext(MenuSizeContext)
+  const sizeStyle = sizeStyles[size]
+  const variant = local.variant ?? 'secondary'
+  const customClass = local.class ?? ''
+
+  const getClassName = (renderProps: MenuTriggerRenderProps): string => {
+    const base = 'inline-flex items-center justify-center rounded-lg border-2 font-medium transition-all duration-200'
+    const sizeClass = sizeStyle.button
+    const variantClass = buttonVariants[variant]
+
+    let stateClass: string
+    if (renderProps.isDisabled) {
+      stateClass = 'opacity-50 cursor-not-allowed'
+    } else if (renderProps.isPressed) {
+      stateClass = 'scale-95'
+    } else {
+      stateClass = 'cursor-pointer'
+    }
+
+    const focusClass = renderProps.isFocusVisible
+      ? 'ring-2 ring-accent-300 ring-offset-2 ring-offset-bg-400'
+      : ''
+
+    return [base, sizeClass, variantClass, stateClass, focusClass, customClass].filter(Boolean).join(' ')
+  }
+
+  return (
+    <HeadlessMenuButton
+      {...headlessProps}
+      class={getClassName}
+    >
+      {props.children as JSX.Element}
+      {/* Chevron rotates via CSS based on data-open attribute */}
+      <ChevronIcon class={`${sizeStyle.icon} transition-transform duration-200 data-open:rotate-180`} />
+    </HeadlessMenuButton>
+  )
+}
+
+// ============================================
+// MENU COMPONENT
+// ============================================
+
+/**
+ * A menu displays a list of actions or options for the user to choose from.
+ */
+export function Menu<T>(props: MenuProps<T>): JSX.Element {
+  const [local, headlessProps] = splitProps(props, ['class'])
+  const size = useContext(MenuSizeContext)
+  const styles = () => sizeStyles[size]
+  const customClass = local.class ?? ''
+
+  const getClassName = (_renderProps: MenuRenderProps): string => {
+    const base = 'absolute z-50 mt-1 min-w-[12rem] rounded-lg border-2 border-primary-600 bg-bg-400 shadow-lg overflow-hidden'
+    const sizeClass = styles().menu
+    return [base, sizeClass, customClass].filter(Boolean).join(' ')
+  }
+
+  return (
+    <HeadlessMenu
+      {...headlessProps}
+      class={getClassName}
+      children={props.children}
+    />
+  )
+}
+
+// ============================================
+// MENU ITEM COMPONENT
+// ============================================
+
+/**
+ * An item in a menu.
+ * SSR-compatible - renders icon, content, and shortcut directly without render props.
+ */
+export function MenuItem<T>(props: MenuItemProps<T>): JSX.Element {
+  const [local, headlessProps] = splitProps(props, ['class', 'icon', 'shortcut', 'isDestructive'])
+  const size = useContext(MenuSizeContext)
+  const sizeStyle = sizeStyles[size]
+  const customClass = local.class ?? ''
+
+  const getClassName = (renderProps: MenuItemRenderProps): string => {
+    const base = 'flex items-center cursor-pointer transition-colors duration-150 outline-none'
+    const sizeClass = sizeStyle.item
+
+    let colorClass: string
+    if (renderProps.isDisabled) {
+      colorClass = 'text-primary-500 cursor-not-allowed'
+    } else if (local.isDestructive) {
+      if (renderProps.isFocused || renderProps.isHovered) {
+        colorClass = 'bg-danger-400/20 text-danger-400'
+      } else {
+        colorClass = 'text-danger-400'
+      }
+    } else if (renderProps.isFocused || renderProps.isHovered) {
+      colorClass = 'bg-bg-300 text-primary-100'
+    } else {
+      colorClass = 'text-primary-200'
+    }
+
+    const pressedClass = renderProps.isPressed ? 'bg-bg-200' : ''
+
+    const focusClass = renderProps.isFocusVisible
+      ? 'ring-2 ring-inset ring-accent-300'
+      : ''
+
+    return [base, sizeClass, colorClass, pressedClass, focusClass, customClass].filter(Boolean).join(' ')
+  }
+
+  return (
+    <HeadlessMenuItem
+      {...headlessProps}
+      class={getClassName}
+    >
+      {local.icon && <span class={`shrink-0 ${sizeStyle.icon}`}>{local.icon()}</span>}
+      <span class="flex-1">{props.children as JSX.Element}</span>
+      {local.shortcut && <span class="text-primary-500 text-sm ml-auto">{local.shortcut}</span>}
+    </HeadlessMenuItem>
+  )
+}
+
+// ============================================
+// MENU SEPARATOR COMPONENT
+// ============================================
+
+export interface MenuSeparatorProps {
+  /** Additional CSS class name. */
+  class?: string
+}
+
+/**
+ * A visual separator between menu items.
+ */
+export function MenuSeparator(props: MenuSeparatorProps): JSX.Element {
+  return (
+    <li
+      role="separator"
+      class={`my-1 border-t border-primary-600 ${props.class ?? ''}`}
+    />
+  )
+}
+
+// ============================================
+// 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>
+  )
+}
+
+// Attach sub-components for convenience
+Menu.Item = MenuItem
+Menu.Separator = MenuSeparator
+MenuTrigger.Button = MenuButton
+
+// Re-export Key type for convenience
+export type { Key }