@usevyre/react 1.0.3 → 1.2.0

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>>;

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @usevyre/react — Tag
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────┐
+ * │ Component:  Tag                                         │
+ * │ Import:     import { Tag } from "@usevyre/react"        │
+ * │                                                         │
+ * │ Props:                                                  │
+ * │   variant  = "default"(default)|"accent"|"danger"      │
+ * │   size     = "sm"|"md"(default)|"lg"                    │
+ * │   onRemove = () => void  (renders × remove button)      │
+ * │   onClick  = () => void  (makes the tag interactive)    │
+ * │                                                         │
+ * │ Standalone display tag/chip. NOT an input — for tag     │
+ * │ INPUT use TagsInput. Group multiple with TagGroup.      │
+ * └─────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * <Tag>Design</Tag>
+ * <Tag variant="accent" size="lg">Featured</Tag>
+ * <Tag onRemove={() => removeFilter("react")}>react</Tag>
+ * <Tag onClick={() => toggleFilter("vue")}>vue</Tag>
+ */
+import React from "react";
+import type { BaseProps } from "../../types";
+export type TagVariant = "default" | "accent" | "danger";
+export type TagSize = "sm" | "md" | "lg";
+export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onClick">, BaseProps {
+    /** Visual style */
+    variant?: TagVariant;
+    /** Size scale */
+    size?: TagSize;
+    /** When provided, renders a × button that calls this on click */
+    onRemove?: () => void;
+    /** When provided, makes the whole tag interactive (button-like) */
+    onClick?: () => void;
+    /** Disable interaction (only relevant with onClick or onRemove) */
+    disabled?: boolean;
+}
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Tag/TagGroup.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @usevyre/react — TagGroup
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────┐
+ * │ Component:  TagGroup                                    │
+ * │ Import:     import { TagGroup, Tag } from "@usevyre/react"│
+ * │                                                         │
+ * │ Props:                                                  │
+ * │   gap   = "sm"|"md"(default)|"lg"                       │
+ * │   wrap  = boolean (default: true)                       │
+ * │                                                         │
+ * │ Read-only container that lays out multiple <Tag>        │
+ * │ elements with wrapping + spacing. For tag INPUT use     │
+ * │ TagsInput instead.                                      │
+ * └─────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * <TagGroup>
+ *   <Tag>React</Tag>
+ *   <Tag>Vue</Tag>
+ *   <Tag variant="accent">TypeScript</Tag>
+ * </TagGroup>
+ */
+import React from "react";
+import type { BaseProps } from "../../types";
+export type TagGroupGap = "sm" | "md" | "lg";
+export interface TagGroupProps extends React.HTMLAttributes<HTMLDivElement>, BaseProps {
+    /** Spacing between tags */
+    gap?: TagGroupGap;
+    /** Wrap tags onto multiple lines when they overflow */
+    wrap?: boolean;
+}
+export declare const TagGroup: React.ForwardRefExoticComponent<TagGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/TagsInput/TagsInput.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @usevyre/react — TagsInput
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────┐
+ * │ Component:  TagsInput                                   │
+ * │ Import:     import { TagsInput } from "@usevyre/react"  │
+ * │                                                         │
+ * │ Props:                                                  │
+ * │   value       = string[] (controlled)                   │
+ * │   onChange    = (tags: string[]) => void                │
+ * │   placeholder = string                                  │
+ * │   disabled    = boolean                                 │
+ * │   max         = number — max tag count                  │
+ * │   size        = "sm"|"md"(default)|"lg"                 │
+ * │                                                         │
+ * │ Behavior:                                               │
+ * │   Enter / comma → add tag (trim, dedupe, skip empty)    │
+ * │   Backspace on empty input → remove last tag            │
+ * │   × button on tag → remove that tag                     │
+ * │   When max reached, input is disabled                   │
+ * └─────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * const [tags, setTags] = useState(["react", "typescript"]);
+ * <TagsInput value={tags} onChange={setTags} placeholder="Add tag…" max={5} />
+ *
+ * // Inside a Field
+ * <Field label="Skills">
+ *   <TagsInput value={skills} onChange={setSkills} />
+ * </Field>
+ */
+import React from "react";
+import type { BaseProps } from "../../types";
+type TagsInputSize = "sm" | "md" | "lg";
+export interface TagsInputProps extends BaseProps {
+    /** Controlled tag list */
+    value: string[];
+    /** Called with new tag array on every change */
+    onChange: (tags: string[]) => void;
+    /** Input placeholder (hidden when max reached) */
+    placeholder?: string;
+    /** Disable all interactions */
+    disabled?: boolean;
+    /** Maximum number of tags allowed */
+    max?: number;
+    /** Size scale */
+    size?: TagsInputSize;
+}
+export declare const TagsInput: React.ForwardRefExoticComponent<TagsInputProps & React.RefAttributes<HTMLDivElement>>;
+export {};