@adsgency_npm/adsgency-ads-ui 0.1.0-alpha.11 → 0.1.0-alpha.13

package/dist/chunk-YJFQM6IB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/designTokens.ts"],"sourcesContent":["export const designTokens = {\n  background: \"#151619\",\n  foreground: \"#fdfdfd\",\n  card: \"#1b1c21\",\n  cardForeground: \"#fdfdfd\",\n  popover: \"#2a2b2f\",\n  popoverForeground: \"#fdfdfd\",\n  primary: \"#844fff\",\n  primaryForeground: \"#fdfdfd\",\n  secondary: \"#3f4043\",\n  secondaryForeground: \"#fdfdfd\",\n  muted: \"#3f4043\",\n  mutedForeground: \"#7e7f81\",\n  accent: \"#3f4043\",\n  accentForeground: \"#fdfdfd\",\n  destructive: \"#dc2626\",\n  destructiveForeground: \"#ff9b9b\",\n  border: \"#545558\",\n  input: \"#151619\",\n  ring: \"#a984ff\",\n  brandSecondary: \"#af41ff\",\n  brandSecondaryForeground: \"#151619\",\n  brandGradientFrom: \"#6859ff\",\n  brandGradientTo: \"#af41ff\",\n  success: \"#008e61\",\n  successForeground: \"#fdfdfd\",\n  warning: \"#cd6c00\",\n  warningForeground: \"#fdfdfd\",\n  info: \"#844fff\",\n  infoForeground: \"#fdfdfd\",\n  borderMuted: \"#3f4043\",\n  active: \"#422880\",\n  activeForeground: \"#fdfdfd\",\n  labelForeground: \"#a8a9aa\",\n  icon: \"#939496\",\n  iconMuted: \"#545558\",\n  spacing: {\n    xs: \"0.25rem\",\n    sm: \"0.5rem\",\n    md: \"0.75rem\",\n    lg: \"1rem\",\n    xl: \"1.5rem\",\n    \"2xl\": \"2rem\",\n  },\n  radius: {\n    sm: \"0.25rem\",\n    md: \"0.375rem\",\n    lg: \"0.5rem\",\n    xl: \"0.75rem\",\n    full: \"9999px\",\n  },\n  size: {\n    controlHeight: \"2.5rem\",\n    modalWidth: \"42rem\",\n    sidebarWidth: \"17.5rem\",\n  },\n  zIndex: {\n    toolbar: 30,\n    overlay: 40,\n    modal: 50,\n    toast: 60,\n  },\n} as const;\n\nexport type DesignTokens = typeof designTokens;\n"],"mappings":";;;AAAO,IAAM,eAAe;AAAA,EAC1B,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,qBAAqB;AAAA,EACrB,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,uBAAuB;AAAA,EACvB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,WAAW;AAAA,EACX,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,EACT;AAAA,EACA,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EACR;AAAA,EACA,MAAM;AAAA,IACJ,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;","names":[]}

package/dist/index.cjs

@@ -218,6 +218,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",
@@ -267,6 +268,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",
@@ -825,7 +827,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;
@@ -4558,18 +4560,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);
@@ -4780,6 +4797,8 @@ function AdsDataTable({
   dataSource = [],
   rowKey,
   loading = false,
+  loadingVariant = "skeleton",
+  expandedRowSurface = "inset",
   emptyText,
   emptyState,
   rowClassName,
@@ -4878,8 +4897,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 = React42.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 = React42.useMemo(
     () => resolvedColumns.reduce((accumulator, column, index) => {
       const columnKey = getColumnKey(column, index);
@@ -5235,7 +5260,26 @@ function AdsDataTable({
           );
         })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AdsTableBody, { children: loading ? Array.from({ length: SKELETON_ROW_COUNT }, (_, skeletonIndex) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AdsTableRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AdsTableBody, { children: loading && loadingVariant === "spinner" ? [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AdsTableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          AdsTableCell,
+          {
+            className: "p-0",
+            colSpan: columnCount,
+            children: /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.jsx)(AdsSpinner, { size: "lg", tone: "foreground" })
+              }
+            )
+          }
+        ) }, "spinner-row")
+      ] : loading ? Array.from({ length: SKELETON_ROW_COUNT }, (_, skeletonIndex) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AdsTableRow, { children: [
         hasSelectionColumn ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AdsTableCell, { className: "w-12 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AdsSkeleton, { className: "h-4 w-4 rounded-[4px]" }) }) : null,
         hasExpandableColumn ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AdsTableCell, { className: "w-12 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AdsSkeleton, { className: "h-4 w-4 rounded-[4px]" }) }) : null,
         resolvedColumns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
@@ -5338,7 +5382,7 @@ function AdsDataTable({
                 "div",
                 {
                   className: cn(
-                    "border-t border-border bg-popover/40 p-4",
+                    expandedRowContentClassName,
                     classNames?.expandedRowContent
                   ),
                   children: expandable?.expandedRowRender?.(record, index)
@@ -5351,7 +5395,7 @@ function AdsDataTable({
         /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AdsTableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           AdsTableCell,
           {
-            colSpan: resolvedColumns.length + Number(hasSelectionColumn) + Number(hasExpandableColumn),
+            colSpan: columnCount,
             className: cn("p-0", classNames?.emptyRowCell),
             children: renderedEmptyState
           }