@apipass/design-system 4.0.0 → 4.1.0

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

@@ -1,96 +1,116 @@
-import { jsx as t, jsxs as u, Fragment as i } from "react/jsx-runtime";
+import { jsx as t, jsxs as m, Fragment as d } from "react/jsx-runtime";
 import { clsx as o } from "../../../vendor/clsx/dist/clsx.js";
-import { Menu as m, MenuTrigger as l, Popover as f, MenuItem as d, Separator as M } from "react-aria-components";
+import u from "react";
+import { PermissionGate as f } from "../PermissionGate/PermissionGate.js";
+import { Menu as M, MenuTrigger as p, Popover as N, MenuItem as h, Separator as g } from "react-aria-components";
 /* empty css         */
-import { IconChevronDown as N } from "../../icons/IconChevronDown.js";
-import { Label as h, Description as p, Keyboard as g } from "../Fieldset/Fieldset.js";
-import { IconButton as x } from "../IconButton/IconButton.js";
-import { Button as v } from "../Button/Button.js";
-import { useOverlayPortalContainer as I } from "../../hooks/useOverlayPortal.js";
-import { TextHeading as S } from "../Text/Text.js";
-function T({ className: n, ...e }) {
-  return /* @__PURE__ */ t(m, { className: o(n, "menu"), ...e });
+import { IconChevronDown as v } from "../../icons/IconChevronDown.js";
+import { Label as I, Description as x, Keyboard as y } from "../Fieldset/Fieldset.js";
+import { IconButton as b } from "../IconButton/IconButton.js";
+import { Button as B } from "../Button/Button.js";
+import { useOverlayPortalContainer as C } from "../../hooks/useOverlayPortal.js";
+import { TextHeading as P } from "../Text/Text.js";
+let i = !1;
+function c(n) {
+  i || u.Children.forEach(n, (e) => {
+    if (u.isValidElement(e)) {
+      if (e.type === u.Fragment) {
+        c(
+          e.props.children
+        );
+        return;
+      }
+      e.type === f && (i = !0, console.error(
+        "[design-system] Menu: PermissionGate não pode envolver um MenuItem — o react-aria descarta esse item e os seguintes, e o menu abre vazio quando ele é o primeiro. Mova o gate para dentro do MenuItem, em volta do conteúdo do item."
+      ));
+    }
+  });
+}
+function S({ className: n, ...e }) {
+  return c(
+    typeof e.children == "function" ? null : e.children
+  ), /* @__PURE__ */ t(M, { className: o(n, "menu"), ...e });
 }
-function b({ ...n }) {
-  return /* @__PURE__ */ t(l, { ...n });
+function T({ ...n }) {
+  return /* @__PURE__ */ t(p, { ...n });
 }
-function A({
+function z({
   label: n,
   children: e,
   icon: r,
-  placement: s,
-  variant: a,
-  ...c
+  placement: a,
+  variant: s,
+  ...l
 }) {
-  return /* @__PURE__ */ u(b, { children: [
-    r ? /* @__PURE__ */ t(x, { variant: a, "aria-label": n, children: r }) : /* @__PURE__ */ t(v, { variant: a, children: n }),
-    /* @__PURE__ */ t(B, { placement: s, children: /* @__PURE__ */ t(T, { ...c, children: e }) })
+  return /* @__PURE__ */ m(T, { children: [
+    r ? /* @__PURE__ */ t(b, { variant: s, "aria-label": n, children: r }) : /* @__PURE__ */ t(B, { variant: s, children: n }),
+    /* @__PURE__ */ t($, { placement: a, children: /* @__PURE__ */ t(S, { ...l, children: e }) })
   ] });
 }
-function B({
+function $({
   UNSTABLE_portalContainer: n,
   ...e
 }) {
-  const r = I();
+  const r = C();
   return /* @__PURE__ */ t(
-    f,
+    N,
     {
       ...e,
       UNSTABLE_portalContainer: n ?? r
     }
   );
 }
-function E({ className: n, ...e }) {
-  const r = o(n, "menu-item"), s = e.textValue || (typeof e.children == "string" ? e.children : void 0);
-  return /* @__PURE__ */ t(d, { ...e, className: r, textValue: s, children: ({ hasSubmenu: a }) => /* @__PURE__ */ u(i, { children: [
+function K({ className: n, ...e }) {
+  const r = o(n, "menu-item"), a = e.textValue || (typeof e.children == "string" ? e.children : void 0);
+  return /* @__PURE__ */ t(h, { ...e, className: r, textValue: a, children: ({ hasSubmenu: s }) => /* @__PURE__ */ m(d, { children: [
     e.children,
-    a && /* @__PURE__ */ t(N, {})
+    s && /* @__PURE__ */ t(v, {})
   ] }) });
 }
-function F({ className: n, ...e }) {
+function U({ className: n, ...e }) {
   const r = o(n, "menu-header");
   return /* @__PURE__ */ t("div", { ...e, className: r });
 }
-function K({ className: n, ...e }) {
+function W({ className: n, ...e }) {
   const r = o(n, "menu-section");
   return /* @__PURE__ */ t("div", { ...e, className: r });
 }
-function O({ className: n, ...e }) {
+function _({ className: n, ...e }) {
   const r = o(n, "menu-heading");
-  return /* @__PURE__ */ t(S, { ...e, className: r });
+  return /* @__PURE__ */ t(P, { ...e, className: r });
 }
-function U({ className: n, ...e }) {
+function k({ className: n, ...e }) {
   const r = o(n, "menu-separator");
-  return /* @__PURE__ */ t(M, { ...e, className: r });
+  return /* @__PURE__ */ t(g, { ...e, className: r });
 }
-function _({ className: n, ...e }) {
+function J({ className: n, ...e }) {
   const r = o(n, "menu-label");
-  return /* @__PURE__ */ t(h, { ...e, className: r });
+  return /* @__PURE__ */ t(I, { ...e, className: r });
 }
-function k({ className: n, ...e }) {
+function Q({ className: n, ...e }) {
   const r = o(n, "menu-description");
-  return /* @__PURE__ */ t(p, { ...e, className: r });
+  return /* @__PURE__ */ t(x, { ...e, className: r });
 }
-function q({
+function R({
   children: n,
   className: e,
   ...r
 }) {
-  const s = o(e, "menu-shortcut");
-  return /* @__PURE__ */ t(g, { ...r, className: s, children: n });
+  const a = o(e, "menu-shortcut");
+  return /* @__PURE__ */ t(y, { ...r, className: a, children: n });
 }
 export {
-  T as Menu,
-  A as MenuButton,
-  k as MenuDescription,
-  F as MenuHeader,
-  O as MenuHeading,
-  E as MenuItem,
-  _ as MenuLabel,
-  B as MenuPopover,
-  K as MenuSection,
-  U as MenuSeparator,
-  q as MenuShortcut,
-  b as MenuTrigger
+  S as Menu,
+  z as MenuButton,
+  Q as MenuDescription,
+  U as MenuHeader,
+  _ as MenuHeading,
+  K as MenuItem,
+  J as MenuLabel,
+  $ as MenuPopover,
+  W as MenuSection,
+  k as MenuSeparator,
+  R as MenuShortcut,
+  T as MenuTrigger
 };
 //# sourceMappingURL=Menu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../../../src/ui/primitives/Menu/Menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useOverlayPortalContainer } from \"hooks\";\nimport { IconChevronDown } from \"icons\";\nimport {\n  Button,\n  ButtonProps,\n  Description,\n  DescriptionProps,\n  IconButton,\n  Keyboard,\n  KeyboardProps,\n  Label,\n  LabelProps,\n  TextHeading,\n  type TextHeadingProps,\n} from \"primitives\";\nimport type React from \"react\";\nimport {\n  Menu as RACMenu,\n  MenuItem as RACMenuItem,\n  MenuTrigger as RACMenuTrigger,\n  Popover as RACPopover,\n  Separator as RACSeparator,\n  type MenuItemProps as RACMenuItemProps,\n  type MenuProps as RACMenuProps,\n  type MenuTriggerProps as RACMenuTriggerProps,\n  type PopoverProps as RACPopoverProps,\n  type SeparatorProps as RACSeparatorProps,\n} from \"react-aria-components\";\nimport \"./menu.css\";\n\nexport type MenuProps<T> = RACMenuProps<T>;\nexport function Menu<T extends object>({ className, ...props }: MenuProps<T>) {\n  return <RACMenu className={clsx(className, \"menu\")} {...props} />;\n}\n\nexport type MenuTriggerProps = RACMenuTriggerProps;\nexport function MenuTrigger({ ...props }: MenuTriggerProps) {\n  return <RACMenuTrigger {...props} />;\n}\n\nexport interface MenuButtonProps<T>\n  extends RACMenuProps<T>,\n    Omit<RACMenuTriggerProps, \"children\"> {\n  label: string;\n  variant?: ButtonProps[\"variant\"];\n  placement?: MenuPopoverProps[\"placement\"];\n  icon?: React.ReactNode;\n}\nexport function MenuButton<T extends object>({\n  label,\n  children,\n  icon,\n  placement,\n  variant,\n  ...props\n}: MenuButtonProps<T>) {\n  return (\n    <MenuTrigger>\n      {icon ? (\n        <IconButton variant={variant} aria-label={label}>\n          {icon}\n        </IconButton>\n      ) : (\n        <Button variant={variant}>{label}</Button>\n      )}\n      <MenuPopover placement={placement}>\n        <Menu {...props}>{children}</Menu>\n      </MenuPopover>\n    </MenuTrigger>\n  );\n}\n\nexport type MenuPopoverProps = RACPopoverProps;\nexport function MenuPopover({\n  UNSTABLE_portalContainer,\n  ...props\n}: MenuPopoverProps) {\n  // Sem container explícito o menu faz portal no document.body — fora da shadow\n  // root do MFE, sem CSS. Ver ui/hooks/useOverlayPortal.\n  const portalContainer = useOverlayPortalContainer();\n  return (\n    <RACPopover\n      {...props}\n      UNSTABLE_portalContainer={UNSTABLE_portalContainer ?? portalContainer}\n    />\n  );\n}\n\nexport type MenuItemProps = RACMenuItemProps;\nexport function MenuItem({ className, ...props }: MenuItemProps) {\n  const classNames = clsx(className, \"menu-item\");\n  const textValue =\n    props.textValue ||\n    (typeof props.children === \"string\" ? props.children : undefined);\n  return (\n    <RACMenuItem {...props} className={classNames} textValue={textValue}>\n      {({ hasSubmenu }) => (\n        <>\n          {props.children}\n          {hasSubmenu && <IconChevronDown />}\n        </>\n      )}\n    </RACMenuItem>\n  );\n}\n\nexport type MenuHeaderProps = React.ComponentPropsWithoutRef<\"div\">;\nexport function MenuHeader({ className, ...props }: MenuHeaderProps) {\n  const classNames = clsx(className, \"menu-header\");\n  return <div {...props} className={classNames} />;\n}\n\nexport type MenuSectionProps = React.ComponentPropsWithoutRef<\"div\">;\nexport function MenuSection({ className, ...props }: MenuSectionProps) {\n  const classNames = clsx(className, \"menu-section\");\n  return <div {...props} className={classNames} />;\n}\n\nexport type MenuHeadingProps = TextHeadingProps;\nexport function MenuHeading({ className, ...props }: MenuHeadingProps) {\n  const classNames = clsx(className, \"menu-heading\");\n  return <TextHeading {...props} className={classNames} />;\n}\n\nexport type MenuSeparatorProps = RACSeparatorProps;\nexport function MenuSeparator({ className, ...props }: MenuSeparatorProps) {\n  const classNames = clsx(className, \"menu-separator\");\n  return <RACSeparator {...props} className={classNames} />;\n}\n\nexport type MenuLabelProps = LabelProps;\nexport function MenuLabel({ className, ...props }: MenuLabelProps) {\n  const classNames = clsx(className, \"menu-label\");\n  return <Label {...props} className={classNames} />;\n}\n\nexport type MenuDescriptionProps = DescriptionProps;\nexport function MenuDescription({ className, ...props }: MenuDescriptionProps) {\n  const classNames = clsx(className, \"menu-description\");\n  return <Description {...props} className={classNames} />;\n}\n\nexport type MenuShortcutProps = KeyboardProps;\nexport function MenuShortcut({\n  children,\n  className,\n  ...props\n}: MenuShortcutProps) {\n  const classNames = clsx(className, \"menu-shortcut\");\n  return (\n    <Keyboard {...props} className={classNames}>\n      {children}\n    </Keyboard>\n  );\n}\n"],"names":["Menu","className","props","jsx","RACMenu","clsx","MenuTrigger","RACMenuTrigger","MenuButton","label","children","icon","placement","variant","IconButton","Button","MenuPopover","UNSTABLE_portalContainer","portalContainer","useOverlayPortalContainer","RACPopover","MenuItem","classNames","textValue","RACMenuItem","hasSubmenu","jsxs","Fragment","IconChevronDown","MenuHeader","MenuSection","MenuHeading","TextHeading","MenuSeparator","RACSeparator","MenuLabel","Label","MenuDescription","Description","MenuShortcut","Keyboard"],"mappings":"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"}
+{"version":3,"file":"Menu.js","sources":["../../../../../src/ui/primitives/Menu/Menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useOverlayPortalContainer } from \"hooks\";\nimport { IconChevronDown } from \"icons\";\nimport {\n  Button,\n  ButtonProps,\n  Description,\n  DescriptionProps,\n  IconButton,\n  Keyboard,\n  KeyboardProps,\n  Label,\n  LabelProps,\n  TextHeading,\n  type TextHeadingProps,\n} from \"primitives\";\nimport React from \"react\";\nimport { PermissionGate } from \"../PermissionGate/PermissionGate\";\nimport {\n  Menu as RACMenu,\n  MenuItem as RACMenuItem,\n  MenuTrigger as RACMenuTrigger,\n  Popover as RACPopover,\n  Separator as RACSeparator,\n  type MenuItemProps as RACMenuItemProps,\n  type MenuProps as RACMenuProps,\n  type MenuTriggerProps as RACMenuTriggerProps,\n  type PopoverProps as RACPopoverProps,\n  type SeparatorProps as RACSeparatorProps,\n} from \"react-aria-components\";\nimport \"./menu.css\";\n\n/**\n * Aviso de desenvolvimento: um `PermissionGate` EM VOLTA de um `MenuItem` quebra\n * o menu. O collection builder do react-aria-components só entende nós de\n * coleção (`MenuItem`, `MenuSeparator`, `MenuSection`); o `<span>` que o gate\n * renderiza no ramo negado entra na coleção com `node` nulo e arrebenta a lista\n * encadeada de chaves — o item envolvido e todos os seguintes desaparecem, e se\n * ele for o primeiro filho o menu abre VAZIO, levando embora também os itens\n * permitidos. Não há erro no console, e a forma errada passa despercebida em QA\n * feito com um usuário que tem todas as permissões, porque o ramo que envolve só\n * é renderizado quando a ação é negada.\n *\n * O gate deve ficar DENTRO do item, em volta do conteúdo — ali é seguro, porque\n * o conteúdo do item é renderizado no DOM real, fora da coleção. Mesmo padrão\n * das ações de linha do `DataTable`.\n *\n * O aviso é incondicional, e não atrás de `process.env.NODE_ENV`: o build da lib\n * (`vite.lib.config.ts`) substitui essa variável pelo literal `\"production\"`, o\n * que transformaria o guard em código morto justamente nos consumidores. Só\n * dispara uma vez por sessão, e só quando já existe um bug na árvore.\n */\nlet hasWarnedAboutGateAroundItem = false;\n\nfunction warnOnGateAroundItem(children: React.ReactNode) {\n  if (hasWarnedAboutGateAroundItem) return;\n  React.Children.forEach(children, (child) => {\n    if (!React.isValidElement(child)) return;\n    if (child.type === React.Fragment) {\n      warnOnGateAroundItem(\n        (child.props as { children?: React.ReactNode }).children,\n      );\n      return;\n    }\n    if (child.type === PermissionGate) {\n      hasWarnedAboutGateAroundItem = true;\n      // eslint-disable-next-line no-console\n      console.error(\n        \"[design-system] Menu: PermissionGate não pode envolver um MenuItem — \" +\n          \"o react-aria descarta esse item e os seguintes, e o menu abre vazio \" +\n          \"quando ele é o primeiro. Mova o gate para dentro do MenuItem, em \" +\n          \"volta do conteúdo do item.\",\n      );\n    }\n  });\n}\n\nexport type MenuProps<T> = RACMenuProps<T>;\nexport function Menu<T extends object>({ className, ...props }: MenuProps<T>) {\n  // children pode ser uma função nas coleções dinâmicas do react-aria.\n  warnOnGateAroundItem(\n    typeof props.children === \"function\" ? null : props.children,\n  );\n  return <RACMenu className={clsx(className, \"menu\")} {...props} />;\n}\n\nexport type MenuTriggerProps = RACMenuTriggerProps;\nexport function MenuTrigger({ ...props }: MenuTriggerProps) {\n  return <RACMenuTrigger {...props} />;\n}\n\nexport interface MenuButtonProps<T>\n  extends RACMenuProps<T>,\n    Omit<RACMenuTriggerProps, \"children\"> {\n  label: string;\n  variant?: ButtonProps[\"variant\"];\n  placement?: MenuPopoverProps[\"placement\"];\n  icon?: React.ReactNode;\n}\nexport function MenuButton<T extends object>({\n  label,\n  children,\n  icon,\n  placement,\n  variant,\n  ...props\n}: MenuButtonProps<T>) {\n  return (\n    <MenuTrigger>\n      {icon ? (\n        <IconButton variant={variant} aria-label={label}>\n          {icon}\n        </IconButton>\n      ) : (\n        <Button variant={variant}>{label}</Button>\n      )}\n      <MenuPopover placement={placement}>\n        <Menu {...props}>{children}</Menu>\n      </MenuPopover>\n    </MenuTrigger>\n  );\n}\n\nexport type MenuPopoverProps = RACPopoverProps;\nexport function MenuPopover({\n  UNSTABLE_portalContainer,\n  ...props\n}: MenuPopoverProps) {\n  // Sem container explícito o menu faz portal no document.body — fora da shadow\n  // root do MFE, sem CSS. Ver ui/hooks/useOverlayPortal.\n  const portalContainer = useOverlayPortalContainer();\n  return (\n    <RACPopover\n      {...props}\n      UNSTABLE_portalContainer={UNSTABLE_portalContainer ?? portalContainer}\n    />\n  );\n}\n\nexport type MenuItemProps = RACMenuItemProps;\nexport function MenuItem({ className, ...props }: MenuItemProps) {\n  const classNames = clsx(className, \"menu-item\");\n  const textValue =\n    props.textValue ||\n    (typeof props.children === \"string\" ? props.children : undefined);\n  return (\n    <RACMenuItem {...props} className={classNames} textValue={textValue}>\n      {({ hasSubmenu }) => (\n        <>\n          {props.children}\n          {hasSubmenu && <IconChevronDown />}\n        </>\n      )}\n    </RACMenuItem>\n  );\n}\n\nexport type MenuHeaderProps = React.ComponentPropsWithoutRef<\"div\">;\nexport function MenuHeader({ className, ...props }: MenuHeaderProps) {\n  const classNames = clsx(className, \"menu-header\");\n  return <div {...props} className={classNames} />;\n}\n\nexport type MenuSectionProps = React.ComponentPropsWithoutRef<\"div\">;\nexport function MenuSection({ className, ...props }: MenuSectionProps) {\n  const classNames = clsx(className, \"menu-section\");\n  return <div {...props} className={classNames} />;\n}\n\nexport type MenuHeadingProps = TextHeadingProps;\nexport function MenuHeading({ className, ...props }: MenuHeadingProps) {\n  const classNames = clsx(className, \"menu-heading\");\n  return <TextHeading {...props} className={classNames} />;\n}\n\nexport type MenuSeparatorProps = RACSeparatorProps;\nexport function MenuSeparator({ className, ...props }: MenuSeparatorProps) {\n  const classNames = clsx(className, \"menu-separator\");\n  return <RACSeparator {...props} className={classNames} />;\n}\n\nexport type MenuLabelProps = LabelProps;\nexport function MenuLabel({ className, ...props }: MenuLabelProps) {\n  const classNames = clsx(className, \"menu-label\");\n  return <Label {...props} className={classNames} />;\n}\n\nexport type MenuDescriptionProps = DescriptionProps;\nexport function MenuDescription({ className, ...props }: MenuDescriptionProps) {\n  const classNames = clsx(className, \"menu-description\");\n  return <Description {...props} className={classNames} />;\n}\n\nexport type MenuShortcutProps = KeyboardProps;\nexport function MenuShortcut({\n  children,\n  className,\n  ...props\n}: MenuShortcutProps) {\n  const classNames = clsx(className, \"menu-shortcut\");\n  return (\n    <Keyboard {...props} className={classNames}>\n      {children}\n    </Keyboard>\n  );\n}\n"],"names":["hasWarnedAboutGateAroundItem","warnOnGateAroundItem","children","React","child","PermissionGate","Menu","className","props","jsx","RACMenu","clsx","MenuTrigger","RACMenuTrigger","MenuButton","label","icon","placement","variant","IconButton","Button","MenuPopover","UNSTABLE_portalContainer","portalContainer","useOverlayPortalContainer","RACPopover","MenuItem","classNames","textValue","RACMenuItem","hasSubmenu","jsxs","Fragment","IconChevronDown","MenuHeader","MenuSection","MenuHeading","TextHeading","MenuSeparator","RACSeparator","MenuLabel","Label","MenuDescription","Description","MenuShortcut","Keyboard"],"mappings":"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"}

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 */\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":"yJAsBO,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\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"}

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 */\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":";;AAsBO,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\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;"}

package/dist/types/json-viewer.index.d.ts

@@ -1 +1,2 @@
 export * from "./ui/primitives/JsonViewer/JsonViewer";
+export * from "./ui/primitives/JsonViewer/JsonEditor";

package/dist/types/ui/primitives/JsonViewer/JsonEditor.d.ts

@@ -0,0 +1,18 @@
+import "./jsonviewer.css";
+export interface JsonEditorProps {
+    value: string;
+    onChange?: (value: string) => void;
+    expandAllLabel: string;
+    className?: string;
+    height?: string | number;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    "aria-label"?: string;
+}
+/**
+ * Editable sibling of `JsonViewer`: same CodeMirror-based visual (syntax
+ * colors, gutter, scrollbar, border/background) but with typing enabled.
+ * `JsonViewer` stays read-only-only on purpose so its bundle keeps assuming
+ * a static document; this component owns the editable/controlled behavior.
+ */
+export declare function JsonEditor({ value, onChange, expandAllLabel, className, height, isDisabled, isReadOnly, "aria-label": ariaLabel, }: JsonEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/JsonViewer/json-code-mirror.d.ts

@@ -0,0 +1,17 @@
+import { HighlightStyle } from "@codemirror/language";
+export declare const jsonHighlightStyle: HighlightStyle;
+export declare const jsonEditorTheme: import("@codemirror/state").Extension;
+export declare const jsonEditorExtensions: import("@codemirror/state").Extension[];
+export declare function serializeJson(value: unknown): string;
+export declare function toCssSize(size: string | number): string;
+/**
+ * Finds the fold range of every direct child (depth 1) of the root object/array
+ * by scanning the text itself for matching brackets. This mirrors what
+ * CodeMirror's `foldable()` would compute, but doesn't depend on the lezer
+ * parser having finished tokenizing the document — which for a multi-MB
+ * document is not guaranteed synchronously at mount time.
+ */
+export declare function computeFirstLevelFoldRanges(text: string): {
+    from: number;
+    to: number;
+}[];

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

@@ -1,5 +1,5 @@
 import { ButtonProps, DescriptionProps, KeyboardProps, LabelProps, type TextHeadingProps } from "primitives";
-import type React from "react";
+import React from "react";
 import { type MenuItemProps as RACMenuItemProps, type MenuProps as RACMenuProps, type MenuTriggerProps as RACMenuTriggerProps, type PopoverProps as RACPopoverProps, type SeparatorProps as RACSeparatorProps } from "react-aria-components";
 import "./menu.css";
 export type MenuProps<T> = RACMenuProps<T>;

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

@@ -16,5 +16,25 @@ export interface PermissionGateProps {
  * When allowed, renders the trigger directly with no wrapper.
  * When not allowed, wraps in a DS Tooltip with hover trigger.
  * A `<span>` wrapper ensures disabled elements still receive pointer events.
+ *
+ * Dentro de coleções do react-aria-components (`Menu`, `ListBox`, `Table`,
+ * `Tree`) o gate vai NO CONTEÚDO do nó, nunca em volta dele:
+ *
+ * ```tsx
+ * // ERRADO — o react-aria descarta esse item e os seguintes, e o menu abre
+ * // vazio se ele for o primeiro. Sem erro no console.
+ * <PermissionGate …><MenuItem>…</MenuItem></PermissionGate>
+ *
+ * // CERTO
+ * <MenuItem isDisabled={!allowed}>
+ *   <PermissionGate …><span>…</span></PermissionGate>
+ * </MenuItem>
+ * ```
+ *
+ * O collection builder só reconhece nós de coleção; o `<span>` do ramo negado
+ * entra na coleção com `node` nulo e quebra a lista encadeada de chaves. Já o
+ * conteúdo de um nó é renderizado no DOM real, fora da coleção, e por isso é
+ * 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apipass/design-system",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "type": "module",
   "description": "APIPass React Design System",
   "sideEffects": [