@marktiderman/genesis-ui 2.14.0 → 2.16.0

package/dist/components/layout/index.d.ts

@@ -1,17 +1,280 @@
-export { A as AppShell, a as AppShellOptions, b as AppShellPageHeader, c as AppShellProps, d as AppShellSubNavEnd, N as NavItem, P as ParentNavigation, S as SubNavItem, e as SubNavMode, f as SubNavTabs, g as SubNavTabsProps, U as UseAppShellSubNavOptions, u as useAppShellSubNav } from '../../AppShell-HCXpi6nv.js';
+export { A as AppShell, a as AppShellOptions, b as AppShellPageHeader, c as AppShellProps, d as AppShellSubNavEnd, N as NavItem, P as ParentNavigation, S as SubNavItem, e as SubNavMode, f as SubNavTabs, g as SubNavTabsProps, U as UseAppShellSubNavOptions, u as useAppShellSubNav } from '../../AppShell-C88Uj7kT.js';
 export { G as GenesisLinkProps, L as LinkComponent } from '../../navigation-vmFJ6r1m.js';
 export { P as PageHeader, a as PageHeaderOptions, b as PageHeaderProps } from '../../PageHeader-V9lVkZtF.js';
 export { DetailPage, DetailPageProps } from './detail-page.js';
 export { FormPage, FormPageProps } from './form-page.js';
 export { D as DashboardPage, a as DashboardPageProps, G as Grid, b as GridProps, g as gridVariants } from '../../dashboard-page-C0TihRl5.js';
 export { SettingsPage, SettingsPageProps, SettingsPageSection } from './settings-page.js';
-export { C as Container, a as ContainerProps, G as GAP_CLASSES, S as Section, b as SectionProps, c as SpaceToken, d as Stack, e as StackProps, f as containerVariants, s as sectionHeadingVariants, g as spaceScale, h as stackVariants } from '../../spacing-BS6qECD4.js';
+export { BuilderLayout, BuilderLayoutProps, BuilderLayoutSlotProps } from './builder-layout.js';
+import { a as ContainerProps } from '../../spacing-BS6qECD4.js';
+export { C as Container, G as GAP_CLASSES, S as Section, b as SectionProps, c as SpaceToken, d as Stack, e as StackProps, f as containerVariants, s as sectionHeadingVariants, g as spaceScale, h as stackVariants } from '../../spacing-BS6qECD4.js';
 export { S as Split, a as SplitBreakpoint, b as SplitProps, c as SplitRatio, s as splitVariants } from '../../split-Dk9f4Mi0.js';
 export { Band, BandLead, BandLeadProps, BandProps, Display, DisplayProps, bandVariants, displayVariants, leadVariants } from './band.js';
+import * as React from 'react';
+import { Slots, SlotPropsFor } from '@marktiderman/genesis-core/slots';
 export { NavigationNode, ResolvedNavigation, resolveNavigation } from '@marktiderman/genesis-core/navigation';
-import 'react';
 import 'lucide-react';
 import '../../view-toggle-CahQ87PW.js';
 import '../../hooks/use-view-settings.js';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
+
+/**
+ * The brand block above the card. Same fields as native `AuthBrandingProps`
+ * (`logo`, `headline`, `subhead`), except that `headline` is required here:
+ * it is the page's `<h1>`.
+ */
+interface AuthPageBrandingProps {
+    /** Brand mark (logo node). */
+    logo?: React.ReactNode;
+    /** "Sign in", "Reset your password", "You're invited". Renders as the page's h1. */
+    headline: React.ReactNode;
+    /** One line under the headline. */
+    subhead?: React.ReactNode;
+    testID?: string;
+}
+/** The parts of an {@link AuthPage} that `slots` and `slotProps` reach. Names match native `AuthScreenSlotMap`. */
+type AuthPageSlotMap = {
+    branding: AuthPageBrandingProps & {
+        testID: string;
+    };
+    social: {
+        children: React.ReactNode;
+        testID: string;
+    };
+    footer: {
+        children: React.ReactNode;
+        testID: string;
+    };
+};
+interface AuthPageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Logo, headline (h1) and subhead above the card. */
+    branding: AuthPageBrandingProps;
+    /** Sign-in provider buttons (Google, Apple…), above the form inside the card. */
+    social?: React.ReactNode;
+    /** The form: sign-in, sign-up, reset, invite acceptance, verify. The card's body. */
+    children?: React.ReactNode;
+    /** Below the card: "Forgot password?", "Create account". */
+    footer?: React.ReactNode;
+    /** The small print under everything: terms and privacy. */
+    legal?: React.ReactNode;
+    /**
+     * A panel beside the card on wide screens (an illustration, a quote, a
+     * product shot). Hidden below the `lg` breakpoint, where the card is the
+     * whole page.
+     */
+    aside?: React.ReactNode;
+    /** Which side `aside` sits on. Default `"end"`. */
+    asidePosition?: "start" | "end";
+    /** Replace (a component) or drop (`null`) one part. */
+    slots?: Slots<AuthPageSlotMap>;
+    /** More props for a default part, merged over what the page passes. */
+    slotProps?: SlotPropsFor<AuthPageSlotMap>;
+    /** testID on the root. Default `"auth-page"`; parts use `${testID}-branding`, `-card`, `-social`, `-footer`, `-legal`, `-aside`. */
+    testID?: string;
+}
+/**
+ * AuthPage — the web counterpart of native `AuthScreen`: a whole-screen,
+ * centred card for sign-in, sign-up, password reset, invite acceptance and
+ * email verification.
+ *
+ * ```tsx
+ * <AuthPage
+ *   branding={{ logo: <Logo />, headline: "Sign in", subhead: "Welcome back." }}
+ *   footer={<><a href="/reset">Forgot password?</a> · <a href="/sign-up">Create account</a></>}
+ *   legal={<>By continuing you agree to the <a href="/terms">terms</a>.</>}
+ *   aside={<img src={hero} alt="" />}
+ * >
+ *   <SignInForm />
+ * </AuthPage>
+ * ```
+ *
+ * The card column is a `<main>` landmark and the headline is its single
+ * `<h1>`, so a screen reader lands on the form's purpose. The page fills the
+ * viewport (`min-height: 100dvh`) and the card shrinks to the screen with a
+ * 16px gutter, so nothing scrolls sideways at 375px.
+ *
+ * Native `AuthScreen` takes `form` and `providers` as data and renders its
+ * own `AuthForm`; this one is a **layout**, so the form and the provider
+ * buttons are nodes the app passes. Slots are the same contract:
+ * replace or drop (`null`) `branding`, `social` or `footer`.
+ *
+ * @stability Beta
+ */
+declare const AuthPage: React.ForwardRefExoticComponent<AuthPageProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Brand theming for public pages: a host's brand object becomes CSS
+ * variables on a page root, so every Genesis component inside it (a
+ * `Button`, a focus ring, a link styled `text-primary`) picks up the accent
+ * without knowing a brand exists.
+ *
+ * The accent is the one colour a public page takes from outside the token
+ * set, and it is the one most likely to be unreadable: brand palettes are
+ * picked for logos, not for 14px text. Emerald `#10b981` with white text is
+ * 2.5:1, half of WCAG AA's 4.5:1. So the accent is never used as-is for
+ * text or for a button's fill. {@link accessibleAccent} keeps its hue and
+ * saturation and lowers its lightness until white text on it (and it as
+ * text on white) clears 4.5:1; the raw accent stays available for
+ * decoration (`--brand-accent`: a header rule, a border).
+ *
+ * Variables set (all HSL triplets, the same shape as Genesis tokens, so
+ * `hsl(var(--x))` works everywhere):
+ *
+ * - `--brand-accent`: the accent exactly as given. Decoration only.
+ * - `--brand-accent-strong`: the accessible shade. Text and fills.
+ * - `--brand-accent-foreground`: text on `--brand-accent-strong`.
+ * - `--primary`, `--primary-foreground`, `--ring`: the Genesis tokens,
+ *   pointed at the accessible shade, which is what makes nested components
+ *   follow the brand.
+ */
+/** What a host knows about the brand a public page belongs to. */
+interface PublicBrand {
+    /** Display name, shown in the header beside the logo (so the logo itself is decorative, `alt=""`). */
+    name: string;
+    /** Logo image URL. */
+    logoUrl?: string;
+    /**
+     * Accent colour: `#rgb`, `#rrggbb`, `rgb()`/`rgba()`, `hsl()`/`hsla()` or a
+     * bare token triplet like `"160 84% 39%"`. Alpha is ignored (the accent is
+     * treated as opaque). Invalid or absent: Genesis's own primary.
+     */
+    accent?: string;
+    /** Optional wide cover image above the header row. Decorative. */
+    headerImageUrl?: string;
+}
+/** An sRGB colour, 0-255 per channel. */
+interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/** WCAG AA for normal-size text. */
+declare const MIN_TEXT_CONTRAST = 4.5;
+/**
+ * Parses `#rgb`, `#rrggbb`, `rgb()`/`rgba()`, `hsl()`/`hsla()` (commas or
+ * spaces, optional `/` or `,` alpha, which is ignored) and bare HSL triplets
+ * like `"160 84% 39%"`. Anything else, including out-of-range channels: `null`.
+ * Never throws.
+ */
+declare function parseColor(input: string | undefined | null): Rgb | null;
+/** WCAG 2 relative luminance, 0 (black) to 1 (white). */
+declare function relativeLuminance({ r, g, b }: Rgb): number;
+/** WCAG 2 contrast ratio between two colours, 1 to 21. */
+declare function contrastRatio(a: Rgb, b: Rgb): number;
+/** The Genesis token shape: `"160 84% 39%"`, for `hsl(var(--x))`. */
+declare function toHslTriplet(color: Rgb): string;
+interface AccessibleAccent {
+    /** The accent as given. */
+    accent: Rgb;
+    /** The shade to use for text on white and for fills under white text. Equals `accent` when it already passes. */
+    strong: Rgb;
+    /**
+     * `strong` as the exact HSL triplet to emit (`"H S% L%"`, 0.1 precision).
+     * The contrast check runs on this value, not on the unrounded colour, so
+     * what the browser renders is what was checked.
+     */
+    strongTriplet: string;
+    /** Contrast of the given accent against the background. */
+    ratio: number;
+    /** Contrast of `strongTriplet`, as rendered, against the background (at least `minRatio`). */
+    strongRatio: number;
+    /** True when `strong` had to be darkened from `accent`. */
+    adjusted: boolean;
+}
+/**
+ * The contrast fallback. Returns the accent unchanged when its emitted
+ * triplet reaches `minRatio` against `background` (white by default);
+ * otherwise the same (rounded) hue and saturation at the highest lightness,
+ * to 0.1%, whose emitted triplet does. Every check runs on the value
+ * that is actually emitted, after rounding. It always ends: lightness 0 is
+ * black, 21:1 on white.
+ */
+declare function accessibleAccent(accent: Rgb | string, { background, minRatio }?: {
+    background?: Rgb;
+    minRatio?: number;
+}): AccessibleAccent | null;
+/**
+ * The CSS variables for a brand's accent, for a page root's `style`. Empty
+ * when the brand has no valid accent, so the page keeps Genesis's primary.
+ */
+declare function brandThemeStyle(brand: Pick<PublicBrand, "accent"> | undefined): React.CSSProperties;
+
+/** The parts of a {@link PublicPage} that `slots` and `slotProps` reach. */
+type PublicPageSlotMap = {
+    header: {
+        brand: PublicBrand;
+        testID: string;
+    };
+    footer: {
+        children: React.ReactNode;
+        poweredBy?: React.ReactNode;
+        testID: string;
+    };
+};
+interface PublicPageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * The brand the page belongs to. Its header (logo, name, cover image) shows
+     * at the top, and its `accent` themes the page: see `brandThemeStyle`.
+     */
+    brand?: PublicBrand;
+    /** Optional page heading, rendered as the page's `<h1>` above the content. Leave it out when the content brings its own (a form's title). */
+    title?: React.ReactNode;
+    /** Supporting copy under `title`. */
+    description?: React.ReactNode;
+    /** Width of the content column: a `Container` size. Default `"sm"`. */
+    maxWidth?: NonNullable<ContainerProps["size"]>;
+    /**
+     * Who runs the page, as "Powered by …" in the footer (a name or a link).
+     * Leave it out, or pass `false`, to hide it.
+     */
+    poweredBy?: React.ReactNode;
+    /** More footer content: privacy and terms links, an address. */
+    footer?: React.ReactNode;
+    /**
+     * For an iframe: no header or footer chrome, a transparent background and
+     * no full-viewport height, so the frame is as tall as its content. The
+     * brand accent still applies. A host usually sets it from `?embed=1`.
+     */
+    embedded?: boolean;
+    /** Replace (a component) or drop (`null`) the header or footer. */
+    slots?: Slots<PublicPageSlotMap>;
+    /** More props for a default part, merged over what the page passes. */
+    slotProps?: SlotPropsFor<PublicPageSlotMap>;
+    /** testID on the root. Default `"public-page"`; parts use `${testID}-header`, `-main`, `-footer`. */
+    testID?: string;
+}
+/**
+ * PublicPage — a page anyone can open without signing in: a public form, a
+ * QR poster, a landing page. A brand header, one content column, and a
+ * "Powered by …" footer, themed from a brand object.
+ *
+ * ```tsx
+ * <PublicPage
+ *   brand={{ name: "Riverside Physio", logoUrl, accent: "#10b981" }}
+ *   poweredBy={<a href="https://example.com">Example</a>}
+ *   embedded={searchParams.get("embed") === "1"}
+ * >
+ *   <Form … />
+ * </PublicPage>
+ * ```
+ *
+ * The brand's accent becomes `--primary` (darkened when it fails 4.5:1 on
+ * white) on the page root, so a `Button` or link inside follows the brand
+ * with no props. The check is against white, Genesis's light background;
+ * under a `.dark` theme the fill stays readable (white on the shade) but
+ * accent-coloured text may not, so public pages are best served light.
+ *
+ * `embedded` is the frame-ancestors case. It drops the header and footer,
+ * the background and `min-height: 100dvh` (inside an iframe the viewport is
+ * the frame, so a full-height page would never let the frame shrink to its
+ * content).
+ *
+ * This is a **layout**: it positions content and binds to nothing. The
+ * content column is a `Container` for the one-home reason.
+ *
+ * @stability Beta
+ */
+declare const PublicPage: React.ForwardRefExoticComponent<PublicPageProps & React.RefAttributes<HTMLDivElement>>;
+
+export { type AccessibleAccent, AuthPage, type AuthPageBrandingProps, type AuthPageProps, type AuthPageSlotMap, ContainerProps, MIN_TEXT_CONTRAST, type PublicBrand, PublicPage, type PublicPageProps, type PublicPageSlotMap, type Rgb, accessibleAccent, brandThemeStyle, contrastRatio, parseColor, relativeLuminance, toHslTriplet };

package/dist/components/layout/index.js

@@ -1,4 +1,4 @@
-export { AppShell, AppShellPageHeader, AppShellSubNavEnd, PageHeader, SubNavTabs, useAppShellSubNav } from '../../chunk-5OFA2CQR.js';
+export { AppShell, AppShellPageHeader, AppShellSubNavEnd, PageHeader, SubNavTabs, useAppShellSubNav } from '../../chunk-C2IPSMNE.js';
 import '../../chunk-46TZGMFW.js';
 export { Stack, stackVariants } from '../../chunk-ORCI5SVM.js';
 import '../../chunk-B2GIBUQD.js';
@@ -6,10 +6,13 @@ import '../../chunk-NPNADZHM.js';
 import '../../chunk-G5YKBPBF.js';
 import '../../chunk-FK42ZGGV.js';
 import '../../chunk-22XB3Q6H.js';
+import '../../chunk-NWSCYLPT.js';
 import '../../chunk-QJ6P2DW6.js';
 import '../../chunk-27ELYTGE.js';
 import '../../chunk-F47U5KNW.js';
+import { Container } from '../../chunk-ZHCP2RZP.js';
 export { Band, BandLead, Container, Display, bandVariants, containerVariants, displayVariants, leadVariants } from '../../chunk-ZHCP2RZP.js';
+export { BuilderLayout } from '../../chunk-TP6QNFDG.js';
 export { DashboardPage, Grid, gridVariants } from '../../chunk-ARJI2JUV.js';
 export { DetailPage } from '../../chunk-AFZ76Q26.js';
 export { FormPage } from '../../chunk-MPI33I4K.js';
@@ -17,9 +20,366 @@ import '../../chunk-OZZTPE7F.js';
 export { Section, SettingsPage, sectionHeadingVariants } from '../../chunk-P64MFQXZ.js';
 export { Split, splitVariants } from '../../chunk-D2LIXA2Y.js';
 export { GAP_CLASSES, spaceScale } from '../../chunk-AVFZ4P4B.js';
-import '../../chunk-NWSCYLPT.js';
-import '../../chunk-NZ5WBA4R.js';
+import { cn } from '../../chunk-NZ5WBA4R.js';
 export { resolveNavigation } from '../../chunk-J45FHL7D.js';
 import '../../chunk-424PT5DM.js';
+import * as React from 'react';
+import { renderSlot } from '@marktiderman/genesis-core/slots';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var AuthPage = React.forwardRef(
+  ({
+    branding,
+    social,
+    children,
+    footer,
+    legal,
+    aside,
+    asidePosition = "end",
+    slots = {},
+    slotProps = {},
+    testID = "auth-page",
+    className,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "auth-page",
+      "data-testid": testID,
+      className: cn(
+        "flex min-h-dvh w-full min-w-0 bg-background text-foreground",
+        aside ? "lg:grid lg:grid-cols-2" : null,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "main",
+          {
+            "data-slot": "auth-page-main",
+            className: "flex min-w-0 flex-1 flex-col items-center justify-center px-4 py-10 sm:px-6",
+            children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-sm min-w-0 flex-col gap-6", children: [
+              renderSlot(
+                DefaultBranding,
+                slots.branding,
+                { ...branding, testID: branding.testID ?? `${testID}-branding` },
+                slotProps.branding
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "auth-page-card",
+                  "data-testid": `${testID}-card`,
+                  className: "flex min-w-0 flex-col gap-6 rounded-xl border border-border bg-card p-6 text-card-foreground shadow-sm",
+                  children: [
+                    social ? renderSlot(DefaultSocial, slots.social, { children: social, testID: `${testID}-social` }, slotProps.social) : null,
+                    children
+                  ]
+                }
+              ),
+              footer ? renderSlot(DefaultFooter, slots.footer, { children: footer, testID: `${testID}-footer` }, slotProps.footer) : null,
+              legal ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  "data-slot": "auth-page-legal",
+                  "data-testid": `${testID}-legal`,
+                  className: "text-center text-xs text-muted-foreground",
+                  children: legal
+                }
+              ) : null
+            ] })
+          }
+        ),
+        aside ? /* @__PURE__ */ jsx(
+          "aside",
+          {
+            "data-slot": "auth-page-aside",
+            "data-testid": `${testID}-aside`,
+            className: cn(
+              "relative hidden min-w-0 overflow-hidden bg-muted lg:flex lg:items-center lg:justify-center",
+              asidePosition === "start" ? "lg:order-first" : null
+            ),
+            children: aside
+          }
+        ) : null
+      ]
+    }
+  )
+);
+AuthPage.displayName = "AuthPage";
+function DefaultBranding({ logo, headline, subhead, testID }) {
+  return /* @__PURE__ */ jsxs("header", { "data-slot": "auth-page-branding", "data-testid": testID, className: "flex flex-col items-center gap-3 text-center", children: [
+    logo ? /* @__PURE__ */ jsx("div", { "data-testid": `${testID}-logo`, className: "mb-1", children: logo }) : null,
+    /* @__PURE__ */ jsx("h1", { "data-testid": `${testID}-headline`, className: "text-2xl font-bold tracking-tight break-words", children: headline }),
+    subhead ? /* @__PURE__ */ jsx("p", { "data-testid": `${testID}-subhead`, className: "text-sm text-muted-foreground", children: subhead }) : null
+  ] });
+}
+function DefaultSocial({ children, testID }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "auth-page-social", "data-testid": testID, className: "flex flex-col gap-2", children });
+}
+function DefaultFooter({ children, testID }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "auth-page-footer",
+      "data-testid": testID,
+      className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-center text-sm text-muted-foreground",
+      children
+    }
+  );
+}
+
+// src/components/layout/brand-theme.ts
+var MIN_TEXT_CONTRAST = 4.5;
+var WHITE = { r: 255, g: 255, b: 255 };
+var NUM = String.raw`[+-]?(?:\d+\.?\d*|\.\d+)`;
+var HUE = `(${NUM})(?:deg)?`;
+var PCT = `(${NUM})%?`;
+var ALPHA = String.raw`(?:\s*[,/]\s*${NUM}%?)?`;
+var SEP = String.raw`(?:\s*,\s*|\s+)`;
+var HSL_FN = new RegExp(String.raw`^hsla?\(\s*${HUE}${SEP}${PCT}${SEP}${PCT}${ALPHA}\s*\)$`);
+var HSL_BARE = new RegExp(String.raw`^${HUE}\s+(${NUM})%\s+(${NUM})%$`);
+function parseColor(input) {
+  if (typeof input !== "string") return null;
+  const value = input.trim().toLowerCase();
+  if (!value) return null;
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/.exec(value);
+  if (hex) {
+    const digits = hex[1];
+    const full = digits.length === 3 ? digits.replace(/./g, (c) => c + c) : digits;
+    return {
+      r: parseInt(full.slice(0, 2), 16),
+      g: parseInt(full.slice(2, 4), 16),
+      b: parseInt(full.slice(4, 6), 16)
+    };
+  }
+  const fn = /^rgba?\(\s*(\d{1,3})[\s,]+(\d{1,3})[\s,]+(\d{1,3})\s*(?:[,/]\s*[\d.]+%?\s*)?\)$/.exec(value);
+  if (fn) {
+    const [r, g, b] = [fn[1], fn[2], fn[3]].map(Number);
+    if ([r, g, b].every((c) => c <= 255)) return { r, g, b };
+    return null;
+  }
+  const hsl = HSL_FN.exec(value) ?? HSL_BARE.exec(value);
+  if (hsl) {
+    const [h, sat, l] = [hsl[1], hsl[2], hsl[3]].map(Number);
+    if (![h, sat, l].every(Number.isFinite) || sat < 0 || sat > 100 || l < 0 || l > 100) return null;
+    return hslToRgb({ h, s: sat, l });
+  }
+  return null;
+}
+function relativeLuminance({ r, g, b }) {
+  const lin = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+function contrastRatio(a, b) {
+  const [hi, lo] = [relativeLuminance(a), relativeLuminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+function rgbToHsl({ r, g, b }) {
+  const [rn, gn, bn] = [r / 255, g / 255, b / 255];
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const l = (max + min) / 2;
+  if (max === min) return { h: 0, s: 0, l: l * 100 };
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h;
+  if (max === rn) h = (gn - bn) / d + (gn < bn ? 6 : 0);
+  else if (max === gn) h = (bn - rn) / d + 2;
+  else h = (rn - gn) / d + 4;
+  return { h: h * 60, s: s * 100, l: l * 100 };
+}
+function hslToRgb(hsl) {
+  const { r, g, b } = hslToRgbExact(hsl);
+  return { r: Math.round(r), g: Math.round(g), b: Math.round(b) };
+}
+function toHslTriplet(color) {
+  const { h, s, l } = rgbToHsl(color);
+  return `${round(h)} ${round(s)}% ${round(l)}%`;
+}
+var round = (n) => Math.round(n * 10) / 10;
+function hslToRgbExact({ h, s, l }) {
+  const hn = (h % 360 + 360) % 360;
+  const sn = s / 100;
+  const ln = l / 100;
+  const k = (n) => (n + hn / 30) % 12;
+  const a = sn * Math.min(ln, 1 - ln);
+  const f = (n) => ln - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  return { r: f(0) * 255, g: f(8) * 255, b: f(4) * 255 };
+}
+function emittedRatio(hsl, background) {
+  return Math.min(contrastRatio(hslToRgbExact(hsl), background), contrastRatio(hslToRgb(hsl), background));
+}
+var tripletOf = ({ h, s, l }) => `${h} ${s}% ${l}%`;
+function accessibleAccent(accent, { background = WHITE, minRatio = MIN_TEXT_CONTRAST } = {}) {
+  const base = typeof accent === "string" ? parseColor(accent) : accent;
+  if (!base) return null;
+  const ratio = contrastRatio(base, background);
+  const exact = rgbToHsl(base);
+  const h = round(exact.h);
+  const s = round(exact.s);
+  const l = round(exact.l);
+  const emitted = emittedRatio({ h, s, l }, background);
+  if (emitted >= minRatio) {
+    return { accent: base, strong: base, strongTriplet: tripletOf({ h, s, l }), ratio, strongRatio: emitted, adjusted: false };
+  }
+  const start = Math.round(l * 10);
+  const pick = (tenths) => {
+    const candidate = { h, s, l: tenths / 10 };
+    const strongRatio = emittedRatio(candidate, background);
+    return strongRatio >= minRatio ? { candidate, strongRatio } : null;
+  };
+  for (let coarse = start - 10; coarse > -10; coarse -= 10) {
+    const floor = Math.max(coarse, 0);
+    const passing = pick(floor);
+    if (!passing) continue;
+    let best = passing;
+    for (let fine = Math.min(floor + 9, start - 1); fine > floor; fine -= 1) {
+      const found = pick(fine);
+      if (found) {
+        best = found;
+        break;
+      }
+    }
+    const { candidate, strongRatio } = best;
+    return { accent: base, strong: hslToRgb(candidate), strongTriplet: tripletOf(candidate), ratio, strongRatio, adjusted: true };
+  }
+  const black = { h: 0, s: 0, l: 0 };
+  return {
+    accent: base,
+    strong: { r: 0, g: 0, b: 0 },
+    strongTriplet: tripletOf(black),
+    ratio,
+    strongRatio: emittedRatio(black, background),
+    adjusted: true
+  };
+}
+function brandThemeStyle(brand) {
+  const result = brand?.accent ? accessibleAccent(brand.accent) : null;
+  if (!result) return {};
+  const strong = result.strongTriplet;
+  const foreground = toHslTriplet(WHITE);
+  return {
+    "--brand-accent": toHslTriplet(result.accent),
+    "--brand-accent-strong": strong,
+    "--brand-accent-foreground": foreground,
+    "--primary": strong,
+    "--primary-foreground": foreground,
+    "--ring": strong
+  };
+}
+var PublicPage = React.forwardRef(
+  ({
+    brand,
+    title,
+    description,
+    maxWidth = "sm",
+    poweredBy,
+    footer,
+    embedded = false,
+    slots = {},
+    slotProps = {},
+    testID = "public-page",
+    className,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const showPoweredBy = poweredBy !== void 0 && poweredBy !== null && poweredBy !== false;
+    const hasFooter = showPoweredBy || footer !== void 0 && footer !== null && footer !== false;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "public-page",
+        "data-embedded": embedded ? "true" : void 0,
+        "data-testid": testID,
+        className: cn(
+          "flex w-full min-w-0 flex-col text-foreground",
+          embedded ? "bg-transparent" : "min-h-dvh bg-background",
+          className
+        ),
+        style: { ...brandThemeStyle(brand), ...style },
+        ...props,
+        children: [
+          !embedded && brand ? renderSlot(DefaultHeader, slots.header, { brand, testID: `${testID}-header` }, slotProps.header) : null,
+          /* @__PURE__ */ jsx(
+            "main",
+            {
+              "data-slot": "public-page-main",
+              "data-testid": `${testID}-main`,
+              className: cn("flex min-w-0 flex-1 flex-col", embedded ? "py-4" : "py-8 sm:py-12"),
+              children: /* @__PURE__ */ jsxs(Container, { size: maxWidth, className: "flex min-w-0 flex-col gap-6", children: [
+                title ? /* @__PURE__ */ jsxs("div", { "data-slot": "public-page-heading", className: "flex min-w-0 flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight break-words sm:text-3xl", children: title }),
+                  description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description }) : null
+                ] }) : null,
+                children
+              ] })
+            }
+          ),
+          !embedded && hasFooter ? renderSlot(
+            DefaultFooter2,
+            slots.footer,
+            { children: footer, poweredBy: showPoweredBy ? poweredBy : void 0, testID: `${testID}-footer` },
+            slotProps.footer
+          ) : null
+        ]
+      }
+    );
+  }
+);
+PublicPage.displayName = "PublicPage";
+function DefaultHeader({ brand, testID }) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      "data-slot": "public-page-header",
+      "data-testid": testID,
+      className: "border-b border-border border-t-4 border-t-[hsl(var(--brand-accent,var(--primary)))] bg-background",
+      children: [
+        brand.headerImageUrl ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: brand.headerImageUrl,
+            alt: "",
+            "data-slot": "public-page-cover",
+            className: "block h-28 w-full object-cover sm:h-44"
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(Container, { size: "lg", className: "flex min-h-14 items-center gap-3 py-3", children: [
+          brand.logoUrl ? (
+            // The name is beside it, so the image is decorative: an alt of the
+            // name would read it twice.
+            /* @__PURE__ */ jsx("img", { src: brand.logoUrl, alt: "", "data-slot": "public-page-logo", className: "h-8 w-auto max-w-32 shrink-0 object-contain" })
+          ) : null,
+          /* @__PURE__ */ jsx("span", { "data-slot": "public-page-brand-name", className: "min-w-0 truncate font-semibold", children: brand.name })
+        ] })
+      ]
+    }
+  );
+}
+function DefaultFooter2({ children, poweredBy, testID }) {
+  return /* @__PURE__ */ jsx("footer", { "data-slot": "public-page-footer", "data-testid": testID, className: "border-t border-border", children: /* @__PURE__ */ jsxs(
+    Container,
+    {
+      size: "lg",
+      className: "flex flex-col items-center gap-2 py-6 text-center text-sm text-muted-foreground sm:flex-row sm:justify-between sm:text-left",
+      children: [
+        children ? /* @__PURE__ */ jsx("div", { className: "min-w-0", children }) : null,
+        poweredBy ? /* @__PURE__ */ jsxs("p", { "data-slot": "public-page-powered-by", className: "sm:ml-auto", children: [
+          "Powered by ",
+          poweredBy
+        ] }) : null
+      ]
+    }
+  ) });
+}
+
+export { AuthPage, MIN_TEXT_CONTRAST, PublicPage, accessibleAccent, brandThemeStyle, contrastRatio, parseColor, relativeLuminance, toHslTriplet };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map