@refraction-ui/astro 0.4.0 → 0.4.2

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

@@ -0,0 +1,32 @@
+---
+import {
+  createProgressDisplay,
+  statsGridVariants,
+  statCardVariants,
+  type StatCardData,
+  type BadgeData,
+} from '@refraction-ui/progress-display'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  stats: StatCardData[]
+  badges?: BadgeData[]
+}
+
+const { stats, badges = [], class: className, ...props } = Astro.props
+const api = createProgressDisplay({ stats, badges })
+---
+
+<div class={cn(statsGridVariants(), className)} {...api.ariaProps} {...props}>
+  {api.stats.map((stat) => (
+    <div
+      class={statCardVariants({
+        color: (stat.color as 'default' | 'primary' | 'success' | 'warning' | 'destructive') ?? 'default',
+      })}
+    >
+      {stat.icon && <span class="text-2xl">{stat.icon}</span>}
+      <div class="text-2xl font-bold">{stat.value}</div>
+      <div class="text-sm text-muted-foreground">{stat.label}</div>
+    </div>
+  ))}
+</div>

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

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

package/dist/astro-radio/RadioGroup.astro

@@ -0,0 +1,111 @@
+---
+import { radioGroupVariants } from '@refraction-ui/radio'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  value?: string
+  name?: string
+  disabled?: boolean
+  orientation?: 'horizontal' | 'vertical'
+}
+
+const { value, name, disabled = false, orientation = 'vertical', class: className, ...props } = Astro.props
+---
+
+<div
+  role="radiogroup"
+  aria-orientation={orientation}
+  aria-disabled={disabled || undefined}
+  class={cn(radioGroupVariants({ orientation }), className)}
+  data-rfr-radio-group
+  data-rfr-radio-value={value || ''}
+  data-rfr-radio-name={name || ''}
+  data-rfr-radio-disabled={disabled ? '' : undefined}
+  {...props}
+>
+  <slot />
+  {name && <input type="hidden" name={name} value={value || ''} data-rfr-radio-input />}
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-rfr-radio-group]').forEach((group) => {
+    const items = () => group.querySelectorAll<HTMLButtonElement>('[data-rfr-radio-item]')
+
+    function selectItem(item: HTMLButtonElement) {
+      const groupDisabled = group.hasAttribute('data-rfr-radio-disabled')
+      if (groupDisabled || item.disabled) return
+
+      const value = item.getAttribute('data-rfr-radio-item-value') || ''
+
+      // Update all items in this group
+      items().forEach((btn) => {
+        const btnValue = btn.getAttribute('data-rfr-radio-item-value') || ''
+        const isSelected = btnValue === value
+        btn.setAttribute('aria-checked', String(isSelected))
+        btn.setAttribute('tabindex', isSelected ? '0' : '-1')
+
+        const label = btn.closest('[data-rfr-radio-item-label]') as HTMLElement | null
+        if (label) {
+          label.setAttribute('data-state', isSelected ? 'checked' : 'unchecked')
+        }
+
+        // Update circle styling
+        const circle = btn as HTMLElement
+        if (isSelected) {
+          circle.classList.add('border-primary', 'bg-primary')
+          circle.classList.remove('border-input')
+          // Ensure inner dot exists
+          if (!circle.querySelector('[data-rfr-radio-dot]')) {
+            const dot = document.createElement('span')
+            dot.className = 'block h-2 w-2 rounded-full bg-primary-foreground mx-auto'
+            dot.setAttribute('data-rfr-radio-dot', '')
+            circle.appendChild(dot)
+          }
+        } else {
+          circle.classList.remove('border-primary', 'bg-primary')
+          circle.classList.add('border-input')
+          const dot = circle.querySelector('[data-rfr-radio-dot]')
+          if (dot) dot.remove()
+        }
+      })
+
+      // Update group data attribute
+      group.setAttribute('data-rfr-radio-value', value)
+
+      // Update hidden input
+      const input = group.querySelector('[data-rfr-radio-input]') as HTMLInputElement | null
+      if (input) input.value = value
+
+      group.dispatchEvent(new CustomEvent('change', { detail: { value } }))
+    }
+
+    group.addEventListener('click', (e) => {
+      const item = (e.target as HTMLElement).closest<HTMLButtonElement>('[data-rfr-radio-item]')
+      if (item) selectItem(item)
+    })
+
+    group.addEventListener('keydown', (e) => {
+      const target = e.target as HTMLElement
+      if (!target.hasAttribute('data-rfr-radio-item')) return
+
+      const allItems = Array.from(items()).filter((i) => !i.disabled)
+      const currentIndex = allItems.indexOf(target as HTMLButtonElement)
+      if (currentIndex === -1) return
+
+      let nextIndex = -1
+      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+        e.preventDefault()
+        nextIndex = (currentIndex + 1) % allItems.length
+      } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+        e.preventDefault()
+        nextIndex = (currentIndex - 1 + allItems.length) % allItems.length
+      }
+
+      if (nextIndex >= 0) {
+        const nextItem = allItems[nextIndex]
+        nextItem.focus()
+        selectItem(nextItem)
+      }
+    })
+  })
+</script>

package/dist/astro-radio/RadioItem.astro

@@ -0,0 +1,36 @@
+---
+import { radioItemVariants, radioCircleVariants } from '@refraction-ui/radio'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  value: string
+  disabled?: boolean
+  checked?: boolean
+}
+
+const { value, disabled = false, checked = false, class: className, ...props } = Astro.props
+---
+
+<label
+  class={cn(radioItemVariants({ disabled: disabled ? 'true' : 'false' }), className)}
+  data-state={checked ? 'checked' : 'unchecked'}
+  data-rfr-radio-item-label
+  {...props}
+>
+  <button
+    type="button"
+    role="radio"
+    aria-checked={checked}
+    aria-disabled={disabled || undefined}
+    tabindex={checked ? 0 : -1}
+    disabled={disabled || undefined}
+    class={cn(radioCircleVariants({ checked: checked ? 'true' : 'false' }))}
+    data-rfr-radio-item
+    data-rfr-radio-item-value={value}
+  >
+    {checked && (
+      <span class="block h-2 w-2 rounded-full bg-primary-foreground mx-auto" data-rfr-radio-dot />
+    )}
+  </button>
+  <span class="text-sm"><slot /></span>
+</label>

package/dist/astro-radio/index.ts

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

package/dist/astro-reaction-bar/ReactionBar.astro

@@ -0,0 +1,117 @@
+---
+import {
+  createReactionBar,
+  reactionBarStyles,
+  reactionPillVariants,
+  reactionAddButtonStyles,
+  reactionEmojiStyles,
+  reactionCountStyles,
+  type Reaction,
+} from '@refraction-ui/reaction-bar'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Array of reactions to display */
+  reactions: Reaction[]
+  /** Whether to show the add reaction button. Default: true */
+  showAddButton?: boolean
+}
+
+const {
+  reactions,
+  showAddButton = true,
+  class: className,
+  ...props
+} = Astro.props
+
+const api = createReactionBar({ reactions })
+---
+
+<div
+  data-rfr-reaction-bar
+  data-rfr-rb-reactions={JSON.stringify(reactions)}
+  class={cn(reactionBarStyles, className)}
+  role="group"
+  aria-label="Reactions"
+  {...props}
+>
+  {api.reactions.map((reaction) => (
+    <button
+      type="button"
+      data-rfr-rb-emoji={reaction.emoji}
+      class={reactionPillVariants({ state: reaction.userReacted ? 'active' : 'inactive' })}
+      role="button"
+      aria-pressed={reaction.userReacted ? 'true' : 'false'}
+      aria-label={`${reaction.emoji} ${reaction.count} reaction${reaction.count === 1 ? '' : 's'}${reaction.userReacted ? ', you reacted' : ''}`}
+    >
+      <span class={reactionEmojiStyles}>{reaction.emoji}</span>
+      <span class={reactionCountStyles} data-rfr-rb-count>{reaction.count}</span>
+    </button>
+  ))}
+  {showAddButton && (
+    <button
+      type="button"
+      data-rfr-rb-add
+      class={reactionAddButtonStyles}
+      role="button"
+      aria-label="Add reaction"
+    >
+      +
+    </button>
+  )}
+</div>
+
+<script>
+  function initReactionBars() {
+    document.querySelectorAll<HTMLElement>('[data-rfr-reaction-bar]').forEach((el) => {
+      if (el.hasAttribute('data-rfr-rb-init')) return
+      el.setAttribute('data-rfr-rb-init', '')
+
+      // Handle emoji button clicks (toggle reaction)
+      el.querySelectorAll<HTMLElement>('[data-rfr-rb-emoji]').forEach((btn) => {
+        btn.addEventListener('click', () => {
+          const emoji = btn.getAttribute('data-rfr-rb-emoji')
+          if (!emoji) return
+
+          const isPressed = btn.getAttribute('aria-pressed') === 'true'
+          const countEl = btn.querySelector<HTMLElement>('[data-rfr-rb-count]')
+          const currentCount = countEl ? Number(countEl.textContent || 0) : 0
+
+          // Toggle state
+          const newPressed = !isPressed
+          const newCount = newPressed ? currentCount + 1 : Math.max(0, currentCount - 1)
+
+          btn.setAttribute('aria-pressed', String(newPressed))
+          if (countEl) countEl.textContent = String(newCount)
+
+          // Update styling
+          const activeClass = 'border-primary bg-primary/10 text-primary'
+          const inactiveClass = 'border-border bg-background text-foreground'
+          const baseClass = 'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs cursor-pointer transition-colors hover:bg-accent'
+
+          btn.className = `${baseClass} ${newPressed ? activeClass : inactiveClass}`
+
+          // Update aria-label
+          btn.setAttribute('aria-label', `${emoji} ${newCount} reaction${newCount === 1 ? '' : 's'}${newPressed ? ', you reacted' : ''}`)
+
+          el.dispatchEvent(new CustomEvent('rfr-reaction-toggle', {
+            detail: { emoji, userReacted: newPressed, count: newCount },
+            bubbles: true,
+          }))
+        })
+      })
+
+      // Handle add button click
+      const addBtn = el.querySelector<HTMLElement>('[data-rfr-rb-add]')
+      addBtn?.addEventListener('click', () => {
+        el.dispatchEvent(new CustomEvent('rfr-reaction-add', {
+          detail: { emoji: '\u{1F44D}' },
+          bubbles: true,
+        }))
+      })
+    })
+  }
+
+  initReactionBars()
+  document.addEventListener('astro:after-swap', initReactionBars)
+</script>

package/dist/astro-reaction-bar/index.ts

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

package/dist/astro-resizable-layout/ResizableDivider.astro

@@ -0,0 +1,27 @@
+---
+/**
+ * ResizableDivider — draggable handle between two panes.
+ * Pointer events are handled by the parent ResizableLayout script.
+ */
+import { resizableDividerVariants } from '@refraction-ui/resizable-layout'
+import { cn } from '../shared/index.ts'
+import type { Orientation } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Index of the divider (between pane[index] and pane[index+1]) */
+  index: number
+  /** Orientation inherited from parent (default 'horizontal') */
+  orientation?: Orientation
+}
+
+const { index, orientation = 'horizontal', class: className, ...props } = Astro.props
+---
+
+<div
+  role="separator"
+  aria-orientation={orientation}
+  tabindex="0"
+  class={cn(resizableDividerVariants({ orientation }), className)}
+  data-rfr-divider-index={index}
+  {...props}
+/>

package/dist/astro-resizable-layout/ResizableLayout.astro

@@ -0,0 +1,162 @@
+---
+/**
+ * ResizableLayout — flex container with resizable panes separated by draggable dividers.
+ * Includes a client-side script for pointer-based drag resize.
+ */
+import {
+  resizableLayoutVariants,
+} from '@refraction-ui/resizable-layout'
+import { cn } from '../shared/index.ts'
+import type { Orientation } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Layout direction (default 'horizontal') */
+  orientation?: Orientation
+  /** Initial pane sizes as percentages (must sum to 100) */
+  defaultSizes?: number[]
+  /** Minimum size for each pane (percentage) */
+  minSizes?: number[]
+  /** Maximum size for each pane (percentage) */
+  maxSizes?: number[]
+  /** localStorage key for persisting sizes */
+  persistKey?: string
+}
+
+const {
+  orientation = 'horizontal',
+  defaultSizes = [50, 50],
+  minSizes = [],
+  maxSizes = [],
+  persistKey,
+  class: className,
+  style,
+  ...props
+} = Astro.props
+
+// Build initial CSS variables for pane sizes
+const cssVars = defaultSizes.map((s, i) => `--rfr-pane-${i}-size:${s}%`).join(';')
+const fullStyle = [cssVars, typeof style === 'string' ? style : ''].filter(Boolean).join(';')
+
+const configJSON = JSON.stringify({ orientation, defaultSizes, minSizes, maxSizes, persistKey })
+---
+
+<div
+  class={cn(resizableLayoutVariants({ orientation }), className)}
+  style={fullStyle}
+  data-rfr-resizable-layout
+  data-rfr-resizable-config={configJSON}
+  data-orientation={orientation}
+  {...props}
+>
+  <slot />
+</div>
+
+<script is:inline>
+  ;(function () {
+    document.querySelectorAll('[data-rfr-resizable-layout]').forEach(function (layout) {
+      var config = {}
+      try { config = JSON.parse(layout.getAttribute('data-rfr-resizable-config') || '{}') } catch (_) { /* */ }
+
+      var orientation = config.orientation || 'horizontal'
+      var sizes = null
+      var persistKey = config.persistKey
+      var minSizes = config.minSizes || []
+      var maxSizes = config.maxSizes || []
+
+      // Try loading from localStorage
+      if (persistKey) {
+        try {
+          var stored = localStorage.getItem(persistKey)
+          if (stored) {
+            var parsed = JSON.parse(stored)
+            if (Array.isArray(parsed) && parsed.length === (config.defaultSizes || []).length) {
+              sizes = parsed
+            }
+          }
+        } catch (_) { /* */ }
+      }
+      if (!sizes) {
+        sizes = (config.defaultSizes || [50, 50]).slice()
+      }
+
+      // Apply initial sizes
+      function applySizes() {
+        for (var i = 0; i < sizes.length; i++) {
+          layout.style.setProperty('--rfr-pane-' + i + '-size', sizes[i] + '%')
+        }
+        // Update pane flex-basis
+        var panes = layout.querySelectorAll('[data-rfr-pane-index]')
+        panes.forEach(function (pane) {
+          var idx = parseInt(pane.getAttribute('data-rfr-pane-index'), 10)
+          if (!isNaN(idx) && sizes[idx] !== undefined) {
+            pane.style.flexBasis = sizes[idx] + '%'
+          }
+        })
+      }
+
+      applySizes()
+
+      function clamp(val, min, max) {
+        return Math.min(Math.max(val, min), max)
+      }
+
+      function getMin(i) { return minSizes[i] || 0 }
+      function getMax(i) { return maxSizes[i] || 100 }
+
+      // Handle divider drag
+      var resizingIndex = null
+      var startPos = 0
+      var containerSize = 0
+      var sizesBeforeResize = []
+
+      layout.addEventListener('pointerdown', function (e) {
+        var divider = e.target.closest('[data-rfr-divider-index]')
+        if (!divider) return
+
+        e.preventDefault()
+        divider.setPointerCapture(e.pointerId)
+
+        resizingIndex = parseInt(divider.getAttribute('data-rfr-divider-index'), 10)
+        sizesBeforeResize = sizes.slice()
+
+        var rect = layout.getBoundingClientRect()
+        containerSize = orientation === 'horizontal' ? rect.width : rect.height
+        startPos = orientation === 'horizontal' ? e.clientX : e.clientY
+      })
+
+      layout.addEventListener('pointermove', function (e) {
+        if (resizingIndex === null) return
+
+        var currentPos = orientation === 'horizontal' ? e.clientX : e.clientY
+        var pxDelta = currentPos - startPos
+        var pctDelta = (pxDelta / containerSize) * 100
+
+        var i = resizingIndex
+        var j = i + 1
+        if (j >= sizes.length) return
+
+        var total = sizesBeforeResize[i] + sizesBeforeResize[j]
+        var newI = clamp(sizesBeforeResize[i] + pctDelta, getMin(i), getMax(i))
+        var newJ = clamp(total - newI, getMin(j), getMax(j))
+        newI = total - newJ
+
+        sizes[i] = newI
+        sizes[j] = newJ
+        applySizes()
+      })
+
+      layout.addEventListener('pointerup', function (e) {
+        var divider = e.target.closest('[data-rfr-divider-index]')
+        if (divider && resizingIndex !== null) {
+          divider.releasePointerCapture(e.pointerId)
+        }
+        resizingIndex = null
+        sizesBeforeResize = []
+
+        if (persistKey) {
+          try { localStorage.setItem(persistKey, JSON.stringify(sizes)) } catch (_) { /* */ }
+        }
+      })
+    })
+  })()
+</script>

package/dist/astro-resizable-layout/ResizablePane.astro

@@ -0,0 +1,28 @@
+---
+/**
+ * ResizablePane — a single pane whose size is driven by CSS custom properties.
+ */
+import { resizablePaneVariants } from '@refraction-ui/resizable-layout'
+import { cn } from '../shared/index.ts'
+import type { Orientation } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Zero-based index of this pane */
+  index: number
+  /** Orientation inherited from parent (default 'horizontal') */
+  orientation?: Orientation
+}
+
+const { index, orientation = 'horizontal', class: className, style, ...props } = Astro.props
+
+const paneStyle = `flex-basis:var(--rfr-pane-${index}-size, 50%);flex-grow:0;flex-shrink:0;${typeof style === 'string' ? style : ''}`
+---
+
+<div
+  class={cn(resizablePaneVariants({ orientation }), className)}
+  style={paneStyle}
+  data-rfr-pane-index={index}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-resizable-layout/index.ts

@@ -0,0 +1,11 @@
+export { default as ResizableLayout } from './ResizableLayout.astro'
+export { default as ResizablePane } from './ResizablePane.astro'
+export { default as ResizableDivider } from './ResizableDivider.astro'
+
+// Re-export core types and utilities
+export {
+  createResizableLayout,
+  resizableLayoutVariants,
+  resizableDividerVariants,
+  resizablePaneVariants,
+} from '@refraction-ui/resizable-layout'