@cascivo/react 0.12.0 → 0.13.1

package/dist/data-table/data-table.css

@@ -1 +1 @@
-@layer cascivo.component{._root_jwjfs_2{--_row-height:3rem;font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-surface);background-color:var(--cascivo-color-surface);flex-direction:column;display:flex;overflow:hidden}._root_jwjfs_2[data-density=compact]{--_row-height:2.25rem}._root_jwjfs_2[data-density=normal]{--_row-height:3rem}._root_jwjfs_2[data-density=relaxed]{--_row-height:3.75rem}._toolbar_jwjfs_26{justify-content:space-between;align-items:flex-end;gap:var(--cascivo-space-4);padding:var(--cascivo-space-3) var(--cascivo-space-4);border-block-end:1px solid var(--cascivo-color-border);display:flex}._heading_jwjfs_35{gap:var(--cascivo-space-1);flex-direction:column;display:flex}._title_jwjfs_41{font-size:var(--cascivo-text-base);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text)}._description_jwjfs_47{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle)}._search_jwjfs_52{appearance:none;height:2rem;min-inline-size:14rem;padding-inline:var(--cascivo-space-3);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none}._search_jwjfs_52:hover:not(:focus){border-color:var(--cascivo-color-border-strong)}._search_jwjfs_52:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._batchBar_jwjfs_79{justify-content:space-between;align-items:center;gap:var(--cascivo-space-4);padding:var(--cascivo-space-2) var(--cascivo-space-4);background-color:var(--cascivo-color-bg-subtle);border-block-end:1px solid var(--cascivo-color-border);display:flex}._batchCount_jwjfs_89{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text)}._batchActions_jwjfs_95{gap:var(--cascivo-space-2);display:flex}._scroller_jwjfs_101{max-block-size:var(--cascivo-data-table-max-height,none);overflow:auto}._scrollerVirtualized_jwjfs_106{block-size:var(--cascivo-data-table-height,400px);max-block-size:none;overflow:auto}._table_jwjfs_112{border-collapse:collapse;table-layout:auto;inline-size:100%}._root_jwjfs_2[data-paginated=true] ._table_jwjfs_112{table-layout:fixed}._table_jwjfs_112 thead th{padding-block:var(--cascivo-space-2);padding-inline:var(--cascivo-data-table-cell-gap,var(--cascivo-space-4));text-align:start;font-weight:var(--cascivo-font-semibold);font-size:var(--cascivo-text-xs);text-transform:uppercase;letter-spacing:var(--cascivo-tracking-wide);color:var(--cascivo-color-text-subtle);background-color:var(--cascivo-color-bg-subtle);border-block-end:1px solid var(--cascivo-color-border);white-space:nowrap}._table_jwjfs_112 thead th[data-align=end]{text-align:end}._table_jwjfs_112 td{padding-block:0;padding-inline:var(--cascivo-data-table-cell-gap,var(--cascivo-space-4));block-size:var(--_row-height);vertical-align:middle;border-block-end:1px solid var(--cascivo-color-border);color:var(--cascivo-color-text);overflow-wrap:anywhere}._table_jwjfs_112 td[data-align=end]{text-align:end}._table_jwjfs_112 tbody tr[data-filler-row] td{border-block-end:none}._root_jwjfs_2[data-sticky-header=true] ._table_jwjfs_112 thead th{z-index:var(--cascivo-z-raised,10);background-color:var(--cascivo-color-surface);position:sticky;inset-block-start:0}._root_jwjfs_2[data-zebra=true] ._table_jwjfs_112 tbody tr:nth-child(2n of ._row_jwjfs_172){background-color:var(--cascivo-color-bg-subtle)}._controlCol_jwjfs_178{inline-size:3rem}._controlCell_jwjfs_182{text-align:center;padding-inline:var(--cascivo-space-2)}._sortButton_jwjfs_188{align-items:center;gap:var(--cascivo-space-1);font-family:inherit;font-size:inherit;font-weight:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;background:0 0;border:none;outline:none;padding:0;display:inline-flex}._sortButton_jwjfs_188:focus-visible{text-decoration:underline}._sortButton_jwjfs_188:after{content:"↕";opacity:.4;font-size:.75em}._sortButton_jwjfs_188[data-state=ascending]:after{content:"↑";opacity:.9}._sortButton_jwjfs_188[data-state=descending]:after{content:"↓";opacity:.9}._row_jwjfs_172{content-visibility:auto;contain-intrinsic-size:auto var(--_row-height,3rem)}._row_jwjfs_172[data-state=selected] td{background-color:color-mix(in srgb, var(--cascivo-color-accent) 8%, transparent)}._emptyCell_jwjfs_236{padding:var(--cascivo-space-8) var(--cascivo-space-4);text-align:center;color:var(--cascivo-color-text-muted)}._expansionRow_jwjfs_243[data-state=closed]{display:none}._expansionGrid_jwjfs_249{overflow:hidden}._expansionInner_jwjfs_253{padding:var(--cascivo-space-4)}._expandButton_jwjfs_258{cursor:pointer;block-size:1.5rem;inline-size:1.5rem;color:var(--cascivo-color-text-muted);border-radius:var(--cascivo-radius-control);background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:inline-flex}._expandButton_jwjfs_258:focus-visible{box-shadow:0 0 0 2px var(--cascivo-color-accent)}._expandButton_jwjfs_258:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._chevron_jwjfs_281{block-size:.75rem;inline-size:.75rem;transition:transform var(--cascivo-duration-150) var(--cascivo-ease-out);border-block-end:2px solid;border-inline-end:2px solid;display:block;transform:rotate(45deg)}._expandButton_jwjfs_258[data-state=open] ._chevron_jwjfs_281{transform:rotate(-135deg)}._shimmer_jwjfs_296{background-color:var(--cascivo-color-bg-subtle);border-radius:var(--cascivo-radius-indicator);block-size:.875rem;inline-size:80%;display:block;position:relative;overflow:hidden}._shimmer_jwjfs_296:after{content:"";background:linear-gradient(90deg, transparent, var(--cascivo-color-surface), transparent);animation:_shimmer_jwjfs_296 var(--cascivo-duration-500,.5s) var(--cascivo-ease-in-out,ease-in-out) infinite;position:absolute;inset:0;translate:-100%}@keyframes _shimmer_jwjfs_296{to{translate:100%}}._footer_jwjfs_323{justify-content:flex-end;align-items:center;gap:var(--cascivo-space-4);padding:var(--cascivo-space-3) var(--cascivo-space-4);border-block-start:1px solid var(--cascivo-color-border);font-size:var(--cascivo-text-sm);display:flex}._pageSize_jwjfs_333{align-items:center;gap:var(--cascivo-space-2);color:var(--cascivo-color-text-muted);display:flex}._pageSize_jwjfs_333 select{appearance:none;height:2rem;padding-inline:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);cursor:pointer;outline:none}._pageSize_jwjfs_333 select:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._range_jwjfs_359{color:var(--cascivo-color-text-muted);white-space:nowrap}._pageButtons_jwjfs_364{gap:var(--cascivo-space-1);display:flex}._pageButton_jwjfs_364{border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-control);cursor:pointer;block-size:2rem;inline-size:2rem;color:var(--cascivo-color-text);font-size:var(--cascivo-text-base);transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out), border-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;outline:none;justify-content:center;align-items:center;display:inline-flex}._pageButton_jwjfs_364:hover:not(:disabled){background-color:var(--cascivo-color-bg-subtle);border-color:var(--cascivo-color-border-strong)}._pageButton_jwjfs_364:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._pageButton_jwjfs_364:disabled{color:var(--cascivo-color-text-muted);cursor:not-allowed}._srOnly_jwjfs_405{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}}
+@layer cascivo.component{._root_ulang_2{--_row-height:3rem;font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-surface);background-color:var(--cascivo-color-surface);flex-direction:column;display:flex;overflow:hidden}._root_ulang_2[data-density=compact]{--_row-height:2.25rem}._root_ulang_2[data-density=normal]{--_row-height:3rem}._root_ulang_2[data-density=relaxed]{--_row-height:3.75rem}._toolbar_ulang_26{justify-content:space-between;align-items:flex-end;gap:var(--cascivo-space-4);padding:var(--cascivo-space-3) var(--cascivo-space-4);border-block-end:1px solid var(--cascivo-color-border);display:flex}._heading_ulang_35{gap:var(--cascivo-space-1);flex-direction:column;display:flex}._title_ulang_41{font-size:var(--cascivo-text-base);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text)}._description_ulang_47{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle)}._search_ulang_52{appearance:none;height:2rem;min-inline-size:14rem;padding-inline:var(--cascivo-space-3);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none}._search_ulang_52:hover:not(:focus){border-color:var(--cascivo-color-border-strong)}._search_ulang_52:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._batchBar_ulang_79{justify-content:space-between;align-items:center;gap:var(--cascivo-space-4);padding:var(--cascivo-space-2) var(--cascivo-space-4);background-color:var(--cascivo-color-bg-subtle);border-block-end:1px solid var(--cascivo-color-border);display:flex}._batchCount_ulang_89{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text)}._batchActions_ulang_95{gap:var(--cascivo-space-2);display:flex}._scroller_ulang_101{max-block-size:var(--cascivo-data-table-max-height,none);overflow:auto}._scrollerVirtualized_ulang_106{block-size:var(--cascivo-data-table-height,400px);max-block-size:none;overflow:auto}._table_ulang_112{border-collapse:collapse;table-layout:auto;inline-size:100%}._root_ulang_2[data-paginated=true][data-fixed-layout=true] ._table_ulang_112{table-layout:fixed}._table_ulang_112 thead th{padding-block:var(--cascivo-space-2);padding-inline:var(--cascivo-data-table-cell-gap,var(--cascivo-space-4));text-align:start;font-weight:var(--cascivo-font-semibold);font-size:var(--cascivo-text-xs);text-transform:uppercase;letter-spacing:var(--cascivo-tracking-wide);color:var(--cascivo-color-text-subtle);background-color:var(--cascivo-color-bg-subtle);border-block-end:1px solid var(--cascivo-color-border);white-space:nowrap}._table_ulang_112 thead th[data-align=end]{text-align:end}._table_ulang_112 td{padding-block:0;padding-inline:var(--cascivo-data-table-cell-gap,var(--cascivo-space-4));block-size:var(--_row-height);vertical-align:middle;border-block-end:1px solid var(--cascivo-color-border);color:var(--cascivo-color-text)}._table_ulang_112 td[data-sized],._table_ulang_112 th[data-sized]{overflow-wrap:anywhere}._table_ulang_112 td[data-align=end]{text-align:end}._table_ulang_112 tbody tr[data-filler-row] td{border-block-end:none}._root_ulang_2[data-sticky-header=true] ._table_ulang_112 thead th{z-index:var(--cascivo-z-raised,10);background-color:var(--cascivo-color-surface);position:sticky;inset-block-start:0}._root_ulang_2[data-zebra=true] ._table_ulang_112 tbody tr:nth-child(2n of ._row_ulang_182){background-color:var(--cascivo-color-bg-subtle)}._controlCol_ulang_188{inline-size:3rem}._controlCell_ulang_192{text-align:center;padding-inline:var(--cascivo-space-2)}._sortButton_ulang_198{align-items:center;gap:var(--cascivo-space-1);font-family:inherit;font-size:inherit;font-weight:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;background:0 0;border:none;outline:none;padding:0;display:inline-flex}._sortButton_ulang_198:focus-visible{text-decoration:underline}._sortButton_ulang_198:after{content:"↕";opacity:.4;font-size:.75em}._sortButton_ulang_198[data-state=ascending]:after{content:"↑";opacity:.9}._sortButton_ulang_198[data-state=descending]:after{content:"↓";opacity:.9}._row_ulang_182{content-visibility:auto;contain-intrinsic-size:auto var(--_row-height,3rem)}._row_ulang_182[data-state=selected] td{background-color:color-mix(in srgb, var(--cascivo-color-accent) 8%, transparent)}._emptyCell_ulang_246{padding:var(--cascivo-space-8) var(--cascivo-space-4);text-align:center;color:var(--cascivo-color-text-muted)}._expansionRow_ulang_253[data-state=closed]{display:none}._expansionGrid_ulang_259{overflow:hidden}._expansionInner_ulang_263{padding:var(--cascivo-space-4)}._expandButton_ulang_268{cursor:pointer;block-size:1.5rem;inline-size:1.5rem;color:var(--cascivo-color-text-muted);border-radius:var(--cascivo-radius-control);background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:inline-flex}._expandButton_ulang_268:focus-visible{box-shadow:0 0 0 2px var(--cascivo-color-accent)}._expandButton_ulang_268:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._chevron_ulang_291{block-size:.75rem;inline-size:.75rem;transition:transform var(--cascivo-duration-150) var(--cascivo-ease-out);border-block-end:2px solid;border-inline-end:2px solid;display:block;transform:rotate(45deg)}._expandButton_ulang_268[data-state=open] ._chevron_ulang_291{transform:rotate(-135deg)}._shimmer_ulang_306{background-color:var(--cascivo-color-bg-subtle);border-radius:var(--cascivo-radius-indicator);block-size:.875rem;inline-size:80%;display:block;position:relative;overflow:hidden}._shimmer_ulang_306:after{content:"";background:linear-gradient(90deg, transparent, var(--cascivo-color-surface), transparent);animation:_shimmer_ulang_306 var(--cascivo-duration-500,.5s) var(--cascivo-ease-in-out,ease-in-out) infinite;position:absolute;inset:0;translate:-100%}@keyframes _shimmer_ulang_306{to{translate:100%}}._footer_ulang_333{justify-content:flex-end;align-items:center;gap:var(--cascivo-space-4);padding:var(--cascivo-space-3) var(--cascivo-space-4);border-block-start:1px solid var(--cascivo-color-border);font-size:var(--cascivo-text-sm);display:flex}._pageSize_ulang_343{align-items:center;gap:var(--cascivo-space-2);color:var(--cascivo-color-text-muted);display:flex}._pageSize_ulang_343 select{appearance:none;height:2rem;padding-inline:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);cursor:pointer;outline:none}._pageSize_ulang_343 select:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._range_ulang_369{color:var(--cascivo-color-text-muted);white-space:nowrap}._pageButtons_ulang_374{gap:var(--cascivo-space-1);display:flex}._pageButton_ulang_374{border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-control);cursor:pointer;block-size:2rem;inline-size:2rem;color:var(--cascivo-color-text);font-size:var(--cascivo-text-base);transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out), border-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;outline:none;justify-content:center;align-items:center;display:inline-flex}._pageButton_ulang_374:hover:not(:disabled){background-color:var(--cascivo-color-bg-subtle);border-color:var(--cascivo-color-border-strong)}._pageButton_ulang_374:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._pageButton_ulang_374:disabled{color:var(--cascivo-color-text-muted);cursor:not-allowed}._srOnly_ulang_415{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}}

package/dist/data-table/data-table.js

@@ -4,9 +4,9 @@ import { Button as e } from "../button/button.js";
 import { Checkbox as t } from "../checkbox/checkbox.js";
 import n from "./data-table.module.js";
 import { batch as r, cn as i, useComputed as a, useSignal as o, useSignalEffect as ee, useSignals as te } from "@cascivo/core";
+import { Fragment as ne, useId as re, useRef as ie } from "react";
 import { builtin as s, t as c } from "@cascivo/i18n";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Fragment as ne, useId as re, useRef as ie } from "react";
 import { flushSync as ae } from "react-dom";
 //#region ../components/src/data-table/data-table.tsx
 function d(e, t) {
@@ -117,6 +117,7 @@ function f({ columns: f, rows: se, getRowId: ce, sort: p, defaultSort: le, sortM
 		"data-zebra": pe || void 0,
 		"data-sticky-header": me || void 0,
 		"data-paginated": h ? !0 : void 0,
+		"data-fixed-layout": f.every((e) => e.width !== void 0) || void 0,
 		children: [
 			/* @__PURE__ */ l("span", {
 				"aria-live": "polite",
@@ -176,7 +177,10 @@ function f({ columns: f, rows: se, getRowId: ce, sort: p, defaultSort: le, sortM
 						/* @__PURE__ */ u("colgroup", { children: [
 							v && /* @__PURE__ */ l("col", { className: n.controlCol }),
 							g && /* @__PURE__ */ l("col", { className: n.controlCol }),
-							f.map((e) => /* @__PURE__ */ l("col", { style: e.width === void 0 ? void 0 : { width: e.width } }, e.key))
+							f.map((e) => /* @__PURE__ */ l("col", { style: e.width !== void 0 || e.minWidth !== void 0 ? {
+								...e.width === void 0 ? {} : { width: e.width },
+								...e.minWidth === void 0 ? {} : { minWidth: e.minWidth }
+							} : void 0 }, e.key))
 						] }),
 						/* @__PURE__ */ l("thead", { children: /* @__PURE__ */ u("tr", { children: [
 							v && /* @__PURE__ */ l("th", {
@@ -205,6 +209,7 @@ function f({ columns: f, rows: se, getRowId: ce, sort: p, defaultSort: le, sortM
 								return /* @__PURE__ */ l("th", {
 									scope: "col",
 									"data-align": e.align ?? "start",
+									"data-sized": e.width !== void 0 || void 0,
 									"aria-sort": e.sortable ? r : void 0,
 									children: e.sortable ? /* @__PURE__ */ l("button", {
 										type: "button",
@@ -269,6 +274,7 @@ function f({ columns: f, rows: se, getRowId: ce, sort: p, defaultSort: le, sortM
 										}),
 										f.map((t) => /* @__PURE__ */ l("td", {
 											"data-align": t.align ?? "start",
+											"data-sized": t.width !== void 0 || void 0,
 											children: t.render ? t.render(e.row) : String(d(e.row, t.key) ?? "")
 										}, t.key))
 									]

package/dist/data-table/data-table.module.js

@@ -2,35 +2,35 @@
 
 import './data-table.css';
 var e = {
-	root: "_root_jwjfs_2",
-	toolbar: "_toolbar_jwjfs_26",
-	heading: "_heading_jwjfs_35",
-	title: "_title_jwjfs_41",
-	description: "_description_jwjfs_47",
-	search: "_search_jwjfs_52",
-	batchBar: "_batchBar_jwjfs_79",
-	batchCount: "_batchCount_jwjfs_89",
-	batchActions: "_batchActions_jwjfs_95",
-	scroller: "_scroller_jwjfs_101",
-	scrollerVirtualized: "_scrollerVirtualized_jwjfs_106",
-	table: "_table_jwjfs_112",
-	row: "_row_jwjfs_172",
-	controlCol: "_controlCol_jwjfs_178",
-	controlCell: "_controlCell_jwjfs_182",
-	sortButton: "_sortButton_jwjfs_188",
-	emptyCell: "_emptyCell_jwjfs_236",
-	expansionRow: "_expansionRow_jwjfs_243",
-	expansionGrid: "_expansionGrid_jwjfs_249",
-	expansionInner: "_expansionInner_jwjfs_253",
-	expandButton: "_expandButton_jwjfs_258",
-	chevron: "_chevron_jwjfs_281",
-	shimmer: "_shimmer_jwjfs_296",
-	footer: "_footer_jwjfs_323",
-	pageSize: "_pageSize_jwjfs_333",
-	range: "_range_jwjfs_359",
-	pageButtons: "_pageButtons_jwjfs_364",
-	pageButton: "_pageButton_jwjfs_364",
-	srOnly: "_srOnly_jwjfs_405"
+	root: "_root_ulang_2",
+	toolbar: "_toolbar_ulang_26",
+	heading: "_heading_ulang_35",
+	title: "_title_ulang_41",
+	description: "_description_ulang_47",
+	search: "_search_ulang_52",
+	batchBar: "_batchBar_ulang_79",
+	batchCount: "_batchCount_ulang_89",
+	batchActions: "_batchActions_ulang_95",
+	scroller: "_scroller_ulang_101",
+	scrollerVirtualized: "_scrollerVirtualized_ulang_106",
+	table: "_table_ulang_112",
+	row: "_row_ulang_182",
+	controlCol: "_controlCol_ulang_188",
+	controlCell: "_controlCell_ulang_192",
+	sortButton: "_sortButton_ulang_198",
+	emptyCell: "_emptyCell_ulang_246",
+	expansionRow: "_expansionRow_ulang_253",
+	expansionGrid: "_expansionGrid_ulang_259",
+	expansionInner: "_expansionInner_ulang_263",
+	expandButton: "_expandButton_ulang_268",
+	chevron: "_chevron_ulang_291",
+	shimmer: "_shimmer_ulang_306",
+	footer: "_footer_ulang_333",
+	pageSize: "_pageSize_ulang_343",
+	range: "_range_ulang_369",
+	pageButtons: "_pageButtons_ulang_374",
+	pageButton: "_pageButton_ulang_374",
+	srOnly: "_srOnly_ulang_415"
 };
 //#endregion
 export { e as default };

package/dist/date-picker/date-picker.css

@@ -1 +1 @@
-@layer cascivo.component{._wrapper_6chzy_2{gap:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);flex-direction:column;display:inline-flex;position:relative}._wrapper_6chzy_2[data-size=sm]{--_height:2rem;--_font:var(--cascivo-text-sm);--_px:var(--cascivo-space-3)}._wrapper_6chzy_2[data-size=md]{--_height:2.5rem;--_font:var(--cascivo-text-sm);--_px:var(--cascivo-space-4)}._wrapper_6chzy_2[data-size=lg]{--_height:3rem;--_font:var(--cascivo-text-base);--_px:var(--cascivo-space-4)}._label_6chzy_27{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-snug)}._field_6chzy_34{align-items:center;display:flex;position:relative}._trigger_6chzy_40{justify-content:space-between;align-items:center;gap:var(--cascivo-space-2);block-size:var(--_height,2.5rem);min-inline-size:12rem;padding-inline:var(--_px,var(--cascivo-space-4));font-family:var(--cascivo-font-sans);font-size:var(--_font,var(--cascivo-text-sm));color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);cursor:pointer;text-align:start;transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none;display:flex}._trigger_6chzy_40:hover:not(:disabled){border-color:var(--cascivo-color-border-strong)}._trigger_6chzy_40:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._trigger_6chzy_40:disabled{opacity:.5;cursor:not-allowed}._wrapper_6chzy_2[data-state=error] ._trigger_6chzy_40{border-color:var(--cascivo-color-danger)}._value_6chzy_78{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}._placeholder_6chzy_84{color:var(--cascivo-color-text-subtle)}._icon_6chzy_87{color:var(--cascivo-color-text-muted);font-style:normal}._clear_6chzy_92{cursor:pointer;min-block-size:1.5rem;min-inline-size:1.5rem;color:var(--cascivo-color-text-muted);font-size:var(--cascivo-text-xs);padding:var(--cascivo-space-1);border-radius:var(--cascivo-radius-control);background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-inline-end:var(--cascivo-space-8)}._clear_6chzy_92:hover{color:var(--cascivo-color-text)}._clear_6chzy_92:focus-visible{box-shadow:0 0 0 2px var(--cascivo-color-accent)}._calendar_6chzy_117{z-index:var(--cascivo-z-dropdown);padding:var(--cascivo-space-3);background-color:var(--cascivo-color-surface-overlay);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-overlay);opacity:0;visibility:hidden;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter), visibility var(--cascivo-motion-enter);position:absolute;inset-block-start:calc(100% + var(--cascivo-space-1));inset-inline-start:0;translate:0 -.25rem}._calendar_6chzy_117[data-state=open]{opacity:1;visibility:visible;translate:0}@starting-style{._calendar_6chzy_117[data-state=open]{opacity:0;translate:0 -.25rem}}._header_6chzy_149{justify-content:space-between;align-items:center;margin-block-end:var(--cascivo-space-2);display:flex}._monthLabel_6chzy_156{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text)}._navButton_6chzy_162{border-radius:var(--cascivo-radius-control);cursor:pointer;block-size:2rem;inline-size:2rem;color:var(--cascivo-color-text-muted);font-size:var(--cascivo-text-base);background:0 0;border:1px solid #0000;outline:none;justify-content:center;align-items:center;display:inline-flex}._navButton_6chzy_162:hover{background-color:var(--cascivo-color-bg-subtle);color:var(--cascivo-color-text)}._navButton_6chzy_162:focus-visible{border-color:var(--cascivo-color-accent)}._grid_6chzy_184{border-collapse:collapse;inline-size:100%}._weekday_6chzy_189{padding-block:var(--cascivo-space-1);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text-muted);text-align:center;inline-size:2.25rem}._cell_6chzy_198{text-align:center;padding:2px}._empty_6chzy_202{inline-size:2.25rem}._day_6chzy_206{block-size:2.25rem;inline-size:2.25rem;font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);border-radius:var(--cascivo-radius-control);cursor:pointer;background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:flex}._day_6chzy_206:hover:not([aria-disabled]){background-color:var(--cascivo-color-bg-subtle)}._day_6chzy_206:focus-visible{box-shadow:0 0 0 2px var(--cascivo-color-accent)}._day_6chzy_206[data-today]{font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-accent)}._day_6chzy_206[data-selected]{background-color:var(--cascivo-color-accent);color:var(--cascivo-color-accent-foreground,var(--cascivo-color-text-on-accent))}._day_6chzy_206[aria-disabled]{opacity:.35;cursor:not-allowed}._error_6chzy_241{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-danger)}._hint_6chzy_245{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted)}}
+@layer cascivo.component{._wrapper_1hgll_2{gap:var(--cascivo-space-1);min-inline-size:0;font-family:var(--cascivo-font-sans);flex-direction:column;display:inline-flex;position:relative}._wrapper_1hgll_2[data-size=sm]{--_height:2rem;--_font:var(--cascivo-text-sm);--_px:var(--cascivo-space-3)}._wrapper_1hgll_2[data-size=md]{--_height:2.5rem;--_font:var(--cascivo-text-sm);--_px:var(--cascivo-space-4)}._wrapper_1hgll_2[data-size=lg]{--_height:3rem;--_font:var(--cascivo-text-base);--_px:var(--cascivo-space-4)}._label_1hgll_31{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-snug)}._field_1hgll_38{align-items:center;display:flex;position:relative}._trigger_1hgll_44{justify-content:space-between;align-items:center;gap:var(--cascivo-space-2);block-size:var(--_height,2.5rem);min-inline-size:12rem;padding-inline:var(--_px,var(--cascivo-space-4));font-family:var(--cascivo-font-sans);font-size:var(--_font,var(--cascivo-text-sm));color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);cursor:pointer;text-align:start;transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none;display:flex}._trigger_1hgll_44:hover:not(:disabled){border-color:var(--cascivo-color-border-strong)}._trigger_1hgll_44:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._trigger_1hgll_44:disabled{opacity:.5;cursor:not-allowed}._wrapper_1hgll_2[data-state=error] ._trigger_1hgll_44{border-color:var(--cascivo-color-danger)}._value_1hgll_82{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}._placeholder_1hgll_88{color:var(--cascivo-color-text-subtle)}._icon_1hgll_91{color:var(--cascivo-color-text-muted);font-style:normal}._clear_1hgll_96{cursor:pointer;min-block-size:1.5rem;min-inline-size:1.5rem;color:var(--cascivo-color-text-muted);font-size:var(--cascivo-text-xs);padding:var(--cascivo-space-1);border-radius:var(--cascivo-radius-control);background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-inline-end:var(--cascivo-space-8)}._clear_1hgll_96:hover{color:var(--cascivo-color-text)}._clear_1hgll_96:focus-visible{box-shadow:0 0 0 2px var(--cascivo-color-accent)}._calendar_1hgll_121{z-index:var(--cascivo-z-dropdown);padding:var(--cascivo-space-3);background-color:var(--cascivo-color-surface-overlay);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-overlay);opacity:0;visibility:hidden;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter), visibility var(--cascivo-motion-enter);position:absolute;inset-block-start:calc(100% + var(--cascivo-space-1));inset-inline-start:0;translate:0 -.25rem}._calendar_1hgll_121[data-state=open]{opacity:1;visibility:visible;translate:0}@starting-style{._calendar_1hgll_121[data-state=open]{opacity:0;translate:0 -.25rem}}._header_1hgll_153{justify-content:space-between;align-items:center;margin-block-end:var(--cascivo-space-2);display:flex}._monthLabel_1hgll_160{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text)}._navButton_1hgll_166{border-radius:var(--cascivo-radius-control);cursor:pointer;block-size:2rem;inline-size:2rem;color:var(--cascivo-color-text-muted);font-size:var(--cascivo-text-base);background:0 0;border:1px solid #0000;outline:none;justify-content:center;align-items:center;display:inline-flex}._navButton_1hgll_166:hover{background-color:var(--cascivo-color-bg-subtle);color:var(--cascivo-color-text)}._navButton_1hgll_166:focus-visible{border-color:var(--cascivo-color-accent)}._grid_1hgll_188{border-collapse:collapse;inline-size:100%}._weekday_1hgll_193{padding-block:var(--cascivo-space-1);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text-muted);text-align:center;inline-size:2.25rem}._cell_1hgll_202{text-align:center;padding:2px}._empty_1hgll_206{inline-size:2.25rem}._day_1hgll_210{block-size:2.25rem;inline-size:2.25rem;font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);border-radius:var(--cascivo-radius-control);cursor:pointer;background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:flex}._day_1hgll_210:hover:not([aria-disabled]){background-color:var(--cascivo-color-bg-subtle)}._day_1hgll_210:focus-visible{box-shadow:0 0 0 2px var(--cascivo-color-accent)}._day_1hgll_210[data-today]{font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-accent)}._day_1hgll_210[data-selected]{background-color:var(--cascivo-color-accent);color:var(--cascivo-color-accent-foreground,var(--cascivo-color-text-on-accent))}._day_1hgll_210[aria-disabled]{opacity:.35;cursor:not-allowed}._error_1hgll_245{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-danger)}._hint_1hgll_249{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted)}}

package/dist/date-picker/date-picker.js

@@ -2,9 +2,9 @@
 
 import e from "./date-picker.module.js";
 import { batch as t, cn as n, createMachine as r, useMachine as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
-import { builtin as c, currentLocale as ee, t as l } from "@cascivo/i18n";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { useId as f, useRef as te } from "react";
+import { useId as c, useRef as ee } from "react";
+import { builtin as l, currentLocale as te, t as u } from "@cascivo/i18n";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region ../components/src/date-picker/date-picker.tsx
 var p = r({
 	initial: "closed",
@@ -41,9 +41,9 @@ function _(e) {
 }
 function v({ value: r, defaultValue: v, onValueChange: y, onChange: b, min: x, max: S, clearable: C = !1, label: w, hint: T, error: E, size: D = "md", disabled: O = !1, labels: k, className: re, id: A }) {
 	s();
-	let [j, M] = i(p), N = f(), P = A ?? `cascade-date-picker-${N}`, F = `${N}-grid`, I = ee(), ie = k?.placeholder ?? l(c.datePicker.placeholder), ae = k?.previousMonth ?? l(c.datePicker.previousMonth), L = k?.nextMonth ?? l(c.datePicker.nextMonth), R = k?.clear ?? l(c.datePicker.clear), z = /* @__PURE__ */ new Date(), B = g(z), V = a(r ?? v);
+	let [j, M] = i(p), N = c(), P = A ?? `cascade-date-picker-${N}`, F = `${N}-grid`, I = te(), ie = k?.placeholder ?? u(l.datePicker.placeholder), ae = k?.previousMonth ?? u(l.datePicker.previousMonth), L = k?.nextMonth ?? u(l.datePicker.nextMonth), R = k?.clear ?? u(l.datePicker.clear), z = /* @__PURE__ */ new Date(), B = g(z), V = a(r ?? v);
 	r !== void 0 && (V.value = r);
-	let H = a(V.value ? _(V.value).getUTCFullYear() : z.getUTCFullYear()), U = a(V.value ? _(V.value).getUTCMonth() : z.getUTCMonth()), W = a(V.value), G = te(null);
+	let H = a(V.value ? _(V.value).getUTCFullYear() : z.getUTCFullYear()), U = a(V.value ? _(V.value).getUTCMonth() : z.getUTCMonth()), W = a(V.value), G = ee(null);
 	o(() => {
 		if (j.value !== "open") return;
 		let e = (e) => {
@@ -94,20 +94,20 @@ function v({ value: r, defaultValue: v, onValueChange: y, onChange: b, min: x, m
 			});
 		}
 	}, $ = V.value ? h(_(V.value), I) : "";
-	return /* @__PURE__ */ d("div", {
+	return /* @__PURE__ */ f("div", {
 		ref: G,
 		className: n(e.wrapper, re),
 		"data-state": E ? "error" : j.value,
 		"data-size": D,
 		children: [
-			w && /* @__PURE__ */ u("label", {
+			w && /* @__PURE__ */ d("label", {
 				className: e.label,
 				htmlFor: P,
 				children: w
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ f("div", {
 				className: e.field,
-				children: [/* @__PURE__ */ d("button", {
+				children: [/* @__PURE__ */ f("button", {
 					id: P,
 					type: "button",
 					role: "combobox",
@@ -119,15 +119,15 @@ function v({ value: r, defaultValue: v, onValueChange: y, onChange: b, min: x, m
 					className: e.trigger,
 					disabled: O,
 					onClick: j.value === "open" ? q : K,
-					children: [/* @__PURE__ */ u("span", {
+					children: [/* @__PURE__ */ d("span", {
 						className: n(e.value, $ ? void 0 : e.placeholder),
 						children: $ || ie
-					}), /* @__PURE__ */ u("span", {
+					}), /* @__PURE__ */ d("span", {
 						className: e.icon,
 						"aria-hidden": "true",
 						children: "📅"
 					})]
-				}), C && V.value !== void 0 && /* @__PURE__ */ u("button", {
+				}), C && V.value !== void 0 && /* @__PURE__ */ d("button", {
 					type: "button",
 					className: e.clear,
 					"aria-label": R,
@@ -135,29 +135,29 @@ function v({ value: r, defaultValue: v, onValueChange: y, onChange: b, min: x, m
 					children: "✕"
 				})]
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ f("div", {
 				id: F,
 				role: "dialog",
 				"aria-label": Q,
 				className: e.calendar,
 				"data-state": j.value,
 				onKeyDown: de,
-				children: [/* @__PURE__ */ d("div", {
+				children: [/* @__PURE__ */ f("div", {
 					className: e.header,
 					children: [
-						/* @__PURE__ */ u("button", {
+						/* @__PURE__ */ d("button", {
 							type: "button",
 							className: e.navButton,
 							"aria-label": ae,
 							onClick: se,
 							children: "‹"
 						}),
-						/* @__PURE__ */ u("span", {
+						/* @__PURE__ */ d("span", {
 							className: e.monthLabel,
 							"aria-live": "polite",
 							children: Q
 						}),
-						/* @__PURE__ */ u("button", {
+						/* @__PURE__ */ d("button", {
 							type: "button",
 							className: e.navButton,
 							"aria-label": L,
@@ -165,20 +165,20 @@ function v({ value: r, defaultValue: v, onValueChange: y, onChange: b, min: x, m
 							children: "›"
 						})
 					]
-				}), /* @__PURE__ */ d("table", {
+				}), /* @__PURE__ */ f("table", {
 					role: "grid",
 					className: e.grid,
-					children: [/* @__PURE__ */ u("thead", { children: /* @__PURE__ */ u("tr", { children: ue.map((t) => /* @__PURE__ */ u("th", {
+					children: [/* @__PURE__ */ d("thead", { children: /* @__PURE__ */ d("tr", { children: ue.map((t) => /* @__PURE__ */ d("th", {
 						className: e.weekday,
 						abbr: t,
 						scope: "col",
 						children: t
-					}, t)) }) }), /* @__PURE__ */ u("tbody", { children: Z.map((t, n) => /* @__PURE__ */ u("tr", { children: t.map((t, n) => {
-						if (!t) return /* @__PURE__ */ u("td", { className: e.empty }, n);
+					}, t)) }) }), /* @__PURE__ */ d("tbody", { children: Z.map((t, n) => /* @__PURE__ */ d("tr", { children: t.map((t, n) => {
+						if (!t) return /* @__PURE__ */ d("td", { className: e.empty }, n);
 						let r = g(t), i = r === V.value, a = r === B, o = r === W.value, s = x !== void 0 && r < x || S !== void 0 && r > S;
-						return /* @__PURE__ */ u("td", {
+						return /* @__PURE__ */ d("td", {
 							className: e.cell,
-							children: /* @__PURE__ */ u("button", {
+							children: /* @__PURE__ */ d("button", {
 								type: "button",
 								className: e.day,
 								tabIndex: o ? 0 : -1,
@@ -200,13 +200,13 @@ function v({ value: r, defaultValue: v, onValueChange: y, onChange: b, min: x, m
 					}) }, n)) })]
 				})]
 			}),
-			E && /* @__PURE__ */ u("span", {
+			E && /* @__PURE__ */ d("span", {
 				id: `${N}-error`,
 				className: e.error,
 				role: "alert",
 				children: E
 			}),
-			!E && T && /* @__PURE__ */ u("span", {
+			!E && T && /* @__PURE__ */ d("span", {
 				id: `${N}-hint`,
 				className: e.hint,
 				children: T

package/dist/date-picker/date-picker.module.js

@@ -2,25 +2,25 @@
 
 import './date-picker.css';
 var e = {
-	wrapper: "_wrapper_6chzy_2",
-	label: "_label_6chzy_27",
-	field: "_field_6chzy_34",
-	trigger: "_trigger_6chzy_40",
-	value: "_value_6chzy_78",
-	placeholder: "_placeholder_6chzy_84",
-	icon: "_icon_6chzy_87",
-	clear: "_clear_6chzy_92",
-	calendar: "_calendar_6chzy_117",
-	header: "_header_6chzy_149",
-	monthLabel: "_monthLabel_6chzy_156",
-	navButton: "_navButton_6chzy_162",
-	grid: "_grid_6chzy_184",
-	weekday: "_weekday_6chzy_189",
-	cell: "_cell_6chzy_198",
-	empty: "_empty_6chzy_202",
-	day: "_day_6chzy_206",
-	error: "_error_6chzy_241",
-	hint: "_hint_6chzy_245"
+	wrapper: "_wrapper_1hgll_2",
+	label: "_label_1hgll_31",
+	field: "_field_1hgll_38",
+	trigger: "_trigger_1hgll_44",
+	value: "_value_1hgll_82",
+	placeholder: "_placeholder_1hgll_88",
+	icon: "_icon_1hgll_91",
+	clear: "_clear_1hgll_96",
+	calendar: "_calendar_1hgll_121",
+	header: "_header_1hgll_153",
+	monthLabel: "_monthLabel_1hgll_160",
+	navButton: "_navButton_1hgll_166",
+	grid: "_grid_1hgll_188",
+	weekday: "_weekday_1hgll_193",
+	cell: "_cell_1hgll_202",
+	empty: "_empty_1hgll_206",
+	day: "_day_1hgll_210",
+	error: "_error_1hgll_245",
+	hint: "_hint_1hgll_249"
 };
 //#endregion
 export { e as default };

package/dist/date-range-picker/date-range-picker.js

@@ -2,10 +2,10 @@
 
 import { Calendar as e } from "../calendar/calendar.js";
 import t from "./date-range-picker.module.js";
-import { batch as n, cn as r, useControllableSignal as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
-import { builtin as c, currentLocale as ee, t as l } from "@cascivo/i18n";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { useRef as f } from "react";
+import { batch as n, cn as r, useControllableSignal as ee, useSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
+import { useRef as s } from "react";
+import { builtin as c, currentLocale as l, t as u } from "@cascivo/i18n";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region ../components/src/date-range-picker/date-range-picker.tsx
 function p(e) {
 	return Date.UTC(e.getUTCFullYear(), e.getUTCMonth(), e.getUTCDate());
@@ -21,15 +21,15 @@ function h(e, t, n) {
 	};
 }
 function g({ value: g, defaultValue: _, onValueChange: te, min: v, max: y, disabled: b, presets: x, locale: S, placeholder: C, size: w = "md", labels: T, className: ne }) {
-	s();
-	let E = S ?? ee(), re = C ?? l(c.dateRangePicker.placeholder), D = T?.apply ?? l(c.dateRangePicker.apply), O = T?.clear ?? l(c.dateRangePicker.clear), k = T?.previousMonth ?? l(c.calendar.previousMonth), A = T?.nextMonth ?? l(c.calendar.nextMonth), [j, M] = i({
+	o();
+	let E = S ?? l(), re = C ?? u(c.dateRangePicker.placeholder), D = T?.apply ?? u(c.dateRangePicker.apply), O = T?.clear ?? u(c.dateRangePicker.clear), k = T?.previousMonth ?? u(c.calendar.previousMonth), A = T?.nextMonth ?? u(c.calendar.nextMonth), [j, M] = ee({
 		value: g === void 0 ? void 0 : g,
 		defaultValue: _ ?? null,
 		onChange: (e) => {
 			e && te?.(e);
 		}
-	}), N = a(!1), P = a(null), F = a(null), I = j.value?.start ?? _?.start ?? /* @__PURE__ */ new Date(), L = a(I.getUTCFullYear()), R = a(I.getUTCMonth()), z = f(null);
-	o(() => {
+	}), N = i(!1), P = i(null), F = i(null), I = j.value?.start ?? _?.start ?? /* @__PURE__ */ new Date(), L = i(I.getUTCFullYear()), R = i(I.getUTCMonth()), z = s(null);
+	a(() => {
 		if (!N.value) return;
 		let e = (e) => {
 			z.current && !z.current.contains(e.target) && (N.value = !1);
@@ -102,49 +102,49 @@ function g({ value: g, defaultValue: _, onValueChange: te, min: v, max: y, disab
 			nextMonth: A
 		}
 	};
-	return /* @__PURE__ */ d("div", {
+	return /* @__PURE__ */ f("div", {
 		ref: z,
 		className: r(t.wrapper, ne),
 		"data-size": w,
 		onKeyDown: (e) => {
 			e.key === "Escape" && N.value && (e.stopPropagation(), V());
 		},
-		children: [/* @__PURE__ */ d("button", {
+		children: [/* @__PURE__ */ f("button", {
 			type: "button",
 			role: "combobox",
 			"aria-expanded": N.value,
 			"aria-haspopup": "dialog",
-			"aria-label": T?.label ?? l(c.dateRangePicker.label),
+			"aria-label": T?.label ?? u(c.dateRangePicker.label),
 			className: t.trigger,
 			onClick: N.value ? V : B,
-			children: [/* @__PURE__ */ u("span", {
+			children: [/* @__PURE__ */ d("span", {
 				className: r(t.value, Z ? void 0 : t.placeholder),
 				children: Z || re
-			}), /* @__PURE__ */ u("span", {
+			}), /* @__PURE__ */ d("span", {
 				className: t.icon,
 				"aria-hidden": "true",
 				children: "📅"
 			})]
-		}), /* @__PURE__ */ d("div", {
+		}), /* @__PURE__ */ f("div", {
 			role: "dialog",
 			className: t.panel,
 			"data-state": N.value ? "open" : "closed",
 			children: [
-				x && x.length > 0 && /* @__PURE__ */ u("div", {
+				x && x.length > 0 && /* @__PURE__ */ d("div", {
 					className: t.presets,
-					children: x.map((e) => /* @__PURE__ */ u("button", {
+					children: x.map((e) => /* @__PURE__ */ d("button", {
 						type: "button",
 						className: t.preset,
 						onClick: () => W(e),
 						children: e.label
 					}, e.label))
 				}),
-				/* @__PURE__ */ d("div", {
+				/* @__PURE__ */ f("div", {
 					className: t.calendars,
 					children: [
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ d("div", {
 							className: t.calNav,
-							children: /* @__PURE__ */ u("button", {
+							children: /* @__PURE__ */ d("button", {
 								type: "button",
 								className: t.navButton,
 								"aria-label": k,
@@ -152,19 +152,19 @@ function g({ value: g, defaultValue: _, onValueChange: te, min: v, max: y, disab
 								children: "‹"
 							})
 						}),
-						/* @__PURE__ */ u(e, {
+						/* @__PURE__ */ d(e, {
 							month: R.value,
 							year: L.value,
 							...$
 						}),
-						/* @__PURE__ */ u(e, {
+						/* @__PURE__ */ d(e, {
 							month: Q.month,
 							year: Q.year,
 							...$
 						}),
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ d("div", {
 							className: t.calNav,
-							children: /* @__PURE__ */ u("button", {
+							children: /* @__PURE__ */ d("button", {
 								type: "button",
 								className: t.navButton,
 								"aria-label": A,
@@ -174,14 +174,14 @@ function g({ value: g, defaultValue: _, onValueChange: te, min: v, max: y, disab
 						})
 					]
 				}),
-				/* @__PURE__ */ d("div", {
+				/* @__PURE__ */ f("div", {
 					className: t.footer,
-					children: [/* @__PURE__ */ u("button", {
+					children: [/* @__PURE__ */ d("button", {
 						type: "button",
 						className: t.clearBtn,
 						onClick: G,
 						children: O
-					}), /* @__PURE__ */ u("button", {
+					}), /* @__PURE__ */ d("button", {
 						type: "button",
 						className: t.applyBtn,
 						onClick: V,

package/dist/drawer/drawer.css

@@ -1 +1 @@
-@layer cascivo.component{._overlay_cbcjg_2{z-index:var(--cascivo-z-overlay,50);opacity:1;transition:opacity var(--cascivo-motion-enter);background-color:#0006;display:flex;position:fixed;inset:0}._overlay_cbcjg_2[data-state=closed]{opacity:0;transition:opacity var(--cascivo-motion-exit)}@starting-style{._overlay_cbcjg_2[data-state=open]{opacity:0}}._overlay_cbcjg_2[data-side=end]{justify-content:flex-end;align-items:stretch}._overlay_cbcjg_2[data-side=start]{justify-content:flex-start;align-items:stretch}._overlay_cbcjg_2[data-side=top]{align-items:flex-start}._overlay_cbcjg_2[data-side=bottom]{align-items:flex-end}._panel_cbcjg_39{background:var(--cascivo-color-surface);box-shadow:var(--cascivo-shadow-overlay);transform:none;transform:translate(var(--_drawer-drag-x,0), var(--_drawer-drag-y,0));transition:translate var(--cascivo-motion-enter), transform var(--cascivo-motion-exit);flex-direction:column;display:flex}._panel_cbcjg_39[data-dragging]{transition:none}._overlay_cbcjg_2[data-state=closed] ._panel_cbcjg_39{transition:translate var(--cascivo-motion-exit)}._panel_cbcjg_39[data-side=end]{inline-size:var(--_drawer-size,min(24rem, 90vw));border-inline-start:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay) 0 0 var(--cascivo-radius-overlay);block-size:100%;translate:0}._overlay_cbcjg_2[data-state=closed] ._panel_cbcjg_39[data-side=end]{translate:100%}._panel_cbcjg_39[data-side=start]{inline-size:var(--_drawer-size,min(24rem, 90vw));border-inline-end:1px solid var(--cascivo-color-border);border-radius:0 var(--cascivo-radius-overlay) var(--cascivo-radius-overlay) 0;block-size:100%;translate:0}._overlay_cbcjg_2[data-state=closed] ._panel_cbcjg_39[data-side=start]{translate:-100%}._panel_cbcjg_39[data-side=top]{inline-size:100%;block-size:var(--_drawer-size,auto);border-block-end:1px solid var(--cascivo-color-border);border-radius:0 0 var(--cascivo-radius-overlay) var(--cascivo-radius-overlay);max-block-size:80vh;translate:0}._overlay_cbcjg_2[data-state=closed] ._panel_cbcjg_39[data-side=top]{translate:0 -100%}._panel_cbcjg_39[data-side=bottom]{inline-size:100%;block-size:var(--_drawer-size,auto);border-block-start:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay) var(--cascivo-radius-overlay) 0 0;max-block-size:80vh;translate:0}._overlay_cbcjg_2[data-state=closed] ._panel_cbcjg_39[data-side=bottom]{translate:0 100%}@starting-style{._overlay_cbcjg_2[data-state=open] ._panel_cbcjg_39[data-side=end]{translate:100%}._overlay_cbcjg_2[data-state=open] ._panel_cbcjg_39[data-side=start]{translate:-100%}._overlay_cbcjg_2[data-state=open] ._panel_cbcjg_39[data-side=top]{translate:0 -100%}._overlay_cbcjg_2[data-state=open] ._panel_cbcjg_39[data-side=bottom]{translate:0 100%}}._header_cbcjg_124{justify-content:space-between;align-items:flex-start;gap:var(--cascivo-space-4);padding:var(--cascivo-space-4) var(--cascivo-space-6);border-block-end:1px solid var(--cascivo-color-border);flex-shrink:0;display:flex}._heading_cbcjg_134{gap:var(--cascivo-space-1);flex-direction:column;display:flex}._title_cbcjg_140{font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);margin:0}._description_cbcjg_147{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);margin:0}._close_cbcjg_153{block-size:2rem;inline-size:2rem;color:var(--cascivo-color-text-muted);border-radius:var(--cascivo-radius-control);cursor:pointer;transition:color var(--cascivo-duration-150) var(--cascivo-ease-out), background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}._close_cbcjg_153:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._close_cbcjg_153:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._closeIcon_cbcjg_181{block-size:1rem;inline-size:1rem}._body_cbcjg_186{padding:var(--cascivo-space-6);flex:1;overflow-y:auto}@media (prefers-reduced-motion:reduce){._panel_cbcjg_39{transition:none}}}
+@layer cascivo.component{._overlay_1q94b_2{z-index:var(--cascivo-z-overlay,50);opacity:1;transition:opacity var(--cascivo-motion-enter);background-color:#0006;display:flex;position:fixed;inset:0}._overlay_1q94b_2[data-state=closed]{opacity:0;transition:opacity var(--cascivo-motion-exit)}@starting-style{._overlay_1q94b_2[data-state=open]{opacity:0}}._overlay_1q94b_2[data-side=end]{justify-content:flex-end;align-items:stretch}._overlay_1q94b_2[data-side=start]{justify-content:flex-start;align-items:stretch}._overlay_1q94b_2[data-side=top]{align-items:flex-start}._overlay_1q94b_2[data-side=bottom]{align-items:flex-end}._panel_1q94b_39{background:var(--cascivo-color-surface);box-shadow:var(--cascivo-shadow-overlay);transform:none;transform:translate(var(--_drawer-drag-x,0), var(--_drawer-drag-y,0));transition:translate var(--cascivo-motion-enter), transform var(--cascivo-motion-exit);flex-direction:column;display:flex}._panel_1q94b_39[data-dragging]{transition:none}._overlay_1q94b_2[data-state=closed] ._panel_1q94b_39{transition:translate var(--cascivo-motion-exit)}._panel_1q94b_39[data-side=end]{inline-size:var(--_drawer-size,min(24rem, 90vw));border-inline-start:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay) 0 0 var(--cascivo-radius-overlay);block-size:100%;translate:0}._overlay_1q94b_2[data-state=closed] ._panel_1q94b_39[data-side=end]{translate:100%}._panel_1q94b_39[data-side=start]{inline-size:var(--_drawer-size,min(24rem, 90vw));border-inline-end:1px solid var(--cascivo-color-border);border-radius:0 var(--cascivo-radius-overlay) var(--cascivo-radius-overlay) 0;block-size:100%;translate:0}._overlay_1q94b_2[data-state=closed] ._panel_1q94b_39[data-side=start]{translate:-100%}._panel_1q94b_39[data-side=top]{inline-size:100%;block-size:var(--_drawer-size,auto);border-block-end:1px solid var(--cascivo-color-border);border-radius:0 0 var(--cascivo-radius-overlay) var(--cascivo-radius-overlay);max-block-size:80vh;translate:0}._overlay_1q94b_2[data-state=closed] ._panel_1q94b_39[data-side=top]{translate:0 -100%}._panel_1q94b_39[data-side=bottom]{inline-size:100%;block-size:var(--_drawer-size,auto);border-block-start:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay) var(--cascivo-radius-overlay) 0 0;max-block-size:80vh;translate:0}._overlay_1q94b_2[data-state=closed] ._panel_1q94b_39[data-side=bottom]{translate:0 100%}@starting-style{._overlay_1q94b_2[data-state=open] ._panel_1q94b_39[data-side=end]{translate:100%}._overlay_1q94b_2[data-state=open] ._panel_1q94b_39[data-side=start]{translate:-100%}._overlay_1q94b_2[data-state=open] ._panel_1q94b_39[data-side=top]{translate:0 -100%}._overlay_1q94b_2[data-state=open] ._panel_1q94b_39[data-side=bottom]{translate:0 100%}}._header_1q94b_124{justify-content:space-between;align-items:flex-start;gap:var(--cascivo-space-4);padding:var(--cascivo-space-4) var(--cascivo-space-6);border-block-end:1px solid var(--cascivo-color-border);flex-shrink:0;display:flex}._heading_1q94b_134{gap:var(--cascivo-space-1);flex-direction:column;display:flex}._title_1q94b_140{font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);margin:0}._description_1q94b_147{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);margin:0}._close_1q94b_153{block-size:2rem;inline-size:2rem;color:var(--cascivo-color-text-muted);border-radius:var(--cascivo-radius-control);cursor:pointer;transition:color var(--cascivo-duration-150) var(--cascivo-ease-out), background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}._close_1q94b_153:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._close_1q94b_153:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._closeIcon_1q94b_181{block-size:1rem;inline-size:1rem}._body_1q94b_186{gap:var(--cascivo-dialog-body-gap,var(--cascivo-space-5));padding:var(--cascivo-space-6);flex-direction:column;flex:1;display:flex;overflow-y:auto}@media (prefers-reduced-motion:reduce){._panel_1q94b_39{transition:none}}}

package/dist/drawer/drawer.js

@@ -2,9 +2,9 @@
 
 import e from "./drawer.module.js";
 import { DismissableLayer as t, FocusScope as n, Portal as r, Presence as i, cn as a, useControllableSignal as o, useDraggable as s, useScrollLock as c, useSignals as l } from "@cascivo/core";
-import { builtin as u, t as d } from "@cascivo/i18n";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { useId as m } from "react";
+import { useId as u } from "react";
+import { builtin as d, t as f } from "@cascivo/i18n";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region ../components/src/drawer/drawer.tsx
 var h = 80;
 function g({ open: g, defaultOpen: _, onOpenChange: v, side: y = "end", size: b, title: x, description: S, children: C, labels: w, className: T, swipeToDismiss: E = !1 }) {
@@ -22,25 +22,25 @@ function g({ open: g, defaultOpen: _, onOpenChange: v, side: y = "end", size: b,
 			let t = k === "y" ? e.y : e.x, n = y === "end" && t > h || y === "start" && t < -80 || y === "bottom" && t > h || y === "top" && t < -80;
 			N(), n && O(!1);
 		}
-	}), P = m(), F = m(), I = w?.close ?? d(u.drawer.close), L = {
+	}), P = u(), F = u(), I = w?.close ?? f(d.drawer.close), L = {
 		...b ? { "--_drawer-size": b } : {},
 		...E ? {
 			"--_drawer-drag-x": `${j.value.x}px`,
 			"--_drawer-drag-y": `${j.value.y}px`
 		} : {}
 	};
-	return /* @__PURE__ */ f(r, { children: /* @__PURE__ */ f(i, {
+	return /* @__PURE__ */ p(r, { children: /* @__PURE__ */ p(i, {
 		present: D,
-		children: /* @__PURE__ */ f("div", {
+		children: /* @__PURE__ */ p("div", {
 			className: e.overlay,
 			"data-side": y,
-			children: /* @__PURE__ */ f(t, {
+			children: /* @__PURE__ */ p(t, {
 				onDismiss: () => O(!1),
-				children: /* @__PURE__ */ f(n, {
+				children: /* @__PURE__ */ p(n, {
 					trapped: !0,
 					restoreFocus: !0,
 					autoFocus: !0,
-					children: /* @__PURE__ */ p("div", {
+					children: /* @__PURE__ */ m("div", {
 						role: "dialog",
 						"aria-modal": "true",
 						"aria-labelledby": x ? P : void 0,
@@ -49,30 +49,30 @@ function g({ open: g, defaultOpen: _, onOpenChange: v, side: y = "end", size: b,
 						"data-dragging": E && M.value ? "" : void 0,
 						className: a(e.panel, T),
 						style: L,
-						children: [(x || S) && /* @__PURE__ */ p("div", {
+						children: [(x || S) && /* @__PURE__ */ m("div", {
 							className: e.header,
 							ref: E ? A : void 0,
-							children: [/* @__PURE__ */ p("div", {
+							children: [/* @__PURE__ */ m("div", {
 								className: e.heading,
-								children: [x && /* @__PURE__ */ f("h2", {
+								children: [x && /* @__PURE__ */ p("h2", {
 									id: P,
 									className: e.title,
 									children: x
-								}), S && /* @__PURE__ */ f("p", {
+								}), S && /* @__PURE__ */ p("p", {
 									id: F,
 									className: e.description,
 									children: S
 								})]
-							}), /* @__PURE__ */ f("button", {
+							}), /* @__PURE__ */ p("button", {
 								type: "button",
 								"aria-label": I,
 								onClick: () => O(!1),
 								className: e.close,
-								children: /* @__PURE__ */ f("svg", {
+								children: /* @__PURE__ */ p("svg", {
 									"aria-hidden": "true",
 									viewBox: "0 0 16 16",
 									className: e.closeIcon,
-									children: /* @__PURE__ */ f("path", {
+									children: /* @__PURE__ */ p("path", {
 										d: "M4 4l8 8M12 4l-8 8",
 										fill: "none",
 										stroke: "currentColor",
@@ -81,8 +81,9 @@ function g({ open: g, defaultOpen: _, onOpenChange: v, side: y = "end", size: b,
 									})
 								})
 							})]
-						}), /* @__PURE__ */ f("div", {
+						}), /* @__PURE__ */ p("div", {
 							className: e.body,
+							"data-cascivo-drawer-body": "",
 							children: C
 						})]
 					})