@thorprovider/blocks 4.0.0 → 4.1.0

package/dist/blocks/e-commerce/account/address-book.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/account/address-book.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport type { FormEvent } from 'react'\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'\nimport { Field, FieldGroup, FieldLabel } from '../../../ui/field'\nimport { Input } from '../../../ui/input'\nimport { cn } from '../../../lib/utils'\n\n/** One address exactly as the host supplies it; the block formats no fields. */\nexport interface AccountAddress {\n  id: string\n  recipientName: string\n  /** Address lines in display order (street, city, region, postal code, country). */\n  lines: string[]\n  isDefaultShipping?: boolean\n  isDefaultBilling?: boolean\n}\n\nexport interface AddressBookLabels {\n  title: string\n  description: string\n  emptyLabel: string\n  addLabel: string\n  editLabel: string\n  deleteLabel: string\n  confirmDeleteLabel: string\n  cancelLabel: string\n  defaultShippingLabel: string\n  defaultBillingLabel: string\n  setDefaultShippingLabel: string\n  setDefaultBillingLabel: string\n}\n\nconst defaultLabels: AddressBookLabels = {\n  title: 'Direcciones',\n  description: 'Direcciones guardadas para tus pedidos.',\n  emptyLabel: 'Aún no tienes direcciones guardadas.',\n  addLabel: 'Añadir dirección',\n  editLabel: 'Editar',\n  deleteLabel: 'Eliminar',\n  confirmDeleteLabel: '¿Eliminar esta dirección?',\n  cancelLabel: 'Cancelar',\n  defaultShippingLabel: 'Envío predeterminado',\n  defaultBillingLabel: 'Facturación predeterminada',\n  setDefaultShippingLabel: 'Usar para envío',\n  setDefaultBillingLabel: 'Usar para facturación',\n}\n\nexport interface AddressBookProps {\n  addresses: AccountAddress[]\n  labels?: Partial<AddressBookLabels>\n  onCreate?: () => void\n  onEdit?: (id: string) => void\n  onDelete?: (id: string) => void\n  onSetDefaultShipping?: (id: string) => void\n  onSetDefaultBilling?: (id: string) => void\n  className?: string\n}\n\nfunction AddressEntry({\n  address,\n  copy,\n  onEdit,\n  onDelete,\n  onSetDefaultShipping,\n  onSetDefaultBilling,\n}: {\n  address: AccountAddress\n  copy: AddressBookLabels\n  onEdit?: (id: string) => void\n  onDelete?: (id: string) => void\n  onSetDefaultShipping?: (id: string) => void\n  onSetDefaultBilling?: (id: string) => void\n}) {\n  const [confirming, setConfirming] = useState(false)\n  const containerRef = useRef<HTMLLIElement | null>(null)\n\n  return (\n    <li\n      ref={containerRef}\n      tabIndex={-1}\n      data-slot=\"address-book-entry\"\n      className=\"focus-visible:ring-ring rounded-lg outline-none focus-visible:ring-2\"\n    >\n      <Card>\n        <CardHeader className=\"flex flex-row items-start justify-between gap-4\">\n          <div>\n            <CardTitle className=\"text-base\">{address.recipientName}</CardTitle>\n            <div className=\"mt-2 flex flex-wrap gap-2\">\n              {address.isDefaultShipping ? (\n                <Badge variant=\"secondary\">{copy.defaultShippingLabel}</Badge>\n              ) : null}\n              {address.isDefaultBilling ? (\n                <Badge variant=\"outline\">{copy.defaultBillingLabel}</Badge>\n              ) : null}\n            </div>\n          </div>\n        </CardHeader>\n        <CardContent>\n          <address className=\"text-muted-foreground text-sm not-italic\">\n            {address.lines.map((line, index) => (\n              <span key={`${address.id}:${index}`} className=\"block\">\n                {line}\n              </span>\n            ))}\n          </address>\n\n          {confirming ? (\n            <div className=\"mt-4 flex flex-wrap items-center gap-2\" role=\"group\" aria-label={copy.confirmDeleteLabel}>\n              <span className=\"text-sm\">{copy.confirmDeleteLabel}</span>\n              <Button\n                type=\"button\"\n                variant=\"destructive\"\n                size=\"sm\"\n                onClick={() => {\n                  onDelete?.(address.id)\n                  setConfirming(false)\n                  containerRef.current?.focus()\n                }}\n              >\n                {copy.deleteLabel}\n              </Button>\n              <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => setConfirming(false)}>\n                {copy.cancelLabel}\n              </Button>\n            </div>\n          ) : (\n            <div className=\"mt-4 flex flex-wrap gap-2\">\n              {onEdit ? (\n                <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => onEdit(address.id)}>\n                  {copy.editLabel}\n                </Button>\n              ) : null}\n              {onDelete ? (\n                <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => setConfirming(true)}>\n                  {copy.deleteLabel}\n                </Button>\n              ) : null}\n              {onSetDefaultShipping && !address.isDefaultShipping ? (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={() => onSetDefaultShipping(address.id)}\n                >\n                  {copy.setDefaultShippingLabel}\n                </Button>\n              ) : null}\n              {onSetDefaultBilling && !address.isDefaultBilling ? (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={() => onSetDefaultBilling(address.id)}\n                >\n                  {copy.setDefaultBillingLabel}\n                </Button>\n              ) : null}\n            </div>\n          )}\n        </CardContent>\n      </Card>\n    </li>\n  )\n}\n\n/**\n * The address book: renders the host's addresses verbatim, in the supplied\n * order, and reports every action. Deletion is a two-step inline confirmation\n * and the entry stays until the host supplies a refreshed list — the block never\n * removes it optimistically.\n */\nexport function AddressBook({\n  addresses,\n  labels,\n  onCreate,\n  onEdit,\n  onDelete,\n  onSetDefaultShipping,\n  onSetDefaultBilling,\n  className,\n}: AddressBookProps) {\n  const copy = { ...defaultLabels, ...labels }\n  return (\n    <section className={cn('rounded-lg border p-6', className)}>\n      <div className=\"flex flex-wrap items-start justify-between gap-4\">\n        <div>\n          <h2 className=\"text-lg font-semibold\">{copy.title}</h2>\n          <p className=\"text-muted-foreground mt-1 text-sm\">{copy.description}</p>\n        </div>\n        {onCreate ? (\n          <Button type=\"button\" onClick={onCreate}>\n            {copy.addLabel}\n          </Button>\n        ) : null}\n      </div>\n\n      {addresses.length === 0 ? (\n        <p className=\"text-muted-foreground mt-6 text-sm\" data-slot=\"address-book-empty\">\n          {copy.emptyLabel}\n        </p>\n      ) : (\n        <ul className=\"mt-6 grid list-none grid-cols-1 gap-4 p-0 md:grid-cols-2\">\n          {addresses.map((address) => (\n            <AddressEntry\n              key={address.id}\n              address={address}\n              copy={copy}\n              onEdit={onEdit}\n              onDelete={onDelete}\n              onSetDefaultShipping={onSetDefaultShipping}\n              onSetDefaultBilling={onSetDefaultBilling}\n            />\n          ))}\n        </ul>\n      )}\n    </section>\n  )\n}\n\n/** One field of the address form, declared by the host. */\nexport interface AddressFormField {\n  name: string\n  label: string\n  value?: string\n  type?: 'text' | 'tel' | 'email' | 'select'\n  required?: boolean\n  autoComplete?: string\n  /** Required for `select`; a select without options is not rendered. */\n  options?: { value: string; label: string }[]\n}\n\nexport interface AddressFormLabels {\n  title: string\n  submit: string\n  saving: string\n  cancel: string\n  requiredError: string\n}\n\nconst defaultFormLabels: AddressFormLabels = {\n  title: 'Dirección',\n  submit: 'Guardar dirección',\n  saving: 'Guardando…',\n  cancel: 'Cancelar',\n  requiredError: 'Este campo es obligatorio.',\n}\n\nexport interface AddressFormProps {\n  fields: AddressFormField[]\n  labels?: Partial<AddressFormLabels>\n  pending?: boolean\n  error?: string | null\n  /** Host-supplied field errors, keyed by field name. */\n  fieldErrors?: Record<string, string>\n  onSubmit: (values: Record<string, string>) => void\n  onCancel?: () => void\n  className?: string\n}\n\n/**\n * The address editor. It validates only the constraints the host declares (a\n * required field), never invents country or postal rules, and omits a select\n * the host supplied without options.\n */\nexport function AddressForm({\n  fields,\n  labels,\n  pending = false,\n  error,\n  fieldErrors,\n  onSubmit,\n  onCancel,\n  className,\n}: AddressFormProps) {\n  const copy = { ...defaultFormLabels, ...labels }\n  const visibleFields = fields.filter(\n    (field) => field.type !== 'select' || (Array.isArray(field.options) && field.options.length > 0),\n  )\n  const signature = visibleFields.map((field) => `${field.name}:${field.value ?? ''}`).join('|')\n  const [values, setValues] = useState<Record<string, string>>(() =>\n    Object.fromEntries(visibleFields.map((field) => [field.name, field.value ?? ''])),\n  )\n  const [localErrors, setLocalErrors] = useState<Record<string, string>>({})\n\n  // Re-seed when the host supplies new values (e.g. opening a different address).\n  useEffect(() => {\n    setValues(Object.fromEntries(visibleFields.map((field) => [field.name, field.value ?? ''])))\n    setLocalErrors({})\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [signature])\n\n  const submit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const nextErrors: Record<string, string> = {}\n    for (const field of visibleFields) {\n      if (field.required && (values[field.name] ?? '').trim() === '') {\n        nextErrors[field.name] = copy.requiredError\n      }\n    }\n    setLocalErrors(nextErrors)\n    if (Object.keys(nextErrors).length > 0) return\n    onSubmit(Object.fromEntries(visibleFields.map((field) => [field.name, values[field.name] ?? ''])))\n  }\n\n  return (\n    <section className={cn('rounded-lg border p-6', className)}>\n      <h2 className=\"text-lg font-semibold\">{copy.title}</h2>\n      <form className=\"mt-6\" noValidate onSubmit={submit}>\n        <fieldset disabled={pending} aria-busy={pending} className=\"contents\">\n          <FieldGroup className=\"grid grid-cols-1 gap-5 sm:grid-cols-2\">\n            {visibleFields.map((field) => {\n              const id = `address-${field.name}`\n              const message = localErrors[field.name] ?? fieldErrors?.[field.name]\n              return (\n                <Field key={field.name}>\n                  <FieldLabel htmlFor={id}>{field.label}</FieldLabel>\n                  {field.type === 'select' ? (\n                    <select\n                      id={id}\n                      name={field.name}\n                      value={values[field.name] ?? ''}\n                      required={field.required}\n                      aria-invalid={message ? true : undefined}\n                      aria-describedby={message ? `${id}-error` : undefined}\n                      className=\"border-input bg-background h-9 w-full rounded-md border px-3 text-sm\"\n                      onChange={(event) =>\n                        setValues((current) => ({ ...current, [field.name]: event.target.value }))\n                      }\n                    >\n                      <option value=\"\">—</option>\n                      {(field.options ?? []).map((option) => (\n                        <option key={option.value} value={option.value}>\n                          {option.label}\n                        </option>\n                      ))}\n                    </select>\n                  ) : (\n                    <Input\n                      id={id}\n                      name={field.name}\n                      type={field.type ?? 'text'}\n                      value={values[field.name] ?? ''}\n                      required={field.required}\n                      autoComplete={field.autoComplete}\n                      aria-invalid={message ? true : undefined}\n                      aria-describedby={message ? `${id}-error` : undefined}\n                      onChange={(event) =>\n                        setValues((current) => ({ ...current, [field.name]: event.target.value }))\n                      }\n                    />\n                  )}\n                  {message ? (\n                    <p id={`${id}-error`} className=\"text-destructive text-sm\">\n                      {message}\n                    </p>\n                  ) : null}\n                </Field>\n              )\n            })}\n          </FieldGroup>\n        </fieldset>\n\n        {error ? (\n          <p role=\"alert\" className=\"text-destructive mt-4 text-sm\">\n            {error}\n          </p>\n        ) : null}\n\n        <div className=\"mt-6 flex flex-wrap gap-2\">\n          <Button type=\"submit\" disabled={pending}>\n            {pending ? copy.saving : copy.submit}\n          </Button>\n          {onCancel ? (\n            <Button type=\"button\" variant=\"outline\" disabled={pending} onClick={onCancel}>\n              {copy.cancel}\n            </Button>\n          ) : null}\n        </div>\n      </form>\n    </section>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/account/address-book.mjs

@@ -0,0 +1,225 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Badge } from "../../../ui/badge.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Card, CardContent, CardHeader, CardTitle } from "../../../ui/card.mjs";
+import { Field, FieldGroup, FieldLabel } from "../../../ui/field.mjs";
+import { Input } from "../../../ui/input.mjs";
+import { cn } from "../../../lib/utils.mjs";
+const defaultLabels = {
+  title: "Direcciones",
+  description: "Direcciones guardadas para tus pedidos.",
+  emptyLabel: "A\xFAn no tienes direcciones guardadas.",
+  addLabel: "A\xF1adir direcci\xF3n",
+  editLabel: "Editar",
+  deleteLabel: "Eliminar",
+  confirmDeleteLabel: "\xBFEliminar esta direcci\xF3n?",
+  cancelLabel: "Cancelar",
+  defaultShippingLabel: "Env\xEDo predeterminado",
+  defaultBillingLabel: "Facturaci\xF3n predeterminada",
+  setDefaultShippingLabel: "Usar para env\xEDo",
+  setDefaultBillingLabel: "Usar para facturaci\xF3n"
+};
+function AddressEntry({
+  address,
+  copy,
+  onEdit,
+  onDelete,
+  onSetDefaultShipping,
+  onSetDefaultBilling
+}) {
+  const [confirming, setConfirming] = useState(false);
+  const containerRef = useRef(null);
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref: containerRef,
+      tabIndex: -1,
+      "data-slot": "address-book-entry",
+      className: "focus-visible:ring-ring rounded-lg outline-none focus-visible:ring-2",
+      children: /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardHeader, { className: "flex flex-row items-start justify-between gap-4", children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: address.recipientName }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap gap-2", children: [
+            address.isDefaultShipping ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: copy.defaultShippingLabel }) : null,
+            address.isDefaultBilling ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: copy.defaultBillingLabel }) : null
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs(CardContent, { children: [
+          /* @__PURE__ */ jsx("address", { className: "text-muted-foreground text-sm not-italic", children: address.lines.map((line, index) => /* @__PURE__ */ jsx("span", { className: "block", children: line }, `${address.id}:${index}`)) }),
+          confirming ? /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-2", role: "group", "aria-label": copy.confirmDeleteLabel, children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm", children: copy.confirmDeleteLabel }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "destructive",
+                size: "sm",
+                onClick: () => {
+                  onDelete?.(address.id);
+                  setConfirming(false);
+                  containerRef.current?.focus();
+                },
+                children: copy.deleteLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setConfirming(false), children: copy.cancelLabel })
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap gap-2", children: [
+            onEdit ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onEdit(address.id), children: copy.editLabel }) : null,
+            onDelete ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setConfirming(true), children: copy.deleteLabel }) : null,
+            onSetDefaultShipping && !address.isDefaultShipping ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                onClick: () => onSetDefaultShipping(address.id),
+                children: copy.setDefaultShippingLabel
+              }
+            ) : null,
+            onSetDefaultBilling && !address.isDefaultBilling ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                onClick: () => onSetDefaultBilling(address.id),
+                children: copy.setDefaultBillingLabel
+              }
+            ) : null
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function AddressBook({
+  addresses,
+  labels,
+  onCreate,
+  onEdit,
+  onDelete,
+  onSetDefaultShipping,
+  onSetDefaultBilling,
+  className
+}) {
+  const copy = { ...defaultLabels, ...labels };
+  return /* @__PURE__ */ jsxs("section", { className: cn("rounded-lg border p-6", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: copy.title }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: copy.description })
+      ] }),
+      onCreate ? /* @__PURE__ */ jsx(Button, { type: "button", onClick: onCreate, children: copy.addLabel }) : null
+    ] }),
+    addresses.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-6 text-sm", "data-slot": "address-book-empty", children: copy.emptyLabel }) : /* @__PURE__ */ jsx("ul", { className: "mt-6 grid list-none grid-cols-1 gap-4 p-0 md:grid-cols-2", children: addresses.map((address) => /* @__PURE__ */ jsx(
+      AddressEntry,
+      {
+        address,
+        copy,
+        onEdit,
+        onDelete,
+        onSetDefaultShipping,
+        onSetDefaultBilling
+      },
+      address.id
+    )) })
+  ] });
+}
+const defaultFormLabels = {
+  title: "Direcci\xF3n",
+  submit: "Guardar direcci\xF3n",
+  saving: "Guardando\u2026",
+  cancel: "Cancelar",
+  requiredError: "Este campo es obligatorio."
+};
+function AddressForm({
+  fields,
+  labels,
+  pending = false,
+  error,
+  fieldErrors,
+  onSubmit,
+  onCancel,
+  className
+}) {
+  const copy = { ...defaultFormLabels, ...labels };
+  const visibleFields = fields.filter(
+    (field) => field.type !== "select" || Array.isArray(field.options) && field.options.length > 0
+  );
+  const signature = visibleFields.map((field) => `${field.name}:${field.value ?? ""}`).join("|");
+  const [values, setValues] = useState(
+    () => Object.fromEntries(visibleFields.map((field) => [field.name, field.value ?? ""]))
+  );
+  const [localErrors, setLocalErrors] = useState({});
+  useEffect(() => {
+    setValues(Object.fromEntries(visibleFields.map((field) => [field.name, field.value ?? ""])));
+    setLocalErrors({});
+  }, [signature]);
+  const submit = (event) => {
+    event.preventDefault();
+    const nextErrors = {};
+    for (const field of visibleFields) {
+      if (field.required && (values[field.name] ?? "").trim() === "") {
+        nextErrors[field.name] = copy.requiredError;
+      }
+    }
+    setLocalErrors(nextErrors);
+    if (Object.keys(nextErrors).length > 0) return;
+    onSubmit(Object.fromEntries(visibleFields.map((field) => [field.name, values[field.name] ?? ""])));
+  };
+  return /* @__PURE__ */ jsxs("section", { className: cn("rounded-lg border p-6", className), children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: copy.title }),
+    /* @__PURE__ */ jsxs("form", { className: "mt-6", noValidate: true, onSubmit: submit, children: [
+      /* @__PURE__ */ jsx("fieldset", { disabled: pending, "aria-busy": pending, className: "contents", children: /* @__PURE__ */ jsx(FieldGroup, { className: "grid grid-cols-1 gap-5 sm:grid-cols-2", children: visibleFields.map((field) => {
+        const id = `address-${field.name}`;
+        const message = localErrors[field.name] ?? fieldErrors?.[field.name];
+        return /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsx(FieldLabel, { htmlFor: id, children: field.label }),
+          field.type === "select" ? /* @__PURE__ */ jsxs(
+            "select",
+            {
+              id,
+              name: field.name,
+              value: values[field.name] ?? "",
+              required: field.required,
+              "aria-invalid": message ? true : void 0,
+              "aria-describedby": message ? `${id}-error` : void 0,
+              className: "border-input bg-background h-9 w-full rounded-md border px-3 text-sm",
+              onChange: (event) => setValues((current) => ({ ...current, [field.name]: event.target.value })),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "\u2014" }),
+                (field.options ?? []).map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+              ]
+            }
+          ) : /* @__PURE__ */ jsx(
+            Input,
+            {
+              id,
+              name: field.name,
+              type: field.type ?? "text",
+              value: values[field.name] ?? "",
+              required: field.required,
+              autoComplete: field.autoComplete,
+              "aria-invalid": message ? true : void 0,
+              "aria-describedby": message ? `${id}-error` : void 0,
+              onChange: (event) => setValues((current) => ({ ...current, [field.name]: event.target.value }))
+            }
+          ),
+          message ? /* @__PURE__ */ jsx("p", { id: `${id}-error`, className: "text-destructive text-sm", children: message }) : null
+        ] }, field.name);
+      }) }) }),
+      error ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive mt-4 text-sm", children: error }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { type: "submit", disabled: pending, children: pending ? copy.saving : copy.submit }),
+        onCancel ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", disabled: pending, onClick: onCancel, children: copy.cancel }) : null
+      ] })
+    ] })
+  ] });
+}
+export {
+  AddressBook,
+  AddressForm
+};
+//# sourceMappingURL=address-book.mjs.map

package/dist/blocks/e-commerce/account/address-book.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/account/address-book.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport type { FormEvent } from 'react'\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'\nimport { Field, FieldGroup, FieldLabel } from '../../../ui/field'\nimport { Input } from '../../../ui/input'\nimport { cn } from '../../../lib/utils'\n\n/** One address exactly as the host supplies it; the block formats no fields. */\nexport interface AccountAddress {\n  id: string\n  recipientName: string\n  /** Address lines in display order (street, city, region, postal code, country). */\n  lines: string[]\n  isDefaultShipping?: boolean\n  isDefaultBilling?: boolean\n}\n\nexport interface AddressBookLabels {\n  title: string\n  description: string\n  emptyLabel: string\n  addLabel: string\n  editLabel: string\n  deleteLabel: string\n  confirmDeleteLabel: string\n  cancelLabel: string\n  defaultShippingLabel: string\n  defaultBillingLabel: string\n  setDefaultShippingLabel: string\n  setDefaultBillingLabel: string\n}\n\nconst defaultLabels: AddressBookLabels = {\n  title: 'Direcciones',\n  description: 'Direcciones guardadas para tus pedidos.',\n  emptyLabel: 'Aún no tienes direcciones guardadas.',\n  addLabel: 'Añadir dirección',\n  editLabel: 'Editar',\n  deleteLabel: 'Eliminar',\n  confirmDeleteLabel: '¿Eliminar esta dirección?',\n  cancelLabel: 'Cancelar',\n  defaultShippingLabel: 'Envío predeterminado',\n  defaultBillingLabel: 'Facturación predeterminada',\n  setDefaultShippingLabel: 'Usar para envío',\n  setDefaultBillingLabel: 'Usar para facturación',\n}\n\nexport interface AddressBookProps {\n  addresses: AccountAddress[]\n  labels?: Partial<AddressBookLabels>\n  onCreate?: () => void\n  onEdit?: (id: string) => void\n  onDelete?: (id: string) => void\n  onSetDefaultShipping?: (id: string) => void\n  onSetDefaultBilling?: (id: string) => void\n  className?: string\n}\n\nfunction AddressEntry({\n  address,\n  copy,\n  onEdit,\n  onDelete,\n  onSetDefaultShipping,\n  onSetDefaultBilling,\n}: {\n  address: AccountAddress\n  copy: AddressBookLabels\n  onEdit?: (id: string) => void\n  onDelete?: (id: string) => void\n  onSetDefaultShipping?: (id: string) => void\n  onSetDefaultBilling?: (id: string) => void\n}) {\n  const [confirming, setConfirming] = useState(false)\n  const containerRef = useRef<HTMLLIElement | null>(null)\n\n  return (\n    <li\n      ref={containerRef}\n      tabIndex={-1}\n      data-slot=\"address-book-entry\"\n      className=\"focus-visible:ring-ring rounded-lg outline-none focus-visible:ring-2\"\n    >\n      <Card>\n        <CardHeader className=\"flex flex-row items-start justify-between gap-4\">\n          <div>\n            <CardTitle className=\"text-base\">{address.recipientName}</CardTitle>\n            <div className=\"mt-2 flex flex-wrap gap-2\">\n              {address.isDefaultShipping ? (\n                <Badge variant=\"secondary\">{copy.defaultShippingLabel}</Badge>\n              ) : null}\n              {address.isDefaultBilling ? (\n                <Badge variant=\"outline\">{copy.defaultBillingLabel}</Badge>\n              ) : null}\n            </div>\n          </div>\n        </CardHeader>\n        <CardContent>\n          <address className=\"text-muted-foreground text-sm not-italic\">\n            {address.lines.map((line, index) => (\n              <span key={`${address.id}:${index}`} className=\"block\">\n                {line}\n              </span>\n            ))}\n          </address>\n\n          {confirming ? (\n            <div className=\"mt-4 flex flex-wrap items-center gap-2\" role=\"group\" aria-label={copy.confirmDeleteLabel}>\n              <span className=\"text-sm\">{copy.confirmDeleteLabel}</span>\n              <Button\n                type=\"button\"\n                variant=\"destructive\"\n                size=\"sm\"\n                onClick={() => {\n                  onDelete?.(address.id)\n                  setConfirming(false)\n                  containerRef.current?.focus()\n                }}\n              >\n                {copy.deleteLabel}\n              </Button>\n              <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => setConfirming(false)}>\n                {copy.cancelLabel}\n              </Button>\n            </div>\n          ) : (\n            <div className=\"mt-4 flex flex-wrap gap-2\">\n              {onEdit ? (\n                <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => onEdit(address.id)}>\n                  {copy.editLabel}\n                </Button>\n              ) : null}\n              {onDelete ? (\n                <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => setConfirming(true)}>\n                  {copy.deleteLabel}\n                </Button>\n              ) : null}\n              {onSetDefaultShipping && !address.isDefaultShipping ? (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={() => onSetDefaultShipping(address.id)}\n                >\n                  {copy.setDefaultShippingLabel}\n                </Button>\n              ) : null}\n              {onSetDefaultBilling && !address.isDefaultBilling ? (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={() => onSetDefaultBilling(address.id)}\n                >\n                  {copy.setDefaultBillingLabel}\n                </Button>\n              ) : null}\n            </div>\n          )}\n        </CardContent>\n      </Card>\n    </li>\n  )\n}\n\n/**\n * The address book: renders the host's addresses verbatim, in the supplied\n * order, and reports every action. Deletion is a two-step inline confirmation\n * and the entry stays until the host supplies a refreshed list — the block never\n * removes it optimistically.\n */\nexport function AddressBook({\n  addresses,\n  labels,\n  onCreate,\n  onEdit,\n  onDelete,\n  onSetDefaultShipping,\n  onSetDefaultBilling,\n  className,\n}: AddressBookProps) {\n  const copy = { ...defaultLabels, ...labels }\n  return (\n    <section className={cn('rounded-lg border p-6', className)}>\n      <div className=\"flex flex-wrap items-start justify-between gap-4\">\n        <div>\n          <h2 className=\"text-lg font-semibold\">{copy.title}</h2>\n          <p className=\"text-muted-foreground mt-1 text-sm\">{copy.description}</p>\n        </div>\n        {onCreate ? (\n          <Button type=\"button\" onClick={onCreate}>\n            {copy.addLabel}\n          </Button>\n        ) : null}\n      </div>\n\n      {addresses.length === 0 ? (\n        <p className=\"text-muted-foreground mt-6 text-sm\" data-slot=\"address-book-empty\">\n          {copy.emptyLabel}\n        </p>\n      ) : (\n        <ul className=\"mt-6 grid list-none grid-cols-1 gap-4 p-0 md:grid-cols-2\">\n          {addresses.map((address) => (\n            <AddressEntry\n              key={address.id}\n              address={address}\n              copy={copy}\n              onEdit={onEdit}\n              onDelete={onDelete}\n              onSetDefaultShipping={onSetDefaultShipping}\n              onSetDefaultBilling={onSetDefaultBilling}\n            />\n          ))}\n        </ul>\n      )}\n    </section>\n  )\n}\n\n/** One field of the address form, declared by the host. */\nexport interface AddressFormField {\n  name: string\n  label: string\n  value?: string\n  type?: 'text' | 'tel' | 'email' | 'select'\n  required?: boolean\n  autoComplete?: string\n  /** Required for `select`; a select without options is not rendered. */\n  options?: { value: string; label: string }[]\n}\n\nexport interface AddressFormLabels {\n  title: string\n  submit: string\n  saving: string\n  cancel: string\n  requiredError: string\n}\n\nconst defaultFormLabels: AddressFormLabels = {\n  title: 'Dirección',\n  submit: 'Guardar dirección',\n  saving: 'Guardando…',\n  cancel: 'Cancelar',\n  requiredError: 'Este campo es obligatorio.',\n}\n\nexport interface AddressFormProps {\n  fields: AddressFormField[]\n  labels?: Partial<AddressFormLabels>\n  pending?: boolean\n  error?: string | null\n  /** Host-supplied field errors, keyed by field name. */\n  fieldErrors?: Record<string, string>\n  onSubmit: (values: Record<string, string>) => void\n  onCancel?: () => void\n  className?: string\n}\n\n/**\n * The address editor. It validates only the constraints the host declares (a\n * required field), never invents country or postal rules, and omits a select\n * the host supplied without options.\n */\nexport function AddressForm({\n  fields,\n  labels,\n  pending = false,\n  error,\n  fieldErrors,\n  onSubmit,\n  onCancel,\n  className,\n}: AddressFormProps) {\n  const copy = { ...defaultFormLabels, ...labels }\n  const visibleFields = fields.filter(\n    (field) => field.type !== 'select' || (Array.isArray(field.options) && field.options.length > 0),\n  )\n  const signature = visibleFields.map((field) => `${field.name}:${field.value ?? ''}`).join('|')\n  const [values, setValues] = useState<Record<string, string>>(() =>\n    Object.fromEntries(visibleFields.map((field) => [field.name, field.value ?? ''])),\n  )\n  const [localErrors, setLocalErrors] = useState<Record<string, string>>({})\n\n  // Re-seed when the host supplies new values (e.g. opening a different address).\n  useEffect(() => {\n    setValues(Object.fromEntries(visibleFields.map((field) => [field.name, field.value ?? ''])))\n    setLocalErrors({})\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [signature])\n\n  const submit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const nextErrors: Record<string, string> = {}\n    for (const field of visibleFields) {\n      if (field.required && (values[field.name] ?? '').trim() === '') {\n        nextErrors[field.name] = copy.requiredError\n      }\n    }\n    setLocalErrors(nextErrors)\n    if (Object.keys(nextErrors).length > 0) return\n    onSubmit(Object.fromEntries(visibleFields.map((field) => [field.name, values[field.name] ?? ''])))\n  }\n\n  return (\n    <section className={cn('rounded-lg border p-6', className)}>\n      <h2 className=\"text-lg font-semibold\">{copy.title}</h2>\n      <form className=\"mt-6\" noValidate onSubmit={submit}>\n        <fieldset disabled={pending} aria-busy={pending} className=\"contents\">\n          <FieldGroup className=\"grid grid-cols-1 gap-5 sm:grid-cols-2\">\n            {visibleFields.map((field) => {\n              const id = `address-${field.name}`\n              const message = localErrors[field.name] ?? fieldErrors?.[field.name]\n              return (\n                <Field key={field.name}>\n                  <FieldLabel htmlFor={id}>{field.label}</FieldLabel>\n                  {field.type === 'select' ? (\n                    <select\n                      id={id}\n                      name={field.name}\n                      value={values[field.name] ?? ''}\n                      required={field.required}\n                      aria-invalid={message ? true : undefined}\n                      aria-describedby={message ? `${id}-error` : undefined}\n                      className=\"border-input bg-background h-9 w-full rounded-md border px-3 text-sm\"\n                      onChange={(event) =>\n                        setValues((current) => ({ ...current, [field.name]: event.target.value }))\n                      }\n                    >\n                      <option value=\"\">—</option>\n                      {(field.options ?? []).map((option) => (\n                        <option key={option.value} value={option.value}>\n                          {option.label}\n                        </option>\n                      ))}\n                    </select>\n                  ) : (\n                    <Input\n                      id={id}\n                      name={field.name}\n                      type={field.type ?? 'text'}\n                      value={values[field.name] ?? ''}\n                      required={field.required}\n                      autoComplete={field.autoComplete}\n                      aria-invalid={message ? true : undefined}\n                      aria-describedby={message ? `${id}-error` : undefined}\n                      onChange={(event) =>\n                        setValues((current) => ({ ...current, [field.name]: event.target.value }))\n                      }\n                    />\n                  )}\n                  {message ? (\n                    <p id={`${id}-error`} className=\"text-destructive text-sm\">\n                      {message}\n                    </p>\n                  ) : null}\n                </Field>\n              )\n            })}\n          </FieldGroup>\n        </fieldset>\n\n        {error ? (\n          <p role=\"alert\" className=\"text-destructive mt-4 text-sm\">\n            {error}\n          </p>\n        ) : null}\n\n        <div className=\"mt-6 flex flex-wrap gap-2\">\n          <Button type=\"submit\" disabled={pending}>\n            {pending ? copy.saving : copy.submit}\n          </Button>\n          {onCancel ? (\n            <Button type=\"button\" variant=\"outline\" disabled={pending} onClick={onCancel}>\n              {copy.cancel}\n            </Button>\n          ) : null}\n        </div>\n      </form>\n    </section>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/account/profile-form.d.ts

@@ -0,0 +1,35 @@
+/** One editable (or read-only) profile field the host declares. */
+export interface ProfileField {
+    name: string;
+    label: string;
+    value?: string;
+    type?: 'text' | 'tel' | 'email';
+    required?: boolean;
+    /** Rendered as read-only; a field the host omits is absent entirely. */
+    readOnly?: boolean;
+    autoComplete?: string;
+}
+export interface ProfileFormLabels {
+    title: string;
+    description: string;
+    submit: string;
+    saving: string;
+}
+export interface ProfileFormProps {
+    /** Exactly the fields the host declares, in order. */
+    fields: ProfileField[];
+    labels?: Partial<ProfileFormLabels>;
+    /** Host-owned mutation state; the form never claims success on its own. */
+    pending?: boolean;
+    error?: string | null;
+    onSubmit: (values: Record<string, string>) => void;
+    className?: string;
+}
+/**
+ * The profile editor. It renders only host-declared fields, keeps the entered
+ * values while a save is pending or fails, and reports the values to the host —
+ * it never calls a backend and never invents a field (an email change, for
+ * example, is absent when the host does not declare it).
+ */
+export declare function ProfileForm({ fields, labels, pending, error, onSubmit, className, }: ProfileFormProps): import("react").JSX.Element;
+//# sourceMappingURL=profile-form.d.ts.map

package/dist/blocks/e-commerce/account/profile-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-form.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/account/profile-form.tsx"],"names":[],"mappings":"AAQA,mEAAmE;AACnE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf;AASD,MAAM,WAAW,gBAAgB;IAC/B,sDAAsD;IACtD,MAAM,EAAE,YAAY,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAA;IACnC,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAA;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,MAAM,EACN,OAAe,EACf,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,+BAoElB"}

package/dist/blocks/e-commerce/account/profile-form.js

@@ -0,0 +1,100 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var profile_form_exports = {};
+__export(profile_form_exports, {
+  ProfileForm: () => ProfileForm
+});
+module.exports = __toCommonJS(profile_form_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_button = require("../../../ui/button.js");
+var import_field = require("../../../ui/field.js");
+var import_input = require("../../../ui/input.js");
+var import_utils = require("../../../lib/utils.js");
+const defaultLabels = {
+  title: "Datos personales",
+  description: "Actualiza los datos de tu cuenta.",
+  submit: "Guardar cambios",
+  saving: "Guardando\u2026"
+};
+function ProfileForm({
+  fields,
+  labels,
+  pending = false,
+  error,
+  onSubmit,
+  className
+}) {
+  const copy = { ...defaultLabels, ...labels };
+  const signature = fields.map((field) => `${field.name}:${field.value ?? ""}`).join("|");
+  const [values, setValues] = (0, import_react.useState)(
+    () => Object.fromEntries(fields.map((field) => [field.name, field.value ?? ""]))
+  );
+  (0, import_react.useEffect)(() => {
+    setValues(Object.fromEntries(fields.map((field) => [field.name, field.value ?? ""])));
+  }, [signature]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: (0, import_utils.cn)("rounded-lg border p-6", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-lg font-semibold", children: copy.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mt-1 text-sm", children: copy.description }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "form",
+      {
+        className: "mt-6",
+        noValidate: true,
+        onSubmit: (event) => {
+          event.preventDefault();
+          const submitted = Object.fromEntries(
+            fields.map((field) => [field.name, values[field.name] ?? ""])
+          );
+          onSubmit(submitted);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("fieldset", { disabled: pending, "aria-busy": pending, className: "contents", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.FieldGroup, { className: "grid grid-cols-1 gap-5 sm:grid-cols-2", children: fields.map((field) => {
+            const id = `profile-${field.name}`;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_field.Field, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.FieldLabel, { htmlFor: id, children: field.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_input.Input,
+                {
+                  id,
+                  name: field.name,
+                  type: field.type ?? "text",
+                  value: values[field.name] ?? "",
+                  readOnly: field.readOnly,
+                  required: field.required,
+                  autoComplete: field.autoComplete,
+                  "aria-readonly": field.readOnly || void 0,
+                  onChange: (event) => setValues((current) => ({ ...current, [field.name]: event.target.value }))
+                }
+              )
+            ] }, field.name);
+          }) }) }),
+          error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", className: "text-destructive mt-4 text-sm", children: error }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "submit", className: "mt-6", disabled: pending, children: pending ? copy.saving : copy.submit })
+        ]
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProfileForm
+});
+//# sourceMappingURL=profile-form.js.map

package/dist/blocks/e-commerce/account/profile-form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/account/profile-form.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport { Button } from '../../../ui/button'\nimport { Field, FieldGroup, FieldLabel } from '../../../ui/field'\nimport { Input } from '../../../ui/input'\nimport { cn } from '../../../lib/utils'\n\n/** One editable (or read-only) profile field the host declares. */\nexport interface ProfileField {\n  name: string\n  label: string\n  value?: string\n  type?: 'text' | 'tel' | 'email'\n  required?: boolean\n  /** Rendered as read-only; a field the host omits is absent entirely. */\n  readOnly?: boolean\n  autoComplete?: string\n}\n\nexport interface ProfileFormLabels {\n  title: string\n  description: string\n  submit: string\n  saving: string\n}\n\nconst defaultLabels: ProfileFormLabels = {\n  title: 'Datos personales',\n  description: 'Actualiza los datos de tu cuenta.',\n  submit: 'Guardar cambios',\n  saving: 'Guardando…',\n}\n\nexport interface ProfileFormProps {\n  /** Exactly the fields the host declares, in order. */\n  fields: ProfileField[]\n  labels?: Partial<ProfileFormLabels>\n  /** Host-owned mutation state; the form never claims success on its own. */\n  pending?: boolean\n  error?: string | null\n  onSubmit: (values: Record<string, string>) => void\n  className?: string\n}\n\n/**\n * The profile editor. It renders only host-declared fields, keeps the entered\n * values while a save is pending or fails, and reports the values to the host —\n * it never calls a backend and never invents a field (an email change, for\n * example, is absent when the host does not declare it).\n */\nexport function ProfileForm({\n  fields,\n  labels,\n  pending = false,\n  error,\n  onSubmit,\n  className,\n}: ProfileFormProps) {\n  const copy = { ...defaultLabels, ...labels }\n  const signature = fields.map((field) => `${field.name}:${field.value ?? ''}`).join('|')\n  const [values, setValues] = useState<Record<string, string>>(() =>\n    Object.fromEntries(fields.map((field) => [field.name, field.value ?? ''])),\n  )\n\n  // Re-seed when the host supplies new default values (for example after a\n  // successful save). The signature covers field identity and values, so a\n  // pending/error prop change never clears what the shopper typed.\n  useEffect(() => {\n    setValues(Object.fromEntries(fields.map((field) => [field.name, field.value ?? ''])))\n  }, [signature])\n\n  return (\n    <section className={cn('rounded-lg border p-6', className)}>\n      <h2 className=\"text-lg font-semibold\">{copy.title}</h2>\n      <p className=\"text-muted-foreground mt-1 text-sm\">{copy.description}</p>\n\n      <form\n        className=\"mt-6\"\n        noValidate\n        onSubmit={(event) => {\n          event.preventDefault()\n          const submitted = Object.fromEntries(\n            fields.map((field) => [field.name, values[field.name] ?? '']),\n          )\n          onSubmit(submitted)\n        }}\n      >\n        <fieldset disabled={pending} aria-busy={pending} className=\"contents\">\n          <FieldGroup className=\"grid grid-cols-1 gap-5 sm:grid-cols-2\">\n            {fields.map((field) => {\n              const id = `profile-${field.name}`\n              return (\n                <Field key={field.name}>\n                  <FieldLabel htmlFor={id}>{field.label}</FieldLabel>\n                  <Input\n                    id={id}\n                    name={field.name}\n                    type={field.type ?? 'text'}\n                    value={values[field.name] ?? ''}\n                    readOnly={field.readOnly}\n                    required={field.required}\n                    autoComplete={field.autoComplete}\n                    aria-readonly={field.readOnly || undefined}\n                    onChange={(event) =>\n                      setValues((current) => ({ ...current, [field.name]: event.target.value }))\n                    }\n                  />\n                </Field>\n              )\n            })}\n          </FieldGroup>\n        </fieldset>\n\n        {error ? (\n          <p role=\"alert\" className=\"text-destructive mt-4 text-sm\">\n            {error}\n          </p>\n        ) : null}\n\n        <Button type=\"submit\" className=\"mt-6\" disabled={pending}>\n          {pending ? copy.saving : copy.submit}\n        </Button>\n      </form>\n    </section>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0EM;AAxEN,mBAAoC;AACpC,oBAAuB;AACvB,mBAA8C;AAC9C,mBAAsB;AACtB,mBAAmB;AAqBnB,MAAM,gBAAmC;AAAA,EACvC,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,QAAQ;AACV;AAmBO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,OAAO,EAAE,GAAG,eAAe,GAAG,OAAO;AAC3C,QAAM,YAAY,OAAO,IAAI,CAAC,UAAU,GAAG,MAAM,IAAI,IAAI,MAAM,SAAS,EAAE,EAAE,EAAE,KAAK,GAAG;AACtF,QAAM,CAAC,QAAQ,SAAS,QAAI;AAAA,IAAiC,MAC3D,OAAO,YAAY,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,MAAM,MAAM,SAAS,EAAE,CAAC,CAAC;AAAA,EAC3E;AAKA,8BAAU,MAAM;AACd,cAAU,OAAO,YAAY,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,MAAM,MAAM,SAAS,EAAE,CAAC,CAAC,CAAC;AAAA,EACtF,GAAG,CAAC,SAAS,CAAC;AAEd,SACE,6CAAC,aAAQ,eAAW,iBAAG,yBAAyB,SAAS,GACvD;AAAA,gDAAC,QAAG,WAAU,yBAAyB,eAAK,OAAM;AAAA,IAClD,4CAAC,OAAE,WAAU,sCAAsC,eAAK,aAAY;AAAA,IAEpE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,YAAU;AAAA,QACV,UAAU,CAAC,UAAU;AACnB,gBAAM,eAAe;AACrB,gBAAM,YAAY,OAAO;AAAA,YACvB,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,MAAM,OAAO,MAAM,IAAI,KAAK,EAAE,CAAC;AAAA,UAC9D;AACA,mBAAS,SAAS;AAAA,QACpB;AAAA,QAEA;AAAA,sDAAC,cAAS,UAAU,SAAS,aAAW,SAAS,WAAU,YACzD,sDAAC,2BAAW,WAAU,yCACnB,iBAAO,IAAI,CAAC,UAAU;AACrB,kBAAM,KAAK,WAAW,MAAM,IAAI;AAChC,mBACE,6CAAC,sBACC;AAAA,0DAAC,2BAAW,SAAS,IAAK,gBAAM,OAAM;AAAA,cACtC;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA,MAAM,MAAM;AAAA,kBACZ,MAAM,MAAM,QAAQ;AAAA,kBACpB,OAAO,OAAO,MAAM,IAAI,KAAK;AAAA,kBAC7B,UAAU,MAAM;AAAA,kBAChB,UAAU,MAAM;AAAA,kBAChB,cAAc,MAAM;AAAA,kBACpB,iBAAe,MAAM,YAAY;AAAA,kBACjC,UAAU,CAAC,UACT,UAAU,CAAC,aAAa,EAAE,GAAG,SAAS,CAAC,MAAM,IAAI,GAAG,MAAM,OAAO,MAAM,EAAE;AAAA;AAAA,cAE7E;AAAA,iBAdU,MAAM,IAelB;AAAA,UAEJ,CAAC,GACH,GACF;AAAA,UAEC,QACC,4CAAC,OAAE,MAAK,SAAQ,WAAU,iCACvB,iBACH,IACE;AAAA,UAEJ,4CAAC,wBAAO,MAAK,UAAS,WAAU,QAAO,UAAU,SAC9C,oBAAU,KAAK,SAAS,KAAK,QAChC;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/blocks/e-commerce/account/profile-form.mjs

@@ -0,0 +1,76 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Button } from "../../../ui/button.mjs";
+import { Field, FieldGroup, FieldLabel } from "../../../ui/field.mjs";
+import { Input } from "../../../ui/input.mjs";
+import { cn } from "../../../lib/utils.mjs";
+const defaultLabels = {
+  title: "Datos personales",
+  description: "Actualiza los datos de tu cuenta.",
+  submit: "Guardar cambios",
+  saving: "Guardando\u2026"
+};
+function ProfileForm({
+  fields,
+  labels,
+  pending = false,
+  error,
+  onSubmit,
+  className
+}) {
+  const copy = { ...defaultLabels, ...labels };
+  const signature = fields.map((field) => `${field.name}:${field.value ?? ""}`).join("|");
+  const [values, setValues] = useState(
+    () => Object.fromEntries(fields.map((field) => [field.name, field.value ?? ""]))
+  );
+  useEffect(() => {
+    setValues(Object.fromEntries(fields.map((field) => [field.name, field.value ?? ""])));
+  }, [signature]);
+  return /* @__PURE__ */ jsxs("section", { className: cn("rounded-lg border p-6", className), children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: copy.title }),
+    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: copy.description }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: "mt-6",
+        noValidate: true,
+        onSubmit: (event) => {
+          event.preventDefault();
+          const submitted = Object.fromEntries(
+            fields.map((field) => [field.name, values[field.name] ?? ""])
+          );
+          onSubmit(submitted);
+        },
+        children: [
+          /* @__PURE__ */ jsx("fieldset", { disabled: pending, "aria-busy": pending, className: "contents", children: /* @__PURE__ */ jsx(FieldGroup, { className: "grid grid-cols-1 gap-5 sm:grid-cols-2", children: fields.map((field) => {
+            const id = `profile-${field.name}`;
+            return /* @__PURE__ */ jsxs(Field, { children: [
+              /* @__PURE__ */ jsx(FieldLabel, { htmlFor: id, children: field.label }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id,
+                  name: field.name,
+                  type: field.type ?? "text",
+                  value: values[field.name] ?? "",
+                  readOnly: field.readOnly,
+                  required: field.required,
+                  autoComplete: field.autoComplete,
+                  "aria-readonly": field.readOnly || void 0,
+                  onChange: (event) => setValues((current) => ({ ...current, [field.name]: event.target.value }))
+                }
+              )
+            ] }, field.name);
+          }) }) }),
+          error ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive mt-4 text-sm", children: error }) : null,
+          /* @__PURE__ */ jsx(Button, { type: "submit", className: "mt-6", disabled: pending, children: pending ? copy.saving : copy.submit })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ProfileForm
+};
+//# sourceMappingURL=profile-form.mjs.map

package/dist/blocks/e-commerce/account/profile-form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/account/profile-form.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport { Button } from '../../../ui/button'\nimport { Field, FieldGroup, FieldLabel } from '../../../ui/field'\nimport { Input } from '../../../ui/input'\nimport { cn } from '../../../lib/utils'\n\n/** One editable (or read-only) profile field the host declares. */\nexport interface ProfileField {\n  name: string\n  label: string\n  value?: string\n  type?: 'text' | 'tel' | 'email'\n  required?: boolean\n  /** Rendered as read-only; a field the host omits is absent entirely. */\n  readOnly?: boolean\n  autoComplete?: string\n}\n\nexport interface ProfileFormLabels {\n  title: string\n  description: string\n  submit: string\n  saving: string\n}\n\nconst defaultLabels: ProfileFormLabels = {\n  title: 'Datos personales',\n  description: 'Actualiza los datos de tu cuenta.',\n  submit: 'Guardar cambios',\n  saving: 'Guardando…',\n}\n\nexport interface ProfileFormProps {\n  /** Exactly the fields the host declares, in order. */\n  fields: ProfileField[]\n  labels?: Partial<ProfileFormLabels>\n  /** Host-owned mutation state; the form never claims success on its own. */\n  pending?: boolean\n  error?: string | null\n  onSubmit: (values: Record<string, string>) => void\n  className?: string\n}\n\n/**\n * The profile editor. It renders only host-declared fields, keeps the entered\n * values while a save is pending or fails, and reports the values to the host —\n * it never calls a backend and never invents a field (an email change, for\n * example, is absent when the host does not declare it).\n */\nexport function ProfileForm({\n  fields,\n  labels,\n  pending = false,\n  error,\n  onSubmit,\n  className,\n}: ProfileFormProps) {\n  const copy = { ...defaultLabels, ...labels }\n  const signature = fields.map((field) => `${field.name}:${field.value ?? ''}`).join('|')\n  const [values, setValues] = useState<Record<string, string>>(() =>\n    Object.fromEntries(fields.map((field) => [field.name, field.value ?? ''])),\n  )\n\n  // Re-seed when the host supplies new default values (for example after a\n  // successful save). The signature covers field identity and values, so a\n  // pending/error prop change never clears what the shopper typed.\n  useEffect(() => {\n    setValues(Object.fromEntries(fields.map((field) => [field.name, field.value ?? ''])))\n  }, [signature])\n\n  return (\n    <section className={cn('rounded-lg border p-6', className)}>\n      <h2 className=\"text-lg font-semibold\">{copy.title}</h2>\n      <p className=\"text-muted-foreground mt-1 text-sm\">{copy.description}</p>\n\n      <form\n        className=\"mt-6\"\n        noValidate\n        onSubmit={(event) => {\n          event.preventDefault()\n          const submitted = Object.fromEntries(\n            fields.map((field) => [field.name, values[field.name] ?? '']),\n          )\n          onSubmit(submitted)\n        }}\n      >\n        <fieldset disabled={pending} aria-busy={pending} className=\"contents\">\n          <FieldGroup className=\"grid grid-cols-1 gap-5 sm:grid-cols-2\">\n            {fields.map((field) => {\n              const id = `profile-${field.name}`\n              return (\n                <Field key={field.name}>\n                  <FieldLabel htmlFor={id}>{field.label}</FieldLabel>\n                  <Input\n                    id={id}\n                    name={field.name}\n                    type={field.type ?? 'text'}\n                    value={values[field.name] ?? ''}\n                    readOnly={field.readOnly}\n                    required={field.required}\n                    autoComplete={field.autoComplete}\n                    aria-readonly={field.readOnly || undefined}\n                    onChange={(event) =>\n                      setValues((current) => ({ ...current, [field.name]: event.target.value }))\n                    }\n                  />\n                </Field>\n              )\n            })}\n          </FieldGroup>\n        </fieldset>\n\n        {error ? (\n          <p role=\"alert\" className=\"text-destructive mt-4 text-sm\">\n            {error}\n          </p>\n        ) : null}\n\n        <Button type=\"submit\" className=\"mt-6\" disabled={pending}>\n          {pending ? copy.saving : copy.submit}\n        </Button>\n      </form>\n    </section>\n  )\n}\n"],"mappings":";AA0EM,cAmBU,YAnBV;AAxEN,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc;AACvB,SAAS,OAAO,YAAY,kBAAkB;AAC9C,SAAS,aAAa;AACtB,SAAS,UAAU;AAqBnB,MAAM,gBAAmC;AAAA,EACvC,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,QAAQ;AACV;AAmBO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,OAAO,EAAE,GAAG,eAAe,GAAG,OAAO;AAC3C,QAAM,YAAY,OAAO,IAAI,CAAC,UAAU,GAAG,MAAM,IAAI,IAAI,MAAM,SAAS,EAAE,EAAE,EAAE,KAAK,GAAG;AACtF,QAAM,CAAC,QAAQ,SAAS,IAAI;AAAA,IAAiC,MAC3D,OAAO,YAAY,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,MAAM,MAAM,SAAS,EAAE,CAAC,CAAC;AAAA,EAC3E;AAKA,YAAU,MAAM;AACd,cAAU,OAAO,YAAY,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,MAAM,MAAM,SAAS,EAAE,CAAC,CAAC,CAAC;AAAA,EACtF,GAAG,CAAC,SAAS,CAAC;AAEd,SACE,qBAAC,aAAQ,WAAW,GAAG,yBAAyB,SAAS,GACvD;AAAA,wBAAC,QAAG,WAAU,yBAAyB,eAAK,OAAM;AAAA,IAClD,oBAAC,OAAE,WAAU,sCAAsC,eAAK,aAAY;AAAA,IAEpE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,YAAU;AAAA,QACV,UAAU,CAAC,UAAU;AACnB,gBAAM,eAAe;AACrB,gBAAM,YAAY,OAAO;AAAA,YACvB,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,MAAM,OAAO,MAAM,IAAI,KAAK,EAAE,CAAC;AAAA,UAC9D;AACA,mBAAS,SAAS;AAAA,QACpB;AAAA,QAEA;AAAA,8BAAC,cAAS,UAAU,SAAS,aAAW,SAAS,WAAU,YACzD,8BAAC,cAAW,WAAU,yCACnB,iBAAO,IAAI,CAAC,UAAU;AACrB,kBAAM,KAAK,WAAW,MAAM,IAAI;AAChC,mBACE,qBAAC,SACC;AAAA,kCAAC,cAAW,SAAS,IAAK,gBAAM,OAAM;AAAA,cACtC;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA,MAAM,MAAM;AAAA,kBACZ,MAAM,MAAM,QAAQ;AAAA,kBACpB,OAAO,OAAO,MAAM,IAAI,KAAK;AAAA,kBAC7B,UAAU,MAAM;AAAA,kBAChB,UAAU,MAAM;AAAA,kBAChB,cAAc,MAAM;AAAA,kBACpB,iBAAe,MAAM,YAAY;AAAA,kBACjC,UAAU,CAAC,UACT,UAAU,CAAC,aAAa,EAAE,GAAG,SAAS,CAAC,MAAM,IAAI,GAAG,MAAM,OAAO,MAAM,EAAE;AAAA;AAAA,cAE7E;AAAA,iBAdU,MAAM,IAelB;AAAA,UAEJ,CAAC,GACH,GACF;AAAA,UAEC,QACC,oBAAC,OAAE,MAAK,SAAQ,WAAU,iCACvB,iBACH,IACE;AAAA,UAEJ,oBAAC,UAAO,MAAK,UAAS,WAAU,QAAO,UAAU,SAC9C,oBAAU,KAAK,SAAS,KAAK,QAChC;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/index.d.ts

@@ -80,6 +80,12 @@ export { OrderHistory } from './blocks/e-commerce/order-history/order-history';
 export { OrderLine } from './blocks/e-commerce/order-history/order-line';
 export type { OrderHistoryLabels, OrderHistoryOrder, OrderHistoryPresentation, OrderHistoryProps, OrderHistoryStatus, OrderHistoryStatusTone, } from './blocks/e-commerce/order-history/order-history';
 export type { OrderLineData, OrderLineProps } from './blocks/e-commerce/order-history/order-line';
+export { AccountFrame } from './blocks/e-commerce/account/account-frame';
+export type { AccountFrameLabels, AccountFramePresentation, AccountFrameProps, AccountModule, } from './blocks/e-commerce/account/account-frame';
+export { ProfileForm } from './blocks/e-commerce/account/profile-form';
+export type { ProfileField, ProfileFormLabels, ProfileFormProps, } from './blocks/e-commerce/account/profile-form';
+export { AddressBook, AddressForm } from './blocks/e-commerce/account/address-book';
+export type { AccountAddress, AddressBookLabels, AddressBookProps, AddressFormField, AddressFormLabels, AddressFormProps, } from './blocks/e-commerce/account/address-book';
 export { default as StorefrontHero } from './blocks/e-commerce/storefront-hero/storefront-hero';
 export type { FeaturedProduct, HeroImage, HeroDepartment, HeroFeaturedDeal, HeroStoreLocator, HeroDeal, HeroCategory, StorefrontHeroPresentation, StorefrontHeroProps, } from './blocks/e-commerce/storefront-hero/storefront-hero';
 export { default as AppShell1 } from './blocks/application/app-shells/app-shell-1';
@@ -96,8 +102,11 @@ export { PRODUCT_IMAGE_FALLBACK } from './lib/contracts';
 export { isCompleteFiniteDecimal, isAvailableMoney, formatMoney, } from './lib/money';
 export { resolveAbsoluteQuantity } from './lib/cart';
 export { moneySchema, cartTotalsSchema, productDetailProductSchema, productDetailVariantSchema, productOverviewPropsSchema, storefrontHeroPropsSchema, storefrontHeroProductSchema, buttonPropsSchema, storeContainer1PropsSchema, productCardPropsSchema, productGridPropsSchema, productPresentationSchema, productShowcase1PropsSchema, shoppingCartPropsSchema, shoppingCartItemSchema, shoppingCartSuggestionSchema, navbarPresentationSchema, navbarItemSchema, navbarGroupSchema, navbarLinkSchema, navbarFeaturedSchema, navbarPropsSchema, storefrontNavbarPropsSchema, paymentMethodSchema, checkoutPropsSchema, cardProductSchema, cartItemSchema, promotionSchema, storeCategorySchema, utilityLinkSchema, navCartItemSchema, storeUserSchema, accountMenuItemSchema, featurePropsSchema, featureCardsSpecSchema, featureSplitSpecSchema, productCategoryItemSchema, productCategoryPropsSchema, orderHistoryPresentationSchema, orderHistoryStatusSchema, orderLineDataSchema, orderHistoryOrderSchema, orderHistoryPropsSchema, orderLinePropsSchema, } from './lib/contracts';
-export type { ProductDetailProductSpec, ProductDetailVariantSpec, StorefrontHeroProduct, StorefrontHeroSpecProps, CartTotals, ButtonSpecProps, StoreContainer1SpecProps, ProductCardSpecProps, ProductGridSpecProps, ProductPresentation, ProductShowcase1SpecProps, ShoppingCartItem, ShoppingCartSuggestion, ShoppingCartSpecProps, NavbarPresentationSpec, NavbarItemSpec, NavbarGroupSpec, NavbarLinkSpec, NavbarFeaturedSpec, NavbarSpecProps, StorefrontNavbarSpecProps, CardProduct, CartItem, Promotion, StoreCategory, UtilityLink, NavCartItem, StoreUser, AccountMenuItem, FeatureSpecProps, FeatureCardsSpecProps, FeatureSplitSpecProps, ProductCategoryItem, ProductCategorySpecProps, CategoryCardSpecProps, CategoryGridSpecProps, OrderHistoryPresentationSpec, OrderHistoryStatusSpec, OrderLineDataSpec, OrderHistoryOrderSpec, OrderHistorySpecProps, OrderLineSpecProps, } from './lib/contracts';
+export type { ProductDetailProductSpec, ProductDetailVariantSpec, StorefrontHeroProduct, StorefrontHeroSpecProps, CartTotals, ButtonSpecProps, StoreContainer1SpecProps, ProductCardSpecProps, ProductGridSpecProps, ProductPresentation, ProductShowcase1SpecProps, ShoppingCartItem, ShoppingCartSuggestion, ShoppingCartSpecProps, NavbarPresentationSpec, NavbarItemSpec, NavbarGroupSpec, NavbarLinkSpec, NavbarFeaturedSpec, NavbarSpecProps, StorefrontNavbarSpecProps, CardProduct, CartItem, Promotion, StoreCategory, UtilityLink, NavCartItem, StoreUser, AccountMenuItem, FeatureSpecProps, FeatureCardsSpecProps, FeatureSplitSpecProps, ProductCategoryItem, ProductCategorySpecProps, CategoryCardSpecProps, CategoryGridSpecProps, OrderHistoryPresentationSpec, OrderHistoryStatusSpec, OrderLineDataSpec, OrderHistoryOrderSpec, OrderHistorySpecProps, OrderLineSpecProps, AccountFramePresentationSpec, AccountFrameSpecProps, AccountModuleSpec, ProfileFieldSpec, ProfileFormSpecProps, AccountAddressSpec, AddressBookSpecProps, AddressFormFieldSpec, AddressFormSpecProps, } from './lib/contracts';
 export { default as MarketplaceProductCard } from './blocks/designs/marketplace-product-card/index';
 export type { MarketplaceProductCardProps } from './blocks/designs/marketplace-product-card/index';
 export type { MarketplaceProductCardData } from './lib/contracts/marketplace-product-card';
+export { default as CheckoutCommerceV1 } from './blocks/designs/checkout-commerce-v1/index';
+export type { CheckoutCommerceV1Props } from './blocks/designs/checkout-commerce-v1/index';
+export type { CheckoutCommerceV1Item, CheckoutCommerceV1Data } from './lib/contracts/checkout-commerce-v1';
 //# sourceMappingURL=index.d.ts.map