@itguy614/clean-ui 0.3.1 → 1.0.0

package/dist/utils/color.js

@@ -0,0 +1,195 @@
+const l = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "success",
+  "error",
+  "warning",
+  "info",
+  "surface",
+  "surface-light",
+  "surface-dark"
+]);
+function u(e) {
+  return l.has(e);
+}
+function m(e, t = "currentColor") {
+  return e ? u(e) ? `var(--cui-${e})` : e : t;
+}
+function p(e, t, s) {
+  e = (e % 360 + 360) % 360, t = Math.max(0, Math.min(1, t)), s = Math.max(0, Math.min(1, s));
+  const n = s * t, o = n * (1 - Math.abs(e / 60 % 2 - 1)), f = s - n;
+  let r = 0, c = 0, a = 0;
+  return e < 60 ? (r = n, c = o) : e < 120 ? (r = o, c = n) : e < 180 ? (c = n, a = o) : e < 240 ? (c = o, a = n) : e < 300 ? (r = o, a = n) : (r = n, a = o), {
+    r: Math.round((r + f) * 255),
+    g: Math.round((c + f) * 255),
+    b: Math.round((a + f) * 255)
+  };
+}
+function M(e, t, s) {
+  e /= 255, t /= 255, s /= 255;
+  const n = Math.max(e, t, s), o = Math.min(e, t, s), f = n - o;
+  let r = 0;
+  return f !== 0 && (n === e ? r = 60 * ((t - s) / f % 6) : n === t ? r = 60 * ((s - e) / f + 2) : r = 60 * ((e - t) / f + 4)), r < 0 && (r += 360), {
+    h: r,
+    s: n === 0 ? 0 : f / n,
+    v: n
+  };
+}
+function i(e, t, s) {
+  const n = (o) => Math.round(o).toString(16).padStart(2, "0");
+  return `#${n(e)}${n(t)}${n(s)}`;
+}
+function d(e) {
+  const t = e.replace("#", "");
+  return t.length === 3 ? {
+    r: parseInt(t[0] + t[0], 16),
+    g: parseInt(t[1] + t[1], 16),
+    b: parseInt(t[2] + t[2], 16)
+  } : t.length === 6 || t.length === 8 ? {
+    r: parseInt(t.slice(0, 2), 16),
+    g: parseInt(t.slice(2, 4), 16),
+    b: parseInt(t.slice(4, 6), 16)
+  } : null;
+}
+function h(e, t, s) {
+  e /= 255, t /= 255, s /= 255;
+  const n = Math.max(e, t, s), o = Math.min(e, t, s), f = (n + o) / 2;
+  let r = 0, c = 0;
+  if (n !== o) {
+    const a = n - o;
+    c = f > 0.5 ? a / (2 - n - o) : a / (n + o), n === e ? r = 60 * ((t - s) / a % 6) : n === t ? r = 60 * ((s - e) / a + 2) : r = 60 * ((e - t) / a + 4), r < 0 && (r += 360);
+  }
+  return { h: Math.round(r), s: Math.round(c * 100), l: Math.round(f * 100) };
+}
+function b(e, t, s) {
+  t /= 100, s /= 100;
+  const n = (1 - Math.abs(2 * s - 1)) * t, o = n * (1 - Math.abs(e / 60 % 2 - 1)), f = s - n / 2;
+  let r = 0, c = 0, a = 0;
+  return e < 60 ? (r = n, c = o) : e < 120 ? (r = o, c = n) : e < 180 ? (c = n, a = o) : e < 240 ? (c = o, a = n) : e < 300 ? (r = o, a = n) : (r = n, a = o), {
+    r: Math.round((r + f) * 255),
+    g: Math.round((c + f) * 255),
+    b: Math.round((a + f) * 255)
+  };
+}
+function $(e) {
+  if (!e) return null;
+  if (e = e.trim(), e.startsWith("#")) {
+    const n = d(e);
+    return n ? { ...n, a: 1 } : null;
+  }
+  const t = e.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/);
+  if (t)
+    return {
+      r: parseInt(t[1]),
+      g: parseInt(t[2]),
+      b: parseInt(t[3]),
+      a: t[4] !== void 0 ? parseFloat(t[4]) : 1
+    };
+  const s = e.match(/hsla?\(\s*(\d+)\s*,\s*(\d+)%?\s*,\s*(\d+)%?\s*(?:,\s*([\d.]+))?\s*\)/);
+  return s ? { ...b(parseInt(s[1]), parseInt(s[2]), parseInt(s[3])), a: s[4] !== void 0 ? parseFloat(s[4]) : 1 } : null;
+}
+function g(e, t, s, n, o) {
+  if (o === "hex")
+    return i(e, t, s);
+  if (o === "rgb")
+    return n < 1 ? `rgba(${e}, ${t}, ${s}, ${n.toFixed(2)})` : `rgb(${e}, ${t}, ${s})`;
+  if (o === "hsl") {
+    const f = h(e, t, s);
+    return n < 1 ? `hsla(${f.h}, ${f.s}%, ${f.l}%, ${n.toFixed(2)})` : `hsl(${f.h}, ${f.s}%, ${f.l}%)`;
+  }
+  return i(e, t, s);
+}
+const I = [
+  "#000000",
+  "#434343",
+  "#666666",
+  "#999999",
+  "#b7b7b7",
+  "#cccccc",
+  "#d9d9d9",
+  "#efefef",
+  "#f3f3f3",
+  "#ffffff",
+  "#980000",
+  "#ff0000",
+  "#ff9900",
+  "#ffff00",
+  "#00ff00",
+  "#00ffff",
+  "#4a86e8",
+  "#0000ff",
+  "#9900ff",
+  "#ff00ff"
+], x = [
+  "#f44336",
+  "#e91e63",
+  "#9c27b0",
+  "#673ab7",
+  "#3f51b5",
+  "#2196f3",
+  "#03a9f4",
+  "#00bcd4",
+  "#009688",
+  "#4caf50",
+  "#8bc34a",
+  "#cddc39",
+  "#ffeb3b",
+  "#ffc107",
+  "#ff9800",
+  "#ff5722",
+  "#795548",
+  "#9e9e9e",
+  "#607d8b"
+], T = [
+  "#ef4444",
+  "#f97316",
+  "#eab308",
+  "#22c55e",
+  "#14b8a6",
+  "#06b6d4",
+  "#3b82f6",
+  "#6366f1",
+  "#8b5cf6",
+  "#a855f7",
+  "#d946ef",
+  "#ec4899",
+  "#f43f5e",
+  "#64748b",
+  "#78716c"
+];
+function v() {
+  if (typeof window > "u") return [];
+  const e = ["primary", "secondary", "success", "error", "warning", "info"], t = ["bg", "border", "", "hover", "active"], s = [], n = document.createElement("div");
+  n.style.position = "absolute", n.style.visibility = "hidden", document.body.appendChild(n);
+  function o(f) {
+    n.style.color = f;
+    const c = getComputedStyle(n).color.match(/(\d+)/g);
+    return c && c.length >= 3 ? i(parseInt(c[0]), parseInt(c[1]), parseInt(c[2])) : null;
+  }
+  for (const f of e)
+    for (const r of t) {
+      const c = r ? `var(--cui-${f}-${r})` : `var(--cui-${f})`, a = o(c);
+      a && !s.includes(a) && s.push(a);
+    }
+  for (const f of ["50", "200", "400", "600", "800", "950"]) {
+    const r = o(`var(--color-surface-${f})`);
+    r && !s.includes(r) && s.push(r);
+  }
+  return document.body.removeChild(n), s;
+}
+export {
+  I as PALETTE_BASIC,
+  x as PALETTE_MATERIAL,
+  T as PALETTE_TAILWIND,
+  g as formatColor,
+  v as getThemePalette,
+  d as hexToRgb,
+  b as hslToRgb,
+  p as hsvToRgb,
+  u as isColorRole,
+  $ as parseColor,
+  m as resolveColor,
+  i as rgbToHex,
+  h as rgbToHsl,
+  M as rgbToHsv
+};

package/dist/utils/colorIconMap.js

@@ -0,0 +1,11 @@
+const c = {
+  success: "check-circle",
+  error: "x-circle",
+  warning: "warning-circle",
+  info: "info",
+  primary: "info",
+  secondary: "info"
+};
+export {
+  c as COLOR_ICON_MAP
+};

package/dist/utils/date.js

@@ -0,0 +1,114 @@
+const D = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+], p = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+], S = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function Y(e, t) {
+  return new Date(e, t + 1, 0).getDate();
+}
+function A(e, t) {
+  return new Date(e, t, 1).getDay();
+}
+function g(e, t) {
+  return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+}
+function h(e) {
+  return g(e, /* @__PURE__ */ new Date());
+}
+function y(e, t) {
+  const r = e.getFullYear(), n = e.getMonth(), i = e.getDate();
+  return t.replace("YYYY", String(r)).replace("YY", String(r).slice(-2)).replace("MMMM", D[n]).replace("MMM", p[n]).replace("MM", String(n + 1).padStart(2, "0")).replace(new RegExp("(?<!M)M(?!M)"), String(n + 1)).replace("DD", String(i).padStart(2, "0")).replace(new RegExp("(?<!D)D(?!D)"), String(i));
+}
+function m(e, t) {
+  if (!e || !t) return null;
+  let r = -1, n = -1, i = 1;
+  const c = t.indexOf("YYYY"), o = c === -1 ? t.indexOf("YY") : -1, M = t.indexOf("MMMM"), s = M === -1 ? t.indexOf("MMM") : -1, l = M === -1 && s === -1 ? t.indexOf("MM") : -1, u = t.indexOf("DD");
+  if (c !== -1) {
+    const a = e.slice(c, c + 4);
+    r = parseInt(a, 10);
+  } else if (o !== -1) {
+    const a = e.slice(o, o + 2);
+    r = 2e3 + parseInt(a, 10);
+  }
+  if (l !== -1) {
+    const a = e.slice(l, l + 2);
+    n = parseInt(a, 10) - 1;
+  } else if (s !== -1) {
+    const a = e.slice(s, s + 3);
+    n = p.findIndex((f) => f.toLowerCase() === a.toLowerCase());
+  } else if (M !== -1) {
+    const a = D.find((f) => e.includes(f));
+    a && (n = D.indexOf(a));
+  }
+  if (u !== -1) {
+    const a = e.slice(u, u + 2);
+    i = parseInt(a, 10);
+  }
+  return isNaN(r) || r < 0 || n < 0 || n > 11 || isNaN(i) ? null : new Date(r, n, i);
+}
+function O(e) {
+  return e.replace("YYYY", "####").replace("YY", "##").replace("MMMM", "AAAAAAAAAA").replace("MMM", "AAA").replace("MM", "##").replace(new RegExp("(?<!#)M(?!M)"), "##").replace("DD", "##").replace(new RegExp("(?<!#)D(?!D)"), "##");
+}
+function N(e) {
+  return e.replace(/[^0-9a-zA-Z]/g, "");
+}
+function T(e) {
+  if (!e) return null;
+  const t = e.split("-");
+  if (t.length < 3) return null;
+  const r = new Date(parseInt(t[0]), parseInt(t[1]) - 1, parseInt(t[2]));
+  return isNaN(r.getTime()) ? null : r;
+}
+function d(e) {
+  const t = e.getFullYear(), r = String(e.getMonth() + 1).padStart(2, "0"), n = String(e.getDate()).padStart(2, "0");
+  return `${t}-${r}-${n}`;
+}
+function x(e, t) {
+  if (t.minDate && e < t.minDate || t.maxDate && e > t.maxDate || t.disabledDate && t.disabledDate(e)) return !0;
+  if (t.disabledDates) {
+    const r = d(e);
+    for (const n of t.disabledDates)
+      if (typeof n == "string") {
+        if (n === r) return !0;
+      } else if (r >= n.from && r <= n.to) return !0;
+  }
+  return !1;
+}
+export {
+  S as DAY_NAMES_SHORT,
+  D as MONTH_NAMES,
+  p as MONTH_NAMES_SHORT,
+  d as dateToIso,
+  Y as daysInMonth,
+  A as firstDayOfMonth,
+  y as formatDate,
+  O as formatToMask,
+  N as formatToRaw,
+  x as isDateDisabled,
+  g as isSameDay,
+  h as isToday,
+  T as isoToDate,
+  m as parseFormattedDate
+};

package/dist/utils/liveRegion.d.ts

@@ -0,0 +1,20 @@
+import type { CuiColor, LiveRegionMode } from "../types/common";
+/** ARIA attributes for a live region — spread onto the root element via `v-bind`. */
+export interface LiveRegionAttrs {
+    role?: "alert" | "status";
+    "aria-live": LiveRegionMode;
+    "aria-atomic"?: "true";
+}
+/**
+ * Resolve ARIA live-region attributes for a feedback component from its color
+ * severity, with an optional explicit override.
+ *
+ *  - `error`           → assertive (`role="alert"`, interrupts)
+ *  - everything else   → polite    (`role="status"`, waits for idle)
+ *  - override `"off"`  → no live region at all
+ *
+ * `aria-atomic="true"` ensures the whole message is re-read on change rather
+ * than just the diff (also implied by `role`, set explicitly for older AT).
+ */
+export declare function resolveLiveRegion(color: CuiColor, override?: LiveRegionMode): LiveRegionAttrs;
+//# sourceMappingURL=liveRegion.d.ts.map

package/dist/utils/liveRegion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"liveRegion.d.ts","sourceRoot":"","sources":["../../src/utils/liveRegion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEhE,qFAAqF;AACrF,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,WAAW,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAKD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,QAAQ,EACf,QAAQ,CAAC,EAAE,cAAc,GACxB,eAAe,CAajB"}

package/dist/utils/liveRegion.js

@@ -0,0 +1,12 @@
+const i = /* @__PURE__ */ new Set(["error"]);
+function o(r, t) {
+  const e = t ?? (i.has(r) ? "assertive" : "polite");
+  return e === "off" ? { "aria-live": "off" } : {
+    role: e === "assertive" ? "alert" : "status",
+    "aria-live": e,
+    "aria-atomic": "true"
+  };
+}
+export {
+  o as resolveLiveRegion
+};

package/dist/utils/resolvers.d.ts

@@ -0,0 +1,48 @@
+import type { FormResolver, FormValues } from "../components/form-context";
+/** Minimal shape of a zod schema's `safeParse` result. */
+interface ZodLikeSchema {
+    safeParse: (value: unknown) => {
+        success: boolean;
+        error?: {
+            issues: Array<{
+                path: Array<string | number>;
+                message: string;
+            }>;
+        };
+    };
+}
+/** Minimal shape of valibot's `safeParse(schema, value)` return. */
+interface ValibotSafeParseResult {
+    success: boolean;
+    issues?: Array<{
+        message: string;
+        path?: Array<{
+            key: string | number;
+        }>;
+    }>;
+}
+/**
+ * Adapt a zod schema (or anything with a compatible `safeParse`) into a
+ * `CuiForm` resolver. The first issue per field wins.
+ *
+ * ```ts
+ * import { z } from "zod";
+ * const schema = z.object({ email: z.string().email() });
+ * const resolver = zodResolver(schema);
+ * // <CuiForm :resolver="resolver" />
+ * ```
+ */
+export declare function zodResolver(schema: ZodLikeSchema): FormResolver;
+/**
+ * Adapt valibot's `safeParse` into a `CuiForm` resolver. Pass a thunk that runs
+ * `safeParse(schema, values)` so this stays dependency-free.
+ *
+ * ```ts
+ * import * as v from "valibot";
+ * const schema = v.object({ email: v.pipe(v.string(), v.email()) });
+ * const resolver = valibotResolver((values) => v.safeParse(schema, values));
+ * ```
+ */
+export declare function valibotResolver(run: (values: FormValues) => ValibotSafeParseResult): FormResolver;
+export {};
+//# sourceMappingURL=resolvers.d.ts.map

package/dist/utils/resolvers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolvers.d.ts","sourceRoot":"","sources":["../../src/utils/resolvers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAc,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAMvF,0DAA0D;AAC1D,UAAU,aAAa;IACrB,SAAS,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK;QAC7B,OAAO,EAAE,OAAO,CAAC;QACjB,KAAK,CAAC,EAAE;YAAE,MAAM,EAAE,KAAK,CAAC;gBAAE,IAAI,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;gBAAC,OAAO,EAAE,MAAM,CAAA;aAAE,CAAC,CAAA;SAAE,CAAC;KAC9E,CAAC;CACH;AAED,oEAAoE;AACpE,UAAU,sBAAsB;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAC;YAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;SAAE,CAAC,CAAA;KAAE,CAAC,CAAC;CAC7E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,aAAa,GAAG,YAAY,CAW/D;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,sBAAsB,GAClD,YAAY,CAWd"}

package/dist/utils/resolvers.js

@@ -0,0 +1,28 @@
+function i(t) {
+  return (n) => {
+    const s = t.safeParse(n);
+    if (s.success || !s.error) return {};
+    const r = {};
+    for (const o of s.error.issues) {
+      const e = o.path.join(".");
+      e && !(e in r) && (r[e] = o.message);
+    }
+    return r;
+  };
+}
+function c(t) {
+  return (n) => {
+    const s = t(n);
+    if (s.success || !s.issues) return {};
+    const r = {};
+    for (const o of s.issues) {
+      const e = (o.path ?? []).map((u) => u.key).join(".");
+      e && !(e in r) && (r[e] = o.message);
+    }
+    return r;
+  };
+}
+export {
+  c as valibotResolver,
+  i as zodResolver
+};

package/dist/utils/responsive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"responsive.d.ts","sourceRoot":"","sources":["../../src/utils/responsive.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsB,eAAe,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAoB,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEvF;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EACjC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,EACrC,YAAY,EAAE,CAAC,EACf,UAAU,EAAE,gBAAgB,GAC3B,CAAC,CAoBH;AA4CD,wBAAgB,YAAY,CAAC,OAAO,EAAE,eAAe,GAAG,MAAM,CAE7D;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAOnD,CAAC"}
+{"version":3,"file":"responsive.d.ts","sourceRoot":"","sources":["../../src/utils/responsive.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsB,eAAe,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAoB,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEvF;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EACjC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,EACrC,YAAY,EAAE,CAAC,EACf,UAAU,EAAE,gBAAgB,GAC3B,CAAC,CAoBH;AA4CD,wBAAgB,YAAY,CAAC,OAAO,EAAE,eAAe,GAAG,MAAM,CAI7D;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAOnD,CAAC"}

package/dist/utils/responsive.js

@@ -0,0 +1,68 @@
+import { BREAKPOINT_ORDER as t } from "../composables/useBreakpoint.js";
+function p(r, e, n) {
+  if (r === void 0) return e;
+  if (typeof r != "object") return r;
+  if (n === "base")
+    return e;
+  const s = t.indexOf(n);
+  for (let m = s; m >= 0; m--) {
+    const o = t[m];
+    if (r[o] !== void 0)
+      return r[o];
+  }
+  return e;
+}
+const c = {
+  0: "0",
+  px: "1px",
+  "0.5": "0.125rem",
+  1: "0.25rem",
+  "1.5": "0.375rem",
+  2: "0.5rem",
+  "2.5": "0.625rem",
+  3: "0.75rem",
+  "3.5": "0.875rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  7: "1.75rem",
+  8: "2rem",
+  9: "2.25rem",
+  10: "2.5rem",
+  11: "2.75rem",
+  12: "3rem",
+  14: "3.5rem",
+  16: "4rem",
+  20: "5rem",
+  24: "6rem",
+  28: "7rem",
+  32: "8rem",
+  36: "9rem",
+  40: "10rem",
+  44: "11rem",
+  48: "12rem",
+  52: "13rem",
+  56: "14rem",
+  60: "15rem",
+  64: "16rem",
+  72: "18rem",
+  80: "20rem",
+  96: "24rem"
+};
+function x(r) {
+  const e = c[r] ?? "0";
+  return e === "0" ? "0" : `calc(${e} * var(--cui-density-gap-scale, 1))`;
+}
+const f = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px",
+  full: "100%"
+};
+export {
+  f as CONTAINER_WIDTHS,
+  p as resolveResponsive,
+  x as spacingToCss
+};

package/dist/utils/sizing.d.ts

@@ -2,6 +2,18 @@
  * Shared size scales for form controls and buttons.
  * Single source of truth — all components import from here.
  */
+import type { CuiSize } from "../types/common";
+/** Canonical ordering of the size scale, smallest → largest. */
+export declare const SIZE_ORDER: readonly CuiSize[];
+/**
+ * Clamp a requested size to the nearest size a component actually supports.
+ * Components accept the full `CuiSize` union for API uniformity, then narrow
+ * to what they style. Out-of-range sizes map to the closest supported step.
+ *
+ *   clampSize("xl", ["sm", "md"]) // → "md"
+ *   clampSize("xs", ["sm", "md"]) // → "sm"
+ */
+export declare function clampSize<T extends CuiSize>(size: CuiSize, supported: readonly T[]): T;
 export interface SizeStyle {
     height: string;
     px: string;
@@ -10,6 +22,15 @@ export interface SizeStyle {
 export interface ButtonSizeStyle extends SizeStyle {
     gap: string;
 }
+/**
+ * Scale a single spatial value (padding, gap, indent) by the density scale.
+ * `"0.5rem"` → `"calc(0.5rem * var(--cui-density-scale, 1))"`. Default scale is
+ * 1, so the result is identical to the input when no density class is applied.
+ * Use this in JS-emitted size maps instead of hand-writing the calc() string.
+ */
+export declare const scaleDensity: (v: string) => string;
+/** Like {@link scaleDensity} but floored at the 24px minimum touch target (WCAG 2.5.8) — for interactive control heights. */
+export declare const scaleControlHeight: (v: string) => string;
 export declare const INPUT_SIZE_SCALE: Record<string, SizeStyle>;
 export declare const BUTTON_SIZE_SCALE: Record<string, ButtonSizeStyle>;
 export declare const TEXTAREA_SIZE_SCALE: Record<string, {

package/dist/utils/sizing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../src/utils/sizing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAMtD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAM7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAM5F,CAAC"}
+{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../src/utils/sizing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE/C,gEAAgE;AAChE,eAAO,MAAM,UAAU,EAAE,SAAS,OAAO,EAAmC,CAAC;AAE7E;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,OAAO,EACzC,IAAI,EAAE,OAAO,EACb,SAAS,EAAE,SAAS,CAAC,EAAE,GACtB,CAAC,CAaH;AAED,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,GAAG,EAAE,MAAM,CAAC;CACb;AAQD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,GAAG,MAAM,WAAyB,CAAC;AAChE,6HAA6H;AAC7H,eAAO,MAAM,kBAAkB,GAAI,GAAG,MAAM,WAAoC,CAAC;AAMjF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAMtD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAM7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAM5F,CAAC"}

package/dist/utils/sizing.js

@@ -0,0 +1,39 @@
+const x = ["xs", "sm", "md", "lg", "xl"];
+function h(r, t) {
+  if (t.includes(r)) return r;
+  const S = x.indexOf(r);
+  let n = t[0], i = 1 / 0;
+  for (const o of t) {
+    const s = Math.abs(x.indexOf(o) - S);
+    s < i && (i = s, n = o);
+  }
+  return n;
+}
+const p = "var(--cui-density-scale, 1)", c = (r) => `calc(${r} * ${p})`, f = (r) => `max(24px, calc(${r} * ${p}))`, e = c, m = f, g = {
+  xs: { height: m("1.75rem"), px: e("0.5rem"), fontSize: "0.75rem" },
+  sm: { height: m("2rem"), px: e("0.75rem"), fontSize: "0.8125rem" },
+  md: { height: m("2.5rem"), px: e("1rem"), fontSize: "1rem" },
+  lg: { height: m("3rem"), px: e("1.25rem"), fontSize: "1.0625rem" },
+  xl: { height: m("3.5rem"), px: e("1.5rem"), fontSize: "1.125rem" }
+}, l = {
+  xs: { height: m("1.75rem"), px: e("0.5rem"), fontSize: "0.75rem", gap: e("0.25rem") },
+  sm: { height: m("2rem"), px: e("0.75rem"), fontSize: "0.8125rem", gap: e("0.375rem") },
+  md: { height: m("2.5rem"), px: e("1rem"), fontSize: "1rem", gap: e("0.5rem") },
+  lg: { height: m("3rem"), px: e("1.5rem"), fontSize: "1.0625rem", gap: e("0.5rem") },
+  xl: { height: m("3.5rem"), px: e("2rem"), fontSize: "1.125rem", gap: e("0.625rem") }
+}, a = {
+  xs: { px: e("0.5rem"), py: e("0.25rem"), fontSize: "0.75rem" },
+  sm: { px: e("0.75rem"), py: e("0.375rem"), fontSize: "0.8125rem" },
+  md: { px: e("1rem"), py: e("0.5rem"), fontSize: "1rem" },
+  lg: { px: e("1.25rem"), py: e("0.625rem"), fontSize: "1.0625rem" },
+  xl: { px: e("1.5rem"), py: e("0.75rem"), fontSize: "1.125rem" }
+};
+export {
+  l as BUTTON_SIZE_SCALE,
+  g as INPUT_SIZE_SCALE,
+  x as SIZE_ORDER,
+  a as TEXTAREA_SIZE_SCALE,
+  h as clampSize,
+  f as scaleControlHeight,
+  c as scaleDensity
+};

package/package.json

@@ -1,29 +1,53 @@
 {
   "name": "@itguy614/clean-ui",
-  "version": "0.3.1",
+  "version": "1.0.0",
   "type": "module",
-  "description": "A clean, dark-mode-ready Vue UI component library",
+  "description": "A clean, dark-mode-ready Vue 3 component library — 100+ token-driven, themeable, accessible components.",
   "license": "MIT",
-  "author": "itguy614",
-  "main": "./dist/clean-ui.umd.cjs",
-  "module": "./dist/clean-ui.js",
+  "author": "Kurt Wolf",
+  "homepage": "https://itguy614.github.io/clean-ui/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/itguy614/clean-ui.git",
+    "directory": "packages/clean-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/itguy614/clean-ui/issues"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "component-library",
+    "components",
+    "ui",
+    "design-system",
+    "tailwindcss",
+    "dark-mode",
+    "typescript",
+    "accessible"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/clean-ui.js",
-      "require": "./dist/clean-ui.umd.cjs"
+      "import": "./dist/index.js"
     },
-    "./styles": "./dist/clean-ui.css"
+    "./styles": "./dist/clean-ui.css",
+    "./*": "./dist/*"
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md",
+    "LICENSE"
   ],
   "sideEffects": [
     "**/*.css"
   ],
   "scripts": {
-    "build": "vite build && vue-tsc --emitDeclarationOnly",
+    "build": "vite build && vue-tsc --emitDeclarationOnly && node scripts/postbuild.mjs",
+    "size": "node scripts/postbuild.mjs",
     "test": "vitest run",
     "test:watch": "vitest"
   },