@webority-technologies/mobile 0.0.1

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

@@ -0,0 +1,281 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Button = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _usePressAnimation = require("../../hooks/usePressAnimation.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 Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    title,
+    children,
+    variant = 'solid',
+    tone = 'primary',
+    size = 'md',
+    loading = false,
+    disabled = false,
+    fullWidth = false,
+    leftIcon,
+    rightIcon,
+    haptic = 'selection',
+    rounded = false,
+    style,
+    textStyle,
+    pressAnimation = true,
+    onPress,
+    accessibilityLabel,
+    accessibilityHint,
+    testID,
+    ...rest
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const isInteractive = !disabled && !loading;
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = (0, _usePressAnimation.usePressAnimation)({
+    enabled: pressAnimation && isInteractive
+  });
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const sizeStyles = sizeMap[size];
+  const toneColors = (0, _react.useMemo)(() => toneFor(theme, tone), [theme, tone]);
+  const variantStyles = (0, _react.useMemo)(() => variantFor(theme, variant, toneColors, disabled), [theme, variant, toneColors, disabled]);
+  const handlePress = event => {
+    if (!isInteractive) return;
+    if (haptic !== false) (0, _hapticUtils.triggerHaptic)(haptic);
+    onPress?.(event);
+  };
+  const accessibleLabel = accessibilityLabel ?? title;
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.contentRow,
+    children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+      color: variantStyles.textColor,
+      size: size === 'xs' || size === 'sm' ? 'small' : 'small'
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [leftIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.iconLeft,
+        children: leftIcon
+      }) : null, title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.label, {
+          color: variantStyles.textColor,
+          fontSize: sizeStyles.fontSize,
+          fontWeight: theme.typography.fontWeight.semibold
+        }, textStyle],
+        numberOfLines: 1,
+        children: title
+      }) : children, rightIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.iconRight,
+        children: rightIcon
+      }) : null]
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: [{
+      transform: [{
+        scale
+      }]
+    }, fullWidth ? styles.fullWidth : null],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      ref: ref,
+      onPress: handlePress,
+      onPressIn: pressIn,
+      onPressOut: pressOut,
+      disabled: !isInteractive,
+      android_ripple: variant === 'solid' ? {
+        color: theme.colors.surface.pressed,
+        borderless: false
+      } : {
+        color: theme.colors.surface.hovered,
+        borderless: false
+      },
+      accessibilityRole: "button",
+      accessibilityLabel: accessibleLabel,
+      accessibilityHint: accessibilityHint,
+      accessibilityState: {
+        disabled: !isInteractive,
+        busy: loading
+      },
+      testID: testID,
+      style: ({
+        pressed
+      }) => [styles.base, {
+        paddingHorizontal: sizeStyles.paddingHorizontal,
+        paddingVertical: sizeStyles.paddingVertical,
+        minHeight: sizeStyles.minHeight,
+        borderRadius: rounded ? theme.radius.full : sizeStyles.borderRadius,
+        backgroundColor: variantStyles.backgroundColor,
+        borderWidth: variantStyles.borderWidth,
+        borderColor: variantStyles.borderColor,
+        opacity: !isInteractive ? 0.55 : 1
+      }, pressed && variant !== 'solid' ? {
+        backgroundColor: theme.colors.surface.pressed
+      } : null, fullWidth ? styles.fullWidth : null, style],
+      ...rest,
+      children: content
+    })
+  });
+});
+Button.displayName = 'Button';
+const sizeMap = {
+  xs: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    minHeight: 28,
+    fontSize: 12,
+    borderRadius: 8
+  },
+  sm: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    minHeight: 34,
+    fontSize: 13,
+    borderRadius: 10
+  },
+  md: {
+    paddingHorizontal: 16,
+    paddingVertical: 9,
+    minHeight: 42,
+    fontSize: 15,
+    borderRadius: 12
+  },
+  lg: {
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    minHeight: 50,
+    fontSize: 16,
+    borderRadius: 14
+  },
+  xl: {
+    paddingHorizontal: 24,
+    paddingVertical: 14,
+    minHeight: 58,
+    fontSize: 17,
+    borderRadius: 16
+  }
+};
+const toneFor = (theme, tone) => {
+  switch (tone) {
+    case 'primary':
+      return {
+        base: theme.colors.primary,
+        hover: theme.colors.primaryHover,
+        pressed: theme.colors.primaryPressed,
+        on: theme.colors.text.inverse,
+        muted: theme.colors.primaryMuted
+      };
+    case 'secondary':
+      return {
+        base: theme.colors.secondary,
+        hover: theme.colors.secondaryHover,
+        pressed: theme.colors.secondaryHover,
+        on: theme.colors.text.primary,
+        muted: theme.colors.secondary
+      };
+    case 'success':
+      return {
+        base: theme.colors.success,
+        hover: theme.colors.success,
+        pressed: theme.colors.success,
+        on: theme.colors.text.inverse,
+        muted: theme.colors.background.secondary
+      };
+    case 'warning':
+      return {
+        base: theme.colors.warning,
+        hover: theme.colors.warning,
+        pressed: theme.colors.warning,
+        on: theme.colors.text.inverse,
+        muted: theme.colors.background.secondary
+      };
+    case 'danger':
+      return {
+        base: theme.colors.error,
+        hover: theme.colors.error,
+        pressed: theme.colors.error,
+        on: theme.colors.text.inverse,
+        muted: theme.colors.background.secondary
+      };
+    case 'neutral':
+    default:
+      return {
+        base: theme.colors.background.tertiary,
+        hover: theme.colors.surface.hovered,
+        pressed: theme.colors.surface.pressed,
+        on: theme.colors.text.primary,
+        muted: theme.colors.background.secondary
+      };
+  }
+};
+const variantFor = (theme, variant, toneSet, disabled) => {
+  switch (variant) {
+    case 'solid':
+      return {
+        backgroundColor: disabled ? theme.colors.surface.disabled : toneSet.base,
+        borderColor: 'transparent',
+        borderWidth: 0,
+        textColor: disabled ? theme.colors.text.disabled : toneSet.on
+      };
+    case 'outline':
+      return {
+        backgroundColor: 'transparent',
+        borderColor: disabled ? theme.colors.border.primary : toneSet.base,
+        borderWidth: 1,
+        textColor: disabled ? theme.colors.text.disabled : toneSet.base
+      };
+    case 'ghost':
+      return {
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        borderWidth: 0,
+        textColor: disabled ? theme.colors.text.disabled : toneSet.base
+      };
+    case 'link':
+      return {
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        borderWidth: 0,
+        textColor: disabled ? theme.colors.text.disabled : theme.colors.text.link
+      };
+    default:
+      return {
+        backgroundColor: toneSet.base,
+        borderColor: 'transparent',
+        borderWidth: 0,
+        textColor: toneSet.on
+      };
+  }
+};
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    overflow: 'hidden'
+  },
+  contentRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  label: {
+    textAlign: 'center'
+  },
+  iconLeft: {
+    marginRight: 8
+  },
+  iconRight: {
+    marginLeft: 8
+  },
+  fullWidth: {
+    alignSelf: 'stretch'
+  }
+});
+var _default = exports.default = Button;
+//# sourceMappingURL=Button.js.map

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

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

@@ -0,0 +1,194 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Card = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _usePressAnimation = require("../../hooks/usePressAnimation.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 paddingMap = {
+  none: 'none',
+  sm: 'sm',
+  md: 'lg',
+  lg: 'xl',
+  xl: '2xl'
+};
+const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    children,
+    variant = 'elevated',
+    elevation = 'sm',
+    radius = 'lg',
+    padding = 'md',
+    interactive = false,
+    header,
+    footer,
+    imageSource,
+    imageHeight = 160,
+    imageAspectRatio,
+    imageOverlay,
+    onPress,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityRole,
+    style,
+    testID,
+    ...rest
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const isInteractive = interactive || typeof onPress === 'function';
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = (0, _usePressAnimation.usePressAnimation)({
+    enabled: isInteractive
+  });
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const hasImage = Boolean(imageSource);
+  const contentPadding = theme.spacing[paddingMap[padding]];
+  const containerStyle = (0, _react.useMemo)(() => {
+    const base = {
+      borderRadius: theme.radius[radius],
+      // 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,
+      overflow: 'hidden'
+    };
+    switch (variant) {
+      case 'outlined':
+        return {
+          ...base,
+          backgroundColor: theme.colors.background.elevated,
+          borderWidth: 1,
+          borderColor: theme.colors.border.primary
+        };
+      case 'filled':
+        return {
+          ...base,
+          backgroundColor: theme.colors.background.secondary
+        };
+      case 'elevated':
+      default:
+        return {
+          ...base,
+          backgroundColor: theme.colors.background.elevated,
+          ...theme.shadows[elevation]
+        };
+    }
+  }, [theme, variant, elevation, radius, padding, hasImage, contentPadding]);
+  const imageStyle = (0, _react.useMemo)(() => {
+    const topRadius = theme.radius[radius];
+    const dimensions = typeof imageAspectRatio === 'number' ? {
+      width: '100%',
+      aspectRatio: imageAspectRatio
+    } : {
+      width: '100%',
+      height: imageHeight
+    };
+    return {
+      ...dimensions,
+      borderTopLeftRadius: topRadius,
+      borderTopRightRadius: topRadius,
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
+    };
+  }, [theme, radius, imageAspectRatio, imageHeight]);
+  const innerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [header ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.header,
+      children: header
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: header || footer ? styles.body : null,
+      children: children
+    }), footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.footer,
+      children: footer
+    }) : null]
+  });
+  const content = hasImage ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.imageWrapper,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        source: imageSource,
+        resizeMode: "cover",
+        style: imageStyle,
+        accessibilityLabel: "",
+        accessible: false
+      }), imageOverlay ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: "box-none",
+        style: styles.imageOverlay,
+        children: imageOverlay
+      }) : null]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        padding: contentPadding
+      },
+      children: innerContent
+    })]
+  }) : innerContent;
+  if (isInteractive) {
+    const handlePress = event => {
+      (0, _hapticUtils.triggerHaptic)('selection');
+      onPress?.(event);
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [{
+        transform: [{
+          scale
+        }]
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        ref: ref,
+        onPress: handlePress,
+        onPressIn: pressIn,
+        onPressOut: pressOut,
+        android_ripple: {
+          color: theme.colors.surface.pressed,
+          borderless: false
+        },
+        accessibilityRole: accessibilityRole ?? 'button',
+        accessibilityLabel: accessibilityLabel,
+        accessibilityHint: accessibilityHint,
+        testID: testID,
+        style: [containerStyle, style],
+        ...rest,
+        children: content
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ref: ref,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityRole: accessibilityRole,
+    testID: testID,
+    style: [containerStyle, style],
+    children: content
+  });
+});
+Card.displayName = 'Card';
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  header: {
+    marginBottom: theme.spacing.md
+  },
+  body: {
+    flexShrink: 1
+  },
+  footer: {
+    marginTop: theme.spacing.md
+  },
+  imageWrapper: {
+    position: 'relative'
+  },
+  imageOverlay: {
+    ..._reactNative.StyleSheet.absoluteFillObject
+  }
+});
+var _default = exports.default = Card;
+//# sourceMappingURL=Card.js.map

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

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