@reblu/site-blocks 0.13.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @reblu/site-blocks
 
+## 0.15.0
+
+### Minor Changes
+
+- cc4e14e: REB-980: add `DataRequestForm` to `@reblu/site-blocks/client` — the drop-in public GDPR rights form (request type, name, email, optional message, consent checkbox). Requires a reCAPTCHA token from `getCaptchaToken` and never submits without one or without consent; shows the 72h response deadline in a `role="status"` region on success. Rejections are mapped by status to fixed, overridable copy (`400` validation, `422` captcha, `429` rate limit, otherwise generic) so no server text reaches the visitor. Default transport POSTs JSON to the SITE's `/api/data-requests` Route Handler (`endpoint`, or a custom `submit`). Also exports `DATA_REQUEST_TYPES` and `DEFAULT_DATA_REQUEST_FORM_LABELS`. README: page + Route Handler snippet.
+- 2273e3c: Add `TrustBadges` — the drop-in for the tenant's trust badges from `client.trustBadges.list()` (REB-996). Server Component: groups badges by type under overridable headings (`DEFAULT_TRUST_BADGE_HEADINGS`, `SUBVENTION` → «Financiación»; `null` hides one), `types` filters and orders the groups, logos are images with `alt` = badge name, an optional http(s) link opens in a new window with `rel="noopener noreferrer"` and a visually hidden hint, and nothing is rendered when there are no badges. README: footer snippet.
+
+### Patch Changes
+
+- f48712a: Consumer classNames keep custom theme tokens (REB-997). `CourseDescription`'s `headingClassName` / `contentClassName` and `ProductTrustItems`' `itemClassName` now replace their slot's stylistic defaults instead of being merged over them, and the consumer's `text-*` classes on `CourseDescription`, `ProductTrustItems`, `MarkdownRenderer` and `SafeHtml` reach the DOM verbatim — tailwind-merge read a custom font-size token such as `text-h2` as a colour and dropped it. Rendering without those props is unchanged.
+- Updated dependencies [cc4e14e]
+  - @reblu/site-contracts@1.16.0
+
+## 0.14.0
+
+### Minor Changes
+
+- fff0bf5: REB-981: `CartAdjustmentsNotice` — presentational notice for what cart validation changed (removed lines, clamped quantities, changed prices), fed by `@reblu/site-next/cart`'s `useCartValidation()`. `CartLineList` gains an optional `lineMessage` prop to render a message under a line (e.g. its validation error). README replaces the `errors[0].message` guidance.
+- b7667d4: Add `CourseDescription` — the drop-in for the rich-text course `description` from `client.academy.bySlug()` (REB-879). Server Component: sanitised Markdown (headings, GFM tables, images) through the `MarkdownRenderer` pipeline; renders nothing, not even its heading, when the description is null, blank or emptied by the sanitiser; an optional `heading` makes it a labelled `<section>` with the description's own headings demoted under it. README: snippet for the course page.
+- b7667d4: Add `markdownToPlainText(markdown, { maxLength })` (root and `./seo` entries): rich-text Markdown → the plain text a reader sees, for meta/OG descriptions and excerpts. It runs the same sanitised pipeline as `MarkdownRenderer`, drops images, and cuts at a word boundary with `…`. README: how to render a rich-text course description and build its meta description (REB-879).
+
 ## 0.13.0
 
 ### Minor Changes

package/README.md

@@ -8,23 +8,35 @@ their own. Every color, radius and font comes from CSS design tokens (OKLCH)
 that each tenant injects through its `site-theme.css`. The same package renders
 a different-looking site for every tenant, with zero forks.
 
+**Required theme tokens.** Besides the usual shadcn tokens, the consuming
+theme must define `--destructive-foreground` (text colour on `--destructive`,
+≥ 4.5:1 contrast) and map it in `@theme inline` as
+`--color-destructive-foreground: var(--destructive-foreground);`. Tailwind v4
+emits no CSS for `text-destructive-foreground` without it, so error states
+(e.g. `AddToCartButton`'s `error` status) would render with inherited text
+colour on the red background. See `docs/theming/theming.md`.
+
 ## What's inside
 
 | Export                                                                                                        | Entry      | Purpose                                                                                                                      |
 | ------------------------------------------------------------------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------- |
 | `readingTime`, `formatPrice`, `buildShareUrls`, `markdownToSafeHtml`                                          | `.`        | Pure, framework-agnostic helpers (RSC-safe).                                                                                 |
+| `markdownToPlainText`                                                                                         | `.`        | Markdown → plain text for meta/OG descriptions (also on `./seo`). Same sanitiser as `MarkdownRenderer`.                      |
 | `sanitizeHtml`                                                                                                | `.`        | Sanitises an HTML string before `dangerouslySetInnerHTML` — the **HTML boundary**. See "Security boundaries" below.          |
 | `MarkdownRenderer`                                                                                            | `.`        | Canonical Blog renderer: `marked` → **hast-util-sanitize** (XSS) → component map, with a YouTube-domain allowlist. RSC-safe. |
+| `CourseDescription`                                                                                           | `.`        | Drop-in for the rich-text course `description` (`client.academy.bySlug()`). Server Component. See "Rich-text descriptions".  |
 | `Treatment`, `ParentPage`, `ProfileCard`, `ProductCard`                                                       | `.`        | Presentational organisms over the SITE API contracts. RSC-safe. `Specialty`: deprecated alias, see below.                    |
 | `ShopFilters`                                                                                                 | `.`        | Plug-and-play shop filter chrome over `GET /api/site/shop/facets`. RSC-safe. See "Shop filters" below.                       |
-| `CartLineList`, `CartSummary`, `AddedToCartToast`, `CheckoutLoginPrompt`, `CheckoutForm`, `OrderConfirmation` | `.`        | Cart & checkout organisms. RSC-safe by construction. See "Cart & checkout" below.                                            |
+| `CartLineList`, `CartSummary`, `CartAdjustmentsNotice`, `AddedToCartToast`, `CheckoutLoginPrompt`, `CheckoutForm`, `OrderConfirmation` | `.`        | Cart & checkout organisms. RSC-safe by construction. See "Cart & checkout" below.                                            |
 | `PageBlocks`, `FaqAccordion`                                                                                  | `.`        | Registry-block renderer (`PageDetail.blocks`) and native `<details>` FAQ. Server Components. See "Page blocks" below.        |
 | `ProductTrustItems`, `DEFAULT_TRUST_ICONS`                                                                    | `.`        | Store-wide trust messages from `ShopConfig.productTrustItems`. Server Component. See "Product trust items" below.            |
+| `TrustBadges`, `DEFAULT_TRUST_BADGE_HEADINGS`                                                                 | `.`        | The tenant's trust badges from `client.trustBadges.list()`, grouped by type. Server Component. See "Trust badges" below.     |
 | `buildFaqPageJsonLd`, `collectFaqItems`                                                                       | `./seo`    | schema.org `FAQPage` structured data. Directive-free (also on `.`). See "Page blocks" below.                                 |
 | `useCollection`                                                                                               | `./client` | Headless filterable/sortable/paginated collection hook (facets, category, tag, search). Serves both page and blog indexes.   |
 | `Collection`                                                                                                  | `./client` | Token-driven presentational grid over `useCollection`.                                                                       |
 | `ShareButtons`                                                                                                | `./client` | Social share (X / LinkedIn / WhatsApp / copy).                                                                               |
 | `AddToCartButton`, `CartIcon`                                                                                 | `./client` | Add-to-cart feedback (REB-837) — **moved here from `.`**, see below.                                                         |
+| `DataRequestForm`                                                                                             | `./client` | Drop-in public GDPR rights form over `POST /api/site/data-requests` (REB-980). See "GDPR rights form" below.                |
 
 ## Boundary
 
@@ -32,6 +44,35 @@ a different-looking site for every tenant, with zero forks.
 - **`@reblu/site-blocks`** = organisms + headless data hooks. Higher churn — its
   own package so a breaking change in an organism does not bump the stable atoms.
 
+## Styling a drop-in — the className rule (REB-997)
+
+`cn` (tailwind-merge) only knows Tailwind's default scale. A SITE's own theme
+token such as `text-h2` (a font size) is read as a text **colour**, so
+`twMerge('text-xl font-semibold', 'text-h2 text-ink')` keeps `text-xl` and
+drops `text-h2`. To keep custom tokens working, the typography slot props
+follow one rule:
+
+- **A slot className replaces that slot's stylistic defaults.** Passing
+  `CourseDescription`'s `headingClassName` drops its `text-xl font-semibold`;
+  `contentClassName` drops `text-muted-foreground`; `ProductTrustItems`'
+  `itemClassName` drops `text-sm text-muted-foreground`. Pass the full
+  typography you want for that slot.
+- **Structural classes stay.** Layout an element needs (the trust row's
+  `flex items-center gap-3`, the `space-y-*` of a section or list, the
+  `max-w-none` of `MarkdownRenderer` / `SafeHtml`) is kept, and your layout
+  classes still override it through `cn` (`max-w-prose` beats `max-w-none`).
+- **Your `text-*` classes reach the DOM verbatim** on those elements
+  (`CourseDescription`, `ProductTrustItems`, `MarkdownRenderer`, `SafeHtml`):
+  they never go through tailwind-merge, so `text-h2 text-ink` renders as both.
+- **Without the prop, nothing changes** — the defaults render exactly as before.
+
+The root `className` of interactive or boxed drop-ins (`AddToCartButton`,
+`CartIcon`, `CartAdjustmentsNotice`, cards, toasts, the login prompt) is still
+merged with `cn` over their defaults: those defaults pair a text colour with
+its background, and a root className is mostly used for spacing. Put a custom
+font-size token there on an element of your own (or wrap the drop-in) rather
+than on the root className.
+
 ## Authoring notes
 
 What `MarkdownRenderer` does with tenant-authored Markdown and HTML. These are
@@ -199,7 +240,8 @@ for the wiring steps and a full example app).
 | `AddToCartButton`     | `./client` | `onAddToCart?`, `disabled?`, `outOfStock?`, `pending?`, `error?`, `item?`, `successDurationMs?`, `onAdded?`, `onError?` | No — carries a built-in confirmed/error timer (`useState`/`useEffect`), see below |
 | `CartIcon`            | `./client` | `itemCount`, `href`, `hydrated?`, `bumpOnAdd?`                                                                          | No — the bump animation needs state, see below                                    |
 | `AddedToCartToast`    | `.`        | `productName`, `cartHref`, `status?`, `quantity?`, `imageUrl?`                                                          | Yes                                                                               |
-| `CartLineList`        | `.`        | `items`, `onQuantityChange?`, `onRemove?`, `liveMessage?`, `notice?`                                                    | Yes                                                                               |
+| `CartLineList`        | `.`        | `items`, `onQuantityChange?`, `onRemove?`, `liveMessage?`, `notice?`, `lineMessage?`                                    | Yes                                                                               |
+| `CartAdjustmentsNotice` | `.`      | `removed?`, `quantityChanges?`, `priceChanges?`, `labels?`                                                              | Yes                                                                               |
 | `CartSummary`         | `.`        | `subtotal`, `discount?`, `shipping?`, `shippingEnabled?`, `total`, `notice?`                                            | Yes                                                                               |
 | `CheckoutLoginPrompt` | `.`        | `open`, `email`, `onEmailChange`, `onClose`, `onSubmitEmail`, `onContinueAsGuest`                                       | Yes (renders `null` when `open` is false)                                         |
 | `CheckoutForm`        | `.`        | `contact`, `onContactChange`, `discountCode`, `onDiscountCodeChange`, `onApplyDiscount`, `onRemoveDiscount`, `onSubmit` | Yes                                                                               |
@@ -352,12 +394,36 @@ For malformed bodies (which parse as `undefined`), pass a generic body such as
 `error.body ?? { error: 'Checkout failed' }` to show the fallback banner.
 An external SITE (including Dermamedicin) must adopt this wiring separately.
 
-`validate-cart`'s rejection path (out-of-stock, price-changed, empty cart)
-surfaces through `CheckoutForm`'s own error-display conventions: pass the
-first `ShopCartValidationError.message` from `client.shop.validateCart(...)`
-as a toast/banner in your page (the component itself has no cart-wide error
-slot — it only owns contact/discount field-level errors via `contactErrors`/
-`discountError`).
+Do not surface validate-cart's rejection as the first
+`ShopCartValidationError.message`: it does not say which line failed, and a
+deleted product only comes back as «Producto desconocido». Use
+`@reblu/site-next/cart`'s `useCartValidation()` (REB-981) on the cart and
+checkout pages: it removes unavailable lines, clamps quantities and refreshes
+prices in the store, and its result feeds `CartAdjustmentsNotice` and
+`CartLineList`'s `lineMessage` — see "Cart adjustments" below and that
+package's README.
+
+### Cart adjustments — `CartAdjustmentsNotice` (REB-981)
+
+Presentational: tells the visitor what cart validation changed. Every prop is
+optional and renders nothing when empty, so it can stay mounted.
+
+```tsx
+<CartAdjustmentsNotice
+  removed={validation.removed}           // [{ name, variantName? }]
+  quantityChanges={validation.quantityChanges} // [{ name, variantName?, to }]
+  priceChanges={validation.priceChanges}       // [{ name, variantName?, from, to }] cents
+/>
+```
+
+Default copy: «Hemos quitado del carrito: X, ya no está disponible.» (plural
+«…ya no están disponibles.»), «Hemos ajustado la cantidad de X a N por el
+stock disponible.», «El precio de X ha cambiado: antes A, ahora B.». Override
+any of them with `labels={{ removed, quantityChanged, priceChanged }}` (each a
+function). `currencyCode`/`locale` format the prices.
+
+`CartLineList`'s `lineMessage={(item) => …}` renders a message under a line,
+e.g. `validation.getLineError(item.productId, item.variantId)?.message`.
 
 ### `OrderConfirmation` states (REB-837)
 
@@ -511,7 +577,9 @@ export default async function ProductPage() {
 A semantic `<ul>` (or `<ol>` via `as='ol'`) of `<li>` rows; each icon is
 `aria-hidden` because the text carries the meaning. Colours come from theme
 tokens only (`text-muted-foreground`, `text-foreground/60`). `className` styles
-the list, `itemClassName` each row.
+the list, `itemClassName` each row — it **replaces** the row's default
+`text-sm text-muted-foreground` and keeps its `flex items-center gap-3` layout
+(REB-997).
 
 ### Overriding icons
 
@@ -531,6 +599,45 @@ import { Truck } from 'my-icon-set'
 `icons` cannot add a new icon key: an item whose `icon` this version does not
 know is still skipped.
 
+## Trust badges
+
+`TrustBadges` renders the tenant's trust badges — partners, insurers, funding,
+certifications, awards — managed in nexus (`/trust-badges`) and served by
+`client.trustBadges.list()` (REB-996). The API only returns badges that are
+switched on AND inside their optional validity window («Visible desde» /
+«Visible hasta», whole days in the tenant's time zone), so toggling or expiring
+a badge in nexus removes it from the SITE on the next revalidation, with no
+deploy and no SITE change.
+
+```tsx
+import { TrustBadges } from '@reblu/site-blocks'
+
+export async function Footer() {
+  const { data: badges } = await client.trustBadges.list().catch(() => ({ data: [] }))
+  return (
+    <footer>
+      {/* … */}
+      <TrustBadges badges={badges} headingLevel={2} />
+    </footer>
+  )
+}
+```
+
+- Groups by type, each under a heading from `DEFAULT_TRUST_BADGE_HEADINGS`
+  (`SUBVENTION` → «Financiación», `CERTIFICATION` → «Certificaciones»,
+  `AWARD` → «Premios», `PARTNER` → «Colaboradores», `INSURANCE` →
+  «Aseguradoras»). Override any with `headings`; `null` hides one.
+- `types` picks which groups render and in what order, e.g. only the funding
+  logos: `<TrustBadges badges={badges} types={['SUBVENTION']} />`. To fetch
+  only one type, `client.trustBadges.list({ type: 'SUBVENTION' })`.
+- A logo is an `<img>` with `alt` = badge name; a badge without a logo shows
+  its name as text. A badge `url` (http/https only) opens in a new window with
+  `rel="noopener noreferrer"` and a visually hidden «(se abre en una ventana
+  nueva)» — override it with `newWindowLabel`.
+- `null`, `undefined` or an empty list render nothing — never an empty heading.
+- Styling hooks: `className`, `groupClassName`, `headingClassName`,
+  `listClassName`, `logoClassName` (e.g. `brightness-0 invert` on a dark footer).
+
 ## `ParentPage` (formerly `Specialty`)
 
 `ParentPage` renders a page that groups other pages: the hero and content
@@ -699,6 +806,120 @@ called on the server (REB-846). `test/seo-entry.test.ts` guards this on the
 emitted `dist`. The caller serialises; `@reblu/site-next`'s `<JsonLd>` escapes
 the `</script>` boundary.
 
+### Rich-text descriptions on a page (`CourseDescription` + `markdownToPlainText`)
+
+Some API fields are rich-text Markdown written in nexus with the shared editor
+(headings, GFM tables, images) — for example a course `description` from
+`client.academy.bySlug()` (REB-879). Never print them as plain text and never
+pass them to `dangerouslySetInnerHTML`. On the course page, drop in
+`CourseDescription`; for the meta description use `markdownToPlainText`, never a
+slice of the raw Markdown (that leaks `##`, table pipes and `![…](…)` into search
+snippets):
+
+```tsx
+import { CourseDescription } from '@reblu/site-blocks'
+import { markdownToPlainText } from '@reblu/site-blocks/seo'
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const course = await client.academy.bySlug((await params).slug)
+  const description =
+    course.shortDescription || markdownToPlainText(course.description, { maxLength: 160 })
+  return { description: description || undefined }
+}
+
+export default async function CoursePage({ params }: Props) {
+  const course = await client.academy.bySlug((await params).slug)
+  return (
+    <article>
+      <h1>{course.title}</h1>
+      {/* The heading is your own copy, in your SITE's language. */}
+      <CourseDescription description={course.description} heading='Sobre el curso' />
+    </article>
+  )
+}
+```
+
+`CourseDescription` (Server Component, RSC-safe):
+
+- runs the Markdown through the same sanitised pipeline as `MarkdownRenderer`
+  (`<script>`, event handlers, `javascript:` links and non-YouTube iframes are
+  dropped);
+- renders **nothing**, not even the heading, for `null`, blank, or content the
+  sanitiser leaves empty, so a page never shows an empty "About the course";
+- with `heading`, renders a `<section aria-labelledby>` and demotes the
+  description's own headings under it (`headingLevel`, default `2`; override with
+  `headingOffset`; `headingId` when the page renders it twice);
+- styling hooks: `className`, `headingClassName`, `contentClassName`, and
+  `data-slot='course-description'` on the outer element. `headingClassName`
+  and `contentClassName` **replace** the default `text-xl font-semibold` /
+  `text-muted-foreground` (see [the className rule](#styling-a-drop-in--the-classname-rule-reb-997)).
+
+For any other rich-text Markdown field, `MarkdownRenderer` is the generic
+renderer (`headingOffset` demotes its headings under yours).
+`markdownToPlainText` drops images and anything the sanitiser strips, and cuts
+at a word boundary with `…` within `maxLength`.
+
+## GDPR rights form — `DataRequestForm` (REB-980)
+
+Drop-in form for a SITE's public rights page (e.g. `/derechos-rgpd`): request
+type, name, email, optional message and a consent checkbox. A submission lands
+in the tenant's nexus queue (`/settings/data-requests`) with source
+`PUBLIC_FORM` and its 72h clock running; the form then shows the response
+deadline (`slaDueAt`) in a `role="status"` region.
+
+```tsx
+'use client'
+import { useCallback, useState } from 'react'
+import { DataRequestForm } from '@reblu/site-blocks/client'
+import { RECAPTCHA_DATA_REQUEST_ACTION } from '@reblu/site-next/recaptcha'
+import {
+  DeferredRecaptchaProvider,
+  useDeferredRecaptchaToken,
+} from '@reblu/site-next/recaptcha-provider'
+
+function Form({ onArm }: { onArm: () => void }) {
+  const getCaptchaToken = useDeferredRecaptchaToken(RECAPTCHA_DATA_REQUEST_ACTION, { onArm })
+  return <DataRequestForm getCaptchaToken={getCaptchaToken} onInteract={onArm} />
+}
+
+export function DataRequestSection({ siteKey }: { siteKey: string }) {
+  const [armed, setArmed] = useState(false)
+  const arm = useCallback(() => setArmed(true), [])
+  return (
+    <DeferredRecaptchaProvider siteKey={siteKey} armed={armed}>
+      <Form onArm={arm} />
+    </DeferredRecaptchaProvider>
+  )
+}
+```
+
+```ts
+// app/api/data-requests/route.ts — server side, the API key never reaches the browser
+import { createRebluClient } from '@reblu/site-client'
+
+export async function POST(request: Request) {
+  const client = createRebluClient({ baseUrl: process.env.REBLU_API_BASE_URL!, apiKey: process.env.REBLU_API_KEY! })
+  try {
+    return Response.json({ data: await client.dataRequests.submit(await request.json()) })
+  } catch (e) {
+    return Response.json({ error: 'rejected' }, { status: (e as { status?: number }).status ?? 502 })
+  }
+}
+```
+
+- **reCAPTCHA is required.** base-api rejects a request without a token, so the
+  form never submits when `getCaptchaToken` resolves `undefined`.
+- **No server text reaches the visitor.** Rejections are mapped by status to
+  fixed copy: `400` → `validationError`, `422` → `captchaError`, `429` →
+  `rateLimitError`, anything else (or no answer) → `genericError`.
+- **Transport.** By default the form POSTs JSON to `endpoint`
+  (`/api/data-requests`) and reads the `{ data }` envelope. Pass `submit` to
+  use your own transport; it returns `{ ok: true, data }` or `{ ok: false, status }`.
+- **Copy** defaults to Spanish; override any string with `labels` (including
+  `requestTypes` per right and `success(deadline)`), the date locale with
+  `locale`, and the offered rights with `requestTypes`.
+- `onSubmitted(ack)` fires after success — e.g. for analytics.
+
 ## Security boundaries
 
 Two sinks, two different helpers, in two different packages — do not reach for

package/dist/client.cjs

@@ -34,6 +34,9 @@ __export(client_exports, {
   AddToCartButton: () => AddToCartButton,
   CartIcon: () => CartIcon,
   Collection: () => Collection,
+  DATA_REQUEST_TYPES: () => DATA_REQUEST_TYPES,
+  DEFAULT_DATA_REQUEST_FORM_LABELS: () => DEFAULT_DATA_REQUEST_FORM_LABELS,
+  DataRequestForm: () => DataRequestForm,
   ShareButtons: () => ShareButtons,
   useCollection: () => useCollection
 });
@@ -522,11 +525,267 @@ function CartIcon({ itemCount, href, hydrated, bumpOnAdd, labels, className }) {
     }
   );
 }
+
+// src/components/data-request-form.tsx
+var import_react4 = require("react");
+var import_utils5 = require("@reblu/site-ui/utils");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var DATA_REQUEST_TYPES = [
+  "ACCESS",
+  "RECTIFICATION",
+  "ERASURE",
+  "OBJECTION",
+  "PORTABILITY",
+  "RESTRICTION",
+  "AUTOMATED_DECISION",
+  "INFORMATION"
+];
+var DEFAULT_DATA_REQUEST_FORM_LABELS = {
+  requestTypeLabel: "Derecho que quieres ejercer",
+  requestTypePlaceholder: "Selecciona una opci\xF3n",
+  requestTypes: {
+    ACCESS: "Acceso",
+    RECTIFICATION: "Rectificaci\xF3n",
+    ERASURE: "Supresi\xF3n",
+    OBJECTION: "Oposici\xF3n",
+    PORTABILITY: "Portabilidad",
+    RESTRICTION: "Limitaci\xF3n del tratamiento",
+    AUTOMATED_DECISION: "No ser objeto de decisiones automatizadas",
+    INFORMATION: "Informaci\xF3n"
+  },
+  nameLabel: "Nombre y apellidos",
+  emailLabel: "Email",
+  detailsLabel: "Mensaje (opcional)",
+  detailsPlaceholder: "Describe tu solicitud",
+  consent: "Acepto que mis datos se traten para gestionar esta solicitud.",
+  submit: "Enviar solicitud",
+  submitting: "Enviando\u2026",
+  requestTypeRequired: "Elige el derecho que quieres ejercer.",
+  nameRequired: "Indica tu nombre.",
+  emailInvalid: "Introduce un email v\xE1lido.",
+  consentRequired: "Debes aceptar el tratamiento de tus datos para gestionar la solicitud.",
+  success: (deadline) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    "Hemos recibido tu solicitud. Te responderemos como m\xE1ximo el ",
+    deadline,
+    "."
+  ] }),
+  captchaError: "No hemos podido verificar que no eres un robot. Recarga la p\xE1gina e int\xE9ntalo de nuevo.",
+  validationError: "Revisa los datos del formulario e int\xE9ntalo de nuevo.",
+  rateLimitError: "Has enviado demasiadas solicitudes. Espera unos minutos e int\xE9ntalo de nuevo.",
+  genericError: "No hemos podido enviar tu solicitud. Int\xE9ntalo de nuevo m\xE1s tarde."
+};
+var EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+async function postToRoute(endpoint, input) {
+  try {
+    const res = await fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(input)
+    });
+    if (!res.ok) return { ok: false, status: res.status };
+    const json = await res.json();
+    return json.data ? { ok: true, data: json.data } : { ok: false, status: res.status };
+  } catch {
+    return { ok: false, status: 0 };
+  }
+}
+function rejectionMessage(status, t) {
+  if (status === 400) return t.validationError;
+  if (status === 422) return t.captchaError;
+  if (status === 429) return t.rateLimitError;
+  return t.genericError;
+}
+var FIELD_CLASS = "w-full rounded-lg border bg-background px-3 py-2 text-sm transition focus:outline-none focus:ring-2 focus:ring-primary/20";
+function DataRequestForm({
+  getCaptchaToken,
+  submit,
+  endpoint = "/api/data-requests",
+  onInteract,
+  onSubmitted,
+  requestTypes = DATA_REQUEST_TYPES,
+  labels,
+  locale = "es-ES",
+  className
+}) {
+  const t = {
+    ...DEFAULT_DATA_REQUEST_FORM_LABELS,
+    ...labels,
+    requestTypes: { ...DEFAULT_DATA_REQUEST_FORM_LABELS.requestTypes, ...labels?.requestTypes }
+  };
+  const id = (0, import_react4.useId)();
+  const [requestType, setRequestType] = (0, import_react4.useState)("");
+  const [name, setName] = (0, import_react4.useState)("");
+  const [email, setEmail] = (0, import_react4.useState)("");
+  const [details, setDetails] = (0, import_react4.useState)("");
+  const [consent, setConsent] = (0, import_react4.useState)(false);
+  const [errors, setErrors] = (0, import_react4.useState)({});
+  const [formError, setFormError] = (0, import_react4.useState)(null);
+  const [submitting, setSubmitting] = (0, import_react4.useState)(false);
+  const [ack, setAck] = (0, import_react4.useState)(null);
+  async function handleSubmit(event) {
+    event.preventDefault();
+    if (submitting) return;
+    setFormError(null);
+    const next = {};
+    if (!requestType) next.requestType = t.requestTypeRequired;
+    if (!name.trim()) next.name = t.nameRequired;
+    if (!EMAIL_PATTERN.test(email.trim())) next.email = t.emailInvalid;
+    if (!consent) next.consent = t.consentRequired;
+    setErrors(next);
+    if (Object.keys(next).length > 0 || !requestType) return;
+    setSubmitting(true);
+    try {
+      const captcha = await getCaptchaToken().catch(() => void 0);
+      if (!captcha) {
+        setFormError(t.captchaError);
+        return;
+      }
+      const input = {
+        requestType,
+        name: name.trim(),
+        email: email.trim(),
+        ...details.trim() ? { details: details.trim() } : {},
+        captcha
+      };
+      const result = await (submit ?? ((body) => postToRoute(endpoint, body)))(input).catch(
+        () => ({ ok: false, status: 0 })
+      );
+      if (!result.ok) {
+        setFormError(rejectionMessage(result.status, t));
+        return;
+      }
+      setAck(result.data);
+      onSubmitted?.(result.data);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  if (ack) {
+    const deadline = new Intl.DateTimeFormat(locale, {
+      dateStyle: "long",
+      timeStyle: "short"
+    }).format(new Date(ack.slaDueAt));
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { role: "status", "data-slot": "data-request-form-success", className: (0, import_utils5.cn)("rounded-lg border border-border p-6 text-sm", className), children: t.success(deadline) });
+  }
+  const errorId = (field) => errors[field] ? `${id}-${field}-error` : void 0;
+  const fieldError = (field) => errors[field] ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { id: `${id}-${field}-error`, className: "text-xs text-destructive", children: errors[field] }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "form",
+    {
+      noValidate: true,
+      onSubmit: handleSubmit,
+      onFocusCapture: onInteract,
+      onPointerDown: onInteract,
+      "data-slot": "data-request-form",
+      className: (0, import_utils5.cn)("space-y-4", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `${id}-type`, className: "text-sm font-medium", children: t.requestTypeLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "select",
+            {
+              id: `${id}-type`,
+              value: requestType,
+              onChange: (e) => setRequestType(e.target.value),
+              "aria-invalid": errors.requestType ? true : void 0,
+              "aria-describedby": errorId("requestType"),
+              className: (0, import_utils5.cn)(FIELD_CLASS, errors.requestType ? "border-destructive" : "border-border"),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: t.requestTypePlaceholder }),
+                requestTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: type, children: t.requestTypes[type] }, type))
+              ]
+            }
+          ),
+          fieldError("requestType")
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `${id}-name`, className: "text-sm font-medium", children: t.nameLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              id: `${id}-name`,
+              type: "text",
+              autoComplete: "name",
+              value: name,
+              onChange: (e) => setName(e.target.value),
+              "aria-invalid": errors.name ? true : void 0,
+              "aria-describedby": errorId("name"),
+              className: (0, import_utils5.cn)(FIELD_CLASS, errors.name ? "border-destructive" : "border-border")
+            }
+          ),
+          fieldError("name")
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `${id}-email`, className: "text-sm font-medium", children: t.emailLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              id: `${id}-email`,
+              type: "email",
+              autoComplete: "email",
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              "aria-invalid": errors.email ? true : void 0,
+              "aria-describedby": errorId("email"),
+              className: (0, import_utils5.cn)(FIELD_CLASS, errors.email ? "border-destructive" : "border-border")
+            }
+          ),
+          fieldError("email")
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `${id}-details`, className: "text-sm font-medium", children: t.detailsLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "textarea",
+            {
+              id: `${id}-details`,
+              rows: 4,
+              value: details,
+              onChange: (e) => setDetails(e.target.value),
+              placeholder: t.detailsPlaceholder,
+              className: (0, import_utils5.cn)(FIELD_CLASS, "border-border")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "input",
+              {
+                id: `${id}-consent`,
+                type: "checkbox",
+                checked: consent,
+                onChange: (e) => setConsent(e.target.checked),
+                "aria-invalid": errors.consent ? true : void 0,
+                "aria-describedby": errorId("consent"),
+                className: "mt-1"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `${id}-consent`, className: "text-sm text-foreground/80", children: t.consent })
+          ] }),
+          fieldError("consent")
+        ] }),
+        formError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { role: "alert", className: "text-sm text-destructive", children: formError }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "submit",
+            disabled: submitting,
+            className: "rounded-lg bg-primary px-6 py-2 text-sm font-semibold text-primary-foreground disabled:opacity-60",
+            children: submitting ? t.submitting : t.submit
+          }
+        )
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddToCartButton,
   CartIcon,
   Collection,
+  DATA_REQUEST_TYPES,
+  DEFAULT_DATA_REQUEST_FORM_LABELS,
+  DataRequestForm,
   ShareButtons,
   useCollection
 });