@ovotech/element-native 0.0.1 → 0.0.2

package/dist/components/Notification/Notification.js

@@ -0,0 +1,90 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WarningNotification = exports.InfoNotification = exports.SuccessNotification = exports.ErrorNotification = exports.Notification = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var hooks_1 = require("../../hooks");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var Heading_1 = require("../Heading");
+var Icon_1 = require("../Icon");
+var NotificationBox = styled_native_1.default.View(function (_a) {
+    var _b = _a.theme, notification = _b.notification, space = _b.space, smallAndUp = _a.smallAndUp, _c = _a.variant, variant = _c === void 0 ? 'info' : _c, noMargin = _a.noMargin;
+    // @ts-ignore to support additional palettes.
+    var currentVariant = notification.variants[variant];
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n      border: ", " solid ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      ", "\n    "], ["\n      position: relative;\n      border: ", " solid ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      ", "\n    "])), notification.borderWidth, currentVariant.borderColor, currentVariant.background, notification.borderRadius, notification.padding[smallAndUp ? 1 : 0], noMargin ? null : "margin-bottom: ".concat(space[4], ";"));
+});
+var NotificationTitle = (0, styled_native_1.default)(Heading_1.Heading2)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 0;\n"], ["\n  margin-top: 0;\n"])));
+var DismissButton = styled_native_1.default.TouchableOpacity(function (_a) {
+    var notification = _a.theme.notification;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: ", ";\n    height: ", ";\n    position: absolute;\n    color: ", ";\n    top: 0;\n    right: 0;\n    align-items: center;\n    justify-content: center;\n  "], ["\n    width: ", ";\n    height: ", ";\n    position: absolute;\n    color: ", ";\n    top: 0;\n    right: 0;\n    align-items: center;\n    justify-content: center;\n  "])), notification.dismiss.touchSize, notification.dismiss.touchSize, notification.dismiss.color);
+});
+exports.Notification = (0, react_1.forwardRef)(function (_a, ref) {
+    var variant = _a.variant, children = _a.children, title = _a.title, noMargin = _a.noMargin, dismissable = _a.dismissable, onDismiss = _a.onDismiss, rest = __rest(_a, ["variant", "children", "title", "noMargin", "dismissable", "onDismiss"]);
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    var theme = (0, react_1.useContext)(styled_native_1.ThemeContext);
+    var _b = (0, react_1.useState)(false), dismissed = _b[0], setDismissed = _b[1];
+    return dismissed ? null : (react_1.default.createElement(react_native_1.View, __assign({ ref: ref }, rest), children ? (react_1.default.createElement(NotificationBox, __assign({ variant: variant, noMargin: noMargin, testID: "nb-notification" }, breakpoints),
+        dismissable && (react_1.default.createElement(DismissButton, { accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
+                setDismissed(true);
+                if (onDismiss) {
+                    onDismiss();
+                }
+            } },
+            react_1.default.createElement(Icon_1.Icon, { name: theme.notification.dismiss.icon, size: theme.notification.dismiss.size }))),
+        title && react_1.default.createElement(NotificationTitle, null, title),
+        children)) : null));
+});
+exports.ErrorNotification = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(exports.Notification, __assign({ ref: ref, variant: "error", title: react_1.default.createElement(react_1.default.Fragment, null, "Oops, there\u2019s a problem\u2026") }, props))); });
+exports.SuccessNotification = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(exports.Notification, __assign({ ref: ref, variant: "success" }, props))); });
+exports.InfoNotification = (0, react_1.forwardRef)(function (props, ref) { return react_1.default.createElement(exports.Notification, __assign({ ref: ref, variant: "info" }, props)); });
+exports.WarningNotification = (0, react_1.forwardRef)(function (props, ref) { return react_1.default.createElement(exports.Notification, __assign({ ref: ref, variant: "warning" }, props)); });
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Notification/index.d.ts

@@ -0,0 +1 @@
+export { Notification, ErrorNotification, InfoNotification, WarningNotification, SuccessNotification, } from './Notification';

package/dist/components/Notification/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuccessNotification = exports.WarningNotification = exports.InfoNotification = exports.ErrorNotification = exports.Notification = void 0;
+var Notification_1 = require("./Notification");
+Object.defineProperty(exports, "Notification", { enumerable: true, get: function () { return Notification_1.Notification; } });
+Object.defineProperty(exports, "ErrorNotification", { enumerable: true, get: function () { return Notification_1.ErrorNotification; } });
+Object.defineProperty(exports, "InfoNotification", { enumerable: true, get: function () { return Notification_1.InfoNotification; } });
+Object.defineProperty(exports, "WarningNotification", { enumerable: true, get: function () { return Notification_1.WarningNotification; } });
+Object.defineProperty(exports, "SuccessNotification", { enumerable: true, get: function () { return Notification_1.SuccessNotification; } });

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+declare const Radio: React.ForwardRefExoticComponent<Omit<TouchableOpacityProps, "children"> & {
+    label: ReactNode;
+    value: string;
+    hint?: ReactNode;
+    checked?: boolean | undefined;
+    invalid?: boolean | undefined;
+    onValueChange?: ((value?: string) => void) | undefined;
+    activeOpacity?: number | undefined;
+} & React.RefAttributes<TouchableOpacity>>;
+export { Radio };

package/dist/components/Radio/Radio.js

@@ -0,0 +1,110 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.Radio = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var HintText_1 = require("../HintText");
+var SubLabelText_1 = require("../SubLabelText");
+var StyledRadioInputWrapper = styled_native_1.default.View(function (_a) {
+    var radio = _a.theme.radio;
+    var radioSize = (0, utils_1.pxToNumber)(radio.size);
+    var gap = (0, utils_1.pxToNumber)(radio.gap);
+    return "\n      width: ".concat(radioSize + gap, "px;\n      height: ").concat(radio.touchSize, ";\n    ");
+});
+var StyledRadioInput = styled_native_1.default.View(function (_a) {
+    var radio = _a.theme.radio, invalid = _a.invalid;
+    var touchSize = (0, utils_1.pxToNumber)(radio.touchSize);
+    var radioSize = (0, utils_1.pxToNumber)(radio.size);
+    var radioDistance = (touchSize - radioSize) / 2;
+    return "\n      width: ".concat(radio.size, ";\n      height: ").concat(radio.size, ";\n      border: ").concat(radio.borderWidth, " solid;\n      margin-top: ").concat(radioDistance, "px;\n      border-radius: ").concat(radioSize / 2, "px;\n      border-color: ").concat(invalid ? radio.errorColor : radio.borderColor, ";\n      background: ").concat(radio.background, ";\n    ");
+});
+var StyledRadioInputDot = styled_native_1.default.View(function (_a) {
+    var radio = _a.theme.radio, checked = _a.checked;
+    var radioSize = (0, utils_1.pxToNumber)(radio.size);
+    var dotSize = (0, utils_1.pxToNumber)(radio.dotSize);
+    var borderWidth = (0, utils_1.pxToNumber)(radio.borderWidth);
+    var dotDistance = (radioSize - dotSize) / 2 - borderWidth;
+    return "\n      width: ".concat(radio.dotSize, ";\n      height: ").concat(radio.dotSize, ";\n      margin: ").concat(dotDistance, "px;\n      border-radius: ").concat(radioSize / 2, "px;\n      background: ").concat(radio.dotColor, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+});
+var Input = function (_a) {
+    var checked = _a.checked, invalid = _a.invalid, rest = __rest(_a, ["checked", "invalid"]);
+    return (react_1.default.createElement(StyledRadioInputWrapper, __assign({}, rest),
+        react_1.default.createElement(StyledRadioInput, { invalid: invalid },
+            react_1.default.createElement(StyledRadioInputDot, { checked: checked }))));
+};
+var LabelText = (0, styled_native_1.default)(SubLabelText_1.SubLabelText)(function (_a) {
+    var space = _a.theme.space;
+    return "\n    padding-top: ".concat(space[3], ";\n  ");
+});
+var StyledWrapper = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
+var Radio = (0, react_1.forwardRef)(function (_a, ref) {
+    var label = _a.label, hint = _a.hint, checked = _a.checked, invalid = _a.invalid, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    value = _a.value, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
+    _b = _a.activeOpacity, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
+    activeOpacity = _b === void 0 ? 0.8 : _b, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "activeOpacity"]);
+    return (react_1.default.createElement(react_native_1.TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, 
+        // @ts-ignore
+        invalid: invalid }, rest),
+        react_1.default.createElement(StyledWrapper, null,
+            react_1.default.createElement(Input, { checked: checked, invalid: invalid }),
+            react_1.default.createElement(react_native_1.View, { style: { flexShrink: 1 } },
+                react_1.default.createElement(LabelText, null, label),
+                hint ? react_1.default.createElement(HintText_1.HintText, null, hint) : null))));
+});
+exports.Radio = Radio;
+var templateObject_1;

package/dist/components/Radio/RadioField.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren, ReactNode } from 'react';
+declare type Props = PropsWithChildren<{
+    label: ReactNode;
+    value: string;
+    onValueChange: (newValue: string | undefined) => void;
+    hint?: ReactNode;
+    error?: ReactNode;
+    optional?: boolean;
+}>;
+declare const RadioField: ({ label, hint, error, children, optional, value, onValueChange, ...rest }: Props) => JSX.Element;
+export { RadioField };

package/dist/components/Radio/RadioField.js

@@ -0,0 +1,78 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioField = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var utils_1 = require("../../utils");
+var ErrorText_1 = require("../ErrorText");
+var FormGroup_1 = require("../FormGroup");
+var HintText_1 = require("../HintText");
+var LabelText_1 = require("../LabelText");
+var Stack_1 = require("../Stack");
+var RadioField = function (_a) {
+    var label = _a.label, hint = _a.hint, error = _a.error, children = _a.children, _b = _a.optional, optional = _b === void 0 ? false : _b, value = _a.value, onValueChange = _a.onValueChange, rest = __rest(_a, ["label", "hint", "error", "children", "optional", "value", "onValueChange"]);
+    var hasError = !!error;
+    return (react_1.default.createElement(FormGroup_1.FormGroup, __assign({}, rest, { error: hasError }),
+        react_1.default.createElement(Stack_1.Stack, { spaceBetween: 1 },
+            react_1.default.createElement(react_native_1.View, null,
+                react_1.default.createElement(LabelText_1.LabelText, null,
+                    label,
+                    optional ? ' (optional)' : null),
+                hint ? react_1.default.createElement(HintText_1.HintText, null, hint) : null,
+                error ? react_1.default.createElement(ErrorText_1.ErrorText, null, error) : null),
+            react_1.default.createElement(react_native_1.View, { accessibilityRole: "radiogroup" }, react_1.Children.map(children, function (child) {
+                return (0, react_1.cloneElement)(child, {
+                    invalid: hasError ? true : child.props.invalid,
+                    checked: child.props.checked != null
+                        ? child.props.checked
+                        : value && (value === child.props.value ? true : false),
+                    onPress: (0, utils_1.callAll)(onValueChange && (function () { return onValueChange(child.props.value); }), child.props.onPress),
+                });
+            })))));
+};
+exports.RadioField = RadioField;

package/dist/components/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export { Radio } from './Radio';
+export { RadioField } from './RadioField';

package/dist/components/Radio/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioField = exports.Radio = void 0;
+var Radio_1 = require("./Radio");
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
+var RadioField_1 = require("./RadioField");
+Object.defineProperty(exports, "RadioField", { enumerable: true, get: function () { return RadioField_1.RadioField; } });

package/dist/components/SkeletonLoading/Skeleton.d.ts

@@ -0,0 +1 @@
+export declare const Skeleton: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme, {}, never>;

package/dist/components/SkeletonLoading/Skeleton.js

@@ -0,0 +1,33 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = void 0;
+var styled_native_1 = __importStar(require("../../styled.native"));
+exports.Skeleton = styled_native_1.default.View(function () { return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    overflow: hidden;\n    display: flex;\n\n    &:after {\n      content: '';\n      position: absolute;\n      opacity: 0.6;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      background: linear-gradient(\n        90deg,\n        rgba(255, 255, 255, 0) 0%,\n        rgba(255, 255, 255, 1) 50%,\n        rgba(255, 255, 255, 0) 100%\n      );\n      background-size: 100px;\n      background-repeat: no-repeat;\n    }\n  "], ["\n    position: relative;\n    overflow: hidden;\n    display: flex;\n\n    &:after {\n      content: '';\n      position: absolute;\n      opacity: 0.6;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      background: linear-gradient(\n        90deg,\n        rgba(255, 255, 255, 0) 0%,\n        rgba(255, 255, 255, 1) 50%,\n        rgba(255, 255, 255, 0) 100%\n      );\n      background-size: 100px;\n      background-repeat: no-repeat;\n    }\n  "]))); });
+var templateObject_1;

package/dist/components/SkeletonLoading/SkeletonCTA.d.ts

@@ -0,0 +1,6 @@
+import { ViewProps } from 'react-native';
+declare type Props = ViewProps & {
+    size?: string;
+};
+export declare const SkeletonCTA: ({ size, ...rest }: Props) => JSX.Element;
+export {};

package/dist/components/SkeletonLoading/SkeletonCTA.js

@@ -0,0 +1,41 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.SkeletonCTA = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var Text_1 = require("../Text");
+var Skeleton_1 = require("./Skeleton");
+var StyledSkeletonCTA = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
+    var _b = _a.theme, colors = _b.colors, space = _b.space, size = _a.size;
+    return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n    height: ").concat(space[12], ";\n  ");
+});
+var SkeletonCTA = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);
+    return (react_1.default.createElement(StyledSkeletonCTA, __assign({ as: Text_1.P, size: size }, rest)));
+};
+exports.SkeletonCTA = SkeletonCTA;

package/dist/components/SkeletonLoading/SkeletonCircle.d.ts

@@ -0,0 +1,6 @@
+import { ViewProps } from 'react-native';
+declare type Props = ViewProps & {
+    size?: string;
+};
+export declare const SkeletonCircle: ({ size, ...rest }: Props) => JSX.Element;
+export {};

package/dist/components/SkeletonLoading/SkeletonCircle.js

@@ -0,0 +1,46 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.SkeletonCircle = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var Skeleton_1 = require("./Skeleton");
+var StyledSkeletonCircleWrapper = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
+    var size = _a.size;
+    return "width: ".concat(size, "; max-width: 100%;");
+});
+var StyledSkeletonCircle = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
+    var colors = _a.theme.colors, size = _a.size;
+    return "\n    background-color: ".concat(colors.borderMuted, ";\n    height: 0;\n    padding-bottom: 100%;\n    border-radius: ").concat((0, utils_1.pxToNumber)(size) / 2, "px;\n  ");
+});
+var SkeletonCircle = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["size"]);
+    return (react_1.default.createElement(StyledSkeletonCircleWrapper, __assign({ size: size }, rest),
+        react_1.default.createElement(StyledSkeletonCircle, { size: size })));
+};
+exports.SkeletonCircle = SkeletonCircle;

package/dist/components/SkeletonLoading/SkeletonHeading.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from 'react';
+import { ViewProps } from 'react-native';
+declare type Props = ViewProps & {
+    size?: string;
+    headingComponent?: ComponentType<any>;
+};
+export declare const SkeletonHeading: ({ size, headingComponent: Heading, ...rest }: Props) => JSX.Element;
+export {};

package/dist/components/SkeletonLoading/SkeletonHeading.js

@@ -0,0 +1,41 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.SkeletonHeading = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var Heading_1 = require("../Heading");
+var Skeleton_1 = require("./Skeleton");
+var StyledSkeletonHeading = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
+    var colors = _a.theme.colors, size = _a.size;
+    return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n  ");
+});
+var SkeletonHeading = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading_1.Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);
+    return (react_1.default.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0"));
+};
+exports.SkeletonHeading = SkeletonHeading;

package/dist/components/SkeletonLoading/SkeletonText.d.ts

@@ -0,0 +1,6 @@
+import { ViewProps } from 'react-native';
+declare type Props = ViewProps & {
+    lines?: number;
+};
+export declare const SkeletonText: ({ lines, ...rest }: Props) => JSX.Element;
+export {};

package/dist/components/SkeletonLoading/SkeletonText.js

@@ -0,0 +1,49 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.SkeletonText = void 0;
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var hooks_1 = require("../../hooks");
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var Text_1 = require("../Text");
+var Skeleton_1 = require("./Skeleton");
+var StyledSkeletonText = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
+    var _b = _a.theme, colors = _b.colors, space = _b.space, responsiveFontSizes = _b.responsiveFontSizes, short = _a.short, breakpoints = _a.breakpoints;
+    return "\n    background-color: ".concat(colors.borderMuted, ";\n    margin-bottom: ").concat(space[2], ";\n    ").concat((0, utils_1.responsiveStyle)('height', responsiveFontSizes.body, breakpoints), "\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
+});
+var SkeletonText = function (_a) {
+    var _b = _a.lines, lines = _b === void 0 ? 1 : _b, rest = __rest(_a, ["lines"]);
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    var generatedLines = [];
+    for (var i = 1; i <= lines; i++) {
+        generatedLines.push(react_1.default.createElement(StyledSkeletonText, { key: "line-".concat(i), short: i === lines, breakpoints: breakpoints }));
+    }
+    return (react_1.default.createElement(Text_1.P, __assign({ as: react_native_1.View }, rest), generatedLines));
+};
+exports.SkeletonText = SkeletonText;

package/dist/components/SkeletonLoading/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Skeleton';
+export * from './SkeletonCircle';
+export * from './SkeletonCTA';
+export * from './SkeletonHeading';
+export * from './SkeletonText';

package/dist/components/SkeletonLoading/index.js

@@ -0,0 +1,21 @@
+"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("./Skeleton"), exports);
+__exportStar(require("./SkeletonCircle"), exports);
+__exportStar(require("./SkeletonCTA"), exports);
+__exportStar(require("./SkeletonHeading"), exports);
+__exportStar(require("./SkeletonText"), exports);

package/dist/components/Stack/Stack.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+import { Theme } from '../../theme';
+declare type SpaceKey = keyof Theme['space'];
+declare type Props = ViewProps & {
+    spaceBetween: SpaceKey | SpaceKey[];
+    children: ReactNode;
+};
+declare const Stack: ({ children, spaceBetween, ...rest }: Props) => JSX.Element;
+export { Stack };