@usefragments/ui 1.6.0 → 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,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

@@ -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

@@ -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"
           );
@@ -178,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

@@ -7,6 +7,7 @@ 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;
@@ -18,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"
           );
@@ -137,6 +138,7 @@ const ColorPickerRoot = React.forwardRef(function ColorPicker2({
               onChange: handleInputChange,
               onBlur: handleInputBlur,
               disabled,
+              error,
               size,
               className: styles.hexInput,
               inputClassName: styles.hexInputField,

package/dist/components/Accordion/Accordion.module.scss.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const accordion = "_accordion_17aim_1";
-const item = "_item_17aim_11";
-const heading = "_heading_17aim_16";
-const trigger = "_trigger_17aim_21";
-const triggerContent = "_triggerContent_17aim_72";
-const chevron = "_chevron_17aim_77";
-const content = "_content_17aim_88";
-const contentInner = "_contentInner_17aim_100";
+const accordion = "_accordion_1wl4m_1";
+const item = "_item_1wl4m_11";
+const heading = "_heading_1wl4m_16";
+const trigger = "_trigger_1wl4m_21";
+const triggerContent = "_triggerContent_1wl4m_74";
+const chevron = "_chevron_1wl4m_79";
+const content = "_content_1wl4m_90";
+const contentInner = "_contentInner_1wl4m_102";
 const styles = {
   accordion,
   item,

package/dist/components/Accordion/Accordion.module.scss.js

@@ -1,11 +1,11 @@
-const accordion = "_accordion_17aim_1";
-const item = "_item_17aim_11";
-const heading = "_heading_17aim_16";
-const trigger = "_trigger_17aim_21";
-const triggerContent = "_triggerContent_17aim_72";
-const chevron = "_chevron_17aim_77";
-const content = "_content_17aim_88";
-const contentInner = "_contentInner_17aim_100";
+const accordion = "_accordion_1wl4m_1";
+const item = "_item_1wl4m_11";
+const heading = "_heading_1wl4m_16";
+const trigger = "_trigger_1wl4m_21";
+const triggerContent = "_triggerContent_1wl4m_74";
+const chevron = "_chevron_1wl4m_79";
+const content = "_content_1wl4m_90";
+const contentInner = "_contentInner_1wl4m_102";
 const styles = {
   accordion,
   item,

package/dist/components/Alert/Alert.module.scss.cjs

@@ -1,17 +1,18 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const alert = "_alert_1n287_1";
-const title = "_title_1n287_14";
-const info = "_info_1n287_18";
-const success = "_success_1n287_24";
-const warning = "_warning_1n287_30";
-const error = "_error_1n287_36";
-const icon = "_icon_1n287_42";
-const body = "_body_1n287_74";
-const content = "_content_1n287_89";
-const actions = "_actions_1n287_98";
-const close = "_close_1n287_104";
-const action = "_action_1n287_98";
+const alert = "_alert_1xq9x_1";
+const title = "_title_1xq9x_14";
+const info = "_info_1xq9x_18";
+const success = "_success_1xq9x_24";
+const warning = "_warning_1xq9x_30";
+const error = "_error_1xq9x_36";
+const surface = "_surface_1xq9x_42";
+const icon = "_icon_1xq9x_63";
+const body = "_body_1xq9x_95";
+const content = "_content_1xq9x_110";
+const actions = "_actions_1xq9x_119";
+const close = "_close_1xq9x_125";
+const action = "_action_1xq9x_119";
 const styles = {
   alert,
   title,
@@ -19,6 +20,7 @@ const styles = {
   success,
   warning,
   error,
+  surface,
   icon,
   body,
   content,
@@ -37,5 +39,6 @@ exports.error = error;
 exports.icon = icon;
 exports.info = info;
 exports.success = success;
+exports.surface = surface;
 exports.title = title;
 exports.warning = warning;