@chakra-ui/panda-preset 3.21.1 → 3.23.0

package/dist/cjs/recipes/checkmark.cjs

@@ -47,7 +47,7 @@ const checkmarkRecipe = def.defineRecipe({
     },
     variant: {
       solid: {
-        borderColor: "border",
+        borderColor: "border.emphasized",
         "&:is([data-state=checked], [data-state=indeterminate])": {
           bg: "colorPalette.solid",
           color: "colorPalette.contrast",

package/dist/cjs/recipes/radiomark.cjs

@@ -41,7 +41,7 @@ const radiomarkRecipe = def.defineRecipe({
     variant: {
       solid: {
         borderWidth: "1px",
-        borderColor: "border",
+        borderColor: "border.emphasized",
         _checked: {
           bg: "colorPalette.solid",
           color: "colorPalette.contrast",

package/dist/cjs/slot-recipes/checkbox-card.cjs

@@ -164,7 +164,7 @@ const checkboxCardSlotRecipe = def.defineSlotRecipe({
           }
         },
         indicator: {
-          borderColor: "border",
+          borderColor: "border.emphasized",
           "&:is([data-state=checked], [data-state=indeterminate])": {
             bg: "colorPalette.solid",
             color: "colorPalette.contrast",
@@ -199,7 +199,7 @@ const checkboxCardSlotRecipe = def.defineSlotRecipe({
           }
         },
         indicator: {
-          borderColor: "border",
+          borderColor: "border.emphasized",
           "&:is([data-state=checked], [data-state=indeterminate])": {
             bg: "colorPalette.solid",
             color: "colorPalette.contrast",

package/dist/cjs/slot-recipes/checkbox.cjs

@@ -106,7 +106,7 @@ const checkboxSlotRecipe = def.defineSlotRecipe({
       },
       solid: {
         control: {
-          borderColor: "border",
+          borderColor: "border.emphasized",
           "&:is([data-state=checked], [data-state=indeterminate])": {
             bg: "colorPalette.solid",
             color: "colorPalette.contrast",

package/dist/cjs/slot-recipes/dialog.cjs

@@ -24,9 +24,9 @@ const dialogSlotRecipe = def.defineSlotRecipe({
       pos: "fixed",
       left: 0,
       top: 0,
-      w: "100vw",
+      w: "100dvw",
       h: "100dvh",
-      zIndex: "overlay",
+      zIndex: "var(--z-index)",
       _open: {
         animationName: "fade-in",
         animationDuration: "slow"
@@ -38,7 +38,7 @@ const dialogSlotRecipe = def.defineSlotRecipe({
     },
     positioner: {
       display: "flex",
-      width: "100vw",
+      width: "100dvw",
       height: "100dvh",
       position: "fixed",
       left: 0,
@@ -191,8 +191,8 @@ const dialogSlotRecipe = def.defineSlotRecipe({
       },
       full: {
         content: {
-          maxW: "100vw",
-          minH: "100vh",
+          maxW: "100dvw",
+          minH: "100dvh",
           "--dialog-margin": "0",
           borderRadius: "0"
         }

package/dist/cjs/slot-recipes/editable.cjs

@@ -36,7 +36,7 @@ const editableSlotRecipe = def.defineSlotRecipe({
       display: "inline-flex",
       alignItems: "center",
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       cursor: "text",
       _hover: {
         bg: "bg.muted"

package/dist/cjs/slot-recipes/index.cjs

@@ -47,6 +47,7 @@ var tag = require('./tag.cjs');
 var timeline = require('./timeline.cjs');
 var toast = require('./toast.cjs');
 var tooltip = require('./tooltip.cjs');
+var treeView = require('./tree-view.cjs');
 
 const slotRecipes = {
   accordion: accordion.accordionSlotRecipe,
@@ -94,7 +95,8 @@ const slotRecipes = {
   status: status.statusSlotRecipe,
   timeline: timeline.timelineSlotRecipe,
   colorPicker: colorPicker.colorPickerSlotRecipe,
-  qrCode: qrCode.qrCodeSlotRecipe
+  qrCode: qrCode.qrCodeSlotRecipe,
+  treeView: treeView.treeViewSlotRecipe
 };
 
 exports.slotRecipes = slotRecipes;

package/dist/cjs/slot-recipes/native-select.cjs

@@ -20,6 +20,8 @@ const nativeSelectSlotRecipe = def.defineSlotRecipe({
       appearance: "none",
       borderRadius: "l2",
       "--error-color": "colors.border.error",
+      "--input-height": "var(--select-field-height)",
+      height: "var(--select-field-height)",
       _disabled: {
         layerStyle: "disabled"
       },
@@ -84,11 +86,13 @@ const nativeSelectSlotRecipe = def.defineSlotRecipe({
     },
     size: {
       xs: {
+        root: {
+          "--select-field-height": "sizes.8"
+        },
         field: {
           textStyle: "xs",
           ps: "2",
-          pe: "6",
-          height: "6"
+          pe: "6"
         },
         indicator: {
           textStyle: "sm",
@@ -96,11 +100,13 @@ const nativeSelectSlotRecipe = def.defineSlotRecipe({
         }
       },
       sm: {
+        root: {
+          "--select-field-height": "sizes.9"
+        },
         field: {
           textStyle: "sm",
           ps: "2.5",
-          pe: "8",
-          height: "8"
+          pe: "8"
         },
         indicator: {
           textStyle: "md",
@@ -108,11 +114,13 @@ const nativeSelectSlotRecipe = def.defineSlotRecipe({
         }
       },
       md: {
+        root: {
+          "--select-field-height": "sizes.10"
+        },
         field: {
           textStyle: "sm",
           ps: "3",
-          pe: "8",
-          height: "10"
+          pe: "8"
         },
         indicator: {
           textStyle: "lg",
@@ -120,11 +128,13 @@ const nativeSelectSlotRecipe = def.defineSlotRecipe({
         }
       },
       lg: {
+        root: {
+          "--select-field-height": "sizes.11"
+        },
         field: {
           textStyle: "md",
           ps: "4",
-          pe: "8",
-          height: "11"
+          pe: "8"
         },
         indicator: {
           textStyle: "xl",
@@ -132,11 +142,13 @@ const nativeSelectSlotRecipe = def.defineSlotRecipe({
         }
       },
       xl: {
+        root: {
+          "--select-field-height": "sizes.12"
+        },
         field: {
           textStyle: "md",
           ps: "4.5",
-          pe: "10",
-          height: "12"
+          pe: "10"
         },
         indicator: {
           textStyle: "xl",

package/dist/cjs/slot-recipes/radio-card.cjs

@@ -182,7 +182,7 @@ const radioCardSlotRecipe = def.defineSlotRecipe({
         },
         itemIndicator: {
           borderWidth: "1px",
-          borderColor: "border",
+          borderColor: "border.emphasized",
           _checked: {
             bg: "colorPalette.solid",
             color: "colorPalette.contrast",
@@ -223,7 +223,7 @@ const radioCardSlotRecipe = def.defineSlotRecipe({
         },
         itemIndicator: {
           borderWidth: "1px",
-          borderColor: "border",
+          borderColor: "border.emphasized",
           _checked: {
             bg: "colorPalette.solid",
             color: "colorPalette.contrast",

package/dist/cjs/slot-recipes/radio-group.cjs

@@ -94,7 +94,7 @@ const radioGroupSlotRecipe = def.defineSlotRecipe({
       solid: {
         itemControl: {
           borderWidth: "1px",
-          borderColor: "border",
+          borderColor: "border.emphasized",
           _checked: {
             bg: "colorPalette.solid",
             color: "colorPalette.contrast",

package/dist/cjs/slot-recipes/tree-view.cjs

@@ -0,0 +1,213 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const treeViewSlotRecipe = def.defineSlotRecipe({
+  slots: [
+    "branch",
+    "branchContent",
+    "branchControl",
+    "branchIndentGuide",
+    "branchIndicator",
+    "branchText",
+    "branchTrigger",
+    "item",
+    "itemIndicator",
+    "itemText",
+    "label",
+    "nodeCheckbox",
+    "root",
+    "tree"
+  ],
+  className: "tree-view",
+  base: {
+    root: {
+      width: "full",
+      display: "flex",
+      flexDirection: "column",
+      gap: "2"
+    },
+    tree: {
+      display: "flex",
+      flexDirection: "column",
+      "--tree-item-gap": "spacing.2",
+      _icon: {
+        boxSize: "var(--tree-icon-size)"
+      }
+    },
+    label: {
+      fontWeight: "medium",
+      textStyle: "sm"
+    },
+    branch: {
+      position: "relative"
+    },
+    branchContent: {
+      position: "relative"
+    },
+    branchIndentGuide: {
+      height: "100%",
+      width: "1px",
+      bg: "border",
+      position: "absolute",
+      "--tree-depth": "calc(var(--depth) - 1)",
+      "--tree-indentation-offset": "calc(var(--tree-indentation) * var(--tree-depth))",
+      "--tree-offset": "calc(var(--tree-padding-inline) + var(--tree-indentation-offset))",
+      "--tree-icon-offset": "calc(var(--tree-icon-size) * 0.5 * var(--depth))",
+      insetInlineStart: "calc(var(--tree-offset) + var(--tree-icon-offset))",
+      zIndex: "1"
+    },
+    branchIndicator: {
+      color: "fg.muted",
+      transformOrigin: "center",
+      transitionDuration: "normal",
+      transitionProperty: "transform",
+      transitionTimingFunction: "default",
+      _open: {
+        transform: "rotate(90deg)"
+      }
+    },
+    branchTrigger: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    branchControl: {
+      display: "flex",
+      alignItems: "center",
+      gap: "var(--tree-item-gap)",
+      rounded: "l2",
+      userSelect: "none",
+      position: "relative",
+      "--tree-depth": "calc(var(--depth) - 1)",
+      "--tree-indentation-offset": "calc(var(--tree-indentation) * var(--tree-depth))",
+      "--tree-icon-offset": "calc(var(--tree-icon-size) * var(--tree-depth) * 0.5)",
+      "--tree-offset": "calc(var(--tree-padding-inline) + var(--tree-indentation-offset) + var(--tree-icon-offset))",
+      ps: "var(--tree-offset)",
+      pe: "var(--tree-padding-inline)",
+      py: "var(--tree-padding-block)",
+      focusVisibleRing: "inside",
+      focusRingColor: "border.emphasized",
+      focusRingWidth: "2px",
+      "&:hover, &:focus-visible": {
+        bg: "bg.muted"
+      },
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    item: {
+      display: "flex",
+      alignItems: "center",
+      gap: "var(--tree-item-gap)",
+      rounded: "l2",
+      userSelect: "none",
+      position: "relative",
+      "--tree-depth": "calc(var(--depth) - 1)",
+      "--tree-indentation-offset": "calc(var(--tree-indentation) * var(--tree-depth))",
+      "--tree-icon-offset": "calc(var(--tree-icon-size) * var(--tree-depth) * 0.5)",
+      "--tree-offset": "calc(var(--tree-padding-inline) + var(--tree-indentation-offset) + var(--tree-icon-offset))",
+      ps: "var(--tree-offset)",
+      pe: "var(--tree-padding-inline)",
+      py: "var(--tree-padding-block)",
+      focusVisibleRing: "inside",
+      focusRingColor: "border.emphasized",
+      focusRingWidth: "2px",
+      "&:hover, &:focus-visible": {
+        bg: "bg.muted"
+      },
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    itemText: {
+      flex: "1"
+    },
+    branchText: {
+      flex: "1"
+    },
+    nodeCheckbox: {
+      display: "inline-flex"
+    }
+  },
+  variants: {
+    size: {
+      md: {
+        tree: {
+          textStyle: "sm",
+          "--tree-indentation": "spacing.4",
+          "--tree-padding-inline": "spacing.3",
+          "--tree-padding-block": "spacing.1.5",
+          "--tree-icon-size": "spacing.4"
+        }
+      },
+      sm: {
+        tree: {
+          textStyle: "sm",
+          "--tree-indentation": "spacing.4",
+          "--tree-padding-inline": "spacing.3",
+          "--tree-padding-block": "spacing.1",
+          "--tree-icon-size": "spacing.3"
+        }
+      },
+      xs: {
+        tree: {
+          textStyle: "xs",
+          "--tree-indentation": "spacing.4",
+          "--tree-padding-inline": "spacing.2",
+          "--tree-padding-block": "spacing.1",
+          "--tree-icon-size": "spacing.3"
+        }
+      }
+    },
+    variant: {
+      subtle: {
+        branchControl: {
+          _selected: {
+            bg: "colorPalette.subtle",
+            color: "colorPalette.fg"
+          }
+        },
+        item: {
+          _selected: {
+            bg: "colorPalette.subtle",
+            color: "colorPalette.fg"
+          }
+        }
+      },
+      solid: {
+        branchControl: {
+          _selected: {
+            layerStyle: "fill.solid"
+          }
+        },
+        item: {
+          _selected: {
+            layerStyle: "fill.solid"
+          }
+        }
+      }
+    },
+    animateContent: {
+      true: {
+        branchContent: {
+          _open: {
+            animationName: "expand-height, fade-in",
+            animationDuration: "moderate"
+          },
+          _closed: {
+            animationName: "collapse-height, fade-out",
+            animationDuration: "moderate"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "subtle"
+  }
+});
+
+exports.treeViewSlotRecipe = treeViewSlotRecipe;

package/dist/esm/recipes/checkmark.js

@@ -45,7 +45,7 @@ const checkmarkRecipe = defineRecipe({
     },
     variant: {
       solid: {
-        borderColor: "border",
+        borderColor: "border.emphasized",
         "&:is([data-state=checked], [data-state=indeterminate])": {
           bg: "colorPalette.solid",
           color: "colorPalette.contrast",

package/dist/esm/recipes/radiomark.js

@@ -39,7 +39,7 @@ const radiomarkRecipe = defineRecipe({
     variant: {
       solid: {
         borderWidth: "1px",
-        borderColor: "border",
+        borderColor: "border.emphasized",
         _checked: {
           bg: "colorPalette.solid",
           color: "colorPalette.contrast",

package/dist/esm/slot-recipes/checkbox-card.js

@@ -162,7 +162,7 @@ const checkboxCardSlotRecipe = defineSlotRecipe({
           }
         },
         indicator: {
-          borderColor: "border",
+          borderColor: "border.emphasized",
           "&:is([data-state=checked], [data-state=indeterminate])": {
             bg: "colorPalette.solid",
             color: "colorPalette.contrast",
@@ -197,7 +197,7 @@ const checkboxCardSlotRecipe = defineSlotRecipe({
           }
         },
         indicator: {
-          borderColor: "border",
+          borderColor: "border.emphasized",
           "&:is([data-state=checked], [data-state=indeterminate])": {
             bg: "colorPalette.solid",
             color: "colorPalette.contrast",

package/dist/esm/slot-recipes/checkbox.js

@@ -104,7 +104,7 @@ const checkboxSlotRecipe = defineSlotRecipe({
       },
       solid: {
         control: {
-          borderColor: "border",
+          borderColor: "border.emphasized",
           "&:is([data-state=checked], [data-state=indeterminate])": {
             bg: "colorPalette.solid",
             color: "colorPalette.contrast",

package/dist/esm/slot-recipes/dialog.js

@@ -22,9 +22,9 @@ const dialogSlotRecipe = defineSlotRecipe({
       pos: "fixed",
       left: 0,
       top: 0,
-      w: "100vw",
+      w: "100dvw",
       h: "100dvh",
-      zIndex: "overlay",
+      zIndex: "var(--z-index)",
       _open: {
         animationName: "fade-in",
         animationDuration: "slow"
@@ -36,7 +36,7 @@ const dialogSlotRecipe = defineSlotRecipe({
     },
     positioner: {
       display: "flex",
-      width: "100vw",
+      width: "100dvw",
       height: "100dvh",
       position: "fixed",
       left: 0,
@@ -189,8 +189,8 @@ const dialogSlotRecipe = defineSlotRecipe({
       },
       full: {
         content: {
-          maxW: "100vw",
-          minH: "100vh",
+          maxW: "100dvw",
+          minH: "100dvh",
           "--dialog-margin": "0",
           borderRadius: "0"
         }

package/dist/esm/slot-recipes/editable.js

@@ -34,7 +34,7 @@ const editableSlotRecipe = defineSlotRecipe({
       display: "inline-flex",
       alignItems: "center",
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       cursor: "text",
       _hover: {
         bg: "bg.muted"

package/dist/esm/slot-recipes/index.js

@@ -45,6 +45,7 @@ import { tagSlotRecipe } from './tag.js';
 import { timelineSlotRecipe } from './timeline.js';
 import { toastSlotRecipe } from './toast.js';
 import { tooltipSlotRecipe } from './tooltip.js';
+import { treeViewSlotRecipe } from './tree-view.js';
 
 const slotRecipes = {
   accordion: accordionSlotRecipe,
@@ -92,7 +93,8 @@ const slotRecipes = {
   status: statusSlotRecipe,
   timeline: timelineSlotRecipe,
   colorPicker: colorPickerSlotRecipe,
-  qrCode: qrCodeSlotRecipe
+  qrCode: qrCodeSlotRecipe,
+  treeView: treeViewSlotRecipe
 };
 
 export { slotRecipes };

package/dist/esm/slot-recipes/native-select.js

@@ -18,6 +18,8 @@ const nativeSelectSlotRecipe = defineSlotRecipe({
       appearance: "none",
       borderRadius: "l2",
       "--error-color": "colors.border.error",
+      "--input-height": "var(--select-field-height)",
+      height: "var(--select-field-height)",
       _disabled: {
         layerStyle: "disabled"
       },
@@ -82,11 +84,13 @@ const nativeSelectSlotRecipe = defineSlotRecipe({
     },
     size: {
       xs: {
+        root: {
+          "--select-field-height": "sizes.8"
+        },
         field: {
           textStyle: "xs",
           ps: "2",
-          pe: "6",
-          height: "6"
+          pe: "6"
         },
         indicator: {
           textStyle: "sm",
@@ -94,11 +98,13 @@ const nativeSelectSlotRecipe = defineSlotRecipe({
         }
       },
       sm: {
+        root: {
+          "--select-field-height": "sizes.9"
+        },
         field: {
           textStyle: "sm",
           ps: "2.5",
-          pe: "8",
-          height: "8"
+          pe: "8"
         },
         indicator: {
           textStyle: "md",
@@ -106,11 +112,13 @@ const nativeSelectSlotRecipe = defineSlotRecipe({
         }
       },
       md: {
+        root: {
+          "--select-field-height": "sizes.10"
+        },
         field: {
           textStyle: "sm",
           ps: "3",
-          pe: "8",
-          height: "10"
+          pe: "8"
         },
         indicator: {
           textStyle: "lg",
@@ -118,11 +126,13 @@ const nativeSelectSlotRecipe = defineSlotRecipe({
         }
       },
       lg: {
+        root: {
+          "--select-field-height": "sizes.11"
+        },
         field: {
           textStyle: "md",
           ps: "4",
-          pe: "8",
-          height: "11"
+          pe: "8"
         },
         indicator: {
           textStyle: "xl",
@@ -130,11 +140,13 @@ const nativeSelectSlotRecipe = defineSlotRecipe({
         }
       },
       xl: {
+        root: {
+          "--select-field-height": "sizes.12"
+        },
         field: {
           textStyle: "md",
           ps: "4.5",
-          pe: "10",
-          height: "12"
+          pe: "10"
         },
         indicator: {
           textStyle: "xl",

package/dist/esm/slot-recipes/radio-card.js

@@ -180,7 +180,7 @@ const radioCardSlotRecipe = defineSlotRecipe({
         },
         itemIndicator: {
           borderWidth: "1px",
-          borderColor: "border",
+          borderColor: "border.emphasized",
           _checked: {
             bg: "colorPalette.solid",
             color: "colorPalette.contrast",
@@ -221,7 +221,7 @@ const radioCardSlotRecipe = defineSlotRecipe({
         },
         itemIndicator: {
           borderWidth: "1px",
-          borderColor: "border",
+          borderColor: "border.emphasized",
           _checked: {
             bg: "colorPalette.solid",
             color: "colorPalette.contrast",

package/dist/esm/slot-recipes/radio-group.js

@@ -92,7 +92,7 @@ const radioGroupSlotRecipe = defineSlotRecipe({
       solid: {
         itemControl: {
           borderWidth: "1px",
-          borderColor: "border",
+          borderColor: "border.emphasized",
           _checked: {
             bg: "colorPalette.solid",
             color: "colorPalette.contrast",

package/dist/esm/slot-recipes/tree-view.js

@@ -0,0 +1,211 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const treeViewSlotRecipe = defineSlotRecipe({
+  slots: [
+    "branch",
+    "branchContent",
+    "branchControl",
+    "branchIndentGuide",
+    "branchIndicator",
+    "branchText",
+    "branchTrigger",
+    "item",
+    "itemIndicator",
+    "itemText",
+    "label",
+    "nodeCheckbox",
+    "root",
+    "tree"
+  ],
+  className: "tree-view",
+  base: {
+    root: {
+      width: "full",
+      display: "flex",
+      flexDirection: "column",
+      gap: "2"
+    },
+    tree: {
+      display: "flex",
+      flexDirection: "column",
+      "--tree-item-gap": "spacing.2",
+      _icon: {
+        boxSize: "var(--tree-icon-size)"
+      }
+    },
+    label: {
+      fontWeight: "medium",
+      textStyle: "sm"
+    },
+    branch: {
+      position: "relative"
+    },
+    branchContent: {
+      position: "relative"
+    },
+    branchIndentGuide: {
+      height: "100%",
+      width: "1px",
+      bg: "border",
+      position: "absolute",
+      "--tree-depth": "calc(var(--depth) - 1)",
+      "--tree-indentation-offset": "calc(var(--tree-indentation) * var(--tree-depth))",
+      "--tree-offset": "calc(var(--tree-padding-inline) + var(--tree-indentation-offset))",
+      "--tree-icon-offset": "calc(var(--tree-icon-size) * 0.5 * var(--depth))",
+      insetInlineStart: "calc(var(--tree-offset) + var(--tree-icon-offset))",
+      zIndex: "1"
+    },
+    branchIndicator: {
+      color: "fg.muted",
+      transformOrigin: "center",
+      transitionDuration: "normal",
+      transitionProperty: "transform",
+      transitionTimingFunction: "default",
+      _open: {
+        transform: "rotate(90deg)"
+      }
+    },
+    branchTrigger: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    branchControl: {
+      display: "flex",
+      alignItems: "center",
+      gap: "var(--tree-item-gap)",
+      rounded: "l2",
+      userSelect: "none",
+      position: "relative",
+      "--tree-depth": "calc(var(--depth) - 1)",
+      "--tree-indentation-offset": "calc(var(--tree-indentation) * var(--tree-depth))",
+      "--tree-icon-offset": "calc(var(--tree-icon-size) * var(--tree-depth) * 0.5)",
+      "--tree-offset": "calc(var(--tree-padding-inline) + var(--tree-indentation-offset) + var(--tree-icon-offset))",
+      ps: "var(--tree-offset)",
+      pe: "var(--tree-padding-inline)",
+      py: "var(--tree-padding-block)",
+      focusVisibleRing: "inside",
+      focusRingColor: "border.emphasized",
+      focusRingWidth: "2px",
+      "&:hover, &:focus-visible": {
+        bg: "bg.muted"
+      },
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    item: {
+      display: "flex",
+      alignItems: "center",
+      gap: "var(--tree-item-gap)",
+      rounded: "l2",
+      userSelect: "none",
+      position: "relative",
+      "--tree-depth": "calc(var(--depth) - 1)",
+      "--tree-indentation-offset": "calc(var(--tree-indentation) * var(--tree-depth))",
+      "--tree-icon-offset": "calc(var(--tree-icon-size) * var(--tree-depth) * 0.5)",
+      "--tree-offset": "calc(var(--tree-padding-inline) + var(--tree-indentation-offset) + var(--tree-icon-offset))",
+      ps: "var(--tree-offset)",
+      pe: "var(--tree-padding-inline)",
+      py: "var(--tree-padding-block)",
+      focusVisibleRing: "inside",
+      focusRingColor: "border.emphasized",
+      focusRingWidth: "2px",
+      "&:hover, &:focus-visible": {
+        bg: "bg.muted"
+      },
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    itemText: {
+      flex: "1"
+    },
+    branchText: {
+      flex: "1"
+    },
+    nodeCheckbox: {
+      display: "inline-flex"
+    }
+  },
+  variants: {
+    size: {
+      md: {
+        tree: {
+          textStyle: "sm",
+          "--tree-indentation": "spacing.4",
+          "--tree-padding-inline": "spacing.3",
+          "--tree-padding-block": "spacing.1.5",
+          "--tree-icon-size": "spacing.4"
+        }
+      },
+      sm: {
+        tree: {
+          textStyle: "sm",
+          "--tree-indentation": "spacing.4",
+          "--tree-padding-inline": "spacing.3",
+          "--tree-padding-block": "spacing.1",
+          "--tree-icon-size": "spacing.3"
+        }
+      },
+      xs: {
+        tree: {
+          textStyle: "xs",
+          "--tree-indentation": "spacing.4",
+          "--tree-padding-inline": "spacing.2",
+          "--tree-padding-block": "spacing.1",
+          "--tree-icon-size": "spacing.3"
+        }
+      }
+    },
+    variant: {
+      subtle: {
+        branchControl: {
+          _selected: {
+            bg: "colorPalette.subtle",
+            color: "colorPalette.fg"
+          }
+        },
+        item: {
+          _selected: {
+            bg: "colorPalette.subtle",
+            color: "colorPalette.fg"
+          }
+        }
+      },
+      solid: {
+        branchControl: {
+          _selected: {
+            layerStyle: "fill.solid"
+          }
+        },
+        item: {
+          _selected: {
+            layerStyle: "fill.solid"
+          }
+        }
+      }
+    },
+    animateContent: {
+      true: {
+        branchContent: {
+          _open: {
+            animationName: "expand-height, fade-in",
+            animationDuration: "moderate"
+          },
+          _closed: {
+            animationName: "collapse-height, fade-out",
+            animationDuration: "moderate"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "subtle"
+  }
+});
+
+export { treeViewSlotRecipe };

package/dist/types/slot-recipes/index.d.ts

@@ -45,4 +45,5 @@ export declare const slotRecipes: {
     timeline: import("@pandacss/types").SlotRecipeConfig;
     colorPicker: import("@pandacss/types").SlotRecipeConfig;
     qrCode: import("@pandacss/types").SlotRecipeConfig;
+    treeView: import("@pandacss/types").SlotRecipeConfig;
 };

package/dist/types/slot-recipes/tree-view.d.ts

@@ -0,0 +1 @@
+export declare const treeViewSlotRecipe: import("@pandacss/types").SlotRecipeConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/panda-preset",
-  "version": "3.21.1",
+  "version": "3.23.0",
   "description": "Panda preset for Chakra UI",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "globby": "14.1.0",
-    "@chakra-ui/cli": "3.21.1"
+    "@chakra-ui/cli": "3.23.0"
   },
   "scripts": {
     "theme:eject": "chakra eject --outdir=src",