@mattermost/compass-ui 0.1.0-alpha.13 → 0.1.0-alpha.15

package/dist/components/right-sidebar-header/RightSidebarHeader.js

@@ -1,84 +1,87 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import __k from "@mattermost/compass-icons/components/arrow-back-ios.js";const k=__k&&__k.default?__k.default:__k;
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import __u from "@mattermost/compass-icons/components/arrow-back-ios.js";const u=__u&&__u.default?__u.default:__u;
 import __v from "@mattermost/compass-icons/components/arrow-collapse.js";const v=__v&&__v.default?__v.default:__v;
-import __I from "@mattermost/compass-icons/components/arrow-expand.js";const I=__I&&__I.default?__I.default:__I;
-import __x from "@mattermost/compass-icons/components/close.js";const x=__x&&__x.default?__x.default:__x;
+import __x from "@mattermost/compass-icons/components/arrow-expand.js";const x=__x&&__x.default?__x.default:__x;
+import __j from "@mattermost/compass-icons/components/close.js";const j=__j&&__j.default?__j.default:__j;
+import __B from "@mattermost/compass-icons/components/dock-window.js";const B=__B&&__B.default?__B.default:__B;
 import i from "../icon/Icon.js";
 import s from "../icon-button/IconButton.js";
-import j from "../tag/Tag.js";
-import r from "./RightSidebarHeader.module.scss.js";
-function F({
-  title: _,
+import A from "../tag/Tag.js";
+import a from "./RightSidebarHeader.module.scss.js";
+function J({
+  title: b,
   secondaryTitle: l,
   tag: o,
-  tagType: b = "info",
-  leadingIcon: t,
+  tagType: g = "info",
+  leadingIcon: c,
   onBack: d,
-  backLabel: g = "Back",
-  onExpand: c,
-  expanded: n = !1,
-  expandLabel: f = "Expand",
-  collapseLabel: N = "Collapse",
-  onClose: h,
-  closeLabel: y = "Close",
-  actionLabel: m,
-  onActionClick: C,
-  actionActive: p = !1,
-  className: u = ""
+  backLabel: f = "Back",
+  onExpand: n,
+  expanded: t = !1,
+  expandLabel: N = "Expand",
+  collapseLabel: y = "Collapse",
+  onPopout: h,
+  popoutLabel: z = "Open in new window",
+  onClose: m,
+  closeLabel: C = "Close",
+  actionLabel: p,
+  onActionClick: k,
+  actionActive: _ = !1,
+  className: w = ""
 }) {
-  const z = [r["right-sidebar-header"], u].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a("div", { className: z, children: [
-    /* @__PURE__ */ a("div", { className: r["right-sidebar-header__left"], children: [
-      /* @__PURE__ */ a("div", { className: r["right-sidebar-header__primary"], children: [
+  const I = [a["right-sidebar-header"], w].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("div", { className: I, children: [
+    /* @__PURE__ */ r("div", { className: a["right-sidebar-header__left"], children: [
+      /* @__PURE__ */ r("div", { className: a["right-sidebar-header__primary"], children: [
         d && /* @__PURE__ */ e(
           s,
           {
-            className: r["right-sidebar-header__back"],
+            className: a["right-sidebar-header__back"],
             size: "small",
-            "aria-label": g,
+            "aria-label": f,
             onClick: d,
-            icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(k, {}) })
+            icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(u, {}) })
           }
         ),
-        t && /* @__PURE__ */ e("span", { className: r["right-sidebar-header__leading-icon"], children: t }),
-        /* @__PURE__ */ e("span", { className: r["right-sidebar-header__title"], children: _ }),
-        o && /* @__PURE__ */ e("span", { className: r["right-sidebar-header__tag"], children: /* @__PURE__ */ e(
-          j,
+        c && /* @__PURE__ */ e("span", { className: a["right-sidebar-header__leading-icon"], children: c }),
+        /* @__PURE__ */ e("span", { className: a["right-sidebar-header__title"], children: b }),
+        o && /* @__PURE__ */ e("span", { className: a["right-sidebar-header__tag"], children: /* @__PURE__ */ e(
+          A,
           {
             label: o,
-            type: b,
+            type: g,
             size: "x-small",
             casing: "all-caps"
           }
         ) })
       ] }),
-      l && /* @__PURE__ */ e("div", { className: r["right-sidebar-header__secondary"], children: /* @__PURE__ */ e("span", { className: r["right-sidebar-header__secondary-text"], children: l }) })
+      l && /* @__PURE__ */ e("div", { className: a["right-sidebar-header__secondary"], children: /* @__PURE__ */ e("span", { className: a["right-sidebar-header__secondary-text"], children: l }) })
     ] }),
-    /* @__PURE__ */ a("div", { className: r["right-sidebar-header__actions"], children: [
-      m && /* @__PURE__ */ e(
+    /* @__PURE__ */ r("div", { className: a["right-sidebar-header__actions"], children: [
+      p && /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           className: [
-            r["right-sidebar-header__action"],
-            p ? r["right-sidebar-header__action--active"] : ""
+            a["right-sidebar-header__action"],
+            _ ? a["right-sidebar-header__action--active"] : ""
           ].filter(Boolean).join(" "),
-          onClick: C,
-          "aria-pressed": p ? !0 : void 0,
-          children: m
+          onClick: k,
+          "aria-pressed": _ ? !0 : void 0,
+          children: p
         }
       ),
-      c && /* @__PURE__ */ e(
+      n && /* @__PURE__ */ e(
         s,
         {
           size: "small",
-          "aria-label": n ? N : f,
-          onClick: c,
+          "aria-label": t ? y : N,
+          onClick: n,
           icon: /* @__PURE__ */ e(
             i,
             {
               size: "16",
-              glyph: n ? /* @__PURE__ */ e(v, {}) : /* @__PURE__ */ e(I, {})
+              glyph: t ? /* @__PURE__ */ e(v, {}) : /* @__PURE__ */ e(x, {})
             }
           )
         }
@@ -87,15 +90,24 @@ function F({
         s,
         {
           size: "small",
-          "aria-label": y,
+          "aria-label": z,
           onClick: h,
-          icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(x, {}) })
+          icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(B, {}) })
+        }
+      ),
+      m && /* @__PURE__ */ e(
+        s,
+        {
+          size: "small",
+          "aria-label": C,
+          onClick: m,
+          icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(j, {}) })
         }
       )
     ] })
   ] });
 }
 export {
-  F as default
+  J as default
 };
 //# sourceMappingURL=RightSidebarHeader.js.map

package/dist/components/right-sidebar-header/RightSidebarHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.js","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","CloseIcon"],"mappings":"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"}
+{"version":3,"file":"RightSidebarHeader.js","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DockWindowIcon from '@mattermost/compass-icons/components/dock-window';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a pop out button (open in a new window) between expand and close, and calls this on click. */\n  onPopout?: () => void;\n  /** Accessible name for the pop out button. Default: \"Open in new window\". */\n  popoutLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onPopout,\n  popoutLabel = 'Open in new window',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onPopout && (\n          <IconButton\n            size=\"small\"\n            aria-label={popoutLabel}\n            onClick={onPopout}\n            icon={<Icon size=\"16\" glyph={<DockWindowIcon />} />}\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onPopout","popoutLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","DockWindowIcon","CloseIcon"],"mappings":"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"}

package/dist/components/switch/Switch.css

@@ -1 +1 @@
-._switch_1hx2q_2{display:flex;align-items:flex-start;width:100%;gap:var(--spacing-m);font-family:var(--font-family-body);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._switch_1hx2q_2:has(._switch__input_1hx2q_12:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._switch_1hx2q_2:has(._switch__input_1hx2q_12:disabled) ._switch__secondary-label_1hx2q_16{color:rgba(var(--center-channel-color-rgb),.56)}._switch__input_1hx2q_12{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;opacity:0;width:100%;height:100%;border:0;cursor:inherit}._switch__input_1hx2q_12:focus-visible{outline:none}._switch__labels_1hx2q_33{display:flex;flex-direction:column;flex:1 1 0;justify-content:center;min-width:0}._switch__label_1hx2q_33{line-height:1}._switch__secondary-label_1hx2q_16{color:rgba(var(--center-channel-color-rgb),.72);margin-top:var(--spacing-xxxxs)}._switch__track_1hx2q_47{position:relative;flex-shrink:0;display:block;box-sizing:border-box;background-color:rgba(var(--center-channel-color-rgb),.32);border-radius:var(--radius-pill);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:focus-visible){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch_1hx2q_2:has(._switch__input_1hx2q_12:not(:disabled)):hover ._switch__track_1hx2q_47{background-color:rgba(var(--center-channel-color-rgb),.4)}._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:checked){background-color:var(--button-bg)}._switch_1hx2q_2:has(._switch__input_1hx2q_12:not(:disabled)):hover ._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:checked){background-color:var(--button-bg)}._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:focus-visible:checked){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:disabled){opacity:.32}._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:disabled:checked){background-color:rgba(var(--center-channel-color-rgb),.32)}._switch__knob_1hx2q_77{position:absolute;left:2px;top:50%;transform:translateY(-50%) translate(0);border-radius:var(--radius-pill);background-color:var(--button-color);box-shadow:var(--elevation-1);transition:transform var(--duration-quick) var(--ease-transition);pointer-events:none}._switch--size-small_1hx2q_88 ._switch__track_1hx2q_47{width:26px;height:16px}._switch--size-small_1hx2q_88 ._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:checked) ._switch__knob_1hx2q_77{transform:translateY(-50%) translate(10px)}._switch--size-small_1hx2q_88 ._switch__knob_1hx2q_77{width:12px;height:12px}._switch--size-small_1hx2q_88 ._switch__label_1hx2q_33,._switch--size-small_1hx2q_88 ._switch__secondary-label_1hx2q_16{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-medium_1hx2q_107 ._switch__track_1hx2q_47{width:32px;height:20px}._switch--size-medium_1hx2q_107 ._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:checked) ._switch__knob_1hx2q_77{transform:translateY(-50%) translate(12px)}._switch--size-medium_1hx2q_107 ._switch__knob_1hx2q_77{width:16px;height:16px}._switch--size-medium_1hx2q_107 ._switch__label_1hx2q_33{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--size-medium_1hx2q_107 ._switch__secondary-label_1hx2q_16{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-large_1hx2q_126 ._switch__track_1hx2q_47{width:40px;height:24px}._switch--size-large_1hx2q_126 ._switch__track_1hx2q_47:has(._switch__input_1hx2q_12:checked) ._switch__knob_1hx2q_77{transform:translateY(-50%) translate(16px)}._switch--size-large_1hx2q_126 ._switch__knob_1hx2q_77{width:20px;height:20px}._switch--size-large_1hx2q_126 ._switch__label_1hx2q_33{font-size:var(--font-size-200);line-height:var(--line-height-200)}._switch--size-large_1hx2q_126 ._switch__secondary-label_1hx2q_16{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--semi-bold_1hx2q_145 ._switch__label_1hx2q_33{font-weight:var(--font-weight-semibold)}._switch--with-secondary_1hx2q_148{align-items:center}._switch--with-secondary_1hx2q_148 ._switch__labels_1hx2q_33{padding-top:0;padding-bottom:0}
+._switch_3fpma_2{display:flex;align-items:flex-start;width:100%;gap:var(--spacing-m);font-family:var(--font-family-body);font-weight:var(--font-weight-regular);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._switch_3fpma_2:has(._switch__input_3fpma_13:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._switch_3fpma_2:has(._switch__input_3fpma_13:disabled) ._switch__secondary-label_3fpma_17{color:rgba(var(--center-channel-color-rgb),.56)}._switch__input_3fpma_13{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;opacity:0;width:100%;height:100%;border:0;cursor:inherit}._switch__input_3fpma_13:focus-visible{outline:none}._switch__labels_3fpma_34{display:flex;flex-direction:column;flex:1 1 0;justify-content:center;min-width:0}._switch__label_3fpma_34{line-height:1}._switch__secondary-label_3fpma_17{color:rgba(var(--center-channel-color-rgb),.72);margin-top:var(--spacing-xxxxs)}._switch__track_3fpma_48{position:relative;flex-shrink:0;display:block;box-sizing:border-box;background-color:rgba(var(--center-channel-color-rgb),.32);border-radius:var(--radius-pill);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._switch__track_3fpma_48:has(._switch__input_3fpma_13:focus-visible){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch_3fpma_2:has(._switch__input_3fpma_13:not(:disabled)):hover ._switch__track_3fpma_48{background-color:rgba(var(--center-channel-color-rgb),.4)}._switch__track_3fpma_48:has(._switch__input_3fpma_13:checked){background-color:var(--button-bg)}._switch_3fpma_2:has(._switch__input_3fpma_13:not(:disabled)):hover ._switch__track_3fpma_48:has(._switch__input_3fpma_13:checked){background-color:var(--button-bg)}._switch__track_3fpma_48:has(._switch__input_3fpma_13:focus-visible:checked){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch__track_3fpma_48:has(._switch__input_3fpma_13:disabled){opacity:.32}._switch__track_3fpma_48:has(._switch__input_3fpma_13:disabled:checked){background-color:rgba(var(--center-channel-color-rgb),.32)}._switch__knob_3fpma_78{position:absolute;left:2px;top:50%;transform:translateY(-50%) translate(0);border-radius:var(--radius-pill);background-color:var(--button-color);box-shadow:var(--elevation-1);transition:transform var(--duration-quick) var(--ease-transition);pointer-events:none}._switch--size-small_3fpma_89 ._switch__track_3fpma_48{width:26px;height:16px}._switch--size-small_3fpma_89 ._switch__track_3fpma_48:has(._switch__input_3fpma_13:checked) ._switch__knob_3fpma_78{transform:translateY(-50%) translate(10px)}._switch--size-small_3fpma_89 ._switch__knob_3fpma_78{width:12px;height:12px}._switch--size-small_3fpma_89 ._switch__label_3fpma_34,._switch--size-small_3fpma_89 ._switch__secondary-label_3fpma_17{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-medium_3fpma_108 ._switch__track_3fpma_48{width:32px;height:20px}._switch--size-medium_3fpma_108 ._switch__track_3fpma_48:has(._switch__input_3fpma_13:checked) ._switch__knob_3fpma_78{transform:translateY(-50%) translate(12px)}._switch--size-medium_3fpma_108 ._switch__knob_3fpma_78{width:16px;height:16px}._switch--size-medium_3fpma_108 ._switch__label_3fpma_34{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--size-medium_3fpma_108 ._switch__secondary-label_3fpma_17{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-large_3fpma_127 ._switch__track_3fpma_48{width:40px;height:24px}._switch--size-large_3fpma_127 ._switch__track_3fpma_48:has(._switch__input_3fpma_13:checked) ._switch__knob_3fpma_78{transform:translateY(-50%) translate(16px)}._switch--size-large_3fpma_127 ._switch__knob_3fpma_78{width:20px;height:20px}._switch--size-large_3fpma_127 ._switch__label_3fpma_34{font-size:var(--font-size-200);line-height:var(--line-height-200)}._switch--size-large_3fpma_127 ._switch__secondary-label_3fpma_17{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--semi-bold_3fpma_146 ._switch__label_3fpma_34{font-weight:var(--font-weight-semibold)}._switch--with-secondary_3fpma_149{align-items:center}._switch--with-secondary_3fpma_149 ._switch__labels_3fpma_34{padding-top:0;padding-bottom:0}

package/dist/components/switch/Switch.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Switch.css');const _="_switch__input_1hx2q_12",s="_switch__labels_1hx2q_33",t="_switch__label_1hx2q_33",i="_switch__track_1hx2q_47",c="_switch__knob_1hx2q_77",h={switch:"_switch_1hx2q_2",switch__input:_,"switch__secondary-label":"_switch__secondary-label_1hx2q_16",switch__labels:s,switch__label:t,switch__track:i,switch__knob:c,"switch--size-small":"_switch--size-small_1hx2q_88","switch--size-medium":"_switch--size-medium_1hx2q_107","switch--size-large":"_switch--size-large_1hx2q_126","switch--semi-bold":"_switch--semi-bold_1hx2q_145","switch--with-secondary":"_switch--with-secondary_1hx2q_148"};exports.default=h;exports.switch__input=_;exports.switch__knob=c;exports.switch__label=t;exports.switch__labels=s;exports.switch__track=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Switch.css');const _="_switch__input_3fpma_13",s="_switch__labels_3fpma_34",t="_switch__label_3fpma_34",i="_switch__track_3fpma_48",c="_switch__knob_3fpma_78",e={switch:"_switch_3fpma_2",switch__input:_,"switch__secondary-label":"_switch__secondary-label_3fpma_17",switch__labels:s,switch__label:t,switch__track:i,switch__knob:c,"switch--size-small":"_switch--size-small_3fpma_89","switch--size-medium":"_switch--size-medium_3fpma_108","switch--size-large":"_switch--size-large_3fpma_127","switch--semi-bold":"_switch--semi-bold_3fpma_146","switch--with-secondary":"_switch--with-secondary_3fpma_149"};exports.default=e;exports.switch__input=_;exports.switch__knob=c;exports.switch__label=t;exports.switch__labels=s;exports.switch__track=i;
 //# sourceMappingURL=Switch.module.scss.cjs.map

package/dist/components/switch/Switch.module.scss.js

@@ -1,21 +1,21 @@
-import './Switch.css';const _ = "_switch__input_1hx2q_12", s = "_switch__labels_1hx2q_33", t = "_switch__label_1hx2q_33", i = "_switch__track_1hx2q_47", h = "_switch__knob_1hx2q_77", c = {
-  switch: "_switch_1hx2q_2",
+import './Switch.css';const _ = "_switch__input_3fpma_13", s = "_switch__labels_3fpma_34", t = "_switch__label_3fpma_34", i = "_switch__track_3fpma_48", c = "_switch__knob_3fpma_78", a = {
+  switch: "_switch_3fpma_2",
   switch__input: _,
-  "switch__secondary-label": "_switch__secondary-label_1hx2q_16",
+  "switch__secondary-label": "_switch__secondary-label_3fpma_17",
   switch__labels: s,
   switch__label: t,
   switch__track: i,
-  switch__knob: h,
-  "switch--size-small": "_switch--size-small_1hx2q_88",
-  "switch--size-medium": "_switch--size-medium_1hx2q_107",
-  "switch--size-large": "_switch--size-large_1hx2q_126",
-  "switch--semi-bold": "_switch--semi-bold_1hx2q_145",
-  "switch--with-secondary": "_switch--with-secondary_1hx2q_148"
+  switch__knob: c,
+  "switch--size-small": "_switch--size-small_3fpma_89",
+  "switch--size-medium": "_switch--size-medium_3fpma_108",
+  "switch--size-large": "_switch--size-large_3fpma_127",
+  "switch--semi-bold": "_switch--semi-bold_3fpma_146",
+  "switch--with-secondary": "_switch--with-secondary_3fpma_149"
 };
 export {
-  c as default,
+  a as default,
   _ as switch__input,
-  h as switch__knob,
+  c as switch__knob,
   t as switch__label,
   s as switch__labels,
   i as switch__track

package/dist/components/tabs/Tabs.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),i=require("react"),t=require("./Tabs.module.scss.cjs");function R({tabs:c,activeKey:o,onChange:b,className:j="",controls:_,unreadLabel:D="Unread",...g}){const h=[t.default.tabs,j].filter(Boolean).join(" "),p=i.useRef([]),[m,f]=i.useState(o);i.useEffect(()=>{f(o)},[o]);const N=c.map(e=>e.key),l=c.filter(e=>!e.disabled).map(e=>e.key),B=l.includes(m)?m:l.includes(o)?o:l[0],r=e=>{var s;f(e);const d=N.indexOf(e);(s=p.current[d])==null||s.focus()},w=(e,d)=>{const s=l.length;if(s===0)return;const a=l.indexOf(d);e.key==="ArrowRight"?(e.preventDefault(),r(l[(a+1)%s])):e.key==="ArrowLeft"?(e.preventDefault(),r(l[a<0?s-1:(a-1+s)%s])):e.key==="Home"?(e.preventDefault(),r(l[0])):e.key==="End"?(e.preventDefault(),r(l[s-1])):(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),a>=0&&b(d))};return n.jsxs("div",{...g,className:h,children:[n.jsx("div",{className:t.default["tabs__tab-list"],role:"tablist",children:c.map((e,d)=>{var y,k,x;const s=e.key===o,a=e.disabled===!0,P=[t.default.tabs__tab,s?t.default["tabs__tab--active"]:"",a?t.default["tabs__tab--disabled"]:"",(y=e.buttonProps)==null?void 0:y.className].filter(Boolean).join(" ");return i.createElement("button",{...e.buttonProps,key:e.key,ref:u=>{p.current[d]=u},id:e.id??((k=e.buttonProps)==null?void 0:k.id),role:"tab",type:"button",tabIndex:B===e.key?0:-1,"aria-selected":s,"aria-controls":e.panelId,"aria-disabled":a||void 0,title:e.title??((x=e.buttonProps)==null?void 0:x.title),className:P,onMouseDown:a?u=>u.preventDefault():void 0,onClick:()=>{a||(f(e.key),b(e.key))},onKeyDown:u=>w(u,e.key)},n.jsx("span",{className:t.default["tabs__tab-label"],children:e.label}),e.countBadge!=null&&n.jsx("span",{className:[t.default["tabs__count-badge"],s?t.default["tabs__count-badge--active"]:""].filter(Boolean).join(" "),children:e.countBadge}),e.unreadBadge&&!s&&n.jsx("span",{className:t.default["tabs__unread-badge"],children:n.jsx("span",{className:t.default["tabs__unread-label"],children:D})}))})}),_!=null&&n.jsx("div",{className:t.default.tabs__controls,children:_})]})}exports.default=R;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),i=require("react"),q=require("../../utils/string.cjs"),t=require("./Tabs.module.scss.cjs");function E({tabs:c,activeKey:o,onChange:b,className:g="",controls:_,unreadLabel:D="Unread",appearance:p="default",...h}){const N=[t.default.tabs,p!=="default"?t.default[`tabs--appearance-${q.toKebab(p)}`]:"",g].filter(Boolean).join(" "),m=i.useRef([]),[y,f]=i.useState(o);i.useEffect(()=>{f(o)},[o]);const B=c.map(e=>e.key),l=c.filter(e=>!e.disabled).map(e=>e.key),w=l.includes(y)?y:l.includes(o)?o:l[0],r=e=>{var s;f(e);const u=B.indexOf(e);(s=m.current[u])==null||s.focus()},P=(e,u)=>{const s=l.length;if(s===0)return;const a=l.indexOf(u);e.key==="ArrowRight"?(e.preventDefault(),r(l[(a+1)%s])):e.key==="ArrowLeft"?(e.preventDefault(),r(l[a<0?s-1:(a-1+s)%s])):e.key==="Home"?(e.preventDefault(),r(l[0])):e.key==="End"?(e.preventDefault(),r(l[s-1])):(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),a>=0&&b(u))};return n.jsxs("div",{...h,className:N,children:[n.jsx("div",{className:t.default["tabs__tab-list"],role:"tablist",children:c.map((e,u)=>{var k,x,j;const s=e.key===o,a=e.disabled===!0,R=[t.default.tabs__tab,s?t.default["tabs__tab--active"]:"",a?t.default["tabs__tab--disabled"]:"",(k=e.buttonProps)==null?void 0:k.className].filter(Boolean).join(" ");return i.createElement("button",{...e.buttonProps,key:e.key,ref:d=>{m.current[u]=d},id:e.id??((x=e.buttonProps)==null?void 0:x.id),role:"tab",type:"button",tabIndex:w===e.key?0:-1,"aria-selected":s,"aria-controls":e.panelId,"aria-disabled":a||void 0,title:e.title??((j=e.buttonProps)==null?void 0:j.title),className:R,onMouseDown:a?d=>d.preventDefault():void 0,onClick:()=>{a||(f(e.key),b(e.key))},onKeyDown:d=>P(d,e.key)},n.jsx("span",{className:t.default["tabs__tab-label"],children:e.label}),e.countBadge!=null&&n.jsx("span",{className:[t.default["tabs__count-badge"],s?t.default["tabs__count-badge--active"]:""].filter(Boolean).join(" "),children:e.countBadge}),e.unreadBadge&&!s&&n.jsx("span",{className:t.default["tabs__unread-badge"],children:n.jsx("span",{className:t.default["tabs__unread-label"],children:D})}))})}),_!=null&&n.jsx("div",{className:t.default.tabs__controls,children:_})]})}exports.default=E;
 //# sourceMappingURL=Tabs.cjs.map

package/dist/components/tabs/Tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.cjs","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport styles from './Tabs.module.scss';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional count badge number. */\n  countBadge?: number;\n  /** When true, shows an unread dot badge. */\n  unreadBadge?: boolean;\n  /** Optional id for this tab (pair with `panelId` for `aria-controls`). */\n  id?: string;\n  /** Optional id of the host tabpanel this tab controls. */\n  panelId?: string;\n  /** When true, the tab can't be selected and arrow-key navigation skips it. */\n  disabled?: boolean;\n  /** Native tooltip text, e.g. to explain why the tab is disabled. */\n  title?: string;\n  /**\n   * Extra attributes for this tab's `<button>` (e.g. `data-testid`). Tab\n   * semantics (`role`, `aria-selected`, `tabIndex`, handlers) take precedence.\n   */\n  buttonProps?: BuiltInButtonProps;\n}\n\nexport interface TabsProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange'\n> {\n  /** Array of tab items to display. */\n  tabs: TabItem[];\n  /** Key of the currently active tab. */\n  activeKey: string;\n  /** Called when a tab is selected. */\n  onChange: (key: string) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional trailing controls rendered to the right of the tabs. */\n  controls?: ReactNode;\n  /** Visually hidden text announced with a tab's unread dot. Default: \"Unread\". */\n  unreadLabel?: ReactNode;\n}\n\n/**\n * Tabs let people switch between sibling views inside the same surface — Mentions in the\n * right sidebar, sections of a settings panel, or filters on a list. The content area\n * changes; the surrounding chrome doesn't.\n */\nexport default function Tabs({\n  tabs,\n  activeKey,\n  onChange,\n  className = '',\n  controls,\n  unreadLabel = 'Unread',\n  ...rest\n}: TabsProps) {\n  const rootClass = [styles.tabs, className].filter(Boolean).join(' ');\n  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  const [focusedKey, setFocusedKey] = useState(activeKey);\n\n  useEffect(() => {\n    setFocusedKey(activeKey);\n  }, [activeKey]);\n\n  const keys = tabs.map((tab) => tab.key);\n  const enabledKeys = tabs.filter((tab) => !tab.disabled).map((tab) => tab.key);\n  const focusKey = enabledKeys.includes(focusedKey)\n    ? focusedKey\n    : enabledKeys.includes(activeKey)\n      ? activeKey\n      : enabledKeys[0];\n\n  const moveFocus = (key: string) => {\n    setFocusedKey(key);\n    const index = keys.indexOf(key);\n    tabRefs.current[index]?.focus();\n  };\n\n  const handleKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    key: string,\n  ) => {\n    const count = enabledKeys.length;\n    if (count === 0) return;\n    const index = enabledKeys.indexOf(key);\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      moveFocus(enabledKeys[(index + 1) % count]);\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      moveFocus(\n        enabledKeys[index < 0 ? count - 1 : (index - 1 + count) % count],\n      );\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      moveFocus(enabledKeys[0]);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      moveFocus(enabledKeys[count - 1]);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      if (index >= 0) onChange(key);\n    }\n  };\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab, index) => {\n          const isActive = tab.key === activeKey;\n          const isDisabled = tab.disabled === true;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n            isDisabled ? styles['tabs__tab--disabled'] : '',\n            tab.buttonProps?.className,\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              {...tab.buttonProps}\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.id ?? tab.buttonProps?.id}\n              role=\"tab\"\n              type=\"button\"\n              tabIndex={focusKey === tab.key ? 0 : -1}\n              aria-selected={isActive}\n              aria-controls={tab.panelId}\n              aria-disabled={isDisabled || undefined}\n              title={tab.title ?? tab.buttonProps?.title}\n              className={tabClass}\n              onMouseDown={\n                isDisabled ? (event) => event.preventDefault() : undefined\n              }\n              onClick={() => {\n                if (isDisabled) return;\n                setFocusedKey(tab.key);\n                onChange(tab.key);\n              }}\n              onKeyDown={(event) => handleKeyDown(event, tab.key)}\n            >\n              <span className={styles['tabs__tab-label']}>{tab.label}</span>\n\n              {tab.countBadge != null && (\n                <span\n                  className={[\n                    styles['tabs__count-badge'],\n                    isActive ? styles['tabs__count-badge--active'] : '',\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                >\n                  {tab.countBadge}\n                </span>\n              )}\n\n              {tab.unreadBadge && !isActive && (\n                <span className={styles['tabs__unread-badge']}>\n                  <span className={styles['tabs__unread-label']}>\n                    {unreadLabel}\n                  </span>\n                </span>\n              )}\n            </button>\n          );\n        })}\n      </div>\n\n      {controls != null && (\n        <div className={styles['tabs__controls']}>{controls}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["Tabs","tabs","activeKey","onChange","className","controls","unreadLabel","rest","rootClass","styles","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","createElement","node","_b","_c"],"mappings":"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"}
+{"version":3,"file":"Tabs.cjs","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Tabs.module.scss';\n\nexport type TabsAppearance = 'default' | 'underlined';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional count badge number. */\n  countBadge?: number;\n  /** When true, shows an unread dot badge. */\n  unreadBadge?: boolean;\n  /** Optional id for this tab (pair with `panelId` for `aria-controls`). */\n  id?: string;\n  /** Optional id of the host tabpanel this tab controls. */\n  panelId?: string;\n  /** When true, the tab can't be selected and arrow-key navigation skips it. */\n  disabled?: boolean;\n  /** Native tooltip text, e.g. to explain why the tab is disabled. */\n  title?: string;\n  /**\n   * Extra attributes for this tab's `<button>` (e.g. `data-testid`). Tab\n   * semantics (`role`, `aria-selected`, `tabIndex`, handlers) take precedence.\n   */\n  buttonProps?: BuiltInButtonProps;\n}\n\nexport interface TabsProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange'\n> {\n  /** Array of tab items to display. */\n  tabs: TabItem[];\n  /** Key of the currently active tab. */\n  activeKey: string;\n  /** Called when a tab is selected. */\n  onChange: (key: string) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional trailing controls rendered to the right of the tabs. */\n  controls?: ReactNode;\n  /** Visual style. `underlined` shows a bottom rule with an indicator under the active tab. Default: `default`. */\n  appearance?: TabsAppearance;\n  /** Visually hidden text announced with a tab's unread dot. Default: \"Unread\". */\n  unreadLabel?: ReactNode;\n}\n\n/**\n * Tabs let people switch between sibling views inside the same surface — Mentions in the\n * right sidebar, sections of a settings panel, or filters on a list. The content area\n * changes; the surrounding chrome doesn't.\n */\nexport default function Tabs({\n  tabs,\n  activeKey,\n  onChange,\n  className = '',\n  controls,\n  unreadLabel = 'Unread',\n  appearance = 'default',\n  ...rest\n}: TabsProps) {\n  const rootClass = [\n    styles.tabs,\n    appearance !== 'default'\n      ? styles[`tabs--appearance-${toKebab(appearance)}`]\n      : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  const [focusedKey, setFocusedKey] = useState(activeKey);\n\n  useEffect(() => {\n    setFocusedKey(activeKey);\n  }, [activeKey]);\n\n  const keys = tabs.map((tab) => tab.key);\n  const enabledKeys = tabs.filter((tab) => !tab.disabled).map((tab) => tab.key);\n  const focusKey = enabledKeys.includes(focusedKey)\n    ? focusedKey\n    : enabledKeys.includes(activeKey)\n      ? activeKey\n      : enabledKeys[0];\n\n  const moveFocus = (key: string) => {\n    setFocusedKey(key);\n    const index = keys.indexOf(key);\n    tabRefs.current[index]?.focus();\n  };\n\n  const handleKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    key: string,\n  ) => {\n    const count = enabledKeys.length;\n    if (count === 0) return;\n    const index = enabledKeys.indexOf(key);\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      moveFocus(enabledKeys[(index + 1) % count]);\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      moveFocus(\n        enabledKeys[index < 0 ? count - 1 : (index - 1 + count) % count],\n      );\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      moveFocus(enabledKeys[0]);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      moveFocus(enabledKeys[count - 1]);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      if (index >= 0) onChange(key);\n    }\n  };\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab, index) => {\n          const isActive = tab.key === activeKey;\n          const isDisabled = tab.disabled === true;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n            isDisabled ? styles['tabs__tab--disabled'] : '',\n            tab.buttonProps?.className,\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              {...tab.buttonProps}\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.id ?? tab.buttonProps?.id}\n              role=\"tab\"\n              type=\"button\"\n              tabIndex={focusKey === tab.key ? 0 : -1}\n              aria-selected={isActive}\n              aria-controls={tab.panelId}\n              aria-disabled={isDisabled || undefined}\n              title={tab.title ?? tab.buttonProps?.title}\n              className={tabClass}\n              onMouseDown={\n                isDisabled ? (event) => event.preventDefault() : undefined\n              }\n              onClick={() => {\n                if (isDisabled) return;\n                setFocusedKey(tab.key);\n                onChange(tab.key);\n              }}\n              onKeyDown={(event) => handleKeyDown(event, tab.key)}\n            >\n              <span className={styles['tabs__tab-label']}>{tab.label}</span>\n\n              {tab.countBadge != null && (\n                <span\n                  className={[\n                    styles['tabs__count-badge'],\n                    isActive ? styles['tabs__count-badge--active'] : '',\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                >\n                  {tab.countBadge}\n                </span>\n              )}\n\n              {tab.unreadBadge && !isActive && (\n                <span className={styles['tabs__unread-badge']}>\n                  <span className={styles['tabs__unread-label']}>\n                    {unreadLabel}\n                  </span>\n                </span>\n              )}\n            </button>\n          );\n        })}\n      </div>\n\n      {controls != null && (\n        <div className={styles['tabs__controls']}>{controls}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["Tabs","tabs","activeKey","onChange","className","controls","unreadLabel","appearance","rest","rootClass","styles","toKebab","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","createElement","node","_b","_c"],"mappings":"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"}

package/dist/components/tabs/Tabs.css

@@ -1 +1 @@
-._tabs_j8wfj_2{display:flex;align-items:center;justify-content:space-between}._tabs__tab-list_j8wfj_7{display:flex;align-items:flex-start;gap:var(--spacing-xxs)}._tabs__tab_j8wfj_7{position:relative;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-xs);border-radius:var(--radius-s);background:transparent;border:none;cursor:pointer;padding:var(--spacing-xxs) var(--spacing-s);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:background-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._tabs__tab_j8wfj_7:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._tabs__tab_j8wfj_7:hover:not(._tabs__tab--active_j8wfj_31):not(._tabs__tab--disabled_j8wfj_31){background-color:rgba(var(--center-channel-color-rgb),.08)}._tabs__tab--active_j8wfj_31{background-color:rgba(var(--link-color-rgb),.08)}._tabs__tab--active_j8wfj_31 ._tabs__tab-label_j8wfj_37{color:var(--link-color)}._tabs__tab--active_j8wfj_31 ._tabs__count-badge_j8wfj_40{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__tab--disabled_j8wfj_31{cursor:not-allowed}._tabs__tab--disabled_j8wfj_31 ._tabs__tab-label_j8wfj_37,._tabs__tab--disabled_j8wfj_31 ._tabs__count-badge_j8wfj_40{color:rgba(var(--center-channel-color-rgb),.4)}._tabs__tab-label_j8wfj_37{display:flex;align-items:center;font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:rgba(var(--center-channel-color-rgb),.64);white-space:nowrap;transition:color var(--duration-quick) var(--ease-transition)}._tabs__count-badge_j8wfj_40{display:inline-flex;align-items:center;justify-content:center;padding:2.5px var(--spacing-xxs);border-radius:var(--radius-m);background-color:rgba(var(--center-channel-color-rgb),.08);font-size:var(--font-size-25);font-weight:var(--font-weight-semibold);line-height:11px;color:rgba(var(--center-channel-color-rgb),.64);flex-shrink:0;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._tabs__count-badge--active_j8wfj_75{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__unread-badge_j8wfj_79{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs);width:4px;height:4px;border-radius:var(--radius-pill);background-color:var(--mention-bg)}._tabs__unread-label_j8wfj_88{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._tabs__controls_j8wfj_99{display:flex;align-items:center;gap:var(--spacing-xxs);flex-shrink:0}
+._tabs_69hbz_2{display:flex;align-items:center;justify-content:space-between}._tabs__tab-list_69hbz_7{display:flex;align-items:flex-start;gap:var(--spacing-xxs)}._tabs__tab_69hbz_7{position:relative;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-xs);border-radius:var(--radius-s);background:transparent;border:none;cursor:pointer;padding:var(--spacing-xxs) var(--spacing-s);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:background-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._tabs__tab_69hbz_7:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._tabs__tab_69hbz_7:hover:not(._tabs__tab--active_69hbz_31):not(._tabs__tab--disabled_69hbz_31){background-color:rgba(var(--center-channel-color-rgb),.08)}._tabs__tab--active_69hbz_31{background-color:rgba(var(--link-color-rgb),.08)}._tabs__tab--active_69hbz_31 ._tabs__tab-label_69hbz_37{color:var(--link-color)}._tabs__tab--active_69hbz_31 ._tabs__count-badge_69hbz_40{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__tab--disabled_69hbz_31{cursor:not-allowed}._tabs__tab--disabled_69hbz_31 ._tabs__tab-label_69hbz_37,._tabs__tab--disabled_69hbz_31 ._tabs__count-badge_69hbz_40{color:rgba(var(--center-channel-color-rgb),.4)}._tabs__tab-label_69hbz_37{display:flex;align-items:center;font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:rgba(var(--center-channel-color-rgb),.64);white-space:nowrap;transition:color var(--duration-quick) var(--ease-transition)}._tabs__count-badge_69hbz_40{display:inline-flex;align-items:center;justify-content:center;padding:2.5px var(--spacing-xxs);border-radius:var(--radius-m);background-color:rgba(var(--center-channel-color-rgb),.08);font-size:var(--font-size-25);font-weight:var(--font-weight-semibold);line-height:11px;color:rgba(var(--center-channel-color-rgb),.64);flex-shrink:0;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._tabs__count-badge--active_69hbz_75{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__unread-badge_69hbz_79{flex-shrink:0;width:4px;height:4px;border-radius:var(--radius-pill);background-color:var(--button-bg)}._tabs__unread-label_69hbz_86{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._tabs__controls_69hbz_97{display:flex;align-items:center;gap:var(--spacing-xxs);flex-shrink:0}._tabs--appearance-underlined_69hbz_103{align-items:stretch;box-shadow:inset 0 -1px rgba(var(--center-channel-color-rgb),.12)}._tabs--appearance-underlined_69hbz_103 ._tabs__tab-list_69hbz_7{gap:var(--spacing-xs)}._tabs--appearance-underlined_69hbz_103 ._tabs__tab_69hbz_7{border-radius:0;padding:var(--spacing-s) var(--spacing-xs)}._tabs--appearance-underlined_69hbz_103 ._tabs__tab_69hbz_7:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background-color:transparent;transition:background-color var(--duration-quick) var(--ease-transition)}._tabs--appearance-underlined_69hbz_103 ._tabs__tab_69hbz_7:hover:not(._tabs__tab--active_69hbz_31):not(._tabs__tab--disabled_69hbz_31){background-color:transparent}._tabs--appearance-underlined_69hbz_103 ._tabs__tab_69hbz_7:hover:not(._tabs__tab--active_69hbz_31):not(._tabs__tab--disabled_69hbz_31) ._tabs__tab-label_69hbz_37{color:var(--center-channel-color)}._tabs--appearance-underlined_69hbz_103 ._tabs__tab--active_69hbz_31{background-color:transparent}._tabs--appearance-underlined_69hbz_103 ._tabs__tab--active_69hbz_31:after{background-color:var(--link-color)}

package/dist/components/tabs/Tabs.d.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { BuiltInButtonProps } from '../../utils/props';
+export type TabsAppearance = 'default' | 'underlined';
 export interface TabItem {
     /** Unique key for this tab. */
     key: string;
@@ -34,6 +35,8 @@ export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChang
     className?: string;
     /** Optional trailing controls rendered to the right of the tabs. */
     controls?: ReactNode;
+    /** Visual style. `underlined` shows a bottom rule with an indicator under the active tab. Default: `default`. */
+    appearance?: TabsAppearance;
     /** Visually hidden text announced with a tab's unread dot. Default: "Unread". */
     unreadLabel?: ReactNode;
 }
@@ -42,5 +45,5 @@ export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChang
  * right sidebar, sections of a settings panel, or filters on a list. The content area
  * changes; the surrounding chrome doesn't.
  */
-export default function Tabs({ tabs, activeKey, onChange, className, controls, unreadLabel, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export default function Tabs({ tabs, activeKey, onChange, className, controls, unreadLabel, appearance, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tabs.d.ts.map

package/dist/components/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxD,MAAM,WAAW,OAAO;IACtB,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,wEAAwE;IACxE,KAAK,EAAE,SAAS,CAAC;IACjB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0EAA0E;IAC1E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,qCAAqC;IACrC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iFAAiF;IACjF,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAc,EACd,QAAQ,EACR,WAAsB,EACtB,GAAG,IAAI,EACR,EAAE,SAAS,2CA4HX"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,YAAY,CAAC;AAEtD,MAAM,WAAW,OAAO;IACtB,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,wEAAwE;IACxE,KAAK,EAAE,SAAS,CAAC;IACjB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0EAA0E;IAC1E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,qCAAqC;IACrC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iHAAiH;IACjH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,iFAAiF;IACjF,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAc,EACd,QAAQ,EACR,WAAsB,EACtB,UAAsB,EACtB,GAAG,IAAI,EACR,EAAE,SAAS,2CAoIX"}

package/dist/components/tabs/Tabs.js

@@ -1,63 +1,69 @@
-import { jsxs as E, jsx as r } from "react/jsx-runtime";
-import { useRef as P, useState as A, useEffect as R, createElement as C } from "react";
+import { jsxs as P, jsx as r } from "react/jsx-runtime";
+import { useRef as A, useState as R, useEffect as C, createElement as F } from "react";
+import { toKebab as I } from "../../utils/string.js";
 import t from "./Tabs.module.scss.js";
-function H({
+function M({
   tabs: c,
-  activeKey: o,
+  activeKey: n,
   onChange: f,
-  className: D = "",
-  controls: p,
-  unreadLabel: h = "Unread",
-  ...N
+  className: h = "",
+  controls: b,
+  unreadLabel: N = "Unread",
+  appearance: p = "default",
+  ...x
 }) {
-  const x = [t.tabs, D].filter(Boolean).join(" "), b = P([]), [m, u] = A(o);
-  R(() => {
-    u(o);
-  }, [o]);
-  const g = c.map((e) => e.key), n = c.filter((e) => !e.disabled).map((e) => e.key), B = n.includes(m) ? m : n.includes(o) ? o : n[0], d = (e) => {
+  const g = [
+    t.tabs,
+    p !== "default" ? t[`tabs--appearance-${I(p)}`] : "",
+    h
+  ].filter(Boolean).join(" "), m = A([]), [_, u] = R(n);
+  C(() => {
+    u(n);
+  }, [n]);
+  const B = c.map((e) => e.key), o = c.filter((e) => !e.disabled).map((e) => e.key), j = o.includes(_) ? _ : o.includes(n) ? n : o[0], d = (e) => {
     var s;
     u(e);
-    const a = g.indexOf(e);
-    (s = b.current[a]) == null || s.focus();
-  }, j = (e, a) => {
-    const s = n.length;
+    const a = B.indexOf(e);
+    (s = m.current[a]) == null || s.focus();
+  }, w = (e, a) => {
+    const s = o.length;
     if (s === 0) return;
-    const l = n.indexOf(a);
-    e.key === "ArrowRight" ? (e.preventDefault(), d(n[(l + 1) % s])) : e.key === "ArrowLeft" ? (e.preventDefault(), d(
-      n[l < 0 ? s - 1 : (l - 1 + s) % s]
-    )) : e.key === "Home" ? (e.preventDefault(), d(n[0])) : e.key === "End" ? (e.preventDefault(), d(n[s - 1])) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), l >= 0 && f(a));
+    const l = o.indexOf(a);
+    e.key === "ArrowRight" ? (e.preventDefault(), d(o[(l + 1) % s])) : e.key === "ArrowLeft" ? (e.preventDefault(), d(
+      o[l < 0 ? s - 1 : (l - 1 + s) % s]
+    )) : e.key === "Home" ? (e.preventDefault(), d(o[0])) : e.key === "End" ? (e.preventDefault(), d(o[s - 1])) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), l >= 0 && f(a));
   };
-  return /* @__PURE__ */ E("div", { ...N, className: x, children: [
+  return /* @__PURE__ */ P("div", { ...x, className: g, children: [
     /* @__PURE__ */ r("div", { className: t["tabs__tab-list"], role: "tablist", children: c.map((e, a) => {
-      var _, y, k;
-      const s = e.key === o, l = e.disabled === !0, w = [
+      var y, k, D;
+      const s = e.key === n, l = e.disabled === !0, E = [
         t.tabs__tab,
         s ? t["tabs__tab--active"] : "",
         l ? t["tabs__tab--disabled"] : "",
-        (_ = e.buttonProps) == null ? void 0 : _.className
+        (y = e.buttonProps) == null ? void 0 : y.className
       ].filter(Boolean).join(" ");
-      return /* @__PURE__ */ C(
+      return /* @__PURE__ */ F(
         "button",
         {
           ...e.buttonProps,
           key: e.key,
           ref: (i) => {
-            b.current[a] = i;
+            m.current[a] = i;
           },
-          id: e.id ?? ((y = e.buttonProps) == null ? void 0 : y.id),
+          id: e.id ?? ((k = e.buttonProps) == null ? void 0 : k.id),
           role: "tab",
           type: "button",
-          tabIndex: B === e.key ? 0 : -1,
+          tabIndex: j === e.key ? 0 : -1,
           "aria-selected": s,
           "aria-controls": e.panelId,
           "aria-disabled": l || void 0,
-          title: e.title ?? ((k = e.buttonProps) == null ? void 0 : k.title),
-          className: w,
+          title: e.title ?? ((D = e.buttonProps) == null ? void 0 : D.title),
+          className: E,
           onMouseDown: l ? (i) => i.preventDefault() : void 0,
           onClick: () => {
             l || (u(e.key), f(e.key));
           },
-          onKeyDown: (i) => j(i, e.key)
+          onKeyDown: (i) => w(i, e.key)
         },
         /* @__PURE__ */ r("span", { className: t["tabs__tab-label"], children: e.label }),
         e.countBadge != null && /* @__PURE__ */ r(
@@ -70,13 +76,13 @@ function H({
             children: e.countBadge
           }
         ),
-        e.unreadBadge && !s && /* @__PURE__ */ r("span", { className: t["tabs__unread-badge"], children: /* @__PURE__ */ r("span", { className: t["tabs__unread-label"], children: h }) })
+        e.unreadBadge && !s && /* @__PURE__ */ r("span", { className: t["tabs__unread-badge"], children: /* @__PURE__ */ r("span", { className: t["tabs__unread-label"], children: N }) })
       );
     }) }),
-    p != null && /* @__PURE__ */ r("div", { className: t.tabs__controls, children: p })
+    b != null && /* @__PURE__ */ r("div", { className: t.tabs__controls, children: b })
   ] });
 }
 export {
-  H as default
+  M as default
 };
 //# sourceMappingURL=Tabs.js.map

package/dist/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport styles from './Tabs.module.scss';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional count badge number. */\n  countBadge?: number;\n  /** When true, shows an unread dot badge. */\n  unreadBadge?: boolean;\n  /** Optional id for this tab (pair with `panelId` for `aria-controls`). */\n  id?: string;\n  /** Optional id of the host tabpanel this tab controls. */\n  panelId?: string;\n  /** When true, the tab can't be selected and arrow-key navigation skips it. */\n  disabled?: boolean;\n  /** Native tooltip text, e.g. to explain why the tab is disabled. */\n  title?: string;\n  /**\n   * Extra attributes for this tab's `<button>` (e.g. `data-testid`). Tab\n   * semantics (`role`, `aria-selected`, `tabIndex`, handlers) take precedence.\n   */\n  buttonProps?: BuiltInButtonProps;\n}\n\nexport interface TabsProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange'\n> {\n  /** Array of tab items to display. */\n  tabs: TabItem[];\n  /** Key of the currently active tab. */\n  activeKey: string;\n  /** Called when a tab is selected. */\n  onChange: (key: string) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional trailing controls rendered to the right of the tabs. */\n  controls?: ReactNode;\n  /** Visually hidden text announced with a tab's unread dot. Default: \"Unread\". */\n  unreadLabel?: ReactNode;\n}\n\n/**\n * Tabs let people switch between sibling views inside the same surface — Mentions in the\n * right sidebar, sections of a settings panel, or filters on a list. The content area\n * changes; the surrounding chrome doesn't.\n */\nexport default function Tabs({\n  tabs,\n  activeKey,\n  onChange,\n  className = '',\n  controls,\n  unreadLabel = 'Unread',\n  ...rest\n}: TabsProps) {\n  const rootClass = [styles.tabs, className].filter(Boolean).join(' ');\n  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  const [focusedKey, setFocusedKey] = useState(activeKey);\n\n  useEffect(() => {\n    setFocusedKey(activeKey);\n  }, [activeKey]);\n\n  const keys = tabs.map((tab) => tab.key);\n  const enabledKeys = tabs.filter((tab) => !tab.disabled).map((tab) => tab.key);\n  const focusKey = enabledKeys.includes(focusedKey)\n    ? focusedKey\n    : enabledKeys.includes(activeKey)\n      ? activeKey\n      : enabledKeys[0];\n\n  const moveFocus = (key: string) => {\n    setFocusedKey(key);\n    const index = keys.indexOf(key);\n    tabRefs.current[index]?.focus();\n  };\n\n  const handleKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    key: string,\n  ) => {\n    const count = enabledKeys.length;\n    if (count === 0) return;\n    const index = enabledKeys.indexOf(key);\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      moveFocus(enabledKeys[(index + 1) % count]);\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      moveFocus(\n        enabledKeys[index < 0 ? count - 1 : (index - 1 + count) % count],\n      );\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      moveFocus(enabledKeys[0]);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      moveFocus(enabledKeys[count - 1]);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      if (index >= 0) onChange(key);\n    }\n  };\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab, index) => {\n          const isActive = tab.key === activeKey;\n          const isDisabled = tab.disabled === true;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n            isDisabled ? styles['tabs__tab--disabled'] : '',\n            tab.buttonProps?.className,\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              {...tab.buttonProps}\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.id ?? tab.buttonProps?.id}\n              role=\"tab\"\n              type=\"button\"\n              tabIndex={focusKey === tab.key ? 0 : -1}\n              aria-selected={isActive}\n              aria-controls={tab.panelId}\n              aria-disabled={isDisabled || undefined}\n              title={tab.title ?? tab.buttonProps?.title}\n              className={tabClass}\n              onMouseDown={\n                isDisabled ? (event) => event.preventDefault() : undefined\n              }\n              onClick={() => {\n                if (isDisabled) return;\n                setFocusedKey(tab.key);\n                onChange(tab.key);\n              }}\n              onKeyDown={(event) => handleKeyDown(event, tab.key)}\n            >\n              <span className={styles['tabs__tab-label']}>{tab.label}</span>\n\n              {tab.countBadge != null && (\n                <span\n                  className={[\n                    styles['tabs__count-badge'],\n                    isActive ? styles['tabs__count-badge--active'] : '',\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                >\n                  {tab.countBadge}\n                </span>\n              )}\n\n              {tab.unreadBadge && !isActive && (\n                <span className={styles['tabs__unread-badge']}>\n                  <span className={styles['tabs__unread-label']}>\n                    {unreadLabel}\n                  </span>\n                </span>\n              )}\n            </button>\n          );\n        })}\n      </div>\n\n      {controls != null && (\n        <div className={styles['tabs__controls']}>{controls}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["Tabs","tabs","activeKey","onChange","className","controls","unreadLabel","rest","rootClass","styles","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","createElement","node","_b","_c"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Tabs.module.scss';\n\nexport type TabsAppearance = 'default' | 'underlined';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional count badge number. */\n  countBadge?: number;\n  /** When true, shows an unread dot badge. */\n  unreadBadge?: boolean;\n  /** Optional id for this tab (pair with `panelId` for `aria-controls`). */\n  id?: string;\n  /** Optional id of the host tabpanel this tab controls. */\n  panelId?: string;\n  /** When true, the tab can't be selected and arrow-key navigation skips it. */\n  disabled?: boolean;\n  /** Native tooltip text, e.g. to explain why the tab is disabled. */\n  title?: string;\n  /**\n   * Extra attributes for this tab's `<button>` (e.g. `data-testid`). Tab\n   * semantics (`role`, `aria-selected`, `tabIndex`, handlers) take precedence.\n   */\n  buttonProps?: BuiltInButtonProps;\n}\n\nexport interface TabsProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange'\n> {\n  /** Array of tab items to display. */\n  tabs: TabItem[];\n  /** Key of the currently active tab. */\n  activeKey: string;\n  /** Called when a tab is selected. */\n  onChange: (key: string) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional trailing controls rendered to the right of the tabs. */\n  controls?: ReactNode;\n  /** Visual style. `underlined` shows a bottom rule with an indicator under the active tab. Default: `default`. */\n  appearance?: TabsAppearance;\n  /** Visually hidden text announced with a tab's unread dot. Default: \"Unread\". */\n  unreadLabel?: ReactNode;\n}\n\n/**\n * Tabs let people switch between sibling views inside the same surface — Mentions in the\n * right sidebar, sections of a settings panel, or filters on a list. The content area\n * changes; the surrounding chrome doesn't.\n */\nexport default function Tabs({\n  tabs,\n  activeKey,\n  onChange,\n  className = '',\n  controls,\n  unreadLabel = 'Unread',\n  appearance = 'default',\n  ...rest\n}: TabsProps) {\n  const rootClass = [\n    styles.tabs,\n    appearance !== 'default'\n      ? styles[`tabs--appearance-${toKebab(appearance)}`]\n      : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  const [focusedKey, setFocusedKey] = useState(activeKey);\n\n  useEffect(() => {\n    setFocusedKey(activeKey);\n  }, [activeKey]);\n\n  const keys = tabs.map((tab) => tab.key);\n  const enabledKeys = tabs.filter((tab) => !tab.disabled).map((tab) => tab.key);\n  const focusKey = enabledKeys.includes(focusedKey)\n    ? focusedKey\n    : enabledKeys.includes(activeKey)\n      ? activeKey\n      : enabledKeys[0];\n\n  const moveFocus = (key: string) => {\n    setFocusedKey(key);\n    const index = keys.indexOf(key);\n    tabRefs.current[index]?.focus();\n  };\n\n  const handleKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    key: string,\n  ) => {\n    const count = enabledKeys.length;\n    if (count === 0) return;\n    const index = enabledKeys.indexOf(key);\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      moveFocus(enabledKeys[(index + 1) % count]);\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      moveFocus(\n        enabledKeys[index < 0 ? count - 1 : (index - 1 + count) % count],\n      );\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      moveFocus(enabledKeys[0]);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      moveFocus(enabledKeys[count - 1]);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      if (index >= 0) onChange(key);\n    }\n  };\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab, index) => {\n          const isActive = tab.key === activeKey;\n          const isDisabled = tab.disabled === true;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n            isDisabled ? styles['tabs__tab--disabled'] : '',\n            tab.buttonProps?.className,\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              {...tab.buttonProps}\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.id ?? tab.buttonProps?.id}\n              role=\"tab\"\n              type=\"button\"\n              tabIndex={focusKey === tab.key ? 0 : -1}\n              aria-selected={isActive}\n              aria-controls={tab.panelId}\n              aria-disabled={isDisabled || undefined}\n              title={tab.title ?? tab.buttonProps?.title}\n              className={tabClass}\n              onMouseDown={\n                isDisabled ? (event) => event.preventDefault() : undefined\n              }\n              onClick={() => {\n                if (isDisabled) return;\n                setFocusedKey(tab.key);\n                onChange(tab.key);\n              }}\n              onKeyDown={(event) => handleKeyDown(event, tab.key)}\n            >\n              <span className={styles['tabs__tab-label']}>{tab.label}</span>\n\n              {tab.countBadge != null && (\n                <span\n                  className={[\n                    styles['tabs__count-badge'],\n                    isActive ? styles['tabs__count-badge--active'] : '',\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                >\n                  {tab.countBadge}\n                </span>\n              )}\n\n              {tab.unreadBadge && !isActive && (\n                <span className={styles['tabs__unread-badge']}>\n                  <span className={styles['tabs__unread-label']}>\n                    {unreadLabel}\n                  </span>\n                </span>\n              )}\n            </button>\n          );\n        })}\n      </div>\n\n      {controls != null && (\n        <div className={styles['tabs__controls']}>{controls}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["Tabs","tabs","activeKey","onChange","className","controls","unreadLabel","appearance","rest","rootClass","styles","toKebab","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","createElement","node","_b","_c"],"mappings":"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"}

package/dist/components/tabs/Tabs.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Tabs.css');const _="_tabs_j8wfj_2",t="_tabs__tab_j8wfj_7",a="_tabs__controls_j8wfj_99",b={tabs:_,"tabs__tab-list":"_tabs__tab-list_j8wfj_7",tabs__tab:t,"tabs__tab--active":"_tabs__tab--active_j8wfj_31","tabs__tab--disabled":"_tabs__tab--disabled_j8wfj_31","tabs__tab-label":"_tabs__tab-label_j8wfj_37","tabs__count-badge":"_tabs__count-badge_j8wfj_40","tabs__count-badge--active":"_tabs__count-badge--active_j8wfj_75","tabs__unread-badge":"_tabs__unread-badge_j8wfj_79","tabs__unread-label":"_tabs__unread-label_j8wfj_88",tabs__controls:a};exports.default=b;exports.tabs=_;exports.tabs__controls=a;exports.tabs__tab=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Tabs.css');const _="_tabs_69hbz_2",a="_tabs__tab_69hbz_7",t="_tabs__controls_69hbz_97",b={tabs:_,"tabs__tab-list":"_tabs__tab-list_69hbz_7",tabs__tab:a,"tabs__tab--active":"_tabs__tab--active_69hbz_31","tabs__tab--disabled":"_tabs__tab--disabled_69hbz_31","tabs__tab-label":"_tabs__tab-label_69hbz_37","tabs__count-badge":"_tabs__count-badge_69hbz_40","tabs__count-badge--active":"_tabs__count-badge--active_69hbz_75","tabs__unread-badge":"_tabs__unread-badge_69hbz_79","tabs__unread-label":"_tabs__unread-label_69hbz_86",tabs__controls:t,"tabs--appearance-underlined":"_tabs--appearance-underlined_69hbz_103"};exports.default=b;exports.tabs=_;exports.tabs__controls=t;exports.tabs__tab=a;
 //# sourceMappingURL=Tabs.module.scss.cjs.map