@mekari/pixel3-theme 0.7.2 → 1.0.0-next.0

package/dist/global-css.d.mts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const globalCss: _pandacss_dev.GlobalStyleObject;
+declare const globalCss: _pandacss_types.GlobalStyleObject;
 
 export { globalCss };

package/dist/global-css.d.ts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const globalCss: _pandacss_dev.GlobalStyleObject;
+declare const globalCss: _pandacss_types.GlobalStyleObject;
 
 export { globalCss };

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // index.ts
@@ -26,6 +36,7 @@ module.exports = __toCommonJS(theme_exports);
 
 // src/index.ts
 var import_dev70 = require("@pandacss/dev");
+var import_preset_base = __toESM(require("@pandacss/preset-base"));
 
 // src/breakpoints.ts
 var breakpoints = {
@@ -212,19 +223,22 @@ var tagSlotRecipe = (0, import_dev3.defineSlotRecipe)({
       }
     }
   },
+  // The close slot is an MpButton (ghost), whose own recipe also sets background, color and radius.
+  // `!` keeps these winning in every button state and in both cascade layouts: Panda v1 emits compound
+  // variants as utilities (above recipes), Panda v2 puts slot recipes in a layer below other recipes' variants.
   compoundVariants: [
     {
       variant: "gray",
       css: {
         close: {
-          background: "linear-gradient(270deg, #EDF0F2 75%, rgba(237, 240, 242, 0) 111.54%)",
-          borderTopLeftRadius: "0",
-          borderBottomLeftRadius: "0",
-          color: "gray.600",
+          background: "linear-gradient(270deg, #EDF0F2 75%, rgba(237, 240, 242, 0) 111.54%)!",
+          borderTopLeftRadius: "0!",
+          borderBottomLeftRadius: "0!",
+          color: "gray.600!",
           _nextTheme: {
-            background: "background.neutral.subtle",
-            boxShadow: "-7px 0px 15px -3px #0000001A",
-            color: "icon.default"
+            background: "background.neutral.subtle!",
+            boxShadow: "-7px 0px 15px -3px #0000001A!",
+            color: "icon.default!"
           }
         }
       }
@@ -233,14 +247,14 @@ var tagSlotRecipe = (0, import_dev3.defineSlotRecipe)({
       variant: "red",
       css: {
         close: {
-          background: "linear-gradient(270deg, #FDECEE 75%, rgba(237, 240, 242, 0) 111.54%)",
-          borderTopLeftRadius: "0",
-          borderBottomLeftRadius: "0",
-          color: "red.400",
+          background: "linear-gradient(270deg, #FDECEE 75%, rgba(237, 240, 242, 0) 111.54%)!",
+          borderTopLeftRadius: "0!",
+          borderBottomLeftRadius: "0!",
+          color: "red.400!",
           _nextTheme: {
-            background: "background.danger",
-            boxShadow: "-7px 0px 15px -3px #0000001A",
-            color: "icon.danger"
+            background: "background.danger!",
+            boxShadow: "-7px 0px 15px -3px #0000001A!",
+            color: "icon.danger!"
           }
         }
       }
@@ -526,15 +540,15 @@ var aireneButtonSlotRecipe = (0, import_dev5.defineSlotRecipe)({
   jsx: ["MpAireneButton", "mp-airene-button"],
   slots: ["root", "badge"],
   base: {
+    // Rendered as MpButton variant="unstyled": its variant keeps the background transparent and the font
+    // size inherited. The white fill comes from `_after`.
     root: {
       display: "inline-flex!",
       justifyContent: "center",
       alignItems: "center",
       position: "relative",
-      backgroundColor: "white",
       color: "blue.400!",
       borderRadius: "25px!",
-      fontSize: "md",
       fontWeight: "semiBold!",
       paddingLeft: "0.625rem!",
       paddingRight: "0.625rem!",
@@ -546,7 +560,6 @@ var aireneButtonSlotRecipe = (0, import_dev5.defineSlotRecipe)({
       gap: "0!",
       transition: "color 0.3s ease, background-color 0.3s ease",
       _nextTheme: {
-        backgroundColor: "background.neutral",
         color: "text.link!"
       },
       _before: {
@@ -1567,16 +1580,15 @@ var selectSlotRecipe = (0, import_dev8.defineSlotRecipe)({
         }
       }
     },
+    // Rendered as MpButton (ghost, sm): its variant sets the color and padding.
     clear: {
       position: "absolute!",
-      color: "gray.600",
       border: "none",
       top: "9px",
       right: "40px",
       width: "5",
       height: "5",
       minWidth: "5",
-      padding: "0",
       transition: "all 250ms!",
       visibility: "hidden",
       opacity: "0",
@@ -1585,12 +1597,11 @@ var selectSlotRecipe = (0, import_dev8.defineSlotRecipe)({
         opacity: "var(--mp-select--opacity)"
       }
     },
+    // Rendered as MpIcon size="sm": its variant sets the 20px size.
     arrow: {
       position: "absolute!",
       display: "inline-flex",
       alignItems: "center",
-      width: "6",
-      height: "6",
       right: "2",
       whiteSpace: "nowrap",
       pointerEvents: "none"
@@ -5490,7 +5501,7 @@ var timelineSeparatorSlotRecipe = (0, import_dev38.defineSlotRecipe)({
         backgroundColor: "transparent"
       },
       "&[data-accordion-child=true]": {
-        roundedBottom: ""
+        roundedBottom: "0"
       },
       _nextTheme: {
         backgroundColor: "border.default",
@@ -5515,7 +5526,7 @@ var timelineSeparatorSlotRecipe = (0, import_dev38.defineSlotRecipe)({
         backgroundColor: "transparent"
       },
       "&[data-accordion-child=true]": {
-        roundedTop: ""
+        roundedTop: "0"
       },
       _nextTheme: {
         backgroundColor: "border.default",
@@ -8730,6 +8741,9 @@ var utilities = {
 // src/index.ts
 var preset = (0, import_dev70.definePreset)({
   name: "@mekari/pixel3-theme",
+  // Panda v2 no longer adds preset-base by default. Included here, as an object, so configs only list
+  // this preset and apps never need to resolve @pandacss/preset-base themselves.
+  presets: [import_preset_base.default],
   // Main Theme
   theme: {
     extend: {
@@ -8750,9 +8764,49 @@ var preset = (0, import_dev70.definePreset)({
   },
   conditions,
   utilities,
+  // Apps use the flex pattern as `MpFlex` (re-exported from @mekari/pixel3). Without these names Panda does
+  // not treat it as the pattern, so `justify` / `align` / `direction` get no CSS unless the value is used
+  // elsewhere.
+  patterns: {
+    extend: {
+      flex: { jsx: ["Flex", "MpFlex", "mp-flex"] }
+    }
+  },
   globalCss,
   staticCss: {
-    themes: ["next"]
+    themes: ["next"],
+    // Values Pixel components only pass through render functions (`createVNode` in the built dist).
+    // Panda v2 does not read those, so apps that scan Pixel's dist would miss them unless they use the
+    // same values themselves.
+    recipes: {
+      textRecipe: [
+        { size: ["body", "body-small", "h1", "h2", "h3", "label-small"], weight: ["semiBold"] }
+      ],
+      spinnerRecipe: [{ size: ["md"] }],
+      timePanelSlotRecipe: ["*"]
+    },
+    css: [
+      {
+        properties: {
+          color: [
+            "blue.400",
+            "currentcolor",
+            "dark",
+            "gray.400",
+            "gray.600",
+            "icon.brand",
+            "icon.danger",
+            "icon.default",
+            "red.400",
+            "text.danger",
+            "text.disabled",
+            "text.link",
+            "text.secondary",
+            "white"
+          ]
+        }
+      }
+    ]
   },
   globalFontface,
   globalVars: {

package/dist/index.mjs

@@ -1,5 +1,6 @@
 // src/index.ts
 import { definePreset } from "@pandacss/dev";
+import presetBase from "@pandacss/preset-base";
 
 // src/breakpoints.ts
 var breakpoints = {
@@ -186,19 +187,22 @@ var tagSlotRecipe = defineSlotRecipe({
       }
     }
   },
+  // The close slot is an MpButton (ghost), whose own recipe also sets background, color and radius.
+  // `!` keeps these winning in every button state and in both cascade layouts: Panda v1 emits compound
+  // variants as utilities (above recipes), Panda v2 puts slot recipes in a layer below other recipes' variants.
   compoundVariants: [
     {
       variant: "gray",
       css: {
         close: {
-          background: "linear-gradient(270deg, #EDF0F2 75%, rgba(237, 240, 242, 0) 111.54%)",
-          borderTopLeftRadius: "0",
-          borderBottomLeftRadius: "0",
-          color: "gray.600",
+          background: "linear-gradient(270deg, #EDF0F2 75%, rgba(237, 240, 242, 0) 111.54%)!",
+          borderTopLeftRadius: "0!",
+          borderBottomLeftRadius: "0!",
+          color: "gray.600!",
           _nextTheme: {
-            background: "background.neutral.subtle",
-            boxShadow: "-7px 0px 15px -3px #0000001A",
-            color: "icon.default"
+            background: "background.neutral.subtle!",
+            boxShadow: "-7px 0px 15px -3px #0000001A!",
+            color: "icon.default!"
           }
         }
       }
@@ -207,14 +211,14 @@ var tagSlotRecipe = defineSlotRecipe({
       variant: "red",
       css: {
         close: {
-          background: "linear-gradient(270deg, #FDECEE 75%, rgba(237, 240, 242, 0) 111.54%)",
-          borderTopLeftRadius: "0",
-          borderBottomLeftRadius: "0",
-          color: "red.400",
+          background: "linear-gradient(270deg, #FDECEE 75%, rgba(237, 240, 242, 0) 111.54%)!",
+          borderTopLeftRadius: "0!",
+          borderBottomLeftRadius: "0!",
+          color: "red.400!",
           _nextTheme: {
-            background: "background.danger",
-            boxShadow: "-7px 0px 15px -3px #0000001A",
-            color: "icon.danger"
+            background: "background.danger!",
+            boxShadow: "-7px 0px 15px -3px #0000001A!",
+            color: "icon.danger!"
           }
         }
       }
@@ -500,15 +504,15 @@ var aireneButtonSlotRecipe = defineSlotRecipe3({
   jsx: ["MpAireneButton", "mp-airene-button"],
   slots: ["root", "badge"],
   base: {
+    // Rendered as MpButton variant="unstyled": its variant keeps the background transparent and the font
+    // size inherited. The white fill comes from `_after`.
     root: {
       display: "inline-flex!",
       justifyContent: "center",
       alignItems: "center",
       position: "relative",
-      backgroundColor: "white",
       color: "blue.400!",
       borderRadius: "25px!",
-      fontSize: "md",
       fontWeight: "semiBold!",
       paddingLeft: "0.625rem!",
       paddingRight: "0.625rem!",
@@ -520,7 +524,6 @@ var aireneButtonSlotRecipe = defineSlotRecipe3({
       gap: "0!",
       transition: "color 0.3s ease, background-color 0.3s ease",
       _nextTheme: {
-        backgroundColor: "background.neutral",
         color: "text.link!"
       },
       _before: {
@@ -1541,16 +1544,15 @@ var selectSlotRecipe = defineSlotRecipe5({
         }
       }
     },
+    // Rendered as MpButton (ghost, sm): its variant sets the color and padding.
     clear: {
       position: "absolute!",
-      color: "gray.600",
       border: "none",
       top: "9px",
       right: "40px",
       width: "5",
       height: "5",
       minWidth: "5",
-      padding: "0",
       transition: "all 250ms!",
       visibility: "hidden",
       opacity: "0",
@@ -1559,12 +1561,11 @@ var selectSlotRecipe = defineSlotRecipe5({
         opacity: "var(--mp-select--opacity)"
       }
     },
+    // Rendered as MpIcon size="sm": its variant sets the 20px size.
     arrow: {
       position: "absolute!",
       display: "inline-flex",
       alignItems: "center",
-      width: "6",
-      height: "6",
       right: "2",
       whiteSpace: "nowrap",
       pointerEvents: "none"
@@ -5464,7 +5465,7 @@ var timelineSeparatorSlotRecipe = defineSlotRecipe27({
         backgroundColor: "transparent"
       },
       "&[data-accordion-child=true]": {
-        roundedBottom: ""
+        roundedBottom: "0"
       },
       _nextTheme: {
         backgroundColor: "border.default",
@@ -5489,7 +5490,7 @@ var timelineSeparatorSlotRecipe = defineSlotRecipe27({
         backgroundColor: "transparent"
       },
       "&[data-accordion-child=true]": {
-        roundedTop: ""
+        roundedTop: "0"
       },
       _nextTheme: {
         backgroundColor: "border.default",
@@ -8704,6 +8705,9 @@ var utilities = {
 // src/index.ts
 var preset = definePreset({
   name: "@mekari/pixel3-theme",
+  // Panda v2 no longer adds preset-base by default. Included here, as an object, so configs only list
+  // this preset and apps never need to resolve @pandacss/preset-base themselves.
+  presets: [presetBase],
   // Main Theme
   theme: {
     extend: {
@@ -8724,9 +8728,49 @@ var preset = definePreset({
   },
   conditions,
   utilities,
+  // Apps use the flex pattern as `MpFlex` (re-exported from @mekari/pixel3). Without these names Panda does
+  // not treat it as the pattern, so `justify` / `align` / `direction` get no CSS unless the value is used
+  // elsewhere.
+  patterns: {
+    extend: {
+      flex: { jsx: ["Flex", "MpFlex", "mp-flex"] }
+    }
+  },
   globalCss,
   staticCss: {
-    themes: ["next"]
+    themes: ["next"],
+    // Values Pixel components only pass through render functions (`createVNode` in the built dist).
+    // Panda v2 does not read those, so apps that scan Pixel's dist would miss them unless they use the
+    // same values themselves.
+    recipes: {
+      textRecipe: [
+        { size: ["body", "body-small", "h1", "h2", "h3", "label-small"], weight: ["semiBold"] }
+      ],
+      spinnerRecipe: [{ size: ["md"] }],
+      timePanelSlotRecipe: ["*"]
+    },
+    css: [
+      {
+        properties: {
+          color: [
+            "blue.400",
+            "currentcolor",
+            "dark",
+            "gray.400",
+            "gray.600",
+            "icon.brand",
+            "icon.danger",
+            "icon.default",
+            "red.400",
+            "text.danger",
+            "text.disabled",
+            "text.link",
+            "text.secondary",
+            "white"
+          ]
+        }
+      }
+    ]
   },
   globalFontface,
   globalVars: {

package/dist/keyframes.d.mts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const keyframes: _pandacss_dev.CssKeyframes;
+declare const keyframes: _pandacss_types.CssKeyframes;
 
 export { keyframes };

package/dist/keyframes.d.ts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const keyframes: _pandacss_dev.CssKeyframes;
+declare const keyframes: _pandacss_types.CssKeyframes;
 
 export { keyframes };

package/dist/recipes/accordion.d.mts

@@ -1,5 +1,36 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const accordionSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const accordionSlotRecipe: _pandacss_types.SlotRecipeConfig<"header" | "headerTitle" | "headerDescription" | "item" | "panel", {
+    isClickable: {
+        true: {
+            header: {
+                cursor: "pointer";
+            };
+        };
+        false: {
+            header: {
+                cursor: "default";
+            };
+        };
+    };
+    iconPosition: {
+        start: {
+            headerDescription: {
+                pl: number;
+            };
+            panel: {
+                pl: number;
+            };
+        };
+        end: {
+            headerDescription: {
+                pl: number;
+            };
+            panel: {
+                pl: number;
+            };
+        };
+    };
+}>;
 
 export { accordionSlotRecipe };

package/dist/recipes/accordion.d.ts

@@ -1,5 +1,36 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const accordionSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const accordionSlotRecipe: _pandacss_types.SlotRecipeConfig<"header" | "headerTitle" | "headerDescription" | "item" | "panel", {
+    isClickable: {
+        true: {
+            header: {
+                cursor: "pointer";
+            };
+        };
+        false: {
+            header: {
+                cursor: "default";
+            };
+        };
+    };
+    iconPosition: {
+        start: {
+            headerDescription: {
+                pl: number;
+            };
+            panel: {
+                pl: number;
+            };
+        };
+        end: {
+            headerDescription: {
+                pl: number;
+            };
+            panel: {
+                pl: number;
+            };
+        };
+    };
+}>;
 
 export { accordionSlotRecipe };

package/dist/recipes/airene-button.d.mts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const aireneButtonSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const aireneButtonSlotRecipe: _pandacss_types.SlotRecipeConfig<"root" | "badge", {}>;
 
 export { aireneButtonSlotRecipe };

package/dist/recipes/airene-button.d.ts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const aireneButtonSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const aireneButtonSlotRecipe: _pandacss_types.SlotRecipeConfig<"root" | "badge", {}>;
 
 export { aireneButtonSlotRecipe };

package/dist/recipes/airene-chat-bubble.d.mts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const aireneBubbleSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const aireneBubbleSlotRecipe: _pandacss_types.SlotRecipeConfig<"text" | "body" | "root" | "header" | "loading", {}>;
 
 export { aireneBubbleSlotRecipe };

package/dist/recipes/airene-chat-bubble.d.ts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const aireneBubbleSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const aireneBubbleSlotRecipe: _pandacss_types.SlotRecipeConfig<"text" | "body" | "root" | "header" | "loading", {}>;
 
 export { aireneBubbleSlotRecipe };

package/dist/recipes/airene-chat-input.d.mts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const aireneInputSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const aireneInputSlotRecipe: _pandacss_types.SlotRecipeConfig<"root" | "input" | "wrapper", {}>;
 
 export { aireneInputSlotRecipe };

package/dist/recipes/airene-chat-input.d.ts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const aireneInputSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const aireneInputSlotRecipe: _pandacss_types.SlotRecipeConfig<"root" | "input" | "wrapper", {}>;
 
 export { aireneInputSlotRecipe };

package/dist/recipes/autocomplete.d.mts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const autocompleteSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const autocompleteSlotRecipe: _pandacss_types.SlotRecipeConfig<"root" | "input" | "popoverContent" | "groupText" | "buttonAction" | "emptyText" | "contentLoading" | "infinityScroll", _pandacss_types.SlotRecipeVariantRecord<"root" | "input" | "popoverContent" | "groupText" | "buttonAction" | "emptyText" | "contentLoading" | "infinityScroll">>;
 
 export { autocompleteSlotRecipe };

package/dist/recipes/autocomplete.d.ts

@@ -1,5 +1,5 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const autocompleteSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const autocompleteSlotRecipe: _pandacss_types.SlotRecipeConfig<"root" | "input" | "popoverContent" | "groupText" | "buttonAction" | "emptyText" | "contentLoading" | "infinityScroll", _pandacss_types.SlotRecipeVariantRecord<"root" | "input" | "popoverContent" | "groupText" | "buttonAction" | "emptyText" | "contentLoading" | "infinityScroll">>;
 
 export { autocompleteSlotRecipe };