@enadhq/enad-react-sdk 1.0.0 → 1.1.0

package/dist/client/storefront/carousel/swipeable-carousel.mjs

@@ -0,0 +1,50 @@
+"use client";
+import { cn } from "../../ui/utils.mjs";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "../../ui-resolver/carousel.mjs";
+import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/carousel/swipeable-carousel.tsx
+function SwipeableCarousel({ items, className, arrows, showDots = true, dotsClassName, activeSlide, onSlideChange }) {
+	const [api, setApi] = React$1.useState();
+	const [current, setCurrent] = React$1.useState(0);
+	const [count, setCount] = React$1.useState(0);
+	React$1.useEffect(() => {
+		if (!api) return;
+		setCount(api.scrollSnapList().length);
+		setCurrent(api.selectedScrollSnap());
+		api.on("select", () => {
+			const idx = api.selectedScrollSnap();
+			setCurrent(idx);
+			onSlideChange?.(idx);
+		});
+	}, [api, onSlideChange]);
+	React$1.useEffect(() => {
+		if (!api || activeSlide === void 0) return;
+		if (api.selectedScrollSnap() !== activeSlide) api.scrollTo(activeSlide);
+	}, [api, activeSlide]);
+	if (items.length === 0) return null;
+	const singleItem = items.length === 1;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", arrows === "outset" && "mx-12", className),
+		children: [/* @__PURE__ */ jsxs(Carousel, {
+			setApi,
+			opts: { loop: !singleItem },
+			children: [/* @__PURE__ */ jsx(CarouselContent, { children: items.map((item, index) => /* @__PURE__ */ jsx(CarouselItem, { children: item }, index)) }), arrows && !singleItem && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CarouselPrevious, { className: arrows === "inset" ? "left-3 -translate-x-0" : void 0 }), /* @__PURE__ */ jsx(CarouselNext, { className: arrows === "inset" ? "right-3 translate-x-0" : void 0 })] })]
+		}), showDots && !singleItem && count > 1 && /* @__PURE__ */ jsx("div", {
+			className: cn("absolute inset-x-0 bottom-3 z-10 flex items-center justify-center gap-1.5", dotsClassName),
+			role: "tablist",
+			children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "tab",
+				"aria-selected": index === current,
+				"aria-label": `Go to slide ${index + 1}`,
+				onClick: () => api?.scrollTo(index),
+				className: cn("size-2 rounded-full transition-all shadow-sm", index === current ? "bg-primary" : "bg-background/70 hover:bg-background/90")
+			}, index))
+		})]
+	});
+}
+//#endregion
+export { SwipeableCarousel };
+
+//# sourceMappingURL=swipeable-carousel.mjs.map

package/dist/client/storefront/carousel/swipeable-carousel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipeable-carousel.mjs","names":["React"],"sources":["../../../../src/client/storefront/carousel/swipeable-carousel.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  type CarouselApi,\n} from \"../../ui-resolver/carousel\"\nimport { cn } from \"../../ui/utils\"\n\ninterface SwipeableCarouselProps {\n  items: React.ReactNode[]\n  className?: string\n  /** 'inset' — arrows float over the image edges; 'outset' — arrows sit outside the image bounds */\n  arrows?: \"inset\" | \"outset\"\n  showDots?: boolean\n  dotsClassName?: string\n  activeSlide?: number\n  onSlideChange?: (index: number) => void\n}\n\nfunction SwipeableCarousel({\n  items,\n  className,\n  arrows,\n  showDots = true,\n  dotsClassName,\n  activeSlide,\n  onSlideChange,\n}: SwipeableCarouselProps) {\n  const [api, setApi] = React.useState<CarouselApi>()\n  const [current, setCurrent] = React.useState(0)\n  const [count, setCount] = React.useState(0)\n\n  React.useEffect(() => {\n    if (!api) return\n\n    setCount(api.scrollSnapList().length)\n    setCurrent(api.selectedScrollSnap())\n\n    api.on(\"select\", () => {\n      const idx = api.selectedScrollSnap()\n      setCurrent(idx)\n      onSlideChange?.(idx)\n    })\n  }, [api, onSlideChange])\n\n  React.useEffect(() => {\n    if (!api || activeSlide === undefined) return\n    if (api.selectedScrollSnap() !== activeSlide) {\n      api.scrollTo(activeSlide)\n    }\n  }, [api, activeSlide])\n\n  if (items.length === 0) return null\n\n  const singleItem = items.length === 1\n\n  return (\n    <div className={cn(\"relative\", arrows === \"outset\" && \"mx-12\", className)}>\n      <Carousel setApi={setApi} opts={{ loop: !singleItem }}>\n        <CarouselContent>\n          {items.map((item, index) => (\n            <CarouselItem key={index}>{item}</CarouselItem>\n          ))}\n        </CarouselContent>\n\n        {arrows && !singleItem && (\n          <>\n            <CarouselPrevious\n              className={arrows === \"inset\" ? \"left-3 -translate-x-0\" : undefined}\n            />\n            <CarouselNext\n              className={arrows === \"inset\" ? \"right-3 translate-x-0\" : undefined}\n            />\n          </>\n        )}\n      </Carousel>\n\n      {showDots && !singleItem && count > 1 && (\n        <div className={cn(\"absolute inset-x-0 bottom-3 z-10 flex items-center justify-center gap-1.5\", dotsClassName)} role=\"tablist\">\n          {Array.from({ length: count }).map((_, index) => (\n            <button\n              key={index}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={index === current}\n              aria-label={`Go to slide ${index + 1}`}\n              onClick={() => api?.scrollTo(index)}\n              className={cn(\n                \"size-2 rounded-full transition-all shadow-sm\",\n                index === current\n                  ? \"bg-primary\"\n                  : \"bg-background/70 hover:bg-background/90\"\n              )}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { SwipeableCarousel, type SwipeableCarouselProps }\n"],"mappings":";;;;;;AAwBA,SAAS,kBAAkB,EACzB,OACA,WACA,QACA,WAAW,MACX,eACA,aACA,iBACyB;CACzB,MAAM,CAAC,KAAK,UAAUA,QAAM,UAAuB;CACnD,MAAM,CAAC,SAAS,cAAcA,QAAM,SAAS,EAAE;CAC/C,MAAM,CAAC,OAAO,YAAYA,QAAM,SAAS,EAAE;AAE3C,SAAM,gBAAgB;AACpB,MAAI,CAAC,IAAK;AAEV,WAAS,IAAI,gBAAgB,CAAC,OAAO;AACrC,aAAW,IAAI,oBAAoB,CAAC;AAEpC,MAAI,GAAG,gBAAgB;GACrB,MAAM,MAAM,IAAI,oBAAoB;AACpC,cAAW,IAAI;AACf,mBAAgB,IAAI;IACpB;IACD,CAAC,KAAK,cAAc,CAAC;AAExB,SAAM,gBAAgB;AACpB,MAAI,CAAC,OAAO,gBAAgB,KAAA,EAAW;AACvC,MAAI,IAAI,oBAAoB,KAAK,YAC/B,KAAI,SAAS,YAAY;IAE1B,CAAC,KAAK,YAAY,CAAC;AAEtB,KAAI,MAAM,WAAW,EAAG,QAAO;CAE/B,MAAM,aAAa,MAAM,WAAW;AAEpC,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,WAAW,YAAY,SAAS,UAAU;YAAzE,CACE,qBAAC,UAAD;GAAkB;GAAQ,MAAM,EAAE,MAAM,CAAC,YAAY;aAArD,CACE,oBAAC,iBAAD,EAAA,UACG,MAAM,KAAK,MAAM,UAChB,oBAAC,cAAD,EAAA,UAA2B,MAAoB,EAA5B,MAA4B,CAC/C,EACc,CAAA,EAEjB,UAAU,CAAC,cACV,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,kBAAD,EACE,WAAW,WAAW,UAAU,0BAA0B,KAAA,GAC1D,CAAA,EACF,oBAAC,cAAD,EACE,WAAW,WAAW,UAAU,0BAA0B,KAAA,GAC1D,CAAA,CACD,EAAA,CAAA,CAEI;MAEV,YAAY,CAAC,cAAc,QAAQ,KAClC,oBAAC,OAAD;GAAK,WAAW,GAAG,6EAA6E,cAAc;GAAE,MAAK;aAClH,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,UACrC,oBAAC,UAAD;IAEE,MAAK;IACL,MAAK;IACL,iBAAe,UAAU;IACzB,cAAY,eAAe,QAAQ;IACnC,eAAe,KAAK,SAAS,MAAM;IACnC,WAAW,GACT,gDACA,UAAU,UACN,eACA,0CACL;IACD,EAZK,MAYL,CACF;GACE,CAAA,CAEJ"}

package/dist/client/storefront/checkout/address-form.d.ts

@@ -0,0 +1,48 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/checkout/address-form.d.ts
+interface AddressData {
+  firstName: string;
+  lastName: string;
+  company?: string;
+  address1: string;
+  address2?: string;
+  city: string;
+  postalCode: string;
+  region?: string;
+  country: string;
+  phone?: string;
+  email?: string;
+}
+interface AddressFormProps {
+  value: Partial<AddressData>;
+  onChange: (field: keyof AddressData, value: string) => void;
+  onSubmit?: () => void;
+  errors?: Partial<Record<keyof AddressData, string>>;
+  countries?: {
+    code: string;
+    name: string;
+  }[];
+  showCompany?: boolean;
+  showRegion?: boolean;
+  showPhone?: boolean;
+  showEmail?: boolean;
+  className?: string;
+  labels?: Partial<Record<keyof AddressData, string>>;
+}
+declare function AddressForm({
+  value,
+  onChange,
+  onSubmit,
+  errors,
+  countries,
+  showCompany,
+  showRegion,
+  showPhone,
+  showEmail,
+  className,
+  labels
+}: AddressFormProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AddressData, AddressForm, AddressFormProps };
+//# sourceMappingURL=address-form.d.ts.map

package/dist/client/storefront/checkout/address-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"address-form.d.ts","names":[],"sources":["../../../../src/client/storefront/checkout/address-form.tsx"],"mappings":";;;UAciB,WAAA;EACf,SAAA;EACA,QAAA;EACA,OAAA;EACA,QAAA;EACA,QAAA;EACA,IAAA;EACA,UAAA;EACA,MAAA;EACA,OAAA;EACA,KAAA;EACA,KAAA;AAAA;AAAA,UAGe,gBAAA;EACf,KAAA,EAAO,OAAA,CAAQ,WAAA;EACf,QAAA,GAAW,KAAA,QAAa,WAAA,EAAa,KAAA;EACrC,QAAA;EACA,MAAA,GAAS,OAAA,CAAQ,MAAA,OAAa,WAAA;EAC9B,SAAA;IAAc,IAAA;IAAc,IAAA;EAAA;EAC5B,WAAA;EACA,UAAA;EACA,SAAA;EACA,SAAA;EACA,SAAA;EACA,MAAA,GAAS,OAAA,CAAQ,MAAA,OAAa,WAAA;AAAA;AAAA,iBAGhB,WAAA,CAAA;EACd,KAAA;EACA,QAAA;EACA,QAAA;EACA,MAAA;EACA,SAAA;EACA,WAAA;EACA,UAAA;EACA,SAAA;EACA,SAAA;EACA,SAAA;EACA;AAAA,GACC,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/checkout/address-form.mjs

@@ -0,0 +1,114 @@
+"use client";
+import { cn } from "../../ui/utils.mjs";
+import { Input } from "../../ui-resolver/input.mjs";
+import { Label } from "../../ui-resolver/label.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui-resolver/select.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/checkout/address-form.tsx
+function AddressForm({ value, onChange, onSubmit, errors = {}, countries = [], showCompany = false, showRegion = true, showPhone = false, showEmail = false, className, labels = {} }) {
+	const l = {
+		firstName: labels.firstName ?? "First name",
+		lastName: labels.lastName ?? "Last name",
+		company: labels.company ?? "Company",
+		address1: labels.address1 ?? "Address",
+		address2: labels.address2 ?? "Apartment, suite, etc.",
+		city: labels.city ?? "City",
+		postalCode: labels.postalCode ?? "Postal code",
+		region: labels.region ?? "Region / State",
+		country: labels.country ?? "Country",
+		phone: labels.phone ?? "Phone",
+		email: labels.email ?? "Email"
+	};
+	const requiredFields = new Set([
+		"firstName",
+		"lastName",
+		"address1",
+		"city",
+		"postalCode",
+		"country"
+	]);
+	function field(name, label, opts) {
+		const { type = "text", span = "half" } = opts ?? {};
+		const isRequired = requiredFields.has(name);
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn(span === "full" ? "col-span-2" : "col-span-1"),
+			children: [
+				/* @__PURE__ */ jsx(Label, {
+					htmlFor: `address-${name}`,
+					className: "text-sm font-medium text-(--enad-text-primary-color)",
+					children: label
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					id: `address-${name}`,
+					type,
+					value: value[name] ?? "",
+					onChange: (e) => onChange(name, e.target.value),
+					"aria-invalid": !!errors[name],
+					"aria-required": isRequired || void 0,
+					"aria-describedby": errors[name] ? `address-${name}-error` : void 0,
+					className: "mt-1"
+				}),
+				errors[name] && /* @__PURE__ */ jsx("p", {
+					id: `address-${name}-error`,
+					className: "mt-1 text-xs text-(--enad-error-color)",
+					children: errors[name]
+				})
+			]
+		}, name);
+	}
+	return /* @__PURE__ */ jsxs("form", {
+		onSubmit: (e) => {
+			e.preventDefault();
+			onSubmit?.();
+		},
+		className: cn("font-enad grid grid-cols-2 gap-4", className),
+		children: [
+			field("firstName", l.firstName),
+			field("lastName", l.lastName),
+			showCompany && field("company", l.company, { span: "full" }),
+			field("address1", l.address1, { span: "full" }),
+			field("address2", l.address2, { span: "full" }),
+			field("city", l.city),
+			field("postalCode", l.postalCode),
+			showRegion && field("region", l.region),
+			/* @__PURE__ */ jsxs("div", {
+				className: "col-span-1",
+				children: [
+					/* @__PURE__ */ jsx(Label, {
+						htmlFor: "address-country",
+						className: "text-sm font-medium text-(--enad-text-primary-color)",
+						children: l.country
+					}),
+					countries.length > 0 ? /* @__PURE__ */ jsxs(Select, {
+						value: value.country ?? "",
+						onValueChange: (v) => onChange("country", v),
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							id: "address-country",
+							className: "mt-1",
+							children: /* @__PURE__ */ jsx(SelectValue, { placeholder: l.country })
+						}), /* @__PURE__ */ jsx(SelectContent, { children: countries.map((c) => /* @__PURE__ */ jsx(SelectItem, {
+							value: c.code,
+							children: c.name
+						}, c.code)) })]
+					}) : /* @__PURE__ */ jsx(Input, {
+						id: "address-country",
+						value: value.country ?? "",
+						onChange: (e) => onChange("country", e.target.value),
+						className: "mt-1"
+					}),
+					errors.country && /* @__PURE__ */ jsx("p", {
+						className: "mt-1 text-xs text-(--enad-error-color)",
+						children: errors.country
+					})
+				]
+			}),
+			showPhone && field("phone", l.phone, { type: "tel" }),
+			showEmail && field("email", l.email, { type: "email" })
+		]
+	});
+}
+//#endregion
+export { AddressForm };
+
+//# sourceMappingURL=address-form.mjs.map

package/dist/client/storefront/checkout/address-form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"address-form.mjs","names":[],"sources":["../../../../src/client/storefront/checkout/address-form.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { Input } from \"../../ui-resolver/input\";\nimport { Label } from \"../../ui-resolver/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"../../ui-resolver/select\";\n\nexport interface AddressData {\n  firstName: string;\n  lastName: string;\n  company?: string;\n  address1: string;\n  address2?: string;\n  city: string;\n  postalCode: string;\n  region?: string;\n  country: string;\n  phone?: string;\n  email?: string;\n}\n\nexport interface AddressFormProps {\n  value: Partial<AddressData>;\n  onChange: (field: keyof AddressData, value: string) => void;\n  onSubmit?: () => void;\n  errors?: Partial<Record<keyof AddressData, string>>;\n  countries?: { code: string; name: string }[];\n  showCompany?: boolean;\n  showRegion?: boolean;\n  showPhone?: boolean;\n  showEmail?: boolean;\n  className?: string;\n  labels?: Partial<Record<keyof AddressData, string>>;\n}\n\nexport function AddressForm({\n  value,\n  onChange,\n  onSubmit,\n  errors = {},\n  countries = [],\n  showCompany = false,\n  showRegion = true,\n  showPhone = false,\n  showEmail = false,\n  className,\n  labels = {},\n}: AddressFormProps) {\n  const l = {\n    firstName: labels.firstName ?? \"First name\",\n    lastName: labels.lastName ?? \"Last name\",\n    company: labels.company ?? \"Company\",\n    address1: labels.address1 ?? \"Address\",\n    address2: labels.address2 ?? \"Apartment, suite, etc.\",\n    city: labels.city ?? \"City\",\n    postalCode: labels.postalCode ?? \"Postal code\",\n    region: labels.region ?? \"Region / State\",\n    country: labels.country ?? \"Country\",\n    phone: labels.phone ?? \"Phone\",\n    email: labels.email ?? \"Email\",\n  };\n\n  const requiredFields = new Set<keyof AddressData>([\n    \"firstName\",\n    \"lastName\",\n    \"address1\",\n    \"city\",\n    \"postalCode\",\n    \"country\",\n  ]);\n\n  function field(\n    name: keyof AddressData,\n    label: string,\n    opts?: { type?: string; span?: \"full\" | \"half\" },\n  ) {\n    const { type = \"text\", span = \"half\" } = opts ?? {};\n    const isRequired = requiredFields.has(name);\n    return (\n      <div className={cn(span === \"full\" ? \"col-span-2\" : \"col-span-1\")} key={name}>\n        <Label\n          htmlFor={`address-${name}`}\n          className=\"text-sm font-medium text-(--enad-text-primary-color)\"\n        >\n          {label}\n        </Label>\n        <Input\n          id={`address-${name}`}\n          type={type}\n          value={value[name] ?? \"\"}\n          onChange={(e) => onChange(name, e.target.value)}\n          aria-invalid={!!errors[name]}\n          aria-required={isRequired || undefined}\n          aria-describedby={errors[name] ? `address-${name}-error` : undefined}\n          className=\"mt-1\"\n        />\n        {errors[name] && (\n          <p id={`address-${name}-error`} className=\"mt-1 text-xs text-(--enad-error-color)\">\n            {errors[name]}\n          </p>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <form\n      onSubmit={(e) => {\n        e.preventDefault();\n        onSubmit?.();\n      }}\n      className={cn(\"font-enad grid grid-cols-2 gap-4\", className)}\n    >\n      {field(\"firstName\", l.firstName)}\n      {field(\"lastName\", l.lastName)}\n      {showCompany && field(\"company\", l.company, { span: \"full\" })}\n      {field(\"address1\", l.address1, { span: \"full\" })}\n      {field(\"address2\", l.address2, { span: \"full\" })}\n      {field(\"city\", l.city)}\n      {field(\"postalCode\", l.postalCode)}\n      {showRegion && field(\"region\", l.region)}\n\n      {/* Country select */}\n      <div className=\"col-span-1\">\n        <Label\n          htmlFor=\"address-country\"\n          className=\"text-sm font-medium text-(--enad-text-primary-color)\"\n        >\n          {l.country}\n        </Label>\n        {countries.length > 0 ? (\n          <Select value={value.country ?? \"\"} onValueChange={(v) => onChange(\"country\", v)}>\n            <SelectTrigger id=\"address-country\" className=\"mt-1\">\n              <SelectValue placeholder={l.country} />\n            </SelectTrigger>\n            <SelectContent>\n              {countries.map((c) => (\n                <SelectItem key={c.code} value={c.code}>\n                  {c.name}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        ) : (\n          <Input\n            id=\"address-country\"\n            value={value.country ?? \"\"}\n            onChange={(e) => onChange(\"country\", e.target.value)}\n            className=\"mt-1\"\n          />\n        )}\n        {errors.country && (\n          <p className=\"mt-1 text-xs text-(--enad-error-color)\">{errors.country}</p>\n        )}\n      </div>\n\n      {showPhone && field(\"phone\", l.phone, { type: \"tel\" })}\n      {showEmail && field(\"email\", l.email, { type: \"email\" })}\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;AA0CA,SAAgB,YAAY,EAC1B,OACA,UACA,UACA,SAAS,EAAE,EACX,YAAY,EAAE,EACd,cAAc,OACd,aAAa,MACb,YAAY,OACZ,YAAY,OACZ,WACA,SAAS,EAAE,IACQ;CACnB,MAAM,IAAI;EACR,WAAW,OAAO,aAAa;EAC/B,UAAU,OAAO,YAAY;EAC7B,SAAS,OAAO,WAAW;EAC3B,UAAU,OAAO,YAAY;EAC7B,UAAU,OAAO,YAAY;EAC7B,MAAM,OAAO,QAAQ;EACrB,YAAY,OAAO,cAAc;EACjC,QAAQ,OAAO,UAAU;EACzB,SAAS,OAAO,WAAW;EAC3B,OAAO,OAAO,SAAS;EACvB,OAAO,OAAO,SAAS;EACxB;CAED,MAAM,iBAAiB,IAAI,IAAuB;EAChD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,SAAS,MACP,MACA,OACA,MACA;EACA,MAAM,EAAE,OAAO,QAAQ,OAAO,WAAW,QAAQ,EAAE;EACnD,MAAM,aAAa,eAAe,IAAI,KAAK;AAC3C,SACE,qBAAC,OAAD;GAAK,WAAW,GAAG,SAAS,SAAS,eAAe,aAAa;aAAjE;IACE,oBAAC,OAAD;KACE,SAAS,WAAW;KACpB,WAAU;eAET;KACK,CAAA;IACR,oBAAC,OAAD;KACE,IAAI,WAAW;KACT;KACN,OAAO,MAAM,SAAS;KACtB,WAAW,MAAM,SAAS,MAAM,EAAE,OAAO,MAAM;KAC/C,gBAAc,CAAC,CAAC,OAAO;KACvB,iBAAe,cAAc,KAAA;KAC7B,oBAAkB,OAAO,QAAQ,WAAW,KAAK,UAAU,KAAA;KAC3D,WAAU;KACV,CAAA;IACD,OAAO,SACN,oBAAC,KAAD;KAAG,IAAI,WAAW,KAAK;KAAS,WAAU;eACvC,OAAO;KACN,CAAA;IAEF;KAtBkE,KAsBlE;;AAIV,QACE,qBAAC,QAAD;EACE,WAAW,MAAM;AACf,KAAE,gBAAgB;AAClB,eAAY;;EAEd,WAAW,GAAG,oCAAoC,UAAU;YAL9D;GAOG,MAAM,aAAa,EAAE,UAAU;GAC/B,MAAM,YAAY,EAAE,SAAS;GAC7B,eAAe,MAAM,WAAW,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;GAC5D,MAAM,YAAY,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;GAC/C,MAAM,YAAY,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;GAC/C,MAAM,QAAQ,EAAE,KAAK;GACrB,MAAM,cAAc,EAAE,WAAW;GACjC,cAAc,MAAM,UAAU,EAAE,OAAO;GAGxC,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,OAAD;MACE,SAAQ;MACR,WAAU;gBAET,EAAE;MACG,CAAA;KACP,UAAU,SAAS,IAClB,qBAAC,QAAD;MAAQ,OAAO,MAAM,WAAW;MAAI,gBAAgB,MAAM,SAAS,WAAW,EAAE;gBAAhF,CACE,oBAAC,eAAD;OAAe,IAAG;OAAkB,WAAU;iBAC5C,oBAAC,aAAD,EAAa,aAAa,EAAE,SAAW,CAAA;OACzB,CAAA,EAChB,oBAAC,eAAD,EAAA,UACG,UAAU,KAAK,MACd,oBAAC,YAAD;OAAyB,OAAO,EAAE;iBAC/B,EAAE;OACQ,EAFI,EAAE,KAEN,CACb,EACY,CAAA,CACT;UAET,oBAAC,OAAD;MACE,IAAG;MACH,OAAO,MAAM,WAAW;MACxB,WAAW,MAAM,SAAS,WAAW,EAAE,OAAO,MAAM;MACpD,WAAU;MACV,CAAA;KAEH,OAAO,WACN,oBAAC,KAAD;MAAG,WAAU;gBAA0C,OAAO;MAAY,CAAA;KAExE;;GAEL,aAAa,MAAM,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;GACrD,aAAa,MAAM,SAAS,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;GACnD"}

package/dist/client/storefront/checkout/cart-summary.d.ts

@@ -0,0 +1,61 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/checkout/cart-summary.d.ts
+interface CartLineItem {
+  id: string;
+  name: string;
+  variant?: string;
+  imageUrl?: string;
+  price: number;
+  originalPrice?: number;
+  quantity: number;
+  maxQuantity?: number;
+  currency?: string;
+}
+interface CartSummaryProps {
+  items: CartLineItem[];
+  subtotal: number;
+  tax?: number;
+  shipping?: number;
+  total: number;
+  currency?: string;
+  locale?: string;
+  onQuantityChange?: (itemId: string, quantity: number) => void;
+  onRemoveItem?: (itemId: string) => void;
+  onPromoApply?: (code: string) => void;
+  promoCode?: string;
+  promoError?: string;
+  promoDiscount?: number;
+  className?: string;
+  labels?: {
+    subtotal?: string;
+    tax?: string;
+    shipping?: string;
+    total?: string;
+    discount?: string;
+    promoPlaceholder?: string;
+    promoApply?: string;
+    freeShipping?: string;
+    remove?: string;
+  };
+}
+declare function CartSummary({
+  items,
+  subtotal,
+  tax,
+  shipping,
+  total,
+  currency,
+  locale,
+  onQuantityChange,
+  onRemoveItem,
+  onPromoApply,
+  promoCode: initialPromo,
+  promoError,
+  promoDiscount,
+  className,
+  labels
+}: CartSummaryProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CartLineItem, CartSummary, CartSummaryProps };
+//# sourceMappingURL=cart-summary.d.ts.map

package/dist/client/storefront/checkout/cart-summary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cart-summary.d.ts","names":[],"sources":["../../../../src/client/storefront/checkout/cart-summary.tsx"],"mappings":";;;UAUiB,YAAA;EACf,EAAA;EACA,IAAA;EACA,OAAA;EACA,QAAA;EACA,KAAA;EACA,aAAA;EACA,QAAA;EACA,WAAA;EACA,QAAA;AAAA;AAAA,UAGe,gBAAA;EACf,KAAA,EAAO,YAAA;EACP,QAAA;EACA,GAAA;EACA,QAAA;EACA,KAAA;EACA,QAAA;EACA,MAAA;EACA,gBAAA,IAAoB,MAAA,UAAgB,QAAA;EACpC,YAAA,IAAgB,MAAA;EAChB,YAAA,IAAgB,IAAA;EAChB,SAAA;EACA,UAAA;EACA,aAAA;EACA,SAAA;EACA,MAAA;IACE,QAAA;IACA,GAAA;IACA,QAAA;IACA,KAAA;IACA,QAAA;IACA,gBAAA;IACA,UAAA;IACA,YAAA;IACA,MAAA;EAAA;AAAA;AAAA,iBAIY,WAAA,CAAA;EACd,KAAA;EACA,QAAA;EACA,GAAA;EACA,QAAA;EACA,KAAA;EACA,QAAA;EACA,MAAA;EACA,gBAAA;EACA,YAAA;EACA,YAAA;EACA,SAAA,EAAW,YAAA;EACX,UAAA;EACA,aAAA;EACA,SAAA;EACA;AAAA,GACC,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/checkout/cart-summary.mjs

@@ -0,0 +1,160 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { Price } from "../components/price.mjs";
+import { QuantityPicker } from "../product/quantity-picker.mjs";
+import { Button } from "../../ui-resolver/button.mjs";
+import { Input } from "../../ui-resolver/input.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/checkout/cart-summary.tsx
+function CartSummary({ items, subtotal, tax, shipping, total, currency = "SEK", locale, onQuantityChange, onRemoveItem, onPromoApply, promoCode: initialPromo = "", promoError, promoDiscount, className, labels = {} }) {
+	const { subtotal: subtotalLabel = "Subtotal", tax: taxLabel = "Tax", shipping: shippingLabel = "Shipping", total: totalLabel = "Total", discount: discountLabel = "Discount", promoPlaceholder = "Promo code", promoApply = "Apply", freeShipping = "Free", remove: removeLabel = "Remove" } = labels;
+	const [promoInput, setPromoInput] = React$1.useState(initialPromo);
+	const CloseIcon = useIcon("close");
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("font-enad space-y-4", className),
+		children: [
+			/* @__PURE__ */ jsx("ul", {
+				className: "divide-y divide-(--enad-border-color)",
+				children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+					className: "flex gap-4 py-4 first:pt-0 last:pb-0",
+					children: [item.imageUrl && /* @__PURE__ */ jsx("img", {
+						src: item.imageUrl,
+						alt: item.name,
+						className: "size-16 shrink-0 rounded-(--enad-card-radius) object-cover"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-1 flex-col gap-1",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-start justify-between gap-2",
+							children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+								className: "text-sm font-medium text-(--enad-text-primary-color)",
+								children: item.name
+							}), item.variant && /* @__PURE__ */ jsx("p", {
+								className: "text-xs text-(--enad-text-muted-color)",
+								children: item.variant
+							})] }), /* @__PURE__ */ jsx(Price, {
+								amount: item.price * item.quantity,
+								original: item.originalPrice ? item.originalPrice * item.quantity : void 0,
+								currency: item.currency ?? currency,
+								locale,
+								className: "text-sm font-medium"
+							})]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-3",
+							children: [onQuantityChange && /* @__PURE__ */ jsx(QuantityPicker, {
+								value: item.quantity,
+								onChange: (qty) => onQuantityChange(item.id, qty),
+								min: 1,
+								max: item.maxQuantity
+							}), onRemoveItem && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => onRemoveItem(item.id),
+								className: "rounded-sm text-xs text-(--enad-text-muted-color) hover:text-(--enad-error-color) transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
+								"aria-label": `${removeLabel} ${item.name}`,
+								children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+							})]
+						})]
+					})]
+				}, item.id))
+			}),
+			onPromoApply && /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ jsx(Input, {
+						value: promoInput,
+						onChange: (e) => setPromoInput(e.target.value),
+						onKeyDown: (e) => {
+							if (e.key === "Enter" && promoInput.trim()) {
+								e.preventDefault();
+								onPromoApply(promoInput);
+							}
+						},
+						placeholder: promoPlaceholder,
+						className: "flex-1",
+						"aria-label": promoPlaceholder
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						onClick: () => onPromoApply(promoInput),
+						disabled: !promoInput.trim(),
+						children: promoApply
+					})]
+				}), promoError && /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-(--enad-error-color)",
+					children: promoError
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-2 border-t border-(--enad-border-color) pt-4",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between text-sm",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-(--enad-text-muted-color)",
+							children: subtotalLabel
+						}), /* @__PURE__ */ jsx(Price, {
+							amount: subtotal,
+							currency,
+							locale
+						})]
+					}),
+					promoDiscount != null && promoDiscount > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between text-sm",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-(--enad-text-muted-color)",
+							children: discountLabel
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "text-(--enad-error-color)",
+							children: ["-", /* @__PURE__ */ jsx(Price, {
+								amount: promoDiscount,
+								currency,
+								locale
+							})]
+						})]
+					}),
+					tax != null && /* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between text-sm",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-(--enad-text-muted-color)",
+							children: taxLabel
+						}), /* @__PURE__ */ jsx(Price, {
+							amount: tax,
+							currency,
+							locale
+						})]
+					}),
+					shipping != null && /* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between text-sm",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-(--enad-text-muted-color)",
+							children: shippingLabel
+						}), shipping === 0 ? /* @__PURE__ */ jsx("span", {
+							className: "text-sm font-medium text-(--enad-text-primary-color)",
+							children: freeShipping
+						}) : /* @__PURE__ */ jsx(Price, {
+							amount: shipping,
+							currency,
+							locale
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between border-t border-(--enad-border-color) pt-2 text-base font-semibold",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-(--enad-text-primary-color)",
+							children: totalLabel
+						}), /* @__PURE__ */ jsx(Price, {
+							amount: total,
+							currency,
+							locale
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { CartSummary };
+
+//# sourceMappingURL=cart-summary.mjs.map

package/dist/client/storefront/checkout/cart-summary.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cart-summary.mjs","names":["React"],"sources":["../../../../src/client/storefront/checkout/cart-summary.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Price } from \"../components/price\";\nimport { QuantityPicker } from \"../product/quantity-picker\";\nimport { Button } from \"../../ui-resolver/button\";\nimport { Input } from \"../../ui-resolver/input\";\n\nexport interface CartLineItem {\n  id: string;\n  name: string;\n  variant?: string;\n  imageUrl?: string;\n  price: number;\n  originalPrice?: number;\n  quantity: number;\n  maxQuantity?: number;\n  currency?: string;\n}\n\nexport interface CartSummaryProps {\n  items: CartLineItem[];\n  subtotal: number;\n  tax?: number;\n  shipping?: number;\n  total: number;\n  currency?: string;\n  locale?: string;\n  onQuantityChange?: (itemId: string, quantity: number) => void;\n  onRemoveItem?: (itemId: string) => void;\n  onPromoApply?: (code: string) => void;\n  promoCode?: string;\n  promoError?: string;\n  promoDiscount?: number;\n  className?: string;\n  labels?: {\n    subtotal?: string;\n    tax?: string;\n    shipping?: string;\n    total?: string;\n    discount?: string;\n    promoPlaceholder?: string;\n    promoApply?: string;\n    freeShipping?: string;\n    remove?: string;\n  };\n}\n\nexport function CartSummary({\n  items,\n  subtotal,\n  tax,\n  shipping,\n  total,\n  currency = \"SEK\",\n  locale,\n  onQuantityChange,\n  onRemoveItem,\n  onPromoApply,\n  promoCode: initialPromo = \"\",\n  promoError,\n  promoDiscount,\n  className,\n  labels = {},\n}: CartSummaryProps) {\n  const {\n    subtotal: subtotalLabel = \"Subtotal\",\n    tax: taxLabel = \"Tax\",\n    shipping: shippingLabel = \"Shipping\",\n    total: totalLabel = \"Total\",\n    discount: discountLabel = \"Discount\",\n    promoPlaceholder = \"Promo code\",\n    promoApply = \"Apply\",\n    freeShipping = \"Free\",\n    remove: removeLabel = \"Remove\",\n  } = labels;\n\n  const [promoInput, setPromoInput] = React.useState(initialPromo);\n  const CloseIcon = useIcon(\"close\");\n\n  return (\n    <div className={cn(\"font-enad space-y-4\", className)}>\n      {/* Line items */}\n      <ul className=\"divide-y divide-(--enad-border-color)\">\n        {items.map((item) => (\n          <li key={item.id} className=\"flex gap-4 py-4 first:pt-0 last:pb-0\">\n            {item.imageUrl && (\n              <img\n                src={item.imageUrl}\n                alt={item.name}\n                className=\"size-16 shrink-0 rounded-(--enad-card-radius) object-cover\"\n              />\n            )}\n\n            <div className=\"flex flex-1 flex-col gap-1\">\n              <div className=\"flex items-start justify-between gap-2\">\n                <div>\n                  <p className=\"text-sm font-medium text-(--enad-text-primary-color)\">\n                    {item.name}\n                  </p>\n                  {item.variant && (\n                    <p className=\"text-xs text-(--enad-text-muted-color)\">{item.variant}</p>\n                  )}\n                </div>\n                <Price\n                  amount={item.price * item.quantity}\n                  original={item.originalPrice ? item.originalPrice * item.quantity : undefined}\n                  currency={item.currency ?? currency}\n                  locale={locale}\n                  className=\"text-sm font-medium\"\n                />\n              </div>\n\n              <div className=\"flex items-center gap-3\">\n                {onQuantityChange && (\n                  <QuantityPicker\n                    value={item.quantity}\n                    onChange={(qty) => onQuantityChange(item.id, qty)}\n                    min={1}\n                    max={item.maxQuantity}\n                  />\n                )}\n                {onRemoveItem && (\n                  <button\n                    type=\"button\"\n                    onClick={() => onRemoveItem(item.id)}\n                    className=\"rounded-sm text-xs text-(--enad-text-muted-color) hover:text-(--enad-error-color) transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none\"\n                    aria-label={`${removeLabel} ${item.name}`}\n                  >\n                    <CloseIcon className=\"size-4\" />\n                  </button>\n                )}\n              </div>\n            </div>\n          </li>\n        ))}\n      </ul>\n\n      {/* Promo code */}\n      {onPromoApply && (\n        <div className=\"space-y-1\">\n          <div className=\"flex gap-2\">\n            <Input\n              value={promoInput}\n              onChange={(e) => setPromoInput(e.target.value)}\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\" && promoInput.trim()) {\n                  e.preventDefault();\n                  onPromoApply(promoInput);\n                }\n              }}\n              placeholder={promoPlaceholder}\n              className=\"flex-1\"\n              aria-label={promoPlaceholder}\n            />\n            <Button\n              variant=\"outline\"\n              onClick={() => onPromoApply(promoInput)}\n              disabled={!promoInput.trim()}\n            >\n              {promoApply}\n            </Button>\n          </div>\n          {promoError && <p className=\"text-xs text-(--enad-error-color)\">{promoError}</p>}\n        </div>\n      )}\n\n      {/* Totals */}\n      <div className=\"space-y-2 border-t border-(--enad-border-color) pt-4\">\n        <div className=\"flex justify-between text-sm\">\n          <span className=\"text-(--enad-text-muted-color)\">{subtotalLabel}</span>\n          <Price amount={subtotal} currency={currency} locale={locale} />\n        </div>\n\n        {promoDiscount != null && promoDiscount > 0 && (\n          <div className=\"flex justify-between text-sm\">\n            <span className=\"text-(--enad-text-muted-color)\">{discountLabel}</span>\n            <span className=\"text-(--enad-error-color)\">\n              -<Price amount={promoDiscount} currency={currency} locale={locale} />\n            </span>\n          </div>\n        )}\n\n        {tax != null && (\n          <div className=\"flex justify-between text-sm\">\n            <span className=\"text-(--enad-text-muted-color)\">{taxLabel}</span>\n            <Price amount={tax} currency={currency} locale={locale} />\n          </div>\n        )}\n\n        {shipping != null && (\n          <div className=\"flex justify-between text-sm\">\n            <span className=\"text-(--enad-text-muted-color)\">{shippingLabel}</span>\n            {shipping === 0 ? (\n              <span className=\"text-sm font-medium text-(--enad-text-primary-color)\">\n                {freeShipping}\n              </span>\n            ) : (\n              <Price amount={shipping} currency={currency} locale={locale} />\n            )}\n          </div>\n        )}\n\n        <div className=\"flex justify-between border-t border-(--enad-border-color) pt-2 text-base font-semibold\">\n          <span className=\"text-(--enad-text-primary-color)\">{totalLabel}</span>\n          <Price amount={total} currency={currency} locale={locale} />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/client/storefront/checkout/checkout-stepper.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/checkout/checkout-stepper.d.ts
+type StepStatus = "completed" | "active" | "upcoming";
+interface CheckoutStep {
+  id: string;
+  label: string;
+  status: StepStatus;
+}
+interface CheckoutStepperProps {
+  steps: CheckoutStep[];
+  onStepClick?: (stepId: string) => void;
+  className?: string;
+}
+declare function CheckoutStepper({
+  steps,
+  onStepClick,
+  className
+}: CheckoutStepperProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CheckoutStep, CheckoutStepper, CheckoutStepperProps, StepStatus };
+//# sourceMappingURL=checkout-stepper.d.ts.map

package/dist/client/storefront/checkout/checkout-stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkout-stepper.d.ts","names":[],"sources":["../../../../src/client/storefront/checkout/checkout-stepper.tsx"],"mappings":";;;KAKY,UAAA;AAAA,UAEK,YAAA;EACf,EAAA;EACA,KAAA;EACA,MAAA,EAAQ,UAAA;AAAA;AAAA,UAGO,oBAAA;EACf,KAAA,EAAO,YAAA;EACP,WAAA,IAAe,MAAA;EACf,SAAA;AAAA;AAAA,iBAGc,eAAA,CAAA;EAAkB,KAAA;EAAO,WAAA;EAAa;AAAA,GAAa,oBAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/checkout/checkout-stepper.mjs

@@ -0,0 +1,43 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/checkout/checkout-stepper.tsx
+function CheckoutStepper({ steps, onStepClick, className }) {
+	const CheckIcon = useIcon("check");
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Checkout progress",
+		className: cn("font-enad", className),
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "flex items-center gap-0",
+			children: steps.map((step, index) => {
+				const isLast = index === steps.length - 1;
+				const isClickable = step.status === "completed" && onStepClick;
+				return /* @__PURE__ */ jsxs("li", {
+					className: "flex flex-1 items-center",
+					children: [/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => isClickable && onStepClick(step.id),
+						disabled: !isClickable,
+						"aria-current": step.status === "active" ? "step" : void 0,
+						className: cn("flex items-center gap-2 text-sm font-medium transition-colors", "disabled:cursor-default", step.status === "completed" && "text-(--enad-button-bg) cursor-pointer", step.status === "active" && "text-(--enad-text-primary-color)", step.status === "upcoming" && "text-(--enad-text-muted-color)"),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold transition-colors", step.status === "completed" && "bg-(--enad-button-bg) text-(--enad-button-color)", step.status === "active" && "border-2 border-(--enad-button-bg) text-(--enad-button-bg)", step.status === "upcoming" && "border border-(--enad-border-color) text-(--enad-text-muted-color)"),
+							children: step.status === "completed" ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) : index + 1
+						}), /* @__PURE__ */ jsx("span", {
+							className: "hidden sm:inline",
+							children: step.label
+						})]
+					}), !isLast && /* @__PURE__ */ jsx("div", {
+						className: cn("mx-2 h-px flex-1 transition-colors", step.status === "completed" ? "bg-(--enad-button-bg)" : "bg-(--enad-border-color)"),
+						"aria-hidden": "true"
+					})]
+				}, step.id);
+			})
+		})
+	});
+}
+//#endregion
+export { CheckoutStepper };
+
+//# sourceMappingURL=checkout-stepper.mjs.map

package/dist/client/storefront/checkout/checkout-stepper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkout-stepper.mjs","names":[],"sources":["../../../../src/client/storefront/checkout/checkout-stepper.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\n\nexport type StepStatus = \"completed\" | \"active\" | \"upcoming\";\n\nexport interface CheckoutStep {\n  id: string;\n  label: string;\n  status: StepStatus;\n}\n\nexport interface CheckoutStepperProps {\n  steps: CheckoutStep[];\n  onStepClick?: (stepId: string) => void;\n  className?: string;\n}\n\nexport function CheckoutStepper({ steps, onStepClick, className }: CheckoutStepperProps) {\n  const CheckIcon = useIcon(\"check\");\n\n  return (\n    <nav aria-label=\"Checkout progress\" className={cn(\"font-enad\", className)}>\n      <ol className=\"flex items-center gap-0\">\n        {steps.map((step, index) => {\n          const isLast = index === steps.length - 1;\n          const isClickable = step.status === \"completed\" && onStepClick;\n\n          return (\n            <li key={step.id} className=\"flex flex-1 items-center\">\n              <button\n                type=\"button\"\n                onClick={() => isClickable && onStepClick(step.id)}\n                disabled={!isClickable}\n                aria-current={step.status === \"active\" ? \"step\" : undefined}\n                className={cn(\n                  \"flex items-center gap-2 text-sm font-medium transition-colors\",\n                  \"disabled:cursor-default\",\n                  step.status === \"completed\" && \"text-(--enad-button-bg) cursor-pointer\",\n                  step.status === \"active\" && \"text-(--enad-text-primary-color)\",\n                  step.status === \"upcoming\" && \"text-(--enad-text-muted-color)\",\n                )}\n              >\n                <span\n                  className={cn(\n                    \"flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold transition-colors\",\n                    step.status === \"completed\" &&\n                      \"bg-(--enad-button-bg) text-(--enad-button-color)\",\n                    step.status === \"active\" &&\n                      \"border-2 border-(--enad-button-bg) text-(--enad-button-bg)\",\n                    step.status === \"upcoming\" &&\n                      \"border border-(--enad-border-color) text-(--enad-text-muted-color)\",\n                  )}\n                >\n                  {step.status === \"completed\" ? <CheckIcon className=\"size-4\" /> : index + 1}\n                </span>\n                <span className=\"hidden sm:inline\">{step.label}</span>\n              </button>\n\n              {!isLast && (\n                <div\n                  className={cn(\n                    \"mx-2 h-px flex-1 transition-colors\",\n                    step.status === \"completed\"\n                      ? \"bg-(--enad-button-bg)\"\n                      : \"bg-(--enad-border-color)\",\n                  )}\n                  aria-hidden=\"true\"\n                />\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":";;;;;AAmBA,SAAgB,gBAAgB,EAAE,OAAO,aAAa,aAAmC;CACvF,MAAM,YAAY,QAAQ,QAAQ;AAElC,QACE,oBAAC,OAAD;EAAK,cAAW;EAAoB,WAAW,GAAG,aAAa,UAAU;YACvE,oBAAC,MAAD;GAAI,WAAU;aACX,MAAM,KAAK,MAAM,UAAU;IAC1B,MAAM,SAAS,UAAU,MAAM,SAAS;IACxC,MAAM,cAAc,KAAK,WAAW,eAAe;AAEnD,WACE,qBAAC,MAAD;KAAkB,WAAU;eAA5B,CACE,qBAAC,UAAD;MACE,MAAK;MACL,eAAe,eAAe,YAAY,KAAK,GAAG;MAClD,UAAU,CAAC;MACX,gBAAc,KAAK,WAAW,WAAW,SAAS,KAAA;MAClD,WAAW,GACT,iEACA,2BACA,KAAK,WAAW,eAAe,0CAC/B,KAAK,WAAW,YAAY,oCAC5B,KAAK,WAAW,cAAc,iCAC/B;gBAXH,CAaE,oBAAC,QAAD;OACE,WAAW,GACT,yGACA,KAAK,WAAW,eACd,oDACF,KAAK,WAAW,YACd,8DACF,KAAK,WAAW,cACd,qEACH;iBAEA,KAAK,WAAW,cAAc,oBAAC,WAAD,EAAW,WAAU,UAAW,CAAA,GAAG,QAAQ;OACrE,CAAA,EACP,oBAAC,QAAD;OAAM,WAAU;iBAAoB,KAAK;OAAa,CAAA,CAC/C;SAER,CAAC,UACA,oBAAC,OAAD;MACE,WAAW,GACT,sCACA,KAAK,WAAW,cACZ,0BACA,2BACL;MACD,eAAY;MACZ,CAAA,CAED;OAzCI,KAAK,GAyCT;KAEP;GACC,CAAA;EACD,CAAA"}

package/dist/client/storefront/checkout/index.d.ts

@@ -0,0 +1,8 @@
+import { AddressData, AddressForm, AddressFormProps } from "./address-form.js";
+import { CartLineItem, CartSummary, CartSummaryProps } from "./cart-summary.js";
+import { CheckoutStep, CheckoutStepper, CheckoutStepperProps, StepStatus } from "./checkout-stepper.js";
+import { ShippingMethod, ShippingMethodSelector, ShippingMethodSelectorProps } from "./shipping-method-selector.js";
+import { PaymentMethod, PaymentMethodSelector, PaymentMethodSelectorProps } from "./payment-method-selector.js";
+import { OrderSummary, OrderSummaryProps } from "./order-summary.js";
+import { OrderConfirmation, OrderConfirmationProps } from "./order-confirmation.js";
+export { type AddressData, AddressForm, type AddressFormProps, type CartLineItem, CartSummary, type CartSummaryProps, type CheckoutStep, CheckoutStepper, type CheckoutStepperProps, OrderConfirmation, type OrderConfirmationProps, OrderSummary, type OrderSummaryProps, type PaymentMethod, PaymentMethodSelector, type PaymentMethodSelectorProps, type ShippingMethod, ShippingMethodSelector, type ShippingMethodSelectorProps, type StepStatus };

package/dist/client/storefront/checkout/index.mjs

@@ -0,0 +1,8 @@
+import { AddressForm } from "./address-form.mjs";
+import { CartSummary } from "./cart-summary.mjs";
+import { CheckoutStepper } from "./checkout-stepper.mjs";
+import { ShippingMethodSelector } from "./shipping-method-selector.mjs";
+import { PaymentMethodSelector } from "./payment-method-selector.mjs";
+import { OrderSummary } from "./order-summary.mjs";
+import { OrderConfirmation } from "./order-confirmation.mjs";
+export { AddressForm, CartSummary, CheckoutStepper, OrderConfirmation, OrderSummary, PaymentMethodSelector, ShippingMethodSelector };

package/dist/client/storefront/checkout/order-confirmation.d.ts

@@ -0,0 +1,21 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/checkout/order-confirmation.d.ts
+interface OrderConfirmationProps {
+  orderNumber: string;
+  title: string;
+  message: string;
+  children?: React$1.ReactNode;
+  className?: string;
+}
+declare function OrderConfirmation({
+  orderNumber,
+  title,
+  message,
+  children,
+  className
+}: OrderConfirmationProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { OrderConfirmation, OrderConfirmationProps };
+//# sourceMappingURL=order-confirmation.d.ts.map

package/dist/client/storefront/checkout/order-confirmation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"order-confirmation.d.ts","names":[],"sources":["../../../../src/client/storefront/checkout/order-confirmation.tsx"],"mappings":";;;;UAMiB,sBAAA;EACf,WAAA;EACA,KAAA;EACA,OAAA;EACA,QAAA,GAAW,OAAA,CAAM,SAAA;EACjB,SAAA;AAAA;AAAA,iBAGc,iBAAA,CAAA;EACd,WAAA;EACA,KAAA;EACA,OAAA;EACA,QAAA;EACA;AAAA,GACC,sBAAA,GAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA"}