@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-esm/lib/ui/components/primitives/Button.mjs

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import * as React from "react";
+import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { Spinner } from "../Spinner.mjs";
+import { Icon } from "./Icon.mjs";
+import { Kbd } from "./Kbd.mjs";
+const Button = React.forwardRef(function Button2({
+  label,
+  icon,
+  invertIcon,
+  iconLeft,
+  smallIcon,
+  kbd,
+  isChecked = false,
+  type,
+  children,
+  spinner,
+  ...props
+}, ref) {
+  const msg = useTranslation();
+  const labelStr = label ? msg(label) : "";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      draggable: false,
+      type: "button",
+      ...props,
+      title: props.title ?? labelStr,
+      className: classnames("tlui-button", `tlui-button__${type}`, props.className),
+      children: [
+        iconLeft && /* @__PURE__ */ jsx(Icon, { icon: iconLeft, className: "tlui-button__icon-left", small: true }),
+        children,
+        label && /* @__PURE__ */ jsxs("span", { className: "tlui-button__label", draggable: false, children: [
+          labelStr,
+          isChecked && /* @__PURE__ */ jsx(Icon, { icon: "check" })
+        ] }),
+        kbd && /* @__PURE__ */ jsx(Kbd, { children: kbd }),
+        icon && !spinner && /* @__PURE__ */ jsx(Icon, { icon, small: !!label || smallIcon, invertIcon }),
+        spinner && /* @__PURE__ */ jsx(Spinner, {})
+      ]
+    }
+  );
+});
+export {
+  Button
+};
+//# sourceMappingURL=Button.mjs.map

package/dist-esm/lib/ui/components/primitives/Button.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/Button.tsx"],
+  "sourcesContent": ["import classnames from 'classnames'\nimport * as React from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { Spinner } from '../Spinner'\nimport { Icon } from './Icon'\nimport { Kbd } from './Kbd'\n\n/** @public */\nexport interface TLUiButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tloading?: boolean // TODO: loading spinner\n\tdisabled?: boolean\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\ticon?: TLUiIconType | Exclude<string, TLUiIconType>\n\tspinner?: boolean\n\ticonLeft?: TLUiIconType | Exclude<string, TLUiIconType>\n\tsmallIcon?: boolean\n\tkbd?: string\n\tisChecked?: boolean\n\tinvertIcon?: boolean\n\ttype: 'normal' | 'primary' | 'danger' | 'low' | 'icon' | 'tool' | 'menu' | 'help'\n}\n\n/** @public */\nexport const Button = React.forwardRef<HTMLButtonElement, TLUiButtonProps>(function Button(\n\t{\n\t\tlabel,\n\t\ticon,\n\t\tinvertIcon,\n\t\ticonLeft,\n\t\tsmallIcon,\n\t\tkbd,\n\t\tisChecked = false,\n\t\ttype,\n\t\tchildren,\n\t\tspinner,\n\t\t...props\n\t},\n\tref\n) {\n\tconst msg = useTranslation()\n\tconst labelStr = label ? msg(label) : ''\n\n\treturn (\n\t\t<button\n\t\t\tref={ref}\n\t\t\tdraggable={false}\n\t\t\ttype=\"button\"\n\t\t\t{...props}\n\t\t\ttitle={props.title ?? labelStr}\n\t\t\tclassName={classnames('tlui-button', `tlui-button__${type}`, props.className)}\n\t\t>\n\t\t\t{iconLeft && <Icon icon={iconLeft} className=\"tlui-button__icon-left\" small />}\n\t\t\t{children}\n\t\t\t{label && (\n\t\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t\t{labelStr}\n\t\t\t\t\t{isChecked && <Icon icon=\"check\" />}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{kbd && <Kbd>{kbd}</Kbd>}\n\t\t\t{icon && !spinner && (\n\t\t\t\t<Icon icon={icon} small={!!label || smallIcon} invertIcon={invertIcon} />\n\t\t\t)}\n\t\t\t{spinner && <Spinner />}\n\t\t</button>\n\t)\n})\n"],
+  "mappings": "AAqDgB,cAGZ,YAHY;AArDhB,OAAO,gBAAgB;AACvB,YAAY,WAAW;AAEvB,SAAS,sBAAsB;AAE/B,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,WAAW;AAkBb,MAAM,SAAS,MAAM,WAA+C,SAASA,QACnF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GACA,KACC;AACD,QAAM,MAAM,eAAe;AAC3B,QAAM,WAAW,QAAQ,IAAI,KAAK,IAAI;AAEtC,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,OAAO,MAAM,SAAS;AAAA,MACtB,WAAW,WAAW,eAAe,gBAAgB,IAAI,IAAI,MAAM,SAAS;AAAA,MAE3E;AAAA,oBAAY,oBAAC,QAAK,MAAM,UAAU,WAAU,0BAAyB,OAAK,MAAC;AAAA,QAC3E;AAAA,QACA,SACA,qBAAC,UAAK,WAAU,sBAAqB,WAAW,OAC9C;AAAA;AAAA,UACA,aAAa,oBAAC,QAAK,MAAK,SAAQ;AAAA,WAClC;AAAA,QAEA,OAAO,oBAAC,OAAK,eAAI;AAAA,QACjB,QAAQ,CAAC,WACT,oBAAC,QAAK,MAAY,OAAO,CAAC,CAAC,SAAS,WAAW,YAAwB;AAAA,QAEvE,WAAW,oBAAC,WAAQ;AAAA;AAAA;AAAA,EACtB;AAEF,CAAC;",
+  "names": ["Button"]
+}

package/dist-esm/lib/ui/components/primitives/ButtonPicker.mjs

@@ -0,0 +1,96 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  DefaultColorStyle,
+  getDefaultColorTheme,
+  useEditor,
+  useValue
+} from "@bigbluebutton/editor";
+import classNames from "classnames";
+import * as React from "react";
+import { useRef } from "react";
+import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { Button } from "./Button.mjs";
+function _ButtonPicker(props) {
+  const {
+    uiType,
+    items,
+    title,
+    style,
+    value,
+    // columns = clamp(items.length, 2, 4),
+    onValueChange
+  } = props;
+  const editor = useEditor();
+  const msg = useTranslation();
+  const rPointing = useRef(false);
+  const {
+    handleButtonClick,
+    handleButtonPointerDown,
+    handleButtonPointerEnter,
+    handleButtonPointerUp
+  } = React.useMemo(() => {
+    const handlePointerUp = () => {
+      rPointing.current = false;
+      window.removeEventListener("pointerup", handlePointerUp);
+    };
+    const handleButtonClick2 = (e) => {
+      const { id } = e.currentTarget.dataset;
+      if (value.type === "shared" && value.value === id)
+        return;
+      editor.mark("point picker item");
+      onValueChange(style, id, false);
+    };
+    const handleButtonPointerDown2 = (e) => {
+      const { id } = e.currentTarget.dataset;
+      editor.mark("point picker item");
+      onValueChange(style, id, true);
+      rPointing.current = true;
+      window.addEventListener("pointerup", handlePointerUp);
+    };
+    const handleButtonPointerEnter2 = (e) => {
+      if (!rPointing.current)
+        return;
+      const { id } = e.currentTarget.dataset;
+      onValueChange(style, id, true);
+    };
+    const handleButtonPointerUp2 = (e) => {
+      const { id } = e.currentTarget.dataset;
+      onValueChange(style, id, false);
+    };
+    return {
+      handleButtonClick: handleButtonClick2,
+      handleButtonPointerDown: handleButtonPointerDown2,
+      handleButtonPointerEnter: handleButtonPointerEnter2,
+      handleButtonPointerUp: handleButtonPointerUp2
+    };
+  }, [value, editor, onValueChange, style]);
+  const theme = useValue(
+    "theme",
+    () => getDefaultColorTheme({ isDarkMode: editor.user.getIsDarkMode() }),
+    [editor]
+  );
+  return /* @__PURE__ */ jsx("div", { className: classNames("tlui-buttons__grid"), children: items.map((item) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "icon",
+      "data-id": item.value,
+      "data-testid": `style.${uiType}.${item.value}`,
+      "aria-label": item.value,
+      "data-state": value.type === "shared" && value.value === item.value ? "hinted" : void 0,
+      title: title + " \u2014 " + msg(`${uiType}-style.${item.value}`),
+      className: classNames("tlui-button-grid__button"),
+      style: style === DefaultColorStyle ? { color: theme[item.value].solid } : void 0,
+      onPointerEnter: handleButtonPointerEnter,
+      onPointerDown: handleButtonPointerDown,
+      onPointerUp: handleButtonPointerUp,
+      onClick: handleButtonClick,
+      icon: item.icon
+    },
+    item.value
+  )) });
+}
+const ButtonPicker = React.memo(_ButtonPicker);
+export {
+  ButtonPicker
+};
+//# sourceMappingURL=ButtonPicker.mjs.map

package/dist-esm/lib/ui/components/primitives/ButtonPicker.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/ButtonPicker.tsx"],
+  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tSharedStyle,\n\tStyleProp,\n\tTLDefaultColorStyle,\n\tgetDefaultColorTheme,\n\tuseEditor,\n\tuseValue,\n} from '@bigbluebutton/editor'\nimport classNames from 'classnames'\nimport * as React from 'react'\nimport { useRef } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { StyleValuesForUi } from '../StylePanel/styles'\nimport { Button } from './Button'\n\n/** @internal */\nexport interface ButtonPickerProps<T extends string> {\n\ttitle: string\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\tonValueChange: (style: StyleProp<T>, value: T, squashing: boolean) => void\n}\n\nfunction _ButtonPicker<T extends string>(props: ButtonPickerProps<T>) {\n\tconst {\n\t\tuiType,\n\t\titems,\n\t\ttitle,\n\t\tstyle,\n\t\tvalue,\n\t\t// columns = clamp(items.length, 2, 4),\n\t\tonValueChange,\n\t} = props\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst rPointing = useRef(false)\n\n\tconst {\n\t\thandleButtonClick,\n\t\thandleButtonPointerDown,\n\t\thandleButtonPointerEnter,\n\t\thandleButtonPointerUp,\n\t} = React.useMemo(() => {\n\t\tconst handlePointerUp = () => {\n\t\t\trPointing.current = false\n\t\t\twindow.removeEventListener('pointerup', handlePointerUp)\n\t\t}\n\n\t\tconst handleButtonClick = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\teditor.mark('point picker item')\n\t\t\tonValueChange(style, id as T, false)\n\t\t}\n\n\t\tconst handleButtonPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\n\t\t\teditor.mark('point picker item')\n\t\t\tonValueChange(style, id as T, true)\n\n\t\t\trPointing.current = true\n\t\t\twindow.addEventListener('pointerup', handlePointerUp) // see TLD-658\n\t\t}\n\n\t\tconst handleButtonPointerEnter = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tif (!rPointing.current) return\n\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tonValueChange(style, id as T, true)\n\t\t}\n\n\t\tconst handleButtonPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tonValueChange(style, id as T, false)\n\t\t}\n\n\t\treturn {\n\t\t\thandleButtonClick,\n\t\t\thandleButtonPointerDown,\n\t\t\thandleButtonPointerEnter,\n\t\t\thandleButtonPointerUp,\n\t\t}\n\t}, [value, editor, onValueChange, style])\n\n\tconst theme = useValue(\n\t\t'theme',\n\t\t() => getDefaultColorTheme({ isDarkMode: editor.user.getIsDarkMode() }),\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<div className={classNames('tlui-buttons__grid')}>\n\t\t\t{items.map((item) => (\n\t\t\t\t<Button\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tkey={item.value}\n\t\t\t\t\tdata-id={item.value}\n\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\taria-label={item.value}\n\t\t\t\t\tdata-state={value.type === 'shared' && value.value === item.value ? 'hinted' : undefined}\n\t\t\t\t\ttitle={title + ' \u2014 ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)}\n\t\t\t\t\tclassName={classNames('tlui-button-grid__button')}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\tstyle === (DefaultColorStyle as StyleProp<unknown>)\n\t\t\t\t\t\t\t? { color: theme[item.value as TLDefaultColorStyle].solid }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\ticon={item.icon as TLUiIconType}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t)\n}\n\n/** @internal */\nexport const ButtonPicker = React.memo(_ButtonPicker) as typeof _ButtonPicker\n"],
+  "mappings": "AAqGI;AArGJ;AAAA,EACC;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,OAAO,gBAAgB;AACvB,YAAY,WAAW;AACvB,SAAS,cAAc;AAEvB,SAAS,sBAAsB;AAG/B,SAAS,cAAc;AAYvB,SAAS,cAAgC,OAA6B;AACrE,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EACD,IAAI;AACJ,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAE3B,QAAM,YAAY,OAAO,KAAK;AAE9B,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,MAAM,QAAQ,MAAM;AACvB,UAAM,kBAAkB,MAAM;AAC7B,gBAAU,UAAU;AACpB,aAAO,oBAAoB,aAAa,eAAe;AAAA,IACxD;AAEA,UAAMA,qBAAoB,CAAC,MAA6C;AACvE,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAC/B,UAAI,MAAM,SAAS,YAAY,MAAM,UAAU;AAAI;AAEnD,aAAO,KAAK,mBAAmB;AAC/B,oBAAc,OAAO,IAAS,KAAK;AAAA,IACpC;AAEA,UAAMC,2BAA0B,CAAC,MAA6C;AAC7E,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAE/B,aAAO,KAAK,mBAAmB;AAC/B,oBAAc,OAAO,IAAS,IAAI;AAElC,gBAAU,UAAU;AACpB,aAAO,iBAAiB,aAAa,eAAe;AAAA,IACrD;AAEA,UAAMC,4BAA2B,CAAC,MAA6C;AAC9E,UAAI,CAAC,UAAU;AAAS;AAExB,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAC/B,oBAAc,OAAO,IAAS,IAAI;AAAA,IACnC;AAEA,UAAMC,yBAAwB,CAAC,MAA6C;AAC3E,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAC/B,oBAAc,OAAO,IAAS,KAAK;AAAA,IACpC;AAEA,WAAO;AAAA,MACN,mBAAAH;AAAA,MACA,yBAAAC;AAAA,MACA,0BAAAC;AAAA,MACA,uBAAAC;AAAA,IACD;AAAA,EACD,GAAG,CAAC,OAAO,QAAQ,eAAe,KAAK,CAAC;AAExC,QAAM,QAAQ;AAAA,IACb;AAAA,IACA,MAAM,qBAAqB,EAAE,YAAY,OAAO,KAAK,cAAc,EAAE,CAAC;AAAA,IACtE,CAAC,MAAM;AAAA,EACR;AAEA,SACC,oBAAC,SAAI,WAAW,WAAW,oBAAoB,GAC7C,gBAAM,IAAI,CAAC,SACX;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MAEL,WAAS,KAAK;AAAA,MACd,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,MAC1C,cAAY,KAAK;AAAA,MACjB,cAAY,MAAM,SAAS,YAAY,MAAM,UAAU,KAAK,QAAQ,WAAW;AAAA,MAC/E,OAAO,QAAQ,aAAQ,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,MAChF,WAAW,WAAW,0BAA0B;AAAA,MAChD,OACC,UAAW,oBACR,EAAE,OAAO,MAAM,KAAK,KAA4B,EAAE,MAAM,IACxD;AAAA,MAEJ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,aAAa;AAAA,MACb,SAAS;AAAA,MACT,MAAM,KAAK;AAAA;AAAA,IAhBN,KAAK;AAAA,EAiBX,CACA,GACF;AAEF;AAGO,MAAM,eAAe,MAAM,KAAK,aAAa;",
+  "names": ["handleButtonClick", "handleButtonPointerDown", "handleButtonPointerEnter", "handleButtonPointerUp"]
+}

package/dist-esm/lib/ui/components/primitives/Dialog.mjs

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import * as _Dialog from "@radix-ui/react-dialog";
+import classNames from "classnames";
+import { Button } from "./Button.mjs";
+import { Icon } from "./Icon.mjs";
+function Header({ className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: classNames("tlui-dialog__header", className), children });
+}
+function Title({ className, children }) {
+  return /* @__PURE__ */ jsx(_Dialog.DialogTitle, { dir: "ltr", className: classNames("tlui-dialog__header__title", className), children });
+}
+function CloseButton() {
+  return /* @__PURE__ */ jsx("div", { className: "tlui-dialog__header__close", children: /* @__PURE__ */ jsx(_Dialog.DialogClose, { "data-testid": "dialog.close", dir: "ltr", asChild: true, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "icon",
+      "aria-label": "Close",
+      onTouchEnd: (e) => e.target.click(),
+      children: /* @__PURE__ */ jsx(Icon, { small: true, icon: "cross-2" })
+    }
+  ) }) });
+}
+function Body({
+  className,
+  children,
+  style
+}) {
+  return /* @__PURE__ */ jsx("div", { className: classNames("tlui-dialog__body", className), style, children });
+}
+function Footer({ className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: classNames("tlui-dialog__footer", className), children });
+}
+export {
+  Body,
+  CloseButton,
+  Footer,
+  Header,
+  Title
+};
+//# sourceMappingURL=Dialog.mjs.map

package/dist-esm/lib/ui/components/primitives/Dialog.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/Dialog.tsx"],
+  "sourcesContent": ["import * as _Dialog from '@radix-ui/react-dialog'\nimport classNames from 'classnames'\nimport { Button } from './Button'\nimport { Icon } from './Icon'\n\n/** @public */\nexport function Header({ className, children }: { className?: string; children: any }) {\n\treturn <div className={classNames('tlui-dialog__header', className)}>{children}</div>\n}\n\n/** @public */\nexport function Title({ className, children }: { className?: string; children: any }) {\n\treturn (\n\t\t<_Dialog.DialogTitle dir=\"ltr\" className={classNames('tlui-dialog__header__title', className)}>\n\t\t\t{children}\n\t\t</_Dialog.DialogTitle>\n\t)\n}\n\n/** @public */\nexport function CloseButton() {\n\treturn (\n\t\t<div className=\"tlui-dialog__header__close\">\n\t\t\t<_Dialog.DialogClose data-testid=\"dialog.close\" dir=\"ltr\" asChild>\n\t\t\t\t<Button\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t\tonTouchEnd={(e) => (e.target as HTMLButtonElement).click()}\n\t\t\t\t>\n\t\t\t\t\t<Icon small icon=\"cross-2\" />\n\t\t\t\t</Button>\n\t\t\t</_Dialog.DialogClose>\n\t\t</div>\n\t)\n}\n\n/** @public */\nexport function Body({\n\tclassName,\n\tchildren,\n\tstyle,\n}: {\n\tclassName?: string\n\tchildren: any\n\tstyle?: React.CSSProperties\n}) {\n\treturn (\n\t\t<div className={classNames('tlui-dialog__body', className)} style={style}>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\n/** @public */\nexport function Footer({ className, children }: { className?: string; children: any }) {\n\treturn <div className={classNames('tlui-dialog__footer', className)}>{children}</div>\n}\n"],
+  "mappings": "AAOQ;AAPR,YAAY,aAAa;AACzB,OAAO,gBAAgB;AACvB,SAAS,cAAc;AACvB,SAAS,YAAY;AAGd,SAAS,OAAO,EAAE,WAAW,SAAS,GAA0C;AACtF,SAAO,oBAAC,SAAI,WAAW,WAAW,uBAAuB,SAAS,GAAI,UAAS;AAChF;AAGO,SAAS,MAAM,EAAE,WAAW,SAAS,GAA0C;AACrF,SACC,oBAAC,QAAQ,aAAR,EAAoB,KAAI,OAAM,WAAW,WAAW,8BAA8B,SAAS,GAC1F,UACF;AAEF;AAGO,SAAS,cAAc;AAC7B,SACC,oBAAC,SAAI,WAAU,8BACd,8BAAC,QAAQ,aAAR,EAAoB,eAAY,gBAAe,KAAI,OAAM,SAAO,MAChE;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,cAAW;AAAA,MACX,YAAY,CAAC,MAAO,EAAE,OAA6B,MAAM;AAAA,MAEzD,8BAAC,QAAK,OAAK,MAAC,MAAK,WAAU;AAAA;AAAA,EAC5B,GACD,GACD;AAEF;AAGO,SAAS,KAAK;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACD,GAIG;AACF,SACC,oBAAC,SAAI,WAAW,WAAW,qBAAqB,SAAS,GAAG,OAC1D,UACF;AAEF;AAGO,SAAS,OAAO,EAAE,WAAW,SAAS,GAA0C;AACtF,SAAO,oBAAC,SAAI,WAAW,WAAW,uBAAuB,SAAS,GAAI,UAAS;AAChF;",
+  "names": []
+}

package/dist-esm/lib/ui/components/primitives/DropdownMenu.mjs

@@ -0,0 +1,157 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { preventDefault, useContainer } from "@bigbluebutton/editor";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { useMenuIsOpen } from "../../hooks/useMenuIsOpen.mjs";
+import { Button } from "./Button.mjs";
+import { Icon } from "./Icon.mjs";
+function Root({
+  id,
+  children,
+  modal = false,
+  debugOpen = false
+}) {
+  const [open, onOpenChange] = useMenuIsOpen(id);
+  return /* @__PURE__ */ jsx(DropdownMenu.Root, { open: debugOpen || open, dir: "ltr", modal, onOpenChange, children });
+}
+function Trigger({
+  children,
+  "data-testid": testId
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.Trigger,
+    {
+      dir: "ltr",
+      "data-testid": testId,
+      asChild: true,
+      onTouchEnd: (e) => preventDefault(e),
+      children
+    }
+  );
+}
+function Content({
+  side = "bottom",
+  align = "start",
+  sideOffset = 8,
+  alignOffset = 8,
+  children
+}) {
+  const container = useContainer();
+  return /* @__PURE__ */ jsx(DropdownMenu.Portal, { container, children: /* @__PURE__ */ jsx(
+    DropdownMenu.Content,
+    {
+      className: "tlui-menu",
+      align,
+      sideOffset,
+      side,
+      alignOffset,
+      collisionPadding: 4,
+      children
+    }
+  ) });
+}
+function Sub({ id, children }) {
+  const [open, onOpenChange] = useMenuIsOpen(id);
+  return /* @__PURE__ */ jsx(DropdownMenu.Sub, { open, onOpenChange, children });
+}
+function SubTrigger({
+  label,
+  "data-testid": testId,
+  "data-direction": dataDirection
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu.SubTrigger, { dir: "ltr", "data-direction": dataDirection, "data-testid": testId, asChild: true, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "menu",
+      className: "tlui-menu__submenu__trigger",
+      label,
+      icon: "chevron-right"
+    }
+  ) });
+}
+function SubContent({
+  alignOffset = 0,
+  sideOffset = 5,
+  children
+}) {
+  const container = useContainer();
+  return /* @__PURE__ */ jsx(DropdownMenu.Portal, { container, children: /* @__PURE__ */ jsx(
+    DropdownMenu.SubContent,
+    {
+      className: "tlui-menu tlui-menu__submenu__content",
+      alignOffset,
+      sideOffset,
+      collisionPadding: 4,
+      children
+    }
+  ) });
+}
+function Group({
+  children,
+  size = "medium"
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu.Group, { dir: "ltr", className: "tlui-menu__group", "data-size": size, children });
+}
+function Indicator() {
+  return /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { dir: "ltr", asChild: true, children: /* @__PURE__ */ jsx(Icon, { icon: "check" }) });
+}
+function Item({ noClose, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.Item,
+    {
+      dir: "ltr",
+      asChild: true,
+      onClick: noClose || props.isChecked !== void 0 ? preventDefault : void 0,
+      children: /* @__PURE__ */ jsx(Button, { ...props })
+    }
+  );
+}
+function CheckboxItem({ children, onSelect, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu.CheckboxItem,
+    {
+      dir: "ltr",
+      className: "tlui-button tlui-button__menu tlui-button__checkbox",
+      onSelect: (e) => {
+        onSelect?.(e);
+        preventDefault(e);
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { small: true, icon: rest.checked ? "check" : "checkbox-empty" }),
+        children
+      ]
+    }
+  );
+}
+function RadioItem({ children, onSelect, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu.CheckboxItem,
+    {
+      dir: "ltr",
+      className: "tlui-button tlui-button__menu tlui-button__checkbox",
+      onSelect: (e) => {
+        onSelect?.(e);
+        preventDefault(e);
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "tlui-button__checkbox__indicator", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { dir: "ltr", children: /* @__PURE__ */ jsx(Icon, { icon: "check", small: true }) }) }),
+        children
+      ]
+    }
+  );
+}
+export {
+  CheckboxItem,
+  Content,
+  Group,
+  Indicator,
+  Item,
+  RadioItem,
+  Root,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger
+};
+//# sourceMappingURL=DropdownMenu.mjs.map

package/dist-esm/lib/ui/components/primitives/DropdownMenu.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/DropdownMenu.tsx"],
+  "sourcesContent": ["import { preventDefault, useContainer } from '@bigbluebutton/editor'\nimport * as DropdownMenu from '@radix-ui/react-dropdown-menu'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { Button, TLUiButtonProps } from './Button'\nimport { Icon } from './Icon'\n\n/** @public */\nexport function Root({\n\tid,\n\tchildren,\n\tmodal = false,\n\tdebugOpen = false,\n}: {\n\tid: string\n\tchildren: any\n\tmodal?: boolean\n\tdebugOpen?: boolean\n}) {\n\tconst [open, onOpenChange] = useMenuIsOpen(id)\n\n\treturn (\n\t\t<DropdownMenu.Root open={debugOpen || open} dir=\"ltr\" modal={modal} onOpenChange={onOpenChange}>\n\t\t\t{children}\n\t\t</DropdownMenu.Root>\n\t)\n}\n\n/** @public */\nexport function Trigger({\n\tchildren,\n\t'data-testid': testId,\n}: {\n\tchildren: any\n\t'data-testid'?: string\n}) {\n\treturn (\n\t\t<DropdownMenu.Trigger\n\t\t\tdir=\"ltr\"\n\t\t\tdata-testid={testId}\n\t\t\tasChild\n\t\t\t// Firefox fix: Stop the dropdown immediately closing after touch\n\t\t\tonTouchEnd={(e) => preventDefault(e)}\n\t\t>\n\t\t\t{children}\n\t\t</DropdownMenu.Trigger>\n\t)\n}\n\n/** @public */\nexport function Content({\n\tside = 'bottom',\n\talign = 'start',\n\tsideOffset = 8,\n\talignOffset = 8,\n\tchildren,\n}: {\n\tchildren: any\n\talignOffset?: number\n\tsideOffset?: number\n\talign?: 'start' | 'center' | 'end'\n\tside?: 'bottom' | 'top' | 'right' | 'left'\n}) {\n\tconst container = useContainer()\n\n\treturn (\n\t\t<DropdownMenu.Portal container={container}>\n\t\t\t<DropdownMenu.Content\n\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\talign={align}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tside={side}\n\t\t\t\talignOffset={alignOffset}\n\t\t\t\tcollisionPadding={4}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</DropdownMenu.Content>\n\t\t</DropdownMenu.Portal>\n\t)\n}\n\n/** @public */\nexport function Sub({ id, children }: { id: string; children: any }) {\n\tconst [open, onOpenChange] = useMenuIsOpen(id)\n\n\treturn (\n\t\t<DropdownMenu.Sub open={open} onOpenChange={onOpenChange}>\n\t\t\t{children}\n\t\t</DropdownMenu.Sub>\n\t)\n}\n\n/** @public */\nexport function SubTrigger({\n\tlabel,\n\t'data-testid': testId,\n\t'data-direction': dataDirection,\n}: {\n\tlabel: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\t'data-testid'?: string\n\t'data-direction'?: 'left' | 'right'\n}) {\n\treturn (\n\t\t<DropdownMenu.SubTrigger dir=\"ltr\" data-direction={dataDirection} data-testid={testId} asChild>\n\t\t\t<Button\n\t\t\t\ttype=\"menu\"\n\t\t\t\tclassName=\"tlui-menu__submenu__trigger\"\n\t\t\t\tlabel={label}\n\t\t\t\ticon=\"chevron-right\"\n\t\t\t/>\n\t\t</DropdownMenu.SubTrigger>\n\t)\n}\n\n/** @public */\nexport function SubContent({\n\talignOffset = 0,\n\tsideOffset = 5,\n\tchildren,\n}: {\n\talignOffset?: number\n\tsideOffset?: number\n\tchildren: any\n}) {\n\tconst container = useContainer()\n\treturn (\n\t\t<DropdownMenu.Portal container={container}>\n\t\t\t<DropdownMenu.SubContent\n\t\t\t\tclassName=\"tlui-menu tlui-menu__submenu__content\"\n\t\t\t\talignOffset={alignOffset}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tcollisionPadding={4}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</DropdownMenu.SubContent>\n\t\t</DropdownMenu.Portal>\n\t)\n}\n\n/** @public */\nexport function Group({\n\tchildren,\n\tsize = 'medium',\n}: {\n\tchildren: any\n\tsize?: 'tiny' | 'small' | 'medium' | 'wide'\n}) {\n\treturn (\n\t\t<DropdownMenu.Group dir=\"ltr\" className=\"tlui-menu__group\" data-size={size}>\n\t\t\t{children}\n\t\t</DropdownMenu.Group>\n\t)\n}\n\n/** @public */\nexport function Indicator() {\n\treturn (\n\t\t<DropdownMenu.ItemIndicator dir=\"ltr\" asChild>\n\t\t\t<Icon icon=\"check\" />\n\t\t</DropdownMenu.ItemIndicator>\n\t)\n}\n\n/** @public */\nexport interface DropdownMenuItemProps extends TLUiButtonProps {\n\tnoClose?: boolean\n}\n\n/** @public */\nexport function Item({ noClose, ...props }: DropdownMenuItemProps) {\n\treturn (\n\t\t<DropdownMenu.Item\n\t\t\tdir=\"ltr\"\n\t\t\tasChild\n\t\t\tonClick={noClose || props.isChecked !== undefined ? preventDefault : undefined}\n\t\t>\n\t\t\t<Button {...props} />\n\t\t</DropdownMenu.Item>\n\t)\n}\n\n/** @public */\nexport interface DropdownMenuCheckboxItemProps {\n\tchecked?: boolean\n\tonSelect?: (e: Event) => void\n\tdisabled?: boolean\n\ttitle: string\n\tchildren: any\n}\n\n/** @public */\nexport function CheckboxItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps) {\n\treturn (\n\t\t<DropdownMenu.CheckboxItem\n\t\t\tdir=\"ltr\"\n\t\t\tclassName=\"tlui-button tlui-button__menu tlui-button__checkbox\"\n\t\t\tonSelect={(e) => {\n\t\t\t\tonSelect?.(e)\n\t\t\t\tpreventDefault(e)\n\t\t\t}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<Icon small icon={rest.checked ? 'check' : 'checkbox-empty'} />\n\t\t\t{children}\n\t\t</DropdownMenu.CheckboxItem>\n\t)\n}\n\n/** @public */\nexport function RadioItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps) {\n\treturn (\n\t\t<DropdownMenu.CheckboxItem\n\t\t\tdir=\"ltr\"\n\t\t\tclassName=\"tlui-button tlui-button__menu tlui-button__checkbox\"\n\t\t\tonSelect={(e) => {\n\t\t\t\tonSelect?.(e)\n\t\t\t\tpreventDefault(e)\n\t\t\t}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<div className=\"tlui-button__checkbox__indicator\">\n\t\t\t\t<DropdownMenu.ItemIndicator dir=\"ltr\">\n\t\t\t\t\t<Icon icon=\"check\" small />\n\t\t\t\t</DropdownMenu.ItemIndicator>\n\t\t\t</div>\n\t\t\t{children}\n\t\t</DropdownMenu.CheckboxItem>\n\t)\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-esm/lib/ui/components/primitives/Icon.mjs

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { memo, useLayoutEffect, useRef } from "react";
+import { useAssetUrls } from "../../hooks/useAssetUrls.mjs";
+const Icon = memo(function Icon2({
+  small,
+  invertIcon,
+  icon,
+  color,
+  className,
+  ...props
+}) {
+  const assetUrls = useAssetUrls();
+  const asset = assetUrls.icons[icon] ?? assetUrls.icons["question-mark-circle"];
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    if (!asset) {
+      console.error(`Icon not found: ${icon}. Add it to the assetUrls.icons object.`);
+    }
+    if (ref?.current) {
+      ref.current.style.webkitMask = `url(${asset}) center 100% / 100% no-repeat`;
+    }
+  }, [ref, asset, icon]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: classNames("tlui-icon", { "tlui-icon__small": small }, className),
+      style: {
+        color,
+        mask: `url(${asset}) center 100% / 100% no-repeat`,
+        transform: invertIcon ? "scale(-1, 1)" : void 0
+      }
+    }
+  );
+});
+export {
+  Icon
+};
+//# sourceMappingURL=Icon.mjs.map

package/dist-esm/lib/ui/components/primitives/Icon.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/Icon.tsx"],
+  "sourcesContent": ["import classNames from 'classnames'\nimport { memo, useLayoutEffect, useRef } from 'react'\nimport { useAssetUrls } from '../../hooks/useAssetUrls'\nimport { TLUiIconType } from '../../icon-types'\n\n/** @public */\nexport interface TLUiIconProps extends React.HTMLProps<HTMLDivElement> {\n\ticon: TLUiIconType | Exclude<string, TLUiIconType>\n\tsmall?: boolean\n\tcolor?: string\n\tchildren?: undefined\n\tinvertIcon?: boolean\n\tcrossOrigin?: 'anonymous' | 'use-credentials'\n}\n\n/** @public */\nexport const Icon = memo(function Icon({\n\tsmall,\n\tinvertIcon,\n\ticon,\n\tcolor,\n\tclassName,\n\t...props\n}: TLUiIconProps) {\n\tconst assetUrls = useAssetUrls()\n\tconst asset = assetUrls.icons[icon as TLUiIconType] ?? assetUrls.icons['question-mark-circle']\n\tconst ref = useRef<HTMLDivElement>(null)\n\n\tuseLayoutEffect(() => {\n\t\tif (!asset) {\n\t\t\tconsole.error(`Icon not found: ${icon}. Add it to the assetUrls.icons object.`)\n\t\t}\n\n\t\tif (ref?.current) {\n\t\t\t// HACK: Fix for <https://linear.app/tldraw/issue/TLD-1700/dragging-around-with-the-handtool-makes-lots-of-requests-for-icons>\n\t\t\t// It seems that passing `WebkitMask` to react will cause a render on each call, no idea why... but this appears to be the fix.\n\t\t\t// @ts-ignore\n\t\t\t// eslint-disable-next-line deprecation/deprecation\n\t\t\tref.current.style.webkitMask = `url(${asset}) center 100% / 100% no-repeat`\n\t\t}\n\t}, [ref, asset, icon])\n\n\treturn (\n\t\t<div\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\tclassName={classNames('tlui-icon', { 'tlui-icon__small': small }, className)}\n\t\t\tstyle={{\n\t\t\t\tcolor,\n\t\t\t\tmask: `url(${asset}) center 100% / 100% no-repeat`,\n\t\t\t\ttransform: invertIcon ? 'scale(-1, 1)' : undefined,\n\t\t\t}}\n\t\t/>\n\t)\n})\n"],
+  "mappings": "AA2CE;AA3CF,OAAO,gBAAgB;AACvB,SAAS,MAAM,iBAAiB,cAAc;AAC9C,SAAS,oBAAoB;AActB,MAAM,OAAO,KAAK,SAASA,MAAK;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkB;AACjB,QAAM,YAAY,aAAa;AAC/B,QAAM,QAAQ,UAAU,MAAM,IAAoB,KAAK,UAAU,MAAM,sBAAsB;AAC7F,QAAM,MAAM,OAAuB,IAAI;AAEvC,kBAAgB,MAAM;AACrB,QAAI,CAAC,OAAO;AACX,cAAQ,MAAM,mBAAmB,IAAI,yCAAyC;AAAA,IAC/E;AAEA,QAAI,KAAK,SAAS;AAKjB,UAAI,QAAQ,MAAM,aAAa,OAAO,KAAK;AAAA,IAC5C;AAAA,EACD,GAAG,CAAC,KAAK,OAAO,IAAI,CAAC;AAErB,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA,WAAW,WAAW,aAAa,EAAE,oBAAoB,MAAM,GAAG,SAAS;AAAA,MAC3E,OAAO;AAAA,QACN;AAAA,QACA,MAAM,OAAO,KAAK;AAAA,QAClB,WAAW,aAAa,iBAAiB;AAAA,MAC1C;AAAA;AAAA,EACD;AAEF,CAAC;",
+  "names": ["Icon"]
+}

package/dist-esm/lib/ui/components/primitives/Input.mjs

@@ -0,0 +1,125 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { stopEventPropagation, useEditor } from "@bigbluebutton/editor";
+import classNames from "classnames";
+import * as React from "react";
+import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { Icon } from "./Icon.mjs";
+const Input = React.forwardRef(function Input2({
+  className,
+  label,
+  icon,
+  iconLeft,
+  autoselect = false,
+  autofocus = false,
+  defaultValue,
+  placeholder,
+  onComplete,
+  onValueChange,
+  onCancel,
+  onBlur,
+  shouldManuallyMaintainScrollPositionWhenFocused = false,
+  children,
+  value
+}, ref) {
+  const editor = useEditor();
+  const rInputRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => rInputRef.current);
+  const msg = useTranslation();
+  const rInitialValue = React.useRef(defaultValue ?? "");
+  const rCurrentValue = React.useRef(defaultValue ?? "");
+  const [isFocused, setIsFocused] = React.useState(false);
+  const handleFocus = React.useCallback(
+    (e) => {
+      setIsFocused(true);
+      const elm = e.currentTarget;
+      rCurrentValue.current = elm.value;
+      requestAnimationFrame(() => {
+        if (autoselect) {
+          elm.select();
+        }
+      });
+    },
+    [autoselect]
+  );
+  const handleChange = React.useCallback(
+    (e) => {
+      const value2 = e.currentTarget.value;
+      rCurrentValue.current = value2;
+      onValueChange?.(value2);
+    },
+    [onValueChange]
+  );
+  const handleKeyUp = React.useCallback(
+    (e) => {
+      switch (e.key) {
+        case "Enter": {
+          e.currentTarget.blur();
+          stopEventPropagation(e);
+          onComplete?.(e.currentTarget.value);
+          break;
+        }
+        case "Escape": {
+          e.currentTarget.value = rInitialValue.current;
+          e.currentTarget.blur();
+          stopEventPropagation(e);
+          onCancel?.(e.currentTarget.value);
+          break;
+        }
+      }
+    },
+    [onComplete, onCancel]
+  );
+  const handleBlur = React.useCallback(
+    (e) => {
+      setIsFocused(false);
+      const value2 = e.currentTarget.value;
+      onBlur?.(value2);
+    },
+    [onBlur]
+  );
+  React.useEffect(() => {
+    if (!editor.environment.isIos)
+      return;
+    const visualViewport = window.visualViewport;
+    if (isFocused && shouldManuallyMaintainScrollPositionWhenFocused && visualViewport) {
+      const onViewportChange = () => {
+        rInputRef.current?.scrollIntoView({ block: "center" });
+      };
+      visualViewport.addEventListener("resize", onViewportChange);
+      visualViewport.addEventListener("scroll", onViewportChange);
+      requestAnimationFrame(() => {
+        rInputRef.current?.scrollIntoView({ block: "center" });
+      });
+      return () => {
+        visualViewport.removeEventListener("resize", onViewportChange);
+        visualViewport.removeEventListener("scroll", onViewportChange);
+      };
+    }
+  }, [editor, isFocused, shouldManuallyMaintainScrollPositionWhenFocused]);
+  return /* @__PURE__ */ jsxs("div", { draggable: false, className: "tlui-input__wrapper", children: [
+    children,
+    label && /* @__PURE__ */ jsx("label", { children: msg(label) }),
+    iconLeft && /* @__PURE__ */ jsx(Icon, { icon: iconLeft, className: "tlui-icon-left", small: true }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: rInputRef,
+        className: classNames("tlui-input", className),
+        type: "text",
+        defaultValue,
+        onKeyUp: handleKeyUp,
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        autoFocus: autofocus,
+        placeholder,
+        value
+      }
+    ),
+    icon && /* @__PURE__ */ jsx(Icon, { icon, small: !!label })
+  ] });
+});
+export {
+  Input
+};
+//# sourceMappingURL=Input.mjs.map

package/dist-esm/lib/ui/components/primitives/Input.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/Input.tsx"],
+  "sourcesContent": ["import { stopEventPropagation, useEditor } from '@bigbluebutton/editor'\nimport classNames from 'classnames'\nimport * as React from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { Icon } from './Icon'\n\n/** @public */\nexport interface TLUiInputProps {\n\tdisabled?: boolean\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\ticon?: TLUiIconType | Exclude<string, TLUiIconType>\n\ticonLeft?: TLUiIconType | Exclude<string, TLUiIconType>\n\tautofocus?: boolean\n\tautoselect?: boolean\n\tchildren?: any\n\tdefaultValue?: string\n\tplaceholder?: string\n\tonComplete?: (value: string) => void\n\tonValueChange?: (value: string) => void\n\tonCancel?: (value: string) => void\n\tonBlur?: (value: string) => void\n\tclassName?: string\n\t/**\n\t * Usually on iOS when you focus an input, the browser will adjust the viewport to bring the input\n\t * into view. Sometimes this doesn't work properly though - for example, if the input is newly\n\t * created, iOS seems to have a hard time adjusting the viewport for it. This prop allows you to\n\t * opt-in to some extra code to manually bring the input into view when the visual viewport of the\n\t * browser changes, but we don't want to use it everywhere because generally the native behavior\n\t * looks nicer in scenarios where it's sufficient.\n\t */\n\tshouldManuallyMaintainScrollPositionWhenFocused?: boolean\n\tvalue?: string\n}\n\n/** @public */\nexport const Input = React.forwardRef<HTMLInputElement, TLUiInputProps>(function Input(\n\t{\n\t\tclassName,\n\t\tlabel,\n\t\ticon,\n\t\ticonLeft,\n\t\tautoselect = false,\n\t\tautofocus = false,\n\t\tdefaultValue,\n\t\tplaceholder,\n\t\tonComplete,\n\t\tonValueChange,\n\t\tonCancel,\n\t\tonBlur,\n\t\tshouldManuallyMaintainScrollPositionWhenFocused = false,\n\t\tchildren,\n\t\tvalue,\n\t},\n\tref\n) {\n\tconst editor = useEditor()\n\tconst rInputRef = React.useRef<HTMLInputElement>(null)\n\n\t// combine rInputRef and ref\n\tReact.useImperativeHandle(ref, () => rInputRef.current as HTMLInputElement)\n\n\tconst msg = useTranslation()\n\tconst rInitialValue = React.useRef<string>(defaultValue ?? '')\n\tconst rCurrentValue = React.useRef<string>(defaultValue ?? '')\n\n\tconst [isFocused, setIsFocused] = React.useState(false)\n\tconst handleFocus = React.useCallback(\n\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\tsetIsFocused(true)\n\t\t\tconst elm = e.currentTarget as HTMLInputElement\n\t\t\trCurrentValue.current = elm.value\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tif (autoselect) {\n\t\t\t\t\telm.select()\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\t\t[autoselect]\n\t)\n\n\tconst handleChange = React.useCallback(\n\t\t(e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\tconst value = e.currentTarget.value\n\t\t\trCurrentValue.current = value\n\t\t\tonValueChange?.(value)\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handleKeyUp = React.useCallback(\n\t\t(e: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\tswitch (e.key) {\n\t\t\t\tcase 'Enter': {\n\t\t\t\t\te.currentTarget.blur()\n\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\tonComplete?.(e.currentTarget.value)\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'Escape': {\n\t\t\t\t\te.currentTarget.value = rInitialValue.current\n\t\t\t\t\te.currentTarget.blur()\n\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\tonCancel?.(e.currentTarget.value)\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[onComplete, onCancel]\n\t)\n\n\tconst handleBlur = React.useCallback(\n\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\tsetIsFocused(false)\n\t\t\tconst value = e.currentTarget.value\n\t\t\tonBlur?.(value)\n\t\t},\n\t\t[onBlur]\n\t)\n\n\tReact.useEffect(() => {\n\t\tif (!editor.environment.isIos) return\n\n\t\tconst visualViewport = window.visualViewport\n\t\tif (isFocused && shouldManuallyMaintainScrollPositionWhenFocused && visualViewport) {\n\t\t\tconst onViewportChange = () => {\n\t\t\t\trInputRef.current?.scrollIntoView({ block: 'center' })\n\t\t\t}\n\t\t\tvisualViewport.addEventListener('resize', onViewportChange)\n\t\t\tvisualViewport.addEventListener('scroll', onViewportChange)\n\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\trInputRef.current?.scrollIntoView({ block: 'center' })\n\t\t\t})\n\n\t\t\treturn () => {\n\t\t\t\tvisualViewport.removeEventListener('resize', onViewportChange)\n\t\t\t\tvisualViewport.removeEventListener('scroll', onViewportChange)\n\t\t\t}\n\t\t}\n\t}, [editor, isFocused, shouldManuallyMaintainScrollPositionWhenFocused])\n\n\treturn (\n\t\t<div draggable={false} className=\"tlui-input__wrapper\">\n\t\t\t{children}\n\t\t\t{label && <label>{msg(label)}</label>}\n\t\t\t{iconLeft && <Icon icon={iconLeft} className=\"tlui-icon-left\" small />}\n\t\t\t<input\n\t\t\t\tref={rInputRef}\n\t\t\t\tclassName={classNames('tlui-input', className)}\n\t\t\t\ttype=\"text\"\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonKeyUp={handleKeyUp}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tonFocus={handleFocus}\n\t\t\t\tonBlur={handleBlur}\n\t\t\t\tautoFocus={autofocus}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tvalue={value}\n\t\t\t/>\n\t\t\t{icon && <Icon icon={icon} small={!!label} />}\n\t\t</div>\n\t)\n})\n"],
+  "mappings": "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",
+  "names": ["Input", "value"]
+}

package/dist-esm/lib/ui/components/primitives/Kbd.mjs

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { kbd } from "./shared.mjs";
+function Kbd({ children }) {
+  return /* @__PURE__ */ jsx("kbd", { className: "tlui-kbd", children: kbd(children).map((k, i) => /* @__PURE__ */ jsx("span", { children: k }, i)) });
+}
+export {
+  Kbd
+};
+//# sourceMappingURL=Kbd.mjs.map

package/dist-esm/lib/ui/components/primitives/Kbd.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/Kbd.tsx"],
+  "sourcesContent": ["import { kbd } from './shared'\n\n/** @internal */\nexport interface KbdProps {\n\tchildren: string\n}\n\n/** @internal */\nexport function Kbd({ children }: KbdProps) {\n\treturn (\n\t\t<kbd className=\"tlui-kbd\">\n\t\t\t{kbd(children).map((k, i) => (\n\t\t\t\t<span key={i}>{k}</span>\n\t\t\t))}\n\t\t</kbd>\n\t)\n}\n"],
+  "mappings": "AAYI;AAZJ,SAAS,WAAW;AAQb,SAAS,IAAI,EAAE,SAAS,GAAa;AAC3C,SACC,oBAAC,SAAI,WAAU,YACb,cAAI,QAAQ,EAAE,IAAI,CAAC,GAAG,MACtB,oBAAC,UAAc,eAAJ,CAAM,CACjB,GACF;AAEF;",
+  "names": []
+}