@multiplatform.one/frappe-ui 7.34.3 → 7.35.0

package/dist/jsx/list/ListToolsSheet.mjs

@@ -0,0 +1,202 @@
+import { Badge, SheetModal, SizableText, Text, YStack, isWeb } from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { DiceFiveIcon, FunnelIcon, HeartIcon } from "@phosphor-icons/react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BandFilter } from "./BandFilters.mjs";
+import { FacetRail } from "./FacetRail.mjs";
+import { activeFilterCount, isListNarrowed } from "./listState.mjs";
+import { RangeFilter, rangeCeiling } from "./RangeFilter.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function countListNarrowings(list) {
+  return activeFilterCount(list.state);
+}
+function SectionLabel({
+  children
+}) {
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  return /* @__PURE__ */jsx(Text, {
+    ...knobProps.label,
+    color: knobProps.textAccentColor,
+    textTransform: "uppercase",
+    children
+  });
+}
+function ListToolsSheet({
+  controls,
+  list,
+  showFavorites,
+  shuffle,
+  facets,
+  testID
+}) {
+  const {
+    t
+  } = useTranslation();
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const iconSize = knobProps.controlIcon.width;
+  const [open, setOpen] = useState(false);
+  const {
+    state,
+    update,
+    favorites
+  } = list;
+  const sorts = controls.sorts ?? [];
+  const ranges = controls.ranges ?? [];
+  const count = countListNarrowings(list);
+  const filtersLabel = t("Filters");
+  useEffect(() => {
+    if (!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__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsx(Badge, {
+      count,
+      children: /* @__PURE__ */jsx(Button, {
+        outlined: count === 0,
+        theme: count > 0 ? "accent" : void 0,
+        icon: /* @__PURE__ */jsx(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__ */jsx(SheetModal, {
+      open,
+      onOpenChange: setOpen,
+      snapPoint: 85,
+      scrollable: true,
+      header: /* @__PURE__ */jsx(SizableText, {
+        ...knobProps.heading,
+        children: t("Filter & sort")
+      }),
+      children: open ? /* @__PURE__ */jsxs(YStack, {
+        ...knobProps.gapLg,
+        testID: `${testID}-tools-sheet`,
+        children: [sorts.length > 0 ? /* @__PURE__ */jsxs(YStack, {
+          ...knobProps.gap,
+          children: [/* @__PURE__ */jsx(SectionLabel, {
+            children: t("Sort by")
+          }), /* @__PURE__ */jsx(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__ */jsxs(YStack, {
+            ...knobProps.gap,
+            children: [/* @__PURE__ */jsx(SectionLabel, {
+              children: facet.label
+            }), /* @__PURE__ */jsx(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__ */jsxs(YStack, {
+          ...knobProps.gap,
+          children: [/* @__PURE__ */jsx(SectionLabel, {
+            children: band.label
+          }), /* @__PURE__ */jsx(BandFilter, {
+            band,
+            list,
+            layout: "list",
+            testID: `${testID}-tools-${band.param}`
+          })]
+        }, band.param)), ranges.map(range => /* @__PURE__ */jsx(RangeFilter, {
+          label: range.label,
+          value: state.ranges[range.param] ?? 0,
+          max: rangeCeiling(list.highest[range.param] ?? 0),
+          step: range.step,
+          onChange: value => update({
+            ranges: {
+              [range.param]: value
+            }
+          })
+        }, range.param)), showFavorites || shuffle ? /* @__PURE__ */jsxs(YStack, {
+          ...knobProps.gap,
+          alignItems: "flex-start",
+          children: [showFavorites ? /* @__PURE__ */jsx(Button, {
+            outlined: !state.favoritesOnly,
+            theme: state.favoritesOnly ? "accent" : void 0,
+            onPress: () => update({
+              favoritesOnly: !state.favoritesOnly
+            }),
+            "aria-pressed": state.favoritesOnly,
+            icon: /* @__PURE__ */jsx(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__ */jsx(Button, {
+            outlined: !shuffle.open,
+            theme: shuffle.open ? "accent" : void 0,
+            onPress: () => {
+              shuffle.toggle();
+              setOpen(false);
+            },
+            icon: /* @__PURE__ */jsx(DiceFiveIcon, {
+              size: iconSize
+            }),
+            "aria-expanded": shuffle.open,
+            "aria-controls": shuffle.panelId,
+            testID: `${testID}-tools-shuffle`,
+            children: t("Surprise me")
+          }) : null]
+        }) : null, isListNarrowed(state) ? /* @__PURE__ */jsx(YStack, {
+          alignItems: "flex-start",
+          children: /* @__PURE__ */jsx(Button, {
+            chromeless: true,
+            onPress: list.clear,
+            testID: `${testID}-tools-clear`,
+            children: t("Clear filters")
+          })
+        }) : null]
+      }) : null
+    })]
+  });
+}
+export { ListToolsSheet, countListNarrowings };
+//# sourceMappingURL=ListToolsSheet.mjs.map

package/dist/jsx/list/ListToolsSheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Badge","SheetModal","SizableText","Text","YStack","isWeb","Button","useResolvedKnobs","DiceFiveIcon","FunnelIcon","HeartIcon","useEffect","useState","useTranslation","BandFilter","FacetRail","activeFilterCount","isListNarrowed","RangeFilter","rangeCeiling","Fragment","jsx","jsxs","countListNarrowings","list","state","SectionLabel","children","knobProps","label","color","textAccentColor","textTransform","ListToolsSheet","controls","showFavorites","shuffle","facets","testID","t","iconSize","controlIcon","width","open","setOpen","update","favorites","sorts","ranges","count","filtersLabel","document","onKeyDown","event","key","addEventListener","removeEventListener","outlined","theme","icon","size","weight","onPress","onOpenChange","snapPoint","scrollable","header","heading","gapLg","length","gap","value","sort","onChange","options","map","facet","reading","param","allLabel","total","optionLabel","tint","counts","bands","band","layout","range","max","highest","step","alignItems","favoritesOnly","toggle","panelId","chromeless","clear"],"sources":["../../../src/list/ListToolsSheet.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/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/jsx/list/ListToolsSheet.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","ListToolsSheet_exports","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","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","tint","counts"],"sources":["../../../src/list/ListToolsSheet.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/list/RangeFilter.mjs

@@ -1,13 +1,12 @@
 import { Text, XStack, YStack } from "@multiplatform.one/components";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Suspense, lazy } from "react";
+import { Suspense, lazy, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { jsx, jsxs } from "react/jsx-runtime";
-const readoutWidth = 44;
-const trackMinWidth = 100;
+const commitDelayMs = 150;
 const RangeRowLazy = 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 {
@@ -20,7 +19,9 @@ const RangeRowLazy = lazy(async () => {
     value,
     max,
     step = 5,
-    onChange
+    onChange,
+    layout = "row",
+    testID
   }) {
     const {
       t
@@ -28,42 +29,105 @@ const RangeRowLazy = lazy(async () => {
     const {
       knobProps
     } = useResolvedKnobs();
+    const [draft, setDraft] = useState(value);
+    const timer = useRef(null);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    useEffect(() => setDraft(value), [value]);
+    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__ */jsx(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__ */jsx(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__ */
+    jsx(YStack, {
+      flexGrow: 1,
+      flexShrink: 1,
+      minWidth: 0,
+      justifyContent: "center",
+      paddingHorizontal: "$2",
+      children: /* @__PURE__ */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__ */jsx(Slider.Track, {
+          height: "$0.5",
+          backgroundColor: "$color5",
+          "data-slider-part": "track",
+          children: /* @__PURE__ */jsx(Slider.TrackActive, {
+            backgroundColor: "$color9",
+            "data-slider-part": "range"
+          })
+        }), /* @__PURE__ */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__ */jsxs(YStack, {
+        ...knobProps.gapSm,
+        "data-range-layout": "stack",
+        children: [/* @__PURE__ */jsxs(XStack, {
+          alignItems: "baseline",
+          ...knobProps.gap,
+          children: [caption, readout]
+        }), track]
+      });
+    }
     return /* @__PURE__ */jsxs(XStack, {
       ...knobProps.gap,
       alignItems: "center",
       flexGrow: 1,
       minWidth: 0,
-      children: [/* @__PURE__ */jsx(Text, {
-        fontSize: "$2",
-        color: "$color11",
-        flexShrink: 0,
-        userSelect: "none",
-        children: label
-      }), /* @__PURE__ */jsx(YStack, {
-        flexGrow: 1,
-        flexShrink: 1,
-        minWidth: trackMinWidth,
-        justifyContent: "center",
-        children: /* @__PURE__ */jsx(Slider, {
-          value: [value],
-          min: 0,
-          max,
-          step,
-          onChange: values => {
-            if (typeof values[0] === "number") onChange(values[0]);
-          },
-          "aria-label": label,
-          compact: true
-        })
-      }), /* @__PURE__ */jsx(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 {