@krizaka/ui 2.2.0 → 2.4.0

package/dist/native/media-capture.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/native/media-capture.tsx"],"sourcesContent":["// @krizaka/ui/native/media-capture — its own entry, because it imports expo-camera: an optional peer, installed only\n// by the apps that use the camera. The theme and the buttons come from @krizaka/ui/native.\nimport { Button, Txt, useReducedMotion, useTheme } from \"@krizaka/ui/native\";\nimport { CameraView, useCameraPermissions, useMicrophonePermissions } from \"expo-camera\";\nimport * as React from \"react\";\nimport { Linking, Pressable, type StyleProp, StyleSheet, View, type ViewStyle } from \"react-native\";\nimport Svg, { Path } from \"react-native-svg\";\n\nexport type MediaCaptureLabels = {\n  /** Why the camera is asked for, before the request (\"Use your camera to take a photo\"). */\n  prompt: string;\n  /** The button that asks (\"Turn on the camera\"). */\n  start: string;\n  /** Permission refused for good (\"Camera access is off. Turn it on in Settings.\"). */\n  denied: string;\n  /** Opens the app's settings (\"Open Settings\"). */\n  settings: string;\n  takePhoto: string;\n  startRecording: string;\n  stopRecording: string;\n  switchCamera: string;\n};\n\nexport type NativeCaptureResult = {\n  /** The file of the photo or the clip, on the device. */\n  uri: string;\n  /** `photo` or `video`. */\n  kind: \"photo\" | \"video\";\n};\n\nexport type MediaCaptureProps = {\n  /** What it captures: `photo` (default) or `video`. */\n  mode?: \"photo\" | \"video\";\n  /** The camera at first: `front` (default) or `back`. */\n  facing?: \"front\" | \"back\";\n  /** The longest clip, in seconds. */\n  maxDuration?: number;\n  /** Called with the photo taken or the clip recorded. */\n  onCapture: (result: NativeCaptureResult) => void;\n  /** Called when a capture fails. */\n  onError?: (error: unknown) => void;\n  /** The width / height ratio of the preview. Default 3 / 4. */\n  aspectRatio?: number;\n  /** The words, passed translated. */\n  labels: MediaCaptureLabels;\n  /** Styles merged last, on the frame. */\n  style?: StyleProp<ViewStyle>;\n};\n\n/**\n * The camera in a screen, on expo-camera: asks for the permission only when the person presses the button, sends them\n * to Settings when it was refused for good, takes a photo or records a clip (and the microphone for a clip), switches\n * cameras. The web `MediaCapture` with the same words.\n */\nexport function MediaCapture({ mode = \"photo\", facing: initialFacing = \"front\", maxDuration, onCapture, onError, aspectRatio = 3 / 4, labels, style }: MediaCaptureProps) {\n  const { theme, radius } = useTheme();\n  const reduce = useReducedMotion();\n  const camera = React.useRef<CameraView>(null);\n  const [permission, requestPermission] = useCameraPermissions();\n  const [microphone, requestMicrophone] = useMicrophonePermissions();\n  const [facing, setFacing] = React.useState(initialFacing);\n  const [ready, setReady] = React.useState(false);\n  const [recording, setRecording] = React.useState(false);\n\n  const ask = async () => {\n    const result = await requestPermission();\n    if (result.granted && mode === \"video\" && !microphone?.granted) await requestMicrophone();\n  };\n\n  const shoot = async () => {\n    if (!camera.current || !ready) return;\n    try {\n      if (mode === \"photo\") {\n        const photo = await camera.current.takePictureAsync({ quality: 0.9 });\n        if (photo) onCapture({ uri: photo.uri, kind: \"photo\" });\n      } else if (recording) {\n        camera.current.stopRecording();\n      } else {\n        setRecording(true);\n        const clip = await camera.current.recordAsync(maxDuration ? { maxDuration } : undefined);\n        setRecording(false);\n        if (clip) onCapture({ uri: clip.uri, kind: \"video\" });\n      }\n    } catch (error) {\n      setRecording(false);\n      onError?.(error);\n    }\n  };\n\n  const frame = [styles.frame, { aspectRatio, borderRadius: radius.md, backgroundColor: theme.media }, style];\n\n  if (!permission?.granted) {\n    const blocked = permission ? !permission.canAskAgain : false;\n    return (\n      <View style={[frame, styles.panel]}>\n        <Txt style={styles.center}>\n          {blocked ? labels.denied : labels.prompt}\n        </Txt>\n        {blocked ? (\n          <Button label={labels.settings} variant=\"secondary\" onPress={() => void Linking.openSettings()} />\n        ) : (\n          <Button label={labels.start} variant=\"primary\" onPress={() => void ask()} />\n        )}\n      </View>\n    );\n  }\n\n  return (\n    <View style={frame}>\n      <CameraView\n        ref={camera}\n        style={StyleSheet.absoluteFill}\n        facing={facing}\n        mode={mode === \"video\" ? \"video\" : \"picture\"}\n        mirror={facing === \"front\"}\n        onCameraReady={() => setReady(true)}\n        aria-hidden\n      />\n      <View style={styles.bar}>\n        <View style={styles.side} />\n        <Pressable\n          role=\"button\"\n          aria-label={mode === \"photo\" ? labels.takePhoto : recording ? labels.stopRecording : labels.startRecording}\n          aria-disabled={!ready}\n          disabled={!ready}\n          onPress={() => void shoot()}\n          style={({ pressed }) => [styles.shutter, { borderColor: theme.textOnMedia, opacity: pressed && !reduce ? 0.8 : 1 }]}\n        >\n          <View\n            style={[\n              mode === \"video\" && recording ? styles.stop : styles.dot,\n              { backgroundColor: mode === \"video\" ? theme.danger : theme.textOnMedia },\n            ]}\n          />\n        </Pressable>\n        <Pressable\n          role=\"button\"\n          aria-label={labels.switchCamera}\n          aria-disabled={recording}\n          disabled={recording}\n          hitSlop={8}\n          onPress={() => setFacing((f) => (f === \"front\" ? \"back\" : \"front\"))}\n          style={[styles.side, styles.flip, { backgroundColor: theme.scrimStrong, opacity: recording ? 0 : 1 }]}\n        >\n          <Svg width={22} height={22} viewBox=\"0 0 24 24\" fill=\"none\" stroke={theme.textOnMedia} strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n            <Path d=\"M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3M18 3v4h-4M6 21v-4h4\" />\n          </Svg>\n        </Pressable>\n      </View>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  frame: { width: \"100%\", overflow: \"hidden\" },\n  panel: { alignItems: \"center\", justifyContent: \"center\", gap: 16, padding: 24 },\n  center: { textAlign: \"center\" },\n  bar: { position: \"absolute\", left: 0, right: 0, bottom: 16, flexDirection: \"row\", alignItems: \"center\", justifyContent: \"space-evenly\" },\n  side: { width: 48, height: 48 },\n  flip: { borderRadius: 24, alignItems: \"center\", justifyContent: \"center\" },\n  shutter: { width: 72, height: 72, borderRadius: 36, borderWidth: 4, alignItems: \"center\", justifyContent: \"center\" },\n  dot: { width: 54, height: 54, borderRadius: 27 },\n  stop: { width: 26, height: 26, borderRadius: 6 },\n});\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,50 @@
+import { ContentType, VideoContentFit } from 'expo-video';
+import * as React from 'react';
+import { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+
+type VideoPlayerSource = {
+    /** The address (MP4 or an HLS `.m3u8`, signed by your server). */
+    uri: string;
+    /** `hls` when the address does not end in `.m3u8`; `auto` (default) otherwise. */
+    contentType?: ContentType;
+    /** Headers sent with the request (an authorization). */
+    headers?: Record<string, string>;
+};
+type VideoPlayerProps = {
+    /** The video. A new source replaces the current one. */
+    source: VideoPlayerSource;
+    /** The accessible name of the player ("Video: Sunset over Montréal"), passed translated. */
+    title: string;
+    /** The picture shown until the first frame. */
+    poster?: ImageSourcePropType;
+    /** Starts playing (muted unless `muted={false}`) — not when the system asks to reduce motion. */
+    autoPlay?: boolean;
+    /** Starts muted. Default: `autoPlay`. */
+    muted?: boolean;
+    /** Plays again from the start at the end. */
+    loop?: boolean;
+    /** Pauses while `true`: the app passes it when the video leaves the screen (a FlatList's viewability). */
+    paused?: boolean;
+    /** The platform's controls (default `true`: accessible, with full screen). `false` for a story or a background. */
+    nativeControls?: boolean;
+    /** Allows full screen from the controls. Default `true`. */
+    fullscreen?: boolean;
+    /** Allows picture in picture. Default `false`. */
+    pictureInPicture?: boolean;
+    /** How the picture fills the frame: `contain` (default), `cover`, `fill`. */
+    contentFit?: VideoContentFit;
+    /** The width / height ratio of the frame. Default 16 / 9. */
+    aspectRatio?: number;
+    /** Called when it starts or stops playing. */
+    onPlayingChange?: (playing: boolean) => void;
+    /** Styles merged last, on the frame. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * A video on expo-video: the platform's own player and controls (accessible, full screen, picture in picture), the
+ * poster until the first frame, autoplay that waits under reduced motion, and `paused` to stop it off screen. The
+ * web `VideoPlayer` draws its own controls; here the system's are the right ones.
+ */
+declare function VideoPlayer({ source, title, poster, autoPlay, muted, loop, paused, nativeControls, fullscreen, pictureInPicture, contentFit, aspectRatio, onPlayingChange, style, }: VideoPlayerProps): React.JSX.Element;
+
+export { VideoPlayer, type VideoPlayerProps, type VideoPlayerSource };

package/dist/native/video-player.js

@@ -0,0 +1,69 @@
+// src/native/video-player.tsx
+import { useTheme } from "@krizaka/ui/native";
+import { useVideoPlayer, VideoView } from "expo-video";
+import * as React from "react";
+import { AccessibilityInfo, Image, StyleSheet, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function configure(player, loop, muted) {
+  player.loop = loop;
+  player.muted = muted;
+}
+function VideoPlayer({
+  source,
+  title,
+  poster,
+  autoPlay = false,
+  muted = autoPlay,
+  loop = false,
+  paused = false,
+  nativeControls = true,
+  fullscreen = true,
+  pictureInPicture = false,
+  contentFit = "contain",
+  aspectRatio = 16 / 9,
+  onPlayingChange,
+  style
+}) {
+  const { theme, radius } = useTheme();
+  const [firstFrame, setFirstFrame] = React.useState(false);
+  const player = useVideoPlayer({ uri: source.uri, contentType: source.contentType, headers: source.headers }, (p) => configure(p, loop, muted));
+  React.useEffect(() => configure(player, loop, muted), [player, loop, muted]);
+  React.useEffect(() => {
+    let alive = true;
+    if (paused) player.pause();
+    else if (autoPlay)
+      void AccessibilityInfo.isReduceMotionEnabled().then((reduce) => {
+        if (alive && !reduce) player.play();
+      });
+    return () => {
+      alive = false;
+    };
+  }, [player, paused, autoPlay]);
+  React.useEffect(() => {
+    if (!onPlayingChange) return;
+    const subscription = player.addListener("playingChange", ({ isPlaying }) => onPlayingChange(isPlaying));
+    return () => subscription.remove();
+  }, [player, onPlayingChange]);
+  return /* @__PURE__ */ jsxs(View, { role: "group", "aria-label": title, style: [styles.frame, { aspectRatio, borderRadius: radius.sm, backgroundColor: theme.media }, style], children: [
+    /* @__PURE__ */ jsx(
+      VideoView,
+      {
+        player,
+        style: StyleSheet.absoluteFill,
+        contentFit,
+        nativeControls,
+        fullscreenOptions: { enable: fullscreen },
+        allowsPictureInPicture: pictureInPicture,
+        onFirstFrameRender: () => setFirstFrame(true)
+      }
+    ),
+    poster && !firstFrame ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: StyleSheet.absoluteFill, children: /* @__PURE__ */ jsx(Image, { source: poster, "aria-hidden": true, resizeMode: "cover", style: StyleSheet.absoluteFill }) }) : null
+  ] });
+}
+var styles = StyleSheet.create({
+  frame: { width: "100%", overflow: "hidden" }
+});
+export {
+  VideoPlayer
+};
+//# sourceMappingURL=video-player.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/native/video-player.tsx"],"sourcesContent":["// @krizaka/ui/native/video-player — its own entry, because it imports expo-video: an optional peer, installed only by\n// the apps that play video. The theme comes from @krizaka/ui/native (the same context as the rest of the platform).\nimport { useTheme } from \"@krizaka/ui/native\";\nimport { type ContentType, useVideoPlayer, type VideoContentFit, VideoView } from \"expo-video\";\nimport * as React from \"react\";\nimport { AccessibilityInfo, Image, type ImageSourcePropType, type StyleProp, StyleSheet, View, type ViewStyle } from \"react-native\";\n\nexport type VideoPlayerSource = {\n  /** The address (MP4 or an HLS `.m3u8`, signed by your server). */\n  uri: string;\n  /** `hls` when the address does not end in `.m3u8`; `auto` (default) otherwise. */\n  contentType?: ContentType;\n  /** Headers sent with the request (an authorization). */\n  headers?: Record<string, string>;\n};\n\nexport type VideoPlayerProps = {\n  /** The video. A new source replaces the current one. */\n  source: VideoPlayerSource;\n  /** The accessible name of the player (\"Video: Sunset over Montréal\"), passed translated. */\n  title: string;\n  /** The picture shown until the first frame. */\n  poster?: ImageSourcePropType;\n  /** Starts playing (muted unless `muted={false}`) — not when the system asks to reduce motion. */\n  autoPlay?: boolean;\n  /** Starts muted. Default: `autoPlay`. */\n  muted?: boolean;\n  /** Plays again from the start at the end. */\n  loop?: boolean;\n  /** Pauses while `true`: the app passes it when the video leaves the screen (a FlatList's viewability). */\n  paused?: boolean;\n  /** The platform's controls (default `true`: accessible, with full screen). `false` for a story or a background. */\n  nativeControls?: boolean;\n  /** Allows full screen from the controls. Default `true`. */\n  fullscreen?: boolean;\n  /** Allows picture in picture. Default `false`. */\n  pictureInPicture?: boolean;\n  /** How the picture fills the frame: `contain` (default), `cover`, `fill`. */\n  contentFit?: VideoContentFit;\n  /** The width / height ratio of the frame. Default 16 / 9. */\n  aspectRatio?: number;\n  /** Called when it starts or stops playing. */\n  onPlayingChange?: (playing: boolean) => void;\n  /** Styles merged last, on the frame. */\n  style?: StyleProp<ViewStyle>;\n};\n\n/** The event surface of expo-video's player (a SharedObject of `expo`), typed here so `expo` stays the app's. */\ntype Emitter = { addListener(event: \"playingChange\", listener: (payload: { isPlaying: boolean }) => void): { remove(): void } };\n\n/** Applies the options a player can change while it lives (outside the component: the player is the hook's). */\nfunction configure(player: { loop: boolean; muted: boolean }, loop: boolean, muted: boolean) {\n  player.loop = loop;\n  player.muted = muted;\n}\n\n/**\n * A video on expo-video: the platform's own player and controls (accessible, full screen, picture in picture), the\n * poster until the first frame, autoplay that waits under reduced motion, and `paused` to stop it off screen. The\n * web `VideoPlayer` draws its own controls; here the system's are the right ones.\n */\nexport function VideoPlayer({\n  source,\n  title,\n  poster,\n  autoPlay = false,\n  muted = autoPlay,\n  loop = false,\n  paused = false,\n  nativeControls = true,\n  fullscreen = true,\n  pictureInPicture = false,\n  contentFit = \"contain\",\n  aspectRatio = 16 / 9,\n  onPlayingChange,\n  style,\n}: VideoPlayerProps) {\n  const { theme, radius } = useTheme();\n  const [firstFrame, setFirstFrame] = React.useState(false);\n  const player = useVideoPlayer({ uri: source.uri, contentType: source.contentType, headers: source.headers }, (p) => configure(p, loop, muted));\n\n  React.useEffect(() => configure(player, loop, muted), [player, loop, muted]);\n\n  React.useEffect(() => {\n    let alive = true;\n    if (paused) player.pause();\n    else if (autoPlay)\n      void AccessibilityInfo.isReduceMotionEnabled().then((reduce) => {\n        if (alive && !reduce) player.play();\n      });\n    return () => {\n      alive = false;\n    };\n  }, [player, paused, autoPlay]);\n\n  React.useEffect(() => {\n    if (!onPlayingChange) return;\n    const subscription = (player as unknown as Emitter).addListener(\"playingChange\", ({ isPlaying }) => onPlayingChange(isPlaying));\n    return () => subscription.remove();\n  }, [player, onPlayingChange]);\n\n  return (\n    <View role=\"group\" aria-label={title} style={[styles.frame, { aspectRatio, borderRadius: radius.sm, backgroundColor: theme.media }, style]}>\n      <VideoView\n        player={player}\n        style={StyleSheet.absoluteFill}\n        contentFit={contentFit}\n        nativeControls={nativeControls}\n        fullscreenOptions={{ enable: fullscreen }}\n        allowsPictureInPicture={pictureInPicture}\n        onFirstFrameRender={() => setFirstFrame(true)}\n      />\n      {poster && !firstFrame ? (\n        <View pointerEvents=\"none\" style={StyleSheet.absoluteFill}>\n          <Image source={poster} aria-hidden resizeMode=\"cover\" style={StyleSheet.absoluteFill} />\n        </View>\n      ) : null}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  frame: { width: \"100%\", overflow: \"hidden\" },\n});\n"],"mappings":";AAEA,SAAS,gBAAgB;AACzB,SAA2B,gBAAsC,iBAAiB;AAClF,YAAY,WAAW;AACvB,SAAS,mBAAmB,OAAiD,YAAY,YAA4B;AAiGjH,SACE,KADF;AAnDJ,SAAS,UAAU,QAA2C,MAAe,OAAgB;AAC3F,SAAO,OAAO;AACd,SAAO,QAAQ;AACjB;AAOO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,cAAc,KAAK;AAAA,EACnB;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,EAAE,OAAO,OAAO,IAAI,SAAS;AACnC,QAAM,CAAC,YAAY,aAAa,IAAU,eAAS,KAAK;AACxD,QAAM,SAAS,eAAe,EAAE,KAAK,OAAO,KAAK,aAAa,OAAO,aAAa,SAAS,OAAO,QAAQ,GAAG,CAAC,MAAM,UAAU,GAAG,MAAM,KAAK,CAAC;AAE7I,EAAM,gBAAU,MAAM,UAAU,QAAQ,MAAM,KAAK,GAAG,CAAC,QAAQ,MAAM,KAAK,CAAC;AAE3E,EAAM,gBAAU,MAAM;AACpB,QAAI,QAAQ;AACZ,QAAI,OAAQ,QAAO,MAAM;AAAA,aAChB;AACP,WAAK,kBAAkB,sBAAsB,EAAE,KAAK,CAAC,WAAW;AAC9D,YAAI,SAAS,CAAC,OAAQ,QAAO,KAAK;AAAA,MACpC,CAAC;AACH,WAAO,MAAM;AACX,cAAQ;AAAA,IACV;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,CAAC,gBAAiB;AACtB,UAAM,eAAgB,OAA8B,YAAY,iBAAiB,CAAC,EAAE,UAAU,MAAM,gBAAgB,SAAS,CAAC;AAC9H,WAAO,MAAM,aAAa,OAAO;AAAA,EACnC,GAAG,CAAC,QAAQ,eAAe,CAAC;AAE5B,SACE,qBAAC,QAAK,MAAK,SAAQ,cAAY,OAAO,OAAO,CAAC,OAAO,OAAO,EAAE,aAAa,cAAc,OAAO,IAAI,iBAAiB,MAAM,MAAM,GAAG,KAAK,GACvI;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,WAAW;AAAA,QAClB;AAAA,QACA;AAAA,QACA,mBAAmB,EAAE,QAAQ,WAAW;AAAA,QACxC,wBAAwB;AAAA,QACxB,oBAAoB,MAAM,cAAc,IAAI;AAAA;AAAA,IAC9C;AAAA,IACC,UAAU,CAAC,aACV,oBAAC,QAAK,eAAc,QAAO,OAAO,WAAW,cAC3C,8BAAC,SAAM,QAAQ,QAAQ,eAAW,MAAC,YAAW,SAAQ,OAAO,WAAW,cAAc,GACxF,IACE;AAAA,KACN;AAEJ;AAEA,IAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,OAAO,EAAE,OAAO,QAAQ,UAAU,SAAS;AAC7C,CAAC;","names":[]}

package/dist/native.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default from 'react';
-import { ViewProps, PressableProps, StyleProp, ViewStyle, TextProps, ImageProps, DimensionValue, ActivityIndicatorProps } from 'react-native';
+import { ViewProps, PressableProps, StyleProp, ViewStyle, TextProps, ImageProps, TextInputProps, DimensionValue, ActivityIndicatorProps } from 'react-native';
 
 /** Milliseconds left until `target` (never negative), ticking every second. `skewMs` = server clock − this clock. */
 declare function useCountdown(target: Date | string | number, skewMs?: number): number;
@@ -377,6 +377,44 @@ declare function OrazakaMark({ size, animated, title, neutral }: NativeMarkProps
  */
 declare function OrochiaMark({ size, animated, title, neutral: neutralProp }: NativeMarkProps): React__default.JSX.Element;
 
+type PaginationLabels = {
+    /** The previous-page button ("Previous page"). */
+    previous: string;
+    /** The next-page button ("Next page"). */
+    next: string;
+    /** Where the list stands: `(page, count) => "Page 3 of 12"`. */
+    compact: (page: number, pageCount: number) => string;
+};
+type PaginationProps = {
+    /** Pages mode: the current page, from 1. */
+    page?: number;
+    /** Pages mode: how many pages. Without it, the pagination is in cursor mode. */
+    pageCount?: number;
+    /** Pages mode: called with the page asked for. */
+    onPageChange?: (page: number) => void;
+    /** Cursor mode: whether there is a previous page. */
+    hasPrevious?: boolean;
+    /** Cursor mode: whether there is a next page. */
+    hasNext?: boolean;
+    /** Cursor mode: called by the previous button. */
+    onPrevious?: () => void;
+    /** Cursor mode: called by the next button. */
+    onNext?: () => void;
+    /** A text between the buttons in cursor mode ("41–60"), or instead of "Page 3 of 12". */
+    status?: string;
+    /** Disables both buttons (a page is loading). */
+    disabled?: boolean;
+    /** The words, passed translated. */
+    labels: PaginationLabels;
+    /** Styles merged last. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Previous / next with where the list stands ("Page 3 of 12"), or the two buttons of a cursor — the web
+ * `Pagination` folded, the form a phone's thumb reaches. On a feed, prefer loading more at the end of the list.
+ */
+declare function Pagination({ page, pageCount, onPageChange, hasPrevious, hasNext, onPrevious, onNext, status, disabled, labels, style }: PaginationProps): React.JSX.Element;
+
 /** The mark of a Krizaka brand by id, for React Native — the counterpart of the web `ProductLogo`. */
 declare function ProductMark({ id, ...props }: NativeMarkProps & {
     id: BrandId;
@@ -406,6 +444,32 @@ type ProgressProps = {
  */
 declare function Progress({ variant, size, value, max, label, valueText, children, style }: ProgressProps): React.JSX.Element;
 
+type SearchFieldProps = Omit<TextInputProps, "value" | "defaultValue" | "onChangeText" | "style" | "onSubmitEditing"> & {
+    /** The accessible name of the input ("Search videos"), passed translated. */
+    label: string;
+    /** The query (controlled). */
+    value?: string;
+    /** The query at first, uncontrolled. */
+    defaultValue?: string;
+    /** Called on every key with the query. */
+    onValueChange?: (query: string) => void;
+    /** Called with the query once typing pauses (`debounce` ms): fetch the results here. */
+    onSearch?: (query: string) => void;
+    /** The pause, in ms, before `onSearch`. Default 300. */
+    debounce?: number;
+    /** Called when the keyboard's search key is pressed. */
+    onSubmit?: (query: string) => void;
+    /** The clear button's name ("Clear search"), passed translated. */
+    clearLabel: string;
+    /** Styles merged last, on the field's frame. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * A search box: the glyph, the input with the keyboard's search key, a clear button, and a debounced `onSearch` —
+ * the web `SearchField` without the shortcut and the suggestions (a screen of results is the native idiom).
+ */
+declare function SearchField({ label, value, defaultValue, onValueChange, onSearch, debounce, onSubmit, clearLabel, style, placeholder, ...props }: SearchFieldProps): React.JSX.Element;
+
 type SegmentedOption<T extends string> = {
     value: T;
     label: string;
@@ -599,4 +663,4 @@ type ToasterProps = {
 /** Mount once, at the root (inside `ThemeProvider`). Then call `toast()` from anywhere. */
 declare function Toaster({ closeLabel, position, offset, duration, max }: ToasterProps): React.JSX.Element | null;
 
-export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Countdown, type CountdownProps, type CountdownUnits, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, KrizakaMark, Mascot, type MascotProps, type Mode, type Motion, type NativeMarkProps, OrazakaMark, OrochiaMark, ProductMark, Progress, type ProgressProps, type Radius, Segmented, type SegmentedOption, type SegmentedProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, alpha, splitDuration, textStyles, toast, useCountdown, useReducedMotion, useTheme };
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Countdown, type CountdownProps, type CountdownUnits, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, KrizakaMark, Mascot, type MascotProps, type Mode, type Motion, type NativeMarkProps, OrazakaMark, OrochiaMark, Pagination, type PaginationLabels, type PaginationProps, ProductMark, Progress, type ProgressProps, type Radius, SearchField, type SearchFieldProps, Segmented, type SegmentedOption, type SegmentedProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, alpha, splitDuration, textStyles, toast, useCountdown, useReducedMotion, useTheme };