sakana-element 2.2.0 → 2.4.0

package/README.md

@@ -1,14 +1,27 @@
 # Sakana Element
 
 [![npm version](https://img.shields.io/npm/v/sakana-element.svg)](https://www.npmjs.com/package/sakana-element)
-[![license](https://img.shields.io/npm/l/sakana-element.svg)](https://github.com/yu859/sakana-element/blob/master/LICENSE)
+[![npm downloads](https://img.shields.io/npm/dm/sakana-element.svg)](https://www.npmjs.com/package/sakana-element)
+[![license](https://img.shields.io/npm/l/sakana-element.svg)](https://github.com/SaKaNa-Y/sakana-element/blob/master/LICENSE)
 
 A Vue 3 + TypeScript component library with pixel art design aesthetic.
 
 像素风格的 Vue 3 + TypeScript 组件库。
 
+**[Documentation / 文档](https://sakana-element-docs.vercel.app)** | **[GitHub](https://github.com/SaKaNa-Y/sakana-element)**
+
 ---
 
+## Features / 特性
+
+- 🎨 **CSS Houdini Pixel Rendering** — pixel-border & pixel-shadow Paint Worklets / CSS Houdini 像素边框和阴影
+- 🧩 **25 Components** — Pixel-art styled UI toolkit / 25 个像素风格组件
+- ⭐ **486 Pixel Icons** — Full pixelarticons set with animations / 内置 486 个像素图标
+- 🌙 **Catppuccin Dark Mode** — System-preference auto-detection / Catppuccin 暗色模式
+- 🔧 **TypeScript** — Full type definitions with IntelliSense / 完整类型定义
+- 📦 **Tree-Shakable** — Per-component ES module chunks / 按组件分包
+- 🌐 **5 Locales** — EN, ZH-CN, ZH-TW, JA, KO / 五种语言
+
 ## Install / 安装
 
 ```bash
@@ -31,30 +44,88 @@ createApp(App).use(SakanaElement).mount('#app')
 
 ## Components / 组件
 
+### Basic / 基础
+
+| Component | Description / 描述 |
+|-----------|-------------------|
+| `PxButton` | Button with 8+ style variants / 按钮（8+ 种风格变体） |
+| `PxIcon` | 486 built-in pixel icons / 486 个内置像素图标 |
+
+### Form / 表单
+
+| Component | Description / 描述 |
+|-----------|-------------------|
+| `PxInput` | Text, password, textarea, date, and more / 输入框（多种类型） |
+| `PxSwitch` | Toggle switch / 开关 |
+| `PxSelect` | Dropdown select with filtering / 选择器（支持搜索过滤） |
+| `PxFileInput` | File upload input / 文件输入 |
+| `PxForm` | Form layout with validation / 表单（支持验证） |
+
+### Data Display / 数据展示
+
+| Component | Description / 描述 |
+|-----------|-------------------|
+| `PxBadge` | Status badge / 徽章 |
+| `PxAvatar` | User avatar / 头像 |
+| `PxCard` | Card with staircase corners / 卡片（阶梯角） |
+| `PxProgress` | Progress bar with pixel chunks / 进度条（像素分块） |
+| `PxTable` | Data table / 数据表格 |
+| `PxCollapse` | Accordion collapse / 折叠面板 |
+| `PxPixelate` | Image pixelation effect / 图片像素化 |
+
+### Navigation / 导航
+
+| Component | Description / 描述 |
+|-----------|-------------------|
+| `PxLink` | Hyperlink / 链接 |
+| `PxBreadcrumb` | Breadcrumb trail / 面包屑 |
+
+### Feedback / 反馈
+
 | Component | Description / 描述 |
 |-----------|-------------------|
-| `PxButton` | Button / 按钮 |
-| `PxIcon` | Icon / 图标 |
-| `PxInput` | Input / 输入框 |
-| `PxLink` | Link / 链接 |
-| `PxSelect` | Select / 选择器 |
-| `PxFileInput` | FileInput / 文件输入 |
-| `PxSwitch` | Switch / 开关 |
-| `PxForm` | Form / 表单 |
-| `PxAvatar` | Avatar / 头像 |
-| `PxBadge` | Badge / 徽章 |
-| `PxCard` | Card / 卡片 |
-| `PxCollapse` | Collapse / 折叠面板 |
-| `PxBreadcrumb` | Breadcrumb / 面包屑 |
-| `PxDropdown` | Dropdown / 下拉菜单 |
-| `PxAlert` | Alert / 警告提示 |
-| `PxMessage` | Message / 消息提示 |
-| `PxMessageBox` | MessageBox / 消息弹框 |
-| `PxNotification` | Notification / 通知 |
-| `PxLoading` | Loading / 加载 |
-| `PxTooltip` | Tooltip / 文字提示 |
-| `PxPopconfirm` | Popconfirm / 气泡确认框 |
-| `PxConfigProvider` | ConfigProvider / 全局配置 |
+| `PxAlert` | Alert message / 警告提示 |
+| `PxTooltip` | Tooltip popup / 文字提示 |
+| `PxMessage` | Toast message / 消息提示 |
+| `PxNotification` | Notification panel / 通知 |
+| `PxPopconfirm` | Popover confirm / 气泡确认框 |
+| `PxMessageBox` | Modal dialog / 消息弹框 |
+| `PxLoading` | Loading overlay / 加载 |
+| `PxDropdown` | Dropdown menu / 下拉菜单 |
+
+### Config / 配置
+
+| Component | Description / 描述 |
+|-----------|-------------------|
+| `PxConfigProvider` | Global config provider / 全局配置 |
+
+## Composition Hooks / 组合式函数
+
+| Hook | Description / 描述 |
+|------|-------------------|
+| `useTheme` | Reactive theme state (light / dark / system) / 响应式主题状态 |
+| `useSystemTheme` | Detect OS color scheme preference / 检测系统配色偏好 |
+
+```ts
+import { useTheme } from 'sakana-element'
+
+const { theme, toggleTheme, setTheme } = useTheme()
+
+toggleTheme()        // Toggle between dark and light
+setTheme('dark')     // Force dark mode
+setTheme('system')   // Follow system preference
+```
+
+## Icons / 图标
+
+486 icons from [pixelarticons](https://pixelarticons.com/) are bundled out of the box — with support for flip, rotation, animations, and custom SVG registration.
+
+内置 [pixelarticons](https://pixelarticons.com/) 的 486 个像素风格图标，开箱即用 — 支持翻转、旋转、动画及自定义 SVG 注册。
+
+```vue
+<px-icon icon="home" size="lg" type="primary" />
+<px-icon icon="heart" color="#e91e63" beat />
+```
 
 ## Bundled Font / 内置字体
 
@@ -76,9 +147,11 @@ Add the `px-dark` or `dark` class to an ancestor element:
 
 ## Links / 链接
 
-- [GitHub](https://github.com/yu859/sakana-element)
+- [Documentation / 文档](https://sakana-element-docs.vercel.app)
+- [GitHub](https://github.com/SaKaNa-Y/sakana-element)
 - [npm](https://www.npmjs.com/package/sakana-element)
+- [Changelog](https://github.com/SaKaNa-Y/sakana-element/blob/master/CHANGELOG.md)
 
 ## License / 许可证
 
-[ISC](https://github.com/yu859/sakana-element/blob/master/LICENSE)
+[ISC](https://github.com/SaKaNa-Y/sakana-element/blob/master/LICENSE)

package/dist/es/{Alert-C76ZWSVk.js → Alert-DfLsJvQD.js}

@@ -1,6 +1,6 @@
-import { t as e, r as t, S as l, c as o, _ as s, w as a } from "./utils-bsCscZfS.js";
+import { t as e, r as t, S as l, c as o, _ as s, w as a } from "./utils-BXICIEsD.js";
 import { defineComponent as c, useSlots as n, ref as i, computed as r, createBlock as p, openBlock as u, Transition as d, withCtx as f, withDirectives as _, createElementVNode as y, normalizeStyle as x, normalizeClass as v, createCommentVNode as m, createElementBlock as h, renderSlot as k, createTextVNode as w, toDisplayString as B, createVNode as I, withModifiers as b, vShow as $ } from "vue";
-import { P as g } from "./Icon-DpJyuj7c.js";
+import { P as g } from "./Icon-D6qRB3pq.js";
 const P = { class: "px-alert__content" }, j = { key: 0, class: "px-alert__description" }, A = { key: 1, class: "px-alert__close" }, C = a(s(c({ name: "PxAlert", __name: "Alert", props: { title: {}, type: { default: "info" }, description: {}, effect: { default: "light" }, closable: { type: Boolean, default: true }, center: { type: Boolean }, showIcon: { type: Boolean }, outline: { type: Boolean }, dash: { type: Boolean }, color: {} }, emits: ["close"], setup(s2, { expose: a2, emit: c2 }) {
   const C2 = s2, S = c2, q = n(), z = i(true), D = r((() => e.get(C2.type) ?? "circle-info")), E = r((() => C2.description || q.default)), F = r((() => {
     if (!C2.color) return {};

package/dist/es/Avatar-Ci4OKsv7.js

@@ -0,0 +1,9 @@
+import { r as a, c as e, S as s, _ as r, w as t } from "./utils-BXICIEsD.js";
+import { defineComponent as o, computed as l, createElementBlock as p, openBlock as u, normalizeStyle as d, normalizeClass as i, renderSlot as c } from "vue";
+const f = t(r(o({ name: "PxAvatar", __name: "Avatar", props: { size: { default: "default" }, shape: { default: "circle" }, border: { type: Boolean, default: true }, color: {} }, setup(r2) {
+  const t2 = r2, o2 = l((() => t2.color ? a(e(t2.color), "px-avatar", s.default) : {}));
+  return (a2, e2) => (u(), p("span", { class: i(["px-avatar", { [`px-avatar--${a2.size}`]: a2.size && "default" !== a2.size, "is-square": "square" === a2.shape, "is-border": a2.border }]), style: d(o2.value) }, [c(a2.$slots, "default", {}, void 0, true)], 6));
+} }), [["__scopeId", "data-v-be451b35"]]));
+export {
+  f as P
+};

package/dist/es/{Badge-CoFWwBwv.js → Badge-B4wEToK6.js}

@@ -1,6 +1,6 @@
-import { r as e, S as s, c as o, _ as a, w as t } from "./utils-bsCscZfS.js";
+import { r as e, S as s, c as o, _ as a, w as t } from "./utils-BXICIEsD.js";
 import { defineComponent as l, useSlots as i, computed as n, createElementBlock as u, openBlock as d, normalizeStyle as r, normalizeClass as p, createBlock as c, createCommentVNode as f, renderSlot as m } from "vue";
-import { P as y } from "./Icon-DpJyuj7c.js";
+import { P as y } from "./Icon-D6qRB3pq.js";
 const x = t(a(l({ name: "PxBadge", __name: "Badge", props: { type: { default: "primary" }, size: { default: "default" }, outline: { type: Boolean }, dash: { type: Boolean }, color: {}, round: { type: Boolean }, icon: {} }, setup(a2) {
   const t2 = a2, l2 = i(), x2 = n((() => !l2.default)), z = n((() => "small" === t2.size ? "xs" : "sm")), g = n((() => {
     if (!t2.color) return {};

package/dist/es/{Breadcrumb-BtrwTVKW.js → Breadcrumb-BFzww8jd.js}

@@ -1,6 +1,6 @@
-import { _ as a, w as r } from "./utils-bsCscZfS.js";
+import { _ as a, w as r } from "./utils-BXICIEsD.js";
 import { defineComponent as e, useSlots as s, provide as o, createElementBlock as t, openBlock as d, createElementVNode as l, renderSlot as c, inject as i, normalizeClass as p, createBlock as b, resolveDynamicComponent as n, mergeProps as u, withModifiers as m, withCtx as _, createCommentVNode as f, unref as x, Fragment as v, createTextVNode as B, toDisplayString as k } from "vue";
-import { P as y } from "./Icon-DpJyuj7c.js";
+import { P as y } from "./Icon-D6qRB3pq.js";
 const I = Symbol("breadcrumbContext"), P = { class: "px-breadcrumb", "aria-label": "Breadcrumb" }, S = { class: "px-breadcrumb__list" }, h = a(e({ name: "PxBreadcrumb", __name: "Breadcrumb", props: { separator: { default: "/" } }, setup(a2) {
   const r2 = a2, e2 = s();
   return o(I, { separator: r2.separator, separatorSlot: e2.separator }), (a3, r3) => (d(), t("nav", P, [l("ol", S, [c(a3.$slots, "default", {}, void 0, true)])]));

package/dist/es/{Button-S_31-UWJ.js → Button-DbFviVWb.js}

@@ -1,7 +1,7 @@
-import { d as o, l as t, c as r, r as e, _ as l, w as a } from "./utils-bsCscZfS.js";
+import { d as o, l as t, c as r, r as e, _ as l, w as a } from "./utils-BXICIEsD.js";
 import { defineComponent as i, useSlots as s, inject as c, ref as n, computed as d, onBeforeUnmount as b, createBlock as p, openBlock as g, resolveDynamicComponent as u, unref as v, normalizeStyle as h, normalizeClass as y, withCtx as x, renderSlot as k, createCommentVNode as f, createVNode as B, provide as m, reactive as _, toRef as z, createElementBlock as w } from "vue";
-import { P as T } from "./Icon-DpJyuj7c.js";
-import { t as $ } from "./vendor-DXmGx29U.js";
+import { P as T } from "./Icon-D6qRB3pq.js";
+import { t as $ } from "./vendor-DrBJKLFW.js";
 const I = Symbol("BUTTON_GROUP_CTX_KEY"), P = { link: { "text-color": "color", "bg-color": "transparent", "border-color": "transparent", "shadow-color": "transparent", "hover-text-color": "dark", "hover-bg-color": "transparent", "hover-border-color": "transparent", "active-text-color": "dark", "active-bg-color": "transparent", "active-border-color": "transparent", "disabled-text-color": "light", "disabled-bg-color": "transparent", "disabled-border-color": "transparent" }, ghost: { "text-color": "color", "bg-color": "transparent", "border-color": "transparent", "shadow-color": "transparent", "hover-text-color": "dark", "hover-bg-color": "lighter", "hover-border-color": "transparent", "active-text-color": "dark", "active-bg-color": "light", "active-border-color": "transparent", "disabled-text-color": "light", "disabled-bg-color": "transparent", "disabled-border-color": "transparent" }, dash: { "text-color": "color", "bg-color": "lighter", "border-color": "color", "shadow-color": "transparent", "hover-text-color": "dark", "hover-bg-color": "light", "hover-border-color": "dark", "active-text-color": "dark", "active-bg-color": "color", "active-border-color": "dark", "disabled-text-color": "light", "disabled-bg-color": "lighter", "disabled-border-color": "light" }, plain: { "text-color": "color", "bg-color": "lighter", "border-color": "color", "hover-text-color": "contrast", "hover-bg-color": "color", "hover-border-color": "color", "active-text-color": "contrast", "active-bg-color": "dark", "active-border-color": "dark", "disabled-text-color": "light", "disabled-bg-color": "lighter", "disabled-border-color": "light" }, default: { "text-color": "contrast", "bg-color": "color", "border-color": "dark", "shadow-color": "dark", "hover-text-color": "contrast", "hover-bg-color": "light", "hover-border-color": "color", "active-text-color": "contrast", "active-bg-color": "dark", "active-border-color": "dark", "disabled-text-color": "contrast", "disabled-bg-color": "light", "disabled-border-color": "light" } }, j = l(i({ name: "PxButton", __name: "Button", props: { tag: { default: "button" }, type: {}, size: {}, nativeType: { default: "button" }, disabled: { type: Boolean }, loading: { type: Boolean }, icon: {}, circle: { type: Boolean }, plain: { type: Boolean }, round: { type: Boolean }, dash: { type: Boolean }, ghost: { type: Boolean }, link: { type: Boolean }, block: { type: Boolean }, responsive: { type: Boolean }, color: {}, loadingIcon: {}, ariaLabel: {}, autofocus: { type: Boolean }, useThrottle: { type: Boolean, default: true }, throttleDuration: { default: 500 } }, emits: ["click"], setup(l2, { expose: a2, emit: i2 }) {
   const m2 = /* @__PURE__ */ new Set(["button", "a", "div", "span", "router-link"]), _2 = l2;
   "string" != typeof _2.tag || m2.has(_2.tag) || o("PxButton", `Invalid tag "${_2.tag}". Allowed tags: ${[...m2].join(", ")}. Falling back to "button".`);

package/dist/es/{Card-DcW6nHYD.js → Card-ClRqKkc_.js}

@@ -1,4 +1,4 @@
-import { r as o, S as a, c as e, _ as s, w as r } from "./utils-bsCscZfS.js";
+import { r as o, S as a, c as e, _ as s, w as r } from "./utils-BXICIEsD.js";
 import { defineComponent as t, useSlots as d, computed as l, createElementBlock as c, openBlock as n, normalizeStyle as p, normalizeClass as i, createCommentVNode as h, createElementVNode as u, unref as v, renderSlot as y } from "vue";
 const x = { key: 0, class: "px-card__header" }, _ = { class: "px-card__body" }, f = { key: 1, class: "px-card__footer" }, w = r(s(t({ name: "PxCard", __name: "Card", props: { type: {}, color: {}, hoverable: { type: Boolean }, shadow: { type: [Boolean, String], default: "always" }, size: {}, outline: { type: Boolean }, dash: { type: Boolean }, ghost: { type: Boolean } }, setup(s2) {
   const r2 = { "text-color": "color", "bg-color": "transparent", "border-color": "transparent", "shadow-color": "transparent" }, t2 = s2, w2 = d(), g = l((() => {
@@ -10,7 +10,7 @@ const x = { key: 0, class: "px-card__header" }, _ = { class: "px-card__body" },
     return o(e(t2.color), "px-card", d2[s3]);
   }));
   return (o2, a2) => (n(), c("div", { class: i(["px-card", [g.value, { [`px-card--${o2.type}`]: o2.type, [`px-card--${o2.size}`]: o2.size, "is-hoverable": o2.hoverable, "is-outline": o2.outline, "is-dash": o2.dash, "is-ghost": o2.ghost }]]), style: p(b.value) }, [v(w2).header ? (n(), c("div", x, [y(o2.$slots, "header", {}, void 0, true)])) : h("", true), u("div", _, [y(o2.$slots, "default", {}, void 0, true)]), v(w2).footer ? (n(), c("div", f, [y(o2.$slots, "footer", {}, void 0, true)])) : h("", true)], 6));
-} }), [["__scopeId", "data-v-61d3ab66"]]));
+} }), [["__scopeId", "data-v-f3900769"]]));
 export {
   w as P
 };

package/dist/es/ChatBubble-DFEV_lVI.js

@@ -0,0 +1,9 @@
+import { r as a, c as t, _ as e, w as s } from "./utils-BXICIEsD.js";
+import { defineComponent as l, useSlots as o, computed as c, createElementBlock as r, openBlock as p, normalizeStyle as n, normalizeClass as b, createCommentVNode as _, createElementVNode as d, unref as m, renderSlot as u, toDisplayString as h } from "vue";
+const i = { "bubble-text-color": "contrast", "bubble-bg-color": "color", "bubble-border-color": "dark", "bubble-shadow-color": "dark" }, x = { key: 0, class: "px-chat__avatar" }, v = { class: "px-chat__content" }, y = { key: 0, class: "px-chat__header" }, f = { key: 0, class: "px-chat__name" }, k = { key: 1, class: "px-chat__time" }, $ = { class: "px-chat__bubble" }, w = { key: 1, class: "px-chat__footer" }, B = s(e(l({ name: "PxChatBubble", __name: "ChatBubble", props: { placement: { default: "start" }, type: {}, color: {}, name: {}, time: {}, status: {} }, setup(e2) {
+  const s2 = e2, l2 = o(), B2 = c((() => s2.color ? a(t(s2.color), "px-chat", i) : {}));
+  return (a2, t2) => (p(), r("div", { class: b(["px-chat", { [`px-chat--${a2.placement}`]: a2.placement, [`px-chat--${a2.type}`]: a2.type }]), style: n(B2.value) }, [m(l2).avatar ? (p(), r("div", x, [u(a2.$slots, "avatar", {}, void 0, true)])) : _("", true), d("div", v, [m(l2).header || a2.name || a2.time ? (p(), r("div", y, [u(a2.$slots, "header", {}, (() => [a2.name ? (p(), r("span", f, h(a2.name), 1)) : _("", true), a2.time ? (p(), r("span", k, h(a2.time), 1)) : _("", true)]), true)])) : _("", true), d("div", $, [t2[0] || (t2[0] = d("span", { class: "px-chat__tail" }, null, -1)), u(a2.$slots, "default", {}, void 0, true)]), m(l2).footer || a2.status ? (p(), r("div", w, [u(a2.$slots, "footer", {}, (() => [d("span", null, h(a2.status), 1)]), true)])) : _("", true)])], 6));
+} }), [["__scopeId", "data-v-c022026d"]]));
+export {
+  B as P
+};

package/dist/es/Checkbox-l86YI3Fr.js

@@ -0,0 +1,51 @@
+import { c as e, r as a, w as l } from "./utils-BXICIEsD.js";
+import { defineComponent as o, useSlots as c, inject as t, ref as u, computed as i, onMounted as n, watch as s, createElementBlock as d, openBlock as r, normalizeStyle as m, normalizeClass as p, createElementVNode as v, createCommentVNode as h, unref as x, renderSlot as b, createTextVNode as k, toDisplayString as f, provide as y } from "vue";
+import { u as _ } from "./hooks-pU4JmsO3.js";
+import { u as g } from "./Form-B_XDnSjK.js";
+const V = Symbol("checkboxGroupContext"), z = { "checked-color": "color", "checked-border-color": "dark" }, C = { class: "px-checkbox__input" }, B = ["aria-checked", "id", "name", "disabled", "checked"], $ = { key: 0, class: "px-checkbox__label" }, j = o({ name: "PxCheckbox", inheritAttrs: false, __name: "Checkbox", props: { modelValue: { type: Boolean, default: false }, value: { type: [String, Number, Boolean] }, disabled: { type: Boolean, default: false }, indeterminate: { type: Boolean, default: false }, size: {}, type: {}, color: {}, label: {}, name: {}, id: {} }, emits: ["update:modelValue", "change"], setup(l2, { expose: o2, emit: y2 }) {
+  const j2 = l2, G2 = y2, P2 = c(), E2 = t(V, void 0), I2 = !!E2, { formItem: S } = g(), w = u(), A = _().value, F = i((() => I2 ? E2.modelValue.value.includes(j2.value) : j2.modelValue)), N = i((() => {
+    if (E2 == null ? void 0 : E2.disabled.value) return true;
+    if (I2) {
+      const e2 = E2.modelValue.value, a2 = E2.min.value, l3 = E2.max.value;
+      if (F.value && void 0 !== a2 && e2.length <= a2) return true;
+      if (!F.value && void 0 !== l3 && e2.length >= l3) return true;
+    }
+    return j2.disabled;
+  })), O = i((() => j2.size ?? (E2 == null ? void 0 : E2.size.value))), R = i((() => j2.type ?? (E2 == null ? void 0 : E2.type.value))), q = i((() => j2.color ?? (E2 == null ? void 0 : E2.color.value))), D = i((() => {
+    const l3 = q.value;
+    if (!l3) return {};
+    const o3 = e(l3);
+    return a(o3, "px-checkbox", z);
+  }));
+  function H() {
+    if (!N.value) {
+      if (I2) {
+        const e2 = [...E2.modelValue.value], a2 = j2.value, l3 = e2.indexOf(a2);
+        l3 > -1 ? e2.splice(l3, 1) : e2.push(a2), E2.changeEvent(e2);
+      } else {
+        const e2 = !F.value;
+        G2("update:modelValue", e2), G2("change", e2);
+      }
+      I2 || (S == null ? void 0 : S.validate("change").catch(((e2) => {
+      })));
+    }
+  }
+  return n((() => {
+    w.value && (w.value.indeterminate = j2.indeterminate);
+  })), s((() => j2.indeterminate), ((e2) => {
+    w.value && (w.value.indeterminate = e2);
+  })), o2({ checked: F, focus: () => {
+    var _a;
+    (_a = w.value) == null ? void 0 : _a.focus();
+  } }), (e2, a2) => (r(), d("div", { class: p(["px-checkbox", { [`px-checkbox--${O.value}`]: O.value, [`px-checkbox--${R.value}`]: R.value, "is-disabled": N.value, "is-checked": F.value, "is-indeterminate": e2.indeterminate }]), style: m(D.value), onClick: H }, [v("span", C, [v("input", { ref_key: "inputRef", ref: w, class: "px-checkbox__original", type: "checkbox", "aria-checked": F.value, id: e2.id || x(A), name: e2.name, disabled: N.value, checked: F.value }, null, 8, B), a2[0] || (a2[0] = v("span", { class: "px-checkbox__inner" }, [v("span", { class: "px-checkbox__tick" })], -1))]), e2.label || x(P2).default ? (r(), d("span", $, [b(e2.$slots, "default", {}, (() => [k(f(e2.label), 1)]))])) : h("", true)], 6));
+} }), G = { class: "px-checkbox-group", role: "group" }, P = o({ name: "PxCheckboxGroup", __name: "CheckboxGroup", props: { modelValue: {}, disabled: { type: Boolean, default: false }, size: {}, type: {}, color: {}, min: {}, max: {} }, emits: ["update:modelValue", "change"], setup(e2, { emit: a2 }) {
+  const l2 = e2, o2 = a2, { formItem: c2 } = g();
+  return y(V, { modelValue: i((() => l2.modelValue)), disabled: i((() => l2.disabled)), size: i((() => l2.size)), type: i((() => l2.type)), color: i((() => l2.color)), min: i((() => l2.min)), max: i((() => l2.max)), changeEvent: (e3) => {
+    o2("update:modelValue", e3), o2("change", e3), c2 == null ? void 0 : c2.validate("change").catch(((e4) => {
+    }));
+  } }), (e3, a3) => (r(), d("div", G, [b(e3.$slots, "default")]));
+} }), E = l(j), I = l(P);
+export {
+  E as P,
+  I as a
+};

package/dist/es/{Collapse-DsS7M-m3.js → Collapse-B67v6RSE.js}

@@ -1,6 +1,6 @@
-import { c as e, r as o, _ as a, w as l } from "./utils-bsCscZfS.js";
+import { c as e, r as o, _ as a, w as l } from "./utils-BXICIEsD.js";
 import { defineComponent as t, ref as s, computed as n, watchEffect as c, watch as i, provide as r, createElementBlock as d, openBlock as p, normalizeStyle as u, normalizeClass as m, renderSlot as v, inject as h, createElementVNode as f, createVNode as g, unref as b, createBlock as x, createCommentVNode as _, createTextVNode as w, toDisplayString as y, Transition as C, mergeProps as I, toHandlers as P, withCtx as $, withDirectives as k, vShow as B } from "vue";
-import { P as O } from "./Icon-DpJyuj7c.js";
+import { P as O } from "./Icon-D6qRB3pq.js";
 const V = Symbol("collapseContext"), A = /* @__PURE__ */ new Set(["primary", "success", "warning", "danger", "info"]), j = { default: { "border-color": "color", "shadow-color": "dark", "active-bg-color": "light" }, ghost: { "border-color": "transparent", "shadow-color": "transparent", "active-bg-color": "transparent" } }, E = a(t({ name: "PxCollapse", __name: "Collapse", props: { modelValue: {}, accordion: { type: Boolean }, color: {}, ghost: { type: Boolean }, trigger: {}, iconPlacement: {} }, emits: ["update:modelValue", "change"], setup(a2, { emit: l2 }) {
   const t2 = a2, h2 = l2, f2 = s(t2.modelValue);
   t2.accordion && f2.value.length > 1 && (f2.value = [f2.value[0]]);
@@ -20,7 +20,7 @@ const V = Symbol("collapseContext"), A = /* @__PURE__ */ new Set(["primary", "su
     const a3 = o2.indexOf(e2);
     a3 > -1 ? o2.splice(a3, 1) : o2.push(e2), _2(o2);
   }, color: t2.color, ghost: t2.ghost, trigger: t2.trigger, iconPlacement: t2.iconPlacement }), (e2, o2) => (p(), d("div", { class: m(["px-collapse", { "is-ghost": e2.ghost, [`px-collapse--${e2.color}`]: g2.value }]), style: u(x2.value) }, [v(e2.$slots, "default", {}, void 0, true)], 6));
-} }), [["__scopeId", "data-v-dc792000"]]), F = (e2) => e2.style.height = "0px", L = (e2) => e2.style.height = `${e2.scrollHeight}px`, N = (e2) => e2.style.height = "", S = (e2) => e2.style.overflow = "hidden", H = (e2) => e2.style.overflow = "", q = { beforeEnter(e2) {
+} }), [["__scopeId", "data-v-7f3e3aa8"]]), F = (e2) => e2.style.height = "0px", L = (e2) => e2.style.height = `${e2.scrollHeight}px`, N = (e2) => e2.style.height = "", S = (e2) => e2.style.overflow = "hidden", H = (e2) => e2.style.overflow = "", q = { beforeEnter(e2) {
   F(e2), S(e2);
 }, enter: (e2) => L(e2), afterEnter(e2) {
   N(e2), H(e2);
@@ -46,7 +46,7 @@ const V = Symbol("collapseContext"), A = /* @__PURE__ */ new Set(["primary", "su
     var _a;
     return p(), d("div", { class: m(["px-collapse-item", { "is-disabled": e3.disabled }]) }, [f("div", { class: m(["px-collapse-item__header", { "is-disabled": e3.disabled, "is-active": l2.value, "is-hidden-arrow": false === e3.showArrow, "is-icon-start": "start" === ((_a = b(a2)) == null ? void 0 : _a.iconPlacement) }]), id: `item-header-${e3.name}`, role: "button", "aria-expanded": l2.value, "aria-controls": `item-content-${e3.name}`, tabindex: t2.value ? 0 : void 0, onClick: c2, onFocus: i2, onFocusout: r2 }, [f("span", D, [v(e3.$slots, "title", {}, (() => [w(y(e3.title), 1)]), true)]), false !== e3.showArrow ? (p(), x(O, { key: 0, icon: s2.value, class: m(["header-angle", { "is-toggle-icon": !!e3.icon }]) }, null, 8, ["icon", "class"])) : _("", true)], 42, z), g(C, I({ name: "slide" }, P(b(q))), { default: $((() => [k(f("div", G, [f("div", { class: "px-collapse-item__content", id: `item-content-${e3.name}` }, [v(e3.$slots, "default", {}, void 0, true)], 8, J)], 512), [[B, l2.value]])])), _: 3 }, 16)], 2);
   };
-} }), [["__scopeId", "data-v-47d8126b"]]), M = l(E), Q = l(K);
+} }), [["__scopeId", "data-v-f3406cbb"]]), M = l(E), Q = l(K);
 export {
   M as P,
   Q as a

package/dist/es/{ConfigProvider-BgIewHXP.js → ConfigProvider-BCoGbcS5.js}

@@ -1,6 +1,6 @@
-import { w as e } from "./utils-bsCscZfS.js";
+import { w as e } from "./utils-BXICIEsD.js";
 import { ref as o, getCurrentInstance as n, unref as t, watch as a, provide as l, inject as s, computed as r, defineComponent as c, renderSlot as u } from "vue";
-import { n as i, m as d, o as p } from "./vendor-DXmGx29U.js";
+import { n as i, m as d, o as p } from "./vendor-DrBJKLFW.js";
 const m = { name: "en", el: { select: { loading: "Loading", noMatch: "No matching data", noData: "No data", placeholder: "Select" }, dropdown: { toggleDropdown: "Toggle Dropdown" }, messagebox: { title: "Message", confirm: "OK", cancel: "Cancel", error: "Illegal input", close: "Close this dialog" }, popconfirm: { confirmButtonText: "Yes", cancelButtonText: "No" } } }, g = Symbol(), v = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
 function f(e2, ...o2) {
   return d(e2, ...o2, ((e3, o3, n2) => {

package/dist/es/Diff-BLiniLom.js

@@ -0,0 +1,64 @@
+import { a as e, b as n, p as t, w as o } from "./utils-BXICIEsD.js";
+import { defineComponent as i, ref as a, computed as r, watch as l, onBeforeUnmount as s, createElementBlock as u, openBlock as c, normalizeStyle as v, normalizeClass as d, createElementVNode as f, renderSlot as p, createCommentVNode as w, Fragment as m, withModifiers as h } from "vue";
+const g = /* @__PURE__ */ new Set(["primary", "success", "warning", "danger", "info"]), y = ["src"], x = { class: "px-diff__after" }, _ = ["src"], L = ["aria-valuenow"], E = o(i({ name: "PxDiff", __name: "Diff", props: { src: {}, pixelSize: { default: 8 }, grayscale: { type: Boolean, default: false }, palette: {}, background: { default: "#FFFFFF" }, initialPosition: { default: 50 }, width: {}, height: {}, color: {} }, emits: ["change", "rendered", "error"], setup(o2, { expose: i2, emit: E2 }) {
+  const k = o2, b = E2, P = a(), F = a(), R = a(), S = a(false), $ = a(false), z = a(e(k.initialPosition, 0, 100)), D = r((() => {
+    const e2 = {};
+    return null != k.width && (e2.width = n(k.width) ?? ""), null != k.height && (e2.height = n(k.height) ?? ""), e2;
+  })), X = r((() => {
+    const e2 = ["px-diff"];
+    return k.color && g.has(k.color) && e2.push(`px-diff--${k.color}`), e2;
+  })), B = r((() => ({ clipPath: `inset(0 ${100 - z.value}% 0 0)` }))), C = r((() => ({ left: `${z.value}%` })));
+  function A() {
+    const e2 = F.value, n2 = R.value;
+    e2 && n2 && S.value && (t(e2, n2, { pixelSize: k.pixelSize, grayscale: k.grayscale, palette: k.palette, background: k.background }), b("rendered"));
+  }
+  function K() {
+    S.value = true, A();
+  }
+  function M(e2) {
+    b("error", e2);
+  }
+  l((() => [k.pixelSize, k.grayscale, k.palette, k.background]), (() => {
+    S.value && A();
+  })), l((() => k.src), (() => {
+    S.value = false;
+  }));
+  let j = null;
+  function T(n2) {
+    var _a;
+    const t2 = j ?? ((_a = P.value) == null ? void 0 : _a.getBoundingClientRect());
+    if (!t2) return;
+    const o3 = n2 - t2.left, i3 = e(o3 / t2.width * 100, 0, 100);
+    z.value = Math.round(i3), b("change", z.value);
+  }
+  function q(e2) {
+    var _a;
+    $.value = true, j = ((_a = P.value) == null ? void 0 : _a.getBoundingClientRect()) ?? null, T("touches" in e2 ? e2.touches[0].clientX : e2.clientX), window.addEventListener("mousemove", G), window.addEventListener("mouseup", H), window.addEventListener("touchmove", G), window.addEventListener("touchend", H);
+  }
+  function G(e2) {
+    $.value && T("touches" in e2 ? e2.touches[0].clientX : e2.clientX);
+  }
+  function H() {
+    $.value = false, j = null, window.removeEventListener("mousemove", G), window.removeEventListener("mouseup", H), window.removeEventListener("touchmove", G), window.removeEventListener("touchend", H);
+  }
+  function I(n2) {
+    const t2 = n2.shiftKey ? 10 : 1;
+    let o3 = z.value;
+    if ("ArrowLeft" === n2.key) o3 = e(z.value - t2, 0, 100), n2.preventDefault();
+    else {
+      if ("ArrowRight" !== n2.key) return;
+      o3 = e(z.value + t2, 0, 100), n2.preventDefault();
+    }
+    z.value = o3, b("change", o3);
+  }
+  return i2({ setPosition: function(n2) {
+    z.value = e(n2, 0, 100);
+  }, getPosition: function() {
+    return z.value;
+  } }), s((() => {
+    window.removeEventListener("mousemove", G), window.removeEventListener("mouseup", H), window.removeEventListener("touchmove", G), window.removeEventListener("touchend", H);
+  })), (e2, n2) => (c(), u("div", { ref_key: "containerRef", ref: P, class: d(X.value), style: v(D.value) }, [f("div", { class: "px-diff__before", style: v(B.value) }, [p(e2.$slots, "before", {}, (() => [e2.src ? (c(), u("img", { key: 0, src: e2.src, class: "px-diff__img" }, null, 8, y)) : w("", true)]))], 4), f("div", x, [p(e2.$slots, "after", {}, (() => [e2.src ? (c(), u(m, { key: 0 }, [f("canvas", { ref_key: "canvasRef", ref: F, class: "px-diff__canvas" }, null, 512), f("img", { ref_key: "originRef", ref: R, src: e2.src, style: { display: "none" }, crossorigin: "anonymous", onLoad: K, onError: M }, null, 40, _)], 64)) : w("", true)]))]), f("div", { class: "px-diff__handle", style: v(C.value), role: "separator", tabindex: "0", "aria-valuenow": z.value, "aria-valuemin": "0", "aria-valuemax": "100", "aria-label": "Comparison slider", onKeydown: I }, [f("div", { class: "px-diff__handle-grip", onMousedown: h(q, ["prevent"]), onTouchstart: h(q, ["prevent"]) }, null, 32)], 44, L)], 6));
+} }));
+export {
+  E as P
+};

package/dist/es/Divider-DDSOHv8G.js

@@ -0,0 +1,9 @@
+import { r as e, c as t, w as o } from "./utils-BXICIEsD.js";
+import { defineComponent as i, useSlots as r, computed as n, createElementBlock as a, openBlock as d, normalizeStyle as l, normalizeClass as s, createCommentVNode as c, renderSlot as p, createTextVNode as v, toDisplayString as u } from "vue";
+const x = ["aria-orientation"], y = { key: 0, class: "px-divider__text" }, f = o(i({ name: "PxDivider", __name: "Divider", props: { direction: { default: "horizontal" }, contentPosition: { default: "center" }, type: {}, color: {}, borderStyle: { default: "solid" }, content: {} }, setup(o2) {
+  const i2 = o2, f2 = r(), m = { "line-color": "color" }, P = n((() => i2.color ? e(t(i2.color), "px-divider", m) : {})), $ = n((() => !("horizontal" !== i2.direction || !f2.default && !i2.content)));
+  return (e2, t2) => (d(), a("div", { class: s(["px-divider", { "is-vertical": "vertical" === e2.direction, [`px-divider--${e2.contentPosition}`]: $.value, [`px-divider--${e2.type}`]: e2.type, [`px-divider--${e2.borderStyle}`]: "solid" !== e2.borderStyle }]), style: l(P.value), role: "separator", "aria-orientation": e2.direction }, [$.value ? (d(), a("span", y, [p(e2.$slots, "default", {}, (() => [v(u(e2.content), 1)]))])) : c("", true)], 14, x));
+} }));
+export {
+  f as P
+};

package/dist/es/Drawer-apeXw6EO.js

@@ -0,0 +1,40 @@
+import { _ as e, w as l } from "./utils-BXICIEsD.js";
+import { defineComponent as a, ref as o, computed as t, watch as d, onUnmounted as s, createElementBlock as r, openBlock as i, unref as n, normalizeClass as u, createElementVNode as c, createBlock as p, renderSlot as v, Teleport as m, createCommentVNode as y, createVNode as f, normalizeStyle as w, Transition as x, withCtx as _, toDisplayString as b } from "vue";
+import { u as k, a as O, b as $ } from "./hooks-pU4JmsO3.js";
+const h = ["id"], V = { class: "px-drawer__content" }, B = ["aria-labelledby"], z = { key: 0, class: "px-drawer__header" }, I = ["id"], g = { class: "px-drawer__body" }, C = l(e(a({ name: "PxDrawer", __name: "Drawer", props: { modelValue: { type: Boolean }, placement: { default: "left" }, size: { default: "300px" }, showOverlay: { type: Boolean, default: true }, lockScroll: { type: Boolean, default: true }, closeOnClickOverlay: { type: Boolean, default: true }, closeOnEsc: { type: Boolean, default: true }, title: {} }, emits: ["update:modelValue", "open", "close"], setup(e2, { expose: l2, emit: a2 }) {
+  const C2 = e2, E = a2, j = k("px-drawer"), { nextZIndex: D } = O(), P = o(0), S = o(C2.modelValue), Z = t((() => ({ width: C2.size, zIndex: P.value })));
+  function q(e3) {
+    C2.lockScroll && (document.body.style.overflow = e3 ? "hidden" : "");
+  }
+  function A() {
+    P.value = D(), S.value = true, E("open"), q(true);
+  }
+  function F() {
+    S.value = false, q(false);
+  }
+  function G() {
+    A(), E("update:modelValue", true);
+  }
+  function H() {
+    F(), E("update:modelValue", false), E("close");
+  }
+  function J() {
+    C2.closeOnClickOverlay && H();
+  }
+  return d((() => C2.modelValue), ((e3) => {
+    e3 && !S.value ? A() : e3 && S.value ? q(true) : !e3 && S.value && F();
+  }), { immediate: true }), $(document, "keydown", ((e3) => {
+    C2.closeOnEsc && S.value && "Escape" === e3.key && H();
+  })), s((() => {
+    S.value && q(false);
+  })), l2({ open: () => {
+    S.value || G();
+  }, close: () => {
+    S.value && H();
+  }, toggle: () => {
+    S.value ? H() : G();
+  } }), (e3, l3) => (i(), r("div", { class: u(["px-drawer", [`px-drawer--${e3.placement}`]]), id: n(j) }, [c("div", V, [v(e3.$slots, "default", {}, void 0, true)]), (i(), p(m, { to: "body" }, [e3.showOverlay && S.value ? (i(), r("div", { key: 0, class: "px-drawer-overlay", style: w({ zIndex: P.value - 1 }), onClick: J }, null, 4)) : y("", true), f(x, { name: `px-drawer-slide-${e3.placement}` }, { default: _((() => [S.value ? (i(), r("div", { key: 0, class: u(["px-drawer__sidebar", [`px-drawer__sidebar--${e3.placement}`]]), style: w(Z.value), role: "dialog", "aria-labelledby": e3.title ? `${n(j)}-title` : void 0 }, [e3.title ? (i(), r("div", z, [c("span", { id: `${n(j)}-title`, class: "px-drawer__title" }, b(e3.title), 9, I)])) : y("", true), c("div", g, [v(e3.$slots, "sidebar", {}, void 0, true)])], 14, B)) : y("", true)])), _: 3 }, 8, ["name"])]))], 10, h));
+} }), [["__scopeId", "data-v-647267d6"]]));
+export {
+  C as P
+};

package/dist/es/Dropdown-By9qIErf.js

@@ -0,0 +1,104 @@
+import { w as e } from "./utils-BXICIEsD.js";
+import { defineComponent as o, inject as t, computed as n, createElementBlock as i, openBlock as a, Fragment as l, createCommentVNode as s, createElementVNode as r, withKeys as d, normalizeClass as p, withModifiers as u, createBlock as m, renderSlot as c, createTextVNode as f, toDisplayString as v, watch as h, nextTick as y, onBeforeUnmount as w, useSlots as k, ref as b, provide as g, createVNode as x, mergeProps as _, withCtx as B, unref as C, normalizeStyle as O, renderList as D } from "vue";
+import { u as z, c as H, d as R } from "./hooks-pU4JmsO3.js";
+import { P as $, a as j } from "./Button-DbFviVWb.js";
+import { T as A } from "./Tooltip-CdPqNYdn.js";
+import { P as E } from "./Icon-D6qRB3pq.js";
+import { a as I, i as T } from "./vendor-DrBJKLFW.js";
+const P = Symbol("dropdownContext"), L = { key: 0, role: "separator", class: "divided-placeholder" }, K = ["id", "onKeydown"], S = o({ name: "PxDropdownItem", __name: "DropdownItem", props: { command: { default: z().value }, label: {}, disabled: { type: Boolean, default: false }, divided: { type: Boolean, default: false }, icon: {} }, setup(e2) {
+  const o2 = e2, h2 = t(P), y2 = n((() => h2 == null ? void 0 : h2.size.value));
+  function w2() {
+    o2.disabled || (h2 == null ? void 0 : h2.handleItemClick(o2));
+  }
+  return (e3, o3) => (a(), i(l, null, [e3.divided ? (a(), i("li", L)) : s("", true), r("li", { role: "menuitem", tabindex: "-1", id: `dropdown-item-${e3.command}`, class: p({ "px-dropdown__item": true, ["px-dropdown__item--" + y2.value]: y2.value, "is-disabled": e3.disabled, "is-divided": e3.divided }), onClick: w2, onKeydown: [d(u(w2, ["prevent"]), ["enter"]), d(u(w2, ["prevent"]), ["space"])] }, [e3.icon ? (a(), m(E, { key: 0, icon: e3.icon, class: "px-dropdown__item-icon" }, null, 8, ["icon"])) : s("", true), c(e3.$slots, "default", {}, (() => [f(v(e3.label), 1)]))], 42, K)], 64));
+} });
+function q(e2, o2) {
+  var _a;
+  (_a = e2[o2]) == null ? void 0 : _a.focus();
+}
+const U = ["aria-expanded"], V = e(o({ name: "PxDropdown", inheritAttrs: false, __name: "Dropdown", props: { type: {}, size: {}, items: { default: () => [] }, hideOnClick: { type: Boolean, default: true }, splitButton: { type: Boolean }, maxHeight: {}, hoverColor: {}, content: {}, trigger: {}, placement: {}, manual: { type: Boolean }, disabled: { type: Boolean }, popperOptions: {}, transition: {}, showTimeout: {}, hideTimeout: {}, virtualRef: {}, virtualTriggering: { type: Boolean }, effect: {}, enterable: { type: Boolean }, maxWidth: {}, showArrow: { type: Boolean } }, emits: ["visible-change", "command", "click"], setup(e2, { expose: o2, emit: t2 }) {
+  const s2 = e2, d2 = t2;
+  k();
+  const u2 = b(), f2 = b(), v2 = b(), z2 = b(false), E2 = n((() => {
+    var _a;
+    return { ...I(s2, ["items", "hideOnClick", "size", "type", "splitButton", "maxHeight", "hoverColor"]), popperOptions: { ...s2.popperOptions, modifiers: [{ name: "offset", options: { offset: [0, s2.showArrow ? 9 : 0] } }, ...((_a = s2.popperOptions) == null ? void 0 : _a.modifiers) ?? []] } };
+  })), L2 = n((() => {
+    const e3 = {};
+    if (s2.maxHeight) {
+      const o3 = "number" == typeof s2.maxHeight ? `${s2.maxHeight}px` : s2.maxHeight;
+      e3.maxHeight = o3, e3.overflowY = "auto";
+    }
+    return s2.hoverColor && (e3["--px-dropdown-menuItem-hover-fill"] = s2.hoverColor), Object.keys(e3).length ? e3 : void 0;
+  }));
+  function K2() {
+    var _a;
+    (_a = u2.value) == null ? void 0 : _a.toggle();
+  }
+  return H(f2, (() => {
+    var _a;
+    s2.splitButton && ((_a = u2.value) == null ? void 0 : _a.hide());
+  })), (function(e3) {
+    const { menuRef: o3, triggerRef: t3, isOpen: n2, close: i2 } = e3;
+    function a2(e4) {
+      const n3 = o3.value;
+      if (!n3) return;
+      const a3 = (function(e5) {
+        return Array.from(e5.querySelectorAll(".px-dropdown__item:not(.is-disabled)"));
+      })(n3);
+      if (!a3.length) return;
+      const l2 = (function(e5) {
+        return e5.indexOf(document.activeElement);
+      })(a3);
+      switch (e4.key) {
+        case "ArrowDown":
+          e4.preventDefault(), q(a3, -1 === l2 ? 0 : l2 < a3.length - 1 ? l2 + 1 : 0);
+          break;
+        case "ArrowUp":
+          e4.preventDefault(), q(a3, -1 === l2 ? a3.length - 1 : l2 > 0 ? l2 - 1 : a3.length - 1);
+          break;
+        case "Home":
+          e4.preventDefault(), q(a3, 0);
+          break;
+        case "End":
+          e4.preventDefault(), q(a3, a3.length - 1);
+          break;
+        case "Escape":
+          e4.preventDefault(), i2(), y((() => {
+            var _a;
+            return (_a = t3.value) == null ? void 0 : _a.focus();
+          }));
+          break;
+        case "Tab":
+          i2();
+      }
+    }
+    h(n2, ((e4) => {
+      var _a;
+      e4 ? y((() => {
+        const e5 = o3.value;
+        e5 && (e5.focus(), e5.addEventListener("keydown", a2));
+      })) : (_a = o3.value) == null ? void 0 : _a.removeEventListener("keydown", a2);
+    })), w((() => {
+      var _a;
+      (_a = o3.value) == null ? void 0 : _a.removeEventListener("keydown", a2);
+    }));
+  })({ menuRef: v2, triggerRef: f2, isOpen: z2, close: () => {
+    var _a;
+    return (_a = u2.value) == null ? void 0 : _a.hide();
+  } }), R(), g(P, { handleItemClick: function(e3) {
+    var _a;
+    s2.hideOnClick && ((_a = u2.value) == null ? void 0 : _a.hide()), !T(e3.command) && d2("command", e3.command);
+  }, size: n((() => s2.size)) }), o2({ open: () => {
+    var _a;
+    return (_a = u2.value) == null ? void 0 : _a.show();
+  }, close: () => {
+    var _a;
+    return (_a = u2.value) == null ? void 0 : _a.hide();
+  } }), (e3, o3) => (a(), i("div", { ref_key: "dropdownRef", ref: f2, class: p(["px-dropdown", { "is-disabled": s2.disabled }]), "aria-haspopup": "true", "aria-expanded": z2.value, tabindex: "0" }, [x(A, _({ ref_key: "tooltipRef", ref: u2 }, E2.value, { manual: e3.splitButton, onVisibleChange: o3[1] || (o3[1] = (o4) => {
+    z2.value = o4, e3.$emit("visible-change", o4);
+  }) }), { content: B((() => [r("div", { ref_key: "menuRef", ref: v2, class: "px-dropdown__menu", role: "menu", tabindex: "-1", style: O(L2.value) }, [c(e3.$slots, "dropdown", {}, (() => [(a(true), i(l, null, D(e3.items, ((e4) => (a(), m(S, _({ key: e4.command, ref_for: true }, e4), null, 16)))), 128))]))], 4)])), default: B((() => [e3.splitButton ? (a(), m(C($), { key: 0, type: e3.type, size: e3.size, disabled: e3.disabled }, { default: B((() => [x(C(j), { onClick: o3[0] || (o3[0] = (o4) => e3.$emit("click", o4)) }, { default: B((() => [c(e3.$slots, "default")])), _: 3 }), x(C(j), { icon: "chevron-down", onClick: K2 })])), _: 3 }, 8, ["type", "size", "disabled"])) : c(e3.$slots, "default", { key: 1 })])), _: 3 }, 16, ["manual"])], 10, U));
+} })), W = e(S);
+export {
+  V as P,
+  W as a
+};

package/dist/es/{FileInput-BQ59woas.js → FileInput-CZ5jTfB_.js}

@@ -1,7 +1,7 @@
-import { c as e, r as l, w as o } from "./utils-bsCscZfS.js";
+import { c as e, r as l, w as o } from "./utils-BXICIEsD.js";
 import { defineComponent as a, shallowRef as t, ref as r, computed as i, createElementBlock as n, openBlock as s, normalizeStyle as c, normalizeClass as u, createElementVNode as p, createBlock as d, createCommentVNode as f, renderSlot as m, createTextVNode as h, toDisplayString as v, withModifiers as g } from "vue";
-import { u as b } from "./Form-j90EzLXU.js";
-import { P as x } from "./Icon-DpJyuj7c.js";
+import { u as b } from "./Form-B_XDnSjK.js";
+import { P as x } from "./Icon-D6qRB3pq.js";
 const _ = /* @__PURE__ */ new Set(["primary", "success", "warning", "danger", "info"]), k = { default: { "border-color": "color", "hover-border-color": "dark", "shadow-color": "dark" }, ghost: { "border-color": "transparent", "hover-border-color": "color", "shadow-color": "transparent", "hover-shadow-color": "dark" } }, y = { class: "px-file-input__wrapper" }, w = ["disabled", "accept", "multiple", "form"], B = { class: "px-file-input__name" }, V = o(a({ name: "PxFileInput", inheritAttrs: false, __name: "FileInput", props: { modelValue: {}, id: {}, size: {}, color: {}, ghost: { type: Boolean }, disabled: { type: Boolean }, accept: {}, multiple: { type: Boolean }, placeholder: { default: "No file chosen" }, clearable: { type: Boolean }, form: {} }, emits: ["update:modelValue", "change", "clear"], setup(o2, { expose: a2, emit: V2 }) {
   const I = o2, $ = V2, j = t(), { formItem: z } = b(), C = r(null), F = i((() => _.has(I.color ?? ""))), P = i((() => !!I.color && !F.value)), A = i((() => {
     if (!P.value) return {};