@refraction-ui/react 0.17.1 → 0.18.1

package/dist/internal/composer/index.d.ts

@@ -547,8 +547,15 @@ declare function createComposer(config?: ComposerConfig): ComposerAPI;
  * Boolean-ish variants use string 'true'/'false' keys per repo convention
  * (raw booleans fail the dts build).
  */
-/** Outer surface (the rounded card wrapping tray + field + action row). */
+/**
+ * Outer surface (the rounded card wrapping tray + field + action row).
+ * `surface` picks the resting fill: `outlined` (transparent-on-page card) or
+ * `filled` (a calm muted fill distinct from the page). Both keep a tasteful
+ * focus-visible ring on the pill — a hairline border plus a single-px ring, not
+ * a slammed saturated full-perimeter brand border.
+ */
 declare const composerSurfaceVariants: (props?: ({
+    surface?: "outlined" | "filled" | undefined;
     disabled?: "true" | "false" | undefined;
     error?: "true" | "false" | undefined;
 } & {
@@ -558,16 +565,37 @@ declare const composerSurfaceVariants: (props?: ({
 declare const composerFieldClass = "block w-full resize-none bg-transparent px-3.5 py-3 text-sm placeholder:text-muted-foreground focus:outline-none";
 /** Attachment tray above the field, inside the dock. */
 declare const composerTrayClass = "flex flex-wrap gap-2 px-3 pt-3";
-/** A single attachment chip. */
+/**
+ * A single attachment chip. Chips animate in on add (scale + fade) and, when
+ * the adapter marks one `exiting`, animate out faster before unmounting. Both
+ * degrade to opacity-only / instant under reduced motion.
+ */
 declare const composerAttachmentChipVariants: (props?: ({
     status?: "pending" | "uploading" | "ready" | "error" | undefined;
+    exiting?: "true" | "false" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;
 /** A committed inline token pill rendered by adapters over the flat string. */
 declare const composerTokenPillClass = "rounded bg-accent/40 px-0.5 text-accent-foreground";
-/** The caret-anchored suggestion menu. */
-declare const composerMenuClass = "z-20 w-72 overflow-hidden rounded-xl border border-border bg-popover shadow-lg";
+/**
+ * The caret-anchored suggestion menu. Enters with an eased fade+scale from its
+ * bottom edge (it sits above the field); reduced motion drops the movement.
+ */
+declare const composerMenuClass = "z-20 w-72 overflow-hidden rounded-xl border border-border bg-popover shadow-lg origin-bottom motion-safe:animate-fade-in-scale";
+/**
+ * The inline expression/accessory panel docked below the field. It is part of
+ * the composer's own stack (never a floating portal), so the textarea and the
+ * message in progress stay fully visible while the panel is open. Opens with an
+ * eased fade; reduced motion shows it instantly.
+ */
+declare const composerAccessoryPanelClass = "border-t border-border motion-safe:animate-fade-in";
+/** The built-in expression-panel toggle button. */
+declare const composerAccessoryToggleVariants: (props?: ({
+    active?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
 /** A suggestion row; `active` follows keyboard/pointer last-input-wins. */
 declare const composerMenuItemVariants: (props?: ({
     active?: "true" | "false" | undefined;
@@ -580,11 +608,35 @@ declare const composerCounterVariants: (props?: ({
 } & {
     className?: string;
 }) | undefined) => string;
-/** Primary action (send ⇄ stop swap driven by `{hasText, canSend, isBusy}`). */
+/**
+ * Primary action (send ⇄ stop swap driven by `{hasText, canSend, isBusy}`).
+ * The colour/affordance change eases; the adapter keys the button on busy so
+ * the swap pops in (scale) rather than snapping. Reduced motion keeps it calm.
+ */
 declare const composerPrimaryActionVariants: (props?: ({
     enabled?: "true" | "false" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;
 
-export { type ActiveTriggerState, type AppliedEdit, type ApplyValueEditArgs, CIRCUIT_BREAKER_THRESHOLD, CLOSED_SUGGESTION_STATE, COUNTER_VISIBLE_FRACTION, type CanSendArgs, type CommitTokenArgs, type CommitTokenResult, type ComposerAPI, type ComposerAttachment, type ComposerAttachmentDraft, type ComposerAttachmentKind, type ComposerAttachmentStatus, type ComposerCandidate, type ComposerConfig, type ComposerDraft, type ComposerDraftStore, type ComposerEvent, type ComposerMode, type ComposerOutput, type ComposerSelection, type ComposerState, type ComposerSubmission, type ComposerToken, type ComposerTrigger, type ComposerTriggerResolver, type ComposerTriggerScope, type ComposerValidationResult, type ComposerValidator, type CounterState, DEFAULT_DRAFT_DEBOUNCE_MS, DEFAULT_MAX_LINES, DEFAULT_MAX_QUERY_LENGTH, DEFAULT_MAX_VISIBLE_RESULTS, DEFAULT_MIN_LINES, DEFAULT_TYPING_SIGNAL_INTERVAL_MS, DISMISS_GRACE_MS, type DetectTriggerArgs, type DismissedOccurrence, type EnterResult, LOADING_DELAY_MS, type PlacedToken, type ResolvedToken, type ResolvedTrigger, SCAN_UNITS_PER_GRAPHEME, type SuggestionController, type SuggestionState, type TextEdit, type TokenRange, type TriggerMatch, type TypedEmojiHit, applyValueEdit, canSend, clampGraphemes, commitTokenAt, composerAttachmentChipVariants, composerCounterVariants, composerFieldClass, composerMenuClass, composerMenuItemVariants, composerPrimaryActionVariants, composerSurfaceVariants, composerTokenPillClass, composerTrayClass, computeCounter, createComposer, createSuggestionController, detectActiveTrigger, detectTypedEmoji, diffEdit, expandRangeOverTokens, graphemeLength, isGraphemeBoundary, payloadFor, resolveTriggerConfig, scanWindowFor, serializeTokens, shouldSubmitOnEnter, snapSelectionToTokens, toMessageAttachment };
+interface EmojiTriggerOptions {
+    /** Trigger id. Default 'emoji'. */
+    id?: string;
+    /** Symbol. Default ':'. */
+    symbol?: string;
+    /** Max results surfaced to the menu. Default 8. */
+    maxResults?: number;
+    /**
+     * Minimum query length before resolving (avoids flooding the menu with the
+     * whole set on a lone ':'). Default 1.
+     */
+    minQueryLength?: number;
+}
+/**
+ * Build a `:` emoji trigger. Typing `:fir` filters the full set; committing
+ * inserts the glyph (🔥). Pair it with the picker for the same coverage in both
+ * surfaces.
+ */
+declare function createEmojiTrigger(options?: EmojiTriggerOptions): ComposerTrigger;
+
+export { type ActiveTriggerState, type AppliedEdit, type ApplyValueEditArgs, CIRCUIT_BREAKER_THRESHOLD, CLOSED_SUGGESTION_STATE, COUNTER_VISIBLE_FRACTION, type CanSendArgs, type CommitTokenArgs, type CommitTokenResult, type ComposerAPI, type ComposerAttachment, type ComposerAttachmentDraft, type ComposerAttachmentKind, type ComposerAttachmentStatus, type ComposerCandidate, type ComposerConfig, type ComposerDraft, type ComposerDraftStore, type ComposerEvent, type ComposerMode, type ComposerOutput, type ComposerSelection, type ComposerState, type ComposerSubmission, type ComposerToken, type ComposerTrigger, type ComposerTriggerResolver, type ComposerTriggerScope, type ComposerValidationResult, type ComposerValidator, type CounterState, DEFAULT_DRAFT_DEBOUNCE_MS, DEFAULT_MAX_LINES, DEFAULT_MAX_QUERY_LENGTH, DEFAULT_MAX_VISIBLE_RESULTS, DEFAULT_MIN_LINES, DEFAULT_TYPING_SIGNAL_INTERVAL_MS, DISMISS_GRACE_MS, type DetectTriggerArgs, type DismissedOccurrence, type EmojiTriggerOptions, type EnterResult, LOADING_DELAY_MS, type PlacedToken, type ResolvedToken, type ResolvedTrigger, SCAN_UNITS_PER_GRAPHEME, type SuggestionController, type SuggestionState, type TextEdit, type TokenRange, type TriggerMatch, type TypedEmojiHit, applyValueEdit, canSend, clampGraphemes, commitTokenAt, composerAccessoryPanelClass, composerAccessoryToggleVariants, composerAttachmentChipVariants, composerCounterVariants, composerFieldClass, composerMenuClass, composerMenuItemVariants, composerPrimaryActionVariants, composerSurfaceVariants, composerTokenPillClass, composerTrayClass, computeCounter, createComposer, createEmojiTrigger, createSuggestionController, detectActiveTrigger, detectTypedEmoji, diffEdit, expandRangeOverTokens, graphemeLength, isGraphemeBoundary, payloadFor, resolveTriggerConfig, scanWindowFor, serializeTokens, shouldSubmitOnEnter, snapSelectionToTokens, toMessageAttachment };

package/dist/internal/emoji-picker/index.d.cts

@@ -2,18 +2,48 @@ import { AccessibilityProps } from '../shared/index.cjs';
 
 type EmojiCategory = 'smileys' | 'people' | 'nature' | 'food' | 'travel' | 'activities' | 'objects' | 'symbols' | 'flags';
 interface EmojiEntry {
+    /** The rendered glyph (native codepoints). */
     emoji: string;
+    /** CLDR short name, e.g. "face with tears of joy". */
     name: string;
     category: EmojiCategory;
+    /** Search keywords (does not include the name words verbatim-repeated). */
     keywords: string[];
+    /** Canonical `snake_case` shortcode body (no surrounding colons). */
+    shortcode: string;
 }
-declare const EMOJI_DATA: Record<EmojiCategory, EmojiEntry[]>;
-/** All categories in display order */
+/** Total number of base emoji shipped. */
+declare const EMOJI_COUNT_TOTAL = 1906;
+/** All categories in display order. */
 declare const EMOJI_CATEGORIES: EmojiCategory[];
-/** Category display labels */
+/** Category display labels. */
 declare const CATEGORY_LABELS: Record<EmojiCategory, string>;
-/** Get all emojis as a flat array */
+/** Emojis grouped by category (display order preserved within each group). */
+declare const EMOJI_DATA: Record<EmojiCategory, EmojiEntry[]>;
+/** Get all emojis as a flat array (display order). */
 declare function getAllEmojis(): EmojiEntry[];
+/**
+ * Curated popular aliases (`:body:` → glyph) that don't match the derived
+ * snake_case name — the short forms people actually type (`:joy:`, `:100:`,
+ * `:thumbsup:`). These take precedence over derived shortcodes on lookup.
+ * This is the ONE place aliases live (rich-editor consumes it, no duplication).
+ */
+declare const SHORTCODE_ALIASES: Record<string, string>;
+/**
+ * Resolve a `:shortcode:` (with or without surrounding colons) to its glyph.
+ * Aliases win over derived shortcodes. Returns `null` when unknown.
+ */
+declare function resolveShortcode(code: string): string | null;
+/**
+ * `:body:` → glyph map covering the full derived set plus curated aliases.
+ * This is the shared source rich-editor's `EMOJI_MAP` is built from.
+ */
+declare function buildShortcodeMap(): Record<string, string>;
+/**
+ * Fuzzy-search emoji by name, keyword, or shortcode. Prefix matches on the
+ * shortcode/name rank first. Used by the picker search and the `:` trigger.
+ */
+declare function searchEmojis(query: string, limit?: number): EmojiEntry[];
 
 interface EmojiPickerProps {
     /** Callback when an emoji is selected */
@@ -62,7 +92,81 @@ interface EmojiPickerAPI {
 }
 declare function createEmojiPicker(props?: EmojiPickerProps): EmojiPickerAPI;
 
-declare const emojiPickerContainerStyles = "w-80 rounded-lg border bg-popover text-popover-foreground shadow-md";
+/**
+ * Twemoji asset resolution — maps a native emoji glyph to its Twemoji SVG
+ * filename/URL. This is the data half of the `emojiRenderer` seam: it lets the
+ * React/Astro adapters render a UNIFORM emoji set (one look on every OS) instead
+ * of per-platform native glyphs, WhatsApp-style, by lazily loading one small SVG
+ * per glyph from a CDN (or a self-hosted mirror) — nothing is bundled eagerly.
+ *
+ * Twemoji graphics are © Twitter / the Twemoji contributors, licensed CC-BY 4.0.
+ * Consumers rendering with Twemoji must preserve that attribution (see the
+ * package README / NOTICE).
+ *
+ * The filename algorithm mirrors upstream `twemoji.toCodePoint`: surrogate
+ * pairs are combined to codepoints, and the U+FE0F variation selector is
+ * stripped from non-ZWJ sequences (Twemoji names files without it).
+ */
+/** Default CDN base for Twemoji SVG assets (jsDelivr, pinned). */
+declare const DEFAULT_TWEMOJI_BASE_URL = "https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/svg/";
+/**
+ * Twemoji asset filename (without extension) for a glyph, e.g. `1f600`,
+ * `1f1fa-1f1f8`, `2764` (heart, FE0F stripped).
+ */
+declare function twemojiFilename(emoji: string): string;
+/** Full Twemoji SVG URL for a glyph. */
+declare function twemojiAssetUrl(emoji: string, baseUrl?: string): string;
+
+/**
+ * Sticker seam — types + a small bundled starter pack.
+ *
+ * Stickers are host-extensible: a consumer (or a future bundled pack) supplies
+ * `StickerSet`s and the picker renders them in a dedicated tab. Three render
+ * paths are supported so the API is ready for animated content without any
+ * heavy dependency in the core:
+ *   - `kind: 'svg'`   — inline SVG markup (can self-animate via SMIL, no JS).
+ *   - `kind: 'image'` — a URL to a static or animated (WebP/GIF/APNG) asset.
+ *   - `kind: 'lottie'`— a URL/JSON handed to a host-provided Lottie player.
+ *
+ * The starter pack below ships a handful of simple, consistent flat stickers
+ * (128×128, one visual language) so the tab is not empty out of the box, and
+ * proves the animated render path with a self-animating SMIL heart — no Lottie
+ * runtime required.
+ */
+type StickerKind = 'svg' | 'image' | 'lottie';
+interface StickerItem {
+    /** Stable id (unique within its set). */
+    id: string;
+    /** Accessible label / alt text. */
+    label: string;
+    kind: StickerKind;
+    /**
+     * The sticker payload: inline SVG markup (`svg`), an asset URL (`image`), or
+     * a Lottie JSON URL or serialized object (`lottie`).
+     */
+    source: string;
+    /** Search keywords. */
+    keywords?: string[];
+    /** True when the sticker animates (drives reduced-motion handling). */
+    animated?: boolean;
+}
+interface StickerSet {
+    /** Stable id (unique across sets). */
+    id: string;
+    /** Human-readable set name (tab tooltip). */
+    label: string;
+    /** A representative emoji/char for the set's tab icon. */
+    icon?: string;
+    stickers: StickerItem[];
+}
+/**
+ * Refraction starter sticker pack — a tasteful, consistent flat set. The
+ * `pulse-heart` sticker self-animates via SMIL to demonstrate the animated
+ * render path; the rest are static.
+ */
+declare const STARTER_STICKER_SET: StickerSet;
+
+declare const emojiPickerContainerStyles = "w-80 rounded-lg border bg-popover text-popover-foreground shadow-md motion-safe:animate-fade-in-scale origin-top";
 declare const emojiPickerSearchStyles = "w-full border-b px-3 py-2 text-sm bg-transparent outline-none placeholder:text-muted-foreground";
 declare const emojiPickerCategoryBarStyles = "flex border-b px-1";
 declare const emojiPickerCategoryTabVariants: (props?: ({
@@ -71,7 +175,11 @@ declare const emojiPickerCategoryTabVariants: (props?: ({
     className?: string;
 }) | undefined) => string;
 declare const emojiPickerGridStyles = "grid grid-cols-8 gap-0.5 p-2 max-h-64 overflow-y-auto";
-declare const emojiPickerEmojiButtonStyles = "flex items-center justify-center h-8 w-8 rounded cursor-pointer text-lg hover:bg-accent transition-colors";
+declare const emojiPickerEmojiButtonStyles = "flex items-center justify-center h-8 w-8 rounded cursor-pointer text-lg transition-transform duration-100 ease-out hover:bg-accent hover:scale-125 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none motion-reduce:hover:scale-100";
 declare const emojiPickerSectionLabelStyles = "px-2 py-1 text-xs font-medium text-muted-foreground";
+/** The swappable category/search/sticker panel; fades on category switch. */
+declare const emojiPickerPanelStyles = "motion-safe:animate-fade-in origin-top";
+/** A single sticker cell in the sticker tab. */
+declare const emojiPickerStickerButtonStyles = "flex items-center justify-center rounded-lg p-1.5 aspect-square cursor-pointer transition-transform duration-100 ease-out hover:bg-accent hover:scale-110 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none motion-reduce:hover:scale-100";
 
-export { CATEGORY_LABELS, EMOJI_CATEGORIES, EMOJI_DATA, type EmojiCategory, type EmojiEntry, type EmojiPickerAPI, type EmojiPickerProps, type EmojiPickerState, createEmojiPicker, emojiPickerCategoryBarStyles, emojiPickerCategoryTabVariants, emojiPickerContainerStyles, emojiPickerEmojiButtonStyles, emojiPickerGridStyles, emojiPickerSearchStyles, emojiPickerSectionLabelStyles, getAllEmojis };
+export { CATEGORY_LABELS, DEFAULT_TWEMOJI_BASE_URL, EMOJI_CATEGORIES, EMOJI_COUNT_TOTAL, EMOJI_DATA, type EmojiCategory, type EmojiEntry, type EmojiPickerAPI, type EmojiPickerProps, type EmojiPickerState, SHORTCODE_ALIASES, STARTER_STICKER_SET, type StickerItem, type StickerKind, type StickerSet, buildShortcodeMap, createEmojiPicker, emojiPickerCategoryBarStyles, emojiPickerCategoryTabVariants, emojiPickerContainerStyles, emojiPickerEmojiButtonStyles, emojiPickerGridStyles, emojiPickerPanelStyles, emojiPickerSearchStyles, emojiPickerSectionLabelStyles, emojiPickerStickerButtonStyles, getAllEmojis, resolveShortcode, searchEmojis, twemojiAssetUrl, twemojiFilename };

package/dist/internal/emoji-picker/index.d.ts

@@ -2,18 +2,48 @@ import { AccessibilityProps } from '../shared/index.js';
 
 type EmojiCategory = 'smileys' | 'people' | 'nature' | 'food' | 'travel' | 'activities' | 'objects' | 'symbols' | 'flags';
 interface EmojiEntry {
+    /** The rendered glyph (native codepoints). */
     emoji: string;
+    /** CLDR short name, e.g. "face with tears of joy". */
     name: string;
     category: EmojiCategory;
+    /** Search keywords (does not include the name words verbatim-repeated). */
     keywords: string[];
+    /** Canonical `snake_case` shortcode body (no surrounding colons). */
+    shortcode: string;
 }
-declare const EMOJI_DATA: Record<EmojiCategory, EmojiEntry[]>;
-/** All categories in display order */
+/** Total number of base emoji shipped. */
+declare const EMOJI_COUNT_TOTAL = 1906;
+/** All categories in display order. */
 declare const EMOJI_CATEGORIES: EmojiCategory[];
-/** Category display labels */
+/** Category display labels. */
 declare const CATEGORY_LABELS: Record<EmojiCategory, string>;
-/** Get all emojis as a flat array */
+/** Emojis grouped by category (display order preserved within each group). */
+declare const EMOJI_DATA: Record<EmojiCategory, EmojiEntry[]>;
+/** Get all emojis as a flat array (display order). */
 declare function getAllEmojis(): EmojiEntry[];
+/**
+ * Curated popular aliases (`:body:` → glyph) that don't match the derived
+ * snake_case name — the short forms people actually type (`:joy:`, `:100:`,
+ * `:thumbsup:`). These take precedence over derived shortcodes on lookup.
+ * This is the ONE place aliases live (rich-editor consumes it, no duplication).
+ */
+declare const SHORTCODE_ALIASES: Record<string, string>;
+/**
+ * Resolve a `:shortcode:` (with or without surrounding colons) to its glyph.
+ * Aliases win over derived shortcodes. Returns `null` when unknown.
+ */
+declare function resolveShortcode(code: string): string | null;
+/**
+ * `:body:` → glyph map covering the full derived set plus curated aliases.
+ * This is the shared source rich-editor's `EMOJI_MAP` is built from.
+ */
+declare function buildShortcodeMap(): Record<string, string>;
+/**
+ * Fuzzy-search emoji by name, keyword, or shortcode. Prefix matches on the
+ * shortcode/name rank first. Used by the picker search and the `:` trigger.
+ */
+declare function searchEmojis(query: string, limit?: number): EmojiEntry[];
 
 interface EmojiPickerProps {
     /** Callback when an emoji is selected */
@@ -62,7 +92,81 @@ interface EmojiPickerAPI {
 }
 declare function createEmojiPicker(props?: EmojiPickerProps): EmojiPickerAPI;
 
-declare const emojiPickerContainerStyles = "w-80 rounded-lg border bg-popover text-popover-foreground shadow-md";
+/**
+ * Twemoji asset resolution — maps a native emoji glyph to its Twemoji SVG
+ * filename/URL. This is the data half of the `emojiRenderer` seam: it lets the
+ * React/Astro adapters render a UNIFORM emoji set (one look on every OS) instead
+ * of per-platform native glyphs, WhatsApp-style, by lazily loading one small SVG
+ * per glyph from a CDN (or a self-hosted mirror) — nothing is bundled eagerly.
+ *
+ * Twemoji graphics are © Twitter / the Twemoji contributors, licensed CC-BY 4.0.
+ * Consumers rendering with Twemoji must preserve that attribution (see the
+ * package README / NOTICE).
+ *
+ * The filename algorithm mirrors upstream `twemoji.toCodePoint`: surrogate
+ * pairs are combined to codepoints, and the U+FE0F variation selector is
+ * stripped from non-ZWJ sequences (Twemoji names files without it).
+ */
+/** Default CDN base for Twemoji SVG assets (jsDelivr, pinned). */
+declare const DEFAULT_TWEMOJI_BASE_URL = "https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/svg/";
+/**
+ * Twemoji asset filename (without extension) for a glyph, e.g. `1f600`,
+ * `1f1fa-1f1f8`, `2764` (heart, FE0F stripped).
+ */
+declare function twemojiFilename(emoji: string): string;
+/** Full Twemoji SVG URL for a glyph. */
+declare function twemojiAssetUrl(emoji: string, baseUrl?: string): string;
+
+/**
+ * Sticker seam — types + a small bundled starter pack.
+ *
+ * Stickers are host-extensible: a consumer (or a future bundled pack) supplies
+ * `StickerSet`s and the picker renders them in a dedicated tab. Three render
+ * paths are supported so the API is ready for animated content without any
+ * heavy dependency in the core:
+ *   - `kind: 'svg'`   — inline SVG markup (can self-animate via SMIL, no JS).
+ *   - `kind: 'image'` — a URL to a static or animated (WebP/GIF/APNG) asset.
+ *   - `kind: 'lottie'`— a URL/JSON handed to a host-provided Lottie player.
+ *
+ * The starter pack below ships a handful of simple, consistent flat stickers
+ * (128×128, one visual language) so the tab is not empty out of the box, and
+ * proves the animated render path with a self-animating SMIL heart — no Lottie
+ * runtime required.
+ */
+type StickerKind = 'svg' | 'image' | 'lottie';
+interface StickerItem {
+    /** Stable id (unique within its set). */
+    id: string;
+    /** Accessible label / alt text. */
+    label: string;
+    kind: StickerKind;
+    /**
+     * The sticker payload: inline SVG markup (`svg`), an asset URL (`image`), or
+     * a Lottie JSON URL or serialized object (`lottie`).
+     */
+    source: string;
+    /** Search keywords. */
+    keywords?: string[];
+    /** True when the sticker animates (drives reduced-motion handling). */
+    animated?: boolean;
+}
+interface StickerSet {
+    /** Stable id (unique across sets). */
+    id: string;
+    /** Human-readable set name (tab tooltip). */
+    label: string;
+    /** A representative emoji/char for the set's tab icon. */
+    icon?: string;
+    stickers: StickerItem[];
+}
+/**
+ * Refraction starter sticker pack — a tasteful, consistent flat set. The
+ * `pulse-heart` sticker self-animates via SMIL to demonstrate the animated
+ * render path; the rest are static.
+ */
+declare const STARTER_STICKER_SET: StickerSet;
+
+declare const emojiPickerContainerStyles = "w-80 rounded-lg border bg-popover text-popover-foreground shadow-md motion-safe:animate-fade-in-scale origin-top";
 declare const emojiPickerSearchStyles = "w-full border-b px-3 py-2 text-sm bg-transparent outline-none placeholder:text-muted-foreground";
 declare const emojiPickerCategoryBarStyles = "flex border-b px-1";
 declare const emojiPickerCategoryTabVariants: (props?: ({
@@ -71,7 +175,11 @@ declare const emojiPickerCategoryTabVariants: (props?: ({
     className?: string;
 }) | undefined) => string;
 declare const emojiPickerGridStyles = "grid grid-cols-8 gap-0.5 p-2 max-h-64 overflow-y-auto";
-declare const emojiPickerEmojiButtonStyles = "flex items-center justify-center h-8 w-8 rounded cursor-pointer text-lg hover:bg-accent transition-colors";
+declare const emojiPickerEmojiButtonStyles = "flex items-center justify-center h-8 w-8 rounded cursor-pointer text-lg transition-transform duration-100 ease-out hover:bg-accent hover:scale-125 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none motion-reduce:hover:scale-100";
 declare const emojiPickerSectionLabelStyles = "px-2 py-1 text-xs font-medium text-muted-foreground";
+/** The swappable category/search/sticker panel; fades on category switch. */
+declare const emojiPickerPanelStyles = "motion-safe:animate-fade-in origin-top";
+/** A single sticker cell in the sticker tab. */
+declare const emojiPickerStickerButtonStyles = "flex items-center justify-center rounded-lg p-1.5 aspect-square cursor-pointer transition-transform duration-100 ease-out hover:bg-accent hover:scale-110 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none motion-reduce:hover:scale-100";
 
-export { CATEGORY_LABELS, EMOJI_CATEGORIES, EMOJI_DATA, type EmojiCategory, type EmojiEntry, type EmojiPickerAPI, type EmojiPickerProps, type EmojiPickerState, createEmojiPicker, emojiPickerCategoryBarStyles, emojiPickerCategoryTabVariants, emojiPickerContainerStyles, emojiPickerEmojiButtonStyles, emojiPickerGridStyles, emojiPickerSearchStyles, emojiPickerSectionLabelStyles, getAllEmojis };
+export { CATEGORY_LABELS, DEFAULT_TWEMOJI_BASE_URL, EMOJI_CATEGORIES, EMOJI_COUNT_TOTAL, EMOJI_DATA, type EmojiCategory, type EmojiEntry, type EmojiPickerAPI, type EmojiPickerProps, type EmojiPickerState, SHORTCODE_ALIASES, STARTER_STICKER_SET, type StickerItem, type StickerKind, type StickerSet, buildShortcodeMap, createEmojiPicker, emojiPickerCategoryBarStyles, emojiPickerCategoryTabVariants, emojiPickerContainerStyles, emojiPickerEmojiButtonStyles, emojiPickerGridStyles, emojiPickerPanelStyles, emojiPickerSearchStyles, emojiPickerSectionLabelStyles, emojiPickerStickerButtonStyles, getAllEmojis, resolveShortcode, searchEmojis, twemojiAssetUrl, twemojiFilename };

package/dist/internal/react-composer/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ComposerTrigger, ComposerCandidate, ComposerAttachmentDraft, ComposerDraftStore, ComposerValidator, ComposerSubmission, ComposerAttachment, ComposerEvent, ComposerAPI, ComposerState, ComposerConfig } from '../composer/index.js';
-export { ComposerAPI, ComposerAttachment, ComposerAttachmentDraft, ComposerAttachmentKind, ComposerAttachmentStatus, ComposerCandidate, ComposerConfig, ComposerDraft, ComposerDraftStore, ComposerEvent, ComposerMode, ComposerOutput, ComposerSelection, ComposerState, ComposerSubmission, ComposerToken, ComposerTrigger, ComposerTriggerResolver, ComposerTriggerScope, ComposerValidationResult, ComposerValidator, CounterState, EnterResult, PlacedToken, ResolvedToken, SuggestionState, composerAttachmentChipVariants, composerCounterVariants, composerFieldClass, composerMenuClass, composerMenuItemVariants, composerPrimaryActionVariants, composerSurfaceVariants, composerTokenPillClass, composerTrayClass, createComposer, toMessageAttachment } from '../composer/index.js';
+export { ComposerAPI, ComposerAttachment, ComposerAttachmentDraft, ComposerAttachmentKind, ComposerAttachmentStatus, ComposerCandidate, ComposerConfig, ComposerDraft, ComposerDraftStore, ComposerEvent, ComposerMode, ComposerOutput, ComposerSelection, ComposerState, ComposerSubmission, ComposerToken, ComposerTrigger, ComposerTriggerResolver, ComposerTriggerScope, ComposerValidationResult, ComposerValidator, CounterState, EmojiTriggerOptions, EnterResult, PlacedToken, ResolvedToken, SuggestionState, composerAccessoryPanelClass, composerAccessoryToggleVariants, composerAttachmentChipVariants, composerCounterVariants, composerFieldClass, composerMenuClass, composerMenuItemVariants, composerPrimaryActionVariants, composerSurfaceVariants, composerTokenPillClass, composerTrayClass, createComposer, createEmojiTrigger, toMessageAttachment } from '../composer/index.js';
 
 /** All user-facing text; every entry is overridable via the `strings` prop. */
 interface RefractionComposerStrings {
@@ -21,6 +21,8 @@ interface RefractionComposerStrings {
     counterLabel: (remaining: number) => string;
     editingLabel: string;
     cancelEditLabel: string;
+    /** Accessible name of the expression-panel toggle button. */
+    accessoryPanelLabel: string;
     /** Live-region announcement while the suggestion menu shows results. */
     resultsAnnouncement: (count: number) => string;
 }
@@ -56,6 +58,25 @@ interface RefractionComposerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     /** Busy/streaming: swaps the default send button for a stop button. */
     busy?: boolean;
     onStop?: () => void;
+    /**
+     * Resting fill of the composer surface. `outlined` (default) is a
+     * transparent-on-page card; `filled` uses a calm muted fill distinct from the
+     * page. Both keep a tasteful focus-visible ring.
+     */
+    surface?: 'outlined' | 'filled';
+    /**
+     * Content for the inline expression panel (e.g. an emoji picker). When set, a
+     * toggle button appears in the action row and the panel docks BELOW the field
+     * inside the composer's own stack — it never floats over or covers the text
+     * being typed. Toggle open/close is animated and reduced-motion aware.
+     */
+    accessoryPanel?: React.ReactNode;
+    /** Controlled open state for the accessory panel. */
+    accessoryPanelOpen?: boolean;
+    /** Initial open state for the accessory panel (uncontrolled). Default false. */
+    defaultAccessoryPanelOpen?: boolean;
+    /** Fired when the accessory-panel toggle changes the open state. */
+    onAccessoryPanelToggle?: (open: boolean) => void;
     autoFocus?: boolean;
     dir?: 'ltr' | 'rtl' | 'auto';
     /** Trigger configs (mention '@', slash '/', emoji ':', …). Fixed at mount. */

package/dist/internal/react-emoji-picker/index.d.cts

@@ -1,32 +1,57 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { EmojiEntry } from '../emoji-picker/index.cjs';
-export { CATEGORY_LABELS, EmojiPickerProps as CoreEmojiPickerProps, EMOJI_CATEGORIES, EMOJI_DATA, EmojiCategory, EmojiEntry, EmojiPickerAPI, EmojiPickerState, emojiPickerContainerStyles, emojiPickerEmojiButtonStyles, emojiPickerGridStyles } from '../emoji-picker/index.cjs';
+import { EmojiEntry, StickerItem, StickerSet } from '../emoji-picker/index.cjs';
+export { CATEGORY_LABELS, EmojiPickerProps as CoreEmojiPickerProps, DEFAULT_TWEMOJI_BASE_URL, EMOJI_CATEGORIES, EMOJI_COUNT_TOTAL, EMOJI_DATA, EmojiCategory, EmojiEntry, EmojiPickerAPI, EmojiPickerState, SHORTCODE_ALIASES, STARTER_STICKER_SET, StickerItem, StickerKind, StickerSet, buildShortcodeMap, emojiPickerContainerStyles, emojiPickerEmojiButtonStyles, emojiPickerGridStyles, getAllEmojis, resolveShortcode, searchEmojis, twemojiAssetUrl, twemojiFilename } from '../emoji-picker/index.cjs';
 
+/**
+ * The emoji render seam: maps an emoji entry to a React node. Swap it to change
+ * how glyphs are painted (native, Twemoji, Noto, Fluent, a Lottie player, …)
+ * WITHOUT touching the data or the picker. The default is `twemojiRenderer`,
+ * which lazily loads one small uniform SVG per glyph (WhatsApp-style "one look
+ * everywhere"); `nativeEmojiRenderer` falls back to the OS glyph.
+ */
+type EmojiRenderer = (emoji: EmojiEntry) => React.ReactNode;
+/** The sticker render seam: maps a sticker item to a React node. */
+type StickerRenderer = (sticker: StickerItem) => React.ReactNode;
+/** Renders the OS-native glyph (non-uniform across platforms). */
+declare const nativeEmojiRenderer: EmojiRenderer;
+/**
+ * Renders a uniform Twemoji SVG (CC-BY 4.0 — attribution required, see the
+ * package README). Lazily loaded per glyph; the native glyph is the `alt`
+ * fallback if the asset can't load (e.g. offline).
+ */
+declare function createTwemojiRenderer(baseUrl?: string): EmojiRenderer;
+declare const twemojiRenderer: EmojiRenderer;
+/**
+ * Default sticker renderer. Handles inline SVG (`svg`, may self-animate via
+ * SMIL) and image/animated-WebP URLs (`image`). For `lottie`, a host must
+ * supply its own `stickerRenderer` with a Lottie player; the default shows the
+ * static poster if `source` is a URL, else the label.
+ */
+declare const defaultStickerRenderer: StickerRenderer;
 interface EmojiPickerProps {
+    /** Fired with the selected emoji entry. */
     onSelect?: (emoji: EmojiEntry) => void;
+    /** Fired with the selected sticker. */
+    onStickerSelect?: (sticker: StickerItem) => void;
+    /** Initial recents (most-recent-first). */
     recentEmojis?: EmojiEntry[];
     className?: string;
+    /** Emoji render seam. Default: uniform Twemoji. */
+    emojiRenderer?: EmojiRenderer;
+    /** Base URL for Twemoji assets (self-host to avoid the public CDN). */
+    twemojiBaseUrl?: string;
+    /**
+     * Sticker sets for the sticker tab. Defaults to the bundled starter pack;
+     * pass `[]` to hide the sticker tab entirely.
+     */
+    stickerSets?: StickerSet[];
+    /** Sticker render seam. Default: `defaultStickerRenderer`. */
+    stickerRenderer?: StickerRenderer;
 }
-declare function EmojiPicker({ onSelect, recentEmojis: initialRecent, className }: EmojiPickerProps): React.DetailedReactHTMLElement<{
-    role?: string | undefined;
-    tabIndex?: number | undefined;
-    'aria-label'?: string | undefined;
-    'aria-labelledby'?: string | undefined;
-    'aria-describedby'?: string | undefined;
-    'aria-controls'?: string | undefined;
-    'aria-expanded'?: boolean | undefined;
-    'aria-selected'?: boolean | undefined;
-    'aria-hidden'?: boolean | undefined;
-    'aria-disabled'?: boolean | undefined;
-    'aria-pressed'?: boolean | "mixed" | undefined;
-    'aria-checked'?: boolean | "mixed" | undefined;
-    'aria-current'?: boolean | "page" | "step" | "location" | "date" | "time" | undefined;
-    'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-atomic'?: boolean | undefined;
-    className: string;
-}, HTMLElement>;
+declare function EmojiPicker({ onSelect, onStickerSelect, recentEmojis: initialRecent, className, emojiRenderer, twemojiBaseUrl, stickerSets, stickerRenderer, }: EmojiPickerProps): react_jsx_runtime.JSX.Element;
 declare namespace EmojiPicker {
     var displayName: string;
 }
 
-export { EmojiPicker, type EmojiPickerProps };
+export { EmojiPicker, type EmojiPickerProps, type EmojiRenderer, type StickerRenderer, createTwemojiRenderer, defaultStickerRenderer, nativeEmojiRenderer, twemojiRenderer };

package/dist/internal/react-emoji-picker/index.d.ts

@@ -1,32 +1,57 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { EmojiEntry } from '../emoji-picker/index.js';
-export { CATEGORY_LABELS, EmojiPickerProps as CoreEmojiPickerProps, EMOJI_CATEGORIES, EMOJI_DATA, EmojiCategory, EmojiEntry, EmojiPickerAPI, EmojiPickerState, emojiPickerContainerStyles, emojiPickerEmojiButtonStyles, emojiPickerGridStyles } from '../emoji-picker/index.js';
+import { EmojiEntry, StickerItem, StickerSet } from '../emoji-picker/index.js';
+export { CATEGORY_LABELS, EmojiPickerProps as CoreEmojiPickerProps, DEFAULT_TWEMOJI_BASE_URL, EMOJI_CATEGORIES, EMOJI_COUNT_TOTAL, EMOJI_DATA, EmojiCategory, EmojiEntry, EmojiPickerAPI, EmojiPickerState, SHORTCODE_ALIASES, STARTER_STICKER_SET, StickerItem, StickerKind, StickerSet, buildShortcodeMap, emojiPickerContainerStyles, emojiPickerEmojiButtonStyles, emojiPickerGridStyles, getAllEmojis, resolveShortcode, searchEmojis, twemojiAssetUrl, twemojiFilename } from '../emoji-picker/index.js';
 
+/**
+ * The emoji render seam: maps an emoji entry to a React node. Swap it to change
+ * how glyphs are painted (native, Twemoji, Noto, Fluent, a Lottie player, …)
+ * WITHOUT touching the data or the picker. The default is `twemojiRenderer`,
+ * which lazily loads one small uniform SVG per glyph (WhatsApp-style "one look
+ * everywhere"); `nativeEmojiRenderer` falls back to the OS glyph.
+ */
+type EmojiRenderer = (emoji: EmojiEntry) => React.ReactNode;
+/** The sticker render seam: maps a sticker item to a React node. */
+type StickerRenderer = (sticker: StickerItem) => React.ReactNode;
+/** Renders the OS-native glyph (non-uniform across platforms). */
+declare const nativeEmojiRenderer: EmojiRenderer;
+/**
+ * Renders a uniform Twemoji SVG (CC-BY 4.0 — attribution required, see the
+ * package README). Lazily loaded per glyph; the native glyph is the `alt`
+ * fallback if the asset can't load (e.g. offline).
+ */
+declare function createTwemojiRenderer(baseUrl?: string): EmojiRenderer;
+declare const twemojiRenderer: EmojiRenderer;
+/**
+ * Default sticker renderer. Handles inline SVG (`svg`, may self-animate via
+ * SMIL) and image/animated-WebP URLs (`image`). For `lottie`, a host must
+ * supply its own `stickerRenderer` with a Lottie player; the default shows the
+ * static poster if `source` is a URL, else the label.
+ */
+declare const defaultStickerRenderer: StickerRenderer;
 interface EmojiPickerProps {
+    /** Fired with the selected emoji entry. */
     onSelect?: (emoji: EmojiEntry) => void;
+    /** Fired with the selected sticker. */
+    onStickerSelect?: (sticker: StickerItem) => void;
+    /** Initial recents (most-recent-first). */
     recentEmojis?: EmojiEntry[];
     className?: string;
+    /** Emoji render seam. Default: uniform Twemoji. */
+    emojiRenderer?: EmojiRenderer;
+    /** Base URL for Twemoji assets (self-host to avoid the public CDN). */
+    twemojiBaseUrl?: string;
+    /**
+     * Sticker sets for the sticker tab. Defaults to the bundled starter pack;
+     * pass `[]` to hide the sticker tab entirely.
+     */
+    stickerSets?: StickerSet[];
+    /** Sticker render seam. Default: `defaultStickerRenderer`. */
+    stickerRenderer?: StickerRenderer;
 }
-declare function EmojiPicker({ onSelect, recentEmojis: initialRecent, className }: EmojiPickerProps): React.DetailedReactHTMLElement<{
-    role?: string | undefined;
-    tabIndex?: number | undefined;
-    'aria-label'?: string | undefined;
-    'aria-labelledby'?: string | undefined;
-    'aria-describedby'?: string | undefined;
-    'aria-controls'?: string | undefined;
-    'aria-expanded'?: boolean | undefined;
-    'aria-selected'?: boolean | undefined;
-    'aria-hidden'?: boolean | undefined;
-    'aria-disabled'?: boolean | undefined;
-    'aria-pressed'?: boolean | "mixed" | undefined;
-    'aria-checked'?: boolean | "mixed" | undefined;
-    'aria-current'?: boolean | "page" | "step" | "location" | "date" | "time" | undefined;
-    'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-atomic'?: boolean | undefined;
-    className: string;
-}, HTMLElement>;
+declare function EmojiPicker({ onSelect, onStickerSelect, recentEmojis: initialRecent, className, emojiRenderer, twemojiBaseUrl, stickerSets, stickerRenderer, }: EmojiPickerProps): react_jsx_runtime.JSX.Element;
 declare namespace EmojiPicker {
     var displayName: string;
 }
 
-export { EmojiPicker, type EmojiPickerProps };
+export { EmojiPicker, type EmojiPickerProps, type EmojiRenderer, type StickerRenderer, createTwemojiRenderer, defaultStickerRenderer, nativeEmojiRenderer, twemojiRenderer };

package/dist/theme.js

@@ -1,5 +1,5 @@
 'use client';
-import { devWarn } from './chunk-VZLV27H2.js';
+import { devWarn } from './chunk-4A4BW3GR.js';
 import * as React2 from 'react';
 
 // ../theme/dist/index.js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/react",
-  "version": "0.17.1",
+  "version": "0.18.1",
   "description": "All Refraction UI React components in one package — headless, accessible, zero-dependency",
   "type": "module",
   "main": "./dist/index.js",