@work-rjkashyap/unified-ui 0.3.3 → 0.3.5

package/dist/components/code-highlight.mjs

@@ -0,0 +1,308 @@
+"use client";
+const TOKEN_COLORS = {
+  keyword: "var(--code-keyword)",
+  string: "var(--code-string)",
+  comment: "var(--code-comment)",
+  number: "var(--code-number)",
+  operator: "var(--code-operator)",
+  punctuation: "var(--code-punctuation)",
+  function: "var(--code-function)",
+  type: "var(--code-type)",
+  tag: "var(--code-tag)",
+  "attr-name": "var(--code-attr-name)",
+  "attr-value": "var(--code-string)",
+  // reuse string color
+  plain: "var(--code-foreground)",
+  component: "var(--code-component)"
+};
+const JS_KEYWORDS = /* @__PURE__ */ new Set([
+  "import",
+  "export",
+  "from",
+  "default",
+  "const",
+  "let",
+  "var",
+  "function",
+  "return",
+  "if",
+  "else",
+  "for",
+  "while",
+  "do",
+  "switch",
+  "case",
+  "break",
+  "continue",
+  "new",
+  "this",
+  "class",
+  "extends",
+  "super",
+  "typeof",
+  "instanceof",
+  "in",
+  "of",
+  "try",
+  "catch",
+  "finally",
+  "throw",
+  "async",
+  "await",
+  "yield",
+  "null",
+  "undefined",
+  "true",
+  "false",
+  "void",
+  "delete",
+  "as",
+  "type",
+  "interface",
+  "enum",
+  "implements",
+  "declare",
+  "readonly"
+]);
+const SHELL_KEYWORDS = /* @__PURE__ */ new Set([
+  "npm",
+  "npx",
+  "yarn",
+  "pnpm",
+  "bun",
+  "install",
+  "add",
+  "run",
+  "dev",
+  "build",
+  "start",
+  "test",
+  "init",
+  "create",
+  "exec",
+  "sudo",
+  "cd",
+  "ls",
+  "mkdir",
+  "rm",
+  "cp",
+  "mv",
+  "cat",
+  "echo",
+  "git",
+  "docker",
+  "curl",
+  "wget"
+]);
+function isShellLang(lang) {
+  if (!lang) return false;
+  const l = lang.toLowerCase();
+  return l === "sh" || l === "bash" || l === "zsh" || l === "shell" || l === "terminal";
+}
+function isJsxLang(lang) {
+  if (!lang) return true;
+  const l = lang.toLowerCase();
+  return l === "tsx" || l === "jsx" || l === "ts" || l === "typescript" || l === "js" || l === "javascript" || l === "react";
+}
+const RE_SINGLE_LINE_COMMENT = /^(\/\/.*)/;
+const RE_BLOCK_COMMENT = /^(\/\*[\s\S]*?\*\/)/;
+const RE_TEMPLATE_LITERAL = /^(`(?:[^`\\]|\\.)*`)/;
+const RE_DOUBLE_STRING = /^("(?:[^"\\]|\\.)*")/;
+const RE_SINGLE_STRING = /^('(?:[^'\\]|\\.)*')/;
+const RE_JSX_COMPONENT_WITH_SPACE = /^(<\/?)(\$?[A-Z][$\w.]*)(\s)/;
+const RE_JSX_COMPONENT_CLOSED = /^(<\/?)(\$?[A-Z][$\w.]*)(\/?>)/;
+const RE_HTML_TAG = /^(<\/?)([\w-]+)(\/?>|\s)/;
+const RE_ATTR_NAME = /^([\w-]+)(=)/;
+const RE_NUMBER = /^(\b\d+\.?\d*\b)/;
+const RE_WORD = /^(\b[\w$]+\b)/;
+const RE_OPERATOR = /^([=!<>+\-*/%&|^~?:]+)/;
+const RE_PUNCTUATION = /^([{}()[\];,.<>/])/;
+const RE_WHITESPACE = /^(\s+)/;
+const RE_FOLLOWED_BY_PAREN = /^\s*\(/;
+function tokenizeJsx(line) {
+  const tokens = [];
+  let remaining = line;
+  while (remaining.length > 0) {
+    const matched = false;
+    let m = remaining.match(RE_SINGLE_LINE_COMMENT);
+    if (m) {
+      tokens.push({ type: "comment", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_BLOCK_COMMENT);
+    if (m) {
+      tokens.push({ type: "comment", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_TEMPLATE_LITERAL);
+    if (m) {
+      tokens.push({ type: "string", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_DOUBLE_STRING);
+    if (m) {
+      tokens.push({ type: "string", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_SINGLE_STRING);
+    if (m) {
+      tokens.push({ type: "string", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_JSX_COMPONENT_WITH_SPACE);
+    if (m) {
+      tokens.push({ type: "punctuation", value: m[1] });
+      tokens.push({ type: "component", value: m[2] });
+      tokens.push({ type: "plain", value: m[3] });
+      remaining = remaining.slice(m[0].length);
+      continue;
+    }
+    m = remaining.match(RE_JSX_COMPONENT_CLOSED);
+    if (m) {
+      tokens.push({ type: "punctuation", value: m[1] });
+      tokens.push({ type: "component", value: m[2] });
+      tokens.push({ type: "punctuation", value: m[3] });
+      remaining = remaining.slice(m[0].length);
+      continue;
+    }
+    m = remaining.match(RE_HTML_TAG);
+    if (m) {
+      tokens.push({ type: "punctuation", value: m[1] });
+      tokens.push({ type: "tag", value: m[2] });
+      tokens.push({
+        type: m[3].trim() ? "punctuation" : "plain",
+        value: m[3]
+      });
+      remaining = remaining.slice(m[0].length);
+      continue;
+    }
+    m = remaining.match(RE_ATTR_NAME);
+    if (m) {
+      tokens.push({ type: "attr-name", value: m[1] });
+      tokens.push({ type: "operator", value: m[2] });
+      remaining = remaining.slice(m[0].length);
+      continue;
+    }
+    m = remaining.match(RE_NUMBER);
+    if (m) {
+      tokens.push({ type: "number", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_WORD);
+    if (m) {
+      const word = m[1];
+      if (JS_KEYWORDS.has(word)) {
+        tokens.push({ type: "keyword", value: word });
+      } else if (/^[A-Z]/.test(word)) {
+        tokens.push({ type: "type", value: word });
+      } else if (RE_FOLLOWED_BY_PAREN.test(remaining.slice(word.length))) {
+        tokens.push({ type: "function", value: word });
+      } else {
+        tokens.push({ type: "plain", value: word });
+      }
+      remaining = remaining.slice(word.length);
+      continue;
+    }
+    m = remaining.match(RE_OPERATOR);
+    if (m) {
+      tokens.push({ type: "operator", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_PUNCTUATION);
+    if (m) {
+      tokens.push({ type: "punctuation", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_WHITESPACE);
+    if (m) {
+      tokens.push({ type: "plain", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    if (!matched) {
+      tokens.push({ type: "plain", value: remaining[0] });
+      remaining = remaining.slice(1);
+    }
+  }
+  return tokens;
+}
+const RE_SHELL_COMMENT = /^(#.*)/;
+const RE_SHELL_FLAG = /^(--?[\w-]+)/;
+const RE_SHELL_WORD = /^([@\w./-]+)/;
+const RE_SHELL_OPERATOR = /^([|&;><]+)/;
+function tokenizeShell(line) {
+  const tokens = [];
+  let remaining = line;
+  while (remaining.length > 0) {
+    let m;
+    m = remaining.match(RE_SHELL_COMMENT);
+    if (m) {
+      tokens.push({ type: "comment", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_DOUBLE_STRING);
+    if (m) {
+      tokens.push({ type: "string", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_SINGLE_STRING);
+    if (m) {
+      tokens.push({ type: "string", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_SHELL_FLAG);
+    if (m) {
+      tokens.push({ type: "attr-name", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_SHELL_WORD);
+    if (m) {
+      const word = m[1];
+      if (SHELL_KEYWORDS.has(word)) {
+        tokens.push({ type: "keyword", value: word });
+      } else {
+        tokens.push({ type: "plain", value: word });
+      }
+      remaining = remaining.slice(word.length);
+      continue;
+    }
+    m = remaining.match(RE_SHELL_OPERATOR);
+    if (m) {
+      tokens.push({ type: "operator", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    m = remaining.match(RE_WHITESPACE);
+    if (m) {
+      tokens.push({ type: "plain", value: m[1] });
+      remaining = remaining.slice(m[1].length);
+      continue;
+    }
+    tokens.push({ type: "plain", value: remaining[0] });
+    remaining = remaining.slice(1);
+  }
+  return tokens;
+}
+function tokenizeLine(line, language) {
+  if (isShellLang(language)) return tokenizeShell(line);
+  if (isJsxLang(language)) return tokenizeJsx(line);
+  return tokenizeJsx(line);
+}
+export {
+  TOKEN_COLORS,
+  isJsxLang,
+  isShellLang,
+  tokenizeLine
+};

package/dist/components/code.cjs

@@ -0,0 +1,265 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var code_exports = {};
+__export(code_exports, {
+  CodeBlock: () => CodeBlock,
+  InlineCode: () => InlineCode,
+  codeBlockVariants: () => codeBlockVariants,
+  inlineCodeVariants: () => inlineCodeVariants
+});
+module.exports = __toCommonJS(code_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_motion = require("../motion/index");
+var import_cn = require("../utils/cn");
+var import_focus_ring = require("../utils/focus-ring");
+var import_class_variance_authority = require("class-variance-authority");
+var import_framer_motion = require("framer-motion");
+var import_react = require("react");
+var import_code_highlight = require("./code-highlight");
+const inlineCodeVariants = (0, import_class_variance_authority.cva)([
+  "inline font-mono font-medium rounded",
+  "px-[0.3em] py-[0.15em]",
+  "bg-muted text-muted-foreground",
+  "border border-border/50",
+  "text-[0.875em] leading-none"
+]);
+const codeBlockVariants = (0, import_class_variance_authority.cva)(
+  [
+    "relative rounded-lg overflow-hidden",
+    "border border-code-border",
+    "bg-code-bg text-code-foreground",
+    "font-mono text-sm leading-relaxed"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "",
+        dark: ""
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+function CopyIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+      ]
+    }
+  );
+}
+function CheckIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+function HighlightedLine({
+  line,
+  language
+}) {
+  const tokens = (0, import_react.useMemo)(() => (0, import_code_highlight.tokenizeLine)(line, language), [line, language]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: tokens.map((token, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      style: token.type !== "plain" ? { color: import_code_highlight.TOKEN_COLORS[token.type] } : void 0,
+      children: token.value
+    },
+    i
+  )) });
+}
+const InlineCode = (0, import_react.forwardRef)(
+  function InlineCode2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "code",
+      {
+        ref,
+        className: (0, import_cn.cn)(inlineCodeVariants(), className),
+        "data-ds": "",
+        "data-ds-component": "inline-code",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+InlineCode.displayName = "InlineCode";
+const CodeBlock = (0, import_react.forwardRef)(
+  function CodeBlock2({
+    variant = "default",
+    language,
+    showLineNumbers = false,
+    showCopyButton = true,
+    filename,
+    className,
+    children,
+    ...rest
+  }, ref) {
+    const shouldReduce = (0, import_framer_motion.useReducedMotion)();
+    const [copied, setCopied] = (0, import_react.useState)(false);
+    const handleCopy = (0, import_react.useCallback)(() => {
+      const text = (typeof children === "string" ? children.replace(/^\n+|\n+$/g, "") : ref && "current" in ref && ref.current ? ref.current.textContent ?? "" : "").trim();
+      navigator.clipboard.writeText(text).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2e3);
+      });
+    }, [children, ref]);
+    const code = typeof children === "string" ? children.replace(/^\n+|\n+$/g, "") : "";
+    const lines = code.split("\n");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_cn.cn)(codeBlockVariants({ variant }), className),
+        "data-ds": "",
+        "data-ds-component": "code-block",
+        "data-ds-variant": variant,
+        children: [
+          (filename || language || showCopyButton) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              className: (0, import_cn.cn)(
+                "flex items-center justify-between px-4 py-2 border-b",
+                "border-code-header-border bg-code-header-bg"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3 min-w-0", children: [
+                  filename && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs font-medium text-code-header-foreground truncate", children: filename }),
+                  language && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "span",
+                    {
+                      className: (0, import_cn.cn)(
+                        "text-[10px] px-2 py-0.5 rounded font-mono font-medium leading-none",
+                        "bg-code-badge-bg text-code-badge-foreground",
+                        "border border-code-badge-border"
+                      ),
+                      children: language
+                    }
+                  )
+                ] }),
+                showCopyButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleCopy,
+                    className: (0, import_cn.cn)(
+                      "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs shrink-0",
+                      "text-code-copy-foreground hover:text-code-copy-hover-foreground",
+                      "hover:bg-code-copy-hover-bg",
+                      "transition-colors duration-150",
+                      import_focus_ring.focusRingClasses
+                    ),
+                    "aria-label": copied ? "Copied!" : "Copy code",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { mode: "wait", initial: false, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      import_framer_motion.motion.span,
+                      {
+                        className: "flex items-center gap-1",
+                        variants: shouldReduce ? void 0 : import_motion.fadeInFast.variants,
+                        initial: shouldReduce ? void 0 : "initial",
+                        animate: shouldReduce ? void 0 : "animate",
+                        exit: shouldReduce ? void 0 : "exit",
+                        transition: shouldReduce ? void 0 : import_motion.fadeInFast.transition,
+                        "data-ds-animated": "",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, { className: "size-3.5 text-code-success" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-code-success", children: "Copied!" })
+                        ]
+                      },
+                      "check"
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      import_framer_motion.motion.span,
+                      {
+                        className: "flex items-center gap-1",
+                        variants: shouldReduce ? void 0 : import_motion.fadeInFast.variants,
+                        initial: shouldReduce ? void 0 : "initial",
+                        animate: shouldReduce ? void 0 : "animate",
+                        exit: shouldReduce ? void 0 : "exit",
+                        transition: shouldReduce ? void 0 : import_motion.fadeInFast.transition,
+                        "data-ds-animated": "",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyIcon, { className: "size-3.5" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Copy" })
+                        ]
+                      },
+                      "copy"
+                    ) })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "pre",
+            {
+              ref,
+              className: (0, import_cn.cn)(
+                "overflow-x-auto p-4 m-0",
+                "text-[13px] leading-[1.7]",
+                "bg-transparent border-0 shadow-none rounded-none"
+              ),
+              ...rest,
+              children: code ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "bg-transparent border-0 p-0 rounded-none shadow-none text-inherit", children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "block", children: [
+                showLineNumbers && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    className: "inline-block w-8 text-right mr-4 text-code-line-number select-none text-xs",
+                    "aria-hidden": "true",
+                    children: i + 1
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HighlightedLine, { line, language })
+              ] }, i)) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "bg-transparent border-0 p-0 rounded-none shadow-none text-inherit", children })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CodeBlock,
+  InlineCode,
+  codeBlockVariants,
+  inlineCodeVariants
+});

package/dist/components/code.d.cts

@@ -0,0 +1,40 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const inlineCodeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const codeBlockVariants: (props?: ({
+    variant?: "default" | "dark" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CodeVariant = "default" | "dark";
+interface InlineCodeProps extends React.HTMLAttributes<HTMLElement> {
+    className?: string;
+    children?: ReactNode;
+}
+interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
+    variant?: CodeVariant;
+    language?: string;
+    showLineNumbers?: boolean;
+    showCopyButton?: boolean;
+    filename?: string;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * InlineCode — renders code in a monospaced, styled span.
+ * @example <InlineCode>npm install</InlineCode>
+ */
+declare const InlineCode: react.ForwardRefExoticComponent<InlineCodeProps & react.RefAttributes<HTMLElement>>;
+/**
+ * CodeBlock — a styled code block with optional copy button, line numbers,
+ * and filename. Uses a dark editor background with built-in syntax
+ * highlighting for JS/TS/JSX/TSX, shell, and more.
+ *
+ * @example
+ * <CodeBlock language="tsx" showCopyButton filename="Button.tsx">
+ *   {`export function Button() { ... }`}
+ * </CodeBlock>
+ */
+declare const CodeBlock: react.ForwardRefExoticComponent<CodeBlockProps & react.RefAttributes<HTMLPreElement>>;
+
+export { CodeBlock, type CodeBlockProps, type CodeVariant, InlineCode, type InlineCodeProps, codeBlockVariants, inlineCodeVariants };

package/dist/components/code.d.ts

@@ -0,0 +1,40 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const inlineCodeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const codeBlockVariants: (props?: ({
+    variant?: "default" | "dark" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CodeVariant = "default" | "dark";
+interface InlineCodeProps extends React.HTMLAttributes<HTMLElement> {
+    className?: string;
+    children?: ReactNode;
+}
+interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
+    variant?: CodeVariant;
+    language?: string;
+    showLineNumbers?: boolean;
+    showCopyButton?: boolean;
+    filename?: string;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * InlineCode — renders code in a monospaced, styled span.
+ * @example <InlineCode>npm install</InlineCode>
+ */
+declare const InlineCode: react.ForwardRefExoticComponent<InlineCodeProps & react.RefAttributes<HTMLElement>>;
+/**
+ * CodeBlock — a styled code block with optional copy button, line numbers,
+ * and filename. Uses a dark editor background with built-in syntax
+ * highlighting for JS/TS/JSX/TSX, shell, and more.
+ *
+ * @example
+ * <CodeBlock language="tsx" showCopyButton filename="Button.tsx">
+ *   {`export function Button() { ... }`}
+ * </CodeBlock>
+ */
+declare const CodeBlock: react.ForwardRefExoticComponent<CodeBlockProps & react.RefAttributes<HTMLPreElement>>;
+
+export { CodeBlock, type CodeBlockProps, type CodeVariant, InlineCode, type InlineCodeProps, codeBlockVariants, inlineCodeVariants };