@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/FormField/FormField.js

@@ -0,0 +1,158 @@
+"use strict";
+
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { Animated, StyleSheet, Text, View } from 'react-native';
+import { useOptionalFormContext } from "../../form/FormContext.js";
+import { createAnimatedValue, fontFor, useTheme } from "../../theme/index.js";
+import { RequiredMark } from "../FieldBase/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FormField = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    label,
+    helperText,
+    error,
+    required = false,
+    name,
+    children,
+    layout = 'stacked',
+    labelStyle,
+    helperStyle,
+    errorStyle,
+    containerStyle,
+    inputContainerStyle: inputContainerStyleProp,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const formCtx = useOptionalFormContext();
+  const isConnected = name != null && formCtx != null;
+  const field = isConnected ? formCtx.getFieldProps(name) : null;
+  const isRenderProp = typeof children === 'function';
+
+  // Error the FormField renders itself. When connected to an element child the
+  // child (Input/Select etc.) shows the injected error, so FormField stays
+  // quiet to avoid a duplicate message; the render-prop form keeps it here.
+  const ownError = isConnected ? isRenderProp ? field?.error : undefined : error;
+  // Error used purely for assistive tech — always reflects the real error.
+  const a11yError = isConnected ? field?.error : error;
+  const errorOpacity = useRef(createAnimatedValue(ownError ? 1 : 0)).current;
+  useEffect(() => {
+    const anim = Animated.timing(errorOpacity, {
+      toValue: ownError ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [ownError, errorOpacity, theme.motion.duration.fast]);
+  const computedAccessibilityLabel = useMemo(() => {
+    if (accessibilityLabel) {
+      return accessibilityLabel;
+    }
+    if (!label) {
+      return undefined;
+    }
+    return a11yError ? `${label}, error: ${a11yError}` : label;
+  }, [accessibilityLabel, label, a11yError]);
+  const labelNode = label ? /*#__PURE__*/_jsxs(Text, {
+    style: [styles.label, layout === 'inline' ? styles.labelInline : null, labelStyle],
+    children: [label, required ? /*#__PURE__*/_jsx(RequiredMark, {}) : null]
+  }) : null;
+  const inputContainerStyle = layout === 'inline' ? styles.inputInline : styles.inputStacked;
+  const showError = Boolean(ownError);
+  const showHelper = !showError && Boolean(helperText);
+  const renderedChildren = (() => {
+    if (isRenderProp) {
+      return field ? children(field) : null;
+    }
+    if (isConnected && field && /*#__PURE__*/React.isValidElement(children)) {
+      const child = children;
+      const childOnChangeText = child.props.onChangeText;
+      const childOnBlur = child.props.onBlur;
+      const childOnFocus = child.props.onFocus;
+      return /*#__PURE__*/React.cloneElement(child, {
+        value: field.value,
+        onChangeText: text => {
+          field.onChangeText(text);
+          childOnChangeText?.(text);
+        },
+        onBlur: e => {
+          field.onBlur();
+          childOnBlur?.(e);
+        },
+        onFocus: e => {
+          field.onFocus();
+          childOnFocus?.(e);
+        },
+        error: field.error,
+        ref: node => formCtx.registerField(name, node ?? null)
+      });
+    }
+    return children;
+  })();
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [layout === 'inline' ? styles.rootInline : styles.rootStacked, containerStyle],
+    accessibilityLabel: computedAccessibilityLabel
+    // RN's AccessibilityState type has no `invalid` field, so the error is
+    // folded into the label and surfaced again via the hint.
+    ,
+    accessibilityHint: a11yError ? a11yError : undefined,
+    testID: testID,
+    children: [labelNode, /*#__PURE__*/_jsx(View, {
+      style: [inputContainerStyle, inputContainerStyleProp],
+      children: renderedChildren
+    }), showHelper ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.helper, helperStyle],
+      numberOfLines: 2,
+      children: helperText
+    }) : null, ownError ? /*#__PURE__*/_jsx(Animated.Text, {
+      style: [styles.error, {
+        opacity: errorOpacity
+      }, errorStyle],
+      numberOfLines: 2,
+      accessibilityLiveRegion: "polite",
+      children: ownError
+    }) : null]
+  });
+});
+FormField.displayName = 'FormField';
+const buildStyles = theme => StyleSheet.create({
+  rootStacked: {
+    flexDirection: 'column',
+    gap: theme.spacing.xs
+  },
+  rootInline: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: theme.spacing.xs
+  },
+  label: {
+    fontSize: theme.typography.fontSize.sm,
+    ...fontFor(theme, 'medium'),
+    color: theme.colors.text.secondary
+  },
+  labelInline: {
+    width: theme.components.formField?.inlineLabelWidth ?? '35%'
+  },
+  inputStacked: {
+    width: '100%'
+  },
+  inputInline: {
+    flex: 1,
+    minWidth: 0
+  },
+  helper: {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.text.tertiary
+  },
+  error: {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.error
+  }
+});
+export { FormField };
+export default FormField;
+//# sourceMappingURL=FormField.js.map

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

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

package/lib/module/components/IconButton/IconButton.js

@@ -0,0 +1,176 @@
+"use strict";
+
+import React, { forwardRef } from 'react';
+import { Animated, Pressable, StyleSheet } from 'react-native';
+import { usePressAnimation } from "../../hooks/usePressAnimation.js";
+import { useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { Spinner } from "../Spinner/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SIZE_MAP = {
+  sm: {
+    diameter: 32,
+    icon: 16
+  },
+  md: {
+    diameter: 40,
+    icon: 20
+  },
+  lg: {
+    diameter: 48,
+    icon: 24
+  }
+};
+const toneFor = (theme, tone) => {
+  switch (tone) {
+    case 'secondary':
+      return {
+        base: theme.colors.secondary,
+        on: theme.colors.onSecondary,
+        fg: theme.colors.secondary
+      };
+    case 'success':
+      return {
+        base: theme.colors.success,
+        on: theme.colors.onSuccess,
+        fg: theme.colors.success
+      };
+    case 'warning':
+      return {
+        base: theme.colors.warning,
+        on: theme.colors.onWarning,
+        fg: theme.colors.warning
+      };
+    case 'error':
+      return {
+        base: theme.colors.error,
+        on: theme.colors.onError,
+        fg: theme.colors.error
+      };
+    case 'neutral':
+      return {
+        base: theme.colors.background.tertiary,
+        on: theme.colors.text.primary,
+        fg: theme.colors.text.primary
+      };
+    case 'primary':
+    default:
+      return {
+        base: theme.colors.primary,
+        on: theme.colors.onPrimary,
+        fg: theme.colors.primary
+      };
+  }
+};
+const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    icon,
+    onPress,
+    accessibilityLabel,
+    tone = 'primary',
+    variant = 'solid',
+    size = 'md',
+    shape = 'circle',
+    active = false,
+    disabled = false,
+    loading = false,
+    haptic,
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const sizeCfg = SIZE_MAP[size];
+  const isDisabled = disabled || loading;
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = usePressAnimation({
+    scaleTo: 0.92,
+    enabled: !isDisabled
+  });
+  const {
+    base,
+    on,
+    fg
+  } = toneFor(theme, tone);
+  const effectiveVariant = active ? 'solid' : variant;
+  let backgroundColor = 'transparent';
+  let borderColor = 'transparent';
+  let borderWidth = 0;
+  let iconColor = isDisabled ? theme.colors.text.disabled : fg;
+  if (effectiveVariant === 'solid') {
+    backgroundColor = isDisabled ? theme.colors.surface.disabled : base;
+    iconColor = isDisabled ? theme.colors.text.disabled : on;
+  } else if (effectiveVariant === 'soft') {
+    backgroundColor = isDisabled ? theme.colors.surface.disabled : `${base}22`;
+  } else if (effectiveVariant === 'outline') {
+    borderColor = isDisabled ? theme.colors.border.primary : base;
+    borderWidth = theme.colors.border.width;
+  }
+  const radius = shape === 'circle' ? sizeCfg.diameter / 2 : theme.radius.md;
+  const handlePress = e => {
+    if (isDisabled) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    onPress?.(e);
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
+    onPress: handlePress,
+    onPressIn: pressIn,
+    onPressOut: pressOut,
+    disabled: isDisabled,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      disabled: isDisabled,
+      selected: active
+    },
+    hitSlop: 6,
+    testID: testID,
+    style: ({
+      pressed
+    }) => [styles.base, {
+      width: sizeCfg.diameter,
+      height: sizeCfg.diameter,
+      borderRadius: radius,
+      backgroundColor,
+      borderColor,
+      borderWidth,
+      opacity: pressed && effectiveVariant !== 'solid' ? 0.7 : 1
+    }, style],
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.content, {
+        transform: [{
+          scale
+        }]
+      }],
+      children: loading ? /*#__PURE__*/_jsx(Spinner, {
+        size: "sm",
+        color: iconColor
+      }) : typeof icon === 'function' ? icon({
+        color: iconColor,
+        size: sizeCfg.icon
+      }) : icon
+    })
+  });
+});
+IconButton.displayName = 'IconButton';
+const styles = StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  content: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+export { IconButton };
+export default IconButton;
+//# sourceMappingURL=IconButton.js.map

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

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