@onesaz/ui 0.3.15 → 0.3.17

package/dist/index.js

@@ -4859,6 +4859,29 @@ var PinnedRowsRenderer = ({
   if (pinnedRows.length === 0) return null;
   return /* @__PURE__ */ jsx35("tbody", { children: pinnedRows.map((row, rowIndex) => {
     const customClassName = getRowClassName?.({ row: row.original, rowIndex });
+    const visibleCells = row.getVisibleCells();
+    const colSpanSkipSet = /* @__PURE__ */ new Set();
+    const colSpanValues = /* @__PURE__ */ new Map();
+    visibleCells.forEach((cell, cellIndex) => {
+      if (colSpanSkipSet.has(cellIndex)) return;
+      const meta = cell.column.columnDef.meta;
+      const colSpanDef = meta?.colSpan;
+      if (colSpanDef) {
+        const value = cell.getValue();
+        let span;
+        if (typeof colSpanDef === "function") {
+          span = colSpanDef({ row: row.original, value, field: cell.column.id, rowIndex });
+        } else if (typeof colSpanDef === "number") {
+          span = colSpanDef;
+        }
+        if (span && span > 1) {
+          colSpanValues.set(cellIndex, span);
+          for (let j = 1; j < span && cellIndex + j < visibleCells.length; j++) {
+            colSpanSkipSet.add(cellIndex + j);
+          }
+        }
+      }
+    });
     return /* @__PURE__ */ jsx35(
       "tr",
       {
@@ -4868,7 +4891,8 @@ var PinnedRowsRenderer = ({
           position === "bottom" && "bottom-0 border-t-2 border-t-border",
           customClassName
         ),
-        children: row.getVisibleCells().map((cell) => {
+        children: visibleCells.map((cell, cellIndex) => {
+          if (colSpanSkipSet.has(cellIndex)) return null;
           const meta = cell.column.columnDef.meta;
           const align = meta?.align || "left";
           const wrapText = meta?.wrapText !== void 0 ? meta.wrapText : globalWrapText;
@@ -4878,9 +4902,19 @@ var PinnedRowsRenderer = ({
           const colWidth = columnWidths.get(cell.column.id);
           const width = colWidth?.width || cell.column.getSize();
           const pinnedInfo = pinnedColumnOffsets?.get(cell.column.id);
+          const htmlColSpan = colSpanValues.get(cellIndex);
+          let totalWidth = width;
+          if (htmlColSpan && htmlColSpan > 1) {
+            for (let j = 1; j < htmlColSpan && cellIndex + j < visibleCells.length; j++) {
+              const spannedCell = visibleCells[cellIndex + j];
+              const spannedColWidth = columnWidths.get(spannedCell.column.id);
+              totalWidth += spannedColWidth?.width || spannedCell.column.getSize();
+            }
+          }
           return /* @__PURE__ */ jsx35(
             "td",
             {
+              colSpan: htmlColSpan,
               className: cn(
                 "px-4 overflow-hidden bg-muted border-b border-border",
                 showCellVerticalBorder && "border-r border-border",
@@ -4892,8 +4926,8 @@ var PinnedRowsRenderer = ({
                 height: wrapText || scrollable ? "auto" : rowHeight,
                 minHeight: rowHeight,
                 textAlign: align,
-                width,
-                maxWidth: colWidth?.maxWidth || width,
+                width: htmlColSpan && htmlColSpan > 1 ? totalWidth : width,
+                maxWidth: htmlColSpan && htmlColSpan > 1 ? void 0 : colWidth?.maxWidth || width,
                 minWidth: colWidth?.minWidth || cell.column.columnDef.minSize,
                 ...pinnedInfo ? {
                   position: "sticky",
@@ -5025,7 +5059,7 @@ function DataGrid({
   height = 400,
   minHeight,
   maxHeight,
-  density = "standard",
+  density = "compact",
   showCellVerticalBorder = false,
   showColumnVerticalBorder = false,
   hideFooter = false,
@@ -5559,6 +5593,7 @@ var ListDivider = React36.forwardRef(
 ListDivider.displayName = "ListDivider";
 
 // src/components/charts.tsx
+import * as React37 from "react";
 import {
   BarChart as RechartsBarChart,
   Bar,
@@ -5626,7 +5661,7 @@ var BarChart = ({
       name: keyConfig.name || keyConfig.dataKey,
       radius: barProps.radius,
       maxBarSize: barProps.maxBarSize,
-      minPointSize: barProps.minPointSize,
+      ...barProps.minPointSize !== void 0 && { minPointSize: barProps.minPointSize },
       children: labelList && /* @__PURE__ */ jsx37(
         LabelList,
         {
@@ -5646,7 +5681,7 @@ var BarChart = ({
       name: name || dataKey,
       radius: barProps.radius,
       maxBarSize: barProps.maxBarSize,
-      minPointSize: barProps.minPointSize,
+      ...barProps.minPointSize !== void 0 && { minPointSize: barProps.minPointSize },
       children: [
         labelList && /* @__PURE__ */ jsx37(
           LabelList,
@@ -6520,11 +6555,179 @@ var MultiProgressDonut = ({
     ] }, index);
   }) });
 };
+var simulatePacking = (data, width, height, minRadius, maxRadius) => {
+  if (data.length === 0) return [];
+  const values = data.map((d) => d.value);
+  const minValue = Math.min(...values);
+  const maxValue = Math.max(...values);
+  const valueRange = maxValue - minValue || 1;
+  const nodes = data.map((item) => {
+    const normalizedValue = (item.value - minValue) / valueRange;
+    const radius = minRadius + normalizedValue * (maxRadius - minRadius);
+    return {
+      x: width / 2 + (Math.random() - 0.5) * width * 0.3,
+      y: height / 2 + (Math.random() - 0.5) * height * 0.3,
+      radius,
+      data: item,
+      vx: 0,
+      vy: 0
+    };
+  });
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const iterations = 100;
+  for (let i = 0; i < iterations; i++) {
+    for (const node of nodes) {
+      node.vx += (centerX - node.x) * 0.01;
+      node.vy += (centerY - node.y) * 0.01;
+      for (const other of nodes) {
+        if (node === other) continue;
+        const dx = node.x - other.x;
+        const dy = node.y - other.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const minDist = node.radius + other.radius + 2;
+        if (distance < minDist && distance > 0) {
+          const force = (minDist - distance) / distance * 0.5;
+          node.vx += dx * force;
+          node.vy += dy * force;
+        }
+      }
+    }
+    for (const node of nodes) {
+      node.x += node.vx;
+      node.y += node.vy;
+      node.vx *= 0.8;
+      node.vy *= 0.8;
+      node.x = Math.max(node.radius, Math.min(width - node.radius, node.x));
+      node.y = Math.max(node.radius, Math.min(height - node.radius, node.y));
+    }
+  }
+  return nodes.map(({ x, y, radius, data: data2 }) => ({ x, y, radius, data: data2 }));
+};
+var PackedBubbleChart = ({
+  data,
+  title,
+  height = 300,
+  minSize = 30,
+  maxSize = 70,
+  defaultColor = "#3BBDED",
+  colorByValue,
+  showLabels = true,
+  showValues = false,
+  onBubbleClick,
+  titleStyle,
+  className
+}) => {
+  const containerRef = React37.useRef(null);
+  const [dimensions, setDimensions] = React37.useState({ width: 400, height: 300 });
+  const [bubbles, setBubbles] = React37.useState([]);
+  React37.useEffect(() => {
+    const updateDimensions = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setDimensions({
+          width: rect.width || 400,
+          height: typeof height === "number" ? height : 300
+        });
+      }
+    };
+    updateDimensions();
+    window.addEventListener("resize", updateDimensions);
+    return () => window.removeEventListener("resize", updateDimensions);
+  }, [height]);
+  React37.useEffect(() => {
+    if (data.length === 0) {
+      setBubbles([]);
+      return;
+    }
+    const minRadius = Math.min(dimensions.width, dimensions.height) * minSize / 200;
+    const maxRadius = Math.min(dimensions.width, dimensions.height) * maxSize / 200;
+    const result = simulatePacking(data, dimensions.width, dimensions.height, minRadius, maxRadius);
+    setBubbles(result);
+  }, [data, dimensions, minSize, maxSize]);
+  const getBubbleColor = (item) => {
+    if (item.color) return item.color;
+    if (colorByValue) return colorByValue(item.value);
+    return defaultColor;
+  };
+  return /* @__PURE__ */ jsxs22(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative w-full", className),
+      style: { height: typeof height === "number" ? `${height}px` : height },
+      children: [
+        title && /* @__PURE__ */ jsx37(
+          "div",
+          {
+            className: "text-center text-sm font-bold text-[#31456A] dark:text-slate-200",
+            style: titleStyle,
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx37("svg", { width: "100%", height: "100%", className: "overflow-visible", children: bubbles.map((bubble, index) => /* @__PURE__ */ jsxs22(
+          "g",
+          {
+            onClick: () => onBubbleClick?.(bubble.data),
+            style: { cursor: onBubbleClick ? "pointer" : "default" },
+            children: [
+              /* @__PURE__ */ jsx37(
+                "circle",
+                {
+                  cx: bubble.x,
+                  cy: bubble.y,
+                  r: bubble.radius,
+                  fill: getBubbleColor(bubble.data),
+                  opacity: 0.85,
+                  className: "transition-all duration-200 hover:opacity-100"
+                }
+              ),
+              showLabels && /* @__PURE__ */ jsx37(
+                "text",
+                {
+                  x: bubble.x,
+                  y: showValues ? bubble.y - 6 : bubble.y,
+                  textAnchor: "middle",
+                  dominantBaseline: "middle",
+                  className: "fill-current text-black dark:text-white",
+                  style: {
+                    fontSize: Math.max(10, bubble.radius / 3),
+                    fontWeight: "normal",
+                    pointerEvents: "none"
+                  },
+                  children: bubble.data.name
+                }
+              ),
+              showValues && /* @__PURE__ */ jsx37(
+                "text",
+                {
+                  x: bubble.x,
+                  y: bubble.y + 8,
+                  textAnchor: "middle",
+                  dominantBaseline: "middle",
+                  className: "fill-current text-black dark:text-white",
+                  style: {
+                    fontSize: Math.max(8, bubble.radius / 4),
+                    fontWeight: "bold",
+                    pointerEvents: "none"
+                  },
+                  children: bubble.data.value
+                }
+              ),
+              /* @__PURE__ */ jsx37("title", { children: `${bubble.data.name}: ${bubble.data.value}` })
+            ]
+          },
+          `bubble-${index}-${bubble.data.name}`
+        )) })
+      ]
+    }
+  );
+};
 
 // src/components/breadcrumbs.tsx
-import * as React37 from "react";
+import * as React38 from "react";
 import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
-var Breadcrumbs = React37.forwardRef(
+var Breadcrumbs = React38.forwardRef(
   ({
     separator,
     maxItems,
@@ -6534,7 +6737,7 @@ var Breadcrumbs = React37.forwardRef(
     children,
     ...props
   }, ref) => {
-    const childArray = React37.Children.toArray(children);
+    const childArray = React38.Children.toArray(children);
     const totalItems = childArray.length;
     const separatorElement = separator ?? /* @__PURE__ */ jsx38(
       "svg",
@@ -6572,7 +6775,7 @@ var Breadcrumbs = React37.forwardRef(
   }
 );
 Breadcrumbs.displayName = "Breadcrumbs";
-var BreadcrumbItem = React37.forwardRef(
+var BreadcrumbItem = React38.forwardRef(
   ({ current = false, href, onClick, className, children, ...props }, ref) => {
     const baseClasses = cn(
       "text-sm transition-colors",
@@ -6624,7 +6827,7 @@ var BreadcrumbItem = React37.forwardRef(
   }
 );
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React37.forwardRef(
+var BreadcrumbLink = React38.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
     "a",
     {
@@ -6638,7 +6841,7 @@ var BreadcrumbLink = React37.forwardRef(
   )
 );
 BreadcrumbLink.displayName = "BreadcrumbLink";
-var BreadcrumbSeparator = React37.forwardRef(
+var BreadcrumbSeparator = React38.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx38(
     "span",
     {
@@ -6666,7 +6869,7 @@ var BreadcrumbSeparator = React37.forwardRef(
   )
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-var BreadcrumbEllipsis = React37.forwardRef(
+var BreadcrumbEllipsis = React38.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
     "span",
     {
@@ -6698,7 +6901,7 @@ var BreadcrumbEllipsis = React37.forwardRef(
   )
 );
 BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
-var BreadcrumbPage = React37.forwardRef(
+var BreadcrumbPage = React38.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
     "span",
     {
@@ -6712,7 +6915,7 @@ var BreadcrumbPage = React37.forwardRef(
 BreadcrumbPage.displayName = "BreadcrumbPage";
 
 // src/components/dropdown-menu.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
@@ -6721,7 +6924,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React38.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs24(
+var DropdownMenuSubTrigger = React39.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs24(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -6753,7 +6956,7 @@ var DropdownMenuSubTrigger = React38.forwardRef(({ className, inset, children, .
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
+var DropdownMenuSubContent = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -6770,7 +6973,7 @@ var DropdownMenuSubContent = React38.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React38.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx39(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx39(
+var DropdownMenuContent = React39.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx39(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx39(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -6788,7 +6991,7 @@ var DropdownMenuContent = React38.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React38.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx39(
+var DropdownMenuItem = React39.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx39(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -6804,7 +7007,7 @@ var DropdownMenuItem = React38.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React38.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs24(
+var DropdownMenuCheckboxItem = React39.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs24(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -6836,7 +7039,7 @@ var DropdownMenuCheckboxItem = React38.forwardRef(({ className, children, checke
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React38.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs24(
+var DropdownMenuRadioItem = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs24(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -6862,7 +7065,7 @@ var DropdownMenuRadioItem = React38.forwardRef(({ className, children, ...props
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React38.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx39(
+var DropdownMenuLabel = React39.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx39(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -6875,7 +7078,7 @@ var DropdownMenuLabel = React38.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
+var DropdownMenuSeparator = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -6899,14 +7102,14 @@ var DropdownMenuShortcut = ({
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/components/drawer.tsx
-import * as React39 from "react";
+import * as React40 from "react";
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
 import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
 var Drawer = DialogPrimitive2.Root;
 var DrawerTrigger = DialogPrimitive2.Trigger;
 var DrawerClose = DialogPrimitive2.Close;
 var DrawerPortal = DialogPrimitive2.Portal;
-var DrawerOverlay = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+var DrawerOverlay = React40.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
   DialogPrimitive2.Overlay,
   {
     ref,
@@ -6926,7 +7129,7 @@ var slideVariants = {
   top: "inset-x-0 top-0 w-full data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
   bottom: "inset-x-0 bottom-0 w-full data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
 };
-var DrawerContent = React39.forwardRef(({ side = "right", showClose = true, className, children, ...props }, ref) => /* @__PURE__ */ jsxs25(DrawerPortal, { children: [
+var DrawerContent = React40.forwardRef(({ side = "right", showClose = true, className, children, ...props }, ref) => /* @__PURE__ */ jsxs25(DrawerPortal, { children: [
   /* @__PURE__ */ jsx40(DrawerOverlay, {}),
   /* @__PURE__ */ jsxs25(
     DialogPrimitive2.Content,
@@ -6977,7 +7180,7 @@ var DrawerContent = React39.forwardRef(({ side = "right", showClose = true, clas
   )
 ] }));
 DrawerContent.displayName = "DrawerContent";
-var DrawerHeader = React39.forwardRef(
+var DrawerHeader = React40.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
     "div",
     {
@@ -6988,7 +7191,7 @@ var DrawerHeader = React39.forwardRef(
   )
 );
 DrawerHeader.displayName = "DrawerHeader";
-var DrawerTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+var DrawerTitle = React40.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
   DialogPrimitive2.Title,
   {
     ref,
@@ -6997,7 +7200,7 @@ var DrawerTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DrawerTitle.displayName = DialogPrimitive2.Title.displayName;
-var DrawerDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+var DrawerDescription = React40.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
   DialogPrimitive2.Description,
   {
     ref,
@@ -7006,7 +7209,7 @@ var DrawerDescription = React39.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 DrawerDescription.displayName = DialogPrimitive2.Description.displayName;
-var DrawerBody = React39.forwardRef(
+var DrawerBody = React40.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
     "div",
     {
@@ -7017,7 +7220,7 @@ var DrawerBody = React39.forwardRef(
   )
 );
 DrawerBody.displayName = "DrawerBody";
-var DrawerFooter = React39.forwardRef(
+var DrawerFooter = React40.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
     "div",
     {
@@ -7044,14 +7247,14 @@ var SheetBody = DrawerBody;
 var SheetFooter = DrawerFooter;
 
 // src/components/topbar.tsx
-import * as React40 from "react";
+import * as React41 from "react";
 import { Fragment as Fragment6, jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
 var sizeClasses5 = {
   sm: "h-12",
   md: "h-14",
   lg: "h-16"
 };
-var TopBar = React40.forwardRef(
+var TopBar = React41.forwardRef(
   ({ className, bordered = true, sticky = false, size = "md", children, ...props }, ref) => {
     return /* @__PURE__ */ jsx41(
       "header",
@@ -7071,7 +7274,7 @@ var TopBar = React40.forwardRef(
   }
 );
 TopBar.displayName = "TopBar";
-var TopBarBrand = React40.forwardRef(
+var TopBarBrand = React41.forwardRef(
   ({ className, logo, name, href, children, ...props }, ref) => {
     const content = /* @__PURE__ */ jsxs26(Fragment6, { children: [
       logo && /* @__PURE__ */ jsx41("span", { className: "shrink-0", children: logo }),
@@ -7085,7 +7288,7 @@ var TopBarBrand = React40.forwardRef(
   }
 );
 TopBarBrand.displayName = "TopBarBrand";
-var TopBarNav = React40.forwardRef(
+var TopBarNav = React41.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx41(
       "nav",
@@ -7099,7 +7302,7 @@ var TopBarNav = React40.forwardRef(
   }
 );
 TopBarNav.displayName = "TopBarNav";
-var TopBarNavItem = React40.forwardRef(
+var TopBarNavItem = React41.forwardRef(
   ({ className, active, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx41(
       "a",
@@ -7117,7 +7320,7 @@ var TopBarNavItem = React40.forwardRef(
   }
 );
 TopBarNavItem.displayName = "TopBarNavItem";
-var TopBarSection = React40.forwardRef(
+var TopBarSection = React41.forwardRef(
   ({ className, align = "left", children, ...props }, ref) => {
     return /* @__PURE__ */ jsx41(
       "div",
@@ -7139,7 +7342,7 @@ var TopBarSection = React40.forwardRef(
   }
 );
 TopBarSection.displayName = "TopBarSection";
-var TopBarDivider = React40.forwardRef(
+var TopBarDivider = React41.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx41(
       "div",
@@ -7154,17 +7357,17 @@ var TopBarDivider = React40.forwardRef(
 TopBarDivider.displayName = "TopBarDivider";
 
 // src/components/sidebar.tsx
-import * as React41 from "react";
+import * as React42 from "react";
 import { Fragment as Fragment7, jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
-var SidebarContext = React41.createContext(void 0);
+var SidebarContext = React42.createContext(void 0);
 var useSidebar = () => {
-  const context = React41.useContext(SidebarContext);
+  const context = React42.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a Sidebar");
   }
   return context;
 };
-var Sidebar = React41.forwardRef(
+var Sidebar = React42.forwardRef(
   ({
     className,
     collapsed: controlledCollapsed,
@@ -7176,10 +7379,10 @@ var Sidebar = React41.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [uncontrolledCollapsed, setUncontrolledCollapsed] = React41.useState(defaultCollapsed);
+    const [uncontrolledCollapsed, setUncontrolledCollapsed] = React42.useState(defaultCollapsed);
     const isControlled = controlledCollapsed !== void 0;
     const collapsed = isControlled ? controlledCollapsed : uncontrolledCollapsed;
-    const setCollapsed = React41.useCallback(
+    const setCollapsed = React42.useCallback(
       (value) => {
         if (!isControlled) {
           setUncontrolledCollapsed(value);
@@ -7208,7 +7411,7 @@ var Sidebar = React41.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarHeader = React41.forwardRef(
+var SidebarHeader = React42.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx42(
       "div",
@@ -7222,7 +7425,7 @@ var SidebarHeader = React41.forwardRef(
   }
 );
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarContent = React41.forwardRef(
+var SidebarContent = React42.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx42(
       "div",
@@ -7236,7 +7439,7 @@ var SidebarContent = React41.forwardRef(
   }
 );
 SidebarContent.displayName = "SidebarContent";
-var SidebarFooter = React41.forwardRef(
+var SidebarFooter = React42.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx42(
       "div",
@@ -7250,7 +7453,7 @@ var SidebarFooter = React41.forwardRef(
   }
 );
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarGroup = React41.forwardRef(
+var SidebarGroup = React42.forwardRef(
   ({ className, label, children, ...props }, ref) => {
     const { collapsed } = useSidebar();
     return /* @__PURE__ */ jsxs27("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
@@ -7261,7 +7464,7 @@ var SidebarGroup = React41.forwardRef(
   }
 );
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarItem = React41.forwardRef(
+var SidebarItem = React42.forwardRef(
   ({ className, icon, active, disabled, badge, onClick, href, children, ...props }, ref) => {
     const { collapsed } = useSidebar();
     const content = /* @__PURE__ */ jsxs27(Fragment7, { children: [
@@ -7296,11 +7499,11 @@ var SidebarItem = React41.forwardRef(
   }
 );
 SidebarItem.displayName = "SidebarItem";
-var SidebarSubMenu = React41.forwardRef(
+var SidebarSubMenu = React42.forwardRef(
   ({ className, icon, label, defaultOpen = false, children, ...props }, ref) => {
-    const [open, setOpen] = React41.useState(defaultOpen);
+    const [open, setOpen] = React42.useState(defaultOpen);
     const { collapsed } = useSidebar();
-    React41.useEffect(() => {
+    React42.useEffect(() => {
       if (collapsed) {
         setOpen(false);
       }
@@ -7344,7 +7547,7 @@ var SidebarSubMenu = React41.forwardRef(
   }
 );
 SidebarSubMenu.displayName = "SidebarSubMenu";
-var SidebarToggle = React41.forwardRef(
+var SidebarToggle = React42.forwardRef(
   ({ className, children, ...props }, ref) => {
     const { collapsed, setCollapsed } = useSidebar();
     return /* @__PURE__ */ jsx42(
@@ -7386,17 +7589,17 @@ var SidebarToggle = React41.forwardRef(
 SidebarToggle.displayName = "SidebarToggle";
 
 // src/components/sidebar-rail.tsx
-import * as React42 from "react";
+import * as React43 from "react";
 import { Fragment as Fragment8, jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
-var SidebarRailContext = React42.createContext(void 0);
+var SidebarRailContext = React43.createContext(void 0);
 var useSidebarRail = () => {
-  const context = React42.useContext(SidebarRailContext);
+  const context = React43.useContext(SidebarRailContext);
   if (!context) {
     throw new Error("useSidebarRail must be used within a SidebarRail");
   }
   return context;
 };
-var SidebarRail = React42.forwardRef(
+var SidebarRail = React43.forwardRef(
   ({
     className,
     defaultActiveRail = null,
@@ -7414,14 +7617,14 @@ var SidebarRail = React42.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [uncontrolledActiveRail, setUncontrolledActiveRail] = React42.useState(defaultActiveRail);
-    const [expanded, setExpanded] = React42.useState(!!defaultActiveRail);
-    const [uncontrolledRailExpanded, setUncontrolledRailExpanded] = React42.useState(defaultRailExpanded);
+    const [uncontrolledActiveRail, setUncontrolledActiveRail] = React43.useState(defaultActiveRail);
+    const [expanded, setExpanded] = React43.useState(!!defaultActiveRail);
+    const [uncontrolledRailExpanded, setUncontrolledRailExpanded] = React43.useState(defaultRailExpanded);
     const isControlled = controlledActiveRail !== void 0;
     const activeRail = isControlled ? controlledActiveRail : uncontrolledActiveRail;
     const isRailControlled = controlledRailExpanded !== void 0;
     const railExpanded = isRailControlled ? controlledRailExpanded : uncontrolledRailExpanded;
-    const setActiveRail = React42.useCallback(
+    const setActiveRail = React43.useCallback(
       (rail) => {
         if (!isControlled) {
           setUncontrolledActiveRail(rail);
@@ -7431,7 +7634,7 @@ var SidebarRail = React42.forwardRef(
       },
       [isControlled, onActiveRailChange]
     );
-    const setRailExpanded = React42.useCallback(
+    const setRailExpanded = React43.useCallback(
       (value) => {
         if (!isRailControlled) {
           setUncontrolledRailExpanded(value);
@@ -7477,7 +7680,7 @@ var SidebarRail = React42.forwardRef(
   }
 );
 SidebarRail.displayName = "SidebarRail";
-var IconRail = React42.forwardRef(
+var IconRail = React43.forwardRef(
   ({ className, children, ...props }, ref) => {
     const { railExpanded, overlayRail, expandableRail } = useSidebarRail();
     const isExpanded = expandableRail && railExpanded;
@@ -7507,7 +7710,7 @@ var IconRail = React42.forwardRef(
   }
 );
 IconRail.displayName = "IconRail";
-var IconRailHeader = React42.forwardRef(
+var IconRailHeader = React43.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx43(
       "div",
@@ -7524,7 +7727,7 @@ var IconRailHeader = React42.forwardRef(
   }
 );
 IconRailHeader.displayName = "IconRailHeader";
-var IconRailContent = React42.forwardRef(
+var IconRailContent = React43.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx43(
       "div",
@@ -7538,7 +7741,7 @@ var IconRailContent = React42.forwardRef(
   }
 );
 IconRailContent.displayName = "IconRailContent";
-var IconRailFooter = React42.forwardRef(
+var IconRailFooter = React43.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx43(
       "div",
@@ -7555,7 +7758,7 @@ var IconRailFooter = React42.forwardRef(
   }
 );
 IconRailFooter.displayName = "IconRailFooter";
-var IconRailItem = React42.forwardRef(
+var IconRailItem = React43.forwardRef(
   ({ className, railId, icon, label, asButton = false, toggleRail = false, onClick, ...props }, ref) => {
     const {
       activeRail,
@@ -7607,7 +7810,7 @@ var IconRailItem = React42.forwardRef(
   }
 );
 IconRailItem.displayName = "IconRailItem";
-var RailPanel = React42.forwardRef(
+var RailPanel = React43.forwardRef(
   ({ className, railId, title, children, ...props }, ref) => {
     const { activeRail, setActiveRail, hoverExpand } = useSidebarRail();
     const isVisible = activeRail === railId;
@@ -7666,7 +7869,7 @@ var RailPanel = React42.forwardRef(
   }
 );
 RailPanel.displayName = "RailPanel";
-var RailPanelGroup = React42.forwardRef(
+var RailPanelGroup = React43.forwardRef(
   ({ className, label, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs28("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
       label && /* @__PURE__ */ jsx43("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
@@ -7675,7 +7878,7 @@ var RailPanelGroup = React42.forwardRef(
   }
 );
 RailPanelGroup.displayName = "RailPanelGroup";
-var RailPanelItem = React42.forwardRef(
+var RailPanelItem = React43.forwardRef(
   ({ className, icon, active, disabled, badge, href, children, onClick, ...props }, ref) => {
     const content = /* @__PURE__ */ jsxs28(Fragment8, { children: [
       icon && /* @__PURE__ */ jsx43("span", { className: "shrink-0", children: icon }),
@@ -7708,7 +7911,7 @@ var RailPanelItem = React42.forwardRef(
 RailPanelItem.displayName = "RailPanelItem";
 
 // src/playground.tsx
-import * as React43 from "react";
+import * as React44 from "react";
 import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 var Section = ({ title, children }) => /* @__PURE__ */ jsxs29("div", { className: "mb-8", children: [
   /* @__PURE__ */ jsx44("h2", { className: "text-xl font-semibold mb-4 text-foreground", children: title }),
@@ -7729,13 +7932,13 @@ var ThemeToggle = () => {
   ] });
 };
 var PlaygroundContent = () => {
-  const [dialogOpen, setDialogOpen] = React43.useState(false);
-  const [checkboxChecked, setCheckboxChecked] = React43.useState(false);
-  const [switchChecked, setSwitchChecked] = React43.useState(false);
-  const [inputValue, setInputValue] = React43.useState("");
-  const [textareaValue, setTextareaValue] = React43.useState("");
-  const [selectValue, setSelectValue] = React43.useState("");
-  const [comboboxValue, setComboboxValue] = React43.useState(null);
+  const [dialogOpen, setDialogOpen] = React44.useState(false);
+  const [checkboxChecked, setCheckboxChecked] = React44.useState(false);
+  const [switchChecked, setSwitchChecked] = React44.useState(false);
+  const [inputValue, setInputValue] = React44.useState("");
+  const [textareaValue, setTextareaValue] = React44.useState("");
+  const [selectValue, setSelectValue] = React44.useState("");
+  const [comboboxValue, setComboboxValue] = React44.useState(null);
   const comboboxOptions = [
     { value: "react", label: "React" },
     { value: "vue", label: "Vue" },
@@ -8155,6 +8358,7 @@ export {
   MultiProgressDonut,
   NativeSelect,
   NativeSelectOption,
+  PackedBubbleChart,
   PaginationNamespace as Pagination,
   PaginationContent,
   PaginationEllipsis,