@usevyre/react 1.1.0 → 1.2.0

package/dist/components/Calendar/Calendar.d.ts

@@ -1,10 +1,10 @@
 /**
- * @usevyre/react — Calendar & DatePicker
+ * @usevyre/react — Calendar
  *
  * AI CONTEXT:
  * ┌─────────────────────────────────────────────────────────────┐
- * │ Components: Calendar · DatePicker                           │
- * │ Import:     import { Calendar, DatePicker } from "@usevyre/react" │
+ * │ Component:  Calendar (inline grid; no input/popover)        │
+ * │ Import:     import { Calendar } from "@usevyre/react"       │
  * │                                                             │
  * │ Calendar props:                                             │
  * │   mode      = "single"(default) | "range" | "multiple"     │
@@ -13,11 +13,10 @@
  * │   showTime  = boolean (adds HH:MM time picker)              │
  * │   minDate / maxDate = Date                                  │
  * │   disabled  = (date: Date) => boolean                       │
+ * │   defaultMonth = Date (initial month when value empty)      │
  * │                                                             │
- * │ DatePicker props:                                           │
- * │   = all Calendar props +                                    │
- * │   placeholder = string                                      │
- * │   className   = string                                      │
+ * │ For an input + popover, use DatePicker.                      │
+ * │ For start/end ranges with presets, use DateRangePicker.     │
  * └─────────────────────────────────────────────────────────────┘
  *
  * @example
@@ -26,9 +25,6 @@
  *
  * // Date range
  * <Calendar mode="range" value={[start, end]} onChange={setRange} />
- *
- * // DatePicker (input + popover)
- * <DatePicker mode="single" value={date} onChange={setDate} placeholder="Pick a date" />
  */
 import React from "react";
 export type CalendarMode = "single" | "range" | "multiple";
@@ -54,11 +50,16 @@ export type CalendarBaseProps = {
     disabled?: (date: Date) => boolean;
     className?: string;
     weekStartsOn?: 0 | 1;
+    /** Month to display initially when value is empty (uncontrolled view). */
+    defaultMonth?: Date;
 };
 export type CalendarProps = (CalendarSingleProps & CalendarBaseProps) | (CalendarRangeProps & CalendarBaseProps) | (CalendarMultipleProps & CalendarBaseProps);
 export type DatePickerProps = CalendarProps & {
     placeholder?: string;
     inputClassName?: string;
 };
+/** @internal — shared with DatePicker. */
+export declare function formatDate(d: Date | null | undefined, opts?: Intl.DateTimeFormatOptions): string;
+/** @internal — shared with DatePicker. */
+export declare function formatTime(d: Date): string;
 export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
-export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Calendar/DatePicker.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @usevyre/react — DatePicker
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────────┐
+ * │ Component:  DatePicker (input trigger + popover Calendar)   │
+ * │ Import:     import { DatePicker } from "@usevyre/react"     │
+ * │                                                             │
+ * │ = all Calendar props +                                       │
+ * │   placeholder    = string (default "Pick a date")           │
+ * │   inputClassName = string                                    │
+ * │                                                             │
+ * │ mode = "single"(default) | "range" | "multiple"             │
+ * │ value = Date | [Date,Date] | Date[] (matches mode)          │
+ * │                                                             │
+ * │ Renders a button that opens a Calendar in a portal popover. │
+ * │ For an always-visible inline grid, use Calendar.            │
+ * │ For start/end ranges with presets + dual month, use         │
+ * │ DateRangePicker.                                            │
+ * └─────────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * // Single date
+ * <DatePicker mode="single" value={date} onChange={setDate} placeholder="Pick a date" />
+ *
+ * // Date + time
+ * <DatePicker value={date} onChange={setDate} showTime />
+ */
+import React from "react";
+import { type DatePickerProps } from "./Calendar";
+export type { DatePickerProps };
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Conversation/Conversation.d.ts

@@ -0,0 +1,115 @@
+/**
+ * @usevyre/react — Conversation
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────────────┐
+ * │ Component:  Conversation (chat / inbox message thread)          │
+ * │ Import:     import { Conversation } from "@usevyre/react"        │
+ * │                                                                  │
+ * │ CONTROLLED & data-driven (like Kanban/DataGrid). No internal     │
+ * │ message state — you own `value`, append in your own handler.     │
+ * │                                                                  │
+ * │ Props:                                                           │
+ * │   value         = ConversationMessage[]  (required)              │
+ * │   currentUserId = string  (required — whose messages align right)│
+ * │   composer?     = boolean (built-in input + Send; default false) │
+ * │   onSend?       = (text: string, files: File[]) => void          │
+ * │   placeholder?  = string  (composer placeholder)                 │
+ * │   typing?       = boolean | string (show typing indicator)       │
+ * │   allowAttachments? = boolean (📎 button + staged-file chips)     │
+ * │   accept?       = string (file input accept, e.g. "image/*")     │
+ * │   renderMessage?= (msg, meta) => ReactNode  (custom bubble body) │
+ * │   renderComposer? = (api) => ReactNode  (replace composer)       │
+ * │     api = { value, setValue, files, setFiles, send }             │
+ * │                                                                  │
+ * │ ConversationMessage = {                                          │
+ * │   id; authorId; text?;                                           │
+ * │   authorName?; authorAvatar?;                                    │
+ * │   timestamp?: Date | string | number;                            │
+ * │   status?: "sending"|"sent"|"delivered"|"read";                  │
+ * │   attachments?: ConversationAttachment[]                         │
+ * │ }                                                                 │
+ * │ ConversationAttachment = {                                        │
+ * │   kind: "image"|"audio"|"video"|"file";                          │
+ * │   url; name?; size?                                              │
+ * │ }  → rendered inside the bubble (image preview, audio/video      │
+ * │     player, or a download chip for files)                        │
+ * │                                                                  │
+ * │ Consecutive messages from the same author are grouped (avatar +  │
+ * │ name shown once). Day separators inserted on date change.        │
+ * │ Outgoing = authorId === currentUserId (aligned right).           │
+ * └─────────────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * const [messages, setMessages] = useState<ConversationMessage[]>([
+ *   { id: "1", authorId: "sam", authorName: "Sam", text: "Hey!" },
+ *   { id: "2", authorId: "me", text: "Hi 👋", status: "read" },
+ * ]);
+ * <Conversation
+ *   value={messages}
+ *   currentUserId="me"
+ *   composer
+ *   onSend={(t) => setMessages((m) => [...m, { id: crypto.randomUUID(), authorId: "me", text: t }])}
+ * />
+ */
+import React from "react";
+import type { BaseProps } from "../../types";
+export type ConversationStatus = "sending" | "sent" | "delivered" | "read";
+export type ConversationAttachmentKind = "image" | "audio" | "video" | "file";
+export interface ConversationAttachment {
+    kind: ConversationAttachmentKind;
+    /** Source/href for the media or download. */
+    url: string;
+    /** Display name (file attachments) / alt text (image). */
+    name?: string;
+    /** Optional human-readable size, e.g. "2.4 MB". */
+    size?: string;
+}
+export interface ConversationMessage {
+    id: string;
+    /** Identifies the sender. Matched against currentUserId for alignment. */
+    authorId: string;
+    text?: string;
+    authorName?: string;
+    authorAvatar?: string;
+    timestamp?: Date | string | number;
+    status?: ConversationStatus;
+    /** Image / audio / video / file attachments rendered inside the bubble. */
+    attachments?: ConversationAttachment[];
+}
+/** Per-message layout info passed to renderMessage. */
+export interface ConversationMessageMeta {
+    outgoing: boolean;
+    /** First message of a same-author run (avatar/name shown). */
+    isGroupStart: boolean;
+    /** Last message of a same-author run (timestamp/status shown). */
+    isGroupEnd: boolean;
+}
+export interface ConversationComposerApi {
+    value: string;
+    setValue: (v: string) => void;
+    /** Files staged via the attach button (when allowAttachments). */
+    files: File[];
+    setFiles: (f: File[]) => void;
+    send: () => void;
+}
+export interface ConversationProps extends BaseProps {
+    value: ConversationMessage[];
+    currentUserId: string;
+    composer?: boolean;
+    /**
+     * Called when the composer submits. `files` holds anything staged via the
+     * attach button (empty array when allowAttachments is off). You own the
+     * upload + how staged files become message attachments.
+     */
+    onSend?: (text: string, files: File[]) => void;
+    placeholder?: string;
+    typing?: boolean | string;
+    /** Show an attach (📎) button + staged-file chips in the built-in composer. */
+    allowAttachments?: boolean;
+    /** `accept` attribute forwarded to the file input (e.g. "image/*"). */
+    accept?: string;
+    renderMessage?: (message: ConversationMessage, meta: ConversationMessageMeta) => React.ReactNode;
+    renderComposer?: (api: ConversationComposerApi) => React.ReactNode;
+}
+export declare const Conversation: React.ForwardRefExoticComponent<ConversationProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @usevyre/react — DateRangePicker
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────────────┐
+ * │ Component:  DateRangePicker                                       │
+ * │ Import:     import { DateRangePicker } from "@usevyre/react"      │
+ * │                                                                  │
+ * │ Built on top of Calendar (mode="range"). Friendlier API:         │
+ * │ uses a { from, to } object instead of a [Date,Date] tuple,       │
+ * │ shows TWO months side-by-side, and a preset shortcut column.     │
+ * │                                                                  │
+ * │ Props:                                                           │
+ * │   value       = { from: Date | null; to: Date | null } | null    │
+ * │   onChange    = (range: DateRange) => void                       │
+ * │   placeholder = string (default "Pick a date range")             │
+ * │   numberOfMonths = 1 | 2 (default 2)                              │
+ * │   presets     = boolean | DateRangePreset[]                      │
+ * │                 true → built-in presets (Today, Last 7 days, …)  │
+ * │   minDate / maxDate = Date                                        │
+ * │   disabled    = (date: Date) => boolean                          │
+ * │   weekStartsOn = 0 (Sun) | 1 (Mon, default)                      │
+ * │                                                                  │
+ * │ DateRange = { from: Date | null; to: Date | null }               │
+ * │ DateRangePreset = { label: string; range: () => DateRange }      │
+ * │                                                                  │
+ * │ Use this for "select a start AND end date" (reports, filters).   │
+ * │ For a single date use DatePicker. Do NOT pass a tuple — pass     │
+ * │ an object: value={{ from, to }}.                                 │
+ * └─────────────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * const [range, setRange] = useState<DateRange>({ from: null, to: null });
+ * <DateRangePicker value={range} onChange={setRange} presets />
+ */
+import React from "react";
+export interface DateRange {
+    from: Date | null;
+    to: Date | null;
+}
+export interface DateRangePreset {
+    label: string;
+    range: () => DateRange;
+}
+export interface DateRangePickerProps {
+    value?: DateRange | null;
+    onChange?: (range: DateRange) => void;
+    placeholder?: string;
+    numberOfMonths?: 1 | 2;
+    presets?: boolean | DateRangePreset[];
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: (date: Date) => boolean;
+    weekStartsOn?: 0 | 1;
+    className?: string;
+    inputClassName?: string;
+}
+export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Input/Input.d.ts

@@ -6,11 +6,14 @@
  * │ Components: Field + Input + Textarea                    │
  * │ Import:     import { Field, Input, Textarea } from "@usevyre/react" │
  * │                                                         │
- * │ Field props:                                            │
+ * │ Field props (props-based, simplest):                    │
  * │   label    = string                                     │
  * │   hint     = string (helper text below input)           │
  * │   state    = "idle"|"error"|"success"|"warning"         │
  * │   required = boolean                                    │
+ * │ Field composable parts (richer layouts):                │
+ * │   FieldLabel · FieldDescription · FieldError ·          │
+ * │   FieldGroup · FieldSet (props-based API still works)    │
  * │                                                         │
  * │ Input props:                                            │
  * │   size     = "sm"|"md"(default)|"lg"                    │
@@ -40,6 +43,24 @@ export interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, BasePr
     htmlFor?: string;
 }
 export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
+export interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>, BaseProps {
+    required?: boolean;
+}
+export declare const FieldLabel: React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
+export interface FieldDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement>, BaseProps {
+}
+export declare const FieldDescription: React.ForwardRefExoticComponent<FieldDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export interface FieldErrorProps extends React.HTMLAttributes<HTMLParagraphElement>, BaseProps {
+}
+export declare const FieldError: React.ForwardRefExoticComponent<FieldErrorProps & React.RefAttributes<HTMLParagraphElement>>;
+export interface FieldGroupProps extends React.HTMLAttributes<HTMLDivElement>, BaseProps {
+    orientation?: "vertical" | "horizontal";
+}
+export declare const FieldGroup: React.ForwardRefExoticComponent<FieldGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface FieldSetProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement>, BaseProps {
+    legend?: string;
+}
+export declare const FieldSet: React.ForwardRefExoticComponent<FieldSetProps & React.RefAttributes<HTMLFieldSetElement>>;
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, BaseProps {
     size?: Exclude<Size, "icon">;
     leftElement?: React.ReactNode;

package/dist/components/Item/Item.d.ts

@@ -0,0 +1,74 @@
+/**
+ * @usevyre/react — Item
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────────────┐
+ * │ Component:  Item + ItemGroup + ItemMedia + ItemContent +         │
+ * │             ItemTitle + ItemDescription + ItemActions            │
+ * │ Import:     import { Item, ItemContent, ... } from "@usevyre/react" │
+ * │                                                                  │
+ * │ Item props:                                                      │
+ * │   variant  = "default"(default)|"outlined"|"muted"|"plain"       │
+ * │     plain → transparent, no border — for composing Item          │
+ * │     inside another surface (Card, Kanban card, list)             │
+ * │   size     = "sm"|"md"(default)|"lg"                              │
+ * │   clickable = boolean (cursor pointer + hover + role=button)     │
+ * │   asChild  = false (always renders <div>; no polymorphism)       │
+ * │                                                                  │
+ * │ ItemGroup props:                                                 │
+ * │   separated = boolean (adds dividers between items)              │
+ * │                                                                  │
+ * │ Slot structure (left → right):                                   │
+ * │   <Item>                                                         │
+ * │     <ItemMedia>     ← optional: icon / avatar / thumbnail        │
+ * │     <ItemContent>   ← required: text column                      │
+ * │       <ItemTitle>                                                │
+ * │       <ItemDescription>                                          │
+ * │     <ItemActions>   ← optional: buttons / menu, pinned right     │
+ * │   </Item>                                                        │
+ * │                                                                  │
+ * │ Use Item for list rows, settings rows, notification rows.        │
+ * │ Do NOT use Card for dense list rows — Item is the primitive.     │
+ * └─────────────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * // Settings row
+ * <Item>
+ *   <ItemMedia><BellIcon /></ItemMedia>
+ *   <ItemContent>
+ *     <ItemTitle>Notifications</ItemTitle>
+ *     <ItemDescription>Receive email when someone mentions you.</ItemDescription>
+ *   </ItemContent>
+ *   <ItemActions>
+ *     <Switch defaultChecked />
+ *   </ItemActions>
+ * </Item>
+ *
+ * // Grouped list with dividers
+ * <ItemGroup separated>
+ *   <Item clickable><ItemContent><ItemTitle>Profile</ItemTitle></ItemContent></Item>
+ *   <Item clickable><ItemContent><ItemTitle>Billing</ItemTitle></ItemContent></Item>
+ * </ItemGroup>
+ */
+import React from "react";
+import type { BaseProps } from "../../types";
+type ItemVariant = "default" | "outlined" | "muted" | "plain";
+type ItemSize = "sm" | "md" | "lg";
+export interface ItemProps extends React.HTMLAttributes<HTMLDivElement>, BaseProps {
+    variant?: ItemVariant;
+    size?: ItemSize;
+    clickable?: boolean;
+}
+export declare const Item: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface ItemGroupProps extends React.HTMLAttributes<HTMLDivElement>, BaseProps {
+    separated?: boolean;
+}
+export declare const ItemGroup: React.ForwardRefExoticComponent<ItemGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface ItemSectionProps extends React.HTMLAttributes<HTMLDivElement>, BaseProps {
+}
+export declare const ItemMedia: React.ForwardRefExoticComponent<ItemSectionProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ItemContent: React.ForwardRefExoticComponent<ItemSectionProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ItemTitle: React.ForwardRefExoticComponent<ItemSectionProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ItemDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & BaseProps & React.RefAttributes<HTMLParagraphElement>>;
+export declare const ItemActions: React.ForwardRefExoticComponent<ItemSectionProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Kanban/Kanban.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @usevyre/react — Kanban
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────────────┐
+ * │ Component:  Kanban (board with drag-and-drop between columns)    │
+ * │ Import:     import { Kanban } from "@usevyre/react"              │
+ * │                                                                  │
+ * │ CONTROLLED & data-driven (like DataGrid). No internal data       │
+ * │ state — you own `value`, update it in `onChange`.                │
+ * │                                                                  │
+ * │ Props:                                                           │
+ * │   value      = KanbanColumn[]  (required, controlled)            │
+ * │   onChange   = (next: KanbanColumn[]) => void  (required)        │
+ * │   renderCard?= (card, column) => ReactNode  (custom card body)   │
+ * │   onCardClick? = (card, column) => void                          │
+ * │   className? = string                                            │
+ * │                                                                  │
+ * │ KanbanColumn = { id; title; cards: KanbanCard[];                 │
+ * │                  color?: KanbanColor }                            │
+ * │ KanbanCard   = { id; title; description?;                        │
+ * │                  color?: KanbanColor }                            │
+ * │ KanbanColor  = "default" | "accent" | "teal" |                   │
+ * │                "success" | "warning" | "danger"                  │
+ * │   → tints the column/card background (token-based).              │
+ * │                                                                  │
+ * │ Drag a card to another column (or reorder within a column);      │
+ * │ Kanban calls onChange with the next columns array. While         │
+ * │ dragging, a placeholder shows the exact drop position. Card      │
+ * │ ids must be unique across the whole board.                        │
+ * │                                                                  │
+ * │ Each card is wrapped in a <Card> (variant="outlined"); the       │
+ * │ default body is title + description, but renderCard can return   │
+ * │ ANY content — including complex components (avatars, badges,     │
+ * │ progress) — placed inside the Card's body.                       │
+ * │                                                                  │
+ * │ Native HTML5 drag-and-drop — zero dependencies.                  │
+ * └─────────────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * const [columns, setColumns] = useState<KanbanColumn[]>([
+ *   { id: "todo",  title: "To Do",       cards: [{ id: "1", title: "Spec API" }] },
+ *   { id: "doing", title: "In Progress", cards: [] },
+ *   { id: "done",  title: "Done",        cards: [{ id: "2", title: "Kickoff" }] },
+ * ]);
+ * <Kanban value={columns} onChange={setColumns} />
+ */
+import React from "react";
+import type { BaseProps } from "../../types";
+/** Semantic tint applied to a column or card background. */
+export type KanbanColor = "default" | "accent" | "teal" | "success" | "warning" | "danger";
+export interface KanbanCard {
+    id: string;
+    title: string;
+    description?: string;
+    /** Tints the card background (token-based). Default: "default". */
+    color?: KanbanColor;
+}
+export interface KanbanColumn {
+    id: string;
+    title: string;
+    cards: KanbanCard[];
+    /** Tints the column background (token-based). Default: "default". */
+    color?: KanbanColor;
+}
+export interface KanbanProps extends BaseProps {
+    /** Controlled board data. */
+    value: KanbanColumn[];
+    /** Called with the next columns array after any drag move. */
+    onChange: (next: KanbanColumn[]) => void;
+    /** Custom card body renderer. Defaults to title + optional description. */
+    renderCard?: (card: KanbanCard, column: KanbanColumn) => React.ReactNode;
+    /** Called when a card is clicked (not fired while dragging). */
+    onCardClick?: (card: KanbanCard, column: KanbanColumn) => void;
+}
+export declare const Kanban: React.ForwardRefExoticComponent<KanbanProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,77 @@
+/**
+ * @usevyre/react — Radio
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────────────┐
+ * │ Component:  RadioGroup + Radio                                   │
+ * │ Import:     import { RadioGroup, Radio } from "@usevyre/react"   │
+ * │                                                                  │
+ * │ CONTROLLED. RadioGroup owns the selected value.                  │
+ * │                                                                  │
+ * │ RadioGroup props:                                                │
+ * │   value      = string (controlled selected value)                │
+ * │   defaultValue = string (uncontrolled)                           │
+ * │   onChange   = (value: string) => void                           │
+ * │   name?      = string (radio group name; auto if omitted)        │
+ * │   disabled?  = boolean (disables the whole group)                │
+ * │   size?      = "sm" | "md"(default)                              │
+ * │   orientation? = "vertical"(default) | "horizontal"              │
+ * │   options?   = { value; label; description?; disabled? }[]       │
+ * │     → data-driven; OR pass <Radio> children for custom layout    │
+ * │                                                                  │
+ * │ Radio props (inside RadioGroup):                                 │
+ * │   value     = string (required)                                  │
+ * │   label?    = string                                             │
+ * │   description? = string                                          │
+ * │   disabled? = boolean                                            │
+ * │                                                                  │
+ * │ Use options for simple lists; use <Radio> children when you      │
+ * │ need custom content. role="radiogroup" + arrow-key roving focus. │
+ * └─────────────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * // Data-driven
+ * <RadioGroup
+ *   value={plan}
+ *   onChange={setPlan}
+ *   options={[
+ *     { value: "free", label: "Free", description: "For hobby projects" },
+ *     { value: "pro",  label: "Pro",  description: "For teams" },
+ *   ]}
+ * />
+ *
+ * // Composable
+ * <RadioGroup value={plan} onChange={setPlan}>
+ *   <Radio value="free" label="Free" />
+ *   <Radio value="pro"  label="Pro" />
+ * </RadioGroup>
+ */
+import React from "react";
+import type { BaseProps } from "../../types";
+export interface RadioOption {
+    value: string;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+}
+type RadioSize = "sm" | "md";
+export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, BaseProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    name?: string;
+    disabled?: boolean;
+    size?: RadioSize;
+    orientation?: "vertical" | "horizontal";
+    /** Data-driven options. Omit to pass <Radio> children instead. */
+    options?: RadioOption[];
+}
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "size" | "value" | "type">, BaseProps {
+    value: string;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+}
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @usevyre/react — RichTextEditor
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────────────┐
+ * │ Component:  RichTextEditor (WYSIWYG, contentEditable)            │
+ * │ Import:     import { RichTextEditor } from "@usevyre/react"      │
+ * │                                                                  │
+ * │ CONTROLLED. value is an HTML string; onChange gives next HTML.   │
+ * │ Zero dependencies — native contentEditable + execCommand.        │
+ * │                                                                  │
+ * │ Props:                                                           │
+ * │   value       = string (HTML, controlled)                        │
+ * │   onChange    = (html: string) => void                           │
+ * │   placeholder?= string (shown when empty)                        │
+ * │   disabled?   = boolean (not editable, dimmed)                   │
+ * │   readOnly?   = boolean (not editable, no toolbar)               │
+ * │   toolbar?    = RichTextTool[] (which buttons; default = all)    │
+ * │   minHeight?  = string (CSS, default "10rem")                    │
+ * │                                                                  │
+ * │ RichTextTool = "bold"|"italic"|"underline"|"strike"|             │
+ * │   "h1"|"h2"|"h3"|"ul"|"ol"|"quote"|"code"|"link"|"clear"         │
+ * │                                                                  │
+ * │ Controlled: store value in state and set it in onChange.         │
+ * │ Output is sanitised-friendly semantic HTML (no inline styles).   │
+ * └─────────────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * const [html, setHtml] = useState("<p>Hello <strong>world</strong></p>");
+ * <RichTextEditor value={html} onChange={setHtml} placeholder="Write…" />
+ */
+import React from "react";
+import type { BaseProps } from "../../types";
+export type RichTextTool = "bold" | "italic" | "underline" | "strike" | "h1" | "h2" | "h3" | "ul" | "ol" | "quote" | "code" | "link" | "clear";
+export interface RichTextEditorProps extends BaseProps {
+    value: string;
+    onChange: (html: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    toolbar?: RichTextTool[];
+    minHeight?: string;
+}
+export declare const RichTextEditor: React.ForwardRefExoticComponent<RichTextEditorProps & React.RefAttributes<HTMLDivElement>>;