@draftbit/core 47.0.1-2935a8.2 → 47.0.1-2aab54.2

package/lib/module/index.js

@@ -2,53 +2,143 @@ export { injectIcon } from "./interfaces/Icon";
 export { withTheme, ThemeProvider } from "./theming";
 export { default as Provider } from "./Provider";
 export { default as DefaultTheme } from "./styles/DefaultTheme";
-export { Link } from "./components/Text";
+
+/** Replaced By NativeBase
+ * export { default as Avatar } from "./components/CircleImage";
+ * export { default as Container } from "./components/Container";
+ * export { default as FAB } from "./components/FAB";
+ * export {
+  Center,
+  Circle,
+  Square,
+  Row,
+  Stack,
+  Spacer,
+} from "./components/Layout";
+ */
+
+// BASIC
+export { default as ScreenContainer } from "./components/ScreenContainer";
 export { default as Banner } from "./components/Banner";
+
+// BUTTONS
 export { Button, ButtonSolid, ButtonOutline } from "./components/Button";
-export { default as Avatar } from "./components/CircleImage";
-export { default as AvatarEdit } from "./components/AvatarEdit";
-export { default as Card } from "./components/Card";
-export { default as Carousel } from "./components/Carousel";
-export { Checkbox, CheckboxGroup, CheckboxRow } from "./components/Checkbox";
-export { default as CircleImage } from "./components/CircleImage";
-export { default as Container } from "./components/Container";
-export { default as Divider } from "./components/Divider";
-export { default as FAB } from "./components/FAB";
-export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
+export { Link } from "./components/Text";
 export { default as IconButton } from "./components/IconButton";
-export { default as Image } from "./components/Image";
-export { default as SVG } from "./components/SVG";
+export { default as Touchable } from "./components/Touchable";
+export { default as ToggleButton } from "./components/ToggleButton";
+
+// INPUTS
+export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as NumberInput } from "./components/NumberInput";
-export { default as ScreenContainer } from "./components/ScreenContainer";
+export { default as TextField } from "./components/TextField";
+export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
+export { default as Picker } from "./components/Picker/Picker";
+
+// CONTROLS
+export { Checkbox, CheckboxGroup, CheckboxRow } from "./components/Checkbox";
+export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup } from "./components/RadioButton/index";
+export { default as Slider } from "./components/Slider";
+export { default as Stepper } from "./components/Stepper";
 export { default as StarRating } from "./components/StarRating";
-export { default as Surface } from "./components/Surface";
 export { default as Switch, SwitchRow } from "./components/Switch";
-export { default as TextField } from "./components/TextField";
-export { default as ToggleButton } from "./components/ToggleButton";
-export { default as Touchable } from "./components/Touchable";
+
+// MEDIA
+export { default as SVG } from "./components/SVG";
+export { default as Image } from "./components/Image";
+// export { default as Avatar } from "./components/CircleImage"; Replaced by NativeBase
+export { default as AvatarEdit } from "./components/AvatarEdit";
+export { default as CircleImage } from "./components/CircleImage";
+
+// SWIPER
+export { Swiper, SwiperItem } from "./components/Swiper";
+
+// CONTAINERS
 export { AccordionGroup, AccordionItem } from "./components/Accordion";
+export { default as Surface } from "./components/Surface";
+
+// ACTIONSHEET
 export { ActionSheet, ActionSheetItem, ActionSheetCancel } from "./components/ActionSheet";
-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";
 
-/* Deprecated: Fix or Delete!  */
-export { default as CardBlock } from "./components/CardBlock";
-export { default as CardContainer } from "./components/CardContainer";
-export { default as CardContainerRating } from "./components/CardContainerRating";
-export { default as CardInline } from "./components/CardInline";
-export { default as DatePicker } from "./components/DatePicker/DatePicker";
+// OTHER
+export { default as Carousel } from "./components/Carousel";
+export { default as Divider } from "./components/Divider";
 export { default as HeaderLarge } from "./components/HeaderLarge";
 export { default as HeaderMedium } from "./components/HeaderMedium";
 export { default as HeaderOverline } from "./components/HeaderOverline";
-export { default as Picker } from "./components/Picker/Picker";
 export { default as ProgressBar } from "./components/ProgressBar";
 export { default as ProgressCircle } from "./components/ProgressCircle";
 export { default as RowBodyIcon } from "./components/RowBodyIcon";
 export { default as RowHeadlineImageCaption } from "./components/RowHeadlineImageCaption";
 export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIcon";
-export { default as Slider } from "./components/Slider";
-export { default as Stepper } from "./components/Stepper";
+export { default as Card } from "./components/Card";
+export { default as CardBlock } from "./components/CardBlock";
+export { default as CardContainer } from "./components/CardContainer";
+export { default as CardContainerRating } from "./components/CardContainerRating";
+export { default as CardInline } from "./components/CardInline";
 export { useAuthState } from "./components/useAuthState";
 
-// a comment to fix sourcemap comment issue
+/**
+ * NativeBase Components Jan 2023
+ *
+ * ALERT
+ * - AlertDialog
+ * - AlertDialog.Header
+ * - AlertDialog.Body
+ * - AlertDialog.Footer
+ * - AlertDialog.Content
+ * - AlertDialog.CloseButton
+ *
+ * FORMS
+ * - Button -- COMMENTED OUT
+ * - Button.Group -- COMMENTED OUT
+ * - Fab
+ *
+ * DATA DISPLAY
+ * - Badge
+ * - Divider
+ *
+ * FEEDBACK
+ * - Alert
+ * - Alert.Icon
+ * - Progress
+ *
+ * LAYOUT
+ * - AspectRatio
+ * - Box
+ * - Center
+ * - Square
+ * - Circle
+ * - Column
+ * - Container
+ * - Flex
+ * - Spacer
+ * - Row
+ * - Stack
+ * - ZStack
+ *
+ * MEDIA
+ * - Avatar
+ * - Avatar.Badge
+ * - Avatar.Group
+ *
+ * MENU
+ * - Menu
+ * - Menu.Item
+ * - Menu.Group
+ * - Menu.OptionGroup
+ * - Menu.ItemOption
+ * - Menu.Trigger
+ *
+ * MODAL
+ * - Modal
+ * - Modal.Content
+ * - Modal.Header
+ * - Modal.Footer
+ * - Modal.Body
+ * - Modal.CloseButton
+ *
+ * OTHER
+ * - Tooltip
+ *
+ * */

package/lib/module/mappings/FlashList.js

@@ -1,37 +1,5 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, Triggers, createActionProp } from "@draftbit/types";
-export const SEED_DATA = [{
-  name: "Masonry List",
-  tag: "MasonryFlashList",
-  description: "Masonry Flashlist by Shopify",
-  packageName: "@shopify/flash-list",
-  category: COMPONENT_TYPES.data,
-  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-  layout: {
-    flex: 1
-  },
-  triggers: [Triggers.OnRefresh, Triggers.OnEndReached, Triggers.OnEndReachedThreshold, Triggers.OnViewableItemsChanged],
-  props: {
-    onRefresh: createActionProp(),
-    onEndReached: createActionProp(),
-    onEndReachedThreshold: createActionProp(),
-    onViewableItemsChanged: createActionProp(),
-    numColumns: createNumColumnsType({
-      editable: true
-    }),
-    estimatedItemSize: createNumberProp({
-      group: GROUPS.basic,
-      label: "Est. Item Size",
-      description: "Approximate size of the items before rendering.",
-      defaultValue: 50,
-      step: 1,
-      precision: 0
-    }),
-    optimizeItemArrangement: createStaticBoolProp({
-      label: "Optimize Item Arrangement",
-      description: "If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order. If true, specifying overrideItemLayout is required. Default value is false."
-    })
-  }
-}, {
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS } from "@draftbit/types";
+export const SEED_DATA = {
   name: "FlashList",
   tag: "FlashList",
   description: "Flashlist by Shopify",
@@ -42,10 +10,6 @@ export const SEED_DATA = [{
     flex: 1
   },
   props: {
-    onRefresh: createActionProp(),
-    onEndReached: createActionProp(),
-    onEndReachedThreshold: createActionProp(),
-    onViewableItemsChanged: createActionProp(),
     estimatedItemSize: createNumberProp({
       group: GROUPS.basic,
       label: "Est. Item Size",
@@ -66,4 +30,4 @@ export const SEED_DATA = [{
       editable: true
     })
   }
-}];
+};

package/lib/module/mappings/FlatList.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp } from "@draftbit/types";
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS } from "@draftbit/types";
 export const SEED_DATA = {
   name: "List",
   tag: "FlatList",
@@ -8,12 +8,7 @@ export const SEED_DATA = {
   layout: {
     flex: 1
   },
-  triggers: [Triggers.OnRefresh, Triggers.OnEndReached, Triggers.OnEndReachedThreshold, Triggers.OnViewableItemsChanged],
   props: {
-    onRefresh: createActionProp(),
-    onEndReached: createActionProp(),
-    onEndReachedThreshold: createActionProp(),
-    onViewableItemsChanged: createActionProp(),
     horizontal: createStaticBoolProp({
       label: "Horizontal",
       description: "Render list horizontally"
@@ -24,10 +19,6 @@ export const SEED_DATA = {
     }),
     numColumns: createNumColumnsType({
       editable: true
-    }),
-    initialNumToRender: createStaticBoolProp({
-      label: "Initial Num To Render",
-      descriprion: "How many items to render in the initial batch"
     })
   }
 };

package/lib/module/mappings/NativeBase/AlertDialog.js

@@ -0,0 +1,86 @@
+import { COMPONENT_TYPES, StylesPanelSections, Triggers, createBoolProp, createStaticBoolProp, createTextEnumProp, createActionProp } from "@draftbit/types";
+const SHARED_SEED_DATA = {
+  category: COMPONENT_TYPES.NBAlert,
+  packageName: "native-base",
+  stylesPanelSections: [StylesPanelSections.LayoutFlexItems, StylesPanelSections.LayoutSelectedItem, StylesPanelSections.LayoutContent, StylesPanelSections.Background, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Borders, StylesPanelSections.Effects],
+  layout: {}
+};
+export const SEED_DATA = [{
+  name: "Alert Dialog",
+  tag: "AlertDialog",
+  description: "AlertDialog is used when a user needs to be interrupted with a mandatory confirmation or call-to-action. AlertDialog composes Modal so you can use all its props.",
+  ...SHARED_SEED_DATA,
+  triggers: [Triggers.OnClose, Triggers.OnOpen],
+  props: {
+    isOpen: createBoolProp({
+      label: "Is Open",
+      description: "If true, the modal will open. Useful for controllable state behavior."
+    }),
+    defaultIsOpen: createStaticBoolProp({
+      label: "Default Is Open",
+      description: "If true, the modal will be opened by default."
+    }),
+    avoidKeyboard: createStaticBoolProp({
+      label: "Avoid Keyboard",
+      description: "If true and the keyboard is opened, the modal will move up equivalent to the keyboard height.",
+      defaultValue: false
+    }),
+    closeOnOverlayClick: createStaticBoolProp({
+      label: "Close on Overlay Click",
+      description: "If true, the modal will close when the overlay is clicked.",
+      defaultValue: true
+    }),
+    isKeyboardDismissable: createStaticBoolProp({
+      label: "Is Keyboard Dismissable",
+      description: "If true, the modal will close when the keyboard is dismissed.",
+      defaultValue: true
+    }),
+    backdropVisible: createStaticBoolProp({
+      label: "Backdrop Visible",
+      description: "If true, the backdrop element is visible.",
+      defaultValue: true
+    }),
+    animationPreset: createTextEnumProp({
+      label: "Animation Preset",
+      description: "The animation preset to use for the modal.",
+      options: ["slide", "fade", "none"],
+      defaultValue: "fade"
+    }),
+    useRNModal: createStaticBoolProp({
+      label: "Use RN Modal",
+      description: "If true, the modal will use the RN Modal component."
+    }),
+    onOpen: createActionProp(),
+    onClose: createActionProp()
+  }
+}, {
+  name: "Alert Header",
+  tag: "AlertDialog.Header",
+  description: "Contains the title announced by screen readers.",
+  ...SHARED_SEED_DATA,
+  props: {}
+}, {
+  name: "Alert Body",
+  tag: "AlertDialog.Body",
+  description: "Contains the description announced by screen readers.",
+  ...SHARED_SEED_DATA,
+  props: {}
+}, {
+  name: "Alert Footer",
+  tag: "AlertDialog.Footer",
+  description: "Contains the actions of the dialog.",
+  ...SHARED_SEED_DATA,
+  props: {}
+}, {
+  name: "Alert Content",
+  tag: "AlertDialog.Content",
+  description: "The wrapper for the alert dialog's content.",
+  ...SHARED_SEED_DATA,
+  props: {}
+}, {
+  name: "Alert Close Button",
+  tag: "AlertDialog.CloseButton",
+  description: "The button that closes the dialog",
+  ...SHARED_SEED_DATA,
+  props: {}
+}];

package/lib/module/mappings/NativeBase/Button.js

@@ -0,0 +1,86 @@
+/* Temporarily Commented Out
+
+
+import {
+  COMPONENT_TYPES,
+  StylesPanelSections,
+  createTextEnumProp,
+  createBoolProp,
+  createIconProp,
+} from "@draftbit/types";
+
+const SHARED_SEED_DATA = {
+  category: COMPONENT_TYPES.NBForms,
+  packageName: "native-base",
+  stylesPanelSections: [
+    StylesPanelSections.LayoutFlexItems,
+    StylesPanelSections.LayoutSelectedItem,
+    StylesPanelSections.LayoutContent,
+    StylesPanelSections.Background,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
+  layout: {},
+  triggers: {},
+};
+
+export const SEED_DATA = [
+  {
+    name: "Button",
+    tag: "Button",
+    description:
+      "The Button component triggers an event or an action. Examples can be submitting forms and deleting a data point.",
+    ...SHARED_SEED_DATA,
+    props: {
+      isLoading: createBoolProp({
+        label: "Loading",
+        description: "If true, the button will show a spinner.",
+      }),
+      isDisabled: createBoolProp({
+        label: "Disabled",
+        description: "If true, the button will be disabled.",
+      }),
+      leftIcon: createIconProp({
+        label: "Left Icon",
+        description: "The icon to display on the left side of the button",
+      }),
+      rightIcon: createIconProp({
+        label: "Right Icon",
+        description: "The icon to display on the right side of the button",
+      }),
+      spinnerPlacement: createTextEnumProp({
+        label: "Spinner Placement",
+        description: "The placement of the spinner",
+        options: ["start", "end"],
+        defaultValue: "start",
+      }),
+    },
+  },
+  {
+    name: "Button Group",
+    tag: "ButtonGroup",
+    description:
+      "Used to group buttons whose actions are related, with an option to flush them together.",
+    ...SHARED_SEED_DATA,
+    allowChildren: true,
+    props: {
+      direction: createTextEnumProp({
+        label: "Direction",
+        description: "The direction of the button group",
+        options: ["row", "column"],
+        defaultValue: "row",
+      }),
+      isAttached: createBoolProp({
+        label: "Attached",
+        description: "If true, the buttons will be attached",
+      }),
+    },
+  },
+];
+ */ },
+  },
+];
+ */

package/lib/module/mappings/NativeBase/DataDisplay.js

@@ -0,0 +1,41 @@
+import { COMPONENT_TYPES, StylesPanelSections, createTextEnumProp, createIconProp, createStaticNumberProp } from "@draftbit/types";
+const SHARED_SEED_DATA = {
+  category: COMPONENT_TYPES.NBDataDisplay,
+  packageName: "native-base",
+  stylesPanelSections: [StylesPanelSections.LayoutFlexItems, StylesPanelSections.LayoutSelectedItem, StylesPanelSections.LayoutContent, StylesPanelSections.Background, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Borders, StylesPanelSections.Effects],
+  layout: {},
+  triggers: {}
+};
+export const SEED_DATA = [{
+  name: "Badge",
+  tag: "Badge",
+  description: "Badges allow the highlighting of an item’s status. This provides quick recognition.",
+  ...SHARED_SEED_DATA,
+  props: {
+    leftIcon: createIconProp({
+      label: "Left Icon",
+      description: "The icon to display on the left side of the button"
+    }),
+    rightIcon: createIconProp({
+      label: "Right Icon",
+      description: "The icon to display on the right side of the button"
+    })
+  }
+}, {
+  name: "Divider",
+  tag: "Divider",
+  description: "Divider can visually separate content in a given list or group.",
+  ...SHARED_SEED_DATA,
+  props: {
+    orientation: createTextEnumProp({
+      label: "Orientation",
+      description: "The orientation of the divider",
+      options: ["horizontal", "vertical"]
+    }),
+    thickness: createStaticNumberProp({
+      label: "Thickness",
+      description: "The thickness of the divider",
+      defaultValue: 1
+    })
+  }
+}];

package/lib/module/mappings/NativeBase/Feedback.js

@@ -0,0 +1,67 @@
+import { COMPONENT_TYPES, StylesPanelSections, createTextEnumProp, createNumberProp, createIconProp } from "@draftbit/types";
+const SHARED_SEED_DATA = {
+  category: COMPONENT_TYPES.NBFeedback,
+  packageName: "native-base",
+  stylesPanelSections: [StylesPanelSections.LayoutFlexItems, StylesPanelSections.LayoutSelectedItem, StylesPanelSections.LayoutContent, StylesPanelSections.Background, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Borders, StylesPanelSections.Effects],
+  layout: {},
+  triggers: {}
+};
+export const SEED_DATA = [{
+  name: "Alert",
+  tag: "Alert",
+  description: "Wrapper component. Alerts convey a state that can influence a system, feature, or page.",
+  ...SHARED_SEED_DATA,
+  props: {
+    status: createTextEnumProp({
+      label: "Status",
+      description: "The status of the alert",
+      options: ["success", "warning", "error", "info"],
+      defaultValue: "info"
+    }),
+    variant: createTextEnumProp({
+      label: "Variant",
+      description: "The variant of the alert style to use.",
+      options: ["subtle", "solid", "outline", "left-accent", "top-accent", "outline-light"],
+      defaultValue: "subtle"
+    })
+  }
+}, {
+  name: "Alert Icon",
+  tag: "Alert.Icon",
+  description: "The visual icon for the alert that changes based on the status prop.",
+  ...SHARED_SEED_DATA,
+  props: {
+    icon: createIconProp({
+      label: "Icon",
+      description: "The icon to display"
+    })
+  }
+}, {
+  name: "Progress",
+  tag: "Progress",
+  description: "Progress helps show the progress status for a time-consuming task that consists of several steps.",
+  ...SHARED_SEED_DATA,
+  props: {
+    value: createNumberProp({
+      label: "Value",
+      description: "The value of the progress bar",
+      defaultValue: 0,
+      min: 0,
+      max: 100
+    }),
+    min: createNumberProp({
+      label: "Min",
+      description: "The minimum value of the progress bar",
+      defaultValue: 0,
+      min: 0,
+      max: 100
+    }),
+    max: createNumberProp({
+      label: "Max",
+      description: "The maximum value of the progress bar",
+      defaultValue: 100,
+      min: 0,
+      max: 100
+    })
+  }
+}, {}];

package/lib/module/mappings/NativeBase/Layout.js

@@ -0,0 +1,107 @@
+import { COMPONENT_TYPES, StylesPanelSections, createTextEnumProp, createBoolProp } from "@draftbit/types";
+const NB_LAYOUT_PROPS = {
+  category: COMPONENT_TYPES.NBLayout,
+  packageName: "native-base",
+  doc_link: "https://www.npmjs.com/package/@expo/html-elements",
+  code_link: "https://github.com/expo/expo/tree/master/packages/html-elements",
+  stylesPanelSections: [StylesPanelSections.LayoutFlexItems, StylesPanelSections.LayoutSelectedItem, StylesPanelSections.LayoutContent, StylesPanelSections.Background, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Borders, StylesPanelSections.Effects],
+  allowChildren: true,
+  layout: {},
+  triggers: {}
+};
+export const SEED_DATA = [{
+  name: "Aspect Ratio",
+  tag: "AspectRatio",
+  description: "AspectRatio controls the size of the undefined dimension of a node or child component.",
+  ...NB_LAYOUT_PROPS,
+  props: {
+    ratio: createTextEnumProp({
+      label: "Ratio",
+      description: "The aspect ratio of the container",
+      options: ["1 / 1", "4 / 3", "3 / 2", "16 / 9", "2 / 1", "3 / 4", "2 / 3", "9 / 16", "1 / 2"],
+      defaultValue: "4 / 3"
+    })
+  }
+}, {
+  name: "Box",
+  tag: "Box",
+  description: "This is a generic component for low level layout needs. It is similar to a div in HTML",
+  ...NB_LAYOUT_PROPS
+}, {
+  name: "Center",
+  tag: "Center",
+  description: "Centers its child",
+  ...NB_LAYOUT_PROPS
+}, {
+  name: "Square",
+  tag: "Square",
+  description: "Centers its child inside a square",
+  ...NB_LAYOUT_PROPS
+}, {
+  name: "Circle",
+  tag: "Circle",
+  description: "Centers its child inside a circle",
+  ...NB_LAYOUT_PROPS
+}, {
+  name: "Column",
+  tag: "Column",
+  description: "Column aligns items vertically",
+  ...NB_LAYOUT_PROPS
+}, {
+  name: "Container",
+  tag: "Container",
+  description: "The Container restricts a content's width according to current breakpoint, while keeping the size fluid.",
+  ...NB_LAYOUT_PROPS
+}, {
+  name: "Flex",
+  tag: "Flex",
+  description: "A Box with Flexbox properties. ",
+  ...NB_LAYOUT_PROPS
+}, {
+  name: "Spacer",
+  tag: "Spacer",
+  description: "An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
+  ...NB_LAYOUT_PROPS
+}, {
+  name: "Row",
+  tag: "Row",
+  description: "Column aligns items horizontally",
+  ...NB_LAYOUT_PROPS,
+  props: {}
+}, {
+  name: "Stack",
+  tag: "Stack",
+  description: "Stack aligns items vertically or horizontally based on the direction prop.",
+  ...NB_LAYOUT_PROPS,
+  props: {
+    direction: createTextEnumProp({
+      label: "Direction",
+      description: "The direction of the Stack",
+      options: ["row", "column"],
+      defaultValue: "column"
+    }),
+    reversed: createBoolProp({
+      label: "Reversed",
+      description: "Determines whether to reverse the direction of items."
+    }),
+    isDisabled: createBoolProp({
+      label: "Disabled",
+      description: "If true, the Stack will be disabled."
+    }),
+    isInvalid: createBoolProp({
+      label: "Invalid",
+      description: "If true, the Stack will be invalid."
+    })
+  }
+}, {
+  name: "ZStack",
+  tag: "ZStack",
+  description: "ZStack aligns items to the z-axis.",
+  ...NB_LAYOUT_PROPS,
+  props: {
+    reversed: createBoolProp({
+      label: "Reversed",
+      description: "Determines whether to reverse the direction of items."
+    })
+  }
+}];