@memobit/libs 3.0.0 → 3.1.0

package/dist/components/Drawer/Drawer2.js

@@ -0,0 +1,119 @@
+import './Drawer.css';
+import { Icon as A } from "../Icon/Icon2.js";
+import { useBodyScrollLock as T } from "../../hooks/useBodyScrollLock.js";
+import { Button as i } from "../Button/Button2.js";
+import { Tooltip as w } from "../Tooltip/Tooltip2.js";
+/* empty css       */
+import Z, { useEffect as k, useState as V } from "react";
+import { Fragment as W, jsx as r, jsxs as l } from "react/jsx-runtime";
+var X = 1e3, x = 0, Q = ({ isOpen: d, onClose: n, position: b = "left", width: N = "320px", maxWidth: C = "none", margin: I = 0, borderRadius: g = 0, shadow: E = "none", children: p, title: s, icon: c, className: z = "", showOverlay: S = !0, lockScroll: j = !0, hideClose: F = !1, actions: _ = [], onBack: v, backLabel: $ = "Back", primary: t, secondary: a, footer: m }) => {
+  T(d && j);
+  const [B, D] = V(0);
+  if (k(() => {
+    d && (x += 1, D(x));
+  }, [d]), k(() => {
+    const e = (o) => {
+      o.key === "Escape" && d && n();
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [d, n]), !d) return null;
+  const h = (e) => typeof e == "number" ? `${e}px` : e, f = X + B * 2, L = {
+    "--drawer-width": N,
+    "--drawer-max-width": h(C),
+    "--drawer-margin": h(I),
+    "--drawer-border-radius": h(g),
+    "--drawer-shadow": E,
+    zIndex: f + 1
+  }, R = m || t || a;
+  return /* @__PURE__ */ l(W, { children: [S && /* @__PURE__ */ r("div", {
+    className: "drawer-overlay",
+    onClick: n,
+    style: { zIndex: f }
+  }), /* @__PURE__ */ l("div", {
+    className: `drawer drawer--${b} ${z}`,
+    style: L,
+    children: [
+      /* @__PURE__ */ l("div", {
+        className: "drawer__header",
+        children: [
+          v && /* @__PURE__ */ r(w, {
+            title: $,
+            position: "bottom",
+            children: /* @__PURE__ */ r(i, {
+              className: "drawer__back",
+              onClick: v,
+              size: "small",
+              variant: "ghost",
+              icon: "arrow-left"
+            })
+          }),
+          (s || c) && /* @__PURE__ */ l("h2", {
+            className: "drawer__title",
+            children: [c && /* @__PURE__ */ r(A, { name: c }), s && /* @__PURE__ */ r("span", {
+              className: "drawer__title-text",
+              children: s
+            })]
+          }),
+          _.length > 0 && /* @__PURE__ */ r("div", {
+            className: "drawer__header-actions",
+            children: _.map((e) => {
+              const o = /* @__PURE__ */ r(i, {
+                disabled: e.disabled,
+                onClick: e.onClick,
+                icon: e.icon,
+                emojiIcon: e.emojiIcon,
+                size: e.size ?? "small",
+                variant: e.variant ?? "ghost",
+                children: e.label
+              }), u = e.title ?? e.label;
+              return u ? /* @__PURE__ */ r(w, {
+                title: u,
+                position: "bottom",
+                children: o
+              }, e.id) : /* @__PURE__ */ r(Z.Fragment, { children: o }, e.id);
+            })
+          }),
+          !F && /* @__PURE__ */ r(w, {
+            title: "Close drawer",
+            children: /* @__PURE__ */ r(i, {
+              className: "drawer__close",
+              icon: "clear",
+              onClick: n,
+              size: "medium",
+              variant: "ghost"
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ r("div", {
+        className: "drawer__content",
+        children: p
+      }),
+      R && /* @__PURE__ */ l("div", {
+        className: "drawer__footer",
+        children: [m && /* @__PURE__ */ r("div", {
+          className: "drawer__footer-content",
+          children: m
+        }), (t || a) && /* @__PURE__ */ l("div", {
+          className: "drawer__footer-actions",
+          children: [a && /* @__PURE__ */ r(i, {
+            variant: a.variant || "default",
+            icon: a.icon,
+            disabled: a.disabled,
+            onClick: a.onClick,
+            children: a.text
+          }), t && /* @__PURE__ */ r(i, {
+            variant: t.variant || "info",
+            icon: t.icon,
+            disabled: t.disabled,
+            onClick: t.onClick,
+            children: t.text
+          })]
+        })]
+      })
+    ]
+  })] });
+};
+export {
+  Q as Drawer
+};

package/dist/components/Dropdown/Dropdown.css

@@ -0,0 +1 @@
+.dropdown-container{width:100%;position:relative}.dropdown-container.disabled{cursor:not-allowed;pointer-events:none;opacity:.6}.dropdown-container .dropdown-label{margin-bottom:var(--spacing-8);color:var(--form-control-label-color,var(--body-color));font-size:var(--form-control-label-font-size,var(--font-size-sm));font-weight:var(--form-control-label-font-weight,var(--font-weight-medium));letter-spacing:var(--form-control-label-letter-spacing,normal);text-transform:var(--form-control-label-text-transform,none);display:block}.dropdown-container .dropdown-input-container{background-color:var(--dropdown-header-background-color);width:100%;color:var(--dropdown-header-color);position:relative;overflow:hidden}.dropdown-container .dropdown-input-container .input-text{background-color:#0000}.dropdown-container .dropdown-input-container--has-prefix-icon input[type=text]{padding-left:var(--spacing-40)}.dropdown-container .dropdown-input-container .dropdown-selected-icon{color:var(--dropdown-header-color);align-items:center;display:flex}.dropdown-container .dropdown-input-container .dropdown-selected-icon--prefix{top:50%;left:var(--spacing-12);z-index:1;pointer-events:none;position:absolute;transform:translateY(-50%)}.dropdown-container .dropdown-input-container .dropdown-selected-icon--suffix{padding:0 var(--spacing-4);pointer-events:none}.dropdown-container .dropdown-input-container input[type=text]{transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.dropdown-container .dropdown-input-container .dropdown-value-chip{top:50%;left:var(--spacing-12);z-index:1;align-items:center;gap:var(--spacing-4);padding:var(--spacing-2) var(--spacing-8);border-radius:var(--radius-full);border:var(--spacing-1) solid var(--chip-selected-border-color,var(--body-accent-color));background:var(--chip-selected-background-color,var(--card-background-accent-color));color:var(--chip-selected-color,var(--body-accent-color));font-size:var(--font-size-xs);cursor:pointer;max-width:calc(100% - 80px);display:inline-flex;position:absolute;transform:translateY(-50%)}.dropdown-container .dropdown-input-container .dropdown-value-chip__label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dropdown-container .dropdown-input-container .dropdown-value-chip svg{width:var(--spacing-12);height:var(--spacing-12);flex-shrink:0}.dropdown-container .dropdown-input-container--chips{align-items:center;gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-80) var(--spacing-4) var(--spacing-8);flex-wrap:nowrap;display:flex;overflow:auto hidden}.dropdown-container .dropdown-input-container--chips::-webkit-scrollbar{height:var(--scrollbar-size)}.dropdown-container .dropdown-input-container--chips .input-text-wrapper{flex:1 1 var(--spacing-80);min-width:var(--spacing-80)}.dropdown-container .dropdown-input-container--chips input[type=text]{padding:var(--spacing-4);border:none}.dropdown-container .dropdown-input-container--chips-multiline{min-height:var(--spacing-40);flex-wrap:wrap;overflow:visible}.dropdown-container .dropdown-input-container--chips-multiline .dropdown-actions-buttons{top:var(--spacing-4);transform:none}.dropdown-container .dropdown-input-container .dropdown-chip{align-items:center;gap:var(--spacing-4);padding:var(--spacing-2) var(--spacing-8);border-radius:var(--radius-full);border:var(--spacing-1) solid var(--chip-selected-border-color,var(--body-accent-color));background:var(--chip-selected-background-color,var(--card-background-accent-color));color:var(--chip-selected-color,var(--body-accent-color));font-size:var(--font-size-xs);flex-shrink:0;max-width:100%;display:inline-flex}.dropdown-container .dropdown-input-container .dropdown-chip__label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dropdown-container .dropdown-input-container .dropdown-chip__remove{cursor:pointer;color:inherit;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}.dropdown-container .dropdown-input-container .dropdown-chip__remove svg{width:var(--spacing-12);height:var(--spacing-12)}.dropdown-container .dropdown-input-container .dropdown-selected-count{font-size:var(--font-size-xs);color:var(--body-color-muted);pointer-events:none;position:absolute;bottom:-20px;left:0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons{z-index:1;justify-content:center;align-items:center;height:calc(100% - 2px);padding:0 6px;display:flex;position:absolute;top:50%;right:1px;transform:translateY(-50%)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons:before{content:"";opacity:.9;z-index:-1;position:absolute;inset:0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button{justify-content:center;align-items:center;display:flex}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button{padding:var(--spacing-8) var(--spacing-12);border-radius:0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button span{justify-content:center;align-items:center;display:flex}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button:hover{background-color:var(--dropdown-action-hover-background-color)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button svg{fill:var(--dropdown-action-color)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button svg:hover{fill:var(--dropdown-action-hover-color)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-clear-button:focus{box-shadow:0 0 0 var(--spacing-2) var(--form-control-focus-ring);outline:none}@media (width<=768px){.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-clear-button{width:var(--spacing-40);height:var(--spacing-40);right:var(--spacing-40)}}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button button{border-radius:0 var(--radius-sm) var(--radius-sm) 0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button svg{width:var(--spacing-16);height:var(--spacing-16);transition:transform .2s ease-in-out}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button:focus{box-shadow:inset 0 0 0 var(--spacing-2) var(--form-control-focus-ring);outline:none}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button.open svg{transform:rotate(180deg)}.dropdown-container.dropdown-highlighted .dropdown-input-container input[type=text]{border-color:var(--form-control-focus-border-color)}.dropdown-container.dropdown-error .dropdown-input-container{background-color:var(--form-control-error-background-color)}.dropdown-container.dropdown-error .dropdown-input-container input[type=text]{background-color:var(--form-control-error-background-color);border-color:var(--form-control-error-border-color);color:var(--form-control-error-color)}.dropdown-container.dropdown-error .dropdown-input-container input[type=text]:focus{background-color:var(--form-control-error-background-color);border-color:var(--form-control-error-border-color);box-shadow:0 0 0 var(--spacing-2) var(--box-shadow)}.dropdown-container .dropdown-error-message{font-size:var(--font-size-xs);color:var(--form-control-error-color)}.dropdown-container.dropdown-success .dropdown-input-container{background-color:var(--form-control-success-background-color)}.dropdown-container.dropdown-success .dropdown-input-container input[type=text]{background-color:var(--form-control-success-background-color);border-color:var(--form-control-success-border-color);color:var(--form-control-success-color)}.dropdown-container.dropdown-success .dropdown-input-container input[type=text]:focus{background-color:var(--form-control-success-background-color);border-color:var(--form-control-success-border-color);box-shadow:0 0 0 var(--spacing-2) var(--box-shadow)}.dropdown-container .dropdown-success-message{font-size:var(--font-size-xs);color:var(--form-control-success-color)}.dropdown-container.multiple .dropdown-input-container,.dropdown-container.multiple input[type=text]{min-height:var(--spacing-40)}.dropdown-container.multiple .dropdown-input-container--chips input[type=text]{min-height:var(--spacing-24)}.dropdown-container.count-display-floating .dropdown-input-container{overflow:visible}.dropdown-menu{z-index:1000;width:100%;margin-top:var(--spacing-4);background-color:var(--dropdown-options-background-color);color:var(--dropdown-options-color);border:var(--spacing-1) solid var(--dropdown-border-color);border-radius:var(--radius-sm);box-shadow:0 var(--spacing-8) var(--spacing-16) -3px var(--box-shadow), 0 var(--spacing-4) var(--spacing-8) -2px var(--box-shadow);max-height:240px;position:absolute;overflow-y:auto}.dropdown-menu--portal{margin-top:var(--spacing-4)}.dropdown-menu--upward{margin-top:0;margin-bottom:var(--spacing-4);top:auto;bottom:100%}.dropdown-menu::-webkit-scrollbar{width:var(--scrollbar-size)}.dropdown-menu::-webkit-scrollbar-track{background:var(--scrollbar-track-color);border-radius:var(--scrollbar-radius)}.dropdown-menu::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:var(--scrollbar-radius)}.dropdown-menu::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-color)}.dropdown-menu .dropdown-options-list{padding:var(--spacing-4) 0;margin:0;list-style:none}.dropdown-menu .dropdown-options-list .dropdown-option{padding:var(--spacing-12) var(--spacing-12);cursor:pointer;border-left:var(--spacing-4) solid transparent;align-items:center;transition:background-color .2s ease-in-out;display:flex}.dropdown-menu .dropdown-options-list .dropdown-option.focused{color:var(--dropdown-options-hover-color);background-color:var(--dropdown-options-hover-background-color);outline:none}.dropdown-menu .dropdown-options-list .dropdown-option.dropdown-option--disabled{opacity:.45;cursor:not-allowed}.dropdown-menu .dropdown-options-list .dropdown-option.dropdown-option--disabled:hover,.dropdown-menu .dropdown-options-list .dropdown-option.dropdown-option--disabled.focused{color:inherit;background-color:#0000}.dropdown-menu .dropdown-options-list .dropdown-option.selected{background-color:var(--dropdown-options-selected-background-color);color:var(--dropdown-options-selected-color)}.dropdown-menu .dropdown-options-list .dropdown-option.selected:hover,.dropdown-menu .dropdown-options-list .dropdown-option.selected.focused{color:var(--dropdown-options-hover-color);background-color:var(--dropdown-options-hover-background-color);opacity:.9}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-checkbox{margin-right:var(--spacing-8);flex-shrink:0}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-checkbox .checkbox{width:var(--spacing-16);height:var(--spacing-16);border:var(--spacing-2) solid var(--form-control-selection-border-color);border-radius:var(--spacing-4);background-color:#0000;justify-content:center;align-items:center;transition:all .2s ease-in-out;display:flex}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-checkbox .checkbox.checked{background-color:var(--form-control-selection-background-color);color:var(--form-control-selection-color)}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content{flex:1;min-width:0}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content .dropdown-option-label{align-items:center;gap:var(--spacing-8);min-width:0;display:inline-flex}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content .dropdown-option-prefix{flex:none;justify-content:center;align-items:center;display:inline-flex}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content .dropdown-option-details{width:100%;font-size:var(--font-size-xs);margin-top:var(--spacing-2);display:block}@media (width<=768px){.dropdown-menu .dropdown-options-list .dropdown-option{padding:var(--spacing-16) var(--spacing-12)}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content{font-size:var(--font-size-md)}}.dropdown-menu .dropdown-no-options{padding:var(--spacing-12);text-align:center;font-style:italic}.dropdown-menu .dropdown-options-list .dropdown-option--create{color:var(--body-accent-color);border-top:1px solid var(--delimiter-color);font-weight:var(--font-weight-medium)}@media (width<=768px){.dropdown-menu{max-height:var(--spacing-300)}.dropdown-menu .dropdown-options-list .dropdown-option{min-height:var(--spacing-48)}}

package/dist/components/Dropdown/Dropdown2.js

@@ -0,0 +1,413 @@
+import './Dropdown.css';
+import { Icon as I } from "../Icon/Icon2.js";
+import { Button as de } from "../Button/Button2.js";
+import { Tooltip as Te } from "../Tooltip/Tooltip2.js";
+import { InputText as Ae } from "../InputText/InputText2.js";
+import { foldDiacritics as le } from "../../helpers/Search.js";
+/* empty css         */
+import { useEffect as E, useId as He, useRef as D, useState as k } from "react";
+import { jsx as c, jsxs as g } from "react/jsx-runtime";
+import { createPortal as je } from "react-dom";
+import { caretDown as Ce, clear as fe } from "@memobit/icons";
+var Xe = ({ allowCustomValue: h = !1, autofocus: ae = !1, className: pe = "", disabled: x = !1, error: A, highlighted: ue = !1, id: we, label: J, maxVisibleSelectedLabels: he = 1, multilineChips: me = !1, multiple: o = !1, name: N, onChange: u, onSearchChange: ge, options: m, placeholder: H = "Select an option", searchable: a = !0, searchValue: B, selectedCountDisplay: j = "inline", showChips: C = !1, sortSelectedFirst: Q = !1, success: _, usePortal: $ = !0, value: d, valueAsChip: ve = !0 }) => {
+  const [p, v] = k(!1), [s, l] = k(B || ""), [f, X] = k(m), [L, S] = k(-1), [i, w] = k([]), [R, be] = k({
+    top: 0,
+    bottom: 0,
+    left: 0,
+    width: 0,
+    maxHeight: 300
+  }), [z, xe] = k(!1), O = D(null), y = D([]), F = D(null), Ne = D(null), Y = He(), Z = we ?? `dropdown-${Y}`, U = D(null);
+  E(() => {
+    if (p && Q && o) {
+      const n = new Set(i.map((r) => r.value)), e = [], t = [];
+      m.forEach((r) => (n.has(r.value) ? e : t).push(r)), U.current = [...e, ...t];
+    } else p || (U.current = null);
+  }, [
+    p,
+    Q,
+    o,
+    m
+  ]), E(() => {
+    const n = U.current ?? m;
+    if (!a || !s) X(n);
+    else {
+      const e = le(s), t = n.filter((r) => le(r.label).includes(e));
+      X(t);
+    }
+    S(-1);
+  }, [
+    s,
+    m,
+    a,
+    p
+  ]);
+  const V = D(d);
+  E(() => {
+    const n = V.current;
+    V.current = d;
+    const e = !Object.is(n, d);
+    if (d == null) {
+      e && (w([]), l(""));
+      return;
+    }
+    if (o && Array.isArray(d) && d.length === 0) {
+      e && (w([]), l(""));
+      return;
+    }
+    if (!o && d === "") {
+      e && (w([]), l(""));
+      return;
+    }
+    if (m.length > 0) {
+      if (o && Array.isArray(d)) {
+        const t = m.filter((r) => typeof r.value == "number" ? d.includes(r.value) : d.includes(r.value.toString()));
+        w(t), e && l("");
+      } else if (!o && (typeof d == "string" || typeof d == "number")) {
+        const t = m.find((r) => typeof r.value == "number" && typeof d == "number" ? r.value === d : r.value.toString() === d.toString());
+        if (t)
+          w([t]), e && l(t.label);
+        else if (h && typeof d == "string" && d.trim()) {
+          const r = {
+            label: d.trim(),
+            value: d.trim(),
+            className: "custom-option"
+          };
+          w([r]), e && l(d.trim());
+        } else e && (w([]), l(""));
+      }
+    } else if (h && !o && typeof d == "string" && d.trim()) {
+      const t = {
+        label: d.trim(),
+        value: d.trim(),
+        className: "custom-option"
+      };
+      w([t]), e && l(d.trim());
+    } else e && (w([]), l(""));
+  }, [
+    d,
+    m,
+    o,
+    a,
+    h
+  ]), E(() => {
+    a && B !== void 0 && l(B);
+  }, [B, a]), E(() => {
+    if (!p || !O.current) return;
+    const n = () => {
+      if (!O.current) return;
+      const t = O.current.getBoundingClientRect(), r = window.visualViewport, T = r?.offsetTop ?? 0, Re = T + (r?.height ?? window.innerHeight), ie = 300, Me = 8, G = Re - t.bottom, se = t.top - T, ce = G < ie && se > G;
+      if (xe(ce), $) {
+        const Be = Math.max(0, (ce ? se : G) - Me);
+        be({
+          top: t.bottom,
+          bottom: window.innerHeight - t.top,
+          left: t.left,
+          width: t.width,
+          maxHeight: Math.min(ie, Be)
+        });
+      }
+    };
+    n();
+    const e = window.visualViewport;
+    return window.addEventListener("scroll", n, !0), window.addEventListener("resize", n), e?.addEventListener("resize", n), e?.addEventListener("scroll", n), () => {
+      window.removeEventListener("scroll", n, !0), window.removeEventListener("resize", n), e?.removeEventListener("resize", n), e?.removeEventListener("scroll", n);
+    };
+  }, [p, $]), E(() => {
+    const n = (e) => {
+      if (O.current && !O.current.contains(e.target)) {
+        if ($ && p) {
+          const t = document.querySelector(".dropdown-menu--portal");
+          if (t && t.contains(e.target)) return;
+        }
+        if (h && !o && s.trim() && !(i.length > 0 && i[0].label.toLowerCase() === s.trim().toLowerCase())) {
+          const t = m.find((r) => r.label.toLowerCase() === s.toLowerCase() || r.value.toString() === s) || {
+            label: s.trim(),
+            value: s.trim(),
+            className: "custom-option"
+          };
+          w([t]), l(t.label), v(!1), u && u(t, N);
+          return;
+        }
+        v(!1), !o && i.length > 0 ? l(i[0].label) : o && a && l("");
+      }
+    };
+    return document.addEventListener("mousedown", n), () => {
+      document.removeEventListener("mousedown", n);
+    };
+  }, [
+    h,
+    s,
+    p,
+    o,
+    N,
+    u,
+    m,
+    a,
+    i,
+    $
+  ]);
+  const K = (n) => {
+    if (!n.disabled)
+      if (o) {
+        const e = i.some((r) => r.value === n.value);
+        let t;
+        e ? t = i.filter((r) => r.value !== n.value) : t = [...i, n], w(t), a && l(""), u && u(t, N);
+      } else
+        l(n.label), w([n]), v(!1), u && u(n, N);
+  }, P = () => {
+    if (!h || !s.trim()) return;
+    const n = m.find((t) => t.label.toLowerCase() === s.toLowerCase() || t.value.toString() === s);
+    if (n) {
+      K(n);
+      return;
+    }
+    const e = {
+      label: s.trim(),
+      value: s.trim(),
+      className: "custom-option"
+    };
+    if (o) {
+      const t = [...i, e];
+      w(t), l(""), u && u(t, N);
+    } else
+      w([e]), l(e.label), v(!1), u && u(e, N);
+  }, ee = (n) => {
+    const e = i.filter((t) => t.value !== n.value);
+    w(e), u && (o ? u(e, N) : (u(null, N), a || l("")));
+  }, $e = () => {
+    w([]), (!a || !o) && l(""), v(!1), u && u(o ? [] : null, N);
+  }, ke = (n) => {
+    l(n), p || v(!0), ge?.(n);
+  }, ne = () => {
+    x || (v(!0), !o && a && i.length > 0 && l(""), (o || a) && F.current?.focus());
+  }, Le = () => {
+    x || (v(!p), p || (S(-1), !o && a && i.length > 0 && l(""), (o || a) && F.current?.focus()));
+  }, Se = (n) => {
+    if (!x) {
+      if (!p) {
+        (n.key === "ArrowDown" || n.key === "Enter") && (v(!0), n.preventDefault());
+        return;
+      }
+      switch (n.key) {
+        case "ArrowDown":
+          if (n.preventDefault(), h && s && f.length === 0) return;
+          S((e) => {
+            const t = e < (h && s && !f.some((r) => r.label.toLowerCase() === s.toLowerCase()) ? f.length : f.length - 1) ? e + 1 : 0;
+            return t < f.length && y.current[t] && y.current[t]?.scrollIntoView({ block: "nearest" }), t;
+          });
+          break;
+        case "ArrowUp":
+          if (n.preventDefault(), h && s && f.length === 0) return;
+          S((e) => {
+            const t = h && s && !f.some((T) => T.label.toLowerCase() === s.toLowerCase()) ? f.length : f.length - 1, r = e > 0 ? e - 1 : t;
+            return r < f.length && y.current[r] && y.current[r]?.scrollIntoView({ block: "nearest" }), r;
+          });
+          break;
+        case "Enter":
+          n.preventDefault(), L >= 0 && L < f.length ? K(f[L]) : (h && s && L === f.length || h && s && f.length === 0) && P();
+          break;
+        case "Escape":
+          n.preventDefault(), v(!1), !o && i.length > 0 ? l(i[0].label) : o && a && l("");
+          break;
+        case "Backspace":
+          o && s === "" && i.length > 0 && (n.preventDefault(), ee(i[i.length - 1]));
+          break;
+        default:
+          break;
+      }
+    }
+  }, q = (n) => i.some((e) => e.value === n.value), Oe = () => {
+    if (i.length === 0) return "";
+    const n = Math.max(1, he);
+    if (i.length <= n) return i.map((r) => r.label).join(", ");
+    const e = i.slice(0, n).map((r) => r.label).join(", "), t = i.length - n;
+    return `${e} (+${t} ${t === 1 ? "other" : "others"})`;
+  }, ye = () => o && C || a && p ? s : i.length > 0 ? o ? Oe() : i[0].label : "", Ie = () => o && C ? i.length > 0 ? "" : H : p && a ? H : i.length > 0 ? "" : H, Ee = () => !o || i.length === 0 || j === "none" ? null : j === "floating" ? /* @__PURE__ */ g("div", {
+    className: "dropdown-selected-count",
+    children: [i.length, " selected"]
+  }) : null, te = () => !!(h && s && s.trim() && !f.some((n) => n.label.toLowerCase() === s.toLowerCase() || n.value.toString() === s)), De = () => {
+    if (!p || x) return null;
+    const n = /* @__PURE__ */ c("div", {
+      ref: Ne,
+      className: `dropdown-menu ${$ ? "dropdown-menu--portal" : ""} ${z ? "dropdown-menu--upward" : ""}`,
+      style: $ ? {
+        position: "fixed",
+        top: z ? "auto" : `${R.top}px`,
+        bottom: z ? `${R.bottom}px` : "auto",
+        left: `${R.left}px`,
+        width: `${R.width}px`,
+        maxHeight: `${R.maxHeight}px`,
+        zIndex: 9999
+      } : void 0,
+      children: f.length > 0 || te() ? /* @__PURE__ */ g("ul", {
+        className: "dropdown-options-list",
+        children: [f.map((e, t) => /* @__PURE__ */ g("li", {
+          ref: (r) => {
+            y.current[t] = r;
+          },
+          className: `dropdown-option ${e.className || ""} ${L === t ? "focused" : ""} ${q(e) ? "selected" : ""} ${e.disabled ? "dropdown-option--disabled" : ""}`,
+          onClick: () => K(e),
+          onMouseEnter: () => S(t),
+          title: e.tooltip,
+          children: [o && /* @__PURE__ */ c("div", {
+            className: "dropdown-option-checkbox",
+            children: /* @__PURE__ */ c("div", {
+              className: `checkbox ${q(e) ? "checked" : ""}`,
+              children: q(e) && /* @__PURE__ */ c("svg", {
+                width: "10",
+                height: "8",
+                viewBox: "0 0 10 8",
+                fill: "none",
+                children: /* @__PURE__ */ c("path", {
+                  d: "M9 1L3.5 6.5L1 4",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                })
+              })
+            })
+          }), /* @__PURE__ */ g("div", {
+            className: "dropdown-option-content",
+            children: [/* @__PURE__ */ g("span", {
+              className: "dropdown-option-label",
+              children: [
+                e.prefix && /* @__PURE__ */ c("span", {
+                  className: "dropdown-option-prefix",
+                  children: e.prefix
+                }),
+                e.icon && /* @__PURE__ */ c(I, { name: e.icon }),
+                /* @__PURE__ */ c("span", { children: e.label }),
+                e.suffixIcon && /* @__PURE__ */ c(I, { name: e.suffixIcon })
+              ]
+            }), e.details && /* @__PURE__ */ c("span", {
+              className: "dropdown-option-details",
+              children: e.details
+            })]
+          })]
+        }, `dd-option-${Y}-${t}`)), te() && /* @__PURE__ */ c("li", {
+          ref: (e) => {
+            y.current[f.length] = e;
+          },
+          className: `dropdown-option dropdown-option--create ${L === f.length ? "focused" : ""}`,
+          onClick: P,
+          onMouseEnter: () => S(f.length),
+          children: /* @__PURE__ */ c("div", {
+            className: "dropdown-option-content",
+            children: /* @__PURE__ */ g("span", {
+              className: "dropdown-option-label",
+              children: [/* @__PURE__ */ c(I, { name: "plus" }), /* @__PURE__ */ g("span", { children: [
+                "Create “",
+                s,
+                "”"
+              ] })]
+            })
+          })
+        })]
+      }) : /* @__PURE__ */ c("div", {
+        className: "dropdown-no-options",
+        children: "No options found"
+      })
+    });
+    return $ ? je(n, document.body) : n;
+  }, b = !o && i.length === 1 ? i[0] : null, M = ve && !p && !o && i.length > 0, re = !!(b?.icon && !s && !M), oe = !!(b?.suffixIcon && !M), W = o && C;
+  return /* @__PURE__ */ g("div", {
+    className: `dropdown-container ${A ? "dropdown-error" : ""} ${_ ? "dropdown-success" : ""} ${ue ? "dropdown-highlighted" : ""} ${o ? "multiple" : ""} ${x ? "disabled" : ""} ${o ? `count-display-${j}` : ""} ${pe}`,
+    ref: O,
+    children: [
+      J && /* @__PURE__ */ c("label", {
+        htmlFor: Z,
+        className: "dropdown-label",
+        children: J
+      }),
+      /* @__PURE__ */ g("div", {
+        className: `dropdown-input-container ${re ? "dropdown-input-container--has-prefix-icon" : ""} ${oe ? "dropdown-input-container--has-suffix-icon" : ""} ${W ? "dropdown-input-container--chips" : ""} ${W && me ? "dropdown-input-container--chips-multiline" : ""}`,
+        children: [
+          re && b?.icon && /* @__PURE__ */ c("span", {
+            className: "dropdown-selected-icon dropdown-selected-icon--prefix",
+            children: /* @__PURE__ */ c(I, { name: b.icon })
+          }),
+          M && b && /* @__PURE__ */ g("span", {
+            className: "dropdown-value-chip",
+            onClick: ne,
+            children: [b.icon && /* @__PURE__ */ c(I, { name: b.icon }), /* @__PURE__ */ c("span", {
+              className: "dropdown-value-chip__label",
+              children: b.label
+            })]
+          }),
+          W && i.map((n) => /* @__PURE__ */ g("span", {
+            className: "dropdown-chip",
+            children: [/* @__PURE__ */ c("span", {
+              className: "dropdown-chip__label",
+              children: n.label
+            }), /* @__PURE__ */ c(Te, {
+              title: "Remove",
+              children: /* @__PURE__ */ c("button", {
+                type: "button",
+                className: "dropdown-chip__remove",
+                disabled: x,
+                onClick: (e) => {
+                  e.stopPropagation(), ee(n);
+                },
+                children: fe
+              })
+            })]
+          }, `dd-chip-${n.value}`)),
+          /* @__PURE__ */ c(Ae, {
+            ref: F,
+            id: Z,
+            placeholder: M ? "" : Ie(),
+            value: M ? "" : ye(),
+            onChange: a || o ? ke : () => {
+            },
+            onClick: ne,
+            onKeyDown: Se,
+            autoComplete: "off",
+            autoFocus: ae,
+            disabled: x
+          }),
+          /* @__PURE__ */ g("div", {
+            className: "dropdown-actions-buttons",
+            children: [
+              oe && b?.suffixIcon && /* @__PURE__ */ c("span", {
+                className: "dropdown-selected-icon dropdown-selected-icon--suffix",
+                children: /* @__PURE__ */ c(I, { name: b.suffixIcon })
+              }),
+              (!o && i.length > 0 || o && i.length > 0) && /* @__PURE__ */ c("span", {
+                className: "dropdown-action-button dropdown-clear-button",
+                children: /* @__PURE__ */ c(de, {
+                  variant: "plain",
+                  onClick: $e,
+                  disabled: x,
+                  children: fe
+                })
+              }),
+              /* @__PURE__ */ c("span", {
+                className: `dropdown-action-button dropdown-toggle-button ${p ? "open" : ""}`,
+                children: /* @__PURE__ */ c(de, {
+                  variant: "plain",
+                  onClick: Le,
+                  disabled: x,
+                  children: Ce
+                })
+              })
+            ]
+          }),
+          Ee()
+        ]
+      }),
+      De(),
+      A && /* @__PURE__ */ c("span", {
+        className: "dropdown-error-message",
+        children: A
+      }),
+      _ && /* @__PURE__ */ c("span", {
+        className: "dropdown-success-message",
+        children: _
+      })
+    ]
+  });
+};
+export {
+  Xe as Dropdown
+};

package/dist/components/EmojiPicker/EmojiPicker.css

@@ -0,0 +1 @@
+.emoji-picker{gap:var(--spacing-8);background-color:var(--card-background-color);border:1px solid var(--card-border-color);border-radius:var(--radius);width:320px;padding:var(--spacing-12);flex-direction:column;display:flex}.emoji-picker__search{width:100%}.emoji-picker__categories{gap:var(--spacing-2);scrollbar-width:none;display:flex;overflow-x:auto}.emoji-picker__categories::-webkit-scrollbar{display:none}.emoji-picker__cat-btn{width:32px;height:32px;font-size:var(--font-size-md);border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-fast,.15s ease);background:0 0;border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;display:flex}.emoji-picker__cat-btn:hover{background-color:var(--button-default-hover-background-color)}.emoji-picker__cat-btn.is-active{background-color:var(--button-default-hover-background-color);border-color:var(--body-accent-color)}.emoji-picker__grid{gap:var(--spacing-2);scrollbar-width:thin;flex-wrap:wrap;max-height:200px;display:flex;overflow-y:auto}.emoji-picker__emoji{width:36px;height:36px;font-size:var(--font-size-lg);border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-fast,.15s ease);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;line-height:1;display:flex}.emoji-picker__emoji:hover{background-color:var(--button-default-hover-background-color)}.emoji-picker__emoji.is-selected{background-color:var(--button-default-hover-background-color);border-color:var(--body-accent-color)}.emoji-picker__empty{font-size:var(--font-size-sm);color:var(--body-color-muted);padding:var(--spacing-12) 0;text-align:center;width:100%}