ferns-ui 0.47.10 → 1.0.0-beta.0

package/dist/table/TableDate.js

@@ -0,0 +1,26 @@
+import { DateTime } from "luxon";
+import React, { useState } from "react";
+import { Text } from "react-native";
+export const TableDate = ({ value, annotated = false }) => {
+    const initialDate = typeof value === "string" ? DateTime.fromISO(value) : DateTime.fromJSDate(value);
+    const [dateVal] = useState(initialDate);
+    // TODO: Formatting date with annotations should be in DateUtilities and tested.
+    const formatDate = (date) => {
+        const now = DateTime.now();
+        const diff = now.diff(date, ["years", "months", "days"]).toObject();
+        let diffString = "";
+        if (diff.years) {
+            diffString += `${Math.floor(diff.years)} Year${Math.floor(diff.years) > 1 ? "s" : ""} `;
+        }
+        if (diff.months) {
+            diffString += `${Math.floor(diff.months)} Mo${Math.floor(diff.months) > 1 ? "s" : ""} `;
+        }
+        if (diff.days) {
+            diffString += `${Math.floor(diff.days)} Day${Math.floor(diff.days) > 1 ? "s" : ""}`;
+        }
+        return `${date.toFormat("MM/dd/yyyy")} (${diffString.trim()})`;
+    };
+    return (React.createElement(Text, { style: { fontSize: 16 } }, annotated ? formatDate(dateVal) : dateVal.toFormat("MM/dd/yyyy")));
+};
+TableDate.displayName = "TableDate";
+//# sourceMappingURL=TableDate.js.map

package/dist/table/TableDate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableDate.js","sourceRoot":"","sources":["../../src/table/TableDate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,EAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAIlC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAAC,KAAK,EAAE,SAAS,GAAG,KAAK,EAAC,EAAE,EAAE;IAC1E,MAAM,WAAW,GACf,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACnF,MAAM,CAAC,OAAO,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAExC,gFAAgF;IAChF,MAAM,UAAU,GAAG,CAAC,IAAc,EAAE,EAAE;QACpC,MAAM,GAAG,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC;QAC3B,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;QAEpE,IAAI,UAAU,GAAG,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,UAAU,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC;QAC1F,CAAC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,UAAU,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC;QAC1F,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,UAAU,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QACtF,CAAC;QAED,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,KAAK,UAAU,CAAC,IAAI,EAAE,GAAG,CAAC;IACjE,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,EAAE,EAAC,IACxB,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAC5D,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/{TableHeader.d.ts → table/TableHeader.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import { TableHeaderProps } from "./Common";
+import { TableHeaderProps } from "../Common";
 /**
  * Use TableHeader to group the header content in Table.
  */

package/dist/{TableHeader.js → table/TableHeader.js}

@@ -1,11 +1,11 @@
 import React from "react";
-import { Box } from "./Box";
+import { Box } from "../Box";
 import { TableRow } from "./TableRow";
 /**
  * Use TableHeader to group the header content in Table.
  */
 export const TableHeader = ({ children, display = "tableHeaderGroup", color, }) => {
-    return (React.createElement(Box, { color: color !== null && color !== void 0 ? color : "white", display: display === "visuallyHidden" ? "none" : "flex" },
+    return (React.createElement(Box, { color: color !== null && color !== void 0 ? color : "base", display: display === "visuallyHidden" ? "none" : "flex" },
         React.createElement(TableRow, { headerRow: true }, children)));
 };
 //# sourceMappingURL=TableHeader.js.map

package/dist/table/TableHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../src/table/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,GAAG,EAAC,MAAM,QAAQ,CAAC;AAE3B,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AAEpC;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,OAAO,GAAG,kBAAkB,EAC5B,KAAK,GACY,EAAsB,EAAE;IACzC,OAAO,CACL,oBAAC,GAAG,IAAC,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;QAClF,oBAAC,QAAQ,IAAC,SAAS,UAAE,QAAQ,CAAY,CACrC,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/{TableHeaderCell.d.ts → table/TableHeaderCell.d.ts}

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
-import { TableHeaderCellProps } from "./Common";
+import { TableHeaderCellProps } from "../Common";
 /**
  * Use TableHeaderCell to define a header cell in Table.
  */
-export declare const TableHeaderCell: ({ children, index, sortable, onSortChange, }: TableHeaderCellProps) => ReactElement;
+export declare const TableHeaderCell: ({ children, index, sortable, align, title, onSortChange, }: TableHeaderCellProps) => ReactElement;

package/dist/table/TableHeaderCell.js

@@ -0,0 +1,58 @@
+// TableHeaderCell.tsx
+import { FontAwesome6 } from "@expo/vector-icons";
+import React, { useCallback } from "react";
+import { View } from "react-native";
+import { Box } from "../Box";
+import { useTheme } from "../Theme";
+import { useTableContext } from "./tableContext";
+import { TableTitle } from "./TableTitle";
+/**
+ * Use TableHeaderCell to define a header cell in Table.
+ */
+export const TableHeaderCell = ({ children, index, sortable, align = "left", title, onSortChange, }) => {
+    const { theme } = useTheme();
+    const { columns, setSortColumn, sortColumn } = useTableContext();
+    const width = columns[index];
+    if (!width) {
+        console.warn(`No width defined for column ${index} in TableHeaderCell`);
+    }
+    if (children && title) {
+        console.warn("Both children and title are defined in TableHeaderCell. Title will be ignored.");
+    }
+    if (!children && !title) {
+        console.error("Either children or title is required in TableHeaderCell");
+    }
+    const sort = (sortColumn === null || sortColumn === void 0 ? void 0 : sortColumn.column) === index ? sortColumn.direction : undefined;
+    let alignItems = "start";
+    if (align === "center") {
+        alignItems = "center";
+    }
+    else if (align === "right") {
+        alignItems = "end";
+    }
+    const onClick = useCallback(() => {
+        // desc => asc => undefined
+        const newSort = sort === "desc" ? "asc" : sort === "asc" ? undefined : "desc";
+        if (setSortColumn) {
+            setSortColumn(newSort ? { column: index, direction: newSort } : undefined);
+        }
+        onSortChange && onSortChange(newSort);
+    }, [index, onSortChange, setSortColumn, sort]);
+    if (sortable && !onSortChange) {
+        console.error("onSortChange is required when sortable is true");
+    }
+    return (React.createElement(Box, { accessibilityHint: "changes sort alphabetical order", accessibilityLabel: "sort", alignItems: "center", direction: "row", flex: "grow", justifyContent: alignItems, onClick: sortable ? onClick : undefined },
+        Boolean(children) && children,
+        Boolean(title) && React.createElement(TableTitle, { align: align, title: title }),
+        Boolean(sort) && (React.createElement(Box, { alignSelf: "end", paddingX: 2 },
+            React.createElement(View, { style: {
+                    alignItems: "center",
+                    backgroundColor: theme.surface.primary,
+                    borderRadius: theme.radius.rounded,
+                    justifyContent: "center",
+                    height: 16,
+                    width: 16,
+                } },
+                React.createElement(FontAwesome6, { color: theme.text.inverted, name: sort === "asc" ? "arrow-down" : "arrow-up", size: 10, solid: true }))))));
+};
+//# sourceMappingURL=TableHeaderCell.js.map

package/dist/table/TableHeaderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderCell.js","sourceRoot":"","sources":["../../src/table/TableHeaderCell.tsx"],"names":[],"mappings":"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"}

package/dist/table/TableIconButton.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { TableIconButtonProps } from "../Common";
+export declare const TableIconButton: FC<TableIconButtonProps>;

package/dist/table/TableIconButton.js

@@ -0,0 +1,42 @@
+/* eslint-disable react-native-a11y/has-accessibility-hint */
+// accessibility hint handled in IconButton.tsx
+import React from "react";
+import { View } from "react-native";
+import { IconButton } from "../IconButton";
+export const TableIconButton = ({ tableIconButtonName, onClick }) => {
+    const iconButtonMap = {
+        edit: {
+            iconName: "pen-to-square",
+            variant: "muted",
+            accessibilityLabel: "Edit",
+            accessibilityHint: "Edit row",
+        },
+        saveAndClose: {
+            iconName: "check",
+            variant: "secondary",
+            accessibilityLabel: "Save and close",
+            accessibilityHint: "Save and close row",
+        },
+        insert: {
+            iconName: "plus",
+            variant: "primary",
+            accessibilityLabel: "Insert Data",
+            accessibilityHint: "Insert Data",
+        },
+        drawerOpen: {
+            iconName: "chevron-down",
+            variant: "muted",
+            accessibilityLabel: "Open Drawer for more Data",
+            accessibilityHint: "Open Drawer",
+        },
+        drawerClose: {
+            iconName: "chevron-up",
+            variant: "secondary",
+            accessibilityLabel: "Close Drawer for more Data",
+            accessibilityHint: "Close Drawer",
+        },
+    };
+    return (React.createElement(View, { style: { justifyContent: "center", alignItems: "center", width: "100%" } },
+        React.createElement(IconButton, { accessibilityLabel: iconButtonMap[tableIconButtonName].accessibilityLabel, iconName: iconButtonMap[tableIconButtonName].iconName, variant: iconButtonMap[tableIconButtonName].variant, onClick: onClick })));
+};
+//# sourceMappingURL=TableIconButton.js.map

package/dist/table/TableIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableIconButton.js","sourceRoot":"","sources":["../../src/table/TableIconButton.tsx"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,+CAA+C;AAE/C,OAAO,KAAW,MAAM,OAAO,CAAC;AAChC,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAGlC,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAEzC,MAAM,CAAC,MAAM,eAAe,GAA6B,CAAC,EAAC,mBAAmB,EAAE,OAAO,EAAC,EAAE,EAAE;IAC1F,MAAM,aAAa,GAQf;QACF,IAAI,EAAE;YACJ,QAAQ,EAAE,eAAe;YACzB,OAAO,EAAE,OAAO;YAChB,kBAAkB,EAAE,MAAM;YAC1B,iBAAiB,EAAE,UAAU;SAC9B;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,OAAO;YACjB,OAAO,EAAE,WAAW;YACpB,kBAAkB,EAAE,gBAAgB;YACpC,iBAAiB,EAAE,oBAAoB;SACxC;QACD,MAAM,EAAE;YACN,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,SAAS;YAClB,kBAAkB,EAAE,aAAa;YACjC,iBAAiB,EAAE,aAAa;SACjC;QACD,UAAU,EAAE;YACV,QAAQ,EAAE,cAAc;YACxB,OAAO,EAAE,OAAO;YAChB,kBAAkB,EAAE,2BAA2B;YAC/C,iBAAiB,EAAE,aAAa;SACjC;QACD,WAAW,EAAE;YACX,QAAQ,EAAE,YAAY;YACtB,OAAO,EAAE,WAAW;YACpB,kBAAkB,EAAE,4BAA4B;YAChD,iBAAiB,EAAE,cAAc;SAClC;KACF,CAAC;IAEF,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAC,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAC;QAC1E,oBAAC,UAAU,IACT,kBAAkB,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC,kBAAkB,EACzE,QAAQ,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC,QAAQ,EACrD,OAAO,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC,OAAO,EACnD,OAAO,EAAE,OAAO,GAChB,CACG,CACR,CAAC;AACJ,CAAC,CAAC"}

package/dist/table/TableNumber.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { TableNumberProps } from "../Common";
+export declare const TableNumber: FC<TableNumberProps>;

package/dist/table/TableNumber.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { Text } from "react-native";
+import { useTheme } from "../Theme";
+// TODO: Implement isEditing to TableNumber
+export const TableNumber = ({ isEditing, value, align = "right" }) => {
+    const { theme } = useTheme();
+    if (isEditing) {
+        console.warn("isEditing is not implemented yet.");
+    }
+    return (React.createElement(Text, { style: {
+            color: theme.text.primary,
+            fontFamily: "text",
+            fontSize: 14,
+            textAlign: align,
+        } }, value));
+};
+TableNumber.displayName = "TableNumber";
+//# sourceMappingURL=TableNumber.js.map

package/dist/table/TableNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableNumber.js","sourceRoot":"","sources":["../../src/table/TableNumber.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAW,MAAM,OAAO,CAAC;AAChC,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAGlC,OAAO,EAAC,QAAQ,EAAC,MAAM,UAAU,CAAC;AAElC,2CAA2C;AAC3C,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAAC,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,OAAO,EAAC,EAAE,EAAE;IACvF,MAAM,EAAC,KAAK,EAAC,GAAG,QAAQ,EAAE,CAAC;IAE3B,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAC;IACpD,CAAC;IAED,OAAO,CACL,oBAAC,IAAI,IACH,KAAK,EAAE;YACL,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO;YACzB,UAAU,EAAE,MAAM;YAClB,QAAQ,EAAE,EAAE;YACZ,SAAS,EAAE,KAAK;SACjB,IAEA,KAAK,CACD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/{TableRow.d.ts → table/TableRow.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import { TableRowProps } from "./Common";
+import { TableRowProps } from "../Common";
 /**
  * Use TableRow to define a row in Table.
  */

package/dist/table/TableRow.js

@@ -0,0 +1,28 @@
+import React, { Children, useRef } from "react";
+import { Box } from "../Box";
+import { IconButton } from "../IconButton";
+import { useTableContext } from "./tableContext";
+const TableCell = ({ children, index }) => {
+    const { columns } = useTableContext();
+    return (React.createElement(Box, { justifyContent: "center", marginRight: 2, paddingX: 3, paddingY: 4, width: columns[index] }, children));
+};
+/**
+ * Use TableRow to define a row in Table.
+ */
+export const TableRow = ({ children, headerRow = false, expanded, drawerContents, color = "base", }) => {
+    const [isExpanded, setIsExpanded] = React.useState(expanded || false);
+    const { hasDrawerContents } = useTableContext();
+    const rowRef = useRef(null);
+    const border = { __style: { borderBottom: `${headerRow ? 2 : 1}px solid #e0e0e0` } };
+    return (React.createElement(Box, { ref: rowRef, color: color, dangerouslySetInlineStyle: border, width: "100%" },
+        React.createElement(Box, { direction: "row", paddingY: 1, width: "100%" },
+            Boolean(drawerContents) && (React.createElement(TableCell, { index: -1 },
+                React.createElement(IconButton, { accessibilityHint: "press to expand", accessibilityLabel: "expand", iconName: isExpanded ? "chevron-up" : "chevron-down", variant: "secondary", onClick: () => {
+                        setIsExpanded(!isExpanded);
+                    } }))),
+            Boolean(hasDrawerContents && !drawerContents) && (React.createElement(TableCell, { index: -1 },
+                React.createElement(Box, { width: 32 }))),
+            Children.map(children, (child, index) => (React.createElement(TableCell, { index: index }, child)))),
+        Boolean(isExpanded) && (React.createElement(Box, { paddingX: 2, width: "100%" }, drawerContents))));
+};
+//# sourceMappingURL=TableRow.js.map

package/dist/table/TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../src/table/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,QAAQ,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAC,GAAG,EAAC,MAAM,QAAQ,CAAC;AAE3B,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AACzC,OAAO,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAE/C,MAAM,SAAS,GAAG,CAAC,EAAC,QAAQ,EAAE,KAAK,EAA6C,EAAE,EAAE;IAClF,MAAM,EAAC,OAAO,EAAC,GAAG,eAAe,EAAE,CAAC;IACpC,OAAO,CACL,oBAAC,GAAG,IAAC,cAAc,EAAC,QAAQ,EAAC,WAAW,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,IACzF,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,cAAc,EACd,KAAK,GAAG,MAAM,GACA,EAAsB,EAAE;IACtC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,QAAQ,IAAI,KAAK,CAAC,CAAC;IACtE,MAAM,EAAC,iBAAiB,EAAC,GAAG,eAAe,EAAE,CAAC;IAC9C,MAAM,MAAM,GAAG,MAAM,CAAa,IAAI,CAAC,CAAC;IAExC,MAAM,MAAM,GAAG,EAAC,OAAO,EAAE,EAAC,YAAY,EAAE,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,kBAAkB,EAAC,EAAC,CAAC;IAEjF,OAAO,CACL,oBAAC,GAAG,IAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,yBAAyB,EAAE,MAAM,EAAE,KAAK,EAAC,MAAM;QAC7E,oBAAC,GAAG,IAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM;YAC3C,OAAO,CAAC,cAAc,CAAC,IAAI,CAC1B,oBAAC,SAAS,IAAC,KAAK,EAAE,CAAC,CAAC;gBAElB,oBAAC,UAAU,IACT,iBAAiB,EAAC,iBAAiB,EACnC,kBAAkB,EAAC,QAAQ,EAC3B,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EACpD,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE;wBACZ,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;oBAC7B,CAAC,GACD,CACQ,CACb;YAEA,OAAO,CAAC,iBAAiB,IAAI,CAAC,cAAc,CAAC,IAAI,CAChD,oBAAC,SAAS,IAAC,KAAK,EAAE,CAAC,CAAC;gBAClB,oBAAC,GAAG,IAAC,KAAK,EAAE,EAAE,GAAI,CACR,CACb;YACA,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACxC,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,IAAG,KAAK,CAAa,CAC7C,CAAC,CACE;QACL,OAAO,CAAC,UAAU,CAAC,IAAI,CACtB,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM,IAC3B,cAAc,CACX,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/table/TableText.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { TableTextProps } from "../Common";
+export declare const TableText: FC<TableTextProps>;

package/dist/table/TableText.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { Text } from "react-native";
+import { useTheme } from "../Theme";
+// TODO: Implement isEditing to TableText
+export const TableText = ({ isEditing, value, align }) => {
+    const { theme } = useTheme();
+    if (isEditing) {
+        console.warn("isEditing is not implemented yet.");
+    }
+    return (React.createElement(Text, { style: {
+            color: theme.text.primary,
+            fontFamily: "text",
+            fontSize: 14,
+            textAlign: align,
+        } }, value));
+};
+TableText.displayName = "TableText";
+//# sourceMappingURL=TableText.js.map

package/dist/table/TableText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableText.js","sourceRoot":"","sources":["../../src/table/TableText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAW,MAAM,OAAO,CAAC;AAChC,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAGlC,OAAO,EAAC,QAAQ,EAAC,MAAM,UAAU,CAAC;AAElC,yCAAyC;AACzC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAC,EAAE,EAAE;IACzE,MAAM,EAAC,KAAK,EAAC,GAAG,QAAQ,EAAE,CAAC;IAE3B,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAC;IACpD,CAAC;IAED,OAAO,CACL,oBAAC,IAAI,IACH,KAAK,EAAE;YACL,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO;YACzB,UAAU,EAAE,MAAM;YAClB,QAAQ,EAAE,EAAE;YACZ,SAAS,EAAE,KAAK;SACjB,IAEA,KAAK,CACD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/table/TableTitle.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { TableTitleProps } from "../Common";
+export declare const TableTitle: FC<TableTitleProps>;

package/dist/table/TableTitle.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Text } from "react-native";
+import { useTheme } from "../Theme";
+export const TableTitle = ({ title, align = "left" }) => {
+    const { theme } = useTheme();
+    return (
+    // No hint needed for a title.
+    // eslint-disable-next-line react-native-a11y/has-accessibility-hint
+    React.createElement(Text, { accessibilityLabel: `Table title: ${title}`, accessibilityRole: "header", ellipsizeMode: "tail" // ensures that the text is clipped at the end of the line for all platforms
+        , numberOfLines: 3, style: {
+            fontFamily: "text",
+            textTransform: "uppercase",
+            fontSize: 10,
+            lineHeight: 16,
+            fontWeight: "700",
+            textAlign: align,
+            flexWrap: "wrap",
+            overflow: "hidden",
+            color: theme.text.primary,
+        } }, title));
+};
+//# sourceMappingURL=TableTitle.js.map

package/dist/table/TableTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableTitle.js","sourceRoot":"","sources":["../../src/table/TableTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAW,MAAM,OAAO,CAAC;AAChC,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAGlC,OAAO,EAAC,QAAQ,EAAC,MAAM,UAAU,CAAC;AAElC,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAAC,KAAK,EAAE,KAAK,GAAG,MAAM,EAAC,EAAE,EAAE;IACzE,MAAM,EAAC,KAAK,EAAC,GAAG,QAAQ,EAAE,CAAC;IAC3B,OAAO;IACL,8BAA8B;IAC9B,oEAAoE;IACpE,oBAAC,IAAI,IACH,kBAAkB,EAAE,gBAAgB,KAAK,EAAE,EAC3C,iBAAiB,EAAC,QAAQ,EAC1B,aAAa,EAAC,MAAM,CAAC,4EAA4E;UACjG,aAAa,EAAE,CAAC,EAChB,KAAK,EAAE;YACL,UAAU,EAAE,MAAM;YAClB,aAAa,EAAE,WAAW;YAC1B,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,MAAM;YAChB,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO;SAC1B,IAEA,KAAK,CACD,CACR,CAAC;AACJ,CAAC,CAAC"}

package/dist/{tableContext.d.ts → table/tableContext.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import { TableContextProviderProps, TableContextType } from "./Common";
+import { TableContextProviderProps, TableContextType } from "../Common";
 export declare const Provider: React.Provider<TableContextType>;
 export declare const TableContextProvider: ({ children, columns, hasDrawerContents, sortColumn, setSortColumn, stickyHeader, borderStyle, alternateRowBackground, page, }: TableContextProviderProps) => React.ReactElement<typeof Provider>;
 export declare function useTableContext(): TableContextType;

package/dist/table/tableContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableContext.js","sourceRoot":"","sources":["../../src/table/tableContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAU,aAAa,EAAE,UAAU,EAAC,MAAM,OAAO,CAAC;AAIhE,MAAM,YAAY,GAA8B,aAAa,CAAmB;IAC9E,OAAO,EAAE,EAAE;IACX,iBAAiB,EAAE,KAAK;IACxB,UAAU,EAAE,SAAS;IACrB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,sBAAsB,EAAE,IAAI;IAC5B,IAAI,EAAE,CAAC;CACR,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,YAAY,CAAC;AAEvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,QAAQ,EACR,OAAO,EACP,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,YAAY,EACZ,WAAW,EACX,sBAAsB,EACtB,IAAI,GACsB,EAAuC,EAAE;IACnE,OAAO,CACL,oBAAC,QAAQ,IACP,KAAK,EAAE;YACL,OAAO;YACP,sBAAsB;YACtB,WAAW;YACX,iBAAiB;YACjB,UAAU;YACV,aAAa;YACb,YAAY;YACZ,IAAI;SACL,IAEA,QAAQ,CACA,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe;IAC7B,MAAM,EACJ,OAAO,EACP,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,YAAY,EACZ,sBAAsB,EACtB,WAAW,GACZ,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC7B,OAAO;QACL,OAAO;QACP,iBAAiB;QACjB,aAAa;QACb,UAAU;QACV,YAAY;QACZ,sBAAsB;QACtB,WAAW;KACZ,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.47.10",
+  "version": "1.0.0-beta.0",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {
@@ -12,7 +12,8 @@
     "deps": "node checkDeps.js",
     "test": "TZ=America/New_York jest --watchAll",
     "test:ci": "TZ=America/New_York jest --ci",
-    "postinstall": "cd ../.. && patch-package"
+    "postinstall": "cd ../.. && patch-package",
+    "types": "npx typedoc"
   },
   "babel": {
     "presets": [
@@ -45,7 +46,8 @@
   },
   "eslintConfig": {
     "extends": [
-      "plugin:ferns/recommended"
+      "plugin:ferns/recommended",
+      "plugin:react-native-a11y/all"
     ],
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
@@ -105,6 +107,7 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-native": "^4.1.0",
+    "eslint-plugin-react-native-a11y": "^3.3.0",
     "eslint-plugin-simple-import-sort": "^12.1.0",
     "eslint-plugin-unused-imports": "3.2.0",
     "jest": "^29.7.0",
@@ -125,6 +128,8 @@
     "react-router-dom": "^6.23.0"
   },
   "dependencies": {
+    "@expo-google-fonts/nunito": "^0.2.3",
+    "@expo-google-fonts/titillium-web": "^0.2.3",
     "@expo/vector-icons": "^14.0.1",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/blur": "^4.4.0",
@@ -135,6 +140,7 @@
     "expo-haptics": "~13.0.1",
     "expo-image-manipulator": "~12.0.5",
     "expo-image-picker": "~15.0.5",
+    "expo-linear-gradient": "~13.0.2",
     "expo-localization": "~15.0.3",
     "libphonenumber-js": "^1.10.61",
     "lodash": "^4.17.21",
@@ -147,7 +153,7 @@
     "react-dom": "18.2.0",
     "react-native": "0.74.1",
     "react-native-actions-sheet": "^0.9.3",
-    "react-native-calendars": "^1.1304.1",
+    "react-native-calendars": "^1.1305.0",
     "react-native-drawer-layout": "3.3.0",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-google-places-autocomplete": "^2.5.6",

package/src/Accordion.tsx

@@ -0,0 +1,84 @@
+import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
+import React, {FC, useState} from "react";
+import {Pressable, View} from "react-native";
+
+import {AccordionProps} from "./Common";
+import {Heading} from "./Heading";
+import {Modal} from "./Modal";
+import {useTheme} from "./Theme";
+
+export const Accordion: FC<AccordionProps> = ({
+  children,
+  isCollapsed = false,
+  title,
+  includeInfoModal = false,
+  infoModalChildren,
+  infoModalSubTitle,
+  infoModalText,
+  infoModalTitle,
+}) => {
+  const {theme} = useTheme();
+  const [collapsed, setCollapsed] = useState(isCollapsed);
+  const [infoModalVisibleState, setInfoModalVisibleState] = useState(false);
+
+  return (
+    <>
+      <Modal
+        primaryButtonOnClick={() => setInfoModalVisibleState(false)}
+        primaryButtonText="Close"
+        size="md"
+        subTitle={infoModalSubTitle}
+        text={infoModalText}
+        title={infoModalTitle}
+        visible={infoModalVisibleState}
+        onDismiss={() => setInfoModalVisibleState(false)}
+      >
+        {infoModalChildren}
+      </Modal>
+      <View
+        style={{
+          padding: 16,
+          borderBottomColor: theme.border.default,
+          borderTopColor: theme.border.default,
+          borderTopWidth: 2,
+          borderBottomWidth: 2,
+          width: "100%",
+        }}
+      >
+        <View style={{flexDirection: "row", justifyContent: "space-between", alignItems: "center"}}>
+          <View style={{flexDirection: "row", alignItems: "center"}}>
+            <Heading>{title}</Heading>
+            {includeInfoModal && infoModalTitle && (
+              <Pressable
+                accessibilityRole="button"
+                hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
+                style={{marginLeft: 8}}
+                onPress={() => setInfoModalVisibleState(true)}
+              >
+                <Heading color="secondaryLight" size="sm">
+                  ⓘ
+                </Heading>
+                {/* TODO: Figure out why FontAwesome6 'light' is not working */}
+                {/* <FontAwesome6 color={theme.text.secondaryLight} light name="circle-info" size={16}  light="circle-info"/> */}
+              </Pressable>
+            )}
+          </View>
+          <View>
+            <Pressable
+              accessibilityRole="button"
+              hitSlop={{top: 20, bottom: 20, left: 20, right: 20}}
+              onPress={() => setCollapsed(!collapsed)}
+            >
+              <FontAwesome6
+                color={theme.text.link}
+                name={collapsed ? "chevron-down" : "chevron-up"}
+                size={16}
+              />
+            </Pressable>
+          </View>
+        </View>
+        {collapsed ? null : <View style={{marginTop: 8}}>{children}</View>}
+      </View>
+    </>
+  );
+};

package/src/ActionSheet.tsx

@@ -73,10 +73,12 @@ export const getElevation = (elevation?: number) => {
   }
   return {
     elevation,
-    shadowColor: "black",
-    shadowOffset: {width: 0.3 * elevation, height: 0.5 * elevation},
-    shadowOpacity: 0.2,
-    shadowRadius: 0.7 * elevation,
+    boxShadow: {
+      shadowColor: "black",
+      shadowOffset: {width: 0.3 * elevation, height: 0.5 * elevation},
+      shadowOpacity: 0.2,
+      shadowRadius: 0.7 * elevation,
+    },
   };
 };
 
@@ -701,7 +703,7 @@ export class ActionSheet extends Component<Props, State, any> {
         deviceHeight: height,
         deviceWidth: width,
         portrait: height > width,
-        paddingTop: measuredPadding as any,
+        paddingTop: measuredPadding ?? 0,
       });
     }, 1);
   };
@@ -802,6 +804,7 @@ export class ActionSheet extends Component<Props, State, any> {
                   onTouchStart={this._onTouchStart}
                 >
                   <Pressable
+                    accessibilityRole="button"
                     style={{
                       height: this.state.deviceHeight * 1.15,
                       width: "100%",

package/src/AddressField.tsx

@@ -0,0 +1,122 @@
+import React, {FC} from "react";
+import {View} from "react-native";
+
+import {AddressFieldProps, AddressInterface} from "./Common";
+import {USSTATESLIST} from "./Constants";
+import {SelectField} from "./SelectField";
+import {TextField} from "./TextField";
+import {UnifiedAddressAutoCompleteField} from "./UnifiedAddressAutoComplete";
+
+export const AddressField: FC<AddressFieldProps> = ({
+  disabled,
+  googleMapsApiKey,
+  googlePlacesMobileStyles,
+  includeCounty,
+  value,
+  testID,
+  onChange,
+  onBlur,
+}) => {
+  const handleAddressChange = (field: string, newValue: string) => {
+    onChange({...value, [field]: newValue});
+    onBlur && onBlur({...value, [field]: newValue});
+  };
+
+  const handleAutoCompleteChange = (newValue: AddressInterface) => {
+    onChange({...value, ...newValue});
+  };
+
+  const {
+    address1 = "",
+    address2 = "",
+    city = "",
+    state = "",
+    zipcode = "",
+    countyName = "",
+    countyCode = "",
+  }: AddressInterface = value ?? ({} as AddressInterface);
+
+  return (
+    <>
+      <View style={{marginBottom: 16}}>
+        <UnifiedAddressAutoCompleteField
+          disabled={disabled}
+          googleMapsApiKey={googleMapsApiKey}
+          googlePlacesMobileStyles={googlePlacesMobileStyles}
+          handleAddressChange={(result) => handleAddressChange("address1", result)}
+          handleAutoCompleteChange={(result) => handleAutoCompleteChange(result)}
+          includeCounty={includeCounty}
+          inputValue={address1}
+          testID={`${testID}-address1`}
+        />
+      </View>
+      <View style={{marginBottom: 16}}>
+        <TextField
+          disabled={disabled}
+          id="address2"
+          testID={`${testID}-address2`}
+          title="Apt, suite, etc"
+          type="text"
+          value={address2}
+          onChange={(result) => handleAddressChange("address2", result)}
+        />
+      </View>
+      <View style={{marginBottom: 16}}>
+        <TextField
+          disabled={disabled}
+          id="city"
+          testID={`${testID}-city`}
+          title="City"
+          type="text"
+          value={city}
+          onChange={(result) => handleAddressChange("city", result)}
+        />
+      </View>
+      <View style={{marginBottom: 16}}>
+        <SelectField
+          options={USSTATESLIST}
+          title="State"
+          value={state}
+          onChange={(result) => handleAddressChange("state", result!)}
+        />
+      </View>
+      <View style={{marginBottom: 16}}>
+        <TextField
+          disabled={disabled}
+          id="zipcode"
+          testID={`${testID}-zip`}
+          title="Zipcode"
+          type="text"
+          value={zipcode}
+          onChange={(result) => handleAddressChange("zipcode", result)}
+        />
+      </View>
+      {includeCounty && (
+        <>
+          <View style={{marginBottom: 16}}>
+            <TextField
+              disabled={disabled}
+              id="countyName"
+              testID={`${testID}-county`}
+              title="County Name"
+              type="text"
+              value={countyName}
+              onChange={(result) => handleAddressChange("countyName", result)}
+            />
+          </View>
+          <View style={{marginBottom: 16}}>
+            <TextField
+              disabled={disabled}
+              id="countyCode"
+              testID={`${testID}-county-code`}
+              title="County Code"
+              type="text"
+              value={countyCode}
+              onChange={(result) => handleAddressChange("countyCode", result)}
+            />
+          </View>
+        </>
+      )}
+    </>
+  );
+};