@usefragments/ui 1.5.4 → 1.7.0

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,15 +143,12 @@ function ChartContainer({
     "div",
     {
       ...htmlProps,
+      ref: frameRef,
       className: rootClasses,
       style: { ...cssVars, ...style },
       role: "img",
       "aria-label": ariaLabel || "Chart",
-      "aria-describedby": aria.mergeAriaIds(
-        ariaDescribedBy,
-        summaryId,
-        dataTableId
-      ),
+      "aria-describedby": aria.mergeAriaIds(ariaDescribedBy, summaryId, dataTableId),
       children: [
         chartChild,
         summaryId && /* @__PURE__ */ jsxRuntime.jsx("span", { id: summaryId, className: Chart_module.default.srOnly, children: summary }),
@@ -174,7 +188,10 @@ function ChartTooltipContent({
           "span",
           {
             className: indicatorClass,
-            style: { backgroundColor: indicator === "dashed" ? void 0 : color, borderColor: color }
+            style: {
+              backgroundColor: indicator === "dashed" ? void 0 : color,
+              borderColor: color
+            }
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: Chart_module.default.tooltipItemLabel, children: displayLabel }),
@@ -229,13 +246,7 @@ function ChartLegendContent({ payload }) {
     const label = (configEntry == null ? void 0 : configEntry.label) ?? entry.value ?? key;
     const color = entry.color ?? (configEntry == null ? void 0 : configEntry.color);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Chart_module.default.legendItem, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: Chart_module.default.legendDot,
-          style: { backgroundColor: color }
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: Chart_module.default.legendDot, style: { backgroundColor: color } }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: Chart_module.default.legendLabel, children: label })
     ] }, key);
   }) });
@@ -247,13 +258,7 @@ function ChartLegend({ content, ...props }) {
     return null;
   }
   const RechartsLegendComponent = _RechartsLegend;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RechartsLegendComponent,
-    {
-      content: content ?? defaultContent,
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(RechartsLegendComponent, { content: content ?? defaultContent, ...props });
 }
 const Chart = Object.assign(ChartContainer, {
   Root: ChartContainer,

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,15 +102,12 @@ function ChartContainer({
     "div",
     {
       ...htmlProps,
+      ref: frameRef,
       className: rootClasses,
       style: { ...cssVars, ...style },
       role: "img",
       "aria-label": ariaLabel || "Chart",
-      "aria-describedby": mergeAriaIds(
-        ariaDescribedBy,
-        summaryId,
-        dataTableId
-      ),
+      "aria-describedby": mergeAriaIds(ariaDescribedBy, summaryId, dataTableId),
       children: [
         chartChild,
         summaryId && /* @__PURE__ */ jsx("span", { id: summaryId, className: styles.srOnly, children: summary }),
@@ -133,7 +147,10 @@ function ChartTooltipContent({
           "span",
           {
             className: indicatorClass,
-            style: { backgroundColor: indicator === "dashed" ? void 0 : color, borderColor: color }
+            style: {
+              backgroundColor: indicator === "dashed" ? void 0 : color,
+              borderColor: color
+            }
           }
         ),
         /* @__PURE__ */ jsx("span", { className: styles.tooltipItemLabel, children: displayLabel }),
@@ -188,13 +205,7 @@ function ChartLegendContent({ payload }) {
     const label = (configEntry == null ? void 0 : configEntry.label) ?? entry.value ?? key;
     const color = entry.color ?? (configEntry == null ? void 0 : configEntry.color);
     return /* @__PURE__ */ jsxs("div", { className: styles.legendItem, children: [
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: styles.legendDot,
-          style: { backgroundColor: color }
-        }
-      ),
+      /* @__PURE__ */ jsx("span", { className: styles.legendDot, style: { backgroundColor: color } }),
       /* @__PURE__ */ jsx("span", { className: styles.legendLabel, children: label })
     ] }, key);
   }) });
@@ -206,13 +217,7 @@ function ChartLegend({ content, ...props }) {
     return null;
   }
   const RechartsLegendComponent = _RechartsLegend;
-  return /* @__PURE__ */ jsx(
-    RechartsLegendComponent,
-    {
-      content: content ?? defaultContent,
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx(RechartsLegendComponent, { content: content ?? defaultContent, ...props });
 }
 const Chart = Object.assign(ChartContainer, {
   Root: ChartContainer,

package/dist/codeblock.cjs

@@ -26,7 +26,9 @@ 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 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 +363,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 +392,7 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
   collapsible = false,
   defaultCollapsed = false,
   collapsedLines = 5,
+  collapseAction = "lines",
   compact = false,
   persistentCopy = false,
   copyPlacement = "auto",
@@ -397,7 +402,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 +427,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 +436,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 +446,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 +477,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,9 +500,9 @@ 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(
@@ -540,10 +549,10 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
         {
           type: "button",
           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 ",
@@ -572,6 +581,10 @@ function TabbedCodeBlock({
   tabsVariant = "pills",
   wordWrap,
   maxHeight,
+  collapsible,
+  defaultCollapsed,
+  collapsedLines,
+  collapseAction,
   className,
   onCopy
 }) {
@@ -584,20 +597,33 @@ function TabbedCodeBlock({
     }) }),
     tabs.map((tab, index$1) => {
       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.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-${index$1}`
+      );
     })
   ] }) });
 }

package/dist/codeblock.js

@@ -3,7 +3,9 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { useState, useMemo, useEffect, useCallback } from "react";
 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 +323,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 +352,7 @@ const CodeBlockBase = React.forwardRef(function CodeBlock2({
   collapsible = false,
   defaultCollapsed = false,
   collapsedLines = 5,
+  collapseAction = "lines",
   compact = false,
   persistentCopy = false,
   copyPlacement = "auto",
@@ -357,7 +362,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 +387,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 +396,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 +406,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 +437,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,9 +460,9 @@ 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(
@@ -500,10 +509,10 @@ const CodeBlockBase = React.forwardRef(function CodeBlock2({
         {
           type: "button",
           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 ",
@@ -532,6 +541,10 @@ function TabbedCodeBlock({
   tabsVariant = "pills",
   wordWrap,
   maxHeight,
+  collapsible,
+  defaultCollapsed,
+  collapsedLines,
+  collapseAction,
   className,
   onCopy
 }) {
@@ -544,20 +557,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

@@ -26,10 +26,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const popover = require("@base-ui/react/popover");
+const popup = require("./recipes/popup.cjs");
 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) {
@@ -58,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"
           );
@@ -157,7 +159,7 @@ const ColorPickerRoot = React__namespace.forwardRef(function ColorPicker2({
               {
                 side: "bottom",
                 align: "start",
-                sideOffset: 4,
+                sideOffset: popup.POPUP_OFFSET_PX,
                 className: ColorPicker_module.default.positioner,
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   popover.Popover.Popup,
@@ -177,6 +179,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,

package/dist/colorpicker.js

@@ -2,10 +2,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Popover } from "@base-ui/react/popover";
+import { POPUP_OFFSET_PX } from "./recipes/popup.js";
 import { Field } from "@base-ui/react/field";
 import { useResolvedControlSize } from "./components/ComponentDefaults/index.js";
 import { Input } from "./components/Input/index.js";
 import styles from "./components/ColorPicker/ColorPicker.module.scss.js";
+import { isDevelopmentBuild } from "./utils/env.js";
 let _HexColorPicker = null;
 let _colorfulLoadPromise = null;
 let _colorfulFailed = false;
@@ -17,7 +19,7 @@ function loadColorfulDeps() {
         _HexColorPicker = rc.HexColorPicker;
       } catch {
         _colorfulFailed = true;
-        if (process.env.NODE_ENV === "development") {
+        if (isDevelopmentBuild()) {
           console.warn(
             "[@usefragments/ui] ColorPicker: react-colorful is not installed. Install it with: npm install react-colorful"
           );
@@ -116,7 +118,7 @@ const ColorPickerRoot = React.forwardRef(function ColorPicker2({
               {
                 side: "bottom",
                 align: "start",
-                sideOffset: 4,
+                sideOffset: POPUP_OFFSET_PX,
                 className: styles.positioner,
                 children: /* @__PURE__ */ jsx(
                   Popover.Popup,
@@ -136,6 +138,7 @@ const ColorPickerRoot = React.forwardRef(function ColorPicker2({
               onChange: handleInputChange,
               onBlur: handleInputBlur,
               disabled,
+              error,
               size,
               className: styles.hexInput,
               inputClassName: styles.hexInputField,