@proyecto-viviana/ui 0.1.7 → 0.2.0

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 }

package/src/meter/index.tsx

@@ -0,0 +1,163 @@
+/**
+ * Meter component for proyecto-viviana-ui
+ *
+ * Styled meter component built on top of the solidaria hook directly.
+ * Meters represent a quantity within a known range (unlike progress bars which show progress toward a goal).
+ */
+
+import { type JSX, splitProps, Show, createMemo } from 'solid-js';
+import { createMeter } from '@proyecto-viviana/solidaria';
+
+// ============================================
+// TYPES
+// ============================================
+
+export type MeterSize = 'sm' | 'md' | 'lg';
+export type MeterVariant = 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+
+export interface MeterProps {
+  /** The current value (controlled). @default 0 */
+  value?: number;
+  /** The smallest value allowed. @default 0 */
+  minValue?: number;
+  /** The largest value allowed. @default 100 */
+  maxValue?: number;
+  /** The content to display as the value's label (e.g. "75 GB"). */
+  valueLabel?: string;
+  /** The size of the meter. @default 'md' */
+  size?: MeterSize;
+  /** The visual style variant. @default 'primary' */
+  variant?: MeterVariant;
+  /** The label to display above the meter. */
+  label?: string;
+  /** Whether to show the value text. @default true */
+  showValueLabel?: boolean;
+  /** Additional CSS class name. */
+  class?: string;
+  /** An accessibility label. */
+  'aria-label'?: string;
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const sizeStyles = {
+  sm: {
+    track: 'h-1',
+    text: 'text-xs',
+  },
+  md: {
+    track: 'h-2',
+    text: 'text-sm',
+  },
+  lg: {
+    track: 'h-3',
+    text: 'text-base',
+  },
+};
+
+const variantStyles = {
+  primary: 'bg-primary-500',
+  accent: 'bg-accent',
+  success: 'bg-green-500',
+  warning: 'bg-yellow-500',
+  danger: 'bg-red-500',
+  info: 'bg-blue-500',
+};
+
+// ============================================
+// UTILITIES
+// ============================================
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+// ============================================
+// METER COMPONENT
+// ============================================
+
+/**
+ * Meters represent a quantity within a known range, or a fractional value.
+ * Unlike progress bars, meters represent a current value rather than progress toward a goal.
+ *
+ * @example
+ * ```tsx
+ * // Storage usage meter
+ * <Meter value={75} label="Storage space" valueLabel="75 GB of 100 GB" />
+ *
+ * // Battery level
+ * <Meter value={25} variant="warning" label="Battery" />
+ *
+ * // CPU usage with dynamic color
+ * <Meter value={cpuUsage} variant={cpuUsage > 80 ? 'danger' : 'success'} label="CPU" />
+ * ```
+ */
+export function Meter(props: MeterProps): JSX.Element {
+  const [local, ariaProps] = splitProps(props, [
+    'size',
+    'variant',
+    'label',
+    'showValueLabel',
+    'class',
+  ]);
+
+  const size = () => local.size ?? 'md';
+  const variant = () => local.variant ?? 'primary';
+  const showValueLabel = () => local.showValueLabel ?? true;
+
+  // Create meter aria props
+  const meterAria = createMeter({
+    get value() { return ariaProps.value; },
+    get minValue() { return ariaProps.minValue; },
+    get maxValue() { return ariaProps.maxValue; },
+    get valueLabel() { return ariaProps.valueLabel; },
+    get label() { return local.label; },
+    get 'aria-label'() { return ariaProps['aria-label']; },
+  });
+
+  // Calculate percentage
+  const percentage = createMemo(() => {
+    const value = ariaProps.value ?? 0;
+    const minValue = ariaProps.minValue ?? 0;
+    const maxValue = ariaProps.maxValue ?? 100;
+    const clampedValue = clamp(value, minValue, maxValue);
+    return ((clampedValue - minValue) / (maxValue - minValue)) * 100;
+  });
+
+  // Get value text from aria props
+  const valueText = () => meterAria.meterProps['aria-valuetext'] as string | undefined;
+
+  const sizeConfig = () => sizeStyles[size()];
+
+  return (
+    <div
+      {...meterAria.meterProps}
+      class={`w-full ${local.class ?? ''}`}
+    >
+      {/* Label and value row */}
+      <Show when={local.label || showValueLabel()}>
+        <div class={`flex justify-between items-center mb-1 ${sizeConfig().text}`}>
+          <Show when={local.label}>
+            <span class="text-primary-200 font-medium">{local.label}</span>
+          </Show>
+          <Show when={showValueLabel()}>
+            <span class="text-primary-300">{valueText()}</span>
+          </Show>
+        </div>
+      </Show>
+
+      {/* Track */}
+      <div class={`w-full ${sizeConfig().track} bg-bg-300 rounded-full overflow-hidden`}>
+        {/* Fill */}
+        <div
+          class={`h-full rounded-full transition-all duration-300 ${variantStyles[variant()]}`}
+          style={{
+            width: `${percentage()}%`,
+          }}
+        />
+      </div>
+    </div>
+  );
+}