@webority-technologies/mobile 0.0.6 → 0.0.8

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

@@ -3,6 +3,7 @@
 import React, { Children, cloneElement, isValidElement, useState } from 'react';
 import { Image, StyleSheet, Text, View } from 'react-native';
 import { Skeleton } from "./Skeleton.js";
+import { SkeletonSkip } from "./SkeletonSkip.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const flattenStyle = style => {
   if (!style) return {};
@@ -22,7 +23,7 @@ const resolveRadius = (raw, fallback) => {
   if (typeof raw === 'number') return raw;
   return fallback;
 };
-const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
+const skeletonizeNode = (node, variant, speed, colors, keyHint = 'r') => {
   if (node == null || typeof node === 'boolean') return null;
   if (typeof node === 'string' || typeof node === 'number') {
     return /*#__PURE__*/_jsx(Skeleton, {
@@ -30,11 +31,12 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
       height: 14,
       radius: "sm",
       variant: variant,
-      speed: speed
+      speed: speed,
+      colors: colors
     }, `${keyHint}-text`);
   }
   if (Array.isArray(node)) {
-    return Children.map(node, (child, index) => skeletonizeNode(child, variant, speed, `${keyHint}-${index}`));
+    return Children.map(node, (child, index) => skeletonizeNode(child, variant, speed, colors, `${keyHint}-${index}`));
   }
   if (! /*#__PURE__*/isValidElement(node)) return null;
   const element = node;
@@ -42,6 +44,13 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
   const elementStyle = flattenStyle(props.style);
   const elementType = element.type;
 
+  // <SkeletonSkip /> → opt-out marker; render its children unchanged
+  if (elementType === SkeletonSkip) {
+    return /*#__PURE__*/cloneElement(element, {
+      key: `${keyHint}-skip`
+    });
+  }
+
   // <Image /> → fixed-size skeleton block matching style.width/height/borderRadius
   if (elementType === Image) {
     const width = resolveWidth(elementStyle.width, '100%');
@@ -53,6 +62,7 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
       radius: radius,
       variant: variant,
       speed: speed,
+      colors: colors,
       style: {
         margin: typeof elementStyle.margin === 'number' ? elementStyle.margin : undefined
       }
@@ -69,6 +79,7 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
       radius: "sm",
       variant: variant,
       speed: speed,
+      colors: colors,
       style: {
         marginVertical: 2
       }
@@ -79,7 +90,7 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
   if (props.children != null) {
     return /*#__PURE__*/cloneElement(element, {
       key: `${keyHint}-w`
-    }, skeletonizeNode(props.children, variant, speed, `${keyHint}-c`));
+    }, skeletonizeNode(props.children, variant, speed, colors, `${keyHint}-c`));
   }
 
   // Leaf <View /> with explicit dimensions → skeleton block
@@ -92,7 +103,8 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
       height: height,
       radius: radius,
       variant: variant,
-      speed: speed
+      speed: speed,
+      colors: colors
     }, `${keyHint}-vw`);
   }
 
@@ -105,10 +117,11 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
 const SkeletonContent = ({
   loading,
   children,
-  variant = 'shimmer',
-  speed = 'normal',
+  variant,
+  speed,
   mode = 'auto',
   count = 1,
+  colors,
   style,
   testID
 }) => {
@@ -128,6 +141,7 @@ const SkeletonContent = ({
       testID: testID,
       variant: variant,
       speed: speed,
+      colors: colors,
       children: repeated
     });
   }
@@ -138,7 +152,7 @@ const SkeletonContent = ({
     accessibilityLabel: "Loading",
     accessibilityRole: "progressbar",
     accessibilityLiveRegion: "polite",
-    children: skeletonizeNode(repeated, variant, speed)
+    children: skeletonizeNode(repeated, variant, speed, colors)
   });
 };
 SkeletonContent.displayName = 'SkeletonContent';
@@ -146,6 +160,7 @@ const BlockSkeleton = ({
   children,
   variant,
   speed,
+  colors,
   style,
   testID
 }) => {
@@ -182,7 +197,8 @@ const BlockSkeleton = ({
         height: size.height,
         radius: "md",
         variant: variant,
-        speed: speed
+        speed: speed,
+        colors: colors
       })
     }) : null]
   });

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

@@ -3,6 +3,7 @@
 import React from 'react';
 import { FlatList, View } from 'react-native';
 import { SkeletonContent } from "./SkeletonContent.js";
+import { useSkeletonDefaults } from "./SkeletonProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Drop-in FlatList replacement that renders `placeholderCount` skeleton rows while
@@ -27,9 +28,10 @@ function SkeletonListInner(props) {
     data,
     renderItem,
     renderPlaceholder,
-    placeholderCount = 3,
+    placeholderCount,
     variant,
     speed,
+    colors,
     placeholderContainerStyle,
     horizontal,
     contentContainerStyle,
@@ -37,9 +39,11 @@ function SkeletonListInner(props) {
     testID,
     ...rest
   } = props;
+  const defaults = useSkeletonDefaults();
+  const resolvedCount = placeholderCount ?? defaults.placeholderCount ?? 3;
   if (loading) {
     const slots = Array.from({
-      length: Math.max(0, placeholderCount)
+      length: Math.max(0, resolvedCount)
     }, (_, index) => /*#__PURE__*/_jsx(React.Fragment, {
       children: renderPlaceholder ? renderPlaceholder(index) : null
     }, `sk-list-${index}`));
@@ -47,6 +51,7 @@ function SkeletonListInner(props) {
       loading: true,
       variant: variant,
       speed: speed,
+      colors: colors,
       style: style,
       testID: testID,
       children: /*#__PURE__*/_jsx(View, {

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

@@ -0,0 +1,41 @@
+"use strict";
+
+import React, { createContext, useContext, useMemo } from 'react';
+
+/**
+ * Per-instance color override for a skeleton. `background` is the resting tone
+ * of the placeholder; `highlight` is the moving shimmer band (or pulse fade).
+ * Either can be omitted — missing keys fall back to the active theme.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const SkeletonDefaultsContext = /*#__PURE__*/createContext({});
+export const SkeletonProvider = ({
+  children,
+  variant,
+  speed,
+  placeholderCount,
+  radius,
+  colors
+}) => {
+  const value = useMemo(() => ({
+    variant,
+    speed,
+    placeholderCount,
+    radius,
+    colors
+  }), [variant, speed, placeholderCount, radius, colors]);
+  return /*#__PURE__*/_jsx(SkeletonDefaultsContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+SkeletonProvider.displayName = 'SkeletonProvider';
+
+/**
+ * Read the current SkeletonProvider defaults. Returns an empty object when no
+ * provider is mounted, so the skeleton primitives still work outside of one.
+ */
+export const useSkeletonDefaults = () => {
+  return useContext(SkeletonDefaultsContext);
+};
+//# sourceMappingURL=SkeletonProvider.js.map

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

@@ -0,0 +1,31 @@
+"use strict";
+
+import React from 'react';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Pass-through marker that opts a subtree out of `SkeletonContent`'s auto walker.
+ *
+ * The walker recognizes this element type and returns its children unchanged
+ * even while `loading` is true. Use it to keep a specific Text/Image/View
+ * visible inside a skeleton block — e.g., a brand mark, a status icon, or a
+ * decorative element that should never shimmer.
+ *
+ * @example
+ *   <SkeletonContent loading>
+ *     <View style={styles.card}>
+ *       <SkeletonSkip>
+ *         <Image source={Logo} style={styles.brandMark} />
+ *       </SkeletonSkip>
+ *       <Text>Loading…</Text>
+ *     </View>
+ *   </SkeletonContent>
+ */
+export const SkeletonSkip = ({
+  children
+}) => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+};
+SkeletonSkip.displayName = 'SkeletonSkip';
+//# sourceMappingURL=SkeletonSkip.js.map

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

@@ -3,4 +3,6 @@
 export { Skeleton, SkeletonCircle, SkeletonText, SkeletonAvatar, SkeletonCard, SkeletonListItem, default } from "./Skeleton.js";
 export { SkeletonContent } from "./SkeletonContent.js";
 export { SkeletonList } from "./SkeletonList.js";
+export { SkeletonProvider, useSkeletonDefaults } from "./SkeletonProvider.js";
+export { SkeletonSkip } from "./SkeletonSkip.js";
 //# sourceMappingURL=index.js.map

package/lib/module/components/Switch/Switch.js

@@ -48,6 +48,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     label,
     accessibilityLabel,
     haptic = 'selection',
+    bounce = false,
     style,
     trackStyle,
     thumbStyle,
@@ -55,7 +56,11 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     ...rest
   } = props;
   const theme = useTheme();
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.switch?.[size] ?? {})
+  };
+  const switchThumbColor = theme.components.switch?.thumbColor ?? '#FFFFFF';
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const offTrackColor = theme.mode === 'dark' ? theme.colors.secondary : theme.colors.surface.disabled;
   const onTrackColor = toneColor(theme, tone);
@@ -88,6 +93,28 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     inputRange: [0, 1],
     outputRange: [offTrackColor, onTrackColor]
   });
+  const bounceScale = useRef(new Animated.Value(1)).current;
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    if (!bounce) return;
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    Animated.sequence([Animated.spring(bounceScale, {
+      toValue: 1.15,
+      damping: 10,
+      stiffness: 220,
+      mass: 1,
+      useNativeDriver: true
+    }), Animated.spring(bounceScale, {
+      toValue: 1,
+      damping: 14,
+      stiffness: 240,
+      mass: 1,
+      useNativeDriver: true
+    })]).start();
+  }, [value, bounce, bounceScale]);
   const handlePress = event => {
     if (disabled) return;
     if (haptic !== false) triggerHaptic(haptic);
@@ -122,11 +149,14 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       }, trackStyle],
       children: /*#__PURE__*/_jsx(Animated.View, {
         style: [styles.thumb, theme.shadows.sm, {
+          backgroundColor: switchThumbColor,
           width: sizeStyles.thumbSize,
           height: sizeStyles.thumbSize,
           borderRadius: sizeStyles.thumbSize / 2,
           transform: [{
             translateX
+          }, {
+            scale: bounceScale
           }]
         }, thumbStyle]
       })
@@ -155,7 +185,6 @@ const buildStyles = _theme => StyleSheet.create({
     justifyContent: 'center'
   },
   thumb: {
-    backgroundColor: '#FFFFFF',
     position: 'absolute',
     top: 2
   },

package/lib/module/components/Toast/Toast.js

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useMemo, useRef } from 'react';
 import { Animated, PanResponder, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SWIPE_DISMISS_THRESHOLD = 80;
 const SWIPE_VELOCITY_THRESHOLD = 0.5;
@@ -18,6 +18,11 @@ const Toast = ({
   const position = toast.position ?? 'bottom';
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const tint = useMemo(() => tintFor(theme, variant), [theme, variant]);
+  const toastTokens = theme.components.toast;
+  const iconCircleSize = toastTokens?.iconCircleSize ?? 28;
+  const iconCircleBorderRadius = toastTokens?.iconCircleBorderRadius ?? 14;
+  const iconGlyphFontSize = toastTokens?.iconGlyphFontSize ?? 16;
+  const tintBarWidth = toastTokens?.tintBarWidth ?? 4;
   const enterFrom = position === 'top' ? -120 : 120;
   const translateY = useRef(new Animated.Value(enterFrom)).current;
   const translateX = useRef(new Animated.Value(0)).current;
@@ -107,11 +112,15 @@ const Toast = ({
     if (!glyph) return null;
     return /*#__PURE__*/_jsx(View, {
       style: [styles.iconCircle, {
+        width: iconCircleSize,
+        height: iconCircleSize,
+        borderRadius: iconCircleBorderRadius,
         backgroundColor: tint + '22'
       }],
       children: /*#__PURE__*/_jsx(Text, {
         style: [styles.iconGlyph, {
-          color: tint
+          color: tint,
+          fontSize: iconGlyphFontSize
         }],
         accessible: false,
         children: glyph
@@ -138,9 +147,10 @@ const Toast = ({
       }, {
         scale: stackScale
       }]
-    }],
+    }, toast.style],
     children: [/*#__PURE__*/_jsx(View, {
       style: [styles.tintBar, {
+        width: tintBarWidth,
         backgroundColor: tint
       }]
     }), /*#__PURE__*/_jsxs(View, {
@@ -151,8 +161,8 @@ const Toast = ({
           style: [styles.message, {
             color: theme.colors.text.primary,
             fontSize: theme.typography.fontSize.base,
-            fontWeight: theme.typography.fontWeight.semibold
-          }],
+            ...fontFor(theme, 'semibold')
+          }, toast.textStyle],
           numberOfLines: 2,
           children: toast.message
         }), toast.description ? /*#__PURE__*/_jsx(Text, {
@@ -176,7 +186,7 @@ const Toast = ({
           style: {
             color: tint,
             fontSize: theme.typography.fontSize.sm,
-            fontWeight: theme.typography.fontWeight.semibold
+            ...fontFor(theme, 'semibold')
           },
           numberOfLines: 1,
           children: toast.action.label
@@ -224,8 +234,7 @@ const buildStyles = _theme => StyleSheet.create({
     position: 'absolute',
     left: 0,
     top: 0,
-    bottom: 0,
-    width: 4
+    bottom: 0
   },
   row: {
     flexDirection: 'row',
@@ -233,15 +242,11 @@ const buildStyles = _theme => StyleSheet.create({
     paddingLeft: 8
   },
   iconCircle: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
     alignItems: 'center',
     justifyContent: 'center',
     marginRight: 12
   },
   iconGlyph: {
-    fontSize: 16,
     fontWeight: '700',
     lineHeight: 18
   },

package/lib/module/components/index.js

@@ -36,7 +36,7 @@ export { SearchBar } from "./SearchBar/index.js";
 export { SegmentedControl } from "./SegmentedControl/index.js";
 export { Select } from "./Select/index.js";
 export { Stepper } from "./Stepper/index.js";
-export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonContent, SkeletonList, SkeletonListItem, SkeletonText } from "./Skeleton/index.js";
+export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonContent, SkeletonList, SkeletonListItem, SkeletonProvider, SkeletonSkip, SkeletonText, useSkeletonDefaults } from "./Skeleton/index.js";
 export { Slider } from "./Slider/index.js";
 export { Swipeable } from "./Swipeable/index.js";
 export { Switch } from "./Switch/index.js";

package/lib/module/theme/Gradient.js

@@ -0,0 +1,50 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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.
+ */
+let LinearGradientImpl = null;
+let warned = false;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  LinearGradientImpl = require('react-native-linear-gradient').default;
+} catch {
+  // Optional peer; resolved lazily by consumers that need gradients.
+}
+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] 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;
+//# sourceMappingURL=Gradient.js.map

package/lib/module/theme/index.js

@@ -45,4 +45,6 @@ export const subscribeTheme = callback => {
 export { ThemeProvider, useTheme, useThemeMode } from "./ThemeContext.js";
 export { lightTheme, darkTheme } from "./tokens.js";
 export { mergeTheme } from "./merge.js";
+export { fontFor } from "./textStyle.js";
+export { Gradient, isGradientAvailable } from "./Gradient.js";
 //# sourceMappingURL=index.js.map

package/lib/module/theme/textStyle.js

@@ -0,0 +1,32 @@
+"use strict";
+
+const FAMILY_KEY = {
+  normal: 'regular',
+  medium: 'medium',
+  semibold: 'semibold',
+  bold: 'bold'
+};
+
+/**
+ * Resolve text-weight style for the active theme.
+ *
+ * When the consumer registers a brand `theme.typography.fontFamily.<weight>`,
+ * we set `fontFamily` and leave `fontWeight` undefined — RN can't combine the
+ * two reliably across iOS/Android once a custom face is in play, so the brand
+ * file controls the weight glyph itself. Falls back to `fontWeight` when no
+ * brand font is registered for that weight.
+ *
+ * Note: the fontWeight scale uses `normal` while FontFamilyScale uses
+ * `regular` (the conventional font-name suffix). The helper maps between
+ * them transparently.
+ */
+export const fontFor = (theme, weight) => {
+  const family = theme.typography.fontFamily?.[FAMILY_KEY[weight]];
+  if (family) return {
+    fontFamily: family
+  };
+  return {
+    fontWeight: theme.typography.fontWeight[weight]
+  };
+};
+//# sourceMappingURL=textStyle.js.map