@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-MCOZJWPU.js

@@ -0,0 +1,731 @@
+import { useOverlayPresentation, ContextMenuOverlay } from './chunk-7CGJBQUA.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Dialog } from './chunk-AQ5FIG74.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { expandedProps } from './chunk-W23G6JLF.js';
+import { RadioGroup, RadioGroupItem } from './chunk-PK7BN3MI.js';
+import { useInputPlatform, Input } from './chunk-KXLDK6HB.js';
+import { fieldSurfaceFill } from './chunk-43K3BLXV.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React2 from 'react';
+import { Text, ActivityIndicator, View, Pressable, Animated, Platform } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var PICKER_DEFAULT_LABELS = {
+  select: "Select\u2026",
+  clear: "Clear",
+  done: "Done",
+  search: "Search",
+  validating: "Validating",
+  valid: "Valid",
+  invalid: "Invalid"
+};
+var PICKER_SEARCH_THRESHOLD = 10;
+function Picker({
+  items,
+  value,
+  onValueChange,
+  placeholder: placeholderProp,
+  title,
+  disabled = false,
+  readOnly = false,
+  size: sizeProp,
+  accessibilityLabel,
+  variant = "list",
+  surface = "filled",
+  error = false,
+  success = false,
+  loading = false,
+  hint,
+  clearable = false,
+  onClear,
+  asyncItems,
+  motion = "full",
+  platform,
+  labels: labelsProp
+}) {
+  const labels = useLabels("picker", PICKER_DEFAULT_LABELS, labelsProp);
+  const placeholder = placeholderProp ?? labels.select;
+  const [open, setOpen] = React2.useState(false);
+  const [query, setQuery] = React2.useState("");
+  const [anchor, setAnchor] = React2.useState(null);
+  const triggerRef = React2.useRef(null);
+  const os = useInputPlatform(platform);
+  const radioDialog = os === "android";
+  const size = sizeProp ?? (radioDialog && variant === "wheel" ? "lg" : "md");
+  const anchored = useOverlayPresentation({ kind: "select", itemCount: items.length }) === "anchored" && variant === "list" && !radioDialog;
+  const [draft, setDraft] = React2.useState(value);
+  React2.useEffect(() => {
+    if (open) setDraft(value ?? items[0]?.value);
+    else setQuery("");
+  }, [open]);
+  const theme = useLoamTheme("picker");
+  const [remote, setRemote] = React2.useState(null);
+  const [fetching, setFetching] = React2.useState(false);
+  const known = React2.useRef(items);
+  React2.useEffect(() => {
+    if (!asyncItems || !open) return;
+    let live = true;
+    setFetching(true);
+    asyncItems(query.trim()).then((rows) => {
+      if (!live) return;
+      known.current = [...known.current, ...rows];
+      setRemote(rows);
+    }).finally(() => {
+      if (live) setFetching(false);
+    });
+    return () => {
+      live = false;
+    };
+  }, [open, query]);
+  const searchable = (variant === "list" || radioDialog) && (asyncItems != null || items.length > PICKER_SEARCH_THRESHOLD);
+  const needle = query.trim().toLowerCase();
+  const pool = asyncItems ? remote ?? [] : items;
+  const shown = needle && !asyncItems ? pool.filter((item) => item.label.toLowerCase().includes(needle)) : pool;
+  const selected = (asyncItems ? known.current : items).find((item) => item.value === value);
+  const isPlaceholder = selected == null;
+  const displayText = selected?.label ?? placeholder;
+  const { styles } = useStyles(sheet, { size, disabled, placeholder: isPlaceholder, os });
+  const iconSize = theme.ctl.icon[size];
+  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
+  const isLoading = loading && !disabled;
+  const invalid = !isLoading && Boolean(error);
+  const valid = !isLoading && !invalid && success;
+  const message = typeof error === "string" && error ? error : hint;
+  const toneStyle = isLoading ? { borderColor: theme.focus.ringColor, backgroundColor: theme.color.surface } : invalid ? { borderColor: theme.color.danger } : null;
+  const handleSelect = (next) => {
+    haptics.selection();
+    onValueChange?.(next);
+    setOpen(false);
+  };
+  const showClear = clearable && !isPlaceholder && !disabled && !readOnly;
+  const buttonProps = {
+    accessibilityRole: "button",
+    // The current value is spoken in the name (`accessibilityValue.text` is
+    // dropped on web): "Fruit, Banana".
+    accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}, ${displayText}` : displayText,
+    accessibilityState: { disabled, expanded: open },
+    ...expandedProps(open),
+    "aria-busy": isLoading || void 0,
+    "aria-invalid": invalid || void 0,
+    disabled,
+    ref: triggerRef,
+    onPress: disabled || readOnly ? void 0 : () => {
+      const node = triggerRef.current;
+      if (anchored && node && typeof node.measureInWindow === "function") {
+        node.measureInWindow((x, y, width, height) => setAnchor({ x, y, width, height }));
+      }
+      setOpen(true);
+    },
+    hitSlop: { top: slopY, bottom: slopY }
+  };
+  const triggerStyle = [
+    styles.trigger,
+    { backgroundColor: fieldSurfaceFill(theme, surface) },
+    toneStyle
+  ];
+  const triggerBody = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: [
+          styles.value,
+          size === "lg" ? { fontSize: theme.fontSize[os === "ios" ? 17 : 16] } : null
+        ],
+        numberOfLines: 1,
+        children: displayText
+      }
+    ),
+    isLoading ? /* @__PURE__ */ jsx(
+      ActivityIndicator,
+      {
+        testID: "picker-spinner",
+        size: "small",
+        color: theme.color.accent,
+        accessibilityLabel: labels.validating
+      }
+    ) : valid || invalid ? /* @__PURE__ */ jsx(
+      View,
+      {
+        testID: "picker-status-icon",
+        accessibilityRole: "image",
+        accessibilityLabel: valid ? labels.valid : labels.invalid,
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: valid ? "check-circle" : "alert-triangle",
+            size: iconSize,
+            color: valid ? theme.color.good : theme.color.danger
+          }
+        )
+      }
+    ) : null
+  ] });
+  const chevron = /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: iconSize, color: theme.color.text3 });
+  const trigger = showClear ? /* @__PURE__ */ jsxs(View, { style: triggerStyle, children: [
+    /* @__PURE__ */ jsx(Pressable, { ...buttonProps, style: [styles.triggerButton, { gap: theme.ctl.gap[size] }], children: triggerBody }),
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.clear,
+        onPress: () => onClear?.(),
+        hitSlop: slopY + theme.space.s1,
+        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: iconSize, color: theme.color.text3 })
+      }
+    ),
+    chevron
+  ] }) : /* @__PURE__ */ jsxs(Pressable, { ...buttonProps, style: triggerStyle, children: [
+    triggerBody,
+    chevron
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    message ? /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
+      trigger,
+      /* @__PURE__ */ jsxs(View, { style: styles.messageRow, children: [
+        invalid ? /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.sm, color: theme.color.dangerOnSoft }) : null,
+        /* @__PURE__ */ jsx(Text, { style: invalid ? styles.messageError : styles.message, children: message })
+      ] })
+    ] }) : trigger,
+    anchored ? /* @__PURE__ */ jsx(
+      ContextMenuOverlay,
+      {
+        open,
+        onClose: () => setOpen(false),
+        anchor,
+        platform: "ios",
+        accessibilityLabel: title ?? accessibilityLabel,
+        items: items.map((item) => ({
+          key: item.value,
+          label: item.label,
+          icon: item.value === value ? "check" : void 0,
+          onSelect: () => handleSelect(item.value)
+        }))
+      }
+    ) : null,
+    radioDialog ? /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open,
+        onClose: () => setOpen(false),
+        title,
+        accessibilityLabel: title ?? accessibilityLabel ?? placeholder,
+        platform: "android",
+        children: [
+          searchable ? /* @__PURE__ */ jsx(View, { style: styles.search, children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              leadingIcon: "search",
+              placeholder: labels.search,
+              accessibilityLabel: labels.search,
+              value: query,
+              onChangeText: setQuery,
+              size: "lg",
+              platform: "android"
+            }
+          ) }) : null,
+          /* @__PURE__ */ jsx(
+            RadioGroup,
+            {
+              ...value !== void 0 ? { value } : null,
+              onValueChange: handleSelect,
+              platform: "android",
+              accessibilityLabel: title ?? accessibilityLabel ?? placeholder,
+              children: shown.map((item) => /* @__PURE__ */ jsx(View, { testID: "picker-radio-row", style: styles.radioRow, children: /* @__PURE__ */ jsx(RadioGroupItem, { value: item.value, label: item.label }) }, item.value))
+            }
+          )
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      Sheet,
+      {
+        open: open && !anchored && !radioDialog,
+        onClose: () => setOpen(false),
+        title,
+        detents: variant === "list" ? ["half", "full"] : void 0,
+        initialDetent: variant === "list" ? "half" : void 0,
+        footer: variant === "wheel" ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            fullWidth: true,
+            onPress: () => {
+              if (draft != null && draft !== value) onValueChange?.(draft);
+              setOpen(false);
+            },
+            children: labels.done
+          }
+        ) : void 0,
+        children: [
+          variant === "wheel" ? /* @__PURE__ */ jsx(
+            WheelPicker,
+            {
+              items,
+              value: draft,
+              onValueChange: setDraft,
+              accessibilityLabel: title ?? accessibilityLabel ?? placeholder,
+              motion
+            }
+          ) : null,
+          searchable ? /* @__PURE__ */ jsx(View, { style: styles.search, children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              leadingIcon: "search",
+              placeholder: labels.search,
+              accessibilityLabel: labels.search,
+              value: query,
+              onChangeText: setQuery,
+              size: "lg"
+            }
+          ) }) : null,
+          asyncItems && fetching && open ? /* @__PURE__ */ jsx(
+            ActivityIndicator,
+            {
+              testID: "picker-fetching",
+              size: "small",
+              color: theme.color.accent,
+              accessibilityLabel: labels.validating
+            }
+          ) : null,
+          variant === "wheel" ? null : shown.map((item) => {
+            const isSelected = item.value === value;
+            return /* @__PURE__ */ jsxs(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: item.label,
+                accessibilityState: { selected: isSelected },
+                onPress: () => handleSelect(item.value),
+                style: ({ pressed }) => [styles.option, pressed ? styles.optionPressed : null],
+                children: [
+                  /* @__PURE__ */ jsx(View, { style: styles.check, children: isSelected ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.md, color: theme.color.accentStrong }) : null }),
+                  /* @__PURE__ */ jsx(Text, { style: styles.optionLabel, children: item.label })
+                ]
+              },
+              item.value
+            );
+          })
+        ]
+      }
+    )
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  triggerButton: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: theme.color.surface2,
+    // The reference draws a `1.5px` field edge — the static `w2` weight.
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.borderStrong,
+    variants: {
+      // Height, padding, gap and corner radius all resolve from one control-size
+      // tier (26 / 30 / 36 / 44), matching {@link Input}.
+      size: {
+        xs: {
+          height: theme.ctl.xs,
+          paddingHorizontal: theme.ctl.px.xs,
+          gap: theme.ctl.gap.xs,
+          borderRadius: theme.ctl.r.xs
+        },
+        sm: {
+          height: theme.ctl.sm,
+          paddingHorizontal: theme.ctl.px.sm,
+          gap: theme.ctl.gap.sm,
+          borderRadius: theme.ctl.r.sm
+        },
+        md: {
+          height: theme.ctl.md,
+          paddingHorizontal: theme.ctl.px.md,
+          gap: theme.ctl.gap.md,
+          borderRadius: theme.ctl.r.md
+        },
+        lg: {
+          height: theme.ctl.lg,
+          paddingHorizontal: theme.ctl.px.lg,
+          gap: theme.ctl.gap.lg,
+          borderRadius: theme.ctl.r.lg
+        }
+      },
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  },
+  value: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    variants: {
+      size: {
+        xs: { fontSize: theme.fontSize[14] },
+        sm: { fontSize: theme.fontSize[14] },
+        md: { fontSize: theme.fontSize[16] },
+        // The lg value is the platform body (17 iOS, 16 Android), set at the use site.
+        lg: {}
+      },
+      placeholder: {
+        true: { color: theme.color.text3 },
+        false: { color: theme.color.text }
+      }
+    }
+  },
+  root: { gap: theme.space.s1 },
+  messageRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s1 },
+  message: { fontFamily: theme.font.sans, fontSize: theme.fontSize[12], color: theme.color.text3 },
+  messageError: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.dangerOnSoft
+  },
+  search: { marginBottom: theme.space.s2 },
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.space[44],
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s2,
+    borderRadius: theme.radius.md
+  },
+  // A Material radio-dialog row: 56, the choice applies on tap.
+  radioRow: { minHeight: theme.space[56], justifyContent: "center" },
+  optionPressed: { backgroundColor: theme.state.pressed },
+  // The leading check column: every row reserves it so the labels align.
+  check: { width: theme.icon.md, alignItems: "center" },
+  optionLabel: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    color: theme.color.text,
+    variants: {
+      os: {
+        ios: { fontSize: theme.fontSize[17] },
+        android: { fontSize: theme.fontSize[16] }
+      }
+    }
+  }
+}));
+var MIN_SCALE = 0.85;
+var TILT = 50;
+function WheelPicker({
+  items: itemsProp,
+  value,
+  onValueChange,
+  visibleRows = 5,
+  accessibilityLabel,
+  disabled = false,
+  motion = "full",
+  size = "md",
+  surface,
+  presentation = "bare",
+  error = false,
+  hint,
+  loading: loadingProp = false,
+  clearable = false,
+  onClear,
+  clearLabel = "Clear",
+  placeholder,
+  asyncItems,
+  style,
+  testID
+}) {
+  const theme = useLoamTheme("picker");
+  const labels = useLabels("picker", PICKER_DEFAULT_LABELS);
+  const { styles } = useStyles(sheet2);
+  const level = useResolvedMotion(motion, "picker");
+  const row = theme.ctl[size];
+  const [fetched, setFetched] = React2.useState(null);
+  const [fetching, setFetching] = React2.useState(asyncItems != null);
+  React2.useEffect(() => {
+    if (!asyncItems) return;
+    let live2 = true;
+    setFetching(true);
+    asyncItems().then((rows) => {
+      if (live2) setFetched(rows);
+    }).finally(() => {
+      if (live2) setFetching(false);
+    });
+    return () => {
+      live2 = false;
+    };
+  }, []);
+  const items = fetched ?? itemsProp;
+  const loading = loadingProp || fetching;
+  const invalid = Boolean(error);
+  const message = typeof error === "string" && error ? error : hint;
+  const empty = value === void 0;
+  const pad = row * (visibleRows - 1) / 2;
+  const selectedIndex = Math.max(
+    0,
+    items.findIndex((item) => item.value === value)
+  );
+  const scrollY = React2.useRef(new Animated.Value(selectedIndex * row)).current;
+  const scroller = React2.useRef(null);
+  const live = React2.useRef(selectedIndex);
+  const settled = React2.useRef(selectedIndex);
+  const indexAt = (y) => Math.min(items.length - 1, Math.max(0, Math.round(y / row)));
+  React2.useLayoutEffect(() => {
+    if (Platform.OS === "web")
+      scroller.current?.scrollTo({ y: selectedIndex * row, animated: false });
+  }, []);
+  React2.useEffect(() => {
+    if (selectedIndex === settled.current) return;
+    settled.current = selectedIndex;
+    live.current = selectedIndex;
+    scroller.current?.scrollTo({ y: selectedIndex * row, animated: level === "full" });
+  }, [selectedIndex, row, level]);
+  const commit = (index) => {
+    settled.current = index;
+    const item = items[index];
+    if (item && item.value !== value) onValueChange?.(item.value);
+  };
+  const onScroll = Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+    useNativeDriver: true,
+    listener: (e) => {
+      const i = indexAt(e.nativeEvent.contentOffset.y);
+      if (i !== live.current) {
+        live.current = i;
+        haptics.selection();
+      }
+      if (idle.current) clearTimeout(idle.current);
+      idle.current = setTimeout(() => commit(i), 150);
+    }
+  });
+  const idle = React2.useRef(null);
+  React2.useEffect(
+    () => () => {
+      if (idle.current) clearTimeout(idle.current);
+    },
+    []
+  );
+  const onEnd = (e) => {
+    if (idle.current) clearTimeout(idle.current);
+    commit(indexAt(e.nativeEvent.contentOffset.y));
+  };
+  const step = (delta) => {
+    if (disabled) return;
+    const next = Math.min(items.length - 1, Math.max(0, settled.current + delta));
+    if (next === settled.current) return;
+    haptics.selection();
+    live.current = next;
+    scroller.current?.scrollTo({ y: next * row, animated: level === "full" });
+    commit(next);
+  };
+  const current = empty && placeholder ? void 0 : items[selectedIndex];
+  const valueText = empty && placeholder ? placeholder : current?.label;
+  const drum = /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      accessible: true,
+      accessibilityRole: "adjustable",
+      accessibilityLabel,
+      accessibilityValue: { text: valueText },
+      accessibilityState: { disabled },
+      ...{
+        role: "slider",
+        "aria-valuetext": valueText,
+        "aria-disabled": disabled || void 0,
+        "aria-busy": loading || void 0,
+        "aria-invalid": invalid || void 0
+      },
+      accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+      onAccessibilityAction: (e) => step(e.nativeEvent.actionName === "increment" ? 1 : -1),
+      style: [
+        styles.wheel,
+        { height: row * visibleRows },
+        surface ? { backgroundColor: fieldSurfaceFill(theme, surface) } : null,
+        disabled ? { opacity: theme.state.disabledOpacity } : null,
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            pointerEvents: "none",
+            style: [
+              styles.band,
+              { top: pad, height: row },
+              invalid ? { borderColor: theme.color.danger } : null
+            ]
+          }
+        ),
+        loading ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.spinner, children: /* @__PURE__ */ jsx(
+          ActivityIndicator,
+          {
+            size: "small",
+            color: theme.color.accent,
+            testID: "wheel-picker-spinner",
+            accessibilityLabel: labels.validating
+          }
+        ) }) : null,
+        /* @__PURE__ */ jsx(
+          Animated.ScrollView,
+          {
+            ref: scroller,
+            showsVerticalScrollIndicator: false,
+            scrollEnabled: !disabled,
+            snapToInterval: row,
+            decelerationRate: "fast",
+            contentOffset: { x: 0, y: selectedIndex * row },
+            contentContainerStyle: { paddingVertical: pad },
+            scrollEventThrottle: 16,
+            onScroll,
+            onMomentumScrollEnd: onEnd,
+            style: Platform.OS === "web" ? { scrollSnapType: "y mandatory" } : void 0,
+            ...{ "aria-hidden": true },
+            children: items.map((item, i) => {
+              const at = i * row;
+              const range = [at - 2 * row, at - row, at, at + row, at + 2 * row];
+              const opacity = scrollY.interpolate({
+                inputRange: range,
+                outputRange: [0.3, 0.6, 1, 0.6, 0.3],
+                extrapolate: "clamp"
+              });
+              const turn = level === "full" ? [
+                { perspective: row * 8 },
+                {
+                  rotateX: scrollY.interpolate({
+                    inputRange: range,
+                    outputRange: [
+                      `${-TILT}deg`,
+                      `${-TILT / 2}deg`,
+                      "0deg",
+                      `${TILT / 2}deg`,
+                      `${TILT}deg`
+                    ],
+                    extrapolate: "clamp"
+                  })
+                },
+                {
+                  scale: scrollY.interpolate({
+                    inputRange: range,
+                    outputRange: [
+                      MIN_SCALE,
+                      (1 + MIN_SCALE) / 2,
+                      1,
+                      (1 + MIN_SCALE) / 2,
+                      MIN_SCALE
+                    ],
+                    extrapolate: "clamp"
+                  })
+                }
+              ] : [];
+              return /* @__PURE__ */ jsx(
+                Animated.View,
+                {
+                  style: [
+                    styles.row,
+                    { height: row, opacity, transform: turn },
+                    Platform.OS === "web" ? { scrollSnapAlign: "center" } : null
+                  ],
+                  children: /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      style: [
+                        styles.label,
+                        size === "sm" ? { fontSize: theme.fontSize[17] } : null,
+                        i === selectedIndex && !(empty && placeholder) && styles.labelSelected
+                      ],
+                      numberOfLines: 1,
+                      children: item.label
+                    }
+                  )
+                },
+                item.value
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+  if (presentation === "bare" && !message && !(empty && placeholder) && !(clearable && !empty)) {
+    return drum;
+  }
+  return /* @__PURE__ */ jsxs(View, { style: [styles.outer, presentation === "card" ? styles.card : null], children: [
+    empty && placeholder ? /* @__PURE__ */ jsx(Text, { style: styles.caption, children: placeholder }) : null,
+    drum,
+    clearable && !empty ? /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: clearLabel,
+        disabled,
+        onPress: onClear,
+        style: ({ pressed }) => [
+          styles.clear,
+          pressed ? { opacity: theme.state.pressedOpacity } : null
+        ],
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: theme.color.text2 }),
+          /* @__PURE__ */ jsx(Text, { style: styles.clearText, children: clearLabel })
+        ]
+      }
+    ) : null,
+    message ? /* @__PURE__ */ jsx(Text, { style: invalid ? styles.messageError : styles.message, children: message }) : null
+  ] });
+}
+var sheet2 = createStyleSheet((theme) => ({
+  wheel: { alignSelf: "stretch", overflow: "hidden" },
+  band: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    // F70: a neutral state-selected band, r 8, behind a centre that never
+    // changes weight.
+    borderRadius: theme.ctl.r.md,
+    backgroundColor: theme.state.selected,
+    // The tint collapses to the surface under `contrast: 'more'`, where
+    // `edge.accent` turns opaque and keeps the selection band drawn.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent
+  },
+  outer: { alignSelf: "stretch", gap: theme.space.s1 },
+  card: {
+    padding: theme.space.s2,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  spinner: { position: "absolute", top: theme.space.s2, right: theme.space.s2 },
+  caption: { fontFamily: theme.font.sans, fontSize: theme.fontSize[14], color: theme.color.text3 },
+  clear: {
+    alignSelf: "center",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1,
+    minHeight: theme.tapMin
+  },
+  clearText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text2
+  },
+  message: { fontFamily: theme.font.sans, fontSize: theme.fontSize[12], color: theme.color.text3 },
+  messageError: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.dangerOnSoft
+  },
+  row: { alignItems: "center", justifyContent: "center" },
+  label: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[20],
+    color: theme.color.text
+  },
+  // The centre reads 20 / 400 in ink: the band marks it, the weight does not.
+  labelSelected: { fontWeight: theme.fontWeight.regular, color: theme.color.text }
+}));
+
+export { Picker, WheelPicker };