@mattermost/compass-ui 0.1.0-alpha.2 → 0.1.0-alpha.20

package/dist/components/divider/Divider.module.scss.js.map

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

package/dist/components/divider/index.cjs

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

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

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

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

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

package/dist/components/divider/index.js

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

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

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

package/dist/components/dropdown/Dropdown.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),x=require("../button/Button.cjs"),j=require("../../utils/string.cjs"),s=require("../icon/Icon.cjs"),__g=require("@mattermost/compass-icons/components/chevron-down.js"),g=__g?.default??__g,e=require("./Dropdown.module.scss.cjs");function v({className:d="",children:t,leadingIcon:n,padding:r="tight",size:l="medium",appearance:i="default",isOpen:o=!1,disabled:u,type:c="button",...p}){const f=e.default[`dropdown--size-${j.toKebab(l)}`],m=r==="compact"?e.default["dropdown--padding-compact"]:"",h=i==="inverted"?e.default["dropdown--appearance-inverted"]:"",_=o?e.default["dropdown--open"]:"",w=[e.default.dropdown,f,m,h,_,d].filter(Boolean).join(" ");return a.jsx(x.default,{className:w,emphasis:"quaternary",size:"medium",type:c,disabled:u,"aria-expanded":o,"aria-haspopup":"listbox",...p,children:a.jsxs("span",{className:e.default.dropdown__trigger,children:[a.jsxs("span",{className:e.default.dropdown__content,children:[n!=null&&a.jsx("span",{className:e.default["dropdown__leading-icon"],"aria-hidden":!0,children:a.jsx(s.IconSlotContext.Provider,{value:{size:"16"},children:n})}),a.jsx("span",{className:e.default.dropdown__label,children:t})]}),a.jsx("span",{className:e.default.dropdown__chevron,"aria-hidden":!0,children:a.jsx(s.default,{size:"12",glyph:a.jsx(g,{})})})]})})}exports.default=v;
+//# sourceMappingURL=Dropdown.cjs.map

package/dist/components/dropdown/Dropdown.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport { toKebab } from '@/utils/string';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport styles from './Dropdown.module.scss';\n\nexport type DropdownSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';\nexport type DropdownAppearance = 'default' | 'inverted';\nexport type DropdownPadding = 'tight' | 'compact';\n\nexport interface DropdownProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'size'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Label text shown in the trigger. */\n  children: ReactNode;\n  /** Optional leading icon — pass `<Icon glyph={<SomeIcon />} />`; Dropdown provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  /** Trigger inset. Tight is default; Compact adds more padding (Figma). Default: Tight. */\n  padding?: DropdownPadding;\n  /** Size variant. Default: Medium. */\n  size?: DropdownSize;\n  /** Light or dark background context. Default: Default. */\n  appearance?: DropdownAppearance;\n  /** When true, the dropdown is in an open/active state. */\n  isOpen?: boolean;\n}\n\n/**\n * A Dropdown is a heading-weight trigger that opens a Popover Menu. It reads as a title —\n * semibold, with a chevron — and signals \"this label is also a control.\"\n */\nexport default function Dropdown({\n  className = '',\n  children,\n  leadingIcon,\n  padding = 'tight',\n  size = 'medium',\n  appearance = 'default',\n  isOpen = false,\n  disabled,\n  type = 'button',\n  ...rest\n}: DropdownProps) {\n  const sizeClass = styles[`dropdown--size-${toKebab(size)}`];\n  const paddingClass =\n    padding === 'compact' ? styles['dropdown--padding-compact'] : '';\n  const appearanceClass =\n    appearance === 'inverted' ? styles['dropdown--appearance-inverted'] : '';\n  const openClass = isOpen ? styles['dropdown--open'] : '';\n\n  const rootClass = [\n    styles.dropdown,\n    sizeClass,\n    paddingClass,\n    appearanceClass,\n    openClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Button\n      className={rootClass}\n      emphasis=\"quaternary\"\n      size=\"medium\"\n      type={type}\n      disabled={disabled}\n      aria-expanded={isOpen}\n      aria-haspopup=\"listbox\"\n      {...rest}\n    >\n      <span className={styles.dropdown__trigger}>\n        <span className={styles.dropdown__content}>\n          {leadingIcon != null && (\n            <span className={styles['dropdown__leading-icon']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingIcon}\n              </IconSlotContext.Provider>\n            </span>\n          )}\n          <span className={styles.dropdown__label}>{children}</span>\n        </span>\n        <span className={styles.dropdown__chevron} aria-hidden>\n          <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n        </span>\n      </span>\n    </Button>\n  );\n}\n"],"names":["Dropdown","className","children","leadingIcon","padding","size","appearance","isOpen","disabled","type","rest","sizeClass","styles","toKebab","paddingClass","appearanceClass","openClass","rootClass","jsx","Button","jsxs","IconSlotContext","Icon","ChevronDownIcon"],"mappings":"4VAoCA,SAAwBA,EAAS,CAC/B,UAAAC,EAAY,GACZ,SAAAC,EACA,YAAAC,EACA,QAAAC,EAAU,QACV,KAAAC,EAAO,SACP,WAAAC,EAAa,UACb,OAAAC,EAAS,GACT,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAkB,CAChB,MAAMC,EAAYC,EAAAA,QAAO,kBAAkBC,EAAAA,QAAQR,CAAI,CAAC,EAAE,EACpDS,EACJV,IAAY,UAAYQ,EAAAA,QAAO,2BAA2B,EAAI,GAC1DG,EACJT,IAAe,WAAaM,EAAAA,QAAO,+BAA+B,EAAI,GAClEI,EAAYT,EAASK,UAAO,gBAAgB,EAAI,GAEhDK,EAAY,CAChBL,EAAAA,QAAO,SACPD,EACAG,EACAC,EACAC,EACAf,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEiB,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWF,EACX,SAAS,aACT,KAAK,SACL,KAAAR,EACA,SAAAD,EACA,gBAAeD,EACf,gBAAc,UACb,GAAGG,EAEJ,SAAAU,EAAAA,KAAC,OAAA,CAAK,UAAWR,EAAAA,QAAO,kBACtB,SAAA,CAAAQ,EAAAA,KAAC,OAAA,CAAK,UAAWR,EAAAA,QAAO,kBACrB,SAAA,CAAAT,GAAe,MACde,EAAAA,IAAC,OAAA,CAAK,UAAWN,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAC5D,eAACS,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,EAEFH,EAAAA,IAAC,OAAA,CAAK,UAAWN,EAAAA,QAAO,gBAAkB,SAAAV,CAAA,CAAS,CAAA,EACrD,EACAgB,MAAC,OAAA,CAAK,UAAWN,EAAAA,QAAO,kBAAmB,cAAW,GACpD,SAAAM,EAAAA,IAACI,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOJ,EAAAA,IAACK,EAAA,CAAA,CAAgB,EAAI,CAAA,CAC9C,CAAA,CAAA,CACF,CAAA,CAAA,CAGN"}

package/dist/components/dropdown/Dropdown.css

@@ -0,0 +1 @@
+._dropdown_1v31c_2{display:inline-flex;align-items:center;background:transparent;border:0;border-radius:var(--radius-s);cursor:pointer;font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);color:var(--center-channel-color);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:background-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);padding:0}._dropdown_1v31c_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._dropdown_1v31c_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._dropdown_1v31c_2:active:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.12)}._dropdown_1v31c_2:disabled{opacity:.56;cursor:not-allowed}._dropdown_1v31c_2 .button__label{display:contents}._dropdown__trigger_1v31c_34{display:inline-flex;align-items:center}._dropdown__content_1v31c_38{display:inline-flex;align-items:center;flex-shrink:0}._dropdown__leading-icon_1v31c_43{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}._dropdown__label_1v31c_50{white-space:nowrap;color:inherit}._dropdown__chevron_1v31c_54{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit;transition:transform var(--duration-quick) var(--ease-transition)}._dropdown__chevron_1v31c_54 svg{display:block;width:var(--icon-size-12);height:var(--icon-size-12)}._dropdown--open_1v31c_67 ._dropdown__chevron_1v31c_54{transform:rotate(180deg)}._dropdown--size-x-small_1v31c_70{padding-left:var(--spacing-xxxs);padding-right:var(--spacing-xxxxs)}._dropdown--size-x-small_1v31c_70 ._dropdown__trigger_1v31c_34,._dropdown--size-x-small_1v31c_70 ._dropdown__content_1v31c_38{gap:var(--spacing-xxxs)}._dropdown--size-x-small_1v31c_70 ._dropdown__label_1v31c_50{font-size:var(--font-size-50);line-height:var(--line-height-50);letter-spacing:.01em}._dropdown--size-x-small_1v31c_70 ._dropdown__leading-icon_1v31c_43 svg{width:var(--icon-size-12);height:var(--icon-size-12)}._dropdown--size-small_1v31c_89{padding:var(--spacing-xxxxs) var(--spacing-xxxxs) var(--spacing-xxxxs) var(--spacing-xxxs)}._dropdown--size-small_1v31c_89 ._dropdown__trigger_1v31c_34,._dropdown--size-small_1v31c_89 ._dropdown__content_1v31c_38{gap:var(--spacing-xxxs)}._dropdown--size-small_1v31c_89 ._dropdown__label_1v31c_50{font-size:var(--font-size-75);line-height:var(--line-height-75)}._dropdown--size-small_1v31c_89 ._dropdown__leading-icon_1v31c_43 svg{width:var(--icon-size-12);height:var(--icon-size-12)}._dropdown--size-medium_1v31c_106{padding:var(--spacing-xxxxs) var(--spacing-xxxxs) var(--spacing-xxxxs) var(--spacing-xxxs)}._dropdown--size-medium_1v31c_106 ._dropdown__trigger_1v31c_34{gap:var(--spacing-xxxs)}._dropdown--size-medium_1v31c_106 ._dropdown__content_1v31c_38{gap:var(--spacing-xs)}._dropdown--size-medium_1v31c_106 ._dropdown__label_1v31c_50{font-size:var(--font-size-100);line-height:var(--line-height-100)}._dropdown--size-medium_1v31c_106 ._dropdown__chevron_1v31c_54 svg{width:var(--icon-size-16);height:var(--icon-size-16)}._dropdown--size-medium_1v31c_106 ._dropdown__leading-icon_1v31c_43 svg{width:var(--icon-size-16);height:var(--icon-size-16)}._dropdown--size-medium_1v31c_106._dropdown--padding-compact_1v31c_127{padding:var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-xs)}._dropdown--size-large_1v31c_130{padding:var(--spacing-xxxxs) var(--spacing-xxxs) var(--spacing-xxxxs) var(--spacing-xxs)}._dropdown--size-large_1v31c_130 ._dropdown__trigger_1v31c_34{gap:var(--spacing-xxxs)}._dropdown--size-large_1v31c_130 ._dropdown__content_1v31c_38{gap:var(--spacing-s)}._dropdown--size-large_1v31c_130 ._dropdown__label_1v31c_50{font-family:var(--font-family-heading);font-size:var(--font-size-200);line-height:var(--line-height-200)}._dropdown--size-large_1v31c_130 ._dropdown__chevron_1v31c_54 svg{width:var(--icon-size-16);height:var(--icon-size-16)}._dropdown--size-x-large_1v31c_148{padding:0 var(--spacing-xxs) 0 var(--spacing-xs)}._dropdown--size-x-large_1v31c_148 ._dropdown__trigger_1v31c_34{gap:var(--spacing-xxxs)}._dropdown--size-x-large_1v31c_148 ._dropdown__content_1v31c_38{gap:var(--spacing-s)}._dropdown--size-x-large_1v31c_148 ._dropdown__label_1v31c_50{font-family:var(--font-family-heading);font-size:var(--font-size-700);line-height:var(--line-height-700)}._dropdown--size-x-large_1v31c_148 ._dropdown__chevron_1v31c_54 svg{width:var(--icon-size-20);height:var(--icon-size-20)}._dropdown--appearance-inverted_1v31c_166{color:var(--sidebar-text)}._dropdown--appearance-inverted_1v31c_166:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._dropdown--appearance-inverted_1v31c_166:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}

package/dist/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,26 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type DropdownSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+export type DropdownAppearance = 'default' | 'inverted';
+export type DropdownPadding = 'tight' | 'compact';
+export interface DropdownProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
+    /** Optional CSS class name. */
+    className?: string;
+    /** Label text shown in the trigger. */
+    children: ReactNode;
+    /** Optional leading icon — pass `<Icon glyph={<SomeIcon />} />`; Dropdown provides the correct size via context. */
+    leadingIcon?: ReactNode;
+    /** Trigger inset. Tight is default; Compact adds more padding (Figma). Default: Tight. */
+    padding?: DropdownPadding;
+    /** Size variant. Default: Medium. */
+    size?: DropdownSize;
+    /** Light or dark background context. Default: Default. */
+    appearance?: DropdownAppearance;
+    /** When true, the dropdown is in an open/active state. */
+    isOpen?: boolean;
+}
+/**
+ * A Dropdown is a heading-weight trigger that opens a Popover Menu. It reads as a title —
+ * semibold, with a chevron — and signals "this label is also a control."
+ */
+export default function Dropdown({ className, children, leadingIcon, padding, size, appearance, isOpen, disabled, type, ...rest }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/components/dropdown/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ7D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAChF,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,CAAC;AAElD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,CACP;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,oHAAoH;IACpH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,qCAAqC;IACrC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,SAAc,EACd,QAAQ,EACR,WAAW,EACX,OAAiB,EACjB,IAAe,EACf,UAAsB,EACtB,MAAc,EACd,QAAQ,EACR,IAAe,EACf,GAAG,IAAI,EACR,EAAE,aAAa,2CA+Cf"}

package/dist/components/dropdown/Dropdown.js

@@ -0,0 +1,51 @@
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import C from "../button/Button.js";
+import { toKebab as g } from "../../utils/string.js";
+import v, { IconSlotContext as x } from "../icon/Icon.js";
+import __N from "@mattermost/compass-icons/components/chevron-down.js";const N=__N&&__N.default?__N.default:__N;
+import o from "./Dropdown.module.scss.js";
+function I({
+  className: s = "",
+  children: d,
+  leadingIcon: a,
+  padding: t = "tight",
+  size: p = "medium",
+  appearance: i = "default",
+  isOpen: e = !1,
+  disabled: l,
+  type: c = "button",
+  ...m
+}) {
+  const h = o[`dropdown--size-${g(p)}`], u = t === "compact" ? o["dropdown--padding-compact"] : "", w = i === "inverted" ? o["dropdown--appearance-inverted"] : "", f = e ? o["dropdown--open"] : "", _ = [
+    o.dropdown,
+    h,
+    u,
+    w,
+    f,
+    s
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n(
+    C,
+    {
+      className: _,
+      emphasis: "quaternary",
+      size: "medium",
+      type: c,
+      disabled: l,
+      "aria-expanded": e,
+      "aria-haspopup": "listbox",
+      ...m,
+      children: /* @__PURE__ */ r("span", { className: o.dropdown__trigger, children: [
+        /* @__PURE__ */ r("span", { className: o.dropdown__content, children: [
+          a != null && /* @__PURE__ */ n("span", { className: o["dropdown__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ n(x.Provider, { value: { size: "16" }, children: a }) }),
+          /* @__PURE__ */ n("span", { className: o.dropdown__label, children: d })
+        ] }),
+        /* @__PURE__ */ n("span", { className: o.dropdown__chevron, "aria-hidden": !0, children: /* @__PURE__ */ n(v, { size: "12", glyph: /* @__PURE__ */ n(N, {}) }) })
+      ] })
+    }
+  );
+}
+export {
+  I as default
+};
+//# sourceMappingURL=Dropdown.js.map

package/dist/components/dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport { toKebab } from '@/utils/string';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport styles from './Dropdown.module.scss';\n\nexport type DropdownSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';\nexport type DropdownAppearance = 'default' | 'inverted';\nexport type DropdownPadding = 'tight' | 'compact';\n\nexport interface DropdownProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'size'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Label text shown in the trigger. */\n  children: ReactNode;\n  /** Optional leading icon — pass `<Icon glyph={<SomeIcon />} />`; Dropdown provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  /** Trigger inset. Tight is default; Compact adds more padding (Figma). Default: Tight. */\n  padding?: DropdownPadding;\n  /** Size variant. Default: Medium. */\n  size?: DropdownSize;\n  /** Light or dark background context. Default: Default. */\n  appearance?: DropdownAppearance;\n  /** When true, the dropdown is in an open/active state. */\n  isOpen?: boolean;\n}\n\n/**\n * A Dropdown is a heading-weight trigger that opens a Popover Menu. It reads as a title —\n * semibold, with a chevron — and signals \"this label is also a control.\"\n */\nexport default function Dropdown({\n  className = '',\n  children,\n  leadingIcon,\n  padding = 'tight',\n  size = 'medium',\n  appearance = 'default',\n  isOpen = false,\n  disabled,\n  type = 'button',\n  ...rest\n}: DropdownProps) {\n  const sizeClass = styles[`dropdown--size-${toKebab(size)}`];\n  const paddingClass =\n    padding === 'compact' ? styles['dropdown--padding-compact'] : '';\n  const appearanceClass =\n    appearance === 'inverted' ? styles['dropdown--appearance-inverted'] : '';\n  const openClass = isOpen ? styles['dropdown--open'] : '';\n\n  const rootClass = [\n    styles.dropdown,\n    sizeClass,\n    paddingClass,\n    appearanceClass,\n    openClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Button\n      className={rootClass}\n      emphasis=\"quaternary\"\n      size=\"medium\"\n      type={type}\n      disabled={disabled}\n      aria-expanded={isOpen}\n      aria-haspopup=\"listbox\"\n      {...rest}\n    >\n      <span className={styles.dropdown__trigger}>\n        <span className={styles.dropdown__content}>\n          {leadingIcon != null && (\n            <span className={styles['dropdown__leading-icon']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingIcon}\n              </IconSlotContext.Provider>\n            </span>\n          )}\n          <span className={styles.dropdown__label}>{children}</span>\n        </span>\n        <span className={styles.dropdown__chevron} aria-hidden>\n          <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n        </span>\n      </span>\n    </Button>\n  );\n}\n"],"names":["Dropdown","className","children","leadingIcon","padding","size","appearance","isOpen","disabled","type","rest","sizeClass","styles","toKebab","paddingClass","appearanceClass","openClass","rootClass","jsx","Button","jsxs","IconSlotContext","Icon","ChevronDownIcon"],"mappings":";;;;;;AAoCA,SAAwBA,EAAS;AAAA,EAC/B,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,YAAAC,IAAa;AAAA,EACb,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAYC,EAAO,kBAAkBC,EAAQR,CAAI,CAAC,EAAE,GACpDS,IACJV,MAAY,YAAYQ,EAAO,2BAA2B,IAAI,IAC1DG,IACJT,MAAe,aAAaM,EAAO,+BAA+B,IAAI,IAClEI,IAAYT,IAASK,EAAO,gBAAgB,IAAI,IAEhDK,IAAY;AAAA,IAChBL,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAC;AAAA,IACAf;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAiB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,UAAS;AAAA,MACT,MAAK;AAAA,MACL,MAAAR;AAAA,MACA,UAAAD;AAAA,MACA,iBAAeD;AAAA,MACf,iBAAc;AAAA,MACb,GAAGG;AAAA,MAEJ,UAAA,gBAAAU,EAAC,QAAA,EAAK,WAAWR,EAAO,mBACtB,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWR,EAAO,mBACrB,UAAA;AAAA,UAAAT,KAAe,QACd,gBAAAe,EAAC,QAAA,EAAK,WAAWN,EAAO,wBAAwB,GAAG,eAAW,IAC5D,4BAACS,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,aACH,GACF;AAAA,UAEF,gBAAAH,EAAC,QAAA,EAAK,WAAWN,EAAO,iBAAkB,UAAAV,EAAA,CAAS;AAAA,QAAA,GACrD;AAAA,QACA,gBAAAgB,EAAC,QAAA,EAAK,WAAWN,EAAO,mBAAmB,eAAW,IACpD,UAAA,gBAAAM,EAACI,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAJ,EAACK,GAAA,CAAA,CAAgB,GAAI,EAAA,CAC9C;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/dropdown/Dropdown.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Dropdown.css');const o="_dropdown_1v31c_2",d="_dropdown__trigger_1v31c_34",_="_dropdown__content_1v31c_38",n="_dropdown__label_1v31c_50",r="_dropdown__chevron_1v31c_54",e={dropdown:o,dropdown__trigger:d,dropdown__content:_,"dropdown__leading-icon":"_dropdown__leading-icon_1v31c_43",dropdown__label:n,dropdown__chevron:r,"dropdown--open":"_dropdown--open_1v31c_67","dropdown--size-x-small":"_dropdown--size-x-small_1v31c_70","dropdown--size-small":"_dropdown--size-small_1v31c_89","dropdown--size-medium":"_dropdown--size-medium_1v31c_106","dropdown--padding-compact":"_dropdown--padding-compact_1v31c_127","dropdown--size-large":"_dropdown--size-large_1v31c_130","dropdown--size-x-large":"_dropdown--size-x-large_1v31c_148","dropdown--appearance-inverted":"_dropdown--appearance-inverted_1v31c_166"};exports.default=e;exports.dropdown=o;exports.dropdown__chevron=r;exports.dropdown__content=_;exports.dropdown__label=n;exports.dropdown__trigger=d;
+//# sourceMappingURL=Dropdown.module.scss.cjs.map

package/dist/components/dropdown/Dropdown.module.scss.cjs.map

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

package/dist/components/dropdown/Dropdown.module.scss.js

@@ -0,0 +1,25 @@
+import './Dropdown.css';const o = "_dropdown_1v31c_2", d = "_dropdown__trigger_1v31c_34", _ = "_dropdown__content_1v31c_38", n = "_dropdown__label_1v31c_50", r = "_dropdown__chevron_1v31c_54", p = {
+  dropdown: o,
+  dropdown__trigger: d,
+  dropdown__content: _,
+  "dropdown__leading-icon": "_dropdown__leading-icon_1v31c_43",
+  dropdown__label: n,
+  dropdown__chevron: r,
+  "dropdown--open": "_dropdown--open_1v31c_67",
+  "dropdown--size-x-small": "_dropdown--size-x-small_1v31c_70",
+  "dropdown--size-small": "_dropdown--size-small_1v31c_89",
+  "dropdown--size-medium": "_dropdown--size-medium_1v31c_106",
+  "dropdown--padding-compact": "_dropdown--padding-compact_1v31c_127",
+  "dropdown--size-large": "_dropdown--size-large_1v31c_130",
+  "dropdown--size-x-large": "_dropdown--size-x-large_1v31c_148",
+  "dropdown--appearance-inverted": "_dropdown--appearance-inverted_1v31c_166"
+};
+export {
+  p as default,
+  o as dropdown,
+  r as dropdown__chevron,
+  _ as dropdown__content,
+  n as dropdown__label,
+  d as dropdown__trigger
+};
+//# sourceMappingURL=Dropdown.module.scss.js.map

package/dist/components/dropdown/Dropdown.module.scss.js.map

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

package/dist/components/dropdown/index.cjs

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

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

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

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

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

package/dist/components/dropdown/index.js

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

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

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

package/dist/components/emoji/Emoji.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),e=require("./Emoji.module.scss.cjs"),a={10:e.default["emoji--size-10"],12:e.default["emoji--size-12"],16:e.default["emoji--size-16"],20:e.default["emoji--size-20"],24:e.default["emoji--size-24"],28:e.default["emoji--size-28"],32:e.default["emoji--size-32"],40:e.default["emoji--size-40"],52:e.default["emoji--size-52"],64:e.default["emoji--size-64"],104:e.default["emoji--size-104"]};function d({className:i="",emoji:o,size:t="24"}){const s=a[t],l=[e.default.emoji,s,i].filter(Boolean).join(" ");return u.jsx("span",{className:l,role:"img","aria-hidden":!0,children:o})}exports.default=d;
+//# sourceMappingURL=Emoji.cjs.map

package/dist/components/emoji/Emoji.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.cjs","sources":["../../../src/components/emoji/Emoji.tsx"],"sourcesContent":["import styles from './Emoji.module.scss';\n\nexport type EmojiSize =\n  | '10'\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '52'\n  | '64'\n  | '104';\n\nexport interface EmojiProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Emoji character(s) to display (e.g. \"👍\", \"🎉\"). */\n  emoji: string;\n  /** Size from the Mattermost icon scale. Default 24. */\n  size?: EmojiSize;\n}\n\nconst SIZE_CLASS_MAP: Record<EmojiSize, string> = {\n  '10': styles['emoji--size-10'],\n  '12': styles['emoji--size-12'],\n  '16': styles['emoji--size-16'],\n  '20': styles['emoji--size-20'],\n  '24': styles['emoji--size-24'],\n  '28': styles['emoji--size-28'],\n  '32': styles['emoji--size-32'],\n  '40': styles['emoji--size-40'],\n  '52': styles['emoji--size-52'],\n  '64': styles['emoji--size-64'],\n  '104': styles['emoji--size-104'],\n};\n\n/**\n * Emoji is a compact, inline visual for conveying emotion, intent, or status — on messages,\n * in reactions, in pickers, or sprinkled through UI copy. The component standardises sizing\n * so native Unicode and custom workspace emoji render at a consistent footprint alongside\n * Icon.\n */\nexport default function Emoji({\n  className = '',\n  emoji,\n  size = '24',\n}: EmojiProps) {\n  const sizeClass = SIZE_CLASS_MAP[size];\n  const rootClass = [styles.emoji, sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={rootClass} role=\"img\" aria-hidden>\n      {emoji}\n    </span>\n  );\n}\n"],"names":["SIZE_CLASS_MAP","styles","Emoji","className","emoji","size","sizeClass","rootClass","jsx"],"mappings":"sLAwBMA,EAA4C,CAChD,GAAMC,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,GAAMA,EAAAA,QAAO,gBAAgB,EAC7B,IAAOA,EAAAA,QAAO,iBAAiB,CACjC,EAQA,SAAwBC,EAAM,CAC5B,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EAAO,IACT,EAAe,CACb,MAAMC,EAAYN,EAAeK,CAAI,EAC/BE,EAAY,CAACN,UAAO,MAAOK,EAAWH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEK,MAAC,QAAK,UAAWD,EAAW,KAAK,MAAM,cAAW,GAC/C,SAAAH,CAAA,CACH,CAEJ"}

package/dist/components/emoji/Emoji.css

@@ -0,0 +1 @@
+._emoji_1pc05_2{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}._emoji--size-10_1pc05_10{width:var(--icon-size-10);height:var(--icon-size-10);font-size:var(--icon-size-10)}._emoji--size-12_1pc05_15{width:var(--icon-size-12);height:var(--icon-size-12);font-size:var(--icon-size-12)}._emoji--size-16_1pc05_20{width:var(--icon-size-16);height:var(--icon-size-16);font-size:var(--icon-size-16)}._emoji--size-20_1pc05_25{width:var(--icon-size-20);height:var(--icon-size-20);font-size:var(--icon-size-20)}._emoji--size-24_1pc05_30{width:var(--icon-size-24);height:var(--icon-size-24);font-size:var(--icon-size-24)}._emoji--size-28_1pc05_35{width:var(--icon-size-28);height:var(--icon-size-28);font-size:var(--icon-size-28)}._emoji--size-32_1pc05_40{width:var(--icon-size-32);height:var(--icon-size-32);font-size:var(--icon-size-32)}._emoji--size-40_1pc05_45{width:var(--icon-size-40);height:var(--icon-size-40);font-size:var(--icon-size-40)}._emoji--size-52_1pc05_50{width:var(--icon-size-52);height:var(--icon-size-52);font-size:var(--icon-size-52)}._emoji--size-64_1pc05_55{width:var(--icon-size-64);height:var(--icon-size-64);font-size:var(--icon-size-64)}._emoji--size-104_1pc05_60{width:var(--icon-size-104);height:var(--icon-size-104);font-size:var(--icon-size-104)}

package/dist/components/emoji/Emoji.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.d.ts","sourceRoot":"","sources":["../../../src/components/emoji/Emoji.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GACjB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,CAAC;AAEV,MAAM,WAAW,UAAU;IACzB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAgBD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,SAAc,EACd,KAAK,EACL,IAAW,GACZ,EAAE,UAAU,2CAWZ"}

package/dist/components/emoji/Emoji.js

@@ -0,0 +1,27 @@
+import { jsx as r } from "react/jsx-runtime";
+import e from "./Emoji.module.scss.js";
+const t = {
+  10: e["emoji--size-10"],
+  12: e["emoji--size-12"],
+  16: e["emoji--size-16"],
+  20: e["emoji--size-20"],
+  24: e["emoji--size-24"],
+  28: e["emoji--size-28"],
+  32: e["emoji--size-32"],
+  40: e["emoji--size-40"],
+  52: e["emoji--size-52"],
+  64: e["emoji--size-64"],
+  104: e["emoji--size-104"]
+};
+function a({
+  className: i = "",
+  emoji: o,
+  size: s = "24"
+}) {
+  const m = t[s], j = [e.emoji, m, i].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("span", { className: j, role: "img", "aria-hidden": !0, children: o });
+}
+export {
+  a as default
+};
+//# sourceMappingURL=Emoji.js.map

package/dist/components/emoji/Emoji.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.js","sources":["../../../src/components/emoji/Emoji.tsx"],"sourcesContent":["import styles from './Emoji.module.scss';\n\nexport type EmojiSize =\n  | '10'\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '52'\n  | '64'\n  | '104';\n\nexport interface EmojiProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Emoji character(s) to display (e.g. \"👍\", \"🎉\"). */\n  emoji: string;\n  /** Size from the Mattermost icon scale. Default 24. */\n  size?: EmojiSize;\n}\n\nconst SIZE_CLASS_MAP: Record<EmojiSize, string> = {\n  '10': styles['emoji--size-10'],\n  '12': styles['emoji--size-12'],\n  '16': styles['emoji--size-16'],\n  '20': styles['emoji--size-20'],\n  '24': styles['emoji--size-24'],\n  '28': styles['emoji--size-28'],\n  '32': styles['emoji--size-32'],\n  '40': styles['emoji--size-40'],\n  '52': styles['emoji--size-52'],\n  '64': styles['emoji--size-64'],\n  '104': styles['emoji--size-104'],\n};\n\n/**\n * Emoji is a compact, inline visual for conveying emotion, intent, or status — on messages,\n * in reactions, in pickers, or sprinkled through UI copy. The component standardises sizing\n * so native Unicode and custom workspace emoji render at a consistent footprint alongside\n * Icon.\n */\nexport default function Emoji({\n  className = '',\n  emoji,\n  size = '24',\n}: EmojiProps) {\n  const sizeClass = SIZE_CLASS_MAP[size];\n  const rootClass = [styles.emoji, sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={rootClass} role=\"img\" aria-hidden>\n      {emoji}\n    </span>\n  );\n}\n"],"names":["SIZE_CLASS_MAP","styles","Emoji","className","emoji","size","sizeClass","rootClass","jsx"],"mappings":";;AAwBA,MAAMA,IAA4C;AAAA,EAChD,IAAMC,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,IAAMA,EAAO,gBAAgB;AAAA,EAC7B,KAAOA,EAAO,iBAAiB;AACjC;AAQA,SAAwBC,EAAM;AAAA,EAC5B,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,MAAAC,IAAO;AACT,GAAe;AACb,QAAMC,IAAYN,EAAeK,CAAI,GAC/BE,IAAY,CAACN,EAAO,OAAOK,GAAWH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAK,EAAC,UAAK,WAAWD,GAAW,MAAK,OAAM,eAAW,IAC/C,UAAAH,EAAA,CACH;AAEJ;"}

package/dist/components/emoji/Emoji.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Emoji.css');const e="_emoji_1pc05_2",i={emoji:e,"emoji--size-10":"_emoji--size-10_1pc05_10","emoji--size-12":"_emoji--size-12_1pc05_15","emoji--size-16":"_emoji--size-16_1pc05_20","emoji--size-20":"_emoji--size-20_1pc05_25","emoji--size-24":"_emoji--size-24_1pc05_30","emoji--size-28":"_emoji--size-28_1pc05_35","emoji--size-32":"_emoji--size-32_1pc05_40","emoji--size-40":"_emoji--size-40_1pc05_45","emoji--size-52":"_emoji--size-52_1pc05_50","emoji--size-64":"_emoji--size-64_1pc05_55","emoji--size-104":"_emoji--size-104_1pc05_60"};exports.default=i;exports.emoji=e;
+//# sourceMappingURL=Emoji.module.scss.cjs.map

package/dist/components/emoji/Emoji.module.scss.cjs.map

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

package/dist/components/emoji/Emoji.module.scss.js

@@ -0,0 +1,19 @@
+import './Emoji.css';const e = "_emoji_1pc05_2", i = {
+  emoji: e,
+  "emoji--size-10": "_emoji--size-10_1pc05_10",
+  "emoji--size-12": "_emoji--size-12_1pc05_15",
+  "emoji--size-16": "_emoji--size-16_1pc05_20",
+  "emoji--size-20": "_emoji--size-20_1pc05_25",
+  "emoji--size-24": "_emoji--size-24_1pc05_30",
+  "emoji--size-28": "_emoji--size-28_1pc05_35",
+  "emoji--size-32": "_emoji--size-32_1pc05_40",
+  "emoji--size-40": "_emoji--size-40_1pc05_45",
+  "emoji--size-52": "_emoji--size-52_1pc05_50",
+  "emoji--size-64": "_emoji--size-64_1pc05_55",
+  "emoji--size-104": "_emoji--size-104_1pc05_60"
+};
+export {
+  i as default,
+  e as emoji
+};
+//# sourceMappingURL=Emoji.module.scss.js.map

package/dist/components/emoji/Emoji.module.scss.js.map

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

package/dist/components/emoji/index.cjs

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

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

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

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

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

package/dist/components/emoji/index.js

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

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

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

package/dist/components/emoji-button/EmojiButton.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),_=require("../../utils/string.cjs"),E=require("../emoji/Emoji.cjs"),t=require("./EmojiButton.module.scss.cjs"),a={"x-small":"12",small:"20",medium:"24",large:"28"};function p({className:i="",emoji:l,size:s="small",padding:u="default",active:n=!1,toggled:e,type:c="button",...d}){const r=t.default[`emoji-button--size-${_.toKebab(s)}`],m=u==="compact"?t.default["emoji-button--padding-compact"]:"",j=n?t.default["emoji-button--active"]:"",f=e?t.default["emoji-button--toggled"]:"",b=[t.default["emoji-button"],r,m,j,f,i].filter(Boolean).join(" ");return o.jsx("button",{type:c,className:b,"aria-pressed":e!==void 0?e:void 0,...d,children:o.jsx("span",{className:t.default["emoji-button__emoji"],children:o.jsx(E.default,{emoji:l,size:a[s]})})})}exports.EMOJI_BUTTON_EMOJI_SIZES=a;exports.default=p;
+//# sourceMappingURL=EmojiButton.cjs.map

package/dist/components/emoji-button/EmojiButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiButton.cjs","sources":["../../../src/components/emoji-button/EmojiButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\nimport { toKebab } from '@/utils/string';\nimport Emoji from '@/components/emoji/Emoji';\nimport type { EmojiSize } from '@/components/emoji/Emoji';\nimport styles from './EmojiButton.module.scss';\n\nexport type EmojiButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\n/** Emoji size (px string) per EmojiButton size. Use when you need to override the emoji independently. */\nexport const EMOJI_BUTTON_EMOJI_SIZES: Record<EmojiButtonSize, EmojiSize> = {\n  'x-small': '12',\n  small: '20',\n  medium: '24',\n  large: '28',\n};\n\nexport type EmojiButtonPadding = 'default' | 'compact';\n\nexport interface EmojiButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Emoji character(s) to display (e.g. \"👍\", \"🎉\"). */\n  emoji: string;\n  /** Size variant. Default: small. */\n  size?: EmojiButtonSize;\n  /** Reduces padding within each size tier, matching IconButton compact. Default: default. */\n  padding?: EmojiButtonPadding;\n  /** When true, forces the subtler pressed/active visual. */\n  active?: boolean;\n  /** When true, shows toggled/selected state. */\n  toggled?: boolean;\n}\n\n/**\n * EmojiButton is a compact, label-free button that renders an emoji as its visual — the\n * emoji-picker counterpart to IconButton. Use it for emoji selection grids, skin-tone\n * selectors, and any surface where an emoji character is the primary affordance.\n *\n * Every EmojiButton must pair with an `aria-label` that names the action or the emoji it\n * represents.\n */\nexport default function EmojiButton({\n  className = '',\n  emoji,\n  size = 'small',\n  padding = 'default',\n  active = false,\n  toggled,\n  type = 'button',\n  ...rest\n}: EmojiButtonProps) {\n  const sizeClass = styles[`emoji-button--size-${toKebab(size)}`];\n  const paddingClass =\n    padding === 'compact' ? styles['emoji-button--padding-compact'] : '';\n  const activeClass = active ? styles['emoji-button--active'] : '';\n  const toggledClass = toggled ? styles['emoji-button--toggled'] : '';\n\n  const rootClass = [\n    styles['emoji-button'],\n    sizeClass,\n    paddingClass,\n    activeClass,\n    toggledClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type={type}\n      className={rootClass}\n      aria-pressed={toggled !== undefined ? toggled : undefined}\n      {...rest}\n    >\n      <span className={styles['emoji-button__emoji']}>\n        <Emoji emoji={emoji} size={EMOJI_BUTTON_EMOJI_SIZES[size]} />\n      </span>\n    </button>\n  );\n}\n"],"names":["EMOJI_BUTTON_EMOJI_SIZES","EmojiButton","className","emoji","size","padding","active","toggled","type","rest","sizeClass","styles","toKebab","paddingClass","activeClass","toggledClass","rootClass","jsx","Emoji"],"mappings":"gQASaA,EAA+D,CAC1E,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EA2BA,SAAwBC,EAAY,CAClC,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EAAO,QACP,QAAAC,EAAU,UACV,OAAAC,EAAS,GACT,QAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAqB,CACnB,MAAMC,EAAYC,EAAAA,QAAO,sBAAsBC,EAAAA,QAAQR,CAAI,CAAC,EAAE,EACxDS,EACJR,IAAY,UAAYM,EAAAA,QAAO,+BAA+B,EAAI,GAC9DG,EAAcR,EAASK,UAAO,sBAAsB,EAAI,GACxDI,EAAeR,EAAUI,UAAO,uBAAuB,EAAI,GAE3DK,EAAY,CAChBL,EAAAA,QAAO,cAAc,EACrBD,EACAG,EACAC,EACAC,EACAb,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEe,EAAAA,IAAC,SAAA,CACC,KAAAT,EACA,UAAWQ,EACX,eAAcT,IAAY,OAAYA,EAAU,OAC/C,GAAGE,EAEJ,SAAAQ,EAAAA,IAAC,OAAA,CAAK,UAAWN,EAAAA,QAAO,qBAAqB,EAC3C,SAAAM,EAAAA,IAACC,EAAAA,QAAA,CAAM,MAAAf,EAAc,KAAMH,EAAyBI,CAAI,EAAG,CAAA,CAC7D,CAAA,CAAA,CAGN"}

package/dist/components/emoji-button/EmojiButton.css

@@ -0,0 +1 @@
+._emoji-button_s9fno_2{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-family-body);border-radius:var(--radius-s);border:0;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);background-color:transparent;outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._emoji-button_s9fno_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._emoji-button_s9fno_2:disabled{cursor:not-allowed;opacity:.5}._emoji-button_s9fno_2:hover:not(:disabled):not(:active):not(._emoji-button--active_s9fno_24):not(._emoji-button--toggled_s9fno_24){background-color:rgba(var(--center-channel-color-rgb),.08)}._emoji-button__emoji_s9fno_27{display:inline-flex;transition:transform var(--duration-quick) var(--ease-transition)}._emoji-button_s9fno_2:hover:not(:disabled) ._emoji-button__emoji_s9fno_27{transform:scale(1.2)}._emoji-button_s9fno_2:active:not(:disabled):not(._emoji-button--toggled_s9fno_24){background-color:rgba(var(--button-bg-rgb),.08)}._emoji-button--size-x-small_s9fno_37{width:24px;height:24px;padding:var(--spacing-xxxs)}._emoji-button--size-x-small_s9fno_37._emoji-button--padding-compact_s9fno_42{width:20px;height:20px;padding:2px}._emoji-button--size-small_s9fno_47{width:32px;height:32px;padding:var(--spacing-xxs)}._emoji-button--size-small_s9fno_47._emoji-button--padding-compact_s9fno_42{width:28px;height:28px;padding:var(--spacing-xxxs)}._emoji-button--size-medium_s9fno_57{width:40px;height:40px;padding:var(--spacing-xs)}._emoji-button--size-medium_s9fno_57._emoji-button--padding-compact_s9fno_42{width:36px;height:36px;padding:var(--spacing-xxs)}._emoji-button--size-large_s9fno_67{width:48px;height:48px;padding:var(--spacing-s)}._emoji-button--size-large_s9fno_67._emoji-button--padding-compact_s9fno_42{width:44px;height:44px;padding:var(--spacing-xs)}._emoji-button--active_s9fno_24:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._emoji-button--active_s9fno_24:not(:disabled):hover:not(:disabled):not(:active){background-color:rgba(var(--button-bg-rgb),.12)}._emoji-button--active_s9fno_24:not(:disabled):active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16)}._emoji-button--toggled_s9fno_24{background-color:var(--button-bg)}._emoji-button--toggled_s9fno_24:hover:not(:disabled):not(:active){background-color:color-mix(in srgb,black 8%,var(--button-bg))}._emoji-button--toggled_s9fno_24:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg))}

package/dist/components/emoji-button/EmojiButton.d.ts

@@ -0,0 +1,30 @@
+import { ButtonHTMLAttributes } from 'react';
+import { EmojiSize } from '../emoji/Emoji';
+export type EmojiButtonSize = 'x-small' | 'small' | 'medium' | 'large';
+/** Emoji size (px string) per EmojiButton size. Use when you need to override the emoji independently. */
+export declare const EMOJI_BUTTON_EMOJI_SIZES: Record<EmojiButtonSize, EmojiSize>;
+export type EmojiButtonPadding = 'default' | 'compact';
+export interface EmojiButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Optional CSS class name. */
+    className?: string;
+    /** Emoji character(s) to display (e.g. "👍", "🎉"). */
+    emoji: string;
+    /** Size variant. Default: small. */
+    size?: EmojiButtonSize;
+    /** Reduces padding within each size tier, matching IconButton compact. Default: default. */
+    padding?: EmojiButtonPadding;
+    /** When true, forces the subtler pressed/active visual. */
+    active?: boolean;
+    /** When true, shows toggled/selected state. */
+    toggled?: boolean;
+}
+/**
+ * EmojiButton is a compact, label-free button that renders an emoji as its visual — the
+ * emoji-picker counterpart to IconButton. Use it for emoji selection grids, skin-tone
+ * selectors, and any surface where an emoji character is the primary affordance.
+ *
+ * Every EmojiButton must pair with an `aria-label` that names the action or the emoji it
+ * represents.
+ */
+export default function EmojiButton({ className, emoji, size, padding, active, toggled, type, ...rest }: EmojiButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EmojiButton.d.ts.map

package/dist/components/emoji-button/EmojiButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiButton.d.ts","sourceRoot":"","sources":["../../../src/components/emoji-button/EmojiButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAG1D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvE,0GAA0G;AAC1G,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,eAAe,EAAE,SAAS,CAKvE,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvD,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,2DAA2D;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,SAAc,EACd,KAAK,EACL,IAAc,EACd,OAAmB,EACnB,MAAc,EACd,OAAO,EACP,IAAe,EACf,GAAG,IAAI,EACR,EAAE,gBAAgB,2CA8BlB"}

package/dist/components/emoji-button/EmojiButton.js

@@ -0,0 +1,44 @@
+import { jsx as s } from "react/jsx-runtime";
+import { toKebab as b } from "../../utils/string.js";
+import f from "../emoji/Emoji.js";
+import o from "./EmojiButton.module.scss.js";
+const C = {
+  "x-small": "12",
+  small: "20",
+  medium: "24",
+  large: "28"
+};
+function x({
+  className: e = "",
+  emoji: i,
+  size: a = "small",
+  padding: m = "default",
+  active: n = !1,
+  toggled: t,
+  type: l = "button",
+  ...r
+}) {
+  const c = o[`emoji-button--size-${b(a)}`], u = m === "compact" ? o["emoji-button--padding-compact"] : "", d = n ? o["emoji-button--active"] : "", j = t ? o["emoji-button--toggled"] : "", p = [
+    o["emoji-button"],
+    c,
+    u,
+    d,
+    j,
+    e
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ s(
+    "button",
+    {
+      type: l,
+      className: p,
+      "aria-pressed": t !== void 0 ? t : void 0,
+      ...r,
+      children: /* @__PURE__ */ s("span", { className: o["emoji-button__emoji"], children: /* @__PURE__ */ s(f, { emoji: i, size: C[a] }) })
+    }
+  );
+}
+export {
+  C as EMOJI_BUTTON_EMOJI_SIZES,
+  x as default
+};
+//# sourceMappingURL=EmojiButton.js.map

package/dist/components/emoji-button/EmojiButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiButton.js","sources":["../../../src/components/emoji-button/EmojiButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\nimport { toKebab } from '@/utils/string';\nimport Emoji from '@/components/emoji/Emoji';\nimport type { EmojiSize } from '@/components/emoji/Emoji';\nimport styles from './EmojiButton.module.scss';\n\nexport type EmojiButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\n/** Emoji size (px string) per EmojiButton size. Use when you need to override the emoji independently. */\nexport const EMOJI_BUTTON_EMOJI_SIZES: Record<EmojiButtonSize, EmojiSize> = {\n  'x-small': '12',\n  small: '20',\n  medium: '24',\n  large: '28',\n};\n\nexport type EmojiButtonPadding = 'default' | 'compact';\n\nexport interface EmojiButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Emoji character(s) to display (e.g. \"👍\", \"🎉\"). */\n  emoji: string;\n  /** Size variant. Default: small. */\n  size?: EmojiButtonSize;\n  /** Reduces padding within each size tier, matching IconButton compact. Default: default. */\n  padding?: EmojiButtonPadding;\n  /** When true, forces the subtler pressed/active visual. */\n  active?: boolean;\n  /** When true, shows toggled/selected state. */\n  toggled?: boolean;\n}\n\n/**\n * EmojiButton is a compact, label-free button that renders an emoji as its visual — the\n * emoji-picker counterpart to IconButton. Use it for emoji selection grids, skin-tone\n * selectors, and any surface where an emoji character is the primary affordance.\n *\n * Every EmojiButton must pair with an `aria-label` that names the action or the emoji it\n * represents.\n */\nexport default function EmojiButton({\n  className = '',\n  emoji,\n  size = 'small',\n  padding = 'default',\n  active = false,\n  toggled,\n  type = 'button',\n  ...rest\n}: EmojiButtonProps) {\n  const sizeClass = styles[`emoji-button--size-${toKebab(size)}`];\n  const paddingClass =\n    padding === 'compact' ? styles['emoji-button--padding-compact'] : '';\n  const activeClass = active ? styles['emoji-button--active'] : '';\n  const toggledClass = toggled ? styles['emoji-button--toggled'] : '';\n\n  const rootClass = [\n    styles['emoji-button'],\n    sizeClass,\n    paddingClass,\n    activeClass,\n    toggledClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type={type}\n      className={rootClass}\n      aria-pressed={toggled !== undefined ? toggled : undefined}\n      {...rest}\n    >\n      <span className={styles['emoji-button__emoji']}>\n        <Emoji emoji={emoji} size={EMOJI_BUTTON_EMOJI_SIZES[size]} />\n      </span>\n    </button>\n  );\n}\n"],"names":["EMOJI_BUTTON_EMOJI_SIZES","EmojiButton","className","emoji","size","padding","active","toggled","type","rest","sizeClass","styles","toKebab","paddingClass","activeClass","toggledClass","rootClass","jsx","Emoji"],"mappings":";;;;AASO,MAAMA,IAA+D;AAAA,EAC1E,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AA2BA,SAAwBC,EAAY;AAAA,EAClC,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAqB;AACnB,QAAMC,IAAYC,EAAO,sBAAsBC,EAAQR,CAAI,CAAC,EAAE,GACxDS,IACJR,MAAY,YAAYM,EAAO,+BAA+B,IAAI,IAC9DG,IAAcR,IAASK,EAAO,sBAAsB,IAAI,IACxDI,IAAeR,IAAUI,EAAO,uBAAuB,IAAI,IAE3DK,IAAY;AAAA,IAChBL,EAAO,cAAc;AAAA,IACrBD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAC;AAAA,IACAb;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,WAAWQ;AAAA,MACX,gBAAcT,MAAY,SAAYA,IAAU;AAAA,MAC/C,GAAGE;AAAA,MAEJ,UAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWN,EAAO,qBAAqB,GAC3C,UAAA,gBAAAM,EAACC,GAAA,EAAM,OAAAf,GAAc,MAAMH,EAAyBI,CAAI,GAAG,EAAA,CAC7D;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/emoji-button/EmojiButton.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./EmojiButton.css');const o={"emoji-button":"_emoji-button_s9fno_2","emoji-button--active":"_emoji-button--active_s9fno_24","emoji-button--toggled":"_emoji-button--toggled_s9fno_24","emoji-button__emoji":"_emoji-button__emoji_s9fno_27","emoji-button--size-x-small":"_emoji-button--size-x-small_s9fno_37","emoji-button--padding-compact":"_emoji-button--padding-compact_s9fno_42","emoji-button--size-small":"_emoji-button--size-small_s9fno_47","emoji-button--size-medium":"_emoji-button--size-medium_s9fno_57","emoji-button--size-large":"_emoji-button--size-large_s9fno_67"};exports.default=o;
+//# sourceMappingURL=EmojiButton.module.scss.cjs.map

package/dist/components/emoji-button/EmojiButton.module.scss.cjs.map

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

package/dist/components/emoji-button/EmojiButton.module.scss.js

@@ -0,0 +1,15 @@
+import './EmojiButton.css';const o = {
+  "emoji-button": "_emoji-button_s9fno_2",
+  "emoji-button--active": "_emoji-button--active_s9fno_24",
+  "emoji-button--toggled": "_emoji-button--toggled_s9fno_24",
+  "emoji-button__emoji": "_emoji-button__emoji_s9fno_27",
+  "emoji-button--size-x-small": "_emoji-button--size-x-small_s9fno_37",
+  "emoji-button--padding-compact": "_emoji-button--padding-compact_s9fno_42",
+  "emoji-button--size-small": "_emoji-button--size-small_s9fno_47",
+  "emoji-button--size-medium": "_emoji-button--size-medium_s9fno_57",
+  "emoji-button--size-large": "_emoji-button--size-large_s9fno_67"
+};
+export {
+  o as default
+};
+//# sourceMappingURL=EmojiButton.module.scss.js.map

package/dist/components/emoji-button/EmojiButton.module.scss.js.map

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

package/dist/components/emoji-button/index.cjs

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

package/dist/components/emoji-button/index.cjs.map

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

package/dist/components/emoji-button/index.d.ts

@@ -0,0 +1,3 @@
+export { default as EmojiButton } from './EmojiButton';
+export { EMOJI_BUTTON_EMOJI_SIZES, type EmojiButtonProps, type EmojiButtonPadding, type EmojiButtonSize, } from './EmojiButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/emoji-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/emoji-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EACL,wBAAwB,EACxB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,eAAe,GACrB,MAAM,eAAe,CAAC"}

package/dist/components/emoji-button/index.js

@@ -0,0 +1,6 @@
+import { EMOJI_BUTTON_EMOJI_SIZES as E, default as I } from "./EmojiButton.js";
+export {
+  E as EMOJI_BUTTON_EMOJI_SIZES,
+  I as EmojiButton
+};
+//# sourceMappingURL=index.js.map

package/dist/components/emoji-button/index.js.map

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

package/dist/components/emoji-popover/EmojiPopover.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("react"),__re=require("@mattermost/compass-icons/components/close.js"),re=__re?.default??__re,le=require("../button/Button.cjs"),ae=require("../emoji/Emoji.cjs"),v=require("../emoji-button/EmojiButton.cjs"),ne=require("../empty-state/EmptyState.cjs"),T=require("../icon/Icon.cjs"),B=require("../icon-button/IconButton.cjs"),E=require("../menu-group-heading/MenuGroupHeading.cjs"),de=require("../scrollbar/Scrollbar.cjs"),ce=require("../search-input/SearchInput.cjs"),ue=require("../../illustrations/search.svg.cjs"),s=require("./EmojiPopover.module.scss.cjs"),pe=r=>r===0?"Default skin tone":`Skin tone ${r}`,z=["🖐️","🖐🏻","🖐🏼","🖐🏽","🖐🏾","🖐🏿"],me=["","🏻","🏼","🏽","🏾","🏿"],fe=new Set(["👋","🤚","✋","🖐️","🖖","👌","🤌","🤏","✌️","🤞","🫰","🤟","🤘","🤙","👈","👉","👆","👇","☝️","🫵","👍","👎","✊","👊","🤛","🤜","👏","🙌","🫶","👐","🤲","🙏","💅","🤳","💪","🦵","🦶","👂","🦻","👃"]);function je(r,l){return!l||!fe.has(r)?r:r.replace("️","")+l}function ve({className:r="",categories:l,shortcodes:c={},defaultQuery:M="",autoFocus:h=!1,onEmojiSelect:u,onSearch:p,onCustomEmojiClick:_,customEmojiLabel:P="Custom emoji",searchPlaceholder:O="Search emojis",searchClearLabel:L,searchResultsLabel:D="Search Results",emptyTitle:F="No emojis found",emptyDescription:H="Try a different search term.",previewHintLabel:$="Select an Emoji",skinToneButtonLabel:A="Select skin tone",skinToneLabel:K="Skin tone",formatSkinToneLabel:Q=pe,closeSkinTonePickerLabel:G="Close skin tone picker"}){var R;const[a,V]=t.useState(M),[J,U]=t.useState(((R=l[0])==null?void 0:R.id)??""),[x,k]=t.useState(null),[W,g]=t.useState(null),[m,X]=t.useState(0),[n,f]=t.useState(!1),N=t.useRef(null),S=`${t.useId()}-skin-tone-picker`,Y=me[m],y=t.useRef(null),b=t.useRef({});t.useEffect(()=>{var o;h&&((o=N.current)==null||o.focus())},[h]);const I=o=>{V(o),p==null||p(o)},Z=[...new Set(l.flatMap(o=>o.emojis))],C=a?Z.filter(o=>(c[o]??"").includes(a.toLowerCase())||o===a):[],j=a?C.length>0?"search-results":"empty":"default";function ee(o){return c[o]?`:${c[o]}:`:o}function oe(o){const i=b.current[o],d=y.current;if(!i||!d)return;const te=i.getBoundingClientRect().top-d.getBoundingClientRect().top+d.scrollTop;d.scrollTo({top:te,behavior:"smooth"})}const se=[s.default["emoji-popover"],r].filter(Boolean).join(" "),ie={"aria-label":"",width:"80px",height:"60px",children:e.jsx(ue.default,{})},q=o=>{const i=je(o,Y);return e.jsx(v.default,{emoji:i,size:"medium",padding:"compact","aria-label":i,onMouseEnter:()=>{k(i),g(o)},onMouseLeave:()=>{k(null),g(null)},onClick:()=>u==null?void 0:u(i)},o)},w=()=>j==="empty"?e.jsx(ne.default,{illustration:ie,title:F,description:H}):j==="search-results"?e.jsx("div",{className:s.default["emoji-popover__emoji-list"],children:e.jsxs("div",{className:s.default["emoji-popover__group"],children:[e.jsx(E.default,{label:D}),e.jsx("div",{className:s.default["emoji-popover__emoji-row"],children:C.map(q)})]})}):e.jsx("div",{className:s.default["emoji-popover__emoji-list"],children:l.map(o=>e.jsxs("div",{ref:i=>{b.current[o.id]=i},className:s.default["emoji-popover__group"],children:[e.jsx(E.default,{label:o.label}),e.jsx("div",{className:[s.default["emoji-popover__emoji-row"],o.wrap===!1?s.default["emoji-popover__emoji-row--nowrap"]:""].filter(Boolean).join(" "),children:o.emojis.map(q)})]},o.id))});return e.jsxs("div",{className:se,children:[e.jsxs("div",{className:s.default["emoji-popover__header"],children:[e.jsxs("div",{className:s.default["emoji-popover__header-panels"],children:[e.jsx("div",{className:[s.default["emoji-popover__header-main"],n?s.default["emoji-popover__header-main--hidden"]:""].filter(Boolean).join(" "),inert:n,"aria-hidden":n||void 0,children:e.jsxs("div",{className:s.default["emoji-popover__search-row"],children:[e.jsx(ce.default,{ref:N,placeholder:O,size:"small",className:s.default["emoji-popover__search-input"],value:a,onChange:o=>I(o.target.value),onClear:()=>I(""),clearLabel:L}),!a&&e.jsx(v.default,{emoji:z[m],size:"small","aria-label":A,"aria-expanded":n,"aria-controls":S,onClick:()=>f(!0)})]})}),e.jsxs("div",{id:S,className:[s.default["emoji-popover__skin-tone-picker"],n?s.default["emoji-popover__skin-tone-picker--visible"]:""].filter(Boolean).join(" "),inert:!n,"aria-hidden":!n||void 0,children:[e.jsx("span",{className:s.default["emoji-popover__skin-tone-label"],children:K}),e.jsx("div",{className:s.default["emoji-popover__skin-tone-options"],children:z.map((o,i)=>e.jsx(v.default,{emoji:o,size:"small",toggled:m===i,"aria-label":Q(i),onClick:()=>{X(i),f(!1)}},i))}),e.jsx(B.default,{size:"small",padding:"compact",icon:e.jsx(T.default,{glyph:e.jsx(re,{}),size:"16"}),"aria-label":G,onClick:()=>f(!1)})]})]}),!a&&e.jsx("div",{className:s.default["emoji-popover__categories"],children:l.map(o=>e.jsx(B.default,{size:"small",padding:"compact",icon:e.jsx(T.default,{glyph:e.jsx(o.icon,{}),size:"16"}),"aria-label":o.label,active:J===o.id,onClick:()=>{U(o.id),oe(o.id)}},o.id))})]}),e.jsx("div",{className:s.default["emoji-popover__scroll-view"],children:j==="empty"?w():e.jsx(de.default,{alwaysVisible:!0,ref:y,children:w()})}),e.jsxs("div",{className:s.default["emoji-popover__footer"],children:[e.jsx("div",{className:s.default["emoji-popover__footer-preview"],children:x?e.jsxs(e.Fragment,{children:[e.jsx(ae.default,{emoji:x,size:"32"}),e.jsx("span",{className:s.default["emoji-popover__footer-shortcode"],children:ee(W??"")})]}):e.jsx("span",{className:s.default["emoji-popover__footer-hint"],children:$})}),_&&e.jsx(le.default,{emphasis:"tertiary",size:"small",onClick:_,children:P})]})]})}exports.default=ve;
+//# sourceMappingURL=EmojiPopover.cjs.map