@itguy614/clean-ui 0.3.1 → 1.0.0

package/dist/components/CuiTableRow.vue.js

@@ -0,0 +1,23 @@
+import { defineComponent as r, ref as a, withDirectives as n, openBlock as s, createElementBlock as c, normalizeClass as d, renderSlot as f, vShow as i } from "vue";
+const m = /* @__PURE__ */ r({
+  __name: "CuiTableRow",
+  props: {
+    selected: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(e, { expose: t }) {
+    const l = a(null);
+    return t({ rowEl: l }), (o, u) => n((s(), c("tr", {
+      ref_key: "rowEl",
+      ref: l,
+      class: d({ "cui-table-row--selected": e.selected })
+    }, [
+      f(o.$slots, "default")
+    ], 2)), [
+      [i, !e.hidden]
+    ]);
+  }
+});
+export {
+  m as default
+};

package/dist/components/CuiTableRow.vue2.js

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

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

@@ -1,20 +1,16 @@
 import { type TabVariant, type TabOrientation, type TabTransition } from "./tabs-context";
-import type { ButtonColor } from "./CuiButton.vue";
-export interface CuiTabsProps {
+import type { HideableProps, ColorableProps } from "../types/common";
+export interface CuiTabsProps extends HideableProps, ColorableProps {
     /** Active tab value */
     modelValue?: string;
     /** Tab bar style */
     variant?: TabVariant;
     /** Layout orientation */
     orientation?: TabOrientation;
-    /** Color role for active indicator */
-    color?: ButtonColor;
     /** Keep inactive tab panels in DOM */
     keepAlive?: boolean;
     /** Panel transition animation */
     transition?: TabTransition;
-    /** Hide the component */
-    hidden?: boolean;
 }
 declare var __VLS_4: {};
 type __VLS_Slots = {} & {
@@ -27,8 +23,8 @@ declare const __VLS_component: import("vue").DefineComponent<CuiTabsProps, {}, {
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onClose?: ((value: string) => any) | undefined;
 }>, {
-    color: ButtonColor;
     hidden: boolean;
+    color: import("../index.js").CuiColor;
     variant: TabVariant;
     orientation: TabOrientation;
     transition: TabTransition;

package/dist/components/CuiTabs.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CuiTabs.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTabs.vue"],"names":[],"mappings":"AAoWA,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,aAAa,EACnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,WAAW,YAAY;IAC3B,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,yBAAyB;IACzB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,sCAAsC;IACtC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAmQD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA2B/C,QAAA,MAAM,eAAe;;;;;;;WAvSX,WAAW;YAMV,OAAO;aAVN,UAAU;iBAEN,cAAc;gBAMf,aAAa;eAFd,OAAO;6EA6SnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CuiTabs.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTabs.vue"],"names":[],"mappings":"AAkWA,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,aAAa,EACnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGrE,MAAM,WAAW,YAAa,SAAQ,aAAa,EAAE,cAAc;IACjE,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,yBAAyB;IACzB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAoQD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA4B/C,QAAA,MAAM,eAAe;;;;;;;;;aAzST,UAAU;iBAEN,cAAc;gBAIf,aAAa;eAFd,OAAO;6EA6SnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/CuiTabs.vue.js

@@ -0,0 +1,7 @@
+import o from "./CuiTabs.vue2.js";
+/* empty css             */
+import t from "../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-2356dd2a"]]);
+export {
+  p as default
+};

package/dist/components/CuiTabs.vue2.js

@@ -0,0 +1,124 @@
+import { defineComponent as $, ref as p, watch as A, provide as D, toRef as s, computed as T, withDirectives as z, openBlock as v, createElementBlock as f, normalizeClass as _, createElementVNode as h, Fragment as S, renderList as B, normalizeStyle as K, toDisplayString as N, withModifiers as E, unref as H, createVNode as L, createCommentVNode as M, renderSlot as R, vShow as q, nextTick as F } from "vue";
+import U from "./CuiIcon.vue.js";
+import { TabsContextKey as j } from "./tabs-context.js";
+import { useMessages as G } from "../composables/useMessages.js";
+const J = ["aria-orientation"], O = ["data-cui-tab-value", "aria-selected", "aria-disabled", "tabindex", "onClick"], P = { class: "cui-tabs__tab-content" }, Q = ["aria-label", "onClick"], W = { class: "cui-tabs__panels" }, te = /* @__PURE__ */ $({
+  __name: "CuiTabs",
+  props: {
+    modelValue: {},
+    variant: { default: "underline" },
+    orientation: { default: "horizontal" },
+    keepAlive: { type: Boolean, default: !0 },
+    transition: { default: "fade" },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" }
+  },
+  emits: ["update:modelValue", "close"],
+  setup(o, { emit: x }) {
+    const n = o, b = x, l = p(n.modelValue ?? ""), c = p(""), i = p([]);
+    A(
+      () => n.modelValue,
+      (e) => {
+        e !== void 0 && e !== l.value && (c.value = l.value, l.value = e);
+      }
+    );
+    function k(e) {
+      i.value.find((a) => a.value === e.value) || i.value.push(e), !l.value && !e.disabled && (l.value = e.value, b("update:modelValue", e.value));
+    }
+    function g(e) {
+      i.value = i.value.filter((a) => a.value !== e);
+    }
+    function m(e) {
+      const a = i.value.find((t) => t.value === e);
+      a != null && a.disabled || (c.value = l.value, l.value = e, b("update:modelValue", e));
+    }
+    function y(e) {
+      b("close", e);
+    }
+    D(j, {
+      activeTab: l,
+      variant: s(n, "variant"),
+      orientation: s(n, "orientation"),
+      color: s(n, "color"),
+      keepAlive: s(n, "keepAlive"),
+      transition: s(n, "transition"),
+      previousTab: c,
+      register: k,
+      unregister: g,
+      activate: m,
+      close: y
+    });
+    function w(e) {
+      const a = i.value.filter((r) => !r.disabled), t = a.findIndex((r) => r.value === l.value);
+      if (t < 0) return;
+      const d = n.orientation === "horizontal", I = d ? "ArrowRight" : "ArrowDown", V = d ? "ArrowLeft" : "ArrowUp";
+      let u = -1;
+      e.key === I ? (e.preventDefault(), u = t < a.length - 1 ? t + 1 : 0) : e.key === V ? (e.preventDefault(), u = t > 0 ? t - 1 : a.length - 1) : e.key === "Home" ? (e.preventDefault(), u = 0) : e.key === "End" && (e.preventDefault(), u = a.length - 1), u >= 0 && (m(a[u].value), F(() => {
+        const r = document.querySelector(
+          `[data-cui-tab-value="${a[u].value}"]`
+        );
+        r == null || r.focus();
+      }));
+    }
+    T(() => {
+      const e = i.value.findIndex((t) => t.value === c.value);
+      return i.value.findIndex((t) => t.value === l.value) >= e ? "left" : "right";
+    });
+    const C = G();
+    return (e, a) => z((v(), f("div", {
+      class: _(["cui-tabs", [
+        `cui-tabs--${o.variant}`,
+        `cui-tabs--${o.orientation}`
+      ]])
+    }, [
+      h("div", {
+        class: "cui-tabs__bar",
+        role: "tablist",
+        "aria-orientation": o.orientation,
+        onKeydown: w
+      }, [
+        (v(!0), f(S, null, B(i.value, (t) => (v(), f("button", {
+          key: t.value,
+          "data-cui-tab-value": t.value,
+          class: _(["cui-tabs__tab", {
+            "cui-tabs__tab--active": l.value === t.value,
+            "cui-tabs__tab--disabled": t.disabled
+          }]),
+          style: K({
+            "--_tab-color": `var(--cui-${o.color})`,
+            "--_tab-hover": `var(--cui-${o.color}-hover)`,
+            "--_tab-bg": `var(--cui-${o.color}-bg)`
+          }),
+          role: "tab",
+          "aria-selected": l.value === t.value,
+          "aria-disabled": t.disabled || void 0,
+          tabindex: l.value === t.value ? 0 : -1,
+          onClick: (d) => m(t.value)
+        }, [
+          h("span", P, N(t.label), 1),
+          t.closeable ? (v(), f("button", {
+            key: 0,
+            type: "button",
+            class: "cui-tabs__tab-close",
+            "aria-label": H(C).tabs.closeTab,
+            tabindex: "-1",
+            onClick: E((d) => y(t.value), ["stop"])
+          }, [
+            L(U, {
+              name: "x",
+              size: "0.75rem"
+            })
+          ], 8, Q)) : M("", !0)
+        ], 14, O))), 128))
+      ], 40, J),
+      h("div", W, [
+        R(e.$slots, "default", {}, void 0, !0)
+      ])
+    ], 2)), [
+      [q, !o.hidden]
+    ]);
+  }
+});
+export {
+  te as default
+};

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

@@ -1,11 +1,11 @@
-import type { ButtonColor } from "./CuiButton.vue";
+import type { CuiColor, CuiSize, HideableProps, ColorableProps, SizeableProps, DisableableProps, CuiRounded } from "../types/common";
 export interface TagOption {
     value: string;
     label?: string;
-    color?: ButtonColor;
+    color?: CuiColor;
     [key: string]: unknown;
 }
-export interface CuiTagInputProps {
+export interface CuiTagInputProps extends HideableProps, ColorableProps, SizeableProps, DisableableProps {
     /** Selected tags */
     modelValue?: string[];
     /** Predefined tag suggestions */
@@ -22,12 +22,6 @@ export interface CuiTagInputProps {
     maxTags?: number;
     /** Placeholder */
     placeholder?: string;
-    /** Size */
-    size?: "sm" | "md" | "lg";
-    /** Color for tag badges */
-    color?: ButtonColor;
-    /** Disabled */
-    disabled?: boolean;
     /** Label */
     label?: string;
     /** Error state */
@@ -40,22 +34,31 @@ export interface CuiTagInputProps {
     createText?: string;
     /** Hidden */
     hidden?: boolean;
+    /** Border radius */
+    rounded?: CuiRounded;
 }
+declare function focus(opts?: FocusOptions): void;
+declare function blur(): void;
 declare var __VLS_15: {
     suggestion: TagOption;
 };
 type __VLS_Slots = {} & {
     suggestion?: (props: typeof __VLS_15) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<CuiTagInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<CuiTagInputProps, {
+    el: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+    focus: typeof focus;
+    blur: typeof blur;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string[]) => any;
 }, string, import("vue").PublicProps, Readonly<CuiTagInputProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {
-    size: "sm" | "md" | "lg";
-    color: ButtonColor;
-    hidden: boolean;
     error: boolean;
+    hidden: boolean;
+    size: CuiSize;
+    color: CuiColor;
+    rounded: CuiRounded;
     disabled: boolean;
     placeholder: string;
     modelValue: string[];

package/dist/components/CuiTagInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CuiTagInput.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTagInput.vue"],"names":[],"mappings":"AA2YA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAKnD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,oBAAoB;IACpB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,iCAAiC;IACjC,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC;IAC1B,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC;IAC3D,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAobD,QAAA,IAAI,QAAQ;;CAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AA+CnD,QAAA,MAAM,eAAe;;;;;UAtfZ,IAAI,GAAG,IAAI,GAAG,IAAI;WAEjB,WAAW;YAcV,OAAO;WARR,OAAO;cAJJ,OAAO;iBANJ,MAAM;gBAdP,MAAM,EAAE;cAQV,MAAM;cAEN,MAAM;iBARH,SAAS,EAAE;iBAIX,OAAO;aAMX,MAAM;uBAgBI,MAAM;gBAEb,MAAM;6EAgfnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CuiTagInput.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTagInput.vue"],"names":[],"mappings":"AA8ZA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAMrI,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAiB,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACtG,oBAAoB;IACpB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,iCAAiC;IACjC,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC;IAC1B,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC;IAC3D,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAoOD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAGjC;AAED,iBAAS,IAAI,SAEZ;AAiOD,QAAA,IAAI,QAAQ;;CAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAgDnD,QAAA,MAAM,eAAe;;;;;;;;;WAzgBX,OAAO;YAQN,OAAO;;;aAEN,UAAU;;iBAdN,MAAM;gBAdP,MAAM,EAAE;cAQV,MAAM;cAEN,MAAM;iBARH,SAAS,EAAE;iBAIX,OAAO;aAMX,MAAM;uBAUI,MAAM;gBAEb,MAAM;6EA4gBnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/CuiTagInput.vue.js

@@ -0,0 +1,296 @@
+import { defineComponent as le, ref as v, computed as h, onMounted as ne, onUnmounted as re, watch as oe, nextTick as L, withDirectives as ue, openBlock as s, createElementBlock as d, toDisplayString as x, createCommentVNode as w, createElementVNode as $, normalizeStyle as k, Fragment as q, renderList as F, createBlock as O, withCtx as ie, createTextVNode as se, Teleport as ce, createVNode as P, withModifiers as U, renderSlot as de, vShow as ve } from "vue";
+import { clampSize as fe } from "../utils/sizing.js";
+import me from "./CuiIcon.vue.js";
+import ge from "./CuiBadge.vue.js";
+import pe from "./CuiSpinner.vue.js";
+/* empty css                */
+const ye = {
+  key: 0,
+  style: { display: "block", marginBottom: "calc(0.25rem * var(--cui-density-scale, 1))", fontSize: "0.875rem", fontWeight: "500", color: "var(--cui-text-secondary)" }
+}, be = ["value", "placeholder", "disabled"], he = {
+  key: 1,
+  style: { fontSize: "0.75rem", color: "var(--cui-error)", marginTop: "calc(0.25rem * var(--cui-density-scale, 1))" }
+}, xe = {
+  key: 0,
+  style: { padding: "calc(0.75rem * var(--cui-density-scale, 1))", textAlign: "center" }
+}, we = ["data-index", "onClick", "onMouseenter"], Me = /* @__PURE__ */ le({
+  __name: "CuiTagInput",
+  props: {
+    modelValue: { default: () => [] },
+    suggestions: { default: () => [] },
+    fetchSuggestions: {},
+    allowCreate: { type: Boolean, default: !0 },
+    debounce: { default: 300 },
+    minChars: { default: 0 },
+    maxTags: { default: 0 },
+    placeholder: { default: "Add tag..." },
+    label: {},
+    error: { type: Boolean, default: !1 },
+    errorMessage: {},
+    noSuggestionsText: { default: "No suggestions" },
+    createText: { default: "Create" },
+    hidden: { type: Boolean, default: !1 },
+    rounded: { default: "md" },
+    color: { default: "primary" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(r, { expose: K, emit: Y }) {
+    const l = r, Z = {
+      none: "0",
+      sm: "0.25rem",
+      md: "var(--cui-button-radius, 0.375rem)",
+      lg: "0.5rem",
+      full: "9999px"
+    }, B = Y, o = v(""), c = v(!1), u = v(-1), V = v(!1), m = v([]), f = v(null), E = v(null), g = v(null), I = v({});
+    let S = null;
+    const z = h(() => new Set(l.modelValue)), C = h(() => l.maxTags > 0 && l.modelValue.length >= l.maxTags);
+    function j(e) {
+      const a = [...l.suggestions, ...m.value].find((t) => t.value === e);
+      return (a == null ? void 0 : a.label) ?? e;
+    }
+    function G(e) {
+      const a = [...l.suggestions, ...m.value].find((t) => t.value === e);
+      return (a == null ? void 0 : a.color) ?? l.color;
+    }
+    const i = h(() => {
+      const a = (l.fetchSuggestions ? m.value : l.suggestions).filter((n) => !z.value.has(n.value));
+      if (!o.value || l.fetchSuggestions) return a;
+      const t = o.value.toLowerCase();
+      return a.filter(
+        (n) => n.value.toLowerCase().includes(t) || n.label && n.label.toLowerCase().includes(t)
+      );
+    }), p = h(() => {
+      if (!l.allowCreate || !o.value.trim() || C.value) return !1;
+      const e = o.value.trim().toLowerCase();
+      return z.value.has(e) || z.value.has(o.value.trim()) ? !1 : ![...l.suggestions, ...m.value].map((t) => t.value.toLowerCase()).includes(e);
+    }), D = h(() => V.value), J = ["sm", "md", "lg"], Q = {
+      sm: { fontSize: "0.8125rem", padding: "calc(0.25rem * var(--cui-density-scale, 1)) calc(0.5rem * var(--cui-density-scale, 1))", tagSize: "sm", inputHeight: "2rem" },
+      md: { fontSize: "0.875rem", padding: "calc(0.3125rem * var(--cui-density-scale, 1)) calc(0.625rem * var(--cui-density-scale, 1))", tagSize: "sm", inputHeight: "2.375rem" },
+      lg: { fontSize: "0.9375rem", padding: "calc(0.4375rem * var(--cui-density-scale, 1)) calc(0.75rem * var(--cui-density-scale, 1))", tagSize: "md", inputHeight: "2.75rem" }
+    }, y = h(() => Q[fe(l.size, J)]);
+    function b() {
+      if (!g.value) return;
+      const e = g.value.getBoundingClientRect(), a = window.innerHeight, t = a - e.bottom, n = t < 200 && e.top > t, M = Math.min(240, Math.max(t, e.top) - 16), R = {
+        position: "fixed",
+        zIndex: "9990",
+        left: `${e.left}px`,
+        width: `${e.width}px`,
+        maxHeight: `${M}px`,
+        overflowY: "auto",
+        background: "var(--cui-surface-base)",
+        border: "1px solid var(--cui-border)",
+        borderRadius: "0.5rem",
+        boxShadow: "0 8px 24px -4px rgba(0,0,0,0.12), 0 2px 8px -2px rgba(0,0,0,0.08)",
+        padding: "calc(0.25rem * var(--cui-density-scale, 1))"
+      };
+      n ? R.bottom = `${a - e.top + 4}px` : R.top = `${e.bottom + 4}px`, I.value = R;
+    }
+    function X(e) {
+      if (o.value = e.target.value, u.value = -1, c.value || (c.value = !0, b()), l.fetchSuggestions) {
+        if (o.value.length < l.minChars) {
+          m.value = [];
+          return;
+        }
+        S && clearTimeout(S), S = setTimeout(async () => {
+          V.value = !0;
+          try {
+            m.value = await l.fetchSuggestions(o.value);
+          } finally {
+            V.value = !1;
+          }
+        }, l.debounce);
+      }
+    }
+    function H(e) {
+      if (l.disabled || C.value) return;
+      const a = e.trim();
+      !a || z.value.has(a) || (B("update:modelValue", [...l.modelValue, a]), o.value = "", u.value = -1, L(() => {
+        var t;
+        return (t = f.value) == null ? void 0 : t.focus();
+      }));
+    }
+    function A(e) {
+      H(e.value);
+    }
+    function T() {
+      p.value && H(o.value.trim());
+    }
+    function N(e) {
+      l.disabled || (B("update:modelValue", l.modelValue.filter((a) => a !== e)), L(() => {
+        var a;
+        return (a = f.value) == null ? void 0 : a.focus();
+      }));
+    }
+    function _(e) {
+      const a = i.value.length + (p.value ? 1 : 0);
+      if (e.key === "ArrowDown") {
+        if (e.preventDefault(), !c.value) {
+          c.value = !0, b();
+          return;
+        }
+        u.value = Math.min(u.value + 1, a - 1);
+      } else e.key === "ArrowUp" ? (e.preventDefault(), u.value = Math.max(u.value - 1, 0)) : e.key === "Enter" ? (e.preventDefault(), u.value >= 0 && u.value < i.value.length ? A(i.value[u.value]) : (p.value && (u.value === i.value.length || u.value === -1) || p.value && o.value.trim()) && T()) : e.key === "," || e.key === "Tab" ? o.value.trim() && l.allowCreate && (e.preventDefault(), T()) : e.key === "Escape" ? c.value = !1 : e.key === "Backspace" && !o.value && l.modelValue.length > 0 && N(l.modelValue[l.modelValue.length - 1]);
+    }
+    function W(e) {
+      var t, n;
+      const a = e.target;
+      (t = g.value) != null && t.contains(a) || (n = E.value) != null && n.contains(a) || (c.value = !1);
+    }
+    function ee() {
+      !l.disabled && !C.value && (c.value = !0, b());
+    }
+    ne(() => {
+      document.addEventListener("mousedown", W), window.addEventListener("scroll", () => {
+        c.value && b();
+      }, !0), window.addEventListener("resize", () => {
+        c.value && b();
+      });
+    }), re(() => {
+      document.removeEventListener("mousedown", W), S && clearTimeout(S);
+    }), oe(c, (e) => {
+      e || (o.value = ""), e && L(b);
+    });
+    function ae(e) {
+      var a;
+      f.value ? f.value.focus(e) : (a = g.value) == null || a.focus(e);
+    }
+    function te() {
+      var e;
+      (e = f.value) == null || e.blur();
+    }
+    return K({ el: g, focus: ae, blur: te }), (e, a) => ue((s(), d("div", {
+      ref_key: "wrapperRef",
+      ref: g,
+      style: { position: "relative" }
+    }, [
+      r.label ? (s(), d("label", ye, x(r.label), 1)) : w("", !0),
+      $("div", {
+        style: k({
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: "calc(0.25rem * var(--cui-density-scale, 1))",
+          padding: y.value.padding,
+          border: `1px solid ${r.error ? "var(--cui-error)" : "var(--cui-border-strong, var(--cui-border))"}`,
+          borderRadius: Z[r.rounded],
+          background: "var(--cui-surface-base, white)",
+          cursor: r.disabled ? "default" : "text",
+          opacity: r.disabled ? "0.5" : "1",
+          minHeight: y.value.inputHeight
+        }),
+        onClick: a[0] || (a[0] = (t) => {
+          var n;
+          return (n = f.value) == null ? void 0 : n.focus();
+        })
+      }, [
+        (s(!0), d(q, null, F(r.modelValue, (t) => (s(), O(ge, {
+          key: t,
+          color: G(t),
+          size: y.value.tagSize,
+          removable: "",
+          onRemove: (n) => N(t)
+        }, {
+          default: ie(() => [
+            se(x(j(t)), 1)
+          ]),
+          _: 2
+        }, 1032, ["color", "size", "onRemove"]))), 128)),
+        C.value ? w("", !0) : (s(), d("input", {
+          key: 0,
+          ref_key: "inputRef",
+          ref: f,
+          value: o.value,
+          placeholder: r.modelValue.length > 0 ? "" : r.placeholder,
+          disabled: r.disabled,
+          style: k({
+            flex: "1",
+            minWidth: "4rem",
+            border: "none",
+            outline: "none",
+            background: "transparent",
+            fontSize: y.value.fontSize,
+            color: "var(--cui-text-body)",
+            padding: "calc(0.125rem * var(--cui-density-scale, 1)) 0",
+            fontFamily: "inherit"
+          }),
+          onInput: X,
+          onFocus: ee,
+          onKeydown: _
+        }, null, 44, be))
+      ], 4),
+      r.error && r.errorMessage ? (s(), d("div", he, x(r.errorMessage), 1)) : w("", !0),
+      (s(), O(ce, { to: "body" }, [
+        c.value && (i.value.length > 0 || p.value || D.value) ? (s(), d("div", {
+          key: 0,
+          ref_key: "dropdownRef",
+          ref: E,
+          style: k(I.value)
+        }, [
+          D.value && i.value.length === 0 ? (s(), d("div", xe, [
+            P(pe, {
+              size: "xs",
+              "show-label": "",
+              label: "Searching..."
+            })
+          ])) : w("", !0),
+          (s(!0), d(q, null, F(i.value, (t, n) => (s(), d("div", {
+            key: t.value,
+            "data-index": n,
+            style: k({
+              display: "flex",
+              alignItems: "center",
+              gap: "calc(0.5rem * var(--cui-density-scale, 1))",
+              padding: "calc(0.4375rem * var(--cui-density-scale, 1)) calc(0.625rem * var(--cui-density-scale, 1))",
+              cursor: "pointer",
+              fontSize: y.value.fontSize,
+              borderRadius: "0.25rem",
+              background: u.value === n ? "var(--cui-primary-bg)" : "transparent",
+              color: "var(--cui-text-body)",
+              transition: "background 0.1s ease"
+            }),
+            onClick: U((M) => A(t), ["stop"]),
+            onMouseenter: (M) => u.value = n
+          }, [
+            de(e.$slots, "suggestion", { suggestion: t }, () => [
+              $("span", null, x(t.label || t.value), 1)
+            ])
+          ], 44, we))), 128)),
+          p.value ? (s(), d("div", {
+            key: 1,
+            style: k({
+              display: "flex",
+              alignItems: "center",
+              gap: "calc(0.375rem * var(--cui-density-scale, 1))",
+              padding: "calc(0.4375rem * var(--cui-density-scale, 1)) calc(0.625rem * var(--cui-density-scale, 1))",
+              cursor: "pointer",
+              fontSize: y.value.fontSize,
+              borderRadius: "0.25rem",
+              background: u.value === i.value.length ? "var(--cui-primary-bg)" : "transparent",
+              color: "var(--cui-primary)",
+              fontWeight: "500",
+              transition: "background 0.1s ease",
+              borderTop: i.value.length > 0 ? "1px solid color-mix(in srgb, var(--cui-border) 50%, transparent)" : "none",
+              marginTop: i.value.length > 0 ? "calc(0.125rem * var(--cui-density-scale, 1))" : "0",
+              paddingTop: i.value.length > 0 ? "calc(0.5rem * var(--cui-density-scale, 1))" : void 0
+            }),
+            onClick: U(T, ["stop"]),
+            onMouseenter: a[1] || (a[1] = (t) => u.value = i.value.length)
+          }, [
+            P(me, {
+              name: "plus",
+              size: "0.75rem"
+            }),
+            $("span", null, x(r.createText) + " “" + x(o.value.trim()) + "”", 1)
+          ], 36)) : w("", !0)
+        ], 4)) : w("", !0)
+      ]))
+    ], 512)), [
+      [ve, !r.hidden]
+    ]);
+  }
+});
+export {
+  Me as default
+};

package/dist/components/CuiTagInput.vue2.js

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

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

@@ -1,14 +1,9 @@
-import type { ButtonColor } from "./CuiButton.vue";
-import type { InputSize } from "./CuiInput.vue";
-export interface CuiTextareaProps {
+import type { HideableProps, ColorableProps, SizeableProps, DisableableProps, CuiRounded } from "../types/common";
+export interface CuiTextareaProps extends HideableProps, ColorableProps, SizeableProps, DisableableProps {
     /** v-model binding */
     modelValue?: string;
     /** Placeholder text */
     placeholder?: string;
-    /** Color role — affects focus border */
-    color?: ButtonColor;
-    /** Size */
-    size?: InputSize;
     /** Initial/minimum number of visible rows */
     rows?: number;
     /** Auto-resize to fit content */
@@ -21,12 +16,10 @@ export interface CuiTextareaProps {
     error?: boolean;
     /** Error message below textarea */
     errorMessage?: string;
-    /** Disabled */
-    disabled?: boolean;
     /** Readonly */
     readonly?: boolean;
-    /** Hide the component */
-    hidden?: boolean;
+    /** Border radius */
+    rounded?: CuiRounded;
 }
 declare function focus(opts?: FocusOptions): void;
 declare function blur(): void;
@@ -39,14 +32,15 @@ declare const _default: import("vue").DefineComponent<CuiTextareaProps, {
 }, string, import("vue").PublicProps, Readonly<CuiTextareaProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    size: InputSize;
-    color: ButtonColor;
-    hidden: boolean;
     error: boolean;
+    readonly: boolean;
+    hidden: boolean;
+    size: import("..").CuiSize;
+    color: import("..").CuiColor;
+    rounded: CuiRounded;
     disabled: boolean;
     rows: number;
     modelValue: string;
-    readonly: boolean;
     autoResize: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/CuiTextarea.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CuiTextarea.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTextarea.vue"],"names":[],"mappings":"AA6QA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,MAAM,WAAW,gBAAgB;IAC/B,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,WAAW;IACX,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAmFD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;;;;;;;;;;UA5GQ,SAAS;WAFR,WAAW;YAoBV,OAAO;WARR,OAAO;cAIJ,OAAO;UAZX,MAAM;gBARA,MAAM;cAsBR,OAAO;gBAZL,OAAO;;AA6OtB,wBASG"}
+{"version":3,"file":"CuiTextarea.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTextarea.vue"],"names":[],"mappings":"AA+QA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAWlH,MAAM,WAAW,gBAAiB,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACtG,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAoFD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;;;;;;;;;;WAjGS,OAAO;cAIJ,OAAO;;;;aAER,UAAU;;UAdb,MAAM;gBAJA,MAAM;gBAMN,OAAO;;AA+OtB,wBASG"}

package/dist/components/CuiTextarea.vue.js

@@ -0,0 +1,7 @@
+import a from "./CuiTextarea.vue2.js";
+/* empty css                 */
+import o from "../_virtual/_plugin-vue_export-helper.js";
+const f = /* @__PURE__ */ o(a, [["__scopeId", "data-v-fea4b0a7"]]);
+export {
+  f as default
+};