@gspa/ui 0.1.1 → 0.1.4

package/dist/components/DatePicker.js

@@ -0,0 +1,401 @@
+import { ref as p, computed as x, watch as _, onMounted as le, onBeforeUnmount as se, createElementBlock as s, openBlock as l, createElementVNode as o, createBlock as ue, createCommentVNode as M, normalizeClass as T, withModifiers as U, Teleport as de, createVNode as ce, Transition as fe, withCtx as ve, normalizeStyle as me, toDisplayString as w, Fragment as C, renderList as V, nextTick as pe } from "vue";
+const ge = { class: "relative w-full bg-(--ui-surface) rounded-md" }, be = { class: "relative" }, ye = ["id", "value", "disabled", "placeholder", "required", "aria-describedby"], he = { class: "flex items-center justify-between mb-3" }, xe = { class: "text-sm font-semibold ui-text" }, we = { class: "grid grid-cols-7 gap-1 mb-1" }, De = { class: "grid grid-cols-7 gap-1" }, ke = ["disabled", "onClick"], Se = {
+  key: 0,
+  class: "mt-3 pt-2 border-t ui-border"
+}, Me = {
+  key: 0,
+  class: "border-l pl-3 ui-border"
+}, Te = { class: "max-h-[260px] overflow-y-auto pr-1 space-y-1" }, Ce = ["onClick"], $e = {
+  __name: "DatePicker",
+  props: {
+    id: String,
+    modelValue: [String, Date],
+    disabled: Boolean,
+    required: Boolean,
+    min: [String, Date],
+    max: [String, Date],
+    placeholder: {
+      type: String,
+      default: "Select date"
+    },
+    format: {
+      type: String,
+      default: "DD/MM/YYYY"
+    },
+    clearable: {
+      type: Boolean,
+      default: !0
+    },
+    showToday: {
+      type: Boolean,
+      default: !0
+    },
+    ariaDescribedby: String,
+    // Custom validation function: (date: Date) => string | null
+    // Return error message string if invalid, null if valid
+    customValidation: {
+      type: Function,
+      default: null
+    },
+    // Array of disabled dates or function to determine if date is disabled
+    disabledDates: {
+      type: [Array, Function],
+      default: null
+    },
+    enableTime: {
+      type: Boolean,
+      default: !1
+    },
+    minuteInterval: {
+      type: Number,
+      default: 1
+    }
+  },
+  emits: ["update:modelValue", "validation-error"],
+  setup(d, { emit: G }) {
+    const r = d, y = G, m = p(!1), B = p(null), Y = p(null), F = p({}), g = /* @__PURE__ */ new Date(), i = p(g.getMonth()), u = p(g.getFullYear()), c = p(null), D = p(!1), k = p("00:00"), J = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], K = x(
+      () => new Date(u.value, i.value).toLocaleString("default", {
+        month: "long"
+      })
+    ), I = x(() => new Date(u.value, i.value + 1, 0).getDate()), Q = x(() => new Date(u.value, i.value, 1).getDay()), E = x(() => {
+      const n = new Date(u.value, i.value, 0).getDate(), e = Q.value;
+      return Array.from({ length: e }, (t, a) => n - e + a + 1);
+    }), X = x(() => {
+      const n = E.value.length + I.value, e = n % 7 === 0 ? 0 : 7 - n % 7;
+      return Array.from({ length: e }, (t, a) => a + 1);
+    }), N = x(() => c.value ? r.enableTime ? ee(c.value) : z(c.value) : ""), Z = x(() => {
+      const n = Math.min(60, Math.max(1, Number(r.minuteInterval) || 1)), e = [];
+      for (let t = 0; t < 24; t++)
+        for (let a = 0; a < 60; a += n) {
+          const v = String(t).padStart(2, "0"), f = String(a).padStart(2, "0");
+          e.push(`${v}:${f}`);
+        }
+      return e;
+    });
+    function z(n) {
+      if (!n) return "";
+      const e = new Date(n), t = String(e.getMonth() + 1).padStart(2, "0"), a = String(e.getDate()).padStart(2, "0"), v = e.getFullYear();
+      return r.format.replace("MM", t).replace("DD", a).replace("YYYY", v);
+    }
+    function ee(n) {
+      const e = z(n), t = String(n.getHours()).padStart(2, "0"), a = String(n.getMinutes()).padStart(2, "0");
+      return `${e} ${t}:${a}`;
+    }
+    function S(n) {
+      if (!n) return null;
+      if (n instanceof Date) return n;
+      if (typeof n == "string") {
+        if (n.includes("T")) {
+          const [a, v] = n.split("T"), f = S(a);
+          if (!f) return null;
+          const [h = "00", b = "00"] = (v || "").slice(0, 5).split(":");
+          return f.setHours(parseInt(h, 10) || 0, parseInt(b, 10) || 0, 0, 0), f;
+        }
+        const t = n.split("-");
+        if (t.length === 3) {
+          const a = parseInt(t[0], 10), v = parseInt(t[1], 10) - 1, f = parseInt(t[2], 10);
+          return new Date(a, v, f);
+        }
+      }
+      const e = new Date(n);
+      return isNaN(e.getTime()) ? null : e;
+    }
+    function te(n) {
+      return g.getDate() === n && g.getMonth() === i.value && g.getFullYear() === u.value;
+    }
+    function H(n) {
+      if (!c.value) return !1;
+      const e = new Date(c.value);
+      return e.getDate() === n && e.getMonth() === i.value && e.getFullYear() === u.value;
+    }
+    function $(n) {
+      const e = new Date(u.value, i.value, n);
+      if (r.min) {
+        const t = S(r.min);
+        if (t && e < t) return !0;
+      }
+      if (r.max) {
+        const t = S(r.max);
+        if (t && e > t) return !0;
+      }
+      if (r.disabledDates) {
+        if (typeof r.disabledDates == "function")
+          return r.disabledDates(e);
+        if (Array.isArray(r.disabledDates))
+          return r.disabledDates.some((t) => {
+            const a = S(t);
+            return a && a.getTime() === e.getTime();
+          });
+      }
+      return !!(r.customValidation && r.customValidation(e));
+    }
+    function L(n) {
+      if (!n)
+        return D.value = !1, y("validation-error", null), !0;
+      if (r.customValidation) {
+        const e = r.customValidation(n);
+        if (e)
+          return D.value = !0, y("validation-error", e), !1;
+      }
+      return D.value = !1, y("validation-error", null), !0;
+    }
+    async function R() {
+      await pe();
+      const n = Y.value || (r.id ? document.getElementById(r.id) : null);
+      if (!n || !B.value) return;
+      const e = n.getBoundingClientRect(), t = 320, a = window.innerHeight - e.bottom, v = e.top, f = 8;
+      let h, b;
+      a >= t || a > v ? h = e.bottom + f : h = e.top - t - f, b = e.left;
+      const O = 256;
+      b + O > window.innerWidth && (b = window.innerWidth - O - 16), b < 16 && (b = 16), F.value = {
+        top: `${h}px`,
+        left: `${b}px`
+      };
+    }
+    async function ne() {
+      r.disabled || (m.value = !m.value, m.value && await R());
+    }
+    function A() {
+      m.value = !1;
+    }
+    function ae() {
+      i.value === 0 ? (i.value = 11, u.value--) : i.value--;
+    }
+    function re() {
+      i.value === 11 ? (i.value = 0, u.value++) : i.value++;
+    }
+    function j(n) {
+      if ($(n)) return;
+      const e = new Date(u.value, i.value, n);
+      L(e) && (c.value = e, P(e), setTimeout(() => {
+        r.enableTime || (m.value = !1);
+      }, 150));
+    }
+    function P(n) {
+      const e = n.getFullYear(), t = String(n.getMonth() + 1).padStart(2, "0"), a = String(n.getDate()).padStart(2, "0");
+      if (!r.enableTime) {
+        y("update:modelValue", `${e}-${t}-${a}`);
+        return;
+      }
+      const [v = "00", f = "00"] = k.value.split(":"), h = `${e}-${t}-${a}T${v}:${f}`;
+      y("update:modelValue", h);
+    }
+    function oe() {
+      i.value = g.getMonth(), u.value = g.getFullYear(), j(g.getDate());
+    }
+    function ie() {
+      c.value = null, k.value = "00:00", D.value = !1, y("update:modelValue", ""), y("validation-error", null);
+    }
+    _(() => r.modelValue, (n) => {
+      if (n) {
+        const e = S(n);
+        if (e) {
+          c.value = e;
+          const t = String(e.getHours()).padStart(2, "0"), a = String(e.getMinutes()).padStart(2, "0");
+          k.value = `${t}:${a}`, i.value = e.getMonth(), u.value = e.getFullYear(), L(e);
+        }
+      } else
+        c.value = null, D.value = !1;
+    }, { immediate: !0 }), _(k, (n) => {
+      if (!r.enableTime || !c.value) return;
+      const [e = "00", t = "00"] = (n || "00:00").split(":");
+      c.value.setHours(parseInt(e, 10) || 0, parseInt(t, 10) || 0, 0, 0), P(c.value);
+    });
+    function q() {
+      m.value && R();
+    }
+    function W(n) {
+      n.key === "Escape" && m.value && A();
+    }
+    return le(() => {
+      document.addEventListener("keydown", W), window.addEventListener("resize", q);
+    }), se(() => {
+      document.removeEventListener("keydown", W), window.removeEventListener("resize", q);
+    }), (n, e) => (l(), s("div", ge, [
+      o("div", be, [
+        o("input", {
+          id: d.id,
+          ref_key: "inputRef",
+          ref: Y,
+          type: "text",
+          value: N.value,
+          readonly: "",
+          disabled: d.disabled,
+          placeholder: d.placeholder,
+          required: d.required,
+          "aria-describedby": d.ariaDescribedby,
+          class: T([
+            "w-full px-3 py-2 pr-10 border rounded-md ui-surface ui-text placeholder-slate-400 text-sm  ",
+            "focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:border-(--ui-primary) cursor-pointer transition-colors",
+            "disabled:bg-(--ui-bg) disabled:text-(--ui-text) disabled:cursor-not-allowed",
+            D.value ? "border-(--ui-danger) focus:ring-(--ui-danger) focus:border-(--ui-danger)" : "ui-border"
+          ]),
+          onClick: ne
+        }, null, 10, ye),
+        e[2] || (e[2] = o("div", { class: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" }, [
+          o("svg", {
+            class: "w-4 h-4 ui-text",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24"
+          }, [
+            o("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "2",
+              d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+            })
+          ])
+        ], -1)),
+        d.clearable && N.value && !d.disabled ? (l(), s("button", {
+          key: 0,
+          type: "button",
+          class: "absolute right-9 top-1/2 -translate-y-1/2 p-1 hover:bg-(--ui-bg) rounded transition-colors",
+          "aria-label": "Clear date",
+          onClick: U(ie, ["stop"])
+        }, [...e[1] || (e[1] = [
+          o("svg", {
+            class: "w-3.5 h-3.5 ui-text",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24"
+          }, [
+            o("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "2",
+              d: "M6 18L18 6M6 6l12 12"
+            })
+          ], -1)
+        ])])) : M("", !0)
+      ]),
+      (l(), ue(de, { to: "body" }, [
+        ce(fe, {
+          "enter-active-class": "transition ease-out duration-100",
+          "enter-from-class": "transform opacity-0 scale-95",
+          "enter-to-class": "transform opacity-100 scale-100",
+          "leave-active-class": "transition ease-in duration-75",
+          "leave-from-class": "transform opacity-100 scale-100",
+          "leave-to-class": "transform opacity-0 scale-95"
+        }, {
+          default: ve(() => [
+            m.value ? (l(), s("div", {
+              key: 0,
+              ref_key: "calendarRef",
+              ref: B,
+              style: me(F.value),
+              class: T(["fixed z-10000 rounded-lg shadow-xl p-3 ui-surface ui-border-strong", d.enableTime ? "w-[420px]" : "w-64"]),
+              onClick: e[0] || (e[0] = U(() => {
+              }, ["stop"]))
+            }, [
+              o("div", {
+                class: T(d.enableTime ? "grid grid-cols-[1fr_124px] gap-3" : "block")
+              }, [
+                o("div", null, [
+                  o("div", he, [
+                    o("button", {
+                      type: "button",
+                      class: "p-1.5 rounded hover:bg-(--ui-bg) transition-colors",
+                      "aria-label": "Previous Month",
+                      onClick: ae
+                    }, [...e[3] || (e[3] = [
+                      o("svg", {
+                        class: "w-4 h-4 ui-text",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24"
+                      }, [
+                        o("path", {
+                          "stroke-linecap": "round",
+                          "stroke-linejoin": "round",
+                          "stroke-width": "2",
+                          d: "M15 18l-6-6 6-6"
+                        })
+                      ], -1)
+                    ])]),
+                    o("div", xe, w(K.value) + " " + w(u.value), 1),
+                    o("button", {
+                      type: "button",
+                      class: "p-1.5 rounded hover:bg-(--ui-bg) transition-colors",
+                      "aria-label": "Next Month",
+                      onClick: re
+                    }, [...e[4] || (e[4] = [
+                      o("svg", {
+                        class: "w-4 h-4 ui-text",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24"
+                      }, [
+                        o("path", {
+                          "stroke-linecap": "round",
+                          "stroke-linejoin": "round",
+                          "stroke-width": "2",
+                          d: "M9 18l6-6-6-6"
+                        })
+                      ], -1)
+                    ])])
+                  ]),
+                  o("div", we, [
+                    (l(), s(C, null, V(J, (t) => o("div", {
+                      key: t,
+                      class: "text-center text-xs font-medium ui-text py-1"
+                    }, w(t), 1)), 64))
+                  ]),
+                  o("div", De, [
+                    (l(!0), s(C, null, V(E.value, (t, a) => (l(), s("div", {
+                      key: "prev-" + a,
+                      class: "text-center text-xs ui-text py-1.5"
+                    }, w(t), 1))), 128)),
+                    (l(!0), s(C, null, V(I.value, (t) => (l(), s("button", {
+                      key: t,
+                      type: "button",
+                      disabled: $(t),
+                      class: T([
+                        "w-8 h-8 rounded text-xs font-medium transition-colors",
+                        te(t) && !H(t) ? "ui-primary-soft ui-primary ring-1 ring-(--ui-primary)" : "",
+                        H(t) ? "ui-primary-bg ui-text hover:bg-(--ui-primary)" : "ui-text hover:bg-(--ui-bg)",
+                        $(t) ? "ui-text cursor-not-allowed hover:bg-transparent line-through" : "cursor-pointer"
+                      ]),
+                      onClick: (a) => j(t)
+                    }, w(t), 11, ke))), 128)),
+                    (l(!0), s(C, null, V(X.value, (t, a) => (l(), s("div", {
+                      key: "next-" + a,
+                      class: "text-center text-xs ui-text py-1.5"
+                    }, w(t), 1))), 128))
+                  ]),
+                  d.showToday ? (l(), s("div", Se, [
+                    o("button", {
+                      type: "button",
+                      class: "w-full px-3 py-1.5 text-xs font-medium ui-primary hover:bg-(--ui-primary-soft) rounded transition-colors",
+                      onClick: oe
+                    }, " Today ")
+                  ])) : M("", !0)
+                ]),
+                d.enableTime ? (l(), s("div", Me, [
+                  e[5] || (e[5] = o("div", { class: "text-xs font-semibold ui-text mb-2" }, "Time", -1)),
+                  o("div", Te, [
+                    (l(!0), s(C, null, V(Z.value, (t) => (l(), s("button", {
+                      key: t,
+                      type: "button",
+                      class: T(["w-full px-2 py-1.5 text-left text-sm rounded transition-colors", t === k.value ? "ui-primary-bg ui-text" : "ui-text hover:bg-(--ui-bg)"]),
+                      onClick: (a) => k.value = t
+                    }, w(t), 11, Ce))), 128))
+                  ])
+                ])) : M("", !0)
+              ], 2)
+            ], 6)) : M("", !0)
+          ]),
+          _: 1
+        }),
+        m.value ? (l(), s("div", {
+          key: 0,
+          class: "fixed inset-0 z-9999",
+          onClick: A
+        })) : M("", !0)
+      ]))
+    ]));
+  }
+};
+export {
+  $e as default
+};

package/dist/components/Divider.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),n=require("class-variance-authority"),o=require("../utils/cn.cjs"),l={key:0,class:"px-3 text-sm ui-text ui-surface dark:bg-(----ui-bg) dark:text-(--ui-text) relative z-10"},s={__name:"Divider",props:{orientation:{type:String,default:"horizontal",validator:e=>["horizontal","vertical"].includes(e)},size:{type:String,default:"md",validator:e=>["sm","md","lg"].includes(e)},color:{type:String,default:"gray",validator:e=>["gray","primary","secondary"].includes(e)},faded:{type:Boolean,default:!1},label:{type:String,default:null},spacing:{type:String,default:null}},setup(e){const i=e,a=n.cva("divider relative flex items-center",{variants:{orientation:{horizontal:"w-full h-px flex items-center",vertical:"h-full w-px"},size:{sm:"",md:"",lg:""},color:{gray:"ui-bg dark:bg-(--ui-bg)",primary:"ui-primary-bg",secondary:"ui-bg"}},compoundVariants:[{orientation:"horizontal",size:"sm",class:"my-2"},{orientation:"horizontal",size:"md",class:"my-4"},{orientation:"horizontal",size:"lg",class:"my-6"},{orientation:"vertical",size:"sm",class:"mx-2"},{orientation:"vertical",size:"md",class:"mx-4"},{orientation:"vertical",size:"lg",class:"mx-6"}],defaultVariants:{orientation:"horizontal",size:"md",color:"gray"}}),r=t.computed(()=>i.spacing?i.spacing:"");return(c,u)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(t.unref(o.cn)(t.unref(a)({orientation:e.orientation,size:e.size,color:e.color}),{"opacity-50":e.faded},r.value))},[e.label&&e.orientation==="horizontal"?(t.openBlock(),t.createElementBlock("span",l,t.toDisplayString(e.label),1)):t.createCommentVNode("",!0)],2))}};exports.default=s;

package/dist/components/Divider.js

@@ -0,0 +1,103 @@
+import { computed as l, createElementBlock as e, openBlock as a, normalizeClass as s, unref as o, createCommentVNode as c, toDisplayString as d } from "vue";
+import { cva as m } from "class-variance-authority";
+import { cn as u } from "../utils/cn.js";
+const g = {
+  key: 0,
+  class: "px-3 text-sm ui-text ui-surface dark:bg-(----ui-bg) dark:text-(--ui-text) relative z-10"
+}, x = {
+  __name: "Divider",
+  props: {
+    orientation: {
+      type: String,
+      default: "horizontal",
+      validator: (t) => ["horizontal", "vertical"].includes(t)
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator: (t) => ["sm", "md", "lg"].includes(t)
+    },
+    color: {
+      type: String,
+      default: "gray",
+      validator: (t) => ["gray", "primary", "secondary"].includes(t)
+    },
+    faded: {
+      type: Boolean,
+      default: !1
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    spacing: {
+      type: String,
+      default: null
+    }
+  },
+  setup(t) {
+    const i = t, r = m("divider relative flex items-center", {
+      variants: {
+        orientation: {
+          horizontal: "w-full h-px flex items-center",
+          vertical: "h-full w-px"
+        },
+        size: {
+          sm: "",
+          md: "",
+          lg: ""
+        },
+        color: {
+          gray: "ui-bg dark:bg-(--ui-bg)",
+          primary: "ui-primary-bg",
+          secondary: "ui-bg"
+        }
+      },
+      compoundVariants: [
+        {
+          orientation: "horizontal",
+          size: "sm",
+          class: "my-2"
+        },
+        {
+          orientation: "horizontal",
+          size: "md",
+          class: "my-4"
+        },
+        {
+          orientation: "horizontal",
+          size: "lg",
+          class: "my-6"
+        },
+        {
+          orientation: "vertical",
+          size: "sm",
+          class: "mx-2"
+        },
+        {
+          orientation: "vertical",
+          size: "md",
+          class: "mx-4"
+        },
+        {
+          orientation: "vertical",
+          size: "lg",
+          class: "mx-6"
+        }
+      ],
+      defaultVariants: {
+        orientation: "horizontal",
+        size: "md",
+        color: "gray"
+      }
+    }), n = l(() => i.spacing ? i.spacing : "");
+    return (f, y) => (a(), e("div", {
+      class: s(o(u)(o(r)({ orientation: t.orientation, size: t.size, color: t.color }), { "opacity-50": t.faded }, n.value))
+    }, [
+      t.label && t.orientation === "horizontal" ? (a(), e("span", g, d(t.label), 1)) : c("", !0)
+    ], 2));
+  }
+};
+export {
+  x as default
+};

package/dist/components/Dropdown.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),i=require("class-variance-authority"),l=require("../utils/cn.cjs"),f=require("./Icon.cjs"),v=["aria-expanded"],g={__name:"Dropdown",props:{triggerText:{type:String,default:"Options"},placement:{type:String,default:"bottom-start",validator:t=>["bottom-start","bottom-end","top-start","top-end"].includes(t)},variant:{type:String,default:"default",validator:t=>["default","outline","ghost"].includes(t)}},setup(t){const n=t,o=e.ref(!1),r=e.ref(null),c=i.cva("inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary) focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",{variants:{variant:{default:"ui-text ui-primary-bg hover:bg-(--ui-primary-strong)",outline:"  border ui-text ui-surface hover:brightness-105",ghost:"ui-text hover:bg-(--ui-surface) hover:text-(--ui-text)"}}}),u=i.cva("absolute z-50 min-w-[8rem] overflow-hidden rounded-md border   p-1 ui-text shadow-md",{variants:{placement:{"bottom-start":"top-full left-0 mt-1","bottom-end":"top-full right-0 mt-1","top-start":"bottom-full left-0 mb-1","top-end":"bottom-full right-0 mb-1"}}}),d=e.computed(()=>l.cn(c({variant:n.variant}),"h-10 px-4 py-2")),m=e.computed(()=>l.cn(u({placement:n.placement}))),p=()=>{o.value=!o.value},s=a=>{r.value&&!r.value.contains(a.target)&&(o.value=!1)};return e.onMounted(()=>{document.addEventListener("click",s)}),e.onUnmounted(()=>{document.removeEventListener("click",s)}),(a,b)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dropdownRef",ref:r,class:"relative"},[e.createElementVNode("button",{class:e.normalizeClass(d.value),"aria-expanded":o.value,"aria-haspopup":!0,onClick:p},[e.renderSlot(a.$slots,"trigger",{},()=>[e.createElementVNode("span",null,e.toDisplayString(t.triggerText),1),e.createVNode(f.default,{name:"chevron-down",class:"ml-2 h-4 w-4"})])],10,v),e.createVNode(e.Transition,{"enter-active-class":"transition ease-out duration-100","enter-from-class":"transform opacity-0 scale-95","enter-to-class":"transform opacity-100 scale-100","leave-active-class":"transition ease-in duration-75","leave-from-class":"transform opacity-100 scale-100","leave-to-class":"transform opacity-0 scale-95"},{default:e.withCtx(()=>[o.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(m.value),role:"menu","aria-orientation":"vertical"},[e.renderSlot(a.$slots,"default")],2)):e.createCommentVNode("",!0)]),_:3})],512))}};exports.default=g;

package/dist/components/Dropdown.js

@@ -0,0 +1,104 @@
+import { ref as s, computed as i, onMounted as w, onUnmounted as _, createElementBlock as l, openBlock as c, createElementVNode as d, createVNode as u, normalizeClass as m, renderSlot as p, toDisplayString as k, Transition as C, withCtx as S, createCommentVNode as V } from "vue";
+import { cva as f } from "class-variance-authority";
+import { cn as v } from "../utils/cn.js";
+import D from "./Icon.js";
+const E = ["aria-expanded"], L = {
+  __name: "Dropdown",
+  props: {
+    triggerText: {
+      type: String,
+      default: "Options"
+    },
+    placement: {
+      type: String,
+      default: "bottom-start",
+      validator: (t) => ["bottom-start", "bottom-end", "top-start", "top-end"].includes(t)
+    },
+    variant: {
+      type: String,
+      default: "default",
+      validator: (t) => ["default", "outline", "ghost"].includes(t)
+    }
+  },
+  setup(t) {
+    const r = t, e = s(!1), a = s(null), g = f(
+      "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary) focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      {
+        variants: {
+          variant: {
+            default: "ui-text ui-primary-bg hover:bg-(--ui-primary-strong)",
+            outline: "  border ui-text ui-surface hover:brightness-105",
+            ghost: "ui-text hover:bg-(--ui-surface) hover:text-(--ui-text)"
+          }
+        }
+      }
+    ), b = f(
+      "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border   p-1 ui-text shadow-md",
+      {
+        variants: {
+          placement: {
+            "bottom-start": "top-full left-0 mt-1",
+            "bottom-end": "top-full right-0 mt-1",
+            "top-start": "bottom-full left-0 mb-1",
+            "top-end": "bottom-full right-0 mb-1"
+          }
+        }
+      }
+    ), h = i(
+      () => v(g({ variant: r.variant }), "h-10 px-4 py-2")
+    ), y = i(
+      () => v(b({ placement: r.placement }))
+    ), x = () => {
+      e.value = !e.value;
+    }, n = (o) => {
+      a.value && !a.value.contains(o.target) && (e.value = !1);
+    };
+    return w(() => {
+      document.addEventListener("click", n);
+    }), _(() => {
+      document.removeEventListener("click", n);
+    }), (o, N) => (c(), l("div", {
+      ref_key: "dropdownRef",
+      ref: a,
+      class: "relative"
+    }, [
+      d("button", {
+        class: m(h.value),
+        "aria-expanded": e.value,
+        "aria-haspopup": !0,
+        onClick: x
+      }, [
+        p(o.$slots, "trigger", {}, () => [
+          d("span", null, k(t.triggerText), 1),
+          u(D, {
+            name: "chevron-down",
+            class: "ml-2 h-4 w-4"
+          })
+        ])
+      ], 10, E),
+      u(C, {
+        "enter-active-class": "transition ease-out duration-100",
+        "enter-from-class": "transform opacity-0 scale-95",
+        "enter-to-class": "transform opacity-100 scale-100",
+        "leave-active-class": "transition ease-in duration-75",
+        "leave-from-class": "transform opacity-100 scale-100",
+        "leave-to-class": "transform opacity-0 scale-95"
+      }, {
+        default: S(() => [
+          e.value ? (c(), l("div", {
+            key: 0,
+            class: m(y.value),
+            role: "menu",
+            "aria-orientation": "vertical"
+          }, [
+            p(o.$slots, "default")
+          ], 2)) : V("", !0)
+        ]),
+        _: 3
+      })
+    ], 512));
+  }
+};
+export {
+  L as default
+};

package/dist/components/DropdownItem.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),l=require("class-variance-authority"),u=require("../utils/cn.cjs"),d=require("./Icon.cjs"),m={key:1,class:"ml-auto text-xs tracking-widest opacity-60"},f={__name:"DropdownItem",props:{href:String,icon:String,shortcut:String,disabled:Boolean,variant:{type:String,default:"default",validator:t=>["default","danger"].includes(t)}},emits:["click"],setup(t,{emit:o}){const n=t,i=o,r=l.cva("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-(--ui-surface) focus:text-(--ui-text) data-[disabled]:pointer-events-none data-[disabled]:opacity-50",{variants:{variant:{default:"hover:bg-(--ui-surface) hover:text-(--ui-text)",danger:"ui-danger hover:bg-(--ui-danger-soft) hover:text-(--ui-danger)"}}}),c=e.computed(()=>u.cn(r({variant:n.variant}))),s=a=>{n.disabled||i("click",a)};return(a,h)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.href?"a":"button"),{href:t.href,class:e.normalizeClass(c.value),disabled:t.disabled,role:"menuitem",onClick:s},{default:e.withCtx(()=>[t.icon?(e.openBlock(),e.createBlock(d.default,{key:0,name:t.icon,class:"mr-2 h-4 w-4"},null,8,["name"])):e.createCommentVNode("",!0),e.renderSlot(a.$slots,"default"),t.shortcut?(e.openBlock(),e.createElementBlock("span",m,e.toDisplayString(t.shortcut),1)):e.createCommentVNode("",!0)]),_:3},8,["href","class","disabled"]))}};exports.default=f;