@alfadocs/ui-kit-debug 0.44.0 → 0.46.0
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/{alia-sidebar-BpX4z_af.js → alia-sidebar-Be8FhKYd.js} +332 -237
- package/dist/_chunks/alia-sidebar-Be8FhKYd.js.map +1 -0
- package/dist/_chunks/{autocomplete-DIgdhCGJ.js → autocomplete-CDqxB68B.js} +2 -2
- package/dist/_chunks/{autocomplete-DIgdhCGJ.js.map → autocomplete-CDqxB68B.js.map} +1 -1
- package/dist/_chunks/bmi-calculator-CQqXTVNL.js +258 -0
- package/dist/_chunks/bmi-calculator-CQqXTVNL.js.map +1 -0
- package/dist/_chunks/{booking-CtLwaxkK.js → booking-DlDVuWMd.js} +2 -2
- package/dist/_chunks/{booking-CtLwaxkK.js.map → booking-DlDVuWMd.js.map} +1 -1
- package/dist/_chunks/{cycle-calculator-ChHBcjet.js → cycle-calculator-KxA8dqDf.js} +31 -20
- package/dist/_chunks/cycle-calculator-KxA8dqDf.js.map +1 -0
- package/dist/_chunks/{due-date-calculator-CYXKLoof.js → due-date-calculator-mFxpHLml.js} +51 -39
- package/dist/_chunks/due-date-calculator-mFxpHLml.js.map +1 -0
- package/dist/_chunks/{editable-currency-cell-renderer-9jqwDv5x.js → editable-currency-cell-renderer-BEBUQl9P.js} +2 -2
- package/dist/_chunks/{editable-currency-cell-renderer-9jqwDv5x.js.map → editable-currency-cell-renderer-BEBUQl9P.js.map} +1 -1
- package/dist/_chunks/{freemium-paywall-BLXESpH4.js → freemium-paywall-DzpD63WY.js} +2 -2
- package/dist/_chunks/{freemium-paywall-BLXESpH4.js.map → freemium-paywall-DzpD63WY.js.map} +1 -1
- package/dist/_chunks/{gestational-age-calculator-sRmoqgVr.js → gestational-age-calculator-gWI_uRA1.js} +52 -39
- package/dist/_chunks/gestational-age-calculator-gWI_uRA1.js.map +1 -0
- package/dist/_chunks/insert-result-C5ABnzDl.js +711 -0
- package/dist/_chunks/insert-result-C5ABnzDl.js.map +1 -0
- package/dist/_chunks/{marketplace-app-shell-Dc5cTIt8.js → marketplace-app-shell-Gfsf78ge.js} +2 -2
- package/dist/_chunks/{marketplace-app-shell-Dc5cTIt8.js.map → marketplace-app-shell-Gfsf78ge.js.map} +1 -1
- package/dist/_chunks/{patient-search-DPe2ZYEL.js → patient-search-CocVcGJ3.js} +2 -2
- package/dist/_chunks/{patient-search-DPe2ZYEL.js.map → patient-search-CocVcGJ3.js.map} +1 -1
- package/dist/_chunks/payment-form-BNTx4876.js +671 -0
- package/dist/_chunks/payment-form-BNTx4876.js.map +1 -0
- package/dist/_chunks/{pdf-viewer-B6MC6VTx.js → pdf-viewer-CWEXTlwq.js} +2 -2
- package/dist/_chunks/{pdf-viewer-B6MC6VTx.js.map → pdf-viewer-CWEXTlwq.js.map} +1 -1
- package/dist/_chunks/{practice-results-CrLpEiiW.js → practice-results-DDi-kvaD.js} +2 -2
- package/dist/_chunks/{practice-results-CrLpEiiW.js.map → practice-results-DDi-kvaD.js.map} +1 -1
- package/dist/_chunks/{pregnancy-weight-gain-C5YhfYnL.js → pregnancy-weight-gain-BtEHaSqy.js} +26 -13
- package/dist/_chunks/pregnancy-weight-gain-BtEHaSqy.js.map +1 -0
- package/dist/_chunks/{search-bar-CP6wUJFY.js → search-bar-CvN_S0jW.js} +2 -2
- package/dist/_chunks/{search-bar-CP6wUJFY.js.map → search-bar-CvN_S0jW.js.map} +1 -1
- package/dist/_chunks/{search-input-C1C3jQpD.js → search-input-D3aMvi4l.js} +2 -2
- package/dist/_chunks/{search-input-C1C3jQpD.js.map → search-input-D3aMvi4l.js.map} +1 -1
- package/dist/_chunks/{sign-document-B-3k_0LO.js → sign-document-BCyLpFHJ.js} +2 -2
- package/dist/_chunks/{sign-document-B-3k_0LO.js.map → sign-document-BCyLpFHJ.js.map} +1 -1
- package/dist/_chunks/{sign-in-with-alfadocs-button-DeHBFRNS.js → sign-in-with-alfadocs-button-CuYn_kKP.js} +2 -2
- package/dist/_chunks/{sign-in-with-alfadocs-button-DeHBFRNS.js.map → sign-in-with-alfadocs-button-CuYn_kKP.js.map} +1 -1
- package/dist/_chunks/{social-sign-in-button-X54ySJr1.js → social-sign-in-button-uJYLM366.js} +2 -2
- package/dist/_chunks/{social-sign-in-button-X54ySJr1.js.map → social-sign-in-button-uJYLM366.js.map} +1 -1
- package/dist/_chunks/{spinner-CCByyvcb.js → spinner-OjQNn8oN.js} +7 -3
- package/dist/_chunks/spinner-OjQNn8oN.js.map +1 -0
- package/dist/_chunks/{transcript-panel-CR7VY1uw.js → transcript-panel-B4HiC7ed.js} +2 -2
- package/dist/_chunks/{transcript-panel-CR7VY1uw.js.map → transcript-panel-B4HiC7ed.js.map} +1 -1
- package/dist/_chunks/{unit-converter-Ds9jalbN.js → unit-converter-u3CwNDpP.js} +63 -52
- package/dist/_chunks/unit-converter-u3CwNDpP.js.map +1 -0
- package/dist/_chunks/{wallet-pay-button-DK4ESYge.js → wallet-pay-button-DuDPBlCO.js} +2 -2
- package/dist/_chunks/{wallet-pay-button-DK4ESYge.js.map → wallet-pay-button-DuDPBlCO.js.map} +1 -1
- package/dist/agent-catalog.json +1 -1
- package/dist/components/_shared/banded-gauge.d.ts +193 -0
- package/dist/components/_shared/banded-gauge.d.ts.map +1 -0
- package/dist/components/_shared/insert-result.d.ts +81 -8
- package/dist/components/_shared/insert-result.d.ts.map +1 -1
- package/dist/components/autocomplete/index.js +1 -1
- package/dist/components/bmi-calculator/bmi-calculator.d.ts +2 -2
- package/dist/components/bmi-calculator/bmi-calculator.d.ts.map +1 -1
- package/dist/components/bmi-calculator/index.js +1 -1
- package/dist/components/booking/index.js +1 -1
- package/dist/components/cycle-calculator/cycle-calculator.d.ts +2 -2
- package/dist/components/cycle-calculator/cycle-calculator.d.ts.map +1 -1
- package/dist/components/cycle-calculator/index.js +1 -1
- package/dist/components/data-table/index.js +1 -1
- package/dist/components/due-date-calculator/due-date-calculator.d.ts +2 -2
- package/dist/components/due-date-calculator/due-date-calculator.d.ts.map +1 -1
- package/dist/components/due-date-calculator/index.js +1 -1
- package/dist/components/freemium-paywall/index.js +1 -1
- package/dist/components/gestational-age-calculator/gestational-age-calculator.d.ts +2 -2
- package/dist/components/gestational-age-calculator/gestational-age-calculator.d.ts.map +1 -1
- package/dist/components/gestational-age-calculator/index.js +1 -1
- package/dist/components/patient-search/index.js +1 -1
- package/dist/components/payment-form/index.js +1 -1
- package/dist/components/payment-form/payment-form.d.ts +30 -2
- package/dist/components/payment-form/payment-form.d.ts.map +1 -1
- package/dist/components/pdf-viewer/index.js +1 -1
- package/dist/components/practice-results/index.js +1 -1
- package/dist/components/pregnancy-weight-gain/index.js +1 -1
- package/dist/components/pregnancy-weight-gain/pregnancy-weight-gain.d.ts +2 -2
- package/dist/components/pregnancy-weight-gain/pregnancy-weight-gain.d.ts.map +1 -1
- package/dist/components/search-bar/index.js +1 -1
- package/dist/components/search-input/index.js +1 -1
- package/dist/components/sign-document/index.js +1 -1
- package/dist/components/sign-in-with-alfadocs-button/index.js +1 -1
- package/dist/components/social-sign-in-button/index.js +1 -1
- package/dist/components/spinner/index.js +1 -1
- package/dist/components/spinner/spinner.d.ts +2 -2
- package/dist/components/spinner/spinner.d.ts.map +1 -1
- package/dist/components/transcript-panel/index.js +1 -1
- package/dist/components/unit-converter/index.js +1 -1
- package/dist/components/unit-converter/unit-converter.d.ts +2 -2
- package/dist/components/unit-converter/unit-converter.d.ts.map +1 -1
- package/dist/components/wallet-pay-button/index.js +1 -1
- package/dist/i18n/locales/ar.d.ts +1 -1
- package/dist/i18n/locales/ar.js +1 -1
- package/dist/i18n/locales/ar.js.map +1 -1
- package/dist/i18n/locales/de.d.ts +1 -1
- package/dist/i18n/locales/de.js +1 -1
- package/dist/i18n/locales/de.js.map +1 -1
- package/dist/i18n/locales/el.d.ts +1 -1
- package/dist/i18n/locales/el.js +1 -1
- package/dist/i18n/locales/el.js.map +1 -1
- package/dist/i18n/locales/en.d.ts +1 -1
- package/dist/i18n/locales/en.js +1 -1
- package/dist/i18n/locales/en.js.map +1 -1
- package/dist/i18n/locales/es.d.ts +1 -1
- package/dist/i18n/locales/es.js +1 -1
- package/dist/i18n/locales/es.js.map +1 -1
- package/dist/i18n/locales/fr.d.ts +1 -1
- package/dist/i18n/locales/fr.js +1 -1
- package/dist/i18n/locales/fr.js.map +1 -1
- package/dist/i18n/locales/hi.d.ts +1 -1
- package/dist/i18n/locales/hi.js +1 -1
- package/dist/i18n/locales/hi.js.map +1 -1
- package/dist/i18n/locales/it.d.ts +1 -1
- package/dist/i18n/locales/it.js +1 -1
- package/dist/i18n/locales/it.js.map +1 -1
- package/dist/i18n/locales/ja.d.ts +1 -1
- package/dist/i18n/locales/ja.js +1 -1
- package/dist/i18n/locales/ja.js.map +1 -1
- package/dist/i18n/locales/nl.d.ts +1 -1
- package/dist/i18n/locales/nl.js +1 -1
- package/dist/i18n/locales/nl.js.map +1 -1
- package/dist/i18n/locales/pl.d.ts +1 -1
- package/dist/i18n/locales/pl.js +1 -1
- package/dist/i18n/locales/pl.js.map +1 -1
- package/dist/i18n/locales/pt.d.ts +1 -1
- package/dist/i18n/locales/pt.js +1 -1
- package/dist/i18n/locales/pt.js.map +1 -1
- package/dist/i18n/locales/ro.d.ts +1 -1
- package/dist/i18n/locales/ro.js +1 -1
- package/dist/i18n/locales/ro.js.map +1 -1
- package/dist/i18n/locales/ru.d.ts +1 -1
- package/dist/i18n/locales/ru.js +1 -1
- package/dist/i18n/locales/ru.js.map +1 -1
- package/dist/i18n/locales/sq.d.ts +1 -1
- package/dist/i18n/locales/sq.js +1 -1
- package/dist/i18n/locales/sq.js.map +1 -1
- package/dist/i18n/locales/sv.d.ts +1 -1
- package/dist/i18n/locales/sv.js +1 -1
- package/dist/i18n/locales/sv.js.map +1 -1
- package/dist/i18n/locales/tr.d.ts +1 -1
- package/dist/i18n/locales/tr.js +1 -1
- package/dist/i18n/locales/tr.js.map +1 -1
- package/dist/i18n/locales/zh.d.ts +1 -1
- package/dist/i18n/locales/zh.js +1 -1
- package/dist/i18n/locales/zh.js.map +1 -1
- package/dist/index.js +25 -25
- package/dist/locales/ar.json +1 -1
- package/dist/locales/de.json +1 -1
- package/dist/locales/el.json +1 -1
- package/dist/locales/en.json +1 -1
- package/dist/locales/es.json +1 -1
- package/dist/locales/fr.json +1 -1
- package/dist/locales/hi.json +1 -1
- package/dist/locales/it.json +1 -1
- package/dist/locales/ja.json +1 -1
- package/dist/locales/nl.json +1 -1
- package/dist/locales/pl.json +1 -1
- package/dist/locales/pt.json +1 -1
- package/dist/locales/ro.json +1 -1
- package/dist/locales/ru.json +1 -1
- package/dist/locales/sq.json +1 -1
- package/dist/locales/sv.json +1 -1
- package/dist/locales/tr.json +1 -1
- package/dist/locales/zh.json +1 -1
- package/dist/patterns/alia-assistant/alia-chat-surface.d.ts.map +1 -1
- package/dist/patterns/alia-assistant/alia-types.d.ts +20 -0
- package/dist/patterns/alia-assistant/alia-types.d.ts.map +1 -1
- package/dist/patterns/alia-assistant/index.js +1 -1
- package/dist/patterns/marketplace-app-shell/index.js +1 -1
- package/dist/tokens/themes/bridges/stripe-appearance.d.ts.map +1 -1
- package/dist/tokens.css +1 -1
- package/package.json +1 -1
- package/dist/_chunks/alia-sidebar-BpX4z_af.js.map +0 -1
- package/dist/_chunks/bmi-calculator-DFPWL2OJ.js +0 -273
- package/dist/_chunks/bmi-calculator-DFPWL2OJ.js.map +0 -1
- package/dist/_chunks/cycle-calculator-ChHBcjet.js.map +0 -1
- package/dist/_chunks/due-date-calculator-CYXKLoof.js.map +0 -1
- package/dist/_chunks/gestational-age-calculator-sRmoqgVr.js.map +0 -1
- package/dist/_chunks/insert-result-CoC1oo6R.js +0 -334
- package/dist/_chunks/insert-result-CoC1oo6R.js.map +0 -1
- package/dist/_chunks/payment-form-BzVsG6Ks.js +0 -590
- package/dist/_chunks/payment-form-BzVsG6Ks.js.map +0 -1
- package/dist/_chunks/pregnancy-weight-gain-C5YhfYnL.js.map +0 -1
- package/dist/_chunks/spinner-CCByyvcb.js.map +0 -1
- package/dist/_chunks/unit-converter-Ds9jalbN.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sign-document-B-3k_0LO.js","sources":["../../src/components/sign-document/sign-document.agent.ts","../../src/components/sign-document/sign-document.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* Agent adapter — SignDocument. */\n/* */\n/* State exposes only structural lifecycle info — never the signature */\n/* bytes (the signed consent is sensitive; persistence is the consumer's */\n/* concern). The single write action confirms the captured signature. */\n/* */\n/* See `src/docs/26-agent-readiness.mdx` for the contract. */\n/* -------------------------------------------------------------------- */\n\nimport type { AgentAdapter } from '../../agent/types';\nimport type { SignDocumentHandle } from './sign-document';\n\nexport const signDocumentAgent: AgentAdapter<SignDocumentHandle> = {\n id: 'sign-document',\n capabilities: ['submit'],\n state: {\n isReadComplete: {\n type: 'boolean',\n descriptionKey: 'signDocument.agent.state.isReadComplete',\n description:\n 'True when the reader has reached the last page (or read-gating is off).',\n read: (handle) => handle.isReadComplete(),\n },\n },\n actions: {\n submit: {\n safety: 'write',\n descriptionKey: 'signDocument.agent.actions.confirm',\n description:\n 'Confirm the current signature, emitting it via onSign. No-op if unsigned.',\n invoke: (handle) => handle.confirm(),\n },\n reset: {\n safety: 'destructive',\n descriptionKey: 'signDocument.agent.actions.reset',\n description: 'Clear the captured signature and return to unsigned.',\n invoke: (handle) => {\n handle.reset();\n },\n },\n },\n domHooks: {\n root: {\n attr: 'data-component',\n value: 'sign-document',\n description: 'Marks the SignDocument wrapper.',\n },\n instanceId: {\n attr: 'data-component-id',\n sourceProp: 'id',\n description: 'Sourced from the id prop.',\n },\n },\n};\n","/* ------------------------------------------------------------------ */\n/* SignDocument — review a PDF document, then sign it. */\n/* */\n/* Fills the kit gap where consumers hand-composed PDFViewer + */\n/* SignatureCapture for consents (e.g. sign.alfadocs.com, HTP-4889). */\n/* This component owns the composition and the read-gate so the consent */\n/* flow is a single primitive: */\n/* */\n/* - PDFViewer (the document) renders above; the signing surface */\n/* renders below. */\n/* - When `requireReadToEnd` (default), the SignatureCapture pad and */\n/* the \"Confirm & sign\" button are gated until the reader reaches the */\n/* LAST page. We track this via PDFViewer's onLoadComplete (numPages) */\n/* + onPageChange (currentPage === numPages). NOTE: last-page-reached */\n/* is an APPROXIMATE read signal — a fit-page zoom can show the last */\n/* page without scrolling. That is acceptable for this gate; a */\n/* legal-grade \"read every page\" guarantee is the consumer's call. */\n/* - When `signedAt` is set the component renders an already-signed */\n/* read-only state (no pad) so re-sign-on-change consumers can show */\n/* signed status. */\n/* - Security: no fetch / XHR / storage / globals here. SignatureCapture */\n/* owns the export payload (PNG/SVG + sha256); the consumer owns */\n/* persistence via onSign. */\n/* - i18n: every authored string via `t('signDocument.*')` (bare keys */\n/* under the `ui` namespace). PDFViewer's `pdf.*` and */\n/* SignatureCapture's `signature.*` strings already exist. */\n/* ------------------------------------------------------------------ */\n\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { cva } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { CheckCircle2 } from 'lucide-react';\nimport { PDFViewer } from '../pdf-viewer';\nimport {\n SignatureCapture,\n type SignatureCaptureHandle,\n type SignatureConfirmPayload,\n} from '../signature-capture';\nimport { useAgentRegistration } from '../../agent';\nimport { signDocumentAgent } from './sign-document.agent';\n\n/* ------------------------------------------------------------------ */\n/* Public types */\n/* ------------------------------------------------------------------ */\n\nexport interface SignDocumentProps {\n /** Opaque instance id — emitted as `data-component-id` for the agent registry. */\n id?: string;\n /** Document PDF — URL string, ArrayBuffer, or Uint8Array. Passed to PDFViewer. */\n src: string | ArrayBuffer | Uint8Array;\n /** Accessible name for the document region (also used as a heading). */\n documentTitle?: string;\n /**\n * Gate the signature + Confirm until the reader reaches the last page.\n * Default `true`. Last-page-reached is an approximate read signal (a\n * fit-page zoom can show the last page without scrolling) — adequate for\n * this gate; legal-grade read tracking is the consumer's concern.\n */\n requireReadToEnd?: boolean;\n /** Fired when the user captures a signature AND confirms. */\n onSign?: (payload: SignatureConfirmPayload) => void;\n /** Forwarded from PDFViewer on any load / render error. */\n onError?: (error: Error) => void;\n /**\n * When set, render the already-signed read-only state: shows \"Signed\" +\n * the signed date and hides the pad. Use for re-sign-on-change consumers\n * that surface signed status. `null` / `undefined` → unsigned.\n */\n signedAt?: string | null;\n /**\n * Optional on-behalf attribution. When both `signer` and `subject` are\n * given, a \"Signed by {signer} on behalf of {subject}\" note renders both\n * near the signature pad (so the signer sees who they're signing for) AND\n * inside the already-signed read-only banner. Omit (the default) and\n * nothing extra renders — the existing subject-agnostic API is unchanged.\n * Provide both to opt in; a lone `signer` or `subject` renders nothing.\n */\n signedByNote?: { signer: string; subject: string };\n /** Disable all controls (document still readable). */\n disabled?: boolean;\n /** Render read-only: the document is shown but the pad is suppressed. */\n readOnly?: boolean;\n /** Accessible label for the component's group region. */\n ariaLabel?: string;\n /** Extra class names merged onto the outermost wrapper. */\n className?: string;\n}\n\n/** Curated imperative handle for agent / external automation. */\nexport interface SignDocumentHandle {\n /** Clear the captured signature, returning to the unsigned state. */\n reset: () => void;\n /** Confirm the current signature; resolves the payload, or null if unsigned. */\n confirm: () => Promise<SignatureConfirmPayload | null>;\n /** True when the reader has reached the last page (or the gate is off). */\n isReadComplete: () => boolean;\n}\n\n/* ------------------------------------------------------------------ */\n/* CVA */\n/* ------------------------------------------------------------------ */\n\nconst rootVariants = cva(\n [\n 'ds:flex ds:flex-col ds:gap-[var(--spacing-md)]',\n 'ds:rounded-[var(--radius-md)] ds:border ds:border-[color:var(--card-border)]',\n 'ds:shadow-[var(--shadow-card)] ds:[.theme-accessible_&]:border-2',\n 'ds:bg-[var(--background)] ds:text-[var(--foreground)]',\n 'ds:p-[var(--spacing-md)]',\n 'ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed',\n ].join(' '),\n);\n\nconst headingVariants = cva(\n ['type-heading-sm ds:text-[var(--foreground)]'].join(' '),\n);\n\nconst signSectionVariants = cva(\n ['ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]'].join(' '),\n);\n\nconst sectionLabelVariants = cva(\n ['type-body-sm ds:font-medium ds:text-[var(--foreground)]'].join(' '),\n);\n\nconst progressVariants = cva(\n [\n 'ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]',\n 'type-body-sm ds:text-[var(--muted-foreground)]',\n ].join(' '),\n);\n\n// The \"scroll to the end to sign\" hint uses --info as a low-emphasis\n// informational tint — tokenised, logical-property insets, no accent over\n// arbitrary content.\nconst hintVariants = cva(\n [\n 'ds:flex ds:items-center ds:gap-[var(--spacing-xs)]',\n 'type-body-sm',\n 'ds:rounded-[var(--radius-sm)]',\n 'ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]',\n 'ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]',\n 'ds:bg-[color-mix(in_srgb,var(--info)_10%,transparent)]',\n 'ds:text-[var(--foreground)]',\n 'ds:border ds:border-[color:color-mix(in_srgb,var(--info)_40%,transparent)]',\n ].join(' '),\n);\n\nconst confirmButtonVariants = cva(\n [\n 'ds:inline-flex ds:inline-size-full ds:items-center ds:justify-center',\n 'ds:[min-block-size:var(--min-target-size)]',\n 'ds:[min-inline-size:var(--min-target-size)]',\n 'ds:gap-[var(--spacing-xs)]',\n 'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n 'ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]',\n 'ds:rounded-[var(--radius-sm)]',\n 'ds:bg-[var(--primary)] ds:text-[var(--primary-foreground)]',\n 'ds:text-[length:var(--font-size-base)] ds:font-medium',\n 'ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n 'ds:hover:bg-[var(--primary-hover)]',\n 'ds:focus-visible:outline-[length:var(--focus-ring-width)]',\n 'ds:focus-visible:outline-solid',\n 'ds:focus-visible:outline-[var(--ring)]',\n 'ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n 'ds:forced-colors:focus-visible:outline-[CanvasText]',\n 'ds:disabled:opacity-[var(--opacity-50)] ds:disabled:cursor-not-allowed',\n 'ds:disabled:hover:bg-[var(--primary)]',\n ].join(' '),\n);\n\n// The signed banner uses the semantic --success alias for the confirmed\n// state — never the raw ramp step (constraint §11).\nconst signedBannerVariants = cva(\n [\n 'ds:flex ds:items-center ds:gap-[var(--spacing-sm)]',\n 'ds:rounded-[var(--radius-sm)]',\n 'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n 'ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]',\n 'ds:bg-[color-mix(in_srgb,var(--success)_12%,transparent)]',\n 'ds:text-[var(--foreground)]',\n 'ds:border ds:border-[color:color-mix(in_srgb,var(--success)_45%,transparent)]',\n ].join(' '),\n);\n\n// The on-behalf attribution note. Low-emphasis muted text — it qualifies the\n// signature, it isn't an action. `placement` swaps the inset/spacing so the\n// same string reads correctly above the pad (a hint) and inside the signed\n// banner (a continuation of the signed copy).\nconst attributionVariants = cva(['type-body-sm'].join(' '), {\n variants: {\n placement: {\n pad: 'ds:text-[var(--muted-foreground)]',\n banner: 'ds:block ds:text-[var(--foreground)]',\n },\n },\n defaultVariants: { placement: 'pad' },\n});\n\n/* ------------------------------------------------------------------ */\n/* Helpers */\n/* ------------------------------------------------------------------ */\n\n/**\n * Format an ISO timestamp using the active i18n locale. Falls back to the\n * raw string if it can't be parsed so a malformed `signedAt` never throws.\n */\nfunction formatSignedAt(iso: string, locale: string): string {\n const date = new Date(iso);\n if (Number.isNaN(date.getTime())) return iso;\n try {\n return new Intl.DateTimeFormat(locale, {\n dateStyle: 'long',\n timeStyle: 'short',\n }).format(date);\n } catch {\n return date.toISOString();\n }\n}\n\n/* ------------------------------------------------------------------ */\n/* SignDocument */\n/* ------------------------------------------------------------------ */\n\nexport const SignDocument = forwardRef<SignDocumentHandle, SignDocumentProps>(\n (\n {\n id,\n src,\n documentTitle,\n requireReadToEnd = true,\n onSign,\n onError,\n signedAt = null,\n signedByNote,\n disabled = false,\n readOnly = false,\n ariaLabel,\n className,\n },\n ref,\n ) => {\n const { t, i18n } = useTranslation();\n const rawId = useId();\n const idSafe = useMemo(\n () => `sign-doc-${rawId.replace(/[^a-zA-Z0-9-_]/g, '')}`,\n [rawId],\n );\n const docHeadingId = `${idSafe}-doc-heading`;\n const signLabelId = `${idSafe}-sign-label`;\n const liveRegionId = `${idSafe}-live`;\n // Stable, static describedby target for the sign section + Confirm —\n // kept separate from the polite live region so describedby points at\n // unchanging text, not the transition announcer (which only carries\n // gate-met / signed announcements).\n const gateHintId = `${idSafe}-gate-hint`;\n\n const signatureRef = useRef<SignatureCaptureHandle>(null);\n\n const [numPages, setNumPages] = useState(0);\n const [currentPage, setCurrentPage] = useState(1);\n // True once the reader has reached the last page at least once. Sticky:\n // scrolling back up does not re-lock the signature.\n const [reachedEnd, setReachedEnd] = useState(false);\n // Mirrors the pad's ink state so the Confirm button re-renders when a\n // signature lands. SignatureCapture's isEmpty() is a sync ref read (no\n // re-render) and its onStart only fires on a DRAWN stroke — not on the\n // typed fallback. We poll the handle so both paths gate Confirm\n // identically; onStart/onClear below are immediate-feedback hints.\n const [hasSignature, setHasSignature] = useState(false);\n\n const isSigned = signedAt != null;\n const inert = disabled || readOnly || isSigned;\n\n // Latest callbacks via refs so the async confirm path never closes over\n // a stale prop.\n const onSignRef = useRef(onSign);\n const onErrorRef = useRef(onError);\n useEffect(() => {\n onSignRef.current = onSign;\n onErrorRef.current = onError;\n }, [onSign, onError]);\n\n /* ---- Per-document reset -------------------------------------- */\n // When the consumer swaps `src` to a NEW document, the previous \"read\n // complete\" state must NOT carry over — otherwise the new document\n // could be signed without being read. Reset the per-document state;\n // PDFViewer's onLoadComplete re-sets reachedEnd for single-page docs.\n useEffect(() => {\n setReachedEnd(false);\n setNumPages(0);\n setCurrentPage(1);\n setHasSignature(false);\n }, [src]);\n\n /* ---- Read-gate tracking -------------------------------------- */\n const handleLoadComplete = useCallback(\n (info: { numPages: number; title?: string }) => {\n setNumPages(info.numPages);\n // A single-page document is \"read to the end\" the moment it loads.\n if (info.numPages <= 1) setReachedEnd(true);\n },\n [],\n );\n\n const handlePageChange = useCallback((page: number) => {\n setCurrentPage(page);\n setNumPages((total) => {\n if (total > 0 && page >= total) setReachedEnd(true);\n return total;\n });\n }, []);\n\n const handleError = useCallback((error: Error) => {\n onErrorRef.current?.(error);\n }, []);\n\n /* ---- Signature-presence polling ------------------------------ */\n // Poll the pad's isEmpty() while the signing surface is live so the\n // Confirm button reflects both drawn AND typed signatures. Cheap\n // (a single boolean ref read on an interval); torn down when signed,\n // read-only, or unmounted.\n const signLive = !isSigned && !readOnly;\n useEffect(() => {\n if (!signLive) return undefined;\n const tick = (): void => {\n const pad = signatureRef.current;\n if (!pad) return;\n setHasSignature(!pad.isEmpty());\n };\n tick();\n const interval = window.setInterval(tick, 200);\n return () => window.clearInterval(interval);\n }, [signLive]);\n\n // The gate is satisfied when reading isn't required, or the reader has\n // reached the last page at least once.\n const readComplete = !requireReadToEnd || reachedEnd;\n const canSign = !inert && readComplete;\n const confirmDisabled = !canSign || !hasSignature;\n\n /* ---- Confirm path -------------------------------------------- */\n // `onSign` fires from SignatureCapture's `onConfirm` (wired below) — the\n // single source of truth, so it fires once whether the user clicks the\n // pad's own Confirm or this component's \"Confirm & sign\". This handle\n // just proxies the pad's confirm() and returns its payload.\n const handleSigned = useCallback((payload: SignatureConfirmPayload) => {\n onSignRef.current?.(payload);\n }, []);\n\n const confirm =\n useCallback(async (): Promise<SignatureConfirmPayload | null> => {\n const pad = signatureRef.current;\n if (!pad) return null;\n return pad.confirm();\n }, []);\n\n const reset = useCallback(() => {\n signatureRef.current?.clear();\n setHasSignature(false);\n }, []);\n\n /* ---- Imperative handle + agent registration ------------------ */\n const agentHandle = useMemo<SignDocumentHandle>(\n () => ({\n reset,\n confirm,\n isReadComplete: () => readComplete,\n }),\n [reset, confirm, readComplete],\n );\n useImperativeHandle(ref, () => agentHandle, [agentHandle]);\n useAgentRegistration(signDocumentAgent, agentHandle, id);\n\n /* ---- Derived strings ----------------------------------------- */\n const regionLabel =\n ariaLabel ??\n (documentTitle\n ? t('signDocument.regionLabelNamed', { title: documentTitle })\n : t('signDocument.regionLabel'));\n const documentRegionLabel =\n documentTitle ?? t('signDocument.documentLabel');\n\n // Live region — ONLY transition announcements (gate met / signed).\n const liveText = isSigned\n ? t('signDocument.signedOn', {\n date: formatSignedAt(signedAt as string, i18n.language),\n })\n : readComplete\n ? t('signDocument.readyToSign')\n : '';\n\n // Static describedby target — always names WHY Confirm is unavailable\n // (or stays empty when it's actionable). Stable text, never live.\n const gateHintText = !readComplete\n ? t('signDocument.scrollToEnd')\n : !hasSignature\n ? t('signDocument.signToEnable')\n : '';\n\n // On-behalf attribution — only when BOTH signer and subject are present\n // (a lone half is meaningless). Rendered above the pad and in the signed\n // banner. Optional: undefined → no attribution, API unchanged.\n const attributionText =\n signedByNote?.signer && signedByNote?.subject\n ? t('signDocument.signedByOnBehalf', {\n signer: signedByNote.signer,\n subject: signedByNote.subject,\n })\n : null;\n\n return (\n <div\n role=\"group\"\n // Prefer labelling by the visible heading so the visible + accessible\n // names match; fall back to aria-label only when there's no heading.\n aria-labelledby={!ariaLabel && documentTitle ? docHeadingId : undefined}\n aria-label={ariaLabel || !documentTitle ? regionLabel : undefined}\n aria-disabled={disabled || undefined}\n className={[rootVariants(), className].filter(Boolean).join(' ')}\n data-component=\"sign-document\"\n data-component-id={id}\n data-signed={isSigned || undefined}\n >\n {/* Polite live region — ONLY transition announcements (gate met /\n signed). Static describedby text lives in the gate-hint span. */}\n <span\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n className=\"ds:sr-only\"\n data-testid=\"sign-document-live\"\n id={liveRegionId}\n >\n {liveText}\n </span>\n\n {/* Static, non-live describedby target for the sign group + Confirm:\n names why Confirm is unavailable (or empty when actionable). */}\n <span className=\"ds:sr-only\" id={gateHintId}>\n {gateHintText}\n </span>\n\n {documentTitle ? (\n <h2 id={docHeadingId} className={headingVariants()}>\n {documentTitle}\n </h2>\n ) : null}\n\n {/* The document. PDFViewer owns its own toolbar, a11y, and zoom. */}\n <PDFViewer\n src={src}\n ariaLabel={documentRegionLabel}\n onLoadComplete={handleLoadComplete}\n onPageChange={handlePageChange}\n onError={handleError}\n />\n\n {isSigned ? (\n /* ---- Already-signed, read-only ---- */\n <div\n className={signedBannerVariants()}\n data-testid=\"sign-document-signed\"\n >\n <CheckCircle2\n aria-hidden=\"true\"\n className=\"ds:size-5 ds:text-[var(--success)] ds:shrink-0\"\n />\n <span className=\"type-body-sm\">\n <strong className=\"ds:font-semibold\">\n {t('signDocument.signed')}\n </strong>\n {' — '}\n {t('signDocument.signedOn', {\n date: formatSignedAt(signedAt as string, i18n.language),\n })}\n {attributionText ? (\n <span\n className={attributionVariants({ placement: 'banner' })}\n data-testid=\"sign-document-attribution\"\n >\n {attributionText}\n </span>\n ) : null}\n </span>\n </div>\n ) : readOnly ? null : (\n /* ---- Sign surface ---- */\n <div\n className={signSectionVariants()}\n role=\"group\"\n aria-labelledby={signLabelId}\n aria-describedby={gateHintId}\n >\n <div className=\"ds:flex ds:flex-wrap ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]\">\n <span id={signLabelId} className={sectionLabelVariants()}>\n {t('signDocument.signatureSection')}\n </span>\n {numPages > 0 ? (\n <span\n className={progressVariants()}\n data-testid=\"sign-document-progress\"\n >\n {t('signDocument.pageProgress', {\n current: currentPage,\n total: numPages,\n })}\n </span>\n ) : null}\n </div>\n\n {attributionText ? (\n <p\n className={attributionVariants({ placement: 'pad' })}\n data-testid=\"sign-document-attribution\"\n >\n {attributionText}\n </p>\n ) : null}\n\n {requireReadToEnd && !readComplete ? (\n <p className={hintVariants()} data-testid=\"sign-document-hint\">\n {t('signDocument.scrollToEnd')}\n </p>\n ) : null}\n\n {/* The pad is always mounted so a keyboard user can prepare a\n typed signature; the Confirm button is the gate. When the\n read-gate is unmet the pad is disabled so it can't accept\n ink prematurely. */}\n <SignatureCapture\n ref={signatureRef}\n ariaLabel={t('signDocument.signatureSection')}\n disabled={disabled || !readComplete}\n onStart={() => setHasSignature(true)}\n onClear={() => setHasSignature(false)}\n onConfirm={handleSigned}\n />\n\n {/* Native `disabled` (not aria-disabled) so a gated Confirm\n leaves the tab order entirely — mirrors how Button gates a\n primary action. describedby names WHY it's unavailable. */}\n <button\n type=\"button\"\n onClick={() => {\n if (confirmDisabled) return;\n void confirm();\n }}\n disabled={confirmDisabled}\n aria-describedby={gateHintId}\n className={confirmButtonVariants()}\n data-testid=\"sign-document-confirm\"\n >\n <CheckCircle2 aria-hidden=\"true\" className=\"ds:size-4\" />\n {t('signDocument.confirm')}\n </button>\n </div>\n )}\n </div>\n );\n },\n);\n\nSignDocument.displayName = 'SignDocument';\n\nexport { rootVariants as signDocumentRootVariants };\n"],"names":["signDocumentAgent","handle","rootVariants","cva","headingVariants","signSectionVariants","sectionLabelVariants","progressVariants","hintVariants","confirmButtonVariants","signedBannerVariants","attributionVariants","formatSignedAt","iso","locale","date","SignDocument","forwardRef","id","src","documentTitle","requireReadToEnd","onSign","onError","signedAt","signedByNote","disabled","readOnly","ariaLabel","className","ref","t","i18n","useTranslation","rawId","useId","idSafe","useMemo","docHeadingId","signLabelId","liveRegionId","gateHintId","signatureRef","useRef","numPages","setNumPages","useState","currentPage","setCurrentPage","reachedEnd","setReachedEnd","hasSignature","setHasSignature","isSigned","inert","onSignRef","onErrorRef","useEffect","handleLoadComplete","useCallback","info","handlePageChange","page","total","handleError","error","_a","signLive","tick","pad","interval","readComplete","confirmDisabled","handleSigned","payload","confirm","reset","agentHandle","useImperativeHandle","useAgentRegistration","regionLabel","documentRegionLabel","liveText","gateHintText","attributionText","jsxs","jsx","PDFViewer","CheckCircle2","SignatureCapture"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sign-document-BCyLpFHJ.js","sources":["../../src/components/sign-document/sign-document.agent.ts","../../src/components/sign-document/sign-document.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* Agent adapter — SignDocument. */\n/* */\n/* State exposes only structural lifecycle info — never the signature */\n/* bytes (the signed consent is sensitive; persistence is the consumer's */\n/* concern). The single write action confirms the captured signature. */\n/* */\n/* See `src/docs/26-agent-readiness.mdx` for the contract. */\n/* -------------------------------------------------------------------- */\n\nimport type { AgentAdapter } from '../../agent/types';\nimport type { SignDocumentHandle } from './sign-document';\n\nexport const signDocumentAgent: AgentAdapter<SignDocumentHandle> = {\n id: 'sign-document',\n capabilities: ['submit'],\n state: {\n isReadComplete: {\n type: 'boolean',\n descriptionKey: 'signDocument.agent.state.isReadComplete',\n description:\n 'True when the reader has reached the last page (or read-gating is off).',\n read: (handle) => handle.isReadComplete(),\n },\n },\n actions: {\n submit: {\n safety: 'write',\n descriptionKey: 'signDocument.agent.actions.confirm',\n description:\n 'Confirm the current signature, emitting it via onSign. No-op if unsigned.',\n invoke: (handle) => handle.confirm(),\n },\n reset: {\n safety: 'destructive',\n descriptionKey: 'signDocument.agent.actions.reset',\n description: 'Clear the captured signature and return to unsigned.',\n invoke: (handle) => {\n handle.reset();\n },\n },\n },\n domHooks: {\n root: {\n attr: 'data-component',\n value: 'sign-document',\n description: 'Marks the SignDocument wrapper.',\n },\n instanceId: {\n attr: 'data-component-id',\n sourceProp: 'id',\n description: 'Sourced from the id prop.',\n },\n },\n};\n","/* ------------------------------------------------------------------ */\n/* SignDocument — review a PDF document, then sign it. */\n/* */\n/* Fills the kit gap where consumers hand-composed PDFViewer + */\n/* SignatureCapture for consents (e.g. sign.alfadocs.com, HTP-4889). */\n/* This component owns the composition and the read-gate so the consent */\n/* flow is a single primitive: */\n/* */\n/* - PDFViewer (the document) renders above; the signing surface */\n/* renders below. */\n/* - When `requireReadToEnd` (default), the SignatureCapture pad and */\n/* the \"Confirm & sign\" button are gated until the reader reaches the */\n/* LAST page. We track this via PDFViewer's onLoadComplete (numPages) */\n/* + onPageChange (currentPage === numPages). NOTE: last-page-reached */\n/* is an APPROXIMATE read signal — a fit-page zoom can show the last */\n/* page without scrolling. That is acceptable for this gate; a */\n/* legal-grade \"read every page\" guarantee is the consumer's call. */\n/* - When `signedAt` is set the component renders an already-signed */\n/* read-only state (no pad) so re-sign-on-change consumers can show */\n/* signed status. */\n/* - Security: no fetch / XHR / storage / globals here. SignatureCapture */\n/* owns the export payload (PNG/SVG + sha256); the consumer owns */\n/* persistence via onSign. */\n/* - i18n: every authored string via `t('signDocument.*')` (bare keys */\n/* under the `ui` namespace). PDFViewer's `pdf.*` and */\n/* SignatureCapture's `signature.*` strings already exist. */\n/* ------------------------------------------------------------------ */\n\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { cva } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { CheckCircle2 } from 'lucide-react';\nimport { PDFViewer } from '../pdf-viewer';\nimport {\n SignatureCapture,\n type SignatureCaptureHandle,\n type SignatureConfirmPayload,\n} from '../signature-capture';\nimport { useAgentRegistration } from '../../agent';\nimport { signDocumentAgent } from './sign-document.agent';\n\n/* ------------------------------------------------------------------ */\n/* Public types */\n/* ------------------------------------------------------------------ */\n\nexport interface SignDocumentProps {\n /** Opaque instance id — emitted as `data-component-id` for the agent registry. */\n id?: string;\n /** Document PDF — URL string, ArrayBuffer, or Uint8Array. Passed to PDFViewer. */\n src: string | ArrayBuffer | Uint8Array;\n /** Accessible name for the document region (also used as a heading). */\n documentTitle?: string;\n /**\n * Gate the signature + Confirm until the reader reaches the last page.\n * Default `true`. Last-page-reached is an approximate read signal (a\n * fit-page zoom can show the last page without scrolling) — adequate for\n * this gate; legal-grade read tracking is the consumer's concern.\n */\n requireReadToEnd?: boolean;\n /** Fired when the user captures a signature AND confirms. */\n onSign?: (payload: SignatureConfirmPayload) => void;\n /** Forwarded from PDFViewer on any load / render error. */\n onError?: (error: Error) => void;\n /**\n * When set, render the already-signed read-only state: shows \"Signed\" +\n * the signed date and hides the pad. Use for re-sign-on-change consumers\n * that surface signed status. `null` / `undefined` → unsigned.\n */\n signedAt?: string | null;\n /**\n * Optional on-behalf attribution. When both `signer` and `subject` are\n * given, a \"Signed by {signer} on behalf of {subject}\" note renders both\n * near the signature pad (so the signer sees who they're signing for) AND\n * inside the already-signed read-only banner. Omit (the default) and\n * nothing extra renders — the existing subject-agnostic API is unchanged.\n * Provide both to opt in; a lone `signer` or `subject` renders nothing.\n */\n signedByNote?: { signer: string; subject: string };\n /** Disable all controls (document still readable). */\n disabled?: boolean;\n /** Render read-only: the document is shown but the pad is suppressed. */\n readOnly?: boolean;\n /** Accessible label for the component's group region. */\n ariaLabel?: string;\n /** Extra class names merged onto the outermost wrapper. */\n className?: string;\n}\n\n/** Curated imperative handle for agent / external automation. */\nexport interface SignDocumentHandle {\n /** Clear the captured signature, returning to the unsigned state. */\n reset: () => void;\n /** Confirm the current signature; resolves the payload, or null if unsigned. */\n confirm: () => Promise<SignatureConfirmPayload | null>;\n /** True when the reader has reached the last page (or the gate is off). */\n isReadComplete: () => boolean;\n}\n\n/* ------------------------------------------------------------------ */\n/* CVA */\n/* ------------------------------------------------------------------ */\n\nconst rootVariants = cva(\n [\n 'ds:flex ds:flex-col ds:gap-[var(--spacing-md)]',\n 'ds:rounded-[var(--radius-md)] ds:border ds:border-[color:var(--card-border)]',\n 'ds:shadow-[var(--shadow-card)] ds:[.theme-accessible_&]:border-2',\n 'ds:bg-[var(--background)] ds:text-[var(--foreground)]',\n 'ds:p-[var(--spacing-md)]',\n 'ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed',\n ].join(' '),\n);\n\nconst headingVariants = cva(\n ['type-heading-sm ds:text-[var(--foreground)]'].join(' '),\n);\n\nconst signSectionVariants = cva(\n ['ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]'].join(' '),\n);\n\nconst sectionLabelVariants = cva(\n ['type-body-sm ds:font-medium ds:text-[var(--foreground)]'].join(' '),\n);\n\nconst progressVariants = cva(\n [\n 'ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]',\n 'type-body-sm ds:text-[var(--muted-foreground)]',\n ].join(' '),\n);\n\n// The \"scroll to the end to sign\" hint uses --info as a low-emphasis\n// informational tint — tokenised, logical-property insets, no accent over\n// arbitrary content.\nconst hintVariants = cva(\n [\n 'ds:flex ds:items-center ds:gap-[var(--spacing-xs)]',\n 'type-body-sm',\n 'ds:rounded-[var(--radius-sm)]',\n 'ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]',\n 'ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]',\n 'ds:bg-[color-mix(in_srgb,var(--info)_10%,transparent)]',\n 'ds:text-[var(--foreground)]',\n 'ds:border ds:border-[color:color-mix(in_srgb,var(--info)_40%,transparent)]',\n ].join(' '),\n);\n\nconst confirmButtonVariants = cva(\n [\n 'ds:inline-flex ds:inline-size-full ds:items-center ds:justify-center',\n 'ds:[min-block-size:var(--min-target-size)]',\n 'ds:[min-inline-size:var(--min-target-size)]',\n 'ds:gap-[var(--spacing-xs)]',\n 'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n 'ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]',\n 'ds:rounded-[var(--radius-sm)]',\n 'ds:bg-[var(--primary)] ds:text-[var(--primary-foreground)]',\n 'ds:text-[length:var(--font-size-base)] ds:font-medium',\n 'ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n 'ds:hover:bg-[var(--primary-hover)]',\n 'ds:focus-visible:outline-[length:var(--focus-ring-width)]',\n 'ds:focus-visible:outline-solid',\n 'ds:focus-visible:outline-[var(--ring)]',\n 'ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n 'ds:forced-colors:focus-visible:outline-[CanvasText]',\n 'ds:disabled:opacity-[var(--opacity-50)] ds:disabled:cursor-not-allowed',\n 'ds:disabled:hover:bg-[var(--primary)]',\n ].join(' '),\n);\n\n// The signed banner uses the semantic --success alias for the confirmed\n// state — never the raw ramp step (constraint §11).\nconst signedBannerVariants = cva(\n [\n 'ds:flex ds:items-center ds:gap-[var(--spacing-sm)]',\n 'ds:rounded-[var(--radius-sm)]',\n 'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n 'ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]',\n 'ds:bg-[color-mix(in_srgb,var(--success)_12%,transparent)]',\n 'ds:text-[var(--foreground)]',\n 'ds:border ds:border-[color:color-mix(in_srgb,var(--success)_45%,transparent)]',\n ].join(' '),\n);\n\n// The on-behalf attribution note. Low-emphasis muted text — it qualifies the\n// signature, it isn't an action. `placement` swaps the inset/spacing so the\n// same string reads correctly above the pad (a hint) and inside the signed\n// banner (a continuation of the signed copy).\nconst attributionVariants = cva(['type-body-sm'].join(' '), {\n variants: {\n placement: {\n pad: 'ds:text-[var(--muted-foreground)]',\n banner: 'ds:block ds:text-[var(--foreground)]',\n },\n },\n defaultVariants: { placement: 'pad' },\n});\n\n/* ------------------------------------------------------------------ */\n/* Helpers */\n/* ------------------------------------------------------------------ */\n\n/**\n * Format an ISO timestamp using the active i18n locale. Falls back to the\n * raw string if it can't be parsed so a malformed `signedAt` never throws.\n */\nfunction formatSignedAt(iso: string, locale: string): string {\n const date = new Date(iso);\n if (Number.isNaN(date.getTime())) return iso;\n try {\n return new Intl.DateTimeFormat(locale, {\n dateStyle: 'long',\n timeStyle: 'short',\n }).format(date);\n } catch {\n return date.toISOString();\n }\n}\n\n/* ------------------------------------------------------------------ */\n/* SignDocument */\n/* ------------------------------------------------------------------ */\n\nexport const SignDocument = forwardRef<SignDocumentHandle, SignDocumentProps>(\n (\n {\n id,\n src,\n documentTitle,\n requireReadToEnd = true,\n onSign,\n onError,\n signedAt = null,\n signedByNote,\n disabled = false,\n readOnly = false,\n ariaLabel,\n className,\n },\n ref,\n ) => {\n const { t, i18n } = useTranslation();\n const rawId = useId();\n const idSafe = useMemo(\n () => `sign-doc-${rawId.replace(/[^a-zA-Z0-9-_]/g, '')}`,\n [rawId],\n );\n const docHeadingId = `${idSafe}-doc-heading`;\n const signLabelId = `${idSafe}-sign-label`;\n const liveRegionId = `${idSafe}-live`;\n // Stable, static describedby target for the sign section + Confirm —\n // kept separate from the polite live region so describedby points at\n // unchanging text, not the transition announcer (which only carries\n // gate-met / signed announcements).\n const gateHintId = `${idSafe}-gate-hint`;\n\n const signatureRef = useRef<SignatureCaptureHandle>(null);\n\n const [numPages, setNumPages] = useState(0);\n const [currentPage, setCurrentPage] = useState(1);\n // True once the reader has reached the last page at least once. Sticky:\n // scrolling back up does not re-lock the signature.\n const [reachedEnd, setReachedEnd] = useState(false);\n // Mirrors the pad's ink state so the Confirm button re-renders when a\n // signature lands. SignatureCapture's isEmpty() is a sync ref read (no\n // re-render) and its onStart only fires on a DRAWN stroke — not on the\n // typed fallback. We poll the handle so both paths gate Confirm\n // identically; onStart/onClear below are immediate-feedback hints.\n const [hasSignature, setHasSignature] = useState(false);\n\n const isSigned = signedAt != null;\n const inert = disabled || readOnly || isSigned;\n\n // Latest callbacks via refs so the async confirm path never closes over\n // a stale prop.\n const onSignRef = useRef(onSign);\n const onErrorRef = useRef(onError);\n useEffect(() => {\n onSignRef.current = onSign;\n onErrorRef.current = onError;\n }, [onSign, onError]);\n\n /* ---- Per-document reset -------------------------------------- */\n // When the consumer swaps `src` to a NEW document, the previous \"read\n // complete\" state must NOT carry over — otherwise the new document\n // could be signed without being read. Reset the per-document state;\n // PDFViewer's onLoadComplete re-sets reachedEnd for single-page docs.\n useEffect(() => {\n setReachedEnd(false);\n setNumPages(0);\n setCurrentPage(1);\n setHasSignature(false);\n }, [src]);\n\n /* ---- Read-gate tracking -------------------------------------- */\n const handleLoadComplete = useCallback(\n (info: { numPages: number; title?: string }) => {\n setNumPages(info.numPages);\n // A single-page document is \"read to the end\" the moment it loads.\n if (info.numPages <= 1) setReachedEnd(true);\n },\n [],\n );\n\n const handlePageChange = useCallback((page: number) => {\n setCurrentPage(page);\n setNumPages((total) => {\n if (total > 0 && page >= total) setReachedEnd(true);\n return total;\n });\n }, []);\n\n const handleError = useCallback((error: Error) => {\n onErrorRef.current?.(error);\n }, []);\n\n /* ---- Signature-presence polling ------------------------------ */\n // Poll the pad's isEmpty() while the signing surface is live so the\n // Confirm button reflects both drawn AND typed signatures. Cheap\n // (a single boolean ref read on an interval); torn down when signed,\n // read-only, or unmounted.\n const signLive = !isSigned && !readOnly;\n useEffect(() => {\n if (!signLive) return undefined;\n const tick = (): void => {\n const pad = signatureRef.current;\n if (!pad) return;\n setHasSignature(!pad.isEmpty());\n };\n tick();\n const interval = window.setInterval(tick, 200);\n return () => window.clearInterval(interval);\n }, [signLive]);\n\n // The gate is satisfied when reading isn't required, or the reader has\n // reached the last page at least once.\n const readComplete = !requireReadToEnd || reachedEnd;\n const canSign = !inert && readComplete;\n const confirmDisabled = !canSign || !hasSignature;\n\n /* ---- Confirm path -------------------------------------------- */\n // `onSign` fires from SignatureCapture's `onConfirm` (wired below) — the\n // single source of truth, so it fires once whether the user clicks the\n // pad's own Confirm or this component's \"Confirm & sign\". This handle\n // just proxies the pad's confirm() and returns its payload.\n const handleSigned = useCallback((payload: SignatureConfirmPayload) => {\n onSignRef.current?.(payload);\n }, []);\n\n const confirm =\n useCallback(async (): Promise<SignatureConfirmPayload | null> => {\n const pad = signatureRef.current;\n if (!pad) return null;\n return pad.confirm();\n }, []);\n\n const reset = useCallback(() => {\n signatureRef.current?.clear();\n setHasSignature(false);\n }, []);\n\n /* ---- Imperative handle + agent registration ------------------ */\n const agentHandle = useMemo<SignDocumentHandle>(\n () => ({\n reset,\n confirm,\n isReadComplete: () => readComplete,\n }),\n [reset, confirm, readComplete],\n );\n useImperativeHandle(ref, () => agentHandle, [agentHandle]);\n useAgentRegistration(signDocumentAgent, agentHandle, id);\n\n /* ---- Derived strings ----------------------------------------- */\n const regionLabel =\n ariaLabel ??\n (documentTitle\n ? t('signDocument.regionLabelNamed', { title: documentTitle })\n : t('signDocument.regionLabel'));\n const documentRegionLabel =\n documentTitle ?? t('signDocument.documentLabel');\n\n // Live region — ONLY transition announcements (gate met / signed).\n const liveText = isSigned\n ? t('signDocument.signedOn', {\n date: formatSignedAt(signedAt as string, i18n.language),\n })\n : readComplete\n ? t('signDocument.readyToSign')\n : '';\n\n // Static describedby target — always names WHY Confirm is unavailable\n // (or stays empty when it's actionable). Stable text, never live.\n const gateHintText = !readComplete\n ? t('signDocument.scrollToEnd')\n : !hasSignature\n ? t('signDocument.signToEnable')\n : '';\n\n // On-behalf attribution — only when BOTH signer and subject are present\n // (a lone half is meaningless). Rendered above the pad and in the signed\n // banner. Optional: undefined → no attribution, API unchanged.\n const attributionText =\n signedByNote?.signer && signedByNote?.subject\n ? t('signDocument.signedByOnBehalf', {\n signer: signedByNote.signer,\n subject: signedByNote.subject,\n })\n : null;\n\n return (\n <div\n role=\"group\"\n // Prefer labelling by the visible heading so the visible + accessible\n // names match; fall back to aria-label only when there's no heading.\n aria-labelledby={!ariaLabel && documentTitle ? docHeadingId : undefined}\n aria-label={ariaLabel || !documentTitle ? regionLabel : undefined}\n aria-disabled={disabled || undefined}\n className={[rootVariants(), className].filter(Boolean).join(' ')}\n data-component=\"sign-document\"\n data-component-id={id}\n data-signed={isSigned || undefined}\n >\n {/* Polite live region — ONLY transition announcements (gate met /\n signed). Static describedby text lives in the gate-hint span. */}\n <span\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n className=\"ds:sr-only\"\n data-testid=\"sign-document-live\"\n id={liveRegionId}\n >\n {liveText}\n </span>\n\n {/* Static, non-live describedby target for the sign group + Confirm:\n names why Confirm is unavailable (or empty when actionable). */}\n <span className=\"ds:sr-only\" id={gateHintId}>\n {gateHintText}\n </span>\n\n {documentTitle ? (\n <h2 id={docHeadingId} className={headingVariants()}>\n {documentTitle}\n </h2>\n ) : null}\n\n {/* The document. PDFViewer owns its own toolbar, a11y, and zoom. */}\n <PDFViewer\n src={src}\n ariaLabel={documentRegionLabel}\n onLoadComplete={handleLoadComplete}\n onPageChange={handlePageChange}\n onError={handleError}\n />\n\n {isSigned ? (\n /* ---- Already-signed, read-only ---- */\n <div\n className={signedBannerVariants()}\n data-testid=\"sign-document-signed\"\n >\n <CheckCircle2\n aria-hidden=\"true\"\n className=\"ds:size-5 ds:text-[var(--success)] ds:shrink-0\"\n />\n <span className=\"type-body-sm\">\n <strong className=\"ds:font-semibold\">\n {t('signDocument.signed')}\n </strong>\n {' — '}\n {t('signDocument.signedOn', {\n date: formatSignedAt(signedAt as string, i18n.language),\n })}\n {attributionText ? (\n <span\n className={attributionVariants({ placement: 'banner' })}\n data-testid=\"sign-document-attribution\"\n >\n {attributionText}\n </span>\n ) : null}\n </span>\n </div>\n ) : readOnly ? null : (\n /* ---- Sign surface ---- */\n <div\n className={signSectionVariants()}\n role=\"group\"\n aria-labelledby={signLabelId}\n aria-describedby={gateHintId}\n >\n <div className=\"ds:flex ds:flex-wrap ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]\">\n <span id={signLabelId} className={sectionLabelVariants()}>\n {t('signDocument.signatureSection')}\n </span>\n {numPages > 0 ? (\n <span\n className={progressVariants()}\n data-testid=\"sign-document-progress\"\n >\n {t('signDocument.pageProgress', {\n current: currentPage,\n total: numPages,\n })}\n </span>\n ) : null}\n </div>\n\n {attributionText ? (\n <p\n className={attributionVariants({ placement: 'pad' })}\n data-testid=\"sign-document-attribution\"\n >\n {attributionText}\n </p>\n ) : null}\n\n {requireReadToEnd && !readComplete ? (\n <p className={hintVariants()} data-testid=\"sign-document-hint\">\n {t('signDocument.scrollToEnd')}\n </p>\n ) : null}\n\n {/* The pad is always mounted so a keyboard user can prepare a\n typed signature; the Confirm button is the gate. When the\n read-gate is unmet the pad is disabled so it can't accept\n ink prematurely. */}\n <SignatureCapture\n ref={signatureRef}\n ariaLabel={t('signDocument.signatureSection')}\n disabled={disabled || !readComplete}\n onStart={() => setHasSignature(true)}\n onClear={() => setHasSignature(false)}\n onConfirm={handleSigned}\n />\n\n {/* Native `disabled` (not aria-disabled) so a gated Confirm\n leaves the tab order entirely — mirrors how Button gates a\n primary action. describedby names WHY it's unavailable. */}\n <button\n type=\"button\"\n onClick={() => {\n if (confirmDisabled) return;\n void confirm();\n }}\n disabled={confirmDisabled}\n aria-describedby={gateHintId}\n className={confirmButtonVariants()}\n data-testid=\"sign-document-confirm\"\n >\n <CheckCircle2 aria-hidden=\"true\" className=\"ds:size-4\" />\n {t('signDocument.confirm')}\n </button>\n </div>\n )}\n </div>\n );\n },\n);\n\nSignDocument.displayName = 'SignDocument';\n\nexport { rootVariants as signDocumentRootVariants };\n"],"names":["signDocumentAgent","handle","rootVariants","cva","headingVariants","signSectionVariants","sectionLabelVariants","progressVariants","hintVariants","confirmButtonVariants","signedBannerVariants","attributionVariants","formatSignedAt","iso","locale","date","SignDocument","forwardRef","id","src","documentTitle","requireReadToEnd","onSign","onError","signedAt","signedByNote","disabled","readOnly","ariaLabel","className","ref","t","i18n","useTranslation","rawId","useId","idSafe","useMemo","docHeadingId","signLabelId","liveRegionId","gateHintId","signatureRef","useRef","numPages","setNumPages","useState","currentPage","setCurrentPage","reachedEnd","setReachedEnd","hasSignature","setHasSignature","isSigned","inert","onSignRef","onErrorRef","useEffect","handleLoadComplete","useCallback","info","handlePageChange","page","total","handleError","error","_a","signLive","tick","pad","interval","readComplete","confirmDisabled","handleSigned","payload","confirm","reset","agentHandle","useImperativeHandle","useAgentRegistration","regionLabel","documentRegionLabel","liveText","gateHintText","attributionText","jsxs","jsx","PDFViewer","CheckCircle2","SignatureCapture"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { forwardRef as L, useRef as c, useEffect as b } from "react";
|
|
|
3
3
|
import { useTranslation as y } from "react-i18next";
|
|
4
4
|
import { B as E } from "./button-DD_0Xdmr.js";
|
|
5
5
|
import { L as I } from "./logo-yituK7sE.js";
|
|
6
|
-
import { S as g } from "./spinner-
|
|
6
|
+
import { S as g } from "./spinner-OjQNn8oN.js";
|
|
7
7
|
const A = /* @__PURE__ */ new Set([
|
|
8
8
|
"primary",
|
|
9
9
|
"secondary",
|
|
@@ -46,4 +46,4 @@ B.displayName = "SignInWithAlfadocsButton";
|
|
|
46
46
|
export {
|
|
47
47
|
B as S
|
|
48
48
|
};
|
|
49
|
-
//# sourceMappingURL=sign-in-with-alfadocs-button-
|
|
49
|
+
//# sourceMappingURL=sign-in-with-alfadocs-button-CuYn_kKP.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sign-in-with-alfadocs-button-
|
|
1
|
+
{"version":3,"file":"sign-in-with-alfadocs-button-CuYn_kKP.js","sources":["../../src/components/sign-in-with-alfadocs-button/sign-in-with-alfadocs-button.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, type ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Button, type ButtonProps } from '../button';\nimport { Logo } from '../logo';\nimport { Spinner } from '../spinner';\n\n// A provider-style button (\"Sign in with AlfaDocs\"). Wraps the Button\n// primitive so it inherits the full intent / size / asChild / endIcon /\n// forced-colors / focus-ring contract for free.\n//\n// The only differences from a plain Button are:\n// 1. A sensible default label resolved from the\n// `ui.auth.continueWithAlfadocs` translation key.\n// 2. The AlfaDocs brand mark rendered as the leading icon.\n// 3. Loading swaps the mark for the kit's `Spinner` (pulse variant)\n// rather than Button's hand-rolled SVG — visually consistent with\n// every other loading affordance in the kit.\n//\n// `destructive` is intentionally omitted — there is no \"delete the\n// user's account\" sign-in flow that this button represents.\n\ntype AllowedIntent = Exclude<NonNullable<ButtonProps['intent']>, 'destructive'>;\n\n// Intents that paint the button surface and use a foreground-tinted\n// text colour. The mark needs to inherit `currentColor` here so it\n// reads against the coloured surface; on transparent intents the\n// mark's own brand violet contrasts naturally with the foreground\n// text.\nconst FILLED_INTENTS = new Set<AllowedIntent>([\n 'primary',\n 'secondary',\n 'tonal',\n]);\n\nexport interface SignInWithAlfadocsButtonProps extends Omit<\n ButtonProps,\n 'startIcon' | 'children' | 'intent'\n> {\n /**\n * Visual intent. Inherits the Button intent set with `destructive`\n * omitted (no \"destroy account\" sign-in flow exists).\n */\n intent?: AllowedIntent;\n /**\n * Override the visible label. When omitted, the component reads\n * `ui.auth.continueWithAlfadocs` (English fallback: \"Continue with\n * AlfaDocs\"). Pass a node to render e.g. \"Sign in with AlfaDocs\" or a\n * fully-translated string.\n */\n label?: ReactNode;\n /**\n * Fired when the component detects the user has cancelled an\n * in-flight sign-in — typically by pressing the browser back button\n * after the OAuth redirect, which restores the page from bfcache\n * with `loading` still true. Wire this to your loading-state\n * setter so the button returns to idle:\n *\n * ```tsx\n * <SignInWithAlfadocsButton\n * loading={signingIn}\n * onLoadingCancelled={() => setSigningIn(false)}\n * onClick={() => { setSigningIn(true); window.location = oauthUrl }}\n * />\n * ```\n *\n * Without this, your `loading` state would survive the back\n * navigation and the button would appear permanently stuck. Only\n * fires when `loading` is currently true; never fires on first mount.\n */\n onLoadingCancelled?: () => void;\n}\n\nexport const SignInWithAlfadocsButton = forwardRef<\n HTMLButtonElement,\n SignInWithAlfadocsButtonProps\n>(\n (\n {\n intent = 'primary',\n size,\n loading = false,\n disabled,\n label,\n onLoadingCancelled,\n type = 'button',\n ...props\n },\n ref,\n ) => {\n const { t } = useTranslation();\n const resolvedLabel =\n label ?? t('auth.continueWithAlfadocs', 'Continue with AlfaDocs');\n const logoTone = FILLED_INTENTS.has(intent) ? 'inherit' : 'auto';\n const resolvedSize = size ?? 'md';\n\n // Stash the latest values in refs so the `pageshow` listener can\n // read them without re-binding on every render. Only one listener\n // attaches for the lifetime of the component.\n const loadingRef = useRef(loading);\n const onCancelRef = useRef(onLoadingCancelled);\n loadingRef.current = loading;\n onCancelRef.current = onLoadingCancelled;\n\n useEffect(() => {\n const onPageShow = (event: PageTransitionEvent) => {\n // `event.persisted` is true when the page was restored from\n // the back/forward cache — the canonical signal for \"user\n // navigated away and came back without a fresh load.\" If the\n // button thinks it's still loading, that means an OAuth\n // redirect was started but never completed.\n if (event.persisted && loadingRef.current && onCancelRef.current) {\n onCancelRef.current();\n }\n };\n window.addEventListener('pageshow', onPageShow);\n return () => window.removeEventListener('pageshow', onPageShow);\n }, []);\n\n // We don't forward `loading` to Button — Button would render its\n // own inline SVG and hide the label. Instead we keep the label\n // visible, swap the leading icon for the kit's Spinner, and\n // reproduce the disabled / aria-busy contract manually.\n return (\n <Button\n ref={ref}\n type={type}\n intent={intent}\n size={size}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n data-component=\"sign-in-with-alfadocs-button\"\n startIcon={\n loading ? (\n <Spinner size={resolvedSize} variant=\"pulse\" />\n ) : (\n <Logo variant=\"mark\" size=\"sm\" tone={logoTone} decorative />\n )\n }\n {...props}\n >\n {resolvedLabel}\n </Button>\n );\n },\n);\n\nSignInWithAlfadocsButton.displayName = 'SignInWithAlfadocsButton';\n"],"names":["FILLED_INTENTS","SignInWithAlfadocsButton","forwardRef","intent","size","loading","disabled","label","onLoadingCancelled","type","props","ref","t","useTranslation","resolvedLabel","logoTone","resolvedSize","loadingRef","useRef","onCancelRef","useEffect","onPageShow","event","jsx","Button","Spinner","Logo"],"mappings":";;;;;;AA4BA,MAAMA,wBAAqB,IAAmB;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AACF,CAAC,GAwCYC,IAA2BC;AAAA,EAItC,CACE;AAAA,IACE,QAAAC,IAAS;AAAA,IACT,MAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IACJP,KAASK,EAAE,6BAA6B,wBAAwB,GAC5DG,IAAWf,EAAe,IAAIG,CAAM,IAAI,YAAY,QACpDa,IAAeZ,KAAQ,MAKvBa,IAAaC,EAAOb,CAAO,GAC3Bc,IAAcD,EAAOV,CAAkB;AAC7C,WAAAS,EAAW,UAAUZ,GACrBc,EAAY,UAAUX,GAEtBY,EAAU,MAAM;AACd,YAAMC,IAAa,CAACC,MAA+B;AAMjD,QAAIA,EAAM,aAAaL,EAAW,WAAWE,EAAY,WACvDA,EAAY,QAAA;AAAA,MAEhB;AACA,oBAAO,iBAAiB,YAAYE,CAAU,GACvC,MAAM,OAAO,oBAAoB,YAAYA,CAAU;AAAA,IAChE,GAAG,CAAA,CAAE,GAOH,gBAAAE;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAb;AAAA,QACA,MAAAF;AAAA,QACA,QAAAN;AAAA,QACA,MAAAC;AAAA,QACA,UAAUE,KAAYD;AAAA,QACtB,aAAWA,KAAW;AAAA,QACtB,kBAAe;AAAA,QACf,WACEA,IACE,gBAAAkB,EAACE,KAAQ,MAAMT,GAAc,SAAQ,QAAA,CAAQ,IAE7C,gBAAAO,EAACG,GAAA,EAAK,SAAQ,QAAO,MAAK,MAAK,MAAMX,GAAU,YAAU,IAAC;AAAA,QAG7D,GAAGL;AAAA,QAEH,UAAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAb,EAAyB,cAAc;"}
|
package/dist/_chunks/{social-sign-in-button-X54ySJr1.js → social-sign-in-button-uJYLM366.js}
RENAMED
|
@@ -2,7 +2,7 @@ import { jsx as s, jsxs as m } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef as y, useRef as p, useEffect as N } from "react";
|
|
3
3
|
import { c as n } from "./index-D2ZczOXr.js";
|
|
4
4
|
import { useTranslation as j } from "react-i18next";
|
|
5
|
-
import { S as V } from "./spinner-
|
|
5
|
+
import { S as V } from "./spinner-OjQNn8oN.js";
|
|
6
6
|
function A({ className: e }) {
|
|
7
7
|
return /* @__PURE__ */ s(
|
|
8
8
|
"svg",
|
|
@@ -240,4 +240,4 @@ I.displayName = "SocialSignInButton";
|
|
|
240
240
|
export {
|
|
241
241
|
I as S
|
|
242
242
|
};
|
|
243
|
-
//# sourceMappingURL=social-sign-in-button-
|
|
243
|
+
//# sourceMappingURL=social-sign-in-button-uJYLM366.js.map
|
package/dist/_chunks/{social-sign-in-button-X54ySJr1.js.map → social-sign-in-button-uJYLM366.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"social-sign-in-button-X54ySJr1.js","sources":["../../src/brand/provider-marks/apple.tsx","../../src/brand/provider-marks/google.tsx","../../src/components/social-sign-in-button/social-sign-in-button.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* Apple brand mark — \"Sign in with Apple\". */\n/* */\n/* Lives under src/brand/** (the sanctioned hex-literal exception zone */\n/* per CLAUDE.md §2) alongside the Google mark, even though this glyph */\n/* is single-colour and follows `currentColor`. Keeping both provider */\n/* marks in one folder gives token-auditor a single brand path to reason */\n/* about and matches the WhatsAppButton inline-glyph precedent. */\n/* */\n/* Per Apple Human Interface Guidelines the Apple logo is a single-colour */\n/* mark that inherits the button's text colour: black on a white (light) */\n/* surface, white on a black (dark) surface. We paint it with */\n/* `fill=\"currentColor\"` so the consuming button's foreground token */\n/* drives the colour from one CVA class — never recolour the Apple logo */\n/* to a brand hue (HIG forbids it). The mark is decorative: the visible */\n/* localized \"Sign in with Apple\" text is the accessible name, so the */\n/* SVG carries `aria-hidden=\"true\"` and the button announces only its */\n/* text label. */\n/* -------------------------------------------------------------------- */\n\nimport type { ReactNode } from 'react';\n\nexport interface ProviderMarkProps {\n /** Forwarded to the root `<svg>` for size / colour utility classes. */\n className?: string;\n}\n\n/**\n * The Apple logo glyph. Single path, `currentColor` fill so it follows\n * the button foreground across light / dark appearances and all four kit\n * themes. Decorative — `aria-hidden`.\n */\nexport function AppleMark({ className }: ProviderMarkProps): ReactNode {\n return (\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\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.05 12.536c-.024-2.51 2.05-3.715 2.143-3.774-1.168-1.708-2.985-1.942-3.63-1.967-1.546-.157-3.018.91-3.802.91-.783 0-1.99-.888-3.273-.864-1.684.025-3.236.978-4.102 2.485-1.748 3.03-.448 7.513 1.255 9.97.832 1.203 1.825 2.552 3.127 2.504 1.255-.05 1.73-.81 3.247-.81 1.518 0 1.945.81 3.273.786 1.351-.025 2.206-1.227 3.03-2.434.955-1.394 1.348-2.745 1.372-2.815-.03-.013-2.633-1.01-2.66-4.001m-2.48-7.343c.692-.838 1.158-2.002 1.03-3.163-.997.04-2.205.664-2.92 1.502-.64.742-1.2 1.927-1.05 3.066 1.112.086 2.247-.566 2.94-1.405\" />\n </svg>\n );\n}\n","/* -------------------------------------------------------------------- */\n/* Google brand mark — \"Sign in with Google\". */\n/* */\n/* Lives under src/brand/** — the ONLY zone where hex-colour literals are */\n/* permitted (CLAUDE.md §2). The Google \"G\" is a FIXED four-colour mark */\n/* that Google Identity Services brand guidelines forbid recolouring: */\n/* blue #4285F4 */\n/* red #EA4335 */\n/* yellow #FBBC05 */\n/* green #34A853 */\n/* These literals are therefore mandatory and intentional — they MUST NOT */\n/* be swapped for tokens or `currentColor`, and they MUST NOT shift across */\n/* the four kit themes or between light/dark button appearances. The mark */\n/* is rendered on a white tile (see SocialSignInButton) on coloured */\n/* surfaces, per GIS guidance, so the colours always read. */\n/* */\n/* The mark is decorative: the visible localized \"Sign in with Google\" */\n/* text is the accessible name, so the SVG carries `aria-hidden=\"true\"` */\n/* and screen readers never announce the individual colour paths. */\n/* -------------------------------------------------------------------- */\n\nimport type { ReactNode } from 'react';\n\nexport interface ProviderMarkProps {\n /** Forwarded to the root `<svg>` for size utility classes. */\n className?: string;\n}\n\n/**\n * The Google \"G\" glyph — the canonical Google Identity Services asset.\n * Four hardcoded brand hues (blue / red / yellow / green) that brand\n * guidelines forbid altering; this is why the file lives under\n * src/brand/** and not src/components/**. Decorative — `aria-hidden`.\n */\nexport function GoogleMark({ className }: ProviderMarkProps): ReactNode {\n return (\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n {/* Brand-mandated fixed colours — do NOT tokenise (GIS guidelines). */}\n <path\n fill=\"#4285F4\"\n d=\"M23.52 12.273c0-.851-.076-1.67-.218-2.455H12v4.642h6.458a5.52 5.52 0 0 1-2.394 3.622v3.01h3.878c2.269-2.09 3.578-5.166 3.578-8.819z\"\n />\n <path\n fill=\"#34A853\"\n d=\"M12 24c3.24 0 5.956-1.075 7.942-2.908l-3.878-3.01c-1.075.72-2.45 1.146-4.064 1.146-3.125 0-5.77-2.11-6.714-4.946H1.276v3.106A11.995 11.995 0 0 0 12 24z\"\n />\n <path\n fill=\"#FBBC05\"\n d=\"M5.286 14.282A7.213 7.213 0 0 1 4.91 12c0-.792.136-1.562.376-2.282V6.612H1.276A11.995 11.995 0 0 0 0 12c0 1.936.464 3.768 1.276 5.388l4.01-3.106z\"\n />\n <path\n fill=\"#EA4335\"\n d=\"M12 4.773c1.762 0 3.344.605 4.589 1.794l3.442-3.442C17.951 1.19 15.235 0 12 0A11.995 11.995 0 0 0 1.276 6.612l4.01 3.106C6.23 6.882 8.875 4.773 12 4.773z\"\n />\n </svg>\n );\n}\n","/* -------------------------------------------------------------------- */\n/* SocialSignInButton — brand-compliant provider sign-in (Apple, Google). */\n/* */\n/* Rendered as a REAL native <button> (forwardRef<HTMLButtonElement>) — */\n/* shown as secondary passwordless options beneath the primary email-OTP */\n/* in patient check-in (HTP-5104). One component, a CVA `provider` axis */\n/* (apple | google, designed to grow), each carrying its official inline */\n/* brand mark and brand surface: */\n/* */\n/* - Apple HIG: light = white button + black logo/text; */\n/* dark = black button + white logo/text. The Apple mark */\n/* follows `currentColor`. */\n/* - Google Identity Services: light = white/neutral button + grey */\n/* text; dark = Google-blue button + white text. The fixed */\n/* 4-colour \"G\" never recolours and sits on a white tile on */\n/* the dark (coloured) surface per GIS guidance. */\n/* */\n/* This mirrors WhatsAppButton's brand-token EXCEPTION pattern: */\n/* `--brand-apple-*` / `--brand-google-*` tokens live in */\n/* src/tokens/index.css across all four themes, and the brand marks ship */\n/* as inline SVGs under src/brand/provider-marks/ (the sanctioned hex */\n/* zone for Google's mandated colours). It also mirrors */\n/* SignInWithAlfadocsButton's provider-button shape: i18n default label, */\n/* Spinner-on-loading, aria-busy, and the bfcache `pageshow` listener that */\n/* fires `onLoadingCancelled` when the user returns from the IDP via the */\n/* browser back button. */\n/* */\n/* Presentation only: it renders the brand-correct trigger and exposes */\n/* onClick — the consuming auth pattern wires the actual OAuth/OIDC */\n/* redirect. `asChild` is intentionally NOT supported (brand guidelines */\n/* require a real button and forbid wrapping the mark in arbitrary link */\n/* chrome). `type` defaults to 'button' so it never implicitly submits an */\n/* ambient form. */\n/* -------------------------------------------------------------------- */\n\nimport {\n forwardRef,\n useEffect,\n useRef,\n type ButtonHTMLAttributes,\n type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { Spinner } from '../spinner';\nimport { AppleMark } from '../../brand/provider-marks/apple';\nimport { GoogleMark } from '../../brand/provider-marks/google';\n\n/* ------------------------------------------------------------------ */\n/* CVA */\n/* ------------------------------------------------------------------ */\n\nconst rootVariants = cva(\n [\n 'ds:relative ds:inline-flex ds:items-center ds:justify-center',\n 'ds:font-medium ds:whitespace-nowrap',\n 'ds:rounded-[var(--radius-md)]',\n 'ds:gap-[var(--spacing-sm)]',\n 'ds:border ds:border-solid',\n 'ds:active:opacity-90',\n 'ds:transition-[background-color,box-shadow,opacity]',\n 'ds:duration-[var(--animation-duration)]',\n // Focus ring is `var(--ring)` (the kit primary), NEVER the brand\n // surface colour — painting the ring in the brand hue on a brand\n // surface makes it invisible. Same rule WhatsAppButton codifies.\n 'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n 'ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n // Windows High Contrast Mode strips brand fills — repaint a solid\n // border edge + swap the focus ring to CanvasText so the affordance\n // stays identifiable.\n '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:aria-busy:cursor-wait',\n 'ds:motion-reduce:transition-none',\n ].join(' '),\n {\n variants: {\n provider: {\n apple: '',\n google: '',\n },\n appearance: {\n light: '',\n dark: '',\n },\n size: {\n // Heights mirror Button (sm 32 / md 40 / lg 48). `sm` (32px) and\n // `md` (40px) both fall below `--min-target-size` (44 base / 48\n // accessible), so each adds the ::before pseudo-element touch-\n // target expansion to reach the minimum on mobile, collapsing\n // above the `sm:` breakpoint. This component is the patient\n // check-in (HTP-5104) mobile sign-in surface and `md` is the\n // DEFAULT size rendered there, so it MUST meet WCAG 2.5.5 at both\n // theme levels — unlike Button/WhatsApp, we do not leave md short.\n // `lg` (48px) already meets the minimum natively.\n sm: [\n 'ds:h-8 ds:ps-3 ds:pe-3 ds:text-[length:var(--font-size-sm)] ds:[&_svg]:size-4',\n 'ds:min-h-[var(--min-target-size)] ds:sm:min-h-0',\n '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 ].join(' '),\n md: [\n 'ds:h-10 ds:ps-4 ds:pe-4 ds:text-[length:var(--font-size-base)] ds:[&_svg]:size-5',\n 'ds:min-h-[var(--min-target-size)] ds:sm:min-h-0',\n '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 ].join(' '),\n lg: 'ds:h-12 ds:ps-5 ds:pe-5 ds:text-[length:var(--font-size-lg)] ds:[&_svg]:size-6',\n },\n },\n compoundVariants: [\n /* Apple — light: white surface, black logo + text. */\n {\n provider: 'apple',\n appearance: 'light',\n class:\n 'ds:bg-[var(--brand-apple-light)] ds:text-[var(--brand-apple-light-foreground)] ds:border-[var(--brand-apple-light-border)] ds:hover:bg-[var(--brand-apple-light-hover)]',\n },\n /* Apple — dark: black surface, white logo + text. */\n {\n provider: 'apple',\n appearance: 'dark',\n class:\n 'ds:bg-[var(--brand-apple-dark)] ds:text-[var(--brand-apple-dark-foreground)] ds:border-[var(--brand-apple-dark)] ds:hover:bg-[var(--brand-apple-dark-hover)]',\n },\n /* Google — light: white/neutral surface, grey text. */\n {\n provider: 'google',\n appearance: 'light',\n class:\n 'ds:bg-[var(--brand-google-light)] ds:text-[var(--brand-google-light-foreground)] ds:border-[var(--brand-google-light-border)] ds:hover:bg-[var(--brand-google-light-hover)]',\n },\n /* Google — dark: Google-blue surface, white text. */\n {\n provider: 'google',\n appearance: 'dark',\n class:\n 'ds:bg-[var(--brand-google-dark)] ds:text-[var(--brand-google-dark-foreground)] ds:border-[var(--brand-google-dark)] ds:hover:bg-[var(--brand-google-dark-hover)]',\n },\n ],\n defaultVariants: {\n appearance: 'light',\n size: 'md',\n },\n },\n);\n\n/* The loading Spinner stands in for the brand mark, so it must occupy the\n SAME footprint (the button's `[&_svg]:size-4/5/6` = 16/20/24px). The\n Spinner's own size ramp is one step smaller (sm/md/lg = 12/16/20px), so\n we bump it one step and wrap it in a size-matched box; without this the\n spinner is ~4px smaller than the glyph it replaces and the button jumps\n on load. `lg` button → `lg` spinner (20px) inside a 24px box that the\n button's `[&_svg]:size-6` then drives via the inner svg. */\nconst SPINNER_SIZE: Record<\n NonNullable<VariantProps<typeof rootVariants>['size']>,\n 'sm' | 'md' | 'lg'\n> = {\n sm: 'md',\n md: 'lg',\n lg: 'lg',\n};\n\nconst spinnerBoxVariants = cva(\n 'ds:inline-flex ds:items-center ds:justify-center ds:shrink-0',\n {\n variants: {\n size: {\n sm: 'ds:size-4',\n md: 'ds:size-5',\n lg: 'ds:size-6',\n },\n },\n defaultVariants: { size: 'md' },\n },\n);\n\n/* The Google mark on a coloured (dark) surface sits inside a white tile\n per Google Identity Services guidance, so the 4-colour G always reads.\n On the light/neutral surface it sits directly on the button. The tile\n is a presentational chrome detail (not the mandated mark), so it uses\n tokens. */\nconst googleTileVariants = cva(\n 'ds:inline-flex ds:items-center ds:justify-center ds:shrink-0',\n {\n variants: {\n appearance: {\n light: '',\n dark: 'ds:rounded-[var(--radius-sm)] ds:bg-[var(--brand-google-tile)]',\n },\n size: {\n sm: 'ds:[&_svg]:size-4',\n md: 'ds:[&_svg]:size-5',\n lg: 'ds:[&_svg]:size-6',\n },\n },\n compoundVariants: [\n { appearance: 'dark', size: 'sm', class: 'ds:p-1' },\n { appearance: 'dark', size: 'md', class: 'ds:p-1.5' },\n { appearance: 'dark', size: 'lg', class: 'ds:p-2' },\n ],\n defaultVariants: { appearance: 'light', size: 'md' },\n },\n);\n\n/* ------------------------------------------------------------------ */\n/* Props */\n/* ------------------------------------------------------------------ */\n\nexport type SocialSignInProvider = 'apple' | 'google';\n\n/**\n * Brand surface variant — independent of the kit theme. Apple HIG:\n * `light` = white button + black mark/text, `dark` = black button +\n * white mark/text. Google: `light` = white/neutral button, `dark` =\n * Google-blue button. Pick the appearance that contrasts with your\n * auth-card background; do NOT bind it to `useTheme()`. Defaults to\n * `'light'`. Derived from `rootVariants` so the prop union tracks the\n * CVA option list automatically.\n */\nexport type SocialSignInAppearance = NonNullable<\n VariantProps<typeof rootVariants>['appearance']\n>;\n\n/** Button size. Defaults to `'md'`. Derived from `rootVariants`. */\nexport type SocialSignInSize = NonNullable<\n VariantProps<typeof rootVariants>['size']\n>;\n\nexport interface SocialSignInButtonProps\n extends\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n Omit<VariantProps<typeof rootVariants>, 'provider'> {\n /**\n * Which identity provider this button represents. Drives the brand\n * mark, the surface colour token, and the default i18n verb + name.\n * Designed extensible — the union and the CVA option list grow\n * together when a new provider (e.g. `'microsoft'`) is added.\n */\n provider: SocialSignInProvider;\n /**\n * Swaps the brand mark for the kit Spinner (size-matched), sets\n * `aria-busy='true'`, and disables the button so the user cannot\n * double-submit the OAuth redirect. The label stays visible.\n */\n loading?: boolean;\n /**\n * Override the visible label. When omitted, reads\n * `socialSignInButton.<provider>` (\"Sign in with Apple\" / \"Sign in\n * with Google\"). Override only to switch the verb to \"Continue with\"\n * — never for marketing copy, and the provider NAME (\"Apple\" /\n * \"Google\") must stay verbatim per brand rules.\n */\n label?: ReactNode;\n /**\n * Fired when the component detects the user cancelled an in-flight\n * sign-in — typically by pressing browser back after the OAuth\n * redirect, which restores the page from bfcache with `loading` still\n * true. Wire this to your loading-state setter so the button returns\n * to idle. Only fires when `loading` is currently true; never on first\n * mount. Mirrors SignInWithAlfadocsButton — the component does not\n * reset state it doesn't own.\n */\n onLoadingCancelled?: () => void;\n}\n\n/* ------------------------------------------------------------------ */\n/* SocialSignInButton */\n/* ------------------------------------------------------------------ */\n\nexport const SocialSignInButton = forwardRef<\n HTMLButtonElement,\n SocialSignInButtonProps\n>(\n (\n {\n provider,\n appearance = 'light',\n size = 'md',\n loading = false,\n disabled,\n label,\n onLoadingCancelled,\n type = 'button',\n className,\n ...props\n },\n ref,\n ) => {\n const { t } = useTranslation();\n // VariantProps types size/appearance as nullable; the destructure\n // default only narrows `undefined`. Normalise to a non-null value\n // before indexing the spinner-size map and box variant.\n const resolvedSize: SocialSignInSize = size ?? 'md';\n // Default label resolves from the provider key. The provider NAME is\n // a brand constant carried verbatim by the translation value.\n const resolvedLabel = label ?? t(`socialSignInButton.${provider}`);\n\n // Stash latest values in refs so the `pageshow` listener reads them\n // without re-binding on every render. One listener for the lifetime.\n const loadingRef = useRef(loading);\n const onCancelRef = useRef(onLoadingCancelled);\n loadingRef.current = loading;\n onCancelRef.current = onLoadingCancelled;\n\n useEffect(() => {\n const onPageShow = (event: PageTransitionEvent) => {\n // `event.persisted` is true when the page was restored from the\n // back/forward cache — the canonical \"user navigated away and\n // came back without a fresh load\" signal. If the button still\n // thinks it's loading, an OAuth redirect was started but never\n // completed.\n if (event.persisted && loadingRef.current && onCancelRef.current) {\n onCancelRef.current();\n }\n };\n window.addEventListener('pageshow', onPageShow);\n return () => window.removeEventListener('pageshow', onPageShow);\n }, []);\n\n const composedClassName = [\n rootVariants({ provider, appearance, size }),\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n // The mark sits at the inline-start; it does NOT mirror in RTL\n // (a logo is not a directional glyph). Logical `gap`/`ps`/`pe` keep\n // the layout direction-correct without flipping the mark itself.\n const mark =\n provider === 'apple' ? (\n <AppleMark className=\"ds:shrink-0\" />\n ) : appearance === 'dark' ? (\n <span className={googleTileVariants({ appearance, size })}>\n <GoogleMark />\n </span>\n ) : (\n <GoogleMark className=\"ds:shrink-0\" />\n );\n\n return (\n <button\n ref={ref}\n type={type}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n data-component=\"social-sign-in-button\"\n data-provider={provider}\n data-appearance={appearance}\n className={composedClassName}\n {...props}\n >\n {loading ? (\n <span className={spinnerBoxVariants({ size: resolvedSize })}>\n <Spinner\n size={SPINNER_SIZE[resolvedSize]}\n variant=\"pulse\"\n className=\"ds:size-full\"\n label={t('socialSignInButton.loading')}\n />\n </span>\n ) : (\n mark\n )}\n <span>{resolvedLabel}</span>\n </button>\n );\n },\n);\n\nSocialSignInButton.displayName = 'SocialSignInButton';\n"],"names":["AppleMark","className","jsx","GoogleMark","jsxs","rootVariants","cva","SPINNER_SIZE","spinnerBoxVariants","googleTileVariants","SocialSignInButton","forwardRef","provider","appearance","size","loading","disabled","label","onLoadingCancelled","type","props","ref","useTranslation","resolvedSize","resolvedLabel","loadingRef","useRef","onCancelRef","useEffect","onPageShow","event","composedClassName","mark","Spinner"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"social-sign-in-button-uJYLM366.js","sources":["../../src/brand/provider-marks/apple.tsx","../../src/brand/provider-marks/google.tsx","../../src/components/social-sign-in-button/social-sign-in-button.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* Apple brand mark — \"Sign in with Apple\". */\n/* */\n/* Lives under src/brand/** (the sanctioned hex-literal exception zone */\n/* per CLAUDE.md §2) alongside the Google mark, even though this glyph */\n/* is single-colour and follows `currentColor`. Keeping both provider */\n/* marks in one folder gives token-auditor a single brand path to reason */\n/* about and matches the WhatsAppButton inline-glyph precedent. */\n/* */\n/* Per Apple Human Interface Guidelines the Apple logo is a single-colour */\n/* mark that inherits the button's text colour: black on a white (light) */\n/* surface, white on a black (dark) surface. We paint it with */\n/* `fill=\"currentColor\"` so the consuming button's foreground token */\n/* drives the colour from one CVA class — never recolour the Apple logo */\n/* to a brand hue (HIG forbids it). The mark is decorative: the visible */\n/* localized \"Sign in with Apple\" text is the accessible name, so the */\n/* SVG carries `aria-hidden=\"true\"` and the button announces only its */\n/* text label. */\n/* -------------------------------------------------------------------- */\n\nimport type { ReactNode } from 'react';\n\nexport interface ProviderMarkProps {\n /** Forwarded to the root `<svg>` for size / colour utility classes. */\n className?: string;\n}\n\n/**\n * The Apple logo glyph. Single path, `currentColor` fill so it follows\n * the button foreground across light / dark appearances and all four kit\n * themes. Decorative — `aria-hidden`.\n */\nexport function AppleMark({ className }: ProviderMarkProps): ReactNode {\n return (\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\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.05 12.536c-.024-2.51 2.05-3.715 2.143-3.774-1.168-1.708-2.985-1.942-3.63-1.967-1.546-.157-3.018.91-3.802.91-.783 0-1.99-.888-3.273-.864-1.684.025-3.236.978-4.102 2.485-1.748 3.03-.448 7.513 1.255 9.97.832 1.203 1.825 2.552 3.127 2.504 1.255-.05 1.73-.81 3.247-.81 1.518 0 1.945.81 3.273.786 1.351-.025 2.206-1.227 3.03-2.434.955-1.394 1.348-2.745 1.372-2.815-.03-.013-2.633-1.01-2.66-4.001m-2.48-7.343c.692-.838 1.158-2.002 1.03-3.163-.997.04-2.205.664-2.92 1.502-.64.742-1.2 1.927-1.05 3.066 1.112.086 2.247-.566 2.94-1.405\" />\n </svg>\n );\n}\n","/* -------------------------------------------------------------------- */\n/* Google brand mark — \"Sign in with Google\". */\n/* */\n/* Lives under src/brand/** — the ONLY zone where hex-colour literals are */\n/* permitted (CLAUDE.md §2). The Google \"G\" is a FIXED four-colour mark */\n/* that Google Identity Services brand guidelines forbid recolouring: */\n/* blue #4285F4 */\n/* red #EA4335 */\n/* yellow #FBBC05 */\n/* green #34A853 */\n/* These literals are therefore mandatory and intentional — they MUST NOT */\n/* be swapped for tokens or `currentColor`, and they MUST NOT shift across */\n/* the four kit themes or between light/dark button appearances. The mark */\n/* is rendered on a white tile (see SocialSignInButton) on coloured */\n/* surfaces, per GIS guidance, so the colours always read. */\n/* */\n/* The mark is decorative: the visible localized \"Sign in with Google\" */\n/* text is the accessible name, so the SVG carries `aria-hidden=\"true\"` */\n/* and screen readers never announce the individual colour paths. */\n/* -------------------------------------------------------------------- */\n\nimport type { ReactNode } from 'react';\n\nexport interface ProviderMarkProps {\n /** Forwarded to the root `<svg>` for size utility classes. */\n className?: string;\n}\n\n/**\n * The Google \"G\" glyph — the canonical Google Identity Services asset.\n * Four hardcoded brand hues (blue / red / yellow / green) that brand\n * guidelines forbid altering; this is why the file lives under\n * src/brand/** and not src/components/**. Decorative — `aria-hidden`.\n */\nexport function GoogleMark({ className }: ProviderMarkProps): ReactNode {\n return (\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n {/* Brand-mandated fixed colours — do NOT tokenise (GIS guidelines). */}\n <path\n fill=\"#4285F4\"\n d=\"M23.52 12.273c0-.851-.076-1.67-.218-2.455H12v4.642h6.458a5.52 5.52 0 0 1-2.394 3.622v3.01h3.878c2.269-2.09 3.578-5.166 3.578-8.819z\"\n />\n <path\n fill=\"#34A853\"\n d=\"M12 24c3.24 0 5.956-1.075 7.942-2.908l-3.878-3.01c-1.075.72-2.45 1.146-4.064 1.146-3.125 0-5.77-2.11-6.714-4.946H1.276v3.106A11.995 11.995 0 0 0 12 24z\"\n />\n <path\n fill=\"#FBBC05\"\n d=\"M5.286 14.282A7.213 7.213 0 0 1 4.91 12c0-.792.136-1.562.376-2.282V6.612H1.276A11.995 11.995 0 0 0 0 12c0 1.936.464 3.768 1.276 5.388l4.01-3.106z\"\n />\n <path\n fill=\"#EA4335\"\n d=\"M12 4.773c1.762 0 3.344.605 4.589 1.794l3.442-3.442C17.951 1.19 15.235 0 12 0A11.995 11.995 0 0 0 1.276 6.612l4.01 3.106C6.23 6.882 8.875 4.773 12 4.773z\"\n />\n </svg>\n );\n}\n","/* -------------------------------------------------------------------- */\n/* SocialSignInButton — brand-compliant provider sign-in (Apple, Google). */\n/* */\n/* Rendered as a REAL native <button> (forwardRef<HTMLButtonElement>) — */\n/* shown as secondary passwordless options beneath the primary email-OTP */\n/* in patient check-in (HTP-5104). One component, a CVA `provider` axis */\n/* (apple | google, designed to grow), each carrying its official inline */\n/* brand mark and brand surface: */\n/* */\n/* - Apple HIG: light = white button + black logo/text; */\n/* dark = black button + white logo/text. The Apple mark */\n/* follows `currentColor`. */\n/* - Google Identity Services: light = white/neutral button + grey */\n/* text; dark = Google-blue button + white text. The fixed */\n/* 4-colour \"G\" never recolours and sits on a white tile on */\n/* the dark (coloured) surface per GIS guidance. */\n/* */\n/* This mirrors WhatsAppButton's brand-token EXCEPTION pattern: */\n/* `--brand-apple-*` / `--brand-google-*` tokens live in */\n/* src/tokens/index.css across all four themes, and the brand marks ship */\n/* as inline SVGs under src/brand/provider-marks/ (the sanctioned hex */\n/* zone for Google's mandated colours). It also mirrors */\n/* SignInWithAlfadocsButton's provider-button shape: i18n default label, */\n/* Spinner-on-loading, aria-busy, and the bfcache `pageshow` listener that */\n/* fires `onLoadingCancelled` when the user returns from the IDP via the */\n/* browser back button. */\n/* */\n/* Presentation only: it renders the brand-correct trigger and exposes */\n/* onClick — the consuming auth pattern wires the actual OAuth/OIDC */\n/* redirect. `asChild` is intentionally NOT supported (brand guidelines */\n/* require a real button and forbid wrapping the mark in arbitrary link */\n/* chrome). `type` defaults to 'button' so it never implicitly submits an */\n/* ambient form. */\n/* -------------------------------------------------------------------- */\n\nimport {\n forwardRef,\n useEffect,\n useRef,\n type ButtonHTMLAttributes,\n type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { Spinner } from '../spinner';\nimport { AppleMark } from '../../brand/provider-marks/apple';\nimport { GoogleMark } from '../../brand/provider-marks/google';\n\n/* ------------------------------------------------------------------ */\n/* CVA */\n/* ------------------------------------------------------------------ */\n\nconst rootVariants = cva(\n [\n 'ds:relative ds:inline-flex ds:items-center ds:justify-center',\n 'ds:font-medium ds:whitespace-nowrap',\n 'ds:rounded-[var(--radius-md)]',\n 'ds:gap-[var(--spacing-sm)]',\n 'ds:border ds:border-solid',\n 'ds:active:opacity-90',\n 'ds:transition-[background-color,box-shadow,opacity]',\n 'ds:duration-[var(--animation-duration)]',\n // Focus ring is `var(--ring)` (the kit primary), NEVER the brand\n // surface colour — painting the ring in the brand hue on a brand\n // surface makes it invisible. Same rule WhatsAppButton codifies.\n 'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n 'ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n // Windows High Contrast Mode strips brand fills — repaint a solid\n // border edge + swap the focus ring to CanvasText so the affordance\n // stays identifiable.\n '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:aria-busy:cursor-wait',\n 'ds:motion-reduce:transition-none',\n ].join(' '),\n {\n variants: {\n provider: {\n apple: '',\n google: '',\n },\n appearance: {\n light: '',\n dark: '',\n },\n size: {\n // Heights mirror Button (sm 32 / md 40 / lg 48). `sm` (32px) and\n // `md` (40px) both fall below `--min-target-size` (44 base / 48\n // accessible), so each adds the ::before pseudo-element touch-\n // target expansion to reach the minimum on mobile, collapsing\n // above the `sm:` breakpoint. This component is the patient\n // check-in (HTP-5104) mobile sign-in surface and `md` is the\n // DEFAULT size rendered there, so it MUST meet WCAG 2.5.5 at both\n // theme levels — unlike Button/WhatsApp, we do not leave md short.\n // `lg` (48px) already meets the minimum natively.\n sm: [\n 'ds:h-8 ds:ps-3 ds:pe-3 ds:text-[length:var(--font-size-sm)] ds:[&_svg]:size-4',\n 'ds:min-h-[var(--min-target-size)] ds:sm:min-h-0',\n '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 ].join(' '),\n md: [\n 'ds:h-10 ds:ps-4 ds:pe-4 ds:text-[length:var(--font-size-base)] ds:[&_svg]:size-5',\n 'ds:min-h-[var(--min-target-size)] ds:sm:min-h-0',\n '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 ].join(' '),\n lg: 'ds:h-12 ds:ps-5 ds:pe-5 ds:text-[length:var(--font-size-lg)] ds:[&_svg]:size-6',\n },\n },\n compoundVariants: [\n /* Apple — light: white surface, black logo + text. */\n {\n provider: 'apple',\n appearance: 'light',\n class:\n 'ds:bg-[var(--brand-apple-light)] ds:text-[var(--brand-apple-light-foreground)] ds:border-[var(--brand-apple-light-border)] ds:hover:bg-[var(--brand-apple-light-hover)]',\n },\n /* Apple — dark: black surface, white logo + text. */\n {\n provider: 'apple',\n appearance: 'dark',\n class:\n 'ds:bg-[var(--brand-apple-dark)] ds:text-[var(--brand-apple-dark-foreground)] ds:border-[var(--brand-apple-dark)] ds:hover:bg-[var(--brand-apple-dark-hover)]',\n },\n /* Google — light: white/neutral surface, grey text. */\n {\n provider: 'google',\n appearance: 'light',\n class:\n 'ds:bg-[var(--brand-google-light)] ds:text-[var(--brand-google-light-foreground)] ds:border-[var(--brand-google-light-border)] ds:hover:bg-[var(--brand-google-light-hover)]',\n },\n /* Google — dark: Google-blue surface, white text. */\n {\n provider: 'google',\n appearance: 'dark',\n class:\n 'ds:bg-[var(--brand-google-dark)] ds:text-[var(--brand-google-dark-foreground)] ds:border-[var(--brand-google-dark)] ds:hover:bg-[var(--brand-google-dark-hover)]',\n },\n ],\n defaultVariants: {\n appearance: 'light',\n size: 'md',\n },\n },\n);\n\n/* The loading Spinner stands in for the brand mark, so it must occupy the\n SAME footprint (the button's `[&_svg]:size-4/5/6` = 16/20/24px). The\n Spinner's own size ramp is one step smaller (sm/md/lg = 12/16/20px), so\n we bump it one step and wrap it in a size-matched box; without this the\n spinner is ~4px smaller than the glyph it replaces and the button jumps\n on load. `lg` button → `lg` spinner (20px) inside a 24px box that the\n button's `[&_svg]:size-6` then drives via the inner svg. */\nconst SPINNER_SIZE: Record<\n NonNullable<VariantProps<typeof rootVariants>['size']>,\n 'sm' | 'md' | 'lg'\n> = {\n sm: 'md',\n md: 'lg',\n lg: 'lg',\n};\n\nconst spinnerBoxVariants = cva(\n 'ds:inline-flex ds:items-center ds:justify-center ds:shrink-0',\n {\n variants: {\n size: {\n sm: 'ds:size-4',\n md: 'ds:size-5',\n lg: 'ds:size-6',\n },\n },\n defaultVariants: { size: 'md' },\n },\n);\n\n/* The Google mark on a coloured (dark) surface sits inside a white tile\n per Google Identity Services guidance, so the 4-colour G always reads.\n On the light/neutral surface it sits directly on the button. The tile\n is a presentational chrome detail (not the mandated mark), so it uses\n tokens. */\nconst googleTileVariants = cva(\n 'ds:inline-flex ds:items-center ds:justify-center ds:shrink-0',\n {\n variants: {\n appearance: {\n light: '',\n dark: 'ds:rounded-[var(--radius-sm)] ds:bg-[var(--brand-google-tile)]',\n },\n size: {\n sm: 'ds:[&_svg]:size-4',\n md: 'ds:[&_svg]:size-5',\n lg: 'ds:[&_svg]:size-6',\n },\n },\n compoundVariants: [\n { appearance: 'dark', size: 'sm', class: 'ds:p-1' },\n { appearance: 'dark', size: 'md', class: 'ds:p-1.5' },\n { appearance: 'dark', size: 'lg', class: 'ds:p-2' },\n ],\n defaultVariants: { appearance: 'light', size: 'md' },\n },\n);\n\n/* ------------------------------------------------------------------ */\n/* Props */\n/* ------------------------------------------------------------------ */\n\nexport type SocialSignInProvider = 'apple' | 'google';\n\n/**\n * Brand surface variant — independent of the kit theme. Apple HIG:\n * `light` = white button + black mark/text, `dark` = black button +\n * white mark/text. Google: `light` = white/neutral button, `dark` =\n * Google-blue button. Pick the appearance that contrasts with your\n * auth-card background; do NOT bind it to `useTheme()`. Defaults to\n * `'light'`. Derived from `rootVariants` so the prop union tracks the\n * CVA option list automatically.\n */\nexport type SocialSignInAppearance = NonNullable<\n VariantProps<typeof rootVariants>['appearance']\n>;\n\n/** Button size. Defaults to `'md'`. Derived from `rootVariants`. */\nexport type SocialSignInSize = NonNullable<\n VariantProps<typeof rootVariants>['size']\n>;\n\nexport interface SocialSignInButtonProps\n extends\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n Omit<VariantProps<typeof rootVariants>, 'provider'> {\n /**\n * Which identity provider this button represents. Drives the brand\n * mark, the surface colour token, and the default i18n verb + name.\n * Designed extensible — the union and the CVA option list grow\n * together when a new provider (e.g. `'microsoft'`) is added.\n */\n provider: SocialSignInProvider;\n /**\n * Swaps the brand mark for the kit Spinner (size-matched), sets\n * `aria-busy='true'`, and disables the button so the user cannot\n * double-submit the OAuth redirect. The label stays visible.\n */\n loading?: boolean;\n /**\n * Override the visible label. When omitted, reads\n * `socialSignInButton.<provider>` (\"Sign in with Apple\" / \"Sign in\n * with Google\"). Override only to switch the verb to \"Continue with\"\n * — never for marketing copy, and the provider NAME (\"Apple\" /\n * \"Google\") must stay verbatim per brand rules.\n */\n label?: ReactNode;\n /**\n * Fired when the component detects the user cancelled an in-flight\n * sign-in — typically by pressing browser back after the OAuth\n * redirect, which restores the page from bfcache with `loading` still\n * true. Wire this to your loading-state setter so the button returns\n * to idle. Only fires when `loading` is currently true; never on first\n * mount. Mirrors SignInWithAlfadocsButton — the component does not\n * reset state it doesn't own.\n */\n onLoadingCancelled?: () => void;\n}\n\n/* ------------------------------------------------------------------ */\n/* SocialSignInButton */\n/* ------------------------------------------------------------------ */\n\nexport const SocialSignInButton = forwardRef<\n HTMLButtonElement,\n SocialSignInButtonProps\n>(\n (\n {\n provider,\n appearance = 'light',\n size = 'md',\n loading = false,\n disabled,\n label,\n onLoadingCancelled,\n type = 'button',\n className,\n ...props\n },\n ref,\n ) => {\n const { t } = useTranslation();\n // VariantProps types size/appearance as nullable; the destructure\n // default only narrows `undefined`. Normalise to a non-null value\n // before indexing the spinner-size map and box variant.\n const resolvedSize: SocialSignInSize = size ?? 'md';\n // Default label resolves from the provider key. The provider NAME is\n // a brand constant carried verbatim by the translation value.\n const resolvedLabel = label ?? t(`socialSignInButton.${provider}`);\n\n // Stash latest values in refs so the `pageshow` listener reads them\n // without re-binding on every render. One listener for the lifetime.\n const loadingRef = useRef(loading);\n const onCancelRef = useRef(onLoadingCancelled);\n loadingRef.current = loading;\n onCancelRef.current = onLoadingCancelled;\n\n useEffect(() => {\n const onPageShow = (event: PageTransitionEvent) => {\n // `event.persisted` is true when the page was restored from the\n // back/forward cache — the canonical \"user navigated away and\n // came back without a fresh load\" signal. If the button still\n // thinks it's loading, an OAuth redirect was started but never\n // completed.\n if (event.persisted && loadingRef.current && onCancelRef.current) {\n onCancelRef.current();\n }\n };\n window.addEventListener('pageshow', onPageShow);\n return () => window.removeEventListener('pageshow', onPageShow);\n }, []);\n\n const composedClassName = [\n rootVariants({ provider, appearance, size }),\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n // The mark sits at the inline-start; it does NOT mirror in RTL\n // (a logo is not a directional glyph). Logical `gap`/`ps`/`pe` keep\n // the layout direction-correct without flipping the mark itself.\n const mark =\n provider === 'apple' ? (\n <AppleMark className=\"ds:shrink-0\" />\n ) : appearance === 'dark' ? (\n <span className={googleTileVariants({ appearance, size })}>\n <GoogleMark />\n </span>\n ) : (\n <GoogleMark className=\"ds:shrink-0\" />\n );\n\n return (\n <button\n ref={ref}\n type={type}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n data-component=\"social-sign-in-button\"\n data-provider={provider}\n data-appearance={appearance}\n className={composedClassName}\n {...props}\n >\n {loading ? (\n <span className={spinnerBoxVariants({ size: resolvedSize })}>\n <Spinner\n size={SPINNER_SIZE[resolvedSize]}\n variant=\"pulse\"\n className=\"ds:size-full\"\n label={t('socialSignInButton.loading')}\n />\n </span>\n ) : (\n mark\n )}\n <span>{resolvedLabel}</span>\n </button>\n );\n },\n);\n\nSocialSignInButton.displayName = 'SocialSignInButton';\n"],"names":["AppleMark","className","jsx","GoogleMark","jsxs","rootVariants","cva","SPINNER_SIZE","spinnerBoxVariants","googleTileVariants","SocialSignInButton","forwardRef","provider","appearance","size","loading","disabled","label","onLoadingCancelled","type","props","ref","useTranslation","resolvedSize","resolvedLabel","loadingRef","useRef","onCancelRef","useEffect","onPageShow","event","composedClassName","mark","Spinner"],"mappings":"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"}
|
|
@@ -12,7 +12,8 @@ const f = i("ds:inline-block ds:shrink-0 ds:text-current", {
|
|
|
12
12
|
variant: {
|
|
13
13
|
pulse: "",
|
|
14
14
|
chase: "",
|
|
15
|
-
prism: ""
|
|
15
|
+
prism: "",
|
|
16
|
+
static: ""
|
|
16
17
|
},
|
|
17
18
|
speed: {
|
|
18
19
|
slower: "",
|
|
@@ -105,7 +106,10 @@ const f = i("ds:inline-block ds:shrink-0 ds:text-current", {
|
|
|
105
106
|
variant: {
|
|
106
107
|
pulse: "ds:animate-[spinner-pulse_var(--spinner-duration)_ease-in-out_infinite]",
|
|
107
108
|
chase: "ds:animate-[spinner-chase_var(--spinner-duration)_ease-out_infinite]",
|
|
108
|
-
prism: "ds:animate-[spinner-prism_var(--spinner-duration)_linear_infinite] ds:motion-reduce:fill-[var(--primary)]"
|
|
109
|
+
prism: "ds:animate-[spinner-prism_var(--spinner-duration)_linear_infinite] ds:motion-reduce:fill-[var(--primary)]",
|
|
110
|
+
// No animation — the brand mark at rest (a static logo glyph). Inherits
|
|
111
|
+
// currentColor via the base `fill-current`.
|
|
112
|
+
static: ""
|
|
109
113
|
},
|
|
110
114
|
position: {
|
|
111
115
|
top: "ds:[--spinner-position:0]",
|
|
@@ -213,4 +217,4 @@ v.displayName = "Spinner";
|
|
|
213
217
|
export {
|
|
214
218
|
v as S
|
|
215
219
|
};
|
|
216
|
-
//# sourceMappingURL=spinner-
|
|
220
|
+
//# sourceMappingURL=spinner-OjQNn8oN.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spinner-OjQNn8oN.js","sources":["../../src/components/spinner/spinner.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\n\nconst spinnerVariants = cva('ds:inline-block ds:shrink-0 ds:text-current', {\n variants: {\n size: {\n sm: 'ds:size-3',\n md: 'ds:size-4',\n lg: 'ds:size-5',\n },\n variant: {\n pulse: '',\n chase: '',\n prism: '',\n static: '',\n },\n speed: {\n slower: '',\n slow: '',\n normal: '',\n fast: '',\n faster: '',\n },\n },\n compoundVariants: [\n {\n variant: 'pulse',\n speed: 'slower',\n class: 'ds:[--spinner-duration:2400ms]',\n },\n {\n variant: 'pulse',\n speed: 'slow',\n class: 'ds:[--spinner-duration:1800ms]',\n },\n {\n variant: 'pulse',\n speed: 'normal',\n class: 'ds:[--spinner-duration:1200ms]',\n },\n { variant: 'pulse', speed: 'fast', class: 'ds:[--spinner-duration:900ms]' },\n {\n variant: 'pulse',\n speed: 'faster',\n class: 'ds:[--spinner-duration:600ms]',\n },\n {\n variant: 'chase',\n speed: 'slower',\n class: 'ds:[--spinner-duration:2400ms]',\n },\n {\n variant: 'chase',\n speed: 'slow',\n class: 'ds:[--spinner-duration:1800ms]',\n },\n {\n variant: 'chase',\n speed: 'normal',\n class: 'ds:[--spinner-duration:1200ms]',\n },\n { variant: 'chase', speed: 'fast', class: 'ds:[--spinner-duration:900ms]' },\n {\n variant: 'chase',\n speed: 'faster',\n class: 'ds:[--spinner-duration:600ms]',\n },\n // prism runs 2× so each of the 4 brand hues has room to read.\n {\n variant: 'prism',\n speed: 'slower',\n class: 'ds:[--spinner-duration:4800ms]',\n },\n {\n variant: 'prism',\n speed: 'slow',\n class: 'ds:[--spinner-duration:3600ms]',\n },\n {\n variant: 'prism',\n speed: 'normal',\n class: 'ds:[--spinner-duration:2400ms]',\n },\n {\n variant: 'prism',\n speed: 'fast',\n class: 'ds:[--spinner-duration:1800ms]',\n },\n {\n variant: 'prism',\n speed: 'faster',\n class: 'ds:[--spinner-duration:1200ms]',\n },\n ],\n defaultVariants: { size: 'md', variant: 'pulse', speed: 'normal' },\n});\n\nconst shapeVariants = cva(\n [\n 'ds:fill-current',\n 'ds:[transform-box:fill-box] ds:[transform-origin:center]',\n 'ds:motion-reduce:animate-none',\n 'ds:[animation-delay:calc(var(--spinner-duration)/4*var(--spinner-position))]',\n ].join(' '),\n {\n variants: {\n variant: {\n pulse:\n 'ds:animate-[spinner-pulse_var(--spinner-duration)_ease-in-out_infinite]',\n chase:\n 'ds:animate-[spinner-chase_var(--spinner-duration)_ease-out_infinite]',\n prism:\n 'ds:animate-[spinner-prism_var(--spinner-duration)_linear_infinite] ds:motion-reduce:fill-[var(--primary)]',\n // No animation — the brand mark at rest (a static logo glyph). Inherits\n // currentColor via the base `fill-current`.\n static: '',\n },\n position: {\n top: 'ds:[--spinner-position:0]',\n right: 'ds:[--spinner-position:1]',\n bottom: 'ds:[--spinner-position:2]',\n left: 'ds:[--spinner-position:3]',\n },\n },\n defaultVariants: { variant: 'pulse', position: 'top' },\n },\n);\n\nexport type SpinnerVariant = 'pulse' | 'chase' | 'prism' | 'static';\nexport type SpinnerSpeed = 'slower' | 'slow' | 'normal' | 'fast' | 'faster';\n\nexport interface SpinnerProps\n extends\n Omit<HTMLAttributes<HTMLSpanElement>, 'role' | 'children'>,\n VariantProps<typeof spinnerVariants> {\n size?: 'sm' | 'md' | 'lg';\n variant?: SpinnerVariant;\n speed?: SpinnerSpeed;\n label?: string;\n}\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(\n (\n {\n size = 'md',\n variant = 'pulse',\n speed = 'normal',\n label,\n className,\n ...props\n },\n ref,\n ) => {\n const { t } = useTranslation();\n const accessibleLabel = label ?? t('common.loading', 'Loading…');\n\n return (\n <span\n ref={ref}\n role=\"status\"\n aria-live=\"polite\"\n data-component=\"spinner\"\n className={spinnerVariants({ size, variant, speed, className })}\n {...props}\n >\n <svg aria-hidden=\"true\" viewBox=\"0 0 148 148\" className=\"ds:size-full\">\n <g\n data-shape=\"top\"\n className={shapeVariants({ variant, position: 'top' })}\n >\n <rect\n x=\"53.04\"\n y=\"2.54\"\n width=\"33.99\"\n height=\"49.34\"\n rx=\"4.56\"\n ry=\"4.56\"\n transform=\"translate(-4.66 19.05) rotate(-15)\"\n />\n </g>\n <g\n data-shape=\"right\"\n className={shapeVariants({ variant, position: 'right' })}\n >\n <rect\n x=\"96.12\"\n y=\"53.04\"\n width=\"49.34\"\n height=\"33.99\"\n rx=\"4.56\"\n ry=\"4.56\"\n transform=\"translate(-14.01 33.65) rotate(-15)\"\n />\n </g>\n <g\n data-shape=\"bottom\"\n className={shapeVariants({ variant, position: 'bottom' })}\n >\n <rect\n x=\"60.97\"\n y=\"96.12\"\n width=\"33.99\"\n height=\"49.34\"\n rx=\"4.56\"\n ry=\"4.56\"\n transform=\"translate(-28.61 24.29) rotate(-15)\"\n />\n </g>\n <g\n data-shape=\"left\"\n className={shapeVariants({ variant, position: 'left' })}\n >\n <path d=\"M47.82,59.56c-.65-2.43-3.15-3.87-5.58-3.22L3.38,66.75c-2.43.65-3.87,3.15-3.22,5.58l6.44,24.03c.65,2.43,3.15,3.87,5.58,3.22l38.86-10.41c2.43-.65,3.87-3.15,3.22-5.58l-6.44-24.03Z\" />\n </g>\n </svg>\n <span className=\"ds:sr-only\">{accessibleLabel}</span>\n </span>\n );\n },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["spinnerVariants","cva","shapeVariants","Spinner","forwardRef","size","variant","speed","label","className","props","ref","t","useTranslation","accessibleLabel","jsxs","jsx"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ import { c as V } from "./index-D2ZczOXr.js";
|
|
|
4
4
|
import { useTranslation as D } from "react-i18next";
|
|
5
5
|
import { u as F } from "./registry-nPAVE19X.js";
|
|
6
6
|
import { u as H } from "./index-CJE9uQmb.js";
|
|
7
|
-
import { S as q } from "./search-input-
|
|
7
|
+
import { S as q } from "./search-input-D3aMvi4l.js";
|
|
8
8
|
import { u as B } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
|
|
9
9
|
const U = {
|
|
10
10
|
id: "transcript-panel",
|
|
@@ -345,4 +345,4 @@ export {
|
|
|
345
345
|
te as T,
|
|
346
346
|
U as t
|
|
347
347
|
};
|
|
348
|
-
//# sourceMappingURL=transcript-panel-
|
|
348
|
+
//# sourceMappingURL=transcript-panel-B4HiC7ed.js.map
|