@multiplatform.one/components 6.1.0 → 6.3.0

package/dist/cjs/layouts/PaneScaffold.cjs

@@ -0,0 +1,157 @@
+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 PaneScaffold_exports = {};
+__export(PaneScaffold_exports, {
+  FeedLayout: () => FeedLayout,
+  ListDetailLayout: () => ListDetailLayout,
+  PaneScaffold: () => PaneScaffold,
+  ReadingWidth: () => ReadingWidth,
+  SupportingPaneLayout: () => SupportingPaneLayout
+});
+module.exports = __toCommonJS(PaneScaffold_exports);
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_jsx_runtime = require("react/jsx-runtime");
+function PaneScaffold({
+  primary,
+  secondary,
+  activePane = "primary",
+  maxPanes: maxPanesProp,
+  paneFlex = [1, 1],
+  paneGap,
+  sizeClass: sizeClassProp,
+  ...rest
+}) {
+  const liveClass = (0, import_theme.useLayoutSizeClass)();
+  const sizeClass = sizeClassProp ?? liveClass;
+  const budget = maxPanesProp ?? (0, import_theme.defaultMaxPanes)(sizeClass);
+  const hasSecondary = secondary !== null && secondary !== void 0;
+  const multi = budget >= 2 && hasSecondary;
+  const gaps = (0, import_theme.useSemanticGaps)();
+  const gap = paneGap ?? gaps.betweenGroups.gap;
+  if (!multi) {
+    const shown = activePane === "secondary" && hasSecondary ? secondary : primary;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: "auto",
+      minWidth: 0,
+      width: "100%",
+      "data-testid": "pane-scaffold",
+      "data-panes": "1",
+      "data-size-class": sizeClass,
+      ...rest,
+      children: shown
+    });
+  }
+  const [primaryFlex, secondaryFlex] = paneFlex;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "auto",
+    minWidth: 0,
+    width: "100%",
+    gap,
+    "data-testid": "pane-scaffold",
+    "data-panes": "2",
+    "data-size-class": sizeClass,
+    ...rest,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flex: primaryFlex,
+      minWidth: 0,
+      "data-testid": "pane-primary",
+      children: primary
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flex: secondaryFlex,
+      minWidth: 0,
+      "data-testid": "pane-secondary",
+      children: secondary
+    })]
+  });
+}
+function ListDetailLayout({
+  list,
+  detail,
+  selected = false,
+  activePane,
+  ...rest
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(PaneScaffold, {
+    primary: list,
+    secondary: detail,
+    paneFlex: [1, 1],
+    activePane: activePane ?? (selected ? "secondary" : "primary"),
+    "data-canonical": "list-detail",
+    ...rest
+  });
+}
+function SupportingPaneLayout({
+  children,
+  supporting,
+  ...rest
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(PaneScaffold, {
+    primary: children,
+    secondary: supporting,
+    paneFlex: [2, 1],
+    "data-canonical": "supporting-pane",
+    ...rest
+  });
+}
+function FeedLayout({
+  children,
+  minItemWidth = 280,
+  ...rest
+}) {
+  const gaps = (0, import_theme.useSemanticGaps)();
+  const multi = (0, import_theme.useMultiPane)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    flexDirection: multi ? "row" : "column",
+    flexWrap: multi ? "wrap" : void 0,
+    gap: gaps.betweenGroups.gap,
+    "data-testid": "feed-layout",
+    "data-canonical": "feed",
+    ...rest,
+    children: import_react.Children.map(children, (child, i) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flexGrow: 1,
+      flexBasis: multi ? minItemWidth : void 0,
+      minWidth: multi ? minItemWidth : void 0,
+      maxWidth: multi ? "100%" : void 0,
+      children: child
+    }, i))
+  });
+}
+function ReadingWidth({
+  measure = import_theme.READING_WIDTH_CH,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    alignSelf: "flex-start",
+    ...(0, import_theme.readingWidthStyle)(measure),
+    "data-testid": "reading-width",
+    ...rest,
+    children
+  });
+}

package/dist/cjs/layouts/PaneScaffold.native.js

@@ -0,0 +1,167 @@
+"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 PaneScaffold_exports = {};
+__export(PaneScaffold_exports, {
+  FeedLayout: () => FeedLayout,
+  ListDetailLayout: () => ListDetailLayout,
+  PaneScaffold: () => PaneScaffold,
+  ReadingWidth: () => ReadingWidth,
+  SupportingPaneLayout: () => SupportingPaneLayout
+});
+module.exports = __toCommonJS(PaneScaffold_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+function PaneScaffold(param) {
+  var {
+    primary,
+    secondary,
+    activePane = "primary",
+    maxPanes: maxPanesProp,
+    paneFlex = [1, 1],
+    paneGap,
+    sizeClass: sizeClassProp,
+    ...rest
+  } = param;
+  var liveClass = (0, import_theme.useLayoutSizeClass)();
+  var sizeClass = sizeClassProp !== null && sizeClassProp !== void 0 ? sizeClassProp : liveClass;
+  var budget = maxPanesProp !== null && maxPanesProp !== void 0 ? maxPanesProp : (0, import_theme.defaultMaxPanes)(sizeClass);
+  var hasSecondary = secondary !== null && secondary !== void 0;
+  var multi = budget >= 2 && hasSecondary;
+  var gaps = (0, import_theme.useSemanticGaps)();
+  var gap = paneGap !== null && paneGap !== void 0 ? paneGap : gaps.betweenGroups.gap;
+  if (!multi) {
+    var shown = activePane === "secondary" && hasSecondary ? secondary : primary;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: "auto",
+      minWidth: 0,
+      width: "100%",
+      "data-testid": "pane-scaffold",
+      "data-panes": "1",
+      "data-size-class": sizeClass,
+      ...rest,
+      children: shown
+    });
+  }
+  var [primaryFlex, secondaryFlex] = paneFlex;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "auto",
+    minWidth: 0,
+    width: "100%",
+    gap,
+    "data-testid": "pane-scaffold",
+    "data-panes": "2",
+    "data-size-class": sizeClass,
+    ...rest,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flex: primaryFlex,
+      minWidth: 0,
+      "data-testid": "pane-primary",
+      children: primary
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flex: secondaryFlex,
+      minWidth: 0,
+      "data-testid": "pane-secondary",
+      children: secondary
+    })]
+  });
+}
+function ListDetailLayout(param) {
+  var {
+    list,
+    detail,
+    selected = false,
+    activePane,
+    ...rest
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(PaneScaffold, {
+    primary: list,
+    secondary: detail,
+    paneFlex: [1, 1],
+    activePane: activePane !== null && activePane !== void 0 ? activePane : selected ? "secondary" : "primary",
+    "data-canonical": "list-detail",
+    ...rest
+  });
+}
+function SupportingPaneLayout(param) {
+  var {
+    children,
+    supporting,
+    ...rest
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(PaneScaffold, {
+    primary: children,
+    secondary: supporting,
+    paneFlex: [2, 1],
+    "data-canonical": "supporting-pane",
+    ...rest
+  });
+}
+function FeedLayout(param) {
+  var {
+    children,
+    minItemWidth = 280,
+    ...rest
+  } = param;
+  var gaps = (0, import_theme.useSemanticGaps)();
+  var multi = (0, import_theme.useMultiPane)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    flexDirection: multi ? "row" : "column",
+    flexWrap: multi ? "wrap" : void 0,
+    gap: gaps.betweenGroups.gap,
+    "data-testid": "feed-layout",
+    "data-canonical": "feed",
+    ...rest,
+    children: import_react.Children.map(children, function (child, i) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        flexGrow: 1,
+        flexBasis: multi ? minItemWidth : void 0,
+        minWidth: multi ? minItemWidth : void 0,
+        maxWidth: multi ? "100%" : void 0,
+        children: child
+      }, i);
+    })
+  });
+}
+function ReadingWidth(param) {
+  var {
+    measure = import_theme.READING_WIDTH_CH,
+    children,
+    ...rest
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    alignSelf: "flex-start",
+    ...(0, import_theme.readingWidthStyle)(measure),
+    "data-testid": "reading-width",
+    ...rest,
+    children
+  });
+}
+//# sourceMappingURL=PaneScaffold.native.js.map

package/dist/cjs/layouts/PaneScaffold.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","PaneScaffold_exports","__export","FeedLayout","ListDetailLayout","PaneScaffold","ReadingWidth","SupportingPaneLayout","module","exports","import_jsx_runtime","require","import_theme","import_react","import_tamagui","param","primary","secondary","activePane","maxPanes","maxPanesProp","paneFlex","paneGap","sizeClass","sizeClassProp","rest","liveClass","useLayoutSizeClass","budget","defaultMaxPanes","hasSecondary","multi","gaps","useSemanticGaps","gap","betweenGroups","shown","jsx","YStack","flexGrow","flexShrink","flexBasis","minWidth","width","children","primaryFlex","secondaryFlex","jsxs","XStack","flex","list","detail","selected","supporting","minItemWidth","useMultiPane","flexDirection","flexWrap","Children","map","child","i","maxWidth","measure","READING_WIDTH_CH","alignSelf","readingWidthStyle"],"sources":["../../../src/layouts/PaneScaffold.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/layouts/ViewSwitcher.cjs

@@ -26,6 +26,7 @@ __export(ViewSwitcher_exports, {
 });
 module.exports = __toCommonJS(ViewSwitcher_exports);
 var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
 var import_tamagui = require("tamagui");
 var import_jsx_runtime = require("react/jsx-runtime");
 function ViewSwitcher({
@@ -36,28 +37,84 @@ function ViewSwitcher({
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  const [kbFocusValue, setKbFocusValue] = (0, import_react.useState)(null);
+  const [focusValue, setFocusValue] = (0, import_react.useState)(null);
+  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
+  const sz = knobProps.sizeToken;
+  const padH = sz === "$3" ? "$2" : sz === "$5" ? "$4" : "$3";
+  const padV = sz === "$3" ? "$1.5" : sz === "$5" ? "$2.5" : "$2";
+  const labelSize = sz === "$3" ? "$2" : sz === "$5" ? "$4" : "$3";
+  const rowGap = sz === "$3" ? "$1.5" : sz === "$5" ? "$2.5" : "$2";
+  const iconPx = sz === "$3" ? 14 : sz === "$5" ? 18 : 16;
+  const segmentHitSlop = (0, import_theme.pressTargetHitSlop)(32);
+  const groupRing = (0, import_theme.ensureFocusVisibleRing)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup, {
     type: "single",
     orientation: "horizontal",
     flexDirection: "row",
+    alignSelf: "flex-start",
     value: currentView,
     onValueChange: val => {
       if (val) onViewChange(val);
     },
     ...knobProps.borderRadius,
     ...knobProps.inputSurface,
-    children: views.map(view => {
+    overflow: "hidden",
+    focusStyle: groupRing,
+    focusVisibleStyle: groupRing,
+    focusWithinStyle: groupRing,
+    children: views.map((view, viewIndex) => {
       const Icon = view.icon;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.ToggleGroup.Item, {
-        value: view.type,
-        size: knobProps.sizeToken,
-        children: [Icon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(Icon, {
-          size: 16
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: knobProps.sizeToken,
-          children: view.label
-        })]
-      }, view.type);
+      const anchorIndex = (() => {
+        const focusIdx = focusValue ? views.findIndex(v => v.type === focusValue) : -1;
+        if (focusIdx >= 0) return focusIdx;
+        const activeIdx = views.findIndex(v => v.type === currentView);
+        return activeIdx >= 0 ? activeIdx : 0;
+      })();
+      const isTabStop = viewIndex === anchorIndex;
+      return (
+        // no size prop: ToggleGroup.Item's size makes square icon-buttons
+        // (fixed width) that clip text labels -- let content + pad size the item.
+        /* @__PURE__ */
+        (0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, {
+          value: view.type,
+          ...(import_tamagui.isWeb ? {
+            tabIndex: isTabStop ? 0 : -1
+          } : void 0),
+          paddingHorizontal: padH,
+          paddingVertical: padV,
+          width: "auto",
+          height: "auto",
+          minHeight: import_theme.MIN_PRESS_TARGET,
+          hitSlop: segmentHitSlop,
+          flexGrow: 0,
+          alignItems: "center",
+          justifyContent: "center",
+          ...(import_tamagui.isWeb ? {
+            onFocus: () => {
+              setFocusValue(view.type);
+              if ((0, import_theme.wasKeyboardFocus)()) setKbFocusValue(view.type);
+            },
+            onBlur: () => {
+              setFocusValue(prev => prev === view.type ? null : prev);
+              setKbFocusValue(prev => prev === view.type ? null : prev);
+            }
+          } : void 0),
+          ...(kbFocusValue === view.type ? import_theme.keyboardFocusRingProps : void 0),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            alignItems: "center",
+            gap: rowGap,
+            flexShrink: 0,
+            children: [Icon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(Icon, {
+              size: iconPx
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontSize: labelSize,
+              numberOfLines: 1,
+              children: view.label
+            })]
+          })
+        }, view.type)
+      );
     })
   });
 }

package/dist/cjs/layouts/ViewSwitcher.native.js

@@ -29,6 +29,7 @@ __export(ViewSwitcher_exports, {
 module.exports = __toCommonJS(ViewSwitcher_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
 var import_tamagui = require("tamagui");
 function ViewSwitcher(param) {
   var {
@@ -39,28 +40,97 @@ function ViewSwitcher(param) {
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  var [kbFocusValue, setKbFocusValue] = (0, import_react.useState)(null);
+  var [focusValue, setFocusValue] = (0, import_react.useState)(null);
+  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
+  var sz = knobProps.sizeToken;
+  var padH = sz === "$3" ? "$2" : sz === "$5" ? "$4" : "$3";
+  var padV = sz === "$3" ? "$1.5" : sz === "$5" ? "$2.5" : "$2";
+  var labelSize = sz === "$3" ? "$2" : sz === "$5" ? "$4" : "$3";
+  var rowGap = sz === "$3" ? "$1.5" : sz === "$5" ? "$2.5" : "$2";
+  var iconPx = sz === "$3" ? 14 : sz === "$5" ? 18 : 16;
+  var segmentHitSlop = (0, import_theme.pressTargetHitSlop)(32);
+  var groupRing = (0, import_theme.ensureFocusVisibleRing)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup, {
     type: "single",
     orientation: "horizontal",
     flexDirection: "row",
+    alignSelf: "flex-start",
     value: currentView,
     onValueChange: function onValueChange(val) {
       if (val) onViewChange(val);
     },
     ...knobProps.borderRadius,
     ...knobProps.inputSurface,
-    children: views.map(function (view) {
+    // R-OUTER (LC-18): the outer frame owns the radius; clip so the inner
+    // square segment seams stay square inside the rounded frame instead of
+    // poking past it at high radius (DF-09). Segment keyboard rings are
+    // inset (outlineOffset -2), so they survive the clip; the group ring is
+    // an outline (never clipped by the element's own overflow).
+    overflow: "hidden",
+    focusStyle: groupRing,
+    focusVisibleStyle: groupRing,
+    focusWithinStyle: groupRing,
+    children: views.map(function (view, viewIndex) {
       var Icon = view.icon;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.ToggleGroup.Item, {
-        value: view.type,
-        size: knobProps.sizeToken,
-        children: [Icon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(Icon, {
-          size: 16
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: knobProps.sizeToken,
-          children: view.label
-        })]
-      }, view.type);
+      var anchorIndex = function () {
+        var focusIdx = focusValue ? views.findIndex(function (v) {
+          return v.type === focusValue;
+        }) : -1;
+        if (focusIdx >= 0) return focusIdx;
+        var activeIdx = views.findIndex(function (v) {
+          return v.type === currentView;
+        });
+        return activeIdx >= 0 ? activeIdx : 0;
+      }();
+      var isTabStop = viewIndex === anchorIndex;
+      return (
+        // no size prop: ToggleGroup.Item's size makes square icon-buttons
+        // (fixed width) that clip text labels -- let content + pad size the item.
+        /* @__PURE__ */
+        (0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, {
+          value: view.type,
+          ...(import_tamagui.isWeb ? {
+            tabIndex: isTabStop ? 0 : -1
+          } : void 0),
+          paddingHorizontal: padH,
+          paddingVertical: padV,
+          width: "auto",
+          height: "auto",
+          minHeight: import_theme.MIN_PRESS_TARGET,
+          hitSlop: segmentHitSlop,
+          flexGrow: 0,
+          alignItems: "center",
+          justifyContent: "center",
+          ...(import_tamagui.isWeb ? {
+            onFocus: function onFocus() {
+              setFocusValue(view.type);
+              if ((0, import_theme.wasKeyboardFocus)()) setKbFocusValue(view.type);
+            },
+            onBlur: function onBlur() {
+              setFocusValue(function (prev) {
+                return prev === view.type ? null : prev;
+              });
+              setKbFocusValue(function (prev) {
+                return prev === view.type ? null : prev;
+              });
+            }
+          } : void 0),
+          ...(kbFocusValue === view.type ? import_theme.keyboardFocusRingProps : void 0),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            alignItems: "center",
+            gap: rowGap,
+            flexShrink: 0,
+            children: [Icon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(Icon, {
+              size: iconPx
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontSize: labelSize,
+              numberOfLines: 1,
+              children: view.label
+            })]
+          })
+        }, view.type)
+      );
     })
   });
 }

package/dist/cjs/layouts/ViewSwitcher.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ViewSwitcher_exports","__export","ViewSwitcher","module","exports","import_jsx_runtime","require","import_theme","import_tamagui","param","views","currentView","onViewChange","knobProps","useResolvedKnobs","jsx","ToggleGroup","type","orientation","flexDirection","onValueChange","val","borderRadius","inputSurface","children","map","view","Icon","icon","jsxs","Item","size","sizeToken","Text"],"sources":["../../../src/layouts/ViewSwitcher.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,oBAAA;AAAAC,QAAA,CAAAD,oBAAA;EAAAE,YAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAiC,CAAAK,oBAAA;AAEjC,IAAAK,kBAAkC,GAAAC,OAAA;AA4CxB,IAAAC,YAAA,GAAAD,OAAA;AAlBH,IAAAE,cAAS,GAAAF,OAAe,UAAO;AACpC,SAAMJ,YAAYA,CAAAO,KAAA,EAAI;EAEtB;IAAAC,KACE;IAAAC,WAAA;IAAAC;EAAA,IAAAH,KAAA;EAAA,IAAC;IAAAI;EAAA,QAAAN,YAAA,CAAAO,gBAAA;EAAA,0BAAAT,kBAAA,CAAAU,GAAA,EAAAP,cAAA,CAAAQ,WAAA;IAAAC,IACC,UAAK;IAAAC,WACL,cAAY;IAAAC,aACZ,OAAc;IAAApB,KACd,EAAAY,WAAO;IAAAS,aACP,WAAgBA,aAAQA,CAAAC,GAAA;MACtB,IAAAA,GAAI,EAAAT,YAAK,CAAAS,GAAa;IAAG;IAC3B,GACCR,SAAG,CAAAS,YAAU;IAAA,GACbT,SAAG,CAAAU,YAAU;IAAAC,QAEb,EAAAd,KAAA,CAAAe,GAAM,WAAKC,IAAS;MACnB,IAAAC,IAAM,GAAAD,IAAO,CAAAE,IAAK;MAClB,sBACE,IAAAvB,kBAAA,CAAAwB,IAAA,EAAArB,cAAC,CAAAQ,WAAA,CAAAc,IAAY;QACV/B,KAAA,EAAA2B,IAAQ,CAAAT,IAAA;QAAgBc,IACzB,EAAAlB,SAAA,CAAAmB,SAAA;QAAiDR,QAF5B,EAAK,CAK/BG,IAAA,uBAAAtB,kBAAA,CAAAU,GAAA,EAAAY,IAAA;UAAAI,IAAA;QACH,IAEJ,mBAAA1B,kBAAA,CAAAU,GAAA,EAAAP,cAAA,CAAAyB,IAAA","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ViewSwitcher_exports","__export","ViewSwitcher","module","exports","import_jsx_runtime","require","import_theme","import_react","import_tamagui","param","views","currentView","onViewChange","knobProps","useResolvedKnobs","kbFocusValue","setKbFocusValue","useState","focusValue","setFocusValue","isWeb","ensureKeyboardModalityTracking","sz","sizeToken","padH","padV","labelSize","rowGap","iconPx","segmentHitSlop","pressTargetHitSlop","groupRing","ensureFocusVisibleRing","jsx","ToggleGroup","type","orientation","flexDirection","alignSelf","onValueChange","val","borderRadius","inputSurface","overflow","focusStyle","focusVisibleStyle","focusWithinStyle","children","map","view","viewIndex","Icon","icon","anchorIndex","focusIdx","findIndex","v","activeIdx","isTabStop","Item","tabIndex","paddingHorizontal","paddingVertical","width","height","minHeight","MIN_PRESS_TARGET","hitSlop","flexGrow","alignItems","justifyContent","onFocus","wasKeyboardFocus","onBlur","prev"],"sources":["../../../src/layouts/ViewSwitcher.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}