@comitor/ui 2.0.0 → 2.1.0

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

@@ -0,0 +1,179 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { useComposedRefs } from "../../lib/compose-refs.js";
+import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effect.js";
+import { Badge } from "./badge.js";
+const defaultOverflowLabel = (count) => `v\xE0 ${count} m\u1EE5c kh\xE1c`;
+function BadgeOverflow(props) {
+  const {
+    items,
+    getBadgeLabel: getBadgeLabelProp,
+    lineCount = 1,
+    renderBadge,
+    renderOverflow,
+    overflowLabel = defaultOverflowLabel,
+    asChild,
+    className,
+    style,
+    ref,
+    ...rootProps
+  } = props;
+  const getBadgeLabel = React.useCallback(
+    (item) => {
+      if (typeof item === "object" && !getBadgeLabelProp) {
+        throw new Error("`getBadgeLabel` l\xE0 b\u1EAFt bu\u1ED9c khi ph\u1EA7n t\u1EED l\xE0 object");
+      }
+      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());
+  useIsomorphicLayoutEffect(() => {
+    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 renderDefaultOverflow = (count) => /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "shrink-0", children: [
+    /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+      "+",
+      count
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: overflowLabel(count) })
+  ] });
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { ref: measureRef, className: "pointer-events-none invisible absolute flex flex-wrap", style: { gap: badgeGap }, children: [
+      items.map((item, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: thượng nguồn khoá theo chỉ số — nhãn có thể trùng nhau
+        /* @__PURE__ */ jsx(React.Fragment, { children: renderBadge(item, getBadgeLabel(item)) }, index)
+      )),
+      renderOverflow ? renderOverflow(99) : renderDefaultOverflow(99)
+    ] }),
+    isMeasured ? /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        "data-slot": "badge-overflow",
+        ...rootProps,
+        ref: composedRef,
+        className: cn("flex flex-wrap", className),
+        style: {
+          gap: badgeGap,
+          ...style
+        },
+        children: [
+          visibleItems.map((item, index) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: thượng nguồn khoá theo chỉ số — nhãn có thể trùng nhau
+            /* @__PURE__ */ jsx(React.Fragment, { children: renderBadge(item, getBadgeLabel(item)) }, index)
+          )),
+          hiddenCount > 0 && (renderOverflow ? renderOverflow(hiddenCount) : renderDefaultOverflow(hiddenCount))
+        ]
+      }
+    ) : /* @__PURE__ */ jsx(
+      Comp,
+      {
+        "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) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: thượng nguồn khoá theo chỉ số — nhãn có thể trùng nhau
+          /* @__PURE__ */ jsx(React.Fragment, { children: renderBadge(item, getBadgeLabel(item)) }, index)
+        ))
+      }
+    )
+  ] });
+}
+export {
+  BadgeOverflow
+};
+//# sourceMappingURL=badge-overflow.js.map

package/dist/components/ui/badge-overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/badge-overflow.tsx"],"sourcesContent":["\"use client\";\n\n/*\n * Port từ Dice UI (https://diceui.com/docs/components/badge-overflow) — MIT, © 2024 Sadman Sakib.\n * Giữ nguyên cấu trúc thượng nguồn để còn đối chiếu ngược được; mọi chỗ đổi đều có chú thích.\n *\n * ⚠ Cố ý KHÔNG dùng `src/data-grid/use-badge-overflow.ts` (biến thể của tablecn): tầng\n * `data-grid` là entry riêng kéo theo peer `@tanstack/react-table`, entry chính không được chạm.\n */\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { useComposedRefs } from \"../../lib/compose-refs.js\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/use-isomorphic-layout-effect.js\";\nimport { Badge } from \"./badge.js\";\n\ninterface GetBadgeLabel<T> {\n  /**\n   * Trả về chuỗi nhãn của mỗi badge.\n   * Không bắt buộc với mảng giá trị nguyên thuỷ (chuỗi, số); BẮT BUỘC với mảng object.\n   * @example getBadgeLabel={(item) => item.name}\n   */\n  getBadgeLabel: (item: T) => string;\n}\n\ntype BadgeOverflowElement = React.ComponentRef<typeof BadgeOverflow>;\n\ntype BadgeOverflowProps<T = string> = React.ComponentProps<\"div\"> &\n  (T extends object ? GetBadgeLabel<T> : Partial<GetBadgeLabel<T>>) & {\n    items: T[];\n    lineCount?: number;\n    renderBadge: (item: T, label: string) => React.ReactNode;\n    renderOverflow?: (count: number) => React.ReactNode;\n    /**\n     * Câu trình đọc màn hình đọc thay cho chữ \"+N\" của ô tràn MẶC ĐỊNH — mặc định\n     * `(count) => \"và \" + count + \" mục khác\"`.\n     *\n     * ⚠ Thêm so với thượng nguồn: \"+3\" đọc lên thành \"cộng ba\" — không nói ba CÁI GÌ. Chữ \"+N\"\n     * vẫn hiện nhưng ẩn khỏi trình đọc màn hình; câu này nằm trong `sr-only` ngay cạnh. Là HÀM\n     * vì có số chèn vào giữa câu. Không áp dụng khi truyền `renderOverflow` — khi đó nội dung ô\n     * tràn (kể cả phần cho trình đọc màn hình) do app tự quyết.\n     */\n    overflowLabel?: (count: number) => string;\n    asChild?: boolean;\n  };\n\nconst defaultOverflowLabel = (count: number) => `và ${count} mục khác`;\n\nfunction BadgeOverflow<T = string>(props: BadgeOverflowProps<T>) {\n  const {\n    items,\n    getBadgeLabel: getBadgeLabelProp,\n    lineCount = 1,\n    renderBadge,\n    renderOverflow,\n    overflowLabel = defaultOverflowLabel,\n    asChild,\n    className,\n    style,\n    ref,\n    ...rootProps\n  } = props;\n\n  const getBadgeLabel = React.useCallback(\n    (item: T): string => {\n      if (typeof item === \"object\" && !getBadgeLabelProp) {\n        throw new Error(\"`getBadgeLabel` là bắt buộc khi phần tử là object\");\n      }\n      return getBadgeLabelProp ? getBadgeLabelProp(item) : (item as string);\n    },\n    [getBadgeLabelProp]\n  );\n\n  const rootRef = React.useRef<BadgeOverflowElement | null>(null);\n  const composedRef = useComposedRefs(ref, rootRef);\n  const measureRef = React.useRef<HTMLDivElement | null>(null);\n  const [containerWidth, setContainerWidth] = React.useState(0);\n  const [badgeGap, setBadgeGap] = React.useState(4);\n  const [badgeHeight, setBadgeHeight] = React.useState(20);\n  const [overflowBadgeWidth, setOverflowBadgeWidth] = React.useState(40);\n  const [isMeasured, setIsMeasured] = React.useState(false);\n  const [badgeWidths, setBadgeWidths] = React.useState<Map<string, number>>(new Map());\n\n  // ⚠ Khác thượng nguồn: `useIsomorphicLayoutEffect` thay `React.useLayoutEffect` — an toàn khi SSR.\n  useIsomorphicLayoutEffect(() => {\n    if (!rootRef.current || !measureRef.current) return;\n\n    function measureContainer() {\n      if (!rootRef.current || !measureRef.current) return;\n\n      const computedStyle = getComputedStyle(rootRef.current);\n\n      const gapValue = computedStyle.gap;\n      const gap = gapValue ? parseFloat(gapValue) : 4;\n      setBadgeGap(gap);\n\n      const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n      const paddingRight = parseFloat(computedStyle.paddingRight) || 0;\n      const totalPadding = paddingLeft + paddingRight;\n\n      const widthMap = new Map<string, number>();\n      const measureChildren = measureRef.current.children;\n\n      for (let i = 0; i < items.length; i++) {\n        const child = measureChildren[i] as HTMLElement | undefined;\n        if (child) {\n          const label = getBadgeLabel(items[i] as T);\n          widthMap.set(label, child.offsetWidth);\n        }\n      }\n      setBadgeWidths(widthMap);\n\n      const firstBadge = measureChildren[0] as HTMLElement | undefined;\n      if (firstBadge) {\n        setBadgeHeight(firstBadge.offsetHeight || 20);\n      }\n\n      const overflowChild = measureChildren[items.length] as HTMLElement | undefined;\n\n      if (overflowChild) {\n        setOverflowBadgeWidth(overflowChild.offsetWidth || 40);\n      }\n\n      const width = rootRef.current.clientWidth - totalPadding;\n      setContainerWidth(width);\n      setIsMeasured(true);\n    }\n\n    measureContainer();\n\n    const resizeObserver = new ResizeObserver(measureContainer);\n    resizeObserver.observe(rootRef.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [items, getBadgeLabel]);\n\n  const placeholderHeight = React.useMemo(\n    () => badgeHeight * lineCount + badgeGap * (lineCount - 1),\n    [badgeHeight, badgeGap, lineCount]\n  );\n\n  const { visibleItems, hiddenCount } = React.useMemo(() => {\n    if (!containerWidth || items.length === 0 || badgeWidths.size === 0) {\n      return { visibleItems: items, hiddenCount: 0 };\n    }\n\n    let currentLineWidth = 0;\n    let currentLine = 1;\n    const visible: T[] = [];\n\n    for (let i = 0; i < items.length; i++) {\n      const item = items[i];\n      if (!item) continue;\n\n      const label = getBadgeLabel(item);\n      const badgeWidth = badgeWidths.get(label);\n\n      if (!badgeWidth) {\n        // Bỏ qua mục chưa đo được.\n        continue;\n      }\n\n      const widthWithGap = badgeWidth + badgeGap;\n      const isLastLine = currentLine === lineCount;\n      const hasMoreItems = i < items.length - 1;\n\n      const availableWidth =\n        isLastLine && hasMoreItems ? containerWidth - overflowBadgeWidth - badgeGap : containerWidth;\n\n      if (currentLineWidth + widthWithGap <= availableWidth) {\n        currentLineWidth += widthWithGap;\n        visible.push(item);\n      } else if (currentLine < lineCount) {\n        currentLine++;\n        currentLineWidth = widthWithGap;\n        visible.push(item);\n      } else {\n        // Đang ở dòng cuối và badge này không vừa.\n        break;\n      }\n    }\n\n    return {\n      visibleItems: visible,\n      hiddenCount: Math.max(0, items.length - visible.length)\n    };\n  }, [items, getBadgeLabel, containerWidth, lineCount, badgeGap, overflowBadgeWidth, badgeWidths]);\n\n  /*\n   * ⚠ Khác thượng nguồn: ô tràn mặc định là `Badge variant=\"outline\"` của gói (cùng khuôn \"+N\"\n   * với `Combobox`) thay cho một `div` tự vẽ viền. Bản gốc chỉ viết `border` trần, mà ở gói này\n   * `border` trần nhận viền TRANG TRÍ 1,16:1 — ô \"+N\" nền trong suốt sẽ gần như tàng hình. Biến\n   * thể `outline` dùng `border-control-edge` (3,83:1 light · 4,94:1 dark) và cao bằng `Badge`\n   * mà app gần như chắc chắn dùng trong `renderBadge`.\n   *\n   * Chữ \"+N\" ẩn khỏi trình đọc màn hình, câu `overflowLabel` đọc thay — xem prop đó.\n   */\n  const renderDefaultOverflow = (count: number) => (\n    <Badge variant=\"outline\" className=\"shrink-0\">\n      <span aria-hidden=\"true\">+{count}</span>\n      <span className=\"sr-only\">{overflowLabel(count)}</span>\n    </Badge>\n  );\n\n  const Comp = asChild ? Slot : \"div\";\n\n  return (\n    <>\n      <div ref={measureRef} className=\"pointer-events-none invisible absolute flex flex-wrap\" style={{ gap: badgeGap }}>\n        {items.map((item, index) => (\n          // biome-ignore lint/suspicious/noArrayIndexKey: thượng nguồn khoá theo chỉ số — nhãn có thể trùng nhau\n          <React.Fragment key={index}>{renderBadge(item, getBadgeLabel(item))}</React.Fragment>\n        ))}\n        {renderOverflow ? renderOverflow(99) : renderDefaultOverflow(99)}\n      </div>\n      {isMeasured ? (\n        <Comp\n          data-slot=\"badge-overflow\"\n          {...rootProps}\n          ref={composedRef}\n          className={cn(\"flex flex-wrap\", className)}\n          style={{\n            gap: badgeGap,\n            ...style\n          }}\n        >\n          {visibleItems.map((item, index) => (\n            // biome-ignore lint/suspicious/noArrayIndexKey: thượng nguồn khoá theo chỉ số — nhãn có thể trùng nhau\n            <React.Fragment key={index}>{renderBadge(item, getBadgeLabel(item))}</React.Fragment>\n          ))}\n          {hiddenCount > 0 && (renderOverflow ? renderOverflow(hiddenCount) : renderDefaultOverflow(hiddenCount))}\n        </Comp>\n      ) : (\n        <Comp\n          data-slot=\"badge-overflow\"\n          {...rootProps}\n          ref={composedRef}\n          className={cn(\"flex flex-wrap\", className)}\n          style={{\n            gap: badgeGap,\n            minHeight: placeholderHeight,\n            ...style\n          }}\n        >\n          {items.slice(0, Math.min(items.length, lineCount * 3 - (lineCount > 1 ? 1 : 0))).map((item, index) => (\n            // biome-ignore lint/suspicious/noArrayIndexKey: thượng nguồn khoá theo chỉ số — nhãn có thể trùng nhau\n            <React.Fragment key={index}>{renderBadge(item, getBadgeLabel(item))}</React.Fragment>\n          ))}\n        </Comp>\n      )}\n    </>\n  );\n}\n\nexport { BadgeOverflow, type BadgeOverflowProps };\n"],"mappings":"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","names":[]}

package/dist/components/ui/banner.d.ts

@@ -0,0 +1,79 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Button } from './button.js';
+
+type BannerVariant = "default" | "info" | "success" | "warning" | "destructive";
+type BannerSide = "top" | "bottom";
+type BannerStrategy = "fixed" | "static" | "sticky" | "absolute";
+interface DivProps extends React.ComponentProps<"div"> {
+    asChild?: boolean;
+}
+interface BannerRenderProps {
+    id: string;
+    variant?: BannerVariant;
+    dismissible: boolean;
+    onClose: () => void;
+    onRemove: () => void;
+}
+type BannerContentValue = React.ReactNode | ((props: BannerRenderProps) => React.ReactNode);
+interface BannerData {
+    id: string;
+    content: BannerContentValue;
+    variant?: BannerVariant;
+    priority?: number;
+    duration?: number;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+}
+declare function useBanner(): {
+    id: string | undefined;
+    variant: BannerVariant | null | undefined;
+    dismissible: boolean | undefined;
+    onClose: (() => void) | undefined;
+    onRemove: (() => void) | undefined;
+};
+interface BannersProps {
+    children?: React.ReactNode;
+    maxVisible?: number;
+    side?: BannerSide;
+    strategy?: BannerStrategy;
+    container?: Element | DocumentFragment | null;
+}
+declare function Banners(props: BannersProps): React.JSX.Element;
+declare function useBanners(): {
+    onBannerAdd: (banner: Omit<BannerData, "id">) => string;
+    onBannerRemove: (id: string) => void;
+    onBannersClear: () => void;
+    banners: BannerData[];
+};
+declare const bannerVariants: (props?: ({
+    variant?: "default" | "success" | "warning" | "destructive" | "info" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BannerProps extends DivProps, VariantProps<typeof bannerVariants> {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onDismiss?: () => void;
+    priority?: number;
+    duration?: number;
+    dismissible?: boolean;
+}
+declare function Banner(props: BannerProps): React.JSX.Element | null;
+declare function BannerIcon(props: DivProps): React.JSX.Element;
+declare function BannerContent(props: DivProps): React.JSX.Element;
+declare function BannerTitle(props: React.ComponentProps<"div">): React.JSX.Element;
+declare function BannerDescription(props: React.ComponentProps<"div">): React.JSX.Element;
+declare function BannerActions(props: DivProps): React.JSX.Element;
+type BannerCloseProps = React.ComponentProps<typeof Button>;
+/**
+ * Nút đóng banner. Không truyền `children` thì vẽ icon X.
+ *
+ * ⚠ Khác thượng nguồn: có tên cho trình đọc màn hình — `aria-label` mặc định "Đóng thông báo",
+ * ghi đè bằng chính prop `aria-label`. Bản gốc là `Button` chỉ chứa icon X, tức một nút KHÔNG
+ * TÊN. Nếu `children` là CHỮ nhìn thấy được thì truyền `aria-label` trùng với chữ đó (WCAG
+ * 2.5.3), hoặc `aria-label={undefined}`.
+ */
+declare function BannerClose(props: BannerCloseProps): React.JSX.Element;
+
+export { Banner, BannerActions, BannerClose, type BannerCloseProps, BannerContent, type BannerData, BannerDescription, BannerIcon, type BannerProps, type BannerRenderProps, BannerTitle, type BannerVariant, Banners, type BannersProps, useBanner, useBanners };