@mieweb/ui 0.11.0-dev.29 → 0.11.0-dev.30

package/dist/chunk-BBLEGF5L.js

@@ -0,0 +1,66 @@
+import { cn } from './chunk-TQONQSJO.js';
+import * as React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var ButtonGroup = React.forwardRef(
+  ({ orientation = "auto", split, className, children, ...props }, ref) => {
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current);
+    const [stacked, setStacked] = React.useState(false);
+    const requiredWidth = React.useRef(0);
+    React.useLayoutEffect(() => {
+      if (orientation !== "auto") return;
+      const el = innerRef.current;
+      if (!el) return;
+      const measure = () => {
+        if (!stacked) {
+          const overflow = Array.from(
+            el.querySelectorAll('[data-slot="button-label"]')
+          ).reduce(
+            (sum, label) => sum + Math.max(0, label.scrollWidth - label.clientWidth),
+            0
+          );
+          if (overflow > 0) {
+            requiredWidth.current = el.clientWidth + overflow;
+            setStacked(true);
+          }
+        } else if (el.clientWidth >= requiredWidth.current) {
+          setStacked(false);
+        }
+      };
+      measure();
+      if (typeof globalThis.ResizeObserver === "undefined") return;
+      const observer = new globalThis.ResizeObserver(measure);
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, [orientation, stacked, children]);
+    const isStacked = orientation === "vertical" || orientation === "auto" && stacked;
+    const items = React.Children.toArray(children);
+    const splitCount = split === true ? 1 : typeof split === "number" ? split : 0;
+    const splitIndex = !isStacked && splitCount > 0 && splitCount < items.length ? splitCount : 0;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: innerRef,
+        "data-slot": "button-group",
+        "data-orientation": isStacked ? "vertical" : "horizontal",
+        className: cn(
+          "flex gap-3",
+          isStacked ? "flex-col items-stretch" : "flex-row items-center justify-end",
+          className
+        ),
+        ...props,
+        children: splitIndex > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          items.slice(0, splitIndex),
+          /* @__PURE__ */ jsx("div", { className: "flex-1", "aria-hidden": "true" }),
+          items.slice(splitIndex)
+        ] }) : children
+      }
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+
+export { ButtonGroup };
+//# sourceMappingURL=chunk-BBLEGF5L.js.map
+//# sourceMappingURL=chunk-BBLEGF5L.js.map

package/dist/chunk-BBLEGF5L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"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","file":"chunk-BBLEGF5L.js","sourcesContent":["import * as React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Force a layout instead of measuring. 'auto' stacks only when labels would truncate. */\n  orientation?: 'auto' | 'horizontal' | 'vertical';\n  /**\n   * Split the row into a left and right section. `true` puts the first button\n   * on the left; a number puts that many buttons on the left. The rest align\n   * right. Ignored while stacked. Default: no split, all buttons align right.\n   */\n  split?: boolean | number;\n}\n\n/**\n * Lays out buttons in a row, automatically stacking them vertically when the\n * available space would truncate their labels.\n *\n * Detection: each Button renders its label in a `data-slot=\"button-label\"`\n * span with `truncate`. When laid out in a row, a truncated label has\n * `scrollWidth > clientWidth`. The group measures the extra width needed and\n * stacks when the row cannot fit; it returns to a row once the container is\n * wide enough again.\n *\n * @example\n * ```tsx\n * <ModalFooter>\n *   <ButtonGroup className=\"w-full\" split>\n *     <Button variant=\"ghost\">Back</Button>\n *     <Button variant=\"secondary\">Cancel</Button>\n *     <Button variant=\"danger\">Permanently delete this record</Button>\n *   </ButtonGroup>\n * </ModalFooter>\n * ```\n */\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  ({ orientation = 'auto', split, className, children, ...props }, ref) => {\n    const innerRef = React.useRef<HTMLDivElement>(null);\n    React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);\n\n    const [stacked, setStacked] = React.useState(false);\n    // Width the row layout needs to show every label in full.\n    const requiredWidth = React.useRef(0);\n\n    React.useLayoutEffect(() => {\n      if (orientation !== 'auto') return;\n      const el = innerRef.current;\n      if (!el) return;\n\n      const measure = () => {\n        if (!stacked) {\n          // In row mode, a truncated label reports scrollWidth > clientWidth.\n          const overflow = Array.from(\n            el.querySelectorAll<HTMLElement>('[data-slot=\"button-label\"]')\n          ).reduce(\n            (sum, label) =>\n              sum + Math.max(0, label.scrollWidth - label.clientWidth),\n            0\n          );\n          if (overflow > 0) {\n            requiredWidth.current = el.clientWidth + overflow;\n            setStacked(true);\n          }\n        } else if (el.clientWidth >= requiredWidth.current) {\n          setStacked(false);\n        }\n      };\n\n      measure();\n      if (typeof globalThis.ResizeObserver === 'undefined') return;\n      const observer = new globalThis.ResizeObserver(measure);\n      observer.observe(el);\n      return () => observer.disconnect();\n    }, [orientation, stacked, children]);\n\n    const isStacked =\n      orientation === 'vertical' || (orientation === 'auto' && stacked);\n\n    const items = React.Children.toArray(children);\n    const splitCount =\n      split === true ? 1 : typeof split === 'number' ? split : 0;\n    const splitIndex =\n      !isStacked && splitCount > 0 && splitCount < items.length\n        ? splitCount\n        : 0;\n\n    return (\n      <div\n        ref={innerRef}\n        data-slot=\"button-group\"\n        data-orientation={isStacked ? 'vertical' : 'horizontal'}\n        className={cn(\n          'flex gap-3',\n          isStacked\n            ? 'flex-col items-stretch'\n            : 'flex-row items-center justify-end',\n          className\n        )}\n        {...props}\n      >\n        {splitIndex > 0 ? (\n          <>\n            {items.slice(0, splitIndex)}\n            <div className=\"flex-1\" aria-hidden=\"true\" />\n            {items.slice(splitIndex)}\n          </>\n        ) : (\n          children\n        )}\n      </div>\n    );\n  }\n);\n\nButtonGroup.displayName = 'ButtonGroup';\n\nexport { ButtonGroup };\n"]}

package/dist/{chunk-MBDT2MGR.js → chunk-BIQIE3VW.js}

@@ -1,7 +1,7 @@
 import { Tabs, TabsList, TabsTrigger, TabsContent } from './chunk-ME7EVT6F.js';
 import { Switch } from './chunk-AQ564XO7.js';
-import { Textarea } from './chunk-2VISTX7O.js';
-import { RichTextEditor } from './chunk-43QBEF6N.js';
+import { Textarea } from './chunk-3NOVISM6.js';
+import { RichTextEditor } from './chunk-QR7B6UPR.js';
 import { Select } from './chunk-VCI2Y7ST.js';
 import { Input } from './chunk-3IMM2PM4.js';
 import { useLiveAnnouncement } from './chunk-HNXLLDPN.js';
@@ -2536,5 +2536,5 @@ var EmailEditor = React3.forwardRef(
 EmailEditor.displayName = "EmailEditor";
 
 export { EMAIL_BLOCK_TYPES, EmailEditor, createDefaultDesignSettings, createEmailBlock, createEmailHtmlSanitizer, createEmptyEmailContentTree, defaultEmailEditorLabels, generateEmailBlockId, renderEmailMjml };
-//# sourceMappingURL=chunk-MBDT2MGR.js.map
-//# sourceMappingURL=chunk-MBDT2MGR.js.map
+//# sourceMappingURL=chunk-BIQIE3VW.js.map
+//# sourceMappingURL=chunk-BIQIE3VW.js.map