@multiplatform.one/frappe-ui 7.65.2 → 7.67.0

package/dist/cjs/list/RecordCard.cjs

@@ -81,39 +81,71 @@ function RecordCard({
     press?.nativeEvent?.stopPropagation?.();
     favorite?.toggle();
   };
-  const passThrough = href ? "box-none" : void 0;
-  const inert = href ? "none" : void 0;
+  const heart = favorite ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+    position: "absolute",
+    top: "$1",
+    right: "$1",
+    zIndex: 2,
+    ...(import_components.isWeb ? {
+      onClickCapture: event => {
+        event.preventDefault();
+      }
+    } : void 0),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      circular: true,
+      chromeless: true,
+      minWidth: knobProps.sizeToken,
+      minHeight: knobProps.sizeToken,
+      ...(0, import_theme.transitionProps)(knobProps.motion.control),
+      backgroundColor: "$background08",
+      hoverStyle: {
+        backgroundColor: "$background",
+        scale: 1.08
+      },
+      pressStyle: {
+        backgroundColor: "$background",
+        scale: 0.92
+      },
+      onPress: handleToggleFavorite,
+      render: "button",
+      type: "button",
+      col: favorite.active ? "$red9" : "$color11",
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
+        size: 20,
+        weight: favorite.active ? "fill" : "regular"
+      }),
+      "aria-label": favorite.active ? t("Remove {{name}} from favorites", {
+        name: title
+      }) : t("Add {{name}} to favorites", {
+        name: title
+      }),
+      "aria-pressed": favorite.active,
+      testID: favoriteTestID
+    })
+  }) : null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Card, {
     testID,
-    position: "relative",
-    ...knobProps.cardSurface,
-    padding: 0,
-    gap: 0,
-    overflow: "hidden",
-    "data-record-card-bleed": "",
-    elevation: knobProps.elevation,
-    cursor: "pointer",
-    ...(0, import_theme.transitionProps)(knobProps.motion.control, ["boxShadow", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "elevation"]),
-    hoverStyle: {
-      ...elevationState.hoverKnobProps
-    },
-    pressStyle: {
-      ...elevationState.pressKnobProps
-    },
-    ...(href ? anchorKeyboardFocus ? import_theme.keyboardFocusRingProps : null : {
-      role: "button",
-      "aria-label": title,
-      onPress: handlePress,
-      focusVisibleStyle: focusRing
+    media: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      position: "relative",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ImageWell.ImageWell, {
+        sources: images,
+        alt: title,
+        tint,
+        inset: 0.04,
+        borderRadius: 0,
+        lazy,
+        ...{
+          "data-record-card-media": ""
+        }
+      }), heart]
     }),
-    children: [href ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Anchor, {
+    overlay: href ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Anchor, {
       href,
       position: "absolute",
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
-      zIndex: 0,
       textDecorationLine: "none",
       outlineWidth: 0,
       "aria-label": title,
@@ -124,108 +156,56 @@ function RecordCard({
         },
         onBlur: () => setAnchorKeyboardFocus(false)
       } : void 0)
-    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
-      gap: 0,
-      zIndex: 1,
-      pointerEvents: passThrough,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
-        position: "relative",
-        pointerEvents: passThrough,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ImageWell.ImageWell, {
-          sources: images,
-          alt: title,
-          tint,
-          inset: 0.04,
-          borderRadius: 0,
-          lazy,
-          pointerEvents: inert,
-          ...{
-            "data-record-card-media": ""
-          }
-        }), favorite ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
-          position: "absolute",
-          top: "$1",
-          right: "$1",
-          zIndex: 2,
-          pointerEvents: "auto",
-          ...(import_components.isWeb ? {
-            onClickCapture: event => {
-              event.preventDefault();
-            }
-          } : void 0),
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-            circular: true,
-            chromeless: true,
-            minWidth: knobProps.sizeToken,
-            minHeight: knobProps.sizeToken,
-            ...(0, import_theme.transitionProps)(knobProps.motion.control),
-            backgroundColor: "$background08",
-            hoverStyle: {
-              backgroundColor: "$background",
-              scale: 1.08
-            },
-            pressStyle: {
-              backgroundColor: "$background",
-              scale: 0.92
-            },
-            onPress: handleToggleFavorite,
-            render: "button",
-            type: "button",
-            col: favorite.active ? "$red9" : "$color11",
-            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
-              size: 20,
-              weight: favorite.active ? "fill" : "regular"
-            }),
-            "aria-label": favorite.active ? t("Remove {{name}} from favorites", {
-              name: title
-            }) : t("Add {{name}} to favorites", {
-              name: title
-            }),
-            "aria-pressed": favorite.active,
-            testID: favoriteTestID
-          })
-        }) : null]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
-        ...knobProps.panelPadding,
-        gap: "$1.5",
-        pointerEvents: inert,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-          gap: "$2",
-          alignItems: "baseline",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-            ...knobProps.heading,
-            fontWeight: "700",
-            fontSize: "$4",
-            numberOfLines: 1,
-            color: "$color12",
-            flexShrink: 1,
-            children: title
-          }), code ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-            fontSize: "$2",
-            fontWeight: "700",
-            color: "$color10",
-            flexShrink: 0,
-            ...{
-              "data-record-card-code": ""
-            },
-            children: code
-          }) : null]
-        }), subtitle ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-          ...knobProps.body,
-          fontSize: "$2",
-          color: "$color10",
-          numberOfLines: 1,
-          children: subtitle
-        }) : null, badges.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
-          gap: "$1.5",
-          flexWrap: "wrap",
-          children: badges.map(badge => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetBadge.FacetBadge, {
-            label: badge.label,
-            tint: badge.tint,
-            size: "$3"
-          }, badge.value))
-        }) : null]
-      })]
-    })]
+    }) : void 0,
+    cursor: "pointer",
+    ...(0, import_theme.transitionProps)(knobProps.motion.control, ["boxShadow", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "elevation"]),
+    hoverStyle: {
+      ...elevationState.hoverKnobProps
+    },
+    pressStyle: {
+      ...elevationState.pressKnobProps
+    },
+    ...(href ? anchorKeyboardFocus ? import_theme.keyboardFocusRingProps : null : {
+      role: "button",
+      "aria-label": title,
+      onPress: handlePress,
+      focusVisibleStyle: focusRing
+    }),
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      gap: "$2",
+      alignItems: "baseline",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        ...knobProps.heading,
+        fontWeight: "700",
+        fontSize: "$4",
+        numberOfLines: 1,
+        color: "$color12",
+        flexShrink: 1,
+        children: title
+      }), code ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$2",
+        fontWeight: "700",
+        color: "$color10",
+        flexShrink: 0,
+        ...{
+          "data-record-card-code": ""
+        },
+        children: code
+      }) : null]
+    }), subtitle ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      ...knobProps.body,
+      fontSize: "$2",
+      color: "$color10",
+      numberOfLines: 1,
+      children: subtitle
+    }) : null, badges.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+      gap: "$1.5",
+      flexWrap: "wrap",
+      children: badges.map(badge => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetBadge.FacetBadge, {
+        label: badge.label,
+        tint: badge.tint,
+        size: "$3"
+      }, badge.value))
+    }) : null]
   });
 }

package/dist/cjs/list/RecordCard.native.js

@@ -33,6 +33,7 @@ var import_forms = require("@multiplatform.one/forms");
 var import_theme = require("@multiplatform.one/theme");
 var import_react = require("@phosphor-icons/react");
 var import_react_i18next = require("react-i18next");
+var import_tamagui = require("tamagui");
 var import_FacetBadge = require("./FacetBadge.native.js");
 var import_ImageWell = require("./ImageWell.native.js");
 function RecordCard(param) {
@@ -48,6 +49,7 @@ function RecordCard(param) {
     testID,
     favoriteTestID
   } = param;
+  var _this;
   var {
     t
   } = (0, import_react_i18next.useTranslation)();
@@ -57,21 +59,58 @@ function RecordCard(param) {
   } = (0, import_theme.useResolvedKnobs)({
     component: "Card"
   });
+  var theme = (0, import_tamagui.useTheme)();
   var handleToggleFavorite = function handleToggleFavorite2(event) {
     var _event_stopPropagation;
     event === null || event === void 0 ? void 0 : (_event_stopPropagation = event.stopPropagation) === null || _event_stopPropagation === void 0 ? void 0 : _event_stopPropagation.call(event);
     favorite === null || favorite === void 0 ? void 0 : favorite.toggle();
   };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Card, {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Card, {
     testID,
-    ...knobProps.cardSurface,
-    // Full-bleed media: the card has no inset of its own and its radius
-    // clips the image well; the body below carries the inset.
-    padding: 0,
-    gap: 0,
-    overflow: "hidden",
-    "data-record-card-bleed": "",
-    elevation: knobProps.elevation,
+    media: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      position: "relative",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ImageWell.ImageWell, {
+        sources: images,
+        alt: title,
+        tint,
+        inset: 0.04,
+        borderRadius: 0,
+        ...{
+          "data-record-card-media": ""
+        }
+      }), favorite ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        position: "absolute",
+        top: "$1",
+        right: "$1",
+        zIndex: 2,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          circular: true,
+          chromeless: true,
+          minWidth: knobProps.sizeToken,
+          minHeight: knobProps.sizeToken,
+          ...(0, import_theme.transitionProps)(knobProps.motion.control),
+          backgroundColor: "$background08",
+          pressStyle: {
+            backgroundColor: "$background",
+            scale: 0.92
+          },
+          onPress: handleToggleFavorite,
+          col: favorite.active ? "$red9" : "$color11",
+          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
+            size: 20,
+            weight: favorite.active ? "fill" : "regular",
+            color: (_this = favorite.active ? theme.red9 : theme.color11) === null || _this === void 0 ? void 0 : _this.val
+          }),
+          "aria-label": favorite.active ? t("Remove {{name}} from favorites", {
+            name: title
+          }) : t("Add {{name}} to favorites", {
+            name: title
+          }),
+          "aria-pressed": favorite.active,
+          testID: favoriteTestID
+        })
+      }) : null]
+    }),
     ...(0, import_theme.transitionProps)(knobProps.motion.control, ["boxShadow", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "elevation"]),
     pressStyle: {
       scale: 0.98,
@@ -82,93 +121,44 @@ function RecordCard(param) {
     onPress: function onPress1() {
       return onPress === null || onPress === void 0 ? void 0 : onPress();
     },
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
-      gap: 0,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
-        position: "relative",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ImageWell.ImageWell, {
-          sources: images,
-          alt: title,
-          tint,
-          inset: 0.04,
-          borderRadius: 0,
-          ...{
-            "data-record-card-media": ""
-          }
-        }), favorite ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
-          position: "absolute",
-          top: "$1",
-          right: "$1",
-          zIndex: 2,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-            circular: true,
-            chromeless: true,
-            minWidth: knobProps.sizeToken,
-            minHeight: knobProps.sizeToken,
-            ...(0, import_theme.transitionProps)(knobProps.motion.control),
-            backgroundColor: "$background08",
-            pressStyle: {
-              backgroundColor: "$background",
-              scale: 0.92
-            },
-            onPress: handleToggleFavorite,
-            col: favorite.active ? "$red9" : "$color11",
-            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
-              size: 20,
-              weight: favorite.active ? "fill" : "regular"
-            }),
-            "aria-label": favorite.active ? t("Remove {{name}} from favorites", {
-              name: title
-            }) : t("Add {{name}} to favorites", {
-              name: title
-            }),
-            "aria-pressed": favorite.active,
-            testID: favoriteTestID
-          })
-        }) : null]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
-        ...knobProps.panelPadding,
-        gap: "$1.5",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-          gap: "$2",
-          alignItems: "baseline",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-            ...knobProps.heading,
-            fontWeight: "700",
-            fontSize: "$4",
-            numberOfLines: 1,
-            color: "$color12",
-            flexShrink: 1,
-            children: title
-          }), code ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-            fontSize: "$2",
-            fontWeight: "700",
-            color: "$color10",
-            flexShrink: 0,
-            ...{
-              "data-record-card-code": ""
-            },
-            children: code
-          }) : null]
-        }), subtitle ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-          ...knobProps.body,
-          fontSize: "$2",
-          color: "$color10",
-          numberOfLines: 1,
-          children: subtitle
-        }) : null, badges.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
-          gap: "$1.5",
-          flexWrap: "wrap",
-          children: badges.map(function (badge) {
-            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetBadge.FacetBadge, {
-              label: badge.label,
-              tint: badge.tint,
-              size: "$3"
-            }, badge.value);
-          })
-        }) : null]
-      })]
-    })
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      gap: "$2",
+      alignItems: "baseline",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        ...knobProps.heading,
+        fontWeight: "700",
+        fontSize: "$4",
+        numberOfLines: 1,
+        color: "$color12",
+        flexShrink: 1,
+        children: title
+      }), code ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$2",
+        fontWeight: "700",
+        color: "$color10",
+        flexShrink: 0,
+        ...{
+          "data-record-card-code": ""
+        },
+        children: code
+      }) : null]
+    }), subtitle ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      ...knobProps.body,
+      fontSize: "$2",
+      color: "$color10",
+      numberOfLines: 1,
+      children: subtitle
+    }) : null, badges.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+      gap: "$1.5",
+      flexWrap: "wrap",
+      children: badges.map(function (badge) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetBadge.FacetBadge, {
+          label: badge.label,
+          tint: badge.tint,
+          size: "$3"
+        }, badge.value);
+      })
+    }) : null]
   });
 }
 //# sourceMappingURL=RecordCard.native.js.map

package/dist/cjs/list/RecordCard.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["RecordCard_native_exports","__export","RecordCard","module","exports","__toCommonJS","import_jsx_runtime","require","import_components","import_forms","import_theme","import_react","import_react_i18next","import_FacetBadge","import_ImageWell","param","title","subtitle","code","images","tint","badges","onPress","favorite","testID","favoriteTestID","t","useTranslation","knobProps","elevation","elevationState","useResolvedKnobs","component","handleToggleFavorite","handleToggleFavorite2","event","_event_stopPropagation","stopPropagation","call","toggle","jsx","Card","cardSurface","padding","gap","overflow","transitionProps","motion","control","pressStyle","scale","pressKnobProps","role","onPress1","children","jsxs","YStack","position","ImageWell","sources","alt","inset","borderRadius","XStack","top","right","zIndex","Button","circular","chromeless","minWidth","sizeToken","minHeight","backgroundColor","col","active","icon","HeartIcon","size","weight","name","panelPadding","alignItems","Text","heading","fontWeight","fontSize","numberOfLines","color","flexShrink","body","length","flexWrap","map","badge","FacetBadge","label","value"],"sources":["../../../src/list/RecordCard.native.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["RecordCard_native_exports","__export","RecordCard","module","exports","__toCommonJS","import_jsx_runtime","require","import_components","import_forms","import_theme","import_react","import_react_i18next","import_tamagui","import_FacetBadge","import_ImageWell","param","title","subtitle","code","images","tint","badges","onPress","favorite","testID","favoriteTestID","_this","t","useTranslation","knobProps","elevation","elevationState","useResolvedKnobs","component","theme","useTheme","handleToggleFavorite","handleToggleFavorite2","event","_event_stopPropagation","stopPropagation","call","toggle","jsxs","Card","media","YStack","position","children","jsx","ImageWell","sources","alt","inset","borderRadius","XStack","top","right","zIndex","Button","circular","chromeless","minWidth","sizeToken","minHeight","transitionProps","motion","control","backgroundColor","pressStyle","scale","col","active","icon","HeartIcon","size","weight","color","red9","color11","val","name","pressKnobProps","role","onPress1","gap","alignItems","Text","heading","fontWeight","fontSize","numberOfLines","flexShrink","body","length","flexWrap","map","badge","FacetBadge","label","value"],"sources":["../../../src/list/RecordCard.native.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/list/ShufflePanel.cjs

@@ -31,7 +31,6 @@ var import_react = require("@phosphor-icons/react");
 var import_react2 = require("react");
 var import_react_i18next = require("react-i18next");
 var import_jsx_runtime = require("react/jsx-runtime");
-const pickWidth = "$12";
 function randomOtherIndex(current, length) {
   if (length < 2) return Math.max(0, current);
   const offset = 1 + Math.floor(Math.random() * (length - 1));
@@ -44,6 +43,7 @@ function ShufflePanel({
   itemLabel,
   renderPick,
   onGo,
+  grid,
   testID
 }) {
   const {
@@ -52,6 +52,10 @@ function ShufflePanel({
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  const {
+    columns,
+    gutter
+  } = (0, import_components.useImageGridGeometry)(grid);
   const named = (0, import_react2.useMemo)(() => rows.filter(row => row.name), [rows]);
   const items = (0, import_react2.useMemo)(() => named.map(row => ({
     value: row.name,
@@ -64,49 +68,66 @@ function ShufflePanel({
     const current = named.findIndex(row => row.name === pick.name);
     setSelected(named[randomOtherIndex(current, named.length)]?.name ?? "");
   };
+  const pickLabel = itemLabel(pick);
+  const tracks = Math.max(2, columns);
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
     id,
     role: "region",
     "aria-label": label,
-    ...knobProps.surface,
-    ...knobProps.borderRadius,
-    ...knobProps.panelPadding,
-    ...knobProps.gap,
+    gap: gutter,
     alignItems: "center",
-    flexWrap: "wrap",
     testID,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Wheel, {
-      items,
-      value: pick.name,
-      onChange: next => setSelected(String(next)),
-      visibleItems: 3,
-      loop: true,
-      "aria-label": label
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-      width: pickWidth,
-      flexShrink: 0,
-      children: renderPick(pick)
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-      ...knobProps.gap,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      flexGrow: tracks - 1,
+      flexShrink: 1,
+      flexBasis: gutter * (tracks - 2),
+      minWidth: 0,
       alignItems: "center",
-      flexShrink: 0,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
-        outlined: true,
-        onPress: spin,
-        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ArrowCounterClockwiseIcon, {
-          size: 16
-        }),
-        testID: testID ? `${testID}-spin` : void 0,
-        children: t("Spin")
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
-        theme: "accent",
-        onPress: () => onGo(pick),
-        iconAfter: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ArrowRightIcon, {
-          size: 16
-        }),
-        testID: testID ? `${testID}-go` : void 0,
-        children: t("Go")
+      ...knobProps.gap,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Wheel, {
+        items,
+        value: pick.name,
+        onChange: next => setSelected(String(next)),
+        visibleItems: 3,
+        loop: true,
+        "aria-label": label
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tooltip, {
+          content: t("Shuffle"),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+            chromeless: true,
+            accentInk: true,
+            circular: true,
+            icon: import_react.ShuffleIcon,
+            "aria-label": t("Shuffle"),
+            onPress: spin,
+            testID: testID ? `${testID}-spin` : void 0
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tooltip, {
+          content: t("Open {{name}}", {
+            name: pickLabel
+          }),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+            chromeless: true,
+            accentInk: true,
+            circular: true,
+            icon: import_react.ArrowRightIcon,
+            "aria-label": t("Open {{name}}", {
+              name: pickLabel
+            }),
+            onPress: () => onGo(pick),
+            testID: testID ? `${testID}-go` : void 0
+          })
+        })]
       })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: 0,
+      minWidth: 0,
+      children: renderPick(pick)
     })]
   });
 }