fromsrc 0.0.0 → 0.0.2

package/dist/components/codeblock.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { memo, useRef, useId, useState, useEffect, useCallback } from 'react';
+import { useCopy } from '../hooks/copy';
+import { LangIcon } from './langicon';
+
+const wrapkey = "fromsrc-code-wrap";
+const wrapevent = "fromsrc-code-wrap-event";
+const linenumberstyle = `[data-line-numbers] code{counter-reset:line}[data-line-numbers] .line::before{counter-increment:line;content:counter(line);display:inline-block;width:3ch;margin-right:1.5ch;text-align:right;color:#4a4a4a;user-select:none;-webkit-user-select:none;font-variant-numeric:tabular-nums}`;
+const iconstyle = { width: 14, height: 14 };
+const btnstyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "6px",
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  transition: "color 0.15s",
+  borderRadius: "4px"
+};
+const CopyBtn = memo(function CopyBtn2({ coderef }) {
+  const { copied, copy } = useCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => copy(coderef.current?.textContent ?? ""),
+        "aria-label": copied ? "Copied" : "Copy code",
+        className: "hover:text-neutral-50",
+        style: { ...btnstyle, color: copied ? "#22c55e" : "#737373" },
+        children: copied ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: iconstyle, "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: iconstyle, "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+          /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? "copied to clipboard" : "" })
+  ] });
+});
+const WrapBtn = memo(function WrapBtn2({ wrap, toggle }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: toggle,
+      "aria-label": "Toggle word wrap",
+      className: "hover:text-neutral-50",
+      style: { ...btnstyle, color: wrap ? "#ef4444" : "#737373" },
+      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: iconstyle, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 6h18M3 12h15a3 3 0 1 1 0 6H9m0 0 3-3m-3 3 3 3", strokeLinecap: "round", strokeLinejoin: "round" }) })
+    }
+  );
+});
+const CodeBlock = memo(function CodeBlock2({ children, lang, title, lines }) {
+  const coderef = useRef(null);
+  const labelid = useId();
+  const hasheader = Boolean(title || lang);
+  const [wrap, setwrap] = useState(false);
+  useEffect(() => {
+    try {
+      setwrap(localStorage.getItem(wrapkey) === "1");
+    } catch {
+    }
+    const handler = (event) => {
+      const value = event.detail;
+      setwrap(value === "1");
+    };
+    window.addEventListener(wrapevent, handler);
+    return () => window.removeEventListener(wrapevent, handler);
+  }, []);
+  const toggle = useCallback(() => {
+    setwrap((prev) => {
+      const next = !prev;
+      const value = next ? "1" : "0";
+      try {
+        localStorage.setItem(wrapkey, value);
+      } catch {
+      }
+      window.dispatchEvent(new CustomEvent(wrapevent, { detail: value }));
+      return next;
+    });
+  }, []);
+  const controls = /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+    /* @__PURE__ */ jsx(WrapBtn, { wrap, toggle }),
+    /* @__PURE__ */ jsx(CopyBtn, { coderef })
+  ] });
+  return /* @__PURE__ */ jsxs("figure", { role: "group", "aria-labelledby": hasheader ? labelid : void 0, "data-line-numbers": lines || void 0, style: { position: "relative", margin: "24px 0", borderRadius: "8px", backgroundColor: "#0d0d0d", border: "1px solid #1c1c1c", overflow: "hidden" }, children: [
+    lines && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: linenumberstyle } }),
+    hasheader && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 16px", height: "40px", backgroundColor: "#141414", borderBottom: "1px solid #1c1c1c" }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+        lang && /* @__PURE__ */ jsx(LangIcon, { lang }),
+        /* @__PURE__ */ jsx("span", { id: labelid, style: { fontSize: "0.8rem", fontFamily: "ui-monospace, monospace", color: "#a0a0a0" }, children: title || lang })
+      ] }),
+      controls
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: coderef, tabIndex: 0, role: "region", "aria-label": hasheader ? `${title || lang} code` : "code", className: "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] focus:outline-none focus:ring-1 focus:ring-dim", style: { padding: "14px 16px", overflow: wrap ? "visible" : "auto", fontSize: "13px", lineHeight: "1.6", maxHeight: "500px", whiteSpace: wrap ? "pre-wrap" : "pre", wordBreak: wrap ? "break-all" : "normal" }, children }),
+    !hasheader && /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: "8px", right: "8px", display: "flex", alignItems: "center", gap: "4px" }, children: controls })
+  ] });
+});
+
+export { CodeBlock };

package/dist/components/codecopy.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { ReactElement } from 'react';
+
+interface CodeCopyProps {
+    code: string;
+    className?: string;
+    timeout?: number;
+}
+declare function CodeCopyBase({ code, className, timeout }: CodeCopyProps): ReactElement;
+declare const CodeCopy: react.MemoExoticComponent<typeof CodeCopyBase>;
+
+export { CodeCopy, type CodeCopyProps };

package/dist/components/codecopy.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo, useState, useRef, useCallback, useEffect } from 'react';
+
+const svg = { "aria-hidden": true, width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
+function CodeCopyBase({ code, className, timeout = 2e3 }) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef(null);
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), timeout);
+    }).catch(() => {
+    });
+  }, [code, timeout]);
+  useEffect(() => () => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleCopy,
+      "aria-label": copied ? "Copied" : "Copy code",
+      className,
+      style: {
+        position: "absolute",
+        top: 8,
+        right: 8,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 6,
+        background: "transparent",
+        border: "none",
+        cursor: "pointer",
+        opacity: copied ? 1 : 0.5,
+        transition: "opacity 0.15s"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.opacity = "1";
+      },
+      onMouseLeave: (e) => {
+        if (!copied) e.currentTarget.style.opacity = "0.5";
+      },
+      children: copied ? /* @__PURE__ */ jsx("svg", { ...svg, children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) }) : /* @__PURE__ */ jsxs("svg", { ...svg, children: [
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
+      ] })
+    }
+  );
+}
+const CodeCopy = memo(CodeCopyBase);
+
+export { CodeCopy };

package/dist/components/codegroup.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface CodeGroupProps {
+    children: ReactNode;
+    defaultValue?: string;
+    group?: string;
+    persist?: boolean;
+}
+interface CodeTabProps {
+    value: string;
+    label: string;
+    children: ReactNode;
+}
+interface CodeTabsProps {
+    children: ReactNode;
+}
+declare function CodeGroup({ children, defaultValue, group, persist, }: CodeGroupProps): ReactNode;
+declare function CodeTab({ value, label, children }: CodeTabProps): ReactNode;
+declare const CodeTabs: react.NamedExoticComponent<CodeTabsProps>;
+
+export { CodeGroup, type CodeGroupProps, CodeTab, type CodeTabProps, CodeTabs, type CodeTabsProps };

package/dist/components/codegroup.js

@@ -0,0 +1,134 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, memo, useContext, useRef, useCallback, useState, useMemo, useId, useEffect } from 'react';
+
+const key = "fromsrc-code-lang";
+const context = createContext(null);
+function safe(value) {
+  return value.replace(/[^a-z0-9_-]/gi, "-").toLowerCase();
+}
+function CodeGroup({
+  children,
+  defaultValue,
+  group,
+  persist = true
+}) {
+  const [active, rawset] = useState(defaultValue ?? "");
+  const [list, setlist] = useState([]);
+  const groupid = group?.trim() || "global";
+  const basekey = `${key}:${groupid}`;
+  const signature = useMemo(
+    () => list.length === 0 ? "default" : list.map((value) => safe(value)).join("|"),
+    [list]
+  );
+  const storekey = `${basekey}:${signature}`;
+  const eventkey = `${basekey}:event`;
+  const uid = useId().replace(/[:]/g, "");
+  const add = useCallback((value) => {
+    setlist((items) => items.includes(value) ? items : [...items, value]);
+  }, []);
+  const remove = useCallback((value) => {
+    setlist((items) => items.filter((item) => item !== value));
+  }, []);
+  useEffect(() => {
+    if (list.length === 0) return;
+    if (persist) {
+      try {
+        const stored = localStorage.getItem(storekey);
+        if (stored && list.includes(stored)) {
+          if (stored !== active) rawset(stored);
+          return;
+        }
+        const fallback = localStorage.getItem(basekey);
+        if (fallback && list.includes(fallback)) {
+          if (fallback !== active) rawset(fallback);
+          return;
+        }
+      } catch {
+      }
+    }
+    if (active && list.includes(active)) return;
+    const first = list[0] ?? "";
+    rawset(defaultValue && list.includes(defaultValue) ? defaultValue : first);
+  }, [active, basekey, defaultValue, list, persist, storekey]);
+  useEffect(() => {
+    if (!persist) return;
+    const handler = (event) => {
+      const value = event.detail;
+      if (typeof value === "string" && list.includes(value)) rawset(value);
+    };
+    window.addEventListener(eventkey, handler);
+    return () => window.removeEventListener(eventkey, handler);
+  }, [eventkey, list, persist]);
+  const set = useCallback(
+    (value) => {
+      rawset(value);
+      if (!persist) return;
+      try {
+        localStorage.setItem(basekey, value);
+        localStorage.setItem(storekey, value);
+      } catch {
+      }
+      window.dispatchEvent(new CustomEvent(eventkey, { detail: value }));
+    },
+    [basekey, eventkey, persist, storekey]
+  );
+  return /* @__PURE__ */ jsx(context.Provider, { value: { active, set, add, remove, list, prefix: `code-${uid}` }, children: /* @__PURE__ */ jsx("div", { className: "my-4 rounded-lg border border-white/10 overflow-hidden", children }) });
+}
+function CodeTab({ value, label, children }) {
+  const ctx = useContext(context);
+  if (!ctx) return null;
+  const add = ctx.add;
+  const remove = ctx.remove;
+  useEffect(() => {
+    add(value);
+    return () => remove(value);
+  }, [add, remove, value]);
+  const isactive = ctx.active === value || !ctx.active && ctx.list[0] === value;
+  const tabid = `${ctx.prefix}-tab-${safe(value)}`;
+  const panelid = `${ctx.prefix}-panel-${safe(value)}`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        id: tabid,
+        "data-value": value,
+        "aria-selected": isactive,
+        "aria-controls": panelid,
+        tabIndex: isactive ? 0 : -1,
+        onClick: () => ctx.set(value),
+        className: `px-4 py-2 text-sm font-medium border-b ${isactive ? "border-fg/30 text-fg bg-fg/5" : "border-transparent text-fg/60 hover:text-fg"}`,
+        children: label
+      }
+    ),
+    isactive && /* @__PURE__ */ jsx("div", { role: "tabpanel", id: panelid, "aria-labelledby": tabid, className: "[&>pre]:!mt-0 [&>pre]:!rounded-t-none", children })
+  ] });
+}
+const CodeTabs = memo(function CodeTabs2({ children }) {
+  const ctx = useContext(context);
+  const ref = useRef(null);
+  const onkey = useCallback(
+    (event) => {
+      if (!ctx || ctx.list.length === 0) return;
+      const current = Math.max(0, ctx.list.indexOf(ctx.active || ctx.list[0] || ""));
+      let next = current;
+      if (event.key === "ArrowRight") next = Math.min(ctx.list.length - 1, current + 1);
+      if (event.key === "ArrowLeft") next = Math.max(0, current - 1);
+      if (event.key === "Home") next = 0;
+      if (event.key === "End") next = ctx.list.length - 1;
+      if (next === current) return;
+      event.preventDefault();
+      const value = ctx.list[next];
+      if (!value) return;
+      ctx.set(value);
+      const button = ref.current?.querySelector(`button[data-value="${value}"]`);
+      button?.focus();
+    },
+    [ctx]
+  );
+  return /* @__PURE__ */ jsx("div", { ref, role: "tablist", "aria-label": "code examples", onKeyDown: onkey, className: "flex border-b border-white/10 bg-bg", children });
+});
+
+export { CodeGroup, CodeTab, CodeTabs };

package/dist/components/collapsible.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { ReactNode, JSX } from 'react';
+
+/**
+ * Props for the Collapsible component.
+ */
+interface CollapsibleProps {
+    /** The title displayed in the collapsible header. */
+    title: string;
+    /** Whether the collapsible is initially open. */
+    defaultOpen?: boolean;
+    /** The content to display when expanded. */
+    children: ReactNode;
+}
+declare function CollapsibleBase({ title, defaultOpen, children }: CollapsibleProps): JSX.Element;
+declare const Collapsible: react.MemoExoticComponent<typeof CollapsibleBase>;
+/**
+ * Props for the Details component.
+ */
+interface DetailsProps {
+    /** The summary text displayed in the details header. */
+    summary: string;
+    /** The content to display when expanded. */
+    children: ReactNode;
+}
+declare function DetailsBase({ summary, children }: DetailsProps): JSX.Element;
+declare const Details: react.MemoExoticComponent<typeof DetailsBase>;
+
+export { Collapsible, type CollapsibleProps, Details, type DetailsProps };

package/dist/components/collapsible.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useState, useId, useCallback } from 'react';
+import { IconChevronRight } from './icons';
+
+function CollapsibleBase({ title, defaultOpen = false, children }) {
+  const [open, setOpen] = useState(defaultOpen);
+  const id = useId();
+  const buttonId = `${id}-button`;
+  const contentId = `${id}-content`;
+  const toggle = useCallback(() => setOpen((prev) => !prev), []);
+  return /* @__PURE__ */ jsxs("div", { className: "my-4 rounded-lg border border-line overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        id: buttonId,
+        type: "button",
+        onClick: toggle,
+        "aria-expanded": open,
+        "aria-controls": contentId,
+        className: "flex items-center gap-2 w-full px-4 py-3 text-sm text-left text-fg hover:bg-surface/50 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx(
+            IconChevronRight,
+            {
+              size: 16,
+              className: `text-muted transition-transform duration-200 ${open ? "rotate-90" : ""}`
+            }
+          ),
+          title
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: contentId,
+        role: "region",
+        "aria-labelledby": buttonId,
+        className: `grid transition-[grid-template-rows] duration-200 ${open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`,
+        children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 pt-0", children }) })
+      }
+    )
+  ] });
+}
+const Collapsible = memo(CollapsibleBase);
+function DetailsBase({ summary, children }) {
+  return /* @__PURE__ */ jsxs("details", { className: "my-4 group", children: [
+    /* @__PURE__ */ jsxs("summary", { className: "flex items-center gap-2 cursor-pointer text-sm text-fg list-none [&::-webkit-details-marker]:hidden", children: [
+      /* @__PURE__ */ jsx(
+        IconChevronRight,
+        {
+          size: 16,
+          className: "text-muted transition-transform duration-200 group-open:rotate-90"
+        }
+      ),
+      summary
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-2 pl-6 text-sm text-muted", children })
+  ] });
+}
+const Details = memo(DetailsBase);
+
+export { Collapsible, Details };

package/dist/components/command.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode, JSX } from 'react';
+
+/**
+ * represents a single item in the command palette
+ */
+interface CommandItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    onSelect?: () => void;
+}
+/**
+ * props for the command palette component
+ */
+interface CommandProps {
+    items: CommandItem[];
+    placeholder?: string;
+    onSelect?: (item: CommandItem) => void;
+}
+declare function Command({ items, placeholder, onSelect }: CommandProps): JSX.Element;
+
+export { Command, type CommandItem, type CommandProps };

package/dist/components/command.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useId, useCallback, useEffect } from 'react';
+import { IconSearch } from './icons';
+
+function Command({ items, placeholder = "search...", onSelect }) {
+  const [query, setQuery] = useState("");
+  const [index, setIndex] = useState(0);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const id = useId();
+  const filtered = items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));
+  const listId = `${id}-list`;
+  const getOptionId = useCallback((itemId) => `${id}-option-${itemId}`, [id]);
+  useEffect(() => {
+    setIndex(0);
+  }, [query]);
+  useEffect(() => {
+    if (filtered.length > 0 && listRef.current) {
+      const option = listRef.current.querySelector(`[data-index="${index}"]`);
+      option?.scrollIntoView({ block: "nearest" });
+    }
+  }, [index, filtered.length]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setIndex((i) => Math.min(i + 1, filtered.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setIndex((i) => Math.max(i - 1, 0));
+          break;
+        case "Home":
+          e.preventDefault();
+          setIndex(0);
+          break;
+        case "End":
+          e.preventDefault();
+          setIndex(Math.max(0, filtered.length - 1));
+          break;
+        case "PageDown":
+          e.preventDefault();
+          setIndex((i) => Math.min(i + 5, filtered.length - 1));
+          break;
+        case "PageUp":
+          e.preventDefault();
+          setIndex((i) => Math.max(i - 5, 0));
+          break;
+        case "Escape":
+          e.preventDefault();
+          if (query) {
+            setQuery("");
+          } else {
+            inputRef.current?.blur();
+          }
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (filtered[index]) {
+            filtered[index].onSelect?.();
+            onSelect?.(filtered[index]);
+          }
+          break;
+      }
+    },
+    [filtered, index, query, onSelect]
+  );
+  const handleChange = useCallback((e) => {
+    setQuery(e.target.value);
+  }, []);
+  const handleItemClick = useCallback(
+    (item) => {
+      item.onSelect?.();
+      onSelect?.(item);
+      inputRef.current?.focus();
+    },
+    [onSelect]
+  );
+  const handleMouseEnter = useCallback((i) => {
+    setIndex(i);
+  }, []);
+  const activeOptionId = filtered[index] ? getOptionId(filtered[index].id) : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full rounded-lg border border-line bg-bg", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-line px-3", children: [
+      /* @__PURE__ */ jsx(IconSearch, { size: 16, className: "text-muted" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value: query,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          placeholder,
+          role: "combobox",
+          "aria-expanded": filtered.length > 0,
+          "aria-controls": listId,
+          "aria-activedescendant": activeOptionId,
+          "aria-autocomplete": "list",
+          className: "flex-1 bg-transparent py-3 text-sm outline-none placeholder:text-muted"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: listRef,
+        id: listId,
+        role: "listbox",
+        "aria-label": "results",
+        className: "max-h-64 overflow-y-auto p-1",
+        children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { role: "status", className: "px-3 py-6 text-center text-sm text-muted", children: "no results" }) : filtered.map((item, i) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            id: getOptionId(item.id),
+            type: "button",
+            role: "option",
+            "aria-selected": i === index,
+            "data-index": i,
+            tabIndex: -1,
+            onClick: () => handleItemClick(item),
+            onMouseEnter: () => handleMouseEnter(i),
+            className: `flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm transition-all duration-100 ${i === index ? "bg-surface text-fg" : "text-muted hover:bg-surface hover:text-fg"}`,
+            children: [
+              item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.icon }),
+              /* @__PURE__ */ jsx("span", { children: item.label })
+            ]
+          },
+          item.id
+        ))
+      }
+    )
+  ] });
+}
+
+export { Command };

package/dist/components/compare.d.ts

@@ -0,0 +1,54 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * visual style variant for comparison columns
+ */
+type CompareVariant = "default" | "good" | "bad";
+/**
+ * props for the compare container component
+ */
+interface CompareProps {
+    /** child column elements */
+    children: ReactNode;
+    /** accessible label for the comparison group */
+    label?: string;
+}
+/**
+ * container for side-by-side comparison columns
+ */
+declare const Compare: react.NamedExoticComponent<CompareProps>;
+/**
+ * props for individual comparison column
+ */
+interface ColumnProps {
+    /** column heading text */
+    title: string;
+    /** visual style variant */
+    variant?: CompareVariant;
+    /** column content */
+    children: ReactNode;
+}
+/**
+ * individual column within a comparison container
+ */
+declare const Column: react.NamedExoticComponent<ColumnProps>;
+/**
+ * props for before/after comparison row
+ */
+interface CompareRowProps {
+    /** content for the left (before) column */
+    left: ReactNode;
+    /** content for the right (after) column */
+    right: ReactNode;
+    /** accessible label for left column */
+    leftLabel?: string;
+    /** accessible label for right column */
+    rightLabel?: string;
+}
+/**
+ * side-by-side before/after comparison row
+ */
+declare const CompareRow: react.NamedExoticComponent<CompareRowProps>;
+
+export { Column, type ColumnProps, Compare, type CompareProps, CompareRow, type CompareRowProps, type CompareVariant };