achery-ui 0.5.8 → 0.6.0

package/dist/index.cjs

@@ -241,6 +241,13 @@ function Mark(props) {
     /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "56,50 47,58 47,52", stroke: "none" })
   ] });
 }
+function Menu(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "7", x2: "21", y2: "7" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "17", x2: "21", y2: "17" })
+  ] });
+}
 function Mercury(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "9", r: "5" }),
@@ -282,6 +289,9 @@ function Sigil(props) {
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "3" })
   ] });
 }
+function Spinner(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3a9 9 0 1 0 9 9" }) });
+}
 function Sprig(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3v18" }),
@@ -332,13 +342,6 @@ function Wordmark(props) {
     /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(82,72)", fontFamily: "'Space Grotesk', sansSerif", fontWeight: "600", fontSize: "10", letterSpacing: "6", stroke: "none", children: /* @__PURE__ */ jsxRuntime.jsx("text", { x: "2", y: "0", children: "\u2014 W O R K S H O P \u2014" }) })
   ] });
 }
-function Menu(props) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "7", x2: "21", y2: "7" }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "17", x2: "21", y2: "17" })
-  ] });
-}
 var glyphMap = {
   "arrow-right": ArrowRight,
   "arrow-up": ArrowUp,
@@ -365,6 +368,7 @@ var glyphMap = {
   "salt": Salt,
   "scroll": Scroll,
   "sigil": Sigil,
+  "spinner": Spinner,
   "sprig": Sprig,
   "square": Square,
   "star": Star,
@@ -473,45 +477,56 @@ function Badge({
     }
   );
 }
-var button = createRuntimeFn.createRuntimeFn({ defaultClassName: "Button_button__1torrqc0", variantClassNames: { variant: { primary: "Button_button_variant_primary__1torrqc1", secondary: "Button_button_variant_secondary__1torrqc2", accent: "Button_button_variant_accent__1torrqc3", ghost: "Button_button_variant_ghost__1torrqc4", danger: "Button_button_variant_danger__1torrqc5" }, size: { sm: "Button_button_size_sm__1torrqc6", md: "Button_button_size_md__1torrqc7" } }, defaultVariants: { variant: "secondary", size: "md" }, compoundVariants: [] });
-var kbdHint = "Button_kbdHint__1torrqc8";
+var button = createRuntimeFn.createRuntimeFn({ defaultClassName: "Button_button__1torrqc2", variantClassNames: { variant: { primary: "Button_button_variant_primary__1torrqc3", secondary: "Button_button_variant_secondary__1torrqc4", accent: "Button_button_variant_accent__1torrqc5", ghost: "Button_button_variant_ghost__1torrqc6", danger: "Button_button_variant_danger__1torrqc7" }, size: { sm: "Button_button_size_sm__1torrqc8", md: "Button_button_size_md__1torrqc9" } }, defaultVariants: { variant: "secondary", size: "md" }, compoundVariants: [] });
+var kbdHint = "Button_kbdHint__1torrqca";
+var spinner = "Button_spinner__1torrqc1";
 function Button({
   variant = "secondary",
   size = "md",
   glyph: glyph2,
   glyphPosition = "start",
   kbd,
+  loading = false,
+  loadingLabel = "Loading\u2026",
   children,
   className,
   ...props
 }) {
   const glyphSize = size === "sm" ? 12 : 14;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       className: [button({ variant, size }), className].filter(Boolean).join(" "),
+      disabled: loading || props.disabled,
+      "aria-busy": loading || void 0,
       ...props,
-      children: [
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: spinner, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: "spinner", size: glyphSize }) }),
+        loadingLabel
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         glyph2 && glyphPosition === "start" && /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: glyph2, size: glyphSize, "aria-hidden": "true" }),
         children,
         glyph2 && glyphPosition === "end" && /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: glyph2, size: glyphSize, "aria-hidden": "true" }),
         kbd && /* @__PURE__ */ jsxRuntime.jsx("span", { className: kbdHint, children: kbd })
-      ]
+      ] })
     }
   );
 }
 
 // src/components/Toggle/Toggle.css.ts
-var label = "Toggle_label__trpmwc3";
-var thumb = "Toggle_thumb__trpmwc1";
-var track = "Toggle_track__trpmwc0";
-var wrapper = "Toggle_wrapper__trpmwc2";
+var label = "Toggle_label__trpmwc4";
+var statusIndicator = "Toggle_statusIndicator__trpmwc5";
+var statusIndicatorVariants = { saving: "Toggle_statusIndicatorVariants_saving__trpmwc6", saved: "Toggle_statusIndicatorVariants_saved__trpmwc7", error: "Toggle_statusIndicatorVariants_error__trpmwc8" };
+var thumb = "Toggle_thumb__trpmwc2";
+var track = "Toggle_track__trpmwc1";
+var wrapper = "Toggle_wrapper__trpmwc3";
 function Toggle({
   pressed,
   defaultPressed,
   onPressedChange,
   disabled,
   label: label4,
+  status,
   className,
   "aria-label": ariaLabel
 }) {
@@ -528,7 +543,8 @@ function Toggle({
         children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: thumb })
       }
     ),
-    label4 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: label, children: label4 })
+    label4 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: label, children: label4 }),
+    status && status !== "idle" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: [statusIndicator, statusIndicatorVariants[status]].join(" "), "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: status === "saving" ? "spinner" : status === "saved" ? "tick" : "cross", size: 12 }) })
   ] });
 }
 
@@ -554,17 +570,24 @@ function Marginalia({
 }
 
 // src/components/Input/Input.css.ts
-var errorText = "Input_errorText__6w3tie3";
-var fieldRoot = "Input_fieldRoot__6w3tie0";
-var hint = "Input_hint__6w3tie2";
-var inputBase = "Input_inputBase__6w3tie4";
-var inputError = "Input_inputError__6w3tie5";
-var label2 = "Input_label__6w3tie1";
-var searchIcon = "Input_searchIcon__6w3tie9";
-var searchInput = "Input_searchInput__6w3tiea Input_inputBase__6w3tie4";
-var searchWrapper = "Input_searchWrapper__6w3tie8";
-var selectInput = "Input_selectInput__6w3tie7 Input_inputBase__6w3tie4";
-var textarea = "Input_textarea__6w3tie6 Input_inputBase__6w3tie4";
+var errorText = "Input_errorText__6w3tie4";
+var fieldRoot = "Input_fieldRoot__6w3tie1";
+var hint = "Input_hint__6w3tie3";
+var inputBase = "Input_inputBase__6w3tie5";
+var inputError = "Input_inputError__6w3tie6";
+var inputWithStatus = "Input_inputWithStatus__6w3tiea Input_inputBase__6w3tie5";
+var inputWrapper = "Input_inputWrapper__6w3tie9";
+var label2 = "Input_label__6w3tie2";
+var searchIcon = "Input_searchIcon__6w3tiej";
+var searchInput = "Input_searchInput__6w3tiek Input_inputBase__6w3tie5";
+var searchWrapper = "Input_searchWrapper__6w3tiei";
+var selectInput = "Input_selectInput__6w3tie8 Input_inputBase__6w3tie5";
+var selectWithStatus = "Input_selectWithStatus__6w3tiec";
+var statusIcon = "Input_statusIcon__6w3tied";
+var statusIconTextarea = "Input_statusIconTextarea__6w3tiee Input_statusIcon__6w3tied";
+var statusIconVariants = { saving: "Input_statusIconVariants_saving__6w3tief", saved: "Input_statusIconVariants_saved__6w3tieg", error: "Input_statusIconVariants_error__6w3tieh" };
+var textarea = "Input_textarea__6w3tie7 Input_inputBase__6w3tie5";
+var textareaWithStatus = "Input_textareaWithStatus__6w3tieb";
 function Field({ label: label4, hint: hint2, error, children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [fieldRoot, className].filter(Boolean).join(" "), children: [
     label4 && /* @__PURE__ */ jsxRuntime.jsx("label", { className: label2, children: label4 }),
@@ -573,33 +596,73 @@ function Field({ label: label4, hint: hint2, error, children, className }) {
     !error && hint2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: hint, children: hint2 })
   ] });
 }
-function Input({ error, className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      className: [inputBase, error && inputError, className].filter(Boolean).join(" "),
-      ...props
-    }
-  );
+function Input({ error, status, className, ...props }) {
+  const hasStatus = status && status !== "idle";
+  if (!hasStatus) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        className: [inputBase, error && inputError, className].filter(Boolean).join(" "),
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [inputWrapper, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        className: [inputBase, inputWithStatus, error && inputError].filter(Boolean).join(" "),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: [statusIcon, statusIconVariants[status]].join(" "), "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: status === "saving" ? "spinner" : status === "saved" ? "tick" : "cross", size: 12 }) })
+  ] });
 }
-function Textarea({ error, className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "textarea",
-    {
-      className: [textarea, error && inputError, className].filter(Boolean).join(" "),
-      ...props
-    }
-  );
+function Textarea({ error, status, className, ...props }) {
+  const hasStatus = status && status !== "idle";
+  if (!hasStatus) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        className: [textarea, error && inputError, className].filter(Boolean).join(" "),
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [inputWrapper, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        className: [textarea, textareaWithStatus, error && inputError].filter(Boolean).join(" "),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: [statusIconTextarea, statusIconVariants[status]].join(" "), "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: status === "saving" ? "spinner" : status === "saved" ? "tick" : "cross", size: 12 }) })
+  ] });
 }
-function Select({ error, children, className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "select",
-    {
-      className: [selectInput, error && inputError, className].filter(Boolean).join(" "),
-      ...props,
-      children
-    }
-  );
+function Select({ error, status, children, className, ...props }) {
+  const hasStatus = status && status !== "idle";
+  if (!hasStatus) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        className: [selectInput, error && inputError, className].filter(Boolean).join(" "),
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [inputWrapper, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        className: [selectInput, selectWithStatus, error && inputError].filter(Boolean).join(" "),
+        ...props,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: [statusIcon, statusIconVariants[status]].join(" "), "aria-hidden": "true", style: { right: "28px" }, children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: status === "saving" ? "spinner" : status === "saved" ? "tick" : "cross", size: 12 }) })
+  ] });
 }
 function SearchInput({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [searchWrapper, className].filter(Boolean).join(" "), children: [
@@ -861,12 +924,66 @@ function NavItem({ item: item2, active, onClick, renderLink, collapsed }) {
   );
 }
 
+// src/components/Skeleton/Skeleton.css.ts
+var block = "Skeleton_block__112laiw3 Skeleton_skeleton__112laiw1";
+var line = "Skeleton_line__112laiw2 Skeleton_skeleton__112laiw1";
+var Skeleton = ({ lines = 1, width = "100%", block: block2 = false, height, style, className }) => {
+  if (block2) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: [block, className].filter(Boolean).join(" "),
+        style: height ? { height, ...style } : style,
+        "aria-hidden": "true"
+      }
+    );
+  }
+  const widths = Array.isArray(width) ? width : Array.from({ length: lines }, () => width);
+  if (lines === 1) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: [line, className].filter(Boolean).join(" "),
+        style: widths[0] !== "100%" ? { width: widths[0], ...style } : style,
+        "aria-hidden": "true"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      style: { display: "flex", flexDirection: "column", gap: "6px", width: "100%" },
+      "aria-hidden": "true",
+      children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: line,
+          style: widths[i] !== "100%" ? { width: widths[i] } : void 0
+        },
+        i
+      ))
+    }
+  );
+};
+
 // src/components/ProgressBar/ProgressBar.css.ts
 var fill = "ProgressBar_fill__1686i1k3";
 var fillTone = { neutral: "ProgressBar_fillTone_neutral__1686i1k4", accent: "ProgressBar_fillTone_accent__1686i1k5" };
 var track2 = "ProgressBar_track__1686i1k0";
 var trackSize = { sm: "ProgressBar_trackSize_sm__1686i1k1", md: "ProgressBar_trackSize_md__1686i1k2" };
-function ProgressBar({ value: value2, size = "md", tone = "neutral", className }) {
+var trackHeightPx = { sm: "4px", md: "8px" };
+function ProgressBar({ value: value2, size = "md", tone = "neutral", loading = false, className }) {
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton,
+      {
+        block: true,
+        height: trackHeightPx[size],
+        className,
+        style: { borderRadius: 0 }
+      }
+    );
+  }
   const pct = Math.min(100, Math.max(0, value2));
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -888,7 +1005,20 @@ function ProgressBar({ value: value2, size = "md", tone = "neutral", className }
 }
 var avatar = createRuntimeFn.createRuntimeFn({ defaultClassName: "Avatar_avatar__16f6qlf0", variantClassNames: { size: { sm: "Avatar_avatar_size_sm__16f6qlf1", md: "Avatar_avatar_size_md__16f6qlf2", lg: "Avatar_avatar_size_lg__16f6qlf3" }, tone: { moss: "Avatar_avatar_tone_moss__16f6qlf4", neutral: "Avatar_avatar_tone_neutral__16f6qlf5" } }, defaultVariants: { size: "md", tone: "neutral" }, compoundVariants: [] });
 var initials = "Avatar_initials__16f6qlf6";
-function Avatar({ initials: initials2, size = "md", tone = "neutral", className }) {
+var avatarPx = { sm: "24px", md: "32px", lg: "40px" };
+function Avatar({ initials: initials2, size = "md", tone = "neutral", loading = false, className }) {
+  if (loading) {
+    const px = avatarPx[size];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton,
+      {
+        block: true,
+        height: px,
+        className,
+        style: { width: px, borderRadius: "50%", flexShrink: 0 }
+      }
+    );
+  }
   const display2 = initials2.slice(0, 2).toUpperCase();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -1031,6 +1161,7 @@ var thSortable = "Table_thSortable__1a2tbys5 Table_th__1a2tbys4";
 var thead = "Table_thead__1a2tbys3";
 var toolbar = "Table_toolbar__1a2tbysa";
 var tr = "Table_tr__1a2tbys7";
+var skeletonWidths = ["75%", "90%", "65%", "85%", "70%", "95%", "60%", "80%"];
 function buildPageWindow(current, total, window2) {
   const pages = /* @__PURE__ */ new Set();
   pages.add(0);
@@ -1065,8 +1196,10 @@ function Table({
   onPageSizeChange,
   pageSizeOptions,
   paginationWindow = 2,
+  height,
   toolbar: toolbar2,
   emptyState: emptyState2,
+  loading = false,
   className
 }) {
   const [internalSortKey, setInternalSortKey] = react.useState(defaultSortKey ?? null);
@@ -1100,81 +1233,88 @@ function Table({
   const totalPages = pageSize && totalRows ? Math.ceil(totalRows / pageSize) : null;
   const isFirstPage = pageIndex === 0;
   const isLastPage = totalPages !== null ? pageIndex >= totalPages - 1 : true;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [tableWrapper, className].filter(Boolean).join(" "), children: [
-    toolbar2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: toolbar, children: toolbar2 }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: tableScroll,
-        style: pageSize ? { minHeight: 37 + pageSize * 38 } : void 0,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: table, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("thead", { className: thead, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "th",
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [tableWrapper, className].filter(Boolean).join(" "),
+      style: height ? { height, display: "flex", flexDirection: "column" } : void 0,
+      children: [
+        toolbar2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: toolbar, children: toolbar2 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: tableScroll,
+            style: height ? { flex: 1, overflowY: "auto", minHeight: 0 } : pageSize ? { minHeight: 37 + pageSize * 38 } : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: table, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("thead", { className: thead, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "th",
+                {
+                  className: col.sortable ? thSortable : th,
+                  style: col.width ? { width: col.width } : void 0,
+                  onClick: col.sortable ? () => handleSort(col.key) : void 0,
+                  "aria-sort": activeSortKey === col.key ? activeSortDir === "asc" ? "ascending" : "descending" : void 0,
+                  children: [
+                    col.label,
+                    col.sortable && activeSortKey === col.key && activeSortDir && /* @__PURE__ */ jsxRuntime.jsx("span", { className: sortIndicator, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: activeSortDir === "asc" ? "arrow-up" : "arrow-right", size: 10 }) })
+                  ]
+                },
+                col.key
+              )) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? Array.from({ length: pageSize ?? 10 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: tr, "aria-hidden": "true", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: col.mono ? tdMono : td, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: col.width ? "80%" : skeletonWidths[i % skeletonWidths.length] }) }, col.key)) }, i)) : data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns.length, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: emptyState, children: emptyState2 ?? "No data." }) }) }) : sortedData.map((row) => {
+                const key = rowKey(row);
+                const isSelected = selectedKeys?.includes(key) ?? false;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "tr",
+                  {
+                    className: tr,
+                    "data-selected": isSelected,
+                    onClick: onRowClick ? () => onRowClick(key, row) : void 0,
+                    style: onRowClick ? { cursor: "pointer" } : void 0,
+                    children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: col.mono ? tdMono : td, children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key))
+                  },
+                  key
+                );
+              }) })
+            ] })
+          }
+        ),
+        pageSize && totalPages !== null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: pagination, children: [
+          pageSizeOptions && /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
             {
-              className: col.sortable ? thSortable : th,
-              style: col.width ? { width: col.width } : void 0,
-              onClick: col.sortable ? () => handleSort(col.key) : void 0,
-              "aria-sort": activeSortKey === col.key ? activeSortDir === "asc" ? "ascending" : "descending" : void 0,
-              children: [
-                col.label,
-                col.sortable && activeSortKey === col.key && activeSortDir && /* @__PURE__ */ jsxRuntime.jsx("span", { className: sortIndicator, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: activeSortDir === "asc" ? "arrow-up" : "arrow-right", size: 10 }) })
-              ]
-            },
-            col.key
-          )) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns.length, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: emptyState, children: emptyState2 ?? "No data." }) }) }) : sortedData.map((row) => {
-            const key = rowKey(row);
-            const isSelected = selectedKeys?.includes(key) ?? false;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "tr",
-              {
-                className: tr,
-                "data-selected": isSelected,
-                onClick: onRowClick ? () => onRowClick(key, row) : void 0,
-                style: onRowClick ? { cursor: "pointer" } : void 0,
-                children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: col.mono ? tdMono : td, children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key))
-              },
-              key
-            );
-          }) })
+              className: pageSizeSelect,
+              value: pageSize,
+              onChange: (e) => onPageSizeChange?.(Number(e.target.value)),
+              "aria-label": "Rows per page",
+              children: pageSizeOptions.map((n) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: n, children: [
+                n,
+                " / page"
+              ] }, n))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: paginationControls, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("button", { className: pageNavButton, onClick: () => onPageChange?.(0), disabled: isFirstPage, "aria-label": "First page", children: "\xAB" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { className: pageNavButton, onClick: () => onPageChange?.(pageIndex - 1), disabled: isFirstPage, "aria-label": "Previous page", children: "\u2039" }),
+            buildPageWindow(pageIndex, totalPages, paginationWindow).map(
+              (entry, i) => entry === null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: paginationEllipsis, children: "\u2026" }, `ellipsis-${i}`) : /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  className: entry === pageIndex ? pageButtonActive : pageButton,
+                  onClick: () => onPageChange?.(entry),
+                  "aria-label": `Page ${entry + 1}`,
+                  "aria-current": entry === pageIndex ? "page" : void 0,
+                  children: entry + 1
+                },
+                entry
+              )
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { className: pageNavButton, onClick: () => onPageChange?.(pageIndex + 1), disabled: isLastPage, "aria-label": "Next page", children: "\u203A" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { className: pageNavButton, onClick: () => onPageChange?.(totalPages - 1), disabled: isLastPage, "aria-label": "Last page", children: "\xBB" })
+          ] })
         ] })
-      }
-    ),
-    pageSize && totalPages !== null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: pagination, children: [
-      pageSizeOptions && /* @__PURE__ */ jsxRuntime.jsx(
-        "select",
-        {
-          className: pageSizeSelect,
-          value: pageSize,
-          onChange: (e) => onPageSizeChange?.(Number(e.target.value)),
-          "aria-label": "Rows per page",
-          children: pageSizeOptions.map((n) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: n, children: [
-            n,
-            " / page"
-          ] }, n))
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: paginationControls, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: pageNavButton, onClick: () => onPageChange?.(0), disabled: isFirstPage, "aria-label": "First page", children: "\xAB" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: pageNavButton, onClick: () => onPageChange?.(pageIndex - 1), disabled: isFirstPage, "aria-label": "Previous page", children: "\u2039" }),
-        buildPageWindow(pageIndex, totalPages, paginationWindow).map(
-          (entry, i) => entry === null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: paginationEllipsis, children: "\u2026" }, `ellipsis-${i}`) : /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              className: entry === pageIndex ? pageButtonActive : pageButton,
-              onClick: () => onPageChange?.(entry),
-              "aria-label": `Page ${entry + 1}`,
-              "aria-current": entry === pageIndex ? "page" : void 0,
-              children: entry + 1
-            },
-            entry
-          )
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: pageNavButton, onClick: () => onPageChange?.(pageIndex + 1), disabled: isLastPage, "aria-label": "Next page", children: "\u203A" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: pageNavButton, onClick: () => onPageChange?.(totalPages - 1), disabled: isLastPage, "aria-label": "Last page", children: "\xBB" })
-      ] })
-    ] })
-  ] });
+      ]
+    }
+  );
 }
 var body2 = "Modal_body__1kcb5si8";
 var bodyScrollable = "Modal_bodyScrollable__1kcb5sie";
@@ -1283,10 +1423,12 @@ function ToastProvider({ children }) {
 }
 
 // src/components/Checkbox/Checkbox.css.ts
-var indicator = "Checkbox_indicator__nnmycq2";
-var label3 = "Checkbox_label__nnmycq3";
-var root = "Checkbox_root__nnmycq1";
-var wrapper2 = "Checkbox_wrapper__nnmycq0";
+var indicator = "Checkbox_indicator__nnmycq3";
+var label3 = "Checkbox_label__nnmycq4";
+var root = "Checkbox_root__nnmycq2";
+var statusIndicator2 = "Checkbox_statusIndicator__nnmycq5";
+var statusIndicatorVariants2 = { saving: "Checkbox_statusIndicatorVariants_saving__nnmycq6", saved: "Checkbox_statusIndicatorVariants_saved__nnmycq7", error: "Checkbox_statusIndicatorVariants_error__nnmycq8" };
+var wrapper2 = "Checkbox_wrapper__nnmycq1";
 function Checkbox({
   checked,
   defaultChecked,
@@ -1294,6 +1436,7 @@ function Checkbox({
   disabled,
   label: label4,
   id,
+  status,
   className,
   "aria-label": ariaLabel
 }) {
@@ -1312,7 +1455,8 @@ function Checkbox({
         children: /* @__PURE__ */ jsxRuntime.jsx(RadixCheckbox__namespace.Indicator, { className: indicator, children: checked === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "2", viewBox: "0 0 10 2", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "10", height: "2", rx: "1" }) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "1,4 4,7 9,1" }) }) })
       }
     ),
-    label4 && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: resolvedId, className: label3, style: { cursor: disabled ? "not-allowed" : "pointer" }, children: label4 })
+    label4 && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: resolvedId, className: label3, style: { cursor: disabled ? "not-allowed" : "pointer" }, children: label4 }),
+    status && status !== "idle" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: [statusIndicator2, statusIndicatorVariants2[status]].join(" "), "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: status === "saving" ? "spinner" : status === "saved" ? "tick" : "cross", size: 12 }) })
   ] });
 }
 
@@ -1357,7 +1501,10 @@ function Menu2({ trigger: trigger2, items, side = "bottom", align = "end", class
 }
 
 // src/components/DatePicker/DatePicker.css.ts
-var input = "DatePicker_input__1etdrw70";
+var input = "DatePicker_input__1etdrw71";
+var statusIcon2 = "DatePicker_statusIcon__1etdrw73";
+var statusIconVariants2 = { saving: "DatePicker_statusIconVariants_saving__1etdrw74", saved: "DatePicker_statusIconVariants_saved__1etdrw75", error: "DatePicker_statusIconVariants_error__1etdrw76" };
+var wrapper3 = "DatePicker_wrapper__1etdrw72";
 function DatePicker({
   type = "date",
   value: value2,
@@ -1366,11 +1513,13 @@ function DatePicker({
   max,
   disabled,
   error,
+  status,
   placeholder,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const hasStatus = status && status !== "idle";
+  const input3 = /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
       type,
@@ -1381,10 +1530,16 @@ function DatePicker({
       disabled,
       placeholder,
       "data-error": error || void 0,
-      className: [input, className].filter(Boolean).join(" "),
+      "data-has-status": hasStatus || void 0,
+      className: [input, !hasStatus && className].filter(Boolean).join(" "),
       ...rest
     }
   );
+  if (!hasStatus) return input3;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [wrapper3, className].filter(Boolean).join(" "), children: [
+    input3,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: [statusIcon2, statusIconVariants2[status]].join(" "), "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: status === "saving" ? "spinner" : status === "saved" ? "tick" : "cross", size: 12 }) })
+  ] });
 }
 
 // src/components/Combobox/Combobox.css.ts
@@ -1395,7 +1550,7 @@ var option = "Combobox_option__1irfr5o7";
 var optionCheck = "Combobox_optionCheck__1irfr5o8";
 var popover = "Combobox_popover__1irfr5o6";
 var trigger = "Combobox_trigger__1irfr5o1";
-var wrapper3 = "Combobox_wrapper__1irfr5o0";
+var wrapper4 = "Combobox_wrapper__1irfr5o0";
 function Combobox({
   value: value2,
   onChange,
@@ -1465,7 +1620,7 @@ function Combobox({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: [wrapper3, className].filter(Boolean).join(" "),
+      className: [wrapper4, className].filter(Boolean).join(" "),
       onClick: () => {
         if (!disabled) inputRef.current?.focus();
       },
@@ -1613,7 +1768,7 @@ function SingleCombobox({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: [wrapper3, className].filter(Boolean).join(" "),
+      className: [wrapper4, className].filter(Boolean).join(" "),
       onClick: () => {
         if (!disabled) inputRef.current?.focus();
       },
@@ -1812,7 +1967,7 @@ function Sparkline({
 // src/components/KpiTile/KpiTile.css.ts
 var inner = "KpiTile_inner__1yi98c61";
 var value = "KpiTile_value__1yi98c62";
-var wrapper4 = "KpiTile_wrapper__1yi98c60";
+var wrapper5 = "KpiTile_wrapper__1yi98c60";
 var deltaToneToBadge = {
   positive: "saved",
   negative: "stopped",
@@ -1825,16 +1980,22 @@ function KpiTile({
   deltaTone = "neutral",
   sparkData,
   onClick,
+  loading = false,
   className
 }) {
   const inner2 = /* @__PURE__ */ jsxRuntime.jsx(Card, { variant: "stamp", padding: "md", ...className !== void 0 ? { className } : {}, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inner, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Eyebrow, { children: label4 }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: value, children: value2 }),
-    delta && /* @__PURE__ */ jsxRuntime.jsx(Badge, { tone: deltaToneToBadge[deltaTone], dot: true, children: delta }),
-    sparkData && sparkData.length >= 2 && /* @__PURE__ */ jsxRuntime.jsx(Sparkline, { data: sparkData, tone: deltaTone, width: 80, height: 24 })
+    loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "55%" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "70%" })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: value, children: value2 }),
+      delta && /* @__PURE__ */ jsxRuntime.jsx(Badge, { tone: deltaToneToBadge[deltaTone], dot: true, children: delta }),
+      sparkData && sparkData.length >= 2 && /* @__PURE__ */ jsxRuntime.jsx(Sparkline, { data: sparkData, tone: deltaTone, width: 80, height: 24 })
+    ] })
   ] }) });
   if (onClick) {
-    return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick, className: wrapper4, children: inner2 });
+    return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick, className: wrapper5, children: inner2 });
   }
   return inner2;
 }
@@ -1888,6 +2049,7 @@ exports.SearchInput = SearchInput;
 exports.Select = Select;
 exports.Sidebar = Sidebar;
 exports.SingleCombobox = SingleCombobox;
+exports.Skeleton = Skeleton;
 exports.Sparkline = Sparkline;
 exports.StatePill = StatePill;
 exports.Table = Table;