@mekari/pixel3-theme 0.0.7 → 0.0.8

package/dist/index.js

@@ -25,7 +25,7 @@ __export(theme_exports, {
 module.exports = __toCommonJS(theme_exports);
 
 // src/index.ts
-var import_dev45 = require("@pandacss/dev");
+var import_dev46 = require("@pandacss/dev");
 
 // src/breakpoints.ts
 var breakpoints = {
@@ -2869,9 +2869,135 @@ var broadcastSlotRecipe = (0, import_dev31.defineSlotRecipe)({
   }
 });
 
-// src/recipes/banner.ts
+// src/recipes/rich-text-editor.ts
 var import_dev32 = require("@pandacss/dev");
-var bannerSlotRecipe = (0, import_dev32.defineSlotRecipe)({
+var richTextEditorSlotRecipe = (0, import_dev32.defineSlotRecipe)({
+  className: "rich-text-editor",
+  jsx: ["MpRichTextEditor", "mp-rich-text-editor"],
+  slots: ["root", "toolbar", "area"],
+  base: {
+    root: {
+      backgroundColor: "var(--mp-rich-text-editor--background-color)",
+      transition: "all 250ms",
+      _hover: {
+        borderColor: "var(--mp-rich-text-editor--border-color-hover)"
+      },
+      _hasBorder: {
+        border: "1px solid",
+        borderRadius: "md",
+        borderColor: "var(--mp-rich-text-editor--border-color)",
+        boxShadow: "var(--mp-rich-text-editor--box-shadow)",
+        padding: "1"
+      }
+    },
+    toolbar: {
+      display: "flex",
+      gap: "1",
+      border: "1px solid",
+      borderColor: "gray.100",
+      borderRadius: "md",
+      backgroundColor: "background",
+      paddingY: "1",
+      paddingX: "3",
+      marginBottom: "1",
+      "& button": {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        color: "gray.600",
+        width: "28px",
+        height: "28px",
+        "&:hover": {
+          borderRadius: "md",
+          color: "blue.400",
+          backgroundColor: "blue.50"
+        },
+        "&.is-active": {
+          color: "blue.400"
+        }
+      },
+      "& button.mp-popover-list-item": {
+        padding: "0",
+        "&:hover": {
+          borderRadius: "0",
+          color: "blue.400",
+          backgroundColor: "transparent"
+        },
+        "& div": {
+          justifyContent: "center!",
+          alignItems: "center!"
+        }
+      },
+      "& button.mp-popover-list-item.text-sizing, button.text-sizing ": {
+        width: "auto",
+        height: "auto",
+        paddingX: "8px"
+      }
+    },
+    area: {
+      paddingLeft: "2",
+      paddingY: "2",
+      paddingRight: "3",
+      "& div.ProseMirror-focused": {
+        outline: "none"
+      },
+      "& div > p.is-editor-empty:first-child::before": {
+        color: "gray.400",
+        content: "attr(data-placeholder)",
+        float: "left",
+        height: "0",
+        pointeEvents: "none"
+      }
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+var RTEStyleProviderRecipe = (0, import_dev32.defineRecipe)({
+  className: "typography-style-provider",
+  jsx: ["MpTypographyStyleProvider", "mp-typography-style-provider"],
+  base: {
+    "& h1": {
+      textStyle: "h1"
+    },
+    "& h2": {
+      textStyle: "h2"
+    },
+    "& h3": {
+      textStyle: "h3"
+    },
+    "& p": {
+      textStyle: "body.md"
+    },
+    "& em": {
+      fontStyle: "italic"
+    },
+    "& b, strong": {
+      fontWeight: "bolder"
+    },
+    "& ol, ul": {
+      listStyle: "revert",
+      paddingLeft: "1.5em"
+    },
+    "& ol li": {
+      counterReset: "list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0",
+      counterIncrement: "list-num 1"
+    },
+    "& blockquote": {
+      borderLeft: "4px solid",
+      borderColor: "dark",
+      padding: "2"
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+
+// src/recipes/banner.ts
+var import_dev33 = require("@pandacss/dev");
+var bannerSlotRecipe = (0, import_dev33.defineSlotRecipe)({
   className: "banner",
   jsx: ["MpBanner", "mp-banner"],
   slots: ["root", "body"],
@@ -2912,7 +3038,7 @@ var bannerSlotRecipe = (0, import_dev32.defineSlotRecipe)({
     variant: "info"
   }
 });
-var bannerTitleRecipe = (0, import_dev32.defineRecipe)({
+var bannerTitleRecipe = (0, import_dev33.defineRecipe)({
   className: "banner-title",
   jsx: ["MpBannerTitle", "mp-banner-title"],
   base: {
@@ -2929,7 +3055,7 @@ var bannerTitleRecipe = (0, import_dev32.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerDescriptionRecipe = (0, import_dev32.defineRecipe)({
+var bannerDescriptionRecipe = (0, import_dev33.defineRecipe)({
   className: "banner-description",
   jsx: ["MpBannerDescription", "mp-banner-description"],
   base: {
@@ -2944,7 +3070,7 @@ var bannerDescriptionRecipe = (0, import_dev32.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerIconSlotRecipe = (0, import_dev32.defineSlotRecipe)({
+var bannerIconSlotRecipe = (0, import_dev33.defineSlotRecipe)({
   className: "banner-icon",
   jsx: ["MpBannerIcon", "mp-banner-icon"],
   slots: ["root", "custom"],
@@ -2967,7 +3093,7 @@ var bannerIconSlotRecipe = (0, import_dev32.defineSlotRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerLinkRecipe = (0, import_dev32.defineRecipe)({
+var bannerLinkRecipe = (0, import_dev33.defineRecipe)({
   className: "banner-link",
   jsx: ["MpBannerLink", "mp-banner-link"],
   base: {
@@ -2980,7 +3106,7 @@ var bannerLinkRecipe = (0, import_dev32.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerCloseButtonRecipe = (0, import_dev32.defineRecipe)({
+var bannerCloseButtonRecipe = (0, import_dev33.defineRecipe)({
   className: "banner-close-button",
   jsx: ["MpBannerCloseButton", "mp-banner-close-button"],
   base: {
@@ -3021,7 +3147,8 @@ var recipes = {
   bannerTitleRecipe,
   bannerDescriptionRecipe,
   bannerLinkRecipe,
-  bannerCloseButtonRecipe
+  bannerCloseButtonRecipe,
+  RTEStyleProviderRecipe
 };
 var slotRecipes = {
   accordion,
@@ -3047,12 +3174,13 @@ var slotRecipes = {
   bannerIconSlotRecipe,
   segmentedControlSlotRecipe,
   toastSlotRecipe,
-  broadcastSlotRecipe
+  broadcastSlotRecipe,
+  richTextEditorSlotRecipe
 };
 
 // src/text-styles.ts
-var import_dev33 = require("@pandacss/dev");
-var textStyles = (0, import_dev33.defineTextStyles)({
+var import_dev34 = require("@pandacss/dev");
+var textStyles = (0, import_dev34.defineTextStyles)({
   overline: { value: { fontSize: "xs", lineHeight: "xs" } },
   body: {
     sm: { value: { fontSize: "sm", lineHeight: "2xl" } },
@@ -3086,11 +3214,11 @@ var textStyles = (0, import_dev33.defineTextStyles)({
 });
 
 // src/tokens/index.ts
-var import_dev44 = require("@pandacss/dev");
+var import_dev45 = require("@pandacss/dev");
 
 // src/tokens/borders.ts
-var import_dev34 = require("@pandacss/dev");
-var borders = import_dev34.defineTokens.borders({
+var import_dev35 = require("@pandacss/dev");
+var borders = import_dev35.defineTokens.borders({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -3098,8 +3226,8 @@ var borders = import_dev34.defineTokens.borders({
 });
 
 // src/tokens/colors.ts
-var import_dev35 = require("@pandacss/dev");
-var colors = import_dev35.defineTokens.colors({
+var import_dev36 = require("@pandacss/dev");
+var colors = import_dev36.defineTokens.colors({
   currentcolor: {
     value: "currentcolor"
   },
@@ -3245,16 +3373,16 @@ var colors = import_dev35.defineTokens.colors({
 });
 
 // src/tokens/durations.ts
-var import_dev36 = require("@pandacss/dev");
-var durations = import_dev36.defineTokens.durations({
+var import_dev37 = require("@pandacss/dev");
+var durations = import_dev37.defineTokens.durations({
   slow: { value: "100ms" },
   normal: { value: "250ms" },
   fast: { value: "300ms" }
 });
 
 // src/tokens/opacity.ts
-var import_dev37 = require("@pandacss/dev");
-var opacity = import_dev37.defineTokens.opacity({
+var import_dev38 = require("@pandacss/dev");
+var opacity = import_dev38.defineTokens.opacity({
   0: { value: 0 },
   40: { value: 0.4 },
   60: { value: 0.6 },
@@ -3262,8 +3390,8 @@ var opacity = import_dev37.defineTokens.opacity({
 });
 
 // src/tokens/radii.ts
-var import_dev38 = require("@pandacss/dev");
-var radii = import_dev38.defineTokens.radii({
+var import_dev39 = require("@pandacss/dev");
+var radii = import_dev39.defineTokens.radii({
   none: { value: "0" },
   xs: { value: "0.125rem" },
   sm: { value: "0.25rem" },
@@ -3274,8 +3402,8 @@ var radii = import_dev38.defineTokens.radii({
 });
 
 // src/tokens/shadows.ts
-var import_dev39 = require("@pandacss/dev");
-var shadows = import_dev39.defineTokens.shadows({
+var import_dev40 = require("@pandacss/dev");
+var shadows = import_dev40.defineTokens.shadows({
   xs: {
     value: ["0px 0px 2px 0px rgba(0, 0, 0, 0.12)", "0px 2px 4px 0px rgba(0, 0, 0, 0.14)"]
   },
@@ -3315,8 +3443,8 @@ var shadows = import_dev39.defineTokens.shadows({
 });
 
 // src/tokens/sizes.ts
-var import_dev40 = require("@pandacss/dev");
-var sizes = import_dev40.defineTokens.sizes({
+var import_dev41 = require("@pandacss/dev");
+var sizes = import_dev41.defineTokens.sizes({
   0: { value: "0" },
   0.25: { value: "0.0625rem" },
   0.5: { value: "0.125rem" },
@@ -3345,8 +3473,8 @@ var sizes = import_dev40.defineTokens.sizes({
 });
 
 // src/tokens/spacing.ts
-var import_dev41 = require("@pandacss/dev");
-var spacing = import_dev41.defineTokens.spacing({
+var import_dev42 = require("@pandacss/dev");
+var spacing = import_dev42.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem" },
   1: { value: "0.25rem" },
@@ -3367,8 +3495,8 @@ var spacing = import_dev41.defineTokens.spacing({
 });
 
 // src/tokens/z-index.ts
-var import_dev42 = require("@pandacss/dev");
-var zIndex = import_dev42.defineTokens.zIndex({
+var import_dev43 = require("@pandacss/dev");
+var zIndex = import_dev43.defineTokens.zIndex({
   hide: { value: -1 },
   base: { value: 0 },
   docked: { value: 10 },
@@ -3380,8 +3508,8 @@ var zIndex = import_dev42.defineTokens.zIndex({
 });
 
 // src/tokens/typography.ts
-var import_dev43 = require("@pandacss/dev");
-var fonts = import_dev43.defineTokens.fonts({
+var import_dev44 = require("@pandacss/dev");
+var fonts = import_dev44.defineTokens.fonts({
   body: {
     value: '"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
   },
@@ -3389,7 +3517,7 @@ var fonts = import_dev43.defineTokens.fonts({
     value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'
   }
 });
-var fontSizes = import_dev43.defineTokens.fontSizes({
+var fontSizes = import_dev44.defineTokens.fontSizes({
   xs: { value: "0.625rem" },
   sm: { value: "0.75rem" },
   md: { value: "0.875rem" },
@@ -3397,12 +3525,12 @@ var fontSizes = import_dev43.defineTokens.fontSizes({
   xl: { value: "1.25rem" },
   "2xl": { value: "1.5rem" }
 });
-var fontWeights = import_dev43.defineTokens.fontWeights({
+var fontWeights = import_dev44.defineTokens.fontWeights({
   regular: { value: "400" },
   semiBold: { value: "600" },
   bold: { value: "800" }
 });
-var lineHeights = import_dev43.defineTokens.lineHeights({
+var lineHeights = import_dev44.defineTokens.lineHeights({
   xs: { value: 1.2 },
   sm: { value: 1.34 },
   md: { value: 1.4 },
@@ -3411,7 +3539,7 @@ var lineHeights = import_dev43.defineTokens.lineHeights({
   "2xl": { value: 1.67 },
   "3xl": { value: 1.71 }
 });
-var letterSpacings = import_dev43.defineTokens.letterSpacings({
+var letterSpacings = import_dev44.defineTokens.letterSpacings({
   tighter: { value: "-0.05em" },
   tight: { value: "-0.025em" },
   normal: { value: "0" },
@@ -3421,7 +3549,7 @@ var letterSpacings = import_dev43.defineTokens.letterSpacings({
 });
 
 // src/tokens/index.ts
-var tokens = (0, import_dev44.defineTokens)({
+var tokens = (0, import_dev45.defineTokens)({
   borders,
   colors,
   durations,
@@ -3439,7 +3567,7 @@ var tokens = (0, import_dev44.defineTokens)({
 });
 
 // src/index.ts
-var preset = (0, import_dev45.definePreset)({
+var preset = (0, import_dev46.definePreset)({
   theme: {
     extend: {
       breakpoints,

package/dist/index.mjs

@@ -2843,9 +2843,135 @@ var broadcastSlotRecipe = defineSlotRecipe18({
   }
 });
 
-// src/recipes/banner.ts
+// src/recipes/rich-text-editor.ts
 import { defineRecipe as defineRecipe12, defineSlotRecipe as defineSlotRecipe19 } from "@pandacss/dev";
-var bannerSlotRecipe = defineSlotRecipe19({
+var richTextEditorSlotRecipe = defineSlotRecipe19({
+  className: "rich-text-editor",
+  jsx: ["MpRichTextEditor", "mp-rich-text-editor"],
+  slots: ["root", "toolbar", "area"],
+  base: {
+    root: {
+      backgroundColor: "var(--mp-rich-text-editor--background-color)",
+      transition: "all 250ms",
+      _hover: {
+        borderColor: "var(--mp-rich-text-editor--border-color-hover)"
+      },
+      _hasBorder: {
+        border: "1px solid",
+        borderRadius: "md",
+        borderColor: "var(--mp-rich-text-editor--border-color)",
+        boxShadow: "var(--mp-rich-text-editor--box-shadow)",
+        padding: "1"
+      }
+    },
+    toolbar: {
+      display: "flex",
+      gap: "1",
+      border: "1px solid",
+      borderColor: "gray.100",
+      borderRadius: "md",
+      backgroundColor: "background",
+      paddingY: "1",
+      paddingX: "3",
+      marginBottom: "1",
+      "& button": {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        color: "gray.600",
+        width: "28px",
+        height: "28px",
+        "&:hover": {
+          borderRadius: "md",
+          color: "blue.400",
+          backgroundColor: "blue.50"
+        },
+        "&.is-active": {
+          color: "blue.400"
+        }
+      },
+      "& button.mp-popover-list-item": {
+        padding: "0",
+        "&:hover": {
+          borderRadius: "0",
+          color: "blue.400",
+          backgroundColor: "transparent"
+        },
+        "& div": {
+          justifyContent: "center!",
+          alignItems: "center!"
+        }
+      },
+      "& button.mp-popover-list-item.text-sizing, button.text-sizing ": {
+        width: "auto",
+        height: "auto",
+        paddingX: "8px"
+      }
+    },
+    area: {
+      paddingLeft: "2",
+      paddingY: "2",
+      paddingRight: "3",
+      "& div.ProseMirror-focused": {
+        outline: "none"
+      },
+      "& div > p.is-editor-empty:first-child::before": {
+        color: "gray.400",
+        content: "attr(data-placeholder)",
+        float: "left",
+        height: "0",
+        pointeEvents: "none"
+      }
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+var RTEStyleProviderRecipe = defineRecipe12({
+  className: "typography-style-provider",
+  jsx: ["MpTypographyStyleProvider", "mp-typography-style-provider"],
+  base: {
+    "& h1": {
+      textStyle: "h1"
+    },
+    "& h2": {
+      textStyle: "h2"
+    },
+    "& h3": {
+      textStyle: "h3"
+    },
+    "& p": {
+      textStyle: "body.md"
+    },
+    "& em": {
+      fontStyle: "italic"
+    },
+    "& b, strong": {
+      fontWeight: "bolder"
+    },
+    "& ol, ul": {
+      listStyle: "revert",
+      paddingLeft: "1.5em"
+    },
+    "& ol li": {
+      counterReset: "list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0",
+      counterIncrement: "list-num 1"
+    },
+    "& blockquote": {
+      borderLeft: "4px solid",
+      borderColor: "dark",
+      padding: "2"
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+
+// src/recipes/banner.ts
+import { defineRecipe as defineRecipe13, defineSlotRecipe as defineSlotRecipe20 } from "@pandacss/dev";
+var bannerSlotRecipe = defineSlotRecipe20({
   className: "banner",
   jsx: ["MpBanner", "mp-banner"],
   slots: ["root", "body"],
@@ -2886,7 +3012,7 @@ var bannerSlotRecipe = defineSlotRecipe19({
     variant: "info"
   }
 });
-var bannerTitleRecipe = defineRecipe12({
+var bannerTitleRecipe = defineRecipe13({
   className: "banner-title",
   jsx: ["MpBannerTitle", "mp-banner-title"],
   base: {
@@ -2903,7 +3029,7 @@ var bannerTitleRecipe = defineRecipe12({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerDescriptionRecipe = defineRecipe12({
+var bannerDescriptionRecipe = defineRecipe13({
   className: "banner-description",
   jsx: ["MpBannerDescription", "mp-banner-description"],
   base: {
@@ -2918,7 +3044,7 @@ var bannerDescriptionRecipe = defineRecipe12({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerIconSlotRecipe = defineSlotRecipe19({
+var bannerIconSlotRecipe = defineSlotRecipe20({
   className: "banner-icon",
   jsx: ["MpBannerIcon", "mp-banner-icon"],
   slots: ["root", "custom"],
@@ -2941,7 +3067,7 @@ var bannerIconSlotRecipe = defineSlotRecipe19({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerLinkRecipe = defineRecipe12({
+var bannerLinkRecipe = defineRecipe13({
   className: "banner-link",
   jsx: ["MpBannerLink", "mp-banner-link"],
   base: {
@@ -2954,7 +3080,7 @@ var bannerLinkRecipe = defineRecipe12({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerCloseButtonRecipe = defineRecipe12({
+var bannerCloseButtonRecipe = defineRecipe13({
   className: "banner-close-button",
   jsx: ["MpBannerCloseButton", "mp-banner-close-button"],
   base: {
@@ -2995,7 +3121,8 @@ var recipes = {
   bannerTitleRecipe,
   bannerDescriptionRecipe,
   bannerLinkRecipe,
-  bannerCloseButtonRecipe
+  bannerCloseButtonRecipe,
+  RTEStyleProviderRecipe
 };
 var slotRecipes = {
   accordion,
@@ -3021,7 +3148,8 @@ var slotRecipes = {
   bannerIconSlotRecipe,
   segmentedControlSlotRecipe,
   toastSlotRecipe,
-  broadcastSlotRecipe
+  broadcastSlotRecipe,
+  richTextEditorSlotRecipe
 };
 
 // src/text-styles.ts

package/dist/recipes/index.d.mts

@@ -22,6 +22,7 @@ declare const recipes: {
     bannerDescriptionRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     bannerLinkRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     bannerCloseButtonRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    RTEStyleProviderRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
     accordion: _pandacss_types.SlotRecipeConfig;
@@ -48,6 +49,7 @@ declare const slotRecipes: {
     segmentedControlSlotRecipe: _pandacss_types.SlotRecipeConfig;
     toastSlotRecipe: _pandacss_types.SlotRecipeConfig;
     broadcastSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    richTextEditorSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/recipes/index.d.ts

@@ -22,6 +22,7 @@ declare const recipes: {
     bannerDescriptionRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     bannerLinkRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     bannerCloseButtonRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    RTEStyleProviderRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
     accordion: _pandacss_types.SlotRecipeConfig;
@@ -48,6 +49,7 @@ declare const slotRecipes: {
     segmentedControlSlotRecipe: _pandacss_types.SlotRecipeConfig;
     toastSlotRecipe: _pandacss_types.SlotRecipeConfig;
     broadcastSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    richTextEditorSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/recipes/rich-text-editor.d.mts

@@ -0,0 +1,6 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const richTextEditorSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const RTEStyleProviderRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+
+export { RTEStyleProviderRecipe, richTextEditorSlotRecipe };

package/dist/recipes/rich-text-editor.d.ts

@@ -0,0 +1,6 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const richTextEditorSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const RTEStyleProviderRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+
+export { RTEStyleProviderRecipe, richTextEditorSlotRecipe };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-theme",
   "description": "Theme for mekari pixel 3",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [

package/src/recipes/index.ts

@@ -27,6 +27,7 @@ import { dropzoneSlotRecipe } from './dropzone'
 import { segmentedControlSlotRecipe } from './segmented-control'
 import { toastSlotRecipe } from './toast'
 import { broadcastSlotRecipe } from './broadcast'
+import { richTextEditorSlotRecipe, RTEStyleProviderRecipe } from './rich-text-editor'
 
 import {
   bannerSlotRecipe,
@@ -58,7 +59,8 @@ export const recipes = {
   bannerTitleRecipe,
   bannerDescriptionRecipe,
   bannerLinkRecipe,
-  bannerCloseButtonRecipe
+  bannerCloseButtonRecipe,
+  RTEStyleProviderRecipe
 }
 
 export const slotRecipes = {
@@ -85,5 +87,6 @@ export const slotRecipes = {
   bannerIconSlotRecipe,
   segmentedControlSlotRecipe,
   toastSlotRecipe,
-  broadcastSlotRecipe
+  broadcastSlotRecipe,
+  richTextEditorSlotRecipe
 }

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

@@ -0,0 +1,129 @@
+import { defineRecipe, defineSlotRecipe } from '@pandacss/dev'
+
+const richTextEditorSlotRecipe = defineSlotRecipe({
+  className: 'rich-text-editor',
+  jsx: ['MpRichTextEditor', 'mp-rich-text-editor'],
+  slots: ['root', 'toolbar', 'area'],
+  base: {
+    root: {
+      backgroundColor: 'var(--mp-rich-text-editor--background-color)',
+      transition: 'all 250ms',
+      _hover: {
+        borderColor: 'var(--mp-rich-text-editor--border-color-hover)'
+      },
+      _hasBorder: {
+        border: '1px solid',
+        borderRadius: 'md',
+        borderColor: 'var(--mp-rich-text-editor--border-color)',
+        boxShadow: 'var(--mp-rich-text-editor--box-shadow)',
+        padding: '1'
+      }
+    },
+    toolbar: {
+      display: 'flex',
+      gap: '1',
+      border: '1px solid',
+      borderColor: 'gray.100',
+      borderRadius: 'md',
+      backgroundColor: 'background',
+      paddingY: '1',
+      paddingX: '3',
+      marginBottom: '1',
+      '& button': {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: 'gray.600',
+        width: '28px',
+        height: '28px',
+        '&:hover': {
+          borderRadius: 'md',
+          color: 'blue.400',
+          backgroundColor: 'blue.50'
+        },
+        '&.is-active': {
+          color: 'blue.400'
+        }
+      },
+      '& button.mp-popover-list-item': {
+        padding: '0',
+        '&:hover': {
+          borderRadius: '0',
+          color: 'blue.400',
+          backgroundColor: 'transparent'
+        },
+        '& div': {
+          justifyContent: 'center!',
+          alignItems: 'center!'
+        }
+      },
+      '& button.mp-popover-list-item.text-sizing, button.text-sizing ': {
+        width: 'auto',
+        height: 'auto',
+        paddingX: '8px'
+      }
+    },
+    area: {
+      paddingLeft: '2',
+      paddingY: '2',
+      paddingRight: '3',
+      '& div.ProseMirror-focused': {
+        outline: 'none'
+      },
+      '& div > p.is-editor-empty:first-child::before': {
+        color: 'gray.400',
+        content: 'attr(data-placeholder)',
+        float: 'left',
+        height: '0',
+        pointeEvents: 'none'
+      }
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+const RTEStyleProviderRecipe = defineRecipe({
+  className: 'typography-style-provider',
+  jsx: ['MpTypographyStyleProvider', 'mp-typography-style-provider'],
+  base: {
+    '& h1': {
+      textStyle: 'h1'
+    },
+    '& h2': {
+      textStyle: 'h2'
+    },
+    '& h3': {
+      textStyle: 'h3'
+    },
+    '& p': {
+      textStyle: 'body.md'
+    },
+    '& em': {
+      fontStyle: 'italic'
+    },
+    '& b, strong': {
+      fontWeight: 'bolder'
+    },
+    '& ol, ul': {
+      listStyle: 'revert',
+      paddingLeft: '1.5em'
+    },
+    '& ol li': {
+      counterReset:
+        'list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0',
+      counterIncrement: 'list-num 1'
+    },
+    '& blockquote': {
+      borderLeft: '4px solid',
+      borderColor: 'dark',
+      padding: '2'
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+export { richTextEditorSlotRecipe, RTEStyleProviderRecipe }