@itguy614/clean-ui 0.3.1 → 1.0.0

package/dist/components/CuiCodeBlock.vue.js

@@ -0,0 +1,129 @@
+import { defineComponent as p, computed as c, withDirectives as x, openBlock as n, createElementBlock as i, normalizeStyle as l, toDisplayString as u, createBlock as L, createCommentVNode as m, createElementVNode as g, Fragment as h, renderList as y, vShow as k } from "vue";
+import { clampSize as z, scaleDensity as f } from "../utils/sizing.js";
+import H from "./CuiCopyButton.vue.js";
+const R = { style: {
+  borderRadius: "0.5rem",
+  overflow: "hidden",
+  border: "1px solid var(--cui-border)",
+  background: "var(--color-surface-950, #1a1a2e)"
+} }, B = { key: 1 }, E = /* @__PURE__ */ p({
+  __name: "CuiCodeBlock",
+  props: {
+    code: {},
+    language: {},
+    filename: {},
+    lineNumbers: { type: Boolean, default: !1 },
+    startLine: { default: 1 },
+    highlightLines: {},
+    copyable: { type: Boolean, default: !0 },
+    maxHeight: {},
+    hidden: { type: Boolean, default: !1 },
+    size: { default: "md" }
+  },
+  setup(e) {
+    const b = ["sm", "md", "lg"], o = e, d = c(() => o.code.split(`
+`)), S = {
+      sm: { fontSize: "0.75rem", lineHeight: "1.6", padding: f("0.75rem"), headerFont: "0.6875rem" },
+      md: { fontSize: "0.8125rem", lineHeight: "1.65", padding: f("1rem"), headerFont: "0.75rem" },
+      lg: { fontSize: "0.875rem", lineHeight: "1.7", padding: f("1.25rem"), headerFont: "0.8125rem" }
+    }, t = c(() => S[z(o.size, b)]), s = c(() => o.filename || o.language || ""), r = c(() => new Set(o.highlightLines ?? []));
+    return (F, w) => x((n(), i("div", R, [
+      s.value || e.copyable ? (n(), i("div", {
+        key: 0,
+        style: l({
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: `calc(0.375rem * var(--cui-density-scale, 1)) ${t.value.padding}`,
+          background: "rgba(255,255,255,0.04)",
+          borderBottom: "1px solid rgba(255,255,255,0.06)"
+        })
+      }, [
+        s.value ? (n(), i("span", {
+          key: 0,
+          style: l({
+            fontSize: t.value.headerFont,
+            fontWeight: "500",
+            color: "var(--color-surface-400, #999)",
+            fontFamily: "var(--cui-font-mono, monospace)",
+            textTransform: e.language && !e.filename ? "uppercase" : "none",
+            letterSpacing: e.language && !e.filename ? "0.04em" : "normal"
+          })
+        }, u(s.value), 5)) : (n(), i("span", B)),
+        e.copyable ? (n(), L(H, {
+          key: 2,
+          value: e.code,
+          size: "xs",
+          variant: "ghost",
+          style: { color: "var(--color-surface-400, #999)" }
+        }, null, 8, ["value"])) : m("", !0)
+      ], 4)) : m("", !0),
+      g("div", {
+        style: l({
+          overflow: "auto",
+          maxHeight: e.maxHeight || void 0
+        })
+      }, [
+        g("div", {
+          style: l({
+            display: "flex",
+            padding: `${t.value.padding} 0`,
+            minWidth: "fit-content"
+          })
+        }, [
+          e.lineNumbers ? (n(), i("div", {
+            key: 0,
+            style: l({
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-end",
+              paddingRight: "calc(0.75rem * var(--cui-density-scale, 1))",
+              paddingLeft: t.value.padding,
+              borderRight: "1px solid rgba(255,255,255,0.06)",
+              marginRight: "calc(0.75rem * var(--cui-density-scale, 1))",
+              userSelect: "none",
+              flexShrink: "0"
+            })
+          }, [
+            (n(!0), i(h, null, y(d.value, (v, a) => (n(), i("span", {
+              key: a,
+              style: l({
+                fontSize: t.value.fontSize,
+                lineHeight: t.value.lineHeight,
+                fontFamily: "var(--cui-font-mono, monospace)",
+                color: r.value.has(e.startLine + a) ? "var(--color-surface-200, #ccc)" : "var(--color-surface-600, #555)",
+                minWidth: `${String(e.startLine + d.value.length - 1).length}ch`
+              })
+            }, u(e.startLine + a), 5))), 128))
+          ], 4)) : m("", !0),
+          g("div", {
+            style: l({ flex: "1", paddingRight: t.value.padding, paddingLeft: e.lineNumbers ? "0" : t.value.padding })
+          }, [
+            (n(!0), i(h, null, y(d.value, (v, a) => (n(), i("div", {
+              key: a,
+              style: l({
+                fontSize: t.value.fontSize,
+                lineHeight: t.value.lineHeight,
+                fontFamily: "var(--cui-font-mono, monospace)",
+                color: "var(--color-surface-200, #e0e0e0)",
+                whiteSpace: "pre",
+                background: r.value.has(e.startLine + a) ? "rgba(255,255,255,0.06)" : "transparent",
+                marginLeft: r.value.has(e.startLine + a) ? "calc(-0.5rem * var(--cui-density-scale, 1))" : "0",
+                marginRight: r.value.has(e.startLine + a) ? "calc(-0.5rem * var(--cui-density-scale, 1))" : "0",
+                paddingLeft: r.value.has(e.startLine + a) ? "calc(0.5rem * var(--cui-density-scale, 1))" : "0",
+                paddingRight: r.value.has(e.startLine + a) ? "calc(0.5rem * var(--cui-density-scale, 1))" : "0",
+                borderLeft: r.value.has(e.startLine + a) ? "2px solid var(--cui-primary)" : "2px solid transparent",
+                borderRadius: "2px"
+              })
+            }, u(v || " "), 5))), 128))
+          ], 4)
+        ], 4)
+      ], 4)
+    ], 512)), [
+      [k, !e.hidden]
+    ]);
+  }
+});
+export {
+  E as default
+};

package/dist/components/CuiCodeBlock.vue2.js

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

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

@@ -1,7 +1,7 @@
+import type { CuiSize, HideableProps, SizeableProps, DisableableProps } from "../types/common";
 import { type ColorFormat } from "../utils/color";
-export type ColorPickerSize = "sm" | "md" | "lg";
 export type PresetPalette = "theme" | "basic" | "material" | "tailwind";
-export interface CuiColorPickerProps {
+export interface CuiColorPickerProps extends HideableProps, SizeableProps, DisableableProps {
     /** Color value (any supported format) */
     modelValue?: string;
     /** Output format */
@@ -18,20 +18,20 @@ export interface CuiColorPickerProps {
     showFormatToggle?: boolean;
     /** Only show swatches, no gradient picker */
     swatchOnly?: boolean;
-    /** Size */
-    size?: ColorPickerSize;
-    /** Disabled */
-    disabled?: boolean;
-    /** Hidden */
-    hidden?: boolean;
 }
-declare const _default: import("vue").DefineComponent<CuiColorPickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare function focus(opts?: FocusOptions): void;
+declare function blur(): void;
+declare const _default: import("vue").DefineComponent<CuiColorPickerProps, {
+    el: Readonly<import("vue").ShallowRef<HTMLElement | null>>;
+    focus: typeof focus;
+    blur: typeof blur;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<CuiColorPickerProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    size: ColorPickerSize;
     hidden: boolean;
+    size: CuiSize;
     disabled: boolean;
     modelValue: string;
     format: ColorFormat;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiColorPicker.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiColorPicker.vue"],"names":[],"mappings":"AAwdA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,gBAAgB,CAAC;AAExB,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACjD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;AAExE,MAAM,WAAW,mBAAmB;IAClC,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW;IACX,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;;;;;;UALQ,eAAe;YAIb,OAAO;cAFL,OAAO;gBAlBL,MAAM;YAEV,WAAW;eAMR,OAAO;eAEP,OAAO;sBAEA,OAAO;gBAEb,OAAO;;AA+gBtB,wBAQG"}
+{"version":3,"file":"CuiColorPicker.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiColorPicker.vue"],"names":[],"mappings":"AAqeA,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAI/F,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,gBAAgB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;AAIxE,MAAM,WAAW,mBAAoB,SAAQ,aAAa,EAAE,aAAa,EAAE,gBAAgB;IACzF,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAqOD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAGjC;AAED,iBAAS,IAAI,SAGZ;;;;;;;;;;;;;gBA5Pc,MAAM;YAEV,WAAW;eAMR,OAAO;eAEP,OAAO;sBAEA,OAAO;gBAEb,OAAO;;AAiiBtB,wBASG"}

package/dist/components/CuiColorPicker.vue.js

@@ -0,0 +1,348 @@
+import { defineComponent as pe, ref as s, computed as p, watch as he, onMounted as J, onUnmounted as me, useTemplateRef as Q, withDirectives as _, openBlock as d, createElementBlock as c, normalizeStyle as r, withModifiers as B, createElementVNode as l, createCommentVNode as h, withKeys as ge, vModelText as be, createBlock as xe, withCtx as ye, createTextVNode as we, toDisplayString as ke, Fragment as Se, renderList as Ee, vShow as Re } from "vue";
+import { clampSize as ze } from "../utils/sizing.js";
+import Pe from "./CuiButton.vue.js";
+import { hsvToRgb as ee, rgbToHex as Ce, formatColor as Le, getThemePalette as Me, PALETTE_BASIC as Te, PALETTE_MATERIAL as He, PALETTE_TAILWIND as Be, parseColor as A, rgbToHsv as $ } from "../utils/color.js";
+const Ae = {
+  key: 0,
+  style: { display: "flex", gap: "calc(0.625rem * var(--cui-density-scale, 1))", alignItems: "center" }
+}, $e = { style: { flex: "1", display: "flex", flexDirection: "column", gap: "calc(0.5rem * var(--cui-density-scale, 1))" } }, De = {
+  key: 1,
+  style: { display: "flex", gap: "calc(0.375rem * var(--cui-density-scale, 1))", alignItems: "center" }
+}, Ve = {
+  key: 2,
+  style: { display: "flex", flexWrap: "wrap", gap: "calc(0.3125rem * var(--cui-density-scale, 1))" }
+}, Fe = ["onClick"], te = "repeating-conic-gradient(#d0d0d0 0% 25%, transparent 0% 50%) 0 0 / 12px 12px", Ge = /* @__PURE__ */ pe({
+  __name: "CuiColorPicker",
+  props: {
+    modelValue: { default: "#000000" },
+    format: { default: "hex" },
+    palette: {},
+    presetPalette: {},
+    showAlpha: { type: Boolean, default: !1 },
+    showInput: { type: Boolean, default: !0 },
+    showFormatToggle: { type: Boolean, default: !0 },
+    swatchOnly: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(a, { expose: ne, emit: oe }) {
+    const re = ["sm", "md", "lg"], n = a, ie = oe, v = s(0), m = s(1), g = s(1), u = s(1), S = s(n.format), f = s(""), ae = {
+      sm: { width: "220px", gradientHeight: "130px", sliderHeight: "10px", thumbSize: "14px", swatchSize: "20px", fontSize: "0.75rem" },
+      md: { width: "280px", gradientHeight: "160px", sliderHeight: "12px", thumbSize: "16px", swatchSize: "24px", fontSize: "0.8125rem" },
+      lg: { width: "340px", gradientHeight: "200px", sliderHeight: "14px", thumbSize: "18px", swatchSize: "28px", fontSize: "0.875rem" }
+    }, i = p(() => ae[ze(n.size, re)]), b = p(() => ee(v.value, m.value, g.value)), x = p(() => Ce(b.value.r, b.value.g, b.value.b)), D = p(() => {
+      const { r: e, g: t, b: o } = b.value;
+      return u.value < 1 ? `rgba(${e}, ${t}, ${o}, ${u.value.toFixed(2)})` : x.value;
+    }), y = p(() => {
+      const { r: e, g: t, b: o } = b.value;
+      return Le(e, t, o, u.value, S.value);
+    });
+    function V() {
+      const e = A(n.modelValue);
+      if (e) {
+        const t = $(e.r, e.g, e.b);
+        v.value = t.h, m.value = t.s, g.value = t.v, u.value = e.a, f.value = y.value;
+      }
+    }
+    he(() => n.modelValue, V), J(V);
+    const F = s(0);
+    let w = null;
+    J(() => {
+      n.presetPalette === "theme" && typeof MutationObserver < "u" && (w = new MutationObserver(() => {
+        F.value++;
+      }), w.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }));
+    }), me(() => {
+      w == null || w.disconnect();
+    });
+    function k() {
+      f.value = y.value, ie("update:modelValue", y.value);
+    }
+    const I = p(() => n.palette ? n.palette : n.presetPalette === "theme" ? (F.value, Me()) : n.presetPalette === "basic" ? Te : n.presetPalette === "material" ? He : n.presetPalette === "tailwind" ? Be : []), P = s(null);
+    let C = !1;
+    function le(e) {
+      n.disabled || (C = !0, W(e), document.addEventListener("pointermove", O), document.addEventListener("pointerup", U));
+    }
+    function O(e) {
+      C && W(e);
+    }
+    function U() {
+      C = !1, document.removeEventListener("pointermove", O), document.removeEventListener("pointerup", U);
+    }
+    function W(e) {
+      if (!P.value) return;
+      const t = P.value.getBoundingClientRect();
+      m.value = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width)), g.value = Math.max(0, Math.min(1, 1 - (e.clientY - t.top) / t.height)), k();
+    }
+    const L = s(null);
+    let M = !1;
+    function ue(e) {
+      n.disabled || (M = !0, X(e), document.addEventListener("pointermove", G), document.addEventListener("pointerup", N));
+    }
+    function G(e) {
+      M && X(e);
+    }
+    function N() {
+      M = !1, document.removeEventListener("pointermove", G), document.removeEventListener("pointerup", N);
+    }
+    function X(e) {
+      if (!L.value) return;
+      const t = L.value.getBoundingClientRect();
+      v.value = Math.max(0, Math.min(360, (e.clientX - t.left) / t.width * 360)), k();
+    }
+    const T = s(null);
+    let H = !1;
+    function se(e) {
+      n.disabled || (H = !0, Z(e), document.addEventListener("pointermove", K), document.addEventListener("pointerup", Y));
+    }
+    function K(e) {
+      H && Z(e);
+    }
+    function Y() {
+      H = !1, document.removeEventListener("pointermove", K), document.removeEventListener("pointerup", Y);
+    }
+    function Z(e) {
+      if (!T.value) return;
+      const t = T.value.getBoundingClientRect();
+      u.value = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width)), u.value = Math.round(u.value * 100) / 100, k();
+    }
+    function j() {
+      const e = A(f.value);
+      if (e) {
+        const t = $(e.r, e.g, e.b);
+        v.value = t.h, m.value = t.s, g.value = t.v, u.value = e.a, k();
+      } else
+        f.value = y.value;
+    }
+    function de() {
+      const e = ["hex", "rgb", "hsl"], t = e.indexOf(S.value);
+      S.value = e[(t + 1) % e.length], f.value = y.value;
+    }
+    function ce(e) {
+      if (n.disabled) return;
+      const t = A(e);
+      if (t) {
+        const o = $(t.r, t.g, t.b);
+        v.value = o.h, m.value = o.s, g.value = o.v, u.value = t.a, k();
+      }
+    }
+    const q = p(() => {
+      const e = ee(v.value, 1, 1);
+      return `rgb(${e.r}, ${e.g}, ${e.b})`;
+    }), E = Q("rootEl"), R = Q("inputEl");
+    function ve(e) {
+      var t;
+      R.value ? R.value.focus(e) : (t = E.value) == null || t.focus(e);
+    }
+    function fe() {
+      var e;
+      R.value ? R.value.blur() : (e = E.value) == null || e.blur();
+    }
+    return ne({ el: E, focus: ve, blur: fe }), (e, t) => _((d(), c("div", {
+      ref_key: "rootEl",
+      ref: E,
+      style: r({
+        width: i.value.width,
+        opacity: a.disabled ? "0.5" : "1",
+        pointerEvents: a.disabled ? "none" : void 0,
+        userSelect: "none"
+      })
+    }, [
+      a.swatchOnly ? h("", !0) : (d(), c("div", {
+        key: 0,
+        ref_key: "gradientRef",
+        ref: P,
+        style: r({
+          position: "relative",
+          width: "100%",
+          height: i.value.gradientHeight,
+          borderRadius: "0.5rem 0.5rem 0 0",
+          cursor: "crosshair",
+          overflow: "hidden",
+          background: q.value
+        }),
+        onPointerdown: B(le, ["prevent"])
+      }, [
+        t[3] || (t[3] = l("div", { style: { position: "absolute", inset: "0", background: "linear-gradient(to right, white, transparent)" } }, null, -1)),
+        t[4] || (t[4] = l("div", { style: { position: "absolute", inset: "0", background: "linear-gradient(to bottom, transparent, black)" } }, null, -1)),
+        l("div", {
+          style: r({
+            position: "absolute",
+            left: `${m.value * 100}%`,
+            top: `${(1 - g.value) * 100}%`,
+            width: i.value.thumbSize,
+            height: i.value.thumbSize,
+            borderRadius: "50%",
+            border: "2px solid white",
+            boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
+            transform: "translate(-50%, -50%)",
+            pointerEvents: "none"
+          })
+        }, null, 4)
+      ], 36)),
+      l("div", {
+        style: r({
+          padding: "calc(0.75rem * var(--cui-density-scale, 1))",
+          background: "var(--cui-surface-base, white)",
+          border: "1px solid var(--cui-border)",
+          borderTop: a.swatchOnly ? void 0 : "none",
+          borderRadius: a.swatchOnly ? "0.5rem" : "0 0 0.5rem 0.5rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "calc(0.625rem * var(--cui-density-scale, 1))"
+        })
+      }, [
+        a.swatchOnly ? h("", !0) : (d(), c("div", Ae, [
+          l("div", {
+            style: r({
+              width: "2rem",
+              height: "2rem",
+              borderRadius: "50%",
+              border: "1px solid var(--cui-border)",
+              flexShrink: "0",
+              background: te,
+              position: "relative",
+              overflow: "hidden"
+            })
+          }, [
+            l("div", {
+              style: r({ position: "absolute", inset: "0", borderRadius: "50%", background: D.value })
+            }, null, 4)
+          ], 4),
+          l("div", $e, [
+            l("div", {
+              ref_key: "hueRef",
+              ref: L,
+              style: r({
+                position: "relative",
+                height: i.value.sliderHeight,
+                borderRadius: "9999px",
+                cursor: "pointer",
+                background: "linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)"
+              }),
+              onPointerdown: B(ue, ["prevent"])
+            }, [
+              l("div", {
+                style: r({
+                  position: "absolute",
+                  left: `${v.value / 360 * 100}%`,
+                  top: "50%",
+                  width: i.value.thumbSize,
+                  height: i.value.thumbSize,
+                  borderRadius: "50%",
+                  border: "2px solid white",
+                  boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
+                  transform: "translate(-50%, -50%)",
+                  pointerEvents: "none",
+                  background: q.value
+                })
+              }, null, 4)
+            ], 36),
+            a.showAlpha ? (d(), c("div", {
+              key: 0,
+              ref_key: "alphaRef",
+              ref: T,
+              style: r({
+                position: "relative",
+                height: i.value.sliderHeight,
+                borderRadius: "9999px",
+                cursor: "pointer",
+                background: te,
+                overflow: "hidden"
+              }),
+              onPointerdown: B(se, ["prevent"])
+            }, [
+              l("div", {
+                style: r({ position: "absolute", inset: "0", borderRadius: "9999px", background: `linear-gradient(to right, transparent, ${x.value})` })
+              }, null, 4),
+              l("div", {
+                style: r({
+                  position: "absolute",
+                  left: `${u.value * 100}%`,
+                  top: "50%",
+                  width: i.value.thumbSize,
+                  height: i.value.thumbSize,
+                  borderRadius: "50%",
+                  border: "2px solid white",
+                  boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
+                  transform: "translate(-50%, -50%)",
+                  pointerEvents: "none",
+                  background: x.value
+                })
+              }, null, 4)
+            ], 36)) : h("", !0)
+          ])
+        ])),
+        a.showInput ? (d(), c("div", De, [
+          a.swatchOnly ? (d(), c("div", {
+            key: 0,
+            style: r({
+              width: "1.5rem",
+              height: "1.5rem",
+              borderRadius: "0.25rem",
+              border: "1px solid var(--cui-border)",
+              flexShrink: "0",
+              background: D.value
+            })
+          }, null, 4)) : h("", !0),
+          _(l("input", {
+            ref: "inputEl",
+            "onUpdate:modelValue": t[0] || (t[0] = (o) => f.value = o),
+            style: r({
+              flex: "1",
+              padding: "calc(0.3125rem * var(--cui-density-scale, 1)) calc(0.5rem * var(--cui-density-scale, 1))",
+              fontSize: i.value.fontSize,
+              fontFamily: "var(--cui-font-mono, monospace)",
+              border: "1px solid var(--cui-border-strong, var(--cui-border))",
+              borderRadius: "0.25rem",
+              background: "var(--cui-surface-base, white)",
+              color: "var(--cui-text-body)",
+              outline: "none",
+              minWidth: "0"
+            }),
+            onKeydown: ge(j, ["enter"]),
+            onBlur: j
+          }, null, 36), [
+            [be, f.value]
+          ]),
+          a.showFormatToggle ? (d(), xe(Pe, {
+            key: 1,
+            variant: "ghost",
+            size: "xs",
+            style: r({ flexShrink: "0", fontFamily: "var(--cui-font-mono, monospace)", fontSize: i.value.fontSize, fontWeight: "600", minWidth: "2.5rem" }),
+            onClick: de
+          }, {
+            default: ye(() => [
+              we(ke(S.value.toUpperCase()), 1)
+            ]),
+            _: 1
+          }, 8, ["style"])) : h("", !0)
+        ])) : h("", !0),
+        I.value.length > 0 ? (d(), c("div", Ve, [
+          (d(!0), c(Se, null, Ee(I.value, (o) => (d(), c("div", {
+            key: o,
+            style: r({
+              width: i.value.swatchSize,
+              height: i.value.swatchSize,
+              borderRadius: "0.25rem",
+              background: o,
+              cursor: "pointer",
+              border: x.value.toLowerCase() === o.toLowerCase() ? "2px solid var(--cui-primary)" : "1px solid var(--cui-border)",
+              boxShadow: x.value.toLowerCase() === o.toLowerCase() ? "0 0 0 1px var(--cui-primary)" : "none",
+              transition: "transform 0.1s ease"
+            }),
+            onClick: (z) => ce(o),
+            onMouseenter: t[1] || (t[1] = (z) => z.target.style.transform = "scale(1.15)"),
+            onMouseleave: t[2] || (t[2] = (z) => z.target.style.transform = "scale(1)")
+          }, null, 44, Fe))), 128))
+        ])) : h("", !0)
+      ], 4)
+    ], 4)), [
+      [Re, !a.hidden]
+    ]);
+  }
+});
+export {
+  Ge as default
+};

package/dist/components/CuiColorPicker.vue2.js

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

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

@@ -1,4 +1,4 @@
-import type { ButtonColor } from "./CuiButton.vue";
+import type { ColorableProps, SizeableProps, DisableableProps, HideableProps, CuiRounded } from "../types/common";
 export interface ComboboxOption {
     /** Unique value */
     value: string | number;
@@ -15,7 +15,7 @@ export interface ComboboxOption {
     /** Any extra data the consumer wants to access in slots */
     [key: string]: unknown;
 }
-export interface CuiComboboxProps {
+export interface CuiComboboxProps extends HideableProps, ColorableProps, SizeableProps, DisableableProps {
     /** Selected value(s) — string/number for single, array for multiple */
     modelValue?: string | number | (string | number)[] | null;
     /** Static options */
@@ -32,12 +32,6 @@ export interface CuiComboboxProps {
     minChars?: number;
     /** Maximum visible items before scrolling (controls dropdown height) */
     maxVisible?: number;
-    /** Size */
-    size?: "sm" | "md" | "lg";
-    /** Color */
-    color?: ButtonColor;
-    /** Disabled */
-    disabled?: boolean;
     /** Loading state (external) */
     loading?: boolean;
     /** Label */
@@ -48,9 +42,11 @@ export interface CuiComboboxProps {
     errorMessage?: string;
     /** No results text */
     noResultsText?: string;
-    /** Hidden */
-    hidden?: boolean;
+    /** Border radius */
+    rounded?: CuiRounded;
 }
+declare function focus(opts?: FocusOptions): void;
+declare function blur(): void;
 declare var __VLS_21: {
     option: ComboboxOption;
     selected: boolean;
@@ -58,17 +54,22 @@ declare var __VLS_21: {
 type __VLS_Slots = {} & {
     option?: (props: typeof __VLS_21) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<CuiComboboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<CuiComboboxProps, {
+    el: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+    focus: typeof focus;
+    blur: typeof blur;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     search: (query: string) => any;
     "update:modelValue": (value: string | number | (string | number)[] | null) => any;
 }, string, import("vue").PublicProps, Readonly<CuiComboboxProps> & Readonly<{
     onSearch?: ((query: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | null) => any) | undefined;
 }>, {
-    size: "sm" | "md" | "lg";
-    color: ButtonColor;
-    hidden: boolean;
     error: boolean;
+    hidden: boolean;
+    size: import("..").CuiSize;
+    color: import("..").CuiColor;
+    rounded: CuiRounded;
     loading: boolean;
     disabled: boolean;
     placeholder: string;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiCombobox.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiCombobox.vue"],"names":[],"mappings":"AAudA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAKnD,MAAM,WAAW,cAAc;IAC7B,mBAAmB;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,uEAAuE;IACvE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC;IAC1D,qBAAqB;IACrB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAC5D,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY;IACZ,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA6gBD,QAAA,IAAI,QAAQ;;;CAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AA8C/C,QAAA,MAAM,eAAe;;;;;;;UA9kBZ,IAAI,GAAG,IAAI,GAAG,IAAI;WAEjB,WAAW;YAcV,OAAO;WANR,OAAO;aAJL,OAAO;cAFN,OAAO;iBAdJ,MAAM;aAJV,cAAc,EAAE;cAEf,OAAO;cAMP,MAAM;cAEN,MAAM;gBAEJ,MAAM;mBAgBH,MAAM;6EAwkBtB,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":"CuiCombobox.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiCombobox.vue"],"names":[],"mappings":"AAyeA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAOlH,MAAM,WAAW,cAAc;IAC7B,mBAAmB;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAiB,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACtG,uEAAuE;IACvE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC;IAC1D,qBAAqB;IACrB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAC5D,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAqQD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;AAyRD,QAAA,IAAI,QAAQ;;;CAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAgD/C,QAAA,MAAM,eAAe;;;;;;;;;;;WA7lBX,OAAO;;;;aAML,UAAU;aAVV,OAAO;;iBAVH,MAAM;aAJV,cAAc,EAAE;cAEf,OAAO;cAMP,MAAM;cAEN,MAAM;gBAEJ,MAAM;mBAUH,MAAM;6EAkmBtB,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"}