@onesaz/ui 0.3.18 → 0.3.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.d.ts +60 -7
  2. package/dist/index.js +875 -567
  3. package/dist/index.js.map +1 -1
  4. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1185,31 +1185,117 @@ TextField.displayName = "TextField";
1185
1185
 
1186
1186
  // src/components/checkbox.tsx
1187
1187
  import * as React12 from "react";
1188
- import { jsx as jsx12 } from "react/jsx-runtime";
1188
+ import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
1189
1189
  var Checkbox = React12.forwardRef(
1190
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
1191
- "input",
1192
- {
1193
- type: "checkbox",
1194
- ref,
1195
- className: cn(
1196
- "h-4 w-4 shrink-0 rounded-sm border border-accent cursor-pointer",
1197
- "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
1198
- "disabled:cursor-not-allowed disabled:opacity-50",
1199
- "accent-accent",
1200
- className
1201
- ),
1202
- ...props
1203
- }
1204
- )
1190
+ ({
1191
+ className,
1192
+ checked,
1193
+ defaultChecked,
1194
+ onChange,
1195
+ disabled,
1196
+ indeterminate = false,
1197
+ ...props
1198
+ }, ref) => {
1199
+ const inputRef = React12.useRef(null);
1200
+ React12.useImperativeHandle(ref, () => inputRef.current);
1201
+ const [isChecked, setIsChecked] = React12.useState(
1202
+ checked !== void 0 ? Boolean(checked) : Boolean(defaultChecked)
1203
+ );
1204
+ React12.useEffect(() => {
1205
+ if (checked !== void 0) setIsChecked(Boolean(checked));
1206
+ }, [checked]);
1207
+ React12.useEffect(() => {
1208
+ if (inputRef.current) {
1209
+ inputRef.current.indeterminate = indeterminate;
1210
+ }
1211
+ }, [indeterminate]);
1212
+ const handleChange = (e) => {
1213
+ if (checked === void 0) setIsChecked(e.target.checked);
1214
+ onChange?.(e);
1215
+ };
1216
+ const active = isChecked || indeterminate;
1217
+ return /* @__PURE__ */ jsxs3(
1218
+ "label",
1219
+ {
1220
+ className: cn(
1221
+ "relative inline-flex h-4 w-4 shrink-0",
1222
+ disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
1223
+ className
1224
+ ),
1225
+ children: [
1226
+ /* @__PURE__ */ jsx12(
1227
+ "input",
1228
+ {
1229
+ ref: inputRef,
1230
+ type: "checkbox",
1231
+ checked,
1232
+ defaultChecked,
1233
+ onChange: handleChange,
1234
+ disabled,
1235
+ className: "peer sr-only",
1236
+ ...props
1237
+ }
1238
+ ),
1239
+ /* @__PURE__ */ jsx12(
1240
+ "span",
1241
+ {
1242
+ "aria-hidden": "true",
1243
+ className: cn(
1244
+ "h-4 w-4 rounded-sm border transition-colors duration-150",
1245
+ "flex items-center justify-center",
1246
+ // Focus ring mirrors the hidden input's focus-visible state
1247
+ "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background peer-focus-visible:outline-none",
1248
+ active ? "bg-accent border-accent text-accent-foreground" : "bg-background border-border text-transparent"
1249
+ ),
1250
+ children: indeterminate ? (
1251
+ // Dash for indeterminate
1252
+ /* @__PURE__ */ jsx12(
1253
+ "svg",
1254
+ {
1255
+ xmlns: "http://www.w3.org/2000/svg",
1256
+ width: "10",
1257
+ height: "10",
1258
+ viewBox: "0 0 24 24",
1259
+ fill: "none",
1260
+ stroke: "currentColor",
1261
+ strokeWidth: "3.5",
1262
+ strokeLinecap: "round",
1263
+ strokeLinejoin: "round",
1264
+ children: /* @__PURE__ */ jsx12("path", { d: "M5 12h14" })
1265
+ }
1266
+ )
1267
+ ) : (
1268
+ // Checkmark
1269
+ /* @__PURE__ */ jsx12(
1270
+ "svg",
1271
+ {
1272
+ xmlns: "http://www.w3.org/2000/svg",
1273
+ width: "10",
1274
+ height: "10",
1275
+ viewBox: "0 0 24 24",
1276
+ fill: "none",
1277
+ stroke: "currentColor",
1278
+ strokeWidth: "3.5",
1279
+ strokeLinecap: "round",
1280
+ strokeLinejoin: "round",
1281
+ children: /* @__PURE__ */ jsx12("polyline", { points: "20 6 9 17 4 12" })
1282
+ }
1283
+ )
1284
+ )
1285
+ }
1286
+ )
1287
+ ]
1288
+ }
1289
+ );
1290
+ }
1205
1291
  );
1206
1292
  Checkbox.displayName = "Checkbox";
1207
1293
 
1208
1294
  // src/components/switch.tsx
1209
1295
  import * as React13 from "react";
1210
- import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
1296
+ import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
1211
1297
  var Switch = React13.forwardRef(
1212
- ({ className, ...props }, ref) => /* @__PURE__ */ jsxs3("label", { className: cn("relative inline-flex items-center cursor-pointer", className), children: [
1298
+ ({ className, ...props }, ref) => /* @__PURE__ */ jsxs4("label", { className: cn("relative inline-flex items-center cursor-pointer", className), children: [
1213
1299
  /* @__PURE__ */ jsx13(
1214
1300
  "input",
1215
1301
  {
@@ -1241,7 +1327,7 @@ Switch.displayName = "Switch";
1241
1327
  // src/components/radio.tsx
1242
1328
  import * as React14 from "react";
1243
1329
  import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
1244
- import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
1330
+ import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
1245
1331
  var RadioGroupContext = React14.createContext({});
1246
1332
  var RadioGroup = React14.forwardRef(({ className, orientation = "vertical", size = "md", ...props }, ref) => {
1247
1333
  return /* @__PURE__ */ jsx14(RadioGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx14(
@@ -1306,9 +1392,9 @@ var Radio = React14.forwardRef(({ className, label, description, id: idProp, val
1306
1392
  if (!label && !description) {
1307
1393
  return /* @__PURE__ */ jsx14(RadioGroupItem, { ref, value, size, ...props });
1308
1394
  }
1309
- return /* @__PURE__ */ jsxs4("div", { className: cn("flex items-start gap-3", className), children: [
1395
+ return /* @__PURE__ */ jsxs5("div", { className: cn("flex items-start gap-3", className), children: [
1310
1396
  /* @__PURE__ */ jsx14(RadioGroupItem, { ref, id, value, size, ...props }),
1311
- /* @__PURE__ */ jsxs4("div", { className: "grid gap-1", children: [
1397
+ /* @__PURE__ */ jsxs5("div", { className: "grid gap-1", children: [
1312
1398
  label && /* @__PURE__ */ jsx14(
1313
1399
  "label",
1314
1400
  {
@@ -1325,7 +1411,7 @@ Radio.displayName = "Radio";
1325
1411
 
1326
1412
  // src/components/form.tsx
1327
1413
  import * as React15 from "react";
1328
- import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
1414
+ import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
1329
1415
  var FormControlContext = React15.createContext({});
1330
1416
  function useFormControl() {
1331
1417
  return React15.useContext(FormControlContext);
@@ -1374,7 +1460,7 @@ var FormLabel = React15.forwardRef(
1374
1460
  const disabled = disabledProp ?? context.disabled;
1375
1461
  const required = requiredProp ?? context.required;
1376
1462
  const id = htmlFor ?? context.id;
1377
- return /* @__PURE__ */ jsxs5(
1463
+ return /* @__PURE__ */ jsxs6(
1378
1464
  "label",
1379
1465
  {
1380
1466
  ref,
@@ -1440,7 +1526,7 @@ FormGroup.displayName = "FormGroup";
1440
1526
  // src/components/slider.tsx
1441
1527
  import * as React16 from "react";
1442
1528
  import * as SliderPrimitive from "@radix-ui/react-slider";
1443
- import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
1529
+ import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
1444
1530
  var Slider = React16.forwardRef(({
1445
1531
  className,
1446
1532
  min = 0,
@@ -1469,7 +1555,7 @@ var Slider = React16.forwardRef(({
1469
1555
  };
1470
1556
  const currentValue = internalValue[0];
1471
1557
  const displayValue = valueFormatter ? valueFormatter(currentValue) : currentValue.toString();
1472
- const sliderElement = /* @__PURE__ */ jsxs6(
1558
+ const sliderElement = /* @__PURE__ */ jsxs7(
1473
1559
  SliderPrimitive.Root,
1474
1560
  {
1475
1561
  ref,
@@ -1501,19 +1587,19 @@ var Slider = React16.forwardRef(({
1501
1587
  right: "flex items-center gap-3"
1502
1588
  };
1503
1589
  const orderMap = {
1504
- top: /* @__PURE__ */ jsxs6(Fragment2, { children: [
1590
+ top: /* @__PURE__ */ jsxs7(Fragment2, { children: [
1505
1591
  valueElement,
1506
1592
  sliderElement
1507
1593
  ] }),
1508
- bottom: /* @__PURE__ */ jsxs6(Fragment2, { children: [
1594
+ bottom: /* @__PURE__ */ jsxs7(Fragment2, { children: [
1509
1595
  sliderElement,
1510
1596
  valueElement
1511
1597
  ] }),
1512
- left: /* @__PURE__ */ jsxs6(Fragment2, { children: [
1598
+ left: /* @__PURE__ */ jsxs7(Fragment2, { children: [
1513
1599
  valueElement,
1514
1600
  sliderElement
1515
1601
  ] }),
1516
- right: /* @__PURE__ */ jsxs6(Fragment2, { children: [
1602
+ right: /* @__PURE__ */ jsxs7(Fragment2, { children: [
1517
1603
  sliderElement,
1518
1604
  valueElement
1519
1605
  ] })
@@ -1525,7 +1611,7 @@ Slider.displayName = SliderPrimitive.Root.displayName;
1525
1611
  // src/components/range-slider.tsx
1526
1612
  import * as React17 from "react";
1527
1613
  import * as SliderPrimitive2 from "@radix-ui/react-slider";
1528
- import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
1614
+ import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
1529
1615
  var RangeSlider = React17.forwardRef(({
1530
1616
  className,
1531
1617
  min = 0,
@@ -1560,18 +1646,18 @@ var RangeSlider = React17.forwardRef(({
1560
1646
  };
1561
1647
  const minValue = internalValue[0];
1562
1648
  const maxValue = internalValue[1];
1563
- return /* @__PURE__ */ jsxs7("div", { className: cn("w-full", className), children: [
1564
- showValues && valuePosition === "top" && /* @__PURE__ */ jsxs7("div", { className: "flex justify-between mb-2", children: [
1565
- /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-start", children: [
1649
+ return /* @__PURE__ */ jsxs8("div", { className: cn("w-full", className), children: [
1650
+ showValues && valuePosition === "top" && /* @__PURE__ */ jsxs8("div", { className: "flex justify-between mb-2", children: [
1651
+ /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-start", children: [
1566
1652
  /* @__PURE__ */ jsx17("span", { className: "text-xs text-muted-foreground", children: minLabel }),
1567
1653
  /* @__PURE__ */ jsx17("span", { className: "text-sm font-semibold text-accent", children: formatValue(minValue) })
1568
1654
  ] }),
1569
- /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-end", children: [
1655
+ /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-end", children: [
1570
1656
  /* @__PURE__ */ jsx17("span", { className: "text-xs text-muted-foreground", children: maxLabel }),
1571
1657
  /* @__PURE__ */ jsx17("span", { className: "text-sm font-semibold text-accent", children: formatValue(maxValue) })
1572
1658
  ] })
1573
1659
  ] }),
1574
- /* @__PURE__ */ jsxs7(
1660
+ /* @__PURE__ */ jsxs8(
1575
1661
  SliderPrimitive2.Root,
1576
1662
  {
1577
1663
  ref,
@@ -1604,17 +1690,17 @@ var RangeSlider = React17.forwardRef(({
1604
1690
  ]
1605
1691
  }
1606
1692
  ),
1607
- showValues && valuePosition === "bottom" && /* @__PURE__ */ jsxs7("div", { className: "flex justify-between mt-2", children: [
1608
- /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-start", children: [
1693
+ showValues && valuePosition === "bottom" && /* @__PURE__ */ jsxs8("div", { className: "flex justify-between mt-2", children: [
1694
+ /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-start", children: [
1609
1695
  /* @__PURE__ */ jsx17("span", { className: "text-xs text-muted-foreground", children: minLabel }),
1610
1696
  /* @__PURE__ */ jsx17("span", { className: "text-sm font-semibold text-accent", children: formatValue(minValue) })
1611
1697
  ] }),
1612
- /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-end", children: [
1698
+ /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-end", children: [
1613
1699
  /* @__PURE__ */ jsx17("span", { className: "text-xs text-muted-foreground", children: maxLabel }),
1614
1700
  /* @__PURE__ */ jsx17("span", { className: "text-sm font-semibold text-accent", children: formatValue(maxValue) })
1615
1701
  ] })
1616
1702
  ] }),
1617
- showValues && /* @__PURE__ */ jsx17("div", { className: "flex justify-center mt-1", children: /* @__PURE__ */ jsxs7("span", { className: "text-xs text-muted-foreground", children: [
1703
+ showValues && /* @__PURE__ */ jsx17("div", { className: "flex justify-center mt-1", children: /* @__PURE__ */ jsxs8("span", { className: "text-xs text-muted-foreground", children: [
1618
1704
  "Range: ",
1619
1705
  formatValue(minValue),
1620
1706
  " - ",
@@ -1722,7 +1808,7 @@ Badge.displayName = "Badge";
1722
1808
 
1723
1809
  // src/components/chip.tsx
1724
1810
  import * as React20 from "react";
1725
- import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
1811
+ import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
1726
1812
  var filledColorClasses = {
1727
1813
  default: "bg-muted text-foreground",
1728
1814
  primary: "bg-accent text-accent-foreground",
@@ -1764,7 +1850,7 @@ var Chip = React20.forwardRef(
1764
1850
  }, ref) => {
1765
1851
  const isClickable = clickable || !!onClick;
1766
1852
  const content = label ?? children;
1767
- return /* @__PURE__ */ jsxs8(
1853
+ return /* @__PURE__ */ jsxs9(
1768
1854
  "div",
1769
1855
  {
1770
1856
  ref,
@@ -1843,7 +1929,7 @@ Separator.displayName = "Separator";
1843
1929
  // src/components/accordion.tsx
1844
1930
  import * as React22 from "react";
1845
1931
  import * as AccordionPrimitive from "@radix-ui/react-accordion";
1846
- import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
1932
+ import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
1847
1933
  var Accordion = AccordionPrimitive.Root;
1848
1934
  var AccordionItem = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
1849
1935
  AccordionPrimitive.Item,
@@ -1857,7 +1943,7 @@ var AccordionItem = React22.forwardRef(({ className, ...props }, ref) => /* @__P
1857
1943
  }
1858
1944
  ));
1859
1945
  AccordionItem.displayName = "AccordionItem";
1860
- var AccordionTrigger = React22.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx22(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs9(
1946
+ var AccordionTrigger = React22.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx22(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs10(
1861
1947
  AccordionPrimitive.Trigger,
1862
1948
  {
1863
1949
  ref,
@@ -1907,7 +1993,7 @@ AccordionContent.displayName = "AccordionContent";
1907
1993
  // src/components/select/index.tsx
1908
1994
  import * as React23 from "react";
1909
1995
  import * as SelectPrimitive from "@radix-ui/react-select";
1910
- import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
1996
+ import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
1911
1997
  var ChevronDownIcon = () => /* @__PURE__ */ jsx23(
1912
1998
  "svg",
1913
1999
  {
@@ -1956,7 +2042,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx23(
1956
2042
  var Select = SelectPrimitive.Root;
1957
2043
  var SelectGroup = SelectPrimitive.Group;
1958
2044
  var SelectValue = SelectPrimitive.Value;
1959
- var SelectTrigger = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs10(
2045
+ var SelectTrigger = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs11(
1960
2046
  SelectPrimitive.Trigger,
1961
2047
  {
1962
2048
  ref,
@@ -2004,7 +2090,7 @@ var SelectScrollDownButton = React23.forwardRef(({ className, ...props }, ref) =
2004
2090
  }
2005
2091
  ));
2006
2092
  SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
2007
- var SelectContent = React23.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs10(
2093
+ var SelectContent = React23.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs11(
2008
2094
  SelectPrimitive.Content,
2009
2095
  {
2010
2096
  ref,
@@ -2047,7 +2133,7 @@ var SelectLabel = React23.forwardRef(({ className, ...props }, ref) => /* @__PUR
2047
2133
  }
2048
2134
  ));
2049
2135
  SelectLabel.displayName = SelectPrimitive.Label.displayName;
2050
- var SelectItem = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs10(
2136
+ var SelectItem = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs11(
2051
2137
  SelectPrimitive.Item,
2052
2138
  {
2053
2139
  ref,
@@ -2111,7 +2197,7 @@ NativeSelectOption.displayName = "NativeSelectOption";
2111
2197
  // src/components/dialog/index.tsx
2112
2198
  import * as React24 from "react";
2113
2199
  import * as DialogPrimitive from "@radix-ui/react-dialog";
2114
- import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
2200
+ import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
2115
2201
  var Dialog = DialogPrimitive.Root;
2116
2202
  var DialogTrigger = DialogPrimitive.Trigger;
2117
2203
  var DialogPortal = DialogPrimitive.Portal;
@@ -2129,14 +2215,14 @@ var DialogOverlay = React24.forwardRef(({ className, ...props }, ref) => /* @__P
2129
2215
  }
2130
2216
  ));
2131
2217
  DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
2132
- var DialogContent = React24.forwardRef(({ className, children, hideCloseButton = false, size = "lg", ...props }, ref) => /* @__PURE__ */ jsxs11(DialogPortal, { children: [
2218
+ var DialogContent = React24.forwardRef(({ className, children, hideCloseButton = false, size = "lg", ...props }, ref) => /* @__PURE__ */ jsxs12(DialogPortal, { children: [
2133
2219
  /* @__PURE__ */ jsx24(DialogOverlay, {}),
2134
- /* @__PURE__ */ jsxs11(
2220
+ /* @__PURE__ */ jsxs12(
2135
2221
  DialogPrimitive.Content,
2136
2222
  {
2137
2223
  ref,
2138
2224
  className: cn(
2139
- "fixed z-50 grid w-full gap-4 p-6 shadow-lg",
2225
+ "fixed z-50 flex flex-col w-full gap-4 p-6 shadow-lg",
2140
2226
  "bg-popover border border-border text-popover-foreground",
2141
2227
  "rounded-lg",
2142
2228
  "data-[state=open]:animate-zoom-in data-[state=closed]:animate-zoom-out",
@@ -2144,16 +2230,16 @@ var DialogContent = React24.forwardRef(({ className, children, hideCloseButton =
2144
2230
  size === "sm" && "left-1/2 top-1/2 max-w-sm -translate-x-1/2 -translate-y-1/2",
2145
2231
  size === "md" && "left-1/2 top-1/2 max-w-md -translate-x-1/2 -translate-y-1/2",
2146
2232
  size === "lg" && "left-1/2 top-1/2 max-w-lg -translate-x-1/2 -translate-y-1/2",
2147
- size === "xl" && "left-1/2 top-1/2 max-w-xl -translate-x-1/2 -translate-y-1/2",
2148
- size === "2xl" && "left-1/2 top-1/2 max-w-2xl -translate-x-1/2 -translate-y-1/2",
2233
+ size === "xl" && "left-1/2 top-[5vh] max-w-xl max-h-[90vh] -translate-x-1/2",
2234
+ size === "2xl" && "left-1/2 top-[5vh] max-w-2xl max-h-[90vh] -translate-x-1/2",
2149
2235
  size === "full" && "inset-0 h-full w-full max-w-full rounded-none",
2150
2236
  className
2151
2237
  ),
2152
2238
  ...props,
2153
2239
  children: [
2154
2240
  children,
2155
- !hideCloseButton && /* @__PURE__ */ jsxs11(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
2156
- /* @__PURE__ */ jsxs11(
2241
+ !hideCloseButton && /* @__PURE__ */ jsxs12(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
2242
+ /* @__PURE__ */ jsxs12(
2157
2243
  "svg",
2158
2244
  {
2159
2245
  xmlns: "http://www.w3.org/2000/svg",
@@ -2234,7 +2320,7 @@ var DialogNamespace = Object.assign(Dialog, {
2234
2320
  // src/components/alert-dialog.tsx
2235
2321
  import * as React25 from "react";
2236
2322
  import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
2237
- import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
2323
+ import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
2238
2324
  var AlertDialog = AlertDialogPrimitive.Root;
2239
2325
  var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
2240
2326
  var AlertDialogPortal = AlertDialogPrimitive.Portal;
@@ -2275,23 +2361,23 @@ var variantStyles = {
2275
2361
  }
2276
2362
  };
2277
2363
  var VariantIcons = {
2278
- default: ({ className }) => /* @__PURE__ */ jsxs12("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
2364
+ default: ({ className }) => /* @__PURE__ */ jsxs13("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
2279
2365
  /* @__PURE__ */ jsx25("circle", { cx: "12", cy: "12", r: "10" }),
2280
2366
  /* @__PURE__ */ jsx25("path", { d: "M12 16v-4M12 8h.01" })
2281
2367
  ] }),
2282
- destructive: ({ className }) => /* @__PURE__ */ jsxs12("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
2368
+ destructive: ({ className }) => /* @__PURE__ */ jsxs13("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
2283
2369
  /* @__PURE__ */ jsx25("circle", { cx: "12", cy: "12", r: "10" }),
2284
2370
  /* @__PURE__ */ jsx25("path", { d: "m15 9-6 6M9 9l6 6" })
2285
2371
  ] }),
2286
- success: ({ className }) => /* @__PURE__ */ jsxs12("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
2372
+ success: ({ className }) => /* @__PURE__ */ jsxs13("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
2287
2373
  /* @__PURE__ */ jsx25("circle", { cx: "12", cy: "12", r: "10" }),
2288
2374
  /* @__PURE__ */ jsx25("path", { d: "m9 12 2 2 4-4" })
2289
2375
  ] }),
2290
- warning: ({ className }) => /* @__PURE__ */ jsxs12("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
2376
+ warning: ({ className }) => /* @__PURE__ */ jsxs13("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
2291
2377
  /* @__PURE__ */ jsx25("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
2292
2378
  /* @__PURE__ */ jsx25("path", { d: "M12 9v4M12 17h.01" })
2293
2379
  ] }),
2294
- info: ({ className }) => /* @__PURE__ */ jsxs12("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
2380
+ info: ({ className }) => /* @__PURE__ */ jsxs13("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
2295
2381
  /* @__PURE__ */ jsx25("circle", { cx: "12", cy: "12", r: "10" }),
2296
2382
  /* @__PURE__ */ jsx25("path", { d: "M12 16v-4M12 8h.01" })
2297
2383
  ] })
@@ -2299,7 +2385,7 @@ var VariantIcons = {
2299
2385
  var AlertDialogContent = React25.forwardRef(({ className, variant = "default", showIcon = true, children, ...props }, ref) => {
2300
2386
  const IconComponent = VariantIcons[variant];
2301
2387
  const styles = variantStyles[variant];
2302
- return /* @__PURE__ */ jsxs12(AlertDialogPortal, { children: [
2388
+ return /* @__PURE__ */ jsxs13(AlertDialogPortal, { children: [
2303
2389
  /* @__PURE__ */ jsx25(AlertDialogOverlay, {}),
2304
2390
  /* @__PURE__ */ jsx25(
2305
2391
  AlertDialogPrimitive.Content,
@@ -2318,7 +2404,7 @@ var AlertDialogContent = React25.forwardRef(({ className, variant = "default", s
2318
2404
  className
2319
2405
  ),
2320
2406
  ...props,
2321
- children: /* @__PURE__ */ jsxs12("div", { className: "flex gap-4 items-start", children: [
2407
+ children: /* @__PURE__ */ jsxs13("div", { className: "flex gap-4 items-start", children: [
2322
2408
  showIcon && /* @__PURE__ */ jsx25("div", { className: cn("shrink-0 mt-1", styles.icon), children: /* @__PURE__ */ jsx25(IconComponent, { className: "h-6 w-6" }) }),
2323
2409
  /* @__PURE__ */ jsx25("div", { className: "flex-1", children })
2324
2410
  ] })
@@ -2436,7 +2522,7 @@ Spinner.displayName = "Spinner";
2436
2522
 
2437
2523
  // src/components/alert.tsx
2438
2524
  import * as React27 from "react";
2439
- import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
2525
+ import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
2440
2526
  var variants = {
2441
2527
  default: {
2442
2528
  iconBg: "bg-zinc-900",
@@ -2480,7 +2566,7 @@ var CheckIcon2 = ({ className }) => /* @__PURE__ */ jsx27(
2480
2566
  children: /* @__PURE__ */ jsx27("path", { d: "m5 13 4 4L19 7" })
2481
2567
  }
2482
2568
  );
2483
- var InfoIcon = ({ className }) => /* @__PURE__ */ jsxs13(
2569
+ var InfoIcon = ({ className }) => /* @__PURE__ */ jsxs14(
2484
2570
  "svg",
2485
2571
  {
2486
2572
  className,
@@ -2494,7 +2580,7 @@ var InfoIcon = ({ className }) => /* @__PURE__ */ jsxs13(
2494
2580
  ]
2495
2581
  }
2496
2582
  );
2497
- var WarningIcon = ({ className }) => /* @__PURE__ */ jsxs13(
2583
+ var WarningIcon = ({ className }) => /* @__PURE__ */ jsxs14(
2498
2584
  "svg",
2499
2585
  {
2500
2586
  className,
@@ -2508,7 +2594,7 @@ var WarningIcon = ({ className }) => /* @__PURE__ */ jsxs13(
2508
2594
  ]
2509
2595
  }
2510
2596
  );
2511
- var XCircleIcon = ({ className }) => /* @__PURE__ */ jsxs13(
2597
+ var XCircleIcon = ({ className }) => /* @__PURE__ */ jsxs14(
2512
2598
  "svg",
2513
2599
  {
2514
2600
  className,
@@ -2576,7 +2662,7 @@ var Alert = ({
2576
2662
  onClose?.();
2577
2663
  };
2578
2664
  if (!visible) return null;
2579
- return /* @__PURE__ */ jsxs13(
2665
+ return /* @__PURE__ */ jsxs14(
2580
2666
  "div",
2581
2667
  {
2582
2668
  role: "alert",
@@ -2652,7 +2738,7 @@ var AlertDescription = ({
2652
2738
  // src/components/tabs.tsx
2653
2739
  import * as React28 from "react";
2654
2740
  import * as TabsPrimitive from "@radix-ui/react-tabs";
2655
- import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
2741
+ import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
2656
2742
  var Tabs = TabsPrimitive.Root;
2657
2743
  var TabsList = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
2658
2744
  TabsPrimitive.List,
@@ -2709,7 +2795,7 @@ var UnderlineTabsList = React28.forwardRef(({ className, ...props }, ref) => /*
2709
2795
  }
2710
2796
  ));
2711
2797
  UnderlineTabsList.displayName = "UnderlineTabsList";
2712
- var UnderlineTabsTrigger = React28.forwardRef(({ className, children, count, ...props }, ref) => /* @__PURE__ */ jsxs14(
2798
+ var UnderlineTabsTrigger = React28.forwardRef(({ className, children, count, ...props }, ref) => /* @__PURE__ */ jsxs15(
2713
2799
  TabsPrimitive.Trigger,
2714
2800
  {
2715
2801
  ref,
@@ -2772,7 +2858,7 @@ var VerticalTabsList = React28.forwardRef(({ className, ...props }, ref) => /* @
2772
2858
  }
2773
2859
  ));
2774
2860
  VerticalTabsList.displayName = "VerticalTabsList";
2775
- var VerticalTabsTrigger = React28.forwardRef(({ className, children, icon, ...props }, ref) => /* @__PURE__ */ jsxs14(
2861
+ var VerticalTabsTrigger = React28.forwardRef(({ className, children, icon, ...props }, ref) => /* @__PURE__ */ jsxs15(
2776
2862
  TabsPrimitive.Trigger,
2777
2863
  {
2778
2864
  ref,
@@ -2825,7 +2911,7 @@ VerticalTabsGroupLabel.displayName = "VerticalTabsGroupLabel";
2825
2911
  // src/components/tooltip.tsx
2826
2912
  import * as React29 from "react";
2827
2913
  import * as TooltipPrimitive from "@radix-ui/react-tooltip";
2828
- import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
2914
+ import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
2829
2915
  var TooltipProvider = TooltipPrimitive.Provider;
2830
2916
  var TooltipRoot = TooltipPrimitive.Root;
2831
2917
  var TooltipTrigger = TooltipPrimitive.Trigger;
@@ -2839,7 +2925,7 @@ var TooltipArrow = React29.forwardRef(({ className, ...props }, ref) => /* @__PU
2839
2925
  }
2840
2926
  ));
2841
2927
  TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
2842
- var TooltipContent = React29.forwardRef(({ className, sideOffset = 4, showArrow = false, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
2928
+ var TooltipContent = React29.forwardRef(({ className, sideOffset = 4, showArrow = false, children, ...props }, ref) => /* @__PURE__ */ jsxs16(
2843
2929
  TooltipPrimitive.Content,
2844
2930
  {
2845
2931
  ref,
@@ -2878,7 +2964,7 @@ var Tooltip = React29.forwardRef(
2878
2964
  if (disabled) {
2879
2965
  return /* @__PURE__ */ jsx29(Fragment3, { children });
2880
2966
  }
2881
- return /* @__PURE__ */ jsx29(TooltipProvider, { children: /* @__PURE__ */ jsxs15(
2967
+ return /* @__PURE__ */ jsx29(TooltipProvider, { children: /* @__PURE__ */ jsxs16(
2882
2968
  TooltipRoot,
2883
2969
  {
2884
2970
  delayDuration,
@@ -2905,7 +2991,7 @@ Tooltip.displayName = "Tooltip";
2905
2991
 
2906
2992
  // src/components/progress.tsx
2907
2993
  import * as React30 from "react";
2908
- import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
2994
+ import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
2909
2995
  var linearSizeClasses = {
2910
2996
  sm: "h-1",
2911
2997
  md: "h-2",
@@ -2930,7 +3016,7 @@ var LinearProgress = React30.forwardRef(
2930
3016
  ...props
2931
3017
  }, ref) => {
2932
3018
  const isIndeterminate = value === void 0;
2933
- return /* @__PURE__ */ jsxs16("div", { ref, className: cn("w-full", className), ...props, children: [
3019
+ return /* @__PURE__ */ jsxs17("div", { ref, className: cn("w-full", className), ...props, children: [
2934
3020
  /* @__PURE__ */ jsx30(
2935
3021
  "div",
2936
3022
  {
@@ -2991,7 +3077,7 @@ var CircularProgress = React30.forwardRef(
2991
3077
  const radius = (sizeValue - thickness) / 2;
2992
3078
  const circumference = 2 * Math.PI * radius;
2993
3079
  const strokeDashoffset = isIndeterminate ? 0 : circumference - Math.min(100, Math.max(0, value)) / 100 * circumference;
2994
- return /* @__PURE__ */ jsxs16(
3080
+ return /* @__PURE__ */ jsxs17(
2995
3081
  "div",
2996
3082
  {
2997
3083
  ref,
@@ -3003,7 +3089,7 @@ var CircularProgress = React30.forwardRef(
3003
3089
  "aria-valuemax": 100,
3004
3090
  ...props,
3005
3091
  children: [
3006
- /* @__PURE__ */ jsxs16(
3092
+ /* @__PURE__ */ jsxs17(
3007
3093
  "svg",
3008
3094
  {
3009
3095
  className: cn(isIndeterminate && "animate-spin"),
@@ -3155,7 +3241,7 @@ var TableNamespace = Object.assign(Table, {
3155
3241
 
3156
3242
  // src/components/avatar.tsx
3157
3243
  import * as React32 from "react";
3158
- import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
3244
+ import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
3159
3245
  var sizeClasses4 = {
3160
3246
  xs: "h-6 w-6 text-xs",
3161
3247
  sm: "h-8 w-8 text-sm",
@@ -3210,7 +3296,7 @@ var Avatar = React32.forwardRef(
3210
3296
  }
3211
3297
  ) : fallbackElement ? fallbackElement : fallback ? /* @__PURE__ */ jsx32("span", { className: "font-medium", children: getInitials(fallback) }) : (
3212
3298
  // Default user icon
3213
- /* @__PURE__ */ jsxs17(
3299
+ /* @__PURE__ */ jsxs18(
3214
3300
  "svg",
3215
3301
  {
3216
3302
  xmlns: "http://www.w3.org/2000/svg",
@@ -3238,7 +3324,7 @@ var AvatarGroup = React32.forwardRef(
3238
3324
  const childArray = React32.Children.toArray(children);
3239
3325
  const visibleChildren = max ? childArray.slice(0, max) : childArray;
3240
3326
  const remainingCount = max ? childArray.length - max : 0;
3241
- return /* @__PURE__ */ jsxs17(
3327
+ return /* @__PURE__ */ jsxs18(
3242
3328
  "div",
3243
3329
  {
3244
3330
  ref,
@@ -3274,7 +3360,7 @@ AvatarGroup.displayName = "AvatarGroup";
3274
3360
 
3275
3361
  // src/components/skeleton.tsx
3276
3362
  import * as React33 from "react";
3277
- import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
3363
+ import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
3278
3364
  var Skeleton = React33.forwardRef(
3279
3365
  ({
3280
3366
  variant = "text",
@@ -3380,7 +3466,7 @@ var SkeletonCard = React33.forwardRef(
3380
3466
  className,
3381
3467
  ...props
3382
3468
  }, ref) => {
3383
- return /* @__PURE__ */ jsxs18(
3469
+ return /* @__PURE__ */ jsxs19(
3384
3470
  "div",
3385
3471
  {
3386
3472
  ref,
@@ -3395,7 +3481,7 @@ var SkeletonCard = React33.forwardRef(
3395
3481
  animation
3396
3482
  }
3397
3483
  ),
3398
- /* @__PURE__ */ jsxs18("div", { className: "space-y-2", children: [
3484
+ /* @__PURE__ */ jsxs19("div", { className: "space-y-2", children: [
3399
3485
  /* @__PURE__ */ jsx33(Skeleton, { variant: "text", width: "60%", animation }),
3400
3486
  /* @__PURE__ */ jsx33(SkeletonText, { lines, animation })
3401
3487
  ] })
@@ -3430,7 +3516,7 @@ SkeletonTableRow.displayName = "SkeletonTableRow";
3430
3516
 
3431
3517
  // src/components/pagination.tsx
3432
3518
  import * as React34 from "react";
3433
- import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
3519
+ import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
3434
3520
  var Pagination = React34.forwardRef(
3435
3521
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
3436
3522
  "nav",
@@ -3468,7 +3554,7 @@ var PaginationLink = React34.forwardRef(
3468
3554
  )
3469
3555
  );
3470
3556
  PaginationLink.displayName = "PaginationLink";
3471
- var PaginationPrevious = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs19(
3557
+ var PaginationPrevious = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs20(
3472
3558
  Button,
3473
3559
  {
3474
3560
  ref,
@@ -3498,7 +3584,7 @@ var PaginationPrevious = React34.forwardRef(({ className, ...props }, ref) => /*
3498
3584
  }
3499
3585
  ));
3500
3586
  PaginationPrevious.displayName = "PaginationPrevious";
3501
- var PaginationNext = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs19(
3587
+ var PaginationNext = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs20(
3502
3588
  Button,
3503
3589
  {
3504
3590
  ref,
@@ -3528,7 +3614,7 @@ var PaginationNext = React34.forwardRef(({ className, ...props }, ref) => /* @__
3528
3614
  }
3529
3615
  ));
3530
3616
  PaginationNext.displayName = "PaginationNext";
3531
- var PaginationEllipsis = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs19(
3617
+ var PaginationEllipsis = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs20(
3532
3618
  "span",
3533
3619
  {
3534
3620
  ref,
@@ -3536,7 +3622,7 @@ var PaginationEllipsis = React34.forwardRef(({ className, ...props }, ref) => /*
3536
3622
  className: cn("flex h-9 w-9 items-center justify-center", className),
3537
3623
  ...props,
3538
3624
  children: [
3539
- /* @__PURE__ */ jsxs19(
3625
+ /* @__PURE__ */ jsxs20(
3540
3626
  "svg",
3541
3627
  {
3542
3628
  xmlns: "http://www.w3.org/2000/svg",
@@ -3572,7 +3658,8 @@ var PaginationNamespace = Object.assign(Pagination, {
3572
3658
 
3573
3659
  // src/components/combobox/index.tsx
3574
3660
  import * as React35 from "react";
3575
- import { Fragment as Fragment4, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
3661
+ import { useVirtualizer } from "@tanstack/react-virtual";
3662
+ import { Fragment as Fragment4, jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
3576
3663
  function isMultipleProps(props) {
3577
3664
  return props.multiple === true;
3578
3665
  }
@@ -3597,6 +3684,71 @@ function Adornment({
3597
3684
  }
3598
3685
  return /* @__PURE__ */ jsx35("span", { className: cn("shrink-0 pointer-events-none opacity-50", className), children });
3599
3686
  }
3687
+ function OptionItem({
3688
+ option,
3689
+ isSelected,
3690
+ isMultiple,
3691
+ onSelect
3692
+ }) {
3693
+ return /* @__PURE__ */ jsxs21(
3694
+ "button",
3695
+ {
3696
+ type: "button",
3697
+ disabled: option.disabled,
3698
+ onClick: onSelect,
3699
+ className: cn(
3700
+ "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
3701
+ "hover:bg-muted hover:text-foreground",
3702
+ "focus:bg-muted focus:text-foreground",
3703
+ "disabled:pointer-events-none disabled:opacity-50",
3704
+ isSelected && "bg-muted"
3705
+ ),
3706
+ children: [
3707
+ /* @__PURE__ */ jsx35("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: isMultiple ? /* @__PURE__ */ jsx35(
3708
+ "div",
3709
+ {
3710
+ className: cn(
3711
+ "flex h-4 w-4 items-center justify-center rounded border border-input",
3712
+ isSelected && "bg-accent border-accent"
3713
+ ),
3714
+ children: isSelected && /* @__PURE__ */ jsx35(
3715
+ "svg",
3716
+ {
3717
+ xmlns: "http://www.w3.org/2000/svg",
3718
+ width: "24",
3719
+ height: "24",
3720
+ viewBox: "0 0 24 24",
3721
+ fill: "none",
3722
+ stroke: "white",
3723
+ strokeWidth: "3",
3724
+ strokeLinecap: "round",
3725
+ strokeLinejoin: "round",
3726
+ className: "h-3 w-3",
3727
+ children: /* @__PURE__ */ jsx35("polyline", { points: "20 6 9 17 4 12" })
3728
+ }
3729
+ )
3730
+ }
3731
+ ) : isSelected && /* @__PURE__ */ jsx35(
3732
+ "svg",
3733
+ {
3734
+ xmlns: "http://www.w3.org/2000/svg",
3735
+ width: "24",
3736
+ height: "24",
3737
+ viewBox: "0 0 24 24",
3738
+ fill: "none",
3739
+ stroke: "currentColor",
3740
+ strokeWidth: "2",
3741
+ strokeLinecap: "round",
3742
+ strokeLinejoin: "round",
3743
+ className: "h-4 w-4",
3744
+ children: /* @__PURE__ */ jsx35("polyline", { points: "20 6 9 17 4 12" })
3745
+ }
3746
+ ) }),
3747
+ option.label
3748
+ ]
3749
+ }
3750
+ );
3751
+ }
3600
3752
  var Combobox = React35.forwardRef(
3601
3753
  (props, ref) => {
3602
3754
  const {
@@ -3611,7 +3763,9 @@ var Combobox = React35.forwardRef(
3611
3763
  startAdornment,
3612
3764
  onStartAdornmentClick,
3613
3765
  endAdornment,
3614
- onEndAdornmentClick
3766
+ onEndAdornmentClick,
3767
+ virtual = false,
3768
+ virtualItemHeight = 36
3615
3769
  } = props;
3616
3770
  const labelKey = props.labelKey ?? "label";
3617
3771
  const valueKey = props.valueKey ?? "value";
@@ -3649,6 +3803,7 @@ var Combobox = React35.forwardRef(
3649
3803
  const [internalSearch, setInternalSearch] = React35.useState("");
3650
3804
  const containerRef = React35.useRef(null);
3651
3805
  const searchInputRef = React35.useRef(null);
3806
+ const listContainerRef = React35.useRef(null);
3652
3807
  const isMultiple = isMultipleProps(props);
3653
3808
  const selectAll = isMultiple ? props.selectAll ?? false : false;
3654
3809
  const selectAllLabel = isMultiple ? props.selectAllLabel ?? "Select all" : "Select all";
@@ -3674,6 +3829,12 @@ var Combobox = React35.forwardRef(
3674
3829
  [normalizedOptions]
3675
3830
  );
3676
3831
  const allSelected = isMultiple && selectableOptions.length > 0 && selectableOptions.every((option) => selectedValueKeys.has(option.value));
3832
+ const rowVirtualizer = useVirtualizer({
3833
+ count: virtual ? filteredOptions.length : 0,
3834
+ getScrollElement: () => listContainerRef.current,
3835
+ estimateSize: () => virtualItemHeight,
3836
+ overscan: 5
3837
+ });
3677
3838
  const handleSingleSelect = (option) => {
3678
3839
  if (!isMultiple) {
3679
3840
  if (props.value === void 0) {
@@ -3762,8 +3923,8 @@ var Combobox = React35.forwardRef(
3762
3923
  const maxDisplayItems = isMultiple ? props.maxDisplayItems ?? 3 : 0;
3763
3924
  const displayedOptions = selectedOptions.slice(0, maxDisplayItems);
3764
3925
  const remainingCount = selectedOptions.length - maxDisplayItems;
3765
- return /* @__PURE__ */ jsxs20("div", { ref: containerRef, className: "relative", children: [
3766
- /* @__PURE__ */ jsxs20(
3926
+ return /* @__PURE__ */ jsxs21("div", { ref: containerRef, className: "relative", children: [
3927
+ /* @__PURE__ */ jsxs21(
3767
3928
  "button",
3768
3929
  {
3769
3930
  type: "button",
@@ -3781,8 +3942,8 @@ var Combobox = React35.forwardRef(
3781
3942
  ),
3782
3943
  children: [
3783
3944
  startAdornment && /* @__PURE__ */ jsx35(Adornment, { onClick: onStartAdornmentClick, className: "mr-1.5", children: startAdornment }),
3784
- isMultiple ? /* @__PURE__ */ jsx35("div", { className: "flex flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx35("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs20(Fragment4, { children: [
3785
- displayedOptions.map((option) => /* @__PURE__ */ jsxs20(
3945
+ isMultiple ? /* @__PURE__ */ jsx35("div", { className: "flex flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx35("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs21(Fragment4, { children: [
3946
+ displayedOptions.map((option) => /* @__PURE__ */ jsxs21(
3786
3947
  "span",
3787
3948
  {
3788
3949
  className: "inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-xs font-medium",
@@ -3815,13 +3976,13 @@ var Combobox = React35.forwardRef(
3815
3976
  },
3816
3977
  getOptionValue(option)
3817
3978
  )),
3818
- remainingCount > 0 && /* @__PURE__ */ jsxs20("span", { className: "text-xs text-muted-foreground", children: [
3979
+ remainingCount > 0 && /* @__PURE__ */ jsxs21("span", { className: "text-xs text-muted-foreground", children: [
3819
3980
  "+",
3820
3981
  remainingCount,
3821
3982
  " more"
3822
3983
  ] })
3823
3984
  ] }) }) : /* @__PURE__ */ jsx35("span", { className: cn("flex-1", !singleValue && "text-muted-foreground"), children: singleValue ? getOptionLabel(singleValue) : placeholder }),
3824
- /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
3985
+ /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1", children: [
3825
3986
  isMultiple && selectedOptions.length > 0 && /* @__PURE__ */ jsx35(
3826
3987
  "button",
3827
3988
  {
@@ -3895,9 +4056,9 @@ var Combobox = React35.forwardRef(
3895
4056
  ]
3896
4057
  }
3897
4058
  ),
3898
- open && /* @__PURE__ */ jsxs20("div", { className: "absolute z-50 mt-1 w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md", children: [
3899
- /* @__PURE__ */ jsxs20("div", { className: "flex items-center border-b border-border px-3", children: [
3900
- /* @__PURE__ */ jsxs20(
4059
+ open && /* @__PURE__ */ jsxs21("div", { className: "absolute z-50 mt-1 w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md", children: [
4060
+ /* @__PURE__ */ jsxs21("div", { className: "flex items-center border-b border-border px-3", children: [
4061
+ /* @__PURE__ */ jsxs21(
3901
4062
  "svg",
3902
4063
  {
3903
4064
  xmlns: "http://www.w3.org/2000/svg",
@@ -3935,117 +4096,104 @@ var Combobox = React35.forwardRef(
3935
4096
  }
3936
4097
  )
3937
4098
  ] }),
3938
- /* @__PURE__ */ jsx35("div", { className: "max-h-[300px] overflow-y-auto p-1", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx35("div", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ jsxs20(Fragment4, { children: [
3939
- isMultiple && selectAll && /* @__PURE__ */ jsxs20(
3940
- "button",
3941
- {
3942
- type: "button",
3943
- onClick: handleSelectAll,
3944
- className: cn(
3945
- "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
3946
- "hover:bg-muted hover:text-foreground",
3947
- "focus:bg-muted focus:text-foreground",
3948
- allSelected && "bg-muted"
3949
- ),
3950
- children: [
3951
- /* @__PURE__ */ jsx35("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx35(
3952
- "div",
3953
- {
3954
- className: cn(
3955
- "flex h-4 w-4 items-center justify-center rounded border border-input",
3956
- allSelected && "bg-accent border-accent"
3957
- ),
3958
- children: allSelected && /* @__PURE__ */ jsx35(
3959
- "svg",
3960
- {
3961
- xmlns: "http://www.w3.org/2000/svg",
3962
- width: "24",
3963
- height: "24",
3964
- viewBox: "0 0 24 24",
3965
- fill: "none",
3966
- stroke: "white",
3967
- strokeWidth: "3",
3968
- strokeLinecap: "round",
3969
- strokeLinejoin: "round",
3970
- className: "h-3 w-3",
3971
- children: /* @__PURE__ */ jsx35("polyline", { points: "20 6 9 17 4 12" })
3972
- }
3973
- )
3974
- }
3975
- ) }),
3976
- selectAllLabel
3977
- ]
3978
- }
3979
- ),
3980
- filteredOptions.map((option) => {
3981
- const isSelected = isMultiple ? selectedValueKeys.has(option.value) : option.value === singleValueKey;
3982
- return /* @__PURE__ */ jsxs20(
3983
- "button",
3984
- {
3985
- type: "button",
3986
- disabled: option.disabled,
3987
- onClick: () => isMultiple ? handleMultiSelect(option.raw) : handleSingleSelect(option.raw),
3988
- className: cn(
3989
- "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
3990
- "hover:bg-muted hover:text-foreground",
3991
- "focus:bg-muted focus:text-foreground",
3992
- "disabled:pointer-events-none disabled:opacity-50",
3993
- isSelected && "bg-muted"
3994
- ),
3995
- children: [
3996
- /* @__PURE__ */ jsx35("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: isMultiple ? (
3997
- // Checkbox for multi-select
3998
- /* @__PURE__ */ jsx35(
4099
+ isMultiple && selectAll && filteredOptions.length > 0 && /* @__PURE__ */ jsx35("div", { className: "px-1 pt-1", children: /* @__PURE__ */ jsxs21(
4100
+ "button",
4101
+ {
4102
+ type: "button",
4103
+ onClick: handleSelectAll,
4104
+ className: cn(
4105
+ "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
4106
+ "hover:bg-muted hover:text-foreground",
4107
+ "focus:bg-muted focus:text-foreground",
4108
+ allSelected && "bg-muted"
4109
+ ),
4110
+ children: [
4111
+ /* @__PURE__ */ jsx35("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx35(
4112
+ "div",
4113
+ {
4114
+ className: cn(
4115
+ "flex h-4 w-4 items-center justify-center rounded border border-input",
4116
+ allSelected && "bg-accent border-accent"
4117
+ ),
4118
+ children: allSelected && /* @__PURE__ */ jsx35(
4119
+ "svg",
4120
+ {
4121
+ xmlns: "http://www.w3.org/2000/svg",
4122
+ width: "24",
4123
+ height: "24",
4124
+ viewBox: "0 0 24 24",
4125
+ fill: "none",
4126
+ stroke: "white",
4127
+ strokeWidth: "3",
4128
+ strokeLinecap: "round",
4129
+ strokeLinejoin: "round",
4130
+ className: "h-3 w-3",
4131
+ children: /* @__PURE__ */ jsx35("polyline", { points: "20 6 9 17 4 12" })
4132
+ }
4133
+ )
4134
+ }
4135
+ ) }),
4136
+ selectAllLabel
4137
+ ]
4138
+ }
4139
+ ) }),
4140
+ /* @__PURE__ */ jsx35(
4141
+ "div",
4142
+ {
4143
+ ref: listContainerRef,
4144
+ className: "max-h-[300px] overflow-y-auto p-1",
4145
+ children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx35("div", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : virtual ? (
4146
+ // ── Virtual list ──────────────────────────────────────────
4147
+ /* @__PURE__ */ jsx35(
4148
+ "div",
4149
+ {
4150
+ style: { height: rowVirtualizer.getTotalSize(), position: "relative" },
4151
+ children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
4152
+ const option = filteredOptions[virtualRow.index];
4153
+ const isSelected = isMultiple ? selectedValueKeys.has(option.value) : option.value === singleValueKey;
4154
+ return /* @__PURE__ */ jsx35(
3999
4155
  "div",
4000
4156
  {
4001
- className: cn(
4002
- "flex h-4 w-4 items-center justify-center rounded border border-input",
4003
- isSelected && "bg-accent border-accent"
4004
- ),
4005
- children: isSelected && /* @__PURE__ */ jsx35(
4006
- "svg",
4157
+ style: {
4158
+ position: "absolute",
4159
+ top: virtualRow.start,
4160
+ left: 0,
4161
+ right: 0,
4162
+ height: virtualRow.size
4163
+ },
4164
+ children: /* @__PURE__ */ jsx35(
4165
+ OptionItem,
4007
4166
  {
4008
- xmlns: "http://www.w3.org/2000/svg",
4009
- width: "24",
4010
- height: "24",
4011
- viewBox: "0 0 24 24",
4012
- fill: "none",
4013
- stroke: "white",
4014
- strokeWidth: "3",
4015
- strokeLinecap: "round",
4016
- strokeLinejoin: "round",
4017
- className: "h-3 w-3",
4018
- children: /* @__PURE__ */ jsx35("polyline", { points: "20 6 9 17 4 12" })
4167
+ option,
4168
+ isSelected,
4169
+ isMultiple,
4170
+ onSelect: () => isMultiple ? handleMultiSelect(option.raw) : handleSingleSelect(option.raw)
4019
4171
  }
4020
4172
  )
4021
- }
4022
- )
4023
- ) : (
4024
- // Checkmark for single-select
4025
- isSelected && /* @__PURE__ */ jsx35(
4026
- "svg",
4027
- {
4028
- xmlns: "http://www.w3.org/2000/svg",
4029
- width: "24",
4030
- height: "24",
4031
- viewBox: "0 0 24 24",
4032
- fill: "none",
4033
- stroke: "currentColor",
4034
- strokeWidth: "2",
4035
- strokeLinecap: "round",
4036
- strokeLinejoin: "round",
4037
- className: "h-4 w-4",
4038
- children: /* @__PURE__ */ jsx35("polyline", { points: "20 6 9 17 4 12" })
4039
- }
4040
- )
4041
- ) }),
4042
- option.label
4043
- ]
4044
- },
4045
- option.value
4046
- );
4047
- })
4048
- ] }) })
4173
+ },
4174
+ virtualRow.key
4175
+ );
4176
+ })
4177
+ }
4178
+ )
4179
+ ) : (
4180
+ // ── Normal list ───────────────────────────────────────────
4181
+ filteredOptions.map((option) => {
4182
+ const isSelected = isMultiple ? selectedValueKeys.has(option.value) : option.value === singleValueKey;
4183
+ return /* @__PURE__ */ jsx35(
4184
+ OptionItem,
4185
+ {
4186
+ option,
4187
+ isSelected,
4188
+ isMultiple,
4189
+ onSelect: () => isMultiple ? handleMultiSelect(option.raw) : handleSingleSelect(option.raw)
4190
+ },
4191
+ option.value
4192
+ );
4193
+ })
4194
+ )
4195
+ }
4196
+ )
4049
4197
  ] })
4050
4198
  ] });
4051
4199
  }
@@ -4062,8 +4210,8 @@ import {
4062
4210
  getFilteredRowModel,
4063
4211
  flexRender
4064
4212
  } from "@tanstack/react-table";
4065
- import { useVirtualizer } from "@tanstack/react-virtual";
4066
- import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
4213
+ import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
4214
+ import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
4067
4215
  function convertColumns(columns, checkboxSelection) {
4068
4216
  const tanstackColumns = [];
4069
4217
  if (checkboxSelection) {
@@ -4250,8 +4398,8 @@ var ColumnVisibilityDropdown = ({
4250
4398
  return () => document.removeEventListener("mousedown", handleClickOutside);
4251
4399
  }, []);
4252
4400
  const allColumns = table.getAllLeafColumns().filter((col) => col.id !== "__select__");
4253
- return /* @__PURE__ */ jsxs21("div", { className: "relative", ref: dropdownRef, children: [
4254
- /* @__PURE__ */ jsxs21(
4401
+ return /* @__PURE__ */ jsxs22("div", { className: "relative", ref: dropdownRef, children: [
4402
+ /* @__PURE__ */ jsxs22(
4255
4403
  Button,
4256
4404
  {
4257
4405
  variant: "outline",
@@ -4259,7 +4407,7 @@ var ColumnVisibilityDropdown = ({
4259
4407
  onClick: () => setOpen(!open),
4260
4408
  className: "h-9 gap-2",
4261
4409
  children: [
4262
- /* @__PURE__ */ jsxs21("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
4410
+ /* @__PURE__ */ jsxs22("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
4263
4411
  /* @__PURE__ */ jsx36("path", { d: "M12 3v18M3 12h18" }),
4264
4412
  /* @__PURE__ */ jsx36("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
4265
4413
  /* @__PURE__ */ jsx36("path", { d: "M3 9h18M3 15h18M9 3v18M15 3v18" })
@@ -4268,12 +4416,12 @@ var ColumnVisibilityDropdown = ({
4268
4416
  ]
4269
4417
  }
4270
4418
  ),
4271
- open && /* @__PURE__ */ jsxs21("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[180px] rounded-md border border-border bg-popover p-2 shadow-md", children: [
4419
+ open && /* @__PURE__ */ jsxs22("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[180px] rounded-md border border-border bg-popover p-2 shadow-md", children: [
4272
4420
  /* @__PURE__ */ jsx36("div", { className: "text-xs font-medium text-foreground mb-2 px-2", children: "Show/Hide Columns" }),
4273
4421
  /* @__PURE__ */ jsx36("div", { className: "max-h-[300px] overflow-auto", children: allColumns.map((column) => {
4274
4422
  const meta = column.columnDef.meta;
4275
4423
  const headerName = meta?.headerName || column.id;
4276
- return /* @__PURE__ */ jsxs21(
4424
+ return /* @__PURE__ */ jsxs22(
4277
4425
  "label",
4278
4426
  {
4279
4427
  className: "flex items-center gap-2 px-2 py-1.5 hover:bg-muted rounded cursor-pointer",
@@ -4291,7 +4439,7 @@ var ColumnVisibilityDropdown = ({
4291
4439
  column.id
4292
4440
  );
4293
4441
  }) }),
4294
- /* @__PURE__ */ jsxs21("div", { className: "border-t border-border mt-2 pt-2 flex gap-2 px-2", children: [
4442
+ /* @__PURE__ */ jsxs22("div", { className: "border-t border-border mt-2 pt-2 flex gap-2 px-2", children: [
4295
4443
  /* @__PURE__ */ jsx36(
4296
4444
  Button,
4297
4445
  {
@@ -4352,8 +4500,8 @@ var DataGridPagination = ({
4352
4500
  };
4353
4501
  const startRow = currentPage * pageSize + 1;
4354
4502
  const endRow = Math.min((currentPage + 1) * pageSize, totalRows);
4355
- return /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: [
4356
- /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 text-xs text-muted-foreground whitespace-nowrap", children: [
4503
+ return /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: [
4504
+ /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 text-xs text-muted-foreground whitespace-nowrap", children: [
4357
4505
  /* @__PURE__ */ jsx36("span", { children: "Rows per page:" }),
4358
4506
  /* @__PURE__ */ jsx36(
4359
4507
  "select",
@@ -4365,14 +4513,14 @@ var DataGridPagination = ({
4365
4513
  }
4366
4514
  )
4367
4515
  ] }),
4368
- /* @__PURE__ */ jsxs21("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
4516
+ /* @__PURE__ */ jsxs22("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
4369
4517
  startRow,
4370
4518
  "-",
4371
4519
  endRow,
4372
4520
  " of ",
4373
4521
  totalRows
4374
4522
  ] }),
4375
- /* @__PURE__ */ jsx36(PaginationNamespace, { className: "mx-0 w-auto", children: /* @__PURE__ */ jsxs21(PaginationContent, { children: [
4523
+ /* @__PURE__ */ jsx36(PaginationNamespace, { className: "mx-0 w-auto", children: /* @__PURE__ */ jsxs22(PaginationContent, { children: [
4376
4524
  /* @__PURE__ */ jsx36(PaginationItem, { children: /* @__PURE__ */ jsx36(
4377
4525
  Button,
4378
4526
  {
@@ -4434,6 +4582,7 @@ var ExportDropdown = ({
4434
4582
  onExport,
4435
4583
  rows,
4436
4584
  columns,
4585
+ pinnedRows,
4437
4586
  fileName = "data-export"
4438
4587
  }) => {
4439
4588
  const [open, setOpen] = React36.useState(false);
@@ -4451,7 +4600,12 @@ var ExportDropdown = ({
4451
4600
  const visibleColumns = columns.filter((col) => !col.hide && !col.disableExport && !col.hideExport);
4452
4601
  const headers = visibleColumns.map((col) => col.headerName || col.field);
4453
4602
  const csvRows = [headers.join(",")];
4454
- rows.forEach((row) => {
4603
+ const allRows = [
4604
+ ...pinnedRows?.top || [],
4605
+ ...rows,
4606
+ ...pinnedRows?.bottom || []
4607
+ ];
4608
+ allRows.forEach((row) => {
4455
4609
  const values = visibleColumns.map((col) => {
4456
4610
  let value;
4457
4611
  if (col.valueGetter) {
@@ -4478,12 +4632,17 @@ var ExportDropdown = ({
4478
4632
  };
4479
4633
  const handleCustomExport = () => {
4480
4634
  if (onExport) {
4481
- onExport(rows, columns);
4635
+ const allRows = [
4636
+ ...pinnedRows?.top || [],
4637
+ ...rows,
4638
+ ...pinnedRows?.bottom || []
4639
+ ];
4640
+ onExport(allRows, columns);
4482
4641
  }
4483
4642
  setOpen(false);
4484
4643
  };
4485
- return /* @__PURE__ */ jsxs21("div", { className: "relative", ref: dropdownRef, children: [
4486
- /* @__PURE__ */ jsxs21(
4644
+ return /* @__PURE__ */ jsxs22("div", { className: "relative", ref: dropdownRef, children: [
4645
+ /* @__PURE__ */ jsxs22(
4487
4646
  Button,
4488
4647
  {
4489
4648
  variant: "outline",
@@ -4491,7 +4650,7 @@ var ExportDropdown = ({
4491
4650
  onClick: () => setOpen(!open),
4492
4651
  className: "h-9 gap-2",
4493
4652
  children: [
4494
- /* @__PURE__ */ jsxs21("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
4653
+ /* @__PURE__ */ jsxs22("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
4495
4654
  /* @__PURE__ */ jsx36("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
4496
4655
  /* @__PURE__ */ jsx36("polyline", { points: "7 10 12 15 17 10" }),
4497
4656
  /* @__PURE__ */ jsx36("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
@@ -4500,14 +4659,14 @@ var ExportDropdown = ({
4500
4659
  ]
4501
4660
  }
4502
4661
  ),
4503
- open && /* @__PURE__ */ jsxs21("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[140px] rounded-md border border-border bg-popover p-1 shadow-md", children: [
4504
- /* @__PURE__ */ jsxs21(
4662
+ open && /* @__PURE__ */ jsxs22("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[140px] rounded-md border border-border bg-popover p-1 shadow-md", children: [
4663
+ /* @__PURE__ */ jsxs22(
4505
4664
  "button",
4506
4665
  {
4507
4666
  className: "flex w-full items-center gap-2 rounded px-3 py-2 text-xs hover:bg-muted",
4508
4667
  onClick: exportToCSV,
4509
4668
  children: [
4510
- /* @__PURE__ */ jsxs21("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
4669
+ /* @__PURE__ */ jsxs22("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
4511
4670
  /* @__PURE__ */ jsx36("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
4512
4671
  /* @__PURE__ */ jsx36("polyline", { points: "14 2 14 8 20 8" })
4513
4672
  ] }),
@@ -4515,13 +4674,13 @@ var ExportDropdown = ({
4515
4674
  ]
4516
4675
  }
4517
4676
  ),
4518
- onExport && /* @__PURE__ */ jsxs21(
4677
+ onExport && /* @__PURE__ */ jsxs22(
4519
4678
  "button",
4520
4679
  {
4521
4680
  className: "flex w-full items-center gap-2 rounded px-3 py-2 text-xs hover:bg-muted",
4522
4681
  onClick: handleCustomExport,
4523
4682
  children: [
4524
- /* @__PURE__ */ jsxs21("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
4683
+ /* @__PURE__ */ jsxs22("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
4525
4684
  /* @__PURE__ */ jsx36("circle", { cx: "12", cy: "12", r: "3" }),
4526
4685
  /* @__PURE__ */ jsx36("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
4527
4686
  ] }),
@@ -4547,7 +4706,7 @@ var MoreOptionsDropdown = ({
4547
4706
  return () => document.removeEventListener("mousedown", handleClickOutside);
4548
4707
  }, []);
4549
4708
  if (options.length === 0) return null;
4550
- return /* @__PURE__ */ jsxs21("div", { className: "relative", ref: dropdownRef, children: [
4709
+ return /* @__PURE__ */ jsxs22("div", { className: "relative", ref: dropdownRef, children: [
4551
4710
  /* @__PURE__ */ jsx36(
4552
4711
  Button,
4553
4712
  {
@@ -4555,14 +4714,14 @@ var MoreOptionsDropdown = ({
4555
4714
  size: "icon",
4556
4715
  onClick: () => setOpen(!open),
4557
4716
  className: "h-9 w-9",
4558
- children: /* @__PURE__ */ jsxs21("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
4717
+ children: /* @__PURE__ */ jsxs22("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
4559
4718
  /* @__PURE__ */ jsx36("circle", { cx: "12", cy: "12", r: "1" }),
4560
4719
  /* @__PURE__ */ jsx36("circle", { cx: "12", cy: "5", r: "1" }),
4561
4720
  /* @__PURE__ */ jsx36("circle", { cx: "12", cy: "19", r: "1" })
4562
4721
  ] })
4563
4722
  }
4564
4723
  ),
4565
- open && /* @__PURE__ */ jsx36("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-md border border-border bg-popover p-1 shadow-md", children: options.map((option, index) => /* @__PURE__ */ jsxs21(
4724
+ open && /* @__PURE__ */ jsx36("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-md border border-border bg-popover p-1 shadow-md", children: options.map((option, index) => /* @__PURE__ */ jsxs22(
4566
4725
  "button",
4567
4726
  {
4568
4727
  className: "flex w-full items-center gap-2 rounded px-3 py-2 text-xs hover:bg-muted",
@@ -4591,12 +4750,13 @@ var DataGridToolbar = ({
4591
4750
  columns,
4592
4751
  onExport,
4593
4752
  exportFileName,
4753
+ pinnedRows,
4594
4754
  customButtons,
4595
4755
  moreOptions = []
4596
4756
  }) => {
4597
- return /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border bg-background", children: [
4757
+ return /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border bg-background", children: [
4598
4758
  title && /* @__PURE__ */ jsx36("h3", { className: "text-lg font-semibold text-foreground", children: title }),
4599
- /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 ml-auto", children: [
4759
+ /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 ml-auto", children: [
4600
4760
  showQuickFilter && /* @__PURE__ */ jsx36(
4601
4761
  Input,
4602
4762
  {
@@ -4613,6 +4773,7 @@ var DataGridToolbar = ({
4613
4773
  onExport,
4614
4774
  rows,
4615
4775
  columns,
4776
+ pinnedRows,
4616
4777
  fileName: exportFileName
4617
4778
  }
4618
4779
  ),
@@ -4836,7 +4997,7 @@ var VirtualizedTableBody = ({
4836
4997
  gridColumns
4837
4998
  }) => {
4838
4999
  const rows = table.getRowModel().rows;
4839
- const virtualizer = useVirtualizer({
5000
+ const virtualizer = useVirtualizer2({
4840
5001
  count: rows.length,
4841
5002
  getScrollElement: () => parentRef.current,
4842
5003
  estimateSize: () => rowHeight,
@@ -4855,7 +5016,7 @@ var VirtualizedTableBody = ({
4855
5016
  }
4856
5017
  const paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
4857
5018
  const paddingBottom = virtualRows.length > 0 ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
4858
- return /* @__PURE__ */ jsxs21("tbody", { children: [
5019
+ return /* @__PURE__ */ jsxs22("tbody", { children: [
4859
5020
  paddingTop > 0 && /* @__PURE__ */ jsx36("tr", { children: /* @__PURE__ */ jsx36(
4860
5021
  "td",
4861
5022
  {
@@ -5342,6 +5503,12 @@ function DataGrid({
5342
5503
  return computeRowSpanMap(table.getRowModel().rows, columns);
5343
5504
  }, [table.getRowModel().rows, columns]);
5344
5505
  const hasColSpan = React36.useMemo(() => columns.some((col) => col.colSpan), [columns]);
5506
+ const totalColumnsWidth = React36.useMemo(() => {
5507
+ return table.getVisibleLeafColumns().reduce((sum, column) => {
5508
+ const colWidth = columnWidths.get(column.id);
5509
+ return sum + (colWidth?.width || column.getSize());
5510
+ }, 0);
5511
+ }, [table.getVisibleLeafColumns(), columnWidths]);
5345
5512
  const containerStyle = {
5346
5513
  ...sx
5347
5514
  };
@@ -5350,11 +5517,11 @@ function DataGrid({
5350
5517
  if (minHeight) containerStyle.minHeight = minHeight;
5351
5518
  if (maxHeight) containerStyle.maxHeight = maxHeight;
5352
5519
  }
5353
- return /* @__PURE__ */ jsxs21(
5520
+ return /* @__PURE__ */ jsxs22(
5354
5521
  "div",
5355
5522
  {
5356
5523
  className: cn(
5357
- "rounded-lg border border-border bg-background overflow-hidden flex flex-col text-xs",
5524
+ "rounded-lg border border-border bg-background flex flex-col text-xs",
5358
5525
  className
5359
5526
  ),
5360
5527
  style: containerStyle,
@@ -5373,171 +5540,179 @@ function DataGrid({
5373
5540
  columns,
5374
5541
  onExport,
5375
5542
  exportFileName,
5543
+ pinnedRows,
5376
5544
  customButtons,
5377
5545
  moreOptions
5378
5546
  }
5379
5547
  ),
5380
- /* @__PURE__ */ jsxs21(
5548
+ /* @__PURE__ */ jsx36("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxs22(
5381
5549
  "div",
5382
5550
  {
5383
5551
  ref: tableContainerRef,
5384
5552
  className: "relative flex-1 overflow-auto",
5385
5553
  children: [
5386
5554
  loading && /* @__PURE__ */ jsx36("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center z-10", children: /* @__PURE__ */ jsx36(Spinner, { size: "lg" }) }),
5387
- /* @__PURE__ */ jsxs21("table", { className: "w-full border-separate border-spacing-0 table-fixed", children: [
5388
- /* @__PURE__ */ jsx36("colgroup", { children: table.getVisibleLeafColumns().map((column) => {
5389
- const colWidth = columnWidths.get(column.id);
5390
- return /* @__PURE__ */ jsx36(
5391
- "col",
5392
- {
5393
- style: {
5394
- width: colWidth?.width || column.getSize(),
5395
- minWidth: colWidth?.minWidth || column.columnDef.minSize,
5396
- maxWidth: colWidth?.maxWidth || column.columnDef.maxSize
5555
+ /* @__PURE__ */ jsxs22(
5556
+ "table",
5557
+ {
5558
+ className: "border-separate border-spacing-0 table-fixed",
5559
+ style: { width: totalColumnsWidth, minWidth: "100%" },
5560
+ children: [
5561
+ /* @__PURE__ */ jsx36("colgroup", { children: table.getVisibleLeafColumns().map((column) => {
5562
+ const colWidth = columnWidths.get(column.id);
5563
+ return /* @__PURE__ */ jsx36(
5564
+ "col",
5565
+ {
5566
+ style: {
5567
+ width: colWidth?.width || column.getSize(),
5568
+ minWidth: colWidth?.minWidth || column.columnDef.minSize,
5569
+ maxWidth: colWidth?.maxWidth || column.columnDef.maxSize
5570
+ }
5571
+ },
5572
+ column.id
5573
+ );
5574
+ }) }),
5575
+ /* @__PURE__ */ jsxs22("thead", { className: "sticky top-0 z-[3] bg-muted", children: [
5576
+ columnGroupingModel && columnGroupingModel.length > 0 && /* @__PURE__ */ jsx36(
5577
+ ColumnGroupHeader,
5578
+ {
5579
+ columnGroupingModel,
5580
+ columns,
5581
+ columnWidths,
5582
+ showColumnVerticalBorder,
5583
+ rowHeight,
5584
+ columnVisibility,
5585
+ checkboxSelection,
5586
+ pinnedColumnOffsets
5587
+ }
5588
+ ),
5589
+ table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx36("tr", { className: "bg-muted", children: headerGroup.headers.map((header) => {
5590
+ const meta = header.column.columnDef.meta;
5591
+ const align = meta?.headerAlign || meta?.align || "left";
5592
+ const colWidth = columnWidths.get(header.column.id);
5593
+ const effectiveWidth = colWidth?.width || header.getSize();
5594
+ const pinnedInfo = pinnedColumnOffsets?.get(header.column.id);
5595
+ return /* @__PURE__ */ jsxs22(
5596
+ "th",
5597
+ {
5598
+ className: cn(
5599
+ "px-4 text-left text-xs font-medium text-muted-foreground border-b border-border bg-muted overflow-hidden relative",
5600
+ showColumnVerticalBorder && "border-r last:border-r-0",
5601
+ header.column.getCanSort() && "cursor-pointer select-none hover:bg-muted/80",
5602
+ // Add cursor class when resizing
5603
+ header.column.getIsResizing() && "cursor-col-resize",
5604
+ // Pinned column styling
5605
+ pinnedInfo && "sticky z-[4]",
5606
+ pinnedInfo?.side === "left" && "border-r border-border",
5607
+ pinnedInfo?.side === "right" && "border-l border-border"
5608
+ ),
5609
+ style: {
5610
+ height: rowHeight,
5611
+ width: effectiveWidth,
5612
+ minWidth: colWidth?.minWidth || header.column.columnDef.minSize,
5613
+ maxWidth: colWidth?.maxWidth || header.column.columnDef.maxSize,
5614
+ textAlign: align,
5615
+ ...pinnedInfo ? {
5616
+ position: "sticky",
5617
+ [pinnedInfo.side]: pinnedInfo.offset
5618
+ } : {}
5619
+ },
5620
+ onClick: header.column.getToggleSortingHandler(),
5621
+ children: [
5622
+ /* @__PURE__ */ jsxs22("div", { className: cn(
5623
+ "flex items-center gap-1 truncate",
5624
+ align === "center" && "justify-center",
5625
+ align === "right" && "justify-end"
5626
+ ), children: [
5627
+ header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
5628
+ header.column.getCanSort() && /* @__PURE__ */ jsx36(SortIcon, { direction: header.column.getIsSorted() })
5629
+ ] }),
5630
+ resizableColumns && header.column.id !== "__select__" && /* @__PURE__ */ jsx36(
5631
+ ColumnResizeHandle,
5632
+ {
5633
+ header,
5634
+ isResizing: header.column.getIsResizing()
5635
+ }
5636
+ )
5637
+ ]
5638
+ },
5639
+ header.id
5640
+ );
5641
+ }) }, headerGroup.id))
5642
+ ] }),
5643
+ pinnedTopTable && pinnedTopTable.length > 0 && /* @__PURE__ */ jsx36(
5644
+ PinnedRowsRenderer,
5645
+ {
5646
+ pinnedData: pinnedTopTable,
5647
+ columns,
5648
+ tanstackColumns,
5649
+ getRowId,
5650
+ rowHeight,
5651
+ showCellVerticalBorder,
5652
+ getRowClassName,
5653
+ globalWrapText: wrapText,
5654
+ columnWidths,
5655
+ pinnedColumnOffsets,
5656
+ columnVisibility,
5657
+ position: "top"
5397
5658
  }
5398
- },
5399
- column.id
5400
- );
5401
- }) }),
5402
- /* @__PURE__ */ jsxs21("thead", { className: "sticky top-0 z-[3] bg-muted", children: [
5403
- columnGroupingModel && columnGroupingModel.length > 0 && /* @__PURE__ */ jsx36(
5404
- ColumnGroupHeader,
5405
- {
5406
- columnGroupingModel,
5407
- columns,
5408
- columnWidths,
5409
- showColumnVerticalBorder,
5410
- rowHeight,
5411
- columnVisibility,
5412
- checkboxSelection,
5413
- pinnedColumnOffsets
5414
- }
5415
- ),
5416
- table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx36("tr", { className: "bg-muted", children: headerGroup.headers.map((header) => {
5417
- const meta = header.column.columnDef.meta;
5418
- const align = meta?.headerAlign || meta?.align || "left";
5419
- const colWidth = columnWidths.get(header.column.id);
5420
- const effectiveWidth = colWidth?.width || header.getSize();
5421
- const pinnedInfo = pinnedColumnOffsets?.get(header.column.id);
5422
- return /* @__PURE__ */ jsxs21(
5423
- "th",
5659
+ ),
5660
+ effectiveVirtualized ? /* @__PURE__ */ jsx36(
5661
+ VirtualizedTableBody,
5424
5662
  {
5425
- className: cn(
5426
- "px-4 text-left text-xs font-medium text-muted-foreground border-b border-border bg-muted overflow-hidden relative",
5427
- showColumnVerticalBorder && "border-r last:border-r-0",
5428
- header.column.getCanSort() && "cursor-pointer select-none hover:bg-muted/80",
5429
- // Add cursor class when resizing
5430
- header.column.getIsResizing() && "cursor-col-resize",
5431
- // Pinned column styling
5432
- pinnedInfo && "sticky z-[4]",
5433
- pinnedInfo?.side === "left" && "border-r border-border",
5434
- pinnedInfo?.side === "right" && "border-l border-border"
5435
- ),
5436
- style: {
5437
- height: rowHeight,
5438
- width: effectiveWidth,
5439
- minWidth: colWidth?.minWidth || header.column.columnDef.minSize,
5440
- maxWidth: colWidth?.maxWidth || header.column.columnDef.maxSize,
5441
- textAlign: align,
5442
- ...pinnedInfo ? {
5443
- position: "sticky",
5444
- [pinnedInfo.side]: pinnedInfo.offset
5445
- } : {}
5446
- },
5447
- onClick: header.column.getToggleSortingHandler(),
5448
- children: [
5449
- /* @__PURE__ */ jsxs21("div", { className: cn(
5450
- "flex items-center gap-1 truncate",
5451
- align === "center" && "justify-center",
5452
- align === "right" && "justify-end"
5453
- ), children: [
5454
- header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
5455
- header.column.getCanSort() && /* @__PURE__ */ jsx36(SortIcon, { direction: header.column.getIsSorted() })
5456
- ] }),
5457
- resizableColumns && header.column.id !== "__select__" && /* @__PURE__ */ jsx36(
5458
- ColumnResizeHandle,
5459
- {
5460
- header,
5461
- isResizing: header.column.getIsResizing()
5462
- }
5463
- )
5464
- ]
5465
- },
5466
- header.id
5467
- );
5468
- }) }, headerGroup.id))
5469
- ] }),
5470
- pinnedTopTable && pinnedTopTable.length > 0 && /* @__PURE__ */ jsx36(
5471
- PinnedRowsRenderer,
5472
- {
5473
- pinnedData: pinnedTopTable,
5474
- columns,
5475
- tanstackColumns,
5476
- getRowId,
5477
- rowHeight,
5478
- showCellVerticalBorder,
5479
- getRowClassName,
5480
- globalWrapText: wrapText,
5481
- columnWidths,
5482
- pinnedColumnOffsets,
5483
- columnVisibility,
5484
- position: "top"
5485
- }
5486
- ),
5487
- effectiveVirtualized ? /* @__PURE__ */ jsx36(
5488
- VirtualizedTableBody,
5489
- {
5490
- table,
5491
- rowHeight,
5492
- showCellVerticalBorder,
5493
- checkboxSelection,
5494
- disableRowSelectionOnClick,
5495
- getRowClassName,
5496
- overscan,
5497
- parentRef: tableContainerRef,
5498
- globalWrapText: wrapText,
5499
- columnWidths,
5500
- pinnedColumnOffsets,
5501
- rowSpanMap,
5502
- gridColumns: hasColSpan ? columns : void 0
5503
- }
5504
- ) : /* @__PURE__ */ jsx36(
5505
- StandardTableBody,
5506
- {
5507
- table,
5508
- rowHeight,
5509
- showCellVerticalBorder,
5510
- checkboxSelection,
5511
- disableRowSelectionOnClick,
5512
- getRowClassName,
5513
- globalWrapText: wrapText,
5514
- columnWidths,
5515
- pinnedColumnOffsets,
5516
- rowSpanMap,
5517
- gridColumns: hasColSpan ? columns : void 0
5518
- }
5519
- ),
5520
- pinnedBottomTable && pinnedBottomTable.length > 0 && /* @__PURE__ */ jsx36(
5521
- PinnedRowsRenderer,
5522
- {
5523
- pinnedData: pinnedBottomTable,
5524
- columns,
5525
- tanstackColumns,
5526
- getRowId,
5527
- rowHeight,
5528
- showCellVerticalBorder,
5529
- getRowClassName,
5530
- globalWrapText: wrapText,
5531
- columnWidths,
5532
- pinnedColumnOffsets,
5533
- columnVisibility,
5534
- position: "bottom"
5535
- }
5536
- )
5537
- ] })
5663
+ table,
5664
+ rowHeight,
5665
+ showCellVerticalBorder,
5666
+ checkboxSelection,
5667
+ disableRowSelectionOnClick,
5668
+ getRowClassName,
5669
+ overscan,
5670
+ parentRef: tableContainerRef,
5671
+ globalWrapText: wrapText,
5672
+ columnWidths,
5673
+ pinnedColumnOffsets,
5674
+ rowSpanMap,
5675
+ gridColumns: hasColSpan ? columns : void 0
5676
+ }
5677
+ ) : /* @__PURE__ */ jsx36(
5678
+ StandardTableBody,
5679
+ {
5680
+ table,
5681
+ rowHeight,
5682
+ showCellVerticalBorder,
5683
+ checkboxSelection,
5684
+ disableRowSelectionOnClick,
5685
+ getRowClassName,
5686
+ globalWrapText: wrapText,
5687
+ columnWidths,
5688
+ pinnedColumnOffsets,
5689
+ rowSpanMap,
5690
+ gridColumns: hasColSpan ? columns : void 0
5691
+ }
5692
+ ),
5693
+ pinnedBottomTable && pinnedBottomTable.length > 0 && /* @__PURE__ */ jsx36(
5694
+ PinnedRowsRenderer,
5695
+ {
5696
+ pinnedData: pinnedBottomTable,
5697
+ columns,
5698
+ tanstackColumns,
5699
+ getRowId,
5700
+ rowHeight,
5701
+ showCellVerticalBorder,
5702
+ getRowClassName,
5703
+ globalWrapText: wrapText,
5704
+ columnWidths,
5705
+ pinnedColumnOffsets,
5706
+ columnVisibility,
5707
+ position: "bottom"
5708
+ }
5709
+ )
5710
+ ]
5711
+ }
5712
+ )
5538
5713
  ]
5539
5714
  }
5540
- ),
5715
+ ) }),
5541
5716
  !effectiveVirtualized && !hideFooter && !hideFooterPagination && /* @__PURE__ */ jsx36(
5542
5717
  DataGridPagination,
5543
5718
  {
@@ -5547,7 +5722,7 @@ function DataGrid({
5547
5722
  paginationMode
5548
5723
  }
5549
5724
  ),
5550
- effectiveVirtualized && !hideFooter && /* @__PURE__ */ jsx36("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: /* @__PURE__ */ jsxs21("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
5725
+ effectiveVirtualized && !hideFooter && /* @__PURE__ */ jsx36("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: /* @__PURE__ */ jsxs22("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
5551
5726
  table.getFilteredRowModel().rows.length,
5552
5727
  " total rows (virtualized)"
5553
5728
  ] }) })
@@ -5559,9 +5734,17 @@ DataGrid.displayName = "DataGrid";
5559
5734
 
5560
5735
  // src/components/list.tsx
5561
5736
  import * as React37 from "react";
5562
- import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
5737
+ import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
5738
+ import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
5563
5739
  var List2 = React37.forwardRef(
5564
- ({ dividers = false, dense = false, clickable = false, className, ...props }, ref) => /* @__PURE__ */ jsx37(
5740
+ ({
5741
+ dividers = false,
5742
+ dense = false,
5743
+ clickable = false,
5744
+ disablePadding = false,
5745
+ className,
5746
+ ...props
5747
+ }, ref) => /* @__PURE__ */ jsx37(
5565
5748
  "ul",
5566
5749
  {
5567
5750
  ref,
@@ -5569,7 +5752,7 @@ var List2 = React37.forwardRef(
5569
5752
  "data-dividers": dividers,
5570
5753
  "data-dense": dense,
5571
5754
  "data-clickable": clickable,
5572
- className: cn("flex flex-col", className),
5755
+ className: cn("flex flex-col", !disablePadding && "py-1", className),
5573
5756
  ...props
5574
5757
  }
5575
5758
  )
@@ -5583,10 +5766,13 @@ var ListItem = React37.forwardRef(
5583
5766
  leading,
5584
5767
  trailing,
5585
5768
  secondaryAction,
5769
+ inset = false,
5770
+ disableGutters = false,
5771
+ alignItems = "center",
5586
5772
  className,
5587
5773
  children,
5588
5774
  ...props
5589
- }, ref) => /* @__PURE__ */ jsxs22(
5775
+ }, ref) => /* @__PURE__ */ jsxs23(
5590
5776
  "li",
5591
5777
  {
5592
5778
  ref,
@@ -5595,10 +5781,13 @@ var ListItem = React37.forwardRef(
5595
5781
  "aria-selected": selected,
5596
5782
  "aria-disabled": disabled,
5597
5783
  className: cn(
5598
- "flex items-center gap-3 px-4 py-3",
5784
+ "relative flex gap-3 py-2",
5785
+ alignItems === "center" ? "items-center" : "items-start",
5786
+ !disableGutters && "px-4",
5599
5787
  "border-b border-border last:border-b-0",
5600
5788
  '[ul[data-dividers="false"]_&]:border-b-0',
5601
- '[ul[data-dense="true"]_&]:py-2 [ul[data-dense="true"]_&]:px-3',
5789
+ '[ul[data-dense="true"]_&]:py-1',
5790
+ inset && "pl-14",
5602
5791
  clickable && !disabled && [
5603
5792
  "cursor-pointer",
5604
5793
  "hover:bg-muted",
@@ -5607,43 +5796,115 @@ var ListItem = React37.forwardRef(
5607
5796
  '[ul[data-clickable="true"]_&]:cursor-pointer [ul[data-clickable="true"]_&]:hover:bg-muted',
5608
5797
  selected && "bg-muted",
5609
5798
  disabled && "opacity-50 cursor-not-allowed",
5799
+ secondaryAction && "pr-12",
5610
5800
  className
5611
5801
  ),
5612
5802
  ...props,
5613
5803
  children: [
5614
- leading && /* @__PURE__ */ jsx37("div", { className: "shrink-0", children: leading }),
5804
+ leading && /* @__PURE__ */ jsx37(
5805
+ "div",
5806
+ {
5807
+ className: cn(
5808
+ "shrink-0",
5809
+ alignItems === "center" ? "self-center" : "self-start mt-0.5"
5810
+ ),
5811
+ children: leading
5812
+ }
5813
+ ),
5615
5814
  /* @__PURE__ */ jsx37("div", { className: "flex-1 min-w-0", children }),
5616
5815
  trailing && /* @__PURE__ */ jsx37("div", { className: "shrink-0", children: trailing }),
5617
- secondaryAction && /* @__PURE__ */ jsx37("div", { className: "shrink-0 ml-2", children: secondaryAction })
5816
+ secondaryAction && /* @__PURE__ */ jsx37("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 shrink-0", children: secondaryAction })
5618
5817
  ]
5619
5818
  }
5620
5819
  )
5621
5820
  );
5622
5821
  ListItem.displayName = "ListItem";
5822
+ var ListItemButton = React37.forwardRef(
5823
+ ({
5824
+ selected = false,
5825
+ dense = false,
5826
+ disableGutters = false,
5827
+ divider = false,
5828
+ alignItems = "center",
5829
+ autoFocus = false,
5830
+ disabled,
5831
+ className,
5832
+ children,
5833
+ ...props
5834
+ }, ref) => /* @__PURE__ */ jsx37(
5835
+ "button",
5836
+ {
5837
+ ref,
5838
+ type: "button",
5839
+ autoFocus,
5840
+ disabled,
5841
+ "aria-selected": selected,
5842
+ className: cn(
5843
+ "relative flex w-full gap-3 py-2 text-left text-sm",
5844
+ "transition-colors",
5845
+ alignItems === "center" ? "items-center" : "items-start",
5846
+ !disableGutters && "px-4",
5847
+ dense ? "py-1" : "py-2",
5848
+ '[ul[data-dense="true"]_&]:py-1',
5849
+ divider && "border-b border-border",
5850
+ "hover:bg-muted",
5851
+ "focus:outline-none focus-visible:bg-muted",
5852
+ selected && "bg-muted text-foreground",
5853
+ disabled && "pointer-events-none opacity-50",
5854
+ className
5855
+ ),
5856
+ ...props,
5857
+ children
5858
+ }
5859
+ )
5860
+ );
5861
+ ListItemButton.displayName = "ListItemButton";
5623
5862
  var ListItemText = React37.forwardRef(
5624
- ({ primary, secondary, noWrap = false, className, children, ...props }, ref) => /* @__PURE__ */ jsxs22("div", { ref, className: cn("min-w-0", className), ...props, children: [
5625
- primary && /* @__PURE__ */ jsx37(
5626
- "div",
5627
- {
5628
- className: cn(
5629
- "text-sm font-medium text-foreground",
5630
- noWrap && "truncate"
5863
+ ({
5864
+ primary,
5865
+ secondary,
5866
+ noWrap = false,
5867
+ inset = false,
5868
+ primaryTypographyProps,
5869
+ secondaryTypographyProps,
5870
+ className,
5871
+ children,
5872
+ ...props
5873
+ }, ref) => /* @__PURE__ */ jsxs23(
5874
+ "div",
5875
+ {
5876
+ ref,
5877
+ className: cn("min-w-0 flex-1", inset && "pl-10", className),
5878
+ ...props,
5879
+ children: [
5880
+ primary && /* @__PURE__ */ jsx37(
5881
+ "p",
5882
+ {
5883
+ ...primaryTypographyProps,
5884
+ className: cn(
5885
+ "text-sm font-medium text-foreground leading-snug",
5886
+ noWrap && "truncate",
5887
+ primaryTypographyProps?.className
5888
+ ),
5889
+ children: primary
5890
+ }
5631
5891
  ),
5632
- children: primary
5633
- }
5634
- ),
5635
- secondary && /* @__PURE__ */ jsx37(
5636
- "div",
5637
- {
5638
- className: cn(
5639
- "text-sm text-muted-foreground",
5640
- noWrap && "truncate"
5892
+ secondary && /* @__PURE__ */ jsx37(
5893
+ "p",
5894
+ {
5895
+ ...secondaryTypographyProps,
5896
+ className: cn(
5897
+ "text-xs text-muted-foreground leading-snug mt-0.5",
5898
+ noWrap && "truncate",
5899
+ secondaryTypographyProps?.className
5900
+ ),
5901
+ children: secondary
5902
+ }
5641
5903
  ),
5642
- children: secondary
5643
- }
5644
- ),
5645
- !primary && !secondary && children
5646
- ] })
5904
+ !primary && !secondary && children
5905
+ ]
5906
+ }
5907
+ )
5647
5908
  );
5648
5909
  ListItemText.displayName = "ListItemText";
5649
5910
  var ListItemIcon = React37.forwardRef(
@@ -5651,7 +5912,7 @@ var ListItemIcon = React37.forwardRef(
5651
5912
  "div",
5652
5913
  {
5653
5914
  ref,
5654
- className: cn("shrink-0 text-muted-foreground", className),
5915
+ className: cn("shrink-0 flex items-center justify-center text-muted-foreground w-5", className),
5655
5916
  ...props
5656
5917
  }
5657
5918
  )
@@ -5662,19 +5923,23 @@ var ListItemAvatar = React37.forwardRef(
5662
5923
  );
5663
5924
  ListItemAvatar.displayName = "ListItemAvatar";
5664
5925
  var ListSubheader = React37.forwardRef(
5665
- ({ sticky = false, className, ...props }, ref) => /* @__PURE__ */ jsx37(
5666
- "li",
5667
- {
5668
- ref,
5669
- role: "presentation",
5670
- className: cn(
5671
- "px-4 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground bg-background",
5672
- sticky && "sticky top-0 z-10",
5673
- className
5674
- ),
5675
- ...props
5676
- }
5677
- )
5926
+ ({ disableSticky = false, disableGutters = false, sticky, className, ...props }, ref) => {
5927
+ const isSticky = sticky !== void 0 ? sticky : !disableSticky;
5928
+ return /* @__PURE__ */ jsx37(
5929
+ "li",
5930
+ {
5931
+ ref,
5932
+ role: "presentation",
5933
+ className: cn(
5934
+ "py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground bg-background",
5935
+ !disableGutters && "px-4",
5936
+ isSticky && "sticky top-0 z-10",
5937
+ className
5938
+ ),
5939
+ ...props
5940
+ }
5941
+ );
5942
+ }
5678
5943
  );
5679
5944
  ListSubheader.displayName = "ListSubheader";
5680
5945
  var ListDivider = React37.forwardRef(
@@ -5683,16 +5948,57 @@ var ListDivider = React37.forwardRef(
5683
5948
  {
5684
5949
  ref,
5685
5950
  role: "separator",
5686
- className: cn(
5687
- "border-t border-border my-1",
5688
- inset && "ml-14",
5689
- className
5690
- ),
5951
+ className: cn("border-t border-border my-1", inset && "ml-14", className),
5691
5952
  ...props
5692
5953
  }
5693
5954
  )
5694
5955
  );
5695
5956
  ListDivider.displayName = "ListDivider";
5957
+ function VirtualList({
5958
+ items,
5959
+ itemHeight = 48,
5960
+ height = 400,
5961
+ overscan = 5,
5962
+ renderItem,
5963
+ className
5964
+ }) {
5965
+ const parentRef = React37.useRef(null);
5966
+ const virtualizer = useVirtualizer3({
5967
+ count: items.length,
5968
+ getScrollElement: () => parentRef.current,
5969
+ estimateSize: () => itemHeight,
5970
+ overscan
5971
+ });
5972
+ return /* @__PURE__ */ jsx37(
5973
+ "div",
5974
+ {
5975
+ ref: parentRef,
5976
+ style: { height, overflowY: "auto" },
5977
+ className: cn("relative", className),
5978
+ children: /* @__PURE__ */ jsx37(
5979
+ "ul",
5980
+ {
5981
+ role: "list",
5982
+ style: { height: virtualizer.getTotalSize(), position: "relative" },
5983
+ children: virtualizer.getVirtualItems().map((virtualRow) => /* @__PURE__ */ jsx37(
5984
+ "li",
5985
+ {
5986
+ style: {
5987
+ position: "absolute",
5988
+ top: virtualRow.start,
5989
+ left: 0,
5990
+ right: 0,
5991
+ height: virtualRow.size
5992
+ },
5993
+ children: renderItem(items[virtualRow.index], virtualRow.index)
5994
+ },
5995
+ virtualRow.key
5996
+ ))
5997
+ }
5998
+ )
5999
+ }
6000
+ );
6001
+ }
5696
6002
 
5697
6003
  // src/components/charts.tsx
5698
6004
  import * as React38 from "react";
@@ -5722,7 +6028,7 @@ import {
5722
6028
  LabelList
5723
6029
  } from "recharts";
5724
6030
  import { accentColors as accentColors2 } from "@onesaz/tokens";
5725
- import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
6031
+ import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
5726
6032
  var BarChart = ({
5727
6033
  data,
5728
6034
  dataKey,
@@ -5775,7 +6081,7 @@ var BarChart = ({
5775
6081
  )
5776
6082
  },
5777
6083
  keyConfig.dataKey
5778
- )) : /* @__PURE__ */ jsxs23(
6084
+ )) : /* @__PURE__ */ jsxs24(
5779
6085
  Bar,
5780
6086
  {
5781
6087
  dataKey,
@@ -5813,7 +6119,7 @@ var BarChart = ({
5813
6119
  contentStyle: tooltip.contentStyle
5814
6120
  }
5815
6121
  ) : showTooltip ? /* @__PURE__ */ jsx38(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }) : null;
5816
- return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs23(
6122
+ return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(
5817
6123
  RechartsBarChart,
5818
6124
  {
5819
6125
  data,
@@ -5900,7 +6206,7 @@ var LineChart = ({
5900
6206
  name: name || dataKey
5901
6207
  }
5902
6208
  );
5903
- return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs23(RechartsLineChart, { data, margin, children: [
6209
+ return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsLineChart, { data, margin, children: [
5904
6210
  showGrid && /* @__PURE__ */ jsx38(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--muted-foreground))", opacity: 0.3 }),
5905
6211
  xAxis && !xAxis.hide && /* @__PURE__ */ jsx38(
5906
6212
  XAxis,
@@ -5953,7 +6259,7 @@ var PieChart = ({
5953
6259
  accentColors2[accentColor][1]
5954
6260
  ];
5955
6261
  const chartColors = colors || defaultColors;
5956
- return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs23(RechartsPieChart, { children: [
6262
+ return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsPieChart, { children: [
5957
6263
  /* @__PURE__ */ jsx38(
5958
6264
  Pie,
5959
6265
  {
@@ -6022,7 +6328,7 @@ var AreaChart = ({
6022
6328
  name: name || dataKey
6023
6329
  }
6024
6330
  );
6025
- return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs23(RechartsAreaChart, { data, margin, children: [
6331
+ return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsAreaChart, { data, margin, children: [
6026
6332
  showGrid && /* @__PURE__ */ jsx38(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--muted-foreground))", opacity: 0.3 }),
6027
6333
  xAxis && !xAxis.hide && /* @__PURE__ */ jsx38(
6028
6334
  XAxis,
@@ -6065,7 +6371,7 @@ var ScatterChart = ({
6065
6371
  className
6066
6372
  }) => {
6067
6373
  const { accentColor } = useTheme();
6068
- return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs23(RechartsScatterChart, { data, margin, children: [
6374
+ return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsScatterChart, { data, margin, children: [
6069
6375
  showGrid && /* @__PURE__ */ jsx38(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--muted-foreground))", opacity: 0.3 }),
6070
6376
  xAxis && !xAxis.hide && /* @__PURE__ */ jsx38(
6071
6377
  XAxis,
@@ -6106,7 +6412,7 @@ var RadarChart = ({
6106
6412
  className
6107
6413
  }) => {
6108
6414
  const { accentColor } = useTheme();
6109
- return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs23(RechartsRadarChart, { data, children: [
6415
+ return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsRadarChart, { data, children: [
6110
6416
  /* @__PURE__ */ jsx38(PolarGrid, {}),
6111
6417
  /* @__PURE__ */ jsx38(PolarAngleAxis, { dataKey: nameKey }),
6112
6418
  /* @__PURE__ */ jsx38(PolarRadiusAxis, {}),
@@ -6168,8 +6474,8 @@ var DonutChart = ({
6168
6474
  }
6169
6475
  };
6170
6476
  const styling = { ...defaultAdvancedStyling, ...advancedStyling };
6171
- const gradientDefs = styling.enableGradients ? /* @__PURE__ */ jsxs23("defs", { children: [
6172
- styling.enableShadows && /* @__PURE__ */ jsxs23(
6477
+ const gradientDefs = styling.enableGradients ? /* @__PURE__ */ jsxs24("defs", { children: [
6478
+ styling.enableShadows && /* @__PURE__ */ jsxs24(
6173
6479
  "filter",
6174
6480
  {
6175
6481
  id: "deepInsetShadow",
@@ -6230,7 +6536,7 @@ var DonutChart = ({
6230
6536
  )
6231
6537
  }
6232
6538
  ),
6233
- styling.gradients?.map((gradient) => /* @__PURE__ */ jsxs23(
6539
+ styling.gradients?.map((gradient) => /* @__PURE__ */ jsxs24(
6234
6540
  "linearGradient",
6235
6541
  {
6236
6542
  id: gradient.id,
@@ -6255,7 +6561,7 @@ var DonutChart = ({
6255
6561
  contentStyle: tooltip.contentStyle
6256
6562
  }
6257
6563
  ) : showTooltip ? /* @__PURE__ */ jsx38(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }) : null;
6258
- return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs23(RechartsPieChart, { children: [
6564
+ return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsPieChart, { children: [
6259
6565
  gradientDefs,
6260
6566
  /* @__PURE__ */ jsx38(
6261
6567
  Pie,
@@ -6317,7 +6623,7 @@ var ProgressCard = ({
6317
6623
  const bgShadowId = `progress-bg-shadow-${Math.random().toString(36).substr(2, 9)}`;
6318
6624
  const [startColor, endColor] = colorFn(normalizedPercentage);
6319
6625
  const percentageTextColor = typography.percentageColorAuto ? normalizedPercentage <= 30 ? "text-green-600" : normalizedPercentage <= 50 ? "text-blue-600" : "text-red-600" : "text-gray-900 dark:text-gray-100";
6320
- return /* @__PURE__ */ jsxs23(
6626
+ return /* @__PURE__ */ jsxs24(
6321
6627
  "div",
6322
6628
  {
6323
6629
  className: cn(
@@ -6327,16 +6633,16 @@ var ProgressCard = ({
6327
6633
  ),
6328
6634
  onClick: () => onClick?.(questionNum),
6329
6635
  children: [
6330
- /* @__PURE__ */ jsxs23("div", { className: "flex flex-col items-center", children: [
6636
+ /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-center", children: [
6331
6637
  /* @__PURE__ */ jsx38("span", { className: cn("font-bold", typography.questionFontSize, typography.questionColor), children: questionNum }),
6332
- /* @__PURE__ */ jsxs23("span", { className: cn("font-bold", typography.percentageFontSize, percentageTextColor), children: [
6638
+ /* @__PURE__ */ jsxs24("span", { className: cn("font-bold", typography.percentageFontSize, percentageTextColor), children: [
6333
6639
  normalizedPercentage.toFixed(1),
6334
6640
  "%"
6335
6641
  ] })
6336
6642
  ] }),
6337
- /* @__PURE__ */ jsx38("div", { className: "flex items-center", style: { width: `${donutSize + 10}px`, height: `${donutSize + 10}px` }, children: /* @__PURE__ */ jsxs23("svg", { width: donutSize + 10, height: donutSize + 10, viewBox: "0 0 100 100", children: [
6338
- /* @__PURE__ */ jsxs23("defs", { children: [
6339
- enableGradients && /* @__PURE__ */ jsxs23(
6643
+ /* @__PURE__ */ jsx38("div", { className: "flex items-center", style: { width: `${donutSize + 10}px`, height: `${donutSize + 10}px` }, children: /* @__PURE__ */ jsxs24("svg", { width: donutSize + 10, height: donutSize + 10, viewBox: "0 0 100 100", children: [
6644
+ /* @__PURE__ */ jsxs24("defs", { children: [
6645
+ enableGradients && /* @__PURE__ */ jsxs24(
6340
6646
  "linearGradient",
6341
6647
  {
6342
6648
  id: gradientId,
@@ -6350,8 +6656,8 @@ var ProgressCard = ({
6350
6656
  ]
6351
6657
  }
6352
6658
  ),
6353
- enableShadows && /* @__PURE__ */ jsxs23(Fragment5, { children: [
6354
- /* @__PURE__ */ jsxs23(
6659
+ enableShadows && /* @__PURE__ */ jsxs24(Fragment5, { children: [
6660
+ /* @__PURE__ */ jsxs24(
6355
6661
  "filter",
6356
6662
  {
6357
6663
  id: bgShadowId,
@@ -6482,7 +6788,7 @@ var ProgressDonut = ({
6482
6788
  if (!data || data.length === 0) {
6483
6789
  return /* @__PURE__ */ jsx38("div", { className: cn("text-gray-500", className), children: "No data provided" });
6484
6790
  }
6485
- return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs23(RechartsPieChart, { children: [
6791
+ return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsPieChart, { children: [
6486
6792
  /* @__PURE__ */ jsx38(
6487
6793
  Pie,
6488
6794
  {
@@ -6537,12 +6843,12 @@ var MultiProgressDonut = ({
6537
6843
  const shadowId = `progress-shadow-${index}`;
6538
6844
  const bgShadowId = `progress-bg-shadow-${index}`;
6539
6845
  const [startColor, endColor] = colorFn(percentage);
6540
- return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col items-center gap-2", children: [
6846
+ return /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-center gap-2", children: [
6541
6847
  item.label && /* @__PURE__ */ jsx38("div", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: item.label }),
6542
- /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
6543
- /* @__PURE__ */ jsxs23("svg", { width: size, height: size, viewBox: "0 0 100 100", children: [
6544
- /* @__PURE__ */ jsxs23("defs", { children: [
6545
- enableGradients && /* @__PURE__ */ jsxs23(
6848
+ /* @__PURE__ */ jsxs24("div", { className: "relative", children: [
6849
+ /* @__PURE__ */ jsxs24("svg", { width: size, height: size, viewBox: "0 0 100 100", children: [
6850
+ /* @__PURE__ */ jsxs24("defs", { children: [
6851
+ enableGradients && /* @__PURE__ */ jsxs24(
6546
6852
  "linearGradient",
6547
6853
  {
6548
6854
  id: gradientId,
@@ -6556,8 +6862,8 @@ var MultiProgressDonut = ({
6556
6862
  ]
6557
6863
  }
6558
6864
  ),
6559
- enableShadows && /* @__PURE__ */ jsxs23(Fragment5, { children: [
6560
- /* @__PURE__ */ jsxs23(
6865
+ enableShadows && /* @__PURE__ */ jsxs24(Fragment5, { children: [
6866
+ /* @__PURE__ */ jsxs24(
6561
6867
  "filter",
6562
6868
  {
6563
6869
  id: bgShadowId,
@@ -6649,7 +6955,7 @@ var MultiProgressDonut = ({
6649
6955
  }
6650
6956
  )
6651
6957
  ] }),
6652
- showPercentage && /* @__PURE__ */ jsx38("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs23("span", { className: "text-xs font-bold text-gray-700 dark:text-gray-300", children: [
6958
+ showPercentage && /* @__PURE__ */ jsx38("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs24("span", { className: "text-xs font-bold text-gray-700 dark:text-gray-300", children: [
6653
6959
  percentage.toFixed(1),
6654
6960
  "%"
6655
6961
  ] }) })
@@ -6752,7 +7058,7 @@ var PackedBubbleChart = ({
6752
7058
  if (colorByValue) return colorByValue(item.value);
6753
7059
  return defaultColor;
6754
7060
  };
6755
- return /* @__PURE__ */ jsxs23(
7061
+ return /* @__PURE__ */ jsxs24(
6756
7062
  "div",
6757
7063
  {
6758
7064
  ref: containerRef,
@@ -6767,7 +7073,7 @@ var PackedBubbleChart = ({
6767
7073
  children: title
6768
7074
  }
6769
7075
  ),
6770
- /* @__PURE__ */ jsx38("svg", { width: "100%", height: "100%", className: "overflow-visible", children: bubbles.map((bubble, index) => /* @__PURE__ */ jsxs23(
7076
+ /* @__PURE__ */ jsx38("svg", { width: "100%", height: "100%", className: "overflow-visible", children: bubbles.map((bubble, index) => /* @__PURE__ */ jsxs24(
6771
7077
  "g",
6772
7078
  {
6773
7079
  onClick: () => onBubbleClick?.(bubble.data),
@@ -6828,7 +7134,7 @@ var PackedBubbleChart = ({
6828
7134
 
6829
7135
  // src/components/breadcrumbs.tsx
6830
7136
  import * as React39 from "react";
6831
- import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
7137
+ import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
6832
7138
  var Breadcrumbs = React39.forwardRef(
6833
7139
  ({
6834
7140
  separator,
@@ -6870,7 +7176,7 @@ var Breadcrumbs = React39.forwardRef(
6870
7176
  } else {
6871
7177
  displayedItems = childArray;
6872
7178
  }
6873
- return /* @__PURE__ */ jsx39("nav", { ref, "aria-label": "Breadcrumb", className, ...props, children: /* @__PURE__ */ jsx39("ol", { className: "flex items-center gap-1.5 flex-wrap", children: displayedItems.map((child, index) => /* @__PURE__ */ jsxs24("li", { className: "flex items-center gap-1.5", children: [
7179
+ return /* @__PURE__ */ jsx39("nav", { ref, "aria-label": "Breadcrumb", className, ...props, children: /* @__PURE__ */ jsx39("ol", { className: "flex items-center gap-1.5 flex-wrap", children: displayedItems.map((child, index) => /* @__PURE__ */ jsxs25("li", { className: "flex items-center gap-1.5", children: [
6874
7180
  index > 0 && /* @__PURE__ */ jsx39("span", { className: "flex items-center", "aria-hidden": "true", children: separatorElement }),
6875
7181
  child
6876
7182
  ] }, index)) }) });
@@ -6980,7 +7286,7 @@ var BreadcrumbEllipsis = React39.forwardRef(
6980
7286
  "aria-hidden": "true",
6981
7287
  className: cn("text-sm text-muted-foreground", className),
6982
7288
  ...props,
6983
- children: /* @__PURE__ */ jsxs24(
7289
+ children: /* @__PURE__ */ jsxs25(
6984
7290
  "svg",
6985
7291
  {
6986
7292
  xmlns: "http://www.w3.org/2000/svg",
@@ -7019,14 +7325,14 @@ BreadcrumbPage.displayName = "BreadcrumbPage";
7019
7325
  // src/components/dropdown-menu.tsx
7020
7326
  import * as React40 from "react";
7021
7327
  import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
7022
- import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
7328
+ import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
7023
7329
  var DropdownMenu = DropdownMenuPrimitive.Root;
7024
7330
  var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
7025
7331
  var DropdownMenuGroup = DropdownMenuPrimitive.Group;
7026
7332
  var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
7027
7333
  var DropdownMenuSub = DropdownMenuPrimitive.Sub;
7028
7334
  var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
7029
- var DropdownMenuSubTrigger = React40.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs25(
7335
+ var DropdownMenuSubTrigger = React40.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs26(
7030
7336
  DropdownMenuPrimitive.SubTrigger,
7031
7337
  {
7032
7338
  ref,
@@ -7109,7 +7415,7 @@ var DropdownMenuItem = React40.forwardRef(({ className, inset, ...props }, ref)
7109
7415
  }
7110
7416
  ));
7111
7417
  DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
7112
- var DropdownMenuCheckboxItem = React40.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs25(
7418
+ var DropdownMenuCheckboxItem = React40.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs26(
7113
7419
  DropdownMenuPrimitive.CheckboxItem,
7114
7420
  {
7115
7421
  ref,
@@ -7141,7 +7447,7 @@ var DropdownMenuCheckboxItem = React40.forwardRef(({ className, children, checke
7141
7447
  }
7142
7448
  ));
7143
7449
  DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
7144
- var DropdownMenuRadioItem = React40.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs25(
7450
+ var DropdownMenuRadioItem = React40.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs26(
7145
7451
  DropdownMenuPrimitive.RadioItem,
7146
7452
  {
7147
7453
  ref,
@@ -7206,7 +7512,7 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
7206
7512
  // src/components/drawer.tsx
7207
7513
  import * as React41 from "react";
7208
7514
  import * as DialogPrimitive2 from "@radix-ui/react-dialog";
7209
- import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
7515
+ import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
7210
7516
  var Drawer = DialogPrimitive2.Root;
7211
7517
  var DrawerTrigger = DialogPrimitive2.Trigger;
7212
7518
  var DrawerClose = DialogPrimitive2.Close;
@@ -7231,9 +7537,9 @@ var slideVariants = {
7231
7537
  top: "inset-x-0 top-0 w-full data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
7232
7538
  bottom: "inset-x-0 bottom-0 w-full data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
7233
7539
  };
7234
- var DrawerContent = React41.forwardRef(({ side = "right", showClose = true, className, children, ...props }, ref) => /* @__PURE__ */ jsxs26(DrawerPortal, { children: [
7540
+ var DrawerContent = React41.forwardRef(({ side = "right", showClose = true, className, children, ...props }, ref) => /* @__PURE__ */ jsxs27(DrawerPortal, { children: [
7235
7541
  /* @__PURE__ */ jsx41(DrawerOverlay, {}),
7236
- /* @__PURE__ */ jsxs26(
7542
+ /* @__PURE__ */ jsxs27(
7237
7543
  DialogPrimitive2.Content,
7238
7544
  {
7239
7545
  ref,
@@ -7247,7 +7553,7 @@ var DrawerContent = React41.forwardRef(({ side = "right", showClose = true, clas
7247
7553
  ...props,
7248
7554
  children: [
7249
7555
  children,
7250
- showClose && /* @__PURE__ */ jsxs26(
7556
+ showClose && /* @__PURE__ */ jsxs27(
7251
7557
  DrawerClose,
7252
7558
  {
7253
7559
  className: cn(
@@ -7350,7 +7656,7 @@ var SheetFooter = DrawerFooter;
7350
7656
 
7351
7657
  // src/components/topbar.tsx
7352
7658
  import * as React42 from "react";
7353
- import { Fragment as Fragment6, jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
7659
+ import { Fragment as Fragment6, jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
7354
7660
  var sizeClasses5 = {
7355
7661
  sm: "h-12",
7356
7662
  md: "h-14",
@@ -7378,7 +7684,7 @@ var TopBar = React42.forwardRef(
7378
7684
  TopBar.displayName = "TopBar";
7379
7685
  var TopBarBrand = React42.forwardRef(
7380
7686
  ({ className, logo, name, href, children, ...props }, ref) => {
7381
- const content = /* @__PURE__ */ jsxs27(Fragment6, { children: [
7687
+ const content = /* @__PURE__ */ jsxs28(Fragment6, { children: [
7382
7688
  logo && /* @__PURE__ */ jsx42("span", { className: "shrink-0", children: logo }),
7383
7689
  name && /* @__PURE__ */ jsx42("span", { className: "font-semibold text-lg", children: name }),
7384
7690
  children
@@ -7460,7 +7766,7 @@ TopBarDivider.displayName = "TopBarDivider";
7460
7766
 
7461
7767
  // src/components/sidebar.tsx
7462
7768
  import * as React43 from "react";
7463
- import { Fragment as Fragment7, jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
7769
+ import { Fragment as Fragment7, jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
7464
7770
  var SidebarContext = React43.createContext(void 0);
7465
7771
  var useSidebar = () => {
7466
7772
  const context = React43.useContext(SidebarContext);
@@ -7558,7 +7864,7 @@ SidebarFooter.displayName = "SidebarFooter";
7558
7864
  var SidebarGroup = React43.forwardRef(
7559
7865
  ({ className, label, children, ...props }, ref) => {
7560
7866
  const { collapsed } = useSidebar();
7561
- return /* @__PURE__ */ jsxs28("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
7867
+ return /* @__PURE__ */ jsxs29("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
7562
7868
  label && !collapsed && /* @__PURE__ */ jsx43("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
7563
7869
  label && collapsed && /* @__PURE__ */ jsx43("div", { className: "flex justify-center py-1.5", children: /* @__PURE__ */ jsx43("div", { className: "h-px w-4 bg-border" }) }),
7564
7870
  /* @__PURE__ */ jsx43("div", { className: "space-y-1", children })
@@ -7569,9 +7875,9 @@ SidebarGroup.displayName = "SidebarGroup";
7569
7875
  var SidebarItem = React43.forwardRef(
7570
7876
  ({ className, icon, active, disabled, badge, onClick, href, children, ...props }, ref) => {
7571
7877
  const { collapsed } = useSidebar();
7572
- const content = /* @__PURE__ */ jsxs28(Fragment7, { children: [
7878
+ const content = /* @__PURE__ */ jsxs29(Fragment7, { children: [
7573
7879
  icon && /* @__PURE__ */ jsx43("span", { className: cn("shrink-0", collapsed ? "mx-auto" : ""), children: icon }),
7574
- !collapsed && /* @__PURE__ */ jsxs28(Fragment7, { children: [
7880
+ !collapsed && /* @__PURE__ */ jsxs29(Fragment7, { children: [
7575
7881
  /* @__PURE__ */ jsx43("span", { className: "flex-1 truncate", children }),
7576
7882
  badge && /* @__PURE__ */ jsx43("span", { className: "shrink-0", children: badge })
7577
7883
  ] })
@@ -7613,8 +7919,8 @@ var SidebarSubMenu = React43.forwardRef(
7613
7919
  if (collapsed) {
7614
7920
  return /* @__PURE__ */ jsx43(SidebarItem, { icon, className, children: label });
7615
7921
  }
7616
- return /* @__PURE__ */ jsxs28("div", { ref, className, ...props, children: [
7617
- /* @__PURE__ */ jsxs28(
7922
+ return /* @__PURE__ */ jsxs29("div", { ref, className, ...props, children: [
7923
+ /* @__PURE__ */ jsxs29(
7618
7924
  "div",
7619
7925
  {
7620
7926
  className: cn(
@@ -7666,7 +7972,7 @@ var SidebarToggle = React43.forwardRef(
7666
7972
  ),
7667
7973
  "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
7668
7974
  ...props,
7669
- children: children || /* @__PURE__ */ jsxs28(
7975
+ children: children || /* @__PURE__ */ jsxs29(
7670
7976
  "svg",
7671
7977
  {
7672
7978
  className: cn("h-5 w-5 transition-transform", collapsed && "rotate-180"),
@@ -7692,7 +7998,7 @@ SidebarToggle.displayName = "SidebarToggle";
7692
7998
 
7693
7999
  // src/components/sidebar-rail.tsx
7694
8000
  import * as React44 from "react";
7695
- import { Fragment as Fragment8, jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
8001
+ import { Fragment as Fragment8, jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
7696
8002
  var SidebarRailContext = React44.createContext(void 0);
7697
8003
  var useSidebarRail = () => {
7698
8004
  const context = React44.useContext(SidebarRailContext);
@@ -7886,7 +8192,7 @@ var IconRailItem = React44.forwardRef(
7886
8192
  setActiveRail(railId);
7887
8193
  }
7888
8194
  };
7889
- return /* @__PURE__ */ jsxs29(
8195
+ return /* @__PURE__ */ jsxs30(
7890
8196
  "button",
7891
8197
  {
7892
8198
  ref,
@@ -7922,7 +8228,7 @@ var RailPanel = React44.forwardRef(
7922
8228
  }
7923
8229
  };
7924
8230
  if (!isVisible) return null;
7925
- return /* @__PURE__ */ jsxs29(
8231
+ return /* @__PURE__ */ jsxs30(
7926
8232
  "div",
7927
8233
  {
7928
8234
  ref,
@@ -7935,7 +8241,7 @@ var RailPanel = React44.forwardRef(
7935
8241
  onMouseLeave: handleMouseLeave,
7936
8242
  ...props,
7937
8243
  children: [
7938
- title && /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between h-14 px-4 border-b border-border shrink-0", children: [
8244
+ title && /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between h-14 px-4 border-b border-border shrink-0", children: [
7939
8245
  /* @__PURE__ */ jsx44("span", { className: "font-semibold text-sm", children: title }),
7940
8246
  /* @__PURE__ */ jsx44(
7941
8247
  "button",
@@ -7944,7 +8250,7 @@ var RailPanel = React44.forwardRef(
7944
8250
  onClick: () => setActiveRail(null),
7945
8251
  className: "p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground cursor-pointer",
7946
8252
  "aria-label": "Close panel",
7947
- children: /* @__PURE__ */ jsxs29(
8253
+ children: /* @__PURE__ */ jsxs30(
7948
8254
  "svg",
7949
8255
  {
7950
8256
  className: "h-4 w-4",
@@ -7973,7 +8279,7 @@ var RailPanel = React44.forwardRef(
7973
8279
  RailPanel.displayName = "RailPanel";
7974
8280
  var RailPanelGroup = React44.forwardRef(
7975
8281
  ({ className, label, children, ...props }, ref) => {
7976
- return /* @__PURE__ */ jsxs29("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
8282
+ return /* @__PURE__ */ jsxs30("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
7977
8283
  label && /* @__PURE__ */ jsx44("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
7978
8284
  /* @__PURE__ */ jsx44("div", { className: "space-y-1", children })
7979
8285
  ] });
@@ -7982,7 +8288,7 @@ var RailPanelGroup = React44.forwardRef(
7982
8288
  RailPanelGroup.displayName = "RailPanelGroup";
7983
8289
  var RailPanelItem = React44.forwardRef(
7984
8290
  ({ className, icon, active, disabled, badge, href, children, onClick, ...props }, ref) => {
7985
- const content = /* @__PURE__ */ jsxs29(Fragment8, { children: [
8291
+ const content = /* @__PURE__ */ jsxs30(Fragment8, { children: [
7986
8292
  icon && /* @__PURE__ */ jsx44("span", { className: "shrink-0", children: icon }),
7987
8293
  /* @__PURE__ */ jsx44("span", { className: "flex-1 truncate", children }),
7988
8294
  badge && /* @__PURE__ */ jsx44("span", { className: "shrink-0", children: badge })
@@ -8014,18 +8320,18 @@ RailPanelItem.displayName = "RailPanelItem";
8014
8320
 
8015
8321
  // src/playground.tsx
8016
8322
  import * as React45 from "react";
8017
- import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
8018
- var Section = ({ title, children }) => /* @__PURE__ */ jsxs30("div", { className: "mb-8", children: [
8323
+ import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
8324
+ var Section = ({ title, children }) => /* @__PURE__ */ jsxs31("div", { className: "mb-8", children: [
8019
8325
  /* @__PURE__ */ jsx45("h2", { className: "text-xl font-semibold mb-4 text-foreground", children: title }),
8020
8326
  /* @__PURE__ */ jsx45("div", { className: "p-4 border border-border rounded-lg bg-background", children })
8021
8327
  ] });
8022
8328
  var ThemeToggle = () => {
8023
8329
  const { theme, setTheme } = useTheme();
8024
- return /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
8330
+ return /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
8025
8331
  /* @__PURE__ */ jsx45(Label, { children: "Theme:" }),
8026
- /* @__PURE__ */ jsxs30(SelectNamespace, { value: theme, onValueChange: (value) => setTheme(value), children: [
8332
+ /* @__PURE__ */ jsxs31(SelectNamespace, { value: theme, onValueChange: (value) => setTheme(value), children: [
8027
8333
  /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-32", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Select theme" }) }),
8028
- /* @__PURE__ */ jsxs30(SelectContent, { children: [
8334
+ /* @__PURE__ */ jsxs31(SelectContent, { children: [
8029
8335
  /* @__PURE__ */ jsx45(SelectItem, { value: "light", children: "Light" }),
8030
8336
  /* @__PURE__ */ jsx45(SelectItem, { value: "dark", children: "Dark" }),
8031
8337
  /* @__PURE__ */ jsx45(SelectItem, { value: "system", children: "System" })
@@ -8048,13 +8354,13 @@ var PlaygroundContent = () => {
8048
8354
  { value: "svelte", label: "Svelte" },
8049
8355
  { value: "solid", label: "SolidJS" }
8050
8356
  ];
8051
- return /* @__PURE__ */ jsx45("div", { className: "min-h-screen bg-background p-8", children: /* @__PURE__ */ jsxs30("div", { className: "max-w-4xl mx-auto", children: [
8052
- /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between mb-8", children: [
8357
+ return /* @__PURE__ */ jsx45("div", { className: "min-h-screen bg-background p-8", children: /* @__PURE__ */ jsxs31("div", { className: "max-w-4xl mx-auto", children: [
8358
+ /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between mb-8", children: [
8053
8359
  /* @__PURE__ */ jsx45("h1", { className: "text-3xl font-bold text-foreground", children: "@onesaz/ui Playground" }),
8054
8360
  /* @__PURE__ */ jsx45(ThemeToggle, {})
8055
8361
  ] }),
8056
- /* @__PURE__ */ jsxs30(Section, { title: "Button", children: [
8057
- /* @__PURE__ */ jsxs30("div", { className: "flex flex-wrap gap-4", children: [
8362
+ /* @__PURE__ */ jsxs31(Section, { title: "Button", children: [
8363
+ /* @__PURE__ */ jsxs31("div", { className: "flex flex-wrap gap-4", children: [
8058
8364
  /* @__PURE__ */ jsx45(Button, { variant: "default", children: "Default" }),
8059
8365
  /* @__PURE__ */ jsx45(Button, { variant: "destructive", children: "Destructive" }),
8060
8366
  /* @__PURE__ */ jsx45(Button, { variant: "outline", children: "Outline" }),
@@ -8062,19 +8368,19 @@ var PlaygroundContent = () => {
8062
8368
  /* @__PURE__ */ jsx45(Button, { variant: "ghost", children: "Ghost" }),
8063
8369
  /* @__PURE__ */ jsx45(Button, { variant: "link", children: "Link" })
8064
8370
  ] }),
8065
- /* @__PURE__ */ jsxs30("div", { className: "flex flex-wrap gap-4 mt-4", children: [
8371
+ /* @__PURE__ */ jsxs31("div", { className: "flex flex-wrap gap-4 mt-4", children: [
8066
8372
  /* @__PURE__ */ jsx45(Button, { size: "sm", children: "Small" }),
8067
8373
  /* @__PURE__ */ jsx45(Button, { size: "default", children: "Default" }),
8068
8374
  /* @__PURE__ */ jsx45(Button, { size: "lg", children: "Large" }),
8069
8375
  /* @__PURE__ */ jsx45(Button, { size: "icon", children: "\u{1F514}" })
8070
8376
  ] }),
8071
- /* @__PURE__ */ jsxs30("div", { className: "flex flex-wrap gap-4 mt-4", children: [
8377
+ /* @__PURE__ */ jsxs31("div", { className: "flex flex-wrap gap-4 mt-4", children: [
8072
8378
  /* @__PURE__ */ jsx45(Button, { disabled: true, children: "Disabled" }),
8073
8379
  /* @__PURE__ */ jsx45(Button, { variant: "outline", disabled: true, children: "Disabled Outline" })
8074
8380
  ] })
8075
8381
  ] }),
8076
- /* @__PURE__ */ jsx45(Section, { title: "Input", children: /* @__PURE__ */ jsxs30("div", { className: "space-y-4 max-w-md", children: [
8077
- /* @__PURE__ */ jsxs30("div", { children: [
8382
+ /* @__PURE__ */ jsx45(Section, { title: "Input", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4 max-w-md", children: [
8383
+ /* @__PURE__ */ jsxs31("div", { children: [
8078
8384
  /* @__PURE__ */ jsx45(Label, { htmlFor: "input-default", children: "Default Input" }),
8079
8385
  /* @__PURE__ */ jsx45(
8080
8386
  Input,
@@ -8086,17 +8392,17 @@ var PlaygroundContent = () => {
8086
8392
  }
8087
8393
  )
8088
8394
  ] }),
8089
- /* @__PURE__ */ jsxs30("div", { children: [
8395
+ /* @__PURE__ */ jsxs31("div", { children: [
8090
8396
  /* @__PURE__ */ jsx45(Label, { htmlFor: "input-disabled", children: "Disabled Input" }),
8091
8397
  /* @__PURE__ */ jsx45(Input, { id: "input-disabled", placeholder: "Disabled...", disabled: true })
8092
8398
  ] }),
8093
- /* @__PURE__ */ jsxs30("div", { children: [
8399
+ /* @__PURE__ */ jsxs31("div", { children: [
8094
8400
  /* @__PURE__ */ jsx45(Label, { htmlFor: "input-type", children: "Email Input" }),
8095
8401
  /* @__PURE__ */ jsx45(Input, { id: "input-type", type: "email", placeholder: "email@example.com" })
8096
8402
  ] })
8097
8403
  ] }) }),
8098
- /* @__PURE__ */ jsx45(Section, { title: "Textarea", children: /* @__PURE__ */ jsxs30("div", { className: "space-y-4 max-w-md", children: [
8099
- /* @__PURE__ */ jsxs30("div", { children: [
8404
+ /* @__PURE__ */ jsx45(Section, { title: "Textarea", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4 max-w-md", children: [
8405
+ /* @__PURE__ */ jsxs31("div", { children: [
8100
8406
  /* @__PURE__ */ jsx45(Label, { htmlFor: "textarea-default", children: "Default Textarea" }),
8101
8407
  /* @__PURE__ */ jsx45(
8102
8408
  Textarea,
@@ -8108,34 +8414,34 @@ var PlaygroundContent = () => {
8108
8414
  }
8109
8415
  )
8110
8416
  ] }),
8111
- /* @__PURE__ */ jsxs30("div", { children: [
8417
+ /* @__PURE__ */ jsxs31("div", { children: [
8112
8418
  /* @__PURE__ */ jsx45(Label, { htmlFor: "textarea-disabled", children: "Disabled Textarea" }),
8113
8419
  /* @__PURE__ */ jsx45(Textarea, { id: "textarea-disabled", placeholder: "Disabled...", disabled: true })
8114
8420
  ] })
8115
8421
  ] }) }),
8116
- /* @__PURE__ */ jsx45(Section, { title: "Select", children: /* @__PURE__ */ jsxs30("div", { className: "space-y-4 max-w-md", children: [
8117
- /* @__PURE__ */ jsxs30("div", { children: [
8422
+ /* @__PURE__ */ jsx45(Section, { title: "Select", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4 max-w-md", children: [
8423
+ /* @__PURE__ */ jsxs31("div", { children: [
8118
8424
  /* @__PURE__ */ jsx45(Label, { children: "Default Select" }),
8119
- /* @__PURE__ */ jsxs30(SelectNamespace, { value: selectValue, onValueChange: setSelectValue, children: [
8425
+ /* @__PURE__ */ jsxs31(SelectNamespace, { value: selectValue, onValueChange: setSelectValue, children: [
8120
8426
  /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Select an option..." }) }),
8121
- /* @__PURE__ */ jsxs30(SelectContent, { children: [
8427
+ /* @__PURE__ */ jsxs31(SelectContent, { children: [
8122
8428
  /* @__PURE__ */ jsx45(SelectItem, { value: "option1", children: "Option 1" }),
8123
8429
  /* @__PURE__ */ jsx45(SelectItem, { value: "option2", children: "Option 2" }),
8124
8430
  /* @__PURE__ */ jsx45(SelectItem, { value: "option3", children: "Option 3" })
8125
8431
  ] })
8126
8432
  ] })
8127
8433
  ] }),
8128
- /* @__PURE__ */ jsxs30("div", { children: [
8434
+ /* @__PURE__ */ jsxs31("div", { children: [
8129
8435
  /* @__PURE__ */ jsx45(Label, { children: "Grouped Select" }),
8130
- /* @__PURE__ */ jsxs30(SelectNamespace, { children: [
8436
+ /* @__PURE__ */ jsxs31(SelectNamespace, { children: [
8131
8437
  /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Select a food..." }) }),
8132
- /* @__PURE__ */ jsxs30(SelectContent, { children: [
8133
- /* @__PURE__ */ jsxs30(SelectGroup, { children: [
8438
+ /* @__PURE__ */ jsxs31(SelectContent, { children: [
8439
+ /* @__PURE__ */ jsxs31(SelectGroup, { children: [
8134
8440
  /* @__PURE__ */ jsx45(SelectLabel, { children: "Fruits" }),
8135
8441
  /* @__PURE__ */ jsx45(SelectItem, { value: "apple", children: "Apple" }),
8136
8442
  /* @__PURE__ */ jsx45(SelectItem, { value: "banana", children: "Banana" })
8137
8443
  ] }),
8138
- /* @__PURE__ */ jsxs30(SelectGroup, { children: [
8444
+ /* @__PURE__ */ jsxs31(SelectGroup, { children: [
8139
8445
  /* @__PURE__ */ jsx45(SelectLabel, { children: "Vegetables" }),
8140
8446
  /* @__PURE__ */ jsx45(SelectItem, { value: "carrot", children: "Carrot" }),
8141
8447
  /* @__PURE__ */ jsx45(SelectItem, { value: "potato", children: "Potato" })
@@ -8143,15 +8449,15 @@ var PlaygroundContent = () => {
8143
8449
  ] })
8144
8450
  ] })
8145
8451
  ] }),
8146
- /* @__PURE__ */ jsxs30("div", { children: [
8452
+ /* @__PURE__ */ jsxs31("div", { children: [
8147
8453
  /* @__PURE__ */ jsx45(Label, { children: "Disabled Select" }),
8148
- /* @__PURE__ */ jsxs30(SelectNamespace, { disabled: true, children: [
8454
+ /* @__PURE__ */ jsxs31(SelectNamespace, { disabled: true, children: [
8149
8455
  /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Disabled..." }) }),
8150
8456
  /* @__PURE__ */ jsx45(SelectContent, { children: /* @__PURE__ */ jsx45(SelectItem, { value: "none", children: "None" }) })
8151
8457
  ] })
8152
8458
  ] })
8153
8459
  ] }) }),
8154
- /* @__PURE__ */ jsx45(Section, { title: "Combobox (Searchable Select)", children: /* @__PURE__ */ jsx45("div", { className: "space-y-4 max-w-md", children: /* @__PURE__ */ jsxs30("div", { children: [
8460
+ /* @__PURE__ */ jsx45(Section, { title: "Combobox (Searchable Select)", children: /* @__PURE__ */ jsx45("div", { className: "space-y-4 max-w-md", children: /* @__PURE__ */ jsxs31("div", { children: [
8155
8461
  /* @__PURE__ */ jsx45(Label, { children: "Framework" }),
8156
8462
  /* @__PURE__ */ jsx45(
8157
8463
  Combobox,
@@ -8165,8 +8471,8 @@ var PlaygroundContent = () => {
8165
8471
  }
8166
8472
  )
8167
8473
  ] }) }) }),
8168
- /* @__PURE__ */ jsx45(Section, { title: "Checkbox & Switch", children: /* @__PURE__ */ jsxs30("div", { className: "space-y-4", children: [
8169
- /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
8474
+ /* @__PURE__ */ jsx45(Section, { title: "Checkbox & Switch", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
8475
+ /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
8170
8476
  /* @__PURE__ */ jsx45(
8171
8477
  Checkbox,
8172
8478
  {
@@ -8177,12 +8483,12 @@ var PlaygroundContent = () => {
8177
8483
  ),
8178
8484
  /* @__PURE__ */ jsx45(Label, { htmlFor: "checkbox", children: "Accept terms and conditions" })
8179
8485
  ] }),
8180
- /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
8486
+ /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
8181
8487
  /* @__PURE__ */ jsx45(Checkbox, { id: "checkbox-disabled", disabled: true }),
8182
8488
  /* @__PURE__ */ jsx45(Label, { htmlFor: "checkbox-disabled", children: "Disabled checkbox" })
8183
8489
  ] }),
8184
8490
  /* @__PURE__ */ jsx45(Separator, {}),
8185
- /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
8491
+ /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
8186
8492
  /* @__PURE__ */ jsx45(
8187
8493
  Switch,
8188
8494
  {
@@ -8193,75 +8499,75 @@ var PlaygroundContent = () => {
8193
8499
  ),
8194
8500
  /* @__PURE__ */ jsx45(Label, { htmlFor: "switch", children: "Enable notifications" })
8195
8501
  ] }),
8196
- /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
8502
+ /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
8197
8503
  /* @__PURE__ */ jsx45(Switch, { id: "switch-disabled", disabled: true }),
8198
8504
  /* @__PURE__ */ jsx45(Label, { htmlFor: "switch-disabled", children: "Disabled switch" })
8199
8505
  ] })
8200
8506
  ] }) }),
8201
- /* @__PURE__ */ jsx45(Section, { title: "Badge", children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-wrap gap-4", children: [
8507
+ /* @__PURE__ */ jsx45(Section, { title: "Badge", children: /* @__PURE__ */ jsxs31("div", { className: "flex flex-wrap gap-4", children: [
8202
8508
  /* @__PURE__ */ jsx45(Badge, { children: "Default" }),
8203
8509
  /* @__PURE__ */ jsx45(Badge, { variant: "secondary", children: "Secondary" }),
8204
8510
  /* @__PURE__ */ jsx45(Badge, { variant: "destructive", children: "Destructive" }),
8205
8511
  /* @__PURE__ */ jsx45(Badge, { variant: "outline", children: "Outline" })
8206
8512
  ] }) }),
8207
- /* @__PURE__ */ jsx45(Section, { title: "Card", children: /* @__PURE__ */ jsxs30("div", { className: "grid gap-4 md:grid-cols-2", children: [
8208
- /* @__PURE__ */ jsxs30(Card, { children: [
8209
- /* @__PURE__ */ jsxs30(CardHeader, { children: [
8513
+ /* @__PURE__ */ jsx45(Section, { title: "Card", children: /* @__PURE__ */ jsxs31("div", { className: "grid gap-4 md:grid-cols-2", children: [
8514
+ /* @__PURE__ */ jsxs31(Card, { children: [
8515
+ /* @__PURE__ */ jsxs31(CardHeader, { children: [
8210
8516
  /* @__PURE__ */ jsx45(CardTitle, { children: "Card Title" }),
8211
8517
  /* @__PURE__ */ jsx45(CardDescription, { children: "Card description goes here" })
8212
8518
  ] }),
8213
8519
  /* @__PURE__ */ jsx45(CardContent, { children: /* @__PURE__ */ jsx45("p", { className: "text-foreground", children: "This is the card content area." }) }),
8214
- /* @__PURE__ */ jsxs30(CardFooter, { children: [
8520
+ /* @__PURE__ */ jsxs31(CardFooter, { children: [
8215
8521
  /* @__PURE__ */ jsx45(Button, { variant: "outline", className: "mr-2", children: "Cancel" }),
8216
8522
  /* @__PURE__ */ jsx45(Button, { children: "Submit" })
8217
8523
  ] })
8218
8524
  ] }),
8219
- /* @__PURE__ */ jsxs30(Card, { children: [
8220
- /* @__PURE__ */ jsxs30(CardHeader, { children: [
8525
+ /* @__PURE__ */ jsxs31(Card, { children: [
8526
+ /* @__PURE__ */ jsxs31(CardHeader, { children: [
8221
8527
  /* @__PURE__ */ jsx45(CardTitle, { children: "Another Card" }),
8222
8528
  /* @__PURE__ */ jsx45(CardDescription, { children: "With different content" })
8223
8529
  ] }),
8224
- /* @__PURE__ */ jsx45(CardContent, { children: /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
8530
+ /* @__PURE__ */ jsx45(CardContent, { children: /* @__PURE__ */ jsxs31("div", { className: "space-y-2", children: [
8225
8531
  /* @__PURE__ */ jsx45(Label, { htmlFor: "card-input", children: "Name" }),
8226
8532
  /* @__PURE__ */ jsx45(Input, { id: "card-input", placeholder: "Enter name..." })
8227
8533
  ] }) }),
8228
8534
  /* @__PURE__ */ jsx45(CardFooter, { children: /* @__PURE__ */ jsx45(Button, { className: "w-full", children: "Save" }) })
8229
8535
  ] })
8230
8536
  ] }) }),
8231
- /* @__PURE__ */ jsxs30(Section, { title: "Dialog", children: [
8537
+ /* @__PURE__ */ jsxs31(Section, { title: "Dialog", children: [
8232
8538
  /* @__PURE__ */ jsx45(Button, { onClick: () => setDialogOpen(true), children: "Open Dialog" }),
8233
- /* @__PURE__ */ jsx45(DialogNamespace, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs30(DialogContent, { children: [
8234
- /* @__PURE__ */ jsxs30(DialogHeader, { children: [
8539
+ /* @__PURE__ */ jsx45(DialogNamespace, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs31(DialogContent, { children: [
8540
+ /* @__PURE__ */ jsxs31(DialogHeader, { children: [
8235
8541
  /* @__PURE__ */ jsx45(DialogTitle, { children: "Create New Zone" }),
8236
8542
  /* @__PURE__ */ jsx45(DialogDescription, { children: "Fill in the details below to create a new zone." })
8237
8543
  ] }),
8238
- /* @__PURE__ */ jsxs30("div", { className: "space-y-4 py-4", children: [
8239
- /* @__PURE__ */ jsxs30("div", { className: "grid grid-cols-2 gap-4", children: [
8240
- /* @__PURE__ */ jsxs30("div", { children: [
8544
+ /* @__PURE__ */ jsxs31("div", { className: "space-y-4 py-4", children: [
8545
+ /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-2 gap-4", children: [
8546
+ /* @__PURE__ */ jsxs31("div", { children: [
8241
8547
  /* @__PURE__ */ jsx45(Label, { htmlFor: "zone-name", children: "Zone Name *" }),
8242
8548
  /* @__PURE__ */ jsx45(Input, { id: "zone-name", placeholder: "eg:hyderabad" })
8243
8549
  ] }),
8244
- /* @__PURE__ */ jsxs30("div", { children: [
8550
+ /* @__PURE__ */ jsxs31("div", { children: [
8245
8551
  /* @__PURE__ */ jsx45(Label, { htmlFor: "zone-code", children: "Zone Code *" }),
8246
8552
  /* @__PURE__ */ jsx45(Input, { id: "zone-code", placeholder: "eg :hyd022" })
8247
8553
  ] })
8248
8554
  ] }),
8249
- /* @__PURE__ */ jsxs30("div", { className: "grid grid-cols-2 gap-4", children: [
8250
- /* @__PURE__ */ jsxs30("div", { children: [
8555
+ /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-2 gap-4", children: [
8556
+ /* @__PURE__ */ jsxs31("div", { children: [
8251
8557
  /* @__PURE__ */ jsx45(Label, { children: "State *" }),
8252
- /* @__PURE__ */ jsxs30(SelectNamespace, { children: [
8558
+ /* @__PURE__ */ jsxs31(SelectNamespace, { children: [
8253
8559
  /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Select state" }) }),
8254
- /* @__PURE__ */ jsxs30(SelectContent, { children: [
8560
+ /* @__PURE__ */ jsxs31(SelectContent, { children: [
8255
8561
  /* @__PURE__ */ jsx45(SelectItem, { value: "telangana", children: "TELANGANA" }),
8256
8562
  /* @__PURE__ */ jsx45(SelectItem, { value: "andhra", children: "ANDHRA PRADESH" })
8257
8563
  ] })
8258
8564
  ] })
8259
8565
  ] }),
8260
- /* @__PURE__ */ jsxs30("div", { children: [
8566
+ /* @__PURE__ */ jsxs31("div", { children: [
8261
8567
  /* @__PURE__ */ jsx45(Label, { children: "District *" }),
8262
- /* @__PURE__ */ jsxs30(SelectNamespace, { children: [
8568
+ /* @__PURE__ */ jsxs31(SelectNamespace, { children: [
8263
8569
  /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Select District" }) }),
8264
- /* @__PURE__ */ jsxs30(SelectContent, { children: [
8570
+ /* @__PURE__ */ jsxs31(SelectContent, { children: [
8265
8571
  /* @__PURE__ */ jsx45(SelectItem, { value: "hyderabad", children: "HYDERABAD" }),
8266
8572
  /* @__PURE__ */ jsx45(SelectItem, { value: "rangareddy", children: "RANGAREDDY" })
8267
8573
  ] })
@@ -8269,34 +8575,34 @@ var PlaygroundContent = () => {
8269
8575
  ] })
8270
8576
  ] })
8271
8577
  ] }),
8272
- /* @__PURE__ */ jsxs30(DialogFooter, { children: [
8578
+ /* @__PURE__ */ jsxs31(DialogFooter, { children: [
8273
8579
  /* @__PURE__ */ jsx45(Button, { variant: "outline", onClick: () => setDialogOpen(false), children: "CANCEL" }),
8274
8580
  /* @__PURE__ */ jsx45(Button, { onClick: () => setDialogOpen(false), children: "Create" })
8275
8581
  ] })
8276
8582
  ] }) })
8277
8583
  ] }),
8278
- /* @__PURE__ */ jsx45(Section, { title: "Table", children: /* @__PURE__ */ jsxs30(TableNamespace, { children: [
8584
+ /* @__PURE__ */ jsx45(Section, { title: "Table", children: /* @__PURE__ */ jsxs31(TableNamespace, { children: [
8279
8585
  /* @__PURE__ */ jsx45(TableCaption, { children: "A list of recent invoices" }),
8280
- /* @__PURE__ */ jsx45(TableHeader, { children: /* @__PURE__ */ jsxs30(TableRow, { children: [
8586
+ /* @__PURE__ */ jsx45(TableHeader, { children: /* @__PURE__ */ jsxs31(TableRow, { children: [
8281
8587
  /* @__PURE__ */ jsx45(TableHead, { children: "Invoice" }),
8282
8588
  /* @__PURE__ */ jsx45(TableHead, { children: "Status" }),
8283
8589
  /* @__PURE__ */ jsx45(TableHead, { children: "Method" }),
8284
8590
  /* @__PURE__ */ jsx45(TableHead, { className: "text-right", children: "Amount" })
8285
8591
  ] }) }),
8286
- /* @__PURE__ */ jsxs30(TableBody, { children: [
8287
- /* @__PURE__ */ jsxs30(TableRow, { children: [
8592
+ /* @__PURE__ */ jsxs31(TableBody, { children: [
8593
+ /* @__PURE__ */ jsxs31(TableRow, { children: [
8288
8594
  /* @__PURE__ */ jsx45(TableCell, { children: "INV001" }),
8289
8595
  /* @__PURE__ */ jsx45(TableCell, { children: /* @__PURE__ */ jsx45(Badge, { children: "Paid" }) }),
8290
8596
  /* @__PURE__ */ jsx45(TableCell, { children: "Credit Card" }),
8291
8597
  /* @__PURE__ */ jsx45(TableCell, { className: "text-right", children: "$250.00" })
8292
8598
  ] }),
8293
- /* @__PURE__ */ jsxs30(TableRow, { children: [
8599
+ /* @__PURE__ */ jsxs31(TableRow, { children: [
8294
8600
  /* @__PURE__ */ jsx45(TableCell, { children: "INV002" }),
8295
8601
  /* @__PURE__ */ jsx45(TableCell, { children: /* @__PURE__ */ jsx45(Badge, { variant: "secondary", children: "Pending" }) }),
8296
8602
  /* @__PURE__ */ jsx45(TableCell, { children: "PayPal" }),
8297
8603
  /* @__PURE__ */ jsx45(TableCell, { className: "text-right", children: "$150.00" })
8298
8604
  ] }),
8299
- /* @__PURE__ */ jsxs30(TableRow, { children: [
8605
+ /* @__PURE__ */ jsxs31(TableRow, { children: [
8300
8606
  /* @__PURE__ */ jsx45(TableCell, { children: "INV003" }),
8301
8607
  /* @__PURE__ */ jsx45(TableCell, { children: /* @__PURE__ */ jsx45(Badge, { variant: "destructive", children: "Failed" }) }),
8302
8608
  /* @__PURE__ */ jsx45(TableCell, { children: "Bank Transfer" }),
@@ -8304,7 +8610,7 @@ var PlaygroundContent = () => {
8304
8610
  ] })
8305
8611
  ] })
8306
8612
  ] }) }),
8307
- /* @__PURE__ */ jsx45(Section, { title: "Pagination", children: /* @__PURE__ */ jsx45(PaginationNamespace, { children: /* @__PURE__ */ jsxs30(PaginationContent, { children: [
8613
+ /* @__PURE__ */ jsx45(Section, { title: "Pagination", children: /* @__PURE__ */ jsx45(PaginationNamespace, { children: /* @__PURE__ */ jsxs31(PaginationContent, { children: [
8308
8614
  /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(PaginationPrevious, { onClick: () => console.log("Previous") }) }),
8309
8615
  /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(PaginationLink, { isActive: true, children: "1" }) }),
8310
8616
  /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(PaginationLink, { children: "2" }) }),
@@ -8312,31 +8618,31 @@ var PlaygroundContent = () => {
8312
8618
  /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(PaginationEllipsis, {}) }),
8313
8619
  /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(PaginationNext, { onClick: () => console.log("Next") }) })
8314
8620
  ] }) }) }),
8315
- /* @__PURE__ */ jsx45(Section, { title: "Spinner", children: /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-8", children: [
8316
- /* @__PURE__ */ jsxs30("div", { className: "text-center", children: [
8621
+ /* @__PURE__ */ jsx45(Section, { title: "Spinner", children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-8", children: [
8622
+ /* @__PURE__ */ jsxs31("div", { className: "text-center", children: [
8317
8623
  /* @__PURE__ */ jsx45(Spinner, { size: "sm" }),
8318
8624
  /* @__PURE__ */ jsx45("p", { className: "text-sm text-muted-foreground mt-2", children: "Small" })
8319
8625
  ] }),
8320
- /* @__PURE__ */ jsxs30("div", { className: "text-center", children: [
8626
+ /* @__PURE__ */ jsxs31("div", { className: "text-center", children: [
8321
8627
  /* @__PURE__ */ jsx45(Spinner, { size: "default" }),
8322
8628
  /* @__PURE__ */ jsx45("p", { className: "text-sm text-muted-foreground mt-2", children: "Default" })
8323
8629
  ] }),
8324
- /* @__PURE__ */ jsxs30("div", { className: "text-center", children: [
8630
+ /* @__PURE__ */ jsxs31("div", { className: "text-center", children: [
8325
8631
  /* @__PURE__ */ jsx45(Spinner, { size: "lg" }),
8326
8632
  /* @__PURE__ */ jsx45("p", { className: "text-sm text-muted-foreground mt-2", children: "Large" })
8327
8633
  ] })
8328
8634
  ] }) }),
8329
- /* @__PURE__ */ jsx45(Section, { title: "Separator", children: /* @__PURE__ */ jsxs30("div", { className: "space-y-4", children: [
8635
+ /* @__PURE__ */ jsx45(Section, { title: "Separator", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
8330
8636
  /* @__PURE__ */ jsx45("p", { className: "text-foreground", children: "Content above separator" }),
8331
8637
  /* @__PURE__ */ jsx45(Separator, {}),
8332
8638
  /* @__PURE__ */ jsx45("p", { className: "text-foreground", children: "Content below separator" }),
8333
- /* @__PURE__ */ jsxs30("div", { className: "flex items-center h-10", children: [
8639
+ /* @__PURE__ */ jsxs31("div", { className: "flex items-center h-10", children: [
8334
8640
  /* @__PURE__ */ jsx45("span", { className: "text-foreground", children: "Left" }),
8335
8641
  /* @__PURE__ */ jsx45(Separator, { orientation: "vertical", className: "mx-4" }),
8336
8642
  /* @__PURE__ */ jsx45("span", { className: "text-foreground", children: "Right" })
8337
8643
  ] })
8338
8644
  ] }) }),
8339
- /* @__PURE__ */ jsx45(Section, { title: "Typography & Colors", children: /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
8645
+ /* @__PURE__ */ jsx45(Section, { title: "Typography & Colors", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-2", children: [
8340
8646
  /* @__PURE__ */ jsx45("p", { className: "text-foreground", children: "text-foreground - Primary text color" }),
8341
8647
  /* @__PURE__ */ jsx45("p", { className: "text-muted-foreground", children: "text-muted-foreground - Muted text color" }),
8342
8648
  /* @__PURE__ */ jsx45("p", { className: "text-accent", children: "text-accent - Accent color" }),
@@ -8454,6 +8760,7 @@ export {
8454
8760
  ListDivider,
8455
8761
  ListItem,
8456
8762
  ListItemAvatar,
8763
+ ListItemButton,
8457
8764
  ListItemIcon,
8458
8765
  ListItemText,
8459
8766
  ListSubheader,
@@ -8562,6 +8869,7 @@ export {
8562
8869
  VerticalTabsGroupLabel,
8563
8870
  VerticalTabsList,
8564
8871
  VerticalTabsTrigger,
8872
+ VirtualList,
8565
8873
  cn,
8566
8874
  useFormControl,
8567
8875
  useSidebar,