@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-kanban-board.js

@@ -0,0 +1,198 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-kanban-board/dist/index.js
+import * as React from "react";
+
+// ../kanban-board/dist/index.js
+function createKanbanBoard() {
+  return {
+    ariaProps: {
+      role: "group",
+      "aria-label": "Board"
+    },
+    dataAttributes: {
+      "data-component": "kanban-board"
+    }
+  };
+}
+function cardsByColumn(cards, getColumnId, columns) {
+  const map = /* @__PURE__ */ new Map();
+  for (const col of columns) {
+    map.set(col.id, []);
+  }
+  for (const card of cards) {
+    const colId = getColumnId(card);
+    const bucket = map.get(colId);
+    if (bucket !== void 0) {
+      bucket.push(card);
+    }
+  }
+  return map;
+}
+function visibleAndOverflow(cards, cap = 5) {
+  if (cards.length <= cap) {
+    return { visible: cards, overflow: 0 };
+  }
+  return { visible: cards.slice(0, cap), overflow: cards.length - cap };
+}
+var kanbanBoardVariants = cva({
+  base: "flex flex-row gap-4 overflow-x-auto pb-4",
+  variants: {},
+  defaultVariants: {}
+});
+var kanbanColumnVariants = cva({
+  base: "flex flex-col min-w-[260px] max-w-[300px] flex-shrink-0 rounded-xl bg-muted/40",
+  variants: {},
+  defaultVariants: {}
+});
+var kanbanColumnHeaderClass = "flex items-center gap-2 px-4 pt-4 pb-2";
+var kanbanColumnTitleClass = "flex-1 text-sm font-semibold text-foreground truncate";
+var kanbanColumnCountClass = "ml-auto inline-flex items-center justify-center rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground";
+var kanbanAccentBarClass = "h-0.5 w-full";
+var kanbanNoteBarClass = "mx-4 mb-2 rounded-md bg-muted px-3 py-1.5 text-xs text-muted-foreground";
+var kanbanColumnBodyClass = "flex flex-col gap-2 px-3 pb-3";
+var kanbanOverflowButtonClass = [
+  "mt-1 w-full rounded-lg border border-dashed border-border",
+  "py-1.5 text-center text-xs text-muted-foreground",
+  "transition-colors hover:bg-muted hover:text-foreground",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+].join(" ");
+var kanbanCardVariants = cva({
+  base: "rounded-lg border border-border bg-card p-3 text-sm text-foreground",
+  variants: {
+    clickable: {
+      true: "cursor-pointer transition-colors hover:bg-muted/60",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    clickable: "false"
+  }
+});
+
+// ../react-kanban-board/dist/index.js
+import { jsx, jsxs } from "react/jsx-runtime";
+var KanbanCard = React.forwardRef(
+  function KanbanCard2({ accent, clickable = false, className, style, children, ...props }, ref) {
+    const accentStyle = accent ? { borderTopColor: accent, borderTopWidth: "2px", ...style } : style ?? {};
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          kanbanCardVariants({ clickable: clickable ? "true" : "false" }),
+          className
+        ),
+        style: accentStyle,
+        ...props,
+        children
+      }
+    );
+  }
+);
+var KanbanColumn = React.forwardRef(
+  function KanbanColumn2({ def, count, className, children, style, ...props }, ref) {
+    const derivedCount = count !== void 0 ? count : React.Children.count(children);
+    const colStyle = def.accent ? { "--kanban-accent": def.accent, ...style } : style ?? {};
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(kanbanColumnVariants(), className),
+        style: colStyle,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: kanbanColumnHeaderClass, children: [
+            /* @__PURE__ */ jsx("span", { className: kanbanColumnTitleClass, children: def.title }),
+            /* @__PURE__ */ jsx("span", { className: kanbanColumnCountClass, children: derivedCount })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: kanbanAccentBarClass,
+              style: def.accent ? { backgroundColor: "var(--kanban-accent)" } : { backgroundColor: "transparent" },
+              "aria-hidden": "true"
+            }
+          ),
+          def.note && /* @__PURE__ */ jsx("p", { className: kanbanNoteBarClass, children: def.note }),
+          /* @__PURE__ */ jsx("div", { className: kanbanColumnBodyClass, children })
+        ]
+      }
+    );
+  }
+);
+function KanbanBoard({
+  columns,
+  cards,
+  getCardColumnId,
+  getCardKey,
+  renderCard,
+  cardCap = 5,
+  onCardClick: _onCardClick,
+  columnHeader,
+  onShowMore,
+  className,
+  ...props
+}) {
+  const { ariaProps, dataAttributes } = createKanbanBoard();
+  const buckets = cardsByColumn(cards, getCardColumnId, columns);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(kanbanBoardVariants(), className),
+      ...ariaProps,
+      ...dataAttributes,
+      ...props,
+      children: columns.map((def) => {
+        const colCards = buckets.get(def.id) ?? [];
+        const { visible, overflow } = visibleAndOverflow(colCards, cardCap);
+        const count = colCards.length;
+        const header = columnHeader ? columnHeader(def, count) : null;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: kanbanColumnVariants(),
+            style: def.accent ? { "--kanban-accent": def.accent } : void 0,
+            children: [
+              header ?? /* @__PURE__ */ jsxs("div", { className: kanbanColumnHeaderClass, children: [
+                /* @__PURE__ */ jsx("span", { className: kanbanColumnTitleClass, children: def.title }),
+                /* @__PURE__ */ jsx("span", { className: kanbanColumnCountClass, children: count })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: kanbanAccentBarClass,
+                  style: def.accent ? { backgroundColor: "var(--kanban-accent)" } : { backgroundColor: "transparent" },
+                  "aria-hidden": "true"
+                }
+              ),
+              def.note && /* @__PURE__ */ jsx("p", { className: kanbanNoteBarClass, children: def.note }),
+              /* @__PURE__ */ jsxs("div", { className: kanbanColumnBodyClass, children: [
+                visible.map((card) => /* @__PURE__ */ jsx(React.Fragment, { children: renderCard(card, def) }, getCardKey(card))),
+                overflow > 0 && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: kanbanOverflowButtonClass,
+                    onClick: () => onShowMore?.(def.id),
+                    children: `+${overflow} more`
+                  }
+                )
+              ] })
+            ]
+          },
+          def.id
+        );
+      })
+    }
+  );
+}
+export {
+  KanbanBoard,
+  KanbanCard,
+  KanbanColumn
+};
+//# sourceMappingURL=react-kanban-board.js.map

package/dist/react-kanban-board.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../kanban-board/src/kanban-board.ts", "../../kanban-board/src/kanban-board.styles.ts", "../../react-kanban-board/src/kanban-board.tsx"],
+  "sourcesContent": ["/** A single column definition for the Kanban board. */\nexport type KanbanColumnDef = {\n  /** Unique identifier for this column (matches cards' column id). */\n  id: string\n  /** Display title of the column (e.g. stage name). */\n  title: string\n  /** Optional accent color applied via CSS var `--kanban-accent`. */\n  accent?: string\n  /** Optional note or gate description shown below the column header. */\n  note?: string\n}\n\nexport interface KanbanBoardAPI {\n  /** ARIA attributes to spread on the board container. */\n  ariaProps: { role: 'group'; 'aria-label': string }\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build the framework-agnostic board props.\n *\n * Returns `role=\"group\"` with a fixed accessible label and data attributes\n * so adapters can style based on state without inlining logic.\n */\nexport function createKanbanBoard(): KanbanBoardAPI {\n  return {\n    ariaProps: {\n      role: 'group',\n      'aria-label': 'Board',\n    },\n    dataAttributes: {\n      'data-component': 'kanban-board',\n    },\n  }\n}\n\n/**\n * Bucket cards into a Map keyed by column id, preserving column order.\n * Columns that have no cards get an empty array entry so callers can always\n * iterate `columns` and look up their bucket safely.\n *\n * @param cards - All cards to distribute.\n * @param getColumnId - Selector that reads the column id from a card.\n * @param columns - Column definitions (determines output order).\n */\nexport function cardsByColumn<T>(\n  cards: T[],\n  getColumnId: (c: T) => string,\n  columns: KanbanColumnDef[],\n): Map<string, T[]> {\n  const map = new Map<string, T[]>()\n  // Pre-populate every column so empty columns are present.\n  for (const col of columns) {\n    map.set(col.id, [])\n  }\n  for (const card of cards) {\n    const colId = getColumnId(card)\n    const bucket = map.get(colId)\n    if (bucket !== undefined) {\n      bucket.push(card)\n    }\n    // Cards referencing unknown columns are silently dropped.\n  }\n  return map\n}\n\n/**\n * Split a card list into a visible slice and an overflow count.\n *\n * @param cards - Full list of cards in the column.\n * @param cap - Maximum visible cards. Defaults to 5.\n */\nexport function visibleAndOverflow<T>(\n  cards: T[],\n  cap = 5,\n): { visible: T[]; overflow: number } {\n  if (cards.length <= cap) {\n    return { visible: cards, overflow: 0 }\n  }\n  return { visible: cards.slice(0, cap), overflow: cards.length - cap }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/** The outer board: horizontal scroll, flex row, gap between columns. */\nexport const kanbanBoardVariants = cva({\n  base: 'flex flex-row gap-4 overflow-x-auto pb-4',\n  variants: {},\n  defaultVariants: {},\n})\n\n/** A single column: muted background, rounded, fixed minimum width. */\nexport const kanbanColumnVariants = cva({\n  base: 'flex flex-col min-w-[260px] max-w-[300px] flex-shrink-0 rounded-xl bg-muted/40',\n  variants: {},\n  defaultVariants: {},\n})\n\n/** Column header row: icon slot + title + count badge. */\nexport const kanbanColumnHeaderClass =\n  'flex items-center gap-2 px-4 pt-4 pb-2'\n\n/** Column title text. */\nexport const kanbanColumnTitleClass = 'flex-1 text-sm font-semibold text-foreground truncate'\n\n/**\n * Column count badge: a compact pill to the right of the title.\n * Uses muted tokens so it sits quietly against any column accent.\n */\nexport const kanbanColumnCountClass =\n  'ml-auto inline-flex items-center justify-center rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground'\n\n/**\n * Thin accent bar directly below the header.\n * Callers apply `style={{ '--kanban-accent': def.accent }}` on the column\n * element; this bar reads `var(--kanban-accent)` via an inline style.\n * When no accent is supplied the bar is invisible (transparent).\n */\nexport const kanbanAccentBarClass = 'h-0.5 w-full'\n\n/**\n * Note/gate bar shown beneath the accent bar.\n * Displays brief stage notes (e.g. \"Technical screen required\").\n */\nexport const kanbanNoteBarClass =\n  'mx-4 mb-2 rounded-md bg-muted px-3 py-1.5 text-xs text-muted-foreground'\n\n/** Column body: card stack with gap, padded sides and bottom. */\nexport const kanbanColumnBodyClass = 'flex flex-col gap-2 px-3 pb-3'\n\n/**\n * \"+N more\" overflow button.\n * Styled as a subtle full-width ghost button inside the column.\n */\nexport const kanbanOverflowButtonClass = [\n  'mt-1 w-full rounded-lg border border-dashed border-border',\n  'py-1.5 text-center text-xs text-muted-foreground',\n  'transition-colors hover:bg-muted hover:text-foreground',\n  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n].join(' ')\n\n/**\n * Default card surface.\n *\n * Variants:\n * - `clickable: 'true'`  — adds hover treatment for interactive cards.\n * - `clickable: 'false'` — static (default).\n */\nexport const kanbanCardVariants = cva({\n  base: 'rounded-lg border border-border bg-card p-3 text-sm text-foreground',\n  variants: {\n    clickable: {\n      true: 'cursor-pointer transition-colors hover:bg-muted/60',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    clickable: 'false',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createKanbanBoard,\n  cardsByColumn,\n  visibleAndOverflow,\n  kanbanBoardVariants,\n  kanbanColumnVariants,\n  kanbanColumnHeaderClass,\n  kanbanColumnTitleClass,\n  kanbanColumnCountClass,\n  kanbanAccentBarClass,\n  kanbanNoteBarClass,\n  kanbanColumnBodyClass,\n  kanbanOverflowButtonClass,\n  kanbanCardVariants,\n  type KanbanColumnDef,\n} from '@refraction-ui/kanban-board'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { KanbanColumnDef }\n\n// ---------------------------------------------------------------------------\n// KanbanCard\n// ---------------------------------------------------------------------------\n\nexport interface KanbanCardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {\n  /** Optional accent color for a top border treatment (CSS color value). */\n  accent?: string\n  /** Whether the card should show hover/click affordance. */\n  clickable?: boolean\n}\n\n/**\n * KanbanCard — the card surface inside a column.\n *\n * Renders a bordered `bg-card` block. Pass `clickable` for hover treatment and\n * an `onClick` handler for interaction. Children define the card content.\n */\nexport const KanbanCard = React.forwardRef<HTMLDivElement, KanbanCardProps>(\n  function KanbanCard({ accent, clickable = false, className, style, children, ...props }, ref) {\n    const accentStyle: React.CSSProperties = accent\n      ? { borderTopColor: accent, borderTopWidth: '2px', ...style }\n      : (style ?? {})\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          kanbanCardVariants({ clickable: clickable ? 'true' : 'false' }),\n          className,\n        )}\n        style={accentStyle}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\n// ---------------------------------------------------------------------------\n// KanbanColumn\n// ---------------------------------------------------------------------------\n\nexport interface KanbanColumnProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {\n  /** Column definition (id, title, accent, note). */\n  def: KanbanColumnDef\n  /** Card count shown in the header badge. If omitted, derived from children. */\n  count?: number\n}\n\n/**\n * KanbanColumn — a single stage column with a header and optional note bar.\n *\n * Place `<KanbanCard>` elements as children. The count badge is derived from\n * `React.Children.count(children)` when `count` is not provided.\n */\nexport const KanbanColumn = React.forwardRef<HTMLDivElement, KanbanColumnProps>(\n  function KanbanColumn({ def, count, className, children, style, ...props }, ref) {\n    const derivedCount =\n      count !== undefined ? count : React.Children.count(children)\n\n    const colStyle: React.CSSProperties = def.accent\n      ? ({ '--kanban-accent': def.accent, ...style } as React.CSSProperties)\n      : (style ?? {})\n\n    return (\n      <div\n        ref={ref}\n        className={cn(kanbanColumnVariants(), className)}\n        style={colStyle}\n        {...props}\n      >\n        {/* Header */}\n        <div className={kanbanColumnHeaderClass}>\n          <span className={kanbanColumnTitleClass}>{def.title}</span>\n          <span className={kanbanColumnCountClass}>{derivedCount}</span>\n        </div>\n\n        {/* Accent bar */}\n        <div\n          className={kanbanAccentBarClass}\n          style={\n            def.accent\n              ? { backgroundColor: 'var(--kanban-accent)' }\n              : { backgroundColor: 'transparent' }\n          }\n          aria-hidden=\"true\"\n        />\n\n        {/* Optional note/gate bar */}\n        {def.note && (\n          <p className={kanbanNoteBarClass}>{def.note}</p>\n        )}\n\n        {/* Card body */}\n        <div className={kanbanColumnBodyClass}>{children}</div>\n      </div>\n    )\n  },\n)\n\n// ---------------------------------------------------------------------------\n// KanbanBoard\n// ---------------------------------------------------------------------------\n\nexport interface KanbanBoardProps<T>\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content' | 'onSelect' | 'results'> {\n  /** Column definitions (order determines left-to-right render order). */\n  columns: KanbanColumnDef[]\n  /** All cards to distribute into columns. */\n  cards: T[]\n  /** Selector returning the column id for a card. */\n  getCardColumnId: (card: T) => string\n  /** Selector returning a unique React key for a card. */\n  getCardKey: (card: T) => string\n  /** Render a single card inside a column. */\n  renderCard: (card: T, columnDef: KanbanColumnDef) => React.ReactNode\n  /** Max visible cards per column before showing \"+N more\". Defaults to 5. */\n  cardCap?: number\n  /** Called when the user clicks a card (passed through to renderCard context). */\n  onCardClick?: (card: T) => void\n  /** Override the column header render. Receives the def and card count. */\n  columnHeader?: (def: KanbanColumnDef, count: number) => React.ReactNode\n  /** Called when the user taps \"+N more\" for a column. */\n  onShowMore?: (columnId: string) => void\n}\n\n/**\n * KanbanBoard — a generic multi-column stage board.\n *\n * Distributes `cards` into columns defined by `columns` using `getCardColumnId`.\n * Each column caps at `cardCap` (default 5) visible cards and shows a\n * \"+N more\" button for the overflow.\n *\n * @example\n * ```tsx\n * <KanbanBoard\n *   columns={stages}\n *   cards={candidates}\n *   getCardColumnId={(c) => c.stageId}\n *   getCardKey={(c) => c.id}\n *   renderCard={(c) => <KanbanCard clickable>{c.name}</KanbanCard>}\n * />\n * ```\n */\nexport function KanbanBoard<T>({\n  columns,\n  cards,\n  getCardColumnId,\n  getCardKey,\n  renderCard,\n  cardCap = 5,\n  onCardClick: _onCardClick,\n  columnHeader,\n  onShowMore,\n  className,\n  ...props\n}: KanbanBoardProps<T>): React.ReactElement {\n  const { ariaProps, dataAttributes } = createKanbanBoard()\n  const buckets = cardsByColumn(cards, getCardColumnId, columns)\n\n  return (\n    <div\n      className={cn(kanbanBoardVariants(), className)}\n      {...ariaProps}\n      {...dataAttributes}\n      {...props}\n    >\n      {columns.map((def) => {\n        const colCards = buckets.get(def.id) ?? []\n        const { visible, overflow } = visibleAndOverflow(colCards, cardCap)\n        const count = colCards.length\n\n        const header = columnHeader ? columnHeader(def, count) : null\n\n        return (\n          <div\n            key={def.id}\n            className={kanbanColumnVariants()}\n            style={\n              def.accent\n                ? ({ '--kanban-accent': def.accent } as React.CSSProperties)\n                : undefined\n            }\n          >\n            {/* Custom or default header */}\n            {header ?? (\n              <div className={kanbanColumnHeaderClass}>\n                <span className={kanbanColumnTitleClass}>{def.title}</span>\n                <span className={kanbanColumnCountClass}>{count}</span>\n              </div>\n            )}\n\n            {/* Accent bar */}\n            <div\n              className={kanbanAccentBarClass}\n              style={\n                def.accent\n                  ? { backgroundColor: 'var(--kanban-accent)' }\n                  : { backgroundColor: 'transparent' }\n              }\n              aria-hidden=\"true\"\n            />\n\n            {/* Note bar */}\n            {def.note && <p className={kanbanNoteBarClass}>{def.note}</p>}\n\n            {/* Cards */}\n            <div className={kanbanColumnBodyClass}>\n              {visible.map((card) => (\n                <React.Fragment key={getCardKey(card)}>\n                  {renderCard(card, def)}\n                </React.Fragment>\n              ))}\n\n              {overflow > 0 && (\n                <button\n                  type=\"button\"\n                  className={kanbanOverflowButtonClass}\n                  onClick={() => onShowMore?.(def.id)}\n                >\n                  {`+${overflow} more`}\n                </button>\n              )}\n            </div>\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["KanbanCard", "KanbanColumn"]
+}

package/dist/react-keyboard-shortcut.js

@@ -0,0 +1,36 @@
+import {
+  AltHintState,
+  KeyboardShortcut,
+  SANE_DEFAULTS,
+  ShortcutBadge,
+  ShortcutContext,
+  ShortcutHint,
+  ShortcutProvider,
+  ShortcutRegistry,
+  altHintState,
+  formatShortcut,
+  globalShortcutRegistry,
+  shortcutBadgeStyles,
+  shortcutKeyStyles,
+  shortcutSeparatorStyles,
+  useShortcut
+} from "./chunk-WK2IIUFO.js";
+import "./chunk-ZF3OHCGV.js";
+export {
+  AltHintState,
+  KeyboardShortcut,
+  SANE_DEFAULTS,
+  ShortcutBadge,
+  ShortcutContext,
+  ShortcutHint,
+  ShortcutProvider,
+  ShortcutRegistry,
+  altHintState,
+  formatShortcut,
+  globalShortcutRegistry,
+  shortcutBadgeStyles,
+  shortcutKeyStyles,
+  shortcutSeparatorStyles,
+  useShortcut
+};
+//# sourceMappingURL=react-keyboard-shortcut.js.map

package/dist/react-keyboard-shortcut.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/react-language-selector.js

@@ -0,0 +1,311 @@
+import {
+  Keys,
+  cn,
+  createKeyboardHandler,
+  cva,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-language-selector/dist/index.js
+import * as React from "react";
+
+// ../language-selector/dist/index.js
+function createLanguageSelector(props) {
+  const {
+    value: initialValue,
+    onValueChange,
+    options: _options,
+    multiple = false
+  } = props;
+  const contentId = generateId("rfr-lang-sel");
+  let selectedValues = Array.isArray(initialValue) ? [...initialValue] : initialValue ? [initialValue] : [];
+  let isOpen = false;
+  const state = { selectedValues: [...selectedValues], isOpen };
+  function setOpen(value) {
+    isOpen = value;
+    state.isOpen = value;
+  }
+  function toggle(value) {
+    if (multiple) {
+      const index = selectedValues.indexOf(value);
+      if (index >= 0) {
+        selectedValues.splice(index, 1);
+      } else {
+        selectedValues.push(value);
+      }
+      state.selectedValues = [...selectedValues];
+      onValueChange?.([...selectedValues]);
+    } else {
+      selectedValues = [value];
+      state.selectedValues = [value];
+      onValueChange?.(value);
+      setOpen(false);
+    }
+  }
+  const triggerProps = {
+    "aria-expanded": isOpen,
+    "aria-controls": contentId,
+    "aria-haspopup": "listbox",
+    role: "combobox"
+  };
+  const contentProps = {
+    role: "listbox",
+    id: contentId,
+    ...multiple ? { "aria-multiselectable": true } : {}
+  };
+  function getOptionProps(value) {
+    return {
+      role: "option",
+      "aria-selected": selectedValues.includes(value),
+      "data-value": value
+    };
+  }
+  const keyboardHandlers = {
+    [Keys.Escape]: () => {
+      setOpen(false);
+    },
+    [Keys.Enter]: () => {
+      setOpen(!isOpen);
+    },
+    [Keys.Space]: () => {
+      setOpen(!isOpen);
+    },
+    [Keys.ArrowDown]: () => {
+      if (!isOpen) {
+        setOpen(true);
+      }
+    },
+    [Keys.ArrowUp]: () => {
+      if (!isOpen) {
+        setOpen(true);
+      }
+    }
+  };
+  const handleKeyDown = createKeyboardHandler(keyboardHandlers);
+  return {
+    state,
+    triggerProps,
+    contentProps,
+    getOptionProps,
+    toggle,
+    open: () => setOpen(true),
+    close: () => setOpen(false),
+    keyboardHandlers,
+    handleKeyDown
+  };
+}
+var selectorVariants = cva({
+  base: "relative inline-flex items-center justify-between rounded-md border bg-background text-foreground cursor-pointer",
+  variants: {
+    size: {
+      sm: "h-8 text-sm px-2 min-w-[120px]",
+      md: "h-10 text-base px-3 min-w-[160px]",
+      lg: "h-12 text-lg px-4 min-w-[200px]"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var optionVariants = cva({
+  base: "flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-accent",
+  variants: {
+    selected: {
+      true: "bg-accent/50 font-medium",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    selected: "false"
+  }
+});
+
+// ../react-language-selector/dist/index.js
+var LanguageSelectorContext = React.createContext(null);
+var LanguageSelector = React.forwardRef(
+  function LanguageSelector2({ value: controlledValue, onValueChange, options, multiple = false, placeholder = "Select language...", className }, ref) {
+    const initialValues = Array.isArray(controlledValue) ? controlledValue : controlledValue ? [controlledValue] : [];
+    const [selectedValues, setSelectedValues] = React.useState(initialValues);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const containerRef = React.useRef(null);
+    const mergedRef = React.useCallback(
+      (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const handleValueChange = React.useCallback(
+      (val) => {
+        const arr = Array.isArray(val) ? val : [val];
+        setSelectedValues(arr);
+        onValueChange?.(val);
+      },
+      [onValueChange]
+    );
+    const api = React.useMemo(
+      () => createLanguageSelector({
+        value: multiple ? selectedValues : selectedValues[0],
+        onValueChange: handleValueChange,
+        options,
+        multiple
+      }),
+      [selectedValues, handleValueChange, options, multiple]
+    );
+    const handleToggle = React.useCallback(
+      (val) => {
+        if (multiple) {
+          const index = selectedValues.indexOf(val);
+          const next = index >= 0 ? selectedValues.filter((v) => v !== val) : [...selectedValues, val];
+          setSelectedValues(next);
+          onValueChange?.(next);
+        } else {
+          setSelectedValues([val]);
+          onValueChange?.(val);
+          setIsOpen(false);
+        }
+      },
+      [multiple, selectedValues, onValueChange]
+    );
+    const handleTriggerClick = React.useCallback(() => {
+      setIsOpen((prev) => !prev);
+    }, []);
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        if (e.key === "Escape") {
+          setIsOpen(false);
+        } else if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          setIsOpen((prev) => !prev);
+        } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          if (!isOpen) {
+            setIsOpen(true);
+          }
+        }
+      },
+      [isOpen]
+    );
+    React.useEffect(() => {
+      if (!isOpen) return;
+      function handleClickOutside(e) {
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          setIsOpen(false);
+        }
+      }
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isOpen]);
+    const ctx = React.useMemo(
+      () => ({
+        api,
+        isOpen,
+        setOpen: setIsOpen,
+        toggle: handleToggle,
+        options,
+        multiple
+      }),
+      [api, isOpen, handleToggle, options, multiple]
+    );
+    const grouped = React.useMemo(() => {
+      const groups = /* @__PURE__ */ new Map();
+      const ungrouped = [];
+      for (const opt of options) {
+        if (opt.group) {
+          const list = groups.get(opt.group) ?? [];
+          list.push(opt);
+          groups.set(opt.group, list);
+        } else {
+          ungrouped.push(opt);
+        }
+      }
+      return { groups, ungrouped };
+    }, [options]);
+    const displayLabel = selectedValues.length > 0 ? options.filter((o) => selectedValues.includes(o.value)).map((o) => o.label).join(", ") : placeholder;
+    return React.createElement(
+      LanguageSelectorContext.Provider,
+      { value: ctx },
+      React.createElement(
+        "div",
+        { ref: mergedRef, className: cn("rfr-language-selector relative inline-block", className) },
+        // Trigger
+        React.createElement(
+          "button",
+          {
+            type: "button",
+            role: api.triggerProps.role,
+            "aria-expanded": isOpen,
+            "aria-controls": api.triggerProps["aria-controls"],
+            "aria-haspopup": api.triggerProps["aria-haspopup"],
+            className: selectorVariants(),
+            onClick: handleTriggerClick,
+            onKeyDown: handleKeyDown
+          },
+          React.createElement("span", null, displayLabel),
+          React.createElement("span", { "aria-hidden": "true", className: "ml-2" }, "\u25BE")
+        ),
+        // Dropdown
+        isOpen && React.createElement(
+          "ul",
+          {
+            role: api.contentProps.role,
+            id: api.contentProps.id,
+            ...multiple ? { "aria-multiselectable": true } : {},
+            className: "absolute top-full left-0 w-full mt-1 rounded-md border bg-popover text-popover-foreground shadow-md z-50 overflow-auto max-h-60"
+          },
+          ...[...grouped.groups.entries()].map(
+            ([group, opts]) => React.createElement(
+              "li",
+              { key: group, role: "presentation" },
+              React.createElement(
+                "div",
+                { className: "px-3 py-1 text-xs font-semibold text-muted-foreground uppercase" },
+                group
+              ),
+              React.createElement(
+                "ul",
+                { role: "group", "aria-label": group },
+                ...opts.map((opt) => {
+                  const optProps = api.getOptionProps(opt.value);
+                  const isSelected = selectedValues.includes(opt.value);
+                  return React.createElement(
+                    "li",
+                    {
+                      key: opt.value,
+                      ...optProps,
+                      className: optionVariants({ selected: isSelected ? "true" : "false" }),
+                      onClick: () => handleToggle(opt.value)
+                    },
+                    isSelected && React.createElement("span", { "aria-hidden": "true" }, "\u2713"),
+                    React.createElement("span", null, opt.label)
+                  );
+                })
+              )
+            )
+          ),
+          ...grouped.ungrouped.map((opt) => {
+            const optProps = api.getOptionProps(opt.value);
+            const isSelected = selectedValues.includes(opt.value);
+            return React.createElement(
+              "li",
+              {
+                key: opt.value,
+                ...optProps,
+                className: optionVariants({ selected: isSelected ? "true" : "false" }),
+                onClick: () => handleToggle(opt.value)
+              },
+              isSelected && React.createElement("span", { "aria-hidden": "true" }, "\u2713"),
+              React.createElement("span", null, opt.label)
+            );
+          })
+        )
+      )
+    );
+  }
+);
+export {
+  LanguageSelector,
+  optionVariants,
+  selectorVariants
+};
+//# sourceMappingURL=react-language-selector.js.map

package/dist/react-language-selector.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../language-selector/src/language-selector.ts", "../../language-selector/src/language-selector.styles.ts", "../../react-language-selector/src/language-selector.tsx"],
+  "sourcesContent": ["import type { KeyboardHandlerMap } from '@refraction-ui/shared'\nimport { generateId, Keys, createKeyboardHandler } from '@refraction-ui/shared'\n\nexport interface LanguageOption {\n  value: string\n  label: string\n  group?: string\n}\n\nexport interface LanguageSelectorProps {\n  value?: string | string[]\n  onValueChange?: (value: string | string[]) => void\n  options: LanguageOption[]\n  multiple?: boolean\n}\n\nexport interface LanguageSelectorAPI {\n  /** Current state */\n  state: { selectedValues: string[]; isOpen: boolean }\n  /** Props to spread on the trigger element */\n  triggerProps: {\n    'aria-expanded': boolean\n    'aria-controls': string\n    'aria-haspopup': 'listbox'\n    role: 'combobox'\n  }\n  /** Props to spread on the content/dropdown element */\n  contentProps: {\n    role: 'listbox'\n    id: string\n    'aria-multiselectable'?: boolean\n  }\n  /** Get props for an individual option */\n  getOptionProps: (value: string) => {\n    role: 'option'\n    'aria-selected': boolean\n    'data-value': string\n  }\n  /** Toggle an option's selection */\n  toggle: (value: string) => void\n  /** Open the dropdown */\n  open: () => void\n  /** Close the dropdown */\n  close: () => void\n  /** Keyboard handler map */\n  keyboardHandlers: KeyboardHandlerMap\n  /** Pre-built keyboard event handler */\n  handleKeyDown: (event: KeyboardEvent) => void\n}\n\nexport function createLanguageSelector(props: LanguageSelectorProps): LanguageSelectorAPI {\n  const {\n    value: initialValue,\n    onValueChange,\n    options: _options,\n    multiple = false,\n  } = props\n\n  const contentId = generateId('rfr-lang-sel')\n\n  let selectedValues: string[] = Array.isArray(initialValue)\n    ? [...initialValue]\n    : initialValue\n      ? [initialValue]\n      : []\n  let isOpen = false\n\n  const state = { selectedValues: [...selectedValues], isOpen }\n\n  function setOpen(value: boolean) {\n    isOpen = value\n    state.isOpen = value\n  }\n\n  function toggle(value: string) {\n    if (multiple) {\n      const index = selectedValues.indexOf(value)\n      if (index >= 0) {\n        selectedValues.splice(index, 1)\n      } else {\n        selectedValues.push(value)\n      }\n      state.selectedValues = [...selectedValues]\n      onValueChange?.([...selectedValues])\n    } else {\n      selectedValues = [value]\n      state.selectedValues = [value]\n      onValueChange?.(value)\n      setOpen(false)\n    }\n  }\n\n  const triggerProps = {\n    'aria-expanded': isOpen,\n    'aria-controls': contentId,\n    'aria-haspopup': 'listbox' as const,\n    role: 'combobox' as const,\n  }\n\n  const contentProps: LanguageSelectorAPI['contentProps'] = {\n    role: 'listbox' as const,\n    id: contentId,\n    ...(multiple ? { 'aria-multiselectable': true } : {}),\n  }\n\n  function getOptionProps(value: string) {\n    return {\n      role: 'option' as const,\n      'aria-selected': selectedValues.includes(value),\n      'data-value': value,\n    }\n  }\n\n  const keyboardHandlers: KeyboardHandlerMap = {\n    [Keys.Escape]: () => {\n      setOpen(false)\n    },\n    [Keys.Enter]: () => {\n      setOpen(!isOpen)\n    },\n    [Keys.Space]: () => {\n      setOpen(!isOpen)\n    },\n    [Keys.ArrowDown]: () => {\n      if (!isOpen) {\n        setOpen(true)\n      }\n    },\n    [Keys.ArrowUp]: () => {\n      if (!isOpen) {\n        setOpen(true)\n      }\n    },\n  }\n\n  const handleKeyDown = createKeyboardHandler(keyboardHandlers)\n\n  return {\n    state,\n    triggerProps,\n    contentProps,\n    getOptionProps,\n    toggle,\n    open: () => setOpen(true),\n    close: () => setOpen(false),\n    keyboardHandlers,\n    handleKeyDown,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const selectorVariants = cva({\n  base: 'relative inline-flex items-center justify-between rounded-md border bg-background text-foreground cursor-pointer',\n  variants: {\n    size: {\n      sm: 'h-8 text-sm px-2 min-w-[120px]',\n      md: 'h-10 text-base px-3 min-w-[160px]',\n      lg: 'h-12 text-lg px-4 min-w-[200px]',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nexport const optionVariants = cva({\n  base: 'flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-accent',\n  variants: {\n    selected: {\n      true: 'bg-accent/50 font-medium',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    selected: 'false',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createLanguageSelector,\n  selectorVariants,\n  optionVariants,\n  type LanguageSelectorAPI,\n  type LanguageOption,\n} from '@refraction-ui/language-selector'\nimport { cn, devWarn } from '@refraction-ui/shared'\n\n/* ------------------------------------------------------------------ */\n/*  Context                                                            */\n/* ------------------------------------------------------------------ */\n\ninterface LanguageSelectorContextValue {\n  api: LanguageSelectorAPI\n  isOpen: boolean\n  setOpen: (value: boolean) => void\n  toggle: (value: string) => void\n  options: LanguageOption[]\n  multiple: boolean\n}\n\nconst LanguageSelectorContext = React.createContext<LanguageSelectorContextValue | null>(null)\n\nfunction useLanguageSelectorContext(): LanguageSelectorContextValue {\n  const ctx = React.useContext(LanguageSelectorContext)\n  if (!ctx) {\n    devWarn(\n      'react-language-selector/compound-outside-provider',\n      'A LanguageSelector compound component was rendered outside of <LanguageSelector>. Wrap it in <LanguageSelector>.',\n    )\n    throw new Error('LanguageSelector compound components must be used within <LanguageSelector>')\n  }\n  return ctx\n}\n\n/* ------------------------------------------------------------------ */\n/*  LanguageSelector (root component)                                  */\n/* ------------------------------------------------------------------ */\n\nexport interface LanguageSelectorProps {\n  value?: string | string[]\n  onValueChange?: (value: string | string[]) => void\n  options: LanguageOption[]\n  multiple?: boolean\n  placeholder?: string\n  className?: string\n}\n\nexport const LanguageSelector = React.forwardRef<HTMLDivElement, LanguageSelectorProps>(\n  function LanguageSelector({ value: controlledValue, onValueChange, options, multiple = false, placeholder = 'Select language...', className }: LanguageSelectorProps, ref) {\n  const initialValues = Array.isArray(controlledValue)\n    ? controlledValue\n    : controlledValue\n      ? [controlledValue]\n      : []\n\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initialValues)\n  const [isOpen, setIsOpen] = React.useState(false)\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const mergedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      containerRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) ref.current = node\n    },\n    [ref],\n  )\n\n  const handleValueChange = React.useCallback(\n    (val: string | string[]) => {\n      const arr = Array.isArray(val) ? val : [val]\n      setSelectedValues(arr)\n      onValueChange?.(val)\n    },\n    [onValueChange],\n  )\n\n  const api = React.useMemo(\n    () =>\n      createLanguageSelector({\n        value: multiple ? selectedValues : selectedValues[0],\n        onValueChange: handleValueChange,\n        options,\n        multiple,\n      }),\n    [selectedValues, handleValueChange, options, multiple],\n  )\n\n  const handleToggle = React.useCallback(\n    (val: string) => {\n      if (multiple) {\n        const index = selectedValues.indexOf(val)\n        const next = index >= 0\n          ? selectedValues.filter((v) => v !== val)\n          : [...selectedValues, val]\n        setSelectedValues(next)\n        onValueChange?.(next)\n      } else {\n        setSelectedValues([val])\n        onValueChange?.(val)\n        setIsOpen(false)\n      }\n    },\n    [multiple, selectedValues, onValueChange],\n  )\n\n  const handleTriggerClick = React.useCallback(() => {\n    setIsOpen((prev) => !prev)\n  }, [])\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false)\n      } else if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        setIsOpen((prev) => !prev)\n      } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        if (!isOpen) {\n          setIsOpen(true)\n        }\n      }\n    },\n    [isOpen],\n  )\n\n  // Click outside to close\n  React.useEffect(() => {\n    if (!isOpen) return\n    function handleClickOutside(e: MouseEvent) {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        setIsOpen(false)\n      }\n    }\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => document.removeEventListener('mousedown', handleClickOutside)\n  }, [isOpen])\n\n  const ctx = React.useMemo<LanguageSelectorContextValue>(\n    () => ({\n      api,\n      isOpen,\n      setOpen: setIsOpen,\n      toggle: handleToggle,\n      options,\n      multiple,\n    }),\n    [api, isOpen, handleToggle, options, multiple],\n  )\n\n  // Group options\n  const grouped = React.useMemo(() => {\n    const groups = new Map<string, LanguageOption[]>()\n    const ungrouped: LanguageOption[] = []\n    for (const opt of options) {\n      if (opt.group) {\n        const list = groups.get(opt.group) ?? []\n        list.push(opt)\n        groups.set(opt.group, list)\n      } else {\n        ungrouped.push(opt)\n      }\n    }\n    return { groups, ungrouped }\n  }, [options])\n\n  const displayLabel = selectedValues.length > 0\n    ? options\n        .filter((o) => selectedValues.includes(o.value))\n        .map((o) => o.label)\n        .join(', ')\n    : placeholder\n\n  return React.createElement(\n    LanguageSelectorContext.Provider,\n    { value: ctx },\n    React.createElement(\n      'div',\n      { ref: mergedRef, className: cn('rfr-language-selector relative inline-block', className) },\n      // Trigger\n      React.createElement(\n        'button',\n        {\n          type: 'button',\n          role: api.triggerProps.role,\n          'aria-expanded': isOpen,\n          'aria-controls': api.triggerProps['aria-controls'],\n          'aria-haspopup': api.triggerProps['aria-haspopup'],\n          className: selectorVariants(),\n          onClick: handleTriggerClick,\n          onKeyDown: handleKeyDown,\n        },\n        React.createElement('span', null, displayLabel),\n        React.createElement('span', { 'aria-hidden': 'true', className: 'ml-2' }, '\\u25BE'),\n      ),\n      // Dropdown\n      isOpen &&\n        React.createElement(\n          'ul',\n          {\n            role: api.contentProps.role,\n            id: api.contentProps.id,\n            ...(multiple ? { 'aria-multiselectable': true } : {}),\n            className:\n              'absolute top-full left-0 w-full mt-1 rounded-md border bg-popover text-popover-foreground shadow-md z-50 overflow-auto max-h-60',\n          },\n          // Render grouped options\n          ...[...grouped.groups.entries()].map(([group, opts]) =>\n            React.createElement(\n              'li',\n              { key: group, role: 'presentation' },\n              React.createElement(\n                'div',\n                { className: 'px-3 py-1 text-xs font-semibold text-muted-foreground uppercase' },\n                group,\n              ),\n              React.createElement(\n                'ul',\n                { role: 'group', 'aria-label': group },\n                ...opts.map((opt) => {\n                  const optProps = api.getOptionProps(opt.value)\n                  const isSelected = selectedValues.includes(opt.value)\n                  return React.createElement(\n                    'li',\n                    {\n                      key: opt.value,\n                      ...optProps,\n                      className: optionVariants({ selected: isSelected ? 'true' : 'false' }),\n                      onClick: () => handleToggle(opt.value),\n                    },\n                    isSelected && React.createElement('span', { 'aria-hidden': 'true' }, '\\u2713'),\n                    React.createElement('span', null, opt.label),\n                  )\n                }),\n              ),\n            ),\n          ),\n          // Ungrouped options\n          ...grouped.ungrouped.map((opt) => {\n            const optProps = api.getOptionProps(opt.value)\n            const isSelected = selectedValues.includes(opt.value)\n            return React.createElement(\n              'li',\n              {\n                key: opt.value,\n                ...optProps,\n                className: optionVariants({ selected: isSelected ? 'true' : 'false' }),\n                onClick: () => handleToggle(opt.value),\n              },\n              isSelected && React.createElement('span', { 'aria-hidden': 'true' }, '\\u2713'),\n              React.createElement('span', null, opt.label),\n            )\n          }),\n        ),\n    ),\n  )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["LanguageSelector"]
+}