@pandacss/preset-base 0.32.1 → 0.34.0

package/dist/index.js

@@ -133,23 +133,28 @@ var createColorMixTransform = (prop) => (value, args) => {
 var background = {
   backgroundPosition: {
     shorthand: "bgPosition",
-    className: "bg"
+    className: "bg",
+    group: "Background"
   },
   backgroundPositionX: {
     shorthand: "bgPositionX",
-    className: "bg-x"
+    className: "bg-x",
+    group: "Background"
   },
   backgroundPositionY: {
     shorthand: "bgPositionY",
-    className: "bg-y"
+    className: "bg-y",
+    group: "Background"
   },
   backgroundAttachment: {
     shorthand: "bgAttachment",
-    className: "bg"
+    className: "bg",
+    group: "Background"
   },
   backgroundClip: {
     shorthand: "bgClip",
     className: "bg-clip",
+    group: "Background",
     transform(value) {
       return {
         backgroundClip: value,
@@ -161,38 +166,46 @@ var background = {
     shorthand: "bg",
     className: "bg",
     values: "colors",
+    group: "Background",
     transform: createColorMixTransform("background")
   },
   backgroundColor: {
     shorthand: "bgColor",
     className: "bg",
     values: "colors",
+    group: "Background",
     transform: createColorMixTransform("backgroundColor")
   },
   backgroundOrigin: {
     shorthand: "bgOrigin",
-    className: "bg-origin"
+    className: "bg-origin",
+    group: "Background"
   },
   backgroundImage: {
     shorthand: "bgImage",
     className: "bg-img",
-    values: "assets"
+    values: "assets",
+    group: "Background"
   },
   backgroundRepeat: {
     shorthand: "bgRepeat",
-    className: "bg-repeat"
+    className: "bg-repeat",
+    group: "Background"
   },
   backgroundBlendMode: {
     shorthand: "bgBlendMode",
-    className: "bg-blend"
+    className: "bg-blend",
+    group: "Background"
   },
   backgroundSize: {
     shorthand: "bgSize",
-    className: "bg"
+    className: "bg",
+    group: "Background"
   },
   backgroundGradient: {
     shorthand: "bgGradient",
     className: "bg-gradient",
+    group: "Background",
     values(theme) {
       return {
         ...theme("gradients"),
@@ -216,6 +229,7 @@ var background = {
   },
   textGradient: {
     className: "text-gradient",
+    group: "Background",
     values(theme) {
       return {
         ...theme("gradients"),
@@ -242,16 +256,19 @@ var background = {
   gradientFrom: {
     className: "from",
     values: "colors",
+    group: "Background",
     transform: createColorMixTransform("--gradient-from")
   },
   gradientTo: {
     className: "to",
     values: "colors",
+    group: "Background",
     transform: createColorMixTransform("--gradient-to")
   },
   gradientVia: {
     className: "via",
     values: "colors",
+    group: "Background",
     transform(value, args) {
       const transformed = gradientVia(value, args);
       return {
@@ -268,33 +285,39 @@ var border = {
   borderRadius: {
     className: "rounded",
     shorthand: "rounded",
-    values: "radii"
+    values: "radii",
+    group: "Border Radius"
   },
   borderTopLeftRadius: {
     className: "rounded-tl",
     shorthand: "roundedTopLeft",
-    values: "radii"
+    values: "radii",
+    group: "Border Radius"
   },
   borderTopRightRadius: {
     className: "rounded-tr",
     shorthand: "roundedTopRight",
-    values: "radii"
+    values: "radii",
+    group: "Border Radius"
   },
   borderBottomRightRadius: {
     className: "rounded-br",
     shorthand: "roundedBottomRight",
-    values: "radii"
+    values: "radii",
+    group: "Border Radius"
   },
   borderBottomLeftRadius: {
     className: "rounded-bl",
     shorthand: "roundedBottomLeft",
-    values: "radii"
+    values: "radii",
+    group: "Border Radius"
   },
   borderTopRadius: {
     className: "rounded-t",
     shorthand: "roundedTop",
     property: "borderRadius",
     values: "radii",
+    group: "Border Radius",
     transform(value) {
       return {
         borderTopLeftRadius: value,
@@ -307,6 +330,7 @@ var border = {
     shorthand: "roundedRight",
     property: "borderRadius",
     values: "radii",
+    group: "Border Radius",
     transform(value) {
       return {
         borderTopRightRadius: value,
@@ -319,6 +343,7 @@ var border = {
     shorthand: "roundedBottom",
     property: "borderRadius",
     values: "radii",
+    group: "Border Radius",
     transform(value) {
       return {
         borderBottomLeftRadius: value,
@@ -331,6 +356,7 @@ var border = {
     shorthand: "roundedLeft",
     values: "radii",
     property: "borderRadius",
+    group: "Border Radius",
     transform(value) {
       return {
         borderTopLeftRadius: value,
@@ -341,18 +367,21 @@ var border = {
   borderStartStartRadius: {
     className: "rounded-ss",
     shorthand: "roundedStartStart",
-    values: "radii"
+    values: "radii",
+    group: "Border Radius"
   },
   borderStartEndRadius: {
     className: "rounded-se",
     shorthand: "roundedStartEnd",
-    values: "radii"
+    values: "radii",
+    group: "Border Radius"
   },
   borderStartRadius: {
     className: "rounded-s",
     values: "radii",
     property: "borderRadius",
     shorthand: "roundedStart",
+    group: "Border Radius",
     transform(value) {
       return {
         borderStartStartRadius: value,
@@ -363,18 +392,21 @@ var border = {
   borderEndStartRadius: {
     className: "rounded-es",
     shorthand: "roundedEndStart",
-    values: "radii"
+    values: "radii",
+    group: "Border Radius"
   },
   borderEndEndRadius: {
     className: "rounded-ee",
     shorthand: "roundedEndEnd",
-    values: "radii"
+    values: "radii",
+    group: "Border Radius"
   },
   borderEndRadius: {
     className: "rounded-e",
     shorthand: "roundedEnd",
     property: "borderRadius",
     values: "radii",
+    group: "Border Radius",
     transform(value) {
       return {
         borderStartEndRadius: value,
@@ -384,149 +416,180 @@ var border = {
   },
   border: {
     className: "border",
-    values: "borders"
+    values: "borders",
+    group: "Border"
   },
   borderWidth: {
     className: "border-w",
-    values: "borderWidths"
+    values: "borderWidths",
+    group: "Border Radius"
   },
   borderTopWidth: {
     className: "border-tw",
-    values: "borderWidths"
+    values: "borderWidths",
+    group: "Border"
   },
   borderLeftWidth: {
     className: "border-lw",
-    values: "borderWidths"
+    values: "borderWidths",
+    group: "Border"
   },
   borderRightWidth: {
     className: "border-rw",
-    values: "borderWidths"
+    values: "borderWidths",
+    group: "Border"
   },
   borderBottomWidth: {
     className: "border-bw",
-    values: "borderWidths"
+    values: "borderWidths",
+    group: "Border"
   },
   borderColor: {
     className: "border",
     values: "colors",
+    group: "Border",
     transform: createColorMixTransform("borderColor")
   },
   borderInline: {
     className: "border-x",
     values: "borders",
+    group: "Border",
     shorthand: "borderX"
   },
   borderInlineWidth: {
     className: "border-x",
     values: "borderWidths",
+    group: "Border",
     shorthand: "borderXWidth"
   },
   borderInlineColor: {
     className: "border-x",
     values: "colors",
+    group: "Border",
     shorthand: "borderXColor",
     transform: createColorMixTransform("borderInlineColor")
   },
   borderBlock: {
     className: "border-y",
     values: "borders",
+    group: "Border",
     shorthand: "borderY"
   },
   borderBlockWidth: {
     className: "border-y",
     values: "borderWidths",
+    group: "Border",
     shorthand: "borderYWidth"
   },
   borderBlockColor: {
     className: "border-y",
     values: "colors",
+    group: "Border",
     shorthand: "borderYColor",
     transform: createColorMixTransform("borderBlockColor")
   },
   borderLeft: {
     className: "border-l",
-    values: "borders"
+    values: "borders",
+    group: "Border"
   },
   borderLeftColor: {
     className: "border-l",
     values: "colors",
+    group: "Border",
     transform: createColorMixTransform("borderLeftColor")
   },
   borderInlineStart: {
     className: "border-s",
     values: "borders",
+    group: "Border",
     shorthand: "borderStart"
   },
   borderInlineStartWidth: {
     className: "border-s",
     values: "borderWidths",
+    group: "Border",
     shorthand: "borderStartWidth"
   },
   borderInlineStartColor: {
     className: "border-s",
     values: "colors",
+    group: "Border",
     shorthand: "borderStartColor",
     transform: createColorMixTransform("borderInlineStartColor")
   },
   borderRight: {
     className: "border-r",
-    values: "borders"
+    values: "borders",
+    group: "Border"
   },
   borderRightColor: {
     className: "border-r",
     values: "colors",
+    group: "Border",
     transform: createColorMixTransform("borderRightColor")
   },
   borderInlineEnd: {
     className: "border-e",
     values: "borders",
+    group: "Border",
     shorthand: "borderEnd"
   },
   borderInlineEndWidth: {
     className: "border-e",
     values: "borderWidths",
+    group: "Border",
     shorthand: "borderEndWidth"
   },
   borderInlineEndColor: {
     className: "border-e",
     values: "colors",
+    group: "Border",
     shorthand: "borderEndColor",
     transform: createColorMixTransform("borderInlineEndColor")
   },
   borderTop: {
     className: "border-t",
-    values: "borders"
+    values: "borders",
+    group: "Border"
   },
   borderTopColor: {
     className: "border-t",
     values: "colors",
+    group: "Border",
     transform: createColorMixTransform("borderTopColor")
   },
   borderBottom: {
     className: "border-b",
-    values: "borders"
+    values: "borders",
+    group: "Border"
   },
   borderBottomColor: {
     className: "border-b",
     values: "colors",
+    group: "Border",
     transform: createColorMixTransform("borderBottomColor")
   },
   borderBlockEnd: {
     className: "border-be",
-    values: "borders"
+    values: "borders",
+    group: "Border"
   },
   borderBlockEndColor: {
     className: "border-be",
     values: "colors",
+    group: "Border",
     transform: createColorMixTransform("borderBlockEndColor")
   },
   borderBlockStart: {
     className: "border-bs",
-    values: "borders"
+    values: "borders",
+    group: "Border"
   },
   borderBlockStartColor: {
     className: "border-bs",
     values: "colors",
+    group: "Border",
     transform: createColorMixTransform("borderBlockStartColor")
   }
 };
@@ -534,26 +597,31 @@ var border = {
 // src/utilities/container.ts
 var container = {
   container: {
-    className: "cq"
+    className: "cq",
+    group: "Container"
   },
   containerName: {
     className: "cq-name",
     property: "containerName",
-    values: "containerNames"
+    values: "containerNames",
+    group: "Container"
   },
   containerType: {
-    className: "cq-type"
+    className: "cq-type",
+    group: "Container"
   }
 };
 
 // src/utilities/display.ts
 var display = {
   display: {
-    className: "d"
+    className: "d",
+    group: "Display"
   },
   hideFrom: {
     className: "hide",
     values: "breakpoints",
+    group: "Display",
     transform(value, { raw, token }) {
       const bp = token.raw(`breakpoints.${raw}`);
       const media = bp ? `@breakpoint ${raw}` : `@media screen and (min-width: ${value})`;
@@ -567,6 +635,7 @@ var display = {
   hideBelow: {
     className: "show",
     values: "breakpoints",
+    group: "Display",
     transform(value, { raw, token }) {
       const bp = token.raw(`breakpoints.${raw}`);
       const media = bp ? `@breakpoint ${raw}Down` : `@media screen and (max-width: ${value})`;
@@ -584,6 +653,7 @@ var divide = {
   divideX: {
     className: "divide-x",
     values: { type: "string" },
+    group: "Border",
     transform(value) {
       return {
         "& > :not([hidden]) ~ :not([hidden])": {
@@ -596,6 +666,7 @@ var divide = {
   divideY: {
     className: "divide-y",
     values: { type: "string" },
+    group: "Border",
     transform(value) {
       return {
         "& > :not([hidden]) ~ :not([hidden])": {
@@ -608,6 +679,7 @@ var divide = {
   divideColor: {
     className: "divide",
     values: "colors",
+    group: "Border",
     transform(value, args) {
       return {
         "& > :not([hidden]) ~ :not([hidden])": divideColor(value, args)
@@ -617,6 +689,7 @@ var divide = {
   divideStyle: {
     className: "divide",
     property: "borderStyle",
+    group: "Border",
     transform(value) {
       return {
         "& > :not([hidden]) ~ :not([hidden])": {
@@ -631,24 +704,29 @@ var divideColor = createColorMixTransform("borderColor");
 // src/utilities/effects.ts
 var effects = {
   opacity: {
-    values: "opacity"
+    values: "opacity",
+    group: "Background"
   },
   boxShadow: {
     shorthand: "shadow",
     className: "shadow",
-    values: "shadows"
+    values: "shadows",
+    group: "Shadow"
   },
   boxShadowColor: {
     shorthand: "shadowColor",
     className: "shadow",
     values: "colors",
-    transform: createColorMixTransform("--shadow-color")
+    transform: createColorMixTransform("--shadow-color"),
+    group: "Color"
   },
   mixBlendMode: {
-    className: "mix-blend"
+    className: "mix-blend",
+    group: "Effect"
   },
   filter: {
     className: "filter",
+    group: "Effect",
     values: {
       auto: [
         "var(--blur)",
@@ -665,6 +743,7 @@ var effects = {
   },
   brightness: {
     className: "brightness",
+    group: "Effect",
     transform(value) {
       return {
         "--brightness": `brightness(${value})`
@@ -673,6 +752,7 @@ var effects = {
   },
   contrast: {
     className: "contrast",
+    group: "Effect",
     transform(value) {
       return {
         "--contrast": `contrast(${value})`
@@ -681,6 +761,7 @@ var effects = {
   },
   grayscale: {
     className: "grayscale",
+    group: "Effect",
     transform(value) {
       return {
         "--grayscale": `grayscale(${value})`
@@ -689,6 +770,7 @@ var effects = {
   },
   hueRotate: {
     className: "hue-rotate",
+    group: "Effect",
     transform(value) {
       return {
         "--hue-rotate": `hue-rotate(${value})`
@@ -697,6 +779,7 @@ var effects = {
   },
   invert: {
     className: "invert",
+    group: "Effect",
     transform(value) {
       return {
         "--invert": `invert(${value})`
@@ -705,6 +788,7 @@ var effects = {
   },
   saturate: {
     className: "saturate",
+    group: "Effect",
     transform(value) {
       return {
         "--saturate": `saturate(${value})`
@@ -713,6 +797,7 @@ var effects = {
   },
   sepia: {
     className: "sepia",
+    group: "Effect",
     transform(value) {
       return {
         "--sepia": `sepia(${value})`
@@ -721,6 +806,7 @@ var effects = {
   },
   dropShadow: {
     className: "drop-shadow",
+    group: "Effect",
     values: "dropShadows",
     transform(value) {
       return {
@@ -730,6 +816,7 @@ var effects = {
   },
   blur: {
     className: "blur",
+    group: "Effect",
     values: "blurs",
     transform(value) {
       return {
@@ -739,6 +826,7 @@ var effects = {
   },
   backdropFilter: {
     className: "backdrop",
+    group: "Effect",
     values: {
       auto: [
         "var(--backdrop-blur)",
@@ -760,6 +848,7 @@ var effects = {
   },
   backdropBlur: {
     className: "backdrop-blur",
+    group: "Effect",
     values: "blurs",
     transform(value) {
       return {
@@ -769,6 +858,7 @@ var effects = {
   },
   backdropBrightness: {
     className: "backdrop-brightness",
+    group: "Effect",
     transform(value) {
       return {
         "--backdrop-brightness": `brightness(${value})`
@@ -777,6 +867,7 @@ var effects = {
   },
   backdropContrast: {
     className: "backdrop-contrast",
+    group: "Effect",
     transform(value) {
       return {
         "--backdrop-contrast": `contrast(${value})`
@@ -785,6 +876,7 @@ var effects = {
   },
   backdropGrayscale: {
     className: "backdrop-grayscale",
+    group: "Effect",
     transform(value) {
       return {
         "--backdrop-grayscale": `grayscale(${value})`
@@ -793,6 +885,7 @@ var effects = {
   },
   backdropHueRotate: {
     className: "backdrop-hue-rotate",
+    group: "Effect",
     transform(value) {
       return {
         "--backdrop-hue-rotate": `hue-rotate(${value})`
@@ -801,6 +894,7 @@ var effects = {
   },
   backdropInvert: {
     className: "backdrop-invert",
+    group: "Effect",
     transform(value) {
       return {
         "--backdrop-invert": `invert(${value})`
@@ -809,6 +903,7 @@ var effects = {
   },
   backdropOpacity: {
     className: "backdrop-opacity",
+    group: "Effect",
     transform(value) {
       return {
         "--backdrop-opacity": value
@@ -817,6 +912,7 @@ var effects = {
   },
   backdropSaturate: {
     className: "backdrop-saturate",
+    group: "Effect",
     transform(value) {
       return {
         "--backdrop-saturate": `saturate(${value})`
@@ -825,6 +921,7 @@ var effects = {
   },
   backdropSepia: {
     className: "backdrop-sepia",
+    group: "Effect",
     transform(value) {
       return {
         "--backdrop-sepia": `sepia(${value})`
@@ -837,6 +934,7 @@ var effects = {
 var flexGrid = {
   flexBasis: {
     className: "basis",
+    group: "Flex Layout",
     values(theme) {
       return {
         ...theme("spacing"),
@@ -872,6 +970,7 @@ var flexGrid = {
   },
   flex: {
     className: "flex",
+    group: "Flex Layout",
     values: {
       "1": "1 1 0%",
       auto: "1 1 auto",
@@ -881,16 +980,20 @@ var flexGrid = {
   },
   flexDirection: {
     className: "flex",
+    group: "Flex Layout",
     shorthand: "flexDir"
   },
   flexGrow: {
-    className: "grow"
+    className: "grow",
+    group: "Flex Layout"
   },
   flexShrink: {
-    className: "shrink"
+    className: "shrink",
+    group: "Flex Layout"
   },
   gridTemplateColumns: {
     className: "grid-cols",
+    group: "Grid Layout",
     values: {
       "1": "repeat(1, minmax(0, 1fr))",
       "2": "repeat(2, minmax(0, 1fr))",
@@ -908,6 +1011,7 @@ var flexGrid = {
   },
   gridTemplateRows: {
     className: "grid-rows",
+    group: "Grid Layout",
     values: {
       "1": "repeat(1, minmax(0, 1fr))",
       "2": "repeat(2, minmax(0, 1fr))",
@@ -925,6 +1029,7 @@ var flexGrid = {
   },
   gridColumn: {
     className: "col-span",
+    group: "Grid Layout",
     values: {
       full: "1 / -1",
       "1": "span 1 / span 1",
@@ -943,6 +1048,7 @@ var flexGrid = {
   },
   gridRow: {
     className: "row-span",
+    group: "Grid Layout",
     values: {
       full: "1 / -1",
       "1": "span 1 / span 1",
@@ -960,16 +1066,20 @@ var flexGrid = {
     }
   },
   gridColumnStart: {
-    className: "col-start"
+    className: "col-start",
+    group: "Grid Layout"
   },
   gridColumnEnd: {
-    className: "col-end"
+    className: "col-end",
+    group: "Grid Layout"
   },
   gridAutoFlow: {
-    className: "grid-flow"
+    className: "grid-flow",
+    group: "Grid Layout"
   },
   gridAutoColumns: {
     className: "auto-cols",
+    group: "Grid Layout",
     values: {
       min: "min-content",
       max: "max-content",
@@ -978,6 +1088,7 @@ var flexGrid = {
   },
   gridAutoRows: {
     className: "auto-rows",
+    group: "Grid Layout",
     values: {
       min: "min-content",
       max: "max-content",
@@ -986,39 +1097,49 @@ var flexGrid = {
   },
   gap: {
     className: "gap",
+    group: "Flex Layout",
     values: "spacing"
   },
   gridGap: {
     className: "gap",
+    group: "Grid Layout",
     values: "spacing"
   },
   gridRowGap: {
     className: "gap-x",
+    group: "Grid Layout",
     values: "spacing"
   },
   gridColumnGap: {
     className: "gap-y",
+    group: "Grid Layout",
     values: "spacing"
   },
   rowGap: {
     className: "gap-x",
+    group: "Grid Layout",
     values: "spacing"
   },
   columnGap: {
     className: "gap-y",
+    group: "Grid Layout",
     values: "spacing"
   },
   justifyContent: {
-    className: "justify"
+    className: "justify",
+    group: "Flex Layout"
   },
   alignContent: {
-    className: "content"
+    className: "content",
+    group: "Flex Layout"
   },
   alignItems: {
-    className: "items"
+    className: "items",
+    group: "Flex Layout"
   },
   alignSelf: {
-    className: "self"
+    className: "self",
+    group: "Flex Layout"
   }
 };
 
@@ -1050,6 +1171,7 @@ var helpers = {
   srOnly: {
     className: "sr",
     values: { type: "boolean" },
+    group: "Other",
     transform(value) {
       return srMapping[value] || {};
     }
@@ -1057,6 +1179,7 @@ var helpers = {
   debug: {
     className: "debug",
     values: { type: "boolean" },
+    group: "Other",
     transform(value) {
       if (!value)
         return {};
@@ -1075,19 +1198,23 @@ var interactivity = {
   accentColor: {
     className: "accent",
     values: "colors",
-    transform: createColorMixTransform("accentColor")
+    transform: createColorMixTransform("accentColor"),
+    group: "Color"
   },
   caretColor: {
     className: "caret",
     values: "colors",
+    group: "Color",
     transform: createColorMixTransform("caretColor")
   },
   scrollBehavior: {
-    className: "scroll"
+    className: "scroll",
+    group: "Scroll"
   },
   scrollbar: {
     className: "scrollbar",
     values: ["visible", "hidden"],
+    group: "Scroll",
     transform(value) {
       if (value === "visible") {
         return {
@@ -1111,140 +1238,129 @@ var interactivity = {
   },
   scrollMargin: {
     className: "scroll-m",
-    values: "spacing"
-  },
-  scrollMarginX: {
-    className: "scroll-mx",
-    values: "spacing",
-    property: "scrollMarginInline",
-    transform(value) {
-      return {
-        scrollMarginInline: value
-      };
-    }
-  },
-  scrollMarginY: {
-    className: "scroll-my",
     values: "spacing",
-    property: "scrollMarginBlock",
-    transform(value) {
-      return {
-        scrollMarginBlock: value
-      };
-    }
+    group: "Scroll"
   },
   scrollMarginLeft: {
     className: "scroll-ml",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollMarginRight: {
     className: "scroll-mr",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollMarginTop: {
     className: "scroll-mt",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollMarginBottom: {
     className: "scroll-mb",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollMarginBlock: {
     className: "scroll-my",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll",
+    shorthand: ["scrollMarginY"]
   },
   scrollMarginBlockEnd: {
     className: "scroll-mb",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollMarginBlockStart: {
     className: "scroll-mt",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollMarginInline: {
     className: "scroll-mx",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll",
+    shorthand: ["scrollMarginX"]
   },
   scrollMarginInlineEnd: {
     className: "scroll-me",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollMarginInlineStart: {
     className: "scroll-ms",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollPadding: {
     className: "scroll-p",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollPaddingBlock: {
     className: "scroll-pb",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll",
+    shorthand: ["scrollPaddingY"]
   },
   scrollPaddingBlockStart: {
     className: "scroll-pt",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollPaddingBlockEnd: {
     className: "scroll-pb",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollPaddingInline: {
     className: "scroll-px",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll",
+    shorthand: ["scrollPaddingX"]
   },
   scrollPaddingInlineEnd: {
     className: "scroll-pe",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollPaddingInlineStart: {
     className: "scroll-ps",
-    values: "spacing"
-  },
-  scrollPaddingX: {
-    className: "scroll-px",
     values: "spacing",
-    property: "scrollPaddingInline",
-    transform(value) {
-      return {
-        scrollPaddingInline: value
-      };
-    }
-  },
-  scrollPaddingY: {
-    className: "scroll-py",
-    values: "spacing",
-    property: "scrollPaddingBlock",
-    transform(value) {
-      return {
-        scrollPaddingBlock: value
-      };
-    }
+    group: "Scroll"
   },
   scrollPaddingLeft: {
     className: "scroll-pl",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollPaddingRight: {
     className: "scroll-pr",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollPaddingTop: {
     className: "scroll-pt",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollPaddingBottom: {
     className: "scroll-pb",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollSnapAlign: {
-    className: "snap"
+    className: "snap",
+    group: "Scroll"
   },
   scrollSnapStop: {
-    className: "snap"
+    className: "snap",
+    group: "Scroll"
   },
   scrollSnapType: {
     className: "snap",
+    group: "Scroll",
     values: {
       none: "none",
       x: "x var(--scroll-snap-strictness)",
@@ -1255,6 +1371,7 @@ var interactivity = {
   scrollSnapStrictness: {
     className: "strictness",
     values: ["mandatory", "proximity"],
+    group: "Scroll",
     transform(value) {
       return {
         "--scroll-snap-strictness": value
@@ -1263,29 +1380,36 @@ var interactivity = {
   },
   scrollSnapMargin: {
     className: "snap-m",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollSnapMarginTop: {
     className: "snap-mt",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollSnapMarginBottom: {
     className: "snap-mb",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollSnapMarginLeft: {
     className: "snap-ml",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   scrollSnapMarginRight: {
     className: "snap-mr",
-    values: "spacing"
+    values: "spacing",
+    group: "Scroll"
   },
   touchAction: {
-    className: "touch"
+    className: "touch",
+    group: "Interactivity"
   },
   userSelect: {
     className: "select",
+    group: "Interactivity",
     transform(value) {
       return {
         WebkitUserSelect: value,
@@ -1299,10 +1423,12 @@ var interactivity = {
 var layout = {
   aspectRatio: {
     className: "aspect",
-    values: "aspectRatios"
+    values: "aspectRatios",
+    group: "Layout"
   },
   boxDecorationBreak: {
     className: "decoration",
+    group: "Layout",
     transform(value) {
       return {
         boxDecorationBreak: value,
@@ -1312,48 +1438,63 @@ var layout = {
   },
   zIndex: {
     className: "z",
-    values: "zIndex"
+    values: "zIndex",
+    group: "Visibility"
   },
   boxSizing: {
-    className: "box"
+    className: "box",
+    group: "System"
   },
   objectPosition: {
-    className: "object"
+    className: "object",
+    group: "Layout"
   },
   objectFit: {
-    className: "object"
+    className: "object",
+    group: "Layout"
   },
   overscrollBehavior: {
-    className: "overscroll"
+    className: "overscroll",
+    group: "Scroll"
   },
   overscrollBehaviorX: {
-    className: "overscroll-x"
+    className: "overscroll-x",
+    group: "Scroll"
   },
   overscrollBehaviorY: {
-    className: "overscroll-y"
+    className: "overscroll-y",
+    group: "Scroll"
   },
   position: {
     className: "pos",
-    shorthand: "pos"
+    shorthand: "pos",
+    group: "Position"
   },
   top: {
     className: "top",
-    values: "spacing"
+    values: "spacing",
+    group: "Position"
   },
   left: {
     className: "left",
-    values: "spacing"
+    values: "spacing",
+    group: "Position"
   },
   insetInline: {
     className: "inset-x",
-    values: "spacing"
+    values: "spacing",
+    group: "Position",
+    shorthand: ["insetX"]
   },
   insetBlock: {
     className: "inset-y",
-    values: "spacing"
+    values: "spacing",
+    group: "Position",
+    shorthand: ["insetY"]
   },
   inset: {
     className: "inset",
+    group: "Position",
     values: (theme) => ({
       auto: "auto",
       ...theme("spacing")
@@ -1361,53 +1502,40 @@ var layout = {
   },
   insetBlockEnd: {
     className: "inset-b",
-    values: "spacing"
+    values: "spacing",
+    group: "Position"
   },
   insetBlockStart: {
     className: "inset-t",
-    values: "spacing"
+    values: "spacing",
+    group: "Position"
   },
   insetInlineEnd: {
     className: "end",
     values: "spacing",
+    group: "Position",
     shorthand: ["insetEnd", "end"]
   },
   insetInlineStart: {
     className: "start",
     values: "spacing",
+    group: "Position",
     shorthand: ["insetStart", "start"]
   },
   right: {
     className: "right",
-    values: "spacing"
+    values: "spacing",
+    group: "Position"
   },
   bottom: {
     className: "bottom",
-    values: "spacing"
-  },
-  insetX: {
-    className: "inset-x",
     values: "spacing",
-    property: "insetInline",
-    transform(value) {
-      return {
-        insetInline: value
-      };
-    }
-  },
-  insetY: {
-    className: "inset-y",
-    values: "spacing",
-    property: "insetBlock",
-    transform(value) {
-      return {
-        insetBlock: value
-      };
-    }
+    group: "Position"
   },
   float: {
     className: "float",
     values: ["left", "right", "start", "end"],
+    group: "Position",
     transform(value) {
       if (value === "start") {
         return {
@@ -1431,20 +1559,24 @@ var layout = {
     }
   },
   visibility: {
-    className: "vis"
+    className: "vis",
+    group: "Visibility"
   }
 };
 
 // src/utilities/list.ts
 var list = {
   listStyleType: {
-    className: "list"
+    className: "list",
+    group: "List"
   },
   listStylePosition: {
-    className: "list"
+    className: "list",
+    group: "List"
   },
   listStyleImage: {
     className: "list-img",
+    group: "List",
     values: "assets"
   }
 };
@@ -1454,11 +1586,13 @@ var outline = {
   outlineWidth: {
     className: "ring",
     shorthand: "ringWidth",
-    values: "borderWidths"
+    values: "borderWidths",
+    group: "Border"
   },
   outlineColor: {
     className: "ring",
     values: "colors",
+    group: "Color",
     shorthand: "ringColor",
     transform: createColorMixTransform("outlineColor")
   },
@@ -1466,6 +1600,7 @@ var outline = {
     className: "ring",
     shorthand: "ring",
     values: "borders",
+    group: "Border",
     transform(value) {
       if (value === "none") {
         return { outline: "2px solid transparent", outlineOffset: "2px" };
@@ -1476,7 +1611,8 @@ var outline = {
   outlineOffset: {
     className: "ring",
     shorthand: "ringOffset",
-    values: "spacing"
+    values: "spacing",
+    group: "Border"
   }
 };
 
@@ -1484,48 +1620,56 @@ var outline = {
 var polyfill = {
   appearance: {
     className: "appearance",
+    group: "Visibility",
     transform(value) {
       return { appearance: value, WebkitAppearance: value };
     }
   },
   backfaceVisibility: {
     className: "backface",
+    group: "Visibility",
     transform(value) {
       return { backfaceVisibility: value, WebkitBackfaceVisibility: value };
     }
   },
   clipPath: {
     className: "clip-path",
+    group: "Other",
     transform(value) {
       return { clipPath: value, WebkitClipPath: value };
     }
   },
   hyphens: {
     className: "hyphens",
+    group: "Other",
     transform(value) {
       return { hyphens: value, WebkitHyphens: value };
     }
   },
   mask: {
     className: "mask",
+    group: "Other",
     transform(value) {
       return { mask: value, WebkitMask: value };
     }
   },
   maskImage: {
     className: "mask-image",
+    group: "Other",
     transform(value) {
       return { maskImage: value, WebkitMaskImage: value };
     }
   },
   maskSize: {
     className: "mask-size",
+    group: "Other",
     transform(value) {
       return { maskSize: value, WebkitMaskSize: value };
     }
   },
   textSizeAdjust: {
     className: "text-size-adjust",
+    group: "Typography",
     transform(value) {
       return { textSizeAdjust: value, WebkitTextSizeAdjust: value };
     }
@@ -1591,55 +1735,67 @@ var sizing = {
   width: {
     shorthand: "w",
     className: "w",
+    group: "Width",
     values: widthValues
   },
   inlineSize: {
     className: "w",
+    group: "Width",
     values: widthValues
   },
   minWidth: {
     shorthand: "minW",
     className: "min-w",
+    group: "Width",
     values: widthValues
   },
   minInlineSize: {
     className: "min-w",
+    group: "Width",
     values: widthValues
   },
   maxWidth: {
     shorthand: "maxW",
     className: "max-w",
+    group: "Width",
     values: widthValues
   },
   maxInlineSize: {
     className: "max-w",
+    group: "Width",
     values: widthValues
   },
   height: {
     shorthand: "h",
     className: "h",
+    group: "Height",
     values: heightValues
   },
   blockSize: {
     className: "h",
+    group: "Height",
     values: heightValues
   },
   minHeight: {
     shorthand: "minH",
     className: "min-h",
+    group: "Height",
     values: heightValues
   },
   minBlockSize: {
     className: "min-h",
+    group: "Height",
     values: heightValues
   },
   maxHeight: {
     shorthand: "maxH",
     className: "max-h",
+    group: "Height",
     values: heightValues
   },
   maxBlockSize: {
     className: "max-b",
+    group: "Height",
     values: heightValues
   }
 };
@@ -1653,108 +1809,130 @@ var spacing = {
   padding: {
     className: "p",
     shorthand: "p",
-    values: "spacing"
+    values: "spacing",
+    group: "Padding"
   },
   paddingLeft: {
     className: "pl",
     shorthand: "pl",
-    values: "spacing"
+    values: "spacing",
+    group: "Padding"
   },
   paddingRight: {
     className: "pr",
     shorthand: "pr",
-    values: "spacing"
+    values: "spacing",
+    group: "Padding"
   },
   paddingTop: {
     className: "pt",
     shorthand: "pt",
-    values: "spacing"
+    values: "spacing",
+    group: "Padding"
   },
   paddingBottom: {
     className: "pb",
     shorthand: "pb",
-    values: "spacing"
+    values: "spacing",
+    group: "Padding"
   },
   paddingBlock: {
     className: "py",
     values: "spacing",
+    group: "Padding",
     shorthand: ["py", "paddingY"]
   },
   paddingBlockEnd: {
     className: "pb",
-    values: "spacing"
+    values: "spacing",
+    group: "Padding"
   },
   paddingBlockStart: {
     className: "pt",
-    values: "spacing"
+    values: "spacing",
+    group: "Padding"
   },
   paddingInline: {
     className: "px",
     values: "spacing",
+    group: "Padding",
     shorthand: ["paddingX", "px"]
   },
   paddingInlineEnd: {
     className: "pe",
     shorthand: ["pe", "paddingEnd"],
-    values: "spacing"
+    values: "spacing",
+    group: "Padding"
   },
   paddingInlineStart: {
     className: "ps",
     shorthand: ["ps", "paddingStart"],
-    values: "spacing"
+    values: "spacing",
+    group: "Padding"
   },
   marginLeft: {
     className: "ml",
     shorthand: "ml",
-    values: marginValues
+    values: marginValues,
+    group: "Margin"
   },
   marginRight: {
     className: "mr",
     shorthand: "mr",
-    values: marginValues
+    values: marginValues,
+    group: "Margin"
   },
   marginTop: {
     className: "mt",
     shorthand: "mt",
-    values: marginValues
+    values: marginValues,
+    group: "Margin"
   },
   marginBottom: {
     className: "mb",
     shorthand: "mb",
-    values: marginValues
+    values: marginValues,
+    group: "Margin"
   },
   margin: {
     className: "m",
     shorthand: "m",
-    values: marginValues
+    values: marginValues,
+    group: "Margin"
   },
   marginBlock: {
     className: "my",
     values: marginValues,
+    group: "Margin",
     shorthand: ["my", "marginY"]
   },
   marginBlockEnd: {
     className: "mb",
-    values: marginValues
+    values: marginValues,
+    group: "Margin"
   },
   marginBlockStart: {
     className: "mt",
-    values: marginValues
+    values: marginValues,
+    group: "Margin"
   },
   marginInline: {
     className: "mx",
     values: marginValues,
+    group: "Margin",
     shorthand: ["mx", "marginX"]
   },
   marginInlineEnd: {
     className: "me",
     shorthand: ["me", "marginEnd"],
-    values: marginValues
+    values: marginValues,
+    group: "Margin"
   },
   marginInlineStart: {
     className: "ms",
     shorthand: ["ms", "marginStart"],
-    values: marginValues
+    values: marginValues,
+    group: "Margin"
   }
 };
 
@@ -1763,31 +1941,37 @@ var svg = {
   fill: {
     className: "fill",
     values: "colors",
+    group: "Color",
     transform: createColorMixTransform("fill")
   },
   stroke: {
     className: "stroke",
     values: "colors",
+    group: "Color",
     transform: createColorMixTransform("stroke")
   },
   strokeWidth: {
     className: "stroke-w",
-    values: "borderWidths"
+    values: "borderWidths",
+    group: "Border"
   }
 };
 
 // src/utilities/tables.ts
 var tables = {
   borderCollapse: {
-    className: "border"
+    className: "border",
+    group: "Table"
   },
   borderSpacing: {
     className: "border-spacing",
-    values: "spacing"
+    values: "spacing",
+    group: "Table"
   },
   borderSpacingX: {
     className: "border-spacing-x",
     values: "spacing",
+    group: "Table",
     transform(value) {
       return {
         borderSpacing: `${value} var(--border-spacing-y)`
@@ -1797,6 +1981,7 @@ var tables = {
   borderSpacingY: {
     className: "border-spacing-y",
     values: "spacing",
+    group: "Table",
     transform(value) {
       return {
         borderSpacing: `var(--border-spacing-x) ${value}`
@@ -1804,7 +1989,8 @@ var tables = {
     }
   },
   tableLayout: {
-    className: "table"
+    className: "table",
+    group: "Table"
   }
 };
 
@@ -1824,10 +2010,12 @@ var negativeFractions = Object.fromEntries(
 var fractions = { ...positiveFractions, ...negativeFractions };
 var transforms = {
   transformOrigin: {
-    className: "origin"
+    className: "origin",
+    group: "Transform"
   },
   scale: {
     className: "scale",
+    group: "Transform",
     property: "scale",
     values: {
       auto: "var(--scale-x) var(--scale-y)"
@@ -1835,6 +2023,7 @@ var transforms = {
   },
   scaleX: {
     className: "scale-x",
+    group: "Transform",
     transform(value) {
       return {
         "--scale-x": value
@@ -1843,6 +2032,7 @@ var transforms = {
   },
   scaleY: {
     className: "scale-y",
+    group: "Transform",
     transform(value) {
       return {
         "--scale-y": value
@@ -1851,6 +2041,7 @@ var transforms = {
   },
   translate: {
     className: "translate",
+    group: "Transform",
     property: "translate",
     values: {
       auto: "var(--translate-x) var(--translate-y)"
@@ -1859,6 +2050,7 @@ var transforms = {
   translateX: {
     shorthand: "x",
     className: "translate-x",
+    group: "Transform",
     values(theme) {
       return {
         ...theme("spacing"),
@@ -1874,6 +2066,7 @@ var transforms = {
   translateY: {
     shorthand: "y",
     className: "translate-y",
+    group: "Transform",
     values(theme) {
       return {
         ...theme("spacing"),
@@ -1909,6 +2102,7 @@ var transitions = {
   transitionTimingFunction: {
     className: "ease",
     values: "easings",
+    group: "Transition",
     transform(value) {
       return {
         "--transition-easing": value,
@@ -1918,11 +2112,13 @@ var transitions = {
   },
   transitionDelay: {
     className: "delay",
-    values: "durations"
+    values: "durations",
+    group: "Transition"
   },
   transitionDuration: {
     className: "duration",
     values: "durations",
+    group: "Transition",
     transform(value) {
       return {
         "--transition-duration": value,
@@ -1932,6 +2128,7 @@ var transitions = {
   },
   transitionProperty: {
     className: "transition-prop",
+    group: "Transition",
     transform(value) {
       return {
         "--transition-prop": value,
@@ -1942,21 +2139,25 @@ var transitions = {
   transition: {
     className: "transition",
     values: Object.keys(transitionMap),
+    group: "Transition",
     transform(value) {
       return transitionMap[value] ?? { transition: value };
     }
   },
   animation: {
     className: "animation",
-    values: "animations"
+    values: "animations",
+    group: "Transition"
   },
   animationName: {
     className: "animation-name",
-    values: "animationName"
+    values: "animationName",
+    group: "Transition"
   },
   animationDelay: {
     className: "animation-delay",
-    values: "durations"
+    values: "durations",
+    group: "Transition"
   }
 };
 
@@ -1965,22 +2166,27 @@ var typography = {
   color: {
     className: "text",
     values: "colors",
+    group: "Color",
     transform: createColorMixTransform("color")
   },
   fontFamily: {
     className: "font",
-    values: "fonts"
+    values: "fonts",
+    group: "Typography"
   },
   fontSize: {
     className: "fs",
-    values: "fontSizes"
+    values: "fontSizes",
+    group: "Typography"
   },
   fontWeight: {
     className: "font",
-    values: "fontWeights"
+    values: "fontWeights",
+    group: "Typography"
   },
   fontSmoothing: {
     className: "smoothing",
+    group: "Typography",
     values: {
       antialiased: "antialiased",
       "subpixel-antialiased": "auto"
@@ -1992,70 +2198,88 @@ var typography = {
     }
   },
   fontVariantNumeric: {
-    className: "numeric"
+    className: "numeric",
+    group: "Typography"
   },
   letterSpacing: {
     className: "tracking",
-    values: "letterSpacings"
+    values: "letterSpacings",
+    group: "Typography"
   },
   lineHeight: {
     className: "leading",
-    values: "lineHeights"
+    values: "lineHeights",
+    group: "Typography"
   },
   textAlign: {
-    className: "text"
+    className: "text",
+    group: "Typography"
   },
   textDecoration: {
-    className: "text-decor"
+    className: "text-decor",
+    group: "Typography"
   },
   textDecorationColor: {
     className: "text-decor",
     values: "colors",
-    transform: createColorMixTransform("textDecorationColor")
+    transform: createColorMixTransform("textDecorationColor"),
+    group: "Typography"
   },
   textEmphasisColor: {
     className: "text-emphasis",
     values: "colors",
-    transform: createColorMixTransform("textEmphasisColor")
+    transform: createColorMixTransform("textEmphasisColor"),
+    group: "Typography"
   },
   textDecorationStyle: {
-    className: "decoration"
+    className: "decoration",
+    group: "Typography"
   },
   textDecorationThickness: {
-    className: "decoration"
+    className: "decoration",
+    group: "Typography"
   },
   textUnderlineOffset: {
-    className: "underline-offset"
+    className: "underline-offset",
+    group: "Typography"
   },
   textTransform: {
-    className: "text"
+    className: "text",
+    group: "Typography"
   },
   textIndent: {
     className: "indent",
+    group: "Typography",
     values: "spacing"
   },
   textShadow: {
     className: "text-shadow",
-    values: "shadows"
+    values: "shadows",
+    group: "Typography"
   },
   textShadowColor: {
     shorthand: "textShadowColor",
     className: "text-shadow",
     values: "colors",
-    transform: createColorMixTransform("--text-shadow-color")
+    transform: createColorMixTransform("--text-shadow-color"),
+    group: "Typography"
   },
   textOverflow: {
-    className: "text"
+    className: "text",
+    group: "Typography"
   },
   verticalAlign: {
-    className: "align"
+    className: "align",
+    group: "Typography"
   },
   wordBreak: {
-    className: "break"
+    className: "break",
+    group: "Typography"
   },
   textWrap: {
     className: "text",
     values: ["wrap", "balance", "nowrap"],
+    group: "Typography",
     transform(value) {
       return { textWrap: value };
     }
@@ -2063,6 +2287,7 @@ var typography = {
   truncate: {
     className: "truncate",
     values: { type: "boolean" },
+    group: "Typography",
     transform(value) {
       if (!value)
         return {};
@@ -2075,6 +2300,7 @@ var typography = {
   },
   lineClamp: {
     className: "clamp",
+    group: "Typography",
     transform(value) {
       if (value === "none") {
         return {