@multiplatform.one/frappe-ui 7.34.4 → 7.36.0

package/dist/cjs/list/ListToolsSheet.cjs

@@ -0,0 +1,228 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ListToolsSheet_exports = {};
+__export(ListToolsSheet_exports, {
+  ListToolsSheet: () => ListToolsSheet,
+  countListNarrowings: () => countListNarrowings
+});
+module.exports = __toCommonJS(ListToolsSheet_exports);
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_BandFilters = require("./BandFilters.cjs");
+var import_FacetRail = require("./FacetRail.cjs");
+var import_listState = require("./listState.cjs");
+var import_RangeFilter = require("./RangeFilter.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function countListNarrowings(list) {
+  return (0, import_listState.activeFilterCount)(list.state);
+}
+function SectionLabel({
+  children
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+    ...knobProps.label,
+    color: knobProps.textAccentColor,
+    textTransform: "uppercase",
+    children
+  });
+}
+function ListToolsSheet({
+  controls,
+  list,
+  showFavorites,
+  shuffle,
+  facets,
+  testID
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const iconSize = knobProps.controlIcon.width;
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const {
+    state,
+    update,
+    favorites
+  } = list;
+  const sorts = controls.sorts ?? [];
+  const ranges = controls.ranges ?? [];
+  const count = countListNarrowings(list);
+  const filtersLabel = t("Filters");
+  (0, import_react2.useEffect)(() => {
+    if (!import_components.isWeb || typeof document === "undefined" || !open) return;
+    const onKeyDown = event => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Badge, {
+      count,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        outlined: count === 0,
+        theme: count > 0 ? "accent" : void 0,
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FunnelIcon, {
+          size: iconSize,
+          weight: count > 0 ? "fill" : "regular"
+        }),
+        onPress: () => setOpen(true),
+        "aria-label": count > 0 ? t("Filters ({{count}})", {
+          count
+        }) : filtersLabel,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        testID: `${testID}-tools`,
+        children: filtersLabel
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SheetModal, {
+      open,
+      onOpenChange: setOpen,
+      snapPoint: 85,
+      scrollable: true,
+      header: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+        ...knobProps.heading,
+        children: t("Filter & sort")
+      }),
+      children: open ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+        ...knobProps.gapLg,
+        testID: `${testID}-tools-sheet`,
+        children: [sorts.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+          ...knobProps.gap,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(SectionLabel, {
+            children: t("Sort by")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetRail.FacetRail, {
+            label: t("Sort by"),
+            value: state.sort ?? "",
+            onChange: value => update({
+              sort: value
+            }),
+            options: sorts.map(sort => ({
+              value: sort.value,
+              label: sort.label
+            })),
+            testID: `${testID}-tools-sort`
+          })]
+        }) : null, facets.map(facet => {
+          const reading = list.facets[facet.param];
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+            ...knobProps.gap,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(SectionLabel, {
+              children: facet.label
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetRail.FacetRail, {
+              label: facet.label,
+              value: state.facets[facet.param] ?? "",
+              onChange: value => update({
+                facets: {
+                  [facet.param]: value
+                }
+              }),
+              testID: `${testID}-tools-${facet.param}`,
+              options: [{
+                value: "",
+                label: facet.allLabel ?? t("All"),
+                count: list.total
+              }, ...facet.options.map(value => ({
+                value,
+                label: facet.optionLabel?.(value) ?? value,
+                tint: facet.tint?.(value),
+                count: reading?.counts[value]
+              }))]
+            })]
+          }, facet.param);
+        }), (controls.bands ?? []).map(band => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+          ...knobProps.gap,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(SectionLabel, {
+            children: band.label
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BandFilters.BandFilter, {
+            band,
+            list,
+            layout: "list",
+            testID: `${testID}-tools-${band.param}`
+          })]
+        }, band.param)), ranges.map(range => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RangeFilter.RangeFilter, {
+          label: range.label,
+          value: state.ranges[range.param] ?? 0,
+          max: (0, import_RangeFilter.rangeCeiling)(list.highest[range.param] ?? 0),
+          step: range.step,
+          onChange: value => update({
+            ranges: {
+              [range.param]: value
+            }
+          })
+        }, range.param)), showFavorites || shuffle ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+          ...knobProps.gap,
+          alignItems: "flex-start",
+          children: [showFavorites ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            outlined: !state.favoritesOnly,
+            theme: state.favoritesOnly ? "accent" : void 0,
+            onPress: () => update({
+              favoritesOnly: !state.favoritesOnly
+            }),
+            "aria-pressed": state.favoritesOnly,
+            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
+              size: iconSize,
+              weight: state.favoritesOnly ? "fill" : "regular"
+            }),
+            testID: `${testID}-tools-favorites`,
+            children: favorites.count > 0 ? t("Favorites ({{count}})", {
+              count: favorites.count
+            }) : t("Favorites")
+          }) : null, shuffle ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            outlined: !shuffle.open,
+            theme: shuffle.open ? "accent" : void 0,
+            onPress: () => {
+              shuffle.toggle();
+              setOpen(false);
+            },
+            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DiceFiveIcon, {
+              size: iconSize
+            }),
+            "aria-expanded": shuffle.open,
+            "aria-controls": shuffle.panelId,
+            testID: `${testID}-tools-shuffle`,
+            children: t("Surprise me")
+          }) : null]
+        }) : null, (0, import_listState.isListNarrowed)(state) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+          alignItems: "flex-start",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            chromeless: true,
+            onPress: list.clear,
+            testID: `${testID}-tools-clear`,
+            children: t("Clear filters")
+          })
+        }) : null]
+      }) : null
+    })]
+  });
+}

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

@@ -0,0 +1,261 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ListToolsSheet_exports = {};
+__export(ListToolsSheet_exports, {
+  ListToolsSheet: () => ListToolsSheet,
+  countListNarrowings: () => countListNarrowings
+});
+module.exports = __toCommonJS(ListToolsSheet_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_BandFilters = require("./BandFilters.native.js");
+var import_FacetRail = require("./FacetRail.native.js");
+var import_listState = require("./listState.native.js");
+var import_RangeFilter = require("./RangeFilter.native.js");
+function countListNarrowings(list) {
+  return (0, import_listState.activeFilterCount)(list.state);
+}
+function SectionLabel(param) {
+  var {
+    children
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+    ...knobProps.label,
+    color: knobProps.textAccentColor,
+    textTransform: "uppercase",
+    children
+  });
+}
+function ListToolsSheet(param) {
+  var {
+    controls,
+    list,
+    showFavorites,
+    shuffle,
+    facets,
+    testID
+  } = param;
+  var _controls_sorts, _controls_ranges, _state_sort, _controls_bands;
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var iconSize = knobProps.controlIcon.width;
+  var [open, setOpen] = (0, import_react2.useState)(false);
+  var {
+    state,
+    update,
+    favorites
+  } = list;
+  var sorts = (_controls_sorts = controls.sorts) !== null && _controls_sorts !== void 0 ? _controls_sorts : [];
+  var ranges = (_controls_ranges = controls.ranges) !== null && _controls_ranges !== void 0 ? _controls_ranges : [];
+  var count = countListNarrowings(list);
+  var filtersLabel = t("Filters");
+  (0, import_react2.useEffect)(function () {
+    if (!import_components.isWeb || typeof document === "undefined" || !open) return;
+    var onKeyDown = function onKeyDown2(event) {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return function () {
+      return document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Badge, {
+      count,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        outlined: count === 0,
+        theme: count > 0 ? "accent" : void 0,
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FunnelIcon, {
+          size: iconSize,
+          weight: count > 0 ? "fill" : "regular"
+        }),
+        onPress: function onPress() {
+          return setOpen(true);
+        },
+        "aria-label": count > 0 ? t("Filters ({{count}})", {
+          count
+        }) : filtersLabel,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        testID: `${testID}-tools`,
+        children: filtersLabel
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SheetModal, {
+      open,
+      onOpenChange: setOpen,
+      snapPoint: 85,
+      scrollable: true,
+      header: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+        ...knobProps.heading,
+        children: t("Filter & sort")
+      }),
+      children: (
+      /* Mounted only while open: a closed sheet must not leave a second
+      sort, facet rail or favorites toggle in the page's tree. */
+      open ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+        ...knobProps.gapLg,
+        testID: `${testID}-tools-sheet`,
+        children: [sorts.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+          ...knobProps.gap,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(SectionLabel, {
+            children: t("Sort by")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetRail.FacetRail, {
+            label: t("Sort by"),
+            value: (_state_sort = state.sort) !== null && _state_sort !== void 0 ? _state_sort : "",
+            onChange: function onChange(value) {
+              return update({
+                sort: value
+              });
+            },
+            options: sorts.map(function (sort) {
+              return {
+                value: sort.value,
+                label: sort.label
+              };
+            }),
+            testID: `${testID}-tools-sort`
+          })]
+        }) : null, facets.map(function (facet) {
+          var _state_facets_facet_param, _facet_allLabel;
+          var reading = list.facets[facet.param];
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+            ...knobProps.gap,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(SectionLabel, {
+              children: facet.label
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetRail.FacetRail, {
+              label: facet.label,
+              value: (_state_facets_facet_param = state.facets[facet.param]) !== null && _state_facets_facet_param !== void 0 ? _state_facets_facet_param : "",
+              onChange: function onChange(value) {
+                return update({
+                  facets: {
+                    [facet.param]: value
+                  }
+                });
+              },
+              testID: `${testID}-tools-${facet.param}`,
+              options: [{
+                value: "",
+                label: (_facet_allLabel = facet.allLabel) !== null && _facet_allLabel !== void 0 ? _facet_allLabel : t("All"),
+                count: list.total
+              }, ...facet.options.map(function (value) {
+                var _ref;
+                var _facet_optionLabel, _facet_tint;
+                return {
+                  value,
+                  label: (_ref = (_facet_optionLabel = facet.optionLabel) === null || _facet_optionLabel === void 0 ? void 0 : _facet_optionLabel.call(facet, value)) !== null && _ref !== void 0 ? _ref : value,
+                  tint: (_facet_tint = facet.tint) === null || _facet_tint === void 0 ? void 0 : _facet_tint.call(facet, value),
+                  count: reading === null || reading === void 0 ? void 0 : reading.counts[value]
+                };
+              })]
+            })]
+          }, facet.param);
+        }), ((_controls_bands = controls.bands) !== null && _controls_bands !== void 0 ? _controls_bands : []).map(function (band) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+            ...knobProps.gap,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(SectionLabel, {
+              children: band.label
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BandFilters.BandFilter, {
+              band,
+              list,
+              layout: "list",
+              testID: `${testID}-tools-${band.param}`
+            })]
+          }, band.param);
+        }), ranges.map(function (range) {
+          var _state_ranges_range_param, _list_highest_range_param;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RangeFilter.RangeFilter, {
+            label: range.label,
+            value: (_state_ranges_range_param = state.ranges[range.param]) !== null && _state_ranges_range_param !== void 0 ? _state_ranges_range_param : 0,
+            max: (0, import_RangeFilter.rangeCeiling)((_list_highest_range_param = list.highest[range.param]) !== null && _list_highest_range_param !== void 0 ? _list_highest_range_param : 0),
+            step: range.step,
+            onChange: function onChange(value) {
+              return update({
+                ranges: {
+                  [range.param]: value
+                }
+              });
+            }
+          }, range.param);
+        }), showFavorites || shuffle ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+          ...knobProps.gap,
+          alignItems: "flex-start",
+          children: [showFavorites ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            outlined: !state.favoritesOnly,
+            theme: state.favoritesOnly ? "accent" : void 0,
+            onPress: function onPress() {
+              return update({
+                favoritesOnly: !state.favoritesOnly
+              });
+            },
+            "aria-pressed": state.favoritesOnly,
+            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
+              size: iconSize,
+              weight: state.favoritesOnly ? "fill" : "regular"
+            }),
+            testID: `${testID}-tools-favorites`,
+            children: favorites.count > 0 ? t("Favorites ({{count}})", {
+              count: favorites.count
+            }) : t("Favorites")
+          }) : null, shuffle ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            outlined: !shuffle.open,
+            theme: shuffle.open ? "accent" : void 0,
+            onPress: function onPress() {
+              shuffle.toggle();
+              setOpen(false);
+            },
+            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DiceFiveIcon, {
+              size: iconSize
+            }),
+            "aria-expanded": shuffle.open,
+            "aria-controls": shuffle.panelId,
+            testID: `${testID}-tools-shuffle`,
+            children: t("Surprise me")
+          }) : null]
+        }) : null, (0, import_listState.isListNarrowed)(state) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+          alignItems: "flex-start",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            chromeless: true,
+            onPress: list.clear,
+            testID: `${testID}-tools-clear`,
+            children: t("Clear filters")
+          })
+        }) : null]
+      }) : null)
+    })]
+  });
+}
+//# sourceMappingURL=ListToolsSheet.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ListToolsSheet_exports","__export","ListToolsSheet","countListNarrowings","module","exports","import_jsx_runtime","require","import_components","import_forms","import_theme","import_react","import_react2","import_react_i18next","import_BandFilters","import_FacetRail","import_listState","import_RangeFilter","list","activeFilterCount","state","SectionLabel","param","children","knobProps","useResolvedKnobs","jsx","Text","label","color","textAccentColor","textTransform","controls","showFavorites","shuffle","facets","testID","_controls_sorts","_controls_ranges","_state_sort","_controls_bands","t","useTranslation","iconSize","controlIcon","width","open","setOpen","useState","update","favorites","sorts","ranges","count","filtersLabel","useEffect","isWeb","document","onKeyDown","onKeyDown2","event","key","addEventListener","removeEventListener","jsxs","Fragment","Badge","Button","outlined","theme","icon","FunnelIcon","size","weight","onPress","SheetModal","onOpenChange","snapPoint","scrollable","header","SizableText","heading","YStack","gapLg","length","gap","FacetRail","sort","onChange","options","map","facet","_state_facets_facet_param","_facet_allLabel","reading","allLabel","total","_ref","_facet_optionLabel","_facet_tint","optionLabel","call","tint","counts","bands","band","BandFilter","layout"],"sources":["../../../src/list/ListToolsSheet.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/list/RangeFilter.cjs

@@ -42,11 +42,10 @@ var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
 var import_react_i18next = require("react-i18next");
 var import_jsx_runtime = require("react/jsx-runtime");
-const readoutWidth = 44;
-const trackMinWidth = 100;
+const commitDelayMs = 150;
 const RangeRowLazy = (0, import_react.lazy)(async () => {
-  const forms = await import("@multiplatform.one/forms");
-  const MaybeSlider = forms.Slider;
+  const tamagui = await import("tamagui");
+  const MaybeSlider = tamagui.Slider;
   if (!MaybeSlider) {
     const Absent = () => null;
     return {
@@ -59,7 +58,9 @@ const RangeRowLazy = (0, import_react.lazy)(async () => {
     value,
     max,
     step = 5,
-    onChange
+    onChange,
+    layout = "row",
+    testID
   }) {
     const {
       t
@@ -67,42 +68,105 @@ const RangeRowLazy = (0, import_react.lazy)(async () => {
     const {
       knobProps
     } = (0, import_theme.useResolvedKnobs)();
+    const [draft, setDraft] = (0, import_react.useState)(value);
+    const timer = (0, import_react.useRef)(null);
+    const onChangeRef = (0, import_react.useRef)(onChange);
+    onChangeRef.current = onChange;
+    (0, import_react.useEffect)(() => setDraft(value), [value]);
+    (0, import_react.useEffect)(() => () => {
+      if (timer.current) clearTimeout(timer.current);
+    }, []);
+    const move = next => {
+      setDraft(next);
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => onChangeRef.current(next), commitDelayMs);
+    };
+    const readout = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      ...knobProps.label,
+      color: draft > 0 ? "$color12" : "$color10",
+      flexShrink: 0,
+      userSelect: "none",
+      textAlign: "right",
+      "data-range-readout": "",
+      children: draft > 0 ? `${draft}+` : t("Any")
+    });
+    const caption = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      ...knobProps.label,
+      color: "$color11",
+      flexShrink: 0,
+      userSelect: "none",
+      children: label
+    });
+    const track =
+    // Inset by half the thumb so it stays inside the column at either end.
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_components.YStack, {
+      flexGrow: 1,
+      flexShrink: 1,
+      minWidth: 0,
+      justifyContent: "center",
+      paddingHorizontal: "$2",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(Slider, {
+        value: [Math.min(draft, max)],
+        min: 0,
+        max,
+        step,
+        size: "$2",
+        onValueChange: values => {
+          if (typeof values[0] === "number") move(values[0]);
+        },
+        "aria-label": label,
+        testID,
+        "data-range-slider": "",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Slider.Track, {
+          height: "$0.5",
+          backgroundColor: "$color5",
+          "data-slider-part": "track",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Slider.TrackActive, {
+            backgroundColor: "$color9",
+            "data-slider-part": "range"
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Slider.Thumb, {
+          index: 0,
+          size: "$1.5",
+          circular: true,
+          backgroundColor: "$background",
+          borderColor: "$color9",
+          borderWidth: knobProps.surface.borderWidth,
+          elevation: knobProps.elevation,
+          hoverStyle: {
+            borderColor: "$color10"
+          },
+          pressStyle: {
+            borderColor: "$color11"
+          },
+          focusVisibleStyle: {
+            outlineColor: "$outlineColor",
+            outlineWidth: 2
+          },
+          "aria-label": label,
+          "data-slider-part": "thumb"
+        })]
+      })
+    });
+    if (layout === "stack") {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+        ...knobProps.gapSm,
+        "data-range-layout": "stack",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+          alignItems: "baseline",
+          ...knobProps.gap,
+          children: [caption, readout]
+        }), track]
+      });
+    }
     return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
       ...knobProps.gap,
       alignItems: "center",
       flexGrow: 1,
       minWidth: 0,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-        fontSize: "$2",
-        color: "$color11",
-        flexShrink: 0,
-        userSelect: "none",
-        children: label
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-        flexGrow: 1,
-        flexShrink: 1,
-        minWidth: trackMinWidth,
-        justifyContent: "center",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Slider, {
-          value: [value],
-          min: 0,
-          max,
-          step,
-          onChange: values => {
-            if (typeof values[0] === "number") onChange(values[0]);
-          },
-          "aria-label": label,
-          compact: true
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-        fontSize: "$2",
-        fontWeight: "600",
-        color: value > 0 ? "$color12" : "$color10",
-        minWidth: readoutWidth,
-        textAlign: "right",
-        userSelect: "none",
-        children: value > 0 ? `${value}+` : t("Any")
-      })]
+      "data-range-layout": "row",
+      children: [caption, track, readout]
     });
   }
   return {