@bridge-ui/vue 0.4.0 → 0.5.1

package/ai/skills/bridge-ui-components/SKILL.md

@@ -2,7 +2,7 @@
 name: bridge-ui-components
 description: >-
   Use Bridge UI Vue components — Button, Avatar, Card, Alert, Accordion, Badge, Icon,
-  Link, List, Table, DataTable, Tabs, Spinner, Skeleton, Progress, Stepper, Pagination, TextField, Select,
+  Link, List, Table, DataTable, Tabs, Spinner, Skeleton, EmptyState, Sidebar, Progress, Stepper, Pagination, TextField, Select,
   Autocomplete, DateField, DatePicker, DateRangeField, DateRangePicker,
   TimeField, TimePicker, DateTimeField, DateTimePicker, ColorField, ColorPicker,
   classes, customProps, slots. Use when building UI with Bridge components.
@@ -32,6 +32,7 @@ In templates, use kebab-case attrs (`start-icon`, `custom-props`, `error-message
 | Tabs                          | `.ai/docs/components/Tabs.md`                                         |
 | Text input                    | `.ai/docs/components/TextField.md`                                    |
 | Select / autocomplete         | `.ai/docs/components/Select.md`, `Autocomplete.md`                    |
+| Sidebar / app shell           | `.ai/docs/components/Sidebar.md`                                      |
 | Date                          | `.ai/docs/components/DateField.md`, `DatePicker.md`                   |
 | Date range                    | `.ai/docs/components/DateRangeField.md`, `DateRangePicker.md`         |
 | Time                          | `.ai/docs/components/TimeField.md`, `TimePicker.md`                   |
@@ -40,6 +41,7 @@ In templates, use kebab-case attrs (`start-icon`, `custom-props`, `error-message
 | Date-time range               | `.ai/docs/components/DateTimeRangeField.md`, `DateTimeRangePicker.md` |
 | Color                         | `.ai/docs/components/ColorField.md`, `ColorPicker.md`                 |
 | Spinner / skeleton / progress | `.ai/docs/components/Spinner.md`, `Skeleton.md`, `Progress.md`        |
+| Empty / no data               | `.ai/docs/components/EmptyState.md`                                   |
 | Scroll fade / scrollbar       | `.ai/docs/ScrollUtilities.md`                                         |
 | Index                         | `.ai/docs/README.md`                                                  |
 

package/dist/Components/Accordion/accordionInjectionKey.d.ts

@@ -10,6 +10,7 @@ export type AccordionTokenClasses = {
     itemSize?: string;
     itemVariant?: string;
     panelSize?: string;
+    panelVariant?: string;
     rootSize?: string;
     rootVariant?: string;
     triggerSize?: string;

package/dist/Components/Accordion/composables/useAccordion.js

@@ -61,9 +61,10 @@ function b(b, x, S, C) {
 			triggerSize: l(V.value, "trigger"),
 			rootVariant: l(H.value, "root"),
 			itemVariant: l(H.value, "item"),
+			panelVariant: l(H.value, "panel"),
 			triggerVariant: l(H.value, "trigger"),
-			colorIndicator: l(U.value, "indicator"),
-			colorTriggerExpanded: l(U.value, "triggerExpanded")
+			colorIndicator: A.value.variant === "plain" ? void 0 : l(U.value, "indicator"),
+			colorTriggerExpanded: A.value.variant === "plain" ? void 0 : l(U.value, "triggerExpanded")
 		}
 	}));
 	return a(e, W), {

package/dist/Components/AccordionItem/composables/useAccordionItem.js

@@ -111,6 +111,7 @@ function y(y) {
 			"aria-labelledby": p(C.value.id, D.value),
 			class: g({
 				[C.value.tokenClasses.panelSize ?? ""]: !0,
+				[C.value.tokenClasses.panelVariant ?? ""]: !0,
 				[d(N.value, "panel") ?? ""]: !0
 			})
 		})),

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

@@ -2,7 +2,7 @@ import { VNodeChild } from 'vue';
 import { DataTableColumnSearch, DataTableFilters } from '@bridge-ui/core/Domain';
 import { DataTableItemSlotProps, DataTableOwnProps, DataTableSlots, DataTableSorting } from './dataTable.types';
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import('vue').PublicProps & __VLS_PrettifyLocal<(Omit<DataTableOwnProps<T>, "search" | "page" | "filters" | "columnSearch" | "expanded" | "hiddenColumns" | "perPage" | "selection" | "sorting"> & {
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<(Omit<DataTableOwnProps<T>, "search" | "page" | "filters" | "expanded" | "columnSearch" | "hiddenColumns" | "perPage" | "selection" | "sorting"> & {
         page?: number;
         perPage?: number;
         search?: string;

package/dist/Components/DataTable/DataTable.vue_vue_type_script_setup_true_lang.js

@@ -2,29 +2,30 @@ import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { hasNamedSlot as t } from "../../Utils/slotOrProp.js";
 import n from "../Icon/Icon.js";
 import ee from "../Progress/Progress.js";
-import te from "../Pagination/Pagination.js";
-import ne from "../Select/Select.js";
+import te from "../EmptyState/EmptyState.js";
+import ne from "../Pagination/Pagination.js";
+import re from "../Select/Select.js";
 import { useDataTable as r } from "./composables/useDataTable.js";
-import re from "./DataTableCellContent.js";
-import ie from "./DataTableColumnsMenu.js";
-import ae from "./DataTableFilterMenu.js";
-import oe from "./DataTableSearch.js";
+import ie from "./DataTableCellContent.js";
+import ae from "./DataTableColumnsMenu.js";
+import oe from "./DataTableFilterMenu.js";
+import se from "./DataTableSearch.js";
 import i from "./DataTableSelection.js";
-import se from "./DataTableSortButton.js";
-import ce from "../Table/Table.js";
-import le from "../Table/TableBody.js";
+import ce from "./DataTableSortButton.js";
+import le from "../Table/Table.js";
+import ue from "../Table/TableBody.js";
 import a from "../Table/TableCell.js";
-import ue from "../Table/TableFooter.js";
-import de from "../Table/TableHead.js";
-import fe from "../Table/TableHeader.js";
+import de from "../Table/TableFooter.js";
+import fe from "../Table/TableHead.js";
+import pe from "../Table/TableHeader.js";
 import o from "../Table/TableRow.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as pe, createVNode as p, defineComponent as m, guardReactiveProps as h, mergeModels as g, mergeProps as _, normalizeClass as v, normalizeProps as y, openBlock as b, renderList as x, renderSlot as S, toDisplayString as C, unref as w, useId as me, useModel as T, useSlots as he, withCtx as E } from "vue";
-import { cn as D } from "@bridge-ui/core/Utils";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, guardReactiveProps as h, mergeModels as g, mergeProps as _, normalizeClass as v, normalizeProps as y, openBlock as b, renderList as x, renderSlot as S, toDisplayString as me, unref as C, useId as he, useModel as w, useSlots as ge, withCtx as T } from "vue";
+import { cn as E } from "@bridge-ui/core/Utils";
 //#region src/Components/DataTable/DataTable.vue?vue&type=script&setup=true&lang.ts
-var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center gap-2" }, ve = {
+var _e = { class: "min-w-0 flex-1" }, ve = { class: "flex shrink-0 items-center gap-2" }, ye = {
 	key: 0,
 	class: "inline-flex items-center rounded-lg border border-dark-200 bg-white p-0.5 dark:border-dark-700 dark:bg-dark-900"
-}, ye = { class: "relative" }, be = {
+}, be = { class: "relative" }, D = {
 	key: 1,
 	class: "flex w-full min-w-0 items-center gap-1.5 leading-none"
 }, O = ["aria-expanded", "onClick"], k = ["aria-hidden"], A = { class: "min-h-0 overflow-hidden" }, j = { class: "p-3" }, M = ["aria-hidden"], N = { class: "flex shrink-0 items-center gap-2" }, xe = { class: "text-sm whitespace-nowrap text-dark-500 dark:text-dark-400" }, P = /*@__PURE__*/ m({
@@ -102,7 +103,7 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 		"update:columnSearch"
 	],
 	setup(m) {
-		let g = m, P = he(), F = e(), I = T(m, "page"), Se = T(m, "perPage"), L = T(m, "search"), Ce = T(m, "expanded"), we = T(m, "selection"), Te = T(m, "filters"), Ee = T(m, "sorting"), De = T(m, "hiddenColumns"), Oe = T(m, "columnSearch"), { merged: R, rowViews: ke, rootBind: Ae, emptyBind: je, showEmpty: z, frameBind: Me, tableProps: Ne, footerBind: Pe, loadingBar: B, showSearch: V, getHeadBind: Fe, headerViews: Ie, loadingBind: Le, onToggleRow: Re, toolbarBind: ze, getCellBind: H, columnCount: U, showPerPage: Be, showToolbar: Ve, getHeadAlign: He, getCellAlign: W, onTogglePage: Ue, summaryCells: G, expandEnabled: We, loadingBarBind: Ge, paginationBind: Ke, selectAllState: K, showPagination: qe, onChangeSearch: Je, onToggleExpand: Ye, visibilityItems: Xe, perPageSlotProps: q, resolvedPageCount: J, selectionMultiple: Y, visibilityEnabled: Ze, paginationSlotProps: X, onCommitColumnFilter: Qe, onHiddenColumnsChange: $e } = r(g, {
+		let g = m, P = ge(), F = e(), I = w(m, "page"), Se = w(m, "perPage"), L = w(m, "search"), Ce = w(m, "expanded"), we = w(m, "selection"), Te = w(m, "filters"), Ee = w(m, "sorting"), De = w(m, "hiddenColumns"), Oe = w(m, "columnSearch"), { merged: R, rowViews: ke, rootBind: Ae, emptyBind: je, showEmpty: z, frameBind: Me, tableProps: Ne, footerBind: Pe, loadingBar: B, showSearch: V, getHeadBind: Fe, headerViews: Ie, loadingBind: Le, onToggleRow: Re, toolbarBind: ze, getCellBind: H, columnCount: U, showPerPage: Be, showToolbar: Ve, getHeadAlign: He, getCellAlign: W, onTogglePage: Ue, summaryCells: G, expandEnabled: We, loadingBarBind: Ge, paginationBind: Ke, selectAllState: K, showPagination: qe, onChangeSearch: Je, onToggleExpand: Ye, visibilityItems: Xe, perPageSlotProps: q, resolvedPageCount: J, selectionMultiple: Y, visibilityEnabled: Ze, paginationSlotProps: X, onCommitColumnFilter: Qe, onHiddenColumnsChange: $e } = r(g, {
 			size: "md",
 			full: !0,
 			rounded: "lg",
@@ -158,13 +159,13 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 					}
 				}
 			};
-		}), rt = me(), $ = (e) => e.node ?? null;
-		return (e, r) => (b(), d("div", y(h(w(Ae))), [w(Ve) ? (b(), d("div", y(_({ key: 0 }, w(ze))), [f("div", ge, [S(e.$slots, "toolbar")]), f("div", _e, [
-			w(Ze) ? (b(), d("div", ve, [p(ie, {
-				items: w(Xe),
-				overlay: w(R).columnsOverlay,
-				onChange: w($e),
-				"show-footer": w(R).columnsShowFooter
+		}), rt = he(), $ = (e) => e.node ?? null;
+		return (e, r) => (b(), d("div", y(h(C(Ae))), [C(Ve) ? (b(), d("div", y(_({ key: 0 }, C(ze))), [f("div", _e, [S(e.$slots, "toolbar")]), f("div", ve, [
+			C(Ze) ? (b(), d("div", ye, [p(ae, {
+				items: C(Xe),
+				overlay: C(R).columnsOverlay,
+				onChange: C($e),
+				"show-footer": C(R).columnsShowFooter
 			}, null, 8, [
 				"items",
 				"overlay",
@@ -172,58 +173,58 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 				"show-footer"
 			])])) : u("", !0),
 			S(e.$slots, "toolbarActions"),
-			w(V) ? S(e.$slots, "search", {}, () => [p(oe, {
+			C(V) ? S(e.$slots, "search", {}, () => [p(se, {
 				"model-value": L.value ?? "",
-				"onUpdate:modelValue": w(Je),
-				"field-props": w(R).customProps?.search
+				"onUpdate:modelValue": C(Je),
+				"field-props": C(R).customProps?.search
 			}, null, 8, [
 				"model-value",
 				"onUpdate:modelValue",
 				"field-props"
 			])], void 0, 1) : u("", !0)
-		])], 16)) : u("", !0), f("div", y(h(w(Me))), [
-			f("div", ye, [p(w(ce), y(h(w(Ne))), {
-				default: E(() => [
-					p(w(fe), y(h(w(R).customProps?.header)), {
-						default: E(() => [p(w(o), y(h(w(R).customProps?.row)), {
-							default: E(() => [(b(!0), d(s, null, x(w(Ie), (e) => (b(), l(w(de), _({
+		])], 16)) : u("", !0), f("div", y(h(C(Me))), [
+			f("div", be, [p(C(le), y(h(C(Ne))), {
+				default: T(() => [
+					p(C(pe), y(h(C(R).customProps?.header)), {
+						default: T(() => [p(C(o), y(h(C(R).customProps?.row)), {
+							default: T(() => [(b(!0), d(s, null, x(C(Ie), (e) => (b(), l(C(fe), _({
 								key: e.id,
-								align: w(He)(e)
-							}, { ref_for: !0 }, w(Fe)(e)), {
-								default: E(() => [e.isSelection && w(Y) ? (b(), l(i, {
+								align: C(He)(e)
+							}, { ref_for: !0 }, C(Fe)(e)), {
+								default: T(() => [e.isSelection && C(Y) ? (b(), l(i, {
 									key: 0,
 									kind: "page",
 									size: Z.value,
-									onChange: w(Ue),
-									checked: w(K).checked,
-									indeterminate: w(K).indeterminate,
-									"checkbox-props": w(R).customProps?.checkbox
+									onChange: C(Ue),
+									checked: C(K).checked,
+									indeterminate: C(K).indeterminate,
+									"checkbox-props": C(R).customProps?.checkbox
 								}, null, 8, [
 									"size",
 									"onChange",
 									"checked",
 									"indeterminate",
 									"checkbox-props"
-								])) : !e.isSelection && !e.isExpand ? (b(), d("div", be, [e.sortable ? (b(), l(se, {
+								])) : !e.isSelection && !e.isExpand ? (b(), d("div", D, [e.sortable ? (b(), l(ce, {
 									key: 0,
 									sort: e.ariaSort
 								}, {
-									default: E(() => [p($, { node: e.header }, null, 8, ["node"])]),
+									default: T(() => [p($, { node: e.header }, null, 8, ["node"])]),
 									_: 2
 								}, 1032, ["sort"])) : (b(), l($, {
 									key: 1,
 									node: e.header
-								}, null, 8, ["node"])), e.filterable ? (b(), l(ae, {
+								}, null, 8, ["node"])), e.filterable ? (b(), l(oe, {
 									key: 2,
 									"column-id": e.id,
 									active: e.filterActive,
 									values: e.filterValues,
-									overlay: w(R).filterOverlay,
+									overlay: C(R).filterOverlay,
 									options: e.filterOptions,
 									searchable: e.searchable,
 									multiple: e.filterMultiple,
 									"search-value": e.searchQuery,
-									onApply: (t, n) => w(Qe)(e.id, t, n)
+									onApply: (t, n) => C(Qe)(e.id, t, n)
 								}, null, 8, [
 									"column-id",
 									"active",
@@ -238,50 +239,54 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 								_: 2
 							}, 1040, ["align"]))), 128))]),
 							_: 1
-						}, 16), w(R).loading && w(B) ? (b(), l(w(o), {
+						}, 16), C(R).loading && C(B) ? (b(), l(C(o), {
 							key: 0,
 							classes: { root: "h-0" }
 						}, {
-							default: E(() => [p(w(a), {
-								colspan: w(U),
+							default: T(() => [p(C(a), {
+								colspan: C(U),
 								classes: { root: "relative h-0 border-0 p-0 after:hidden" }
 							}, {
-								default: E(() => [f("div", y(h(w(Ge))), [S(e.$slots, "loading", {}, () => [p(w(ee), _({
+								default: T(() => [f("div", y(h(C(Ge))), [S(e.$slots, "loading", {}, () => [p(C(ee), _({
 									size: "xs",
 									rounded: "none"
-								}, w(R).customProps?.progress), null, 16)])], 16)]),
+								}, C(R).customProps?.progress), null, 16)])], 16)]),
 								_: 3
 							}, 8, ["colspan"])]),
 							_: 3
 						})) : u("", !0)]),
 						_: 3
 					}, 16),
-					p(w(le), y(h(w(R).customProps?.body)), {
-						default: E(() => [w(z) ? (b(), l(w(o), { key: 0 }, {
-							default: E(() => [p(w(a), {
+					p(C(ue), y(h(C(R).customProps?.body)), {
+						default: T(() => [C(z) ? (b(), l(C(o), { key: 0 }, {
+							default: T(() => [p(C(a), {
 								align: "center",
-								colspan: w(U)
+								colspan: C(U)
 							}, {
-								default: E(() => [f("div", y(h(w(je))), [S(e.$slots, "empty", {}, () => [r[2] ||= f("span", { class: "relative mb-1 block h-10 w-12 rounded-md border-2 border-dark-300 dark:border-dark-600" }, [f("span", { class: "absolute -top-1.5 left-2 right-2 h-2 rounded-sm border-2 border-dark-300 bg-white dark:border-dark-600 dark:bg-dark-900" })], -1), pe(" " + C(w(F)("No data")), 1)])], 16)]),
+								default: T(() => [f("div", y(h(C(je))), [S(e.$slots, "empty", {}, () => [p(C(te), {
+									icon: "inbox",
+									size: C(R).size,
+									title: C(F)("No data")
+								}, null, 8, ["size", "title"])])], 16)]),
 								_: 3
 							}, 8, ["colspan"])]),
 							_: 3
-						})) : u("", !0), w(z) ? u("", !0) : (b(!0), d(s, { key: 1 }, x(w(ke), (t) => (b(), d(s, { key: t.id }, [p(w(o), _({ ref_for: !0 }, w(R).customProps?.row), {
-							default: E(() => [(b(!0), d(s, null, x(t.cells, (e) => (b(), l(w(a), _({
+						})) : u("", !0), C(z) ? u("", !0) : (b(!0), d(s, { key: 1 }, x(C(ke), (t) => (b(), d(s, { key: t.id }, [p(C(o), _({ ref_for: !0 }, C(R).customProps?.row), {
+							default: T(() => [(b(!0), d(s, null, x(t.cells, (e) => (b(), l(C(a), _({
 								key: e.id,
-								align: w(W)(e)
-							}, { ref_for: !0 }, w(H)(e)), {
-								default: E(() => [e.isSelection ? (b(), l(i, {
+								align: C(W)(e)
+							}, { ref_for: !0 }, C(H)(e)), {
+								default: T(() => [e.isSelection ? (b(), l(i, {
 									key: 0,
 									kind: "row",
 									value: t.id,
 									size: Z.value,
-									name: w(rt),
+									name: C(rt),
 									checked: t.selected,
-									multiple: w(Y),
-									"radio-props": w(R).customProps?.radio,
-									"checkbox-props": w(R).customProps?.checkbox,
-									onChange: (e) => w(Re)(t.id, e)
+									multiple: C(Y),
+									"radio-props": C(R).customProps?.radio,
+									"checkbox-props": C(R).customProps?.checkbox,
+									onChange: (e) => C(Re)(t.id, e)
 								}, null, 8, [
 									"value",
 									"size",
@@ -296,33 +301,33 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 									type: "button",
 									"aria-label": "Expand row",
 									"aria-expanded": t.expanded,
-									onClick: (e) => w(Ye)(t.id, !t.expanded),
+									onClick: (e) => C(Ye)(t.id, !t.expanded),
 									class: "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm leading-none hover:bg-dark-500/10 dark:hover:bg-dark-500/15"
-								}, [f("span", { class: v([{ "rotate-90": t.expanded }, "inline-flex transition-transform duration-200 motion-reduce:transition-none"]) }, [p(w(n), {
+								}, [f("span", { class: v([{ "rotate-90": t.expanded }, "inline-flex transition-transform duration-200 motion-reduce:transition-none"]) }, [p(C(n), {
 									size: "sm",
 									icon: "chevronRight"
-								})], 2)], 8, O)) : (b(), l(re, {
+								})], 2)], 8, O)) : (b(), l(ie, {
 									key: 2,
 									tooltip: e.tooltip,
 									ellipsis: e.ellipsis
 								}, {
-									default: E(() => [p($, { node: et(t, e) }, null, 8, ["node"])]),
+									default: T(() => [p($, { node: et(t, e) }, null, 8, ["node"])]),
 									_: 2
 								}, 1032, ["tooltip", "ellipsis"]))]),
 								_: 2
 							}, 1040, ["align"]))), 128))]),
 							_: 2
-						}, 1040), w(We) ? (b(), l(w(o), { key: 0 }, {
-							default: E(() => [p(w(a), {
-								colspan: w(U),
-								classes: { root: w(D)({
+						}, 1040), C(We) ? (b(), l(C(o), { key: 0 }, {
+							default: T(() => [p(C(a), {
+								colspan: C(U),
+								classes: { root: C(E)({
 									"p-0": !0,
 									"border-0": !t.expanded
 								}) }
 							}, {
-								default: E(() => [f("div", {
+								default: T(() => [f("div", {
 									"aria-hidden": !t.expanded,
-									class: v(w(D)({
+									class: v(C(E)({
 										"grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none": !0,
 										"grid-rows-[1fr]": t.expanded,
 										"grid-rows-[0fr]": !t.expanded
@@ -334,13 +339,13 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 						}, 1024)) : u("", !0)], 64))), 128))]),
 						_: 3
 					}, 16),
-					w(G) ? (b(), l(w(ue), { key: 0 }, {
-						default: E(() => [p(w(o), y(h(w(R).customProps?.row)), {
-							default: E(() => [(b(!0), d(s, null, x(w(G), (e) => (b(), l(w(a), _({
+					C(G) ? (b(), l(C(de), { key: 0 }, {
+						default: T(() => [p(C(o), y(h(C(R).customProps?.row)), {
+							default: T(() => [(b(!0), d(s, null, x(C(G), (e) => (b(), l(C(a), _({
 								key: e.id,
-								align: w(W)(e)
-							}, { ref_for: !0 }, w(H)(e)), {
-								default: E(() => [p($, { node: e.content }, null, 8, ["node"])]),
+								align: C(W)(e)
+							}, { ref_for: !0 }, C(H)(e)), {
+								default: T(() => [p($, { node: e.content }, null, 8, ["node"])]),
 								_: 2
 							}, 1040, ["align"]))), 128))]),
 							_: 1
@@ -349,7 +354,7 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 					})) : u("", !0)
 				]),
 				_: 3
-			}, 16), w(R).loading ? (b(), d("div", _({ key: 0 }, w(Le), { "aria-hidden": w(B) || void 0 }), [w(B) ? u("", !0) : S(e.$slots, "loading", {}, () => [r[3] ||= f("span", {
+			}, 16), C(R).loading ? (b(), d("div", _({ key: 0 }, C(Le), { "aria-hidden": C(B) || void 0 }), [C(B) ? u("", !0) : S(e.$slots, "loading", {}, () => [r[2] ||= f("span", {
 				role: "status",
 				"aria-label": "Loading",
 				class: "relative inline-block size-5 animate-spin motion-reduce:animate-none"
@@ -359,32 +364,32 @@ var ge = { class: "min-w-0 flex-1" }, _e = { class: "flex shrink-0 items-center
 				f("span", { class: "absolute inset-e-0 bottom-0 size-2 rounded-full bg-primary-500 dark:bg-primary-400" }),
 				f("span", { class: "absolute inset-s-0 bottom-0 size-2 rounded-full bg-primary-500 opacity-70 dark:bg-primary-400" })
 			], -1)], void 0, 0)], 16, M)) : u("", !0)]),
-			w(t)(w(P), "footer") ? (b(), d("div", y(_({ key: 0 }, w(Pe))), [S(e.$slots, "footer")], 16)) : u("", !0),
-			w(qe) ? (b(), d("div", y(_({ key: 1 }, w(Ke))), [w(Be) ? S(e.$slots, "perPage", y(h(w(q))), () => [f("div", N, [f("span", xe, C(w(F)("Per page:")), 1), p(w(ne), _({ size: "sm" }, w(R).customProps?.perPage, {
+			C(t)(C(P), "footer") ? (b(), d("div", y(_({ key: 0 }, C(Pe))), [S(e.$slots, "footer")], 16)) : u("", !0),
+			C(qe) ? (b(), d("div", y(_({ key: 1 }, C(Ke))), [C(Be) ? S(e.$slots, "perPage", y(h(C(q))), () => [f("div", N, [f("span", xe, me(C(F)("Per page:")), 1), p(C(re), _({ size: "sm" }, C(R).customProps?.perPage, {
 				overlay: "menu",
 				clearable: !1,
 				"hide-error-message": "",
 				"aria-label": "Per page",
 				options: tt.value,
 				"custom-props": nt.value,
-				"model-value": w(q).perPage,
-				"onUpdate:modelValue": r[0] ||= (e) => w(q).onPerPageChange(Number(e)),
+				"model-value": C(q).perPage,
+				"onUpdate:modelValue": r[0] ||= (e) => C(q).onPerPageChange(Number(e)),
 				classes: {
-					...w(R).customProps?.perPage?.classes,
-					root: w(D)("w-20", w(R).customProps?.perPage?.classes?.root)
+					...C(R).customProps?.perPage?.classes,
+					root: C(E)("w-20", C(R).customProps?.perPage?.classes?.root)
 				}
 			}), null, 16, [
 				"options",
 				"custom-props",
 				"model-value",
 				"classes"
-			])])], void 0, 0) : u("", !0), S(e.$slots, "pagination", y(h(w(X))), () => [w(J) === void 0 ? u("", !0) : (b(), l(w(te), _({
+			])])], void 0, 0) : u("", !0), S(e.$slots, "pagination", y(h(C(X))), () => [C(J) === void 0 ? u("", !0) : (b(), l(C(ne), _({
 				key: 0,
 				modelValue: Q.value,
 				"onUpdate:modelValue": r[1] ||= (e) => Q.value = e,
-				count: w(J),
-				variant: w(X).variant
-			}, w(R).customProps?.pagination), null, 16, [
+				count: C(J),
+				variant: C(X).variant
+			}, C(R).customProps?.pagination), null, 16, [
 				"modelValue",
 				"count",
 				"variant"

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

@@ -73,7 +73,7 @@ export declare function useDataTable<T>(props: DataTableOwnProps<T>, libDefaults
     rowViews: import('vue').ComputedRef<DataTableRowView<T>[]>;
     rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DataTableProps<T>, "search" | "columns" | "size" | "classes" | "customProps" | "full" | "rounded" | "variant" | "page" | "loading" | "rows" | "filters" | "hoverable" | "stickyHeader" | "striped" | "columnSearch" | "columnsOverlay" | "columnsShowFooter" | "expanded" | "filterOverlay" | "getRowId" | "hiddenColumns" | "loadingVariant" | "pageCount" | "perPage" | "perPageOptions" | "selection" | "selectionMode" | "sorting" | "totalCount">>>>;
+    }, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DataTableProps<T>, "search" | "columns" | "size" | "classes" | "customProps" | "full" | "rounded" | "variant" | "page" | "loading" | "rows" | "filters" | "expanded" | "hoverable" | "stickyHeader" | "striped" | "columnSearch" | "columnsOverlay" | "columnsShowFooter" | "filterOverlay" | "getRowId" | "hiddenColumns" | "loadingVariant" | "pageCount" | "perPage" | "perPageOptions" | "selection" | "selectionMode" | "sorting" | "totalCount">>>>;
     emptyBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         class: string;
     }, "class", import('vue').HTMLAttributes | undefined, {}>>;

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

@@ -366,7 +366,7 @@ function y(h, g, _) {
 		"flex items-center justify-between gap-3 pb-3": !0,
 		[s(w.value, "toolbar") ?? ""]: !0
 	}) })), Bt = r(() => e(C.value?.empty, {}, { class: m({
-		"flex flex-col items-center justify-center gap-2 py-12 text-sm text-dark-400 dark:text-dark-500": !0,
+		"w-full": !0,
 		[s(w.value, "empty") ?? ""]: !0
 	}) })), Vt = r(() => e(C.value?.loading, {}, { class: m({
 		"absolute inset-0 z-30 bg-white/50 dark:bg-dark-900/50": !0,

package/dist/Components/EmptyState/EmptyState.js

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

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

@@ -0,0 +1,16 @@
+import { EmptyStateOwnProps, EmptyStateSlots } from './emptyState.types';
+type __VLS_Slots = EmptyStateSlots;
+declare const __VLS_base: import('vue').DefineComponent<EmptyStateOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<EmptyStateOwnProps> & Readonly<{}>, {
+    size: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').EmptyStateSize, import('./emptyState.types').EmptyStateSizeOverrides>;
+    align: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').EmptyStateAlign, import('./emptyState.types').EmptyStateAlignOverrides>;
+    mediaDecorative: boolean;
+    titleAs: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
+}, {}, {}, {}, 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/EmptyState/EmptyState.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,42 @@
+import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n } from "../../Utils/slotOrProp.js";
+import r from "../Icon/Icon.js";
+import { useEmptyState as i } from "./composables/useEmptyState.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createTextVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeProps as m, openBlock as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, withCtx as b } from "vue";
+//#region src/Components/EmptyState/EmptyState.vue?vue&type=script&setup=true&lang.ts
+var x = /*@__PURE__*/ d({
+	inheritAttrs: !1,
+	__name: "EmptyState",
+	props: {
+		align: { default: "center" },
+		classes: {},
+		customProps: {},
+		description: {},
+		icon: {},
+		mediaDecorative: {
+			type: Boolean,
+			default: !0
+		},
+		size: { default: "md" },
+		title: {},
+		titleAs: { default: "p" }
+	},
+	setup(d) {
+		let { slots: x, merged: S, iconBind: C, rootBind: w, titleBind: T, mediaBind: E, actionsBind: D, descriptionBind: O } = i(d, {
+			size: "md",
+			titleAs: "p",
+			align: "center",
+			mediaDecorative: !0
+		}), k = o(() => e(x, "media") || n(S.value.icon));
+		return (i, o) => (h(), l("div", m(f(y(w))), [
+			k.value ? (h(), l("div", m(p({ key: 0 }, y(E))), [y(e)(y(x), "media") ? g(i.$slots, "media", {}, void 0, void 0, 0) : y(S).icon ? (h(), s(y(r), p({ key: 1 }, y(C), { icon: y(S).icon }), null, 16, ["icon"])) : c("", !0)], 16)) : c("", !0),
+			y(t)(y(x), "title", y(S).title) ? (h(), s(_(y(S).titleAs), m(p({ key: 1 }, y(T))), {
+				default: b(() => [y(e)(y(x), "title") ? g(i.$slots, "title", {}, void 0, void 0, 0) : y(n)(y(S).title) ? (h(), l(a, { key: 1 }, [u(v(y(S).title), 1)], 64)) : c("", !0)]),
+				_: 3
+			}, 16)) : c("", !0),
+			y(t)(y(x), "description", y(S).description) ? (h(), l("div", m(p({ key: 2 }, y(O))), [y(e)(y(x), "description") ? g(i.$slots, "description", {}, void 0, void 0, 0) : y(n)(y(S).description) ? (h(), l(a, { key: 1 }, [u(v(y(S).description), 1)], 64)) : c("", !0)], 16)) : c("", !0),
+			y(e)(y(x), "action") ? (h(), l("div", m(p({ key: 3 }, y(D))), [g(i.$slots, "action")], 16)) : c("", !0)
+		], 16));
+	}
+});
+//#endregion
+export { x as default };

package/dist/Components/EmptyState/composables/useEmptyState.d.ts

@@ -0,0 +1,24 @@
+import { IconSize } from '@bridge-ui/core/Tokens';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { EmptyStateOwnProps, EmptyStateProps } from '../emptyState.types';
+type EmptyStateLibDefaults = LibDefaultsShape<EmptyStateOwnProps, "size" | "align" | "titleAs" | "mediaDecorative">;
+type EmptyStateMerged = MergeLibDefaults<EmptyStateOwnProps, EmptyStateLibDefaults>;
+export declare function useEmptyState(props: EmptyStateOwnProps, libDefaults: EmptyStateLibDefaults): {
+    slots: Readonly<{
+        [name: string]: import('vue').Slot<any> | undefined;
+    }>;
+    merged: import('vue').ComputedRef<EmptyStateMerged>;
+    iconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        size: keyof IconSize;
+        class: string;
+    }, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<EmptyStateProps, "icon" | "size" | "classes" | "customProps" | "title" | "description" | "align" | "mediaDecorative" | "titleAs">>>;
+    titleBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    mediaBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        "aria-hidden": boolean | undefined;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    actionsBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+};
+export {};

package/dist/Components/EmptyState/composables/useEmptyState.js

@@ -0,0 +1,76 @@
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { computed as r, useAttrs as i, useSlots as a } from "vue";
+import { get as o } from "es-toolkit/compat";
+import { emptyStateAlignProps as s, emptyStateSizeProps as c } from "@bridge-ui/core/Tokens";
+import { cn as l, mergeBridgeUILayeredClasses as u, splitComponentProps as d } from "@bridge-ui/core/Utils";
+//#region src/Components/EmptyState/composables/useEmptyState.ts
+var f = [
+	"icon",
+	"size",
+	"align",
+	"title",
+	"classes",
+	"titleAs",
+	"customProps",
+	"description",
+	"mediaDecorative"
+];
+function p(p, m) {
+	let h = i(), g = a(), _ = r(() => d({
+		props: {
+			...h,
+			...p
+		},
+		bridgeKeys: f
+	})), { merged: v, entry: y } = t({
+		libDefaults: m,
+		componentName: "EmptyState",
+		props: () => _.value.componentProps
+	}), b = r(() => v.value.customProps), x = n({
+		entry: y,
+		props: () => _.value.componentProps
+	}), S = r(() => {
+		let e = u(c, y.value?.tokens?.size);
+		return o(e, v.value.size);
+	}), C = r(() => {
+		let e = u(s, y.value?.tokens?.align);
+		return o(e, v.value.align);
+	}), w = r(() => e(b.value?.actions, {}, l({
+		[o(S.value, "actions") ?? ""]: !0,
+		[o(x.value, "actions") ?? ""]: !0
+	}))), T = r(() => e(b.value?.description, {}, l({
+		[o(S.value, "description") ?? ""]: !0,
+		[o(x.value, "description") ?? ""]: !0
+	}))), E = r(() => e(b.value?.icon, {}, {
+		size: o(S.value, "icon") ?? "md",
+		class: l({
+			"shrink-0": !0,
+			[o(x.value, "icon") ?? ""]: !0
+		})
+	})), D = r(() => e(b.value?.media, {}, {
+		"aria-hidden": v.value.mediaDecorative ? !0 : void 0,
+		class: l({
+			[o(S.value, "media") ?? ""]: !0,
+			[o(x.value, "media") ?? ""]: !0
+		})
+	}));
+	return {
+		slots: g,
+		merged: v,
+		iconBind: E,
+		rootBind: r(() => e(b.value?.root, _.value.inheritedAttrs, l({
+			[o(S.value, "root") ?? ""]: !0,
+			[C.value ?? ""]: !0,
+			[o(x.value, "root") ?? ""]: !0
+		}))),
+		titleBind: r(() => e(b.value?.title, {}, l({
+			[o(S.value, "title") ?? ""]: !0,
+			[o(x.value, "title") ?? ""]: !0
+		}))),
+		mediaBind: D,
+		actionsBind: w,
+		descriptionBind: T
+	};
+}
+//#endregion
+export { p as useEmptyState };