@anguszhu/kroma-ui 0.1.0 → 0.2.0

package/dist/kroma-react.js

@@ -1,25 +1,25 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { createContext as n, useContext as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+import { createContext as r, useContext as i, useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
 //#region src/react/utils/cx.ts
-function c(...e) {
+function l(...e) {
 	return e.filter(Boolean).join(" ");
 }
 //#endregion
 //#region src/react/components/KrChevron.tsx
-function l({ className: t, ...n }) {
-	return /* @__PURE__ */ e("div", {
-		className: c("kr-chevron", t),
+function u({ className: e, ...n }) {
+	return /* @__PURE__ */ t("div", {
+		className: l("kr-chevron", e),
 		...n
 	});
 }
 //#endregion
 //#region src/react/components/KrEmpty.tsx
-var u = /* @__PURE__ */ t("svg", {
+var d = /* @__PURE__ */ n("svg", {
 	viewBox: "0 0 64 64",
 	fill: "none",
 	xmlns: "http://www.w3.org/2000/svg",
 	children: [
-		/* @__PURE__ */ e("rect", {
+		/* @__PURE__ */ t("rect", {
 			x: "10",
 			y: "24",
 			width: "44",
@@ -28,13 +28,13 @@ var u = /* @__PURE__ */ t("svg", {
 			stroke: "var(--kr-on-surface-tertiary)",
 			strokeWidth: "2"
 		}),
-		/* @__PURE__ */ e("path", {
+		/* @__PURE__ */ t("path", {
 			d: "M10 26L18 10H46L54 26",
 			stroke: "var(--kr-on-surface-tertiary)",
 			strokeWidth: "2",
 			strokeLinejoin: "round"
 		}),
-		/* @__PURE__ */ e("path", {
+		/* @__PURE__ */ t("path", {
 			d: "M24 34H40",
 			stroke: "var(--kr-theme)",
 			strokeWidth: "2",
@@ -42,20 +42,20 @@ var u = /* @__PURE__ */ t("svg", {
 		})
 	]
 });
-function d({ title: n, description: r, icon: i, className: a, ...o }) {
-	return /* @__PURE__ */ t("div", {
-		className: c("kr-empty", a),
+function f({ title: e, description: r, icon: i, className: a, ...o }) {
+	return /* @__PURE__ */ n("div", {
+		className: l("kr-empty", a),
 		...o,
 		children: [
-			/* @__PURE__ */ e("div", {
+			/* @__PURE__ */ t("div", {
 				className: "kr-empty__icon",
-				children: i ?? u
+				children: i ?? d
 			}),
-			/* @__PURE__ */ e("h1", {
+			/* @__PURE__ */ t("h1", {
 				className: "kr-empty__title",
-				children: n
+				children: e
 			}),
-			/* @__PURE__ */ e("p", {
+			/* @__PURE__ */ t("p", {
 				className: "kr-empty__description",
 				children: r
 			})
@@ -64,20 +64,20 @@ function d({ title: n, description: r, icon: i, className: a, ...o }) {
 }
 //#endregion
 //#region src/react/components/KrSection.tsx
-function f({ title: n, subtitle: r, className: i, children: a, ...o }) {
-	return /* @__PURE__ */ t("section", {
-		className: c("kr-section", i),
+function p({ title: e, subtitle: r, className: i, children: a, ...o }) {
+	return /* @__PURE__ */ n("section", {
+		className: l("kr-section", i),
 		...o,
-		children: [(n || r) && /* @__PURE__ */ t("header", {
+		children: [(e || r) && /* @__PURE__ */ n("header", {
 			className: "kr-section__header",
-			children: [n && /* @__PURE__ */ e("h1", {
+			children: [e && /* @__PURE__ */ t("h1", {
 				className: "kr-section__title",
-				children: n
-			}), r && /* @__PURE__ */ e("h2", {
+				children: e
+			}), r && /* @__PURE__ */ t("h2", {
 				className: "kr-section__subtitle",
 				children: r
 			})]
-		}), /* @__PURE__ */ e("div", {
+		}), /* @__PURE__ */ t("div", {
 			className: "kr-section__content",
 			children: a
 		})]
@@ -85,16 +85,16 @@ function f({ title: n, subtitle: r, className: i, children: a, ...o }) {
 }
 //#endregion
 //#region src/react/components/KrMenuItem.tsx
-function p({ title: n, value: r, disabled: i, type: a, icon: o, className: s, ...l }) {
-	return a === "divider" ? /* @__PURE__ */ e("hr", { className: c("kr-menu-item--divider", s) }) : /* @__PURE__ */ t("button", {
-		className: c("kr-menu-item", s),
+function m({ title: e, value: r, disabled: i, type: a, icon: o, className: s, ...c }) {
+	return a === "divider" ? /* @__PURE__ */ t("hr", { className: l("kr-menu-item--divider", s) }) : /* @__PURE__ */ n("button", {
+		className: l("kr-menu-item", s),
 		disabled: i,
 		role: "menuitem",
-		...l,
-		children: [/* @__PURE__ */ e("div", {
+		...c,
+		children: [/* @__PURE__ */ t("div", {
 			className: "kr-menu-item__content",
-			children: n
-		}), o && /* @__PURE__ */ e("div", {
+			children: e
+		}), o && /* @__PURE__ */ t("div", {
 			className: "kr-menu-item__icon",
 			"aria-hidden": "true",
 			children: o
@@ -103,115 +103,318 @@ function p({ title: n, value: r, disabled: i, type: a, icon: o, className: s, ..
 }
 //#endregion
 //#region src/react/components/KrButton.tsx
-function m({ type: t = "primary", className: n, children: r, ...i }) {
-	return /* @__PURE__ */ e("button", {
-		className: c("kr-button", `kr-button--${t}`, n),
+function h({ type: e = "primary", className: n, children: r, ...i }) {
+	return /* @__PURE__ */ t("button", {
+		className: l("kr-button", `kr-button--${e}`, n),
 		...i,
 		children: r
 	});
 }
 //#endregion
 //#region src/react/components/KrSwitch.tsx
-function h({ checked: n = !1, disabled: r = !1, inset: i = !1, className: a, ...o }) {
-	return /* @__PURE__ */ t("div", {
-		className: c("kr-switch", i && "kr-switch--inset", a),
-		"data-checked": n,
+function g({ checked: e = !1, disabled: r = !1, inset: i = !1, className: a, ...o }) {
+	return /* @__PURE__ */ n("div", {
+		className: l("kr-switch", i && "kr-switch--inset", a),
+		"data-checked": e,
 		"data-disabled": r,
 		"aria-hidden": "true",
 		...o,
-		children: [/* @__PURE__ */ e("div", { className: "kr-switch__track" }), /* @__PURE__ */ e("div", { className: "kr-switch__thumb" })]
+		children: [/* @__PURE__ */ t("div", { className: "kr-switch__track" }), /* @__PURE__ */ t("div", { className: "kr-switch__thumb" })]
 	});
 }
 //#endregion
 //#region src/react/components/KrToggleRow.tsx
-function g({ checked: n = !1, onCheckedChange: r, title: i, subtitle: a, disabled: o = !1, hideSeparator: s = !1, className: l, ...u }) {
+function _({ checked: e = !1, onCheckedChange: r, title: i, subtitle: a, disabled: o = !1, hideSeparator: s = !1, className: c, ...u }) {
 	function d(e) {
 		r?.(e.target.checked);
 	}
-	return /* @__PURE__ */ t("label", {
-		className: c("kr-toggle-row", !s && "kr-toggle-row--with-separator", o && "kr-toggle-row--disabled", l),
+	return /* @__PURE__ */ n("label", {
+		className: l("kr-toggle-row", !s && "kr-toggle-row--with-separator", o && "kr-toggle-row--disabled", c),
 		...u,
 		children: [
-			/* @__PURE__ */ e("input", {
+			/* @__PURE__ */ t("input", {
 				className: "kr-toggle-row__native",
 				type: "checkbox",
 				role: "switch",
-				checked: n,
+				checked: e,
 				disabled: o,
 				"aria-label": i,
 				onChange: d
 			}),
-			/* @__PURE__ */ t("div", {
+			/* @__PURE__ */ n("div", {
 				className: "kr-toggle-row__label",
-				children: [i && /* @__PURE__ */ e("div", {
+				children: [i && /* @__PURE__ */ t("div", {
 					className: "kr-toggle-row__title",
 					children: i
-				}), a && /* @__PURE__ */ e("div", {
+				}), a && /* @__PURE__ */ t("div", {
 					className: "kr-toggle-row__subtitle",
 					children: a
 				})]
 			}),
-			/* @__PURE__ */ e(h, {
-				checked: n,
+			/* @__PURE__ */ t(g, {
+				checked: e,
 				disabled: o
 			})
 		]
 	});
 }
 //#endregion
+//#region src/react/components/KrRadioRow.tsx
+function v({ checked: e = !1, onCheckedChange: r, name: i, value: a, title: o, subtitle: s, disabled: c = !1, hideSeparator: u = !1, className: d, ...f }) {
+	function p(e) {
+		r?.(e.target.checked);
+	}
+	return /* @__PURE__ */ n("label", {
+		className: l("kr-radio-row", !u && "kr-radio-row--with-separator", e && "kr-radio-row--checked", c && "kr-radio-row--disabled", d),
+		...f,
+		children: [
+			/* @__PURE__ */ t("input", {
+				className: "kr-radio-row__native",
+				type: "radio",
+				name: i,
+				value: a,
+				checked: e,
+				disabled: c,
+				"aria-label": o,
+				onChange: p
+			}),
+			/* @__PURE__ */ t("div", {
+				className: "kr-radio-row__radio",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ t("div", { className: "kr-radio-row__radio-dot" })
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "kr-radio-row__label",
+				children: [o && /* @__PURE__ */ t("div", {
+					className: "kr-radio-row__title",
+					children: o
+				}), s && /* @__PURE__ */ t("div", {
+					className: "kr-radio-row__subtitle",
+					children: s
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/react/components/KrCheckboxRow.tsx
+function y({ checked: e = !1, indeterminate: r = !1, onCheckedChange: i, name: o, value: c, title: u, subtitle: d, disabled: f = !1, hideSeparator: p = !1, className: m, ...h }) {
+	let g = s(null);
+	a(() => {
+		g.current && (g.current.indeterminate = r);
+	}, [r]);
+	function _(e) {
+		i?.(e.target.checked);
+	}
+	return /* @__PURE__ */ n("label", {
+		className: l("kr-checkbox-row", !p && "kr-checkbox-row--with-separator", e && "kr-checkbox-row--checked", r && "kr-checkbox-row--indeterminate", f && "kr-checkbox-row--disabled", m),
+		...h,
+		children: [
+			/* @__PURE__ */ t("input", {
+				ref: g,
+				className: "kr-checkbox-row__native",
+				type: "checkbox",
+				name: o,
+				value: c,
+				checked: e,
+				disabled: f,
+				"aria-label": u,
+				onChange: _
+			}),
+			/* @__PURE__ */ t("div", {
+				className: "kr-checkbox-row__checkbox",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ t("svg", {
+					className: "kr-checkbox-row__check",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					children: r ? /* @__PURE__ */ t("path", {
+						d: "M5 12h14",
+						stroke: "currentColor",
+						strokeWidth: "3",
+						strokeLinecap: "round"
+					}) : /* @__PURE__ */ t("path", {
+						d: "M20 6L9 17l-5-5",
+						stroke: "currentColor",
+						strokeWidth: "3",
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					})
+				})
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "kr-checkbox-row__label",
+				children: [u && /* @__PURE__ */ t("div", {
+					className: "kr-checkbox-row__title",
+					children: u
+				}), d && /* @__PURE__ */ t("div", {
+					className: "kr-checkbox-row__subtitle",
+					children: d
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/react/components/KrButtonRow.tsx
+function b({ title: e, subtitle: r, buttonLabel: i, buttonType: a = "secondary", onButtonClick: o, disabled: s = !1, hideSeparator: c = !1, className: u, ...d }) {
+	return /* @__PURE__ */ n("div", {
+		className: l("kr-button-row", !c && "kr-button-row--with-separator", s && "kr-button-row--disabled", u),
+		...d,
+		children: [/* @__PURE__ */ n("div", {
+			className: "kr-button-row__label",
+			children: [e && /* @__PURE__ */ t("div", {
+				className: "kr-button-row__title",
+				children: e
+			}), r && /* @__PURE__ */ t("div", {
+				className: "kr-button-row__subtitle",
+				children: r
+			})]
+		}), /* @__PURE__ */ t(h, {
+			className: "kr-button-row__button",
+			type: a,
+			disabled: s,
+			onClick: o,
+			children: i
+		})]
+	});
+}
+//#endregion
+//#region src/react/components/KrLinkRow.tsx
+var x = /* @__PURE__ */ n("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	width: "1em",
+	height: "1em",
+	children: [
+		/* @__PURE__ */ t("path", {
+			d: "M15 3h6v6",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ t("path", {
+			d: "M10 14L21 3",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ t("path", {
+			d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	]
+});
+function S({ title: r, subtitle: i, href: a, target: o = "_blank", rel: s = "noopener noreferrer", onClick: c, disabled: u = !1, hideSeparator: d = !1, icon: f, className: p }) {
+	let m = l("kr-link-row", !d && "kr-link-row--with-separator", u && "kr-link-row--disabled", p), h = /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ n("div", {
+		className: "kr-link-row__label",
+		children: [r && /* @__PURE__ */ t("div", {
+			className: "kr-link-row__title",
+			children: r
+		}), i && /* @__PURE__ */ t("div", {
+			className: "kr-link-row__subtitle",
+			children: i
+		})]
+	}), /* @__PURE__ */ t("div", {
+		className: "kr-link-row__icon",
+		"aria-hidden": "true",
+		children: f ?? x
+	})] });
+	return a ? /* @__PURE__ */ t("a", {
+		className: m,
+		href: u ? void 0 : a,
+		target: o,
+		rel: s,
+		"aria-disabled": u,
+		onClick: c,
+		children: h
+	}) : /* @__PURE__ */ t("button", {
+		type: "button",
+		className: m,
+		disabled: u,
+		onClick: c,
+		children: h
+	});
+}
+//#endregion
+//#region src/react/components/KrNavigationRow.tsx
+function C({ title: e, subtitle: r, disabled: i = !1, hideSeparator: a = !1, destructive: o = !1, className: s, ...c }) {
+	return /* @__PURE__ */ n("button", {
+		type: "button",
+		className: l("kr-navigation-row", !a && "kr-navigation-row--with-separator", o && "kr-navigation-row--destructive", i && "kr-navigation-row--disabled", s),
+		disabled: i,
+		...c,
+		children: [/* @__PURE__ */ n("div", {
+			className: "kr-navigation-row__label",
+			children: [e && /* @__PURE__ */ t("div", {
+				className: "kr-navigation-row__title",
+				children: e
+			}), r && /* @__PURE__ */ t("div", {
+				className: "kr-navigation-row__subtitle",
+				children: r
+			})]
+		}), /* @__PURE__ */ t(u, { className: "kr-navigation-row__chevron" })]
+	});
+}
+//#endregion
 //#region src/react/components/KrTextField.tsx
-function _({ value: n, onValueChange: r, label: i, error: a, autofocus: o, className: s, ...l }) {
+function w({ value: e, onValueChange: r, label: i, error: a, autofocus: o, className: s, ...c }) {
 	function u(e) {
 		r?.(e.target.value.trim());
 	}
-	return /* @__PURE__ */ t("label", {
-		className: c("kr-textfield", s),
-		children: [i && /* @__PURE__ */ e("span", {
+	return /* @__PURE__ */ n("label", {
+		className: l("kr-textfield", s),
+		children: [i && /* @__PURE__ */ t("span", {
 			className: "kr-textfield__label-text",
 			children: i
-		}), /* @__PURE__ */ e("input", {
+		}), /* @__PURE__ */ t("input", {
 			type: "text",
-			className: c("kr-textfield__input", a && "kr-textfield__input--error"),
-			value: n,
+			className: l("kr-textfield__input", a && "kr-textfield__input--error"),
+			value: e,
 			onChange: u,
 			autoFocus: o,
-			...l
+			...c
 		})]
 	});
 }
 //#endregion
 //#region src/react/components/KrSearchInput.tsx
-var v = /* @__PURE__ */ t("svg", {
+var T = /* @__PURE__ */ n("svg", {
 	viewBox: "0 0 24 24",
 	fill: "none",
 	width: "1em",
 	height: "1em",
-	children: [/* @__PURE__ */ e("circle", {
+	children: [/* @__PURE__ */ t("circle", {
 		cx: "11",
 		cy: "11",
 		r: "7",
 		stroke: "currentColor",
 		strokeWidth: "2"
-	}), /* @__PURE__ */ e("path", {
+	}), /* @__PURE__ */ t("path", {
 		d: "M20 20L16.65 16.65",
 		stroke: "currentColor",
 		strokeWidth: "2",
 		strokeLinecap: "round"
 	})]
-}), y = /* @__PURE__ */ e("svg", {
+}), E = /* @__PURE__ */ t("svg", {
 	viewBox: "0 0 24 24",
 	fill: "none",
 	width: "1em",
 	height: "1em",
-	children: /* @__PURE__ */ e("path", {
+	children: /* @__PURE__ */ t("path", {
 		d: "M6 6L18 18M18 6L6 18",
 		stroke: "currentColor",
 		strokeWidth: "2",
 		strokeLinecap: "round"
 	})
 });
-function b({ value: n = "", onValueChange: r, autofocus: i = !0, label: a = "Search", clearLabel: s = "Clear", icon: c, clearIcon: l }) {
-	let u = o(null);
+function D({ value: e = "", onValueChange: r, autofocus: i = !0, label: a = "Search", clearLabel: o = "Clear", icon: c, clearIcon: l }) {
+	let u = s(null);
 	function d(e) {
 		r?.(e), i && u.current?.focus();
 	}
@@ -224,62 +427,62 @@ function b({ value: n = "", onValueChange: r, autofocus: i = !0, label: a = "Sea
 	function m(e) {
 		e.key === "Enter" && p();
 	}
-	return /* @__PURE__ */ t("div", {
+	return /* @__PURE__ */ n("div", {
 		className: "kr-search-input",
 		children: [
-			/* @__PURE__ */ e("div", {
+			/* @__PURE__ */ t("div", {
 				className: "kr-search-input__icon",
-				children: c ?? v
+				children: c ?? T
 			}),
-			/* @__PURE__ */ e("input", {
+			/* @__PURE__ */ t("input", {
 				ref: u,
 				className: "kr-search-input__input",
 				type: "text",
-				value: n,
+				value: e,
 				onChange: f,
 				autoFocus: i,
 				"aria-label": a
 			}),
-			/* @__PURE__ */ e("div", {
+			/* @__PURE__ */ t("div", {
 				className: "kr-search-input__icon kr-search-input__icon--clear",
-				style: { display: n ? void 0 : "none" },
+				style: { display: e ? void 0 : "none" },
 				onClick: p,
 				role: "button",
 				tabIndex: 0,
-				"aria-label": s,
+				"aria-label": o,
 				onKeyDown: m,
-				children: l ?? y
+				children: l ?? E
 			})
 		]
 	});
 }
 //#endregion
 //#region src/react/components/KrSelectItem.tsx
-var x = n(null);
-function S({ value: n, label: i, title: a, selected: o, disabled: s, variant: l = "default", shape: u = "rounded", circle: d, stretch: f, showItemLabel: p = !0, onSelect: m, children: h }) {
-	let g = r(x), _ = (g?.value ?? o) === n, v = g?.variant ?? l, y = d ? "circle" : g?.shape ?? u, b = g?.showItemLabel ?? p ? i ?? a : "";
-	function S(e) {
-		s || (m?.(n), g?.onSelect(n));
+var O = r(null);
+function k({ value: e, label: r, title: a, selected: o, disabled: s, variant: c = "default", shape: u = "rounded", circle: d, stretch: f, showItemLabel: p = !0, onSelect: m, children: h }) {
+	let g = i(O), _ = (g?.value ?? o) === e, v = g?.variant ?? c, y = d ? "circle" : g?.shape ?? u, b = g?.showItemLabel ?? p ? r ?? a : "";
+	function x(t) {
+		s || (m?.(e), g?.onSelect(e));
 	}
-	return /* @__PURE__ */ t("label", {
-		className: c("kr-select-item", _ && "kr-select-item--selected", s && "kr-select-item--disabled", f && "kr-select-item--stretch", `kr-select-item--${v}`, `kr-select-item--${y}`),
+	return /* @__PURE__ */ n("label", {
+		className: l("kr-select-item", _ && "kr-select-item--selected", s && "kr-select-item--disabled", f && "kr-select-item--stretch", `kr-select-item--${v}`, `kr-select-item--${y}`),
 		title: a,
 		children: [
-			/* @__PURE__ */ e("input", {
+			/* @__PURE__ */ t("input", {
 				className: "kr-select-item__input",
 				type: "radio",
 				name: g?.name,
-				value: n,
+				value: e,
 				checked: _,
 				disabled: s,
-				"aria-label": i || a || String(n),
-				onChange: S
+				"aria-label": r || a || String(e),
+				onChange: x
 			}),
-			/* @__PURE__ */ e("div", {
+			/* @__PURE__ */ t("div", {
 				className: "kr-select-item__content",
 				children: h
 			}),
-			b && /* @__PURE__ */ e("div", {
+			b && /* @__PURE__ */ t("div", {
 				className: "kr-select-item__label",
 				children: b
 			})
@@ -288,8 +491,8 @@ function S({ value: n, label: i, title: a, selected: o, disabled: s, variant: l
 }
 //#endregion
 //#region src/react/components/KrSelectGroup.tsx
-function C({ title: n, subtitle: r, items: i, showItemLabel: o = !0, showTooltip: l = !0, value: u, onValueChange: d, hideSeparator: f, columns: p = "auto", gap: m = "12px", variant: h = "default", shape: g = "rounded", className: _, style: v, renderItem: y }) {
-	let [b] = s(() => `kr-select-group-${Math.random().toString(36).slice(2)}`), C = p === "auto" ? {
+function A({ title: e, subtitle: r, items: i, showItemLabel: a = !0, showTooltip: s = !0, value: u, onValueChange: d, hideSeparator: f, columns: p = "auto", gap: m = "12px", variant: h = "default", shape: g = "rounded", className: _, style: v, renderItem: y }) {
+	let [b] = c(() => `kr-select-group-${Math.random().toString(36).slice(2)}`), x = p === "auto" ? {
 		display: "flex",
 		flexWrap: "wrap",
 		gap: m
@@ -298,79 +501,79 @@ function C({ title: n, subtitle: r, items: i, showItemLabel: o = !0, showTooltip
 		gridTemplateColumns: `repeat(${p}, 1fr)`,
 		gap: m
 	};
-	function w(e) {
+	function S(e) {
 		d?.(e);
 	}
-	let T = a(() => ({
+	let C = o(() => ({
 		value: u,
 		variant: h,
 		shape: g,
-		showItemLabel: o,
+		showItemLabel: a,
 		name: b,
-		onSelect: w
+		onSelect: S
 	}), [
 		u,
 		h,
 		g,
-		o,
+		a,
 		b,
 		d
 	]);
-	return /* @__PURE__ */ t("div", {
-		className: c("kr-select-group", !f && "kr-select-group--with-separator", _),
+	return /* @__PURE__ */ n("div", {
+		className: l("kr-select-group", !f && "kr-select-group--with-separator", _),
 		style: v,
-		children: [(n || r) && /* @__PURE__ */ t("div", {
+		children: [(e || r) && /* @__PURE__ */ n("div", {
 			className: "kr-select-group__header",
-			children: [n && /* @__PURE__ */ e("div", {
+			children: [e && /* @__PURE__ */ t("div", {
 				className: "kr-select-group__header__title",
-				children: n
-			}), r && /* @__PURE__ */ e("div", {
+				children: e
+			}), r && /* @__PURE__ */ t("div", {
 				className: "kr-select-group__header__subtitle",
 				children: r
 			})]
-		}), /* @__PURE__ */ e("div", {
+		}), /* @__PURE__ */ t("div", {
 			className: "kr-select-group__items",
-			style: C,
-			children: /* @__PURE__ */ e(x.Provider, {
-				value: T,
-				children: y ? i.map((t) => /* @__PURE__ */ e("div", { children: y(t, u === t.value, w) }, t.value)) : i.map((t) => /* @__PURE__ */ e(S, {
-					value: t.value,
-					label: t.label,
+			style: x,
+			children: /* @__PURE__ */ t(O.Provider, {
+				value: C,
+				children: y ? i.map((e) => /* @__PURE__ */ t("div", { children: y(e, u === e.value, S) }, e.value)) : i.map((e) => /* @__PURE__ */ t(k, {
+					value: e.value,
+					label: e.label,
 					selected: u,
-					disabled: t.disabled,
+					disabled: e.disabled,
 					variant: h,
 					shape: g,
-					showItemLabel: o,
-					title: l ? t.label : void 0,
-					children: h === "color" ? /* @__PURE__ */ e("div", {
+					showItemLabel: a,
+					title: s ? e.label : void 0,
+					children: h === "color" ? /* @__PURE__ */ t("div", {
 						className: "kr-color-swatch",
-						style: { background: t.hex }
-					}) : h === "icon" && t.icon ? /* @__PURE__ */ e("svg", {
+						style: { background: e.hex }
+					}) : h === "icon" && e.icon ? /* @__PURE__ */ t("svg", {
 						className: "kr-select-item-icon",
 						viewBox: "0 0 32 32",
-						children: /* @__PURE__ */ e("path", { d: t.icon })
-					}) : t.label
-				}, t.value))
+						children: /* @__PURE__ */ t("path", { d: e.icon })
+					}) : e.label
+				}, e.value))
 			})
 		})]
 	});
 }
 //#endregion
 //#region src/react/hooks/useCssTransition.ts
-function w(e, t) {
-	let [n, r] = s(e ? "entered" : "left"), [a, l] = s(!1), u = o(null);
-	return i(() => {
-		r(e ? (e) => e === "entering" || e === "entered" ? e : (l(!0), "entering") : (e) => e === "leaving" || e === "left" ? e : (l(!1), "leaving"));
-	}, [e]), i(() => {
-		let e = n === "entering" && a ? !1 : n === "leaving" && !a || null;
+function j(e, t) {
+	let [n, r] = c(e ? "entered" : "left"), [i, o] = c(!1), u = s(null);
+	return a(() => {
+		r(e ? (e) => e === "entering" || e === "entered" ? e : (o(!0), "entering") : (e) => e === "leaving" || e === "left" ? e : (o(!1), "leaving"));
+	}, [e]), a(() => {
+		let e = n === "entering" && i ? !1 : n === "leaving" && !i || null;
 		if (e === null) return;
 		let t = -1, r = requestAnimationFrame(() => {
-			t = requestAnimationFrame(() => l(e));
+			t = requestAnimationFrame(() => o(e));
 		});
 		return () => {
 			cancelAnimationFrame(r), cancelAnimationFrame(t);
 		};
-	}, [n, a]), i(() => {
+	}, [n, i]), a(() => {
 		if (n !== "entering" && n !== "leaving") return;
 		let e = u.current;
 		if (!e) return;
@@ -380,32 +583,32 @@ function w(e, t) {
 		return e.addEventListener("transitionend", t), () => e.removeEventListener("transitionend", t);
 	}, [n]), {
 		shouldRender: n !== "left",
-		transitionClassName: n === "entering" ? c(`${t}-enter-active`, a && `${t}-enter-from`) : n === "leaving" ? c(`${t}-leave-active`, a && `${t}-leave-to`) : void 0,
+		transitionClassName: n === "entering" ? l(`${t}-enter-active`, i && `${t}-enter-from`) : n === "leaving" ? l(`${t}-leave-active`, i && `${t}-leave-to`) : void 0,
 		ref: u
 	};
 }
 //#endregion
 //#region src/react/components/KrOverlay.tsx
-function T({ show: n, onShowChange: r, centered: i = !1, background: a, contentStyle: o, contentTransition: s = "fade-in", children: l }) {
-	let { shouldRender: u, transitionClassName: d, ref: f } = w(n, `kr-${s}-content`);
-	return u ? /* @__PURE__ */ t("div", {
+function M({ show: e, onShowChange: r, centered: i = !1, background: a, contentStyle: o, contentTransition: s = "fade-in", children: c }) {
+	let { shouldRender: u, transitionClassName: d, ref: f } = j(e, `kr-${s}-content`);
+	return u ? /* @__PURE__ */ n("div", {
 		ref: f,
-		className: c("kr-overlay", i && "kr-overlay--centered", d),
+		className: l("kr-overlay", i && "kr-overlay--centered", d),
 		style: { "--kr-overlay-background": a },
 		role: "application",
-		children: [/* @__PURE__ */ e("div", {
+		children: [/* @__PURE__ */ t("div", {
 			className: "kr-overlay__scrim",
 			onClick: () => r?.(!1)
-		}), /* @__PURE__ */ e("div", {
+		}), /* @__PURE__ */ t("div", {
 			className: "kr-overlay__content",
 			style: o,
-			children: l
+			children: c
 		})]
 	}) : null;
 }
 //#endregion
 //#region src/core/toastTimer.ts
-function E(e) {
+function N(e) {
 	let t, n;
 	function r() {
 		t !== void 0 && (clearTimeout(t), t = void 0), n !== void 0 && (clearInterval(n), n = void 0);
@@ -426,38 +629,38 @@ function E(e) {
 }
 //#endregion
 //#region src/react/components/KrToast.tsx
-var D = /* @__PURE__ */ e("svg", {
+var P = /* @__PURE__ */ t("svg", {
 	viewBox: "0 0 24 24",
 	fill: "none",
 	width: "1em",
 	height: "1em",
-	children: /* @__PURE__ */ e("path", {
+	children: /* @__PURE__ */ t("path", {
 		d: "M20 6L9 17L4 12",
 		stroke: "currentColor",
 		strokeWidth: "2",
 		strokeLinecap: "round",
 		strokeLinejoin: "round"
 	})
-}), O = /* @__PURE__ */ t("svg", {
+}), F = /* @__PURE__ */ n("svg", {
 	viewBox: "0 0 24 24",
 	fill: "none",
 	width: "1em",
 	height: "1em",
 	children: [
-		/* @__PURE__ */ e("circle", {
+		/* @__PURE__ */ t("circle", {
 			cx: "12",
 			cy: "12",
 			r: "9",
 			stroke: "currentColor",
 			strokeWidth: "2"
 		}),
-		/* @__PURE__ */ e("path", {
+		/* @__PURE__ */ t("path", {
 			d: "M12 8V13",
 			stroke: "currentColor",
 			strokeWidth: "2",
 			strokeLinecap: "round"
 		}),
-		/* @__PURE__ */ e("circle", {
+		/* @__PURE__ */ t("circle", {
 			cx: "12",
 			cy: "16",
 			r: "1",
@@ -465,49 +668,49 @@ var D = /* @__PURE__ */ e("svg", {
 		})
 	]
 });
-function k({ show: n = !1, onShowChange: r, text: a, icon: l, iconContent: u, timeout: d = 3, actionText: f, onAction: p, showCountdown: m }) {
-	let [h, g] = s(d), _ = o(r);
+function I({ show: e = !1, onShowChange: r, text: i, icon: o, iconContent: u, timeout: d = 3, actionText: f, onAction: p, showCountdown: m }) {
+	let [h, g] = c(d), _ = s(r);
 	_.current = r;
-	let v = o(null);
-	v.current ||= E({
+	let v = s(null);
+	v.current ||= N({
 		onDismiss: () => _.current?.(!1),
 		onTick: (e) => g(e)
-	}), i(() => {
-		n ? v.current.start({
+	}), a(() => {
+		e ? v.current.start({
 			timeoutSeconds: d,
 			showCountdown: m
 		}) : v.current.clear();
-	}, [n]), i(() => () => v.current?.clear(), []);
-	let { shouldRender: y, transitionClassName: b, ref: x } = w(n, "kr-fade-in-up");
+	}, [e]), a(() => () => v.current?.clear(), []);
+	let { shouldRender: y, transitionClassName: b, ref: x } = j(e, "kr-fade-in-up");
 	function S(e) {
 		e.stopPropagation(), p?.(), _.current?.(!1);
 	}
 	function C() {
 		f || _.current?.(!1);
 	}
-	return y ? /* @__PURE__ */ t("div", {
+	return y ? /* @__PURE__ */ n("div", {
 		ref: x,
-		className: c("kr-toast", b),
+		className: l("kr-toast", b),
 		role: "status",
 		"aria-live": "polite",
 		onClick: C,
 		children: [
-			l && /* @__PURE__ */ e("div", {
+			o && /* @__PURE__ */ t("div", {
 				className: "kr-toast__icon",
-				children: u ?? (l === "success" ? D : O)
+				children: u ?? (o === "success" ? P : F)
 			}),
-			/* @__PURE__ */ e("div", {
+			/* @__PURE__ */ t("div", {
 				className: "kr-toast__text",
-				children: a
+				children: i
 			}),
-			f && /* @__PURE__ */ t("div", {
+			f && /* @__PURE__ */ n("div", {
 				className: "kr-toast__actions",
-				children: [/* @__PURE__ */ e("button", {
+				children: [/* @__PURE__ */ t("button", {
 					className: "kr-toast__action",
 					type: "button",
 					onClick: S,
 					children: f
-				}), m && /* @__PURE__ */ t("span", {
+				}), m && /* @__PURE__ */ n("span", {
 					className: "kr-toast__countdown",
 					"aria-hidden": "true",
 					children: [h, "s"]
@@ -518,21 +721,21 @@ function k({ show: n = !1, onShowChange: r, text: a, icon: l, iconContent: u, ti
 }
 //#endregion
 //#region src/core/focusTrap.ts
-function A(e) {
+function L(e) {
 	return Array.from(e?.querySelectorAll("button:not([disabled]), input:not([disabled])") ?? []);
 }
-function j(e) {
-	let t = A(e), n = t.findIndex((e) => e === document.activeElement);
+function R(e) {
+	let t = L(e), n = t.findIndex((e) => e === document.activeElement);
 	(n === t.length - 1 ? t[0] : t[n + 1])?.focus();
 }
-function M(e) {
-	let t = A(e), n = t.findIndex((e) => e === document.activeElement);
+function z(e) {
+	let t = L(e), n = t.findIndex((e) => e === document.activeElement);
 	(n <= 0 ? t[t.length - 1] : t[n - 1])?.focus();
 }
 //#endregion
 //#region src/react/components/KrDialog.tsx
-function N({ show: n = !1, onShowChange: r, title: i = "", text: a = "", actions: c = [], cancelText: l = "Cancel", hideCancel: u = !1, children: d }) {
-	let [f, p] = s(!1), h = o(null);
+function B({ show: e = !1, onShowChange: r, title: i = "", text: a = "", actions: o = [], cancelText: l = "Cancel", hideCancel: u = !1, children: d }) {
+	let [f, p] = c(!1), m = s(null);
 	function g() {
 		r?.(!1);
 	}
@@ -551,50 +754,50 @@ function N({ show: n = !1, onShowChange: r, title: i = "", text: a = "", actions
 			e.preventDefault(), r?.(!1);
 			return;
 		}
-		e.key === "Tab" && (e.preventDefault(), e.shiftKey ? M(h.current) : j(h.current));
+		e.key === "Tab" && (e.preventDefault(), e.shiftKey ? z(m.current) : R(m.current));
 	}
-	return /* @__PURE__ */ e(T, {
-		show: n,
+	return /* @__PURE__ */ t(M, {
+		show: e,
 		onShowChange: r,
 		centered: !0,
-		children: /* @__PURE__ */ t("dialog", {
-			ref: h,
+		children: /* @__PURE__ */ n("dialog", {
+			ref: m,
 			className: "kr-dialog",
-			open: n,
+			open: e,
 			onKeyDown: v,
 			children: [
-				i && /* @__PURE__ */ e("h2", {
+				i && /* @__PURE__ */ t("h2", {
 					className: "kr-dialog__title",
 					children: i
 				}),
-				/* @__PURE__ */ t("div", {
+				/* @__PURE__ */ n("div", {
 					className: "kr-dialog__content",
-					children: [a && /* @__PURE__ */ e("div", {
+					children: [a && /* @__PURE__ */ t("div", {
 						className: "kr-dialog__content__text",
 						children: a
-					}), d && /* @__PURE__ */ e("div", {
+					}), d && /* @__PURE__ */ t("div", {
 						className: "kr-dialog__content__form",
 						children: d
 					})]
 				}),
-				/* @__PURE__ */ t("div", {
+				/* @__PURE__ */ n("div", {
 					className: "kr-dialog__actions",
-					children: [!u && /* @__PURE__ */ e(m, {
+					children: [!u && /* @__PURE__ */ t(h, {
 						type: "secondary",
 						disabled: f,
 						onClick: g,
 						children: l
-					}), c.map((t) => /* @__PURE__ */ e(m, {
-						disabled: f || t.disabled,
-						onClick: () => _(t.action),
-						children: t.text
-					}, t.text))]
+					}), o.map((e) => /* @__PURE__ */ t(h, {
+						disabled: f || e.disabled,
+						onClick: () => _(e.action),
+						children: e.text
+					}, e.text))]
 				})
 			]
 		})
 	});
 }
 //#endregion
-export { m as KrButton, l as KrChevron, N as KrDialog, d as KrEmpty, p as KrMenuItem, T as KrOverlay, b as KrSearchInput, f as KrSection, C as KrSelectGroup, x as KrSelectGroupContext, S as KrSelectItem, h as KrSwitch, _ as KrTextField, k as KrToast, g as KrToggleRow };
+export { h as KrButton, b as KrButtonRow, y as KrCheckboxRow, u as KrChevron, B as KrDialog, f as KrEmpty, S as KrLinkRow, m as KrMenuItem, C as KrNavigationRow, M as KrOverlay, v as KrRadioRow, D as KrSearchInput, p as KrSection, A as KrSelectGroup, O as KrSelectGroupContext, k as KrSelectItem, g as KrSwitch, w as KrTextField, I as KrToast, _ as KrToggleRow };
 
 //# sourceMappingURL=kroma-react.js.map