@krizaka/ui 3.38.0 → 3.40.0

package/dist/mascot-quote.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Mascot
-} from "./chunk-JFJECOZ2.js";
+} from "./chunk-M4DBVG43.js";
 import {
   cn
 } from "./chunk-WU4VLSEA.js";

package/dist/mascot-state.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Mascot
-} from "./chunk-BCVLLY3R.js";
+} from "./chunk-EZC54B5C.js";
 
 // src/mascot-state/mascot-state.tsx
 import { tv } from "tailwind-variants";

package/dist/mascots.d.ts

@@ -2,6 +2,20 @@ import { M as MascotBird, a as MascotMood, b as MascotTone } from './geometry-DX
 export { c as MASCOT_BIRDS, d as MASCOT_MOODS } from './geometry-DX-W-Yyf.js';
 import * as React from 'react';
 
+/**
+ * The life of the flock — what a bird does when nobody asks it for anything (`Mascot life`): it breathes, blinks in its
+ * own rhythm, tilts its head, ruffles a wing, now and then hops — each in character: the falcon watches (a slow scan),
+ * the owl reads (a tilt, a slow double blink), the duck builds (quick nods, like typing), the flamingo answers (its neck
+ * sways towards you), the pigeon delivers (its head bobs, its parcel swings). CSS only: transform and opacity, no
+ * timer, no frame loop; `Flock` adds the moments between birds (a glance, a delivery) by setting `look` and `flying`.
+ *
+ * Every motion is a keyframe on its own group (hop → bird → look → head), so they add up instead of fighting for one
+ * `transform`; each starts at a phase of its own (`--kzb-ph`) so two birds never move together.
+ */
+
+declare const MASCOT_LOOKS: readonly ["center", "left", "right", "up"];
+type MascotLook = (typeof MASCOT_LOOKS)[number];
+
 type MascotProps = Omit<React.ComponentProps<"svg">, "children"> & {
     /** Which bird of the flock: `falcon` (watch, security), `owl` (reading, documents), `duck` (building, code), `flamingo` (answers, support), `pigeon` (delivery, notifications), `lovebird` (introductions, two people who meet), `crane` (listening, a calm moment), `magpie` (the score: points, standings, trophies), `beaver` (the shop: a small business at work). */
     bird?: MascotBird;
@@ -15,12 +29,28 @@ type MascotProps = Omit<React.ComponentProps<"svg">, "children"> & {
     animated?: boolean;
     /** An accessible name (the bird becomes an image); without it the mascot is decorative. */
     title?: string;
+    /**
+     * The bird at ease, in character (mood `welcome`, the default): it breathes, blinks in its own rhythm, tilts its head,
+     * ruffles a wing, now and then hops — the falcon watches, the owl reads, the duck builds, the flamingo answers, the
+     * pigeon delivers. CSS only, still under `prefers-reduced-motion` and with `animated={false}`.
+     */
+    life?: boolean;
+    /** Where in its cycles the bird starts, 0 to 1 (default: from the instance's id), so two birds never move together. */
+    phase?: number;
+    /** Where it looks (`life`): `left` and `right` turn the head and the eyes, `up` raises them, `center` rests. */
+    look?: MascotLook;
+    /** In flight (`life`): the wings beat, the body leans into the trip — the pigeon of a delivery. */
+    flying?: boolean;
+    /** Which way it leans in flight, -1 (left) to 1 (right). */
+    bank?: number;
+    /** A tap or a poke just happened (`life`): a small jump. Set it for a moment, then unset. */
+    poked?: boolean;
 };
 /**
  * One of the nine Krizaka figures in one mood — for the moments a product speaks to a person: a welcome, a long wait,
  * a success, an empty list, an error. Drawn in the host's brand colours by default (`tone="own"` for the story's).
  */
-declare function Mascot({ bird, mood, tone, size, animated, title, className, ...props }: MascotProps): React.JSX.Element;
+declare function Mascot({ bird, mood, tone, size, animated, title, life, phase, look, flying, bank, poked, className, style, ...props }: MascotProps): React.JSX.Element;
 
 type PhoenixProps = Omit<React.ComponentProps<"svg">, "children"> & {
     /** `own` (default): the violet wing and the gold wing of the Krizaka story. `brand`: the host's accent and accent-2. */
@@ -35,4 +65,4 @@ type PhoenixProps = Omit<React.ComponentProps<"svg">, "children"> & {
 /** The phoenix: the comeback, beside the five birds of the flock (`Mascot`). Decorative unless titled. */
 declare function Phoenix({ tone, size, animated, title, className, ...props }: PhoenixProps): React.JSX.Element;
 
-export { Mascot, MascotBird, MascotMood, type MascotProps, MascotTone, Phoenix, type PhoenixProps };
+export { MASCOT_LOOKS, Mascot, MascotBird, type MascotLook, MascotMood, type MascotProps, MascotTone, Phoenix, type PhoenixProps };

package/dist/mascots.js

@@ -1,9 +1,10 @@
 "use client";
 import {
   MASCOT_BIRDS,
+  MASCOT_LOOKS,
   MASCOT_MOODS,
   Mascot
-} from "./chunk-BCVLLY3R.js";
+} from "./chunk-EZC54B5C.js";
 
 // src/mascots/phoenix.tsx
 import { useId } from "react";
@@ -90,6 +91,7 @@ function Phoenix({ tone = "own", size = 120, animated = true, title, className,
 }
 export {
   MASCOT_BIRDS,
+  MASCOT_LOOKS,
   MASCOT_MOODS,
   Mascot,
   Phoenix

package/dist/mascots.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/mascots/phoenix.tsx","../src/mascots/phoenix-geometry.ts"],"sourcesContent":["// The phoenix of the Krizaka landscape, on its own: two wings — two rival flames — around one bright core. The sixth\n// figure of the flock: it does no job, it stands for the comeback (a relaunch, a recovered account, a second chance).\nimport type * as React from \"react\";\nimport { useId } from \"react\";\n\nimport { PHOENIX, PHOENIX_PALETTES,type PhoenixPalette } from \"./phoenix-geometry\";\n\nconst CSS = `\n@keyframes kzp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }\n@keyframes kzp-core { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }\n.kzp[data-animated] { animation: kzp-float 5s ease-in-out infinite; }\n.kzp[data-animated] .kzp-core { animation: kzp-core 2.8s ease-in-out infinite; }\n@media (prefers-reduced-motion: reduce) { .kzp, .kzp .kzp-core { animation: none !important; } }\n`;\n\nexport type PhoenixProps = Omit<React.ComponentProps<\"svg\">, \"children\"> & {\n  /** `own` (default): the violet wing and the gold wing of the Krizaka story. `brand`: the host's accent and accent-2. */\n  tone?: \"own\" | \"brand\";\n  /** Width and height in pixels. */\n  size?: number;\n  /** A slow float and a breathing core. Off with `false`; always off under `prefers-reduced-motion`. */\n  animated?: boolean;\n  /** An accessible name (the phoenix becomes an image); without it, it is decorative. */\n  title?: string;\n};\n\nconst BRAND: PhoenixPalette = {\n  left: [\"var(--kz-accent-2, var(--kz-accent))\", \"var(--kz-accent)\"],\n  right: [\"var(--kz-accent)\", \"var(--kz-accent-2, var(--kz-accent))\"],\n  core: [\"#ffffff\", \"var(--kz-accent)\"],\n  body: \"var(--kz-surface-3)\",\n  edge: \"var(--kz-border-strong)\",\n  crest: \"var(--kz-accent)\",\n};\n\n/** The phoenix: the comeback, beside the five birds of the flock (`Mascot`). Decorative unless titled. */\nexport function Phoenix({ tone = \"own\", size = 120, animated = true, title, className, ...props }: PhoenixProps) {\n  const id = useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n  const p = tone === \"brand\" ? BRAND : PHOENIX_PALETTES.own;\n  const a11y = title ? { role: \"img\", \"aria-label\": title } : { \"aria-hidden\": true };\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      data-animated={animated ? \"\" : undefined}\n      className={[\"kzp\", className].filter(Boolean).join(\" \")}\n      {...a11y}\n      {...props}\n    >\n      <style>{CSS}</style>\n      <defs>\n        <linearGradient id={`kzp-l-${id}`} x1=\"1\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0%\" stopColor={p.left[0]} />\n          <stop offset=\"100%\" stopColor={p.left[1]} />\n        </linearGradient>\n        <linearGradient id={`kzp-r-${id}`} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n          <stop offset=\"0%\" stopColor={p.right[0]} />\n          <stop offset=\"100%\" stopColor={p.right[1]} />\n        </linearGradient>\n        <radialGradient id={`kzp-c-${id}`}>\n          <stop offset=\"0%\" stopColor={p.core[0]} />\n          <stop offset=\"100%\" stopColor={p.core[1]} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      <path d={PHOENIX.wingL} fill={`url(#kzp-l-${id})`} />\n      <path d={PHOENIX.wingR} fill={`url(#kzp-r-${id})`} />\n      <path d={PHOENIX.tailL} fill={`url(#kzp-l-${id})`} opacity=\".7\" />\n      <path d={PHOENIX.tailR} fill={`url(#kzp-r-${id})`} opacity=\".7\" />\n      <path d={PHOENIX.body} fill={p.body} stroke={p.edge} strokeOpacity=\".5\" />\n      <circle cx=\"60\" cy=\"58\" r=\"12\" fill={`url(#kzp-c-${id})`} className=\"kzp-core\" />\n      <circle cx=\"60\" cy=\"58\" r=\"3.5\" fill=\"#fff\" />\n      <path d={PHOENIX.crest} stroke={p.crest} strokeWidth=\"2\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n","/** The phoenix's geometry (120 × 120), drawn by the web `Phoenix` and the native one. */\nexport const PHOENIX = {\n  wingL: \"M56 62 C40 40 22 36 8 40 C22 46 30 56 34 70 C40 64 48 62 56 62 Z\",\n  wingR: \"M64 62 C80 40 98 36 112 40 C98 46 90 56 86 70 C80 64 72 62 64 62 Z\",\n  tailL: \"M52 66 C46 82 40 94 30 104 C44 98 52 90 58 78 Z\",\n  tailR: \"M68 66 C74 82 80 94 90 104 C76 98 68 90 62 78 Z\",\n  body: \"M60 34 L68 60 L60 82 L52 60 Z\",\n  crest: \"M60 34 L56 24 M60 34 L64 24\",\n} as const;\n\nexport interface PhoenixPalette {\n  /** The left wing's gradient (top → bottom). */\n  readonly left: readonly [string, string];\n  /** The right wing's gradient. */\n  readonly right: readonly [string, string];\n  /** The core's glow: centre, edge. */\n  readonly core: readonly [string, string];\n  /** The body and its edge. */\n  readonly body: string;\n  readonly edge: string;\n  /** The crest. */\n  readonly crest: string;\n}\n\n/** The phoenix of the Krizaka story: a violet wing, a gold wing (the brand layer's own colours, like the marks). */\nexport const PHOENIX_PALETTES: { readonly own: PhoenixPalette } = {\n  own: {\n    left: [\"#c084fc\", \"#7c3aed\"],\n    right: [\"#fde68a\", \"#f59e0b\"],\n    core: [\"#fff7ed\", \"#fb923c\"],\n    body: \"#1f1530\",\n    edge: \"#e9d5ff\",\n    crest: \"#fbbf24\",\n  },\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/mascots/phoenix.tsx","../src/mascots/phoenix-geometry.ts"],"sourcesContent":["// The phoenix of the Krizaka landscape, on its own: two wings — two rival flames — around one bright core. The sixth\n// figure of the flock: it does no job, it stands for the comeback (a relaunch, a recovered account, a second chance).\nimport type * as React from \"react\";\nimport { useId } from \"react\";\n\nimport { PHOENIX, PHOENIX_PALETTES,type PhoenixPalette } from \"./phoenix-geometry\";\n\nconst CSS = `\n@keyframes kzp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }\n@keyframes kzp-core { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }\n.kzp[data-animated] { animation: kzp-float 5s ease-in-out infinite; }\n.kzp[data-animated] .kzp-core { animation: kzp-core 2.8s ease-in-out infinite; }\n@media (prefers-reduced-motion: reduce) { .kzp, .kzp .kzp-core { animation: none !important; } }\n`;\n\nexport type PhoenixProps = Omit<React.ComponentProps<\"svg\">, \"children\"> & {\n  /** `own` (default): the violet wing and the gold wing of the Krizaka story. `brand`: the host's accent and accent-2. */\n  tone?: \"own\" | \"brand\";\n  /** Width and height in pixels. */\n  size?: number;\n  /** A slow float and a breathing core. Off with `false`; always off under `prefers-reduced-motion`. */\n  animated?: boolean;\n  /** An accessible name (the phoenix becomes an image); without it, it is decorative. */\n  title?: string;\n};\n\nconst BRAND: PhoenixPalette = {\n  left: [\"var(--kz-accent-2, var(--kz-accent))\", \"var(--kz-accent)\"],\n  right: [\"var(--kz-accent)\", \"var(--kz-accent-2, var(--kz-accent))\"],\n  core: [\"#ffffff\", \"var(--kz-accent)\"],\n  body: \"var(--kz-surface-3)\",\n  edge: \"var(--kz-border-strong)\",\n  crest: \"var(--kz-accent)\",\n};\n\n/** The phoenix: the comeback, beside the five birds of the flock (`Mascot`). Decorative unless titled. */\nexport function Phoenix({ tone = \"own\", size = 120, animated = true, title, className, ...props }: PhoenixProps) {\n  const id = useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n  const p = tone === \"brand\" ? BRAND : PHOENIX_PALETTES.own;\n  const a11y = title ? { role: \"img\", \"aria-label\": title } : { \"aria-hidden\": true };\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      data-animated={animated ? \"\" : undefined}\n      className={[\"kzp\", className].filter(Boolean).join(\" \")}\n      {...a11y}\n      {...props}\n    >\n      <style>{CSS}</style>\n      <defs>\n        <linearGradient id={`kzp-l-${id}`} x1=\"1\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0%\" stopColor={p.left[0]} />\n          <stop offset=\"100%\" stopColor={p.left[1]} />\n        </linearGradient>\n        <linearGradient id={`kzp-r-${id}`} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n          <stop offset=\"0%\" stopColor={p.right[0]} />\n          <stop offset=\"100%\" stopColor={p.right[1]} />\n        </linearGradient>\n        <radialGradient id={`kzp-c-${id}`}>\n          <stop offset=\"0%\" stopColor={p.core[0]} />\n          <stop offset=\"100%\" stopColor={p.core[1]} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      <path d={PHOENIX.wingL} fill={`url(#kzp-l-${id})`} />\n      <path d={PHOENIX.wingR} fill={`url(#kzp-r-${id})`} />\n      <path d={PHOENIX.tailL} fill={`url(#kzp-l-${id})`} opacity=\".7\" />\n      <path d={PHOENIX.tailR} fill={`url(#kzp-r-${id})`} opacity=\".7\" />\n      <path d={PHOENIX.body} fill={p.body} stroke={p.edge} strokeOpacity=\".5\" />\n      <circle cx=\"60\" cy=\"58\" r=\"12\" fill={`url(#kzp-c-${id})`} className=\"kzp-core\" />\n      <circle cx=\"60\" cy=\"58\" r=\"3.5\" fill=\"#fff\" />\n      <path d={PHOENIX.crest} stroke={p.crest} strokeWidth=\"2\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n","/** The phoenix's geometry (120 × 120), drawn by the web `Phoenix` and the native one. */\nexport const PHOENIX = {\n  wingL: \"M56 62 C40 40 22 36 8 40 C22 46 30 56 34 70 C40 64 48 62 56 62 Z\",\n  wingR: \"M64 62 C80 40 98 36 112 40 C98 46 90 56 86 70 C80 64 72 62 64 62 Z\",\n  tailL: \"M52 66 C46 82 40 94 30 104 C44 98 52 90 58 78 Z\",\n  tailR: \"M68 66 C74 82 80 94 90 104 C76 98 68 90 62 78 Z\",\n  body: \"M60 34 L68 60 L60 82 L52 60 Z\",\n  crest: \"M60 34 L56 24 M60 34 L64 24\",\n} as const;\n\nexport interface PhoenixPalette {\n  /** The left wing's gradient (top → bottom). */\n  readonly left: readonly [string, string];\n  /** The right wing's gradient. */\n  readonly right: readonly [string, string];\n  /** The core's glow: centre, edge. */\n  readonly core: readonly [string, string];\n  /** The body and its edge. */\n  readonly body: string;\n  readonly edge: string;\n  /** The crest. */\n  readonly crest: string;\n}\n\n/** The phoenix of the Krizaka story: a violet wing, a gold wing (the brand layer's own colours, like the marks). */\nexport const PHOENIX_PALETTES: { readonly own: PhoenixPalette } = {\n  own: {\n    left: [\"#c084fc\", \"#7c3aed\"],\n    right: [\"#fde68a\", \"#f59e0b\"],\n    core: [\"#fff7ed\", \"#fb923c\"],\n    body: \"#1f1530\",\n    edge: \"#e9d5ff\",\n    crest: \"#fbbf24\",\n  },\n};\n"],"mappings":"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","names":[]}

package/dist/motion.css

@@ -247,7 +247,7 @@ svg[data-kz-icon="ExternalIcon"] {
 /* A figure that climbs (NumberTicker): an invisible copy of the final value shares the grid cell and holds the width. */
 .kz-count {
   display: inline-grid;
-  font-variant-numeric: tabular-nums;
+  font-variant-numeric: var(--kz-figures, lining-nums tabular-nums);
 }
 .kz-count > * {
   grid-area: 1 / 1;

package/dist/native/vertical-video.js

@@ -147,7 +147,7 @@ var styles = StyleSheet.create({
   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" },
+  count: { fontVariant: ["lining-nums", "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 },

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

@@ -1 +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":[]}
+{"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: [\"lining-nums\", \"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

@@ -312,7 +312,7 @@ declare const textStyles: {
         fontSize: number;
         lineHeight: number;
         fontWeight: "700";
-        fontVariant: "tabular-nums"[];
+        fontVariant: ("lining-nums" | "tabular-nums")[];
     };
 };
 

package/dist/native.js

@@ -495,7 +495,7 @@ var textStyles = StyleSheet.create({
   body: { fontSize: 15, lineHeight: 21 },
   caption: { fontSize: 12, lineHeight: 16 },
   label: { fontSize: 14, lineHeight: 18, fontWeight: "700" },
-  mono: { fontSize: 14, lineHeight: 18, fontWeight: "700", fontVariant: ["tabular-nums"] }
+  mono: { fontSize: 14, lineHeight: 18, fontWeight: "700", fontVariant: ["lining-nums", "tabular-nums"] }
 });
 var styles = textStyles;
 
@@ -1930,7 +1930,7 @@ function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md"
 var styles13 = StyleSheet13.create({
   root: { flexDirection: "row", alignItems: "baseline", gap: 6 },
   segment: { flexDirection: "row", alignItems: "baseline" },
-  value: { fontWeight: "900", fontVariant: ["tabular-nums"], letterSpacing: -0.3 },
+  value: { fontWeight: "900", fontVariant: ["lining-nums", "tabular-nums"], letterSpacing: -0.3 },
   unit: { marginLeft: 2, fontWeight: "700", textTransform: "uppercase" },
   label: { fontWeight: "600", marginRight: 2 }
 });
@@ -2010,7 +2010,7 @@ var styles14 = StyleSheet14.create({
   box: { width: 64, gap: 4 },
   yearBox: { width: 88, gap: 4 },
   part: { fontSize: 11, lineHeight: 14 },
-  input: { height: 44, borderWidth: 1, paddingHorizontal: 10, fontSize: 16, fontVariant: ["tabular-nums"], textAlign: "center" },
+  input: { height: 44, borderWidth: 1, paddingHorizontal: 10, fontSize: 16, fontVariant: ["lining-nums", "tabular-nums"], textAlign: "center" },
   caption: { fontSize: 12, lineHeight: 16 },
   disabled: { opacity: 0.5 }
 });
@@ -2155,7 +2155,7 @@ var styles15 = StyleSheet15.create({
   band: { position: "absolute", left: 6, right: 6, borderWidth: StyleSheet15.hairlineWidth },
   column: { minWidth: 56, flexGrow: 1 },
   item: { alignItems: "center", justifyContent: "center", paddingHorizontal: 8 },
-  itemText: { fontSize: 18, fontVariant: ["tabular-nums"] },
+  itemText: { fontSize: 18, fontVariant: ["lining-nums", "tabular-nums"] },
   divider: { alignSelf: "center", fontSize: 18, fontWeight: "600" },
   disabled: { opacity: 0.4 }
 });
@@ -2453,7 +2453,7 @@ var styles16 = StyleSheet16.create({
   weekday: { width: 44, textAlign: "center", fontSize: 11, fontWeight: "700", paddingBottom: 4 },
   cell: { width: 44, height: 44, marginVertical: 1 },
   day: { flex: 1, alignItems: "center", justifyContent: "center" },
-  dayText: { fontSize: 15, fontVariant: ["tabular-nums"] },
+  dayText: { fontSize: 15, fontVariant: ["lining-nums", "tabular-nums"] },
   node: { width: 5, height: 5, borderRadius: 1, transform: [{ rotate: "45deg" }] },
   todayNode: { position: "absolute", bottom: 5 },
   months: { flexDirection: "row", flexWrap: "wrap", width: 264, gap: 6 },
@@ -2463,11 +2463,11 @@ var styles16 = StyleSheet16.create({
   stripDay: { width: 56, height: 72, alignItems: "center", justifyContent: "center", gap: 2, borderWidth: 1 },
   stripNode: { position: "absolute", top: 6 },
   stripWeekday: { fontSize: 11, fontWeight: "700", letterSpacing: 0.5 },
-  stripNumber: { fontSize: 19, fontWeight: "700", fontVariant: ["tabular-nums"] },
+  stripNumber: { fontSize: 19, fontWeight: "700", fontVariant: ["lining-nums", "tabular-nums"] },
   dot: { width: 6, height: 6, borderRadius: 3 },
   slots: { flexDirection: "row", flexWrap: "wrap", gap: 8, alignSelf: "stretch" },
   slot: { minWidth: 88, height: 44, paddingHorizontal: 12, alignItems: "center", justifyContent: "center", borderWidth: 1 },
-  slotText: { fontSize: 15, fontWeight: "600", fontVariant: ["tabular-nums"] },
+  slotText: { fontSize: 15, fontWeight: "600", fontVariant: ["lining-nums", "tabular-nums"] },
   field: { gap: 6, alignSelf: "stretch" },
   fieldLabel: { fontSize: 12, lineHeight: 16, fontWeight: "600" },
   caption: { fontSize: 12, lineHeight: 16 },
@@ -4042,7 +4042,7 @@ function NumberTicker({ value, locale, format, trigger = "mount", duration = 110
     };
   }, [value, reduce, trigger, duration, announce, anim, writer]);
   const digits = Number.isInteger(value) ? Math.round(shown) : shown;
-  return /* @__PURE__ */ jsx42(Txt, { variant, tone: tone3, "aria-label": writer.format(value), style: [{ fontVariant: ["tabular-nums"] }, style], children: /* @__PURE__ */ jsx42(Text13, { "aria-hidden": true, children: writer.format(digits) }) });
+  return /* @__PURE__ */ jsx42(Txt, { variant, tone: tone3, "aria-label": writer.format(value), style: [{ fontVariant: ["lining-nums", "tabular-nums"] }, style], children: /* @__PURE__ */ jsx42(Text13, { "aria-hidden": true, children: writer.format(digits) }) });
 }
 
 // src/native/onboarding.tsx
@@ -4201,7 +4201,7 @@ function Pagination({ page = 1, pageCount, onPageChange, hasPrevious, hasNext, o
 var styles32 = StyleSheet32.create({
   row: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 12 },
   button: { width: 44, height: 44, alignItems: "center", justifyContent: "center", borderWidth: StyleSheet32.hairlineWidth },
-  status: { fontSize: 13, fontWeight: "600", fontVariant: ["tabular-nums"] }
+  status: { fontSize: 13, fontWeight: "600", fontVariant: ["lining-nums", "tabular-nums"] }
 });
 
 // src/native/permission-prompt.tsx
@@ -5273,7 +5273,7 @@ var styles44 = StyleSheet44.create({
   rootVertical: { alignSelf: "flex-start", alignItems: "center" },
   header: { flexDirection: "row", justifyContent: "space-between", alignItems: "baseline", gap: 12 },
   label: { fontSize: 12, fontWeight: "600" },
-  value: { fontSize: 12, fontVariant: ["tabular-nums"] },
+  value: { fontSize: 12, fontVariant: ["lining-nums", "tabular-nums"] },
   control: { height: 44, justifyContent: "center", paddingHorizontal: THUMB / 2 },
   controlVertical: { flex: 1, minHeight: 160, width: 44, alignItems: "center", paddingVertical: THUMB / 2 },
   track: { height: 6 },
@@ -5296,7 +5296,7 @@ var styles44 = StyleSheet44.create({
   },
   bubble: { position: "absolute", bottom: THUMB + 6, left: -17, minWidth: 56, paddingHorizontal: 8, paddingVertical: 4, alignItems: "center" },
   bubbleVertical: { position: "absolute", left: THUMB + 8, top: -2, minWidth: 48, paddingHorizontal: 8, paddingVertical: 4, alignItems: "center" },
-  bubbleText: { fontSize: 12, fontWeight: "700", fontVariant: ["tabular-nums"] },
+  bubbleText: { fontSize: 12, fontWeight: "700", fontVariant: ["lining-nums", "tabular-nums"] },
   marks: { height: 16, marginHorizontal: THUMB / 2 },
   mark: { position: "absolute", width: 40, fontSize: 11, fontWeight: "500" },
   disabled: { opacity: 0.4 }