@itguy614/clean-ui 0.3.1 → 1.0.0

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

@@ -1,6 +1,5 @@
-import type { ButtonColor } from "./CuiButton.vue";
-export type SliderSize = "sm" | "md" | "lg";
-export interface CuiSliderProps {
+import type { CuiColor, CuiSize, HideableProps, ColorableProps, SizeableProps, DisableableProps } from "../types/common";
+export interface CuiSliderProps extends HideableProps, ColorableProps, SizeableProps, DisableableProps {
     /** Current value */
     modelValue?: number;
     /** Minimum value */
@@ -9,12 +8,6 @@ export interface CuiSliderProps {
     max?: number;
     /** Step increment */
     step?: number;
-    /** Size */
-    size?: SliderSize;
-    /** Color role */
-    color?: ButtonColor;
-    /** Disabled state */
-    disabled?: boolean;
     /** Label text */
     label?: string;
     /** Show the current value */
@@ -25,21 +18,25 @@ export interface CuiSliderProps {
     showRange?: boolean;
     /** Icon to display inside the thumb (Phosphor icon name) */
     thumbIcon?: string;
-    /** Hide the component */
-    hidden?: boolean;
 }
+declare function focus(opts?: FocusOptions): void;
+declare function blur(): void;
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     thumb?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<CuiSliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<CuiSliderProps, {
+    el: Readonly<import("vue").ShallowRef<HTMLInputElement | null>>;
+    focus: typeof focus;
+    blur: typeof blur;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<CuiSliderProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
-    size: SliderSize;
-    color: ButtonColor;
     hidden: boolean;
+    size: CuiSize;
+    color: CuiColor;
     disabled: boolean;
     modelValue: number;
     max: number;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiSlider.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiSlider.vue"],"names":[],"mappings":"AA0LA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,cAAc;IAC7B,oBAAoB;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW;IACX,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iBAAiB;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA8LD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA6B7C,QAAA,MAAM,eAAe;;;;;UA9OZ,UAAU;WAET,WAAW;YAcV,OAAO;cAZL,OAAO;gBAZL,MAAM;SAIb,MAAM;UAEL,MAAM;SAJP,MAAM;eAcA,OAAO;eAIP,OAAO;6EA0OnB,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":"CuiSlider.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiSlider.vue"],"names":[],"mappings":"AAgMA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAIzH,MAAM,WAAW,cAAe,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACpG,oBAAoB;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkDD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;AAuJD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA8B7C,QAAA,MAAM,eAAe;;;;;;;;;;;;;gBAhQN,MAAM;SAIb,MAAM;UAEL,MAAM;SAJP,MAAM;eAQA,OAAO;eAIP,OAAO;6EA2PnB,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/CuiSlider.vue.js

@@ -0,0 +1,156 @@
+import { defineComponent as F, computed as s, ref as $, useTemplateRef as C, withDirectives as R, openBlock as r, createElementBlock as m, normalizeStyle as n, toDisplayString as c, createCommentVNode as d, createElementVNode as u, renderSlot as B, createBlock as E, vShow as H } from "vue";
+import { clampSize as T } from "../utils/sizing.js";
+import j from "./CuiIcon.vue.js";
+const D = {
+  key: 0,
+  style: { display: "flex", "justify-content": "space-between", "align-items": "baseline", "margin-bottom": "calc(0.375rem * var(--cui-density-scale, 1))" }
+}, N = ["value", "min", "max", "step", "disabled"], M = {
+  key: 1,
+  style: { display: "flex", "justify-content": "space-between", "margin-top": "calc(0.25rem * var(--cui-density-scale, 1))" }
+}, U = /* @__PURE__ */ F({
+  __name: "CuiSlider",
+  props: {
+    modelValue: { default: 0 },
+    min: { default: 0 },
+    max: { default: 100 },
+    step: { default: 1 },
+    label: {},
+    showValue: { type: Boolean, default: !1 },
+    formatValue: {},
+    showRange: { type: Boolean, default: !1 },
+    thumbIcon: {},
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { expose: h, emit: y }) {
+    const t = e, g = y, b = s(
+      () => (t.modelValue - t.min) / (t.max - t.min) * 100
+    ), x = s(
+      () => t.formatValue ? t.formatValue(t.modelValue) : String(t.modelValue)
+    ), i = $(!1);
+    function p(o) {
+      const a = parseFloat(o.target.value);
+      g("update:modelValue", a);
+    }
+    const S = ["sm", "md", "lg"], V = {
+      sm: { trackHeight: "4px", thumbSize: "16px", thumbIcon: "0.5rem", labelFont: "0.8125rem", valueFont: "0.75rem" },
+      md: { trackHeight: "6px", thumbSize: "20px", thumbIcon: "0.625rem", labelFont: "0.875rem", valueFont: "0.8125rem" },
+      lg: { trackHeight: "8px", thumbSize: "26px", thumbIcon: "0.75rem", labelFont: "1rem", valueFont: "0.875rem" }
+    }, l = s(() => V[T(t.size, S)]), z = s(() => t.disabled ? "var(--cui-text-tertiary)" : `var(--cui-${t.color})`), w = s(() => t.disabled ? "var(--cui-text-tertiary)" : `var(--cui-${t.color})`), f = C("inputEl");
+    function k(o) {
+      var a;
+      (a = f.value) == null || a.focus(o);
+    }
+    function I() {
+      var o;
+      (o = f.value) == null || o.blur();
+    }
+    return h({ el: f, focus: k, blur: I }), (o, a) => R((r(), m("div", {
+      style: n({ opacity: e.disabled ? 0.5 : 1 })
+    }, [
+      e.label || e.showValue ? (r(), m("div", D, [
+        e.label ? (r(), m("label", {
+          key: 0,
+          style: n({ fontSize: l.value.labelFont, fontWeight: "500", color: "var(--cui-text-secondary)" })
+        }, c(e.label), 5)) : d("", !0),
+        e.showValue ? (r(), m("span", {
+          key: 1,
+          style: n({ fontSize: l.value.valueFont, fontWeight: "600", color: "var(--cui-text-body)", fontVariantNumeric: "tabular-nums" })
+        }, c(x.value), 5)) : d("", !0)
+      ])) : d("", !0),
+      u("div", {
+        style: n({ position: "relative", height: l.value.thumbSize, display: "flex", alignItems: "center" })
+      }, [
+        u("div", {
+          style: n({
+            position: "absolute",
+            left: "0",
+            right: "0",
+            height: l.value.trackHeight,
+            borderRadius: "9999px",
+            background: "var(--cui-border)"
+          })
+        }, null, 4),
+        u("div", {
+          style: n({
+            position: "absolute",
+            left: "0",
+            height: l.value.trackHeight,
+            width: `${b.value}%`,
+            borderRadius: "9999px",
+            background: w.value,
+            transition: i.value ? "none" : "width 0.1s ease"
+          })
+        }, null, 4),
+        u("div", {
+          style: n({
+            position: "absolute",
+            left: `${b.value}%`,
+            transform: "translateX(-50%)",
+            width: l.value.thumbSize,
+            height: l.value.thumbSize,
+            borderRadius: "50%",
+            background: z.value,
+            border: "2px solid var(--cui-surface-base, white)",
+            boxShadow: i.value ? "0 2px 8px rgba(0,0,0,0.25)" : "0 1px 3px rgba(0,0,0,0.15)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "var(--cui-surface-base, white)",
+            transition: i.value ? "none" : "left 0.1s ease, box-shadow 0.15s ease, transform 0.15s ease",
+            pointerEvents: "none",
+            zIndex: 2
+          })
+        }, [
+          B(o.$slots, "thumb", {}, () => [
+            e.thumbIcon ? (r(), E(j, {
+              key: 0,
+              name: e.thumbIcon,
+              size: l.value.thumbIcon
+            }, null, 8, ["name", "size"])) : d("", !0)
+          ])
+        ], 4),
+        u("input", {
+          ref: "inputEl",
+          type: "range",
+          value: e.modelValue,
+          min: e.min,
+          max: e.max,
+          step: e.step,
+          disabled: e.disabled,
+          style: n({
+            position: "absolute",
+            left: "0",
+            width: "100%",
+            height: "100%",
+            margin: "0",
+            opacity: "0",
+            cursor: e.disabled ? "default" : "pointer",
+            zIndex: 3
+          }),
+          onInput: p,
+          onMousedown: a[0] || (a[0] = (v) => i.value = !0),
+          onMouseup: a[1] || (a[1] = (v) => i.value = !1),
+          onTouchstart: a[2] || (a[2] = (v) => i.value = !0),
+          onTouchend: a[3] || (a[3] = (v) => i.value = !1)
+        }, null, 44, N)
+      ], 4),
+      e.showRange ? (r(), m("div", M, [
+        u("span", {
+          style: n({ fontSize: l.value.valueFont, color: "var(--cui-text-tertiary)" })
+        }, c(e.formatValue ? e.formatValue(e.min) : e.min), 5),
+        u("span", {
+          style: n({ fontSize: l.value.valueFont, color: "var(--cui-text-tertiary)" })
+        }, c(e.formatValue ? e.formatValue(e.max) : e.max), 5)
+      ])) : d("", !0)
+    ], 4)), [
+      [H, !e.hidden]
+    ]);
+  }
+});
+export {
+  U as default
+};

package/dist/components/CuiSlider.vue2.js

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

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

@@ -1,15 +1,14 @@
 import type { ResponsiveValue, TailwindSpacing } from "../types/grid";
-export interface CuiSpacerProps {
+import type { CuiOrientation, HideableProps } from "../types/common";
+export interface CuiSpacerProps extends HideableProps {
     /** Fixed size (Tailwind spacing scale). If not provided, uses flex-grow to fill available space */
     size?: ResponsiveValue<TailwindSpacing>;
-    /** Direction: horizontal (width) or vertical (height) */
-    direction?: "horizontal" | "vertical";
-    /** Hide the component */
-    hidden?: boolean;
+    /** Orientation: horizontal (width) or vertical (height) */
+    orientation?: CuiOrientation;
 }
 declare const _default: import("vue").DefineComponent<CuiSpacerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CuiSpacerProps> & Readonly<{}>, {
     hidden: boolean;
-    direction: "horizontal" | "vertical";
+    orientation: CuiOrientation;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
 //# sourceMappingURL=CuiSpacer.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CuiSpacer.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiSpacer.vue"],"names":[],"mappings":"AAuDA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEtE,MAAM,WAAW,cAAc;IAC7B,mGAAmG;IACnG,IAAI,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACxC,yDAAyD;IACzD,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;;YADU,OAAO;eAFJ,YAAY,GAAG,UAAU;;AA6EvC,wBAOG"}
+{"version":3,"file":"CuiSpacer.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiSpacer.vue"],"names":[],"mappings":"AAsDA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErE,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,mGAAmG;IACnG,IAAI,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACxC,2DAA2D;IAC3D,WAAW,CAAC,EAAE,cAAc,CAAC;CAC9B;;;iBADe,cAAc;;AA2E9B,wBAOG"}

package/dist/components/CuiSpacer.vue.js

@@ -0,0 +1,32 @@
+import { defineComponent as l, computed as c, withDirectives as p, openBlock as d, createElementBlock as h, normalizeStyle as u, vShow as f } from "vue";
+import { useBreakpoint as m } from "../composables/useBreakpoint.js";
+import { resolveResponsive as v, spacingToCss as z } from "../utils/responsive.js";
+const k = /* @__PURE__ */ l({
+  __name: "CuiSpacer",
+  props: {
+    size: {},
+    orientation: { default: "horizontal" },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(i) {
+    const t = i, { breakpoint: r } = m(), a = c(() => {
+      const n = r.value, o = v(t.size, void 0, n), e = {};
+      if (o) {
+        const s = z(o);
+        t.orientation === "horizontal" ? e.width = s : e.height = s;
+      } else
+        e.flexGrow = "1", t.orientation === "horizontal" ? e.width = "0" : e.height = "0";
+      return e;
+    });
+    return (n, o) => p((d(), h("div", {
+      class: "cui-spacer",
+      style: u(a.value),
+      "aria-hidden": "true"
+    }, null, 4)), [
+      [f, !i.hidden]
+    ]);
+  }
+});
+export {
+  k as default
+};

package/dist/components/CuiSpacer.vue2.js

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

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

@@ -1,25 +1,18 @@
-import type { ButtonColor } from "./CuiButton.vue";
-export type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl";
+import type { CuiSize, HideableProps, ColorableProps, SizeableProps } from "../types/common";
 export type SpinnerVariant = "ring" | "dots" | "bars";
-export interface CuiSpinnerProps {
-    /** Size */
-    size?: SpinnerSize;
-    /** Color role */
-    color?: ButtonColor;
+export interface CuiSpinnerProps extends HideableProps, ColorableProps, SizeableProps {
     /** Visual variant */
     variant?: SpinnerVariant;
     /** Accessible label */
     label?: string;
     /** Show label text below the spinner */
     showLabel?: boolean;
-    /** Hide the component */
-    hidden?: boolean;
 }
 declare const _default: import("vue").DefineComponent<CuiSpinnerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CuiSpinnerProps> & Readonly<{}>, {
-    size: SpinnerSize;
-    color: ButtonColor;
-    hidden: boolean;
     label: string;
+    hidden: boolean;
+    size: CuiSize;
+    color: import("..").CuiColor;
     variant: SpinnerVariant;
     showLabel: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiSpinner.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiSpinner.vue"],"names":[],"mappings":"AAmJA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,WAAW;IACX,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,iBAAiB;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;;UAXQ,WAAW;WAEV,WAAW;YAQV,OAAO;WAJR,MAAM;aAFJ,cAAc;eAIZ,OAAO;;AAqJrB,wBAOG"}
+{"version":3,"file":"CuiSpinner.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiSpinner.vue"],"names":[],"mappings":"AA6IA,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAG7F,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa;IACnF,qBAAqB;IACrB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;;WAHS,MAAM;;;;aAFJ,cAAc;eAIZ,OAAO;;AAmJrB,wBAOG"}

package/dist/components/CuiSpinner.vue.js

@@ -0,0 +1,99 @@
+import { defineComponent as v, computed as m, withDirectives as p, openBlock as a, createElementBlock as i, normalizeStyle as r, Fragment as u, renderList as b, createElementVNode as c, createCommentVNode as s, toDisplayString as h, vShow as x } from "vue";
+import { scaleDensity as o } from "../utils/sizing.js";
+const f = ["aria-label"], y = {
+  key: 4,
+  style: { position: "absolute", width: "1px", height: "1px", overflow: "hidden", clip: "rect(0,0,0,0)", "white-space": "nowrap" }
+}, W = /* @__PURE__ */ v({
+  __name: "CuiSpinner",
+  props: {
+    variant: { default: "ring" },
+    label: { default: "Loading" },
+    showLabel: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "md" }
+  },
+  setup(t) {
+    const d = t, g = {
+      xs: { box: "0.875rem", stroke: "2px", dotSize: "0.25rem", barWidth: "0.1875rem", barHeight: "0.5rem", labelFont: "0.6875rem", gap: o("0.25rem") },
+      sm: { box: "1.25rem", stroke: "2px", dotSize: "0.3125rem", barWidth: "0.1875rem", barHeight: "0.625rem", labelFont: "0.75rem", gap: o("0.375rem") },
+      md: { box: "1.75rem", stroke: "3px", dotSize: "0.375rem", barWidth: "0.25rem", barHeight: "0.875rem", labelFont: "0.8125rem", gap: o("0.5rem") },
+      lg: { box: "2.5rem", stroke: "3px", dotSize: "0.5rem", barWidth: "0.25rem", barHeight: "1.125rem", labelFont: "0.875rem", gap: o("0.5rem") },
+      xl: { box: "3.5rem", stroke: "4px", dotSize: "0.625rem", barWidth: "0.3125rem", barHeight: "1.5rem", labelFont: "1rem", gap: o("0.625rem") }
+    }, e = m(() => g[d.size]), n = m(() => `var(--cui-${d.color})`);
+    return (k, z) => p((a(), i("div", {
+      role: "status",
+      "aria-label": t.label,
+      style: r({
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: e.value.gap
+      })
+    }, [
+      t.variant === "ring" ? (a(), i("div", {
+        key: 0,
+        style: r({
+          width: e.value.box,
+          height: e.value.box,
+          borderRadius: "50%",
+          border: `${e.value.stroke} solid var(--cui-border)`,
+          borderTopColor: n.value,
+          animation: "cui-spin 0.75s linear infinite"
+        })
+      }, null, 4)) : t.variant === "dots" ? (a(), i("div", {
+        key: 1,
+        style: r({
+          display: "flex",
+          alignItems: "center",
+          gap: e.value.dotSize,
+          height: e.value.box
+        })
+      }, [
+        (a(), i(u, null, b(3, (l) => c("div", {
+          key: l,
+          style: r({
+            width: e.value.dotSize,
+            height: e.value.dotSize,
+            borderRadius: "50%",
+            background: n.value,
+            animation: `cui-spinner-bounce 1.4s ease-in-out ${(l - 1) * 0.16}s infinite both`
+          })
+        }, null, 4)), 64))
+      ], 4)) : t.variant === "bars" ? (a(), i("div", {
+        key: 2,
+        style: r({
+          display: "flex",
+          alignItems: "center",
+          gap: `calc(${e.value.barWidth} * 0.75)`,
+          height: e.value.box
+        })
+      }, [
+        (a(), i(u, null, b(4, (l) => c("div", {
+          key: l,
+          style: r({
+            width: e.value.barWidth,
+            height: e.value.barHeight,
+            borderRadius: "9999px",
+            background: n.value,
+            animation: `cui-spinner-bars 1.2s ease-in-out ${(l - 1) * 0.1}s infinite`
+          })
+        }, null, 4)), 64))
+      ], 4)) : s("", !0),
+      t.showLabel ? (a(), i("span", {
+        key: 3,
+        style: r({
+          fontSize: e.value.labelFont,
+          color: "var(--cui-text-secondary)",
+          fontWeight: "500"
+        })
+      }, h(t.label), 5)) : s("", !0),
+      t.showLabel ? s("", !0) : (a(), i("span", y, h(t.label), 1))
+    ], 12, f)), [
+      [x, !t.hidden]
+    ]);
+  }
+});
+export {
+  W as default
+};

package/dist/components/CuiSpinner.vue3.js

@@ -0,0 +1,5 @@
+import o from "./CuiSpinner.vue.js";
+/* empty css                */
+export {
+  o as default
+};

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

@@ -1,13 +1,12 @@
 import type { ResponsiveValue, TailwindSpacing } from "../types/grid";
-export interface CuiStackProps {
-    /** Stack direction: vertical (column) or horizontal (row) */
-    direction?: "vertical" | "horizontal";
+import type { CuiOrientation, HideableProps } from "../types/common";
+export interface CuiStackProps extends HideableProps {
+    /** Stack orientation: vertical (column) or horizontal (row) */
+    orientation?: CuiOrientation;
     /** Spacing between items (Tailwind spacing scale) */
     spacing?: ResponsiveValue<TailwindSpacing>;
     /** Enable debug mode */
     debug?: boolean;
-    /** Hide the component */
-    hidden?: boolean;
 }
 declare var __VLS_5: {};
 type __VLS_Slots = {} & {
@@ -15,8 +14,8 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<CuiStackProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CuiStackProps> & Readonly<{}>, {
     hidden: boolean;
+    orientation: CuiOrientation;
     debug: boolean;
-    direction: "vertical" | "horizontal";
     spacing: ResponsiveValue<TailwindSpacing>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiStack.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiStack.vue"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEtE,MAAM,WAAW,aAAa;IAC5B,6DAA6D;IAC7D,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,qDAAqD;IACrD,OAAO,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAC3C,wBAAwB;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAgDD,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;YAxEV,OAAO;WAFR,OAAO;eAJH,UAAU,GAAG,YAAY;aAE3B,eAAe,CAAC,eAAe,CAAC;6EAmF1C,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":"CuiStack.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiStack.vue"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErE,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,+DAA+D;IAC/D,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,qDAAqD;IACrD,OAAO,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAC3C,wBAAwB;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAgDD,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;;iBA5EL,cAAc;WAIpB,OAAO;aAFL,eAAe,CAAC,eAAe,CAAC;6EAiF1C,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/CuiStack.vue.js

@@ -0,0 +1,30 @@
+import { defineComponent as a, withDirectives as i, openBlock as o, createBlock as n, withCtx as l, renderSlot as r, vShow as c } from "vue";
+import d from "./CuiFlex.vue.js";
+const p = /* @__PURE__ */ a({
+  __name: "CuiStack",
+  props: {
+    orientation: { default: "vertical" },
+    spacing: { default: "4" },
+    debug: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return (t, u) => i((o(), n(d, {
+      direction: e.orientation === "vertical" ? "col" : "row",
+      gap: e.spacing,
+      debug: e.debug,
+      wrap: "nowrap",
+      class: "cui-stack"
+    }, {
+      default: l(() => [
+        r(t.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["direction", "gap", "debug"])), [
+      [c, !e.hidden]
+    ]);
+  }
+});
+export {
+  p as default
+};

package/dist/components/CuiStack.vue2.js

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

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

@@ -1,5 +1,5 @@
+import type { HideableProps, SizeableProps } from "../types/common";
 export type StepperOrientation = "horizontal" | "vertical";
-export type StepperSize = "sm" | "md" | "lg";
 export type StepStatus = "complete" | "current" | "upcoming" | "error";
 export interface StepDef {
     /** Step label */
@@ -11,29 +11,25 @@ export interface StepDef {
     /** Force error state on this step */
     error?: boolean;
 }
-export interface CuiStepperProps {
+export interface CuiStepperProps extends HideableProps, SizeableProps {
     /** Step definitions */
     steps: StepDef[];
     /** Current active step (0-based index) */
     modelValue?: number;
     /** Orientation */
     orientation?: StepperOrientation;
-    /** Size */
-    size?: StepperSize;
     /** Allow clicking completed steps to go back */
     clickable?: boolean;
     /** Linear mode — can only progress forward, no skipping */
     linear?: boolean;
-    /** Hide the component */
-    hidden?: boolean;
 }
 declare const _default: import("vue").DefineComponent<CuiStepperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<CuiStepperProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
-    size: StepperSize;
     hidden: boolean;
+    size: import("..").CuiSize;
     orientation: StepperOrientation;
     modelValue: number;
     linear: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiStepper.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiStepper.vue"],"names":[],"mappings":"AAqPA,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAEvE,MAAM,WAAW,OAAO;IACtB,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,WAAW;IACX,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;;;;;;UAPQ,WAAW;YAMT,OAAO;iBARF,kBAAkB;gBAFnB,MAAM;YAQV,OAAO;eAFJ,OAAO;;AAoSrB,wBAQG"}
+{"version":3,"file":"CuiStepper.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiStepper.vue"],"names":[],"mappings":"AAmPA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAKpE,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAEvE,MAAM,WAAW,OAAO;IACtB,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,aAAa;IACnE,uBAAuB;IACvB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;;;;;;;;iBALe,kBAAkB;gBAFnB,MAAM;YAMV,OAAO;eAFJ,OAAO;;AAqSrB,wBAQG"}