@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.30

package/dist/components/forms/Mention/Mention.theme.js

@@ -9,48 +9,41 @@ const mentionTheme = {
     wrapperStyle: formsBaseTheme.wrapperStyle,
     // Input group container with outline and focus ring
     inputGroupStyle: formsBaseTheme.inputGroupBaseStyle,
-    // JS-driven focus ring (applied when textarea is focused)
-    inputGroupFocusStyle: "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 " +
-        "ring-4 ring-[var(--color-primary)]/10 " +
-        "dark:outline-[var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
-    // Base textarea styles
-    textareaStyle: `${formsBaseTheme.controlBaseStyle} resize-y`,
+    // JS-driven focus ring (applied when editable div is focused)
+    inputGroupFocusStyle: formsBaseTheme.focusStates.default,
+    // Invalid state — inset box-shadow + danger fill (NOT border/ring; see CLAUDE.md §9)
+    invalidStyle: formsBaseTheme.states.invalid,
+    // Invalid + focused — danger inset shadow + danger ring glow
+    invalidFocusStyle: formsBaseTheme.focusStates.invalid,
+    // Base editable div styles
+    editableStyle: `${formsBaseTheme.controlBaseStyle} whitespace-pre-wrap break-words overflow-y-auto cursor-text`,
     // Size variants
     sizes: {
         sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.textareaHeight}`,
         md: `${formsBaseTheme.sizes.md.text} ${formsBaseTheme.sizes.md.padding} ${formsBaseTheme.sizes.md.textareaHeight}`,
         lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.textareaHeight}`,
     },
+    // Inline mention Tag chip styles.
     // Dropdown container - reuses the shared dropdown styles
-    dropdownStyle: formsBaseTheme.dropdownStyles.container + " py-1",
-    // Individual suggestion item
+    // p-1 (not py-1) so MenuItem rows' rounded highlight insets evenly on all
+    // sides instead of running flush to the container's left/right edges.
+    dropdownStyle: formsBaseTheme.dropdownStyles.container +
+        " p-1",
+    // Suggestion rows render via the shared MenuItem primitive (avatar →
+    // startContent, label → children, description → subtitle). These two styles
+    // are only used by the custom `renderSuggestion` escape hatch, which wraps
+    // the consumer's node in a plain row that still tracks hover/highlight.
     suggestionStyle: "relative flex items-center gap-2.5 cursor-pointer select-none py-2 px-3 " +
         "text-[var(--color-text-primary)] " +
         "hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-50)]/50 " +
         "dark:hover:text-[var(--color-primary-400)] dark:hover:bg-[var(--color-primary-400)]/10",
-    // Highlighted suggestion (keyboard navigation)
+    // Highlighted suggestion (keyboard navigation) — custom renderSuggestion path
     suggestionHighlightedStyle: "text-[var(--color-primary)] bg-[var(--color-primary-50)]/50 " +
         "dark:text-[var(--color-primary-400)] dark:bg-[var(--color-primary-400)]/10",
-    // Avatar image
-    suggestionAvatarStyle: "size-7 rounded-full object-cover shrink-0 " +
-        "bg-[var(--color-background-tertiary)] dark:bg-[var(--color-neutral-700)]",
-    // Avatar fallback (initials circle)
-    suggestionAvatarFallbackStyle: "size-7 rounded-full shrink-0 flex items-center justify-center text-xs font-medium " +
-        "bg-[var(--color-primary-100)] text-[var(--color-primary-700)] " +
-        "dark:bg-[var(--color-primary-900)] dark:text-[var(--color-primary-300)]",
-    // Suggestion label text
-    suggestionLabelStyle: "text-sm font-medium truncate",
-    // Suggestion description text
-    suggestionDescriptionStyle: "text-xs text-[var(--color-text-muted)] truncate " +
-        "dark:text-[var(--color-neutral-500)]",
     // Empty state
     emptyMessageStyle: formsBaseTheme.dropdownStyles.emptyMessage,
-    // Loading state
-    loadingStyle: "py-3 px-3 text-center text-[var(--color-text-muted)] " +
-        "dark:text-[var(--color-neutral-500)]",
-    // Highlighted mention text in the overlay
-    mentionHighlightStyle: "text-[var(--color-primary)] font-medium " +
-        "dark:text-[var(--color-primary-400)]",
+    // Loading state (--color-text-muted auto-flips for dark mode)
+    loadingStyle: "py-3 px-3 text-center text-[var(--color-text-muted)]",
 };
 
 export { mentionTheme };

package/dist/components/forms/Mention/Mention.types.d.ts

@@ -1,4 +1,6 @@
 import React from "react";
+import type { TagSize } from "../../core/Tag/Tag.types";
+import type { SurfaceElevation } from "../../../theme/SurfaceContext";
 /**
  * A single suggestion item displayed in the mention dropdown.
  */
@@ -14,6 +16,37 @@ export interface MentionSuggestion {
     /** Allow arbitrary metadata */
     [key: string]: unknown;
 }
+/**
+ * Rich mention data returned via onMentionsChange.
+ */
+export interface MentionData {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** The trigger character used (e.g. '@', '#') */
+    trigger: string;
+    /** Optional avatar URL */
+    avatar?: string;
+}
+/**
+ * A text segment in the content model.
+ */
+export interface TextSegment {
+    type: "text";
+    text: string;
+}
+/**
+ * A mention segment in the content model.
+ */
+export interface MentionSegment {
+    type: "mention";
+    data: MentionData;
+}
+/**
+ * A content segment is either text or a mention.
+ */
+export type ContentSegment = TextSegment | MentionSegment;
 /**
  * Configuration for a single trigger character and its suggestions.
  */
@@ -39,46 +72,42 @@ export interface MentionTheme {
     inputGroupStyle: string;
     /** JS-driven focus ring style */
     inputGroupFocusStyle: string;
-    /** Base textarea style */
-    textareaStyle: string;
-    /** Size variants for the textarea */
+    /** Invalid state style (inset box-shadow + danger fill) */
+    invalidStyle: string;
+    /** Invalid + focused style (danger inset shadow + ring glow) */
+    invalidFocusStyle: string;
+    /** Base editable div style */
+    editableStyle: string;
+    /** Size variants for the editable div */
     sizes: Record<MentionSize, string>;
     /** Dropdown container style */
     dropdownStyle: string;
-    /** Individual suggestion item style */
+    /** Suggestion row style — used only by the custom `renderSuggestion` path
+     *  (default rows render via the shared MenuItem primitive). */
     suggestionStyle: string;
-    /** Highlighted (keyboard-focused) suggestion style */
+    /** Highlighted (keyboard-focused) suggestion style — custom renderSuggestion path */
     suggestionHighlightedStyle: string;
-    /** Avatar style inside a suggestion */
-    suggestionAvatarStyle: string;
-    /** Avatar fallback (initials) style */
-    suggestionAvatarFallbackStyle: string;
-    /** Suggestion label text style */
-    suggestionLabelStyle: string;
-    /** Suggestion description text style */
-    suggestionDescriptionStyle: string;
     /** Empty state message style */
     emptyMessageStyle: string;
     /** Loading state style */
     loadingStyle: string;
-    /** Highlighted mention text overlay style */
-    mentionHighlightStyle: string;
 }
 /**
  * Partial theme overrides for the Mention component.
  */
 export type MentionThemeOverrides = Partial<MentionTheme>;
+export type MentionState = "default" | "disabled" | "invalid";
 /**
  * Props for the Mention component.
  */
-export interface MentionProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "value" | "defaultValue"> {
+export interface MentionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
     /** Multiple trigger configurations (e.g. '@' for users, '#' for tags) */
     triggers?: MentionTrigger[];
     /** Simple API: suggestions for the default '@' trigger */
     suggestions?: MentionSuggestion[];
     /** Simple API: async search callback for the default '@' trigger */
     onSearch?: (query: string) => void;
-    /** Controlled value */
+    /** Controlled value (plain text with trigger+label for mentions) */
     value?: string;
     /** Uncontrolled default value */
     defaultValue?: string;
@@ -86,13 +115,15 @@ export interface MentionProps extends Omit<React.TextareaHTMLAttributes<HTMLText
     onChange?: (value: string) => void;
     /** Callback when a suggestion is selected */
     onMentionSelect?: (suggestion: MentionSuggestion, trigger: string) => void;
+    /** Callback with current mention data whenever mentions change */
+    onMentionsChange?: (mentions: MentionData[]) => void;
     /** Placeholder text */
     placeholder?: string;
     /** Size variant */
     size?: MentionSize;
     /** Maximum number of suggestions shown */
     maxSuggestions?: number;
-    /** Additional className for the textarea */
+    /** Additional className for the editable div */
     className?: string;
     /** Additional className for the wrapper */
     wrapperClassName?: string;
@@ -100,12 +131,38 @@ export interface MentionProps extends Omit<React.TextareaHTMLAttributes<HTMLText
     dropdownClassName?: string;
     /** Theme overrides */
     theme?: MentionThemeOverrides;
+    /** Validation/interaction state */
+    state?: MentionState;
     /** Whether the mention input is disabled */
     disabled?: boolean;
+    /** Helper text rendered below the mention input */
+    helperText?: React.ReactNode;
+    /** Whether the field is required */
+    required?: boolean;
     /** Custom renderer for suggestion items */
     renderSuggestion?: (suggestion: MentionSuggestion, isHighlighted: boolean, trigger: string) => React.ReactNode;
     /** Message shown when no suggestions match */
     emptyMessage?: string;
     /** Whether a search is currently loading */
     loading?: boolean;
+    /** Size of the inline mention Tag chips */
+    mentionTagSize?: TagSize;
+    /** Additional className for inline mention Tag chips */
+    mentionTagClassName?: string;
+    /**
+     * Show a remove (×) button on each inline mention chip so it can be deleted
+     * by click as well as by keyboard. Defaults to `true`.
+     */
+    mentionTagRemovable?: boolean;
+    /** Number of visible text rows (controls min-height) */
+    rows?: number;
+    /** Label rendered above the mention input */
+    label?: string;
+    /**
+     * Pin the suggestion dropdown surface elevation rung (overrides the automatic
+     * relative lift) — a rung number (1–8) or a semantic alias.
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the dropdown's base rung. */
+    lift?: boolean;
 }

package/dist/components/forms/Mention/Mention.utils.d.ts

@@ -0,0 +1,42 @@
+import type { ContentSegment, MentionData } from "./Mention.types";
+export declare const MENTION_ATTR = "data-mention-id";
+/**
+ * Serialize segments to a plain text string.
+ * Mentions become `trigger + label` (e.g. "@Sarah Wilson").
+ */
+export declare const serializeSegments: (segments: ContentSegment[]) => string;
+/**
+ * Serialize segments but replace mention content with a neutral placeholder.
+ * This prevents `detectActiveMention` from matching trigger characters
+ * that belong to already-resolved mentions.
+ */
+export declare const serializeSegmentsMasked: (segments: ContentSegment[]) => string;
+/**
+ * Merge adjacent text segments and ensure the array starts/ends with text.
+ * Returns a new array (never mutates input).
+ */
+export declare const normalizeSegments: (segments: ContentSegment[]) => ContentSegment[];
+/**
+ * Insert a mention into the segments array at the given plain-text position.
+ * `startIndex` is the position of the trigger character.
+ * `replaceLength` includes the trigger + query length.
+ */
+export declare const insertMentionIntoSegments: (segments: ContentSegment[], mention: MentionData, startIndex: number, replaceLength: number) => ContentSegment[];
+/**
+ * Get the plain text offset of the current caret position within a
+ * contentEditable container. Mention nodes count as their trigger+label length.
+ */
+export declare const getPlainTextOffset: (container: HTMLElement) => number | null;
+/**
+ * Parse the DOM of a contentEditable container back into segments.
+ * Text nodes become TextSegments, elements with MENTION_ATTR become MentionSegments.
+ */
+export declare const parseDOMToSegments: (container: HTMLElement, mentionMap: Map<string, MentionData>) => ContentSegment[];
+/**
+ * Place the caret right after a given node inside a contentEditable container.
+ */
+export declare const setCaretAfterNode: (node: Node) => void;
+/**
+ * Set the caret at a specific plain-text offset within a contentEditable container.
+ */
+export declare const setCaretAtOffset: (container: HTMLElement, targetOffset: number) => void;

package/dist/components/forms/Mention/Mention.utils.js

@@ -0,0 +1,314 @@
+"use client";
+// Data attribute used to identify mention nodes in the DOM
+const MENTION_ATTR = "data-mention-id";
+/**
+ * True when `node` lives inside a mention chip (its avatar/label text nodes),
+ * as opposed to being the mention element itself. A TreeWalker descends into a
+ * FILTER_ACCEPTed mention element, so without rejecting these inner nodes the
+ * offset walkers would count a chip's inner text and land the caret inside it
+ * (chips are contentEditable=false). Stops at `container` (the walker root).
+ */
+const isInsideMention = (node, container) => {
+    let parent = node.parentNode;
+    while (parent && parent !== container) {
+        if (parent.nodeType === Node.ELEMENT_NODE &&
+            parent.hasAttribute(MENTION_ATTR)) {
+            return true;
+        }
+        parent = parent.parentNode;
+    }
+    return false;
+};
+/**
+ * Serialize segments to a plain text string.
+ * Mentions become `trigger + label` (e.g. "@Sarah Wilson").
+ */
+const serializeSegments = (segments) => {
+    return segments
+        .map((seg) => seg.type === "text" ? seg.text : `${seg.data.trigger}${seg.data.label}`)
+        .join("");
+};
+/**
+ * Serialize segments but replace mention content with a neutral placeholder.
+ * This prevents `detectActiveMention` from matching trigger characters
+ * that belong to already-resolved mentions.
+ */
+const serializeSegmentsMasked = (segments) => {
+    return segments
+        .map((seg) => seg.type === "text"
+        ? seg.text
+        : "\uFFFC".repeat(seg.data.trigger.length + seg.data.label.length))
+        .join("");
+};
+/**
+ * Merge adjacent text segments and ensure the array starts/ends with text.
+ * Returns a new array (never mutates input).
+ */
+const normalizeSegments = (segments) => {
+    if (segments.length === 0)
+        return [{ type: "text", text: "" }];
+    const result = [];
+    for (const seg of segments) {
+        if (seg.type === "text" &&
+            result.length > 0 &&
+            result[result.length - 1].type === "text") {
+            // Merge adjacent text segments
+            result[result.length - 1].text += seg.text;
+        }
+        else {
+            // Clone to avoid mutating input
+            result.push(seg.type === "text"
+                ? { type: "text", text: seg.text }
+                : { type: "mention", data: { ...seg.data } });
+        }
+    }
+    // Ensure text bookends
+    if (result[0].type !== "text") {
+        result.unshift({ type: "text", text: "" });
+    }
+    if (result[result.length - 1].type !== "text") {
+        result.push({ type: "text", text: "" });
+    }
+    return result;
+};
+/**
+ * Insert a mention into the segments array at the given plain-text position.
+ * `startIndex` is the position of the trigger character.
+ * `replaceLength` includes the trigger + query length.
+ */
+const insertMentionIntoSegments = (segments, mention, startIndex, replaceLength) => {
+    const newSegments = [];
+    let offset = 0;
+    for (const seg of segments) {
+        if (seg.type === "mention") {
+            const mentionText = `${seg.data.trigger}${seg.data.label}`;
+            const segLen = mentionText.length;
+            if (offset + segLen <= startIndex ||
+                offset >= startIndex + replaceLength) {
+                newSegments.push({ type: "mention", data: { ...seg.data } });
+            }
+            // If the mention overlaps with replacement range, skip it
+            offset += segLen;
+        }
+        else {
+            const segLen = seg.text.length;
+            const segStart = offset;
+            const segEnd = offset + segLen;
+            if (segEnd <= startIndex || segStart >= startIndex + replaceLength) {
+                // Entirely outside the replacement range
+                newSegments.push({ type: "text", text: seg.text });
+            }
+            else {
+                // This text segment overlaps the replacement range
+                const beforeStart = Math.max(0, startIndex - segStart);
+                const afterStart = Math.min(segLen, startIndex + replaceLength - segStart);
+                const before = seg.text.slice(0, beforeStart);
+                const after = seg.text.slice(afterStart);
+                if (before) {
+                    newSegments.push({ type: "text", text: before });
+                }
+                newSegments.push({ type: "mention", data: mention });
+                // Add a trailing space after the mention
+                newSegments.push({ type: "text", text: " " + after });
+            }
+            offset += segLen;
+        }
+    }
+    return normalizeSegments(newSegments);
+};
+/**
+ * Get the plain text offset of the current caret position within a
+ * contentEditable container. Mention nodes count as their trigger+label length.
+ */
+const getPlainTextOffset = (container) => {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0)
+        return null;
+    const range = sel.getRangeAt(0);
+    if (!container.contains(range.startContainer))
+        return null;
+    let offset = 0;
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, {
+        acceptNode: (node) => {
+            // Mention element: count it atomically (its inner nodes are rejected below)
+            if (node.nodeType === Node.ELEMENT_NODE &&
+                node.hasAttribute(MENTION_ATTR)) {
+                return NodeFilter.FILTER_ACCEPT;
+            }
+            // Reject the chip's inner avatar/label nodes so the walker never
+            // descends into a mention or counts its inner text twice.
+            if (isInsideMention(node, container))
+                return NodeFilter.FILTER_REJECT;
+            if (node.nodeType === Node.TEXT_NODE)
+                return NodeFilter.FILTER_ACCEPT;
+            // Skip non-mention element nodes but traverse their children
+            return NodeFilter.FILTER_SKIP;
+        },
+    });
+    let node;
+    while ((node = walker.nextNode())) {
+        if (node === range.startContainer) {
+            // We're in a text node that contains the caret
+            return offset + range.startOffset;
+        }
+        if (node.nodeType === Node.TEXT_NODE) {
+            // Check if the range start is within a parent that is this text node's parent
+            if (node.parentNode === range.startContainer) {
+                // Range.startContainer is the parent element, startOffset is child index
+                // Check if this text node comes before the caret child index
+                const children = Array.from(range.startContainer.childNodes);
+                const nodeIndex = children.indexOf(node);
+                if (nodeIndex < range.startOffset) {
+                    offset += (node.textContent || "").length;
+                }
+                else {
+                    return offset;
+                }
+            }
+            else {
+                offset += (node.textContent || "").length;
+            }
+        }
+        else if (node.nodeType === Node.ELEMENT_NODE &&
+            node.hasAttribute(MENTION_ATTR)) {
+            // Check if caret is right after this mention element
+            if (range.startContainer === container ||
+                range.startContainer === node.parentNode) {
+                const children = Array.from(range.startContainer.childNodes);
+                const nodeIndex = children.indexOf(node);
+                if (nodeIndex < range.startOffset) {
+                    node.getAttribute(MENTION_ATTR) || "";
+                    const label = node.getAttribute("data-mention-label") || "";
+                    const trigger = node.getAttribute("data-mention-trigger") || "";
+                    offset += trigger.length + label.length;
+                }
+                else {
+                    return offset;
+                }
+            }
+            else {
+                const trigger = node.getAttribute("data-mention-trigger") || "";
+                const label = node.getAttribute("data-mention-label") || "";
+                offset += trigger.length + label.length;
+            }
+        }
+    }
+    // Caret might be at the very end
+    if (range.startContainer === container) {
+        return offset;
+    }
+    return offset;
+};
+/**
+ * Parse the DOM of a contentEditable container back into segments.
+ * Text nodes become TextSegments, elements with MENTION_ATTR become MentionSegments.
+ */
+const parseDOMToSegments = (container, mentionMap) => {
+    const segments = [];
+    const processNode = (node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent || "";
+            if (text) {
+                segments.push({ type: "text", text });
+            }
+        }
+        else if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node;
+            if (el.hasAttribute(MENTION_ATTR)) {
+                const id = el.getAttribute(MENTION_ATTR) || "";
+                const data = mentionMap.get(id);
+                if (data) {
+                    segments.push({ type: "mention", data: { ...data } });
+                }
+                // Don't recurse into mention nodes
+                return;
+            }
+            // Handle <br> as newline
+            if (el.tagName === "BR") {
+                segments.push({ type: "text", text: "\n" });
+                return;
+            }
+            // Handle block-level elements that create newlines (div, p)
+            const isBlock = el.tagName === "DIV" || el.tagName === "P";
+            if (isBlock && segments.length > 0) {
+                // Add newline before block content (if not first)
+                const lastSeg = segments[segments.length - 1];
+                if (lastSeg.type === "text" && !lastSeg.text.endsWith("\n")) {
+                    segments.push({ type: "text", text: "\n" });
+                }
+            }
+            // Recurse into children
+            for (const child of Array.from(el.childNodes)) {
+                processNode(child);
+            }
+        }
+    };
+    for (const child of Array.from(container.childNodes)) {
+        processNode(child);
+    }
+    return normalizeSegments(segments);
+};
+/**
+ * Set the caret at a specific plain-text offset within a contentEditable container.
+ */
+const setCaretAtOffset = (container, targetOffset) => {
+    const sel = window.getSelection();
+    if (!sel)
+        return;
+    let remaining = targetOffset;
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, {
+        acceptNode: (node) => {
+            // Mention element: count it atomically (its inner nodes are rejected below)
+            if (node.nodeType === Node.ELEMENT_NODE &&
+                node.hasAttribute(MENTION_ATTR)) {
+                return NodeFilter.FILTER_ACCEPT;
+            }
+            // Reject the chip's inner avatar/label nodes so the caret is never
+            // placed inside a mention (chips are contentEditable=false).
+            if (isInsideMention(node, container))
+                return NodeFilter.FILTER_REJECT;
+            if (node.nodeType === Node.TEXT_NODE)
+                return NodeFilter.FILTER_ACCEPT;
+            return NodeFilter.FILTER_SKIP;
+        },
+    });
+    let node;
+    while ((node = walker.nextNode())) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const len = (node.textContent || "").length;
+            if (remaining <= len) {
+                const range = document.createRange();
+                range.setStart(node, remaining);
+                range.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(range);
+                return;
+            }
+            remaining -= len;
+        }
+        else if (node.nodeType === Node.ELEMENT_NODE &&
+            node.hasAttribute(MENTION_ATTR)) {
+            const trigger = node.getAttribute("data-mention-trigger") || "";
+            const label = node.getAttribute("data-mention-label") || "";
+            const mentionLen = trigger.length + label.length;
+            if (remaining <= mentionLen) {
+                // Place caret after this mention
+                const range = document.createRange();
+                range.setStartAfter(node);
+                range.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(range);
+                return;
+            }
+            remaining -= mentionLen;
+        }
+    }
+    // If we didn't place the caret, put it at the end
+    const range = document.createRange();
+    range.selectNodeContents(container);
+    range.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(range);
+};
+
+export { MENTION_ATTR, getPlainTextOffset, insertMentionIntoSegments, normalizeSegments, parseDOMToSegments, serializeSegments, serializeSegmentsMasked, setCaretAtOffset };

package/dist/components/forms/Mention/index.d.ts

@@ -1,3 +1,3 @@
 export { Mention } from "./Mention";
-export type { MentionProps, MentionSuggestion, MentionTrigger, MentionSize, MentionTheme, MentionThemeOverrides, } from "./Mention.types";
+export type { MentionProps, MentionSuggestion, MentionTrigger, MentionSize, MentionData, ContentSegment, TextSegment, MentionSegment, MentionTheme, MentionThemeOverrides, } from "./Mention.types";
 export { mentionTheme } from "./Mention.theme";

package/dist/components/forms/Radio/Radio.animations.d.ts

@@ -0,0 +1,10 @@
+import { Variants } from "motion/react";
+/**
+ * Radio dot spring animation
+ * Scales in with a subtle bounce on select, fades out smoothly on deselect
+ */
+export declare const radioDotVariants: Variants;
+/**
+ * Reduced motion variants — instant opacity toggle, no scale
+ */
+export declare const reducedMotionDotVariants: Variants;

package/dist/components/forms/Radio/Radio.animations.js

@@ -0,0 +1,38 @@
+"use client";
+/**
+ * Radio dot spring animation
+ * Scales in with a subtle bounce on select, fades out smoothly on deselect
+ */
+const radioDotVariants = {
+    unchecked: {
+        scale: 0,
+        opacity: 0,
+        x: "-50%",
+        y: "-50%",
+        transition: {
+            duration: 0.15,
+            ease: "easeOut",
+        },
+    },
+    checked: {
+        scale: 1,
+        opacity: 1,
+        x: "-50%",
+        y: "-50%",
+        transition: {
+            type: "spring",
+            stiffness: 400,
+            damping: 15,
+            mass: 0.5,
+        },
+    },
+};
+/**
+ * Reduced motion variants — instant opacity toggle, no scale
+ */
+const reducedMotionDotVariants = {
+    unchecked: { opacity: 0, x: "-50%", y: "-50%" },
+    checked: { opacity: 1, x: "-50%", y: "-50%" },
+};
+
+export { radioDotVariants, reducedMotionDotVariants };

package/dist/components/forms/Radio/Radio.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { RadioProps } from "./Radio.types";
-/**
- * Radio component for selecting one option from a group
- */
-export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>> & {
+    Group: React.ForwardRefExoticComponent<import("./Radio.types").RadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
+};