@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/components/toggle-group-field/toggle-group-field.js

@@ -1,3 +1,4 @@
+import { Field } from "../field/field.js";
 import { normalizeFieldErrors } from "../../lib/forms/errors.js";
 import { ToggleGroup } from "./toggle-group.js";
 import { c } from "react/compiler-runtime";
@@ -17,7 +18,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * />
 */
 var ToggleGroupField = (t0) => {
-	const $ = c(48);
+	const $ = c(49);
 	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, options, value, onValueChange, onBlur, name, disabled, readOnly, orientation, className } = t0;
 	const { descriptionId, errorId, describedBy } = ToggleGroup.useIds();
 	let t1;
@@ -29,97 +30,102 @@ var ToggleGroupField = (t0) => {
 	const invalid = t1.length > 0;
 	const t2 = value.length > 0;
 	let t3;
-	if ($[2] !== label || $[3] !== optionalLabel || $[4] !== requiredness) {
-		t3 = /* @__PURE__ */ jsx(ToggleGroup.Legend, {
-			requiredness,
-			optionalLabel,
-			children: label
-		});
-		$[2] = label;
-		$[3] = optionalLabel;
-		$[4] = requiredness;
+	if ($[2] !== optionalLabel) {
+		t3 = /* @__PURE__ */ jsx(Field.Requiredness, { optionalLabel });
+		$[2] = optionalLabel;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== label || $[5] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(ToggleGroup.Legend, { children: [
+			label,
+			" ",
+			t3
+		] });
+		$[4] = label;
 		$[5] = t3;
-	} else t3 = $[5];
-	const t4 = description !== void 0;
-	let t5;
-	if ($[6] !== describedBy || $[7] !== invalid || $[8] !== t4) {
-		t5 = describedBy(t4, invalid);
-		$[6] = describedBy;
-		$[7] = invalid;
-		$[8] = t4;
-		$[9] = t5;
-	} else t5 = $[9];
+		$[6] = t4;
+	} else t4 = $[6];
+	const t5 = description !== void 0;
 	let t6;
-	if ($[10] !== onValueChange) {
-		t6 = (next) => onValueChange(next);
-		$[10] = onValueChange;
-		$[11] = t6;
-	} else t6 = $[11];
+	if ($[7] !== describedBy || $[8] !== invalid || $[9] !== t5) {
+		t6 = describedBy(t5, invalid);
+		$[7] = describedBy;
+		$[8] = invalid;
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
 	let t7;
-	if ($[12] !== options || $[13] !== readOnly) {
-		let t8;
-		if ($[15] !== readOnly) {
-			t8 = (option) => /* @__PURE__ */ jsx(ToggleGroup.Option, {
+	if ($[11] !== onValueChange) {
+		t7 = (next) => onValueChange(next);
+		$[11] = onValueChange;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== options || $[14] !== readOnly) {
+		let t9;
+		if ($[16] !== readOnly) {
+			t9 = (option) => /* @__PURE__ */ jsx(ToggleGroup.Option, {
 				value: option.value,
 				readOnly,
 				disabled: option.disabled,
 				children: option.label
 			}, option.value);
-			$[15] = readOnly;
-			$[16] = t8;
-		} else t8 = $[16];
-		t7 = options.map(t8);
-		$[12] = options;
-		$[13] = readOnly;
-		$[14] = t7;
-	} else t7 = $[14];
-	let t8;
-	if ($[17] !== disabled || $[18] !== invalid || $[19] !== onBlur || $[20] !== orientation || $[21] !== readOnly || $[22] !== t5 || $[23] !== t6 || $[24] !== t7 || $[25] !== value) {
-		t8 = /* @__PURE__ */ jsx(ToggleGroup.Group, {
-			"aria-describedby": t5,
+			$[16] = readOnly;
+			$[17] = t9;
+		} else t9 = $[17];
+		t8 = options.map(t9);
+		$[13] = options;
+		$[14] = readOnly;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[18] !== disabled || $[19] !== invalid || $[20] !== onBlur || $[21] !== orientation || $[22] !== readOnly || $[23] !== t6 || $[24] !== t7 || $[25] !== t8 || $[26] !== value) {
+		t9 = /* @__PURE__ */ jsx(ToggleGroup.Group, {
+			"aria-describedby": t6,
 			readOnly,
 			invalid,
 			orientation,
 			disabled,
 			value,
-			onValueChange: t6,
+			onValueChange: t7,
 			onBlur,
-			children: t7
+			children: t8
 		});
-		$[17] = disabled;
-		$[18] = invalid;
-		$[19] = onBlur;
-		$[20] = orientation;
-		$[21] = readOnly;
-		$[22] = t5;
+		$[18] = disabled;
+		$[19] = invalid;
+		$[20] = onBlur;
+		$[21] = orientation;
+		$[22] = readOnly;
 		$[23] = t6;
 		$[24] = t7;
-		$[25] = value;
-		$[26] = t8;
-	} else t8 = $[26];
-	let t9;
-	if ($[27] !== description || $[28] !== descriptionId) {
-		t9 = /* @__PURE__ */ jsx(ToggleGroup.Description, {
+		$[25] = t8;
+		$[26] = value;
+		$[27] = t9;
+	} else t9 = $[27];
+	let t10;
+	if ($[28] !== description || $[29] !== descriptionId) {
+		t10 = /* @__PURE__ */ jsx(ToggleGroup.Description, {
 			id: descriptionId,
 			children: description
 		});
-		$[27] = description;
-		$[28] = descriptionId;
-		$[29] = t9;
-	} else t9 = $[29];
-	let t10;
-	if ($[30] !== errorId || $[31] !== errors) {
-		t10 = /* @__PURE__ */ jsx(ToggleGroup.Error, {
+		$[28] = description;
+		$[29] = descriptionId;
+		$[30] = t10;
+	} else t10 = $[30];
+	let t11;
+	if ($[31] !== errorId || $[32] !== errors) {
+		t11 = /* @__PURE__ */ jsx(ToggleGroup.Error, {
 			id: errorId,
 			children: errors
 		});
-		$[30] = errorId;
-		$[31] = errors;
-		$[32] = t10;
-	} else t10 = $[32];
-	let t11;
-	if ($[33] !== className || $[34] !== dirty || $[35] !== disabled || $[36] !== errors || $[37] !== name || $[38] !== pending || $[39] !== readOnly || $[40] !== requiredness || $[41] !== t10 || $[42] !== t2 || $[43] !== t3 || $[44] !== t8 || $[45] !== t9 || $[46] !== touched) {
-		t11 = /* @__PURE__ */ jsxs(ToggleGroup.Root, {
+		$[31] = errorId;
+		$[32] = errors;
+		$[33] = t11;
+	} else t11 = $[33];
+	let t12;
+	if ($[34] !== className || $[35] !== dirty || $[36] !== disabled || $[37] !== errors || $[38] !== name || $[39] !== pending || $[40] !== readOnly || $[41] !== requiredness || $[42] !== t10 || $[43] !== t11 || $[44] !== t2 || $[45] !== t4 || $[46] !== t9 || $[47] !== touched) {
+		t12 = /* @__PURE__ */ jsxs(ToggleGroup.Root, {
 			name,
 			className,
 			disabled,
@@ -131,28 +137,28 @@ var ToggleGroupField = (t0) => {
 			pending,
 			filled: t2,
 			children: [
-				t3,
-				t8,
+				t4,
 				t9,
-				t10
+				t10,
+				t11
 			]
 		});
-		$[33] = className;
-		$[34] = dirty;
-		$[35] = disabled;
-		$[36] = errors;
-		$[37] = name;
-		$[38] = pending;
-		$[39] = readOnly;
-		$[40] = requiredness;
-		$[41] = t10;
-		$[42] = t2;
-		$[43] = t3;
-		$[44] = t8;
-		$[45] = t9;
-		$[46] = touched;
-		$[47] = t11;
-	} else t11 = $[47];
-	return t11;
+		$[34] = className;
+		$[35] = dirty;
+		$[36] = disabled;
+		$[37] = errors;
+		$[38] = name;
+		$[39] = pending;
+		$[40] = readOnly;
+		$[41] = requiredness;
+		$[42] = t10;
+		$[43] = t11;
+		$[44] = t2;
+		$[45] = t4;
+		$[46] = t9;
+		$[47] = touched;
+		$[48] = t12;
+	} else t12 = $[48];
+	return t12;
 };
 export { ToggleGroupField };

package/dist/components/toggle-group-field/toggle-group.css

@@ -1,12 +1,12 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._group_wv37l_3 {
-    --_toggle-group-fill: var(
-    	--toggle-group-fill,
+  ._group_ci9uf_3 {
+    --_toggle-group-chip-pressed-bg: var(
+    	--toggle-group-chip-pressed-bg,
     	var(--sys-color-primary)
     );
-    --_toggle-group-on-fill: var(
-    	--toggle-group-on-fill,
+    --_toggle-group-chip-pressed-fg: var(
+    	--toggle-group-chip-pressed-fg,
     	var(--sys-color-on-primary)
     );
     position: relative;
@@ -18,131 +18,181 @@
     max-inline-size: 100%;
     isolation: isolate;
   }
-  ._group_wv37l_3[data-orientation=vertical] {
+  ._group_ci9uf_3[data-orientation=vertical] {
     flex-direction: column;
     align-items: flex-start;
   }
-  ._group_wv37l_3[data-disabled] {
-    --field-fg: var(--sys-color-disabled-fg);
-    --field-muted-fg: var(--sys-color-disabled-fg);
-    --field-placeholder-fg: var(--sys-color-disabled-fg);
-    color: var(--sys-color-disabled-fg);
+  ._group_ci9uf_3[data-disabled] {
+    --_field-fg: var(
+    	--field-disabled-fg,
+    	var(--sys-color-disabled-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-disabled-muted-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-disabled-placeholder-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    color: var(--field-disabled-fg, var(--sys-color-disabled-fg));
     cursor: not-allowed;
   }
-  ._group_wv37l_3[data-invalid] {
-    --_toggle-group-fill: var(--sys-color-error-fg);
-    --_toggle-group-on-fill: var(--sys-color-error-bg);
+  ._group_ci9uf_3[data-invalid] {
+    --_toggle-group-chip-pressed-bg: var(
+    	--toggle-group-chip-invalid-pressed-bg,
+    	var(--sys-color-error-fg)
+    );
+    --_toggle-group-chip-pressed-fg: var(
+    	--toggle-group-chip-invalid-pressed-fg,
+    	var(--sys-color-error-bg)
+    );
   }
-  ._option_wv37l_36 {
+  ._option_ci9uf_51 {
     position: relative;
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
     justify-content: center;
-    gap: var(--sys-unit-3);
+    gap: var(--toggle-group-chip-gap, var(--sys-unit-3));
     box-sizing: border-box;
     min-block-size: var(--toggle-group-chip-block-size, var(--sys-unit-20));
-    border: 1px solid transparent;
-    border-radius: var(--sys-radius-full);
+    border: var(--toggle-group-chip-border-width, var(--field-border-width, 1px)) solid var(--toggle-group-chip-border, transparent);
+    border-radius: var(--toggle-group-chip-radius, var(--sys-radius-full));
     background: var(--toggle-group-chip-bg, var(--sys-color-surface-high));
-    padding-inline: var(--toggle-group-chip-padding-inline, var(--sys-unit-10));
+    padding-inline: var(--toggle-group-chip-pad-x, var(--sys-unit-10));
     color: var(--toggle-group-chip-fg, var(--sys-color-text));
     font: var(--toggle-group-font, var(--sys-font-label-medium));
     cursor: pointer;
   }
-  ._option_wv37l_36 {
+  ._option_ci9uf_51 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._option_wv37l_36[data-focus-visible] {
+  ._option_ci9uf_51[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
   @media not (prefers-reduced-motion) {
-    ._option_wv37l_36 {
+    ._option_ci9uf_51 {
       transition: color var(--sys-motion-short) var(--sys-motion-standard), background-color var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._option_wv37l_36::before {
+  ._option_ci9uf_51::before {
     content: "";
     position: absolute;
     z-index: -1;
-    inset: calc(-1 * 1px - 0.5px);
+    inset: calc(-1 * var(--toggle-group-chip-border-width, var(--field-border-width, 1px)) - 0.5px);
     border-radius: inherit;
-    background: var(--_toggle-group-fill);
+    background: var(--_toggle-group-chip-pressed-bg);
     opacity: 0;
     scale: 0;
   }
   @media not (prefers-reduced-motion) {
-    ._option_wv37l_36::before {
+    ._option_ci9uf_51::before {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._option_wv37l_36:hover:not([data-pressed],
+  ._option_ci9uf_51:hover:not([data-pressed],
   [data-disabled],
   [data-readonly]) {
     background-color: var(--toggle-group-chip-hover-bg, var(--sys-color-surface-highest));
   }
-  ._option_wv37l_36[data-pressed] {
-    background-color: var(--_toggle-group-fill);
-    color: var(--_toggle-group-on-fill);
+  ._option_ci9uf_51[data-pressed] {
+    background-color: var(--_toggle-group-chip-pressed-bg);
+    color: var(--_toggle-group-chip-pressed-fg);
   }
   @media not (prefers-reduced-motion) {
-    ._option_wv37l_36[data-pressed] {
+    ._option_ci9uf_51[data-pressed] {
       transition: color var(--sys-motion-short) var(--sys-motion-standard), background-color 0s linear var(--sys-motion-short);
     }
   }
-  ._option_wv37l_36[data-pressed]::before {
+  ._option_ci9uf_51[data-pressed]::before {
     opacity: 1;
     scale: 1;
   }
   @media not (prefers-reduced-motion) {
-    ._option_wv37l_36[data-pressed]::before {
+    ._option_ci9uf_51[data-pressed]::before {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
     }
   }
-  ._group_wv37l_3[data-invalid] ._option_wv37l_36:not([data-pressed], [data-disabled]) {
-    --field-fg: var(--sys-color-error-fg);
-    --field-muted-fg: var(--sys-color-error-fg);
-    --field-placeholder-fg: var(--sys-color-error-fg);
-    border-color: var(--sys-color-error-fg);
-    background-color: var(--sys-color-error-bg);
-    color: var(--field-fg);
-  }
-  ._option_wv37l_36[data-readonly] {
-    --field-fg: var(--sys-color-text);
-    border-style: dashed;
-    border-color: var(--sys-color-outline);
-    background: var(--sys-color-surface-high);
-    color: var(--field-fg);
+  ._group_ci9uf_3[data-invalid] ._option_ci9uf_51:not([data-pressed], [data-disabled]) {
+    --_field-fg: var(
+    	--field-invalid-fg,
+    	var(--sys-color-error-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-invalid-muted-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-invalid-placeholder-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-fill: var(
+    	--field-invalid-bg,
+    	var(--sys-color-error-bg)
+    );
+    border-color: var(--field-invalid-border, var(--sys-color-error-fg));
+    background-color: var(--_field-fill);
+    color: var(--_field-fg);
+  }
+  ._option_ci9uf_51[data-readonly] {
+    --_field-fg: var(
+    	--field-readonly-fg,
+    	var(--sys-color-text)
+    );
+    --_field-fill: var(
+    	--field-readonly-bg,
+    	var(--sys-color-surface-high)
+    );
+    border-style: var(--field-readonly-border-style, dashed);
+    border-color: var(--field-readonly-border, var(--sys-color-outline));
+    background: var(--_field-fill);
+    color: var(--_field-fg);
     pointer-events: none;
   }
-  ._option_wv37l_36[data-readonly][data-pressed] {
-    --_toggle-group-fill: var(
-    	--sys-color-primary-container
+  ._option_ci9uf_51[data-readonly][data-pressed] {
+    --_toggle-group-chip-pressed-bg: var(
+    	--toggle-group-chip-readonly-pressed-bg,
+    	var(--sys-color-primary-container)
     );
-    --_toggle-group-on-fill: var(
-    	--sys-color-on-primary-container
+    --_toggle-group-chip-pressed-fg: var(
+    	--toggle-group-chip-readonly-pressed-fg,
+    	var(--sys-color-on-primary-container)
     );
-    background: var(--_toggle-group-fill);
-    color: var(--_toggle-group-on-fill);
+    background: var(--_toggle-group-chip-pressed-bg);
+    color: var(--_toggle-group-chip-pressed-fg);
   }
-  ._option_wv37l_36[data-readonly][data-pressed]::before {
+  ._option_ci9uf_51[data-readonly][data-pressed]::before {
     content: none;
   }
-  ._option_wv37l_36[data-disabled] {
-    --field-fg: var(--sys-color-disabled-fg);
-    --field-muted-fg: var(--sys-color-disabled-fg);
-    --field-placeholder-fg: var(--sys-color-disabled-fg);
-    color: var(--sys-color-disabled-fg);
+  ._option_ci9uf_51[data-disabled] {
+    --_field-fg: var(
+    	--field-disabled-fg,
+    	var(--sys-color-disabled-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-disabled-muted-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-disabled-placeholder-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    color: var(--field-disabled-fg, var(--sys-color-disabled-fg));
     cursor: not-allowed;
-    background-color: var(--sys-color-disabled-bg);
+    background-color: var(--toggle-group-chip-disabled-bg, var(--sys-color-disabled-bg));
   }
-  ._option_wv37l_36[data-disabled][data-pressed] {
-    --_toggle-group-fill: var(--sys-color-disabled-fg);
-    --_toggle-group-on-fill: var(
-    	--sys-color-disabled-bg
+  ._option_ci9uf_51[data-disabled][data-pressed] {
+    --_toggle-group-chip-pressed-bg: var(
+    	--toggle-group-chip-disabled-pressed-bg,
+    	var(--sys-color-disabled-fg)
+    );
+    --_toggle-group-chip-pressed-fg: var(
+    	--toggle-group-chip-disabled-pressed-fg,
+    	var(--sys-color-disabled-bg)
     );
-    background-color: var(--_toggle-group-fill);
-    color: var(--_toggle-group-on-fill);
+    background-color: var(--_toggle-group-chip-pressed-bg);
+    color: var(--_toggle-group-chip-pressed-fg);
   }
 }

package/dist/components/toggle-group-field/toggle-group.d.ts

@@ -32,8 +32,8 @@ export type ToggleGroupParts = Readonly<{
  * `Legend`. For the ordinary case, use `ToggleGroupField`.
  *
  * @example
- * <ToggleGroup.Root filled={days.length > 0}>
- * 	<ToggleGroup.Legend optionalLabel="optional">Days</ToggleGroup.Legend>
+ * <ToggleGroup.Root filled={days.length > 0} requiredness="optional">
+ * 	<ToggleGroup.Legend>Days <Field.Requiredness optionalLabel="optional" /></ToggleGroup.Legend>
  * 	<ToggleGroup.Group value={days} onValueChange={setDays}>
  * 		<ToggleGroup.Option value="mon">Monday</ToggleGroup.Option>
  * 		<ToggleGroup.Option value="tue">Tuesday</ToggleGroup.Option>

package/dist/components/toggle-group-field/toggle-group.js

@@ -136,8 +136,8 @@ var ToggleGroupOption = (t0) => {
 * `Legend`. For the ordinary case, use `ToggleGroupField`.
 *
 * @example
-* <ToggleGroup.Root filled={days.length > 0}>
-* 	<ToggleGroup.Legend optionalLabel="optional">Days</ToggleGroup.Legend>
+* <ToggleGroup.Root filled={days.length > 0} requiredness="optional">
+* 	<ToggleGroup.Legend>Days <Field.Requiredness optionalLabel="optional" /></ToggleGroup.Legend>
 * 	<ToggleGroup.Group value={days} onValueChange={setDays}>
 * 		<ToggleGroup.Option value="mon">Monday</ToggleGroup.Option>
 * 		<ToggleGroup.Option value="tue">Tuesday</ToggleGroup.Option>

package/dist/components/toggle-group-field/toggle-group.module.js

@@ -1,6 +1,6 @@
 import './toggle-group.css';// src/components/toggle-group-field/toggle-group.module.scss
-var group = "_group_wv37l_3";
-var option = "_option_wv37l_36";
+var group = "_group_ci9uf_3";
+var option = "_option_ci9uf_51";
 var toggle_group_module_default = {
 	group,
 	option

package/dist/components/tooltip/tooltip.css

@@ -1,21 +1,21 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._popup_1sb61_3 {
+  ._popup_1wrcs_3 {
     max-inline-size: var(--tooltip-max-inline-size, 18rem);
     border-radius: var(--tooltip-radius, var(--sys-radius-sm));
     background: var(--tooltip-bg, var(--sys-color-surface-overlay));
     box-shadow: var(--tooltip-shadow, var(--sys-elevation-1));
-    padding: var(--sys-unit-4) var(--sys-unit-6);
+    padding: var(--tooltip-pad-y, var(--sys-unit-4)) var(--tooltip-pad-x, var(--sys-unit-6));
     color: var(--tooltip-fg, var(--sys-color-text));
     font: var(--tooltip-font, var(--sys-font-body-small));
     transform-origin: var(--transform-origin);
   }
   @media not (prefers-reduced-motion) {
-    ._popup_1sb61_3 {
+    ._popup_1wrcs_3 {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._popup_1sb61_3[data-starting-style], ._popup_1sb61_3[data-ending-style] {
+  ._popup_1wrcs_3[data-starting-style], ._popup_1wrcs_3[data-ending-style] {
     opacity: 0;
     scale: 0.9;
   }

package/dist/components/tooltip/tooltip.module.js

@@ -1,4 +1,4 @@
 import './tooltip.css';// src/components/tooltip/tooltip.module.scss
-var popup = "_popup_1sb61_3";
+var popup = "_popup_1wrcs_3";
 var tooltip_module_default = { popup };
 export { tooltip_module_default as default, popup };

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

@@ -1,7 +1,7 @@
 import { Button } from "../components/button/button.js";
 import { Stale } from "../components/stale/stale.js";
 import { useDataTable } from "./data-table-context.js";
-import { Body, Cell, ErrorMessage, Frame, Head, HeaderCell, HeaderRow, LoadingCaption, PlaceholderRows, RefreshFailed, Row, Scroller, SortButton, StaleOverlay, StateRow, SubRow, Table, useDataTableView } from "./data-table-parts.js";
+import { Body, Cell, ErrorMessage, Frame, Head, HeaderCell, HeaderRow, LoadingCaption, PlaceholderRows, RefreshFailed, Row, Scroller, SortButton, SortIcon, StaleOverlay, StateRow, SubRow, Table, useDataTableView } from "./data-table-parts.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1 } from "react";
@@ -54,11 +54,12 @@ var DataTableContent = (t0) => {
 		if ($[15] !== sortAscendingIcon || $[16] !== sortDescendingIcon || $[17] !== table.FlexRender || $[18] !== unsortedIcon) {
 			t6 = (headerGroup) => /* @__PURE__ */ jsx(HeaderRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(HeaderCell, {
 				header,
-				children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsx(SortButton, {
+				children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs(SortButton, {
 					header,
-					sortAscendingIcon,
-					sortDescendingIcon,
-					unsortedIcon
+					children: [/* @__PURE__ */ jsx(table.FlexRender, { header }), /* @__PURE__ */ jsx(SortIcon, {
+						header,
+						children: (sort) => sort === "asc" ? sortAscendingIcon : sort === "desc" ? sortDescendingIcon : unsortedIcon
+					})]
 				}) : /* @__PURE__ */ jsx(table.FlexRender, { header })
 			}, header.id)) }, headerGroup.id);
 			$[15] = sortAscendingIcon;