@usevyre/react 1.0.2 → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Galih Pranowo (gapra.dev)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @usevyre/react — ButtonGroup
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────┐
+ * │ Component:  ButtonGroup                                 │
+ * │ Import:     import { ButtonGroup } from "@usevyre/react"│
+ * │                                                         │
+ * │ Props:                                                  │
+ * │   orientation = "horizontal"(default)|"vertical"        │
+ * │   attached    = boolean (default: false)                │
+ * │               If true, buttons share borders (no gap)   │
+ * │   size        = "sm"|"md"|"lg"|"icon"                   │
+ * │               Propagated to children via data-size attr  │
+ * │                                                         │
+ * │ Semantics: role="group" wrapper div                     │
+ * └─────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * // Horizontal toolbar
+ * <ButtonGroup>
+ *   <Button variant="secondary">Cut</Button>
+ *   <Button variant="secondary">Copy</Button>
+ *   <Button variant="secondary">Paste</Button>
+ * </ButtonGroup>
+ *
+ * // Attached segmented control
+ * <ButtonGroup attached>
+ *   <Button variant="primary">Day</Button>
+ *   <Button variant="secondary">Week</Button>
+ *   <Button variant="secondary">Month</Button>
+ * </ButtonGroup>
+ *
+ * // Vertical stack
+ * <ButtonGroup orientation="vertical">
+ *   <Button variant="ghost">Option A</Button>
+ *   <Button variant="ghost">Option B</Button>
+ * </ButtonGroup>
+ */
+import React from "react";
+import type { Size, BaseProps } from "../../types";
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>, BaseProps {
+    /** Layout direction of grouped buttons */
+    orientation?: "horizontal" | "vertical";
+    /** Remove gap — buttons share collapsed borders */
+    attached?: boolean;
+    /** Size forwarded to child buttons via data-group-size attribute */
+    size?: Size;
+}
+export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Combobox/Combobox.d.ts

@@ -0,0 +1,66 @@
+/**
+ * @usevyre/react — Combobox
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────┐
+ * │ Component:  Combobox                                    │
+ * │ Import:     import { Combobox } from "@usevyre/react"   │
+ * │                                                         │
+ * │ Props:                                                  │
+ * │   options     = { value: string; label: string;         │
+ * │                   disabled?: boolean }[]                │
+ * │   value       = string | null (controlled)              │
+ * │   onChange    = (value: string | null) => void          │
+ * │   placeholder = string                                  │
+ * │   disabled    = boolean                                 │
+ * │   size        = "sm"|"md"(default)|"lg"                 │
+ * │   emptyText   = string (default: "No results")          │
+ * │                                                         │
+ * │ Behavior:                                               │
+ * │   Click input → show all options                        │
+ * │   Type → filter by case-insensitive contains            │
+ * │   Select → close, update value, clear search            │
+ * │   Escape → close dropdown                               │
+ * │   Click outside → close dropdown                        │
+ * │   ArrowUp/Down → keyboard navigation                    │
+ * │   Enter → select highlighted option                     │
+ * │                                                         │
+ * │ Differs from Select: has searchable text input          │
+ * │ Differs from Command: single-value pick, not palette    │
+ * └─────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * const [lang, setLang] = useState<string | null>(null);
+ * <Combobox
+ *   options={[
+ *     { value: "ts", label: "TypeScript" },
+ *     { value: "rs", label: "Rust" },
+ *   ]}
+ *   value={lang}
+ *   onChange={setLang}
+ *   placeholder="Search language…"
+ * />
+ *
+ * // Clear selection
+ * <Combobox value={val} onChange={(v) => setVal(v)} options={options} />
+ * // Pass null to onChange to clear
+ */
+import React from "react";
+import type { BaseProps } from "../../types";
+type ComboboxSize = "sm" | "md" | "lg";
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface ComboboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, BaseProps {
+    options: ComboboxOption[];
+    value: string | null;
+    onChange: (value: string | null) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: ComboboxSize;
+    emptyText?: string;
+}
+export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/DataGrid/DataGrid.d.ts

@@ -0,0 +1,66 @@
+/**
+ * @usevyre/react — DataGrid
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────┐
+ * │ Component:  DataGrid                                    │
+ * │ Import:     import { DataGrid } from "@usevyre/react"   │
+ * │                                                         │
+ * │ Props:                                                  │
+ * │   columns      = { key: string; label: string;          │
+ * │                    sortable?: boolean;                  │
+ * │                    width?: string }[]                   │
+ * │   rows         = Record<string, unknown>[]              │
+ * │   sortKey?     = string (controlled)                    │
+ * │   sortDir?     = "asc"|"desc" (controlled)              │
+ * │   onSort?      = (key: string, dir: "asc"|"desc") =>    │
+ * │                   void                                  │
+ * │   loading?     = boolean — shows 5 skeleton rows        │
+ * │   emptyText?   = string (default: "No data")            │
+ * │   stickyHeader? = boolean (default: false)              │
+ * │                                                         │
+ * │ Sort icons: ↕ unsorted, ↑ asc, ↓ desc                  │
+ * │ Intentionally excludes: filtering, pagination           │
+ * │   → Use Pagination component for page navigation        │
+ * └─────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * const [sortKey, setSortKey] = useState<string | undefined>();
+ * const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
+ *
+ * <DataGrid
+ *   columns={[
+ *     { key: "name",   label: "Name",   sortable: true },
+ *     { key: "email",  label: "Email",  sortable: true },
+ *     { key: "status", label: "Status", width: "120px" },
+ *   ]}
+ *   rows={users}
+ *   sortKey={sortKey}
+ *   sortDir={sortDir}
+ *   onSort={(key, dir) => { setSortKey(key); setSortDir(dir); }}
+ *   stickyHeader
+ * />
+ *
+ * // With Pagination (filtering/pagination intentionally out of scope)
+ * <DataGrid columns={columns} rows={pageRows} loading={isLoading} />
+ * <Pagination page={page} totalPages={total} onChange={setPage} />
+ */
+import React from "react";
+import type { BaseProps } from "../../types";
+export interface DataGridColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    width?: string;
+}
+export interface DataGridProps extends BaseProps {
+    columns: DataGridColumn[];
+    rows: Record<string, unknown>[];
+    sortKey?: string;
+    sortDir?: "asc" | "desc";
+    onSort?: (key: string, dir: "asc" | "desc") => void;
+    loading?: boolean;
+    emptyText?: string;
+    stickyHeader?: boolean;
+}
+export declare const DataGrid: React.ForwardRefExoticComponent<DataGridProps & 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 {};