@webority-technologies/mobile 0.0.1

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

@@ -0,0 +1,475 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Carousel = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/index.js");
+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); }
+/**
+ * Carousel — generic horizontal carousel with pagination, auto-play, and looping.
+ *
+ * Backed by a virtualized FlatList for memory efficiency. Pagination is driven
+ * by `Animated.event` with `useNativeDriver` so the indicator tracks the scroll
+ * gesture frame-perfectly without round-tripping to JS.
+ *
+ * USAGE:
+ *
+ * const ref = useRef<CarouselRef>(null);
+ * <Carousel
+ *   data={items}
+ *   renderItem={(item) => <Card {...item} />}
+ *   autoPlay
+ *   loop
+ * />
+ *
+ * ref.current?.scrollTo(2);
+ * ref.current?.next();
+ * ref.current?.prev();
+ */
+
+// We intentionally use a generic forwardRef wrapper — the inner component is
+// untyped at the generic level (forwardRef can't preserve generics in TS yet),
+// so we cast via a typed factory below.
+const CarouselInner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    data,
+    renderItem,
+    keyExtractor,
+    index: controlledIndex,
+    defaultIndex = 0,
+    onIndexChange,
+    autoPlay = false,
+    autoPlayInterval = 4000,
+    loop = false,
+    showPagination = true,
+    paginationStyle = 'dots',
+    itemWidth = 'screen',
+    spacing = 0,
+    containerStyle,
+    accessibilityLabel,
+    testID,
+    showThumbnails = false,
+    renderThumbnail
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const isControlled = typeof controlledIndex === 'number';
+  const isLooping = loop || autoPlay;
+  const [containerWidth, setContainerWidth] = (0, _react.useState)(() => _reactNative.Dimensions.get('window').width);
+  const resolvedItemWidth = itemWidth === 'screen' ? containerWidth : itemWidth;
+  const slideStride = resolvedItemWidth + spacing;
+  const flatListRef = (0, _react.useRef)(null);
+  const scrollX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const initialIndex = clamp(isControlled ? controlledIndex : defaultIndex, 0, Math.max(0, data.length - 1));
+  const [currentIndex, setCurrentIndex] = (0, _react.useState)(initialIndex);
+
+  // Refs for auto-play & idle resume.
+  const autoPlayTimerRef = (0, _react.useRef)(null);
+  const resumeTimerRef = (0, _react.useRef)(null);
+  const isUserDraggingRef = (0, _react.useRef)(false);
+  const currentIndexRef = (0, _react.useRef)(currentIndex);
+  currentIndexRef.current = currentIndex;
+  const setIndexJS = (0, _react.useCallback)(next => {
+    const safe = clamp(next, 0, Math.max(0, data.length - 1));
+    setCurrentIndex(prev => {
+      if (prev === safe) return prev;
+      onIndexChange?.(safe);
+      return safe;
+    });
+  }, [data.length, onIndexChange]);
+  const scrollTo = (0, _react.useCallback)((target, animated = true) => {
+    if (data.length === 0) return;
+    const safe = clamp(target, 0, data.length - 1);
+    flatListRef.current?.scrollToOffset({
+      offset: safe * slideStride,
+      animated
+    });
+    setIndexJS(safe);
+  }, [data.length, slideStride, setIndexJS]);
+  const next = (0, _react.useCallback)(() => {
+    if (data.length === 0) return;
+    const target = currentIndexRef.current + 1;
+    if (target >= data.length) {
+      if (isLooping) scrollTo(0, false);
+      return;
+    }
+    scrollTo(target, true);
+  }, [data.length, isLooping, scrollTo]);
+  const prev = (0, _react.useCallback)(() => {
+    if (data.length === 0) return;
+    const target = currentIndexRef.current - 1;
+    if (target < 0) {
+      if (isLooping) scrollTo(data.length - 1, false);
+      return;
+    }
+    scrollTo(target, true);
+  }, [data.length, isLooping, scrollTo]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    scrollTo,
+    next,
+    prev
+  }), [scrollTo, next, prev]);
+
+  // Drive controlled `index` prop.
+  (0, _react.useEffect)(() => {
+    if (!isControlled) return;
+    if (controlledIndex === currentIndex) return;
+    scrollTo(controlledIndex, true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [controlledIndex]);
+
+  // ─── Auto-play ───
+  const clearAutoPlay = (0, _react.useCallback)(() => {
+    if (autoPlayTimerRef.current) {
+      clearInterval(autoPlayTimerRef.current);
+      autoPlayTimerRef.current = null;
+    }
+  }, []);
+  const startAutoPlay = (0, _react.useCallback)(() => {
+    if (!autoPlay || data.length <= 1) return;
+    clearAutoPlay();
+    autoPlayTimerRef.current = setInterval(() => {
+      if (isUserDraggingRef.current) return;
+      const cur = currentIndexRef.current;
+      const target = cur + 1;
+      if (target >= data.length) {
+        scrollTo(0, false);
+      } else {
+        scrollTo(target, true);
+      }
+    }, autoPlayInterval);
+  }, [autoPlay, autoPlayInterval, data.length, scrollTo, clearAutoPlay]);
+  (0, _react.useEffect)(() => {
+    startAutoPlay();
+    return () => {
+      clearAutoPlay();
+      if (resumeTimerRef.current) clearTimeout(resumeTimerRef.current);
+    };
+  }, [startAutoPlay, clearAutoPlay]);
+
+  // ─── Scroll handlers ───
+  const onScroll = (0, _react.useMemo)(() => _reactNative.Animated.event([{
+    nativeEvent: {
+      contentOffset: {
+        x: scrollX
+      }
+    }
+  }], {
+    useNativeDriver: false
+  } // pagination width interpolation needs JS driver
+  ), [scrollX]);
+  const onMomentumScrollEnd = (0, _react.useCallback)(e => {
+    if (slideStride <= 0) return;
+    const offsetX = e.nativeEvent.contentOffset.x;
+    const idx = Math.round(offsetX / slideStride);
+    setIndexJS(idx);
+  }, [slideStride, setIndexJS]);
+  const onScrollBeginDrag = (0, _react.useCallback)(() => {
+    isUserDraggingRef.current = true;
+    clearAutoPlay();
+    if (resumeTimerRef.current) {
+      clearTimeout(resumeTimerRef.current);
+      resumeTimerRef.current = null;
+    }
+  }, [clearAutoPlay]);
+  const onScrollEndDrag = (0, _react.useCallback)(() => {
+    isUserDraggingRef.current = false;
+    if (!autoPlay) return;
+    if (resumeTimerRef.current) clearTimeout(resumeTimerRef.current);
+    resumeTimerRef.current = setTimeout(() => {
+      startAutoPlay();
+    }, 1000);
+  }, [autoPlay, startAutoPlay]);
+
+  // ─── A11y ───
+  const onAccessibilityAction = (0, _react.useCallback)(event => {
+    switch (event.nativeEvent.actionName) {
+      case 'increment':
+        next();
+        break;
+      case 'decrement':
+        prev();
+        break;
+    }
+  }, [next, prev]);
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const flatListRenderItem = (0, _react.useCallback)(({
+    item,
+    index: i
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      width: resolvedItemWidth,
+      marginRight: i === data.length - 1 ? 0 : spacing
+    },
+    accessibilityElementsHidden: i !== currentIndex,
+    importantForAccessibility: i === currentIndex ? 'yes' : 'no-hide-descendants',
+    children: renderItem(item, i)
+  }), [renderItem, resolvedItemWidth, spacing, data.length, currentIndex]);
+  const defaultKeyExtractor = (0, _react.useCallback)((_, i) => String(i), []);
+  const getItemLayout = (0, _react.useCallback)((_data, i) => ({
+    length: slideStride,
+    offset: slideStride * i,
+    index: i
+  }), [slideStride]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, containerStyle],
+    onLayout: e => setContainerWidth(e.nativeEvent.layout.width),
+    accessibilityRole: 'adjustable',
+    accessibilityLabel: accessibilityLabel ?? 'Carousel',
+    accessibilityValue: {
+      min: 0,
+      max: Math.max(0, data.length - 1),
+      now: currentIndex,
+      text: `Slide ${currentIndex + 1} of ${data.length}`
+    },
+    accessibilityActions: [{
+      name: 'increment'
+    }, {
+      name: 'decrement'
+    }],
+    onAccessibilityAction: onAccessibilityAction,
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+      ref: flatListRef,
+      data: data,
+      keyExtractor: keyExtractor ?? defaultKeyExtractor,
+      renderItem: flatListRenderItem,
+      horizontal: true,
+      pagingEnabled: itemWidth === 'screen' && spacing === 0,
+      snapToInterval: slideStride,
+      snapToAlignment: "start",
+      decelerationRate: "fast",
+      showsHorizontalScrollIndicator: false,
+      onScroll: onScroll,
+      scrollEventThrottle: 16,
+      onMomentumScrollEnd: onMomentumScrollEnd,
+      onScrollBeginDrag: onScrollBeginDrag,
+      onScrollEndDrag: onScrollEndDrag,
+      getItemLayout: getItemLayout,
+      initialScrollIndex: initialIndex,
+      bounces: false
+    }), showPagination && data.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Pagination, {
+      count: data.length,
+      currentIndex: currentIndex,
+      scrollX: scrollX,
+      slideStride: slideStride,
+      variant: paginationStyle,
+      theme: theme
+    }) : null, showThumbnails && data.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbnailStrip, {
+      data: data,
+      currentIndex: currentIndex,
+      renderThumbnail: renderThumbnail,
+      onSelect: idx => {
+        (0, _index2.triggerHaptic)('selection');
+        scrollTo(idx, true);
+      },
+      theme: theme
+    }) : null]
+  });
+});
+CarouselInner.displayName = 'Carousel';
+
+// Public typed factory — preserves the generic signature.
+const Carousel = exports.Carousel = CarouselInner;
+
+// ───────── Pagination ─────────
+
+const Pagination = ({
+  count,
+  currentIndex,
+  scrollX,
+  slideStride,
+  variant,
+  theme
+}) => {
+  if (variant === 'numbers') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: paginationStyles.numbersWrap,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [paginationStyles.numbersText, {
+          color: theme.colors.text.secondary,
+          fontSize: theme.typography.fontSize.sm,
+          fontWeight: theme.typography.fontWeight.medium
+        }],
+        accessibilityLabel: `Slide ${currentIndex + 1} of ${count}`,
+        children: `${currentIndex + 1} / ${count}`
+      })
+    });
+  }
+  const items = Array.from({
+    length: count
+  }, (_, i) => i);
+  const isBars = variant === 'bars';
+  const baseSize = isBars ? 24 : 6;
+  const expandedSize = isBars ? 36 : 16;
+  const height = isBars ? 3 : 6;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: paginationStyles.dotRow,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    children: items.map(i => {
+      const inputRange = [(i - 1) * slideStride, i * slideStride, (i + 1) * slideStride];
+      const widthAnim = scrollX.interpolate({
+        inputRange,
+        outputRange: [baseSize, expandedSize, baseSize],
+        extrapolate: 'clamp'
+      });
+      const opacityAnim = scrollX.interpolate({
+        inputRange,
+        outputRange: [0.5, 1, 0.5],
+        extrapolate: 'clamp'
+      });
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        style: [{
+          width: widthAnim,
+          height,
+          marginHorizontal: 4,
+          borderRadius: height / 2,
+          backgroundColor: i === currentIndex ? theme.colors.primary : theme.colors.border.primary,
+          opacity: opacityAnim
+        }]
+      }, i);
+    })
+  });
+};
+
+// ───────── Thumbnail Strip ─────────
+
+const ThumbnailStrip = ({
+  data,
+  currentIndex,
+  renderThumbnail,
+  onSelect,
+  theme
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    contentContainerStyle: thumbStyles.row,
+    accessibilityRole: "tablist",
+    children: data.map((item, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbnailItem, {
+      item: item,
+      index: i,
+      isActive: i === currentIndex,
+      renderThumbnail: renderThumbnail,
+      onPress: () => onSelect(i),
+      theme: theme
+    }, i))
+  });
+};
+const ThumbnailItem = ({
+  item,
+  index,
+  isActive,
+  renderThumbnail,
+  onPress,
+  theme
+}) => {
+  const scale = (0, _react.useRef)(new _reactNative.Animated.Value(isActive ? 1.1 : 1)).current;
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.spring(scale, {
+      toValue: isActive ? 1.1 : 1,
+      useNativeDriver: true,
+      friction: 6,
+      tension: 80
+    }).start();
+  }, [isActive, scale]);
+  const content = (0, _react.useMemo)(() => {
+    if (renderThumbnail) return renderThumbnail(item, index);
+    if (item && typeof item === 'object' && 'uri' in item && typeof item.uri === 'string') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        source: {
+          uri: item.uri
+        },
+        style: thumbStyles.image,
+        resizeMode: "cover"
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [thumbStyles.placeholder, {
+        backgroundColor: theme.colors.background.secondary
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: {
+          color: theme.colors.text.secondary,
+          fontSize: theme.typography.fontSize.xs,
+          fontWeight: theme.typography.fontWeight.semibold
+        },
+        children: index + 1
+      })
+    });
+  }, [item, index, renderThumbnail, theme]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    onPress: onPress,
+    accessibilityRole: "tab",
+    accessibilityState: {
+      selected: isActive
+    },
+    accessibilityLabel: `Go to slide ${index + 1}`,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [thumbStyles.thumb, {
+        borderColor: isActive ? theme.colors.primary : 'transparent',
+        transform: [{
+          scale
+        }]
+      }],
+      children: content
+    })
+  });
+};
+const thumbStyles = _reactNative.StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 8
+  },
+  thumb: {
+    width: 40,
+    height: 40,
+    marginHorizontal: 4,
+    borderRadius: 6,
+    borderWidth: 2,
+    overflow: 'hidden'
+  },
+  image: {
+    width: '100%',
+    height: '100%'
+  },
+  placeholder: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+
+// ───────── Helpers ─────────
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  container: {
+    width: '100%'
+  }
+});
+const paginationStyles = _reactNative.StyleSheet.create({
+  dotRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12
+  },
+  numbersWrap: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12
+  },
+  numbersText: {
+    textAlign: 'center'
+  }
+});
+var _default = exports.default = Carousel;
+//# sourceMappingURL=Carousel.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Carousel", {
+  enumerable: true,
+  get: function () {
+    return _Carousel.Carousel;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Carousel.default;
+  }
+});
+var _Carousel = _interopRequireWildcard(require("./Carousel.js"));
+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); }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Checkbox = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _hapticUtils = require("../../utils/hapticUtils.js");
+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 sizeMap = {
+  sm: 16,
+  md: 20,
+  lg: 24
+};
+const toneColor = (theme, tone) => {
+  switch (tone) {
+    case 'success':
+      return theme.colors.success;
+    case 'warning':
+      return theme.colors.warning;
+    case 'error':
+      return theme.colors.error;
+    case 'primary':
+    default:
+      return theme.colors.primary;
+  }
+};
+const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    checked,
+    onChange,
+    indeterminate = false,
+    disabled = false,
+    label,
+    size = 'md',
+    tone = 'primary',
+    accessibilityLabel,
+    haptic = 'selection',
+    style,
+    boxStyle,
+    testID,
+    ...rest
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const boxSize = sizeMap[size];
+  const fillColor = toneColor(theme, tone);
+  const isActive = checked || indeterminate;
+  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(isActive ? 1 : 0)).current;
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.spring(progress, {
+      toValue: isActive ? 1 : 0,
+      damping: theme.motion.spring.snappy.damping,
+      stiffness: theme.motion.spring.snappy.stiffness,
+      mass: theme.motion.spring.snappy.mass,
+      useNativeDriver: true
+    }).start();
+  }, [isActive, progress, theme.motion.spring.snappy]);
+  const scale = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1]
+  });
+  const handlePress = event => {
+    if (disabled) return;
+    if (haptic !== false) (0, _hapticUtils.triggerHaptic)(haptic);
+    onChange(!checked);
+    rest.onPressOut?.(event);
+  };
+  const accessibleLabel = accessibilityLabel ?? label;
+  const borderColor = disabled ? theme.colors.border.primary : isActive ? fillColor : theme.colors.border.primary;
+  const backgroundColor = disabled ? theme.colors.surface.disabled : isActive ? fillColor : 'transparent';
+  const glyphColor = disabled ? theme.colors.text.disabled : theme.colors.text.inverse;
+  const glyphFontSize = Math.round(boxSize * 0.72);
+  const indeterminateBarWidth = Math.round(boxSize * 0.55);
+  const indeterminateBarHeight = Math.max(2, Math.round(boxSize * 0.12));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    ref: ref,
+    onPress: handlePress,
+    disabled: disabled,
+    accessibilityRole: "checkbox",
+    accessibilityLabel: accessibleLabel,
+    accessibilityState: {
+      checked: indeterminate ? 'mixed' : checked,
+      disabled
+    },
+    testID: testID,
+    hitSlop: 6,
+    ...rest,
+    style: ({
+      pressed
+    }) => [styles.row, {
+      opacity: disabled ? 0.55 : pressed ? 0.85 : 1
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.box, {
+        width: boxSize,
+        height: boxSize,
+        borderRadius: theme.radius.xs,
+        borderColor,
+        backgroundColor
+      }, boxStyle],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        style: [styles.glyphWrap, {
+          opacity: progress,
+          transform: [{
+            scale
+          }]
+        }],
+        children: indeterminate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            width: indeterminateBarWidth,
+            height: indeterminateBarHeight,
+            borderRadius: indeterminateBarHeight / 2,
+            backgroundColor: glyphColor
+          }
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.check, {
+            color: glyphColor,
+            fontSize: glyphFontSize,
+            lineHeight: glyphFontSize + 2
+          }],
+          allowFontScaling: false,
+          children: '✓'
+        })
+      })
+    }), label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.label, {
+        color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
+        fontSize: theme.typography.fontSize.base
+      }],
+      numberOfLines: 2,
+      children: label
+    }) : null]
+  });
+});
+Checkbox.displayName = 'Checkbox';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  box: {
+    borderWidth: 1.5,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  glyphWrap: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  check: {
+    fontWeight: '700',
+    textAlign: 'center',
+    includeFontPadding: false
+  },
+  label: {
+    marginLeft: 10,
+    flexShrink: 1
+  }
+});
+var _default = exports.default = Checkbox;
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () {
+    return _Checkbox.Checkbox;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Checkbox.default;
+  }
+});
+var _Checkbox = _interopRequireWildcard(require("./Checkbox.js"));
+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); }
+//# sourceMappingURL=index.js.map