@szum-tech/design-system 3.11.1 → 3.12.0

package/dist/components/badge-overflow/index.cjs

@@ -0,0 +1,182 @@
+'use strict';
+
+var chunkXIQUR62A_cjs = require('../../chunk-XIQUR62A.cjs');
+var chunkH2BWO3SI_cjs = require('../../chunk-H2BWO3SI.cjs');
+var React = require('react');
+var radixUi = require('radix-ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function BadgeOverflow(props) {
+  const {
+    items,
+    getBadgeLabel: getBadgeLabelProp,
+    lineCount = 1,
+    renderBadge,
+    renderOverflow,
+    asChild,
+    className,
+    style,
+    ref,
+    ...rootProps
+  } = props;
+  const getBadgeLabel = React__namespace.useCallback(
+    (item) => {
+      if (typeof item === "object" && !getBadgeLabelProp) {
+        throw new Error("`getBadgeLabel` is required when using array of objects");
+      }
+      return getBadgeLabelProp ? getBadgeLabelProp(item) : item;
+    },
+    [getBadgeLabelProp]
+  );
+  const rootRef = React__namespace.useRef(null);
+  const composedRef = chunkXIQUR62A_cjs.useComposedRefs(ref, rootRef);
+  const measureRef = React__namespace.useRef(null);
+  const [containerWidth, setContainerWidth] = React__namespace.useState(0);
+  const [badgeGap, setBadgeGap] = React__namespace.useState(4);
+  const [badgeHeight, setBadgeHeight] = React__namespace.useState(20);
+  const [overflowBadgeWidth, setOverflowBadgeWidth] = React__namespace.useState(40);
+  const [isMeasured, setIsMeasured] = React__namespace.useState(false);
+  const [badgeWidths, setBadgeWidths] = React__namespace.useState(/* @__PURE__ */ new Map());
+  React__namespace.useLayoutEffect(() => {
+    if (!rootRef.current || !measureRef.current) return;
+    function measureContainer() {
+      if (!rootRef.current || !measureRef.current) return;
+      const computedStyle = getComputedStyle(rootRef.current);
+      const gapValue = computedStyle.gap;
+      const gap = gapValue ? parseFloat(gapValue) : 4;
+      setBadgeGap(gap);
+      const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
+      const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
+      const totalPadding = paddingLeft + paddingRight;
+      const widthMap = /* @__PURE__ */ new Map();
+      const measureChildren = measureRef.current.children;
+      for (let i = 0; i < items.length; i++) {
+        const child = measureChildren[i];
+        if (child) {
+          const label = getBadgeLabel(items[i]);
+          widthMap.set(label, child.offsetWidth);
+        }
+      }
+      setBadgeWidths(widthMap);
+      const firstBadge = measureChildren[0];
+      if (firstBadge) {
+        setBadgeHeight(firstBadge.offsetHeight || 20);
+      }
+      const overflowChild = measureChildren[items.length];
+      if (overflowChild) {
+        setOverflowBadgeWidth(overflowChild.offsetWidth || 40);
+      }
+      const width = rootRef.current.clientWidth - totalPadding;
+      setContainerWidth(width);
+      setIsMeasured(true);
+    }
+    measureContainer();
+    const resizeObserver = new ResizeObserver(measureContainer);
+    resizeObserver.observe(rootRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [items, getBadgeLabel]);
+  const placeholderHeight = React__namespace.useMemo(
+    () => badgeHeight * lineCount + badgeGap * (lineCount - 1),
+    [badgeHeight, badgeGap, lineCount]
+  );
+  const { visibleItems, hiddenCount } = React__namespace.useMemo(() => {
+    if (!containerWidth || items.length === 0 || badgeWidths.size === 0) {
+      return { visibleItems: items, hiddenCount: 0 };
+    }
+    let currentLineWidth = 0;
+    let currentLine = 1;
+    const visible = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (!item) continue;
+      const label = getBadgeLabel(item);
+      const badgeWidth = badgeWidths.get(label);
+      if (!badgeWidth) {
+        continue;
+      }
+      const widthWithGap = badgeWidth + badgeGap;
+      const isLastLine = currentLine === lineCount;
+      const hasMoreItems = i < items.length - 1;
+      const availableWidth = isLastLine && hasMoreItems ? containerWidth - overflowBadgeWidth - badgeGap : containerWidth;
+      if (currentLineWidth + widthWithGap <= availableWidth) {
+        currentLineWidth += widthWithGap;
+        visible.push(item);
+      } else if (currentLine < lineCount) {
+        currentLine++;
+        currentLineWidth = widthWithGap;
+        visible.push(item);
+      } else {
+        break;
+      }
+    }
+    return {
+      visibleItems: visible,
+      hiddenCount: Math.max(0, items.length - visible.length)
+    };
+  }, [items, getBadgeLabel, containerWidth, lineCount, badgeGap, overflowBadgeWidth, badgeWidths]);
+  const Component = asChild ? radixUi.Slot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: measureRef, className: "pointer-events-none invisible absolute flex flex-wrap", style: { gap: badgeGap }, children: [
+      items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(React__namespace.Fragment, { children: renderBadge(item, getBadgeLabel(item)) }, index)),
+      renderOverflow ? renderOverflow(99) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex h-5 shrink-0 items-center rounded-md border px-1.5 text-xs font-semibold", children: "+99" })
+    ] }),
+    isMeasured ? /* @__PURE__ */ jsxRuntime.jsxs(
+      Component,
+      {
+        "data-slot": "badge-overflow",
+        ...rootProps,
+        ref: composedRef,
+        className: chunkH2BWO3SI_cjs.cn("flex flex-wrap", className),
+        style: {
+          gap: badgeGap,
+          ...style
+        },
+        children: [
+          visibleItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(React__namespace.Fragment, { children: renderBadge(item, getBadgeLabel(item)) }, index)),
+          hiddenCount > 0 && (renderOverflow ? renderOverflow(hiddenCount) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex h-5 shrink-0 items-center rounded-md border px-1.5 text-xs font-semibold", children: [
+            "+",
+            hiddenCount
+          ] }))
+        ]
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        "data-slot": "badge-overflow",
+        ...rootProps,
+        ref: composedRef,
+        className: chunkH2BWO3SI_cjs.cn("flex flex-wrap", className),
+        style: {
+          gap: badgeGap,
+          minHeight: placeholderHeight,
+          ...style
+        },
+        children: items.slice(0, Math.min(items.length, lineCount * 3 - (lineCount > 1 ? 1 : 0))).map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(React__namespace.Fragment, { children: renderBadge(item, getBadgeLabel(item)) }, index))
+      }
+    )
+  ] });
+}
+
+exports.BadgeOverflow = BadgeOverflow;

package/dist/components/badge-overflow/index.d.cts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface GetBadgeLabel<T> {
+    /**
+     * Callback that returns a label string for each badge item.
+     * Optional for primitive arrays (strings, numbers), required for object arrays.
+     * @example getBadgeLabel={(item) => item.name}
+     */
+    getBadgeLabel: (item: T) => string;
+}
+type BadgeOverflowProps<T = string> = React.ComponentProps<"div"> & (T extends object ? GetBadgeLabel<T> : Partial<GetBadgeLabel<T>>) & {
+    items: T[];
+    lineCount?: number;
+    renderBadge: (item: T, label: string) => React.ReactNode;
+    renderOverflow?: (count: number) => React.ReactNode;
+    asChild?: boolean;
+};
+declare function BadgeOverflow<T = string>(props: BadgeOverflowProps<T>): react_jsx_runtime.JSX.Element;
+
+export { BadgeOverflow, type BadgeOverflowProps };

package/dist/components/badge-overflow/index.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface GetBadgeLabel<T> {
+    /**
+     * Callback that returns a label string for each badge item.
+     * Optional for primitive arrays (strings, numbers), required for object arrays.
+     * @example getBadgeLabel={(item) => item.name}
+     */
+    getBadgeLabel: (item: T) => string;
+}
+type BadgeOverflowProps<T = string> = React.ComponentProps<"div"> & (T extends object ? GetBadgeLabel<T> : Partial<GetBadgeLabel<T>>) & {
+    items: T[];
+    lineCount?: number;
+    renderBadge: (item: T, label: string) => React.ReactNode;
+    renderOverflow?: (count: number) => React.ReactNode;
+    asChild?: boolean;
+};
+declare function BadgeOverflow<T = string>(props: BadgeOverflowProps<T>): react_jsx_runtime.JSX.Element;
+
+export { BadgeOverflow, type BadgeOverflowProps };

package/dist/components/badge-overflow/index.js

@@ -0,0 +1,160 @@
+import { useComposedRefs } from '../../chunk-SB5UG7OC.js';
+import { cn } from '../../chunk-ZD2QRAOX.js';
+import * as React from 'react';
+import { Slot } from 'radix-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function BadgeOverflow(props) {
+  const {
+    items,
+    getBadgeLabel: getBadgeLabelProp,
+    lineCount = 1,
+    renderBadge,
+    renderOverflow,
+    asChild,
+    className,
+    style,
+    ref,
+    ...rootProps
+  } = props;
+  const getBadgeLabel = React.useCallback(
+    (item) => {
+      if (typeof item === "object" && !getBadgeLabelProp) {
+        throw new Error("`getBadgeLabel` is required when using array of objects");
+      }
+      return getBadgeLabelProp ? getBadgeLabelProp(item) : item;
+    },
+    [getBadgeLabelProp]
+  );
+  const rootRef = React.useRef(null);
+  const composedRef = useComposedRefs(ref, rootRef);
+  const measureRef = React.useRef(null);
+  const [containerWidth, setContainerWidth] = React.useState(0);
+  const [badgeGap, setBadgeGap] = React.useState(4);
+  const [badgeHeight, setBadgeHeight] = React.useState(20);
+  const [overflowBadgeWidth, setOverflowBadgeWidth] = React.useState(40);
+  const [isMeasured, setIsMeasured] = React.useState(false);
+  const [badgeWidths, setBadgeWidths] = React.useState(/* @__PURE__ */ new Map());
+  React.useLayoutEffect(() => {
+    if (!rootRef.current || !measureRef.current) return;
+    function measureContainer() {
+      if (!rootRef.current || !measureRef.current) return;
+      const computedStyle = getComputedStyle(rootRef.current);
+      const gapValue = computedStyle.gap;
+      const gap = gapValue ? parseFloat(gapValue) : 4;
+      setBadgeGap(gap);
+      const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
+      const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
+      const totalPadding = paddingLeft + paddingRight;
+      const widthMap = /* @__PURE__ */ new Map();
+      const measureChildren = measureRef.current.children;
+      for (let i = 0; i < items.length; i++) {
+        const child = measureChildren[i];
+        if (child) {
+          const label = getBadgeLabel(items[i]);
+          widthMap.set(label, child.offsetWidth);
+        }
+      }
+      setBadgeWidths(widthMap);
+      const firstBadge = measureChildren[0];
+      if (firstBadge) {
+        setBadgeHeight(firstBadge.offsetHeight || 20);
+      }
+      const overflowChild = measureChildren[items.length];
+      if (overflowChild) {
+        setOverflowBadgeWidth(overflowChild.offsetWidth || 40);
+      }
+      const width = rootRef.current.clientWidth - totalPadding;
+      setContainerWidth(width);
+      setIsMeasured(true);
+    }
+    measureContainer();
+    const resizeObserver = new ResizeObserver(measureContainer);
+    resizeObserver.observe(rootRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [items, getBadgeLabel]);
+  const placeholderHeight = React.useMemo(
+    () => badgeHeight * lineCount + badgeGap * (lineCount - 1),
+    [badgeHeight, badgeGap, lineCount]
+  );
+  const { visibleItems, hiddenCount } = React.useMemo(() => {
+    if (!containerWidth || items.length === 0 || badgeWidths.size === 0) {
+      return { visibleItems: items, hiddenCount: 0 };
+    }
+    let currentLineWidth = 0;
+    let currentLine = 1;
+    const visible = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (!item) continue;
+      const label = getBadgeLabel(item);
+      const badgeWidth = badgeWidths.get(label);
+      if (!badgeWidth) {
+        continue;
+      }
+      const widthWithGap = badgeWidth + badgeGap;
+      const isLastLine = currentLine === lineCount;
+      const hasMoreItems = i < items.length - 1;
+      const availableWidth = isLastLine && hasMoreItems ? containerWidth - overflowBadgeWidth - badgeGap : containerWidth;
+      if (currentLineWidth + widthWithGap <= availableWidth) {
+        currentLineWidth += widthWithGap;
+        visible.push(item);
+      } else if (currentLine < lineCount) {
+        currentLine++;
+        currentLineWidth = widthWithGap;
+        visible.push(item);
+      } else {
+        break;
+      }
+    }
+    return {
+      visibleItems: visible,
+      hiddenCount: Math.max(0, items.length - visible.length)
+    };
+  }, [items, getBadgeLabel, containerWidth, lineCount, badgeGap, overflowBadgeWidth, badgeWidths]);
+  const Component = asChild ? Slot.Slot : "div";
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { ref: measureRef, className: "pointer-events-none invisible absolute flex flex-wrap", style: { gap: badgeGap }, children: [
+      items.map((item, index) => /* @__PURE__ */ jsx(React.Fragment, { children: renderBadge(item, getBadgeLabel(item)) }, index)),
+      renderOverflow ? renderOverflow(99) : /* @__PURE__ */ jsx("div", { className: "inline-flex h-5 shrink-0 items-center rounded-md border px-1.5 text-xs font-semibold", children: "+99" })
+    ] }),
+    isMeasured ? /* @__PURE__ */ jsxs(
+      Component,
+      {
+        "data-slot": "badge-overflow",
+        ...rootProps,
+        ref: composedRef,
+        className: cn("flex flex-wrap", className),
+        style: {
+          gap: badgeGap,
+          ...style
+        },
+        children: [
+          visibleItems.map((item, index) => /* @__PURE__ */ jsx(React.Fragment, { children: renderBadge(item, getBadgeLabel(item)) }, index)),
+          hiddenCount > 0 && (renderOverflow ? renderOverflow(hiddenCount) : /* @__PURE__ */ jsxs("div", { className: "inline-flex h-5 shrink-0 items-center rounded-md border px-1.5 text-xs font-semibold", children: [
+            "+",
+            hiddenCount
+          ] }))
+        ]
+      }
+    ) : /* @__PURE__ */ jsx(
+      Component,
+      {
+        "data-slot": "badge-overflow",
+        ...rootProps,
+        ref: composedRef,
+        className: cn("flex flex-wrap", className),
+        style: {
+          gap: badgeGap,
+          minHeight: placeholderHeight,
+          ...style
+        },
+        children: items.slice(0, Math.min(items.length, lineCount * 3 - (lineCount > 1 ? 1 : 0))).map((item, index) => /* @__PURE__ */ jsx(React.Fragment, { children: renderBadge(item, getBadgeLabel(item)) }, index))
+      }
+    )
+  ] });
+}
+
+export { BadgeOverflow };

package/dist/components/button/index.cjs

@@ -1,34 +1,34 @@
 'use strict';
 
 var chunkCP43WJCN_cjs = require('../../chunk-CP43WJCN.cjs');
+require('../../chunk-XJZOANXX.cjs');
+require('../../chunk-YEFLGE3L.cjs');
 require('../../chunk-NU5UQPBX.cjs');
-require('../../chunk-UJX74PFK.cjs');
 require('../../chunk-KQ6QE7BT.cjs');
 require('../../chunk-A7SBXO2Y.cjs');
-require('../../chunk-DGWBE2Y3.cjs');
 require('../../chunk-EUH466AL.cjs');
+require('../../chunk-DGWBE2Y3.cjs');
+require('../../chunk-TH44JYXB.cjs');
+require('../../chunk-CFJ44JVK.cjs');
 require('../../chunk-XENOUBSI.cjs');
-require('../../chunk-XJZOANXX.cjs');
+require('../../chunk-UJX74PFK.cjs');
 require('../../chunk-GHV2TURY.cjs');
 require('../../chunk-3WSQRFUY.cjs');
 require('../../chunk-GYXQUTWZ.cjs');
-require('../../chunk-YEFLGE3L.cjs');
-require('../../chunk-DTYX7CYN.cjs');
+require('../../chunk-CXHDWIGF.cjs');
+require('../../chunk-VK5EX3OG.cjs');
 require('../../chunk-6X26XC6P.cjs');
-require('../../chunk-5AA4IE2T.cjs');
-require('../../chunk-CFJ44JVK.cjs');
+require('../../chunk-DTYX7CYN.cjs');
 require('../../chunk-UIOBJSKZ.cjs');
+require('../../chunk-5AA4IE2T.cjs');
 require('../../chunk-S3ANEJJ7.cjs');
 require('../../chunk-2WQJ36RD.cjs');
 require('../../chunk-S2BCU6WG.cjs');
-require('../../chunk-TH44JYXB.cjs');
 require('../../chunk-ZVF7J4EI.cjs');
 require('../../chunk-2Y2ZCPNV.cjs');
 require('../../chunk-HCHVDUI6.cjs');
 require('../../chunk-ULEEQ723.cjs');
 require('../../chunk-USIW3VT5.cjs');
-require('../../chunk-VK5EX3OG.cjs');
-require('../../chunk-CXHDWIGF.cjs');
 require('../../chunk-XIQUR62A.cjs');
 require('../../chunk-X3ZT3KGX.cjs');
 require('../../chunk-3GNVQFCK.cjs');

package/dist/components/button/index.js

@@ -1,32 +1,32 @@
 export { Button } from '../../chunk-QTYNFISP.js';
+import '../../chunk-E5TYGWGE.js';
+import '../../chunk-OCOCENE6.js';
 import '../../chunk-OQCNPNPS.js';
-import '../../chunk-M7NIRB3U.js';
 import '../../chunk-WXZE35FK.js';
 import '../../chunk-U7XZJQ4O.js';
-import '../../chunk-K5AURCK5.js';
 import '../../chunk-WMGJCB7O.js';
+import '../../chunk-K5AURCK5.js';
+import '../../chunk-PBEZZMAB.js';
+import '../../chunk-KGGCA634.js';
 import '../../chunk-4TRADSTP.js';
-import '../../chunk-E5TYGWGE.js';
+import '../../chunk-M7NIRB3U.js';
 import '../../chunk-DTSFPOLX.js';
 import '../../chunk-P5IUC7HJ.js';
 import '../../chunk-IWF52DDE.js';
-import '../../chunk-OCOCENE6.js';
-import '../../chunk-3MH6P44N.js';
+import '../../chunk-HNRVLRMN.js';
+import '../../chunk-BTSHACKG.js';
 import '../../chunk-VT5GDGZJ.js';
-import '../../chunk-UGSNASZM.js';
-import '../../chunk-KGGCA634.js';
+import '../../chunk-3MH6P44N.js';
 import '../../chunk-XJIUGEPN.js';
+import '../../chunk-UGSNASZM.js';
 import '../../chunk-I3RSTJP6.js';
 import '../../chunk-YUMKV5TH.js';
 import '../../chunk-DL54DIMD.js';
-import '../../chunk-PBEZZMAB.js';
 import '../../chunk-U3QKV7I4.js';
 import '../../chunk-6BSR3O2J.js';
 import '../../chunk-5F2Y65JH.js';
 import '../../chunk-3RK5PCIC.js';
 import '../../chunk-P4JIMFSL.js';
-import '../../chunk-BTSHACKG.js';
-import '../../chunk-HNRVLRMN.js';
 import '../../chunk-SB5UG7OC.js';
 import '../../chunk-B7RHEMZH.js';
 import '../../chunk-5MV54MWS.js';