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

package/dist/components/select-field/select.js

@@ -1,21 +1,19 @@
-import SvgCheck from "../../vendor/@material-design-icons/svg/outlined/check.js";
-import SvgExpandMore from "../../vendor/@material-design-icons/svg/outlined/expand_more.js";
 import { usePopupEdgePadding } from "../../lib/popup-edge-padding.js";
 import { Button } from "../button/button.js";
 import { Field } from "../field/field.js";
 import { fieldStateAttributes } from "../field/field-state.js";
 import { useFieldFocus, withFieldFocus } from "../field/use-field-focus.js";
 import { OPTIONS_LOADED, optionsLoadMessage } from "../field/options-load.js";
-import { Icon } from "../icon/icon.js";
 import { Spinner } from "../spinner/spinner.js";
 import { SelectContext, useSelectContext } from "./select-context.js";
 import select_module_default from "./select.module.js";
 import { c } from "react/compiler-runtime";
-import { useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { Select } from "@base-ui/react/select";
 // src/components/select-field/select.tsx
+/** The select's state, holding the options every part below it reads. */
 var SelectRoot = (t0) => {
 	const $ = c(15);
 	let onValueChange;
@@ -70,6 +68,7 @@ var SelectRoot = (t0) => {
 	} else t4 = $[14];
 	return t4;
 };
+/** The label that names the trigger. */
 var SelectLabel = (t0) => {
 	const $ = c(8);
 	let className;
@@ -102,67 +101,97 @@ var SelectLabel = (t0) => {
 	return t2;
 };
 var NO_STATE = {};
+/** The chevron after the trigger's value. Its children are the icon; without them it renders nothing. */
+var SelectIcon = (t0) => {
+	const $ = c(8);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== children || $[5] !== className || $[6] !== props) {
+		t1 = children === void 0 || children === null || children === false ? null : /* @__PURE__ */ jsx(Select.Icon, {
+			className: clsx(select_module_default.icon, className),
+			...props,
+			children
+		});
+		$[4] = children;
+		$[5] = className;
+		$[6] = props;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
+};
+/** The button that opens the list. Without children it shows the value, the pending mark and `icon`. */
 var SelectTrigger = (t0) => {
-	const $ = c(22);
+	const $ = c(24);
 	let children;
 	let className;
+	let icon;
 	let placeholder;
 	let props;
 	let t1;
 	if ($[0] !== t0) {
-		({placeholder, state: t1, className, children, ...props} = t0);
+		({placeholder, state: t1, icon, className, children, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
-		$[3] = placeholder;
-		$[4] = props;
-		$[5] = t1;
+		$[3] = icon;
+		$[4] = placeholder;
+		$[5] = props;
+		$[6] = t1;
 	} else {
 		children = $[1];
 		className = $[2];
-		placeholder = $[3];
-		props = $[4];
-		t1 = $[5];
+		icon = $[3];
+		placeholder = $[4];
+		props = $[5];
+		t1 = $[6];
 	}
 	const state = t1 === void 0 ? NO_STATE : t1;
 	const focus = useFieldFocus(props);
 	const t2 = state.validity === "invalid" || void 0;
 	let t3;
-	if ($[6] !== className) {
+	if ($[7] !== className) {
 		t3 = clsx(select_module_default.trigger, className);
-		$[6] = className;
-		$[7] = t3;
-	} else t3 = $[7];
+		$[7] = className;
+		$[8] = t3;
+	} else t3 = $[8];
 	let t4;
-	if ($[8] !== focus || $[9] !== state) {
+	if ($[9] !== focus || $[10] !== state) {
 		t4 = fieldStateAttributes(withFieldFocus(state, focus));
-		$[8] = focus;
-		$[9] = state;
-		$[10] = t4;
-	} else t4 = $[10];
+		$[9] = focus;
+		$[10] = state;
+		$[11] = t4;
+	} else t4 = $[11];
 	let t5;
-	if ($[11] !== children || $[12] !== placeholder || $[13] !== state.pending) {
-		t5 = children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	if ($[12] !== children || $[13] !== icon || $[14] !== placeholder || $[15] !== state.pending) {
+		t5 = children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(Select.Value, {
 				className: select_module_default.value,
 				placeholder
 			}),
 			state.pending === true && /* @__PURE__ */ jsx(Field.Pending, {}),
-			/* @__PURE__ */ jsx(Select.Icon, {
-				className: select_module_default.icon,
-				children: /* @__PURE__ */ jsx(Icon, {
-					svg: SvgExpandMore,
-					label: ""
-				})
-			})
+			/* @__PURE__ */ jsx(SelectIcon, { children: icon })
 		] });
-		$[11] = children;
-		$[12] = placeholder;
-		$[13] = state.pending;
-		$[14] = t5;
-	} else t5 = $[14];
+		$[12] = children;
+		$[13] = icon;
+		$[14] = placeholder;
+		$[15] = state.pending;
+		$[16] = t5;
+	} else t5 = $[16];
 	let t6;
-	if ($[15] !== focus.props || $[16] !== props || $[17] !== t2 || $[18] !== t3 || $[19] !== t4 || $[20] !== t5) {
+	if ($[17] !== focus.props || $[18] !== props || $[19] !== t2 || $[20] !== t3 || $[21] !== t4 || $[22] !== t5) {
 		t6 = /* @__PURE__ */ jsx(Select.Trigger, {
 			"aria-invalid": t2,
 			className: t3,
@@ -171,16 +200,17 @@ var SelectTrigger = (t0) => {
 			...focus.props,
 			children: t5
 		});
-		$[15] = focus.props;
-		$[16] = props;
-		$[17] = t2;
-		$[18] = t3;
-		$[19] = t4;
-		$[20] = t5;
-		$[21] = t6;
-	} else t6 = $[21];
+		$[17] = focus.props;
+		$[18] = props;
+		$[19] = t2;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+		$[23] = t6;
+	} else t6 = $[23];
 	return t6;
 };
+/** Places the popup against the trigger. */
 var SelectPositioner = (t0) => {
 	const $ = c(13);
 	let className;
@@ -227,6 +257,7 @@ var SelectPositioner = (t0) => {
 	} else t5 = $[12];
 	return t5;
 };
+/** The shared popup surface the list sits on. */
 var SelectPopup = (t0) => {
 	const $ = c(8);
 	let className;
@@ -258,76 +289,130 @@ var SelectPopup = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** One option's row, holding its `ItemText` and `ItemIndicator`. */
 var SelectItem = (t0) => {
-	const $ = c(13);
-	let children;
+	const $ = c(8);
 	let className;
 	let props;
 	if ($[0] !== t0) {
-		({className, children, ...props} = t0);
+		({className, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
+		$[1] = className;
+		$[2] = props;
 	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
+		className = $[1];
+		props = $[2];
 	}
 	let t1;
-	if ($[4] !== className) {
+	if ($[3] !== className) {
 		t1 = clsx(select_module_default.item, className);
-		$[4] = className;
-		$[5] = t1;
-	} else t1 = $[5];
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[6] !== children) {
-		t2 = /* @__PURE__ */ jsx(Select.ItemText, {
-			className: select_module_default.itemText,
-			children
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Select.Item, {
+			className: t1,
+			...props
 		});
-		$[6] = children;
+		$[5] = props;
+		$[6] = t1;
 		$[7] = t2;
 	} else t2 = $[7];
-	let t3;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsx(Select.ItemIndicator, {
-			className: select_module_default.indicator,
-			children: /* @__PURE__ */ jsx(Icon, {
-				svg: SvgCheck,
-				label: ""
-			})
+	return t2;
+};
+/** An option's text, which the trigger shows once it is chosen. */
+var SelectItemText = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(select_module_default.itemText, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Select.ItemText, {
+			className: t1,
+			...props
 		});
-		$[8] = t3;
-	} else t3 = $[8];
-	let t4;
-	if ($[9] !== props || $[10] !== t1 || $[11] !== t2) {
-		t4 = /* @__PURE__ */ jsxs(Select.Item, {
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** The mark beside the chosen option. Its children are the mark, such as a tick. */
+var SelectItemIndicator = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(select_module_default.indicator, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Select.ItemIndicator, {
 			className: t1,
-			...props,
-			children: [t2, t3]
+			...props
 		});
-		$[9] = props;
-		$[10] = t1;
-		$[11] = t2;
-		$[12] = t4;
-	} else t4 = $[12];
-	return t4;
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 };
 /**
 * Every option of the enclosing `Select.Root`, in the order it was given them.
 * Compose the parts directly instead where a row is more than its label.
 */
-var SelectItems = () => {
-	const $ = c(2);
+var SelectItems = (t0) => {
+	const $ = c(5);
+	const { checkIcon } = t0;
 	const { options } = useSelectContext();
-	let t0;
-	if ($[0] !== options) {
-		t0 = options.map(_temp);
-		$[0] = options;
-		$[1] = t0;
-	} else t0 = $[1];
-	return t0;
+	let t1;
+	if ($[0] !== checkIcon || $[1] !== options) {
+		let t2;
+		if ($[3] !== checkIcon) {
+			t2 = (option) => /* @__PURE__ */ jsxs(SelectItem, {
+				value: option.value,
+				children: [/* @__PURE__ */ jsxs(SelectItemText, { children: [option.label, option.detail !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: select_module_default.itemDetail,
+					children: option.detail
+				})] }), /* @__PURE__ */ jsx(SelectItemIndicator, { children: checkIcon })]
+			}, option.value);
+			$[3] = checkIcon;
+			$[4] = t2;
+		} else t2 = $[4];
+		t1 = options.map(t2);
+		$[0] = checkIcon;
+		$[1] = options;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 };
 var SelectStatus = (t0) => {
 	const $ = c(14);
@@ -393,7 +478,8 @@ var SelectStatus = (t0) => {
 * select takes. Reach for the parts where the list needs anything else.
 */
 var SelectControl = (t0) => {
-	const $ = c(24);
+	const $ = c(27);
+	let checkIcon;
 	let loadBrokenLabel;
 	let loadFailedLabel;
 	let loadingLabel;
@@ -402,42 +488,44 @@ var SelectControl = (t0) => {
 	let retryLabel;
 	let t1;
 	if ($[0] !== t0) {
-		({load: t1, loadingLabel, loadFailedLabel, loadBrokenLabel, retryLabel, noOptionsLabel, ...props} = t0);
+		({load: t1, loadingLabel, loadFailedLabel, loadBrokenLabel, retryLabel, noOptionsLabel, checkIcon, ...props} = t0);
 		$[0] = t0;
-		$[1] = loadBrokenLabel;
-		$[2] = loadFailedLabel;
-		$[3] = loadingLabel;
-		$[4] = noOptionsLabel;
-		$[5] = props;
-		$[6] = retryLabel;
-		$[7] = t1;
+		$[1] = checkIcon;
+		$[2] = loadBrokenLabel;
+		$[3] = loadFailedLabel;
+		$[4] = loadingLabel;
+		$[5] = noOptionsLabel;
+		$[6] = props;
+		$[7] = retryLabel;
+		$[8] = t1;
 	} else {
-		loadBrokenLabel = $[1];
-		loadFailedLabel = $[2];
-		loadingLabel = $[3];
-		noOptionsLabel = $[4];
-		props = $[5];
-		retryLabel = $[6];
-		t1 = $[7];
+		checkIcon = $[1];
+		loadBrokenLabel = $[2];
+		loadFailedLabel = $[3];
+		loadingLabel = $[4];
+		noOptionsLabel = $[5];
+		props = $[6];
+		retryLabel = $[7];
+		t1 = $[8];
 	}
 	const load = t1 === void 0 ? OPTIONS_LOADED : t1;
 	const popupRef = useRef(null);
 	let t2;
-	if ($[8] !== props) {
+	if ($[9] !== props) {
 		t2 = /* @__PURE__ */ jsx(SelectTrigger, { ...props });
-		$[8] = props;
-		$[9] = t2;
-	} else t2 = $[9];
+		$[9] = props;
+		$[10] = t2;
+	} else t2 = $[10];
 	let t3;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = (retry) => {
 			retry();
 			popupRef.current?.focus();
 		};
-		$[10] = t3;
-	} else t3 = $[10];
+		$[11] = t3;
+	} else t3 = $[11];
 	let t4;
-	if ($[11] !== load || $[12] !== loadBrokenLabel || $[13] !== loadFailedLabel || $[14] !== loadingLabel || $[15] !== noOptionsLabel || $[16] !== retryLabel) {
+	if ($[12] !== load || $[13] !== loadBrokenLabel || $[14] !== loadFailedLabel || $[15] !== loadingLabel || $[16] !== noOptionsLabel || $[17] !== retryLabel) {
 		t4 = /* @__PURE__ */ jsx(SelectStatus, {
 			load,
 			loadingLabel,
@@ -447,35 +535,37 @@ var SelectControl = (t0) => {
 			noOptionsLabel,
 			onRetry: t3
 		});
-		$[11] = load;
-		$[12] = loadBrokenLabel;
-		$[13] = loadFailedLabel;
-		$[14] = loadingLabel;
-		$[15] = noOptionsLabel;
-		$[16] = retryLabel;
-		$[17] = t4;
-	} else t4 = $[17];
+		$[12] = load;
+		$[13] = loadBrokenLabel;
+		$[14] = loadFailedLabel;
+		$[15] = loadingLabel;
+		$[16] = noOptionsLabel;
+		$[17] = retryLabel;
+		$[18] = t4;
+	} else t4 = $[18];
 	let t5;
-	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx(Select.List, { children: /* @__PURE__ */ jsx(SelectItems, {}) });
-		$[18] = t5;
-	} else t5 = $[18];
+	if ($[19] !== checkIcon) {
+		t5 = /* @__PURE__ */ jsx(Select.List, { children: /* @__PURE__ */ jsx(SelectItems, { checkIcon }) });
+		$[19] = checkIcon;
+		$[20] = t5;
+	} else t5 = $[20];
 	let t6;
-	if ($[19] !== t4) {
+	if ($[21] !== t4 || $[22] !== t5) {
 		t6 = /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(SelectPositioner, { children: /* @__PURE__ */ jsxs(SelectPopup, {
 			ref: popupRef,
 			children: [t4, t5]
 		}) }) });
-		$[19] = t4;
-		$[20] = t6;
-	} else t6 = $[20];
+		$[21] = t4;
+		$[22] = t5;
+		$[23] = t6;
+	} else t6 = $[23];
 	let t7;
-	if ($[21] !== t2 || $[22] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t2, t6] });
-		$[21] = t2;
-		$[22] = t6;
-		$[23] = t7;
-	} else t7 = $[23];
+	if ($[24] !== t2 || $[25] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t6] });
+		$[24] = t2;
+		$[25] = t6;
+		$[26] = t7;
+	} else t7 = $[26];
 	return t7;
 };
 /**
@@ -488,6 +578,8 @@ var SelectControl = (t0) => {
 * <Select.Root options={options} value={value} onValueChange={setValue}>
 * 	<Select.Label>Status</Select.Label>
 * 	<Select.Control
+* 		icon={<ExpandMoreIcon />}
+* 		checkIcon={<CheckIcon />}
 * 		loadingLabel="Loading options…"
 * 		loadFailedLabel="Options could not be loaded."
 * 		loadBrokenLabel="Options could not be loaded, and trying again won't help."
@@ -501,12 +593,14 @@ var Select$1 = {
 	Label: SelectLabel,
 	Trigger: SelectTrigger,
 	Value: Select.Value,
-	Icon: Select.Icon,
+	Icon: SelectIcon,
 	Portal: Select.Portal,
 	Positioner: SelectPositioner,
 	Popup: SelectPopup,
 	List: Select.List,
 	Item: SelectItem,
+	ItemText: SelectItemText,
+	ItemIndicator: SelectItemIndicator,
 	Items: SelectItems,
 	Group: Select.Group,
 	GroupLabel: Select.GroupLabel,
@@ -517,13 +611,4 @@ var Select$1 = {
 	Error: Field.Error,
 	useIds: Field.useIds
 };
-function _temp(option) {
-	return /* @__PURE__ */ jsxs(SelectItem, {
-		value: option.value,
-		children: [option.label, option.detail !== void 0 && /* @__PURE__ */ jsx("span", {
-			className: select_module_default.itemDetail,
-			children: option.detail
-		})]
-	}, option.value);
-}
 export { Select$1 as Select };

package/dist/components/skeleton/skeleton.js

@@ -1,7 +1,7 @@
 import skeleton_module_default from "./skeleton.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 // src/components/skeleton/skeleton.tsx
 /**
 * A placeholder block standing in for content that has not arrived yet. Sized by

package/dist/components/spinner/spinner.css

@@ -1,7 +1,53 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._spinner_1old1_3 {
+  @keyframes _loading-pulse_1ojim_1 {
+    50% {
+      opacity: 1;
+    }
+  }
+  @keyframes _spinner-turn_1ojim_1 {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes _spinner-sweep_1ojim_1 {
+    0% {
+      stroke-dasharray: 0 150;
+      stroke-dashoffset: 0;
+    }
+    47.5% {
+      stroke-dasharray: 42 150;
+      stroke-dashoffset: -16;
+    }
+    95%, 100% {
+      stroke-dasharray: 42 150;
+      stroke-dashoffset: -59;
+    }
+  }
+  ._spinner_1ojim_27 {
     display: inline-block;
     color: var(--spinner-color, currentcolor);
   }
+  ._ring_1ojim_31 {
+    transform-origin: center;
+  }
+  ._arc_1ojim_34 {
+    stroke-dasharray: 42 150;
+    stroke-dashoffset: -16;
+    stroke-linecap: round;
+  }
+  @media (prefers-reduced-motion) {
+    ._ring_1ojim_31 {
+      opacity: 0.55;
+      animation: _loading-pulse_1ojim_1 2.4s var(--sys-motion-standard) infinite;
+    }
+  }
+  @media not (prefers-reduced-motion) {
+    ._ring_1ojim_31 {
+      animation: _spinner-turn_1ojim_1 2s linear infinite;
+    }
+    ._arc_1ojim_34 {
+      animation: _spinner-sweep_1ojim_1 1.5s ease-in-out infinite;
+    }
+  }
 }

package/dist/components/spinner/spinner.js

@@ -1,8 +1,7 @@
-import SvgSpinner from "../../assets/spinner.js";
 import spinner_module_default from "./spinner.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 // src/components/spinner/spinner.tsx
 /**
 * Minor inline loading indicator for small, in-place waits: a button, a field,
@@ -13,7 +12,7 @@ import { clsx } from "clsx";
 * {isPending ? <Spinner size={1} /> : <List items={data} />}
 */
 var Spinner = (t0) => {
-	const $ = c(8);
+	const $ = c(9);
 	const { size: t1, className } = t0;
 	const size = t1 === void 0 ? 1.5 : t1;
 	let t2;
@@ -35,16 +34,34 @@ var Spinner = (t0) => {
 		$[4] = t5;
 	} else t5 = $[4];
 	let t6;
-	if ($[5] !== t2 || $[6] !== t5) {
-		t6 = /* @__PURE__ */ jsx(SvgSpinner, {
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx("g", {
+			className: spinner_module_default.ring,
+			children: /* @__PURE__ */ jsx("circle", {
+				className: spinner_module_default.arc,
+				cx: "12",
+				cy: "12",
+				r: "9.5",
+				strokeWidth: "3"
+			})
+		});
+		$[5] = t6;
+	} else t6 = $[5];
+	let t7;
+	if ($[6] !== t2 || $[7] !== t5) {
+		t7 = /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
 			className: t2,
 			style: t5,
-			"aria-hidden": "true"
+			"aria-hidden": "true",
+			children: t6
 		});
-		$[5] = t2;
-		$[6] = t5;
-		$[7] = t6;
-	} else t6 = $[7];
-	return t6;
+		$[6] = t2;
+		$[7] = t5;
+		$[8] = t7;
+	} else t7 = $[8];
+	return t7;
 };
 export { Spinner };