@draftbit/core 46.8.2-e0b610.2 → 46.8.2-fad2ca.2

package/lib/commonjs/components/Elevation.js

@@ -11,6 +11,7 @@ var _theming = require("../theming");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */
 const Elevation = _ref => {
   let {
@@ -27,24 +28,11 @@ const Elevation = _ref => {
     colors
   } = theme;
   const borderRadius = radius;
-  return /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
-    ...rest,
+  return /*#__PURE__*/React.createElement(_reactNative.Animated.View, _extends({}, rest, {
     style: [{
       borderRadius,
       backgroundColor: colors.surface
     }, elevation ? (0, _shadow.default)(elevation) : null, style]
-  }, /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: {
-      overflow: "hidden",
-      borderRadius
-    }
-  }, children));
-};
-var _default = (0, _theming.withTheme)(Elevation);
-exports.default = _default;
-      borderRadius,
-      backgroundColor: colors.surface
-    }, elevation ? (0, _shadow.default)(elevation) : null, style]
   }), /*#__PURE__*/React.createElement(_reactNative.View, {
     style: {
       overflow: "hidden",

package/lib/commonjs/components/TabView/TabView.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactNativeTabView = require("react-native-tab-view");
+var _TabViewItem = _interopRequireDefault(require("./TabViewItem"));
+var _theming = require("../../theming");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const TabViewComponent = _ref => {
+  let {
+    Icon,
+    onIndexChanged,
+    onEndReached,
+    tabBarPosition,
+    keyboardDismissMode,
+    swipeEnabled,
+    scrollEnabled,
+    activeColor,
+    inactiveColor,
+    pressColor,
+    indicatorColor,
+    tabsBackgroundColor,
+    style,
+    theme,
+    children
+  } = _ref;
+  const [index, setIndex] = React.useState(0);
+  const [routes, setRoutes] = React.useState([]);
+  const [tabScenes, setTabScenes] = React.useState({});
+
+  //Populate routes and scenes based on children
+  React.useEffect(() => {
+    const newRoutes = [];
+    const scenes = {};
+    React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === _TabViewItem.default).forEach((item, idx) => {
+      const child = item;
+      newRoutes.push({
+        key: idx.toString(),
+        title: child.props.title,
+        icon: child.props.icon,
+        accessibilityLabel: child.props.accessibilityLabel
+      });
+      scenes[idx] = () => child;
+    });
+    setRoutes(newRoutes);
+    setTabScenes(scenes);
+  }, [children]);
+  const indexChangeHandler = i => {
+    setIndex(i);
+    onIndexChanged === null || onIndexChanged === void 0 ? void 0 : onIndexChanged(i);
+    if (i === routes.length) {
+      onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
+    }
+  };
+  const renderTabBar = props => {
+    return /*#__PURE__*/React.createElement(_reactNativeTabView.TabBar, _extends({}, props, {
+      activeColor: activeColor || theme.colors.primary,
+      inactiveColor: inactiveColor || theme.colors.divider,
+      pressColor: pressColor || theme.colors.primary,
+      scrollEnabled: scrollEnabled,
+      indicatorStyle: {
+        backgroundColor: indicatorColor || theme.colors.primary
+      },
+      renderIcon: _ref2 => {
+        let {
+          route,
+          color
+        } = _ref2;
+        return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
+          name: route.icon,
+          color: color,
+          size: 36
+        }) : null;
+      },
+      style: [{
+        backgroundColor: tabsBackgroundColor || theme.colors.background
+      }, style]
+    }));
+  };
+  return /*#__PURE__*/React.createElement(_reactNativeTabView.TabView, {
+    navigationState: {
+      index,
+      routes
+    },
+    renderScene: (0, _reactNativeTabView.SceneMap)(tabScenes),
+    renderTabBar: renderTabBar,
+    onIndexChange: indexChangeHandler,
+    tabBarPosition: tabBarPosition,
+    keyboardDismissMode: keyboardDismissMode,
+    swipeEnabled: swipeEnabled
+  });
+};
+var _default = (0, _theming.withTheme)(TabViewComponent);
+exports.default = _default;

package/lib/commonjs/components/TabView/TabViewItem.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TabViewItem = _ref => {
+  let {
+    style,
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.parentContainer, style]
+  }, children);
+};
+const styles = _reactNative.StyleSheet.create({
+  parentContainer: {
+    flex: 1
+  }
+});
+var _default = TabViewItem;
+exports.default = _default;

package/lib/commonjs/components/TabView/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TabView", {
+  enumerable: true,
+  get: function () {
+    return _TabView.default;
+  }
+});
+Object.defineProperty(exports, "TabViewItem", {
+  enumerable: true,
+  get: function () {
+    return _TabViewItem.default;
+  }
+});
+var _TabView = _interopRequireDefault(require("./TabView"));
+var _TabViewItem = _interopRequireDefault(require("./TabViewItem"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/commonjs/index.js

@@ -273,12 +273,6 @@ Object.defineProperty(exports, "ScreenContainer", {
     return _ScreenContainer.default;
   }
 });
-Object.defineProperty(exports, "Shadow", {
-  enumerable: true,
-  get: function () {
-    return _Shadow.default;
-  }
-});
 Object.defineProperty(exports, "Slider", {
   enumerable: true,
   get: function () {
@@ -345,6 +339,18 @@ Object.defineProperty(exports, "SwitchRow", {
     return _Switch.SwitchRow;
   }
 });
+Object.defineProperty(exports, "TabView", {
+  enumerable: true,
+  get: function () {
+    return _TabView.TabView;
+  }
+});
+Object.defineProperty(exports, "TabViewItem", {
+  enumerable: true,
+  get: function () {
+    return _TabView.TabViewItem;
+  }
+});
 Object.defineProperty(exports, "TextField", {
   enumerable: true,
   get: function () {
@@ -419,8 +425,8 @@ var _ActionSheet = require("./components/ActionSheet");
 var _Swiper = require("./components/Swiper");
 var _Layout = require("./components/Layout");
 var _index = require("./components/RadioButton/index");
-var _Shadow = _interopRequireDefault(require("./components/Shadow"));
 var _DeckSwiper = require("./components/DeckSwiper");
+var _TabView = require("./components/TabView");
 var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
 var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));
 var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));

package/lib/commonjs/mappings/TabView.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SEED_DATA = {
+  name: "Tab View",
+  tag: "TabView",
+  description: "Tab view container",
+  category: _types.COMPONENT_TYPES.swiper,
+  stylesPanelSections: [..._types.BLOCK_STYLES_SECTIONS, _types.StylesPanelSections.Background],
+  triggers: [_types.Triggers.OnIndexChanged, _types.Triggers.OnEndReached],
+  props: {
+    onIndexChanged: (0, _types.createActionProp)({
+      label: "On index changed",
+      description: "Action to execute when swipe to new index"
+    }),
+    onEndReached: (0, _types.createActionProp)({
+      label: "On end reached",
+      description: "Action to execute when end of swiping reached"
+    }),
+    tabBarPosition: (0, _types.createTextEnumProp)({
+      label: "Tab Bar Position",
+      description: "Position of tab bar",
+      options: ["top", "bottom"],
+      defaultValue: "top"
+    }),
+    keyboardDismissMode: (0, _types.createTextEnumProp)({
+      label: "Keyboard Dismiss Mode",
+      description: "Keyboard Dismiss Mode",
+      options: ["auto", "on-drag", "none"],
+      defaultValue: "auto"
+    }),
+    swipeEnabled: (0, _types.createStaticBoolProp)({
+      label: "Swipe Enabled",
+      description: "Whether swiping is enabled or not",
+      defaultValue: true
+    }),
+    scrollEnabled: (0, _types.createStaticBoolProp)({
+      label: "Scroll Enabled",
+      description: "Whether scrolling of tabs is enabled or not",
+      defaultValue: true
+    }),
+    activeColor: (0, _types.createColorProp)({
+      label: "Active Color",
+      description: "Color of icon and text of active tab",
+      defaultValue: "primary"
+    }),
+    inactiveColor: (0, _types.createColorProp)({
+      label: "Inactive Color",
+      description: "Color of icon and text of inactive tab(s)",
+      defaultValue: null
+    }),
+    pressColor: (0, _types.createColorProp)({
+      label: "Press Color",
+      description: "Color of ripple when pressed (android only)",
+      defaultValue: "primary"
+    }),
+    indicatorColor: (0, _types.createColorProp)({
+      label: "Indicator Color",
+      description: "Color of indicator",
+      defaultValue: "primary"
+    }),
+    tabsBackgroundColor: (0, _types.createColorProp)({
+      label: "Tabs Background Color",
+      description: "Background color of tabs container",
+      defaultValue: "background"
+    })
+  }
+};
+exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/TabViewItem.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SEED_DATA = {
+  name: "Tab View Item",
+  tag: "TabViewItem",
+  description: "Single Tab View item to be used in TabView. Each item represents a single tab and its content",
+  category: _types.COMPONENT_TYPES.swiper,
+  stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    flex: 1
+  },
+  props: {
+    title: (0, _types.createTextProp)({
+      label: "Title",
+      description: "Title of tab item",
+      defaultValue: null,
+      required: true
+    }),
+    icon: (0, _types.createIconProp)({
+      defaultValue: null,
+      required: false
+    }),
+    accessibilityLabel: (0, _types.createTextProp)({
+      label: "Accessibility Label",
+      description: "Accessibility Label",
+      defaultValue: null,
+      group: _types.GROUPS.accessibility
+    })
+  }
+};
+exports.SEED_DATA = SEED_DATA;

package/lib/module/components/AspectRatio.js

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from "react";
 import { View, StyleSheet } from "react-native";
 const AspectRatio = props => {
@@ -26,24 +27,6 @@ const AspectRatio = props => {
       });
     }
   }
-  return /*#__PURE__*/React.createElement(View, {
-    ...props,
-    style: style,
-    onLayout: _ref => {
-      let {
-        nativeEvent: {
-          layout: l
-        }
-      } = _ref;
-      return setLayout(l);
-    }
-  }, props.children);
-};
-export default AspectRatio;idth,
-        height: width * (1 / aspectRatio)
-      });
-    }
-  }
   return /*#__PURE__*/React.createElement(View, _extends({}, props, {
     style: style,
     onLayout: _ref => {

package/lib/module/components/Checkbox/CheckboxGroupRow.js

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { StyleSheet, View, Platform, Pressable } from "react-native";
 import Checkbox from "./Checkbox";
@@ -5,7 +6,7 @@ import Text from "../Text";
 import { useCheckboxGroupContext } from "./context";
 import { Direction as GroupDirection } from "./context";
 import { extractStyles } from "../../utilities";
-export var Direction;
+export let Direction;
 (function (Direction) {
   Direction["Row"] = "row";
   Direction["RowReverse"] = "row-reverse";
@@ -62,14 +63,13 @@ const CheckboxGroupRow = _ref => {
     textStyles,
     viewStyles
   } = extractStyles(style);
-  return /*#__PURE__*/React.createElement(Pressable, {
+  return /*#__PURE__*/React.createElement(Pressable, _extends({
     onPress: handlePress,
     style: [styles.mainParent, {
       flexDirection: direction
     }, viewStyles],
-    disabled: disabled,
-    ...rest
-  }, /*#__PURE__*/React.createElement(View, {
+    disabled: disabled
+  }, rest), /*#__PURE__*/React.createElement(View, {
     style: [styles.label, {
       alignItems: direction === Direction.Row ? "flex-start" : "flex-end"
     }, labelContainerStyle]
@@ -107,23 +107,4 @@ const styles = StyleSheet.create({
     flex: 3
   }
 });
-export default CheckboxGroupRow;reate({
-  mainParent: {
-    alignItems: "center",
-    justifyContent: "space-around",
-    paddingStart: 20,
-    minHeight: 50,
-    paddingEnd: 20,
-    display: "flex",
-    ...Platform.select({
-      web: {
-        cursor: "pointer",
-        userSelect: "none"
-      }
-    })
-  },
-  label: {
-    flex: 3
-  }
-});
 export default CheckboxGroupRow;

package/lib/module/components/TabView/TabView.js

@@ -0,0 +1,90 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from "react";
+import { TabView, TabBar, SceneMap } from "react-native-tab-view";
+import TabViewItem from "./TabViewItem";
+import { withTheme } from "../../theming";
+const TabViewComponent = _ref => {
+  let {
+    Icon,
+    onIndexChanged,
+    onEndReached,
+    tabBarPosition,
+    keyboardDismissMode,
+    swipeEnabled,
+    scrollEnabled,
+    activeColor,
+    inactiveColor,
+    pressColor,
+    indicatorColor,
+    tabsBackgroundColor,
+    style,
+    theme,
+    children
+  } = _ref;
+  const [index, setIndex] = React.useState(0);
+  const [routes, setRoutes] = React.useState([]);
+  const [tabScenes, setTabScenes] = React.useState({});
+
+  //Populate routes and scenes based on children
+  React.useEffect(() => {
+    const newRoutes = [];
+    const scenes = {};
+    React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === TabViewItem).forEach((item, idx) => {
+      const child = item;
+      newRoutes.push({
+        key: idx.toString(),
+        title: child.props.title,
+        icon: child.props.icon,
+        accessibilityLabel: child.props.accessibilityLabel
+      });
+      scenes[idx] = () => child;
+    });
+    setRoutes(newRoutes);
+    setTabScenes(scenes);
+  }, [children]);
+  const indexChangeHandler = i => {
+    setIndex(i);
+    onIndexChanged === null || onIndexChanged === void 0 ? void 0 : onIndexChanged(i);
+    if (i === routes.length) {
+      onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
+    }
+  };
+  const renderTabBar = props => {
+    return /*#__PURE__*/React.createElement(TabBar, _extends({}, props, {
+      activeColor: activeColor || theme.colors.primary,
+      inactiveColor: inactiveColor || theme.colors.divider,
+      pressColor: pressColor || theme.colors.primary,
+      scrollEnabled: scrollEnabled,
+      indicatorStyle: {
+        backgroundColor: indicatorColor || theme.colors.primary
+      },
+      renderIcon: _ref2 => {
+        let {
+          route,
+          color
+        } = _ref2;
+        return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
+          name: route.icon,
+          color: color,
+          size: 36
+        }) : null;
+      },
+      style: [{
+        backgroundColor: tabsBackgroundColor || theme.colors.background
+      }, style]
+    }));
+  };
+  return /*#__PURE__*/React.createElement(TabView, {
+    navigationState: {
+      index,
+      routes
+    },
+    renderScene: SceneMap(tabScenes),
+    renderTabBar: renderTabBar,
+    onIndexChange: indexChangeHandler,
+    tabBarPosition: tabBarPosition,
+    keyboardDismissMode: keyboardDismissMode,
+    swipeEnabled: swipeEnabled
+  });
+};
+export default withTheme(TabViewComponent);

package/lib/module/components/TabView/TabViewItem.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+
+//Props used by parent (TabView) to create tabs
+
+const TabViewItem = _ref => {
+  let {
+    style,
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.parentContainer, style]
+  }, children);
+};
+const styles = StyleSheet.create({
+  parentContainer: {
+    flex: 1
+  }
+});
+export default TabViewItem;

package/lib/module/components/TabView/index.js

@@ -0,0 +1,2 @@
+export { default as TabView } from "./TabView";
+export { default as TabViewItem } from "./TabViewItem";

package/lib/module/index.js

@@ -31,8 +31,8 @@ export { ActionSheet, ActionSheetItem, ActionSheetCancel } from "./components/Ac
 export { Swiper, SwiperItem } from "./components/Swiper";
 export { Center, Circle, Square, Row, Stack, Spacer } from "./components/Layout";
 export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup } from "./components/RadioButton/index";
-export { default as Shadow } from "./components/Shadow";
 export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
+export { TabView, TabViewItem } from "./components/TabView";
 
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";

package/lib/module/mappings/TabView.js

@@ -0,0 +1,66 @@
+import { COMPONENT_TYPES, createTextEnumProp, createColorProp, BLOCK_STYLES_SECTIONS, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Tab View",
+  tag: "TabView",
+  description: "Tab view container",
+  category: COMPONENT_TYPES.swiper,
+  stylesPanelSections: [...BLOCK_STYLES_SECTIONS, StylesPanelSections.Background],
+  triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
+  props: {
+    onIndexChanged: createActionProp({
+      label: "On index changed",
+      description: "Action to execute when swipe to new index"
+    }),
+    onEndReached: createActionProp({
+      label: "On end reached",
+      description: "Action to execute when end of swiping reached"
+    }),
+    tabBarPosition: createTextEnumProp({
+      label: "Tab Bar Position",
+      description: "Position of tab bar",
+      options: ["top", "bottom"],
+      defaultValue: "top"
+    }),
+    keyboardDismissMode: createTextEnumProp({
+      label: "Keyboard Dismiss Mode",
+      description: "Keyboard Dismiss Mode",
+      options: ["auto", "on-drag", "none"],
+      defaultValue: "auto"
+    }),
+    swipeEnabled: createStaticBoolProp({
+      label: "Swipe Enabled",
+      description: "Whether swiping is enabled or not",
+      defaultValue: true
+    }),
+    scrollEnabled: createStaticBoolProp({
+      label: "Scroll Enabled",
+      description: "Whether scrolling of tabs is enabled or not",
+      defaultValue: true
+    }),
+    activeColor: createColorProp({
+      label: "Active Color",
+      description: "Color of icon and text of active tab",
+      defaultValue: "primary"
+    }),
+    inactiveColor: createColorProp({
+      label: "Inactive Color",
+      description: "Color of icon and text of inactive tab(s)",
+      defaultValue: null
+    }),
+    pressColor: createColorProp({
+      label: "Press Color",
+      description: "Color of ripple when pressed (android only)",
+      defaultValue: "primary"
+    }),
+    indicatorColor: createColorProp({
+      label: "Indicator Color",
+      description: "Color of indicator",
+      defaultValue: "primary"
+    }),
+    tabsBackgroundColor: createColorProp({
+      label: "Tabs Background Color",
+      description: "Background color of tabs container",
+      defaultValue: "background"
+    })
+  }
+};

package/lib/module/mappings/TabViewItem.js

@@ -0,0 +1,29 @@
+import { COMPONENT_TYPES, createTextProp, createIconProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Tab View Item",
+  tag: "TabViewItem",
+  description: "Single Tab View item to be used in TabView. Each item represents a single tab and its content",
+  category: COMPONENT_TYPES.swiper,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    flex: 1
+  },
+  props: {
+    title: createTextProp({
+      label: "Title",
+      description: "Title of tab item",
+      defaultValue: null,
+      required: true
+    }),
+    icon: createIconProp({
+      defaultValue: null,
+      required: false
+    }),
+    accessibilityLabel: createTextProp({
+      label: "Accessibility Label",
+      description: "Accessibility Label",
+      defaultValue: null,
+      group: GROUPS.accessibility
+    })
+  }
+};

package/lib/typescript/src/components/TabView/TabView.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import type { IconSlot } from "../../interfaces/Icon";
+import type { Theme } from "../../styles/DefaultTheme";
+declare type TabBarPosition = "top" | "bottom";
+declare type KeyboardDismissMode = "none" | "auto" | "on-drag";
+declare type TabViewProps = {
+    onIndexChanged?: (index: number) => void;
+    onEndReached?: () => void;
+    tabBarPosition?: TabBarPosition;
+    keyboardDismissMode?: KeyboardDismissMode;
+    swipeEnabled?: boolean;
+    scrollEnabled?: boolean;
+    activeColor?: string;
+    inactiveColor?: string;
+    pressColor?: string;
+    indicatorColor?: string;
+    tabsBackgroundColor?: string;
+    style?: StyleProp<ViewStyle>;
+    theme: Theme;
+} & IconSlot;
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<TabViewProps>, "theme"> & {
+    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
+}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<TabViewProps>> & React.FC<React.PropsWithChildren<TabViewProps>>, {}>;
+export default _default;
+//# sourceMappingURL=TabView.d.ts.map

package/lib/typescript/src/components/TabView/TabView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../../../src/components/TabView/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAWpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAKvD,aAAK,cAAc,GAAG,KAAK,GAAG,QAAQ,CAAC;AACvC,aAAK,mBAAmB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvD,aAAK,YAAY,GAAG;IAClB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;CACd,GAAG,QAAQ,CAAC;;;;AA4Fb,wBAA2C"}