@refraction-ui/astro 0.4.0 → 0.4.4

package/dist/skeleton/index.ts

@@ -0,0 +1,8 @@
+export {
+  createSkeleton,
+  type SkeletonShape,
+  type SkeletonProps,
+  type SkeletonAPI,
+} from './skeleton.js'
+
+export { skeletonVariants } from './skeleton.styles.js'

package/dist/skeleton/skeleton.styles.ts

@@ -0,0 +1,16 @@
+import { cva } from '../shared/index.ts'
+
+export const skeletonVariants = cva({
+  base: 'animate-pulse bg-muted',
+  variants: {
+    shape: {
+      text: 'h-4 w-full rounded',
+      circular: 'rounded-full',
+      rectangular: 'rounded-none',
+      rounded: 'rounded-md',
+    },
+  },
+  defaultVariants: {
+    shape: 'text',
+  },
+})

package/dist/skeleton/skeleton.ts

@@ -0,0 +1,39 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export type SkeletonShape = 'text' | 'circular' | 'rectangular' | 'rounded'
+
+export interface SkeletonProps {
+  shape?: SkeletonShape
+  width?: string | number
+  height?: string | number
+  /** Number of lines to render for the text shape variant */
+  lines?: number
+  /** Whether to animate the skeleton pulse. Defaults to true */
+  animate?: boolean
+}
+
+export interface SkeletonAPI {
+  /** ARIA attributes to spread on the element */
+  ariaProps: Partial<AccessibilityProps>
+  /** Data attributes for CSS styling hooks */
+  dataAttributes: Record<string, string>
+}
+
+export function createSkeleton(props: SkeletonProps = {}): SkeletonAPI {
+  const { shape = 'text', animate = true } = props
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    'aria-hidden': true,
+    role: 'presentation',
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-shape': shape,
+    'data-animate': String(animate),
+  }
+
+  return {
+    ariaProps,
+    dataAttributes,
+  }
+}

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

@@ -0,0 +1 @@
+export * from './skip-to-content';

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

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

package/dist/slide-viewer/index.ts

@@ -0,0 +1,16 @@
+export {
+  createSlideViewer,
+  type SlideViewerProps,
+  type SlideViewerAPI,
+  type SlideViewerState,
+  type SlideData,
+  type SlideType,
+  type BookmarkType,
+} from './slide-viewer.js'
+
+export {
+  slideViewerVariants,
+  progressBarVariants,
+  slideTypeBadgeVariants,
+  slideViewerTokens,
+} from './slide-viewer.styles.js'

package/dist/slide-viewer/slide-viewer.styles.ts

@@ -0,0 +1,57 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const slideViewerTokens: TokenContract = {
+  name: 'slide-viewer',
+  tokens: {
+    bg: { variable: '--rfr-slide-bg', fallback: 'hsl(var(--background))' },
+    fg: { variable: '--rfr-slide-fg', fallback: 'hsl(var(--foreground))' },
+    progressBg: { variable: '--rfr-slide-progress-bg', fallback: 'hsl(var(--primary))' },
+    progressTrack: { variable: '--rfr-slide-progress-track', fallback: 'hsl(var(--muted))' },
+    badgeBg: { variable: '--rfr-slide-badge-bg', fallback: 'hsl(var(--secondary))' },
+  },
+}
+
+export const slideViewerVariants = cva({
+  base: 'flex flex-col h-full w-full relative overflow-hidden',
+  variants: {
+    size: {
+      compact: 'max-w-2xl',
+      default: 'max-w-4xl',
+      full: 'max-w-none',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+})
+
+export const progressBarVariants = cva({
+  base: 'h-1 w-full bg-muted rounded-full overflow-hidden',
+  variants: {
+    position: {
+      top: 'rounded-none',
+      bottom: 'rounded-none',
+      inline: 'rounded-full',
+    },
+  },
+  defaultVariants: {
+    position: 'top',
+  },
+})
+
+export const slideTypeBadgeVariants = cva({
+  base: 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
+  variants: {
+    type: {
+      lesson: 'bg-blue-100 text-blue-800',
+      quiz: 'bg-purple-100 text-purple-800',
+      exercise: 'bg-green-100 text-green-800',
+      intro: 'bg-gray-100 text-gray-800',
+      summary: 'bg-orange-100 text-orange-800',
+    },
+  },
+  defaultVariants: {
+    type: 'lesson',
+  },
+})

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

@@ -0,0 +1,152 @@
+import type { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.ts'
+import { Keys } from '../shared/index.ts'
+
+export type SlideType = 'lesson' | 'quiz' | 'exercise' | 'intro' | 'summary'
+
+export type BookmarkType = 'important' | 'difficult' | 'to-revise'
+
+export interface SlideData {
+  id: string
+  type: SlideType
+  content: string
+}
+
+export interface SlideViewerProps {
+  slides: SlideData[]
+  initialSlide?: number
+  onSlideChange?: (index: number) => void
+  onComplete?: () => void
+}
+
+export interface SlideViewerState {
+  currentSlide: number
+  totalSlides: number
+  bookmarks: Map<number, BookmarkType>
+}
+
+export interface SlideViewerAPI {
+  /** Current viewer state */
+  state: SlideViewerState
+  /** Navigate to the next slide */
+  next: () => void
+  /** Navigate to the previous slide */
+  prev: () => void
+  /** Navigate to a specific slide index */
+  goTo: (index: number) => void
+  /** Toggle a bookmark on the current slide */
+  toggleBookmark: (type: BookmarkType) => void
+  /** Get all bookmarks as an array of entries */
+  getBookmarks: () => Array<{ slide: number; type: BookmarkType }>
+  /** Current progress as a number between 0 and 1 */
+  progress: number
+  /** Keyboard handlers for slide navigation */
+  keyboardHandlers: KeyboardHandlerMap
+  /** ARIA props for the current slide */
+  getSlideAriaProps: () => Partial<AccessibilityProps> & { 'aria-roledescription'?: string }
+}
+
+/**
+ * Create a headless slide viewer.
+ *
+ * Manages slide navigation state, bookmarks, progress tracking,
+ * and keyboard navigation. Framework wrappers handle rendering.
+ */
+export function createSlideViewer(props: SlideViewerProps): SlideViewerAPI {
+  const { slides, initialSlide = 0, onSlideChange, onComplete } = props
+
+  const totalSlides = slides.length
+  const bookmarks = new Map<number, BookmarkType>()
+
+  const state: SlideViewerState = {
+    currentSlide: Math.max(0, Math.min(initialSlide, totalSlides - 1)),
+    totalSlides,
+    bookmarks,
+  }
+
+  function updateProgress(): number {
+    if (totalSlides <= 1) return 1
+    return state.currentSlide / (totalSlides - 1)
+  }
+
+  function next() {
+    if (state.currentSlide < totalSlides - 1) {
+      state.currentSlide++
+      api.progress = updateProgress()
+      onSlideChange?.(state.currentSlide)
+    } else {
+      // Already on the last slide — trigger complete
+      onComplete?.()
+    }
+  }
+
+  function prev() {
+    if (state.currentSlide > 0) {
+      state.currentSlide--
+      api.progress = updateProgress()
+      onSlideChange?.(state.currentSlide)
+    }
+  }
+
+  function goTo(index: number) {
+    if (index >= 0 && index < totalSlides) {
+      state.currentSlide = index
+      api.progress = updateProgress()
+      onSlideChange?.(state.currentSlide)
+    }
+  }
+
+  function toggleBookmark(type: BookmarkType) {
+    const current = state.currentSlide
+    if (bookmarks.has(current) && bookmarks.get(current) === type) {
+      bookmarks.delete(current)
+    } else {
+      bookmarks.set(current, type)
+    }
+  }
+
+  function getBookmarks(): Array<{ slide: number; type: BookmarkType }> {
+    const result: Array<{ slide: number; type: BookmarkType }> = []
+    for (const [slide, type] of bookmarks.entries()) {
+      result.push({ slide, type })
+    }
+    return result.sort((a, b) => a.slide - b.slide)
+  }
+
+  const keyboardHandlers: KeyboardHandlerMap = {
+    [Keys.ArrowRight]: (e) => {
+      e.preventDefault()
+      next()
+    },
+    [Keys.ArrowLeft]: (e) => {
+      e.preventDefault()
+      prev()
+    },
+    [Keys.Escape]: (e) => {
+      e.preventDefault()
+    },
+  }
+
+  function getSlideAriaProps(): Partial<AccessibilityProps> & { 'aria-roledescription'?: string } {
+    const slide = slides[state.currentSlide]
+    return {
+      role: 'region',
+      'aria-roledescription': 'slide',
+      'aria-label': `Slide ${state.currentSlide + 1} of ${totalSlides}: ${slide?.type ?? 'unknown'} slide`,
+      'aria-live': 'polite',
+    }
+  }
+
+  const api: SlideViewerAPI = {
+    state,
+    next,
+    prev,
+    goTo,
+    toggleBookmark,
+    getBookmarks,
+    progress: updateProgress(),
+    keyboardHandlers,
+    getSlideAriaProps,
+  }
+
+  return api
+}

package/dist/slider/index.ts

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

package/dist/slider/slider.ts

@@ -0,0 +1,2 @@
+// Core slider logic
+export interface SliderProps {}

package/dist/status-indicator/index.ts

@@ -0,0 +1,15 @@
+export {
+  createStatusIndicator,
+  STATUS_COLORS,
+  STATUS_LABELS,
+  type StatusProps,
+  type StatusAPI,
+  type StatusType,
+} from './status-indicator.js'
+
+export {
+  statusContainerStyles,
+  statusDotVariants,
+  statusPulseVariants,
+  statusLabelStyles,
+} from './status-indicator.styles.js'

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

@@ -0,0 +1,41 @@
+import { cva } from '../shared/index.ts'
+
+export const statusContainerStyles =
+  'inline-flex items-center gap-1.5'
+
+export const statusDotVariants = cva({
+  base: 'inline-block h-2 w-2 rounded-full',
+  variants: {
+    type: {
+      success: 'bg-green-500',
+      error: 'bg-red-500',
+      warning: 'bg-yellow-500',
+      info: 'bg-blue-500',
+      pending: 'bg-orange-500',
+      neutral: 'bg-gray-400',
+    },
+  },
+  defaultVariants: {
+    type: 'neutral',
+  },
+})
+
+export const statusPulseVariants = cva({
+  base: 'animate-pulse inline-block h-2 w-2 rounded-full',
+  variants: {
+    type: {
+      success: 'bg-green-500',
+      error: 'bg-red-500',
+      warning: 'bg-yellow-500',
+      info: 'bg-blue-500',
+      pending: 'bg-orange-500',
+      neutral: 'bg-gray-400',
+    },
+  },
+  defaultVariants: {
+    type: 'pending',
+  },
+})
+
+export const statusLabelStyles =
+  'text-sm text-muted-foreground'

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

@@ -0,0 +1,66 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export type StatusType = 'success' | 'error' | 'warning' | 'info' | 'pending' | 'neutral'
+
+export interface StatusProps {
+  /** The status type */
+  type: StatusType
+  /** Label to display alongside the status dot */
+  label?: string
+  /** Whether to show a pulse animation (primarily for 'pending' status) */
+  pulse?: boolean
+}
+
+export interface StatusAPI {
+  /** ARIA attributes for the status indicator */
+  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** The status type */
+  type: StatusType
+  /** The display label */
+  label: string
+  /** Whether to show pulse animation */
+  pulse: boolean
+  /** CSS color class name for the dot */
+  color: string
+}
+
+const STATUS_COLORS: Record<StatusType, string> = {
+  success: 'green',
+  error: 'red',
+  warning: 'yellow',
+  info: 'blue',
+  pending: 'orange',
+  neutral: 'gray',
+}
+
+const STATUS_LABELS: Record<StatusType, string> = {
+  success: 'Success',
+  error: 'Error',
+  warning: 'Warning',
+  info: 'Info',
+  pending: 'Pending',
+  neutral: 'Neutral',
+}
+
+export { STATUS_COLORS, STATUS_LABELS }
+
+export function createStatusIndicator(props: StatusProps): StatusAPI {
+  const { type, label: labelOverride, pulse: pulseOverride } = props
+
+  const color = STATUS_COLORS[type]
+  const label = labelOverride ?? STATUS_LABELS[type]
+  const pulse = pulseOverride ?? (type === 'pending')
+
+  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'status',
+    'aria-label': label,
+  }
+
+  return {
+    ariaProps,
+    type,
+    label,
+    pulse,
+    color,
+  }
+}

package/dist/steps/index.ts

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

package/dist/steps/steps.ts

@@ -0,0 +1 @@
+export const steps = {};

package/dist/switch/index.ts

@@ -0,0 +1,7 @@
+export {
+  createSwitch,
+  type SwitchProps,
+  type SwitchAPI,
+} from './switch.js'
+
+export { switchVariants, switchThumbVariants, switchTokens } from './switch.styles.js'

package/dist/switch/switch.styles.ts

@@ -0,0 +1,55 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const switchTokens: TokenContract = {
+  name: 'switch',
+  tokens: {
+    bg: { variable: '--rfr-switch-bg', fallback: 'hsl(var(--input))' },
+    'bg-checked': { variable: '--rfr-switch-bg-checked', fallback: 'hsl(var(--primary))' },
+    thumb: { variable: '--rfr-switch-thumb', fallback: 'hsl(var(--background))' },
+    ring: { variable: '--rfr-switch-ring', fallback: 'hsl(var(--ring))' },
+  },
+}
+
+export const switchVariants = cva({
+  base: 'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
+  variants: {
+    checked: {
+      true: 'bg-primary',
+      false: 'bg-input',
+    },
+    size: {
+      sm: 'h-4 w-7',
+      default: 'h-5 w-9',
+      lg: 'h-6 w-11',
+    },
+  },
+  defaultVariants: {
+    checked: 'false',
+    size: 'default',
+  },
+})
+
+export const switchThumbVariants = cva({
+  base: 'pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform',
+  variants: {
+    checked: {
+      true: '',
+      false: 'translate-x-0',
+    },
+    size: {
+      sm: 'h-3 w-3',
+      default: 'h-4 w-4',
+      lg: 'h-5 w-5',
+    },
+  },
+  defaultVariants: {
+    checked: 'false',
+    size: 'default',
+  },
+  compoundVariants: [
+    { checked: 'true', size: 'sm', class: 'translate-x-3' },
+    { checked: 'true', size: 'default', class: 'translate-x-4' },
+    { checked: 'true', size: 'lg', class: 'translate-x-5' },
+  ],
+})

package/dist/switch/switch.ts

@@ -0,0 +1,63 @@
+import type { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.ts'
+import { Keys } from '../shared/index.ts'
+
+export interface SwitchProps {
+  checked?: boolean
+  disabled?: boolean
+  required?: boolean
+  name?: string
+  value?: string
+}
+
+export interface SwitchAPI {
+  /** ARIA attributes to spread on the element */
+  ariaProps: Partial<AccessibilityProps>
+  /** Keyboard handlers to attach */
+  keyboardHandlers: KeyboardHandlerMap
+  /** Whether interaction should be blocked */
+  isInteractive: boolean
+  /** Data attributes for CSS styling hooks */
+  dataAttributes: Record<string, string>
+  /** Current state */
+  state: {
+    checked: boolean
+    disabled: boolean
+  }
+}
+
+export function createSwitch(props: SwitchProps = {}): SwitchAPI {
+  const { checked = false, disabled = false } = props
+  const isInteractive = !disabled
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'switch',
+    'aria-checked': checked,
+  }
+
+  if (disabled) {
+    ariaProps['aria-disabled'] = true
+  }
+
+  const dataAttributes: Record<string, string> = {}
+  if (checked) {
+    dataAttributes['data-state'] = 'checked'
+  } else {
+    dataAttributes['data-state'] = 'unchecked'
+  }
+  if (disabled) {
+    dataAttributes['data-disabled'] = ''
+  }
+
+  const keyboardHandlers: KeyboardHandlerMap = {}
+  if (!isInteractive) {
+    keyboardHandlers[Keys.Space] = (e) => e.preventDefault()
+  }
+
+  return {
+    ariaProps,
+    keyboardHandlers,
+    isInteractive,
+    dataAttributes,
+    state: { checked, disabled },
+  }
+}

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

@@ -0,0 +1 @@
+export * from './table-of-contents'

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

@@ -0,0 +1,37 @@
+export interface TocItem {
+  id: string;
+  text: string;
+  level: number;
+}
+
+export function parseHeadings(container: HTMLElement, selectors = 'h2, h3, h4'): TocItem[] {
+  const headings = Array.from(container.querySelectorAll(selectors));
+  return headings.map(h => ({
+    id: h.id || h.textContent?.toLowerCase().replace(/\s+/g, '-') || '',
+    text: h.textContent || '',
+    level: parseInt(h.tagName.charAt(1), 10)
+  })).filter(h => h.id !== ''); // Ensure headings have IDs
+}
+
+export function observeHeadings(
+  headingIds: string[],
+  callback: (activeId: string) => void,
+  options?: IntersectionObserverInit
+): () => void {
+  const observer = new IntersectionObserver((entries) => {
+    // Find the first intersecting entry
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        callback(entry.target.id);
+        break; // Or handle multiple, but usually we just care about one
+      }
+    }
+  }, { rootMargin: '0px 0px -80% 0px', ...options });
+
+  headingIds.forEach(id => {
+    const el = document.getElementById(id);
+    if (el) observer.observe(el);
+  });
+
+  return () => observer.disconnect();
+}

package/dist/tabs/index.ts

@@ -0,0 +1,8 @@
+export {
+  createTabs,
+  type TabsProps,
+  type TabsAPI,
+  type TabsState,
+} from './tabs.js'
+
+export { tabsListVariants, tabsTriggerVariants } from './tabs.styles.js'

package/dist/tabs/tabs.styles.ts

@@ -0,0 +1,9 @@
+import { cva } from '../shared/index.ts'
+
+export const tabsListVariants = cva({
+  base: 'inline-flex max-w-full overflow-x-auto items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+})
+
+export const tabsTriggerVariants = cva({
+  base: 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+})