@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-editor-tabs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../editor-tabs/src/editor-tabs.ts", "../../editor-tabs/src/editor-tabs.styles.ts", "../../react-editor-tabs/src/editor-tabs.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\n/** A single tab entry in the editor tab bar. */\nexport interface EditorTabData {\n  /** Unique identifier for the tab. */\n  id: string\n  /** Display label (e.g. \"solution.py\"). */\n  label: string\n  /** Optional icon — a short string like an emoji or a ligature glyph. */\n  icon?: string\n  /** Whether the tab has unsaved changes (shows a dirty dot). */\n  dirty?: boolean\n  /** Whether the tab shows a close button. */\n  closable?: boolean\n}\n\nexport interface EditorTabsProps {\n  /** The id of the currently active tab. */\n  activeId?: string\n}\n\nexport interface EditorTabsAPI {\n  /** ARIA attributes to spread on the tab list container. */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build the framework-agnostic container props for an IDE-style editor tab bar.\n *\n * Returns `role=\"tablist\"` plus data attributes. Each individual tab is\n * `role=\"tab\"` with `aria-selected`; adapters spread ariaProps on the container\n * and render the tabs themselves.\n */\nexport function createEditorTabs(props: EditorTabsProps = {}): EditorTabsAPI {\n  const { activeId } = props\n\n  const ariaProps: Partial<AccessibilityProps> = {\n    role: 'tablist',\n  }\n\n  const dataAttributes: Record<string, string> = {}\n  if (activeId !== undefined) {\n    dataAttributes['data-active-id'] = activeId\n  }\n\n  return { ariaProps, dataAttributes }\n}\n\n/**\n * Roving keyboard navigation for the editor tab bar.\n *\n * Unlike a rating scale, tabs **wrap** at the ends so you can cycle through\n * them continuously — matching standard tab-bar behaviour (similar to\n * segmented-control). Home/End jump to the first/last tab.\n *\n * - ArrowRight → next (wraps to first after last)\n * - ArrowLeft  → previous (wraps to last before first)\n * - Home       → first\n * - End        → last\n */\nexport function getNextTabIndex(\n  currentIndex: number,\n  key: string,\n  count: number,\n): number {\n  if (count <= 0) return currentIndex\n\n  switch (key) {\n    case 'ArrowRight':\n      return (currentIndex + 1) % count\n    case 'ArrowLeft':\n      return (currentIndex - 1 + count) % count\n    case 'Home':\n      return 0\n    case 'End':\n      return count - 1\n    default:\n      return currentIndex\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/** The tab bar container row. */\nexport const editorTabsVariants = cva({\n  base: 'inline-flex items-end gap-0 border-b border-border bg-muted/40 overflow-x-auto',\n  variants: {},\n  defaultVariants: {},\n})\n\n/**\n * A single tab button. The `state` variant switches between active and\n * inactive treatments so adapters never inline these classes.\n */\nexport const editorTabVariants = cva({\n  base: [\n    'group inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium',\n    'border-b-2 transition-colors select-none whitespace-nowrap',\n    'focus-visible:outline-none focus-visible:ring-2',\n    'focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background',\n  ].join(' '),\n  variants: {\n    state: {\n      active: [\n        'border-primary text-foreground bg-background',\n        'border-t border-l border-r border-border border-b-background -mb-px',\n      ].join(' '),\n      inactive: [\n        'border-transparent text-muted-foreground',\n        'hover:text-foreground hover:bg-background/60',\n      ].join(' '),\n    },\n  },\n  defaultVariants: {\n    state: 'inactive',\n  },\n})\n\n/** The dot indicator shown when a tab has unsaved changes. */\nexport const editorTabDirtyDotClass =\n  'size-1.5 rounded-full bg-amber-400 shrink-0'\n\n/** The close button inside a tab. */\nexport const editorTabCloseButtonClass = [\n  'ml-1 inline-flex items-center justify-center rounded-sm size-4 shrink-0',\n  'text-muted-foreground opacity-0 transition-opacity',\n  'group-hover:opacity-100 focus-visible:opacity-100',\n  'hover:bg-accent hover:text-foreground',\n  'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',\n].join(' ')\n\n/** The optional icon slot to the left of the label. */\nexport const editorTabIconClass = 'shrink-0 text-[0.85em] leading-none'\n", "import * as React from 'react'\nimport {\n  createEditorTabs,\n  getNextTabIndex,\n  editorTabsVariants,\n  editorTabVariants,\n  editorTabDirtyDotClass,\n  editorTabCloseButtonClass,\n  editorTabIconClass,\n  type EditorTabData,\n} from '@refraction-ui/editor-tabs'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { EditorTabData }\n\nexport interface EditorTabsProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  /** The list of tab entries to render. */\n  tabs: EditorTabData[]\n  /** The id of the currently active tab (controlled). */\n  activeId: string\n  /** Called when the user clicks or navigates to a tab. */\n  onSelect: (id: string) => void\n  /** Called when the user clicks the close button on a tab. */\n  onClose?: (id: string) => void\n}\n\n/**\n * EditorTabs — an IDE-style open-file tab bar.\n *\n * Renders `role=\"tablist\"`; each tab is `role=\"tab\"` with `aria-selected`.\n * Supports optional icons, dirty-state dots, and close buttons. Keyboard\n * navigation uses wrapping roving tabindex (ArrowLeft/Right, Home/End) via the\n * headless `@refraction-ui/editor-tabs` core helper.\n */\nexport const EditorTabs = React.forwardRef<HTMLDivElement, EditorTabsProps>(\n  function EditorTabs({ tabs, activeId, onSelect, onClose, className, ...props }, ref) {\n    const tabRefs = React.useRef<(HTMLButtonElement | null)[]>([])\n\n    const activeIndex = tabs.findIndex((t) => t.id === activeId)\n    // If nothing is active, make the first tab tabbable.\n    const tabbableIndex = activeIndex === -1 ? 0 : activeIndex\n\n    const handleKeyDown = (\n      event: React.KeyboardEvent<HTMLButtonElement>,\n      index: number,\n    ) => {\n      const next = getNextTabIndex(index, event.key, tabs.length)\n      if (next !== index) {\n        event.preventDefault()\n        onSelect(tabs[next].id)\n        tabRefs.current[next]?.focus()\n      }\n    }\n\n    const api = createEditorTabs({ activeId })\n\n    return (\n      <div\n        ref={ref}\n        className={cn(editorTabsVariants(), className)}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {tabs.map((tab, index) => {\n          const isActive = tab.id === activeId\n          return (\n            <button\n              key={tab.id}\n              ref={(node) => {\n                tabRefs.current[index] = node\n              }}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isActive}\n              aria-controls={`tabpanel-${tab.id}`}\n              id={`tab-${tab.id}`}\n              tabIndex={index === tabbableIndex ? 0 : -1}\n              data-state={isActive ? 'active' : 'inactive'}\n              className={editorTabVariants({ state: isActive ? 'active' : 'inactive' })}\n              onClick={() => onSelect(tab.id)}\n              onKeyDown={(e) => handleKeyDown(e, index)}\n            >\n              {tab.icon && (\n                <span className={editorTabIconClass} aria-hidden=\"true\">\n                  {tab.icon}\n                </span>\n              )}\n              <span>{tab.label}</span>\n              {tab.dirty && (\n                <span\n                  className={editorTabDirtyDotClass}\n                  aria-label=\"unsaved changes\"\n                  role=\"status\"\n                />\n              )}\n              {tab.closable && (\n                <span\n                  role=\"button\"\n                  aria-label={`Close ${tab.label}`}\n                  tabIndex={-1}\n                  className={editorTabCloseButtonClass}\n                  onClick={(e) => {\n                    e.stopPropagation()\n                    onClose?.(tab.id)\n                  }}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.stopPropagation()\n                      onClose?.(tab.id)\n                    }\n                  }}\n                >\n                  ×\n                </span>\n              )}\n            </button>\n          )\n        })}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["EditorTabs"]
+}

package/dist/react-emoji-picker.js

@@ -0,0 +1,238 @@
+import {
+  CATEGORY_LABELS,
+  DEFAULT_TWEMOJI_BASE_URL,
+  EMOJI_CATEGORIES,
+  EMOJI_COUNT_TOTAL,
+  EMOJI_DATA,
+  SHORTCODE_ALIASES,
+  STARTER_STICKER_SET,
+  buildShortcodeMap,
+  createEmojiPicker,
+  emojiPickerCategoryBarStyles,
+  emojiPickerCategoryTabVariants,
+  emojiPickerContainerStyles,
+  emojiPickerEmojiButtonStyles,
+  emojiPickerGridStyles,
+  emojiPickerPanelStyles,
+  emojiPickerSearchStyles,
+  emojiPickerSectionLabelStyles,
+  emojiPickerStickerButtonStyles,
+  getAllEmojis,
+  resolveShortcode,
+  searchEmojis,
+  twemojiAssetUrl,
+  twemojiFilename
+} from "./chunk-533MCMSU.js";
+import {
+  cn
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-emoji-picker/dist/index.js
+import * as React from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+var nativeEmojiRenderer = (emoji) => emoji.emoji;
+function createTwemojiRenderer(baseUrl = DEFAULT_TWEMOJI_BASE_URL) {
+  return (emoji) => /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: twemojiAssetUrl(emoji.emoji, baseUrl),
+      alt: emoji.emoji,
+      draggable: false,
+      loading: "lazy",
+      className: "pointer-events-none h-[1.2em] w-[1.2em] select-none"
+    }
+  );
+}
+var twemojiRenderer = createTwemojiRenderer();
+var defaultStickerRenderer = (sticker) => {
+  if (sticker.kind === "svg") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "block h-full w-full",
+        dangerouslySetInnerHTML: { __html: sticker.source }
+      }
+    );
+  }
+  if (sticker.kind === "image" || /^https?:|^data:/.test(sticker.source)) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: sticker.source,
+        alt: sticker.label,
+        loading: "lazy",
+        draggable: false,
+        className: "pointer-events-none h-full w-full select-none object-contain"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: sticker.label });
+};
+var RECENT_LIMIT = 20;
+var EmojiPicker = React.forwardRef(
+  function EmojiPicker2({ onSelect, onStickerSelect, recentEmojis: initialRecent = [], className, emojiRenderer, twemojiBaseUrl, stickerSets = [STARTER_STICKER_SET], stickerRenderer = defaultStickerRenderer }, ref) {
+    const [search, setSearch] = React.useState("");
+    const [activeCategory, setActiveCategory] = React.useState("smileys");
+    const [mode, setMode] = React.useState("emoji");
+    const [recentEmojis, setRecentEmojis] = React.useState(initialRecent);
+    const renderEmoji = React.useMemo(
+      () => emojiRenderer ?? createTwemojiRenderer(twemojiBaseUrl),
+      [emojiRenderer, twemojiBaseUrl]
+    );
+    const api = React.useMemo(() => createEmojiPicker({ recentEmojis }), [recentEmojis]);
+    const filteredEmojis = React.useMemo(() => {
+      if (search.trim()) return searchEmojis(search);
+      return EMOJI_DATA[activeCategory];
+    }, [search, activeCategory]);
+    const handleSelect = (emoji) => {
+      setRecentEmojis(
+        (prev) => [emoji, ...prev.filter((e) => e.emoji !== emoji.emoji)].slice(0, RECENT_LIMIT)
+      );
+      onSelect?.(emoji);
+    };
+    const handleCategoryClick = (cat) => {
+      setMode("emoji");
+      setActiveCategory(cat);
+      setSearch("");
+    };
+    const hasStickers = stickerSets.length > 0;
+    const showStickerTab = hasStickers && !search;
+    const panelKey = search ? "search" : mode === "sticker" ? "sticker" : activeCategory;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(emojiPickerContainerStyles, className), ...api.ariaProps, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...api.searchInputProps,
+          className: emojiPickerSearchStyles,
+          value: search,
+          onChange: (e) => {
+            setSearch(e.target.value);
+            if (e.target.value) setMode("emoji");
+          }
+        }
+      ),
+      !search && /* @__PURE__ */ jsxs("div", { className: emojiPickerCategoryBarStyles, role: "tablist", "aria-label": "Emoji categories", children: [
+        api.categoryTabs.map((tab) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": mode === "emoji" && tab.category === activeCategory,
+            className: emojiPickerCategoryTabVariants({
+              state: mode === "emoji" && tab.category === activeCategory ? "active" : "inactive"
+            }),
+            onClick: () => handleCategoryClick(tab.category),
+            title: tab.label,
+            "aria-label": tab.label,
+            children: tab.emoji
+          },
+          tab.category
+        )),
+        showStickerTab && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": mode === "sticker",
+            className: emojiPickerCategoryTabVariants({
+              state: mode === "sticker" ? "active" : "inactive"
+            }),
+            onClick: () => {
+              setMode("sticker");
+              setSearch("");
+            },
+            title: "Stickers",
+            "aria-label": "Stickers",
+            children: "\u2B50"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: emojiPickerPanelStyles, children: mode === "sticker" && !search ? /* @__PURE__ */ jsx(
+        StickerPanel,
+        {
+          stickerSets,
+          render: stickerRenderer,
+          onPick: (s) => onStickerSelect?.(s)
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        !search && recentEmojis.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: emojiPickerSectionLabelStyles, children: "Recent" }),
+          /* @__PURE__ */ jsx("div", { className: emojiPickerGridStyles, children: recentEmojis.map((emoji, i) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: emojiPickerEmojiButtonStyles,
+              onClick: () => handleSelect(emoji),
+              ...api.getEmojiAriaProps(emoji),
+              children: renderEmoji(emoji)
+            },
+            `recent-${emoji.emoji}-${i}`
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          !search && /* @__PURE__ */ jsx("div", { className: emojiPickerSectionLabelStyles, children: CATEGORY_LABELS[activeCategory] }),
+          /* @__PURE__ */ jsxs("div", { className: emojiPickerGridStyles, role: "grid", children: [
+            filteredEmojis.map((emoji, i) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: emojiPickerEmojiButtonStyles,
+                onClick: () => handleSelect(emoji),
+                ...api.getEmojiAriaProps(emoji),
+                children: renderEmoji(emoji)
+              },
+              `${emoji.emoji}-${i}`
+            )),
+            filteredEmojis.length === 0 && /* @__PURE__ */ jsx("div", { className: "col-span-8 py-4 text-center text-sm text-muted-foreground", children: "No emojis found" })
+          ] })
+        ] })
+      ] }) }, panelKey)
+    ] });
+  }
+);
+function StickerPanel({
+  stickerSets,
+  render,
+  onPick
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-y-auto p-1", children: stickerSets.map((set) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: emojiPickerSectionLabelStyles, children: set.label }),
+    set.stickers.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-4 text-center text-sm text-muted-foreground", children: "No stickers yet" }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-1 p-1", children: set.stickers.map((sticker) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: emojiPickerStickerButtonStyles,
+        onClick: () => onPick(sticker),
+        "aria-label": sticker.label,
+        title: sticker.label,
+        children: render(sticker)
+      },
+      sticker.id
+    )) })
+  ] }, set.id)) });
+}
+export {
+  CATEGORY_LABELS,
+  DEFAULT_TWEMOJI_BASE_URL,
+  EMOJI_CATEGORIES,
+  EMOJI_COUNT_TOTAL,
+  EMOJI_DATA,
+  EmojiPicker,
+  SHORTCODE_ALIASES,
+  STARTER_STICKER_SET,
+  buildShortcodeMap,
+  createTwemojiRenderer,
+  defaultStickerRenderer,
+  emojiPickerContainerStyles,
+  emojiPickerEmojiButtonStyles,
+  emojiPickerGridStyles,
+  getAllEmojis,
+  nativeEmojiRenderer,
+  resolveShortcode,
+  searchEmojis,
+  twemojiAssetUrl,
+  twemojiFilename,
+  twemojiRenderer
+};
+//# sourceMappingURL=react-emoji-picker.js.map

package/dist/react-emoji-picker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../react-emoji-picker/src/emoji-picker.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport {\n  createEmojiPicker,\n  EMOJI_DATA,\n  CATEGORY_LABELS,\n  searchEmojis,\n  twemojiAssetUrl,\n  DEFAULT_TWEMOJI_BASE_URL,\n  STARTER_STICKER_SET,\n  emojiPickerContainerStyles,\n  emojiPickerSearchStyles,\n  emojiPickerCategoryBarStyles,\n  emojiPickerCategoryTabVariants,\n  emojiPickerGridStyles,\n  emojiPickerEmojiButtonStyles,\n  emojiPickerSectionLabelStyles,\n  emojiPickerPanelStyles,\n  emojiPickerStickerButtonStyles,\n  type EmojiCategory,\n  type EmojiEntry,\n  type StickerItem,\n  type StickerSet,\n} from '@refraction-ui/emoji-picker'\nimport { cn } from '@refraction-ui/shared'\n\n/**\n * The emoji render seam: maps an emoji entry to a React node. Swap it to change\n * how glyphs are painted (native, Twemoji, Noto, Fluent, a Lottie player, …)\n * WITHOUT touching the data or the picker. The default is `twemojiRenderer`,\n * which lazily loads one small uniform SVG per glyph (WhatsApp-style \"one look\n * everywhere\"); `nativeEmojiRenderer` falls back to the OS glyph.\n */\nexport type EmojiRenderer = (emoji: EmojiEntry) => React.ReactNode\n\n/** The sticker render seam: maps a sticker item to a React node. */\nexport type StickerRenderer = (sticker: StickerItem) => React.ReactNode\n\n/** Renders the OS-native glyph (non-uniform across platforms). */\nexport const nativeEmojiRenderer: EmojiRenderer = (emoji) => emoji.emoji\n\n/**\n * Renders a uniform Twemoji SVG (CC-BY 4.0 — attribution required, see the\n * package README). Lazily loaded per glyph; the native glyph is the `alt`\n * fallback if the asset can't load (e.g. offline).\n */\nexport function createTwemojiRenderer(baseUrl: string = DEFAULT_TWEMOJI_BASE_URL): EmojiRenderer {\n  return (emoji) => (\n    <img\n      src={twemojiAssetUrl(emoji.emoji, baseUrl)}\n      alt={emoji.emoji}\n      draggable={false}\n      loading=\"lazy\"\n      className=\"pointer-events-none h-[1.2em] w-[1.2em] select-none\"\n    />\n  )\n}\n\nexport const twemojiRenderer: EmojiRenderer = createTwemojiRenderer()\n\n/**\n * Default sticker renderer. Handles inline SVG (`svg`, may self-animate via\n * SMIL) and image/animated-WebP URLs (`image`). For `lottie`, a host must\n * supply its own `stickerRenderer` with a Lottie player; the default shows the\n * static poster if `source` is a URL, else the label.\n */\nexport const defaultStickerRenderer: StickerRenderer = (sticker) => {\n  if (sticker.kind === 'svg') {\n    return (\n      <span\n        aria-hidden=\"true\"\n        className=\"block h-full w-full\"\n        dangerouslySetInnerHTML={{ __html: sticker.source }}\n      />\n    )\n  }\n  if (sticker.kind === 'image' || /^https?:|^data:/.test(sticker.source)) {\n    return (\n      <img\n        src={sticker.source}\n        alt={sticker.label}\n        loading=\"lazy\"\n        draggable={false}\n        className=\"pointer-events-none h-full w-full select-none object-contain\"\n      />\n    )\n  }\n  return <span className=\"text-xs text-muted-foreground\">{sticker.label}</span>\n}\n\nexport interface EmojiPickerProps {\n  /** Fired with the selected emoji entry. */\n  onSelect?: (emoji: EmojiEntry) => void\n  /** Fired with the selected sticker. */\n  onStickerSelect?: (sticker: StickerItem) => void\n  /** Initial recents (most-recent-first). */\n  recentEmojis?: EmojiEntry[]\n  className?: string\n  /** Emoji render seam. Default: uniform Twemoji. */\n  emojiRenderer?: EmojiRenderer\n  /** Base URL for Twemoji assets (self-host to avoid the public CDN). */\n  twemojiBaseUrl?: string\n  /**\n   * Sticker sets for the sticker tab. Defaults to the bundled starter pack;\n   * pass `[]` to hide the sticker tab entirely.\n   */\n  stickerSets?: StickerSet[]\n  /** Sticker render seam. Default: `defaultStickerRenderer`. */\n  stickerRenderer?: StickerRenderer\n}\n\nconst RECENT_LIMIT = 20\n\nexport const EmojiPicker = React.forwardRef<HTMLDivElement, EmojiPickerProps>(\n  function EmojiPicker({ onSelect, onStickerSelect, recentEmojis: initialRecent = [], className, emojiRenderer, twemojiBaseUrl, stickerSets = [STARTER_STICKER_SET], stickerRenderer = defaultStickerRenderer }: EmojiPickerProps, ref) {\n  const [search, setSearch] = React.useState('')\n  const [activeCategory, setActiveCategory] = React.useState<EmojiCategory>('smileys')\n  const [mode, setMode] = React.useState<'emoji' | 'sticker'>('emoji')\n  const [recentEmojis, setRecentEmojis] = React.useState<EmojiEntry[]>(initialRecent)\n\n  // Stable renderer: an explicit prop wins, else a Twemoji renderer bound to\n  // the (optional) custom base URL.\n  const renderEmoji = React.useMemo<EmojiRenderer>(\n    () => emojiRenderer ?? createTwemojiRenderer(twemojiBaseUrl),\n    [emojiRenderer, twemojiBaseUrl],\n  )\n\n  // Headless core drives ARIA + ids only; the grid data is derived here so the\n  // full-set fuzzy search (`searchEmojis`) can rank results.\n  const api = React.useMemo(() => createEmojiPicker({ recentEmojis }), [recentEmojis])\n\n  const filteredEmojis = React.useMemo(() => {\n    if (search.trim()) return searchEmojis(search)\n    return EMOJI_DATA[activeCategory]\n  }, [search, activeCategory])\n\n  const handleSelect = (emoji: EmojiEntry) => {\n    setRecentEmojis((prev) =>\n      [emoji, ...prev.filter((e) => e.emoji !== emoji.emoji)].slice(0, RECENT_LIMIT),\n    )\n    onSelect?.(emoji)\n  }\n\n  const handleCategoryClick = (cat: EmojiCategory) => {\n    setMode('emoji')\n    setActiveCategory(cat)\n    setSearch('')\n  }\n\n  const hasStickers = stickerSets.length > 0\n  const showStickerTab = hasStickers && !search\n  const panelKey = search ? 'search' : mode === 'sticker' ? 'sticker' : activeCategory\n\n  return (\n    <div ref={ref} className={cn(emojiPickerContainerStyles, className)} {...api.ariaProps}>\n      <input\n        {...api.searchInputProps}\n        className={emojiPickerSearchStyles}\n        value={search}\n        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n          setSearch(e.target.value)\n          if (e.target.value) setMode('emoji')\n        }}\n      />\n\n      {!search && (\n        <div className={emojiPickerCategoryBarStyles} role=\"tablist\" aria-label=\"Emoji categories\">\n          {api.categoryTabs.map((tab) => (\n            <button\n              key={tab.category}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={mode === 'emoji' && tab.category === activeCategory}\n              className={emojiPickerCategoryTabVariants({\n                state: mode === 'emoji' && tab.category === activeCategory ? 'active' : 'inactive',\n              })}\n              onClick={() => handleCategoryClick(tab.category)}\n              title={tab.label}\n              aria-label={tab.label}\n            >\n              {tab.emoji}\n            </button>\n          ))}\n          {showStickerTab && (\n            <button\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={mode === 'sticker'}\n              className={emojiPickerCategoryTabVariants({\n                state: mode === 'sticker' ? 'active' : 'inactive',\n              })}\n              onClick={() => {\n                setMode('sticker')\n                setSearch('')\n              }}\n              title=\"Stickers\"\n              aria-label=\"Stickers\"\n            >\n              {'⭐'}\n            </button>\n          )}\n        </div>\n      )}\n\n      {/* Swappable panel — keyed so a category/mode/search change cross-fades. */}\n      <div key={panelKey} className={emojiPickerPanelStyles}>\n        {mode === 'sticker' && !search ? (\n          <StickerPanel\n            stickerSets={stickerSets}\n            render={stickerRenderer}\n            onPick={(s) => onStickerSelect?.(s)}\n          />\n        ) : (\n          <>\n            {!search && recentEmojis.length > 0 && (\n              <div>\n                <div className={emojiPickerSectionLabelStyles}>Recent</div>\n                <div className={emojiPickerGridStyles}>\n                  {recentEmojis.map((emoji, i) => (\n                    <button\n                      key={`recent-${emoji.emoji}-${i}`}\n                      type=\"button\"\n                      className={emojiPickerEmojiButtonStyles}\n                      onClick={() => handleSelect(emoji)}\n                      {...api.getEmojiAriaProps(emoji)}\n                    >\n                      {renderEmoji(emoji)}\n                    </button>\n                  ))}\n                </div>\n              </div>\n            )}\n\n            <div>\n              {!search && (\n                <div className={emojiPickerSectionLabelStyles}>{CATEGORY_LABELS[activeCategory]}</div>\n              )}\n              <div className={emojiPickerGridStyles} role=\"grid\">\n                {filteredEmojis.map((emoji, i) => (\n                  <button\n                    key={`${emoji.emoji}-${i}`}\n                    type=\"button\"\n                    className={emojiPickerEmojiButtonStyles}\n                    onClick={() => handleSelect(emoji)}\n                    {...api.getEmojiAriaProps(emoji)}\n                  >\n                    {renderEmoji(emoji)}\n                  </button>\n                ))}\n                {filteredEmojis.length === 0 && (\n                  <div className=\"col-span-8 py-4 text-center text-sm text-muted-foreground\">\n                    No emojis found\n                  </div>\n                )}\n              </div>\n            </div>\n          </>\n        )}\n      </div>\n    </div>\n  )\n  },\n)\n\nfunction StickerPanel({\n  stickerSets,\n  render,\n  onPick,\n}: {\n  stickerSets: StickerSet[]\n  render: StickerRenderer\n  onPick: (sticker: StickerItem) => void\n}) {\n  return (\n    <div className=\"max-h-64 overflow-y-auto p-1\">\n      {stickerSets.map((set) => (\n        <div key={set.id}>\n          <div className={emojiPickerSectionLabelStyles}>{set.label}</div>\n          {set.stickers.length === 0 ? (\n            <div className=\"px-2 py-4 text-center text-sm text-muted-foreground\">\n              No stickers yet\n            </div>\n          ) : (\n            <div className=\"grid grid-cols-4 gap-1 p-1\">\n              {set.stickers.map((sticker) => (\n                <button\n                  key={sticker.id}\n                  type=\"button\"\n                  className={emojiPickerStickerButtonStyles}\n                  onClick={() => onPick(sticker)}\n                  aria-label={sticker.label}\n                  title={sticker.label}\n                >\n                  {render(sticker)}\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["EmojiPicker"]
+}

package/dist/react-empty-state.js

@@ -0,0 +1,90 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-empty-state/dist/index.js
+import * as React from "react";
+
+// ../empty-state/dist/index.js
+function createEmptyState(options = {}) {
+  const { tone = "neutral" } = options;
+  const dataAttributes = {
+    "data-tone": tone
+  };
+  return {
+    dataAttributes
+  };
+}
+var emptyStateVariants = cva({
+  base: "flex flex-col items-center text-center gap-3 p-8",
+  variants: {
+    bordered: {
+      true: "rounded-xl border border-border bg-card",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    bordered: "false"
+  }
+});
+var emptyStateIconChipVariants = cva({
+  base: "flex size-12 items-center justify-center rounded-full",
+  variants: {
+    tone: {
+      neutral: "bg-muted text-muted-foreground",
+      success: "bg-success/10 text-success",
+      warning: "bg-warning/10 text-warning",
+      danger: "bg-destructive/10 text-destructive"
+    }
+  },
+  defaultVariants: {
+    tone: "neutral"
+  }
+});
+var emptyStateTitleClass = "text-lg font-semibold text-foreground";
+var emptyStateDescriptionClass = "text-sm text-muted-foreground";
+var emptyStateActionsClass = "flex items-center justify-center gap-2";
+
+// ../react-empty-state/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var EmptyState = React.forwardRef(
+  function EmptyState2({
+    icon,
+    tone = "neutral",
+    title,
+    description,
+    actions,
+    bordered = false,
+    className,
+    ...props
+  }, ref) {
+    const api = createEmptyState({ tone });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          emptyStateVariants({ bordered: bordered ? "true" : "false" }),
+          className
+        ),
+        ...api.dataAttributes,
+        ...props,
+        children: [
+          icon != null && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: emptyStateIconChipVariants({ tone }), children: icon }),
+          /* @__PURE__ */ jsx("h3", { className: emptyStateTitleClass, children: title }),
+          description != null && /* @__PURE__ */ jsx("p", { className: emptyStateDescriptionClass, children: description }),
+          actions != null && /* @__PURE__ */ jsx("div", { className: emptyStateActionsClass, children: actions })
+        ]
+      }
+    );
+  }
+);
+var ConfirmationCard = React.forwardRef(function ConfirmationCard2({ bordered = true, ...props }, ref) {
+  return /* @__PURE__ */ jsx(EmptyState, { ref, bordered, ...props });
+});
+export {
+  ConfirmationCard,
+  EmptyState
+};
+//# sourceMappingURL=react-empty-state.js.map

package/dist/react-empty-state.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../empty-state/src/empty-state.ts", "../../empty-state/src/empty-state.styles.ts", "../../react-empty-state/src/empty-state.tsx"],
+  "sourcesContent": ["export type EmptyStateTone = 'neutral' | 'success' | 'warning' | 'danger'\n\nexport interface EmptyStateOptions {\n  /** Tone that tints the icon chip. Defaults to `neutral`. */\n  tone?: EmptyStateTone\n}\n\nexport interface EmptyStateAPI {\n  /** Data attributes for CSS styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Headless EmptyState core — JSX-free. Resolves the tone into the data\n * attributes that adapters spread onto the root element.\n */\nexport function createEmptyState(options: EmptyStateOptions = {}): EmptyStateAPI {\n  const { tone = 'neutral' } = options\n\n  const dataAttributes: Record<string, string> = {\n    'data-tone': tone,\n  }\n\n  return {\n    dataAttributes,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Container for the EmptyState column. The `bordered` variant wraps the\n * content in a card surface.\n */\nexport const emptyStateVariants = cva({\n  base: 'flex flex-col items-center text-center gap-3 p-8',\n  variants: {\n    bordered: {\n      true: 'rounded-xl border border-border bg-card',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    bordered: 'false',\n  },\n})\n\n/**\n * Tone-tinted classes for the icon chip. Tone styling lives here as a single\n * source of truth (no scattered inline literals in the adapters).\n */\nexport const emptyStateIconChipVariants = cva({\n  base: 'flex size-12 items-center justify-center rounded-full',\n  variants: {\n    tone: {\n      neutral: 'bg-muted text-muted-foreground',\n      success: 'bg-success/10 text-success',\n      warning: 'bg-warning/10 text-warning',\n      danger: 'bg-destructive/10 text-destructive',\n    },\n  },\n  defaultVariants: {\n    tone: 'neutral',\n  },\n})\n\n/** Layout class helpers for the title/description/actions slots. */\nexport const emptyStateTitleClass = 'text-lg font-semibold text-foreground'\nexport const emptyStateDescriptionClass = 'text-sm text-muted-foreground'\nexport const emptyStateActionsClass = 'flex items-center justify-center gap-2'\n", "import * as React from 'react'\nimport { cn } from '@refraction-ui/shared'\nimport {\n  createEmptyState,\n  emptyStateVariants,\n  emptyStateIconChipVariants,\n  emptyStateTitleClass,\n  emptyStateDescriptionClass,\n  emptyStateActionsClass,\n  type EmptyStateTone,\n} from '@refraction-ui/empty-state'\n\nexport type { EmptyStateTone }\n\nexport interface EmptyStateProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Optional icon rendered inside a tone-tinted rounded chip. */\n  icon?: React.ReactNode\n  /** Tone that tints the icon chip. Defaults to `neutral`. */\n  tone?: EmptyStateTone\n  /** Primary heading. */\n  title: React.ReactNode\n  /** Optional supporting copy (supports rich children). */\n  description?: React.ReactNode\n  /** Optional action row (e.g. buttons), centered under the description. */\n  actions?: React.ReactNode\n  /** Wrap the content in a bordered card surface. */\n  bordered?: boolean\n}\n\n/**\n * EmptyState — a centered column for empty/zero/result states and inline\n * confirmations. The icon chip is tinted via `tone`; pass `bordered` to render\n * it on a card surface.\n *\n * Styling and tone resolution come from the headless @refraction-ui/empty-state\n * core (no inline class literals here).\n */\nexport const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(\n  function EmptyState(\n    {\n      icon,\n      tone = 'neutral',\n      title,\n      description,\n      actions,\n      bordered = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const api = createEmptyState({ tone })\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          emptyStateVariants({ bordered: bordered ? 'true' : 'false' }),\n          className,\n        )}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {icon != null && (\n          <div aria-hidden=\"true\" className={emptyStateIconChipVariants({ tone })}>\n            {icon}\n          </div>\n        )}\n        <h3 className={emptyStateTitleClass}>{title}</h3>\n        {description != null && (\n          <p className={emptyStateDescriptionClass}>{description}</p>\n        )}\n        {actions != null && (\n          <div className={emptyStateActionsClass}>{actions}</div>\n        )}\n      </div>\n    )\n  },\n)\n\nexport interface ConfirmationCardProps extends EmptyStateProps {}\n\n/**\n * ConfirmationCard — a thin preset of {@link EmptyState} with `bordered`\n * defaulting to `true`, for inline confirmation states (e.g. \"Check your email\").\n */\nexport const ConfirmationCard = React.forwardRef<\n  HTMLDivElement,\n  ConfirmationCardProps\n>(function ConfirmationCard({ bordered = true, ...props }, ref) {\n    return (\n    <EmptyState ref={ref} bordered={bordered} {...props} />\n  )\n  })\n"],
+  "mappings": ";;;;;;;;;AAgBO,SAAS,iBAAiB,UAA6B,CAAA,GAAmB;AAC/E,QAAM,EAAE,OAAO,UAAA,IAAc;AAE7B,QAAM,iBAAyC;IAC7C,aAAa;EAAA;AAGf,SAAO;IACL;EAAA;AAEJ;ACpBO,IAAM,qBAAqB,IAAI;EACpC,MAAM;EACN,UAAU;IACR,UAAU;MACR,MAAM;MACN,OAAO;IAAA;EACT;EAEF,iBAAiB;IACf,UAAU;EAAA;AAEd,CAAC;AAMM,IAAM,6BAA6B,IAAI;EAC5C,MAAM;EACN,UAAU;IACR,MAAM;MACJ,SAAS;MACT,SAAS;MACT,SAAS;MACT,QAAQ;IAAA;EACV;EAEF,iBAAiB;IACf,MAAM;EAAA;AAEV,CAAC;AAGM,IAAM,uBAAuB;AAC7B,IAAM,6BAA6B;AACnC,IAAM,yBAAyB;;;;ACH/B,IAAM,aAAmB;EAC9B,SAASA,YACP;IACE;IACA,OAAO;IACP;IACA;IACA;IACA,WAAW;IACX;IACA,GAAG;EAAA,GAEL,KACA;AACA,UAAM,MAAM,iBAAiB,EAAE,KAAA,CAAM;AAErC,WACE;MAAC;MAAA;QACC;QACA,WAAW;UACT,mBAAmB,EAAE,UAAU,WAAW,SAAS,QAAA,CAAS;UAC5D;QAAA;QAED,GAAG,IAAI;QACP,GAAG;QAEH,UAAA;UAAA,QAAQ,QACP,oBAAC,OAAA,EAAI,eAAY,QAAO,WAAW,2BAA2B,EAAE,KAAA,CAAM,GACnE,UAAA,KAAA,CACH;UAEF,oBAAC,MAAA,EAAG,WAAW,sBAAuB,UAAA,MAAA,CAAM;UAC3C,eAAe,QACd,oBAAC,KAAA,EAAE,WAAW,4BAA6B,UAAA,YAAA,CAAY;UAExD,WAAW,QACV,oBAAC,OAAA,EAAI,WAAW,wBAAyB,UAAA,QAAA,CAAQ;QAAA;MAAA;IAAA;EAIzD;AACF;AAQO,IAAM,mBAAyB,iBAGpC,SAASC,kBAAiB,EAAE,WAAW,MAAM,GAAG,MAAA,GAAS,KAAK;AAC5D,SACA,oBAAC,YAAA,EAAW,KAAU,UAAqB,GAAG,MAAA,CAAO;AAEvD,CAAC;",
+  "names": ["EmptyState", "ConfirmationCard"]
+}