@patientos/website-kit 0.1.0

package/dist/contrast.d.ts

@@ -0,0 +1,63 @@
+/** sRGB channels, 0–255. */
+interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/**
+ * Parse `#rgb` / `#rrggbb` (case-insensitive, `#` optional). Anything else — a named
+ * colour, `rgb()`, an 8-digit hex with alpha, junk — returns null, so the caller falls
+ * back rather than guessing at a colour it cannot reason about.
+ */
+declare function parseHexColor(hex: string): Rgb | null;
+/**
+ * WCAG 2.x relative luminance: linearise each sRGB channel, then weight by the
+ * coefficients in the spec (§ "relative luminance").
+ */
+declare function relativeLuminance(rgb: Rgb): number;
+/**
+ * The WCAG contrast ratio between two colours, 1 (identical) … 21 (black on white).
+ * An unparseable colour yields 1 — "no contrast", which fails every threshold, so a bad
+ * input can never be mistaken for a passing one.
+ */
+declare function contrastRatio(a: string, b: string): number;
+/** White, and the app's near-black ink — the only two foregrounds we will emit. */
+declare const WHITE = "#ffffff";
+declare const INK = "#1b2733";
+/**
+ * The foreground to put ON a clinic brand colour: whichever of white / near-black has the
+ * higher contrast against it.
+ *
+ * Two candidates, not a spectrum: these are the two the app's own surfaces already use,
+ * so a themed island still looks like the product. An unparseable background falls back
+ * to the ink (the safer default on the light surfaces these islands live on).
+ */
+declare function deriveForeground(bg: string): typeof WHITE | typeof INK;
+/** A brand background together with a foreground that is legible ON it. */
+interface PrimaryPair {
+    bg: string;
+    fg: typeof WHITE | typeof INK;
+}
+/**
+ * The background + foreground for a brand surface that CARRIES TEXT — the flow's primary
+ * CTA, the one control a patient must find on every screen.
+ *
+ * `deriveForeground` picks the better of two candidates but never checks that it clears
+ * anything, and mid-luminance brands — most clinic pinks, magentas, teals and oranges —
+ * fail BOTH: white on #e92095 is 4.11:1, on #d946ef 4.39:1, under a 4.5 floor. So here the
+ * BACKGROUND moves too, until the pair passes.
+ *
+ * The walk only ever DARKENS, and pins white. Lightening would satisfy the ink candidate,
+ * but this same token is the ink on the light card (`--sk-flow-accent-ink`, the step dots,
+ * the booking link) where a pastel fails in turn, and a washed-out CTA reads as disabled.
+ * Only mid-luminance brands can fail both candidates, so there is always headroom below —
+ * over the whole sRGB cube the walk converges in at most 5 steps. Scaling every channel by
+ * ONE factor holds the R:G:B ratio, so the hue is unchanged (≤0.2° of byte rounding) and
+ * #e92095 comes back as the clinic's pink, two steps darker.
+ *
+ * A brand that already clears the floor is returned EXACTLY as it came in — this must not
+ * move a single colour that was never broken.
+ */
+declare function derivePrimaryPair(brand: string): PrimaryPair;
+
+export { type PrimaryPair, type Rgb, contrastRatio, deriveForeground, derivePrimaryPair, parseHexColor, relativeLuminance };

package/dist/contrast.js

@@ -0,0 +1,15 @@
+import {
+  contrastRatio,
+  deriveForeground,
+  derivePrimaryPair,
+  parseHexColor,
+  relativeLuminance
+} from "./chunk-LCHW6XF4.js";
+import "./chunk-MLKGABMK.js";
+export {
+  contrastRatio,
+  deriveForeground,
+  derivePrimaryPair,
+  parseHexColor,
+  relativeLuminance
+};

package/dist/index.d.ts

@@ -0,0 +1,189 @@
+export { BPOINT_SCRIPT_ORIGIN, BPOINT_SCRIPT_URL, CONSULT_CHUNK_PATH, THIRD_PARTY_SCRIPT_ORIGINS, TURNSTILE_SCRIPT_ORIGIN, TURNSTILE_SCRIPT_URL } from './script-sources.js';
+import * as React from 'react';
+export { ISLAND_ATTR, ISLAND_PROPS_ATTR, Island, IslandProps, IslandRegistry, mountIslandsWith, readIslandProps } from './islands.js';
+export { ISLANDS, IslandName, mountIslands } from './islands-registry.js';
+export { B as BookingBlock, a as BookingBlockMarkerProps, b as BookingBlockProps, c as BookingTypeOption, C as Cart, d as CartMarkerProps, e as CartProps, f as CertificateFunnel, g as CertificateFunnelMarkerProps, h as CertificateFunnelProps, i as Checkout, j as CheckoutMarkerProps, k as CheckoutProps, F as FunnelPublicApi, l as FunnelServiceOption, S as Store, m as StoreMarkerProps, n as StoreProps } from './checkout-block-CrO7OxI9.js';
+export { P as PortalAccount, a as PortalAccountMarkerProps, b as PortalAccountProps, c as PortalAccountSurface, d as PortalPanel, e as PortalPanelMarkerProps, f as PortalPanelProps, g as PortalSurface } from './portal-account-EhOtLV5u.js';
+export { PatientSurfaceTheme, patientSurfaceTheme } from './patient-surface-theme.js';
+export { Rgb, contrastRatio, deriveForeground, parseHexColor, relativeLuminance } from './contrast.js';
+export { AnswerValue, Answers, ShowWhenCondition, evaluateShowWhen, visibleQuestions } from './show-when.js';
+
+/**
+ * Theme tokens for the website-kit.
+ *
+ * This kit is intentionally INDEPENDENT of the dashboard's Tailwind/shadcn
+ * theme (design decision D2). Tokens are plain CSS strings (colours / lengths)
+ * and are projected onto `--sk-*` custom properties at runtime. No Tailwind,
+ * no shadcn, no `app.css`.
+ */
+type WebsiteTheme = {
+    /** Primary brand colour (buttons, links, accents). */
+    brand: string;
+    /**
+     * Text/icon colour that sits on top of `brand`. **DERIVED, never supplied** —
+     * `resolveTheme` always recomputes it from `brand` by WCAG contrast
+     * (`deriveForeground`) and IGNORES any value passed in. Trusting a supplied
+     * foreground is how you ship white text on a pale-yellow brand; the token bag is
+     * written by the marketing seat (in practice an AI or an agency) with no reviewer
+     * in the loop, and these islands render medical surfaces. The field stays on the
+     * type because it is what `themeToCssVars` emits and what the CSS reads.
+     */
+    brandForeground: string;
+    /** Neutral surface colour (cards, bordered blocks). */
+    neutral: string;
+    /** Text colour that sits on top of `neutral`. */
+    neutralForeground: string;
+    /** Secondary accent colour. */
+    accent: string;
+    /** Page background. */
+    background: string;
+    /** Default body text colour. */
+    foreground: string;
+    /** Muted / secondary text colour. */
+    muted: string;
+    /** Body font stack. */
+    fontFamily: string;
+    /** Heading font stack. */
+    fontFamilyHeading: string;
+    /** Base body font size (rem/px string). */
+    fontSizeBase: string;
+    /** Small / caption size. */
+    fontSizeSm: string;
+    /** Large lead size. */
+    fontSizeLg: string;
+    /** Section heading size. */
+    fontSizeH2: string;
+    /** Hero heading size. */
+    fontSizeH1: string;
+    /** Base spacing unit (length string); the grid is multiples of this. */
+    spacingUnit: string;
+    /** Corner radius for cards/buttons. */
+    radius: string;
+};
+declare const defaultTheme: WebsiteTheme;
+/**
+ * Maps each theme key to its `--sk-*` custom property. The short aliases
+ * (`--sk-font`, `--sk-font-heading`) are what the compiled CSS reads.
+ */
+declare function themeToCssVars(theme: WebsiteTheme): Record<string, string>;
+/**
+ * Merge a partial theme over the defaults, then DERIVE `brandForeground` from the
+ * resolved `brand` (PAT-767).
+ *
+ * The derivation is unconditional: a supplied `brandForeground` is accepted by the
+ * type and then discarded. A clinic can choose its brand colour; it cannot choose
+ * unreadable text on top of it. An unparseable brand falls back to the app's ink
+ * (`deriveForeground`), so the result is always a real, legible colour.
+ */
+declare function resolveTheme(theme?: Partial<WebsiteTheme>): WebsiteTheme;
+type ThemeProviderProps = {
+    theme?: Partial<WebsiteTheme>;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'style'>;
+/**
+ * Wraps children in a `[data-sk-theme]` root that carries the `--sk-*` tokens
+ * as inline CSS vars. Pair with the compiled `website-kit.css` for styling.
+ */
+declare function ThemeProvider({ theme, children, className, ...rest }: ThemeProviderProps): React.ReactElement;
+
+type ContainerProps = React.HTMLAttributes<HTMLDivElement>;
+/** Centered, max-width content column with horizontal gutters. */
+declare function Container({ className, children, ...rest }: ContainerProps): React.ReactElement;
+type RowProps = React.HTMLAttributes<HTMLDivElement>;
+/** Horizontal flex row; wraps and gaps on the spacing unit. */
+declare function Row({ className, children, ...rest }: RowProps): React.ReactElement;
+type StackProps = React.HTMLAttributes<HTMLDivElement>;
+/** Vertical flex stack; gaps on the spacing unit. */
+declare function Stack({ className, children, ...rest }: StackProps): React.ReactElement;
+type WebsiteShellProps = {
+    theme?: Partial<WebsiteTheme>;
+    title?: string;
+    children?: React.ReactNode;
+};
+/**
+ * The ROOT layout for a generated clinic website. It emits its OWN minimal HTML
+ * document — it does NOT import or reference the dashboard shell or `app.css`
+ * (design decision D11). The kit's compiled stylesheet is loaded by `<link>`,
+ * theme tokens are injected as `:root` CSS vars, and a hydration entry script
+ * is referenced. Paths (`/website-kit.css`, `/main.js`) are what the isolate's
+ * bundler serves.
+ */
+declare function WebsiteShell({ theme, title, children, }: WebsiteShellProps): React.ReactElement;
+
+type ButtonVariant = 'solid' | 'outline' | 'ghost';
+type ButtonProps = {
+    href?: string;
+    variant?: ButtonVariant;
+    children?: React.ReactNode;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'target' | 'rel'>;
+/**
+ * Renders an `<a>` when `href` is set, otherwise a `<button>`. Styled by the
+ * `.sk-button` classes; pass `variant` to switch the visual treatment.
+ */
+declare function Button({ href, variant, className, children, target, rel, ...rest }: ButtonProps): React.ReactElement;
+type HeroProps = {
+    heading: string;
+    subheading?: string;
+    /** Background image URL only — no upload/file handling (v1 non-goal). */
+    image?: string;
+    /** Optional call-to-action rendered below the copy. */
+    cta?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLElement>, 'children'>;
+declare function Hero({ heading, subheading, image, cta, className, style, ...rest }: HeroProps): React.ReactElement;
+type SectionProps = {
+    title?: string;
+    /** Optional intro copy below the title. */
+    intro?: string;
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLElement>;
+declare function Section({ title, intro, children, className, ...rest }: SectionProps): React.ReactElement;
+type Service = {
+    title: string;
+    description: string;
+    /** Icon URL only — no upload/file handling (v1 non-goal). */
+    icon?: string;
+};
+type ServiceGridProps = {
+    services: Service[];
+} & React.HTMLAttributes<HTMLUListElement>;
+declare function ServiceGrid({ services, className, ...rest }: ServiceGridProps): React.ReactElement;
+type TeamMember = {
+    name: string;
+    role: string;
+    /** Photo URL only — no upload/file handling (v1 non-goal). */
+    photo?: string;
+};
+type TeamGridProps = {
+    members: TeamMember[];
+} & React.HTMLAttributes<HTMLUListElement>;
+declare function TeamGrid({ members, className, ...rest }: TeamGridProps): React.ReactElement;
+type HoursRow = {
+    day: string;
+    hours: string;
+};
+type HoursProps = {
+    rows: HoursRow[];
+} & React.HTMLAttributes<HTMLDListElement>;
+declare function Hours({ rows, className, ...rest }: HoursProps): React.ReactElement;
+type MapEmbedProps = {
+    /** A full embed URL. Mutually exclusive with `address`. */
+    src?: string;
+    /** A street address; turned into a Google Maps embed query. */
+    address?: string;
+    /** CSS height (length string). */
+    height?: string;
+    title?: string;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>;
+declare function MapEmbed({ src, address, height, title, className, style, ...rest }: MapEmbedProps): React.ReactElement;
+type FaqItem = {
+    q: string;
+    a: string;
+};
+type FAQProps = {
+    items: FaqItem[];
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function FAQ({ items, className, ...rest }: FAQProps): React.ReactElement;
+
+declare const WEBSITE_KIT_VERSION = "0.1.0";
+
+export { Button, type ButtonProps, type ButtonVariant, Container, type ContainerProps, FAQ, type FAQProps, type FaqItem, Hero, type HeroProps, Hours, type HoursProps, type HoursRow, MapEmbed, type MapEmbedProps, Row, type RowProps, Section, type SectionProps, type Service, ServiceGrid, type ServiceGridProps, Stack, type StackProps, TeamGrid, type TeamGridProps, type TeamMember, ThemeProvider, type ThemeProviderProps, WEBSITE_KIT_VERSION, WebsiteShell, type WebsiteShellProps, type WebsiteTheme, defaultTheme, resolveTheme, themeToCssVars };