feat: improve transition property

Author: segunadebayo

.changeset/enhanced-transition-utilities.md

@@ -0,0 +1,19 @@
+---
+'@pandacss/preset-base': minor
+---
+
+Added new transition values and enhanced transition property utilities
+
+- `size` → `width, height, min-width, max-width, min-height, max-height`
+- `position` → `left, right, top, bottom, inset, inset-inline, inset-block`
+- `background` → `background, background-color, background-image, background-position`
+
+```tsx
+import { css } from 'styled-system/css'
+
+// Transition shorthand values
+css({ transition: 'size' })
+
+// Property groups
+css({ transitionProperty: 'size', transitionDuration: '300ms' })
+```

packages/generator/__tests__/generate-prop-types.test.ts

@@ -154,7 +154,8 @@ describe('generate property types', () => {
       	transitionTimingFunction: Tokens["easings"];
       	transitionDelay: Tokens["durations"];
       	transitionDuration: Tokens["durations"];
-      	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
+      	transitionProperty: "common" | "colors" | "size" | "position" | "background";
+      	transition: "all" | "common" | "size" | "position" | "background" | "colors" | "opacity" | "shadow" | "transform";
       	animation: Tokens["animations"];
       	animationName: "spin" | "ping" | "pulse" | "bounce";
       	animationTimingFunction: Tokens["easings"];

packages/generator/__tests__/generate-style-props.test.ts

@@ -5913,7 +5913,7 @@ describe('generate property types', () => {
          *
          * @see https://developer.mozilla.org/docs/Web/CSS/transition-property
          */
-      transitionProperty?: ConditionalValue<CssProperties["transitionProperty"] | AnyString>
+      transitionProperty?: ConditionalValue<UtilityValues["transitionProperty"] | CssVars | CssProperties["transitionProperty"] | AnyString>
        /**
          * The **\`transition-timing-function\`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
          *
@@ -13421,7 +13421,7 @@ describe('generate property types', () => {
          *
          * @see https://developer.mozilla.org/docs/Web/CSS/transition-property
          */
-      transitionProperty?: ConditionalValue<WithEscapeHatch<CssProperties["transitionProperty"]>>
+      transitionProperty?: ConditionalValue<WithEscapeHatch<UtilityValues["transitionProperty"] | CssVars>>
        /**
          * The **\`transition-timing-function\`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
          *

packages/preset-base/src/utilities/transitions.ts

@@ -11,13 +11,24 @@ const transitionMap: Record<string, any> = {
   common: createTransition(
     'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
   ),
-  background: createTransition('background, background-color'),
+  size: createTransition('width, height, min-width, max-width, min-height, max-height'),
+  position: createTransition('left, right, top, bottom, inset, inset-inline, inset-block'),
+  background: createTransition('background, background-color, background-image, background-position'),
   colors: createTransition('color, background-color, border-color, outline-color, text-decoration-color, fill, stroke'),
   opacity: createTransition('opacity'),
   shadow: createTransition('box-shadow'),
   transform: createTransition('transform'),
 }
 
+const transitionPropertyMap: Record<string, string> = {
+  common:
+    'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+  colors: 'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke',
+  size: 'width, height, min-width, max-width, min-height, max-height',
+  position: 'left, right, top, bottom, inset, inset-inline, inset-block',
+  background: 'background, background-color, background-image, background-position',
+}
+
 export const transitions: UtilityConfig = {
   transitionTimingFunction: {
     className: 'trs-tmf',
@@ -49,6 +60,7 @@ export const transitions: UtilityConfig = {
   transitionProperty: {
     className: 'trs-prop',
     group: 'Transition',
+    values: transitionPropertyMap,
     transform(value) {
       return {
         '--transition-prop': value,

packages/studio/styled-system/types/prop-type.d.ts

@@ -150,7 +150,8 @@ export interface UtilityValues {
 	transitionTimingFunction: Tokens["easings"];
 	transitionDelay: Tokens["durations"];
 	transitionDuration: Tokens["durations"];
-	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
+	transitionProperty: "common" | "colors" | "size" | "position" | "background";
+	transition: "all" | "common" | "size" | "position" | "background" | "colors" | "opacity" | "shadow" | "transform";
 	animation: Tokens["animations"];
 	animationName: "spin" | "ping" | "pulse" | "bounce";
 	animationTimingFunction: Tokens["easings"];

packages/studio/styled-system/types/style-props.d.ts

@@ -5907,7 +5907,7 @@ transitionDuration?: ConditionalValue<UtilityValues["transitionDuration"] | CssV
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/transition-property
    */
-transitionProperty?: ConditionalValue<CssProperties["transitionProperty"] | AnyString>
+transitionProperty?: ConditionalValue<UtilityValues["transitionProperty"] | CssVars | CssProperties["transitionProperty"] | AnyString>
  /**
    * The **`transition-timing-function`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
    *