@apipass/design-system 7.4.7 → 8.1.0

package/dist/lib/ui/primitives/Tree/Tree.js

@@ -1,54 +1,61 @@
-import { jsx as r, jsxs as o } from "react/jsx-runtime";
-import { clsx as u } from "../../../vendor/clsx/dist/clsx.js";
-import { Tree as f, TreeItem as s, Collection as p, TreeItemContent as C, Button as x } from "react-aria-components";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { clsx as C } from "../../../vendor/clsx/dist/clsx.js";
+import { Tree as v, TreeItem as h, Collection as x, TreeItemContent as I, Button as T } from "react-aria-components";
 /* empty css         */
-import { IconLoader as I } from "../../icons/IconLoader.js";
-import { IconChevronRight as T } from "../../icons/IconChevronRight.js";
-function v(t) {
+import { BrandLoader as b } from "../BrandLoader/BrandLoader.js";
+import { IconChevronRight as B } from "../../icons/IconChevronRight.js";
+function N(t) {
   return t.hasChildItems ?? !!(t.children && t.children.length > 0);
 }
-function B({
+function u(t, i) {
+  return t.flatMap((n) => [
+    ...i(n.id) ? [n.id] : [],
+    ...u(n.children ?? [], i)
+  ]);
+}
+function O({
   className: t,
   items: i,
-  renderItem: l,
-  isNodeLoading: n,
+  renderItem: n,
+  isNodeLoading: l,
   onItemAction: c,
-  dependencies: a,
-  ...d
+  dependencies: o,
+  ...p
 }) {
-  function m(e) {
-    return /* @__PURE__ */ o(
-      s,
+  const f = l ? JSON.stringify(u(i, l)) : "", a = [...o ?? [], f];
+  function s(e) {
+    return /* @__PURE__ */ d(
+      h,
       {
         id: e.id,
         textValue: e.label,
-        hasChildItems: v(e),
+        hasChildItems: N(e),
         className: "tree-item",
         onAction: c ? () => c(e) : void 0,
         children: [
-          /* @__PURE__ */ r(h, { children: l(e) }),
-          e.children && e.children.length > 0 && /* @__PURE__ */ r(p, { items: e.children, dependencies: a, children: m }),
-          ((n == null ? void 0 : n(e.id)) ?? !1) && /* @__PURE__ */ r(s, { id: `${e.id}::loading`, textValue: "Loading", isDisabled: !0, className: "tree-item", children: /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(I, { size: "16", className: "tree-item-loading-icon" }) }) })
+          /* @__PURE__ */ r(m, { children: n(e) }),
+          e.children && e.children.length > 0 && /* @__PURE__ */ r(x, { items: e.children, dependencies: a, children: s }),
+          ((l == null ? void 0 : l(e.id)) ?? !1) && /* @__PURE__ */ r(h, { id: `${e.id}::loading`, textValue: "Loading", isDisabled: !0, className: "tree-item", children: /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(b, { "aria-hidden": !0, variant: "pulse", size: "16", tone: "brand" }) }) })
         ]
       }
     );
   }
-  return /* @__PURE__ */ r(f, { items: i, className: u(t, "tree"), dependencies: a, ...d, children: m });
+  return /* @__PURE__ */ r(v, { items: i, className: C(t, "tree"), dependencies: a, ...p, children: s });
 }
-function h({ children: t }) {
-  return /* @__PURE__ */ r(C, { children: ({ hasChildItems: i, level: l }) => /* @__PURE__ */ o(
+function m({ children: t }) {
+  return /* @__PURE__ */ r(I, { children: ({ hasChildItems: i, level: n }) => /* @__PURE__ */ d(
     "div",
     {
       className: "tree-item-row",
-      style: { "--tree-item-depth": l - 1 },
+      style: { "--tree-item-depth": n - 1 },
       children: [
-        i ? /* @__PURE__ */ r(x, { slot: "chevron", className: "tree-item-chevron", children: /* @__PURE__ */ r(T, { size: "16" }) }) : /* @__PURE__ */ r("span", { className: "tree-item-chevron-spacer", "aria-hidden": "true" }),
+        i ? /* @__PURE__ */ r(T, { slot: "chevron", className: "tree-item-chevron", children: /* @__PURE__ */ r(B, { size: "16" }) }) : /* @__PURE__ */ r("span", { className: "tree-item-chevron-spacer", "aria-hidden": "true" }),
         t
       ]
     }
   ) });
 }
 export {
-  B as Tree
+  O as Tree
 };
 //# sourceMappingURL=Tree.js.map

package/dist/lib/ui/primitives/Tree/Tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.js","sources":["../../../../../src/ui/primitives/Tree/Tree.tsx"],"sourcesContent":["import type { CSSProperties, Key, ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { IconChevronRight, IconLoader } from \"icons\";\nimport {\n  Button,\n  Collection,\n  Tree as RACTree,\n  TreeItem as RACTreeItem,\n  TreeItemContent as RACTreeItemContent,\n  type TreeProps as RACTreeProps,\n} from \"react-aria-components\";\nimport \"./tree.css\";\n\nexport interface TreeNode<T = unknown> {\n  id: string;\n  label: string;\n  data?: T;\n  /** Signals a node has children before they are fetched, so the chevron renders ahead of a lazy load. */\n  hasChildItems?: boolean;\n  /** `undefined` = not loaded yet, `[]` = loaded and empty. */\n  children?: TreeNode<T>[];\n}\n\nexport type TreeProps<T> = Omit<\n  RACTreeProps<TreeNode<T>>,\n  \"children\" | \"items\"\n> & {\n  items: TreeNode<T>[];\n  renderItem: (node: TreeNode<T>) => ReactNode;\n  isNodeLoading?: (id: Key) => boolean;\n  onItemAction?: (node: TreeNode<T>) => void;\n};\n\nfunction hasExpandableChildren<T>(node: TreeNode<T>): boolean {\n  return node.hasChildItems ?? Boolean(node.children && node.children.length > 0);\n}\n\nexport function Tree<T>({\n  className,\n  items,\n  renderItem,\n  isNodeLoading,\n  onItemAction,\n  dependencies,\n  ...props\n}: TreeProps<T>) {\n  function renderNode(node: TreeNode<T>): ReactNode {\n    return (\n      <RACTreeItem\n        id={node.id}\n        textValue={node.label}\n        hasChildItems={hasExpandableChildren(node)}\n        className=\"tree-item\"\n        onAction={onItemAction ? () => onItemAction(node) : undefined}\n      >\n        <TreeItemContent>{renderItem(node)}</TreeItemContent>\n        {node.children && node.children.length > 0 && (\n          <Collection items={node.children} dependencies={dependencies}>\n            {renderNode}\n          </Collection>\n        )}\n        {(isNodeLoading?.(node.id) ?? false) && (\n          <RACTreeItem id={`${node.id}::loading`} textValue=\"Loading\" isDisabled className=\"tree-item\">\n            <TreeItemContent>\n              <IconLoader size=\"16\" className=\"tree-item-loading-icon\" />\n            </TreeItemContent>\n          </RACTreeItem>\n        )}\n      </RACTreeItem>\n    );\n  }\n\n  return (\n    <RACTree items={items} className={clsx(className, \"tree\")} dependencies={dependencies} {...props}>\n      {renderNode}\n    </RACTree>\n  );\n}\n\ninterface TreeItemContentProps {\n  children: ReactNode;\n}\n\nfunction TreeItemContent({ children }: TreeItemContentProps) {\n  return (\n    <RACTreeItemContent>\n      {({ hasChildItems, level }) => (\n        <div\n          className=\"tree-item-row\"\n          style={{ \"--tree-item-depth\": level - 1 } as CSSProperties}\n        >\n          {hasChildItems ? (\n            <Button slot=\"chevron\" className=\"tree-item-chevron\">\n              <IconChevronRight size=\"16\" />\n            </Button>\n          ) : (\n            <span className=\"tree-item-chevron-spacer\" aria-hidden=\"true\" />\n          )}\n          {children}\n        </div>\n      )}\n    </RACTreeItemContent>\n  );\n}\n"],"names":["hasExpandableChildren","node","Tree","className","items","renderItem","isNodeLoading","onItemAction","dependencies","props","renderNode","jsxs","RACTreeItem","jsx","TreeItemContent","Collection","IconLoader","RACTree","clsx","children","RACTreeItemContent","hasChildItems","level","Button","IconChevronRight"],"mappings":";;;;;;AAiCA,SAASA,EAAyBC,GAA4B;AAC5D,SAAOA,EAAK,iBAAiB,GAAQA,EAAK,YAAYA,EAAK,SAAS,SAAS;AAC/E;AAEO,SAASC,EAAQ;AAAA,EACtB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,WAASC,EAAWT,GAA8B;AAChD,WACE,gBAAAU;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,IAAIX,EAAK;AAAA,QACT,WAAWA,EAAK;AAAA,QAChB,eAAeD,EAAsBC,CAAI;AAAA,QACzC,WAAU;AAAA,QACV,UAAUM,IAAe,MAAMA,EAAaN,CAAI,IAAI;AAAA,QAEpD,UAAA;AAAA,UAAA,gBAAAY,EAACC,GAAA,EAAiB,UAAAT,EAAWJ,CAAI,EAAA,CAAE;AAAA,UAClCA,EAAK,YAAYA,EAAK,SAAS,SAAS,KACvC,gBAAAY,EAACE,GAAA,EAAW,OAAOd,EAAK,UAAU,cAAAO,GAC/B,UAAAE,GACH;AAAA,YAEAJ,KAAA,gBAAAA,EAAgBL,EAAK,QAAO,OAC5B,gBAAAY,EAACD,GAAA,EAAY,IAAI,GAAGX,EAAK,EAAE,aAAa,WAAU,WAAU,YAAU,IAAC,WAAU,aAC/E,UAAA,gBAAAY,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACG,GAAA,EAAW,MAAK,MAAK,WAAU,yBAAA,CAAyB,EAAA,CAC3D,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AAEA,SACE,gBAAAH,EAACI,GAAA,EAAQ,OAAAb,GAAc,WAAWc,EAAKf,GAAW,MAAM,GAAG,cAAAK,GAA6B,GAAGC,GACxF,UAAAC,EAAA,CACH;AAEJ;AAMA,SAASI,EAAgB,EAAE,UAAAK,KAAkC;AAC3D,2BACGC,GAAA,EACE,UAAA,CAAC,EAAE,eAAAC,GAAe,OAAAC,QACjB,gBAAAX;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,qBAAqBW,IAAQ,EAAA;AAAA,MAErC,UAAA;AAAA,QAAAD,sBACEE,GAAA,EAAO,MAAK,WAAU,WAAU,qBAC/B,UAAA,gBAAAV,EAACW,GAAA,EAAiB,MAAK,KAAA,CAAK,GAC9B,IAEA,gBAAAX,EAAC,UAAK,WAAU,4BAA2B,eAAY,QAAO;AAAA,QAE/DM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGP;AAEJ;"}
+{"version":3,"file":"Tree.js","sources":["../../../../../src/ui/primitives/Tree/Tree.tsx"],"sourcesContent":["import type { CSSProperties, Key, ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { IconChevronRight } from \"icons\";\nimport { BrandLoader } from \"primitives\";\nimport {\n  Button,\n  Collection,\n  Tree as RACTree,\n  TreeItem as RACTreeItem,\n  TreeItemContent as RACTreeItemContent,\n  type TreeProps as RACTreeProps,\n} from \"react-aria-components\";\nimport \"./tree.css\";\n\nexport interface TreeNode<T = unknown> {\n  id: string;\n  label: string;\n  data?: T;\n  /** Signals a node has children before they are fetched, so the chevron renders ahead of a lazy load. */\n  hasChildItems?: boolean;\n  /** `undefined` = not loaded yet, `[]` = loaded and empty. */\n  children?: TreeNode<T>[];\n}\n\nexport type TreeProps<T> = Omit<\n  RACTreeProps<TreeNode<T>>,\n  \"children\" | \"items\"\n> & {\n  items: TreeNode<T>[];\n  renderItem: (node: TreeNode<T>) => ReactNode;\n  isNodeLoading?: (id: Key) => boolean;\n  onItemAction?: (node: TreeNode<T>) => void;\n};\n\nfunction hasExpandableChildren<T>(node: TreeNode<T>): boolean {\n  return node.hasChildItems ?? Boolean(node.children && node.children.length > 0);\n}\n\nfunction loadingNodeIdsOf<T>(nodes: TreeNode<T>[], isNodeLoading: (id: Key) => boolean): string[] {\n  return nodes.flatMap((node) => [\n    ...(isNodeLoading(node.id) ? [node.id] : []),\n    ...loadingNodeIdsOf(node.children ?? [], isNodeLoading),\n  ]);\n}\n\nexport function Tree<T>({\n  className,\n  items,\n  renderItem,\n  isNodeLoading,\n  onItemAction,\n  dependencies,\n  ...props\n}: TreeProps<T>) {\n  const loadingNodesSignature = isNodeLoading\n    ? JSON.stringify(loadingNodeIdsOf(items, isNodeLoading))\n    : \"\";\n  const itemDependencies = [...(dependencies ?? []), loadingNodesSignature];\n\n  function renderNode(node: TreeNode<T>): ReactNode {\n    return (\n      <RACTreeItem\n        id={node.id}\n        textValue={node.label}\n        hasChildItems={hasExpandableChildren(node)}\n        className=\"tree-item\"\n        onAction={onItemAction ? () => onItemAction(node) : undefined}\n      >\n        <TreeItemContent>{renderItem(node)}</TreeItemContent>\n        {node.children && node.children.length > 0 && (\n          <Collection items={node.children} dependencies={itemDependencies}>\n            {renderNode}\n          </Collection>\n        )}\n        {(isNodeLoading?.(node.id) ?? false) && (\n          <RACTreeItem id={`${node.id}::loading`} textValue=\"Loading\" isDisabled className=\"tree-item\">\n            <TreeItemContent>\n              <BrandLoader aria-hidden variant=\"pulse\" size=\"16\" tone=\"brand\" />\n            </TreeItemContent>\n          </RACTreeItem>\n        )}\n      </RACTreeItem>\n    );\n  }\n\n  return (\n    <RACTree items={items} className={clsx(className, \"tree\")} dependencies={itemDependencies} {...props}>\n      {renderNode}\n    </RACTree>\n  );\n}\n\ninterface TreeItemContentProps {\n  children: ReactNode;\n}\n\nfunction TreeItemContent({ children }: TreeItemContentProps) {\n  return (\n    <RACTreeItemContent>\n      {({ hasChildItems, level }) => (\n        <div\n          className=\"tree-item-row\"\n          style={{ \"--tree-item-depth\": level - 1 } as CSSProperties}\n        >\n          {hasChildItems ? (\n            <Button slot=\"chevron\" className=\"tree-item-chevron\">\n              <IconChevronRight size=\"16\" />\n            </Button>\n          ) : (\n            <span className=\"tree-item-chevron-spacer\" aria-hidden=\"true\" />\n          )}\n          {children}\n        </div>\n      )}\n    </RACTreeItemContent>\n  );\n}\n"],"names":["hasExpandableChildren","node","loadingNodeIdsOf","nodes","isNodeLoading","Tree","className","items","renderItem","onItemAction","dependencies","props","loadingNodesSignature","itemDependencies","renderNode","jsxs","RACTreeItem","jsx","TreeItemContent","Collection","BrandLoader","RACTree","clsx","children","RACTreeItemContent","hasChildItems","level","Button","IconChevronRight"],"mappings":";;;;;;AAkCA,SAASA,EAAyBC,GAA4B;AAC5D,SAAOA,EAAK,iBAAiB,GAAQA,EAAK,YAAYA,EAAK,SAAS,SAAS;AAC/E;AAEA,SAASC,EAAoBC,GAAsBC,GAA+C;AAChG,SAAOD,EAAM,QAAQ,CAACF,MAAS;AAAA,IAC7B,GAAIG,EAAcH,EAAK,EAAE,IAAI,CAACA,EAAK,EAAE,IAAI,CAAA;AAAA,IACzC,GAAGC,EAAiBD,EAAK,YAAY,CAAA,GAAIG,CAAa;AAAA,EAAA,CACvD;AACH;AAEO,SAASC,EAAQ;AAAA,EACtB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAJ;AAAA,EACA,cAAAK;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAwBR,IAC1B,KAAK,UAAUF,EAAiBK,GAAOH,CAAa,CAAC,IACrD,IACES,IAAmB,CAAC,GAAIH,KAAgB,CAAA,GAAKE,CAAqB;AAExE,WAASE,EAAWb,GAA8B;AAChD,WACE,gBAAAc;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,IAAIf,EAAK;AAAA,QACT,WAAWA,EAAK;AAAA,QAChB,eAAeD,EAAsBC,CAAI;AAAA,QACzC,WAAU;AAAA,QACV,UAAUQ,IAAe,MAAMA,EAAaR,CAAI,IAAI;AAAA,QAEpD,UAAA;AAAA,UAAA,gBAAAgB,EAACC,GAAA,EAAiB,UAAAV,EAAWP,CAAI,EAAA,CAAE;AAAA,UAClCA,EAAK,YAAYA,EAAK,SAAS,SAAS,KACvC,gBAAAgB,EAACE,GAAA,EAAW,OAAOlB,EAAK,UAAU,cAAcY,GAC7C,UAAAC,GACH;AAAA,YAEAV,KAAA,gBAAAA,EAAgBH,EAAK,QAAO,OAC5B,gBAAAgB,EAACD,GAAA,EAAY,IAAI,GAAGf,EAAK,EAAE,aAAa,WAAU,WAAU,YAAU,IAAC,WAAU,aAC/E,UAAA,gBAAAgB,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACG,KAAY,eAAW,IAAC,SAAQ,SAAQ,MAAK,MAAK,MAAK,QAAA,CAAQ,GAClE,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AAEA,SACE,gBAAAH,EAACI,GAAA,EAAQ,OAAAd,GAAc,WAAWe,EAAKhB,GAAW,MAAM,GAAG,cAAcO,GAAmB,GAAGF,GAC5F,UAAAG,EAAA,CACH;AAEJ;AAMA,SAASI,EAAgB,EAAE,UAAAK,KAAkC;AAC3D,2BACGC,GAAA,EACE,UAAA,CAAC,EAAE,eAAAC,GAAe,OAAAC,QACjB,gBAAAX;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,qBAAqBW,IAAQ,EAAA;AAAA,MAErC,UAAA;AAAA,QAAAD,sBACEE,GAAA,EAAO,MAAK,WAAU,WAAU,qBAC/B,UAAA,gBAAAV,EAACW,GAAA,EAAiB,MAAK,KAAA,CAAK,GAC9B,IAEA,gBAAAX,EAAC,UAAK,WAAU,4BAA2B,eAAY,QAAO;AAAA,QAE/DM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGP;AAEJ;"}

package/dist/types/ui/components/DataTable/DataTable.d.ts

@@ -14,7 +14,15 @@ export interface Column<T> {
     sortValue?: (item: T) => SortableValue;
 }
 type SortableValue = string | number | Date | null | undefined;
-export interface RowActionDef<T> {
+type RowActionPendingProps = {
+    isPending?: false;
+    pendingLabel?: string;
+} | {
+    isPending: boolean;
+    /** Tooltip text shown while `isPending`. */
+    pendingLabel: string;
+};
+export type RowActionDef<T> = RowActionPendingProps & {
     /** Unique key for this action. */
     key: string;
     /** aria-label for the button. */
@@ -27,8 +35,8 @@ export interface RowActionDef<T> {
     noAccessLabel?: string;
     /** Called with the row item when the button is pressed. */
     onPress: (item: T) => void;
-}
-export interface DataTableProps<T extends {
+};
+interface DataTableBaseProps<T extends {
     id: string;
 }> {
     columns: Column<T>[];
@@ -72,22 +80,37 @@ export interface DataTableProps<T extends {
     maxHeight?: number | string;
     searchPlaceholder?: string;
     searchKeys?: (keyof T)[];
-    isLoading?: boolean;
-    loadingMessage?: string;
     emptyMessage?: string;
     previousLabel?: string;
     nextLabel?: string;
     pageSize?: number;
     nestedColumns?: Column<any>[];
-    getNestedData?: (item: T) => any[] | Promise<any[]>;
-    nestedLoadingMessage?: string;
     nestedEmptyMessage?: string;
     nestedSearchKeys?: (keyof any)[];
     nestedSearchPlaceholder?: string;
     nestedActions?: (item: T) => ReactNode;
     nestedPageSize?: number;
 }
+type DataTableLoadingProps = {
+    isLoading?: false;
+    isRefreshing?: false;
+    loadingMessage?: string;
+} | {
+    isLoading?: boolean;
+    isRefreshing?: boolean;
+    loadingMessage: string;
+};
+type DataTableNestedLoadingProps<T> = {
+    getNestedData?: undefined;
+    nestedLoadingMessage?: string;
+} | {
+    getNestedData: (item: T) => any[] | Promise<any[]>;
+    nestedLoadingMessage: string;
+};
+export type DataTableProps<T extends {
+    id: string;
+}> = DataTableBaseProps<T> & DataTableLoadingProps & DataTableNestedLoadingProps<T>;
 export declare function DataTable<T extends {
     id: string;
-}>({ columns, data, actions, rowActions, rowActionsLabel, selectable, selectionType, selectedKeys, onSelectionChange, defaultSortDescriptor, sortDescriptor: controlledSortDescriptor, onSortChange, ariaLabel, dense, striped, maxHeight, searchPlaceholder, searchKeys, isLoading, loadingMessage, emptyMessage, previousLabel, nextLabel, pageSize, nestedColumns, getNestedData, nestedLoadingMessage, nestedEmptyMessage, nestedSearchKeys, nestedSearchPlaceholder, nestedActions, nestedPageSize, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+}>({ columns, data, actions, rowActions, rowActionsLabel, selectable, selectionType, selectedKeys, onSelectionChange, defaultSortDescriptor, sortDescriptor: controlledSortDescriptor, onSortChange, ariaLabel, dense, striped, maxHeight, searchPlaceholder, searchKeys, isLoading, isRefreshing, loadingMessage, emptyMessage, previousLabel, nextLabel, pageSize, nestedColumns, getNestedData, nestedLoadingMessage, nestedEmptyMessage, nestedSearchKeys, nestedSearchPlaceholder, nestedActions, nestedPageSize, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/ui/components/LoadingOverlay/LoadingOverlay.d.ts

@@ -0,0 +1,13 @@
+import { type BrandLoaderSize, type BrandLoaderVariant } from "primitives";
+import "./loading-overlay.css";
+export type LoadingOverlayProps = {
+    isOpen: boolean;
+    label: string;
+    message?: string;
+    variant?: BrandLoaderVariant;
+    size?: BrandLoaderSize;
+    delayMs?: number;
+    minVisibleMs?: number;
+    className?: string;
+};
+export declare function LoadingOverlay({ isOpen, label, message, variant, size, delayMs, minVisibleMs, className, }: LoadingOverlayProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/components/PageLoadingState/PageLoadingState.d.ts

@@ -0,0 +1,4 @@
+import { type LoadingStateProps } from "primitives";
+import "./page-loading-state.css";
+export type PageLoadingStateProps = Omit<LoadingStateProps, "size">;
+export declare function PageLoadingState({ className, ...props }: PageLoadingStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/components/index.d.ts

@@ -5,10 +5,11 @@ export * from "./ConfirmDialog/ConfirmDialog";
 export * from "./DataTable/DataTable";
 export * from "./FormModal/FormModal";
 export * from "./KeyValue/KeyValue";
+export * from "./LoadingOverlay/LoadingOverlay";
 export * from "./PageHeader/PageHeader";
+export * from "./PageLoadingState/PageLoadingState";
 export * from "./Sidebar/Sidebar";
 export * from "./Widget/Widget";
 export * from "./WidgetEmptyState/WidgetEmptyState";
 export * from "./WidgetErrorState/WidgetErrorState";
 export * from "./WidgetGrid/WidgetGrid";
-export * from "./WidgetLoadingState/WidgetLoadingState";

package/dist/types/ui/hooks/index.d.ts

@@ -1,2 +1,3 @@
+export * from "./useLoadingVisibility";
 export * from "./useMediaQuery";
 export * from "./useOverlayPortal";

package/dist/types/ui/hooks/useAnimationFrame.d.ts

@@ -0,0 +1,3 @@
+type FrameSubscriber = (now: number) => void;
+export declare function useAnimationFrame(onFrame: FrameSubscriber, isEnabled?: boolean): void;
+export {};

package/dist/types/ui/hooks/useLoadingVisibility.d.ts

@@ -0,0 +1,7 @@
+export type LoadingVisibilityOptions = {
+    delayMs?: number;
+    minVisibleMs?: number;
+};
+export declare const defaultLoadingDelayMs = 200;
+export declare const defaultLoadingMinVisibleMs = 400;
+export declare function useLoadingVisibility(isLoading: boolean, { delayMs, minVisibleMs, }?: LoadingVisibilityOptions): boolean;

package/dist/types/ui/primitives/BrandLoader/BrandLoader.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentPropsWithoutRef } from "react";
+import { type BrandLoaderVariant } from "./brandLoaderVariants";
+import { type BrandLoaderSymbol } from "./brandLoaderSymbolContext";
+import "./brand-loader.css";
+export type { BrandLoaderVariant } from "./brandLoaderVariants";
+export { BrandLoaderProvider, type BrandLoaderProviderProps } from "./BrandLoaderProvider";
+export type { BrandLoaderSymbol } from "./brandLoaderSymbolContext";
+export type BrandLoaderSize = "16" | "24" | "32" | "64";
+export type BrandLoaderTone = "accent" | "brand" | "current";
+type BrandLoaderAccessibilityProps = {
+    label: string;
+    "aria-hidden"?: false;
+} | {
+    label?: undefined;
+    "aria-hidden": true;
+};
+export type BrandLoaderProps = Omit<ComponentPropsWithoutRef<"span">, "children" | "aria-hidden"> & BrandLoaderAccessibilityProps & {
+    variant?: BrandLoaderVariant;
+    size?: BrandLoaderSize;
+    tone?: BrandLoaderTone;
+    speed?: number;
+    isPaused?: boolean;
+    symbol?: BrandLoaderSymbol;
+};
+export declare function BrandLoader({ label, "aria-hidden": isDecorative, variant, size, tone, speed, isPaused, symbol, className, ...props }: BrandLoaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/BrandLoader/BrandLoaderProvider.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+import { type BrandLoaderSymbol } from "./brandLoaderSymbolContext";
+export type BrandLoaderProviderProps = {
+    symbol: BrandLoaderSymbol;
+    children: ReactNode;
+};
+export declare function BrandLoaderProvider({ symbol, children }: BrandLoaderProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/BrandLoader/brandLoaderSymbolContext.d.ts

@@ -0,0 +1,3 @@
+export type BrandLoaderSymbol = "apipass" | "neutral";
+export declare const BrandLoaderSymbolContext: import("react").Context<BrandLoaderSymbol>;
+export declare function useBrandLoaderSymbol(): BrandLoaderSymbol;

package/dist/types/ui/primitives/BrandLoader/brandLoaderVariants.d.ts

@@ -0,0 +1,33 @@
+export type BrandLoaderVariant = "trace" | "bounce" | "assemble" | "comet" | "pulse" | "sweep";
+export type BrandLoaderElements = {
+    strokes: SVGGElement;
+    slash: SVGPathElement;
+    big: SVGPathElement;
+    tri: SVGPathElement;
+    ball: SVGEllipseElement | null;
+    sweepClip: SVGPolygonElement | null;
+    sweepEdge: SVGLineElement | null;
+    lengths: {
+        slash: number;
+        big: number;
+        tri: number;
+    };
+};
+type BrandLoaderVariantDefinition = {
+    period: number;
+    render: (progress: number, elements: BrandLoaderElements) => void;
+    renderRest: (elements: BrandLoaderElements) => void;
+};
+export declare const brandLoaderViewBox = "-4 -4 48 40";
+export declare const brandLoaderPathLengths: {
+    slash: number;
+    big: number;
+    tri: number;
+};
+export declare const brandLoaderSymbolPaths: {
+    slash: string;
+    big: string;
+    tri: string;
+};
+export declare const brandLoaderVariants: Record<BrandLoaderVariant, BrandLoaderVariantDefinition>;
+export {};

package/dist/types/ui/primitives/Button/Button.d.ts

@@ -18,6 +18,7 @@ export declare const ButtonDanger: React.ForwardRefExoticComponent<Omit<ButtonBa
 } & React.RefAttributes<HTMLElement>>;
 type ButtonBaseProps = {
     type?: ComponentPropsWithoutRef<"button">["type"];
+    isPending?: boolean;
     size?: "small" | "medium";
     variant?: "primary" | "neutral" | "subtle" | "text" | "danger-primary" | "danger-subtle";
 } & AnchorOrButtonProps;

package/dist/types/ui/primitives/DateRangePicker/DateRangePicker.d.ts

@@ -1,5 +1,5 @@
 import { type DateValue } from "@internationalized/date";
-import { type DateRangePresetKey } from "./dateRangePresets";
+import { type DateRangePresetKey, type FirstDayOfWeek } from "./dateRangePresets";
 import "./daterangepicker.css";
 export interface DateRangePreset {
     id: string;
@@ -38,10 +38,11 @@ export interface DateRangePickerProps {
     minValue?: DateValue;
     maxValue?: DateValue;
     timezone?: string;
+    firstDayOfWeek?: FirstDayOfWeek;
     isDisabled?: boolean;
     isRequired?: boolean;
     value?: DateRangePickerValue;
     defaultValue?: DateRangePickerValue;
     onChange?: (value: DateRangePickerValue) => void;
 }
-export declare function DateRangePicker({ className, locale: localeProp, label, "aria-label": ariaLabel, description, errorMessage, labels, intervals: intervalsProp, presetKeys, presetLabels, hideTime, minValue, maxValue, timezone: timezoneProp, isDisabled, isRequired, value, defaultValue, onChange, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateRangePicker({ className, locale: localeProp, label, "aria-label": ariaLabel, description, errorMessage, labels, intervals: intervalsProp, presetKeys, presetLabels, hideTime, minValue, maxValue, timezone: timezoneProp, firstDayOfWeek, isDisabled, isRequired, value, defaultValue, onChange, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/DateRangePicker/dateRangePresets.d.ts

@@ -1,10 +1,15 @@
 import type { DateRangePreset } from "./DateRangePicker";
 export type DateRangePresetKey = "last5m" | "last15m" | "last30m" | "last1h" | "last3h" | "last6h" | "last12h" | "last24h" | "today" | "yesterday" | "last7d" | "last30d" | "thisWeek" | "lastWeek" | "thisMonth" | "lastMonth" | "thisYear" | "lastYear";
 export declare const DATE_RANGE_PRESET_ORDER: DateRangePresetKey[];
+export type FirstDayOfWeek = "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";
+export declare const DEFAULT_DATE_RANGE_PRESET_TIMEZONE: string;
+export declare const DEFAULT_FIRST_DAY_OF_WEEK: FirstDayOfWeek;
 export interface CreateDateRangePresetsOptions {
     labels: Record<DateRangePresetKey, string>;
     timezone?: string;
+    /** @deprecated Sem efeito desde a CONSOLE-1892: o início da semana vem de `firstDayOfWeek`. */
     locale?: string;
+    firstDayOfWeek?: FirstDayOfWeek;
     include?: DateRangePresetKey[];
 }
 export declare function createDateRangePresets(options: CreateDateRangePresetsOptions): DateRangePreset[];

package/dist/types/ui/primitives/LoadingState/LoadingState.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef } from "react";
+import { type BrandLoaderSize, type BrandLoaderVariant } from "../BrandLoader/BrandLoader";
+import "./loading-state.css";
+export type LoadingStateProps = ComponentPropsWithoutRef<"div"> & {
+    message: string;
+    variant?: BrandLoaderVariant;
+    size?: BrandLoaderSize;
+    delayMs?: number;
+};
+export declare function LoadingState({ message, variant, size, delayMs, className, ...props }: LoadingStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/PermissionGate/PermissionGate.d.ts

@@ -1,15 +1,24 @@
 import React from "react";
-export interface PermissionGateProps {
+type PermissionGatePendingProps = {
+    isPending?: false;
+    pendingLabel?: string;
+} | {
+    isPending: boolean;
+    /** Tooltip text shown while `isPending`. */
+    pendingLabel: string;
+};
+export type PermissionGateProps = PermissionGatePendingProps & {
     /** Whether the current user has permission to perform this action. */
     isAllowed: boolean;
     /** Tooltip text shown when the action is not allowed. */
     noAccessLabel: string;
     /**
-     * Either a React element or a render prop that receives `isAllowed`.
-     * Use the render prop to avoid repeating the permission check inside the child.
+     * Either a React element or a render prop that receives `isAllowed` and `isPending`.
+     * Use the render prop to avoid repeating the permission check inside the child, e.g.
+     * `{(allowed, pending) => <Button isDisabled={!allowed && !pending} isPending={pending}>…</Button>}`.
      */
-    children: React.ReactElement | ((isAllowed: boolean) => React.ReactElement);
-}
+    children: React.ReactElement | ((isAllowed: boolean, isPending: boolean) => React.ReactElement);
+};
 /**
  * Wraps any interactive element with a tooltip that appears when `isAllowed` is false.
  *
@@ -37,4 +46,5 @@ export interface PermissionGateProps {
  * seguro — é onde o `DataTable` põe o gate nas ações de linha. O `Menu` avisa no
  * console em desenvolvimento se o gate aparecer em volta de um item.
  */
-export declare function PermissionGate({ isAllowed, noAccessLabel, children, }: PermissionGateProps): import("react/jsx-runtime").JSX.Element;
+export declare function PermissionGate({ isAllowed, noAccessLabel, isPending, pendingLabel, children, }: PermissionGateProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/ui/primitives/index.d.ts

@@ -3,6 +3,7 @@ export * from "./Alert/Alert";
 export * from "./CodeBlock/CodeBlock";
 export * from "./CodeEditor/CodeEditor";
 export * from "./Avatar/Avatar";
+export * from "./BrandLoader/BrandLoader";
 export * from "./Button/Button";
 export * from "./Checkbox/Checkbox";
 export * from "./ComboBox/ComboBox";
@@ -18,6 +19,7 @@ export * from "./Image/Image";
 export * from "./Input/Input";
 export * from "./Link/Link";
 export * from "./ListBox/ListBox";
+export * from "./LoadingState/LoadingState";
 export * from "./Logo/Logo";
 export * from "./Menu/Menu";
 export * from "./Navigation/Navigation";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apipass/design-system",
-  "version": "7.4.7",
+  "version": "8.1.0",
   "type": "module",
   "description": "APIPass React Design System",
   "sideEffects": [
@@ -58,6 +58,7 @@
     "build:lib": "tsc -p tsconfig.lib.json && vite build --config vite.lib.config.ts && node scripts/gen-embedded-styles.mjs",
     "app:dev": "vite",
     "app:build": "tsc && vite build",
+    "app:test": "vitest run",
     "app:lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "app:preview": "vite preview",
     "storybook:install": "npm ci",
@@ -152,6 +153,7 @@
     "react-dom": "^18.2.0",
     "storybook": "^10.3.4",
     "typescript": "^5.0.2",
-    "vite": "^6.3.5"
+    "vite": "^6.3.5",
+    "vitest": "^3.2.7"
   }
 }

package/dist/lib/ui/components/WidgetLoadingState/WidgetLoadingState.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../../vendor/clsx/dist/clsx.cjs");;/* empty css                           */const n=require("../../icons/IconLoader.cjs");function r({message:t,className:s,...i}){return e.jsxs("div",{role:"status","aria-live":"polite",className:a.clsx("widget-loading-state",s),...i,children:[e.jsx(n.IconLoader,{size:"24",className:"widget-loading-state-spinner"}),e.jsx("span",{className:"widget-loading-state-message",children:t})]})}exports.WidgetLoadingState=r;
-//# sourceMappingURL=WidgetLoadingState.cjs.map

package/dist/lib/ui/components/WidgetLoadingState/WidgetLoadingState.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"WidgetLoadingState.cjs","sources":["../../../../../src/ui/components/WidgetLoadingState/WidgetLoadingState.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef } from \"react\";\nimport { IconLoader } from \"icons\";\nimport \"./widget-loading-state.css\";\n\nexport type WidgetLoadingStateProps = ComponentPropsWithoutRef<\"div\"> & {\n  message: string;\n};\n\nexport function WidgetLoadingState({\n  message,\n  className,\n  ...props\n}: WidgetLoadingStateProps) {\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      className={clsx(\"widget-loading-state\", className)}\n      {...props}\n    >\n      <IconLoader size=\"24\" className=\"widget-loading-state-spinner\" />\n      <span className=\"widget-loading-state-message\">{message}</span>\n    </div>\n  );\n}\n"],"names":["WidgetLoadingState","message","className","props","jsxs","clsx","jsx","IconLoader"],"mappings":"6PASO,SAASA,EAAmB,CACjC,QAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EAA4B,CAC1B,OACEC,EAAAA,KAAC,MAAA,CACC,KAAK,SACL,YAAU,SACV,UAAWC,EAAAA,KAAK,uBAAwBH,CAAS,EAChD,GAAGC,EAEJ,SAAA,CAAAG,EAAAA,IAACC,EAAAA,WAAA,CAAW,KAAK,KAAK,UAAU,+BAA+B,EAC/DD,EAAAA,IAAC,OAAA,CAAK,UAAU,+BAAgC,SAAAL,CAAA,CAAQ,CAAA,CAAA,CAAA,CAG9D"}

package/dist/lib/ui/components/WidgetLoadingState/WidgetLoadingState.js

@@ -1,27 +0,0 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { clsx as o } from "../../../vendor/clsx/dist/clsx.js";
-/* empty css                         */
-import { IconLoader as r } from "../../icons/IconLoader.js";
-function g({
-  message: t,
-  className: i,
-  ...a
-}) {
-  return /* @__PURE__ */ s(
-    "div",
-    {
-      role: "status",
-      "aria-live": "polite",
-      className: o("widget-loading-state", i),
-      ...a,
-      children: [
-        /* @__PURE__ */ e(r, { size: "24", className: "widget-loading-state-spinner" }),
-        /* @__PURE__ */ e("span", { className: "widget-loading-state-message", children: t })
-      ]
-    }
-  );
-}
-export {
-  g as WidgetLoadingState
-};
-//# sourceMappingURL=WidgetLoadingState.js.map

package/dist/lib/ui/components/WidgetLoadingState/WidgetLoadingState.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"WidgetLoadingState.js","sources":["../../../../../src/ui/components/WidgetLoadingState/WidgetLoadingState.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef } from \"react\";\nimport { IconLoader } from \"icons\";\nimport \"./widget-loading-state.css\";\n\nexport type WidgetLoadingStateProps = ComponentPropsWithoutRef<\"div\"> & {\n  message: string;\n};\n\nexport function WidgetLoadingState({\n  message,\n  className,\n  ...props\n}: WidgetLoadingStateProps) {\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      className={clsx(\"widget-loading-state\", className)}\n      {...props}\n    >\n      <IconLoader size=\"24\" className=\"widget-loading-state-spinner\" />\n      <span className=\"widget-loading-state-message\">{message}</span>\n    </div>\n  );\n}\n"],"names":["WidgetLoadingState","message","className","props","jsxs","clsx","jsx","IconLoader"],"mappings":";;;;AASO,SAASA,EAAmB;AAAA,EACjC,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAA4B;AAC1B,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,WAAWC,EAAK,wBAAwBH,CAAS;AAAA,MAChD,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAG,EAACC,GAAA,EAAW,MAAK,MAAK,WAAU,gCAA+B;AAAA,QAC/D,gBAAAD,EAAC,QAAA,EAAK,WAAU,gCAAgC,UAAAL,EAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9D;"}

package/dist/types/ui/components/WidgetLoadingState/WidgetLoadingState.d.ts

@@ -1,6 +0,0 @@
-import { type ComponentPropsWithoutRef } from "react";
-import "./widget-loading-state.css";
-export type WidgetLoadingStateProps = ComponentPropsWithoutRef<"div"> & {
-    message: string;
-};
-export declare function WidgetLoadingState({ message, className, ...props }: WidgetLoadingStateProps): import("react/jsx-runtime").JSX.Element;