@nmorph/nmorph-ui-kit 2.2.43 → 2.2.45

package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.vue.js

@@ -0,0 +1,207 @@
+import './NmorphAudioPreview.css';
+import { defineComponent as q, useSlots as G, ref as _, watch as J, computed as l, openBlock as t, createElementBlock as p, normalizeStyle as N, normalizeClass as K, createElementVNode as i, createBlock as h, unref as r, withCtx as m, createVNode as s, toDisplayString as y, withDirectives as Q, vModelText as W, renderSlot as X, createCommentVNode as H } from "vue";
+import { useModifiers as Y } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as Z } from "../../../utils/common.js";
+import w from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import ee from "../../../assets/icons/audio.svg.js";
+import oe from "../../basic/nmorph-button/NmorphButton.vue.js";
+/* empty css                                          */
+import ae from "../../../assets/icons/pause.svg.js";
+import re from "../../../assets/icons/play.svg.js";
+import te from "../../../assets/icons/open.svg.js";
+import ne from "../../../assets/icons/download.svg.js";
+import le from "../../../assets/icons/loading.svg.js";
+const ie = ["src", "preload"], se = { class: "nmorph-audio-preview__icon" }, de = { class: "nmorph-audio-preview__body" }, ue = { class: "nmorph-audio-preview__header" }, ce = { class: "nmorph-audio-preview__name" }, pe = {
+  key: 0,
+  class: "nmorph-audio-preview__error"
+}, me = {
+  key: 1,
+  class: "nmorph-audio-preview__time"
+}, ve = ["disabled", "aria-label"], fe = {
+  key: 0,
+  class: "nmorph-audio-preview__actions"
+}, _e = ["href", "aria-label"], he = ["href", "download", "aria-label"], Me = /* @__PURE__ */ q({
+  __name: "NmorphAudioPreview",
+  props: {
+    src: {},
+    name: { default: "" },
+    durationMs: { default: void 0 },
+    width: { default: void 0 },
+    compact: { type: Boolean, default: !1 },
+    preload: { default: "metadata" },
+    downloadHref: { default: "" },
+    loading: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    errorText: { default: "" },
+    showDefaultActions: { type: Boolean, default: !0 }
+  },
+  emits: ["play", "pause", "open", "download", "error"],
+  setup(S, { expose: T, emit: $ }) {
+    const e = S, u = $, x = G(), a = _(null), n = _(!1), v = _(0), f = _(e.durationMs ? e.durationMs / 1e3 : 0);
+    J(
+      () => e.durationMs,
+      (o) => {
+        f.value = o ? o / 1e3 : f.value;
+      }
+    );
+    const d = l(() => f.value || 0), g = l({
+      get: () => d.value > 0 ? v.value / d.value * 100 : 0,
+      set: (o) => {
+        !a.value || d.value <= 0 || (a.value.currentTime = o / 100 * d.value, v.value = a.value.currentTime);
+      }
+    }), B = l(() => ({ "--nmorph-audio-preview-progress": `${g.value}%` })), C = l(
+      () => !!x.actions || e.showDefaultActions && (e.src || e.downloadHref)
+    ), M = l(
+      () => Y({
+        "nmorph-audio-preview": [
+          e.compact && "compact",
+          e.loading && "loading",
+          e.error && "error",
+          n.value && "playing"
+        ]
+      })
+    ), z = l(
+      () => Z({
+        "--nmorph-audio-preview-width": e.width
+      })
+    ), k = (o) => {
+      if (!Number.isFinite(o) || o < 0) return "0:00";
+      const c = Math.floor(o), b = Math.floor(c / 60), j = c % 60;
+      return `${b}:${j.toString().padStart(2, "0")}`;
+    }, A = l(() => k(v.value)), D = l(() => k(d.value)), I = async () => {
+      if (!(!a.value || e.loading || e.error)) {
+        if (n.value) {
+          a.value.pause();
+          return;
+        }
+        try {
+          await a.value.play();
+        } catch {
+          n.value = !1;
+        }
+      }
+    }, P = () => {
+      !a.value || Number.isNaN(a.value.duration) || (f.value = a.value.duration);
+    }, V = () => {
+      v.value = a.value?.currentTime || 0;
+    }, E = (o) => {
+      n.value = !0, u("play", o);
+    }, L = (o) => {
+      n.value = !1, u("pause", o);
+    }, O = () => {
+      n.value = !1;
+    }, R = (o) => {
+      n.value = !1, u("error", o);
+    }, U = () => u("open"), F = () => u("download");
+    return T({ audioRef: a }), (o, c) => (t(), p("div", {
+      class: K(M.value),
+      style: N(z.value)
+    }, [
+      i("audio", {
+        ref_key: "audioRef",
+        ref: a,
+        src: e.src,
+        preload: e.preload,
+        onLoadedmetadata: P,
+        onTimeupdate: V,
+        onPlay: E,
+        onPause: L,
+        onEnded: O,
+        onError: R
+      }, null, 40, ie),
+      i("div", se, [
+        e.loading ? (t(), h(r(w), {
+          key: 0,
+          size: "medium"
+        }, {
+          default: m(() => [
+            s(r(le))
+          ]),
+          _: 1
+        })) : (t(), h(r(w), {
+          key: 1,
+          size: "medium"
+        }, {
+          default: m(() => [
+            s(r(ee))
+          ]),
+          _: 1
+        }))
+      ]),
+      s(r(oe), {
+        class: "nmorph-audio-preview__play",
+        height: "thin",
+        "style-type": "transparent",
+        disabled: e.loading || e.error,
+        onClick: I
+      }, {
+        "icon-only": m(() => [
+          n.value ? (t(), h(r(ae), { key: 0 })) : (t(), h(r(re), { key: 1 }))
+        ]),
+        _: 1
+      }, 8, ["disabled"]),
+      i("div", de, [
+        i("div", ue, [
+          i("span", ce, y(e.name || "Audio"), 1),
+          e.error && e.errorText ? (t(), p("span", pe, y(e.errorText), 1)) : (t(), p("span", me, y(A.value) + " / " + y(D.value), 1))
+        ]),
+        Q(i("input", {
+          "onUpdate:modelValue": c[0] || (c[0] = (b) => g.value = b),
+          class: "nmorph-audio-preview__range",
+          type: "range",
+          min: "0",
+          max: "100",
+          step: "0.1",
+          style: N(B.value),
+          disabled: e.loading || e.error || d.value <= 0,
+          "aria-label": `Audio progress ${e.name || ""}`
+        }, null, 12, ve), [
+          [
+            W,
+            g.value,
+            void 0,
+            { number: !0 }
+          ]
+        ])
+      ]),
+      C.value ? (t(), p("div", fe, [
+        X(o.$slots, "actions", {}, () => [
+          i("a", {
+            href: e.src,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            class: "nmorph-audio-preview__action-link",
+            "aria-label": `Open ${e.name || "audio"}`,
+            onClick: U
+          }, [
+            s(r(w), { size: "small" }, {
+              default: m(() => [
+                s(r(te))
+              ]),
+              _: 1
+            })
+          ], 8, _e),
+          e.downloadHref ? (t(), p("a", {
+            key: 0,
+            href: e.downloadHref,
+            download: e.name,
+            class: "nmorph-audio-preview__action-link",
+            "aria-label": `Download ${e.name || "audio"}`,
+            onClick: F
+          }, [
+            s(r(w), { size: "small" }, {
+              default: m(() => [
+                s(r(ne))
+              ]),
+              _: 1
+            })
+          ], 8, he)) : H("", !0)
+        ])
+      ])) : H("", !0)
+    ], 6));
+  }
+});
+export {
+  Me as default
+};

package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphAudioPreview.css';
+import o from "./NmorphAudioPreview.vue.js";
+/* empty css                        */
+export {
+  o as default
+};

package/dist/components/data/nmorph-emoji-picker/NmorphEmojiPicker.css

@@ -0,0 +1 @@
+.nmorph-emoji-picker{--nmorph-emoji-picker-width: 300px;--nmorph-emoji-picker-height: 260px;--nmorph-emoji-picker-columns: 8;--nmorph-emoji-picker-cell-size: 32px;--nmorph-emoji-picker-toggle-size: 28px;--nmorph-emoji-picker-scrollbar-size: 6px;--nmorph-emoji-picker-hover-background: color-mix(in srgb, var(--nmorph-text-color) 8%, transparent);--nmorph-emoji-picker-active-background: color-mix(in srgb, var(--nmorph-text-color) 12%, var(--nmorph-main-color));--nmorph-emoji-picker-focus-ring: color-mix(in srgb, var(--nmorph-text-color) 24%, transparent);--nmorph-emoji-picker-toggle-inset: calc(var(--indentation-02) + 2px);--nmorph-emoji-picker-toggle-reserve: calc( var(--nmorph-emoji-picker-toggle-size) + var(--nmorph-emoji-picker-toggle-inset) + var(--indentation-02) );position:relative;box-sizing:border-box;width:min(100%,var(--nmorph-emoji-picker-width));min-width:0;color:var(--nmorph-text-color);font:inherit}.nmorph-emoji-picker .nmorph-emoji-picker__compact,.nmorph-emoji-picker .nmorph-emoji-picker__panel{box-sizing:border-box;width:100%;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-emoji-picker .nmorph-emoji-picker__compact{display:flex;gap:var(--indentation-02);align-items:center;min-height:48px;padding:var(--indentation-02)}.nmorph-emoji-picker .nmorph-emoji-picker__quick-list{display:flex;flex:1 1 auto;gap:4px;min-width:0}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button,.nmorph-emoji-picker .nmorph-emoji-picker__category,.nmorph-emoji-picker .nmorph-emoji-picker__emoji{margin:0;color:inherit;font:inherit;background:transparent;border:0;box-shadow:none;cursor:pointer;appearance:none}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button:disabled,.nmorph-emoji-picker .nmorph-emoji-picker__category:disabled,.nmorph-emoji-picker .nmorph-emoji-picker__emoji:disabled{cursor:not-allowed;opacity:.5}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button:focus,.nmorph-emoji-picker .nmorph-emoji-picker__category:focus,.nmorph-emoji-picker .nmorph-emoji-picker__emoji:focus{outline:none}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button:focus-visible,.nmorph-emoji-picker .nmorph-emoji-picker__category:focus-visible,.nmorph-emoji-picker .nmorph-emoji-picker__emoji:focus-visible{box-shadow:var(--nmorph-shadow-inset),0 0 0 1px var(--nmorph-emoji-picker-focus-ring)}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button,.nmorph-emoji-picker .nmorph-emoji-picker__emoji{display:inline-flex;flex:0 0 var(--nmorph-emoji-picker-cell-size);justify-content:center;align-items:center;width:var(--nmorph-emoji-picker-cell-size);height:var(--nmorph-emoji-picker-cell-size);padding:0;font-size:20px;line-height:1;border-radius:var(--default-border-radius)}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button:hover:not(:disabled),.nmorph-emoji-picker .nmorph-emoji-picker__emoji:hover:not(:disabled){background:var(--nmorph-emoji-picker-hover-background)}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button{position:absolute;top:var(--nmorph-emoji-picker-toggle-inset);right:var(--nmorph-emoji-picker-toggle-inset);z-index:2;width:var(--nmorph-emoji-picker-toggle-size);min-width:var(--nmorph-emoji-picker-toggle-size);height:var(--nmorph-emoji-picker-toggle-size);min-height:var(--nmorph-emoji-picker-toggle-size);color:var(--nmorph-semi-contrast-text-color);--height: var(--nmorph-emoji-picker-toggle-size);--size: var(--nmorph-emoji-picker-toggle-size);--nmorph-selection-control-inline-padding: 0;--color: currentColor}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button .nmorph-checkbox__content,.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button .nmorph-checkbox__fake{width:var(--nmorph-emoji-picker-toggle-size);min-width:var(--nmorph-emoji-picker-toggle-size);height:var(--nmorph-emoji-picker-toggle-size);min-height:var(--nmorph-emoji-picker-toggle-size)}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button .nmorph-checkbox__fake{padding:0;color:currentColor}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button .nmorph-icon{--color: currentColor}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button input:focus-visible{outline:none;opacity:0;scale:1}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button input:focus-visible+.nmorph-checkbox__fake{outline:1px solid var(--nmorph-emoji-picker-focus-ring);outline-offset:1px}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button:hover:not(.nmorph-checkbox--disabled){color:var(--nmorph-text-color);--color: var(--nmorph-text-color)}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button:hover:not(.nmorph-checkbox--disabled) .nmorph-icon{--color: var(--nmorph-text-color)}.nmorph-emoji-picker .nmorph-emoji-picker__button-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.nmorph-emoji-picker .nmorph-emoji-picker__panel{display:flex;flex-direction:column;height:var(--nmorph-emoji-picker-height);min-height:180px;max-height:min(60vh,var(--nmorph-emoji-picker-height));padding:var(--indentation-02);overflow:hidden}.nmorph-emoji-picker .nmorph-emoji-picker__toolbar{display:flex;flex:0 0 auto;gap:var(--indentation-02);align-items:center;min-width:0;padding:2px}.nmorph-emoji-picker.nmorph-emoji-picker--collapsible .nmorph-emoji-picker__compact,.nmorph-emoji-picker.nmorph-emoji-picker--collapsible .nmorph-emoji-picker__toolbar{padding-right:var(--nmorph-emoji-picker-toggle-reserve)}.nmorph-emoji-picker .nmorph-emoji-picker__search{flex:1 1 auto;min-width:0}.nmorph-emoji-picker .nmorph-emoji-picker__categories{display:flex;flex:0 0 auto;gap:4px;align-items:flex-start;min-width:0;margin:var(--indentation-02) 0;padding:0 2px}.nmorph-emoji-picker .nmorph-emoji-picker__categories .nmorph-scroll__bar--horizontal{right:2px;left:2px}.nmorph-emoji-picker .nmorph-emoji-picker__category{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;max-width:120px;min-height:28px;padding:0 10px;overflow:hidden;color:var(--nmorph-semi-contrast-text-color);font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-overflow:ellipsis;border-radius:var(--default-border-radius)}.nmorph-emoji-picker .nmorph-emoji-picker__category:hover:not(:disabled){color:var(--nmorph-text-color);background:var(--nmorph-emoji-picker-hover-background)}.nmorph-emoji-picker .nmorph-emoji-picker__category.nmorph-emoji-picker__category--active{color:var(--nmorph-text-color);background:var(--nmorph-emoji-picker-active-background);box-shadow:var(--nmorph-shadow-inset)}.nmorph-emoji-picker .nmorph-emoji-picker__body{flex:1 1 auto;min-height:0}.nmorph-emoji-picker .nmorph-emoji-picker__body-content{box-sizing:border-box;min-height:100%;padding:2px}.nmorph-emoji-picker .nmorph-emoji-picker__section{display:grid;gap:4px}.nmorph-emoji-picker .nmorph-emoji-picker__section+.nmorph-emoji-picker__section{margin-top:var(--indentation-02)}.nmorph-emoji-picker .nmorph-emoji-picker__section-title{padding:0 4px;color:var(--nmorph-semi-contrast-text-color);font-weight:600;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-emoji-picker .nmorph-emoji-picker__grid{display:grid;grid-template-columns:repeat(var(--nmorph-emoji-picker-columns),minmax(0,1fr));gap:2px}.nmorph-emoji-picker .nmorph-emoji-picker__emoji{width:100%;min-width:0}.nmorph-emoji-picker .nmorph-emoji-picker__emoji-symbol{display:block;line-height:1}.nmorph-emoji-picker .nmorph-emoji-picker__empty{display:grid;gap:var(--indentation-02);place-items:center;min-height:100%;padding:var(--indentation-04);color:var(--nmorph-semi-contrast-text-color);text-align:center;--color: currentColor}.nmorph-emoji-picker.nmorph-emoji-picker--disabled{opacity:.65}

package/dist/components/data/nmorph-emoji-picker/NmorphEmojiPicker.vue.js

@@ -0,0 +1,405 @@
+import './NmorphEmojiPicker.css';
+import { defineComponent as we, ref as S, computed as s, watch as Q, openBlock as c, createElementBlock as d, normalizeStyle as Se, normalizeClass as J, createBlock as le, unref as f, withModifiers as Ce, withCtx as v, createVNode as k, createElementVNode as L, toDisplayString as E, createCommentVNode as W, Fragment as O, renderList as $, nextTick as Ae } from "vue";
+import { useModifiers as Ke } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as Me } from "../../../utils/common.js";
+import Ne from "../../form/nmorph-checkbox/NmorphCheckbox.vue.js";
+/* empty css                                             */
+import X from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import ze from "../../../assets/icons/burger.svg.js";
+import Y from "../../basic/nmorph-scroll/NmorphScroll.vue.js";
+/* empty css                                          */
+import Be from "../../form/nmorph-text-input/NmorphTextInput.vue.js";
+/* empty css                                                */
+import Ie from "../../../assets/icons/search.svg.js";
+import Oe from "../../../assets/icons/smile.svg.js";
+const $e = ["lang"], Ve = { class: "nmorph-emoji-picker__button-label" }, qe = ["aria-label"], De = ["aria-label", "title", "disabled", "onClick"], Te = {
+  key: 2,
+  class: "nmorph-emoji-picker__panel"
+}, Fe = { class: "nmorph-emoji-picker__toolbar" }, Re = ["aria-selected", "disabled", "onClick"], He = ["aria-label"], Pe = {
+  key: 0,
+  class: "nmorph-emoji-picker__section-title"
+}, Ue = { class: "nmorph-emoji-picker__grid" }, Qe = ["aria-label", "title", "disabled", "onFocus", "onClick"], Je = { class: "nmorph-emoji-picker__emoji-symbol" }, We = {
+  key: 1,
+  class: "nmorph-emoji-picker__empty"
+}, uo = /* @__PURE__ */ we({
+  __name: "NmorphEmojiPicker",
+  props: {
+    language: { default: "en" },
+    dataSource: { default: () => [] },
+    i18n: { default: () => ({}) },
+    quickList: { default: () => [] },
+    initialExpanded: { type: Boolean, default: !0 },
+    width: { default: "300px" },
+    height: { default: "260px" },
+    columns: { default: 8 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["select", "expand", "collapse"],
+  setup(ie, { emit: se }) {
+    const l = ie, V = se, q = S(""), b = S(l.initialExpanded), y = S(""), C = S(0), Z = S(null), ce = {
+      searchPlaceholder: "Search emoji",
+      searchLabel: "Search emoji",
+      quickLabel: "Frequent emoji",
+      expandLabel: "Open emoji picker",
+      collapseLabel: "Close emoji picker",
+      noResults: "No emoji found",
+      categoryLabel: "Emoji categories",
+      resultsLabel: "Emoji results"
+    }, _ = (e) => !!e && typeof e == "object" && !Array.isArray(e), G = (e) => e.trim().toLocaleLowerCase(l.language || void 0), g = (e, o) => {
+      for (const r of o) {
+        const t = e[r];
+        if (typeof t == "string" && t.trim()) return t.trim();
+        if (typeof t == "number") return String(t);
+      }
+      return "";
+    }, A = (e) => Array.isArray(e) ? e.flatMap(A) : typeof e == "string" ? e.trim() ? [e.trim()] : [] : typeof e == "number" ? [String(e)] : _(e) ? Object.values(e).flatMap(A) : [], K = (e, o, r) => {
+      for (const t of o) {
+        const n = e[t], a = typeof n == "number" ? n : Number(n);
+        if (Number.isFinite(a)) return a;
+      }
+      return r;
+    }, ee = (e, o) => {
+      for (const r of o) {
+        const t = e[r];
+        if (Array.isArray(t)) return t;
+      }
+    }, M = (e) => {
+      if (typeof e == "string") return e.trim();
+      if (!_(e)) return "";
+      const o = g(e, ["emoji", "native", "char", "unicode", "value"]);
+      if (o) return o;
+      const r = ee(e, ["skinToneVariants", "skins", "variants"])?.[0];
+      return M(r);
+    }, ue = (e) => !!M(e), pe = (e) => Array.isArray(e) ? e.map((o) => {
+      const r = M(o);
+      if (!r) return null;
+      if (typeof o == "string") return { emoji: r };
+      const t = _(o) ? o : {};
+      return {
+        emoji: r,
+        annotation: g(t, ["annotation", "label", "name", "description"]),
+        tags: A(t.tags || t.keywords || t.aliases || t.shortcodes),
+        tone: g(t, ["tone", "skinTone", "skin_tone"])
+      };
+    }).filter((o) => !!o) : [], de = (e, o, r) => {
+      if (!_(e))
+        return {
+          key: o,
+          label: o,
+          sort: r
+        };
+      const t = g(e, ["group", "category", "groupName", "categoryName"]) || o, n = g(e, ["groupLabel", "categoryLabel"]) || t, a = K(e, ["groupOrder", "categoryOrder"], Number(t));
+      return {
+        key: t,
+        label: n,
+        sort: Number.isFinite(a) ? a : r
+      };
+    }, me = (e, o, r, t, n) => {
+      const a = M(e);
+      if (!a) return null;
+      const i = _(e) ? e : {}, p = de(i, o, t), m = g(i, ["annotation", "label", "name", "description"]) || a, h = A(i.tags || i.keywords || i.aliases || i.shortcodes), z = K(i, ["order", "sortOrder", "sort_order", "index"], n), U = i.skinToneVariants || i.skins || i.variants, B = pe(U).filter((I) => I.emoji !== a), w = p.key || o, ne = p.label || r || w, Ee = G(
+        [a, m, ne, ...h, ...B.map((I) => I.annotation || I.emoji)].filter(Boolean).join(" ")
+      );
+      return {
+        key: `${w}-${z}-${a}`,
+        emoji: a,
+        annotation: m,
+        tags: h,
+        groupKey: w,
+        groupLabel: ne,
+        groupSort: p.sort,
+        order: z,
+        skinToneVariants: B,
+        searchText: Ee
+      };
+    }, D = (e) => {
+      if (!(!_(e) || ue(e)))
+        return ee(e, ["emojis", "items", "children", "data"]);
+    }, he = (e) => {
+      const o = [], r = (n, a = "emoji", i = a, p = 0, m = o.length) => {
+        const h = me(
+          n,
+          a,
+          i,
+          p,
+          m
+        );
+        h && o.push(h);
+      }, t = (n, a, i) => {
+        const p = D(n);
+        if (!p) {
+          r(n, "emoji", "emoji", 0, i);
+          return;
+        }
+        const m = _(n) ? n : {}, h = g(m, ["group", "category", "name", "label"]) || a, z = g(m, ["label", "name", "title", "groupLabel", "categoryLabel"]) || h, U = K(m, ["order", "groupOrder", "categoryOrder"], i);
+        p.forEach((B, w) => r(B, h, z, U, w));
+      };
+      if (Array.isArray(e))
+        e.forEach((n, a) => {
+          D(n) ? t(n, `group-${a + 1}`, a) : r(n, "emoji", "emoji", 0, a);
+        });
+      else if (_(e)) {
+        const n = D(e);
+        if (n) {
+          const a = g(e, ["group", "category", "name", "label"]) || "emoji", i = g(e, ["label", "name", "title", "groupLabel", "categoryLabel"]) || a, p = K(e, ["order", "groupOrder", "categoryOrder"], 0);
+          n.forEach((m, h) => r(m, a, i, p, h));
+        } else
+          Object.entries(e).forEach(([a, i], p) => {
+            Array.isArray(i) ? i.forEach((m, h) => r(m, a, a, p, h)) : t(i, a, p);
+          });
+      }
+      return o.sort((n, a) => n.groupSort !== a.groupSort ? n.groupSort - a.groupSort : n.order - a.order);
+    }, u = s(() => ({
+      ...ce,
+      ...l.i18n
+    })), oe = s(() => ({
+      ...l.i18n?.categories || {},
+      ...l.i18n?.categoryLabels || {}
+    })), j = s(() => he(l.dataSource)), be = s(() => {
+      const e = /* @__PURE__ */ new Map();
+      return j.value.forEach((o) => e.set(o.emoji, o.annotation || o.emoji)), e;
+    }), T = s(() => Array.from(new Set(l.quickList.map((e) => e.trim()).filter(Boolean)))), re = s(() => !b.value && T.value.length > 0), x = s(() => G(q.value)), N = s(() => {
+      const e = /* @__PURE__ */ new Map();
+      return j.value.forEach((o) => {
+        e.has(o.groupKey) || e.set(o.groupKey, {
+          key: o.groupKey,
+          label: oe.value[o.groupKey] || o.groupLabel,
+          sort: o.groupSort
+        });
+      }), Array.from(e.values()).sort((o, r) => o.sort - r.sort);
+    });
+    Q(
+      N,
+      (e) => {
+        if (!e.length) {
+          y.value = "";
+          return;
+        }
+        e.some((o) => o.key === y.value) || (y.value = e[0].key);
+      },
+      { immediate: !0 }
+    ), Q(
+      () => l.initialExpanded,
+      (e) => {
+        b.value = e;
+      }
+    ), Q([x, y], () => {
+      C.value = 0;
+    });
+    const fe = s(() => x.value ? j.value.filter((e) => e.searchText.includes(x.value)) : y.value ? j.value.filter((e) => e.groupKey === y.value) : j.value), F = s(() => {
+      const e = /* @__PURE__ */ new Map();
+      return fe.value.forEach((o) => {
+        const r = oe.value[o.groupKey] || o.groupLabel, t = e.get(o.groupKey) || {
+          key: o.groupKey,
+          label: r,
+          items: []
+        };
+        t.items.push(o), e.set(o.groupKey, t);
+      }), Array.from(e.values());
+    }), R = s(() => F.value.flatMap((e) => e.items)), ye = s(
+      () => N.value.find((e) => e.key === y.value)?.label || u.value.resultsLabel
+    ), ge = s(() => x.value ? u.value.resultsLabel : ye.value), H = s(() => !l.initialExpanded && T.value.length > 0), ke = s(
+      () => Ke({
+        "nmorph-emoji-picker": [
+          re.value && "compact",
+          b.value && "expanded",
+          H.value && "collapsible",
+          l.disabled && "disabled",
+          !j.value.length && "empty"
+        ]
+      })
+    ), _e = s(() => ({
+      ...Me({
+        "--nmorph-emoji-picker-width": l.width,
+        "--nmorph-emoji-picker-height": l.height
+      }),
+      "--nmorph-emoji-picker-columns": Math.max(1, Math.floor(l.columns))
+    })), te = (e) => be.value.get(e) || e, ae = (e) => {
+      l.disabled || V("select", e);
+    }, ve = () => {
+      l.disabled || (b.value = !0, V("expand"));
+    }, je = () => {
+      l.disabled || !H.value || (b.value = !1, V("collapse"));
+    }, xe = (e) => {
+      if (e) {
+        ve();
+        return;
+      }
+      je();
+    }, P = async (e) => {
+      const o = Z.value?.querySelectorAll(".nmorph-emoji-picker__emoji");
+      if (!o?.length) return;
+      const r = Math.min(Math.max(e, 0), o.length - 1);
+      C.value = r, await Ae(), o[r]?.focus();
+    }, Le = (e) => {
+      if (l.disabled || !R.value.length || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+      const o = Math.max(1, Math.floor(l.columns)), r = R.value.length - 1, t = {
+        ArrowRight: 1,
+        ArrowLeft: -1,
+        ArrowDown: o,
+        ArrowUp: -o
+      };
+      e.key in t && (e.preventDefault(), P(C.value + t[e.key])), e.key === "Home" && (e.preventDefault(), P(0)), e.key === "End" && (e.preventDefault(), P(r));
+    };
+    return (e, o) => (c(), d("div", {
+      class: J(ke.value),
+      style: Se(_e.value),
+      lang: l.language
+    }, [
+      H.value ? (c(), le(f(Ne), {
+        key: 0,
+        class: J(["nmorph-emoji-picker__toggle-button nmorph-emoji-picker__expand-button", { "nmorph-emoji-picker__collapse-button": b.value }]),
+        design: "button",
+        "model-value": b.value,
+        "aria-label": b.value ? u.value.collapseLabel : u.value.expandLabel,
+        title: b.value ? u.value.collapseLabel : u.value.expandLabel,
+        disabled: l.disabled,
+        onClick: o[0] || (o[0] = Ce((r) => xe(!b.value), ["prevent"]))
+      }, {
+        label: v(() => [
+          k(f(X), { size: "small" }, {
+            default: v(() => [
+              k(f(ze))
+            ]),
+            _: 1
+          }),
+          L("span", Ve, E(b.value ? u.value.collapseLabel : u.value.expandLabel), 1)
+        ]),
+        _: 1
+      }, 8, ["class", "model-value", "aria-label", "title", "disabled"])) : W("", !0),
+      re.value ? (c(), d("div", {
+        key: 1,
+        class: "nmorph-emoji-picker__compact",
+        role: "group",
+        "aria-label": u.value.quickLabel
+      }, [
+        k(f(Y), {
+          class: "nmorph-emoji-picker__quick-list",
+          height: "calc(var(--nmorph-emoji-picker-cell-size) + var(--nmorph-emoji-picker-scrollbar-size))",
+          "max-height": "calc(var(--nmorph-emoji-picker-cell-size) + var(--nmorph-emoji-picker-scrollbar-size))",
+          "scroll-y-prop": "hidden",
+          "scroll-x-prop": "auto",
+          "css-scroll-behavior": "auto",
+          "x-bar-width-in-px": 6
+        }, {
+          default: v(() => [
+            (c(!0), d(O, null, $(T.value, (r) => (c(), d("button", {
+              key: r,
+              type: "button",
+              class: "nmorph-emoji-picker__quick-button",
+              "aria-label": te(r),
+              title: te(r),
+              disabled: l.disabled,
+              onClick: (t) => ae(r)
+            }, E(r), 9, De))), 128))
+          ]),
+          _: 1
+        })
+      ], 8, qe)) : (c(), d("div", Te, [
+        L("div", Fe, [
+          k(f(Be), {
+            modelValue: q.value,
+            "onUpdate:modelValue": o[1] || (o[1] = (r) => q.value = r),
+            class: "nmorph-emoji-picker__search",
+            placeholder: u.value.searchPlaceholder,
+            disabled: l.disabled,
+            "input-attrs": {
+              class: "nmorph-emoji-picker__search-input",
+              role: "searchbox",
+              "aria-label": u.value.searchLabel
+            }
+          }, {
+            "prepend-icon": v(() => [
+              k(f(X), { size: "small" }, {
+                default: v(() => [
+                  k(f(Ie))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["modelValue", "placeholder", "disabled", "input-attrs"])
+        ]),
+        N.value.length && !x.value ? (c(), le(f(Y), {
+          key: 0,
+          class: "nmorph-emoji-picker__categories",
+          height: "40px",
+          "max-height": "40px",
+          "scroll-y-prop": "hidden",
+          "scroll-x-prop": "auto",
+          "css-scroll-behavior": "auto",
+          "x-bar-width-in-px": 6,
+          "x-gap-in-px": 6,
+          role: "tablist",
+          "aria-label": u.value.categoryLabel
+        }, {
+          default: v(() => [
+            (c(!0), d(O, null, $(N.value, (r) => (c(), d("button", {
+              key: r.key,
+              type: "button",
+              class: J(["nmorph-emoji-picker__category", { "nmorph-emoji-picker__category--active": r.key === y.value }]),
+              role: "tab",
+              "aria-selected": r.key === y.value,
+              disabled: l.disabled,
+              onClick: (t) => y.value = r.key
+            }, E(r.label), 11, Re))), 128))
+          ]),
+          _: 1
+        }, 8, ["aria-label"])) : W("", !0),
+        k(f(Y), {
+          class: "nmorph-emoji-picker__body",
+          height: "100%",
+          "max-height": "100%",
+          "scroll-x-prop": "hidden",
+          "scroll-y-prop": "auto",
+          "css-scroll-behavior": "auto",
+          "y-bar-width-in-px": 8
+        }, {
+          default: v(() => [
+            L("div", {
+              ref_key: "gridRef",
+              ref: Z,
+              class: "nmorph-emoji-picker__body-content",
+              "aria-label": ge.value,
+              onKeydown: Le
+            }, [
+              F.value.length ? (c(!0), d(O, { key: 0 }, $(F.value, (r) => (c(), d("section", {
+                key: r.key,
+                class: "nmorph-emoji-picker__section"
+              }, [
+                x.value ? (c(), d("div", Pe, E(r.label), 1)) : W("", !0),
+                L("div", Ue, [
+                  (c(!0), d(O, null, $(r.items, (t) => (c(), d("button", {
+                    key: t.key,
+                    type: "button",
+                    class: "nmorph-emoji-picker__emoji",
+                    "aria-label": t.annotation,
+                    title: t.annotation,
+                    disabled: l.disabled,
+                    onFocus: (n) => C.value = R.value.findIndex((a) => a.key === t.key),
+                    onClick: (n) => ae(t.emoji)
+                  }, [
+                    L("span", Je, E(t.emoji), 1)
+                  ], 40, Qe))), 128))
+                ])
+              ]))), 128)) : (c(), d("div", We, [
+                k(f(X), null, {
+                  default: v(() => [
+                    k(f(Oe))
+                  ]),
+                  _: 1
+                }),
+                L("span", null, E(u.value.noResults), 1)
+              ]))
+            ], 40, He)
+          ]),
+          _: 1
+        })
+      ]))
+    ], 14, $e));
+  }
+});
+export {
+  uo as default
+};

package/dist/components/data/nmorph-emoji-picker/NmorphEmojiPicker.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphEmojiPicker.css';
+import o from "./NmorphEmojiPicker.vue.js";
+/* empty css                       */
+export {
+  o as default
+};

package/dist/components/data/nmorph-file-card/NmorphFileCard.css

@@ -0,0 +1 @@
+.nmorph-file-card{display:flex;gap:var(--indentation-03);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:64px;padding:var(--indentation-03);color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-file-card .nmorph-file-card__icon{display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 12%,transparent);border-radius:var(--default-border-radius);--color: currentColor}.nmorph-file-card .nmorph-file-card__body{display:flex;flex:1 1 0;flex-direction:column;gap:2px;min-width:0}.nmorph-file-card .nmorph-file-card__name,.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-card .nmorph-file-card__name{font-weight:600;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-file-card .nmorph-file-card__meta{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__error{color:var(--nmorph-error-text-color)}.nmorph-file-card .nmorph-file-card__badge{flex:0 0 auto;max-width:72px;padding:2px 6px;overflow:hidden;color:var(--nmorph-accent-color);font-weight:700;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-transform:uppercase;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent);border-radius:var(--default-border-radius)}.nmorph-file-card .nmorph-file-card__actions{display:flex;flex:0 0 auto;gap:var(--indentation-01);align-items:center}.nmorph-file-card .nmorph-file-card__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;color:inherit;text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-file-card .nmorph-file-card__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-file-card .nmorph-file-card__action-link .nmorph-icon{--color: currentColor}.nmorph-file-card.nmorph-file-card--compact{min-height:52px;padding:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__icon{width:30px;height:30px}.nmorph-file-card.nmorph-file-card--error{outline:1px solid var(--nmorph-error-color)}