@nascentdigital/funnel-apps 4.4.18

package/dist/reactnative/ui/rn/Tailwind.js

@@ -0,0 +1,211 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tailwind = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const color_1 = __importDefault(require("color"));
+const path_1 = __importDefault(require("path"));
+// namespace
+var Tailwind;
+(function (Tailwind) {
+    function createConfig({ content = [], colors = {}, safelist = [] }) {
+        return {
+            // build settings
+            presets: [
+                require('nativewind/preset')
+            ],
+            content: [
+                './src/**/*.{tsx,jsx,ts,js}',
+                `${__dirname}/**/*.{tsx,jsx,ts,js}`,
+                path_1.default.join(path_1.default.dirname(require.resolve('@nascentdigital/funnel-apps/rn')), '**/*.{tsx,jsx,ts,js}'),
+                ...content
+            ],
+            safelist: [
+                ...safelist
+            ],
+            // base theming
+            theme: {
+                // layout
+                screens: getScreens(funnel_core_1.Breakpoints.defaults),
+                spacing: Object.assign(Object.assign(Object.assign(Object.assign({ 
+                    // basic
+                    'initial': 'initial', 'revert': 'revert', 'unset': 'unset', '0': '0px', 'px': '1px' }, funnel_core_1.ObjectUtils.createSeries({ start: 1, end: 19, step: 1, getValue: toPixel })), funnel_core_1.ObjectUtils.createSeries({ start: 20, end: 64, step: 2, getValue: toPixel })), getScreenSizes(funnel_core_1.Breakpoints.defaults)), { 
+                    // semantic spacing
+                    l1: '2px', l2: '4px', l3: '6px', l4: '8px', l5: '12px', l6: '16px', l7: '20px', l8: '24px', l9: '32px', l10: '40px', l11: '48px', l12: '56px', l13: '64px', l14: '72px', l15: '80px', l16: '96px', l17: '120px', l18: '160px', l19: '180px', touchable: '40px', icon: '24px' }),
+                zIndex: {
+                    tooltip: '150',
+                    popup: '140',
+                    dialogFab: '135',
+                    dialog: '130',
+                    superbackdrop: '125',
+                    superheader: '121',
+                    header: '120',
+                    subheader: '110',
+                    backdrop: '100',
+                    fab: '20',
+                    superoverlay: '11',
+                    overlay: '10',
+                    supersurface: '2',
+                    surface: '1',
+                    tint: '0',
+                    background: '-1'
+                },
+                rotate: {
+                    '0': '0deg',
+                    '45': '45deg',
+                    '90': '90deg',
+                    '135': '135deg',
+                    '180': '180deg',
+                    '225': '225deg',
+                    '270': '270deg',
+                    '315': '315deg'
+                },
+                aspectRatio: {
+                    auto: 'auto',
+                    square: '1 / 1',
+                    camera: '3 / 2',
+                    cameraAlt: '2 / 3',
+                    video: '16 / 9',
+                    phone: '9 / 16',
+                    tv: '4 / 3',
+                    tvAlt: '3 / 4',
+                    computer: '5 / 4',
+                    widescreen: '16 / 9',
+                    cinema: '185 / 100',
+                    cinemascope: '235 / 100'
+                },
+                // colors (base)
+                colors: Object.assign(Object.assign({}, transformToRGB(colors)), { inherit: 'inherit', current: 'currentColor', transparent: 'transparent' }),
+                opacity: {
+                    'l1': '.05',
+                    'l2': '.08',
+                    'l3': '.11',
+                    'l4': '.12',
+                    'l5': '.14',
+                    'hover': '.08',
+                    'focus': '.16',
+                    'press': '.16',
+                    'press_invert': '.8',
+                    'drag': '.16',
+                    'disabled': '.38',
+                    'faded': '.50',
+                    'backdrop': '.85',
+                    'none': '0',
+                    'full': '1'
+                },
+                // typography
+                fontFamily: {},
+                leading: {
+                    none: '0',
+                    tight: '110%',
+                    normal: '120%',
+                    loose: '140%'
+                },
+                // border
+                borderWidth: {
+                    DEFAULT: '1px',
+                    '0': '0',
+                    '2': '2px',
+                    '3': '3px',
+                    '4': '4px',
+                    '8': '8px'
+                },
+                borderRadius: {
+                    DEFAULT: '24px',
+                    none: '0px',
+                    xs: '8px',
+                    sm: '12px',
+                    md: '24px',
+                    lg: '32px',
+                    xl: '40px',
+                    full: '9999px'
+                },
+                // shadows
+                boxShadow: {
+                    none: '0 0 #0000',
+                    l1: '0px 1px 4px 0px rgba(12, 12, 13, 0.05)',
+                    l2: '0px 1px 4px 0px rgba(12, 12, 13, 0.05), 0px 1px 4px 0px rgba(12, 12, 13, 0.1)',
+                    l3: '0px 4px 4px -1px rgba(12, 12, 13, 0.05), 0px 4px 4px -1px rgba(12, 12, 13, 0.1)',
+                    l4: '0px 4px 4px -4px rgba(12, 12, 13, 0.05), 0px 16px 32px -1px rgba(12, 12, 13, 0.1)',
+                    l5: '0px 4px 4px -4px rgba(12, 12, 13, 0.05), 0px 16px 16px -8px rgba(12, 12, 13, 0.1)',
+                    l6: '0px 16px 32px -8px rgba(12, 12, 13, 0.4)',
+                    popup: '4px 4px 10px 0px rgba(0, 0, 0, 0.15)',
+                    menu: '0px 2px 4px 0px rgba(0, 0, 0, 0.20), 0px 1px 3px 1px rgba(0, 0, 0, 0.10)',
+                    card: '0px 3px 8px 0px rgba(0, 0, 0, 0.24)'
+                },
+                extend: {
+                    animation: {
+                        'spin-slow': 'spin 2s linear infinite'
+                    },
+                    content: {
+                        empty: '"\\00a0"'
+                    },
+                    transitionDuration: {
+                        '150': '150ms',
+                        '250': '250ms',
+                        '350': '350ms',
+                        '400': '400ms',
+                        '450': '450ms',
+                        '500': '500ms',
+                        '600': '600ms',
+                        '800': '800ms'
+                    }
+                }
+            },
+            // plugins
+            plugins: [
+                require('@tailwindcss/container-queries')
+            ]
+        };
+    }
+    Tailwind.createConfig = createConfig;
+    // helpers
+    function toPixel(value) {
+        return `${value}px`;
+    }
+    Tailwind.toPixel = toPixel;
+    function getScreens(breakpoints) {
+        const breakpointEntries = Object.entries(breakpoints);
+        return breakpointEntries.reduce((breakpoints, entry) => {
+            // determine values
+            const [breakpoint, width] = entry;
+            // add breakpoint (skip xs)
+            if (breakpoint !== 'xs') {
+                breakpoints[breakpoint] = toPixel(width);
+            }
+            // keep reducing
+            return breakpoints;
+        }, {});
+    }
+    Tailwind.getScreens = getScreens;
+    function getScreenSizes(breakpoints) {
+        return Object.entries(breakpoints).reduce((sizes, [breakpoint, size], index) => {
+            // add screen size if reducing
+            if (index > 0 && funnel_core_1.Breakpoint.test(breakpoint)) {
+                sizes[`screen-${breakpoint}`] = `${size}px`;
+            }
+            // keep reducing
+            return sizes;
+        }, {});
+    }
+    Tailwind.getScreenSizes = getScreenSizes;
+    function transformToRGB(colors) {
+        // transform colors to rgb values
+        return Object.entries(colors).reduce((colors, [colorName, colorValue]) => {
+            // parse variable
+            if (colorValue.startsWith('--')) {
+                colors[colorName] = `rgb(var(${colorValue}) / <alpha-value>)`;
+            }
+            // or parse color
+            else {
+                const color = (0, color_1.default)(colorValue);
+                colors[colorName] = `rgb(${color.red()} ${color.green()} ${color.blue()} / <alpha-value>)`;
+            }
+            // keep reducing
+            return colors;
+        }, {});
+    }
+    Tailwind.transformToRGB = transformToRGB;
+})(Tailwind || (exports.Tailwind = Tailwind = {}));

package/dist/reactnative/ui/rn/atomic/Button.d.ts

@@ -0,0 +1,97 @@
+import React, { ReactNode } from 'react';
+import { PressableProps } from 'react-native/Libraries/Components/Pressable/Pressable';
+import { type VariantProps } from 'tailwind-variants';
+export declare function Button({ className, variant, size, label, iconLeft, iconRight, ...props }: Button.Props): React.JSX.Element;
+export declare namespace Button {
+    const variants: import("tailwind-variants", { with: { "resolution-mode": "import" } }).TVReturnType<{
+        variant: {
+            filled: {
+                container: string;
+            };
+            outlined: {
+                container: string;
+            };
+            text: {
+                container: string;
+            };
+        };
+        size: {
+            sm: {
+                container: string;
+            };
+            md: {
+                container: string;
+            };
+            lg: {
+                container: string;
+            };
+        };
+    }, {
+        container: string;
+        label: string;
+        iconLeft: string;
+        iconRight: string;
+    }, undefined, {
+        variant: {
+            filled: {
+                container: string;
+            };
+            outlined: {
+                container: string;
+            };
+            text: {
+                container: string;
+            };
+        };
+        size: {
+            sm: {
+                container: string;
+            };
+            md: {
+                container: string;
+            };
+            lg: {
+                container: string;
+            };
+        };
+    }, {
+        container: string;
+        label: string;
+        iconLeft: string;
+        iconRight: string;
+    }, import("tailwind-variants", { with: { "resolution-mode": "import" } }).TVReturnType<{
+        variant: {
+            filled: {
+                container: string;
+            };
+            outlined: {
+                container: string;
+            };
+            text: {
+                container: string;
+            };
+        };
+        size: {
+            sm: {
+                container: string;
+            };
+            md: {
+                container: string;
+            };
+            lg: {
+                container: string;
+            };
+        };
+    }, {
+        container: string;
+        label: string;
+        iconLeft: string;
+        iconRight: string;
+    }, undefined, unknown, unknown, undefined>>;
+    type Props = Omit<PressableProps, 'children'> & VariantProps<typeof variants> & {
+        className?: string;
+        label?: string;
+        iconLeft?: ReactNode;
+        iconRight?: ReactNode;
+    };
+}

package/dist/reactnative/ui/rn/atomic/Button.js

@@ -0,0 +1,75 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = Button;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const tailwind_variants_1 = require("tailwind-variants");
+// component
+function Button(_a) {
+    var { className, variant, size, label, iconLeft, iconRight } = _a, props = __rest(_a, ["className", "variant", "size", "label", "iconLeft", "iconRight"]);
+    // bind styles
+    const { container: containerClassName, label: labelClassName, iconLeft: iconLeftClassName, iconRight: iconRightClassName } = Button.variants({ variant, size });
+    // render
+    return (<react_native_1.Pressable className={(0, classnames_1.default)(containerClassName({ className }))} {...props}>
+      {/* left icon */}
+      {iconLeft &&
+            <react_native_1.View className={iconLeftClassName()}>
+          {iconLeft}
+        </react_native_1.View>}
+
+      {/* label */}
+      {label &&
+            <react_native_1.Text className={labelClassName()}>
+          {label}
+        </react_native_1.Text>}
+
+      {/* right icon */}
+      {iconRight &&
+            <react_native_1.View className={iconRightClassName()}>
+          {iconRight}
+        </react_native_1.View>}
+    </react_native_1.Pressable>);
+}
+// extension
+(function (Button) {
+    // variants
+    Button.variants = (0, tailwind_variants_1.tv)({
+        slots: {
+            container: 'nd-Button',
+            label: 'nd-Button-label',
+            iconLeft: 'nd-Button-iconLeft',
+            iconRight: 'nd-Button-iconRight'
+        },
+        variants: {
+            variant: {
+                filled: { container: 'nd-Button-filled' },
+                outlined: { container: 'nd-Button-outlined' },
+                text: { container: 'nd-Button-text' },
+            },
+            size: {
+                sm: { container: 'nd-Button-sm' },
+                md: { container: 'nd-Button-md' },
+                lg: { container: 'nd-Button-lg' }
+            }
+        },
+        defaultVariants: {
+            variant: 'filled',
+            size: 'md'
+        }
+    });
+})(Button || (exports.Button = Button = {}));

package/dist/reactnative/ui/rn/atomic/TextField.d.ts

@@ -0,0 +1,112 @@
+import React, { ReactNode } from 'react';
+import { TextInputProps } from 'react-native';
+import { type VariantProps } from 'tailwind-variants';
+export declare function TextField({ className, status, iconLeft, iconRight, value, disabled, onFocus, onBlur, ...props }: TextField.Props): React.JSX.Element;
+export declare namespace TextField {
+    const variants: import("tailwind-variants", { with: { "resolution-mode": "import" } }).TVReturnType<{
+        status: {
+            normal: {
+                container: string;
+            };
+            success: {
+                container: string;
+            };
+            error: {
+                container: string;
+            };
+        };
+        isDisabled: {
+            true: {
+                container: string;
+            };
+        };
+        isEmpty: {
+            true: {
+                container: string;
+                field: string;
+            };
+        };
+        isFocused: {
+            true: {
+                container: string;
+            };
+        };
+    }, {
+        container: string;
+        field: string;
+        iconLeft: string;
+        iconRight: string;
+    }, undefined, {
+        status: {
+            normal: {
+                container: string;
+            };
+            success: {
+                container: string;
+            };
+            error: {
+                container: string;
+            };
+        };
+        isDisabled: {
+            true: {
+                container: string;
+            };
+        };
+        isEmpty: {
+            true: {
+                container: string;
+                field: string;
+            };
+        };
+        isFocused: {
+            true: {
+                container: string;
+            };
+        };
+    }, {
+        container: string;
+        field: string;
+        iconLeft: string;
+        iconRight: string;
+    }, import("tailwind-variants", { with: { "resolution-mode": "import" } }).TVReturnType<{
+        status: {
+            normal: {
+                container: string;
+            };
+            success: {
+                container: string;
+            };
+            error: {
+                container: string;
+            };
+        };
+        isDisabled: {
+            true: {
+                container: string;
+            };
+        };
+        isEmpty: {
+            true: {
+                container: string;
+                field: string;
+            };
+        };
+        isFocused: {
+            true: {
+                container: string;
+            };
+        };
+    }, {
+        container: string;
+        field: string;
+        iconLeft: string;
+        iconRight: string;
+    }, undefined, unknown, unknown, undefined>>;
+    type Props = Omit<TextInputProps, 'ref' | 'placeholderTextColor' | 'cursorColor' | 'selectionColor' | 'editable' | 'children'> & Omit<VariantProps<typeof variants>, 'isDisabled' | 'isEmpty' | 'isFocused'> & {
+        className?: string;
+        iconLeft?: ReactNode;
+        iconRight?: ReactNode;
+        disabled?: boolean;
+    };
+}

package/dist/reactnative/ui/rn/atomic/TextField.js

@@ -0,0 +1,135 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextField = TextField;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const tailwind_variants_1 = require("tailwind-variants");
+const nativewind_1 = require("nativewind");
+// component
+function TextField(_a) {
+    var { className, status, iconLeft, iconRight, value = '', disabled = false, onFocus, onBlur } = _a, props = __rest(_a, ["className", "status", "iconLeft", "iconRight", "value", "disabled", "onFocus", "onBlur"]);
+    // bind styles + states + hooks
+    const [isFocused, setFocused] = (0, react_1.useState)(false);
+    const isEmpty = value.length === 0;
+    const { container: containerClassName, field: fieldClassName, iconLeft: iconLeftClassName, iconRight: iconRightClassName } = TextField.variants({ status, isDisabled: disabled, isEmpty, isFocused });
+    const placeholderColor = (0, nativewind_1.useUnstableNativeVariable)('--nd-textfield-placeholder');
+    const caretColor = (0, nativewind_1.useUnstableNativeVariable)('--nd-textfield-caret');
+    const fieldRef = (0, react_1.useRef)(null);
+    // helpers
+    const onContainerTouch = () => {
+        var _a;
+        (_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const onFieldFocus = (e) => {
+        // update state
+        setFocused(true);
+        // forward event
+        if (onFocus) {
+            onFocus(e);
+        }
+    };
+    const onFieldBlur = (e) => {
+        // update state
+        setFocused(false);
+        // forward event
+        if (onBlur) {
+            onBlur(e);
+        }
+    };
+    // render
+    return (<react_native_1.View className={(0, classnames_1.default)(containerClassName({ className }))} onTouchStart={disabled || isFocused ? undefined : onContainerTouch}>
+      {/* left icon */}
+      {iconLeft &&
+            <react_native_1.View className={iconLeftClassName()}>
+          {iconLeft}
+        </react_native_1.View>}
+
+      {/* field */}
+      <react_native_1.TextInput ref={fieldRef} className={fieldClassName()} placeholderTextColor={placeholderColor !== null && placeholderColor !== void 0 ? placeholderColor : undefined} cursorColor={caretColor !== null && caretColor !== void 0 ? caretColor : undefined} selectionColor={caretColor !== null && caretColor !== void 0 ? caretColor : undefined} editable={!disabled} onFocus={onFieldFocus} onBlur={onFieldBlur} {...props}/>
+
+      {/* right icon */}
+      {iconRight &&
+            <react_native_1.View className={iconRightClassName()}>
+          {iconRight}
+        </react_native_1.View>}
+    </react_native_1.View>);
+}
+// extension
+(function (TextField) {
+    // variants
+    TextField.variants = (0, tailwind_variants_1.tv)({
+        slots: {
+            container: 'nd-TextField',
+            field: 'nd-TextField-field',
+            iconLeft: 'nd-TextField-icon nd-TextField-iconLeft',
+            iconRight: 'nd-TextField-icon nd-TextField-iconRight'
+        },
+        variants: {
+            status: {
+                normal: { container: 'nd-TextField-normal' },
+                success: { container: 'nd-TextField-success' },
+                error: { container: 'nd-TextField-error' }
+            },
+            isDisabled: {
+                true: { container: 'nd-TextField-disabled' }
+            },
+            isEmpty: {
+                true: { container: 'nd-TextField-empty', field: 'nd-TextField-field-empty' }
+            },
+            isFocused: {
+                true: { container: 'nd-TextField-focused' }
+            }
+        },
+        defaultVariants: {
+            status: 'normal'
+        }
+    });
+})(TextField || (exports.TextField = TextField = {}));

package/dist/reactnative/ui/rn/atomic/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+export * from './TextField';

package/dist/reactnative/ui/rn/atomic/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Button"), exports);
+__exportStar(require("./TextField"), exports);

package/dist/reactnative/ui/rn/index.d.ts

@@ -0,0 +1 @@
+export * from './atomic';

package/dist/reactnative/ui/rn/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./atomic"), exports);

package/dist/styles/rn/_index.css

@@ -0,0 +1,2 @@
+@import "./base/_index.css";
+@import "./atomic/_index.css";