@terreno/ui 0.0.1

package/src/fieldElements/FieldError.tsx

@@ -0,0 +1,24 @@
+// This component is intended to be used as an error message for form fields, specifically for text
+// fields and text areas. It is not intended to be used as a standalone component.
+import type {FC} from "react";
+import {Text, View} from "react-native";
+
+import {Icon} from "../Icon";
+import {useTheme} from "../Theme";
+
+interface FieldErrorProps {
+  text: string;
+}
+
+export const FieldError: FC<FieldErrorProps> = ({text}) => {
+  const {theme} = useTheme();
+
+  return (
+    <View style={{alignItems: "center", flexDirection: "row", marginVertical: 2}}>
+      <Icon color="error" iconName="triangle-exclamation" size="sm" />
+      <View style={{marginLeft: 4}}>
+        <Text style={{color: theme.text.error, fontSize: 12}}>{text}</Text>
+      </View>
+    </View>
+  );
+};

package/src/fieldElements/FieldHelperText.tsx

@@ -0,0 +1,20 @@
+// This component is intended to be used as a helper text for form fields, specifically for text
+// fields and text areas. It is not intended to be used as a standalone component.
+import type {FC} from "react";
+import {Text, View} from "react-native";
+
+import {useTheme} from "../Theme";
+
+interface FieldHelperTextProps {
+  text: string;
+}
+
+export const FieldHelperText: FC<FieldHelperTextProps> = ({text}) => {
+  const {theme} = useTheme();
+
+  return (
+    <View style={{marginTop: 2}}>
+      <Text style={{color: theme.text.primary, fontSize: 12, lineHeight: 16}}>{text}</Text>
+    </View>
+  );
+};

package/src/fieldElements/FieldTitle.tsx

@@ -0,0 +1,31 @@
+// This component is intended to be used as a title for form fields,
+// specifically for text fields and text areas. It is not intended to be used as a standalone
+// component.
+import type {FC} from "react";
+import {Text} from "react-native";
+
+import {isMobileDevice} from "../MediaQuery";
+import {useTheme} from "../Theme";
+import {isNative} from "../Utilities";
+
+interface FieldTitleProps {
+  text: string;
+}
+
+export const FieldTitle: FC<FieldTitleProps> = ({text}) => {
+  const {theme} = useTheme();
+  const isMobileOrNative = isMobileDevice() || isNative();
+
+  return (
+    <Text
+      style={{
+        color: theme.text.primary,
+        fontSize: isMobileOrNative ? 14 : 16,
+        fontWeight: 600,
+        lineHeight: 22.4,
+      }}
+    >
+      {text}
+    </Text>
+  );
+};

package/src/fieldElements/index.tsx

@@ -0,0 +1,3 @@
+export * from "./FieldError";
+export * from "./FieldHelperText";
+export * from "./FieldTitle";

package/src/icons/MobileIcon.tsx

@@ -0,0 +1,40 @@
+import Svg, {Path} from "react-native-svg";
+
+import type {CustomSvgProps} from "../Common";
+
+export const MobileIcon = ({doNotDisturb, ...props}: CustomSvgProps) => {
+  return (
+    <Svg fill="none" height={33} viewBox="0 0 33 45" width={30} {...props}>
+      <Path d="M3 7h24v35H3z" fill="#fff" />
+      <Path
+        d="M8.864 5.5A5.867 5.867 0 0 0 3 11.364v26.182a5.867 5.867 0 0 0 5.864 5.863h15.272A5.867 5.867 0 0 0 30 37.546V11.364A5.867 5.867 0 0 0 24.136 5.5H8.864Zm1.5 7.364h12.272v18.818H10.364V12.864Z"
+        fill="#3EA45C"
+        stroke="#fff"
+        strokeWidth={3}
+      />
+      <Path
+        d="M14.622 37.249h3.768a.789.582 0 0 1 .789.582.789.582 0 0 1-.789.581h-3.779a.789.582 0 0 1-.789-.581.8.582 0 0 1 .8-.582Z"
+        fill="#fff"
+        stroke="#fff"
+      />
+      {doNotDisturb && (
+        <>
+          <Path
+            d="M21 4h8l-8 6.857h8"
+            stroke="#fff"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={8}
+          />
+          <Path
+            d="M21 4h8l-8 6.857h8"
+            stroke="#3EA45C"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={3}
+          />
+        </>
+      )}
+    </Svg>
+  );
+};

package/src/icons/OfflineIcon.tsx

@@ -0,0 +1,37 @@
+import Svg, {Path} from "react-native-svg";
+
+import type {CustomSvgProps} from "../Common";
+export const OfflineIcon = ({doNotDisturb, ...props}: CustomSvgProps) => (
+  <Svg fill="none" height={33} width={30} {...props}>
+    <Path
+      d="M28.5 18c0 7.456-6.044 13.5-13.5 13.5S1.5 25.456 1.5 18 7.544 4.5 15 4.5 28.5 10.544 28.5 18Z"
+      fill="#2B6072"
+      stroke="#fff"
+      strokeWidth={3}
+    />
+    <Path
+      d="M24.5 18a9.5 9.5 0 1 1-19 0 9.5 9.5 0 0 1 19 0Z"
+      fill="#fff"
+      stroke="#9A9A9A"
+      strokeWidth={5}
+    />
+    {doNotDisturb && (
+      <>
+        <Path
+          d="M18 4h8l-8 6.857h8"
+          stroke="#fff"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={8}
+        />
+        <Path
+          d="M18 4h8l-8 6.857h8"
+          stroke="#9A9A9A"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+        />
+      </>
+    )}
+  </Svg>
+);

package/src/icons/OnlineIcon.tsx

@@ -0,0 +1,39 @@
+// Generated with https://react-svgr.com/playground/?native=true&typescript=true
+
+import Svg, {Path} from "react-native-svg";
+
+import type {CustomSvgProps} from "../Common";
+
+export const OnlineIcon = ({doNotDisturb, ...props}: CustomSvgProps) => {
+  return (
+    <Svg fill="none" height="33" width="30" {...props}>
+      <Path
+        d="M28.5 18c0 7.456-6.044 13.5-13.5 13.5S1.5 25.456 1.5 18 7.544 4.5 15 4.5 28.5 10.544 28.5 18Z"
+        fill="#fff"
+        stroke="#fff"
+      />
+      <Path
+        d="M26 18c0 6.075-4.925 11-11 11S4 24.075 4 18 8.925 7 15 7s11 4.925 11 11Z"
+        fill="#3EA45C"
+      />
+      {doNotDisturb && (
+        <>
+          <Path
+            d="M18 4h8l-8 6.857h8"
+            stroke="#fff"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={8}
+          />
+          <Path
+            d="M18 4h8l-8 6.857h8"
+            stroke="#3EA45C"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={3}
+          />
+        </>
+      )}
+    </Svg>
+  );
+};

package/src/icons/OutOfficeIcon.tsx

@@ -0,0 +1,36 @@
+import Svg, {Path} from "react-native-svg";
+
+import type {CustomSvgProps} from "../Common";
+export const OutOfOfficeIcon = ({doNotDisturb, ...props}: CustomSvgProps) => (
+  <Svg fill="none" height={33} width={30} {...props}>
+    <Path
+      d="M28.5 18c0 7.456-6.044 13.5-13.5 13.5S1.5 25.456 1.5 18 7.544 4.5 15 4.5 28.5 10.544 28.5 18Z"
+      fill="#fff"
+      stroke="#fff"
+      strokeWidth={3}
+    />
+    <Path
+      d="M26 18c0 6.075-4.925 11-11 11S4 24.075 4 18 8.925 7 15 7s11 4.925 11 11Z"
+      fill="#D33232"
+    />
+    <Path d="M9 18h12" stroke="#fff" strokeLinecap="round" strokeWidth={4} />
+    {doNotDisturb && (
+      <>
+        <Path
+          d="M18 4h8l-8 6.857h8"
+          stroke="#fff"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={8}
+        />
+        <Path
+          d="M18 4h8l-8 6.857h8"
+          stroke="#D33232"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+        />
+      </>
+    )}
+  </Svg>
+);

package/src/icons/index.ts

@@ -0,0 +1,4 @@
+export * from "./MobileIcon";
+export * from "./OfflineIcon";
+export * from "./OnlineIcon";
+export * from "./OutOfficeIcon";