npm - @traefik-labs/faency - Versions diffs - 12.0.12 → 12.2.0 - Mend

@traefik-labs/faency 12.0.12 → 12.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (87) hide show

package/dist/components/CodeBlock/CodeBlock.cjs ADDED Viewed

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactIcons = require("@radix-ui/react-icons");
+const prismReactRenderer = require("prism-react-renderer");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const colorSchemeContext = require("../colorSchemeContext.cjs");
+const Box = require("../Box/Box.cjs");
+const Button = require("../Button/Button.cjs");
+const AccessibleIcon = require("../AccessibleIcon/AccessibleIcon.cjs");
+const Pre = stitches_config.styled("pre", {
+  m: 0,
+  borderRadius: "$2",
+  overflow: "auto",
+  border: "1px solid $colors$deepBlue3",
+  fontSize: "$2",
+  lineHeight: 1.6,
+  variants: {
+    noBorder: {
+      true: { border: "none" }
+    }
+  }
+});
+const CopyButtonWrapper = stitches_config.styled("div", {
+  position: "absolute",
+  zIndex: 1,
+  variants: {
+    position: {
+      top: { top: "$2", right: "$3" },
+      topLeft: { top: "$2", left: "$3" },
+      bottomRight: { bottom: "$2", right: "$3" },
+      bottomLeft: { bottom: "$2", left: "$3" }
+    }
+  },
+  defaultVariants: {
+    position: "top"
+  }
+});
+const CodeBlock = React.forwardRef(
+  ({
+    lang = "text",
+    code,
+    copyable = false,
+    copyText,
+    copiedText,
+    copyButtonAlign = "top right",
+    onCopy,
+    noBorder,
+    wrapText = false,
+    colorScheme,
+    maxHeight = 424,
+    css,
+    style,
+    className,
+    ...props
+  }, ref) => {
+    const systemScheme = colorSchemeContext.useColorScheme();
+    const resolvedScheme = colorScheme ?? systemScheme;
+    const prismTheme = resolvedScheme === "dark" ? prismReactRenderer.themes.nightOwl : prismReactRenderer.themes.nightOwlLight;
+    const isBottom = copyButtonAlign.includes("bottom");
+    const isLeft = copyButtonAlign.includes("left");
+    const buttonPosition = isBottom ? isLeft ? "bottomLeft" : "bottomRight" : isLeft ? "topLeft" : "top";
+    const [copied, setCopied] = React.useState(false);
+    const preRef = React.useRef(
+      null
+    );
+    const buttonWrapperRef = React.useRef(null);
+    const setPreRef = React.useCallback(
+      (node) => {
+        preRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    React.useLayoutEffect(() => {
+      if (!copyable) return;
+      const pre = preRef.current;
+      const wrapper = buttonWrapperRef.current;
+      if (!pre || !wrapper) return;
+      const isBottomAlign = isBottom;
+      const borderH = noBorder ? 0 : 2;
+      const update = () => {
+        if (!isLeft) {
+          const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);
+          wrapper.style.right = `${16 + vScrollbar}px`;
+        }
+        if (isBottomAlign) {
+          const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);
+          wrapper.style.bottom = `${8 + hScrollbar}px`;
+        }
+      };
+      update();
+      const observer = new ResizeObserver(update);
+      observer.observe(pre);
+      return () => observer.disconnect();
+    }, [copyable, isBottom, isLeft, noBorder]);
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(code);
+        setCopied(true);
+        onCopy?.();
+        setTimeout(() => setCopied(false), 1500);
+      } catch {
+      }
+    };
+    const copyButton = copyable ? /* @__PURE__ */ jsxRuntime.jsxs(
+      Button.Button,
+      {
+        variant: "secondary",
+        ghost: true,
+        size: "small",
+        type: "button",
+        onClick: handleCopy,
+        css: {
+          color: "$hiContrast",
+          gap: "$1",
+          backgroundColor: "$codeBlockCopyButtonBg",
+          height: "32px"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AccessibleIcon.AccessibleIcon, { label: copied ? "Copied" : "Copy", children: copied ? /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CopyIcon, {}) }),
+          copied ? copiedText : copyText
+        ]
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      prismReactRenderer.Highlight,
+      {
+        theme: prismTheme,
+        code,
+        language: prismReactRenderer.Prism.languages[lang] != null ? lang : "text",
+        children: ({
+          className: highlightClass,
+          style: highlightStyle,
+          tokens,
+          getLineProps,
+          getTokenProps
+        }) => /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { css: { position: "relative", ...css }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Pre,
+            {
+              ref: setPreRef,
+              className: [highlightClass, className].filter(Boolean).join(" "),
+              style: { maxHeight, ...highlightStyle, backgroundColor: "inherit", ...style },
+              noBorder,
+              ...props,
+              children: /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { css: { p: "$4", ...copyable && isBottom ? { pb: "$7" } : {} }, children: tokens.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  ...getLineProps({ line }),
+                  style: wrapText ? { whiteSpace: "pre-wrap", wordBreak: "break-all" } : void 0,
+                  children: line.map((token, key) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...getTokenProps({ token }) }, key))
+                },
+                i
+              )) })
+            }
+          ),
+          copyButton && /* @__PURE__ */ jsxRuntime.jsx(CopyButtonWrapper, { ref: buttonWrapperRef, position: buttonPosition, children: copyButton })
+        ] })
+      }
+    );
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+exports.CodeBlock = CodeBlock;
+//# sourceMappingURL=CodeBlock.cjs.map

package/dist/components/CodeBlock/CodeBlock.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CodeBlock.cjs","sources":["../../../components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import './prism-extend';\n\nimport { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { Highlight, Language, Prism, themes } from 'prism-react-renderer';\nimport React, {\n ComponentProps,\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { CSS, styled } from '../../stitches.config';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { useColorScheme } from '../colorSchemeContext';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\n\nconst Pre = styled('pre', {\n m: 0,\n borderRadius: '$2',\n overflow: 'auto',\n border: '1px solid $colors$deepBlue3',\n fontSize: '$2',\n lineHeight: 1.6,\n\n variants: {\n noBorder: {\n true: { border: 'none' },\n },\n },\n});\n\nconst CopyButtonWrapper = styled('div', {\n position: 'absolute',\n zIndex: 1,\n variants: {\n position: {\n top: { top: '$2', right: '$3' },\n topLeft: { top: '$2', left: '$3' },\n bottomRight: { bottom: '$2', right: '$3' },\n bottomLeft: { bottom: '$2', left: '$3' },\n },\n },\n\n defaultVariants: {\n position: 'top',\n },\n});\n\nexport type CodeBlockProps = {\n lang?: CodeBlockLanguage;\n code: string;\n copyable?: boolean;\n copyText?: string;\n copiedText?: string;\n copyButtonAlign?: CodeBlockCopyButtonAlign;\n onCopy?: () => void;\n noBorder?: boolean;\n wrapText?: boolean;\n colorScheme?: 'light' | 'dark';\n maxHeight?: number | string;\n css?: CSS;\n} & Omit<ComponentProps<typeof Pre>, 'css'>;\n\nexport const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(\n (\n {\n lang = 'text',\n code,\n copyable = false,\n copyText,\n copiedText,\n copyButtonAlign = 'top right',\n onCopy,\n noBorder,\n wrapText = false,\n colorScheme,\n maxHeight = 424,\n css,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n const systemScheme = useColorScheme();\n const resolvedScheme = colorScheme ?? systemScheme;\n const prismTheme = resolvedScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n const isBottom = copyButtonAlign.includes('bottom');\n const isLeft = copyButtonAlign.includes('left');\n const buttonPosition = isBottom\n ? isLeft\n ? 'bottomLeft'\n : 'bottomRight'\n : isLeft\n ? 'topLeft'\n : 'top';\n\n const [copied, setCopied] = useState(false);\n\n const preRef = useRef<HTMLPreElement | null>(\n null,\n ) as React.MutableRefObject<HTMLPreElement | null>;\n const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n const setPreRef = useCallback(\n (node: HTMLPreElement | null) => {\n preRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n },\n [ref],\n );\n\n useLayoutEffect(() => {\n if (!copyable) return;\n const pre = preRef.current;\n const wrapper = buttonWrapperRef.current;\n if (!pre || !wrapper) return;\n\n const isBottomAlign = isBottom;\n const borderH = noBorder ? 0 : 2;\n\n const update = () => {\n if (!isLeft) {\n const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n wrapper.style.right = `${16 + vScrollbar}px`;\n }\n if (isBottomAlign) {\n const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n wrapper.style.bottom = `${8 + hScrollbar}px`;\n }\n };\n\n update();\n const observer = new ResizeObserver(update);\n observer.observe(pre);\n return () => observer.disconnect();\n }, [copyable, isBottom, isLeft, noBorder]);\n\n const handleCopy = async () => {\n try {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n onCopy?.();\n setTimeout(() => setCopied(false), 1500);\n } catch {\n // clipboard write failed (e.g. permission denied) — leave UI unchanged\n }\n };\n\n const copyButton = copyable ? (\n <Button\n variant=\"secondary\"\n ghost\n size=\"small\"\n type=\"button\"\n onClick={handleCopy}\n css={{\n color: '$hiContrast',\n gap: '$1',\n backgroundColor: '$codeBlockCopyButtonBg',\n height: '32px',\n }}\n >\n <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n {copied ? <CheckIcon /> : <CopyIcon />}\n </AccessibleIcon>\n {copied ? copiedText : copyText}\n </Button>\n ) : null;\n\n return (\n <Highlight\n theme={prismTheme}\n code={code}\n language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n >\n {({\n className: highlightClass,\n style: highlightStyle,\n tokens,\n getLineProps,\n getTokenProps,\n }) => (\n <Box css={{ position: 'relative', ...css }}>\n <Pre\n ref={setPreRef}\n className={[highlightClass, className].filter(Boolean).join(' ')}\n style={{ maxHeight, ...highlightStyle, backgroundColor: 'inherit', ...style }}\n noBorder={noBorder}\n {...props}\n >\n <Box css={{ p: '$4', ...(copyable && isBottom ? { pb: '$7' } : {}) }}>\n {tokens.map((line, i) => (\n <div\n key={i}\n {...getLineProps({ line })}\n style={\n wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n }\n >\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </Box>\n </Pre>\n {copyButton && (\n <CopyButtonWrapper ref={buttonWrapperRef} position={buttonPosition}>\n {copyButton}\n </CopyButtonWrapper>\n )}\n </Box>\n )}\n </Highlight>\n );\n },\n);\n\nCodeBlock.displayName = 'CodeBlock';\n"],"names":["styled","forwardRef","useColorScheme","themes","useState","useRef","useCallback","useLayoutEffect","jsxs","Button","jsx","AccessibleIcon","CheckIcon","CopyIcon","Highlight","Prism","Box"],"mappings":"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"}

package/dist/components/CodeBlock/CodeBlock.js ADDED Viewed

@@ -0,0 +1,168 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "@radix-ui/react-icons";
+import { themes, Highlight, Prism } from "prism-react-renderer";
+import { forwardRef, useState, useRef, useCallback, useLayoutEffect } from "react";
+import { styled } from "../../stitches.config.js";
+import { useColorScheme } from "../colorSchemeContext.js";
+import { Box } from "../Box/Box.js";
+import { Button } from "../Button/Button.js";
+import { AccessibleIcon } from "../AccessibleIcon/AccessibleIcon.js";
+const Pre = styled("pre", {
+  m: 0,
+  borderRadius: "$2",
+  overflow: "auto",
+  border: "1px solid $colors$deepBlue3",
+  fontSize: "$2",
+  lineHeight: 1.6,
+  variants: {
+    noBorder: {
+      true: { border: "none" }
+    }
+  }
+});
+const CopyButtonWrapper = styled("div", {
+  position: "absolute",
+  zIndex: 1,
+  variants: {
+    position: {
+      top: { top: "$2", right: "$3" },
+      topLeft: { top: "$2", left: "$3" },
+      bottomRight: { bottom: "$2", right: "$3" },
+      bottomLeft: { bottom: "$2", left: "$3" }
+    }
+  },
+  defaultVariants: {
+    position: "top"
+  }
+});
+const CodeBlock = forwardRef(
+  ({
+    lang = "text",
+    code,
+    copyable = false,
+    copyText,
+    copiedText,
+    copyButtonAlign = "top right",
+    onCopy,
+    noBorder,
+    wrapText = false,
+    colorScheme,
+    maxHeight = 424,
+    css,
+    style,
+    className,
+    ...props
+  }, ref) => {
+    const systemScheme = useColorScheme();
+    const resolvedScheme = colorScheme ?? systemScheme;
+    const prismTheme = resolvedScheme === "dark" ? themes.nightOwl : themes.nightOwlLight;
+    const isBottom = copyButtonAlign.includes("bottom");
+    const isLeft = copyButtonAlign.includes("left");
+    const buttonPosition = isBottom ? isLeft ? "bottomLeft" : "bottomRight" : isLeft ? "topLeft" : "top";
+    const [copied, setCopied] = useState(false);
+    const preRef = useRef(
+      null
+    );
+    const buttonWrapperRef = useRef(null);
+    const setPreRef = useCallback(
+      (node) => {
+        preRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    useLayoutEffect(() => {
+      if (!copyable) return;
+      const pre = preRef.current;
+      const wrapper = buttonWrapperRef.current;
+      if (!pre || !wrapper) return;
+      const isBottomAlign = isBottom;
+      const borderH = noBorder ? 0 : 2;
+      const update = () => {
+        if (!isLeft) {
+          const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);
+          wrapper.style.right = `${16 + vScrollbar}px`;
+        }
+        if (isBottomAlign) {
+          const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);
+          wrapper.style.bottom = `${8 + hScrollbar}px`;
+        }
+      };
+      update();
+      const observer = new ResizeObserver(update);
+      observer.observe(pre);
+      return () => observer.disconnect();
+    }, [copyable, isBottom, isLeft, noBorder]);
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(code);
+        setCopied(true);
+        onCopy?.();
+        setTimeout(() => setCopied(false), 1500);
+      } catch {
+      }
+    };
+    const copyButton = copyable ? /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "secondary",
+        ghost: true,
+        size: "small",
+        type: "button",
+        onClick: handleCopy,
+        css: {
+          color: "$hiContrast",
+          gap: "$1",
+          backgroundColor: "$codeBlockCopyButtonBg",
+          height: "32px"
+        },
+        children: [
+          /* @__PURE__ */ jsx(AccessibleIcon, { label: copied ? "Copied" : "Copy", children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {}) }),
+          copied ? copiedText : copyText
+        ]
+      }
+    ) : null;
+    return /* @__PURE__ */ jsx(
+      Highlight,
+      {
+        theme: prismTheme,
+        code,
+        language: Prism.languages[lang] != null ? lang : "text",
+        children: ({
+          className: highlightClass,
+          style: highlightStyle,
+          tokens,
+          getLineProps,
+          getTokenProps
+        }) => /* @__PURE__ */ jsxs(Box, { css: { position: "relative", ...css }, children: [
+          /* @__PURE__ */ jsx(
+            Pre,
+            {
+              ref: setPreRef,
+              className: [highlightClass, className].filter(Boolean).join(" "),
+              style: { maxHeight, ...highlightStyle, backgroundColor: "inherit", ...style },
+              noBorder,
+              ...props,
+              children: /* @__PURE__ */ jsx(Box, { css: { p: "$4", ...copyable && isBottom ? { pb: "$7" } : {} }, children: tokens.map((line, i) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...getLineProps({ line }),
+                  style: wrapText ? { whiteSpace: "pre-wrap", wordBreak: "break-all" } : void 0,
+                  children: line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({ token }) }, key))
+                },
+                i
+              )) })
+            }
+          ),
+          copyButton && /* @__PURE__ */ jsx(CopyButtonWrapper, { ref: buttonWrapperRef, position: buttonPosition, children: copyButton })
+        ] })
+      }
+    );
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+export {
+  CodeBlock
+};
+//# sourceMappingURL=CodeBlock.js.map

package/dist/components/CodeBlock/CodeBlock.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CodeBlock.js","sources":["../../../components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import './prism-extend';\n\nimport { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { Highlight, Language, Prism, themes } from 'prism-react-renderer';\nimport React, {\n ComponentProps,\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { CSS, styled } from '../../stitches.config';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { useColorScheme } from '../colorSchemeContext';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\n\nconst Pre = styled('pre', {\n m: 0,\n borderRadius: '$2',\n overflow: 'auto',\n border: '1px solid $colors$deepBlue3',\n fontSize: '$2',\n lineHeight: 1.6,\n\n variants: {\n noBorder: {\n true: { border: 'none' },\n },\n },\n});\n\nconst CopyButtonWrapper = styled('div', {\n position: 'absolute',\n zIndex: 1,\n variants: {\n position: {\n top: { top: '$2', right: '$3' },\n topLeft: { top: '$2', left: '$3' },\n bottomRight: { bottom: '$2', right: '$3' },\n bottomLeft: { bottom: '$2', left: '$3' },\n },\n },\n\n defaultVariants: {\n position: 'top',\n },\n});\n\nexport type CodeBlockProps = {\n lang?: CodeBlockLanguage;\n code: string;\n copyable?: boolean;\n copyText?: string;\n copiedText?: string;\n copyButtonAlign?: CodeBlockCopyButtonAlign;\n onCopy?: () => void;\n noBorder?: boolean;\n wrapText?: boolean;\n colorScheme?: 'light' | 'dark';\n maxHeight?: number | string;\n css?: CSS;\n} & Omit<ComponentProps<typeof Pre>, 'css'>;\n\nexport const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(\n (\n {\n lang = 'text',\n code,\n copyable = false,\n copyText,\n copiedText,\n copyButtonAlign = 'top right',\n onCopy,\n noBorder,\n wrapText = false,\n colorScheme,\n maxHeight = 424,\n css,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n const systemScheme = useColorScheme();\n const resolvedScheme = colorScheme ?? systemScheme;\n const prismTheme = resolvedScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n const isBottom = copyButtonAlign.includes('bottom');\n const isLeft = copyButtonAlign.includes('left');\n const buttonPosition = isBottom\n ? isLeft\n ? 'bottomLeft'\n : 'bottomRight'\n : isLeft\n ? 'topLeft'\n : 'top';\n\n const [copied, setCopied] = useState(false);\n\n const preRef = useRef<HTMLPreElement | null>(\n null,\n ) as React.MutableRefObject<HTMLPreElement | null>;\n const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n const setPreRef = useCallback(\n (node: HTMLPreElement | null) => {\n preRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n },\n [ref],\n );\n\n useLayoutEffect(() => {\n if (!copyable) return;\n const pre = preRef.current;\n const wrapper = buttonWrapperRef.current;\n if (!pre || !wrapper) return;\n\n const isBottomAlign = isBottom;\n const borderH = noBorder ? 0 : 2;\n\n const update = () => {\n if (!isLeft) {\n const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n wrapper.style.right = `${16 + vScrollbar}px`;\n }\n if (isBottomAlign) {\n const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n wrapper.style.bottom = `${8 + hScrollbar}px`;\n }\n };\n\n update();\n const observer = new ResizeObserver(update);\n observer.observe(pre);\n return () => observer.disconnect();\n }, [copyable, isBottom, isLeft, noBorder]);\n\n const handleCopy = async () => {\n try {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n onCopy?.();\n setTimeout(() => setCopied(false), 1500);\n } catch {\n // clipboard write failed (e.g. permission denied) — leave UI unchanged\n }\n };\n\n const copyButton = copyable ? (\n <Button\n variant=\"secondary\"\n ghost\n size=\"small\"\n type=\"button\"\n onClick={handleCopy}\n css={{\n color: '$hiContrast',\n gap: '$1',\n backgroundColor: '$codeBlockCopyButtonBg',\n height: '32px',\n }}\n >\n <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n {copied ? <CheckIcon /> : <CopyIcon />}\n </AccessibleIcon>\n {copied ? copiedText : copyText}\n </Button>\n ) : null;\n\n return (\n <Highlight\n theme={prismTheme}\n code={code}\n language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n >\n {({\n className: highlightClass,\n style: highlightStyle,\n tokens,\n getLineProps,\n getTokenProps,\n }) => (\n <Box css={{ position: 'relative', ...css }}>\n <Pre\n ref={setPreRef}\n className={[highlightClass, className].filter(Boolean).join(' ')}\n style={{ maxHeight, ...highlightStyle, backgroundColor: 'inherit', ...style }}\n noBorder={noBorder}\n {...props}\n >\n <Box css={{ p: '$4', ...(copyable && isBottom ? { pb: '$7' } : {}) }}>\n {tokens.map((line, i) => (\n <div\n key={i}\n {...getLineProps({ line })}\n style={\n wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n }\n >\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </Box>\n </Pre>\n {copyButton && (\n <CopyButtonWrapper ref={buttonWrapperRef} position={buttonPosition}>\n {copyButton}\n </CopyButtonWrapper>\n )}\n </Box>\n )}\n </Highlight>\n );\n },\n);\n\nCodeBlock.displayName = 'CodeBlock';\n"],"names":[],"mappings":"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"}

package/dist/components/CodeBlock/CodeBlock.themes.cjs ADDED Viewed

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+exports.Theme = void 0;
+((Theme2) => {
+  function getLight() {
+    return {
+      codeBlockCopyButtonBg: "transparent"
+    };
+  }
+  Theme2.getLight = getLight;
+  function getDark() {
+    return {
+      codeBlockCopyButtonBg: "transparent"
+    };
+  }
+  Theme2.getDark = getDark;
+})(exports.Theme || (exports.Theme = {}));
+//# sourceMappingURL=CodeBlock.themes.cjs.map

package/dist/components/CodeBlock/CodeBlock.themes.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CodeBlock.themes.cjs","sources":["../../../components/CodeBlock/CodeBlock.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nexport namespace Theme {\n type Colors = {\n codeBlockCopyButtonBg: Property.Color;\n };\n\n export function getLight(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n\n export function getDark(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n}\n"],"names":["Theme"],"mappings":";;AAEiBA,QAAAA,QAAAA;AAAAA,CAAV,CAAUA,WAAV;AAKE,WAAS,WAAmB;AACjC,WAAO;AAAA,MACL,uBAAuB;AAAA,IAAA;AAAA,EAE3B;AAJOA,SAAS,WAAA;AAMT,WAAS,UAAkB;AAChC,WAAO;AAAA,MACL,uBAAuB;AAAA,IAAA;AAAA,EAE3B;AAJOA,SAAS,UAAA;AAAA,GAXDA,QAAAA,UAAAA,gBAAA,CAAA,EAAA;"}

package/dist/components/CodeBlock/CodeBlock.themes.js ADDED Viewed

@@ -0,0 +1,19 @@
+var Theme;
+((Theme2) => {
+  function getLight() {
+    return {
+      codeBlockCopyButtonBg: "transparent"
+    };
+  }
+  Theme2.getLight = getLight;
+  function getDark() {
+    return {
+      codeBlockCopyButtonBg: "transparent"
+    };
+  }
+  Theme2.getDark = getDark;
+})(Theme || (Theme = {}));
+export {
+  Theme
+};
+//# sourceMappingURL=CodeBlock.themes.js.map

package/dist/components/CodeBlock/CodeBlock.themes.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CodeBlock.themes.js","sources":["../../../components/CodeBlock/CodeBlock.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nexport namespace Theme {\n type Colors = {\n codeBlockCopyButtonBg: Property.Color;\n };\n\n export function getLight(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n\n export function getDark(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n}\n"],"names":["Theme"],"mappings":"AAEO,IAAU;AAAA,CAAV,CAAUA,WAAV;AAKE,WAAS,WAAmB;AACjC,WAAO;AAAA,MACL,uBAAuB;AAAA,IAAA;AAAA,EAE3B;AAJOA,SAAS,WAAA;AAMT,WAAS,UAAkB;AAChC,WAAO;AAAA,MACL,uBAAuB;AAAA,IAAA;AAAA,EAE3B;AAJOA,SAAS,UAAA;AAAA,GAXD,UAAA,QAAA,CAAA,EAAA;"}

package/dist/components/CodeBlock/CodeBlock.vanilla.cjs ADDED Viewed

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactIcons = require("@radix-ui/react-icons");
+const dynamic = require("@vanilla-extract/dynamic");
+const prismReactRenderer = require("prism-react-renderer");
+const React = require("react");
+const cssProps = require("../../styles/cssProps.cjs");
+const themeContext = require("../../styles/themeContext.cjs");
+const CodeBlock_vanilla_css = require("./CodeBlock.vanilla.css.cjs");
+const Button_vanilla = require("../Button/Button.vanilla.cjs");
+const AccessibleIcon = require("../AccessibleIcon/AccessibleIcon.cjs");
+const CodeBlockVanilla = React.forwardRef(
+  ({
+    lang = "text",
+    code,
+    copyable = false,
+    copyText,
+    copiedText,
+    copyButtonAlign = "top right",
+    onCopy,
+    noBorder,
+    wrapText = false,
+    colorScheme,
+    maxHeight = 424,
+    css,
+    style,
+    className,
+    ...props
+  }, ref) => {
+    const { colors, resolvedTheme } = themeContext.useVanillaExtractTheme();
+    const effectiveScheme = colorScheme ?? resolvedTheme;
+    const prismTheme = effectiveScheme === "dark" ? prismReactRenderer.themes.nightOwl : prismReactRenderer.themes.nightOwlLight;
+    const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
+    const containerStyles = {
+      position: "relative",
+      ...cssStyles,
+      ...dynamic.assignInlineVars(vars)
+    };
+    const [copied, setCopied] = React.useState(false);
+    const preRef = React.useRef(
+      null
+    );
+    const buttonWrapperRef = React.useRef(null);
+    const setPreRef = React.useCallback(
+      (node) => {
+        preRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    React.useLayoutEffect(() => {
+      if (!copyable) return;
+      const pre2 = preRef.current;
+      const wrapper = buttonWrapperRef.current;
+      if (!pre2 || !wrapper) return;
+      const isLeftAlign = copyButtonAlign.includes("left");
+      const isBottomAlign = copyButtonAlign.includes("bottom");
+      const borderH = noBorder ? 0 : 2;
+      const update = () => {
+        if (!isLeftAlign) {
+          const vScrollbar = Math.max(0, pre2.offsetWidth - pre2.clientWidth - borderH);
+          wrapper.style.right = `${16 + vScrollbar}px`;
+        }
+        if (isBottomAlign) {
+          const hScrollbar = Math.max(0, pre2.offsetHeight - pre2.clientHeight - borderH);
+          wrapper.style.bottom = `${8 + hScrollbar}px`;
+        }
+      };
+      update();
+      const observer = new ResizeObserver(update);
+      observer.observe(pre2);
+      return () => observer.disconnect();
+    }, [copyable, copyButtonAlign, noBorder]);
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(code);
+        setCopied(true);
+        onCopy?.();
+        setTimeout(() => setCopied(false), 1500);
+      } catch {
+      }
+    };
+    const isBottom = copyButtonAlign.includes("bottom");
+    const isLeft = copyButtonAlign.includes("left");
+    const buttonPositionClass = isBottom ? isLeft ? CodeBlock_vanilla_css.copyButtonWrapperBottomLeft : CodeBlock_vanilla_css.copyButtonWrapperBottomRight : isLeft ? CodeBlock_vanilla_css.copyButtonWrapperTopLeft : CodeBlock_vanilla_css.copyButtonWrapperTop;
+    const copyButton = copyable ? /* @__PURE__ */ jsxRuntime.jsxs(
+      Button_vanilla.ButtonVanilla,
+      {
+        variant: "secondary",
+        ghost: true,
+        size: "small",
+        type: "button",
+        onClick: handleCopy,
+        css: {
+          color: "$hiContrast",
+          gap: "$1",
+          backgroundColor: "$codeBlockCopyButtonBg",
+          height: "32px"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AccessibleIcon.AccessibleIcon, { label: copied ? "Copied" : "Copy", children: copied ? /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CopyIcon, {}) }),
+          copied ? copiedText : copyText
+        ]
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      prismReactRenderer.Highlight,
+      {
+        theme: prismTheme,
+        code,
+        language: prismReactRenderer.Prism.languages[lang] != null ? lang : "text",
+        children: ({
+          className: highlightClass,
+          style: highlightStyle,
+          tokens,
+          getLineProps,
+          getTokenProps
+        }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyles, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "pre",
+            {
+              ref: setPreRef,
+              className: [CodeBlock_vanilla_css.pre, noBorder ? CodeBlock_vanilla_css.preNoBorder : "", highlightClass, className].filter(Boolean).join(" "),
+              style: {
+                maxHeight,
+                ...highlightStyle,
+                backgroundColor: "inherit",
+                ...style
+              },
+              ...props,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: [CodeBlock_vanilla_css.codeContent, copyable && isBottom ? CodeBlock_vanilla_css.codeContentBottomPadding : ""].filter(Boolean).join(" "),
+                  children: tokens.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      ...getLineProps({ line }),
+                      style: wrapText ? { whiteSpace: "pre-wrap", wordBreak: "break-all" } : void 0,
+                      children: line.map((token, key) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...getTokenProps({ token }) }, key))
+                    },
+                    i
+                  ))
+                }
+              )
+            }
+          ),
+          copyButton && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: buttonWrapperRef, className: buttonPositionClass, children: copyButton })
+        ] })
+      }
+    );
+  }
+);
+CodeBlockVanilla.displayName = "CodeBlockVanilla";
+exports.CodeBlockVanilla = CodeBlockVanilla;
+//# sourceMappingURL=CodeBlock.vanilla.cjs.map

package/dist/components/CodeBlock/CodeBlock.vanilla.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CodeBlock.vanilla.cjs","sources":["../../../components/CodeBlock/CodeBlock.vanilla.tsx"],"sourcesContent":["import './prism-extend';\n\nimport { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { Highlight, Language, Prism, themes } from 'prism-react-renderer';\nimport React, {\n forwardRef,\n HTMLAttributes,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { ButtonVanilla } from '../Button';\nimport {\n codeContent,\n codeContentBottomPadding,\n copyButtonWrapperBottomLeft,\n copyButtonWrapperBottomRight,\n copyButtonWrapperTop,\n copyButtonWrapperTopLeft,\n pre,\n preNoBorder,\n} from './CodeBlock.vanilla.css';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\n\nexport interface CodeBlockVanillaProps\n extends Omit<HTMLAttributes<HTMLPreElement>, 'css'>,\n CSSProps {\n lang?: CodeBlockLanguage;\n code: string;\n copyable?: boolean;\n copyText?: string;\n copiedText?: string;\n copyButtonAlign?: CodeBlockCopyButtonAlign;\n onCopy?: () => void;\n noBorder?: boolean;\n wrapText?: boolean;\n colorScheme?: 'light' | 'dark';\n maxHeight?: number | string;\n}\n\nexport const CodeBlockVanilla = forwardRef<HTMLPreElement, CodeBlockVanillaProps>(\n (\n {\n lang = 'text',\n code,\n copyable = false,\n copyText,\n copiedText,\n copyButtonAlign = 'top right',\n onCopy,\n noBorder,\n wrapText = false,\n colorScheme,\n maxHeight = 424,\n css,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n const { colors, resolvedTheme } = useVanillaExtractTheme();\n const effectiveScheme = colorScheme ?? resolvedTheme;\n const prismTheme = effectiveScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const containerStyles = {\n position: 'relative' as const,\n ...cssStyles,\n ...assignInlineVars(vars),\n };\n\n const [copied, setCopied] = useState(false);\n\n const preRef = useRef<HTMLPreElement | null>(\n null,\n ) as React.MutableRefObject<HTMLPreElement | null>;\n const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n const setPreRef = useCallback(\n (node: HTMLPreElement | null) => {\n preRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n },\n [ref],\n );\n\n useLayoutEffect(() => {\n if (!copyable) return;\n const pre = preRef.current;\n const wrapper = buttonWrapperRef.current;\n if (!pre || !wrapper) return;\n\n const isLeftAlign = copyButtonAlign.includes('left');\n const isBottomAlign = copyButtonAlign.includes('bottom');\n const borderH = noBorder ? 0 : 2;\n\n const update = () => {\n if (!isLeftAlign) {\n const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n wrapper.style.right = `${16 + vScrollbar}px`;\n }\n if (isBottomAlign) {\n const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n wrapper.style.bottom = `${8 + hScrollbar}px`;\n }\n };\n\n update();\n const observer = new ResizeObserver(update);\n observer.observe(pre);\n return () => observer.disconnect();\n }, [copyable, copyButtonAlign, noBorder]);\n\n const handleCopy = async () => {\n try {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n onCopy?.();\n setTimeout(() => setCopied(false), 1500);\n } catch {\n // clipboard write failed (e.g. permission denied) — leave UI unchanged\n }\n };\n\n const isBottom = copyButtonAlign.includes('bottom');\n const isLeft = copyButtonAlign.includes('left');\n const buttonPositionClass = isBottom\n ? isLeft\n ? copyButtonWrapperBottomLeft\n : copyButtonWrapperBottomRight\n : isLeft\n ? copyButtonWrapperTopLeft\n : copyButtonWrapperTop;\n\n const copyButton = copyable ? (\n <ButtonVanilla\n variant=\"secondary\"\n ghost\n size=\"small\"\n type=\"button\"\n onClick={handleCopy}\n css={{\n color: '$hiContrast',\n gap: '$1',\n backgroundColor: '$codeBlockCopyButtonBg',\n height: '32px',\n }}\n >\n <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n {copied ? <CheckIcon /> : <CopyIcon />}\n </AccessibleIcon>\n {copied ? copiedText : copyText}\n </ButtonVanilla>\n ) : null;\n\n return (\n <Highlight\n theme={prismTheme}\n code={code}\n language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n >\n {({\n className: highlightClass,\n style: highlightStyle,\n tokens,\n getLineProps,\n getTokenProps,\n }) => (\n <div style={containerStyles}>\n <pre\n ref={setPreRef}\n className={[pre, noBorder ? preNoBorder : '', highlightClass, className]\n .filter(Boolean)\n .join(' ')}\n style={{\n maxHeight,\n ...highlightStyle,\n backgroundColor: 'inherit',\n ...style,\n }}\n {...props}\n >\n <div\n className={[codeContent, copyable && isBottom ? codeContentBottomPadding : '']\n .filter(Boolean)\n .join(' ')}\n >\n {tokens.map((line, i) => (\n <div\n key={i}\n {...getLineProps({ line })}\n style={\n wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n }\n >\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </div>\n </pre>\n {copyButton && (\n <div ref={buttonWrapperRef} className={buttonPositionClass}>\n {copyButton}\n </div>\n )}\n </div>\n )}\n </Highlight>\n );\n },\n);\n\nCodeBlockVanilla.displayName = 'CodeBlockVanilla';\n"],"names":["forwardRef","useVanillaExtractTheme","themes","processCSSProp","assignInlineVars","useState","useRef","useCallback","useLayoutEffect","pre","copyButtonWrapperBottomLeft","copyButtonWrapperBottomRight","copyButtonWrapperTopLeft","copyButtonWrapperTop","jsxs","ButtonVanilla","jsx","AccessibleIcon","CheckIcon","CopyIcon","Highlight","Prism","preNoBorder","codeContent","codeContentBottomPadding"],"mappings":"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"}

package/dist/components/CodeBlock/CodeBlock.vanilla.css.cjs ADDED Viewed

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                                       */
+var pre = "_1krwcuz0";
+var preNoBorder = "_1krwcuz1";
+var codeContent = "_1krwcuz2";
+var codeContentBottomPadding = "_1krwcuz3";
+var copyButtonWrapperTop = "_1krwcuz4";
+var copyButtonWrapperTopLeft = "_1krwcuz5";
+var copyButtonWrapperBottomRight = "_1krwcuz6";
+var copyButtonWrapperBottomLeft = "_1krwcuz7";
+exports.codeContent = codeContent;
+exports.codeContentBottomPadding = codeContentBottomPadding;
+exports.copyButtonWrapperBottomLeft = copyButtonWrapperBottomLeft;
+exports.copyButtonWrapperBottomRight = copyButtonWrapperBottomRight;
+exports.copyButtonWrapperTop = copyButtonWrapperTop;
+exports.copyButtonWrapperTopLeft = copyButtonWrapperTopLeft;
+exports.pre = pre;
+exports.preNoBorder = preNoBorder;
+//# sourceMappingURL=CodeBlock.vanilla.css.cjs.map

package/dist/components/CodeBlock/CodeBlock.vanilla.css.cjs.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"CodeBlock.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/components/CodeBlock/CodeBlock.vanilla.css.js ADDED Viewed

@@ -0,0 +1,20 @@
+/* empty css                                     */
+var pre = "_1krwcuz0";
+var preNoBorder = "_1krwcuz1";
+var codeContent = "_1krwcuz2";
+var codeContentBottomPadding = "_1krwcuz3";
+var copyButtonWrapperTop = "_1krwcuz4";
+var copyButtonWrapperTopLeft = "_1krwcuz5";
+var copyButtonWrapperBottomRight = "_1krwcuz6";
+var copyButtonWrapperBottomLeft = "_1krwcuz7";
+export {
+  codeContent,
+  codeContentBottomPadding,
+  copyButtonWrapperBottomLeft,
+  copyButtonWrapperBottomRight,
+  copyButtonWrapperTop,
+  copyButtonWrapperTopLeft,
+  pre,
+  preNoBorder
+};
+//# sourceMappingURL=CodeBlock.vanilla.css.js.map