@mattermost/compass-ui 0.1.0-alpha.1 → 0.1.0-alpha.11

package/dist/components/spinner/index.js

@@ -0,0 +1,5 @@
+import { default as a } from "./Spinner.js";
+export {
+  a as Spinner
+};
+//# sourceMappingURL=index.js.map

package/dist/components/spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/status-badge/StatusBadge.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),__d=require("@mattermost/compass-icons/components/check-circle.js"),d=__d?.default??__d,__b=require("@mattermost/compass-icons/components/circle-outline.js"),b=__b?.default??__b,__g=require("@mattermost/compass-icons/components/clock.js"),g=__g?.default??__g,__m=require("@mattermost/compass-icons/components/minus-circle.js"),m=__m?.default??__m,a=require("../../utils/string.cjs"),e=require("./StatusBadge.module.scss.cjs"),f={"xx-small":10,"x-small":12,small:16,medium:20,large:32},C={online:d,away:g,"do-not-disturb":m,offline:b};function _({className:n="",size:l="x-small",status:s="online"}){const o=e.default[`status-badge--size-${a.toKebab(l)}`],i=e.default[`status-badge--status-${a.toKebab(s)}`],r=[e.default["status-badge"],o,i,n].filter(Boolean).join(" "),u=f[l],c=C[s];return t.jsx("span",{className:r,role:"img","aria-label":s,children:t.jsx("span",{className:e.default["status-badge__glyph"],children:t.jsx(c,{size:u})})})}exports.default=_;
+//# sourceMappingURL=StatusBadge.cjs.map

package/dist/components/status-badge/StatusBadge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.cjs","sources":["../../../src/components/status-badge/StatusBadge.tsx"],"sourcesContent":["import type { ElementType } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport CircleOutlineIcon from '@mattermost/compass-icons/components/circle-outline';\nimport ClockIcon from '@mattermost/compass-icons/components/clock';\nimport MinusCircleIcon from '@mattermost/compass-icons/components/minus-circle';\nimport { toKebab } from '@/utils/string';\nimport styles from './StatusBadge.module.scss';\n\n/** Figma Status Badge size. */\nexport type StatusBadgeSize =\n  | 'xx-small'\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large';\n\n/** Figma Status Badge status variant. */\nexport type StatusBadgeStatus =\n  | 'online'\n  | 'away'\n  | 'do-not-disturb'\n  | 'offline';\n\nexport interface StatusBadgeProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Size. Default: X-Small. */\n  size?: StatusBadgeSize;\n  /** Status variant. Figma: Status. Default: Online. */\n  status?: StatusBadgeStatus;\n}\n\n/** Compass icon size in px per StatusBadge size — Figma. */\nconst BADGE_ICON_SIZE_PX: Record<StatusBadgeSize, number> = {\n  'xx-small': 10,\n  'x-small': 12,\n  small: 16,\n  medium: 20,\n  large: 32,\n};\n\n/** Compass icon component per status variant. */\nconst GLYPH_COMPONENT: Record<StatusBadgeStatus, ElementType> = {\n  online: CheckCircleIcon,\n  away: ClockIcon,\n  'do-not-disturb': MinusCircleIcon,\n  offline: CircleOutlineIcon,\n};\n\n/**\n * A Status Badge tells you whether someone is reachable. It pairs with an avatar or username\n * so a glance is enough to know if a teammate is online, focused, away, or signed out.\n */\nexport default function StatusBadge({\n  className = '',\n  size = 'x-small',\n  status = 'online',\n}: StatusBadgeProps) {\n  const sizeClass = styles[`status-badge--size-${toKebab(size)}`];\n  const statusClass = styles[`status-badge--status-${toKebab(status)}`];\n  const rootClass = [styles['status-badge'], sizeClass, statusClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconSizePx = BADGE_ICON_SIZE_PX[size];\n  const GlyphIcon = GLYPH_COMPONENT[status];\n\n  return (\n    <span className={rootClass} role=\"img\" aria-label={status}>\n      <span className={styles['status-badge__glyph']}>\n        <GlyphIcon size={iconSizePx} />\n      </span>\n    </span>\n  );\n}\n"],"names":["BADGE_ICON_SIZE_PX","GLYPH_COMPONENT","CheckCircleIcon","ClockIcon","MinusCircleIcon","CircleOutlineIcon","StatusBadge","className","size","status","sizeClass","styles","toKebab","statusClass","rootClass","iconSizePx","GlyphIcon","jsx"],"mappings":"udAiCMA,EAAsD,CAC1D,WAAY,GACZ,UAAW,GACX,MAAO,GACP,OAAQ,GACR,MAAO,EACT,EAGMC,EAA0D,CAC9D,OAAQC,EACR,KAAMC,EACN,iBAAkBC,EAClB,QAASC,CACX,EAMA,SAAwBC,EAAY,CAClC,UAAAC,EAAY,GACZ,KAAAC,EAAO,UACP,OAAAC,EAAS,QACX,EAAqB,CACnB,MAAMC,EAAYC,EAAAA,QAAO,sBAAsBC,EAAAA,QAAQJ,CAAI,CAAC,EAAE,EACxDK,EAAcF,EAAAA,QAAO,wBAAwBC,EAAAA,QAAQH,CAAM,CAAC,EAAE,EAC9DK,EAAY,CAACH,EAAAA,QAAO,cAAc,EAAGD,EAAWG,EAAaN,CAAS,EACzE,OAAO,OAAO,EACd,KAAK,GAAG,EAELQ,EAAaf,EAAmBQ,CAAI,EACpCQ,EAAYf,EAAgBQ,CAAM,EAExC,aACG,OAAA,CAAK,UAAWK,EAAW,KAAK,MAAM,aAAYL,EACjD,SAAAQ,EAAAA,IAAC,QAAK,UAAWN,EAAAA,QAAO,qBAAqB,EAC3C,SAAAM,EAAAA,IAACD,GAAU,KAAMD,EAAY,EAC/B,CAAA,CACF,CAEJ"}

package/dist/components/status-badge/StatusBadge.css

@@ -0,0 +1 @@
+._status-badge_umpvw_2{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--center-channel-color);box-sizing:border-box;overflow:hidden}._status-badge__glyph_umpvw_13{display:flex;align-items:center;justify-content:center;flex-shrink:0}._status-badge--size-xx-small_umpvw_19{width:var(--icon-size-12);height:var(--icon-size-12)}._status-badge--size-xx-small_umpvw_19 ._status-badge__glyph_umpvw_13{width:var(--icon-size-10);height:var(--icon-size-10)}._status-badge--size-x-small_umpvw_27,._status-badge--size-x-small_umpvw_27 ._status-badge__glyph_umpvw_13{width:var(--icon-size-12);height:var(--icon-size-12)}._status-badge--size-small_umpvw_35,._status-badge--size-small_umpvw_35 ._status-badge__glyph_umpvw_13{width:var(--icon-size-16);height:var(--icon-size-16)}._status-badge--size-medium_umpvw_43{width:var(--icon-size-24);height:var(--icon-size-24)}._status-badge--size-medium_umpvw_43 ._status-badge__glyph_umpvw_13{width:var(--icon-size-20);height:var(--icon-size-20)}._status-badge--size-large_umpvw_51{width:var(--icon-size-32);height:var(--icon-size-32)}._status-badge--size-large_umpvw_51 ._status-badge__glyph_umpvw_13{width:36px;height:36px;margin:-2px}._status-badge--status-online_umpvw_60{color:var(--online-indicator, var(--color-success));background-color:var(--status-badge-bg, var(--center-channel-bg))}._status-badge--status-away_umpvw_64{color:var(--away-indicator, var(--color-warning));background-color:var(--status-badge-bg, var(--center-channel-bg))}._status-badge--status-do-not-disturb_umpvw_68{color:var(--dnd-indicator, var(--color-danger));background-color:var(--status-badge-bg, var(--center-channel-bg))}._status-badge--status-offline_umpvw_72{color:rgba(var(--center-channel-color-rgb),.32);background-color:var(--status-badge-bg, var(--center-channel-bg))}

package/dist/components/status-badge/StatusBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../src/components/status-badge/StatusBadge.tsx"],"names":[],"mappings":"AAQA,+BAA+B;AAC/B,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,SAAS,GACT,OAAO,GACP,QAAQ,GACR,OAAO,CAAC;AAEZ,yCAAyC;AACzC,MAAM,MAAM,iBAAiB,GACzB,QAAQ,GACR,MAAM,GACN,gBAAgB,GAChB,SAAS,CAAC;AAEd,MAAM,WAAW,gBAAgB;IAC/B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,sDAAsD;IACtD,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAmBD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,SAAc,EACd,IAAgB,EAChB,MAAiB,GAClB,EAAE,gBAAgB,2CAiBlB"}

package/dist/components/status-badge/StatusBadge.js

@@ -0,0 +1,31 @@
+import { jsx as t } from "react/jsx-runtime";
+import __f from "@mattermost/compass-icons/components/check-circle.js";const f=__f&&__f.default?__f.default:__f;
+import __p from "@mattermost/compass-icons/components/circle-outline.js";const p=__p&&__p.default?__p.default:__p;
+import __u from "@mattermost/compass-icons/components/clock.js";const u=__u&&__u.default?__u.default:__u;
+import __d from "@mattermost/compass-icons/components/minus-circle.js";const d=__d&&__d.default?__d.default:__d;
+import { toKebab as l } from "../../utils/string.js";
+import o from "./StatusBadge.module.scss.js";
+const C = {
+  "xx-small": 10,
+  "x-small": 12,
+  small: 16,
+  medium: 20,
+  large: 32
+}, b = {
+  online: f,
+  away: u,
+  "do-not-disturb": d,
+  offline: p
+};
+function O({
+  className: e = "",
+  size: a = "x-small",
+  status: s = "online"
+}) {
+  const n = o[`status-badge--size-${l(a)}`], i = o[`status-badge--status-${l(s)}`], r = [o["status-badge"], n, i, e].filter(Boolean).join(" "), c = C[a], m = b[s];
+  return /* @__PURE__ */ t("span", { className: r, role: "img", "aria-label": s, children: /* @__PURE__ */ t("span", { className: o["status-badge__glyph"], children: /* @__PURE__ */ t(m, { size: c }) }) });
+}
+export {
+  O as default
+};
+//# sourceMappingURL=StatusBadge.js.map

package/dist/components/status-badge/StatusBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.js","sources":["../../../src/components/status-badge/StatusBadge.tsx"],"sourcesContent":["import type { ElementType } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport CircleOutlineIcon from '@mattermost/compass-icons/components/circle-outline';\nimport ClockIcon from '@mattermost/compass-icons/components/clock';\nimport MinusCircleIcon from '@mattermost/compass-icons/components/minus-circle';\nimport { toKebab } from '@/utils/string';\nimport styles from './StatusBadge.module.scss';\n\n/** Figma Status Badge size. */\nexport type StatusBadgeSize =\n  | 'xx-small'\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large';\n\n/** Figma Status Badge status variant. */\nexport type StatusBadgeStatus =\n  | 'online'\n  | 'away'\n  | 'do-not-disturb'\n  | 'offline';\n\nexport interface StatusBadgeProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Size. Default: X-Small. */\n  size?: StatusBadgeSize;\n  /** Status variant. Figma: Status. Default: Online. */\n  status?: StatusBadgeStatus;\n}\n\n/** Compass icon size in px per StatusBadge size — Figma. */\nconst BADGE_ICON_SIZE_PX: Record<StatusBadgeSize, number> = {\n  'xx-small': 10,\n  'x-small': 12,\n  small: 16,\n  medium: 20,\n  large: 32,\n};\n\n/** Compass icon component per status variant. */\nconst GLYPH_COMPONENT: Record<StatusBadgeStatus, ElementType> = {\n  online: CheckCircleIcon,\n  away: ClockIcon,\n  'do-not-disturb': MinusCircleIcon,\n  offline: CircleOutlineIcon,\n};\n\n/**\n * A Status Badge tells you whether someone is reachable. It pairs with an avatar or username\n * so a glance is enough to know if a teammate is online, focused, away, or signed out.\n */\nexport default function StatusBadge({\n  className = '',\n  size = 'x-small',\n  status = 'online',\n}: StatusBadgeProps) {\n  const sizeClass = styles[`status-badge--size-${toKebab(size)}`];\n  const statusClass = styles[`status-badge--status-${toKebab(status)}`];\n  const rootClass = [styles['status-badge'], sizeClass, statusClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconSizePx = BADGE_ICON_SIZE_PX[size];\n  const GlyphIcon = GLYPH_COMPONENT[status];\n\n  return (\n    <span className={rootClass} role=\"img\" aria-label={status}>\n      <span className={styles['status-badge__glyph']}>\n        <GlyphIcon size={iconSizePx} />\n      </span>\n    </span>\n  );\n}\n"],"names":["BADGE_ICON_SIZE_PX","GLYPH_COMPONENT","CheckCircleIcon","ClockIcon","MinusCircleIcon","CircleOutlineIcon","StatusBadge","className","size","status","sizeClass","styles","toKebab","statusClass","rootClass","iconSizePx","GlyphIcon","jsx"],"mappings":";;;;;;;AAiCA,MAAMA,IAAsD;AAAA,EAC1D,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAGMC,IAA0D;AAAA,EAC9D,QAAQC;AAAA,EACR,MAAMC;AAAA,EACN,kBAAkBC;AAAA,EAClB,SAASC;AACX;AAMA,SAAwBC,EAAY;AAAA,EAClC,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AACX,GAAqB;AACnB,QAAMC,IAAYC,EAAO,sBAAsBC,EAAQJ,CAAI,CAAC,EAAE,GACxDK,IAAcF,EAAO,wBAAwBC,EAAQH,CAAM,CAAC,EAAE,GAC9DK,IAAY,CAACH,EAAO,cAAc,GAAGD,GAAWG,GAAaN,CAAS,EACzE,OAAO,OAAO,EACd,KAAK,GAAG,GAELQ,IAAaf,EAAmBQ,CAAI,GACpCQ,IAAYf,EAAgBQ,CAAM;AAExC,2BACG,QAAA,EAAK,WAAWK,GAAW,MAAK,OAAM,cAAYL,GACjD,UAAA,gBAAAQ,EAAC,UAAK,WAAWN,EAAO,qBAAqB,GAC3C,UAAA,gBAAAM,EAACD,KAAU,MAAMD,GAAY,GAC/B,EAAA,CACF;AAEJ;"}

package/dist/components/status-badge/StatusBadge.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./StatusBadge.css');const s={"status-badge":"_status-badge_umpvw_2","status-badge__glyph":"_status-badge__glyph_umpvw_13","status-badge--size-xx-small":"_status-badge--size-xx-small_umpvw_19","status-badge--size-x-small":"_status-badge--size-x-small_umpvw_27","status-badge--size-small":"_status-badge--size-small_umpvw_35","status-badge--size-medium":"_status-badge--size-medium_umpvw_43","status-badge--size-large":"_status-badge--size-large_umpvw_51","status-badge--status-online":"_status-badge--status-online_umpvw_60","status-badge--status-away":"_status-badge--status-away_umpvw_64","status-badge--status-do-not-disturb":"_status-badge--status-do-not-disturb_umpvw_68","status-badge--status-offline":"_status-badge--status-offline_umpvw_72"};exports.default=s;
+//# sourceMappingURL=StatusBadge.module.scss.cjs.map

package/dist/components/status-badge/StatusBadge.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/status-badge/StatusBadge.module.scss.js

@@ -0,0 +1,17 @@
+import './StatusBadge.css';const s = {
+  "status-badge": "_status-badge_umpvw_2",
+  "status-badge__glyph": "_status-badge__glyph_umpvw_13",
+  "status-badge--size-xx-small": "_status-badge--size-xx-small_umpvw_19",
+  "status-badge--size-x-small": "_status-badge--size-x-small_umpvw_27",
+  "status-badge--size-small": "_status-badge--size-small_umpvw_35",
+  "status-badge--size-medium": "_status-badge--size-medium_umpvw_43",
+  "status-badge--size-large": "_status-badge--size-large_umpvw_51",
+  "status-badge--status-online": "_status-badge--status-online_umpvw_60",
+  "status-badge--status-away": "_status-badge--status-away_umpvw_64",
+  "status-badge--status-do-not-disturb": "_status-badge--status-do-not-disturb_umpvw_68",
+  "status-badge--status-offline": "_status-badge--status-offline_umpvw_72"
+};
+export {
+  s as default
+};
+//# sourceMappingURL=StatusBadge.module.scss.js.map

package/dist/components/status-badge/StatusBadge.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/components/status-badge/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./StatusBadge.cjs");exports.StatusBadge=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/status-badge/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/status-badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/status-badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,iBAAiB,GAClB,MAAM,eAAe,CAAC"}

package/dist/components/status-badge/index.js

@@ -0,0 +1,5 @@
+import { default as e } from "./StatusBadge.js";
+export {
+  e as StatusBadge
+};
+//# sourceMappingURL=index.js.map

package/dist/components/status-badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/switch/Switch.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),c=require("react"),S=require("../../hooks/use-controllable.cjs"),q=require("../../utils/string.cjs"),s=require("./Switch.module.scss.cjs"),o=c.forwardRef(function({className:u="",size:r="medium",children:l,secondaryLabel:t,semiBold:d=!1,id:h,checked:a,defaultChecked:i,disabled:w,onChange:_,...f},m){const b=c.useId(),n=h??b,[j,p]=S.useControllable(a,i,_),x=s.default[`switch--size-${q.toKebab(r)}`],C=d?s.default["switch--semi-bold"]:"",N=t!=null?s.default["switch--with-secondary"]:"",g=[s.default.switch,x,C,N,u].filter(Boolean).join(" ");return e.jsxs("label",{className:g,htmlFor:n,children:[(l!=null||t!=null)&&e.jsxs("span",{className:s.default.switch__labels,children:[l!=null&&e.jsx("span",{className:s.default.switch__label,children:l}),t!=null&&e.jsx("span",{className:s.default["switch__secondary-label"],children:t})]}),e.jsxs("span",{className:s.default.switch__track,children:[e.jsx("input",{ref:m,id:n,type:"checkbox",role:"switch",className:s.default.switch__input,checked:a,defaultChecked:i,disabled:w,"aria-checked":j,onChange:p,...f}),e.jsx("span",{className:s.default.switch__knob,"aria-hidden":!0})]})]})});o.displayName="Switch";exports.default=o;
+//# sourceMappingURL=Switch.cjs.map

package/dist/components/switch/Switch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.cjs","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { forwardRef, useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Switch.module.scss';\n\nexport type SwitchSize = 'small' | 'medium' | 'large';\n\nexport interface SwitchProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (16px), Medium (20px), Large (24px). Default: Medium. */\n  size?: SwitchSize;\n  /** Primary label content. Rendered to the left of the switch. */\n  children?: React.ReactNode;\n  /** Optional secondary label (e.g. description) below the primary label. */\n  secondaryLabel?: React.ReactNode;\n  /** When true, primary label uses semi-bold (600) weight. Default: false. */\n  semiBold?: boolean;\n}\n\n/**\n * A Switch is a real-world toggle: flip it, and the change happens. Use it for binary\n * settings that take effect immediately and don't need a separate \"Save\" step.\n */\nconst Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    className = '',\n    size = 'medium',\n    children,\n    secondaryLabel,\n    semiBold = false,\n    id: idProp,\n    checked,\n    defaultChecked,\n    disabled,\n    onChange,\n    ...rest\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [resolvedChecked, handleChange] = useControllable(\n    checked,\n    defaultChecked,\n    onChange,\n  );\n\n  const sizeClass = styles[`switch--size-${toKebab(size)}`];\n  const semiBoldClass = semiBold ? styles['switch--semi-bold'] : '';\n  const secondaryClass =\n    secondaryLabel != null ? styles['switch--with-secondary'] : '';\n\n  const rootClass = [\n    styles.switch,\n    sizeClass,\n    semiBoldClass,\n    secondaryClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      {(children != null || secondaryLabel != null) && (\n        <span className={styles['switch__labels']}>\n          {children != null && (\n            <span className={styles['switch__label']}>{children}</span>\n          )}\n          {secondaryLabel != null && (\n            <span className={styles['switch__secondary-label']}>\n              {secondaryLabel}\n            </span>\n          )}\n        </span>\n      )}\n      <span className={styles['switch__track']}>\n        <input\n          ref={ref}\n          id={id}\n          type=\"checkbox\"\n          role=\"switch\"\n          className={styles['switch__input']}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          aria-checked={resolvedChecked}\n          onChange={handleChange}\n          {...rest}\n        />\n        <span className={styles['switch__knob']} aria-hidden />\n      </span>\n    </label>\n  );\n});\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"names":["Switch","forwardRef","className","size","children","secondaryLabel","semiBold","idProp","checked","defaultChecked","disabled","onChange","rest","ref","generatedId","useId","id","resolvedChecked","handleChange","useControllable","sizeClass","styles","toKebab","semiBoldClass","secondaryClass","rootClass","jsxs","jsx"],"mappings":"2RA4BMA,EAASC,EAAAA,WAA0C,SACvD,CACE,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,SAAAC,EACA,eAAAC,EACA,SAAAC,EAAW,GACX,GAAIC,EACJ,QAAAC,EACA,eAAAC,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKT,GAAUO,EACf,CAACG,EAAiBC,CAAY,EAAIC,EAAAA,gBACtCX,EACAC,EACAE,CAAA,EAGIS,EAAYC,EAAAA,QAAO,gBAAgBC,EAAAA,QAAQnB,CAAI,CAAC,EAAE,EAClDoB,EAAgBjB,EAAWe,UAAO,mBAAmB,EAAI,GACzDG,EACJnB,GAAkB,KAAOgB,EAAAA,QAAO,wBAAwB,EAAI,GAExDI,EAAY,CAChBJ,EAAAA,QAAO,OACPD,EACAG,EACAC,EACAtB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEwB,EAAAA,KAAC,QAAA,CAAM,UAAWD,EAAW,QAAST,EAClC,SAAA,EAAAZ,GAAY,MAAQC,GAAkB,OACtCqB,EAAAA,KAAC,QAAK,UAAWL,EAAAA,QAAO,eACrB,SAAA,CAAAjB,GAAY,MACXuB,EAAAA,IAAC,OAAA,CAAK,UAAWN,UAAO,cAAmB,SAAAjB,EAAS,EAErDC,GAAkB,MACjBsB,EAAAA,IAAC,OAAA,CAAK,UAAWN,EAAAA,QAAO,yBAAyB,EAC9C,SAAAhB,CAAA,CACH,CAAA,EAEJ,EAEFqB,EAAAA,KAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,cACtB,SAAA,CAAAM,EAAAA,IAAC,QAAA,CACC,IAAAd,EACA,GAAAG,EACA,KAAK,WACL,KAAK,SACL,UAAWK,EAAAA,QAAO,cAClB,QAAAb,EACA,eAAAC,EACA,SAAAC,EACA,eAAcO,EACd,SAAUC,EACT,GAAGN,CAAA,CAAA,QAEL,OAAA,CAAK,UAAWS,EAAAA,QAAO,aAAiB,cAAW,EAAA,CAAC,CAAA,CAAA,CACvD,CAAA,EACF,CAEJ,CAAC,EAEDrB,EAAO,YAAc"}

package/dist/components/switch/Switch.css

@@ -0,0 +1 @@
+._switch_1hxbi_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_1hxbi_2:has(._switch__input_1hxbi_12:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._switch_1hxbi_2:has(._switch__input_1hxbi_12:disabled) ._switch__secondary-label_1hxbi_16{color:rgba(var(--center-channel-color-rgb),.56)}._switch__input_1hxbi_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_1hxbi_12:focus-visible{outline:none}._switch__labels_1hxbi_33{display:flex;flex-direction:column;flex:1 1 0;justify-content:center;min-width:0}._switch__label_1hxbi_33{line-height:1}._switch__secondary-label_1hxbi_16{color:rgba(var(--center-channel-color-rgb),.72);margin-top:var(--spacing-xxxxs)}._switch__track_1hxbi_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-full);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:focus-visible){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch_1hxbi_2:has(._switch__input_1hxbi_12:not(:disabled)):hover ._switch__track_1hxbi_47{background-color:rgba(var(--center-channel-color-rgb),.4)}._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:checked){background-color:var(--button-bg)}._switch_1hxbi_2:has(._switch__input_1hxbi_12:not(:disabled)):hover ._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:checked){background-color:var(--button-bg)}._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:focus-visible:checked){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:disabled){opacity:.32}._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:disabled:checked){background-color:rgba(var(--center-channel-color-rgb),.32)}._switch__knob_1hxbi_77{position:absolute;left:2px;top:50%;transform:translateY(-50%) translate(0);border-radius:var(--radius-full);background-color:var(--button-color);box-shadow:var(--elevation-1);transition:transform var(--duration-quick) var(--ease-transition);pointer-events:none}._switch--size-small_1hxbi_88 ._switch__track_1hxbi_47{width:26px;height:16px}._switch--size-small_1hxbi_88 ._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:checked) ._switch__knob_1hxbi_77{transform:translateY(-50%) translate(10px)}._switch--size-small_1hxbi_88 ._switch__knob_1hxbi_77{width:12px;height:12px}._switch--size-small_1hxbi_88 ._switch__label_1hxbi_33,._switch--size-small_1hxbi_88 ._switch__secondary-label_1hxbi_16{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-medium_1hxbi_107 ._switch__track_1hxbi_47{width:32px;height:20px}._switch--size-medium_1hxbi_107 ._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:checked) ._switch__knob_1hxbi_77{transform:translateY(-50%) translate(12px)}._switch--size-medium_1hxbi_107 ._switch__knob_1hxbi_77{width:16px;height:16px}._switch--size-medium_1hxbi_107 ._switch__label_1hxbi_33{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--size-medium_1hxbi_107 ._switch__secondary-label_1hxbi_16{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-large_1hxbi_126 ._switch__track_1hxbi_47{width:40px;height:24px}._switch--size-large_1hxbi_126 ._switch__track_1hxbi_47:has(._switch__input_1hxbi_12:checked) ._switch__knob_1hxbi_77{transform:translateY(-50%) translate(16px)}._switch--size-large_1hxbi_126 ._switch__knob_1hxbi_77{width:20px;height:20px}._switch--size-large_1hxbi_126 ._switch__label_1hxbi_33{font-size:var(--font-size-200);line-height:var(--line-height-200)}._switch--size-large_1hxbi_126 ._switch__secondary-label_1hxbi_16{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--semi-bold_1hxbi_145 ._switch__label_1hxbi_33{font-weight:var(--font-weight-semibold)}._switch--with-secondary_1hxbi_148{align-items:center}._switch--with-secondary_1hxbi_148 ._switch__labels_1hxbi_33{padding-top:0;padding-bottom:0}

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,21 @@
+import { InputHTMLAttributes } from 'react';
+export type SwitchSize = 'small' | 'medium' | 'large';
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Optional CSS class name. */
+    className?: string;
+    /** Size variant. Figma: Small (16px), Medium (20px), Large (24px). Default: Medium. */
+    size?: SwitchSize;
+    /** Primary label content. Rendered to the left of the switch. */
+    children?: React.ReactNode;
+    /** Optional secondary label (e.g. description) below the primary label. */
+    secondaryLabel?: React.ReactNode;
+    /** When true, primary label uses semi-bold (600) weight. Default: false. */
+    semiBold?: boolean;
+}
+/**
+ * A Switch is a real-world toggle: flip it, and the change happens. Use it for binary
+ * settings that take effect immediately and don't need a separate "Save" step.
+ */
+declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLInputElement>>;
+export default Switch;
+//# sourceMappingURL=Switch.d.ts.map

package/dist/components/switch/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAMjD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2EAA2E;IAC3E,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,QAAA,MAAM,MAAM,0GAuEV,CAAC;AAIH,eAAe,MAAM,CAAC"}

package/dist/components/switch/Switch.js

@@ -0,0 +1,60 @@
+import { jsxs as e, jsx as l } from "react/jsx-runtime";
+import { forwardRef as j, useId as k } from "react";
+import { useControllable as y } from "../../hooks/use-controllable.js";
+import { toKebab as S } from "../../utils/string.js";
+import s from "./Switch.module.scss.js";
+const z = j(function({
+  className: n = "",
+  size: r = "medium",
+  children: a,
+  secondaryLabel: t,
+  semiBold: h = !1,
+  id: m,
+  checked: i,
+  defaultChecked: o,
+  disabled: d,
+  onChange: w,
+  ...p
+}, u) {
+  const _ = k(), c = m ?? _, [f, N] = y(
+    i,
+    o,
+    w
+  ), b = s[`switch--size-${S(r)}`], C = h ? s["switch--semi-bold"] : "", x = t != null ? s["switch--with-secondary"] : "", g = [
+    s.switch,
+    b,
+    C,
+    x,
+    n
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("label", { className: g, htmlFor: c, children: [
+    (a != null || t != null) && /* @__PURE__ */ e("span", { className: s.switch__labels, children: [
+      a != null && /* @__PURE__ */ l("span", { className: s.switch__label, children: a }),
+      t != null && /* @__PURE__ */ l("span", { className: s["switch__secondary-label"], children: t })
+    ] }),
+    /* @__PURE__ */ e("span", { className: s.switch__track, children: [
+      /* @__PURE__ */ l(
+        "input",
+        {
+          ref: u,
+          id: c,
+          type: "checkbox",
+          role: "switch",
+          className: s.switch__input,
+          checked: i,
+          defaultChecked: o,
+          disabled: d,
+          "aria-checked": f,
+          onChange: N,
+          ...p
+        }
+      ),
+      /* @__PURE__ */ l("span", { className: s.switch__knob, "aria-hidden": !0 })
+    ] })
+  ] });
+});
+z.displayName = "Switch";
+export {
+  z as default
+};
+//# sourceMappingURL=Switch.js.map

package/dist/components/switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { forwardRef, useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Switch.module.scss';\n\nexport type SwitchSize = 'small' | 'medium' | 'large';\n\nexport interface SwitchProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (16px), Medium (20px), Large (24px). Default: Medium. */\n  size?: SwitchSize;\n  /** Primary label content. Rendered to the left of the switch. */\n  children?: React.ReactNode;\n  /** Optional secondary label (e.g. description) below the primary label. */\n  secondaryLabel?: React.ReactNode;\n  /** When true, primary label uses semi-bold (600) weight. Default: false. */\n  semiBold?: boolean;\n}\n\n/**\n * A Switch is a real-world toggle: flip it, and the change happens. Use it for binary\n * settings that take effect immediately and don't need a separate \"Save\" step.\n */\nconst Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    className = '',\n    size = 'medium',\n    children,\n    secondaryLabel,\n    semiBold = false,\n    id: idProp,\n    checked,\n    defaultChecked,\n    disabled,\n    onChange,\n    ...rest\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [resolvedChecked, handleChange] = useControllable(\n    checked,\n    defaultChecked,\n    onChange,\n  );\n\n  const sizeClass = styles[`switch--size-${toKebab(size)}`];\n  const semiBoldClass = semiBold ? styles['switch--semi-bold'] : '';\n  const secondaryClass =\n    secondaryLabel != null ? styles['switch--with-secondary'] : '';\n\n  const rootClass = [\n    styles.switch,\n    sizeClass,\n    semiBoldClass,\n    secondaryClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      {(children != null || secondaryLabel != null) && (\n        <span className={styles['switch__labels']}>\n          {children != null && (\n            <span className={styles['switch__label']}>{children}</span>\n          )}\n          {secondaryLabel != null && (\n            <span className={styles['switch__secondary-label']}>\n              {secondaryLabel}\n            </span>\n          )}\n        </span>\n      )}\n      <span className={styles['switch__track']}>\n        <input\n          ref={ref}\n          id={id}\n          type=\"checkbox\"\n          role=\"switch\"\n          className={styles['switch__input']}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          aria-checked={resolvedChecked}\n          onChange={handleChange}\n          {...rest}\n        />\n        <span className={styles['switch__knob']} aria-hidden />\n      </span>\n    </label>\n  );\n});\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"names":["Switch","forwardRef","className","size","children","secondaryLabel","semiBold","idProp","checked","defaultChecked","disabled","onChange","rest","ref","generatedId","useId","id","resolvedChecked","handleChange","useControllable","sizeClass","styles","toKebab","semiBoldClass","secondaryClass","rootClass","jsxs","jsx"],"mappings":";;;;;AA4BA,MAAMA,IAASC,EAA0C,SACvD;AAAA,EACE,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,IAAIC;AAAA,EACJ,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAcC,EAAA,GACdC,IAAKT,KAAUO,GACf,CAACG,GAAiBC,CAAY,IAAIC;AAAA,IACtCX;AAAA,IACAC;AAAA,IACAE;AAAA,EAAA,GAGIS,IAAYC,EAAO,gBAAgBC,EAAQnB,CAAI,CAAC,EAAE,GAClDoB,IAAgBjB,IAAWe,EAAO,mBAAmB,IAAI,IACzDG,IACJnB,KAAkB,OAAOgB,EAAO,wBAAwB,IAAI,IAExDI,IAAY;AAAA,IAChBJ,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAtB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAwB,EAAC,SAAA,EAAM,WAAWD,GAAW,SAAST,GAClC,UAAA;AAAA,KAAAZ,KAAY,QAAQC,KAAkB,SACtC,gBAAAqB,EAAC,UAAK,WAAWL,EAAO,gBACrB,UAAA;AAAA,MAAAjB,KAAY,QACX,gBAAAuB,EAAC,QAAA,EAAK,WAAWN,EAAO,eAAmB,UAAAjB,GAAS;AAAA,MAErDC,KAAkB,QACjB,gBAAAsB,EAAC,QAAA,EAAK,WAAWN,EAAO,yBAAyB,GAC9C,UAAAhB,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IAEF,gBAAAqB,EAAC,QAAA,EAAK,WAAWL,EAAO,eACtB,UAAA;AAAA,MAAA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAd;AAAA,UACA,IAAAG;AAAA,UACA,MAAK;AAAA,UACL,MAAK;AAAA,UACL,WAAWK,EAAO;AAAA,UAClB,SAAAb;AAAA,UACA,gBAAAC;AAAA,UACA,UAAAC;AAAA,UACA,gBAAcO;AAAA,UACd,UAAUC;AAAA,UACT,GAAGN;AAAA,QAAA;AAAA,MAAA;AAAA,wBAEL,QAAA,EAAK,WAAWS,EAAO,cAAiB,eAAW,GAAA,CAAC;AAAA,IAAA,EAAA,CACvD;AAAA,EAAA,GACF;AAEJ,CAAC;AAEDrB,EAAO,cAAc;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Switch.css');const _="_switch__input_1hxbi_12",i="_switch__labels_1hxbi_33",s="_switch__label_1hxbi_33",t="_switch__track_1hxbi_47",c="_switch__knob_1hxbi_77",h={switch:"_switch_1hxbi_2",switch__input:_,"switch__secondary-label":"_switch__secondary-label_1hxbi_16",switch__labels:i,switch__label:s,switch__track:t,switch__knob:c,"switch--size-small":"_switch--size-small_1hxbi_88","switch--size-medium":"_switch--size-medium_1hxbi_107","switch--size-large":"_switch--size-large_1hxbi_126","switch--semi-bold":"_switch--semi-bold_1hxbi_145","switch--with-secondary":"_switch--with-secondary_1hxbi_148"};exports.default=h;exports.switch__input=_;exports.switch__knob=c;exports.switch__label=s;exports.switch__labels=i;exports.switch__track=t;
+//# sourceMappingURL=Switch.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,23 @@
+import './Switch.css';const _ = "_switch__input_1hxbi_12", i = "_switch__labels_1hxbi_33", s = "_switch__label_1hxbi_33", t = "_switch__track_1hxbi_47", h = "_switch__knob_1hxbi_77", c = {
+  switch: "_switch_1hxbi_2",
+  switch__input: _,
+  "switch__secondary-label": "_switch__secondary-label_1hxbi_16",
+  switch__labels: i,
+  switch__label: s,
+  switch__track: t,
+  switch__knob: h,
+  "switch--size-small": "_switch--size-small_1hxbi_88",
+  "switch--size-medium": "_switch--size-medium_1hxbi_107",
+  "switch--size-large": "_switch--size-large_1hxbi_126",
+  "switch--semi-bold": "_switch--semi-bold_1hxbi_145",
+  "switch--with-secondary": "_switch--with-secondary_1hxbi_148"
+};
+export {
+  c as default,
+  _ as switch__input,
+  h as switch__knob,
+  s as switch__label,
+  i as switch__labels,
+  t as switch__track
+};
+//# sourceMappingURL=Switch.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/components/switch/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Switch.cjs");exports.Switch=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/switch/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/switch/index.js

@@ -0,0 +1,5 @@
+import { default as e } from "./Switch.js";
+export {
+  e as Switch
+};
+//# sourceMappingURL=index.js.map

package/dist/components/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/tabs/Tabs.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.cjs","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\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\nexport interface TabsProps {\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}\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}: 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 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          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.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}\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                    {'Unread'}\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","rootClass","styles","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","node"],"mappings":"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"}

package/dist/components/tabs/Tabs.css

@@ -0,0 +1 @@
+._tabs_1xaix_2{display:flex;align-items:center;justify-content:space-between}._tabs__tab-list_1xaix_7{display:flex;align-items:flex-start;gap:var(--spacing-xxs)}._tabs__tab_1xaix_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_1xaix_7:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._tabs__tab_1xaix_7:hover:not(._tabs__tab--active_1xaix_31):not(._tabs__tab--disabled_1xaix_31){background-color:rgba(var(--center-channel-color-rgb),.08)}._tabs__tab--active_1xaix_31{background-color:rgba(var(--link-color-rgb),.08)}._tabs__tab--active_1xaix_31 ._tabs__tab-label_1xaix_37{color:var(--link-color)}._tabs__tab--active_1xaix_31 ._tabs__count-badge_1xaix_40{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__tab--disabled_1xaix_31{cursor:not-allowed}._tabs__tab--disabled_1xaix_31 ._tabs__tab-label_1xaix_37,._tabs__tab--disabled_1xaix_31 ._tabs__count-badge_1xaix_40{color:rgba(var(--center-channel-color-rgb),.4)}._tabs__tab-label_1xaix_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_1xaix_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_1xaix_75{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__unread-badge_1xaix_79{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs);width:4px;height:4px;border-radius:var(--radius-full);background-color:var(--mention-bg)}._tabs__unread-label_1xaix_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_1xaix_99{display:flex;align-items:center;gap:var(--spacing-xxs);flex-shrink:0}

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

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+export interface TabItem {
+    /** Unique key for this tab. */
+    key: string;
+    /** Tab label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    label: ReactNode;
+    /** Optional count badge number. */
+    countBadge?: number;
+    /** When true, shows an unread dot badge. */
+    unreadBadge?: boolean;
+    /** Optional id for this tab (pair with `panelId` for `aria-controls`). */
+    id?: string;
+    /** Optional id of the host tabpanel this tab controls. */
+    panelId?: string;
+    /** When true, the tab can't be selected and arrow-key navigation skips it. */
+    disabled?: boolean;
+    /** Native tooltip text, e.g. to explain why the tab is disabled. */
+    title?: string;
+}
+export interface TabsProps {
+    /** Array of tab items to display. */
+    tabs: TabItem[];
+    /** Key of the currently active tab. */
+    activeKey: string;
+    /** Called when a tab is selected. */
+    onChange: (key: string) => void;
+    /** Optional CSS class name. */
+    className?: string;
+    /** Optional trailing controls rendered to the right of the tabs. */
+    controls?: ReactNode;
+}
+/**
+ * Tabs let people switch between sibling views inside the same surface — Mentions in the
+ * 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, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,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;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,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;CACtB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAc,EACd,QAAQ,GACT,EAAE,SAAS,2CA0HX"}

package/dist/components/tabs/Tabs.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\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\nexport interface TabsProps {\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}\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}: 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 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          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.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}\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                    {'Unread'}\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","rootClass","styles","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","node"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Tabs.css');const _="_tabs_1xaix_2",a="_tabs__tab_1xaix_7",t="_tabs__controls_1xaix_99",b={tabs:_,"tabs__tab-list":"_tabs__tab-list_1xaix_7",tabs__tab:a,"tabs__tab--active":"_tabs__tab--active_1xaix_31","tabs__tab--disabled":"_tabs__tab--disabled_1xaix_31","tabs__tab-label":"_tabs__tab-label_1xaix_37","tabs__count-badge":"_tabs__count-badge_1xaix_40","tabs__count-badge--active":"_tabs__count-badge--active_1xaix_75","tabs__unread-badge":"_tabs__unread-badge_1xaix_79","tabs__unread-label":"_tabs__unread-label_1xaix_88",tabs__controls:t};exports.default=b;exports.tabs=_;exports.tabs__controls=t;exports.tabs__tab=a;
+//# sourceMappingURL=Tabs.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,20 @@
+import './Tabs.css';const _ = "_tabs_1xaix_2", a = "_tabs__tab_1xaix_7", t = "_tabs__controls_1xaix_99", b = {
+  tabs: _,
+  "tabs__tab-list": "_tabs__tab-list_1xaix_7",
+  tabs__tab: a,
+  "tabs__tab--active": "_tabs__tab--active_1xaix_31",
+  "tabs__tab--disabled": "_tabs__tab--disabled_1xaix_31",
+  "tabs__tab-label": "_tabs__tab-label_1xaix_37",
+  "tabs__count-badge": "_tabs__count-badge_1xaix_40",
+  "tabs__count-badge--active": "_tabs__count-badge--active_1xaix_75",
+  "tabs__unread-badge": "_tabs__unread-badge_1xaix_79",
+  "tabs__unread-label": "_tabs__unread-label_1xaix_88",
+  tabs__controls: t
+};
+export {
+  b as default,
+  _ as tabs,
+  t as tabs__controls,
+  a as tabs__tab
+};
+//# sourceMappingURL=Tabs.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/components/tabs/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Tabs.cjs");exports.Tabs=e.default;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/tabs/index.js

@@ -0,0 +1,5 @@
+import { default as f } from "./Tabs.js";
+export {
+  f as Tabs
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/tag/Tag.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),c=require("../icon/Icon.cjs"),e=require("./Tag.module.scss.cjs"),r={"x-small":"10",small:"12"},o={default:e.default["tag--type-default"],info:e.default["tag--type-info"],"info-dim":e.default["tag--type-info-dim"],danger:e.default["tag--type-danger"],success:e.default["tag--type-success"],warning:e.default["tag--type-warning"]};function f({label:s,type:n="default",size:t="x-small",casing:u="title-case",leadingIcon:l,className:d=""}){const i=[e.default.tag,o[n],t==="small"?e.default["tag--size-small"]:e.default["tag--size-x-small"],u==="all-caps"?e.default["tag--casing-all-caps"]:"",d].filter(Boolean).join(" ");return a.jsxs("span",{className:i,children:[l&&a.jsx("span",{className:e.default.tag__icon,"aria-hidden":!0,children:a.jsx(c.IconSlotContext.Provider,{value:{size:r[t]},children:l})}),a.jsx("span",{className:e.default.tag__label,children:s})]})}exports.default=f;
+//# sourceMappingURL=Tag.cjs.map

package/dist/components/tag/Tag.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.cjs","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './Tag.module.scss';\n\nexport type TagType =\n  | 'default'\n  | 'info'\n  | 'info-dim'\n  | 'danger'\n  | 'success'\n  | 'warning';\n\nexport type TagSize = 'small' | 'x-small';\nexport type TagCasing = 'title-case' | 'all-caps';\n\nexport type TagProps = {\n  /** Tag label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Semantic colour type. Default: Default. */\n  type?: TagType;\n  /** Size variant. Default: X-Small. */\n  size?: TagSize;\n  /** Text casing. Default: Title Case. */\n  casing?: TagCasing;\n  /** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Tag provides the correct size via context (`\"10\"` for x-small, `\"12\"` for small). */\n  leadingIcon?: ReactNode;\n  /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */\n  className?: string;\n};\n\nconst TAG_ICON_SIZE: Record<TagSize, IconSize> = {\n  'x-small': '10',\n  small: '12',\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n  default: styles['tag--type-default'],\n  info: styles['tag--type-info'],\n  'info-dim': styles['tag--type-info-dim'],\n  danger: styles['tag--type-danger'],\n  success: styles['tag--type-success'],\n  warning: styles['tag--type-warning'],\n};\n\n/**\n * Tags are compact pills that mark something — a role (_BOT_, _GUEST_), a tier\n * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way\n * to surface a small piece of metadata without spending a sentence on it.\n */\nexport default function Tag({\n  label,\n  type = 'default',\n  size = 'x-small',\n  casing = 'title-case',\n  leadingIcon,\n  className = '',\n}: TagProps) {\n  const classes = [\n    styles.tag,\n    TYPE_CLASS[type],\n    size === 'small' ? styles['tag--size-small'] : styles['tag--size-x-small'],\n    casing === 'all-caps' ? styles['tag--casing-all-caps'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={classes}>\n      {leadingIcon && (\n        <span className={styles['tag__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: TAG_ICON_SIZE[size] }}>\n            {leadingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      )}\n      <span className={styles['tag__label']}>{label}</span>\n    </span>\n  );\n}\n"],"names":["TAG_ICON_SIZE","TYPE_CLASS","styles","Tag","label","type","size","casing","leadingIcon","className","classes","jsxs","jsx","IconSlotContext"],"mappings":"kNA+BMA,EAA2C,CAC/C,UAAW,KACX,MAAO,IACT,EAEMC,EAAsC,CAC1C,QAASC,EAAAA,QAAO,mBAAmB,EACnC,KAAMA,EAAAA,QAAO,gBAAgB,EAC7B,WAAYA,EAAAA,QAAO,oBAAoB,EACvC,OAAQA,EAAAA,QAAO,kBAAkB,EACjC,QAASA,EAAAA,QAAO,mBAAmB,EACnC,QAASA,EAAAA,QAAO,mBAAmB,CACrC,EAOA,SAAwBC,EAAI,CAC1B,MAAAC,EACA,KAAAC,EAAO,UACP,KAAAC,EAAO,UACP,OAAAC,EAAS,aACT,YAAAC,EACA,UAAAC,EAAY,EACd,EAAa,CACX,MAAMC,EAAU,CACdR,EAAAA,QAAO,IACPD,EAAWI,CAAI,EACfC,IAAS,QAAUJ,EAAAA,QAAO,iBAAiB,EAAIA,EAAAA,QAAO,mBAAmB,EACzEK,IAAW,WAAaL,UAAO,sBAAsB,EAAI,GACzDO,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,KAAC,OAAA,CAAK,UAAWD,EACd,SAAA,CAAAF,GACCI,EAAAA,IAAC,QAAK,UAAWV,EAAAA,QAAO,UAAc,cAAW,GAC/C,SAAAU,EAAAA,IAACC,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMb,EAAcM,CAAI,CAAA,EACxD,WACH,EACF,QAED,OAAA,CAAK,UAAWJ,EAAAA,QAAO,WAAgB,SAAAE,CAAA,CAAM,CAAA,EAChD,CAEJ"}

package/dist/components/tag/Tag.css

@@ -0,0 +1 @@
+._tag_ap0kl_2{display:inline-flex;align-items:center;box-sizing:border-box;width:fit-content;max-width:100%;border-radius:var(--radius-s);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);white-space:nowrap}._tag__icon_ap0kl_14{display:inline-flex;align-items:center;flex-shrink:0}._tag__label_ap0kl_19{line-height:var(--line-height-25)}._tag--size-x-small_ap0kl_22{gap:var(--spacing-xxxs);padding:0 var(--spacing-xxxs);font-size:var(--font-size-25);letter-spacing:.1px}._tag--size-small_ap0kl_28{gap:var(--spacing-xxs);padding:var(--spacing-xxxxs) var(--spacing-xxs);font-size:var(--font-size-75)}._tag--type-default_ap0kl_33{background-color:rgba(var(--center-channel-color-rgb),.08);color:var(--center-channel-color)}._tag--type-info_ap0kl_37{background-color:var(--sidebar-text-active-border);color:var(--button-color)}._tag--type-info-dim_ap0kl_41{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tag--type-danger_ap0kl_45{background-color:var(--color-danger);color:var(--button-color)}._tag--type-success_ap0kl_49{background-color:var(--color-success);color:var(--button-color)}._tag--type-warning_ap0kl_53{background-color:var(--color-warning);color:var(--neutral-0)}._tag--casing-all-caps_ap0kl_57{text-transform:uppercase}