@krizaka/ui 3.6.0 → 3.7.0

package/dist/match-dialog.js.map

@@ -1 +1 @@
-{"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"]}
+{"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/vertical-video.d.ts

@@ -0,0 +1,112 @@
+import * as React from 'react';
+
+interface ShortFeedProps<T> extends Omit<React.ComponentProps<"section">, "children"> {
+    /** The feed's accessible name ("Videos"), passed translated. */
+    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, `preload` for the next, `near` false for the ones kept empty. */
+    renderItem: (item: T, state: {
+        active: boolean;
+        preload: "none" | "metadata" | "auto";
+        index: number;
+    }) => React.ReactNode;
+    /** The slides mounted around the one in view (before and after). Default 1; the others keep their height empty. */
+    window?: number;
+    /** Called when the slide in view changes. */
+    onActiveChange?: (index: number, item: T) => void;
+}
+/** A vertical snap-scrolling feed that plays the video in view, preloads the next and pauses the rest. */
+declare function ShortFeed<T>({ label, items, getId, renderItem, window: around, onActiveChange, className, onKeyDown, ...props }: ShortFeedProps<T>): React.JSX.Element;
+
+interface VerticalVideoLabels {
+    /** "Play" / "Pause" — the tap target over the picture. */
+    play: string;
+    pause: string;
+    /** "Like" / "Unlike" (the button's name; the state is `aria-pressed`). */
+    like: string;
+    comment: string;
+    share: string;
+    more: string;
+    /** "Follow Elena" — `{name}` is replaced by the creator's name. */
+    follow: string;
+    /** "Following Elena". */
+    following: string;
+    /** "More" / "Less" on a long caption. */
+    expand: string;
+    collapse: string;
+    /** The progress bar's name ("Progress"). */
+    progress: string;
+    /** The rail's name ("Actions"). */
+    actions: string;
+}
+declare const verticalVideoLabels: VerticalVideoLabels;
+interface VerticalVideoCreator {
+    name: string;
+    /** Their portrait. */
+    avatarSrc?: string;
+    /** The seal's words ("Verified"): shows the seal beside the name. */
+    verifiedLabel?: string;
+}
+interface VerticalVideoProps extends Omit<React.ComponentProps<"article">, "title" | "children"> {
+    /** The video's accessible name ("Video: Night shoot, part 2"), passed translated. */
+    title: string;
+    /** The clip — absent, the poster alone shows (MP4 or WebM; an HLS address only in Safari — use the player of `@krizaka/ui/video-player` for HLS). */
+    src?: string;
+    /** The picture until the first frame, and under reduced motion. */
+    poster?: string;
+    /** Plays while `true`; a `ShortFeed` passes it for the slide in view. Default `true`. */
+    active?: boolean;
+    /** The next slide's: `auto` loads it ahead, `none` waits. Default `metadata`. */
+    preload?: "none" | "metadata" | "auto";
+    /** Plays again at the end. Default `true`. */
+    loop?: boolean;
+    /** Starts muted (autoplay needs it). Default `true`. */
+    muted?: boolean;
+    /** Who made it: name, portrait, the seal's words. */
+    creator: VerticalVideoCreator;
+    /** A pill beside the name: "AI-GENERATED" — said on the picture, never only in a page's footnote. */
+    disclosure?: string;
+    /** The caption: collapsed to two lines, expandable when long. */
+    caption?: string;
+    /** Tags under the caption (without `#`). */
+    tags?: readonly string[];
+    /** The sound or credit line ("Original sound — Elena"). */
+    credit?: string;
+    /** The like count under its button, compact (`12.4K`) in `locale`. */
+    likes?: number;
+    /** The comment count under its button. */
+    comments?: number;
+    /** The share count under its button. */
+    shares?: number;
+    /** Whether the viewer likes it: `aria-pressed` on the like button. */
+    liked?: boolean;
+    /** Whether the viewer follows the creator: the "+" on the avatar becomes a check. */
+    following?: boolean;
+    /** The viewer likes or unlikes (the button, `L`, a double tap). */
+    onLike?: (liked: boolean) => void;
+    /** Opens the comments; without it the button still shows. */
+    onComment?: () => void;
+    /** Opens the share sheet. */
+    onShare?: () => void;
+    /** The viewer follows or unfollows; without it the avatar has no "+". */
+    onFollow?: (following: boolean) => void;
+    /** The "more" button's action (report, hide); without it the button is not drawn. */
+    onMore?: () => void;
+    /** The product's own action on the rail: a tip, an unlock — a button of yours (≥ 44 px, named). */
+    tipSlot?: React.ReactNode;
+    /** Top left: a chip over the picture (an auction's time left). */
+    topStart?: React.ReactNode;
+    /** Above the caption: a goal gauge, a challenge's progress. */
+    aboveCaption?: React.ReactNode;
+    /** The locale of the counts. Default `en`. */
+    locale?: string;
+    /** Every word, passed translated. */
+    labels?: Partial<VerticalVideoLabels>;
+}
+/** One short video: 9:16, the rail of actions on the right, the creator's caption bottom-left, a progress hairline. */
+declare function VerticalVideo({ title, src, poster, active, preload, loop, muted, creator, disclosure, caption, tags, credit, likes, comments, shares, liked, following, onLike, onComment, onShare, onFollow, onMore, tipSlot, topStart, aboveCaption, locale, labels: custom, className, onKeyDown, ...props }: VerticalVideoProps): React.JSX.Element;
+
+export { ShortFeed, type ShortFeedProps, VerticalVideo, type VerticalVideoCreator, type VerticalVideoLabels, type VerticalVideoProps, verticalVideoLabels };