@usefragments/ui 1.6.0 → 2.0.0

package/dist/blocks/components/StatsCard.d.ts

@@ -7,7 +7,7 @@ export interface StatsCardProps {
     /** Change indicator text (e.g., "+12.5%") */
     change?: string;
     /** Semantic variant for the change badge */
-    changeVariant?: 'success' | 'warning' | 'error';
+    changeTone?: 'success' | 'warning' | 'danger';
     /** Optional icon rendered in the top-right corner */
     icon?: React.ReactNode;
     /** Additional CSS class name */

package/dist/blocks/components/StatsCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatsCard.d.ts","sourceRoot":"","sources":["../../../src/blocks/components/StatsCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,cAAc;IAC7B,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAChD,qDAAqD;IACrD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,eAAO,MAAM,SAAS,uFA8CrB,CAAC"}
+{"version":3,"file":"StatsCard.d.ts","sourceRoot":"","sources":["../../../src/blocks/components/StatsCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,cAAc;IAC7B,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC9C,qDAAqD;IACrD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,eAAO,MAAM,SAAS,uFA8CrB,CAAC"}

package/dist/chart.cjs

@@ -27,6 +27,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const aria = require("./utils/aria.cjs");
 const Chart_module = require("./components/Chart/Chart.module.scss.cjs");
+const env = require("./utils/env.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -57,7 +58,7 @@ function loadChartDeps() {
         _RechartsLegend = rc.Legend;
       } catch {
         _chartFailed = true;
-        if (process.env.NODE_ENV === "development") {
+        if (env.isDevelopmentBuild()) {
           console.warn(
             "[@usefragments/ui] Chart: recharts is not installed. Install it with: npm install recharts"
           );
@@ -101,6 +102,24 @@ function ChartContainer({
   ...htmlProps
 }) {
   const chartId = React__namespace.useId();
+  const frameRef = React__namespace.useRef(null);
+  const [frame, setFrame] = React__namespace.useState(null);
+  React__namespace.useEffect(() => {
+    const element = frameRef.current;
+    if (!element || typeof ResizeObserver === "undefined") return;
+    const measure = () => {
+      const rect = element.getBoundingClientRect();
+      const width = Math.round(rect.width);
+      const height = Math.round(rect.height);
+      setFrame(
+        (current) => current && current.width === width && current.height === height ? current : { width, height }
+      );
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
   const summaryId = summary ? `chart-summary-${chartId}` : void 0;
   const dataTableId = dataTable ? `chart-data-${chartId}` : void 0;
   const cssVars = React__namespace.useMemo(() => {
@@ -111,11 +130,9 @@ function ChartContainer({
     return vars;
   }, [config]);
   const rootClasses = [Chart_module.default.container, className].filter(Boolean).join(" ");
-  const chartChildProps = {
-    width: "100%",
-    height: "100%"
-  };
-  if (typeof children.type !== "string") {
+  const measured = frame !== null && frame.width > 0 && frame.height > 0;
+  const chartChildProps = measured ? { width: frame.width, height: frame.height } : { width: "100%", height: "100%" };
+  if (!measured && typeof children.type !== "string") {
     chartChildProps.responsive = true;
   }
   const chartChild = React__namespace.cloneElement(
@@ -126,6 +143,7 @@ function ChartContainer({
     "div",
     {
       ...htmlProps,
+      ref: frameRef,
       className: rootClasses,
       style: { ...cssVars, ...style },
       role: "img",

package/dist/chart.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { mergeAriaIds } from "./utils/aria.js";
 import styles from "./components/Chart/Chart.module.scss.js";
+import { isDevelopmentBuild } from "./utils/env.js";
 let _RechartsTooltip = null;
 let _RechartsLegend = null;
 let _chartLoadPromise = null;
@@ -16,7 +17,7 @@ function loadChartDeps() {
         _RechartsLegend = rc.Legend;
       } catch {
         _chartFailed = true;
-        if (process.env.NODE_ENV === "development") {
+        if (isDevelopmentBuild()) {
           console.warn(
             "[@usefragments/ui] Chart: recharts is not installed. Install it with: npm install recharts"
           );
@@ -60,6 +61,24 @@ function ChartContainer({
   ...htmlProps
 }) {
   const chartId = React.useId();
+  const frameRef = React.useRef(null);
+  const [frame, setFrame] = React.useState(null);
+  React.useEffect(() => {
+    const element = frameRef.current;
+    if (!element || typeof ResizeObserver === "undefined") return;
+    const measure = () => {
+      const rect = element.getBoundingClientRect();
+      const width = Math.round(rect.width);
+      const height = Math.round(rect.height);
+      setFrame(
+        (current) => current && current.width === width && current.height === height ? current : { width, height }
+      );
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
   const summaryId = summary ? `chart-summary-${chartId}` : void 0;
   const dataTableId = dataTable ? `chart-data-${chartId}` : void 0;
   const cssVars = React.useMemo(() => {
@@ -70,11 +89,9 @@ function ChartContainer({
     return vars;
   }, [config]);
   const rootClasses = [styles.container, className].filter(Boolean).join(" ");
-  const chartChildProps = {
-    width: "100%",
-    height: "100%"
-  };
-  if (typeof children.type !== "string") {
+  const measured = frame !== null && frame.width > 0 && frame.height > 0;
+  const chartChildProps = measured ? { width: frame.width, height: frame.height } : { width: "100%", height: "100%" };
+  if (!measured && typeof children.type !== "string") {
     chartChildProps.responsive = true;
   }
   const chartChild = React.cloneElement(
@@ -85,6 +102,7 @@ function ChartContainer({
     "div",
     {
       ...htmlProps,
+      ref: frameRef,
       className: rootClasses,
       style: { ...cssVars, ...style },
       role: "img",

package/dist/codeblock.cjs

@@ -25,8 +25,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const index = require("./components/Tabs/index.cjs");
+const index$1 = require("./components/Button/index.cjs");
+const index = require("./components/IconButton/index.cjs");
+const index$2 = require("./components/Tabs/index.cjs");
+const cssVariablesTheme = require("./components/CodeBlock/css-variables-theme.cjs");
 const CodeBlock_module = require("./components/CodeBlock/CodeBlock.module.scss.cjs");
+const env = require("./utils/env.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -361,19 +365,21 @@ function processShikiHtml(html, options) {
     if (isRemoved) lineClasses.push("diff-removed");
     const lineClass = lineClasses.join(" ");
     const diffMarker = isAdded ? "+" : isRemoved ? "-" : " ";
-    if (showLineNumbers || hasDiff) {
-      const lineNumHtml = showLineNumbers ? `<span class="line-number">${displayLineNum}</span>` : "";
-      const diffMarkerHtml = hasDiff ? `<span class="diff-marker">${diffMarker}</span>` : "";
-      return `<span class="${lineClass}">${lineNumHtml}${diffMarkerHtml}${line}</span>`;
+    const lineNumHtml = showLineNumbers || hasDiff ? `${showLineNumbers ? `<span class="line-number">${displayLineNum}</span>` : ""}${hasDiff ? `<span class="diff-marker">${diffMarker}</span>` : ""}` : "";
+    if (/^<span class="line([^"]*)">/.test(line)) {
+      return line.replace(
+        /^<span class="line([^"]*)">/,
+        `<span class="${lineClass}$1">${lineNumHtml}`
+      );
     }
-    return `<span class="${lineClass}">${line}</span>`;
+    return `<span class="${lineClass}">${lineNumHtml}${line}</span>`;
   });
   return html.replace(/<code[^>]*>[\s\S]*?<\/code>/, `<code>${processedLines.join("\n")}</code>`);
 }
 const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
   code,
   language = "tsx",
-  theme = "one-dark-pro",
+  theme = "css-variables",
   showCopy = true,
   title,
   filename,
@@ -388,6 +394,7 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
   collapsible = false,
   defaultCollapsed = false,
   collapsedLines = 5,
+  collapseAction = "lines",
   compact = false,
   persistentCopy = false,
   copyPlacement = "auto",
@@ -397,7 +404,10 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
   ...htmlProps
 }, ref) {
   const [copied, setCopied] = React.useState(false);
-  const [highlight, setHighlight] = React.useState({ html: "", loading: true });
+  const [highlight, setHighlight] = React.useState({
+    html: "",
+    loading: true
+  });
   const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
   const trimmedCode = React.useMemo(() => normalizeCode(code, language), [code, language]);
   const codeLines = trimmedCode.split("\n");
@@ -419,7 +429,7 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
       await loadShikiDeps();
       const fallbackHtml = `<pre class="shiki"><code>${escapeHtml(visibleCode)}</code></pre>`;
       if (_shikiFailed || !_codeToHtml) {
-        if (_shikiFailed && process.env.NODE_ENV === "development") {
+        if (_shikiFailed && env.isDevelopmentBuild()) {
           console.warn(
             "[@usefragments/ui] CodeBlock: shiki is not installed. Install it with: npm install shiki"
           );
@@ -428,7 +438,8 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
       }
       try {
         const resolvedLang = LANGUAGE_ALIASES[language] || language;
-        const html = await _codeToHtml(visibleCode, { lang: resolvedLang, theme });
+        const shikiTheme = theme === "css-variables" ? cssVariablesTheme.FUI_CSS_VARIABLES_THEME : theme;
+        const html = await _codeToHtml(visibleCode, { lang: resolvedLang, theme: shikiTheme });
         return processShikiHtml(html, {
           showLineNumbers,
           startLineNumber,
@@ -437,7 +448,7 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
           removedLines: removedSet
         });
       } catch (err) {
-        if (process.env.NODE_ENV !== "production") {
+        if (!env.isProductionBuild()) {
           console.error("Syntax highlighting failed:", err);
         }
         return fallbackHtml;
@@ -468,7 +479,7 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
       setTimeout(() => setCopied(false), 2e3);
       onCopy == null ? void 0 : onCopy();
     } catch (err) {
-      if (process.env.NODE_ENV !== "production") {
+      if (!env.isProductionBuild()) {
         console.error("Failed to copy:", err);
       }
     }
@@ -491,15 +502,16 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
   ].filter(Boolean).join(" ");
   const codeContainerStyle = maxHeight ? { maxHeight, overflow: "auto" } : {};
   const wrapperStyle = bg ? { ["--fui-code-bg"]: bg } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, ...htmlProps, className: classNames, "data-theme": "dark", children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CodeBlock_module.default.title, children: title }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, style: wrapperStyle, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, ...htmlProps, className: classNames, "data-slot": "code-block", children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CodeBlock_module.default.title, "data-slot": "code-block-title", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, style: wrapperStyle, "data-slot": "code-block-frame", children: [
       shouldRenderHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CodeBlock_module.default.header, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: CodeBlock_module.default.filename, children: filename ?? "" }),
         shouldShowHeaderCopy && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          index.IconButton,
           {
-            type: "button",
+            variant: "ghost",
+            size: "sm",
             onClick: handleCopy,
             className: `${CodeBlock_module.default.copyButton} ${copied ? CodeBlock_module.default.copied : ""}`,
             "aria-label": copied ? "Copied!" : "Copy code",
@@ -508,9 +520,10 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
         )
       ] }),
       shouldShowOverlayCopy && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        index.IconButton,
         {
-          type: "button",
+          variant: "ghost",
+          size: "sm",
           onClick: handleCopy,
           className: `${CodeBlock_module.default.copyButton} ${CodeBlock_module.default.copyOverlay} ${copied ? CodeBlock_module.default.copied : ""}`,
           "aria-label": copied ? "Copied!" : "Copy code",
@@ -526,9 +539,10 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
         }
       ),
       persistentCopy && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        index.IconButton,
         {
-          type: "button",
+          variant: "ghost",
+          size: "sm",
           onClick: handleCopy,
           className: `${CodeBlock_module.default.persistentCopy} ${CodeBlock_module.default.copyButton} ${CodeBlock_module.default.copyOverlay} ${copied ? CodeBlock_module.default.copied : ""}`,
           "aria-label": copied ? "Copied!" : "Copy code",
@@ -536,14 +550,16 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
         }
       ),
       shouldShowCollapse && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        index$1.Button,
         {
-          type: "button",
+          variant: "ghost",
+          size: "sm",
+          fullWidth: true,
           onClick: toggleCollapsed,
-          className: CodeBlock_module.default.collapseButton,
+          className: collapseAction === "expand" ? `${CodeBlock_module.default.collapseButton} ${CodeBlock_module.default.collapseExpand}` : CodeBlock_module.default.collapseButton,
           "aria-expanded": !isCollapsed,
           "aria-label": isCollapsed ? "Expand code" : "Collapse code",
-          children: isCollapsed ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          children: collapseAction === "expand" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: isCollapsed ? "Expand" : "Collapse" }) : isCollapsed ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: CodeBlock_module.default.icon }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
               "Show ",
@@ -569,35 +585,52 @@ function TabbedCodeBlock({
   copyPlacement = "auto",
   showLineNumbers = false,
   theme,
-  tabsVariant = "pills",
+  tabsVariant = "soft",
   wordWrap,
   maxHeight,
+  collapsible,
+  defaultCollapsed,
+  collapsedLines,
+  collapseAction,
   className,
   onCopy
 }) {
   var _a, _b;
   const defaultValue = defaultTab || ((_a = tabs[0]) == null ? void 0 : _a.value) || ((_b = tabs[0]) == null ? void 0 : _b.label) || "";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsxs(index.TabsRoot, { defaultValue, value, onValueChange, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index.TabsList, { variant: tabsVariant, children: tabs.map((tab, index$1) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsxs(index$2.TabsRoot, { defaultValue, value, onValueChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$2.TabsList, { variant: tabsVariant, children: tabs.map((tab, index2) => {
       const tabValue = tab.value ?? tab.label;
-      return /* @__PURE__ */ jsxRuntime.jsx(index.Tab, { value: tabValue, children: tab.label }, `${tabValue}-${index$1}`);
+      return /* @__PURE__ */ jsxRuntime.jsx(index$2.Tab, { value: tabValue, children: tab.label }, `${tabValue}-${index2}`);
     }) }),
-    tabs.map((tab, index$1) => {
+    tabs.map((tab, index2) => {
       const tabValue = tab.value ?? tab.label;
-      return /* @__PURE__ */ jsxRuntime.jsx(index.TabsPanel, { value: tabValue, flush: true, className: CodeBlock_module.default.tabbedPanel, children: /* @__PURE__ */ jsxRuntime.jsx(
-        CodeBlockBase,
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        index$2.TabsPanel,
         {
-          code: tab.code,
-          language: tab.language,
-          theme,
-          showCopy,
-          copyPlacement,
-          showLineNumbers,
-          wordWrap,
-          maxHeight,
-          onCopy: onCopy ? () => onCopy(tab.label) : void 0
-        }
-      ) }, `${tabValue}-panel-${index$1}`);
+          value: tabValue,
+          flush: true,
+          className: CodeBlock_module.default.tabbedPanel,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            CodeBlockBase,
+            {
+              code: tab.code,
+              language: tab.language,
+              theme,
+              showCopy,
+              copyPlacement,
+              showLineNumbers,
+              wordWrap,
+              maxHeight,
+              collapsible,
+              defaultCollapsed,
+              collapsedLines,
+              collapseAction,
+              onCopy: onCopy ? () => onCopy(tab.label) : void 0
+            }
+          )
+        },
+        `${tabValue}-panel-${index2}`
+      );
     })
   ] }) });
 }

package/dist/codeblock.js

@@ -2,8 +2,12 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "./components/Button/index.js";
+import { IconButton } from "./components/IconButton/index.js";
 import { TabsRoot, TabsList, Tab, TabsPanel } from "./components/Tabs/index.js";
+import { FUI_CSS_VARIABLES_THEME } from "./components/CodeBlock/css-variables-theme.js";
 import styles from "./components/CodeBlock/CodeBlock.module.scss.js";
+import { isProductionBuild, isDevelopmentBuild } from "./utils/env.js";
 let _codeToHtml = null;
 let _shikiLoadPromise = null;
 let _shikiFailed = false;
@@ -321,19 +325,21 @@ function processShikiHtml(html, options) {
     if (isRemoved) lineClasses.push("diff-removed");
     const lineClass = lineClasses.join(" ");
     const diffMarker = isAdded ? "+" : isRemoved ? "-" : " ";
-    if (showLineNumbers || hasDiff) {
-      const lineNumHtml = showLineNumbers ? `<span class="line-number">${displayLineNum}</span>` : "";
-      const diffMarkerHtml = hasDiff ? `<span class="diff-marker">${diffMarker}</span>` : "";
-      return `<span class="${lineClass}">${lineNumHtml}${diffMarkerHtml}${line}</span>`;
+    const lineNumHtml = showLineNumbers || hasDiff ? `${showLineNumbers ? `<span class="line-number">${displayLineNum}</span>` : ""}${hasDiff ? `<span class="diff-marker">${diffMarker}</span>` : ""}` : "";
+    if (/^<span class="line([^"]*)">/.test(line)) {
+      return line.replace(
+        /^<span class="line([^"]*)">/,
+        `<span class="${lineClass}$1">${lineNumHtml}`
+      );
     }
-    return `<span class="${lineClass}">${line}</span>`;
+    return `<span class="${lineClass}">${lineNumHtml}${line}</span>`;
   });
   return html.replace(/<code[^>]*>[\s\S]*?<\/code>/, `<code>${processedLines.join("\n")}</code>`);
 }
 const CodeBlockBase = React.forwardRef(function CodeBlock2({
   code,
   language = "tsx",
-  theme = "one-dark-pro",
+  theme = "css-variables",
   showCopy = true,
   title,
   filename,
@@ -348,6 +354,7 @@ const CodeBlockBase = React.forwardRef(function CodeBlock2({
   collapsible = false,
   defaultCollapsed = false,
   collapsedLines = 5,
+  collapseAction = "lines",
   compact = false,
   persistentCopy = false,
   copyPlacement = "auto",
@@ -357,7 +364,10 @@ const CodeBlockBase = React.forwardRef(function CodeBlock2({
   ...htmlProps
 }, ref) {
   const [copied, setCopied] = useState(false);
-  const [highlight, setHighlight] = useState({ html: "", loading: true });
+  const [highlight, setHighlight] = useState({
+    html: "",
+    loading: true
+  });
   const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
   const trimmedCode = useMemo(() => normalizeCode(code, language), [code, language]);
   const codeLines = trimmedCode.split("\n");
@@ -379,7 +389,7 @@ const CodeBlockBase = React.forwardRef(function CodeBlock2({
       await loadShikiDeps();
       const fallbackHtml = `<pre class="shiki"><code>${escapeHtml(visibleCode)}</code></pre>`;
       if (_shikiFailed || !_codeToHtml) {
-        if (_shikiFailed && process.env.NODE_ENV === "development") {
+        if (_shikiFailed && isDevelopmentBuild()) {
           console.warn(
             "[@usefragments/ui] CodeBlock: shiki is not installed. Install it with: npm install shiki"
           );
@@ -388,7 +398,8 @@ const CodeBlockBase = React.forwardRef(function CodeBlock2({
       }
       try {
         const resolvedLang = LANGUAGE_ALIASES[language] || language;
-        const html = await _codeToHtml(visibleCode, { lang: resolvedLang, theme });
+        const shikiTheme = theme === "css-variables" ? FUI_CSS_VARIABLES_THEME : theme;
+        const html = await _codeToHtml(visibleCode, { lang: resolvedLang, theme: shikiTheme });
         return processShikiHtml(html, {
           showLineNumbers,
           startLineNumber,
@@ -397,7 +408,7 @@ const CodeBlockBase = React.forwardRef(function CodeBlock2({
           removedLines: removedSet
         });
       } catch (err) {
-        if (process.env.NODE_ENV !== "production") {
+        if (!isProductionBuild()) {
           console.error("Syntax highlighting failed:", err);
         }
         return fallbackHtml;
@@ -428,7 +439,7 @@ const CodeBlockBase = React.forwardRef(function CodeBlock2({
       setTimeout(() => setCopied(false), 2e3);
       onCopy == null ? void 0 : onCopy();
     } catch (err) {
-      if (process.env.NODE_ENV !== "production") {
+      if (!isProductionBuild()) {
         console.error("Failed to copy:", err);
       }
     }
@@ -451,15 +462,16 @@ const CodeBlockBase = React.forwardRef(function CodeBlock2({
   ].filter(Boolean).join(" ");
   const codeContainerStyle = maxHeight ? { maxHeight, overflow: "auto" } : {};
   const wrapperStyle = bg ? { ["--fui-code-bg"]: bg } : void 0;
-  return /* @__PURE__ */ jsxs("div", { ref, ...htmlProps, className: classNames, "data-theme": "dark", children: [
-    title && /* @__PURE__ */ jsx("div", { className: styles.title, children: title }),
-    /* @__PURE__ */ jsxs("div", { className: wrapperClasses, style: wrapperStyle, children: [
+  return /* @__PURE__ */ jsxs("div", { ref, ...htmlProps, className: classNames, "data-slot": "code-block", children: [
+    title && /* @__PURE__ */ jsx("div", { className: styles.title, "data-slot": "code-block-title", children: title }),
+    /* @__PURE__ */ jsxs("div", { className: wrapperClasses, style: wrapperStyle, "data-slot": "code-block-frame", children: [
       shouldRenderHeader && /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
         /* @__PURE__ */ jsx("span", { className: styles.filename, children: filename ?? "" }),
         shouldShowHeaderCopy && /* @__PURE__ */ jsx(
-          "button",
+          IconButton,
           {
-            type: "button",
+            variant: "ghost",
+            size: "sm",
             onClick: handleCopy,
             className: `${styles.copyButton} ${copied ? styles.copied : ""}`,
             "aria-label": copied ? "Copied!" : "Copy code",
@@ -468,9 +480,10 @@ const CodeBlockBase = React.forwardRef(function CodeBlock2({
         )
       ] }),
       shouldShowOverlayCopy && /* @__PURE__ */ jsx(
-        "button",
+        IconButton,
         {
-          type: "button",
+          variant: "ghost",
+          size: "sm",
           onClick: handleCopy,
           className: `${styles.copyButton} ${styles.copyOverlay} ${copied ? styles.copied : ""}`,
           "aria-label": copied ? "Copied!" : "Copy code",
@@ -486,9 +499,10 @@ const CodeBlockBase = React.forwardRef(function CodeBlock2({
         }
       ),
       persistentCopy && /* @__PURE__ */ jsx(
-        "button",
+        IconButton,
         {
-          type: "button",
+          variant: "ghost",
+          size: "sm",
           onClick: handleCopy,
           className: `${styles.persistentCopy} ${styles.copyButton} ${styles.copyOverlay} ${copied ? styles.copied : ""}`,
           "aria-label": copied ? "Copied!" : "Copy code",
@@ -496,14 +510,16 @@ const CodeBlockBase = React.forwardRef(function CodeBlock2({
         }
       ),
       shouldShowCollapse && /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
-          type: "button",
+          variant: "ghost",
+          size: "sm",
+          fullWidth: true,
           onClick: toggleCollapsed,
-          className: styles.collapseButton,
+          className: collapseAction === "expand" ? `${styles.collapseButton} ${styles.collapseExpand}` : styles.collapseButton,
           "aria-expanded": !isCollapsed,
           "aria-label": isCollapsed ? "Expand code" : "Collapse code",
-          children: isCollapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          children: collapseAction === "expand" ? /* @__PURE__ */ jsx("span", { children: isCollapsed ? "Expand" : "Collapse" }) : isCollapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(ChevronDownIcon, { className: styles.icon }),
             /* @__PURE__ */ jsxs("span", { children: [
               "Show ",
@@ -529,9 +545,13 @@ function TabbedCodeBlock({
   copyPlacement = "auto",
   showLineNumbers = false,
   theme,
-  tabsVariant = "pills",
+  tabsVariant = "soft",
   wordWrap,
   maxHeight,
+  collapsible,
+  defaultCollapsed,
+  collapsedLines,
+  collapseAction,
   className,
   onCopy
 }) {
@@ -544,20 +564,33 @@ function TabbedCodeBlock({
     }) }),
     tabs.map((tab, index) => {
       const tabValue = tab.value ?? tab.label;
-      return /* @__PURE__ */ jsx(TabsPanel, { value: tabValue, flush: true, className: styles.tabbedPanel, children: /* @__PURE__ */ jsx(
-        CodeBlockBase,
+      return /* @__PURE__ */ jsx(
+        TabsPanel,
         {
-          code: tab.code,
-          language: tab.language,
-          theme,
-          showCopy,
-          copyPlacement,
-          showLineNumbers,
-          wordWrap,
-          maxHeight,
-          onCopy: onCopy ? () => onCopy(tab.label) : void 0
-        }
-      ) }, `${tabValue}-panel-${index}`);
+          value: tabValue,
+          flush: true,
+          className: styles.tabbedPanel,
+          children: /* @__PURE__ */ jsx(
+            CodeBlockBase,
+            {
+              code: tab.code,
+              language: tab.language,
+              theme,
+              showCopy,
+              copyPlacement,
+              showLineNumbers,
+              wordWrap,
+              maxHeight,
+              collapsible,
+              defaultCollapsed,
+              collapsedLines,
+              collapseAction,
+              onCopy: onCopy ? () => onCopy(tab.label) : void 0
+            }
+          )
+        },
+        `${tabValue}-panel-${index}`
+      );
     })
   ] }) });
 }

package/dist/colorpicker.cjs

@@ -31,6 +31,7 @@ const field = require("@base-ui/react/field");
 const index = require("./components/ComponentDefaults/index.cjs");
 const index$1 = require("./components/Input/index.cjs");
 const ColorPicker_module = require("./components/ColorPicker/ColorPicker.module.scss.cjs");
+const env = require("./utils/env.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -59,7 +60,7 @@ function loadColorfulDeps() {
         _HexColorPicker = rc.HexColorPicker;
       } catch {
         _colorfulFailed = true;
-        if (process.env.NODE_ENV === "development") {
+        if (env.isDevelopmentBuild()) {
           console.warn(
             "[@usefragments/ui] ColorPicker: react-colorful is not installed. Install it with: npm install react-colorful"
           );
@@ -150,6 +151,7 @@ const ColorPickerRoot = React__namespace.forwardRef(function ColorPicker2({
                 className: ColorPicker_module.default.swatch,
                 style: { backgroundColor: displayValue },
                 disabled,
+                "aria-invalid": error || void 0,
                 "aria-label": label ? `Edit ${label} color` : "Edit color"
               }
             ),
@@ -178,6 +180,7 @@ const ColorPickerRoot = React__namespace.forwardRef(function ColorPicker2({
               onChange: handleInputChange,
               onBlur: handleInputBlur,
               disabled,
+              error,
               size,
               className: ColorPicker_module.default.hexInput,
               inputClassName: ColorPicker_module.default.hexInputField,