@proyecto-viviana/ui 0.3.5 → 0.4.1

package/src/menu/index.tsx

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

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