@mattermost/compass-ui 0.1.0-alpha.14 → 0.1.0-alpha.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (148) hide show
  1. package/dist/components/action-button/ActionButton.cjs +1 -1
  2. package/dist/components/action-button/ActionButton.cjs.map +1 -1
  3. package/dist/components/action-button/ActionButton.css +1 -1
  4. package/dist/components/action-button/ActionButton.d.ts +41 -5
  5. package/dist/components/action-button/ActionButton.d.ts.map +1 -1
  6. package/dist/components/action-button/ActionButton.js +68 -35
  7. package/dist/components/action-button/ActionButton.js.map +1 -1
  8. package/dist/components/action-button/ActionButton.module.scss.cjs +1 -1
  9. package/dist/components/action-button/ActionButton.module.scss.js +6 -5
  10. package/dist/components/action-button/ActionButton.module.scss.js.map +1 -1
  11. package/dist/components/action-button/index.d.ts +1 -1
  12. package/dist/components/action-button/index.d.ts.map +1 -1
  13. package/dist/components/admin-console-footer/AdminConsoleFooter.cjs +2 -0
  14. package/dist/components/admin-console-footer/AdminConsoleFooter.cjs.map +1 -0
  15. package/dist/components/admin-console-footer/AdminConsoleFooter.css +1 -0
  16. package/dist/components/admin-console-footer/AdminConsoleFooter.d.ts +27 -0
  17. package/dist/components/admin-console-footer/AdminConsoleFooter.d.ts.map +1 -0
  18. package/dist/components/admin-console-footer/AdminConsoleFooter.js +84 -0
  19. package/dist/components/admin-console-footer/AdminConsoleFooter.js.map +1 -0
  20. package/dist/components/admin-console-footer/AdminConsoleFooter.module.scss.cjs +2 -0
  21. package/dist/components/admin-console-footer/AdminConsoleFooter.module.scss.cjs.map +1 -0
  22. package/dist/components/admin-console-footer/AdminConsoleFooter.module.scss.js +13 -0
  23. package/dist/components/admin-console-footer/AdminConsoleFooter.module.scss.js.map +1 -0
  24. package/dist/components/admin-console-footer/index.cjs +2 -0
  25. package/dist/components/admin-console-footer/index.cjs.map +1 -0
  26. package/dist/components/admin-console-footer/index.d.ts +3 -0
  27. package/dist/components/admin-console-footer/index.d.ts.map +1 -0
  28. package/dist/components/admin-console-footer/index.js +5 -0
  29. package/dist/components/admin-console-footer/index.js.map +1 -0
  30. package/dist/components/admin-panel/AdminPanel.cjs +1 -1
  31. package/dist/components/admin-panel/AdminPanel.cjs.map +1 -1
  32. package/dist/components/admin-panel/AdminPanel.d.ts +41 -9
  33. package/dist/components/admin-panel/AdminPanel.d.ts.map +1 -1
  34. package/dist/components/admin-panel/AdminPanel.js +91 -81
  35. package/dist/components/admin-panel/AdminPanel.js.map +1 -1
  36. package/dist/components/admin-panel-footer/AdminPanelFooter.cjs +1 -1
  37. package/dist/components/admin-panel-footer/AdminPanelFooter.cjs.map +1 -1
  38. package/dist/components/admin-panel-footer/AdminPanelFooter.css +1 -1
  39. package/dist/components/admin-panel-footer/AdminPanelFooter.d.ts +18 -21
  40. package/dist/components/admin-panel-footer/AdminPanelFooter.d.ts.map +1 -1
  41. package/dist/components/admin-panel-footer/AdminPanelFooter.js +24 -61
  42. package/dist/components/admin-panel-footer/AdminPanelFooter.js.map +1 -1
  43. package/dist/components/admin-panel-footer/AdminPanelFooter.module.scss.cjs +1 -1
  44. package/dist/components/admin-panel-footer/AdminPanelFooter.module.scss.js +7 -9
  45. package/dist/components/admin-panel-footer/AdminPanelFooter.module.scss.js.map +1 -1
  46. package/dist/components/admin-panel-footer/index.d.ts +1 -1
  47. package/dist/components/admin-panel-footer/index.d.ts.map +1 -1
  48. package/dist/components/admin-panel-header/AdminPanelHeader.cjs.map +1 -1
  49. package/dist/components/admin-panel-header/AdminPanelHeader.d.ts +3 -2
  50. package/dist/components/admin-panel-header/AdminPanelHeader.d.ts.map +1 -1
  51. package/dist/components/admin-panel-header/AdminPanelHeader.js.map +1 -1
  52. package/dist/components/button/Button.cjs +1 -1
  53. package/dist/components/button/Button.cjs.map +1 -1
  54. package/dist/components/button/Button.css +1 -1
  55. package/dist/components/button/Button.d.ts +37 -6
  56. package/dist/components/button/Button.d.ts.map +1 -1
  57. package/dist/components/button/Button.js +106 -44
  58. package/dist/components/button/Button.js.map +1 -1
  59. package/dist/components/button/Button.module.scss.cjs +1 -1
  60. package/dist/components/button/Button.module.scss.js +16 -15
  61. package/dist/components/button/Button.module.scss.js.map +1 -1
  62. package/dist/components/button/index.d.ts +1 -1
  63. package/dist/components/button/index.d.ts.map +1 -1
  64. package/dist/components/channel-sidebar-item/ChannelSidebarItem.css +1 -1
  65. package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.cjs +1 -1
  66. package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.js +22 -22
  67. package/dist/components/checkbox/Checkbox.css +1 -1
  68. package/dist/components/checkbox/Checkbox.module.scss.cjs +1 -1
  69. package/dist/components/checkbox/Checkbox.module.scss.js +10 -10
  70. package/dist/components/chip/Chip.css +1 -1
  71. package/dist/components/chip/Chip.module.scss.cjs +1 -1
  72. package/dist/components/chip/Chip.module.scss.js +12 -12
  73. package/dist/components/combobox/Combobox.cjs +1 -1
  74. package/dist/components/combobox/Combobox.cjs.map +1 -1
  75. package/dist/components/combobox/Combobox.css +1 -1
  76. package/dist/components/combobox/Combobox.d.ts +14 -0
  77. package/dist/components/combobox/Combobox.d.ts.map +1 -1
  78. package/dist/components/combobox/Combobox.js +240 -224
  79. package/dist/components/combobox/Combobox.js.map +1 -1
  80. package/dist/components/combobox/Combobox.module.scss.cjs +1 -1
  81. package/dist/components/combobox/Combobox.module.scss.js +21 -21
  82. package/dist/components/icon-button/IconButton.cjs +1 -1
  83. package/dist/components/icon-button/IconButton.cjs.map +1 -1
  84. package/dist/components/icon-button/IconButton.css +1 -1
  85. package/dist/components/icon-button/IconButton.d.ts +48 -7
  86. package/dist/components/icon-button/IconButton.d.ts.map +1 -1
  87. package/dist/components/icon-button/IconButton.js +136 -62
  88. package/dist/components/icon-button/IconButton.js.map +1 -1
  89. package/dist/components/icon-button/IconButton.module.scss.cjs +1 -1
  90. package/dist/components/icon-button/IconButton.module.scss.js +16 -15
  91. package/dist/components/icon-button/IconButton.module.scss.js.map +1 -1
  92. package/dist/components/icon-button/index.d.ts +1 -1
  93. package/dist/components/icon-button/index.d.ts.map +1 -1
  94. package/dist/components/menu-item/MenuItem.cjs.map +1 -1
  95. package/dist/components/menu-item/MenuItem.css +1 -1
  96. package/dist/components/menu-item/MenuItem.d.ts +20 -0
  97. package/dist/components/menu-item/MenuItem.d.ts.map +1 -1
  98. package/dist/components/menu-item/MenuItem.js.map +1 -1
  99. package/dist/components/menu-item/MenuItem.module.scss.cjs +1 -1
  100. package/dist/components/menu-item/MenuItem.module.scss.js +16 -16
  101. package/dist/components/menu-item/index.d.ts +1 -1
  102. package/dist/components/menu-item/index.d.ts.map +1 -1
  103. package/dist/components/radio/Radio.css +1 -1
  104. package/dist/components/radio/Radio.module.scss.cjs +1 -1
  105. package/dist/components/radio/Radio.module.scss.js +12 -12
  106. package/dist/components/right-sidebar-header/RightSidebarHeader.cjs +1 -1
  107. package/dist/components/right-sidebar-header/RightSidebarHeader.cjs.map +1 -1
  108. package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts +5 -1
  109. package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts.map +1 -1
  110. package/dist/components/right-sidebar-header/RightSidebarHeader.js +60 -48
  111. package/dist/components/right-sidebar-header/RightSidebarHeader.js.map +1 -1
  112. package/dist/components/section-notice/SectionNotice.cjs +1 -1
  113. package/dist/components/section-notice/SectionNotice.cjs.map +1 -1
  114. package/dist/components/section-notice/SectionNotice.css +1 -1
  115. package/dist/components/section-notice/SectionNotice.js +17 -17
  116. package/dist/components/section-notice/SectionNotice.js.map +1 -1
  117. package/dist/components/section-notice/SectionNotice.module.scss.cjs +1 -1
  118. package/dist/components/section-notice/SectionNotice.module.scss.js +12 -12
  119. package/dist/components/select/Select.cjs +1 -1
  120. package/dist/components/select/Select.cjs.map +1 -1
  121. package/dist/components/select/Select.css +1 -1
  122. package/dist/components/select/Select.d.ts +16 -0
  123. package/dist/components/select/Select.d.ts.map +1 -1
  124. package/dist/components/select/Select.js +177 -157
  125. package/dist/components/select/Select.js.map +1 -1
  126. package/dist/components/select/Select.module.scss.cjs +1 -1
  127. package/dist/components/select/Select.module.scss.js +20 -20
  128. package/dist/components/switch/Switch.css +1 -1
  129. package/dist/components/switch/Switch.module.scss.cjs +1 -1
  130. package/dist/components/switch/Switch.module.scss.js +9 -9
  131. package/dist/index.cjs +1 -1
  132. package/dist/index.d.ts +1 -0
  133. package/dist/index.d.ts.map +1 -1
  134. package/dist/index.js +168 -166
  135. package/dist/index.js.map +1 -1
  136. package/dist/utils/menuItemProps.cjs +2 -0
  137. package/dist/utils/menuItemProps.cjs.map +1 -0
  138. package/dist/utils/menuItemProps.d.ts +5 -0
  139. package/dist/utils/menuItemProps.d.ts.map +1 -0
  140. package/dist/utils/menuItemProps.js +12 -0
  141. package/dist/utils/menuItemProps.js.map +1 -0
  142. package/dist/utils/slot.cjs +2 -0
  143. package/dist/utils/slot.cjs.map +1 -0
  144. package/dist/utils/slot.d.ts +46 -0
  145. package/dist/utils/slot.d.ts.map +1 -0
  146. package/dist/utils/slot.js +88 -0
  147. package/dist/utils/slot.js.map +1 -0
  148. package/package.json +5 -1
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),f=require("react"),b=require("../icon/Icon.cjs"),t=require("./ActionButton.module.scss.cjs"),n=f.forwardRef(function({icon:a,label:i,active:o,destructive:u=!1,className:s,type:r="button",...c},l){const d=[t.default["action-button"],o?t.default["action-button--active"]:"",u?t.default["action-button--destructive"]:"",s??""].filter(Boolean).join(" ");return e.jsxs("button",{ref:l,className:d,type:r,"aria-pressed":o===void 0?void 0:o,...c,children:[e.jsx("span",{className:t.default["action-button__icon"],"aria-hidden":!0,children:e.jsx(b.IconSlotContext.Provider,{value:{size:"20"},children:a})}),e.jsx("span",{className:t.default["action-button__label"],children:i})]})});n.displayName="ActionButton";exports.default=n;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),q=require("react"),s=require("../icon/Icon.cjs"),A=require("../../utils/slot.cjs"),t=require("./ActionButton.module.scss.cjs"),i=q.forwardRef(function(a,o){if(a.asChild){const{icon:m,label:v,destructive:j=!1,className:C,disabled:x,children:N,asChild:S,..._}=a,p=[t.default["action-button"],j?t.default["action-button--destructive"]:"",C??""].filter(Boolean).join(" "),B=e.jsxs(e.Fragment,{children:[e.jsx("span",{className:t.default["action-button__icon"],"aria-hidden":!0,children:e.jsx(s.IconSlotContext.Provider,{value:{size:"20"},children:m})}),e.jsx("span",{className:t.default["action-button__label"],children:v})]});return A.renderAsChild({child:N,props:{..._,className:p},ref:o,content:B,disabled:!!x,disabledClassName:t.default["action-button--disabled"],warnOnChildContent:!0})}const{icon:l,label:c,active:n,destructive:d=!1,className:r,disabled:u,type:b="button",asChild:P,...f}=a,h=[t.default["action-button"],n?t.default["action-button--active"]:"",d?t.default["action-button--destructive"]:"",r??""].filter(Boolean).join(" ");return e.jsxs("button",{ref:o,className:h,type:b,disabled:u,"aria-pressed":n===void 0?void 0:n,...f,children:[e.jsx("span",{className:t.default["action-button__icon"],"aria-hidden":!0,children:e.jsx(s.IconSlotContext.Provider,{value:{size:"20"},children:l})}),e.jsx("span",{className:t.default["action-button__label"],children:c})]})});i.displayName="ActionButton";exports.default=i;
2
2
  //# sourceMappingURL=ActionButton.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"ActionButton.cjs","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './ActionButton.module.scss';\n\nexport interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** Pass `<Icon glyph={<SomeIcon />} />` — ActionButton provides the correct size (20) via context. */\n icon: ReactNode;\n /** Visible label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n label: ReactNode;\n /** When set, this is a toggle; maps to `aria-pressed`. */\n active?: boolean;\n destructive?: boolean;\n}\n\n/**\n * Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n */\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n function ActionButton(\n {\n icon,\n label,\n active,\n destructive = false,\n className,\n type = 'button',\n ...htmlProps\n },\n ref,\n ) {\n const rootClass = [\n styles['action-button'],\n active ? styles['action-button--active'] : '',\n destructive ? styles['action-button--destructive'] : '',\n className ?? '',\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n className={rootClass}\n type={type}\n aria-pressed={active === undefined ? undefined : active}\n {...htmlProps}\n >\n <span className={styles['action-button__icon']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '20' }}>\n {icon}\n </IconSlotContext.Provider>\n </span>\n <span className={styles['action-button__label']}>{label}</span>\n </button>\n );\n },\n);\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","icon","label","active","destructive","className","type","htmlProps","ref","rootClass","styles","jsxs","jsx","IconSlotContext"],"mappings":"8OAmBMA,EAAeC,EAAAA,WACnB,SACE,CACE,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EAAc,GACd,UAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBP,EAASO,EAAAA,QAAO,uBAAuB,EAAI,GAC3CN,EAAcM,EAAAA,QAAO,4BAA4B,EAAI,GACrDL,GAAa,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEM,EAAAA,KAAC,SAAA,CACC,IAAAH,EACA,UAAWC,EACX,KAAAH,EACA,eAAcH,IAAW,OAAY,OAAYA,EAChD,GAAGI,EAEJ,SAAA,CAAAK,MAAC,QAAK,UAAWF,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,SAAAE,EAAAA,IAACC,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,QACC,OAAA,CAAK,UAAWH,EAAAA,QAAO,sBAAsB,EAAI,SAAAR,CAAA,CAAM,CAAA,CAAA,CAAA,CAG9D,CACF,EAEAH,EAAa,YAAc"}
1
+ {"version":3,"file":"ActionButton.cjs","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import {\n forwardRef,\n type ButtonHTMLAttributes,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n type Ref,\n type RefAttributes,\n} from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport { renderAsChild } from '@/utils/slot';\nimport styles from './ActionButton.module.scss';\n\ninterface ActionButtonOwnProps {\n /** Pass `<Icon glyph={<SomeIcon />} />` — ActionButton provides the correct size (20) via context. */\n icon: ReactNode;\n /** Visible label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n label: ReactNode;\n destructive?: boolean;\n className?: string;\n /**\n * When true, disables the control. On a native `<button>`, sets the `disabled`\n * attribute. With `asChild`, sets `aria-disabled`, applies disabled styles, and\n * blocks click / middle-click navigation (the link stays focusable).\n */\n disabled?: boolean;\n}\n\nexport interface ActionButtonProps\n extends ActionButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * When true, merges ActionButton props onto the single child element instead of\n * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.\n */\n asChild?: false;\n /**\n * When set, this is a toggle; maps to `aria-pressed`. Only applies to the native\n * `<button>`; not available with `asChild`.\n */\n active?: boolean;\n}\n\nexport interface ActionButtonAsChildProps\n extends\n ActionButtonOwnProps,\n Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {\n /**\n * Merges ActionButton props onto the single child element instead of rendering a\n * `<button>`. The child's own props (`href`, `to`, `target`, …) stay on the\n * child. Do not pass `type` or `active` — they are not available on links.\n * Pass an empty child; ActionButton supplies the icon and label anatomy.\n */\n asChild: true;\n /** Single empty element to render as the ActionButton (e.g. `<a href=\"…\" />`). */\n children: ReactElement;\n}\n\ntype ActionButtonComponent = {\n (\n props: ActionButtonAsChildProps & RefAttributes<HTMLElement>,\n ): ReactElement | null;\n (\n props: ActionButtonProps & RefAttributes<HTMLButtonElement>,\n ): ReactElement | null;\n displayName?: string;\n};\n\n/**\n * Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n *\n * Pass `asChild` with a single empty `<a>` or router `Link` child to render a navigational\n * action with Action Button styling (no nested `<button>`).\n */\nconst ActionButton = forwardRef(function ActionButton(\n props: ActionButtonProps | ActionButtonAsChildProps,\n ref: Ref<HTMLButtonElement | HTMLElement>,\n) {\n if (props.asChild) {\n const {\n icon,\n label,\n destructive = false,\n className,\n disabled,\n children,\n asChild,\n ...rest\n } = props;\n void asChild;\n\n const rootClass = [\n styles['action-button'],\n destructive ? styles['action-button--destructive'] : '',\n className ?? '',\n ]\n .filter(Boolean)\n .join(' ');\n\n const anatomy = (\n <>\n <span className={styles['action-button__icon']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '20' }}>\n {icon}\n </IconSlotContext.Provider>\n </span>\n <span className={styles['action-button__label']}>{label}</span>\n </>\n );\n\n return renderAsChild({\n child: children,\n props: {\n ...rest,\n className: rootClass,\n },\n ref,\n content: anatomy,\n disabled: Boolean(disabled),\n disabledClassName: styles['action-button--disabled'],\n warnOnChildContent: true,\n });\n }\n\n const {\n icon,\n label,\n active,\n destructive = false,\n className,\n disabled,\n type = 'button',\n asChild,\n ...htmlProps\n } = props;\n void asChild;\n\n const rootClass = [\n styles['action-button'],\n active ? styles['action-button--active'] : '',\n destructive ? styles['action-button--destructive'] : '',\n className ?? '',\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref as Ref<HTMLButtonElement>}\n className={rootClass}\n type={type}\n disabled={disabled}\n aria-pressed={active === undefined ? undefined : active}\n {...htmlProps}\n >\n <span className={styles['action-button__icon']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '20' }}>\n {icon}\n </IconSlotContext.Provider>\n </span>\n <span className={styles['action-button__label']}>{label}</span>\n </button>\n );\n}) as ActionButtonComponent;\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","props","ref","icon","label","destructive","className","disabled","children","asChild","rest","rootClass","styles","anatomy","jsxs","Fragment","jsx","IconSlotContext","renderAsChild","active","type","htmlProps"],"mappings":"gRA2EMA,EAAeC,EAAAA,WAAW,SAC9BC,EACAC,EACA,CACA,GAAID,EAAM,QAAS,CACjB,KAAM,CACJ,KAAAE,EACA,MAAAC,EACA,YAAAC,EAAc,GACd,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CAAA,EACDT,EAGEU,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBP,EAAcO,EAAAA,QAAO,4BAA4B,EAAI,GACrDN,GAAa,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,EAELO,EACJC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,MAAC,QAAK,UAAWJ,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,SAAAI,EAAAA,IAACC,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,MACtC,SAAAd,EACH,EACF,QACC,OAAA,CAAK,UAAWS,EAAAA,QAAO,sBAAsB,EAAI,SAAAR,CAAAA,CAAM,CAAA,EAC1D,EAGF,OAAOc,gBAAc,CACnB,MAAOV,EACP,MAAO,CACL,GAAGE,EACH,UAAWC,CAAA,EAEb,IAAAT,EACA,QAASW,EACT,SAAU,EAAQN,EAClB,kBAAmBK,EAAAA,QAAO,yBAAyB,EACnD,mBAAoB,EAAA,CACrB,CACH,CAEA,KAAM,CACJ,KAAAT,EACA,MAAAC,EACA,OAAAe,EACA,YAAAd,EAAc,GACd,UAAAC,EACA,SAAAC,EACA,KAAAa,EAAO,SACP,QAAAX,EACA,GAAGY,CAAA,EACDpB,EAGEU,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBO,EAASP,EAAAA,QAAO,uBAAuB,EAAI,GAC3CP,EAAcO,EAAAA,QAAO,4BAA4B,EAAI,GACrDN,GAAa,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEQ,EAAAA,KAAC,SAAA,CACC,IAAAZ,EACA,UAAWS,EACX,KAAAS,EACA,SAAAb,EACA,eAAcY,IAAW,OAAY,OAAYA,EAChD,GAAGE,EAEJ,SAAA,CAAAL,MAAC,QAAK,UAAWJ,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,SAAAI,EAAAA,IAACC,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,QACC,OAAA,CAAK,UAAWL,EAAAA,QAAO,sBAAsB,EAAI,SAAAR,CAAA,CAAM,CAAA,CAAA,CAAA,CAG9D,CAAC,EAEDL,EAAa,YAAc"}
@@ -1 +1 @@
1
- ._action-button_1u191_2{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xxxs);width:88px;padding:var(--spacing-m) var(--spacing-l) var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:rgba(var(--center-channel-color-rgb),.04);color:rgba(var(--center-channel-color-rgb),.64);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._action-button_1u191_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._action-button_1u191_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._action-button_1u191_2:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._action-button_1u191_2:disabled{opacity:.48;cursor:not-allowed}._action-button--active_1u191_34{background-color:rgba(var(--button-bg-rgb),.08)}._action-button--active_1u191_34 ._action-button__icon_1u191_37,._action-button--active_1u191_34 ._action-button__label_1u191_38{color:var(--link-color)}._action-button--active_1u191_34:hover:not(:disabled){background-color:rgba(var(--button-bg-rgb),.12)}._action-button--active_1u191_34:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16)}._action-button--destructive_1u191_47{--focus-ring-color: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04);color:var(--error-text, var(--color-danger))}._action-button--destructive_1u191_47:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._action-button--destructive_1u191_47:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}._action-button__icon_1u191_37{display:flex;align-items:center;justify-content:center;width:var(--icon-size-20);height:var(--icon-size-20);flex-shrink:0}._action-button__label_1u191_38{font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-50);letter-spacing:.11px;white-space:nowrap;text-align:center}
1
+ ._action-button_ruap0_2{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xxxs);width:88px;padding:var(--spacing-m) var(--spacing-l) var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:rgba(var(--center-channel-color-rgb),.04);--action-button-fg: rgba(var(--center-channel-color-rgb), .64);color:var(--action-button-fg);cursor:pointer;text-decoration:none;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._action-button_ruap0_2:any-link,._action-button_ruap0_2:hover,._action-button_ruap0_2:focus,._action-button_ruap0_2:active,._action-button_ruap0_2:visited{color:var(--action-button-fg);text-decoration:none}._action-button_ruap0_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._action-button_ruap0_2:hover:not(:disabled,._action-button--disabled_ruap0_28){background-color:rgba(var(--center-channel-color-rgb),.08);--action-button-fg: rgba(var(--center-channel-color-rgb), .75)}._action-button_ruap0_2:active:not(:disabled,._action-button--disabled_ruap0_28){background-color:rgba(var(--button-bg-rgb),.08);--action-button-fg: var(--link-color)}._action-button_ruap0_2:is(:disabled,._action-button--disabled_ruap0_28){opacity:.48;cursor:not-allowed}._action-button--active_ruap0_40{--action-button-fg: var(--link-color);background-color:rgba(var(--button-bg-rgb),.08)}._action-button--active_ruap0_40 ._action-button__icon_ruap0_44,._action-button--active_ruap0_40 ._action-button__label_ruap0_45{color:var(--link-color)}._action-button--active_ruap0_40:hover:not(:disabled,._action-button--disabled_ruap0_28){background-color:rgba(var(--button-bg-rgb),.12)}._action-button--active_ruap0_40:active:not(:disabled,._action-button--disabled_ruap0_28){background-color:rgba(var(--button-bg-rgb),.16)}._action-button--destructive_ruap0_54{--focus-ring-color: var(--error-text, var(--color-danger));--action-button-fg: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04)}._action-button--destructive_ruap0_54:hover:not(:disabled,._action-button--disabled_ruap0_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);--action-button-fg: var(--error-text, var(--color-danger))}._action-button--destructive_ruap0_54:active:not(:disabled,._action-button--disabled_ruap0_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);--action-button-fg: var(--error-text, var(--color-danger))}._action-button__icon_ruap0_44{display:flex;align-items:center;justify-content:center;width:var(--icon-size-20);height:var(--icon-size-20);flex-shrink:0;color:var(--action-button-fg)}._action-button__label_ruap0_45{font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-50);letter-spacing:.11px;white-space:nowrap;text-align:center;color:var(--action-button-fg)}
@@ -1,18 +1,54 @@
1
- import { ButtonHTMLAttributes, ReactNode } from 'react';
2
- export interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
1
+ import { ButtonHTMLAttributes, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
2
+ interface ActionButtonOwnProps {
3
3
  /** Pass `<Icon glyph={<SomeIcon />} />` — ActionButton provides the correct size (20) via context. */
4
4
  icon: ReactNode;
5
5
  /** Visible label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
6
6
  label: ReactNode;
7
- /** When set, this is a toggle; maps to `aria-pressed`. */
8
- active?: boolean;
9
7
  destructive?: boolean;
8
+ className?: string;
9
+ /**
10
+ * When true, disables the control. On a native `<button>`, sets the `disabled`
11
+ * attribute. With `asChild`, sets `aria-disabled`, applies disabled styles, and
12
+ * blocks click / middle-click navigation (the link stays focusable).
13
+ */
14
+ disabled?: boolean;
15
+ }
16
+ export interface ActionButtonProps extends ActionButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {
17
+ /**
18
+ * When true, merges ActionButton props onto the single child element instead of
19
+ * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.
20
+ */
21
+ asChild?: false;
22
+ /**
23
+ * When set, this is a toggle; maps to `aria-pressed`. Only applies to the native
24
+ * `<button>`; not available with `asChild`.
25
+ */
26
+ active?: boolean;
27
+ }
28
+ export interface ActionButtonAsChildProps extends ActionButtonOwnProps, Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {
29
+ /**
30
+ * Merges ActionButton props onto the single child element instead of rendering a
31
+ * `<button>`. The child's own props (`href`, `to`, `target`, …) stay on the
32
+ * child. Do not pass `type` or `active` — they are not available on links.
33
+ * Pass an empty child; ActionButton supplies the icon and label anatomy.
34
+ */
35
+ asChild: true;
36
+ /** Single empty element to render as the ActionButton (e.g. `<a href="…" />`). */
37
+ children: ReactElement;
10
38
  }
39
+ type ActionButtonComponent = {
40
+ (props: ActionButtonAsChildProps & RefAttributes<HTMLElement>): ReactElement | null;
41
+ (props: ActionButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;
42
+ displayName?: string;
43
+ };
11
44
  /**
12
45
  * Action Buttons surface a small set of high-frequency actions in a fixed context — a
13
46
  * profile popover, a channel info panel, a card. They sit close to the content they act on
14
47
  * and read as a row of equal-weight choices.
48
+ *
49
+ * Pass `asChild` with a single empty `<a>` or router `Link` child to render a navigational
50
+ * action with Action Button styling (no nested `<button>`).
15
51
  */
16
- declare const ActionButton: import('react').ForwardRefExoticComponent<ActionButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
52
+ declare const ActionButton: ActionButtonComponent;
17
53
  export default ActionButton;
18
54
  //# sourceMappingURL=ActionButton.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9E,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,sGAAsG;IACtG,IAAI,EAAE,SAAS,CAAC;IAChB,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,QAAA,MAAM,YAAY,iHAuCjB,CAAC;AAIF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,SAAS,EAEd,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAKf,UAAU,oBAAoB;IAC5B,sGAAsG;IACtG,IAAI,EAAE,SAAS,CAAC;IAChB,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAAE,oBAAoB,CAAC,iBAAiB,CAAC;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,wBACf,SACE,oBAAoB,EACpB,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACzD;;;;;OAKG;IACH,OAAO,EAAE,IAAI,CAAC;IACd,kFAAkF;IAClF,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,KAAK,qBAAqB,GAAG;IAC3B,CACE,KAAK,EAAE,wBAAwB,GAAG,aAAa,CAAC,WAAW,CAAC,GAC3D,YAAY,GAAG,IAAI,CAAC;IACvB,CACE,KAAK,EAAE,iBAAiB,GAAG,aAAa,CAAC,iBAAiB,CAAC,GAC1D,YAAY,GAAG,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;GAOG;AACH,QAAA,MAAM,YAAY,EAyFZ,qBAAqB,CAAC;AAI5B,eAAe,YAAY,CAAC"}
@@ -1,41 +1,74 @@
1
- import { jsxs as d, jsx as n } from "react/jsx-runtime";
2
- import { forwardRef as m } from "react";
3
- import { IconSlotContext as f } from "../icon/Icon.js";
1
+ import { jsxs as i, Fragment as y, jsx as e } from "react/jsx-runtime";
2
+ import { forwardRef as A } from "react";
3
+ import { IconSlotContext as s } from "../icon/Icon.js";
4
+ import { renderAsChild as P } from "../../utils/slot.js";
4
5
  import t from "./ActionButton.module.scss.js";
5
- const p = m(
6
- function({
7
- icon: i,
8
- label: a,
9
- active: o,
10
- destructive: e = !1,
11
- className: r,
12
- type: s = "button",
13
- ...c
14
- }, l) {
15
- const u = [
6
+ const w = A(function(a, o) {
7
+ if (a.asChild) {
8
+ const {
9
+ icon: f,
10
+ label: v,
11
+ destructive: p = !1,
12
+ className: C,
13
+ disabled: N,
14
+ children: _,
15
+ asChild: F,
16
+ ...B
17
+ } = a, j = [
16
18
  t["action-button"],
17
- o ? t["action-button--active"] : "",
18
- e ? t["action-button--destructive"] : "",
19
- r ?? ""
20
- ].filter(Boolean).join(" ");
21
- return /* @__PURE__ */ d(
22
- "button",
23
- {
24
- ref: l,
25
- className: u,
26
- type: s,
27
- "aria-pressed": o === void 0 ? void 0 : o,
28
- ...c,
29
- children: [
30
- /* @__PURE__ */ n("span", { className: t["action-button__icon"], "aria-hidden": !0, children: /* @__PURE__ */ n(f.Provider, { value: { size: "20" }, children: i }) }),
31
- /* @__PURE__ */ n("span", { className: t["action-button__label"], children: a })
32
- ]
33
- }
34
- );
19
+ p ? t["action-button--destructive"] : "",
20
+ C ?? ""
21
+ ].filter(Boolean).join(" "), x = /* @__PURE__ */ i(y, { children: [
22
+ /* @__PURE__ */ e("span", { className: t["action-button__icon"], "aria-hidden": !0, children: /* @__PURE__ */ e(s.Provider, { value: { size: "20" }, children: f }) }),
23
+ /* @__PURE__ */ e("span", { className: t["action-button__label"], children: v })
24
+ ] });
25
+ return P({
26
+ child: _,
27
+ props: {
28
+ ...B,
29
+ className: j
30
+ },
31
+ ref: o,
32
+ content: x,
33
+ disabled: !!N,
34
+ disabledClassName: t["action-button--disabled"],
35
+ warnOnChildContent: !0
36
+ });
35
37
  }
36
- );
37
- p.displayName = "ActionButton";
38
+ const {
39
+ icon: l,
40
+ label: c,
41
+ active: n,
42
+ destructive: r = !1,
43
+ className: d,
44
+ disabled: u,
45
+ type: m = "button",
46
+ asChild: g,
47
+ ...b
48
+ } = a, h = [
49
+ t["action-button"],
50
+ n ? t["action-button--active"] : "",
51
+ r ? t["action-button--destructive"] : "",
52
+ d ?? ""
53
+ ].filter(Boolean).join(" ");
54
+ return /* @__PURE__ */ i(
55
+ "button",
56
+ {
57
+ ref: o,
58
+ className: h,
59
+ type: m,
60
+ disabled: u,
61
+ "aria-pressed": n === void 0 ? void 0 : n,
62
+ ...b,
63
+ children: [
64
+ /* @__PURE__ */ e("span", { className: t["action-button__icon"], "aria-hidden": !0, children: /* @__PURE__ */ e(s.Provider, { value: { size: "20" }, children: l }) }),
65
+ /* @__PURE__ */ e("span", { className: t["action-button__label"], children: c })
66
+ ]
67
+ }
68
+ );
69
+ });
70
+ w.displayName = "ActionButton";
38
71
  export {
39
- p as default
72
+ w as default
40
73
  };
41
74
  //# sourceMappingURL=ActionButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ActionButton.js","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './ActionButton.module.scss';\n\nexport interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** Pass `<Icon glyph={<SomeIcon />} />` — ActionButton provides the correct size (20) via context. */\n icon: ReactNode;\n /** Visible label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n label: ReactNode;\n /** When set, this is a toggle; maps to `aria-pressed`. */\n active?: boolean;\n destructive?: boolean;\n}\n\n/**\n * Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n */\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n function ActionButton(\n {\n icon,\n label,\n active,\n destructive = false,\n className,\n type = 'button',\n ...htmlProps\n },\n ref,\n ) {\n const rootClass = [\n styles['action-button'],\n active ? styles['action-button--active'] : '',\n destructive ? styles['action-button--destructive'] : '',\n className ?? '',\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n className={rootClass}\n type={type}\n aria-pressed={active === undefined ? undefined : active}\n {...htmlProps}\n >\n <span className={styles['action-button__icon']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '20' }}>\n {icon}\n </IconSlotContext.Provider>\n </span>\n <span className={styles['action-button__label']}>{label}</span>\n </button>\n );\n },\n);\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","icon","label","active","destructive","className","type","htmlProps","ref","rootClass","styles","jsxs","jsx","IconSlotContext"],"mappings":";;;;AAmBA,MAAMA,IAAeC;AAAA,EACnB,SACE;AAAA,IACE,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAY;AAAA,MAChBC,EAAO,eAAe;AAAA,MACtBP,IAASO,EAAO,uBAAuB,IAAI;AAAA,MAC3CN,IAAcM,EAAO,4BAA4B,IAAI;AAAA,MACrDL,KAAa;AAAA,IAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,WAAWC;AAAA,QACX,MAAAH;AAAA,QACA,gBAAcH,MAAW,SAAY,SAAYA;AAAA,QAChD,GAAGI;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAK,EAAC,UAAK,WAAWF,EAAO,qBAAqB,GAAG,eAAW,IACzD,UAAA,gBAAAE,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,aACH,GACF;AAAA,4BACC,QAAA,EAAK,WAAWH,EAAO,sBAAsB,GAAI,UAAAR,EAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG9D;AACF;AAEAH,EAAa,cAAc;"}
1
+ {"version":3,"file":"ActionButton.js","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import {\n forwardRef,\n type ButtonHTMLAttributes,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n type Ref,\n type RefAttributes,\n} from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport { renderAsChild } from '@/utils/slot';\nimport styles from './ActionButton.module.scss';\n\ninterface ActionButtonOwnProps {\n /** Pass `<Icon glyph={<SomeIcon />} />` — ActionButton provides the correct size (20) via context. */\n icon: ReactNode;\n /** Visible label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n label: ReactNode;\n destructive?: boolean;\n className?: string;\n /**\n * When true, disables the control. On a native `<button>`, sets the `disabled`\n * attribute. With `asChild`, sets `aria-disabled`, applies disabled styles, and\n * blocks click / middle-click navigation (the link stays focusable).\n */\n disabled?: boolean;\n}\n\nexport interface ActionButtonProps\n extends ActionButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * When true, merges ActionButton props onto the single child element instead of\n * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.\n */\n asChild?: false;\n /**\n * When set, this is a toggle; maps to `aria-pressed`. Only applies to the native\n * `<button>`; not available with `asChild`.\n */\n active?: boolean;\n}\n\nexport interface ActionButtonAsChildProps\n extends\n ActionButtonOwnProps,\n Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {\n /**\n * Merges ActionButton props onto the single child element instead of rendering a\n * `<button>`. The child's own props (`href`, `to`, `target`, …) stay on the\n * child. Do not pass `type` or `active` — they are not available on links.\n * Pass an empty child; ActionButton supplies the icon and label anatomy.\n */\n asChild: true;\n /** Single empty element to render as the ActionButton (e.g. `<a href=\"…\" />`). */\n children: ReactElement;\n}\n\ntype ActionButtonComponent = {\n (\n props: ActionButtonAsChildProps & RefAttributes<HTMLElement>,\n ): ReactElement | null;\n (\n props: ActionButtonProps & RefAttributes<HTMLButtonElement>,\n ): ReactElement | null;\n displayName?: string;\n};\n\n/**\n * Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n *\n * Pass `asChild` with a single empty `<a>` or router `Link` child to render a navigational\n * action with Action Button styling (no nested `<button>`).\n */\nconst ActionButton = forwardRef(function ActionButton(\n props: ActionButtonProps | ActionButtonAsChildProps,\n ref: Ref<HTMLButtonElement | HTMLElement>,\n) {\n if (props.asChild) {\n const {\n icon,\n label,\n destructive = false,\n className,\n disabled,\n children,\n asChild,\n ...rest\n } = props;\n void asChild;\n\n const rootClass = [\n styles['action-button'],\n destructive ? styles['action-button--destructive'] : '',\n className ?? '',\n ]\n .filter(Boolean)\n .join(' ');\n\n const anatomy = (\n <>\n <span className={styles['action-button__icon']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '20' }}>\n {icon}\n </IconSlotContext.Provider>\n </span>\n <span className={styles['action-button__label']}>{label}</span>\n </>\n );\n\n return renderAsChild({\n child: children,\n props: {\n ...rest,\n className: rootClass,\n },\n ref,\n content: anatomy,\n disabled: Boolean(disabled),\n disabledClassName: styles['action-button--disabled'],\n warnOnChildContent: true,\n });\n }\n\n const {\n icon,\n label,\n active,\n destructive = false,\n className,\n disabled,\n type = 'button',\n asChild,\n ...htmlProps\n } = props;\n void asChild;\n\n const rootClass = [\n styles['action-button'],\n active ? styles['action-button--active'] : '',\n destructive ? styles['action-button--destructive'] : '',\n className ?? '',\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref as Ref<HTMLButtonElement>}\n className={rootClass}\n type={type}\n disabled={disabled}\n aria-pressed={active === undefined ? undefined : active}\n {...htmlProps}\n >\n <span className={styles['action-button__icon']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '20' }}>\n {icon}\n </IconSlotContext.Provider>\n </span>\n <span className={styles['action-button__label']}>{label}</span>\n </button>\n );\n}) as ActionButtonComponent;\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","props","ref","icon","label","destructive","className","disabled","children","asChild","rest","rootClass","styles","anatomy","jsxs","Fragment","jsx","IconSlotContext","renderAsChild","active","type","htmlProps"],"mappings":";;;;;AA2EA,MAAMA,IAAeC,EAAW,SAC9BC,GACAC,GACA;AACA,MAAID,EAAM,SAAS;AACjB,UAAM;AAAA,MACJ,MAAAE;AAAAA,MACA,OAAAC;AAAAA,MACA,aAAAC,IAAc;AAAA,MACd,WAAAC;AAAAA,MACA,UAAAC;AAAAA,MACA,UAAAC;AAAA,MACA,SAAAC;AAAAA,MACA,GAAGC;AAAA,IAAA,IACDT,GAGEU,IAAY;AAAA,MAChBC,EAAO,eAAe;AAAA,MACtBP,IAAcO,EAAO,4BAA4B,IAAI;AAAA,MACrDN,KAAa;AAAA,IAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,GAELO,IACJ,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAK,WAAWJ,EAAO,qBAAqB,GAAG,eAAW,IACzD,UAAA,gBAAAI,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,QACtC,UAAAd,GACH,GACF;AAAA,wBACC,QAAA,EAAK,WAAWS,EAAO,sBAAsB,GAAI,UAAAR,EAAAA,CAAM;AAAA,IAAA,GAC1D;AAGF,WAAOc,EAAc;AAAA,MACnB,OAAOV;AAAA,MACP,OAAO;AAAA,QACL,GAAGE;AAAA,QACH,WAAWC;AAAAA,MAAA;AAAA,MAEb,KAAAT;AAAA,MACA,SAASW;AAAA,MACT,UAAU,EAAQN;AAAAA,MAClB,mBAAmBK,EAAO,yBAAyB;AAAA,MACnD,oBAAoB;AAAA,IAAA,CACrB;AAAA,EACH;AAEA,QAAM;AAAA,IACJ,MAAAT;AAAA,IACA,OAAAC;AAAA,IACA,QAAAe;AAAA,IACA,aAAAd,IAAc;AAAA,IACd,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAa,IAAO;AAAA,IACP,SAAAX;AAAA,IACA,GAAGY;AAAA,EAAA,IACDpB,GAGEU,IAAY;AAAA,IAChBC,EAAO,eAAe;AAAA,IACtBO,IAASP,EAAO,uBAAuB,IAAI;AAAA,IAC3CP,IAAcO,EAAO,4BAA4B,IAAI;AAAA,IACrDN,KAAa;AAAA,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,WAAWS;AAAA,MACX,MAAAS;AAAA,MACA,UAAAb;AAAA,MACA,gBAAcY,MAAW,SAAY,SAAYA;AAAA,MAChD,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAL,EAAC,UAAK,WAAWJ,EAAO,qBAAqB,GAAG,eAAW,IACzD,UAAA,gBAAAI,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,aACH,GACF;AAAA,0BACC,QAAA,EAAK,WAAWL,EAAO,sBAAsB,GAAI,UAAAR,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9D,CAAC;AAEDL,EAAa,cAAc;"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ActionButton.css');const t={"action-button":"_action-button_1u191_2","action-button--active":"_action-button--active_1u191_34","action-button__icon":"_action-button__icon_1u191_37","action-button__label":"_action-button__label_1u191_38","action-button--destructive":"_action-button--destructive_1u191_47"};exports.default=t;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ActionButton.css');const t={"action-button":"_action-button_ruap0_2","action-button--disabled":"_action-button--disabled_ruap0_28","action-button--active":"_action-button--active_ruap0_40","action-button__icon":"_action-button__icon_ruap0_44","action-button__label":"_action-button__label_ruap0_45","action-button--destructive":"_action-button--destructive_ruap0_54"};exports.default=t;
2
2
  //# sourceMappingURL=ActionButton.module.scss.cjs.map
@@ -1,9 +1,10 @@
1
1
  import './ActionButton.css';const t = {
2
- "action-button": "_action-button_1u191_2",
3
- "action-button--active": "_action-button--active_1u191_34",
4
- "action-button__icon": "_action-button__icon_1u191_37",
5
- "action-button__label": "_action-button__label_1u191_38",
6
- "action-button--destructive": "_action-button--destructive_1u191_47"
2
+ "action-button": "_action-button_ruap0_2",
3
+ "action-button--disabled": "_action-button--disabled_ruap0_28",
4
+ "action-button--active": "_action-button--active_ruap0_40",
5
+ "action-button__icon": "_action-button__icon_ruap0_44",
6
+ "action-button__label": "_action-button__label_ruap0_45",
7
+ "action-button--destructive": "_action-button--destructive_ruap0_54"
7
8
  };
8
9
  export {
9
10
  t as default
@@ -1 +1 @@
1
- {"version":3,"file":"ActionButton.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
1
+ {"version":3,"file":"ActionButton.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -1,3 +1,3 @@
1
1
  export { default as ActionButton } from './ActionButton';
2
- export type * from './ActionButton';
2
+ export type { ActionButtonProps, ActionButtonAsChildProps, } from './ActionButton';
3
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,mBAAmB,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EACV,iBAAiB,EACjB,wBAAwB,GACzB,MAAM,gBAAgB,CAAC"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__h=require("@mattermost/compass-icons/components/alert-circle-outline.js"),h=__h?.default??__h,__j=require("@mattermost/compass-icons/components/alert-outline.js"),j=__j?.default??__j,i=require("../button/Button.cjs"),n=require("./AdminConsoleFooter.module.scss.cjs"),x="There are outstanding issues in the form above.",_="There are errors in the form above.";function p({saveLabel:l="Save",cancelLabel:a="Cancel",onSave:c,onCancel:d,saveDisabled:u=!0,status:o="none",statusMessage:t,className:m=""}){let r=null;if(o==="warning"){const s=t??x;r=e.jsxs(e.Fragment,{children:[e.jsx("span",{className:n.default["admin-console-footer__status-icon"],"aria-hidden":!0,children:e.jsx(j,{size:12})}),e.jsx("span",{children:s})]})}if(o==="error"){const s=t??_;r=e.jsxs(e.Fragment,{children:[e.jsx("span",{className:n.default["admin-console-footer__status-icon"],"aria-hidden":!0,children:e.jsx(h,{size:12})}),e.jsx("span",{children:s})]})}const f=o==="warning"?n.default["admin-console-footer--status-warning"]:o==="error"?n.default["admin-console-footer--status-error"]:"";return e.jsx("footer",{className:[n.default["admin-console-footer"],f,m].filter(Boolean).join(" ").trim(),role:"contentinfo",children:e.jsxs("div",{className:n.default["admin-console-footer__inner"],children:[e.jsxs("div",{className:n.default["admin-console-footer__actions"],children:[e.jsx(i.default,{type:"button",size:"medium",emphasis:"primary",disabled:u,onClick:c,children:l}),e.jsx(i.default,{type:"button",size:"medium",emphasis:"tertiary",onClick:d,children:a})]}),r!=null?e.jsx("div",{className:n.default["admin-console-footer__status"],role:"alert",children:r}):null]})})}exports.default=p;
2
+ //# sourceMappingURL=AdminConsoleFooter.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AdminConsoleFooter.cjs","sources":["../../../src/components/admin-console-footer/AdminConsoleFooter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport Button from '@/components/button/Button';\nimport styles from './AdminConsoleFooter.module.scss';\n\nexport type AdminConsoleFooterStatus = 'none' | 'warning' | 'error';\n\nexport interface AdminConsoleFooterProps {\n /** Primary footer action label. Default: \"Save\". Accepts translated nodes. */\n saveLabel?: ReactNode;\n /** Default: \"Cancel\". Accepts translated nodes. */\n cancelLabel?: ReactNode;\n onSave?: () => void;\n onCancel?: () => void;\n /** When true, Save uses disabled styling until the sheet is actionable. */\n saveDisabled?: boolean;\n /** Optional validation summary beside the buttons. */\n status?: AdminConsoleFooterStatus;\n /**\n * Override default copy when `warning` | `error`. Defaults: \"There are\n * outstanding issues in the form above.\" / \"There are errors in the form above.\"\n */\n statusMessage?: ReactNode;\n className?: string;\n}\n\nconst DEFAULT_WARNING = 'There are outstanding issues in the form above.';\nconst DEFAULT_ERROR = 'There are errors in the form above.';\n\n/**\n * Admin Console Footer pins Save and Cancel to the bottom of System Console form layouts. It\n * mirrors channel composer discipline: one primary commit path, a safe escape hatch, and\n * optional validation status without stealing focus from the draft.\n */\nexport default function AdminConsoleFooter({\n saveLabel = 'Save',\n cancelLabel = 'Cancel',\n onSave,\n onCancel,\n saveDisabled = true,\n status = 'none',\n statusMessage,\n className = '',\n}: AdminConsoleFooterProps) {\n let statusUi: ReactNode = null;\n\n if (status === 'warning') {\n const copy = statusMessage ?? DEFAULT_WARNING;\n statusUi = (\n <>\n <span\n className={styles['admin-console-footer__status-icon']}\n aria-hidden\n >\n <AlertOutlineIcon size={12} />\n </span>\n <span>{copy}</span>\n </>\n );\n }\n\n if (status === 'error') {\n const copy = statusMessage ?? DEFAULT_ERROR;\n statusUi = (\n <>\n <span\n className={styles['admin-console-footer__status-icon']}\n aria-hidden\n >\n <AlertCircleOutlineIcon size={12} />\n </span>\n <span>{copy}</span>\n </>\n );\n }\n\n const statusMod =\n status === 'warning'\n ? styles['admin-console-footer--status-warning']\n : status === 'error'\n ? styles['admin-console-footer--status-error']\n : '';\n\n return (\n <footer\n className={[styles['admin-console-footer'], statusMod, className]\n .filter(Boolean)\n .join(' ')\n .trim()}\n role=\"contentinfo\"\n >\n <div className={styles['admin-console-footer__inner']}>\n <div className={styles['admin-console-footer__actions']}>\n <Button\n type=\"button\"\n size=\"medium\"\n emphasis=\"primary\"\n disabled={saveDisabled}\n onClick={onSave}\n >\n {saveLabel}\n </Button>\n <Button\n type=\"button\"\n size=\"medium\"\n emphasis=\"tertiary\"\n onClick={onCancel}\n >\n {cancelLabel}\n </Button>\n </div>\n {statusUi != null ? (\n <div className={styles['admin-console-footer__status']} role=\"alert\">\n {statusUi}\n </div>\n ) : null}\n </div>\n </footer>\n );\n}\n"],"names":["DEFAULT_WARNING","DEFAULT_ERROR","AdminConsoleFooter","saveLabel","cancelLabel","onSave","onCancel","saveDisabled","status","statusMessage","className","statusUi","copy","jsxs","Fragment","jsx","styles","AlertOutlineIcon","AlertCircleOutlineIcon","statusMod","Button"],"mappings":"4WA2BMA,EAAkB,kDAClBC,EAAgB,sCAOtB,SAAwBC,EAAmB,CACzC,UAAAC,EAAY,OACZ,YAAAC,EAAc,SACd,OAAAC,EACA,SAAAC,EACA,aAAAC,EAAe,GACf,OAAAC,EAAS,OACT,cAAAC,EACA,UAAAC,EAAY,EACd,EAA4B,CAC1B,IAAIC,EAAsB,KAE1B,GAAIH,IAAW,UAAW,CACxB,MAAMI,EAAOH,GAAiBT,EAC9BW,EACEE,EAAAA,KAAAC,WAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,OAAA,CACC,UAAWC,EAAAA,QAAO,mCAAmC,EACrD,cAAW,GAEX,SAAAD,EAAAA,IAACE,EAAA,CAAiB,KAAM,EAAA,CAAI,CAAA,CAAA,EAE9BF,EAAAA,IAAC,QAAM,SAAAH,CAAA,CAAK,CAAA,EACd,CAEJ,CAEA,GAAIJ,IAAW,QAAS,CACtB,MAAMI,EAAOH,GAAiBR,EAC9BU,EACEE,EAAAA,KAAAC,WAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,OAAA,CACC,UAAWC,EAAAA,QAAO,mCAAmC,EACrD,cAAW,GAEX,SAAAD,EAAAA,IAACG,EAAA,CAAuB,KAAM,EAAA,CAAI,CAAA,CAAA,EAEpCH,EAAAA,IAAC,QAAM,SAAAH,CAAA,CAAK,CAAA,EACd,CAEJ,CAEA,MAAMO,EACJX,IAAW,UACPQ,UAAO,sCAAsC,EAC7CR,IAAW,QACTQ,UAAO,oCAAoC,EAC3C,GAER,OACED,EAAAA,IAAC,SAAA,CACC,UAAW,CAACC,EAAAA,QAAO,sBAAsB,EAAGG,EAAWT,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG,EACR,KAAA,EACH,KAAK,cAEL,SAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWG,UAAO,6BAA6B,EAClD,SAAA,CAAAH,EAAAA,KAAC,MAAA,CAAI,UAAWG,EAAAA,QAAO,+BAA+B,EACpD,SAAA,CAAAD,EAAAA,IAACK,EAAAA,QAAA,CACC,KAAK,SACL,KAAK,SACL,SAAS,UACT,SAAUb,EACV,QAASF,EAER,SAAAF,CAAA,CAAA,EAEHY,EAAAA,IAACK,EAAAA,QAAA,CACC,KAAK,SACL,KAAK,SACL,SAAS,WACT,QAASd,EAER,SAAAF,CAAA,CAAA,CACH,EACF,EACCO,GAAY,KACXI,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,8BAA8B,EAAG,KAAK,QAC1D,SAAAL,CAAA,CACH,EACE,IAAA,CAAA,CACN,CAAA,CAAA,CAGN"}
@@ -0,0 +1 @@
1
+ ._admin-console-footer_rqy27_2{display:flex;flex-direction:column;width:100%;background:var(--center-channel-bg);border-top:1px solid rgba(var(--center-channel-color-rgb),.12)}._admin-console-footer__inner_rqy27_9{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xl);padding:14px var(--spacing-xl);width:100%;box-sizing:border-box}._admin-console-footer__actions_rqy27_18{display:flex;flex-wrap:wrap;gap:var(--spacing-m);align-items:center}._admin-console-footer__status_rqy27_24{display:inline-flex;align-items:center;gap:var(--spacing-xs);flex:1 1 auto;min-width:min(280px,100%);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75)}._admin-console-footer__status-icon_rqy27_35{display:inline-flex;flex-shrink:0;line-height:0}._admin-console-footer__status-icon_rqy27_35 svg{display:block}._admin-console-footer--status-warning_rqy27_43 ._admin-console-footer__status_rqy27_24,._admin-console-footer--status-warning_rqy27_43 ._admin-console-footer__status-icon_rqy27_35{color:var(--color-warning)}._admin-console-footer--status-error_rqy27_46 ._admin-console-footer__status_rqy27_24,._admin-console-footer--status-error_rqy27_46 ._admin-console-footer__status-icon_rqy27_35{color:var(--error-text, var(--color-danger))}
@@ -0,0 +1,27 @@
1
+ import { ReactNode } from 'react';
2
+ export type AdminConsoleFooterStatus = 'none' | 'warning' | 'error';
3
+ export interface AdminConsoleFooterProps {
4
+ /** Primary footer action label. Default: "Save". Accepts translated nodes. */
5
+ saveLabel?: ReactNode;
6
+ /** Default: "Cancel". Accepts translated nodes. */
7
+ cancelLabel?: ReactNode;
8
+ onSave?: () => void;
9
+ onCancel?: () => void;
10
+ /** When true, Save uses disabled styling until the sheet is actionable. */
11
+ saveDisabled?: boolean;
12
+ /** Optional validation summary beside the buttons. */
13
+ status?: AdminConsoleFooterStatus;
14
+ /**
15
+ * Override default copy when `warning` | `error`. Defaults: "There are
16
+ * outstanding issues in the form above." / "There are errors in the form above."
17
+ */
18
+ statusMessage?: ReactNode;
19
+ className?: string;
20
+ }
21
+ /**
22
+ * Admin Console Footer pins Save and Cancel to the bottom of System Console form layouts. It
23
+ * mirrors channel composer discipline: one primary commit path, a safe escape hatch, and
24
+ * optional validation status without stealing focus from the draft.
25
+ */
26
+ export default function AdminConsoleFooter({ saveLabel, cancelLabel, onSave, onCancel, saveDisabled, status, statusMessage, className, }: AdminConsoleFooterProps): import("react/jsx-runtime").JSX.Element;
27
+ //# sourceMappingURL=AdminConsoleFooter.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AdminConsoleFooter.d.ts","sourceRoot":"","sources":["../../../src/components/admin-console-footer/AdminConsoleFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAEpE,MAAM,WAAW,uBAAuB;IACtC,8EAA8E;IAC9E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sDAAsD;IACtD,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,SAAkB,EAClB,WAAsB,EACtB,MAAM,EACN,QAAQ,EACR,YAAmB,EACnB,MAAe,EACf,aAAa,EACb,SAAc,GACf,EAAE,uBAAuB,2CA4EzB"}
@@ -0,0 +1,84 @@
1
+ import { jsx as e, jsxs as i, Fragment as a } from "react/jsx-runtime";
2
+ import ___ from "@mattermost/compass-icons/components/alert-circle-outline.js";const _=___&&___.default?___.default:___;
3
+ import __N from "@mattermost/compass-icons/components/alert-outline.js";const N=__N&&__N.default?__N.default:__N;
4
+ import l from "../button/Button.js";
5
+ import o from "./AdminConsoleFooter.module.scss.js";
6
+ const y = "There are outstanding issues in the form above.", v = "There are errors in the form above.";
7
+ function F({
8
+ saveLabel: c = "Save",
9
+ cancelLabel: m = "Cancel",
10
+ onSave: d,
11
+ onCancel: f,
12
+ saveDisabled: u = !0,
13
+ status: n = "none",
14
+ statusMessage: s,
15
+ className: h = ""
16
+ }) {
17
+ let r = null;
18
+ if (n === "warning") {
19
+ const t = s ?? y;
20
+ r = /* @__PURE__ */ i(a, { children: [
21
+ /* @__PURE__ */ e(
22
+ "span",
23
+ {
24
+ className: o["admin-console-footer__status-icon"],
25
+ "aria-hidden": !0,
26
+ children: /* @__PURE__ */ e(N, { size: 12 })
27
+ }
28
+ ),
29
+ /* @__PURE__ */ e("span", { children: t })
30
+ ] });
31
+ }
32
+ if (n === "error") {
33
+ const t = s ?? v;
34
+ r = /* @__PURE__ */ i(a, { children: [
35
+ /* @__PURE__ */ e(
36
+ "span",
37
+ {
38
+ className: o["admin-console-footer__status-icon"],
39
+ "aria-hidden": !0,
40
+ children: /* @__PURE__ */ e(_, { size: 12 })
41
+ }
42
+ ),
43
+ /* @__PURE__ */ e("span", { children: t })
44
+ ] });
45
+ }
46
+ const p = n === "warning" ? o["admin-console-footer--status-warning"] : n === "error" ? o["admin-console-footer--status-error"] : "";
47
+ return /* @__PURE__ */ e(
48
+ "footer",
49
+ {
50
+ className: [o["admin-console-footer"], p, h].filter(Boolean).join(" ").trim(),
51
+ role: "contentinfo",
52
+ children: /* @__PURE__ */ i("div", { className: o["admin-console-footer__inner"], children: [
53
+ /* @__PURE__ */ i("div", { className: o["admin-console-footer__actions"], children: [
54
+ /* @__PURE__ */ e(
55
+ l,
56
+ {
57
+ type: "button",
58
+ size: "medium",
59
+ emphasis: "primary",
60
+ disabled: u,
61
+ onClick: d,
62
+ children: c
63
+ }
64
+ ),
65
+ /* @__PURE__ */ e(
66
+ l,
67
+ {
68
+ type: "button",
69
+ size: "medium",
70
+ emphasis: "tertiary",
71
+ onClick: f,
72
+ children: m
73
+ }
74
+ )
75
+ ] }),
76
+ r != null ? /* @__PURE__ */ e("div", { className: o["admin-console-footer__status"], role: "alert", children: r }) : null
77
+ ] })
78
+ }
79
+ );
80
+ }
81
+ export {
82
+ F as default
83
+ };
84
+ //# sourceMappingURL=AdminConsoleFooter.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AdminConsoleFooter.js","sources":["../../../src/components/admin-console-footer/AdminConsoleFooter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport Button from '@/components/button/Button';\nimport styles from './AdminConsoleFooter.module.scss';\n\nexport type AdminConsoleFooterStatus = 'none' | 'warning' | 'error';\n\nexport interface AdminConsoleFooterProps {\n /** Primary footer action label. Default: \"Save\". Accepts translated nodes. */\n saveLabel?: ReactNode;\n /** Default: \"Cancel\". Accepts translated nodes. */\n cancelLabel?: ReactNode;\n onSave?: () => void;\n onCancel?: () => void;\n /** When true, Save uses disabled styling until the sheet is actionable. */\n saveDisabled?: boolean;\n /** Optional validation summary beside the buttons. */\n status?: AdminConsoleFooterStatus;\n /**\n * Override default copy when `warning` | `error`. Defaults: \"There are\n * outstanding issues in the form above.\" / \"There are errors in the form above.\"\n */\n statusMessage?: ReactNode;\n className?: string;\n}\n\nconst DEFAULT_WARNING = 'There are outstanding issues in the form above.';\nconst DEFAULT_ERROR = 'There are errors in the form above.';\n\n/**\n * Admin Console Footer pins Save and Cancel to the bottom of System Console form layouts. It\n * mirrors channel composer discipline: one primary commit path, a safe escape hatch, and\n * optional validation status without stealing focus from the draft.\n */\nexport default function AdminConsoleFooter({\n saveLabel = 'Save',\n cancelLabel = 'Cancel',\n onSave,\n onCancel,\n saveDisabled = true,\n status = 'none',\n statusMessage,\n className = '',\n}: AdminConsoleFooterProps) {\n let statusUi: ReactNode = null;\n\n if (status === 'warning') {\n const copy = statusMessage ?? DEFAULT_WARNING;\n statusUi = (\n <>\n <span\n className={styles['admin-console-footer__status-icon']}\n aria-hidden\n >\n <AlertOutlineIcon size={12} />\n </span>\n <span>{copy}</span>\n </>\n );\n }\n\n if (status === 'error') {\n const copy = statusMessage ?? DEFAULT_ERROR;\n statusUi = (\n <>\n <span\n className={styles['admin-console-footer__status-icon']}\n aria-hidden\n >\n <AlertCircleOutlineIcon size={12} />\n </span>\n <span>{copy}</span>\n </>\n );\n }\n\n const statusMod =\n status === 'warning'\n ? styles['admin-console-footer--status-warning']\n : status === 'error'\n ? styles['admin-console-footer--status-error']\n : '';\n\n return (\n <footer\n className={[styles['admin-console-footer'], statusMod, className]\n .filter(Boolean)\n .join(' ')\n .trim()}\n role=\"contentinfo\"\n >\n <div className={styles['admin-console-footer__inner']}>\n <div className={styles['admin-console-footer__actions']}>\n <Button\n type=\"button\"\n size=\"medium\"\n emphasis=\"primary\"\n disabled={saveDisabled}\n onClick={onSave}\n >\n {saveLabel}\n </Button>\n <Button\n type=\"button\"\n size=\"medium\"\n emphasis=\"tertiary\"\n onClick={onCancel}\n >\n {cancelLabel}\n </Button>\n </div>\n {statusUi != null ? (\n <div className={styles['admin-console-footer__status']} role=\"alert\">\n {statusUi}\n </div>\n ) : null}\n </div>\n </footer>\n );\n}\n"],"names":["DEFAULT_WARNING","DEFAULT_ERROR","AdminConsoleFooter","saveLabel","cancelLabel","onSave","onCancel","saveDisabled","status","statusMessage","className","statusUi","copy","jsxs","Fragment","jsx","styles","AlertOutlineIcon","AlertCircleOutlineIcon","statusMod","Button"],"mappings":";;;;;AA2BA,MAAMA,IAAkB,mDAClBC,IAAgB;AAOtB,SAAwBC,EAAmB;AAAA,EACzC,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,QAAAC,IAAS;AAAA,EACT,eAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAA4B;AAC1B,MAAIC,IAAsB;AAE1B,MAAIH,MAAW,WAAW;AACxB,UAAMI,IAAOH,KAAiBT;AAC9B,IAAAW,IACE,gBAAAE,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAO,mCAAmC;AAAA,UACrD,eAAW;AAAA,UAEX,UAAA,gBAAAD,EAACE,GAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAE9B,gBAAAF,EAAC,UAAM,UAAAH,EAAA,CAAK;AAAA,IAAA,GACd;AAAA,EAEJ;AAEA,MAAIJ,MAAW,SAAS;AACtB,UAAMI,IAAOH,KAAiBR;AAC9B,IAAAU,IACE,gBAAAE,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAO,mCAAmC;AAAA,UACrD,eAAW;AAAA,UAEX,UAAA,gBAAAD,EAACG,GAAA,EAAuB,MAAM,GAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAEpC,gBAAAH,EAAC,UAAM,UAAAH,EAAA,CAAK;AAAA,IAAA,GACd;AAAA,EAEJ;AAEA,QAAMO,IACJX,MAAW,YACPQ,EAAO,sCAAsC,IAC7CR,MAAW,UACTQ,EAAO,oCAAoC,IAC3C;AAER,SACE,gBAAAD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACC,EAAO,sBAAsB,GAAGG,GAAWT,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG,EACR,KAAA;AAAA,MACH,MAAK;AAAA,MAEL,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWG,EAAO,6BAA6B,GAClD,UAAA;AAAA,QAAA,gBAAAH,EAAC,OAAA,EAAI,WAAWG,EAAO,+BAA+B,GACpD,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAK;AAAA,cACL,UAAS;AAAA,cACT,UAAUb;AAAA,cACV,SAASF;AAAA,cAER,UAAAF;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAY;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAK;AAAA,cACL,UAAS;AAAA,cACT,SAASd;AAAA,cAER,UAAAF;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,GACF;AAAA,QACCO,KAAY,OACX,gBAAAI,EAAC,OAAA,EAAI,WAAWC,EAAO,8BAA8B,GAAG,MAAK,SAC1D,UAAAL,EAAA,CACH,IACE;AAAA,MAAA,EAAA,CACN;AAAA,IAAA;AAAA,EAAA;AAGN;"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./AdminConsoleFooter.css');const o={"admin-console-footer":"_admin-console-footer_rqy27_2","admin-console-footer__inner":"_admin-console-footer__inner_rqy27_9","admin-console-footer__actions":"_admin-console-footer__actions_rqy27_18","admin-console-footer__status":"_admin-console-footer__status_rqy27_24","admin-console-footer__status-icon":"_admin-console-footer__status-icon_rqy27_35","admin-console-footer--status-warning":"_admin-console-footer--status-warning_rqy27_43","admin-console-footer--status-error":"_admin-console-footer--status-error_rqy27_46"};exports.default=o;
2
+ //# sourceMappingURL=AdminConsoleFooter.module.scss.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AdminConsoleFooter.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,13 @@
1
+ import './AdminConsoleFooter.css';const o = {
2
+ "admin-console-footer": "_admin-console-footer_rqy27_2",
3
+ "admin-console-footer__inner": "_admin-console-footer__inner_rqy27_9",
4
+ "admin-console-footer__actions": "_admin-console-footer__actions_rqy27_18",
5
+ "admin-console-footer__status": "_admin-console-footer__status_rqy27_24",
6
+ "admin-console-footer__status-icon": "_admin-console-footer__status-icon_rqy27_35",
7
+ "admin-console-footer--status-warning": "_admin-console-footer--status-warning_rqy27_43",
8
+ "admin-console-footer--status-error": "_admin-console-footer--status-error_rqy27_46"
9
+ };
10
+ export {
11
+ o as default
12
+ };
13
+ //# sourceMappingURL=AdminConsoleFooter.module.scss.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AdminConsoleFooter.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./AdminConsoleFooter.cjs");exports.AdminConsoleFooter=e.default;
2
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,3 @@
1
+ export { default as AdminConsoleFooter } from './AdminConsoleFooter';
2
+ export type { AdminConsoleFooterProps, AdminConsoleFooterStatus, } from './AdminConsoleFooter';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/admin-console-footer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,YAAY,EACV,uBAAuB,EACvB,wBAAwB,GACzB,MAAM,sBAAsB,CAAC"}
@@ -0,0 +1,5 @@
1
+ import { default as r } from "./AdminConsoleFooter.js";
2
+ export {
3
+ r as AdminConsoleFooter
4
+ };
5
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),c=require("react"),k=require("../admin-panel-header/AdminPanelHeader.cjs"),l=require("./AdminPanel.module.scss.cjs");function z({title:u,subtitle:f,headerActions:m,children:n,className:p="",iconLeft:_=!1,leadingIcon:v,showBeta:j=!1,betaLabel:x="Beta",showEnterpriseLabel:E=!1,enterpriseLabel:N="Enterprise",showButton:q=!1,buttonLabel:y="Button",onButtonClick:A,showSwitch:B=!1,switchLabel:P="Off",switchChecked:g,defaultSwitchChecked:w,onSwitchChange:D,switchDisabled:H,expandable:e=!1,expandedState:t,defaultExpandedState:I="collapsed",onExpandedStateChange:a,expandLabel:M,collapseLabel:O,...R}){const i=c.useId(),[S,T]=c.useState(I),o=e&&t!==void 0,s=(e?o?t:S:"expanded")==="expanded",b=r=>{e&&(o||T(r),a==null||a(r))},h=()=>{b(s?"collapsed":"expanded")},U=!e||s;return d.jsxs("section",{...R,className:[l.default["admin-panel"],p].join(" ").trim(),"aria-labelledby":i,children:[d.jsx(k.default,{titleId:i,title:u,subtitle:f,headerActions:m,iconLeft:_,leadingIcon:v,showBeta:j,betaLabel:x,showEnterpriseLabel:E,enterpriseLabel:N,showButton:q,buttonLabel:y,onButtonClick:A,showSwitch:B,switchLabel:P,switchChecked:g,defaultSwitchChecked:w,onSwitchChange:D,switchDisabled:H,expandable:e,isExpanded:s,onToggleExpand:h,expandLabel:M,collapseLabel:O,showDivider:U}),e?d.jsx("div",{className:[l.default["admin-panel__collapse"],s?l.default["admin-panel__collapse--expanded"]:""].filter(Boolean).join(" "),"aria-hidden":!s,children:d.jsx("div",{className:l.default["admin-panel__collapse-inner"],children:d.jsx("div",{className:l.default["admin-panel__body"],children:n})})}):d.jsx("div",{className:l.default["admin-panel__body"],children:n})]})}exports.default=z;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),i=require("react"),W=require("../admin-panel-header/AdminPanelHeader.cjs"),t=require("./AdminPanel.module.scss.cjs");function X(m){const{title:l,children:c,footer:d,className:w="",...E}=m,{subtitle:v,headerActions:S,iconLeft:_=!1,leadingIcon:j,showBeta:g=!1,betaLabel:L="Beta",showEnterpriseLabel:B=!1,enterpriseLabel:y="Enterprise",showButton:C=!1,buttonLabel:A="Button",onButtonClick:N,showSwitch:P=!1,switchLabel:q="Off",switchChecked:k,defaultSwitchChecked:D,onSwitchChange:H,switchDisabled:I,expandable:R=!1,expandedState:r,defaultExpandedState:F="collapsed",onExpandedStateChange:s,expandLabel:M,collapseLabel:O,...T}=E,u=i.useId(),o=l!=null&&l!==!1&&l!=="",[U,z]=i.useState(F),n=o&&R,p=n&&r!==void 0,a=(n?p?r:U:"expanded")==="expanded",G=b=>{n&&(p||z(b),s==null||s(b))},J=()=>{G(a?"collapsed":"expanded")},h=i.Children.toArray(c).length>0,K=d!=null,f=h||K,Q=f&&(!n||a),x=h?e.jsx("div",{className:t.default["admin-panel__body"],children:c}):null,V=f?n?e.jsx("div",{className:[t.default["admin-panel__collapse"],a?t.default["admin-panel__collapse--expanded"]:""].filter(Boolean).join(" "),"aria-hidden":!a,inert:!a,children:e.jsxs("div",{className:t.default["admin-panel__collapse-inner"],children:[x,d]})}):e.jsxs(e.Fragment,{children:[x,d]}):null;return e.jsxs("section",{...T,className:[t.default["admin-panel"],w].join(" ").trim(),"aria-labelledby":o?u:void 0,children:[o?e.jsx(W.default,{titleId:u,title:l,subtitle:v,headerActions:S,iconLeft:_,leadingIcon:j,showBeta:g,betaLabel:L,showEnterpriseLabel:B,enterpriseLabel:y,showButton:C,buttonLabel:A,onButtonClick:N,showSwitch:P,switchLabel:q,switchChecked:k,defaultSwitchChecked:D,onSwitchChange:H,switchDisabled:I,expandable:n,isExpanded:a,onToggleExpand:J,expandLabel:M,collapseLabel:O,showDivider:Q}):null,V]})}exports.default=X;
2
2
  //# sourceMappingURL=AdminPanel.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"AdminPanel.cjs","sources":["../../../src/components/admin-panel/AdminPanel.tsx"],"sourcesContent":["import {\n useId,\n useState,\n type ChangeEvent,\n type HTMLAttributes,\n type ReactNode,\n} from 'react';\nimport AdminPanelHeader, {\n type AdminPanelExpandedState,\n} from '@/components/admin-panel-header/AdminPanelHeader';\nimport styles from './AdminPanel.module.scss';\n\nexport type { AdminPanelExpandedState };\n\nexport interface AdminPanelProps extends Omit<\n HTMLAttributes<HTMLElement>,\n 'title' | 'children'\n> {\n title: ReactNode;\n subtitle?: ReactNode;\n children?: ReactNode;\n className?: string;\n headerActions?: ReactNode;\n iconLeft?: boolean;\n /** Icon forwarded to `AdminPanelHeader`'s 44×44 circular pill. Pass `<Icon glyph={<SomeIcon />} size=\"20\" />`. */\n leadingIcon?: ReactNode;\n showBeta?: boolean;\n /** Default: \"Beta\". Accepts translated nodes. */\n betaLabel?: ReactNode;\n showEnterpriseLabel?: boolean;\n /** Default: \"Enterprise\". Accepts translated nodes. */\n enterpriseLabel?: ReactNode;\n showButton?: boolean;\n /** Default: \"Button\". Accepts translated nodes. */\n buttonLabel?: ReactNode;\n onButtonClick?: () => void;\n showSwitch?: boolean;\n switchLabel?: ReactNode;\n switchChecked?: boolean;\n defaultSwitchChecked?: boolean;\n onSwitchChange?: (\n checked: boolean,\n event: ChangeEvent<HTMLInputElement>,\n ) => void;\n switchDisabled?: boolean;\n expandable?: boolean;\n expandedState?: AdminPanelExpandedState;\n defaultExpandedState?: AdminPanelExpandedState;\n onExpandedStateChange?: (state: AdminPanelExpandedState) => void;\n /** Accessible name for the expand button while collapsed. Default: \"Expand section\". */\n expandLabel?: string;\n /** Accessible name for the expand button while expanded. Default: \"Collapse section\". */\n collapseLabel?: string;\n}\n\n/**\n * System Console admin settings panel: `AdminPanelHeader` plus a body slot\n * for grouped fields. Expand/collapse state is owned here and passed to the header.\n */\nexport default function AdminPanel({\n title,\n subtitle,\n headerActions,\n children,\n className = '',\n iconLeft = false,\n leadingIcon,\n showBeta = false,\n betaLabel = 'Beta',\n showEnterpriseLabel = false,\n enterpriseLabel = 'Enterprise',\n showButton = false,\n buttonLabel = 'Button',\n onButtonClick,\n showSwitch = false,\n switchLabel = 'Off',\n switchChecked,\n defaultSwitchChecked,\n onSwitchChange,\n switchDisabled,\n expandable = false,\n expandedState: expandedStateProp,\n defaultExpandedState = 'collapsed',\n onExpandedStateChange,\n expandLabel,\n collapseLabel,\n ...rest\n}: AdminPanelProps) {\n const titleId = useId();\n\n const [uncontrolledExpanded, setUncontrolledExpanded] =\n useState<AdminPanelExpandedState>(defaultExpandedState);\n\n const isExpandControlled = expandable && expandedStateProp !== undefined;\n const resolvedExpandedState: AdminPanelExpandedState = !expandable\n ? 'expanded'\n : isExpandControlled\n ? expandedStateProp!\n : uncontrolledExpanded;\n\n const isExpanded = resolvedExpandedState === 'expanded';\n\n const setExpandedState = (next: AdminPanelExpandedState) => {\n if (!expandable) return;\n if (!isExpandControlled) {\n setUncontrolledExpanded(next);\n }\n onExpandedStateChange?.(next);\n };\n\n const toggleExpanded = () => {\n setExpandedState(isExpanded ? 'collapsed' : 'expanded');\n };\n\n const showHeaderDivider = !expandable || isExpanded;\n\n return (\n <section\n {...rest}\n className={[styles['admin-panel'], className].join(' ').trim()}\n aria-labelledby={titleId}\n >\n <AdminPanelHeader\n titleId={titleId}\n title={title}\n subtitle={subtitle}\n headerActions={headerActions}\n iconLeft={iconLeft}\n leadingIcon={leadingIcon}\n showBeta={showBeta}\n betaLabel={betaLabel}\n showEnterpriseLabel={showEnterpriseLabel}\n enterpriseLabel={enterpriseLabel}\n showButton={showButton}\n buttonLabel={buttonLabel}\n onButtonClick={onButtonClick}\n showSwitch={showSwitch}\n switchLabel={switchLabel}\n switchChecked={switchChecked}\n defaultSwitchChecked={defaultSwitchChecked}\n onSwitchChange={onSwitchChange}\n switchDisabled={switchDisabled}\n expandable={expandable}\n isExpanded={isExpanded}\n onToggleExpand={toggleExpanded}\n expandLabel={expandLabel}\n collapseLabel={collapseLabel}\n showDivider={showHeaderDivider}\n />\n {expandable ? (\n <div\n className={[\n styles['admin-panel__collapse'],\n isExpanded ? styles['admin-panel__collapse--expanded'] : '',\n ]\n .filter(Boolean)\n .join(' ')}\n aria-hidden={!isExpanded}\n >\n <div className={styles['admin-panel__collapse-inner']}>\n <div className={styles['admin-panel__body']}>{children}</div>\n </div>\n </div>\n ) : (\n <div className={styles['admin-panel__body']}>{children}</div>\n )}\n </section>\n );\n}\n"],"names":["AdminPanel","title","subtitle","headerActions","children","className","iconLeft","leadingIcon","showBeta","betaLabel","showEnterpriseLabel","enterpriseLabel","showButton","buttonLabel","onButtonClick","showSwitch","switchLabel","switchChecked","defaultSwitchChecked","onSwitchChange","switchDisabled","expandable","expandedStateProp","defaultExpandedState","onExpandedStateChange","expandLabel","collapseLabel","rest","titleId","useId","uncontrolledExpanded","setUncontrolledExpanded","useState","isExpandControlled","isExpanded","setExpandedState","next","toggleExpanded","showHeaderDivider","jsxs","styles","jsx","AdminPanelHeader"],"mappings":"oQA2DA,SAAwBA,EAAW,CACjC,MAAAC,EACA,SAAAC,EACA,cAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EAAW,GACX,YAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,OACZ,oBAAAC,EAAsB,GACtB,gBAAAC,EAAkB,aAClB,WAAAC,EAAa,GACb,YAAAC,EAAc,SACd,cAAAC,EACA,WAAAC,EAAa,GACb,YAAAC,EAAc,MACd,cAAAC,EACA,qBAAAC,EACA,eAAAC,EACA,eAAAC,EACA,WAAAC,EAAa,GACb,cAAeC,EACf,qBAAAC,EAAuB,YACvB,sBAAAC,EACA,YAAAC,EACA,cAAAC,EACA,GAAGC,CACL,EAAoB,CAClB,MAAMC,EAAUC,EAAAA,MAAA,EAEV,CAACC,EAAsBC,CAAuB,EAClDC,EAAAA,SAAkCT,CAAoB,EAElDU,EAAqBZ,GAAcC,IAAsB,OAOzDY,GANkDb,EAEpDY,EACEX,EACAQ,EAHF,cAKyC,WAEvCK,EAAoBC,GAAkC,CACrDf,IACAY,GACHF,EAAwBK,CAAI,EAE9BZ,GAAA,MAAAA,EAAwBY,GAC1B,EAEMC,EAAiB,IAAM,CAC3BF,EAAiBD,EAAa,YAAc,UAAU,CACxD,EAEMI,EAAoB,CAACjB,GAAca,EAEzC,OACEK,EAAAA,KAAC,UAAA,CACE,GAAGZ,EACJ,UAAW,CAACa,EAAAA,QAAO,aAAa,EAAGnC,CAAS,EAAE,KAAK,GAAG,EAAE,KAAA,EACxD,kBAAiBuB,EAEjB,SAAA,CAAAa,EAAAA,IAACC,EAAAA,QAAA,CACC,QAAAd,EACA,MAAA3B,EACA,SAAAC,EACA,cAAAC,EACA,SAAAG,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,oBAAAC,EACA,gBAAAC,EACA,WAAAC,EACA,YAAAC,EACA,cAAAC,EACA,WAAAC,EACA,YAAAC,EACA,cAAAC,EACA,qBAAAC,EACA,eAAAC,EACA,eAAAC,EACA,WAAAC,EACA,WAAAa,EACA,eAAgBG,EAChB,YAAAZ,EACA,cAAAC,EACA,YAAaY,CAAA,CAAA,EAEdjB,EACCoB,EAAAA,IAAC,MAAA,CACC,UAAW,CACTD,EAAAA,QAAO,uBAAuB,EAC9BN,EAAaM,EAAAA,QAAO,iCAAiC,EAAI,EAAA,EAExD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,cAAa,CAACN,EAEd,SAAAO,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,6BAA6B,EAClD,SAAAC,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,mBAAmB,EAAI,SAAApC,EAAS,CAAA,CACzD,CAAA,CAAA,EAGFqC,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,mBAAmB,EAAI,SAAApC,CAAA,CAAS,CAAA,CAAA,CAAA,CAI/D"}
1
+ {"version":3,"file":"AdminPanel.cjs","sources":["../../../src/components/admin-panel/AdminPanel.tsx"],"sourcesContent":["import {\n Children,\n useId,\n useState,\n type ChangeEvent,\n type HTMLAttributes,\n type ReactNode,\n} from 'react';\nimport AdminPanelHeader, {\n type AdminPanelExpandedState,\n} from '@/components/admin-panel-header/AdminPanelHeader';\nimport styles from './AdminPanel.module.scss';\n\nexport type { AdminPanelExpandedState };\n\n/** Non-null content for required header/body slots (runtime still guards nullish escapes). */\ntype AdminPanelContent = NonNullable<ReactNode>;\n\ntype AdminPanelChromeProps = Omit<\n HTMLAttributes<HTMLElement>,\n 'title' | 'children'\n> & {\n className?: string;\n /**\n * Optional footer rail below the body — typically\n * [`AdminPanelFooter`](/components/admin-panel-footer) with left/right action slots.\n * Collapses with the body when the panel is expandable.\n */\n footer?: ReactNode;\n};\n\ntype AdminPanelHeaderSlotProps = {\n title: AdminPanelContent;\n subtitle?: ReactNode;\n headerActions?: ReactNode;\n iconLeft?: boolean;\n /** Icon forwarded to `AdminPanelHeader`'s 44×44 circular pill. Pass `<Icon glyph={<SomeIcon />} />`. */\n leadingIcon?: ReactNode;\n showBeta?: boolean;\n /** Default: \"Beta\". Accepts translated nodes. */\n betaLabel?: ReactNode;\n showEnterpriseLabel?: boolean;\n /** Default: \"Enterprise\". Accepts translated nodes. */\n enterpriseLabel?: ReactNode;\n showButton?: boolean;\n /** Default: \"Button\". Accepts translated nodes. */\n buttonLabel?: ReactNode;\n onButtonClick?: () => void;\n showSwitch?: boolean;\n switchLabel?: ReactNode;\n switchChecked?: boolean;\n defaultSwitchChecked?: boolean;\n onSwitchChange?: (\n checked: boolean,\n event: ChangeEvent<HTMLInputElement>,\n ) => void;\n switchDisabled?: boolean;\n expandable?: boolean;\n expandedState?: AdminPanelExpandedState;\n defaultExpandedState?: AdminPanelExpandedState;\n onExpandedStateChange?: (state: AdminPanelExpandedState) => void;\n /** Accessible name for the expand button while collapsed. Default: \"Expand section\". */\n expandLabel?: string;\n /** Accessible name for the expand button while expanded. Default: \"Collapse section\". */\n collapseLabel?: string;\n};\n\n/** Panel with a header. Body and footer are optional. */\ntype AdminPanelWithHeaderProps = AdminPanelChromeProps &\n AdminPanelHeaderSlotProps & {\n children?: ReactNode;\n };\n\n/**\n * Header-less panel. `children` (body) are required — footer alone is not enough.\n * Header chrome props (`subtitle`, `expandable`, …) are not accepted on this variant.\n */\ntype AdminPanelWithoutHeaderProps = AdminPanelChromeProps & {\n title?: undefined;\n children: AdminPanelContent;\n};\n\n/**\n * System Console admin settings panel. Provide a `title` (header), `children`\n * (body), or both. Footer is always optional. Header-only and body-only panels\n * are valid; footer-only is not.\n */\nexport type AdminPanelProps =\n | AdminPanelWithHeaderProps\n | AdminPanelWithoutHeaderProps;\n\n/**\n * Admin Panel is the bordered sheet used throughout System Console for a single\n * settings section. It can include an\n * [`Admin Panel Header`](/components/admin-panel-header), a body where grouped\n * fields and help text live, and an optional\n * [`Admin Panel Footer`](/components/admin-panel-footer) for sectional actions.\n * Provide a header, a body, or both — footer alone is not enough. Expand/collapse\n * state is owned here and passed to the header when present.\n */\nexport default function AdminPanel(props: AdminPanelProps) {\n const {\n title,\n children,\n footer,\n className = '',\n ...rest\n } = props as AdminPanelWithHeaderProps;\n\n const {\n subtitle,\n headerActions,\n iconLeft = false,\n leadingIcon,\n showBeta = false,\n betaLabel = 'Beta',\n showEnterpriseLabel = false,\n enterpriseLabel = 'Enterprise',\n showButton = false,\n buttonLabel = 'Button',\n onButtonClick,\n showSwitch = false,\n switchLabel = 'Off',\n switchChecked,\n defaultSwitchChecked,\n onSwitchChange,\n switchDisabled,\n expandable = false,\n expandedState: expandedStateProp,\n defaultExpandedState = 'collapsed',\n onExpandedStateChange,\n expandLabel,\n collapseLabel,\n ...domRest\n } = rest;\n\n const titleId = useId();\n // Treat nullish / false / '' as no header so JS callers and type escapes stay safe.\n const hasHeader = title != null && title !== false && title !== '';\n\n const [uncontrolledExpanded, setUncontrolledExpanded] =\n useState<AdminPanelExpandedState>(defaultExpandedState);\n\n // Expand/collapse lives on the header; without one, content stays visible.\n const canExpand = hasHeader && expandable;\n const isExpandControlled = canExpand && expandedStateProp !== undefined;\n const resolvedExpandedState: AdminPanelExpandedState = !canExpand\n ? 'expanded'\n : isExpandControlled\n ? expandedStateProp!\n : uncontrolledExpanded;\n\n const isExpanded = resolvedExpandedState === 'expanded';\n\n const setExpandedState = (next: AdminPanelExpandedState) => {\n if (!canExpand) return;\n if (!isExpandControlled) {\n setUncontrolledExpanded(next);\n }\n onExpandedStateChange?.(next);\n };\n\n const toggleExpanded = () => {\n setExpandedState(isExpanded ? 'collapsed' : 'expanded');\n };\n\n const hasBody = Children.toArray(children).length > 0;\n const hasFooter = footer != null;\n const hasContent = hasBody || hasFooter;\n // Skip the header divider when there is no body/footer so header-only\n // panels don’t show an orphan rule above the card edge.\n const showHeaderDivider = hasContent && (!canExpand || isExpanded);\n\n const body = hasBody ? (\n <div className={styles['admin-panel__body']}>{children}</div>\n ) : null;\n\n const content = hasContent ? (\n canExpand ? (\n <div\n className={[\n styles['admin-panel__collapse'],\n isExpanded ? styles['admin-panel__collapse--expanded'] : '',\n ]\n .filter(Boolean)\n .join(' ')}\n aria-hidden={!isExpanded}\n inert={!isExpanded}\n >\n <div className={styles['admin-panel__collapse-inner']}>\n {body}\n {footer}\n </div>\n </div>\n ) : (\n <>\n {body}\n {footer}\n </>\n )\n ) : null;\n\n return (\n <section\n {...domRest}\n className={[styles['admin-panel'], className].join(' ').trim()}\n aria-labelledby={hasHeader ? titleId : undefined}\n >\n {hasHeader ? (\n <AdminPanelHeader\n titleId={titleId}\n title={title}\n subtitle={subtitle}\n headerActions={headerActions}\n iconLeft={iconLeft}\n leadingIcon={leadingIcon}\n showBeta={showBeta}\n betaLabel={betaLabel}\n showEnterpriseLabel={showEnterpriseLabel}\n enterpriseLabel={enterpriseLabel}\n showButton={showButton}\n buttonLabel={buttonLabel}\n onButtonClick={onButtonClick}\n showSwitch={showSwitch}\n switchLabel={switchLabel}\n switchChecked={switchChecked}\n defaultSwitchChecked={defaultSwitchChecked}\n onSwitchChange={onSwitchChange}\n switchDisabled={switchDisabled}\n expandable={canExpand}\n isExpanded={isExpanded}\n onToggleExpand={toggleExpanded}\n expandLabel={expandLabel}\n collapseLabel={collapseLabel}\n showDivider={showHeaderDivider}\n />\n ) : null}\n {content}\n </section>\n );\n}\n"],"names":["AdminPanel","props","title","children","footer","className","rest","subtitle","headerActions","iconLeft","leadingIcon","showBeta","betaLabel","showEnterpriseLabel","enterpriseLabel","showButton","buttonLabel","onButtonClick","showSwitch","switchLabel","switchChecked","defaultSwitchChecked","onSwitchChange","switchDisabled","expandable","expandedStateProp","defaultExpandedState","onExpandedStateChange","expandLabel","collapseLabel","domRest","titleId","useId","hasHeader","uncontrolledExpanded","setUncontrolledExpanded","useState","canExpand","isExpandControlled","isExpanded","setExpandedState","next","toggleExpanded","hasBody","Children","hasFooter","hasContent","showHeaderDivider","body","jsx","styles","content","jsxs","Fragment","AdminPanelHeader"],"mappings":"oQAoGA,SAAwBA,EAAWC,EAAwB,CACzD,KAAM,CACJ,MAAAC,EACA,SAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CAAA,EACDL,EAEE,CACJ,SAAAM,EACA,cAAAC,EACA,SAAAC,EAAW,GACX,YAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,OACZ,oBAAAC,EAAsB,GACtB,gBAAAC,EAAkB,aAClB,WAAAC,EAAa,GACb,YAAAC,EAAc,SACd,cAAAC,EACA,WAAAC,EAAa,GACb,YAAAC,EAAc,MACd,cAAAC,EACA,qBAAAC,EACA,eAAAC,EACA,eAAAC,EACA,WAAAC,EAAa,GACb,cAAeC,EACf,qBAAAC,EAAuB,YACvB,sBAAAC,EACA,YAAAC,EACA,cAAAC,EACA,GAAGC,CAAA,EACDxB,EAEEyB,EAAUC,EAAAA,MAAA,EAEVC,EAAY/B,GAAS,MAAQA,IAAU,IAASA,IAAU,GAE1D,CAACgC,EAAsBC,CAAuB,EAClDC,EAAAA,SAAkCV,CAAoB,EAGlDW,EAAYJ,GAAaT,EACzBc,EAAqBD,GAAaZ,IAAsB,OAOxDc,GANkDF,EAEpDC,EACEb,EACAS,EAHF,cAKyC,WAEvCM,EAAoBC,GAAkC,CACrDJ,IACAC,GACHH,EAAwBM,CAAI,EAE9Bd,GAAA,MAAAA,EAAwBc,GAC1B,EAEMC,EAAiB,IAAM,CAC3BF,EAAiBD,EAAa,YAAc,UAAU,CACxD,EAEMI,EAAUC,EAAAA,SAAS,QAAQzC,CAAQ,EAAE,OAAS,EAC9C0C,EAAYzC,GAAU,KACtB0C,EAAaH,GAAWE,EAGxBE,EAAoBD,IAAe,CAACT,GAAaE,GAEjDS,EAAOL,EACXM,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,mBAAmB,EAAI,SAAA/C,CAAA,CAAS,EACrD,KAEEgD,EAAUL,EACdT,EACEY,EAAAA,IAAC,MAAA,CACC,UAAW,CACTC,EAAAA,QAAO,uBAAuB,EAC9BX,EAAaW,EAAAA,QAAO,iCAAiC,EAAI,EAAA,EAExD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,cAAa,CAACX,EACd,MAAO,CAACA,EAER,SAAAa,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,6BAA6B,EACjD,SAAA,CAAAF,EACA5C,CAAA,CAAA,CACH,CAAA,CAAA,EAGFgD,EAAAA,KAAAC,WAAA,CACG,SAAA,CAAAL,EACA5C,CAAA,CAAA,CACH,EAEA,KAEJ,OACEgD,EAAAA,KAAC,UAAA,CACE,GAAGtB,EACJ,UAAW,CAACoB,EAAAA,QAAO,aAAa,EAAG7C,CAAS,EAAE,KAAK,GAAG,EAAE,KAAA,EACxD,kBAAiB4B,EAAYF,EAAU,OAEtC,SAAA,CAAAE,EACCgB,EAAAA,IAACK,EAAAA,QAAA,CACC,QAAAvB,EACA,MAAA7B,EACA,SAAAK,EACA,cAAAC,EACA,SAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,oBAAAC,EACA,gBAAAC,EACA,WAAAC,EACA,YAAAC,EACA,cAAAC,EACA,WAAAC,EACA,YAAAC,EACA,cAAAC,EACA,qBAAAC,EACA,eAAAC,EACA,eAAAC,EACA,WAAYc,EACZ,WAAAE,EACA,eAAgBG,EAChB,YAAAd,EACA,cAAAC,EACA,YAAakB,CAAA,CAAA,EAEb,KACHI,CAAA,CAAA,CAAA,CAGP"}