@webority-technologies/mobile 0.0.1

package/lib/module/components/Checkbox/Checkbox.js

@@ -0,0 +1,161 @@
+"use strict";
+
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 = /*#__PURE__*/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 = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const boxSize = sizeMap[size];
+  const fillColor = toneColor(theme, tone);
+  const isActive = checked || indeterminate;
+  const progress = useRef(new Animated.Value(isActive ? 1 : 0)).current;
+  useEffect(() => {
+    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) 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__*/_jsxs(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__*/_jsx(View, {
+      style: [styles.box, {
+        width: boxSize,
+        height: boxSize,
+        borderRadius: theme.radius.xs,
+        borderColor,
+        backgroundColor
+      }, boxStyle],
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.glyphWrap, {
+          opacity: progress,
+          transform: [{
+            scale
+          }]
+        }],
+        children: indeterminate ? /*#__PURE__*/_jsx(View, {
+          style: {
+            width: indeterminateBarWidth,
+            height: indeterminateBarHeight,
+            borderRadius: indeterminateBarHeight / 2,
+            backgroundColor: glyphColor
+          }
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: [styles.check, {
+            color: glyphColor,
+            fontSize: glyphFontSize,
+            lineHeight: glyphFontSize + 2
+          }],
+          allowFontScaling: false,
+          children: '✓'
+        })
+      })
+    }), label ? /*#__PURE__*/_jsx(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 => 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
+  }
+});
+export { Checkbox };
+export default Checkbox;
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Checkbox, default } from "./Checkbox.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/Chip/Chip.js

@@ -0,0 +1,268 @@
+"use strict";
+
+import React, { forwardRef, useMemo } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { usePressAnimation } from "../../hooks/usePressAnimation.js";
+import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const toneFor = (theme, tone) => {
+  switch (tone) {
+    case 'primary':
+      return {
+        base: theme.colors.primaryMuted,
+        on: theme.colors.primary,
+        border: theme.colors.primary,
+        selectedBg: theme.colors.primaryMuted,
+        selectedOn: theme.colors.primary,
+        selectedBorder: theme.colors.primary
+      };
+    case 'success':
+      return {
+        base: theme.colors.background.tertiary,
+        on: theme.colors.success,
+        border: theme.colors.success,
+        selectedBg: theme.colors.primaryMuted,
+        selectedOn: theme.colors.primary,
+        selectedBorder: theme.colors.primary
+      };
+    case 'warning':
+      return {
+        base: theme.colors.background.tertiary,
+        on: theme.colors.warning,
+        border: theme.colors.warning,
+        selectedBg: theme.colors.primaryMuted,
+        selectedOn: theme.colors.primary,
+        selectedBorder: theme.colors.primary
+      };
+    case 'error':
+      return {
+        base: theme.colors.background.tertiary,
+        on: theme.colors.error,
+        border: theme.colors.error,
+        selectedBg: theme.colors.primaryMuted,
+        selectedOn: theme.colors.primary,
+        selectedBorder: theme.colors.primary
+      };
+    case 'info':
+      return {
+        base: theme.colors.background.tertiary,
+        on: theme.colors.info,
+        border: theme.colors.info,
+        selectedBg: theme.colors.primaryMuted,
+        selectedOn: theme.colors.primary,
+        selectedBorder: theme.colors.primary
+      };
+    case 'neutral':
+    default:
+      return {
+        base: theme.colors.background.tertiary,
+        on: theme.colors.text.primary,
+        border: theme.colors.border.primary,
+        selectedBg: theme.colors.primaryMuted,
+        selectedOn: theme.colors.primary,
+        selectedBorder: theme.colors.primary
+      };
+  }
+};
+const sizeMap = {
+  sm: {
+    paddingH: 10,
+    paddingV: 4,
+    fontSize: 12,
+    minHeight: 26,
+    closeSize: 16,
+    closeFont: 12,
+    gap: 6
+  },
+  md: {
+    paddingH: 12,
+    paddingV: 6,
+    fontSize: 13,
+    minHeight: 32,
+    closeSize: 18,
+    closeFont: 13,
+    gap: 8
+  }
+};
+const Chip = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    label,
+    selected = false,
+    onPress,
+    onClose,
+    leftIcon,
+    variant = 'filled',
+    tone = 'neutral',
+    size = 'md',
+    disabled = false,
+    accessibilityLabel,
+    style,
+    textStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const isPressable = !!onPress && !disabled;
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = usePressAnimation({
+    enabled: isPressable
+  });
+  const tones = useMemo(() => toneFor(theme, tone), [theme, tone]);
+  const sz = sizeMap[size];
+  const isFilled = variant === 'filled';
+  const backgroundColor = (() => {
+    if (selected) return isFilled ? tones.selectedBg : 'transparent';
+    if (isFilled) return tones.base;
+    return 'transparent';
+  })();
+  const borderColor = (() => {
+    if (selected) return tones.selectedBorder;
+    if (!isFilled) return tones.border;
+    return 'transparent';
+  })();
+  const textColor = (() => {
+    if (disabled) return theme.colors.text.disabled;
+    if (selected) return tones.selectedOn;
+    return tones.on;
+  })();
+  const borderWidth = isFilled ? selected ? 0 : 0 : 1;
+  const handlePress = () => {
+    if (!isPressable) return;
+    triggerHaptic('selection');
+    onPress?.();
+  };
+  const handleClose = () => {
+    if (disabled) return;
+    triggerHaptic('impactLight');
+    onClose?.();
+  };
+  const a11yLabel = accessibilityLabel ?? label;
+  const content = /*#__PURE__*/_jsxs(View, {
+    style: styles.row,
+    children: [leftIcon ? /*#__PURE__*/_jsx(View, {
+      style: {
+        marginRight: sz.gap
+      },
+      children: leftIcon
+    }) : null, /*#__PURE__*/_jsx(Text, {
+      style: [styles.label, {
+        color: textColor,
+        fontSize: sz.fontSize,
+        fontWeight: theme.typography.fontWeight.medium
+      }, textStyle],
+      numberOfLines: 1,
+      children: label
+    }), onClose ? /*#__PURE__*/_jsx(Pressable, {
+      onPress: handleClose,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: `Remove ${label}`,
+      accessibilityState: {
+        disabled
+      },
+      hitSlop: 6,
+      style: ({
+        pressed
+      }) => [styles.close, {
+        width: sz.closeSize,
+        height: sz.closeSize,
+        borderRadius: sz.closeSize / 2,
+        marginLeft: sz.gap,
+        backgroundColor: pressed ? theme.colors.surface.pressed : theme.colors.surface.hovered
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: {
+          color: textColor,
+          fontSize: sz.closeFont,
+          fontWeight: theme.typography.fontWeight.bold,
+          lineHeight: sz.closeFont + 2
+        },
+        allowFontScaling: false,
+        children: '×'
+      })
+    }) : null]
+  });
+  const baseStyle = {
+    paddingHorizontal: sz.paddingH,
+    paddingVertical: sz.paddingV,
+    minHeight: sz.minHeight,
+    borderRadius: theme.radius.full,
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    opacity: disabled ? 0.55 : 1
+  };
+  if (isPressable) {
+    return /*#__PURE__*/_jsx(Animated.View, {
+      style: {
+        transform: [{
+          scale
+        }],
+        alignSelf: 'flex-start'
+      },
+      children: /*#__PURE__*/_jsx(Pressable, {
+        ref: ref,
+        onPress: handlePress,
+        onPressIn: pressIn,
+        onPressOut: pressOut,
+        disabled: !isPressable,
+        accessibilityRole: "button",
+        accessibilityLabel: a11yLabel,
+        accessibilityState: {
+          selected,
+          disabled
+        },
+        android_ripple: {
+          color: theme.colors.surface.pressed,
+          borderless: false
+        },
+        testID: testID,
+        style: ({
+          pressed
+        }) => [styles.base, baseStyle, pressed && !isFilled ? {
+          backgroundColor: theme.colors.surface.pressed
+        } : null, style],
+        children: content
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [styles.base, baseStyle, style],
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: a11yLabel,
+    accessibilityState: {
+      selected,
+      disabled
+    },
+    testID: testID,
+    children: content
+  });
+});
+Chip.displayName = 'Chip';
+const styles = StyleSheet.create({
+  base: {
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  label: {
+    textAlign: 'center'
+  },
+  close: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+export { Chip };
+export default Chip;
+//# sourceMappingURL=Chip.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Chip, default } from "./Chip.js";
+//# sourceMappingURL=index.js.map