@mattermost/compass-ui 0.1.0-alpha.0 → 0.1.0-alpha.10

package/dist/components/channels-sidebar/channelsSidebarModel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"channelsSidebarModel.cjs","sources":["../../../src/components/channels-sidebar/channelsSidebarModel.ts"],"sourcesContent":["import type { ChannelSidebarItemProps } from '@/components/channel-sidebar-item/ChannelSidebarItem';\n\nexport type ChannelsSidebarItemModel = Pick<\n  ChannelSidebarItemProps,\n  | 'name'\n  | 'leadingVisual'\n  | 'active'\n  | 'status'\n  | 'mentionCount'\n  | 'memberCount'\n  | 'avatarSrc'\n  | 'avatarAlt'\n  | 'showAvatarStatus'\n  | 'onClick'\n>;\n\nexport interface ChannelsSidebarCategoryModel {\n  label: string;\n  showChevron?: boolean;\n  showPlusButton?: boolean;\n}\n\nexport interface ChannelsSidebarGroupModel {\n  key: string;\n  category: ChannelsSidebarCategoryModel;\n  items: ChannelsSidebarItemModel[];\n}\n\nexport interface ChannelsSidebarModel {\n  topGroupItems: ChannelsSidebarItemModel[];\n  groups: ChannelsSidebarGroupModel[];\n}\n\n/**\n * Applies per-page display renames (keys = default names from the model) to\n * `name` and `avatarAlt` on each row, matching pre-model `channelNameOverrides` behavior.\n */\nexport function applyChannelNameOverrides(\n  model: ChannelsSidebarModel,\n  channelNameOverrides?: Record<string, string>,\n): ChannelsSidebarModel {\n  if (!channelNameOverrides || Object.keys(channelNameOverrides).length === 0) {\n    return model;\n  }\n\n  const resolve = (s: string) => channelNameOverrides[s] ?? s;\n\n  const mapRow = (row: ChannelsSidebarItemModel): ChannelsSidebarItemModel => ({\n    ...row,\n    name: resolve(row.name),\n    avatarAlt: row.avatarAlt != null ? resolve(row.avatarAlt) : row.avatarAlt,\n  });\n\n  return {\n    topGroupItems: model.topGroupItems.map(mapRow),\n    groups: model.groups.map((g) => ({\n      ...g,\n      items: g.items.map(mapRow),\n    })),\n  };\n}\n"],"names":["applyChannelNameOverrides","model","channelNameOverrides","resolve","s","mapRow","row","g"],"mappings":"gFAqCO,SAASA,EACdC,EACAC,EACsB,CACtB,GAAI,CAACA,GAAwB,OAAO,KAAKA,CAAoB,EAAE,SAAW,EACxE,OAAOD,EAGT,MAAME,EAAWC,GAAcF,EAAqBE,CAAC,GAAKA,EAEpDC,EAAUC,IAA6D,CAC3E,GAAGA,EACH,KAAMH,EAAQG,EAAI,IAAI,EACtB,UAAWA,EAAI,WAAa,KAAOH,EAAQG,EAAI,SAAS,EAAIA,EAAI,SAAA,GAGlE,MAAO,CACL,cAAeL,EAAM,cAAc,IAAII,CAAM,EAC7C,OAAQJ,EAAM,OAAO,IAAKM,IAAO,CAC/B,GAAGA,EACH,MAAOA,EAAE,MAAM,IAAIF,CAAM,CAAA,EACzB,CAAA,CAEN"}

package/dist/components/channels-sidebar/channelsSidebarModel.d.ts

@@ -0,0 +1,22 @@
+import { ChannelSidebarItemProps } from '../channel-sidebar-item/ChannelSidebarItem';
+export type ChannelsSidebarItemModel = Pick<ChannelSidebarItemProps, 'name' | 'leadingVisual' | 'active' | 'status' | 'mentionCount' | 'memberCount' | 'avatarSrc' | 'avatarAlt' | 'showAvatarStatus' | 'onClick'>;
+export interface ChannelsSidebarCategoryModel {
+    label: string;
+    showChevron?: boolean;
+    showPlusButton?: boolean;
+}
+export interface ChannelsSidebarGroupModel {
+    key: string;
+    category: ChannelsSidebarCategoryModel;
+    items: ChannelsSidebarItemModel[];
+}
+export interface ChannelsSidebarModel {
+    topGroupItems: ChannelsSidebarItemModel[];
+    groups: ChannelsSidebarGroupModel[];
+}
+/**
+ * Applies per-page display renames (keys = default names from the model) to
+ * `name` and `avatarAlt` on each row, matching pre-model `channelNameOverrides` behavior.
+ */
+export declare function applyChannelNameOverrides(model: ChannelsSidebarModel, channelNameOverrides?: Record<string, string>): ChannelsSidebarModel;
+//# sourceMappingURL=channelsSidebarModel.d.ts.map

package/dist/components/channels-sidebar/channelsSidebarModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"channelsSidebarModel.d.ts","sourceRoot":"","sources":["../../../src/components/channels-sidebar/channelsSidebarModel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,oDAAoD,CAAC;AAElG,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,uBAAuB,EACrB,MAAM,GACN,eAAe,GACf,QAAQ,GACR,QAAQ,GACR,cAAc,GACd,aAAa,GACb,WAAW,GACX,WAAW,GACX,kBAAkB,GAClB,SAAS,CACZ,CAAC;AAEF,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,yBAAyB;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,4BAA4B,CAAC;IACvC,KAAK,EAAE,wBAAwB,EAAE,CAAC;CACnC;AAED,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,wBAAwB,EAAE,CAAC;IAC1C,MAAM,EAAE,yBAAyB,EAAE,CAAC;CACrC;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,oBAAoB,EAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC5C,oBAAoB,CAoBtB"}

package/dist/components/channels-sidebar/channelsSidebarModel.js

@@ -0,0 +1,20 @@
+function r(a, p) {
+  if (!p || Object.keys(p).length === 0)
+    return a;
+  const e = (t) => p[t] ?? t, n = (t) => ({
+    ...t,
+    name: e(t.name),
+    avatarAlt: t.avatarAlt != null ? e(t.avatarAlt) : t.avatarAlt
+  });
+  return {
+    topGroupItems: a.topGroupItems.map(n),
+    groups: a.groups.map((t) => ({
+      ...t,
+      items: t.items.map(n)
+    }))
+  };
+}
+export {
+  r as applyChannelNameOverrides
+};
+//# sourceMappingURL=channelsSidebarModel.js.map

package/dist/components/channels-sidebar/channelsSidebarModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"channelsSidebarModel.js","sources":["../../../src/components/channels-sidebar/channelsSidebarModel.ts"],"sourcesContent":["import type { ChannelSidebarItemProps } from '@/components/channel-sidebar-item/ChannelSidebarItem';\n\nexport type ChannelsSidebarItemModel = Pick<\n  ChannelSidebarItemProps,\n  | 'name'\n  | 'leadingVisual'\n  | 'active'\n  | 'status'\n  | 'mentionCount'\n  | 'memberCount'\n  | 'avatarSrc'\n  | 'avatarAlt'\n  | 'showAvatarStatus'\n  | 'onClick'\n>;\n\nexport interface ChannelsSidebarCategoryModel {\n  label: string;\n  showChevron?: boolean;\n  showPlusButton?: boolean;\n}\n\nexport interface ChannelsSidebarGroupModel {\n  key: string;\n  category: ChannelsSidebarCategoryModel;\n  items: ChannelsSidebarItemModel[];\n}\n\nexport interface ChannelsSidebarModel {\n  topGroupItems: ChannelsSidebarItemModel[];\n  groups: ChannelsSidebarGroupModel[];\n}\n\n/**\n * Applies per-page display renames (keys = default names from the model) to\n * `name` and `avatarAlt` on each row, matching pre-model `channelNameOverrides` behavior.\n */\nexport function applyChannelNameOverrides(\n  model: ChannelsSidebarModel,\n  channelNameOverrides?: Record<string, string>,\n): ChannelsSidebarModel {\n  if (!channelNameOverrides || Object.keys(channelNameOverrides).length === 0) {\n    return model;\n  }\n\n  const resolve = (s: string) => channelNameOverrides[s] ?? s;\n\n  const mapRow = (row: ChannelsSidebarItemModel): ChannelsSidebarItemModel => ({\n    ...row,\n    name: resolve(row.name),\n    avatarAlt: row.avatarAlt != null ? resolve(row.avatarAlt) : row.avatarAlt,\n  });\n\n  return {\n    topGroupItems: model.topGroupItems.map(mapRow),\n    groups: model.groups.map((g) => ({\n      ...g,\n      items: g.items.map(mapRow),\n    })),\n  };\n}\n"],"names":["applyChannelNameOverrides","model","channelNameOverrides","resolve","s","mapRow","row","g"],"mappings":"AAqCO,SAASA,EACdC,GACAC,GACsB;AACtB,MAAI,CAACA,KAAwB,OAAO,KAAKA,CAAoB,EAAE,WAAW;AACxE,WAAOD;AAGT,QAAME,IAAU,CAACC,MAAcF,EAAqBE,CAAC,KAAKA,GAEpDC,IAAS,CAACC,OAA6D;AAAA,IAC3E,GAAGA;AAAA,IACH,MAAMH,EAAQG,EAAI,IAAI;AAAA,IACtB,WAAWA,EAAI,aAAa,OAAOH,EAAQG,EAAI,SAAS,IAAIA,EAAI;AAAA,EAAA;AAGlE,SAAO;AAAA,IACL,eAAeL,EAAM,cAAc,IAAII,CAAM;AAAA,IAC7C,QAAQJ,EAAM,OAAO,IAAI,CAACM,OAAO;AAAA,MAC/B,GAAGA;AAAA,MACH,OAAOA,EAAE,MAAM,IAAIF,CAAM;AAAA,IAAA,EACzB;AAAA,EAAA;AAEN;"}

package/dist/components/channels-sidebar/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ChannelsSidebar.cjs"),a=require("./channelsSidebarModel.cjs"),n=require("./ChannelsSidebar.module.scss.cjs");exports.ChannelsSidebar=e.default;exports.ChannelsSidebarCategory=e.ChannelsSidebarCategory;exports.ChannelsSidebarHeader=e.ChannelsSidebarHeader;exports.ChannelsSidebarNavigator=e.ChannelsSidebarNavigator;exports.applyChannelNameOverrides=a.applyChannelNameOverrides;exports.channelsSidebarStyles=n.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/channels-sidebar/index.cjs.map

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

package/dist/components/channels-sidebar/index.d.ts

@@ -0,0 +1,6 @@
+export { default as ChannelsSidebar } from './ChannelsSidebar';
+export { ChannelsSidebarHeader, ChannelsSidebarNavigator, ChannelsSidebarCategory, } from './ChannelsSidebar';
+export type { ChannelsSidebarProps, ChannelsSidebarHeaderProps, ChannelsSidebarNavigatorProps, ChannelsSidebarCategoryProps, ChannelsSidebarModel, } from './ChannelsSidebar';
+export * from './channelsSidebarModel';
+export { default as channelsSidebarStyles } from './ChannelsSidebar.module.scss';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/channels-sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/channels-sidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EACL,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,GACxB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,oBAAoB,EACpB,0BAA0B,EAC1B,6BAA6B,EAC7B,4BAA4B,EAC5B,oBAAoB,GACrB,MAAM,mBAAmB,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/components/channels-sidebar/index.js

@@ -0,0 +1,12 @@
+import { default as r, ChannelsSidebarCategory as n, ChannelsSidebarHeader as l, ChannelsSidebarNavigator as d } from "./ChannelsSidebar.js";
+import { applyChannelNameOverrides as o } from "./channelsSidebarModel.js";
+import { default as i } from "./ChannelsSidebar.module.scss.js";
+export {
+  r as ChannelsSidebar,
+  n as ChannelsSidebarCategory,
+  l as ChannelsSidebarHeader,
+  d as ChannelsSidebarNavigator,
+  o as applyChannelNameOverrides,
+  i as channelsSidebarStyles
+};
+//# sourceMappingURL=index.js.map

package/dist/components/channels-sidebar/index.js.map

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

package/dist/components/checkbox/Checkbox.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),t=require("react"),v=require("../../hooks/use-controllable.cjs"),O=require("../icon/Icon.cjs"),__E=require("@mattermost/compass-icons/components/check.js"),E=__E?.default??__E,__M=require("@mattermost/compass-icons/components/minus.js"),M=__M?.default??__M,R=require("../../utils/string.cjs"),e=require("./Checkbox.module.scss.cjs"),S={small:"10",medium:"12",large:"16"},y={check:E,minus:M};function z({className:x="",indeterminate:c=!1,size:l="medium",invalid:a=!1,children:u,id:b,checked:i,defaultChecked:r,disabled:f,onChange:m,...C}){const d=t.useRef(null),_=t.useId(),h=b??_,[k,p]=v.useControllable(i,r,m),n=c?"minus":k?"check":null;t.useEffect(()=>{const o=d.current;o&&(o.indeterminate=c)},[c]);const j=e.default[`checkbox--size-${R.toKebab(l)}`],I=a?e.default["checkbox--invalid"]:"",g=c?e.default["checkbox--indeterminate"]:"",N=[e.default.checkbox,j,I,g,x].filter(Boolean).join(" "),q=S[l];return s.jsxs("label",{className:N,htmlFor:h,children:[s.jsx("input",{ref:d,id:h,type:"checkbox",className:e.default.checkbox__input,checked:i,defaultChecked:r,disabled:f,"aria-invalid":a?!0:void 0,onChange:p,...C,...c?{"aria-checked":"mixed"}:{}}),s.jsx("span",{className:e.default.checkbox__box,children:n!==null&&(()=>{const o=y[n];return s.jsx("span",{className:e.default.checkbox__icon,children:s.jsx(O.default,{glyph:s.jsx(o,{}),size:q})},n)})()}),u!=null&&s.jsx("span",{className:e.default.checkbox__label,children:u})]})}exports.default=z;
+//# sourceMappingURL=Checkbox.cjs.map

package/dist/components/checkbox/Checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useRef, useEffect, useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport type { ElementType } from 'react';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport MinusIcon from '@mattermost/compass-icons/components/minus';\nimport { toKebab } from '@/utils/string';\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxSize = 'small' | 'medium' | 'large';\n\nexport interface CheckboxProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows indeterminate (minus) state. Syncs to native input.indeterminate. */\n  indeterminate?: boolean;\n  /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */\n  size?: CheckboxSize;\n  /** When true, uses error/destructive styling (red fill when checked). */\n  invalid?: boolean;\n  /** Label content. Rendered next to the checkbox. */\n  children?: React.ReactNode;\n}\n\n/** Icon size from design system scale for each checkbox size (fits inside box). */\nconst CHECKBOX_ICON_SIZE: Record<CheckboxSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  large: '16',\n};\n\n/** Compass icon component per checked/indeterminate state. */\nconst ICON_COMPONENT: Record<'check' | 'minus', ElementType> = {\n  check: CheckIcon,\n  minus: MinusIcon,\n};\n\n/**\n * A Checkbox lets people pick any number of options from a set, or toggle a single setting\n * on or off. Each box represents one independent choice — pick none, some, or all.\n */\nexport default function Checkbox({\n  className = '',\n  indeterminate = false,\n  size = 'medium',\n  invalid = false,\n  children,\n  id: idProp,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  ...rest\n}: CheckboxProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [resolvedChecked, handleChange] = useControllable(\n    checked,\n    defaultChecked,\n    onChange,\n  );\n\n  const showingIcon = indeterminate\n    ? 'minus'\n    : resolvedChecked\n      ? 'check'\n      : null;\n\n  useEffect(() => {\n    const input = inputRef.current;\n    if (input) input.indeterminate = indeterminate;\n  }, [indeterminate]);\n\n  const sizeClass = styles[`checkbox--size-${toKebab(size)}`];\n  const invalidClass = invalid ? styles['checkbox--invalid'] : '';\n  const indeterminateClass = indeterminate\n    ? styles['checkbox--indeterminate']\n    : '';\n\n  const rootClass = [\n    styles.checkbox,\n    sizeClass,\n    invalidClass,\n    indeterminateClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconSize = CHECKBOX_ICON_SIZE[size];\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      <input\n        ref={inputRef}\n        id={id}\n        type=\"checkbox\"\n        className={styles['checkbox__input']}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-invalid={invalid ? true : undefined}\n        onChange={handleChange}\n        {...rest}\n        {...(indeterminate ? { 'aria-checked': 'mixed' as const } : {})}\n      />\n      <span className={styles['checkbox__box']}>\n        {showingIcon !== null &&\n          (() => {\n            const IconComponent = ICON_COMPONENT[showingIcon];\n            return (\n              <span key={showingIcon} className={styles['checkbox__icon']}>\n                <Icon glyph={<IconComponent />} size={iconSize} />\n              </span>\n            );\n          })()}\n      </span>\n      {children != null && (\n        <span className={styles['checkbox__label']}>{children}</span>\n      )}\n    </label>\n  );\n}\n"],"names":["CHECKBOX_ICON_SIZE","ICON_COMPONENT","CheckIcon","MinusIcon","Checkbox","className","indeterminate","size","invalid","children","idProp","checked","defaultChecked","disabled","onChange","rest","inputRef","useRef","generatedId","useId","id","resolvedChecked","handleChange","useControllable","showingIcon","useEffect","input","sizeClass","styles","toKebab","invalidClass","indeterminateClass","rootClass","iconSize","jsxs","jsx","IconComponent","Icon"],"mappings":"2aA8BMA,EAAqD,CACzD,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAGMC,EAAyD,CAC7D,MAAOC,EACP,MAAOC,CACT,EAMA,SAAwBC,EAAS,CAC/B,UAAAC,EAAY,GACZ,cAAAC,EAAgB,GAChB,KAAAC,EAAO,SACP,QAAAC,EAAU,GACV,SAAAC,EACA,GAAIC,EACJ,QAAAC,EACA,eAAAC,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAkB,CAChB,MAAMC,EAAWC,EAAAA,OAAyB,IAAI,EACxCC,EAAcC,EAAAA,MAAA,EACdC,EAAKV,GAAUQ,EACf,CAACG,EAAiBC,CAAY,EAAIC,EAAAA,gBACtCZ,EACAC,EACAE,CAAA,EAGIU,EAAclB,EAChB,QACAe,EACE,QACA,KAENI,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAQV,EAAS,QACnBU,MAAa,cAAgBpB,EACnC,EAAG,CAACA,CAAa,CAAC,EAElB,MAAMqB,EAAYC,EAAAA,QAAO,kBAAkBC,EAAAA,QAAQtB,CAAI,CAAC,EAAE,EACpDuB,EAAetB,EAAUoB,UAAO,mBAAmB,EAAI,GACvDG,EAAqBzB,EACvBsB,UAAO,yBAAyB,EAChC,GAEEI,EAAY,CAChBJ,EAAAA,QAAO,SACPD,EACAG,EACAC,EACA1B,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEL4B,EAAWjC,EAAmBO,CAAI,EAExC,OACE2B,EAAAA,KAAC,QAAA,CAAM,UAAWF,EAAW,QAASZ,EACpC,SAAA,CAAAe,EAAAA,IAAC,QAAA,CACC,IAAKnB,EACL,GAAAI,EACA,KAAK,WACL,UAAWQ,EAAAA,QAAO,gBAClB,QAAAjB,EACA,eAAAC,EACA,SAAAC,EACA,eAAcL,EAAU,GAAO,OAC/B,SAAUc,EACT,GAAGP,EACH,GAAIT,EAAgB,CAAE,eAAgB,SAAqB,CAAA,CAAC,CAAA,EAE/D6B,MAAC,QAAK,UAAWP,EAAAA,QAAO,cACrB,SAAAJ,IAAgB,OACd,IAAM,CACL,MAAMY,EAAgBnC,EAAeuB,CAAW,EAChD,OACEW,EAAAA,IAAC,OAAA,CAAuB,UAAWP,EAAAA,QAAO,eACxC,SAAAO,MAACE,EAAAA,QAAA,CAAK,YAAQD,EAAA,CAAA,CAAc,EAAI,KAAMH,CAAA,CAAU,GADvCT,CAEX,CAEJ,IAAG,CACP,EACCf,GAAY,MACX0B,EAAAA,IAAC,OAAA,CAAK,UAAWP,EAAAA,QAAO,gBAAqB,SAAAnB,CAAA,CAAS,CAAA,EAE1D,CAEJ"}

package/dist/components/checkbox/Checkbox.css

@@ -0,0 +1 @@
+@keyframes _checkbox-icon-enter_1pc8o_1{0%{transform:scale(.5)}to{transform:scale(1)}}._checkbox_1pc8o_10{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-s);font-family:var(--font-family-body);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._checkbox__input_1pc8o_21{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._checkbox__input_1pc8o_21:focus-visible{outline:none}._checkbox__box_1pc8o_41{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._checkbox__input_1pc8o_21:focus-visible~._checkbox__box_1pc8o_41{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover ._checkbox__box_1pc8o_41{border-color:rgba(var(--center-channel-color-rgb),.32)}._checkbox__input_1pc8o_21:disabled~._checkbox__box_1pc8o_41{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.16)}._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41,._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66,._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66{color:var(--button-color)}._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover ._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41,._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_1pc8o_21:focus-visible:checked~._checkbox__box_1pc8o_41,._checkbox--indeterminate_1pc8o_62 ._checkbox__input_1pc8o_21:focus-visible~._checkbox__box_1pc8o_41{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox__input_1pc8o_21:disabled:checked~._checkbox__box_1pc8o_41,._checkbox--indeterminate_1pc8o_62 ._checkbox__input_1pc8o_21:disabled~._checkbox__box_1pc8o_41{background-color:rgba(var(--center-channel-color-rgb),.32);border-color:transparent}._checkbox__input_1pc8o_21:disabled:checked~._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66,._checkbox--indeterminate_1pc8o_62 ._checkbox__input_1pc8o_21:disabled~._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66{color:var(--button-color)}._checkbox--invalid_1pc8o_84 ._checkbox__box_1pc8o_41{border-color:rgba(var(--error-text-color-rgb),.5)}._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41,._checkbox--invalid_1pc8o_84._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41{background-color:var(--error-text);border-color:var(--error-text)}._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66,._checkbox--invalid_1pc8o_84._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66{color:var(--button-color)}._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41,._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover._checkbox--invalid_1pc8o_84._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41{background-color:var(--error-text);border-color:var(--error-text)}._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:focus-visible~._checkbox__box_1pc8o_41{box-shadow:0 0 0 2px var(--error-text)}._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:focus-visible:checked~._checkbox__box_1pc8o_41,._checkbox--invalid_1pc8o_84._checkbox--indeterminate_1pc8o_62 ._checkbox__input_1pc8o_21:focus-visible~._checkbox__box_1pc8o_41{border-color:rgba(var(--button-color-rgb),.24);box-shadow:0 0 0 2px var(--error-text)}._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:not(:checked)~._checkbox__box_1pc8o_41{border-color:var(--error-text)}._checkbox__icon_1pc8o_66{display:inline-flex;align-items:center;justify-content:center;color:var(--button-color);pointer-events:none;transform-origin:center;animation:_checkbox-icon-enter_1pc8o_1 var(--duration-quick) var(--ease-entrance) forwards}._checkbox__label_1pc8o_117{line-height:1}._checkbox--size-small_1pc8o_120 ._checkbox__input_1pc8o_21{width:var(--icon-size-12);height:var(--icon-size-12)}._checkbox--size-small_1pc8o_120 ._checkbox__box_1pc8o_41{width:var(--icon-size-12);height:var(--icon-size-12);border-radius:var(--radius-xs)}._checkbox--size-small_1pc8o_120 ._checkbox__label_1pc8o_117{font-size:var(--font-size-75);line-height:var(--line-height-75)}._checkbox--size-medium_1pc8o_133 ._checkbox__input_1pc8o_21{width:var(--icon-size-16);height:var(--icon-size-16)}._checkbox--size-medium_1pc8o_133 ._checkbox__box_1pc8o_41{width:var(--icon-size-16);height:var(--icon-size-16);border-radius:var(--radius-xs)}._checkbox--size-medium_1pc8o_133 ._checkbox__label_1pc8o_117{font-size:var(--font-size-100);line-height:var(--line-height-100)}._checkbox--size-large_1pc8o_146 ._checkbox__input_1pc8o_21{width:var(--icon-size-20);height:var(--icon-size-20)}._checkbox--size-large_1pc8o_146 ._checkbox__box_1pc8o_41{width:var(--icon-size-20);height:var(--icon-size-20);border-radius:var(--radius-s)}._checkbox--size-large_1pc8o_146 ._checkbox__label_1pc8o_117{font-size:var(--font-size-200);line-height:var(--line-height-200)}

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,20 @@
+import { InputHTMLAttributes } from 'react';
+export type CheckboxSize = 'small' | 'medium' | 'large';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Optional CSS class name. */
+    className?: string;
+    /** When true, shows indeterminate (minus) state. Syncs to native input.indeterminate. */
+    indeterminate?: boolean;
+    /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */
+    size?: CheckboxSize;
+    /** When true, uses error/destructive styling (red fill when checked). */
+    invalid?: boolean;
+    /** Label content. Rendered next to the checkbox. */
+    children?: React.ReactNode;
+}
+/**
+ * A Checkbox lets people pick any number of options from a set, or toggle a single setting
+ * on or off. Each box represents one independent choice — pick none, some, or all.
+ */
+export default function Checkbox({ className, indeterminate, size, invalid, children, id: idProp, checked, defaultChecked, disabled, onChange, ...rest }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/checkbox/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAWjD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yFAAyF;IACzF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uFAAuF;IACvF,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAeD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,SAAc,EACd,aAAqB,EACrB,IAAe,EACf,OAAe,EACf,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,aAAa,2CAsEf"}

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,73 @@
+import { jsxs as v, jsx as e } from "react/jsx-runtime";
+import { useRef as E, useId as j, useEffect as y } from "react";
+import { useControllable as z } from "../../hooks/use-controllable.js";
+import B from "../icon/Icon.js";
+import __K from "@mattermost/compass-icons/components/check.js";const K=__K&&__K.default?__K.default:__K;
+import __M from "@mattermost/compass-icons/components/minus.js";const M=__M&&__M.default?__M.default:__M;
+import { toKebab as R } from "../../utils/string.js";
+import o from "./Checkbox.module.scss.js";
+const S = {
+  small: "10",
+  medium: "12",
+  large: "16"
+}, w = {
+  check: K,
+  minus: M
+};
+function A({
+  className: h = "",
+  indeterminate: c = !1,
+  size: l = "medium",
+  invalid: t = !1,
+  children: i,
+  id: p,
+  checked: a,
+  defaultChecked: r,
+  disabled: f,
+  onChange: b,
+  ...x
+}) {
+  const m = E(null), C = j(), u = p ?? C, [d, k] = z(
+    a,
+    r,
+    b
+  ), n = c ? "minus" : d ? "check" : null;
+  y(() => {
+    const s = m.current;
+    s && (s.indeterminate = c);
+  }, [c]);
+  const _ = o[`checkbox--size-${R(l)}`], I = t ? o["checkbox--invalid"] : "", N = c ? o["checkbox--indeterminate"] : "", g = [
+    o.checkbox,
+    _,
+    I,
+    N,
+    h
+  ].filter(Boolean).join(" "), O = S[l];
+  return /* @__PURE__ */ v("label", { className: g, htmlFor: u, children: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        ref: m,
+        id: u,
+        type: "checkbox",
+        className: o.checkbox__input,
+        checked: a,
+        defaultChecked: r,
+        disabled: f,
+        "aria-invalid": t ? !0 : void 0,
+        onChange: k,
+        ...x,
+        ...c ? { "aria-checked": "mixed" } : {}
+      }
+    ),
+    /* @__PURE__ */ e("span", { className: o.checkbox__box, children: n !== null && (() => {
+      const s = w[n];
+      return /* @__PURE__ */ e("span", { className: o.checkbox__icon, children: /* @__PURE__ */ e(B, { glyph: /* @__PURE__ */ e(s, {}), size: O }) }, n);
+    })() }),
+    i != null && /* @__PURE__ */ e("span", { className: o.checkbox__label, children: i })
+  ] });
+}
+export {
+  A as default
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useRef, useEffect, useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport type { ElementType } from 'react';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport MinusIcon from '@mattermost/compass-icons/components/minus';\nimport { toKebab } from '@/utils/string';\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxSize = 'small' | 'medium' | 'large';\n\nexport interface CheckboxProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows indeterminate (minus) state. Syncs to native input.indeterminate. */\n  indeterminate?: boolean;\n  /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */\n  size?: CheckboxSize;\n  /** When true, uses error/destructive styling (red fill when checked). */\n  invalid?: boolean;\n  /** Label content. Rendered next to the checkbox. */\n  children?: React.ReactNode;\n}\n\n/** Icon size from design system scale for each checkbox size (fits inside box). */\nconst CHECKBOX_ICON_SIZE: Record<CheckboxSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  large: '16',\n};\n\n/** Compass icon component per checked/indeterminate state. */\nconst ICON_COMPONENT: Record<'check' | 'minus', ElementType> = {\n  check: CheckIcon,\n  minus: MinusIcon,\n};\n\n/**\n * A Checkbox lets people pick any number of options from a set, or toggle a single setting\n * on or off. Each box represents one independent choice — pick none, some, or all.\n */\nexport default function Checkbox({\n  className = '',\n  indeterminate = false,\n  size = 'medium',\n  invalid = false,\n  children,\n  id: idProp,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  ...rest\n}: CheckboxProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [resolvedChecked, handleChange] = useControllable(\n    checked,\n    defaultChecked,\n    onChange,\n  );\n\n  const showingIcon = indeterminate\n    ? 'minus'\n    : resolvedChecked\n      ? 'check'\n      : null;\n\n  useEffect(() => {\n    const input = inputRef.current;\n    if (input) input.indeterminate = indeterminate;\n  }, [indeterminate]);\n\n  const sizeClass = styles[`checkbox--size-${toKebab(size)}`];\n  const invalidClass = invalid ? styles['checkbox--invalid'] : '';\n  const indeterminateClass = indeterminate\n    ? styles['checkbox--indeterminate']\n    : '';\n\n  const rootClass = [\n    styles.checkbox,\n    sizeClass,\n    invalidClass,\n    indeterminateClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconSize = CHECKBOX_ICON_SIZE[size];\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      <input\n        ref={inputRef}\n        id={id}\n        type=\"checkbox\"\n        className={styles['checkbox__input']}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-invalid={invalid ? true : undefined}\n        onChange={handleChange}\n        {...rest}\n        {...(indeterminate ? { 'aria-checked': 'mixed' as const } : {})}\n      />\n      <span className={styles['checkbox__box']}>\n        {showingIcon !== null &&\n          (() => {\n            const IconComponent = ICON_COMPONENT[showingIcon];\n            return (\n              <span key={showingIcon} className={styles['checkbox__icon']}>\n                <Icon glyph={<IconComponent />} size={iconSize} />\n              </span>\n            );\n          })()}\n      </span>\n      {children != null && (\n        <span className={styles['checkbox__label']}>{children}</span>\n      )}\n    </label>\n  );\n}\n"],"names":["CHECKBOX_ICON_SIZE","ICON_COMPONENT","CheckIcon","MinusIcon","Checkbox","className","indeterminate","size","invalid","children","idProp","checked","defaultChecked","disabled","onChange","rest","inputRef","useRef","generatedId","useId","id","resolvedChecked","handleChange","useControllable","showingIcon","useEffect","input","sizeClass","styles","toKebab","invalidClass","indeterminateClass","rootClass","iconSize","jsxs","jsx","IconComponent","Icon"],"mappings":";;;;;;;;AA8BA,MAAMA,IAAqD;AAAA,EACzD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAGMC,IAAyD;AAAA,EAC7D,OAAOC;AAAA,EACP,OAAOC;AACT;AAMA,SAAwBC,EAAS;AAAA,EAC/B,WAAAC,IAAY;AAAA,EACZ,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAWC,EAAyB,IAAI,GACxCC,IAAcC,EAAA,GACdC,IAAKV,KAAUQ,GACf,CAACG,GAAiBC,CAAY,IAAIC;AAAA,IACtCZ;AAAA,IACAC;AAAA,IACAE;AAAA,EAAA,GAGIU,IAAclB,IAChB,UACAe,IACE,UACA;AAEN,EAAAI,EAAU,MAAM;AACd,UAAMC,IAAQV,EAAS;AACvB,IAAIU,QAAa,gBAAgBpB;AAAA,EACnC,GAAG,CAACA,CAAa,CAAC;AAElB,QAAMqB,IAAYC,EAAO,kBAAkBC,EAAQtB,CAAI,CAAC,EAAE,GACpDuB,IAAetB,IAAUoB,EAAO,mBAAmB,IAAI,IACvDG,IAAqBzB,IACvBsB,EAAO,yBAAyB,IAChC,IAEEI,IAAY;AAAA,IAChBJ,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACA1B;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAEL4B,IAAWjC,EAAmBO,CAAI;AAExC,SACE,gBAAA2B,EAAC,SAAA,EAAM,WAAWF,GAAW,SAASZ,GACpC,UAAA;AAAA,IAAA,gBAAAe;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKnB;AAAA,QACL,IAAAI;AAAA,QACA,MAAK;AAAA,QACL,WAAWQ,EAAO;AAAA,QAClB,SAAAjB;AAAA,QACA,gBAAAC;AAAA,QACA,UAAAC;AAAA,QACA,gBAAcL,IAAU,KAAO;AAAA,QAC/B,UAAUc;AAAA,QACT,GAAGP;AAAA,QACH,GAAIT,IAAgB,EAAE,gBAAgB,YAAqB,CAAA;AAAA,MAAC;AAAA,IAAA;AAAA,IAE/D,gBAAA6B,EAAC,UAAK,WAAWP,EAAO,eACrB,UAAAJ,MAAgB,SACd,MAAM;AACL,YAAMY,IAAgBnC,EAAeuB,CAAW;AAChD,aACE,gBAAAW,EAAC,QAAA,EAAuB,WAAWP,EAAO,gBACxC,UAAA,gBAAAO,EAACE,GAAA,EAAK,yBAAQD,GAAA,CAAA,CAAc,GAAI,MAAMH,EAAA,CAAU,KADvCT,CAEX;AAAA,IAEJ,KAAG,CACP;AAAA,IACCf,KAAY,QACX,gBAAA0B,EAAC,QAAA,EAAK,WAAWP,EAAO,iBAAqB,UAAAnB,EAAA,CAAS;AAAA,EAAA,GAE1D;AAEJ;"}

package/dist/components/checkbox/Checkbox.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Checkbox.css');const c="_checkbox_1pc8o_10",e="_checkbox__input_1pc8o_21",_="_checkbox__box_1pc8o_41",o="_checkbox__icon_1pc8o_66",b="_checkbox__label_1pc8o_117",x={checkbox:c,checkbox__input:e,checkbox__box:_,"checkbox--indeterminate":"_checkbox--indeterminate_1pc8o_62",checkbox__icon:o,"checkbox--invalid":"_checkbox--invalid_1pc8o_84","checkbox-icon-enter":"_checkbox-icon-enter_1pc8o_1",checkbox__label:b,"checkbox--size-small":"_checkbox--size-small_1pc8o_120","checkbox--size-medium":"_checkbox--size-medium_1pc8o_133","checkbox--size-large":"_checkbox--size-large_1pc8o_146"};exports.checkbox=c;exports.checkbox__box=_;exports.checkbox__icon=o;exports.checkbox__input=e;exports.checkbox__label=b;exports.default=x;
+//# sourceMappingURL=Checkbox.module.scss.cjs.map

package/dist/components/checkbox/Checkbox.module.scss.cjs.map

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

package/dist/components/checkbox/Checkbox.module.scss.js

@@ -0,0 +1,22 @@
+import './Checkbox.css';const c = "_checkbox_1pc8o_10", _ = "_checkbox__input_1pc8o_21", e = "_checkbox__box_1pc8o_41", o = "_checkbox__icon_1pc8o_66", b = "_checkbox__label_1pc8o_117", x = {
+  checkbox: c,
+  checkbox__input: _,
+  checkbox__box: e,
+  "checkbox--indeterminate": "_checkbox--indeterminate_1pc8o_62",
+  checkbox__icon: o,
+  "checkbox--invalid": "_checkbox--invalid_1pc8o_84",
+  "checkbox-icon-enter": "_checkbox-icon-enter_1pc8o_1",
+  checkbox__label: b,
+  "checkbox--size-small": "_checkbox--size-small_1pc8o_120",
+  "checkbox--size-medium": "_checkbox--size-medium_1pc8o_133",
+  "checkbox--size-large": "_checkbox--size-large_1pc8o_146"
+};
+export {
+  c as checkbox,
+  e as checkbox__box,
+  o as checkbox__icon,
+  _ as checkbox__input,
+  b as checkbox__label,
+  x as default
+};
+//# sourceMappingURL=Checkbox.module.scss.js.map

package/dist/components/checkbox/Checkbox.module.scss.js.map

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

package/dist/components/checkbox/index.cjs

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

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

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

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

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

package/dist/components/checkbox/index.js

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

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

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

package/dist/components/chip/Chip.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),q=require("react"),__M=require("@mattermost/compass-icons/components/close-circle.js"),M=__M?.default??__M,A=require("../icon/Icon.cjs"),I=require("../user-avatar/UserAvatar.cjs"),D=require("../../utils/string.cjs"),y=require("./ChipGroup.cjs"),a=require("./Chip.module.scss.cjs"),k={small:"10",medium:"12",large:"16"},w={small:"12",medium:"16",large:"20"};function T(t){return typeof t=="string"||typeof t=="number"?String(t).trim():Array.isArray(t)?t.map(T).filter(Boolean).join(" "):""}function L(t){var r;const s=(b,h)=>{let n=b;for(;n;){if(n instanceof HTMLElement&&n.dataset.chip!=null||n instanceof HTMLInputElement||n instanceof HTMLTextAreaElement)return n;n=h==="next"?n.nextElementSibling:n.previousElementSibling}return null},l=t.parentElement,c=l==null?void 0:l.nextElementSibling,f=c instanceof HTMLInputElement||c instanceof HTMLTextAreaElement?c:null;return s(t.nextElementSibling,"next")??s(t.previousElementSibling,"previous")??f??(l==null?void 0:l.querySelector("input, textarea"))??((r=l==null?void 0:l.parentElement)==null?void 0:r.querySelector("input, textarea"))??null}function N({children:t,size:s="medium",compact:l=!1,leadingIcon:c,leadingAvatar:f,onRemove:r,error:b=!1,colored:h=!1,className:n="",...i}){const x=q.useContext(y.ChipGroupContext),g=k[s],S=w[s],p=T(t),_=i["aria-label"]??(r!=null&&p!==""?`${p}. Press Delete to remove.`:p!==""?p:void 0),m=r!=null,C=e=>{const d=e.currentTarget.closest("[data-chip]"),u=d instanceof HTMLElement?L(d):null,j=e.currentTarget;r==null||r(e),window.setTimeout(()=>{j.isConnected||u==null||u.isConnected&&(u.dataset.chip!=null?y.activateChip(u):u.focus({focusVisible:!0}))},0)},E=[a.default.chip,a.default[`chip--size-${D.toKebab(s)}`],l&&a.default["chip--compact"],b&&a.default["chip--error"],h&&a.default["chip--colored"],n].filter(Boolean).join(" "),v=e=>{var d,u;(d=i.onKeyDown)==null||d.call(i,e),!(x||!m||e.defaultPrevented)&&(e.key==="Delete"||e.key==="Backspace"||e.key==="Enter"||e.key===" ")&&(e.preventDefault(),(u=e.currentTarget.querySelector("[data-chip-remove]"))==null||u.click())};return o.jsxs("div",{className:E,...i,role:m?"button":i.role,tabIndex:m?x?-1:0:i.tabIndex,"aria-label":m?_:i["aria-label"],"data-chip":"",onKeyDown:v,children:[f!=null?o.jsx("span",{className:a.default["chip__avatar-slot"],children:o.jsx(I.default,{src:f.src,alt:f.alt,size:S})}):c!=null?o.jsx("span",{className:a.default["chip__icon-slot"],"aria-hidden":!0,children:o.jsx(A.default,{glyph:c,size:g})}):null,o.jsx("span",{className:a.default.chip__label,children:t}),r!=null?o.jsx("button",{type:"button",className:a.default.chip__remove,"data-chip-remove":"",tabIndex:-1,"aria-hidden":!0,onMouseDown:e=>{e.preventDefault()},onClick:C,children:o.jsx(M,{size:Number(g),"aria-hidden":!0})}):null]})}exports.default=N;
+//# sourceMappingURL=Chip.cjs.map

package/dist/components/chip/Chip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.cjs","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import { useContext, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport type { UserAvatarSize } from '@/components/user-avatar/UserAvatar';\nimport { toKebab } from '@/utils/string';\nimport { activateChip, ChipGroupContext } from './ChipGroup';\nimport styles from './Chip.module.scss';\n\nexport type ChipSize = 'small' | 'medium' | 'large';\n\nexport interface ChipProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** Chip label. */\n  children: ReactNode;\n  /** Visual size. Default: Medium. */\n  size?: ChipSize;\n  /** Reduces vertical and horizontal padding. */\n  compact?: boolean;\n  /** Leading icon from @mattermost/compass-icons. */\n  leadingIcon?: ReactNode;\n  /** Leading avatar. Overrides leading-icon when both are provided. */\n  leadingAvatar?: { src: string; alt: string };\n  /** When provided, shows the remove (×) control and calls this on click. */\n  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n  /** Shows an error border. */\n  error?: boolean;\n  /** Adds a colored background overlay. */\n  colored?: boolean;\n  className?: string;\n}\n\nconst ICON_SIZE_MAP: Record<ChipSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  large: '16',\n};\n\nconst AVATAR_SIZE_MAP: Record<ChipSize, UserAvatarSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nfunction labelTextFromChildren(children: ReactNode): string {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return String(children).trim();\n  }\n  if (Array.isArray(children)) {\n    return children.map(labelTextFromChildren).filter(Boolean).join(' ');\n  }\n  return '';\n}\n\nfunction focusTargetAfterRemove(chipEl: HTMLElement): HTMLElement | null {\n  const scan = (\n    start: Element | null,\n    direction: 'next' | 'previous',\n  ): HTMLElement | null => {\n    let el: Element | null = start;\n    while (el) {\n      if (el instanceof HTMLElement && el.dataset.chip != null) {\n        return el;\n      }\n      if (\n        el instanceof HTMLInputElement ||\n        el instanceof HTMLTextAreaElement\n      ) {\n        return el;\n      }\n      el =\n        direction === 'next' ? el.nextElementSibling : el.previousElementSibling;\n    }\n    return null;\n  };\n\n  const parent = chipEl.parentElement;\n  const afterGroup = parent?.nextElementSibling;\n  const groupSiblingInput =\n    afterGroup instanceof HTMLInputElement ||\n    afterGroup instanceof HTMLTextAreaElement\n      ? afterGroup\n      : null;\n\n  return (\n    scan(chipEl.nextElementSibling, 'next') ??\n    scan(chipEl.previousElementSibling, 'previous') ??\n    groupSiblingInput ??\n    parent?.querySelector('input, textarea') ??\n    parent?.parentElement?.querySelector('input, textarea') ??\n    null\n  );\n}\n\n/**\n * Chips are compact, self-contained tokens that represent a selection — a person added to an\n * invite, a filter applied to a search, a chosen value in a tokenizing input. Each Chip\n * stands on its own and is removable or selectable, depending on context.\n */\nexport default function Chip({\n  children,\n  size = 'medium',\n  compact = false,\n  leadingIcon,\n  leadingAvatar,\n  onRemove,\n  error = false,\n  colored = false,\n  className = '',\n  ...rest\n}: ChipProps) {\n  const grouped = useContext(ChipGroupContext);\n  const iconSize = ICON_SIZE_MAP[size];\n  const avatarSize = AVATAR_SIZE_MAP[size];\n  const labelText = labelTextFromChildren(children);\n  const groupedAriaLabel =\n    rest['aria-label'] ??\n    (onRemove != null && labelText !== ''\n      ? `${labelText}. Press Delete to remove.`\n      : labelText !== ''\n        ? labelText\n        : undefined);\n  const removable = onRemove != null;\n\n  const handleRemove = (e: MouseEvent<HTMLButtonElement>) => {\n    const chipEl = e.currentTarget.closest('[data-chip]');\n    const nextFocus =\n      chipEl instanceof HTMLElement ? focusTargetAfterRemove(chipEl) : null;\n    const removeButton = e.currentTarget;\n    onRemove?.(e);\n    window.setTimeout(() => {\n      if (removeButton.isConnected || nextFocus == null) return;\n      if (!nextFocus.isConnected) return;\n      if (nextFocus.dataset.chip != null) {\n        activateChip(nextFocus);\n      } else {\n        nextFocus.focus({ focusVisible: true } as FocusOptions);\n      }\n    }, 0);\n  };\n\n  const rootClass = [\n    styles.chip,\n    styles[`chip--size-${toKebab(size)}`],\n    compact && styles['chip--compact'],\n    error && styles['chip--error'],\n    colored && styles['chip--colored'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    rest.onKeyDown?.(e);\n    if (grouped || !removable || e.defaultPrevented) return;\n    if (\n      e.key === 'Delete' ||\n      e.key === 'Backspace' ||\n      e.key === 'Enter' ||\n      e.key === ' '\n    ) {\n      e.preventDefault();\n      e.currentTarget\n        .querySelector<HTMLButtonElement>('[data-chip-remove]')\n        ?.click();\n    }\n  };\n\n  return (\n    <div\n      className={rootClass}\n      {...rest}\n      role={removable ? 'button' : rest.role}\n      tabIndex={removable ? (grouped ? -1 : 0) : rest.tabIndex}\n      aria-label={removable ? groupedAriaLabel : rest['aria-label']}\n      data-chip=\"\"\n      onKeyDown={handleKeyDown}\n    >\n      {leadingAvatar != null ? (\n        <span className={styles['chip__avatar-slot']}>\n          <UserAvatar\n            src={leadingAvatar.src}\n            alt={leadingAvatar.alt}\n            size={avatarSize}\n          />\n        </span>\n      ) : leadingIcon != null ? (\n        <span className={styles['chip__icon-slot']} aria-hidden>\n          <Icon glyph={leadingIcon} size={iconSize} />\n        </span>\n      ) : null}\n      <span className={styles['chip__label']}>{children}</span>\n      {onRemove != null ? (\n        <button\n          type=\"button\"\n          className={styles['chip__remove']}\n          data-chip-remove=\"\"\n          tabIndex={-1}\n          aria-hidden\n          onMouseDown={(e) => {\n            e.preventDefault();\n          }}\n          onClick={handleRemove}\n        >\n          <CloseCircleIcon size={Number(iconSize)} aria-hidden />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["ICON_SIZE_MAP","AVATAR_SIZE_MAP","labelTextFromChildren","children","focusTargetAfterRemove","chipEl","scan","start","direction","el","parent","afterGroup","groupSiblingInput","_a","Chip","size","compact","leadingIcon","leadingAvatar","onRemove","error","colored","className","rest","grouped","useContext","ChipGroupContext","iconSize","avatarSize","labelText","groupedAriaLabel","removable","handleRemove","nextFocus","removeButton","activateChip","rootClass","styles","toKebab","handleKeyDown","_b","jsxs","jsx","UserAvatar","Icon","CloseCircleIcon"],"mappings":"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"}

package/dist/components/chip/Chip.css

@@ -0,0 +1 @@
+._chip_u1uu3_2{position:relative;display:inline-flex;align-items:center;border-radius:var(--radius-s);border:1px solid transparent;background-color:rgba(var(--center-channel-color-rgb),.08);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);color:var(--center-channel-color);white-space:nowrap;overflow:visible;cursor:default;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),border-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition)}._chip_u1uu3_2:hover{background-color:rgba(var(--center-channel-color-rgb),.16)}._chip_u1uu3_2:focus-visible{outline-color:var(--focus-ring-color)}._chip_u1uu3_2:focus-within:not(:focus-visible){border-color:var(--button-bg);background-color:rgba(var(--center-channel-color-rgb),.08)}._chip__label_u1uu3_29{position:relative;overflow:hidden;text-overflow:ellipsis;min-width:0}._chip__icon-slot_u1uu3_35,._chip__avatar-slot_u1uu3_41{display:inline-flex;align-items:center;flex-shrink:0;position:relative}._chip__remove_u1uu3_47{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:0;padding:0;border-radius:var(--radius-full);cursor:pointer;color:rgba(var(--center-channel-color-rgb),.32);line-height:0}._chip__remove_u1uu3_47:hover{color:rgba(var(--center-channel-color-rgb),.64)}._chip--colored_u1uu3_63:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background-color:#d95d1c29;pointer-events:none}._chip--error_u1uu3_71{border-color:var(--error-text, var(--color-danger))}._chip--size-small_u1uu3_74{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-small_u1uu3_74:has(._chip__remove_u1uu3_47){padding-right:var(--spacing-xxs)}._chip--size-small_u1uu3_74 ._chip__label_u1uu3_29{font-size:var(--font-size-25);line-height:12px;letter-spacing:.2px}._chip--size-small_u1uu3_74 ._chip__remove_u1uu3_47{padding:1px}._chip--size-medium_u1uu3_89{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-medium_u1uu3_89:has(._chip__remove_u1uu3_47){padding-right:var(--spacing-xxs)}._chip--size-medium_u1uu3_89 ._chip__label_u1uu3_29{font-size:var(--font-size-75);line-height:var(--line-height-75)}._chip--size-medium_u1uu3_89 ._chip__remove_u1uu3_47{padding:2px}._chip--size-large_u1uu3_103{gap:var(--spacing-xxs);padding:var(--spacing-xxs) var(--spacing-m)}._chip--size-large_u1uu3_103:has(._chip__remove_u1uu3_47){padding-right:var(--spacing-s)}._chip--size-large_u1uu3_103 ._chip__label_u1uu3_29{font-size:var(--font-size-100);line-height:var(--line-height-100)}._chip--size-large_u1uu3_103 ._chip__remove_u1uu3_47{padding:2px}._chip--compact_u1uu3_117{padding:var(--spacing-xxxxs) var(--spacing-xxs)}._chip--compact_u1uu3_117:has(._chip__remove_u1uu3_47){padding-right:var(--spacing-xxxs)}._chip--size-large_u1uu3_103._chip--compact_u1uu3_117{padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-large_u1uu3_103._chip--compact_u1uu3_117:has(._chip__remove_u1uu3_47){padding-right:var(--spacing-xxs)}

package/dist/components/chip/Chip.d.ts

@@ -0,0 +1,31 @@
+import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+export type ChipSize = 'small' | 'medium' | 'large';
+export interface ChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Chip label. */
+    children: ReactNode;
+    /** Visual size. Default: Medium. */
+    size?: ChipSize;
+    /** Reduces vertical and horizontal padding. */
+    compact?: boolean;
+    /** Leading icon from @mattermost/compass-icons. */
+    leadingIcon?: ReactNode;
+    /** Leading avatar. Overrides leading-icon when both are provided. */
+    leadingAvatar?: {
+        src: string;
+        alt: string;
+    };
+    /** When provided, shows the remove (×) control and calls this on click. */
+    onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /** Shows an error border. */
+    error?: boolean;
+    /** Adds a colored background overlay. */
+    colored?: boolean;
+    className?: string;
+}
+/**
+ * Chips are compact, self-contained tokens that represent a selection — a person added to an
+ * invite, a filter applied to a search, a chosen value in a tokenizing input. Each Chip
+ * stands on its own and is removable or selectable, depending on context.
+ */
+export default function Chip({ children, size, compact, leadingIcon, leadingAvatar, onRemove, error, colored, className, ...rest }: ChipProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Chip.d.ts.map

package/dist/components/chip/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAsB,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAU7G,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,kBAAkB;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,qEAAqE;IACrE,aAAa,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtD,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,QAAQ,EACR,IAAe,EACf,OAAe,EACf,WAAW,EACX,aAAa,EACb,QAAQ,EACR,KAAa,EACb,OAAe,EACf,SAAc,EACd,GAAG,IAAI,EACR,EAAE,SAAS,2CAmGX"}

package/dist/components/chip/Chip.js

@@ -0,0 +1,104 @@
+import { jsxs as A, jsx as c } from "react/jsx-runtime";
+import { useContext as I } from "react";
+import __M from "@mattermost/compass-icons/components/close-circle.js";const M=__M&&__M.default?__M.default:__M;
+import D from "../icon/Icon.js";
+import k from "../user-avatar/UserAvatar.js";
+import { toKebab as w } from "../../utils/string.js";
+import { ChipGroupContext as L, activateChip as N } from "./ChipGroup.js";
+import o from "./Chip.module.scss.js";
+const H = {
+  small: "10",
+  medium: "12",
+  large: "16"
+}, j = {
+  small: "12",
+  medium: "16",
+  large: "20"
+};
+function T(t) {
+  return typeof t == "string" || typeof t == "number" ? String(t).trim() : Array.isArray(t) ? t.map(T).filter(Boolean).join(" ") : "";
+}
+function z(t) {
+  var r;
+  const s = (b, h) => {
+    let n = b;
+    for (; n; ) {
+      if (n instanceof HTMLElement && n.dataset.chip != null || n instanceof HTMLInputElement || n instanceof HTMLTextAreaElement)
+        return n;
+      n = h === "next" ? n.nextElementSibling : n.previousElementSibling;
+    }
+    return null;
+  }, l = t.parentElement, u = l == null ? void 0 : l.nextElementSibling, m = u instanceof HTMLInputElement || u instanceof HTMLTextAreaElement ? u : null;
+  return s(t.nextElementSibling, "next") ?? s(t.previousElementSibling, "previous") ?? m ?? (l == null ? void 0 : l.querySelector("input, textarea")) ?? ((r = l == null ? void 0 : l.parentElement) == null ? void 0 : r.querySelector("input, textarea")) ?? null;
+}
+function $({
+  children: t,
+  size: s = "medium",
+  compact: l = !1,
+  leadingIcon: u,
+  leadingAvatar: m,
+  onRemove: r,
+  error: b = !1,
+  colored: h = !1,
+  className: n = "",
+  ...i
+}) {
+  const x = I(L), y = H[s], g = j[s], f = T(t), E = i["aria-label"] ?? (r != null && f !== "" ? `${f}. Press Delete to remove.` : f !== "" ? f : void 0), d = r != null, S = (e) => {
+    const p = e.currentTarget.closest("[data-chip]"), a = p instanceof HTMLElement ? z(p) : null, v = e.currentTarget;
+    r == null || r(e), window.setTimeout(() => {
+      v.isConnected || a == null || a.isConnected && (a.dataset.chip != null ? N(a) : a.focus({ focusVisible: !0 }));
+    }, 0);
+  }, C = [
+    o.chip,
+    o[`chip--size-${w(s)}`],
+    l && o["chip--compact"],
+    b && o["chip--error"],
+    h && o["chip--colored"],
+    n
+  ].filter(Boolean).join(" "), _ = (e) => {
+    var p, a;
+    (p = i.onKeyDown) == null || p.call(i, e), !(x || !d || e.defaultPrevented) && (e.key === "Delete" || e.key === "Backspace" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), (a = e.currentTarget.querySelector("[data-chip-remove]")) == null || a.click());
+  };
+  return /* @__PURE__ */ A(
+    "div",
+    {
+      className: C,
+      ...i,
+      role: d ? "button" : i.role,
+      tabIndex: d ? x ? -1 : 0 : i.tabIndex,
+      "aria-label": d ? E : i["aria-label"],
+      "data-chip": "",
+      onKeyDown: _,
+      children: [
+        m != null ? /* @__PURE__ */ c("span", { className: o["chip__avatar-slot"], children: /* @__PURE__ */ c(
+          k,
+          {
+            src: m.src,
+            alt: m.alt,
+            size: g
+          }
+        ) }) : u != null ? /* @__PURE__ */ c("span", { className: o["chip__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ c(D, { glyph: u, size: y }) }) : null,
+        /* @__PURE__ */ c("span", { className: o.chip__label, children: t }),
+        r != null ? /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            className: o.chip__remove,
+            "data-chip-remove": "",
+            tabIndex: -1,
+            "aria-hidden": !0,
+            onMouseDown: (e) => {
+              e.preventDefault();
+            },
+            onClick: S,
+            children: /* @__PURE__ */ c(M, { size: Number(y), "aria-hidden": !0 })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  $ as default
+};
+//# sourceMappingURL=Chip.js.map

package/dist/components/chip/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import { useContext, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport type { UserAvatarSize } from '@/components/user-avatar/UserAvatar';\nimport { toKebab } from '@/utils/string';\nimport { activateChip, ChipGroupContext } from './ChipGroup';\nimport styles from './Chip.module.scss';\n\nexport type ChipSize = 'small' | 'medium' | 'large';\n\nexport interface ChipProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** Chip label. */\n  children: ReactNode;\n  /** Visual size. Default: Medium. */\n  size?: ChipSize;\n  /** Reduces vertical and horizontal padding. */\n  compact?: boolean;\n  /** Leading icon from @mattermost/compass-icons. */\n  leadingIcon?: ReactNode;\n  /** Leading avatar. Overrides leading-icon when both are provided. */\n  leadingAvatar?: { src: string; alt: string };\n  /** When provided, shows the remove (×) control and calls this on click. */\n  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n  /** Shows an error border. */\n  error?: boolean;\n  /** Adds a colored background overlay. */\n  colored?: boolean;\n  className?: string;\n}\n\nconst ICON_SIZE_MAP: Record<ChipSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  large: '16',\n};\n\nconst AVATAR_SIZE_MAP: Record<ChipSize, UserAvatarSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nfunction labelTextFromChildren(children: ReactNode): string {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return String(children).trim();\n  }\n  if (Array.isArray(children)) {\n    return children.map(labelTextFromChildren).filter(Boolean).join(' ');\n  }\n  return '';\n}\n\nfunction focusTargetAfterRemove(chipEl: HTMLElement): HTMLElement | null {\n  const scan = (\n    start: Element | null,\n    direction: 'next' | 'previous',\n  ): HTMLElement | null => {\n    let el: Element | null = start;\n    while (el) {\n      if (el instanceof HTMLElement && el.dataset.chip != null) {\n        return el;\n      }\n      if (\n        el instanceof HTMLInputElement ||\n        el instanceof HTMLTextAreaElement\n      ) {\n        return el;\n      }\n      el =\n        direction === 'next' ? el.nextElementSibling : el.previousElementSibling;\n    }\n    return null;\n  };\n\n  const parent = chipEl.parentElement;\n  const afterGroup = parent?.nextElementSibling;\n  const groupSiblingInput =\n    afterGroup instanceof HTMLInputElement ||\n    afterGroup instanceof HTMLTextAreaElement\n      ? afterGroup\n      : null;\n\n  return (\n    scan(chipEl.nextElementSibling, 'next') ??\n    scan(chipEl.previousElementSibling, 'previous') ??\n    groupSiblingInput ??\n    parent?.querySelector('input, textarea') ??\n    parent?.parentElement?.querySelector('input, textarea') ??\n    null\n  );\n}\n\n/**\n * Chips are compact, self-contained tokens that represent a selection — a person added to an\n * invite, a filter applied to a search, a chosen value in a tokenizing input. Each Chip\n * stands on its own and is removable or selectable, depending on context.\n */\nexport default function Chip({\n  children,\n  size = 'medium',\n  compact = false,\n  leadingIcon,\n  leadingAvatar,\n  onRemove,\n  error = false,\n  colored = false,\n  className = '',\n  ...rest\n}: ChipProps) {\n  const grouped = useContext(ChipGroupContext);\n  const iconSize = ICON_SIZE_MAP[size];\n  const avatarSize = AVATAR_SIZE_MAP[size];\n  const labelText = labelTextFromChildren(children);\n  const groupedAriaLabel =\n    rest['aria-label'] ??\n    (onRemove != null && labelText !== ''\n      ? `${labelText}. Press Delete to remove.`\n      : labelText !== ''\n        ? labelText\n        : undefined);\n  const removable = onRemove != null;\n\n  const handleRemove = (e: MouseEvent<HTMLButtonElement>) => {\n    const chipEl = e.currentTarget.closest('[data-chip]');\n    const nextFocus =\n      chipEl instanceof HTMLElement ? focusTargetAfterRemove(chipEl) : null;\n    const removeButton = e.currentTarget;\n    onRemove?.(e);\n    window.setTimeout(() => {\n      if (removeButton.isConnected || nextFocus == null) return;\n      if (!nextFocus.isConnected) return;\n      if (nextFocus.dataset.chip != null) {\n        activateChip(nextFocus);\n      } else {\n        nextFocus.focus({ focusVisible: true } as FocusOptions);\n      }\n    }, 0);\n  };\n\n  const rootClass = [\n    styles.chip,\n    styles[`chip--size-${toKebab(size)}`],\n    compact && styles['chip--compact'],\n    error && styles['chip--error'],\n    colored && styles['chip--colored'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    rest.onKeyDown?.(e);\n    if (grouped || !removable || e.defaultPrevented) return;\n    if (\n      e.key === 'Delete' ||\n      e.key === 'Backspace' ||\n      e.key === 'Enter' ||\n      e.key === ' '\n    ) {\n      e.preventDefault();\n      e.currentTarget\n        .querySelector<HTMLButtonElement>('[data-chip-remove]')\n        ?.click();\n    }\n  };\n\n  return (\n    <div\n      className={rootClass}\n      {...rest}\n      role={removable ? 'button' : rest.role}\n      tabIndex={removable ? (grouped ? -1 : 0) : rest.tabIndex}\n      aria-label={removable ? groupedAriaLabel : rest['aria-label']}\n      data-chip=\"\"\n      onKeyDown={handleKeyDown}\n    >\n      {leadingAvatar != null ? (\n        <span className={styles['chip__avatar-slot']}>\n          <UserAvatar\n            src={leadingAvatar.src}\n            alt={leadingAvatar.alt}\n            size={avatarSize}\n          />\n        </span>\n      ) : leadingIcon != null ? (\n        <span className={styles['chip__icon-slot']} aria-hidden>\n          <Icon glyph={leadingIcon} size={iconSize} />\n        </span>\n      ) : null}\n      <span className={styles['chip__label']}>{children}</span>\n      {onRemove != null ? (\n        <button\n          type=\"button\"\n          className={styles['chip__remove']}\n          data-chip-remove=\"\"\n          tabIndex={-1}\n          aria-hidden\n          onMouseDown={(e) => {\n            e.preventDefault();\n          }}\n          onClick={handleRemove}\n        >\n          <CloseCircleIcon size={Number(iconSize)} aria-hidden />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["ICON_SIZE_MAP","AVATAR_SIZE_MAP","labelTextFromChildren","children","focusTargetAfterRemove","chipEl","scan","start","direction","el","parent","afterGroup","groupSiblingInput","_a","Chip","size","compact","leadingIcon","leadingAvatar","onRemove","error","colored","className","rest","grouped","useContext","ChipGroupContext","iconSize","avatarSize","labelText","groupedAriaLabel","removable","handleRemove","nextFocus","removeButton","activateChip","rootClass","styles","toKebab","handleKeyDown","_b","jsxs","jsx","UserAvatar","Icon","CloseCircleIcon"],"mappings":"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"}

package/dist/components/chip/Chip.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Chip.css');const _="_chip_u1uu3_2",c="_chip__label_u1uu3_29",i="_chip__remove_u1uu3_47",u={chip:_,chip__label:c,"chip__icon-slot":"_chip__icon-slot_u1uu3_35","chip__avatar-slot":"_chip__avatar-slot_u1uu3_41",chip__remove:i,"chip--colored":"_chip--colored_u1uu3_63","chip--error":"_chip--error_u1uu3_71","chip--size-small":"_chip--size-small_u1uu3_74","chip--size-medium":"_chip--size-medium_u1uu3_89","chip--size-large":"_chip--size-large_u1uu3_103","chip--compact":"_chip--compact_u1uu3_117"};exports.chip=_;exports.chip__label=c;exports.chip__remove=i;exports.default=u;
+//# sourceMappingURL=Chip.module.scss.cjs.map

package/dist/components/chip/Chip.module.scss.cjs.map

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

package/dist/components/chip/Chip.module.scss.js

@@ -0,0 +1,20 @@
+import './Chip.css';const _ = "_chip_u1uu3_2", c = "_chip__label_u1uu3_29", u = "_chip__remove_u1uu3_47", i = {
+  chip: _,
+  chip__label: c,
+  "chip__icon-slot": "_chip__icon-slot_u1uu3_35",
+  "chip__avatar-slot": "_chip__avatar-slot_u1uu3_41",
+  chip__remove: u,
+  "chip--colored": "_chip--colored_u1uu3_63",
+  "chip--error": "_chip--error_u1uu3_71",
+  "chip--size-small": "_chip--size-small_u1uu3_74",
+  "chip--size-medium": "_chip--size-medium_u1uu3_89",
+  "chip--size-large": "_chip--size-large_u1uu3_103",
+  "chip--compact": "_chip--compact_u1uu3_117"
+};
+export {
+  _ as chip,
+  c as chip__label,
+  u as chip__remove,
+  i as default
+};
+//# sourceMappingURL=Chip.module.scss.js.map

package/dist/components/chip/Chip.module.scss.js.map

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

package/dist/components/chip/ChipGroup.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react/jsx-runtime"),b=require("react"),M=require("./ChipGroup.module.scss.cjs"),v=b.createContext(!1);function l(o){return[...o.querySelectorAll("[data-chip]")]}function E(o){const s=o.closest('[role="toolbar"]');s&&l(s).forEach(a=>{a.tabIndex=a===o?0:-1}),o.focus({focusVisible:!0})}function j({children:o,className:s="",disabled:a=!1,onKeyDown:f,onFocus:d,...g}){const h=b.useRef(null);b.useLayoutEffect(()=>{const r=h.current;if(r==null)return;const t=l(r);if(t.length===0)return;if(a){t.forEach(e=>{e.tabIndex=-1});return}const n=t.find(e=>e===document.activeElement);if(n!=null){t.forEach(e=>{e.tabIndex=e===n?0:-1});return}t.some(e=>e.tabIndex===0)||(t[0].tabIndex=0,t.slice(1).forEach(e=>{e.tabIndex=-1}))},[o,a]);const C=r=>{if(d==null||d(r),a)return;const t=r.target;if(!(t instanceof HTMLElement))return;const n=t.closest("[data-chip]"),e=r.currentTarget;n==null||!e.contains(n)||l(e).forEach(c=>{c.tabIndex=c===n?0:-1})},I=r=>{if(f==null||f(r),r.defaultPrevented||a)return;const t=h.current;if(t==null)return;const n=l(t);if(n.length===0)return;const e=document.activeElement;if(!(e instanceof HTMLElement)||!t.contains(e))return;const c=e.closest("[data-chip]"),p=n.findIndex(i=>i===c);if(p<0)return;const u=i=>{const x=n[Math.max(0,Math.min(n.length-1,i))];x!=null&&(r.preventDefault(),E(x))};switch(r.key){case"ArrowRight":case"ArrowDown":u(p+1);break;case"ArrowLeft":case"ArrowUp":u(p-1);break;case"Home":u(0);break;case"End":u(n.length-1);break;case"Delete":case"Backspace":case"Enter":case" ":{const i=c==null?void 0:c.querySelector("[data-chip-remove]");i!=null&&!i.disabled&&(r.preventDefault(),i.click());break}}},k=[M.default["chip-group"],s].filter(Boolean).join(" ");return m.jsx(v.Provider,{value:!0,children:m.jsx("div",{...g,ref:h,className:k,role:"toolbar","aria-orientation":"horizontal","aria-disabled":a||void 0,onKeyDown:I,onFocus:C,children:o})})}exports.ChipGroupContext=v;exports.activateChip=E;exports.default=j;
+//# sourceMappingURL=ChipGroup.cjs.map

package/dist/components/chip/ChipGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.cjs","sources":["../../../src/components/chip/ChipGroup.tsx"],"sourcesContent":["import {\n  createContext,\n  useLayoutEffect,\n  useRef,\n  type FocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './ChipGroup.module.scss';\n\nexport const ChipGroupContext = createContext(false);\n\nexport interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /** When true, chips are not a tab stop. */\n  disabled?: boolean;\n}\n\nfunction chipsIn(toolbar: ParentNode): HTMLElement[] {\n  return [...toolbar.querySelectorAll<HTMLElement>('[data-chip]')];\n}\n\n/** Roving tabindex + focus for a chip inside a ChipGroup. */\nexport function activateChip(el: HTMLElement) {\n  const toolbar = el.closest('[role=\"toolbar\"]');\n  if (toolbar) {\n    chipsIn(toolbar).forEach((chip) => {\n      chip.tabIndex = chip === el ? 0 : -1;\n    });\n  }\n  el.focus({ focusVisible: true } as FocusOptions);\n}\n\n/**\n * Toolbar for a set of Chips. Tab lands on the active chip; Left/Right move\n * between chips; Delete, Backspace, Enter, and Space remove the focused chip.\n * The × is mouse-only.\n */\nexport default function ChipGroup({\n  children,\n  className = '',\n  disabled = false,\n  onKeyDown,\n  onFocus,\n  ...rest\n}: ChipGroupProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const toolbar = ref.current;\n    if (toolbar == null) return;\n    const chips = chipsIn(toolbar);\n    if (chips.length === 0) return;\n    if (disabled) {\n      chips.forEach((chip) => {\n        chip.tabIndex = -1;\n      });\n      return;\n    }\n    const focused = chips.find((chip) => chip === document.activeElement);\n    if (focused != null) {\n      chips.forEach((chip) => {\n        chip.tabIndex = chip === focused ? 0 : -1;\n      });\n      return;\n    }\n    if (!chips.some((chip) => chip.tabIndex === 0)) {\n      chips[0].tabIndex = 0;\n      chips.slice(1).forEach((chip) => {\n        chip.tabIndex = -1;\n      });\n    }\n  }, [children, disabled]);\n\n  const handleFocus = (e: FocusEvent<HTMLDivElement>) => {\n    onFocus?.(e);\n    if (disabled) return;\n    const target = e.target;\n    if (!(target instanceof HTMLElement)) return;\n    const chip = target.closest<HTMLElement>('[data-chip]');\n    const toolbar = e.currentTarget;\n    if (chip == null || !toolbar.contains(chip)) return;\n    chipsIn(toolbar).forEach((c) => {\n      c.tabIndex = c === chip ? 0 : -1;\n    });\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented || disabled) return;\n\n    const toolbar = ref.current;\n    if (toolbar == null) return;\n    const chips = chipsIn(toolbar);\n    if (chips.length === 0) return;\n\n    const active = document.activeElement;\n    if (!(active instanceof HTMLElement) || !toolbar.contains(active)) return;\n    const chip = active.closest<HTMLElement>('[data-chip]');\n    const index = chips.findIndex((c) => c === chip);\n    if (index < 0) return;\n\n    const moveTo = (nextIndex: number) => {\n      const next = chips[Math.max(0, Math.min(chips.length - 1, nextIndex))];\n      if (next == null) return;\n      e.preventDefault();\n      activateChip(next);\n    };\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        moveTo(index + 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        moveTo(index - 1);\n        break;\n      case 'Home':\n        moveTo(0);\n        break;\n      case 'End':\n        moveTo(chips.length - 1);\n        break;\n      case 'Delete':\n      case 'Backspace':\n      case 'Enter':\n      case ' ': {\n        const btn = chip?.querySelector<HTMLButtonElement>('[data-chip-remove]');\n        if (btn != null && !btn.disabled) {\n          e.preventDefault();\n          btn.click();\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  const rootClass = [styles['chip-group'], className].filter(Boolean).join(' ');\n\n  return (\n    <ChipGroupContext.Provider value={true}>\n      <div\n        {...rest}\n        ref={ref}\n        className={rootClass}\n        role=\"toolbar\"\n        aria-orientation=\"horizontal\"\n        aria-disabled={disabled || undefined}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n      >\n        {children}\n      </div>\n    </ChipGroupContext.Provider>\n  );\n}\n"],"names":["ChipGroupContext","createContext","chipsIn","toolbar","activateChip","el","chip","ChipGroup","children","className","disabled","onKeyDown","onFocus","rest","ref","useRef","useLayoutEffect","chips","focused","handleFocus","e","target","handleKeyDown","active","index","c","moveTo","nextIndex","next","btn","rootClass","styles","jsx"],"mappings":"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"}

package/dist/components/chip/ChipGroup.css

@@ -0,0 +1 @@
+._chip-group_p9ypv_2{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-xxs);min-width:0}