@webority-technologies/mobile 0.0.1

package/lib/commonjs/components/Dialog/Dialog.js

@@ -0,0 +1,215 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Dialog = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _hapticUtils = require("../../utils/hapticUtils.js");
+var _Modal = require("../Modal/Modal.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 Dialog = props => {
+  const {
+    visible,
+    onClose,
+    title,
+    message,
+    icon,
+    variant = 'default',
+    actions,
+    dismissOnAction = true,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const variantTint = (0, _react.useMemo)(() => tintForVariant(theme, variant), [theme, variant]);
+  const handleAction = (0, _react.useCallback)(action => {
+    if (action.loading) return;
+    (0, _hapticUtils.triggerHaptic)('selection');
+    action.onPress();
+    if (dismissOnAction) {
+      onClose();
+    }
+  }, [dismissOnAction, onClose]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+    visible: visible,
+    onRequestClose: onClose,
+    presentation: "centered",
+    accessibilityLabel: accessibilityLabel ?? title,
+    testID: testID,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      accessibilityRole: 'alertdialog',
+      accessibilityLabel: accessibilityLabel ?? title,
+      style: styles.container,
+      children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.iconWrapper, {
+          backgroundColor: variantTint.muted,
+          marginBottom: theme.spacing.md
+        }],
+        children: icon
+      }) : null, title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.title, {
+          color: theme.colors.text.primary,
+          fontSize: theme.typography.fontSize.xl,
+          fontWeight: theme.typography.fontWeight.semibold,
+          marginBottom: message ? theme.spacing.sm : theme.spacing.md
+        }],
+        accessibilityRole: "header",
+        children: title
+      }) : null, typeof message === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.message, {
+          color: theme.colors.text.secondary,
+          fontSize: theme.typography.fontSize.base,
+          lineHeight: theme.typography.fontSize.base * theme.typography.lineHeight.normal,
+          marginBottom: actions && actions.length > 0 ? theme.spacing.lg : 0
+        }],
+        children: message
+      }) : message ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          marginBottom: actions && actions.length > 0 ? theme.spacing.lg : 0
+        },
+        children: message
+      }) : null, actions && actions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.actionsRow,
+        children: actions.map((action, index) => {
+          const tone = action.tone ?? 'primary';
+          const buttonStyle = actionStyleFor(theme, tone, variant);
+          const isLast = index === actions.length - 1;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+            onPress: () => handleAction(action),
+            disabled: action.loading,
+            accessibilityRole: "button",
+            accessibilityLabel: action.label,
+            accessibilityState: {
+              busy: action.loading,
+              disabled: action.loading
+            },
+            style: ({
+              pressed
+            }) => [styles.actionButton, {
+              backgroundColor: buttonStyle.backgroundColor,
+              borderColor: buttonStyle.borderColor,
+              borderWidth: buttonStyle.borderWidth,
+              borderRadius: theme.radius.md,
+              paddingVertical: theme.spacing.md - 2,
+              paddingHorizontal: theme.spacing.lg,
+              marginRight: isLast ? 0 : theme.spacing.sm,
+              opacity: action.loading ? 0.7 : pressed ? 0.85 : 1
+            }],
+            children: action.loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+              size: "small",
+              color: buttonStyle.textColor
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: {
+                color: buttonStyle.textColor,
+                fontSize: theme.typography.fontSize.base,
+                fontWeight: theme.typography.fontWeight.semibold,
+                textAlign: 'center'
+              },
+              numberOfLines: 1,
+              children: action.label
+            })
+          }, `${action.label}-${index}`);
+        })
+      }) : null]
+    })
+  });
+};
+exports.Dialog = Dialog;
+Dialog.displayName = 'Dialog';
+const tintForVariant = (theme, variant) => {
+  switch (variant) {
+    case 'success':
+      return {
+        base: theme.colors.success,
+        muted: theme.colors.background.secondary
+      };
+    case 'warning':
+      return {
+        base: theme.colors.warning,
+        muted: theme.colors.background.secondary
+      };
+    case 'danger':
+      return {
+        base: theme.colors.error,
+        muted: theme.colors.background.secondary
+      };
+    case 'info':
+      return {
+        base: theme.colors.info,
+        muted: theme.colors.background.secondary
+      };
+    case 'default':
+    default:
+      return {
+        base: theme.colors.primary,
+        muted: theme.colors.primaryMuted
+      };
+  }
+};
+const actionStyleFor = (theme, tone, variant) => {
+  const variantBase = tintForVariant(theme, variant).base;
+  switch (tone) {
+    case 'primary':
+      {
+        const bg = variant === 'default' ? theme.colors.primary : variantBase;
+        return {
+          backgroundColor: bg,
+          borderColor: 'transparent',
+          borderWidth: 0,
+          textColor: theme.colors.text.inverse
+        };
+      }
+    case 'danger':
+      return {
+        backgroundColor: theme.colors.error,
+        borderColor: 'transparent',
+        borderWidth: 0,
+        textColor: theme.colors.text.inverse
+      };
+    case 'neutral':
+    default:
+      return {
+        backgroundColor: 'transparent',
+        borderColor: theme.colors.border.primary,
+        borderWidth: 1,
+        textColor: theme.colors.text.primary
+      };
+  }
+};
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  container: {
+    alignItems: 'stretch'
+  },
+  iconWrapper: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center'
+  },
+  title: {
+    textAlign: 'center'
+  },
+  message: {
+    textAlign: 'center'
+  },
+  actionsRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center'
+  },
+  actionButton: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 44
+  }
+});
+var _default = exports.default = Dialog;
+//# sourceMappingURL=Dialog.js.map

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

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

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Divider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.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 spacingFor = (theme, spacing) => {
+  switch (spacing) {
+    case 'sm':
+      return theme.spacing.sm;
+    case 'md':
+      return theme.spacing.md;
+    case 'lg':
+      return theme.spacing.lg;
+    case 'none':
+    default:
+      return 0;
+  }
+};
+const Divider = exports.Divider = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    orientation = 'horizontal',
+    thickness = 1,
+    color,
+    spacing = 'none',
+    inset = 0,
+    label,
+    labelPosition = 'center',
+    style,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const lineColor = color ?? theme.colors.border.primary;
+  const margin = spacingFor(theme, spacing);
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  if (orientation === 'vertical') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      ref: ref,
+      accessibilityRole: "none",
+      testID: testID,
+      style: [styles.vertical, {
+        width: thickness,
+        backgroundColor: lineColor,
+        marginHorizontal: margin,
+        marginTop: inset
+      }, style]
+    });
+  }
+  if (label) {
+    const startFlex = labelPosition === 'start' ? 0 : labelPosition === 'end' ? 1 : 1;
+    const endFlex = labelPosition === 'end' ? 0 : labelPosition === 'start' ? 1 : 1;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      ref: ref,
+      accessibilityRole: "none",
+      testID: testID,
+      style: [styles.horizontalRow, {
+        marginVertical: margin,
+        marginLeft: inset
+      }, style],
+      children: [startFlex > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.horizontalLine, {
+          height: thickness,
+          backgroundColor: lineColor,
+          flex: startFlex
+        }]
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.label,
+        numberOfLines: 1,
+        children: label
+      }), endFlex > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.horizontalLine, {
+          height: thickness,
+          backgroundColor: lineColor,
+          flex: endFlex
+        }]
+      }) : null]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ref: ref,
+    accessibilityRole: "none",
+    testID: testID,
+    style: [styles.horizontalLine, {
+      height: thickness,
+      backgroundColor: lineColor,
+      marginVertical: margin,
+      marginLeft: inset
+    }, style]
+  });
+});
+Divider.displayName = 'Divider';
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  horizontalRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%'
+  },
+  horizontalLine: {
+    width: '100%',
+    alignSelf: 'stretch'
+  },
+  vertical: {
+    alignSelf: 'stretch'
+  },
+  label: {
+    marginHorizontal: theme.spacing.sm,
+    color: theme.colors.text.tertiary,
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.medium
+  }
+});
+var _default = exports.default = Divider;
+//# sourceMappingURL=Divider.js.map

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

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