npm - @guoyg578/k-ui - Versions diffs - 0.1.0 → 0.1.1 - Mend

@guoyg578/k-ui 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

package/README.md CHANGED Viewed

@@ -1,8 +1,61 @@
 # k-ui
-一套可复用的 Vue 3 组件库（K 前缀），基于 reka-ui（headless）+ Tailwind v4 token。**两种接入：① `pnpm add @guoyg578/k-ui`（推荐）；② 整个 `k-ui/` 目录源码拷贝**。两种方式的完整步骤、样式引入（含 Tailwind `@source` 关键步骤）、发布流程见 [INSTALL.md](./INSTALL.md)。
+一套可复用的 Vue 3 组件库（K 前缀），基于 reka-ui（headless）+ Tailwind v4 设计令牌。
-> 📦 **接入到新项目** —— 完整步骤、最小集成示例、排错速查见 [INSTALL.md](./INSTALL.md)。
+## 安装
+```bash
+pnpm add @guoyg578/k-ui
+# 必需 peer 依赖
+pnpm add vue reka-ui lucide-vue-next
+# 可选：仅用到 KDatePicker 时
+pnpm add @vuepic/vue-datepicker date-fns
+```
+> 需要 **Tailwind v4**：组件大量使用工具类（`bg-ink-200` / `text-brand-500` / `size-4` …），这些类必须由你项目自己的 Tailwind 生成。
+## 引入样式 ⚠️ 最关键
+在全局 CSS 入口（即 `@import "tailwindcss"` 所在文件）：
+```css
+@import "tailwindcss";
+/* 设计令牌 + 组件基础类（含 @theme / @layer，必须交给 Tailwind 处理）*/
+@import "@guoyg578/k-ui/styles/tokens.css";
+@import "@guoyg578/k-ui/styles/components.css";
+/* 已编译的组件作用域样式（纯 CSS，含弹层 menu / 日期选择器样式）*/
+@import "@guoyg578/k-ui/css";
+/* ⚠️ 让 Tailwind 扫描 k-ui 产物里出现的工具类，否则颜色/间距全部散架。
+   路径相对本 CSS 文件，按你的目录层级调整到 node_modules。 */
+@source "../../node_modules/@guoyg578/k-ui/dist";
+```
+> - Tailwind v4 默认**不扫描 node_modules**，`@source` 那一行必不可少。
+> - 暗色模式：`tokens.css` 自带 `:root[data-theme="dark"]` 覆盖，设 `<html data-theme="dark">` 即生效；不设则保持亮色。
+## 快速上手
+```vue
+<script setup lang="ts">
+import { KButton, KDialog, KMessage } from '@guoyg578/k-ui'
+import { ref } from 'vue'
+const open = ref(false)
+</script>
+<template>
+  <KButton type="primary" @click="open = true">打开</KButton>
+  <KDialog v-model:open="open" title="示例" footer @confirm="KMessage.success('done')">
+    Hello from k-ui.
+  </KDialog>
+</template>
+```
+- `KConfirmDialog`（配 `useConfirm`）：在根组件挂一次 `<KConfirmDialog />`。
+- `v-reveal` / `v-spotlight` 指令：`import { installDirectives } from '@guoyg578/k-ui'` 后 `installDirectives(app)`。
+- `KMessage`（函数式 toast）开箱即用，首次调用自动挂载容器。
 ## 组件清单（45+）
@@ -21,8 +74,6 @@
 辅助导出：`useConfirm()`、`KMessage`、`installDirectives`、类型 `ConfirmOptions` / `ThemeMode` / `FormRule` / `FormFieldRef` / `TreeNode` / `CmdItem` / `UploadFile` / `MessageOptions`。
-> 本库由两套同源组件合并而来：重叠组件（KTooltip / KPagination / KEmpty / KGridSkeleton / KListSkeleton / KRefetchOverlay）以 k-ui 原实现为基准。
 ## 依赖（peer dependencies）
 | 依赖 | 用途 |
@@ -31,29 +82,22 @@
 | `reka-ui` ^2 | 大量 headless 组件（Dialog / Select / Tooltip / Tabs …） |
 | `lucide-vue-next` ^1 | 图标 |
 | **Tailwind v4** | 工具类 + 设计令牌（`tokens.css` / `components.css`） |
-| `vue-router` ^4+ | **可选** —— 仅 `KBreadcrumb` 用到 |
 | `@vuepic/vue-datepicker` + `date-fns` | **可选** —— 仅 `KDatePicker` 用到（v13 依赖 date-fns 的 zhCN locale） |
-## 快速上手
+> 本库**不依赖任何路由库**。`KBreadcrumb` 的链接项渲染为原生 `<a href>`，点击派发 `item-click` 事件，由宿主自行导航（如 `router.push`）。
-```vue
-<script setup lang="ts">
-import { KButton, KDialog, KMessage } from './k-ui'
-import { ref } from 'vue'
-const open = ref(false)
-</script>
-<template>
-  <KButton type="primary" @click="open = true">打开</KButton>
-  <KDialog v-model:open="open" title="示例" footer @confirm="KMessage.success('done')">
-    Hello from k-ui.
-  </KDialog>
-</template>
-```
+## 排错速查
-> ⚠️ 组件依赖 `k-ui/styles/tokens.css` + `components.css`，**必须在全局 CSS 引入**，否则样式错乱。详见 [INSTALL.md](./INSTALL.md)。
+| 现象 | 原因 | 解决 |
+|---|---|---|
+| 颜色全是默认 / 输入框无边框 / 骨架屏不动 | 漏了引入样式 | 引入 `tokens.css` + `components.css` + `css` |
+| 工具类（`size-4`、`rounded-lg`）不生效 | 缺 `@source`，或项目不是 Tailwind v4 | 加 `@source ".../@guoyg578/k-ui/dist"`，接入 Tailwind v4 |
+| 切换主题按钮点了没反应 | `KThemeToggleButton` 无状态 | 接 `v-model:mode` 并自行应用 `data-theme` |
+| 暗色模式不生效 | 没设 `<html data-theme="dark">` | 自己控制该属性 |
+| `KConfirmDialog` 不弹出 | 没在根组件挂载，或挂了多个 | 全局只挂一个 `<KConfirmDialog />` |
+| 图标不显示 | 没装 `lucide-vue-next` | `pnpm add lucide-vue-next` |
 ## 备注
 - 文案中文硬编码（「搜索」「确定」「暂无数据」等），需 i18n 自行替换。
-- 源码拷贝交付，无版本号管理；更新时重新拷贝覆盖。
+- CSS 类与设计令牌统一用 `k-` 前缀（`k-input` / `--k-surface` …），与宿主项目自有样式一般不冲突。

package/dist/components/KAlert.vue.d.ts CHANGED Viewed

@@ -26,8 +26,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onClose?: (() => any) | undefined;
 }>, {
     type: AlertType;
-    closable: boolean;
     variant: "tint" | "outline";
+    closable: boolean;
     icon: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/{KAlert.js → KAlert.vue.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./KAlert.vue_vue_type_script_setup_true_lang.js";
-/* empty css                                                       */
+/* empty css                                                           */
 //#region components/KAlert.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-5a970db1"]]);
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-e5ce1f58"]]);
 //#endregion
 export { n as default };

package/dist/components/KAlert.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,16 +1,16 @@
-import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, ref as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, watch as h } from "vue";
-import { AlertCircle as g, AlertTriangle as _, CheckCircle2 as v, Info as y, X as b } from "lucide-vue-next";
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, getCurrentInstance as c, normalizeClass as l, openBlock as u, ref as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, watch as g } from "vue";
+import { AlertCircle as _, AlertTriangle as v, CheckCircle2 as y, Info as b, X as x } from "lucide-vue-next";
 //#region components/KAlert.vue?vue&type=script&setup=true&lang.ts
-var x = { class: "k-alert__body" }, S = {
+var S = { class: "k-alert__body" }, C = {
 	key: 0,
 	class: "k-alert__title"
-}, C = {
+}, w = {
 	key: 1,
 	class: "k-alert__desc"
-}, w = {
+}, T = {
 	key: 2,
 	class: "k-alert__actions"
-}, T = /* @__PURE__ */ s({
+}, E = /* @__PURE__ */ s({
 	__name: "KAlert",
 	props: {
 		type: { default: "info" },
@@ -28,49 +28,52 @@ var x = { class: "k-alert__body" }, S = {
 		modelValue: { type: Boolean }
 	},
 	emits: ["update:modelValue", "close"],
-	setup(s, { emit: T }) {
-		let E = s, D = T, O = u(!0);
-		h(() => [
-			E.type,
-			E.title,
-			E.description
+	setup(s, { emit: E }) {
+		let D = s, O = E, k = c(), A = e(() => {
+			let e = k?.vnode.props ?? {};
+			return "modelValue" in e || "model-value" in e;
+		}), j = d(!0);
+		g(() => [
+			D.type,
+			D.title,
+			D.description
 		], () => {
-			E.modelValue === void 0 && (O.value = !0);
+			A.value || (j.value = !0);
 		});
-		let k = e(() => E.modelValue === void 0 ? O.value : E.modelValue);
-		function A() {
-			E.modelValue === void 0 ? O.value = !1 : D("update:modelValue", !1), D("close");
+		let M = e(() => A.value ? D.modelValue : j.value);
+		function N() {
+			A.value ? O("update:modelValue", !1) : j.value = !1, O("close");
 		}
-		let j = {
-			info: y,
-			success: v,
-			warning: _,
-			error: g
+		let P = {
+			info: b,
+			success: y,
+			warning: v,
+			error: _
 		};
-		return (e, u) => k.value ? (l(), r("div", {
+		return (e, c) => M.value ? (u(), r("div", {
 			key: 0,
-			class: c(["k-alert", [`k-alert--${s.type}`, `k-alert--${s.variant}`]]),
+			class: l(["k-alert", [`k-alert--${s.type}`, `k-alert--${s.variant}`]]),
 			role: "alert"
 		}, [
-			s.icon ? (l(), t(f(j[s.type]), {
+			s.icon ? (u(), t(p(P[s.type]), {
 				key: 0,
 				size: 16,
 				class: "k-alert__icon"
 			})) : n("", !0),
-			i("div", x, [
-				s.title || e.$slots.title ? (l(), r("div", S, [d(e.$slots, "title", {}, () => [a(p(s.title), 1)], !0)])) : n("", !0),
-				s.description || e.$slots.default ? (l(), r("div", C, [d(e.$slots, "default", {}, () => [a(p(s.description), 1)], !0)])) : n("", !0),
-				e.$slots.actions ? (l(), r("div", w, [d(e.$slots, "actions", {}, void 0, !0)])) : n("", !0)
+			i("div", S, [
+				s.title || e.$slots.title ? (u(), r("div", C, [f(e.$slots, "title", {}, () => [a(m(s.title), 1)], !0)])) : n("", !0),
+				s.description || e.$slots.default ? (u(), r("div", w, [f(e.$slots, "default", {}, () => [a(m(s.description), 1)], !0)])) : n("", !0),
+				e.$slots.actions ? (u(), r("div", T, [f(e.$slots, "actions", {}, void 0, !0)])) : n("", !0)
 			]),
-			s.closable ? (l(), r("button", {
+			s.closable ? (u(), r("button", {
 				key: 1,
 				type: "button",
 				class: "k-alert__close",
 				"aria-label": "关闭",
-				onClick: A
-			}, [o(m(b), { size: 14 })])) : n("", !0)
+				onClick: N
+			}, [o(h(x), { size: 14 })])) : n("", !0)
 		], 2)) : n("", !0);
 	}
 });
 //#endregion
-export { T as default };
+export { E as default };

package/dist/components/{KAvatar.js → KAvatar.vue.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./KAvatar.vue_vue_type_script_setup_true_lang.js";
-/* empty css                                                        */
+/* empty css                                                            */
 //#region components/KAvatar.vue
 var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-14ccf4af"]]);
 //#endregion

package/dist/components/{KAvatarGroup.js → KAvatarGroup.vue.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./KAvatarGroup.vue_vue_type_script_setup_true_lang.js";
-/* empty css                                                             */
+/* empty css                                                                 */
 //#region components/KAvatarGroup.vue
 var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-00da4b72"]]);
 //#endregion

package/dist/components/KBreadcrumb.vue.d.ts CHANGED Viewed

@@ -1,12 +1,41 @@
 import type { Component } from 'vue';
 interface BreadcrumbItem {
     label: string;
+    /** 链接目标(路由路径或 URL)。带 to 且非最后一项时渲染为 <a href>；
+     *  普通左键点击会被拦截并派发 item-click, 交给宿主导航(如 router.push)。 */
     to?: string;
     icon?: Component;
 }
 type __VLS_Props = {
     items: BreadcrumbItem[];
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare var __VLS_1: {
+    item: BreadcrumbItem;
+    index: number;
+    isLink: boolean;
+    isLast: boolean;
+};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "item-click": (payload: {
+        item: BreadcrumbItem;
+        index: number;
+        event: MouseEvent;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onItem-click"?: ((payload: {
+        item: BreadcrumbItem;
+        index: number;
+        event: MouseEvent;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/{KBreadcrumb.js → KBreadcrumb.vue.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./KBreadcrumb.vue_vue_type_script_setup_true_lang.js";
-/* empty css                                                            */
+/* empty css                                                                */
 //#region components/KBreadcrumb.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-84a26ab7"]]);
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-b6e9004a"]]);
 //#endregion
 export { n as default };

package/dist/components/KBreadcrumb.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,38 +1,53 @@
-import { Fragment as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createTextVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderList as c, resolveDynamicComponent as l, toDisplayString as u, unref as d, withCtx as f } from "vue";
+import { Fragment as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createTextVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderList as c, renderSlot as l, resolveDynamicComponent as u, toDisplayString as d, unref as f } from "vue";
 import { ChevronRight as p } from "lucide-vue-next";
-import { RouterLink as m } from "vue-router";
 //#region components/KBreadcrumb.vue?vue&type=script&setup=true&lang.ts
-var h = {
+var m = {
 	class: "k-bread",
 	"aria-label": "面包屑"
-}, g = /* @__PURE__ */ a({
+}, h = ["href", "onClick"], g = ["aria-current"], _ = /* @__PURE__ */ a({
 	__name: "KBreadcrumb",
 	props: { items: {} },
-	setup(a) {
-		return (g, _) => (s(), r("nav", h, [(s(!0), r(e, null, c(a.items, (c, h) => (s(), r(e, { key: h }, [c.to && h < a.items.length - 1 ? (s(), t(d(m), {
+	emits: ["item-click"],
+	setup(a, { emit: _ }) {
+		let v = a, y = _;
+		function b(e, t) {
+			return !!e.to && t < v.items.length - 1;
+		}
+		function x(e, t, n) {
+			n.defaultPrevented || n.button !== 0 || n.metaKey || n.ctrlKey || n.shiftKey || n.altKey || (n.preventDefault(), y("item-click", {
+				item: e,
+				index: t,
+				event: n
+			}));
+		}
+		return (_, v) => (s(), r("nav", m, [(s(!0), r(e, null, c(a.items, (c, m) => (s(), r(e, { key: m }, [l(_.$slots, "item", {
+			item: c,
+			index: m,
+			isLink: b(c, m),
+			isLast: m === a.items.length - 1
+		}, () => [b(c, m) ? (s(), r("a", {
 			key: 0,
-			to: c.to,
-			class: "k-bread__item k-bread__item--link"
-		}, {
-			default: f(() => [c.icon ? (s(), t(l(c.icon), {
-				key: 0,
-				size: 13,
-				class: "k-bread__icon"
-			})) : n("", !0), i(" " + u(c.label), 1)]),
-			_: 2
-		}, 1032, ["to"])) : (s(), r("span", {
+			href: c.to,
+			class: "k-bread__item k-bread__item--link",
+			onClick: (e) => x(c, m, e)
+		}, [c.icon ? (s(), t(u(c.icon), {
+			key: 0,
+			size: 13,
+			class: "k-bread__icon"
+		})) : n("", !0), i(" " + d(c.label), 1)], 8, h)) : (s(), r("span", {
 			key: 1,
-			class: o(["k-bread__item", { "k-bread__item--last": h === a.items.length - 1 }])
-		}, [c.icon ? (s(), t(l(c.icon), {
+			class: o(["k-bread__item", { "k-bread__item--last": m === a.items.length - 1 }]),
+			"aria-current": m === a.items.length - 1 ? "page" : void 0
+		}, [c.icon ? (s(), t(u(c.icon), {
 			key: 0,
 			size: 13,
 			class: "k-bread__icon"
-		})) : n("", !0), i(" " + u(c.label), 1)], 2)), h < a.items.length - 1 ? (s(), t(d(p), {
-			key: 2,
+		})) : n("", !0), i(" " + d(c.label), 1)], 10, g))], !0), m < a.items.length - 1 ? (s(), t(f(p), {
+			key: 0,
 			size: 14,
 			class: "k-bread__sep"
 		})) : n("", !0)], 64))), 128))]));
 	}
 });
 //#endregion
-export { g as default };
+export { _ as default };

package/dist/components/KButton.vue.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-type KButtonType = 'primary' | 'secondary' | 'ghost' | 'danger';
-type KButtonSize = 'sm' | 'md' | 'lg';
+type KButtonType = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'error' | 'danger' | 'secondary' | 'ghost';
+type KButtonSize = 'tiny' | 'xs' | 'small' | 'sm' | 'medium' | 'md' | 'large' | 'lg';
 type __VLS_Props = {
     type?: KButtonType;
     size?: KButtonSize;
@@ -7,6 +7,14 @@ type __VLS_Props = {
     disabled?: boolean;
     block?: boolean;
     nativeType?: 'button' | 'submit' | 'reset';
+    quaternary?: boolean;
+    tertiary?: boolean;
+    text?: boolean;
+    secondary?: boolean;
+    ghost?: boolean;
+    circle?: boolean;
+    round?: boolean;
+    color?: string;
 };
 declare var __VLS_6: {}, __VLS_8: {};
 type __VLS_Slots = {} & {
@@ -19,12 +27,19 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((ev: MouseEvent) => any) | undefined;
 }>, {
+    secondary: boolean;
+    ghost: boolean;
     type: KButtonType;
     size: KButtonSize;
     loading: boolean;
     disabled: boolean;
     block: boolean;
     nativeType: "button" | "submit" | "reset";
+    quaternary: boolean;
+    tertiary: boolean;
+    text: boolean;
+    circle: boolean;
+    round: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/{KButton.js → KButton.vue.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import e from "./KButton.vue_vue_type_script_setup_true_lang.js";
-/* empty css                                                        */
+/* empty css                                                            */
 import t from "../_virtual/_plugin-vue_export-helper.js";
 //#region components/KButton.vue
-var n = /* @__PURE__ */ t(e, [["__scopeId", "data-v-d6c04ee4"]]);
+var n = /* @__PURE__ */ t(e, [["__scopeId", "data-v-e72ea9f3"]]);
 //#endregion
 export { n as default };

package/dist/components/KButton.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, unref as c } from "vue";
-import { Loader2 as l } from "lucide-vue-next";
+import { computed as e, createBlock as t, createCommentVNode 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";
+import { Loader2 as u } from "lucide-vue-next";
 //#region components/KButton.vue?vue&type=script&setup=true&lang.ts
-var u = ["type", "disabled"], d = /* @__PURE__ */ i({
+var d = ["type", "disabled"], f = /* @__PURE__ */ i({
 	__name: "KButton",
 	props: {
-		type: { default: "secondary" },
+		type: { default: "default" },
 		size: { default: "md" },
 		loading: {
 			type: Boolean,
@@ -18,33 +18,67 @@ var u = ["type", "disabled"], d = /* @__PURE__ */ i({
 			type: Boolean,
 			default: !1
 		},
-		nativeType: { default: "button" }
+		nativeType: { default: "button" },
+		quaternary: {
+			type: Boolean,
+			default: !1
+		},
+		tertiary: {
+			type: Boolean,
+			default: !1
+		},
+		text: {
+			type: Boolean,
+			default: !1
+		},
+		secondary: {
+			type: Boolean,
+			default: !1
+		},
+		ghost: {
+			type: Boolean,
+			default: !1
+		},
+		circle: {
+			type: Boolean,
+			default: !1
+		},
+		round: {
+			type: Boolean,
+			default: !1
+		},
+		color: {}
 	},
 	emits: ["click"],
 	setup(i) {
-		let d = i, f = e(() => d.size === "sm" ? 12 : d.size === "lg" ? 16 : 14);
-		return (e, d) => (o(), r("button", {
+		let f = i, p = e(() => f.size === "tiny" || f.size === "xs" ? "xs" : f.size === "small" || f.size === "sm" ? "sm" : f.size === "large" || f.size === "lg" ? "lg" : "md"), m = e(() => f.type === "danger" || f.type === "error" ? "error" : f.type === "secondary" || f.type === "ghost" ? "default" : f.type), h = e(() => f.text ? "text" : f.quaternary || f.ghost || f.type === "ghost" ? "ghost" : f.tertiary || f.secondary ? "soft" : f.type === "secondary" ? "outline" : "solid"), g = e(() => p.value === "xs" || p.value === "sm" ? 12 : p.value === "lg" ? 16 : 14), _ = e(() => f.color ? { "--k-btn-custom": f.color } : void 0);
+		return (e, f) => (s(), r("button", {
 			type: i.nativeType,
 			disabled: i.disabled || i.loading,
 			class: a(["k-btn", [
-				`k-btn--${i.type}`,
-				`k-btn--${i.size}`,
+				`k-btn--${m.value}`,
+				`k-btn--${h.value}`,
+				`k-btn--${p.value}`,
 				{
 					"k-btn--block": i.block,
-					"k-btn--loading": i.loading
+					"k-btn--loading": i.loading,
+					"k-btn--circle": i.circle,
+					"k-btn--round": i.round,
+					"k-btn--custom": i.color
 				}
 			]]),
-			onClick: d[0] ||= (t) => e.$emit("click", t)
+			style: o(_.value),
+			onClick: f[0] ||= (t) => e.$emit("click", t)
 		}, [
-			i.loading ? (o(), t(c(l), {
+			i.loading ? (s(), t(l(u), {
 				key: 0,
-				size: f.value,
+				size: g.value,
 				class: "k-btn__spinner"
 			}, null, 8, ["size"])) : n("", !0),
-			s(e.$slots, "icon", {}, void 0, !0),
-			s(e.$slots, "default", {}, void 0, !0)
-		], 10, u));
+			c(e.$slots, "icon", {}, void 0, !0),
+			c(e.$slots, "default", {}, void 0, !0)
+		], 14, d));
 	}
 });
 //#endregion
-export { d as default };
+export { f as default };

package/dist/components/KCard.vue.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ type __VLS_Props = {
     hoverable?: boolean;
     bodyClass?: string;
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_1) => any;
 } & {
@@ -14,9 +14,11 @@ type __VLS_Slots = {} & {
 } & {
     actions?: (props: typeof __VLS_5) => any;
 } & {
-    default?: (props: typeof __VLS_7) => any;
+    'header-extra'?: (props: typeof __VLS_7) => any;
 } & {
-    footer?: (props: typeof __VLS_9) => any;
+    default?: (props: typeof __VLS_9) => any;
+} & {
+    footer?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     bordered: boolean;

package/dist/components/{KCard.js → KCard.vue.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./KCard.vue_vue_type_script_setup_true_lang.js";
-/* empty css                                                      */
+/* empty css                                                          */
 //#region components/KCard.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-4ce7c362"]]);
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-31c11daf"]]);
 //#endregion
 export { n as default };

package/dist/components/KCard.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -36,11 +36,11 @@ var l = {
 			"k-card--bordered": i.bordered,
 			"k-card--hoverable": i.hoverable
 		}]]) }, [
-			i.title || h.$slots.title || h.$slots.header || h.$slots.actions ? (o(), t("header", l, [n("div", u, [
+			i.title || h.$slots.title || h.$slots.header || h.$slots.actions || h.$slots["header-extra"] ? (o(), t("header", l, [n("div", u, [
 				i.title || h.$slots.title ? (o(), t("h3", d, [s(h.$slots, "title", {}, () => [r(c(i.title), 1)], !0)])) : e("", !0),
 				i.subtitle ? (o(), t("p", f, c(i.subtitle), 1)) : e("", !0),
 				s(h.$slots, "header", {}, void 0, !0)
-			]), h.$slots.actions ? (o(), t("div", p, [s(h.$slots, "actions", {}, void 0, !0)])) : e("", !0)])) : e("", !0),
+			]), h.$slots.actions || h.$slots["header-extra"] ? (o(), t("div", p, [s(h.$slots, "actions", {}, () => [s(h.$slots, "header-extra", {}, void 0, !0)], !0)])) : e("", !0)])) : e("", !0),
 			n("div", { class: a(["k-card__body", i.bodyClass]) }, [s(h.$slots, "default", {}, void 0, !0)], 2),
 			h.$slots.footer ? (o(), t("footer", m, [s(h.$slots, "footer", {}, void 0, !0)])) : e("", !0)
 		], 2));

package/dist/components/{KCarousel.js → KCarousel.vue.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./KCarousel.vue_vue_type_script_setup_true_lang.js";
-/* empty css                                                          */
+/* empty css                                                              */
 //#region components/KCarousel.vue
 var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-173fae98"]]);
 //#endregion

package/dist/components/{KCheckbox.js → KCheckbox.vue.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./KCheckbox.vue_vue_type_script_setup_true_lang.js";
-/* empty css                                                          */
+/* empty css                                                              */
 //#region components/KCheckbox.vue
 var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-17c1bf53"]]);
 //#endregion

package/dist/components/{KCheckboxGroup.js → KCheckboxGroup.vue.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./KCheckboxGroup.vue_vue_type_script_setup_true_lang.js";
-/* empty css                                                               */
+/* empty css                                                                   */
 //#region components/KCheckboxGroup.vue
 var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-0188db2b"]]);
 //#endregion