@anguszhu/kroma-ui 0.1.0

package/dist/kroma-react.js

@@ -0,0 +1,600 @@
+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";
+//#region src/react/utils/cx.ts
+function c(...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),
+		...n
+	});
+}
+//#endregion
+//#region src/react/components/KrEmpty.tsx
+var u = /* @__PURE__ */ t("svg", {
+	viewBox: "0 0 64 64",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: [
+		/* @__PURE__ */ e("rect", {
+			x: "10",
+			y: "24",
+			width: "44",
+			height: "30",
+			rx: "4",
+			stroke: "var(--kr-on-surface-tertiary)",
+			strokeWidth: "2"
+		}),
+		/* @__PURE__ */ e("path", {
+			d: "M10 26L18 10H46L54 26",
+			stroke: "var(--kr-on-surface-tertiary)",
+			strokeWidth: "2",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ e("path", {
+			d: "M24 34H40",
+			stroke: "var(--kr-theme)",
+			strokeWidth: "2",
+			strokeLinecap: "round"
+		})
+	]
+});
+function d({ title: n, description: r, icon: i, className: a, ...o }) {
+	return /* @__PURE__ */ t("div", {
+		className: c("kr-empty", a),
+		...o,
+		children: [
+			/* @__PURE__ */ e("div", {
+				className: "kr-empty__icon",
+				children: i ?? u
+			}),
+			/* @__PURE__ */ e("h1", {
+				className: "kr-empty__title",
+				children: n
+			}),
+			/* @__PURE__ */ e("p", {
+				className: "kr-empty__description",
+				children: r
+			})
+		]
+	});
+}
+//#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),
+		...o,
+		children: [(n || r) && /* @__PURE__ */ t("header", {
+			className: "kr-section__header",
+			children: [n && /* @__PURE__ */ e("h1", {
+				className: "kr-section__title",
+				children: n
+			}), r && /* @__PURE__ */ e("h2", {
+				className: "kr-section__subtitle",
+				children: r
+			})]
+		}), /* @__PURE__ */ e("div", {
+			className: "kr-section__content",
+			children: a
+		})]
+	});
+}
+//#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),
+		disabled: i,
+		role: "menuitem",
+		...l,
+		children: [/* @__PURE__ */ e("div", {
+			className: "kr-menu-item__content",
+			children: n
+		}), o && /* @__PURE__ */ e("div", {
+			className: "kr-menu-item__icon",
+			"aria-hidden": "true",
+			children: o
+		})]
+	});
+}
+//#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),
+		...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,
+		"data-disabled": r,
+		"aria-hidden": "true",
+		...o,
+		children: [/* @__PURE__ */ e("div", { className: "kr-switch__track" }), /* @__PURE__ */ e("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 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),
+		...u,
+		children: [
+			/* @__PURE__ */ e("input", {
+				className: "kr-toggle-row__native",
+				type: "checkbox",
+				role: "switch",
+				checked: n,
+				disabled: o,
+				"aria-label": i,
+				onChange: d
+			}),
+			/* @__PURE__ */ t("div", {
+				className: "kr-toggle-row__label",
+				children: [i && /* @__PURE__ */ e("div", {
+					className: "kr-toggle-row__title",
+					children: i
+				}), a && /* @__PURE__ */ e("div", {
+					className: "kr-toggle-row__subtitle",
+					children: a
+				})]
+			}),
+			/* @__PURE__ */ e(h, {
+				checked: n,
+				disabled: o
+			})
+		]
+	});
+}
+//#endregion
+//#region src/react/components/KrTextField.tsx
+function _({ value: n, onValueChange: r, label: i, error: a, autofocus: o, className: s, ...l }) {
+	function u(e) {
+		r?.(e.target.value.trim());
+	}
+	return /* @__PURE__ */ t("label", {
+		className: c("kr-textfield", s),
+		children: [i && /* @__PURE__ */ e("span", {
+			className: "kr-textfield__label-text",
+			children: i
+		}), /* @__PURE__ */ e("input", {
+			type: "text",
+			className: c("kr-textfield__input", a && "kr-textfield__input--error"),
+			value: n,
+			onChange: u,
+			autoFocus: o,
+			...l
+		})]
+	});
+}
+//#endregion
+//#region src/react/components/KrSearchInput.tsx
+var v = /* @__PURE__ */ t("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	width: "1em",
+	height: "1em",
+	children: [/* @__PURE__ */ e("circle", {
+		cx: "11",
+		cy: "11",
+		r: "7",
+		stroke: "currentColor",
+		strokeWidth: "2"
+	}), /* @__PURE__ */ e("path", {
+		d: "M20 20L16.65 16.65",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round"
+	})]
+}), y = /* @__PURE__ */ e("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	width: "1em",
+	height: "1em",
+	children: /* @__PURE__ */ e("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(e) {
+		r?.(e), i && u.current?.focus();
+	}
+	function f(e) {
+		d(e.target.value);
+	}
+	function p() {
+		d("");
+	}
+	function m(e) {
+		e.key === "Enter" && p();
+	}
+	return /* @__PURE__ */ t("div", {
+		className: "kr-search-input",
+		children: [
+			/* @__PURE__ */ e("div", {
+				className: "kr-search-input__icon",
+				children: c ?? v
+			}),
+			/* @__PURE__ */ e("input", {
+				ref: u,
+				className: "kr-search-input__input",
+				type: "text",
+				value: n,
+				onChange: f,
+				autoFocus: i,
+				"aria-label": a
+			}),
+			/* @__PURE__ */ e("div", {
+				className: "kr-search-input__icon kr-search-input__icon--clear",
+				style: { display: n ? void 0 : "none" },
+				onClick: p,
+				role: "button",
+				tabIndex: 0,
+				"aria-label": s,
+				onKeyDown: m,
+				children: l ?? y
+			})
+		]
+	});
+}
+//#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));
+	}
+	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}`),
+		title: a,
+		children: [
+			/* @__PURE__ */ e("input", {
+				className: "kr-select-item__input",
+				type: "radio",
+				name: g?.name,
+				value: n,
+				checked: _,
+				disabled: s,
+				"aria-label": i || a || String(n),
+				onChange: S
+			}),
+			/* @__PURE__ */ e("div", {
+				className: "kr-select-item__content",
+				children: h
+			}),
+			b && /* @__PURE__ */ e("div", {
+				className: "kr-select-item__label",
+				children: b
+			})
+		]
+	});
+}
+//#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" ? {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: m
+	} : {
+		display: "grid",
+		gridTemplateColumns: `repeat(${p}, 1fr)`,
+		gap: m
+	};
+	function w(e) {
+		d?.(e);
+	}
+	let T = a(() => ({
+		value: u,
+		variant: h,
+		shape: g,
+		showItemLabel: o,
+		name: b,
+		onSelect: w
+	}), [
+		u,
+		h,
+		g,
+		o,
+		b,
+		d
+	]);
+	return /* @__PURE__ */ t("div", {
+		className: c("kr-select-group", !f && "kr-select-group--with-separator", _),
+		style: v,
+		children: [(n || r) && /* @__PURE__ */ t("div", {
+			className: "kr-select-group__header",
+			children: [n && /* @__PURE__ */ e("div", {
+				className: "kr-select-group__header__title",
+				children: n
+			}), r && /* @__PURE__ */ e("div", {
+				className: "kr-select-group__header__subtitle",
+				children: r
+			})]
+		}), /* @__PURE__ */ e("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,
+					selected: u,
+					disabled: t.disabled,
+					variant: h,
+					shape: g,
+					showItemLabel: o,
+					title: l ? t.label : void 0,
+					children: h === "color" ? /* @__PURE__ */ e("div", {
+						className: "kr-color-swatch",
+						style: { background: t.hex }
+					}) : h === "icon" && t.icon ? /* @__PURE__ */ e("svg", {
+						className: "kr-select-item-icon",
+						viewBox: "0 0 32 32",
+						children: /* @__PURE__ */ e("path", { d: t.icon })
+					}) : t.label
+				}, t.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;
+		if (e === null) return;
+		let t = -1, r = requestAnimationFrame(() => {
+			t = requestAnimationFrame(() => l(e));
+		});
+		return () => {
+			cancelAnimationFrame(r), cancelAnimationFrame(t);
+		};
+	}, [n, a]), i(() => {
+		if (n !== "entering" && n !== "leaving") return;
+		let e = u.current;
+		if (!e) return;
+		function t(t) {
+			t.target === e && r((e) => e === "entering" ? "entered" : e === "leaving" ? "left" : e);
+		}
+		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,
+		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", {
+		ref: f,
+		className: c("kr-overlay", i && "kr-overlay--centered", d),
+		style: { "--kr-overlay-background": a },
+		role: "application",
+		children: [/* @__PURE__ */ e("div", {
+			className: "kr-overlay__scrim",
+			onClick: () => r?.(!1)
+		}), /* @__PURE__ */ e("div", {
+			className: "kr-overlay__content",
+			style: o,
+			children: l
+		})]
+	}) : null;
+}
+//#endregion
+//#region src/core/toastTimer.ts
+function E(e) {
+	let t, n;
+	function r() {
+		t !== void 0 && (clearTimeout(t), t = void 0), n !== void 0 && (clearInterval(n), n = void 0);
+	}
+	function i({ timeoutSeconds: i, showCountdown: a }) {
+		if (r(), e.onTick?.(Math.max(0, Math.ceil(i))), i <= 0) return;
+		let o = Date.now() + i * 1e3;
+		t = setTimeout(() => {
+			e.onDismiss();
+		}, i * 1e3), a && (n = setInterval(() => {
+			e.onTick?.(Math.max(0, Math.ceil((o - Date.now()) / 1e3)));
+		}, 200));
+	}
+	return {
+		start: i,
+		clear: r
+	};
+}
+//#endregion
+//#region src/react/components/KrToast.tsx
+var D = /* @__PURE__ */ e("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	width: "1em",
+	height: "1em",
+	children: /* @__PURE__ */ e("path", {
+		d: "M20 6L9 17L4 12",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	})
+}), O = /* @__PURE__ */ t("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	width: "1em",
+	height: "1em",
+	children: [
+		/* @__PURE__ */ e("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9",
+			stroke: "currentColor",
+			strokeWidth: "2"
+		}),
+		/* @__PURE__ */ e("path", {
+			d: "M12 8V13",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ e("circle", {
+			cx: "12",
+			cy: "16",
+			r: "1",
+			fill: "currentColor"
+		})
+	]
+});
+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);
+	_.current = r;
+	let v = o(null);
+	v.current ||= E({
+		onDismiss: () => _.current?.(!1),
+		onTick: (e) => g(e)
+	}), i(() => {
+		n ? 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");
+	function S(e) {
+		e.stopPropagation(), p?.(), _.current?.(!1);
+	}
+	function C() {
+		f || _.current?.(!1);
+	}
+	return y ? /* @__PURE__ */ t("div", {
+		ref: x,
+		className: c("kr-toast", b),
+		role: "status",
+		"aria-live": "polite",
+		onClick: C,
+		children: [
+			l && /* @__PURE__ */ e("div", {
+				className: "kr-toast__icon",
+				children: u ?? (l === "success" ? D : O)
+			}),
+			/* @__PURE__ */ e("div", {
+				className: "kr-toast__text",
+				children: a
+			}),
+			f && /* @__PURE__ */ t("div", {
+				className: "kr-toast__actions",
+				children: [/* @__PURE__ */ e("button", {
+					className: "kr-toast__action",
+					type: "button",
+					onClick: S,
+					children: f
+				}), m && /* @__PURE__ */ t("span", {
+					className: "kr-toast__countdown",
+					"aria-hidden": "true",
+					children: [h, "s"]
+				})]
+			})
+		]
+	}) : null;
+}
+//#endregion
+//#region src/core/focusTrap.ts
+function A(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);
+	(n === t.length - 1 ? t[0] : t[n + 1])?.focus();
+}
+function M(e) {
+	let t = A(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 g() {
+		r?.(!1);
+	}
+	async function _(e) {
+		if (!f) {
+			p(!0);
+			try {
+				await e();
+			} finally {
+				p(!1);
+			}
+		}
+	}
+	function v(e) {
+		if (e.key === "Escape") {
+			e.preventDefault(), r?.(!1);
+			return;
+		}
+		e.key === "Tab" && (e.preventDefault(), e.shiftKey ? M(h.current) : j(h.current));
+	}
+	return /* @__PURE__ */ e(T, {
+		show: n,
+		onShowChange: r,
+		centered: !0,
+		children: /* @__PURE__ */ t("dialog", {
+			ref: h,
+			className: "kr-dialog",
+			open: n,
+			onKeyDown: v,
+			children: [
+				i && /* @__PURE__ */ e("h2", {
+					className: "kr-dialog__title",
+					children: i
+				}),
+				/* @__PURE__ */ t("div", {
+					className: "kr-dialog__content",
+					children: [a && /* @__PURE__ */ e("div", {
+						className: "kr-dialog__content__text",
+						children: a
+					}), d && /* @__PURE__ */ e("div", {
+						className: "kr-dialog__content__form",
+						children: d
+					})]
+				}),
+				/* @__PURE__ */ t("div", {
+					className: "kr-dialog__actions",
+					children: [!u && /* @__PURE__ */ e(m, {
+						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))]
+				})
+			]
+		})
+	});
+}
+//#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 };
+
+//# sourceMappingURL=kroma-react.js.map