@cloudflare/kumo 1.16.0 → 1.18.0

package/dist/chunks/{clipboard-text-ohx8kkpxisz382rj.js → clipboard-text-vcbvmtne4zjk4b18.js}

@@ -1,12 +1,12 @@
 "use client";
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { CheckIcon as N, CopyIcon as R } from "@phosphor-icons/react";
-import { forwardRef as A, useState as S, useRef as P, useCallback as _ } from "react";
-import { B as I } from "./button-j0hi0afn33w9lxgi.js";
-import { i as O } from "./input-c8jmidy7gdqfiky1.js";
-import { c as i } from "./cn-ct4n7r74mh8y0f48.js";
-import { U as M, V, W as j, X as B, Y as U, Z as D, _ as E, $ as L, a0 as X, a1 as K, a2 as W, a3 as F, a4 as Y } from "./vendor-base-ui-ccr5l0ynrievzzv3.js";
-const h = M(), y = {
+import { CheckIcon as R, CopyIcon as A } from "@phosphor-icons/react";
+import { forwardRef as S, useState as P, useRef as _, useCallback as I } from "react";
+import { B as O } from "./button-cdxnqcgzwko8ooha.js";
+import { i as M } from "./input-h48k3uagzrgb98au.js";
+import { c as s } from "./cn-ct4n7r74mh8y0f48.js";
+import { U as V, V as j, W as B, X as U, Y as D, Z as E, _ as L, $ as X, a0 as K, a1 as W, a2 as F, a3 as Y, a4 as Z } from "./vendor-base-ui-k7bzesq81ie36nya.js";
+const h = V(), y = {
   size: {
     sm: {
       classes: "text-xs",
@@ -24,7 +24,7 @@ const h = M(), y = {
       description: "Large clipboard text for prominent display"
     }
   }
-}, C = {
+}, v = {
   size: "lg"
 }, l = {
   slide: {
@@ -33,56 +33,57 @@ const h = M(), y = {
     end: "pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 -translate-y-full"
   }
 };
-function Z({
-  size: t = C.size
+function $({
+  size: t = v.size
 } = {}) {
-  return i(
+  return s(
     // Base styles
     "flex items-center overflow-hidden bg-kumo-base px-0 font-mono",
     // Apply size styles from KUMO_CLIPBOARD_TEXT_VARIANTS
     y.size[t].classes
   );
 }
-function $() {
-  const { toasts: t } = X();
-  return /* @__PURE__ */ e(K, { className: "pointer-events-none fixed inset-0 isolate", children: t.map((s) => /* @__PURE__ */ e(W, { toast: s, className: "absolute", children: /* @__PURE__ */ e(
-    F,
+function q() {
+  const { toasts: t } = K();
+  return /* @__PURE__ */ e(W, { className: "pointer-events-none fixed inset-0 isolate", children: t.map((i) => /* @__PURE__ */ e(F, { toast: i, className: "absolute", children: /* @__PURE__ */ e(
+    Y,
     {
-      toast: s,
-      className: i(
+      toast: i,
+      className: s(
         "flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default font-sans",
         "shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill"
       ),
-      children: /* @__PURE__ */ e(Y, {})
+      children: /* @__PURE__ */ e(Z, {})
     }
-  ) }, s.id)) });
+  ) }, i.id)) });
 }
-function q({ children: t }) {
-  return /* @__PURE__ */ e(E, { children: /* @__PURE__ */ c(L, { toastManager: h, children: [
-    /* @__PURE__ */ e($, {}),
+function G({ children: t }) {
+  return /* @__PURE__ */ e(L, { children: /* @__PURE__ */ c(X, { toastManager: h, children: [
+    /* @__PURE__ */ e(q, {}),
     t
   ] }) });
 }
-const G = A(
+const H = S(
   ({
     text: t,
-    className: s,
-    size: m = C.size,
+    textToCopy: i,
+    className: C,
+    size: m = v.size,
     onCopy: f,
     tooltip: n,
-    labels: { copyAction: v = "Copy to clipboard" } = {}
-  }, w) => {
-    const [r, d] = S(!1), b = P(null), x = y.size[m], {
-      text: z = "Copy",
+    labels: { copyAction: w = "Copy to clipboard" } = {}
+  }, z) => {
+    const [r, d] = P(!1), b = _(null), x = y.size[m], {
+      text: k = "Copy",
       copiedText: p = "Copied",
       side: u = "top"
-    } = n ?? {}, k = _(async () => {
+    } = n ?? {}, N = I(async () => {
       try {
         if (typeof navigator < "u" && navigator.clipboard && typeof navigator.clipboard.writeText == "function")
-          await navigator.clipboard.writeText(t);
+          await navigator.clipboard.writeText(i ?? t);
         else if (typeof document < "u") {
           const o = document.createElement("textarea");
-          o.value = t, o.setAttribute("readonly", ""), o.style.position = "absolute", o.style.left = "-9999px", document.body.appendChild(o);
+          o.value = i ?? t, o.setAttribute("readonly", ""), o.style.position = "absolute", o.style.left = "-9999px", document.body.appendChild(o);
           const a = document.getSelection(), T = a?.rangeCount ? a.getRangeAt(0) : null;
           o.select();
           try {
@@ -107,33 +108,33 @@ const G = A(
         console.warn("Clipboard copy failed", o);
       }
     }, [t, f, n, p, u]), g = /* @__PURE__ */ c(
-      I,
+      O,
       {
         ref: b,
         size: x.buttonSize,
         variant: "ghost",
         className: "rounded-none border-l! border-kumo-line! px-3 relative overflow-hidden transition-all duration-200",
-        onClick: k,
-        "aria-label": v,
+        onClick: N,
+        "aria-label": w,
         children: [
           /* @__PURE__ */ e(
             "span",
             {
-              className: i(
+              className: s(
                 "flex items-center gap-1 transition-all duration-200",
                 r ? l.slide.animate : l.slide.initial
               ),
-              children: /* @__PURE__ */ e(N, {})
+              children: /* @__PURE__ */ e(R, {})
             }
           ),
           /* @__PURE__ */ e(
             "span",
             {
-              className: i(
+              className: s(
                 "flex items-center justify-center transition-all duration-200",
                 r ? l.slide.end : l.slide.animate
               ),
-              children: /* @__PURE__ */ e(R, {})
+              children: /* @__PURE__ */ e(A, {})
             }
           )
         ]
@@ -142,31 +143,31 @@ const G = A(
     return /* @__PURE__ */ c(
       "div",
       {
-        ref: w,
-        className: i(
-          O({ size: x.buttonSize }),
-          Z({ size: m }),
-          s
+        ref: z,
+        className: s(
+          M({ size: x.buttonSize }),
+          $({ size: m }),
+          C
         ),
         children: [
           /* @__PURE__ */ e("span", { className: "grow truncate ps-4 pe-2", children: t }),
-          n ? /* @__PURE__ */ e(q, { children: /* @__PURE__ */ c(
-            V,
+          n ? /* @__PURE__ */ e(G, { children: /* @__PURE__ */ c(
+            j,
             {
               disabled: r,
               onOpenChange: (o, a) => {
                 a.reason === "trigger-press" && a.cancel();
               },
               children: [
-                /* @__PURE__ */ e(j, { render: g }),
-                /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(U, { side: u, sideOffset: 8, children: /* @__PURE__ */ e(
-                  D,
+                /* @__PURE__ */ e(B, { render: g }),
+                /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(D, { side: u, sideOffset: 8, children: /* @__PURE__ */ e(
+                  E,
                   {
-                    className: i(
+                    className: s(
                       "flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default",
                       "shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill"
                     ),
-                    children: z
+                    children: k
                   }
                 ) }) })
               ]
@@ -178,8 +179,8 @@ const G = A(
     );
   }
 );
-G.displayName = "ClipboardText";
+H.displayName = "ClipboardText";
 export {
-  G as C
+  H as C
 };
-//# sourceMappingURL=clipboard-text-ohx8kkpxisz382rj.js.map
+//# sourceMappingURL=clipboard-text-vcbvmtne4zjk4b18.js.map

package/dist/chunks/clipboard-text-vcbvmtne4zjk4b18.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-text-vcbvmtne4zjk4b18.js","sources":["../../src/components/clipboard-text/clipboard-text.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { forwardRef, useCallback, useRef, useState } from \"react\";\nimport { Toast } from \"@base-ui/react/toast\";\nimport { Tooltip } from \"@base-ui/react/tooltip\";\nimport { Button } from \"../button\";\nimport { inputVariants } from \"../input\";\nimport { cn } from \"../../utils/cn\";\n\n// Create a toast manager for anchored \"Copied\" toasts\nconst clipboardToastManager = Toast.createToastManager();\n\n/** ClipboardText size variant definitions mapping sizes to their Tailwind classes. */\nexport const KUMO_CLIPBOARD_TEXT_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"text-xs\",\n      buttonSize: \"sm\" as const,\n      description: \"Small clipboard text for compact UIs\",\n    },\n    base: {\n      classes: \"text-sm\",\n      buttonSize: \"base\" as const,\n      description: \"Default clipboard text size\",\n    },\n    lg: {\n      classes: \"text-sm\",\n      buttonSize: \"lg\" as const,\n      description: \"Large clipboard text for prominent display\",\n    },\n  },\n} as const;\n\nexport const KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS = {\n  size: \"lg\",\n} as const;\n\nconst clipboardTextAnimations = {\n  slide: {\n    initial:\n      \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 translate-y-full\",\n    animate: \"translate-y-0 opacity-100\",\n    end: \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 -translate-y-full\",\n  },\n} as const;\n\n// Derived types from KUMO_CLIPBOARD_TEXT_VARIANTS\nexport type KumoClipboardTextSize =\n  keyof typeof KUMO_CLIPBOARD_TEXT_VARIANTS.size;\n\nexport interface KumoClipboardTextVariantsProps {\n  /**\n   * Size of the clipboard text field.\n   * - `\"sm\"` — Small clipboard text for compact UIs\n   * - `\"base\"` — Default clipboard text size\n   * - `\"lg\"` — Large clipboard text for prominent display\n   * @default \"lg\"\n   */\n  size?: KumoClipboardTextSize;\n}\n\nexport function clipboardTextVariants({\n  size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n}: KumoClipboardTextVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex items-center overflow-hidden bg-kumo-base px-0 font-mono\",\n    // Apply size styles from KUMO_CLIPBOARD_TEXT_VARIANTS\n    KUMO_CLIPBOARD_TEXT_VARIANTS.size[size].classes,\n  );\n}\n\n// Legacy type alias for backwards compatibility\nexport type ClipboardTextSize = KumoClipboardTextSize;\n\n/**\n * ClipboardText component props.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"sk_live_abc123\" />\n * <ClipboardText text=\"npm install @cloudflare/kumo\" size=\"sm\" />\n * ```\n */\nexport interface ClipboardTextProps extends KumoClipboardTextVariantsProps {\n  /** The text to display and copy to clipboard. */\n  text: string;\n  /** If provided, this text will be copied to clipboard instead of the `text` prop. */\n  textToCopy?: string;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Callback fired after text is copied to clipboard. */\n  onCopy?: () => void;\n  /**\n   * Tooltip config. Shows tooltip on hover, anchored toast on click.\n   * @example\n   * ```tsx\n   * <ClipboardText\n   *   text=\"abc123\"\n   *   tooltip={{ text: \"Copy\", copiedText: \"Copied!\", side: \"top\" }}\n   * />\n   * ```\n   */\n  tooltip?: {\n    /** Text shown in tooltip on hover. @default \"Copy\" */\n    text?: string;\n    /** Text shown in toast after copying. @default \"Copied\" */\n    copiedText?: string;\n    /** Tooltip/toast placement. @default \"top\" */\n    side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  };\n  /** Accessible labels for i18n. */\n  labels?: {\n    /** @default \"Copy to clipboard\" */\n    copyAction?: string;\n  };\n}\n\n/**\n * Anchored toasts viewport - renders \"Copied\" toasts anchored to buttons\n */\nfunction AnchoredToasts() {\n  const { toasts } = Toast.useToastManager();\n  return (\n    <Toast.Viewport className=\"pointer-events-none fixed inset-0 isolate\">\n      {toasts.map((toast) => (\n        <Toast.Positioner key={toast.id} toast={toast} className=\"absolute\">\n          <Toast.Root\n            toast={toast}\n            className={cn(\n              \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default font-sans\",\n              \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n            )}\n          >\n            <Toast.Description />\n          </Toast.Root>\n        </Toast.Positioner>\n      ))}\n    </Toast.Viewport>\n  );\n}\n\n/**\n * Internal wrapper that provides Toast context when tooltip is enabled.\n */\nfunction TooltipWrapper({ children }: { children: React.ReactNode }) {\n  return (\n    <Tooltip.Provider>\n      <Toast.Provider toastManager={clipboardToastManager}>\n        <AnchoredToasts />\n        {children}\n      </Toast.Provider>\n    </Tooltip.Provider>\n  );\n}\n\n/**\n * Read-only text field with a one-click copy-to-clipboard button.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"0c239dd2\" />\n * ```\n */\nexport const ClipboardText = forwardRef<HTMLDivElement, ClipboardTextProps>(\n  (\n    {\n      text,\n      textToCopy,\n      className,\n      size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n      onCopy,\n      tooltip,\n      labels: { copyAction = \"Copy to clipboard\" } = {},\n    },\n    ref,\n  ) => {\n    const [copied, setCopied] = useState(false);\n    const buttonRef = useRef<HTMLButtonElement | null>(null);\n    const sizeConfig = KUMO_CLIPBOARD_TEXT_VARIANTS.size[size];\n\n    // Destructure tooltip config with defaults\n    const {\n      text: tooltipText = \"Copy\",\n      copiedText = \"Copied\",\n      side: tooltipSide = \"top\",\n    } = tooltip ?? {};\n\n    const copyToClipboard = useCallback(async () => {\n      try {\n        if (\n          typeof navigator !== \"undefined\" &&\n          navigator.clipboard &&\n          typeof navigator.clipboard.writeText === \"function\"\n        ) {\n          await navigator.clipboard.writeText(textToCopy ?? text);\n        } else if (typeof document !== \"undefined\") {\n          // Fallback for older browsers\n          const textarea = document.createElement(\"textarea\");\n          textarea.value = textToCopy ?? text;\n          textarea.setAttribute(\"readonly\", \"\");\n          textarea.style.position = \"absolute\";\n          textarea.style.left = \"-9999px\";\n          document.body.appendChild(textarea);\n          const selection = document.getSelection();\n          const previousRange = selection?.rangeCount\n            ? selection.getRangeAt(0)\n            : null;\n          textarea.select();\n          try {\n            document.execCommand(\"copy\");\n          } finally {\n            document.body.removeChild(textarea);\n            if (previousRange) {\n              selection?.removeAllRanges();\n              selection?.addRange(previousRange);\n            }\n          }\n        }\n\n        setCopied(true);\n\n        // Show anchored toast if tooltip mode is enabled\n        if (tooltip) {\n          clipboardToastManager.add({\n            description: copiedText,\n            positionerProps: {\n              anchor: buttonRef.current,\n              side: tooltipSide,\n              sideOffset: 8,\n            },\n            timeout: 1500,\n            onClose() {\n              setCopied(false);\n            },\n          });\n        } else {\n          // Reset copied state after delay when no tooltip\n          setTimeout(() => setCopied(false), 1500);\n        }\n\n        onCopy?.();\n      } catch (error) {\n        console.warn(\"Clipboard copy failed\", error);\n      }\n    }, [text, onCopy, tooltip, copiedText, tooltipSide]);\n\n    const copyButton = (\n      <Button\n        ref={buttonRef}\n        size={sizeConfig.buttonSize}\n        variant=\"ghost\"\n        className=\"rounded-none border-l! border-kumo-line! px-3 relative overflow-hidden transition-all duration-200\"\n        onClick={copyToClipboard}\n        aria-label={copyAction}\n      >\n        <span\n          className={cn(\n            \"flex items-center gap-1 transition-all duration-200\",\n            copied\n              ? clipboardTextAnimations.slide.animate\n              : clipboardTextAnimations.slide.initial,\n          )}\n        >\n          <CheckIcon />\n        </span>\n        <span\n          className={cn(\n            \"flex items-center justify-center transition-all duration-200\",\n            copied\n              ? clipboardTextAnimations.slide.end\n              : clipboardTextAnimations.slide.animate,\n          )}\n        >\n          <CopyIcon />\n        </span>\n      </Button>\n    );\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          inputVariants({ size: sizeConfig.buttonSize }),\n          clipboardTextVariants({ size }),\n          className,\n        )}\n      >\n        <span className=\"grow truncate ps-4 pe-2\">{text}</span>\n        {tooltip ? (\n          <TooltipWrapper>\n            <Tooltip.Root\n              disabled={copied}\n              onOpenChange={(open, eventDetails) => {\n                // Prevent tooltip from closing when button is clicked\n                if (eventDetails.reason === \"trigger-press\") {\n                  eventDetails.cancel();\n                }\n              }}\n            >\n              <Tooltip.Trigger render={copyButton} />\n              <Tooltip.Portal>\n                <Tooltip.Positioner side={tooltipSide} sideOffset={8}>\n                  <Tooltip.Popup\n                    className={cn(\n                      \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default\",\n                      \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n                    )}\n                  >\n                    {tooltipText}\n                  </Tooltip.Popup>\n                </Tooltip.Positioner>\n              </Tooltip.Portal>\n            </Tooltip.Root>\n          </TooltipWrapper>\n        ) : (\n          copyButton\n        )}\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {copied ? copiedText : \"\"}\n        </span>\n      </div>\n    );\n  },\n);\n\nClipboardText.displayName = \"ClipboardText\";\n"],"names":["clipboardToastManager","Toast.createToastManager","KUMO_CLIPBOARD_TEXT_VARIANTS","KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS","clipboardTextAnimations","clipboardTextVariants","size","cn","AnchoredToasts","toasts","Toast.useToastManager","Toast.Viewport","toast","Toast.Positioner","jsx","Toast.Root","Toast.Description","TooltipWrapper","children","Tooltip.Provider","Toast.Provider","ClipboardText","forwardRef","text","textToCopy","className","onCopy","tooltip","copyAction","ref","copied","setCopied","useState","buttonRef","useRef","sizeConfig","tooltipText","copiedText","tooltipSide","copyToClipboard","useCallback","textarea","selection","previousRange","error","copyButton","jsxs","Button","CheckIcon","CopyIcon","inputVariants","Tooltip.Root","open","eventDetails","Tooltip.Trigger","Tooltip.Portal","Tooltip.Positioner","Tooltip.Popup"],"mappings":"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"}

package/dist/chunks/{code-liq1g6f5lhee305d.js → code-cz0w1y5z4h29a9eg.js}

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as o } from "react/jsx-runtime";
-import { c } from "./cn-ct4n7r74mh8y0f48.js";
-const i = {
+import { c as r } from "./cn-ct4n7r74mh8y0f48.js";
+const a = {
   lang: {
     ts: {
       classes: "",
@@ -24,37 +24,37 @@ const i = {
       description: "CSS styles"
     }
   }
-}, a = {
+}, n = {
   lang: "ts"
 };
-function l({
-  lang: s = a.lang
+function i({
+  lang: s = n.lang
 } = {}) {
-  return c(
+  return r(
     // Base styles
     "m-0 w-auto rounded-none border-none bg-transparent p-0 font-mono text-sm leading-[20px] text-kumo-strong",
-    // Apply lang-specific styles (currently none, but extensible)
-    i.lang[s].classes
+    // Apply lang-specific styles (fallback to default if lang not in map)
+    a.lang[s]?.classes ?? a.lang[n.lang].classes
   );
 }
-function n({
+function c({
   code: s,
-  lang: e = a.lang,
-  className: r,
+  lang: e = n.lang,
+  className: l,
   style: d
 }) {
-  return /* @__PURE__ */ o("pre", { className: c(l({ lang: e }), r), style: d, children: s });
+  return /* @__PURE__ */ o("pre", { className: r(i({ lang: e }), l), style: d, children: s });
 }
-n.displayName = "Code";
+c.displayName = "Code";
 function t({ code: s, lang: e }) {
-  return /* @__PURE__ */ o("div", { className: "min-w-0 rounded-md border border-kumo-fill bg-kumo-base [&>pre]:p-2.5!", children: /* @__PURE__ */ o(n, { lang: e, code: s }) });
+  return /* @__PURE__ */ o("div", { className: "min-w-0 rounded-md border border-kumo-fill bg-kumo-base [&>pre]:p-2.5!", children: /* @__PURE__ */ o(c, { lang: e, code: s }) });
 }
 t.displayName = "CodeBlock";
-const u = Object.assign(n, {
+const u = Object.assign(c, {
   Block: t
-}), C = t;
+}), g = t;
 export {
   u as C,
-  C as a
+  g as a
 };
-//# sourceMappingURL=code-liq1g6f5lhee305d.js.map
+//# sourceMappingURL=code-cz0w1y5z4h29a9eg.js.map

package/dist/chunks/code-cz0w1y5z4h29a9eg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-cz0w1y5z4h29a9eg.js","sources":["../../src/components/code/code.tsx"],"sourcesContent":["import { type CSSProperties } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Code language variant definitions. */\nexport const KUMO_CODE_VARIANTS = {\n  lang: {\n    ts: {\n      classes: \"\",\n      description: \"TypeScript code\",\n    },\n    tsx: {\n      classes: \"\",\n      description: \"TypeScript JSX code\",\n    },\n    jsonc: {\n      classes: \"\",\n      description: \"JSON with comments\",\n    },\n    bash: {\n      classes: \"\",\n      description: \"Shell/Bash commands\",\n    },\n    css: {\n      classes: \"\",\n      description: \"CSS styles\",\n    },\n  },\n} as const;\n\nexport const KUMO_CODE_DEFAULT_VARIANTS = {\n  lang: \"ts\",\n} as const;\n\n/**\n * Styling metadata for Code component (for AI/Figma plugin consumption)\n */\nexport const KUMO_CODE_STYLING = {\n  /** Base semantic tokens used */\n  baseTokens: [\"text-kumo-strong\"],\n  /** Typography and layout */\n  typography: {\n    fontFamily: \"font-mono\",\n    fontSize: \"text-sm\",\n    lineHeight: \"leading-[20px]\",\n  },\n  /** Container dimensions */\n  dimensions: {\n    margin: \"m-0\",\n    padding: \"p-0\",\n    width: \"w-auto\",\n  },\n  /** Border and background */\n  appearance: {\n    borderRadius: \"rounded-none\",\n    border: \"border-none\",\n    background: \"bg-transparent\",\n  },\n} as const;\n\n/**\n * Styling metadata for CodeBlock component (for AI/Figma plugin consumption)\n */\nexport const KUMO_CODEBLOCK_STYLING = {\n  /** Base semantic tokens used */\n  baseTokens: [\"bg-kumo-base\", \"border-kumo-fill\"],\n  /** Container styling */\n  container: {\n    minWidth: \"min-w-0\",\n    borderRadius: \"rounded-md\",\n    border: \"border border-kumo-fill\",\n    background: \"bg-kumo-base\",\n  },\n  /** Inner code element padding */\n  innerPadding: \"[&>pre]:p-2.5\",\n  /** Parsed dimensions */\n  dimensions: {\n    borderRadius: 6, // md = 6px\n    padding: 10, // p-2.5 = 10px\n  },\n} as const;\n\n// Derived types from KUMO_CODE_VARIANTS\nexport type KumoCodeLang = keyof typeof KUMO_CODE_VARIANTS.lang;\n\nexport interface KumoCodeVariantsProps {\n  /**\n   * Language hint for the code content.\n   * - `\"ts\"` — TypeScript code\n   * - `\"tsx\"` — TypeScript JSX code\n   * - `\"jsonc\"` — JSON with comments\n   * - `\"bash\"` — Shell/Bash commands\n   * - `\"css\"` — CSS styles\n   * @default \"ts\"\n   */\n  lang?: KumoCodeLang;\n}\n\nexport function codeVariants({\n  lang = KUMO_CODE_DEFAULT_VARIANTS.lang,\n}: KumoCodeVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"m-0 w-auto rounded-none border-none bg-transparent p-0 font-mono text-sm leading-[20px] text-kumo-strong\",\n    // Apply lang-specific styles (fallback to default if lang not in map)\n    KUMO_CODE_VARIANTS.lang[lang]?.classes ??\n      KUMO_CODE_VARIANTS.lang[KUMO_CODE_DEFAULT_VARIANTS.lang].classes,\n  );\n}\n\n// Legacy type alias for backwards compatibility\nexport type CodeLang = KumoCodeLang;\n\n/** @deprecated Use CodeLang instead */\nexport type BundledLanguage = CodeLang;\n\n/**\n * Code component props.\n *\n * @example\n * ```tsx\n * <Code code=\"const x = 1;\" lang=\"ts\" />\n * <Code code=\"export API_KEY={{apiKey}}\" lang=\"bash\"\n *   values={{ apiKey: { value: \"sk_live_123\", highlight: true } }}\n * />\n * ```\n */\nexport interface CodeProps extends KumoCodeVariantsProps {\n  /** The code string to display. */\n  code: string;\n  /** Template values for `{{key}}` interpolation. Values with `highlight: true` are visually emphasized. */\n  values?: Record<\n    string,\n    {\n      value: string;\n      highlight?: boolean;\n    }\n  >;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Inline styles. */\n  style?: CSSProperties;\n}\n\n/**\n * Simple code component without syntax highlighting.\n *\n * Renders code in a monospace font with customizable language metadata.\n * For a bordered container version, use `Code.Block` or `CodeBlock`.\n *\n * **Styling:**\n * - Typography: `font-mono text-sm leading-[20px]`\n * - Colors: `text-kumo-strong` with `bg-transparent`\n * - No borders or padding (use CodeBlock for styled container)\n * - Supports all semantic tokens via className prop\n *\n * @deprecated Use `CodeHighlighted` from `@cloudflare/kumo/code` for syntax highlighting.\n * This component will be removed in v2.0.\n *\n * @example Migration:\n * ```tsx\n * // Before\n * import { Code } from \"@cloudflare/kumo\";\n * <Code code=\"const x = 1;\" lang=\"ts\" />\n *\n * // After\n * import { ShikiProvider, CodeHighlighted } from \"@cloudflare/kumo/code\";\n * <ShikiProvider engine=\"javascript\" languages={['tsx']} themes={{ light: 'github-light', dark: 'github-dark' }}>\n *   <CodeHighlighted code=\"const x = 1;\" lang=\"tsx\" />\n * </ShikiProvider>\n * ```\n */\nfunction CodeComponent({\n  code,\n  lang = KUMO_CODE_DEFAULT_VARIANTS.lang,\n  className,\n  style,\n}: CodeProps) {\n  return (\n    <pre className={cn(codeVariants({ lang }), className)} style={style}>\n      {code}\n    </pre>\n  );\n}\n\nCodeComponent.displayName = \"Code\";\n\n/**\n * CodeBlock component props — code inside a bordered container.\n *\n * @example\n * ```tsx\n * <CodeBlock lang=\"tsx\" code={`const greeting = \"Hello!\";`} />\n * ```\n */\nexport interface CodeBlockProps {\n  /** The code string to display. */\n  code: string;\n  /**\n   * Language hint for the code content.\n   * @default \"ts\"\n   */\n  lang?: CodeLang;\n}\n\n/**\n * Code block with border and background container.\n *\n * A styled wrapper around Code that adds a bordered container with surface background.\n * Useful for displaying code snippets with visual separation from surrounding content.\n *\n * **Styling:**\n * - Container: `min-w-0 rounded-md border border-kumo-fill bg-kumo-base`\n * - Inner padding: `p-2.5` (10px)\n * - Uses semantic tokens: `bg-kumo-base`, `border-kumo-fill`\n *\n * @deprecated Use `CodeHighlighted` from `@cloudflare/kumo/code` for syntax highlighting.\n * This component will be removed in v2.0.\n */\nfunction CodeBlockComponent({ code, lang }: CodeBlockProps) {\n  return (\n    <div className=\"min-w-0 rounded-md border border-kumo-fill bg-kumo-base [&>pre]:p-2.5!\">\n      <CodeComponent lang={lang} code={code} />\n    </div>\n  );\n}\n\nCodeBlockComponent.displayName = \"CodeBlock\";\n\n// Export Code with Block sub-component (for registry detection)\nexport const Code = Object.assign(CodeComponent, {\n  Block: CodeBlockComponent,\n});\n\n// Backward-compatible standalone export\nexport const CodeBlock = CodeBlockComponent;\n"],"names":["KUMO_CODE_VARIANTS","KUMO_CODE_DEFAULT_VARIANTS","codeVariants","lang","cn","CodeComponent","code","className","style","jsx","CodeBlockComponent","Code","CodeBlock"],"mappings":";;;AAIO,MAAMA,IAAqB;AAAA,EAChC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,KAAK;AAAA,MACH,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,KAAK;AAAA,MACH,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA6B;AAAA,EACxC,MAAM;AACR;AAkEO,SAASC,EAAa;AAAA,EAC3B,MAAAC,IAAOF,EAA2B;AACpC,IAA2B,IAAI;AAC7B,SAAOG;AAAA;AAAA,IAEL;AAAA;AAAA,IAEAJ,EAAmB,KAAKG,CAAI,GAAG,WAC7BH,EAAmB,KAAKC,EAA2B,IAAI,EAAE;AAAA,EAAA;AAE/D;AAgEA,SAASI,EAAc;AAAA,EACrB,MAAAC;AAAA,EACA,MAAAH,IAAOF,EAA2B;AAAA,EAClC,WAAAM;AAAA,EACA,OAAAC;AACF,GAAc;AACZ,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWL,EAAGF,EAAa,EAAE,MAAAC,EAAA,CAAM,GAAGI,CAAS,GAAG,OAAAC,GACpD,UAAAF,EAAA,CACH;AAEJ;AAEAD,EAAc,cAAc;AAkC5B,SAASK,EAAmB,EAAE,MAAAJ,GAAM,MAAAH,KAAwB;AAC1D,SACE,gBAAAM,EAAC,SAAI,WAAU,0EACb,4BAACJ,GAAA,EAAc,MAAAF,GAAY,MAAAG,GAAY,EAAA,CACzC;AAEJ;AAEAI,EAAmB,cAAc;AAG1B,MAAMC,IAAO,OAAO,OAAON,GAAe;AAAA,EAC/C,OAAOK;AACT,CAAC,GAGYE,IAAYF;"}