@hypoth-ui/docs-renderer-next 0.1.0

package/dist/index.js

@@ -0,0 +1,751 @@
+// src/index.ts
+export * from "@hypoth-ui/docs-core";
+
+// components/search/search-input.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+function SearchInput({
+  placeholder = "Search documentation...",
+  className = "",
+  enabled = true
+}) {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const router = useRouter();
+  useEffect(() => {
+    if (!query.trim()) {
+      setResults([]);
+      return;
+    }
+    const abortController = new AbortController();
+    const timeoutId = setTimeout(async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch(`/api/search?q=${encodeURIComponent(query)}&limit=10`, {
+          signal: abortController.signal
+        });
+        if (response.ok) {
+          const data = await response.json();
+          setResults(data.results);
+        }
+      } catch (error) {
+        if (error.name !== "AbortError") {
+          console.error("Search error:", error);
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    }, 200);
+    return () => {
+      clearTimeout(timeoutId);
+      abortController.abort();
+    };
+  }, [query]);
+  useEffect(() => {
+    const handleKeyDown2 = (e) => {
+      if (e.key === "/" && !isInputFocused()) {
+        e.preventDefault();
+        inputRef.current?.focus();
+      }
+    };
+    function isInputFocused() {
+      const active = document.activeElement;
+      return active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active?.getAttribute("contenteditable") === "true";
+    }
+    document.addEventListener("keydown", handleKeyDown2);
+    return () => document.removeEventListener("keydown", handleKeyDown2);
+  }, []);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleKeyDown = useCallback(
+    (e) => {
+      switch (e.key) {
+        case "Escape":
+          setIsOpen(false);
+          setQuery("");
+          inputRef.current?.blur();
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex((prev) => Math.min(prev + 1, results.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((prev) => Math.max(prev - 1, -1));
+          break;
+        case "Enter":
+          if (selectedIndex >= 0 && results[selectedIndex]) {
+            e.preventDefault();
+            navigateToResult(results[selectedIndex]);
+          }
+          break;
+      }
+    },
+    [results, selectedIndex]
+  );
+  const navigateToResult = useCallback(
+    (result) => {
+      setIsOpen(false);
+      setQuery("");
+      router.push(result.url);
+    },
+    [router]
+  );
+  const componentResults = results.filter((r) => r.type === "component");
+  const guideResults = results.filter((r) => r.type === "guide");
+  if (!enabled) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement("div", { ref: containerRef, className: `search-input ${className}` }, /* @__PURE__ */ React.createElement("div", { className: "search-input__wrapper" }, /* @__PURE__ */ React.createElement("span", { className: "search-input__icon", "aria-hidden": "true" }, isLoading ? /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className: "search-input__spinner",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ React.createElement(
+      "circle",
+      {
+        cx: "8",
+        cy: "8",
+        r: "6",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeDasharray: "32",
+        strokeDashoffset: "8"
+      }
+    )
+  ) : /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ React.createElement("circle", { cx: "6.5", cy: "6.5", r: "5.5" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M10.5 10.5L15 15" })
+  )), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ref: inputRef,
+      type: "search",
+      className: "search-input__field",
+      placeholder,
+      value: query,
+      onChange: (e) => {
+        setQuery(e.target.value);
+        setSelectedIndex(-1);
+      },
+      onFocus: () => setIsOpen(true),
+      onKeyDown: handleKeyDown,
+      "aria-label": "Search documentation",
+      "aria-expanded": isOpen && results.length > 0,
+      "aria-controls": "search-results",
+      "aria-activedescendant": selectedIndex >= 0 ? `search-result-${selectedIndex}` : void 0,
+      role: "combobox",
+      autoComplete: "off"
+    }
+  ), /* @__PURE__ */ React.createElement("span", { className: "search-input__shortcut", "aria-hidden": "true" }, "/")), isOpen && query.length > 0 && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      id: "search-results",
+      className: "search-input__dropdown",
+      role: "listbox",
+      "aria-label": "Search results",
+      tabIndex: -1
+    },
+    results.length === 0 && !isLoading && /* @__PURE__ */ React.createElement("div", { className: "search-input__empty" }, "No results found for \u201C", query, "\u201D"),
+    componentResults.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "search-input__group" }, /* @__PURE__ */ React.createElement("div", { className: "search-input__group-label" }, "Components"), componentResults.map((result, idx) => {
+      const globalIndex = idx;
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          key: result.id,
+          id: `search-result-${globalIndex}`,
+          className: `search-input__result ${selectedIndex === globalIndex ? "search-input__result--selected" : ""}`,
+          onClick: () => navigateToResult(result),
+          onMouseEnter: () => setSelectedIndex(globalIndex),
+          role: "option",
+          "aria-selected": selectedIndex === globalIndex
+        },
+        /* @__PURE__ */ React.createElement("span", { className: "search-input__result-icon" }, /* @__PURE__ */ React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "currentColor", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("rect", { x: "1", y: "1", width: "5", height: "5", rx: "1" }), /* @__PURE__ */ React.createElement("rect", { x: "8", y: "1", width: "5", height: "5", rx: "1" }), /* @__PURE__ */ React.createElement("rect", { x: "1", y: "8", width: "5", height: "5", rx: "1" }), /* @__PURE__ */ React.createElement("rect", { x: "8", y: "8", width: "5", height: "5", rx: "1" }))),
+        /* @__PURE__ */ React.createElement("span", { className: "search-input__result-content" }, /* @__PURE__ */ React.createElement("span", { className: "search-input__result-title" }, result.title), result.description && /* @__PURE__ */ React.createElement("span", { className: "search-input__result-description" }, result.description)),
+        result.status && /* @__PURE__ */ React.createElement("span", { className: `search-input__result-status search-input__result-status--${result.status}` }, result.status)
+      );
+    })),
+    guideResults.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "search-input__group" }, /* @__PURE__ */ React.createElement("div", { className: "search-input__group-label" }, "Guides"), guideResults.map((result, idx) => {
+      const globalIndex = componentResults.length + idx;
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          key: result.id,
+          id: `search-result-${globalIndex}`,
+          className: `search-input__result ${selectedIndex === globalIndex ? "search-input__result--selected" : ""}`,
+          onClick: () => navigateToResult(result),
+          onMouseEnter: () => setSelectedIndex(globalIndex),
+          role: "option",
+          "aria-selected": selectedIndex === globalIndex
+        },
+        /* @__PURE__ */ React.createElement("span", { className: "search-input__result-icon" }, /* @__PURE__ */ React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "currentColor", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { d: "M2 2h10v10H2V2zm1 1v8h8V3H3z" }), /* @__PURE__ */ React.createElement("path", { d: "M4 5h6M4 7h6M4 9h4", stroke: "currentColor", strokeWidth: "1" }))),
+        /* @__PURE__ */ React.createElement("span", { className: "search-input__result-content" }, /* @__PURE__ */ React.createElement("span", { className: "search-input__result-title" }, result.title), result.description && /* @__PURE__ */ React.createElement("span", { className: "search-input__result-description" }, result.description))
+      );
+    }))
+  ), /* @__PURE__ */ React.createElement("style", { jsx: true }, `
+        .search-input {
+          position: relative;
+        }
+
+        .search-input__wrapper {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          padding: 0.5rem 0.75rem;
+          background: var(--ds-color-background-subtle, #f5f5f5);
+          border: 1px solid var(--ds-color-border-default, #e5e5e5);
+          border-radius: 6px;
+          transition: border-color 0.15s, box-shadow 0.15s;
+        }
+
+        .search-input__wrapper:focus-within {
+          border-color: var(--ds-brand-primary, #0066cc);
+          box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+        }
+
+        .search-input__icon {
+          color: var(--ds-color-foreground-muted, #666);
+          flex-shrink: 0;
+        }
+
+        .search-input__spinner {
+          animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+
+        .search-input__field {
+          flex: 1;
+          border: none;
+          background: transparent;
+          font-size: 0.875rem;
+          color: var(--ds-color-foreground-default, #1a1a1a);
+          outline: none;
+          min-width: 150px;
+        }
+
+        .search-input__field::placeholder {
+          color: var(--ds-color-foreground-muted, #666);
+        }
+
+        .search-input__shortcut {
+          padding: 0.125rem 0.375rem;
+          font-size: 0.75rem;
+          font-family: monospace;
+          background: var(--ds-color-background-surface, #fff);
+          border: 1px solid var(--ds-color-border-default, #e5e5e5);
+          border-radius: 4px;
+          color: var(--ds-color-foreground-muted, #666);
+        }
+
+        .search-input__dropdown {
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          margin-top: 0.5rem;
+          background: var(--ds-color-background-surface, #fff);
+          border: 1px solid var(--ds-color-border-default, #e5e5e5);
+          border-radius: 8px;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+          z-index: 1000;
+          max-height: 400px;
+          overflow-y: auto;
+        }
+
+        .search-input__empty {
+          padding: 1rem;
+          color: var(--ds-color-foreground-muted, #666);
+          font-size: 0.875rem;
+          text-align: center;
+        }
+
+        .search-input__group {
+          padding: 0.5rem 0;
+        }
+
+        .search-input__group:not(:last-child) {
+          border-bottom: 1px solid var(--ds-color-border-default, #e5e5e5);
+        }
+
+        .search-input__group-label {
+          padding: 0.25rem 0.75rem;
+          font-size: 0.75rem;
+          font-weight: 600;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          color: var(--ds-color-foreground-muted, #666);
+        }
+
+        .search-input__result {
+          display: flex;
+          align-items: flex-start;
+          gap: 0.75rem;
+          width: 100%;
+          padding: 0.5rem 0.75rem;
+          background: transparent;
+          border: none;
+          cursor: pointer;
+          text-align: left;
+        }
+
+        .search-input__result:hover,
+        .search-input__result--selected {
+          background: var(--ds-color-background-subtle, #f5f5f5);
+        }
+
+        .search-input__result-icon {
+          flex-shrink: 0;
+          width: 20px;
+          height: 20px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: var(--ds-color-foreground-muted, #666);
+        }
+
+        .search-input__result-content {
+          flex: 1;
+          min-width: 0;
+        }
+
+        .search-input__result-title {
+          display: block;
+          font-size: 0.875rem;
+          font-weight: 500;
+          color: var(--ds-color-foreground-default, #1a1a1a);
+        }
+
+        .search-input__result-description {
+          display: block;
+          font-size: 0.75rem;
+          color: var(--ds-color-foreground-muted, #666);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .search-input__result-status {
+          flex-shrink: 0;
+          padding: 0.125rem 0.375rem;
+          font-size: 0.625rem;
+          font-weight: 500;
+          text-transform: uppercase;
+          border-radius: 4px;
+        }
+
+        .search-input__result-status--stable {
+          background: var(--ds-color-success-subtle, #dcfce7);
+          color: var(--ds-color-success, #16a34a);
+        }
+
+        .search-input__result-status--beta {
+          background: var(--ds-color-warning-subtle, #fef3c7);
+          color: var(--ds-color-warning, #d97706);
+        }
+
+        .search-input__result-status--experimental {
+          background: var(--ds-color-info-subtle, #dbeafe);
+          color: var(--ds-color-info, #2563eb);
+        }
+
+        .search-input__result-status--deprecated {
+          background: var(--ds-color-error-subtle, #fee2e2);
+          color: var(--ds-color-error, #dc2626);
+        }
+      `));
+}
+
+// components/live-example.tsx
+import { useState as useState2 } from "react";
+function LiveExample({
+  children,
+  code,
+  language = "tsx",
+  title,
+  description,
+  defaultShowCode = false,
+  variants,
+  className = ""
+}) {
+  const [showCode, setShowCode] = useState2(defaultShowCode);
+  const [copied, setCopied] = useState2(false);
+  const [activeVariant, setActiveVariant] = useState2(0);
+  const currentCode = variants ? variants[activeVariant]?.code || code : code;
+  const currentPreview = variants ? variants[activeVariant]?.preview || children : children;
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(currentCode);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (error) {
+      console.error("Failed to copy:", error);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: `live-example ${className}` }, title && /* @__PURE__ */ React.createElement("div", { className: "live-example__header" }, /* @__PURE__ */ React.createElement("h3", { className: "live-example__title" }, title), description && /* @__PURE__ */ React.createElement("p", { className: "live-example__description" }, description)), variants && variants.length > 1 && /* @__PURE__ */ React.createElement("div", { className: "live-example__variants", role: "tablist" }, variants.map((variant, index) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: variant.name,
+      type: "button",
+      className: `live-example__variant-tab ${activeVariant === index ? "live-example__variant-tab--active" : ""}`,
+      onClick: () => setActiveVariant(index),
+      role: "tab",
+      "aria-selected": activeVariant === index
+    },
+    variant.name
+  ))), /* @__PURE__ */ React.createElement("div", { className: "live-example__preview" }, /* @__PURE__ */ React.createElement("div", { className: "live-example__preview-content" }, currentPreview)), /* @__PURE__ */ React.createElement("div", { className: "live-example__controls" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: `live-example__toggle ${showCode ? "live-example__toggle--active" : ""}`,
+      onClick: () => setShowCode(!showCode),
+      "aria-expanded": showCode,
+      "aria-controls": "live-example-code"
+    },
+    /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        "aria-hidden": "true"
+      },
+      /* @__PURE__ */ React.createElement("path", { d: "M10.5 4.5L14 8l-3.5 3.5M5.5 4.5L2 8l3.5 3.5" })
+    ),
+    /* @__PURE__ */ React.createElement("span", null, showCode ? "Hide code" : "Show code")
+  ), showCode && /* @__PURE__ */ React.createElement("button", { type: "button", className: "live-example__copy", onClick: handleCopy, "aria-label": "Copy code" }, copied ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ React.createElement("path", { d: "M3.5 8l3 3 6-6" })
+  ), /* @__PURE__ */ React.createElement("span", null, "Copied!")) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ React.createElement("rect", { x: "5", y: "5", width: "9", height: "9", rx: "1" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M11 5V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h2" })
+  ), /* @__PURE__ */ React.createElement("span", null, "Copy")))), showCode && /* @__PURE__ */ React.createElement("div", { id: "live-example-code", className: "live-example__code" }, /* @__PURE__ */ React.createElement("pre", { className: `language-${language}` }, /* @__PURE__ */ React.createElement("code", null, currentCode))), /* @__PURE__ */ React.createElement("style", { jsx: true }, `
+        .live-example {
+          border: 1px solid var(--ds-color-border-default, #e5e5e5);
+          border-radius: 8px;
+          overflow: hidden;
+          margin: 1.5rem 0;
+        }
+
+        .live-example__header {
+          padding: 1rem;
+          border-bottom: 1px solid var(--ds-color-border-default, #e5e5e5);
+          background: var(--ds-color-background-subtle, #f9f9f9);
+        }
+
+        .live-example__title {
+          font-size: 0.875rem;
+          font-weight: 600;
+          margin: 0;
+          color: var(--ds-color-foreground-default, #1a1a1a);
+        }
+
+        .live-example__description {
+          font-size: 0.75rem;
+          margin: 0.25rem 0 0;
+          color: var(--ds-color-foreground-muted, #666);
+        }
+
+        .live-example__variants {
+          display: flex;
+          gap: 0;
+          border-bottom: 1px solid var(--ds-color-border-default, #e5e5e5);
+          background: var(--ds-color-background-subtle, #f9f9f9);
+        }
+
+        .live-example__variant-tab {
+          padding: 0.5rem 1rem;
+          font-size: 0.75rem;
+          font-weight: 500;
+          color: var(--ds-color-foreground-muted, #666);
+          background: transparent;
+          border: none;
+          border-bottom: 2px solid transparent;
+          cursor: pointer;
+          transition: color 0.15s, border-color 0.15s;
+        }
+
+        .live-example__variant-tab:hover {
+          color: var(--ds-color-foreground-default, #1a1a1a);
+        }
+
+        .live-example__variant-tab--active {
+          color: var(--ds-brand-primary, #0066cc);
+          border-bottom-color: var(--ds-brand-primary, #0066cc);
+        }
+
+        .live-example__preview {
+          padding: 1.5rem;
+          background: var(--ds-color-background-surface, #fff);
+          min-height: 80px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .live-example__preview-content {
+          width: 100%;
+        }
+
+        .live-example__controls {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          padding: 0.5rem 1rem;
+          border-top: 1px solid var(--ds-color-border-default, #e5e5e5);
+          background: var(--ds-color-background-subtle, #f9f9f9);
+        }
+
+        .live-example__toggle,
+        .live-example__copy {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.375rem;
+          padding: 0.375rem 0.75rem;
+          font-size: 0.75rem;
+          font-weight: 500;
+          color: var(--ds-color-foreground-muted, #666);
+          background: var(--ds-color-background-surface, #fff);
+          border: 1px solid var(--ds-color-border-default, #e5e5e5);
+          border-radius: 4px;
+          cursor: pointer;
+          transition: color 0.15s, border-color 0.15s;
+        }
+
+        .live-example__toggle:hover,
+        .live-example__copy:hover {
+          color: var(--ds-color-foreground-default, #1a1a1a);
+          border-color: var(--ds-color-border-strong, #ccc);
+        }
+
+        .live-example__toggle--active {
+          color: var(--ds-brand-primary, #0066cc);
+          border-color: var(--ds-brand-primary, #0066cc);
+          background: rgba(0, 102, 204, 0.05);
+        }
+
+        .live-example__copy {
+          margin-left: auto;
+        }
+
+        .live-example__code {
+          border-top: 1px solid var(--ds-color-border-default, #e5e5e5);
+          background: var(--ds-color-background-code, #1e1e1e);
+          overflow-x: auto;
+        }
+
+        .live-example__code pre {
+          margin: 0;
+          padding: 1rem;
+          font-size: 0.8125rem;
+          line-height: 1.6;
+          font-family: "SF Mono", Menlo, Monaco, "Courier New", monospace;
+        }
+
+        .live-example__code code {
+          color: var(--ds-color-code-text, #d4d4d4);
+          white-space: pre;
+        }
+
+        /* Dark mode adjustments */
+        :global([data-theme="dark"]) .live-example__preview {
+          background: var(--ds-color-background-surface-dark, #1a1a1a);
+        }
+      `));
+}
+function CodeBlock({
+  code,
+  language = "tsx",
+  filename,
+  showLineNumbers = false,
+  highlightLines = [],
+  className = ""
+}) {
+  const [copied, setCopied] = useState2(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (error) {
+      console.error("Failed to copy:", error);
+    }
+  };
+  const lines = code.split("\n");
+  return /* @__PURE__ */ React.createElement("div", { className: `code-block ${className}` }, filename && /* @__PURE__ */ React.createElement("div", { className: "code-block__header" }, /* @__PURE__ */ React.createElement("span", { className: "code-block__filename" }, filename), /* @__PURE__ */ React.createElement("button", { type: "button", className: "code-block__copy", onClick: handleCopy, "aria-label": "Copy code" }, copied ? /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ React.createElement("path", { d: "M3.5 8l3 3 6-6" })
+  ) : /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ React.createElement("rect", { x: "5", y: "5", width: "9", height: "9", rx: "1" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M11 5V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h2" })
+  ))), /* @__PURE__ */ React.createElement("pre", { className: `language-${language}` }, /* @__PURE__ */ React.createElement("code", null, showLineNumbers ? lines.map((line, i) => /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      key: i,
+      className: `code-block__line ${highlightLines.includes(i + 1) ? "code-block__line--highlighted" : ""}`
+    },
+    /* @__PURE__ */ React.createElement("span", { className: "code-block__line-number" }, i + 1),
+    /* @__PURE__ */ React.createElement("span", { className: "code-block__line-content" }, line),
+    "\n"
+  )) : code)), /* @__PURE__ */ React.createElement("style", { jsx: true }, `
+        .code-block {
+          border-radius: 8px;
+          overflow: hidden;
+          margin: 1rem 0;
+          background: var(--ds-color-background-code, #1e1e1e);
+        }
+
+        .code-block__header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0.5rem 1rem;
+          background: rgba(255, 255, 255, 0.05);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .code-block__filename {
+          font-size: 0.75rem;
+          font-family: "SF Mono", Menlo, Monaco, "Courier New", monospace;
+          color: var(--ds-color-code-text, #d4d4d4);
+          opacity: 0.7;
+        }
+
+        .code-block__copy {
+          padding: 0.25rem;
+          background: transparent;
+          border: none;
+          color: var(--ds-color-code-text, #d4d4d4);
+          opacity: 0.5;
+          cursor: pointer;
+          transition: opacity 0.15s;
+        }
+
+        .code-block__copy:hover {
+          opacity: 1;
+        }
+
+        .code-block pre {
+          margin: 0;
+          padding: 1rem;
+          font-size: 0.8125rem;
+          line-height: 1.6;
+          font-family: "SF Mono", Menlo, Monaco, "Courier New", monospace;
+          overflow-x: auto;
+        }
+
+        .code-block code {
+          color: var(--ds-color-code-text, #d4d4d4);
+        }
+
+        .code-block__line {
+          display: flex;
+        }
+
+        .code-block__line--highlighted {
+          background: rgba(255, 255, 255, 0.1);
+          margin: 0 -1rem;
+          padding: 0 1rem;
+        }
+
+        .code-block__line-number {
+          display: inline-block;
+          width: 2.5rem;
+          flex-shrink: 0;
+          text-align: right;
+          padding-right: 1rem;
+          color: var(--ds-color-code-text, #d4d4d4);
+          opacity: 0.3;
+          user-select: none;
+        }
+
+        .code-block__line-content {
+          flex: 1;
+          white-space: pre;
+        }
+      `));
+}
+
+// src/index.ts
+var COMPONENTS_PATH = "./components";
+var STYLES_PATH = "./styles";
+export {
+  COMPONENTS_PATH,
+  CodeBlock,
+  LiveExample,
+  STYLES_PATH,
+  SearchInput
+};