@krizaka/ui 3.5.0 → 3.7.0

package/dist/marketing-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/marketing-layout/marketing-layout.tsx"],"sourcesContent":["// Server-safe. The page of a site (krizaka.com, a product's public pages): a link to skip to the content, the site's\n// bar, the page — its PageHero and Sections (@krizaka/ui/page) — and the footer. The bar floats over the hero\n// (`--kz-hero-top` clears it); everything shares the page frame (`--kz-page-max`, `--kz-page-gutter`).\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const marketingLayout = tv({\n  slots: {\n    root: \"flex min-h-dvh w-full flex-col bg-surface-0 text-fg\",\n    skip:\n      \"sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[60] focus:rounded-lg focus:bg-surface-1 focus:px-4 focus:py-2 \" +\n      \"focus:text-sm focus:font-semibold focus:text-fg focus:shadow-lg focus:outline-hidden focus:ring-2 focus:ring-ring\",\n    header: \"fixed inset-x-0 top-3 z-50 px-(--kz-page-gutter,16px) pointer-events-none *:pointer-events-auto\",\n    main: \"flex-1 outline-hidden\",\n  },\n});\nconst s = marketingLayout();\n\nexport type MarketingLayoutProps = React.ComponentProps<\"div\"> & {\n  /** The site's bar (a floating NavBar of @krizaka/ui/nav-bar). */\n  header: React.ReactNode;\n  /** The site's footer. */\n  footer?: React.ReactNode;\n  /** The words of the link that skips to the content (`Skip to content`). */\n  skipLabel: string;\n  /** The page: a PageHero, then Sections. */\n  children: React.ReactNode;\n};\n\n/** A site's page: skip link, floating bar, the page, the footer. */\nexport function MarketingLayout({ header, footer, skipLabel, className, children, ...props }: MarketingLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <a href=\"#content\" className={s.skip()}>\n        {skipLabel}\n      </a>\n      <div className={s.header()}>{header}</div>\n      <main id=\"content\" tabIndex={-1} className={s.main()}>\n        {children}\n      </main>\n      {footer}\n    </div>\n  );\n}\n"],"mappings":";AAIA,SAAS,UAAU;AA4Bf,SACE,KADF;AA1BG,IAAM,kBAAkB,GAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MACE;AAAA,IAEF,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AACF,CAAC;AACD,IAAM,IAAI,gBAAgB;AAcnB,SAAS,gBAAgB,EAAE,QAAQ,QAAQ,WAAW,WAAW,UAAU,GAAG,MAAM,GAAyB;AAClH,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,wBAAC,OAAE,MAAK,YAAW,WAAW,EAAE,KAAK,GAClC,qBACH;AAAA,IACA,oBAAC,SAAI,WAAW,EAAE,OAAO,GAAI,kBAAO;AAAA,IACpC,oBAAC,UAAK,IAAG,WAAU,UAAU,IAAI,WAAW,EAAE,KAAK,GAChD,UACH;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}
+{"version":3,"sources":["../src/skip-link/skip-link.tsx","../src/marketing-layout/marketing-layout.tsx"],"sourcesContent":["// Client (it moves focus). WCAG 2.4.1 Bypass Blocks: the first tab stop of a page, a link that skips the navigation and\n// lands on the content. Visually hidden until focused, then a pill above everything in the brand ring. The label is\n// passed translated; the target needs an `id` (and is made focusable, so focus really moves, router or not).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const skipLink = tv({\n  base:\n    \"sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-full focus:bg-surface-1 focus:px-4 focus:py-2 \" +\n    \"focus:text-sm focus:font-semibold focus:text-fg focus:no-underline focus:shadow-lg focus:outline-hidden focus:ring-2 focus:ring-ring\",\n});\n\nexport type SkipLinkProps = Omit<React.ComponentProps<\"a\">, \"href\"> & {\n  /**\n   * The content to land on: `#` and its `id`. The element becomes focusable (`tabindex=\"-1\"`) when it is not.\n   * @default \"#content\"\n   */\n  href?: `#${string}`;\n};\n\n/** A \"skip to content\" link: the first tab stop, hidden until focused; Enter moves focus to the target. */\nexport function SkipLink({ href = \"#content\", className, onClick, children, ...props }: SkipLinkProps) {\n  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n    const target = document.getElementById(decodeURIComponent(href.slice(1)));\n    if (!target) return;\n    if (!target.hasAttribute(\"tabindex\") && !target.matches(\"a[href], button, input, select, textarea, [contenteditable]\")) target.setAttribute(\"tabindex\", \"-1\");\n    target.focus();\n  };\n  return (\n    <a href={href} className={skipLink({ className })} onClick={handleClick} {...props}>\n      {children}\n    </a>\n  );\n}\n","// Server-safe. The page of a site (krizaka.com, a product's public pages): a link to skip to the content, the site's\n// bar, the page — its PageHero and Sections (@krizaka/ui/page) — and the footer. The bar floats over the hero\n// (`--kz-hero-top` clears it); everything shares the page frame (`--kz-page-max`, `--kz-page-gutter`).\nimport { SkipLink } from \"@krizaka/ui/skip-link\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const marketingLayout = tv({\n  slots: {\n    root: \"flex min-h-dvh w-full flex-col bg-surface-0 text-fg\",\n    header: \"fixed inset-x-0 top-3 z-50 px-(--kz-page-gutter,16px) pointer-events-none *:pointer-events-auto\",\n    main: \"flex-1 outline-hidden\",\n  },\n});\nconst s = marketingLayout();\n\nexport type MarketingLayoutProps = React.ComponentProps<\"div\"> & {\n  /** The site's bar (a floating NavBar of @krizaka/ui/nav-bar). */\n  header: React.ReactNode;\n  /** The site's footer. */\n  footer?: React.ReactNode;\n  /** The words of the link that skips to the content (`Skip to content`). */\n  skipLabel: string;\n  /** The page: a PageHero, then Sections. */\n  children: React.ReactNode;\n};\n\n/** A site's page: skip link, floating bar, the page, the footer. */\nexport function MarketingLayout({ header, footer, skipLabel, className, children, ...props }: MarketingLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <SkipLink>{skipLabel}</SkipLink>\n      <div className={s.header()}>{header}</div>\n      <main id=\"content\" tabIndex={-1} className={s.main()}>\n        {children}\n      </main>\n      {footer}\n    </div>\n  );\n}\n"],"mappings":";AAIA,SAAS,UAAU;AA2Bf;AAzBG,IAAM,WAAW,GAAG;AAAA,EACzB,MACE;AAEJ,CAAC;AAWM,SAAS,SAAS,EAAE,OAAO,YAAY,WAAW,SAAS,UAAU,GAAG,MAAM,GAAkB;AACrG,QAAM,cAAc,CAAC,UAA+C;AAClE,cAAU,KAAK;AACf,QAAI,MAAM,iBAAkB;AAC5B,UAAM,SAAS,SAAS,eAAe,mBAAmB,KAAK,MAAM,CAAC,CAAC,CAAC;AACxE,QAAI,CAAC,OAAQ;AACb,QAAI,CAAC,OAAO,aAAa,UAAU,KAAK,CAAC,OAAO,QAAQ,6DAA6D,EAAG,QAAO,aAAa,YAAY,IAAI;AAC5J,WAAO,MAAM;AAAA,EACf;AACA,SACE,oBAAC,OAAE,MAAY,WAAW,SAAS,EAAE,UAAU,CAAC,GAAG,SAAS,aAAc,GAAG,OAC1E,UACH;AAEJ;;;AC9BA,SAAS,MAAAA,WAAU;AAyBf,SACE,OAAAC,MADF;AAvBG,IAAM,kBAAkBD,IAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AACF,CAAC;AACD,IAAM,IAAI,gBAAgB;AAcnB,SAAS,gBAAgB,EAAE,QAAQ,QAAQ,WAAW,WAAW,UAAU,GAAG,MAAM,GAAyB;AAClH,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,oBAAAC,KAAC,YAAU,qBAAU;AAAA,IACrB,gBAAAA,KAAC,SAAI,WAAW,EAAE,OAAO,GAAI,kBAAO;AAAA,IACpC,gBAAAA,KAAC,UAAK,IAAG,WAAU,UAAU,IAAI,WAAW,EAAE,KAAK,GAChD,UACH;AAAA,IACC;AAAA,KACH;AAEJ;","names":["tv","jsx"]}

package/dist/match-dialog.d.ts

@@ -23,8 +23,10 @@ type MatchDialogProps = {
     onPrimary: () => void;
     /** The way back (“Keep swiping”). */
     secondaryLabel: string;
+    /** Where it is drawn (the page's body by default): give an element inside a brand scope (`.brand-…`) so the dialog wears the brand too. */
+    container?: HTMLElement | null;
 };
 /** Two people choose each other: the avatars meet at a heart in the brand gradient, the next step under them. */
-declare function MatchDialog({ open, onOpenChange, title, description, people, primaryLabel, onPrimary, secondaryLabel }: MatchDialogProps): React.JSX.Element;
+declare function MatchDialog({ open, onOpenChange, title, description, people, primaryLabel, onPrimary, secondaryLabel, container }: MatchDialogProps): React.JSX.Element;
 
 export { MatchDialog, type MatchDialogProps };

package/dist/match-dialog.js

@@ -1,15 +1,36 @@
 "use client";
+import "./chunk-NPF3OHE2.js";
 import {
   Avatar
-} from "./chunk-F2GKFIYK.js";
+} from "./chunk-CURW36FI.js";
+import "./chunk-JXLDUDTD.js";
 import {
   Button,
   IconButton
-} from "./chunk-ECSCA3CN.js";
+} from "./chunk-UOMP6VOZ.js";
 
 // src/dialog/dialog.tsx
 import { Dialog as DialogPrimitive } from "radix-ui";
 import { tv } from "tailwind-variants";
+
+// src/dialog/return-focus.ts
+import * as React from "react";
+function useReturnFocus(onCloseAutoFocus) {
+  const [opener] = React.useState(() => typeof document === "undefined" ? null : document.activeElement);
+  return React.useCallback(
+    (event) => {
+      onCloseAutoFocus?.(event);
+      if (event.defaultPrevented) return;
+      if (opener instanceof HTMLElement && opener !== document.body && opener.isConnected) {
+        event.preventDefault();
+        opener.focus();
+      }
+    },
+    [opener, onCloseAutoFocus]
+  );
+}
+
+// src/dialog/dialog.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var dialog = tv({
   slots: {
@@ -42,6 +63,9 @@ function CloseIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
 }
 var prevent = (event) => event.preventDefault();
+function ReturnFocusContent({ onCloseAutoFocus, ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Content, { onCloseAutoFocus: useReturnFocus(onCloseAutoFocus), ...props });
+}
 function DialogContent({
   placement,
   size,
@@ -60,7 +84,7 @@ function DialogContent({
   return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { container, children: [
     /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: v.overlay() }),
     /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
+      ReturnFocusContent,
       {
         "data-placement": placement ?? "center",
         "data-dismissible": dismissible ? void 0 : "false",
@@ -112,8 +136,8 @@ var Dialog = {
 
 // src/match-dialog/match-dialog.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function MatchDialog({ open, onOpenChange, title, description, people, primaryLabel, onPrimary, secondaryLabel }) {
-  return /* @__PURE__ */ jsx2(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs2(Dialog.Content, { hideClose: true, size: "sm", className: "overflow-hidden border-0 bg-gradient-to-br from-accent to-accent-2 text-center text-on-accent", children: [
+function MatchDialog({ open, onOpenChange, title, description, people, primaryLabel, onPrimary, secondaryLabel, container }) {
+  return /* @__PURE__ */ jsx2(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs2(Dialog.Content, { hideClose: true, size: "sm", container, className: "overflow-hidden border-0 bg-gradient-to-br from-accent to-accent-2 text-center text-on-accent", children: [
     /* @__PURE__ */ jsx2("style", { href: "krizaka-match", precedence: "default", children: "@media (prefers-reduced-motion:no-preference){[data-kz-match] [data-side=a]{animation:kz-match-a .55s cubic-bezier(.3,1.6,.5,1) both}[data-kz-match] [data-side=b]{animation:kz-match-b .55s cubic-bezier(.3,1.6,.5,1) both}[data-kz-match] [data-heart]{animation:kz-match-heart .45s .25s cubic-bezier(.3,1.6,.5,1) both}}@keyframes kz-match-a{from{transform:translateX(-60px) rotate(-8deg);opacity:0}}@keyframes kz-match-b{from{transform:translateX(60px) rotate(8deg);opacity:0}}@keyframes kz-match-heart{from{transform:scale(0)}}" }),
     /* @__PURE__ */ jsxs2("div", { "data-kz-match": "", className: "flex flex-col items-center gap-3 px-2 pb-2 pt-6", children: [
       /* @__PURE__ */ jsx2(Dialog.Title, { className: "font-display text-4xl font-black text-on-accent", children: title }),

package/dist/match-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/dialog/dialog.tsx","../src/match-dialog/match-dialog.tsx"],"sourcesContent":["// Client (a portal). Radix does the focus trap, the scroll lock, Escape, the outside click, aria-modal, the\n// aria-labelledby / aria-describedby wiring and the focus return: this file only holds the shape.\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { IconButton } from \"../button/button\";\n\nexport const dialog = tv({\n  slots: {\n    overlay: \"kz-overlay fixed inset-0 z-50 bg-overlay backdrop-blur-xs\",\n    content:\n      \"kz-dialog fixed z-50 flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg shadow-lg focus:outline-hidden\",\n    close: \"absolute right-3 top-3 h-9 w-9\",\n    header: \"flex flex-col gap-1 px-5 pb-2 pr-14 pt-5\",\n    title: \"text-base font-bold text-fg\",\n    description: \"text-sm text-fg-secondary\",\n    body: \"min-h-0 flex-1 overflow-y-auto px-5 pb-5\",\n    footer:\n      \"flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle px-5 py-4 pb-[max(1rem,env(safe-area-inset-bottom))]\",\n  },\n  variants: {\n    placement: {\n      center: { content: \"left-1/2 top-1/2 max-h-[85dvh] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl\" },\n      /* A sheet: anchored at the bottom on a phone, centred from `sm` up. */\n      bottom: {\n        content:\n          \"inset-x-0 bottom-0 max-h-[92dvh] rounded-t-[1.75rem] sm:bottom-auto sm:left-1/2 sm:top-1/2 sm:w-full \" +\n          \"sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-[1.75rem]\",\n      },\n      right: { content: \"inset-y-0 right-0 h-full w-full max-w-md rounded-none border-y-0 border-r-0\" },\n      /* A navigation drawer: full height, from the left, clear of the notch. */\n      left: { content: \"inset-y-0 left-0 h-full w-full max-w-md rounded-none border-y-0 border-l-0 pl-[env(safe-area-inset-left)]\" },\n    },\n    size: { sm: { content: \"sm:max-w-sm\" }, md: { content: \"sm:max-w-md\" }, lg: { content: \"sm:max-w-2xl\" } },\n  },\n  defaultVariants: { placement: \"center\", size: \"md\" },\n});\nconst s = dialog();\n\nexport type DialogVariants = VariantProps<typeof dialog>;\n\nfunction CloseIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n      <path d=\"M18 6 6 18M6 6l12 12\" />\n    </svg>\n  );\n}\n\ntype CloseButtonProps =\n  | {\n      /** The accessible name of the close button — passed translated. */\n      closeLabel: string;\n      /** Leaves the close button out (the content brings its own way out, or none: see `dismissible`). */\n      hideClose?: false;\n    }\n  | { closeLabel?: string; hideClose: true };\n\nexport type DialogContentProps = React.ComponentProps<typeof DialogPrimitive.Content> &\n  DialogVariants &\n  CloseButtonProps & {\n    /**\n     * center · bottom (a sheet on a phone, centred from `sm` up) · right (a side panel, full height) · left (a\n     * navigation drawer, full height).\n     * @default \"center\"\n     */\n    placement?: DialogVariants[\"placement\"];\n    /**\n     * sm · md · lg: the width of the dialog.\n     * @default \"md\"\n     */\n    size?: DialogVariants[\"size\"];\n    /**\n     * `false`: Escape and a click outside do not close it (a gate the user must answer: age, terms). It still closes\n     * through `open` / `onOpenChange` and any `Dialog.Close` inside. Default `true`.\n     */\n    dismissible?: boolean;\n    /** The element the portal renders into (default: document.body). */\n    container?: HTMLElement | null;\n  };\n\nconst prevent = (event: Event) => event.preventDefault();\n\n/** The dialog itself, portalled over a dimmed overlay, with a close button. Give it a `Dialog.Title`. */\nexport function DialogContent({\n  placement,\n  size,\n  closeLabel,\n  hideClose,\n  dismissible = true,\n  container,\n  className,\n  children,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onInteractOutside,\n  ...props\n}: DialogContentProps) {\n  const v = dialog({ placement, size });\n  return (\n    <DialogPrimitive.Portal container={container}>\n      <DialogPrimitive.Overlay className={v.overlay()} />\n      <DialogPrimitive.Content\n        data-placement={placement ?? \"center\"}\n        data-dismissible={dismissible ? undefined : \"false\"}\n        className={v.content({ className })}\n        onEscapeKeyDown={dismissible ? onEscapeKeyDown : chain(onEscapeKeyDown, prevent)}\n        onPointerDownOutside={dismissible ? onPointerDownOutside : chain(onPointerDownOutside, prevent)}\n        onInteractOutside={dismissible ? onInteractOutside : chain(onInteractOutside, prevent)}\n        {...props}\n      >\n        {children}\n        {!hideClose && (\n          <DialogPrimitive.Close asChild>\n            <IconButton label={closeLabel as string} variant=\"ghost\" shape=\"pill\" className={v.close()}>\n              <CloseIcon />\n            </IconButton>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n}\n\nfunction chain<E extends Event>(handler: ((event: E) => void) | undefined, then: (event: E) => void) {\n  return (event: E) => {\n    handler?.(event);\n    then(event);\n  };\n}\n\nexport function DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.header({ className })} {...props} />;\n}\n\nexport function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return <DialogPrimitive.Title className={s.title({ className })} {...props} />;\n}\n\nexport function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return <DialogPrimitive.Description className={s.description({ className })} {...props} />;\n}\n\nexport function DialogBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.body({ className })} {...props} />;\n}\n\nexport function DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.footer({ className })} {...props} />;\n}\n\n/** `Dialog.Root/Trigger/Content/Header/Title/Description/Body/Footer/Close`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const Dialog = {\n  Root: DialogPrimitive.Root,\n  Trigger: DialogPrimitive.Trigger,\n  Close: DialogPrimitive.Close,\n  Content: DialogContent,\n  Header: DialogHeader,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Body: DialogBody,\n  Footer: DialogFooter,\n};\n\n/** `Omit` that keeps the close-button union (`closeLabel` required unless `hideClose`). */\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;\n\nexport type SheetProps = DistributiveOmit<DialogContentProps, \"placement\">;\n\n/** A sheet is a dialog anchored at the bottom (centred from `sm` up): `Dialog.Content placement=\"bottom\"`. */\nexport function Sheet(props: SheetProps) {\n  return <DialogContent placement=\"bottom\" {...props} />;\n}\n","// Client (a portal). The moment two people choose each other — a match, a pair, a deal: a dialog in the brand\n// gradient, the two avatars meeting at a heart, the next step. The entrance plays once; still under reduced motion.\nimport * as React from \"react\";\n\nimport { Avatar } from \"../avatar\";\nimport { Button } from \"../button\";\nimport { Dialog } from \"../dialog\";\n\nexport type MatchDialogProps = {\n  /** Shown (controlled). */\n  open: boolean;\n  /** Called when it closes. */\n  onOpenChange: (open: boolean) => void;\n  /** The headline (“It's a match!”) — passed translated; the dialog's name. */\n  title: string;\n  /** A line under it. */\n  description?: string;\n  /** The two people: avatar URLs and names. */\n  people: readonly [{ src?: string | null; name: string }, { src?: string | null; name: string }];\n  /** The main action (“Send a message”). */\n  primaryLabel: string;\n  /** What it does. */\n  onPrimary: () => void;\n  /** The way back (“Keep swiping”). */\n  secondaryLabel: string;\n};\n\n/** Two people choose each other: the avatars meet at a heart in the brand gradient, the next step under them. */\nexport function MatchDialog({ open, onOpenChange, title, description, people, primaryLabel, onPrimary, secondaryLabel }: MatchDialogProps) {\n  return (\n    <Dialog.Root open={open} onOpenChange={onOpenChange}>\n      <Dialog.Content hideClose size=\"sm\" className=\"overflow-hidden border-0 bg-gradient-to-br from-accent to-accent-2 text-center text-on-accent\">\n        <style href=\"krizaka-match\" precedence=\"default\">\n          {\"@media (prefers-reduced-motion:no-preference){[data-kz-match] [data-side=a]{animation:kz-match-a .55s cubic-bezier(.3,1.6,.5,1) both}[data-kz-match] [data-side=b]{animation:kz-match-b .55s cubic-bezier(.3,1.6,.5,1) both}[data-kz-match] [data-heart]{animation:kz-match-heart .45s .25s cubic-bezier(.3,1.6,.5,1) both}}@keyframes kz-match-a{from{transform:translateX(-60px) rotate(-8deg);opacity:0}}@keyframes kz-match-b{from{transform:translateX(60px) rotate(8deg);opacity:0}}@keyframes kz-match-heart{from{transform:scale(0)}}\"}\n        </style>\n        <div data-kz-match=\"\" className=\"flex flex-col items-center gap-3 px-2 pb-2 pt-6\">\n          <Dialog.Title className=\"font-display text-4xl font-black text-on-accent\">{title}</Dialog.Title>\n          {description ? <Dialog.Description className=\"max-w-xs text-sm text-on-accent\">{description}</Dialog.Description> : null}\n          <div className=\"relative my-6 flex h-36 w-64 items-center justify-center\" aria-hidden>\n            <span data-side=\"a\" className=\"absolute left-6 -rotate-6 rounded-full ring-4 ring-on-accent\">\n              <Avatar src={people[0].src ?? null} alt=\"\" fallback={people[0].name.charAt(0)} className=\"h-28 w-28 text-3xl\" />\n            </span>\n            <span data-side=\"b\" className=\"absolute right-6 rotate-6 rounded-full ring-4 ring-on-accent\">\n              <Avatar src={people[1].src ?? null} alt=\"\" fallback={people[1].name.charAt(0)} className=\"h-28 w-28 text-3xl\" />\n            </span>\n            <span data-heart=\"\" className=\"absolute -bottom-1 flex h-12 w-12 items-center justify-center rounded-full bg-on-accent text-accent shadow-lg\">\n              <svg viewBox=\"0 0 24 24\" className=\"h-6 w-6\" fill=\"currentColor\">\n                <path d=\"M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z\" />\n              </svg>\n            </span>\n          </div>\n          <div className=\"flex w-full flex-col gap-2\">\n            <Button\n              size=\"lg\"\n              onClick={() => {\n                onOpenChange(false);\n                onPrimary();\n              }}\n            >\n              {primaryLabel}\n            </Button>\n            <Dialog.Close asChild>\n              <Button size=\"lg\" variant=\"ghost\" className=\"text-on-accent hover:bg-on-accent/15\">\n                {secondaryLabel}\n              </Button>\n            </Dialog.Close>\n          </div>\n        </div>\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs"]}
+{"version":3,"sources":["../src/dialog/dialog.tsx","../src/dialog/return-focus.ts","../src/match-dialog/match-dialog.tsx"],"sourcesContent":["// Client (a portal). Radix does the focus trap, the scroll lock, Escape, the outside click, aria-modal, the\n// aria-labelledby / aria-describedby wiring and the focus return: this file only holds the shape.\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { IconButton } from \"../button/button\";\nimport { useReturnFocus } from \"./return-focus\";\n\nexport const dialog = tv({\n  slots: {\n    overlay: \"kz-overlay fixed inset-0 z-50 bg-overlay backdrop-blur-xs\",\n    content:\n      \"kz-dialog fixed z-50 flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg shadow-lg focus:outline-hidden\",\n    close: \"absolute right-3 top-3 h-9 w-9\",\n    header: \"flex flex-col gap-1 px-5 pb-2 pr-14 pt-5\",\n    title: \"text-base font-bold text-fg\",\n    description: \"text-sm text-fg-secondary\",\n    body: \"min-h-0 flex-1 overflow-y-auto px-5 pb-5\",\n    footer:\n      \"flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle px-5 py-4 pb-[max(1rem,env(safe-area-inset-bottom))]\",\n  },\n  variants: {\n    placement: {\n      center: { content: \"left-1/2 top-1/2 max-h-[85dvh] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl\" },\n      /* A sheet: anchored at the bottom on a phone, centred from `sm` up. */\n      bottom: {\n        content:\n          \"inset-x-0 bottom-0 max-h-[92dvh] rounded-t-[1.75rem] sm:bottom-auto sm:left-1/2 sm:top-1/2 sm:w-full \" +\n          \"sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-[1.75rem]\",\n      },\n      right: { content: \"inset-y-0 right-0 h-full w-full max-w-md rounded-none border-y-0 border-r-0\" },\n      /* A navigation drawer: full height, from the left, clear of the notch. */\n      left: { content: \"inset-y-0 left-0 h-full w-full max-w-md rounded-none border-y-0 border-l-0 pl-[env(safe-area-inset-left)]\" },\n    },\n    size: { sm: { content: \"sm:max-w-sm\" }, md: { content: \"sm:max-w-md\" }, lg: { content: \"sm:max-w-2xl\" } },\n  },\n  defaultVariants: { placement: \"center\", size: \"md\" },\n});\nconst s = dialog();\n\nexport type DialogVariants = VariantProps<typeof dialog>;\n\nfunction CloseIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n      <path d=\"M18 6 6 18M6 6l12 12\" />\n    </svg>\n  );\n}\n\ntype CloseButtonProps =\n  | {\n      /** The accessible name of the close button — passed translated. */\n      closeLabel: string;\n      /** Leaves the close button out (the content brings its own way out, or none: see `dismissible`). */\n      hideClose?: false;\n    }\n  | { closeLabel?: string; hideClose: true };\n\nexport type DialogContentProps = React.ComponentProps<typeof DialogPrimitive.Content> &\n  DialogVariants &\n  CloseButtonProps & {\n    /**\n     * center · bottom (a sheet on a phone, centred from `sm` up) · right (a side panel, full height) · left (a\n     * navigation drawer, full height).\n     * @default \"center\"\n     */\n    placement?: DialogVariants[\"placement\"];\n    /**\n     * sm · md · lg: the width of the dialog.\n     * @default \"md\"\n     */\n    size?: DialogVariants[\"size\"];\n    /**\n     * `false`: Escape and a click outside do not close it (a gate the user must answer: age, terms). It still closes\n     * through `open` / `onOpenChange` and any `Dialog.Close` inside. Default `true`.\n     */\n    dismissible?: boolean;\n    /** The element the portal renders into (default: document.body). */\n    container?: HTMLElement | null;\n  };\n\nconst prevent = (event: Event) => event.preventDefault();\n\n/** Radix's content, mounted only while open: it remembers the opener then and gives focus back on close (WCAG 2.4.3). */\nfunction ReturnFocusContent({ onCloseAutoFocus, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>) {\n  return <DialogPrimitive.Content onCloseAutoFocus={useReturnFocus(onCloseAutoFocus)} {...props} />;\n}\n\n/** The dialog itself, portalled over a dimmed overlay, with a close button. Give it a `Dialog.Title`. */\nexport function DialogContent({\n  placement,\n  size,\n  closeLabel,\n  hideClose,\n  dismissible = true,\n  container,\n  className,\n  children,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onInteractOutside,\n  ...props\n}: DialogContentProps) {\n  const v = dialog({ placement, size });\n  return (\n    <DialogPrimitive.Portal container={container}>\n      <DialogPrimitive.Overlay className={v.overlay()} />\n      <ReturnFocusContent\n        data-placement={placement ?? \"center\"}\n        data-dismissible={dismissible ? undefined : \"false\"}\n        className={v.content({ className })}\n        onEscapeKeyDown={dismissible ? onEscapeKeyDown : chain(onEscapeKeyDown, prevent)}\n        onPointerDownOutside={dismissible ? onPointerDownOutside : chain(onPointerDownOutside, prevent)}\n        onInteractOutside={dismissible ? onInteractOutside : chain(onInteractOutside, prevent)}\n        {...props}\n      >\n        {children}\n        {!hideClose && (\n          <DialogPrimitive.Close asChild>\n            <IconButton label={closeLabel as string} variant=\"ghost\" shape=\"pill\" className={v.close()}>\n              <CloseIcon />\n            </IconButton>\n          </DialogPrimitive.Close>\n        )}\n      </ReturnFocusContent>\n    </DialogPrimitive.Portal>\n  );\n}\n\nfunction chain<E extends Event>(handler: ((event: E) => void) | undefined, then: (event: E) => void) {\n  return (event: E) => {\n    handler?.(event);\n    then(event);\n  };\n}\n\nexport function DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.header({ className })} {...props} />;\n}\n\nexport function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return <DialogPrimitive.Title className={s.title({ className })} {...props} />;\n}\n\nexport function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return <DialogPrimitive.Description className={s.description({ className })} {...props} />;\n}\n\nexport function DialogBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.body({ className })} {...props} />;\n}\n\nexport function DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.footer({ className })} {...props} />;\n}\n\n/** `Dialog.Root/Trigger/Content/Header/Title/Description/Body/Footer/Close`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const Dialog = {\n  Root: DialogPrimitive.Root,\n  Trigger: DialogPrimitive.Trigger,\n  Close: DialogPrimitive.Close,\n  Content: DialogContent,\n  Header: DialogHeader,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Body: DialogBody,\n  Footer: DialogFooter,\n};\n\n/** `Omit` that keeps the close-button union (`closeLabel` required unless `hideClose`). */\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;\n\nexport type SheetProps = DistributiveOmit<DialogContentProps, \"placement\">;\n\n/** A sheet is a dialog anchored at the bottom (centred from `sm` up): `Dialog.Content placement=\"bottom\"`. */\nexport function Sheet(props: SheetProps) {\n  return <DialogContent placement=\"bottom\" {...props} />;\n}\n","// Client. WCAG 2.4.3: when a dialog closes, focus goes back to what opened it. Radix only does it for `Dialog.Trigger`;\n// most app dialogs are controlled (`open` / `onOpenChange`) and opened by a plain button, so on Escape focus fell to\n// <body>. The content remembers the focused element when it mounts (it is still the opener: Radix moves focus in an\n// effect) and gives it back on close, unless the consumer's `onCloseAutoFocus` prevented the default.\nimport * as React from \"react\";\n\n/** The handler for `onCloseAutoFocus`: yours first, then focus back on the opener if it is still on the page. */\nexport function useReturnFocus(onCloseAutoFocus?: (event: Event) => void) {\n  const [opener] = React.useState<Element | null>(() => (typeof document === \"undefined\" ? null : document.activeElement));\n  return React.useCallback(\n    (event: Event) => {\n      onCloseAutoFocus?.(event);\n      if (event.defaultPrevented) return;\n      if (opener instanceof HTMLElement && opener !== document.body && opener.isConnected) {\n        event.preventDefault();\n        opener.focus();\n      }\n    },\n    [opener, onCloseAutoFocus],\n  );\n}\n","// Client (a portal). The moment two people choose each other — a match, a pair, a deal: a dialog in the brand\n// gradient, the two avatars meeting at a heart, the next step. The entrance plays once; still under reduced motion.\nimport * as React from \"react\";\n\nimport { Avatar } from \"../avatar\";\nimport { Button } from \"../button\";\nimport { Dialog } from \"../dialog\";\n\nexport type MatchDialogProps = {\n  /** Shown (controlled). */\n  open: boolean;\n  /** Called when it closes. */\n  onOpenChange: (open: boolean) => void;\n  /** The headline (“It's a match!”) — passed translated; the dialog's name. */\n  title: string;\n  /** A line under it. */\n  description?: string;\n  /** The two people: avatar URLs and names. */\n  people: readonly [{ src?: string | null; name: string }, { src?: string | null; name: string }];\n  /** The main action (“Send a message”). */\n  primaryLabel: string;\n  /** What it does. */\n  onPrimary: () => void;\n  /** The way back (“Keep swiping”). */\n  secondaryLabel: string;\n  /** Where it is drawn (the page's body by default): give an element inside a brand scope (`.brand-…`) so the dialog wears the brand too. */\n  container?: HTMLElement | null;\n};\n\n/** Two people choose each other: the avatars meet at a heart in the brand gradient, the next step under them. */\nexport function MatchDialog({ open, onOpenChange, title, description, people, primaryLabel, onPrimary, secondaryLabel, container }: MatchDialogProps) {\n  return (\n    <Dialog.Root open={open} onOpenChange={onOpenChange}>\n      <Dialog.Content hideClose size=\"sm\" container={container} className=\"overflow-hidden border-0 bg-gradient-to-br from-accent to-accent-2 text-center text-on-accent\">\n        <style href=\"krizaka-match\" precedence=\"default\">\n          {\"@media (prefers-reduced-motion:no-preference){[data-kz-match] [data-side=a]{animation:kz-match-a .55s cubic-bezier(.3,1.6,.5,1) both}[data-kz-match] [data-side=b]{animation:kz-match-b .55s cubic-bezier(.3,1.6,.5,1) both}[data-kz-match] [data-heart]{animation:kz-match-heart .45s .25s cubic-bezier(.3,1.6,.5,1) both}}@keyframes kz-match-a{from{transform:translateX(-60px) rotate(-8deg);opacity:0}}@keyframes kz-match-b{from{transform:translateX(60px) rotate(8deg);opacity:0}}@keyframes kz-match-heart{from{transform:scale(0)}}\"}\n        </style>\n        <div data-kz-match=\"\" className=\"flex flex-col items-center gap-3 px-2 pb-2 pt-6\">\n          <Dialog.Title className=\"font-display text-4xl font-black text-on-accent\">{title}</Dialog.Title>\n          {description ? <Dialog.Description className=\"max-w-xs text-sm text-on-accent\">{description}</Dialog.Description> : null}\n          <div className=\"relative my-6 flex h-36 w-64 items-center justify-center\" aria-hidden>\n            <span data-side=\"a\" className=\"absolute left-6 -rotate-6 rounded-full ring-4 ring-on-accent\">\n              <Avatar src={people[0].src ?? null} alt=\"\" fallback={people[0].name.charAt(0)} className=\"h-28 w-28 text-3xl\" />\n            </span>\n            <span data-side=\"b\" className=\"absolute right-6 rotate-6 rounded-full ring-4 ring-on-accent\">\n              <Avatar src={people[1].src ?? null} alt=\"\" fallback={people[1].name.charAt(0)} className=\"h-28 w-28 text-3xl\" />\n            </span>\n            <span data-heart=\"\" className=\"absolute -bottom-1 flex h-12 w-12 items-center justify-center rounded-full bg-on-accent text-accent shadow-lg\">\n              <svg viewBox=\"0 0 24 24\" className=\"h-6 w-6\" fill=\"currentColor\">\n                <path d=\"M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z\" />\n              </svg>\n            </span>\n          </div>\n          <div className=\"flex w-full flex-col gap-2\">\n            <Button\n              size=\"lg\"\n              onClick={() => {\n                onOpenChange(false);\n                onPrimary();\n              }}\n            >\n              {primaryLabel}\n            </Button>\n            <Dialog.Close asChild>\n              <Button size=\"lg\" variant=\"ghost\" className=\"text-on-accent hover:bg-on-accent/15\">\n                {secondaryLabel}\n              </Button>\n            </Dialog.Close>\n          </div>\n        </div>\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs"]}

package/dist/native/vertical-video.d.ts

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+interface VerticalVideoLabels {
+    play: string;
+    pause: string;
+    like: string;
+    comment: string;
+    share: string;
+    more: string;
+    /** "Follow {name}". */
+    follow: string;
+    /** "Following {name}". */
+    following: string;
+    expand: string;
+    collapse: string;
+    progress: string;
+    /** The rail's name ("Actions"). */
+    actions: string;
+}
+declare const verticalVideoLabels: VerticalVideoLabels;
+type VerticalVideoProps = {
+    /** The video's accessible name ("Video: Night shoot, part 2"), passed translated. */
+    title: string;
+    /** The clip's address (MP4 or HLS). Absent, the poster alone shows. */
+    uri?: string;
+    /** The picture until the first frame. */
+    posterUri?: string;
+    /** Plays while `true` (a `ShortFeed` passes it for the slide in view). Default `true`. */
+    active?: boolean;
+    /** Who made it: name, portrait, the seal's words. */
+    creator: {
+        name: string;
+        avatarUri?: string;
+        verifiedLabel?: string;
+    };
+    /** A pill beside the name ("AI-GENERATED"). */
+    disclosure?: string;
+    /** The caption, two lines until expanded. */
+    caption?: string;
+    /** Tags after the caption (without `#`). */
+    tags?: readonly string[];
+    /** The sound or credit line. */
+    credit?: string;
+    /** The like count, compact in `locale`. */
+    likes?: number;
+    /** The comment count. */
+    comments?: number;
+    /** The share count. */
+    shares?: number;
+    /** Whether the viewer likes it. */
+    liked?: boolean;
+    /** Whether the viewer follows the creator. */
+    following?: boolean;
+    /** The viewer likes or unlikes. */
+    onLike?: (liked: boolean) => void;
+    /** Opens the comments. */
+    onComment?: () => void;
+    /** Opens the share sheet. */
+    onShare?: () => void;
+    /** Follows or unfollows; without it the avatar has no "+". */
+    onFollow?: (following: boolean) => void;
+    /** The "more" action; without it the button is not drawn. */
+    onMore?: () => void;
+    /** The product's own action on the rail (a tip, an unlock): a named, 44 pt button of yours. */
+    tipSlot?: React.ReactNode;
+    /** Top left over the picture: a chip (an auction's time left). */
+    topStart?: React.ReactNode;
+    /** Above the caption: a goal gauge. */
+    aboveCaption?: React.ReactNode;
+    /** The locale of the counts. Default `en`. */
+    locale?: string;
+    /** Every word, passed translated. */
+    labels?: Partial<VerticalVideoLabels>;
+    /** Styles merged last, on the frame. */
+    style?: StyleProp<ViewStyle>;
+};
+/** One short video: 9:16, the rail of actions on the right, the creator's caption bottom-left. */
+declare function VerticalVideo({ title, uri, posterUri, active, creator, disclosure, caption, tags, credit, likes, comments, shares, liked, following, onLike, onComment, onShare, onFollow, onMore, tipSlot, topStart, aboveCaption, locale, labels: custom, style, }: VerticalVideoProps): React.JSX.Element;
+type ShortFeedProps<T> = {
+    /** The feed's accessible name ("Videos"). */
+    label: string;
+    /** The videos, in order. */
+    items: readonly T[];
+    /** A stable key for an item. */
+    getId: (item: T) => string;
+    /** One slide: `active` is true for the one in view. */
+    renderItem: (item: T, state: {
+        active: boolean;
+        index: number;
+    }) => React.ReactElement;
+    /** The page's height in points (the feed's own height; one slide per page). */
+    height: number;
+    /** Called when the slide in view changes. */
+    onActiveChange?: (index: number, item: T) => void;
+    /** Styles merged last. */
+    style?: StyleProp<ViewStyle>;
+};
+/** A vertical paging feed: one video per screen, the one in view plays, the others pause. */
+declare function ShortFeed<T>({ label, items, getId, renderItem, height, onActiveChange, style }: ShortFeedProps<T>): React.JSX.Element;
+
+export { ShortFeed, type ShortFeedProps, VerticalVideo, type VerticalVideoLabels, type VerticalVideoProps, verticalVideoLabels };

package/dist/native/vertical-video.js

@@ -0,0 +1,163 @@
+// src/native/vertical-video.tsx
+import { formatCompact } from "@krizaka/intl";
+import { Avatar, Txt, useTheme, VerifiedBadge } from "@krizaka/ui/native";
+import { VideoPlayer } from "@krizaka/ui/native/video-player";
+import * as React from "react";
+import { FlatList, Image, Pressable, StyleSheet, View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { jsx, jsxs } from "react/jsx-runtime";
+var verticalVideoLabels = {
+  play: "Play",
+  pause: "Pause",
+  like: "Like",
+  comment: "Comments",
+  share: "Share",
+  more: "More",
+  follow: "Follow {name}",
+  following: "Following {name}",
+  expand: "More",
+  collapse: "Less",
+  progress: "Progress",
+  actions: "Actions"
+};
+var HEART = "M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z";
+var COMMENT = "M4 5h16v11H9l-5 4z";
+var SHARE = "M4 12v7h16v-7M12 3v12M7 8l5-5 5 5";
+var MORE = "M5 12h.01M12 12h.01M19 12h.01";
+function Glyph({ d, color, filled }) {
+  return /* @__PURE__ */ jsx(Svg, { width: 24, height: 24, viewBox: "0 0 24 24", fill: filled ? color : "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx(Path, { d }) });
+}
+function RailButton({ label, count, pressed, onPress, children }) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsxs(View, { style: styles.railItem, children: [
+    /* @__PURE__ */ jsx(Pressable, { role: "button", "aria-label": label, "aria-pressed": pressed, onPress, hitSlop: 4, style: [styles.railButton, { backgroundColor: theme.scrim }], children }),
+    count !== void 0 ? /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "onMedia", style: styles.count, children: count }) : null
+  ] });
+}
+function VerticalVideo({
+  title,
+  uri,
+  posterUri,
+  active = true,
+  creator,
+  disclosure,
+  caption,
+  tags = [],
+  credit,
+  likes,
+  comments,
+  shares,
+  liked = false,
+  following = false,
+  onLike,
+  onComment,
+  onShare,
+  onFollow,
+  onMore,
+  tipSlot,
+  topStart,
+  aboveCaption,
+  locale = "en",
+  labels: custom,
+  style
+}) {
+  const { theme } = useTheme();
+  const labels = { ...verticalVideoLabels, ...custom };
+  const [open, setOpen] = React.useState(false);
+  const [paused, setPaused] = React.useState(false);
+  const count = (n) => n === void 0 ? void 0 : formatCompact(n, { locale });
+  const on = theme.textOnMedia;
+  return /* @__PURE__ */ jsxs(View, { role: "group", "aria-label": title, style: [styles.frame, { backgroundColor: theme.media }, style], children: [
+    uri ? /* @__PURE__ */ jsx(VideoPlayer, { source: { uri }, title, aspectRatio: 9 / 16, contentFit: "cover", nativeControls: false, fullscreen: false, autoPlay: true, loop: true, muted: true, paused: !active || paused, style: StyleSheet.absoluteFill, ...posterUri ? { poster: { uri: posterUri } } : {} }) : posterUri ? /* @__PURE__ */ jsx(Image, { source: { uri: posterUri }, "aria-hidden": true, resizeMode: "cover", style: StyleSheet.absoluteFill }) : null,
+    /* @__PURE__ */ jsx(Pressable, { role: "button", "aria-label": paused ? labels.play : labels.pause, onPress: () => setPaused((p) => !p), onLongPress: () => onLike?.(!liked), style: StyleSheet.absoluteFill }),
+    /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles.shade, { backgroundColor: theme.scrim }] }),
+    topStart ? /* @__PURE__ */ jsx(View, { style: styles.topStart, children: topStart }) : null,
+    /* @__PURE__ */ jsxs(View, { role: "group", "aria-label": labels.actions, style: styles.rail, children: [
+      /* @__PURE__ */ jsxs(View, { children: [
+        /* @__PURE__ */ jsx(Avatar, { alt: creator.name, ...creator.avatarUri ? { src: creator.avatarUri } : {}, size: "md" }),
+        onFollow ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            role: "button",
+            "aria-label": (following ? labels.following : labels.follow).replace("{name}", creator.name),
+            "aria-pressed": following,
+            onPress: () => onFollow(!following),
+            hitSlop: 12,
+            style: [styles.follow, { backgroundColor: following ? theme.surface2 : theme.accent }],
+            children: /* @__PURE__ */ jsx(Glyph, { d: following ? "M5 12l5 5 9-10" : "M12 5v14M5 12h14", color: following ? theme.textPrimary : theme.onAccent })
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx(RailButton, { label: labels.like, count: count(likes), pressed: liked, onPress: () => onLike?.(!liked), children: /* @__PURE__ */ jsx(Glyph, { d: HEART, color: liked ? theme.accent : on, filled: liked }) }),
+      /* @__PURE__ */ jsx(RailButton, { label: labels.comment, count: count(comments), onPress: onComment, children: /* @__PURE__ */ jsx(Glyph, { d: COMMENT, color: on }) }),
+      /* @__PURE__ */ jsx(RailButton, { label: labels.share, count: count(shares), onPress: onShare, children: /* @__PURE__ */ jsx(Glyph, { d: SHARE, color: on }) }),
+      tipSlot,
+      onMore ? /* @__PURE__ */ jsx(RailButton, { label: labels.more, onPress: onMore, children: /* @__PURE__ */ jsx(Glyph, { d: MORE, color: on }) }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.caption, children: [
+      aboveCaption,
+      /* @__PURE__ */ jsxs(View, { style: styles.nameRow, children: [
+        /* @__PURE__ */ jsx(Txt, { variant: "label", tone: "onMedia", children: creator.name }),
+        creator.verifiedLabel ? /* @__PURE__ */ jsx(VerifiedBadge, { label: creator.verifiedLabel, on: "media", size: 14 }) : null,
+        disclosure ? /* @__PURE__ */ jsx(View, { style: [styles.pill, { backgroundColor: theme.scrim }], children: /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "onMedia", style: styles.pillText, children: disclosure.toUpperCase() }) }) : null
+      ] }),
+      caption ? /* @__PURE__ */ jsxs(Txt, { tone: "onMedia", numberOfLines: open ? void 0 : 2, children: [
+        caption,
+        tags.length > 0 ? ` ${tags.map((tag) => `#${tag}`).join(" ")}` : ""
+      ] }) : null,
+      caption && caption.length > 90 ? /* @__PURE__ */ jsx(Pressable, { role: "button", "aria-label": open ? labels.collapse : labels.expand, "aria-expanded": open, onPress: () => setOpen((v) => !v), hitSlop: 10, children: /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "onMedia", style: styles.underline, children: open ? labels.collapse : labels.expand }) }) : null,
+      credit ? /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "onMedia", children: credit }) : null
+    ] })
+  ] });
+}
+function ShortFeed({ label, items, getId, renderItem, height, onActiveChange, style }) {
+  const [active, setActive] = React.useState(0);
+  const [onViewable] = React.useState(() => ({ viewableItems }) => {
+    const first = viewableItems.find((v) => v.isViewable && typeof v.index === "number");
+    if (first && typeof first.index === "number") setActive(first.index);
+  });
+  React.useEffect(() => {
+    const item = items[active];
+    if (item !== void 0) onActiveChange?.(active, item);
+  }, [active]);
+  return /* @__PURE__ */ jsx(View, { role: "list", "aria-label": label, style: [{ height }, style], children: /* @__PURE__ */ jsx(
+    FlatList,
+    {
+      data: items,
+      keyExtractor: getId,
+      pagingEnabled: true,
+      showsVerticalScrollIndicator: false,
+      snapToInterval: height,
+      decelerationRate: "fast",
+      getItemLayout: (_, index) => ({ length: height, offset: height * index, index }),
+      windowSize: 3,
+      initialNumToRender: 2,
+      viewabilityConfig: { itemVisiblePercentThreshold: 60 },
+      onViewableItemsChanged: onViewable,
+      extraData: active,
+      style: { height },
+      renderItem: ({ item, index }) => /* @__PURE__ */ jsx(View, { style: { height }, children: renderItem(item, { active: index === active, index }) })
+    }
+  ) });
+}
+var styles = StyleSheet.create({
+  frame: { width: "100%", aspectRatio: 9 / 16, overflow: "hidden" },
+  shade: { position: "absolute", left: 0, right: 0, bottom: 0, height: "30%", opacity: 0.55 },
+  topStart: { position: "absolute", left: 12, top: 12 },
+  rail: { position: "absolute", right: 8, bottom: 20, alignItems: "center", gap: 12 },
+  railItem: { alignItems: "center", gap: 2 },
+  railButton: { width: 44, height: 44, borderRadius: 22, alignItems: "center", justifyContent: "center" },
+  count: { fontVariant: ["tabular-nums"], fontWeight: "600" },
+  follow: { position: "absolute", bottom: -10, alignSelf: "center", width: 22, height: 22, borderRadius: 11, alignItems: "center", justifyContent: "center", overflow: "hidden" },
+  caption: { position: "absolute", left: 12, right: 76, bottom: 16, gap: 6 },
+  nameRow: { flexDirection: "row", alignItems: "center", gap: 6 },
+  pill: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999 },
+  pillText: { fontWeight: "700", letterSpacing: 0.4 },
+  underline: { textDecorationLine: "underline", fontWeight: "600" }
+});
+export {
+  ShortFeed,
+  VerticalVideo,
+  verticalVideoLabels
+};
+//# sourceMappingURL=vertical-video.js.map

package/dist/native/vertical-video.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/native/vertical-video.tsx"],"sourcesContent":["// @krizaka/ui/native/vertical-video — its own entry (it plays video on expo-video, an optional peer). A 9:16 clip filling\n// its frame, the action rail on the right (avatar + follow, like, comments, share, a slot for the product's tip), the\n// creator's caption bottom-left, a progress hairline; `ShortFeed` pages them vertically and plays the one in view.\n// Over the picture everything reads on the theme's invariant `scrim` / `textOnMedia`.\nimport { formatCompact } from \"@krizaka/intl\";\nimport { Avatar, Txt, useTheme, VerifiedBadge } from \"@krizaka/ui/native\";\nimport { VideoPlayer } from \"@krizaka/ui/native/video-player\";\nimport * as React from \"react\";\nimport { FlatList, Image,Pressable, type StyleProp, StyleSheet, View, type ViewStyle, type ViewToken } from \"react-native\";\nimport Svg, { Path } from \"react-native-svg\";\n\nexport interface VerticalVideoLabels {\n  play: string;\n  pause: string;\n  like: string;\n  comment: string;\n  share: string;\n  more: string;\n  /** \"Follow {name}\". */\n  follow: string;\n  /** \"Following {name}\". */\n  following: string;\n  expand: string;\n  collapse: string;\n  progress: string;\n  /** The rail's name (\"Actions\"). */\n  actions: string;\n}\n\nexport const verticalVideoLabels: VerticalVideoLabels = {\n  play: \"Play\",\n  pause: \"Pause\",\n  like: \"Like\",\n  comment: \"Comments\",\n  share: \"Share\",\n  more: \"More\",\n  follow: \"Follow {name}\",\n  following: \"Following {name}\",\n  expand: \"More\",\n  collapse: \"Less\",\n  progress: \"Progress\",\n  actions: \"Actions\",\n};\n\nexport type VerticalVideoProps = {\n  /** The video's accessible name (\"Video: Night shoot, part 2\"), passed translated. */\n  title: string;\n  /** The clip's address (MP4 or HLS). Absent, the poster alone shows. */\n  uri?: string;\n  /** The picture until the first frame. */\n  posterUri?: string;\n  /** Plays while `true` (a `ShortFeed` passes it for the slide in view). Default `true`. */\n  active?: boolean;\n  /** Who made it: name, portrait, the seal's words. */\n  creator: { name: string; avatarUri?: string; verifiedLabel?: string };\n  /** A pill beside the name (\"AI-GENERATED\"). */\n  disclosure?: string;\n  /** The caption, two lines until expanded. */\n  caption?: string;\n  /** Tags after the caption (without `#`). */\n  tags?: readonly string[];\n  /** The sound or credit line. */\n  credit?: string;\n  /** The like count, compact in `locale`. */\n  likes?: number;\n  /** The comment count. */\n  comments?: number;\n  /** The share count. */\n  shares?: number;\n  /** Whether the viewer likes it. */\n  liked?: boolean;\n  /** Whether the viewer follows the creator. */\n  following?: boolean;\n  /** The viewer likes or unlikes. */\n  onLike?: (liked: boolean) => void;\n  /** Opens the comments. */\n  onComment?: () => void;\n  /** Opens the share sheet. */\n  onShare?: () => void;\n  /** Follows or unfollows; without it the avatar has no \"+\". */\n  onFollow?: (following: boolean) => void;\n  /** The \"more\" action; without it the button is not drawn. */\n  onMore?: () => void;\n  /** The product's own action on the rail (a tip, an unlock): a named, 44 pt button of yours. */\n  tipSlot?: React.ReactNode;\n  /** Top left over the picture: a chip (an auction's time left). */\n  topStart?: React.ReactNode;\n  /** Above the caption: a goal gauge. */\n  aboveCaption?: React.ReactNode;\n  /** The locale of the counts. Default `en`. */\n  locale?: string;\n  /** Every word, passed translated. */\n  labels?: Partial<VerticalVideoLabels>;\n  /** Styles merged last, on the frame. */\n  style?: StyleProp<ViewStyle>;\n};\n\nconst HEART = \"M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z\";\nconst COMMENT = \"M4 5h16v11H9l-5 4z\";\nconst SHARE = \"M4 12v7h16v-7M12 3v12M7 8l5-5 5 5\";\nconst MORE = \"M5 12h.01M12 12h.01M19 12h.01\";\n\nfunction Glyph({ d, color, filled }: { d: string; color: string; filled?: boolean }) {\n  return (\n    <Svg width={24} height={24} viewBox=\"0 0 24 24\" fill={filled ? color : \"none\"} stroke={color} strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <Path d={d} />\n    </Svg>\n  );\n}\n\nfunction RailButton({ label, count, pressed, onPress, children }: { label: string; count?: string | undefined; pressed?: boolean | undefined; onPress?: (() => void) | undefined; children: React.ReactNode }) {\n  const { theme } = useTheme();\n  return (\n    <View style={styles.railItem}>\n      <Pressable role=\"button\" aria-label={label} aria-pressed={pressed} onPress={onPress} hitSlop={4} style={[styles.railButton, { backgroundColor: theme.scrim }]}>\n        {children}\n      </Pressable>\n      {count !== undefined ? (\n        <Txt variant=\"caption\" tone=\"onMedia\" style={styles.count}>\n          {count}\n        </Txt>\n      ) : null}\n    </View>\n  );\n}\n\n/** One short video: 9:16, the rail of actions on the right, the creator's caption bottom-left. */\nexport function VerticalVideo({\n  title,\n  uri,\n  posterUri,\n  active = true,\n  creator,\n  disclosure,\n  caption,\n  tags = [],\n  credit,\n  likes,\n  comments,\n  shares,\n  liked = false,\n  following = false,\n  onLike,\n  onComment,\n  onShare,\n  onFollow,\n  onMore,\n  tipSlot,\n  topStart,\n  aboveCaption,\n  locale = \"en\",\n  labels: custom,\n  style,\n}: VerticalVideoProps) {\n  const { theme } = useTheme();\n  const labels = { ...verticalVideoLabels, ...custom };\n  const [open, setOpen] = React.useState(false);\n  const [paused, setPaused] = React.useState(false);\n  const count = (n?: number) => (n === undefined ? undefined : formatCompact(n, { locale }));\n  const on = theme.textOnMedia;\n  return (\n    <View role=\"group\" aria-label={title} style={[styles.frame, { backgroundColor: theme.media }, style]}>\n      {uri ? (\n        <VideoPlayer source={{ uri }} title={title} aspectRatio={9 / 16} contentFit=\"cover\" nativeControls={false} fullscreen={false} autoPlay loop muted paused={!active || paused} style={StyleSheet.absoluteFill} {...(posterUri ? { poster: { uri: posterUri } } : {})} />\n      ) : posterUri ? (\n        <Image source={{ uri: posterUri }} aria-hidden resizeMode=\"cover\" style={StyleSheet.absoluteFill} />\n      ) : null}\n      <Pressable role=\"button\" aria-label={paused ? labels.play : labels.pause} onPress={() => setPaused((p) => !p)} onLongPress={() => onLike?.(!liked)} style={StyleSheet.absoluteFill} />\n      <View pointerEvents=\"none\" style={[styles.shade, { backgroundColor: theme.scrim }]} />\n      {topStart ? <View style={styles.topStart}>{topStart}</View> : null}\n\n      <View role=\"group\" aria-label={labels.actions} style={styles.rail}>\n        <View>\n          <Avatar alt={creator.name} {...(creator.avatarUri ? { src: creator.avatarUri } : {})} size=\"md\" />\n          {onFollow ? (\n            <Pressable\n              role=\"button\"\n              aria-label={(following ? labels.following : labels.follow).replace(\"{name}\", creator.name)}\n              aria-pressed={following}\n              onPress={() => onFollow(!following)}\n              hitSlop={12}\n              style={[styles.follow, { backgroundColor: following ? theme.surface2 : theme.accent }]}\n            >\n              <Glyph d={following ? \"M5 12l5 5 9-10\" : \"M12 5v14M5 12h14\"} color={following ? theme.textPrimary : theme.onAccent} />\n            </Pressable>\n          ) : null}\n        </View>\n        <RailButton label={labels.like} count={count(likes)} pressed={liked} onPress={() => onLike?.(!liked)}>\n          <Glyph d={HEART} color={liked ? theme.accent : on} filled={liked} />\n        </RailButton>\n        <RailButton label={labels.comment} count={count(comments)} onPress={onComment}>\n          <Glyph d={COMMENT} color={on} />\n        </RailButton>\n        <RailButton label={labels.share} count={count(shares)} onPress={onShare}>\n          <Glyph d={SHARE} color={on} />\n        </RailButton>\n        {tipSlot}\n        {onMore ? (\n          <RailButton label={labels.more} onPress={onMore}>\n            <Glyph d={MORE} color={on} />\n          </RailButton>\n        ) : null}\n      </View>\n\n      <View style={styles.caption}>\n        {aboveCaption}\n        <View style={styles.nameRow}>\n          <Txt variant=\"label\" tone=\"onMedia\">\n            {creator.name}\n          </Txt>\n          {creator.verifiedLabel ? <VerifiedBadge label={creator.verifiedLabel} on=\"media\" size={14} /> : null}\n          {disclosure ? (\n            <View style={[styles.pill, { backgroundColor: theme.scrim }]}>\n              <Txt variant=\"caption\" tone=\"onMedia\" style={styles.pillText}>\n                {disclosure.toUpperCase()}\n              </Txt>\n            </View>\n          ) : null}\n        </View>\n        {caption ? (\n          <Txt tone=\"onMedia\" numberOfLines={open ? undefined : 2}>\n            {caption}\n            {tags.length > 0 ? ` ${tags.map((tag) => `#${tag}`).join(\" \")}` : \"\"}\n          </Txt>\n        ) : null}\n        {caption && caption.length > 90 ? (\n          <Pressable role=\"button\" aria-label={open ? labels.collapse : labels.expand} aria-expanded={open} onPress={() => setOpen((v) => !v)} hitSlop={10}>\n            <Txt variant=\"caption\" tone=\"onMedia\" style={styles.underline}>\n              {open ? labels.collapse : labels.expand}\n            </Txt>\n          </Pressable>\n        ) : null}\n        {credit ? (\n          <Txt variant=\"caption\" tone=\"onMedia\">\n            {credit}\n          </Txt>\n        ) : null}\n      </View>\n    </View>\n  );\n}\n\nexport type ShortFeedProps<T> = {\n  /** The feed's accessible name (\"Videos\"). */\n  label: string;\n  /** The videos, in order. */\n  items: readonly T[];\n  /** A stable key for an item. */\n  getId: (item: T) => string;\n  /** One slide: `active` is true for the one in view. */\n  renderItem: (item: T, state: { active: boolean; index: number }) => React.ReactElement;\n  /** The page's height in points (the feed's own height; one slide per page). */\n  height: number;\n  /** Called when the slide in view changes. */\n  onActiveChange?: (index: number, item: T) => void;\n  /** Styles merged last. */\n  style?: StyleProp<ViewStyle>;\n};\n\n/** A vertical paging feed: one video per screen, the one in view plays, the others pause. */\nexport function ShortFeed<T>({ label, items, getId, renderItem, height, onActiveChange, style }: ShortFeedProps<T>) {\n  const [active, setActive] = React.useState(0);\n  // FlatList wants one stable callback for its whole life.\n  const [onViewable] = React.useState(() => ({ viewableItems }: { viewableItems: ViewToken[] }) => {\n    const first = viewableItems.find((v) => v.isViewable && typeof v.index === \"number\");\n    if (first && typeof first.index === \"number\") setActive(first.index);\n  });\n  React.useEffect(() => {\n    const item = items[active];\n    if (item !== undefined) onActiveChange?.(active, item);\n    // Only a change of the slide in view is an event.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [active]);\n  return (\n    <View role=\"list\" aria-label={label} style={[{ height }, style]}>\n    <FlatList\n      data={items as T[]}\n      keyExtractor={getId}\n      pagingEnabled\n      showsVerticalScrollIndicator={false}\n      snapToInterval={height}\n      decelerationRate=\"fast\"\n      getItemLayout={(_, index) => ({ length: height, offset: height * index, index })}\n      windowSize={3}\n      initialNumToRender={2}\n      viewabilityConfig={{ itemVisiblePercentThreshold: 60 }}\n      onViewableItemsChanged={onViewable}\n      extraData={active}\n      style={{ height }}\n      renderItem={({ item, index }) => <View style={{ height }}>{renderItem(item, { active: index === active, index })}</View>}\n    />\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  frame: { width: \"100%\", aspectRatio: 9 / 16, overflow: \"hidden\" },\n  shade: { position: \"absolute\", left: 0, right: 0, bottom: 0, height: \"30%\", opacity: 0.55 },\n  topStart: { position: \"absolute\", left: 12, top: 12 },\n  rail: { position: \"absolute\", right: 8, bottom: 20, alignItems: \"center\", gap: 12 },\n  railItem: { alignItems: \"center\", gap: 2 },\n  railButton: { width: 44, height: 44, borderRadius: 22, alignItems: \"center\", justifyContent: \"center\" },\n  count: { fontVariant: [\"tabular-nums\"], fontWeight: \"600\" },\n  follow: { position: \"absolute\", bottom: -10, alignSelf: \"center\", width: 22, height: 22, borderRadius: 11, alignItems: \"center\", justifyContent: \"center\", overflow: \"hidden\" },\n  caption: { position: \"absolute\", left: 12, right: 76, bottom: 16, gap: 6 },\n  nameRow: { flexDirection: \"row\", alignItems: \"center\", gap: 6 },\n  pill: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999 },\n  pillText: { fontWeight: \"700\", letterSpacing: 0.4 },\n  underline: { textDecorationLine: \"underline\", fontWeight: \"600\" },\n});\n"],"mappings":"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","names":[]}

package/dist/native.d.ts

@@ -1044,11 +1044,16 @@ type LoaderProps = {
     endDuration?: number;
     /** inline (default) · block (a region's centre) · overlay (over its parent, frosted) · page (the whole screen). */
     variant?: "inline" | "block" | "overlay" | "page";
+    /**
+     * The product whose animated mark waits in place of the Krizaka glyph (`orochia`, `orazaka`, `yazakia`, `yororis`,
+     * `krizaka`). Still when the system reduces motion; the ending stays the check or the cross.
+     */
+    product?: BrandId;
     /** Styles merged last. */
     style?: StyleProp<ViewStyle>;
 };
 /** A wait from start to end — the web `Loader`: delayed, never blinking, announced when it shows and when it ends. */
-declare function Loader({ label, status, successLabel, errorLabel, value, eta, delay, minDuration, endDuration, variant, style }: LoaderProps): React$1.JSX.Element | null;
+declare function Loader({ label, status, successLabel, errorLabel, value, eta, delay, minDuration, endDuration, variant, product, style }: LoaderProps): React$1.JSX.Element | null;
 
 /**
  * The Krizaka flock — the geometry of the mascots, drawn by the web `Mascot` (`./mascot.tsx`) and the native one
@@ -1513,6 +1518,33 @@ type PullToRefreshProps = Omit<RefreshControlProps, "colors" | "tintColor" | "pr
  * draws it already with `onRefresh`.
  */
 declare function PullToRefresh({ label, ...props }: PullToRefreshProps): React$1.JSX.Element;
+/** What `BrandedRefresh` hands to the scrollable: spread it on a `ScrollView` / `FlatList` (`{...scroll}`). */
+type BrandedRefreshScrollProps = {
+    refreshControl: React$1.ReactElement<RefreshControlProps>;
+    onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    scrollEventThrottle: number;
+};
+type BrandedRefreshProps = {
+    /** The product whose mark is drawn as the person pulls and turns while it refreshes. */
+    product: BrandId;
+    /** Whether the data is refreshing: keep it true until the new data is there. */
+    refreshing: boolean;
+    /** Called when the person pulls past the threshold. */
+    onRefresh: () => void;
+    /** The words announced when the refresh starts (“Refreshing your videos”) — passed translated. */
+    label: string;
+    /** The scrollable, given the props to spread: `{(scroll) => <ScrollView {...scroll}>…</ScrollView>}`. */
+    children: (scroll: BrandedRefreshScrollProps) => React$1.ReactElement;
+    /** The pull (in points) at which the mark is complete. Default 72. */
+    threshold?: number;
+};
+/**
+ * The product's mark as the pull-to-refresh: it grows and turns into place as the person pulls (iOS, where the content
+ * overscrolls) and keeps its own motion while it refreshes (iOS and Android). The platform's control still does the
+ * gesture, so the system announces it too; ours announces `label` when the refresh starts. Under reduced motion the mark
+ * is still and appears without the growing.
+ */
+declare function BrandedRefresh({ product, refreshing, onRefresh, label, children, threshold }: BrandedRefreshProps): React$1.JSX.Element;
 
 /** A choice: the value stored and its words (passed translated), a line under them, a second line on a key. */
 type RadioOption = {
@@ -1704,6 +1736,37 @@ type SpinnerProps = Omit<ActivityIndicatorProps, "size" | "color"> & {
 /** An indeterminate wait: the platform's activity indicator in the accent, named by `label`. */
 declare function Spinner({ label, size, ...props }: SpinnerProps): React$1.JSX.Element;
 
+type SplashHandoffProps = {
+    /** The product whose animated mark holds the screen. */
+    product: BrandId;
+    /** `true` once the first screen is ready to show: the splash dissolves into it. */
+    ready: boolean;
+    /**
+     * Called once the splash is on screen and painted — hide the native splash here
+     * (`SplashScreen.hideAsync()` of expo-splash-screen), so the static image dissolves into this one with no flash.
+     */
+    onShown?: () => void;
+    /** Called when the dissolve is over and the splash has left. */
+    onDone?: () => void;
+    /** The mark's side, in points. Default 96 — the size of the native splash icon, so nothing jumps. */
+    size?: number;
+    /** The background. Default: the theme's page colour, the one `app.json` gives the native splash. */
+    background?: string;
+    /** The words a screen reader hears while it waits (“Orochia is opening”) — passed translated. */
+    label: string;
+    /** The dissolve, in milliseconds. Default 320; none under reduced motion. */
+    duration?: number;
+    /** Styles merged last. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * The splash hand-off: the app's first frame is the static native splash; this puts the product's animated mark at the
+ * same place and size over the same background, then dissolves it away once `ready`. Render it above the app's root
+ * (absolute, full screen) and unmount nothing yourself: it removes its own content when the dissolve ends. Reduced
+ * motion: the mark stands still and the splash leaves without fading.
+ */
+declare function SplashHandoff({ product, ready, onShown, onDone, size, background, label, duration, style }: SplashHandoffProps): React$1.JSX.Element | null;
+
 type StepProgressProps = {
     /** The current step, from 1. */
     step: number;
@@ -2243,4 +2306,4 @@ declare function YazakiaMark({ size, animated, title, neutral }: NativeMarkProps
  */
 declare function YororisMark({ size, animated, title, neutral }: NativeMarkProps): React__default.JSX.Element;
 
-export { ActionSheet, type ActionSheetAction, type ActionSheetProps, type ActivityEvent, ActivityFeed, type ActivityFeedLabels, type ActivityFeedProps, type ActivityTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarLabels, type CalendarProps, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Combobox, type ComboboxLabels, type ComboboxProps, ConversationItem, type ConversationItemProps, Countdown, type CountdownProps, type CountdownUnits, DateField, type DateFieldLabels, type DateFieldProps, type DatePart, DateWheel, type DateWheelProps, DayStrip, type DayStripProps, type DescriptionItem, DescriptionList, type DescriptionListProps, EmptyState, type EmptyStateProps, ErrorState, Fab, type FabProps, GoalGauge, type GoalGaugeProps, type GridPhoto, type HapticKind, Header, type HeaderProps, IconButton, type IconButtonProps, ImageViewer, type ImageViewerProps, type Insets, KrizakaMark, Loader, LoaderGlyph, type LoaderGlyphProps, type LoaderProps, LoadingState, Mascot, type MascotProps, MascotState, type MascotStateProps, MatchDialog, type MatchDialogProps, MessageBubble, type MessageBubbleLabels, type MessageBubbleProps, MessageComposer, type MessageComposerProps, type MessageStatus, Meter, type MeterPart, type MeterProps, type Mode, MonthPicker, type MonthPickerProps, type Motion, type NativeMarkProps, NumberTicker, type NumberTickerProps, Onboarding, type OnboardingProps, type OnboardingSlide, OrazakaMark, OrochiaMark, OtpInput, type OtpInputProps, Pagination, type PaginationLabels, type PaginationProps, PermissionPrompt, type PermissionPromptProps, type PermissionStatus, PersonCard, type PersonCardProps, Phoenix, type PhoenixProps, PhotoGrid, type PhotoGridLabels, type PhotoGridProps, ProductMark, ProfileCard, type ProfileCardProps, type ProfileStat, Progress, type ProgressProps, PullToRefresh, type PullToRefreshProps, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, Screen, type ScreenProps, SearchField, type SearchFieldProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectOption, type SelectProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderValue, Spinner, type SpinnerProps, type Step, StepProgress, type StepProgressProps, type StepStatus, Stepper, type StepperProps, SuccessState, type SwipeAction, SwipeDeck, type SwipeDeckLabels, type SwipeDeckProps, type SwipeDirection, SwipeableRow, type SwipeableRowProps, Switch, type SwitchProps, TabBar, type TabBarItem, type TabBarProps, type TabItem, Tabs, type TabsProps, type TagOption, TagSelector, type TagSelectorProps, TextField, type TextFieldProps, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, TypingIndicator, type TypingIndicatorProps, VerifiedBadge, type VerifiedBadgeProps, type ViewerImage, WelcomeState, Wheel, WheelDivider, type WheelOption, WheelPicker, type WheelPickerProps, type WheelProps, YazakiaMark, YororisMark, addDays, addMonths, ageOn, alpha, calendarLabels, comboboxLabels, composeDate, dateFieldLabels, datePartsOrder, daysInMonth, formatTime, isRealDate, latestBirthDate, monthNames, prefetchNeighbours, splitDuration, textStyles, timeSlots, timeToMinutes, toast, todayIso, useCollapsingHeader, useCountdown, useDelayedWait, useReducedMotion, useTheme, uses12Hours };
+export { ActionSheet, type ActionSheetAction, type ActionSheetProps, type ActivityEvent, ActivityFeed, type ActivityFeedLabels, type ActivityFeedProps, type ActivityTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, BrandedRefresh, type BrandedRefreshProps, type BrandedRefreshScrollProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarLabels, type CalendarProps, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Combobox, type ComboboxLabels, type ComboboxProps, ConversationItem, type ConversationItemProps, Countdown, type CountdownProps, type CountdownUnits, DateField, type DateFieldLabels, type DateFieldProps, type DatePart, DateWheel, type DateWheelProps, DayStrip, type DayStripProps, type DescriptionItem, DescriptionList, type DescriptionListProps, EmptyState, type EmptyStateProps, ErrorState, Fab, type FabProps, GoalGauge, type GoalGaugeProps, type GridPhoto, type HapticKind, Header, type HeaderProps, IconButton, type IconButtonProps, ImageViewer, type ImageViewerProps, type Insets, KrizakaMark, Loader, LoaderGlyph, type LoaderGlyphProps, type LoaderProps, LoadingState, Mascot, type MascotProps, MascotState, type MascotStateProps, MatchDialog, type MatchDialogProps, MessageBubble, type MessageBubbleLabels, type MessageBubbleProps, MessageComposer, type MessageComposerProps, type MessageStatus, Meter, type MeterPart, type MeterProps, type Mode, MonthPicker, type MonthPickerProps, type Motion, type NativeMarkProps, NumberTicker, type NumberTickerProps, Onboarding, type OnboardingProps, type OnboardingSlide, OrazakaMark, OrochiaMark, OtpInput, type OtpInputProps, Pagination, type PaginationLabels, type PaginationProps, PermissionPrompt, type PermissionPromptProps, type PermissionStatus, PersonCard, type PersonCardProps, Phoenix, type PhoenixProps, PhotoGrid, type PhotoGridLabels, type PhotoGridProps, ProductMark, ProfileCard, type ProfileCardProps, type ProfileStat, Progress, type ProgressProps, PullToRefresh, type PullToRefreshProps, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, Screen, type ScreenProps, SearchField, type SearchFieldProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectOption, type SelectProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderValue, Spinner, type SpinnerProps, SplashHandoff, type SplashHandoffProps, type Step, StepProgress, type StepProgressProps, type StepStatus, Stepper, type StepperProps, SuccessState, type SwipeAction, SwipeDeck, type SwipeDeckLabels, type SwipeDeckProps, type SwipeDirection, SwipeableRow, type SwipeableRowProps, Switch, type SwitchProps, TabBar, type TabBarItem, type TabBarProps, type TabItem, Tabs, type TabsProps, type TagOption, TagSelector, type TagSelectorProps, TextField, type TextFieldProps, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, TypingIndicator, type TypingIndicatorProps, VerifiedBadge, type VerifiedBadgeProps, type ViewerImage, WelcomeState, Wheel, WheelDivider, type WheelOption, WheelPicker, type WheelPickerProps, type WheelProps, YazakiaMark, YororisMark, addDays, addMonths, ageOn, alpha, calendarLabels, comboboxLabels, composeDate, dateFieldLabels, datePartsOrder, daysInMonth, formatTime, isRealDate, latestBirthDate, monthNames, prefetchNeighbours, splitDuration, textStyles, timeSlots, timeToMinutes, toast, todayIso, useCollapsingHeader, useCountdown, useDelayedWait, useReducedMotion, useTheme, uses12Hours };