@bridge-ui/vue 0.1.0 → 0.1.1

package/dist/Components/DateTimeRangePicker/dateTimeRangePicker.types.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, Slot } from 'vue';
 import { DateRangeValue, DisableDatesInput, DisableTimesInput, FieldOverlayFooterSlotProps, StartOfWeek } from '@bridge-ui/core/Domain';
-import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded, TimeColorItem } from '@bridge-ui/core/Tokens';
+import { CalendarColor, CalendarRounded } from '@bridge-ui/core/Tokens';
 import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { ButtonProps } from '../Button/button.types';
 import { CalendarDateDayCell } from '../CalendarDate/calendarDate.types';
@@ -242,12 +242,6 @@ export interface DateTimeRangePickerOwnProps {
      * @default undefined
      */
     timeZone?: string;
-    /**
-     * Token overrides.
-     *
-     * @default undefined
-     */
-    tokens?: DateTimeRangePickerTokens;
     /**
      * Controlled value.
      *
@@ -270,33 +264,4 @@ export interface DateTimeRangePickerSlots {
      */
     footer?: Slot<FieldOverlayFooterSlotProps>;
 }
-export interface DateTimeRangePickerTokens {
-    /**
-     * Nested calendar token overrides.
-     */
-    calendar?: {
-        color?: Record<string, Partial<CalendarColorItem>>;
-        day?: Partial<CalendarDay>;
-        rounded?: Record<string, string>;
-    };
-    /**
-     * Color token map overrides for the calendar (and time when `time` is unset).
-     */
-    color?: Record<string, Partial<CalendarColorItem>>;
-    /**
-     * Day chrome overrides.
-     */
-    day?: Partial<CalendarDay>;
-    /**
-     * Border radius token map overrides.
-     */
-    rounded?: Record<string, string>;
-    /**
-     * Nested time panel token overrides.
-     */
-    time?: {
-        color?: Record<string, Partial<TimeColorItem>>;
-        rounded?: Record<string, string>;
-    };
-}
 export type DateTimeRangePickerProps = MergeHtmlProps<DateTimeRangePickerOwnProps, HTMLAttributes>;

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

@@ -1,3 +1,3 @@
 export { useDateTimeRangePicker } from './composables/useDateTimeRangePicker';
-export type { DateTimeRangePickerClasses, DateTimeRangePickerColorOverrides, DateTimeRangePickerCustomProps, DateTimeRangePickerEmits, DateTimeRangePickerOwnProps, DateTimeRangePickerProps, DateTimeRangePickerRoundedOverrides, DateTimeRangePickerSlots, DateTimeRangePickerTokens, } from './dateTimeRangePicker.types';
+export type { DateTimeRangePickerClasses, DateTimeRangePickerColorOverrides, DateTimeRangePickerCustomProps, DateTimeRangePickerEmits, DateTimeRangePickerOwnProps, DateTimeRangePickerProps, DateTimeRangePickerRoundedOverrides, DateTimeRangePickerSlots, } from './dateTimeRangePicker.types';
 export { default as DateTimeRangePicker } from './DateTimeRangePicker.vue';

package/dist/Components/FieldOverlay/composables/useFieldOverlay.js

@@ -11,21 +11,28 @@ function a(e, t) {
 		class: r(t, n?.class)
 	} } });
 }
-function o(r) {
-	let i = e(), o = t(() => n(r.overlay, i.mobile));
+function o(i) {
+	let o = e(), s = t(() => n(i.overlay, o.mobile));
 	return {
-		menuBind: t(() => ({
-			closeOnClickAway: !0,
-			placement: "bottom-start",
-			...r.customProps?.menu
-		})),
+		menuBind: t(() => {
+			let e = i.customProps?.menu;
+			return {
+				closeOnClickAway: !0,
+				placement: "bottom-start",
+				...e,
+				classes: {
+					...e?.classes,
+					content: r(e?.classes?.content, "overflow-visible rounded-none bg-transparent shadow-none ring-0 dark:bg-transparent")
+				}
+			};
+		}),
 		modalBind: t(() => a({
 			size: "md",
 			scroll: "paper",
 			closeOnOverlay: !0,
 			align: "middle-center",
 			disableRestoreFocus: !0,
-			...r.customProps?.modal
+			...i.customProps?.modal
 		}, "flex w-fit max-w-full sm:max-w-full flex-col items-stretch p-0")),
 		drawerBind: t(() => a({
 			size: "md",
@@ -33,9 +40,9 @@ function o(r) {
 			placement: "bottom",
 			closeOnOverlay: !0,
 			disableRestoreFocus: !0,
-			...r.customProps?.drawer
+			...i.customProps?.drawer
 		}, "flex h-auto max-h-[90dvh] w-full flex-col items-stretch overflow-x-auto p-0")),
-		resolvedOverlay: o
+		resolvedOverlay: s
 	};
 }
 //#endregion

package/dist/Components/FieldOverlay/fieldOverlay.types.d.ts

@@ -38,6 +38,9 @@ export interface FieldOverlayEmits {
  * Renders field picker / listbox content in a `Menu`, `Modal`, or `Drawer`.
  * Visibility is controlled with `v-model`. Shell-specific options go through
  * `customProps.menu` / `.modal` / `.drawer`.
+ *
+ * Menu chrome (fill, radius, shadow, ring) is stripped so the nested picker
+ * or listbox paints the visible surface, matching modal / drawer panels.
  */
 export interface FieldOverlayOwnProps {
     /**

package/dist/Components/FormField/composables/useFormField.d.ts

@@ -7,7 +7,7 @@ export type FormFieldOptions = {
     /**
      * Public registry key that owns FormField chrome defaults/tokens.
      */
-    componentName?: "Select" | "Textarea" | "DateField" | "TextField" | "TimeField" | "NumberField" | "Autocomplete" | "DateTimeField" | "PasswordField" | "DateRangeField" | "TimeRangeField" | "DateTimeRangeField";
+    componentName?: "Select" | "Textarea" | "DateField" | "TextField" | "TimeField" | "ColorField" | "NumberField" | "Autocomplete" | "DateTimeField" | "PasswordField" | "DateRangeField" | "TimeRangeField" | "DateTimeRangeField";
     /**
      * Native control rendered by the field composable (`<input>` vs `<textarea>`).
      *

package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js

@@ -20,7 +20,6 @@ var A = { key: 1 }, j = /*@__PURE__*/ h({
 		anchorEl: {},
 		classes: {},
 		color: { default: "primary" },
-		componentName: {},
 		customProps: {},
 		disableAutoFocus: {
 			type: Boolean,
@@ -83,7 +82,7 @@ var A = { key: 1 }, j = /*@__PURE__*/ h({
 		let P = h, F = e(), I = s(() => P.emptyMessage ?? F("No options")), L = s(() => P.loadingMessage ?? F("Loading...")), { merged: R, checkClass: z, scrollBind: B, footerBind: V, showFooter: H, applyLabel: fe, cancelLabel: pe, messageBind: U, surfaceBind: me, sizeClasses: he, mergedClasses: W, applyButtonProps: ge, optionHoverClass: _e, cancelButtonProps: ve, optionSelectedClass: ye, optionHighlightedClass: be } = ee(P, {
 			size: "md",
 			color: "primary"
-		}, { componentName: P.componentName }), xe = s(() => P.options ?? []), G = s(() => P.entries ? P.entries : le(xe.value)), K = s(() => ue(G.value)), q = s(() => t(j, "default")), J = s(() => !P.loading && !q.value && K.value.length === 0 && P.hideEmptyMessage !== !0), Se = s(() => k(z.value, W.value.check)), Y = C([]);
+		}), xe = s(() => P.options ?? []), G = s(() => P.entries ? P.entries : le(xe.value)), K = s(() => ue(G.value)), q = s(() => t(j, "default")), J = s(() => !P.loading && !q.value && K.value.length === 0 && P.hideEmptyMessage !== !0), Se = s(() => k(z.value, W.value.check)), Y = C([]);
 		function X(e) {
 			return P.isSelected?.(e) ?? !1;
 		}

package/dist/Components/Listbox/composables/useListbox.d.ts

@@ -3,16 +3,7 @@ import { ListboxClasses, ListboxOwnProps } from '../listbox.types';
 export declare const listboxBridgeKeys: readonly ["size", "color", "error", "classes", "maxHeight", "showFooter", "customProps", "disableMaxHeight"];
 type ListboxLibDefaults = LibDefaultsShape<ListboxOwnProps, "size" | "color">;
 type ListboxMerged = MergeLibDefaults<ListboxOwnProps, ListboxLibDefaults>;
-/**
- * Options for {@link useListbox}.
- */
-export type ListboxOptions = {
-    /**
-     * Public registry key that owns nested `tokens.listbox` defaults.
-     */
-    componentName?: "Select" | "Autocomplete";
-};
-export declare function useListbox(props: ListboxOwnProps, libDefaults: ListboxLibDefaults, options?: ListboxOptions): {
+export declare function useListbox(props: ListboxOwnProps, libDefaults: ListboxLibDefaults): {
     merged: import('vue').ComputedRef<ListboxMerged>;
     checkClass: import('vue').ComputedRef<string>;
     scrollBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;

package/dist/Components/Listbox/composables/useListbox.js

@@ -17,78 +17,77 @@ var v = [
 	"customProps",
 	"disableMaxHeight"
 ];
-function y(y, b, x = {}) {
-	let S = s(), C = t(), w = e(), T = o(() => _({
+function y(y, b) {
+	let x = s(), S = t(), C = e(), w = o(() => _({
 		props: {
-			...S,
+			...x,
 			...y
 		},
 		bridgeKeys: v
-	})), { merged: E, entry: D } = r({
+	})), { merged: T, entry: E } = r({
 		libDefaults: b,
-		componentName: x.componentName,
-		props: () => T.value.componentProps
-	}), O = i({
-		entry: D,
-		props: () => T.value.componentProps
-	}), k = o(() => E.value.customProps), A = o(() => u(y.overlay, C.mobile)), j = o(() => l(A.value)), M = o(() => A.value === "drawer"), N = a({
-		overlay: A,
-		componentName: x.componentName,
-		showFooter: () => E.value.showFooter
-	}), P = o(() => c(D.value, ["tokens", "listbox"])), F = o(() => {
-		let e = g(d, P.value?.color);
+		componentName: "Listbox",
+		props: () => w.value.componentProps
+	}), D = i({
+		entry: E,
+		props: () => w.value.componentProps
+	}), O = o(() => T.value.customProps), k = o(() => u(y.overlay, S.mobile)), A = o(() => l(k.value)), j = o(() => k.value === "drawer"), M = a({
+		overlay: k,
+		componentName: "Listbox",
+		showFooter: () => T.value.showFooter
+	}), N = o(() => {
+		let e = g(d, E.value?.tokens?.color);
 		return h({
 			tokens: e,
-			color: E.value.color,
-			invalid: E.value.error
+			color: T.value.color,
+			invalid: T.value.error
 		});
-	}), I = o(() => {
-		let e = g(f, P.value?.rounded);
+	}), P = o(() => {
+		let e = g(f, E.value?.tokens?.rounded);
 		return c(e, y.rounded ?? "md");
-	}), L = o(() => {
-		let e = g(p, P.value?.size), t = c(e, E.value.size ?? "md"), n = j.value ? "panel" : "menu";
+	}), F = o(() => {
+		let e = g(p, E.value?.tokens?.size), t = c(e, T.value.size ?? "md"), n = A.value ? "panel" : "menu";
 		return c(t, n);
-	}), R = o(() => F.value?.selected), z = o(() => F.value?.highlighted), B = o(() => F.value?.hover), V = o(() => m(L.value?.check, F.value?.check)), H = o(() => {
-		let e = E.value.maxHeight ?? (j.value ? "max-h-[min(60dvh,28rem)]" : "max-h-60"), t = E.value.disableMaxHeight === !0;
-		return n(E.value.customProps?.scroll, {}, m({
+	}), I = o(() => N.value?.selected), L = o(() => N.value?.highlighted), R = o(() => N.value?.hover), z = o(() => m(F.value?.check, N.value?.check)), B = o(() => {
+		let e = T.value.maxHeight ?? (A.value ? "max-h-[min(60dvh,28rem)]" : "max-h-60"), t = T.value.disableMaxHeight === !0;
+		return n(T.value.customProps?.scroll, {}, m({
 			"min-h-0 overflow-y-auto overscroll-contain": !t,
 			[e]: !t,
-			[O.value.scroll ?? ""]: !0
+			[D.value.scroll ?? ""]: !0
 		}));
-	}), U = o(() => n({}, {}, m({
+	}), V = o(() => n({}, {}, m({
 		"text-dark-500": !0,
-		[L.value?.message ?? ""]: !0
-	}))), W = o(() => {
-		if (!j.value) return;
-		let e = I.value;
+		[F.value?.message ?? ""]: !0
+	}))), H = o(() => {
+		let e = P.value;
 		if (e) return m({
 			[e]: !0,
-			"rounded-b-none": M.value
+			"rounded-b-none": j.value
 		});
-	}), G = o(() => m({
-		"flex w-full flex-col overflow-hidden bg-white text-dark-900 shadow-lg outline-hidden ring-1 ring-black/5 dark:bg-dark-800 dark:text-dark-100 dark:ring-white/10": j.value,
-		[String(W.value ?? "")]: !!W.value
+	}), U = o(() => m({
+		"flex w-full flex-col overflow-hidden bg-white text-dark-900 shadow-lg outline-hidden ring-1 ring-black/5 dark:bg-dark-800 dark:text-dark-100 dark:ring-white/10": !0,
+		[String(H.value ?? "")]: !!H.value
 	}));
 	return {
-		merged: E,
-		checkClass: V,
-		scrollBind: H,
-		footerBind: o(() => n(k.value?.footer, {}, m({
+		merged: T,
+		checkClass: z,
+		scrollBind: B,
+		footerBind: o(() => n(O.value?.footer, {}, m({
 			"flex items-center justify-end gap-2 border-t border-dark-100 bg-dark-50 px-3 py-2 dark:border-dark-800 dark:bg-dark-950/40": !0,
-			[O.value.footer ?? ""]: !0
+			[D.value.footer ?? ""]: !0
 		}))),
-		showFooter: N,
-		applyLabel: o(() => w("Apply")),
-		cancelLabel: o(() => w("Cancel")),
-		messageBind: U,
-		surfaceBind: G,
-		sizeClasses: L,
-		mergedClasses: O,
-		applyButtonProps: o(() => k.value?.applyButton),
-		optionHoverClass: B,
-		cancelButtonProps: o(() => k.value?.cancelButton),
-		optionSelectedClass: R,
-		optionHighlightedClass: z
+		showFooter: M,
+		applyLabel: o(() => C("Apply")),
+		cancelLabel: o(() => C("Cancel")),
+		messageBind: V,
+		surfaceBind: U,
+		sizeClasses: F,
+		mergedClasses: D,
+		applyButtonProps: o(() => O.value?.applyButton),
+		optionHoverClass: R,
+		cancelButtonProps: o(() => O.value?.cancelButton),
+		optionSelectedClass: I,
+		optionHighlightedClass: L
 	};
 }
 //#endregion

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

@@ -1,5 +1,4 @@
 export { useListbox } from './composables/useListbox';
-export type { ListboxOptions } from './composables/useListbox';
 export { findFirstEnabledOptionIndex, findLastEnabledOptionIndex, getListboxActiveDescendantId, getListboxOptionId, moveListboxHighlight, useListboxNavigation, } from './composables/useListboxNavigation';
 export type { ListboxClasses, ListboxColorOverrides, ListboxCustomProps, ListboxEmits, ListboxEntry, ListboxOption, ListboxOwnProps, ListboxProps, ListboxSlots, ListboxValue, } from './listbox.types';
 export { default as Listbox } from './Listbox.vue';

package/dist/Components/Listbox/listbox.types.d.ts

@@ -157,12 +157,6 @@ export interface ListboxOwnProps {
      * @default "primary"
      */
     color?: MergeProps<ListboxColor, ListboxColorOverrides>;
-    /**
-     * Public parent registry key for nested `tokens.listbox`.
-     *
-     * @internal
-     */
-    componentName?: "Select" | "Autocomplete";
     /**
      * Extra props for internal parts (`list`, `listItem`, `listSection`, `menu`,
      * `modal`, `drawer`, `progress`, `scroll`, `footer`, `applyButton`,

package/dist/Components/Select/composables/useSelect.d.ts

@@ -729,7 +729,6 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         anchorEl?: null | HTMLElement;
         classes?: import('../../Listbox').ListboxClasses;
         color: "info" | "error" | "success" | "warning" | "dark" | "primary" | "secondary";
-        componentName: "Select" | "Autocomplete";
         customProps?: import('../../Listbox').ListboxCustomProps;
         disableAutoFocus: boolean;
         disableMaxHeight: boolean;

package/dist/Components/Select/composables/useSelect.js

@@ -343,7 +343,6 @@ function p(p, m, h, g, Oe) {
 		showFooter: z.value,
 		entries: He.value,
 		options: G.value,
-		componentName: "Select",
 		size: q.merged.value.size,
 		error: q.invalidated.value,
 		color: q.merged.value.color,

package/dist/Components/Step/Step.js

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

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

@@ -0,0 +1,11 @@
+import { StepOwnProps, StepSlots } from './step.types';
+type __VLS_Slots = StepSlots;
+declare const __VLS_base: import('vue').DefineComponent<StepOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<StepOwnProps> & Readonly<{}>, {}, {}, {}, {}, 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/Step/Step.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,32 @@
+import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n } from "../../Utils/slotOrProp.js";
+import r from "../Icon/Icon.js";
+import { useStep as i } from "./composables/useStep.js";
+import { Fragment as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeProps as m, openBlock as h, renderSlot as g, toDisplayString as _, unref as v } from "vue";
+//#region src/Components/Step/Step.vue?vue&type=script&setup=true&lang.ts
+var y = /*@__PURE__*/ d({
+	inheritAttrs: !1,
+	__name: "Step",
+	props: {
+		classes: {},
+		completed: { type: Boolean },
+		customProps: {},
+		description: {},
+		disabled: { type: Boolean },
+		error: { type: Boolean },
+		icon: {},
+		label: {}
+	},
+	setup(d) {
+		let { slots: y, merged: b, rootBind: x, textBind: S, iconBind: C, labelBind: w, stepNumber: T, showContent: E, contentBind: D, triggerBind: O, resolvedIcon: k, indicatorBind: A, connectorBind: j, descriptionBind: M } = i(d);
+		return (i, d) => (h(), c("li", m(f(v(x))), [
+			l("div", m(f(v(j))), null, 16),
+			l("button", m(f(v(O))), [l("span", m(f(v(A))), [v(e)(v(y), "icon") ? g(i.$slots, "icon", {}, void 0, void 0, 0) : v(k) ? (h(), o(v(r), p({
+				key: 1,
+				icon: v(k)
+			}, v(C)), null, 16, ["icon"])) : (h(), c(a, { key: 2 }, [u(_(v(T)), 1)], 64))], 16), v(t)(v(y), "label", v(b).label) || v(t)(v(y), "description", v(b).description) ? (h(), c("span", m(p({ key: 0 }, v(S))), [v(t)(v(y), "label", v(b).label) ? (h(), c("span", m(p({ key: 0 }, v(w))), [v(e)(v(y), "label") ? g(i.$slots, "label", {}, void 0, void 0, 0) : v(n)(v(b).label) ? (h(), c(a, { key: 1 }, [u(_(v(b).label), 1)], 64)) : s("", !0)], 16)) : s("", !0), v(t)(v(y), "description", v(b).description) ? (h(), c("span", m(p({ key: 1 }, v(M))), [v(e)(v(y), "description") ? g(i.$slots, "description", {}, void 0, void 0, 0) : v(n)(v(b).description) ? (h(), c(a, { key: 1 }, [u(_(v(b).description), 1)], 64)) : s("", !0)], 16)) : s("", !0)], 16)) : s("", !0)], 16),
+			v(E) ? (h(), c("div", m(p({ key: 0 }, v(D))), [g(i.$slots, "default")], 16)) : s("", !0)
+		], 16));
+	}
+});
+//#endregion
+export { y as default };

package/dist/Components/Step/composables/useStep.d.ts

@@ -0,0 +1,56 @@
+import { IconSize } from '@bridge-ui/core/Tokens';
+import { StepOwnProps, StepProps } from '../step.types';
+export declare function useStep(props: StepOwnProps): {
+    slots: Readonly<{
+        [name: string]: import('vue').Slot<any> | undefined;
+    }>;
+    index: import('vue').ComputedRef<number>;
+    status: import('vue').ComputedRef<import('@bridge-ui/core/Domain').StepperStepStatus>;
+    merged: import('vue').ComputedRef<StepOwnProps>;
+    isError: import('vue').ComputedRef<boolean>;
+    iconSize: import('vue').ComputedRef<keyof IconSize>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<StepProps, "error" | "icon" | "classes" | "customProps" | "label" | "disabled" | "description" | "completed">>>;
+    textBind: import('vue').ComputedRef<{
+        class: string;
+    }>;
+    iconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        size: keyof IconSize;
+        class: string;
+    }, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    clickable: import('vue').ComputedRef<boolean>;
+    labelBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    stepNumber: import('vue').ComputedRef<string>;
+    isVertical: import('vue').ComputedRef<boolean>;
+    showContent: import('vue').ComputedRef<boolean>;
+    isCompleted: import('vue').ComputedRef<boolean>;
+    contentBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        role: string;
+        id: string;
+        "aria-labelledby": string;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    triggerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        id: string;
+        type: "button";
+        disabled: true | undefined;
+        tabindex: number | undefined;
+        "aria-invalid": boolean | undefined;
+        onClick: ((event: MouseEvent) => void) | undefined;
+        onKeydown: ((event: KeyboardEvent) => void) | undefined;
+        "aria-current": "step" | undefined;
+        "aria-controls": string | undefined;
+        class: string;
+    }, "class", import('vue').ButtonHTMLAttributes | undefined, {}>>;
+    resolvedIcon: import('vue').ComputedRef<import('../../..').IconSource | undefined>;
+    indicatorBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    connectorBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        "aria-hidden": boolean;
+        "data-part": string;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+};

package/dist/Components/Step/composables/useStep.js

@@ -0,0 +1,162 @@
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { STEPPER_INJECTION_KEY as r } from "../../Stepper/stepperInjectionKey.js";
+import { computed as i, inject as a, onBeforeUnmount as o, useAttrs as s, useId as c, useSlots as l, watchEffect as u } from "vue";
+import { get as d } from "es-toolkit/compat";
+import { formatStepperStepNumber as f, getStepperStepContentId as p, getStepperStepId as m, isStepperStepClickable as h, resolveStepperStepStatus as g } from "@bridge-ui/core/Domain";
+import { stepperChromeProps as _ } from "@bridge-ui/core/Tokens";
+import { cn as v, splitComponentProps as y } from "@bridge-ui/core/Utils";
+//#region src/Components/Step/composables/useStep.ts
+var b = [
+	"icon",
+	"error",
+	"label",
+	"classes",
+	"disabled",
+	"completed",
+	"customProps",
+	"description"
+];
+function x(x) {
+	let S = s(), C = l(), w = c(), T = a(r, null);
+	if (!T) throw Error("Step must be used within a Stepper provider");
+	let E = T, D = null;
+	D = E.value.registerStep(w), o(() => {
+		D?.(), D = null;
+	});
+	let O = i(() => y({
+		bridgeKeys: b,
+		props: {
+			...S,
+			...x
+		}
+	})), { merged: k, entry: A } = t({
+		componentName: "Step",
+		props: () => O.value.componentProps
+	}), j = i(() => E.value.getIndex(w)), M = i(() => k.value.disabled === !0), N = i(() => g({
+		index: j.value,
+		error: k.value.error,
+		completed: k.value.completed,
+		activeStep: E.value.activeStep
+	})), P = i(() => h({
+		index: j.value,
+		disabled: M.value,
+		completed: k.value.completed,
+		linear: E.value.linear,
+		activeStep: E.value.activeStep
+	}));
+	u(() => {
+		j.value < 0 || E.value.registerStepMeta(j.value, {
+			disabled: M.value,
+			clickable: P.value
+		});
+	});
+	let F = i(() => N.value === "error" ? E.value.errorColorItem : E.value.colorItem), I = i(() => N.value === "active"), L = i(() => N.value === "completed"), R = i(() => N.value === "upcoming"), z = i(() => N.value === "error"), B = i(() => I.value || z.value), V = i(() => E.value.orientation === "vertical"), H = i(() => V.value && I.value), U = i(() => m(E.value.id, j.value)), W = i(() => p(E.value.id, j.value)), G = i(() => f(Math.max(j.value, 0))), K = i(() => d(E.value.sizeItem, "icon") ?? "md"), q = i(() => {
+		if (k.value.icon) return k.value.icon;
+		if (L.value) return "check";
+		if (z.value) return "clear";
+	}), J = n({
+		entry: A,
+		props: () => O.value.componentProps
+	});
+	function Y(e) {
+		P.value && (E.value.selectStep(j.value), (k.value.customProps?.trigger)?.onClick?.(e));
+	}
+	function X(e) {
+		let t = E.value;
+		(e.key === "ArrowDown" || e.key === "ArrowRight") && (e.preventDefault(), t.focusStep(t.getAdjacentIndex(j.value, 1))), (e.key === "ArrowUp" || e.key === "ArrowLeft") && (e.preventDefault(), t.focusStep(t.getAdjacentIndex(j.value, -1))), e.key === "Home" && (e.preventDefault(), t.focusStep(t.getAdjacentIndex(-1, 1))), e.key === "End" && (e.preventDefault(), t.focusStep(t.getAdjacentIndex(0, -1))), (k.value.customProps?.trigger)?.onKeydown?.(e);
+	}
+	let Z = i(() => e(k.value.customProps?.root, O.value.inheritedAttrs, { class: v({
+		[_.item]: !0,
+		[d(E.value.orientationItem, "item") ?? ""]: !0,
+		[d(J.value, "root") ?? ""]: !0
+	}) })), Q = i(() => e(k.value.customProps?.connector, {}, {
+		"aria-hidden": !0,
+		"data-part": "connector",
+		class: v({
+			[_.connector]: !0,
+			[d(E.value.orientationItem, "connector") ?? ""]: !0,
+			[d(E.value.sizeItem, "connector") ?? ""]: E.value.orientation !== "vertical",
+			[d(F.value, "connector") ?? ""]: L.value,
+			[d(J.value, "connector") ?? ""]: !0
+		})
+	})), $ = i(() => e(k.value.customProps?.trigger, {}, {
+		id: U.value,
+		type: "button",
+		disabled: M.value || void 0,
+		tabindex: P.value ? void 0 : -1,
+		"aria-invalid": z.value ? !0 : void 0,
+		onClick: P.value ? Y : void 0,
+		onKeydown: P.value ? X : void 0,
+		"aria-current": I.value ? "step" : void 0,
+		"aria-controls": H.value ? W.value : void 0,
+		class: v({
+			[_.trigger]: !0,
+			[d(E.value.orientationItem, "trigger") ?? ""]: !0,
+			"cursor-pointer": P.value && !M.value,
+			"cursor-default": !P.value,
+			"pointer-events-none opacity-50": M.value,
+			[d(J.value, "trigger") ?? ""]: !0
+		})
+	})), ee = i(() => e(k.value.customProps?.indicator, {}, { class: v({
+		[d(E.value.sizeItem, "indicator") ?? ""]: !0,
+		[_.indicator]: !0,
+		[_.upcoming]: R.value,
+		[d(F.value, "indicator") ?? ""]: B.value,
+		[d(F.value, "completed") ?? ""]: L.value,
+		[d(F.value, "completedHover") ?? ""]: L.value && P.value,
+		[d(J.value, "indicator") ?? ""]: !0
+	}) })), te = i(() => e(k.value.customProps?.icon, {}, {
+		size: K.value,
+		class: v({
+			"size-5 shrink-0": !0,
+			[d(J.value, "icon") ?? ""]: !0
+		})
+	})), ne = i(() => ({ class: v({
+		"flex min-w-0 flex-col": !0,
+		"ml-4": V.value
+	}) })), re = i(() => e(k.value.customProps?.label, {}, v({
+		[d(E.value.sizeItem, "label") ?? ""]: !0,
+		[_.label]: !0,
+		[_.labelCompleted]: L.value,
+		[d(F.value, "label") ?? ""]: B.value,
+		[d(J.value, "label") ?? ""]: !0
+	}))), ie = i(() => e(k.value.customProps?.description, {}, v({
+		[d(E.value.sizeItem, "description") ?? ""]: !0,
+		[_.description]: !0,
+		[d(J.value, "description") ?? ""]: !0
+	})));
+	return {
+		slots: C,
+		index: j,
+		status: N,
+		merged: k,
+		isError: z,
+		iconSize: K,
+		rootBind: Z,
+		textBind: ne,
+		iconBind: te,
+		clickable: P,
+		labelBind: re,
+		stepNumber: G,
+		isVertical: V,
+		showContent: H,
+		isCompleted: L,
+		contentBind: i(() => e(k.value.customProps?.content, {}, {
+			role: "region",
+			id: W.value,
+			"aria-labelledby": U.value,
+			class: v({
+				[d(E.value.sizeItem, "content") ?? ""]: !0,
+				[d(E.value.orientationItem, "content") ?? ""]: !0,
+				[d(J.value, "content") ?? ""]: !0
+			})
+		})),
+		triggerBind: $,
+		resolvedIcon: q,
+		indicatorBind: ee,
+		connectorBind: Q,
+		descriptionBind: ie
+	};
+}
+//#endregion
+export { x as useStep };

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

@@ -0,0 +1,3 @@
+export { useStep } from './composables/useStep';
+export type { StepClasses, StepCustomProps, StepOwnProps, StepProps, StepSlots, } from './step.types';
+export { default as Step } from './Step.vue';

package/dist/Components/Step/index.js

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