@bridge-ui/vue 0.3.0 → 0.4.0

package/dist/Components/DataTable/composables/useDataTableColumnsMenu.d.ts

@@ -0,0 +1,27 @@
+import { FieldOverlayMode } from '@bridge-ui/core/Domain';
+import { DataTableVisibilityItem } from './useDataTable';
+/**
+ * Column visibility overlay state: draft when the footer is shown, live
+ * otherwise.
+ */
+export declare function useDataTableColumnsMenu(props: {
+    items: DataTableVisibilityItem[];
+    overlay?: FieldOverlayMode;
+    showFooter?: boolean;
+}, onChange: (hiddenIds: string[]) => void): {
+    show: import('vue').Ref<boolean, boolean>;
+    onApply: () => void;
+    onReset: () => void;
+    isHidden: (item: DataTableVisibilityItem) => boolean;
+    triggerRef: import('vue').Ref<HTMLSpanElement | null, HTMLSpanElement | null>;
+    controlSize: import('vue').ComputedRef<"md" | "sm">;
+    onToggleItem: (item: DataTableVisibilityItem) => void;
+    onToggleShow: () => void;
+    overlayCustomProps: import('vue').ComputedRef<{
+        menu: {
+            anchorEl: HTMLSpanElement | null;
+            placement: "bottom";
+        };
+    }>;
+    showFooter: import('vue').ComputedRef<boolean>;
+};

package/dist/Components/DataTable/composables/useDataTableColumnsMenu.js

@@ -0,0 +1,54 @@
+import { useBreakpoint as e } from "../../../Utils/useBreakpoint.js";
+import { computed as t, ref as n, watch as r } from "vue";
+import { getDataTableHiddenColumnIds as i, getDataTableResetHiddenColumnIds as a, getFieldOverlayControlSize as o, resolveFieldOverlay as s, resolveFieldShowFooter as c, toggleDataTableColumnVisibility as l } from "@bridge-ui/core/Domain";
+//#region src/Components/DataTable/composables/useDataTableColumnsMenu.ts
+function u(u, d) {
+	let f = n(!1), p = e(), m = n([]), h = n(null), g = t(() => s(u.overlay, p.mobile)), _ = t(() => c(u.showFooter, g.value)), v = t(() => o(g.value)), y = t(() => ({ menu: {
+		anchorEl: h.value,
+		placement: "bottom"
+	} }));
+	r(f, (e) => {
+		e && b();
+	}, { flush: "sync" });
+	function b() {
+		m.value = i(u.items);
+	}
+	function x() {
+		return _.value ? m.value : i(u.items);
+	}
+	function S(e) {
+		return x().includes(e.id);
+	}
+	function C() {
+		f.value = !f.value;
+	}
+	function w(e) {
+		if (!e.hideable) return;
+		let t = l(x(), e.id, !S(e), u.items.map((e) => e.id));
+		if (_.value) {
+			m.value = t;
+			return;
+		}
+		d(t);
+	}
+	function T() {
+		m.value = a(u.items);
+	}
+	function E() {
+		d(m.value), f.value = !1;
+	}
+	return {
+		show: f,
+		onApply: E,
+		onReset: T,
+		isHidden: S,
+		triggerRef: h,
+		controlSize: v,
+		onToggleItem: w,
+		onToggleShow: C,
+		overlayCustomProps: y,
+		showFooter: _
+	};
+}
+//#endregion
+export { u as useDataTableColumnsMenu };

package/dist/Components/DataTable/dataTable.types.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, Slot, VNodeChild } from 'vue';
-import { DataTableColumnBase, DataTableColumnSearch, DataTableFilterOption, DataTableFilters, DataTableItemSlotProps, DataTableLoadingVariant, DataTablePaginationSlotProps, DataTablePerPageSlotProps, DataTableSelectionMode, DataTableSorting, DataTableStickyEdge, DataTableStickyHeader } from '@bridge-ui/core/Domain';
+import { DataTableColumnBase, DataTableColumnClasses, DataTableColumnSearch, DataTableFilterOption, DataTableFilters, DataTableItemSlotProps, DataTableLoadingVariant, DataTablePaginationSlotProps, DataTablePerPageSlotProps, DataTableSelectionMode, DataTableSorting, DataTableStickyEdge, DataTableStickyHeader, FieldOverlayMode } from '@bridge-ui/core/Domain';
 import { TableAlign, TableRounded, TableSize, TableVariant } from '@bridge-ui/core/Tokens';
 import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { CheckboxProps } from '../Checkbox/checkbox.types';
@@ -9,7 +9,7 @@ import { RadioProps } from '../Radio/radio.types';
 import { SelectOwnProps } from '../Select/select.types';
 import { TableAlignOverrides, TableRoundedOverrides, TableSizeOverrides, TableVariantOverrides } from '../Table/table.types';
 import { TextFieldOwnProps } from '../TextField/textField.types';
-export type { DataTableColumnBase, DataTableColumnSearch, DataTableFilterOption, DataTableFilters, DataTableItemSlotProps, DataTableLoadingVariant, DataTablePaginationSlotProps, DataTablePerPageSlotProps, DataTableSelectionMode, DataTableSorting, DataTableStickyEdge, DataTableStickyHeader, };
+export type { DataTableColumnBase, DataTableColumnClasses, DataTableColumnSearch, DataTableFilterOption, DataTableFilters, DataTableItemSlotProps, DataTableLoadingVariant, DataTablePaginationSlotProps, DataTablePerPageSlotProps, DataTableSelectionMode, DataTableSorting, DataTableStickyEdge, DataTableStickyHeader, };
 /**
  * Column definition with Vue renderers.
  */
@@ -270,6 +270,21 @@ export interface DataTableOwnProps<T> {
      * @default undefined
      */
     columnSearch?: DataTableColumnSearch;
+    /**
+     * Overlay shell for the column visibility panel. `auto` uses `menu` on
+     * desktop and `drawer` on mobile.
+     *
+     * @default "auto"
+     */
+    columnsOverlay?: FieldOverlayMode;
+    /**
+     * Shows Reset / OK on the column visibility overlay. Unset defaults to
+     * `true` for `modal` / `drawer` shells (`false` for `menu`). Selection
+     * stays draft until OK.
+     *
+     * @default undefined
+     */
+    columnsShowFooter?: boolean;
     /**
      * Extra props for internal parts (`table`, `wrapper`, checkboxes, …).
      *
@@ -282,6 +297,13 @@ export interface DataTableOwnProps<T> {
      * @default undefined
      */
     expanded?: string[];
+    /**
+     * Overlay shell for column filter panels. `auto` uses `menu` on desktop
+     * and `drawer` on mobile.
+     *
+     * @default "auto"
+     */
+    filterOverlay?: FieldOverlayMode;
     /**
      * Controlled column filters: column id → selected option values.
      *
@@ -289,7 +311,8 @@ export interface DataTableOwnProps<T> {
      */
     filters?: DataTableFilters;
     /**
-     * Stretch the table to at least the wrapper width.
+     * Stretch the table to at least the wrapper width. When `false`, the
+     * wrapper hugs column content, and pagination / per-page follow that width.
      *
      * @default true
      */
@@ -337,12 +360,6 @@ export interface DataTableOwnProps<T> {
      * @default undefined
      */
     pageCount?: number;
-    /**
-     * Alignment of the built-in Pagination region.
-     *
-     * @default "end"
-     */
-    paginationAlign?: MergeProps<TableAlign, TableAlignOverrides>;
     /**
      * Page size. With `page` and no `pageCount`/`totalCount`, slices `rows`
      * locally. With server paging, only drives the per-page Select.

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

@@ -1,3 +1,3 @@
 export { useDataTable } from './composables/useDataTable';
-export type { DataTableClasses, DataTableColumn, DataTableColumnBase, DataTableColumnSearch, DataTableCustomProps, DataTableEmits, DataTableFilterOption, DataTableFilters, DataTableItemSlotProps, DataTableLoadingVariant, DataTableOwnProps, DataTablePaginationSlotProps, DataTablePerPageSlotProps, DataTableProps, DataTableSelectionMode, DataTableSlots, DataTableSorting, DataTableStickyEdge, DataTableStickyHeader, } from './dataTable.types';
+export type { DataTableClasses, DataTableColumn, DataTableColumnBase, DataTableColumnClasses, DataTableColumnSearch, DataTableCustomProps, DataTableEmits, DataTableFilterOption, DataTableFilters, DataTableItemSlotProps, DataTableLoadingVariant, DataTableOwnProps, DataTablePaginationSlotProps, DataTablePerPageSlotProps, DataTableProps, DataTableSelectionMode, DataTableSlots, DataTableSorting, DataTableStickyEdge, DataTableStickyHeader, } from './dataTable.types';
 export { default as DataTable } from './DataTable.vue';

package/dist/Components/DateField/DateField.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,15 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { presentSlotNames as t } from "../../Utils/slotOrProp.js";
-import n from "../Icon/Icon.js";
-import { FORM_FIELD_CHROME_SLOT_NAMES as r } from "../FormField/formField.types.js";
-import i from "../FormField/FormField.js";
-import a from "../FieldOverlay/FieldOverlay.js";
-import { useDateField as o } from "./composables/useDateField.js";
-import s from "../DatePicker/DatePicker.js";
-import { Fragment as c, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
-import { isUndefined as M } from "es-toolkit/compat";
+import { useOptionalModel as n } from "../../Utils/useOptionalModel.js";
+import r from "../Icon/Icon.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as i } from "../FormField/formField.types.js";
+import a from "../FormField/FormField.js";
+import o from "../FieldOverlay/FieldOverlay.js";
+import { useDateField as s } from "./composables/useDateField.js";
+import c from "../DatePicker/DatePicker.js";
+import { Fragment as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
 //#region src/Components/DateField/DateField.vue?vue&type=script&setup=true&lang.ts
-var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"], F = /*@__PURE__*/ g({
+var M = { class: "flex min-w-0 flex-1 items-center gap-1" }, N = ["aria-label"], P = /*@__PURE__*/ g({
 	inheritAttrs: !1,
 	__name: "DateField",
 	props: /*@__PURE__*/ v({
@@ -81,58 +81,53 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		"open"
 	], ["update:modelValue"]),
 	setup(g, { emit: v }) {
-		let F = O(g, "modelValue"), I = g, L = v, R = e(), z = C(I.defaultValue ?? null), B = l({
-			set: (e) => {
-				F.value = e, z.value = e;
-			},
-			get: () => M(F.value) ? z.value : F.value
-		}), { open: V, fill: ee, overlay: H, dateOnly: U, formField: W, inputBind: G, clearBind: K, clearValue: q, modelValue: J, showFooter: Y, pickerClass: X, clearIconSize: Z, showClearIcon: Q, handleOpenChange: $, handlePickerChange: te, handlePickerCancel: ne, overlayCustomProps: re, datePickerCustomProps: ie } = o(I, B, L);
-		return (e, o) => (S(), d(c, null, [h(D(i), { field: D(W) }, p({
-			default: k(() => [f("div", N, [f("input", x(_(D(G))), null, 16), D(Q) ? (S(), d("span", y({ key: 0 }, D(K), {
-				onClick: o[0] ||= (...e) => D(q) && D(q)(...e),
-				"aria-label": D(R)("Clear"),
-				onKeydown: [o[1] ||= A(j((...e) => D(q) && D(q)(...e), ["prevent"]), ["enter"]), o[2] ||= A(j((...e) => D(q) && D(q)(...e), ["prevent"]), ["space"])]
-			}), [h(D(n), y({
+		let P = v, F = e(), I = O(g, "modelValue"), L = g, R = C(L.defaultValue ?? null), z = n(I, R), { open: ee, fill: B, overlay: V, dateOnly: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, pickerClass: Y, clearIconSize: X, showClearIcon: Z, handleOpenChange: Q, handlePickerChange: $, handlePickerCancel: te, overlayCustomProps: ne, datePickerCustomProps: re } = s(L, z, P);
+		return (e, n) => (S(), d(l, null, [h(D(a), { field: D(U) }, p({
+			default: k(() => [f("div", M, [f("input", x(_(D(W))), null, 16), D(Z) ? (S(), d("span", y({ key: 0 }, D(G), {
+				onClick: n[0] ||= (...e) => D(K) && D(K)(...e),
+				"aria-label": D(F)("Clear"),
+				onKeydown: [n[1] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["enter"]), n[2] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["space"])]
+			}), [h(D(r), y({
 				icon: "clear",
-				size: D(Z)
-			}, I.customProps?.clearIcon), null, 16, ["size"])], 16, P)) : u("", !0)])]),
+				size: D(X)
+			}, L.customProps?.clearIcon), null, 16, ["size"])], 16, N)) : u("", !0)])]),
 			_: 2
-		}, [w(D(t)(D(r), e.$slots), (t) => ({
+		}, [w(D(t)(D(i), e.$slots), (t) => ({
 			name: t,
 			fn: k((n) => [T(e.$slots, t, x(_(n || {})))])
-		}))]), 1032, ["field"]), h(D(a), {
-			overlay: D(H),
-			"model-value": D(V),
-			"custom-props": D(re),
-			"onUpdate:modelValue": D($)
+		}))]), 1032, ["field"]), h(D(o), {
+			overlay: D(V),
+			"model-value": D(ee),
+			"custom-props": D(ne),
+			"onUpdate:modelValue": D(Q)
 		}, {
-			default: k(() => [h(D(s), {
-				fill: D(ee),
-				value: D(J),
-				class: b(D(X)),
-				range: D(U).range,
-				"show-footer": D(Y),
-				"read-only": I.readonly,
-				"max-date": D(U).maxDate,
-				"min-date": D(U).minDate,
-				multiple: D(U).multiple,
-				"time-zone": D(U).timeZone,
-				"hide-years": D(U).hideYears,
-				onChange: D(te),
-				onCancel: D(ne),
-				"hide-months": D(U).hideMonths,
-				"default-view": D(U).defaultView,
-				error: D(W).invalidated.value,
-				color: D(W).merged.value.color,
-				"start-of-week": D(U).startOfWeek,
-				"custom-props": D(ie),
-				disabled: D(W).isDisabled.value,
-				"disable-dates": D(U).disableDates,
-				"hide-weekdays": D(U).hideWeekdays,
-				"disable-years": D(U).disableYears,
-				"disable-months": D(U).disableMonths,
-				rounded: D(W).merged.value.rounded,
-				"hide-outside-days": D(U).hideOutsideDays
+			default: k(() => [h(D(c), {
+				fill: D(B),
+				value: D(q),
+				class: b(D(Y)),
+				range: D(H).range,
+				"show-footer": D(J),
+				"read-only": L.readonly,
+				"max-date": D(H).maxDate,
+				"min-date": D(H).minDate,
+				multiple: D(H).multiple,
+				"time-zone": D(H).timeZone,
+				"hide-years": D(H).hideYears,
+				onChange: D($),
+				onCancel: D(te),
+				"hide-months": D(H).hideMonths,
+				"default-view": D(H).defaultView,
+				error: D(U).invalidated.value,
+				color: D(U).merged.value.color,
+				"start-of-week": D(H).startOfWeek,
+				"custom-props": D(re),
+				disabled: D(U).isDisabled.value,
+				"disable-dates": D(H).disableDates,
+				"hide-weekdays": D(H).hideWeekdays,
+				"disable-years": D(H).disableYears,
+				"disable-months": D(H).disableMonths,
+				rounded: D(U).merged.value.rounded,
+				"hide-outside-days": D(H).hideOutsideDays
 			}, p({
 				day: k((t) => [T(e.$slots, "day", x(_(t)), () => [m(E(t.label), 1)])]),
 				_: 2
@@ -151,4 +146,4 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 	}
 });
 //#endregion
-export { F as default };
+export { P as default };

package/dist/Components/DateField/composables/useDateField.d.ts

@@ -449,6 +449,7 @@ export declare function useDateField(props: DateFieldOwnProps, model: Ref<null |
         endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         invalidated: import('vue').ComputedRef<boolean>;
         containerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            "data-bridge-variant": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>;
             "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
         }>>;
         startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;

package/dist/Components/DateRangeField/DateRangeField.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,15 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { presentSlotNames as t } from "../../Utils/slotOrProp.js";
-import n from "../Icon/Icon.js";
-import { FORM_FIELD_CHROME_SLOT_NAMES as r } from "../FormField/formField.types.js";
-import i from "../FormField/FormField.js";
-import a from "../FieldOverlay/FieldOverlay.js";
-import { useDateRangeField as o } from "./composables/useDateRangeField.js";
-import s from "../DateRangePicker/DateRangePicker.js";
-import { Fragment as c, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
-import { isUndefined as M } from "es-toolkit/compat";
+import { useOptionalModel as n } from "../../Utils/useOptionalModel.js";
+import r from "../Icon/Icon.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as i } from "../FormField/formField.types.js";
+import a from "../FormField/FormField.js";
+import o from "../FieldOverlay/FieldOverlay.js";
+import { useDateRangeField as s } from "./composables/useDateRangeField.js";
+import c from "../DateRangePicker/DateRangePicker.js";
+import { Fragment as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
 //#region src/Components/DateRangeField/DateRangeField.vue?vue&type=script&setup=true&lang.ts
-var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"], F = /*@__PURE__*/ g({
+var M = { class: "flex min-w-0 flex-1 items-center gap-1" }, N = ["aria-label"], P = /*@__PURE__*/ g({
 	inheritAttrs: !1,
 	__name: "DateRangeField",
 	props: /*@__PURE__*/ v({
@@ -79,56 +79,51 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		"open"
 	], ["update:modelValue"]),
 	setup(g, { emit: v }) {
-		let F = O(g, "modelValue"), I = g, L = v, R = e(), z = C(I.defaultValue ?? null), B = l({
-			set: (e) => {
-				F.value = e, z.value = e;
-			},
-			get: () => M(F.value) ? z.value : F.value
-		}), { open: V, fill: ee, overlay: H, dateOnly: U, formField: W, inputBind: G, clearBind: K, clearValue: q, modelValue: J, showFooter: Y, orientation: X, pickerClass: Z, clearIconSize: Q, showClearIcon: $, handleOpenChange: te, handlePickerChange: ne, handlePickerCancel: re, overlayCustomProps: ie, dateRangePickerCustomProps: ae } = o(I, B, L);
-		return (e, o) => (S(), d(c, null, [h(D(i), { field: D(W) }, p({
-			default: k(() => [f("div", N, [f("input", x(_(D(G))), null, 16), D($) ? (S(), d("span", y({ key: 0 }, D(K), {
-				onClick: o[0] ||= (...e) => D(q) && D(q)(...e),
-				"aria-label": D(R)("Clear"),
-				onKeydown: [o[1] ||= A(j((...e) => D(q) && D(q)(...e), ["prevent"]), ["enter"]), o[2] ||= A(j((...e) => D(q) && D(q)(...e), ["prevent"]), ["space"])]
-			}), [h(D(n), y({
+		let P = e(), F = v, I = O(g, "modelValue"), L = g, R = C(L.defaultValue ?? null), z = n(I, R), { open: ee, fill: B, overlay: V, dateOnly: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, orientation: Y, pickerClass: X, clearIconSize: Z, showClearIcon: Q, handleOpenChange: $, handlePickerChange: te, handlePickerCancel: ne, overlayCustomProps: re, dateRangePickerCustomProps: ie } = s(L, z, F);
+		return (e, n) => (S(), d(l, null, [h(D(a), { field: D(U) }, p({
+			default: k(() => [f("div", M, [f("input", x(_(D(W))), null, 16), D(Q) ? (S(), d("span", y({ key: 0 }, D(G), {
+				onClick: n[0] ||= (...e) => D(K) && D(K)(...e),
+				"aria-label": D(P)("Clear"),
+				onKeydown: [n[1] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["enter"]), n[2] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["space"])]
+			}), [h(D(r), y({
 				icon: "clear",
-				size: D(Q)
-			}, I.customProps?.clearIcon), null, 16, ["size"])], 16, P)) : u("", !0)])]),
+				size: D(Z)
+			}, L.customProps?.clearIcon), null, 16, ["size"])], 16, N)) : u("", !0)])]),
 			_: 2
-		}, [w(D(t)(D(r), e.$slots), (t) => ({
+		}, [w(D(t)(D(i), e.$slots), (t) => ({
 			name: t,
 			fn: k((n) => [T(e.$slots, t, x(_(n || {})))])
-		}))]), 1032, ["field"]), h(D(a), {
-			overlay: D(H),
-			"model-value": D(V),
-			"custom-props": D(ie),
-			"onUpdate:modelValue": D(te)
+		}))]), 1032, ["field"]), h(D(o), {
+			overlay: D(V),
+			"model-value": D(ee),
+			"custom-props": D(re),
+			"onUpdate:modelValue": D($)
 		}, {
-			default: k(() => [h(s, {
-				fill: D(ee),
-				value: D(J),
-				class: b(D(Z)),
-				"show-footer": D(Y),
-				orientation: D(X),
-				"read-only": I.readonly,
-				"max-date": D(U).maxDate,
-				"min-date": D(U).minDate,
-				"time-zone": D(U).timeZone,
-				onChange: D(ne),
-				onCancel: D(re),
-				"hide-years": D(U).hideYears,
-				"hide-months": D(U).hideMonths,
-				error: D(W).invalidated.value,
-				color: D(W).merged.value.color,
-				"start-of-week": D(U).startOfWeek,
-				disabled: D(W).isDisabled.value,
-				"disable-dates": D(U).disableDates,
-				"hide-weekdays": D(U).hideWeekdays,
-				"disable-years": D(U).disableYears,
-				"disable-months": D(U).disableMonths,
-				rounded: D(W).merged.value.rounded,
-				"custom-props": D(ae),
-				"hide-outside-days": D(U).hideOutsideDays
+			default: k(() => [h(c, {
+				fill: D(B),
+				value: D(q),
+				class: b(D(X)),
+				"show-footer": D(J),
+				orientation: D(Y),
+				"read-only": L.readonly,
+				"max-date": D(H).maxDate,
+				"min-date": D(H).minDate,
+				"time-zone": D(H).timeZone,
+				onChange: D(te),
+				onCancel: D(ne),
+				"hide-years": D(H).hideYears,
+				"hide-months": D(H).hideMonths,
+				error: D(U).invalidated.value,
+				color: D(U).merged.value.color,
+				"start-of-week": D(H).startOfWeek,
+				disabled: D(U).isDisabled.value,
+				"disable-dates": D(H).disableDates,
+				"hide-weekdays": D(H).hideWeekdays,
+				"disable-years": D(H).disableYears,
+				"disable-months": D(H).disableMonths,
+				rounded: D(U).merged.value.rounded,
+				"custom-props": D(ie),
+				"hide-outside-days": D(H).hideOutsideDays
 			}, p({
 				day: k((t) => [T(e.$slots, "day", x(_(t)), () => [m(E(t.label), 1)])]),
 				_: 2
@@ -172,4 +167,4 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 	}
 });
 //#endregion
-export { F as default };
+export { P as default };

package/dist/Components/DateRangeField/composables/useDateRangeField.d.ts

@@ -448,6 +448,7 @@ export declare function useDateRangeField(props: DateRangeFieldOwnProps, model:
         endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         invalidated: import('vue').ComputedRef<boolean>;
         containerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            "data-bridge-variant": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>;
             "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
         }>>;
         startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;

package/dist/Components/DateTimeField/DateTimeField.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,15 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { presentSlotNames as t } from "../../Utils/slotOrProp.js";
-import n from "../Icon/Icon.js";
-import { FORM_FIELD_CHROME_SLOT_NAMES as r } from "../FormField/formField.types.js";
-import i from "../FormField/FormField.js";
-import a from "../FieldOverlay/FieldOverlay.js";
-import { useDateTimeField as o } from "./composables/useDateTimeField.js";
-import s from "../DateTimePicker/DateTimePicker.js";
-import { Fragment as c, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
-import { isUndefined as M } from "es-toolkit/compat";
+import { useOptionalModel as n } from "../../Utils/useOptionalModel.js";
+import r from "../Icon/Icon.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as i } from "../FormField/formField.types.js";
+import a from "../FormField/FormField.js";
+import o from "../FieldOverlay/FieldOverlay.js";
+import { useDateTimeField as s } from "./composables/useDateTimeField.js";
+import c from "../DateTimePicker/DateTimePicker.js";
+import { Fragment as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
 //#region src/Components/DateTimeField/DateTimeField.vue?vue&type=script&setup=true&lang.ts
-var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"], F = /*@__PURE__*/ g({
+var M = { class: "flex min-w-0 flex-1 items-center gap-1" }, N = ["aria-label"], P = /*@__PURE__*/ g({
 	inheritAttrs: !1,
 	__name: "DateTimeField",
 	props: /*@__PURE__*/ v({
@@ -85,62 +85,57 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		"open"
 	], ["update:modelValue"]),
 	setup(g, { emit: v }) {
-		let F = O(g, "modelValue"), I = g, L = v, R = e(), z = C(I.defaultValue ?? null), B = l({
-			set: (e) => {
-				F.value = e, z.value = e;
-			},
-			get: () => M(F.value) ? z.value : F.value
-		}), { open: V, fill: ee, overlay: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, pickerClass: Y, dateTimeOnly: X, clearIconSize: Z, showClearIcon: Q, handleOpenChange: $, handlePickerChange: te, handlePickerCancel: ne, overlayCustomProps: re, dateTimePickerCustomProps: ie } = o(I, B, L);
-		return (e, o) => (S(), d(c, null, [h(D(i), { field: D(U) }, p({
-			default: k(() => [f("div", N, [f("input", x(_(D(W))), null, 16), D(Q) ? (S(), d("span", y({ key: 0 }, D(G), {
-				onClick: o[0] ||= (...e) => D(K) && D(K)(...e),
-				"aria-label": D(R)("Clear"),
-				onKeydown: [o[1] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["enter"]), o[2] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["space"])]
-			}), [h(D(n), y({
+		let P = O(g, "modelValue"), F = e(), I = v, L = g, R = C(L.defaultValue ?? null), z = n(P, R), { open: ee, fill: B, overlay: V, formField: H, inputBind: U, clearBind: W, clearValue: G, modelValue: K, showFooter: q, pickerClass: J, dateTimeOnly: Y, clearIconSize: X, showClearIcon: Z, handleOpenChange: Q, handlePickerChange: $, handlePickerCancel: te, overlayCustomProps: ne, dateTimePickerCustomProps: re } = s(L, z, I);
+		return (e, n) => (S(), d(l, null, [h(D(a), { field: D(H) }, p({
+			default: k(() => [f("div", M, [f("input", x(_(D(U))), null, 16), D(Z) ? (S(), d("span", y({ key: 0 }, D(W), {
+				onClick: n[0] ||= (...e) => D(G) && D(G)(...e),
+				"aria-label": D(F)("Clear"),
+				onKeydown: [n[1] ||= A(j((...e) => D(G) && D(G)(...e), ["prevent"]), ["enter"]), n[2] ||= A(j((...e) => D(G) && D(G)(...e), ["prevent"]), ["space"])]
+			}), [h(D(r), y({
 				icon: "clear",
-				size: D(Z)
-			}, I.customProps?.clearIcon), null, 16, ["size"])], 16, P)) : u("", !0)])]),
+				size: D(X)
+			}, L.customProps?.clearIcon), null, 16, ["size"])], 16, N)) : u("", !0)])]),
 			_: 2
-		}, [w(D(t)(D(r), e.$slots), (t) => ({
+		}, [w(D(t)(D(i), e.$slots), (t) => ({
 			name: t,
 			fn: k((n) => [T(e.$slots, t, x(_(n || {})))])
-		}))]), 1032, ["field"]), h(D(a), {
-			overlay: D(H),
-			"model-value": D(V),
-			"custom-props": D(re),
-			"onUpdate:modelValue": D($)
+		}))]), 1032, ["field"]), h(D(o), {
+			overlay: D(V),
+			"model-value": D(ee),
+			"custom-props": D(ne),
+			"onUpdate:modelValue": D(Q)
 		}, {
-			default: k(() => [h(D(s), {
-				fill: D(ee),
-				value: D(q),
-				class: b(D(Y)),
-				ampm: D(X).ampm,
-				"show-footer": D(J),
-				"read-only": I.readonly,
-				"max-date": D(X).maxDate,
-				"min-date": D(X).minDate,
-				"max-time": D(X).maxTime,
-				"min-time": D(X).minTime,
-				onChange: D(te),
-				onCancel: D(ne),
-				interval: D(X).interval,
-				"time-zone": D(X).timeZone,
-				"hide-years": D(X).hideYears,
-				error: D(U).invalidated.value,
-				color: D(U).merged.value.color,
-				"hide-months": D(X).hideMonths,
-				disabled: D(U).isDisabled.value,
-				"show-seconds": D(X).showSeconds,
-				"default-view": D(X).defaultView,
-				"start-of-week": D(X).startOfWeek,
-				"custom-props": D(ie),
-				rounded: D(U).merged.value.rounded,
-				"disable-dates": D(X).disableDates,
-				"hide-weekdays": D(X).hideWeekdays,
-				"disable-times": D(X).disableTimes,
-				"disable-years": D(X).disableYears,
-				"disable-months": D(X).disableMonths,
-				"hide-outside-days": D(X).hideOutsideDays
+			default: k(() => [h(D(c), {
+				fill: D(B),
+				value: D(K),
+				class: b(D(J)),
+				ampm: D(Y).ampm,
+				"show-footer": D(q),
+				"read-only": L.readonly,
+				"max-date": D(Y).maxDate,
+				"min-date": D(Y).minDate,
+				"max-time": D(Y).maxTime,
+				"min-time": D(Y).minTime,
+				onChange: D($),
+				onCancel: D(te),
+				interval: D(Y).interval,
+				"time-zone": D(Y).timeZone,
+				"hide-years": D(Y).hideYears,
+				error: D(H).invalidated.value,
+				color: D(H).merged.value.color,
+				"hide-months": D(Y).hideMonths,
+				disabled: D(H).isDisabled.value,
+				"show-seconds": D(Y).showSeconds,
+				"default-view": D(Y).defaultView,
+				"start-of-week": D(Y).startOfWeek,
+				"custom-props": D(re),
+				rounded: D(H).merged.value.rounded,
+				"disable-dates": D(Y).disableDates,
+				"hide-weekdays": D(Y).hideWeekdays,
+				"disable-times": D(Y).disableTimes,
+				"disable-years": D(Y).disableYears,
+				"disable-months": D(Y).disableMonths,
+				"hide-outside-days": D(Y).hideOutsideDays
 			}, p({
 				day: k((t) => [T(e.$slots, "day", x(_(t)), () => [m(E(t.label), 1)])]),
 				_: 2
@@ -159,4 +154,4 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 	}
 });
 //#endregion
-export { F as default };
+export { P as default };

package/dist/Components/DateTimeField/composables/useDateTimeField.d.ts

@@ -449,6 +449,7 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
         endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         invalidated: import('vue').ComputedRef<boolean>;
         containerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            "data-bridge-variant": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>;
             "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
         }>>;
         startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;