Healthcare Center Card Map Rich
Provide the governed NexWell Healthcare Center Card Map Rich contract for product patterns interfaces.
Purpose
Provide the governed NexWell Healthcare Center Card Map Rich contract for product patterns interfaces.
Issue #123 is implementation authority; additive to and does not replace the Issue #121 Doctor Card, Healthcare Center Card, or Pricing Plan Card, which remain approved and unchanged. Owner-provided mobile screenshots are composition, hierarchy, and interaction references, not pixel-dimension or mobile-chrome constraints — each variant is itself responsive across desktop, tablet, and mobile Web. Consumers own data fetching, routing policy, supplied status meaning, business rules, geolocation, distance calculation, and commercial semantics; the Design System never fabricates rating, distance, hours, address, or map facts. Map Preview is a provider-neutral render slot and info/attribution surface built on the existing governed Popover and Sheet primitives; the Design System does not choose, render, or lock a map provider. Internal codes and unresolved facts are excluded.
When to use
Use Healthcare Center Card Map Rich only for its documented product patterns purpose.
When not to use
Do not repurpose Healthcare Center Card Map Rich as an unrelated interaction or bypass its tokens.
Anatomy
- trigger or container
- content
- state indicator
Specifications, variants, sizes, and states
Specifications
- Exact dimensions, padding, gaps, icon sizes, radius, and typography: source-verification-required.
- Implementation behavior is inspectable below; it is not evidence of founder approval.
Variants and sizes
default · missing image · map info open
source-verification-required: no governed component-specific size matrix is available
States
default · hover · focus-visible · pressed · loading · missing image · no distance · no rating · hours unavailable · address unavailable · map normal · map info open · map loading · map no-location · map unavailable · share · favorite · favorited · long content · desktop · tablet · mobile · RTL · high contrast
Measurements and typography
Every field is represented. A status is not a value: unresolved evidence cannot be converted into an implementation number.
source-verification-requiredNo approved exact value may be inferred.source-verification-requiredNo approved exact value may be inferred.source-verification-requiredNo approved exact value may be inferred.source-verification-requiredNo approved exact value may be inferred.source-verification-requiredNo approved exact value may be inferred.source-verification-requiredNo approved exact value may be inferred.State matrix
Actual implementation states are listed below. Requested universal states not supported by the component API remain explicitly unclaimed.
React and TypeScript API
Public properties
approved-current Generated from the package registry; controls expose only the supported subset listed here.
namesummaryimageUrllocationLabeldistanceKmratingavailabilitystatusLabelstatusVarianthoursLabeladdressLabelprofileHrefvisitLabelactionUnavailableshareLabelonSharefavoriteLabelfavoritedonFavoritemapPreviewloadingimport { HealthcareCenterCardMapRich } from "@nexwellaifactory/components";
// name
// summary
// imageUrl
// locationLabel
// distanceKm
// rating
// availability
// statusLabel
// statusVariant
// hoursLabel
// addressLabel
// profileHref
// visitLabel
// actionUnavailable
// shareLabel
// onShare
// favoriteLabel
// favorited
// onFavorite
// mapPreview
// loading
export function Example() {
return <HealthcareCenterCardMapRich />;
}Usage and content
Do
Use Healthcare Center Card Map Rich with a clear accessible name and evidence-backed behavior.
Don’t
Do not repurpose Healthcare Center Card Map Rich as an unrelated interaction or bypass its tokens.
Content rules
- Use concise, task-specific labels.
- Do not communicate state through color alone.
- Allow localized text to wrap without hiding critical actions.
Accessibility, keyboard, responsive, and RTL
Accessibility
- Programmatic name
- Programmatic state
- Logical focus order
- No color-only meaning
Keyboard
- Native behavior where available
- Arrow-key composite navigation where required
- Escape dismissal and focus restoration for overlays
Responsive and RTL
Reflows, scrolls, or becomes a bounded overlay without hiding critical actions.
Logical properties; arrow meaning follows spatial direction.
Actual package output
Interactive example
Vital Care Clinic
24 Wellness Avenue, Al Noor District, Dubai
Fictional review content for the organization-authored public summary slot.
Preview width changes the bounded canvas; use the RTL control below to inspect logical layout.
Token mapping and source evidence
Traceable implementation
Uber-derived structural evidence, adapted through approved NexWell decisions.
semantic colorfoundation spacingfoundation shapefoundation motiondocs/source-audit/component-evidence-matrix.csv :: healthcare-center-card-map-rich
Missing fields in the source remain documented source absence, not requirements invented by the implementation.
Evidence completeness
0 associated local source records. Statuses below come directly from the DS-13 Checkpoint 1 component evidence matrix.
Cross-platform implementation
React / TypeScript: current package API is shown above.
Flutter: source-verification-required — no canonical Flutter API or implementation mapping exists, and this web portal does not infer one.
AI agents: consume approved records only; preserve proposed and unresolved statuses and import the public component instead of recreating it.