@djangocfg/ui-core 2.1.412 → 2.1.413

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.412",
+  "version": "2.1.413",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -95,7 +95,7 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.412",
+    "@djangocfg/i18n": "^2.1.413",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -166,8 +166,8 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.412",
-    "@djangocfg/typescript-config": "^2.1.412",
+    "@djangocfg/i18n": "^2.1.413",
+    "@djangocfg/typescript-config": "^2.1.413",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

package/src/components/data/avatar-group/index.tsx

@@ -0,0 +1,224 @@
+"use client"
+
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+
+import { cn } from "../../../lib/utils"
+
+const avatarGroupVariants = cva("flex items-center", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row",
+      vertical: "flex-col",
+    },
+    dir: {
+      ltr: "",
+      rtl: "",
+    },
+  },
+  compoundVariants: [
+    {
+      orientation: "horizontal",
+      dir: "ltr",
+      className: "-space-x-1",
+    },
+    {
+      orientation: "horizontal",
+      dir: "rtl",
+      className: "flex-row-reverse -space-x-1 space-x-reverse",
+    },
+    {
+      orientation: "vertical",
+      dir: "ltr",
+      className: "-space-y-1",
+    },
+    {
+      orientation: "vertical",
+      dir: "rtl",
+      className: "flex-col-reverse -space-y-1 space-y-reverse",
+    },
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    dir: "ltr",
+  },
+})
+
+interface AvatarGroupProps
+  extends Omit<React.ComponentProps<"div">, "dir">,
+    VariantProps<typeof avatarGroupVariants> {
+  size?: number
+  max?: number
+  asChild?: boolean
+  reverse?: boolean
+  renderOverflow?: (count: number) => React.ReactNode
+}
+
+function AvatarGroup(props: AvatarGroupProps) {
+  const {
+    orientation = "horizontal",
+    dir = "ltr",
+    size = 40,
+    max,
+    asChild,
+    reverse = false,
+    renderOverflow,
+    className,
+    children,
+    ...rootProps
+  } = props
+
+  const childrenArray = React.Children.toArray(children).filter(
+    React.isValidElement,
+  )
+  const itemCount = childrenArray.length
+  const shouldTruncate = max && itemCount > max
+  const visibleItems = shouldTruncate
+    ? childrenArray.slice(0, max - 1)
+    : childrenArray
+  const overflowCount = shouldTruncate ? itemCount - (max - 1) : 0
+  const totalRenderedItems = shouldTruncate ? max : itemCount
+
+  const RootPrimitive = asChild ? Slot : "div"
+
+  return (
+    <RootPrimitive
+      data-orientation={orientation}
+      data-slot="avatar-group"
+      {...rootProps}
+      className={cn(avatarGroupVariants({ orientation, dir }), className)}
+    >
+      {visibleItems.map((child, index) => (
+        <AvatarGroupItem
+          key={index}
+          child={child}
+          index={index}
+          itemCount={totalRenderedItems}
+          orientation={orientation}
+          dir={dir}
+          size={size}
+          reverse={reverse}
+        />
+      ))}
+      {shouldTruncate && (
+        <AvatarGroupItem
+          key="overflow"
+          child={
+            renderOverflow ? (
+              renderOverflow(overflowCount)
+            ) : (
+              <div className="inline-flex size-full items-center justify-center rounded-full bg-muted font-medium text-muted-foreground text-xs">
+                +{overflowCount}
+              </div>
+            )
+          }
+          index={visibleItems.length}
+          itemCount={totalRenderedItems}
+          orientation={orientation}
+          dir={dir}
+          size={size}
+          reverse={reverse}
+        />
+      )}
+    </RootPrimitive>
+  )
+}
+
+interface AvatarGroupItemProps
+  extends Omit<React.ComponentProps<"div">, "dir">,
+    VariantProps<typeof avatarGroupVariants> {
+  child: React.ReactNode
+  index: number
+  itemCount: number
+  size: number
+  reverse: boolean
+}
+
+function AvatarGroupItem(props: AvatarGroupItemProps) {
+  const {
+    child,
+    index,
+    size,
+    orientation,
+    dir = "ltr",
+    reverse = false,
+    itemCount,
+    className,
+    style,
+    ...itemProps
+  } = props
+
+  const maskStyle = React.useMemo<React.CSSProperties>(() => {
+    let maskImage = ""
+
+    let shouldMask = false
+
+    if (orientation === "vertical" && dir === "rtl" && reverse) {
+      shouldMask = index !== itemCount - 1
+    } else {
+      shouldMask = reverse ? index < itemCount - 1 : index > 0
+    }
+
+    if (shouldMask) {
+      const maskRadius = size / 2
+      const maskOffset = size / 4 + size / 10
+
+      if (orientation === "vertical") {
+        if (dir === "ltr") {
+          if (reverse) {
+            maskImage = `radial-gradient(circle ${maskRadius}px at 50% ${size + maskOffset}px, transparent 99%, white 100%)`
+          } else {
+            maskImage = `radial-gradient(circle ${maskRadius}px at 50% -${maskOffset}px, transparent 99%, white 100%)`
+          }
+        } else {
+          if (reverse) {
+            maskImage = `radial-gradient(circle ${maskRadius}px at 50% -${maskOffset}px, transparent 99%, white 100%)`
+          } else {
+            maskImage = `radial-gradient(circle ${maskRadius}px at 50% ${size + maskOffset}px, transparent 99%, white 100%)`
+          }
+        }
+      } else {
+        if (dir === "ltr") {
+          if (reverse) {
+            maskImage = `radial-gradient(circle ${maskRadius}px at ${size + maskOffset}px 50%, transparent 99%, white 100%)`
+          } else {
+            maskImage = `radial-gradient(circle ${maskRadius}px at -${maskOffset}px 50%, transparent 99%, white 100%)`
+          }
+        } else {
+          if (reverse) {
+            maskImage = `radial-gradient(circle ${maskRadius}px at -${maskOffset}px 50%, transparent 99%, white 100%)`
+          } else {
+            maskImage = `radial-gradient(circle ${maskRadius}px at ${size + maskOffset}px 50%, transparent 99%, white 100%)`
+          }
+        }
+      }
+    }
+
+    return {
+      width: size,
+      height: size,
+      maskImage,
+    }
+  }, [size, index, orientation, dir, reverse, itemCount])
+
+  return (
+    <div
+      data-slot="avatar-group-item"
+      className={cn(
+        "size-full shrink-0 overflow-hidden rounded-full [&_img]:size-full",
+        className,
+      )}
+      style={{
+        ...maskStyle,
+        ...style,
+      }}
+      {...itemProps}
+    >
+      {child}
+    </div>
+  )
+}
+
+export { AvatarGroup }
+export type { AvatarGroupProps }

package/src/components/data/badge-overflow/index.tsx

@@ -0,0 +1,259 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+
+import { cn } from "../../../lib/utils"
+
+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 BadgeOverflowElement = HTMLDivElement
+
+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
+  }
+
+function BadgeOverflow<T = string>(props: BadgeOverflowProps<T>) {
+  const {
+    items,
+    getBadgeLabel: getBadgeLabelProp,
+    lineCount = 1,
+    renderBadge,
+    renderOverflow,
+    asChild,
+    className,
+    style,
+    ref,
+    ...rootProps
+  } = props
+
+  const getBadgeLabel = React.useCallback(
+    (item: T): string => {
+      if (typeof item === "object" && !getBadgeLabelProp) {
+        throw new Error(
+          "`getBadgeLabel` is required when using array of objects",
+        )
+      }
+      return getBadgeLabelProp ? getBadgeLabelProp(item) : (item as string)
+    },
+    [getBadgeLabelProp],
+  )
+
+  const rootRef = React.useRef<BadgeOverflowElement | null>(null)
+  const measureRef = React.useRef<HTMLDivElement | null>(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<Map<string, number>>(
+    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 = new Map<string, number>()
+      const measureChildren = measureRef.current.children
+
+      for (let i = 0; i < items.length; i++) {
+        const child = measureChildren[i] as HTMLElement | undefined
+        if (child) {
+          const label = getBadgeLabel(items[i] as T)
+          widthMap.set(label, child.offsetWidth)
+        }
+      }
+      setBadgeWidths(widthMap)
+
+      const firstBadge = measureChildren[0] as HTMLElement | undefined
+      if (firstBadge) {
+        setBadgeHeight(firstBadge.offsetHeight || 20)
+      }
+
+      const overflowChild = measureChildren[items.length] as
+        | HTMLElement
+        | undefined
+
+      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: T[] = []
+
+    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) {
+        // Skip items that haven't been measured yet
+        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 {
+        // We're on the last line and this badge doesn't fit
+        break
+      }
+    }
+
+    return {
+      visibleItems: visible,
+      hiddenCount: Math.max(0, items.length - visible.length),
+    }
+  }, [
+    items,
+    getBadgeLabel,
+    containerWidth,
+    lineCount,
+    badgeGap,
+    overflowBadgeWidth,
+    badgeWidths,
+  ])
+
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <>
+      <div
+        ref={measureRef}
+        className="pointer-events-none invisible absolute flex flex-wrap"
+        style={{ gap: badgeGap }}
+      >
+        {items.map((item, index) => (
+          <React.Fragment key={index}>
+            {renderBadge(item, getBadgeLabel(item))}
+          </React.Fragment>
+        ))}
+        {renderOverflow ? (
+          renderOverflow(99)
+        ) : (
+          <div className="inline-flex h-5 shrink-0 items-center rounded-md border px-1.5 font-semibold text-xs">
+            +99
+          </div>
+        )}
+      </div>
+      {isMeasured ? (
+        <Comp
+          data-slot="badge-overflow"
+          {...rootProps}
+          ref={ref}
+          className={cn("flex flex-wrap", className)}
+          style={{
+            gap: badgeGap,
+            ...style,
+          }}
+        >
+          {visibleItems.map((item, index) => (
+            <React.Fragment key={index}>
+              {renderBadge(item, getBadgeLabel(item))}
+            </React.Fragment>
+          ))}
+          {hiddenCount > 0 &&
+            (renderOverflow ? (
+              renderOverflow(hiddenCount)
+            ) : (
+              <div className="inline-flex h-5 shrink-0 items-center rounded-md border px-1.5 font-semibold text-xs">
+                +{hiddenCount}
+              </div>
+            ))}
+        </Comp>
+      ) : (
+        <Comp
+          data-slot="badge-overflow"
+          {...rootProps}
+          ref={ref}
+          className={cn("flex flex-wrap", className)}
+          style={{
+            gap: badgeGap,
+            minHeight: placeholderHeight,
+            ...style,
+          }}
+        >
+          {items
+            .slice(
+              0,
+              Math.min(items.length, lineCount * 3 - (lineCount > 1 ? 1 : 0)),
+            )
+            .map((item, index) => (
+              <React.Fragment key={index}>
+                {renderBadge(item, getBadgeLabel(item))}
+              </React.Fragment>
+            ))}
+        </Comp>
+      )}
+    </>
+  )
+}
+
+export { BadgeOverflow }
+export type { BadgeOverflowProps }