@itguy614/clean-ui 1.2.0 → 1.2.2

package/README.md

@@ -17,7 +17,7 @@ and overridable at every level via CSS custom properties.
 - **Accessible first** — WCAG AA contrast targets, ARIA attributes, keyboard navigation, focus management.
 - **TypeScript** — full type definitions; shared `CuiColor` / `CuiSize` / `CuiRounded` prop types across components.
 - **Tailwind CSS v4 compatible** — color scales registered via `@theme` so Tailwind utilities work alongside the components.
-- **Tree-shakeable ESM** (+ CJS build), Vue as the only peer dependency.
+- **Tree-shakeable, per-module ESM** — Vue is the only peer dependency. (ESM-only as of 1.0.)
 
 ## Installation
 
@@ -107,6 +107,36 @@ Every color, radius, and typography value is a `--cui-*` custom property. Overri
 }
 ```
 
+## Markdown editor
+
+Need a markdown editor? The companion package
+[**`@itguy614/clean-ui-editor`**](https://www.npmjs.com/package/@itguy614/clean-ui-editor)
+is a CodeMirror 6 editor themed with clean-ui's tokens — WYSIWYG (hidden syntax markers) and
+source modes, a declarative plugin API, and an optional safe HTML renderer. It has a heavier
+dependency graph, so it ships as a separate, lazily-loadable package rather than in the core:
+
+```sh
+npm install @itguy614/clean-ui-editor
+```
+
+```vue
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+import "@itguy614/clean-ui-editor/styles";
+
+const CuiMarkdownEditor = defineAsyncComponent(() =>
+  import("@itguy614/clean-ui-editor").then((m) => m.CuiMarkdownEditor),
+);
+const content = ref("# Hello");
+</script>
+
+<template>
+  <CuiMarkdownEditor v-model="content" />
+</template>
+```
+
+See the [editor README](../clean-ui-editor/README.md) for modes, plugins, and rendering.
+
 ## Documentation
 
 Full component reference, props, and live examples: **https://itguy614.github.io/clean-ui/**

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

@@ -1 +1 @@
-{"version":3,"file":"CuiPopover.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiPopover.vue"],"names":[],"mappings":"AAsRA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAG9E,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGnF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;AAEzE,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,gBAAgB;IACtE,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,mCAAmC;IACnC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAsRD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACrF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAgD/C,QAAA,MAAM,eAAe;;;;;;aA5UT,UAAU;;eAlBR,gBAAgB;aAElB,cAAc;eAEZ,MAAM;eAEN,MAAM;aAER,OAAO;cAQN,OAAO;6EAsVlB,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":"CuiPopover.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiPopover.vue"],"names":[],"mappings":"AAsRA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAG9E,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGnF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;AAEzE,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,gBAAgB;IACtE,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,mCAAmC;IACnC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAsRD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACrF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAiD/C,QAAA,MAAM,eAAe;;;;;;aA7UT,UAAU;;eAlBR,gBAAgB;aAElB,cAAc;eAEZ,MAAM;eAEN,MAAM;aAER,OAAO;cAQN,OAAO;6EAuVlB,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/CuiPopover.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as K, useSlots as U, ref as S, watch as M, computed as l, onUnmounted as q, withDirectives as G, openBlock as a, createElementBlock as s, createElementVNode as y, renderSlot as f, createBlock as J, Teleport as Q, normalizeStyle as p, unref as g, toDisplayString as X, withModifiers as Y, createVNode as Z, createCommentVNode as u, vShow as ee } from "vue";
-import { usePopover as te } from "../composables/usePopover.js";
-import { useClickOutside as oe } from "../composables/useClickOutside.js";
+import { defineComponent as U, useSlots as q, ref as S, watch as M, computed as l, onUnmounted as G, withDirectives as J, openBlock as a, createElementBlock as s, createElementVNode as p, renderSlot as f, createBlock as Q, Teleport as X, normalizeStyle as g, unref as v, toDisplayString as Y, withModifiers as Z, createVNode as ee, createCommentVNode as u, vShow as te } from "vue";
+import { usePopover as oe } from "../composables/usePopover.js";
+import { useClickOutside as ie } from "../composables/useClickOutside.js";
 import re from "./CuiIcon.vue.js";
-import { useMessages as ie } from "../composables/useMessages.js";
-const le = ["aria-labelledby"], ae = {
+import { useMessages as le } from "../composables/useMessages.js";
+const ae = ["aria-labelledby"], ne = {
   key: 0,
   style: {
     display: "flex",
@@ -12,12 +12,12 @@ const le = ["aria-labelledby"], ae = {
     gap: "calc(0.5rem * var(--cui-density-scale, 1))",
     padding: "calc(0.75rem * var(--cui-density-scale, 1)) calc(0.875rem * var(--cui-density-scale, 1)) calc(0.25rem * var(--cui-density-scale, 1))"
   }
-}, ne = ["id"], se = ["aria-label"], ce = {
+}, se = ["id"], ce = ["aria-label"], ue = {
   key: 1,
   style: {
     padding: "0 calc(0.875rem * var(--cui-density-scale, 1)) calc(0.75rem * var(--cui-density-scale, 1))"
   }
-}, pe = /* @__PURE__ */ K({
+}, ge = /* @__PURE__ */ U({
   __name: "CuiPopover",
   props: {
     title: {},
@@ -42,68 +42,68 @@ const le = ["aria-labelledby"], ae = {
       md: "var(--cui-button-radius, 0.375rem)",
       lg: "0.5rem",
       full: "9999px"
-    }, d = R, h = U(), o = S(!1);
-    let n = null, r = null;
+    }, d = R, h = q(), o = S(!1);
+    let n = null, i = null;
     M(
       () => e.visible,
       (t) => {
         t !== void 0 && (o.value = t);
       }
     );
-    const { referenceRef: C, floatingRef: b, arrowRef: E, floatingStyles: D, arrowStyle: B, currentSide: _ } = te({
+    const { referenceRef: C, floatingRef: b, arrowRef: E, floatingStyles: D, arrowStyle: B, currentSide: _, isPositioned: P } = oe({
       placement: l(() => e.placement),
       offsetDistance: l(() => e.offset ?? 10),
       arrow: !e.noArrow
     }), w = S(null);
-    oe(
+    ie(
       () => [w.value, b.value],
       () => {
-        o.value && e.trigger === "click" && i();
+        o.value && e.trigger === "click" && r();
       }
     ), M(o, (t) => {
-      typeof document > "u" || (t ? document.addEventListener("keydown", m) : document.removeEventListener("keydown", m));
+      typeof document > "u" || (t ? document.addEventListener("keydown", y) : document.removeEventListener("keydown", y));
     });
-    function v() {
-      e.disabled || (r && (clearTimeout(r), r = null), e.showDelay > 0 ? n = setTimeout(() => {
+    function m() {
+      e.disabled || (i && (clearTimeout(i), i = null), e.showDelay > 0 ? n = setTimeout(() => {
         o.value = !0, d("update:visible", !0);
       }, e.showDelay) : (o.value = !0, d("update:visible", !0)));
     }
-    function i() {
-      n && (clearTimeout(n), n = null), e.hideDelay > 0 ? r = setTimeout(() => {
+    function r() {
+      n && (clearTimeout(n), n = null), e.hideDelay > 0 ? i = setTimeout(() => {
         o.value = !1, d("update:visible", !1);
       }, e.hideDelay) : (o.value = !1, d("update:visible", !1));
     }
     function I() {
-      o.value ? i() : v();
-    }
-    function P() {
-      (e.trigger === "hover" || e.trigger === "hover-focus") && v();
+      o.value ? r() : m();
     }
     function z() {
-      (e.trigger === "hover" || e.trigger === "hover-focus") && i();
+      (e.trigger === "hover" || e.trigger === "hover-focus") && m();
     }
     function F() {
-      (e.trigger === "focus" || e.trigger === "hover-focus") && v();
+      (e.trigger === "hover" || e.trigger === "hover-focus") && r();
     }
     function L() {
-      (e.trigger === "focus" || e.trigger === "hover-focus") && i();
+      (e.trigger === "focus" || e.trigger === "hover-focus") && m();
     }
     function V() {
-      e.trigger === "click" && I();
-    }
-    function m(t) {
-      t.key === "Escape" && o.value && i();
+      (e.trigger === "focus" || e.trigger === "hover-focus") && r();
     }
     function $() {
-      (e.trigger === "hover" || e.trigger === "hover-focus") && r && (clearTimeout(r), r = null);
+      e.trigger === "click" && I();
+    }
+    function y(t) {
+      t.key === "Escape" && o.value && r();
     }
     function A() {
-      (e.trigger === "hover" || e.trigger === "hover-focus") && i();
+      (e.trigger === "hover" || e.trigger === "hover-focus") && i && (clearTimeout(i), i = null);
+    }
+    function H() {
+      (e.trigger === "hover" || e.trigger === "hover-focus") && r();
     }
-    q(() => {
-      n && clearTimeout(n), r && clearTimeout(r), typeof document < "u" && document.removeEventListener("keydown", m);
+    G(() => {
+      n && clearTimeout(n), i && clearTimeout(i), typeof document < "u" && document.removeEventListener("keydown", y);
     });
-    const k = l(() => e.title || h.header), H = l(() => !!h.footer), x = l(() => e.title ? "cui-popover-title" : void 0), N = l(() => {
+    const k = l(() => e.title || h.header), N = l(() => !!h.footer), x = l(() => e.title ? "cui-popover-title" : void 0), W = l(() => {
       const t = {
         zIndex: "9998",
         background: "var(--cui-surface-base)",
@@ -117,7 +117,7 @@ const le = ["aria-labelledby"], ae = {
         overflow: "hidden"
       };
       return e.width && (t.width = e.width), t;
-    }), W = l(() => ({
+    }), j = l(() => ({
       width: "8px",
       height: "8px",
       background: "var(--cui-surface-base)",
@@ -125,46 +125,46 @@ const le = ["aria-labelledby"], ae = {
       transform: "rotate(45deg)",
       position: "absolute",
       ...B.value
-    })), j = {
+    })), O = {
       top: "polygon(0% 0%, 100% 0%, 100% 100%)",
       bottom: "polygon(0% 0%, 0% 100%, 100% 100%)",
       left: "polygon(0% 0%, 100% 0%, 100% 100%)",
       right: "polygon(0% 0%, 0% 100%, 100% 100%)"
-    }, O = ie();
-    return (t, ue) => G((a(), s("div", {
+    }, K = le();
+    return (t, de) => J((a(), s("div", {
       ref_key: "wrapperRef",
       ref: w,
       style: { display: "inline-flex" },
-      onMouseenter: P,
-      onMouseleave: z,
-      onFocusin: F,
-      onFocusout: L,
-      onClick: V
+      onMouseenter: z,
+      onMouseleave: F,
+      onFocusin: L,
+      onFocusout: V,
+      onClick: $
     }, [
-      y("div", {
+      p("div", {
         ref_key: "referenceRef",
         ref: C,
         style: { display: "inline-flex" }
       }, [
         f(t.$slots, "default")
       ], 512),
-      (a(), J(Q, { to: "body" }, [
+      (a(), Q(X, { to: "body" }, [
         o.value ? (a(), s("div", {
           key: 0,
           ref_key: "floatingRef",
           ref: b,
-          style: p({ ...g(D), ...N.value }),
+          style: g({ ...v(D), ...W.value, visibility: v(P) ? "visible" : "hidden" }),
           role: "dialog",
           "aria-labelledby": x.value,
-          onMouseenter: $,
-          onMouseleave: A
+          onMouseenter: A,
+          onMouseleave: H
         }, [
-          k.value ? (a(), s("div", ae, [
+          k.value ? (a(), s("div", ne, [
             f(t.$slots, "header", {}, () => [
-              y("span", {
+              p("span", {
                 id: x.value,
                 style: { fontSize: "0.875rem", fontWeight: "600", color: "var(--cui-text-body)" }
-              }, X(c.title), 9, ne)
+              }, Y(c.title), 9, se)
             ]),
             c.closable ? (a(), s("button", {
               key: 0,
@@ -184,17 +184,17 @@ const le = ["aria-labelledby"], ae = {
                 marginTop: "calc(-0.0625rem * var(--cui-density-scale, 1))",
                 marginRight: "calc(-0.125rem * var(--cui-density-scale, 1))"
               },
-              "aria-label": g(O).close,
-              onClick: Y(i, ["stop"])
+              "aria-label": v(K).close,
+              onClick: Z(r, ["stop"])
             }, [
-              Z(re, {
+              ee(re, {
                 name: "x",
                 size: "0.8125rem"
               })
-            ], 8, se)) : u("", !0)
+            ], 8, ce)) : u("", !0)
           ])) : u("", !0),
-          y("div", {
-            style: p({
+          p("div", {
+            style: g({
               padding: k.value ? "calc(0.25rem * var(--cui-density-scale, 1)) calc(0.875rem * var(--cui-density-scale, 1)) calc(0.75rem * var(--cui-density-scale, 1))" : "calc(0.75rem * var(--cui-density-scale, 1)) calc(0.875rem * var(--cui-density-scale, 1))",
               fontSize: "0.875rem",
               lineHeight: "1.55",
@@ -203,25 +203,25 @@ const le = ["aria-labelledby"], ae = {
           }, [
             f(t.$slots, "content")
           ], 4),
-          H.value ? (a(), s("div", ce, [
+          N.value ? (a(), s("div", ue, [
             f(t.$slots, "footer")
           ])) : u("", !0),
           c.noArrow ? u("", !0) : (a(), s("div", {
             key: 2,
             ref_key: "arrowRef",
             ref: E,
-            style: p({
-              ...W.value,
-              clipPath: j[g(_)] || void 0
+            style: g({
+              ...j.value,
+              clipPath: O[v(_)] || void 0
             })
           }, null, 4))
-        ], 44, le)) : u("", !0)
+        ], 44, ae)) : u("", !0)
       ]))
     ], 544)), [
-      [ee, !c.hidden]
+      [te, !c.hidden]
     ]);
   }
 });
 export {
-  pe as default
+  ge as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CuiTimePicker.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTimePicker.vue"],"names":[],"mappings":"AAiRA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,kBAAmB,SAAQ,aAAa,EAAE,gBAAgB;IACzE,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB;IACnB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0HD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;;;;;;;;;;;UAnIQ,IAAI,GAAG,IAAI,GAAG,IAAI;;gBAZZ,MAAM;YAEV,gBAAgB;gBAEZ,MAAM;;AA4ZrB,wBASG"}
+{"version":3,"file":"CuiTimePicker.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTimePicker.vue"],"names":[],"mappings":"AAyRA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,kBAAmB,SAAQ,aAAa,EAAE,gBAAgB;IACzE,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB;IACnB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8HD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;;;;;;;;;;;UAvIQ,IAAI,GAAG,IAAI,GAAG,IAAI;;gBAZZ,MAAM;YAEV,gBAAgB;gBAEZ,MAAM;;AAoarB,wBASG"}

package/dist/components/CuiTimePicker.vue.js

@@ -1,9 +1,10 @@
-import { defineComponent as H, ref as v, watch as V, onMounted as L, computed as d, useTemplateRef as O, withDirectives as j, openBlock as g, createElementBlock as h, toDisplayString as $, createCommentVNode as k, createVNode as s, withCtx as f, createElementVNode as p, normalizeStyle as x, createTextVNode as A, vShow as q } from "vue";
+import { defineComponent as L, computed as u, ref as v, watch as V, onMounted as O, useTemplateRef as Z, withDirectives as j, openBlock as h, createElementBlock as S, toDisplayString as k, createCommentVNode as z, createVNode as s, withCtx as f, createElementVNode as p, normalizeStyle as x, createTextVNode as A, vShow as q } from "vue";
 import F from "./CuiPopover.vue.js";
 import C from "./CuiInputStepper.vue.js";
-import z from "./CuiButton.vue.js";
+import P from "./CuiButton.vue.js";
 import G from "./CuiIcon.vue.js";
-const J = {
+import { INPUT_SIZE_SCALE as J } from "../utils/sizing.js";
+const K = {
   key: 0,
   style: {
     display: "block",
@@ -12,10 +13,10 @@ const J = {
     fontWeight: "500",
     color: "var(--cui-text-secondary)"
   }
-}, K = { style: { display: "flex", alignItems: "center", gap: "calc(0.5rem * var(--cui-density-scale, 1))", padding: "calc(0.5rem * var(--cui-density-scale, 1))" } }, Q = {
+}, Q = { style: { display: "flex", alignItems: "center", gap: "calc(0.5rem * var(--cui-density-scale, 1))", padding: "calc(0.5rem * var(--cui-density-scale, 1))" } }, X = {
   key: 0,
   style: { display: "flex", flexDirection: "column", gap: "calc(0.125rem * var(--cui-density-scale, 1))", marginLeft: "calc(0.25rem * var(--cui-density-scale, 1))" }
-}, te = /* @__PURE__ */ H({
+}, ie = /* @__PURE__ */ L({
   __name: "CuiTimePicker",
   props: {
     modelValue: { default: "" },
@@ -30,69 +31,69 @@ const J = {
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(l, { expose: w, emit: P }) {
-    const a = l, I = P, i = v(12), o = v(0), r = v("AM"), y = v(!1);
+  setup(i, { expose: w, emit: I }) {
+    const a = i, y = u(() => J[a.size]), T = I, l = v(12), o = v(0), r = v("AM"), g = v(!1);
     function b(t) {
       if (!t) return;
       const e = t.match(/^(\d{1,2}):(\d{2})$/);
       if (e) {
-        const u = parseInt(e[1]), D = parseInt(e[2]);
-        a.format === "12" ? (r.value = u >= 12 ? "PM" : "AM", i.value = u === 0 ? 12 : u > 12 ? u - 12 : u) : i.value = u, o.value = D;
+        const d = parseInt(e[1]), H = parseInt(e[2]);
+        a.format === "12" ? (r.value = d >= 12 ? "PM" : "AM", l.value = d === 0 ? 12 : d > 12 ? d - 12 : d) : l.value = d, o.value = H;
         return;
       }
       const n = t.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
-      n && (i.value = parseInt(n[1]), o.value = parseInt(n[2]), r.value = n[3].toUpperCase());
+      n && (l.value = parseInt(n[1]), o.value = parseInt(n[2]), r.value = n[3].toUpperCase());
     }
-    V(() => a.modelValue, b), L(() => b(a.modelValue));
-    function S() {
-      return a.format === "24" ? `${String(i.value).padStart(2, "0")}:${String(o.value).padStart(2, "0")}` : `${String(i.value).padStart(2, "0")}:${String(o.value).padStart(2, "0")} ${r.value}`;
+    V(() => a.modelValue, b), O(() => b(a.modelValue));
+    function M() {
+      return a.format === "24" ? `${String(l.value).padStart(2, "0")}:${String(o.value).padStart(2, "0")}` : `${String(l.value).padStart(2, "0")}:${String(o.value).padStart(2, "0")} ${r.value}`;
     }
     function m() {
-      I("update:modelValue", S());
+      T("update:modelValue", M());
     }
-    const M = d(() => a.modelValue ? S() : "");
-    d(() => a.format === "24" ? "##:##" : "##:## AA");
-    const T = d(
+    const $ = u(() => a.modelValue ? M() : "");
+    u(() => a.format === "24" ? "##:##" : "##:## AA");
+    const E = u(
       () => a.placeholder ?? (a.format === "24" ? "hh:mm" : "hh:mm AM")
     );
-    d(() => a.modelValue ? a.format === "24" ? `${String(i.value).padStart(2, "0")}${String(o.value).padStart(2, "0")}` : `${String(i.value).padStart(2, "0")}${String(o.value).padStart(2, "0")}${r.value}` : "");
-    const W = d(() => a.format === "12" ? 1 : 0), B = d(() => a.format === "12" ? 12 : 23);
-    function E(t) {
-      i.value = t, m();
-    }
+    u(() => a.modelValue ? a.format === "24" ? `${String(l.value).padStart(2, "0")}${String(o.value).padStart(2, "0")}` : `${String(l.value).padStart(2, "0")}${String(o.value).padStart(2, "0")}${r.value}` : "");
+    const W = u(() => a.format === "12" ? 1 : 0), B = u(() => a.format === "12" ? 12 : 23);
     function N(t) {
+      l.value = t, m();
+    }
+    function U(t) {
       o.value = t, m();
     }
-    V(y, (t) => {
+    V(g, (t) => {
       t && b(a.modelValue);
     });
-    const c = O("rootEl");
-    function R(t) {
+    const c = Z("rootEl");
+    function D(t) {
       var e;
       (e = c.value) == null || e.focus(t);
     }
-    function U() {
+    function R() {
       var t;
       (t = c.value) == null || t.blur();
     }
-    return w({ el: c, focus: R, blur: U }), (t, e) => j((g(), h("div", {
+    return w({ el: c, focus: D, blur: R }), (t, e) => j((h(), S("div", {
       ref_key: "rootEl",
       ref: c
     }, [
-      l.label ? (g(), h("label", J, $(l.label), 1)) : k("", !0),
+      i.label ? (h(), S("label", K, k(i.label), 1)) : z("", !0),
       s(F, {
-        visible: y.value,
-        "onUpdate:visible": e[2] || (e[2] = (n) => y.value = n),
+        visible: g.value,
+        "onUpdate:visible": e[2] || (e[2] = (n) => g.value = n),
         placement: "bottom",
         closable: !1,
         "no-arrow": "",
         width: "auto",
-        disabled: l.disabled
+        disabled: i.disabled
       }, {
         content: f(() => [
-          p("div", K, [
+          p("div", Q, [
             s(C, {
-              "model-value": i.value,
+              "model-value": l.value,
               min: W.value,
               max: B.value,
               step: 1,
@@ -100,22 +101,22 @@ const J = {
               size: "sm",
               pad: 2,
               wrap: "",
-              "onUpdate:modelValue": E
+              "onUpdate:modelValue": N
             }, null, 8, ["model-value", "min", "max"]),
             e[5] || (e[5] = p("span", { style: { fontSize: "1.25rem", fontWeight: "700", color: "var(--cui-text-body)", lineHeight: "1" } }, ":", -1)),
             s(C, {
               "model-value": o.value,
               min: 0,
               max: 59,
-              step: l.minuteStep,
+              step: i.minuteStep,
               orientation: "vertical",
               size: "sm",
               pad: 2,
               wrap: "",
-              "onUpdate:modelValue": N
+              "onUpdate:modelValue": U
             }, null, 8, ["model-value", "step"]),
-            l.format === "12" ? (g(), h("div", Q, [
-              s(z, {
+            i.format === "12" ? (h(), S("div", X, [
+              s(P, {
                 variant: "ghost",
                 size: "xs",
                 style: x({
@@ -134,7 +135,7 @@ const J = {
                 ])]),
                 _: 1
               }, 8, ["style"]),
-              s(z, {
+              s(P, {
                 variant: "ghost",
                 size: "xs",
                 style: x({
@@ -153,24 +154,26 @@ const J = {
                 ])]),
                 _: 1
               }, 8, ["style"])
-            ])) : k("", !0)
+            ])) : z("", !0)
           ])
         ]),
         default: f(() => [
           p("div", {
+            class: "cui-time-picker__trigger",
             style: x({
               display: "inline-flex",
               alignItems: "center",
               gap: "calc(0.5rem * var(--cui-density-scale, 1))",
-              padding: "calc(0.4375rem * var(--cui-density-scale, 1)) calc(0.625rem * var(--cui-density-scale, 1))",
+              height: y.value.height,
+              padding: `0 ${y.value.px}`,
               border: "1px solid var(--cui-border-strong, var(--cui-border))",
               borderRadius: "var(--cui-button-radius, 0.375rem)",
               background: "var(--cui-surface-base, white)",
-              cursor: l.disabled ? "default" : "pointer",
-              opacity: l.disabled ? "0.5" : "1",
-              fontSize: "0.875rem",
-              color: M.value ? "var(--cui-text-body)" : "var(--cui-text-tertiary)",
-              minWidth: l.format === "24" ? "6rem" : "8rem"
+              cursor: i.disabled ? "default" : "pointer",
+              opacity: i.disabled ? "0.5" : "1",
+              fontSize: y.value.fontSize,
+              color: $.value ? "var(--cui-text-body)" : "var(--cui-text-tertiary)",
+              minWidth: i.format === "24" ? "6rem" : "8rem"
             })
           }, [
             s(G, {
@@ -178,16 +181,16 @@ const J = {
               size: "0.875rem",
               style: { color: "var(--cui-text-tertiary)", flexShrink: "0" }
             }),
-            p("span", null, $(M.value || T.value), 1)
+            p("span", null, k($.value || E.value), 1)
           ], 4)
         ]),
         _: 1
       }, 8, ["visible", "disabled"])
     ], 512)), [
-      [q, !l.hidden]
+      [q, !i.hidden]
     ]);
   }
 });
 export {
-  te as default
+  ie as default
 };

package/dist/composables/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/composables/useTheme.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,EAAE,WAAW,EAStC,CAAC;AAmCF;;;GAGG;AACH,wBAAgB,QAAQ;IAUpB,kCAAkC;;IAElC,sCAAsC;;IAEtC,iCAAiC;wBAbR,MAAM;IAe/B,+BAA+B;oBAXZ,MAAM;EAc5B"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/composables/useTheme.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,EAAE,WAAW,EAStC,CAAC;AAuDF;;;GAGG;AACH,wBAAgB,QAAQ;IAYpB,kCAAkC;;IAElC,sCAAsC;;IAEtC,iCAAiC;wBAbR,MAAM;IAe/B,+BAA+B;oBAXZ,MAAM;EAc5B"}

package/dist/composables/useTheme.js

@@ -1,33 +1,37 @@
-import { ref as n, watch as s } from "vue";
-import { safeGetItem as c, safeSetItem as u } from "../utils/storage.js";
-const d = [
-  { id: "mono", label: "Mono", description: "Monochrome — default theme" },
-  { id: "default", label: "Navy", description: "Navy blue" },
+import { ref as u, watch as d } from "vue";
+import { safeGetItem as n, safeSetItem as m } from "../utils/storage.js";
+const a = [
+  { id: "mono", label: "Mono", description: "Monochrome" },
+  { id: "default", label: "Navy", description: "Navy blue (base scale)" },
   { id: "forest", label: "Forest", description: "Natural green" },
   { id: "amber", label: "Amber", description: "Warm orange with warm grays" },
   { id: "azure", label: "Azure", description: "Vibrant blue" },
   { id: "teal", label: "Teal", description: "Cool teal" },
   { id: "violet", label: "Violet", description: "Rich purple" },
   { id: "ruby", label: "Ruby", description: "Bold red" }
-], a = "cui-theme", r = "cui-theme-";
-function m() {
-  return c(a) ?? "mono";
+], i = "cui-theme", s = "cui-theme-", f = new Set(a.map((e) => `${s}${e.id}`));
+function p() {
+  return n(i) ?? "default";
 }
-const o = n(m());
-function l(e) {
+const o = u(p());
+function c(e) {
   if (typeof document > "u") return;
   const t = document.documentElement;
-  for (const i of Array.from(t.classList))
-    i.startsWith(r) && t.classList.remove(i);
-  e !== "default" && t.classList.add(`${r}${e}`);
+  for (const r of Array.from(t.classList))
+    f.has(r) && t.classList.remove(r);
+  e !== "default" && t.classList.add(`${s}${e}`);
 }
-l(o.value);
-s(o, (e) => {
-  l(e), u(a, e);
+d(o, (e) => {
+  c(e), m(i, e);
 });
+let l = !1;
 function b() {
-  function e(i) {
-    o.value = i;
+  l || (l = !0, n(i) != null && c(o.value));
+}
+function E() {
+  b();
+  function e(r) {
+    o.value = r;
   }
   function t() {
     return o.value;
@@ -36,7 +40,7 @@ function b() {
     /** Current theme ID (reactive) */
     theme: o,
     /** List of available theme presets */
-    presets: d,
+    presets: a,
     /** Set the active theme by ID */
     setTheme: e,
     /** Get the current theme ID */
@@ -44,6 +48,6 @@ function b() {
   };
 }
 export {
-  d as THEME_PRESETS,
-  b as useTheme
+  a as THEME_PRESETS,
+  E as useTheme
 };

package/dist/version.js

@@ -1,4 +1,4 @@
-const o = "1.2.0";
+const o = "1.2.2";
 export {
   o as version
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itguy614/clean-ui",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "type": "module",
   "description": "A clean, dark-mode-ready Vue 3 component library — 100+ token-driven, themeable, accessible components.",
   "license": "MIT",
@@ -51,7 +51,6 @@
     "./dist/icons/lazy.js",
     "./dist/duplicate-guard.js",
     "./src/duplicate-guard.ts",
-    "./dist/composables/useTheme.js",
     "./dist/composables/useDensity.js"
   ],
   "scripts": {