@krizaka/ui 2.2.0 → 2.4.0

package/dist/native.js

@@ -1139,19 +1139,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 +1236,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 +1247,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 +1271,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 +1367,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 +1380,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 +1399,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 +1416,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 +1431,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 +1449,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 +1486,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 +1592,10 @@ export {
   Mascot,
   OrazakaMark,
   OrochiaMark,
+  Pagination,
   ProductMark,
   Progress,
+  SearchField,
   Segmented,
   Skeleton,
   Spinner,