@refraction-ui/astro 0.4.0 → 0.4.2

package/dist/astro-select/SelectTrigger.astro

@@ -0,0 +1,36 @@
+---
+import { selectTriggerVariants } from '@refraction-ui/select'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  size?: 'sm' | 'default' | 'lg'
+  placeholder?: string
+}
+
+const { size = 'default', placeholder = 'Select an option', class: className, ...props } = Astro.props
+---
+
+<button
+  type="button"
+  role="combobox"
+  aria-expanded="false"
+  data-state="closed"
+  data-rfr-select-trigger
+  class={cn(selectTriggerVariants({ size }), className)}
+  {...props}
+>
+  <span data-rfr-select-value-text><slot>{placeholder}</slot></span>
+  <svg
+    class="h-4 w-4 opacity-50 shrink-0"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+</button>

package/dist/astro-select/index.ts

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

package/dist/astro-sidebar/Sidebar.astro

@@ -0,0 +1,64 @@
+---
+import {
+  createSidebar,
+  sidebarVariants,
+  sidebarItemVariants,
+  type SidebarSection,
+} from '@refraction-ui/sidebar'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  sections?: SidebarSection[]
+  currentPath?: string
+  collapsed?: boolean
+  userRoles?: string[]
+}
+
+const {
+  sections = [],
+  currentPath,
+  collapsed = false,
+  userRoles,
+  class: className,
+  ...props
+} = Astro.props
+
+const api = createSidebar({ sections, currentPath, collapsed, userRoles })
+const classes = cn(
+  sidebarVariants({ collapsed: collapsed ? 'true' : 'false' }),
+  className,
+)
+---
+
+<aside class={classes} {...api.ariaProps} {...props}>
+  <div class="flex flex-col gap-4 p-4">
+    {api.visibleSections.map((section, sIdx) => (
+      <div>
+        {section.title && !collapsed && (
+          <h3 class="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            {section.title}
+          </h3>
+        )}
+        <ul class="space-y-1">
+          {section.items.map((item) => {
+            const active = api.isActive(item.href)
+            return (
+              <li>
+                <a
+                  href={item.href}
+                  class={sidebarItemVariants({
+                    active: active ? 'true' : 'false',
+                  })}
+                  {...api.itemAriaProps(item.href)}
+                >
+                  {item.icon && <span aria-hidden="true">{item.icon}</span>}
+                  {!collapsed && <span>{item.label}</span>}
+                </a>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    ))}
+  </div>
+</aside>

package/dist/astro-sidebar/index.ts

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

package/dist/astro-skeleton/Skeleton.astro

@@ -0,0 +1,39 @@
+---
+import {
+  createSkeleton,
+  skeletonVariants,
+  type SkeletonShape,
+} from '@refraction-ui/skeleton'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  shape?: SkeletonShape
+  width?: string | number
+  height?: string | number
+  /** Whether to animate the skeleton pulse. Defaults to true */
+  animate?: boolean
+}
+
+const { shape, width, height, animate, class: className, style, ...props } = Astro.props
+const api = createSkeleton({ shape, animate })
+const classes = cn(skeletonVariants({ shape }), className)
+
+const styleObj: Record<string, string | number> = {}
+if (width !== undefined) styleObj.width = width
+if (height !== undefined) styleObj.height = height
+
+// Merge any existing inline styles
+const existingStyle = typeof style === 'string' ? style : ''
+const extraStyle = Object.entries(styleObj)
+  .map(([k, v]) => `${k}: ${typeof v === 'number' ? `${v}px` : v}`)
+  .join('; ')
+const mergedStyle = [existingStyle, extraStyle].filter(Boolean).join('; ') || undefined
+---
+
+<div
+  class={classes}
+  style={mergedStyle}
+  {...api.ariaProps}
+  {...api.dataAttributes}
+  {...props}
+/>

package/dist/astro-skeleton/SkeletonText.astro

@@ -0,0 +1,22 @@
+---
+import Skeleton from './Skeleton.astro'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Number of text lines to render. Defaults to 3 */
+  lines?: number
+  /** Whether to animate the skeleton pulse. Defaults to true */
+  animate?: boolean
+}
+
+const { lines = 3, animate, class: className, ...props } = Astro.props
+
+/** Width percentages for each line to create a natural-looking text block */
+const lineWidths = ['100%', '92%', '85%', '96%', '78%', '88%', '94%', '82%']
+---
+
+<div class={cn('space-y-2', className)} {...props}>
+  {Array.from({ length: lines }, (_, i) => (
+    <Skeleton shape="text" width={lineWidths[i % lineWidths.length]} animate={animate} />
+  ))}
+</div>

package/dist/astro-skeleton/index.ts

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

package/dist/astro-skip-to-content/SkipToContent.astro

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

package/dist/astro-skip-to-content/index.ts

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

package/dist/astro-slide-viewer/SlideViewer.astro

@@ -0,0 +1,231 @@
+---
+import {
+  createSlideViewer,
+  slideViewerVariants,
+  progressBarVariants,
+  slideTypeBadgeVariants,
+  type SlideData,
+} from '@refraction-ui/slide-viewer'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  slides: SlideData[]
+  initialSlide?: number
+  size?: 'compact' | 'default' | 'full'
+}
+
+const {
+  slides,
+  initialSlide = 0,
+  size,
+  class: className,
+  ...props
+} = Astro.props
+
+const api = createSlideViewer({ slides, initialSlide })
+const currentSlide = slides[api.state.currentSlide]
+const slideAriaProps = api.getSlideAriaProps()
+const isBookmarked = api.state.bookmarks.has(api.state.currentSlide)
+const isLastSlide = api.state.currentSlide === api.state.totalSlides - 1
+---
+
+<div
+  class={cn(slideViewerVariants({ size }), className)}
+  tabindex="0"
+  data-rfr-slide-viewer
+  data-rfr-slide-current={api.state.currentSlide}
+  data-rfr-slide-total={api.state.totalSlides}
+  data-rfr-slides={JSON.stringify(slides)}
+  {...props}
+>
+  <!-- Progress bar -->
+  <div class={progressBarVariants({ position: 'top' })}>
+    <div
+      class="h-full bg-primary transition-all duration-300"
+      style={`width: ${api.progress * 100}%`}
+      data-rfr-slide-progress
+    />
+  </div>
+
+  <!-- Header with type badge and bookmark -->
+  <div class="flex items-center justify-between px-4 py-2 border-b">
+    <div class="flex items-center gap-2">
+      {currentSlide && (
+        <span
+          class={slideTypeBadgeVariants({ type: currentSlide.type })}
+          data-rfr-slide-type-badge
+        >
+          {currentSlide.type}
+        </span>
+      )}
+      <span class="text-sm text-muted-foreground" data-rfr-slide-counter>
+        {api.state.currentSlide + 1} / {api.state.totalSlides}
+      </span>
+    </div>
+    <button
+      type="button"
+      class={cn(
+        'px-2 py-1 rounded text-xs transition-colors',
+        isBookmarked
+          ? 'bg-yellow-100 text-yellow-800'
+          : 'hover:bg-muted text-muted-foreground',
+      )}
+      aria-pressed={isBookmarked}
+      aria-label="Toggle bookmark"
+      data-rfr-slide-bookmark
+    >
+      {isBookmarked ? 'Bookmarked' : 'Bookmark'}
+    </button>
+  </div>
+
+  <!-- Slide content -->
+  <div
+    class="flex-1 overflow-auto p-6"
+    role={slideAriaProps.role}
+    aria-roledescription={slideAriaProps['aria-roledescription']}
+    aria-label={slideAriaProps['aria-label'] as string}
+    aria-live={slideAriaProps['aria-live'] as any}
+    data-rfr-slide-content
+  >
+    {currentSlide && <Fragment set:html={currentSlide.content} />}
+    <slot />
+  </div>
+
+  <!-- Navigation buttons -->
+  <div class="flex items-center justify-between px-4 py-3 border-t">
+    <button
+      type="button"
+      disabled={api.state.currentSlide === 0}
+      class="px-4 py-2 rounded text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors"
+      aria-label="Previous slide"
+      data-rfr-slide-prev
+    >
+      Previous
+    </button>
+    <button
+      type="button"
+      class="px-4 py-2 rounded text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+      aria-label={isLastSlide ? 'Complete' : 'Next slide'}
+      data-rfr-slide-next
+    >
+      {isLastSlide ? 'Complete' : 'Next'}
+    </button>
+  </div>
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-rfr-slide-viewer]').forEach((root) => {
+    const slides: Array<{ id: string; type: string; content: string }> = JSON.parse(
+      root.getAttribute('data-rfr-slides') || '[]',
+    )
+    const totalSlides = slides.length
+    let currentSlide = parseInt(root.getAttribute('data-rfr-slide-current') || '0', 10)
+    const bookmarks = new Set<number>()
+
+    const progressBar = root.querySelector<HTMLElement>('[data-rfr-slide-progress]')
+    const counter = root.querySelector<HTMLElement>('[data-rfr-slide-counter]')
+    const typeBadge = root.querySelector<HTMLElement>('[data-rfr-slide-type-badge]')
+    const contentArea = root.querySelector<HTMLElement>('[data-rfr-slide-content]')
+    const bookmarkBtn = root.querySelector<HTMLButtonElement>('[data-rfr-slide-bookmark]')
+    const prevBtn = root.querySelector<HTMLButtonElement>('[data-rfr-slide-prev]')
+    const nextBtn = root.querySelector<HTMLButtonElement>('[data-rfr-slide-next]')
+
+    function getProgress() {
+      if (totalSlides <= 1) return 1
+      return currentSlide / (totalSlides - 1)
+    }
+
+    function updateUI() {
+      const slide = slides[currentSlide]
+      const progress = getProgress()
+      const isLast = currentSlide === totalSlides - 1
+      const isFirst = currentSlide === 0
+      const isMarked = bookmarks.has(currentSlide)
+
+      if (progressBar) {
+        progressBar.style.width = `${progress * 100}%`
+      }
+
+      if (counter) {
+        counter.textContent = `${currentSlide + 1} / ${totalSlides}`
+      }
+
+      if (typeBadge && slide) {
+        typeBadge.textContent = slide.type
+      }
+
+      if (contentArea && slide) {
+        contentArea.setAttribute(
+          'aria-label',
+          `Slide ${currentSlide + 1} of ${totalSlides}: ${slide.type} slide`,
+        )
+        // Only update innerHTML for data-driven content (preserve slot content)
+        const slotContent = contentArea.querySelector('[data-astro-slot]')
+        if (!slotContent) {
+          contentArea.innerHTML = slide.content
+        }
+      }
+
+      if (bookmarkBtn) {
+        bookmarkBtn.textContent = isMarked ? 'Bookmarked' : 'Bookmark'
+        bookmarkBtn.setAttribute('aria-pressed', String(isMarked))
+        if (isMarked) {
+          bookmarkBtn.className = 'px-2 py-1 rounded text-xs transition-colors bg-yellow-100 text-yellow-800'
+        } else {
+          bookmarkBtn.className = 'px-2 py-1 rounded text-xs transition-colors hover:bg-muted text-muted-foreground'
+        }
+      }
+
+      if (prevBtn) {
+        prevBtn.disabled = isFirst
+      }
+
+      if (nextBtn) {
+        nextBtn.textContent = isLast ? 'Complete' : 'Next'
+        nextBtn.setAttribute('aria-label', isLast ? 'Complete' : 'Next slide')
+      }
+
+      root.setAttribute('data-rfr-slide-current', String(currentSlide))
+      root.dispatchEvent(new CustomEvent('slidechange', { detail: { index: currentSlide } }))
+    }
+
+    function goNext() {
+      if (currentSlide < totalSlides - 1) {
+        currentSlide++
+        updateUI()
+      } else {
+        root.dispatchEvent(new CustomEvent('complete'))
+      }
+    }
+
+    function goPrev() {
+      if (currentSlide > 0) {
+        currentSlide--
+        updateUI()
+      }
+    }
+
+    function toggleBookmark() {
+      if (bookmarks.has(currentSlide)) {
+        bookmarks.delete(currentSlide)
+      } else {
+        bookmarks.add(currentSlide)
+      }
+      updateUI()
+    }
+
+    if (prevBtn) prevBtn.addEventListener('click', goPrev)
+    if (nextBtn) nextBtn.addEventListener('click', goNext)
+    if (bookmarkBtn) bookmarkBtn.addEventListener('click', toggleBookmark)
+
+    root.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowRight') {
+        e.preventDefault()
+        goNext()
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault()
+        goPrev()
+      }
+    })
+  })
+</script>

package/dist/astro-slide-viewer/index.ts

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

package/dist/astro-slider/index.ts

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

package/dist/astro-status-indicator/StatusIndicator.astro

@@ -0,0 +1,31 @@
+---
+import {
+  createStatusIndicator,
+  statusContainerStyles,
+  statusDotVariants,
+  statusPulseVariants,
+  statusLabelStyles,
+  type StatusType,
+} from '@refraction-ui/status-indicator'
+import { cn } from '../shared/index.ts'
+
+interface Props {
+  type: StatusType
+  label?: string
+  pulse?: boolean
+  showLabel?: boolean
+  class?: string
+}
+
+const { type, label, pulse, showLabel = true, class: className } = Astro.props
+const api = createStatusIndicator({ type, label, pulse })
+
+const dotClassName = api.pulse
+  ? statusPulseVariants({ type })
+  : statusDotVariants({ type })
+---
+
+<span {...api.ariaProps} class={cn(statusContainerStyles, className)}>
+  <span class={dotClassName} />
+  {showLabel && <span class={statusLabelStyles}>{api.label}</span>}
+</span>

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

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

package/dist/astro-steps/Steps.astro

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

package/dist/astro-steps/index.ts

@@ -0,0 +1 @@
+export { default as Steps } from './Steps.astro';

package/dist/astro-switch/Switch.astro

@@ -0,0 +1,89 @@
+---
+import {
+  createSwitch,
+  switchVariants,
+  switchThumbVariants,
+} from '@refraction-ui/switch'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  checked?: boolean
+  disabled?: boolean
+  size?: 'sm' | 'default' | 'lg'
+  name?: string
+}
+
+const { checked = false, disabled = false, size = 'default', name, class: className, ...props } = Astro.props
+const api = createSwitch({ checked, disabled })
+---
+
+<button
+  type="button"
+  role="switch"
+  aria-checked={String(checked)}
+  data-state={checked ? 'checked' : 'unchecked'}
+  data-disabled={disabled ? '' : undefined}
+  class={cn(switchVariants({ checked: checked ? 'true' : 'false', size }), className)}
+  disabled={disabled}
+  data-rfr-switch
+  data-rfr-switch-size={size}
+  {...props}
+>
+  <span class={cn(switchThumbVariants({ checked: checked ? 'true' : 'false', size }))} data-rfr-switch-thumb />
+  {name && <input type="hidden" name={name} value={String(checked)} data-rfr-switch-input />}
+</button>
+
+<script>
+  const THUMB_TRANSLATE: Record<string, string> = {
+    sm: 'translate-x-3',
+    default: 'translate-x-4',
+    lg: 'translate-x-5',
+  }
+
+  document.querySelectorAll<HTMLButtonElement>('[data-rfr-switch]').forEach((el) => {
+    el.addEventListener('click', () => {
+      if (el.disabled) return
+      const checked = el.getAttribute('aria-checked') === 'true'
+      const newChecked = !checked
+      const size = el.getAttribute('data-rfr-switch-size') || 'default'
+
+      el.setAttribute('aria-checked', String(newChecked))
+      el.setAttribute('data-state', newChecked ? 'checked' : 'unchecked')
+
+      // Update track classes
+      if (newChecked) {
+        el.classList.add('bg-primary')
+        el.classList.remove('bg-input')
+      } else {
+        el.classList.remove('bg-primary')
+        el.classList.add('bg-input')
+      }
+
+      // Update thumb position
+      const thumb = el.querySelector('[data-rfr-switch-thumb]') as HTMLElement
+      if (thumb) {
+        const translateClass = THUMB_TRANSLATE[size] || THUMB_TRANSLATE.default
+        if (newChecked) {
+          thumb.classList.remove('translate-x-0')
+          thumb.classList.add(translateClass)
+        } else {
+          thumb.classList.remove(translateClass)
+          thumb.classList.add('translate-x-0')
+        }
+      }
+
+      // Update hidden input
+      const input = el.querySelector('[data-rfr-switch-input]') as HTMLInputElement | null
+      if (input) input.value = String(newChecked)
+
+      el.dispatchEvent(new CustomEvent('change', { detail: { checked: newChecked } }))
+    })
+
+    el.addEventListener('keydown', (e) => {
+      if (e.key === ' ') {
+        e.preventDefault()
+        el.click()
+      }
+    })
+  })
+</script>

package/dist/astro-switch/index.ts

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

package/dist/astro-table-of-contents/TableOfContents.astro

@@ -0,0 +1,53 @@
+---
+import { cn } from '../shared/index.ts';
+
+export interface Props extends astroHTML.JSX.HTMLAttributes {
+  selectors?: string;
+}
+
+const { selectors = 'h2, h3, h4', class: className, ...props } = Astro.props;
+---
+
+<nav class={cn("space-y-1 refraction-toc", className)} data-selectors={selectors} {...props as any}>
+  <ul class="m-0 list-none p-0 toc-list">
+  </ul>
+</nav>
+
+<script>
+  import { parseHeadings, observeHeadings } from '@refraction-ui/table-of-contents';
+
+  document.querySelectorAll('.refraction-toc').forEach((el) => {
+    const selectors = el.getAttribute('data-selectors') || 'h2, h3, h4';
+    const container = document.body;
+    const headings = parseHeadings(container, selectors);
+    const list = el.querySelector('.toc-list');
+    
+    if (!list || headings.length === 0) return;
+
+    headings.forEach(heading => {
+      const li = document.createElement('li');
+      li.className = `py-1 ${heading.level === 3 ? 'pl-4' : heading.level === 4 ? 'pl-8' : ''}`;
+      
+      const a = document.createElement('a');
+      a.href = `#${heading.id}`;
+      a.className = 'block text-sm transition-colors hover:text-foreground text-muted-foreground toc-link';
+      a.textContent = heading.text;
+      a.dataset.id = heading.id;
+      
+      li.appendChild(a);
+      list.appendChild(li);
+    });
+
+    observeHeadings(headings.map(h => h.id), (activeId) => {
+      el.querySelectorAll('.toc-link').forEach(link => {
+        if ((link as HTMLAnchorElement).dataset.id === activeId) {
+          link.classList.remove('text-muted-foreground');
+          link.classList.add('font-medium', 'text-foreground');
+        } else {
+          link.classList.remove('font-medium', 'text-foreground');
+          link.classList.add('text-muted-foreground');
+        }
+      });
+    });
+  });
+</script>

package/dist/astro-table-of-contents/index.ts

@@ -0,0 +1 @@
+export { default as TableOfContents } from './TableOfContents.astro'