@mekari/pixel3-theme 0.0.9 → 0.0.10-dev.0

package/dist/index.js

@@ -25,7 +25,7 @@ __export(theme_exports, {
 module.exports = __toCommonJS(theme_exports);
 
 // src/index.ts
-var import_dev48 = require("@pandacss/dev");
+var import_dev49 = require("@pandacss/dev");
 
 // src/breakpoints.ts
 var breakpoints = {
@@ -2953,7 +2953,7 @@ var richTextEditorSlotRecipe = (0, import_dev32.defineSlotRecipe)({
         content: "attr(data-placeholder)",
         float: "left",
         height: "0",
-        pointeEvents: "none"
+        pointerEvents: "none"
       }
     }
   },
@@ -3354,9 +3354,110 @@ var carouselSlotRecipe = (0, import_dev34.defineSlotRecipe)({
   }
 });
 
-// src/recipes/banner.ts
+// src/recipes/chart.ts
 var import_dev35 = require("@pandacss/dev");
-var bannerSlotRecipe = (0, import_dev35.defineSlotRecipe)({
+var chartSlotRecipe = (0, import_dev35.defineSlotRecipe)({
+  className: "chart",
+  jsx: ["MpChart", "mp-chart"],
+  slots: [
+    "root",
+    "chartHeader",
+    "chartWrapper",
+    "chartContainer",
+    "canvasContainer",
+    "chartLegend",
+    "legendWrapper",
+    "legendBox",
+    "chartTooltip",
+    "tooltipWrapper",
+    "tooltipRow",
+    "tooltipItem",
+    "tooltipBox"
+  ],
+  base: {
+    root: {
+      position: "relative"
+    },
+    chartHeader: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      width: "full",
+      marginBottom: "4"
+    },
+    chartWrapper: {
+      display: "flex"
+    },
+    chartContainer: {
+      position: "relative",
+      overflow: "auto",
+      display: "flex"
+    },
+    canvasContainer: {
+      flex: "none"
+    },
+    chartLegend: {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      alignItems: "center",
+      wrap: "wrap",
+      width: "full",
+      gap: "4",
+      py: "2",
+      px: "1"
+    },
+    legendWrapper: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      cursor: "pointer"
+    },
+    legendBox: {
+      borderRadius: "3px",
+      marginRight: "2"
+    },
+    chartTooltip: {
+      position: "absolute",
+      backgroundColor: "white",
+      border: "1px solid",
+      borderColor: "gray.400",
+      borderRadius: "md",
+      boxShadow: "sm",
+      zIndex: "popover",
+      pointerEvents: "none",
+      transition: "all 0.1s ease 0s"
+    },
+    tooltipWrapper: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2",
+      width: "200px",
+      padding: "4"
+    },
+    tooltipRow: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      width: "full"
+    },
+    tooltipItem: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2"
+    },
+    tooltipBox: {
+      width: "2",
+      height: "2",
+      borderRadius: "xs"
+    }
+  }
+});
+
+// src/recipes/banner.ts
+var import_dev36 = require("@pandacss/dev");
+var bannerSlotRecipe = (0, import_dev36.defineSlotRecipe)({
   className: "banner",
   jsx: ["MpBanner", "mp-banner"],
   slots: ["root", "body"],
@@ -3397,7 +3498,7 @@ var bannerSlotRecipe = (0, import_dev35.defineSlotRecipe)({
     variant: "info"
   }
 });
-var bannerTitleRecipe = (0, import_dev35.defineRecipe)({
+var bannerTitleRecipe = (0, import_dev36.defineRecipe)({
   className: "banner-title",
   jsx: ["MpBannerTitle", "mp-banner-title"],
   base: {
@@ -3414,7 +3515,7 @@ var bannerTitleRecipe = (0, import_dev35.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerDescriptionRecipe = (0, import_dev35.defineRecipe)({
+var bannerDescriptionRecipe = (0, import_dev36.defineRecipe)({
   className: "banner-description",
   jsx: ["MpBannerDescription", "mp-banner-description"],
   base: {
@@ -3429,7 +3530,7 @@ var bannerDescriptionRecipe = (0, import_dev35.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerIconSlotRecipe = (0, import_dev35.defineSlotRecipe)({
+var bannerIconSlotRecipe = (0, import_dev36.defineSlotRecipe)({
   className: "banner-icon",
   jsx: ["MpBannerIcon", "mp-banner-icon"],
   slots: ["root", "custom"],
@@ -3452,7 +3553,7 @@ var bannerIconSlotRecipe = (0, import_dev35.defineSlotRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerLinkRecipe = (0, import_dev35.defineRecipe)({
+var bannerLinkRecipe = (0, import_dev36.defineRecipe)({
   className: "banner-link",
   jsx: ["MpBannerLink", "mp-banner-link"],
   base: {
@@ -3465,7 +3566,7 @@ var bannerLinkRecipe = (0, import_dev35.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerCloseButtonRecipe = (0, import_dev35.defineRecipe)({
+var bannerCloseButtonRecipe = (0, import_dev36.defineRecipe)({
   className: "banner-close-button",
   jsx: ["MpBannerCloseButton", "mp-banner-close-button"],
   base: {
@@ -3545,12 +3646,13 @@ var slotRecipes = {
   tableMonthSlotRecipe,
   tableYearSlotRecipe,
   pinbarSlotRecipe,
-  carouselSlotRecipe
+  carouselSlotRecipe,
+  chartSlotRecipe
 };
 
 // src/text-styles.ts
-var import_dev36 = require("@pandacss/dev");
-var textStyles = (0, import_dev36.defineTextStyles)({
+var import_dev37 = require("@pandacss/dev");
+var textStyles = (0, import_dev37.defineTextStyles)({
   overline: { value: { fontSize: "xs", lineHeight: "xs" } },
   body: {
     sm: { value: { fontSize: "sm", lineHeight: "2xl" } },
@@ -3584,11 +3686,11 @@ var textStyles = (0, import_dev36.defineTextStyles)({
 });
 
 // src/tokens/index.ts
-var import_dev47 = require("@pandacss/dev");
+var import_dev48 = require("@pandacss/dev");
 
 // src/tokens/borders.ts
-var import_dev37 = require("@pandacss/dev");
-var borders = import_dev37.defineTokens.borders({
+var import_dev38 = require("@pandacss/dev");
+var borders = import_dev38.defineTokens.borders({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -3596,8 +3698,8 @@ var borders = import_dev37.defineTokens.borders({
 });
 
 // src/tokens/colors.ts
-var import_dev38 = require("@pandacss/dev");
-var colors = import_dev38.defineTokens.colors({
+var import_dev39 = require("@pandacss/dev");
+var colors = import_dev39.defineTokens.colors({
   currentcolor: {
     value: "currentcolor"
   },
@@ -3743,16 +3845,16 @@ var colors = import_dev38.defineTokens.colors({
 });
 
 // src/tokens/durations.ts
-var import_dev39 = require("@pandacss/dev");
-var durations = import_dev39.defineTokens.durations({
+var import_dev40 = require("@pandacss/dev");
+var durations = import_dev40.defineTokens.durations({
   slow: { value: "100ms" },
   normal: { value: "250ms" },
   fast: { value: "300ms" }
 });
 
 // src/tokens/opacity.ts
-var import_dev40 = require("@pandacss/dev");
-var opacity = import_dev40.defineTokens.opacity({
+var import_dev41 = require("@pandacss/dev");
+var opacity = import_dev41.defineTokens.opacity({
   0: { value: 0 },
   40: { value: 0.4 },
   60: { value: 0.6 },
@@ -3760,8 +3862,8 @@ var opacity = import_dev40.defineTokens.opacity({
 });
 
 // src/tokens/radii.ts
-var import_dev41 = require("@pandacss/dev");
-var radii = import_dev41.defineTokens.radii({
+var import_dev42 = require("@pandacss/dev");
+var radii = import_dev42.defineTokens.radii({
   none: { value: "0" },
   xs: { value: "0.125rem" },
   sm: { value: "0.25rem" },
@@ -3772,8 +3874,8 @@ var radii = import_dev41.defineTokens.radii({
 });
 
 // src/tokens/shadows.ts
-var import_dev42 = require("@pandacss/dev");
-var shadows = import_dev42.defineTokens.shadows({
+var import_dev43 = require("@pandacss/dev");
+var shadows = import_dev43.defineTokens.shadows({
   xs: {
     value: ["0px 0px 2px 0px rgba(0, 0, 0, 0.12)", "0px 2px 4px 0px rgba(0, 0, 0, 0.14)"]
   },
@@ -3813,8 +3915,8 @@ var shadows = import_dev42.defineTokens.shadows({
 });
 
 // src/tokens/sizes.ts
-var import_dev43 = require("@pandacss/dev");
-var sizes = import_dev43.defineTokens.sizes({
+var import_dev44 = require("@pandacss/dev");
+var sizes = import_dev44.defineTokens.sizes({
   0: { value: "0" },
   0.25: { value: "0.0625rem" },
   0.5: { value: "0.125rem" },
@@ -3843,8 +3945,8 @@ var sizes = import_dev43.defineTokens.sizes({
 });
 
 // src/tokens/spacing.ts
-var import_dev44 = require("@pandacss/dev");
-var spacing = import_dev44.defineTokens.spacing({
+var import_dev45 = require("@pandacss/dev");
+var spacing = import_dev45.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem" },
   1: { value: "0.25rem" },
@@ -3865,8 +3967,8 @@ var spacing = import_dev44.defineTokens.spacing({
 });
 
 // src/tokens/z-index.ts
-var import_dev45 = require("@pandacss/dev");
-var zIndex = import_dev45.defineTokens.zIndex({
+var import_dev46 = require("@pandacss/dev");
+var zIndex = import_dev46.defineTokens.zIndex({
   hide: { value: -1 },
   base: { value: 0 },
   docked: { value: 10 },
@@ -3878,8 +3980,8 @@ var zIndex = import_dev45.defineTokens.zIndex({
 });
 
 // src/tokens/typography.ts
-var import_dev46 = require("@pandacss/dev");
-var fonts = import_dev46.defineTokens.fonts({
+var import_dev47 = require("@pandacss/dev");
+var fonts = import_dev47.defineTokens.fonts({
   body: {
     value: '"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
   },
@@ -3887,7 +3989,7 @@ var fonts = import_dev46.defineTokens.fonts({
     value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'
   }
 });
-var fontSizes = import_dev46.defineTokens.fontSizes({
+var fontSizes = import_dev47.defineTokens.fontSizes({
   xs: { value: "0.625rem" },
   sm: { value: "0.75rem" },
   md: { value: "0.875rem" },
@@ -3895,12 +3997,12 @@ var fontSizes = import_dev46.defineTokens.fontSizes({
   xl: { value: "1.25rem" },
   "2xl": { value: "1.5rem" }
 });
-var fontWeights = import_dev46.defineTokens.fontWeights({
+var fontWeights = import_dev47.defineTokens.fontWeights({
   regular: { value: "400" },
   semiBold: { value: "600" },
   bold: { value: "800" }
 });
-var lineHeights = import_dev46.defineTokens.lineHeights({
+var lineHeights = import_dev47.defineTokens.lineHeights({
   xs: { value: 1.2 },
   sm: { value: 1.34 },
   md: { value: 1.4 },
@@ -3909,7 +4011,7 @@ var lineHeights = import_dev46.defineTokens.lineHeights({
   "2xl": { value: 1.67 },
   "3xl": { value: 1.71 }
 });
-var letterSpacings = import_dev46.defineTokens.letterSpacings({
+var letterSpacings = import_dev47.defineTokens.letterSpacings({
   tighter: { value: "-0.05em" },
   tight: { value: "-0.025em" },
   normal: { value: "0" },
@@ -3919,7 +4021,7 @@ var letterSpacings = import_dev46.defineTokens.letterSpacings({
 });
 
 // src/tokens/index.ts
-var tokens = (0, import_dev47.defineTokens)({
+var tokens = (0, import_dev48.defineTokens)({
   borders,
   colors,
   durations,
@@ -3937,7 +4039,7 @@ var tokens = (0, import_dev47.defineTokens)({
 });
 
 // src/index.ts
-var preset = (0, import_dev48.definePreset)({
+var preset = (0, import_dev49.definePreset)({
   theme: {
     extend: {
       breakpoints,

package/dist/index.mjs

@@ -2927,7 +2927,7 @@ var richTextEditorSlotRecipe = defineSlotRecipe19({
         content: "attr(data-placeholder)",
         float: "left",
         height: "0",
-        pointeEvents: "none"
+        pointerEvents: "none"
       }
     }
   },
@@ -3328,9 +3328,110 @@ var carouselSlotRecipe = defineSlotRecipe21({
   }
 });
 
+// src/recipes/chart.ts
+import { defineSlotRecipe as defineSlotRecipe22 } from "@pandacss/dev";
+var chartSlotRecipe = defineSlotRecipe22({
+  className: "chart",
+  jsx: ["MpChart", "mp-chart"],
+  slots: [
+    "root",
+    "chartHeader",
+    "chartWrapper",
+    "chartContainer",
+    "canvasContainer",
+    "chartLegend",
+    "legendWrapper",
+    "legendBox",
+    "chartTooltip",
+    "tooltipWrapper",
+    "tooltipRow",
+    "tooltipItem",
+    "tooltipBox"
+  ],
+  base: {
+    root: {
+      position: "relative"
+    },
+    chartHeader: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      width: "full",
+      marginBottom: "4"
+    },
+    chartWrapper: {
+      display: "flex"
+    },
+    chartContainer: {
+      position: "relative",
+      overflow: "auto",
+      display: "flex"
+    },
+    canvasContainer: {
+      flex: "none"
+    },
+    chartLegend: {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      alignItems: "center",
+      wrap: "wrap",
+      width: "full",
+      gap: "4",
+      py: "2",
+      px: "1"
+    },
+    legendWrapper: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      cursor: "pointer"
+    },
+    legendBox: {
+      borderRadius: "3px",
+      marginRight: "2"
+    },
+    chartTooltip: {
+      position: "absolute",
+      backgroundColor: "white",
+      border: "1px solid",
+      borderColor: "gray.400",
+      borderRadius: "md",
+      boxShadow: "sm",
+      zIndex: "popover",
+      pointerEvents: "none",
+      transition: "all 0.1s ease 0s"
+    },
+    tooltipWrapper: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2",
+      width: "200px",
+      padding: "4"
+    },
+    tooltipRow: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      width: "full"
+    },
+    tooltipItem: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2"
+    },
+    tooltipBox: {
+      width: "2",
+      height: "2",
+      borderRadius: "xs"
+    }
+  }
+});
+
 // src/recipes/banner.ts
-import { defineRecipe as defineRecipe14, defineSlotRecipe as defineSlotRecipe22 } from "@pandacss/dev";
-var bannerSlotRecipe = defineSlotRecipe22({
+import { defineRecipe as defineRecipe14, defineSlotRecipe as defineSlotRecipe23 } from "@pandacss/dev";
+var bannerSlotRecipe = defineSlotRecipe23({
   className: "banner",
   jsx: ["MpBanner", "mp-banner"],
   slots: ["root", "body"],
@@ -3403,7 +3504,7 @@ var bannerDescriptionRecipe = defineRecipe14({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerIconSlotRecipe = defineSlotRecipe22({
+var bannerIconSlotRecipe = defineSlotRecipe23({
   className: "banner-icon",
   jsx: ["MpBannerIcon", "mp-banner-icon"],
   slots: ["root", "custom"],
@@ -3519,7 +3620,8 @@ var slotRecipes = {
   tableMonthSlotRecipe,
   tableYearSlotRecipe,
   pinbarSlotRecipe,
-  carouselSlotRecipe
+  carouselSlotRecipe,
+  chartSlotRecipe
 };
 
 // src/text-styles.ts

package/dist/recipes/chart.d.mts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const chartSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { chartSlotRecipe };

package/dist/recipes/chart.d.ts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const chartSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { chartSlotRecipe };

package/dist/recipes/index.d.mts

@@ -61,6 +61,7 @@ declare const slotRecipes: {
     tableYearSlotRecipe: _pandacss_types.SlotRecipeConfig;
     pinbarSlotRecipe: _pandacss_types.SlotRecipeConfig;
     carouselSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    chartSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/recipes/index.d.ts

@@ -61,6 +61,7 @@ declare const slotRecipes: {
     tableYearSlotRecipe: _pandacss_types.SlotRecipeConfig;
     pinbarSlotRecipe: _pandacss_types.SlotRecipeConfig;
     carouselSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    chartSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-theme",
   "description": "Theme for mekari pixel 3",
-  "version": "0.0.9",
+  "version": "0.0.10-dev.0",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [
@@ -9,13 +9,13 @@
     "src"
   ],
   "dependencies": {
-    "@pandacss/dev": "^0.29.1"
+    "@pandacss/dev": "^0.39.2"
   },
   "peerDependencies": {
     "vue": "^3.4.9"
   },
   "devDependencies": {
-    "@pandacss/types": "^0.29.1",
+    "@pandacss/types": "^0.39.2",
     "vue": "^3.4.9"
   },
   "publishConfig": {

package/src/recipes/chart.ts

@@ -0,0 +1,102 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const chartSlotRecipe = defineSlotRecipe({
+  className: 'chart',
+  jsx: ['MpChart', 'mp-chart'],
+  slots: [
+    'root',
+    'chartHeader',
+    'chartWrapper',
+    'chartContainer',
+    'canvasContainer',
+    'chartLegend',
+    'legendWrapper',
+    'legendBox',
+    'chartTooltip',
+    'tooltipWrapper',
+    'tooltipRow',
+    'tooltipItem',
+    'tooltipBox'
+  ],
+  base: {
+    root: {
+      position: 'relative'
+    },
+    chartHeader: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      width: 'full',
+      marginBottom: '4'
+    },
+    chartWrapper: {
+      display: 'flex'
+    },
+    chartContainer: {
+      position: 'relative',
+      overflow: 'auto',
+      display: 'flex'
+    },
+    canvasContainer: {
+      flex: 'none'
+    },
+    chartLegend: {
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      wrap: 'wrap',
+      width: 'full',
+      gap: '4',
+      py: '2',
+      px: '1'
+    },
+    legendWrapper: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      cursor: 'pointer'
+    },
+    legendBox: {
+      borderRadius: '3px',
+      marginRight: '2'
+    },
+    chartTooltip: {
+      position: 'absolute',
+      backgroundColor: 'white',
+      border: '1px solid',
+      borderColor: 'gray.400',
+      borderRadius: 'md',
+      boxShadow: 'sm',
+      zIndex: 'popover',
+      pointerEvents: 'none',
+      transition: 'all 0.1s ease 0s'
+    },
+    tooltipWrapper: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2',
+      width: '200px',
+      padding: '4'
+    },
+    tooltipRow: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      width: 'full'
+    },
+    tooltipItem: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '2'
+    },
+    tooltipBox: {
+      width: '2',
+      height: '2',
+      borderRadius: 'xs'
+    }
+  }
+})
+
+export { chartSlotRecipe }

package/src/recipes/index.ts

@@ -41,6 +41,7 @@ import {
   pinbarSlotRecipe
 } from './date-picker'
 import { carouselSlotRecipe } from './carousel'
+import { chartSlotRecipe } from './chart'
 
 import {
   bannerSlotRecipe,
@@ -112,5 +113,6 @@ export const slotRecipes = {
   tableMonthSlotRecipe,
   tableYearSlotRecipe,
   pinbarSlotRecipe,
-  carouselSlotRecipe
+  carouselSlotRecipe,
+  chartSlotRecipe
 }

package/src/recipes/rich-text-editor.ts

@@ -75,7 +75,7 @@ const richTextEditorSlotRecipe = defineSlotRecipe({
         content: 'attr(data-placeholder)',
         float: 'left',
         height: '0',
-        pointeEvents: 'none'
+        pointerEvents: 'none'
       }
     }
   },