@bridge-ui/vue 0.1.0 → 0.2.0

package/dist/Components/ColorField/composables/useColorField.js

@@ -0,0 +1,182 @@
+import { hasNamedSlot as e } from "../../../Utils/slotOrProp.js";
+import { useBreakpoint as t } from "../../../Utils/useBreakpoint.js";
+import { mergePartBind as n, resolveFieldAdornmentIconSize as r, useFieldShowFooter as i, usePickerFill as a } from "../../../Utils/index.js";
+import { formFieldBridgeKeys as ee, useFormField as te } from "../../FormField/composables/useFormField.js";
+import { computed as o, ref as s, useAttrs as ne, useSlots as c } from "vue";
+import { get as l, isNil as u, omit as d } from "es-toolkit/compat";
+import { DEFAULT_COLOR_FORMAT as f, formatColor as p, normalizeColorValue as m, parseColor as h, resolveFieldOverlay as g, resolveFieldPickerClassName as _, toCssRgba as v } from "@bridge-ui/core/Domain";
+import { colorPickerRoundedProps as y, colorPickerSizeProps as b, listboxColorProps as x } from "@bridge-ui/core/Tokens";
+import { cn as S, splitComponentProps as C } from "@bridge-ui/core/Utils";
+//#region src/Components/ColorField/composables/useColorField.ts
+var re = [
+	"fill",
+	"alpha",
+	"format",
+	"classes",
+	"overlay",
+	"editable",
+	"swatches",
+	"clearable",
+	"showFooter",
+	"showSwatch",
+	"customProps",
+	"defaultValue"
+], ie = "bg-[image:repeating-conic-gradient(#d1d5db_0%_25%,#ffffff_0%_50%)] bg-[size:0.5rem_0.5rem] dark:bg-[image:repeating-conic-gradient(#4b5563_0%_25%,#1f2937_0%_50%)]";
+function ae(e, t) {
+	if (u(e) || e.length === 0) return "";
+	let n = h(e);
+	return n ? p(n, t) : e;
+}
+function w(p, w, T) {
+	let oe = ne(), E = c(), D = t(), O = s(!1), k = s(null), A = s(null), j = o(() => C({
+		props: {
+			...oe,
+			...p
+		},
+		bridgeKeys: re
+	})), M = o(() => j.value.componentProps), N = o(() => w.value ?? null), P = o(() => M.value.format ?? f), F = o(() => M.value.clearable !== !1), I = o(() => M.value.showSwatch !== !1), L = o(() => !u(N.value) && N.value.length > 0), R = o(() => g(M.value.overlay, D.mobile)), z = a({
+		overlay: R,
+		componentName: "ColorField",
+		fill: () => M.value.fill
+	}), B = o(() => _(z.value, R.value)), V = (e) => {
+		k.value = e instanceof HTMLElement ? e : null;
+	};
+	function H(e) {
+		O.value !== e && (O.value = e, T(e ? "open" : "close"));
+	}
+	let U = o(() => d(j.value.inheritedAttrs, ["class"])), W = o(() => {
+		let t = C({
+			bridgeKeys: ee,
+			props: U.value
+		}).componentProps, r = t.endIcon ?? (e(E, "end") ? void 0 : "palette"), { menu: i, swatch: a, clearIcon: te, colorPicker: o, ...s } = M.value.customProps ?? {};
+		return {
+			...t,
+			endIcon: r,
+			classes: M.value.classes,
+			customProps: {
+				...s,
+				container: n(s.container, {}, {
+					ref: V,
+					class: S({ "cursor-pointer": !p.disabled && !p.readonly }),
+					onClick: (e) => {
+						p.disabled || p.readonly || e.target.closest("[data-field-clear]") || H(!0);
+					}
+				})
+			}
+		};
+	}), G = te(() => W.value, {
+		size: "md",
+		rounded: "md",
+		color: "primary",
+		variant: "outline",
+		showErrorIcon: !0
+	}, { componentName: "ColorField" }), K = o(() => L.value && F.value && !p.readonly && !G.isDisabled.value), q = o(() => A.value === null ? ae(N.value, P.value) : A.value), J = o(() => h(N.value)), Y = o(() => J.value ? v(J.value) : void 0);
+	function X(e) {
+		w.value = e, A.value = null, T("change", e);
+	}
+	function Z(e) {
+		let t = e.trim();
+		if (t.length === 0) {
+			X(null);
+			return;
+		}
+		let n = m(t, P.value);
+		if (!n) {
+			A.value = null;
+			return;
+		}
+		X(n);
+	}
+	let Q = i({
+		overlay: R,
+		componentName: "ColorField",
+		showFooter: () => M.value.showFooter
+	});
+	function se(e) {
+		X(e), Q.value && T("apply");
+	}
+	function ce() {
+		T("cancel");
+	}
+	function le(e) {
+		e?.preventDefault(), e?.stopPropagation(), !(p.disabled || p.readonly) && (X(null), T("clear"), H(!1));
+	}
+	function $(e) {
+		e.preventDefault();
+	}
+	let ue = o(() => n({
+		value: q.value,
+		readonly: !M.value.editable || G.inputBind.value.readonly,
+		onFocus: (e) => {
+			G.inputBind.value.onFocus?.(e), H(!0);
+		},
+		onBlur: () => {
+			M.value.editable && A.value !== null && Z(A.value);
+		},
+		onInput: (e) => {
+			M.value.editable && (A.value = e.target.value);
+		},
+		onKeydown: (e) => {
+			G.inputBind.value.onKeydown?.(e), e.key === "Escape" && (A.value = null, H(!1)), e.key === "Enter" && M.value.editable && A.value !== null && (e.preventDefault(), Z(A.value));
+		}
+	}, void 0, G.inputBind.value)), de = o(() => M.value.overlay), fe = o(() => ({
+		modal: M.value.customProps?.modal,
+		drawer: M.value.customProps?.drawer,
+		menu: {
+			anchorEl: k.value,
+			placement: "bottom-start",
+			...M.value.customProps?.menu
+		}
+	})), pe = o(() => M.value.customProps?.colorPicker), me = o(() => r(G.merged.value.size)), he = o(() => l(x, [G.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
+	return {
+		open: O,
+		fill: z,
+		format: P,
+		overlay: de,
+		hasValue: L,
+		colorOnly: M,
+		formField: G,
+		inputBind: ue,
+		clearable: F,
+		clearBind: o(() => n({}, {}, {
+			tabindex: 0,
+			role: "button",
+			"data-field-clear": !0,
+			onMousedown: $,
+			class: S({
+				"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
+				[he.value]: !0,
+				[M.value.classes?.clear ?? ""]: !0
+			})
+		})),
+		swatchBind: o(() => {
+			let e = l(b, [G.merged.value.size ?? "md", "fieldSwatch"]), t = l(y, G.merged.value.rounded ?? "md");
+			return n(M.value.customProps?.swatch, { "aria-hidden": !0 }, S({
+				"relative shrink-0 overflow-hidden": !0,
+				[ie]: !0,
+				[e]: !0,
+				[t]: !0,
+				[M.value.classes?.swatch ?? ""]: !0
+			}));
+		}),
+		clearValue: le,
+		modelValue: N,
+		showFooter: Q,
+		showSwatch: I,
+		pickerClass: B,
+		containerRef: k,
+		clearIconSize: me,
+		showClearIcon: K,
+		swatchFillBind: o(() => ({
+			class: "absolute inset-0",
+			style: Y.value ? { backgroundColor: Y.value } : void 0
+		})),
+		handleOpenChange: H,
+		handlePickerChange: se,
+		handlePickerCancel: ce,
+		overlayCustomProps: fe,
+		colorPickerCustomProps: pe
+	};
+}
+//#endregion
+export { w as useColorField };

package/dist/Components/ColorField/index.d.ts

@@ -0,0 +1,3 @@
+export type { ColorFieldClasses, ColorFieldCustomProps, ColorFieldEmits, ColorFieldOwnProps, ColorFieldProps, ColorFieldSlots, } from './colorField.types';
+export { default as ColorField } from './ColorField.vue';
+export { useColorField } from './composables/useColorField';

package/dist/Components/ColorField/index.js

@@ -0,0 +1,3 @@
+import { useColorField as e } from "./composables/useColorField.js";
+import t from "./ColorField.js";
+export { t as ColorField, e as useColorField };

package/dist/Components/ColorPicker/ColorPicker.js

@@ -0,0 +1,5 @@
+import e from "./ColorPicker.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/ColorPicker/ColorPicker.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/ColorPicker/ColorPicker.vue.d.ts

@@ -0,0 +1,21 @@
+import { ColorPickerOwnProps, ColorPickerSlots } from './colorPicker.types';
+type __VLS_Slots = ColorPickerSlots;
+declare const __VLS_base: import('vue').DefineComponent<ColorPickerOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    apply: () => any;
+    cancel: () => any;
+    change: (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<ColorPickerOwnProps> & Readonly<{
+    onApply?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onChange?: ((value: string | null) => any) | undefined;
+}>, {
+    showFooter: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Components/ColorPicker/ColorPicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,91 @@
+import e from "../Button/Button.js";
+import { useColorPicker as t } from "./composables/useColorPicker.js";
+import { Fragment as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, guardReactiveProps as l, mergeProps as u, normalizeClass as d, normalizeProps as f, normalizeStyle as p, openBlock as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
+import { cn as b } from "@bridge-ui/core/Utils";
+//#region src/Components/ColorPicker/ColorPicker.vue?vue&type=script&setup=true&lang.ts
+var x = { class: "min-w-0 truncate text-sm text-dark-700 dark:text-dark-100" }, S = [
+	"aria-label",
+	"onClick",
+	"aria-pressed",
+	"disabled"
+], C = /*@__PURE__*/ c({
+	inheritAttrs: !1,
+	__name: "ColorPicker",
+	props: {
+		alpha: { type: Boolean },
+		classes: {},
+		customProps: {},
+		defaultValue: {},
+		disabled: { type: Boolean },
+		fill: { type: Boolean },
+		format: {},
+		readOnly: { type: Boolean },
+		rounded: {},
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		},
+		swatches: {},
+		value: {}
+	},
+	emits: [
+		"apply",
+		"cancel",
+		"change"
+	],
+	setup(c, { emit: C }) {
+		let { merged: w, hueBind: T, rootBind: E, areaBind: D, alphaBind: O, showAlpha: k, swatchCss: A, footerBind: j, applyLabel: M, showFooter: N, previewBind: P, contentBind: F, handleApply: I, cancelLabel: L, swatchesBind: R, handleCancel: z, hueThumbBind: B, areaThumbBind: V, alphaFillBind: H, formattedValue: U, alphaThumbBind: W, presetSwatches: G, applyButtonProps: K, isSwatchSelected: q, previewSwatchBind: J, handleSwatchClick: Y, swatchButtonClass: X, cancelButtonProps: Z, swatchSelectedClass: Q, previewSwatchFillBind: $ } = t(c, {
+			rounded: "md",
+			format: "hex"
+		}, C);
+		return (t, c) => (m(), i("div", f(l(v(E))), [a("div", { class: d(v(F)) }, [
+			a("div", f(l(v(D))), [
+				c[0] ||= a("span", {
+					"aria-hidden": "",
+					class: "pointer-events-none absolute inset-0",
+					style: { backgroundImage: "linear-gradient(to right, #fff, transparent)" }
+				}, null, -1),
+				c[1] ||= a("span", {
+					"aria-hidden": "",
+					class: "pointer-events-none absolute inset-0",
+					style: { backgroundImage: "linear-gradient(to top, #000, transparent)" }
+				}, null, -1),
+				a("span", f(l(v(V))), null, 16)
+			], 16),
+			a("div", f(l(v(T))), [a("span", f(l(v(B))), null, 16)], 16),
+			v(k) ? (m(), i("div", f(u({ key: 0 }, v(O))), [a("span", f(l(v(H))), null, 16), a("span", f(l(v(W))), null, 16)], 16)) : r("", !0),
+			a("div", f(l(v(P))), [a("span", f(l(v(J))), [a("span", f(l(v($))), null, 16)], 16), a("span", x, _(v(U)), 1)], 16),
+			v(G).length > 0 ? (m(), i("div", f(u({ key: 1 }, v(R))), [(m(!0), i(n, null, h(v(G), (e) => (m(), i("button", {
+				type: "button",
+				key: e,
+				"aria-label": e,
+				onClick: (t) => v(Y)(e),
+				"aria-pressed": v(q)(e),
+				disabled: v(w).disabled || v(w).readOnly,
+				class: d(v(b)({
+					[v(X)]: !0,
+					[v(Q)]: v(q)(e)
+				}))
+			}, [a("span", {
+				"aria-hidden": "",
+				class: "absolute inset-0",
+				style: p({ backgroundColor: v(A)(e) })
+			}, null, 4)], 10, S))), 128))], 16)) : r("", !0)
+		], 2), v(N) ? (m(), i("div", f(u({ key: 0 }, v(j))), [g(t.$slots, "footer", {
+			apply: v(I),
+			cancel: v(z)
+		}, () => [s(v(e), u({
+			variant: "flat",
+			color: "secondary",
+			onClick: v(z)
+		}, v(Z)), {
+			default: y(() => [o(_(v(L)), 1)]),
+			_: 1
+		}, 16, ["onClick"]), s(v(e), u({ color: "primary" }, v(K), { onClick: v(I) }), {
+			default: y(() => [o(_(v(M)), 1)]),
+			_: 1
+		}, 16, ["onClick"])])], 16)) : r("", !0)], 16));
+	}
+});
+//#endregion
+export { C as default };

package/dist/Components/ColorPicker/colorPicker.types.d.ts

@@ -0,0 +1,200 @@
+import { HTMLAttributes, Slot } from 'vue';
+import { ColorFormat, FieldOverlayFooterSlotProps } from '@bridge-ui/core/Domain';
+import { ColorPickerRounded } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
+import { ButtonProps } from '../Button/button.types';
+export interface ColorPickerRoundedOverrides {}
+export interface ColorPickerClasses {
+    /**
+     * Classes for the alpha slider.
+     */
+    alpha?: string;
+    /**
+     * Classes for the saturation / brightness area.
+     */
+    area?: string;
+    /**
+     * Classes for the footer.
+     */
+    footer?: string;
+    /**
+     * Classes for the hue slider.
+     */
+    hue?: string;
+    /**
+     * Classes for the preview row.
+     */
+    preview?: string;
+    /**
+     * Classes for the root element.
+     */
+    root?: string;
+    /**
+     * Classes for preset swatches.
+     */
+    swatches?: string;
+}
+export interface ColorPickerCustomProps {
+    /**
+     * Props forwarded to the alpha slider.
+     *
+     * @default undefined
+     */
+    alpha?: HTMLAttributes;
+    /**
+     * Props forwarded to the Apply button.
+     *
+     * @default undefined
+     */
+    applyButton?: Partial<ButtonProps>;
+    /**
+     * Props forwarded to the saturation / brightness area.
+     *
+     * @default undefined
+     */
+    area?: HTMLAttributes;
+    /**
+     * Props forwarded to the Cancel button.
+     *
+     * @default undefined
+     */
+    cancelButton?: Partial<ButtonProps>;
+    /**
+     * Props forwarded to the footer.
+     *
+     * @default undefined
+     */
+    footer?: HTMLAttributes;
+    /**
+     * Props forwarded to the hue slider.
+     *
+     * @default undefined
+     */
+    hue?: HTMLAttributes;
+    /**
+     * Props forwarded to the preview row.
+     *
+     * @default undefined
+     */
+    preview?: HTMLAttributes;
+    /**
+     * Props forwarded to the root element.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to the preset swatches row.
+     *
+     * @default undefined
+     */
+    swatches?: HTMLAttributes;
+}
+export interface ColorPickerEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
+    /**
+     * Emitted when Cancel is pressed.
+     */
+    cancel: [];
+    /**
+     * Emitted when Apply is pressed (`showFooter`) or when the value commits.
+     */
+    change: [value: null | string];
+}
+export interface ColorPickerOwnProps {
+    /**
+     * Shows the alpha slider. When unset, follows `format` (`rgba` / `hexa` /
+     * `hsla` enable it).
+     *
+     * @default false (`true` for alpha formats when unset)
+     */
+    alpha?: boolean;
+    /**
+     * Classes for picker regions.
+     *
+     * @default undefined
+     */
+    classes?: ColorPickerClasses;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: ColorPickerCustomProps;
+    /**
+     * Uncontrolled initial value.
+     *
+     * @default null
+     */
+    defaultValue?: null | string;
+    /**
+     * Disables the picker.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * When `true`, fills the container width.
+     * When `false` or unset, stays at the minimum width.
+     *
+     * @default false
+     */
+    fill?: boolean;
+    /**
+     * Serialized output format.
+     *
+     * @default "hex"
+     */
+    format?: ColorFormat;
+    /**
+     * Prevents selection.
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Border radius of the picker shell and swatches.
+     *
+     * `full` uses `rounded-panel-full` so tall surfaces do not become stadium-shaped.
+     * Hue and alpha tracks stay pill-shaped.
+     *
+     * `ColorField` always forwards its own `rounded` here so internals and the
+     * picker shell match the field. Field overlay menus are unstyled, so this
+     * shell is the visible radius.
+     *
+     * @default "md"
+     */
+    rounded?: MergeProps<ColorPickerRounded, ColorPickerRoundedOverrides>;
+    /**
+     * Shows Cancel / Apply footer. Selection is draft until Apply.
+     * Nested fields forward their own `showFooter` (dialog overlays default to `true`).
+     *
+     * @default false
+     */
+    showFooter?: boolean;
+    /**
+     * Preset colors shown below the sliders.
+     *
+     * @default undefined
+     */
+    swatches?: string[];
+    /**
+     * Controlled value.
+     *
+     * @default undefined
+     */
+    value?: null | string;
+}
+export interface ColorPickerSlots {
+    /**
+     * Custom footer. Replaces Cancel / Apply. Call `apply()` to commit and close
+     * the overlay, or `cancel()` to discard and close.
+     *
+     * @default undefined
+     */
+    footer?: Slot<FieldOverlayFooterSlotProps>;
+}
+export type ColorPickerProps = MergeHtmlProps<ColorPickerOwnProps, HTMLAttributes>;

package/dist/Components/ColorPicker/composables/useColorPicker.d.ts

@@ -0,0 +1,111 @@
+import { MaybeRefOrGetter, SetupContext } from 'vue';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { ColorPickerEmits, ColorPickerOwnProps } from '../colorPicker.types';
+type ColorPickerLibDefaults = LibDefaultsShape<ColorPickerOwnProps, "format" | "rounded">;
+type ColorPickerMerged = MergeLibDefaults<ColorPickerOwnProps, ColorPickerLibDefaults>;
+/**
+ * Owns controlled/uncontrolled value, optional footer draft, and panel binds.
+ */
+export declare function useColorPicker(props: MaybeRefOrGetter<ColorPickerOwnProps>, libDefaults: ColorPickerLibDefaults, emit: SetupContext<ColorPickerEmits>["emit"]): {
+    merged: import('vue').ComputedRef<ColorPickerMerged>;
+    hueBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        role: string;
+        "aria-valuemin": number;
+        "aria-valuemax": number;
+        onKeydown: (event: KeyboardEvent) => void;
+        "aria-label": string;
+        tabindex: number;
+        "aria-valuenow": number;
+        style: {
+            backgroundImage: string;
+        };
+        onPointerdown: (event: PointerEvent) => void;
+        onPointermove: (event: PointerEvent) => void;
+    }>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<ColorPickerOwnProps, "fill" | "format" | "value" | "classes" | "showFooter" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "alpha" | "swatches">>>>;
+    areaBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        role: string;
+        onKeydown: (event: KeyboardEvent) => void;
+        tabindex: number;
+        style: {
+            backgroundColor: string;
+        };
+        "aria-label": string;
+        "aria-valuetext": string;
+        onPointerdown: (event: PointerEvent) => void;
+        onPointermove: (event: PointerEvent) => void;
+    }>>;
+    cssColor: import('vue').ComputedRef<string>;
+    alphaBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        role: string;
+        "aria-valuemin": number;
+        "aria-valuemax": number;
+        onKeydown: (event: KeyboardEvent) => void;
+        tabindex: number;
+        "aria-label": string;
+        "aria-valuenow": number;
+        onPointerdown: (event: PointerEvent) => void;
+        onPointermove: (event: PointerEvent) => void;
+    }>>;
+    showAlpha: import('vue').ComputedRef<boolean>;
+    footerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    showFooter: import('vue').ComputedRef<boolean>;
+    previewBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    contentBind: import('vue').ComputedRef<string>;
+    handleApply: () => void;
+    swatchesBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    handleCancel: () => void;
+    hueThumbBind: import('vue').ComputedRef<{
+        "aria-hidden": boolean;
+        style: {
+            backgroundColor: string;
+            left: string;
+        };
+        class: string;
+    }>;
+    areaThumbBind: import('vue').ComputedRef<{
+        "aria-hidden": boolean;
+        style: {
+            left: string;
+            top: string;
+        };
+        class: string;
+    }>;
+    alphaFillBind: import('vue').ComputedRef<{
+        "aria-hidden": boolean;
+        class: string;
+        style: {
+            backgroundImage: string;
+        };
+    }>;
+    formattedValue: import('vue').ComputedRef<string>;
+    alphaThumbBind: import('vue').ComputedRef<{
+        "aria-hidden": boolean;
+        style: {
+            backgroundColor: string;
+            left: string;
+        };
+        class: string;
+    }>;
+    presetSwatches: import('vue').ComputedRef<string[]>;
+    previewSwatchBind: import('vue').ComputedRef<{
+        "aria-hidden": boolean;
+        class: string;
+    }>;
+    handleSwatchClick: (value: string) => void;
+    swatchButtonClass: import('vue').ComputedRef<string>;
+    swatchSelectedClass: import('vue').ComputedRef<string>;
+    previewSwatchFillBind: import('vue').ComputedRef<{
+        class: string;
+        style: {
+            backgroundColor: string;
+        };
+    }>;
+    applyLabel: import('vue').ComputedRef<string>;
+    cancelLabel: import('vue').ComputedRef<string>;
+    applyButtonProps: import('vue').ComputedRef<Partial<import('../../Button').ButtonProps> | undefined>;
+    cancelButtonProps: import('vue').ComputedRef<Partial<import('../../Button').ButtonProps> | undefined>;
+    isSwatchSelected: (value: string) => boolean;
+    swatchCss: (value: string) => string | undefined;
+};
+export {};