@septkit/ui 0.0.1

package/README.md

@@ -0,0 +1,10 @@
+# SET ui library
+
+## Package name
+
+> [!IMPORTANT]
+> If you rename this package from `@septkit/ui`, you must update CSS imports in all consuming packages.
+>
+> Currently, packages using this library need the following directive in their CSS files (path depends on its own context to get to node_modules): `@source "../../../node_modules/@septkit/ui";`
+>
+> This directive points to the relative path from the consuming package to this UI package in the node_modules directory. The @source directive is essential for externalizing Tailwind CSS and DaisyUI dependencies, allowing all projects to share the same Tailwind configuration.

package/dist/button/button.vue.js

@@ -0,0 +1,67 @@
+import { defineComponent as l, computed as e, createElementBlock as d, openBlock as c, normalizeClass as b, renderSlot as u } from "vue";
+const p = /* @__PURE__ */ l({
+  __name: "button",
+  props: {
+    color: {},
+    variant: {},
+    size: {},
+    active: { type: Boolean },
+    disabled: { type: Boolean },
+    modifier: {}
+  },
+  setup(o) {
+    const n = o, i = e(
+      () => ({
+        neutral: "btn-neutral",
+        primary: "btn-primary",
+        secondary: "btn-secondary",
+        accent: "btn-accent",
+        info: "btn-info",
+        success: "btn-success",
+        warning: "btn-warning",
+        error: "btn-error",
+        undefined: ""
+      })[n.color ?? "undefined"]
+    ), s = e(
+      () => ({
+        outline: "btn-outline",
+        dash: "btn-dash",
+        soft: "btn-soft",
+        ghost: "btn-ghost",
+        link: "btn-link",
+        undefined: ""
+      })[n.variant ?? "undefined"]
+    ), a = e(
+      () => ({
+        xs: "btn-xs",
+        sm: "btn-sm",
+        md: "btn-md",
+        lg: "btn-lg",
+        xl: "btn-xl",
+        undefined: ""
+      })[n.size ?? "undefined"]
+    ), r = e(
+      () => ({
+        wide: "btn-wide",
+        block: "btn-block",
+        square: "btn-square",
+        circle: "btn-circle",
+        undefined: ""
+      })[n.modifier ?? "undefined"]
+    );
+    return (t, f) => (c(), d("button", {
+      class: b(["btn", [
+        i.value,
+        s.value,
+        a.value,
+        r.value,
+        { "btn-active": t.active, "btn-disabled": t.disabled }
+      ]])
+    }, [
+      u(t.$slots, "default")
+    ], 2));
+  }
+});
+export {
+  p as default
+};

package/dist/button/button.vue2.js

@@ -0,0 +1,4 @@
+import f from "./button.vue.js";
+export {
+  f as default
+};

package/dist/config.css

@@ -0,0 +1,38 @@
+@plugin "daisyui" {
+  themes: spark --default;
+}
+
+@plugin "daisyui/theme" {
+  name: 'spark';
+  default: true;
+  prefersdark: false;
+  color-scheme: 'light';
+  --color-base-100: oklch(98% 0 0);
+  --color-base-200: oklch(97% 0 0);
+  --color-base-300: oklch(92% 0 0);
+  --color-base-content: oklch(37% 0 0);
+  --color-primary: oklch(70% 0.213 47.604);
+  --color-primary-content: oklch(97% 0.013 17.38);
+  --color-secondary: oklch(95% 0.038 75.164);
+  --color-secondary-content: oklch(66% 0.179 58.318);
+  --color-accent: oklch(60% 0.118 184.704);
+  --color-accent-content: oklch(98% 0.001 106.423);
+  --color-neutral: oklch(55% 0.013 58.071);
+  --color-neutral-content: oklch(98% 0.031 120.757);
+  --color-info: oklch(70% 0.165 254.624);
+  --color-info-content: oklch(98% 0.001 106.423);
+  --color-success: oklch(72% 0.219 149.579);
+  --color-success-content: oklch(98% 0.001 106.423);
+  --color-warning: oklch(87% 0.169 91.605);
+  --color-warning-content: oklch(98% 0.001 106.423);
+  --color-error: oklch(63% 0.237 25.331);
+  --color-error-content: oklch(98% 0.001 106.423);
+  --radius-selector: 0.25rem;
+  --radius-field: 0.25rem;
+  --radius-box: 0.25rem;
+  --size-selector: 0.21875rem;
+  --size-field: 0.21875rem;
+  --border: 1.5px;
+  --depth: 1;
+  --noise: 1;
+}

package/dist/dropdown/dropdown.vue.js

@@ -0,0 +1,102 @@
+import { defineComponent as w, useTemplateRef as g, ref as y, computed as o, createElementBlock as a, openBlock as d, createElementVNode as k, withDirectives as h, normalizeClass as z, withModifiers as C, renderSlot as l, unref as O } from "vue";
+import { VOnClickOutside as S } from "../external/.pnpm/@vueuse_components@13.5.0_vue@3.5.17_typescript@5.8.3_/node_modules/@vueuse/components/index.js";
+const B = ["open"], _ = {
+  "data-testid": "dropdown-menu",
+  class: "menu dropdown-content bg-base-100 z-1 w-52 p-2 shadow-sm"
+}, D = /* @__PURE__ */ w({
+  __name: "dropdown",
+  props: {
+    color: {},
+    variant: {},
+    size: {},
+    active: { type: Boolean },
+    disabled: { type: Boolean },
+    modifier: {}
+  },
+  setup(r, { expose: c }) {
+    const n = r, s = g("details-ref"), e = y(!1), u = o(
+      () => ({
+        neutral: "btn-neutral",
+        primary: "btn-primary",
+        secondary: "btn-secondary",
+        accent: "btn-accent",
+        info: "btn-info",
+        success: "btn-success",
+        warning: "btn-warning",
+        error: "btn-error",
+        undefined: ""
+      })[n.color ?? "undefined"]
+    ), b = o(
+      () => ({
+        outline: "btn-outline",
+        dash: "btn-dash",
+        soft: "btn-soft",
+        ghost: "btn-ghost",
+        link: "btn-link",
+        undefined: ""
+      })[n.variant ?? "undefined"]
+    ), f = o(
+      () => ({
+        xs: "btn-xs",
+        sm: "btn-sm",
+        md: "btn-md",
+        lg: "btn-lg",
+        xl: "btn-xl",
+        undefined: ""
+      })[n.size ?? "undefined"]
+    ), p = o(
+      () => ({
+        wide: "btn-wide",
+        block: "btn-block",
+        square: "btn-square",
+        circle: "btn-circle",
+        undefined: ""
+      })[n.modifier ?? "undefined"]
+    );
+    function m() {
+      s.value && (s.value.open = e.value);
+    }
+    function v() {
+      e.value = !1;
+    }
+    return c({
+      /** Method to close the dropdown */
+      close: v,
+      /** Reactive boolean of the dropdown state */
+      isOpen: e
+    }), (t, i) => (d(), a("details", {
+      "data-testid": "dropdown-wrapper",
+      ref: "details-ref",
+      class: "dropdown",
+      open: e.value,
+      onToggle: m
+    }, [
+      k("summary", {
+        "data-testid": "dropdown-trigger",
+        onClick: i[0] || (i[0] = C((x) => e.value = !e.value, ["stop"])),
+        class: z(["btn", [
+          u.value,
+          b.value,
+          f.value,
+          p.value,
+          { "btn-active": t.active, "btn-disabled": t.disabled }
+        ]])
+      }, [
+        l(t.$slots, "label")
+      ], 2),
+      h((d(), a("ul", _, [
+        l(t.$slots, "items")
+      ])), [
+        [
+          O(S),
+          () => e.value = !1,
+          void 0,
+          { bubble: !0 }
+        ]
+      ])
+    ], 40, B));
+  }
+});
+export {
+  D as default
+};

package/dist/dropdown/dropdown.vue2.js

@@ -0,0 +1,4 @@
+import f from "./dropdown.vue.js";
+export {
+  f as default
+};

package/dist/external/.pnpm/@vueuse_components@13.5.0_vue@3.5.17_typescript@5.8.3_/node_modules/@vueuse/components/index.js

@@ -0,0 +1,197 @@
+import { computed as T, toValue as a, unref as j, shallowRef as I, watch as R } from "vue";
+import { noop as m, isIOS as S, isClient as B, toArray as L, watchImmediate as F, tryOnScopeDispose as $, isObject as H, toRef as V } from "../../../../@vueuse_shared@13.5.0_vue@3.5.17_typescript@5.8.3_/node_modules/@vueuse/shared/index.js";
+const N = B ? window : void 0;
+function y(e) {
+  var t;
+  const l = a(e);
+  return (t = l?.$el) != null ? t : l;
+}
+function k(...e) {
+  const t = [], l = () => {
+    t.forEach((n) => n()), t.length = 0;
+  }, u = (n, r, i, p) => (n.addEventListener(r, i, p), () => n.removeEventListener(r, i, p)), c = T(() => {
+    const n = L(a(e[0])).filter((r) => r != null);
+    return n.every((r) => typeof r != "string") ? n : void 0;
+  }), d = F(
+    () => {
+      var n, r;
+      return [
+        (r = (n = c.value) == null ? void 0 : n.map((i) => y(i))) != null ? r : [N].filter((i) => i != null),
+        L(a(c.value ? e[1] : e[0])),
+        L(j(c.value ? e[2] : e[1])),
+        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
+        a(c.value ? e[3] : e[2])
+      ];
+    },
+    ([n, r, i, p]) => {
+      if (l(), !n?.length || !r?.length || !i?.length)
+        return;
+      const E = H(p) ? { ...p } : p;
+      t.push(
+        ...n.flatMap(
+          (w) => r.flatMap(
+            (h) => i.map((g) => u(w, h, g, E))
+          )
+        )
+      );
+    },
+    { flush: "post" }
+  ), v = () => {
+    d(), l();
+  };
+  return $(l), v;
+}
+let D = !1;
+function P(e, t, l = {}) {
+  const { window: u = N, ignore: c = [], capture: d = !0, detectIframe: v = !1, controls: n = !1 } = l;
+  if (!u)
+    return n ? { stop: m, cancel: m, trigger: m } : m;
+  if (S && !D) {
+    D = !0;
+    const o = { passive: !0 };
+    Array.from(u.document.body.children).forEach((s) => s.addEventListener("click", m, o)), u.document.documentElement.addEventListener("click", m, o);
+  }
+  let r = !0;
+  const i = (o) => a(c).some((s) => {
+    if (typeof s == "string")
+      return Array.from(u.document.querySelectorAll(s)).some((f) => f === o.target || o.composedPath().includes(f));
+    {
+      const f = y(s);
+      return f && (o.target === f || o.composedPath().includes(f));
+    }
+  });
+  function p(o) {
+    const s = a(o);
+    return s && s.$.subTree.shapeFlag === 16;
+  }
+  function E(o, s) {
+    const f = a(o), O = f.$.subTree && f.$.subTree.children;
+    return O == null || !Array.isArray(O) ? !1 : O.some((A) => A.el === s.target || s.composedPath().includes(A.el));
+  }
+  const w = (o) => {
+    const s = y(e);
+    if (o.target != null && !(!(s instanceof Element) && p(e) && E(e, o)) && !(!s || s === o.target || o.composedPath().includes(s))) {
+      if ("detail" in o && o.detail === 0 && (r = !i(o)), !r) {
+        r = !0;
+        return;
+      }
+      t(o);
+    }
+  };
+  let h = !1;
+  const g = [
+    k(u, "click", (o) => {
+      h || (h = !0, setTimeout(() => {
+        h = !1;
+      }, 0), w(o));
+    }, { passive: !0, capture: d }),
+    k(u, "pointerdown", (o) => {
+      const s = y(e);
+      r = !i(o) && !!(s && !o.composedPath().includes(s));
+    }, { passive: !0 }),
+    v && k(u, "blur", (o) => {
+      setTimeout(() => {
+        var s;
+        const f = y(e);
+        ((s = u.document.activeElement) == null ? void 0 : s.tagName) === "IFRAME" && !f?.contains(u.document.activeElement) && t(o);
+      }, 0);
+    }, { passive: !0 })
+  ].filter(Boolean), b = () => g.forEach((o) => o());
+  return n ? {
+    stop: b,
+    cancel: () => {
+      r = !1;
+    },
+    trigger: (o) => {
+      r = !0, w(o), r = !1;
+    }
+  } : b;
+}
+const M = /* @__PURE__ */ new WeakMap(), J = {
+  mounted(e, t) {
+    const l = !t.modifiers.bubble;
+    let u;
+    if (typeof t.value == "function")
+      u = P(e, t.value, { capture: l });
+    else {
+      const [c, d] = t.value;
+      u = P(e, c, Object.assign({ capture: l }, d));
+    }
+    M.set(e, u);
+  },
+  unmounted(e) {
+    const t = M.get(e);
+    t && typeof t == "function" ? t() : t?.stop(), M.delete(e);
+  }
+};
+function W(e) {
+  return typeof Window < "u" && e instanceof Window ? e.document.documentElement : typeof Document < "u" && e instanceof Document ? e.documentElement : e;
+}
+function Y(e) {
+  const t = window.getComputedStyle(e);
+  if (t.overflowX === "scroll" || t.overflowY === "scroll" || t.overflowX === "auto" && e.clientWidth < e.scrollWidth || t.overflowY === "auto" && e.clientHeight < e.scrollHeight)
+    return !0;
+  {
+    const l = e.parentNode;
+    return !l || l.tagName === "BODY" ? !1 : Y(l);
+  }
+}
+function X(e) {
+  const t = e || window.event, l = t.target;
+  return Y(l) ? !1 : t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
+}
+const C = /* @__PURE__ */ new WeakMap();
+function q(e, t = !1) {
+  const l = I(t);
+  let u = null, c = "";
+  R(V(e), (n) => {
+    const r = W(a(n));
+    if (r) {
+      const i = r;
+      if (C.get(i) || C.set(i, i.style.overflow), i.style.overflow !== "hidden" && (c = i.style.overflow), i.style.overflow === "hidden")
+        return l.value = !0;
+      if (l.value)
+        return i.style.overflow = "hidden";
+    }
+  }, {
+    immediate: !0
+  });
+  const d = () => {
+    const n = W(a(e));
+    !n || l.value || (S && (u = k(
+      n,
+      "touchmove",
+      (r) => {
+        X(r);
+      },
+      { passive: !1 }
+    )), n.style.overflow = "hidden", l.value = !0);
+  }, v = () => {
+    const n = W(a(e));
+    !n || !l.value || (S && u?.(), n.style.overflow = c, C.delete(n), l.value = !1);
+  };
+  return $(v), T({
+    get() {
+      return l.value;
+    },
+    set(n) {
+      n ? d() : v();
+    }
+  });
+}
+function x() {
+  let e = !1;
+  const t = I(!1);
+  return (l, u) => {
+    if (t.value = u.value, e)
+      return;
+    e = !0;
+    const c = q(l, u.value);
+    R(t, (d) => c.value = d);
+  };
+}
+x();
+export {
+  J as VOnClickOutside,
+  J as vOnClickOutside
+};

package/dist/external/.pnpm/@vueuse_shared@13.5.0_vue@3.5.17_typescript@5.8.3_/node_modules/@vueuse/shared/index.js

@@ -0,0 +1,41 @@
+import { watch as e, getCurrentScope as i, onScopeDispose as r, toRef as c, readonly as u, ref as d, customRef as s } from "vue";
+function g(o) {
+  return i() ? (r(o), !0) : !1;
+}
+const a = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const f = Object.prototype.toString, y = (o) => f.call(o) === "[object Object]", l = () => {
+}, m = /* @__PURE__ */ w();
+function w() {
+  var o, t;
+  return a && ((o = window?.navigator) == null ? void 0 : o.userAgent) && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || ((t = window?.navigator) == null ? void 0 : t.maxTouchPoints) > 2 && /iPad|Macintosh/.test(window?.navigator.userAgent));
+}
+function S(...o) {
+  if (o.length !== 1)
+    return c(...o);
+  const t = o[0];
+  return typeof t == "function" ? u(s(() => ({ get: t, set: l }))) : d(t);
+}
+function b(o) {
+  return Array.isArray(o) ? o : [o];
+}
+function v(o, t, n) {
+  return e(
+    o,
+    t,
+    {
+      ...n,
+      immediate: !0
+    }
+  );
+}
+export {
+  a as isClient,
+  m as isIOS,
+  y as isObject,
+  l as noop,
+  b as toArray,
+  S as toRef,
+  g as tryOnScopeDispose,
+  v as watchImmediate
+};

package/dist/index.d.ts

@@ -0,0 +1,85 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
+
+declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {
+/** Method to close the dropdown */
+close: typeof closeDropdown;
+/** Reactive boolean of the dropdown state */
+isOpen: Ref<boolean, boolean>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+'details-ref': HTMLDetailsElement;
+}, HTMLDetailsElement>;
+
+declare type __VLS_Props = {
+    color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
+    variant?: 'outline' | 'dash' | 'soft' | 'ghost' | 'link';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    active?: boolean;
+    disabled?: boolean;
+    modifier?: 'wide' | 'block' | 'square' | 'circle';
+};
+
+declare type __VLS_Props_2 = {
+    /** Trigger color */
+    color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
+    /** Trigger variant */
+    variant?: 'outline' | 'dash' | 'soft' | 'ghost' | 'link';
+    /** Trigger size */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Is the trigger active */
+    active?: boolean;
+    /** Is the trigger disabled */
+    disabled?: boolean;
+    /** Trigger modifier */
+    modifier?: 'wide' | 'block' | 'square' | 'circle';
+};
+
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLButtonElement;
+};
+
+declare function __VLS_template_2(): {
+    attrs: Partial<{}>;
+    slots: {
+        label?(_: {}): any;
+        items?(_: {}): any;
+    };
+    refs: {
+        'details-ref': HTMLDetailsElement;
+    };
+    rootEl: HTMLDetailsElement;
+};
+
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+
+declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export declare const Button: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
+declare function closeDropdown(): void;
+
+export declare const Dropdown: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+
+export { }

package/dist/index.js

@@ -0,0 +1,6 @@
+import { default as r } from "./button/button.vue.js";
+import { default as e } from "./dropdown/dropdown.vue.js";
+export {
+  r as Button,
+  e as Dropdown
+};

package/package.json

@@ -0,0 +1,76 @@
+{
+	"name": "@septkit/ui",
+	"version": "0.0.1",
+	"type": "module",
+	"source": "lib/index.ts",
+	"scripts": {
+		"dev": "storybook dev -p 6006",
+		"//====== BUILD ======//": "",
+		"build": "run-p type-check \"build-only {@}\" -- && pnpm run copy-tailwind-config",
+		"preview": "vite preview",
+		"build-only": "vite build",
+		"copy-tailwind-config": "cp ./lib/assets/config.css ./dist/config.css",
+		"build-storybook": "storybook build",
+		"//====== TEST ======//": "",
+		"test": "echo TODO",
+		"test:unit": "vitest",
+		"test:browser": "vitest --config=vitest.browser.config.ts",
+		"//====== CHECK ======//": "",
+		"type-check": "vue-tsc --build",
+		"lint": "oxlint . --fix -D correctness --ignore-path .gitignore",
+		"format": "prettier --write lib/",
+		"format:check": "prettier --check lib/"
+	},
+	"files": [
+		"dist"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./configcss": "./dist/config.css"
+	},
+	"dependencies": {
+		"@tailwindcss/vite": "^4.1.11",
+		"@vueuse/components": "^13.5.0",
+		"@vueuse/core": "^13.5.0",
+		"pinia": "^3.0.3",
+		"tailwindcss": "^4.1.11",
+		"vue": "^3.5.17"
+	},
+	"devDependencies": {
+		"@storybook/addon-a11y": "^9.0.15",
+		"@storybook/addon-docs": "^9.0.15",
+		"@storybook/addon-onboarding": "^9.0.15",
+		"@storybook/addon-vitest": "^9.0.15",
+		"@storybook/vue3-vite": "^9.0.15",
+		"@tsconfig/node22": "^22.0.2",
+		"@types/jsdom": "^21.1.7",
+		"@types/node": "^22.15.32",
+		"@vitejs/plugin-vue": "^6.0.0",
+		"@vitest/browser": "^3.2.4",
+		"@vitest/coverage-v8": "3.2.4",
+		"@vue/test-utils": "^2.4.6",
+		"@vue/tsconfig": "^0.7.0",
+		"daisyui": "^5.0.46",
+		"jiti": "^2.4.2",
+		"jsdom": "^26.1.0",
+		"npm-run-all2": "^8.0.4",
+		"oxlint": "~1.6.0",
+		"playwright": "^1.53.2",
+		"prettier": "3.5.3",
+		"storybook": "^9.0.15",
+		"typescript": "~5.8.0",
+		"vite": "^7.0.0",
+		"vite-plugin-dts": "^4.5.4",
+		"vite-plugin-vue-devtools": "^7.7.7",
+		"vitest": "^3.2.4",
+		"vitest-browser-vue": "^1.0.0",
+		"vue-tsc": "^2.2.10"
+	},
+	"peerDependencies": {
+		"daisyui": "^5.0.0",
+		"tailwindcss": "^4.0.0"
+	}
+}