fromsrc 0.0.0 → 0.0.2

package/dist/components/panel.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useCallback } from 'react';
+import { IconSearch } from './icons';
+import { getRecentOptionId, Recent } from './recent';
+import { getOptionId, Results } from './results';
+
+function Panel({
+  query,
+  value,
+  safe,
+  recent,
+  loading,
+  results,
+  input,
+  list,
+  onClose,
+  onChange,
+  onKey,
+  onSelect,
+  onNavigate
+}) {
+  const dialog = useRef(null);
+  const hasQuery = value.trim().length > 0;
+  const showRecent = !hasQuery && recent.length > 0;
+  const showResults = hasQuery && !loading && results.length > 0;
+  const listId = showRecent ? "search-recent-listbox" : "search-results-listbox";
+  const active = safe < 0 ? void 0 : showRecent ? getRecentOptionId(safe) : showResults ? getOptionId(safe) : void 0;
+  const resultStatus = loading ? "loading results" : !hasQuery ? recent.length > 0 ? `${recent.length} recent searches` : "no recent searches" : results.length === 0 ? "no results" : `${results.length} results`;
+  const onTab = useCallback((event) => {
+    if (event.key !== "Tab" || !dialog.current) return;
+    const nodes = dialog.current.querySelectorAll(
+      'button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
+    );
+    const items = Array.from(nodes).filter((item) => !item.hasAttribute("aria-hidden"));
+    if (items.length === 0) return;
+    const active2 = document.activeElement;
+    if (!(active2 instanceof HTMLElement) || !dialog.current.contains(active2)) {
+      event.preventDefault();
+      items[0]?.focus();
+      return;
+    }
+    const index = items.findIndex((item) => item === active2);
+    if (index < 0) {
+      event.preventDefault();
+      items[0]?.focus();
+      return;
+    }
+    if (event.shiftKey) {
+      if (index <= 0) {
+        event.preventDefault();
+        items[items.length - 1]?.focus();
+      }
+      return;
+    }
+    if (index === items.length - 1) {
+      event.preventDefault();
+      items[0]?.focus();
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[100]", onKeyDownCapture: onTab, children: [
+    /* @__PURE__ */ jsx("button", { type: "button", className: "fixed inset-0 bg-bg/80 backdrop-blur-sm cursor-default", onClick: onClose, "aria-label": "close search" }),
+    /* @__PURE__ */ jsx("div", { ref: dialog, className: "relative z-10 max-w-lg mx-auto mt-[20vh]", role: "dialog", "aria-modal": "true", "aria-label": "search documentation", children: /* @__PURE__ */ jsxs("div", { className: "bg-surface border border-line rounded-xl shadow-2xl overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 border-b border-line", children: [
+        /* @__PURE__ */ jsx(IconSearch, { className: "w-4 h-4 text-muted", size: 16 }),
+        /* @__PURE__ */ jsx("input", { ref: input, type: "text", value: query, onChange: (event) => onChange(event.target.value), onKeyDown: onKey, placeholder: "search", className: "flex-1 py-4 bg-transparent text-fg text-sm placeholder:text-muted focus:outline-none", role: "combobox", "aria-expanded": showRecent || showResults, "aria-haspopup": "listbox", "aria-controls": listId, "aria-activedescendant": active, "aria-autocomplete": "list" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: resultStatus }),
+        /* @__PURE__ */ jsx("kbd", { className: "px-1.5 py-0.5 text-[10px] text-muted bg-bg border border-line rounded", children: "esc" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "max-h-80 overflow-y-auto", "aria-busy": loading, children: showRecent ? /* @__PURE__ */ jsx(Recent, { listId, items: recent, selected: safe, onSelect }) : loading ? /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-muted text-sm", role: "status", "aria-live": "polite", children: "loading" }) : showResults ? /* @__PURE__ */ jsx(Results, { listId, results, selected: safe, query: value, listRef: list, onResultClick: onNavigate, onResultKeyDown: (event, slug, anchor) => event.key === "Enter" && onNavigate(slug, anchor) }) : /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-muted text-sm", role: "status", "aria-live": "polite", children: "no results" }) })
+    ] }) })
+  ] });
+}
+
+export { Panel };

package/dist/components/playground.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { JSX } from 'react';
+
+interface PlaygroundProps {
+    method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+    url: string;
+    headers?: Record<string, string>;
+    body?: string;
+    className?: string;
+}
+declare function PlaygroundBase({ method, url, headers: initial, body: initialBody, className }: PlaygroundProps): JSX.Element;
+declare const Playground: react.MemoExoticComponent<typeof PlaygroundBase>;
+
+export { Playground, type PlaygroundProps };

package/dist/components/playground.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useState, useCallback } from 'react';
+
+const colors = {
+  GET: "bg-emerald-500/10 text-emerald-400",
+  POST: "bg-blue-500/10 text-blue-400",
+  PUT: "bg-amber-500/10 text-amber-400",
+  PATCH: "bg-purple-500/10 text-purple-400",
+  DELETE: "bg-red-500/10 text-red-400"
+};
+function toEntries(init) {
+  if (!init) return [{ key: "", value: "" }];
+  const entries = Object.entries(init).map(([key, value]) => ({ key, value }));
+  return entries.length ? entries : [{ key: "", value: "" }];
+}
+function PlaygroundBase({ method, url, headers: initial, body: initialBody, className = "" }) {
+  const [headers, setHeaders] = useState(() => toEntries(initial));
+  const [body, setBody] = useState(initialBody ?? "");
+  const [response, setResponse] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const hasBody = method === "POST" || method === "PUT" || method === "PATCH";
+  const updateHeader = useCallback((i, field, val) => {
+    setHeaders((h) => h.map((item, idx) => idx === i ? { ...item, [field]: val } : item));
+  }, []);
+  const addHeader = useCallback(() => setHeaders((h) => [...h, { key: "", value: "" }]), []);
+  const removeHeader = useCallback((i) => setHeaders((h) => h.filter((_, idx) => idx !== i)), []);
+  const send = useCallback(async () => {
+    setLoading(true);
+    setResponse(null);
+    const hdrs = {};
+    for (const h of headers) if (h.key.trim()) hdrs[h.key.trim()] = h.value;
+    const start = performance.now();
+    try {
+      const res = await fetch(url, { method, headers: hdrs, body: hasBody && body ? body : void 0 });
+      const text = await res.text();
+      const rh = {};
+      res.headers.forEach((v, k) => {
+        rh[k] = v;
+      });
+      setResponse({ status: res.status, headers: rh, body: text, time: Math.round(performance.now() - start) });
+    } catch {
+      setResponse({ status: 0, headers: {}, body: "request failed", time: Math.round(performance.now() - start) });
+    }
+    setLoading(false);
+  }, [method, url, headers, body, hasBody]);
+  const input = "w-full rounded border border-line bg-transparent px-2 py-1 text-sm";
+  return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border border-line overflow-hidden my-6 ${className}`.trim(), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3 bg-surface/50 border-b border-line", children: [
+      /* @__PURE__ */ jsx("span", { className: `px-2 py-0.5 rounded text-xs font-bold uppercase ${colors[method]}`, children: method }),
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-sm text-fg", children: url })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted uppercase", children: "Headers" }),
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: addHeader, className: "text-xs text-accent", children: "+ add" })
+        ] }),
+        headers.map((h, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mb-1.5", children: [
+          /* @__PURE__ */ jsx("input", { className: input, placeholder: "key", value: h.key, onChange: (e) => updateHeader(i, "key", e.target.value) }),
+          /* @__PURE__ */ jsx("input", { className: input, placeholder: "value", value: h.value, onChange: (e) => updateHeader(i, "value", e.target.value) }),
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => removeHeader(i), className: "text-xs text-muted shrink-0", children: "x" })
+        ] }, i))
+      ] }),
+      hasBody && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted uppercase mb-2 block", children: "Body" }),
+        /* @__PURE__ */ jsx("textarea", { className: `${input} min-h-[80px] resize-y`, value: body, onChange: (e) => setBody(e.target.value) })
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: send, disabled: loading, className: "rounded bg-accent px-4 py-1.5 text-sm font-medium text-white disabled:opacity-50", children: loading ? "Sending..." : "Send" })
+    ] }),
+    response && /* @__PURE__ */ jsxs("div", { className: "border-t border-line p-4 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: `px-2 py-0.5 rounded text-xs font-bold ${response.status >= 200 && response.status < 300 ? "bg-emerald-500/10 text-emerald-400" : "bg-red-500/10 text-red-400"}`, children: response.status || "ERR" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted", children: [
+          response.time,
+          "ms"
+        ] })
+      ] }),
+      Object.keys(response.headers).length > 0 && /* @__PURE__ */ jsxs("details", { className: "text-xs", children: [
+        /* @__PURE__ */ jsx("summary", { className: "text-muted cursor-pointer", children: "Response Headers" }),
+        /* @__PURE__ */ jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap text-muted mt-1", children: Object.entries(response.headers).map(([k, v]) => `${k}: ${v}`).join("\n") })
+      ] }),
+      /* @__PURE__ */ jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap text-fg bg-surface/50 rounded p-3 overflow-x-auto", children: response.body })
+    ] })
+  ] });
+}
+const Playground = memo(PlaygroundBase);
+
+export { Playground };

package/dist/components/popover.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode, JSX } from 'react';
+
+/**
+ * Props for the Popover component
+ */
+interface PopoverProps {
+    /** Element that triggers the popover */
+    trigger: ReactNode;
+    /** Content to display inside the popover */
+    children: ReactNode;
+    /** Horizontal alignment relative to trigger */
+    align?: "start" | "center" | "end";
+    /** Vertical position relative to trigger */
+    side?: "top" | "bottom";
+}
+declare function Popover({ trigger, children, align, side, }: PopoverProps): JSX.Element;
+
+export { Popover, type PopoverProps };

package/dist/components/popover.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useId, useCallback, useEffect, useLayoutEffect } from 'react';
+import { useClickOutside } from '../hooks/clickoutside';
+import { useEscapeKey } from '../hooks/escapekey';
+
+const ALIGN_CLASSES = {
+  start: "left-0",
+  center: "left-1/2 -translate-x-1/2",
+  end: "right-0"
+};
+const SIDE_CLASSES = {
+  top: "bottom-full mb-2",
+  bottom: "top-full mt-2"
+};
+function Popover({
+  trigger,
+  children,
+  align = "start",
+  side = "bottom"
+}) {
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState({
+    align: ALIGN_CLASSES[align],
+    side: SIDE_CLASSES[side]
+  });
+  const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const contentRef = useRef(null);
+  const contentId = useId();
+  const close = useCallback(() => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  }, []);
+  const toggle = useCallback(() => {
+    setOpen((prev) => !prev);
+  }, []);
+  useClickOutside(containerRef, close, open);
+  useEscapeKey(close, open);
+  useEffect(() => {
+    if (open) {
+      contentRef.current?.focus();
+    }
+  }, [open]);
+  useLayoutEffect(() => {
+    if (!open || !contentRef.current) return;
+    const content = contentRef.current;
+    const rect = content.getBoundingClientRect();
+    const viewport = {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+    let adjustedAlign = ALIGN_CLASSES[align];
+    let adjustedSide = SIDE_CLASSES[side];
+    if (rect.right > viewport.width) {
+      adjustedAlign = ALIGN_CLASSES.end;
+    } else if (rect.left < 0) {
+      adjustedAlign = ALIGN_CLASSES.start;
+    }
+    if (side === "bottom" && rect.bottom > viewport.height) {
+      adjustedSide = SIDE_CLASSES.top;
+    } else if (side === "top" && rect.top < 0) {
+      adjustedSide = SIDE_CLASSES.bottom;
+    }
+    setPosition({ align: adjustedAlign, side: adjustedSide });
+  }, [open, align, side]);
+  const handleTriggerKey = useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggle();
+      }
+      if (e.key === "ArrowDown" && !open) {
+        e.preventDefault();
+        setOpen(true);
+      }
+    },
+    [open, toggle]
+  );
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative inline-block", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        "aria-expanded": open,
+        "aria-haspopup": "dialog",
+        "aria-controls": open ? contentId : void 0,
+        onClick: toggle,
+        onKeyDown: handleTriggerKey,
+        className: "inline-flex items-center",
+        children: trigger
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: contentRef,
+        id: contentId,
+        role: "dialog",
+        tabIndex: -1,
+        className: `absolute z-50 min-w-[200px] rounded-lg border border-line bg-bg p-3 shadow-lg ${position.align} ${position.side}`,
+        children
+      }
+    )
+  ] });
+}
+
+export { Popover };

package/dist/components/prelink.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+
+interface PreLinkProps {
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+}
+declare const PreLink: react.NamedExoticComponent<PreLinkProps>;
+
+export { PreLink, type PreLinkProps };

package/dist/components/prelink.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useState, useRef, useCallback } from 'react';
+
+function domain(href) {
+  try {
+    return new URL(href).hostname.replace("www.", "");
+  } catch {
+    return null;
+  }
+}
+function external(href) {
+  return href.startsWith("http") && !href.includes(window.location.hostname);
+}
+const PreLink = memo(function PreLink2({ href, children, className }) {
+  const [visible, setVisible] = useState(false);
+  const showTimer = useRef(null);
+  const hideTimer = useRef(null);
+  const enter = useCallback(() => {
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+    showTimer.current = setTimeout(() => setVisible(true), 300);
+  }, []);
+  const leave = useCallback(() => {
+    if (showTimer.current) clearTimeout(showTimer.current);
+    hideTimer.current = setTimeout(() => setVisible(false), 100);
+  }, []);
+  const host = domain(href);
+  const isExternal = typeof window !== "undefined" && external(href);
+  return /* @__PURE__ */ jsxs("span", { className: "relative inline", onMouseEnter: enter, onMouseLeave: leave, children: [
+    /* @__PURE__ */ jsx("a", { href, className, target: host ? "_blank" : void 0, rel: host ? "noopener noreferrer" : void 0, children }),
+    visible && host && /* @__PURE__ */ jsxs("span", { className: "absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-2 w-72 rounded-lg border border-line bg-surface p-3 shadow-lg pointer-events-none", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-fg block truncate", children: typeof children === "string" ? children : host }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted mt-1 block truncate", children: href }),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-dim mt-2 flex items-center gap-1", children: [
+        isExternal && /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+          /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+          /* @__PURE__ */ jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+        ] }),
+        host
+      ] })
+    ] })
+  ] });
+});
+
+export { PreLink };

package/dist/components/prevnext.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { JSX } from 'react';
+
+interface PrevNextLink {
+    title: string;
+    href: string;
+    label?: string;
+}
+interface PrevNextProps {
+    prev?: PrevNextLink;
+    next?: PrevNextLink;
+    className?: string;
+}
+declare function PrevNextBase({ prev, next, className }: PrevNextProps): JSX.Element | null;
+declare const PrevNext: react.MemoExoticComponent<typeof PrevNextBase>;
+
+export { PrevNext, type PrevNextLink, type PrevNextProps };

package/dist/components/prevnext.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+function Chevron({ direction }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: direction === "left" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" })
+    }
+  );
+}
+function PrevNextBase({ prev, next, className }) {
+  if (!prev && !next) return null;
+  return /* @__PURE__ */ jsxs("div", { className: `flex justify-between ${className ?? ""}`, children: [
+    prev ? /* @__PURE__ */ jsxs("a", { href: prev.href, className: "flex items-center gap-2 text-left mr-auto", children: [
+      /* @__PURE__ */ jsx(Chevron, { direction: "left" }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs text-muted", children: prev.label ?? "Previous" }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm", children: prev.title })
+      ] })
+    ] }) : /* @__PURE__ */ jsx("div", {}),
+    next ? /* @__PURE__ */ jsxs("a", { href: next.href, className: "flex items-center gap-2 text-right ml-auto", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs text-muted", children: next.label ?? "Next" }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm", children: next.title })
+      ] }),
+      /* @__PURE__ */ jsx(Chevron, { direction: "right" })
+    ] }) : /* @__PURE__ */ jsx("div", {})
+  ] });
+}
+const PrevNext = memo(PrevNextBase);
+
+export { PrevNext };

package/dist/components/progress.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+
+/**
+ * Props for the Progress component
+ */
+interface ProgressProps {
+    /** Current progress value */
+    value: number;
+    /** Maximum value (default: 100) */
+    max?: number;
+    /** Accessible label for the progress bar */
+    label?: string;
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+}
+declare const Progress: react.NamedExoticComponent<ProgressProps>;
+/**
+ * Props for the ProgressSteps component
+ */
+interface ProgressStepsProps {
+    /** Current step index (0-based) */
+    current: number;
+    /** Total number of steps */
+    total: number;
+    /** Optional labels for each step */
+    labels?: string[];
+}
+declare const ProgressSteps: react.NamedExoticComponent<ProgressStepsProps>;
+
+export { Progress, type ProgressProps, ProgressSteps, type ProgressStepsProps };

package/dist/components/progress.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const sizes = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-3"
+};
+const Progress = memo(function Progress2({
+  value,
+  max = 100,
+  label,
+  size = "md"
+}) {
+  const percentage = Math.min(100, Math.max(0, value / max * 100));
+  return /* @__PURE__ */ jsxs("div", { className: "my-4", children: [
+    label && /* @__PURE__ */ jsxs("div", { className: "flex justify-between mb-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted", children: label }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-fg", "aria-hidden": "true", children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `w-full ${sizes[size]} bg-surface rounded-full overflow-hidden`,
+        role: "progressbar",
+        "aria-valuenow": percentage,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": label,
+        "aria-valuetext": `${Math.round(percentage)}%`,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${sizes[size]} bg-accent rounded-full transition-[width] duration-300 ease-out`,
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    )
+  ] });
+});
+const ProgressSteps = memo(function ProgressSteps2({
+  current,
+  total,
+  labels
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "my-6", role: "group", "aria-label": "Progress steps", children: [
+    /* @__PURE__ */ jsx("ol", { className: "flex items-center justify-between list-none p-0 m-0", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium border transition-colors duration-200 ease-out ${i < current ? "bg-accent border-accent text-bg" : i === current ? "border-accent text-accent" : "border-line text-muted"}`,
+          "aria-current": i === current ? "step" : void 0,
+          "aria-label": `Step ${i + 1}${labels?.[i] ? `: ${labels[i]}` : ""}${i < current ? " completed" : i === current ? " current" : ""}`,
+          children: i + 1
+        }
+      ),
+      i < total - 1 && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `w-8 h-0.5 transition-colors duration-200 ease-out ${i < current ? "bg-accent" : "bg-line"}`,
+          "aria-hidden": "true"
+        }
+      )
+    ] }, i)) }),
+    labels?.[current] && /* @__PURE__ */ jsx("div", { className: "text-center mt-3 text-sm text-muted", "aria-live": "polite", children: labels[current] })
+  ] });
+});
+
+export { Progress, ProgressSteps };

package/dist/components/property.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Props for the Property component that displays a single API property.
+ */
+interface PropertyProps {
+    name: string;
+    type: string;
+    required?: boolean;
+    default?: ReactNode;
+    deprecated?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Props for the Properties component that wraps multiple Property items.
+ */
+interface PropertiesProps {
+    children: ReactNode;
+}
+declare const Property: react.NamedExoticComponent<PropertyProps>;
+declare const Properties: react.NamedExoticComponent<PropertiesProps>;
+
+export { Properties, type PropertiesProps, Property, type PropertyProps };

package/dist/components/property.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const Property = memo(function Property2({
+  name,
+  type,
+  required,
+  default: defaultValue,
+  deprecated,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      "aria-labelledby": `property-${name}`,
+      className: `py-4 border-b border-line last:border-0 ${deprecated ? "opacity-60" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-center gap-2 mb-2", children: [
+          /* @__PURE__ */ jsx(
+            "h3",
+            {
+              id: `property-${name}`,
+              className: `text-sm font-mono ${deprecated ? "line-through" : "text-fg"}`,
+              children: name
+            }
+          ),
+          /* @__PURE__ */ jsx("code", { className: "text-xs px-1.5 py-0.5 rounded bg-surface text-muted font-mono", children: type }),
+          required && /* @__PURE__ */ jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded bg-red-500/10 text-red-400 uppercase tracking-wider", children: "required" }),
+          deprecated && /* @__PURE__ */ jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded bg-amber-500/10 text-amber-400 uppercase tracking-wider", children: "deprecated" }),
+          defaultValue !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted", children: [
+            "default: ",
+            /* @__PURE__ */ jsx("code", { className: "font-mono", children: defaultValue })
+          ] })
+        ] }),
+        children && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted", children })
+      ]
+    }
+  );
+});
+const Properties = memo(function Properties2({ children }) {
+  return /* @__PURE__ */ jsx("section", { "aria-label": "Properties", className: "my-6 divide-y divide-line", children });
+});
+
+export { Properties, Property };

package/dist/components/quote.d.ts

@@ -0,0 +1,44 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Props for the Quote component
+ */
+interface QuoteProps {
+    /** Quote content */
+    children: ReactNode;
+    /** Author name */
+    author?: string;
+    /** Author role or title */
+    role?: string;
+    /** Avatar image URL */
+    avatar?: string;
+}
+declare function QuoteBase({ children, author, role, avatar }: QuoteProps): React.JSX.Element;
+declare const Quote: react.MemoExoticComponent<typeof QuoteBase>;
+/**
+ * Props for the Testimonials grid container
+ */
+interface TestimonialsProps {
+    /** Testimonial components */
+    children: ReactNode;
+}
+declare function TestimonialsBase({ children }: TestimonialsProps): React.JSX.Element;
+declare const Testimonials: react.MemoExoticComponent<typeof TestimonialsBase>;
+/**
+ * Props for the Testimonial component
+ */
+interface TestimonialProps {
+    /** Testimonial content */
+    children: ReactNode;
+    /** Author name */
+    author: string;
+    /** Author role or title */
+    role?: string;
+    /** Avatar image URL */
+    avatar?: string;
+}
+declare function TestimonialBase({ children, author, role, avatar }: TestimonialProps): React.JSX.Element;
+declare const Testimonial: react.MemoExoticComponent<typeof TestimonialBase>;
+
+export { Quote, type QuoteProps, Testimonial, type TestimonialProps, Testimonials, type TestimonialsProps };