@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-file-tree.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../file-tree/src/file-tree.ts", "../../file-tree/src/file-tree.styles.ts", "../../react-file-tree/src/react-file-tree.tsx"],
+  "sourcesContent": ["/**\n * @refraction-ui/file-tree — headless tree view.\n *\n * Owns the *behavior* of a hierarchical tree: the node model, expand/collapse\n * state, single selection, roving focus, and WAI-ARIA treeview keyboard\n * semantics. It has NO UI opinion — adapters render the nested markup and\n * spread the ARIA objects.\n */\n\n/** A node in the tree. Parents carry `children`; leaves do not. */\nexport interface FileTreeNode {\n  /** Unique, stable id (used for expansion/selection/focus). */\n  id: string\n  /** Display label. */\n  label: string\n  /** Child nodes — presence (even empty is not allowed: omit for leaves) marks a parent. */\n  children?: FileTreeNode[]\n  /** Disabled nodes cannot be selected, toggled, or focused via click. */\n  disabled?: boolean\n}\n\n/** Options for {@link createFileTree}. */\nexport interface FileTreeConfig {\n  /** Root-level nodes. */\n  nodes?: FileTreeNode[]\n  /** Controlled expanded node ids. Pair with `onExpandedChange`. */\n  expandedIds?: string[]\n  /** Uncontrolled initial expanded node ids. */\n  defaultExpandedIds?: string[]\n  /** Controlled selected node id (`null` = none). Pair with `onSelectionChange`. */\n  selectedId?: string | null\n  /** Uncontrolled initial selected node id. */\n  defaultSelectedId?: string | null\n  /** Called whenever the expanded set changes. */\n  onExpandedChange?: (ids: string[]) => void\n  /** Called whenever the selection changes. */\n  onSelectionChange?: (id: string | null) => void\n  /** Accessible label for the tree (default `'File tree'`). */\n  'aria-label'?: string\n}\n\n/** Snapshot of the store. Returned by `getState()`; treat as immutable. */\nexport interface FileTreeState {\n  nodes: FileTreeNode[]\n  expandedIds: string[]\n  selectedId: string | null\n  /** Node holding the roving-tabindex focus (null = the first visible item). */\n  focusedId: string | null\n}\n\n/** A row of the flattened, currently-visible tree (DFS order). */\nexport interface VisibleTreeItem {\n  node: FileTreeNode\n  /** Id of the parent node, or null for root-level items. */\n  parentId: string | null\n  /** 1-based nesting depth (ARIA `aria-level`). */\n  depth: number\n  hasChildren: boolean\n  isExpanded: boolean\n  isSelected: boolean\n  isFocused: boolean\n}\n\n/** The framework-agnostic store. React/Astro adapters wrap this. */\nexport interface FileTreeAPI {\n  /** Current immutable snapshot */\n  getState(): FileTreeState\n  /** Subscribe to changes; returns an unsubscribe fn (suits useSyncExternalStore) */\n  subscribe(listener: () => void): () => void\n\n  /** Flattened visible rows in DFS order (children of collapsed parents omitted) */\n  getVisibleItems(): VisibleTreeItem[]\n  isExpanded(id: string): boolean\n  /** Toggle a parent's expanded state (no-op for leaves/disabled nodes) */\n  toggle(id: string): void\n  expand(id: string): void\n  collapse(id: string): void\n  /** Select a node (`null` clears). No-op for unknown/disabled nodes. */\n  select(id: string | null): void\n  /** Move the roving focus to a node */\n  focus(id: string | null): void\n  /**\n   * WAI-ARIA treeview keyboard semantics, applied to the focused item:\n   * ArrowDown/Up move, ArrowRight expands or descends, ArrowLeft collapses or\n   * ascends, Home/End jump, Enter/Space selects.\n   */\n  handleKey(key: string): void\n\n  /** Replace the node model (adapters sync the prop) */\n  setNodes(nodes: FileTreeNode[]): void\n  /** Sync a controlled expanded set */\n  setExpandedIds(ids: string[]): void\n  /** Sync a controlled selection */\n  setSelectedId(id: string | null): void\n  /** Update callbacks/options after creation */\n  setOptions(options: {\n    onExpandedChange?: (ids: string[]) => void\n    onSelectionChange?: (id: string | null) => void\n    'aria-label'?: string\n  }): void\n\n  /** ARIA attributes for the tree container (`role=\"tree\"`). */\n  getTreeAria(): Record<string, string | number | boolean>\n  /** ARIA attributes for one visible row (`role=\"treeitem\"`). */\n  getItemAria(item: VisibleTreeItem): Record<string, string | number | boolean>\n}\n\nfunction arrayEquals(a: string[], b: string[]): boolean {\n  return a.length === b.length && a.every((v, i) => v === b[i])\n}\n\n/**\n * createFileTree — headless tree store with expand/collapse, single\n * selection, roving focus, and treeview keyboard semantics. Supports\n * controlled (`expandedIds` / `selectedId`) and uncontrolled\n * (`defaultExpandedIds` / `defaultSelectedId`) usage.\n */\nexport function createFileTree(config: FileTreeConfig = {}): FileTreeAPI {\n  let nodes: FileTreeNode[] = config.nodes ?? []\n  let ariaLabel = config['aria-label'] ?? 'File tree'\n  let onExpandedChange = config.onExpandedChange\n  let onSelectionChange = config.onSelectionChange\n\n  let uncontrolledExpanded: string[] = config.defaultExpandedIds ?? []\n  let controlledExpanded: string[] | undefined = config.expandedIds\n  let uncontrolledSelected: string | null = config.defaultSelectedId ?? null\n  let controlledSelected: string | null | undefined = config.selectedId\n  let focusedId: string | null = null\n\n  // Indexes rebuilt whenever the node model changes.\n  let parentById = new Map<string, string | null>()\n  let nodeById = new Map<string, FileTreeNode>()\n\n  function reindex(): void {\n    parentById = new Map()\n    nodeById = new Map()\n    const walk = (list: FileTreeNode[], parentId: string | null) => {\n      for (const node of list) {\n        nodeById.set(node.id, node)\n        parentById.set(node.id, parentId)\n        if (node.children) walk(node.children, node.id)\n      }\n    }\n    walk(nodes, null)\n  }\n  reindex()\n\n  const listeners = new Set<() => void>()\n  let snapshot: FileTreeState = buildSnapshot()\n  let visibleItems: VisibleTreeItem[] = buildVisibleItems()\n\n  function expandedIds(): string[] {\n    return controlledExpanded !== undefined ? controlledExpanded : uncontrolledExpanded\n  }\n\n  function selectedId(): string | null {\n    return controlledSelected !== undefined ? controlledSelected : uncontrolledSelected\n  }\n\n  function buildSnapshot(): FileTreeState {\n    return {\n      nodes,\n      expandedIds: expandedIds(),\n      selectedId: selectedId(),\n      focusedId,\n    }\n  }\n\n  function buildVisibleItems(): VisibleTreeItem[] {\n    const expanded = new Set(expandedIds())\n    const selected = selectedId()\n    const items: VisibleTreeItem[] = []\n    const walk = (list: FileTreeNode[], parentId: string | null, depth: number) => {\n      for (const node of list) {\n        const hasChildren = Boolean(node.children && node.children.length > 0)\n        const isExpanded = hasChildren && expanded.has(node.id)\n        items.push({\n          node,\n          parentId,\n          depth,\n          hasChildren,\n          isExpanded,\n          isSelected: node.id === selected,\n          isFocused: node.id === focusedId,\n        })\n        if (hasChildren && isExpanded) walk(node.children!, node.id, depth + 1)\n      }\n    }\n    walk(nodes, null, 1)\n    return items\n  }\n\n  function emit(): void {\n    snapshot = buildSnapshot()\n    visibleItems = buildVisibleItems()\n    for (const l of listeners) l()\n  }\n\n  function setExpanded(ids: string[]): void {\n    if (controlledExpanded === undefined) {\n      if (arrayEquals(uncontrolledExpanded, ids)) return\n      uncontrolledExpanded = ids\n    }\n    onExpandedChange?.(ids)\n    emit()\n  }\n\n  function isExpandable(id: string): boolean {\n    const node = nodeById.get(id)\n    return Boolean(node && !node.disabled && node.children && node.children.length > 0)\n  }\n\n  const api: FileTreeAPI = {\n    getState() {\n      return snapshot\n    },\n\n    subscribe(listener) {\n      listeners.add(listener)\n      return () => listeners.delete(listener)\n    },\n\n    getVisibleItems() {\n      return visibleItems\n    },\n\n    isExpanded(id) {\n      return expandedIds().includes(id)\n    },\n\n    toggle(id) {\n      if (!isExpandable(id)) return\n      const current = expandedIds()\n      setExpanded(current.includes(id) ? current.filter((v) => v !== id) : [...current, id])\n    },\n\n    expand(id) {\n      if (!isExpandable(id)) return\n      const current = expandedIds()\n      if (current.includes(id)) return\n      setExpanded([...current, id])\n    },\n\n    collapse(id) {\n      const current = expandedIds()\n      if (!current.includes(id)) return\n      setExpanded(current.filter((v) => v !== id))\n    },\n\n    select(id) {\n      if (id !== null) {\n        const node = nodeById.get(id)\n        if (!node || node.disabled) return\n      }\n      if (controlledSelected === undefined) {\n        if (uncontrolledSelected === id) return\n        uncontrolledSelected = id\n      }\n      onSelectionChange?.(id)\n      emit()\n    },\n\n    focus(id) {\n      // Focus is only meaningful on rows that are actually rendered.\n      if (id !== null && !visibleItems.some((i) => i.node.id === id)) return\n      if (focusedId === id) return\n      focusedId = id\n      emit()\n    },\n\n    handleKey(key) {\n      const items = visibleItems\n      if (items.length === 0) return\n      const currentIndex = focusedId ? items.findIndex((i) => i.node.id === focusedId) : -1\n\n      switch (key) {\n        case 'ArrowDown':\n          api.focus(items[Math.min(currentIndex + 1, items.length - 1)]!.node.id)\n          return\n        case 'ArrowUp':\n          api.focus(items[Math.max(currentIndex - 1, 0)]!.node.id)\n          return\n        case 'Home':\n          api.focus(items[0]!.node.id)\n          return\n        case 'End':\n          api.focus(items[items.length - 1]!.node.id)\n          return\n        case 'ArrowRight': {\n          const item = currentIndex === -1 ? undefined : items[currentIndex]\n          if (!item) {\n            api.focus(items[0]!.node.id)\n            return\n          }\n          if (!item.hasChildren) return\n          if (!item.isExpanded) api.expand(item.node.id)\n          // Expanded: descend to the first child (DFS order puts it next).\n          else api.focus(items[currentIndex + 1]?.node.id ?? item.node.id)\n          return\n        }\n        case 'ArrowLeft': {\n          const item = currentIndex === -1 ? undefined : items[currentIndex]\n          if (!item) return\n          if (item.hasChildren && item.isExpanded) api.collapse(item.node.id)\n          else if (item.parentId) api.focus(item.parentId)\n          return\n        }\n        case 'Enter':\n        case ' ': {\n          const item = currentIndex === -1 ? undefined : items[currentIndex]\n          if (item) api.select(item.node.id)\n          return\n        }\n        default:\n          return\n      }\n    },\n\n    setNodes(nextNodes) {\n      nodes = nextNodes\n      reindex()\n      emit()\n    },\n\n    setExpandedIds(ids) {\n      if (controlledExpanded !== undefined && arrayEquals(controlledExpanded, ids)) return\n      controlledExpanded = ids\n      emit()\n    },\n\n    setSelectedId(id) {\n      if (controlledSelected !== undefined && controlledSelected === id) return\n      controlledSelected = id\n      emit()\n    },\n\n    setOptions(options) {\n      if (options.onExpandedChange !== undefined) onExpandedChange = options.onExpandedChange\n      if (options.onSelectionChange !== undefined) onSelectionChange = options.onSelectionChange\n      if (options['aria-label'] !== undefined) ariaLabel = options['aria-label']\n    },\n\n    getTreeAria(): Record<string, string | number | boolean> {\n      return { role: 'tree', 'aria-label': ariaLabel }\n    },\n\n    getItemAria(item): Record<string, string | number | boolean> {\n      const aria: Record<string, string | number | boolean> = {\n        role: 'treeitem',\n        'aria-level': item.depth,\n        'aria-selected': item.isSelected,\n      }\n      if (item.hasChildren) aria['aria-expanded'] = item.isExpanded\n      if (item.node.disabled) aria['aria-disabled'] = true\n      return aria\n    },\n  }\n\n  return api\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/** Tree container. */\nexport const fileTreeVariants = cva({\n  base: 'w-full text-sm',\n})\n\n/**\n * A single tree row (treeitem). The `selected` variant carries the\n * selected-row treatment so adapters never inline these classes.\n */\nexport const fileTreeItemVariants = cva({\n  base: [\n    'flex w-full cursor-pointer select-none items-center gap-1.5 rounded-md px-2 py-1',\n    'text-sm outline-none transition-colors',\n    'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background',\n    'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n  ].join(' '),\n  variants: {\n    selected: {\n      true: 'bg-accent text-accent-foreground',\n      false: 'text-foreground hover:bg-muted',\n    },\n  },\n  defaultVariants: {\n    selected: 'false',\n  },\n})\n\n/** Expand/collapse glyph or file marker preceding the label. */\nexport const fileTreeGlyphClass = 'w-4 shrink-0 text-center text-muted-foreground'\n", "import * as React from 'react'\nimport { cn } from '@refraction-ui/shared'\nimport {\n  createFileTree,\n  fileTreeVariants,\n  fileTreeItemVariants,\n  fileTreeGlyphClass,\n  type FileTreeAPI,\n  type FileTreeNode,\n  type FileTreeState,\n  type VisibleTreeItem,\n} from '@refraction-ui/file-tree'\n\nexport type { FileTreeNode }\n\nexport interface FileTreeProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  /** Root-level nodes of the tree. */\n  nodes?: FileTreeNode[]\n  /** Controlled expanded node ids. Pair with `onExpandedChange`. */\n  expandedIds?: string[]\n  /** Uncontrolled initial expanded node ids. */\n  defaultExpandedIds?: string[]\n  /** Controlled selected node id (`null` = none). Pair with `onSelectionChange`. */\n  selectedId?: string | null\n  /** Uncontrolled initial selected node id. */\n  defaultSelectedId?: string | null\n  /** Called whenever the expanded set changes. */\n  onExpandedChange?: (ids: string[]) => void\n  /** Called whenever the selection changes. */\n  onSelectionChange?: (id: string | null) => void\n}\n\n/** Keys the tree handles itself (WAI-ARIA treeview pattern). */\nconst HANDLED_KEYS = new Set([\n  'ArrowDown',\n  'ArrowUp',\n  'ArrowLeft',\n  'ArrowRight',\n  'Home',\n  'End',\n  'Enter',\n  ' ',\n])\n\ninterface TreeItemsProps {\n  nodes: FileTreeNode[]\n  depth: number\n  api: FileTreeAPI\n  state: FileTreeState\n  firstVisibleId: string | undefined\n}\n\nfunction TreeItems({ nodes, depth, api, state, firstVisibleId }: TreeItemsProps) {\n  return (\n    <>\n      {nodes.map((node) => {\n        const hasChildren = Boolean(node.children && node.children.length > 0)\n        const isExpanded = hasChildren && state.expandedIds.includes(node.id)\n        const isSelected = state.selectedId === node.id\n        const item: VisibleTreeItem = {\n          node,\n          parentId: null, // unused by getItemAria; the core tracks real parents\n          depth,\n          hasChildren,\n          isExpanded,\n          isSelected,\n          isFocused: state.focusedId === node.id,\n        }\n        const tabbable =\n          state.focusedId === node.id || (state.focusedId === null && node.id === firstVisibleId)\n\n        return (\n          <li key={node.id} role=\"none\" className=\"list-none\">\n            <div\n              {...api.getItemAria(item)}\n              tabIndex={tabbable ? 0 : -1}\n              data-disabled={node.disabled ? 'true' : undefined}\n              style={{ paddingLeft: `${(depth - 1) * 12}px` }}\n              className={fileTreeItemVariants({ selected: isSelected ? 'true' : 'false' })}\n              onClick={() => {\n                api.focus(node.id)\n                api.select(node.id)\n                if (hasChildren) api.toggle(node.id)\n              }}\n              onFocus={() => api.focus(node.id)}\n            >\n              <span aria-hidden=\"true\" className={fileTreeGlyphClass}>\n                {hasChildren ? (isExpanded ? '▾' : '▸') : '·'}\n              </span>\n              <span className=\"truncate\">{node.label}</span>\n            </div>\n            {hasChildren && isExpanded && (\n              <ul role=\"group\" className=\"m-0 p-0\">\n                <TreeItems\n                  nodes={node.children!}\n                  depth={depth + 1}\n                  api={api}\n                  state={state}\n                  firstVisibleId={firstVisibleId}\n                />\n              </ul>\n            )}\n          </li>\n        )\n      })}\n    </>\n  )\n}\n\n/**\n * FileTree — a hierarchical file/folder tree view.\n *\n * Renders `role=\"tree\"` with nested `role=\"group\"`/`role=\"treeitem\"` rows,\n * expand/collapse, single selection, roving tabindex, and WAI-ARIA treeview\n * keyboard navigation. All behavior comes from the headless\n * `@refraction-ui/file-tree` core; supports controlled (`expandedIds` /\n * `selectedId`) and uncontrolled usage.\n */\nexport const FileTree = React.forwardRef<HTMLDivElement, FileTreeProps>(\n  function FileTree(\n    {\n      className,\n      nodes = [],\n      expandedIds: controlledExpandedIds,\n      defaultExpandedIds,\n      selectedId: controlledSelectedId,\n      defaultSelectedId,\n      onExpandedChange,\n      onSelectionChange,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref,\n  ) {\n    // The headless core owns expansion/selection/focus; it is created once and\n    // props are synced into it below.\n    const apiRef = React.useRef<FileTreeAPI | null>(null)\n    if (apiRef.current === null) {\n      apiRef.current = createFileTree({\n        nodes,\n        expandedIds: controlledExpandedIds,\n        defaultExpandedIds,\n        selectedId: controlledSelectedId,\n        defaultSelectedId,\n        onExpandedChange,\n        onSelectionChange,\n        'aria-label': ariaLabel,\n      })\n    }\n    const api = apiRef.current\n\n    const state = React.useSyncExternalStore(api.subscribe, api.getState, api.getState)\n\n    React.useEffect(() => {\n      api.setOptions({ onExpandedChange, onSelectionChange, 'aria-label': ariaLabel })\n    })\n    React.useEffect(() => {\n      api.setNodes(nodes)\n    }, [api, nodes])\n    React.useEffect(() => {\n      if (controlledExpandedIds !== undefined) api.setExpandedIds(controlledExpandedIds)\n    }, [api, controlledExpandedIds])\n    React.useEffect(() => {\n      if (controlledSelectedId !== undefined) api.setSelectedId(controlledSelectedId)\n    }, [api, controlledSelectedId])\n\n    const firstVisibleId = api.getVisibleItems()[0]?.node.id\n\n    return (\n      <div ref={ref} className={cn(fileTreeVariants(), className)} {...props}>\n        <ul\n          {...api.getTreeAria()}\n          className=\"m-0 p-0\"\n          onKeyDown={(event) => {\n            if (!HANDLED_KEYS.has(event.key)) return\n            event.preventDefault()\n            api.handleKey(event.key)\n          }}\n        >\n          <TreeItems\n            nodes={state.nodes}\n            depth={1}\n            api={api}\n            state={state}\n            firstVisibleId={firstVisibleId}\n          />\n        </ul>\n      </div>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["FileTree"]
+}

package/dist/react-file-upload.js

@@ -0,0 +1,360 @@
+import {
+  cn,
+  cva,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-file-upload/dist/index.js
+import * as React from "react";
+
+// ../file-upload/dist/index.js
+function matchesAccept(fileType, fileName, accept) {
+  if (!accept) return true;
+  const acceptedTypes = accept.split(",").map((t) => t.trim());
+  for (const accepted of acceptedTypes) {
+    if (accepted.startsWith(".")) {
+      if (fileName.toLowerCase().endsWith(accepted.toLowerCase())) return true;
+    } else if (accepted.endsWith("/*")) {
+      const prefix = accepted.slice(0, -2);
+      if (fileType.startsWith(prefix)) return true;
+    } else {
+      if (fileType === accepted) return true;
+    }
+  }
+  return false;
+}
+function formatFileSize(bytes) {
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  const size = bytes / Math.pow(1024, i);
+  return `${size.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+}
+function createFileUpload(props = {}) {
+  const {
+    accept,
+    maxSize,
+    maxFiles,
+    multiple = false,
+    onFilesSelected,
+    onError
+  } = props;
+  let files = [];
+  let isDragging = false;
+  const dropZoneId = generateId("rfr-file-upload-zone");
+  const inputId = generateId("rfr-file-upload-input");
+  const labelId = generateId("rfr-file-upload-label");
+  const fileListId = generateId("rfr-file-upload-list");
+  function addFiles(incoming) {
+    const errors = [];
+    const validFiles = [];
+    const availableSlots = maxFiles ? maxFiles - files.length : Infinity;
+    if (!multiple && incoming.length > 1) {
+      incoming = [incoming[0]];
+    }
+    for (let i = 0; i < incoming.length; i++) {
+      const file = incoming[i];
+      if (validFiles.length >= availableSlots) {
+        errors.push({
+          file: file.name,
+          code: "count",
+          message: `Maximum of ${maxFiles} files allowed`
+        });
+        continue;
+      }
+      if (accept && !matchesAccept(file.type, file.name, accept)) {
+        errors.push({
+          file: file.name,
+          code: "type",
+          message: `File type "${file.type || "unknown"}" is not accepted`
+        });
+        continue;
+      }
+      if (maxSize && file.size > maxSize) {
+        errors.push({
+          file: file.name,
+          code: "size",
+          message: `File size ${formatFileSize(file.size)} exceeds limit of ${formatFileSize(maxSize)}`
+        });
+        continue;
+      }
+      validFiles.push({
+        id: generateId("rfr-file"),
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        progress: 0,
+        status: "pending"
+      });
+    }
+    if (errors.length > 0) {
+      onError?.(errors);
+    }
+    if (validFiles.length > 0) {
+      if (!multiple) {
+        files = validFiles.slice(0, 1);
+      } else {
+        files = [...files, ...validFiles];
+      }
+      onFilesSelected?.(files);
+    }
+  }
+  function removeFile(id) {
+    files = files.filter((f) => f.id !== id);
+  }
+  function updateProgress(id, progress) {
+    files = files.map(
+      (f) => f.id === id ? { ...f, progress: Math.min(100, Math.max(0, progress)) } : f
+    );
+  }
+  function setStatus(id, status, error) {
+    files = files.map(
+      (f) => f.id === id ? { ...f, status, error, progress: status === "complete" ? 100 : f.progress } : f
+    );
+  }
+  const dropZoneProps = {
+    role: "button",
+    "aria-label": "Drop files here or click to upload",
+    id: dropZoneId,
+    tabIndex: 0
+  };
+  const inputProps = {
+    type: "file",
+    id: inputId,
+    accept: accept ?? void 0,
+    multiple,
+    "aria-hidden": true,
+    tabIndex: -1,
+    style: { display: "none" }
+  };
+  const dragHandlers = {
+    onDragEnter() {
+      isDragging = true;
+    },
+    onDragLeave() {
+      isDragging = false;
+    },
+    onDragOver() {
+      isDragging = true;
+    },
+    onDrop() {
+      isDragging = false;
+    }
+  };
+  return {
+    state: {
+      get files() {
+        return files;
+      },
+      get isDragging() {
+        return isDragging;
+      }
+    },
+    addFiles,
+    removeFile,
+    updateProgress,
+    setStatus,
+    dropZoneProps,
+    inputProps,
+    dragHandlers,
+    ids: {
+      dropZone: dropZoneId,
+      input: inputId,
+      label: labelId,
+      fileList: fileListId
+    }
+  };
+}
+var fileUploadDropZoneVariants = cva({
+  base: "flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 text-center transition-colors cursor-pointer",
+  variants: {
+    state: {
+      idle: "border-muted-foreground/25 hover:border-muted-foreground/50",
+      dragging: "border-primary bg-primary/5",
+      disabled: "opacity-50 cursor-not-allowed"
+    }
+  },
+  defaultVariants: {
+    state: "idle"
+  }
+});
+var fileUploadFileListStyles = "mt-4 space-y-2";
+var fileUploadFileItemStyles = "flex items-center gap-3 rounded-md border p-3 text-sm";
+var fileUploadProgressStyles = "h-1.5 w-full rounded-full bg-secondary overflow-hidden";
+var fileUploadProgressBarStyles = "h-full rounded-full bg-primary transition-all duration-300";
+var fileUploadRemoveButtonStyles = "ml-auto text-muted-foreground hover:text-foreground cursor-pointer";
+
+// ../react-file-upload/dist/index.js
+var FileUpload = React.forwardRef(
+  function FileUpload2({ accept, maxSize, maxFiles, multiple = false, onFilesSelected, onError, className, children }, ref) {
+    const [files, setFiles] = React.useState([]);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const api = React.useMemo(
+      () => createFileUpload({
+        accept,
+        maxSize,
+        maxFiles,
+        multiple,
+        onFilesSelected: (newFiles) => {
+          setFiles(newFiles);
+          onFilesSelected?.(newFiles);
+        },
+        onError
+      }),
+      [accept, maxSize, maxFiles, multiple, onFilesSelected, onError]
+    );
+    const handleDragEnter = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(true);
+    };
+    const handleDragLeave = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+    };
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    const handleDrop = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+      const droppedFiles = Array.from(e.dataTransfer.files).map((f) => ({
+        name: f.name,
+        size: f.size,
+        type: f.type
+      }));
+      if (droppedFiles.length > 0) {
+        api.addFiles(droppedFiles);
+      }
+    };
+    const handleInputChange = (e) => {
+      const selectedFiles = Array.from(e.target.files || []).map((f) => ({
+        name: f.name,
+        size: f.size,
+        type: f.type
+      }));
+      if (selectedFiles.length > 0) {
+        api.addFiles(selectedFiles);
+      }
+      e.target.value = "";
+    };
+    const handleRemove = (id) => {
+      setFiles((prev) => prev.filter((f) => f.id !== id));
+      api.removeFile(id);
+    };
+    const handleClick = () => {
+      inputRef.current?.click();
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleClick();
+      }
+    };
+    return React.createElement(
+      "div",
+      { ref, className },
+      // Hidden file input
+      React.createElement("input", {
+        ref: inputRef,
+        ...api.inputProps,
+        onChange: handleInputChange
+      }),
+      // Drop zone
+      React.createElement(
+        "div",
+        {
+          ...api.dropZoneProps,
+          className: fileUploadDropZoneVariants({
+            state: isDragging ? "dragging" : "idle"
+          }),
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          onDragEnter: handleDragEnter,
+          onDragLeave: handleDragLeave,
+          onDragOver: handleDragOver,
+          onDrop: handleDrop
+        },
+        children ?? React.createElement(
+          React.Fragment,
+          null,
+          React.createElement("div", { className: "text-2xl mb-2" }, "\u{1F4C1}"),
+          React.createElement(
+            "p",
+            { className: "text-sm text-muted-foreground" },
+            "Drag & drop files here, or click to select"
+          ),
+          accept && React.createElement(
+            "p",
+            { className: "text-xs text-muted-foreground mt-1" },
+            `Accepted: ${accept}`
+          ),
+          maxSize && React.createElement(
+            "p",
+            { className: "text-xs text-muted-foreground" },
+            `Max size: ${formatFileSize(maxSize)}`
+          )
+        )
+      ),
+      // File list
+      files.length > 0 && React.createElement(
+        "div",
+        { className: fileUploadFileListStyles },
+        files.map(
+          (file) => React.createElement(
+            "div",
+            { key: file.id, className: fileUploadFileItemStyles },
+            React.createElement(
+              "div",
+              { className: "flex-1 min-w-0" },
+              React.createElement("div", { className: "font-medium truncate" }, file.name),
+              React.createElement(
+                "div",
+                { className: "text-xs text-muted-foreground" },
+                formatFileSize(file.size)
+              ),
+              file.status === "uploading" && React.createElement(
+                "div",
+                { className: cn(fileUploadProgressStyles, "mt-1") },
+                React.createElement("div", {
+                  className: fileUploadProgressBarStyles,
+                  style: { width: `${file.progress}%` }
+                })
+              ),
+              file.error && React.createElement(
+                "div",
+                { className: "text-xs text-destructive mt-0.5" },
+                file.error
+              )
+            ),
+            React.createElement(
+              "button",
+              {
+                type: "button",
+                className: fileUploadRemoveButtonStyles,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleRemove(file.id);
+                },
+                "aria-label": `Remove ${file.name}`
+              },
+              "\xD7"
+            )
+          )
+        )
+      )
+    );
+  }
+);
+export {
+  FileUpload,
+  fileUploadDropZoneVariants,
+  fileUploadFileItemStyles,
+  fileUploadFileListStyles,
+  formatFileSize
+};
+//# sourceMappingURL=react-file-upload.js.map

package/dist/react-file-upload.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../file-upload/src/file-upload.ts", "../../file-upload/src/file-upload.styles.ts", "../../react-file-upload/src/file-upload.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\nimport { generateId } from '@refraction-ui/shared'\n\nexport type FileStatus = 'pending' | 'uploading' | 'complete' | 'error'\n\nexport interface FileEntry {\n  /** Unique ID for this file entry */\n  id: string\n  /** Original file name */\n  name: string\n  /** File size in bytes */\n  size: number\n  /** MIME type */\n  type: string\n  /** Upload progress 0-100 */\n  progress: number\n  /** Current status */\n  status: FileStatus\n  /** Error message if status is 'error' */\n  error?: string\n}\n\nexport interface FileUploadProps {\n  /** Accepted file types (e.g., 'image/*,.pdf') */\n  accept?: string\n  /** Max file size in bytes */\n  maxSize?: number\n  /** Max number of files */\n  maxFiles?: number\n  /** Allow multiple file selection */\n  multiple?: boolean\n  /** Callback when files are selected/added */\n  onFilesSelected?: (files: FileEntry[]) => void\n  /** Callback when a validation error occurs */\n  onError?: (errors: FileUploadError[]) => void\n}\n\nexport interface FileUploadError {\n  file: string\n  code: 'type' | 'size' | 'count'\n  message: string\n}\n\nexport interface FileUploadState {\n  files: FileEntry[]\n  isDragging: boolean\n}\n\nexport interface FileUploadAPI {\n  /** Current state */\n  state: FileUploadState\n  /** Add files (validates type, size, count) */\n  addFiles(files: Array<{ name: string; size: number; type: string }>): void\n  /** Remove a file by ID */\n  removeFile(id: string): void\n  /** Update a file's progress */\n  updateProgress(id: string, progress: number): void\n  /** Set a file's status */\n  setStatus(id: string, status: FileStatus, error?: string): void\n  /** ARIA props for the drop zone */\n  dropZoneProps: Partial<AccessibilityProps> & Record<string, unknown>\n  /** ARIA props for the file input */\n  inputProps: Record<string, unknown>\n  /** Drag event handlers (for headless use) */\n  dragHandlers: {\n    onDragEnter(): void\n    onDragLeave(): void\n    onDragOver(): void\n    onDrop(): void\n  }\n  /** Generated IDs */\n  ids: {\n    dropZone: string\n    input: string\n    label: string\n    fileList: string\n  }\n}\n\nfunction matchesAccept(fileType: string, fileName: string, accept: string): boolean {\n  if (!accept) return true\n  const acceptedTypes = accept.split(',').map((t) => t.trim())\n  for (const accepted of acceptedTypes) {\n    if (accepted.startsWith('.')) {\n      // Extension match\n      if (fileName.toLowerCase().endsWith(accepted.toLowerCase())) return true\n    } else if (accepted.endsWith('/*')) {\n      // Wildcard MIME match (e.g., 'image/*')\n      const prefix = accepted.slice(0, -2)\n      if (fileType.startsWith(prefix)) return true\n    } else {\n      // Exact MIME match\n      if (fileType === accepted) return true\n    }\n  }\n  return false\n}\n\nexport function formatFileSize(bytes: number): string {\n  if (bytes === 0) return '0 B'\n  const units = ['B', 'KB', 'MB', 'GB']\n  const i = Math.floor(Math.log(bytes) / Math.log(1024))\n  const size = bytes / Math.pow(1024, i)\n  return `${size.toFixed(i === 0 ? 0 : 1)} ${units[i]}`\n}\n\nexport function createFileUpload(props: FileUploadProps = {}): FileUploadAPI {\n  const {\n    accept,\n    maxSize,\n    maxFiles,\n    multiple = false,\n    onFilesSelected,\n    onError,\n  } = props\n\n  let files: FileEntry[] = []\n  let isDragging = false\n\n  const dropZoneId = generateId('rfr-file-upload-zone')\n  const inputId = generateId('rfr-file-upload-input')\n  const labelId = generateId('rfr-file-upload-label')\n  const fileListId = generateId('rfr-file-upload-list')\n\n  function addFiles(incoming: Array<{ name: string; size: number; type: string }>): void {\n    const errors: FileUploadError[] = []\n    const validFiles: FileEntry[] = []\n\n    // Check count limit\n    const availableSlots = maxFiles ? maxFiles - files.length : Infinity\n    if (!multiple && incoming.length > 1) {\n      // Only take the first file if not multiple\n      incoming = [incoming[0]]\n    }\n\n    for (let i = 0; i < incoming.length; i++) {\n      const file = incoming[i]\n\n      if (validFiles.length >= availableSlots) {\n        errors.push({\n          file: file.name,\n          code: 'count',\n          message: `Maximum of ${maxFiles} files allowed`,\n        })\n        continue\n      }\n\n      // Validate type\n      if (accept && !matchesAccept(file.type, file.name, accept)) {\n        errors.push({\n          file: file.name,\n          code: 'type',\n          message: `File type \"${file.type || 'unknown'}\" is not accepted`,\n        })\n        continue\n      }\n\n      // Validate size\n      if (maxSize && file.size > maxSize) {\n        errors.push({\n          file: file.name,\n          code: 'size',\n          message: `File size ${formatFileSize(file.size)} exceeds limit of ${formatFileSize(maxSize)}`,\n        })\n        continue\n      }\n\n      validFiles.push({\n        id: generateId('rfr-file'),\n        name: file.name,\n        size: file.size,\n        type: file.type,\n        progress: 0,\n        status: 'pending',\n      })\n    }\n\n    if (errors.length > 0) {\n      onError?.(errors)\n    }\n\n    if (validFiles.length > 0) {\n      if (!multiple) {\n        files = validFiles.slice(0, 1)\n      } else {\n        files = [...files, ...validFiles]\n      }\n      onFilesSelected?.(files)\n    }\n  }\n\n  function removeFile(id: string): void {\n    files = files.filter((f) => f.id !== id)\n  }\n\n  function updateProgress(id: string, progress: number): void {\n    files = files.map((f) =>\n      f.id === id ? { ...f, progress: Math.min(100, Math.max(0, progress)) } : f,\n    )\n  }\n\n  function setStatus(id: string, status: FileStatus, error?: string): void {\n    files = files.map((f) =>\n      f.id === id ? { ...f, status, error, progress: status === 'complete' ? 100 : f.progress } : f,\n    )\n  }\n\n  const dropZoneProps: Partial<AccessibilityProps> & Record<string, unknown> = {\n    role: 'button',\n    'aria-label': 'Drop files here or click to upload',\n    id: dropZoneId,\n    tabIndex: 0,\n  }\n\n  const inputProps: Record<string, unknown> = {\n    type: 'file',\n    id: inputId,\n    accept: accept ?? undefined,\n    multiple,\n    'aria-hidden': true,\n    tabIndex: -1,\n    style: { display: 'none' },\n  }\n\n  const dragHandlers = {\n    onDragEnter() {\n      isDragging = true\n    },\n    onDragLeave() {\n      isDragging = false\n    },\n    onDragOver() {\n      isDragging = true\n    },\n    onDrop() {\n      isDragging = false\n    },\n  }\n\n  return {\n    state: {\n      get files() { return files },\n      get isDragging() { return isDragging },\n    },\n    addFiles,\n    removeFile,\n    updateProgress,\n    setStatus,\n    dropZoneProps,\n    inputProps,\n    dragHandlers,\n    ids: {\n      dropZone: dropZoneId,\n      input: inputId,\n      label: labelId,\n      fileList: fileListId,\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const fileUploadDropZoneVariants = cva({\n  base: 'flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 text-center transition-colors cursor-pointer',\n  variants: {\n    state: {\n      idle: 'border-muted-foreground/25 hover:border-muted-foreground/50',\n      dragging: 'border-primary bg-primary/5',\n      disabled: 'opacity-50 cursor-not-allowed',\n    },\n  },\n  defaultVariants: {\n    state: 'idle',\n  },\n})\n\nexport const fileUploadFileListStyles =\n  'mt-4 space-y-2'\n\nexport const fileUploadFileItemStyles =\n  'flex items-center gap-3 rounded-md border p-3 text-sm'\n\nexport const fileUploadProgressStyles =\n  'h-1.5 w-full rounded-full bg-secondary overflow-hidden'\n\nexport const fileUploadProgressBarStyles =\n  'h-full rounded-full bg-primary transition-all duration-300'\n\nexport const fileUploadRemoveButtonStyles =\n  'ml-auto text-muted-foreground hover:text-foreground cursor-pointer'\n", "import * as React from 'react'\nimport {\n  createFileUpload,\n  formatFileSize,\n  fileUploadDropZoneVariants,\n  fileUploadFileListStyles,\n  fileUploadFileItemStyles,\n  fileUploadProgressStyles,\n  fileUploadProgressBarStyles,\n  fileUploadRemoveButtonStyles,\n  type FileEntry,\n  type FileUploadError,\n} from '@refraction-ui/file-upload'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface FileUploadProps {\n  accept?: string\n  maxSize?: number\n  maxFiles?: number\n  multiple?: boolean\n  onFilesSelected?: (files: FileEntry[]) => void\n  onError?: (errors: FileUploadError[]) => void\n  className?: string\n  children?: React.ReactNode\n}\n\nexport const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(\n  function FileUpload({ accept, maxSize, maxFiles, multiple = false, onFilesSelected, onError, className, children }, ref) {\n  const [files, setFiles] = React.useState<FileEntry[]>([])\n  const [isDragging, setIsDragging] = React.useState(false)\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  const api = React.useMemo(\n    () =>\n      createFileUpload({\n        accept,\n        maxSize,\n        maxFiles,\n        multiple,\n        onFilesSelected: (newFiles) => {\n          setFiles(newFiles)\n          onFilesSelected?.(newFiles)\n        },\n        onError,\n      }),\n    [accept, maxSize, maxFiles, multiple, onFilesSelected, onError],\n  )\n\n  const handleDragEnter = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsDragging(true)\n  }\n\n  const handleDragLeave = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsDragging(false)\n  }\n\n  const handleDragOver = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n  }\n\n  const handleDrop = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsDragging(false)\n    const droppedFiles = Array.from(e.dataTransfer.files).map((f) => ({\n      name: f.name,\n      size: f.size,\n      type: f.type,\n    }))\n    if (droppedFiles.length > 0) {\n      api.addFiles(droppedFiles)\n    }\n  }\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const selectedFiles = Array.from(e.target.files || []).map((f) => ({\n      name: f.name,\n      size: f.size,\n      type: f.type,\n    }))\n    if (selectedFiles.length > 0) {\n      api.addFiles(selectedFiles)\n    }\n    // Reset input so same file can be re-selected\n    e.target.value = ''\n  }\n\n  const handleRemove = (id: string) => {\n    setFiles((prev) => prev.filter((f) => f.id !== id))\n    api.removeFile(id)\n  }\n\n  const handleClick = () => {\n    inputRef.current?.click()\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      handleClick()\n    }\n  }\n\n  return React.createElement(\n    'div',\n    { ref, className },\n    // Hidden file input\n    React.createElement('input', {\n      ref: inputRef,\n      ...api.inputProps,\n      onChange: handleInputChange,\n    }),\n    // Drop zone\n    React.createElement(\n      'div',\n      {\n        ...api.dropZoneProps,\n        className: fileUploadDropZoneVariants({\n          state: isDragging ? 'dragging' : 'idle',\n        }),\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        onDragEnter: handleDragEnter,\n        onDragLeave: handleDragLeave,\n        onDragOver: handleDragOver,\n        onDrop: handleDrop,\n      },\n      children ??\n        React.createElement(\n          React.Fragment,\n          null,\n          React.createElement('div', { className: 'text-2xl mb-2' }, '\\u{1F4C1}'),\n          React.createElement(\n            'p',\n            { className: 'text-sm text-muted-foreground' },\n            'Drag & drop files here, or click to select',\n          ),\n          accept &&\n            React.createElement(\n              'p',\n              { className: 'text-xs text-muted-foreground mt-1' },\n              `Accepted: ${accept}`,\n            ),\n          maxSize &&\n            React.createElement(\n              'p',\n              { className: 'text-xs text-muted-foreground' },\n              `Max size: ${formatFileSize(maxSize)}`,\n            ),\n        ),\n    ),\n    // File list\n    files.length > 0 &&\n      React.createElement(\n        'div',\n        { className: fileUploadFileListStyles },\n        files.map((file) =>\n          React.createElement(\n            'div',\n            { key: file.id, className: fileUploadFileItemStyles },\n            React.createElement(\n              'div',\n              { className: 'flex-1 min-w-0' },\n              React.createElement('div', { className: 'font-medium truncate' }, file.name),\n              React.createElement(\n                'div',\n                { className: 'text-xs text-muted-foreground' },\n                formatFileSize(file.size),\n              ),\n              file.status === 'uploading' &&\n                React.createElement(\n                  'div',\n                  { className: cn(fileUploadProgressStyles, 'mt-1') },\n                  React.createElement('div', {\n                    className: fileUploadProgressBarStyles,\n                    style: { width: `${file.progress}%` },\n                  }),\n                ),\n              file.error &&\n                React.createElement(\n                  'div',\n                  { className: 'text-xs text-destructive mt-0.5' },\n                  file.error,\n                ),\n            ),\n            React.createElement(\n              'button',\n              {\n                type: 'button',\n                className: fileUploadRemoveButtonStyles,\n                onClick: (e: React.MouseEvent) => {\n                  e.stopPropagation()\n                  handleRemove(file.id)\n                },\n                'aria-label': `Remove ${file.name}`,\n              },\n              '\\u00D7',\n            ),\n          ),\n        ),\n      ),\n  )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["FileUpload"]
+}

package/dist/react-floating-reactions.js

@@ -0,0 +1,124 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-floating-reactions/dist/index.js
+import * as React from "react";
+
+// ../floating-reactions/dist/index.js
+var REACTION_LIFETIME_MS = 3e3;
+function laneOffsetPercent(lane = 0, lanes = 5) {
+  if (lanes <= 0) return 50;
+  const clamped = Math.max(0, Math.min(lane, lanes - 1));
+  const step = 100 / lanes;
+  return step * clamped + step / 2;
+}
+function createFloatingReactions() {
+  const ariaProps = {
+    role: "status",
+    "aria-live": "polite",
+    "aria-label": "Reactions"
+  };
+  const dataAttributes = {
+    "data-component": "floating-reactions"
+  };
+  return { ariaProps, dataAttributes };
+}
+var floatingReactionsVariants = cva({
+  base: "absolute inset-0 pointer-events-none overflow-hidden",
+  variants: {
+    /**
+     * Whether the overlay is currently active (has reactions). The parent may
+     * toggle visibility, but we keep the node mounted to preserve live-region
+     * semantics.
+     */
+    active: {
+      true: "",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    active: "false"
+  }
+});
+var floatingReactionItemClass = [
+  "absolute bottom-4",
+  "text-3xl leading-none select-none",
+  "animate-[float-up_3s_ease-out_forwards]"
+].join(" ");
+var floatingReactionLabelClass = "sr-only";
+
+// ../react-floating-reactions/dist/index.js
+import { jsx, jsxs } from "react/jsx-runtime";
+var FloatingReactions = React.forwardRef(function FloatingReactions2({ reactions, lanes = 5, className, ...props }, ref) {
+  const { ariaProps, dataAttributes } = createFloatingReactions();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(floatingReactionsVariants({ active: reactions.length > 0 ? "true" : "false" }), className),
+      ...ariaProps,
+      ...dataAttributes,
+      ...props,
+      children: reactions.map((reaction) => {
+        const left = laneOffsetPercent(reaction.lane ?? 0, lanes);
+        return /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: floatingReactionItemClass,
+            style: { left: `${left}%` },
+            "aria-hidden": "true",
+            children: [
+              reaction.emoji,
+              /* @__PURE__ */ jsx("span", { className: floatingReactionLabelClass, children: reaction.emoji })
+            ]
+          },
+          reaction.id
+        );
+      })
+    }
+  );
+});
+function ReactionBurst({ emoji, lane = 0, lanes = 5 }) {
+  const left = laneOffsetPercent(lane, lanes);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: floatingReactionItemClass,
+      style: { left: `${left}%` },
+      "aria-hidden": "true",
+      children: [
+        emoji,
+        /* @__PURE__ */ jsx("span", { className: floatingReactionLabelClass, children: emoji })
+      ]
+    }
+  );
+}
+function useFloatingReactions() {
+  const [reactions, setReactions] = React.useState([]);
+  const counter = React.useRef(0);
+  const emit = React.useCallback(
+    (emoji, options = {}) => {
+      counter.current += 1;
+      const id = options.id ?? `fr-${counter.current}`;
+      const lane = options.lane;
+      const reaction = { id, emoji, lane };
+      setReactions((prev) => [...prev, reaction]);
+      setTimeout(() => {
+        setReactions((prev) => prev.filter((r) => r.id !== id));
+      }, REACTION_LIFETIME_MS);
+    },
+    []
+  );
+  const clear = React.useCallback(() => {
+    setReactions([]);
+  }, []);
+  return { reactions, emit, clear };
+}
+export {
+  FloatingReactions,
+  ReactionBurst,
+  useFloatingReactions
+};
+//# sourceMappingURL=react-floating-reactions.js.map

package/dist/react-floating-reactions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../floating-reactions/src/floating-reactions.ts", "../../floating-reactions/src/floating-reactions.styles.ts", "../../react-floating-reactions/src/floating-reactions.tsx"],
+  "sourcesContent": ["/**\n * Headless core for floating emoji reactions.\n *\n * An emoji burst overlay where reactions animate upward and fade — distinct\n * from the static reaction-bar (which shows counts). This module is JSX-free\n * and framework-agnostic; adapters consume it and manage timing with\n * REACTION_LIFETIME_MS.\n */\n\n/** A single transient reaction displayed in the overlay. */\nexport interface FloatingReaction {\n  /** Stable unique id assigned by the adapter (used as React key / tracker). */\n  id: string\n  /** The emoji character(s) to display, e.g. '👋' or '❤️'. */\n  emoji: string\n  /**\n   * Horizontal offset bucket (0-indexed). Adapters use laneOffsetPercent() to\n   * convert this into a CSS left % so multiple reactions spread across the\n   * overlay rather than stacking.\n   */\n  lane?: number\n}\n\n/**\n * How long (ms) a floating reaction should live before the adapter removes it.\n * Use this constant in adapters to drive setTimeout-based auto-expiry so the\n * value stays in sync with the CSS animation duration.\n */\nexport const REACTION_LIFETIME_MS = 3000\n\n/**\n * Compute the horizontal left-offset percentage for a given lane bucket.\n *\n * Pure and deterministic — safe to call in tests and SSR.\n *\n * @param lane  Zero-indexed lane number (clamped to [0, lanes-1]).\n * @param lanes Total number of lanes (default 5).\n * @returns A percentage value in [0, 100].\n *\n * @example\n * laneOffsetPercent(0, 5) // 10\n * laneOffsetPercent(2, 5) // 50\n * laneOffsetPercent(4, 5) // 90\n */\nexport function laneOffsetPercent(lane = 0, lanes = 5): number {\n  if (lanes <= 0) return 50\n  const clamped = Math.max(0, Math.min(lane, lanes - 1))\n  // Divide [0,100] into `lanes` equal buckets and return the centre of each.\n  const step = 100 / lanes\n  return step * clamped + step / 2\n}\n\nexport interface FloatingReactionsAriaProps {\n  role: string\n  'aria-live': 'polite' | 'assertive' | 'off'\n  'aria-label': string\n}\n\nexport interface FloatingReactionsAPI {\n  /** ARIA attributes to spread on the overlay container. */\n  ariaProps: FloatingReactionsAriaProps\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build the framework-agnostic accessibility and data props for the overlay\n * container.\n *\n * The overlay is a `role=\"status\"` live region so screen readers announce\n * incoming reactions without interrupting the user (polite).\n */\nexport function createFloatingReactions(): FloatingReactionsAPI {\n  const ariaProps: FloatingReactionsAriaProps = {\n    role: 'status',\n    'aria-live': 'polite',\n    'aria-label': 'Reactions',\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-component': 'floating-reactions',\n  }\n\n  return { ariaProps, dataAttributes }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Overlay container — fills the parent with absolute positioning so reactions\n * float over content. pointer-events-none keeps the overlay non-interactive;\n * overflow-hidden clips reactions that drift outside the bounds.\n */\nexport const floatingReactionsVariants = cva({\n  base: 'absolute inset-0 pointer-events-none overflow-hidden',\n  variants: {\n    /**\n     * Whether the overlay is currently active (has reactions). The parent may\n     * toggle visibility, but we keep the node mounted to preserve live-region\n     * semantics.\n     */\n    active: {\n      true: '',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    active: 'false',\n  },\n})\n\n/**\n * A single floating reaction item.\n *\n * The float-up animation is driven by the class\n * `animate-[float-up_3s_ease-out_forwards]`. Consumers must supply the\n * `@keyframes float-up` rule in their global CSS or Tailwind config:\n *\n * ```css\n * @keyframes float-up {\n *   0%   { transform: translateY(0);    opacity: 1; }\n *   80%  { opacity: 1; }\n *   100% { transform: translateY(-80%); opacity: 0; }\n * }\n * ```\n *\n * Without the keyframe the item will still render in place and fade on removal\n * (graceful degradation).\n */\nexport const floatingReactionItemClass = [\n  'absolute bottom-4',\n  'text-3xl leading-none select-none',\n  'animate-[float-up_3s_ease-out_forwards]',\n].join(' ')\n\n/**\n * Accessible label node for the reaction — visually hidden so screen readers\n * read the emoji description once and don't repeat the decorative glyph.\n */\nexport const floatingReactionLabelClass = 'sr-only'\n", "import * as React from 'react'\nimport {\n  createFloatingReactions,\n  laneOffsetPercent,\n  REACTION_LIFETIME_MS,\n  floatingReactionsVariants,\n  floatingReactionItemClass,\n  floatingReactionLabelClass,\n  type FloatingReaction,\n} from '@refraction-ui/floating-reactions'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { FloatingReaction }\n\nexport interface FloatingReactionsProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {\n  /**\n   * Controlled list of reactions currently visible in the overlay. The parent\n   * is responsible for adding items and removing them after REACTION_LIFETIME_MS\n   * (or use the useFloatingReactions hook which handles this automatically).\n   */\n  reactions: FloatingReaction[]\n  /**\n   * Total number of horizontal lane buckets used to spread reactions.\n   * @default 5\n   */\n  lanes?: number\n}\n\n/**\n * FloatingReactions — a controlled overlay that renders transient emoji\n * reactions floating upward. Intended to be positioned absolutely over a\n * meeting/video surface.\n *\n * - Reactions animate upward and fade via `animate-[float-up_3s_ease-out_forwards]`.\n *   Consumers must supply the `@keyframes float-up` rule (see\n *   `floatingReactionItemClass` in the core styles for the recommended keyframe).\n * - The overlay is `pointer-events-none` so it never blocks interaction.\n * - role=\"status\" aria-live=\"polite\" announces new reactions to screen readers.\n */\nexport const FloatingReactions = React.forwardRef<\n  HTMLDivElement,\n  FloatingReactionsProps\n>(function FloatingReactions({ reactions, lanes = 5, className, ...props }, ref) {\n  const { ariaProps, dataAttributes } = createFloatingReactions()\n\n  return (\n    <div\n      ref={ref}\n      className={cn(floatingReactionsVariants({ active: reactions.length > 0 ? 'true' : 'false' }), className)}\n      {...ariaProps}\n      {...dataAttributes}\n      {...props}\n    >\n      {reactions.map((reaction) => {\n        const left = laneOffsetPercent(reaction.lane ?? 0, lanes)\n        return (\n          <span\n            key={reaction.id}\n            className={floatingReactionItemClass}\n            style={{ left: `${left}%` }}\n            aria-hidden=\"true\"\n          >\n            {reaction.emoji}\n            <span className={floatingReactionLabelClass}>{reaction.emoji}</span>\n          </span>\n        )\n      })}\n    </div>\n  )\n})\n\n// ---------------------------------------------------------------------------\n// ReactionBurst — convenience alias for a single burst item (for story use).\n// ---------------------------------------------------------------------------\n\nexport interface ReactionBurstProps {\n  emoji: string\n  lane?: number\n  lanes?: number\n}\n\n/**\n * ReactionBurst renders a single emoji at the specified lane offset — useful\n * for static demos or Storybook stories showing a specific burst position.\n */\nexport function ReactionBurst({ emoji, lane = 0, lanes = 5 }: ReactionBurstProps) {\n  const left = laneOffsetPercent(lane, lanes)\n  return (\n    <span\n      className={floatingReactionItemClass}\n      style={{ left: `${left}%` }}\n      aria-hidden=\"true\"\n    >\n      {emoji}\n      <span className={floatingReactionLabelClass}>{emoji}</span>\n    </span>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// useFloatingReactions — manages the list with auto-expiry.\n// ---------------------------------------------------------------------------\n\nexport interface UseFloatingReactionsResult {\n  reactions: FloatingReaction[]\n  /**\n   * Add an emoji reaction. An auto-incrementing id (not Math.random) is\n   * generated internally unless you pass one explicitly.\n   */\n  emit: (emoji: string, options?: { id?: string; lane?: number }) => void\n  /** Remove all current reactions immediately. */\n  clear: () => void\n}\n\n/**\n * Manages a list of FloatingReaction items with automatic expiry after\n * REACTION_LIFETIME_MS. IDs use an incrementing ref counter — no Math.random.\n *\n * @example\n * const { reactions, emit } = useFloatingReactions()\n * // <FloatingReactions reactions={reactions} />\n * // <button onClick={() => emit('👋')}>Wave</button>\n */\nexport function useFloatingReactions(): UseFloatingReactionsResult {\n  const [reactions, setReactions] = React.useState<FloatingReaction[]>([])\n  const counter = React.useRef(0)\n\n  const emit = React.useCallback(\n    (emoji: string, options: { id?: string; lane?: number } = {}) => {\n      counter.current += 1\n      const id = options.id ?? `fr-${counter.current}`\n      const lane = options.lane\n\n      const reaction: FloatingReaction = { id, emoji, lane }\n      setReactions((prev) => [...prev, reaction])\n\n      setTimeout(() => {\n        setReactions((prev) => prev.filter((r) => r.id !== id))\n      }, REACTION_LIFETIME_MS)\n    },\n    [],\n  )\n\n  const clear = React.useCallback(() => {\n    setReactions([])\n  }, [])\n\n  return { reactions, emit, clear }\n}\n"],
+  "mappings": ";;;;;;;;;AA4BO,IAAM,uBAAuB;AAgB7B,SAAS,kBAAkB,OAAO,GAAG,QAAQ,GAAW;AAC7D,MAAI,SAAS,EAAG,QAAO;AACvB,QAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,QAAQ,CAAC,CAAC;AAErD,QAAM,OAAO,MAAM;AACnB,SAAO,OAAO,UAAU,OAAO;AACjC;AAsBO,SAAS,0BAAgD;AAC9D,QAAM,YAAwC;IAC5C,MAAM;IACN,aAAa;IACb,cAAc;EAAA;AAGhB,QAAM,iBAAyC;IAC7C,kBAAkB;EAAA;AAGpB,SAAO,EAAE,WAAW,eAAA;AACtB;AC7EO,IAAM,4BAA4B,IAAI;EAC3C,MAAM;EACN,UAAU;;;;;;IAMR,QAAQ;MACN,MAAM;MACN,OAAO;IAAA;EACT;EAEF,iBAAiB;IACf,QAAQ;EAAA;AAEZ,CAAC;AAoBM,IAAM,4BAA4B;EACvC;EACA;EACA;AACF,EAAE,KAAK,GAAG;AAMH,IAAM,6BAA6B;;;;ACbnC,IAAM,oBAA0B,iBAGrC,SAASA,mBAAkB,EAAE,WAAW,QAAQ,GAAG,WAAW,GAAG,MAAA,GAAS,KAAK;AAC/E,QAAM,EAAE,WAAW,eAAA,IAAmB,wBAAA;AAEtC,SACE;IAAC;IAAA;MACC;MACA,WAAW,GAAG,0BAA0B,EAAE,QAAQ,UAAU,SAAS,IAAI,SAAS,QAAA,CAAS,GAAG,SAAS;MACtG,GAAG;MACH,GAAG;MACH,GAAG;MAEH,UAAA,UAAU,IAAI,CAAC,aAAa;AAC3B,cAAM,OAAO,kBAAkB,SAAS,QAAQ,GAAG,KAAK;AACxD,eACE;UAAC;UAAA;YAEC,WAAW;YACX,OAAO,EAAE,MAAM,GAAG,IAAI,IAAA;YACtB,eAAY;YAEX,UAAA;cAAA,SAAS;cACV,oBAAC,QAAA,EAAK,WAAW,4BAA6B,UAAA,SAAS,MAAA,CAAM;YAAA;UAAA;UANxD,SAAS;QAAA;MASpB,CAAC;IAAA;EAAA;AAGP,CAAC;AAgBM,SAAS,cAAc,EAAE,OAAO,OAAO,GAAG,QAAQ,EAAA,GAAyB;AAChF,QAAM,OAAO,kBAAkB,MAAM,KAAK;AAC1C,SACE;IAAC;IAAA;MACC,WAAW;MACX,OAAO,EAAE,MAAM,GAAG,IAAI,IAAA;MACtB,eAAY;MAEX,UAAA;QAAA;QACD,oBAAC,QAAA,EAAK,WAAW,4BAA6B,UAAA,MAAA,CAAM;MAAA;IAAA;EAAA;AAG1D;AA0BO,SAAS,uBAAmD;AACjE,QAAM,CAAC,WAAW,YAAY,IAAU,eAA6B,CAAA,CAAE;AACvE,QAAM,UAAgB,aAAO,CAAC;AAE9B,QAAM,OAAa;IACjB,CAAC,OAAe,UAA0C,CAAA,MAAO;AAC/D,cAAQ,WAAW;AACnB,YAAM,KAAK,QAAQ,MAAM,MAAM,QAAQ,OAAO;AAC9C,YAAM,OAAO,QAAQ;AAErB,YAAM,WAA6B,EAAE,IAAI,OAAO,KAAA;AAChD,mBAAa,CAAC,SAAS,CAAC,GAAG,MAAM,QAAQ,CAAC;AAE1C,iBAAW,MAAM;AACf,qBAAa,CAAC,SAAS,KAAK,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC;MACxD,GAAG,oBAAoB;IACzB;IACA,CAAA;EAAC;AAGH,QAAM,QAAc,kBAAY,MAAM;AACpC,iBAAa,CAAA,CAAE;EACjB,GAAG,CAAA,CAAE;AAEL,SAAO,EAAE,WAAW,MAAM,MAAA;AAC5B;",
+  "names": ["FloatingReactions"]
+}