@selectwin/kit 0.1.197 → 0.1.198

package/dist/SelectSearchInput.js

@@ -0,0 +1,38 @@
+import { SearchIcon as e } from "./icons.js";
+import { mergeNative as t } from "./internal/nativeProps.js";
+import { useSelectMessages as n } from "./SelectLocale.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/SelectSearchInput.tsx
+var o = r(function({ value: r, onChange: o, placeholder: s, shortcut: c, inputLabel: l, inputProps: u, inputRef: d, className: f, ...p }, m) {
+	let h = n().common.searchPlaceholder, g = s ?? h, _ = t(u, { placeholder: g });
+	return /* @__PURE__ */ a("div", {
+		ref: m,
+		...p,
+		className: `select-search${f ? " " + f : ""}`,
+		children: [
+			/* @__PURE__ */ i("span", {
+				className: "select-search__icon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ i(e, {})
+			}),
+			/* @__PURE__ */ i("input", {
+				..._,
+				ref: d,
+				className: "select-search__input",
+				type: "search",
+				value: r,
+				onChange: (e) => o(e.target.value, e),
+				"aria-label": l ?? _["aria-label"] ?? g
+			}),
+			c && /* @__PURE__ */ i("kbd", {
+				className: "select-search__kbd",
+				children: c
+			})
+		]
+	});
+});
+//#endregion
+export { o as SelectSearchInput };
+
+//# sourceMappingURL=SelectSearchInput.js.map

package/dist/SelectSearchMenu.js

@@ -0,0 +1,128 @@
+import { CheckIcon as e } from "./icons.js";
+import { useSelectMessages as t } from "./SelectLocale.js";
+import { useSelectReveal as n } from "./internal/useSelectReveal.js";
+import { SelectSearchInput as r } from "./SelectSearchInput.js";
+import { useEffect as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/SelectSearchMenu.tsx
+var c = "[role=\"option\"]:not([disabled])";
+function l({ search: e, onSearchChange: n, searchPlaceholder: l, status: d, footer: f, width: p = "min(22rem, 86vw)", autoFocus: m = !1, selectFirstOnEnter: h = !1, listMaxHeight: g, children: _ }) {
+	let v = t().common.searchPlaceholder, y = l ?? v, b = a(null);
+	return i(() => {
+		if (!m) return;
+		let e = window.setTimeout(() => {
+			var e;
+			return (e = b.current) == null || (e = e.querySelector("input")) == null ? void 0 : e.focus({ preventScroll: !0 });
+		}, 0);
+		return () => window.clearTimeout(e);
+	}, [m]), /* @__PURE__ */ s("div", {
+		ref: b,
+		className: "select-combobox__panel select-searchmenu",
+		style: { width: p },
+		onKeyDown: (e) => {
+			let t = b.current;
+			if (!t) return;
+			let n = t.querySelector("input"), r = Array.from(t.querySelectorAll(c)), i = r.indexOf(document.activeElement);
+			if (e.key === "ArrowDown") {
+				var a;
+				if (r.length === 0) return;
+				e.preventDefault(), (a = r[i === -1 ? 0 : Math.min(i + 1, r.length - 1)]) == null || a.focus();
+			} else if (e.key === "ArrowUp") {
+				var o;
+				if (i === -1) return;
+				e.preventDefault(), i === 0 ? n == null || n.focus() : (o = r[i - 1]) == null || o.focus();
+			} else if ((e.key === "Home" || e.key === "End") && i !== -1) {
+				var s;
+				e.preventDefault(), (s = r[e.key === "Home" ? 0 : r.length - 1]) == null || s.focus();
+			} else if (e.key === "Enter" && h && document.activeElement === n) {
+				let t = r[0];
+				if (!t) return;
+				e.preventDefault(), t.click();
+			}
+		},
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: "select-combobox__search",
+				children: /* @__PURE__ */ o(r, {
+					value: e,
+					onChange: n,
+					placeholder: y
+				})
+			}),
+			d != null && d !== !1 ? /* @__PURE__ */ o("div", {
+				className: "select-combobox__empty",
+				role: "status",
+				children: d
+			}) : /* @__PURE__ */ o(u, {
+				maxHeight: g,
+				children: _
+			}),
+			f != null && f !== !1 ? /* @__PURE__ */ o("div", {
+				className: "select-searchmenu__footer",
+				children: f
+			}) : null
+		]
+	});
+}
+function u({ children: e, maxHeight: t }) {
+	let r = n({
+		selector: ".select-combobox__option",
+		y: 6,
+		duration: .3,
+		stagger: .02
+	});
+	return /* @__PURE__ */ o("div", {
+		className: "select-combobox__list",
+		role: "listbox",
+		ref: r,
+		style: t ? { maxHeight: t } : void 0,
+		children: e
+	});
+}
+function d({ label: e, children: t }) {
+	return (Array.isArray(t) ? t.some((e) => e != null && e !== !1) : t != null && t !== !1) ? /* @__PURE__ */ s("div", {
+		role: "group",
+		className: "select-searchmenu__group",
+		"aria-label": typeof e == "string" ? e : void 0,
+		children: [/* @__PURE__ */ o("div", {
+			className: "select-searchmenu__grouplabel",
+			"aria-hidden": typeof e == "string" || void 0,
+			children: e
+		}), t]
+	}) : null;
+}
+function f({ label: t, secondary: n, trailing: r, selected: i = !1, disabled: a = !1, onSelect: c }) {
+	return /* @__PURE__ */ s("button", {
+		type: "button",
+		role: "option",
+		"aria-selected": i,
+		disabled: a,
+		className: `select-combobox__option${i ? " is-selected" : ""}`,
+		onClick: c,
+		children: [
+			/* @__PURE__ */ s("span", {
+				className: "select-combobox__optiontext",
+				children: [/* @__PURE__ */ o("span", {
+					className: "select-combobox__optionlabel",
+					children: t
+				}), n != null && n !== "" ? /* @__PURE__ */ o("span", {
+					className: "select-combobox__optionsecondary",
+					children: n
+				}) : null]
+			}),
+			r != null && r !== "" ? /* @__PURE__ */ o("span", {
+				className: "select-searchmenu__trailing",
+				children: r
+			}) : null,
+			i ? /* @__PURE__ */ o("span", {
+				className: "select-combobox__check",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ o(e, {})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { l as SelectSearchMenu, d as SelectSearchMenuGroup, f as SelectSearchMenuOption };
+
+//# sourceMappingURL=SelectSearchMenu.js.map

package/dist/SelectSection.js

@@ -0,0 +1,83 @@
+/* empty css           */
+import { ChevronDownIcon as e } from "./icons.js";
+import { SelectInfoTip as t } from "./SelectInfoTip.js";
+import { FrameBody as n, useInsideFrame as r } from "./internal/frame.js";
+import { forwardRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/SelectSection.tsx
+var c = i(function({ title: i, help: c, description: l, action: u, collapsible: d = !1, defaultOpen: f = !0, footer: p, flush: m = !1, children: h, className: g, ..._ }, v) {
+	let [y, b] = a(f), x = (r() ? " select-section--nested" : "") + (m ? " select-section--flush" : "");
+	return d ? /* @__PURE__ */ s("div", {
+		ref: v,
+		..._,
+		className: `select-section select-section--collapsible${x}${y ? " is-open" : ""}${g ? " " + g : ""}`,
+		children: [/* @__PURE__ */ s("button", {
+			type: "button",
+			className: "select-section__head select-section__head--toggle",
+			"aria-expanded": y,
+			onClick: () => b((e) => !e),
+			children: [/* @__PURE__ */ s("span", {
+				className: "select-section__heading",
+				children: [i && /* @__PURE__ */ o("span", {
+					className: "select-section__title",
+					children: i
+				}), l && /* @__PURE__ */ o("span", {
+					className: "select-section__desc",
+					children: l
+				})]
+			}), /* @__PURE__ */ o("span", {
+				className: "select-section__chevron",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ o(e, {})
+			})]
+		}), /* @__PURE__ */ o("div", {
+			className: "select-section__collapse",
+			"data-open": y,
+			"aria-hidden": !y,
+			children: /* @__PURE__ */ s("div", {
+				className: "select-section__collapsewrap",
+				children: [/* @__PURE__ */ o("div", {
+					className: "select-section__body",
+					children: /* @__PURE__ */ o(n, { children: h })
+				}), p != null && p !== "" && /* @__PURE__ */ o("div", {
+					className: "select-section__foot",
+					children: p
+				})]
+			})
+		})]
+	}) : /* @__PURE__ */ s("div", {
+		ref: v,
+		..._,
+		className: `select-section${x}${g ? " " + g : ""}`,
+		children: [
+			(i || l || u) && /* @__PURE__ */ s("div", {
+				className: "select-section__head",
+				children: [/* @__PURE__ */ s("div", {
+					className: "select-section__heading",
+					children: [i && /* @__PURE__ */ s("h2", {
+						className: `select-section__title${c == null ? "" : " select-section__title--help"}`,
+						children: [i, c != null && /* @__PURE__ */ o(t, { content: c })]
+					}), l && /* @__PURE__ */ o("p", {
+						className: "select-section__desc",
+						children: l
+					})]
+				}), u ? /* @__PURE__ */ o("div", {
+					className: "select-section__action",
+					children: u
+				}) : null]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "select-section__body",
+				children: /* @__PURE__ */ o(n, { children: h })
+			}),
+			p != null && p !== "" && /* @__PURE__ */ o("div", {
+				className: "select-section__foot",
+				children: p
+			})
+		]
+	});
+});
+//#endregion
+export { c as SelectSection };
+
+//# sourceMappingURL=SelectSection.js.map

package/dist/SelectSegmented.js

@@ -0,0 +1,95 @@
+import { forwardRef as e, useId as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/SelectSegmented.tsx
+var s = e(function({ value: e, onChange: s, options: c, ariaLabel: l, fullWidth: u = !1, label: d, hint: f, disabled: p = !1, error: m, className: h, ...g }, _) {
+	let v = t(), y = Math.max(0, c.findIndex((t) => t.value === e)), b = r([]), [x, S] = i(null), C = c.map((e) => e.count ?? "").join(",");
+	n(() => {
+		let e = () => {
+			let e = b.current[y];
+			if (!e) return;
+			let t = {
+				left: e.offsetLeft,
+				width: e.offsetWidth
+			};
+			S((e) => e && e.left === t.left && e.width === t.width ? e : t);
+		};
+		e();
+		let t = typeof ResizeObserver < "u" ? new ResizeObserver(e) : null;
+		return b.current.forEach((e) => e && (t == null ? void 0 : t.observe(e))), () => t == null ? void 0 : t.disconnect();
+	}, [
+		y,
+		c.length,
+		C
+	]);
+	let w = x ? {
+		left: x.left,
+		width: x.width,
+		opacity: 1
+	} : { opacity: 0 }, T = /* @__PURE__ */ o("div", {
+		ref: d == null ? _ : void 0,
+		...d == null ? g : {},
+		className: `select-segmented${u ? " select-segmented--full" : ""}${p ? " select-segmented--disabled" : ""}${m != null && m !== !1 ? " select-segmented--error" : ""}${d == null && h ? " " + h : ""}`,
+		role: "tablist",
+		"aria-label": l,
+		"aria-labelledby": d != null && !l ? v : void 0,
+		"aria-disabled": p || void 0,
+		children: [/* @__PURE__ */ a("span", {
+			className: "select-segmented__pill",
+			"aria-hidden": "true",
+			style: w
+		}), c.map((t, n) => {
+			let r = t.value === e, i = !!t.count && t.count > 0, c = t.title && i ? `${t.title}, ${t.countLabel ?? t.count}` : t.title;
+			return /* @__PURE__ */ o("button", {
+				ref: (e) => {
+					b.current[n] = e;
+				},
+				type: "button",
+				role: "tab",
+				"aria-selected": r,
+				className: `select-segmented__item${r ? " select-segmented__item--active" : ""}`,
+				title: t.title,
+				"aria-label": c,
+				disabled: p,
+				onClick: () => s(t.value),
+				children: [t.label, i ? /* @__PURE__ */ a("span", {
+					className: "select-segmented__count",
+					"aria-hidden": t.title ? !0 : void 0,
+					children: t.count
+				}) : null]
+			}, t.value);
+		})]
+	}), E = m != null && m !== !1 && m !== "";
+	return d == null && !E ? T : d == null ? /* @__PURE__ */ o("div", {
+		className: "select-field",
+		children: [T, /* @__PURE__ */ a("p", {
+			className: "select-field__error",
+			children: m
+		})]
+	}) : /* @__PURE__ */ o("div", {
+		ref: _,
+		...g,
+		className: `select-field${h ? " " + h : ""}`,
+		children: [
+			/* @__PURE__ */ a("div", {
+				className: "select-field__labelrow",
+				children: /* @__PURE__ */ a("span", {
+					className: "select-field__label",
+					id: v,
+					children: d
+				})
+			}),
+			T,
+			E ? /* @__PURE__ */ a("p", {
+				className: "select-field__error",
+				children: m
+			}) : f != null && /* @__PURE__ */ a("p", {
+				className: "select-field__hint",
+				children: f
+			})
+		]
+	});
+});
+//#endregion
+export { s as SelectSegmented };
+
+//# sourceMappingURL=SelectSegmented.js.map

package/dist/SelectSelect.d.ts

@@ -1,21 +1,35 @@
-import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { ChangeEvent, ReactNode, Ref, SelectHTMLAttributes, ComponentPropsWithoutRef } from 'react';
 export interface SelectSelectOption {
     label: string;
     value: string;
     disabled?: boolean;
 }
 type SelectSelectOwnProps = {
-    label?: string;
+    /** 0.1.198: aceita um nó. */
+    label?: ReactNode;
     value: string;
-    onChange: (value: string) => void;
-    options: SelectSelectOption[];
+    /** O valor novo e, desde a 0.1.198, o evento nativo. */
+    onChange: (value: string, event: ChangeEvent<HTMLSelectElement>) => void;
+    /** As opções. Desde a 0.1.198, ou elas ou os `<option>`/`<optgroup>` em `children` (os grupos de um seletor longo). */
+    options?: SelectSelectOption[];
+    /** 0.1.198: os `<option>` e `<optgroup>` nativos, no lugar de `options`. */
+    children?: ReactNode;
+    /** 0.1.198: o "(opcional)" depois do rótulo. */
+    optional?: boolean;
+    /** 0.1.198: os atributos nativos do `<select>` (o `form`, o `autoFocus`, o `aria-*`…). */
+    selectProps?: Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'defaultValue' | 'onChange' | 'id' | 'className' | 'children'>;
+    /** 0.1.198: a referência do `<select>`. */
+    selectRef?: Ref<HTMLSelectElement>;
+    /** 0.1.198: o id do `<select>` (um rótulo de fora aponta para ele). */
+    id?: string;
     labelAction?: ReactNode;
     /** Ajuda contextual: vira o "!" (SelectInfoTip) ao lado do rotulo. Use para o que
      *  explica a plataforma; `hint` e so restricao/estado do proprio campo. */
     help?: ReactNode;
     info?: string;
     description?: ReactNode;
-    hint?: string;
+    /** 0.1.198: aceita um nó (um link). */
+    hint?: ReactNode;
     error?: string;
     placeholder?: string;
     name?: string;

package/dist/SelectSelect.js

@@ -0,0 +1,84 @@
+import { ChevronDownIcon as e, InfoIcon as t } from "./icons.js";
+import { joinIds as n, mergeNative as r } from "./internal/nativeProps.js";
+import { useSelectMessages as i } from "./SelectLocale.js";
+import { SelectInfoTip as a } from "./SelectInfoTip.js";
+import { forwardRef as o, useId as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/SelectSelect.tsx
+var u = o(function({ label: o, value: u, onChange: d, options: f = [], children: p, labelAction: m, help: h, info: g, description: _, hint: v, error: y, placeholder: b, name: x, required: S, disabled: C, size: w = "md", ariaLabel: T, optional: E = !1, selectProps: D, selectRef: O, id: k, className: A, ...j }, M) {
+	let N = i(), P = s(), F = k ?? P, I = y ? `${F}-err` : v ? `${F}-hint` : void 0, L = r(D, {
+		name: x,
+		required: S,
+		disabled: C
+	});
+	return /* @__PURE__ */ l("div", {
+		ref: M,
+		...j,
+		className: `select-field${w === "sm" ? " select-field--sm" : ""}${A ? " " + A : ""}`,
+		children: [
+			(o || h || g || m) && /* @__PURE__ */ l("div", {
+				className: "select-field__labelrow",
+				children: [/* @__PURE__ */ l("span", {
+					className: "select-field__labelwrap",
+					children: [o && /* @__PURE__ */ l("label", {
+						className: "select-field__label",
+						htmlFor: F,
+						children: [o, E && /* @__PURE__ */ l("span", {
+							className: "select-field__optional",
+							children: [" ", N.common.optional]
+						})]
+					}), h != null && h !== "" ? /* @__PURE__ */ c(a, { content: h }) : g && /* @__PURE__ */ c("span", {
+						className: "select-field__info",
+						title: g,
+						"aria-label": g,
+						children: /* @__PURE__ */ c(t, {})
+					})]
+				}), m]
+			}),
+			_ && /* @__PURE__ */ c("p", {
+				className: "select-field__desc",
+				children: _
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "select-select-wrap",
+				children: [/* @__PURE__ */ l("select", {
+					...L,
+					ref: O,
+					id: F,
+					className: `select-input select-select${y ? " select-input--error" : ""}`,
+					value: u,
+					onChange: (e) => d(e.target.value, e),
+					"aria-invalid": y ? !0 : L["aria-invalid"],
+					"aria-describedby": n(I, D == null ? void 0 : D["aria-describedby"]),
+					"aria-label": o ? void 0 : T ?? L["aria-label"],
+					children: [b && /* @__PURE__ */ c("option", {
+						value: "",
+						disabled: !0,
+						children: b
+					}), p ?? f.map((e) => /* @__PURE__ */ c("option", {
+						value: e.value,
+						disabled: e.disabled,
+						children: e.label
+					}, e.value))]
+				}), /* @__PURE__ */ c("span", {
+					className: "select-select-caret",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ c(e, {})
+				})]
+			}),
+			y ? /* @__PURE__ */ c("p", {
+				id: `${F}-err`,
+				className: "select-field__error",
+				children: y
+			}) : v ? /* @__PURE__ */ c("p", {
+				id: `${F}-hint`,
+				className: "select-field__hint",
+				children: v
+			}) : null
+		]
+	});
+});
+//#endregion
+export { u as SelectSelect };
+
+//# sourceMappingURL=SelectSelect.js.map

package/dist/SelectSetting.js

@@ -0,0 +1,54 @@
+import { forwardRef as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/SelectSetting.tsx
+var r = e(function({ children: e, className: n, ...r }, i) {
+	return /* @__PURE__ */ t("div", {
+		ref: i,
+		...r,
+		className: `select-settinglist${n ? " " + n : ""}`,
+		children: e
+	});
+}), i = e(function({ control: e, title: r, badge: i, description: a, children: o, bodyOpen: s, className: c, ...l }, u) {
+	return /* @__PURE__ */ n("div", {
+		ref: u,
+		...l,
+		className: `select-setting${c ? " " + c : ""}`,
+		children: [e && /* @__PURE__ */ t("div", {
+			className: "select-setting__control",
+			children: e
+		}), /* @__PURE__ */ n("div", {
+			className: "select-setting__main",
+			children: [
+				/* @__PURE__ */ n("div", {
+					className: "select-setting__head",
+					children: [/* @__PURE__ */ t("span", {
+						className: "select-setting__title",
+						children: r
+					}), i]
+				}),
+				a && /* @__PURE__ */ t("p", {
+					className: "select-setting__desc",
+					children: a
+				}),
+				o && (s === void 0 ? /* @__PURE__ */ t("div", {
+					className: "select-setting__body",
+					children: o
+				}) : /* @__PURE__ */ t("div", {
+					className: `select-setting__bodywrap${s ? " is-open" : ""}`,
+					children: /* @__PURE__ */ t("div", {
+						className: "select-setting__bodyclip",
+						"aria-hidden": !s,
+						children: /* @__PURE__ */ t("div", {
+							className: "select-setting__body",
+							children: o
+						})
+					})
+				}))
+			]
+		})]
+	});
+});
+//#endregion
+export { r as SelectSettingList, i as SelectSettingRow };
+
+//# sourceMappingURL=SelectSetting.js.map