@proyecto-viviana/ui 0.2.5 → 0.3.1

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>
-  );
-}

package/src/numberfield/index.tsx

@@ -1,482 +0,0 @@
-/**
- * NumberField component for proyecto-viviana-ui
- *
- * A styled number field component with increment/decrement buttons.
- * Built directly on solidaria hooks for full accessibility support.
- */
-
-import { type JSX, splitProps, mergeProps as solidMergeProps, Show } from 'solid-js'
-import {
-  createNumberField,
-  createFocusRing,
-  createPress,
-  createHover,
-  type AriaNumberFieldProps,
-} from '@proyecto-viviana/solidaria'
-import {
-  createNumberFieldState,
-} from '@proyecto-viviana/solid-stately'
-
-// ============================================
-// TYPES
-// ============================================
-
-export type NumberFieldSize = 'sm' | 'md' | 'lg'
-export type NumberFieldVariant = 'outline' | 'filled'
-
-export interface NumberFieldProps extends Omit<AriaNumberFieldProps, 'label'> {
-  /** The size of the number field. */
-  size?: NumberFieldSize
-  /** The visual variant of the number field. */
-  variant?: NumberFieldVariant
-  /** Additional CSS class name. */
-  class?: string
-  /** Label text for the input. */
-  label?: string
-  /** Description text shown below the input. */
-  description?: string
-  /** Error message shown when invalid. */
-  errorMessage?: string
-  /** The current value (controlled). */
-  value?: number
-  /** The default value (uncontrolled). */
-  defaultValue?: number
-  /** Handler called when the value changes. */
-  onChange?: (value: number) => void
-  /** The minimum value. */
-  minValue?: number
-  /** The maximum value. */
-  maxValue?: number
-  /** The step value for increment/decrement. */
-  step?: number
-  /** The locale for number formatting. */
-  locale?: string
-  /** Number format options. */
-  formatOptions?: Intl.NumberFormatOptions
-  /** Whether to hide the stepper buttons. */
-  hideStepper?: boolean
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const sizeStyles = {
-  sm: {
-    input: 'h-8 px-2 text-sm',
-    label: 'text-sm',
-    description: 'text-xs',
-    button: 'w-6 h-6 text-sm',
-    buttonGap: 'gap-0.5',
-  },
-  md: {
-    input: 'h-10 px-3 text-base',
-    label: 'text-sm',
-    description: 'text-sm',
-    button: 'w-8 h-8 text-base',
-    buttonGap: 'gap-1',
-  },
-  lg: {
-    input: 'h-12 px-4 text-lg',
-    label: 'text-base',
-    description: 'text-sm',
-    button: 'w-10 h-10 text-lg',
-    buttonGap: 'gap-1',
-  },
-}
-
-// ============================================
-// ICONS
-// ============================================
-
-function PlusIcon(props: { class?: string }) {
-  return (
-    <svg
-      class={props.class}
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-    >
-      <path d="M8 3v10M3 8h10" />
-    </svg>
-  )
-}
-
-function MinusIcon(props: { class?: string }) {
-  return (
-    <svg
-      class={props.class}
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-    >
-      <path d="M3 8h10" />
-    </svg>
-  )
-}
-
-// ============================================
-// COMPONENT
-// ============================================
-
-/**
- * A number field allows users to enter a numeric value with increment/decrement controls.
- *
- * Built directly on solidaria hooks for full accessibility support.
- */
-export function NumberField(props: NumberFieldProps): JSX.Element {
-  const defaultProps: Partial<NumberFieldProps> = {
-    size: 'md',
-    variant: 'outline',
-  }
-
-  const merged = solidMergeProps(defaultProps, props)
-
-  const [local, stateProps, ariaProps] = splitProps(merged, [
-    'size',
-    'variant',
-    'class',
-    'label',
-    'description',
-    'errorMessage',
-    'hideStepper',
-  ], [
-    'value',
-    'defaultValue',
-    'onChange',
-    'minValue',
-    'maxValue',
-    'step',
-    'locale',
-    'formatOptions',
-  ])
-
-  const size = () => sizeStyles[local.size!]
-
-  // Ref for input element
-  let inputRef: HTMLInputElement | undefined
-
-  // Create number field state
-  const state = createNumberFieldState({
-    get value() {
-      return stateProps.value
-    },
-    get defaultValue() {
-      return stateProps.defaultValue
-    },
-    get onChange() {
-      return stateProps.onChange
-    },
-    get minValue() {
-      return stateProps.minValue
-    },
-    get maxValue() {
-      return stateProps.maxValue
-    },
-    get step() {
-      return stateProps.step
-    },
-    get locale() {
-      return stateProps.locale
-    },
-    get formatOptions() {
-      return stateProps.formatOptions
-    },
-    get isDisabled() {
-      return ariaProps.isDisabled
-    },
-    get isReadOnly() {
-      return ariaProps.isReadOnly
-    },
-  })
-
-  // Create number field aria props
-  const numberFieldAria = createNumberField(
-    {
-      get label() {
-        return local.label
-      },
-      get 'aria-label'() {
-        return ariaProps['aria-label']
-      },
-      get 'aria-labelledby'() {
-        return ariaProps['aria-labelledby']
-      },
-      get 'aria-describedby'() {
-        return ariaProps['aria-describedby']
-      },
-      get isDisabled() {
-        return ariaProps.isDisabled
-      },
-      get isReadOnly() {
-        return ariaProps.isReadOnly
-      },
-      get isRequired() {
-        return ariaProps.isRequired
-      },
-      get isInvalid() {
-        return ariaProps.isInvalid
-      },
-      get description() {
-        return local.description
-      },
-      get errorMessage() {
-        return local.errorMessage
-      },
-      get id() {
-        return ariaProps.id
-      },
-      get autoFocus() {
-        return ariaProps.autoFocus
-      },
-      get name() {
-        return ariaProps.name
-      },
-    },
-    state,
-    () => inputRef ?? null
-  )
-
-  // Create focus ring for input
-  const { isFocused, isFocusVisible, focusProps } = createFocusRing()
-
-  // Increment button interactions
-  const { isPressed: incrementPressed, pressProps: incrementPressProps } = createPress({
-    get isDisabled() {
-      return ariaProps.isDisabled || !state.canIncrement()
-    },
-    onPress: () => {
-      state.increment()
-      inputRef?.focus()
-    },
-  })
-
-  const { isHovered: incrementHovered, hoverProps: incrementHoverProps } = createHover({
-    get isDisabled() {
-      return ariaProps.isDisabled || !state.canIncrement()
-    },
-  })
-
-  // Decrement button interactions
-  const { isPressed: decrementPressed, pressProps: decrementPressProps } = createPress({
-    get isDisabled() {
-      return ariaProps.isDisabled || !state.canDecrement()
-    },
-    onPress: () => {
-      state.decrement()
-      inputRef?.focus()
-    },
-  })
-
-  const { isHovered: decrementHovered, hoverProps: decrementHoverProps } = createHover({
-    get isDisabled() {
-      return ariaProps.isDisabled || !state.canDecrement()
-    },
-  })
-
-  // Compute classes
-  const containerClasses = () => {
-    const base = 'flex flex-col'
-    const disabledClass = ariaProps.isDisabled ? 'opacity-60' : ''
-    const custom = local.class || ''
-    return [base, disabledClass, custom].filter(Boolean).join(' ')
-  }
-
-  const groupClasses = () => {
-    const base = 'flex items-center'
-    const gapClass = size().buttonGap
-    return [base, gapClass].filter(Boolean).join(' ')
-  }
-
-  const inputClasses = () => {
-    const base = 'flex-1 rounded-md transition-all duration-200 outline-none text-center'
-    const sizeClass = size().input
-
-    let variantClass: string
-    if (local.variant === 'filled') {
-      variantClass = 'bg-bg-200 border border-transparent'
-    } else {
-      variantClass = 'bg-transparent border border-bg-400'
-    }
-
-    let stateClass: string
-    if (ariaProps.isDisabled) {
-      stateClass = 'bg-bg-200 text-primary-500 cursor-not-allowed'
-    } else if (ariaProps.isInvalid) {
-      stateClass = 'border-danger-500 focus:border-danger-400 focus:ring-2 focus:ring-danger-400/20'
-    } else {
-      stateClass = 'text-primary-100 placeholder:text-primary-500 focus:border-accent focus:ring-2 focus:ring-accent/20'
-    }
-
-    const hoverClass = ariaProps.isDisabled ? '' : 'hover:border-accent-300'
-
-    return [base, sizeClass, variantClass, stateClass, hoverClass].filter(Boolean).join(' ')
-  }
-
-  const buttonClasses = (isIncrement: boolean) => {
-    const base = 'flex items-center justify-center rounded-md transition-all duration-150 select-none'
-    const sizeClass = size().button
-
-    const isDisabled = ariaProps.isDisabled || (isIncrement ? !state.canIncrement() : !state.canDecrement())
-    const isPressed = isIncrement ? incrementPressed() : decrementPressed()
-    const isHovered = isIncrement ? incrementHovered() : decrementHovered()
-
-    let stateClass: string
-    if (isDisabled) {
-      stateClass = 'bg-bg-300 text-primary-600 cursor-not-allowed'
-    } else if (isPressed) {
-      stateClass = 'bg-accent-600 text-white scale-95'
-    } else if (isHovered) {
-      stateClass = 'bg-accent-500 text-white'
-    } else {
-      stateClass = 'bg-bg-300 text-primary-200 hover:bg-accent-500 hover:text-white'
-    }
-
-    return [base, sizeClass, stateClass].filter(Boolean).join(' ')
-  }
-
-  const labelClasses = () => {
-    const base = 'block font-medium text-primary-200 mb-1'
-    const sizeClass = size().label
-    return [base, sizeClass].filter(Boolean).join(' ')
-  }
-
-  const descriptionClasses = () => {
-    const base = 'mt-1 text-primary-400'
-    const sizeClass = size().description
-    return [base, sizeClass].filter(Boolean).join(' ')
-  }
-
-  const errorClasses = () => {
-    const base = 'mt-1 text-danger-500'
-    const sizeClass = size().description
-    return [base, sizeClass].filter(Boolean).join(' ')
-  }
-
-  // Clean props helpers
-  const cleanInputProps = () => {
-    const { ref: _ref, ...rest } = numberFieldAria.inputProps as Record<string, unknown>
-    return rest
-  }
-
-  const cleanFocusProps = () => {
-    const { ref: _ref, ...rest } = focusProps as Record<string, unknown>
-    return rest
-  }
-
-  const cleanGroupProps = () => {
-    const { ref: _ref, ...rest } = numberFieldAria.groupProps as Record<string, unknown>
-    return rest
-  }
-
-  const cleanDecrementProps = () => {
-    const { ref: _ref, ...rest } = numberFieldAria.decrementButtonProps as Record<string, unknown>
-    return rest
-  }
-
-  const cleanIncrementProps = () => {
-    const { ref: _ref, ...rest } = numberFieldAria.incrementButtonProps as Record<string, unknown>
-    return rest
-  }
-
-  const cleanDecrementPressProps = () => {
-    const { ref: _ref, ...rest } = decrementPressProps as Record<string, unknown>
-    return rest
-  }
-
-  const cleanDecrementHoverProps = () => {
-    const { ref: _ref, ...rest } = decrementHoverProps as Record<string, unknown>
-    return rest
-  }
-
-  const cleanIncrementPressProps = () => {
-    const { ref: _ref, ...rest } = incrementPressProps as Record<string, unknown>
-    return rest
-  }
-
-  const cleanIncrementHoverProps = () => {
-    const { ref: _ref, ...rest } = incrementHoverProps as Record<string, unknown>
-    return rest
-  }
-
-  return (
-    <div
-      {...cleanGroupProps()}
-      class={containerClasses()}
-      data-disabled={ariaProps.isDisabled || undefined}
-      data-invalid={ariaProps.isInvalid || undefined}
-    >
-      {/* Label */}
-      <Show when={local.label}>
-        <span {...numberFieldAria.labelProps} class={labelClasses()}>
-          {local.label}
-          <Show when={ariaProps.isRequired}>
-            <span class="text-danger-500 ml-1">*</span>
-          </Show>
-        </span>
-      </Show>
-
-      {/* Input Group */}
-      <div class={groupClasses()}>
-        {/* Decrement Button */}
-        <Show when={!local.hideStepper}>
-          <button
-            {...cleanDecrementProps()}
-            {...cleanDecrementPressProps()}
-            {...cleanDecrementHoverProps()}
-            class={buttonClasses(false)}
-            data-pressed={decrementPressed() || undefined}
-            data-hovered={decrementHovered() || undefined}
-            data-disabled={ariaProps.isDisabled || !state.canDecrement() || undefined}
-          >
-            <MinusIcon class="w-4 h-4" />
-          </button>
-        </Show>
-
-        {/* Input */}
-        <input
-          ref={inputRef}
-          {...cleanInputProps()}
-          {...cleanFocusProps()}
-          class={inputClasses()}
-          data-focused={isFocused() || undefined}
-          data-focus-visible={isFocusVisible() || undefined}
-        />
-
-        {/* Increment Button */}
-        <Show when={!local.hideStepper}>
-          <button
-            {...cleanIncrementProps()}
-            {...cleanIncrementPressProps()}
-            {...cleanIncrementHoverProps()}
-            class={buttonClasses(true)}
-            data-pressed={incrementPressed() || undefined}
-            data-hovered={incrementHovered() || undefined}
-            data-disabled={ariaProps.isDisabled || !state.canIncrement() || undefined}
-          >
-            <PlusIcon class="w-4 h-4" />
-          </button>
-        </Show>
-      </div>
-
-      {/* Description */}
-      <Show when={local.description && !ariaProps.isInvalid}>
-        <span {...numberFieldAria.descriptionProps} class={descriptionClasses()}>
-          {local.description}
-        </span>
-      </Show>
-
-      {/* Error Message */}
-      <Show when={ariaProps.isInvalid && local.errorMessage}>
-        <span {...numberFieldAria.errorMessageProps} class={errorClasses()}>
-          {local.errorMessage}
-        </span>
-      </Show>
-    </div>
-  )
-}
-
-// Re-export types
-export type { NumberFieldState } from '@proyecto-viviana/solid-stately'