@arcfusionz/arc-primitive-ui 0.2.12 → 0.2.14

package/dist/components/AILoader/AILoader.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { forwardRef, useId } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/AILoader/AILoader.tsx
 const rootClasses = "relative inline-flex shrink-0 items-center justify-center align-middle select-none";
@@ -58,7 +58,7 @@ const AILoader = forwardRef(({ state = "default", size = "md", tone = "brand", t
 			role: processing ? "status" : "img",
 			"aria-label": processing ? hasText ? label : void 0 : accessibleLabel,
 			className: cn(rootClasses, toneClasses[tone], hasText && gapClasses[size], className),
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsxs("svg", {
 					viewBox: "0 0 24 24",
 					fill: "none",

package/dist/components/Alert/Alert.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { forwardRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 import { Button } from "@base-ui/react/button";
 //#region src/components/Alert/Alert.tsx
@@ -163,7 +163,7 @@ const Alert = forwardRef(({ variant = "neutral", appearance = "soft", title, ico
 				variant,
 				appearance
 			}), className),
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				resolvedIcon != null && typeof resolvedIcon !== "boolean" && /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
 					className: cn(iconSlotClasses, !solid && iconColorClasses[variant]),

package/dist/components/Avatar/Avatar.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { Children, createContext, forwardRef, useContext, useMemo } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 import { Avatar } from "@base-ui/react/avatar";
 //#region src/components/Avatar/Avatar.tsx
@@ -110,7 +110,7 @@ const Avatar$1 = forwardRef(({ size, shape, src, alt, name, fallback, fallbackDe
 				shape: resolvedShape
 			}), group != null && "ring-2 ring-background", className),
 			...rest,
-			children: [useShorthand && /* @__PURE__ */ jsxs(Fragment, { children: [src != null && /* @__PURE__ */ jsx(AvatarImage, {
+			children: [useShorthand && /* @__PURE__ */ jsxs(Fragment$1, { children: [src != null && /* @__PURE__ */ jsx(AvatarImage, {
 				src,
 				alt: alt ?? ""
 			}), /* @__PURE__ */ jsx(AvatarFallback, {
@@ -165,7 +165,7 @@ const AvatarBadge = forwardRef(({ label, render, className, children, ...rest },
 		ref,
 		props: {
 			className: cn("absolute end-0 bottom-0 block rounded-full bg-success ring-2 ring-background", badgeSizeClasses[size], className),
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [label != null && /* @__PURE__ */ jsx("span", {
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [label != null && /* @__PURE__ */ jsx("span", {
 				className: "sr-only",
 				children: label
 			}), children] }),
@@ -202,7 +202,7 @@ const AvatarGroup = forwardRef(({ size = "md", shape = "circle", max, total, ren
 		ref,
 		props: {
 			className: cn("flex items-center", groupSpacingClasses[size], className),
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [visible, surplus > 0 && /* @__PURE__ */ jsx(Avatar$1, { children: `+${surplus}` })] }),
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [visible, surplus > 0 && /* @__PURE__ */ jsx(Avatar$1, { children: `+${surplus}` })] }),
 			...rest
 		}
 	});

package/dist/components/Badge/Badge.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { forwardRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 import { Button } from "@base-ui/react/button";
 //#region src/components/Badge/Badge.tsx
@@ -88,7 +88,7 @@ const Badge = forwardRef(({ variant = "neutral", appearance = "soft", size = "md
 				size,
 				pill
 			}), className),
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				dot && /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
 					className: "size-1.5 shrink-0 rounded-full bg-current"

package/dist/components/Button/Button.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { forwardRef, useRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";
 //#region src/components/Button/Button.tsx
 const baseClasses = "relative inline-flex items-center justify-center whitespace-nowrap select-none rounded-md font-sans font-semibold transition-colors duration-150 cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
@@ -128,7 +128,7 @@ const Button$1 = forwardRef(({ variant = "primary", size = "md", fullWidth = fal
 		if (event.detail === 0 && rippleContainerRef.current && !prefersReducedMotion()) spawnRipple(rippleContainerRef.current);
 		onClick?.(event);
 	};
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		startIcon != null && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: "inline-flex items-center",
@@ -161,7 +161,7 @@ const Button$1 = forwardRef(({ variant = "primary", size = "md", fullWidth = fal
 			ref: rippleContainerRef,
 			"aria-hidden": "true",
 			className: "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [contain:strict]"
-		}), loading ? loadingText != null ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, {}), loadingText] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+		}), loading ? loadingText != null ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Spinner, {}), loadingText] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
 			className: "absolute inset-0 flex items-center justify-center",
 			children: [/* @__PURE__ */ jsx(Spinner, {}), /* @__PURE__ */ jsx("span", {
 				className: "sr-only",

package/dist/components/Calendar/Calendar.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 import { mergeProps } from "@base-ui/react/merge-props";
 //#region src/components/Calendar/Calendar.tsx
@@ -441,7 +441,7 @@ const Calendar = forwardRef((props, forwardedRef) => {
 		role: "group",
 		"aria-label": ariaLabel,
 		className: cn("inline-flex flex-col p-3 font-sans", className),
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			role: "status",
 			className: "sr-only",
 			children: announcement

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,69 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/CodeBlock/CodeBlock.d.ts
+interface CodeBlockVariantsOptions {
+  /** Additional classes merged after the Code Block frame recipe. */
+  className?: string;
+}
+/**
+ * Class list for an element styled as a Code Block frame (dark `code` surface,
+ * 6px border, `font-code`). Useful when a consumer needs the same shell around
+ * a bespoke body that this component's props do not cover.
+ */
+declare function codeBlockVariants({ className }?: CodeBlockVariantsOptions): string;
+interface CodeBlockProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "className" | "prefix"> {
+  /**
+   * The source text. Used as the copy payload and, unless `children` is
+   * provided, rendered as the code body — syntax-highlighted when `language`
+   * is a SQL dialect, otherwise plain. A single trailing newline is trimmed.
+   */
+  code?: string;
+  /**
+   * Custom body rendered in place of `code`, for pre-highlighted output from a
+   * full engine (Shiki/Prism) or any non-SQL language. SQL is highlighted
+   * in-house, so `children` is only needed to go beyond that. Copy still uses
+   * `code` when set, otherwise the rendered text. Line numbers and
+   * `highlightLines` do not apply to a custom `children` body.
+   */
+  children?: ReactNode;
+  /**
+   * Language label shown in the header, e.g. `"sql"`; also emitted as
+   * `data-language`. When it names a SQL dialect (`sql`, `postgres`, `mysql`,
+   * …) the code is colored by the built-in SQL highlighter — the only language
+   * highlighted in-house. Other languages render plain unless you pass
+   * highlighted `children`.
+   */
+  language?: string;
+  /** File name shown as the header title; also becomes the code region's accessible name. */
+  filename?: string;
+  /** Render a line-number gutter. Applies to the `code` path (plain or SQL), not a custom `children` body. */
+  showLineNumbers?: boolean;
+  /** 1-based line numbers to emphasize with a band and left accent. Applies to the `code` path, not a custom `children` body. */
+  highlightLines?: number[];
+  /** Soft-wrap long lines instead of the default horizontal scroll. */
+  wrap?: boolean;
+  /** Show the copy-to-clipboard control. */
+  copyable?: boolean;
+  /** Accessible name for the copy control. */
+  copyLabel?: string;
+  /** Message announced (politely) once the copy succeeds. */
+  copiedLabel?: string;
+  /**
+   * Accessible name for the scrollable code region when there is no `filename`
+   * to name it. Defaults to `"<language> code"` or `"Code snippet"`.
+   */
+  codeLabel?: string;
+  /** Cap the code area height (number → px), enabling vertical scroll. */
+  maxHeight?: number | string;
+  /**
+   * Replace the default `div` root, e.g. `render={<figure />}`. The header and
+   * code region are provided as children; choose an element that fits the
+   * surrounding document.
+   */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the Code Block frame recipe. */
+  className?: string;
+}
+declare const CodeBlock: import("react").ForwardRefExoticComponent<CodeBlockProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CodeBlock, CodeBlockProps, CodeBlockVariantsOptions, codeBlockVariants };

package/dist/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,201 @@
+import { cn } from "../../lib/cn.js";
+import { highlightSqlLines } from "./sqlHighlight.js";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/CodeBlock/CodeBlock.tsx
+const containerClasses = "relative overflow-hidden rounded-md border border-slate-800 bg-code font-code text-sm text-code-foreground";
+/**
+* Class list for an element styled as a Code Block frame (dark `code` surface,
+* 6px border, `font-code`). Useful when a consumer needs the same shell around
+* a bespoke body that this component's props do not cover.
+*/
+function codeBlockVariants({ className } = {}) {
+	return cn(containerClasses, className);
+}
+const SQL_LANGUAGES = /* @__PURE__ */ new Set([
+	"sql",
+	"postgres",
+	"postgresql",
+	"psql",
+	"plpgsql",
+	"mysql",
+	"mariadb",
+	"sqlite",
+	"tsql",
+	"mssql",
+	"plsql",
+	"oracle",
+	"bigquery",
+	"snowflake",
+	"redshift"
+]);
+function isSqlLanguage(language) {
+	return language != null && SQL_LANGUAGES.has(language.toLowerCase());
+}
+const sqlTokenClasses = {
+	keyword: "text-code-keyword",
+	function: "text-code-function",
+	string: "text-code-string",
+	number: "text-code-number",
+	comment: "text-code-comment italic",
+	punctuation: "text-code-punctuation",
+	identifier: "",
+	whitespace: ""
+};
+/** Render one line of SQL tokens as colored spans (or a space to hold height). */
+function renderSqlLine(tokens) {
+	if (tokens.length === 0) return " ";
+	return tokens.map((token, index) => {
+		const className = sqlTokenClasses[token.type];
+		return className ? /* @__PURE__ */ jsx("span", {
+			className,
+			children: token.value
+		}, index) : /* @__PURE__ */ jsx("span", { children: token.value }, index);
+	});
+}
+function CopyIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "9",
+			y: "9",
+			width: "13",
+			height: "13",
+			rx: "2"
+		}), /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })]
+	});
+}
+function CheckIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m5 13 4 4L19 7" })
+	});
+}
+function CopyButton({ getText, copyLabel, copiedLabel, floating = false }) {
+	const [copied, setCopied] = useState(false);
+	const resetTimer = useRef(void 0);
+	useEffect(() => () => clearTimeout(resetTimer.current), []);
+	const handleCopy = () => {
+		const write = navigator?.clipboard?.writeText;
+		if (!write) return;
+		write.call(navigator.clipboard, getText()).then(() => {
+			setCopied(true);
+			clearTimeout(resetTimer.current);
+			resetTimer.current = setTimeout(() => setCopied(false), 2e3);
+		}, () => {});
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: handleCopy,
+		"aria-label": copyLabel,
+		className: cn("inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-slate-400", "transition-colors hover:bg-background/10 hover:text-code-foreground", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "[&_svg]:pointer-events-none [&_svg]:size-4", floating && "absolute right-2 top-2 z-10 bg-code/90 text-slate-300"),
+		children: [copied ? /* @__PURE__ */ jsx(CheckIcon, {
+			"aria-hidden": "true",
+			className: "text-success-400"
+		}) : /* @__PURE__ */ jsx(CopyIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			"aria-live": "polite",
+			children: copied ? copiedLabel : ""
+		})]
+	});
+}
+const CodeBlock = forwardRef(({ code, children, language, filename, showLineNumbers = false, highlightLines, wrap = false, copyable = true, copyLabel = "Copy code", copiedLabel = "Copied to clipboard", codeLabel, maxHeight, render, className, ...rest }, ref) => {
+	const preRef = useRef(null);
+	const filenameId = useId();
+	const getCopyText = useCallback(() => code ?? preRef.current?.textContent ?? "", [code]);
+	const trimmed = code == null ? null : code.replace(/\n$/, "");
+	const sqlMode = children == null && trimmed != null && isSqlLanguage(language);
+	const plainLines = useMemo(() => children == null && trimmed != null && !isSqlLanguage(language) ? trimmed.split("\n") : null, [
+		children,
+		trimmed,
+		language
+	]);
+	const codeLines = useMemo(() => sqlMode && trimmed != null ? highlightSqlLines(trimmed) : null, [sqlMode, trimmed]) ?? plainLines;
+	const highlightSet = useMemo(() => new Set(highlightLines ?? []), [highlightLines]);
+	const gutterMinWidth = codeLines ? `${String(codeLines.length).length}ch` : void 0;
+	const hasHeader = Boolean(filename) || Boolean(language);
+	const preStyle = maxHeight == null ? void 0 : { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight };
+	const copyButton = copyable ? /* @__PURE__ */ jsx(CopyButton, {
+		getText: getCopyText,
+		copyLabel,
+		copiedLabel,
+		floating: !hasHeader
+	}) : null;
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [hasHeader && /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between gap-3 border-b border-slate-800 bg-slate-950 px-4 py-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex min-w-0 items-center gap-2",
+			children: filename && /* @__PURE__ */ jsx("span", {
+				id: filenameId,
+				className: "truncate font-sans text-sm text-slate-300",
+				children: filename
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-center gap-3",
+			children: [language && /* @__PURE__ */ jsx("span", {
+				className: "font-sans text-xs font-medium uppercase tracking-wider text-slate-400",
+				children: language
+			}), copyButton]
+		})]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [!hasHeader && copyButton, /* @__PURE__ */ jsx("pre", {
+			ref: preRef,
+			tabIndex: 0,
+			"aria-labelledby": filename ? filenameId : void 0,
+			"aria-label": filename ? void 0 : codeLabel ?? (language ? `${language} code` : "Code snippet"),
+			style: preStyle,
+			className: cn("m-0 overflow-auto py-3 leading-relaxed whitespace-normal", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"),
+			children: children != null ? /* @__PURE__ */ jsx("code", {
+				className: cn("block px-4", wrap ? "whitespace-pre-wrap break-words" : "whitespace-pre"),
+				children
+			}) : /* @__PURE__ */ jsx("code", {
+				className: "block",
+				children: codeLines?.map((line, index) => {
+					const lineNumber = index + 1;
+					const highlighted = highlightSet.has(lineNumber);
+					return /* @__PURE__ */ jsxs("span", {
+						"data-line": lineNumber,
+						className: cn("flex items-start border-l-2 border-transparent", wrap ? "w-full" : "w-max min-w-full", highlighted && "border-primary-500 bg-background/10"),
+						children: [showLineNumbers && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							style: { minWidth: gutterMinWidth },
+							className: "shrink-0 select-none pr-4 pl-4 text-right text-slate-400 tabular-nums",
+							children: lineNumber
+						}), /* @__PURE__ */ jsx("span", {
+							className: cn("min-w-0", showLineNumbers ? "pr-4" : "px-4", wrap ? "whitespace-pre-wrap break-words" : "whitespace-pre"),
+							children: typeof line === "string" ? line.length ? line : " " : renderSqlLine(line)
+						})]
+					}, index);
+				})
+			})
+		})]
+	})] });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: {
+			...rest,
+			"data-language": language,
+			className: codeBlockVariants({ className }),
+			children: content
+		}
+	});
+});
+CodeBlock.displayName = "CodeBlock";
+//#endregion
+export { CodeBlock, codeBlockVariants };

package/dist/components/CodeBlock/index.d.ts

@@ -0,0 +1,2 @@
+import { CodeBlock, CodeBlockProps, CodeBlockVariantsOptions, codeBlockVariants } from "./CodeBlock.js";
+export { CodeBlock, type CodeBlockProps, type CodeBlockVariantsOptions, codeBlockVariants };

package/dist/components/CodeBlock/index.js

@@ -0,0 +1,2 @@
+import { CodeBlock, codeBlockVariants } from "./CodeBlock.js";
+export { CodeBlock, codeBlockVariants };

package/dist/components/CodeBlock/sqlHighlight.js

@@ -0,0 +1,218 @@
+//#region src/components/CodeBlock/sqlHighlight.ts
+const KEYWORDS = /* @__PURE__ */ new Set([
+	"ADD",
+	"ALL",
+	"ALTER",
+	"AND",
+	"ANY",
+	"AS",
+	"ASC",
+	"BEGIN",
+	"BETWEEN",
+	"BY",
+	"CASCADE",
+	"CASE",
+	"CAST",
+	"CHECK",
+	"COLLATE",
+	"COLUMN",
+	"COMMIT",
+	"CONSTRAINT",
+	"CREATE",
+	"CROSS",
+	"CURRENT",
+	"DATABASE",
+	"DECLARE",
+	"DEFAULT",
+	"DELETE",
+	"DESC",
+	"DISTINCT",
+	"DO",
+	"DROP",
+	"ELSE",
+	"END",
+	"EXCEPT",
+	"EXISTS",
+	"EXPLAIN",
+	"FALSE",
+	"FETCH",
+	"FILTER",
+	"FIRST",
+	"FOLLOWING",
+	"FOR",
+	"FOREIGN",
+	"FROM",
+	"FULL",
+	"FUNCTION",
+	"GENERATED",
+	"GRANT",
+	"GROUP",
+	"HAVING",
+	"IF",
+	"ILIKE",
+	"IN",
+	"INDEX",
+	"INNER",
+	"INSERT",
+	"INTERSECT",
+	"INTO",
+	"IS",
+	"JOIN",
+	"KEY",
+	"LANGUAGE",
+	"LAST",
+	"LATERAL",
+	"LEFT",
+	"LIKE",
+	"LIMIT",
+	"MATERIALIZED",
+	"NATURAL",
+	"NEXT",
+	"NOT",
+	"NOTHING",
+	"NULL",
+	"NULLS",
+	"OFFSET",
+	"ON",
+	"ONLY",
+	"OR",
+	"ORDER",
+	"OUTER",
+	"OVER",
+	"PARTITION",
+	"PRECEDING",
+	"PRIMARY",
+	"PROCEDURE",
+	"RANGE",
+	"RECURSIVE",
+	"REFERENCES",
+	"RETURNING",
+	"RETURNS",
+	"REVOKE",
+	"RIGHT",
+	"ROLLBACK",
+	"ROW",
+	"ROWS",
+	"SCHEMA",
+	"SELECT",
+	"SEQUENCE",
+	"SET",
+	"SOME",
+	"TABLE",
+	"TEMP",
+	"TEMPORARY",
+	"THEN",
+	"TRANSACTION",
+	"TRIGGER",
+	"TRUE",
+	"TRUNCATE",
+	"UNBOUNDED",
+	"UNION",
+	"UNIQUE",
+	"UNKNOWN",
+	"UPDATE",
+	"USING",
+	"VALUES",
+	"VIEW",
+	"WHEN",
+	"WHERE",
+	"WINDOW",
+	"WITH",
+	"BIGINT",
+	"BIT",
+	"BOOL",
+	"BOOLEAN",
+	"BYTEA",
+	"CHAR",
+	"CLOB",
+	"BLOB",
+	"DATE",
+	"DECIMAL",
+	"DOUBLE",
+	"FLOAT",
+	"INT",
+	"INTEGER",
+	"INTERVAL",
+	"JSON",
+	"JSONB",
+	"MONEY",
+	"NCHAR",
+	"NUMERIC",
+	"NVARCHAR",
+	"PRECISION",
+	"REAL",
+	"SERIAL",
+	"SMALLINT",
+	"TEXT",
+	"TIME",
+	"TIMESTAMP",
+	"TIMESTAMPTZ",
+	"UUID",
+	"VARCHAR"
+]);
+const SQL_TOKEN_PATTERN = /(\/\*[\s\S]*?\*\/|--[^\n\r]*|#[^\n\r]*)|('(?:[^'\\]|\\.|'')*')|("(?:[^"\\]|\\.|"")*"|`(?:[^`]|``)*`)|((?:\d+(?:\.\d+)?|\.\d+)(?:[eE][+-]?\d+)?)|(\w+)|(\s+)|([(),;.[\]{}]+|::|[-+*/%<>=!|&^~@?]+)|([\s\S])/g;
+function classifyWord(word, source, nextIndex) {
+	if (KEYWORDS.has(word.toUpperCase())) return "keyword";
+	let index = nextIndex;
+	while (index < source.length && (source[index] === " " || source[index] === "	")) index += 1;
+	return source[index] === "(" ? "function" : "identifier";
+}
+function tokenizeSql(source) {
+	const tokens = [];
+	SQL_TOKEN_PATTERN.lastIndex = 0;
+	let match;
+	while ((match = SQL_TOKEN_PATTERN.exec(source)) !== null) {
+		const [full, comment, str, quotedIdentifier, num, word, whitespace, punctuation] = match;
+		if (comment != null) tokens.push({
+			type: "comment",
+			value: comment
+		});
+		else if (str != null) tokens.push({
+			type: "string",
+			value: str
+		});
+		else if (quotedIdentifier != null) tokens.push({
+			type: "identifier",
+			value: quotedIdentifier
+		});
+		else if (num != null) tokens.push({
+			type: "number",
+			value: num
+		});
+		else if (word != null) tokens.push({
+			type: classifyWord(word, source, SQL_TOKEN_PATTERN.lastIndex),
+			value: word
+		});
+		else if (whitespace != null) tokens.push({
+			type: "whitespace",
+			value: whitespace
+		});
+		else if (punctuation != null) tokens.push({
+			type: "punctuation",
+			value: punctuation
+		});
+		else tokens.push({
+			type: "identifier",
+			value: full
+		});
+	}
+	return tokens;
+}
+/**
+* Tokenize `source` and group the tokens by line. Multi-line tokens (block
+* comments, multi-line strings) are split at newlines so each line renders
+* independently. Returns one array of tokens per source line.
+*/
+function highlightSqlLines(source) {
+	const lines = [[]];
+	for (const token of tokenizeSql(source)) token.value.split("\n").forEach((part, index) => {
+		if (index > 0) lines.push([]);
+		if (part.length > 0) lines[lines.length - 1].push({
+			type: token.type,
+			value: part
+		});
+	});
+	return lines;
+}
+//#endregion
+export { highlightSqlLines };

package/dist/components/Field/Field.js

@@ -1,7 +1,7 @@
 import { cn } from "../../lib/cn.js";
 import { FieldContext } from "./FieldContext.js";
 import { forwardRef, useContext, useMemo } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { useController, useFormContext } from "react-hook-form";
 //#region src/components/Field/Field.tsx
@@ -212,7 +212,7 @@ const FieldError = forwardRef(({ className, children, match, ...rest }, ref) =>
 		match: resolvedMatch,
 		className: cn(errorClasses, className),
 		...rest,
-		children: content != null ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ErrorIcon, {}), /* @__PURE__ */ jsx("span", {
+		children: content != null ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ErrorIcon, {}), /* @__PURE__ */ jsx("span", {
 			className: "min-w-0",
 			children: content
 		})] }) : void 0