@itguy614/clean-ui 0.3.1 → 1.0.0

package/dist/components/CuiBadge.vue2.js

@@ -0,0 +1,79 @@
+import { defineComponent as z, computed as s, withDirectives as c, openBlock as i, createElementBlock as l, normalizeClass as m, createElementVNode as b, normalizeStyle as d, createCommentVNode as v, vShow as f, renderSlot as h, withModifiers as x, unref as B, createVNode as C } from "vue";
+import { clampSize as E } from "../utils/sizing.js";
+import w from "./CuiIcon.vue.js";
+import { useMessages as M } from "../composables/useMessages.js";
+const N = { class: "cui-badge__content" }, V = ["aria-label"], O = /* @__PURE__ */ z({
+  __name: "CuiBadge",
+  props: {
+    variant: { default: "subtle" },
+    dot: { type: Boolean, default: !1 },
+    removable: { type: Boolean, default: !1 },
+    animation: { default: "none" },
+    rounded: { default: "full" },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "sm" }
+  },
+  emits: ["remove"],
+  setup(a, { emit: g }) {
+    const p = ["sm", "md"], t = a, y = {
+      none: "0",
+      sm: "0.25rem",
+      md: "var(--cui-button-radius, 0.375rem)",
+      lg: "0.5rem",
+      full: "9999px"
+    }, $ = g, k = s(() => {
+      const o = t.color, n = t.variant, e = {};
+      return n === "solid" ? (e.background = `var(--cui-${o}-solid, var(--cui-${o}))`, e.color = `var(--cui-${o}-text)`, e.border = "1px solid transparent") : n === "outline" ? (e.background = "transparent", e.color = `var(--cui-${o})`, e.border = `1px solid var(--cui-${o}-border)`) : (e.background = `var(--cui-${o}-bg)`, e.color = `var(--cui-${o})`, e.border = "1px solid transparent"), e.borderRadius = y[t.rounded], e;
+    }), u = s(() => ({
+      background: `var(--cui-${t.color})`
+    })), r = s(() => E(t.size, p)), S = M();
+    return (o, n) => a.dot ? c((i(), l("span", {
+      key: 0,
+      class: m(["cui-badge cui-badge--dot", [
+        `cui-badge--${r.value}`,
+        a.animation !== "none" ? `cui-badge--${a.animation}` : ""
+      ]])
+    }, [
+      b("span", {
+        class: "cui-badge__dot",
+        style: d(u.value)
+      }, null, 4),
+      a.animation === "ping" ? (i(), l("span", {
+        key: 0,
+        class: "cui-badge__ping",
+        style: d(u.value)
+      }, null, 4)) : v("", !0)
+    ], 2)), [
+      [f, !a.hidden]
+    ]) : c((i(), l("span", {
+      key: 1,
+      class: m(["cui-badge", [
+        `cui-badge--${r.value}`,
+        a.animation !== "none" ? `cui-badge--${a.animation}` : ""
+      ]]),
+      style: d(k.value)
+    }, [
+      b("span", N, [
+        h(o.$slots, "default", {}, void 0, !0)
+      ]),
+      a.removable ? (i(), l("button", {
+        key: 0,
+        type: "button",
+        class: "cui-badge__remove",
+        "aria-label": B(S).remove,
+        onClick: n[0] || (n[0] = x((e) => $("remove"), ["stop"]))
+      }, [
+        C(w, {
+          name: "x",
+          size: r.value === "sm" ? "0.625rem" : "0.75rem"
+        }, null, 8, ["size"])
+      ], 8, V)) : v("", !0)
+    ], 6)), [
+      [f, !a.hidden]
+    ]);
+  }
+});
+export {
+  O as default
+};

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

@@ -1,9 +1,7 @@
-import type { ButtonColor } from "./CuiButton.vue";
+import type { HideableProps, ColorableProps, LiveRegionProps } from "../types/common";
 export type BannerPosition = "top" | "bottom";
 export type BannerVariant = "solid" | "subtle";
-export interface CuiBannerProps {
-    /** Color role */
-    color?: ButtonColor;
+export interface CuiBannerProps extends HideableProps, ColorableProps, LiveRegionProps {
     /** Visual variant */
     variant?: BannerVariant;
     /** Sticky position */
@@ -14,8 +12,6 @@ export interface CuiBannerProps {
     noIcon?: boolean;
     /** Persist dismissal to localStorage under this key */
     storageKey?: string;
-    /** Hide the component */
-    hidden?: boolean;
 }
 declare var __VLS_4: {}, __VLS_6: {};
 type __VLS_Slots = {} & {
@@ -28,8 +24,8 @@ declare const __VLS_component: import("vue").DefineComponent<CuiBannerProps, {},
 }, string, import("vue").PublicProps, Readonly<CuiBannerProps> & Readonly<{
     onDismiss?: (() => any) | undefined;
 }>, {
-    color: ButtonColor;
     hidden: boolean;
+    color: import("..").CuiColor;
     variant: BannerVariant;
     position: BannerPosition;
     noIcon: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiBanner.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiBanner.vue"],"names":[],"mappings":"AAkHA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAKnD,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC7B,iBAAiB;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA+ID,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA2B/C,QAAA,MAAM,eAAe;;;;;WA1LX,WAAW;YAYV,OAAO;aAVN,aAAa;cAEZ,cAAc;YAIhB,OAAO;iBAFF,OAAO;6EA4LrB,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":"CuiBanner.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiBanner.vue"],"names":[],"mappings":"AAiHA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAMtF,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE/C,MAAM,WAAW,cAAe,SAAQ,aAAa,EAAE,cAAc,EAAE,eAAe;IACpF,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAiJD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA4B/C,QAAA,MAAM,eAAe;;;;;;;aAzLT,aAAa;cAEZ,cAAc;YAIhB,OAAO;iBAFF,OAAO;6EA6LrB,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/CuiBanner.vue.js

@@ -0,0 +1,81 @@
+import { defineComponent as g, ref as h, computed as s, withDirectives as k, openBlock as i, createElementBlock as l, mergeProps as b, createBlock as a, createCommentVNode as r, createElementVNode as x, renderSlot as c, withCtx as $, createVNode as C, vShow as B } from "vue";
+import d from "./CuiIcon.vue.js";
+import I from "./CuiButton.vue.js";
+import { COLOR_ICON_MAP as w } from "../utils/colorIconMap.js";
+import { resolveLiveRegion as z } from "../utils/liveRegion.js";
+const K = { style: { flex: "1", "font-size": "0.875rem", "font-weight": "500", "text-align": "center" } }, N = {
+  key: 1,
+  style: { "flex-shrink": "0", display: "flex", "align-items": "center", gap: "calc(0.5rem * var(--cui-density-scale, 1))" }
+}, L = /* @__PURE__ */ g({
+  __name: "CuiBanner",
+  props: {
+    variant: { default: "subtle" },
+    position: { default: "top" },
+    dismissible: { type: Boolean, default: !0 },
+    noIcon: { type: Boolean, default: !1 },
+    storageKey: {},
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    live: {}
+  },
+  emits: ["dismiss"],
+  setup(t, { emit: u }) {
+    const e = t, m = u, n = h(
+      e.storageKey ? localStorage.getItem(`cui-banner-${e.storageKey}`) === "1" : !1
+    );
+    function f() {
+      n.value = !0, e.storageKey && localStorage.setItem(`cui-banner-${e.storageKey}`, "1"), m("dismiss");
+    }
+    const p = s(() => w[e.color] ?? "info"), v = s(() => z(e.color, e.live)), y = s(() => {
+      const o = {
+        position: "sticky",
+        left: "0",
+        right: "0",
+        zIndex: "50",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "calc(0.75rem * var(--cui-density-scale, 1))",
+        padding: "calc(0.625rem * var(--cui-density-scale, 1)) calc(1rem * var(--cui-density-scale, 1))"
+      };
+      return o[e.position] = "0", e.variant === "solid" ? (o.background = `var(--cui-${e.color}-solid, var(--cui-${e.color}))`, o.color = `var(--cui-${e.color}-text, white)`) : (o.background = `var(--cui-${e.color}-bg)`, o.color = `var(--cui-${e.color})`, o.borderBottom = e.position === "top" ? `1px solid var(--cui-${e.color}-border)` : "none", o.borderTop = e.position === "bottom" ? `1px solid var(--cui-${e.color}-border)` : "none"), o;
+    });
+    return (o, S) => n.value ? r("", !0) : k((i(), l("div", b({
+      key: 0,
+      style: y.value
+    }, v.value), [
+      t.noIcon ? r("", !0) : (i(), a(d, {
+        key: 0,
+        name: p.value,
+        size: "1.125rem",
+        style: { "flex-shrink": "0" }
+      }, null, 8, ["name"])),
+      x("div", K, [
+        c(o.$slots, "default")
+      ]),
+      o.$slots.actions ? (i(), l("div", N, [
+        c(o.$slots, "actions")
+      ])) : r("", !0),
+      t.dismissible ? (i(), a(I, {
+        key: 2,
+        variant: "ghost",
+        size: "xs",
+        style: { "flex-shrink": "0", color: "currentColor", opacity: "0.7" },
+        onClick: f
+      }, {
+        default: $(() => [
+          C(d, {
+            name: "x",
+            size: "0.875rem"
+          })
+        ]),
+        _: 1
+      })) : r("", !0)
+    ], 16)), [
+      [B, !t.hidden]
+    ]);
+  }
+});
+export {
+  L as default
+};

package/dist/components/CuiBanner.vue2.js

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

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

@@ -1,8 +1,7 @@
-export interface CuiBreadcrumbProps {
+import type { HideableProps } from "../types/common";
+export interface CuiBreadcrumbProps extends HideableProps {
     /** Separator character between items */
     separator?: string;
-    /** Hide the component */
-    hidden?: boolean;
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

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

@@ -1 +1 @@
-{"version":3,"file":"CuiBreadcrumb.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiBreadcrumb.vue"],"names":[],"mappings":"AAiDA,MAAM,WAAW,kBAAkB;IACjC,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA0CD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAoB/C,QAAA,MAAM,eAAe;YAjEV,OAAO;eAFJ,MAAM;6EA0ElB,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":"CuiBreadcrumb.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiBreadcrumb.vue"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4CD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAqB/C,QAAA,MAAM,eAAe;;eApEP,MAAM;6EA2ElB,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/CuiBreadcrumb.vue.js

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

package/dist/components/CuiBreadcrumb.vue2.js

@@ -0,0 +1,29 @@
+import { defineComponent as t, provide as o, withDirectives as s, openBlock as c, createElementBlock as l, unref as n, createElementVNode as d, renderSlot as i, vShow as u } from "vue";
+import { BreadcrumbContextKey as m } from "./breadcrumb-context.js";
+import { useMessages as p } from "../composables/useMessages.js";
+const b = ["aria-label"], f = { class: "cui-breadcrumb__list" }, g = /* @__PURE__ */ t({
+  __name: "CuiBreadcrumb",
+  props: {
+    separator: { default: "/" },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    o(m, {
+      separator: e.separator
+    });
+    const r = p();
+    return (a, h) => s((c(), l("nav", {
+      "aria-label": n(r).breadcrumb.label,
+      class: "cui-breadcrumb"
+    }, [
+      d("ol", f, [
+        i(a.$slots, "default", {}, void 0, !0)
+      ])
+    ], 8, b)), [
+      [u, !e.hidden]
+    ]);
+  }
+});
+export {
+  g as default
+};

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

@@ -1,10 +1,9 @@
-export interface CuiBreadcrumbItemProps {
+import type { HideableProps } from "../types/common";
+export interface CuiBreadcrumbItemProps extends HideableProps {
     /** Link URL (renders as <a>) */
     href?: string;
     /** Vue Router route (renders as <router-link>) */
     to?: string | object;
-    /** Hide the component */
-    hidden?: boolean;
 }
 declare var __VLS_5: {};
 type __VLS_Slots = {} & {

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

@@ -1 +1 @@
-{"version":3,"file":"CuiBreadcrumbItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiBreadcrumbItem.vue"],"names":[],"mappings":"AAiGA,MAAM,WAAW,sBAAsB;IACrC,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAyFD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA0B/C,QAAA,MAAM,eAAe;YAtHV,OAAO;6EA6HhB,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":"CuiBreadcrumbItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiBreadcrumbItem.vue"],"names":[],"mappings":"AA+FA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,sBAAuB,SAAQ,aAAa;IAC3D,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB;AAyFD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA0B/C,QAAA,MAAM,eAAe;;6EAOnB,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/CuiBreadcrumbItem.vue.js

@@ -0,0 +1,7 @@
+import o from "./CuiBreadcrumbItem.vue2.js";
+/* empty css                       */
+import r from "../_virtual/_plugin-vue_export-helper.js";
+const c = /* @__PURE__ */ r(o, [["__scopeId", "data-v-956ad9cf"]]);
+export {
+  c as default
+};

package/dist/components/CuiBreadcrumbItem.vue2.js

@@ -0,0 +1,46 @@
+import { defineComponent as d, inject as p, ref as i, onMounted as v, computed as l, withDirectives as h, openBlock as o, createElementBlock as c, createBlock as _, resolveDynamicComponent as b, mergeProps as k, withCtx as y, renderSlot as C, toDisplayString as B, unref as g, createCommentVNode as x, vShow as S } from "vue";
+import { BreadcrumbContextKey as w } from "./breadcrumb-context.js";
+const D = {
+  key: 0,
+  class: "cui-breadcrumb-item__separator",
+  "aria-hidden": "true"
+}, R = /* @__PURE__ */ d({
+  __name: "CuiBreadcrumbItem",
+  props: {
+    href: {},
+    to: {},
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(u) {
+    const e = u, s = p(w, { separator: "/" }), t = i(), r = i(!1);
+    v(() => {
+      var a;
+      if ((a = t.value) != null && a.parentElement) {
+        const n = t.value.parentElement.querySelectorAll(".cui-breadcrumb-item");
+        r.value = n[n.length - 1] === t.value;
+      }
+    });
+    const m = l(() => r.value ? "span" : e.to ? "router-link" : e.href ? "a" : "span"), f = l(() => r.value ? {} : e.to ? { to: e.to } : e.href ? { href: e.href } : {});
+    return (a, n) => h((o(), c("li", {
+      ref_key: "elRef",
+      ref: t,
+      class: "cui-breadcrumb-item"
+    }, [
+      (o(), _(b(m.value), k(f.value, {
+        class: ["cui-breadcrumb-item__link", { "cui-breadcrumb-item__link--current": r.value }],
+        "aria-current": r.value ? "page" : void 0
+      }), {
+        default: y(() => [
+          C(a.$slots, "default", {}, void 0, !0)
+        ]),
+        _: 3
+      }, 16, ["class", "aria-current"])),
+      r.value ? x("", !0) : (o(), c("span", D, B(g(s).separator), 1))
+    ], 512)), [
+      [S, !u.hidden]
+    ]);
+  }
+});
+export {
+  R as default
+};

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

@@ -1,16 +1,10 @@
-export type ButtonColor = "primary" | "secondary" | "success" | "error" | "warning" | "info";
+import type { CuiColor, CuiRounded, HideableProps, ColorableProps, SizeableProps, DisableableProps } from "../types/common";
 export type ButtonVariant = "solid" | "outline" | "dash" | "ghost";
-export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
-export type ButtonRounded = "sm" | "md" | "lg" | "full";
-export interface CuiButtonProps {
-    /** Color role */
-    color?: ButtonColor;
+export interface CuiButtonProps extends HideableProps, ColorableProps, SizeableProps, DisableableProps {
     /** Visual variant */
     variant?: ButtonVariant;
-    /** Size */
-    size?: ButtonSize;
     /** Border radius */
-    rounded?: ButtonRounded;
+    rounded?: CuiRounded;
     /** HTML button type */
     type?: "button" | "submit" | "reset";
     /** Render as a link (<a>) with this href */
@@ -19,10 +13,6 @@ export interface CuiButtonProps {
     to?: string | object;
     /** Loading state — shows spinner and disables interaction */
     loading?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Hide the component */
-    hidden?: boolean;
 }
 declare function focus(opts?: FocusOptions): void;
 declare function blur(): void;
@@ -39,12 +29,12 @@ declare const __VLS_component: import("vue").DefineComponent<CuiButtonProps, {
     focus: typeof focus;
     blur: typeof blur;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CuiButtonProps> & Readonly<{}>, {
-    size: ButtonSize;
-    color: ButtonColor;
     hidden: boolean;
+    size: import("../index.js").CuiSize;
+    color: CuiColor;
     type: "button" | "submit" | "reset";
     variant: ButtonVariant;
-    rounded: ButtonRounded;
+    rounded: CuiRounded;
     loading: boolean;
     disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiButton.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiButton.vue"],"names":[],"mappings":"AAiRA,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAC7F,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AACnE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAExD,MAAM,WAAW,cAAc;IAC7B,iBAAiB;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,WAAW;IACX,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,oBAAoB;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,uBAAuB;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA6CD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;AAmLD,QAAA,IAAuB,OAAO,IAAU,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACrF,KAAK,WAAW,GAAG,EAAE,GACnB;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;AA0B/C,QAAA,MAAM,eAAe;;;;;UAnRZ,UAAU;WAJT,WAAW;YAkBV,OAAO;UAVT,QAAQ,GAAG,QAAQ,GAAG,OAAO;aAN1B,aAAa;aAIb,aAAa;aAQb,OAAO;cAEN,OAAO;6EA+QlB,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":"CuiButton.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiButton.vue"],"names":[],"mappings":"AAkRA,OAAO,KAAK,EACV,QAAQ,EACR,UAAU,EACV,aAAa,EACb,cAAc,EACd,aAAa,EACb,gBAAgB,EACjB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,cACf,SAAQ,aAAa,EACnB,cAAc,EACd,aAAa,EACb,gBAAgB;IAClB,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,uBAAuB;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA6CD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;AAoLD,QAAA,IAAuB,OAAO,IAAU,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACrF,KAAK,WAAW,GAAG,EAAE,GACnB;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;AA0B/C,QAAA,MAAM,eAAe;;;;;;;;UA5QZ,QAAQ,GAAG,QAAQ,GAAG,OAAO;aAJ1B,aAAa;aAEb,UAAU;aAQV,OAAO;;6EA8QjB,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/CuiButton.vue.js

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

package/dist/components/CuiButton.vue2.js

@@ -0,0 +1,133 @@
+import { defineComponent as _, computed as u, useTemplateRef as y, withDirectives as x, openBlock as s, createBlock as k, resolveDynamicComponent as B, mergeProps as C, withCtx as S, createElementBlock as c, renderSlot as d, createCommentVNode as b, createVNode as z, createElementVNode as R, normalizeClass as E, vShow as N } from "vue";
+import w from "./CuiIcon.vue.js";
+import { BUTTON_SIZE_SCALE as D } from "../utils/sizing.js";
+const T = {
+  key: 0,
+  class: "cui-button__prefix"
+}, V = {
+  key: 1,
+  class: "cui-button__spinner",
+  "aria-hidden": "true"
+}, A = {
+  key: 2,
+  class: "cui-button__suffix"
+}, O = /* @__PURE__ */ _({
+  __name: "CuiButton",
+  props: {
+    variant: { default: "outline" },
+    rounded: { default: "md" },
+    type: { default: "button" },
+    href: {},
+    to: {},
+    loading: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(a, { expose: v }) {
+    const t = a, o = u(() => t.disabled || t.loading), f = u(() => t.to ? "router-link" : t.href ? "a" : "button"), p = u(() => t.to ? { to: t.to, ...o.value ? { "aria-disabled": "true", tabindex: "-1" } : {} } : t.href ? {
+      href: o.value ? void 0 : t.href,
+      role: "button",
+      ...o.value ? { "aria-disabled": "true", tabindex: "-1" } : {}
+    } : {
+      type: t.type,
+      disabled: o.value || void 0,
+      "aria-disabled": o.value || void 0
+    }), l = y("buttonRef");
+    function h(e) {
+      var r;
+      (r = l.value) == null || r.focus(e);
+    }
+    function g() {
+      var e;
+      (e = l.value) == null || e.blur();
+    }
+    v({ el: l, focus: h, blur: g });
+    const m = {
+      none: "0",
+      sm: "0.25rem",
+      md: "var(--cui-button-radius, 0.375rem)",
+      lg: "0.5rem",
+      full: "9999px"
+    }, $ = u(() => {
+      const e = t.color, r = t.variant, i = D[t.size], n = {
+        height: i.height,
+        paddingLeft: i.px,
+        paddingRight: i.px,
+        fontSize: i.fontSize,
+        gap: i.gap,
+        borderRadius: m[t.rounded],
+        "--_btn-focus-ring": `var(--cui-${e}-focus-ring)`
+      };
+      return r === "solid" ? {
+        ...n,
+        background: `var(--cui-${e}-solid, var(--cui-${e}))`,
+        color: `var(--cui-${e}-text)`,
+        border: "1px solid transparent",
+        "--_btn-hover-bg": `var(--cui-${e}-solid-hover, var(--cui-${e}-hover))`,
+        "--_btn-active-bg": `var(--cui-${e}-solid-active, var(--cui-${e}-active))`
+      } : r === "outline" ? {
+        ...n,
+        background: "transparent",
+        color: `var(--cui-${e})`,
+        border: "1px solid var(--cui-border-strong)",
+        "--_btn-hover-bg": `var(--cui-${e}-bg)`,
+        "--_btn-hover-color": `var(--cui-${e}-hover)`,
+        "--_btn-hover-border": `var(--cui-${e})`,
+        "--_btn-active-bg": `var(--cui-${e}-subtle)`
+      } : r === "dash" ? {
+        ...n,
+        background: "transparent",
+        color: `var(--cui-${e})`,
+        border: "1px dashed var(--cui-border-strong)",
+        "--_btn-hover-bg": `var(--cui-${e}-bg)`,
+        "--_btn-hover-color": `var(--cui-${e}-hover)`,
+        "--_btn-hover-border": `var(--cui-${e})`,
+        "--_btn-active-bg": `var(--cui-${e}-subtle)`
+      } : {
+        ...n,
+        background: "transparent",
+        color: `var(--cui-${e})`,
+        border: "1px solid transparent",
+        "--_btn-hover-bg": `var(--cui-${e}-bg)`,
+        "--_btn-hover-color": `var(--cui-${e}-hover)`,
+        "--_btn-active-bg": `var(--cui-${e}-subtle)`
+      };
+    });
+    return (e, r) => x((s(), k(B(f.value), C({
+      ref: "buttonRef",
+      class: ["cui-button", { "cui-button--disabled": o.value }],
+      style: $.value
+    }, p.value, {
+      "aria-busy": a.loading || void 0
+    }), {
+      default: S(() => [
+        e.$slots.prefix ? (s(), c("span", T, [
+          d(e.$slots, "prefix", {}, void 0, !0)
+        ])) : b("", !0),
+        a.loading ? (s(), c("span", V, [
+          z(w, {
+            name: "circle-notch",
+            size: "1em",
+            class: "cui-button__spinner-svg"
+          })
+        ])) : b("", !0),
+        R("span", {
+          class: E([{ "opacity-0": a.loading }, "cui-button__content"])
+        }, [
+          d(e.$slots, "default", {}, void 0, !0)
+        ], 2),
+        e.$slots.suffix ? (s(), c("span", A, [
+          d(e.$slots, "suffix", {}, void 0, !0)
+        ])) : b("", !0)
+      ]),
+      _: 3
+    }, 16, ["class", "style", "aria-busy"])), [
+      [N, !a.hidden]
+    ]);
+  }
+});
+export {
+  O as default
+};

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

@@ -1,9 +1,8 @@
+import type { HideableProps } from "../types/common";
 export type ButtonGroupOrientation = "horizontal" | "vertical";
-export interface CuiButtonGroupProps {
+export interface CuiButtonGroupProps extends HideableProps {
     /** Layout direction */
     orientation?: ButtonGroupOrientation;
-    /** Hide the component */
-    hidden?: boolean;
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

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

@@ -1 +1 @@
-{"version":3,"file":"CuiButtonGroup.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiButtonGroup.vue"],"names":[],"mappings":"AA2GA,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE/D,MAAM,WAAW,mBAAmB;IAClC,uBAAuB;IACvB,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAgHD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAoB/C,QAAA,MAAM,eAAe;YAvIV,OAAO;iBAFF,sBAAsB;6EAgJpC,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":"CuiButtonGroup.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiButtonGroup.vue"],"names":[],"mappings":"AA2GA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE/D,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,uBAAuB;IACvB,WAAW,CAAC,EAAE,sBAAsB,CAAC;CACtC;AAgHD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAoB/C,QAAA,MAAM,eAAe;;iBAvIL,sBAAsB;6EA8IpC,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/CuiButtonGroup.vue.js

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

package/dist/components/CuiButtonGroup.vue2.js

@@ -0,0 +1,21 @@
+import { defineComponent as t, withDirectives as n, openBlock as r, createElementBlock as i, normalizeClass as u, renderSlot as a, vShow as l } from "vue";
+const c = /* @__PURE__ */ t({
+  __name: "CuiButtonGroup",
+  props: {
+    orientation: { default: "horizontal" },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return (o, d) => n((r(), i("div", {
+      class: u(["cui-button-group", `cui-button-group--${e.orientation}`]),
+      role: "group"
+    }, [
+      a(o.$slots, "default", {}, void 0, !0)
+    ], 2)), [
+      [l, !e.hidden]
+    ]);
+  }
+});
+export {
+  c as default
+};

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

@@ -1,9 +1,10 @@
-export type CardVariant = "default" | "outline" | "ghost";
-export interface CuiCardProps {
+import type { HideableProps, CuiRounded } from "../types/common";
+export type CardVariant = "elevated" | "outline" | "ghost";
+export interface CuiCardProps extends HideableProps {
     /** Visual style */
     variant?: CardVariant;
-    /** Hide the component */
-    hidden?: boolean;
+    /** Border radius */
+    rounded?: CuiRounded;
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -12,6 +13,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<CuiCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CuiCardProps> & Readonly<{}>, {
     hidden: boolean;
     variant: CardVariant;
+    rounded: CuiRounded;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiCard.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiCard.vue"],"names":[],"mappings":"AA+CA,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,YAAY;IAC3B,mBAAmB;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA+CD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAqB/C,QAAA,MAAM,eAAe;YAvEV,OAAO;aAFN,WAAW;6EAgFrB,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":"CuiCard.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiCard.vue"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEjE,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;AAU3D,MAAM,WAAW,YAAa,SAAQ,aAAa;IACjD,mBAAmB;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAiDD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAqB/C,QAAA,MAAM,eAAe;;aA3ET,WAAW;aAEX,UAAU;6EAgFpB,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"}