@chakra-ui/panda-preset 3.28.0 → 3.29.0

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

@@ -0,0 +1,76 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const carouselSlotRecipe = def.defineSlotRecipe({
+  className: "carousel",
+  slots: [
+    "root",
+    "itemGroup",
+    "item",
+    "control",
+    "nextTrigger",
+    "prevTrigger",
+    "indicatorGroup",
+    "indicator",
+    "autoplayTrigger"
+  ],
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      gap: "2",
+      _horizontal: {
+        flexDirection: "column"
+      },
+      _vertical: {
+        flexDirection: "row"
+      }
+    },
+    item: {
+      _horizontal: {
+        width: "100%"
+      },
+      _vertical: {
+        height: "100%"
+      }
+    },
+    control: {
+      display: "flex",
+      alignItems: "center",
+      _horizontal: {
+        flexDirection: "row",
+        width: "100%"
+      },
+      _vertical: {
+        flexDirection: "column",
+        height: "100%"
+      }
+    },
+    indicatorGroup: {
+      display: "flex",
+      justifyContent: "center",
+      gap: "3",
+      _horizontal: {
+        flexDirection: "row"
+      },
+      _vertical: {
+        flexDirection: "column"
+      }
+    },
+    indicator: {
+      width: "2.5",
+      height: "2.5",
+      borderRadius: "full",
+      bg: "colorPalette.subtle",
+      cursor: "button",
+      _current: {
+        bg: "colorPalette.solid"
+      }
+    }
+  },
+  defaultVariants: {}
+});
+
+exports.carouselSlotRecipe = carouselSlotRecipe;

package/dist/cjs/slot-recipes/code-block.cjs

@@ -134,6 +134,7 @@ const codeBlockSlotRecipe = def.defineSlotRecipe({
       },
       "& [data-line]": {
         position: "relative",
+        paddingInlineEnd: "var(--code-block-padding)",
         "--highlight-bg": "var(--code-block-highlight-bg)",
         "--highlight-border": "var(--code-block-highlight-border)",
         "&[data-highlight], &[data-diff]": {

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

@@ -39,6 +39,17 @@ const comboboxSlotRecipe = def.defineSlotRecipe({
         layerStyle: "disabled"
       }
     },
+    control: {
+      pos: "relative",
+      "--padding-factor": "1",
+      "--combobox-input-padding-end": "var(--combobox-input-padding-x)",
+      "&:has([data-part=trigger]), &:has([data-part=clear-trigger])": {
+        "--combobox-input-padding-end": "calc(var(--combobox-input-height) * var(--padding-factor))"
+      },
+      "&:has([data-part=trigger]):has([data-part=clear-trigger]:not([hidden]))": {
+        "--padding-factor": "1.5"
+      }
+    },
     input: {
       display: "flex",
       alignItems: "center",
@@ -46,7 +57,8 @@ const comboboxSlotRecipe = def.defineSlotRecipe({
       background: "bg.panel",
       width: "full",
       minH: "var(--combobox-input-height)",
-      px: "var(--combobox-input-padding-x)",
+      ps: "var(--combobox-input-padding-x)",
+      pe: "var(--combobox-input-padding-end)",
       "--input-height": "var(--combobox-input-height)",
       borderRadius: "l2",
       outline: 0,
@@ -78,9 +90,6 @@ const comboboxSlotRecipe = def.defineSlotRecipe({
       focusRingWidth: "2px",
       rounded: "l1"
     },
-    control: {
-      pos: "relative"
-    },
     indicatorGroup: {
       display: "flex",
       alignItems: "center",

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

@@ -8,6 +8,7 @@ var avatar = require('./avatar.cjs');
 var blockquote = require('./blockquote.cjs');
 var breadcrumb = require('./breadcrumb.cjs');
 var card = require('./card.cjs');
+var carousel = require('./carousel.cjs');
 var checkbox = require('./checkbox.cjs');
 var checkboxCard = require('./checkbox-card.cjs');
 var codeBlock = require('./code-block.cjs');
@@ -61,6 +62,7 @@ const slotRecipes = {
   blockquote: blockquote.blockquoteSlotRecipe,
   breadcrumb: breadcrumb.breadcrumbSlotRecipe,
   card: card.cardSlotRecipe,
+  carousel: carousel.carouselSlotRecipe,
   checkbox: checkbox.checkboxSlotRecipe,
   checkboxCard: checkboxCard.checkboxCardSlotRecipe,
   codeBlock: codeBlock.codeBlockSlotRecipe,

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

@@ -9,7 +9,12 @@ const segmentGroupSlotRecipe = def.defineSlotRecipe({
   base: {
     root: {
       "--segment-radius": "radii.l2",
-      borderRadius: "l2",
+      "--segment-indicator-bg": {
+        _light: "colors.bg",
+        _dark: "colors.bg.emphasized"
+      },
+      "--segment-indicator-shadow": "shadows.sm",
+      borderRadius: "var(--segment-radius)",
       display: "inline-flex",
       boxShadow: "inset",
       minW: "max-content",
@@ -68,12 +73,9 @@ const segmentGroupSlotRecipe = def.defineSlotRecipe({
       }
     },
     indicator: {
-      shadow: "sm",
+      shadow: "var(--segment-indicator-shadow)",
       pos: "absolute",
-      bg: {
-        _light: "bg",
-        _dark: "bg.emphasized"
-      },
+      bg: "var(--segment-indicator-bg)",
       width: "var(--width)",
       height: "var(--height)",
       top: "var(--top)",

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

@@ -9,6 +9,8 @@ const tabsSlotRecipe = def.defineSlotRecipe({
   base: {
     root: {
       "--tabs-trigger-radius": "radii.l2",
+      "--tabs-indicator-shadow": "shadows.xs",
+      "--tabs-indicator-bg": "colors.bg",
       position: "relative",
       _horizontal: {
         display: "block"
@@ -21,8 +23,6 @@ const tabsSlotRecipe = def.defineSlotRecipe({
       display: "inline-flex",
       position: "relative",
       isolation: "isolate",
-      "--tabs-indicator-shadow": "shadows.xs",
-      "--tabs-indicator-bg": "colors.bg",
       minH: "var(--tabs-height)",
       _horizontal: {
         flexDirection: "row"
@@ -65,7 +65,7 @@ const tabsSlotRecipe = def.defineSlotRecipe({
     indicator: {
       width: "var(--width)",
       height: "var(--height)",
-      borderRadius: "var(--tabs-indicator-radius)",
+      borderRadius: "var(--tabs-trigger-radius)",
       bg: "var(--tabs-indicator-bg)",
       shadow: "var(--tabs-indicator-shadow)",
       zIndex: -1
@@ -266,7 +266,7 @@ const tabsSlotRecipe = def.defineSlotRecipe({
           "&[data-selected][data-ssr]": {
             bg: "var(--tabs-indicator-bg)",
             shadow: "var(--tabs-indicator-shadow)",
-            borderRadius: "var(--tabs-indicator-radius)"
+            borderRadius: "var(--tabs-trigger-radius)"
           }
         }
       }

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

@@ -0,0 +1,74 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const carouselSlotRecipe = defineSlotRecipe({
+  className: "carousel",
+  slots: [
+    "root",
+    "itemGroup",
+    "item",
+    "control",
+    "nextTrigger",
+    "prevTrigger",
+    "indicatorGroup",
+    "indicator",
+    "autoplayTrigger"
+  ],
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      gap: "2",
+      _horizontal: {
+        flexDirection: "column"
+      },
+      _vertical: {
+        flexDirection: "row"
+      }
+    },
+    item: {
+      _horizontal: {
+        width: "100%"
+      },
+      _vertical: {
+        height: "100%"
+      }
+    },
+    control: {
+      display: "flex",
+      alignItems: "center",
+      _horizontal: {
+        flexDirection: "row",
+        width: "100%"
+      },
+      _vertical: {
+        flexDirection: "column",
+        height: "100%"
+      }
+    },
+    indicatorGroup: {
+      display: "flex",
+      justifyContent: "center",
+      gap: "3",
+      _horizontal: {
+        flexDirection: "row"
+      },
+      _vertical: {
+        flexDirection: "column"
+      }
+    },
+    indicator: {
+      width: "2.5",
+      height: "2.5",
+      borderRadius: "full",
+      bg: "colorPalette.subtle",
+      cursor: "button",
+      _current: {
+        bg: "colorPalette.solid"
+      }
+    }
+  },
+  defaultVariants: {}
+});
+
+export { carouselSlotRecipe };

package/dist/esm/slot-recipes/code-block.js

@@ -132,6 +132,7 @@ const codeBlockSlotRecipe = defineSlotRecipe({
       },
       "& [data-line]": {
         position: "relative",
+        paddingInlineEnd: "var(--code-block-padding)",
         "--highlight-bg": "var(--code-block-highlight-bg)",
         "--highlight-border": "var(--code-block-highlight-border)",
         "&[data-highlight], &[data-diff]": {

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

@@ -37,6 +37,17 @@ const comboboxSlotRecipe = defineSlotRecipe({
         layerStyle: "disabled"
       }
     },
+    control: {
+      pos: "relative",
+      "--padding-factor": "1",
+      "--combobox-input-padding-end": "var(--combobox-input-padding-x)",
+      "&:has([data-part=trigger]), &:has([data-part=clear-trigger])": {
+        "--combobox-input-padding-end": "calc(var(--combobox-input-height) * var(--padding-factor))"
+      },
+      "&:has([data-part=trigger]):has([data-part=clear-trigger]:not([hidden]))": {
+        "--padding-factor": "1.5"
+      }
+    },
     input: {
       display: "flex",
       alignItems: "center",
@@ -44,7 +55,8 @@ const comboboxSlotRecipe = defineSlotRecipe({
       background: "bg.panel",
       width: "full",
       minH: "var(--combobox-input-height)",
-      px: "var(--combobox-input-padding-x)",
+      ps: "var(--combobox-input-padding-x)",
+      pe: "var(--combobox-input-padding-end)",
       "--input-height": "var(--combobox-input-height)",
       borderRadius: "l2",
       outline: 0,
@@ -76,9 +88,6 @@ const comboboxSlotRecipe = defineSlotRecipe({
       focusRingWidth: "2px",
       rounded: "l1"
     },
-    control: {
-      pos: "relative"
-    },
     indicatorGroup: {
       display: "flex",
       alignItems: "center",

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

@@ -6,6 +6,7 @@ import { avatarSlotRecipe } from './avatar.js';
 import { blockquoteSlotRecipe } from './blockquote.js';
 import { breadcrumbSlotRecipe } from './breadcrumb.js';
 import { cardSlotRecipe } from './card.js';
+import { carouselSlotRecipe } from './carousel.js';
 import { checkboxSlotRecipe } from './checkbox.js';
 import { checkboxCardSlotRecipe } from './checkbox-card.js';
 import { codeBlockSlotRecipe } from './code-block.js';
@@ -59,6 +60,7 @@ const slotRecipes = {
   blockquote: blockquoteSlotRecipe,
   breadcrumb: breadcrumbSlotRecipe,
   card: cardSlotRecipe,
+  carousel: carouselSlotRecipe,
   checkbox: checkboxSlotRecipe,
   checkboxCard: checkboxCardSlotRecipe,
   codeBlock: codeBlockSlotRecipe,

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

@@ -7,7 +7,12 @@ const segmentGroupSlotRecipe = defineSlotRecipe({
   base: {
     root: {
       "--segment-radius": "radii.l2",
-      borderRadius: "l2",
+      "--segment-indicator-bg": {
+        _light: "colors.bg",
+        _dark: "colors.bg.emphasized"
+      },
+      "--segment-indicator-shadow": "shadows.sm",
+      borderRadius: "var(--segment-radius)",
       display: "inline-flex",
       boxShadow: "inset",
       minW: "max-content",
@@ -66,12 +71,9 @@ const segmentGroupSlotRecipe = defineSlotRecipe({
       }
     },
     indicator: {
-      shadow: "sm",
+      shadow: "var(--segment-indicator-shadow)",
       pos: "absolute",
-      bg: {
-        _light: "bg",
-        _dark: "bg.emphasized"
-      },
+      bg: "var(--segment-indicator-bg)",
       width: "var(--width)",
       height: "var(--height)",
       top: "var(--top)",

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

@@ -7,6 +7,8 @@ const tabsSlotRecipe = defineSlotRecipe({
   base: {
     root: {
       "--tabs-trigger-radius": "radii.l2",
+      "--tabs-indicator-shadow": "shadows.xs",
+      "--tabs-indicator-bg": "colors.bg",
       position: "relative",
       _horizontal: {
         display: "block"
@@ -19,8 +21,6 @@ const tabsSlotRecipe = defineSlotRecipe({
       display: "inline-flex",
       position: "relative",
       isolation: "isolate",
-      "--tabs-indicator-shadow": "shadows.xs",
-      "--tabs-indicator-bg": "colors.bg",
       minH: "var(--tabs-height)",
       _horizontal: {
         flexDirection: "row"
@@ -63,7 +63,7 @@ const tabsSlotRecipe = defineSlotRecipe({
     indicator: {
       width: "var(--width)",
       height: "var(--height)",
-      borderRadius: "var(--tabs-indicator-radius)",
+      borderRadius: "var(--tabs-trigger-radius)",
       bg: "var(--tabs-indicator-bg)",
       shadow: "var(--tabs-indicator-shadow)",
       zIndex: -1
@@ -264,7 +264,7 @@ const tabsSlotRecipe = defineSlotRecipe({
           "&[data-selected][data-ssr]": {
             bg: "var(--tabs-indicator-bg)",
             shadow: "var(--tabs-indicator-shadow)",
-            borderRadius: "var(--tabs-indicator-radius)"
+            borderRadius: "var(--tabs-trigger-radius)"
           }
         }
       }

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

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

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

@@ -6,6 +6,7 @@ export declare const slotRecipes: {
     blockquote: import("@pandacss/types").SlotRecipeConfig;
     breadcrumb: import("@pandacss/types").SlotRecipeConfig;
     card: import("@pandacss/types").SlotRecipeConfig;
+    carousel: import("@pandacss/types").SlotRecipeConfig;
     checkbox: import("@pandacss/types").SlotRecipeConfig;
     checkboxCard: import("@pandacss/types").SlotRecipeConfig;
     codeBlock: import("@pandacss/types").SlotRecipeConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/panda-preset",
-  "version": "3.28.0",
+  "version": "3.29.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.28.0"
+    "@chakra-ui/cli": "3.29.0"
   },
   "scripts": {
     "theme:eject": "chakra eject --outdir=src",