react-native-platform-components 1.4.0 → 1.5.0

package/lib/module/web/DatePicker.js

@@ -0,0 +1,162 @@
+"use strict";
+
+// web/DatePicker.tsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { Dialog } from "./Dialog.js";
+import { formatInputValue, inputTypeForMode, isWithinInputBounds, parseInputValue } from "./dateInput.js";
+import { BUTTON_BASE, eventValue, usePrimaryColor } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const INPUT_STYLE = {
+  boxSizing: 'border-box',
+  width: '100%',
+  minHeight: 40,
+  padding: '0 12px',
+  border: '1px solid color-mix(in srgb, CanvasText 30%, transparent)',
+  borderRadius: 8,
+  fontFamily: 'inherit',
+  fontSize: 16,
+  color: 'inherit',
+  backgroundColor: 'transparent'
+};
+
+/**
+ * The browser's date and time inputs. `embedded` renders the input in place
+ * and reports every change with `confirmed: true`. `modal` opens it in a
+ * `<dialog>` with Cancel/Done buttons, like the iOS popover: changes report
+ * `confirmed: false`, Done reports `confirmed: true`, and Cancel, Escape or a
+ * click outside call `onClosed`. In `countDownTimer` mode the input is a time
+ * input and `onConfirm`'s `durationSeconds` is its hours and minutes;
+ * `yearAndMonth` is a month input. The browser's input has its own clock, so
+ * `is24Hour` and `android.inputMode` don't apply.
+ */
+export function DatePicker(props) {
+  const {
+    style,
+    date,
+    minDate,
+    maxDate,
+    locale,
+    mode,
+    presentation = 'modal',
+    visible,
+    onConfirm,
+    onClosed,
+    ios,
+    testID
+  } = props;
+  const primary = usePrimaryColor();
+  const type = inputTypeForMode(mode);
+  const label = mode === 'countDownTimer' ? 'Duration' : {
+    'date': 'Date',
+    'time': 'Time',
+    'datetime-local': 'Date and time',
+    'month': 'Month'
+  }[type];
+  const step = (type === 'time' || type === 'datetime-local') && ios?.minuteInterval ? ios.minuteInterval * 60 : undefined;
+  const isValid = next => isWithinInputBounds(next, type, minDate, maxDate);
+  const confirm = (next, confirmed) => {
+    if (!isValid(next)) return;
+    onConfirm?.(next, confirmed, mode === 'countDownTimer' ? next.getHours() * 3600 + next.getMinutes() * 60 : 0);
+  };
+  const renderInput = (value, onValue, autoFocus) => /*#__PURE__*/_jsx("input", {
+    type: type,
+    "aria-label": label,
+    lang: locale,
+    value: formatInputValue(value, type),
+    min: formatInputValue(minDate, type) || undefined,
+    max: formatInputValue(maxDate, type) || undefined,
+    step: step,
+    autoFocus: autoFocus,
+    onChange: event => {
+      const next = parseInputValue(eventValue(event), type, value);
+      onValue(next);
+    },
+    style: {
+      ...INPUT_STYLE,
+      accentColor: primary
+    }
+  });
+  if (presentation === 'embedded') {
+    return /*#__PURE__*/_jsx(View, {
+      testID: testID,
+      style: style,
+      children: renderInput(date, next => next && confirm(next, true), false)
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: style,
+    children: visible ? /*#__PURE__*/_jsx(ModalPicker, {
+      date: date,
+      label: label,
+      primary: primary,
+      renderInput: renderInput,
+      onConfirm: confirm,
+      onClosed: onClosed,
+      isValid: isValid
+    }) : null
+  });
+}
+function ModalPicker({
+  date,
+  label,
+  primary,
+  renderInput,
+  onConfirm,
+  onClosed,
+  isValid
+}) {
+  const [draft, setDraft] = useState(date);
+  const dateMs = date?.getTime() ?? null;
+  const [previousDateMs, setPreviousDateMs] = useState(dateMs);
+  // Honor external updates without remounting the dialog or discarding edits
+  // when the parent creates another Date representing the same instant.
+  if (!Object.is(dateMs, previousDateMs)) {
+    setPreviousDateMs(dateMs);
+    setDraft(date);
+  }
+  const valid = isValid(draft);
+  const dismiss = () => onClosed?.();
+  const textButton = {
+    ...BUTTON_BASE,
+    height: 40,
+    padding: '0 12px',
+    border: 'none',
+    borderRadius: 20,
+    fontSize: 14,
+    color: primary,
+    backgroundColor: 'transparent'
+  };
+  return /*#__PURE__*/_jsxs(Dialog, {
+    label: label,
+    onDismiss: dismiss,
+    children: [renderInput(draft, next => {
+      setDraft(next);
+      if (next) onConfirm(next, false);
+    }, true), /*#__PURE__*/_jsxs("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        gap: 8,
+        marginTop: 12
+      },
+      children: [/*#__PURE__*/_jsx("button", {
+        type: "button",
+        onClick: dismiss,
+        style: textButton,
+        children: "Cancel"
+      }), /*#__PURE__*/_jsx("button", {
+        type: "button",
+        disabled: !valid,
+        onClick: () => valid && draft && onConfirm(draft, true),
+        style: {
+          ...textButton,
+          opacity: valid ? 1 : 0.38
+        },
+        children: "Done"
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=DatePicker.js.map

package/lib/module/web/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","View","Dialog","formatInputValue","inputTypeForMode","isWithinInputBounds","parseInputValue","BUTTON_BASE","eventValue","usePrimaryColor","jsx","_jsx","jsxs","_jsxs","INPUT_STYLE","boxSizing","width","minHeight","padding","border","borderRadius","fontFamily","fontSize","color","backgroundColor","DatePicker","props","style","date","minDate","maxDate","locale","mode","presentation","visible","onConfirm","onClosed","ios","testID","primary","type","label","step","minuteInterval","undefined","isValid","next","confirm","confirmed","getHours","getMinutes","renderInput","value","onValue","autoFocus","lang","min","max","onChange","event","accentColor","children","ModalPicker","draft","setDraft","dateMs","getTime","previousDateMs","setPreviousDateMs","Object","is","valid","dismiss","textButton","height","onDismiss","display","justifyContent","gap","marginTop","onClick","disabled","opacity"],"sourceRoot":"../../../src","sources":["web/DatePicker.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/web/DateRangePicker.js

@@ -0,0 +1,131 @@
+"use strict";
+
+// web/DateRangePicker.tsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { Dialog } from "./Dialog.js";
+import { formatInputValue, isWithinInputBounds, parseInputValue } from "./dateInput.js";
+import { BUTTON_BASE, eventValue, usePrimaryColor } from "./shared.js";
+
+/** The browser has start and end date inputs, so the range picker works on web. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const isDateRangePickerSupported = true;
+const INPUT_STYLE = {
+  boxSizing: 'border-box',
+  width: '100%',
+  minHeight: 40,
+  padding: '0 12px',
+  border: '1px solid color-mix(in srgb, CanvasText 30%, transparent)',
+  borderRadius: 8,
+  fontFamily: 'inherit',
+  fontSize: 16,
+  color: 'inherit',
+  backgroundColor: 'transparent'
+};
+const startOfDay = date => {
+  if (!date || !Number.isFinite(date.getTime())) return null;
+  const day = new Date(date.getTime());
+  day.setHours(0, 0, 0, 0);
+  return day;
+};
+
+/**
+ * A `<dialog>` with start and end date inputs and Cancel/Done buttons. Done
+ * reports the range (the start of each day) once both are set and in order,
+ * then calls `onClosed`, as the Android dialog does.
+ */
+export function DateRangePicker(props) {
+  const {
+    style,
+    testID,
+    visible
+  } = props;
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: style,
+    children: visible ? /*#__PURE__*/_jsx(RangeDialog, {
+      ...props
+    }) : null
+  });
+}
+function RangeDialog({
+  startDate,
+  endDate,
+  minDate,
+  maxDate,
+  locale,
+  onConfirm,
+  onClosed
+}) {
+  const primary = usePrimaryColor();
+  const [start, setStart] = useState(startOfDay(startDate));
+  const [end, setEnd] = useState(startOfDay(endDate));
+  const valid = isWithinInputBounds(start, 'date', minDate, maxDate) && isWithinInputBounds(end, 'date', minDate, maxDate) && end >= start;
+  const minimumEndDate = start && (!minDate || start >= minDate) ? start : minDate;
+  const dismiss = () => onClosed?.();
+  const textButton = {
+    ...BUTTON_BASE,
+    height: 40,
+    padding: '0 12px',
+    border: 'none',
+    borderRadius: 20,
+    fontSize: 14,
+    color: primary,
+    backgroundColor: 'transparent'
+  };
+  const renderInput = (label, value, onValue, min) => /*#__PURE__*/_jsx("input", {
+    type: "date",
+    lang: locale,
+    "aria-label": label,
+    value: formatInputValue(value, 'date'),
+    min: formatInputValue(min, 'date') || undefined,
+    max: formatInputValue(maxDate, 'date') || undefined,
+    onChange: event => onValue(parseInputValue(eventValue(event), 'date', null)),
+    style: {
+      ...INPUT_STYLE,
+      accentColor: primary
+    }
+  });
+  return /*#__PURE__*/_jsxs(Dialog, {
+    label: "Date range",
+    onDismiss: dismiss,
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8
+      },
+      children: [renderInput('Start date', start, setStart, minDate), renderInput('End date', end, setEnd, minimumEndDate)]
+    }), /*#__PURE__*/_jsxs("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        gap: 8,
+        marginTop: 12
+      },
+      children: [/*#__PURE__*/_jsx("button", {
+        type: "button",
+        onClick: dismiss,
+        style: textButton,
+        children: "Cancel"
+      }), /*#__PURE__*/_jsx("button", {
+        type: "button",
+        disabled: !valid,
+        onClick: () => {
+          if (!valid) return;
+          onConfirm?.({
+            startDate: start,
+            endDate: end
+          });
+          onClosed?.();
+        },
+        style: {
+          ...textButton,
+          opacity: valid ? 1 : 0.38
+        },
+        children: "Done"
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=DateRangePicker.js.map

package/lib/module/web/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","View","Dialog","formatInputValue","isWithinInputBounds","parseInputValue","BUTTON_BASE","eventValue","usePrimaryColor","jsx","_jsx","jsxs","_jsxs","isDateRangePickerSupported","INPUT_STYLE","boxSizing","width","minHeight","padding","border","borderRadius","fontFamily","fontSize","color","backgroundColor","startOfDay","date","Number","isFinite","getTime","day","Date","setHours","DateRangePicker","props","style","testID","visible","children","RangeDialog","startDate","endDate","minDate","maxDate","locale","onConfirm","onClosed","primary","start","setStart","end","setEnd","valid","minimumEndDate","dismiss","textButton","height","renderInput","label","value","onValue","min","type","lang","undefined","max","onChange","event","accentColor","onDismiss","display","flexDirection","gap","justifyContent","marginTop","onClick","disabled","opacity"],"sourceRoot":"../../../src","sources":["web/DateRangePicker.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/web/Dialog.js

@@ -0,0 +1,48 @@
+"use strict";
+
+// web/Dialog.tsx
+import React, { useLayoutEffect, useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A modal `<dialog>`, open while mounted. Escape and a click on the backdrop
+ * call `onDismiss`; like the native modals, the caller closes it by flipping
+ * its `visible` prop, which unmounts it.
+ */
+export function Dialog({
+  label,
+  onDismiss,
+  children
+}) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const dialog = ref.current;
+    if (dialog && !dialog.open) dialog.showModal?.();
+  }, []);
+  return /*#__PURE__*/_jsx("dialog", {
+    ref: element => {
+      ref.current = element;
+    },
+    "aria-label": label,
+    onClose: onDismiss,
+    onClick: event => {
+      // The dialog has no padding, so a click on the element itself is a
+      // click on the backdrop.
+      if (event.target === event.currentTarget) onDismiss();
+    },
+    style: {
+      padding: 0,
+      border: 'none',
+      borderRadius: 16,
+      backgroundColor: 'Canvas',
+      color: 'CanvasText',
+      boxShadow: '0 8px 32px rgba(0, 0, 0, 0.25)'
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      style: {
+        padding: 16
+      },
+      children: children
+    })
+  });
+}
+//# sourceMappingURL=Dialog.js.map

package/lib/module/web/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useLayoutEffect","useRef","jsx","_jsx","Dialog","label","onDismiss","children","ref","dialog","current","open","showModal","element","onClose","onClick","event","target","currentTarget","style","padding","border","borderRadius","backgroundColor","color","boxShadow"],"sourceRoot":"../../../src","sources":["web/Dialog.tsx"],"mappings":";;AAAA;AACA,OAAOA,KAAK,IAAIC,eAAe,EAAEC,MAAM,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOvD;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,MAAMA,CAAC;EACrBC,KAAK;EACLC,SAAS;EACTC;AAKF,CAAC,EAAsB;EACrB,MAAMC,GAAG,GAAGP,MAAM,CAAuB,IAAI,CAAC;EAE9CD,eAAe,CAAC,MAAM;IACpB,MAAMS,MAAM,GAAGD,GAAG,CAACE,OAAO;IAC1B,IAAID,MAAM,IAAI,CAACA,MAAM,CAACE,IAAI,EAAEF,MAAM,CAACG,SAAS,GAAG,CAAC;EAClD,CAAC,EAAE,EAAE,CAAC;EAEN,oBACET,IAAA;IACEK,GAAG,EAAGK,OAAO,IAAK;MAChBL,GAAG,CAACE,OAAO,GAAGG,OAA0C;IAC1D,CAAE;IACF,cAAYR,KAAM;IAClBS,OAAO,EAAER,SAAU;IACnBS,OAAO,EAAGC,KAAK,IAAK;MAClB;MACA;MACA,IAAIA,KAAK,CAACC,MAAM,KAAKD,KAAK,CAACE,aAAa,EAAEZ,SAAS,CAAC,CAAC;IACvD,CAAE;IACFa,KAAK,EAAE;MACLC,OAAO,EAAE,CAAC;MACVC,MAAM,EAAE,MAAM;MACdC,YAAY,EAAE,EAAE;MAChBC,eAAe,EAAE,QAAQ;MACzBC,KAAK,EAAE,YAAY;MACnBC,SAAS,EAAE;IACb,CAAE;IAAAlB,QAAA,eAEFJ,IAAA;MAAKgB,KAAK,EAAE;QAAEC,OAAO,EAAE;MAAG,CAAE;MAAAb,QAAA,EAAEA;IAAQ,CAAM;EAAC,CACvC,CAAC;AAEb","ignoreList":[]}

package/lib/module/web/FloatingActionButton.js

@@ -0,0 +1,94 @@
+"use strict";
+
+// web/FloatingActionButton.tsx
+import React from 'react';
+import { View } from 'react-native';
+import { Icon } from "./Icon.js";
+import { BUTTON_BASE, cssColor, usePrimaryColor } from "./shared.js";
+
+/** Height (and diameter when shrunk), icon and label size for each size. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FAB_SIZES = {
+  small: {
+    height: 40,
+    icon: 24,
+    fontSize: 16,
+    padding: 16
+  },
+  regular: {
+    height: 56,
+    icon: 24,
+    fontSize: 16,
+    padding: 16
+  },
+  medium: {
+    height: 80,
+    icon: 28,
+    fontSize: 22,
+    padding: 26
+  },
+  large: {
+    height: 96,
+    icon: 36,
+    fontSize: 24,
+    padding: 28
+  }
+};
+
+/**
+ * A `<button>` styled after the Material 3 FAB: a rounded square with the
+ * icon, or the extended FAB with the label. `scrollViewNativeID` is ignored.
+ */
+export function FloatingActionButton(props) {
+  const {
+    icon,
+    label,
+    extended = true,
+    size = 'regular',
+    color,
+    tintColor,
+    disabled,
+    accessibilityLabel,
+    onPress,
+    scrollViewNativeID: _scrollViewNativeID,
+    style,
+    ...viewProps
+  } = props;
+  const primary = usePrimaryColor();
+  const metrics = FAB_SIZES[size] ?? FAB_SIZES.regular;
+  const showsLabel = !!label && extended;
+  const foreground = cssColor(tintColor) ?? 'CanvasText';
+  return /*#__PURE__*/_jsx(View, {
+    ...viewProps,
+    style: [{
+      alignSelf: 'flex-start'
+    }, style],
+    children: /*#__PURE__*/_jsxs("button", {
+      type: "button",
+      disabled: disabled,
+      "aria-label": accessibilityLabel ?? label,
+      onClick: onPress,
+      style: {
+        ...BUTTON_BASE,
+        gap: 12,
+        height: metrics.height,
+        minWidth: metrics.height,
+        padding: showsLabel ? `0 ${metrics.padding}px` : 0,
+        border: 'none',
+        borderRadius: size === 'small' ? 12 : metrics.height / 3.5,
+        backgroundColor: cssColor(color) ?? `color-mix(in srgb, ${primary} 24%, Canvas)`,
+        color: foreground,
+        boxShadow: '0 3px 6px rgba(0, 0, 0, 0.2)',
+        fontSize: metrics.fontSize,
+        opacity: disabled ? 0.38 : 1,
+        cursor: disabled ? 'default' : 'pointer'
+      },
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: icon,
+        color: foreground,
+        size: metrics.icon
+      }), showsLabel ? label : null]
+    })
+  });
+}
+//# sourceMappingURL=FloatingActionButton.js.map

package/lib/module/web/FloatingActionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Icon","BUTTON_BASE","cssColor","usePrimaryColor","jsx","_jsx","jsxs","_jsxs","FAB_SIZES","small","height","icon","fontSize","padding","regular","medium","large","FloatingActionButton","props","label","extended","size","color","tintColor","disabled","accessibilityLabel","onPress","scrollViewNativeID","_scrollViewNativeID","style","viewProps","primary","metrics","showsLabel","foreground","alignSelf","children","type","onClick","gap","minWidth","border","borderRadius","backgroundColor","boxShadow","opacity","cursor"],"sourceRoot":"../../../src","sources":["web/FloatingActionButton.tsx"],"mappings":";;AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAGnC,SAASC,IAAI,QAAQ,WAAQ;AAC7B,SAASC,WAAW,EAAEC,QAAQ,EAAEC,eAAe,QAAQ,aAAU;;AAEjE;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AACA,MAAMC,SAGL,GAAG;EACFC,KAAK,EAAE;IAAEC,MAAM,EAAE,EAAE;IAAEC,IAAI,EAAE,EAAE;IAAEC,QAAQ,EAAE,EAAE;IAAEC,OAAO,EAAE;EAAG,CAAC;EAC1DC,OAAO,EAAE;IAAEJ,MAAM,EAAE,EAAE;IAAEC,IAAI,EAAE,EAAE;IAAEC,QAAQ,EAAE,EAAE;IAAEC,OAAO,EAAE;EAAG,CAAC;EAC5DE,MAAM,EAAE;IAAEL,MAAM,EAAE,EAAE;IAAEC,IAAI,EAAE,EAAE;IAAEC,QAAQ,EAAE,EAAE;IAAEC,OAAO,EAAE;EAAG,CAAC;EAC3DG,KAAK,EAAE;IAAEN,MAAM,EAAE,EAAE;IAAEC,IAAI,EAAE,EAAE;IAAEC,QAAQ,EAAE,EAAE;IAAEC,OAAO,EAAE;EAAG;AAC3D,CAAC;;AAED;AACA;AACA;AACA;AACA,OAAO,SAASI,oBAAoBA,CAClCC,KAAgC,EACZ;EACpB,MAAM;IACJP,IAAI;IACJQ,KAAK;IACLC,QAAQ,GAAG,IAAI;IACfC,IAAI,GAAG,SAAS;IAChBC,KAAK;IACLC,SAAS;IACTC,QAAQ;IACRC,kBAAkB;IAClBC,OAAO;IACPC,kBAAkB,EAAEC,mBAAmB;IACvCC,KAAK;IACL,GAAGC;EACL,CAAC,GAAGZ,KAAK;EAET,MAAMa,OAAO,GAAG5B,eAAe,CAAC,CAAC;EACjC,MAAM6B,OAAO,GAAGxB,SAAS,CAACa,IAAI,CAAC,IAAIb,SAAS,CAACM,OAAQ;EACrD,MAAMmB,UAAU,GAAG,CAAC,CAACd,KAAK,IAAIC,QAAQ;EACtC,MAAMc,UAAU,GAAGhC,QAAQ,CAACqB,SAAS,CAAC,IAAI,YAAY;EAEtD,oBACElB,IAAA,CAACN,IAAI;IAAA,GAAK+B,SAAS;IAAED,KAAK,EAAE,CAAC;MAAEM,SAAS,EAAE;IAAa,CAAC,EAAEN,KAAK,CAAE;IAAAO,QAAA,eAC/D7B,KAAA;MACE8B,IAAI,EAAC,QAAQ;MACbb,QAAQ,EAAEA,QAAS;MACnB,cAAYC,kBAAkB,IAAIN,KAAM;MACxCmB,OAAO,EAAEZ,OAAQ;MACjBG,KAAK,EAAE;QACL,GAAG5B,WAAW;QACdsC,GAAG,EAAE,EAAE;QACP7B,MAAM,EAAEsB,OAAO,CAACtB,MAAM;QACtB8B,QAAQ,EAAER,OAAO,CAACtB,MAAM;QACxBG,OAAO,EAAEoB,UAAU,GAAG,KAAKD,OAAO,CAACnB,OAAO,IAAI,GAAG,CAAC;QAClD4B,MAAM,EAAE,MAAM;QACdC,YAAY,EAAErB,IAAI,KAAK,OAAO,GAAG,EAAE,GAAGW,OAAO,CAACtB,MAAM,GAAG,GAAG;QAC1DiC,eAAe,EACbzC,QAAQ,CAACoB,KAAK,CAAC,IAAI,sBAAsBS,OAAO,eAAe;QACjET,KAAK,EAAEY,UAAU;QACjBU,SAAS,EAAE,8BAA8B;QACzChC,QAAQ,EAAEoB,OAAO,CAACpB,QAAQ;QAC1BiC,OAAO,EAAErB,QAAQ,GAAG,IAAI,GAAG,CAAC;QAC5BsB,MAAM,EAAEtB,QAAQ,GAAG,SAAS,GAAG;MACjC,CAAE;MAAAY,QAAA,gBAEF/B,IAAA,CAACL,IAAI;QAACW,IAAI,EAAEA,IAAK;QAACW,KAAK,EAAEY,UAAW;QAACb,IAAI,EAAEW,OAAO,CAACrB;MAAK,CAAE,CAAC,EAC1DsB,UAAU,GAAGd,KAAK,GAAG,IAAI;IAAA,CACpB;EAAC,CACL,CAAC;AAEX","ignoreList":[]}

package/lib/module/web/Icon.js

@@ -0,0 +1,29 @@
+"use strict";
+
+// web/Icon.tsx
+import React from 'react';
+import { Image } from 'react-native';
+import { webIcon } from "./shared.js";
+
+/**
+ * Draws an icon on web, tinted with `color` unless the source opts out.
+ * Renders nothing for SF Symbols and Android drawables.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Icon({
+  icon,
+  color,
+  size = 20
+}) {
+  const resolved = webIcon(icon);
+  if (!resolved) return null;
+  return /*#__PURE__*/_jsx(Image, {
+    source: resolved.source,
+    style: {
+      width: size,
+      height: size,
+      tintColor: resolved.tinted ? color : undefined
+    }
+  });
+}
+//# sourceMappingURL=Icon.js.map

package/lib/module/web/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Image","webIcon","jsx","_jsx","Icon","icon","color","size","resolved","source","style","width","height","tintColor","tinted","undefined"],"sourceRoot":"../../../src","sources":["web/Icon.tsx"],"mappings":";;AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,QAAQ,cAAc;AAGpC,SAASC,OAAO,QAAQ,aAAU;;AAElC;AACA;AACA;AACA;AAHA,SAAAC,GAAA,IAAAC,IAAA;AAIA,OAAO,SAASC,IAAIA,CAAC;EACnBC,IAAI;EACJC,KAAK;EACLC,IAAI,GAAG;AAKT,CAAC,EAA6B;EAC5B,MAAMC,QAAQ,GAAGP,OAAO,CAACI,IAAI,CAAC;EAC9B,IAAI,CAACG,QAAQ,EAAE,OAAO,IAAI;EAC1B,oBACEL,IAAA,CAACH,KAAK;IACJS,MAAM,EAAED,QAAQ,CAACC,MAAO;IACxBC,KAAK,EAAE;MACLC,KAAK,EAAEJ,IAAI;MACXK,MAAM,EAAEL,IAAI;MACZM,SAAS,EAAEL,QAAQ,CAACM,MAAM,GAAGR,KAAK,GAAGS;IACvC;EAAE,CACH,CAAC;AAEN","ignoreList":[]}

package/lib/module/web/NativeTheme.js

@@ -0,0 +1,23 @@
+"use strict";
+
+// web/NativeTheme.ts
+import { useLayoutEffect } from 'react';
+import { cssColor, setThemePrimary } from "./shared.js";
+
+/**
+ * Applies the theme's brand color to the web components (filled buttons, the
+ * selected segment, focus rings and the browser's own controls through
+ * `accent-color`). Pass `null` to restore the default.
+ */
+export function setNativeTheme(theme) {
+  setThemePrimary(theme ? cssColor(theme.colors.primary) : undefined);
+}
+
+/** Keeps the web components' brand color in sync with `theme`. */
+export function useNativeTheme(theme) {
+  const primary = theme ? cssColor(theme.colors.primary) : undefined;
+  useLayoutEffect(() => {
+    setThemePrimary(primary);
+  }, [primary]);
+}
+//# sourceMappingURL=NativeTheme.js.map

package/lib/module/web/NativeTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useLayoutEffect","cssColor","setThemePrimary","setNativeTheme","theme","colors","primary","undefined","useNativeTheme"],"sourceRoot":"../../../src","sources":["web/NativeTheme.ts"],"mappings":";;AAAA;AACA,SAASA,eAAe,QAAQ,OAAO;AAGvC,SAASC,QAAQ,EAAEC,eAAe,QAAQ,aAAU;;AAEpD;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAACC,KAAyB,EAAQ;EAC9DF,eAAe,CAACE,KAAK,GAAGH,QAAQ,CAACG,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC,GAAGC,SAAS,CAAC;AACrE;;AAEA;AACA,OAAO,SAASC,cAAcA,CAACJ,KAAqC,EAAQ;EAC1E,MAAME,OAAO,GAAGF,KAAK,GAAGH,QAAQ,CAACG,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC,GAAGC,SAAS;EAElEP,eAAe,CAAC,MAAM;IACpBE,eAAe,CAACI,OAAO,CAAC;EAC1B,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;AACf","ignoreList":[]}

package/lib/module/web/NavigationRail.js

@@ -0,0 +1,133 @@
+"use strict";
+
+// web/NavigationRail.tsx
+import React from 'react';
+import { View } from 'react-native';
+import { Icon } from "./Icon.js";
+import { cssColor, cssFont, usePrimaryColor } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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.
+ */
+export 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 = usePrimaryColor();
+  const activeColor = cssColor(activeTintColor) ?? primary;
+  const inactiveColor = cssColor(inactiveTintColor) ?? 'GrayText';
+  return /*#__PURE__*/_jsxs(View, {
+    ...viewProps,
+    style: [{
+      alignItems: expanded ? 'stretch' : 'center',
+      width: expanded ? 220 : 96,
+      paddingVertical: 12,
+      gap: 12,
+      backgroundColor: cssColor(railColor)
+    }, style],
+    children: [header ? /*#__PURE__*/_jsx(View, {
+      style: {
+        alignItems: 'center'
+      },
+      children: header
+    }) : null, /*#__PURE__*/_jsx(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__*/_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',
+            ...cssFont(labelStyle)
+          },
+          children: [/*#__PURE__*/_jsxs("span", {
+            style: {
+              position: 'relative',
+              display: 'flex',
+              padding: '4px 16px',
+              borderRadius: 16,
+              backgroundColor: isSelected ? cssColor(android?.indicatorColor) ?? 'rgba(118, 118, 128, 0.16)' : 'transparent'
+            },
+            children: [/*#__PURE__*/_jsx(Icon, {
+              icon: icon,
+              color: color,
+              size: 24
+            }), item.badge !== undefined ? /*#__PURE__*/_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: cssColor(badgeStyle?.backgroundColor) ?? '#FF3B30',
+                color: cssColor(badgeStyle?.color) ?? '#fff'
+              },
+              children: item.badge
+            }) : null]
+          }), showLabel ? item.label : null]
+        }, item.value);
+      })
+    })]
+  });
+}
+//# sourceMappingURL=NavigationRail.js.map