@draftbit/core 46.4.4-7d0f5d.2 → 46.4.4-804547.2

package/lib/typescript/src/theming.d.ts

@@ -6,3 +6,4 @@ export declare const ThemeProvider: import("react").ComponentType<{
 }, C>(WrappedComponent: import("react").ComponentType<Props> & C) => import("react").ComponentType<import("@draftbit/react-theme-provider").$Without<Props, "theme"> & {
     theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
 }> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<Props> & C, {}>, useTheme: (overrides?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined) => any;
+//# sourceMappingURL=theming.d.ts.map

package/lib/typescript/src/theming.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theming.d.ts","sourceRoot":"","sources":["../../../src/theming.tsx"],"names":[],"mappings":";AAIA,eAAO,MAAQ,aAAa;;IAAE,SAAS;;;;6IAAE,QAAQ,6FACb,CAAC"}

package/lib/typescript/src/utilities.d.ts

@@ -24,3 +24,4 @@ export declare function extractBorderAndMarginStyles(style: StyleProp<any>, addi
  */
 export declare function applyStyles(baseStyles: Array<StyleProp<any>>, stylesToApply: StyleProp<any> | undefined): any;
 export declare function getValueForRadioButton(value: string | number): string;
+//# sourceMappingURL=utilities.d.ts.map

package/lib/typescript/src/utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../../src/utilities.ts"],"names":[],"mappings":";AAAA,OAAO,EAAc,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGhE,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC;;;EA+BlD;AAED,eAAO,MAAM,gBAAgB,UAwB5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAU5B,CAAC;AAEF,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,EACrB,sBAAsB,CAAC,EAAE,MAAM,EAAE,EACjC,sBAAsB,CAAC,EAAE,MAAM,EAAE;;;EAqBlC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CACzB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,EACjC,aAAa,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,SAAS,OAe1C;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,UAQ5D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.4.4-7d0f5d.2+7d0f5dc",
+  "version": "46.4.4-804547.2+804547f",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,8 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^46.4.4-7d0f5d.2+7d0f5dc",
-    "@gorhom/bottom-sheet": "4.4.5",
+    "@draftbit/types": "^46.4.4-804547.2+804547f",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -55,8 +54,9 @@
     "lodash.omit": "^4.5.0",
     "lodash.tonumber": "^4.0.3",
     "react-native-modal-datetime-picker": "^13.0.0",
-    "react-native-scroll-bottom-sheet": "0.7.0",
-    "react-native-svg": "12.3.0",
+    "react-native-pager-view": "5.4.24",
+    "react-native-svg": "^12.3.0",
+    "react-native-tab-view": "^3.3.0",
     "react-native-typography": "^1.4.1",
     "react-native-web-swiper": "^2.2.3"
   },
@@ -72,8 +72,18 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
-      "module",
+      [
+        "commonjs",
+        {
+          "sourceMaps": false
+        }
+      ],
+      [
+        "module",
+        {
+          "sourceMaps": false
+        }
+      ],
       [
         "typescript",
         {
@@ -83,5 +93,5 @@
       ]
     ]
   },
-  "gitHead": "7d0f5dcc05ed486e5926c7e5a1a57299ae1a102a"
+  "gitHead": "804547f11d2f8a2fe50ce0f5760876687a7ba108"
 }

package/src/components/Picker/Picker.js

@@ -194,7 +194,6 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
                     React.createElement(NativePicker, { style: styles.iosNativePicker, selectedValue: internalValue, onValueChange: handleValueChange }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))))))) : null,
         !isIos && pickerVisible ? (React.createElement(NativePicker, { enabled: pickerVisible, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: () => setPickerVisible(false) }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))) : null));
 };
-export default withTheme(Picker);
 const styles = StyleSheet.create({
     marginsContainer: {
         alignSelf: "stretch",
@@ -265,3 +264,4 @@ const styles = StyleSheet.create({
         maxHeight: deviceHeight,
     },
 });
+export default withTheme(Picker);

package/src/components/Picker/Picker.tsx

@@ -406,8 +406,6 @@ const Picker: React.FC<PickerProps> = ({
   );
 };
 
-export default withTheme(Picker);
-
 const styles = StyleSheet.create({
   marginsContainer: {
     alignSelf: "stretch",
@@ -478,3 +476,5 @@ const styles = StyleSheet.create({
     maxHeight: deviceHeight,
   },
 });
+
+export default withTheme(Picker);

package/src/components/Stepper.js

@@ -3,7 +3,9 @@ import { View, Text } from "react-native";
 import { isNumber } from "lodash";
 import { withTheme } from "../theming";
 import IconButton from "./IconButton";
-const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultValue, style, typeStyle, iconSize = 24, iconColor, onChange, theme: { colors, typography }, Icon, }) => {
+import { extractStyles } from "../utilities";
+const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultValue, style, iconSize = 24, iconColor, onChange, theme: { colors, typography }, Icon, }) => {
+    const { viewStyles, textStyles } = extractStyles(style);
     const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
     const isValidValue = (valueArg) => valueArg >= min && valueArg <= max;
     const handlePlusOrMinus = (type) => {
@@ -22,7 +24,7 @@ const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultVal
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [valueProp]);
-    return (React.createElement(View, { style: [{ flexDirection: "row" }, style] },
+    return (React.createElement(View, { style: [{ flexDirection: "row" }, viewStyles] },
         React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: () => handlePlusOrMinus("minus"), size: iconSize, color: iconColor, disabled: value === min, style: { opacity: value === min ? 0.5 : 1 } }),
         React.createElement(Text, { style: [
                 typography.body1,
@@ -32,7 +34,7 @@ const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultVal
                     color: colors.medium,
                     marginHorizontal: 8,
                 },
-                typeStyle,
+                textStyles,
             ] }, value),
         React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: () => handlePlusOrMinus("plus"), size: iconSize, color: iconColor, disabled: value === max, style: { opacity: value === max ? 0.5 : 1 } })));
 };

package/src/components/Stepper.tsx

@@ -6,14 +6,14 @@ import { withTheme } from "../theming";
 import type { Theme } from "../styles/DefaultTheme";
 import type { IconSlot } from "../interfaces/Icon";
 import IconButton from "./IconButton";
+import { extractStyles } from "../utilities";
 
 type Props = {
   min: number;
   max: number;
   value?: number;
   defaultValue?: number;
-  style?: StyleProp<ViewStyle>;
-  typeStyle?: StyleProp<TextStyle>;
+  style?: StyleProp<ViewStyle | TextStyle>;
   iconSize: number;
   iconColor?: string;
   onChange?: (value: number) => void;
@@ -26,13 +26,13 @@ const Stepper: FC<Props> = ({
   value: valueProp,
   defaultValue,
   style,
-  typeStyle,
   iconSize = 24,
   iconColor,
   onChange,
   theme: { colors, typography },
   Icon,
 }) => {
+  const { viewStyles, textStyles } = extractStyles(style);
   const [value, setValue] = useState(defaultValue ?? 0);
 
   const isValidValue = (valueArg: number) => valueArg >= min && valueArg <= max;
@@ -59,7 +59,7 @@ const Stepper: FC<Props> = ({
   }, [valueProp]);
 
   return (
-    <View style={[{ flexDirection: "row" }, style]}>
+    <View style={[{ flexDirection: "row" }, viewStyles]}>
       <IconButton
         Icon={Icon}
         icon="MaterialIcons/remove"
@@ -79,7 +79,7 @@ const Stepper: FC<Props> = ({
             color: colors.medium,
             marginHorizontal: 8,
           },
-          typeStyle,
+          textStyles,
         ]}
       >
         {value}

package/src/components/TabView/TabView.js

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { TabView, TabBar, SceneMap } from "react-native-tab-view";
+// import { withTheme } from "../../theming";
+import TabViewItem from "./TabViewItem";
+const TabViewComponent = ({ Icon, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, style, children, }) => {
+    const [index, setIndex] = React.useState(0);
+    const [routes, setRoutes] = React.useState([]);
+    const [tabScenes, setTabScenes] = React.useState({});
+    React.useEffect(() => {
+        const newRoutes = [];
+        const scenes = {};
+        React.Children.toArray(children)
+            .filter((child) => child.type === TabViewItem)
+            .forEach((child) => {
+            var _a, _b, _c;
+            if ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.id) {
+                newRoutes.push({
+                    key: (_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.id,
+                    ...child === null || child === void 0 ? void 0 : child.props,
+                });
+                scenes[(_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.id] = () => child;
+            }
+        });
+        setRoutes(newRoutes);
+        setTabScenes(scenes);
+    }, [children]);
+    const indexChangeHandler = (i) => setIndex(i);
+    const renderTabBar = (props) => {
+        console.log(props);
+        return (React.createElement(TabBar, { ...props, activeColor: activeColor, inactiveColor: inactiveColor, pressColor: pressColor, scrollEnabled: scrollEnabled, indicatorStyle: { backgroundColor: indicatorColor }, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 36 })) : null, style: style }));
+    };
+    return (React.createElement(TabView, { navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
+};
+export default TabViewComponent;

package/src/components/TabView/TabView.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { TabView, TabBar, SceneMap } from "react-native-tab-view";
+
+// import { withTheme } from "../../theming";
+import TabViewItem from "./TabViewItem";
+import type { IconSlot } from "../../interfaces/Icon";
+
+type TabBarPosition = "top" | "bottom";
+type KeyboardDismissMode = "none" | "auto" | "on-drag";
+
+type TabViewProps = {
+  tabBarPosition?: TabBarPosition;
+  keyboardDismissMode?: KeyboardDismissMode;
+  swipeEnabled?: boolean;
+  scrollEnabled?: boolean;
+  activeColor?: string;
+  inactiveColor?: string;
+  pressColor?: string;
+  indicatorColor?: string;
+  style?: StyleProp<TextStyle | ViewStyle>;
+  children: React.ReactNode;
+} & IconSlot;
+
+const TabViewComponent = ({
+  Icon,
+  tabBarPosition,
+  keyboardDismissMode,
+  swipeEnabled,
+  scrollEnabled,
+  activeColor,
+  inactiveColor,
+  pressColor,
+  indicatorColor,
+  style,
+  children,
+}: TabViewProps) => {
+  const [index, setIndex] = React.useState(0);
+  const [routes, setRoutes] = React.useState([]);
+  const [tabScenes, setTabScenes] = React.useState({});
+
+  React.useEffect(() => {
+    const newRoutes: any = [];
+    const scenes: any = {};
+
+    React.Children.toArray(children)
+      .filter((child: any) => child.type === TabViewItem)
+      .forEach((child: any) => {
+        if (child?.props?.id) {
+          newRoutes.push({
+            key: child?.props?.id,
+            ...child?.props,
+          });
+          scenes[child?.props?.id] = () => child;
+        }
+      });
+
+    setRoutes(newRoutes);
+    setTabScenes(scenes);
+  }, [children]);
+
+  const indexChangeHandler = (i: any) => setIndex(i);
+
+  const renderTabBar = (props: any) => {
+    console.log(props);
+    return (
+      <TabBar
+        {...props}
+        activeColor={activeColor}
+        inactiveColor={inactiveColor}
+        pressColor={pressColor}
+        scrollEnabled={scrollEnabled}
+        indicatorStyle={{ backgroundColor: indicatorColor }}
+        renderIcon={({ route, color }) =>
+          route?.icon ? (
+            <Icon name={route.icon} color={color} size={36} />
+          ) : null
+        }
+        style={style}
+      />
+    );
+  };
+
+  return (
+    <TabView
+      navigationState={{ index, routes }}
+      renderScene={SceneMap(tabScenes)}
+      renderTabBar={renderTabBar}
+      onIndexChange={indexChangeHandler}
+      tabBarPosition={tabBarPosition}
+      keyboardDismissMode={keyboardDismissMode}
+      swipeEnabled={swipeEnabled}
+    />
+  );
+};
+
+export default TabViewComponent;

package/src/components/TabView/TabViewItem.js

@@ -0,0 +1,5 @@
+const TabViewItem = ({ title, id, icon, children, accessibilityLabel, }) => {
+    console.log({ title, id, icon, accessibilityLabel });
+    return children;
+};
+export default TabViewItem;

package/src/components/TabView/TabViewItem.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+interface TabViewItemProps {
+  title: string;
+  id: string;
+  icon: string;
+  accessibilityLabel: string;
+  children: React.ReactNode;
+}
+
+const TabViewItem = ({
+  title,
+  id,
+  icon,
+  children,
+  accessibilityLabel,
+}: TabViewItemProps) => {
+  console.log({ title, id, icon, accessibilityLabel });
+  return children;
+};
+
+export default TabViewItem;

package/src/components/TabView/index.js

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

package/src/components/TabView/index.tsx

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

package/src/index.js

@@ -29,7 +29,7 @@ export { default as Touchable } from "./components/Touchable";
 export { AccordionGroup, AccordionItem } from "./components/Accordion";
 export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";
-export { BottomSheet } from "./components/BottomSheet";
+export { TabView, TabViewItem } from "./components/TabView";
 export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
 export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
 /* Deprecated: Fix or Delete!  */

package/src/index.tsx

@@ -34,7 +34,7 @@ export {
   ActionSheetCancel,
 } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";
-export { BottomSheet } from "./components/BottomSheet";
+export { TabView, TabViewItem } from "./components/TabView";
 
 export {
   Center,

package/src/mappings/AudioPlayer.js

@@ -1,10 +1,27 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, StylesPanelSections, createColorProp, createNumberProp, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Audio Player",
     tag: "AudioPlayer",
     description: "Given a source URL, plays sounds & audio!",
     category: COMPONENT_TYPES.media,
-    layout: {},
+    stylesPanelSections: [
+        StylesPanelSections.Typography,
+        StylesPanelSections.Background,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Position,
+    ],
+    layout: {
+        backgroundColor: "#eee",
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 8,
+        paddingBottom: 8,
+        borderRadius: 24,
+        flexDirection: "row",
+        alignItems: "center",
+    },
     props: {
         source: {
             group: GROUPS.data,
@@ -16,5 +33,25 @@ export const SEED_DATA = {
             formType: FORM_TYPES.sourceUrl,
             propType: PROP_TYPES.OBJECT,
         },
+        sliderColor: createColorProp({
+            label: "Thumb Color",
+            defaultValue: "strong",
+        }),
+        completedTrackColor: createColorProp({
+            label: "Completed Track Color",
+            defaultValue: "background",
+        }),
+        remainingTrackColor: createColorProp({
+            label: "Remaining Track Color",
+            defaultValue: "light",
+        }),
+        trackThumbSize: createNumberProp({
+            label: "Thumb Size",
+            defaultValue: 24,
+        }),
+        playIconColor: createColorProp({
+            label: "Play Icon Color",
+            defaultValue: "strong",
+        }),
     },
 };

package/src/mappings/AudioPlayer.ts

@@ -3,6 +3,9 @@ import {
   COMPONENT_TYPES,
   FORM_TYPES,
   PROP_TYPES,
+  StylesPanelSections,
+  createColorProp,
+  createNumberProp,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -10,7 +13,24 @@ export const SEED_DATA = {
   tag: "AudioPlayer",
   description: "Given a source URL, plays sounds & audio!",
   category: COMPONENT_TYPES.media,
-  layout: {},
+  stylesPanelSections: [
+    StylesPanelSections.Typography,
+    StylesPanelSections.Background,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+  ],
+  layout: {
+    backgroundColor: "#eee",
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 8,
+    paddingBottom: 8,
+    borderRadius: 24,
+    flexDirection: "row",
+    alignItems: "center",
+  },
   props: {
     source: {
       group: GROUPS.data,
@@ -23,5 +43,25 @@ export const SEED_DATA = {
       formType: FORM_TYPES.sourceUrl,
       propType: PROP_TYPES.OBJECT,
     },
+    sliderColor: createColorProp({
+      label: "Thumb Color",
+      defaultValue: "strong",
+    }),
+    completedTrackColor: createColorProp({
+      label: "Completed Track Color",
+      defaultValue: "background",
+    }),
+    remainingTrackColor: createColorProp({
+      label: "Remaining Track Color",
+      defaultValue: "light",
+    }),
+    trackThumbSize: createNumberProp({
+      label: "Thumb Size",
+      defaultValue: 24,
+    }),
+    playIconColor: createColorProp({
+      label: "Play Icon Color",
+      defaultValue: "strong",
+    }),
   },
 };

package/src/mappings/Stepper.js

@@ -1,11 +1,14 @@
-import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, BLOCK_STYLES_SECTIONS, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = [
     {
         name: "Stepper",
         tag: "Stepper",
         description: "A component used to control the quantity of something",
         category: COMPONENT_TYPES.control,
-        stylesPanelSections: BLOCK_STYLES_SECTIONS,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            ...BLOCK_STYLES_SECTIONS,
+        ],
         layout: {},
         triggers: [Triggers.OnChange],
         props: {

package/src/mappings/Stepper.ts

@@ -6,6 +6,7 @@ import {
   createStaticNumberProp,
   Triggers,
   BLOCK_STYLES_SECTIONS,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -14,7 +15,10 @@ export const SEED_DATA = [
     tag: "Stepper",
     description: "A component used to control the quantity of something",
     category: COMPONENT_TYPES.control,
-    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    stylesPanelSections: [
+      StylesPanelSections.Typography,
+      ...BLOCK_STYLES_SECTIONS,
+    ],
     layout: {},
     triggers: [Triggers.OnChange],
     props: {

package/src/mappings/TabView.js

@@ -0,0 +1,73 @@
+import { COMPONENT_TYPES, createTextProp, createTextEnumProp, createBoolProp, createColorProp, } from "@draftbit/types";
+export const SEED_DATA = [
+    {
+        name: "Tab View",
+        tag: "TabView",
+        category: COMPONENT_TYPES.container,
+        layout: {},
+        props: {
+            tabBarPosition: createTextEnumProp({
+                label: "Tab Bar Position",
+                description: "Tab Bar Position",
+                options: ["top", "bottom"],
+                defaultValue: "top",
+            }),
+            keyboardDismissMode: createTextEnumProp({
+                label: "Keyboard Dismiss Mode",
+                description: "Keyboard Dismiss Mode",
+                options: ["auto", "on-drag", "none"],
+                defaultValue: "auto",
+            }),
+            swipeEnabled: createBoolProp({
+                label: "Swipe Enabled",
+                description: "Swipe Enabled",
+                defaultValue: true,
+            }),
+            scrollEnabled: createBoolProp({
+                label: "Scroll Enabled",
+                description: "Scroll Enabled",
+                defaultValue: true,
+            }),
+            activeColor: createColorProp({
+                label: "Active Color",
+                description: "Active Color",
+                defaultValue: "primary",
+            }),
+            inactiveColor: createColorProp({
+                label: "Inactive Color",
+                description: "Inactive Color",
+                defaultValue: null,
+            }),
+            pressColor: createColorProp({
+                label: "Press Color",
+                description: "Press Color",
+                defaultValue: null,
+            }),
+            indicatorColor: createColorProp({
+                label: "Indicator Color",
+                description: "Indicator Color",
+                defaultValue: null,
+            }),
+        },
+    },
+    {
+        name: "Tab View Item",
+        tag: "TabViewItem",
+        category: COMPONENT_TYPES.container,
+        layout: {},
+        props: {
+            title: createTextProp({
+                label: "Title",
+                description: "Tab Title",
+            }),
+            id: createTextProp({
+                label: "Id",
+                description: "Tab Id",
+            }),
+            accessibilityLabel: createTextProp({
+                label: "Accessibility Label",
+                description: "Accessibility Label",
+            }),
+        },
+    },
+];