@mattermost/compass-ui 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/components/card-button/CardButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButton.d.ts","sourceRoot":"","sources":["../../../src/components/card-button/CardButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK7D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC3E,gHAAgH;IAChH,IAAI,EAAE,SAAS,CAAC;IAChB,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAgB,EAChB,SAAc,EACd,IAAe,EACf,IAAI,EACJ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,eAAe,2CAoCjB"}

package/dist/components/card-button/CardButton.js

@@ -0,0 +1,45 @@
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import __p from "@mattermost/compass-icons/components/check-circle.js";const p=__p&&__p.default?__p.default:__p;
+import _ from "../icon/Icon.js";
+import a from "./CardButton.module.scss.js";
+function C({
+  icon: e,
+  title: i,
+  description: n,
+  selected: r = !1,
+  className: d = "",
+  type: l = "button",
+  role: o,
+  disabled: u,
+  ...m
+}) {
+  const s = o === "radio", h = [
+    a["card-button"],
+    r && a["card-button--selected"],
+    d
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      type: l,
+      role: o,
+      disabled: u,
+      className: h,
+      "aria-checked": s ? r : void 0,
+      "aria-pressed": s ? void 0 : r,
+      ...m,
+      children: [
+        /* @__PURE__ */ t("span", { className: a["card-button__icon"], "aria-hidden": !0, children: e }),
+        /* @__PURE__ */ c("span", { className: a["card-button__text"], children: [
+          /* @__PURE__ */ t("span", { className: a["card-button__title"], children: i }),
+          n != null && /* @__PURE__ */ t("span", { className: a["card-button__description"], children: n })
+        ] }),
+        /* @__PURE__ */ t("span", { className: a["card-button__check"], "aria-hidden": !0, children: /* @__PURE__ */ t(_, { glyph: /* @__PURE__ */ t(p, {}), size: "20" }) })
+      ]
+    }
+  );
+}
+export {
+  C as default
+};
+//# sourceMappingURL=CardButton.js.map

package/dist/components/card-button/CardButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButton.js","sources":["../../../src/components/card-button/CardButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport Icon from '@/components/icon/Icon';\nimport styles from './CardButton.module.scss';\n\nexport interface CardButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title'> {\n  /** Leading icon. Pass `<Icon glyph={<SomeIcon />} size=\"24\" />` — the slot does not resize raw SVG children. */\n  icon: ReactNode;\n  /** Primary label. */\n  title: ReactNode;\n  /** Secondary line under the title. */\n  description?: ReactNode;\n  /** Selected / checked appearance with trailing check. Default: false. */\n  selected?: boolean;\n  className?: string;\n}\n\n/**\n * Card Buttons present a mutually exclusive (or single) choice as a compact\n * card: leading icon, title, optional description, and a check when selected.\n * Pair with `CardButtonGroup` for side-by-side radiogroups (visibility,\n * access mode, etc.).\n */\nexport default function CardButton({\n  icon,\n  title,\n  description,\n  selected = false,\n  className = '',\n  type = 'button',\n  role,\n  disabled,\n  ...rest\n}: CardButtonProps) {\n  const isRadio = role === 'radio';\n  const rootClass = [\n    styles['card-button'],\n    selected && styles['card-button--selected'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type={type}\n      role={role}\n      disabled={disabled}\n      className={rootClass}\n      aria-checked={isRadio ? selected : undefined}\n      aria-pressed={!isRadio ? selected : undefined}\n      {...rest}\n    >\n      <span className={styles['card-button__icon']} aria-hidden>\n        {icon}\n      </span>\n      <span className={styles['card-button__text']}>\n        <span className={styles['card-button__title']}>{title}</span>\n        {description != null && (\n          <span className={styles['card-button__description']}>\n            {description}\n          </span>\n        )}\n      </span>\n      <span className={styles['card-button__check']} aria-hidden>\n        <Icon glyph={<CheckCircleIcon />} size=\"20\" />\n      </span>\n    </button>\n  );\n}\n"],"names":["CardButton","icon","title","description","selected","className","type","role","disabled","rest","isRadio","rootClass","styles","jsxs","jsx","Icon","CheckCircleIcon"],"mappings":";;;;AAwBA,SAAwBA,EAAW;AAAA,EACjC,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAoB;AAClB,QAAMC,IAAUH,MAAS,SACnBI,IAAY;AAAA,IAChBC,EAAO,aAAa;AAAA,IACpBR,KAAYQ,EAAO,uBAAuB;AAAA,IAC1CP;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,MAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAWG;AAAA,MACX,gBAAcD,IAAUN,IAAW;AAAA,MACnC,gBAAeM,IAAqB,SAAXN;AAAA,MACxB,GAAGK;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAK,EAAC,UAAK,WAAWF,EAAO,mBAAmB,GAAG,eAAW,IACtD,UAAAX,GACH;AAAA,QACA,gBAAAY,EAAC,QAAA,EAAK,WAAWD,EAAO,mBAAmB,GACzC,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,oBAAoB,GAAI,UAAAV,GAAM;AAAA,UACrDC,KAAe,QACd,gBAAAW,EAAC,QAAA,EAAK,WAAWF,EAAO,0BAA0B,GAC/C,UAAAT,EAAA,CACH;AAAA,QAAA,GAEJ;AAAA,0BACC,QAAA,EAAK,WAAWS,EAAO,oBAAoB,GAAG,eAAW,IACxD,UAAA,gBAAAE,EAACC,GAAA,EAAK,OAAO,gBAAAD,EAACE,GAAA,CAAA,CAAgB,GAAI,MAAK,MAAK,EAAA,CAC9C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/card-button/CardButton.module.css

@@ -0,0 +1 @@
+._card-button_1l92t_2{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-m);margin:0;padding:var(--spacing-m) var(--spacing-xl) var(--spacing-m) var(--spacing-m);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);background-color:var(--center-channel-bg);box-shadow:var(--elevation-1);cursor:pointer;text-align:left;color:var(--center-channel-color);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:border-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-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)}._card-button_1l92t_2:hover:not(:disabled):not(._card-button--selected_1l92t_22){border-color:rgba(var(--center-channel-color-rgb),.24);box-shadow:var(--elevation-2)}._card-button_1l92t_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._card-button_1l92t_2:disabled{cursor:not-allowed;opacity:.48}._card-button--selected_1l92t_22{border-color:rgba(var(--button-bg-rgb),.32)}._card-button--selected_1l92t_22 ._card-button__icon_1l92t_37{background-color:rgba(var(--button-bg-rgb),.08);color:var(--button-bg)}._card-button--selected_1l92t_22 ._card-button__check_1l92t_41{visibility:visible}._card-button__icon_1l92t_37{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-xs);border-radius:var(--radius-full);background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.56)}._card-button__text_1l92t_54{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:0}._card-button__title_1l92t_62{font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--center-channel-color)}._card-button__description_1l92t_69{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.72)}._card-button__check_1l92t_41{flex-shrink:0;display:inline-flex;align-items:center;color:var(--button-bg);visibility:hidden}

package/dist/components/card-button/CardButton.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./CardButton.module.css');const t={"card-button":"_card-button_1l92t_2","card-button--selected":"_card-button--selected_1l92t_22","card-button__icon":"_card-button__icon_1l92t_37","card-button__check":"_card-button__check_1l92t_41","card-button__text":"_card-button__text_1l92t_54","card-button__title":"_card-button__title_1l92t_62","card-button__description":"_card-button__description_1l92t_69"};exports.default=t;
+//# sourceMappingURL=CardButton.module.scss.cjs.map

package/dist/components/card-button/CardButton.module.scss.cjs.map

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

package/dist/components/card-button/CardButton.module.scss.js

@@ -0,0 +1,13 @@
+import './CardButton.module.css';const t = {
+  "card-button": "_card-button_1l92t_2",
+  "card-button--selected": "_card-button--selected_1l92t_22",
+  "card-button__icon": "_card-button__icon_1l92t_37",
+  "card-button__check": "_card-button__check_1l92t_41",
+  "card-button__text": "_card-button__text_1l92t_54",
+  "card-button__title": "_card-button__title_1l92t_62",
+  "card-button__description": "_card-button__description_1l92t_69"
+};
+export {
+  t as default
+};
+//# sourceMappingURL=CardButton.module.scss.js.map

package/dist/components/card-button/CardButton.module.scss.js.map

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

package/dist/components/card-button/CardButtonGroup.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const R=require("react/jsx-runtime"),k=require("react"),E=require("./CardButtonGroup.module.scss.cjs");function h(n){return[...n.querySelectorAll('[role="radio"]')]}function m(n){return h(n).filter(o=>!o.disabled)}function b(n,o){const a=h(n);if(a.length===0)return;const u=m(n),l=u.find(r=>r.getAttribute("aria-checked")==="true")??a.find(r=>r.getAttribute("aria-checked")==="true"),f=o&&a.includes(o)&&!o.disabled?o:l??u[0]??a[0];a.forEach(r=>{r.tabIndex=r===f?0:-1})}function S({children:n,className:o="",role:a="radiogroup",onKeyDown:u,onFocus:l,...f}){const r=k.useRef(null);k.useLayoutEffect(()=>{const e=r.current;e!=null&&b(e)},[n]);const p=e=>{l==null||l(e);const c=e.currentTarget;if(h(c).length===0)return;const t=e.target;if(!(t instanceof HTMLElement))return;const i=t.closest('[role="radio"]');i==null||!c.contains(i)||b(c,i)},A=e=>{if(u==null||u(e),e.defaultPrevented)return;const c=r.current;if(c==null)return;const t=m(c);if(t.length===0)return;const i=document.activeElement;if(!(i instanceof HTMLElement)||!c.contains(i))return;const v=i.closest('[role="radio"]'),g=t.findIndex(s=>s===v);if(g<0)return;const d=s=>{e.preventDefault(),b(c,s),s.focus({focusVisible:!0}),s.getAttribute("aria-checked")!=="true"&&s.click()};switch(e.key){case"ArrowRight":case"ArrowDown":d(t[(g+1)%t.length]);break;case"ArrowLeft":case"ArrowUp":d(t[(g-1+t.length)%t.length]);break;case"Home":d(t[0]);break;case"End":d(t[t.length-1]);break}};return R.jsx("div",{role:a,className:[E.default["card-button-group"],o].filter(Boolean).join(" "),...f,ref:r,onKeyDown:A,onFocus:p,children:n})}exports.default=S;
+//# sourceMappingURL=CardButtonGroup.cjs.map

package/dist/components/card-button/CardButtonGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButtonGroup.cjs","sources":["../../../src/components/card-button/CardButtonGroup.tsx"],"sourcesContent":["import {\n  useLayoutEffect,\n  useRef,\n  type FocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './CardButtonGroup.module.scss';\n\nexport interface CardButtonGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  className?: string;\n}\n\nfunction radiosIn(group: ParentNode): HTMLButtonElement[] {\n  return [...group.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]')];\n}\n\nfunction enabledRadiosIn(group: ParentNode): HTMLButtonElement[] {\n  return radiosIn(group).filter((radio) => !radio.disabled);\n}\n\nfunction syncRadioTabStops(group: HTMLElement, preferred?: HTMLButtonElement) {\n  const radios = radiosIn(group);\n  if (radios.length === 0) return;\n\n  const enabled = enabledRadiosIn(group);\n  const checked =\n    enabled.find((radio) => radio.getAttribute('aria-checked') === 'true') ??\n    radios.find((radio) => radio.getAttribute('aria-checked') === 'true');\n  const tabStop =\n    preferred && radios.includes(preferred) && !preferred.disabled\n      ? preferred\n      : (checked ?? enabled[0] ?? radios[0]);\n\n  radios.forEach((radio) => {\n    radio.tabIndex = radio === tabStop ? 0 : -1;\n  });\n}\n\n/**\n * Lays out Card Buttons in a horizontal row (Figma Card Button Group).\n * Defaults to `role=\"radiogroup\"` — set child cards to `role=\"radio\"`.\n * When children use `role=\"radio\"`, applies the ARIA radio keyboard model\n * (roving tabindex + arrow selection with wrapping).\n */\nexport default function CardButtonGroup({\n  children,\n  className = '',\n  role = 'radiogroup',\n  onKeyDown,\n  onFocus,\n  ...rest\n}: CardButtonGroupProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const group = ref.current;\n    if (group == null) return;\n    syncRadioTabStops(group);\n  }, [children]);\n\n  const handleFocus = (e: FocusEvent<HTMLDivElement>) => {\n    onFocus?.(e);\n    const group = e.currentTarget;\n    if (radiosIn(group).length === 0) return;\n    const target = e.target;\n    if (!(target instanceof HTMLElement)) return;\n    const radio = target.closest<HTMLButtonElement>('[role=\"radio\"]');\n    if (radio == null || !group.contains(radio)) return;\n    syncRadioTabStops(group, radio);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n\n    const group = ref.current;\n    if (group == null) return;\n    const radios = enabledRadiosIn(group);\n    if (radios.length === 0) return;\n\n    const active = document.activeElement;\n    if (!(active instanceof HTMLElement) || !group.contains(active)) return;\n    const radio = active.closest<HTMLButtonElement>('[role=\"radio\"]');\n    const index = radios.findIndex((r) => r === radio);\n    if (index < 0) return;\n\n    const selectRadio = (next: HTMLButtonElement) => {\n      e.preventDefault();\n      syncRadioTabStops(group, next);\n      next.focus({ focusVisible: true } as FocusOptions);\n      if (next.getAttribute('aria-checked') !== 'true') {\n        next.click();\n      }\n    };\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        selectRadio(radios[(index + 1) % radios.length]);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        selectRadio(radios[(index - 1 + radios.length) % radios.length]);\n        break;\n      case 'Home':\n        selectRadio(radios[0]);\n        break;\n      case 'End':\n        selectRadio(radios[radios.length - 1]);\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <div\n      role={role}\n      className={[styles['card-button-group'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n      ref={ref}\n      onKeyDown={handleKeyDown}\n      onFocus={handleFocus}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["radiosIn","group","enabledRadiosIn","radio","syncRadioTabStops","preferred","radios","enabled","checked","tabStop","CardButtonGroup","children","className","role","onKeyDown","onFocus","rest","ref","useRef","useLayoutEffect","handleFocus","target","handleKeyDown","active","index","r","selectRadio","next","jsx","styles"],"mappings":"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"}

package/dist/components/card-button/CardButtonGroup.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface CardButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Lays out Card Buttons in a horizontal row (Figma Card Button Group).
+ * Defaults to `role="radiogroup"` — set child cards to `role="radio"`.
+ * When children use `role="radio"`, applies the ARIA radio keyboard model
+ * (roving tabindex + arrow selection with wrapping).
+ */
+export default function CardButtonGroup({ children, className, role, onKeyDown, onFocus, ...rest }: CardButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CardButtonGroup.d.ts.map

package/dist/components/card-button/CardButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/card-button/CardButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC1E,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,QAAQ,EACR,SAAc,EACd,IAAmB,EACnB,SAAS,EACT,OAAO,EACP,GAAG,IAAI,EACR,EAAE,oBAAoB,2CA8EtB"}

package/dist/components/card-button/CardButtonGroup.js

@@ -0,0 +1,85 @@
+import { jsx as E } from "react/jsx-runtime";
+import { useRef as v, useLayoutEffect as R } from "react";
+import w from "./CardButtonGroup.module.scss.js";
+function h(n) {
+  return [...n.querySelectorAll('[role="radio"]')];
+}
+function m(n) {
+  return h(n).filter((o) => !o.disabled);
+}
+function b(n, o) {
+  const a = h(n);
+  if (a.length === 0) return;
+  const s = m(n), l = s.find((r) => r.getAttribute("aria-checked") === "true") ?? a.find((r) => r.getAttribute("aria-checked") === "true"), f = o && a.includes(o) && !o.disabled ? o : l ?? s[0] ?? a[0];
+  a.forEach((r) => {
+    r.tabIndex = r === f ? 0 : -1;
+  });
+}
+function y({
+  children: n,
+  className: o = "",
+  role: a = "radiogroup",
+  onKeyDown: s,
+  onFocus: l,
+  ...f
+}) {
+  const r = v(null);
+  R(() => {
+    const e = r.current;
+    e != null && b(e);
+  }, [n]);
+  const k = (e) => {
+    l == null || l(e);
+    const c = e.currentTarget;
+    if (h(c).length === 0) return;
+    const t = e.target;
+    if (!(t instanceof HTMLElement)) return;
+    const i = t.closest('[role="radio"]');
+    i == null || !c.contains(i) || b(c, i);
+  }, p = (e) => {
+    if (s == null || s(e), e.defaultPrevented) return;
+    const c = r.current;
+    if (c == null) return;
+    const t = m(c);
+    if (t.length === 0) return;
+    const i = document.activeElement;
+    if (!(i instanceof HTMLElement) || !c.contains(i)) return;
+    const A = i.closest('[role="radio"]'), g = t.findIndex((u) => u === A);
+    if (g < 0) return;
+    const d = (u) => {
+      e.preventDefault(), b(c, u), u.focus({ focusVisible: !0 }), u.getAttribute("aria-checked") !== "true" && u.click();
+    };
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        d(t[(g + 1) % t.length]);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        d(t[(g - 1 + t.length) % t.length]);
+        break;
+      case "Home":
+        d(t[0]);
+        break;
+      case "End":
+        d(t[t.length - 1]);
+        break;
+    }
+  };
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      role: a,
+      className: [w["card-button-group"], o].filter(Boolean).join(" "),
+      ...f,
+      ref: r,
+      onKeyDown: p,
+      onFocus: k,
+      children: n
+    }
+  );
+}
+export {
+  y as default
+};
+//# sourceMappingURL=CardButtonGroup.js.map

package/dist/components/card-button/CardButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButtonGroup.js","sources":["../../../src/components/card-button/CardButtonGroup.tsx"],"sourcesContent":["import {\n  useLayoutEffect,\n  useRef,\n  type FocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './CardButtonGroup.module.scss';\n\nexport interface CardButtonGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  className?: string;\n}\n\nfunction radiosIn(group: ParentNode): HTMLButtonElement[] {\n  return [...group.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]')];\n}\n\nfunction enabledRadiosIn(group: ParentNode): HTMLButtonElement[] {\n  return radiosIn(group).filter((radio) => !radio.disabled);\n}\n\nfunction syncRadioTabStops(group: HTMLElement, preferred?: HTMLButtonElement) {\n  const radios = radiosIn(group);\n  if (radios.length === 0) return;\n\n  const enabled = enabledRadiosIn(group);\n  const checked =\n    enabled.find((radio) => radio.getAttribute('aria-checked') === 'true') ??\n    radios.find((radio) => radio.getAttribute('aria-checked') === 'true');\n  const tabStop =\n    preferred && radios.includes(preferred) && !preferred.disabled\n      ? preferred\n      : (checked ?? enabled[0] ?? radios[0]);\n\n  radios.forEach((radio) => {\n    radio.tabIndex = radio === tabStop ? 0 : -1;\n  });\n}\n\n/**\n * Lays out Card Buttons in a horizontal row (Figma Card Button Group).\n * Defaults to `role=\"radiogroup\"` — set child cards to `role=\"radio\"`.\n * When children use `role=\"radio\"`, applies the ARIA radio keyboard model\n * (roving tabindex + arrow selection with wrapping).\n */\nexport default function CardButtonGroup({\n  children,\n  className = '',\n  role = 'radiogroup',\n  onKeyDown,\n  onFocus,\n  ...rest\n}: CardButtonGroupProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const group = ref.current;\n    if (group == null) return;\n    syncRadioTabStops(group);\n  }, [children]);\n\n  const handleFocus = (e: FocusEvent<HTMLDivElement>) => {\n    onFocus?.(e);\n    const group = e.currentTarget;\n    if (radiosIn(group).length === 0) return;\n    const target = e.target;\n    if (!(target instanceof HTMLElement)) return;\n    const radio = target.closest<HTMLButtonElement>('[role=\"radio\"]');\n    if (radio == null || !group.contains(radio)) return;\n    syncRadioTabStops(group, radio);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n\n    const group = ref.current;\n    if (group == null) return;\n    const radios = enabledRadiosIn(group);\n    if (radios.length === 0) return;\n\n    const active = document.activeElement;\n    if (!(active instanceof HTMLElement) || !group.contains(active)) return;\n    const radio = active.closest<HTMLButtonElement>('[role=\"radio\"]');\n    const index = radios.findIndex((r) => r === radio);\n    if (index < 0) return;\n\n    const selectRadio = (next: HTMLButtonElement) => {\n      e.preventDefault();\n      syncRadioTabStops(group, next);\n      next.focus({ focusVisible: true } as FocusOptions);\n      if (next.getAttribute('aria-checked') !== 'true') {\n        next.click();\n      }\n    };\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        selectRadio(radios[(index + 1) % radios.length]);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        selectRadio(radios[(index - 1 + radios.length) % radios.length]);\n        break;\n      case 'Home':\n        selectRadio(radios[0]);\n        break;\n      case 'End':\n        selectRadio(radios[radios.length - 1]);\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <div\n      role={role}\n      className={[styles['card-button-group'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n      ref={ref}\n      onKeyDown={handleKeyDown}\n      onFocus={handleFocus}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["radiosIn","group","enabledRadiosIn","radio","syncRadioTabStops","preferred","radios","enabled","checked","tabStop","CardButtonGroup","children","className","role","onKeyDown","onFocus","rest","ref","useRef","useLayoutEffect","handleFocus","target","handleKeyDown","active","index","r","selectRadio","next","jsx","styles"],"mappings":"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"}

package/dist/components/card-button/CardButtonGroup.module.css

@@ -0,0 +1 @@
+._card-button-group_1cufe_2{display:flex;flex-direction:row;align-items:stretch;gap:var(--spacing-xs);width:100%}._card-button-group_1cufe_2>*{flex:1 1 0;min-width:0}

package/dist/components/card-button/CardButtonGroup.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./CardButtonGroup.module.css');const e={"card-button-group":"_card-button-group_1cufe_2"};exports.default=e;
+//# sourceMappingURL=CardButtonGroup.module.scss.cjs.map

package/dist/components/card-button/CardButtonGroup.module.scss.cjs.map

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

package/dist/components/card-button/CardButtonGroup.module.scss.js

@@ -0,0 +1,7 @@
+import './CardButtonGroup.module.css';const t = {
+  "card-button-group": "_card-button-group_1cufe_2"
+};
+export {
+  t as default
+};
+//# sourceMappingURL=CardButtonGroup.module.scss.js.map

package/dist/components/card-button/CardButtonGroup.module.scss.js.map

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

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

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

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

@@ -0,0 +1,5 @@
+export { default as CardButton } from './CardButton';
+export type { CardButtonProps } from './CardButton';
+export { default as CardButtonGroup } from './CardButtonGroup';
+export type { CardButtonGroupProps } from './CardButtonGroup';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/card-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

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

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

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 = 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 type={type} className={rootClass} aria-pressed={toggled !== undefined ? toggled : undefined} {...rest}>\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,EAAeR,IAAY,UAAYM,EAAAA,QAAO,+BAA+B,EAAI,GACjFG,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,CAAO,KAAAT,EAAY,UAAWQ,EAAW,eAAcT,IAAY,OAAYA,EAAU,OAAY,GAAGE,EACvG,SAAAQ,EAAAA,IAAC,QAAK,UAAWN,EAAAA,QAAO,qBAAqB,EAC3C,SAAAM,EAAAA,IAACC,EAAAA,QAAA,CAAM,MAAAf,EAAc,KAAMH,EAAyBI,CAAI,CAAA,CAAG,CAAA,CAC7D,CAAA,CACF,CAEJ"}

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,2CAwBlB"}

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

@@ -0,0 +1,35 @@
+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 = 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 type={type} className={rootClass} aria-pressed={toggled !== undefined ? toggled : undefined} {...rest}>\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,IAAeR,MAAY,YAAYM,EAAO,+BAA+B,IAAI,IACjFG,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,EAAC,UAAA,EAAO,MAAAT,GAAY,WAAWQ,GAAW,gBAAcT,MAAY,SAAYA,IAAU,QAAY,GAAGE,GACvG,UAAA,gBAAAQ,EAAC,UAAK,WAAWN,EAAO,qBAAqB,GAC3C,UAAA,gBAAAM,EAACC,GAAA,EAAM,OAAAf,GAAc,MAAMH,EAAyBI,CAAI,EAAA,CAAG,EAAA,CAC7D,EAAA,CACF;AAEJ;"}

package/dist/components/emoji-button/EmojiButton.module.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.module.scss.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPopover.cjs","sources":["../../../src/components/emoji-popover/EmojiPopover.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react';\nimport type { ComponentType } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Button from '@/components/button/Button';\nimport Emoji from '@/components/emoji/Emoji';\nimport EmojiButton from '@/components/emoji-button/EmojiButton';\nimport EmptyState from '@/components/empty-state/EmptyState';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport MenuGroupHeading from '@/components/menu-group-heading/MenuGroupHeading';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport SearchInput from '@/components/search-input/SearchInput';\nimport SearchIllustration from '@/illustrations/search';\nimport styles from './EmojiPopover.module.scss';\n\nexport interface EmojiCategory {\n  id: string;\n  label: string;\n  /** Icon component rendered in the category navigation bar. */\n  icon: ComponentType;\n  emojis: string[];\n  /** When false the row does not wrap (e.g. Recently Used). @default true */\n  wrap?: boolean;\n}\n\nexport interface EmojiPopoverProps {\n  className?: string;\n  /** Emoji categories to display, supplied by the host. */\n  categories: EmojiCategory[];\n  /** Map of base emoji → shortcode name used for footer display. */\n  shortcodes?: Record<string, string>;\n  /** Pre-seeds the search field. Useful for static specimen demos. */\n  defaultQuery?: string;\n  /** Focus the search field on mount. */\n  autoFocus?: boolean;\n  /** Called with the selected emoji character. */\n  onEmojiSelect?: (emoji: string) => void;\n  /**\n   * Called on every query change. Use this to trigger async custom-emoji\n   * searches on the host side; local filtering over `categories` always runs.\n   */\n  onSearch?: (query: string) => void;\n  /** Shows a tertiary button in the footer right. Omit to hide the button. */\n  onCustomEmojiClick?: () => void;\n  /** Label for the custom emoji button. @default 'Custom emoji' */\n  customEmojiLabel?: string;\n}\n\nconst SKIN_TONES = ['🖐️', '🖐🏻', '🖐🏼', '🖐🏽', '🖐🏾', '🖐🏿'];\nconst SKIN_TONE_MODIFIERS = ['', '\\u{1F3FB}', '\\u{1F3FC}', '\\u{1F3FD}', '\\u{1F3FE}', '\\u{1F3FF}'];\n\nconst MODIFIER_BASES = new Set([\n  '👋', '🤚', '✋', '🖐️', '🖖', '👌', '🤌', '🤏', '✌️', '🤞', '🫰',\n  '🤟', '🤘', '🤙', '👈', '👉', '👆', '👇', '☝️', '🫵', '👍', '👎',\n  '✊', '👊', '🤛', '🤜', '👏', '🙌', '🫶', '👐', '🤲', '🙏', '💅',\n  '🤳', '💪', '🦵', '🦶', '👂', '🦻', '👃',\n]);\n\nfunction applyModifier(emoji: string, modifier: string): string {\n  if (!modifier || !MODIFIER_BASES.has(emoji)) return emoji;\n  // Strip VS16 before the modifier so composed sequences render correctly\n  return emoji.replace('️', '') + modifier;\n}\n\nexport default function EmojiPopover({\n  className = '',\n  categories,\n  shortcodes = {},\n  defaultQuery = '',\n  autoFocus = false,\n  onEmojiSelect,\n  onSearch,\n  onCustomEmojiClick,\n  customEmojiLabel = 'Custom emoji',\n}: EmojiPopoverProps) {\n  const [query, setQuery] = useState(defaultQuery);\n  const [activeCategoryId, setActiveCategoryId] = useState(categories[0]?.id ?? '');\n  const [hoveredEmoji, setHoveredEmoji] = useState<string | null>(null);\n  const [hoveredBase, setHoveredBase] = useState<string | null>(null);\n  const [skinToneIndex, setSkinToneIndex] = useState(0);\n  const [showSkinTonePicker, setShowSkinTonePicker] = useState(false);\n\n  const searchRef = useRef<HTMLInputElement>(null);\n  const generatedId = useId();\n  const skinTonePickerId = `${generatedId}-skin-tone-picker`;\n  const skinToneModifier = SKIN_TONE_MODIFIERS[skinToneIndex];\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const groupRefs = useRef<Record<string, HTMLDivElement | null>>({});\n\n  useEffect(() => {\n    if (autoFocus) searchRef.current?.focus();\n  }, [autoFocus]);\n\n  const handleQueryChange = (next: string) => {\n    setQuery(next);\n    onSearch?.(next);\n  };\n\n  const allEmojis = [...new Set(categories.flatMap((c) => c.emojis))];\n  const searchResults = query\n    ? allEmojis.filter((emoji) => {\n        const name = shortcodes[emoji] ?? '';\n        return name.includes(query.toLowerCase()) || emoji === query;\n      })\n    : [];\n\n  const computedState = query\n    ? searchResults.length > 0 ? 'search-results' : 'empty'\n    : 'default';\n\n  function getShortcode(emoji: string): string {\n    return shortcodes[emoji] ? `:${shortcodes[emoji]}:` : emoji;\n  }\n\n  function scrollToCategory(id: string) {\n    const group = groupRefs.current[id];\n    const scroller = scrollRef.current;\n    if (!group || !scroller) return;\n    const top = group.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;\n    scroller.scrollTo({ top, behavior: 'smooth' });\n  }\n\n  const rootClass = [styles['emoji-popover'], className].filter(Boolean).join(' ');\n\n  const emptyIllustration = {\n    'aria-label': '' as const,\n    width: '80px',\n    height: '60px',\n    children: <SearchIllustration />,\n  };\n\n  const renderEmoji = (emoji: string) => {\n    const displayed = applyModifier(emoji, skinToneModifier);\n    return (\n      <EmojiButton\n        key={emoji}\n        emoji={displayed}\n        size=\"medium\"\n        padding=\"compact\"\n        aria-label={displayed}\n        onMouseEnter={() => { setHoveredEmoji(displayed); setHoveredBase(emoji); }}\n        onMouseLeave={() => { setHoveredEmoji(null); setHoveredBase(null); }}\n        onClick={() => onEmojiSelect?.(displayed)}\n      />\n    );\n  };\n\n  const renderBody = () => {\n    if (computedState === 'empty') {\n      return (\n        <EmptyState\n          illustration={emptyIllustration}\n          title=\"No emojis found\"\n          description=\"Try a different search term.\"\n        />\n      );\n    }\n\n    if (computedState === 'search-results') {\n      return (\n        <div className={styles['emoji-popover__emoji-list']}>\n          <div className={styles['emoji-popover__group']}>\n            <MenuGroupHeading label=\"Search Results\" />\n            <div className={styles['emoji-popover__emoji-row']}>\n              {searchResults.map(renderEmoji)}\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div className={styles['emoji-popover__emoji-list']}>\n        {categories.map((cat) => (\n          <div key={cat.id} ref={(el) => { groupRefs.current[cat.id] = el; }} className={styles['emoji-popover__group']}>\n            <MenuGroupHeading label={cat.label} />\n            <div\n              className={[\n                styles['emoji-popover__emoji-row'],\n                cat.wrap === false ? styles['emoji-popover__emoji-row--nowrap'] : '',\n              ].filter(Boolean).join(' ')}\n            >\n              {cat.emojis.map(renderEmoji)}\n            </div>\n          </div>\n        ))}\n      </div>\n    );\n  };\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['emoji-popover__header']}>\n        <div className={styles['emoji-popover__header-panels']}>\n          <div\n            className={[\n              styles['emoji-popover__header-main'],\n              showSkinTonePicker ? styles['emoji-popover__header-main--hidden'] : '',\n            ].filter(Boolean).join(' ')}\n            inert={showSkinTonePicker}\n            aria-hidden={showSkinTonePicker || undefined}\n          >\n            <div className={styles['emoji-popover__search-row']}>\n              <SearchInput\n                ref={searchRef}\n                placeholder=\"Search emojis\"\n                size=\"small\"\n                className={styles['emoji-popover__search-input']}\n                value={query}\n                onChange={(e) => handleQueryChange(e.target.value)}\n                onClear={() => handleQueryChange('')}\n              />\n              {!query && (\n                <EmojiButton\n                  emoji={SKIN_TONES[skinToneIndex]}\n                  size=\"small\"\n                  aria-label=\"Select skin tone\"\n                  aria-expanded={showSkinTonePicker}\n                  aria-controls={skinTonePickerId}\n                  onClick={() => setShowSkinTonePicker(true)}\n                />\n              )}\n            </div>\n          </div>\n\n          <div\n            id={skinTonePickerId}\n            className={[\n              styles['emoji-popover__skin-tone-picker'],\n              showSkinTonePicker ? styles['emoji-popover__skin-tone-picker--visible'] : '',\n            ].filter(Boolean).join(' ')}\n            inert={!showSkinTonePicker}\n            aria-hidden={!showSkinTonePicker || undefined}\n          >\n            <span className={styles['emoji-popover__skin-tone-label']}>Skin tone</span>\n            <div className={styles['emoji-popover__skin-tone-options']}>\n              {SKIN_TONES.map((emoji, i) => (\n                <EmojiButton\n                  key={i}\n                  emoji={emoji}\n                  size=\"small\"\n                  toggled={skinToneIndex === i}\n                  aria-label={i === 0 ? 'Default skin tone' : `Skin tone ${i}`}\n                  onClick={() => { setSkinToneIndex(i); setShowSkinTonePicker(false); }}\n                />\n              ))}\n            </div>\n            <IconButton\n              size=\"small\"\n              padding=\"compact\"\n              icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n              aria-label=\"Close skin tone picker\"\n              onClick={() => setShowSkinTonePicker(false)}\n            />\n          </div>\n        </div>\n\n        {!query && (\n          <div className={styles['emoji-popover__categories']}>\n            {categories.map((cat) => (\n              <IconButton\n                key={cat.id}\n                size=\"small\"\n                padding=\"compact\"\n                icon={<Icon glyph={<cat.icon />} size=\"16\" />}\n                aria-label={cat.label}\n                active={activeCategoryId === cat.id}\n                onClick={() => { setActiveCategoryId(cat.id); scrollToCategory(cat.id); }}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div className={styles['emoji-popover__scroll-view']}>\n        {computedState === 'empty' ? (\n          renderBody()\n        ) : (\n          <Scrollbar alwaysVisible ref={scrollRef}>{renderBody()}</Scrollbar>\n        )}\n      </div>\n\n      <div className={styles['emoji-popover__footer']}>\n        <div className={styles['emoji-popover__footer-preview']}>\n          {hoveredEmoji ? (\n            <>\n              <Emoji emoji={hoveredEmoji} size='32' />\n              <span className={styles['emoji-popover__footer-shortcode']}>\n                {getShortcode(hoveredBase ?? '')}\n              </span>\n            </>\n          ) : (\n            <span className={styles['emoji-popover__footer-hint']}>\n              Select an Emoji\n            </span>\n          )}\n        </div>\n        {onCustomEmojiClick && (\n          <Button emphasis=\"tertiary\" size=\"small\" onClick={onCustomEmojiClick}>\n            {customEmojiLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["SKIN_TONES","SKIN_TONE_MODIFIERS","MODIFIER_BASES","applyModifier","emoji","modifier","EmojiPopover","className","categories","shortcodes","defaultQuery","autoFocus","onEmojiSelect","onSearch","onCustomEmojiClick","customEmojiLabel","query","setQuery","useState","activeCategoryId","setActiveCategoryId","_a","hoveredEmoji","setHoveredEmoji","hoveredBase","setHoveredBase","skinToneIndex","setSkinToneIndex","showSkinTonePicker","setShowSkinTonePicker","searchRef","useRef","skinTonePickerId","useId","skinToneModifier","scrollRef","groupRefs","useEffect","handleQueryChange","next","allEmojis","c","searchResults","computedState","getShortcode","scrollToCategory","id","group","scroller","top","rootClass","styles","emptyIllustration","SearchIllustration","renderEmoji","displayed","jsx","EmojiButton","renderBody","EmptyState","jsxs","MenuGroupHeading","cat","el","SearchInput","e","IconButton","Icon","CloseIcon","Scrollbar","Fragment","Emoji","Button"],"mappings":"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"}

package/dist/components/emoji-popover/EmojiPopover.d.ts

@@ -0,0 +1,34 @@
+import { ComponentType } from 'react';
+export interface EmojiCategory {
+    id: string;
+    label: string;
+    /** Icon component rendered in the category navigation bar. */
+    icon: ComponentType;
+    emojis: string[];
+    /** When false the row does not wrap (e.g. Recently Used). @default true */
+    wrap?: boolean;
+}
+export interface EmojiPopoverProps {
+    className?: string;
+    /** Emoji categories to display, supplied by the host. */
+    categories: EmojiCategory[];
+    /** Map of base emoji → shortcode name used for footer display. */
+    shortcodes?: Record<string, string>;
+    /** Pre-seeds the search field. Useful for static specimen demos. */
+    defaultQuery?: string;
+    /** Focus the search field on mount. */
+    autoFocus?: boolean;
+    /** Called with the selected emoji character. */
+    onEmojiSelect?: (emoji: string) => void;
+    /**
+     * Called on every query change. Use this to trigger async custom-emoji
+     * searches on the host side; local filtering over `categories` always runs.
+     */
+    onSearch?: (query: string) => void;
+    /** Shows a tertiary button in the footer right. Omit to hide the button. */
+    onCustomEmojiClick?: () => void;
+    /** Label for the custom emoji button. @default 'Custom emoji' */
+    customEmojiLabel?: string;
+}
+export default function EmojiPopover({ className, categories, shortcodes, defaultQuery, autoFocus, onEmojiSelect, onSearch, onCustomEmojiClick, customEmojiLabel, }: EmojiPopoverProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EmojiPopover.d.ts.map

package/dist/components/emoji-popover/EmojiPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPopover.d.ts","sourceRoot":"","sources":["../../../src/components/emoji-popover/EmojiPopover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAc3C,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,4EAA4E;IAC5E,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAkBD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,UAAU,EACV,UAAe,EACf,YAAiB,EACjB,SAAiB,EACjB,aAAa,EACb,QAAQ,EACR,kBAAkB,EAClB,gBAAiC,GAClC,EAAE,iBAAiB,2CAuOnB"}