@eventuras/ratio-ui 1.0.0

package/dist/forms/Input/InputProps.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Defines the types of input elements supported, based on standard HTML input types.
+ * This type restriction helps in ensuring that only valid HTML input types can be used.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types For more information on HTML input types.
+ */
+export type ValidInputTypes = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+/**
+ * Generic interface for primitive input component properties.
+ * This represents the base properties for input elements without composite features like labels.
+ *
+ * @property {string} [id] - Optional. Unique identifier for the input element.
+ * @property {string} name - Required. Name of the input element, used for form submission.
+ * @property {ValidInputTypes} [type='text'] - Optional. Specifies the type of input. Defaults to 'text'.
+ * @property {string} [placeholder] - Optional. Hint to the user about what to enter in the input.
+ * @property {string} [className] - Optional. Additional CSS classes for styling the input element.
+ * @property {string} [testId] - Optional. Attribute for identifying elements in tests.
+ * @property {boolean} [disabled] - Optional. Whether the input is disabled.
+ * @property {boolean} [required] - Optional. Whether the input is required.
+ * @property {[x: string]: any} - Optional. Allows for any other properties not explicitly defined, ensuring flexibility.
+ */
+export interface InputProps {
+    id?: string;
+    name: string;
+    type?: ValidInputTypes;
+    placeholder?: string;
+    className?: string;
+    testId?: string;
+    disabled?: boolean;
+    required?: boolean;
+    [x: string]: any;
+}
+/**
+ * Props for composite input field components (TextField, NumberField, Select, etc).
+ * Extends InputProps with label, description, and error handling for complete form fields.
+ *
+ * @property {string} [label] - Optional. Text label associated with the input element.
+ * @property {string} [description] - Optional. Description of the input element, providing additional context.
+ * @property {{ [key: string]: { message: string } }} [errors] - Optional. Object containing error messages, keyed by input names.
+ * @property {boolean} [multiline] - Optional. Whether to render as textarea instead of input.
+ * @property {number} [rows] - Optional. Number of rows for textarea.
+ * @property {number} [cols] - Optional. Number of columns for textarea.
+ * @property {boolean} [noMargin] - Optional. Remove default margin.
+ * @property {boolean} [noWrapper] - Optional. Remove wrapper div.
+ */
+export interface InputFieldProps extends InputProps {
+    label?: string;
+    description?: string;
+    errors?: {
+        [key: string]: {
+            message: string;
+        };
+    };
+    noMargin?: boolean;
+    noWrapper?: boolean;
+}
+//# sourceMappingURL=InputProps.d.ts.map

package/dist/forms/Input/InputProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputProps.d.ts","sourceRoot":"","sources":["../../../src/forms/Input/InputProps.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GACvB,QAAQ,GACR,UAAU,GACV,OAAO,GACP,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,MAAM,GACN,QAAQ,GACR,OAAO,GACP,OAAO,GACP,QAAQ,GACR,UAAU,GACV,OAAO,GACP,OAAO,GACP,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,MAAM,CAAC;AAEX;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,UAAU;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;CAClB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG;YAAE,OAAO,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/forms/Input/PhoneInput.d.ts

@@ -0,0 +1,45 @@
+/** See PhoneInputProps.countries */
+export interface CountryCode {
+    /** Country display name, e.g. "Norway" */
+    name: string;
+    /** Calling code, unique key, e.g. "+47" */
+    code: string;
+    /** Flag emoji */
+    flag: string;
+}
+/** See PhoneInputProps.onChange */
+export interface PhoneInputChange {
+    /** Full E.164-like number, e.g. "+4712345678" */
+    fullNumber: string;
+    /** National part only */
+    localNumber: string;
+    /** Selected country (or null) */
+    country: CountryCode | null;
+}
+/** Phone input with RAC ComboBox country selector */
+export interface PhoneInputProps {
+    /** Form field name */
+    name?: string;
+    /** Visible label */
+    label?: string;
+    /** Help text */
+    description?: string;
+    /** Default calling code key (e.g. "+47") */
+    defaultCode?: string;
+    /** Custom country list (defaults to COUNTRY_CODES) */
+    countries?: CountryCode[];
+    /** Full international phone number (controlled) */
+    value?: string;
+    /** Field errors map */
+    errors?: Record<string, {
+        message: string;
+    } | undefined>;
+    /** Disable inputs */
+    disabled?: boolean;
+    /** Change callback with parsed parts */
+    onChange?: (value: PhoneInputChange) => void;
+    /** Test ID for the phone number input */
+    testId?: string;
+}
+export declare function PhoneInput({ name, label, description, defaultCode, countries, value, errors, disabled, onChange, testId, }: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PhoneInput.d.ts.map

package/dist/forms/Input/PhoneInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/forms/Input/PhoneInput.tsx"],"names":[],"mappings":"AAkBA,oCAAoC;AACpC,MAAM,WAAW,WAAW;IAC1B,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,mCAAmC;AACnC,MAAM,WAAW,gBAAgB;IAC/B,iDAAiD;IACjD,UAAU,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;CAC7B;AAED,qDAAqD;AACrD,MAAM,WAAW,eAAe;IAC9B,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,SAAS,CAAC,EAAE,WAAW,EAAE,CAAC;IAC1B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC,CAAC;IACzD,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyBD,wBAAgB,UAAU,CAAC,EACzB,IAAc,EACd,KAAsB,EACtB,WAAW,EACX,WAAmB,EACnB,SAAyB,EACzB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,MAAM,GACP,EAAE,eAAe,2CA6PjB"}

package/dist/forms/Input/PhoneInput.js

@@ -0,0 +1,197 @@
+"use client";
+import { componentStyles as e, formStyles as t, textStyles as n } from "../styles/formStyles.js";
+import { Label as r } from "../common/Label.js";
+import { Input as i } from "./Input.js";
+import { InputError as a } from "../common/InputError.js";
+import { InputDescription as o } from "../common/InputDescription.js";
+import { COUNTRY_CODES as s } from "./PhoneInputCountryCodes.js";
+import c, { useCallback as l, useEffect as u, useMemo as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Button as h, ComboBox as g, Input as _, ListBox as v, ListBoxItem as y, Popover as b } from "react-aria-components";
+//#region src/forms/Input/PhoneInput.tsx
+var x = {
+	"+47": {
+		exact: 8,
+		message: "Norwegian phone numbers must be exactly 8 digits"
+	},
+	"+46": {
+		min: 7,
+		max: 13,
+		message: "Swedish phone numbers must be 7 to 13 digits"
+	},
+	"+45": {
+		exact: 8,
+		message: "Danish phone numbers must be exactly 8 digits"
+	}
+}, S = c.memo(({ country: t, stableId: r }) => /* @__PURE__ */ m(y, {
+	id: r,
+	textValue: `${t.flag} ${t.code} ${t.name}`,
+	className: e.listBoxItem,
+	children: [
+		/* @__PURE__ */ p("span", {
+			className: "text-lg mr-2",
+			children: t.flag
+		}),
+		/* @__PURE__ */ p("span", {
+			className: n.listBoxItemPrimary,
+			children: t.code
+		}),
+		/* @__PURE__ */ p("span", {
+			className: `${n.listBoxItemSecondary} ml-2`,
+			children: t.name
+		})
+	]
+}, r));
+S.displayName = "CountryItem";
+function C({ name: c = "phone", label: C = "Phone Number", description: w, defaultCode: T = "+47", countries: E = s, value: D, errors: O, disabled: k, onChange: A, testId: j }) {
+	let M = d(() => E.find((e) => e.code === T) || E[0] || {
+		name: "",
+		code: "",
+		flag: ""
+	}, [E, T]), [N, P] = f(M), [F, I] = f(""), [L, R] = f(""), [z, B] = f(null), V = l((e, t) => {
+		let n = e ? `${e.code}${t}` : t;
+		A?.({
+			fullNumber: n,
+			localNumber: t,
+			country: e
+		});
+	}, [A]);
+	u(() => {
+		if (!D) {
+			I("");
+			return;
+		}
+		let e = E.find((e) => D.startsWith(e.code));
+		e ? (P(e), I(D.slice(e.code.length))) : (P(M), I(D.replace(/^\+/, "")));
+	}, [
+		D,
+		E,
+		M
+	]), u(() => {
+		R(N.code);
+	}, [N]);
+	let H = l((e) => {
+		let t = e.target.value.replaceAll(/\D/g, "");
+		I(t), B(null), V(N, t);
+	}, [N, V]), U = l(() => {
+		if (!F) {
+			B(null);
+			return;
+		}
+		let e = x[N.code], t = null;
+		e ? (e.exact !== void 0 && F.length !== e.exact || e.min !== void 0 && F.length < e.min || e.max !== void 0 && F.length > e.max) && (t = e.message) : F.length < 6 ? t = "Phone number must be at least 6 digits" : F.length > 15 && (t = "Phone number must be at most 15 digits"), B(t);
+	}, [N.code, F]), W = l((e) => {
+		if (!e || e === "no-results") {
+			V(null, F);
+			return;
+		}
+		let [t, n] = String(e).split(":"), r = n?.replaceAll("_", " "), i = E.find((e) => e.code === t && e.name === r) || null;
+		i && P(i), V(i, F);
+	}, [
+		E,
+		V,
+		F
+	]), G = l((e) => {
+		R(e);
+	}, []), K = l((e) => {
+		e || R(N.code);
+	}, [N]), q = l((e) => {
+		let t = e.trim();
+		if (!t) return !1;
+		let n = t.startsWith("+") ? t : `+${t}`, r = E.find((e) => e.code.toLowerCase() === n.toLowerCase());
+		return r ? (r.code !== N.code && (P(r), V(r, F)), R(r.code), !0) : !1;
+	}, [
+		E,
+		N.code,
+		V,
+		F
+	]), J = l(() => {
+		q(L) || R(N.code);
+	}, [
+		q,
+		L,
+		N.code
+	]), Y = d(() => {
+		let e = L.trim().toLowerCase();
+		return !e || e === N.code.toLowerCase() ? E : E.filter((t) => t.name.toLowerCase().includes(e) || t.code.toLowerCase().includes(e));
+	}, [
+		E,
+		L,
+		N.code
+	]), X = d(() => N.code && N.name ? `${N.code}:${N.name.replaceAll(/\s+/g, "_")}` : null, [N.code, N.name]), Z = d(() => Y.map((e) => {
+		let t = `${e.code}:${e.name.replaceAll(/\s+/g, "_")}`;
+		return /* @__PURE__ */ p(S, {
+			country: e,
+			stableId: t
+		}, t);
+	}), [Y]);
+	return /* @__PURE__ */ m("div", {
+		className: t.inputWrapper,
+		children: [
+			C && /* @__PURE__ */ p(r, { children: C }),
+			w && /* @__PURE__ */ p(o, { children: w }),
+			/* @__PURE__ */ m("div", {
+				className: `${e.phoneInputContainer} flex items-stretch`,
+				children: [/* @__PURE__ */ m(g, {
+					selectedKey: X,
+					inputValue: L,
+					onSelectionChange: W,
+					onInputChange: G,
+					onOpenChange: K,
+					className: `${e.integratedComboBoxContainer} min-w-16 max-w-24`,
+					allowsCustomValue: !1,
+					isDisabled: k,
+					"aria-label": "Select country code",
+					menuTrigger: "input",
+					children: [/* @__PURE__ */ m("div", {
+						className: e.comboBoxInputWrapper,
+						children: [/* @__PURE__ */ p(_, {
+							className: e.comboBoxInputField,
+							placeholder: "Select country",
+							onBlur: J,
+							onKeyDown: (e) => {
+								if (e.key === "Tab" || e.key === "Enter") {
+									let t = e.target.value;
+									q(t);
+								}
+							}
+						}), /* @__PURE__ */ p(h, {
+							className: `px-2 ${n.dropdownButton}`,
+							children: "▾"
+						})]
+					}), /* @__PURE__ */ p(b, {
+						className: `${e.popover} max-h-60 overflow-hidden`,
+						children: /* @__PURE__ */ m(v, {
+							className: "max-h-60 overflow-y-auto",
+							children: [Z, Y.length === 0 && /* @__PURE__ */ p(y, {
+								id: "no-results",
+								textValue: "No countries found",
+								className: `px-3 py-2 ${n.emptyStateText}`,
+								isDisabled: !0,
+								children: "No countries found"
+							})]
+						})
+					})]
+				}), /* @__PURE__ */ p(i, {
+					name: c,
+					type: "tel",
+					inputMode: "numeric",
+					pattern: "[0-9]*",
+					value: F,
+					onChange: H,
+					onBlur: U,
+					disabled: k,
+					placeholder: "Enter phone number",
+					className: "p-2 bg-gray-50 dark:bg-gray-900 border-0 rounded-none focus:ring-0 flex-1 w-full",
+					"data-testid": j
+				})]
+			}),
+			(z || O?.[c]?.message) && /* @__PURE__ */ p(a, {
+				errors: { [c]: { message: z || O?.[c]?.message || "" } },
+				name: c
+			})
+		]
+	});
+}
+//#endregion
+export { C as PhoneInput };

package/dist/forms/Input/PhoneInputCountryCodes.d.ts

@@ -0,0 +1,11 @@
+export interface CountryCode {
+    name: string;
+    code: string;
+    flag: string;
+}
+/**
+ * A comprehensive list of international calling codes with emoji flags.
+ * Based on ITU-T E.164 country calling codes.
+ */
+export declare const COUNTRY_CODES: CountryCode[];
+//# sourceMappingURL=PhoneInputCountryCodes.d.ts.map

package/dist/forms/Input/PhoneInputCountryCodes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInputCountryCodes.d.ts","sourceRoot":"","sources":["../../../src/forms/Input/PhoneInputCountryCodes.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,WAAW,EAmHtC,CAAC"}