@flikk/ui 1.0.0-beta.1 → 1.0.0-beta.11

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

@@ -0,0 +1,151 @@
+import React from "react";
+import type { TagSize } from "../../core/Tag/Tag.types";
+/**
+ * A single suggestion item displayed in the mention dropdown.
+ */
+export interface MentionSuggestion {
+    /** Unique identifier for the suggestion */
+    id: string;
+    /** Display label (e.g. user name, tag name) */
+    label: string;
+    /** Optional avatar URL */
+    avatar?: string;
+    /** Optional description line (e.g. job title, email) */
+    description?: string;
+    /** 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.
+ */
+export interface MentionTrigger {
+    /** The trigger character (e.g. '@', '#') */
+    trigger: string;
+    /** Available suggestions for this trigger */
+    suggestions: MentionSuggestion[];
+    /** Async search callback invoked when the user types after the trigger */
+    onSearch?: (query: string) => void | Promise<void>;
+}
+/**
+ * Size variants for the Mention component.
+ */
+export type MentionSize = "sm" | "md" | "lg";
+/**
+ * Theme configuration for the Mention component.
+ */
+export interface MentionTheme {
+    /** Outermost wrapper style */
+    wrapperStyle: string;
+    /** Input group container style (border, focus ring) */
+    inputGroupStyle: string;
+    /** JS-driven focus ring style */
+    inputGroupFocusStyle: string;
+    /** Base editable div style */
+    editableStyle: string;
+    /** Size variants for the editable div */
+    sizes: Record<MentionSize, string>;
+    /** Inline mention Tag chip style */
+    mentionTagStyle: string;
+    /** Dropdown container style */
+    dropdownStyle: string;
+    /** Individual suggestion item style */
+    suggestionStyle: string;
+    /** Highlighted (keyboard-focused) suggestion style */
+    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;
+}
+/**
+ * Partial theme overrides for the Mention component.
+ */
+export type MentionThemeOverrides = Partial<MentionTheme>;
+/**
+ * Props for the Mention component.
+ */
+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 (plain text with trigger+label for mentions) */
+    value?: string;
+    /** Uncontrolled default value */
+    defaultValue?: string;
+    /** Change callback with the full text value */
+    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 editable div */
+    className?: string;
+    /** Additional className for the wrapper */
+    wrapperClassName?: string;
+    /** Additional className for the dropdown */
+    dropdownClassName?: string;
+    /** Theme overrides */
+    theme?: MentionThemeOverrides;
+    /** Whether the mention input is disabled */
+    disabled?: 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;
+    /** Number of visible text rows (controls min-height) */
+    rows?: number;
+}

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,285 @@
+// Data attribute used to identify mention nodes in the DOM
+const MENTION_ATTR = "data-mention-id";
+/**
+ * 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) => {
+            if (node.nodeType === Node.TEXT_NODE)
+                return NodeFilter.FILTER_ACCEPT;
+            if (node.nodeType === Node.ELEMENT_NODE &&
+                node.hasAttribute(MENTION_ATTR)) {
+                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) => {
+            if (node.nodeType === Node.TEXT_NODE)
+                return NodeFilter.FILTER_ACCEPT;
+            if (node.nodeType === Node.ELEMENT_NODE &&
+                node.hasAttribute(MENTION_ATTR)) {
+                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

@@ -0,0 +1,3 @@
+export { Mention } from "./Mention";
+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.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>>;
+};

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

@@ -1,29 +1,42 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState } from 'react';
+import React__default, { useId } from 'react';
 import { radioTheme } from './Radio.theme.js';
-import { FormLabel } from '../FormLabel/FormLabel.js';
+import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
 import { cn } from '../../../utils/cn.js';
+import { useRadioGroupContext } from './RadioContext.js';
+import { RadioGroup } from './RadioGroup.js';
 
 /**
  * Radio component for selecting one option from a group
  */
-const Radio = React__default.forwardRef(({ id, name, value, checked: controlledChecked, onChange, label, description, state = "default", size = "md", className, ...restProps }, ref) => {
-    const [internalChecked, setInternalChecked] = useState(false);
-    // Determine if component is controlled or uncontrolled
-    const isControlled = controlledChecked !== undefined;
-    const isChecked = isControlled ? controlledChecked : internalChecked;
-    // Derive state flags
+const RadioComponent = React__default.forwardRef(({ id: idProp, name: nameProp, value, checked: checkedProp, defaultChecked, onChange, label, description, state: stateProp = "default", size: sizeProp = "md", className, ...restProps }, ref) => {
+    var _a, _b, _c, _d;
+    const autoId = useId();
+    const groupContext = useRadioGroupContext();
+    // Resolve props from group context or individual props
+    const id = idProp !== null && idProp !== void 0 ? idProp : autoId;
+    const name = (_b = (_a = groupContext === null || groupContext === void 0 ? void 0 : groupContext.name) !== null && _a !== void 0 ? _a : nameProp) !== null && _b !== void 0 ? _b : autoId;
+    const size = (_c = groupContext === null || groupContext === void 0 ? void 0 : groupContext.size) !== null && _c !== void 0 ? _c : sizeProp;
+    const state = stateProp === "disabled" ? "disabled" : ((_d = groupContext === null || groupContext === void 0 ? void 0 : groupContext.state) !== null && _d !== void 0 ? _d : stateProp);
     const isDisabled = state === "disabled";
+    // Determine checked state
+    const isInGroup = groupContext !== undefined;
+    const checked = isInGroup ? groupContext.value === value : checkedProp;
+    const isControlled = checked !== undefined;
     const handleChange = (e) => {
         if (isDisabled)
             return;
-        if (!isControlled) {
-            setInternalChecked(e.target.checked);
+        if (isInGroup) {
+            groupContext.onChange(value);
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked, value);
     };
-    return (jsxs("div", { className: cn(radioTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn(radioTheme.inputStyle, radioTheme.sizes[size]) }), isChecked && (jsx("div", { className: cn(radioTheme.dotStyle, size === "sm" ? "size-2" : "size-3", "opacity-100") }))] }), (label || description) && (jsxs("div", { className: "cursor-pointer", children: [label && (jsx(FormLabel, { htmlFor: id, className: "!mb-0", state: state, children: label })), description && (jsx("div", { id: `${id}-description`, className: radioTheme.descriptionStyle, children: description }))] }))] }));
+    const inputProps = isControlled
+        ? { checked }
+        : { defaultChecked };
+    return (jsxs("div", { className: cn(radioTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn("peer", radioTheme.inputStyle, radioTheme.sizes[size]) }), jsx("div", { className: cn(radioTheme.dotStyle, size === "sm" ? "size-2.5 top-0.25" : "size-3") })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })), description && (jsx("div", { id: `${id}-description`, className: radioTheme.descriptionStyle, children: description }))] }))] }));
 });
-Radio.displayName = "Radio";
+RadioComponent.displayName = "Radio";
+const Radio = Object.assign(RadioComponent, { Group: RadioGroup });
 
 export { Radio };

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

@@ -4,13 +4,42 @@
 const radioTheme = {
     baseStyle: "relative flex items-start gap-3",
     inputContainerStyle: "relative flex-shrink-0 flex items-center justify-center",
-    inputStyle: "peer appearance-none rounded-full border-2 border-[var(--color-border)] bg-white checked:border-[var(--color-primary)] checked:bg-white disabled:border-[var(--color-border)] disabled:bg-[var(--color-background-disabled)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)] checked:outline-2 checked:outline-[var(--color-primary-100)] checked:outline-offset-1 transition-all duration-400 data-[state=disabled]:outline-0 data-[state=disabled]:border-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed",
-    dotStyle: "absolute pointer-events-none rounded-full bg-[var(--color-primary)] opacity-0 transition-all duration-400 peer-data-[state=disabled]:saturate-0 peer-data-[state=disabled]:opacity-80",
-    descriptionStyle: "text-sm text-[var(--color-text-secondary)] mt-1",
+    // Input styles with light and dark mode variants
+    inputStyle: "col-start-1 row-start-1 appearance-none rounded-full border-2 transition-all duration-400 " +
+        // Default state - light
+        "border-[var(--color-border)] bg-[var(--color-surface)] " +
+        // Default state - dark
+        "dark:bg-[var(--color-background-secondary)] " +
+        // Checked state - light
+        "checked:border-[var(--color-primary)]  " +
+        // Checked state - dark
+        " " +
+        // Checked outline - light
+        "checked:outline-2 checked:outline-[var(--color-primary-100)] checked:outline-offset-1 " +
+        // Checked outline - dark
+        "dark:checked:outline-[var(--color-primary-900)] " +
+        // Focus visible - light
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)] " +
+        // Focus visible - dark
+        "dark:focus-visible:outline-[var(--color-primary-500)] " +
+        // Disabled state - light
+        "disabled:bg-[var(--color-background-disabled)] disabled:checked:outline-0 " +
+        "data-[state=disabled]:border-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed " +
+        // Disabled state - dark
+        "dark:disabled:bg-[var(--color-neutral-700)] dark:disabled:border-[var(--color-neutral-600)] " +
+        "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)]",
+    dotStyle: "absolute inset-0 m-auto pointer-events-none rounded-full bg-[var(--color-primary)] opacity-0 transition-all duration-400 peer-checked:opacity-100 peer-data-[state=disabled]:saturate-0 peer-data-[state=disabled]:peer-checked:opacity-80",
+    descriptionStyle: "text-base text-[var(--color-text-secondary)]/80 mt-0.5",
     sizes: {
         sm: "size-5 mt-0.25",
-        md: "size-6"
-    }
+        md: "size-6",
+    },
+    // Group styles
+    groupStyle: "flex flex-col gap-1.5",
+    groupHorizontalStyle: "flex-row flex-wrap gap-x-6 gap-y-3",
+    groupDescriptionStyle: "text-base text-[var(--color-text-secondary)]/80 -mt-0.5 mb-1",
+    groupErrorStyle: "text-base text-[var(--color-danger)] mt-1.5",
+    groupItemsStyle: "flex flex-col gap-3",
 };
 
 export { radioTheme };

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

@@ -7,21 +7,42 @@ export type RadioState = 'default' | 'disabled';
  * Size variants for the radio component
  */
 export type RadioSize = 'sm' | 'md';
+/**
+ * Orientation for Radio.Group layout
+ */
+export type RadioGroupOrientation = 'vertical' | 'horizontal';
 /**
  * Radio component props
  */
 export interface RadioProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
-    id: string;
-    name: string;
-    value: string;
+    id?: string;
+    name?: string;
+    value: string | number;
     checked?: boolean;
-    onChange?: (checked: boolean, value: string) => void;
+    onChange?: (checked: boolean, value: string | number) => void;
     label?: string;
     description?: string;
     state?: RadioState;
     size?: RadioSize;
     className?: string;
 }
+/**
+ * Radio.Group component props
+ */
+export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange?: (value: string | number) => void;
+    name?: string;
+    size?: RadioSize;
+    state?: RadioState;
+    orientation?: RadioGroupOrientation;
+    label?: string;
+    description?: string;
+    error?: string;
+    required?: boolean;
+    className?: string;
+}
 /**
  * Radio theme configuration
  */
@@ -32,4 +53,9 @@ export interface RadioTheme {
     dotStyle: string;
     descriptionStyle: string;
     sizes: Record<RadioSize, string>;
+    groupStyle?: string;
+    groupHorizontalStyle?: string;
+    groupDescriptionStyle?: string;
+    groupErrorStyle?: string;
+    groupItemsStyle?: string;
 }