npm - @mattermost/compass-ui - Versions diffs - 0.1.0-alpha.4 → 0.1.0-alpha.6 - Mend

@mattermost/compass-ui 0.1.0-alpha.4 → 0.1.0-alpha.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (970) hide show

package/dist/components/radio/Radio.js CHANGED Viewed

@@ -4,10 +4,10 @@ import { useControllable as v } from "../../hooks/use-controllable.js";
 import { toKebab as x } from "../../utils/string.js";
 import a from "./Radio.module.scss.js";
 function K({
-  className: t = "",
-  size: l = "medium",
-  valid: i = !0,
-  children: s,
+  className: n = "",
+  size: t = "medium",
+  invalid: s = !1,
+  children: i,
   id: d,
   checked: r,
   defaultChecked: e,
@@ -15,14 +15,14 @@ function K({
   onChange: c,
   name: p,
   value: u,
-  ..._
+  ...f
 }) {
-  const f = j(), n = d ?? f, [, b] = v(r, e, c), C = a[`radio--size-${x(l)}`], N = i ? "" : a["radio--invalid"], h = [a.radio, C, N, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ g("label", { className: h, htmlFor: n, children: [
+  const _ = j(), l = d ?? _, [, b] = v(r, e, c), C = a[`radio--size-${x(t)}`], N = s ? a["radio--invalid"] : "", h = [a.radio, C, N, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ g("label", { className: h, htmlFor: l, children: [
     /* @__PURE__ */ o(
       "input",
       {
-        id: n,
+        id: l,
         type: "radio",
         name: p,
         value: u,
@@ -30,13 +30,13 @@ function K({
         checked: r,
         defaultChecked: e,
         disabled: m,
-        "aria-invalid": i ? void 0 : !0,
+        "aria-invalid": s ? !0 : void 0,
         onChange: b,
-        ..._
+        ...f
       }
     ),
     /* @__PURE__ */ o("span", { className: a.radio__circle, children: /* @__PURE__ */ o("span", { className: a.radio__dot, "aria-hidden": !0 }) }),
-    s != null && /* @__PURE__ */ o("span", { className: a.radio__label, children: s })
+    i != null && /* @__PURE__ */ o("span", { className: a.radio__label, children: i })
   ] });
 }
 export {

package/dist/components/radio/Radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Radio.module.scss';\n\nexport type RadioSize = 'small' \| 'medium' \| 'large';\n\nexport interface RadioProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'size' \| 'type'\n> {\n /** Optional CSS class name. /\n className?: string;\n /* Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. /\n size?: RadioSize;\n /* When ~~false~~, uses error/destructive styling (red when checked). ~~Default: true.~~ /\n ~~valid~~?: boolean;\n /* Label content. Rendered next to the radio. /\n children?: React.ReactNode;\n}\n\n/\n Radios let people pick exactly one option from a small, mutually exclusive set — a\n * workspace plan, a notification cadence, a default theme. Use a Radio when the choices are\n * few enough to show at once and the user benefits from seeing every option side-by-side.\n */\nexport default function Radio({\n className = '',\n size = 'medium',\n ~~valid~~ = ~~true~~,\n children,\n id: idProp,\n checked,\n defaultChecked,\n disabled,\n onChange,\n name,\n value,\n ...rest\n}: RadioProps) {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const [, handleChange] = useControllable(checked, defaultChecked, onChange);\n\n const sizeClass = styles[`radio--size-${toKebab(size)}`];\n const invalidClass = ~~valid~~ ? ~~'' :~~ styles['radio--invalid'];\n\n const rootClass = [styles.radio, sizeClass, invalidClass, className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <label className={rootClass} htmlFor={id}>\n <input\n id={id}\n type=\"radio\"\n name={name}\n value={value}\n className={styles['radio__input']}\n checked={checked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n aria-invalid={~~valid~~ ? ~~undefined~~ : ~~true~~}\n onChange={handleChange}\n {...rest}\n />\n <span className={styles['radio__circle']}>\n <span className={styles['radio__dot']} aria-hidden />\n </span>\n {children != null && (\n <span className={styles['radio__label']}>{children}</span>\n )}\n </label>\n );\n}\n"],"names":["Radio","className","size","~~valid~~","children","idProp","checked","defaultChecked","disabled","onChange","name","value","rest","generatedId","useId","id","handleChange","useControllable","sizeClass","styles","toKebab","invalidClass","rootClass","jsxs","jsx"],"mappings":";;;;;AA2BA,SAAwBA,EAAM;AAAA,EAC5B,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,~~OAAAC~~,~~IAAQ~~;AAAA,~~EACR~~,UAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,QAAMC,IAAcC,EAAA,GACdC,IAAKV,KAAUQ,GACf,CAAA,EAAGG,CAAY,IAAIC,EAAgBX,GAASC,GAAgBE,CAAQ,GAEpES,IAAYC,EAAO,eAAeC,EAAQlB,CAAI,CAAC,EAAE,GACjDmB,IAAelB,~~IAAQ~~,~~KAAKgB,~~EAAO,gBAAgB,~~GAEnDG~~,IAAY,CAACH,EAAO,OAAOD,GAAWG,GAAcpB,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAsB,EAAC,SAAA,EAAM,WAAWD,GAAW,SAASP,~~GACpC~~,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAT;AAAA,QACA,MAAK;AAAA,QACL,MAAAL;AAAA,QACA,OAAAC;AAAA,QACA,WAAWQ,EAAO;AAAA,QAClB,SAAAb;AAAA,QACA,gBAAAC;AAAA,QACA,UAAAC;AAAA,QACA,gBAAcL,~~IAAQ~~,~~SAAY~~;AAAA,~~QAClC~~,UAAUa;AAAA,QACT,GAAGJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEN,gBAAAY,EAAC,QAAA,EAAK,WAAWL,EAAO,eACtB,UAAA,gBAAAK,EAAC,QAAA,EAAK,WAAWL,EAAO,YAAe,eAAW,IAAC,GACrD;AAAA,IACCf,KAAY,QACX,gBAAAoB,EAAC,QAAA,EAAK,WAAWL,EAAO,cAAkB,UAAAf,EAAA,CAAS;AAAA,EAAA,GAEvD;AAEJ;"}
1	+ {"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Radio.module.scss';\n\nexport type RadioSize = 'small' \| 'medium' \| 'large';\n\nexport interface RadioProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'size' \| 'type'\n> {\n /** Optional CSS class name. /\n className?: string;\n /* Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. /\n size?: RadioSize;\n /* When true, uses error/destructive styling (red when checked). /\n invalid?: boolean;\n /* Label content. Rendered next to the radio. /\n children?: React.ReactNode;\n}\n\n/\n Radios let people pick exactly one option from a small, mutually exclusive set — a\n * workspace plan, a notification cadence, a default theme. Use a Radio when the choices are\n * few enough to show at once and the user benefits from seeing every option side-by-side.\n /\nexport default function Radio({\n className = '',\n size = 'medium',\n invalid = false,\n children,\n id: idProp,\n checked,\n defaultChecked,\n disabled,\n onChange,\n name,\n value,\n ...rest\n}: RadioProps) {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const [, handleChange] = useControllable(checked, defaultChecked, onChange);\n\n const sizeClass = styles[`radio--size-${toKebab(size)}`];\n const invalidClass = invalid ? styles['radio--invalid'] : '';\n\n const rootClass = [styles.radio, sizeClass, invalidClass, className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <label className={rootClass} htmlFor={id}>\n {/ eslint-disable-next-line jsx-a11y/role-supports-aria-props -- invalid form contract; radio has no supported invalid ARIA */}\n <input\n id={id}\n type=\"radio\"\n name={name}\n value={value}\n className={styles['radio__input']}\n checked={checked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n aria-invalid={invalid ? true : undefined}\n onChange={handleChange}\n {...rest}\n />\n <span className={styles['radio__circle']}>\n <span className={styles['radio__dot']} aria-hidden />\n </span>\n {children != null && (\n <span className={styles['radio__label']}>{children}</span>\n )}\n </label>\n );\n}\n"],"names":["Radio","className","size","invalid","children","idProp","checked","defaultChecked","disabled","onChange","name","value","rest","generatedId","useId","id","handleChange","useControllable","sizeClass","styles","toKebab","invalidClass","rootClass","jsxs","jsx"],"mappings":";;;;;AA2BA,SAAwBA,EAAM;AAAA,EAC5B,WAAAC,IAAY;AAAA,EACZ,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,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,QAAMC,IAAcC,EAAA,GACdC,IAAKV,KAAUQ,GACf,CAAA,EAAGG,CAAY,IAAIC,EAAgBX,GAASC,GAAgBE,CAAQ,GAEpES,IAAYC,EAAO,eAAeC,EAAQlB,CAAI,CAAC,EAAE,GACjDmB,IAAelB,IAAUgB,EAAO,gBAAgB,IAAI,IAEpDG,IAAY,CAACH,EAAO,OAAOD,GAAWG,GAAcpB,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAsB,EAAC,SAAA,EAAM,WAAWD,GAAW,SAASP,GAEpC,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAT;AAAA,QACA,MAAK;AAAA,QACL,MAAAL;AAAA,QACA,OAAAC;AAAA,QACA,WAAWQ,EAAO;AAAA,QAClB,SAAAb;AAAA,QACA,gBAAAC;AAAA,QACA,UAAAC;AAAA,QACA,gBAAcL,IAAU,KAAO;AAAA,QAC/B,UAAUa;AAAA,QACT,GAAGJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEN,gBAAAY,EAAC,QAAA,EAAK,WAAWL,EAAO,eACtB,UAAA,gBAAAK,EAAC,QAAA,EAAK,WAAWL,EAAO,YAAe,eAAW,IAAC,GACrD;AAAA,IACCf,KAAY,QACX,gBAAAoB,EAAC,QAAA,EAAK,WAAWL,EAAO,cAAkB,UAAAf,EAAA,CAAS;AAAA,EAAA,GAEvD;AAEJ;"}

package/dist/components/radio/Radio.module.css CHANGED Viewed

	@@ -1 +1 @@
1	- .~~_radio_1e67f_2~~{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-xs);font-family:var(--font-family-body);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}.~~_radio_1e67f_2~~:has(.~~_radio__input_1e67f_13~~:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}.~~_radio__input_1e67f_13~~{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}.~~_radio__input_1e67f_13~~:focus-visible{outline:none}.~~_radio__circle_1e67f_33~~{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);border-radius:var(--radius-full);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),border-width var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}.~~_radio__input_1e67f_13~~:focus-visible~.~~_radio__circle_1e67f_33~~{box-shadow:0 0 0 ~~4px~~ rgba(var(--button-bg-rgb),.56)}.~~_radio_1e67f_2~~:has(.~~_radio__input_1e67f_13~~:not(:disabled)):hover .~~_radio__circle_1e67f_33~~{border-color:rgba(var(--center-channel-color-rgb),.32)}.~~_radio__input_1e67f_13~~:disabled~.~~_radio__circle_1e67f_33~~{border-color:rgba(var(--center-channel-color-rgb),.16)}.~~_radio__input_1e67f_13~~:checked~.~~_radio__circle_1e67f_33~~{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--button-bg)}.~~_radio__input_1e67f_13~~:checked~.~~_radio__circle_1e67f_33~~ .~~_radio__dot_1e67f_59~~{background-color:var(--button-bg)}.~~_radio_1e67f_2~~:has(.~~_radio__input_1e67f_13~~:not(:disabled)):hover .~~_radio__input_1e67f_13~~:checked~.~~_radio__circle_1e67f_33~~{border-color:var(--button-bg)}.~~_radio_1e67f_2~~:has(.~~_radio__input_1e67f_13~~:not(:disabled)):hover .~~_radio__input_1e67f_13~~:checked~.~~_radio__circle_1e67f_33~~ .~~_radio__dot_1e67f_59~~{background-color:var(--button-bg)}.~~_radio__input_1e67f_13~~:focus-visible:checked~.~~_radio__circle_1e67f_33~~{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}.~~_radio__input_1e67f_13~~:disabled:checked~.~~_radio__circle_1e67f_33~~{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.32);border-width:1px}.~~_radio__input_1e67f_13~~:disabled:checked~.~~_radio__circle_1e67f_33~~ .~~_radio__dot_1e67f_59~~{background-color:rgba(var(--center-channel-color-rgb),.32)}._radio--~~invalid_1e67f_80~~ .~~_radio__circle_1e67f_33~~{border-color:var(--error-text, var(--color-danger))}.~~_radio_1e67f_2~~:has(.~~_radio__input_1e67f_13~~:not(:disabled)):hover._radio--~~invalid_1e67f_80~~ .~~_radio__input_1e67f_13~~:not(:checked)~.~~_radio__circle_1e67f_33~~{border-color:var(--error-text, var(--color-danger))}._radio--~~invalid_1e67f_80~~ .~~_radio__input_1e67f_13~~:checked~.~~_radio__circle_1e67f_33~~{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--error-text, var(--color-danger))}._radio--~~invalid_1e67f_80~~ .~~_radio__input_1e67f_13~~:checked~.~~_radio__circle_1e67f_33~~ .~~_radio__dot_1e67f_59~~{background-color:var(--error-text, var(--color-danger))}.~~_radio_1e67f_2~~:has(.~~_radio__input_1e67f_13~~:not(:disabled)):hover._radio--~~invalid_1e67f_80~~ .~~_radio__input_1e67f_13~~:checked~.~~_radio__circle_1e67f_33~~{border-color:var(--error-text, var(--color-danger))}.~~_radio_1e67f_2~~:has(.~~_radio__input_1e67f_13~~:not(:disabled)):hover._radio--~~invalid_1e67f_80~~ .~~_radio__input_1e67f_13~~:checked~.~~_radio__circle_1e67f_33~~ .~~_radio__dot_1e67f_59~~{background-color:var(--error-text, var(--color-danger))}._radio--~~invalid_1e67f_80~~ .~~_radio__input_1e67f_13~~:focus-visible~.~~_radio__circle_1e67f_33~~{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio--~~invalid_1e67f_80~~ .~~_radio__input_1e67f_13~~:focus-visible:checked~.~~_radio__circle_1e67f_33~~{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}.~~_radio__dot_1e67f_59~~{display:block;border-radius:var(--radius-full);pointer-events:none;transform:scale(.5);transition:transform var(--duration-quick) var(--ease-entrance)}.~~_radio__input_1e67f_13~~:checked~.~~_radio__circle_1e67f_33~~ .~~_radio__dot_1e67f_59~~{transform:scale(1)}.~~_radio__label_1e67f_116~~{line-height:1}._radio--size-~~small_1e67f_119~~{gap:var(--spacing-xs)}._radio--size-~~small_1e67f_119~~ .~~_radio__input_1e67f_13~~,._radio--size-~~small_1e67f_119~~ .~~_radio__circle_1e67f_33~~{width:12px;height:12px}._radio--size-~~small_1e67f_119~~ .~~_radio__dot_1e67f_59~~{width:6px;height:6px}._radio--size-~~small_1e67f_119~~ .~~_radio__label_1e67f_116~~{font-size:var(--font-size-75);line-height:var(--line-height-75)}._radio--size-~~medium_1e67f_138~~{gap:var(--spacing-xs)}._radio--size-~~medium_1e67f_138~~ .~~_radio__input_1e67f_13~~,._radio--size-~~medium_1e67f_138~~ .~~_radio__circle_1e67f_33~~{width:16px;height:16px}._radio--size-~~medium_1e67f_138~~ .~~_radio__dot_1e67f_59~~{width:8px;height:8px}._radio--size-~~medium_1e67f_138~~ .~~_radio__label_1e67f_116~~{font-size:var(--font-size-100);line-height:var(--line-height-100)}._radio--size-~~large_1e67f_157~~{gap:var(--spacing-s)}._radio--size-~~large_1e67f_157~~ .~~_radio__input_1e67f_13~~,._radio--size-~~large_1e67f_157~~ .~~_radio__circle_1e67f_33~~{width:20px;height:20px}._radio--size-~~large_1e67f_157~~ .~~_radio__dot_1e67f_59~~{width:10px;height:10px}._radio--size-~~large_1e67f_157~~ .~~_radio__label_1e67f_116~~{font-size:var(--font-size-200);line-height:var(--line-height-200)}
1	+ ._radio_difs7_2{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-xs);font-family:var(--font-family-body);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._radio_difs7_2:has(._radio__input_difs7_13:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._radio__input_difs7_13{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._radio__input_difs7_13:focus-visible{outline:none}._radio__circle_difs7_33{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);border-radius:var(--radius-full);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),border-width var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._radio__input_difs7_13:focus-visible~._radio__circle_difs7_33{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover ._radio__circle_difs7_33{border-color:rgba(var(--center-channel-color-rgb),.32)}._radio__input_difs7_13:disabled~._radio__circle_difs7_33{border-color:rgba(var(--center-channel-color-rgb),.16)}._radio__input_difs7_13:checked~._radio__circle_difs7_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--button-bg)}._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--button-bg)}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover ._radio__input_difs7_13:checked~._radio__circle_difs7_33{border-color:var(--button-bg)}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover ._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--button-bg)}._radio__input_difs7_13:focus-visible:checked~._radio__circle_difs7_33{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio__input_difs7_13:disabled:checked~._radio__circle_difs7_33{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.32);border-width:1px}._radio__input_difs7_13:disabled:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:rgba(var(--center-channel-color-rgb),.32)}._radio--invalid_difs7_80 ._radio__circle_difs7_33{border-color:var(--error-text, var(--color-danger))}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover._radio--invalid_difs7_80 ._radio__input_difs7_13:not(:checked)~._radio__circle_difs7_33{border-color:var(--error-text, var(--color-danger))}._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--error-text, var(--color-danger))}._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--error-text, var(--color-danger))}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33{border-color:var(--error-text, var(--color-danger))}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--error-text, var(--color-danger))}._radio--invalid_difs7_80 ._radio__input_difs7_13:focus-visible~._radio__circle_difs7_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio--invalid_difs7_80 ._radio__input_difs7_13:focus-visible:checked~._radio__circle_difs7_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio__dot_difs7_59{display:block;border-radius:var(--radius-full);pointer-events:none;transform:scale(.5);transition:transform var(--duration-quick) var(--ease-entrance)}._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{transform:scale(1)}._radio__label_difs7_116{line-height:1}._radio--size-small_difs7_119{gap:var(--spacing-xs)}._radio--size-small_difs7_119 ._radio__input_difs7_13,._radio--size-small_difs7_119 ._radio__circle_difs7_33{width:12px;height:12px}._radio--size-small_difs7_119 ._radio__dot_difs7_59{width:6px;height:6px}._radio--size-small_difs7_119 ._radio__label_difs7_116{font-size:var(--font-size-75);line-height:var(--line-height-75)}._radio--size-medium_difs7_138{gap:var(--spacing-xs)}._radio--size-medium_difs7_138 ._radio__input_difs7_13,._radio--size-medium_difs7_138 ._radio__circle_difs7_33{width:16px;height:16px}._radio--size-medium_difs7_138 ._radio__dot_difs7_59{width:8px;height:8px}._radio--size-medium_difs7_138 ._radio__label_difs7_116{font-size:var(--font-size-100);line-height:var(--line-height-100)}._radio--size-large_difs7_157{gap:var(--spacing-s)}._radio--size-large_difs7_157 ._radio__input_difs7_13,._radio--size-large_difs7_157 ._radio__circle_difs7_33{width:20px;height:20px}._radio--size-large_difs7_157 ._radio__dot_difs7_59{width:10px;height:10px}._radio--size-large_difs7_157 ._radio__label_difs7_116{font-size:var(--font-size-200);line-height:var(--line-height-200)}

package/dist/components/radio/Radio.module.scss.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Radio.module.css');const _="_radio_1e67f_2",i="_radio__input_1e67f_13",o="_radio__circle_1e67f_33",a="_radio__dot_1e67f_59",e="_radio__label_1e67f_116",d={radio:_,radio__input:i,radio__circle:o,radio__dot:a,"radio--invalid":"_radio--invalid_1e67f_80",radio__label:e,"radio--size-small":"_radio--size-small_1e67f_119","radio--size-medium":"_radio--size-medium_1e67f_138","radio--size-large":"_radio--size-large_1e67f_157"};exports.default=d;exports.radio=_;exports.radio__circle=o;exports.radio__dot=a;exports.radio__input=i;exports.radio__label=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Radio.module.css');const i="_radio_difs7_2",_="_radio__input_difs7_13",d="_radio__circle_difs7_33",o="_radio__dot_difs7_59",a="_radio__label_difs7_116",r={radio:i,radio__input:_,radio__circle:d,radio__dot:o,"radio--invalid":"_radio--invalid_difs7_80",radio__label:a,"radio--size-small":"_radio--size-small_difs7_119","radio--size-medium":"_radio--size-medium_difs7_138","radio--size-large":"_radio--size-large_difs7_157"};exports.default=r;exports.radio=i;exports.radio__circle=d;exports.radio__dot=o;exports.radio__input=_;exports.radio__label=a;
 //# sourceMappingURL=Radio.module.scss.cjs.map

package/dist/components/radio/Radio.module.scss.js CHANGED Viewed

@@ -1,20 +1,20 @@
-import './Radio.module.css';const _ = "_radio_1e67f_2", i = "_radio__input_1e67f_13", a = "_radio__circle_1e67f_33", o = "_radio__dot_1e67f_59", d = "_radio__label_1e67f_116", r = {
+import './Radio.module.css';const _ = "_radio_difs7_2", i = "_radio__input_difs7_13", d = "_radio__circle_difs7_33", a = "_radio__dot_difs7_59", o = "_radio__label_difs7_116", r = {
   radio: _,
   radio__input: i,
-  radio__circle: a,
-  radio__dot: o,
-  "radio--invalid": "_radio--invalid_1e67f_80",
-  radio__label: d,
-  "radio--size-small": "_radio--size-small_1e67f_119",
-  "radio--size-medium": "_radio--size-medium_1e67f_138",
-  "radio--size-large": "_radio--size-large_1e67f_157"
+  radio__circle: d,
+  radio__dot: a,
+  "radio--invalid": "_radio--invalid_difs7_80",
+  radio__label: o,
+  "radio--size-small": "_radio--size-small_difs7_119",
+  "radio--size-medium": "_radio--size-medium_difs7_138",
+  "radio--size-large": "_radio--size-large_difs7_157"
 };
 export {
   r as default,
   _ as radio,
-  a as radio__circle,
-  o as radio__dot,
+  d as radio__circle,
+  a as radio__dot,
   i as radio__input,
-  d as radio__label
+  o as radio__label
 };
 //# sourceMappingURL=Radio.module.scss.js.map

package/dist/components/right-sidebar-header/RightSidebarHeader.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__b=require("@mattermost/compass-icons/components/arrow-back-ios.js"),b=__b?.default??__b,__g=require("@mattermost/compass-icons/components/arrow-expand.js"),g=__g?.default??__g,__m=require("@mattermost/compass-icons/components/close.js"),m=__m?.default??__m,s=require("../icon/Icon.cjs"),r=require("../icon-button/IconButton.cjs"),p=require("../tag/Tag.cjs"),a=require("./RightSidebarHeader.module.scss.cjs");function N({title:h,secondaryTitle:i,tag:l,tagType:f="info",leadingIcon:d,onBack:t,onExpand:c,onClose:n,actionLabel:o,onActionClick:_,actionActive:u=!1,className:j=""}){const x=[a.default["right-sidebar-header"],j].filter(Boolean).join(" ");return e.jsxs("div",{className:x,children:[e.jsxs("div",{className:a.default["right-sidebar-header__left"],children:[e.jsxs("div",{className:a.default["right-sidebar-header__primary"],children:[t&&e.jsx(r.default,{className:a.default["right-sidebar-header__back"],size:"small","aria-label":"Back",onClick:t,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(b,{})})}),d&&e.jsx("span",{className:a.default["right-sidebar-header__leading-icon"],children:d}),e.jsx("span",{className:a.default["right-sidebar-header__title"],children:h}),l&&e.jsx("span",{className:a.default["right-sidebar-header__tag"],children:e.jsx(p.default,{label:l,type:f,size:"x-small",casing:"all-caps"})})]}),i&&e.jsx("div",{className:a.default["right-sidebar-header__secondary"],children:e.jsx("span",{className:a.default["right-sidebar-header__secondary-text"],children:i})})]}),e.jsxs("div",{className:a.default["right-sidebar-header__actions"],children:[o&&e.jsx("button",{type:"button",className:[a.default["right-sidebar-header__action"],u?a.default["right-sidebar-header__action--active"]:""].filter(Boolean).join(" "),onClick:_,"aria-pressed":u?!0:void 0,children:o}),c&&e.jsx(r.default,{size:"small","aria-label":"Expand",onClick:c,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(g,{})})}),n&&e.jsx(r.default,{size:"small","aria-label":"Close",onClick:n,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(m,{})})})]})]})}exports.default=N;
2	+ //# sourceMappingURL=RightSidebarHeader.cjs.map

package/dist/components/right-sidebar-header/RightSidebarHeader.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RightSidebarHeader.cjs","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n /** Primary title text. */\n title: string;\n /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n secondaryTitle?: string;\n /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n tag?: string;\n /** Tag visual style. Default: Info. */\n tagType?: TagType;\n /** Optional leading element shown before the title — typically a UserAvatar or Icon. */\n leadingIcon?: ReactNode;\n /** When set, shows a back button and calls this on click. */\n onBack?: () => void;\n /** When set, shows an expand button and calls this on click. */\n onExpand?: () => void;\n /** When set, shows a close button and calls this on click. */\n onClose?: () => void;\n /** Optional inline action label (e.g. \"Follow\"). */\n actionLabel?: string;\n /** Click handler for the action label. */\n onActionClick?: () => void;\n /** When true, the action button shows in its active state. */\n actionActive?: boolean;\n className?: string;\n}\n\nexport default function RightSidebarHeader({\n title,\n secondaryTitle,\n tag,\n tagType = 'info',\n leadingIcon,\n onBack,\n onExpand,\n onClose,\n actionLabel,\n onActionClick,\n actionActive = false,\n className = '',\n}: RightSidebarHeaderProps) {\n const rootClass = [styles['right-sidebar-header'], className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass}>\n <div className={styles['right-sidebar-header__left']}>\n <div className={styles['right-sidebar-header__primary']}>\n {onBack && (\n <IconButton\n className={styles['right-sidebar-header__back']}\n size=\"small\"\n aria-label=\"Back\"\n onClick={onBack}\n icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n />\n )}\n {leadingIcon && (\n <span className={styles['right-sidebar-header__leading-icon']}>\n {leadingIcon}\n </span>\n )}\n <span className={styles['right-sidebar-header__title']}>{title}</span>\n {tag && (\n <span className={styles['right-sidebar-header__tag']}>\n <Tag\n label={tag}\n type={tagType}\n size=\"x-small\"\n casing=\"all-caps\"\n />\n </span>\n )}\n </div>\n {secondaryTitle && (\n <div className={styles['right-sidebar-header__secondary']}>\n <span className={styles['right-sidebar-header__secondary-text']}>\n {secondaryTitle}\n </span>\n </div>\n )}\n </div>\n\n <div className={styles['right-sidebar-header__actions']}>\n {actionLabel && (\n <button\n type=\"button\"\n className={[\n styles['right-sidebar-header__action'],\n actionActive\n ? styles['right-sidebar-header__action--active']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n onClick={onActionClick}\n aria-pressed={actionActive ? true : undefined}\n >\n {actionLabel}\n </button>\n )}\n {onExpand && (\n <IconButton\n size=\"small\"\n aria-label=\"Expand\"\n onClick={onExpand}\n icon={<Icon size=\"16\" glyph={<ArrowExpandIcon />} />}\n />\n )}\n {onClose && (\n <IconButton\n size=\"small\"\n aria-label=\"Close\"\n onClick={onClose}\n icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n />\n )}\n </div>\n </div>\n );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","onExpand","onClose","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowExpandIcon","CloseIcon"],"mappings":"+dAoCA,SAAwBA,EAAmB,CACzC,MAAAC,EACA,eAAAC,EACA,IAAAC,EACA,QAAAC,EAAU,OACV,YAAAC,EACA,OAAAC,EACA,SAAAC,EACA,QAAAC,EACA,YAAAC,EACA,cAAAC,EACA,aAAAC,EAAe,GACf,UAAAC,EAAY,EACd,EAA4B,CAC1B,MAAMC,EAAY,CAACC,UAAO,sBAAsB,EAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACd,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAR,GACCU,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWH,EAAAA,QAAO,4BAA4B,EAC9C,KAAK,QACL,aAAW,OACX,QAASR,EACT,WAAOY,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAiB,CAAA,CAAI,CAAA,CAAA,EAGtDd,GACCW,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oCAAoC,EACzD,SAAAT,EACH,QAED,OAAA,CAAK,UAAWS,EAAAA,QAAO,6BAA6B,EAAI,SAAAb,EAAM,EAC9DE,GACCa,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EACjD,SAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,MAAOjB,EACP,KAAMC,EACN,KAAK,UACL,OAAO,UAAA,CAAA,CACT,CACF,CAAA,EAEJ,EACCF,GACCc,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,iCAAiC,EACtD,SAAAE,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,sCAAsC,EAC3D,WACH,CAAA,CACF,CAAA,EAEJ,EAEAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAL,GACCO,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTF,EAAAA,QAAO,8BAA8B,EACrCH,EACIG,EAAAA,QAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASJ,EACT,eAAcC,EAAe,GAAO,OAEnC,SAAAF,CAAA,CAAA,EAGJF,GACCS,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAW,SACX,QAASV,EACT,WAAOW,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACK,IAAgB,CAAA,CAAI,CAAA,CAAA,EAGrDb,GACCQ,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAW,QACX,QAAST,EACT,WAAOU,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACM,IAAU,CAAA,CAAI,CAAA,CAAA,CAC9C,CAAA,CAEJ,CAAA,EACF,CAEJ"}

package/dist/components/{right-sidebar/RightSidebarHeader → right-sidebar-header}/RightSidebarHeader.d.ts RENAMED Viewed

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { TagType } from '../../tag/Tag';
+import { TagType } from '../tag/Tag';
 export interface RightSidebarHeaderProps {
     /** Primary title text. */
     title: string;

package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RightSidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,WAAW,uBAAuB;IACtC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,2FAA2F;IAC3F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wFAAwF;IACxF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,cAAc,EACd,GAAG,EACH,OAAgB,EAChB,WAAW,EACX,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,aAAa,EACb,YAAoB,EACpB,SAAc,GACf,EAAE,uBAAuB,2CAiFzB"}

package/dist/components/{right-sidebar/RightSidebarHeader → right-sidebar-header}/RightSidebarHeader.js RENAMED Viewed

@@ -2,9 +2,9 @@ import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import __N from "@mattermost/compass-icons/components/arrow-back-ios.js";const N=__N&&__N.default?__N.default:__N;
 import __y from "@mattermost/compass-icons/components/arrow-expand.js";const y=__y&&__y.default?__y.default:__y;
 import __u from "@mattermost/compass-icons/components/close.js";const u=__u&&__u.default?__u.default:__u;
-import i from "../../icon/Icon.js";
-import s from "../../icon-button/IconButton.js";
-import z from "../../tag/Tag.js";
+import i from "../icon/Icon.js";
+import s from "../icon-button/IconButton.js";
+import z from "../tag/Tag.js";
 import a from "./RightSidebarHeader.module.scss.js";
 function A({
   title: p,

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

@@ -0,0 +1 @@

+ {"version":3,"file":"RightSidebarHeader.js","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n /** Primary title text. */\n title: string;\n /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n secondaryTitle?: string;\n /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n tag?: string;\n /** Tag visual style. Default: Info. */\n tagType?: TagType;\n /** Optional leading element shown before the title — typically a UserAvatar or Icon. */\n leadingIcon?: ReactNode;\n /** When set, shows a back button and calls this on click. */\n onBack?: () => void;\n /** When set, shows an expand button and calls this on click. */\n onExpand?: () => void;\n /** When set, shows a close button and calls this on click. */\n onClose?: () => void;\n /** Optional inline action label (e.g. \"Follow\"). */\n actionLabel?: string;\n /** Click handler for the action label. */\n onActionClick?: () => void;\n /** When true, the action button shows in its active state. */\n actionActive?: boolean;\n className?: string;\n}\n\nexport default function RightSidebarHeader({\n title,\n secondaryTitle,\n tag,\n tagType = 'info',\n leadingIcon,\n onBack,\n onExpand,\n onClose,\n actionLabel,\n onActionClick,\n actionActive = false,\n className = '',\n}: RightSidebarHeaderProps) {\n const rootClass = [styles['right-sidebar-header'], className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass}>\n <div className={styles['right-sidebar-header__left']}>\n <div className={styles['right-sidebar-header__primary']}>\n {onBack && (\n <IconButton\n className={styles['right-sidebar-header__back']}\n size=\"small\"\n aria-label=\"Back\"\n onClick={onBack}\n icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n />\n )}\n {leadingIcon && (\n <span className={styles['right-sidebar-header__leading-icon']}>\n {leadingIcon}\n </span>\n )}\n <span className={styles['right-sidebar-header__title']}>{title}</span>\n {tag && (\n <span className={styles['right-sidebar-header__tag']}>\n <Tag\n label={tag}\n type={tagType}\n size=\"x-small\"\n casing=\"all-caps\"\n />\n </span>\n )}\n </div>\n {secondaryTitle && (\n <div className={styles['right-sidebar-header__secondary']}>\n <span className={styles['right-sidebar-header__secondary-text']}>\n {secondaryTitle}\n </span>\n </div>\n )}\n </div>\n\n <div className={styles['right-sidebar-header__actions']}>\n {actionLabel && (\n <button\n type=\"button\"\n className={[\n styles['right-sidebar-header__action'],\n actionActive\n ? styles['right-sidebar-header__action--active']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n onClick={onActionClick}\n aria-pressed={actionActive ? true : undefined}\n >\n {actionLabel}\n </button>\n )}\n {onExpand && (\n <IconButton\n size=\"small\"\n aria-label=\"Expand\"\n onClick={onExpand}\n icon={<Icon size=\"16\" glyph={<ArrowExpandIcon />} />}\n />\n )}\n {onClose && (\n <IconButton\n size=\"small\"\n aria-label=\"Close\"\n onClick={onClose}\n icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n />\n )}\n </div>\n </div>\n );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","onExpand","onClose","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowExpandIcon","CloseIcon"],"mappings":";;;;;;;;AAoCA,SAAwBA,EAAmB;AAAA,EACzC,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AACd,GAA4B;AAC1B,QAAMC,IAAY,CAACC,EAAO,sBAAsB,GAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAWF,GACd,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWD,EAAO,4BAA4B,GACjD,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,+BAA+B,GACnD,UAAA;AAAA,QAAAR,KACC,gBAAAU;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAWH,EAAO,4BAA4B;AAAA,YAC9C,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAASR;AAAA,YACT,wBAAOY,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACG,KAAiB,EAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGtDd,KACC,gBAAAW,EAAC,QAAA,EAAK,WAAWF,EAAO,oCAAoC,GACzD,UAAAT,GACH;AAAA,0BAED,QAAA,EAAK,WAAWS,EAAO,6BAA6B,GAAI,UAAAb,GAAM;AAAA,QAC9DE,KACC,gBAAAa,EAAC,QAAA,EAAK,WAAWF,EAAO,2BAA2B,GACjD,UAAA,gBAAAE;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,OAAOjB;AAAA,YACP,MAAMC;AAAA,YACN,MAAK;AAAA,YACL,QAAO;AAAA,UAAA;AAAA,QAAA,EACT,CACF;AAAA,MAAA,GAEJ;AAAA,MACCF,KACC,gBAAAc,EAAC,OAAA,EAAI,WAAWF,EAAO,iCAAiC,GACtD,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,sCAAsC,GAC3D,aACH,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,IAEA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,+BAA+B,GACnD,UAAA;AAAA,MAAAL,KACC,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAW;AAAA,YACTF,EAAO,8BAA8B;AAAA,YACrCH,IACIG,EAAO,sCAAsC,IAC7C;AAAA,UAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,UACX,SAASJ;AAAA,UACT,gBAAcC,IAAe,KAAO;AAAA,UAEnC,UAAAF;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJF,KACC,gBAAAS;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAW;AAAA,UACX,SAASV;AAAA,UACT,wBAAOW,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACK,KAAgB,EAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAGrDb,KACC,gBAAAQ;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAW;AAAA,UACX,SAAST;AAAA,UACT,wBAAOU,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACM,KAAU,EAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9C,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/right-sidebar-header/RightSidebarHeader.module.css ADDED Viewed

@@ -0,0 +1 @@

+ ._right-sidebar-header_11chd_2{display:flex;align-items:center;gap:var(--spacing-l);height:56px;padding:var(--spacing-m);background-color:var(--center-channel-bg);border-bottom:1px solid rgba(var(--center-channel-color-rgb),.12);box-sizing:border-box}._right-sidebar-header__left_11chd_12{display:flex;flex:1 1 0;min-width:0;align-items:center}._right-sidebar-header__primary_11chd_18{display:flex;align-items:center;gap:var(--spacing-xxs);padding:0 var(--spacing-xs);min-width:0}._right-sidebar-header__back_11chd_25{margin-left:-12px}._right-sidebar-header__leading-icon_11chd_28{display:inline-flex;align-items:center;flex-shrink:0}._right-sidebar-header__tag_11chd_33{display:inline-flex;align-items:center}._right-sidebar-header__title_11chd_37{font-family:var(--font-family-heading);font-size:var(--font-size-200);font-weight:var(--font-weight-semibold);line-height:var(--line-height-200);color:var(--center-channel-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._right-sidebar-header__secondary_11chd_47{display:flex;flex:1 1 0;min-width:0;align-items:center;padding:0 var(--spacing-xs);border-left:1px solid rgba(var(--center-channel-color-rgb),.16)}._right-sidebar-header__secondary-text_11chd_55{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-200);color:rgba(var(--center-channel-color-rgb),.56);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._right-sidebar-header__actions_11chd_65{display:flex;align-items:center;gap:var(--spacing-xxxs);flex-shrink:0}._right-sidebar-header__action_11chd_65{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:var(--spacing-xxxxs) var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:transparent;font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.64);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._right-sidebar-header__action_11chd_65:hover{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._right-sidebar-header__action_11chd_65:active{background-color:rgba(var(--center-channel-color-rgb),.12)}._right-sidebar-header__action_11chd_65:focus-visible{outline:none;box-shadow:0 0 0 2px var(--button-bg)}._right-sidebar-header__action--active_11chd_99{background-color:rgba(var(--center-channel-color-rgb),.08);color:var(--center-channel-color)}

package/dist/components/right-sidebar-header/RightSidebarHeader.module.scss.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./RightSidebarHeader.module.css');const e={"right-sidebar-header":"_right-sidebar-header_11chd_2","right-sidebar-header__left":"_right-sidebar-header__left_11chd_12","right-sidebar-header__primary":"_right-sidebar-header__primary_11chd_18","right-sidebar-header__back":"_right-sidebar-header__back_11chd_25","right-sidebar-header__leading-icon":"_right-sidebar-header__leading-icon_11chd_28","right-sidebar-header__tag":"_right-sidebar-header__tag_11chd_33","right-sidebar-header__title":"_right-sidebar-header__title_11chd_37","right-sidebar-header__secondary":"_right-sidebar-header__secondary_11chd_47","right-sidebar-header__secondary-text":"_right-sidebar-header__secondary-text_11chd_55","right-sidebar-header__actions":"_right-sidebar-header__actions_11chd_65","right-sidebar-header__action":"_right-sidebar-header__action_11chd_65","right-sidebar-header__action--active":"_right-sidebar-header__action--active_11chd_99"};exports.default=e;
2	+ //# sourceMappingURL=RightSidebarHeader.module.scss.cjs.map

package/dist/components/{right-sidebar/RightSidebarHeader → right-sidebar-header}/RightSidebarHeader.module.scss.js RENAMED Viewed

@@ -1,16 +1,16 @@
 import './RightSidebarHeader.module.css';const e = {
-  "right-sidebar-header": "_right-sidebar-header_7aitf_2",
-  "right-sidebar-header__left": "_right-sidebar-header__left_7aitf_12",
-  "right-sidebar-header__primary": "_right-sidebar-header__primary_7aitf_18",
-  "right-sidebar-header__back": "_right-sidebar-header__back_7aitf_25",
-  "right-sidebar-header__leading-icon": "_right-sidebar-header__leading-icon_7aitf_28",
-  "right-sidebar-header__tag": "_right-sidebar-header__tag_7aitf_33",
-  "right-sidebar-header__title": "_right-sidebar-header__title_7aitf_37",
-  "right-sidebar-header__secondary": "_right-sidebar-header__secondary_7aitf_45",
-  "right-sidebar-header__secondary-text": "_right-sidebar-header__secondary-text_7aitf_53",
-  "right-sidebar-header__actions": "_right-sidebar-header__actions_7aitf_63",
-  "right-sidebar-header__action": "_right-sidebar-header__action_7aitf_63",
-  "right-sidebar-header__action--active": "_right-sidebar-header__action--active_7aitf_97"
+  "right-sidebar-header": "_right-sidebar-header_11chd_2",
+  "right-sidebar-header__left": "_right-sidebar-header__left_11chd_12",
+  "right-sidebar-header__primary": "_right-sidebar-header__primary_11chd_18",
+  "right-sidebar-header__back": "_right-sidebar-header__back_11chd_25",
+  "right-sidebar-header__leading-icon": "_right-sidebar-header__leading-icon_11chd_28",
+  "right-sidebar-header__tag": "_right-sidebar-header__tag_11chd_33",
+  "right-sidebar-header__title": "_right-sidebar-header__title_11chd_37",
+  "right-sidebar-header__secondary": "_right-sidebar-header__secondary_11chd_47",
+  "right-sidebar-header__secondary-text": "_right-sidebar-header__secondary-text_11chd_55",
+  "right-sidebar-header__actions": "_right-sidebar-header__actions_11chd_65",
+  "right-sidebar-header__action": "_right-sidebar-header__action_11chd_65",
+  "right-sidebar-header__action--active": "_right-sidebar-header__action--active_11chd_99"
 };
 export {
   e as default

package/dist/components/{app-bar-item → right-sidebar-header}/index.cjs RENAMED Viewed

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

package/dist/components/right-sidebar-header/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { default as RightSidebarHeader } from './RightSidebarHeader';
+export type { RightSidebarHeaderProps } from './RightSidebarHeader';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/right-sidebar-header/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/right-sidebar-header/index.js ADDED Viewed

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

package/dist/components/search-input/SearchInput.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("react"),$=require("../../utils/string.cjs"),g=require("../icon/Icon.cjs"),__B=require("@mattermost/compass-icons/components/magnify.js"),B=__B?.default??__B,__D=require("@mattermost/compass-icons/components/close-circle.js"),D=__D?.default??__D,s=require("./SearchInput.module.scss.cjs"),G={small:"12",medium:"16",large:"20"},H=a.forwardRef(function({className:q="",size:p="medium",label:o,onClear:d,id:y,value:f,defaultValue:I,placeholder:C,onFocus:n,onBlur:r,onChange:l,disabled:i,...k},u){const R=a.useId(),_=y??R,h=a.useRef(null),c=f!==void 0,[z,m]=a.useState(I??""),j=c?f:z,x=j!=null&&j!=="",[M,b]=a.useState(!1),w=M||x,T=a.useCallback(e=>{b(!0),n==null||n(e)},[n]),V=a.useCallback(e=>{b(!1),r==null||r(e)},[r]),F=a.useCallback(e=>{c||m(e.target.value),l==null||l(e)},[c,l]),O=a.useCallback(e=>{h.current=e,typeof u=="function"?u(e):u&&(u.current=e)},[u]),A=a.useCallback(()=>{var S;if(i)return;if(d){d(),(S=h.current)==null||S.focus();return}const e=h.current;e!=null&&(e.value="",c||m(""),l==null||l({target:e,currentTarget:e}),e.focus())},[i,c,l,d]),v=x&&!i,E=s.default[`searchInput--size-${$.toKebab(p)}`],K=o!=null&&w?s.default["searchInput--label-floated"]:"",L=s.default["searchInput--has-leading-icon"],U=v?s.default["searchInput--has-trailing-icon"]:"",N=G[p],Z=[s.default.searchInput,E,K,L,U,q].filter(Boolean).join(" ");return t.jsx("div",{className:Z,children:t.jsxs("div",{className:s.default.searchInput__wrapper,children:[o!=null&&t.jsx("label",{className:s.default.searchInput__label,htmlFor:_,children:o}),t.jsxs("div",{className:s.default.searchInput__inner,children:[t.jsx("span",{className:s.default.searchInput__leadingIcon,"aria-hidden":!0,children:t.jsx(g.default,{size:N,glyph:t.jsx(B,{})})}),t.jsx("input",{ref:O,id:_,type:"search",className:s.default.searchInput__input,value:c?f:void 0,defaultValue:c?void 0:I,placeholder:C,disabled:i,onFocus:T,onBlur:V,onChange:F,...k}),v&&t.jsx("span",{className:s.default.searchInput__trailingIcon,children:t.jsx("button",{type:"button",className:s.default.searchInput__clearButton,onClick:A,"aria-label":"Clear search",tabIndex:-1,children:t.jsx(g.default,{size:N,glyph:t.jsx(D,{})})})})]})]})})});exports.default=H;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),a=require("react"),W=require("../../utils/string.cjs"),k=require("../icon/Icon.cjs"),__X=require("@mattermost/compass-icons/components/magnify.js"),X=__X?.default??__X,__Y=require("@mattermost/compass-icons/components/close-circle.js"),Y=__Y?.default??__Y,t=require("./SearchInput.module.scss.cjs"),B={small:"12",medium:"16",large:"20"},D={small:"12",medium:"16",large:"16"},K=a.forwardRef(function({className:q="",size:f="medium",label:h,invalid:I=!1,onClear:p,id:R,value:_,defaultValue:j,placeholder:y,onFocus:i,onBlur:r,onChange:l,disabled:u,onKeyDown:d,...M},n){const z=a.useId(),x=R??z,m=a.useRef(null),c=_!==void 0,[E,b]=a.useState(j??""),C=c?_:E,o=C!=null&&C!=="",[A,S]=a.useState(!1),O=A||o,T=a.useCallback(e=>{S(!0),i==null||i(e)},[i]),V=a.useCallback(e=>{S(!1),r==null||r(e)},[r]),F=a.useCallback(e=>{c||b(e.target.value),l==null||l(e)},[c,l]),L=a.useCallback(e=>{m.current=e,typeof n=="function"?n(e):n&&(n.current=e)},[n]),v=a.useCallback(()=>{var g;if(u)return;if(p){p(),(g=m.current)==null||g.focus();return}const e=m.current;e!=null&&(e.value="",c||b(""),l==null||l({target:e,currentTarget:e}),e.focus())},[u,c,l,p]),P=a.useCallback(e=>{d==null||d(e),!(e.defaultPrevented||u)&&e.key==="Escape"&&o&&(e.preventDefault(),v())},[u,v,o,d]),N=o&&!u,Z=t.default[`search-input--size-${W.toKebab(f)}`],U=I?t.default["search-input--invalid"]:"",$=h!=null&&O?t.default["search-input--label-floated"]:"",w=t.default["search-input--has-leading-icon"],G=N?t.default["search-input--has-trailing-icon"]:"",H=B[f],J=D[f],Q=[t.default["search-input"],Z,U,$,w,G,q].filter(Boolean).join(" ");return s.jsx("div",{className:Q,children:s.jsxs("div",{className:t.default["search-input__wrapper"],children:[h!=null&&s.jsx("label",{className:t.default["search-input__label"],htmlFor:x,children:h}),s.jsxs("div",{className:t.default["search-input__inner"],children:[s.jsx("span",{className:t.default["search-input__leading-icon"],"aria-hidden":!0,children:s.jsx(k.default,{size:H,glyph:s.jsx(X,{})})}),s.jsx("input",{ref:L,id:x,type:"search",className:t.default["search-input__input"],value:c?_:void 0,defaultValue:c?void 0:j,placeholder:y,disabled:u,onFocus:T,onBlur:V,onChange:F,onKeyDown:P,"aria-invalid":I?!0:void 0,...M}),N&&s.jsx("span",{className:t.default["search-input__trailing-icon"],children:s.jsx("button",{type:"button",className:t.default["search-input__clear-button"],onClick:v,"aria-label":"Clear search",tabIndex:-1,children:s.jsx(k.default,{size:J,glyph:s.jsx(Y,{})})})})]})]})})});exports.default=K;
 //# sourceMappingURL=SearchInput.cjs.map

package/dist/components/search-input/SearchInput.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.cjs","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';\nimport {\n forwardRef,\n useId,\n useState,\n useCallback,\n useRef,\n} from 'react';\nimport { toKebab } from '@/utils/string';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport MagnifyIcon from '@mattermost/compass-icons/components/magnify';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport styles from './SearchInput.module.scss';\n\nexport type SearchInputSize = 'small' \| 'medium' \| 'large';\n\nconst ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n small: '12',\n medium: '16',\n large: '20',\n};\n\nexport interface SearchInputProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'size' \| 'type'\n> {\n /** Optional CSS class name. /\n className?: string;\n /* Floating label (placeholder-style). Floats above border when filled. /\n label?: ReactNode;\n /* Size variant. Default: Medium. /\n size?: SearchInputSize;\n /* Called when the clear button is pressed. Omit to use built-in clearing. /\n onClear?: () => void;\n}\n\n/\n Search Inputs are the entry point to filtering or finding content — global search, channel\n * switcher, member picker, file finder. They look like a text input with a leading magnifier\n * so the affordance is obvious before the user reads a single word.\n */\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n function SearchInput(\n {\n className = '',\n size = 'medium',\n label,\n onClear,\n id: idProp,\n value: valueProp,\n defaultValue,\n placeholder,\n onFocus,\n onBlur,\n onChange,\n disabled,\n ...rest\n },\n ref,\n ) {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const inputRef = useRef<HTMLInputElement>(null);\n\n const isControlled = valueProp !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState(\n defaultValue ?? '',\n );\n const value = isControlled ? (valueProp as string) : uncontrolledValue;\n const hasValue = value != null && value !== '';\n\n const [isFocused, setIsFocused] = useState(false);\n const labelFloated = isFocused \|\| hasValue;\n\n const handleFocus = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n setIsFocused(true);\n onFocus?.(e);\n },\n [onFocus],\n );\n const handleBlur = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n setIsFocused(false);\n onBlur?.(e);\n },\n [onBlur],\n );\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) setUncontrolledValue(e.target.value);\n onChange?.(e);\n },\n [isControlled, onChange],\n );\n\n const setInputRef = useCallback(\n (node: HTMLInputElement \| null) => {\n inputRef.current = node;\n if (typeof ref === 'function') {\n ref(node);\n } else if (ref) {\n ref.current = node;\n }\n },\n [ref],\n );\n\n const handleClear = useCallback(() => {\n if (disabled) return;\n\n if (onClear) {\n onClear();\n inputRef.current?.focus();\n return;\n }\n\n const input = inputRef.current;\n if (input == null) return;\n\n input.value = '';\n if (!isControlled) setUncontrolledValue('');\n\n onChange?.({\n target: input,\n currentTarget: input,\n } as ChangeEvent<HTMLInputElement>);\n\n input.focus();\n }, [disabled, isControlled, onChange, onClear]);\n\n const showClearButton = hasValue && !disabled;\n\n const sizeClass = styles[`searchInput--size-${toKebab(size)}`];\n const labelFloatedClass =\n label != null && labelFloated ? styles['searchInput--label-floated'] : '';\n const hasLeadingClass = styles['searchInput--has-leading-icon'];\n const hasTrailingClass = showClearButton\n ? styles['searchInput--has-trailing-icon']\n : '';\n const iconSize = ICON_SIZE_MAP[size];\n\n const rootClass = [\n styles.searchInput,\n sizeClass,\n labelFloatedClass,\n hasLeadingClass,\n hasTrailingClass,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass}>\n <div className={styles.searchInput__wrapper}>\n {label != null && (\n <label className={styles.searchInput__label} htmlFor={id}>\n {label}\n </label>\n )}\n <div className={styles.searchInput__inner}>\n <span className={styles.searchInput__leadingIcon} aria-hidden>\n <Icon size={iconSize} glyph={<MagnifyIcon />} />\n </span>\n <input\n ref={setInputRef}\n id={id}\n type=\"search\"\n className={styles.searchInput__input}\n value={isControlled ? valueProp : undefined}\n defaultValue={isControlled ? undefined : defaultValue}\n placeholder={placeholder}\n disabled={disabled}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n {...rest}\n />\n {showClearButton && (\n <span className={styles.searchInput__trailingIcon}>\n <button\n type=\"button\"\n className={styles.searchInput__clearButton}\n onClick={handleClear}\n aria-label=\"Clear search\"\n tabIndex={-1}\n >\n <Icon size={iconSize} glyph={<CloseCircleIcon />} />\n </button>\n </span>\n )}\n </div>\n </div>\n </div>\n );\n },\n);\n\nexport default SearchInput;\n"],"names":["ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","onClear","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","rest","ref","generatedId","useId","id","inputRef","useRef","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","handleBlur","handleChange","setInputRef","node","handleClear","_a","input","showClearButton","sizeClass","styles","toKebab","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","rootClass","jsx","jsxs","Icon","MagnifyIcon","CloseCircleIcon"],"mappings":"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"}
1	+ {"version":3,"file":"SearchInput.cjs","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import type {\n ChangeEvent,\n InputHTMLAttributes,\n KeyboardEvent,\n ReactNode,\n} from 'react';\nimport {\n forwardRef,\n useId,\n useState,\n useCallback,\n useRef,\n} from 'react';\nimport { toKebab } from '@/utils/string';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport MagnifyIcon from '@mattermost/compass-icons/components/magnify';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport styles from './SearchInput.module.scss';\n\nexport type SearchInputSize = 'small' \| 'medium' \| 'large';\n\nconst ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n small: '12',\n medium: '16',\n large: '20',\n};\n\nconst CLEAR_ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n small: '12',\n medium: '16',\n large: '16',\n};\n\nexport interface SearchInputProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'size' \| 'type'\n> {\n /** Optional CSS class name. /\n className?: string;\n /* When true, shows invalid/error styling. /\n invalid?: boolean;\n /* Floating label (placeholder-style). Floats above border when filled. /\n label?: ReactNode;\n /* Size variant. Default: Medium. /\n size?: SearchInputSize;\n /* Called when the clear button is pressed. Omit to use built-in clearing. /\n onClear?: () => void;\n}\n\n/\n Search Inputs are the entry point to filtering or finding content — global search, channel\n * switcher, member picker, file finder. They look like a text input with a leading magnifier\n * so the affordance is obvious before the user reads a single word.\n */\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n function SearchInput(\n {\n className = '',\n size = 'medium',\n label,\n invalid = false,\n onClear,\n id: idProp,\n value: valueProp,\n defaultValue,\n placeholder,\n onFocus,\n onBlur,\n onChange,\n disabled,\n onKeyDown,\n ...rest\n },\n ref,\n ) {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const inputRef = useRef<HTMLInputElement>(null);\n\n const isControlled = valueProp !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState(\n defaultValue ?? '',\n );\n const value = isControlled ? (valueProp as string) : uncontrolledValue;\n const hasValue = value != null && value !== '';\n\n const [isFocused, setIsFocused] = useState(false);\n const labelFloated = isFocused \|\| hasValue;\n\n const handleFocus = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n setIsFocused(true);\n onFocus?.(e);\n },\n [onFocus],\n );\n const handleBlur = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n setIsFocused(false);\n onBlur?.(e);\n },\n [onBlur],\n );\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) setUncontrolledValue(e.target.value);\n onChange?.(e);\n },\n [isControlled, onChange],\n );\n\n const setInputRef = useCallback(\n (node: HTMLInputElement \| null) => {\n inputRef.current = node;\n if (typeof ref === 'function') {\n ref(node);\n } else if (ref) {\n ref.current = node;\n }\n },\n [ref],\n );\n\n const handleClear = useCallback(() => {\n if (disabled) return;\n\n if (onClear) {\n onClear();\n inputRef.current?.focus();\n return;\n }\n\n const input = inputRef.current;\n if (input == null) return;\n\n input.value = '';\n if (!isControlled) setUncontrolledValue('');\n\n onChange?.({\n target: input,\n currentTarget: input,\n } as ChangeEvent<HTMLInputElement>);\n\n input.focus();\n }, [disabled, isControlled, onChange, onClear]);\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(e);\n if (e.defaultPrevented \|\| disabled) return;\n if (e.key === 'Escape' && hasValue) {\n e.preventDefault();\n handleClear();\n }\n },\n [disabled, handleClear, hasValue, onKeyDown],\n );\n\n const showClearButton = hasValue && !disabled;\n\n const sizeClass = styles[`search-input--size-${toKebab(size)}`];\n const invalidClass = invalid ? styles['search-input--invalid'] : '';\n const labelFloatedClass =\n label != null && labelFloated ? styles['search-input--label-floated'] : '';\n const hasLeadingClass = styles['search-input--has-leading-icon'];\n const hasTrailingClass = showClearButton\n ? styles['search-input--has-trailing-icon']\n : '';\n const iconSize = ICON_SIZE_MAP[size];\n const clearIconSize = CLEAR_ICON_SIZE_MAP[size];\n\n const rootClass = [\n styles['search-input'],\n sizeClass,\n invalidClass,\n labelFloatedClass,\n hasLeadingClass,\n hasTrailingClass,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass}>\n <div className={styles['search-input__wrapper']}>\n {label != null && (\n <label className={styles['search-input__label']} htmlFor={id}>\n {label}\n </label>\n )}\n <div className={styles['search-input__inner']}>\n <span className={styles['search-input__leading-icon']} aria-hidden>\n <Icon size={iconSize} glyph={<MagnifyIcon />} />\n </span>\n <input\n ref={setInputRef}\n id={id}\n type=\"search\"\n className={styles['search-input__input']}\n value={isControlled ? valueProp : undefined}\n defaultValue={isControlled ? undefined : defaultValue}\n placeholder={placeholder}\n disabled={disabled}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n aria-invalid={invalid ? true : undefined}\n {...rest}\n />\n {showClearButton && (\n <span className={styles['search-input__trailing-icon']}>\n <button\n type=\"button\"\n className={styles['search-input__clear-button']}\n onClick={handleClear}\n aria-label=\"Clear search\"\n tabIndex={-1}\n >\n <Icon size={clearIconSize} glyph={<CloseCircleIcon />} />\n </button>\n </span>\n )}\n </div>\n </div>\n </div>\n );\n },\n);\n\nexport default SearchInput;\n"],"names":["ICON_SIZE_MAP","CLEAR_ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","invalid","onClear","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","onKeyDown","rest","ref","generatedId","useId","id","inputRef","useRef","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","handleBlur","handleChange","setInputRef","node","handleClear","_a","input","handleKeyDown","showClearButton","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","clearIconSize","rootClass","jsx","jsxs","Icon","MagnifyIcon","CloseCircleIcon"],"mappings":"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"}

package/dist/components/search-input/SearchInput.d.ts CHANGED Viewed

@@ -3,6 +3,8 @@ export type SearchInputSize = 'small' | 'medium' | 'large';
 export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     /** Optional CSS class name. */
     className?: string;
+    /** When true, shows invalid/error styling. */
+    invalid?: boolean;
     /** Floating label (placeholder-style). Floats above border when filled. */
     label?: ReactNode;
     /** Size variant. Default: Medium. */

package/dist/components/search-input/SearchInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,~~EAAe~~,mBAAmB,~~EAAE~~,SAAS,~~EAAE~~,MAAM,OAAO,CAAC;~~AAezE~~,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;~~AAQ3D~~,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;GAIG;AACH,QAAA,MAAM,WAAW,+~~GA4JhB~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,mBAAmB,EAEnB,SAAS,EACV,MAAM,OAAO,CAAC;AAef,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAc3D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;GAIG;AACH,QAAA,MAAM,WAAW,+GA+KhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/search-input/SearchInput.js CHANGED Viewed

@@ -1,102 +1,116 @@
 import { jsx as s, jsxs as x } from "react/jsx-runtime";
-import { forwardRef as D, useId as G, useRef as H, useState as z, useCallback as n } from "react";
-import { toKebab as J } from "../../utils/string.js";
-import R from "../icon/Icon.js";
-import __Q from "@mattermost/compass-icons/components/magnify.js";const Q=__Q&&__Q.default?__Q.default:__Q;
-import __W from "@mattermost/compass-icons/components/close-circle.js";const W=__W&&__W.default?__W.default:__W;
+import { forwardRef as Y, useId as B, useRef as D, useState as z, useCallback as i } from "react";
+import { toKebab as K } from "../../utils/string.js";
+import E from "../icon/Icon.js";
+import __tt from "@mattermost/compass-icons/components/magnify.js";const tt=__tt&&__tt.default?__tt.default:__tt;
+import __et from "@mattermost/compass-icons/components/close-circle.js";const et=__et&&__et.default?__et.default:__et;
 import e from "./SearchInput.module.scss.js";
-const X = {
+const st = {
   small: "12",
   medium: "16",
   large: "20"
-}, nt = D(
+}, at = {
+  small: "12",
+  medium: "16",
+  large: "16"
+}, dt = Y(
   function({
     className: j = "",
-    size: m = "medium",
-    label: u,
-    onClear: p,
-    id: w,
-    value: d,
-    defaultValue: f,
-    placeholder: C,
-    onFocus: r,
-    onBlur: i,
+    size: d = "medium",
+    label: f,
+    invalid: v = !1,
+    onClear: m,
+    id: k,
+    value: h,
+    defaultValue: N,
+    placeholder: A,
+    onFocus: n,
+    onBlur: u,
     onChange: a,
-    disabled: o,
-    ...V
-  }, l) {
-    const k = G(), I = w ?? k, h = H(null), c = d !== void 0, [F, _] = z(
-      f ?? ""
-    ), v = c ? d : F, N = v != null && v !== "", [M, b] = z(!1), T = M || N, A = n(
+    disabled: l,
+    onKeyDown: o,
+    ...M
+  }, r) {
+    const V = B(), S = k ?? V, _ = D(null), c = h !== void 0, [F, b] = z(
+      N ?? ""
+    ), g = c ? h : F, p = g != null && g !== "", [L, C] = z(!1), O = L || p, T = i(
       (t) => {
-        b(!0), r == null || r(t);
+        C(!0), n == null || n(t);
       },
-      [r]
-    ), E = n(
+      [n]
+    ), Z = i(
       (t) => {
-        b(!1), i == null || i(t);
+        C(!1), u == null || u(t);
       },
-      [i]
-    ), K = n(
+      [u]
+    ), P = i(
       (t) => {
-        c || _(t.target.value), a == null || a(t);
+        c || b(t.target.value), a == null || a(t);
       },
       [c, a]
-    ), L = n(
+    ), U = i(
       (t) => {
-        h.current = t, typeof l == "function" ? l(t) : l && (l.current = t);
+        _.current = t, typeof r == "function" ? r(t) : r && (r.current = t);
       },
-      [l]
-    ), O = n(() => {
-      var S;
-      if (o) return;
-      if (p) {
-        p(), (S = h.current) == null || S.focus();
+      [r]
+    ), I = i(() => {
+      var R;
+      if (l) return;
+      if (m) {
+        m(), (R = _.current) == null || R.focus();
         return;
       }
-      const t = h.current;
-      t != null && (t.value = "", c || _(""), a == null || a({
+      const t = _.current;
+      t != null && (t.value = "", c || b(""), a == null || a({
         target: t,
         currentTarget: t
       }), t.focus());
-    }, [o, c, a, p]), y = N && !o, U = e[`searchInput--size-${J(m)}`], Z = u != null && T ? e["searchInput--label-floated"] : "", $ = e["searchInput--has-leading-icon"], q = y ? e["searchInput--has-trailing-icon"] : "", g = X[m], B = [
-      e.searchInput,
-      U,
-      Z,
-      $,
+    }, [l, c, a, m]), $ = i(
+      (t) => {
+        o == null || o(t), !(t.defaultPrevented || l) && t.key === "Escape" && p && (t.preventDefault(), I());
+      },
+      [l, I, p, o]
+    ), y = p && !l, q = e[`search-input--size-${K(d)}`], w = v ? e["search-input--invalid"] : "", G = f != null && O ? e["search-input--label-floated"] : "", H = e["search-input--has-leading-icon"], J = y ? e["search-input--has-trailing-icon"] : "", Q = st[d], W = at[d], X = [
+      e["search-input"],
       q,
+      w,
+      G,
+      H,
+      J,
       j
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ s("div", { className: B, children: /* @__PURE__ */ x("div", { className: e.searchInput__wrapper, children: [
-      u != null && /* @__PURE__ */ s("label", { className: e.searchInput__label, htmlFor: I, children: u }),
-      /* @__PURE__ */ x("div", { className: e.searchInput__inner, children: [
-        /* @__PURE__ */ s("span", { className: e.searchInput__leadingIcon, "aria-hidden": !0, children: /* @__PURE__ */ s(R, { size: g, glyph: /* @__PURE__ */ s(Q, {}) }) }),
+    return /* @__PURE__ */ s("div", { className: X, children: /* @__PURE__ */ x("div", { className: e["search-input__wrapper"], children: [
+      f != null && /* @__PURE__ */ s("label", { className: e["search-input__label"], htmlFor: S, children: f }),
+      /* @__PURE__ */ x("div", { className: e["search-input__inner"], children: [
+        /* @__PURE__ */ s("span", { className: e["search-input__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ s(E, { size: Q, glyph: /* @__PURE__ */ s(tt, {}) }) }),
         /* @__PURE__ */ s(
           "input",
           {
-            ref: L,
-            id: I,
+            ref: U,
+            id: S,
             type: "search",
-            className: e.searchInput__input,
-            value: c ? d : void 0,
-            defaultValue: c ? void 0 : f,
-            placeholder: C,
-            disabled: o,
-            onFocus: A,
-            onBlur: E,
-            onChange: K,
-            ...V
+            className: e["search-input__input"],
+            value: c ? h : void 0,
+            defaultValue: c ? void 0 : N,
+            placeholder: A,
+            disabled: l,
+            onFocus: T,
+            onBlur: Z,
+            onChange: P,
+            onKeyDown: $,
+            "aria-invalid": v ? !0 : void 0,
+            ...M
           }
         ),
-        y && /* @__PURE__ */ s("span", { className: e.searchInput__trailingIcon, children: /* @__PURE__ */ s(
+        y && /* @__PURE__ */ s("span", { className: e["search-input__trailing-icon"], children: /* @__PURE__ */ s(
           "button",
           {
             type: "button",
-            className: e.searchInput__clearButton,
-            onClick: O,
+            className: e["search-input__clear-button"],
+            onClick: I,
             "aria-label": "Clear search",
             tabIndex: -1,
-            children: /* @__PURE__ */ s(R, { size: g, glyph: /* @__PURE__ */ s(W, {}) })
+            children: /* @__PURE__ */ s(E, { size: W, glyph: /* @__PURE__ */ s(et, {}) })
           }
         ) })
       ] })
@@ -104,6 +118,6 @@ const X = {
   }
 );
 export {
-  nt as default
+  dt as default
 };
 //# sourceMappingURL=SearchInput.js.map