react-native-platform-components 1.3.0 → 1.5.0

package/lib/commonjs/web/NavigationRail.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationRail = NavigationRail;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _Icon = require("./Icon");
+var _shared = require("./shared");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// web/NavigationRail.tsx
+
+const JUSTIFY = {
+  top: 'flex-start',
+  center: 'center',
+  bottom: 'flex-end'
+};
+
+/**
+ * A vertical `tablist` of `<button>` destinations, icon over label (beside it
+ * when expanded), with the header above them.
+ */
+function NavigationRail(props) {
+  const {
+    items,
+    selectedValue,
+    onSelect,
+    onReselect,
+    labelVisibility = 'auto',
+    menuGravity = 'top',
+    expanded,
+    header,
+    activeTintColor,
+    inactiveTintColor,
+    railColor,
+    badgeStyle,
+    labelStyle,
+    maxFontSizeMultiplier,
+    android,
+    style,
+    ...viewProps
+  } = props;
+  const primary = (0, _shared.usePrimaryColor)();
+  const activeColor = (0, _shared.cssColor)(activeTintColor) ?? primary;
+  const inactiveColor = (0, _shared.cssColor)(inactiveTintColor) ?? 'GrayText';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    ...viewProps,
+    style: [{
+      alignItems: expanded ? 'stretch' : 'center',
+      width: expanded ? 220 : 96,
+      paddingVertical: 12,
+      gap: 12,
+      backgroundColor: (0, _shared.cssColor)(railColor)
+    }, style],
+    children: [header ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        alignItems: 'center'
+      },
+      children: header
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      role: "tablist",
+      "aria-orientation": "vertical",
+      style: {
+        flex: 1,
+        gap: 4,
+        justifyContent: JUSTIFY[menuGravity]
+      },
+      children: items.map((item, index) => {
+        const isSelected = item.value === selectedValue;
+        const color = isSelected ? activeColor : inactiveColor;
+        const showLabel = labelVisibility !== 'unlabeled' && (labelVisibility !== 'selected' || isSelected);
+        const icon = isSelected ? item.selectedIcon ?? item.icon : item.icon;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+          "data-testid": item.testID,
+          type: "button",
+          role: "tab",
+          "aria-selected": isSelected,
+          "aria-label": item.accessibilityLabel ?? item.label,
+          disabled: item.disabled,
+          onClick: () => {
+            if (isSelected) onReselect?.(item.value, index);else onSelect?.(item.value, index);
+          },
+          style: {
+            display: 'flex',
+            flexDirection: expanded ? 'row' : 'column',
+            alignItems: 'center',
+            gap: expanded ? 12 : 4,
+            padding: expanded ? '0 12px' : '4px',
+            border: 'none',
+            fontFamily: 'inherit',
+            fontSize: 12,
+            fontWeight: isSelected ? 600 : 500,
+            color,
+            backgroundColor: 'transparent',
+            outlineColor: primary,
+            opacity: item.disabled ? 0.38 : 1,
+            cursor: item.disabled ? 'default' : 'pointer',
+            ...(0, _shared.cssFont)(labelStyle)
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            style: {
+              position: 'relative',
+              display: 'flex',
+              padding: '4px 16px',
+              borderRadius: 16,
+              backgroundColor: isSelected ? (0, _shared.cssColor)(android?.indicatorColor) ?? 'rgba(118, 118, 128, 0.16)' : 'transparent'
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+              icon: icon,
+              color: color,
+              size: 24
+            }), item.badge !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              style: {
+                position: 'absolute',
+                top: 0,
+                right: 8,
+                minWidth: item.badge === '' ? 8 : 16,
+                height: item.badge === '' ? 8 : 16,
+                padding: item.badge === '' ? 0 : '0 4px',
+                boxSizing: 'border-box',
+                borderRadius: 8,
+                fontSize: 11,
+                lineHeight: '16px',
+                fontWeight: 600,
+                textAlign: 'center',
+                backgroundColor: (0, _shared.cssColor)(badgeStyle?.backgroundColor) ?? '#FF3B30',
+                color: (0, _shared.cssColor)(badgeStyle?.color) ?? '#fff'
+              },
+              children: item.badge
+            }) : null]
+          }), showLabel ? item.label : null]
+        }, item.value);
+      })
+    })]
+  });
+}
+//# sourceMappingURL=NavigationRail.js.map

package/lib/commonjs/web/NavigationRail.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_Icon","_shared","_jsxRuntime","e","__esModule","default","JUSTIFY","top","center","bottom","NavigationRail","props","items","selectedValue","onSelect","onReselect","labelVisibility","menuGravity","expanded","header","activeTintColor","inactiveTintColor","railColor","badgeStyle","labelStyle","maxFontSizeMultiplier","android","style","viewProps","primary","usePrimaryColor","activeColor","cssColor","inactiveColor","jsxs","View","alignItems","width","paddingVertical","gap","backgroundColor","children","jsx","role","flex","justifyContent","map","item","index","isSelected","value","color","showLabel","icon","selectedIcon","testID","type","accessibilityLabel","label","disabled","onClick","display","flexDirection","padding","border","fontFamily","fontSize","fontWeight","outlineColor","opacity","cursor","cssFont","position","borderRadius","indicatorColor","Icon","size","badge","undefined","right","minWidth","height","boxSizing","lineHeight","textAlign"],"sourceRoot":"../../../src","sources":["web/NavigationRail.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/web/PlatformComponentsProvider.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PlatformComponentsProvider = PlatformComponentsProvider;
+exports.useWebComponent = useWebComponent;
+exports.withWebComponent = withWebComponent;
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const WebContext = /*#__PURE__*/(0, _react.createContext)({});
+
+/** Replacements apply only to descendants; nested registrations inherit missing entries. */
+function PlatformComponentsProvider({
+  web,
+  children
+}) {
+  const parent = (0, _react.useContext)(WebContext);
+  const components = (0, _react.useMemo)(() => {
+    if (!web) return parent;
+    const merged = {
+      ...parent
+    };
+    for (const [name, implementation] of Object.entries(web)) {
+      if (implementation !== undefined) Object.assign(merged, {
+        [name]: implementation
+      });
+    }
+    return merged;
+  }, [parent, web]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(WebContext.Provider, {
+    value: components,
+    children: children
+  });
+}
+function useWebComponent(name) {
+  return (0, _react.useContext)(WebContext)[name];
+}
+function withWebComponent(name, fallback) {
+  function WebComponent(props) {
+    // The mapped key couples each implementation to its own public props.
+    const Component = useWebComponent(name) ?? fallback;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      ...props
+    });
+  }
+  WebComponent.displayName = name;
+  return WebComponent;
+}
+//# sourceMappingURL=PlatformComponentsProvider.js.map

package/lib/commonjs/web/PlatformComponentsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","WebContext","createContext","PlatformComponentsProvider","web","children","parent","useContext","components","useMemo","merged","name","implementation","entries","undefined","assign","jsx","Provider","value","useWebComponent","withWebComponent","fallback","WebComponent","props","Component","displayName"],"sourceRoot":"../../../src","sources":["web/PlatformComponentsProvider.tsx"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAkE,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAOlE,MAAMkB,UAAU,gBAAG,IAAAC,oBAAa,EAAyB,CAAC,CAAC,CAAC;;AAE5D;AACO,SAASC,0BAA0BA,CAAC;EACzCC,GAAG;EACHC;AAC+B,CAAC,EAAsB;EACtD,MAAMC,MAAM,GAAG,IAAAC,iBAAU,EAACN,UAAU,CAAC;EACrC,MAAMO,UAAU,GAAG,IAAAC,cAAO,EAAC,MAAM;IAC/B,IAAI,CAACL,GAAG,EAAE,OAAOE,MAAM;IACvB,MAAMI,MAAM,GAAG;MAAE,GAAGJ;IAAO,CAAC;IAC5B,KAAK,MAAM,CAACK,IAAI,EAAEC,cAAc,CAAC,IAAId,MAAM,CAACe,OAAO,CAACT,GAAG,CAAC,EAAE;MACxD,IAAIQ,cAAc,KAAKE,SAAS,EAC9BhB,MAAM,CAACiB,MAAM,CAACL,MAAM,EAAE;QAAE,CAACC,IAAI,GAAGC;MAAe,CAAC,CAAC;IACrD;IACA,OAAOF,MAAM;EACf,CAAC,EAAE,CAACJ,MAAM,EAAEF,GAAG,CAAC,CAAC;EACjB,oBACE,IAAAvB,WAAA,CAAAmC,GAAA,EAACf,UAAU,CAACgB,QAAQ;IAACC,KAAK,EAAEV,UAAW;IAAAH,QAAA,EAAEA;EAAQ,CAAsB,CAAC;AAE5E;AAEO,SAASc,eAAeA,CAC7BR,IAAU,EACuB;EACjC,OAAO,IAAAJ,iBAAU,EAACN,UAAU,CAAC,CAACU,IAAI,CAAC;AACrC;AAEO,SAASS,gBAAgBA,CAC9BT,IAAU,EACVU,QAA6B,EAC7B;EACA,SAASC,YAAYA,CAACC,KAA8B,EAAsB;IACxE;IACA,MAAMC,SAAS,GAAIL,eAAe,CAACR,IAAI,CAAC,IACtCU,QAAyD;IAC3D,oBAAO,IAAAxC,WAAA,CAAAmC,GAAA,EAACQ,SAAS;MAAA,GAAKD;IAAK,CAAG,CAAC;EACjC;EACAD,YAAY,CAACG,WAAW,GAAGd,IAAI;EAC/B,OAAOW,YAAY;AACrB","ignoreList":[]}

package/lib/commonjs/web/SegmentedControl.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SegmentedControl = SegmentedControl;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _Icon = require("./Icon");
+var _shared = require("./shared");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// web/SegmentedControl.tsx
+
+/**
+ * A radio group of `<button>`s in a track, like the iOS segmented control.
+ * Like iOS, tapping the selected segment keeps it selected.
+ */
+function SegmentedControl(props) {
+  const {
+    segments,
+    selectedValue,
+    onSelect,
+    onDeselect,
+    disabled,
+    labelVisibility = 'auto',
+    selectedSegmentColor,
+    activeTintColor,
+    inactiveTintColor,
+    labelStyle,
+    maxFontSizeMultiplier,
+    badgeStyle,
+    ios,
+    android,
+    style,
+    ...viewProps
+  } = props;
+  const primary = (0, _shared.usePrimaryColor)();
+  const selectedBackground = (0, _shared.cssColor)(selectedSegmentColor) ?? ios?.selectedSegmentTintColor ?? 'Canvas';
+  const activeColor = (0, _shared.cssColor)(activeTintColor) ?? 'CanvasText';
+  const inactiveColor = (0, _shared.cssColor)(inactiveTintColor) ?? 'CanvasText';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ...viewProps,
+    role: "radiogroup",
+    style: [{
+      flexDirection: 'row',
+      padding: 2,
+      borderRadius: 9,
+      backgroundColor: 'rgba(118, 118, 128, 0.12)'
+    }, style],
+    children: segments.map((segment, index) => {
+      const isSelected = segment.value === selectedValue;
+      const isDisabled = disabled || segment.disabled;
+      const hasIcon = (0, _shared.webIcon)(segment.icon) !== undefined;
+      // Web can show both, so `auto` behaves like `labeled`.
+      const showLabel = labelVisibility !== 'unlabeled' || !hasIcon;
+      const foreground = isSelected ? activeColor : inactiveColor;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+        "data-testid": segment.testID,
+        type: "button",
+        role: "radio",
+        "aria-checked": isSelected,
+        "aria-label": segment.accessibilityLabel ?? segment.label,
+        disabled: isDisabled,
+        onClick: () => {
+          if (!isSelected) onSelect?.(segment.value, index);
+        },
+        style: {
+          position: 'relative',
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 6,
+          minHeight: 28,
+          padding: '0 12px',
+          border: 'none',
+          borderRadius: 7,
+          fontFamily: 'inherit',
+          fontSize: 13,
+          fontWeight: isSelected ? 600 : 400,
+          color: foreground,
+          backgroundColor: isSelected ? selectedBackground : 'transparent',
+          boxShadow: isSelected ? '0 1px 3px rgba(0, 0, 0, 0.15)' : 'none',
+          outlineColor: primary,
+          opacity: isDisabled ? 0.38 : 1,
+          cursor: isDisabled || isSelected ? 'default' : 'pointer',
+          ...(0, _shared.cssFont)(labelStyle)
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+          icon: segment.icon,
+          color: foreground,
+          size: 16
+        }), showLabel ? segment.label : null, segment.badge !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          style: {
+            position: 'absolute',
+            top: -4,
+            right: -2,
+            minWidth: 16,
+            height: 16,
+            padding: '0 4px',
+            boxSizing: 'border-box',
+            borderRadius: 8,
+            fontSize: 11,
+            lineHeight: '16px',
+            fontWeight: 600,
+            textAlign: 'center',
+            backgroundColor: (0, _shared.cssColor)(badgeStyle?.backgroundColor) ?? '#FF3B30',
+            color: (0, _shared.cssColor)(badgeStyle?.color) ?? '#fff'
+          },
+          children: segment.badge
+        }) : null]
+      }, segment.value);
+    })
+  });
+}
+//# sourceMappingURL=SegmentedControl.js.map

package/lib/commonjs/web/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_Icon","_shared","_jsxRuntime","e","__esModule","default","SegmentedControl","props","segments","selectedValue","onSelect","onDeselect","disabled","labelVisibility","selectedSegmentColor","activeTintColor","inactiveTintColor","labelStyle","maxFontSizeMultiplier","badgeStyle","ios","android","style","viewProps","primary","usePrimaryColor","selectedBackground","cssColor","selectedSegmentTintColor","activeColor","inactiveColor","jsx","View","role","flexDirection","padding","borderRadius","backgroundColor","children","map","segment","index","isSelected","value","isDisabled","hasIcon","webIcon","icon","undefined","showLabel","foreground","jsxs","testID","type","accessibilityLabel","label","onClick","position","flex","display","alignItems","justifyContent","gap","minHeight","border","fontFamily","fontSize","fontWeight","color","boxShadow","outlineColor","opacity","cursor","cssFont","Icon","size","badge","top","right","minWidth","height","boxSizing","lineHeight","textAlign"],"sourceRoot":"../../../src","sources":["web/SegmentedControl.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/web/SelectionMenu.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectionMenu = SelectionMenu;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _Dialog = require("./Dialog");
+var _Icon = require("./Icon");
+var _shared = require("./shared");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// web/SelectionMenu.tsx
+
+/**
+ * `embedded` renders a `<select>` (labels only). `modal` stays headless like on
+ * native: while `visible`, it opens the options in a `<dialog>`, with their
+ * image icons and subtitles; picking one calls `onSelect`, and Escape or a
+ * click outside calls `onRequestClose`. `android.searchable` is ignored.
+ */
+function SelectionMenu(props) {
+  const {
+    options,
+    selected,
+    disabled,
+    placeholder,
+    accessibilityLabel,
+    presentation = 'modal',
+    visible,
+    onSelect,
+    onRequestClose,
+    ios,
+    android,
+    ...viewProps
+  } = props;
+  const primary = (0, _shared.usePrimaryColor)();
+  const label = accessibilityLabel ?? placeholder ?? 'Select an option';
+  const select = index => {
+    const option = options[index];
+    if (option && !disabled && !option.disabled) onSelect?.(option.data, option.label, index);
+  };
+  if (presentation === 'embedded') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      ...viewProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+        "aria-label": label,
+        value: selected ?? '',
+        disabled: disabled,
+        onChange: event => {
+          const data = (0, _shared.eventValue)(event);
+          select(options.findIndex(o => o.data === data));
+        },
+        style: {
+          boxSizing: 'border-box',
+          width: '100%',
+          minHeight: 40,
+          padding: '0 8px',
+          border: '1px solid color-mix(in srgb, CanvasText 30%, transparent)',
+          borderRadius: 8,
+          fontFamily: 'inherit',
+          fontSize: 16,
+          color: 'inherit',
+          backgroundColor: 'transparent',
+          accentColor: primary
+        },
+        children: [selected === null ? /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          value: "",
+          disabled: true,
+          children: placeholder ?? ''
+        }) : null, options.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          value: option.data,
+          disabled: option.disabled,
+          children: option.label
+        }, option.data))]
+      })
+    });
+  }
+  const dismiss = () => onRequestClose?.();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ...viewProps,
+    children: visible && !disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.Dialog, {
+      label: label,
+      onDismiss: dismiss,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        role: "listbox",
+        "aria-label": label,
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          minWidth: 200
+        },
+        children: options.map((option, index) => {
+          const isSelected = option.data === selected;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+            type: "button",
+            role: "option",
+            "aria-selected": isSelected,
+            disabled: option.disabled,
+            autoFocus: !option.disabled && (isSelected || selected === null && index === options.findIndex(item => !item.disabled)),
+            onClick: () => select(index),
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              gap: 12,
+              minHeight: 44,
+              padding: '0 12px',
+              border: 'none',
+              borderRadius: 8,
+              fontFamily: 'inherit',
+              fontSize: 16,
+              fontWeight: isSelected ? 600 : 400,
+              textAlign: 'start',
+              color: isSelected ? primary : 'inherit',
+              backgroundColor: 'transparent',
+              cursor: 'pointer'
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+              icon: option.icon,
+              color: isSelected ? primary : 'CanvasText'
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+              style: {
+                display: 'flex',
+                flexDirection: 'column'
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: option.label
+              }), option.subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                style: {
+                  fontSize: 13,
+                  opacity: 0.7
+                },
+                children: option.subtitle
+              }) : null]
+            })]
+          }, option.data);
+        })
+      })
+    }) : null
+  });
+}
+//# sourceMappingURL=SelectionMenu.js.map

package/lib/commonjs/web/SelectionMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_Dialog","_Icon","_shared","_jsxRuntime","e","__esModule","default","SelectionMenu","props","options","selected","disabled","placeholder","accessibilityLabel","presentation","visible","onSelect","onRequestClose","ios","android","viewProps","primary","usePrimaryColor","label","select","index","option","data","jsx","View","children","jsxs","value","onChange","event","eventValue","findIndex","o","style","boxSizing","width","minHeight","padding","border","borderRadius","fontFamily","fontSize","color","backgroundColor","accentColor","map","dismiss","Dialog","onDismiss","role","display","flexDirection","minWidth","isSelected","type","autoFocus","item","onClick","alignItems","gap","fontWeight","textAlign","cursor","Icon","icon","subtitle","opacity"],"sourceRoot":"../../../src","sources":["web/SelectionMenu.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/web/SplitButton.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SplitButton = SplitButton;
+var _react = _interopRequireDefault(require("react"));
+var _Button = require("./Button");
+var _shared = require("./shared");
+var _PlatformComponentsProvider = require("./PlatformComponentsProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// web/SplitButton.tsx
+
+/**
+ * The main button alone: browsers have no native menu to attach, so the
+ * menu button is left out. Provide a web menu with a `.web.tsx` file in your
+ * app.
+ */
+function SplitButton(props) {
+  const MainButton = (0, _PlatformComponentsProvider.useWebComponent)('Button') ?? _Button.Button;
+  const {
+    menu,
+    menuAccessibilityLabel,
+    onMenuSelect,
+    onMenuOpen,
+    onMenuClose,
+    ...buttonProps
+  } = props;
+  (0, _shared.warnOnce)('SplitButton', 'SplitButton has no web menu; only its main button renders. ' + 'See https://jarx-concepts.github.io/react-native-platform-components/guides/web');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MainButton, {
+    ...buttonProps
+  });
+}
+//# sourceMappingURL=SplitButton.js.map

package/lib/commonjs/web/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_Button","_shared","_PlatformComponentsProvider","_jsxRuntime","e","__esModule","default","SplitButton","props","MainButton","useWebComponent","Button","menu","menuAccessibilityLabel","onMenuSelect","onMenuOpen","onMenuClose","buttonProps","warnOnce","jsx"],"sourceRoot":"../../../src","sources":["web/SplitButton.tsx"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,2BAAA,GAAAH,OAAA;AAA+D,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAN/D;;AAQA;AACA;AACA;AACA;AACA;AACO,SAASG,WAAWA,CAACC,KAAuB,EAAsB;EACvE,MAAMC,UAAU,GAAG,IAAAC,2CAAe,EAAC,QAAQ,CAAC,IAAIC,cAAM;EACtD,MAAM;IACJC,IAAI;IACJC,sBAAsB;IACtBC,YAAY;IACZC,UAAU;IACVC,WAAW;IACX,GAAGC;EACL,CAAC,GAAGT,KAAK;EAET,IAAAU,gBAAQ,EACN,aAAa,EACb,6DAA6D,GAC3D,iFACJ,CAAC;EAED,oBAAO,IAAAf,WAAA,CAAAgB,GAAA,EAACV,UAAU;IAAA,GAAKQ;EAAW,CAAG,CAAC;AACxC","ignoreList":[]}

package/lib/commonjs/web/TabBar.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabBar = TabBar;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _Icon = require("./Icon");
+var _shared = require("./shared");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// web/TabBar.tsx
+
+/**
+ * A `tablist` of `<button>` tabs, icon over label, with the selected tab's
+ * icon in a pill as on the Material navigation bar. An `accessory` is a
+ * plain view above the bar.
+ */
+function TabBar(props) {
+  const {
+    items,
+    selectedValue,
+    onSelect,
+    onReselect,
+    labelVisibility = 'auto',
+    activeTintColor,
+    inactiveTintColor,
+    barColor,
+    badgeStyle,
+    labelStyle,
+    maxFontSizeMultiplier,
+    minimizeBehavior,
+    scrollViewNativeID,
+    accessory,
+    onAccessoryEnvironmentChange,
+    android,
+    style,
+    ...viewProps
+  } = props;
+  const primary = (0, _shared.usePrimaryColor)();
+  const activeColor = (0, _shared.cssColor)(activeTintColor) ?? primary;
+  const inactiveColor = (0, _shared.cssColor)(inactiveTintColor) ?? 'GrayText';
+  const horizontal = android?.itemLayout === 'horizontal';
+  const indicatorRadius = typeof android?.indicatorShape === 'number' ? android.indicatorShape : 16;
+  const hasAccessory = accessory !== undefined && accessory !== null && accessory !== false;
+  const bar = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ...viewProps,
+    role: "tablist",
+    style: [{
+      flexDirection: 'row',
+      backgroundColor: (0, _shared.cssColor)(barColor) ?? 'rgba(118, 118, 128, 0.08)'
+    }, hasAccessory ? null : style],
+    children: items.slice(0, 5).map((item, index) => {
+      const isSelected = item.value === selectedValue;
+      const color = isSelected ? activeColor : inactiveColor;
+      const showLabel = labelVisibility === 'labeled' || labelVisibility === 'auto' || labelVisibility === 'selected' && isSelected;
+      const icon = isSelected ? item.selectedIcon ?? item.icon : item.icon;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+        "data-testid": item.testID,
+        type: "button",
+        role: "tab",
+        "aria-selected": isSelected,
+        "aria-label": item.accessibilityLabel ?? item.label,
+        disabled: item.disabled,
+        onClick: () => {
+          if (isSelected) onReselect?.(item.value, index);else onSelect?.(item.value, index);
+        },
+        style: {
+          flex: 1,
+          display: 'flex',
+          flexDirection: horizontal ? 'row' : 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 4,
+          padding: '10px 4px',
+          border: 'none',
+          fontFamily: 'inherit',
+          fontSize: 12,
+          fontWeight: isSelected ? 600 : 500,
+          color,
+          backgroundColor: 'transparent',
+          outlineColor: primary,
+          opacity: item.disabled ? 0.38 : 1,
+          cursor: item.disabled ? 'default' : 'pointer',
+          ...(0, _shared.cssFont)(labelStyle)
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          style: {
+            position: 'relative',
+            display: 'flex',
+            padding: '4px 20px',
+            borderRadius: indicatorRadius,
+            backgroundColor: isSelected && android?.indicator !== false ? (0, _shared.cssColor)(android?.indicatorColor) ?? 'rgba(118, 118, 128, 0.16)' : 'transparent'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+            icon: icon,
+            color: color,
+            size: 24
+          }), item.badge !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            style: {
+              position: 'absolute',
+              top: 0,
+              right: 12,
+              minWidth: item.badge === '' ? 8 : 16,
+              height: item.badge === '' ? 8 : 16,
+              padding: item.badge === '' ? 0 : '0 4px',
+              boxSizing: 'border-box',
+              borderRadius: 8,
+              fontSize: 11,
+              lineHeight: '16px',
+              fontWeight: 600,
+              textAlign: 'center',
+              backgroundColor: (0, _shared.cssColor)(badgeStyle?.backgroundColor) ?? '#FF3B30',
+              color: (0, _shared.cssColor)(badgeStyle?.color) ?? '#fff'
+            },
+            children: item.badge
+          }) : null]
+        }), showLabel ? item.label : null]
+      }, item.value);
+    })
+  });
+  if (!hasAccessory) return bar;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: style,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: accessory
+    }), bar]
+  });
+}
+//# sourceMappingURL=TabBar.js.map