@itguy614/clean-ui 0.9.0 → 1.0.1

package/dist/components/CuiIcon.vue.js

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

package/dist/components/CuiIcon.vue2.js

@@ -0,0 +1,72 @@
+import { defineComponent as w, computed as d, ref as C, onMounted as y, watch as g, withDirectives as z, openBlock as r, createElementBlock as m, normalizeStyle as h, normalizeClass as k, createBlock as I, resolveDynamicComponent as S, unref as x, vShow as B } from "vue";
+import { resolveColor as M } from "../utils/color.js";
+const D = /* @__PURE__ */ w({
+  __name: "CuiIcon",
+  props: {
+    name: {},
+    weight: { default: "regular" },
+    size: { default: "md" },
+    color: { default: "currentColor" },
+    duotoneColor: {},
+    duotoneOpacity: { default: 0.2 },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(n) {
+    const o = n, p = {
+      xs: "0.875rem",
+      // 14px
+      sm: "1rem",
+      // 16px
+      md: "1.25rem",
+      // 20px
+      lg: "1.5rem",
+      // 24px
+      xl: "2rem"
+      // 32px
+    }, a = d(() => p[o.size] ?? o.size);
+    function f(e) {
+      return "Ph" + e.split("-").map((t) => t.charAt(0).toUpperCase() + t.slice(1)).join("");
+    }
+    const i = /* @__PURE__ */ new Map(), l = C(null);
+    async function s(e) {
+      const t = f(e);
+      if (i.has(t)) {
+        l.value = i.get(t);
+        return;
+      }
+      try {
+        const u = await import("@phosphor-icons/vue");
+        let c = u[t];
+        c || (console.warn(`[CuiIcon] Icon "${e}" (${t}) not found in @phosphor-icons/vue`), c = u.PhQuestion), i.set(t, c), o.name === e && (l.value = c);
+      } catch {
+        console.warn(`[CuiIcon] Failed to load icon "${e}"`);
+      }
+    }
+    y(() => s(o.name)), g(() => o.name, (e) => s(e));
+    const v = d(() => {
+      const e = {};
+      return o.weight === "duotone" && (o.duotoneColor && (e["--_duotone-color"] = o.duotoneColor), e["--_duotone-opacity"] = String(o.duotoneOpacity)), e;
+    });
+    return (e, t) => z((r(), m("span", {
+      class: k(["cui-icon", { "cui-icon--duotone": n.weight === "duotone" }]),
+      style: h(v.value)
+    }, [
+      l.value ? (r(), I(S(l.value), {
+        key: 0,
+        weight: n.weight,
+        size: a.value,
+        color: x(M)(n.color)
+      }, null, 8, ["weight", "size", "color"])) : (r(), m("span", {
+        key: 1,
+        class: "cui-icon__placeholder",
+        style: h({ width: a.value, height: a.value }),
+        "aria-hidden": "true"
+      }, null, 4))
+    ], 6)), [
+      [B, !n.hidden]
+    ]);
+  }
+});
+export {
+  D as default
+};

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

@@ -1,8 +1,8 @@
 import type { HideableProps, ColorableProps, SizeableProps, DisableableProps, CuiRounded } from "../types/common";
-export type InputType = "text" | "password" | "email" | "url" | "tel" | "search";
+export type InputType = "text" | "password" | "email" | "url" | "tel" | "search" | "number" | "range";
 export interface CuiInputProps extends HideableProps, ColorableProps, SizeableProps, DisableableProps {
-    /** v-model binding */
-    modelValue?: string;
+    /** v-model binding. `string | number` so `type="number"` / `v-model.number` bind without a cast. */
+    modelValue?: string | number;
     /** Input type */
     type?: InputType;
     /** Placeholder text */
@@ -36,10 +36,10 @@ declare const __VLS_component: import("vue").DefineComponent<CuiInputProps, {
     blur: typeof blur;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     clear: () => any;
-    "update:modelValue": (value: string) => any;
+    "update:modelValue": (value: string | number) => any;
 }, string, import("vue").PublicProps, Readonly<CuiInputProps> & Readonly<{
     onClear?: (() => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
     error: boolean;
     readonly: boolean;
@@ -49,7 +49,7 @@ declare const __VLS_component: import("vue").DefineComponent<CuiInputProps, {
     type: InputType;
     rounded: CuiRounded;
     disabled: boolean;
-    modelValue: string;
+    modelValue: string | number;
     clearable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiInput.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiInput.vue"],"names":[],"mappings":"AAmXA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAalH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEjF,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACnG,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AA8CD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;AAoND,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACrF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACpD;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAgCxD,QAAA,MAAM,eAAe;;;;;;;;;;;WApTX,OAAO;cAIJ,OAAO;;;;UAVX,SAAS;aAYN,UAAU;;gBAdP,MAAM;eAMP,OAAO;6EA+TnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CuiInput.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiInput.vue"],"names":[],"mappings":"AAmYA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAalH,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,UAAU,GACV,OAAO,GACP,KAAK,GACL,KAAK,GACL,QAAQ,GACR,QAAQ,GACR,OAAO,CAAC;AAEZ,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACnG,oGAAoG;IACpG,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAsDD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;AAoND,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACrF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACpD;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAgCxD,QAAA,MAAM,eAAe;;;;;;;;;;;WA5TX,OAAO;cAIJ,OAAO;;;;UAVX,SAAS;aAYN,UAAU;;gBAdP,MAAM,GAAG,MAAM;eAMhB,OAAO;6EAuUnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/CuiInput.vue.js

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

package/dist/components/CuiInput.vue2.js

@@ -0,0 +1,150 @@
+import { defineComponent as S, ref as _, computed as n, useTemplateRef as E, withDirectives as I, openBlock as u, createElementBlock as o, createElementVNode as m, normalizeStyle as M, normalizeClass as N, renderSlot as d, createCommentVNode as a, unref as v, createVNode as P, createBlock as h, toDisplayString as R, vShow as T } from "vue";
+import b from "./CuiIcon.vue.js";
+import { INPUT_SIZE_SCALE as D } from "../utils/sizing.js";
+import { useMessages as A } from "../composables/useMessages.js";
+const L = { class: "cui-input-wrapper" }, U = {
+  key: 0,
+  class: "cui-input__prefix-button"
+}, Z = { class: "cui-input__inner" }, j = {
+  key: 0,
+  class: "cui-input__prefix"
+}, q = ["type", "value", "placeholder", "disabled", "readonly", "aria-invalid"], F = ["aria-label"], G = ["aria-label"], H = {
+  key: 3,
+  class: "cui-input__suffix"
+}, J = {
+  key: 1,
+  class: "cui-input__suffix-button"
+}, K = {
+  key: 0,
+  class: "cui-input__error"
+}, ee = /* @__PURE__ */ S({
+  __name: "CuiInput",
+  props: {
+    modelValue: { default: "" },
+    type: { default: "text" },
+    placeholder: {},
+    clearable: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    errorMessage: {},
+    readonly: { type: Boolean, default: !1 },
+    rounded: { default: "md" },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "clear"],
+  setup(t, { expose: x, emit: g }) {
+    const k = {
+      none: "0",
+      sm: "0.25rem",
+      md: "var(--cui-button-radius, 0.375rem)",
+      lg: "0.5rem",
+      full: "9999px"
+    }, i = t, c = g, l = _(!1), y = n(() => i.type === "password"), $ = n(() => y.value && l.value ? "text" : i.type), w = n(
+      () => i.clearable && i.modelValue !== "" && i.modelValue != null && !i.disabled && !i.readonly
+    );
+    function V() {
+      var e;
+      c("update:modelValue", ""), c("clear"), (e = r.value) == null || e.focus();
+    }
+    function z(e) {
+      c("update:modelValue", e.target.value);
+    }
+    const r = E("inputEl");
+    function C(e) {
+      var s;
+      (s = r.value) == null || s.focus(e);
+    }
+    function B() {
+      var e;
+      (e = r.value) == null || e.blur();
+    }
+    x({ el: r, focus: C, blur: B });
+    const f = n(() => D[i.size]), p = A();
+    return (e, s) => I((u(), o("div", L, [
+      m("div", {
+        class: N(["cui-input", {
+          "cui-input--error": t.error,
+          "cui-input--disabled": t.disabled,
+          "cui-input--focused": !1,
+          "cui-input--has-prefix-button": e.$slots["prefix-button"],
+          "cui-input--has-suffix-button": e.$slots["suffix-button"]
+        }]),
+        style: M({
+          borderRadius: k[t.rounded],
+          "--_input-height": f.value.height,
+          "--_input-font-size": f.value.fontSize,
+          "--_input-px": f.value.px,
+          "--_input-color": `var(--cui-${t.color})`,
+          "--_input-focus-ring": `var(--cui-${t.color}-focus-ring)`,
+          "--_input-border": t.error ? "var(--cui-error)" : "var(--cui-border-strong)",
+          "--_input-focus-border": t.error ? "var(--cui-error)" : `var(--cui-${t.color})`
+        })
+      }, [
+        e.$slots["prefix-button"] ? (u(), o("div", U, [
+          d(e.$slots, "prefix-button", {}, void 0, !0)
+        ])) : a("", !0),
+        m("div", Z, [
+          e.$slots.prefix ? (u(), o("span", j, [
+            d(e.$slots, "prefix", {}, void 0, !0)
+          ])) : a("", !0),
+          m("input", {
+            ref: "inputEl",
+            type: $.value,
+            value: t.modelValue,
+            placeholder: t.placeholder,
+            disabled: t.disabled,
+            readonly: t.readonly,
+            "aria-invalid": t.error || void 0,
+            class: "cui-input__native",
+            onInput: z
+          }, null, 40, q),
+          w.value ? (u(), o("button", {
+            key: 1,
+            type: "button",
+            class: "cui-input__clear",
+            tabindex: "-1",
+            "aria-label": v(p).input.clear,
+            onClick: V
+          }, [
+            P(b, {
+              name: "x",
+              size: "0.75rem"
+            })
+          ], 8, F)) : a("", !0),
+          y.value ? (u(), o("button", {
+            key: 2,
+            type: "button",
+            class: "cui-input__password-toggle",
+            tabindex: "-1",
+            "aria-label": l.value ? v(p).input.hidePassword : v(p).input.showPassword,
+            onClick: s[0] || (s[0] = (O) => l.value = !l.value)
+          }, [
+            l.value ? (u(), h(b, {
+              key: 1,
+              name: "eye-slash",
+              size: "1rem"
+            })) : (u(), h(b, {
+              key: 0,
+              name: "eye",
+              size: "1rem"
+            }))
+          ], 8, G)) : a("", !0),
+          e.$slots.suffix ? (u(), o("span", H, [
+            d(e.$slots, "suffix", {}, void 0, !0)
+          ])) : a("", !0)
+        ]),
+        e.$slots["suffix-button"] ? (u(), o("div", J, [
+          d(e.$slots, "suffix-button", {}, void 0, !0)
+        ])) : a("", !0)
+      ], 6),
+      t.error && t.errorMessage ? (u(), o("div", K, R(t.errorMessage), 1)) : a("", !0)
+    ], 512)), [
+      [T, !t.hidden]
+    ]);
+  }
+});
+export {
+  ee as default
+};

package/dist/components/CuiInputStepper.vue.js

@@ -0,0 +1,189 @@
+import { defineComponent as N, computed as u, useTemplateRef as y, withDirectives as A, openBlock as s, createElementBlock as c, normalizeStyle as r, toDisplayString as F, createCommentVNode as H, createVNode as a, withCtx as m, createElementVNode as W, vShow as T } from "vue";
+import { clampSize as P } from "../utils/sizing.js";
+import v from "./CuiButton.vue.js";
+import b from "./CuiIcon.vue.js";
+const L = ["value", "disabled"], O = ["value", "disabled"], G = /* @__PURE__ */ N({
+  __name: "CuiInputStepper",
+  props: {
+    modelValue: { default: 0 },
+    min: {},
+    max: {},
+    step: { default: 1 },
+    orientation: { default: "horizontal" },
+    label: {},
+    pad: {},
+    wrap: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { expose: R, emit: B }) {
+    const e = t, f = B, h = u(() => e.wrap || e.min === void 0 || e.modelValue - e.step >= e.min), p = u(() => e.wrap || e.max === void 0 || e.modelValue + e.step <= e.max);
+    function S() {
+      if (e.disabled || !h.value) return;
+      let i = Math.round((e.modelValue - e.step) * 1e10) / 1e10;
+      if (e.wrap && e.min !== void 0 && e.max !== void 0 && i < e.min) {
+        const n = e.max - e.min + 1;
+        i = e.min + Math.floor((n - 1) / e.step) * e.step;
+      } else e.min !== void 0 && (i = Math.max(i, e.min));
+      f("update:modelValue", i);
+    }
+    function V() {
+      if (e.disabled || !p.value) return;
+      let i = Math.round((e.modelValue + e.step) * 1e10) / 1e10;
+      e.wrap && e.min !== void 0 && e.max !== void 0 && i > e.max ? i = e.min : e.max !== void 0 && (i = Math.min(i, e.max)), f("update:modelValue", i);
+    }
+    const w = u(() => e.pad && e.pad > 0 ? String(e.modelValue).padStart(e.pad, "0") : String(e.modelValue)), k = u(() => e.orientation === "vertical");
+    function C(i) {
+      const n = i.target.value, l = parseFloat(n);
+      if (isNaN(l)) return;
+      let d = l;
+      e.min !== void 0 && (d = Math.max(d, e.min)), e.max !== void 0 && (d = Math.min(d, e.max)), f("update:modelValue", d);
+    }
+    const E = ["sm", "md", "lg"], I = {
+      sm: { height: "1.75rem", inputWidth: "2.5rem", font: "0.8125rem", buttonSize: "xs", iconSize: "0.75rem" },
+      md: { height: "2.25rem", inputWidth: "3rem", font: "0.875rem", buttonSize: "sm", iconSize: "0.875rem" },
+      lg: { height: "2.75rem", inputWidth: "3.5rem", font: "1rem", buttonSize: "md", iconSize: "1rem" }
+    }, o = u(() => I[P(e.size, E)]), g = y("rootEl"), z = y("inputH"), x = y("inputV");
+    function M(i) {
+      var l;
+      const n = z.value ?? x.value;
+      n ? n.focus(i) : (l = g.value) == null || l.focus(i);
+    }
+    function D() {
+      var i;
+      (i = z.value ?? x.value) == null || i.blur();
+    }
+    return R({ el: g, focus: M, blur: D }), (i, n) => A((s(), c("div", {
+      ref_key: "rootEl",
+      ref: g
+    }, [
+      t.label ? (s(), c("label", {
+        key: 0,
+        style: r({
+          display: "block",
+          marginBottom: "calc(0.25rem * var(--cui-density-scale, 1))",
+          fontWeight: "500",
+          color: "var(--cui-text-secondary)",
+          fontSize: o.value.font,
+          textAlign: k.value ? "center" : void 0
+        })
+      }, F(t.label), 5)) : H("", !0),
+      k.value ? (s(), c("div", {
+        key: 2,
+        style: r({
+          display: "inline-flex",
+          flexDirection: "column",
+          alignItems: "center",
+          borderRadius: "var(--cui-button-radius, 0.375rem)",
+          border: "1px solid var(--cui-border-strong, var(--cui-border))",
+          opacity: t.disabled ? "0.5" : "1",
+          overflow: "hidden"
+        })
+      }, [
+        a(v, {
+          variant: "ghost",
+          size: o.value.buttonSize,
+          disabled: t.disabled || !p.value,
+          color: t.color,
+          style: r({ border: "none", borderRadius: "0", width: "100%", minWidth: o.value.inputWidth }),
+          onClick: V
+        }, {
+          default: m(() => [
+            a(b, {
+              name: "caret-up",
+              size: o.value.iconSize
+            }, null, 8, ["size"])
+          ]),
+          _: 1
+        }, 8, ["size", "disabled", "color", "style"]),
+        W("input", {
+          ref_key: "inputV",
+          ref: x,
+          type: "text",
+          inputmode: "numeric",
+          value: w.value,
+          disabled: t.disabled,
+          style: r({ width: o.value.inputWidth, textAlign: "center", border: "none", borderTop: "1px solid var(--cui-border-strong, var(--cui-border))", borderBottom: "1px solid var(--cui-border-strong, var(--cui-border))", background: "var(--cui-surface-base, white)", color: "var(--cui-text-body)", fontSize: o.value.font, fontWeight: "600", outline: "none", padding: "calc(0.25rem * var(--cui-density-scale, 1)) 0", fontFamily: "inherit" }),
+          onInput: C
+        }, null, 44, O),
+        a(v, {
+          variant: "ghost",
+          size: o.value.buttonSize,
+          disabled: t.disabled || !h.value,
+          color: t.color,
+          style: { border: "none", borderRadius: "0", width: "100%" },
+          onClick: S
+        }, {
+          default: m(() => [
+            a(b, {
+              name: "caret-down",
+              size: o.value.iconSize
+            }, null, 8, ["size"])
+          ]),
+          _: 1
+        }, 8, ["size", "disabled", "color"])
+      ], 4)) : (s(), c("div", {
+        key: 1,
+        style: r({
+          display: "inline-flex",
+          alignItems: "center",
+          borderRadius: "var(--cui-button-radius, 0.375rem)",
+          border: "1px solid var(--cui-border-strong, var(--cui-border))",
+          opacity: t.disabled ? "0.5" : "1",
+          height: o.value.height
+        })
+      }, [
+        a(v, {
+          variant: "ghost",
+          size: o.value.buttonSize,
+          disabled: t.disabled || !h.value,
+          color: t.color,
+          style: { borderRadius: "var(--cui-button-radius, 0.375rem) 0 0 var(--cui-button-radius, 0.375rem)", border: "none", height: "100%" },
+          onClick: S
+        }, {
+          default: m(() => [
+            a(b, {
+              name: "minus",
+              size: o.value.iconSize
+            }, null, 8, ["size"])
+          ]),
+          _: 1
+        }, 8, ["size", "disabled", "color"]),
+        W("input", {
+          ref_key: "inputH",
+          ref: z,
+          type: "text",
+          inputmode: "numeric",
+          value: w.value,
+          disabled: t.disabled,
+          style: r({ width: o.value.inputWidth, height: "100%", textAlign: "center", border: "none", borderLeft: "1px solid var(--cui-border-strong, var(--cui-border))", borderRight: "1px solid var(--cui-border-strong, var(--cui-border))", background: "var(--cui-surface-base, white)", color: "var(--cui-text-body)", fontSize: o.value.font, fontWeight: "600", outline: "none", padding: "0", fontFamily: "inherit" }),
+          onInput: C
+        }, null, 44, L),
+        a(v, {
+          variant: "ghost",
+          size: o.value.buttonSize,
+          disabled: t.disabled || !p.value,
+          color: t.color,
+          style: { borderRadius: "0 var(--cui-button-radius, 0.375rem) var(--cui-button-radius, 0.375rem) 0", border: "none", height: "100%" },
+          onClick: V
+        }, {
+          default: m(() => [
+            a(b, {
+              name: "plus",
+              size: o.value.iconSize
+            }, null, 8, ["size"])
+          ]),
+          _: 1
+        }, 8, ["size", "disabled", "color"])
+      ], 4))
+    ], 512)), [
+      [T, !t.hidden]
+    ]);
+  }
+});
+export {
+  G as default
+};

package/dist/components/CuiInputStepper.vue2.js

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

package/dist/components/CuiKbd.vue.js

@@ -0,0 +1,44 @@
+import { defineComponent as a, computed as m, withDirectives as s, openBlock as l, createElementBlock as c, normalizeStyle as p, renderSlot as u, vShow as f } from "vue";
+import { clampSize as h, scaleDensity as e } from "../utils/sizing.js";
+const b = /* @__PURE__ */ a({
+  __name: "CuiKbd",
+  props: {
+    hidden: { type: Boolean, default: !1 },
+    size: { default: "md" }
+  },
+  setup(r) {
+    const n = r, o = ["sm", "md", "lg"], i = {
+      sm: { fontSize: "0.6875rem", padding: `${e("0.0625rem")} ${e("0.3125rem")}`, minWidth: "1.125rem" },
+      md: { fontSize: "0.75rem", padding: `${e("0.125rem")} ${e("0.375rem")}`, minWidth: "1.375rem" },
+      lg: { fontSize: "0.8125rem", padding: `${e("0.1875rem")} ${e("0.4375rem")}`, minWidth: "1.5rem" }
+    }, t = m(() => h(n.size, o));
+    return (d, S) => s((l(), c("kbd", {
+      style: p({
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: i[t.value].fontSize,
+        padding: i[t.value].padding,
+        minWidth: i[t.value].minWidth,
+        fontFamily: "var(--cui-font-sans, system-ui, sans-serif)",
+        fontWeight: "500",
+        lineHeight: "1.4",
+        color: "var(--cui-text-secondary)",
+        background: "var(--cui-surface-base, white)",
+        border: "1px solid var(--cui-border)",
+        borderBottom: "2px solid var(--cui-border)",
+        borderRadius: "0.25rem",
+        boxShadow: "0 1px 0 var(--cui-border)",
+        whiteSpace: "nowrap",
+        verticalAlign: "middle"
+      })
+    }, [
+      u(d.$slots, "default")
+    ], 4)), [
+      [f, !r.hidden]
+    ]);
+  }
+});
+export {
+  b as default
+};

package/dist/components/CuiKbd.vue2.js

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

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

@@ -38,7 +38,7 @@ declare const __VLS_component: import("vue").DefineComponent<CuiMaskedInputProps
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {
-            readonly modelValue?: string | undefined;
+            readonly modelValue?: string | number | undefined;
             readonly type?: import("./CuiInput.vue").InputType | undefined;
             readonly placeholder?: string | undefined;
             readonly clearable?: boolean | undefined;
@@ -51,7 +51,7 @@ declare const __VLS_component: import("vue").DefineComponent<CuiMaskedInputProps
             readonly size?: CuiSize | undefined;
             readonly disabled?: boolean | undefined;
             readonly onClear?: (() => any) | undefined;
-            readonly "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+            readonly "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
         $attrs: import("vue").Attrs;
         $refs: {
@@ -63,18 +63,18 @@ declare const __VLS_component: import("vue").DefineComponent<CuiMaskedInputProps
         $root: import("vue").ComponentPublicInstance | null;
         $parent: import("vue").ComponentPublicInstance | null;
         $host: Element | null;
-        $emit: ((event: "clear") => void) & ((event: "update:modelValue", value: string) => void);
+        $emit: ((event: "clear") => void) & ((event: "update:modelValue", value: string | number) => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("./CuiInput.vue").CuiInputProps> & Readonly<{
             onClear?: (() => any) | undefined;
-            "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+            "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
         }>, {
             el: Readonly<import("vue").ShallowRef<HTMLInputElement | null>>;
             focus: (opts?: FocusOptions) => void;
             blur: () => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             clear: () => any;
-            "update:modelValue": (value: string) => any;
+            "update:modelValue": (value: string | number) => any;
         }, string, {
             error: boolean;
             readonly: boolean;
@@ -84,7 +84,7 @@ declare const __VLS_component: import("vue").DefineComponent<CuiMaskedInputProps
             type: import("./CuiInput.vue").InputType;
             rounded: import("../index.js").CuiRounded;
             disabled: boolean;
-            modelValue: string;
+            modelValue: string | number;
             clearable: boolean;
         }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
@@ -115,11 +115,11 @@ declare const __VLS_component: import("vue").DefineComponent<CuiMaskedInputProps
         type: import("./CuiInput.vue").InputType;
         rounded: import("../index.js").CuiRounded;
         disabled: boolean;
-        modelValue: string;
+        modelValue: string | number;
         clearable: boolean;
     }> & Omit<Readonly<import("./CuiInput.vue").CuiInputProps> & Readonly<{
         onClear?: (() => any) | undefined;
-        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
     }>, "el" | "focus" | "blur" | ("error" | "readonly" | "hidden" | "size" | "color" | "type" | "rounded" | "disabled" | "modelValue" | "clearable")> & {
         el: HTMLInputElement | null;
         focus: (opts?: FocusOptions) => void;