@refraction-ui/astro 0.4.2 → 0.4.5

package/dist/otp-input/otp-input.styles.ts

@@ -0,0 +1,51 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const otpInputTokens: TokenContract = {
+  name: 'otp-input',
+  tokens: {
+    bg: { variable: '--rfr-otp-bg', fallback: 'hsl(var(--background))' },
+    fg: { variable: '--rfr-otp-fg', fallback: 'hsl(var(--foreground))' },
+    border: { variable: '--rfr-otp-border', fallback: 'hsl(var(--border))' },
+    'border-filled': { variable: '--rfr-otp-border-filled', fallback: 'hsl(var(--primary))' },
+    ring: { variable: '--rfr-otp-ring', fallback: 'hsl(var(--ring))' },
+  },
+}
+
+export const otpInputContainerVariants = cva({
+  base: 'flex items-center gap-2',
+  variants: {
+    size: {
+      sm: 'gap-1.5',
+      default: 'gap-2',
+      lg: 'gap-3',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+})
+
+export const otpInputSlotVariants = cva({
+  base: 'relative flex items-center justify-center rounded-md border border-input bg-background text-center font-mono shadow-sm transition-all',
+  variants: {
+    size: {
+      sm: 'h-8 w-8 text-sm',
+      default: 'h-10 w-10 text-base',
+      lg: 'h-12 w-12 text-lg',
+    },
+    focused: {
+      true: 'ring-2 ring-ring ring-offset-background',
+      false: '',
+    },
+    filled: {
+      true: 'border-primary',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+    focused: 'false',
+    filled: 'false',
+  },
+})

package/dist/otp-input/otp-input.ts

@@ -0,0 +1,198 @@
+import type { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.ts'
+import { Keys } from '../shared/index.ts'
+
+export type OtpInputType = 'number' | 'text'
+
+export interface OtpInputProps {
+  length?: number
+  value?: string
+  autoFocus?: boolean
+  type?: OtpInputType
+  disabled?: boolean
+}
+
+export interface OtpSlotProps {
+  ariaProps: Partial<AccessibilityProps>
+  dataAttributes: Record<string, string>
+  inputProps: {
+    maxLength: number
+    inputMode: string
+    pattern?: string
+    autoComplete: string
+    disabled: boolean
+  }
+}
+
+export interface OtpInputAPI {
+  /** Current state */
+  state: {
+    values: string[]
+    focusedIndex: number
+    length: number
+    disabled: boolean
+  }
+  /** Set the value at a specific index */
+  setValue: (index: number, char: string) => string[]
+  /** Get the combined OTP string */
+  getValue: () => string
+  /** Move focus in a direction, returns new index */
+  moveFocus: (direction: 'left' | 'right') => number
+  /** Get aria/input props for a specific slot */
+  getSlotProps: (index: number) => OtpSlotProps
+  /** Keyboard handlers factory for a specific slot */
+  getKeyboardHandlers: (
+    index: number,
+    callbacks?: {
+      onMoveFocus?: (index: number) => void
+      onSetValue?: (index: number, values: string[]) => void
+    },
+  ) => KeyboardHandlerMap
+  /** Parse a paste string into values array */
+  parsePaste: (text: string) => string[]
+  /** Root container ARIA props */
+  rootAriaProps: Partial<AccessibilityProps>
+  /** Whether interaction should be blocked */
+  isInteractive: boolean
+}
+
+export function createOtpInput(props: OtpInputProps = {}): OtpInputAPI {
+  const {
+    length = 6,
+    value = '',
+    autoFocus = false,
+    type = 'number',
+    disabled = false,
+  } = props
+
+  const isInteractive = !disabled
+
+  // Initialize values from the provided value string
+  const values: string[] = Array.from({ length }, (_, i) => value.charAt(i) || '')
+  let focusedIndex = autoFocus ? 0 : -1
+
+  const rootAriaProps: Partial<AccessibilityProps> = {
+    role: 'group',
+    'aria-label': 'One-time password input',
+  }
+
+  function setValue(index: number, char: string): string[] {
+    if (index < 0 || index >= length) return [...values]
+    const filtered = type === 'number' ? char.replace(/[^0-9]/g, '') : char
+    const newValues = [...values]
+    newValues[index] = filtered.charAt(0) || ''
+    // Update internal state
+    for (let i = 0; i < length; i++) {
+      values[i] = newValues[i]
+    }
+    return newValues
+  }
+
+  function getValue(): string {
+    return values.join('')
+  }
+
+  function moveFocus(direction: 'left' | 'right'): number {
+    if (direction === 'left') {
+      focusedIndex = Math.max(0, focusedIndex - 1)
+    } else {
+      focusedIndex = Math.min(length - 1, focusedIndex + 1)
+    }
+    return focusedIndex
+  }
+
+  function getSlotProps(index: number): OtpSlotProps {
+    const isFocused = index === focusedIndex
+    const isFilled = values[index] !== ''
+
+    const ariaProps: Partial<AccessibilityProps> = {
+      'aria-label': `Digit ${index + 1} of ${length}`,
+    }
+
+    const dataAttributes: Record<string, string> = {
+      'data-slot': 'otp-slot',
+    }
+    if (isFocused) {
+      dataAttributes['data-focused'] = ''
+    }
+    if (isFilled) {
+      dataAttributes['data-filled'] = ''
+    }
+
+    const inputProps = {
+      maxLength: 1,
+      inputMode: type === 'number' ? 'numeric' : 'text',
+      pattern: type === 'number' ? '[0-9]*' : undefined,
+      autoComplete: index === 0 ? 'one-time-code' : 'off',
+      disabled,
+    }
+
+    return { ariaProps, dataAttributes, inputProps }
+  }
+
+  function getKeyboardHandlers(
+    index: number,
+    callbacks?: {
+      onMoveFocus?: (index: number) => void
+      onSetValue?: (index: number, values: string[]) => void
+    },
+  ): KeyboardHandlerMap {
+    if (!isInteractive) {
+      return {
+        [Keys.Backspace]: (e) => e.preventDefault(),
+        [Keys.ArrowLeft]: (e) => e.preventDefault(),
+        [Keys.ArrowRight]: (e) => e.preventDefault(),
+      }
+    }
+
+    return {
+      [Keys.Backspace]: (e) => {
+        e.preventDefault()
+        if (values[index]) {
+          const newValues = setValue(index, '')
+          callbacks?.onSetValue?.(index, newValues)
+        } else if (index > 0) {
+          focusedIndex = index - 1
+          const newValues = setValue(index - 1, '')
+          callbacks?.onSetValue?.(index - 1, newValues)
+          callbacks?.onMoveFocus?.(focusedIndex)
+        }
+      },
+      [Keys.ArrowLeft]: (e) => {
+        e.preventDefault()
+        if (index > 0) {
+          focusedIndex = index - 1
+          callbacks?.onMoveFocus?.(focusedIndex)
+        }
+      },
+      [Keys.ArrowRight]: (e) => {
+        e.preventDefault()
+        if (index < length - 1) {
+          focusedIndex = index + 1
+          callbacks?.onMoveFocus?.(focusedIndex)
+        }
+      },
+    }
+  }
+
+  function parsePaste(text: string): string[] {
+    const chars = type === 'number' ? text.replace(/[^0-9]/g, '') : text
+    return Array.from({ length }, (_, i) => chars.charAt(i) || '')
+  }
+
+  return {
+    state: {
+      values,
+      focusedIndex,
+      length,
+      disabled,
+    },
+    setValue,
+    getValue,
+    moveFocus,
+    getSlotProps,
+    getKeyboardHandlers,
+    parsePaste,
+    rootAriaProps,
+    isInteractive,
+  }
+}

package/dist/pagination/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/payment/index.ts

@@ -0,0 +1 @@
+export * from './payment.js';

package/dist/payment/payment.ts

@@ -0,0 +1,16 @@
+export interface PaymentProps {
+  disabled?: boolean;
+}
+
+export interface PaymentAPI {
+  props: PaymentProps;
+}
+
+export function createPayment(props: PaymentProps = {}): PaymentAPI {
+  return {
+    props: {
+      ...props,
+      'data-slot': 'payment',
+    } as PaymentProps & Record<string, unknown>,
+  };
+}

package/dist/popover/index.ts

@@ -0,0 +1,7 @@
+export {
+  createPopover,
+  type PopoverProps,
+  type PopoverAPI,
+} from './popover.js'
+
+export { popoverContentVariants } from './popover.styles.js'

package/dist/popover/popover.styles.ts

@@ -0,0 +1,16 @@
+import { cva } from '../shared/index.ts'
+
+export const popoverContentVariants = cva({
+  base: 'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
+  variants: {
+    side: {
+      top: 'animate-slide-down-fade',
+      right: 'animate-slide-left-fade',
+      bottom: 'animate-slide-up-fade',
+      left: 'animate-slide-right-fade',
+    },
+  },
+  defaultVariants: {
+    side: 'bottom',
+  },
+})

package/dist/popover/popover.ts

@@ -0,0 +1,89 @@
+import type { AccessibilityProps, Side, KeyboardHandlerMap } from '../shared/index.ts'
+import { generateId, Keys, createKeyboardHandler } from '../shared/index.ts'
+
+export interface PopoverProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  placement?: Side
+}
+
+export interface PopoverAPI {
+  /** Current open state */
+  state: { open: boolean }
+  /** Props to spread on the trigger element */
+  triggerProps: Partial<AccessibilityProps> & {
+    'aria-expanded': boolean
+    'aria-controls': string
+    'aria-haspopup': 'dialog'
+  }
+  /** Props to spread on the content element */
+  contentProps: {
+    role: 'dialog'
+    id: string
+  }
+  /** Resolved placement */
+  placement: Side
+  /** Open the popover */
+  open: () => void
+  /** Close the popover */
+  close: () => void
+  /** Toggle the popover */
+  toggle: () => void
+  /** Keyboard handler map (Escape to close) */
+  keyboardHandlers: KeyboardHandlerMap
+  /** Pre-built keyboard event handler */
+  handleKeyDown: (event: KeyboardEvent) => void
+}
+
+export function createPopover(props: PopoverProps = {}): PopoverAPI {
+  const {
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    placement = 'bottom',
+  } = props
+
+  const contentId = generateId('rfr-popover')
+
+  let isOpen = controlledOpen ?? defaultOpen
+
+  const state = { open: isOpen }
+
+  function setOpen(value: boolean) {
+    isOpen = value
+    state.open = value
+    onOpenChange?.(value)
+  }
+
+  const triggerProps = {
+    'aria-expanded': isOpen,
+    'aria-controls': contentId,
+    'aria-haspopup': 'dialog' as const,
+  }
+
+  const contentProps = {
+    role: 'dialog' as const,
+    id: contentId,
+  }
+
+  const keyboardHandlers: KeyboardHandlerMap = {
+    [Keys.Escape]: () => {
+      setOpen(false)
+    },
+  }
+
+  const handleKeyDown = createKeyboardHandler(keyboardHandlers)
+
+  return {
+    state,
+    triggerProps,
+    contentProps,
+    placement,
+    open: () => setOpen(true),
+    close: () => setOpen(false),
+    toggle: () => setOpen(!isOpen),
+    keyboardHandlers,
+    handleKeyDown,
+  }
+}

package/dist/presence-indicator/index.ts

@@ -0,0 +1,14 @@
+export {
+  createPresence,
+  STATUS_COLORS,
+  STATUS_LABELS,
+  type PresenceProps,
+  type PresenceAPI,
+  type PresenceStatus,
+} from './presence-indicator.js'
+
+export {
+  presenceDotVariants,
+  presenceContainerStyles,
+  presenceLabelStyles,
+} from './presence-indicator.styles.js'

package/dist/presence-indicator/presence-indicator.styles.ts

@@ -0,0 +1,29 @@
+import { cva } from '../shared/index.ts'
+
+export const presenceDotVariants = cva({
+  base: 'inline-block rounded-full',
+  variants: {
+    status: {
+      online: 'bg-green-500',
+      offline: 'bg-gray-400',
+      away: 'bg-yellow-500',
+      busy: 'bg-red-500',
+      dnd: 'bg-red-500',
+    },
+    size: {
+      sm: 'h-2 w-2',
+      md: 'h-2.5 w-2.5',
+      lg: 'h-3 w-3',
+    },
+  },
+  defaultVariants: {
+    status: 'offline',
+    size: 'md',
+  },
+})
+
+export const presenceContainerStyles =
+  'inline-flex items-center gap-1.5'
+
+export const presenceLabelStyles =
+  'text-sm text-muted-foreground'

package/dist/presence-indicator/presence-indicator.ts

@@ -0,0 +1,63 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export type PresenceStatus = 'online' | 'offline' | 'away' | 'busy' | 'dnd'
+
+export interface PresenceProps {
+  /** The presence status to display */
+  status: PresenceStatus
+  /** Show a text label alongside the indicator */
+  showLabel?: boolean
+  /** Custom label override */
+  label?: string
+}
+
+export interface PresenceAPI {
+  /** ARIA attributes for the indicator */
+  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** CSS color for the status dot */
+  color: string
+  /** Human-readable label for the status */
+  label: string
+  /** Whether to show the label text */
+  showLabel: boolean
+  /** The current status */
+  status: PresenceStatus
+}
+
+const STATUS_COLORS: Record<PresenceStatus, string> = {
+  online: 'green',
+  offline: 'gray',
+  away: 'yellow',
+  busy: 'red',
+  dnd: 'red',
+}
+
+const STATUS_LABELS: Record<PresenceStatus, string> = {
+  online: 'Online',
+  offline: 'Offline',
+  away: 'Away',
+  busy: 'Busy',
+  dnd: 'Do Not Disturb',
+}
+
+export { STATUS_COLORS, STATUS_LABELS }
+
+export function createPresence(props: PresenceProps): PresenceAPI {
+  const { status, showLabel: showLabelProp = false, label: labelOverride } = props
+
+  const color = STATUS_COLORS[status]
+  const label = labelOverride ?? STATUS_LABELS[status]
+
+  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'status',
+    'aria-label': label,
+  }
+
+  return {
+    ariaProps,
+    color,
+    label,
+    showLabel: showLabelProp,
+    status,
+  }
+}

package/dist/progress-display/index.ts

@@ -0,0 +1,15 @@
+export {
+  createProgressDisplay,
+  type StatCardData,
+  type BadgeData,
+  type ProgressDisplayProps,
+  type ProgressDisplayAPI,
+} from './progress-display.js'
+
+export {
+  statsGridVariants,
+  statCardVariants,
+  badgeGridVariants,
+  badgeItemVariants,
+  progressBarVariants,
+} from './progress-display.styles.js'

package/dist/progress-display/progress-display.styles.ts

@@ -0,0 +1,72 @@
+import { cva } from '../shared/index.ts'
+
+export const statsGridVariants = cva({
+  base: 'grid gap-4',
+  variants: {
+    columns: {
+      '2': 'grid-cols-2',
+      '3': 'grid-cols-3',
+      '4': 'grid-cols-4',
+    },
+  },
+  defaultVariants: {
+    columns: '3',
+  },
+})
+
+export const statCardVariants = cva({
+  base: 'rounded-lg border p-4 text-center shadow-sm',
+  variants: {
+    color: {
+      default: 'bg-card text-card-foreground',
+      primary: 'bg-primary/10 text-primary border-primary/20',
+      success: 'bg-green-500/10 text-green-700 border-green-500/20',
+      warning: 'bg-yellow-500/10 text-yellow-700 border-yellow-500/20',
+      destructive: 'bg-destructive/10 text-destructive border-destructive/20',
+    },
+  },
+  defaultVariants: {
+    color: 'default',
+  },
+})
+
+export const badgeGridVariants = cva({
+  base: 'grid gap-4',
+  variants: {
+    columns: {
+      '3': 'grid-cols-3',
+      '4': 'grid-cols-4',
+      '5': 'grid-cols-5',
+    },
+  },
+  defaultVariants: {
+    columns: '4',
+  },
+})
+
+export const badgeItemVariants = cva({
+  base: 'flex flex-col items-center gap-2 rounded-lg border p-4 text-center transition-opacity',
+  variants: {
+    state: {
+      unlocked: 'opacity-100 bg-card',
+      locked: 'opacity-50 bg-muted grayscale',
+    },
+  },
+  defaultVariants: {
+    state: 'locked',
+  },
+})
+
+export const progressBarVariants = cva({
+  base: 'h-2 w-full overflow-hidden rounded-full bg-secondary',
+  variants: {
+    size: {
+      sm: 'h-1',
+      md: 'h-2',
+      lg: 'h-3',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})

package/dist/progress-display/progress-display.ts

@@ -0,0 +1,60 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export interface StatCardData {
+  label: string
+  value: number
+  icon?: string
+  color?: string
+}
+
+export interface BadgeData {
+  name: string
+  description: string
+  icon: string
+  unlockedAt?: string
+  isUnlocked: boolean
+}
+
+export interface ProgressDisplayProps {
+  stats: StatCardData[]
+  badges: BadgeData[]
+  level?: number
+  accuracy?: number
+}
+
+export interface ProgressDisplayAPI {
+  /** The computed stats array */
+  stats: StatCardData[]
+  /** The badges array */
+  badges: BadgeData[]
+  /** ARIA props for the stats region */
+  ariaProps: Partial<AccessibilityProps>
+  /** Get ARIA props for a specific badge */
+  getBadgeAriaProps: (badge: BadgeData) => Partial<AccessibilityProps>
+}
+
+export function createProgressDisplay(props: ProgressDisplayProps): ProgressDisplayAPI {
+  const { stats, badges } = props
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'region',
+    'aria-label': 'Progress statistics',
+  }
+
+  function getBadgeAriaProps(badge: BadgeData): Partial<AccessibilityProps> {
+    const label = badge.isUnlocked
+      ? `${badge.name}: ${badge.description}`
+      : `${badge.name}: ${badge.description} (locked)`
+
+    return {
+      'aria-label': label,
+    }
+  }
+
+  return {
+    stats,
+    badges,
+    ariaProps,
+    getBadgeAriaProps,
+  }
+}

package/dist/radio/index.ts

@@ -0,0 +1,8 @@
+export {
+  createRadioGroup,
+  type RadioOption,
+  type RadioGroupProps,
+  type RadioGroupAPI,
+} from './radio.js'
+
+export { radioGroupVariants, radioItemVariants, radioCircleVariants } from './radio.styles.js'

package/dist/radio/radio.styles.ts

@@ -0,0 +1,34 @@
+import { cva } from '../shared/index.ts'
+
+export const radioGroupVariants = cva({
+  base: 'flex gap-3',
+  variants: {
+    orientation: {
+      vertical: 'flex-col',
+      horizontal: 'flex-row',
+    },
+  },
+  defaultVariants: { orientation: 'vertical' },
+})
+
+export const radioItemVariants = cva({
+  base: 'flex items-center gap-2 cursor-pointer',
+  variants: {
+    disabled: {
+      true: 'opacity-50 cursor-not-allowed',
+      false: '',
+    },
+  },
+  defaultVariants: { disabled: 'false' },
+})
+
+export const radioCircleVariants = cva({
+  base: 'h-4 w-4 rounded-full border border-primary transition-colors',
+  variants: {
+    checked: {
+      true: 'border-primary bg-primary',
+      false: 'border-input',
+    },
+  },
+  defaultVariants: { checked: 'false' },
+})