@alfadocs/ui-kit-debug 1.9.0 → 1.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_chunks/{practice-profile-hero-Bdd0bFqC.js → practice-profile-hero-YQ7h2K4o.js} +8 -2
- package/dist/_chunks/practice-profile-hero-YQ7h2K4o.js.map +1 -0
- package/dist/_chunks/{signature-request-DXhpphlp.js → signature-request-CW30B77U.js} +2 -2
- package/dist/_chunks/{signature-request-DXhpphlp.js.map → signature-request-CW30B77U.js.map} +1 -1
- package/dist/_chunks/{whatsapp-button-BIy6NaJK.js → whatsapp-button-Ca9towA4.js} +61 -43
- package/dist/_chunks/whatsapp-button-Ca9towA4.js.map +1 -0
- package/dist/agent-catalog.json +1 -1
- package/dist/components/practice-profile-hero/index.js +1 -1
- package/dist/components/practice-profile-hero/practice-profile-hero.d.ts +5 -1
- package/dist/components/practice-profile-hero/practice-profile-hero.d.ts.map +1 -1
- package/dist/components/whatsapp-button/index.js +1 -1
- package/dist/components/whatsapp-button/whatsapp-button.d.ts.map +1 -1
- package/dist/index.js +3 -3
- package/dist/patterns/signature-request/index.js +1 -1
- package/dist/tokens.css +1 -1
- package/package.json +1 -1
- package/dist/_chunks/practice-profile-hero-Bdd0bFqC.js.map +0 -1
- package/dist/_chunks/whatsapp-button-BIy6NaJK.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfadocs/ui-kit-debug",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "AlfaDocs shared design system — tokens, components, patterns, and translations for platform, booking, and alfascribe. (debug build — identical runtime to @alfadocs/ui-kit, ships source maps for symbolication).",
|
|
6
6
|
"license": "BUSL-1.1",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"practice-profile-hero-Bdd0bFqC.js","sources":["../../src/components/practice-profile-hero/practice-profile-hero.agent.ts","../../src/components/practice-profile-hero/practice-profile-hero.tsx"],"sourcesContent":["import type { AgentAdapter } from '../../agent/types';\nimport type { PracticeProfileHeroHandle } from './practice-profile-hero';\n\nexport const practiceProfileHeroAgent: AgentAdapter<PracticeProfileHeroHandle> =\n {\n id: 'practice-profile-hero',\n // Purely observable hero region — no interactive affordances and no\n // imperative actions on the handle (getName / getHasCover are read-only\n // projections).\n capabilities: [],\n state: {\n name: {\n type: 'string',\n descriptionKey: 'ui.agent.practiceProfileHero.state.name',\n description: 'Practice display name currently rendered.',\n read: (handle) => handle.getName(),\n },\n hasCover: {\n type: 'boolean',\n descriptionKey: 'ui.agent.practiceProfileHero.state.hasCover',\n description:\n 'Whether a cover-image strip is rendered. Structural flag only — never the image URL or any PHI.',\n read: (handle) => handle.getHasCover(),\n },\n },\n actions: {},\n domHooks: {\n root: {\n attr: 'data-component',\n value: 'practice-profile-hero',\n description: 'Marks the PracticeProfileHero root region.',\n },\n instanceId: {\n attr: 'data-component-id',\n sourceProp: 'id',\n description: 'Sourced from the id prop.',\n },\n },\n };\n","import {\n forwardRef,\n useId,\n useMemo,\n useRef,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react';\nimport { cva } from 'class-variance-authority';\nimport { Avatar } from '../avatar/avatar';\nimport { Badge } from '../badge/badge';\nimport { Card } from '../card/card';\nimport { Rating } from '../rating/rating';\nimport { useIsomorphicLayoutEffect } from '../../hooks/use-isomorphic-layout-effect';\nimport { useAgentRegistration } from '../../agent/registry';\nimport { practiceProfileHeroAgent } from './practice-profile-hero.agent';\n\n/* -------------------------------------------------------------------- */\n/* PracticeProfileHero */\n/* */\n/* The practice-page counterpart to `<OperatorHero>` — the top-of-page */\n/* hero for a practice profile (booking site `/p/<seoUrl>`, marketplace */\n/* practice views). Differences from the operator hero: */\n/* */\n/* - Optional cover strip: renders ONLY when `coverImageUrl` is set. */\n/* A practice without a configured cover image gets no strip at all */\n/* — never an empty brand-gradient band eating page space. */\n/* - Larger avatar at desktop widths (3xl), stepped down to xl and */\n/* stacked above the text on small viewports so the practice name, */\n/* tagline and rating keep the full line width on phones. */\n/* -------------------------------------------------------------------- */\n\n/* -------------------------------------------------------------------- */\n/* CVA */\n/* -------------------------------------------------------------------- */\n\nconst rootVariants = cva('ds:w-full ds:text-[color:var(--foreground)]', {\n variants: {\n // Matches the kit's other `surface` props (Booking, ReviewsPanel,\n // OperatorHero). `'elevated'` wraps in `<Card>`.\n surface: {\n flat: '',\n elevated: '',\n },\n },\n defaultVariants: {\n surface: 'elevated',\n },\n});\n\n/* -------------------------------------------------------------------- */\n/* Public types */\n/* -------------------------------------------------------------------- */\n\nexport interface PracticeProfileHeroBadge {\n /** Display key — i18n is up to the consumer. */\n key: string;\n /** Display label. */\n label: string;\n /** Badge variant — falls back to `neutral`. */\n variant?: 'neutral' | 'info' | 'success' | 'warning' | 'error';\n}\n\nexport interface PracticeProfileHeroRating {\n /** Mean rating, 0–5. */\n value: number;\n /** Total number of reviews. */\n count: number;\n}\n\nexport interface PracticeProfileHeroHandle {\n getName: () => string;\n /** Structural flag — whether a cover strip is rendered. No PHI. */\n getHasCover: () => boolean;\n}\n\nexport interface PracticeProfileHeroProps extends Omit<\n ComponentPropsWithoutRef<'div'>,\n 'aria-label' | 'children'\n> {\n /** Practice display name. Rendered as the H1 heading. */\n name: string;\n /** Slogan / tagline subtitle (e.g. \"15 anni di esperienza nel cuore di Brera\"). */\n tagline?: string;\n /**\n * Optional practice photo / logo URL. The kit always renders an\n * `<Avatar>` — when `imageUrl` is missing the avatar falls back to\n * initials.\n */\n imageUrl?: string;\n /**\n * Optional cover image painted as a full-width strip above the body.\n * The strip renders ONLY when this is set — a practice without a cover\n * image gets no strip (and no empty gradient band). While the image\n * loads, the brand gradient shows underneath it.\n */\n coverImageUrl?: string;\n /** Rating summary — when present, renders a Rating + numeric breakdown line. */\n rating?: PracticeProfileHeroRating;\n /**\n * Optional badge row beneath the rating. Use sparingly — 1–3 chips\n * suit the hero's density; longer lists belong in `<ContactProfileCard>`.\n */\n badges?: PracticeProfileHeroBadge[];\n\n /* ----- Slots ----- */\n\n /**\n * Rendered at the inline-end of the heading row (right side on LTR).\n * Use for a \"Book an appointment\" `<Button>` or a share action.\n */\n actionSlot?: ReactNode;\n\n /* ----- Styling ----- */\n\n /**\n * `elevated` (default) wraps in `<Card variant=\"elevated\">`. `flat`\n * drops the Card — use inside another card / sheet.\n */\n surface?: 'flat' | 'elevated';\n\n /* ----- a11y ----- */\n\n 'aria-label'?: string;\n id?: string;\n}\n\n/* -------------------------------------------------------------------- */\n/* Component */\n/* -------------------------------------------------------------------- */\n\nexport const PracticeProfileHero = forwardRef<\n HTMLDivElement,\n PracticeProfileHeroProps\n>(\n (\n {\n name,\n tagline,\n imageUrl,\n coverImageUrl,\n rating,\n badges,\n actionSlot,\n surface = 'elevated',\n 'aria-label': ariaLabel,\n id,\n className,\n ...rest\n },\n ref,\n ) => {\n const headingId = useId();\n const hasCover = Boolean(coverImageUrl);\n\n // Memoised so the registry doesn't see a fresh handle identity (and\n // fire unregister+register) on every render — mirrors Booking.\n const agentHandle = useMemo(\n () => ({ getName: () => name, getHasCover: () => hasCover }),\n [name, hasCover],\n );\n useAgentRegistration(practiceProfileHeroAgent, agentHandle, id);\n\n // Cover image URL lands as a component-scoped CSS custom property set\n // imperatively on a ref — mirrors the Avatar `--avatar-color-override`\n // idiom so no `style={{…}}` attribute lands on the JSX (constraint §4).\n const coverRef = useRef<HTMLDivElement>(null);\n useIsomorphicLayoutEffect(() => {\n const el = coverRef.current;\n if (!el) return;\n if (coverImageUrl) {\n el.style.setProperty(\n '--practice-profile-hero-cover',\n `url(\"${coverImageUrl.replace(/\\\\/g, '\\\\\\\\').replace(/\"/g, '\\\\\"')}\")`,\n );\n } else {\n el.style.removeProperty('--practice-profile-hero-cover');\n }\n }, [coverImageUrl]);\n\n const cover = hasCover ? (\n <div\n ref={coverRef}\n aria-hidden=\"true\"\n data-slot=\"cover\"\n className={[\n 'ds:h-32 ds:sm:h-40 ds:w-full',\n // Cover image layered over the brand gradient — the gradient is\n // the visible underlay while the image streams in (or 404s). The\n // `none` fallback keeps the declaration valid before the layout\n // effect sets the custom property (SSR / first paint).\n 'ds:bg-[image:var(--practice-profile-hero-cover,none),var(--gradient-hero-brand)]',\n 'ds:bg-cover ds:bg-center',\n ].join(' ')}\n />\n ) : null;\n\n const body = (\n <div\n className={[\n // Phones: stacked column, smaller avatar — the practice name,\n // tagline and rating keep the full line width instead of being\n // squeezed beside a 3xl avatar. sm+: classic row layout.\n 'ds:flex ds:flex-col ds:items-start ds:gap-[var(--spacing-md)]',\n 'ds:sm:flex-row ds:sm:gap-[var(--spacing-lg)]',\n ].join(' ')}\n >\n {/* Responsive avatar — `ds:hidden` removes the inactive size from\n both the layout and the accessibility tree. Both renders are\n aria-hidden: the H1 right beside them already carries the\n practice name, so the avatar is decorative here. */}\n <div className=\"ds:shrink-0 ds:sm:hidden\">\n <Avatar size=\"xl\" name={name} src={imageUrl} aria-hidden=\"true\" />\n </div>\n <div className=\"ds:hidden ds:shrink-0 ds:sm:block\">\n <Avatar size=\"3xl\" name={name} src={imageUrl} aria-hidden=\"true\" />\n </div>\n <div className=\"ds:flex ds:w-full ds:min-w-0 ds:flex-1 ds:flex-col ds:gap-[var(--spacing-xs)]\">\n <div className=\"ds:flex ds:flex-wrap ds:items-start ds:gap-[var(--spacing-md)]\">\n <h1\n id={headingId}\n className=\"type-title-page ds:m-0 ds:text-[color:var(--foreground)]\"\n >\n {name}\n </h1>\n {actionSlot ? (\n <div className=\"ds:ms-auto ds:flex ds:shrink-0 ds:items-center ds:gap-[var(--spacing-xs)]\">\n {actionSlot}\n </div>\n ) : null}\n </div>\n {tagline ? (\n <p className=\"type-body ds:m-0 ds:text-[color:var(--foreground)]\">\n {tagline}\n </p>\n ) : null}\n {rating ? (\n // Rating owns the whole line: locale-formatted value, plural-\n // aware review count, and a single role=\"img\" announcement.\n <Rating\n value={rating.value}\n max={5}\n size=\"md\"\n reviews={{ count: rating.count }}\n />\n ) : null}\n {badges && badges.length > 0 ? (\n <div\n role=\"list\"\n className=\"ds:mt-[var(--spacing-2xs)] ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-2xs)]\"\n >\n {badges.map((badge) => (\n <Badge\n key={badge.key}\n variant={badge.variant ?? 'neutral'}\n role=\"listitem\"\n >\n {badge.label}\n </Badge>\n ))}\n </div>\n ) : null}\n </div>\n </div>\n );\n\n return (\n <div\n ref={ref}\n role=\"region\"\n // A consumer-supplied aria-label wins; otherwise the region is\n // named by the practice-name H1 via aria-labelledby.\n aria-label={ariaLabel}\n aria-labelledby={ariaLabel ? undefined : headingId}\n data-component=\"practice-profile-hero\"\n data-component-id={id}\n data-has-cover={hasCover ? 'true' : 'false'}\n id={id}\n className={rootVariants({ surface, className })}\n {...rest}\n >\n {surface === 'elevated' ? (\n <Card variant=\"elevated\">\n {cover}\n <Card.Body>{body}</Card.Body>\n </Card>\n ) : (\n <>\n {cover}\n <div className=\"ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]\">\n {body}\n </div>\n </>\n )}\n </div>\n );\n },\n);\n\nPracticeProfileHero.displayName = 'PracticeProfileHero';\n"],"names":["practiceProfileHeroAgent","handle","rootVariants","cva","PracticeProfileHero","forwardRef","name","tagline","imageUrl","coverImageUrl","rating","badges","actionSlot","surface","ariaLabel","id","className","rest","ref","headingId","useId","hasCover","agentHandle","useMemo","useAgentRegistration","coverRef","useRef","useIsomorphicLayoutEffect","el","cover","jsx","body","jsxs","Avatar","Rating","badge","Badge","Card","Fragment"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"whatsapp-button-BIy6NaJK.js","sources":["../../src/components/whatsapp-button/whatsapp-button.tsx"],"sourcesContent":["/* ------------------------------------------------------------------ */\n/* WhatsAppButton — kit-tokened Click-to-Chat affordance. */\n/* */\n/* Replaces the booking website's loose green-circle-with-caption */\n/* combo (see HTP screenshot in the rebrand discussion) with a single */\n/* well-anchored affordance. Two variants: */\n/* */\n/* - `pill` — inline rounded button, brand green + white glyph + */\n/* label. Drops anywhere in card / header chrome. */\n/* - `fab` — circular floating action button, glyph only, */\n/* persistently anchored in the page corner. Carries an */\n/* `aria-label` so the SR announcement is \"Open WhatsApp */\n/* chat\" without rendering a loose visible caption. */\n/* */\n/* WhatsApp brand guidance requires the canonical #25D366 surface and */\n/* the official phone-bubble glyph — those live in `--brand-whatsapp` */\n/* tokens (added under `src/tokens/index.css`) so all four themes can */\n/* shift the green for accessible contrast without bleeding the brand */\n/* requirement into component code. */\n/* ------------------------------------------------------------------ */\n\nimport {\n forwardRef,\n useMemo,\n type AnchorHTMLAttributes,\n type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\n\n/* ------------------------------------------------------------------ */\n/* WhatsApp glyph */\n/* */\n/* Inlined SVG — no external icon dep. The path matches WhatsApp's */\n/* official brand mark (speech bubble + phone). `currentColor` lets */\n/* the kit's `--brand-whatsapp-foreground` paint the glyph from a */\n/* single CVA class, so accessible-theme shifts apply without code. */\n/* ------------------------------------------------------------------ */\n\nexport function WhatsAppGlyph({\n className,\n}: {\n className?: string;\n}): ReactNode {\n return (\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n <path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.149-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z\" />\n </svg>\n );\n}\n\n/* ------------------------------------------------------------------ */\n/* CVA */\n/* ------------------------------------------------------------------ */\n\nconst rootVariants = cva(\n [\n // `position` is provided by `positionVariants` below — `static`\n // sets `ds:relative` (so the pseudo-element touch-target anchors),\n // `bottom-end` / `bottom-start` set `ds:fixed`. Keeping `relative`\n // off the base avoids the cascade conflict that made `position:\n // relative` win against `position: fixed` in the compiled CSS\n // (booking-website was patching with `style={{position:'fixed'}}`).\n 'ds:inline-flex ds:items-center ds:justify-center',\n 'ds:font-medium ds:whitespace-nowrap',\n 'ds:bg-[var(--brand-whatsapp)] ds:text-[var(--brand-whatsapp-foreground)]',\n 'ds:hover:bg-[var(--brand-whatsapp-hover)]',\n 'ds:active:opacity-90',\n 'ds:transition-[background-color,box-shadow,opacity]',\n 'ds:duration-[var(--animation-duration)]',\n 'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n // Focus ring colour is `var(--ring)` (= `--primary` in light, ditto\n // through theme cascade) — NOT `--brand-whatsapp`. Painting the\n // ring brand-green on a brand-green surface makes it invisible.\n 'ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n // Under Windows High Contrast Mode the bg + shadow are stripped;\n // repaint a solid border + swap the focus ring to CanvasText so\n // the affordance stays identifiable.\n 'ds:forced-colors:border ds:forced-colors:border-[ButtonBorder]',\n 'ds:forced-colors:focus-visible:outline-[CanvasText]',\n 'ds:disabled:opacity-50 ds:disabled:cursor-not-allowed',\n 'ds:motion-reduce:transition-none',\n ].join(' '),\n {\n variants: {\n variant: {\n // Pill — inline rounded button. Visible label is the brand\n // affordance text; glyph sits leading.\n pill: 'ds:rounded-[var(--radius-full)] ds:gap-[var(--spacing-xs)]',\n // FAB — circular floating action button. Glyph only; the\n // label resolves into `aria-label`.\n fab: [\n 'ds:rounded-full ds:shadow-[var(--shadow-lg)]',\n 'ds:hover:shadow-[var(--shadow-xl)] ds:active:shadow-[var(--shadow-md)]',\n ].join(' '),\n },\n size: {\n sm: '',\n md: '',\n lg: '',\n },\n },\n compoundVariants: [\n {\n variant: 'pill',\n size: 'sm',\n class:\n 'ds:h-9 ds:ps-3 ds:pe-3.5 ds:text-[length:var(--font-size-sm)] ds:[&_svg]:size-4 ds:min-h-[var(--min-target-size)] ds:sm:min-h-0 ds:before:absolute ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)] ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[\"\"] ds:sm:before:hidden',\n },\n {\n variant: 'pill',\n size: 'md',\n class:\n 'ds:h-10 ds:ps-4 ds:pe-5 ds:text-[length:var(--font-size-base)] ds:[&_svg]:size-5',\n },\n {\n variant: 'pill',\n size: 'lg',\n class:\n 'ds:h-12 ds:ps-5 ds:pe-6 ds:text-[length:var(--font-size-lg)] ds:[&_svg]:size-6',\n },\n // FAB — fixed square dimensions; the `sm` case mirrors the\n // FloatingActionButton's pseudo-target expansion below the\n // `sm:` breakpoint so a 40px circle still hits 44/48 px on\n // mobile.\n {\n variant: 'fab',\n size: 'sm',\n class:\n 'ds:h-10 ds:w-10 ds:[&_svg]:size-5 ds:before:absolute ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)] ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[\"\"] ds:sm:before:hidden',\n },\n {\n variant: 'fab',\n size: 'md',\n class: 'ds:h-14 ds:w-14 ds:[&_svg]:size-7',\n },\n {\n variant: 'fab',\n size: 'lg',\n class: 'ds:h-16 ds:w-16 ds:[&_svg]:size-8',\n },\n ],\n defaultVariants: {\n variant: 'pill',\n size: 'md',\n },\n },\n);\n\nconst positionVariants = cva('', {\n variants: {\n position: {\n // `relative` so the `::before` pseudo touch-target (defined in\n // the `pill sm` / `fab sm` compound variants) anchors to the\n // button's box. The fixed-positioning variants below don't need\n // this — `position: fixed` is itself a positioning context for\n // descendants and pseudo-elements.\n static: 'ds:relative',\n 'bottom-end':\n 'ds:fixed ds:z-[var(--z-fixed)] ds:bottom-[calc(var(--spacing-lg)+env(safe-area-inset-bottom,0px))] ds:end-[var(--spacing-lg)]',\n 'bottom-start':\n 'ds:fixed ds:z-[var(--z-fixed)] ds:bottom-[calc(var(--spacing-lg)+env(safe-area-inset-bottom,0px))] ds:start-[var(--spacing-lg)]',\n },\n },\n defaultVariants: { position: 'static' },\n});\n\n/* ------------------------------------------------------------------ */\n/* URL builder */\n/* ------------------------------------------------------------------ */\n\n/**\n * Build a `wa.me` deep-link from an E.164 phone number and an\n * optional prefilled message. The number is stripped to digits — the\n * `wa.me` host requires digits only (no `+`, no separators).\n *\n * Returns `null` (not an empty `wa.me/` URL) when the input contains\n * no digits — the caller is then responsible for rendering a disabled\n * affordance rather than shipping a broken link. In dev a `console.warn`\n * fires so the typo is visible during development.\n */\nfunction buildWaMeUrl(phoneNumber: string, message?: string): string | null {\n const digits = phoneNumber.replace(/\\D/g, '');\n if (digits.length === 0) {\n if (\n typeof import.meta !== 'undefined' &&\n typeof import.meta.env !== 'undefined' &&\n import.meta.env.DEV === true\n ) {\n console.warn(\n `[WhatsAppButton] phoneNumber \"${phoneNumber}\" contains no digits — ` +\n `the affordance will render disabled. Pass an E.164 number ` +\n `(e.g. \"+393331234567\") to fix.`,\n );\n }\n return null;\n }\n const base = `https://wa.me/${digits}`;\n if (!message) return base;\n return `${base}?text=${encodeURIComponent(message)}`;\n}\n\n/* ------------------------------------------------------------------ */\n/* Props */\n/* ------------------------------------------------------------------ */\n\nexport interface WhatsAppButtonProps\n extends\n Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'children'>,\n VariantProps<typeof rootVariants>,\n VariantProps<typeof positionVariants> {\n /**\n * Phone number to chat to. E.164 format is recommended\n * (e.g. `+393331234567`). Any non-digit characters are stripped\n * before the URL is built — `wa.me` requires digits only.\n */\n phoneNumber: string;\n /**\n * Optional prefilled message. The receiver sees this in their\n * compose box. Keep it short and human — long pasted text is the\n * single most common reason consumers drop the affordance.\n */\n message?: string;\n /**\n * Override the visible / accessible label. Defaults to\n * `t('whatsApp.label')` (or `t('whatsApp.questionPrompt')` when\n * `tone=\"question\"`) for the pill variant, and\n * `t('whatsApp.fabLabel')` for the FAB.\n */\n label?: ReactNode;\n /**\n * Copy tone for the pill variant.\n * - `standard` (default) — brief \"Chat on WhatsApp\" affordance.\n * - `question` — invitational \"Have questions? Chat on WhatsApp\"\n * copy. Routes through `t('whatsApp.questionPrompt')`. Use on\n * public-facing surfaces (booking pages, marketing) where the\n * button is the only prompt encouraging engagement.\n *\n * Ignored for `variant=\"fab\"` — the floating action button is\n * glyph-only and its `aria-label` stays concise via `fabLabel`.\n */\n tone?: 'standard' | 'question';\n}\n\n/* ------------------------------------------------------------------ */\n/* WhatsAppButton */\n/* ------------------------------------------------------------------ */\n\nexport const WhatsAppButton = forwardRef<\n HTMLAnchorElement,\n WhatsAppButtonProps\n>(\n (\n {\n phoneNumber,\n message,\n variant = 'pill',\n size = 'md',\n position,\n label,\n tone = 'standard',\n className,\n ...rest\n },\n ref,\n ) => {\n const { t } = useTranslation();\n const href = useMemo(\n () => buildWaMeUrl(phoneNumber, message),\n [phoneNumber, message],\n );\n // Default-label cascade:\n // FAB → `whatsApp.fabLabel` (always concise)\n // pill, tone=question → `whatsApp.questionPrompt` (invitational)\n // pill, tone=standard → `whatsApp.label` (default)\n // Consumer's `label` prop overrides any of the above.\n const defaultLabelKey =\n variant === 'fab'\n ? 'whatsApp.fabLabel'\n : tone === 'question'\n ? 'whatsApp.questionPrompt'\n : 'whatsApp.label';\n const resolvedLabel = label ?? t(defaultLabelKey);\n\n const composedClassName = [\n rootVariants({ variant, size }),\n positionVariants({ position }),\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n // When the input has no digits, render an `aria-disabled` anchor\n // with the same chrome but no `href` — assistive tech announces the\n // disabled state and click does nothing. `buildWaMeUrl` already\n // emitted a dev-mode warning above. `target` / `rel` are stripped\n // too because they're meaningless without `href`.\n const isDisabled = href === null;\n const commonAnchorProps = {\n ref,\n ...(isDisabled\n ? {}\n : {\n href: href as string,\n target: '_blank' as const,\n rel: 'noopener noreferrer' as const,\n }),\n 'aria-disabled': isDisabled ? true : undefined,\n 'data-component': 'whatsapp-button' as const,\n 'data-variant': variant,\n onClick: (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (isDisabled) event.preventDefault();\n rest.onClick?.(event);\n },\n className: composedClassName,\n };\n\n // Screen-reader cue for the new-tab behaviour. WCAG 3.2.5 / G201:\n // user-initiated link openings to a new context should be\n // announced. Reused `link.opensInNewTab` from the kit's `ui` ns —\n // single source of truth across every external-link affordance.\n const opensInNewTabSrText = isDisabled\n ? null\n : t('link.opensInNewTab', 'Opens in a new tab');\n\n if (variant === 'fab') {\n // FAB — circular, glyph-only. The accessible name lives on the\n // anchor's `aria-label` (resolved label). No visible caption,\n // which is exactly what the redesign fixes vs. the legacy\n // green-circle-with-loose-text affordance.\n const fabAriaLabel =\n typeof resolvedLabel === 'string'\n ? opensInNewTabSrText\n ? `${resolvedLabel} — ${opensInNewTabSrText}`\n : resolvedLabel\n : undefined;\n return (\n <a {...rest} {...commonAnchorProps} aria-label={fabAriaLabel}>\n <WhatsAppGlyph />\n {typeof resolvedLabel !== 'string' ? (\n <span className=\"ds:sr-only\">\n {resolvedLabel}\n {opensInNewTabSrText ? ` — ${opensInNewTabSrText}` : null}\n </span>\n ) : null}\n </a>\n );\n }\n\n return (\n <a {...rest} {...commonAnchorProps}>\n <WhatsAppGlyph />\n <span>{resolvedLabel}</span>\n {opensInNewTabSrText ? (\n <span className=\"ds:sr-only\"> — {opensInNewTabSrText}</span>\n ) : null}\n </a>\n );\n },\n);\nWhatsAppButton.displayName = 'WhatsAppButton';\n"],"names":["WhatsAppGlyph","className","jsx","rootVariants","cva","positionVariants","buildWaMeUrl","phoneNumber","message","digits","base","WhatsAppButton","forwardRef","variant","size","position","label","tone","rest","ref","t","useTranslation","href","useMemo","resolvedLabel","composedClassName","isDisabled","commonAnchorProps","event","_a","opensInNewTabSrText","fabAriaLabel","jsxs"],"mappings":"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"}
|