@usevyre/react 1.2.1 → 1.4.0

package/dist/components/Timeline/Timeline.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @usevyre/react — Timeline + TimelineItem
+ *
+ * AI CONTEXT:
+ * ┌──────────────────────────────────────────────────────────────────┐
+ * │ Component:  Timeline (+ TimelineItem)                             │
+ * │ Import:     import { Timeline, TimelineItem } from "@usevyre/react"│
+ * │                                                                   │
+ * │ Vertical activity feed for audit logs / history. Presentational.  │
+ * │ A marker dot per item + a connector line between them.            │
+ * │                                                                   │
+ * │   <Timeline items={[{ title, time?, description?, status?,        │
+ * │                       icon? }]} />                                 │
+ * │   — OR —                                                          │
+ * │   <Timeline>                                                      │
+ * │     <TimelineItem title="…" time="…" status="success">            │
+ * │       rich content (links, badges, …)                             │
+ * │     </TimelineItem>                                               │
+ * │   </Timeline>                                                     │
+ * │                                                                   │
+ * │   status = "default"|"success"|"warning"|"danger"|"info"          │
+ * │            (colors the dot)                                        │
+ * │   icon   = ReactNode (overrides the dot)                           │
+ * │                                                                   │
+ * │ Use `items` for plain logs; use TimelineItem children for rich    │
+ * │ per-item content. Newest-first or oldest-first is up to you —     │
+ * │ Timeline does not reorder.                                         │
+ * └──────────────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * <Timeline
+ *   items={[
+ *     { title: "Deployed v2.1", time: "2m ago", status: "success" },
+ *     { title: "Build started", time: "5m ago", status: "info" },
+ *     { title: "Push to main", time: "6m ago" },
+ *   ]}
+ * />
+ *
+ * @example
+ * <Timeline>
+ *   <TimelineItem title="Invoice paid" time="Apr 2" status="success">
+ *     <Text size="sm">$1,200 — <a href="#">view receipt</a></Text>
+ *   </TimelineItem>
+ * </Timeline>
+ */
+import React from "react";
+import type { BaseProps } from "../../types";
+export type TimelineStatus = "default" | "success" | "warning" | "danger" | "info";
+export interface TimelineItemData {
+    title: React.ReactNode;
+    time?: React.ReactNode;
+    description?: React.ReactNode;
+    status?: TimelineStatus;
+    icon?: React.ReactNode;
+}
+export interface TimelineProps extends React.HTMLAttributes<HTMLOListElement>, BaseProps {
+    /** Plain items — alternative to TimelineItem children */
+    items?: TimelineItemData[];
+    children?: React.ReactNode;
+}
+export declare const Timeline: React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<HTMLOListElement>>;
+export interface TimelineItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, "title">, BaseProps {
+    title: React.ReactNode;
+    time?: React.ReactNode;
+    status?: TimelineStatus;
+    /** Overrides the status dot */
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+}
+export declare const TimelineItem: React.ForwardRefExoticComponent<TimelineItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,79 @@
+/**
+ * @usevyre/react — ToggleGroup + ToggleItem
+ *
+ * AI CONTEXT:
+ * ┌──────────────────────────────────────────────────────────────────┐
+ * │ Component:  ToggleGroup (+ ToggleItem)                            │
+ * │ Import:     import { ToggleGroup, ToggleItem } from "@usevyre/react"│
+ * │                                                                   │
+ * │ Segmented control. CONTROLLED — the group owns the value.         │
+ * │ onChange emits the VALUE (string|null or string[]), not an event. │
+ * │                                                                   │
+ * │   type     = "single"(default) | "multiple"                       │
+ * │     single   → value: string | null, onChange(string | null)      │
+ * │     multiple → value: string[],      onChange(string[])           │
+ * │   options? = { value; label?; icon?; disabled? }[]                │
+ * │   size     = "sm" | "md"(default) | "lg"                          │
+ * │   disabled = boolean (disables the whole group)                   │
+ * │                                                                   │
+ * │ Use `options` for simple lists, or <ToggleItem value> children    │
+ * │ for custom content. Keyboard: arrows move, Space/Enter toggles.   │
+ * │                                                                   │
+ * │ NOT Switch (boolean), NOT ButtonGroup (layout only),              │
+ * │ NOT RadioGroup (form radios, single only).                        │
+ * └──────────────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * const [view, setView] = useState<string | null>("grid");
+ * <ToggleGroup
+ *   value={view}
+ *   onChange={setView}
+ *   options={[
+ *     { value: "grid", label: "Grid" },
+ *     { value: "list", label: "List" },
+ *   ]}
+ * />
+ *
+ * @example  // multiple, composable
+ * const [fmt, setFmt] = useState<string[]>(["bold"]);
+ * <ToggleGroup type="multiple" value={fmt} onChange={setFmt}>
+ *   <ToggleItem value="bold">B</ToggleItem>
+ *   <ToggleItem value="italic">I</ToggleItem>
+ * </ToggleGroup>
+ */
+import React from "react";
+import type { BaseProps } from "../../types";
+export interface ToggleOption {
+    value: string;
+    label?: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+type ToggleSize = "sm" | "md" | "lg";
+type SingleProps = {
+    type?: "single";
+    value?: string | null;
+    onChange?: (value: string | null) => void;
+};
+type MultipleProps = {
+    type: "multiple";
+    value?: string[];
+    onChange?: (value: string[]) => void;
+};
+export type ToggleGroupProps = (SingleProps | MultipleProps) & BaseProps & {
+    options?: ToggleOption[];
+    size?: ToggleSize;
+    disabled?: boolean;
+    orientation?: "horizontal" | "vertical";
+    /** Accessible label for the group */
+    "aria-label"?: string;
+    children?: React.ReactNode;
+};
+export declare const ToggleGroup: React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface ToggleItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+    value: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+export declare const ToggleItem: React.ForwardRefExoticComponent<ToggleItemProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Tree/Tree.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @usevyre/react — Tree
+ *
+ * AI CONTEXT:
+ * ┌──────────────────────────────────────────────────────────────────┐
+ * │ Component:  Tree                                                  │
+ * │ Import:     import { Tree } from "@usevyre/react"                  │
+ * │                                                                   │
+ * │ Hierarchical tree view (file explorer / nested nav). DATA-DRIVEN  │
+ * │ and CONTROLLED. Pass a nested array; the Tree renders recursively.│
+ * │                                                                   │
+ * │   data = TreeNode[]  where TreeNode = {                            │
+ * │     id: string; label: ReactNode;                                 │
+ * │     icon?: ReactNode; disabled?: boolean;                          │
+ * │     children?: TreeNode[]                                          │
+ * │   }                                                               │
+ * │   expandedIds?        = string[]  (controlled)                    │
+ * │   defaultExpandedIds  = string[]  (uncontrolled)                  │
+ * │   onExpandedChange?   = (ids: string[]) => void                   │
+ * │   selectedId?         = string | null  (controlled)               │
+ * │   defaultSelectedId   = string | null  (uncontrolled)             │
+ * │   onSelect?           = (id: string) => void                      │
+ * │                                                                   │
+ * │ Single selection. A node with `children` is a folder (toggles     │
+ * │ expand on click); a leaf fires onSelect. Keyboard: ↑/↓ move,      │
+ * │ →/← expand/collapse, Enter/Space select.                          │
+ * └──────────────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * const [sel, setSel] = useState<string | null>("a/b.ts");
+ * <Tree
+ *   data={[
+ *     { id: "src", label: "src", children: [
+ *       { id: "a.ts", label: "a.ts" },
+ *       { id: "b", label: "b", children: [{ id: "b/c.ts", label: "c.ts" }] },
+ *     ]},
+ *     { id: "readme", label: "README.md" },
+ *   ]}
+ *   selectedId={sel}
+ *   onSelect={setSel}
+ *   defaultExpandedIds={["src"]}
+ * />
+ */
+import React from "react";
+import type { BaseProps } from "../../types";
+export interface TreeNode {
+    id: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    children?: TreeNode[];
+}
+export interface TreeProps extends Omit<React.HTMLAttributes<HTMLUListElement>, "onSelect">, BaseProps {
+    data: TreeNode[];
+    expandedIds?: string[];
+    defaultExpandedIds?: string[];
+    onExpandedChange?: (ids: string[]) => void;
+    selectedId?: string | null;
+    defaultSelectedId?: string | null;
+    onSelect?: (id: string) => void;
+}
+export declare const Tree: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<HTMLUListElement>>;