@marianmeres/stuic 3.83.3 → 3.84.0

package/dist/components/Checkout/CheckoutAddressForm.svelte

@@ -28,6 +28,7 @@
 			name?: boolean;
 			street?: boolean;
 			city?: boolean;
+			state_or_region?: boolean;
 			postal_code?: boolean;
 			country?: boolean;
 			phone?: boolean;
@@ -163,8 +164,8 @@
 		/>
 	{/if}
 
-	<!-- City + Postal Code (2-column grid) -->
-	{#if fields?.city !== false || fields?.postal_code !== false}
+	<!-- City + State/Region + Postal Code (responsive 2- or 3-column grid) -->
+	{#if fields?.city !== false || fields?.state_or_region !== false || fields?.postal_code !== false}
 		<div class={unstyled ? undefined : "stuic-checkout-address-row"}>
 			{#if fields?.city !== false}
 				<!-- svelte-ignore binding_property_non_reactive -->
@@ -183,6 +184,23 @@
 					}}
 				/>
 			{/if}
+			{#if fields?.state_or_region !== false}
+				<!-- svelte-ignore binding_property_non_reactive -->
+				<FieldInput
+					bind:value={address.state_or_region}
+					label={t("checkout.address.state_or_region_label")}
+					labelLeftBreakpoint={0}
+					placeholder={t("checkout.address.state_or_region_placeholder")}
+					required={isRequired("state_or_region")}
+					name="{label}-state_or_region"
+					id="{label}-state_or_region"
+					validate={{
+						customValidator(val) {
+							return fieldError("state_or_region") || "";
+						},
+					}}
+				/>
+			{/if}
 			{#if fields?.postal_code !== false}
 				<!-- svelte-ignore binding_property_non_reactive -->
 				<FieldInput
@@ -238,7 +256,9 @@
 	{#if fields?.phone !== false}
 		<FieldPhoneNumber
 			value={address.phone ?? ""}
-			onChange={(v) => { address.phone = v; }}
+			onChange={(v) => {
+				address.phone = v;
+			}}
 			label={t("checkout.address.phone_label")}
 			placeholder={t("checkout.address.phone_placeholder")}
 			required={isRequired("phone")}

package/dist/components/Checkout/CheckoutAddressForm.svelte.d.ts

@@ -20,6 +20,7 @@ export interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, "childr
         name?: boolean;
         street?: boolean;
         city?: boolean;
+        state_or_region?: boolean;
         postal_code?: boolean;
         country?: boolean;
         phone?: boolean;

package/dist/components/Checkout/_address-form.css

@@ -22,6 +22,10 @@
 		grid-template-columns: 1fr;
 	}
 
+	.stuic-checkout-address-row:has(> :nth-child(3)) {
+		grid-template-columns: repeat(3, 1fr);
+	}
+
 	.stuic-checkout-guest-form[data-small] .stuic-checkout-guest-row,
 	.stuic-checkout-address[data-small] .stuic-checkout-address-row {
 		grid-template-columns: 1fr;

package/dist/components/Checkout/_internal/checkout-i18n-defaults.js

@@ -64,6 +64,8 @@ const DEFAULTS = {
     "checkout.address.street_placeholder": "",
     "checkout.address.city_label": "City",
     "checkout.address.city_placeholder": "",
+    "checkout.address.state_or_region_label": "State / Region",
+    "checkout.address.state_or_region_placeholder": "",
     "checkout.address.postal_code_label": "Postal Code",
     "checkout.address.postal_code_placeholder": "",
     "checkout.address.country_label": "Country",

package/dist/components/Checkout/_internal/checkout-types.d.ts

@@ -14,6 +14,7 @@ export interface CheckoutAddressData {
     name: string;
     street: string;
     city: string;
+    state_or_region?: string;
     postal_code: string;
     country: string;
     phone?: string;

package/dist/components/Checkout/_internal/checkout-utils.js

@@ -48,6 +48,7 @@ const ALL_ADDRESS_FIELDS = [
     "name",
     "street",
     "city",
+    "state_or_region",
     "postal_code",
     "country",
     "phone",
@@ -106,7 +107,15 @@ export function validateLoginForm(data, t) {
 // Empty data factories
 // ====================================================================
 export function createEmptyAddress() {
-    return { name: "", street: "", city: "", postal_code: "", country: "", phone: "" };
+    return {
+        name: "",
+        street: "",
+        city: "",
+        state_or_region: "",
+        postal_code: "",
+        country: "",
+        phone: "",
+    };
 }
 export function createEmptyCustomerFormData() {
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.83.3",
+	"version": "3.84.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run prepack",
@@ -88,7 +88,7 @@
 		"@marianmeres/parse-boolean": "^2.1.0",
 		"@marianmeres/ticker": "^1.17.1",
 		"@marianmeres/tree": "^2.3.0",
-		"libphonenumber-js": "^1.13.1",
+		"libphonenumber-js": "^1.13.2",
 		"runed": "^0.23.4",
 		"tailwind-merge": "^3.6.0"
 	}