@selectwin/kit 0.1.201 → 0.1.202

package/dist/SelectField.d.ts

@@ -19,9 +19,10 @@ export declare function charCount(value: string, maxLength: number | undefined):
 export declare function withCount(action: ReactNode, count: ReactNode): ReactNode;
 /**
  * Os atributos nativos do `<input>` que o campo repassa (0.1.198): `inputMode`, `spellCheck`, `form`, `pattern`,
- * `aria-*`, `data-*`, os eventos… Os que o campo controla (o valor, o tipo, o id, a classe) ficam de fora.
+ * `aria-*`, `data-*`, os eventos… Os que o campo controla (o valor, o tipo, o id) ficam de fora. 0.1.202: o `className`
+ * SOMA às classes do `<input>` (a tela que pede a fonte larga de um código, o texto menor), sem tirar as do kit.
  */
-export type SelectNativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'id' | 'className' | 'size' | 'prefix'>;
+export type SelectNativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'id' | 'size' | 'prefix'>;
 export interface SelectFieldProps {
     /** Field label. Omit when an outer row already labels the field. 0.1.198: aceita um nó. */
     label?: ReactNode;

package/dist/SelectField.js

@@ -72,7 +72,7 @@ var v = u(function({ label: e, value: a, onChange: l, type: u = "text", labelAct
 		...Z,
 		ref: R,
 		id: W,
-		className: `select-input${K ? " select-input--has-suffix" : ""}${J ? " select-input--has-stepper" : ""}${ee ? " select-input--mono" : ""}${C ? " select-input--error" : ""}`,
+		className: `select-input${K ? " select-input--has-suffix" : ""}${J ? " select-input--has-stepper" : ""}${ee ? " select-input--mono" : ""}${C ? " select-input--error" : ""}${L != null && L.className ? " " + L.className : ""}`,
 		type: de,
 		value: a,
 		onChange: (e) => l(e.target.value, e),

package/dist/SelectRadioGroup.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { ChangeEvent, InputHTMLAttributes, ReactNode, ComponentPropsWithoutRef } from 'react';
 export interface SelectRadioOption {
     value: string;
     label: ReactNode;
@@ -9,6 +9,25 @@ export interface SelectRadioOption {
     trailing?: ReactNode;
     disabled?: boolean;
 }
+export type SelectRadioCardProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> & {
+    label: ReactNode;
+    description?: ReactNode;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    /** Marcado (o cartão acende). Sem `checked`, o rádio fica por conta do navegador (`defaultChecked`). */
+    checked?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+};
+/** O cartão de uma opção, com o rádio de verdade dentro: o nome do grupo, o valor e o resto do `<input>` passam. */
+export declare const SelectRadioCard: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> & {
+    label: ReactNode;
+    description?: ReactNode;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    /** Marcado (o cartão acende). Sem `checked`, o rádio fica por conta do navegador (`defaultChecked`). */
+    checked?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+} & import('react').RefAttributes<HTMLInputElement>>;
 type SelectRadioGroupOwnProps = {
     value: string;
     onChange: (value: string) => void;

package/dist/SelectRadioGroup.js

@@ -1,54 +1,63 @@
 import { forwardRef as e, useId as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/SelectRadioGroup.tsx
-var i = e(function({ value: e, onChange: i, options: a, name: o, className: s, ...c }, l) {
+var i = e(function({ label: e, description: t, leading: i, trailing: a, checked: o, disabled: s, className: c, onChange: l, ...u }, d) {
+	return /* @__PURE__ */ r("label", {
+		className: `select-radio${o ? " select-radio--selected" : ""}${s ? " select-radio--disabled" : ""}${c ? " " + c : ""}`,
+		children: [
+			/* @__PURE__ */ n("input", {
+				ref: d,
+				...u,
+				type: "radio",
+				checked: o,
+				disabled: s,
+				onChange: l
+			}),
+			/* @__PURE__ */ n("span", {
+				className: "select-radio__dot",
+				"aria-hidden": "true"
+			}),
+			i && /* @__PURE__ */ n("span", {
+				className: "select-radio__leading",
+				children: i
+			}),
+			/* @__PURE__ */ r("span", {
+				className: "select-radio__text",
+				children: [/* @__PURE__ */ n("span", {
+					className: "select-radio__label",
+					children: e
+				}), t && /* @__PURE__ */ n("span", {
+					className: "select-radio__desc",
+					children: t
+				})]
+			}),
+			a && /* @__PURE__ */ n("span", {
+				className: "select-radio__trailing",
+				children: a
+			})
+		]
+	});
+}), a = e(function({ value: e, onChange: r, options: a, name: o, className: s, ...c }, l) {
 	let u = t(), d = o ?? u;
 	return /* @__PURE__ */ n("div", {
 		ref: l,
 		...c,
 		className: `select-radiogroup${s ? " " + s : ""}`,
 		role: "radiogroup",
-		children: a.map((t) => {
-			let a = t.value === e;
-			return /* @__PURE__ */ r("label", {
-				className: `select-radio${a ? " select-radio--selected" : ""}${t.disabled ? " select-radio--disabled" : ""}`,
-				children: [
-					/* @__PURE__ */ n("input", {
-						type: "radio",
-						name: d,
-						value: t.value,
-						checked: a,
-						disabled: t.disabled,
-						onChange: () => i(t.value)
-					}),
-					/* @__PURE__ */ n("span", {
-						className: "select-radio__dot",
-						"aria-hidden": "true"
-					}),
-					t.leading && /* @__PURE__ */ n("span", {
-						className: "select-radio__leading",
-						children: t.leading
-					}),
-					/* @__PURE__ */ r("span", {
-						className: "select-radio__text",
-						children: [/* @__PURE__ */ n("span", {
-							className: "select-radio__label",
-							children: t.label
-						}), t.description && /* @__PURE__ */ n("span", {
-							className: "select-radio__desc",
-							children: t.description
-						})]
-					}),
-					t.trailing && /* @__PURE__ */ n("span", {
-						className: "select-radio__trailing",
-						children: t.trailing
-					})
-				]
-			}, t.value);
-		})
+		children: a.map((t) => /* @__PURE__ */ n(i, {
+			name: d,
+			value: t.value,
+			checked: t.value === e,
+			disabled: t.disabled,
+			onChange: () => r(t.value),
+			label: t.label,
+			description: t.description,
+			leading: t.leading,
+			trailing: t.trailing
+		}, t.value))
 	});
 });
 //#endregion
-export { i as SelectRadioGroup };
+export { i as SelectRadioCard, a as SelectRadioGroup };
 
 //# sourceMappingURL=SelectRadioGroup.js.map

package/dist/SelectSearchInput.d.ts

@@ -13,6 +13,8 @@ type SelectSearchInputOwnProps = {
     inputProps?: SelectNativeInputProps;
     /** 0.1.198: a referência do `<input>`. */
     inputRef?: Ref<HTMLInputElement>;
+    /** 0.1.202: a densidade, como nos outros campos (`sm` nas barras de filtro e no seletor de workspace). */
+    size?: 'sm' | 'md';
 };
 export type SelectSearchInputProps = SelectSearchInputOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectSearchInputOwnProps>;
 export declare const SelectSearchInput: import('react').ForwardRefExoticComponent<SelectSearchInputOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectSearchInputOwnProps> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/SelectSearchInput.js

@@ -4,12 +4,12 @@ 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 });
+var o = r(function({ value: r, onChange: o, placeholder: s, shortcut: c, inputLabel: l, inputProps: u, inputRef: d, size: f = "md", className: p, ...m }, h) {
+	let g = n().common.searchPlaceholder, _ = s ?? g, v = t(u, { placeholder: _ });
 	return /* @__PURE__ */ a("div", {
-		ref: m,
-		...p,
-		className: `select-search${f ? " " + f : ""}`,
+		ref: h,
+		...m,
+		className: `select-search${f === "sm" ? " select-search--sm" : ""}${p ? " " + p : ""}`,
 		children: [
 			/* @__PURE__ */ i("span", {
 				className: "select-search__icon",
@@ -17,13 +17,13 @@ var o = r(function({ value: r, onChange: o, placeholder: s, shortcut: c, inputLa
 				children: /* @__PURE__ */ i(e, {})
 			}),
 			/* @__PURE__ */ i("input", {
-				..._,
+				...v,
 				ref: d,
-				className: "select-search__input",
+				className: `select-search__input${u != null && u.className ? " " + u.className : ""}`,
 				type: "search",
 				value: r,
 				onChange: (e) => o(e.target.value, e),
-				"aria-label": l ?? _["aria-label"] ?? g
+				"aria-label": l ?? v["aria-label"] ?? _
 			}),
 			c && /* @__PURE__ */ i("kbd", {
 				className: "select-search__kbd",

package/dist/SelectSelect.d.ts

@@ -17,7 +17,7 @@ type SelectSelectOwnProps = {
     /** 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'>;
+    selectProps?: Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'defaultValue' | 'onChange' | 'id' | '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). */

package/dist/SelectSelect.js

@@ -45,7 +45,7 @@ var u = o(function({ label: o, value: u, onChange: d, options: f = [], children:
 					...L,
 					ref: O,
 					id: F,
-					className: `select-input select-select${y ? " select-input--error" : ""}`,
+					className: `select-input select-select${y ? " select-input--error" : ""}${D != null && D.className ? " " + D.className : ""}`,
 					value: u,
 					onChange: (e) => d(e.target.value, e),
 					"aria-invalid": y ? !0 : L["aria-invalid"],

package/dist/SelectTextarea.d.ts

@@ -8,7 +8,7 @@ type SelectTextareaOwnProps = {
     /** 0.1.198: o "(opcional)" depois do rótulo. */
     optional?: boolean;
     /** 0.1.198: os atributos nativos da `<textarea>` (o `spellCheck`, o `readOnly`, o `autoFocus`, o `aria-*`…). */
-    textareaProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange' | 'id' | 'className'>;
+    textareaProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange' | 'id'>;
     /** 0.1.198: a referência da `<textarea>`. */
     textareaRef?: Ref<HTMLTextAreaElement>;
     /** 0.1.198: o id da `<textarea>` (um rótulo de fora aponta para ele). */

package/dist/SelectTextarea.js

@@ -34,7 +34,7 @@ var l = a(function({ label: a, value: l, onChange: u, labelAction: d, help: f, i
 				...R,
 				ref: k,
 				id: F,
-				className: `select-input select-textarea${y ? " select-textarea--mono" : ""}${g ? " select-input--error" : ""}`,
+				className: `select-input select-textarea${y ? " select-textarea--mono" : ""}${g ? " select-input--error" : ""}${O != null && O.className ? " " + O.className : ""}`,
 				value: l,
 				onChange: (e) => u(e.target.value, e),
 				"aria-invalid": g ? !0 : R["aria-invalid"],

package/dist/index.d.ts

@@ -23,7 +23,7 @@ export { SelectToggleList, SelectToggleRow } from './SelectToggle';
 export { SelectTogglePanel } from './SelectTogglePanel';
 export { SelectSelect } from './SelectSelect';
 export { SelectPhoneField, SELECT_COUNTRIES, dialCodeOf } from './SelectPhoneField';
-export { SelectRadioGroup } from './SelectRadioGroup';
+export { SelectRadioCard, SelectRadioGroup, type SelectRadioCardProps } from './SelectRadioGroup';
 export { SelectSegmented } from './SelectSegmented';
 export { SelectBadge } from './SelectBadge';
 export { SelectStatusBadge, SELECT_TRANSACTION_STATUS } from './SelectStatusBadge';