@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-cjs/lib/ui/components/primitives/Input.js

@@ -0,0 +1,155 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Input_exports = {};
+__export(Input_exports, {
+  Input: () => Input
+});
+module.exports = __toCommonJS(Input_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_classnames = __toESM(require("classnames"));
+var React = __toESM(require("react"));
+var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
+var import_Icon = require("./Icon");
+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 = (0, import_editor.useEditor)();
+  const rInputRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => rInputRef.current);
+  const msg = (0, import_useTranslation.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();
+          (0, import_editor.stopEventPropagation)(e);
+          onComplete?.(e.currentTarget.value);
+          break;
+        }
+        case "Escape": {
+          e.currentTarget.value = rInitialValue.current;
+          e.currentTarget.blur();
+          (0, import_editor.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__ */ (0, import_jsx_runtime.jsxs)("div", { draggable: false, className: "tlui-input__wrapper", children: [
+    children,
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { children: msg(label) }),
+    iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { icon: iconLeft, className: "tlui-icon-left", small: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        ref: rInputRef,
+        className: (0, import_classnames.default)("tlui-input", className),
+        type: "text",
+        defaultValue,
+        onKeyUp: handleKeyUp,
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        autoFocus: autofocus,
+        placeholder,
+        value
+      }
+    ),
+    icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { icon, small: !!label })
+  ] });
+});
+//# sourceMappingURL=Input.js.map

package/dist-cjs/lib/ui/components/primitives/Input.js.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgJE;AAhJF,oBAAgD;AAChD,wBAAuB;AACvB,YAAuB;AAEvB,4BAA+B;AAE/B,kBAAqB;AA+Bd,MAAM,QAAQ,MAAM,WAA6C,SAASA,OAChF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kDAAkD;AAAA,EAClD;AAAA,EACA;AACD,GACA,KACC;AACD,QAAM,aAAS,yBAAU;AACzB,QAAM,YAAY,MAAM,OAAyB,IAAI;AAGrD,QAAM,oBAAoB,KAAK,MAAM,UAAU,OAA2B;AAE1E,QAAM,UAAM,sCAAe;AAC3B,QAAM,gBAAgB,MAAM,OAAe,gBAAgB,EAAE;AAC7D,QAAM,gBAAgB,MAAM,OAAe,gBAAgB,EAAE;AAE7D,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,KAAK;AACtD,QAAM,cAAc,MAAM;AAAA,IACzB,CAAC,MAA0C;AAC1C,mBAAa,IAAI;AACjB,YAAM,MAAM,EAAE;AACd,oBAAc,UAAU,IAAI;AAC5B,4BAAsB,MAAM;AAC3B,YAAI,YAAY;AACf,cAAI,OAAO;AAAA,QACZ;AAAA,MACD,CAAC;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EACZ;AAEA,QAAM,eAAe,MAAM;AAAA,IAC1B,CAAC,MAA2C;AAC3C,YAAMC,SAAQ,EAAE,cAAc;AAC9B,oBAAc,UAAUA;AACxB,sBAAgBA,MAAK;AAAA,IACtB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,cAAc,MAAM;AAAA,IACzB,CAAC,MAA6C;AAC7C,cAAQ,EAAE,KAAK;AAAA,QACd,KAAK,SAAS;AACb,YAAE,cAAc,KAAK;AACrB,kDAAqB,CAAC;AACtB,uBAAa,EAAE,cAAc,KAAK;AAClC;AAAA,QACD;AAAA,QACA,KAAK,UAAU;AACd,YAAE,cAAc,QAAQ,cAAc;AACtC,YAAE,cAAc,KAAK;AACrB,kDAAqB,CAAC;AACtB,qBAAW,EAAE,cAAc,KAAK;AAChC;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAC,YAAY,QAAQ;AAAA,EACtB;AAEA,QAAM,aAAa,MAAM;AAAA,IACxB,CAAC,MAA0C;AAC1C,mBAAa,KAAK;AAClB,YAAMA,SAAQ,EAAE,cAAc;AAC9B,eAASA,MAAK;AAAA,IACf;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,UAAU,MAAM;AACrB,QAAI,CAAC,OAAO,YAAY;AAAO;AAE/B,UAAM,iBAAiB,OAAO;AAC9B,QAAI,aAAa,mDAAmD,gBAAgB;AACnF,YAAM,mBAAmB,MAAM;AAC9B,kBAAU,SAAS,eAAe,EAAE,OAAO,SAAS,CAAC;AAAA,MACtD;AACA,qBAAe,iBAAiB,UAAU,gBAAgB;AAC1D,qBAAe,iBAAiB,UAAU,gBAAgB;AAE1D,4BAAsB,MAAM;AAC3B,kBAAU,SAAS,eAAe,EAAE,OAAO,SAAS,CAAC;AAAA,MACtD,CAAC;AAED,aAAO,MAAM;AACZ,uBAAe,oBAAoB,UAAU,gBAAgB;AAC7D,uBAAe,oBAAoB,UAAU,gBAAgB;AAAA,MAC9D;AAAA,IACD;AAAA,EACD,GAAG,CAAC,QAAQ,WAAW,+CAA+C,CAAC;AAEvE,SACC,6CAAC,SAAI,WAAW,OAAO,WAAU,uBAC/B;AAAA;AAAA,IACA,SAAS,4CAAC,WAAO,cAAI,KAAK,GAAE;AAAA,IAC5B,YAAY,4CAAC,oBAAK,MAAM,UAAU,WAAU,kBAAiB,OAAK,MAAC;AAAA,IACpE;AAAA,MAAC;AAAA;AAAA,QACA,KAAK;AAAA,QACL,eAAW,kBAAAC,SAAW,cAAc,SAAS;AAAA,QAC7C,MAAK;AAAA,QACL;AAAA,QACA,SAAS;AAAA,QACT,UAAU;AAAA,QACV,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,WAAW;AAAA,QACX;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IACC,QAAQ,4CAAC,oBAAK,MAAY,OAAO,CAAC,CAAC,OAAO;AAAA,KAC5C;AAEF,CAAC;",
+  "names": ["Input", "value", "classNames"]
+}

package/dist-cjs/lib/ui/components/primitives/Kbd.js

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Kbd_exports = {};
+__export(Kbd_exports, {
+  Kbd: () => Kbd
+});
+module.exports = __toCommonJS(Kbd_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_shared = require("./shared");
+function Kbd({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { className: "tlui-kbd", children: (0, import_shared.kbd)(children).map((k, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: k }, i)) });
+}
+//# sourceMappingURL=Kbd.js.map

package/dist-cjs/lib/ui/components/primitives/Kbd.js.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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYI;AAZJ,oBAAoB;AAQb,SAAS,IAAI,EAAE,SAAS,GAAa;AAC3C,SACC,4CAAC,SAAI,WAAU,YACb,iCAAI,QAAQ,EAAE,IAAI,CAAC,GAAG,MACtB,4CAAC,UAAc,eAAJ,CAAM,CACjB,GACF;AAEF;",
+  "names": []
+}

package/dist-cjs/lib/ui/components/primitives/Popover.js

@@ -0,0 +1,69 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Popover_exports = {};
+__export(Popover_exports, {
+  Popover: () => Popover,
+  PopoverContent: () => PopoverContent,
+  PopoverTrigger: () => PopoverTrigger
+});
+module.exports = __toCommonJS(Popover_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
+var import_useMenuIsOpen = require("../../hooks/useMenuIsOpen");
+const Popover = ({ id, children, onOpenChange, open }) => {
+  const [isOpen, handleOpenChange] = (0, import_useMenuIsOpen.useMenuIsOpen)(id, onOpenChange);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    PopoverPrimitive.Root,
+    {
+      onOpenChange: handleOpenChange,
+      open: open || isOpen,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-popover", children })
+    }
+  );
+};
+const PopoverTrigger = ({ children, disabled, "data-testid": testId }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Trigger, { "data-testid": testId, disabled, asChild: true, dir: "ltr", children });
+};
+const PopoverContent = ({ side, children, align = "center", sideOffset = 8, alignOffset = 0 }) => {
+  const container = (0, import_editor.useContainer)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    PopoverPrimitive.Content,
+    {
+      className: "tlui-popover__content",
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      dir: "ltr",
+      children
+    }
+  ) });
+};
+//# sourceMappingURL=Popover.js.map

package/dist-cjs/lib/ui/components/primitives/Popover.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/Popover.tsx"],
+  "sourcesContent": ["import { useContainer } from '@bigbluebutton/editor'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport React, { FC } from 'react'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\n\ntype PopoverProps = {\n\tid: string\n\topen?: boolean\n\tchildren: React.ReactNode\n\tonOpenChange?: (isOpen: boolean) => void\n}\n\nexport const Popover: FC<PopoverProps> = ({ id, children, onOpenChange, open }) => {\n\tconst [isOpen, handleOpenChange] = useMenuIsOpen(id, onOpenChange)\n\n\treturn (\n\t\t<PopoverPrimitive.Root\n\t\t\tonOpenChange={handleOpenChange}\n\t\t\topen={open || isOpen /* allow debugging */}\n\t\t>\n\t\t\t<div className=\"tlui-popover\">{children}</div>\n\t\t</PopoverPrimitive.Root>\n\t)\n}\n\nexport const PopoverTrigger: FC<{\n\tchildren: React.ReactNode\n\tdisabled?: boolean\n\tclassName?: string\n\t'data-testid'?: string\n}> = ({ children, disabled, 'data-testid': testId }) => {\n\treturn (\n\t\t<PopoverPrimitive.Trigger data-testid={testId} disabled={disabled} asChild dir=\"ltr\">\n\t\t\t{children}\n\t\t</PopoverPrimitive.Trigger>\n\t)\n}\nexport const PopoverContent: FC<{\n\tchildren: React.ReactNode\n\tside: 'top' | 'bottom' | 'left' | 'right'\n\talign?: 'start' | 'center' | 'end'\n\talignOffset?: number\n\tsideOffset?: number\n}> = ({ side, children, align = 'center', sideOffset = 8, alignOffset = 0 }) => {\n\tconst container = useContainer()\n\treturn (\n\t\t<PopoverPrimitive.Portal container={container}>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\tclassName=\"tlui-popover__content\"\n\t\t\t\tside={side}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\talign={align}\n\t\t\t\talignOffset={alignOffset}\n\t\t\t\tdir=\"ltr\"\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{/* <StyledArrow /> */}\n\t\t\t</PopoverPrimitive.Content>\n\t\t</PopoverPrimitive.Portal>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBG;AApBH,oBAA6B;AAC7B,uBAAkC;AAElC,2BAA8B;AASvB,MAAM,UAA4B,CAAC,EAAE,IAAI,UAAU,cAAc,KAAK,MAAM;AAClF,QAAM,CAAC,QAAQ,gBAAgB,QAAI,oCAAc,IAAI,YAAY;AAEjE,SACC;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACA,cAAc;AAAA,MACd,MAAM,QAAQ;AAAA,MAEd,sDAAC,SAAI,WAAU,gBAAgB,UAAS;AAAA;AAAA,EACzC;AAEF;AAEO,MAAM,iBAKR,CAAC,EAAE,UAAU,UAAU,eAAe,OAAO,MAAM;AACvD,SACC,4CAAC,iBAAiB,SAAjB,EAAyB,eAAa,QAAQ,UAAoB,SAAO,MAAC,KAAI,OAC7E,UACF;AAEF;AACO,MAAM,iBAMR,CAAC,EAAE,MAAM,UAAU,QAAQ,UAAU,aAAa,GAAG,cAAc,EAAE,MAAM;AAC/E,QAAM,gBAAY,4BAAa;AAC/B,SACC,4CAAC,iBAAiB,QAAjB,EAAwB,WACxB;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAI;AAAA,MAEH;AAAA;AAAA,EAEF,GACD;AAEF;",
+  "names": []
+}

package/dist-cjs/lib/ui/components/primitives/Slider.js

@@ -0,0 +1,69 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Slider_exports = {};
+__export(Slider_exports, {
+  Slider: () => Slider
+});
+module.exports = __toCommonJS(Slider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_react_slider = require("@radix-ui/react-slider");
+var import_react = require("react");
+var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
+const Slider = (0, import_react.memo)(function Slider2(props) {
+  const { title, steps, value, label, onValueChange } = props;
+  const editor = (0, import_editor.useEditor)();
+  const msg = (0, import_useTranslation.useTranslation)();
+  const handleValueChange = (0, import_react.useCallback)(
+    (value2) => {
+      onValueChange(value2[0], true);
+    },
+    [onValueChange]
+  );
+  const handlePointerDown = (0, import_react.useCallback)(() => {
+    editor.mark("click slider");
+  }, [editor]);
+  const handlePointerUp = (0, import_react.useCallback)(() => {
+    if (!value)
+      return;
+    onValueChange(value, false);
+  }, [value, onValueChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-slider__container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_react_slider.Root,
+    {
+      "data-testid": props["data-testid"],
+      className: "tlui-slider",
+      "area-label": "Opacity",
+      dir: "ltr",
+      min: 0,
+      max: steps,
+      step: 1,
+      value: value ? [value] : void 0,
+      onPointerDown: handlePointerDown,
+      onValueChange: handleValueChange,
+      onPointerUp: handlePointerUp,
+      title: title + " \u2014 " + msg(label),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slider.Track, { className: "tlui-slider__track", dir: "ltr", children: value !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slider.Range, { className: "tlui-slider__range", dir: "ltr" }) }),
+        value !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slider.Thumb, { className: "tlui-slider__thumb", dir: "ltr" })
+      ]
+    }
+  ) });
+});
+//# sourceMappingURL=Slider.js.map

package/dist-cjs/lib/ui/components/primitives/Slider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/Slider.tsx"],
+  "sourcesContent": ["import { useEditor } from '@bigbluebutton/editor'\nimport { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport { memo, useCallback } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\n\n/** @internal */\nexport interface SliderProps {\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange: (value: number, emphemeral: boolean) => void\n\t'data-testid'?: string\n}\n\n/** @internal */\nexport const Slider = memo(function Slider(props: SliderProps) {\n\tconst { title, steps, value, label, onValueChange } = props\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0], true)\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\teditor.mark('click slider')\n\t}, [editor])\n\n\tconst handlePointerUp = useCallback(() => {\n\t\tif (!value) return\n\t\tonValueChange(value, false)\n\t}, [value, onValueChange])\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<Root\n\t\t\t\tdata-testid={props['data-testid']}\n\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\tarea-label=\"Opacity\"\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tmin={0}\n\t\t\t\tmax={steps}\n\t\t\t\tstep={1}\n\t\t\t\tvalue={value ? [value] : undefined}\n\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonPointerUp={handlePointerUp}\n\t\t\t\ttitle={title + ' \u2014 ' + msg(label as TLUiTranslationKey)}\n\t\t\t>\n\t\t\t\t<Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t{value !== null && <Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t</Track>\n\t\t\t\t{value !== null && <Thumb className=\"tlui-slider__thumb\" dir=\"ltr\" />}\n\t\t\t</Root>\n\t\t</div>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCG;AAxCH,oBAA0B;AAC1B,0BAA0C;AAC1C,mBAAkC;AAElC,4BAA+B;AAaxB,MAAM,aAAS,mBAAK,SAASA,QAAO,OAAoB;AAC9D,QAAM,EAAE,OAAO,OAAO,OAAO,OAAO,cAAc,IAAI;AACtD,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,sCAAe;AAE3B,QAAM,wBAAoB;AAAA,IACzB,CAACC,WAAoB;AACpB,oBAAcA,OAAM,CAAC,GAAG,IAAI;AAAA,IAC7B;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,wBAAoB,0BAAY,MAAM;AAC3C,WAAO,KAAK,cAAc;AAAA,EAC3B,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,sBAAkB,0BAAY,MAAM;AACzC,QAAI,CAAC;AAAO;AACZ,kBAAc,OAAO,KAAK;AAAA,EAC3B,GAAG,CAAC,OAAO,aAAa,CAAC;AAEzB,SACC,4CAAC,SAAI,WAAU,0BACd;AAAA,IAAC;AAAA;AAAA,MACA,eAAa,MAAM,aAAa;AAAA,MAChC,WAAU;AAAA,MACV,cAAW;AAAA,MACX,KAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,QAAQ,CAAC,KAAK,IAAI;AAAA,MACzB,eAAe;AAAA,MACf,eAAe;AAAA,MACf,aAAa;AAAA,MACb,OAAO,QAAQ,aAAQ,IAAI,KAA2B;AAAA,MAEtD;AAAA,oDAAC,6BAAM,WAAU,sBAAqB,KAAI,OACxC,oBAAU,QAAQ,4CAAC,6BAAM,WAAU,sBAAqB,KAAI,OAAM,GACpE;AAAA,QACC,UAAU,QAAQ,4CAAC,6BAAM,WAAU,sBAAqB,KAAI,OAAM;AAAA;AAAA;AAAA,EACpE,GACD;AAEF,CAAC;",
+  "names": ["Slider", "value"]
+}

package/dist-cjs/lib/ui/components/primitives/shared.js

@@ -0,0 +1,44 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var shared_exports = {};
+__export(shared_exports, {
+  kbd: () => kbd,
+  kbdStr: () => kbdStr,
+  toStartCase: () => toStartCase
+});
+module.exports = __toCommonJS(shared_exports);
+function toStartCase(str) {
+  return str.split(" ").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(" ");
+}
+const isDarwin = typeof window === "undefined" ? false : window.navigator.userAgent.toLowerCase().indexOf("mac") > -1;
+const cmdKey = isDarwin ? "\u2318" : "Ctrl";
+const altKey = isDarwin ? "\u2325" : "Alt";
+function kbd(str) {
+  return str.split(",")[0].split("").map((sub) => {
+    const subStr = sub.replace(/\$/g, cmdKey).replace(/\?/g, altKey).replace(/!/g, "\u21E7");
+    return subStr[0].toUpperCase() + subStr.slice(1);
+  });
+}
+function kbdStr(str) {
+  return "\u2014 " + str.split(",")[0].split("").map((sub) => {
+    const subStr = sub.replace(/\$/g, cmdKey).replace(/\?/g, altKey).replace(/!/g, "\u21E7");
+    return subStr[0].toUpperCase() + subStr.slice(1);
+  }).join("\u2009");
+}
+//# sourceMappingURL=shared.js.map

package/dist-cjs/lib/ui/components/primitives/shared.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/shared.ts"],
+  "sourcesContent": ["/** @internal */\nexport function toStartCase(str: string) {\n\treturn str\n\t\t.split(' ')\n\t\t.map((s) => s.charAt(0).toUpperCase() + s.slice(1))\n\t\t.join(' ')\n}\n\nconst isDarwin =\n\ttypeof window === 'undefined'\n\t\t? false\n\t\t: window.navigator.userAgent.toLowerCase().indexOf('mac') > -1\nconst cmdKey = isDarwin ? '\u2318' : 'Ctrl'\nconst altKey = isDarwin ? '\u2325' : 'Alt'\n\n/** @internal */\nexport function kbd(str: string) {\n\treturn str\n\t\t.split(',')[0]\n\t\t.split('')\n\t\t.map((sub) => {\n\t\t\tconst subStr = sub.replace(/\\$/g, cmdKey).replace(/\\?/g, altKey).replace(/!/g, '\u21E7')\n\t\t\treturn subStr[0].toUpperCase() + subStr.slice(1)\n\t\t})\n}\n\n/** @internal */\nexport function kbdStr(str: string) {\n\treturn (\n\t\t'\u2014 ' +\n\t\tstr\n\t\t\t.split(',')[0]\n\t\t\t.split('')\n\t\t\t.map((sub) => {\n\t\t\t\tconst subStr = sub.replace(/\\$/g, cmdKey).replace(/\\?/g, altKey).replace(/!/g, '\u21E7')\n\t\t\t\treturn subStr[0].toUpperCase() + subStr.slice(1)\n\t\t\t})\n\t\t\t.join('\u2009')\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACO,SAAS,YAAY,KAAa;AACxC,SAAO,IACL,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC,CAAC,EACjD,KAAK,GAAG;AACX;AAEA,MAAM,WACL,OAAO,WAAW,cACf,QACA,OAAO,UAAU,UAAU,YAAY,EAAE,QAAQ,KAAK,IAAI;AAC9D,MAAM,SAAS,WAAW,WAAM;AAChC,MAAM,SAAS,WAAW,WAAM;AAGzB,SAAS,IAAI,KAAa;AAChC,SAAO,IACL,MAAM,GAAG,EAAE,CAAC,EACZ,MAAM,EAAE,EACR,IAAI,CAAC,QAAQ;AACb,UAAM,SAAS,IAAI,QAAQ,OAAO,MAAM,EAAE,QAAQ,OAAO,MAAM,EAAE,QAAQ,MAAM,QAAG;AAClF,WAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAAA,EAChD,CAAC;AACH;AAGO,SAAS,OAAO,KAAa;AACnC,SACC,YACA,IACE,MAAM,GAAG,EAAE,CAAC,EACZ,MAAM,EAAE,EACR,IAAI,CAAC,QAAQ;AACb,UAAM,SAAS,IAAI,QAAQ,OAAO,MAAM,EAAE,QAAQ,OAAO,MAAM,EAAE,QAAQ,MAAM,QAAG;AAClF,WAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAAA,EAChD,CAAC,EACA,KAAK,QAAG;AAEZ;",
+  "names": []
+}

package/dist-cjs/lib/ui/constants.js

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var constants_exports = {};
+__export(constants_exports, {
+  PORTRAIT_BREAKPOINTS: () => PORTRAIT_BREAKPOINTS
+});
+module.exports = __toCommonJS(constants_exports);
+const PORTRAIT_BREAKPOINTS = [0, 390, 428, 468, 580, 640, 840, 1023];
+//# sourceMappingURL=constants.js.map

package/dist-cjs/lib/ui/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/ui/constants.ts"],
+  "sourcesContent": ["// Breakpoints for portrait\nexport const PORTRAIT_BREAKPOINTS = [0, 390, 428, 468, 580, 640, 840, 1023]\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACO,MAAM,uBAAuB,CAAC,GAAG,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,IAAI;",
+  "names": []
+}