@arcfusionz/arc-primitive-ui 0.2.12 → 0.2.13

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, 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, { 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/index.d.ts

@@ -22,6 +22,8 @@ import { Calendar, CalendarDateRange, CalendarMode, CalendarProps, CalendarState
 import "./components/Calendar/index.js";
 import { Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, CheckboxSize, CheckboxVariantsOptions, checkboxVariants } from "./components/Checkbox/Checkbox.js";
 import "./components/Checkbox/index.js";
+import { CodeBlock, CodeBlockProps, CodeBlockVariantsOptions, codeBlockVariants } from "./components/CodeBlock/CodeBlock.js";
+import "./components/CodeBlock/index.js";
 import { Select, SelectAlign, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectItem, SelectItemProps, SelectLabel, SelectLabelProps, SelectPopup, SelectPopupProps, SelectProps, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, SelectTriggerSize, SelectTriggerVariant, SelectTriggerVariantsOptions, SelectValue, SelectValueProps, selectTriggerVariants } from "./components/Select/Select.js";
 import "./components/Select/index.js";
 import { Combobox, ComboboxAlign, ComboboxChip, ComboboxChipProps, ComboboxChipRemove, ComboboxChipRemoveProps, ComboboxChips, ComboboxChipsProps, ComboboxClear, ComboboxClearProps, ComboboxCollection, ComboboxCollectionProps, ComboboxGroup, ComboboxGroupLabel, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxInput, ComboboxInputGroup, ComboboxInputGroupProps, ComboboxInputGroupVariantsOptions, ComboboxInputProps, ComboboxItem, ComboboxItemProps, ComboboxLabel, ComboboxLabelProps, ComboboxPopup, ComboboxPopupProps, ComboboxProps, ComboboxSeparator, ComboboxSeparatorProps, ComboboxSize, ComboboxTrigger, ComboboxTriggerProps, ComboboxTriggerSize, ComboboxTriggerVariant, ComboboxValue, ComboboxValueProps, comboboxInputGroupVariants, useComboboxFilter, useComboboxFilteredItems } from "./components/Combobox/Combobox.js";
@@ -78,4 +80,4 @@ import "./components/Tooltip/index.js";
 import { Typography, TypographyProps, TypographyVariant, TypographyVariantsOptions, typographyVariants } from "./components/Typography/Typography.js";
 import "./components/Typography/index.js";
 import { cn } from "./lib/cn.js";
-export { AILoader, type AILoaderProps, type AILoaderRenderState, type AILoaderSize, type AILoaderState, type AILoaderTone, Accordion, type AccordionChevronPosition, AccordionHeader, type AccordionHeaderProps, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, Alert, type AlertAppearance, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogPopup, type AlertDialogPopupProps, type AlertDialogPopupVariantsOptions, type AlertDialogProps, type AlertDialogScrollBehavior, type AlertDialogSize, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, type AlertVariant, type AlertVariantsOptions, Avatar, AvatarBadge, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarVariantsOptions, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeVariant, type BadgeVariantsOptions, Box, type BoxBackground, type BoxPadding, type BoxProps, type BoxRadius, type BoxShadow, type BoxVariantsOptions, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbLinkVariantsOptions, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantsOptions, Calendar, type CalendarDateRange, type CalendarMode, type CalendarProps, type CalendarState, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, type CheckboxVariantsOptions, Combobox, type ComboboxAlign, ComboboxChip, type ComboboxChipProps, ComboboxChipRemove, type ComboboxChipRemoveProps, ComboboxChips, type ComboboxChipsProps, ComboboxClear, type ComboboxClearProps, ComboboxCollection, type ComboboxCollectionProps, ComboboxGroup, ComboboxGroupLabel, type ComboboxGroupLabelProps, type ComboboxGroupProps, ComboboxInput, ComboboxInputGroup, type ComboboxInputGroupProps, type ComboboxInputGroupVariantsOptions, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, ComboboxLabel, type ComboboxLabelProps, ComboboxPopup, type ComboboxPopupProps, type ComboboxProps, ComboboxSeparator, type ComboboxSeparatorProps, type ComboboxSize, ComboboxTrigger, type ComboboxTriggerProps, type ComboboxTriggerSize, type ComboboxTriggerVariant, ComboboxValue, type ComboboxValueProps, ContextMenu, type ContextMenuAlign, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuGroup, ContextMenuGroupLabel, type ContextMenuGroupLabelProps, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemProps, type ContextMenuItemVariant, ContextMenuLinkItem, type ContextMenuLinkItemProps, ContextMenuPopup, type ContextMenuPopupProps, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuShortcut, type ContextMenuShortcutProps, type ContextMenuSide, ContextMenuSubmenuRoot, type ContextMenuSubmenuRootProps, ContextMenuSubmenuTrigger, type ContextMenuSubmenuTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DatePicker, type DatePickerCalendarProps, type DatePickerPopupProps, type DatePickerProps, type DatePickerSize, type DatePickerVariant, type DatePickerVariantsOptions, DateRangePicker, type DateRangePickerCalendarProps, type DateRangePickerPopupProps, type DateRangePickerProps, type DateRangePickerSize, type DateRangePickerVariant, type DateRangePickerVariantsOptions, Dialog, DialogClose, type DialogCloseProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogPopup, type DialogPopupProps, type DialogPopupVariantsOptions, type DialogProps, type DialogScrollBehavior, type DialogSize, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Divider, type DividerLabelPosition, type DividerOrientation, type DividerProps, type DividerVariant, type DividerVariantsOptions, Drawer, DrawerClose, type DrawerCloseProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerIndent, DrawerIndentBackground, type DrawerIndentBackgroundProps, type DrawerIndentProps, DrawerPopup, type DrawerPopupProps, type DrawerPopupVariantsOptions, type DrawerProps, DrawerProvider, type DrawerSide, type DrawerSize, DrawerSwipeArea, type DrawerSwipeAreaProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, DrawerVirtualKeyboardProvider, Field, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldItem, type FieldItemProps, FieldLabel, type FieldLabelProps, type FieldLabelVariantsOptions, type FieldOrientation, type FieldProps, FieldValidity, type FieldValidityProps, Fieldset, FieldsetDescription, type FieldsetDescriptionProps, FieldsetLegend, type FieldsetLegendProps, type FieldsetLegendVariant, type FieldsetProps, Form, type FormProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, type InputProps, type InputSize, type InputVariantsOptions, Menu, type MenuAlign, MenuCheckboxItem, type MenuCheckboxItemProps, MenuGroup, MenuGroupLabel, type MenuGroupLabelProps, type MenuGroupProps, type MenuHandle, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuItemVariantsOptions, MenuLinkItem, type MenuLinkItemProps, MenuPopup, type MenuPopupProps, type MenuProps, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuSeparator, type MenuSeparatorProps, MenuShortcut, type MenuShortcutProps, type MenuSide, MenuSubmenuRoot, type MenuSubmenuRootProps, MenuSubmenuTrigger, type MenuSubmenuTriggerProps, MenuTrigger, type MenuTriggerProps, Meter, type MeterIndicatorVariantsOptions, type MeterProps, type MeterSize, type MeterTrackVariantsOptions, type MeterVariant, Popover, type PopoverAlign, PopoverClose, type PopoverCloseProps, PopoverDescription, type PopoverDescriptionProps, type PopoverHandle, PopoverPopup, type PopoverPopupProps, type PopoverPopupVariantsOptions, type PopoverProps, type PopoverSide, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressIndicatorVariantsOptions, type ProgressProps, type ProgressSize, type ProgressTrackVariantsOptions, type ProgressVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadioSize, type RadioVariantsOptions, Select, type SelectAlign, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, SelectPopup, type SelectPopupProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, type SelectTriggerSize, type SelectTriggerVariant, type SelectTriggerVariantsOptions, SelectValue, type SelectValueProps, Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonRenderState, type SkeletonVariant, type SkeletonVariantsOptions, Stepper, StepperDescription, type StepperDescriptionProps, StepperIndicator, type StepperIndicatorProps, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StepperSeparator, type StepperSeparatorProps, type StepperSize, StepperTitle, type StepperTitleProps, StepperTrigger, type StepperTriggerProps, type StepperTriggerVariantsOptions, Switch, type SwitchLabelPosition, type SwitchProps, type SwitchSize, type SwitchVariantsOptions, SystemState, type SystemStateBackground, type SystemStateProps, type SystemStateRenderState, type SystemStateScope, type SystemStateTitleLevel, type SystemStateVariant, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, type TableCaptionRenderState, type TableCaptionSide, TableCell, type TableCellProps, TableContainer, type TableContainerProps, type TableContainerRenderState, type TableContainerVariant, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableLayout, type TableProps, type TableRenderState, TableRow, type TableRowProps, type TableRowRenderState, type TableSize, Tabs, type TabsIndicatorPosition, TabsList, type TabsListProps, type TabsListVariantsOptions, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, TabsTab, type TabsTabProps, type TabsTabVariantsOptions, type TabsVariant, Timeline, TimelineConnector, type TimelineConnectorProps, TimelineContent, type TimelineContentProps, TimelineDescription, type TimelineDescriptionProps, TimelineIndicator, type TimelineIndicatorAppearance, type TimelineIndicatorProps, type TimelineIndicatorVariant, TimelineItem, type TimelineItemProps, type TimelineProps, TimelineSeparator, type TimelineSeparatorProps, type TimelineSeparatorVariant, type TimelineSize, TimelineTime, type TimelineTimeProps, TimelineTitle, type TimelineTitleProps, type ToastData, type ToastManager, type ToastObject, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastType, type ToastUpdateOptions, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type ToggleSize, type ToggleVariant, type ToggleVariantsOptions, Tooltip, type TooltipAlign, type TooltipHandle, TooltipPopup, type TooltipPopupProps, type TooltipPopupVariantsOptions, type TooltipProps, TooltipProvider, type TooltipProviderProps, type TooltipSide, TooltipTrigger, type TooltipTriggerProps, Typography, type TypographyProps, type TypographyVariant, type TypographyVariantsOptions, alertDialogPopupVariants, alertVariants, avatarVariants, badgeVariants, boxVariants, breadcrumbLinkVariants, buttonVariants, checkboxVariants, cn, comboboxInputGroupVariants, createAlertDialogHandle, createDrawerHandle, createMenuHandle, createPopoverHandle, createToastManager, createTooltipHandle, datePickerVariants, dateRangePickerVariants, dialogPopupVariants, dividerVariants, drawerPopupVariants, fieldLabelVariants, inputVariants, menuItemVariants, meterIndicatorVariants, meterTrackVariants, popoverPopupVariants, progressIndicatorVariants, progressTrackVariants, radioVariants, selectTriggerVariants, skeletonVariants, stepperTriggerVariants, switchVariants, tabsListVariants, tabsTabVariants, toast, toggleVariants, tooltipPopupVariants, typographyVariants, useComboboxFilter, useComboboxFilteredItems, useFieldControl };
+export { AILoader, type AILoaderProps, type AILoaderRenderState, type AILoaderSize, type AILoaderState, type AILoaderTone, Accordion, type AccordionChevronPosition, AccordionHeader, type AccordionHeaderProps, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, Alert, type AlertAppearance, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogPopup, type AlertDialogPopupProps, type AlertDialogPopupVariantsOptions, type AlertDialogProps, type AlertDialogScrollBehavior, type AlertDialogSize, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, type AlertVariant, type AlertVariantsOptions, Avatar, AvatarBadge, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarVariantsOptions, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeVariant, type BadgeVariantsOptions, Box, type BoxBackground, type BoxPadding, type BoxProps, type BoxRadius, type BoxShadow, type BoxVariantsOptions, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbLinkVariantsOptions, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantsOptions, Calendar, type CalendarDateRange, type CalendarMode, type CalendarProps, type CalendarState, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, type CheckboxVariantsOptions, CodeBlock, type CodeBlockProps, type CodeBlockVariantsOptions, Combobox, type ComboboxAlign, ComboboxChip, type ComboboxChipProps, ComboboxChipRemove, type ComboboxChipRemoveProps, ComboboxChips, type ComboboxChipsProps, ComboboxClear, type ComboboxClearProps, ComboboxCollection, type ComboboxCollectionProps, ComboboxGroup, ComboboxGroupLabel, type ComboboxGroupLabelProps, type ComboboxGroupProps, ComboboxInput, ComboboxInputGroup, type ComboboxInputGroupProps, type ComboboxInputGroupVariantsOptions, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, ComboboxLabel, type ComboboxLabelProps, ComboboxPopup, type ComboboxPopupProps, type ComboboxProps, ComboboxSeparator, type ComboboxSeparatorProps, type ComboboxSize, ComboboxTrigger, type ComboboxTriggerProps, type ComboboxTriggerSize, type ComboboxTriggerVariant, ComboboxValue, type ComboboxValueProps, ContextMenu, type ContextMenuAlign, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuGroup, ContextMenuGroupLabel, type ContextMenuGroupLabelProps, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemProps, type ContextMenuItemVariant, ContextMenuLinkItem, type ContextMenuLinkItemProps, ContextMenuPopup, type ContextMenuPopupProps, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuShortcut, type ContextMenuShortcutProps, type ContextMenuSide, ContextMenuSubmenuRoot, type ContextMenuSubmenuRootProps, ContextMenuSubmenuTrigger, type ContextMenuSubmenuTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DatePicker, type DatePickerCalendarProps, type DatePickerPopupProps, type DatePickerProps, type DatePickerSize, type DatePickerVariant, type DatePickerVariantsOptions, DateRangePicker, type DateRangePickerCalendarProps, type DateRangePickerPopupProps, type DateRangePickerProps, type DateRangePickerSize, type DateRangePickerVariant, type DateRangePickerVariantsOptions, Dialog, DialogClose, type DialogCloseProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogPopup, type DialogPopupProps, type DialogPopupVariantsOptions, type DialogProps, type DialogScrollBehavior, type DialogSize, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Divider, type DividerLabelPosition, type DividerOrientation, type DividerProps, type DividerVariant, type DividerVariantsOptions, Drawer, DrawerClose, type DrawerCloseProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerIndent, DrawerIndentBackground, type DrawerIndentBackgroundProps, type DrawerIndentProps, DrawerPopup, type DrawerPopupProps, type DrawerPopupVariantsOptions, type DrawerProps, DrawerProvider, type DrawerSide, type DrawerSize, DrawerSwipeArea, type DrawerSwipeAreaProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, DrawerVirtualKeyboardProvider, Field, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldItem, type FieldItemProps, FieldLabel, type FieldLabelProps, type FieldLabelVariantsOptions, type FieldOrientation, type FieldProps, FieldValidity, type FieldValidityProps, Fieldset, FieldsetDescription, type FieldsetDescriptionProps, FieldsetLegend, type FieldsetLegendProps, type FieldsetLegendVariant, type FieldsetProps, Form, type FormProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, type InputProps, type InputSize, type InputVariantsOptions, Menu, type MenuAlign, MenuCheckboxItem, type MenuCheckboxItemProps, MenuGroup, MenuGroupLabel, type MenuGroupLabelProps, type MenuGroupProps, type MenuHandle, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuItemVariantsOptions, MenuLinkItem, type MenuLinkItemProps, MenuPopup, type MenuPopupProps, type MenuProps, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuSeparator, type MenuSeparatorProps, MenuShortcut, type MenuShortcutProps, type MenuSide, MenuSubmenuRoot, type MenuSubmenuRootProps, MenuSubmenuTrigger, type MenuSubmenuTriggerProps, MenuTrigger, type MenuTriggerProps, Meter, type MeterIndicatorVariantsOptions, type MeterProps, type MeterSize, type MeterTrackVariantsOptions, type MeterVariant, Popover, type PopoverAlign, PopoverClose, type PopoverCloseProps, PopoverDescription, type PopoverDescriptionProps, type PopoverHandle, PopoverPopup, type PopoverPopupProps, type PopoverPopupVariantsOptions, type PopoverProps, type PopoverSide, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressIndicatorVariantsOptions, type ProgressProps, type ProgressSize, type ProgressTrackVariantsOptions, type ProgressVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadioSize, type RadioVariantsOptions, Select, type SelectAlign, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, SelectPopup, type SelectPopupProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, type SelectTriggerSize, type SelectTriggerVariant, type SelectTriggerVariantsOptions, SelectValue, type SelectValueProps, Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonRenderState, type SkeletonVariant, type SkeletonVariantsOptions, Stepper, StepperDescription, type StepperDescriptionProps, StepperIndicator, type StepperIndicatorProps, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StepperSeparator, type StepperSeparatorProps, type StepperSize, StepperTitle, type StepperTitleProps, StepperTrigger, type StepperTriggerProps, type StepperTriggerVariantsOptions, Switch, type SwitchLabelPosition, type SwitchProps, type SwitchSize, type SwitchVariantsOptions, SystemState, type SystemStateBackground, type SystemStateProps, type SystemStateRenderState, type SystemStateScope, type SystemStateTitleLevel, type SystemStateVariant, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, type TableCaptionRenderState, type TableCaptionSide, TableCell, type TableCellProps, TableContainer, type TableContainerProps, type TableContainerRenderState, type TableContainerVariant, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableLayout, type TableProps, type TableRenderState, TableRow, type TableRowProps, type TableRowRenderState, type TableSize, Tabs, type TabsIndicatorPosition, TabsList, type TabsListProps, type TabsListVariantsOptions, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, TabsTab, type TabsTabProps, type TabsTabVariantsOptions, type TabsVariant, Timeline, TimelineConnector, type TimelineConnectorProps, TimelineContent, type TimelineContentProps, TimelineDescription, type TimelineDescriptionProps, TimelineIndicator, type TimelineIndicatorAppearance, type TimelineIndicatorProps, type TimelineIndicatorVariant, TimelineItem, type TimelineItemProps, type TimelineProps, TimelineSeparator, type TimelineSeparatorProps, type TimelineSeparatorVariant, type TimelineSize, TimelineTime, type TimelineTimeProps, TimelineTitle, type TimelineTitleProps, type ToastData, type ToastManager, type ToastObject, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastType, type ToastUpdateOptions, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type ToggleSize, type ToggleVariant, type ToggleVariantsOptions, Tooltip, type TooltipAlign, type TooltipHandle, TooltipPopup, type TooltipPopupProps, type TooltipPopupVariantsOptions, type TooltipProps, TooltipProvider, type TooltipProviderProps, type TooltipSide, TooltipTrigger, type TooltipTriggerProps, Typography, type TypographyProps, type TypographyVariant, type TypographyVariantsOptions, alertDialogPopupVariants, alertVariants, avatarVariants, badgeVariants, boxVariants, breadcrumbLinkVariants, buttonVariants, checkboxVariants, cn, codeBlockVariants, comboboxInputGroupVariants, createAlertDialogHandle, createDrawerHandle, createMenuHandle, createPopoverHandle, createToastManager, createTooltipHandle, datePickerVariants, dateRangePickerVariants, dialogPopupVariants, dividerVariants, drawerPopupVariants, fieldLabelVariants, inputVariants, menuItemVariants, meterIndicatorVariants, meterTrackVariants, popoverPopupVariants, progressIndicatorVariants, progressTrackVariants, radioVariants, selectTriggerVariants, skeletonVariants, stepperTriggerVariants, switchVariants, tabsListVariants, tabsTabVariants, toast, toggleVariants, tooltipPopupVariants, typographyVariants, useComboboxFilter, useComboboxFilteredItems, useFieldControl };

package/dist/index.js

@@ -11,6 +11,7 @@ import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, Breadcr
 import { Button, buttonVariants } from "./components/Button/Button.js";
 import { Calendar } from "./components/Calendar/Calendar.js";
 import { Checkbox, CheckboxGroup, checkboxVariants } from "./components/Checkbox/Checkbox.js";
+import { CodeBlock, codeBlockVariants } from "./components/CodeBlock/CodeBlock.js";
 import { useFieldControl } from "./components/Field/FieldContext.js";
 import { Input, InputGroup, InputGroupAddon, inputVariants } from "./components/Input/Input.js";
 import { Select, SelectGroup, SelectGroupLabel, SelectItem, SelectLabel, SelectPopup, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants } from "./components/Select/Select.js";
@@ -39,4 +40,4 @@ import { Toaster, createToastManager, toast } from "./components/Toast/Toast.js"
 import { Toggle, ToggleGroup, toggleVariants } from "./components/Toggle/Toggle.js";
 import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, createTooltipHandle, tooltipPopupVariants } from "./components/Tooltip/Tooltip.js";
 import { Typography, typographyVariants } from "./components/Typography/Typography.js";
-export { AILoader, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarImage, Badge, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Checkbox, CheckboxGroup, Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxLabel, ComboboxPopup, ComboboxSeparator, ComboboxTrigger, ComboboxValue, ContextMenu, ContextMenuCheckboxItem, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuLinkItem, ContextMenuPopup, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSubmenuRoot, ContextMenuSubmenuTrigger, ContextMenuTrigger, DatePicker, DateRangePicker, Dialog, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogTitle, DialogTrigger, Divider, Drawer, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerIndent, DrawerIndentBackground, DrawerPopup, DrawerProvider, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerVirtualKeyboardProvider, Field, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Fieldset, FieldsetDescription, FieldsetLegend, Form, Input, InputGroup, InputGroupAddon, Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSubmenuRoot, MenuSubmenuTrigger, MenuTrigger, Meter, Popover, PopoverClose, PopoverDescription, PopoverPopup, PopoverTitle, PopoverTrigger, Progress, Radio, RadioGroup, Select, SelectGroup, SelectGroupLabel, SelectItem, SelectLabel, SelectPopup, SelectSeparator, SelectTrigger, SelectValue, Skeleton, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, Switch, SystemState, Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsList, TabsPanel, TabsTab, Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTime, TimelineTitle, Toaster, Toggle, ToggleGroup, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, Typography, alertDialogPopupVariants, alertVariants, avatarVariants, badgeVariants, boxVariants, breadcrumbLinkVariants, buttonVariants, checkboxVariants, cn, comboboxInputGroupVariants, createAlertDialogHandle, createDrawerHandle, createMenuHandle, createPopoverHandle, createToastManager, createTooltipHandle, datePickerVariants, dateRangePickerVariants, dialogPopupVariants, dividerVariants, drawerPopupVariants, fieldLabelVariants, inputVariants, menuItemVariants, meterIndicatorVariants, meterTrackVariants, popoverPopupVariants, progressIndicatorVariants, progressTrackVariants, radioVariants, selectTriggerVariants, skeletonVariants, stepperTriggerVariants, switchVariants, tabsListVariants, tabsTabVariants, toast, toggleVariants, tooltipPopupVariants, typographyVariants, useComboboxFilter, useComboboxFilteredItems, useFieldControl };
+export { AILoader, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarImage, Badge, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Checkbox, CheckboxGroup, CodeBlock, Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxLabel, ComboboxPopup, ComboboxSeparator, ComboboxTrigger, ComboboxValue, ContextMenu, ContextMenuCheckboxItem, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuLinkItem, ContextMenuPopup, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSubmenuRoot, ContextMenuSubmenuTrigger, ContextMenuTrigger, DatePicker, DateRangePicker, Dialog, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogTitle, DialogTrigger, Divider, Drawer, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerIndent, DrawerIndentBackground, DrawerPopup, DrawerProvider, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerVirtualKeyboardProvider, Field, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Fieldset, FieldsetDescription, FieldsetLegend, Form, Input, InputGroup, InputGroupAddon, Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSubmenuRoot, MenuSubmenuTrigger, MenuTrigger, Meter, Popover, PopoverClose, PopoverDescription, PopoverPopup, PopoverTitle, PopoverTrigger, Progress, Radio, RadioGroup, Select, SelectGroup, SelectGroupLabel, SelectItem, SelectLabel, SelectPopup, SelectSeparator, SelectTrigger, SelectValue, Skeleton, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, Switch, SystemState, Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsList, TabsPanel, TabsTab, Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTime, TimelineTitle, Toaster, Toggle, ToggleGroup, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, Typography, alertDialogPopupVariants, alertVariants, avatarVariants, badgeVariants, boxVariants, breadcrumbLinkVariants, buttonVariants, checkboxVariants, cn, codeBlockVariants, comboboxInputGroupVariants, createAlertDialogHandle, createDrawerHandle, createMenuHandle, createPopoverHandle, createToastManager, createTooltipHandle, datePickerVariants, dateRangePickerVariants, dialogPopupVariants, dividerVariants, drawerPopupVariants, fieldLabelVariants, inputVariants, menuItemVariants, meterIndicatorVariants, meterTrackVariants, popoverPopupVariants, progressIndicatorVariants, progressTrackVariants, radioVariants, selectTriggerVariants, skeletonVariants, stepperTriggerVariants, switchVariants, tabsListVariants, tabsTabVariants, toast, toggleVariants, tooltipPopupVariants, typographyVariants, useComboboxFilter, useComboboxFilteredItems, useFieldControl };

package/dist/lib/cn.js

@@ -1,6 +1,7 @@
 import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
 //#region src/lib/cn.ts
+const twMerge = extendTailwindMerge({ extend: { classGroups: { "font-family": [{ font: ["code"] }] } } });
 /** Merge class names with Tailwind-aware conflict resolution. */
 function cn(...inputs) {
 	return twMerge(clsx(inputs));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcfusionz/arc-primitive-ui",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "description": "ArcFusion primitive UI components",
   "license": "MIT",
   "type": "module",

package/src/styles/theme.css

@@ -24,13 +24,17 @@
    * Typography
    * Headline: Poppins ("friendly but geometric") · Body/UI: Inter
    * Formal documents: Noto Serif · Thai pairing: Noto Sans Thai / Sarabun
-   * Note: the brand does not use a monospace family; Tailwind's default
-   * mono token is removed on purpose.
+   * Note: the brand ships no general monospace family — Tailwind's `font-mono`
+   * token stays disabled, and code-adjacent UI (kbd chips, inline code) uses
+   * `font-sans`. The one exception is the Code Block primitive, whose source
+   * needs true column alignment: `--font-code` provides a SYSTEM monospace
+   * stack (no web font is downloaded) surfaced only as the `font-code` utility.
    * ------------------------------------------------------------------- */
   --font-sans: "Inter", "Sarabun", ui-sans-serif, system-ui, sans-serif;
   --font-heading: "Poppins", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
   --font-serif: "Noto Serif", Georgia, serif;
   --font-mono: initial;
+  --font-code: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
 
   /* ---------------------------------------------------------------------
    * Radius
@@ -318,6 +322,23 @@
      overlays fade the whole layer via opacity without restating the color. */
   --color-overlay: color-mix(in oklab, var(--color-slate-950) 50%, transparent);
 
+  /* Code surfaces are always dark — the brand's Slate 900, independent of the
+     surrounding light UI (the conventional treatment for source listings).
+     The paired foreground is near-white and clears WCAG AA at body-size code. */
+  --color-code: var(--color-slate-900);
+  --color-code-foreground: var(--color-slate-100);
+
+  /* SQL syntax palette (Code Block's built-in highlighter). Each hue is a light
+     ramp step so it clears WCAG AA (>= 6.5:1) on the dark `code` surface;
+     identifiers keep `code-foreground`. Only SQL is highlighted in-house —
+     other languages render plain unless the consumer passes highlighted nodes. */
+  --color-code-keyword: var(--color-navy-300);
+  --color-code-function: var(--color-primary-300);
+  --color-code-string: var(--color-success-300);
+  --color-code-number: var(--color-warning-300);
+  --color-code-comment: var(--color-slate-400);
+  --color-code-punctuation: var(--color-slate-300);
+
   --color-primary: var(--color-primary-600);
   --color-primary-foreground: #ffffff;