@apipass/design-system 7.4.7 → 8.0.0

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

@@ -0,0 +1,33 @@
+import { jsx as i, jsxs as l, Fragment as d } from "react/jsx-runtime";
+import { clsx as m } from "../../../vendor/clsx/dist/clsx.js";
+import { BrandLoader as c } from "../BrandLoader/BrandLoader.js";
+/* empty css                  */
+import { useLoadingVisibility as p, defaultLoadingDelayMs as u } from "../../hooks/useLoadingVisibility.js";
+function L({
+  message: a,
+  variant: e = "trace",
+  size: r = "32",
+  delayMs: t = u,
+  className: o,
+  ...s
+}) {
+  const n = p(!0, { delayMs: t, minVisibleMs: 0 });
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": a,
+      className: m("loading-state", o),
+      ...s,
+      children: n && /* @__PURE__ */ l(d, { children: [
+        /* @__PURE__ */ i(c, { "aria-hidden": !0, variant: e, size: r, tone: "brand" }),
+        /* @__PURE__ */ i("span", { className: "loading-state-message", children: a })
+      ] })
+    }
+  );
+}
+export {
+  L as LoadingState
+};
+//# sourceMappingURL=LoadingState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.js","sources":["../../../../../src/ui/primitives/LoadingState/LoadingState.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { defaultLoadingDelayMs, useLoadingVisibility } from \"hooks\";\nimport { type ComponentPropsWithoutRef } from \"react\";\nimport {\n  BrandLoader,\n  type BrandLoaderSize,\n  type BrandLoaderVariant,\n} from \"../BrandLoader/BrandLoader\";\nimport \"./loading-state.css\";\n\nexport type LoadingStateProps = ComponentPropsWithoutRef<\"div\"> & {\n  message: string;\n  variant?: BrandLoaderVariant;\n  size?: BrandLoaderSize;\n  delayMs?: number;\n};\n\nexport function LoadingState({\n  message,\n  variant = \"trace\",\n  size = \"32\",\n  delayMs = defaultLoadingDelayMs,\n  className,\n  ...props\n}: LoadingStateProps) {\n  const isVisible = useLoadingVisibility(true, { delayMs, minVisibleMs: 0 });\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={message}\n      className={clsx(\"loading-state\", className)}\n      {...props}\n    >\n      {isVisible && (\n        <>\n          <BrandLoader aria-hidden variant={variant} size={size} tone=\"brand\" />\n          <span className=\"loading-state-message\">{message}</span>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["LoadingState","message","variant","size","delayMs","defaultLoadingDelayMs","className","props","isVisible","useLoadingVisibility","jsx","clsx","jsxs","Fragment","BrandLoader"],"mappings":";;;;;AAiBO,SAASA,EAAa;AAAA,EAC3B,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAUC;AAAA,EACV,WAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAYC,EAAqB,IAAM,EAAE,SAAAL,GAAS,cAAc,GAAG;AAEzE,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAYT;AAAA,MACZ,WAAWU,EAAK,iBAAiBL,CAAS;AAAA,MACzC,GAAGC;AAAA,MAEH,eACC,gBAAAK,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAH,EAACI,KAAY,eAAW,IAAC,SAAAZ,GAAkB,MAAAC,GAAY,MAAK,SAAQ;AAAA,QACpE,gBAAAO,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAT,EAAA,CAAQ;AAAA,MAAA,EAAA,CACnD;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/lib/ui/primitives/PermissionGate/PermissionGate.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),r=require("../Tooltip/Tooltip.cjs");function s({isAllowed:t,noAccessLabel:o,children:e}){const n=typeof e=="function"?e(t):e;return t?n:i.jsx(r.Tooltip,{content:o,trigger:"hover",placement:"top",offset:4,children:i.jsx("span",{style:{display:"inline-flex"},children:n})})}exports.PermissionGate=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("../Tooltip/Tooltip.cjs");function a({isAllowed:s,noAccessLabel:l,isPending:t=!1,pendingLabel:c,children:e}){const r=s&&!t,o=typeof e=="function"?e(r,t):e;if(r)return o;const n=t?c:l;return n?i.jsx(u.Tooltip,{content:n,trigger:"hover",placement:"top",offset:4,children:i.jsx("span",{style:{display:"inline-flex"},children:o})}):o}exports.PermissionGate=a;
 //# sourceMappingURL=PermissionGate.cjs.map

package/dist/lib/ui/primitives/PermissionGate/PermissionGate.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PermissionGate.cjs","sources":["../../../../../src/ui/primitives/PermissionGate/PermissionGate.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\n\nexport interface PermissionGateProps {\n  /** Whether the current user has permission to perform this action. */\n  isAllowed: boolean;\n  /** Tooltip text shown when the action is not allowed. */\n  noAccessLabel: string;\n  /**\n   * Either a React element or a render prop that receives `isAllowed`.\n   * Use the render prop to avoid repeating the permission check inside the child.\n   */\n  children: React.ReactElement | ((isAllowed: boolean) => React.ReactElement);\n}\n\n/**\n * Wraps any interactive element with a tooltip that appears when `isAllowed` is false.\n *\n * When allowed, renders the trigger directly with no wrapper.\n * When not allowed, wraps in a DS Tooltip with hover trigger.\n * A `<span>` wrapper ensures disabled elements still receive pointer events.\n *\n * Dentro de coleções do react-aria-components (`Menu`, `ListBox`, `Table`,\n * `Tree`) o gate vai NO CONTEÚDO do nó, nunca em volta dele:\n *\n * ```tsx\n * // ERRADO — o react-aria descarta esse item e os seguintes, e o menu abre\n * // vazio se ele for o primeiro. Sem erro no console.\n * <PermissionGate …><MenuItem>…</MenuItem></PermissionGate>\n *\n * // CERTO\n * <MenuItem isDisabled={!allowed}>\n *   <PermissionGate …><span>…</span></PermissionGate>\n * </MenuItem>\n * ```\n *\n * O collection builder só reconhece nós de coleção; o `<span>` do ramo negado\n * entra na coleção com `node` nulo e quebra a lista encadeada de chaves. Já o\n * conteúdo de um nó é renderizado no DOM real, fora da coleção, e por isso é\n * seguro — é onde o `DataTable` põe o gate nas ações de linha. O `Menu` avisa no\n * console em desenvolvimento se o gate aparecer em volta de um item.\n */\nexport function PermissionGate({\n  isAllowed,\n  noAccessLabel,\n  children,\n}: PermissionGateProps) {\n  const trigger =\n    typeof children === \"function\" ? children(isAllowed) : children;\n\n  if (isAllowed) {\n    return trigger;\n  }\n\n  return (\n    <Tooltip content={noAccessLabel} trigger=\"hover\" placement=\"top\" offset={4}>\n      <span style={{ display: \"inline-flex\" }}>{trigger}</span>\n    </Tooltip>\n  );\n}\n"],"names":["PermissionGate","isAllowed","noAccessLabel","children","trigger","Tooltip","jsx"],"mappings":"yJA0CO,SAASA,EAAe,CAC7B,UAAAC,EACA,cAAAC,EACA,SAAAC,CACF,EAAwB,CACtB,MAAMC,EACJ,OAAOD,GAAa,WAAaA,EAASF,CAAS,EAAIE,EAEzD,OAAIF,EACKG,QAINC,UAAA,CAAQ,QAASH,EAAe,QAAQ,QAAQ,UAAU,MAAM,OAAQ,EACvE,SAAAI,MAAC,QAAK,MAAO,CAAE,QAAS,aAAA,EAAkB,WAAQ,EACpD,CAEJ"}
+{"version":3,"file":"PermissionGate.cjs","sources":["../../../../../src/ui/primitives/PermissionGate/PermissionGate.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\n\ntype PermissionGatePendingProps =\n  | { isPending?: false; pendingLabel?: string }\n  | {\n      isPending: boolean;\n      /** Tooltip text shown while `isPending`. */\n      pendingLabel: string;\n    };\n\nexport type PermissionGateProps = PermissionGatePendingProps & {\n  /** Whether the current user has permission to perform this action. */\n  isAllowed: boolean;\n  /** Tooltip text shown when the action is not allowed. */\n  noAccessLabel: string;\n  /**\n   * Either a React element or a render prop that receives `isAllowed` and `isPending`.\n   * Use the render prop to avoid repeating the permission check inside the child, e.g.\n   * `{(allowed, pending) => <Button isDisabled={!allowed && !pending} isPending={pending}>…</Button>}`.\n   */\n  children:\n    | React.ReactElement\n    | ((isAllowed: boolean, isPending: boolean) => React.ReactElement);\n};\n\n/**\n * Wraps any interactive element with a tooltip that appears when `isAllowed` is false.\n *\n * When allowed, renders the trigger directly with no wrapper.\n * When not allowed, wraps in a DS Tooltip with hover trigger.\n * A `<span>` wrapper ensures disabled elements still receive pointer events.\n *\n * Dentro de coleções do react-aria-components (`Menu`, `ListBox`, `Table`,\n * `Tree`) o gate vai NO CONTEÚDO do nó, nunca em volta dele:\n *\n * ```tsx\n * // ERRADO — o react-aria descarta esse item e os seguintes, e o menu abre\n * // vazio se ele for o primeiro. Sem erro no console.\n * <PermissionGate …><MenuItem>…</MenuItem></PermissionGate>\n *\n * // CERTO\n * <MenuItem isDisabled={!allowed}>\n *   <PermissionGate …><span>…</span></PermissionGate>\n * </MenuItem>\n * ```\n *\n * O collection builder só reconhece nós de coleção; o `<span>` do ramo negado\n * entra na coleção com `node` nulo e quebra a lista encadeada de chaves. Já o\n * conteúdo de um nó é renderizado no DOM real, fora da coleção, e por isso é\n * seguro — é onde o `DataTable` põe o gate nas ações de linha. O `Menu` avisa no\n * console em desenvolvimento se o gate aparecer em volta de um item.\n */\nexport function PermissionGate({\n  isAllowed,\n  noAccessLabel,\n  isPending = false,\n  pendingLabel,\n  children,\n}: PermissionGateProps) {\n  const isGranted = isAllowed && !isPending;\n  const trigger =\n    typeof children === \"function\" ? children(isGranted, isPending) : children;\n\n  if (isGranted) {\n    return trigger;\n  }\n\n  const tooltipLabel = isPending ? pendingLabel : noAccessLabel;\n  if (!tooltipLabel) {\n    return trigger;\n  }\n\n  return (\n    <Tooltip content={tooltipLabel} trigger=\"hover\" placement=\"top\" offset={4}>\n      <span style={{ display: \"inline-flex\" }}>{trigger}</span>\n    </Tooltip>\n  );\n}\n"],"names":["PermissionGate","isAllowed","noAccessLabel","isPending","pendingLabel","children","isGranted","trigger","tooltipLabel","Tooltip","jsx"],"mappings":"yJAqDO,SAASA,EAAe,CAC7B,UAAAC,EACA,cAAAC,EACA,UAAAC,EAAY,GACZ,aAAAC,EACA,SAAAC,CACF,EAAwB,CACtB,MAAMC,EAAYL,GAAa,CAACE,EAC1BI,EACJ,OAAOF,GAAa,WAAaA,EAASC,EAAWH,CAAS,EAAIE,EAEpE,GAAIC,EACF,OAAOC,EAGT,MAAMC,EAAeL,EAAYC,EAAeF,EAChD,OAAKM,QAKFC,UAAA,CAAQ,QAASD,EAAc,QAAQ,QAAQ,UAAU,MAAM,OAAQ,EACtE,SAAAE,MAAC,QAAK,MAAO,CAAE,QAAS,aAAA,EAAkB,WAAQ,EACpD,EANOH,CAQX"}

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

@@ -1,14 +1,19 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Tooltip as i } from "../Tooltip/Tooltip.js";
-function s({
-  isAllowed: e,
-  noAccessLabel: n,
-  children: t
+import { jsx as i } from "react/jsx-runtime";
+import { Tooltip as l } from "../Tooltip/Tooltip.js";
+function m({
+  isAllowed: f,
+  noAccessLabel: p,
+  isPending: t = !1,
+  pendingLabel: s,
+  children: o
 }) {
-  const o = typeof t == "function" ? t(e) : t;
-  return e ? o : /* @__PURE__ */ r(i, { content: n, trigger: "hover", placement: "top", offset: 4, children: /* @__PURE__ */ r("span", { style: { display: "inline-flex" }, children: o }) });
+  const r = f && !t, e = typeof o == "function" ? o(r, t) : o;
+  if (r)
+    return e;
+  const n = t ? s : p;
+  return n ? /* @__PURE__ */ i(l, { content: n, trigger: "hover", placement: "top", offset: 4, children: /* @__PURE__ */ i("span", { style: { display: "inline-flex" }, children: e }) }) : e;
 }
 export {
-  s as PermissionGate
+  m as PermissionGate
 };
 //# sourceMappingURL=PermissionGate.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PermissionGate.js","sources":["../../../../../src/ui/primitives/PermissionGate/PermissionGate.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\n\nexport interface PermissionGateProps {\n  /** Whether the current user has permission to perform this action. */\n  isAllowed: boolean;\n  /** Tooltip text shown when the action is not allowed. */\n  noAccessLabel: string;\n  /**\n   * Either a React element or a render prop that receives `isAllowed`.\n   * Use the render prop to avoid repeating the permission check inside the child.\n   */\n  children: React.ReactElement | ((isAllowed: boolean) => React.ReactElement);\n}\n\n/**\n * Wraps any interactive element with a tooltip that appears when `isAllowed` is false.\n *\n * When allowed, renders the trigger directly with no wrapper.\n * When not allowed, wraps in a DS Tooltip with hover trigger.\n * A `<span>` wrapper ensures disabled elements still receive pointer events.\n *\n * Dentro de coleções do react-aria-components (`Menu`, `ListBox`, `Table`,\n * `Tree`) o gate vai NO CONTEÚDO do nó, nunca em volta dele:\n *\n * ```tsx\n * // ERRADO — o react-aria descarta esse item e os seguintes, e o menu abre\n * // vazio se ele for o primeiro. Sem erro no console.\n * <PermissionGate …><MenuItem>…</MenuItem></PermissionGate>\n *\n * // CERTO\n * <MenuItem isDisabled={!allowed}>\n *   <PermissionGate …><span>…</span></PermissionGate>\n * </MenuItem>\n * ```\n *\n * O collection builder só reconhece nós de coleção; o `<span>` do ramo negado\n * entra na coleção com `node` nulo e quebra a lista encadeada de chaves. Já o\n * conteúdo de um nó é renderizado no DOM real, fora da coleção, e por isso é\n * seguro — é onde o `DataTable` põe o gate nas ações de linha. O `Menu` avisa no\n * console em desenvolvimento se o gate aparecer em volta de um item.\n */\nexport function PermissionGate({\n  isAllowed,\n  noAccessLabel,\n  children,\n}: PermissionGateProps) {\n  const trigger =\n    typeof children === \"function\" ? children(isAllowed) : children;\n\n  if (isAllowed) {\n    return trigger;\n  }\n\n  return (\n    <Tooltip content={noAccessLabel} trigger=\"hover\" placement=\"top\" offset={4}>\n      <span style={{ display: \"inline-flex\" }}>{trigger}</span>\n    </Tooltip>\n  );\n}\n"],"names":["PermissionGate","isAllowed","noAccessLabel","children","trigger","Tooltip","jsx"],"mappings":";;AA0CO,SAASA,EAAe;AAAA,EAC7B,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AACF,GAAwB;AACtB,QAAMC,IACJ,OAAOD,KAAa,aAAaA,EAASF,CAAS,IAAIE;AAEzD,SAAIF,IACKG,sBAINC,GAAA,EAAQ,SAASH,GAAe,SAAQ,SAAQ,WAAU,OAAM,QAAQ,GACvE,UAAA,gBAAAI,EAAC,UAAK,OAAO,EAAE,SAAS,cAAA,GAAkB,aAAQ,GACpD;AAEJ;"}
+{"version":3,"file":"PermissionGate.js","sources":["../../../../../src/ui/primitives/PermissionGate/PermissionGate.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\n\ntype PermissionGatePendingProps =\n  | { isPending?: false; pendingLabel?: string }\n  | {\n      isPending: boolean;\n      /** Tooltip text shown while `isPending`. */\n      pendingLabel: string;\n    };\n\nexport type PermissionGateProps = PermissionGatePendingProps & {\n  /** Whether the current user has permission to perform this action. */\n  isAllowed: boolean;\n  /** Tooltip text shown when the action is not allowed. */\n  noAccessLabel: string;\n  /**\n   * Either a React element or a render prop that receives `isAllowed` and `isPending`.\n   * Use the render prop to avoid repeating the permission check inside the child, e.g.\n   * `{(allowed, pending) => <Button isDisabled={!allowed && !pending} isPending={pending}>…</Button>}`.\n   */\n  children:\n    | React.ReactElement\n    | ((isAllowed: boolean, isPending: boolean) => React.ReactElement);\n};\n\n/**\n * Wraps any interactive element with a tooltip that appears when `isAllowed` is false.\n *\n * When allowed, renders the trigger directly with no wrapper.\n * When not allowed, wraps in a DS Tooltip with hover trigger.\n * A `<span>` wrapper ensures disabled elements still receive pointer events.\n *\n * Dentro de coleções do react-aria-components (`Menu`, `ListBox`, `Table`,\n * `Tree`) o gate vai NO CONTEÚDO do nó, nunca em volta dele:\n *\n * ```tsx\n * // ERRADO — o react-aria descarta esse item e os seguintes, e o menu abre\n * // vazio se ele for o primeiro. Sem erro no console.\n * <PermissionGate …><MenuItem>…</MenuItem></PermissionGate>\n *\n * // CERTO\n * <MenuItem isDisabled={!allowed}>\n *   <PermissionGate …><span>…</span></PermissionGate>\n * </MenuItem>\n * ```\n *\n * O collection builder só reconhece nós de coleção; o `<span>` do ramo negado\n * entra na coleção com `node` nulo e quebra a lista encadeada de chaves. Já o\n * conteúdo de um nó é renderizado no DOM real, fora da coleção, e por isso é\n * seguro — é onde o `DataTable` põe o gate nas ações de linha. O `Menu` avisa no\n * console em desenvolvimento se o gate aparecer em volta de um item.\n */\nexport function PermissionGate({\n  isAllowed,\n  noAccessLabel,\n  isPending = false,\n  pendingLabel,\n  children,\n}: PermissionGateProps) {\n  const isGranted = isAllowed && !isPending;\n  const trigger =\n    typeof children === \"function\" ? children(isGranted, isPending) : children;\n\n  if (isGranted) {\n    return trigger;\n  }\n\n  const tooltipLabel = isPending ? pendingLabel : noAccessLabel;\n  if (!tooltipLabel) {\n    return trigger;\n  }\n\n  return (\n    <Tooltip content={tooltipLabel} trigger=\"hover\" placement=\"top\" offset={4}>\n      <span style={{ display: \"inline-flex\" }}>{trigger}</span>\n    </Tooltip>\n  );\n}\n"],"names":["PermissionGate","isAllowed","noAccessLabel","isPending","pendingLabel","children","isGranted","trigger","tooltipLabel","Tooltip","jsx"],"mappings":";;AAqDO,SAASA,EAAe;AAAA,EAC7B,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,cAAAC;AAAA,EACA,UAAAC;AACF,GAAwB;AACtB,QAAMC,IAAYL,KAAa,CAACE,GAC1BI,IACJ,OAAOF,KAAa,aAAaA,EAASC,GAAWH,CAAS,IAAIE;AAEpE,MAAIC;AACF,WAAOC;AAGT,QAAMC,IAAeL,IAAYC,IAAeF;AAChD,SAAKM,sBAKFC,GAAA,EAAQ,SAASD,GAAc,SAAQ,SAAQ,WAAU,OAAM,QAAQ,GACtE,UAAA,gBAAAE,EAAC,UAAK,OAAO,EAAE,SAAS,cAAA,GAAkB,aAAQ,GACpD,IANOH;AAQX;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Tree.cjs","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":"8TAiCA,SAASA,EAAyBC,EAA4B,CAC5D,OAAOA,EAAK,eAAiB,GAAQA,EAAK,UAAYA,EAAK,SAAS,OAAS,EAC/E,CAEO,SAASC,EAAQ,CACtB,UAAAC,EACA,MAAAC,EACA,WAAAC,EACA,cAAAC,EACA,aAAAC,EACA,aAAAC,EACA,GAAGC,CACL,EAAiB,CACf,SAASC,EAAWT,EAA8B,CAChD,OACEU,EAAAA,KAACC,EAAAA,SAAA,CACC,GAAIX,EAAK,GACT,UAAWA,EAAK,MAChB,cAAeD,EAAsBC,CAAI,EACzC,UAAU,YACV,SAAUM,EAAe,IAAMA,EAAaN,CAAI,EAAI,OAEpD,SAAA,CAAAY,EAAAA,IAACC,EAAA,CAAiB,SAAAT,EAAWJ,CAAI,CAAA,CAAE,EAClCA,EAAK,UAAYA,EAAK,SAAS,OAAS,GACvCY,EAAAA,IAACE,EAAAA,WAAA,CAAW,MAAOd,EAAK,SAAU,aAAAO,EAC/B,SAAAE,EACH,IAEAJ,GAAA,YAAAA,EAAgBL,EAAK,MAAO,KAC5BY,EAAAA,IAACD,EAAAA,SAAA,CAAY,GAAI,GAAGX,EAAK,EAAE,YAAa,UAAU,UAAU,WAAU,GAAC,UAAU,YAC/E,SAAAY,EAAAA,IAACC,EAAA,CACC,SAAAD,EAAAA,IAACG,EAAAA,WAAA,CAAW,KAAK,KAAK,UAAU,wBAAA,CAAyB,CAAA,CAC3D,CAAA,CACF,CAAA,CAAA,CAAA,CAIR,CAEA,OACEH,EAAAA,IAACI,EAAAA,KAAA,CAAQ,MAAAb,EAAc,UAAWc,EAAAA,KAAKf,EAAW,MAAM,EAAG,aAAAK,EAA6B,GAAGC,EACxF,SAAAC,CAAA,CACH,CAEJ,CAMA,SAASI,EAAgB,CAAE,SAAAK,GAAkC,CAC3D,aACGC,EAAAA,gBAAA,CACE,SAAA,CAAC,CAAE,cAAAC,EAAe,MAAAC,KACjBX,EAAAA,KAAC,MAAA,CACC,UAAU,gBACV,MAAO,CAAE,oBAAqBW,EAAQ,CAAA,EAErC,SAAA,CAAAD,QACEE,EAAAA,OAAA,CAAO,KAAK,UAAU,UAAU,oBAC/B,SAAAV,EAAAA,IAACW,EAAAA,iBAAA,CAAiB,KAAK,IAAA,CAAK,EAC9B,EAEAX,MAAC,QAAK,UAAU,2BAA2B,cAAY,OAAO,EAE/DM,CAAA,CAAA,CAAA,EAGP,CAEJ"}
+{"version":3,"file":"Tree.cjs","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":"kUAkCA,SAASA,EAAyBC,EAA4B,CAC5D,OAAOA,EAAK,eAAiB,GAAQA,EAAK,UAAYA,EAAK,SAAS,OAAS,EAC/E,CAEA,SAASC,EAAoBC,EAAsBC,EAA+C,CAChG,OAAOD,EAAM,QAASF,GAAS,CAC7B,GAAIG,EAAcH,EAAK,EAAE,EAAI,CAACA,EAAK,EAAE,EAAI,CAAA,EACzC,GAAGC,EAAiBD,EAAK,UAAY,CAAA,EAAIG,CAAa,CAAA,CACvD,CACH,CAEO,SAASC,EAAQ,CACtB,UAAAC,EACA,MAAAC,EACA,WAAAC,EACA,cAAAJ,EACA,aAAAK,EACA,aAAAC,EACA,GAAGC,CACL,EAAiB,CACf,MAAMC,EAAwBR,EAC1B,KAAK,UAAUF,EAAiBK,EAAOH,CAAa,CAAC,EACrD,GACES,EAAmB,CAAC,GAAIH,GAAgB,CAAA,EAAKE,CAAqB,EAExE,SAASE,EAAWb,EAA8B,CAChD,OACEc,EAAAA,KAACC,EAAAA,SAAA,CACC,GAAIf,EAAK,GACT,UAAWA,EAAK,MAChB,cAAeD,EAAsBC,CAAI,EACzC,UAAU,YACV,SAAUQ,EAAe,IAAMA,EAAaR,CAAI,EAAI,OAEpD,SAAA,CAAAgB,EAAAA,IAACC,EAAA,CAAiB,SAAAV,EAAWP,CAAI,CAAA,CAAE,EAClCA,EAAK,UAAYA,EAAK,SAAS,OAAS,GACvCgB,MAACE,EAAAA,WAAA,CAAW,MAAOlB,EAAK,SAAU,aAAcY,EAC7C,SAAAC,EACH,IAEAV,GAAA,YAAAA,EAAgBH,EAAK,MAAO,KAC5BgB,EAAAA,IAACD,EAAAA,SAAA,CAAY,GAAI,GAAGf,EAAK,EAAE,YAAa,UAAU,UAAU,WAAU,GAAC,UAAU,YAC/E,SAAAgB,EAAAA,IAACC,EAAA,CACC,SAAAD,EAAAA,IAACG,EAAAA,aAAY,cAAW,GAAC,QAAQ,QAAQ,KAAK,KAAK,KAAK,OAAA,CAAQ,EAClE,CAAA,CACF,CAAA,CAAA,CAAA,CAIR,CAEA,OACEH,EAAAA,IAACI,EAAAA,KAAA,CAAQ,MAAAd,EAAc,UAAWe,EAAAA,KAAKhB,EAAW,MAAM,EAAG,aAAcO,EAAmB,GAAGF,EAC5F,SAAAG,CAAA,CACH,CAEJ,CAMA,SAASI,EAAgB,CAAE,SAAAK,GAAkC,CAC3D,aACGC,EAAAA,gBAAA,CACE,SAAA,CAAC,CAAE,cAAAC,EAAe,MAAAC,KACjBX,EAAAA,KAAC,MAAA,CACC,UAAU,gBACV,MAAO,CAAE,oBAAqBW,EAAQ,CAAA,EAErC,SAAA,CAAAD,QACEE,EAAAA,OAAA,CAAO,KAAK,UAAU,UAAU,oBAC/B,SAAAV,EAAAA,IAACW,EAAAA,iBAAA,CAAiB,KAAK,IAAA,CAAK,EAC9B,EAEAX,MAAC,QAAK,UAAU,2BAA2B,cAAY,OAAO,EAE/DM,CAAA,CAAA,CAAA,EAGP,CAEJ"}

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/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.0.0",
   "type": "module",
   "description": "APIPass React Design System",
   "sideEffects": [

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