@webority-technologies/mobile-ui 0.0.1

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

@@ -0,0 +1,181 @@
+"use strict";
+
+import { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useControllableState } from "../../hooks/index.js";
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { resolveHaptic, 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,
+    defaultChecked,
+    onChange,
+    indeterminate = false,
+    disabled = false,
+    label,
+    size = 'md',
+    tone = 'primary',
+    accessibilityLabel,
+    haptic,
+    style,
+    boxStyle,
+    checkIconStyle,
+    indeterminateBarStyle,
+    containerStyle,
+    labelStyle,
+    testID,
+    ...rest
+  } = props;
+  const [current, setCurrent] = useControllableState({
+    value: checked,
+    defaultValue: defaultChecked ?? false,
+    onChange
+  });
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const boxSize = theme.components.checkbox?.[size]?.boxSize ?? sizeMap[size];
+  const checkboxBorderWidth = theme.colors.border.width;
+  const checkboxLabelGap = theme.components.checkbox?.labelGap ?? 10;
+  const fillColor = toneColor(theme, tone);
+  const isActive = current || indeterminate;
+  const progress = useRef(createAnimatedValue(isActive ? 1 : 0)).current;
+  useEffect(() => {
+    const anim = 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
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [isActive, progress, theme.motion.spring.snappy]);
+  const scale = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1]
+  });
+  const handlePress = event => {
+    if (disabled) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    setCurrent(!current);
+    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' : current,
+      disabled
+    },
+    testID: testID,
+    hitSlop: 6,
+    ...rest,
+    style: ({
+      pressed
+    }) => [styles.row, {
+      opacity: disabled ? 0.55 : pressed ? 0.85 : 1
+    }, containerStyle, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.box, {
+        width: boxSize,
+        height: boxSize,
+        borderWidth: checkboxBorderWidth,
+        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
+          }, indeterminateBarStyle]
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: [styles.check, {
+            color: glyphColor,
+            fontSize: glyphFontSize,
+            lineHeight: glyphFontSize + 2
+          }, checkIconStyle],
+          allowFontScaling: false,
+          children: '✓'
+        })
+      })
+    }), label ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.label, {
+        marginLeft: checkboxLabelGap,
+        color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
+        fontSize: theme.typography.fontSize.base
+      }, labelStyle],
+      numberOfLines: 2,
+      children: label
+    }) : null]
+  });
+});
+Checkbox.displayName = 'Checkbox';
+const buildStyles = _theme => StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  box: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  glyphWrap: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  check: {
+    fontWeight: '700',
+    textAlign: 'center',
+    includeFontPadding: false
+  },
+  label: {
+    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,343 @@
+"use strict";
+
+import React, { forwardRef, useMemo } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { usePressAnimation } from "../../hooks/usePressAnimation.js";
+import { fontFor, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
+import { Skeleton } from "../Skeleton/index.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,
+    loading = false,
+    accessibilityLabel,
+    haptic,
+    style,
+    textStyle,
+    containerStyle,
+    closeButtonStyle,
+    closeIconStyle,
+    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 overrides = theme.components.chip?.[size];
+  const sz = {
+    paddingH: overrides?.paddingHorizontal ?? sizeMap[size].paddingH,
+    paddingV: overrides?.paddingVertical ?? sizeMap[size].paddingV,
+    fontSize: overrides?.fontSize ?? sizeMap[size].fontSize,
+    minHeight: overrides?.minHeight ?? sizeMap[size].minHeight,
+    closeSize: overrides?.closeSize ?? sizeMap[size].closeSize,
+    closeFont: overrides?.closeFontSize ?? sizeMap[size].closeFont,
+    gap: overrides?.gap ?? sizeMap[size].gap
+  };
+  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 ? 0 : theme.colors.border.width;
+  const handlePress = () => {
+    if (!isPressable) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    onPress?.();
+  };
+  const handleClose = () => {
+    if (disabled) {
+      return;
+    }
+    if (haptic !== false) {
+      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,
+        ...fontFor(theme, '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
+      }, closeButtonStyle],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [{
+          color: textColor,
+          fontSize: sz.closeFont,
+          ...fontFor(theme, 'bold'),
+          lineHeight: sz.closeFont + 2
+        }, closeIconStyle],
+        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
+  };
+  let rendered;
+  if (isPressable) {
+    rendered = /*#__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, containerStyle, style],
+        children: content
+      })
+    });
+  } else {
+    rendered = /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      style: [styles.base, baseStyle, containerStyle, style],
+      accessible: true,
+      accessibilityRole: "text",
+      accessibilityLabel: a11yLabel,
+      accessibilityState: {
+        selected,
+        disabled
+      },
+      testID: testID,
+      children: content
+    });
+  }
+  if (loading) {
+    return /*#__PURE__*/_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__*/_jsx(Skeleton, {
+    width: totalWidth,
+    height: pillHeight,
+    radius: pillRadius,
+    style: [{
+      alignSelf: 'flex-start'
+    }, containerStyle, style]
+  });
+};
+ChipSkeleton.displayName = 'ChipSkeleton';
+Chip.Skeleton = ChipSkeleton;
+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