@refraction-ui/astro 0.4.0 → 0.4.4

package/dist/radio/radio.ts

@@ -0,0 +1,70 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export interface RadioOption {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+export interface RadioGroupProps {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  name?: string
+  disabled?: boolean
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export interface RadioGroupAPI {
+  state: { selectedValue: string | undefined }
+  groupProps: Partial<AccessibilityProps> & Record<string, unknown>
+  getItemProps(value: string, disabled?: boolean): Partial<AccessibilityProps> & Record<string, unknown>
+  select(value: string): void
+  keyboardHandlers: Record<string, (e: KeyboardEvent) => void>
+}
+
+export function createRadioGroup(props: RadioGroupProps = {}): RadioGroupAPI {
+  const { value: controlled, defaultValue, onValueChange, name, disabled = false, orientation = 'vertical' } = props
+  let selected = controlled ?? defaultValue
+
+  function select(value: string) {
+    if (disabled) return
+    selected = value
+    onValueChange?.(value)
+  }
+
+  const groupProps = {
+    role: 'radiogroup' as const,
+    'aria-orientation': orientation,
+    ...(disabled ? { 'aria-disabled': true } : {}),
+  }
+
+  function getItemProps(value: string, itemDisabled?: boolean) {
+    const isSelected = selected === value
+    const isDisabled = disabled || itemDisabled
+    return {
+      role: 'radio' as const,
+      'aria-checked': isSelected,
+      'aria-disabled': isDisabled || undefined,
+      tabIndex: isSelected ? 0 : -1,
+      'data-state': isSelected ? 'checked' : 'unchecked',
+      ...(isDisabled ? { 'data-disabled': '' } : {}),
+      ...(name ? { name } : {}),
+    }
+  }
+
+  const keyboardHandlers: Record<string, (e: KeyboardEvent) => void> = {
+    ArrowDown(e) { e.preventDefault() },
+    ArrowUp(e) { e.preventDefault() },
+    ArrowRight(e) { e.preventDefault() },
+    ArrowLeft(e) { e.preventDefault() },
+  }
+
+  return {
+    state: { get selectedValue() { return selected } },
+    groupProps,
+    getItemProps,
+    select,
+    keyboardHandlers,
+  }
+}

package/dist/reaction-bar/index.ts

@@ -0,0 +1,14 @@
+export {
+  createReactionBar,
+  type Reaction,
+  type ReactionBarProps,
+  type ReactionBarAPI,
+} from './reaction-bar.js'
+
+export {
+  reactionBarStyles,
+  reactionPillVariants,
+  reactionAddButtonStyles,
+  reactionEmojiStyles,
+  reactionCountStyles,
+} from './reaction-bar.styles.js'

package/dist/reaction-bar/reaction-bar.styles.ts

@@ -0,0 +1,23 @@
+import { cva } from '../shared/index.ts'
+
+export const reactionBarStyles =
+  'flex flex-wrap items-center gap-1'
+
+export const reactionPillVariants = cva({
+  base: 'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs cursor-pointer transition-colors hover:bg-accent',
+  variants: {
+    state: {
+      active: 'border-primary bg-primary/10 text-primary',
+      inactive: 'border-border bg-background text-foreground',
+    },
+  },
+  defaultVariants: {
+    state: 'inactive',
+  },
+})
+
+export const reactionAddButtonStyles =
+  'inline-flex items-center justify-center h-6 w-6 rounded-full border border-dashed border-muted-foreground/30 text-muted-foreground hover:border-muted-foreground hover:text-foreground cursor-pointer transition-colors text-xs'
+
+export const reactionEmojiStyles = 'text-sm'
+export const reactionCountStyles = 'text-xs font-medium tabular-nums'

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

@@ -0,0 +1,87 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+import { generateId } from '../shared/index.ts'
+
+export interface Reaction {
+  /** The emoji character */
+  emoji: string
+  /** Number of users who reacted with this emoji */
+  count: number
+  /** Whether the current user has reacted */
+  userReacted: boolean
+}
+
+export interface ReactionBarProps {
+  /** Current reactions */
+  reactions: Reaction[]
+  /** Callback when a reaction is toggled */
+  onToggle?: (emoji: string) => void
+  /** Callback when a new reaction is added */
+  onAdd?: (emoji: string) => void
+}
+
+export interface ReactionBarAPI {
+  /** Current reactions */
+  reactions: Reaction[]
+  /** Toggle a reaction */
+  toggle(emoji: string): void
+  /** Add a new reaction */
+  add(emoji: string): void
+  /** ARIA props for the reaction bar container */
+  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** Get ARIA props for an individual reaction pill */
+  getReactionAriaProps(reaction: Reaction): Record<string, unknown>
+  /** ARIA props for the "add reaction" button */
+  addButtonAriaProps: Record<string, unknown>
+  /** Generated IDs */
+  ids: {
+    container: string
+    label: string
+  }
+}
+
+export function createReactionBar(props: ReactionBarProps): ReactionBarAPI {
+  const { reactions, onToggle, onAdd } = props
+
+  const containerId = generateId('rfr-reactions')
+  const labelId = generateId('rfr-reactions-label')
+
+  function toggle(emoji: string): void {
+    onToggle?.(emoji)
+  }
+
+  function add(emoji: string): void {
+    onAdd?.(emoji)
+  }
+
+  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'group',
+    'aria-label': 'Reactions',
+    id: containerId,
+  }
+
+  function getReactionAriaProps(reaction: Reaction): Record<string, unknown> {
+    return {
+      role: 'button',
+      'aria-pressed': reaction.userReacted,
+      'aria-label': `${reaction.emoji} ${reaction.count} reaction${reaction.count === 1 ? '' : 's'}${reaction.userReacted ? ', you reacted' : ''}`,
+    }
+  }
+
+  const addButtonAriaProps: Record<string, unknown> = {
+    role: 'button',
+    'aria-label': 'Add reaction',
+  }
+
+  return {
+    reactions,
+    toggle,
+    add,
+    ariaProps,
+    getReactionAriaProps,
+    addButtonAriaProps,
+    ids: {
+      container: containerId,
+      label: labelId,
+    },
+  }
+}

package/dist/resizable-layout/index.ts

@@ -0,0 +1,12 @@
+export {
+  createResizableLayout,
+  type ResizableLayoutProps,
+  type ResizableLayoutAPI,
+} from './resizable-layout.js'
+
+export {
+  resizableLayoutVariants,
+  resizableDividerVariants,
+  resizablePaneVariants,
+  resizableLayoutTokens,
+} from './resizable-layout.styles.js'

package/dist/resizable-layout/resizable-layout.styles.ts

@@ -0,0 +1,50 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const resizableLayoutTokens: TokenContract = {
+  name: 'resizable-layout',
+  tokens: {
+    dividerColor: { variable: '--rfr-resizable-divider-color', fallback: 'hsl(var(--border))' },
+    dividerHover: { variable: '--rfr-resizable-divider-hover', fallback: 'hsl(var(--primary))' },
+    dividerSize: { variable: '--rfr-resizable-divider-size', fallback: '4px' },
+  },
+}
+
+export const resizableLayoutVariants = cva({
+  base: 'flex h-full w-full',
+  variants: {
+    orientation: {
+      horizontal: 'flex-row',
+      vertical: 'flex-col',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+})
+
+export const resizableDividerVariants = cva({
+  base: 'relative flex items-center justify-center bg-border transition-colors hover:bg-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 active:bg-primary/70',
+  variants: {
+    orientation: {
+      horizontal: 'w-1 cursor-col-resize',
+      vertical: 'h-1 cursor-row-resize',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+})
+
+export const resizablePaneVariants = cva({
+  base: 'overflow-auto',
+  variants: {
+    orientation: {
+      horizontal: 'h-full',
+      vertical: 'w-full',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+})

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

@@ -0,0 +1,139 @@
+import type { Orientation } from '../shared/index.ts'
+
+export interface ResizableLayoutProps {
+  orientation?: Orientation
+  /** Initial 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
+}
+
+export interface ResizableLayoutAPI {
+  /** Current pane sizes as percentages */
+  sizes: number[]
+  /** Begin a resize operation at divider index */
+  startResize: (index: number) => void
+  /** Apply a delta (percentage) during resize */
+  onResize: (delta: number) => void
+  /** End the current resize operation */
+  endResize: () => void
+  /** Generate CSS custom properties for pane sizes */
+  getCSSVariables: () => Record<string, string>
+  /** Current orientation */
+  orientation: Orientation
+}
+
+/**
+ * Clamp a value between min and max.
+ */
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max)
+}
+
+export function createResizableLayout(props: ResizableLayoutProps = {}): ResizableLayoutAPI {
+  const {
+    orientation = 'horizontal',
+    defaultSizes = [50, 50],
+    minSizes = [],
+    maxSizes = [],
+    persistKey,
+  } = props
+
+  const sizes = loadSizes(persistKey) ?? [...defaultSizes]
+  let resizingIndex: number | null = null
+  let sizesBeforeResize: number[] = []
+
+  function loadSizes(key?: string): number[] | null {
+    if (!key) return null
+    try {
+      if (typeof globalThis.localStorage !== 'undefined') {
+        const stored = globalThis.localStorage.getItem(key)
+        if (stored) {
+          const parsed = JSON.parse(stored) as number[]
+          if (Array.isArray(parsed) && parsed.length === defaultSizes.length) {
+            return parsed
+          }
+        }
+      }
+    } catch {
+      // localStorage not available or invalid data
+    }
+    return null
+  }
+
+  function saveSizes(key: string, values: number[]): void {
+    try {
+      if (typeof globalThis.localStorage !== 'undefined') {
+        globalThis.localStorage.setItem(key, JSON.stringify(values))
+      }
+    } catch {
+      // localStorage not available
+    }
+  }
+
+  function getMinSize(index: number): number {
+    return minSizes[index] ?? 0
+  }
+
+  function getMaxSize(index: number): number {
+    return maxSizes[index] ?? 100
+  }
+
+  function startResize(index: number): void {
+    resizingIndex = index
+    sizesBeforeResize = [...sizes]
+  }
+
+  function onResize(delta: number): void {
+    if (resizingIndex === null) return
+
+    const i = resizingIndex
+    const j = i + 1
+    if (j >= sizes.length) return
+
+    const totalAvailable = sizesBeforeResize[i] + sizesBeforeResize[j]
+
+    // Compute new size for pane i
+    let newSizeI = sizesBeforeResize[i] + delta
+    newSizeI = clamp(newSizeI, getMinSize(i), getMaxSize(i))
+
+    // Compute new size for pane j from remaining
+    let newSizeJ = totalAvailable - newSizeI
+    newSizeJ = clamp(newSizeJ, getMinSize(j), getMaxSize(j))
+
+    // Re-adjust pane i if pane j was constrained
+    newSizeI = totalAvailable - newSizeJ
+
+    sizes[i] = newSizeI
+    sizes[j] = newSizeJ
+  }
+
+  function endResize(): void {
+    resizingIndex = null
+    sizesBeforeResize = []
+    if (persistKey) {
+      saveSizes(persistKey, sizes)
+    }
+  }
+
+  function getCSSVariables(): Record<string, string> {
+    const vars: Record<string, string> = {}
+    for (let i = 0; i < sizes.length; i++) {
+      vars[`--rfr-pane-${i}-size`] = `${sizes[i]}%`
+    }
+    return vars
+  }
+
+  return {
+    sizes,
+    startResize,
+    onResize,
+    endResize,
+    getCSSVariables,
+    orientation,
+  }
+}