@adsgency_npm/adsgency-ads-ui 0.1.0-alpha.26 → 0.1.0-alpha.28

package/dist/index.cjs

@@ -224,6 +224,7 @@ var adsDefaultMessages = {
       collapseRow: "Collapse row",
       expandRow: "Expand row",
       filterColumn: "Filter column",
+      loadingRows: "Loading table rows",
       noDataAvailable: "No data available",
       selectAllRows: "Select all rows",
       selectRow: "Select row",
@@ -274,6 +275,7 @@ var adsDefaultMessages = {
       collapseRow: "\u6536\u8D77\u884C",
       expandRow: "\u5C55\u5F00\u884C",
       filterColumn: "\u7B5B\u9009\u5217",
+      loadingRows: "\u6B63\u5728\u52A0\u8F7D\u8868\u683C\u884C",
       noDataAvailable: "\u6682\u65E0\u6570\u636E",
       selectAllRows: "\u9009\u62E9\u5168\u90E8\u884C",
       selectRow: "\u9009\u62E9\u884C",
@@ -832,7 +834,7 @@ var adsTextColorClassName = {
 // src/components/AdsAlertDialog/index.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var overlayClassName = "fixed inset-0 z-50 bg-black/80 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";
-var contentClassName = "fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-[512px] -translate-x-1/2 -translate-y-1/2 gap-lg rounded-radius-lg border border-border bg-card p-xl shadow-[0px_4px_6px_-4px_rgba(0,0,0,0.1),0px_10px_15px_-3px_rgba(0,0,0,0.1)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]";
+var contentClassName = "fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-[512px] -translate-x-1/2 -translate-y-1/2 gap-lg rounded-radius-lg border-0 bg-card p-xl shadow-[0px_4px_6px_-4px_rgba(0,0,0,0.1),0px_10px_15px_-3px_rgba(0,0,0,0.1)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]";
 var actionClassName = "inline-flex h-9 items-center justify-center rounded-radius-md border-0 bg-brand-gradient px-lg py-sm text-sm font-medium leading-5 tracking-normal shadow-[0px_1px_2px_rgba(0,0,0,0.1)] transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card disabled:pointer-events-none disabled:opacity-[0.65]";
 var cancelClassName = "inline-flex h-9 items-center justify-center rounded-radius-md border border-border bg-card px-lg py-sm text-sm font-medium leading-5 tracking-normal shadow-[0px_1px_2px_rgba(0,0,0,0.1)] transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card disabled:pointer-events-none disabled:opacity-[0.65]";
 var AlertDialog = AlertDialogPrimitive.Root;
@@ -2836,6 +2838,7 @@ AdsSkeleton.displayName = "AdsSkeleton";
 
 // src/components/AdsInput/index.tsx
 var React31 = __toESM(require("react"), 1);
+var import_lucide_react10 = require("lucide-react");
 
 // src/lib/adsClearButton.tsx
 var React30 = __toESM(require("react"), 1);
@@ -2856,12 +2859,17 @@ AdsClearButton.displayName = "AdsClearButton";
 
 // src/components/AdsInput/index.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var inputBaseClassName = "flex w-full rounded-md border border-border bg-card px-3 py-2 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[var(--card-foreground)] placeholder:text-[var(--muted-foreground)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm";
+var inputBaseClassName = "flex w-full rounded-md border border-border bg-card px-3 py-2 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[var(--card-foreground)] placeholder:text-[var(--muted-foreground)] focus-visible:outline-none disabled:cursor-not-allowed disabled:border-border disabled:bg-muted disabled:text-[var(--muted-foreground)] disabled:placeholder:text-[var(--muted-foreground)] disabled:opacity-100 disabled:focus-visible:border-border disabled:focus-visible:ring-0 md:text-sm";
 var inputSizeClasses = {
   sm: "h-8 text-sm leading-5",
   md: "h-9 text-base leading-6",
   lg: "h-10 text-base leading-6"
 };
+var fileTriggerSizeClasses = {
+  sm: "h-8 px-md py-sm",
+  md: "h-9 px-lg py-sm",
+  lg: "h-10 px-xl py-[10px]"
+};
 function assignInputRef(ref, value) {
   if (typeof ref === "function") {
     ref(value);
@@ -2880,6 +2888,17 @@ function getTextInputValue(value) {
   }
   return "";
 }
+function renderFileTriggerIcon(icon) {
+  if (!icon) {
+    return null;
+  }
+  if (React31.isValidElement(icon)) {
+    return React31.cloneElement(icon, {
+      className: cn("!h-4 !w-4 h-4 w-4", icon.props.className)
+    });
+  }
+  return icon;
+}
 function getInputSurfaceClassName({
   className,
   errorText,
@@ -2906,6 +2925,7 @@ var AdsInput = React31.forwardRef(
     descriptionPlacement = "below",
     emptyFileLabel,
     errorText,
+    fileTriggerIcon = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react10.Upload, { "aria-hidden": true, className: "h-4 w-4" }),
     fileTriggerLabel,
     helperText,
     id,
@@ -2946,6 +2966,7 @@ var AdsInput = React31.forwardRef(
     });
     const resolvedClearButtonLabel = clearButtonLabel ?? messages.input.clear;
     const resolvedFileTriggerLabel = fileTriggerLabel ?? messages.input.chooseFile;
+    const resolvedFileTriggerIcon = renderFileTriggerIcon(fileTriggerIcon);
     const resolvedEmptyFileLabel = emptyFileLabel ?? messages.input.noFileChosen;
     const handleChange = React31.useCallback(
       (event) => {
@@ -2976,7 +2997,7 @@ var AdsInput = React31.forwardRef(
     const fileNameText = selectedFiles.length > 0 ? selectedFiles.join(", ") : resolvedEmptyFileLabel;
     const helperNode = helperText ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AdsFieldDescription, { id: description.helperId, children: helperText }) : null;
     const errorNode = errorText ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AdsFieldError, { id: description.errorId, children: errorText }) : null;
-    const inputNode = isFileInput ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative flex w-full min-w-0 flex-1 items-center", children: [
+    const inputNode = isFileInput ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "group relative flex w-full min-w-0 flex-1 items-center focus-within:[&_[data-ads-file-trigger]]:ring-2 focus-within:[&_[data-ads-file-trigger]]:ring-ring focus-within:[&_[data-ads-file-trigger]]:ring-offset-2 focus-within:[&_[data-ads-file-trigger]]:ring-offset-background", children: [
       /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         Input,
         {
@@ -3002,20 +3023,23 @@ var AdsInput = React31.forwardRef(
         {
           "aria-hidden": "true",
           className: cn(
-            inputSurfaceClassName,
-            adsTextColorClassName.card,
-            "items-center text-sm leading-5",
+            "flex w-full min-w-0 items-center gap-sm text-sm leading-5",
             props.disabled ? "cursor-not-allowed opacity-50" : void 0
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
               "span",
               {
+                "data-ads-file-trigger": "",
                 className: cn(
-                  "shrink-0 pr-sm text-sm font-medium leading-5",
-                  adsTextColorClassName.card
+                  "inline-flex shrink-0 items-center justify-center gap-sm rounded-radius-md border-0 bg-primary text-sm font-medium leading-5 shadow-[0px_1px_2px_rgba(0,0,0,0.1)] transition-colors group-hover:bg-brand-primary-hover",
+                  fileTriggerSizeClasses[size],
+                  adsTextColorClassName.primary
                 ),
-                children: resolvedFileTriggerLabel
+                children: [
+                  resolvedFileTriggerIcon ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "inline-flex h-4 w-4 items-center justify-center [&>svg]:!h-4 [&>svg]:!w-4", children: resolvedFileTriggerIcon }) : null,
+                  resolvedFileTriggerLabel
+                ]
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -3306,7 +3330,7 @@ var React35 = __toESM(require("react"), 1);
 // src/primitives/input-otp.tsx
 var React34 = __toESM(require("react"), 1);
 var import_input_otp = require("input-otp");
-var import_lucide_react10 = require("lucide-react");
+var import_lucide_react11 = require("lucide-react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var InputOTP = React34.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
   import_input_otp.OTPInput,
@@ -3344,7 +3368,7 @@ var InputOTPSlot = React34.forwardRef(({ index, className, ...props }, ref) => {
   );
 });
 InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React34.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react10.Dot, {}) }));
+var InputOTPSeparator = React34.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react11.Dot, {}) }));
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 // src/components/AdsInputOTP/index.tsx
@@ -3472,11 +3496,11 @@ var React39 = __toESM(require("react"), 1);
 
 // src/components/AdsPagination/index.tsx
 var React37 = __toESM(require("react"), 1);
-var import_lucide_react12 = require("lucide-react");
+var import_lucide_react13 = require("lucide-react");
 
 // src/primitives/pagination.tsx
 var React36 = __toESM(require("react"), 1);
-var import_lucide_react11 = require("lucide-react");
+var import_lucide_react12 = require("lucide-react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var Pagination = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
   "nav",
@@ -3530,7 +3554,7 @@ var PaginationPrevious = ({
     className: cn("gap-1 pl-2.5", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react11.ChevronLeft, { className: "h-4 w-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react12.ChevronLeft, { className: "h-4 w-4" }),
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "Previous" })
     ]
   }
@@ -3548,7 +3572,7 @@ var PaginationNext = ({
     ...props,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "Next" }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react11.ChevronRight, { className: "h-4 w-4" })
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react12.ChevronRight, { className: "h-4 w-4" })
     ]
   }
 );
@@ -3563,7 +3587,7 @@ var PaginationEllipsis = ({
     className: cn("flex h-9 w-9 items-center justify-center", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react11.MoreHorizontal, { className: "h-4 w-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react12.MoreHorizontal, { className: "h-4 w-4" }),
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "sr-only", children: "More pages" })
     ]
   }
@@ -3618,7 +3642,7 @@ var AdsPaginationPrevious = React37.forwardRef(({ "aria-label": ariaLabel, child
       ref,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react12.ChevronLeft, { "aria-hidden": true, className: "h-4 w-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react13.ChevronLeft, { "aria-hidden": true, className: "h-4 w-4" }),
         /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: label })
       ]
     }
@@ -3638,7 +3662,7 @@ var AdsPaginationNext = React37.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react12.ChevronRight, { "aria-hidden": true, className: "h-4 w-4" })
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react13.ChevronRight, { "aria-hidden": true, className: "h-4 w-4" })
         ]
       }
     );
@@ -3662,7 +3686,7 @@ function AdsPaginationEllipsis({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react12.MoreHorizontal, { className: "h-4 w-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react13.MoreHorizontal, { className: "h-4 w-4" }),
         /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "sr-only", children: resolvedLabel })
       ]
     }
@@ -4194,7 +4218,7 @@ function AdsDataPagination({
 
 // src/components/AdsDataTable/index.tsx
 var React44 = __toESM(require("react"), 1);
-var import_lucide_react15 = require("lucide-react");
+var import_lucide_react16 = require("lucide-react");
 
 // src/components/AdsEmpty/index.tsx
 var import_class_variance_authority9 = require("class-variance-authority");
@@ -4301,7 +4325,7 @@ function AdsEmptyFooter({ className, ...props }) {
 
 // src/components/AdsTable/index.tsx
 var React43 = __toESM(require("react"), 1);
-var import_lucide_react14 = require("lucide-react");
+var import_lucide_react15 = require("lucide-react");
 
 // src/components/AdsRadioGroup/index.tsx
 var React41 = __toESM(require("react"), 1);
@@ -4309,7 +4333,7 @@ var React41 = __toESM(require("react"), 1);
 // src/primitives/radio-group.tsx
 var React40 = __toESM(require("react"), 1);
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"), 1);
-var import_lucide_react13 = require("lucide-react");
+var import_lucide_react14 = require("lucide-react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var RadioGroup = React40.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
@@ -4332,7 +4356,7 @@ var RadioGroupItem = React40.forwardRef(({ className, ...props }, ref) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react13.Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react14.Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
     }
   );
 });
@@ -4736,7 +4760,7 @@ var AdsTableSortHeader = React43.forwardRef(
         variant: "ghost",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "truncate", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "inline-flex h-4 w-4 items-center justify-center text-icon-muted", children: sortOrder === "ascend" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react14.ChevronDown, { className: "h-4 w-4 rotate-180" }) : sortOrder === "descend" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react14.ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react14.ChevronDown, { className: "h-4 w-4 opacity-60" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "inline-flex h-4 w-4 items-center justify-center text-icon-muted", children: sortOrder === "ascend" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react15.ChevronDown, { className: "h-4 w-4 rotate-180" }) : sortOrder === "descend" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react15.ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react15.ChevronDown, { className: "h-4 w-4 opacity-60" }) })
         ]
       }
     ) });
@@ -4800,7 +4824,7 @@ var AdsTableExpandCell = React43.forwardRef(
         size: "sm",
         type: "button",
         variant: "ghost",
-        children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react14.ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react14.ChevronRight, { className: "h-4 w-4" })
+        children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react15.ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react15.ChevronRight, { className: "h-4 w-4" })
       }
     ) }) });
   }
@@ -4813,18 +4837,33 @@ var SKELETON_ROW_COUNT = 4;
 var FLEX_WIDTH_UNIT = 160;
 var sizeClassNames = {
   small: {
+    bodyHeight: 32,
     cell: "py-1.5 text-xs leading-4",
+    headHeight: 32,
     head: "h-8 py-1.5 text-xs leading-4"
   },
   middle: {
+    bodyHeight: 40,
     cell: "py-2 text-sm leading-5",
+    headHeight: 40,
     head: "h-10 py-2 text-sm leading-5"
   },
   large: {
+    bodyHeight: 48,
     cell: "py-3 text-base leading-6",
+    headHeight: 48,
     head: "h-12 py-3 text-base leading-6"
   }
 };
+function getSpinnerLoadingHeight(scrollY, density) {
+  if (typeof scrollY === "number") {
+    return Math.max(scrollY - density.headHeight, density.bodyHeight * SKELETON_ROW_COUNT);
+  }
+  if (typeof scrollY === "string") {
+    return `max(calc(${scrollY} - ${density.headHeight}px), ${density.bodyHeight * SKELETON_ROW_COUNT}px)`;
+  }
+  return density.bodyHeight * SKELETON_ROW_COUNT;
+}
 function getColumnKey(column, index) {
   if (column.key !== void 0) {
     return String(column.key);
@@ -5035,6 +5074,8 @@ function AdsDataTable({
   dataSource = [],
   rowKey,
   loading = false,
+  loadingVariant = "skeleton",
+  expandedRowSurface = "inset",
   emptyText,
   emptyState,
   rowClassName,
@@ -5133,8 +5174,14 @@ function AdsDataTable({
   const hasSelectionColumn = Boolean(rowSelection);
   const hasExpandableColumn = Boolean(expandable?.expandedRowRender);
   const density = sizeClassNames[size];
+  const columnCount = resolvedColumns.length + Number(hasSelectionColumn) + Number(hasExpandableColumn);
   const paginationMode = pagination === false ? "client" : pagination.mode ?? "client";
   const allowsRowSelectionByClick = Boolean(rowSelection) && !suppressRowClickSelection;
+  const spinnerLoadingHeight = React44.useMemo(
+    () => getSpinnerLoadingHeight(scroll?.y, density),
+    [density, scroll?.y]
+  );
+  const expandedRowContentClassName = expandedRowSurface === "plain" ? "bg-transparent p-4" : expandedRowSurface === "subtle" ? "mx-6 my-4 rounded-[20px] border border-border bg-transparent p-4" : "border-t border-border bg-popover/40 p-4";
   const filterValues = React44.useMemo(
     () => resolvedColumns.reduce((accumulator, column, index) => {
       const columnKey = getColumnKey(column, index);
@@ -5393,7 +5440,7 @@ function AdsDataTable({
               variant: "ghost",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "truncate", children: headerTitle }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "inline-flex h-4 w-4 items-center justify-center text-icon-muted", children: columnSortOrder === "ascend" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react15.ChevronDown, { className: "h-4 w-4 rotate-180" }) : columnSortOrder === "descend" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react15.ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react15.ChevronDown, { className: "h-4 w-4 opacity-60" }) })
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "inline-flex h-4 w-4 items-center justify-center text-icon-muted", children: columnSortOrder === "ascend" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react16.ChevronDown, { className: "h-4 w-4 rotate-180" }) : columnSortOrder === "descend" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react16.ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react16.ChevronDown, { className: "h-4 w-4 opacity-60" }) })
               ]
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "truncate", children: headerTitle }),
@@ -5410,7 +5457,7 @@ function AdsDataTable({
                 size: "sm",
                 type: "button",
                 variant: "ghost",
-                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react15.Filter, { className: "h-3.5 w-3.5" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react16.Filter, { className: "h-3.5 w-3.5" })
               }
             ) }),
             /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AdsPopoverContent, { align: "end", className: "w-64", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -5490,7 +5537,26 @@ function AdsDataTable({
           );
         })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AdsTableBody, { children: loading ? Array.from({ length: SKELETON_ROW_COUNT }, (_, skeletonIndex) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(AdsTableRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AdsTableBody, { children: loading && loadingVariant === "spinner" ? [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AdsTableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          AdsTableCell,
+          {
+            className: "p-0",
+            colSpan: columnCount,
+            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              "div",
+              {
+                "aria-label": messages.table.loadingRows,
+                "aria-live": "polite",
+                className: "flex items-center justify-center px-6 py-8 text-foreground",
+                role: "status",
+                style: { minHeight: spinnerLoadingHeight },
+                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AdsSpinner, { size: "lg", tone: "foreground" })
+              }
+            )
+          }
+        ) }, "spinner-row")
+      ] : loading ? Array.from({ length: SKELETON_ROW_COUNT }, (_, skeletonIndex) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(AdsTableRow, { children: [
         hasSelectionColumn ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AdsTableCell, { className: "w-12 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AdsSkeleton, { className: "h-4 w-4 rounded-[4px]" }) }) : null,
         hasExpandableColumn ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AdsTableCell, { className: "w-12 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AdsSkeleton, { className: "h-4 w-4 rounded-[4px]" }) }) : null,
         resolvedColumns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -5593,7 +5659,7 @@ function AdsDataTable({
                 "div",
                 {
                   className: cn(
-                    "border-t border-border bg-popover/40 p-4",
+                    expandedRowContentClassName,
                     classNames?.expandedRowContent
                   ),
                   children: expandable?.expandedRowRender?.(record, index)
@@ -5606,7 +5672,7 @@ function AdsDataTable({
         /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AdsTableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           AdsTableCell,
           {
-            colSpan: resolvedColumns.length + Number(hasSelectionColumn) + Number(hasExpandableColumn),
+            colSpan: columnCount,
             className: cn("p-0", classNames?.emptyRowCell),
             children: renderedEmptyState
           }
@@ -5967,14 +6033,21 @@ function AdsRadialProgressChart({
             children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
               import_recharts2.RadialBarChart,
               {
-                accessibilityLayer: true,
+                accessibilityLayer: false,
                 data: chartData,
                 endAngle: -270,
                 innerRadius: safeSize / 2 - safeStrokeWidth,
                 outerRadius: safeSize / 2,
                 startAngle: 90,
                 children: [
-                  showTooltip && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_recharts2.Tooltip, { contentStyle: tooltipContentStyle, cursor: false }),
+                  showTooltip && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                    import_recharts2.Tooltip,
+                    {
+                      contentStyle: tooltipContentStyle,
+                      cursor: false,
+                      wrapperStyle: { zIndex: 1 }
+                    }
+                  ),
                   /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                     import_recharts2.PolarAngleAxis,
                     {
@@ -6054,22 +6127,30 @@ function AdsSparklineChart({
           className: "h-full",
           config: { value: { color } },
           height: "100%",
-          children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_recharts3.LineChart, { data: chartData, margin: { bottom: 1, left: 1, right: 1, top: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_recharts3.XAxis, { dataKey: xKey, hide: true, type: "category" }),
-            showTooltip && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_recharts3.Tooltip, { contentStyle: tooltipContentStyle2, cursor: false }),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-              import_recharts3.Line,
-              {
-                activeDot: false,
-                dataKey,
-                dot: false,
-                isAnimationActive: false,
-                stroke: "var(--color-value)",
-                strokeWidth: 2,
-                type: "monotone"
-              }
-            )
-          ] })
+          children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+            import_recharts3.LineChart,
+            {
+              accessibilityLayer: false,
+              data: chartData,
+              margin: { bottom: 1, left: 1, right: 1, top: 1 },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_recharts3.XAxis, { dataKey: xKey, hide: true, type: "category" }),
+                showTooltip && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_recharts3.Tooltip, { contentStyle: tooltipContentStyle2, cursor: false }),
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                  import_recharts3.Line,
+                  {
+                    activeDot: false,
+                    dataKey,
+                    dot: false,
+                    isAnimationActive: false,
+                    stroke: "var(--color-value)",
+                    strokeWidth: 2,
+                    type: "monotone"
+                  }
+                )
+              ]
+            }
+          )
         }
       )
     }
@@ -6239,6 +6320,7 @@ function AdsBarChart({
   height,
   highlightColor,
   highlightIndex,
+  hoverColor,
   showTooltip = true,
   xAxis,
   xKey,
@@ -6267,51 +6349,60 @@ function AdsBarChart({
           className: "h-full",
           config: { value: { color } },
           height: "100%",
-          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_recharts4.BarChart, { data: chartData, margin: { bottom: 0, left: 0, right: 0, top: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-              import_recharts4.XAxis,
-              {
-                axisLine: xAxis?.axisLine ?? false,
-                dataKey: xKey,
-                hide: xAxis?.hide ?? true,
-                tick: xAxis?.tick === false ? false : { fill: xAxis?.tickColor, fontSize: xAxis?.tickFontSize },
-                tickLine: xAxis?.tickLine ?? false,
-                tickMargin: xAxis?.tickMargin,
-                type: "category"
-              }
-            ),
-            yAxis && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-              import_recharts4.YAxis,
-              {
-                axisLine: yAxis.axisLine ?? false,
-                domain: yAxis.domain,
-                tick: yAxis.tick === false ? false : { fill: yAxis.tickColor, fontSize: yAxis.tickFontSize },
-                tickCount: yAxis.tickCount,
-                tickLine: yAxis.tickLine ?? false,
-                tickMargin: yAxis.tickMargin,
-                ticks: yAxis.ticks,
-                width: yAxis.width
-              }
-            ),
-            showTooltip && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts4.Tooltip, { contentStyle: tooltipContentStyle3, cursor: { fill: "transparent" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-              import_recharts4.Bar,
-              {
-                barSize,
-                dataKey,
-                fill: "var(--color-value)",
-                isAnimationActive: false,
-                radius: safeRadius,
-                children: chartData.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                  import_recharts4.Cell,
+          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+            import_recharts4.BarChart,
+            {
+              accessibilityLayer: false,
+              data: chartData,
+              margin: { bottom: 0, left: 0, right: 0, top: 0 },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                  import_recharts4.XAxis,
                   {
-                    fill: index === safeHighlightIndex ? highlightColor ?? DEFAULT_HIGHLIGHT_COLOR : "var(--color-value)"
-                  },
-                  index
-                ))
-              }
-            )
-          ] })
+                    axisLine: xAxis?.axisLine ?? false,
+                    dataKey: xKey,
+                    hide: xAxis?.hide ?? true,
+                    tick: xAxis?.tick ?? true,
+                    tickLine: xAxis?.tickLine ?? false,
+                    tickMargin: xAxis?.tickMargin,
+                    type: "category"
+                  }
+                ),
+                yAxis && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                  import_recharts4.YAxis,
+                  {
+                    axisLine: yAxis.axisLine ?? false,
+                    domain: yAxis.domain,
+                    tick: yAxis.tick ?? true,
+                    tickCount: yAxis.tickCount,
+                    tickLine: yAxis.tickLine ?? false,
+                    tickMargin: yAxis.tickMargin,
+                    ticks: yAxis.ticks,
+                    width: yAxis.width
+                  }
+                ),
+                showTooltip && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts4.Tooltip, { contentStyle: tooltipContentStyle3, cursor: { fill: "transparent" } }),
+                /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                  import_recharts4.Bar,
+                  {
+                    activeBar: hoverColor ? { fill: hoverColor } : void 0,
+                    barSize,
+                    dataKey,
+                    fill: "var(--color-value)",
+                    isAnimationActive: false,
+                    radius: safeRadius,
+                    children: chartData.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                      import_recharts4.Cell,
+                      {
+                        fill: index === safeHighlightIndex ? highlightColor ?? DEFAULT_HIGHLIGHT_COLOR : "var(--color-value)"
+                      },
+                      index
+                    ))
+                  }
+                )
+              ]
+            }
+          )
         }
       )
     }
@@ -6682,7 +6773,7 @@ AdsToggleGroupItem.displayName = "AdsToggleGroupItem";
 // src/components/AdsTextarea/index.tsx
 var React61 = __toESM(require("react"), 1);
 var import_jsx_runtime70 = require("react/jsx-runtime");
-var textareaBaseClassName = "w-full rounded-radius-md border border-border bg-card px-md py-md text-base leading-6 shadow-[0px_1px_2px_rgba(0,0,0,0.1)] placeholder:text-[var(--muted-foreground)] focus-visible:border-border-focus focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[rgba(161,161,161,0.5)] focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50";
+var textareaBaseClassName = "w-full rounded-radius-md border border-border bg-card px-md py-md text-base leading-6 shadow-[0px_1px_2px_rgba(0,0,0,0.1)] placeholder:text-[var(--muted-foreground)] focus-visible:border-border-focus focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[rgba(161,161,161,0.5)] focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:border-border disabled:bg-muted disabled:text-[var(--muted-foreground)] disabled:placeholder:text-[var(--muted-foreground)] disabled:opacity-100 disabled:focus-visible:border-border disabled:focus-visible:ring-0";
 var AdsTextarea = React61.forwardRef(
   ({
     action,
@@ -6735,15 +6826,15 @@ AdsTextarea.displayName = "AdsTextarea";
 
 // src/components/AdsToast/index.tsx
 var React62 = __toESM(require("react"), 1);
-var import_lucide_react16 = require("lucide-react");
+var import_lucide_react17 = require("lucide-react");
 var import_sonner = require("sonner");
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var adsToastIconMap = {
-  success: import_lucide_react16.CircleCheck,
-  info: import_lucide_react16.Info,
-  warning: import_lucide_react16.TriangleAlert,
-  error: import_lucide_react16.OctagonX,
-  loading: import_lucide_react16.LoaderCircle
+  success: import_lucide_react17.CircleCheck,
+  info: import_lucide_react17.Info,
+  warning: import_lucide_react17.TriangleAlert,
+  error: import_lucide_react17.OctagonX,
+  loading: import_lucide_react17.LoaderCircle
 };
 function resolveToastIcon(intent, icon) {
   if (icon) {
@@ -6928,7 +7019,7 @@ var AdsToastManager = Object.assign(
 // src/components/AdsDialog/index.tsx
 var React63 = __toESM(require("react"), 1);
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
-var import_lucide_react17 = require("lucide-react");
+var import_lucide_react18 = require("lucide-react");
 var import_jsx_runtime72 = require("react/jsx-runtime");
 var overlayClassName2 = "fixed inset-0 z-50 bg-black/80 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";
 var contentClassName2 = "fixed left-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-[423px] -translate-x-1/2 -translate-y-1/2 flex-col gap-lg overflow-hidden rounded-radius-md border border-border bg-card p-xl shadow-[0px_4px_6px_-4px_rgba(0,0,0,0.1),0px_10px_15px_-3px_rgba(0,0,0,0.1)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]";
@@ -7069,7 +7160,7 @@ var DialogContent = React63.forwardRef(
                 "aria-label": resolvedCloseLabel,
                 className: cn(closeButtonClassName, adsTextColorClassName.card),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react17.X, { "aria-hidden": true, className: "h-4 w-4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react18.X, { "aria-hidden": true, className: "h-4 w-4" }),
                   /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "sr-only", children: resolvedCloseLabel })
                 ]
               }