@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/components/TouchableRipple/TouchableRipple.js

@@ -0,0 +1,246 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const Pressable_1 = require("./Pressable");
+const utils_1 = require("./utils");
+const theming_1 = require("../theming");
+const forwardRef_1 = require("../utils/forwardRef");
+const hasTouchHandler_1 = __importDefault(require("../utils/hasTouchHandler"));
+// Settings context not needed - removed dependency
+const SettingsContext = React.createContext({ rippleEffectEnabled: true });
+// Color manipulation utilities (simplified without color package)
+const hexToRgb = (hex) => {
+    const r = Number.parseInt(hex.slice(1, 3), 16);
+    const g = Number.parseInt(hex.slice(3, 5), 16);
+    const b = Number.parseInt(hex.slice(5, 7), 16);
+    return [r, g, b];
+};
+const fadeColor = (color, alpha) => {
+    const [r, g, b] = hexToRgb(color);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+const colorUtil = (hex) => ({
+    fade: (alpha) => ({
+        rgb: () => ({
+            string: () => fadeColor(hex, alpha),
+        }),
+    }),
+    rgb: () => ({
+        string: () => hex,
+    }),
+});
+/**
+ * A wrapper for views that should respond to touches.
+ * Provides a material "ink ripple" interaction effect for supported platforms (>= Android Lollipop).
+ * On unsupported platforms, it falls back to a highlight effect.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { View } from 'react-native';
+ * import { Text, TouchableRipple } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <TouchableRipple
+ *     onPress={() => console.log('Pressed')}
+ *     rippleColor="rgba(0, 0, 0, .32)"
+ *   >
+ *     <Text>Press anywhere</Text>
+ *   </TouchableRipple>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * @extends Pressable props https://reactnative.dev/docs/Pressable#props
+ */
+const TouchableRipple = ({ style, background: _background, borderless = false, disabled: disabledProp, rippleColor, underlayColor: _underlayColor, children, theme: themeOverrides, ...rest }, ref) => {
+    const theme = (0, theming_1.useInternalTheme)(themeOverrides);
+    const { calculatedRippleColor } = (0, utils_1.getTouchableRippleColors)({
+        theme,
+        rippleColor,
+    });
+    const hoverColor = colorUtil(typeof calculatedRippleColor === 'string' ? calculatedRippleColor : '#000000').fade(0.5).rgb().string();
+    const { rippleEffectEnabled } = React.useContext(SettingsContext);
+    const { onPress, onLongPress, onPressIn, onPressOut } = rest;
+    const handlePressIn = React.useCallback((e) => {
+        onPressIn?.(e);
+        if (rippleEffectEnabled) {
+            const { centered } = rest;
+            const button = e.currentTarget;
+            const style = window.getComputedStyle(button);
+            const dimensions = button.getBoundingClientRect();
+            let touchX;
+            let touchY;
+            const { changedTouches, touches } = e.nativeEvent;
+            const touch = touches?.[0] ?? changedTouches?.[0];
+            // If centered or it was pressed using keyboard - enter or space
+            if (centered || !touch) {
+                touchX = dimensions.width / 2;
+                touchY = dimensions.height / 2;
+            }
+            else {
+                touchX = touch.locationX ?? e.pageX;
+                touchY = touch.locationY ?? e.pageY;
+            }
+            // Get the size of the button to determine how big the ripple should be
+            const size = centered
+                ? // If ripple is always centered, we don't need to make it too big
+                    Math.min(dimensions.width, dimensions.height) * 1.5
+                : // Otherwise make it twice as big so clicking on one end spreads ripple to other
+                    Math.max(dimensions.width, dimensions.height) * 2;
+            // Create a container for our ripple effect so we don't need to change the parent's style
+            const container = document.createElement('span');
+            container.setAttribute('data-paper-ripple', '');
+            Object.assign(container.style, {
+                position: 'absolute',
+                pointerEvents: 'none',
+                top: '0',
+                left: '0',
+                right: '0',
+                bottom: '0',
+                borderTopLeftRadius: style.borderTopLeftRadius,
+                borderTopRightRadius: style.borderTopRightRadius,
+                borderBottomRightRadius: style.borderBottomRightRadius,
+                borderBottomLeftRadius: style.borderBottomLeftRadius,
+                overflow: centered ? 'visible' : 'hidden',
+            });
+            // Create span to show the ripple effect
+            const ripple = document.createElement('span');
+            Object.assign(ripple.style, {
+                position: 'absolute',
+                pointerEvents: 'none',
+                backgroundColor: calculatedRippleColor,
+                borderRadius: '50%',
+                /* Transition configuration */
+                transitionProperty: 'transform opacity',
+                transitionDuration: `${Math.min(size * 1.5, 350)}ms`,
+                transitionTimingFunction: 'linear',
+                transformOrigin: 'center',
+                /* We'll animate these properties */
+                transform: 'translate3d(-50%, -50%, 0) scale3d(0.1, 0.1, 0.1)',
+                opacity: '0.5',
+                // Position the ripple where cursor was
+                left: `${touchX}px`,
+                top: `${touchY}px`,
+                width: `${size}px`,
+                height: `${size}px`,
+            });
+            // Finally, append it to DOM
+            container.appendChild(ripple);
+            button.appendChild(container);
+            // rAF runs in the same frame as the event handler
+            // Use double rAF to ensure the transition class is added in next frame
+            // This will make sure that the transition animation is triggered
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    Object.assign(ripple.style, {
+                        transform: 'translate3d(-50%, -50%, 0) scale3d(1, 1, 1)',
+                        opacity: '1',
+                    });
+                });
+            });
+        }
+    }, [onPressIn, rest, rippleEffectEnabled, calculatedRippleColor]);
+    const handlePressOut = React.useCallback((e) => {
+        onPressOut?.(e);
+        if (rippleEffectEnabled) {
+            const containers = e.currentTarget.querySelectorAll('[data-paper-ripple]');
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    containers.forEach((container) => {
+                        const ripple = container.firstChild;
+                        Object.assign(ripple.style, {
+                            transitionDuration: '250ms',
+                            opacity: 0,
+                        });
+                        // Finally remove the span after the transition
+                        setTimeout(() => {
+                            const { parentNode } = container;
+                            if (parentNode) {
+                                parentNode.removeChild(container);
+                            }
+                        }, 500);
+                    });
+                });
+            });
+        }
+    }, [onPressOut, rippleEffectEnabled]);
+    const hasPassedTouchHandler = (0, hasTouchHandler_1.default)({
+        onPress,
+        onLongPress,
+        onPressIn,
+        onPressOut,
+    });
+    const disabled = disabledProp || !hasPassedTouchHandler;
+    return ((0, jsx_runtime_1.jsx)(Pressable_1.Pressable, { ...rest, ref: ref, onPressIn: handlePressIn, onPressOut: handlePressOut, disabled: disabled, style: (state) => [
+            styles.touchable,
+            borderless && styles.borderless,
+            // focused state is not ready yet: https://github.com/necolas/react-native-web/issues/1849
+            // state.focused && { backgroundColor: ___ },
+            state.hovered && { backgroundColor: hoverColor },
+            disabled && styles.disabled,
+            typeof style === 'function' ? style(state) : style,
+        ], children: (state) => React.Children.only(typeof children === 'function' ? children(state) : children) }));
+};
+/**
+ * Whether ripple effect is supported.
+ */
+TouchableRipple.supported = true;
+const styles = react_native_1.StyleSheet.create({
+    touchable: {
+        position: 'relative',
+        ...(react_native_1.Platform.OS === 'web' && {
+            cursor: 'pointer',
+            transition: '150ms background-color',
+        }),
+    },
+    disabled: {
+        ...(react_native_1.Platform.OS === 'web' && {
+            cursor: 'auto',
+        }),
+    },
+    borderless: {
+        overflow: 'hidden',
+    },
+});
+const Component = (0, forwardRef_1.forwardRef)(TouchableRipple);
+exports.default = Component;

package/src/ui/components/TouchableRipple/TouchableRipple.native.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { type PressableAndroidRippleConfig, type StyleProp, type ViewStyle, type GestureResponderEvent, View, type ColorValue } from 'react-native';
+import type { PressableProps } from './Pressable';
+import type { ThemeProp } from '../types';
+export type Props = PressableProps & {
+    borderless?: boolean;
+    background?: PressableAndroidRippleConfig;
+    centered?: boolean;
+    disabled?: boolean;
+    onPress?: (e: GestureResponderEvent) => undefined | null;
+    onLongPress?: (e: GestureResponderEvent) => void;
+    onPressIn?: (e: GestureResponderEvent) => void;
+    onPressOut?: (e: GestureResponderEvent) => void;
+    rippleColor?: ColorValue;
+    underlayColor?: string;
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    theme?: ThemeProp;
+};
+declare const Component: import("../utils/forwardRef").ForwardRefComponent<View, Props>;
+declare const _default: typeof Component & {
+    supported: boolean;
+};
+export default _default;

package/src/ui/components/TouchableRipple/TouchableRipple.native.js

@@ -0,0 +1,99 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const Pressable_1 = require("./Pressable");
+const utils_1 = require("./utils");
+// Settings context not needed - removed dependency
+const SettingsContext = React.createContext({ rippleEffectEnabled: true });
+const theming_1 = require("../theming");
+const forwardRef_1 = require("../utils/forwardRef");
+const hasTouchHandler_1 = __importDefault(require("../utils/hasTouchHandler"));
+const ANDROID_VERSION_LOLLIPOP = 21;
+const ANDROID_VERSION_PIE = 28;
+const TouchableRipple = ({ style, background, borderless = false, disabled: disabledProp, rippleColor, underlayColor, children, theme: themeOverrides, ...rest }, ref) => {
+    const theme = (0, theming_1.useInternalTheme)(themeOverrides);
+    const { rippleEffectEnabled } = React.useContext(SettingsContext);
+    const { onPress, onLongPress, onPressIn, onPressOut } = rest;
+    const hasPassedTouchHandler = (0, hasTouchHandler_1.default)({
+        onPress,
+        onLongPress,
+        onPressIn,
+        onPressOut,
+    });
+    const disabled = disabledProp || !hasPassedTouchHandler;
+    const { calculatedRippleColor, calculatedUnderlayColor } = (0, utils_1.getTouchableRippleColors)({
+        theme,
+        rippleColor,
+        underlayColor,
+    });
+    // A workaround for ripple on Android P is to use useForeground + overflow: 'hidden'
+    // https://github.com/facebook/react-native/issues/6480
+    const useForeground = react_native_1.Platform.OS === 'android' &&
+        react_native_1.Platform.Version >= ANDROID_VERSION_PIE &&
+        borderless;
+    if (TouchableRipple.supported) {
+        const androidRipple = rippleEffectEnabled
+            ? background ?? {
+                color: calculatedRippleColor,
+                borderless,
+                foreground: useForeground,
+            }
+            : undefined;
+        return ((0, jsx_runtime_1.jsx)(Pressable_1.Pressable, { ...rest, ref: ref, disabled: disabled, style: [borderless && styles.overflowHidden, style], android_ripple: androidRipple, children: React.Children.only(children) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(Pressable_1.Pressable, { ...rest, ref: ref, disabled: disabled, style: [borderless && styles.overflowHidden, style], children: ({ pressed }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [pressed && rippleEffectEnabled && ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "touchable-ripple-underlay", style: [
+                        styles.underlay,
+                        { backgroundColor: calculatedUnderlayColor },
+                    ] })), React.Children.only(children)] })) }));
+};
+TouchableRipple.supported =
+    react_native_1.Platform.OS === 'android' && react_native_1.Platform.Version >= ANDROID_VERSION_LOLLIPOP;
+const styles = react_native_1.StyleSheet.create({
+    overflowHidden: {
+        overflow: 'hidden',
+    },
+    underlay: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        zIndex: 2,
+    },
+});
+const Component = (0, forwardRef_1.forwardRef)(TouchableRipple);
+exports.default = Component;

package/src/ui/components/TouchableRipple/utils.d.ts

@@ -0,0 +1,10 @@
+import type { ColorValue } from 'react-native';
+import type { InternalTheme } from '../types';
+export declare const getTouchableRippleColors: ({ theme, rippleColor, underlayColor, }: {
+    theme: InternalTheme;
+    rippleColor?: ColorValue;
+    underlayColor?: string;
+}) => {
+    calculatedRippleColor: ColorValue;
+    calculatedUnderlayColor: string;
+};

package/src/ui/components/TouchableRipple/utils.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTouchableRippleColors = void 0;
+const color_1 = __importDefault(require("color"));
+const getUnderlayColor = ({ theme, calculatedRippleColor, underlayColor, }) => {
+    if (underlayColor != null) {
+        return underlayColor;
+    }
+    if (theme.isV3) {
+        return typeof calculatedRippleColor === 'string' ? calculatedRippleColor : '#000000';
+    }
+    return (0, color_1.default)(typeof calculatedRippleColor === 'string' ? calculatedRippleColor : '#000000').fade(0.5).rgb().string();
+};
+const getRippleColor = ({ theme, rippleColor, }) => {
+    if (rippleColor) {
+        return rippleColor;
+    }
+    if (theme.isV3) {
+        return (0, color_1.default)(theme.colors.onSurface).alpha(0.12).rgb().string();
+    }
+    if (theme.dark) {
+        return (0, color_1.default)(theme.colors.onSurface || theme.colors.text || '#000000').alpha(0.32).rgb().string();
+    }
+    return (0, color_1.default)(theme.colors.text || theme.colors.onSurface || '#000000').alpha(0.2).rgb().string();
+};
+const getTouchableRippleColors = ({ theme, rippleColor, underlayColor, }) => {
+    const calculatedRippleColor = getRippleColor({ theme, rippleColor });
+    return {
+        calculatedRippleColor,
+        calculatedUnderlayColor: getUnderlayColor({
+            theme,
+            calculatedRippleColor,
+            underlayColor,
+        }),
+    };
+};
+exports.getTouchableRippleColors = getTouchableRippleColors;

package/src/ui/components/Typography/AnimatedText.d.ts

@@ -0,0 +1,34 @@
+import type * as React from 'react';
+import { Animated, type StyleProp, type TextStyle, type Text } from 'react-native';
+import type { VariantProp } from './types';
+import type { ThemeProp } from "../types";
+type Props<T> = React.ComponentPropsWithRef<typeof Animated.Text> & {
+    /**
+     * Variant defines appropriate text styles for type role and its size.
+     * Available variants:
+     *
+     *  Display: `displayLarge`, `displayMedium`, `displaySmall`
+     *
+     *  Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
+     *
+     *  Title: `titleLarge`, `titleMedium`, `titleSmall`
+     *
+     *  Label:  `labelLarge`, `labelMedium`, `labelSmall`
+     *
+     *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
+     */
+    variant?: VariantProp<T>;
+    style?: StyleProp<TextStyle>;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+};
+/**
+ * Animated text component which follows styles from the theme.
+ *
+ * @extends Text props https://reactnative.dev/docs/text#props
+ */
+declare const AnimatedText: import("../utils/forwardRef").ForwardRefComponent<Text & HTMLElement, Props<never>>;
+export declare const customAnimatedText: <T>() => (props: Props<T>) => React.ReactElement;
+export default AnimatedText;

package/src/ui/components/Typography/AnimatedText.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.customAnimatedText = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const theming_1 = require("../theming");
+const forwardRef_1 = require("../utils/forwardRef");
+/**
+ * Animated text component which follows styles from the theme.
+ *
+ * @extends Text props https://reactnative.dev/docs/text#props
+ */
+const AnimatedText = (0, forwardRef_1.forwardRef)(function AnimatedText({ style, theme: themeOverrides, variant, ...rest }, ref) {
+    const theme = (0, theming_1.useInternalTheme)(themeOverrides);
+    const writingDirection = react_native_1.I18nManager.getConstants().isRTL ? 'rtl' : 'ltr';
+    if (theme.isV3 && variant) {
+        const font = theme.fonts[variant];
+        if (typeof font !== 'object') {
+            throw new Error(`Variant ${variant} was not provided properly. Valid variants are ${Object.keys(theme.fonts).join(', ')}.`);
+        }
+        return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.Text, { ref: ref, ...rest, style: [
+                font,
+                styles.text,
+                { writingDirection, color: theme.colors.onSurface },
+                style,
+            ] }));
+    }
+    const font = !theme.isV3 ? (theme.fonts.regular || theme.fonts.default) : theme.fonts.bodyMedium;
+    const textStyle = {
+        ...font,
+        color: theme.isV3 ? theme.colors.onSurface : (theme.colors.text || theme.colors.onSurface),
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.Text, { ref: ref, ...rest, style: [
+            styles.text,
+            textStyle,
+            {
+                writingDirection,
+            },
+            style,
+        ] }));
+});
+const styles = react_native_1.StyleSheet.create({
+    text: {
+        textAlign: 'left',
+    },
+});
+const customAnimatedText = () => AnimatedText;
+exports.customAnimatedText = customAnimatedText;
+exports.default = AnimatedText;

package/src/ui/components/Typography/types.d.ts

@@ -0,0 +1,18 @@
+export declare enum MD3TypescaleKey {
+    displayLarge = "displayLarge",
+    displayMedium = "displayMedium",
+    displaySmall = "displaySmall",
+    headlineLarge = "headlineLarge",
+    headlineMedium = "headlineMedium",
+    headlineSmall = "headlineSmall",
+    titleLarge = "titleLarge",
+    titleMedium = "titleMedium",
+    titleSmall = "titleSmall",
+    labelLarge = "labelLarge",
+    labelMedium = "labelMedium",
+    labelSmall = "labelSmall",
+    bodyLarge = "bodyLarge",
+    bodyMedium = "bodyMedium",
+    bodySmall = "bodySmall"
+}
+export type VariantProp<T> = (T extends string ? (string extends T ? never : T) : never) | keyof typeof MD3TypescaleKey;

package/src/ui/components/Typography/types.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MD3TypescaleKey = void 0;
+// MD3TypescaleKey enum for variant types
+var MD3TypescaleKey;
+(function (MD3TypescaleKey) {
+    MD3TypescaleKey["displayLarge"] = "displayLarge";
+    MD3TypescaleKey["displayMedium"] = "displayMedium";
+    MD3TypescaleKey["displaySmall"] = "displaySmall";
+    MD3TypescaleKey["headlineLarge"] = "headlineLarge";
+    MD3TypescaleKey["headlineMedium"] = "headlineMedium";
+    MD3TypescaleKey["headlineSmall"] = "headlineSmall";
+    MD3TypescaleKey["titleLarge"] = "titleLarge";
+    MD3TypescaleKey["titleMedium"] = "titleMedium";
+    MD3TypescaleKey["titleSmall"] = "titleSmall";
+    MD3TypescaleKey["labelLarge"] = "labelLarge";
+    MD3TypescaleKey["labelMedium"] = "labelMedium";
+    MD3TypescaleKey["labelSmall"] = "labelSmall";
+    MD3TypescaleKey["bodyLarge"] = "bodyLarge";
+    MD3TypescaleKey["bodyMedium"] = "bodyMedium";
+    MD3TypescaleKey["bodySmall"] = "bodySmall";
+})(MD3TypescaleKey || (exports.MD3TypescaleKey = MD3TypescaleKey = {}));

package/src/ui/components/feedback/FormInput.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { FeedbackColors } from './types';
+interface FormInputProps {
+    icon: string;
+    label: string;
+    value: string;
+    onChangeText: (text: string) => void;
+    placeholder?: string;
+    multiline?: boolean;
+    numberOfLines?: number;
+    testID?: string;
+    colors: FeedbackColors;
+    styles: any;
+    borderColor?: string;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+}
+declare const FormInput: React.FC<FormInputProps>;
+export default FormInput;

package/src/ui/components/feedback/FormInput.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const vector_icons_1 = require("@expo/vector-icons");
+const FormInput = react_1.default.memo(({ icon, label, value, onChangeText, placeholder, multiline = false, numberOfLines = 1, testID, colors, styles, borderColor, accessibilityLabel, accessibilityHint, }) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.inputContainer, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            multiline ? styles.textAreaWrapper : styles.premiumInputWrapper,
+            {
+                borderColor: borderColor || colors.border,
+                backgroundColor: colors.inputBackground,
+                shadowColor: colors.primary,
+                shadowOffset: { width: 0, height: 4 },
+                shadowOpacity: 0.1,
+                shadowRadius: 12,
+                elevation: 3,
+            }
+        ], children: [!multiline && ((0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: icon, size: 22, color: colors.secondaryText, style: styles.inputIcon })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.inputContent, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.modernLabel, { color: colors.secondaryText }], children: label }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [
+                            multiline ? styles.textArea : styles.modernInput,
+                            { color: colors.text }
+                        ], value: value, onChangeText: onChangeText, placeholder: placeholder, placeholderTextColor: `${colors.secondaryText}60`, multiline: multiline, numberOfLines: multiline ? numberOfLines : undefined, testID: testID, accessibilityLabel: accessibilityLabel || label, accessibilityHint: accessibilityHint })] })] }) })));
+FormInput.displayName = 'FormInput';
+exports.default = FormInput;

package/src/ui/components/feedback/ProgressIndicator.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { FeedbackColors } from './types';
+interface ProgressIndicatorProps {
+    currentStep: number;
+    totalSteps: number;
+    colors: FeedbackColors;
+    styles: any;
+}
+declare const ProgressIndicator: React.FC<ProgressIndicatorProps>;
+export default ProgressIndicator;

package/src/ui/components/feedback/ProgressIndicator.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const ProgressIndicator = react_1.default.memo(({ currentStep, totalSteps, colors, styles, }) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.progressContainer, accessibilityRole: "progressbar", accessibilityLabel: `Step ${currentStep + 1} of ${totalSteps}`, children: Array.from({ length: totalSteps }, (_, index) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+            styles.progressDot,
+            currentStep === index ?
+                { backgroundColor: colors.primary, width: 24 } :
+                { backgroundColor: colors.border }
+        ] }, index))) })));
+ProgressIndicator.displayName = 'ProgressIndicator';
+exports.default = ProgressIndicator;

package/src/ui/components/feedback/constants.d.ts

@@ -0,0 +1,4 @@
+import type { FeedbackType, PriorityLevel } from './types';
+export declare const FEEDBACK_TYPES: FeedbackType[];
+export declare const PRIORITY_LEVELS: PriorityLevel[];
+export declare const CATEGORIES: Record<string, string[]>;

package/src/ui/components/feedback/constants.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CATEGORIES = exports.PRIORITY_LEVELS = exports.FEEDBACK_TYPES = void 0;
+exports.FEEDBACK_TYPES = [
+    { id: 'bug', label: 'Bug Report', icon: 'bug', color: '#FF3B30', description: 'Report a problem or issue' },
+    { id: 'feature', label: 'Feature Request', icon: 'bulb', color: '#007AFF', description: 'Suggest a new feature' },
+    { id: 'general', label: 'General Feedback', icon: 'chatbubble', color: '#34C759', description: 'Share your thoughts' },
+    { id: 'support', label: 'Support Request', icon: 'help-circle', color: '#FF9500', description: 'Get help with something' },
+];
+exports.PRIORITY_LEVELS = [
+    { id: 'low', label: 'Low', icon: 'arrow-down', color: '#34C759' },
+    { id: 'medium', label: 'Medium', icon: 'remove', color: '#FF9500' },
+    { id: 'high', label: 'High', icon: 'arrow-up', color: '#FF3B30' },
+    { id: 'critical', label: 'Critical', icon: 'warning', color: '#FF0000' },
+];
+exports.CATEGORIES = {
+    bug: ['UI/UX', 'Performance', 'Authentication', 'File Management', 'Billing', 'Other'],
+    feature: ['User Interface', 'File Management', 'Security', 'Performance', 'Integration', 'Other'],
+    general: ['User Experience', 'Design', 'Performance', 'Documentation', 'Other'],
+    support: ['Account Issues', 'Billing', 'Technical Problems', 'Feature Questions', 'Other'],
+};