@ovotech/element-native 0.0.1 → 0.0.2

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,117 @@
+"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.Checkbox = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var ErrorText_1 = require("../ErrorText");
+var FormGroup_1 = require("../FormGroup");
+var HintText_1 = require("../HintText");
+var Icon_1 = require("../Icon/Icon");
+var Stack_1 = require("../Stack");
+var SubLabelText_1 = require("../SubLabelText");
+var StyledCheckboxInputWrapper = styled_native_1.default.View(function (_a) {
+    var checkbox = _a.theme.checkbox;
+    var checkboxSize = (0, utils_1.pxToNumber)(checkbox.size);
+    var gap = (0, utils_1.pxToNumber)(checkbox.gap);
+    return "\n      width: ".concat(checkboxSize + gap, "px;\n      height: ").concat(checkbox.touchSize, ";\n    ");
+});
+var StyledCheckboxInput = styled_native_1.default.View(function (_a) {
+    var checkbox = _a.theme.checkbox, invalid = _a.invalid;
+    var touchSize = (0, utils_1.pxToNumber)(checkbox.touchSize);
+    var checkboxSize = (0, utils_1.pxToNumber)(checkbox.size);
+    var checkboxDistance = (touchSize - checkboxSize) / 2;
+    return "\n      width: ".concat(checkbox.size, ";\n      height: ").concat(checkbox.size, ";\n      border: ").concat(checkbox.borderWidth, " solid;\n      margin-top: ").concat(checkboxDistance, "px;\n      border-radius: ").concat(checkbox.borderRadius, ";\n      border-color: ").concat(invalid ? checkbox.errorColor : checkbox.borderColor, ";\n      background: ").concat(checkbox.background, ";\n    ");
+});
+var CheckboxCheck = function (props) {
+    var checkbox = (0, react_1.useContext)(styled_native_1.ThemeContext).checkbox;
+    return (react_1.default.createElement(Icon_1.Icon, __assign({ name: "check", size: (0, utils_1.pxToNumber)(checkbox.checkSize), color: checkbox.checkColor }, props)));
+};
+var StyledCheckboxInputCheck = (0, styled_native_1.default)(CheckboxCheck)(function (_a) {
+    var checkbox = _a.theme.checkbox, checked = _a.checked;
+    var checkboxSize = (0, utils_1.pxToNumber)(checkbox.size);
+    var checkSize = (0, utils_1.pxToNumber)(checkbox.checkSize);
+    var borderWidth = (0, utils_1.pxToNumber)(checkbox.borderWidth);
+    var checkDistance = (checkboxSize - checkSize) / 2 - borderWidth;
+    return "\n      margin-top: ".concat(checkDistance, "px;\n      margin-left: ").concat(checkDistance, "px;\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(StyledCheckboxInputWrapper, __assign({}, rest),
+        react_1.default.createElement(StyledCheckboxInput, { invalid: invalid },
+            react_1.default.createElement(StyledCheckboxInputCheck, { checked: checked }))));
+};
+var LabelText = (0, styled_native_1.default)(SubLabelText_1.SubLabelText)(function (_a) {
+    var checkbox = _a.theme.checkbox;
+    return "\n    padding-top: ".concat(checkbox.paddingTop, ";\n  ");
+});
+var StyledWrapper = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
+var Checkbox = (0, react_1.forwardRef)(function (_a, ref) {
+    var label = _a.label, hint = _a.hint, error = _a.error, checked = _a.checked, optional = _a.optional, invalid = _a.invalid, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, rest = __rest(_a, ["label", "hint", "error", "checked", "optional", "invalid", "activeOpacity"]);
+    var hasError = !!error;
+    return (react_1.default.createElement(FormGroup_1.FormGroup, { error: hasError },
+        react_1.default.createElement(Stack_1.Stack, { spaceBetween: 1 },
+            error ? react_1.default.createElement(ErrorText_1.ErrorText, null, error) : null,
+            react_1.default.createElement(react_native_1.TouchableOpacity, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, 
+                // @ts-ignore
+                invalid: hasError || invalid }, rest),
+                react_1.default.createElement(StyledWrapper, null,
+                    react_1.default.createElement(Input, { checked: checked, invalid: hasError || invalid }),
+                    react_1.default.createElement(react_native_1.View, { style: { flexShrink: 1 } },
+                        react_1.default.createElement(LabelText, null,
+                            label,
+                            optional ? ' (optional)' : null),
+                        hint ? react_1.default.createElement(HintText_1.HintText, null, hint) : null))))));
+});
+exports.Checkbox = Checkbox;
+var templateObject_1;

package/dist/components/Checkbox/CheckboxField.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren, ReactNode } from 'react';
+declare type Props = PropsWithChildren<{
+    label: string;
+    hint?: ReactNode;
+    error?: ReactNode;
+    optional?: boolean;
+}>;
+declare const CheckboxField: ({ label, hint, error, children, optional, ...rest }: Props) => JSX.Element;
+export { CheckboxField };

package/dist/components/Checkbox/CheckboxField.js

@@ -0,0 +1,73 @@
+"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.CheckboxField = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+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 CheckboxField = function (_a) {
+    var label = _a.label, hint = _a.hint, error = _a.error, children = _a.children, _b = _a.optional, optional = _b === void 0 ? false : _b, rest = __rest(_a, ["label", "hint", "error", "children", "optional"]);
+    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, null, react_1.Children.map(children, function (child) {
+                return (0, react_1.cloneElement)(child, {
+                    invalid: hasError ? true : child.props.invalid,
+                });
+            })))));
+};
+exports.CheckboxField = CheckboxField;

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

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export { CheckboxField } from './CheckboxField';

package/dist/components/Checkbox/index.js

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

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode, Ref } from 'react';
+import { View } from 'react-native';
+declare type TableProps = {
+    items: ReactNode[][];
+    columnHeadings?: ReactNode[];
+    caption?: ReactNode;
+    rowHeadings?: boolean;
+    columnWidths: string[];
+    striped?: boolean;
+    ref: Ref<View>;
+};
+export declare const DataTable: React.ForwardRefExoticComponent<Pick<TableProps, "caption" | "items" | "columnHeadings" | "rowHeadings" | "columnWidths" | "striped"> & React.RefAttributes<View>>;
+export {};

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,136 @@
+"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.DataTable = 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 utils_1 = require("../../utils");
+exports.DataTable = (0, react_1.forwardRef)(function (_a, ref) {
+    var items = _a.items, columnHeadings = _a.columnHeadings, caption = _a.caption, rowHeadings = _a.rowHeadings, columnWidths = _a.columnWidths, _b = _a.striped, striped = _b === void 0 ? true : _b, rest = __rest(_a, ["items", "columnHeadings", "caption", "rowHeadings", "columnWidths", "striped"]);
+    var columnLabel = columnHeadings
+        ? " ".concat(columnHeadings.length, " columns,")
+        : '';
+    var captionLabel = caption ? caption : '';
+    var accessibilityLabelText = (0, utils_1.getText)(captionLabel);
+    var accessibilityLabel = "data table,".concat(columnLabel, " ").concat(items.length, " rows, ").concat(accessibilityLabelText);
+    return (react_1.default.createElement(react_native_1.ScrollView, { horizontal: true, alwaysBounceHorizontal: false },
+        react_1.default.createElement(StyledTableContainer, __assign({}, rest, { ref: ref }),
+            caption ? (react_1.default.createElement(TableCaption, null,
+                react_1.default.createElement(TableCaptionText, { accessibilityLabel: accessibilityLabel }, caption))) : null,
+            columnHeadings ? (react_1.default.createElement(TableRowHeading, null, columnHeadings.map(function (columnHeading, index) { return (react_1.default.createElement(TableHeader, { key: index, cellWidth: columnWidths[index] },
+                react_1.default.createElement(TableHeaderText, null, columnHeading))); }))) : null,
+            react_1.default.createElement(TableBody, null, items.map(function (rowData, p) { return (react_1.default.createElement(TableRow, { key: p, stripe: striped && p % 2 === 0 }, rowData.map(function (cellData, i) {
+                return rowHeadings && i < 1 ? (react_1.default.createElement(RowHeading, { key: i, testID: "rowHeader", cellWidth: columnWidths[i] },
+                    react_1.default.createElement(TableHeaderText, null, cellData))) : (react_1.default.createElement(TableCell, { key: i, testID: "cell", cellWidth: columnWidths[i] },
+                    react_1.default.createElement(CellText, null, cellData)));
+            }))); })))));
+});
+var StyledTableContainer = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var TableHeader = styled_native_1.default.View(function (_a) {
+    var tableCell = _a.theme.dataTable.tableCell, cellWidth = _a.cellWidth;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding: ", " ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n    flex: ", ";\n  "], ["\n    padding: ", " ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n    flex: ", ";\n  "])), tableCell.paddingVertical, tableCell.paddingHorizontal, cellWidth, cellWidth === 'auto' ? 1 : 0);
+});
+var StyledTableHeaderText = styled_native_1.default.Text(function (_a) {
+    var _b = _a.theme, tableHeader = _b.dataTable.tableHeader, responsiveFontSizes = _b.responsiveFontSizes, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-weight: ", ";\n    text-align: left;\n    color: ", ";\n    flex-wrap: wrap;\n\n    font-size: ", ";\n  "], ["\n    font-weight: ", ";\n    text-align: left;\n    color: ", ";\n    flex-wrap: wrap;\n\n    font-size: ", ";\n  "])), tableHeader.fontWeight, tableHeader.color, smallAndUp
+        ? responsiveFontSizes.body[1]
+        : responsiveFontSizes.body[0]);
+});
+var TableHeaderText = function (props) {
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    return react_1.default.createElement(StyledTableHeaderText, __assign({}, breakpoints, props));
+};
+var StyledTableCaptionText = styled_native_1.default.Text(function (_a) {
+    var _b = _a.theme, tableCaption = _b.dataTable.tableCaption, responsiveFontSizes = _b.responsiveFontSizes, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-weight: ", ";\n    text-align: left;\n    color: ", ";\n    flex-wrap: wrap;\n    font-size: ", ";\n  "], ["\n    font-weight: ", ";\n    text-align: left;\n    color: ", ";\n    flex-wrap: wrap;\n    font-size: ", ";\n  "])), tableCaption.fontWeight, tableCaption.color, smallAndUp
+        ? responsiveFontSizes.body[1]
+        : responsiveFontSizes.body[0]);
+});
+var TableCaptionText = function (props) {
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    return react_1.default.createElement(StyledTableCaptionText, __assign({}, breakpoints, props));
+};
+var StyledCellText = styled_native_1.default.Text(function (_a) {
+    var _b = _a.theme, text = _b.text, responsiveFontSizes = _b.responsiveFontSizes, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-weight: ", ";\n    font-family: ", ";\n    font-size: ", ";\n  "], ["\n    font-weight: ", ";\n    font-family: ", ";\n    font-size: ", ";\n  "])), text.fontWeight, text.fontFamily, smallAndUp
+        ? responsiveFontSizes.body[1]
+        : responsiveFontSizes.body[0]);
+});
+var CellText = function (props) {
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    return react_1.default.createElement(StyledCellText, __assign({}, breakpoints, props));
+};
+var TableCaption = styled_native_1.default.View(function (_a) {
+    var tableCaption = _a.theme.dataTable.tableCaption;
+    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", " ", ";\n  "], ["\n    padding: ", " ", ";\n  "])), tableCaption.paddingVertical, tableCaption.paddingHorizontal);
+});
+var TableRow = styled_native_1.default.View(function (_a) {
+    var dataTable = _a.theme.dataTable, stripe = _a.stripe;
+    return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    background-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "], ["\n    background-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "])), stripe
+        ? dataTable.tableRow.stripeColor
+        : dataTable.tableRow.backgroundColor);
+});
+var TableRowHeading = styled_native_1.default.View(function (_a) {
+    var dataTable = _a.theme.dataTable;
+    return (0, styled_native_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    background-color: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "], ["\n    background-color: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "])), dataTable.tableHeader.backgroundColor, dataTable.tableHeader.borderWidth, dataTable.tableHeader.borderColor);
+});
+var TableBody = styled_native_1.default.View(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"], ["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"])));
+var TableCell = styled_native_1.default.View(function (_a) {
+    var tableCell = _a.theme.dataTable.tableCell, cellWidth = _a.cellWidth;
+    return (0, styled_native_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding: ", " ", ";\n      border-bottom-width: ", ";\n      border-bottom-color: ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      border-bottom-width: ", ";\n      border-bottom-color: ", ";\n      width: ", ";\n      flex: ", ";\n    "])), tableCell.paddingVertical, tableCell.paddingHorizontal, tableCell.borderWidth, tableCell.borderColor, cellWidth, cellWidth === 'auto' ? 1 : 0);
+});
+var RowHeading = styled_native_1.default.View(function (_a) {
+    var tableCell = _a.theme.dataTable.tableCell, cellWidth = _a.cellWidth;
+    return (0, styled_native_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding: ", " ", ";\n      border-bottom-width: ", ";\n      border-bottom-color: ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      border-bottom-width: ", ";\n      border-bottom-color: ", ";\n      width: ", ";\n      flex: ", ";\n    "])), tableCell.paddingVertical, tableCell.paddingHorizontal, tableCell.borderWidth, tableCell.borderColor, cellWidth, cellWidth === 'auto' ? 1 : 0);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

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

@@ -0,0 +1 @@
+export { DataTable } from './DataTable';

package/dist/components/DataTable/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTable = void 0;
+var DataTable_1 = require("./DataTable");
+Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return DataTable_1.DataTable; } });

package/dist/components/DateField/DateField.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import { TextInput } from 'react-native';
+import { FullWidthOptions } from '../../hooks';
+export declare type DateFormat = {
+    day: string;
+    month: string;
+    year: string;
+};
+declare type Props = {
+    label: string;
+    hint?: ReactNode;
+    error?: ReactNode;
+    optional?: boolean;
+    onChange: (date: DateFormat) => void;
+    value: DateFormat;
+    fullWidth?: FullWidthOptions;
+    testID?: string;
+    editable?: boolean;
+};
+export declare const DateField: React.ForwardRefExoticComponent<Props & React.RefAttributes<TextInput>>;
+export {};

package/dist/components/DateField/DateField.js

@@ -0,0 +1,109 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateField = 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 utils_1 = require("../../utils");
+var ErrorText_1 = require("../ErrorText");
+var FormGroup_1 = require("../FormGroup");
+var HintText_1 = require("../HintText");
+var Input_1 = require("../Input");
+var LabelText_1 = require("../LabelText");
+var Stack_1 = require("../Stack");
+var SubLabelText_1 = require("../SubLabelText");
+var InlineFields = styled_native_1.default.View(function (_a) {
+    var stretch = _a.stretch, field = _a.theme.field;
+    var margin = parseFloat(field.gap) / 2;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-left: -", "px;\n      margin-right: -", "px;\n      flex-direction: row;\n      ", "\n    "], ["\n      margin-left: -", "px;\n      margin-right: -", "px;\n      flex-direction: row;\n      ", "\n    "])), margin, margin, stretch ? '' : "width: ".concat(field.dateWidth, ";"));
+});
+var SubField = (0, styled_native_1.default)(Stack_1.Stack)(function (_a) {
+    var field = _a.theme.field;
+    var padding = parseFloat(field.gap) / 2;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-right: ", "px;\n    padding-left: ", "px;\n  "], ["\n    padding-right: ", "px;\n    padding-left: ", "px;\n  "])), padding, padding);
+});
+var DayField = (0, styled_native_1.default)(SubField)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 25%;\n"], ["\n  width: 25%;\n"])));
+var MonthField = (0, styled_native_1.default)(SubField)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 25%;\n"], ["\n  width: 25%;\n"])));
+var YearField = (0, styled_native_1.default)(SubField)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 50%;\n"], ["\n  width: 50%;\n"])));
+exports.DateField = (0, react_1.forwardRef)(function (_a, ref) {
+    var label = _a.label, hint = _a.hint, error = _a.error, _b = _a.optional, optional = _b === void 0 ? false : _b, fullWidth = _a.fullWidth, onChange = _a.onChange, value = _a.value, testID = _a.testID, _c = _a.editable, editable = _c === void 0 ? false : _c;
+    var hasError = !!error;
+    var stretch = (0, hooks_1.useFullWidth)(fullWidth);
+    var handleChange = function (key) { return function (datePartValue) {
+        var _a;
+        onChange &&
+            onChange(__assign(__assign({}, value), (_a = {}, _a[key] = datePartValue, _a)));
+    }; };
+    var dayRef = (0, react_1.createRef)();
+    var monthRef = (0, react_1.createRef)();
+    var yearRef = (0, react_1.createRef)();
+    var accessibilityLabel = function (labelText) {
+        return [labelText, (0, utils_1.getText)(hint), (0, utils_1.getText)(error)].filter(Boolean).join(', ');
+    };
+    var focusRef = function (internalRef) { return function () {
+        if (internalRef.current) {
+            internalRef.current.focus();
+        }
+    }; };
+    return (react_1.default.createElement(FormGroup_1.FormGroup, { 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(InlineFields, { stretch: stretch },
+                react_1.default.createElement(DayField, { spaceBetween: 1 },
+                    react_1.default.createElement(react_native_1.TouchableWithoutFeedback, { onPress: focusRef(dayRef), accessible: false },
+                        react_1.default.createElement(SubLabelText_1.SubLabelText, null, "Day")),
+                    react_1.default.createElement(Input_1.NumberInput, { ref: (0, utils_1.mergeRefs)(dayRef, ref), accessibilityLabel: accessibilityLabel('Day'), invalid: hasError, value: value.day, onChangeText: handleChange('day'), testID: testID, stretch: true, editable: editable })),
+                react_1.default.createElement(MonthField, { spaceBetween: 1 },
+                    react_1.default.createElement(react_native_1.TouchableWithoutFeedback, { onPress: focusRef(monthRef), accessible: false },
+                        react_1.default.createElement(SubLabelText_1.SubLabelText, null, "Month")),
+                    react_1.default.createElement(Input_1.NumberInput, { ref: monthRef, accessibilityLabel: accessibilityLabel('Month'), invalid: hasError, value: value.month, onChangeText: handleChange('month'), testID: "".concat(testID, "-month"), stretch: true, editable: editable })),
+                react_1.default.createElement(YearField, { spaceBetween: 1 },
+                    react_1.default.createElement(react_native_1.TouchableWithoutFeedback, { onPress: focusRef(yearRef), accessible: false },
+                        react_1.default.createElement(SubLabelText_1.SubLabelText, null, "Year")),
+                    react_1.default.createElement(Input_1.NumberInput, { ref: yearRef, accessibilityLabel: accessibilityLabel('Year'), invalid: hasError, value: value.year, onChangeText: handleChange('year'), testID: "".concat(testID, "-year"), stretch: true, editable: editable }))))));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1 @@
+export { DateField } from './DateField';

package/dist/components/DateField/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateField = void 0;
+var DateField_1 = require("./DateField");
+Object.defineProperty(exports, "DateField", { enumerable: true, get: function () { return DateField_1.DateField; } });

package/dist/components/Disclosure/Disclosure.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+export declare const Disclosure: React.ForwardRefExoticComponent<TouchableOpacityProps & {
+    title: ReactNode;
+    expanded?: boolean | undefined;
+    children?: ReactNode;
+    onToggle?: CallableFunction | undefined;
+} & React.RefAttributes<TouchableOpacity>>;

package/dist/components/Disclosure/Disclosure.js

@@ -0,0 +1,97 @@
+"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.Disclosure = void 0;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../../hooks");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var Icon_1 = require("../Icon");
+var DisclosureButton = styled_native_1.default.TouchableOpacity(function () { return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  "], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  "]))); });
+var DisclosureButtonIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
+    var disclosure = _a.theme.disclosure, expanded = _a.expanded, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    transform: ", ";\n    margin-right: ", ";\n  "], ["\n    transform: ", ";\n    margin-right: ", ";\n  "])), expanded ? 'rotate(0deg)' : 'rotate(-90deg)', disclosure.iconGap[smallAndUp ? 1 : 0]);
+});
+var DisclosureButtonText = styled_native_1.default.Text(function (_a) {
+    var _b = _a.theme, text = _b.text, textLink = _b.textLink, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", "px;\n    font-weight: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", "px;\n    font-weight: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "])), text.fontFamily, text.p.fontSize[smallAndUp ? 1 : 0], text.lineHeight *
+        (0, utils_1.pxToNumber)(text.p.fontSize[smallAndUp ? 1 : 0]), textLink.fontWeight, textLink.color, textLink.color);
+});
+var LineIndent = styled_native_1.default.View(function (_a) {
+    var _b = _a.theme, disclosure = _b.disclosure, responsiveFontSizes = _b.responsiveFontSizes, smallAndUp = _a.smallAndUp;
+    var lineOffset = function (fontSize) {
+        return "".concat((0, utils_1.pxToNumber)(fontSize) / 2 -
+            (0, utils_1.pxToNumber)(disclosure.lineIndent.width) / 2, "px");
+    };
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: ", ";\n      border-radius: ", ";\n      left: ", ";\n      background-color: ", ";\n      position: absolute;\n      top: 0;\n      bottom: 0;\n    "], ["\n      width: ", ";\n      border-radius: ", ";\n      left: ", ";\n      background-color: ", ";\n      position: absolute;\n      top: 0;\n      bottom: 0;\n    "])), disclosure.lineIndent.width, disclosure.lineIndent.borderRadius, lineOffset(responsiveFontSizes.body[smallAndUp ? 1 : 0]), disclosure.lineIndent.backgroundColor);
+});
+var DisclosurePanel = styled_native_1.default.View(function (_a) {
+    var _b = _a.theme, disclosure = _b.disclosure, responsiveFontSizes = _b.responsiveFontSizes, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin-top: ", ";\n    padding-left: ", "px;\n  "], ["\n    margin-top: ", ";\n    padding-left: ", "px;\n  "])), disclosure.panelGap[smallAndUp ? 1 : 0], (0, utils_1.pxToNumber)(responsiveFontSizes.body[smallAndUp ? 1 : 0]) +
+        (0, utils_1.pxToNumber)(disclosure.iconGap[smallAndUp ? 1 : 0]));
+});
+exports.Disclosure = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, title = _a.title, _b = _a.expanded, expanded = _b === void 0 ? false : _b, onToggle = _a.onToggle, rest = __rest(_a, ["children", "title", "expanded", "onToggle"]);
+    var _c = (0, react_1.useState)(expanded), isExpanded = _c[0], setIsExpanded = _c[1];
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    var textLink = (0, react_1.useContext)(styled_native_1.ThemeContext).textLink;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(DisclosureButton, __assign({ onPress: function () {
+                setIsExpanded(!isExpanded);
+                onToggle && onToggle(!isExpanded);
+            }, ref: ref, accessibilityState: { expanded: isExpanded } }, rest),
+            react_1.default.createElement(DisclosureButtonIcon, __assign({ name: "caret-down" }, breakpoints, { size: 14, expanded: isExpanded, color: textLink.color })),
+            react_1.default.createElement(DisclosureButtonText, __assign({}, breakpoints), title)),
+        isExpanded && (react_1.default.createElement(DisclosurePanel, __assign({}, breakpoints),
+            react_1.default.createElement(LineIndent, __assign({}, breakpoints)),
+            children))));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

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