@webority-technologies/mobile 0.0.14 → 0.0.20

package/lib/commonjs/components/Button/Button.js

@@ -235,41 +235,48 @@ const toneFor = (theme, tone) => {
       };
   }
 };
+// Every variant carries the SAME borderWidth (with a transparent colour on
+// the non-outline ones). RN's layout treats border as part of the outer box,
+// so a 1-px border on outline-only would make outline buttons 2 px wider /
+// taller than solid / ghost buttons of identical content. Painting a
+// transparent border on the others equalises the geometry without visible
+// effect. Match the value with `BUTTON_BORDER_WIDTH` everywhere.
+const BUTTON_BORDER_WIDTH = 1;
 const variantFor = (theme, variant, toneSet, disabled) => {
   switch (variant) {
     case 'solid':
       return {
         backgroundColor: disabled ? theme.colors.surface.disabled : toneSet.base,
         borderColor: 'transparent',
-        borderWidth: 0,
+        borderWidth: BUTTON_BORDER_WIDTH,
         textColor: disabled ? theme.colors.text.disabled : toneSet.on
       };
     case 'outline':
       return {
         backgroundColor: 'transparent',
         borderColor: disabled ? theme.colors.border.primary : toneSet.base,
-        borderWidth: 1,
+        borderWidth: BUTTON_BORDER_WIDTH,
         textColor: disabled ? theme.colors.text.disabled : toneSet.base
       };
     case 'ghost':
       return {
         backgroundColor: 'transparent',
         borderColor: 'transparent',
-        borderWidth: 0,
+        borderWidth: BUTTON_BORDER_WIDTH,
         textColor: disabled ? theme.colors.text.disabled : toneSet.base
       };
     case 'link':
       return {
         backgroundColor: 'transparent',
         borderColor: 'transparent',
-        borderWidth: 0,
+        borderWidth: BUTTON_BORDER_WIDTH,
         textColor: disabled ? theme.colors.text.disabled : theme.colors.text.link
       };
     default:
       return {
         backgroundColor: toneSet.base,
         borderColor: 'transparent',
-        borderWidth: 0,
+        borderWidth: BUTTON_BORDER_WIDTH,
         textColor: toneSet.on
       };
   }

package/lib/commonjs/components/Card/Card.js

@@ -40,6 +40,11 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     accessibilityHint,
     accessibilityRole,
     style,
+    containerStyle,
+    headerStyle,
+    bodyStyle,
+    footerStyle,
+    borderRadius,
     testID,
     ...rest
   } = props;
@@ -60,9 +65,10 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     if (typeof gradient === 'string') return theme.gradients[gradient] ?? null;
     return gradient;
   }, [gradient, theme.gradients]);
-  const containerStyle = (0, _react.useMemo)(() => {
+  const resolvedBorderRadius = borderRadius ?? theme.radius[radius];
+  const computedContainerStyle = (0, _react.useMemo)(() => {
     const base = {
-      borderRadius: theme.radius[radius],
+      borderRadius: resolvedBorderRadius,
       // When an image header is present we move padding to the inner content
       // wrapper so the image can occupy the card's full top edge.
       padding: hasImage ? 0 : contentPadding,
@@ -73,7 +79,7 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
         return {
           ...base,
           backgroundColor: theme.colors.background.elevated,
-          borderWidth: 1,
+          borderWidth: theme.colors.border.width,
           borderColor: theme.colors.border.primary
         };
       case 'filled':
@@ -89,9 +95,9 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
           ...theme.shadows[elevation]
         };
     }
-  }, [theme, variant, elevation, radius, padding, hasImage, contentPadding]);
+  }, [theme, variant, elevation, resolvedBorderRadius, padding, hasImage, contentPadding]);
   const imageStyle = (0, _react.useMemo)(() => {
-    const topRadius = theme.radius[radius];
+    const topRadius = resolvedBorderRadius;
     const dimensions = typeof imageAspectRatio === 'number' ? {
       width: '100%',
       aspectRatio: imageAspectRatio
@@ -106,16 +112,16 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
       borderBottomLeftRadius: 0,
       borderBottomRightRadius: 0
     };
-  }, [theme, radius, imageAspectRatio, imageHeight]);
+  }, [resolvedBorderRadius, imageAspectRatio, imageHeight]);
   const innerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [header ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.header,
+      style: [styles.header, headerStyle],
       children: header
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: header || footer ? styles.body : null,
+      style: [header || footer ? styles.body : null, bodyStyle],
       children: children
     }), footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.footer,
+      style: [styles.footer, footerStyle],
       children: footer
     }) : null]
   });
@@ -149,7 +155,9 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
   let rendered;
   if (isInteractive) {
     const handlePress = event => {
-      (0, _hapticUtils.triggerHaptic)('selection');
+      if (theme.components.card?.pressHaptic ?? false) {
+        (0, _hapticUtils.triggerHaptic)('selection');
+      }
       onPress?.(event);
     };
     rendered = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
@@ -171,7 +179,7 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
         accessibilityLabel: accessibilityLabel,
         accessibilityHint: accessibilityHint,
         testID: testID,
-        style: [containerStyle, style],
+        style: [computedContainerStyle, style, containerStyle],
         ...rest,
         children: content
       })
@@ -183,20 +191,102 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
       accessibilityHint: accessibilityHint,
       accessibilityRole: accessibilityRole,
       testID: testID,
-      style: [containerStyle, style],
+      style: [computedContainerStyle, style, containerStyle],
       children: content
     });
   }
   if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      children: rendered
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardSkeleton, {
+      ...props
     });
   }
   return rendered;
 });
 Card.displayName = 'Card';
+
+/**
+ * Placeholder shape for `<Card>`. Preserves outer chrome (variant, radius,
+ * padding, image area) and fills the interior with header / body / footer
+ * skeletons proportional to whichever slots the consumer actually uses.
+ */
+const CardSkeleton = ({
+  variant = 'elevated',
+  elevation: _elevation,
+  radius = 'lg',
+  padding = 'md',
+  header,
+  footer,
+  imageSource,
+  imageHeight = 160,
+  imageAspectRatio,
+  borderRadius,
+  containerStyle,
+  headerStyle,
+  bodyStyle,
+  footerStyle,
+  style
+}) => {
+  const theme = (0, _index.useTheme)();
+  const padToken = paddingMap[padding];
+  const padValue = theme.spacing[padToken];
+  const cornerRadius = borderRadius ?? theme.radius[radius];
+  const backgroundColor = variant === 'outlined' || variant === 'filled' ? theme.colors.background.elevated : theme.colors.background.elevated;
+  const borderWidth = variant === 'outlined' ? 1 : 0;
+  const borderColor = variant === 'outlined' ? theme.colors.border.primary : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      backgroundColor,
+      borderRadius: cornerRadius,
+      borderWidth,
+      borderColor,
+      overflow: 'hidden'
+    }, containerStyle, style],
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: [imageSource !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+      width: "100%",
+      height: imageAspectRatio ? undefined : imageHeight,
+      style: imageAspectRatio ? {
+        aspectRatio: imageAspectRatio,
+        width: '100%'
+      } : undefined
+    }) : null, header !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [{
+        padding: padValue,
+        paddingBottom: theme.spacing.sm
+      }, headerStyle],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+        shape: "text",
+        width: "60%",
+        height: 18
+      })
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [{
+        padding: padValue
+      }, bodyStyle],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonText, {
+        lines: 3,
+        fontSize: 14,
+        lastLineWidth: "55%"
+      })
+    }), footer !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [{
+        padding: padValue,
+        paddingTop: theme.spacing.sm,
+        flexDirection: 'row'
+      }, footerStyle],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+        width: 88,
+        height: 32,
+        shape: "rounded"
+      })
+    }) : null]
+  });
+};
+CardSkeleton.displayName = 'CardSkeleton';
+Card.Skeleton = CardSkeleton;
 const buildStyles = theme => _reactNative.StyleSheet.create({
   header: {
     marginBottom: theme.spacing.md

package/lib/commonjs/components/Carousel/Carousel.js

@@ -218,18 +218,9 @@ const CarouselInner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     index: i
   }), [slideStride]);
   if (loading) {
-    const slideWidth = itemWidth === 'screen' ? containerWidth || 320 : itemWidth;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      style: [styles.container, containerStyle],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          width: slideWidth,
-          height: 160,
-          borderRadius: 12
-        }
-      })
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselSkeleton, {
+      ...props,
+      containerWidth: containerWidth
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -290,8 +281,71 @@ const CarouselInner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
 });
 CarouselInner.displayName = 'Carousel';
 
+/**
+ * Placeholder shape for `<Carousel>`. Renders one full-width slide skeleton
+ * plus pagination dots underneath, so the visual footprint matches the
+ * loaded state. `containerWidth` is forwarded from the live component when
+ * known; otherwise falls back to a 320 default.
+ */
+const CarouselSkeleton = ({
+  itemWidth = 'screen',
+  showPagination = true,
+  paginationStyle = 'dots',
+  containerStyle,
+  containerWidth
+}) => {
+  const slideWidth = itemWidth === 'screen' ? containerWidth || 320 : itemWidth;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [carouselSkeletonStyles.container, containerStyle],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Skeleton, {
+      width: slideWidth,
+      height: 160,
+      radius: "md"
+    }), showPagination ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [carouselSkeletonStyles.paginationRow, {
+        marginTop: 12
+      }],
+      children: Array.from({
+        length: 3
+      }).map((_, i) => paginationStyle === 'numbers' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Skeleton, {
+        width: 24,
+        height: 16,
+        radius: "sm",
+        style: {
+          marginHorizontal: 4
+        }
+      }, `sk-pg-${i}`) : paginationStyle === 'bars' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Skeleton, {
+        width: 20,
+        height: 4,
+        radius: 2,
+        style: {
+          marginHorizontal: 3
+        }
+      }, `sk-pg-${i}`) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Skeleton, {
+        shape: "circle",
+        width: 8,
+        height: 8,
+        style: {
+          marginHorizontal: 4
+        }
+      }, `sk-pg-${i}`))
+    }) : null]
+  });
+};
+CarouselSkeleton.displayName = 'CarouselSkeleton';
+const carouselSkeletonStyles = _reactNative.StyleSheet.create({
+  container: {
+    alignItems: 'center'
+  },
+  paginationRow: {
+    flexDirection: 'row',
+    justifyContent: 'center'
+  }
+});
+
 // Public typed factory — preserves the generic signature.
 const Carousel = exports.Carousel = CarouselInner;
+Carousel.Skeleton = CarouselSkeleton;
 
 // ───────── Pagination ─────────
 

package/lib/commonjs/components/Checkbox/Checkbox.js

@@ -41,13 +41,17 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((props,
     haptic = 'selection',
     style,
     boxStyle,
+    checkIconStyle,
+    indeterminateBarStyle,
+    containerStyle,
+    labelStyle,
     testID,
     ...rest
   } = props;
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const boxSize = theme.components.checkbox?.[size]?.boxSize ?? sizeMap[size];
-  const checkboxBorderWidth = theme.components.checkbox?.borderWidth ?? 1.5;
+  const checkboxBorderWidth = theme.colors.border.width;
   const checkboxLabelGap = theme.components.checkbox?.labelGap ?? 10;
   const fillColor = toneColor(theme, tone);
   const isActive = checked || indeterminate;
@@ -67,7 +71,7 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((props,
   });
   const handlePress = event => {
     if (disabled) return;
-    if (haptic !== false) (0, _hapticUtils.triggerHaptic)(haptic);
+    if (haptic !== false && theme.components.checkbox?.pressHaptic) (0, _hapticUtils.triggerHaptic)(haptic);
     onChange(!checked);
     rest.onPressOut?.(event);
   };
@@ -95,7 +99,7 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((props,
       pressed
     }) => [styles.row, {
       opacity: disabled ? 0.55 : pressed ? 0.85 : 1
-    }, style],
+    }, containerStyle, style],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.box, {
         width: boxSize,
@@ -113,18 +117,18 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((props,
           }]
         }],
         children: indeterminate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: {
+          style: [{
             width: indeterminateBarWidth,
             height: indeterminateBarHeight,
             borderRadius: indeterminateBarHeight / 2,
             backgroundColor: glyphColor
-          }
+          }, indeterminateBarStyle]
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.check, {
             color: glyphColor,
             fontSize: glyphFontSize,
             lineHeight: glyphFontSize + 2
-          }],
+          }, checkIconStyle],
           allowFontScaling: false,
           children: '✓'
         })
@@ -134,7 +138,7 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((props,
         marginLeft: checkboxLabelGap,
         color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
         fontSize: theme.typography.fontSize.base
-      }],
+      }, labelStyle],
       numberOfLines: 2,
       children: label
     }) : null]

package/lib/commonjs/components/Chip/Chip.js

@@ -106,6 +106,9 @@ const Chip = exports.Chip = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     accessibilityLabel,
     style,
     textStyle,
+    containerStyle,
+    closeButtonStyle,
+    closeIconStyle,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
@@ -144,15 +147,15 @@ const Chip = exports.Chip = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     if (selected) return tones.selectedOn;
     return tones.on;
   })();
-  const borderWidth = isFilled ? selected ? 0 : 0 : 1;
+  const borderWidth = isFilled ? 0 : theme.colors.border.width;
   const handlePress = () => {
     if (!isPressable) return;
-    (0, _hapticUtils.triggerHaptic)('selection');
+    if (theme.components.chip?.pressHaptic) (0, _hapticUtils.triggerHaptic)('selection');
     onPress?.();
   };
   const handleClose = () => {
     if (disabled) return;
-    (0, _hapticUtils.triggerHaptic)('impactLight');
+    if (theme.components.chip?.closeHaptic) (0, _hapticUtils.triggerHaptic)('impactLight');
     onClose?.();
   };
   const a11yLabel = accessibilityLabel ?? label;
@@ -188,14 +191,14 @@ const Chip = exports.Chip = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
         borderRadius: sz.closeSize / 2,
         marginLeft: sz.gap,
         backgroundColor: pressed ? theme.colors.surface.pressed : theme.colors.surface.hovered
-      }],
+      }, closeButtonStyle],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: {
+        style: [{
           color: textColor,
           fontSize: sz.closeFont,
           ...(0, _index.fontFor)(theme, 'bold'),
           lineHeight: sz.closeFont + 2
-        },
+        }, closeIconStyle],
         allowFontScaling: false,
         children: '×'
       })
@@ -241,14 +244,14 @@ const Chip = exports.Chip = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
           pressed
         }) => [styles.base, baseStyle, pressed && !isFilled ? {
           backgroundColor: theme.colors.surface.pressed
-        } : null, style],
+        } : null, containerStyle, style],
         children: content
       })
     });
   } else {
     rendered = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       ref: ref,
-      style: [styles.base, baseStyle, style],
+      style: [styles.base, baseStyle, containerStyle, style],
       accessible: true,
       accessibilityRole: "text",
       accessibilityLabel: a11yLabel,
@@ -261,15 +264,44 @@ const Chip = exports.Chip = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     });
   }
   if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      children: rendered
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ChipSkeleton, {
+      ...props
     });
   }
   return rendered;
 });
 Chip.displayName = 'Chip';
+
+/**
+ * Placeholder shape for `<Chip>`. Pill of the configured size with a label
+ * skeleton inside; leading icon and close button are reserved when the
+ * consumer would normally provide them, so the chip width matches what it
+ * would be when loaded.
+ */
+const ChipSkeleton = ({
+  label,
+  size = 'md',
+  leftIcon,
+  onClose,
+  style,
+  containerStyle
+}) => {
+  const sz = sizeMap[size];
+  const labelWidth = Math.max(40, Math.min(120, (label ?? '').length * 7));
+  const pillHeight = sz.minHeight;
+  const pillRadius = pillHeight / 2;
+  const totalWidth = labelWidth + sz.paddingH * 2 + (leftIcon !== undefined ? sz.gap + 14 : 0) + (onClose !== undefined ? sz.gap + sz.closeSize : 0);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+    width: totalWidth,
+    height: pillHeight,
+    radius: pillRadius,
+    style: [{
+      alignSelf: 'flex-start'
+    }, containerStyle, style]
+  });
+};
+ChipSkeleton.displayName = 'ChipSkeleton';
+Chip.Skeleton = ChipSkeleton;
 const styles = _reactNative.StyleSheet.create({
   base: {
     alignSelf: 'flex-start',