@itguy614/clean-ui 0.3.1 → 1.0.0

package/dist/components/CuiToast.vue2.js

@@ -0,0 +1,129 @@
+import { defineComponent as N, ref as b, computed as n, watch as P, onMounted as S, onUnmounted as T, withDirectives as V, openBlock as i, createElementBlock as a, mergeProps as z, Fragment as E, createTextVNode as g, toDisplayString as v, createBlock as L, createCommentVNode as c, createElementVNode as y, renderSlot as $, unref as O, createVNode as A, normalizeStyle as R, vShow as F } from "vue";
+import h from "./CuiIcon.vue.js";
+import { COLOR_ICON_MAP as K } from "../utils/colorIconMap.js";
+import { resolveLiveRegion as U } from "../utils/liveRegion.js";
+import { useMessages as j } from "../composables/useMessages.js";
+const q = {
+  key: 0,
+  class: "cui-toast__icon"
+}, G = { class: "cui-toast__body" }, H = {
+  key: 0,
+  class: "cui-toast__title"
+}, J = {
+  key: 1,
+  class: "cui-toast__description"
+}, Q = {
+  key: 2,
+  class: "cui-toast__actions"
+}, W = ["aria-label"], X = {
+  key: 2,
+  class: "cui-toast__progress"
+}, _ = 50, ot = /* @__PURE__ */ N({
+  __name: "CuiToast",
+  props: {
+    toastId: {},
+    title: {},
+    description: {},
+    variant: { default: "subtle" },
+    dismissible: { type: Boolean, default: !0 },
+    autoDismiss: { default: 5e3 },
+    showProgress: { type: Boolean, default: !0 },
+    animation: { default: "none" },
+    icon: {},
+    noIcon: { type: Boolean, default: !1 },
+    active: { type: Boolean, default: !0 },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    live: {}
+  },
+  emits: ["dismiss"],
+  setup(s, { emit: k }) {
+    const o = s, D = k, u = b(!1), l = b(0);
+    let r = null;
+    const I = n(() => !o.autoDismiss || o.autoDismiss === 0 ? 0 : Math.min(l.value / o.autoDismiss * 100, 100));
+    function m() {
+      r || !o.autoDismiss || o.autoDismiss === 0 || (r = setInterval(() => {
+        !u.value && o.active && (l.value += _, l.value >= o.autoDismiss && f());
+      }, _));
+    }
+    P(
+      () => o.active,
+      (t) => {
+        t && !r && m();
+      }
+    );
+    function f() {
+      r && clearInterval(r), D("dismiss");
+    }
+    function p() {
+      u.value = !0;
+    }
+    function x() {
+      u.value = !1;
+    }
+    S(() => {
+      o.active && m();
+    }), T(() => {
+      r && clearInterval(r);
+    });
+    const B = n(() => {
+      const t = o.color, d = o.variant, e = {
+        "--_toast-focus-ring": `var(--cui-${t}-focus-ring)`
+      };
+      return d === "solid" ? (e.background = `var(--cui-${t}-solid, var(--cui-${t}))`, e.color = `var(--cui-${t}-text)`, e["--_toast-icon-color"] = `var(--cui-${t}-text)`, e["--_toast-dismiss-color"] = `var(--cui-${t}-text)`, e["--_toast-progress-bg"] = "rgb(255 255 255 / 0.2)", e["--_toast-progress-bar"] = "rgb(255 255 255 / 0.6)") : d === "outline" ? (e.background = "var(--cui-surface-base)", e.color = `var(--cui-${t})`, e.border = `1px solid var(--cui-${t}-border)`, e["--_toast-icon-color"] = `var(--cui-${t})`, e["--_toast-dismiss-color"] = "var(--cui-text-secondary)", e["--_toast-progress-bg"] = `var(--cui-${t}-bg)`, e["--_toast-progress-bar"] = `var(--cui-${t})`) : (e.background = `var(--cui-${t}-bg)`, e.color = "var(--cui-text-body)", e.border = `1px solid var(--cui-${t}-border)`, e["--_toast-icon-color"] = `var(--cui-${t})`, e["--_toast-dismiss-color"] = "var(--cui-text-secondary)", e["--_toast-progress-bg"] = `var(--cui-${t}-border)`, e["--_toast-progress-bar"] = `var(--cui-${t})`), e;
+    }), C = n(() => K[o.color] ?? "info"), M = n(() => U(o.color, o.live)), w = j();
+    return (t, d) => V((i(), a("div", z({
+      class: ["cui-toast", [
+        s.animation !== "none" ? `cui-toast--${s.animation}` : ""
+      ]],
+      style: B.value
+    }, M.value, {
+      onMouseenter: p,
+      onMouseleave: x
+    }), [
+      s.noIcon ? c("", !0) : (i(), a("div", q, [
+        s.icon ? (i(), a(E, { key: 0 }, [
+          g(v(s.icon), 1)
+        ], 64)) : (i(), L(h, {
+          key: 1,
+          name: C.value,
+          size: "1.25rem"
+        }, null, 8, ["name"]))
+      ])),
+      y("div", G, [
+        s.title ? (i(), a("div", H, v(s.title), 1)) : c("", !0),
+        s.description || t.$slots.default ? (i(), a("div", J, [
+          $(t.$slots, "default", {}, () => [
+            g(v(s.description), 1)
+          ], !0)
+        ])) : c("", !0),
+        t.$slots.actions ? (i(), a("div", Q, [
+          $(t.$slots, "actions", {}, void 0, !0)
+        ])) : c("", !0)
+      ]),
+      s.dismissible ? (i(), a("button", {
+        key: 1,
+        type: "button",
+        class: "cui-toast__dismiss",
+        "aria-label": O(w).dismiss,
+        onClick: f
+      }, [
+        A(h, {
+          name: "x",
+          size: "0.875rem"
+        })
+      ], 8, W)) : c("", !0),
+      s.showProgress && s.autoDismiss && s.autoDismiss > 0 && s.active ? (i(), a("div", X, [
+        y("div", {
+          class: "cui-toast__progress-bar",
+          style: R({ width: `${100 - I.value}%` })
+        }, null, 4)
+      ])) : c("", !0)
+    ], 16)), [
+      [F, !s.hidden]
+    ]);
+  }
+});
+export {
+  ot as default
+};

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

@@ -1 +1 @@
-{"version":3,"file":"CuiToastProvider.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiToastProvider.vue"],"names":[],"mappings":"AAgOA,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,qBAAqB;IACpC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmLD,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;AAwB/C,QAAA,MAAM,eAAe;cAlNR,aAAa;eAEZ,cAAc;eAEd,MAAM;6EAqNlB,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":"CuiToastProvider.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiToastProvider.vue"],"names":[],"mappings":"AAiOA,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,qBAAqB;IACpC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqLD,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;AAwB/C,QAAA,MAAM,eAAe;cApNR,aAAa;eAEZ,cAAc;eAEd,MAAM;6EAuNlB,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/CuiToastProvider.vue.js

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

package/dist/components/CuiToastProvider.vue2.js

@@ -0,0 +1,87 @@
+import { defineComponent as h, toRef as l, provide as _, computed as r, openBlock as n, createElementBlock as a, Fragment as d, renderSlot as k, createBlock as y, Teleport as I, createElementVNode as b, normalizeStyle as p, renderList as w, unref as u, normalizeClass as T, createVNode as C } from "vue";
+import $ from "./CuiToast.vue.js";
+import { createToastState as D, ToastContextKey as S } from "./toast-context.js";
+const E = ["onClick"], F = /* @__PURE__ */ h({
+  __name: "CuiToastProvider",
+  props: {
+    position: { default: "bottom-center" },
+    stackMode: { default: "expanded" },
+    maxToasts: { default: 5 }
+  },
+  setup(m) {
+    const o = m, s = D(
+      l(o, "position"),
+      l(o, "stackMode"),
+      l(o, "maxToasts")
+    );
+    _(S, s);
+    const f = r(() => {
+      const i = o.position, t = {
+        position: "fixed",
+        zIndex: "9998",
+        display: "flex",
+        flexDirection: "column",
+        gap: "calc(0.5rem * var(--cui-density-scale, 1))",
+        padding: "calc(1rem * var(--cui-density-scale, 1))",
+        pointerEvents: "none",
+        maxHeight: "100vh",
+        overflow: "hidden"
+      };
+      return i.includes("top") ? t.top = "0" : (t.bottom = "0", t.flexDirection = "column-reverse"), i.includes("left") ? (t.left = "0", t.alignItems = "flex-start") : i.includes("right") ? (t.right = "0", t.alignItems = "flex-end") : (t.left = "50%", t.transform = "translateX(-50%)", t.alignItems = "center"), t;
+    }), v = r(() => {
+      const i = o.position;
+      return i.includes("left") ? "left" : i.includes("right") ? "right" : i.includes("top") ? "top" : "bottom";
+    }), c = r(() => o.stackMode === "collapsed" && s.toasts.value.length > 1 ? s.toasts.value.map((i, t) => ({
+      ...i,
+      _collapsed: t < s.toasts.value.length - 1,
+      _stackIndex: s.toasts.value.length - 1 - t
+    })) : s.toasts.value.map((i) => ({ ...i, _collapsed: !1, _stackIndex: 0 })));
+    return (i, t) => (n(), a(d, null, [
+      k(i.$slots, "default", {}, void 0, !0),
+      (n(), y(I, { to: "body" }, [
+        b("div", {
+          style: p(f.value),
+          class: "cui-toast-container"
+        }, [
+          (n(!0), a(d, null, w(c.value, (e, x) => (n(), a("div", {
+            key: e.id,
+            class: T(["cui-toast-wrapper", [
+              `cui-toast-wrapper--slide-${v.value}`,
+              { "cui-toast-wrapper--collapsed": e._collapsed }
+            ]]),
+            style: p({
+              pointerEvents: "auto",
+              ...e._collapsed ? {
+                transform: `scale(${1 - e._stackIndex * 0.05}) translateY(${e._stackIndex * -8}px)`,
+                opacity: String(Math.max(0.4, 1 - e._stackIndex * 0.2)),
+                maxHeight: "3rem",
+                overflow: "hidden"
+              } : {}
+            }),
+            onClick: (g) => e._collapsed ? u(s).dismiss(e.id) : void 0
+          }, [
+            C($, {
+              "toast-id": e.id,
+              title: e.title,
+              description: e.description,
+              color: e.color,
+              variant: e.variant,
+              dismissible: e.dismissible,
+              "auto-dismiss": e.autoDismiss,
+              "show-progress": e.showProgress,
+              animation: e.animation,
+              icon: e.icon,
+              "no-icon": e.noIcon,
+              live: e.live,
+              active: x === c.value.length - 1,
+              onDismiss: (g) => u(s).dismiss(e.id)
+            }, null, 8, ["toast-id", "title", "description", "color", "variant", "dismissible", "auto-dismiss", "show-progress", "animation", "icon", "no-icon", "live", "active", "onDismiss"])
+          ], 14, E))), 128))
+        ], 4)
+      ]))
+    ], 64));
+  }
+});
+export {
+  F as default
+};

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

@@ -1,6 +1,5 @@
-import type { ButtonColor } from "./CuiButton.vue";
-export type ToggleSize = "sm" | "md" | "lg";
-export interface CuiToggleProps {
+import type { CuiSize, HideableProps, ColorableProps, SizeableProps, DisableableProps } from "../types/common";
+export interface CuiToggleProps extends HideableProps, ColorableProps, SizeableProps, DisableableProps {
     /** The value this toggle represents (group mode) */
     value?: string | number;
     /** v-model binding (standalone boolean mode) */
@@ -11,16 +10,8 @@ export interface CuiToggleProps {
     description?: string;
     /** Show ON/OFF labels inside the track (only visible at md and lg sizes) */
     showLabels?: boolean;
-    /** Color role — overrides group color */
-    color?: ButtonColor;
-    /** Size */
-    size?: ToggleSize;
-    /** Disabled state */
-    disabled?: boolean;
     /** Readonly state */
     readonly?: boolean;
-    /** Hide the component */
-    hidden?: boolean;
 }
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
@@ -36,10 +27,10 @@ declare const __VLS_component: import("vue").DefineComponent<CuiToggleProps, {
 }, string, import("vue").PublicProps, Readonly<CuiToggleProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
-    size: ToggleSize;
+    readonly: boolean;
     hidden: boolean;
+    size: CuiSize;
     disabled: boolean;
-    readonly: boolean;
     showLabels: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiToggle.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiToggle.vue"],"names":[],"mappings":"AAmSA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,cAAc;IAC7B,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,WAAW;IACX,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA8MD,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,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA8BnD,QAAA,MAAM,eAAe;;;;;;;;UAtPZ,UAAU;YAMR,OAAO;cAJL,OAAO;cAEP,OAAO;gBARL,OAAO;6EAmQpB,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":"CuiToggle.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiToggle.vue"],"names":[],"mappings":"AAsRA,OAAO,KAAK,EAAY,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGzH,MAAM,WAAW,cAAe,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACpG,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4MD,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,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA+BnD,QAAA,MAAM,eAAe;;;;;;;;cA/OR,OAAO;;;;gBAFL,OAAO;6EA0PpB,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/CuiToggle.vue.js

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

package/dist/components/CuiToggle.vue2.js

@@ -0,0 +1,116 @@
+import { defineComponent as B, inject as D, computed as i, ref as E, withDirectives as N, openBlock as v, createElementBlock as m, normalizeStyle as g, normalizeClass as R, createElementVNode as u, withModifiers as T, createCommentVNode as b, renderSlot as k, createTextVNode as p, toDisplayString as S, vShow as x } from "vue";
+import { ToggleGroupKey as K } from "./multi-select-group-context.js";
+import { clampSize as L } from "../utils/sizing.js";
+const O = ["aria-checked", "aria-disabled", "tabindex"], P = ["value", "checked", "disabled", "readonly"], X = {
+  key: 0,
+  class: "cui-toggle__label-wrap"
+}, j = { class: "cui-toggle__label" }, G = {
+  key: 0,
+  class: "cui-toggle__description"
+}, Z = /* @__PURE__ */ B({
+  __name: "CuiToggle",
+  props: {
+    value: {},
+    modelValue: { type: Boolean },
+    label: {},
+    description: {},
+    showLabels: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 },
+    color: {},
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(a, { expose: w, emit: z }) {
+    const t = a, _ = z, e = D(K, null), s = i(() => e && t.value !== void 0 ? e.modelValue.value.includes(t.value) : t.modelValue === !0), n = i(() => e != null && e.disabled.value ? !0 : t.disabled), d = i(() => e != null && e.readonly.value ? !0 : t.readonly), r = i(() => t.color ?? (e == null ? void 0 : e.color.value) ?? "primary"), f = E();
+    function h() {
+      n.value || d.value || (e && t.value !== void 0 ? e.toggle(t.value) : _("update:modelValue", !t.modelValue));
+    }
+    function $(l) {
+      (l.key === " " || l.key === "Enter") && (l.preventDefault(), h());
+    }
+    w({ el: f, focus: () => {
+      var l;
+      return (l = f.value) == null ? void 0 : l.focus();
+    } });
+    const V = ["sm", "md", "lg"], C = {
+      sm: { w: "2rem", h: "1.125rem", knob: "0.875rem", travel: "0.875rem", labelSize: "0.5rem" },
+      md: { w: "2.75rem", h: "1.5rem", knob: "1.25rem", travel: "1.25rem", labelSize: "0.625rem" },
+      lg: { w: "3.5rem", h: "1.875rem", knob: "1.5rem", travel: "1.625rem", labelSize: "0.6875rem" }
+    }, y = i(() => L(t.size, V)), o = i(() => C[y.value]);
+    return (l, c) => N((v(), m("label", {
+      ref_key: "elRef",
+      ref: f,
+      class: R(["cui-toggle", {
+        "cui-toggle--checked": s.value,
+        "cui-toggle--disabled": n.value,
+        "cui-toggle--readonly": d.value
+      }]),
+      style: g({ "--_toggle-focus-ring": `var(--cui-${r.value}-focus-ring)` }),
+      role: "switch",
+      "aria-checked": s.value,
+      "aria-disabled": n.value || d.value || void 0,
+      tabindex: n.value ? -1 : 0,
+      onClick: h,
+      onKeydown: $
+    }, [
+      u("input", {
+        type: "checkbox",
+        value: a.value !== void 0 ? String(a.value) : void 0,
+        checked: s.value,
+        disabled: n.value,
+        readonly: d.value,
+        tabindex: "-1",
+        "aria-hidden": "true",
+        class: "cui-toggle__input",
+        onClick: c[0] || (c[0] = T(() => {
+        }, ["stop", "prevent"]))
+      }, null, 8, P),
+      u("span", {
+        class: "cui-toggle__track",
+        style: g({
+          width: o.value.w,
+          height: o.value.h,
+          "--_toggle-color": `var(--cui-${r.value})`,
+          "--_toggle-bg": `var(--cui-${r.value}-bg)`,
+          "--_toggle-hover": `var(--cui-${r.value}-hover)`,
+          "--_toggle-active": `var(--cui-${r.value}-active)`
+        })
+      }, [
+        a.showLabels && y.value !== "sm" && s.value ? (v(), m("span", {
+          key: 0,
+          class: "cui-toggle__labels",
+          style: g({ fontSize: o.value.labelSize })
+        }, [...c[1] || (c[1] = [
+          u("span", { class: "cui-toggle__on-label" }, "ON", -1)
+        ])], 4)) : b("", !0),
+        u("span", {
+          class: "cui-toggle__knob",
+          style: g({
+            width: o.value.knob,
+            height: o.value.knob,
+            transform: s.value ? `translateX(${o.value.travel})` : "translateX(0)"
+          })
+        }, null, 4)
+      ], 4),
+      a.label || l.$slots.default || a.description || l.$slots.description ? (v(), m("span", X, [
+        u("span", j, [
+          k(l.$slots, "default", {}, () => [
+            p(S(a.label), 1)
+          ], !0)
+        ]),
+        a.description || l.$slots.description ? (v(), m("span", G, [
+          k(l.$slots, "description", {}, () => [
+            p(S(a.description), 1)
+          ], !0)
+        ])) : b("", !0)
+      ])) : b("", !0)
+    ], 46, O)), [
+      [x, !a.hidden]
+    ]);
+  }
+});
+export {
+  Z as default
+};

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

@@ -1,14 +1,9 @@
-import type { ButtonColor } from "./CuiButton.vue";
-export type ToggleDirection = "horizontal" | "vertical" | "auto";
-export interface CuiToggleGroupProps {
+import type { CuiAutoOrientation, HideableProps, ColorableProps, DisableableProps } from "../types/common";
+export interface CuiToggleGroupProps extends HideableProps, ColorableProps, DisableableProps {
     /** Array of selected values */
     modelValue?: Array<string | number>;
-    /** Color role (inherited by children) */
-    color?: ButtonColor;
-    /** Layout direction — auto: horizontal for ≤2 options, vertical for 3+ */
-    direction?: ToggleDirection;
-    /** Disable all toggles */
-    disabled?: boolean;
+    /** Layout orientation — auto: horizontal for ≤2 options, vertical for 3+ */
+    orientation?: CuiAutoOrientation;
     /** Make all toggles readonly */
     readonly?: boolean;
     /** Show error state */
@@ -17,8 +12,6 @@ export interface CuiToggleGroupProps {
     errorMessage?: string;
     /** Accessible label for the group */
     label?: string;
-    /** Hide the component */
-    hidden?: boolean;
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -29,13 +22,13 @@ declare const __VLS_component: import("vue").DefineComponent<CuiToggleGroupProps
 }, string, import("vue").PublicProps, Readonly<CuiToggleGroupProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: (string | number)[]) => any) | undefined;
 }>, {
-    color: ButtonColor;
-    hidden: boolean;
     error: boolean;
+    readonly: boolean;
+    hidden: boolean;
+    color: import("..").CuiColor;
     disabled: boolean;
-    direction: ToggleDirection;
+    orientation: CuiAutoOrientation;
     modelValue: Array<string | number>;
-    readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiToggleGroup.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiToggleGroup.vue"],"names":[],"mappings":"AAoIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAEjE,MAAM,WAAW,mBAAmB;IAClC,+BAA+B;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACpC,yCAAyC;IACzC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAsGD,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;AAsB/C,QAAA,MAAM,eAAe;;;;;WA7IX,WAAW;YAcV,OAAO;WANR,OAAO;cAJJ,OAAO;eAFN,eAAe;gBAJd,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;cAQxB,OAAO;6EA+IlB,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":"CuiToggleGroup.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiToggleGroup.vue"],"names":[],"mappings":"AAiIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAG3G,MAAM,WAAW,mBAAoB,SAAQ,aAAa,EAAE,cAAc,EAAE,gBAAgB;IAC1F,+BAA+B;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACpC,4EAA4E;IAC5E,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4GD,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;AAsB/C,QAAA,MAAM,eAAe;;;;;WAzIX,OAAO;cAFJ,OAAO;;;;iBAFJ,kBAAkB;gBAFnB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;6EAuJnC,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/CuiToggleGroup.vue.js

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

package/dist/components/CuiToggleGroup.vue2.js

@@ -0,0 +1,59 @@
+import { defineComponent as y, useSlots as h, computed as u, provide as v, toRef as a, withDirectives as b, openBlock as s, createElementBlock as c, normalizeClass as V, createElementVNode as S, renderSlot as B, toDisplayString as C, createCommentVNode as k, vShow as x } from "vue";
+import { ToggleGroupKey as D } from "./multi-select-group-context.js";
+const M = ["aria-label", "aria-invalid"], w = { class: "cui-toggle-group__options" }, z = {
+  key: 0,
+  class: "cui-toggle-group__error"
+}, N = /* @__PURE__ */ y({
+  __name: "CuiToggleGroup",
+  props: {
+    modelValue: { default: () => [] },
+    orientation: { default: "auto" },
+    readonly: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    errorMessage: {},
+    label: {},
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: f }) {
+    const e = o, g = f, i = h(), m = u(() => {
+      var r;
+      const t = (r = i.default) == null ? void 0 : r.call(i);
+      return t ? t.reduce((l, n) => {
+        var d;
+        return n.type === Symbol.for("v-fgm") || n.type === Symbol.for("v-fgt") ? l + (((d = n.children) == null ? void 0 : d.length) ?? 0) : l + 1;
+      }, 0) : 0;
+    }), p = u(() => e.orientation !== "auto" ? e.orientation : m.value <= 2 ? "horizontal" : "vertical");
+    return v(D, {
+      modelValue: a(e, "modelValue"),
+      color: a(e, "color"),
+      disabled: a(e, "disabled"),
+      readonly: a(e, "readonly"),
+      toggle(t) {
+        if (e.disabled || e.readonly) return;
+        const r = [...e.modelValue], l = r.indexOf(t);
+        l >= 0 ? r.splice(l, 1) : r.push(t), g("update:modelValue", r);
+      }
+    }), (t, r) => b((s(), c("div", {
+      role: "group",
+      "aria-label": o.label,
+      "aria-invalid": o.error || void 0,
+      class: V(["cui-toggle-group", [
+        `cui-toggle-group--${p.value}`,
+        { "cui-toggle-group--error": o.error }
+      ]])
+    }, [
+      S("div", w, [
+        B(t.$slots, "default", {}, void 0, !0)
+      ]),
+      o.error && o.errorMessage ? (s(), c("div", z, C(o.errorMessage), 1)) : k("", !0)
+    ], 10, M)), [
+      [x, !o.hidden]
+    ]);
+  }
+});
+export {
+  N as default
+};

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

@@ -1,7 +1,7 @@
 import { type PopoverPlacement } from "../composables/usePopover";
-import type { ButtonColor } from "./CuiButton.vue";
+import type { HideableProps, ColorableProps, DisableableProps } from "../types/common";
 export type TooltipTrigger = "hover" | "focus" | "click" | "hover-focus";
-export interface CuiTooltipProps {
+export interface CuiTooltipProps extends HideableProps, ColorableProps, DisableableProps {
     /** Simple text content */
     text?: string;
     /** Preferred placement */
@@ -14,14 +14,8 @@ export interface CuiTooltipProps {
     hideDelay?: number;
     /** Hide the arrow */
     noArrow?: boolean;
-    /** Color role (default: dark neutral) */
-    color?: ButtonColor;
     /** Manual visibility control */
     visible?: boolean;
-    /** Disabled — prevents showing */
-    disabled?: boolean;
-    /** Hide the component */
-    hidden?: boolean;
 }
 declare var __VLS_1: {}, __VLS_7: {};
 type __VLS_Slots = {} & {

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

@@ -1 +1 @@
-{"version":3,"file":"CuiTooltip.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTooltip.vue"],"names":[],"mappings":"AA4RA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;AAEzE,MAAM,WAAW,eAAe;IAC9B,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,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,yCAAyC;IACzC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAsOD,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;AAwC/C,QAAA,MAAM,eAAe;;;;;YAlRV,OAAO;cAFL,OAAO;eAdN,gBAAgB;aAElB,cAAc;eAEZ,MAAM;eAEN,MAAM;aAER,OAAO;6EAkSjB,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":"CuiTooltip.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTooltip.vue"],"names":[],"mappings":"AAsRA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEvF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;AAEzE,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,cAAc,EAAE,gBAAgB;IACtF,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,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,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAsOD,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;AAwC/C,QAAA,MAAM,eAAe;;;;;;;eA5RP,gBAAgB;aAElB,cAAc;eAEZ,MAAM;eAEN,MAAM;aAER,OAAO;6EA4RjB,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/CuiTooltip.vue.js

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