@bergetai/ui 0.17.0 → 0.18.0

package/dist/primitives/code-block.mjs

@@ -0,0 +1,124 @@
+import { Button } from "./button.mjs";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "cn";
+import { CheckIcon, CopyIcon } from "lucide-react";
+//#region src/primitives/code-block.tsx
+const codeBlockVariants = cva("group/code-block relative flex w-full min-w-0 flex-col overflow-hidden rounded-lg text-sm has-[>[data-slot=code-block-content]:focus-visible]:ring-3 has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50 data-[size=sm]:text-xs", {
+	variants: { variant: {
+		default: "border border-input text-foreground has-[>[data-slot=code-block-content]:focus-visible]:border-ring dark:bg-input/30",
+		destructive: "border border-destructive/30 text-destructive dark:border-destructive/40"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function CodeBlock({ className, variant = "default", size = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "code-block",
+		"data-variant": variant,
+		"data-size": size,
+		className: cn(codeBlockVariants({ variant }), className),
+		...props
+	});
+}
+function CodeBlockHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "code-block-header",
+		className: cn("flex min-w-0 shrink-0 items-center gap-2 px-3 pt-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pt-2.5 group-data-[variant=destructive]/code-block:text-destructive *:has-[>[data-slot=code-block-title]]:min-w-0", className),
+		...props
+	});
+}
+function CodeBlockTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "code-block-title",
+		className: cn("min-w-0 truncate font-sans text-sm font-medium text-foreground group-data-[size=sm]/code-block:text-xs group-data-[variant=destructive]/code-block:text-destructive [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*='size-'])]:size-3.5 *:[svg]:me-1.5", className),
+		...props
+	});
+}
+function CodeBlockActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "code-block-actions",
+		className: cn("-my-1 ms-auto -me-1.5 flex shrink-0 items-center gap-1 [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:end-2 [[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-1.5 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-1.5 [[data-slot=code-block]>&]:pointer-coarse:opacity-100 [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-1 [[data-slot=code-block]>&]:*:[button]:ring-foreground/10", className),
+		...props
+	});
+}
+function CodeBlockCopyButton({ value, variant = "ghost", size = "icon-xs", className, onClick, ...props }) {
+	const [copied, setCopied] = React.useState(false);
+	React.useEffect(() => {
+		if (!copied) return;
+		const timeout = setTimeout(() => setCopied(false), 2e3);
+		return () => clearTimeout(timeout);
+	}, [copied]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		"data-slot": "code-block-copy-button",
+		"data-copied": copied || void 0,
+		variant,
+		size,
+		"aria-label": copied ? "Copied" : "Copy",
+		className: cn(className),
+		onClick: (event) => {
+			onClick?.(event);
+			navigator.clipboard.writeText(value).then(() => setCopied(true)).catch(() => {});
+		},
+		...props,
+		children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
+	}), /* @__PURE__ */ jsx("span", {
+		"aria-live": "polite",
+		className: "sr-only",
+		children: copied ? "Copied" : ""
+	})] });
+}
+function CodeBlockContent({ className, children, style, wrap = false, lineNumbers = false, startLine = 1, ...props }) {
+	return /* @__PURE__ */ jsx("pre", {
+		"data-slot": "code-block-content",
+		"data-wrap": wrap || void 0,
+		"data-numbered": lineNumbers || void 0,
+		dir: "ltr",
+		tabIndex: 0,
+		style: {
+			counterReset: `line ${startLine - 1}`,
+			...style
+		},
+		className: cn("min-h-0 min-w-0 scroll-fade-x scrollbar-thin overflow-auto px-3 py-3 text-start font-mono leading-relaxed outline-none group-has-data-[slot=code-block-footer]/code-block:pb-2 group-has-data-[slot=code-block-header]/code-block:pt-2 group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:py-2.5 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5 data-wrap:scroll-fade-y data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap", className),
+		...props,
+		children: /* @__PURE__ */ jsx("code", {
+			"data-slot": "code-block-code",
+			className: "grid min-h-lh min-w-max content-start in-data-numbered:grid-cols-[auto_1fr] in-data-wrap:min-w-0",
+			children: lineNumbers && typeof children === "string" ? children.replace(/\n$/, "").split("\n").map((line, index) => /* @__PURE__ */ jsx(CodeBlockLine, { children: line }, index)) : children
+		})
+	});
+}
+const codeBlockLineVariants = cva("relative -mx-3 block min-h-lh px-3 group-data-[size=sm]/code-block:-mx-2.5 group-data-[size=sm]/code-block:px-2.5 before:min-w-6 before:text-end before:text-muted-foreground after:absolute after:start-1 after:top-0 after:text-muted-foreground after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:gap-x-3 in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']", {
+	variants: { variant: {
+		default: "",
+		added: "bg-muted after:content-['+']",
+		removed: "bg-destructive/10 after:text-destructive after:content-['−']",
+		highlighted: "bg-muted"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function CodeBlockLine({ className, variant = "default", children, ...props }) {
+	const empty = children === void 0 || children === null || children === "" || Array.isArray(children) && children.length === 0;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "code-block-line",
+		"data-variant": variant,
+		className: cn(codeBlockLineVariants({ variant }), className),
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "code-block-line-content",
+			className: "min-w-0",
+			children: empty ? "\n" : children
+		})
+	});
+}
+function CodeBlockFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "code-block-footer",
+		className: cn("flex min-w-0 shrink-0 items-center gap-2 px-3 pb-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pb-2.5", className),
+		...props
+	});
+}
+//#endregion
+export { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle };
+
+//# sourceMappingURL=code-block.mjs.map

package/dist/primitives/code-block.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.mjs","names":[],"sources":["../../src/primitives/code-block.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nimport { Button } from \"@/primitives/button\"\nimport { CheckIcon, CopyIcon } from \"lucide-react\"\n\nconst codeBlockVariants = cva(\n  \"group/code-block relative flex w-full min-w-0 flex-col overflow-hidden rounded-lg text-sm has-[>[data-slot=code-block-content]:focus-visible]:ring-3 has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50 data-[size=sm]:text-xs\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border border-input text-foreground has-[>[data-slot=code-block-content]:focus-visible]:border-ring dark:bg-input/30\",\n        destructive:\n          \"border border-destructive/30 text-destructive dark:border-destructive/40\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction CodeBlock({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof codeBlockVariants> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"code-block\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(codeBlockVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction CodeBlockHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"code-block-header\"\n      className={cn(\n        \"flex min-w-0 shrink-0 items-center gap-2 px-3 pt-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pt-2.5 group-data-[variant=destructive]/code-block:text-destructive *:has-[>[data-slot=code-block-title]]:min-w-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CodeBlockTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"code-block-title\"\n      className={cn(\n        \"min-w-0 truncate font-sans text-sm font-medium text-foreground group-data-[size=sm]/code-block:text-xs group-data-[variant=destructive]/code-block:text-destructive [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*='size-'])]:size-3.5 *:[svg]:me-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CodeBlockActions({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"code-block-actions\"\n      className={cn(\n        \"-my-1 ms-auto -me-1.5 flex shrink-0 items-center gap-1 [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:end-2 [[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-1.5 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-1.5 [[data-slot=code-block]>&]:pointer-coarse:opacity-100 [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-1 [[data-slot=code-block]>&]:*:[button]:ring-foreground/10\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CodeBlockCopyButton({\n  value,\n  variant = \"ghost\",\n  size = \"icon-xs\",\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button> & { value: string }) {\n  const [copied, setCopied] = React.useState(false)\n\n  React.useEffect(() => {\n    if (!copied) {\n      return\n    }\n\n    const timeout = setTimeout(() => setCopied(false), 2000)\n    return () => clearTimeout(timeout)\n  }, [copied])\n\n  return (\n    <>\n      <Button\n        data-slot=\"code-block-copy-button\"\n        data-copied={copied || undefined}\n        variant={variant}\n        size={size}\n        aria-label={copied ? \"Copied\" : \"Copy\"}\n        className={cn(className)}\n        onClick={(event) => {\n          onClick?.(event)\n          navigator.clipboard\n            .writeText(value)\n            .then(() => setCopied(true))\n            .catch(() => {})\n        }}\n        {...props}\n      >\n        {copied ? (\n          <CheckIcon\n          />\n        ) : (\n          <CopyIcon\n          />\n        )}\n      </Button>\n      <span aria-live=\"polite\" className=\"sr-only\">\n        {copied ? \"Copied\" : \"\"}\n      </span>\n    </>\n  )\n}\n\nfunction CodeBlockContent({\n  className,\n  children,\n  style,\n  wrap = false,\n  lineNumbers = false,\n  startLine = 1,\n  ...props\n}: React.ComponentProps<\"pre\"> & {\n  wrap?: boolean\n  lineNumbers?: boolean\n  startLine?: number\n}) {\n  return (\n    <pre\n      data-slot=\"code-block-content\"\n      data-wrap={wrap || undefined}\n      data-numbered={lineNumbers || undefined}\n      dir=\"ltr\"\n      tabIndex={0}\n      style={{ counterReset: `line ${startLine - 1}`, ...style }}\n      className={cn(\n        \"min-h-0 min-w-0 scroll-fade-x scrollbar-thin overflow-auto px-3 py-3 text-start font-mono leading-relaxed outline-none group-has-data-[slot=code-block-footer]/code-block:pb-2 group-has-data-[slot=code-block-header]/code-block:pt-2 group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:py-2.5 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5 data-wrap:scroll-fade-y data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap\",\n        className\n      )}\n      {...props}\n    >\n      <code\n        data-slot=\"code-block-code\"\n        className=\"grid min-h-lh min-w-max content-start in-data-numbered:grid-cols-[auto_1fr] in-data-wrap:min-w-0\"\n      >\n        {lineNumbers && typeof children === \"string\"\n          ? children\n              .replace(/\\n$/, \"\")\n              .split(\"\\n\")\n              .map((line, index) => (\n                <CodeBlockLine key={index}>{line}</CodeBlockLine>\n              ))\n          : children}\n      </code>\n    </pre>\n  )\n}\n\nconst codeBlockLineVariants = cva(\n  \"relative -mx-3 block min-h-lh px-3 group-data-[size=sm]/code-block:-mx-2.5 group-data-[size=sm]/code-block:px-2.5 before:min-w-6 before:text-end before:text-muted-foreground after:absolute after:start-1 after:top-0 after:text-muted-foreground after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:gap-x-3 in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        added: \"bg-muted after:content-['+']\",\n        removed: \"bg-destructive/10 after:text-destructive after:content-['−']\",\n        highlighted: \"bg-muted\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction CodeBlockLine({\n  className,\n  variant = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<\"span\"> & VariantProps<typeof codeBlockLineVariants>) {\n  // An empty line holds a newline so copying a selection keeps blank lines.\n  const empty =\n    children === undefined ||\n    children === null ||\n    children === \"\" ||\n    (Array.isArray(children) && children.length === 0)\n\n  return (\n    <span\n      data-slot=\"code-block-line\"\n      data-variant={variant}\n      className={cn(codeBlockLineVariants({ variant }), className)}\n      {...props}\n    >\n      <span data-slot=\"code-block-line-content\" className=\"min-w-0\">\n        {empty ? \"\\n\" : children}\n      </span>\n    </span>\n  )\n}\n\nfunction CodeBlockFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"code-block-footer\"\n      className={cn(\n        \"flex min-w-0 shrink-0 items-center gap-2 px-3 pb-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pb-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  CodeBlock,\n  CodeBlockHeader,\n  CodeBlockTitle,\n  CodeBlockActions,\n  CodeBlockCopyButton,\n  CodeBlockContent,\n  CodeBlockLine,\n  CodeBlockFooter,\n}\n"],"mappings":"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"}

package/dist/styles/index.css

@@ -267,6 +267,22 @@
   --berget-shiki-token-parameter: var(--berget-brand-granite-50);
   --berget-shiki-token-string-expression: var(--berget-brand-moss-300);
   --berget-shiki-token-punctuation: var(--berget-brand-granite-50);
+  --berget-shiki-ansi-black: var(--berget-brand-granite-400);
+  --berget-shiki-ansi-red: var(--berget-brand-muscaria-400);
+  --berget-shiki-ansi-green: var(--berget-brand-moss-400);
+  --berget-shiki-ansi-yellow: var(--berget-brand-chanterelle-300);
+  --berget-shiki-ansi-blue: var(--berget-brand-fjord-400);
+  --berget-shiki-ansi-magenta: var(--berget-brand-muscaria-300);
+  --berget-shiki-ansi-cyan: var(--berget-brand-fjord-300);
+  --berget-shiki-ansi-white: var(--berget-brand-granite-50);
+  --berget-shiki-ansi-bright-black: var(--berget-brand-granite-500);
+  --berget-shiki-ansi-bright-red: var(--berget-brand-muscaria-300);
+  --berget-shiki-ansi-bright-green: var(--berget-brand-moss-300);
+  --berget-shiki-ansi-bright-yellow: var(--berget-brand-chanterelle-200);
+  --berget-shiki-ansi-bright-blue: var(--berget-brand-fjord-300);
+  --berget-shiki-ansi-bright-magenta: var(--berget-brand-muscaria-200);
+  --berget-shiki-ansi-bright-cyan: var(--berget-brand-fjord-200);
+  --berget-shiki-ansi-bright-white: var(--berget-brand-granite-50);
 
   /* ── Badge component-scoped tokens ──────────────────────────────── */
   /* Tinted status style: 15% brand tint bg with a same-hue accent fg.
@@ -636,6 +652,22 @@
   --berget-shiki-token-parameter: var(--berget-brand-granite-900);
   --berget-shiki-token-string-expression: var(--berget-brand-moss-500);
   --berget-shiki-token-punctuation: var(--berget-brand-granite-900);
+  --berget-shiki-ansi-black: var(--berget-brand-granite-800);
+  --berget-shiki-ansi-red: var(--berget-brand-muscaria-600);
+  --berget-shiki-ansi-green: var(--berget-brand-moss-600);
+  --berget-shiki-ansi-yellow: var(--berget-brand-chanterelle-400);
+  --berget-shiki-ansi-blue: var(--berget-brand-fjord-600);
+  --berget-shiki-ansi-magenta: var(--berget-brand-muscaria-500);
+  --berget-shiki-ansi-cyan: var(--berget-brand-fjord-500);
+  --berget-shiki-ansi-white: var(--berget-brand-granite-600);
+  --berget-shiki-ansi-bright-black: var(--berget-brand-granite-700);
+  --berget-shiki-ansi-bright-red: var(--berget-brand-muscaria-500);
+  --berget-shiki-ansi-bright-green: var(--berget-brand-moss-500);
+  --berget-shiki-ansi-bright-yellow: var(--berget-brand-chanterelle-300);
+  --berget-shiki-ansi-bright-blue: var(--berget-brand-fjord-500);
+  --berget-shiki-ansi-bright-magenta: var(--berget-brand-muscaria-400);
+  --berget-shiki-ansi-bright-cyan: var(--berget-brand-fjord-400);
+  --berget-shiki-ansi-bright-white: var(--berget-brand-granite-600);
 
   /* ── Badge component-scoped tokens (light) ──────────────────────── */
   --berget-badge-default-bg: color-mix(in oklch, var(--berget-brand-moss-400) 15%, transparent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bergetai/ui",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Berget Design System - Scandinavian-inspired design system with console aesthetic",
   "type": "module",
   "license": "MIT",
@@ -52,6 +52,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "cn": "^0.2.4",
+    "shadcn": "^4.22.1",
     "tailwind-merge": "^3.5.0"
   },
   "peerDependencies": {