@krizaka/ui 2.3.0 → 2.5.0

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;
@@ -491,18 +555,45 @@ type Theme = {
     readonly scrim: string;
     readonly scrimStrong: string;
     readonly overlay: string;
+    /** Status tints (a badge, an alert): the primary text reads ≥ 4.5:1 on them. */
+    readonly successSoft: string;
+    readonly warningSoft: string;
+    readonly dangerSoft: string;
+    /** The material (BRAND.md §6): the top of a raised surface catches the light… */
+    readonly surfaceSheen: string;
+    /** …the bottom of a fill is shaded a little… */
+    readonly fillShade: string;
+    /** …and a 1-pt edge of light runs along the top of what is raised (`edgeOnFill` on an accent fill)… */
+    readonly edgeLight: string;
+    readonly edgeOnFill: string;
+    /** …what you fill (a field, a track) is a well. */
+    readonly edgeWell: string;
+    /** Frosted glass: what floats over the screen (a toast, a sheet). */
+    readonly glassBg: string;
+    readonly glassBorder: string;
 };
 /** Corner radii, in points. */
 type Radius = {
+    readonly xs: number;
     readonly sm: number;
     readonly md: number;
     readonly lg: number;
     readonly xl: number;
+    readonly "2xl": number;
     readonly full: number;
 };
-/** Motion: the cubic-bezier control points of the platform's ease (`Easing.bezier(...motion.ease)`). */
+/**
+ * Motion: the cubic-bezier control points of the platform's ease (`Easing.bezier(...motion.ease)`), the short spring of
+ * what answers the hand, and the micro-interaction durations in ms — `useTheme()` gives 0 ms when the system reduces motion.
+ */
 type Motion = {
     readonly ease: readonly [number, number, number, number];
+    readonly spring: readonly [number, number, number, number];
+    readonly duration: {
+        readonly instant: number;
+        readonly fast: number;
+        readonly base: number;
+    };
 };
 type Mode = "dark" | "light" | "system";
 /** A product's colour roles per theme (e.g. `nativeTheme` of a product design system): only the roles it changes. */
@@ -599,4 +690,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 };

package/dist/native.js

@@ -58,15 +58,25 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "brandGradientTo": "#0c0c0e",
   "success": "#10b77f",
   "successText": "#36d399",
+  "successSoft": "rgba(16,183,127,0.14)",
   "warning": "#f59f0a",
   "warningText": "#f6a823",
+  "warningSoft": "rgba(245,159,10,0.14)",
   "danger": "#ef4343",
   "dangerText": "#f87272",
+  "dangerSoft": "rgba(239,67,67,0.14)",
   "info": "#196df5",
   "infoText": "#629cf8",
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
-  "overlay": "rgba(0,0,0,0.7)"
+  "overlay": "rgba(0,0,0,0.7)",
+  "surfaceSheen": "rgba(255,255,255,0.045)",
+  "fillShade": "rgba(0,0,0,0.12)",
+  "edgeLight": "rgba(255,255,255,0.07)",
+  "edgeOnFill": "rgba(255,255,255,0.22)",
+  "edgeWell": "rgba(4,4,7,0.5)",
+  "glassBg": "rgba(29,29,32,0.88)",
+  "glassBorder": "rgba(255,255,255,0.1)"
 }), light: /* @__PURE__ */ Object.freeze({
   "surface0": "#fafafa",
   "surface1": "#ffffff",
@@ -92,24 +102,36 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "brandGradientTo": "#fafafa",
   "success": "#10b77f",
   "successText": "#0a714e",
+  "successSoft": "rgba(16,183,127,0.1)",
   "warning": "#f59f0a",
   "warningText": "#955104",
+  "warningSoft": "rgba(245,159,10,0.12)",
   "danger": "#ef4343",
   "dangerText": "#af1d1d",
+  "dangerSoft": "rgba(239,67,67,0.1)",
   "info": "#0a64f5",
   "infoText": "#0954ce",
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
-  "overlay": "rgba(0,0,0,0.7)"
+  "overlay": "rgba(0,0,0,0.7)",
+  "surfaceSheen": "rgba(255,255,255,0.7)",
+  "fillShade": "rgba(0,0,0,0.12)",
+  "edgeLight": "rgba(255,255,255,0.9)",
+  "edgeOnFill": "rgba(255,255,255,0.22)",
+  "edgeWell": "rgba(48,52,80,0.08)",
+  "glassBg": "rgba(255,255,255,0.88)",
+  "glassBorder": "rgba(0,0,0,0.08)"
 }) });
 var radius = /* @__PURE__ */ Object.freeze({
+  "xs": 6,
   "sm": 8,
   "md": 12,
   "lg": 16,
   "xl": 20,
+  "2xl": 28,
   "full": 9999
 });
-var motion = /* @__PURE__ */ Object.freeze({ ease: /* @__PURE__ */ Object.freeze([0.16, 1, 0.3, 1]) });
+var motion = /* @__PURE__ */ Object.freeze({ ease: /* @__PURE__ */ Object.freeze([0.16, 1, 0.3, 1]), spring: /* @__PURE__ */ Object.freeze([0.34, 1.36, 0.64, 1]), duration: /* @__PURE__ */ Object.freeze({ "instant": 90, "fast": 150, "base": 200 }) });
 var marks = /* @__PURE__ */ Object.freeze({
   "krizaka": [
     [
@@ -154,6 +176,7 @@ import { jsx } from "react/jsx-runtime";
 var themes2 = themes;
 var radius2 = radius;
 var motion2 = motion;
+var stillMotion = { ...motion2, duration: { instant: 0, fast: 0, base: 0 } };
 var ThemeContext = React.createContext(null);
 function resolve(mode, system) {
   if (mode === "system") return system === "light" ? "light" : "dark";
@@ -172,10 +195,11 @@ function ThemeProvider({ children, mode: controlled, defaultMode = "system", onM
   );
   const scheme = resolve(mode, system);
   const override = overrides?.[scheme];
+  const reduce = useReducedMotion();
   const theme = React.useMemo(() => override ? { ...themes2[scheme], ...override } : themes2[scheme], [scheme, override]);
   const value = React.useMemo(
-    () => ({ mode, setMode, scheme, theme, radius: radius2, motion: motion2, fonts: fonts ?? {} }),
-    [mode, setMode, scheme, theme, fonts]
+    () => ({ mode, setMode, scheme, theme, radius: radius2, motion: reduce ? stillMotion : motion2, fonts: fonts ?? {} }),
+    [mode, setMode, scheme, theme, fonts, reduce]
   );
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
 }
@@ -1139,19 +1163,62 @@ function OrochiaMark({ size = 48, animated = true, title, neutral: neutralProp }
   ] });
 }
 
+// src/native/pagination.tsx
+import { Pressable as Pressable4, StyleSheet as StyleSheet9, Text as Text6, View as View10 } from "react-native";
+import Svg6, { Path as Path5 } from "react-native-svg";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function Chevron({ direction, color }) {
+  return /* @__PURE__ */ jsx14(Svg6, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx14(Path5, { d: direction === "left" ? "m15 6-6 6 6 6" : "m9 6 6 6-6 6" }) });
+}
+function Pagination({ page = 1, pageCount, onPageChange, hasPrevious, hasNext, onPrevious, onNext, status, disabled, labels, style }) {
+  const { theme, radius: radius3 } = useTheme();
+  const paged = pageCount !== void 0;
+  const count = Math.max(1, pageCount ?? 1);
+  const current = Math.min(Math.max(1, page), count);
+  const canPrevious = !disabled && (paged ? current > 1 : Boolean(hasPrevious));
+  const canNext = !disabled && (paged ? current < count : Boolean(hasNext));
+  const button = (direction, enabled, onPress, label) => /* @__PURE__ */ jsx14(
+    Pressable4,
+    {
+      role: "button",
+      "aria-label": label,
+      "aria-disabled": !enabled,
+      disabled: !enabled,
+      hitSlop: 6,
+      onPress,
+      style: ({ pressed }) => [
+        styles9.button,
+        { borderRadius: radius3.sm, borderColor: theme.borderDefault, backgroundColor: theme.surface1, opacity: enabled ? pressed ? 0.8 : 1 : 0.4 }
+      ],
+      children: /* @__PURE__ */ jsx14(Chevron, { direction, color: theme.textPrimary })
+    }
+  );
+  const text = status ?? (paged ? labels.compact(current, count) : null);
+  return /* @__PURE__ */ jsxs11(View10, { role: "navigation", style: [styles9.row, style], children: [
+    button("left", canPrevious, paged ? () => onPageChange?.(current - 1) : onPrevious, labels.previous),
+    text ? /* @__PURE__ */ jsx14(Text6, { "aria-live": "polite", style: [styles9.status, { color: theme.textSecondary }], children: text }) : null,
+    button("right", canNext, paged ? () => onPageChange?.(current + 1) : onNext, labels.next)
+  ] });
+}
+var styles9 = StyleSheet9.create({
+  row: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 12 },
+  button: { width: 44, height: 44, alignItems: "center", justifyContent: "center", borderWidth: StyleSheet9.hairlineWidth },
+  status: { fontSize: 13, fontWeight: "600", fontVariant: ["tabular-nums"] }
+});
+
 // src/native/ProductMark.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function ProductMark({ id, ...props }) {
-  if (id === "krizaka") return /* @__PURE__ */ jsx14(KrizakaMark, { ...props });
-  if (id === "orazaka") return /* @__PURE__ */ jsx14(OrazakaMark, { ...props });
-  return /* @__PURE__ */ jsx14(OrochiaMark, { ...props });
+  if (id === "krizaka") return /* @__PURE__ */ jsx15(KrizakaMark, { ...props });
+  if (id === "orazaka") return /* @__PURE__ */ jsx15(OrazakaMark, { ...props });
+  return /* @__PURE__ */ jsx15(OrochiaMark, { ...props });
 }
 
 // src/native/progress.tsx
 import * as React9 from "react";
-import { Animated as Animated6, Easing as Easing4, StyleSheet as StyleSheet9, View as View10 } from "react-native";
-import Svg6, { Circle as Circle5, Defs as Defs6, LinearGradient as LinearGradient6, Rect as Rect3, Stop as Stop6 } from "react-native-svg";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Animated as Animated6, Easing as Easing4, StyleSheet as StyleSheet10, View as View11 } from "react-native";
+import Svg7, { Circle as Circle5, Defs as Defs6, LinearGradient as LinearGradient6, Rect as Rect3, Stop as Stop6 } from "react-native-svg";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var AnimatedCircle = Animated6.createAnimatedComponent(Circle5);
 var BAR = { sm: 4, md: 8, lg: 12 };
 var RING = { sm: 40, md: 80, lg: 144 };
@@ -1193,9 +1260,9 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
     "aria-valuenow": known ? Math.min(max, Math.max(0, value)) : void 0,
     "aria-valuetext": known ? valueText ?? `${percent}%` : valueText
   };
-  const gradient = /* @__PURE__ */ jsx15(Defs6, { children: /* @__PURE__ */ jsxs11(LinearGradient6, { id, x1: "0", y1: "0", x2: "1", y2: variant === "ring" ? "1" : "0", children: [
-    /* @__PURE__ */ jsx15(Stop6, { offset: "0", stopColor: theme.accent }),
-    /* @__PURE__ */ jsx15(Stop6, { offset: "1", stopColor: theme.accent2 })
+  const gradient = /* @__PURE__ */ jsx16(Defs6, { children: /* @__PURE__ */ jsxs12(LinearGradient6, { id, x1: "0", y1: "0", x2: "1", y2: variant === "ring" ? "1" : "0", children: [
+    /* @__PURE__ */ jsx16(Stop6, { offset: "0", stopColor: theme.accent }),
+    /* @__PURE__ */ jsx16(Stop6, { offset: "1", stopColor: theme.accent2 })
   ] }) });
   if (variant === "ring") {
     const side = RING[size];
@@ -1204,11 +1271,11 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
     const circumference = 2 * Math.PI * r;
     const offset = known ? progress.interpolate({ inputRange: [0, 1], outputRange: [circumference, 0] }) : circumference * 0.75;
     const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] });
-    return /* @__PURE__ */ jsxs11(View10, { ...a11y, style: [styles9.ring, { width: side, height: side }, style], children: [
-      /* @__PURE__ */ jsx15(Animated6.View, { style: [StyleSheet9.absoluteFill, { transform: [{ rotate: known ? "-90deg" : rotate }] }], children: /* @__PURE__ */ jsxs11(Svg6, { width: side, height: side, viewBox: "0 0 100 100", children: [
+    return /* @__PURE__ */ jsxs12(View11, { ...a11y, style: [styles10.ring, { width: side, height: side }, style], children: [
+      /* @__PURE__ */ jsx16(Animated6.View, { style: [StyleSheet10.absoluteFill, { transform: [{ rotate: known ? "-90deg" : rotate }] }], children: /* @__PURE__ */ jsxs12(Svg7, { width: side, height: side, viewBox: "0 0 100 100", children: [
         gradient,
-        /* @__PURE__ */ jsx15(Circle5, { cx: 50, cy: 50, r, fill: "none", stroke: theme.borderDefault, strokeWidth: stroke }),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(Circle5, { cx: 50, cy: 50, r, fill: "none", stroke: theme.borderDefault, strokeWidth: stroke }),
+        /* @__PURE__ */ jsx16(
           AnimatedCircle,
           {
             cx: 50,
@@ -1228,40 +1295,93 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
   }
   const width = known ? progress.interpolate({ inputRange: [0, 1], outputRange: ["0%", "100%"] }) : "40%";
   const translate = spin.interpolate({ inputRange: [0, 1], outputRange: [-0.4 * track, track] });
-  return /* @__PURE__ */ jsx15(
-    View10,
+  return /* @__PURE__ */ jsx16(
+    View11,
     {
       ...a11y,
       onLayout: known ? void 0 : (event) => setTrack(event.nativeEvent.layout.width),
-      style: [styles9.bar, { height: BAR[size], backgroundColor: theme.surface3 }, style],
-      children: /* @__PURE__ */ jsx15(Animated6.View, { style: [styles9.fill, { width }, known || reduce ? null : { transform: [{ translateX: translate }] }], children: /* @__PURE__ */ jsxs11(Svg6, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
+      style: [styles10.bar, { height: BAR[size], backgroundColor: theme.surface3 }, style],
+      children: /* @__PURE__ */ jsx16(Animated6.View, { style: [styles10.fill, { width }, known || reduce ? null : { transform: [{ translateX: translate }] }], children: /* @__PURE__ */ jsxs12(Svg7, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
         gradient,
-        /* @__PURE__ */ jsx15(Rect3, { x: 0, y: 0, width: "100%", height: "100%", fill: `url(#${id})` })
+        /* @__PURE__ */ jsx16(Rect3, { x: 0, y: 0, width: "100%", height: "100%", fill: `url(#${id})` })
       ] }) })
     }
   );
 }
-var styles9 = StyleSheet9.create({
+var styles10 = StyleSheet10.create({
   ring: { alignItems: "center", justifyContent: "center" },
   bar: { width: "100%", overflow: "hidden", borderRadius: 9999 },
   fill: { height: "100%", overflow: "hidden", borderRadius: 9999 }
 });
 
+// src/native/search-field.tsx
+import * as React10 from "react";
+import { Pressable as Pressable5, StyleSheet as StyleSheet11, TextInput, View as View12 } from "react-native";
+import Svg8, { Circle as Circle6, Path as Path6 } from "react-native-svg";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+function SearchField({ label, value, defaultValue = "", onValueChange, onSearch, debounce = 300, onSubmit, clearLabel, style, placeholder, ...props }) {
+  const { theme, radius: radius3 } = useTheme();
+  const [own, setOwn] = React10.useState(defaultValue);
+  const query = value ?? own;
+  const timer2 = React10.useRef(void 0);
+  React10.useEffect(() => () => clearTimeout(timer2.current), []);
+  const change = (next) => {
+    if (value === void 0) setOwn(next);
+    onValueChange?.(next);
+    clearTimeout(timer2.current);
+    if (onSearch) timer2.current = setTimeout(() => onSearch(next), debounce);
+  };
+  return /* @__PURE__ */ jsxs13(View12, { style: [styles11.frame, { borderRadius: radius3.md, borderColor: theme.borderDefault, backgroundColor: theme.surface2 }, style], children: [
+    /* @__PURE__ */ jsxs13(Svg8, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: theme.textSecondary, strokeWidth: 2, strokeLinecap: "round", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx17(Circle6, { cx: 11, cy: 11, r: 7 }),
+      /* @__PURE__ */ jsx17(Path6, { d: "m20 20-3.5-3.5" })
+    ] }),
+    /* @__PURE__ */ jsx17(
+      TextInput,
+      {
+        role: "searchbox",
+        "aria-label": label,
+        value: query,
+        placeholder,
+        placeholderTextColor: theme.textMuted,
+        returnKeyType: "search",
+        autoCorrect: false,
+        autoCapitalize: "none",
+        clearButtonMode: "never",
+        onChangeText: change,
+        onSubmitEditing: () => {
+          clearTimeout(timer2.current);
+          onSearch?.(query);
+          onSubmit?.(query);
+        },
+        style: [styles11.input, { color: theme.textPrimary }],
+        ...props
+      }
+    ),
+    query ? /* @__PURE__ */ jsx17(Pressable5, { role: "button", "aria-label": clearLabel, hitSlop: 10, onPress: () => change(""), style: styles11.clear, children: /* @__PURE__ */ jsx17(Svg8, { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: theme.textSecondary, strokeWidth: 2.4, strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx17(Path6, { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
+  ] });
+}
+var styles11 = StyleSheet11.create({
+  frame: { flexDirection: "row", alignItems: "center", gap: 8, height: 44, paddingLeft: 12, paddingRight: 6, borderWidth: StyleSheet11.hairlineWidth },
+  input: { flex: 1, height: "100%", fontSize: 15, paddingVertical: 0 },
+  clear: { width: 32, height: 32, alignItems: "center", justifyContent: "center" }
+});
+
 // src/native/segmented.tsx
-import { Pressable as Pressable4, StyleSheet as StyleSheet10, Text as Text6, View as View11 } from "react-native";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { Pressable as Pressable6, StyleSheet as StyleSheet12, Text as Text7, View as View13 } from "react-native";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function Segmented({ options, value, onValueChange, size = "md", "aria-label": label, style }) {
   const { theme, radius: radius3 } = useTheme();
-  return /* @__PURE__ */ jsx16(
-    View11,
+  return /* @__PURE__ */ jsx18(
+    View13,
     {
       role: "tablist",
       "aria-label": label,
-      style: [styles10.track, { backgroundColor: theme.surface2, borderColor: theme.borderSubtle, borderRadius: radius3.md, height: size === "sm" ? 32 : 40 }, style],
+      style: [styles12.track, { backgroundColor: theme.surface2, borderColor: theme.borderSubtle, borderRadius: radius3.md, height: size === "sm" ? 32 : 40 }, style],
       children: options.map((option) => {
         const selected = option.value === value;
-        return /* @__PURE__ */ jsx16(
-          Pressable4,
+        return /* @__PURE__ */ jsx18(
+          Pressable6,
           {
             role: "tab",
             "aria-selected": selected,
@@ -1271,12 +1391,12 @@ function Segmented({ options, value, onValueChange, size = "md", "aria-label": l
               if (!selected) onValueChange(option.value);
             },
             style: [
-              styles10.segment,
+              styles12.segment,
               { borderRadius: radius3.sm },
               selected ? { backgroundColor: theme.surface0, borderColor: theme.borderDefault } : null,
-              option.disabled ? styles10.disabled : null
+              option.disabled ? styles12.disabled : null
             ],
-            children: /* @__PURE__ */ jsx16(Text6, { numberOfLines: 1, style: [styles10.label, { color: selected ? theme.textPrimary : theme.textSecondary, fontSize: size === "sm" ? 12 : 13 }], children: option.label })
+            children: /* @__PURE__ */ jsx18(Text7, { numberOfLines: 1, style: [styles12.label, { color: selected ? theme.textPrimary : theme.textSecondary, fontSize: size === "sm" ? 12 : 13 }], children: option.label })
           },
           option.value
         );
@@ -1284,17 +1404,17 @@ function Segmented({ options, value, onValueChange, size = "md", "aria-label": l
     }
   );
 }
-var styles10 = StyleSheet10.create({
-  track: { flexDirection: "row", padding: 3, gap: 3, borderWidth: StyleSheet10.hairlineWidth },
-  segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth: StyleSheet10.hairlineWidth, borderColor: "transparent" },
+var styles12 = StyleSheet12.create({
+  track: { flexDirection: "row", padding: 3, gap: 3, borderWidth: StyleSheet12.hairlineWidth },
+  segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth: StyleSheet12.hairlineWidth, borderColor: "transparent" },
   label: { fontWeight: "600" },
   disabled: { opacity: 0.4 }
 });
 
 // src/native/skeleton.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { Animated as Animated7 } from "react-native";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var SHAPE = {
   text: { width: "100%", height: 12, radius: 4 },
   circle: { width: 40, height: 40, radius: 9999 },
@@ -1303,8 +1423,8 @@ var SHAPE = {
 function Skeleton({ shape = "text", width, height, style, testID }) {
   const { theme } = useTheme();
   const reduce = useReducedMotion();
-  const [opacity] = React10.useState(() => new Animated7.Value(1));
-  React10.useEffect(() => {
+  const [opacity] = React11.useState(() => new Animated7.Value(1));
+  React11.useEffect(() => {
     if (reduce) return;
     const loop = Animated7.loop(
       Animated7.sequence([
@@ -1320,7 +1440,7 @@ function Skeleton({ shape = "text", width, height, style, testID }) {
   }, [reduce, opacity]);
   const s = SHAPE[shape];
   const side = shape === "circle" ? width ?? height ?? s.width : void 0;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     Animated7.View,
     {
       testID,
@@ -1335,10 +1455,10 @@ function Skeleton({ shape = "text", width, height, style, testID }) {
 
 // src/native/spinner.tsx
 import { ActivityIndicator as ActivityIndicator2 } from "react-native";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function Spinner({ label, size = "md", ...props }) {
   const { theme } = useTheme();
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     ActivityIndicator2,
     {
       accessible: true,
@@ -1353,9 +1473,9 @@ function Spinner({ label, size = "md", ...props }) {
 }
 
 // src/native/toast.tsx
-import * as React11 from "react";
-import { AccessibilityInfo as AccessibilityInfo5, Animated as Animated8, Pressable as Pressable5, StyleSheet as StyleSheet11, Text as Text7, View as View12 } from "react-native";
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import * as React12 from "react";
+import { AccessibilityInfo as AccessibilityInfo5, Animated as Animated8, Pressable as Pressable7, StyleSheet as StyleSheet13, Text as Text8, View as View14 } from "react-native";
+import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var items = [];
 var listeners2 = /* @__PURE__ */ new Set();
 var counter = 0;
@@ -1390,76 +1510,76 @@ var toast = Object.assign(show, {
 function ToastView({ item, closeLabel, duration }) {
   const { theme, radius: radius3 } = useTheme();
   const reduce = useReducedMotion();
-  const [enter] = React11.useState(() => new Animated8.Value(reduce ? 1 : 0));
-  React11.useEffect(() => {
+  const [enter] = React12.useState(() => new Animated8.Value(reduce ? 1 : 0));
+  React12.useEffect(() => {
     if (reduce) enter.setValue(1);
     else Animated8.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
   }, [enter, reduce]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     AccessibilityInfo5.announceForAccessibility(item.description ? `${item.title}. ${item.description}` : item.title);
   }, [item.title, item.description]);
   const ms = item.duration ?? duration;
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!Number.isFinite(ms)) return;
     const timer2 = setTimeout(() => dismiss(item.id), ms);
     return () => clearTimeout(timer2);
   }, [item.id, ms]);
   const edge = { success: theme.success, warning: theme.warning, error: theme.danger, info: theme.info, default: theme.borderDefault }[item.tone ?? "default"];
-  const text = /* @__PURE__ */ jsxs12(Fragment3, { children: [
-    item.icon ? /* @__PURE__ */ jsx19(View12, { "aria-hidden": true, children: item.icon }) : null,
-    /* @__PURE__ */ jsxs12(View12, { style: styles11.content, children: [
-      /* @__PURE__ */ jsx19(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
-      item.description ? /* @__PURE__ */ jsx19(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
+  const text = /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    item.icon ? /* @__PURE__ */ jsx21(View14, { "aria-hidden": true, children: item.icon }) : null,
+    /* @__PURE__ */ jsxs14(View14, { style: styles13.content, children: [
+      /* @__PURE__ */ jsx21(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
+      item.description ? /* @__PURE__ */ jsx21(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
     ] })
   ] });
-  const body = /* @__PURE__ */ jsxs12(Fragment3, { children: [
-    item.onPress ? /* @__PURE__ */ jsx19(
-      Pressable5,
+  const body = /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    item.onPress ? /* @__PURE__ */ jsx21(
+      Pressable7,
       {
         role: "button",
         onPress: () => {
           item.onPress?.();
           dismiss(item.id);
         },
-        style: ({ pressed }) => [styles11.main, { opacity: pressed ? 0.8 : 1 }],
+        style: ({ pressed }) => [styles13.main, { opacity: pressed ? 0.8 : 1 }],
         children: text
       }
-    ) : /* @__PURE__ */ jsx19(View12, { style: styles11.main, children: text }),
-    item.action ? /* @__PURE__ */ jsx19(
-      Pressable5,
+    ) : /* @__PURE__ */ jsx21(View14, { style: styles13.main, children: text }),
+    item.action ? /* @__PURE__ */ jsx21(
+      Pressable7,
       {
         role: "button",
         onPress: () => {
           item.action?.onPress();
           dismiss(item.id);
         },
-        style: [styles11.action, { backgroundColor: theme.accent, borderRadius: radius3.sm }],
-        children: /* @__PURE__ */ jsx19(Text7, { style: [styles11.actionLabel, { color: theme.onAccent }], children: item.action.label })
+        style: [styles13.action, { backgroundColor: theme.accent, borderRadius: radius3.sm }],
+        children: /* @__PURE__ */ jsx21(Text8, { style: [styles13.actionLabel, { color: theme.onAccent }], children: item.action.label })
       }
     ) : null,
-    /* @__PURE__ */ jsx19(Pressable5, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles11.close, children: /* @__PURE__ */ jsx19(Text7, { style: [styles11.cross, { color: theme.textSecondary }], children: "\xD7" }) })
+    /* @__PURE__ */ jsx21(Pressable7, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles13.close, children: /* @__PURE__ */ jsx21(Text8, { style: [styles13.cross, { color: theme.textSecondary }], children: "\xD7" }) })
   ] });
   const frame = [
-    styles11.toast,
+    styles13.toast,
     { backgroundColor: theme.surface2, borderColor: theme.borderDefault, borderLeftColor: edge, borderRadius: radius3.lg, shadowColor: theme.scrimStrong }
   ];
   const motion3 = { transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [-8, 0] }) }] };
-  return /* @__PURE__ */ jsx19(Animated8.View, { "aria-live": "polite", style: motion3, children: /* @__PURE__ */ jsx19(View12, { style: frame, children: body }) });
+  return /* @__PURE__ */ jsx21(Animated8.View, { "aria-live": "polite", style: motion3, children: /* @__PURE__ */ jsx21(View14, { style: frame, children: body }) });
 }
 function Toaster({ closeLabel, position = "top", offset = 12, duration = 6e3, max = 3 }) {
-  const all = React11.useSyncExternalStore(subscribe2, snapshot, snapshot);
+  const all = React12.useSyncExternalStore(subscribe2, snapshot, snapshot);
   const shown = all.slice(-max);
   if (shown.length === 0) return null;
-  return /* @__PURE__ */ jsx19(View12, { pointerEvents: "box-none", style: [styles11.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx19(ToastView, { item, closeLabel, duration }, item.id)) });
+  return /* @__PURE__ */ jsx21(View14, { pointerEvents: "box-none", style: [styles13.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx21(ToastView, { item, closeLabel, duration }, item.id)) });
 }
-var styles11 = StyleSheet11.create({
+var styles13 = StyleSheet13.create({
   stack: { position: "absolute", left: 12, right: 12, gap: 8, zIndex: 100 },
   toast: {
     flexDirection: "row",
     alignItems: "center",
     gap: 10,
     padding: 12,
-    borderWidth: StyleSheet11.hairlineWidth,
+    borderWidth: StyleSheet13.hairlineWidth,
     borderLeftWidth: 4,
     shadowOpacity: 0.3,
     shadowRadius: 16,
@@ -1496,8 +1616,10 @@ export {
   Mascot,
   OrazakaMark,
   OrochiaMark,
+  Pagination,
   ProductMark,
   Progress,
+  SearchField,
   Segmented,
   Skeleton,
   Spinner,