@refraction-ui/astro 0.3.1 → 0.4.2

package/dist/astro-mobile-nav/MobileNavLink.astro

@@ -0,0 +1,16 @@
+---
+import { mobileNavLinkVariants } from '@refraction-ui/mobile-nav'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.AnchorHTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<a
+  role="menuitem"
+  class={cn(mobileNavLinkVariants(), className)}
+  {...props}
+>
+  <slot />
+</a>

package/dist/astro-mobile-nav/MobileNavTrigger.astro

@@ -0,0 +1,57 @@
+---
+import { mobileNavTriggerVariants } from '@refraction-ui/mobile-nav'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+const hasChildren = Astro.slots.has('default')
+---
+
+<button
+  type="button"
+  data-rfr-mobile-nav-trigger
+  aria-expanded="false"
+  aria-label="Toggle menu"
+  class={cn(mobileNavTriggerVariants(), className)}
+  {...props}
+>
+  {hasChildren ? (
+    <slot />
+  ) : (
+    <Fragment>
+      <svg
+        data-rfr-mobile-nav-icon-closed
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <line x1="4" y1="6" x2="20" y2="6" />
+        <line x1="4" y1="12" x2="20" y2="12" />
+        <line x1="4" y1="18" x2="20" y2="18" />
+      </svg>
+      <svg
+        data-rfr-mobile-nav-icon-open
+        hidden
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    </Fragment>
+  )}
+</button>

package/dist/astro-mobile-nav/index.ts

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

package/dist/astro-navbar/Navbar.astro

@@ -0,0 +1,49 @@
+---
+import {
+  createNavbar,
+  navbarVariants,
+  navLinkVariants,
+  type NavLink,
+  type NavbarVariant,
+} from '@refraction-ui/navbar'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  links?: NavLink[]
+  currentPath?: string
+  variant?: NavbarVariant
+}
+
+const { links = [], currentPath, variant, class: className, ...props } = Astro.props
+const api = createNavbar({ links, currentPath, variant })
+const classes = cn(navbarVariants({ variant }), className)
+---
+
+<header class={classes} {...props}>
+  <nav
+    class="mx-auto flex h-14 max-w-7xl items-center justify-between px-4"
+    {...api.ariaProps}
+  >
+    <div class="flex-shrink-0">
+      <slot name="logo" />
+    </div>
+    <ul class="hidden items-center gap-6 md:flex">
+      {links.map((link) => (
+        <li>
+          <a
+            href={link.href}
+            class={navLinkVariants({
+              active: api.isActive(link.href) ? 'true' : 'false',
+            })}
+            {...api.linkAriaProps(link.href)}
+          >
+            {link.label}
+          </a>
+        </li>
+      ))}
+    </ul>
+    <div class="flex items-center gap-2">
+      <slot name="actions" />
+    </div>
+  </nav>
+</header>

package/dist/astro-navbar/index.ts

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

package/dist/astro-otp-input/OtpInput.astro

@@ -0,0 +1,253 @@
+---
+import {
+  createOtpInput,
+  otpInputContainerVariants,
+  otpInputSlotVariants,
+  type OtpInputType,
+} from '@refraction-ui/otp-input'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Number of OTP slots */
+  length?: number
+  /** Initial OTP value */
+  value?: string
+  /** Auto-focus first slot */
+  autoFocus?: boolean
+  /** Input type: number or text */
+  type?: OtpInputType
+  /** Whether the input is disabled */
+  disabled?: boolean
+  /** Size variant */
+  size?: 'sm' | 'default' | 'lg'
+  /** Name attribute for the hidden form input */
+  name?: string
+}
+
+const {
+  length = 6,
+  value = '',
+  autoFocus = false,
+  type = 'number',
+  disabled = false,
+  size = 'default',
+  name,
+  class: className,
+  ...props
+} = Astro.props
+
+const api = createOtpInput({ length, value, autoFocus, type, disabled })
+const slots = Array.from({ length }, (_, i) => ({
+  index: i,
+  value: value.charAt(i) || '',
+  slotProps: api.getSlotProps(i),
+}))
+---
+
+<div
+  data-rfr-otp
+  data-rfr-otp-length={length}
+  data-rfr-otp-type={type}
+  data-rfr-otp-disabled={disabled ? 'true' : 'false'}
+  data-rfr-otp-size={size}
+  data-rfr-otp-autofocus={autoFocus ? 'true' : 'false'}
+  class={cn(otpInputContainerVariants({ size }), className)}
+  role="group"
+  aria-label="One-time password input"
+  {...props}
+>
+  {slots.map((slot) => (
+    <input
+      type="text"
+      class={cn(otpInputSlotVariants({
+        size,
+        focused: 'false',
+        filled: slot.value ? 'true' : 'false',
+      }))}
+      value={slot.value}
+      maxlength="1"
+      inputmode={type === 'number' ? 'numeric' : 'text'}
+      pattern={type === 'number' ? '[0-9]*' : undefined}
+      autocomplete={slot.index === 0 ? 'one-time-code' : 'off'}
+      disabled={disabled}
+      aria-label={`Digit ${slot.index + 1} of ${length}`}
+      data-rfr-otp-slot={slot.index}
+      data-slot="otp-slot"
+    />
+  ))}
+  <input
+    type="hidden"
+    data-rfr-otp-hidden
+    name={name}
+    value={value}
+  />
+</div>
+
+<script>
+  // Style class templates for dynamic updates
+  const SIZE_CLASSES: Record<string, { base: string; focused: string; filled: string }> = {
+    sm: {
+      base: 'relative flex items-center justify-center rounded-md border border-input bg-background text-center font-mono shadow-sm transition-all h-8 w-8 text-sm',
+      focused: 'ring-2 ring-ring ring-offset-background',
+      filled: 'border-primary',
+    },
+    default: {
+      base: 'relative flex items-center justify-center rounded-md border border-input bg-background text-center font-mono shadow-sm transition-all h-10 w-10 text-base',
+      focused: 'ring-2 ring-ring ring-offset-background',
+      filled: 'border-primary',
+    },
+    lg: {
+      base: 'relative flex items-center justify-center rounded-md border border-input bg-background text-center font-mono shadow-sm transition-all h-12 w-12 text-lg',
+      focused: 'ring-2 ring-ring ring-offset-background',
+      filled: 'border-primary',
+    },
+  }
+
+  function initOtpInputs() {
+    document.querySelectorAll<HTMLElement>('[data-rfr-otp]').forEach((root) => {
+      if (root.hasAttribute('data-rfr-otp-init')) return
+      root.setAttribute('data-rfr-otp-init', '')
+
+      const length = parseInt(root.getAttribute('data-rfr-otp-length') || '6', 10)
+      const type = root.getAttribute('data-rfr-otp-type') || 'number'
+      const isDisabled = root.getAttribute('data-rfr-otp-disabled') === 'true'
+      const size = root.getAttribute('data-rfr-otp-size') || 'default'
+      const sizeClasses = SIZE_CLASSES[size] || SIZE_CLASSES.default
+
+      const slots = root.querySelectorAll<HTMLInputElement>('[data-rfr-otp-slot]')
+      if (slots.length === 0) return
+
+      function updateSlotClasses(slot: HTMLInputElement, focused: boolean) {
+        const filled = slot.value !== ''
+        let cls = sizeClasses.base
+        if (focused) cls += ' ' + sizeClasses.focused
+        if (filled) cls += ' ' + sizeClasses.filled
+        slot.className = cls
+      }
+
+      const hiddenInput = root.querySelector<HTMLInputElement>('[data-rfr-otp-hidden]')
+
+      function dispatchChange() {
+        const values = Array.from(slots).map((s) => s.value)
+        const combined = values.join('')
+
+        // Sync hidden input for form submission
+        if (hiddenInput) {
+          hiddenInput.value = combined
+        }
+
+        root.dispatchEvent(new CustomEvent('rfr-otp-change', {
+          detail: { value: combined },
+          bubbles: true,
+        }))
+
+        // Check if complete
+        if (combined.length === length && !values.includes('')) {
+          root.dispatchEvent(new CustomEvent('rfr-otp-complete', {
+            detail: { value: combined },
+            bubbles: true,
+          }))
+        }
+      }
+
+      slots.forEach((slot, index) => {
+        // Input handler
+        slot.addEventListener('input', (e) => {
+          if (isDisabled) return
+          const inputValue = slot.value
+          let char = inputValue.slice(-1)
+
+          // Filter for number type
+          if (type === 'number') {
+            char = char.replace(/[^0-9]/g, '')
+          }
+
+          slot.value = char
+
+          updateSlotClasses(slot, true)
+          dispatchChange()
+
+          // Auto-advance to next input
+          if (char && index < length - 1) {
+            slots[index + 1].focus()
+          }
+        })
+
+        // Keydown handler
+        slot.addEventListener('keydown', (e) => {
+          if (isDisabled) return
+
+          if (e.key === 'Backspace') {
+            e.preventDefault()
+            if (slot.value) {
+              slot.value = ''
+              updateSlotClasses(slot, true)
+              dispatchChange()
+            } else if (index > 0) {
+              slots[index - 1].value = ''
+              updateSlotClasses(slots[index - 1], false)
+              slots[index - 1].focus()
+              dispatchChange()
+            }
+          }
+
+          if (e.key === 'ArrowLeft' && index > 0) {
+            e.preventDefault()
+            slots[index - 1].focus()
+          }
+
+          if (e.key === 'ArrowRight' && index < length - 1) {
+            e.preventDefault()
+            slots[index + 1].focus()
+          }
+        })
+
+        // Paste handler
+        slot.addEventListener('paste', (e) => {
+          if (isDisabled) return
+          e.preventDefault()
+          const pasteData = e.clipboardData?.getData('text') || ''
+          let chars = pasteData
+          if (type === 'number') {
+            chars = pasteData.replace(/[^0-9]/g, '')
+          }
+
+          for (let i = 0; i < length; i++) {
+            slots[i].value = chars.charAt(i) || ''
+            updateSlotClasses(slots[i], false)
+          }
+
+          dispatchChange()
+
+          // Focus the last filled or next empty
+          let lastFilled = -1
+          for (let i = length - 1; i >= 0; i--) {
+            if (slots[i].value !== '') { lastFilled = i; break }
+          }
+          const nextIndex = Math.min(lastFilled + 1, length - 1)
+          slots[nextIndex].focus()
+        })
+
+        // Focus/blur classes
+        slot.addEventListener('focus', () => {
+          updateSlotClasses(slot, true)
+          slot.setAttribute('data-focused', '')
+        })
+
+        slot.addEventListener('blur', () => {
+          updateSlotClasses(slot, false)
+          slot.removeAttribute('data-focused')
+        })
+      })
+
+      // Auto-focus first slot
+      const shouldAutoFocus = root.getAttribute('data-rfr-otp-autofocus') === 'true'
+      if (shouldAutoFocus && !isDisabled && slots.length > 0) {
+        slots[0].focus()
+      }
+    })
+  }
+
+  initOtpInputs()
+  document.addEventListener('astro:after-swap', initOtpInputs)
+</script>

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

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

package/dist/astro-pagination/Pagination.astro

@@ -0,0 +1,3 @@
+---
+---
+<div></div>

package/dist/astro-pagination/index.ts

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

package/dist/astro-payment/Payment.astro

@@ -0,0 +1,19 @@
+---
+import type { PaymentProps } from '@refraction-ui/payment';
+
+interface Props extends PaymentProps {
+  stripeKey: string;
+}
+
+const { clientSecret, stripeKey } = Astro.props;
+---
+
+<div class="refraction-payment" data-client-secret={clientSecret} data-stripe-key={stripeKey}>
+  <div id="payment-element-placeholder">Payment Element Placeholder (Astro)</div>
+  <button id="submit-payment">Pay</button>
+</div>
+
+<script>
+  // Basic initialization placeholder
+  console.log('Stripe initialized in Astro component.');
+</script>

package/dist/astro-payment/index.ts

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

package/dist/astro-popover/Popover.astro

@@ -0,0 +1,87 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Whether the popover starts open */
+  defaultOpen?: boolean
+}
+
+const { defaultOpen = false, class: className, ...props } = Astro.props
+---
+
+<div
+  data-rfr-popover
+  data-rfr-popover-default-open={defaultOpen}
+  data-state={defaultOpen ? 'open' : 'closed'}
+  class={cn('relative inline-block', className)}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  function initPopovers() {
+    document.querySelectorAll<HTMLElement>('[data-rfr-popover]').forEach((root) => {
+      if (root.hasAttribute('data-rfr-popover-init')) return
+      root.setAttribute('data-rfr-popover-init', '')
+
+      const defaultOpen = root.getAttribute('data-rfr-popover-default-open') === 'true'
+      let isOpen = defaultOpen
+
+      const trigger = root.querySelector<HTMLElement>('[data-rfr-popover-trigger]')
+      const content = root.querySelector<HTMLElement>('[data-rfr-popover-content]')
+      const closeBtns = root.querySelectorAll<HTMLElement>('[data-rfr-popover-close]')
+
+      function setState(open: boolean) {
+        isOpen = open
+        const state = open ? 'open' : 'closed'
+        root.setAttribute('data-state', state)
+        trigger?.setAttribute('aria-expanded', String(open))
+        content?.setAttribute('data-state', state)
+
+        if (open) {
+          content?.removeAttribute('hidden')
+          content?.focus()
+        } else {
+          content?.setAttribute('hidden', '')
+          trigger?.focus()
+        }
+
+        root.dispatchEvent(new CustomEvent('rfr-popover-change', { detail: { open }, bubbles: true }))
+      }
+
+      // Trigger click
+      trigger?.addEventListener('click', () => setState(!isOpen))
+
+      // Close button clicks
+      closeBtns.forEach((btn) => {
+        btn.addEventListener('click', () => setState(false))
+      })
+
+      // Escape key
+      root.addEventListener('keydown', (e) => {
+        if (!isOpen) return
+        if (e.key === 'Escape') {
+          e.preventDefault()
+          setState(false)
+        }
+      })
+
+      // Click outside to close
+      document.addEventListener('click', (e) => {
+        if (!isOpen) return
+        if (!root.contains(e.target as Node)) {
+          setState(false)
+        }
+      })
+
+      // Set initial state
+      if (!defaultOpen) {
+        content?.setAttribute('hidden', '')
+      }
+    })
+  }
+
+  initPopovers()
+  document.addEventListener('astro:after-swap', initPopovers)
+</script>

package/dist/astro-popover/PopoverClose.astro

@@ -0,0 +1,16 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<button
+  type="button"
+  data-rfr-popover-close
+  class={cn(className)}
+  {...props}
+>
+  <slot />
+</button>

package/dist/astro-popover/PopoverContent.astro

@@ -0,0 +1,23 @@
+---
+import { popoverContentVariants } from '@refraction-ui/popover'
+import { cn } from '../shared/index.ts'
+import type { Side } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  side?: Side
+}
+
+const { side = 'bottom', class: className, ...props } = Astro.props
+---
+
+<div
+  data-rfr-popover-content
+  data-state="closed"
+  role="dialog"
+  tabindex="-1"
+  hidden
+  class={cn(popoverContentVariants({ side }), className)}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-popover/PopoverTrigger.astro

@@ -0,0 +1,18 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<button
+  type="button"
+  data-rfr-popover-trigger
+  aria-haspopup="dialog"
+  aria-expanded="false"
+  class={cn(className)}
+  {...props}
+>
+  <slot />
+</button>

package/dist/astro-popover/index.ts

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

package/dist/astro-presence-indicator/PresenceIndicator.astro

@@ -0,0 +1,26 @@
+---
+import {
+  createPresence,
+  presenceDotVariants,
+  presenceContainerStyles,
+  presenceLabelStyles,
+  type PresenceStatus,
+} from '@refraction-ui/presence-indicator'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  status: PresenceStatus
+  showLabel?: boolean
+  label?: string
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const { status, showLabel = false, label, size = 'md', class: className, ...props } = Astro.props
+const api = createPresence({ status, showLabel, label })
+const classes = cn(presenceContainerStyles, className)
+---
+
+<span class={classes} {...api.ariaProps} {...props}>
+  <span class={presenceDotVariants({ status, size })}></span>
+  {api.showLabel && <span class={presenceLabelStyles}>{api.label}</span>}
+</span>

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

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

package/dist/astro-progress-display/BadgeDisplay.astro

@@ -0,0 +1,33 @@
+---
+import {
+  createProgressDisplay,
+  badgeGridVariants,
+  badgeItemVariants,
+  type BadgeData,
+} from '@refraction-ui/progress-display'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  badges: BadgeData[]
+}
+
+const { badges, class: className, ...props } = Astro.props
+const api = createProgressDisplay({ stats: [], badges })
+---
+
+<div class={cn(badgeGridVariants(), className)} {...props}>
+  {api.badges.map((badge) => (
+    <div
+      class={badgeItemVariants({
+        state: badge.isUnlocked ? 'unlocked' : 'locked',
+      })}
+      {...api.getBadgeAriaProps(badge)}
+    >
+      <span class="text-3xl">{badge.icon}</span>
+      <span class="font-medium">{badge.name}</span>
+      {!badge.isUnlocked && (
+        <span class="text-xs text-muted-foreground">Locked</span>
+      )}
+    </div>
+  ))}
+</div>

package/dist/astro-progress-display/ProgressBar.astro

@@ -0,0 +1,27 @@
+---
+import { progressBarVariants } from '@refraction-ui/progress-display'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  value: number
+  max?: number
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const { value, max = 100, size, class: className, ...props } = Astro.props
+const percent = Math.min(100, Math.max(0, (value / max) * 100))
+---
+
+<div
+  class={cn(progressBarVariants({ size }), className)}
+  role="progressbar"
+  aria-valuenow={value}
+  aria-valuemin={0}
+  aria-valuemax={max}
+  {...props}
+>
+  <div
+    class="h-full rounded-full bg-primary transition-all"
+    style={`width: ${percent}%`}
+  />
+</div>