@proyecto-viviana/ui 0.3.1 → 0.3.3

package/src/popover/index.tsx

@@ -0,0 +1,260 @@
+/**
+ * Popover component for proyecto-viviana-ui
+ *
+ * A popover displays content in an overlay positioned relative to a trigger.
+ * Built on top of solidaria-components for accessibility.
+ * Follows Spectrum 2 design patterns.
+ */
+
+import { type JSX, Show, splitProps } from 'solid-js'
+import {
+  Popover as HeadlessPopover,
+  PopoverTrigger as HeadlessPopoverTrigger,
+  OverlayArrow as HeadlessOverlayArrow,
+  type PopoverProps as HeadlessPopoverProps,
+  type PopoverTriggerProps as HeadlessPopoverTriggerProps,
+  type PopoverRenderProps,
+} from '@proyecto-viviana/solidaria-components'
+import type { Placement, PlacementAxis } from '@proyecto-viviana/solidaria'
+
+// ============================================
+// TYPES
+// ============================================
+
+export type PopoverPlacement = Placement
+export type PopoverSize = 'sm' | 'md' | 'lg'
+
+export interface PopoverTriggerProps extends HeadlessPopoverTriggerProps {
+  /** The children of the popover trigger (trigger element and popover). */
+  children: JSX.Element
+}
+
+export interface PopoverProps extends Omit<HeadlessPopoverProps, 'class' | 'style' | 'children'> {
+  /** The content of the popover. */
+  children: JSX.Element
+  /** The position of the popover relative to the trigger. */
+  placement?: PopoverPlacement
+  /** Size variant of the popover. */
+  size?: PopoverSize
+  /** Additional CSS class name. */
+  class?: string
+  /** Whether to show an arrow pointing to the trigger. */
+  showArrow?: boolean
+  /** Custom padding inside the popover. */
+  padding?: 'none' | 'sm' | 'md' | 'lg'
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const baseStyles = [
+  'bg-bg-300',
+  'rounded-lg',
+  'shadow-xl',
+  'border border-primary-700',
+  'text-primary-200',
+  'outline-none',
+  // Animation
+  'animate-in fade-in-0 zoom-in-95',
+  'data-[placement=top]:slide-in-from-bottom-2',
+  'data-[placement=bottom]:slide-in-from-top-2',
+  'data-[placement=left]:slide-in-from-right-2',
+  'data-[placement=right]:slide-in-from-left-2',
+  'data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95',
+].join(' ')
+
+const sizeStyles: Record<PopoverSize, string> = {
+  sm: 'max-w-xs',
+  md: 'max-w-sm',
+  lg: 'max-w-lg',
+}
+
+const paddingStyles: Record<string, string> = {
+  none: '',
+  sm: 'p-2',
+  md: 'p-4',
+  lg: 'p-6',
+}
+
+// Arrow styles based on placement
+const arrowBaseStyles = [
+  'fill-bg-300',
+  'stroke-primary-700',
+  'stroke-1',
+].join(' ')
+
+// Arrow positioning for each placement axis
+const getArrowRotation = (placement: PlacementAxis | null): string => {
+  switch (placement) {
+    case 'top':
+      return 'rotate-180'
+    case 'bottom':
+      return ''
+    case 'left':
+      return 'rotate-90'
+    case 'right':
+      return '-rotate-90'
+    default:
+      return ''
+  }
+}
+
+// ============================================
+// COMPONENTS
+// ============================================
+
+/**
+ * PopoverTrigger wraps around a trigger element and a Popover.
+ * It handles opening and closing the Popover when the user interacts
+ * with the trigger.
+ *
+ * @example
+ * ```tsx
+ * <PopoverTrigger>
+ *   <Button>Open Popover</Button>
+ *   <Popover>
+ *     <p>Popover content here!</p>
+ *   </Popover>
+ * </PopoverTrigger>
+ * ```
+ */
+export function PopoverTrigger(props: PopoverTriggerProps): JSX.Element {
+  return <HeadlessPopoverTrigger {...props} />
+}
+
+/**
+ * Styled popover component that displays content in an overlay.
+ *
+ * @example
+ * ```tsx
+ * <PopoverTrigger>
+ *   <Button>Settings</Button>
+ *   <Popover placement="bottom" size="md">
+ *     <h3>Settings</h3>
+ *     <p>Configure your preferences here.</p>
+ *   </Popover>
+ * </PopoverTrigger>
+ * ```
+ */
+export function Popover(props: PopoverProps): JSX.Element {
+  const [local, rest] = splitProps(props, [
+    'placement',
+    'size',
+    'class',
+    'showArrow',
+    'padding',
+  ])
+
+  const placement = () => local.placement ?? 'bottom'
+  const size = () => local.size ?? 'md'
+  const padding = () => local.padding ?? 'md'
+
+  return (
+    <HeadlessPopover
+      {...rest}
+      placement={placement()}
+      class={(_renderProps: PopoverRenderProps) => {
+        const classes = [
+          baseStyles,
+          sizeStyles[size()],
+          paddingStyles[padding()],
+          local.class ?? '',
+        ].filter(Boolean).join(' ')
+        return classes
+      }}
+    >
+      {(renderProps: PopoverRenderProps) => (
+        <>
+          <Show when={local.showArrow}>
+            <PopoverArrow placement={renderProps.placement} />
+          </Show>
+          {props.children}
+        </>
+      )}
+    </HeadlessPopover>
+  )
+}
+
+/**
+ * Arrow component for the popover.
+ * Automatically positions itself based on the popover placement.
+ */
+interface PopoverArrowProps {
+  /** The current placement axis. */
+  placement: PlacementAxis | null
+  /** Additional CSS class. */
+  class?: string
+}
+
+function PopoverArrow(props: PopoverArrowProps): JSX.Element {
+  return (
+    <HeadlessOverlayArrow
+      class="absolute block"
+      style={{
+        // Position based on placement
+        ...(props.placement === 'top' && { bottom: '100%', left: '50%', transform: 'translateX(-50%)' }),
+        ...(props.placement === 'bottom' && { top: '-8px', left: '50%', transform: 'translateX(-50%)' }),
+        ...(props.placement === 'left' && { right: '100%', top: '50%', transform: 'translateY(-50%)' }),
+        ...(props.placement === 'right' && { left: '-8px', top: '50%', transform: 'translateY(-50%)' }),
+      }}
+    >
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+        class={`${arrowBaseStyles} ${getArrowRotation(props.placement)} ${props.class ?? ''}`}
+      >
+        <path d="M0 0 L6 6 L12 0" />
+      </svg>
+    </HeadlessOverlayArrow>
+  )
+}
+
+// ============================================
+// POPOVER CONTENT SECTIONS
+// ============================================
+
+export interface PopoverHeaderProps {
+  /** The title of the popover. */
+  title: string
+  /** Optional description text. */
+  description?: string
+  /** Additional CSS class. */
+  class?: string
+}
+
+/**
+ * Header section for popover with title and optional description.
+ */
+export function PopoverHeader(props: PopoverHeaderProps): JSX.Element {
+  return (
+    <div class={`mb-3 ${props.class ?? ''}`}>
+      <h3 class="text-lg font-semibold text-primary-100">{props.title}</h3>
+      <Show when={props.description}>
+        <p class="text-sm text-primary-400 mt-1">{props.description}</p>
+      </Show>
+    </div>
+  )
+}
+
+export interface PopoverFooterProps {
+  /** Footer content, typically buttons. */
+  children: JSX.Element
+  /** Additional CSS class. */
+  class?: string
+}
+
+/**
+ * Footer section for popover actions.
+ */
+export function PopoverFooter(props: PopoverFooterProps): JSX.Element {
+  return (
+    <div class={`flex gap-2 justify-end mt-4 pt-3 border-t border-primary-700 ${props.class ?? ''}`}>
+      {props.children}
+    </div>
+  )
+}
+
+// Re-export types
+export type { PopoverRenderProps, Placement, PlacementAxis }

package/src/progress-bar/index.tsx

@@ -0,0 +1,169 @@
+/**
+ * ProgressBar component for proyecto-viviana-ui
+ *
+ * Styled progress bar component built on top of the solidaria hook directly.
+ */
+
+import { type JSX, splitProps, Show, createMemo } from 'solid-js';
+import { createProgressBar } from '@proyecto-viviana/solidaria';
+
+// ============================================
+// TYPES
+// ============================================
+
+export type ProgressBarSize = 'sm' | 'md' | 'lg';
+export type ProgressBarVariant = 'primary' | 'accent' | 'success' | 'warning' | 'danger';
+
+export interface ProgressBarProps {
+  /** 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. "1 of 4"). */
+  valueLabel?: string;
+  /** Whether presentation is indeterminate when progress isn't known. */
+  isIndeterminate?: boolean;
+  /** The size of the progress bar. @default 'md' */
+  size?: ProgressBarSize;
+  /** The visual style variant. @default 'primary' */
+  variant?: ProgressBarVariant;
+  /** The label to display above the progress bar. */
+  label?: string;
+  /** Whether to show the value text. @default true for determinate progress */
+  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',
+};
+
+// ============================================
+// UTILITIES
+// ============================================
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+// ============================================
+// PROGRESSBAR COMPONENT
+// ============================================
+
+/**
+ * Progress bars show either determinate or indeterminate progress of an operation
+ * over time.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar value={50} label="Loading..." />
+ *
+ * // Indeterminate
+ * <ProgressBar isIndeterminate label="Processing..." />
+ *
+ * // Different variants
+ * <ProgressBar value={75} variant="success" />
+ * ```
+ */
+export function ProgressBar(props: ProgressBarProps): JSX.Element {
+  const [local, ariaProps] = splitProps(props, [
+    'size',
+    'variant',
+    'label',
+    'showValueLabel',
+    'class',
+  ]);
+
+  const size = () => local.size ?? 'md';
+  const variant = () => local.variant ?? 'primary';
+  const isIndeterminate = () => ariaProps.isIndeterminate ?? false;
+  const showValueLabel = () => local.showValueLabel ?? !isIndeterminate();
+
+  // Create progress bar aria props
+  const progressAria = createProgressBar({
+    get value() { return ariaProps.value; },
+    get minValue() { return ariaProps.minValue; },
+    get maxValue() { return ariaProps.maxValue; },
+    get valueLabel() { return ariaProps.valueLabel; },
+    get isIndeterminate() { return ariaProps.isIndeterminate; },
+    get label() { return local.label; },
+    get 'aria-label'() { return ariaProps['aria-label']; },
+  });
+
+  // Calculate percentage
+  const percentage = createMemo(() => {
+    if (isIndeterminate()) {
+      return undefined;
+    }
+    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 = () => progressAria.progressBarProps['aria-valuetext'] as string | undefined;
+
+  const sizeConfig = () => sizeStyles[size()];
+
+  return (
+    <div
+      {...progressAria.progressBarProps}
+      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() && !isIndeterminate()}>
+            <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()]} ${
+            isIndeterminate() ? 'animate-progress-indeterminate' : ''
+          }`}
+          style={{
+            width: isIndeterminate() ? '30%' : `${percentage()}%`,
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/radio/index.tsx

@@ -0,0 +1,173 @@
+/**
+ * RadioGroup and Radio components for proyecto-viviana-ui
+ *
+ * Styled radio components built on top of solidaria-components.
+ * SSR-compatible - renders children and UI elements directly without render props.
+ */
+
+import { type JSX, Show, createContext, useContext, splitProps } from 'solid-js'
+import {
+  RadioGroup as HeadlessRadioGroup,
+  Radio as HeadlessRadio,
+  type RadioGroupProps as HeadlessRadioGroupProps,
+  type RadioProps as HeadlessRadioProps,
+  type RadioGroupRenderProps,
+  type RadioRenderProps,
+} from '@proyecto-viviana/solidaria-components'
+
+// ============================================
+// SIZE CONTEXT
+// ============================================
+
+export type RadioGroupOrientation = 'horizontal' | 'vertical'
+export type RadioGroupSize = 'sm' | 'md' | 'lg'
+
+const RadioSizeContext = createContext<RadioGroupSize>('md')
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface RadioGroupProps extends Omit<HeadlessRadioGroupProps, 'class' | 'style'> {
+  /** The size of the radio buttons. */
+  size?: RadioGroupSize
+  /** Additional CSS class name. */
+  class?: string
+  /** Label for the group. */
+  label?: string
+  /** Description for the group. */
+  description?: string
+  /** Error message when invalid. */
+  errorMessage?: string
+}
+
+export interface RadioProps extends Omit<HeadlessRadioProps, 'class' | 'style'> {
+  /** Additional CSS class name. */
+  class?: string
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const sizeStyles = {
+  sm: {
+    circle: 'h-4 w-4',
+    dot: 'h-2 w-2',
+    label: 'text-sm',
+  },
+  md: {
+    circle: 'h-5 w-5',
+    dot: 'h-2.5 w-2.5',
+    label: 'text-base',
+  },
+  lg: {
+    circle: 'h-6 w-6',
+    dot: 'h-3 w-3',
+    label: 'text-lg',
+  },
+}
+
+// ============================================
+// RADIO GROUP COMPONENT
+// ============================================
+
+/**
+ * A radio group allows users to select a single option from a list of mutually exclusive options.
+ *
+ * Built on solidaria-components RadioGroup for full accessibility support.
+ */
+export function RadioGroup(props: RadioGroupProps): JSX.Element {
+  // Split out our custom styling props from the rest
+  const [local, headlessProps] = splitProps(props, [
+    'size',
+    'class',
+    'label',
+    'description',
+    'errorMessage',
+  ])
+
+  const size = local.size ?? 'md'
+  const customClass = local.class ?? ''
+
+  // Generate class based on render props
+  const getClassName = (renderProps: RadioGroupRenderProps): string => {
+    const base = 'flex gap-2'
+    const orientationClass = renderProps.orientation === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col'
+    const disabledClass = renderProps.isDisabled ? 'opacity-50' : ''
+    return [base, orientationClass, disabledClass, customClass].filter(Boolean).join(' ')
+  }
+
+  // Pass remaining props through to headless component
+  // headlessProps maintains reactivity for controlled values like value/onChange
+  return (
+    <RadioSizeContext.Provider value={size}>
+      <HeadlessRadioGroup
+        {...headlessProps}
+        class={getClassName}
+        data-size={size}
+      >
+        <Show when={local.label}>
+          <span class="text-primary-200 font-medium mb-1">{local.label}</span>
+        </Show>
+        {props.children as JSX.Element}
+        <Show when={local.description}>
+          <span class="text-primary-400 text-sm [&:has(~[data-invalid])]:hidden">{local.description}</span>
+        </Show>
+        <Show when={local.errorMessage}>
+          <span class="text-danger-400 text-sm hidden [[data-invalid]_&]:block">{local.errorMessage}</span>
+        </Show>
+      </HeadlessRadioGroup>
+    </RadioSizeContext.Provider>
+  )
+}
+
+// ============================================
+// RADIO COMPONENT
+// ============================================
+
+/**
+ * A radio button allows users to select a single option from a list.
+ * Must be used within a RadioGroup.
+ * SSR-compatible - renders static JSX without render prop children.
+ *
+ * Note: Unlike other styled components, Radio does not use render props for children.
+ * Instead, it relies on data attributes set by the headless Radio component for styling.
+ * However, since we need dynamic styling based on state, we accept that this component
+ * has some limitations compared to the render-props-based original implementation.
+ *
+ * Built on solidaria-components Radio for full accessibility support.
+ */
+export function Radio(props: RadioProps): JSX.Element {
+  const [local, headlessProps] = splitProps(props, ['class'])
+  const sizeFromContext = useContext(RadioSizeContext)
+  const sizeStyle = sizeStyles[sizeFromContext]
+  const customClass = local.class ?? ''
+
+  // Generate class based on render props
+  const getClassName = (renderProps: RadioRenderProps): string => {
+    const base = 'inline-flex items-center gap-2'
+    const cursorClass = renderProps.isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'
+    const disabledClass = renderProps.isDisabled ? 'opacity-50' : ''
+    return [base, cursorClass, disabledClass, customClass].filter(Boolean).join(' ')
+  }
+
+  // Static classes - will use a simplified visual style since we can't dynamically style based on state without render props
+  const circleClass = `relative flex items-center justify-center rounded-full border-2 transition-all duration-200 ${sizeStyle.circle} border-primary-600 bg-transparent hover:border-accent-300`
+  const dotClass = `rounded-full bg-accent transition-all duration-200 ${sizeStyle.dot}`
+  const labelClass = `text-primary-200 ${sizeStyle.label}`
+
+  return (
+    <HeadlessRadio
+      {...headlessProps}
+      class={getClassName}
+    >
+      <span class={circleClass}>
+        <span class={dotClass} />
+      </span>
+      <Show when={props.children}>
+        <span class={labelClass}>{props.children as JSX.Element}</span>
+      </Show>
+    </HeadlessRadio>
+  )
+}