@bridge-ui/vue 0.5.1 → 0.6.0

package/dist/Components/Button/composables/useButton.js

@@ -1,10 +1,11 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
-import { computed as r, useAttrs as i } from "vue";
-import { get as a, includes as o, isNil as s } from "es-toolkit/compat";
-import { buttonDensityProps as c, buttonRoundedProps as l, buttonVariantProps as u } from "@bridge-ui/core/Tokens";
-import { cn as d, mergeBridgeUILayeredClasses as f, splitComponentProps as p } from "@bridge-ui/core/Utils";
+import { BUTTON_GROUP_INJECTION_KEY as r } from "../../ButtonGroup/buttonGroupInjectionKey.js";
+import { computed as i, inject as a, useAttrs as o } from "vue";
+import { get as s, includes as c, isNil as l } from "es-toolkit/compat";
+import { buttonDensityProps as u, buttonRoundedProps as d, buttonVariantProps as f } from "@bridge-ui/core/Tokens";
+import { cn as p, mergeBridgeUILayeredClasses as m, splitComponentProps as h } from "@bridge-ui/core/Utils";
 //#region src/Components/Button/composables/useButton.ts
-var m = [
+var g = [
 	"as",
 	"full",
 	"href",
@@ -19,90 +20,108 @@ var m = [
 	"rounded",
 	"variant",
 	"disabled",
+	"selected",
 	"startIcon",
 	"customProps"
 ];
-function h(h, g) {
-	let _ = i(), v = r(() => p({
-		bridgeKeys: m,
+function _(_, v) {
+	let y = o(), b = a(r, null), x = i(() => h({
+		bridgeKeys: g,
 		props: {
-			..._,
-			...h
+			...y,
+			..._
 		}
-	})), { merged: y, entry: b } = t({
-		libDefaults: g,
+	})), S = i(() => {
+		let e = x.value.componentProps, t = b?.value;
+		return {
+			...e,
+			size: e.size ?? t?.size,
+			color: e.color ?? t?.color,
+			density: e.density ?? t?.density,
+			rounded: e.rounded ?? t?.rounded,
+			variant: e.variant ?? t?.variant
+		};
+	}), { merged: C, entry: w } = t({
+		libDefaults: v,
 		componentName: "Button",
-		props: () => v.value.componentProps
-	}), x = r(() => y.value.customProps), S = n({
-		entry: b,
-		props: () => v.value.componentProps
-	}), C = r(() => y.value.as ?? "button"), w = r(() => C.value === "a"), T = r(() => C.value === "button"), E = r(() => y.value.density === "mini"), D = r(() => y.value.disabled || y.value.loading), O = r(() => T.value ? D.value : void 0), k = r(() => y.value.loading ? !0 : void 0), A = r(() => D.value && !T.value ? !0 : void 0), j = r(() => {
-		if (!(!w.value || D.value || !y.value.href)) return y.value.href;
-	}), M = r(() => {
-		if (!T.value) return;
-		let e = a(v.value.inheritedAttrs, "type");
-		return o([
+		props: () => S.value
+	}), T = i(() => C.value.customProps), E = n({
+		entry: w,
+		props: () => x.value.componentProps
+	}), D = i(() => C.value.as ?? "button"), O = i(() => D.value === "a"), k = i(() => D.value === "button"), A = i(() => C.value.density === "mini"), j = i(() => C.value.disabled || C.value.loading), M = i(() => k.value ? j.value : void 0), N = i(() => C.value.loading ? !0 : void 0), P = i(() => j.value && !k.value ? !0 : void 0), F = i(() => {
+		if (!(!O.value || j.value || !C.value.href)) return C.value.href;
+	}), I = i(() => {
+		if (!k.value) return;
+		let e = s(x.value.inheritedAttrs, "type");
+		return c([
 			"submit",
 			"reset",
 			"button"
 		], e) ? e : "button";
-	}), N = r(() => {
-		let e = f(c, b.value?.tokens?.density);
-		return a(e, [y.value.density, y.value.size]);
-	}), P = r(() => s(v.value.componentProps.variant) ? E.value ? "flat" : y.value.variant : v.value.componentProps.variant), F = r(() => {
-		let e = f(u, b.value?.tokens?.variant);
-		return a(e, [P.value, y.value.color]);
-	}), I = r(() => {
-		let e = f(l, b.value?.tokens?.rounded);
-		return a(e, y.value.rounded);
+	}), L = i(() => {
+		let e = m(u, w.value?.tokens?.density);
+		return s(e, [C.value.density, C.value.size]);
+	}), R = i(() => l(S.value.variant) ? l(b) && A.value ? "flat" : C.value.variant : S.value.variant), z = i(() => {
+		let e = m(f, w.value?.tokens?.variant);
+		return s(e, [R.value, C.value.color]);
+	}), B = i(() => {
+		let e = m(d, w.value?.tokens?.rounded);
+		return s(e, C.value.rounded);
 	});
 	return {
-		tag: C,
-		merged: y,
-		isMini: E,
-		iconBind: r(() => e(x.value?.icon, {}, d({
+		tag: D,
+		merged: C,
+		isMini: A,
+		iconBind: i(() => e(T.value?.icon, {}, p({
 			"shrink-0": !0,
-			[S.value.icon ?? ""]: !0
+			[E.value.icon ?? ""]: !0
 		}))),
-		rootBind: r(() => e(x.value?.root, v.value.inheritedAttrs, d({
-			"inline-flex items-center justify-center": !0,
-			"cursor-pointer outline-none outline-hidden": !0,
-			"shrink-0": E.value,
-			[N.value ?? ""]: !0,
-			[I.value ?? ""]: !0,
-			"w-full": !E.value && y.value.full,
-			"w-fit": !E.value && !y.value.full,
-			"group hover:shadow-xs": !E.value,
-			[a(F.value, "base") ?? ""]: !0,
-			[a(F.value, "hover") ?? ""]: !0,
-			[a(F.value, "focus") ?? ""]: !0,
-			"transition-all ease-in-out duration-200": !0,
-			"focus:ring-2": !0,
-			"focus:ring-offset-background-white dark:focus:ring-offset-background-dark": !0,
-			"disabled:opacity-80 disabled:cursor-not-allowed": !0,
-			"aria-disabled:opacity-80 aria-disabled:cursor-not-allowed aria-disabled:pointer-events-none": !0,
-			[S.value.root ?? ""]: !0
-		}))),
-		rootHref: j,
-		rootType: M,
-		endIconBind: r(() => e(x.value?.endIcon, {}, d({
+		rootBind: i(() => e(T.value?.root, x.value.inheritedAttrs, {
+			"aria-pressed": l(C.value.selected) ? void 0 : C.value.selected,
+			class: p({
+				"inline-flex items-center justify-center": !0,
+				"cursor-pointer outline-none outline-hidden": !0,
+				"shrink-0": A.value,
+				[L.value ?? ""]: !0,
+				[B.value ?? ""]: !0,
+				"h-auto": A.value && !l(b) && b.value?.density !== "mini",
+				"border border-transparent": !l(b) && R.value !== "outline",
+				"w-full": !A.value && C.value.full,
+				"w-fit": !A.value && !C.value.full,
+				"group hover:shadow-xs": !A.value,
+				[s(z.value, "base") ?? ""]: !0,
+				[s(z.value, "hover") ?? ""]: !0,
+				[s(z.value, "focus") ?? ""]: !0,
+				[s(z.value, "selected") ?? ""]: C.value.selected === !0,
+				"relative z-10": C.value.selected === !0,
+				"transition-all ease-in-out duration-200": !0,
+				"focus:ring-2": !0,
+				"focus:ring-offset-background-white dark:focus:ring-offset-background-dark": !0,
+				"disabled:opacity-80 disabled:cursor-not-allowed": !0,
+				"aria-disabled:opacity-80 aria-disabled:cursor-not-allowed aria-disabled:pointer-events-none": !0,
+				[E.value.root ?? ""]: !0
+			})
+		})),
+		rootHref: F,
+		rootType: I,
+		endIconBind: i(() => e(T.value?.endIcon, {}, p({
 			"shrink-0": !0,
-			[S.value.endIcon ?? ""]: !0
+			[E.value.endIcon ?? ""]: !0
 		}))),
-		endSlotBind: r(() => e(x.value?.end, {}, "inline-flex shrink-0 items-center")),
-		rootAriaBusy: k,
-		rootDisabled: O,
-		startIconBind: r(() => e(x.value?.startIcon, {}, d({
+		endSlotBind: i(() => e(T.value?.end, {}, "inline-flex shrink-0 items-center")),
+		rootAriaBusy: N,
+		rootDisabled: M,
+		startIconBind: i(() => e(T.value?.startIcon, {}, p({
 			"shrink-0": !0,
-			[S.value.startIcon ?? ""]: !0
+			[E.value.startIcon ?? ""]: !0
 		}))),
-		startSlotBind: r(() => e(x.value?.start, {}, "inline-flex shrink-0 items-center")),
-		loadingIconBind: r(() => e(x.value?.loading, {}, d({
+		startSlotBind: i(() => e(T.value?.start, {}, "inline-flex shrink-0 items-center")),
+		loadingIconBind: i(() => e(T.value?.loading, {}, p({
 			"shrink-0 animate-spin": !0,
-			[S.value.loading ?? ""]: !0
+			[E.value.loading ?? ""]: !0
 		}))),
-		rootAriaDisabled: A
+		rootAriaDisabled: P
 	};
 }
 //#endregion
-export { h as useButton };
+export { _ as useButton };

package/dist/Components/ButtonGroup/ButtonGroup.js

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

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

@@ -0,0 +1,14 @@
+import { ButtonGroupOwnProps, ButtonGroupSlots } from './buttonGroup.types';
+type __VLS_Slots = ButtonGroupSlots;
+declare const __VLS_base: import('vue').DefineComponent<ButtonGroupOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ButtonGroupOwnProps> & Readonly<{}>, {
+    full: boolean;
+    separator: 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/ButtonGroup/ButtonGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,37 @@
+import { useButtonGroup as e } from "./composables/useButtonGroup.js";
+import { createElementBlock as t, defineComponent as n, guardReactiveProps as r, normalizeProps as i, openBlock as a, renderSlot as o, unref as s } from "vue";
+//#region src/Components/ButtonGroup/ButtonGroup.vue?vue&type=script&setup=true&lang.ts
+var c = /*@__PURE__*/ n({
+	inheritAttrs: !1,
+	__name: "ButtonGroup",
+	props: {
+		classes: {},
+		color: {},
+		customProps: {},
+		density: {},
+		full: {
+			type: Boolean,
+			default: !1
+		},
+		orientation: {},
+		rounded: {},
+		separator: {
+			type: Boolean,
+			default: !0
+		},
+		size: {},
+		variant: {}
+	},
+	setup(n) {
+		let { rootBind: c } = e(n, {
+			full: !1,
+			separator: !0,
+			color: "primary",
+			variant: "solid",
+			orientation: "horizontal"
+		});
+		return (e, n) => (a(), t("div", i(r(s(c))), [o(e.$slots, "default")], 16));
+	}
+});
+//#endregion
+export { c as default };

package/dist/Components/ButtonGroup/buttonGroup.types.d.ts

@@ -0,0 +1,93 @@
+import { HTMLAttributes, Slot } from 'vue';
+import { ButtonColor, ButtonDensity, ButtonGroupOrientation, ButtonRounded, ButtonSize, ButtonVariant } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
+import { ButtonColorOverrides, ButtonDensityOverrides, ButtonRoundedOverrides, ButtonSizeOverrides, ButtonVariantOverrides } from '../Button/button.types';
+export interface ButtonGroupOrientationOverrides {}
+export interface ButtonGroupClasses {
+    /**
+     * Classes merged onto the root.
+     */
+    root?: string;
+}
+export interface ButtonGroupCustomProps {
+    /**
+     * Props forwarded to the root element.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+}
+/**
+ * Groups related action buttons in a joined strip.
+ * Compose with `Button`. Size, color, density, rounded, and variant
+ * cascade to nested buttons unless they override them.
+ */
+export interface ButtonGroupOwnProps {
+    /**
+     * Classes for button group parts.
+     *
+     * @default undefined
+     */
+    classes?: ButtonGroupClasses;
+    /**
+     * Color applied to nested `Button` children when set. The divider follows the button text color.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<ButtonColor, ButtonColorOverrides>;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: ButtonGroupCustomProps;
+    /**
+     * Density applied to nested `Button` children unless they set `density`.
+     *
+     * @default undefined
+     */
+    density?: MergeProps<ButtonDensity, ButtonDensityOverrides>;
+    /**
+     * Stretch the group to the container width.
+     *
+     * @default false
+     */
+    full?: boolean;
+    /**
+     * Layout orientation of the group.
+     *
+     * @default "horizontal"
+     */
+    orientation?: MergeProps<ButtonGroupOrientation, ButtonGroupOrientationOverrides>;
+    /**
+     * Roundness applied to nested `Button` children unless they set `rounded`.
+     *
+     * @default undefined
+     */
+    rounded?: MergeProps<ButtonRounded, ButtonRoundedOverrides>;
+    /**
+     * Draw a full-height divider between adjacent children. The fill matches the button text color.
+     *
+     * @default true
+     */
+    separator?: boolean;
+    /**
+     * Size applied to nested `Button` children unless they set `size`.
+     *
+     * @default undefined
+     */
+    size?: MergeProps<ButtonSize, ButtonSizeOverrides>;
+    /**
+     * Variant applied to nested `Button` children unless they set `variant`.
+     *
+     * @default undefined
+     */
+    variant?: MergeProps<ButtonVariant, ButtonVariantOverrides>;
+}
+export interface ButtonGroupSlots {
+    /**
+     * Grouped controls (`Button`, nested `ButtonGroup`).
+     */
+    default?: Slot<undefined>;
+}
+export type ButtonGroupProps = MergeHtmlProps<ButtonGroupOwnProps, HTMLAttributes>;

package/dist/Components/ButtonGroup/buttonGroupInjectionKey.d.ts

@@ -0,0 +1,7 @@
+import { ComputedRef, InjectionKey } from 'vue';
+import { ButtonGroupOwnProps } from './buttonGroup.types';
+/**
+ * Button appearance cascaded to nested `Button` children.
+ */
+export type ButtonGroupContextValue = Pick<ButtonGroupOwnProps, "size" | "color" | "density" | "rounded" | "variant">;
+export declare const BUTTON_GROUP_INJECTION_KEY: InjectionKey<ComputedRef<ButtonGroupContextValue>>;

package/dist/Components/ButtonGroup/buttonGroupInjectionKey.js

@@ -0,0 +1,4 @@
+//#region src/Components/ButtonGroup/buttonGroupInjectionKey.ts
+var e = Symbol("bridge-button-group");
+//#endregion
+export { e as BUTTON_GROUP_INJECTION_KEY };

package/dist/Components/ButtonGroup/composables/useButtonGroup.d.ts

@@ -0,0 +1,16 @@
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { ButtonGroupOwnProps, ButtonGroupProps } from '../buttonGroup.types';
+type ButtonGroupLibDefaults = LibDefaultsShape<ButtonGroupOwnProps, "full" | "color" | "variant" | "separator" | "orientation">;
+type ButtonGroupMerged = MergeLibDefaults<ButtonGroupOwnProps, ButtonGroupLibDefaults>;
+/**
+ * Builds bind props for a grouped set of action buttons.
+ */
+export declare function useButtonGroup(props: ButtonGroupOwnProps, libDefaults: ButtonGroupLibDefaults): {
+    merged: import('vue').ComputedRef<ButtonGroupMerged>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        role: string;
+        "data-slot": string;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<ButtonGroupProps, "color" | "orientation" | "size" | "classes" | "customProps" | "full" | "rounded" | "variant" | "density" | "separator">>>;
+};
+export {};

package/dist/Components/ButtonGroup/composables/useButtonGroup.js

@@ -0,0 +1,66 @@
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { BUTTON_GROUP_INJECTION_KEY as r } from "../buttonGroupInjectionKey.js";
+import { computed as i, inject as a, provide as o, useAttrs as s } from "vue";
+import { get as c } from "es-toolkit/compat";
+import { buttonGroupOrientationProps as l } from "@bridge-ui/core/Tokens";
+import { cn as u, mergeBridgeUILayeredClasses as d, splitComponentProps as f } from "@bridge-ui/core/Utils";
+//#region src/Components/ButtonGroup/composables/useButtonGroup.ts
+var p = [
+	"full",
+	"size",
+	"color",
+	"classes",
+	"density",
+	"rounded",
+	"variant",
+	"separator",
+	"customProps",
+	"orientation"
+];
+function m(m, h) {
+	let g = s(), _ = a(r, null), v = i(() => f({
+		props: {
+			...g,
+			...m
+		},
+		bridgeKeys: p
+	})), { merged: y, entry: b } = t({
+		libDefaults: h,
+		componentName: "ButtonGroup",
+		props: () => v.value.componentProps
+	}), x = n({
+		entry: b,
+		props: () => v.value.componentProps
+	}), S = i(() => y.value.customProps), C = i(() => {
+		let e = d(l, b.value?.tokens?.orientation);
+		return c(e, y.value.orientation);
+	}), w = i(() => {
+		let e = v.value.componentProps, t = b.value?.defaultProps, n = _?.value;
+		return {
+			size: e.size ?? t?.size ?? n?.size,
+			color: e.color ?? t?.color ?? n?.color,
+			density: e.density ?? t?.density ?? n?.density,
+			rounded: e.rounded ?? t?.rounded ?? n?.rounded,
+			variant: e.variant ?? t?.variant ?? n?.variant
+		};
+	});
+	return o(r, w), {
+		merged: y,
+		rootBind: i(() => {
+			let t = y.value.separator === !0;
+			return e(S.value?.root, v.value.inheritedAttrs, {
+				role: "group",
+				"data-slot": "button-group",
+				class: u({
+					[c(C.value, "root") ?? ""]: !0,
+					[c(C.value, "join") ?? ""]: !t,
+					[c(C.value, "separator") ?? ""]: t,
+					[x.value.root ?? ""]: !0,
+					"w-full [&>*]:flex-1": y.value.full === !0
+				})
+			});
+		})
+	};
+}
+//#endregion
+export { m as useButtonGroup };

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

@@ -0,0 +1,4 @@
+export type { ButtonGroupClasses, ButtonGroupCustomProps, ButtonGroupOrientationOverrides, ButtonGroupOwnProps, ButtonGroupProps, ButtonGroupSlots, } from './buttonGroup.types';
+export { default as ButtonGroup } from './ButtonGroup.vue';
+export { BUTTON_GROUP_INJECTION_KEY, type ButtonGroupContextValue, } from './buttonGroupInjectionKey';
+export { useButtonGroup } from './composables/useButtonGroup';

package/dist/Components/ButtonGroup/index.js

@@ -0,0 +1,4 @@
+import { BUTTON_GROUP_INJECTION_KEY as e } from "./buttonGroupInjectionKey.js";
+import { useButtonGroup as t } from "./composables/useButtonGroup.js";
+import n from "./ButtonGroup.js";
+export { e as BUTTON_GROUP_INJECTION_KEY, n as ButtonGroup, t as useButtonGroup };

package/dist/Components/Calendar/Calendar.vue_vue_type_script_setup_true_lang.js

@@ -74,7 +74,7 @@ var ee = { class: "flex w-full min-w-0 items-center gap-x-2" }, C = {
 				size: "sm",
 				icon: "chevronLeft"
 			}, y(B)), null, 16)], 16),
-			c("button", m(f(y(K))), [...d[1] ||= [c("span", { class: "size-2 rounded-full bg-slate-600 dark:bg-slate-300" }, null, -1)]], 16),
+			c("button", m(f(y(K))), [...d[1] ||= [c("span", { class: "size-2 rounded-full bg-dark-600 dark:bg-dark-300" }, null, -1)]], 16),
 			c("button", m(f(y(G))), [u(y(e), p({
 				size: "sm",
 				icon: "chevronRight"

package/dist/Components/CalendarRange/CalendarRange.vue_vue_type_script_setup_true_lang.js

@@ -74,7 +74,7 @@ var ie = {
 					size: "sm",
 					icon: "chevronLeft"
 				}, v(R)), null, 16)], 16),
-				o("button", p(u(v(G))), [...l[0] ||= [o("span", { class: "size-2 rounded-full bg-slate-600 dark:bg-slate-300" }, null, -1)]], 16),
+				o("button", p(u(v(G))), [...l[0] ||= [o("span", { class: "size-2 rounded-full bg-dark-600 dark:bg-dark-300" }, null, -1)]], 16),
 				o("button", p(u(v(W))), [c(v(e), d({
 					size: "sm",
 					icon: "chevronRight"
@@ -94,7 +94,7 @@ var ie = {
 				size: "sm",
 				icon: "chevronLeft"
 			}, v(R)), null, 16)], 16),
-			o("button", p(u(v(G))), [...l[1] ||= [o("span", { class: "size-2 rounded-full bg-slate-600 dark:bg-slate-300" }, null, -1)]], 16),
+			o("button", p(u(v(G))), [...l[1] ||= [o("span", { class: "size-2 rounded-full bg-dark-600 dark:bg-dark-300" }, null, -1)]], 16),
 			o("button", p(u(v(W))), [c(v(e), d({
 				size: "sm",
 				icon: "chevronRight"

package/dist/Components/Checkbox/composables/useCheckbox.js

@@ -71,7 +71,7 @@ function y(y, b, x) {
 	return {
 		merged: E,
 		iconBind: i(() => e(O.value?.icon, {}, m({
-			"text-white": !0,
+			[j.value?.icon ?? "text-white"]: !0,
 			[k.value.icon ?? ""]: !0
 		}))),
 		inputRef: C,