@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,227 @@
+import SvgVisibility from "../../vendor/@material-design-icons/svg/outlined/visibility.js";
+import SvgVisibilityOff from "../../vendor/@material-design-icons/svg/outlined/visibility_off.js";
+import { Button } from "../button/button.js";
+import { TextInput } from "../text-field/text-input.js";
+import text_field_module_default from "../text-field/text-field.module.js";
+import { PasswordStrength } from "./password-strength.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/password-field/password-field.tsx
+/**
+* A password field with a reveal toggle, and optionally a strength meter fed by
+* zxcvbn that suspends while the locale's dictionaries load.
+*
+* @example
+* <PasswordField
+* 	label="Password"
+* 	optionalLabel="optional"
+* 	showPasswordLabel="Show password"
+* 	hidePasswordLabel="Hide password"
+* 	value={password}
+* 	onValueChange={setPassword}
+* 	autoComplete="current-password"
+* />
+*/
+var PasswordField = (t0) => {
+	const $ = c(65);
+	let className;
+	let description;
+	let dirty;
+	let disabled;
+	let errors;
+	let hidePasswordLabel;
+	let inputProps;
+	let label;
+	let languages;
+	let onValueChange;
+	let optionalLabel;
+	let pending;
+	let readOnly;
+	let requiredness;
+	let scoreLabels;
+	let showPasswordLabel;
+	let state;
+	let strength;
+	let strengthLabel;
+	let touched;
+	let value;
+	if ($[0] !== t0) {
+		({label, description, errors, requiredness, optionalLabel, showPasswordLabel, hidePasswordLabel, strength, strengthLabel, scoreLabels, languages, value, onValueChange, disabled, readOnly, dirty, touched, pending, state, className, ...inputProps} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = description;
+		$[3] = dirty;
+		$[4] = disabled;
+		$[5] = errors;
+		$[6] = hidePasswordLabel;
+		$[7] = inputProps;
+		$[8] = label;
+		$[9] = languages;
+		$[10] = onValueChange;
+		$[11] = optionalLabel;
+		$[12] = pending;
+		$[13] = readOnly;
+		$[14] = requiredness;
+		$[15] = scoreLabels;
+		$[16] = showPasswordLabel;
+		$[17] = state;
+		$[18] = strength;
+		$[19] = strengthLabel;
+		$[20] = touched;
+		$[21] = value;
+	} else {
+		className = $[1];
+		description = $[2];
+		dirty = $[3];
+		disabled = $[4];
+		errors = $[5];
+		hidePasswordLabel = $[6];
+		inputProps = $[7];
+		label = $[8];
+		languages = $[9];
+		onValueChange = $[10];
+		optionalLabel = $[11];
+		pending = $[12];
+		readOnly = $[13];
+		requiredness = $[14];
+		scoreLabels = $[15];
+		showPasswordLabel = $[16];
+		state = $[17];
+		strength = $[18];
+		strengthLabel = $[19];
+		touched = $[20];
+		value = $[21];
+	}
+	const [revealed, setRevealed] = useState(false);
+	let t1;
+	if ($[22] !== label) {
+		t1 = /* @__PURE__ */ jsx(TextInput.Label, { children: label });
+		$[22] = label;
+		$[23] = t1;
+	} else t1 = $[23];
+	const t2 = revealed ? "text" : "password";
+	let t3;
+	if ($[24] !== inputProps || $[25] !== t2) {
+		t3 = /* @__PURE__ */ jsx(TextInput.Input, {
+			...inputProps,
+			type: t2
+		});
+		$[24] = inputProps;
+		$[25] = t2;
+		$[26] = t3;
+	} else t3 = $[26];
+	let t4;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(TextInput.Pending, {});
+		$[27] = t4;
+	} else t4 = $[27];
+	const t5 = revealed ? SvgVisibilityOff : SvgVisibility;
+	const t6 = revealed ? hidePasswordLabel : showPasswordLabel;
+	let t7;
+	if ($[28] !== revealed) {
+		t7 = () => setRevealed(!revealed);
+		$[28] = revealed;
+		$[29] = t7;
+	} else t7 = $[29];
+	let t8;
+	if ($[30] !== disabled || $[31] !== revealed || $[32] !== t5 || $[33] !== t6 || $[34] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Button, {
+			iconOnly: true,
+			icon: t5,
+			label: t6,
+			variant: "tertiary",
+			size: "sm",
+			"aria-pressed": revealed,
+			disabled,
+			className: text_field_module_default.action,
+			onClick: t7
+		});
+		$[30] = disabled;
+		$[31] = revealed;
+		$[32] = t5;
+		$[33] = t6;
+		$[34] = t7;
+		$[35] = t8;
+	} else t8 = $[35];
+	let t9;
+	if ($[36] !== t3 || $[37] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(TextInput.Group, { children: [
+			t3,
+			t4,
+			t8
+		] });
+		$[36] = t3;
+		$[37] = t8;
+		$[38] = t9;
+	} else t9 = $[38];
+	let t10;
+	if ($[39] !== languages || $[40] !== scoreLabels || $[41] !== strength || $[42] !== strengthLabel || $[43] !== value) {
+		t10 = strength === true && /* @__PURE__ */ jsx(PasswordStrength, {
+			password: value,
+			label: strengthLabel,
+			scoreLabels,
+			languages
+		});
+		$[39] = languages;
+		$[40] = scoreLabels;
+		$[41] = strength;
+		$[42] = strengthLabel;
+		$[43] = value;
+		$[44] = t10;
+	} else t10 = $[44];
+	let t11;
+	if ($[45] !== description) {
+		t11 = /* @__PURE__ */ jsx(TextInput.Description, { children: description });
+		$[45] = description;
+		$[46] = t11;
+	} else t11 = $[46];
+	let t12;
+	if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(TextInput.Error, {});
+		$[47] = t12;
+	} else t12 = $[47];
+	let t13;
+	if ($[48] !== className || $[49] !== dirty || $[50] !== disabled || $[51] !== errors || $[52] !== onValueChange || $[53] !== optionalLabel || $[54] !== pending || $[55] !== readOnly || $[56] !== requiredness || $[57] !== state || $[58] !== t1 || $[59] !== t10 || $[60] !== t11 || $[61] !== t9 || $[62] !== touched || $[63] !== value) {
+		t13 = /* @__PURE__ */ jsxs(TextInput.Root, {
+			value,
+			onValueChange,
+			disabled,
+			readOnly,
+			requiredness,
+			optionalLabel,
+			errors,
+			dirty,
+			touched,
+			pending,
+			state,
+			className,
+			children: [
+				t1,
+				t9,
+				t10,
+				t11,
+				t12
+			]
+		});
+		$[48] = className;
+		$[49] = dirty;
+		$[50] = disabled;
+		$[51] = errors;
+		$[52] = onValueChange;
+		$[53] = optionalLabel;
+		$[54] = pending;
+		$[55] = readOnly;
+		$[56] = requiredness;
+		$[57] = state;
+		$[58] = t1;
+		$[59] = t10;
+		$[60] = t11;
+		$[61] = t9;
+		$[62] = touched;
+		$[63] = value;
+		$[64] = t13;
+	} else t13 = $[64];
+	return t13;
+};
+export { PasswordField };

package/dist/components/password-field/password-field.module.js

@@ -0,0 +1,20 @@
+import './password-field.css';// src/components/password-field/password-field.module.scss
+var strength = "_strength_1dakz_3";
+var meter = "_meter_1dakz_8";
+var meterLabel = "_meterLabel_1dakz_30";
+var meterValue = "_meterValue_1dakz_35";
+var meterTrack = "_meterTrack_1dakz_40";
+var meterIndicator = "_meterIndicator_1dakz_47";
+var feedback = "_feedback_1dakz_56";
+var suggestions = "_suggestions_1dakz_60";
+var password_field_module_default = {
+	strength,
+	meter,
+	meterLabel,
+	meterValue,
+	meterTrack,
+	meterIndicator,
+	feedback,
+	suggestions
+};
+export { password_field_module_default as default, feedback, meter, meterIndicator, meterLabel, meterTrack, meterValue, strength, suggestions };

package/dist/components/password-field/password-strength.d.ts

@@ -0,0 +1,28 @@
+import type { Score } from "@zxcvbn-ts/core";
+import type { ReactNode } from "react";
+import { type ZxcvbnLanguages } from "../../lib/password-strength/password-strength.ts";
+/** The name of each strength band, from 0 (weakest) to 4 (strongest). */
+export type PasswordScoreLabels = Readonly<Record<Score, string>>;
+export type PasswordStrengthProps = Readonly<{
+    password: string;
+    /** The meter's label, such as "Password strength". */
+    label: string;
+    /** The name of each band, such as "Very weak" for 0. */
+    scoreLabels: PasswordScoreLabels;
+    /**
+     * zxcvbn language packs beside the kit's English and Dutch ones, by lowercase
+     * language tag: `{ de: () => import("@zxcvbn-ts/language-de") }`.
+     */
+    languages?: ZxcvbnLanguages;
+    className?: string;
+}>;
+/**
+ * The strength band of a password as a labelled meter, followed by zxcvbn's own
+ * warning and suggestions in the locale's language. It suspends while that
+ * language's dictionaries load, and renders nothing for an empty password.
+ *
+ * @example
+ * <PasswordStrength password={password} label="Password strength" scoreLabels={SCORE_LABELS} />
+ */
+export declare const PasswordStrength: ({ password, label, scoreLabels, languages, className, }: PasswordStrengthProps) => ReactNode;
+//# sourceMappingURL=password-strength.d.ts.map

package/dist/components/password-field/password-strength.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-strength.d.ts","sourceRoot":"","sources":["../../../src/components/password-field/password-strength.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEN,KAAK,eAAe,EACpB,MAAM,kDAAkD,CAAC;AAI1D,yEAAyE;AACzE,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CACzC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CACrB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,WAAW,EAAE,mBAAmB,CAAC;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAIH;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,4DAM1B,qBAAqB,KAAG,SA8C1B,CAAC"}

package/dist/components/password-field/password-strength.js

@@ -0,0 +1,124 @@
+import { usePasswordStrength } from "../../lib/password-strength/password-strength.js";
+import { useLocale } from "../locale-provider/locale-provider.js";
+import password_field_module_default from "./password-field.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Meter } from "@base-ui/react/meter";
+// src/components/password-field/password-strength.tsx
+var MAX_SCORE = 4;
+/**
+* The strength band of a password as a labelled meter, followed by zxcvbn's own
+* warning and suggestions in the locale's language. It suspends while that
+* language's dictionaries load, and renders nothing for an empty password.
+*
+* @example
+* <PasswordStrength password={password} label="Password strength" scoreLabels={SCORE_LABELS} />
+*/
+var PasswordStrength = (t0) => {
+	const $ = c(23);
+	const { password, label, scoreLabels, languages, className } = t0;
+	const strength = usePasswordStrength(password, useLocale(), languages);
+	if (strength === null) return null;
+	const band = scoreLabels[strength.score];
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(password_field_module_default.strength, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== band) {
+		t2 = () => band;
+		$[2] = band;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== label) {
+		t3 = /* @__PURE__ */ jsx(Meter.Label, {
+			className: password_field_module_default.meterLabel,
+			children: label
+		});
+		$[4] = label;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== band) {
+		t4 = /* @__PURE__ */ jsx(Meter.Value, {
+			className: password_field_module_default.meterValue,
+			children: () => band
+		});
+		$[6] = band;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Meter.Track, {
+			className: password_field_module_default.meterTrack,
+			children: /* @__PURE__ */ jsx(Meter.Indicator, { className: password_field_module_default.meterIndicator })
+		});
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== strength.score || $[10] !== t2 || $[11] !== t3 || $[12] !== t4) {
+		t6 = /* @__PURE__ */ jsxs(Meter.Root, {
+			value: strength.score,
+			max: MAX_SCORE,
+			"data-score": strength.score,
+			getAriaValueText: t2,
+			className: password_field_module_default.meter,
+			children: [
+				t3,
+				t4,
+				t5
+			]
+		});
+		$[9] = strength.score;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== strength.warning) {
+		t7 = strength.warning !== "" && /* @__PURE__ */ jsx("p", {
+			className: password_field_module_default.feedback,
+			children: strength.warning
+		});
+		$[14] = strength.warning;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== strength.suggestions) {
+		t8 = strength.suggestions.length > 0 && /* @__PURE__ */ jsx("ul", {
+			className: password_field_module_default.suggestions,
+			children: strength.suggestions.map(_temp)
+		});
+		$[16] = strength.suggestions;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t1 || $[19] !== t6 || $[20] !== t7 || $[21] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("div", {
+			className: t1,
+			children: [
+				t6,
+				t7,
+				t8
+			]
+		});
+		$[18] = t1;
+		$[19] = t6;
+		$[20] = t7;
+		$[21] = t8;
+		$[22] = t9;
+	} else t9 = $[22];
+	return t9;
+};
+function _temp(suggestion) {
+	return /* @__PURE__ */ jsx("li", {
+		className: password_field_module_default.feedback,
+		children: suggestion
+	}, suggestion);
+}
+export { PasswordStrength };

package/dist/components/password-field/tsf-password-field.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type PasswordFieldBaseProps, type PasswordFieldStrengthProps } from "./password-field.tsx";
+export type TSFPasswordFieldProps = Omit<PasswordFieldBaseProps, keyof ConnectedFieldProps | "value" | "onValueChange"> & PasswordFieldStrengthProps;
+/**
+ * `PasswordField` bound to the TanStack Form field it renders in. Registered as
+ * `field.PasswordField`.
+ *
+ * @example
+ * <form.AppField name="password">
+ * 	{field => <field.PasswordField label="Password" optionalLabel="optional" showPasswordLabel="Show password" hidePasswordLabel="Hide password" />}
+ * </form.AppField>
+ */
+export declare const TSFPasswordField: (props: TSFPasswordFieldProps) => ReactNode;
+//# sourceMappingURL=tsf-password-field.d.ts.map

package/dist/components/password-field/tsf-password-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tsf-password-field.d.ts","sourceRoot":"","sources":["../../../src/components/password-field/tsf-password-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACN,KAAK,mBAAmB,EAExB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAEN,KAAK,sBAAsB,EAC3B,KAAK,0BAA0B,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACvC,sBAAsB,EACtB,MAAM,mBAAmB,GAAG,OAAO,GAAG,eAAe,CACrD,GACA,0BAA0B,CAAC;AAE5B;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,UACrB,qBAAqB,KAC1B,SAWF,CAAC"}

package/dist/components/password-field/tsf-password-field.js

@@ -0,0 +1,34 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { PasswordField } from "./password-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/password-field/tsf-password-field.tsx
+/**
+* `PasswordField` bound to the TanStack Form field it renders in. Registered as
+* `field.PasswordField`.
+*
+* @example
+* <form.AppField name="password">
+* 	{field => <field.PasswordField label="Password" optionalLabel="optional" showPasswordLabel="Show password" hidePasswordLabel="Hide password" />}
+* </form.AppField>
+*/
+var TSFPasswordField = (props) => {
+	const $ = c(5);
+	const { field, props: connected } = useConnectedField();
+	let t0;
+	if ($[0] !== connected || $[1] !== field.handleChange || $[2] !== field.state.value || $[3] !== props) {
+		t0 = /* @__PURE__ */ jsx(PasswordField, {
+			...props,
+			...connected,
+			value: field.state.value,
+			onValueChange: field.handleChange
+		});
+		$[0] = connected;
+		$[1] = field.handleChange;
+		$[2] = field.state.value;
+		$[3] = props;
+		$[4] = t0;
+	} else t0 = $[4];
+	return t0;
+};
+export { TSFPasswordField };

package/dist/components/phone-field/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./phone-field.tsx";
+export * from "./tsf-phone-field.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/phone-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/phone-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC"}

package/dist/components/phone-field/index.js

@@ -0,0 +1,3 @@
+import { PhoneField } from "./phone-field.js";
+import { TSFPhoneField } from "./tsf-phone-field.js";
+export { PhoneField, TSFPhoneField };

package/dist/components/phone-field/phone-field.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { type TextFieldBaseProps, type TextFieldClearProps, type TextPresetProps } from "../text-field/index.ts";
+/** What a phone field takes beside the preset props: its `autoComplete`, and the clear button. */
+export type PhoneFieldExtraProps = Pick<TextFieldBaseProps, "autoComplete"> & TextFieldClearProps;
+export type PhoneFieldProps = TextPresetProps & PhoneFieldExtraProps;
+/**
+ * A telephone field, with the telephone keypad. It offers the user's own number
+ * only when told to, with `autoComplete="tel"` on a form about the signed-in
+ * user. The number's rule belongs to the form's schema.
+ *
+ * @example
+ * <PhoneField label="Phone number" optionalLabel="optional" autoComplete="tel" value={phone} onValueChange={setPhone} />
+ */
+export declare const PhoneField: (props: PhoneFieldProps) => ReactNode;
+//# sourceMappingURL=phone-field.d.ts.map

package/dist/components/phone-field/phone-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-field.d.ts","sourceRoot":"","sources":["../../../src/components/phone-field/phone-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEN,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,MAAM,wBAAwB,CAAC;AAEhC,kGAAkG;AAClG,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACtC,kBAAkB,EAClB,cAAc,CACd,GACA,mBAAmB,CAAC;AAErB,MAAM,MAAM,eAAe,GAAG,eAAe,GAC5C,oBAAoB,CAAC;AAEtB;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,UACf,eAAe,KACpB,SAQF,CAAC"}

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

@@ -0,0 +1,29 @@
+import { TextField } from "../text-field/text-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/phone-field/phone-field.tsx
+/**
+* A telephone field, with the telephone keypad. It offers the user's own number
+* only when told to, with `autoComplete="tel"` on a form about the signed-in
+* user. The number's rule belongs to the form's schema.
+*
+* @example
+* <PhoneField label="Phone number" optionalLabel="optional" autoComplete="tel" value={phone} onValueChange={setPhone} />
+*/
+var PhoneField = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(TextField, {
+			...props,
+			type: "tel",
+			inputMode: "tel",
+			autoCapitalize: "none",
+			spellCheck: false
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+export { PhoneField };

package/dist/components/phone-field/tsf-phone-field.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { type TSFTextPresetProps } from "../text-field/index.ts";
+import { type PhoneFieldExtraProps } from "./phone-field.tsx";
+export type TSFPhoneFieldProps = TSFTextPresetProps<PhoneFieldExtraProps>;
+/**
+ * `PhoneField` bound to the TanStack Form field it renders in. Registered as
+ * `field.PhoneField`.
+ *
+ * @example
+ * <form.AppField name="phone">
+ * 	{field => <field.PhoneField label="Phone number" optionalLabel="optional" autoComplete="tel" />}
+ * </form.AppField>
+ */
+export declare const TSFPhoneField: (props: TSFPhoneFieldProps) => ReactNode;
+//# sourceMappingURL=tsf-phone-field.d.ts.map

package/dist/components/phone-field/tsf-phone-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tsf-phone-field.d.ts","sourceRoot":"","sources":["../../../src/components/phone-field/tsf-phone-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEN,KAAK,kBAAkB,EACvB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAEN,KAAK,oBAAoB,EACzB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,kBAAkB,GAC7B,kBAAkB,CAAC,oBAAoB,CAAC,CAAC;AAE1C;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,EAAE,CAC3B,KAAK,EAAE,kBAAkB,KACrB,SAC+C,CAAC"}

package/dist/components/phone-field/tsf-phone-field.js

@@ -0,0 +1,14 @@
+import { connectTextPreset } from "../text-field/connect-text-preset.js";
+import { PhoneField } from "./phone-field.js";
+// src/components/phone-field/tsf-phone-field.tsx
+/**
+* `PhoneField` bound to the TanStack Form field it renders in. Registered as
+* `field.PhoneField`.
+*
+* @example
+* <form.AppField name="phone">
+* 	{field => <field.PhoneField label="Phone number" optionalLabel="optional" autoComplete="tel" />}
+* </form.AppField>
+*/
+var TSFPhoneField = connectTextPreset(PhoneField);
+export { TSFPhoneField };

package/dist/components/photo-field/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./photo-field.tsx";
+export * from "./photo-input.tsx";
+export * from "./tsf-photo-field.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/photo-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/photo-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC"}

package/dist/components/photo-field/index.js

@@ -0,0 +1,4 @@
+import { PhotoField } from "./photo-field.js";
+import { PhotoInput } from "./photo-input.js";
+import { TSFPhotoField } from "./tsf-photo-field.js";
+export { PhotoField, PhotoInput, TSFPhotoField };

package/dist/components/photo-field/photo-field.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import { type FieldProps } from "../field/index.ts";
+import { type PhotoInputProps } from "./photo-input.tsx";
+export type PhotoFieldProps = Omit<PhotoInputProps, "labelledBy" | "describedBy" | "invalid" | "pending"> & FieldProps & Readonly<{
+    /** Applied to the field, where a caller lays it out itself. */
+    className?: string;
+}>;
+/**
+ * A labelled photo picker: the label, the circle that is both the photo and
+ * the button that changes it, then the description and error. The label is
+ * not a native one, because the circle is named by it through
+ * `aria-labelledby` and also announces whether a photo is set.
+ *
+ * @example
+ * <PhotoField
+ * 	label="Profile photo"
+ * 	optionalLabel="optional"
+ * 	value={file}
+ * 	onValueChange={setFile}
+ * 	hasStoredImage={user.photo !== null}
+ * 	defaultPreview={<Avatar name={user.name} />}
+ * 	accept={["image/png", "image/jpeg"]}
+ * 	previewLabel="Preview"
+ * 	photoSetLabel="Photo set"
+ * 	noPhotoLabel="No photo"
+ * 	removeLabel="Remove photo"
+ * />
+ */
+export declare const PhotoField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, readOnly, className, ...controlProps }: PhotoFieldProps) => ReactNode;
+//# sourceMappingURL=photo-field.d.ts.map

package/dist/components/photo-field/photo-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"photo-field.d.ts","sourceRoot":"","sources":["../../../src/components/photo-field/photo-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAEN,KAAK,UAAU,EAEf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEN,KAAK,eAAe,EACpB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,eAAe,GAAG,IAAI,CACjC,eAAe,EACf,YAAY,GAAG,aAAa,GAAG,SAAS,GAAG,SAAS,CACpD,GACA,UAAU,GACV,QAAQ,CAAC;IACR,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,UAAU,+HAYpB,eAAe,KAAG,SAoCpB,CAAC"}