@webority-technologies/mobile-ui 0.0.1 → 0.0.2

package/lib/module/components/RichTextEditor/markdownActions.js

@@ -0,0 +1,207 @@
+"use strict";
+
+/**
+ * The text transforms behind the editor's toolbar, kept out of the component so
+ * the behaviour people actually notice — toggling bold OFF again, and where the
+ * caret lands when nothing is selected — can be tested as data, with no
+ * rendering involved. Same split as Markdown/parse.ts.
+ *
+ * The output targets our own `<Markdown>` renderer, so the vocabulary is the
+ * subset that parser reads: `**`, `*`, `~~`, backtick, `[](…)`, `#`, `##`,
+ * `- `, `1. `, `> `. Nothing here emits anything that renderer would show as
+ * literal text.
+ */
+
+const INLINE_MARKERS = {
+  bold: '**',
+  italic: '*',
+  strikethrough: '~~',
+  code: '`'
+};
+
+/** A whole link, and only a whole link — used to decide "is this already one?". */
+const WHOLE_LINK = /^\[([^\]]*)\]\(([^)\s]*)\)$/;
+const LINK_URL_PLACEHOLDER = 'url';
+const BLOCK_RULES = {
+  heading1: {
+    has: l => /^#\s/.test(l),
+    prefix: () => '# '
+  },
+  heading2: {
+    has: l => /^##\s/.test(l),
+    prefix: () => '## '
+  },
+  bulletList: {
+    has: l => /^[-*+]\s/.test(l),
+    prefix: () => '- '
+  },
+  numberedList: {
+    has: l => /^\d+[.)]\s/.test(l),
+    prefix: index => `${index + 1}. `
+  },
+  quote: {
+    has: l => /^>\s?/.test(l),
+    prefix: () => '> '
+  }
+};
+
+/** Every block marker this editor writes, so switching kinds replaces rather than stacks. */
+const ANY_BLOCK_PREFIX = /^(?:#{1,6}\s+|[-*+]\s+|\d+[.)]\s+|>\s?)/;
+const isBlockAction = action => action in BLOCK_RULES;
+const clamp = (value, max) => {
+  // React Native reports -1 for "no selection yet" on some Android builds.
+  if (!Number.isFinite(value) || value < 0) {
+    return 0;
+  }
+  return Math.min(Math.trunc(value), max);
+};
+
+/** Selection as given can be reversed, unset, or past the end after an edit. */
+export const normalizeSelection = (selection, length) => {
+  const a = clamp(selection.start, length);
+  const b = clamp(selection.end, length);
+  return {
+    start: Math.min(a, b),
+    end: Math.max(a, b)
+  };
+};
+const caret = at => ({
+  start: at,
+  end: at
+});
+const applyInlineMarker = (text, selection, marker) => {
+  const {
+    start,
+    end
+  } = selection;
+  const selected = text.slice(start, end);
+  const size = marker.length;
+
+  // `*` is a prefix of `**`, so italic must never mistake bold for itself:
+  // unwrapping one star per side would silently downgrade bold to italic.
+  const boldCollision = marker === '*';
+  const wrappedInside = selected.length >= size * 2 && selected.startsWith(marker) && selected.endsWith(marker);
+  if (wrappedInside && !(boldCollision && selected.startsWith('**') && selected.endsWith('**'))) {
+    const inner = selected.slice(size, selected.length - size);
+    return {
+      text: text.slice(0, start) + inner + text.slice(end),
+      selection: {
+        start,
+        end: start + inner.length
+      }
+    };
+  }
+  const before = text.slice(Math.max(0, start - size), start);
+  const after = text.slice(end, end + size);
+  const wrappedOutside = start >= size && before === marker && after === marker && !(boldCollision && text.slice(Math.max(0, start - 2), start) === '**');
+  if (wrappedOutside) {
+    return {
+      text: text.slice(0, start - size) + selected + text.slice(end + size),
+      selection: {
+        start: start - size,
+        end: end - size
+      }
+    };
+  }
+  const next = text.slice(0, start) + marker + selected + marker + text.slice(end);
+  return {
+    text: next,
+    selection: start === end ? caret(start + size) : {
+      start: start + size,
+      end: end + size
+    }
+  };
+};
+const applyLink = (text, selection) => {
+  const {
+    start,
+    end
+  } = selection;
+  const selected = text.slice(start, end);
+  const existing = WHOLE_LINK.exec(selected);
+  if (existing) {
+    const label = existing[1];
+    return {
+      text: text.slice(0, start) + label + text.slice(end),
+      selection: {
+        start,
+        end: start + label.length
+      }
+    };
+  }
+  const inserted = `[${selected}](${LINK_URL_PLACEHOLDER})`;
+  const next = text.slice(0, start) + inserted + text.slice(end);
+  if (start === end) {
+    // Nothing selected: the label is what the user types first, so the caret
+    // goes between the brackets rather than onto the URL placeholder.
+    return {
+      text: next,
+      selection: caret(start + 1)
+    };
+  }
+  const urlStart = start + selected.length + 3;
+  return {
+    text: next,
+    selection: {
+      start: urlStart,
+      end: urlStart + LINK_URL_PLACEHOLDER.length
+    }
+  };
+};
+const applyBlockPrefix = (text, selection, action) => {
+  const rule = BLOCK_RULES[action];
+  const lines = text.split('\n');
+  const offsets = [];
+  let cursor = 0;
+  for (const line of lines) {
+    offsets.push(cursor);
+    cursor += line.length + 1;
+  }
+  const lineIndexAt = position => {
+    let index = 0;
+    for (let i = 0; i < lines.length; i += 1) {
+      if (offsets[i] <= position) {
+        index = i;
+      }
+    }
+    return index;
+  };
+  const first = lineIndexAt(selection.start);
+  const last = lineIndexAt(selection.end);
+  const affected = lines.slice(first, last + 1);
+  const allHave = affected.every(line => rule.has(line));
+  const rewritten = affected.map((line, index) => allHave ? line.replace(ANY_BLOCK_PREFIX, '') : rule.prefix(index) + line.replace(ANY_BLOCK_PREFIX, ''));
+  const firstDelta = rewritten[0].length - affected[0].length;
+  const totalDelta = rewritten.reduce((sum, line, index) => sum + (line.length - affected[index].length), 0);
+  const nextLines = [...lines.slice(0, first), ...rewritten, ...lines.slice(last + 1)];
+  const nextText = nextLines.join('\n');
+  return {
+    text: nextText,
+    selection: normalizeSelection({
+      start: Math.max(offsets[first], selection.start + firstDelta),
+      end: selection.end + totalDelta
+    }, nextText.length)
+  };
+};
+
+/**
+ * Applies one toolbar action to the current text + selection and returns the
+ * next pair. Pure: the caller owns the state.
+ *
+ * Wrapping applies to the selection; with nothing selected the markers are
+ * inserted and the caret lands between them. Applying an action to text that
+ * already carries it removes it instead of stacking a second copy — which is
+ * the half people notice immediately when it is missing.
+ */
+export const applyMarkdownAction = (state, action) => {
+  const text = state.text ?? '';
+  const selection = normalizeSelection(state.selection, text.length);
+  if (isBlockAction(action)) {
+    return applyBlockPrefix(text, selection, action);
+  }
+  if (action === 'link') {
+    return applyLink(text, selection);
+  }
+  return applyInlineMarker(text, selection, INLINE_MARKERS[action]);
+};
+//# sourceMappingURL=markdownActions.js.map

package/lib/module/components/SearchBar/SearchBar.js

@@ -63,6 +63,13 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
   const debouncedValue = useDebounce(internalValue, debounceMs ?? 0);
   const cancelAnim = useRef(createAnimatedValue(0)).current;
 
+  // Equivalent-mutant note: removing the `debounceMs === undefined` guard
+  // below cannot change observable behaviour. `internalValue` is only ever
+  // read (via `displayValue`) when `debounceMs !== undefined`; without the
+  // guard, a non-debounced instance would keep resyncing `internalValue`
+  // from `value` on every prop change, but that resynced value is never
+  // displayed or sent anywhere while non-debounced, so no test can observe
+  // the difference.
   // biome-ignore lint/correctness/useExhaustiveDependencies: syncs the internal draft FROM the `value` prop; adding `internalValue` would revert every keystroke while the debounce is still pending
   useEffect(() => {
     if (debounceMs === undefined) {

package/lib/module/components/Select/Select.js

@@ -226,7 +226,7 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
       accessibilityLabel: label ?? placeholder ?? 'Options',
       options: options,
       labelOf: labelOf,
-      valueOf: valueOf,
+      getValue: valueOf,
       disabledOf: disabledOf,
       descriptionOf: descriptionOf,
       iconOf: iconOf,

package/lib/module/components/Skeleton/Skeleton.js

@@ -12,7 +12,7 @@
  *   - A View with the base color and `overflow: hidden` + radius gives the
  *     placeholder its shape.
  *   - For `animation: 'shimmer'`, an Animated.View carrying a 3-stop
- *     `LinearGradient` (transparent → highlight → transparent) translates
+ *     linear gradient (transparent → highlight → transparent) translates
  *     across the box. The radius clips it to the right outline automatically.
  *   - For `animation: 'pulse'`, a full-fill Animated.View fades its opacity
  *     between 0 and 0.6. Cheap and useful for tiny shapes where a sweep
@@ -28,17 +28,7 @@
 import React, { useMemo, useState } from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 import { useTheme } from "../../theme/index.js";
-
-// `react-native-linear-gradient` is an OPTIONAL peer dep. When it's installed
-// we sweep a real gradient band across the shimmer. When it isn't, we fall
-// back to a solid-color band — still works, just less polished. This keeps
-// the library deployable in apps that don't need gradients elsewhere.
-let LinearGradientImpl = null;
-try {
-  LinearGradientImpl = require('react-native-linear-gradient').default;
-} catch {
-  // Optional peer; resolved lazily by consumers that need shimmer polish.
-}
+import { toBackgroundImage } from "../../theme/Gradient.js";
 import { Responsive } from "../../utils/index.js";
 import { useSkeletonClock } from "./SkeletonClock.js";
 import { useSkeletonDefaults } from "./SkeletonProvider.js";
@@ -160,36 +150,27 @@ const Skeleton = ({
     }
 
     // 3-stop gradient: transparent → highlight → transparent. Feathered
-    // edges feel premium; a solid band looks like a bug. When the optional
-    // gradient package isn't installed we render the band as a solid
-    // highlight rectangle — visibly different but still recognizably a
-    // shimmer effect.
+    // edges feel premium; a solid band looks like a bug.
     return /*#__PURE__*/_jsx(Animated.View, {
       pointerEvents: "none",
       style: [styles.shimmerBand, {
         width: bandWidth,
         transform: [{
           translateX
-        }]
-      }],
-      children: LinearGradientImpl ? /*#__PURE__*/_jsx(LinearGradientImpl, {
-        colors: ['transparent', highlightColor, 'transparent'],
-        locations: [0, 0.5, 1],
-        start: {
-          x: 0,
-          y: 0.5
-        },
-        end: {
-          x: 1,
-          y: 0.5
-        },
-        style: StyleSheet.absoluteFill
-      }) : /*#__PURE__*/_jsx(View, {
-        style: [StyleSheet.absoluteFill, {
-          backgroundColor: highlightColor,
-          opacity: 0.55
-        }]
-      })
+        }],
+        experimental_backgroundImage: [toBackgroundImage({
+          colors: ['transparent', highlightColor, 'transparent'],
+          locations: [0, 0.5, 1],
+          start: {
+            x: 0,
+            y: 0.5
+          },
+          end: {
+            x: 1,
+            y: 0.5
+          }
+        })]
+      }]
     });
   }, [effectiveVariant, highlightColor, clock.pulse, containerWidth, styles.shimmerBand, bandWidth, translateX]);
   return /*#__PURE__*/_jsx(View, {

package/lib/module/components/Slider/Slider.js

@@ -270,8 +270,13 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
       return;
     }
     const delta = event.nativeEvent.actionName === 'increment' ? step : -step;
+    // Round through `precision` (same guard the pan gesture uses) so repeated
+    // increments of a fractional step (e.g. 0.1) don't drift off the exact
+    // decimal via binary float addition (0.1+0.1+0.1 = 0.30000000000000004).
+    const roundedDelta = step > 0 ? Math.round(delta * precision) / precision : delta;
     if (isRange) {
-      const nextLow = clamp(lowVal.value + delta, min, highVal.value);
+      const rawLow = Math.round((lowVal.value + roundedDelta) * precision) / precision;
+      const nextLow = clamp(rawLow, min, highVal.value);
       if (nextLow !== lowVal.value) {
         lowVal.value = nextLow;
         lowX.value = valueToPx(nextLow, trackWidth);
@@ -279,7 +284,8 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
         fireChange(nextLow, highVal.value);
       }
     } else {
-      const next = clamp(lowVal.value + delta, min, max);
+      const rawNext = Math.round((lowVal.value + roundedDelta) * precision) / precision;
+      const next = clamp(rawNext, min, max);
       if (next !== lowVal.value) {
         lowVal.value = next;
         lowX.value = valueToPx(next, trackWidth);
@@ -287,7 +293,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
         fireChange(next, next);
       }
     }
-  }, [disabled, step, isRange, min, max, valueToPx, trackWidth, lowX, lowVal, highVal, fireChange, fireHaptic]);
+  }, [disabled, step, precision, isRange, min, max, valueToPx, trackWidth, lowX, lowVal, highVal, fireChange, fireHaptic]);
   const thumbRadius = sizeCfg.thumbDiameter / 2;
 
   // ───────── Animated styles ─────────
@@ -320,8 +326,18 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 
   // Display values (from committed state) for labels + a11y.
-  const lowDisplayValue = isRange ? Math.min(...currentValue) : currentValue;
-  const highDisplayValue = isRange ? Math.max(...currentValue) : currentValue;
+  //
+  // Clamped to [min, max]. A caller-supplied value outside the range is not
+  // rewritten — `onChange` is never fired from here and the caller's own state
+  // is untouched — but it must not be RENDERED as-is: valueToPx does not clamp,
+  // so value=150 on a 0..100 slider puts the thumb off the end of the track, and
+  // accessibilityValue would announce `now: 150` against `max: 100`, which is an
+  // invalid state for a screen reader. Any interaction re-clamps through
+  // clamp()/snapToStep() anyway, so this only aligns the first render with what
+  // every subsequent one already does.
+  const clampDisplay = v => clamp(v, min, max);
+  const lowDisplayValue = clampDisplay(isRange ? Math.min(...currentValue) : currentValue);
+  const highDisplayValue = clampDisplay(isRange ? Math.max(...currentValue) : currentValue);
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: [styles.container, containerStyle, style],

package/lib/module/components/Swipeable/Swipeable.js

@@ -118,6 +118,9 @@ const Swipeable = props => {
   const fireFirstAction = useCallback(side => {
     const list = side === 'left' ? leftActions : rightActions;
     const first = list?.[0];
+    // Structurally unreachable, not a bug guard: both call sites below are
+    // gated on allowLeft/allowRight (== hasLeft/hasRight), which is exactly
+    // "list has at least one element". Kept for type narrowing on `first`.
     if (!first) {
       return;
     }
@@ -154,7 +157,7 @@ const Swipeable = props => {
     const openThreshold = threshold;
     const allowLeft = hasLeft;
     const allowRight = hasRight;
-    return Gesture.Pan().enabled(!disabled).activeOffsetX([-dragActivationOffset, dragActivationOffset]).failOffsetY([-failOffsetY, failOffsetY]).onStart(() => {
+    return Gesture.Pan().enabled(!disabled).withTestId(testID ? `${testID}-gesture` : 'swipeable-gesture').activeOffsetX([-dragActivationOffset, dragActivationOffset]).failOffsetY([-failOffsetY, failOffsetY]).onStart(() => {
       'worklet';
 
       dragStartX.value = translateX.value;
@@ -212,7 +215,7 @@ const Swipeable = props => {
       translateX.value = withSpring(0, springConfig);
       runOnJS(notifyClose)();
     });
-  }, [disabled, dragStartX, fireFirstAction, fullSwipeThreshold, hasLeft, hasRight, leftRevealWidth, notifyClose, notifyOpen, rightRevealWidth, screenWidth, threshold, translateX, dragActivationOffset, failOffsetY, rubberBandFactor, springConfig]);
+  }, [disabled, dragStartX, fireFirstAction, fullSwipeThreshold, hasLeft, hasRight, leftRevealWidth, notifyClose, notifyOpen, rightRevealWidth, screenWidth, threshold, translateX, dragActivationOffset, failOffsetY, rubberBandFactor, springConfig, testID]);
 
   // ───────── Animated styles ─────────
   const contentStyle = useAnimatedStyle(() => ({

package/lib/module/components/TimePicker/TimePicker.js

@@ -331,6 +331,17 @@ const TimePicker = props => {
   const [periodIndex, setPeriodIndex] = useState(() => initial.period === 'PM' ? 1 : 0);
 
   // Re-sync on open toggle / value change / format / step.
+  //
+  // The `!open` guard is a RENDER OPTIMISATION, not a correctness guard, and it
+  // is worth knowing which. `open` is itself a dependency, so the effect re-runs
+  // when the picker opens and reads a fresh `new Date()` either way — the state
+  // a user actually sees is identical with or without it. What it saves is three
+  // setState calls (and the extra commit they schedule) on every prop change
+  // while the picker is closed. Correctness while closed is handled by RN's
+  // Modal, which renders nothing at visible={false}.
+  //
+  // That is why its test counts render passes through React.Profiler rather than
+  // asserting on the tree: no DOM assertion can distinguish the two paths.
   useEffect(() => {
     if (!open) {
       return;

package/lib/module/components/index.js

@@ -4,6 +4,7 @@ export { Accordion, AccordionGroup } from "./Accordion/index.js";
 export { AnimatePresence } from "./AnimatePresence/index.js";
 export { AppBar } from "./AppBar/index.js";
 export { AsyncBlock } from "./AsyncBlock/index.js";
+export { AuthedImage, authedImageCacheStats, clearAuthedImageCache, getAuthedImageCacheLimit, setAuthedImageCacheLimit } from "./AuthedImage/index.js";
 export { Autocomplete } from "./Autocomplete/index.js";
 export { Avatar, AvatarGroup } from "./Avatar/index.js";
 export { Badge } from "./Badge/index.js";
@@ -25,6 +26,7 @@ export { Dialog } from "./Dialog/index.js";
 export { Divider } from "./Divider/index.js";
 export { Drawer } from "./Drawer/index.js";
 export { EmptyState } from "./EmptyState/index.js";
+export { ErrorBoundary, useErrorHandler, withErrorBoundary } from "./ErrorBoundary/index.js";
 export { FilePicker, formatFileSize } from "./FilePicker/index.js";
 export { FloatingActionButton, FloatingActionButtonGroup } from "./FloatingActionButton/index.js";
 export { ForceUpdateDialog } from "./ForceUpdateDialog/index.js";
@@ -36,6 +38,8 @@ export { Input } from "./Input/index.js";
 export { KeyboardAwareScrollView } from "./KeyboardAwareScrollView/index.js";
 export { KeyboardToolbar } from "./KeyboardToolbar/index.js";
 export { ListItem } from "./ListItem/index.js";
+export { LoaderOverlay, loader, useLoader } from "./LoaderOverlay/index.js";
+export { Markdown } from "./Markdown/index.js";
 export { MODAL_DISMISS_GRACE_MS, Modal } from "./Modal/index.js";
 export { NumberInput } from "./NumberInput/index.js";
 export { OTPInput } from "./OTPInput/index.js";
@@ -45,6 +49,7 @@ export { ProgressBar } from "./ProgressBar/index.js";
 export { Radio, RadioDot, RadioGroup } from "./Radio/index.js";
 export { Rating } from "./Rating/index.js";
 export { Repeater } from "./Repeater/index.js";
+export { applyMarkdownAction, RichTextEditor } from "./RichTextEditor/index.js";
 export { SearchBar } from "./SearchBar/index.js";
 export { SegmentedControl } from "./SegmentedControl/index.js";
 export { Select } from "./Select/index.js";

package/lib/module/form/FormContext.js

@@ -6,11 +6,23 @@ const FormContext = /*#__PURE__*/createContext(null);
 /**
  * Provides a {@link useForm} instance to descendants so `<FormField name>`,
  * {@link useField} and {@link useFieldArray} can bind by name.
+ *
+ * Generic in `Values`, and it has to be. `FormApi` is invariant in `Values`
+ * because `setValues` accepts a `(prev: Values) => Values`, so a
+ * `FormApi<MyValues>` is not assignable to a `FormApi<FormValues>`. While the
+ * prop was declared at the base type, `useForm<MyValues>()` could not be handed
+ * to `<Form>` by ANY consumer, which is most of the reason to type a form at
+ * all. Untyped callers are unaffected: `Values` defaults to `FormValues`.
  */
 export const Form = ({
   form,
   children
-}) => /*#__PURE__*/_jsx(FormContext.Provider, {
+}) =>
+/*#__PURE__*/
+// Stored at the base type on purpose: descendants bind by NAME through
+// useField and never observe Values, so widening here is safe and is what
+// lets a typed form be provided at all.
+_jsx(FormContext.Provider, {
   value: form,
   children: children
 });

package/lib/module/form/useField.js

@@ -33,13 +33,25 @@ export function useFieldArray(name) {
       copy.splice(index, 0, item);
       set(copy);
     },
+    // `move` and `replace` index into the array directly, so an out-of-range
+    // index corrupts it rather than failing: splice(9, 1) on a 3-item array
+    // yields `undefined`, which then gets spliced back IN, and `copy[9] = item`
+    // grows the array with six holes. Either one puts nulls into the submitted
+    // payload of a repeating field. `insert` and `remove` need no guard —
+    // splice clamps and filter no-ops.
     move: (from, to) => {
+      if (from < 0 || from >= fields.length) {
+        return;
+      }
       const copy = [...fields];
       const [moved] = copy.splice(from, 1);
-      copy.splice(to, 0, moved);
+      copy.splice(Math.max(0, Math.min(to, copy.length)), 0, moved);
       set(copy);
     },
     replace: (index, item) => {
+      if (index < 0 || index >= fields.length) {
+        return;
+      }
       const copy = [...fields];
       copy[index] = item;
       set(copy);

package/lib/module/theme/Gradient.js

@@ -1,49 +1,52 @@
 "use strict";
 
-import React from 'react';
 import { View } from 'react-native';
+
+/**
+ * Render a linear gradient with React Native's own `experimental_backgroundImage`
+ * style prop. `GradientDefinition` keeps its vector-based `start`/`end` shape,
+ * which is translated to a CSS angle here.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_START = {
+  x: 0.5,
+  y: 0
+};
+const DEFAULT_END = {
+  x: 0.5,
+  y: 1
+};
+const round = value => Math.round(value * 1000) / 1000;
+
 /**
- * Render a linear gradient using `react-native-linear-gradient` when available.
- *
- * The dep is OPTIONAL — apps that never use gradients don't need it installed.
- * If `<Gradient>` (or any component that accepts a `gradient` prop) is reached
- * without the package present, we fall back to a flat View using the first
- * colour and emit a one-time dev warning so the omission is loud but
- * non-fatal.
+ * CSS gradient angles are measured clockwise from "to top", while the vectors
+ * live in a y-down 0..1 space, so the y delta is negated before the atan2.
  */
-let LinearGradientImpl = null;
-let warned = false;
-try {
-  LinearGradientImpl = require('react-native-linear-gradient').default;
-} catch {
-  // Optional peer; resolved lazily by consumers that need gradients.
-}
+export const gradientAngle = (start = DEFAULT_START, end = DEFAULT_END) => {
+  const degrees = Math.atan2(end.x - start.x, start.y - end.y) * 180 / Math.PI;
+  return round((degrees % 360 + 360) % 360);
+};
+export const toBackgroundImage = gradient => ({
+  type: 'linear-gradient',
+  direction: `${gradientAngle(gradient.start, gradient.end)}deg`,
+  colorStops: gradient.colors.map((color, index) => {
+    const location = gradient.locations?.[index];
+    return location === undefined ? {
+      color
+    } : {
+      color,
+      positions: [`${round(location * 100)}%`]
+    };
+  })
+});
 export const Gradient = ({
   gradient,
   style,
   children
-}) => {
-  if (LinearGradientImpl) {
-    return /*#__PURE__*/_jsx(LinearGradientImpl, {
-      colors: gradient.colors,
-      locations: gradient.locations,
-      start: gradient.start,
-      end: gradient.end,
-      style: style,
-      children: children
-    });
-  }
-  if (__DEV__ && !warned) {
-    warned = true;
-    console.warn('[@webority-technologies/mobile-ui] gradient prop set but react-native-linear-gradient is not installed. ' + 'Run `npm install react-native-linear-gradient` to enable.');
-  }
-  return /*#__PURE__*/_jsx(View, {
-    style: [{
-      backgroundColor: gradient.colors[0]
-    }, style],
-    children: children
-  });
-};
-export const isGradientAvailable = () => LinearGradientImpl != null;
+}) => /*#__PURE__*/_jsx(View, {
+  style: [{
+    experimental_backgroundImage: [toBackgroundImage(gradient)]
+  }, style],
+  children: children
+});
 //# sourceMappingURL=Gradient.js.map

package/lib/module/theme/index.js

@@ -13,6 +13,22 @@ const recompute = () => {
   currentTheme = overrides ? mergeTheme(base, overrides) : base;
   subscribers.forEach(cb => cb());
 };
+
+/**
+ * Set the override object for a mode (defaults to the active one).
+ *
+ * REPLACES that mode's overrides; it does not accumulate them. Calling
+ * `setTheme({ colors })` and then `setTheme({ spacing })` leaves ONLY the
+ * spacing override live — the colours silently revert to the base theme. Pass
+ * one complete override object per mode, or merge them yourself before calling:
+ *
+ *   setTheme({ ...myColors, ...mySpacing });
+ *
+ * This is deliberate (one override object per mode, last call wins) and is
+ * pinned by a test. Do not "fix" it to merge without treating that as the
+ * behaviour change it is: an app relying on replace to CLEAR a previous
+ * override would silently keep it.
+ */
 export const setTheme = (overrides, mode) => {
   if (mode) {
     currentMode = mode;
@@ -43,7 +59,7 @@ export const subscribeTheme = callback => {
   };
 };
 export { createAnimatedValue, setNativeValue } from "./animatedValue.js";
-export { Gradient, isGradientAvailable } from "./Gradient.js";
+export { Gradient, gradientAngle, toBackgroundImage } from "./Gradient.js";
 export { mergeTheme } from "./merge.js";
 export { ThemeProvider, useTheme, useThemeMode } from "./ThemeContext.js";
 export { fontFor } from "./textStyle.js";