@fragments-sdk/ui 0.14.0 → 0.16.0

package/dist/brand.cjs

@@ -11,4 +11,3 @@ const BRAND = {
   }
 };
 exports.BRAND = BRAND;
-//# sourceMappingURL=brand.cjs.map

package/dist/brand.js

@@ -11,4 +11,3 @@ const BRAND = {
 export {
   BRAND
 };
-//# sourceMappingURL=brand.js.map

package/dist/chart.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 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");
 ;/* empty css                      */
 function _interopNamespaceDefault(e) {
@@ -36,10 +37,6 @@ function loadChartDeps() {
     _chartFailed = true;
   }
 }
-function mergeAriaIds(...ids) {
-  const merged = ids.filter(Boolean).join(" ").trim();
-  return merged.length > 0 ? merged : void 0;
-}
 const ChartConfigContext = React__namespace.createContext(null);
 function useChartConfig() {
   const ctx = React__namespace.useContext(ChartConfigContext);
@@ -89,7 +86,7 @@ function ChartContainer({
       style: { ...cssVars, ...style },
       role: "img",
       "aria-label": ariaLabel || "Chart",
-      "aria-describedby": mergeAriaIds(
+      "aria-describedby": aria.mergeAriaIds(
         ariaDescribedBy,
         summaryId,
         dataTableId
@@ -238,4 +235,3 @@ exports.ChartLegendContent = ChartLegendContent;
 exports.ChartTooltip = ChartTooltip;
 exports.ChartTooltipContent = ChartTooltipContent;
 exports.useChartConfig = useChartConfig;
-//# sourceMappingURL=chart.cjs.map

package/dist/chart.js

@@ -1,5 +1,6 @@
 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";
 /* empty css                    */
 let _RechartsTooltip = null;
@@ -17,10 +18,6 @@ function loadChartDeps() {
     _chartFailed = true;
   }
 }
-function mergeAriaIds(...ids) {
-  const merged = ids.filter(Boolean).join(" ").trim();
-  return merged.length > 0 ? merged : void 0;
-}
 const ChartConfigContext = React.createContext(null);
 function useChartConfig() {
   const ctx = React.useContext(ChartConfigContext);
@@ -221,4 +218,3 @@ export {
   ChartTooltipContent,
   useChartConfig
 };
-//# sourceMappingURL=chart.js.map

package/dist/codeblock.cjs

@@ -596,4 +596,3 @@ const CodeBlock = Object.assign(CodeBlockBase, {
 });
 exports.CodeBlock = CodeBlock;
 exports.TabbedCodeBlock = TabbedCodeBlock;
-//# sourceMappingURL=codeblock.cjs.map

package/dist/codeblock.js

@@ -558,4 +558,3 @@ export {
   CodeBlock,
   TabbedCodeBlock
 };
-//# sourceMappingURL=codeblock.js.map

package/dist/colorpicker.cjs

@@ -40,14 +40,18 @@ const ColorPickerRoot = React__namespace.forwardRef(
     label,
     value,
     defaultValue = "#000000",
-    onChange,
+    onChange: onChangeProp,
+    onValueChange,
+    helperText,
     description,
+    error = false,
     disabled = false,
     size = "md",
     showInput = true,
     className,
     ...htmlProps
   }, ref) {
+    const resolvedHelperText = helperText ?? description;
     loadColorfulDeps();
     const [internalValue, setInternalValue] = React__namespace.useState(defaultValue);
     const [inputValue, setInputValue] = React__namespace.useState(value ?? defaultValue);
@@ -57,6 +61,7 @@ const ColorPickerRoot = React__namespace.forwardRef(
         setInputValue(value);
       }
     }, [value]);
+    const onChange = onChangeProp ?? onValueChange;
     const handleChange = (color) => {
       setInternalValue(color);
       setInputValue(color);
@@ -79,12 +84,14 @@ const ColorPickerRoot = React__namespace.forwardRef(
       ColorPicker_module.default[`size${size.charAt(0).toUpperCase() + size.slice(1)}`],
       className
     ].filter(Boolean).join(" ");
+    const helperClasses = [ColorPicker_module.default.helper, error && ColorPicker_module.default.helperError].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxRuntime.jsxs(
       field.Field.Root,
       {
         ref,
         ...htmlProps,
         disabled,
+        invalid: error,
         className: wrapperClasses,
         children: [
           label && /* @__PURE__ */ jsxRuntime.jsx(field.Field.Label, { className: ColorPicker_module.default.label, children: label }),
@@ -122,7 +129,7 @@ const ColorPickerRoot = React__namespace.forwardRef(
               }
             )
           ] }),
-          description && /* @__PURE__ */ jsxRuntime.jsx(field.Field.Description, { className: ColorPicker_module.default.description, children: description })
+          resolvedHelperText && /* @__PURE__ */ jsxRuntime.jsx(field.Field.Description, { className: helperClasses, children: resolvedHelperText })
         ]
       }
     );
@@ -132,4 +139,3 @@ const ColorPicker = Object.assign(ColorPickerRoot, {
   Root: ColorPickerRoot
 });
 exports.ColorPicker = ColorPicker;
-//# sourceMappingURL=colorpicker.cjs.map

package/dist/colorpicker.js

@@ -21,14 +21,18 @@ const ColorPickerRoot = React.forwardRef(
     label,
     value,
     defaultValue = "#000000",
-    onChange,
+    onChange: onChangeProp,
+    onValueChange,
+    helperText,
     description,
+    error = false,
     disabled = false,
     size = "md",
     showInput = true,
     className,
     ...htmlProps
   }, ref) {
+    const resolvedHelperText = helperText ?? description;
     loadColorfulDeps();
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const [inputValue, setInputValue] = React.useState(value ?? defaultValue);
@@ -38,6 +42,7 @@ const ColorPickerRoot = React.forwardRef(
         setInputValue(value);
       }
     }, [value]);
+    const onChange = onChangeProp ?? onValueChange;
     const handleChange = (color) => {
       setInternalValue(color);
       setInputValue(color);
@@ -60,12 +65,14 @@ const ColorPickerRoot = React.forwardRef(
       styles[`size${size.charAt(0).toUpperCase() + size.slice(1)}`],
       className
     ].filter(Boolean).join(" ");
+    const helperClasses = [styles.helper, error && styles.helperError].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs(
       Field.Root,
       {
         ref,
         ...htmlProps,
         disabled,
+        invalid: error,
         className: wrapperClasses,
         children: [
           label && /* @__PURE__ */ jsx(Field.Label, { className: styles.label, children: label }),
@@ -103,7 +110,7 @@ const ColorPickerRoot = React.forwardRef(
               }
             )
           ] }),
-          description && /* @__PURE__ */ jsx(Field.Description, { className: styles.description, children: description })
+          resolvedHelperText && /* @__PURE__ */ jsx(Field.Description, { className: helperClasses, children: resolvedHelperText })
         ]
       }
     );
@@ -115,4 +122,3 @@ const ColorPicker = Object.assign(ColorPickerRoot, {
 export {
   ColorPicker
 };
-//# sourceMappingURL=colorpicker.js.map

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

@@ -27,4 +27,3 @@ exports.heading = heading;
 exports.item = item;
 exports.trigger = trigger;
 exports.triggerContent = triggerContent;
-//# sourceMappingURL=Accordion.module.scss.cjs.map

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

@@ -27,4 +27,3 @@ export {
   trigger,
   triggerContent
 };
-//# sourceMappingURL=Accordion.module.scss.js.map

package/dist/components/Accordion/index.cjs

@@ -190,4 +190,3 @@ exports.AccordionContent = AccordionContent;
 exports.AccordionItem = AccordionItem;
 exports.AccordionRoot = AccordionRoot;
 exports.AccordionTrigger = AccordionTrigger;
-//# sourceMappingURL=index.cjs.map

package/dist/components/Accordion/index.js

@@ -173,4 +173,3 @@ export {
   AccordionRoot,
   AccordionTrigger
 };
-//# sourceMappingURL=index.js.map

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

@@ -39,4 +39,3 @@ exports.info = info;
 exports.success = success;
 exports.title = title;
 exports.warning = warning;
-//# sourceMappingURL=Alert.module.scss.cjs.map

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

@@ -39,4 +39,3 @@ export {
   title,
   warning
 };
-//# sourceMappingURL=Alert.module.scss.js.map

package/dist/components/Alert/index.cjs

@@ -148,4 +148,3 @@ exports.AlertIcon = AlertIcon;
 exports.AlertRoot = AlertRoot;
 exports.AlertTitle = AlertTitle;
 exports.useAlertContext = useAlertContext;
-//# sourceMappingURL=index.cjs.map

package/dist/components/Alert/index.js

@@ -131,4 +131,3 @@ export {
   AlertTitle,
   useAlertContext
 };
-//# sourceMappingURL=index.js.map

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

@@ -1,39 +1,35 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_1vko5_1";
-const sidebarLayout = "_sidebarLayout_1vko5_20";
-const sidebarFloatingLayout = "_sidebarFloatingLayout_1vko5_30";
-const header = "_header_1vko5_34";
-const headerFloating = "_headerFloating_1vko5_43";
-const sidebar = "_sidebar_1vko5_20";
-const sidebarFullHeight = "_sidebarFullHeight_1vko5_81";
-const sidebarFloating = "_sidebarFloating_1vko5_30";
-const main = "_main_1vko5_95";
-const mainFloating = "_mainFloating_1vko5_102";
-const paddingSm = "_paddingSm_1vko5_114";
-const paddingMd = "_paddingMd_1vko5_118";
-const paddingLg = "_paddingLg_1vko5_127";
-const aside = "_aside_1vko5_136";
+const root = "_root_1cmf1_1";
+const sidebarLayout = "_sidebarLayout_1cmf1_20";
+const header = "_header_1cmf1_30";
+const sidebar = "_sidebar_1cmf1_20";
+const sidebarFullHeight = "_sidebarFullHeight_1cmf1_73";
+const main = "_main_1cmf1_83";
+const mainFloating = "_mainFloating_1cmf1_90";
+const paddingSm = "_paddingSm_1cmf1_104";
+const paddingMd = "_paddingMd_1cmf1_108";
+const paddingLg = "_paddingLg_1cmf1_117";
+const aside = "_aside_1cmf1_126";
+const asideFloating = "_asideFloating_1cmf1_147";
 const styles = {
   root,
   sidebarLayout,
-  sidebarFloatingLayout,
   header,
-  headerFloating,
   sidebar,
   sidebarFullHeight,
-  sidebarFloating,
   main,
   mainFloating,
   paddingSm,
   paddingMd,
   paddingLg,
-  aside
+  aside,
+  asideFloating
 };
 exports.aside = aside;
+exports.asideFloating = asideFloating;
 exports.default = styles;
 exports.header = header;
-exports.headerFloating = headerFloating;
 exports.main = main;
 exports.mainFloating = mainFloating;
 exports.paddingLg = paddingLg;
@@ -41,8 +37,5 @@ exports.paddingMd = paddingMd;
 exports.paddingSm = paddingSm;
 exports.root = root;
 exports.sidebar = sidebar;
-exports.sidebarFloating = sidebarFloating;
-exports.sidebarFloatingLayout = sidebarFloatingLayout;
 exports.sidebarFullHeight = sidebarFullHeight;
 exports.sidebarLayout = sidebarLayout;
-//# sourceMappingURL=AppShell.module.scss.cjs.map

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

@@ -1,38 +1,34 @@
-const root = "_root_1vko5_1";
-const sidebarLayout = "_sidebarLayout_1vko5_20";
-const sidebarFloatingLayout = "_sidebarFloatingLayout_1vko5_30";
-const header = "_header_1vko5_34";
-const headerFloating = "_headerFloating_1vko5_43";
-const sidebar = "_sidebar_1vko5_20";
-const sidebarFullHeight = "_sidebarFullHeight_1vko5_81";
-const sidebarFloating = "_sidebarFloating_1vko5_30";
-const main = "_main_1vko5_95";
-const mainFloating = "_mainFloating_1vko5_102";
-const paddingSm = "_paddingSm_1vko5_114";
-const paddingMd = "_paddingMd_1vko5_118";
-const paddingLg = "_paddingLg_1vko5_127";
-const aside = "_aside_1vko5_136";
+const root = "_root_1cmf1_1";
+const sidebarLayout = "_sidebarLayout_1cmf1_20";
+const header = "_header_1cmf1_30";
+const sidebar = "_sidebar_1cmf1_20";
+const sidebarFullHeight = "_sidebarFullHeight_1cmf1_73";
+const main = "_main_1cmf1_83";
+const mainFloating = "_mainFloating_1cmf1_90";
+const paddingSm = "_paddingSm_1cmf1_104";
+const paddingMd = "_paddingMd_1cmf1_108";
+const paddingLg = "_paddingLg_1cmf1_117";
+const aside = "_aside_1cmf1_126";
+const asideFloating = "_asideFloating_1cmf1_147";
 const styles = {
   root,
   sidebarLayout,
-  sidebarFloatingLayout,
   header,
-  headerFloating,
   sidebar,
   sidebarFullHeight,
-  sidebarFloating,
   main,
   mainFloating,
   paddingSm,
   paddingMd,
   paddingLg,
-  aside
+  aside,
+  asideFloating
 };
 export {
   aside,
+  asideFloating,
   styles as default,
   header,
-  headerFloating,
   main,
   mainFloating,
   paddingLg,
@@ -40,9 +36,6 @@ export {
   paddingSm,
   root,
   sidebar,
-  sidebarFloating,
-  sidebarFloatingLayout,
   sidebarFullHeight,
   sidebarLayout
 };
-//# sourceMappingURL=AppShell.module.scss.js.map

package/dist/components/AppShell/index.cjs

@@ -21,8 +21,19 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function resolveStructure(layout) {
+  if (layout === "sidebar" || layout === "sidebar-floating" || layout === "floating") return "sidebar";
+  return "default";
+}
+function resolveSlotVariant(explicit, layout, slot) {
+  if (explicit !== void 0) return explicit;
+  if ((layout === "sidebar-floating" || layout === "floating") && (slot === "main" || slot === "sidebar")) return "floating";
+  if (layout === "floating" && slot === "aside") return "floating";
+  return "default";
+}
 const AppShellContext = React__namespace.createContext({
   layout: "default",
+  structure: "default",
   headerHeight: "56px",
   sidebarWidth: "240px",
   sidebarCollapsedWidth: "64px",
@@ -79,6 +90,7 @@ function AppShellInner({
   children,
   className,
   layout,
+  structure,
   style: styleProp,
   ...htmlProps
 }) {
@@ -86,8 +98,7 @@ function AppShellInner({
   const { collapsed, isMobile, collapsible } = index.useSidebar();
   const classes = [
     AppShell_module.default.root,
-    (layout === "sidebar" || layout === "sidebar-floating") && AppShell_module.default.sidebarLayout,
-    layout === "sidebar-floating" && AppShell_module.default.sidebarFloatingLayout,
+    structure === "sidebar" && AppShell_module.default.sidebarLayout,
     className
   ].filter(Boolean).join(" ");
   const actualSidebarWidth = isMobile ? "0px" : collapsible === "icon" && collapsed ? appShell.sidebarCollapsedWidth : collapsible === "offcanvas" && collapsed ? "0px" : appShell.sidebarWidth;
@@ -104,12 +115,16 @@ function AppShellInner({
 function AppShellRoot({
   children,
   layout = "default",
+  bg,
   className,
+  style: styleProp,
   ...htmlProps
 }) {
+  const structure = resolveStructure(layout);
   const config = React__namespace.useMemo(() => extractConfigFromChildren(children), [children]);
   const contextValue = {
     layout,
+    structure,
     headerHeight: config.headerHeight,
     sidebarWidth: config.sidebarWidth,
     sidebarCollapsedWidth: config.sidebarCollapsedWidth,
@@ -123,26 +138,25 @@ function AppShellRoot({
       collapsedWidth: config.sidebarCollapsedWidth,
       collapsible: config.sidebarCollapsible,
       defaultCollapsed: config.sidebarDefaultCollapsed,
-      children: /* @__PURE__ */ jsxRuntime.jsx(AppShellInner, { className, layout, ...htmlProps, children })
+      children: /* @__PURE__ */ jsxRuntime.jsx(AppShellInner, { className, layout, structure, style: { ...bg ? { backgroundColor: bg } : {}, ...styleProp }, ...htmlProps, children })
     }
   ) });
 }
 function AppShellHeader({
   children,
   height = "56px",
+  bg,
   className,
   style: styleProp,
   ...htmlProps
 }) {
-  const { layout } = useAppShell();
   const classes = [
     AppShell_module.default.header,
-    (layout === "sidebar" || layout === "sidebar-floating") && AppShell_module.default.headerSidebar,
-    layout === "sidebar-floating" && AppShell_module.default.headerFloating,
     className
   ].filter(Boolean).join(" ");
   const style = {
     "--header-height": height,
+    ...bg ? { backgroundColor: bg } : {},
     ...styleProp
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, style, children });
@@ -154,19 +168,26 @@ function AppShellSidebar({
   collapsible = "icon",
   position = "left",
   defaultCollapsed = false,
+  variant,
+  bg,
   "aria-label": ariaLabel,
   className,
+  style: styleProp,
   ...htmlProps
 }) {
   const isMobile = useIsMobile();
-  const { layout } = useAppShell();
+  const { layout, structure } = useAppShell();
+  const resolvedVariant = resolveSlotVariant(variant, layout, "sidebar");
   const classes = [
     AppShell_module.default.sidebar,
-    (layout === "sidebar" || layout === "sidebar-floating") && AppShell_module.default.sidebarFullHeight,
-    layout === "sidebar-floating" && AppShell_module.default.sidebarFloating,
+    structure === "sidebar" && AppShell_module.default.sidebarFullHeight,
+    resolvedVariant === "floating" && AppShell_module.default.sidebarFloating,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlProps, className: classes, children: [
+  const style = {
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlProps, className: classes, style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       index.Sidebar,
       {
@@ -176,6 +197,7 @@ function AppShellSidebar({
         collapsible,
         defaultCollapsed,
         "aria-label": ariaLabel,
+        style: bg ? { backgroundColor: bg } : void 0,
         children
       }
     ),
@@ -185,33 +207,50 @@ function AppShellSidebar({
 function AppShellMain({
   children,
   padding = "md",
+  variant,
+  bg,
   className,
+  style: styleProp,
   id = "main-content",
   ...htmlProps
 }) {
   const { layout } = useAppShell();
+  const resolvedVariant = resolveSlotVariant(variant, layout, "main");
   const classes = [
     AppShell_module.default.main,
     padding !== "none" && AppShell_module.default[`padding${padding.charAt(0).toUpperCase() + padding.slice(1)}`],
-    layout === "sidebar-floating" && AppShell_module.default.mainFloating,
+    resolvedVariant === "floating" && AppShell_module.default.mainFloating,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx("main", { ...htmlProps, className: classes, id, children });
+  const style = {
+    ...bg ? { backgroundColor: bg } : {},
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("main", { ...htmlProps, className: classes, style, id, children });
 }
 function AppShellAside({
   children,
   width = "280px",
   visible = true,
+  variant,
+  bg,
   className,
   style: styleProp,
   ...htmlProps
 }) {
+  const { layout } = useAppShell();
+  const resolvedVariant = resolveSlotVariant(variant, layout, "aside");
   if (!visible) {
     return null;
   }
-  const classes = [AppShell_module.default.aside, className].filter(Boolean).join(" ");
+  const classes = [
+    AppShell_module.default.aside,
+    resolvedVariant === "floating" && AppShell_module.default.asideFloating,
+    className
+  ].filter(Boolean).join(" ");
   const style = {
     "--aside-width": width,
+    ...bg ? { backgroundColor: bg } : {},
     ...styleProp
   };
   return /* @__PURE__ */ jsxRuntime.jsx("aside", { ...htmlProps, className: classes, style, children });
@@ -229,4 +268,3 @@ exports.AppShellMain = AppShellMain;
 exports.AppShellRoot = AppShellRoot;
 exports.AppShellSidebar = AppShellSidebar;
 exports.useAppShell = useAppShell;
-//# sourceMappingURL=index.cjs.map