@indielayer/ui 1.18.1 → 2.0.0

package/lib/components/table/TableHeader.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,78 @@
+import { useTheme as e } from "../../composables/useTheme.js";
+import { optionalBooleanProp as t } from "../../common/props.js";
+import n from "../tooltip/ToggleTip.js";
+import { Fragment as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, renderSlot as f, unref as p } from "vue";
+//#region src/components/table/TableHeader.vue?vue&type=script&setup=true&lang.ts
+var m = { class: "flex items-center gap-1" }, h = {
+	key: 2,
+	d: "m3 9l4-4l4 4M7 5v14m14-4l-4 4l-4-4m4 4V5"
+}, g = {
+	sort: [
+		1,
+		-1,
+		void 0
+	],
+	textAlign: [
+		"left",
+		"center",
+		"right"
+	]
+}, _ = /* @__PURE__ */ c({
+	name: "XTableHeader",
+	validators: g,
+	props: {
+		sort: {
+			type: Number,
+			validator: (e) => g.sort.includes(e)
+		},
+		sortable: t(),
+		textAlign: {
+			type: String,
+			default: "left",
+			validator: (e) => g.textAlign.includes(e)
+		},
+		tooltip: String
+	},
+	setup(t) {
+		let { styles: c, classes: g, className: _ } = e("TableHeader", {}, t);
+		return (e, t) => (d(), o("th", {
+			style: u(p(c)),
+			class: l([
+				p(_),
+				p(g).th,
+				"group/th"
+			])
+		}, [s("div", { class: l(p(g).header) }, [s("div", m, [f(e.$slots, "default"), e.tooltip ? (d(), i(n, {
+			key: 0,
+			content: e.tooltip
+		}, null, 8, ["content"])) : a("", !0)]), e.sortable ? (d(), o("svg", {
+			key: 0,
+			class: l(["shrink-0", [
+				p(g).sortIcon,
+				e.textAlign === "right" ? "-mr-4 -translate-x-4" : "-ml-4 translate-x-4",
+				[e.sort && [1, -1].includes(e.sort) ? "" : "group-hover/th:text-secondary-500 dark:group-hover/th:text-secondary-400"],
+				[e.sort !== -1 && e.sort !== 1 ? "text-secondary-400 dark:text-secondary-500" : "text-primary-500 dark:text-primary-400"]
+			]]),
+			width: "24",
+			height: "24",
+			viewBox: "0 0 24 24",
+			stroke: "currentColor",
+			"stroke-linejoin": "round",
+			"stroke-linecap": "round",
+			fill: "none",
+			role: "presentation"
+		}, [e.sort === -1 ? (d(), o(r, { key: 0 }, [t[0] ||= s("line", {
+			x1: "12",
+			y1: "5",
+			x2: "12",
+			y2: "19"
+		}, null, -1), t[1] ||= s("polyline", { points: "19 12 12 19 5 12" }, null, -1)], 64)) : e.sort === 1 ? (d(), o(r, { key: 1 }, [t[2] ||= s("line", {
+			x1: "12",
+			y1: "19",
+			x2: "12",
+			y2: "5"
+		}, null, -1), t[3] ||= s("polyline", { points: "5 12 12 5 19 12" }, null, -1)], 64)) : (d(), o("path", h))], 2)) : a("", !0)], 2)], 6));
+	}
+});
+//#endregion
+export { _ as default };

package/lib/components/table/TableRow.js

@@ -0,0 +1,5 @@
+import e from "./TableRow.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/table/TableRow.vue
+var t = e;
+//#endregion
+export { t as default };

package/lib/components/table/TableRow.vue.d.ts

@@ -1,10 +1,10 @@
 import { type PropType, type ExtractPublicPropTypes } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const tableRowProps: {
-    pointer: BooleanConstructor;
-    striped: BooleanConstructor;
+    pointer: import("vue").Prop<boolean | undefined>;
+    striped: import("vue").Prop<boolean | undefined>;
     selected: BooleanConstructor;
-    singleSelect: BooleanConstructor;
+    singleSelect: import("vue").Prop<boolean | undefined>;
     verticalAlign: {
         type: PropType<"top" | "bottom" | "baseline" | "middle" | "text-bottom" | "text-top">;
         default: string;
@@ -16,20 +16,20 @@ type InternalClasses = 'row';
 export interface TableRowTheme extends ThemeComponent<TableRowProps, InternalClasses> {
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    pointer: BooleanConstructor;
-    striped: BooleanConstructor;
+    pointer: import("vue").Prop<boolean | undefined>;
+    striped: import("vue").Prop<boolean | undefined>;
     selected: BooleanConstructor;
-    singleSelect: BooleanConstructor;
+    singleSelect: import("vue").Prop<boolean | undefined>;
     verticalAlign: {
         type: PropType<"top" | "bottom" | "baseline" | "middle" | "text-bottom" | "text-top">;
         default: string;
         validator: (value: string) => boolean;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    pointer: BooleanConstructor;
-    striped: BooleanConstructor;
+    pointer: import("vue").Prop<boolean | undefined>;
+    striped: import("vue").Prop<boolean | undefined>;
     selected: BooleanConstructor;
-    singleSelect: BooleanConstructor;
+    singleSelect: import("vue").Prop<boolean | undefined>;
     verticalAlign: {
         type: PropType<"top" | "bottom" | "baseline" | "middle" | "text-bottom" | "text-top">;
         default: string;
@@ -37,9 +37,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     };
 }>> & Readonly<{}>, {
     selected: boolean;
-    striped: boolean;
-    pointer: boolean;
-    singleSelect: boolean;
     verticalAlign: "top" | "bottom" | "baseline" | "middle" | "text-bottom" | "text-top";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;

package/lib/components/table/TableRow.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,39 @@
+import { useTheme as e } from "../../composables/useTheme.js";
+import { optionalBooleanProp as t } from "../../common/props.js";
+import { computed as n, createElementBlock as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, renderSlot as c, unref as l } from "vue";
+//#region src/components/table/TableRow.vue?vue&type=script&setup=true&lang.ts
+var u = { verticalAlign: [
+	"baseline",
+	"bottom",
+	"middle",
+	"text-bottom",
+	"text-top",
+	"top"
+] }, d = /* @__PURE__ */ i({
+	name: "XTableRow",
+	validators: u,
+	props: {
+		pointer: t(),
+		striped: t(),
+		selected: Boolean,
+		singleSelect: t(),
+		verticalAlign: {
+			type: String,
+			default: "top",
+			validator: (e) => u.verticalAlign.includes(e)
+		}
+	},
+	setup(t) {
+		let i = t, u = n(() => i.verticalAlign === "baseline" ? "align-baseline" : i.verticalAlign === "bottom" ? "align-bottom" : i.verticalAlign === "middle" ? "align-middle" : i.verticalAlign === "text-bottom" ? "align-text-bottom" : i.verticalAlign === "text-top" ? "align-text-top" : i.verticalAlign === "top" ? "align-top" : ""), { styles: d, classes: f, className: p } = e("TableRow", {}, i);
+		return (e, t) => (s(), r("tr", {
+			style: o(l(d)),
+			class: a([
+				l(p),
+				l(f).row,
+				u.value
+			])
+		}, [c(e.$slots, "default")], 6));
+	}
+});
+//#endregion
+export { d as default };

package/lib/components/table/theme/Table.base.theme.js

@@ -1,13 +1,11 @@
-const a = {
-  classes: {
-    wrapper: "w-full h-full overflow-x-auto",
-    table: ({ props: l }) => {
-      const e = ["w-full relative"];
-      return l.scrollable && e.push("overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal"), l.stickyHeader && e.push("relative"), l.fixed && e.push("md:table-fixed"), e;
-    },
-    loadingWrapper: "absolute inset-0 flex items-center justify-center z-40 bg-secondary-300 dark:bg-secondary-600 rounded opacity-30"
-  }
-}, s = a;
-export {
-  s as default
-};
+//#region src/components/table/theme/Table.base.theme.ts
+var e = { classes: {
+	wrapper: "w-full h-full overflow-x-auto",
+	table: ({ props: e }) => {
+		let t = ["w-full relative"];
+		return e.scrollable && t.push("overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal"), e.stickyHeader && t.push("relative"), e.fixed && t.push("md:table-fixed"), t;
+	},
+	loadingWrapper: "absolute inset-0 flex items-center justify-center z-40 bg-secondary-300 dark:bg-secondary-600 rounded opacity-30"
+} };
+//#endregion
+export { e as default };

package/lib/components/table/theme/Table.carbon.theme.js

@@ -1,13 +1,11 @@
-const a = {
-  classes: {
-    wrapper: "w-full h-full shadow-sm overflow-x-auto text-sm bg-white dark:bg-secondary-800",
-    table: ({ props: s }) => {
-      const e = ["w-full relative"];
-      return s.scrollable && e.push("overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal"), s.stickyHeader && e.push("relative"), s.fixed && e.push("md:table-fixed"), e;
-    },
-    loadingWrapper: "absolute inset-0 flex items-center justify-center z-40 bg-secondary-300 dark:bg-secondary-600 rounded opacity-30"
-  }
-}, t = a;
-export {
-  t as default
-};
+//#region src/components/table/theme/Table.carbon.theme.ts
+var e = { classes: {
+	wrapper: "w-full h-full shadow-xs overflow-x-auto text-sm bg-white dark:bg-secondary-800",
+	table: ({ props: e }) => {
+		let t = ["w-full relative"];
+		return e.scrollable && t.push("overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal"), e.stickyHeader && t.push("relative"), e.fixed && t.push("md:table-fixed"), t;
+	},
+	loadingWrapper: "absolute inset-0 flex items-center justify-center z-40 bg-secondary-300 dark:bg-secondary-600 rounded opacity-30"
+} };
+//#endregion
+export { e as default };

package/lib/components/table/theme/TableCell.base.theme.js

@@ -1,11 +1,7 @@
-const i = {
-  classes: {
-    wrapper: ({ props: t }) => {
-      const e = ["px-3"];
-      return e.push(t.dense ? "h-9 py-0.5" : "h-11 py-1"), t.to || t.href ? (e.push("flex items-center"), t.textAlign === "left" ? e.push("justify-start") : t.textAlign === "center" ? e.push("justify-center") : t.textAlign === "right" ? e.push("justify-end") : t.textAlign === "justify" && e.push("justify-center")) : (t.textAlign === "left" ? e.push("text-left") : t.textAlign === "center" ? e.push("text-center") : t.textAlign === "right" ? e.push("text-right") : t.textAlign === "justify" && e.push("text-justify"), t.verticalAlign === "baseline" ? e.push("align-baseline") : t.verticalAlign === "bottom" ? e.push("align-bottom") : t.verticalAlign === "middle" ? e.push("align-middle") : t.verticalAlign === "text-bottom" ? e.push("align-text-bottom") : t.verticalAlign === "text-top" ? e.push("align-text-top") : t.verticalAlign === "top" && e.push("align-top")), t.truncate && e.push("truncate"), e;
-    }
-  }
-}, l = i;
-export {
-  l as default
-};
+//#region src/components/table/theme/TableCell.base.theme.ts
+var e = { classes: { wrapper: ({ props: e }) => {
+	let t = ["px-3"];
+	return t.push(e.dense ? "h-9 py-0.5" : "h-11 py-1"), e.to || e.href ? (t.push("flex items-center"), e.textAlign === "left" ? t.push("justify-start") : e.textAlign === "center" ? t.push("justify-center") : e.textAlign === "right" ? t.push("justify-end") : e.textAlign === "justify" && t.push("justify-center")) : (e.textAlign === "left" ? t.push("text-left") : e.textAlign === "center" ? t.push("text-center") : e.textAlign === "right" ? t.push("text-right") : e.textAlign === "justify" && t.push("text-justify"), e.verticalAlign === "baseline" ? t.push("align-baseline") : e.verticalAlign === "bottom" ? t.push("align-bottom") : e.verticalAlign === "middle" ? t.push("align-middle") : e.verticalAlign === "text-bottom" ? t.push("align-text-bottom") : e.verticalAlign === "text-top" ? t.push("align-text-top") : e.verticalAlign === "top" && t.push("align-top")), e.truncate && t.push("truncate"), t;
+} } };
+//#endregion
+export { e as default };

package/lib/components/table/theme/TableCell.carbon.theme.js

@@ -1,11 +1,7 @@
-const i = {
-  classes: {
-    wrapper: ({ props: e }) => {
-      const t = ["last:pr-0 px-3"];
-      return t.push(e.dense ? "py-2" : "py-4"), e.textAlign === "left" ? t.push("text-left") : e.textAlign === "center" ? t.push("text-center") : e.textAlign === "right" ? t.push("text-right") : e.textAlign === "justify" && t.push("text-justify"), e.verticalAlign === "baseline" ? t.push("align-baseline") : e.verticalAlign === "bottom" ? t.push("align-bottom") : e.verticalAlign === "middle" ? t.push("align-middle") : e.verticalAlign === "text-bottom" ? t.push("align-text-bottom") : e.verticalAlign === "text-top" ? t.push("align-text-top") : e.verticalAlign === "top" && t.push("align-top"), e.truncate && t.push("truncate"), t;
-    }
-  }
-}, l = i;
-export {
-  l as default
-};
+//#region src/components/table/theme/TableCell.carbon.theme.ts
+var e = { classes: { wrapper: ({ props: e }) => {
+	let t = ["last:pr-0 px-3"];
+	return t.push(e.dense ? "py-2" : "py-4"), e.textAlign === "left" ? t.push("text-left") : e.textAlign === "center" ? t.push("text-center") : e.textAlign === "right" ? t.push("text-right") : e.textAlign === "justify" && t.push("text-justify"), e.verticalAlign === "baseline" ? t.push("align-baseline") : e.verticalAlign === "bottom" ? t.push("align-bottom") : e.verticalAlign === "middle" ? t.push("align-middle") : e.verticalAlign === "text-bottom" ? t.push("align-text-bottom") : e.verticalAlign === "text-top" ? t.push("align-text-top") : e.verticalAlign === "top" && t.push("align-top"), e.truncate && t.push("truncate"), t;
+} } };
+//#endregion
+export { e as default };

package/lib/components/table/theme/TableHead.base.theme.js

@@ -1,12 +1,10 @@
-const s = {
-  classes: {
-    thead: ({ props: t }) => {
-      const e = ["align-bottom bg-secondary-100 dark:bg-secondary-700"];
-      return t.stickyHeader && e.push("sticky top-0 z-10"), e;
-    },
-    row: "text-sm text-secondary-700 dark:text-secondary-200 border-b"
-  }
-}, a = s;
-export {
-  a as default
-};
+//#region src/components/table/theme/TableHead.base.theme.ts
+var e = { classes: {
+	thead: ({ props: e }) => {
+		let t = ["align-bottom bg-secondary-100 dark:bg-secondary-700"];
+		return e.stickyHeader && t.push("sticky top-0 z-10"), t;
+	},
+	row: "text-sm text-secondary-700 dark:text-secondary-200 border-b"
+} };
+//#endregion
+export { e as default };

package/lib/components/table/theme/TableHead.carbon.theme.js

@@ -1,12 +1,10 @@
-const s = {
-  classes: {
-    thead: ({ props: e }) => {
-      const t = ["align-bottom"];
-      return e.stickyHeader && t.push("sticky top-0 z-10"), t;
-    },
-    row: "text-secondary-900 dark:text-secondary-50"
-  }
-}, a = s;
-export {
-  a as default
-};
+//#region src/components/table/theme/TableHead.carbon.theme.ts
+var e = { classes: {
+	thead: ({ props: e }) => {
+		let t = ["align-bottom"];
+		return e.stickyHeader && t.push("sticky top-0 z-10"), t;
+	},
+	row: "text-secondary-900 dark:text-secondary-50"
+} };
+//#endregion
+export { e as default };

package/lib/components/table/theme/TableHeader.base.theme.js

@@ -1,16 +1,14 @@
-const s = {
-  classes: {
-    th: ({ props: t }) => {
-      const e = ["relative p-2.5 font-medium"];
-      return t.sortable && e.push("cursor-pointer hover:text-secondary-800 dark:hover:text-secondary-300 transition-colors duration-150 ease-in-out"), e;
-    },
-    header: ({ props: t }) => {
-      const e = ["flex items-center gap-1 select-none"];
-      return t.textAlign === "left" ? e.push("justify-start") : t.textAlign === "right" ? t.sortable ? e.push("flex-row-reverse") : e.push("justify-end") : t.textAlign === "center" && e.push("justify-center"), e;
-    },
-    sortIcon: ({ props: t }) => ["stroke-2 w-3 h-3"]
-  }
-}, r = s;
-export {
-  r as default
-};
+//#region src/components/table/theme/TableHeader.base.theme.ts
+var e = { classes: {
+	th: ({ props: e }) => {
+		let t = ["relative p-2.5 font-medium"];
+		return e.sortable && t.push("cursor-pointer hover:text-secondary-800 dark:hover:text-secondary-300 transition-colors duration-150 ease-in-out"), t;
+	},
+	header: ({ props: e }) => {
+		let t = ["flex items-center gap-1 select-none"];
+		return e.textAlign === "left" ? t.push("justify-start") : e.textAlign === "right" ? e.sortable ? t.push("flex-row-reverse") : t.push("justify-end") : e.textAlign === "center" && t.push("justify-center"), t;
+	},
+	sortIcon: ({ props: e }) => ["stroke-2 w-3 h-3"]
+} };
+//#endregion
+export { e as default };

package/lib/components/table/theme/TableHeader.carbon.theme.js

@@ -1,12 +1,10 @@
-const s = {
-  classes: {
-    th: ({ props: e }) => {
-      const t = ["relative py-3.5 font-semibold text-sm px-3 bg-secondary-200 dark:bg-secondary-700 select-none"];
-      return e.sortable && t.push("cursor-pointer hover:bg-secondary-300 dark:hover:bg-secondary-600 transition-colors duration-150 ease-in-out pr-5"), e.textAlign === "left" && t.push("text-left"), e.textAlign === "right" && t.push("text-right"), e.textAlign === "center" && t.push("text-center"), t;
-    },
-    sortIcon: ({ props: e }) => ["absolute stroke-2 w-4 h-4 top-4 right-2"]
-  }
-}, r = s;
-export {
-  r as default
-};
+//#region src/components/table/theme/TableHeader.carbon.theme.ts
+var e = { classes: {
+	th: ({ props: e }) => {
+		let t = ["relative py-3.5 font-semibold text-sm px-3 bg-secondary-200 dark:bg-secondary-700 select-none"];
+		return e.sortable && t.push("cursor-pointer hover:bg-secondary-300 dark:hover:bg-secondary-600 transition-colors duration-150 ease-in-out pr-5"), e.textAlign === "left" && t.push("text-left"), e.textAlign === "right" && t.push("text-right"), e.textAlign === "center" && t.push("text-center"), t;
+	},
+	sortIcon: ({ props: e }) => ["absolute stroke-2 w-4 h-4 top-4 right-2"]
+} };
+//#endregion
+export { e as default };

package/lib/components/table/theme/TableRow.base.theme.js

@@ -1,11 +1,7 @@
-const s = {
-  classes: {
-    row: ({ props: r }) => {
-      const e = [];
-      return r.selected && r.singleSelect && e.push("shadow-[inset_2px_0] shadow-primary-500 !bg-secondary-50 dark:!bg-secondary-600"), r.striped ? e.push("even:bg-secondary-50 dark:even:bg-secondary-700") : e.push("border-b border-secondary-200 dark:border-secondary-700"), r.pointer && e.push("hover:bg-secondary-50 dark:hover:bg-secondary-700 cursor-pointer"), e;
-    }
-  }
-}, d = s;
-export {
-  d as default
-};
+//#region src/components/table/theme/TableRow.base.theme.ts
+var e = { classes: { row: ({ props: e }) => {
+	let t = [];
+	return e.selected && e.singleSelect && t.push("shadow-[inset_2px_0] shadow-primary-500 !bg-secondary-50 dark:!bg-secondary-600"), e.striped ? t.push("even:bg-secondary-50 dark:even:bg-secondary-700") : t.push("border-b border-secondary-200 dark:border-secondary-700"), e.pointer && t.push("hover:bg-secondary-50 dark:hover:bg-secondary-700 cursor-pointer"), t;
+} } };
+//#endregion
+export { e as default };

package/lib/components/table/theme/TableRow.carbon.theme.js

@@ -1,11 +1,7 @@
-const s = {
-  classes: {
-    row: ({ props: r }) => {
-      const e = [];
-      return r.striped ? e.push("odd:bg-secondary-50 dark:odd:bg-secondary-800") : e.push("border-b border-secondary-200 dark:border-secondary-700"), r.pointer && e.push("hover:bg-secondary-50 dark:hover:bg-secondary-600 cursor-pointer"), e;
-    }
-  }
-}, o = s;
-export {
-  o as default
-};
+//#region src/components/table/theme/TableRow.carbon.theme.ts
+var e = { classes: { row: ({ props: e }) => {
+	let t = [];
+	return e.striped ? t.push("odd:bg-secondary-50 dark:odd:bg-secondary-800") : t.push("border-b border-secondary-200 dark:border-secondary-700"), e.pointer && t.push("hover:bg-secondary-50 dark:hover:bg-secondary-600 cursor-pointer"), t;
+} } };
+//#endregion
+export { e as default };

package/lib/components/tag/Tag.js

@@ -0,0 +1,5 @@
+import e from "./Tag.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/tag/Tag.vue
+var t = e;
+//#endregion
+export { t as default };

package/lib/components/tag/Tag.vue.d.ts

@@ -5,10 +5,10 @@ declare const tagProps: {
         type: StringConstructor;
         default: string;
     };
-    rounded: BooleanConstructor;
-    removable: BooleanConstructor;
-    outlined: BooleanConstructor;
-    filled: BooleanConstructor;
+    rounded: import("vue").Prop<boolean | undefined>;
+    removable: import("vue").Prop<boolean | undefined>;
+    outlined: import("vue").Prop<boolean | undefined>;
+    filled: import("vue").Prop<boolean | undefined>;
     disabled: BooleanConstructor;
     to: (ObjectConstructor | StringConstructor)[];
     color: {
@@ -30,10 +30,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: StringConstructor;
         default: string;
     };
-    rounded: BooleanConstructor;
-    removable: BooleanConstructor;
-    outlined: BooleanConstructor;
-    filled: BooleanConstructor;
+    rounded: import("vue").Prop<boolean | undefined>;
+    removable: import("vue").Prop<boolean | undefined>;
+    outlined: import("vue").Prop<boolean | undefined>;
+    filled: import("vue").Prop<boolean | undefined>;
     disabled: BooleanConstructor;
     to: (ObjectConstructor | StringConstructor)[];
     color: {
@@ -50,10 +50,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: StringConstructor;
         default: string;
     };
-    rounded: BooleanConstructor;
-    removable: BooleanConstructor;
-    outlined: BooleanConstructor;
-    filled: BooleanConstructor;
+    rounded: import("vue").Prop<boolean | undefined>;
+    removable: import("vue").Prop<boolean | undefined>;
+    outlined: import("vue").Prop<boolean | undefined>;
+    filled: import("vue").Prop<boolean | undefined>;
     disabled: BooleanConstructor;
     to: (ObjectConstructor | StringConstructor)[];
     color: {
@@ -70,12 +70,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
 }>, {
     disabled: boolean;
     tag: string;
-    outlined: boolean;
-    removable: boolean;
     color: string;
-    rounded: boolean;
     size: import("../../composables/useCommon").Size;
-    filled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     prefix?(_: {}): any;
     default?(_: {}): any;

package/lib/components/tag/Tag.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,62 @@
+import { useResolvedComponentProps as e } from "../../composables/resolveComponentDefaults.js";
+import { useColors as t } from "../../composables/useColors.js";
+import { useTheme as n } from "../../composables/useTheme.js";
+import { optionalBooleanProp as r } from "../../common/props.js";
+import { useCommon as i } from "../../composables/useCommon.js";
+import a from "../icon/Icon.js";
+import { closeIcon as o } from "../../common/icons.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, openBlock as g, renderSlot as _, resolveDynamicComponent as v, unref as y, useAttrs as b, withCtx as x, withModifiers as S } from "vue";
+//#region src/components/tag/Tag.vue?vue&type=script&setup=true&lang.ts
+var C = { class: "flex items-center gap-2" }, w = { class: "truncate" }, T = {
+	key: 0,
+	class: "absolute right-1.5 top-0 h-full flex items-center"
+}, E = {
+	...i.props(),
+	...t.props("secondary"),
+	tag: {
+		type: String,
+		default: "span"
+	},
+	rounded: r(),
+	removable: r(),
+	outlined: r(),
+	filled: r(),
+	disabled: Boolean,
+	to: [String, Object]
+}, D = /* @__PURE__ */ p({
+	name: "XTag",
+	validators: { ...i.validators() },
+	props: E,
+	emits: ["remove"],
+	setup(t) {
+		let r = t, i = e("Tag", r), p = s(() => r.size === "xs" ? "xs" : r.size === "sm" ? "sm" : r.size === "lg" ? "md" : r.size === "xl" ? "lg" : "sm"), E = b(), D = s(() => E.href ? "a" : r.to ? "router-link" : r.tag), { styles: O, classes: k, className: A } = n("Tag", {}, r);
+		return (e, t) => (g(), c(v(D.value), {
+			to: e.to,
+			class: m(["text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border relative", [
+				y(A),
+				y(k).wrapper,
+				y(i).outlined ? "border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]" : "!border-transparent bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]",
+				y(i).rounded ? "rounded-full" : "rounded"
+			]]),
+			style: h(y(O))
+		}, {
+			default: x(() => [d("span", { class: m(["max-w-full", { "pr-4": y(i).removable }]) }, [d("div", C, [_(e.$slots, "prefix"), d("div", w, [_(e.$slots, "default")])]), y(i).removable ? (g(), u("div", T, [f(a, {
+				size: p.value,
+				icon: y(o),
+				class: m(["cursor-pointer transition-colors duration-150", [e.disabled ? "text-secondary-400" : "hover:text-secondary-500"]]),
+				onClick: t[0] ||= S((t) => !e.disabled && e.$emit("remove", t), ["prevent"])
+			}, null, 8, [
+				"size",
+				"icon",
+				"class"
+			])])) : l("", !0)], 2)]),
+			_: 3
+		}, 8, [
+			"to",
+			"style",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { D as default };

package/lib/components/tag/theme/Tag.base.theme.js

@@ -1,24 +1,22 @@
-const s = {
-  classes: {
-    wrapper: ({ props: t }) => {
-      const e = ["inline-flex leading-tight max-w-full"];
-      return t.size === "xs" ? e.push("px-2 py-0.5 text-xs") : t.size === "sm" ? e.push(" px-2 py-0.5 text-sm") : t.size === "lg" ? e.push(" px-4 py-2 text-lg") : t.size === "xl" ? e.push(" px-5 py-3 text-xl") : e.push(" px-3 py-1.5"), t.outlined && e.push("border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]"), (t.filled || !t.outlined) && t.filled && e.push("bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]"), t.rounded ? e.push("rounded-full") : e.push("rounded-md"), e;
-    }
-  },
-  styles: ({ colors: t, props: e, css: r }) => {
-    const l = t.getPalette(e.color);
-    return r.variables({
-      bg: l[100],
-      text: l[800],
-      border: l[700],
-      dark: {
-        bg: l[600],
-        border: l[500],
-        text: l[100]
-      }
-    });
-  }
-}, d = s;
-export {
-  d as default
+//#region src/components/tag/theme/Tag.base.theme.ts
+var e = {
+	classes: { wrapper: ({ props: e }) => {
+		let t = ["inline-flex leading-tight max-w-full"];
+		return e.size === "xs" ? t.push("px-2 py-0.5 text-xs") : e.size === "sm" ? t.push(" px-2 py-0.5 text-sm") : e.size === "lg" ? t.push(" px-4 py-2 text-lg") : e.size === "xl" ? t.push(" px-5 py-3 text-xl") : t.push(" px-3 py-1.5"), e.outlined && t.push("border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]"), (e.filled || !e.outlined) && e.filled && t.push("bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]"), e.rounded ? t.push("rounded-full") : t.push("rounded-md"), t;
+	} },
+	styles: ({ colors: e, props: t, css: n }) => {
+		let r = e.getPalette(t.color);
+		return n.variables({
+			bg: r[100],
+			text: r[800],
+			border: r[700],
+			dark: {
+				bg: r[600],
+				border: r[500],
+				text: r[100]
+			}
+		});
+	}
 };
+//#endregion
+export { e as default };