@semplice-studio/pa-design-system 0.1.0

package/dist/components/PaSearchBar/PaSearchBar.vue2.js

@@ -0,0 +1,271 @@
+import { defineComponent as Z, useModel as ee, computed as h, ref as x, watch as w, nextTick as E, onBeforeUnmount as ae, openBlock as c, createElementBlock as d, normalizeClass as F, toDisplayString as g, createCommentVNode as m, createElementVNode as f, withDirectives as le, vModelText as te, createVNode as P, Fragment as ne, renderList as oe, createBlock as se, mergeModels as H } from "vue";
+import I from "../PaIcon/PaIcon.vue.js";
+const re = ["for"], ie = { class: "pa-search-bar__wrapper" }, ce = { class: "pa-search-bar__input-cell" }, ue = ["id", "aria-expanded", "aria-activedescendant", "placeholder", "disabled"], de = ["aria-label"], fe = ["disabled"], be = { class: "pa-search-bar__button-label" }, pe = ["id", "aria-selected", "aria-disabled", "onClick"], ve = { class: "pa-search-bar__option-label" }, he = {
+  key: 2,
+  class: "pa-search-bar__helper"
+};
+let me = 0;
+function _e() {
+  return `pa-search-bar-${++me}`;
+}
+const xe = /* @__PURE__ */ Z({
+  __name: "PaSearchBar",
+  props: /* @__PURE__ */ H({
+    label: {},
+    placeholder: {},
+    helperText: {},
+    disabled: { type: Boolean, default: !1 },
+    id: {},
+    searchLabel: { default: "Ricerca" },
+    clearLabel: { default: "Cancella ricerca" },
+    debounceMs: { default: 0 },
+    options: {}
+  }, {
+    value: { default: "" },
+    valueModifiers: {}
+  }),
+  emits: /* @__PURE__ */ H(["search", "clear", "select"], ["update:value"]),
+  setup(o, { emit: K }) {
+    const t = o, _ = K, i = ee(o, "value"), D = _e(), $ = h(() => t.id ?? `${D}__input`), L = `${D}__listbox`, V = h(
+      () => (t.options ?? []).map((e, a) => `${D}__option-${a}`)
+    ), k = x(null), T = x([]), s = x(!1), n = x(-1), B = h(
+      () => Array.isArray(t.options) && t.options.length > 0
+    ), j = h(() => i.value.length > 0 && !t.disabled), q = h(
+      () => s.value && n.value >= 0 ? V.value[n.value] : void 0
+    );
+    let b = null, p = null;
+    function C() {
+      b && (clearTimeout(b), b = null);
+    }
+    function y() {
+      p && (clearTimeout(p), p = null);
+    }
+    function M() {
+      t.disabled || !B.value || (s.value = !0);
+    }
+    function v() {
+      s.value = !1, n.value = -1;
+    }
+    function O() {
+      var e;
+      t.disabled || (C(), _("search", i.value), (e = k.value) == null || e.blur());
+    }
+    function G() {
+      y(), M();
+    }
+    function J() {
+      y(), p = setTimeout(() => {
+        v(), p = null;
+      }, 150);
+    }
+    function Q() {
+      t.disabled || (i.value = "", _("clear"), E(() => {
+        var e;
+        return (e = k.value) == null ? void 0 : e.focus();
+      }));
+    }
+    function W(e) {
+      e.preventDefault(), y();
+    }
+    function R(e) {
+      t.disabled || e.disabled || (i.value = e.value, _("select", e), v(), E(() => {
+        var a;
+        return (a = k.value) == null ? void 0 : a.focus();
+      }));
+    }
+    function z(e, a) {
+      const l = t.options ?? [], r = l.length;
+      if (r === 0) return -1;
+      let u = e;
+      for (let S = 0; S < r; S++) {
+        u = (u + a + r) % r;
+        const U = l[u];
+        if (U && !U.disabled) return u;
+      }
+      return -1;
+    }
+    function A() {
+      const e = t.options ?? [];
+      for (let a = 0; a < e.length; a++) {
+        const l = e[a];
+        if (l && !l.disabled) return a;
+      }
+      return -1;
+    }
+    function N() {
+      const e = t.options ?? [];
+      for (let a = e.length - 1; a >= 0; a--) {
+        const l = e[a];
+        if (l && !l.disabled) return a;
+      }
+      return -1;
+    }
+    function X(e) {
+      if (!t.disabled)
+        switch (e.key) {
+          case "ArrowDown": {
+            e.preventDefault(), s.value ? n.value = z(n.value, 1) : B.value && (M(), n.value = A());
+            break;
+          }
+          case "ArrowUp": {
+            if (e.preventDefault(), !s.value)
+              B.value && (M(), n.value = N());
+            else {
+              const a = n.value < 0 ? 0 : n.value;
+              n.value = z(a, -1);
+            }
+            break;
+          }
+          case "Home": {
+            s.value && (e.preventDefault(), n.value = A());
+            break;
+          }
+          case "End": {
+            s.value && (e.preventDefault(), n.value = N());
+            break;
+          }
+          case "Enter": {
+            e.preventDefault();
+            const a = t.options ?? [], l = n.value >= 0 ? a[n.value] : void 0;
+            if (s.value && l && !l.disabled) {
+              R(l);
+              return;
+            }
+            O();
+            break;
+          }
+          case "Escape": {
+            s.value && (e.preventDefault(), v());
+            break;
+          }
+        }
+    }
+    function Y(e, a) {
+      e && (T.value[a] = e);
+    }
+    return w(n, async (e) => {
+      if (e < 0) return;
+      await E();
+      const a = T.value[e];
+      a && typeof a.scrollIntoView == "function" && a.scrollIntoView({ block: "nearest" });
+    }), w(
+      () => {
+        var e;
+        return ((e = t.options) == null ? void 0 : e.length) ?? 0;
+      },
+      (e) => {
+        T.value.length = e, e === 0 ? v() : n.value >= e && (n.value = -1);
+      }
+    ), w(
+      () => t.disabled,
+      (e) => {
+        e && v();
+      }
+    ), w(i, () => {
+      t.disabled || (C(), t.debounceMs > 0 && (b = setTimeout(() => {
+        _("search", i.value), b = null;
+      }, t.debounceMs)));
+    }), ae(() => {
+      C(), y();
+    }), (e, a) => (c(), d("div", {
+      class: F([
+        "pa-search-bar",
+        {
+          "pa-search-bar--disabled": o.disabled,
+          "pa-search-bar--open": s.value
+        }
+      ])
+    }, [
+      o.label ? (c(), d("label", {
+        key: 0,
+        for: $.value,
+        class: "pa-search-bar__label"
+      }, g(o.label), 9, re)) : m("", !0),
+      f("div", ie, [
+        f("div", ce, [
+          le(f("input", {
+            id: $.value,
+            ref_key: "inputRef",
+            ref: k,
+            "onUpdate:modelValue": a[0] || (a[0] = (l) => i.value = l),
+            type: "search",
+            autocomplete: "off",
+            class: "pa-search-bar__input",
+            role: "combobox",
+            "aria-autocomplete": "list",
+            "aria-controls": L,
+            "aria-expanded": s.value,
+            "aria-activedescendant": q.value,
+            placeholder: o.placeholder,
+            disabled: o.disabled,
+            onKeydown: X,
+            onFocus: G,
+            onBlur: J
+          }, null, 40, ue), [
+            [te, i.value]
+          ]),
+          j.value ? (c(), d("button", {
+            key: 0,
+            type: "button",
+            class: "pa-search-bar__clear",
+            "aria-label": o.clearLabel,
+            onClick: Q
+          }, [
+            P(I, {
+              name: "x",
+              size: "sm"
+            })
+          ], 8, de)) : m("", !0)
+        ]),
+        f("button", {
+          type: "button",
+          class: "pa-search-bar__button",
+          disabled: o.disabled,
+          onClick: O
+        }, [
+          f("span", be, g(o.searchLabel), 1),
+          P(I, {
+            name: "magnifying-glass",
+            size: "sm"
+          })
+        ], 8, fe)
+      ]),
+      s.value ? (c(), d("ul", {
+        key: 1,
+        id: L,
+        role: "listbox",
+        class: "pa-search-bar__listbox"
+      }, [
+        (c(!0), d(ne, null, oe(o.options, (l, r) => (c(), d("li", {
+          key: `option-${r}`,
+          ref_for: !0,
+          ref: (u) => Y(u, r),
+          id: V.value[r],
+          role: "option",
+          "aria-selected": r === n.value ? "true" : "false",
+          "aria-disabled": l.disabled ? "true" : void 0,
+          class: F([
+            "pa-search-bar__option",
+            { "pa-search-bar__option--disabled": l.disabled }
+          ]),
+          onMousedown: W,
+          onClick: (u) => R(l)
+        }, [
+          f("span", ve, g(l.value), 1),
+          r === n.value && !l.disabled ? (c(), se(I, {
+            key: 0,
+            name: "check",
+            size: "sm",
+            class: "pa-search-bar__option-check"
+          })) : m("", !0)
+        ], 42, pe))), 128))
+      ])) : m("", !0),
+      o.helperText ? (c(), d("p", he, g(o.helperText), 1)) : m("", !0)
+    ], 2));
+  }
+});
+export {
+  xe as default,
+  _e as nextPaSearchBarId
+};
+//# sourceMappingURL=PaSearchBar.vue2.js.map

package/dist/components/PaSearchBar/PaSearchBar.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaSearchBar.vue2.js","sources":["../../../src/components/PaSearchBar/PaSearchBar.vue"],"sourcesContent":["<script lang=\"ts\">\nlet searchBarUid = 0\nexport function nextPaSearchBarId() {\n  return `pa-search-bar-${++searchBarUid}`\n}\n\nexport interface PaSearchBarOption {\n  value: string\n  disabled?: boolean\n}\n\nexport interface PaSearchBarProps {\n  label?: string\n  placeholder?: string\n  helperText?: string\n  disabled?: boolean\n  id?: string\n  searchLabel?: string\n  clearLabel?: string\n  debounceMs?: number\n  options?: PaSearchBarOption[]\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\n\nconst props = withDefaults(defineProps<PaSearchBarProps>(), {\n  disabled: false,\n  searchLabel: 'Ricerca',\n  clearLabel: 'Cancella ricerca',\n  debounceMs: 0,\n})\n\nconst emit = defineEmits<{\n  search: [value: string]\n  clear: []\n  select: [option: PaSearchBarOption]\n}>()\n\nconst model = defineModel<string>('value', { default: '' })\n\nconst baseId = nextPaSearchBarId()\nconst inputId = computed(() => props.id ?? `${baseId}__input`)\nconst listboxId = `${baseId}__listbox`\nconst optionIds = computed(() =>\n  (props.options ?? []).map((_, i) => `${baseId}__option-${i}`),\n)\n\nconst inputRef = ref<HTMLInputElement | null>(null)\nconst optionRefs = ref<HTMLLIElement[]>([])\nconst dropdownOpen = ref(false)\nconst activeIndex = ref(-1)\n\nconst hasOptions = computed(\n  () => Array.isArray(props.options) && props.options.length > 0,\n)\n\nconst showClear = computed(() => model.value.length > 0 && !props.disabled)\n\nconst activeDescendant = computed(() =>\n  dropdownOpen.value && activeIndex.value >= 0\n    ? optionIds.value[activeIndex.value]\n    : undefined,\n)\n\nlet debounceTimer: ReturnType<typeof setTimeout> | null = null\nlet blurTimer: ReturnType<typeof setTimeout> | null = null\n\nfunction clearDebounce() {\n  if (debounceTimer) {\n    clearTimeout(debounceTimer)\n    debounceTimer = null\n  }\n}\n\nfunction clearBlurTimer() {\n  if (blurTimer) {\n    clearTimeout(blurTimer)\n    blurTimer = null\n  }\n}\n\nfunction openDropdown() {\n  if (props.disabled || !hasOptions.value) return\n  dropdownOpen.value = true\n}\n\nfunction closeDropdown() {\n  dropdownOpen.value = false\n  activeIndex.value = -1\n}\n\nfunction triggerSearch() {\n  if (props.disabled) return\n  clearDebounce()\n  emit('search', model.value)\n  inputRef.value?.blur()\n}\n\nfunction onFocus() {\n  clearBlurTimer()\n  openDropdown()\n}\n\nfunction onBlur() {\n  clearBlurTimer()\n  blurTimer = setTimeout(() => {\n    closeDropdown()\n    blurTimer = null\n  }, 150)\n}\n\nfunction onClear() {\n  if (props.disabled) return\n  model.value = ''\n  emit('clear')\n  nextTick(() => inputRef.value?.focus())\n}\n\nfunction onOptionMousedown(event: MouseEvent) {\n  event.preventDefault()\n  clearBlurTimer()\n}\n\nfunction selectOption(option: PaSearchBarOption) {\n  if (props.disabled || option.disabled) return\n  model.value = option.value\n  emit('select', option)\n  closeDropdown()\n  nextTick(() => inputRef.value?.focus())\n}\n\nfunction findNextEnabled(from: number, dir: 1 | -1): number {\n  const opts = props.options ?? []\n  const n = opts.length\n  if (n === 0) return -1\n  let i = from\n  for (let step = 0; step < n; step++) {\n    i = (i + dir + n) % n\n    const opt = opts[i]\n    if (opt && !opt.disabled) return i\n  }\n  return -1\n}\n\nfunction findFirstEnabled(): number {\n  const opts = props.options ?? []\n  for (let i = 0; i < opts.length; i++) {\n    const opt = opts[i]\n    if (opt && !opt.disabled) return i\n  }\n  return -1\n}\n\nfunction findLastEnabled(): number {\n  const opts = props.options ?? []\n  for (let i = opts.length - 1; i >= 0; i--) {\n    const opt = opts[i]\n    if (opt && !opt.disabled) return i\n  }\n  return -1\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (props.disabled) return\n  switch (event.key) {\n    case 'ArrowDown': {\n      event.preventDefault()\n      if (!dropdownOpen.value) {\n        if (hasOptions.value) {\n          openDropdown()\n          activeIndex.value = findFirstEnabled()\n        }\n      } else {\n        activeIndex.value = findNextEnabled(activeIndex.value, 1)\n      }\n      break\n    }\n    case 'ArrowUp': {\n      event.preventDefault()\n      if (!dropdownOpen.value) {\n        if (hasOptions.value) {\n          openDropdown()\n          activeIndex.value = findLastEnabled()\n        }\n      } else {\n        const from = activeIndex.value < 0 ? 0 : activeIndex.value\n        activeIndex.value = findNextEnabled(from, -1)\n      }\n      break\n    }\n    case 'Home': {\n      if (dropdownOpen.value) {\n        event.preventDefault()\n        activeIndex.value = findFirstEnabled()\n      }\n      break\n    }\n    case 'End': {\n      if (dropdownOpen.value) {\n        event.preventDefault()\n        activeIndex.value = findLastEnabled()\n      }\n      break\n    }\n    case 'Enter': {\n      event.preventDefault()\n      const opts = props.options ?? []\n      const opt = activeIndex.value >= 0 ? opts[activeIndex.value] : undefined\n      if (dropdownOpen.value && opt && !opt.disabled) {\n        selectOption(opt)\n        return\n      }\n      triggerSearch()\n      break\n    }\n    case 'Escape': {\n      if (dropdownOpen.value) {\n        event.preventDefault()\n        closeDropdown()\n      }\n      break\n    }\n  }\n}\n\nfunction setOptionRef(el: Element | null, i: number) {\n  if (el) optionRefs.value[i] = el as HTMLLIElement\n}\n\nwatch(activeIndex, async (i) => {\n  if (i < 0) return\n  await nextTick()\n  const el = optionRefs.value[i]\n  if (el && typeof el.scrollIntoView === 'function') {\n    el.scrollIntoView({ block: 'nearest' })\n  }\n})\n\nwatch(\n  () => props.options?.length ?? 0,\n  (n) => {\n    optionRefs.value.length = n\n    if (n === 0) closeDropdown()\n    else if (activeIndex.value >= n) activeIndex.value = -1\n  },\n)\n\nwatch(\n  () => props.disabled,\n  (d) => {\n    if (d) closeDropdown()\n  },\n)\n\nwatch(model, () => {\n  if (props.disabled) return\n  clearDebounce()\n  if (props.debounceMs > 0) {\n    debounceTimer = setTimeout(() => {\n      emit('search', model.value)\n      debounceTimer = null\n    }, props.debounceMs)\n  }\n})\n\nonBeforeUnmount(() => {\n  clearDebounce()\n  clearBlurTimer()\n})\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'pa-search-bar',\n      {\n        'pa-search-bar--disabled': disabled,\n        'pa-search-bar--open': dropdownOpen,\n      },\n    ]\"\n  >\n    <label v-if=\"label\" :for=\"inputId\" class=\"pa-search-bar__label\">\n      {{ label }}\n    </label>\n    <div class=\"pa-search-bar__wrapper\">\n      <div class=\"pa-search-bar__input-cell\">\n        <input\n          :id=\"inputId\"\n          ref=\"inputRef\"\n          v-model=\"model\"\n          type=\"search\"\n          autocomplete=\"off\"\n          class=\"pa-search-bar__input\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          :aria-controls=\"listboxId\"\n          :aria-expanded=\"dropdownOpen\"\n          :aria-activedescendant=\"activeDescendant\"\n          :placeholder=\"placeholder\"\n          :disabled=\"disabled\"\n          @keydown=\"onKeydown\"\n          @focus=\"onFocus\"\n          @blur=\"onBlur\"\n        />\n        <button\n          v-if=\"showClear\"\n          type=\"button\"\n          class=\"pa-search-bar__clear\"\n          :aria-label=\"clearLabel\"\n          @click=\"onClear\"\n        >\n          <PaIcon name=\"x\" size=\"sm\" />\n        </button>\n      </div>\n      <button\n        type=\"button\"\n        class=\"pa-search-bar__button\"\n        :disabled=\"disabled\"\n        @click=\"triggerSearch\"\n      >\n        <span class=\"pa-search-bar__button-label\">{{ searchLabel }}</span>\n        <PaIcon name=\"magnifying-glass\" size=\"sm\" />\n      </button>\n    </div>\n    <ul\n      v-if=\"dropdownOpen\"\n      :id=\"listboxId\"\n      role=\"listbox\"\n      class=\"pa-search-bar__listbox\"\n    >\n      <li\n        v-for=\"(opt, i) in options\"\n        :key=\"`option-${i}`\"\n        :ref=\"(el) => setOptionRef(el as Element | null, i)\"\n        :id=\"optionIds[i]\"\n        role=\"option\"\n        :aria-selected=\"i === activeIndex ? 'true' : 'false'\"\n        :aria-disabled=\"opt.disabled ? 'true' : undefined\"\n        :class=\"[\n          'pa-search-bar__option',\n          { 'pa-search-bar__option--disabled': opt.disabled },\n        ]\"\n        @mousedown=\"onOptionMousedown\"\n        @click=\"selectOption(opt)\"\n      >\n        <span class=\"pa-search-bar__option-label\">{{ opt.value }}</span>\n        <PaIcon\n          v-if=\"i === activeIndex && !opt.disabled\"\n          name=\"check\"\n          size=\"sm\"\n          class=\"pa-search-bar__option-check\"\n        />\n      </li>\n    </ul>\n    <p v-if=\"helperText\" class=\"pa-search-bar__helper\">{{ helperText }}</p>\n  </div>\n</template>\n\n<style scoped>\n.pa-search-bar {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--pa-font-family-base);\n  container-type: inline-size;\n}\n\n.pa-search-bar__label {\n  font-size: var(--pa-font-label-sm-size);\n  line-height: var(--pa-font-label-sm-line-height);\n  font-weight: var(--pa-font-label-sm-weight);\n  color: var(--pa-color-text-secondary-gray);\n  padding-bottom: var(--pa-space-xs);\n}\n\n.pa-search-bar__wrapper {\n  display: flex;\n  align-items: stretch;\n  box-sizing: border-box;\n  background: var(--pa-color-bg-white);\n  border: var(--pa-border-xs) solid var(--pa-color-bg-secondary-light-50);\n  border-radius: 9px;\n  overflow: hidden;\n  transition: border-color 120ms ease, box-shadow 120ms ease,\n    border-radius 120ms ease;\n}\n\n.pa-search-bar__wrapper:hover {\n  border-color: var(--pa-color-neutral-gray);\n}\n\n.pa-search-bar__wrapper:focus-within {\n  border-color: var(--pa-color-primary);\n  box-shadow: 0 0 0 2px var(--pa-color-primary-focus-border);\n}\n\n.pa-search-bar--open .pa-search-bar__wrapper {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.pa-search-bar__input-cell {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: var(--pa-space-xs);\n  padding-right: var(--pa-space-sm);\n}\n\n.pa-search-bar__input {\n  flex: 1 1 auto;\n  min-width: 0;\n  margin: 0;\n  padding: 12px var(--pa-space-sm);\n  background: transparent;\n  border: none;\n  outline: none;\n  color: var(--pa-color-text-secondary-gray);\n  font-family: inherit;\n  font-size: var(--pa-font-body-size);\n  line-height: var(--pa-font-body-line-height);\n  font-weight: var(--pa-font-body-weight);\n}\n\n.pa-search-bar__input::placeholder {\n  color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-search-bar__input::-webkit-search-decoration,\n.pa-search-bar__input::-webkit-search-cancel-button,\n.pa-search-bar__input::-webkit-search-results-button,\n.pa-search-bar__input::-webkit-search-results-decoration {\n  appearance: none;\n  -webkit-appearance: none;\n}\n\n.pa-search-bar__clear {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: 24px;\n  height: 24px;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  border: none;\n  border-radius: var(--pa-radius-smooth);\n  color: var(--pa-color-text-secondary-gray);\n  cursor: pointer;\n}\n\n.pa-search-bar__clear:hover {\n  color: var(--pa-color-neutral-charcoal);\n}\n\n.pa-search-bar__clear:focus-visible {\n  outline: 2px solid var(--pa-color-primary-focus-border);\n  outline-offset: 1px;\n}\n\n.pa-search-bar__button {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--pa-space-xs);\n  margin: 0;\n  padding: 12px var(--pa-space-2xl);\n  background: var(--pa-color-primary);\n  border: none;\n  border-radius: 0;\n  color: var(--pa-color-text-white);\n  font-family: inherit;\n  font-size: var(--pa-font-label-sm-size);\n  line-height: var(--pa-font-label-sm-line-height);\n  font-weight: var(--pa-font-label-sm-weight);\n  cursor: pointer;\n  transition: background-color 120ms ease;\n}\n\n.pa-search-bar__button:hover {\n  background: var(--pa-color-primary-hover);\n}\n\n.pa-search-bar__button:active {\n  background: var(--pa-color-primary-pressed);\n}\n\n.pa-search-bar__button:focus-visible {\n  outline: 2px solid var(--pa-color-text-white);\n  outline-offset: -4px;\n}\n\n.pa-search-bar__listbox {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background: var(--pa-color-bg-white);\n  max-height: 320px;\n  overflow-y: auto;\n}\n\n.pa-search-bar__option {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--pa-space-xs);\n  padding: var(--pa-space-sm);\n  background: var(--pa-color-bg-white);\n  border: var(--pa-border-xs) solid var(--pa-color-bg-secondary-light-50);\n  margin-bottom: -1px;\n  color: var(--pa-color-text-secondary-gray);\n  font-size: var(--pa-font-body-size);\n  line-height: var(--pa-font-body-line-height);\n  font-weight: var(--pa-font-body-weight);\n  cursor: pointer;\n  user-select: none;\n  transition: background-color 80ms ease, color 80ms ease,\n    border-color 80ms ease;\n}\n\n.pa-search-bar__option:last-child {\n  margin-bottom: 0;\n  border-bottom-left-radius: var(--pa-radius-smooth);\n  border-bottom-right-radius: var(--pa-radius-smooth);\n}\n\n.pa-search-bar__option:hover {\n  background: var(--pa-color-primary-hover);\n  color: var(--pa-color-text-white);\n}\n\n.pa-search-bar__option:active {\n  background: var(--pa-color-primary-pressed);\n  color: var(--pa-color-text-white);\n}\n\n.pa-search-bar__option:focus-visible {\n  outline: none;\n  border-color: var(--pa-color-primary);\n}\n\n.pa-search-bar__option[aria-selected='true'] {\n  background: var(--pa-color-primary);\n  color: var(--pa-color-text-white);\n}\n\n.pa-search-bar__option--disabled,\n.pa-search-bar__option--disabled:hover,\n.pa-search-bar__option--disabled:active {\n  background: var(--pa-color-bg-disabled-gray);\n  color: var(--pa-color-text-disabled-gray);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.pa-search-bar__option-check {\n  flex: 0 0 auto;\n}\n\n.pa-search-bar__helper {\n  margin: 0;\n  padding-top: var(--pa-space-xs);\n  font-size: var(--pa-font-label-helper-size);\n  line-height: var(--pa-font-label-helper-line-height);\n  font-weight: var(--pa-font-label-helper-weight);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-search-bar--disabled .pa-search-bar__wrapper,\n.pa-search-bar--disabled .pa-search-bar__wrapper:hover {\n  background: var(--pa-color-bg-secondary-light-40);\n  border-color: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-search-bar--disabled .pa-search-bar__input {\n  color: var(--pa-color-text-disabled-gray);\n  cursor: not-allowed;\n}\n\n.pa-search-bar--disabled .pa-search-bar__button {\n  background: var(--pa-color-bg-secondary-light-40);\n  color: var(--pa-color-text-disabled-gray);\n  cursor: not-allowed;\n}\n\n.pa-search-bar--disabled .pa-search-bar__button:hover {\n  background: var(--pa-color-bg-secondary-light-40);\n}\n\n@container (max-width: 600px) {\n  .pa-search-bar__wrapper {\n    flex-direction: column;\n    gap: var(--pa-space-xs);\n    background: transparent;\n    border: none;\n    border-radius: 0;\n    overflow: visible;\n  }\n\n  .pa-search-bar__wrapper:hover,\n  .pa-search-bar__wrapper:focus-within {\n    border-color: transparent;\n    box-shadow: none;\n  }\n\n  .pa-search-bar--open .pa-search-bar__wrapper {\n    border-radius: 0;\n  }\n\n  .pa-search-bar__input-cell {\n    background: var(--pa-color-bg-white);\n    border: var(--pa-border-xs) solid var(--pa-color-bg-secondary-light-50);\n    border-radius: var(--pa-radius-smooth);\n    transition: border-color 120ms ease, box-shadow 120ms ease;\n  }\n\n  .pa-search-bar__input-cell:focus-within {\n    border-color: var(--pa-color-primary);\n    box-shadow: 0 0 0 2px var(--pa-color-primary-focus-border);\n  }\n\n  .pa-search-bar--open .pa-search-bar__input-cell {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  .pa-search-bar__button {\n    width: 100%;\n    height: 52px;\n    border-radius: var(--pa-radius-smooth);\n  }\n\n  .pa-search-bar--disabled .pa-search-bar__input-cell {\n    background: var(--pa-color-bg-secondary-light-40);\n  }\n}\n</style>\n"],"names":["searchBarUid","nextPaSearchBarId","props","__props","emit","__emit","model","_useModel","baseId","inputId","computed","listboxId","optionIds","_","i","inputRef","ref","optionRefs","dropdownOpen","activeIndex","hasOptions","showClear","activeDescendant","debounceTimer","blurTimer","clearDebounce","clearBlurTimer","openDropdown","closeDropdown","triggerSearch","_a","onFocus","onBlur","onClear","nextTick","onOptionMousedown","event","selectOption","option","findNextEnabled","from","dir","opts","n","step","opt","findFirstEnabled","findLastEnabled","onKeydown","setOptionRef","el","watch","d","onBeforeUnmount","_createElementBlock","_normalizeClass","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","$event","_createVNode","PaIcon","_hoisted_7","_toDisplayString","_openBlock","_Fragment","_renderList","_hoisted_9","_createBlock","_hoisted_10"],"mappings":"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"}

package/dist/components/PaSearchBar/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as PaSearchBar } from './PaSearchBar.vue';
+export type { PaSearchBarProps, PaSearchBarOption } from './PaSearchBar.vue';

package/dist/components/PaSearchBar/index.js

@@ -0,0 +1,6 @@
+import { default as r, default as f } from "./PaSearchBar.vue.js";
+export {
+  r as PaSearchBar,
+  f as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/PaSearchBar/index.js.map

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

package/dist/components/PaSelect/PaSelect.vue.d.ts

@@ -0,0 +1,39 @@
+export type PaSelectSize = 'sm' | 'lg';
+export interface PaSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface PaSelectProps {
+    options: PaSelectOption[];
+    size?: PaSelectSize;
+    label?: string;
+    disabled?: boolean;
+    id?: string;
+    helperText?: string;
+    error?: string | boolean;
+    valid?: boolean;
+    name?: string;
+    autocomplete?: string;
+    required?: boolean;
+    readonly?: boolean;
+    placeholder?: string;
+}
+export declare function nextPaSelectId(): string;
+declare const _default: import("vue").DefineComponent<PaSelectProps & {
+    modelValue?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<PaSelectProps & {
+    modelValue?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    error: string | boolean;
+    size: PaSelectSize;
+    disabled: boolean;
+    valid: boolean;
+    required: boolean;
+    readonly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/PaSelect/PaSelect.vue.js

@@ -0,0 +1,10 @@
+import t from "./PaSelect.vue2.js";
+import { nextPaSelectId as c } from "./PaSelect.vue2.js";
+/* empty css              */
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+const f = /* @__PURE__ */ e(t, [["__scopeId", "data-v-4228fedd"]]);
+export {
+  f as default,
+  c as nextPaSelectId
+};
+//# sourceMappingURL=PaSelect.vue.js.map

package/dist/components/PaSelect/PaSelect.vue.js.map

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

package/dist/components/PaSelect/PaSelect.vue2.js

@@ -0,0 +1,107 @@
+import { defineComponent as B, useModel as V, computed as a, openBlock as t, createElementBlock as d, normalizeClass as h, createTextVNode as k, toDisplayString as s, createCommentVNode as i, createElementVNode as b, withDirectives as x, Fragment as M, renderList as S, vModelSelect as w, createVNode as z, mergeModels as I } from "vue";
+import N from "../PaIcon/PaIcon.vue.js";
+const T = ["for"], $ = {
+  key: 0,
+  class: "pa-select__required",
+  "aria-hidden": "true"
+}, C = { class: "pa-select__field" }, A = ["id", "disabled", "required", "name", "autocomplete", "aria-required", "aria-invalid", "aria-describedby"], D = {
+  key: 0,
+  value: "",
+  disabled: "",
+  hidden: ""
+}, E = ["value", "disabled"], P = ["id"];
+let F = 0;
+function L() {
+  return `pa-select-${++F}`;
+}
+const H = /* @__PURE__ */ B({
+  __name: "PaSelect",
+  props: /* @__PURE__ */ I({
+    options: {},
+    size: { default: "sm" },
+    label: {},
+    disabled: { type: Boolean, default: !1 },
+    id: {},
+    helperText: {},
+    error: { type: [String, Boolean], default: !1 },
+    valid: { type: Boolean, default: !1 },
+    name: {},
+    autocomplete: {},
+    required: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    placeholder: {}
+  }, {
+    modelValue: { default: "" },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const l = e, n = V(e, "modelValue"), p = L(), c = a(() => l.id ?? p), v = a(() => `${c.value}-msg`), r = a(() => !!l.error), m = a(() => l.valid && !r.value), y = a(
+      () => typeof l.error == "string" && l.error.length > 0 ? l.error : null
+    ), g = a(
+      () => !r.value && !m.value && l.helperText ? l.helperText : null
+    ), u = a(() => y.value ?? g.value), q = a(
+      () => l.placeholder !== void 0 && n.value === ""
+    );
+    return (U, f) => (t(), d("div", {
+      class: h([
+        "pa-select",
+        `pa-select--${e.size}`,
+        {
+          "pa-select--disabled": e.disabled && !e.readonly,
+          "pa-select--readonly": e.readonly,
+          "pa-select--error": r.value,
+          "pa-select--valid": m.value,
+          "pa-select--placeholder-shown": q.value
+        }
+      ])
+    }, [
+      e.label ? (t(), d("label", {
+        key: 0,
+        for: c.value,
+        class: "pa-select__label"
+      }, [
+        k(s(e.label), 1),
+        e.required ? (t(), d("span", $, "*")) : i("", !0)
+      ], 8, T)) : i("", !0),
+      b("div", C, [
+        x(b("select", {
+          id: c.value,
+          "onUpdate:modelValue": f[0] || (f[0] = (o) => n.value = o),
+          disabled: e.disabled || e.readonly,
+          required: e.required,
+          name: e.name,
+          autocomplete: e.autocomplete,
+          "aria-required": e.required || void 0,
+          "aria-invalid": r.value || void 0,
+          "aria-describedby": u.value ? v.value : void 0,
+          class: "pa-select__control"
+        }, [
+          e.placeholder ? (t(), d("option", D, s(e.placeholder), 1)) : i("", !0),
+          (t(!0), d(M, null, S(e.options, (o) => (t(), d("option", {
+            key: o.value,
+            value: o.value,
+            disabled: o.disabled
+          }, s(o.label), 9, E))), 128))
+        ], 8, A), [
+          [w, n.value]
+        ]),
+        z(N, {
+          name: "caret-up-down",
+          size: "md",
+          class: "pa-select__chevron"
+        })
+      ]),
+      u.value ? (t(), d("div", {
+        key: 1,
+        id: v.value,
+        class: h(["pa-select__message", { "pa-select__message--error": r.value }])
+      }, s(u.value), 11, P)) : i("", !0)
+    ], 2));
+  }
+});
+export {
+  H as default,
+  L as nextPaSelectId
+};
+//# sourceMappingURL=PaSelect.vue2.js.map

package/dist/components/PaSelect/PaSelect.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaSelect.vue2.js","sources":["../../../src/components/PaSelect/PaSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nlet uid = 0\nexport function nextPaSelectId() {\n  return `pa-select-${++uid}`\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\n\nexport type PaSelectSize = 'sm' | 'lg'\n\nexport interface PaSelectOption {\n  value: string\n  label: string\n  disabled?: boolean\n}\n\nexport interface PaSelectProps {\n  options: PaSelectOption[]\n  size?: PaSelectSize\n  label?: string\n  disabled?: boolean\n  id?: string\n  helperText?: string\n  error?: string | boolean\n  valid?: boolean\n  name?: string\n  autocomplete?: string\n  required?: boolean\n  readonly?: boolean\n  placeholder?: string\n}\n\nconst props = withDefaults(defineProps<PaSelectProps>(), {\n  size: 'sm',\n  disabled: false,\n  error: false,\n  valid: false,\n  required: false,\n  readonly: false,\n})\n\nconst model = defineModel<string>({ default: '' })\n\nconst generatedId = nextPaSelectId()\nconst inputId = computed(() => props.id ?? generatedId)\nconst messageId = computed(() => `${inputId.value}-msg`)\n\nconst errorActive = computed(() => Boolean(props.error))\nconst validActive = computed(() => props.valid && !errorActive.value)\n\nconst errorMessage = computed(() =>\n  typeof props.error === 'string' && props.error.length > 0 ? props.error : null,\n)\nconst helperMessage = computed(() =>\n  !errorActive.value && !validActive.value && props.helperText ? props.helperText : null,\n)\nconst message = computed(() => errorMessage.value ?? helperMessage.value)\n\nconst placeholderShown = computed(\n  () => props.placeholder !== undefined && model.value === '',\n)\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'pa-select',\n      `pa-select--${size}`,\n      {\n        'pa-select--disabled': disabled && !readonly,\n        'pa-select--readonly': readonly,\n        'pa-select--error': errorActive,\n        'pa-select--valid': validActive,\n        'pa-select--placeholder-shown': placeholderShown,\n      },\n    ]\"\n  >\n    <label v-if=\"label\" :for=\"inputId\" class=\"pa-select__label\">\n      {{ label }}<span v-if=\"required\" class=\"pa-select__required\" aria-hidden=\"true\">*</span>\n    </label>\n    <div class=\"pa-select__field\">\n      <select\n        :id=\"inputId\"\n        v-model=\"model\"\n        :disabled=\"disabled || readonly\"\n        :required=\"required\"\n        :name=\"name\"\n        :autocomplete=\"autocomplete\"\n        :aria-required=\"required || undefined\"\n        :aria-invalid=\"errorActive || undefined\"\n        :aria-describedby=\"message ? messageId : undefined\"\n        class=\"pa-select__control\"\n      >\n        <option v-if=\"placeholder\" value=\"\" disabled hidden>{{ placeholder }}</option>\n        <option\n          v-for=\"opt in options\"\n          :key=\"opt.value\"\n          :value=\"opt.value\"\n          :disabled=\"opt.disabled\"\n        >\n          {{ opt.label }}\n        </option>\n      </select>\n      <PaIcon name=\"caret-up-down\" size=\"md\" class=\"pa-select__chevron\" />\n    </div>\n    <div\n      v-if=\"message\"\n      :id=\"messageId\"\n      :class=\"['pa-select__message', { 'pa-select__message--error': errorActive }]\"\n    >\n      {{ message }}\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.pa-select {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pa-space-2xs);\n  font-family: var(--pa-font-family-base);\n}\n\n.pa-select__label {\n  font-size: var(--pa-font-label-sm-size);\n  line-height: var(--pa-font-label-sm-line-height);\n  font-weight: var(--pa-font-label-sm-weight);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-select__field {\n  display: flex;\n  align-items: center;\n  gap: var(--pa-space-xs);\n  box-sizing: border-box;\n  background: var(--pa-color-bg-white);\n  border: var(--pa-border-xs) solid var(--pa-color-bg-secondary-light-50);\n  border-radius: var(--pa-radius-smooth);\n  transition: border-color 120ms ease, background-color 120ms ease;\n}\n\n.pa-select__field:hover {\n  border-color: var(--pa-color-neutral-gray);\n}\n\n.pa-select__field:focus-within {\n  outline: 3px solid var(--pa-color-primary-focus-border);\n  outline-offset: 0;\n  border-color: var(--pa-color-primary);\n}\n\n.pa-select__control {\n  flex: 1 1 auto;\n  min-width: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  color: var(--pa-color-text-black);\n  font-family: inherit;\n  font-size: var(--pa-font-body-size);\n  line-height: var(--pa-font-body-line-height);\n  font-weight: var(--pa-font-body-weight);\n  cursor: pointer;\n}\n\n.pa-select__chevron {\n  flex: 0 0 auto;\n  pointer-events: none;\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-select--sm .pa-select__field {\n  height: 44px;\n  padding: 0 var(--pa-space-sm);\n}\n\n.pa-select--lg .pa-select__field {\n  height: 60px;\n  padding: 0 var(--pa-space-sm);\n}\n\n.pa-select--lg .pa-select__label {\n  font-size: var(--pa-font-label-md-size);\n  line-height: var(--pa-font-label-md-line-height);\n  font-weight: var(--pa-font-label-md-weight);\n}\n\n.pa-select--placeholder-shown .pa-select__control {\n  color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-select--disabled .pa-select__field {\n  background: var(--pa-color-bg-disabled-gray);\n  border-color: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-select--disabled .pa-select__field:hover {\n  border-color: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-select--disabled .pa-select__label,\n.pa-select--disabled .pa-select__control,\n.pa-select--disabled .pa-select__chevron {\n  color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-select--disabled .pa-select__control {\n  cursor: not-allowed;\n}\n\n.pa-select--error .pa-select__field {\n  border-color: var(--pa-color-error);\n  border-width: var(--pa-border-sm);\n}\n.pa-select--error .pa-select__field:hover {\n  border-color: var(--pa-color-error);\n}\n\n.pa-select--valid .pa-select__field {\n  border-color: var(--pa-color-success);\n  border-width: var(--pa-border-sm);\n}\n.pa-select--valid .pa-select__field:hover {\n  border-color: var(--pa-color-success);\n}\n\n.pa-select__message {\n  font-size: var(--pa-font-label-helper-size);\n  line-height: var(--pa-font-label-helper-line-height);\n  font-weight: var(--pa-font-label-helper-weight);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-select__message--error {\n  color: var(--pa-color-error);\n}\n\n.pa-select__required {\n  margin-left: var(--pa-space-3xs);\n  color: var(--pa-color-error);\n}\n\n.pa-select--readonly .pa-select__field {\n  background: var(--pa-color-bg-primary-light-40);\n  border-color: var(--pa-color-bg-secondary-light-50);\n}\n.pa-select--readonly .pa-select__field:hover {\n  border-color: var(--pa-color-bg-secondary-light-50);\n}\n.pa-select--readonly .pa-select__control {\n  cursor: not-allowed;\n}\n</style>\n"],"names":["uid","nextPaSelectId","props","__props","model","_useModel","generatedId","inputId","computed","messageId","errorActive","validActive","errorMessage","helperMessage","message","placeholderShown","_createElementBlock","_normalizeClass","_hoisted_2","_createElementVNode","_hoisted_3","$event","_hoisted_5","_toDisplayString","_Fragment","_renderList","opt","_hoisted_6","_createVNode","PaIcon","_hoisted_7"],"mappings":";;;;;;;;;;;;AACA,IAAIA,IAAM;AACH,SAASC,IAAiB;AAC/B,SAAO,aAAa,EAAED,CAAG;AAC3B;;;;;;;;;;;;;;;;;;;;;;;AA+BA,UAAME,IAAQC,GASRC,IAAQC,EAAmBF,GAAA,YAAgB,GAE3CG,IAAcL,EAAA,GACdM,IAAUC,EAAS,MAAMN,EAAM,MAAMI,CAAW,GAChDG,IAAYD,EAAS,MAAM,GAAGD,EAAQ,KAAK,MAAM,GAEjDG,IAAcF,EAAS,MAAM,EAAQN,EAAM,KAAM,GACjDS,IAAcH,EAAS,MAAMN,EAAM,SAAS,CAACQ,EAAY,KAAK,GAE9DE,IAAeJ;AAAA,MAAS,MAC5B,OAAON,EAAM,SAAU,YAAYA,EAAM,MAAM,SAAS,IAAIA,EAAM,QAAQ;AAAA,IAAA,GAEtEW,IAAgBL;AAAA,MAAS,MAC7B,CAACE,EAAY,SAAS,CAACC,EAAY,SAAST,EAAM,aAAaA,EAAM,aAAa;AAAA,IAAA,GAE9EY,IAAUN,EAAS,MAAMI,EAAa,SAASC,EAAc,KAAK,GAElEE,IAAmBP;AAAA,MACvB,MAAMN,EAAM,gBAAgB,UAAaE,EAAM,UAAU;AAAA,IAAA;2BAKzDY,EAgDM,OAAA;AAAA,MA/CH,OAAKC,EAAA;AAAA;sBAA2Cd,EAAA,IAAI;AAAA;UAA2C,uBAAAA,EAAA,aAAaA,EAAA;AAAA,iCAAyCA,EAAA;AAAA,8BAAsCO,EAAA;AAAA,8BAAyCC,EAAA;AAAA,0CAAqDI,EAAA;AAAA,QAAA;AAAA;;MAY7QZ,EAAA,cAAba,EAEQ,SAAA;AAAA;QAFa,KAAKT,EAAA;AAAA,QAAS,OAAM;AAAA,MAAA;YACpCJ,EAAA,KAAK,GAAA,CAAA;AAAA,QAAeA,EAAA,iBAAZa,EAA6E,QAA7EE,GAAqE,GAAC;;MAEnFC,EAwBM,OAxBNC,GAwBM;AAAA,UAvBJD,EAqBS,UAAA;AAAA,UApBN,IAAIZ,EAAA;AAAA,wDACIH,EAAK,QAAAiB;AAAA,UACb,UAAUlB,EAAA,YAAYA,EAAA;AAAA,UACtB,UAAUA,EAAA;AAAA,UACV,MAAMA,EAAA;AAAA,UACN,cAAcA,EAAA;AAAA,UACd,iBAAeA,EAAA,YAAY;AAAA,UAC3B,gBAAcO,EAAA,SAAe;AAAA,UAC7B,oBAAkBI,EAAA,QAAUL,EAAA,QAAY;AAAA,UACzC,OAAM;AAAA,QAAA;UAEQN,EAAA,oBAAda,EAA8E,UAA9EM,GAA8EC,EAAvBpB,EAAA,WAAW,GAAA,CAAA;kBAClEa,EAOSQ,GAAA,MAAAC,EANOtB,EAAA,SAAO,CAAduB,YADTV,EAOS,UAAA;AAAA,YALN,KAAKU,EAAI;AAAA,YACT,OAAOA,EAAI;AAAA,YACX,UAAUA,EAAI;AAAA,UAAA,GAEZH,EAAAG,EAAI,KAAK,GAAA,GAAAC,CAAA;;cAjBLvB,EAAA,KAAK;AAAA,QAAA;QAoBhBwB,EAAoEC,GAAA;AAAA,UAA5D,MAAK;AAAA,UAAgB,MAAK;AAAA,UAAK,OAAM;AAAA,QAAA;;MAGvCf,EAAA,cADRE,EAMM,OAAA;AAAA;QAJH,IAAIP,EAAA;AAAA,QACJ,+DAA6DC,EAAA,OAAW,CAAA;AAAA,MAAA,KAEtEI,EAAA,KAAO,GAAA,IAAAgB,CAAA;;;;"}

package/dist/components/PaSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as PaSelect } from './PaSelect.vue';
+export type { PaSelectProps, PaSelectOption, PaSelectSize } from './PaSelect.vue';

package/dist/components/PaSelect/index.js

@@ -0,0 +1,6 @@
+import { default as t, default as f } from "./PaSelect.vue.js";
+export {
+  t as PaSelect,
+  f as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/PaSelect/index.js.map

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

package/dist/components/PaStepProgressBar/PaStepProgressBar.vue.d.ts

@@ -0,0 +1,33 @@
+export type PaStepProgressBarStatus = 'done' | 'current' | 'upcoming' | 'error';
+export type PaStepProgressBarOrientation = 'horizontal' | 'vertical';
+export interface PaStepProgressBarItem {
+    label: string;
+    status?: PaStepProgressBarStatus;
+}
+export interface PaStepProgressBarProps {
+    steps: PaStepProgressBarItem[];
+    currentStep?: number;
+    orientation?: PaStepProgressBarOrientation;
+    label?: string;
+}
+export declare function pad2(n: number): string;
+declare const _default: import("vue").DefineComponent<PaStepProgressBarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (payload: {
+        index: number;
+        item: PaStepProgressBarItem;
+        status: PaStepProgressBarStatus;
+        event: MouseEvent;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<PaStepProgressBarProps> & Readonly<{
+    onSelect?: ((payload: {
+        index: number;
+        item: PaStepProgressBarItem;
+        status: PaStepProgressBarStatus;
+        event: MouseEvent;
+    }) => any) | undefined;
+}>, {
+    label: string;
+    currentStep: number;
+    orientation: PaStepProgressBarOrientation;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/PaStepProgressBar/PaStepProgressBar.vue.js

@@ -0,0 +1,10 @@
+import o from "./PaStepProgressBar.vue2.js";
+import { pad2 as s } from "./PaStepProgressBar.vue2.js";
+/* empty css                       */
+import r from "../../_virtual/_plugin-vue_export-helper.js";
+const a = /* @__PURE__ */ r(o, [["__scopeId", "data-v-57e3f4be"]]);
+export {
+  a as default,
+  s as pad2
+};
+//# sourceMappingURL=PaStepProgressBar.vue.js.map

package/dist/components/PaStepProgressBar/PaStepProgressBar.vue.js.map

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