@btst/stack 1.9.1 → 1.10.0

package/dist/packages/ui/src/components/ui-builder/internal/form-fields/classname-control/config.cjs

@@ -0,0 +1,654 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const LucideIcons = require('lucide-react');
+const tailwindClasses = require('../../utils/tailwind-classes.cjs');
+const toggleGroup = require('./toggle-group.cjs');
+const icons = require('./icons.cjs');
+const helpers = require('./helpers.cjs');
+const themeAwareConfig = require('./theme-aware-config.cjs');
+
+const CONFIG = {
+  width: {
+    label: "Width",
+    possibleTypes: [
+      null,
+      ...helpers.filterClassnameArray(tailwindClasses.TAILWIND_AUTO_WIDTH_CLASSES, ["w-full", "w-max"]),
+      ...tailwindClasses.TAILWIND_FIXED_WIDTH_CLASSES,
+      ...tailwindClasses.TAILWIND_PERCENTAGE_WIDTH_CLASSES
+    ],
+    component: toggleGroup.ToggleGroup,
+    options: [
+      { value: "w-full", tooltip: "Fill (w-full)", icon: /* @__PURE__ */ jsxRuntime.jsx(icons.FillIcon, {}) },
+      { value: "w-max", tooltip: "Hug (w-max)", icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HugIcon, {}) },
+      {
+        value: "_w-fixed",
+        label: "Fixed",
+        tooltip: "Fixed (w-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.FixedIcon, {}),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_FIXED_WIDTH_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("w-", "")
+          }))
+        }
+      },
+      {
+        value: "_w-percentage",
+        label: "Percentage (w-*/*)",
+        tooltip: "Percentage",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Percent, { className: "!size-[14px]" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_PERCENTAGE_WIDTH_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("w-", "")
+          }))
+        }
+      }
+    ]
+  },
+  height: {
+    label: "Height",
+    possibleTypes: [
+      null,
+      ...helpers.filterClassnameArray(tailwindClasses.TAILWIND_AUTO_HEIGHT_CLASSES, ["h-full", "h-auto"]),
+      ...tailwindClasses.TAILWIND_FIXED_HEIGHT_CLASSES,
+      ...tailwindClasses.TAILWIND_PERCENTAGE_HEIGHT_CLASSES
+    ],
+    component: toggleGroup.ToggleGroup,
+    options: [
+      { value: "h-full", tooltip: "Fill (h-full)", icon: /* @__PURE__ */ jsxRuntime.jsx(icons.FillIcon, { className: "rotate-90" }) },
+      { value: "h-auto", tooltip: "Hug (h-auto)", icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HugIcon, { className: "rotate-90" }) },
+      {
+        value: "_h-fixed",
+        label: "Fixed",
+        tooltip: "Fixed (h-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.FixedIcon, { className: "rotate-90" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_FIXED_HEIGHT_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("h-", "")
+          }))
+        }
+      },
+      {
+        value: "_h-percentage",
+        label: "Percentage",
+        tooltip: "Percentage  (h-*/*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Percent, { className: "!size-[14px]" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_PERCENTAGE_HEIGHT_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("h-", "")
+          }))
+        }
+      }
+    ]
+  },
+  border: {
+    label: "Border",
+    possibleTypes: [
+      null,
+      ...tailwindClasses.SHADCN_TAILWIND_BORDER_COLOR_CLASSES,
+      ...tailwindClasses.TAILWIND_BORDER_WIDTH_CLASSES,
+      ...tailwindClasses.TAILWIND_BORDER_COLOR_CLASSES,
+      ...tailwindClasses.TAILWIND_CORNER_RADIUS_CLASSES
+    ],
+    component: toggleGroup.ToggleGroup,
+    multiple: true,
+    options: [
+      {
+        value: "_border-width",
+        label: "Width",
+        tooltip: "Border Width (border-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.BorderWidthIcon, {}),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_BORDER_WIDTH_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("border-", "")
+          }))
+        }
+      },
+      {
+        value: "_corner-radius",
+        label: "Radius",
+        tooltip: "Corner Radius (rounded-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.CornerRadiusIcon, {}),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_CORNER_RADIUS_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("rounded-", "")
+          }))
+        }
+      },
+      {
+        value: "_border-color",
+        label: "Color",
+        tooltip: "Border Color (border-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Palette, { className: "!size-[14px]" }),
+        dropdown: {
+          dropdownDisplay: "grid",
+          items: themeAwareConfig.THEME_AWARE_BORDER_COLOR_ITEMS
+        }
+      }
+    ]
+  },
+  background: {
+    label: "Fill & Opacity",
+    possibleTypes: [
+      null,
+      ...tailwindClasses.TAILWIND_BACKGROUND_COLOR_CLASSES,
+      ...tailwindClasses.SHADCN_TAILWIND_BACKGROUND_COLOR_CLASSES,
+      ...tailwindClasses.TAILWIND_OPACITY_CLASSES
+    ],
+    component: toggleGroup.ToggleGroup,
+    multiple: true,
+    options: [
+      {
+        value: "_bg-color",
+        label: "Color",
+        tooltip: "Background Color (bg-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Palette, { className: "!size-[14px]" }),
+        dropdown: {
+          dropdownDisplay: "grid",
+          items: themeAwareConfig.THEME_AWARE_BACKGROUND_COLOR_ITEMS
+        }
+      },
+      {
+        value: "_opacity",
+        label: "Opacity",
+        tooltip: "Opacity (opacity-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.OpacityIcon, {}),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_OPACITY_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("opacity-", "")
+          }))
+        }
+      }
+    ]
+  },
+  typography: {
+    label: "Typography",
+    possibleTypes: [
+      null,
+      ...tailwindClasses.TAILWIND_FONT_SIZE_CLASSES,
+      ...tailwindClasses.TAILWIND_FONT_WEIGHT_CLASSES,
+      ...tailwindClasses.TAILWIND_LINE_HEIGHT_CLASSES,
+      ...tailwindClasses.TAILWIND_LETTER_SPACING_CLASSES,
+      ...tailwindClasses.TAILWIND_TEXT_ALIGN_CLASSES,
+      ...tailwindClasses.SHADCN_TAILWIND_TEXT_COLOR_CLASSES,
+      ...tailwindClasses.TAILWIND_TEXT_COLOR_CLASSES
+    ],
+    component: toggleGroup.ToggleGroup,
+    multiple: true,
+    options: [
+      {
+        value: "_font-size",
+        label: "Size",
+        tooltip: "Font Size (text-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Heading, { className: "!size-[14px]" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_FONT_SIZE_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("text-", "")
+          }))
+        }
+      },
+      {
+        value: "_font-weight",
+        label: "Weight",
+        tooltip: "Font Weight (font-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Type, { className: "!size-[14px]" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_FONT_WEIGHT_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("font-", "")
+          }))
+        }
+      },
+      {
+        value: "_text-align",
+        label: "Align",
+        tooltip: "Text Align (text-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.UnfoldHorizontal, { className: "!size-[14px]" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_TEXT_ALIGN_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("text-", "")
+          }))
+        }
+      },
+      {
+        value: "_text-color",
+        label: "Color",
+        tooltip: "Text Color (text-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Palette, { className: "!size-[14px]" }),
+        dropdown: {
+          dropdownDisplay: "grid",
+          items: themeAwareConfig.THEME_AWARE_TEXT_COLOR_ITEMS
+        }
+      },
+      {
+        value: "_line-height",
+        label: "Line Height",
+        tooltip: "Line Height (leading-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.LineHeightIcon, {}),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_LINE_HEIGHT_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("leading-", "")
+          }))
+        }
+      },
+      {
+        value: "_letter-spacing",
+        label: "Letter Spacing",
+        tooltip: "Letter Spacing (tracking-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.LetterSpacingIcon, {}),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_LETTER_SPACING_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("tracking-", "")
+          }))
+        }
+      }
+    ]
+  },
+  padding: {
+    label: "Padding",
+    possibleTypes: [null, ...tailwindClasses.TAILWIND_PADDING_CLASSES],
+    component: toggleGroup.ToggleGroup,
+    options: [
+      {
+        value: "_p",
+        label: "All",
+        tooltip: "All Padding (p-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.PaddingIcon, {}),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_PADDING_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("p-", "")
+          }))
+        }
+      }
+    ]
+  },
+  directionalPadding: {
+    label: "X and Y Padding",
+    possibleTypes: [
+      null,
+      ...tailwindClasses.TAILWIND_HORIZONTAL_PADDING_CLASSES,
+      ...tailwindClasses.TAILWIND_VERTICAL_PADDING_CLASSES
+    ],
+    component: toggleGroup.ToggleGroup,
+    options: [
+      {
+        value: "_p-horizontal",
+        label: "Horizontal",
+        tooltip: "Horizontal Padding (px-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.PaddingAxisIcon, { axis: "x" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_HORIZONTAL_PADDING_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("px-", "")
+          }))
+        }
+      },
+      {
+        value: "_p-vertical",
+        label: "Vertical",
+        tooltip: "Vertical Padding (py-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.PaddingAxisIcon, { axis: "y" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_VERTICAL_PADDING_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("py-", "")
+          }))
+        }
+      }
+    ]
+  },
+  individualPadding: {
+    label: "Individual Padding",
+    possibleTypes: [
+      null,
+      ...tailwindClasses.TAILWIND_TOP_PADDING_CLASSES,
+      ...tailwindClasses.TAILWIND_RIGHT_PADDING_CLASSES,
+      ...tailwindClasses.TAILWIND_BOTTOM_PADDING_CLASSES,
+      ...tailwindClasses.TAILWIND_LEFT_PADDING_CLASSES
+    ],
+    component: toggleGroup.ToggleGroup,
+    options: [
+      {
+        value: "_pt",
+        label: "Top",
+        tooltip: "Top Padding (pt-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.PaddingSideIcon, { side: "top" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_TOP_PADDING_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("pt-", "")
+          }))
+        }
+      },
+      {
+        value: "_pr",
+        label: "Right",
+        tooltip: "Right Padding (pr-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.PaddingSideIcon, { side: "right" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_RIGHT_PADDING_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("pr-", "")
+          }))
+        }
+      },
+      {
+        value: "_pb",
+        label: "Bottom",
+        tooltip: "Bottom Padding (pb-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.PaddingSideIcon, { side: "bottom" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_BOTTOM_PADDING_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("pb-", "")
+          }))
+        }
+      },
+      {
+        value: "_pl",
+        label: "Left",
+        tooltip: "Left Padding (pl-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.PaddingSideIcon, { side: "left" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_LEFT_PADDING_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("pl-", "")
+          }))
+        }
+      }
+    ]
+  },
+  margin: {
+    label: "Margin",
+    possibleTypes: [null, ...tailwindClasses.TAILWIND_MARGIN_CLASSES],
+    component: toggleGroup.ToggleGroup,
+    options: [
+      {
+        value: "_m",
+        label: "All",
+        tooltip: "All Margin (m-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.PaddingIcon, {}),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_MARGIN_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("m-", "")
+          }))
+        }
+      }
+    ]
+  },
+  directionalMargin: {
+    label: "X and Y Margin",
+    possibleTypes: [
+      null,
+      ...tailwindClasses.TAILWIND_HORIZONTAL_MARGIN_CLASSES,
+      ...tailwindClasses.TAILWIND_VERTICAL_MARGIN_CLASSES
+    ],
+    component: toggleGroup.ToggleGroup,
+    options: [
+      {
+        value: "_m-horizontal",
+        label: "Horizontal",
+        tooltip: "Horizontal Margin (mx-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.PaddingAxisIcon, { axis: "x" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_HORIZONTAL_MARGIN_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("mx-", "")
+          }))
+        }
+      },
+      {
+        value: "_m-vertical",
+        label: "Vertical",
+        tooltip: "Vertical Margin (my-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.PaddingAxisIcon, { axis: "y" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_VERTICAL_MARGIN_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("my-", "")
+          }))
+        }
+      }
+    ]
+  },
+  individualMargin: {
+    label: "Individual Margin",
+    possibleTypes: [
+      null,
+      ...tailwindClasses.TAILWIND_TOP_MARGIN_CLASSES,
+      ...tailwindClasses.TAILWIND_RIGHT_MARGIN_CLASSES,
+      ...tailwindClasses.TAILWIND_BOTTOM_MARGIN_CLASSES,
+      ...tailwindClasses.TAILWIND_LEFT_MARGIN_CLASSES
+    ],
+    component: toggleGroup.ToggleGroup,
+    options: [
+      {
+        value: "_mt",
+        label: "Top",
+        tooltip: "Top Margin (mt-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.PaddingSideIcon, { side: "top" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_TOP_MARGIN_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("mt-", "")
+          }))
+        }
+      },
+      {
+        value: "_mr",
+        label: "Right",
+        tooltip: "Right Margin (mr-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.PaddingSideIcon, { side: "right" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_RIGHT_MARGIN_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("mr-", "")
+          }))
+        }
+      },
+      {
+        value: "_mb",
+        label: "Bottom",
+        tooltip: "Bottom Margin (mb-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.PaddingSideIcon, { side: "bottom" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_BOTTOM_MARGIN_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("mb-", "")
+          }))
+        }
+      },
+      {
+        value: "_ml",
+        label: "Left",
+        tooltip: "Left Margin (ml-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.PaddingSideIcon, { side: "left" }),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_LEFT_MARGIN_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("ml-", "")
+          }))
+        }
+      }
+    ]
+  },
+  boxShadow: {
+    label: "Box Shadow",
+    possibleTypes: [
+      null,
+      ...tailwindClasses.TAILWIND_BOX_SHADOW_CLASSES,
+      ...tailwindClasses.TAILWIND_BOX_SHADOW_COLOR_CLASSES
+    ],
+    component: toggleGroup.ToggleGroup,
+    multiple: true,
+    options: [
+      {
+        value: "_shadow",
+        label: "Shadow",
+        tooltip: "Box Shadow (shadow-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.ShadowIcon, {}),
+        dropdown: {
+          items: tailwindClasses.TAILWIND_BOX_SHADOW_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("shadow-", "")
+          }))
+        }
+      },
+      {
+        value: "_shadow-color",
+        label: "Color",
+        tooltip: "Box Shadow Color (shadow-*)",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Palette, { className: "!size-[14px]" }),
+        dropdown: {
+          dropdownDisplay: "grid",
+          items: themeAwareConfig.THEME_AWARE_SHADOW_COLOR_ITEMS
+        }
+      }
+    ]
+  },
+  display: {
+    label: "Layout",
+    possibleTypes: [
+      null,
+      ...helpers.filterClassnameArray(tailwindClasses.TAILWIND_DISPLAY_CLASSES, ["block", "inline", "flex"])
+    ],
+    component: toggleGroup.ToggleGroup,
+    options: [
+      { value: "block", tooltip: "Block", label: "Block" },
+      { value: "inline", tooltip: "Inline", label: "Inline" },
+      { value: "flex", tooltip: "Flex Box", label: "Flex Box" }
+    ]
+  },
+  flexSettings: {
+    label: "Flex Settings",
+    possibleTypes: [
+      null,
+      ...tailwindClasses.TAILWIND_FLEX_DIRECTION_CLASSES,
+      ...tailwindClasses.TAILWIND_ALIGN_ITEMS_CLASSES,
+      ...tailwindClasses.TAILWIND_JUSTIFY_CONTENT_CLASSES,
+      ...tailwindClasses.TAILWIND_GAP_CLASSES,
+      ...helpers.filterClassnameArray(tailwindClasses.TAILWIND_FLEX_WRAP_CLASSES, ["flex-wrap", "flex-nowrap", "flex-wrap-reverse"])
+    ],
+    component: toggleGroup.ToggleGroup,
+    multiple: true,
+    options: [
+      {
+        value: "_flex-direction",
+        label: "Direction",
+        tooltip: "Flex Direction",
+        dropdown: {
+          items: tailwindClasses.TAILWIND_FLEX_DIRECTION_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("flex-", "")
+          }))
+        }
+      },
+      {
+        value: "_align",
+        label: "Align",
+        tooltip: "Align Items",
+        dropdown: {
+          items: tailwindClasses.TAILWIND_ALIGN_ITEMS_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("items-", "")
+          }))
+        }
+      },
+      {
+        value: "_justify",
+        label: "Justify",
+        tooltip: "Justify Content",
+        dropdown: {
+          items: tailwindClasses.TAILWIND_JUSTIFY_CONTENT_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("justify-", "")
+          }))
+        }
+      },
+      {
+        value: "_gap",
+        label: "Gap",
+        tooltip: "Gap",
+        dropdown: {
+          items: tailwindClasses.TAILWIND_GAP_CLASSES.map((cls) => ({
+            value: cls,
+            label: cls.replace("gap-", "")
+          }))
+        }
+      },
+      {
+        value: "_wrap",
+        label: "Wrap",
+        tooltip: "Wrap",
+        dropdown: {
+          items: [
+            { value: "flex-wrap", label: "wrap" },
+            { value: "flex-nowrap", label: "nowrap" },
+            { value: "flex-wrap-reverse", label: "wrap-reverse" }
+          ]
+        }
+      }
+    ]
+  }
+};
+const LAYOUT_GROUPS = [
+  {
+    label: "Padding",
+    keys: ["padding", "directionalPadding", "individualPadding"],
+    clearState: () => [
+      ...tailwindClasses.TAILWIND_PADDING_CLASSES,
+      ...tailwindClasses.TAILWIND_HORIZONTAL_PADDING_CLASSES,
+      ...tailwindClasses.TAILWIND_VERTICAL_PADDING_CLASSES,
+      ...tailwindClasses.TAILWIND_TOP_PADDING_CLASSES,
+      ...tailwindClasses.TAILWIND_RIGHT_PADDING_CLASSES,
+      ...tailwindClasses.TAILWIND_BOTTOM_PADDING_CLASSES,
+      ...tailwindClasses.TAILWIND_LEFT_PADDING_CLASSES
+    ]
+  },
+  {
+    label: "Margin",
+    keys: ["margin", "directionalMargin", "individualMargin"],
+    clearState: () => [
+      ...tailwindClasses.TAILWIND_MARGIN_CLASSES,
+      ...tailwindClasses.TAILWIND_HORIZONTAL_MARGIN_CLASSES,
+      ...tailwindClasses.TAILWIND_VERTICAL_MARGIN_CLASSES,
+      ...tailwindClasses.TAILWIND_TOP_MARGIN_CLASSES,
+      ...tailwindClasses.TAILWIND_RIGHT_MARGIN_CLASSES,
+      ...tailwindClasses.TAILWIND_BOTTOM_MARGIN_CLASSES,
+      ...tailwindClasses.TAILWIND_LEFT_MARGIN_CLASSES
+    ]
+  }
+];
+const LAYOUT_ORDER = [
+  { type: "item", key: "width" },
+  { type: "item", key: "height" },
+  { type: "group", label: "Margin", className: "w-fit mr-2" },
+  { type: "group", label: "Padding", className: "w-fit" },
+  { type: "item", key: "display" },
+  {
+    type: "item",
+    key: "flexSettings",
+    isVisible: (state) => state.display === "flex"
+  },
+  { type: "item", key: "typography" },
+  { type: "item", key: "background" },
+  { type: "item", key: "border", className: "w-fit mr-2" },
+  { type: "item", key: "boxShadow", className: "w-fit" }
+];
+
+exports.CONFIG = CONFIG;
+exports.LAYOUT_GROUPS = LAYOUT_GROUPS;
+exports.LAYOUT_ORDER = LAYOUT_ORDER;