@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/Box/Box.js

@@ -0,0 +1,198 @@
+"use strict";
+
+import React, { forwardRef } from 'react';
+import { View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const space = (theme, token) => token == null ? undefined : theme.spacing[token];
+export const resolveBoxStyle = (theme, p) => {
+  const style = {};
+  if (p.p != null) {
+    style.padding = space(theme, p.p);
+  }
+  if (p.px != null) {
+    style.paddingHorizontal = space(theme, p.px);
+  }
+  if (p.py != null) {
+    style.paddingVertical = space(theme, p.py);
+  }
+  if (p.pt != null) {
+    style.paddingTop = space(theme, p.pt);
+  }
+  if (p.pr != null) {
+    style.paddingRight = space(theme, p.pr);
+  }
+  if (p.pb != null) {
+    style.paddingBottom = space(theme, p.pb);
+  }
+  if (p.pl != null) {
+    style.paddingLeft = space(theme, p.pl);
+  }
+  if (p.m != null) {
+    style.margin = space(theme, p.m);
+  }
+  if (p.mx != null) {
+    style.marginHorizontal = space(theme, p.mx);
+  }
+  if (p.my != null) {
+    style.marginVertical = space(theme, p.my);
+  }
+  if (p.mt != null) {
+    style.marginTop = space(theme, p.mt);
+  }
+  if (p.mr != null) {
+    style.marginRight = space(theme, p.mr);
+  }
+  if (p.mb != null) {
+    style.marginBottom = space(theme, p.mb);
+  }
+  if (p.ml != null) {
+    style.marginLeft = space(theme, p.ml);
+  }
+  if (p.gap != null) {
+    style.gap = space(theme, p.gap);
+  }
+  if (p.bg != null) {
+    const bgTokens = theme.colors.background;
+    style.backgroundColor = bgTokens[p.bg] ?? p.bg;
+  }
+  if (p.radius != null) {
+    style.borderRadius = theme.radius[p.radius];
+  }
+  if (p.border) {
+    style.borderWidth = theme.colors.border.width;
+    style.borderColor = theme.colors.border.primary;
+  }
+  if (p.flex != null) {
+    style.flex = p.flex;
+  }
+  if (p.align != null) {
+    style.alignItems = p.align;
+  }
+  if (p.justify != null) {
+    style.justifyContent = p.justify;
+  }
+  if (p.direction != null) {
+    style.flexDirection = p.direction;
+  }
+  if (p.wrap) {
+    style.flexWrap = 'wrap';
+  }
+  return style;
+};
+const Box = /*#__PURE__*/forwardRef((props, ref) => {
+  const theme = useTheme();
+  const {
+    // layout props consumed by the resolver — kept out of the View spread
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml,
+    gap,
+    bg,
+    radius,
+    border,
+    flex,
+    align,
+    justify,
+    direction,
+    wrap,
+    style,
+    children,
+    ...viewProps
+  } = props;
+  const boxStyle = resolveBoxStyle(theme, {
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml,
+    gap,
+    bg,
+    radius,
+    border,
+    flex,
+    align,
+    justify,
+    direction,
+    wrap
+  });
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [boxStyle, style],
+    ...viewProps,
+    children: children
+  });
+});
+Box.displayName = 'Box';
+/** Vertical flex container with token spacing between children (default gap `md`). */
+const Stack = /*#__PURE__*/forwardRef(({
+  gap = 'md',
+  ...rest
+}, ref) => /*#__PURE__*/_jsx(Box, {
+  ref: ref,
+  direction: "column",
+  gap: gap,
+  ...rest
+}));
+Stack.displayName = 'Stack';
+/** Horizontal flex container (default `align="center"`, gap `sm`). */
+const Row = /*#__PURE__*/forwardRef(({
+  gap = 'sm',
+  align = 'center',
+  ...rest
+}, ref) => /*#__PURE__*/_jsx(Box, {
+  ref: ref,
+  direction: "row",
+  gap: gap,
+  align: align,
+  ...rest
+}));
+Row.displayName = 'Row';
+/** Fixed gap (`size`) or a flexible push (`flex: 1`) between siblings. */
+const Spacer = ({
+  size,
+  style,
+  testID
+}) => {
+  const theme = useTheme();
+  if (size != null) {
+    const value = theme.spacing[size];
+    return /*#__PURE__*/_jsx(View, {
+      testID: testID,
+      style: [{
+        width: value,
+        height: value
+      }, style]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: [{
+      flex: 1
+    }, style]
+  });
+};
+Spacer.displayName = 'Spacer';
+export { Box, Row, Spacer, Stack };
+export default Box;
+//# sourceMappingURL=Box.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Box, Row, resolveBoxStyle, Spacer, Stack } from "./Box.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/Button/Button.js

@@ -0,0 +1,312 @@
+"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, Gradient, useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { Spinner } from "../Spinner/index.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const Button = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    title,
+    children,
+    variant = 'solid',
+    tone = 'primary',
+    size = 'md',
+    loading = false,
+    disabled = false,
+    fullWidth = false,
+    leftIcon,
+    rightIcon,
+    haptic = 'selection',
+    rounded = false,
+    gradient,
+    style,
+    textStyle,
+    pressAnimation = true,
+    onPress,
+    accessibilityLabel,
+    accessibilityHint,
+    testID,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const isInteractive = !disabled && !loading;
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = usePressAnimation({
+    enabled: pressAnimation && isInteractive
+  });
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.button?.[size] ?? {})
+  };
+  const toneColors = useMemo(() => toneFor(theme, tone), [theme, tone]);
+  const variantStyles = useMemo(() => variantFor(theme, variant, toneColors, disabled), [theme, variant, toneColors, disabled]);
+
+  // Resolve gradient: string token → theme.gradients[token]; literal passes through.
+  // Skipped when disabled (parity with disabled flat-color treatment).
+  const resolvedGradient = useMemo(() => {
+    if (!gradient || disabled || variant !== 'solid') {
+      return null;
+    }
+    if (typeof gradient === 'string') {
+      return theme.gradients[gradient] ?? null;
+    }
+    return gradient;
+  }, [gradient, disabled, variant, theme.gradients]);
+  const handlePress = event => {
+    if (!isInteractive) {
+      return;
+    }
+    if (haptic !== false) {
+      triggerHaptic(haptic);
+    }
+    onPress?.(event);
+  };
+  const accessibleLabel = accessibilityLabel ?? title;
+  const content = /*#__PURE__*/_jsx(View, {
+    style: styles.contentRow,
+    children: loading ? /*#__PURE__*/_jsx(Spinner, {
+      variant: "circular",
+      size: "sm",
+      color: variantStyles.textColor,
+      accessibilityLabel: "Loading"
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [leftIcon ? /*#__PURE__*/_jsx(View, {
+        style: styles.iconLeft,
+        children: leftIcon
+      }) : null, title ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.label, {
+          color: variantStyles.textColor,
+          fontSize: sizeStyles.fontSize,
+          ...fontFor(theme, 'semibold')
+        }, textStyle],
+        numberOfLines: 1,
+        children: title
+      }) : children, rightIcon ? /*#__PURE__*/_jsx(View, {
+        style: styles.iconRight,
+        children: rightIcon
+      }) : null]
+    })
+  });
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [{
+      transform: [{
+        scale
+      }]
+    }, fullWidth ? styles.fullWidth : null],
+    children: /*#__PURE__*/_jsxs(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,
+        // Hide solid bg when a gradient layer covers it; preserve outline borders.
+        backgroundColor: resolvedGradient ? 'transparent' : variantStyles.backgroundColor,
+        borderWidth: variantStyles.borderWidth,
+        borderColor: variantStyles.borderColor,
+        opacity: !isInteractive ? 0.55 : 1,
+        overflow: resolvedGradient ? 'hidden' : undefined
+      }, pressed && variant !== 'solid' ? {
+        backgroundColor: theme.colors.surface.pressed
+      } : null, fullWidth ? styles.fullWidth : null, style],
+      ...rest,
+      children: [resolvedGradient ? /*#__PURE__*/_jsx(Gradient, {
+        gradient: resolvedGradient,
+        style: StyleSheet.absoluteFill
+      }) : null, 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.onPrimary,
+        muted: theme.colors.primaryMuted
+      };
+    case 'secondary':
+      return {
+        base: theme.colors.secondary,
+        hover: theme.colors.secondaryHover,
+        pressed: theme.colors.secondaryHover,
+        on: theme.colors.onSecondary,
+        muted: theme.colors.secondary
+      };
+    case 'success':
+      return {
+        base: theme.colors.success,
+        hover: theme.colors.success,
+        pressed: theme.colors.success,
+        on: theme.colors.onSuccess,
+        muted: theme.colors.background.secondary
+      };
+    case 'warning':
+      return {
+        base: theme.colors.warning,
+        hover: theme.colors.warning,
+        pressed: theme.colors.warning,
+        on: theme.colors.onWarning,
+        muted: theme.colors.background.secondary
+      };
+    case 'error':
+      return {
+        base: theme.colors.error,
+        hover: theme.colors.error,
+        pressed: theme.colors.error,
+        on: theme.colors.onError,
+        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
+      };
+  }
+};
+// 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: 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: BUTTON_BORDER_WIDTH,
+        textColor: disabled ? theme.colors.text.disabled : toneSet.base
+      };
+    case 'ghost':
+      return {
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        borderWidth: BUTTON_BORDER_WIDTH,
+        textColor: disabled ? theme.colors.text.disabled : toneSet.base
+      };
+    case 'link':
+      return {
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        borderWidth: BUTTON_BORDER_WIDTH,
+        textColor: disabled ? theme.colors.text.disabled : theme.colors.text.link
+      };
+    default:
+      return {
+        backgroundColor: toneSet.base,
+        borderColor: 'transparent',
+        borderWidth: BUTTON_BORDER_WIDTH,
+        textColor: toneSet.on
+      };
+  }
+};
+const buildStyles = _theme => 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'
+  }
+});
+export { Button };
+export default Button;
+//# sourceMappingURL=Button.js.map

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

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