@mekari/pixel3-theme 0.3.0-dev.2 → 0.3.0-dev.4

package/dist/index.js

@@ -25,7 +25,7 @@ __export(theme_exports, {
 module.exports = __toCommonJS(theme_exports);
 
 // src/index.ts
-var import_dev67 = require("@pandacss/dev");
+var import_dev69 = require("@pandacss/dev");
 
 // src/breakpoints.ts
 var breakpoints = {
@@ -3218,6 +3218,7 @@ var inputTagSlotRecipe = (0, import_dev25.defineSlotRecipe)({
     },
     trigger: {
       overflowY: "auto",
+      overflowX: "hidden",
       position: "relative",
       display: "flex",
       alignItems: "center",
@@ -3289,13 +3290,26 @@ var inputTagSlotRecipe = (0, import_dev25.defineSlotRecipe)({
       }
     },
     input: {
-      padding: "0 !important",
-      margin: "0 !important",
-      borderWidth: "0 !important",
+      appearance: "none",
+      outline: "none",
+      transition: "none",
+      width: "full",
+      textStyle: "label.md",
+      color: "dark",
+      _nextTheme: {
+        color: "text.default"
+      },
       _placeholder: {
         color: "gray.400",
         _nextTheme: {
-          borderColor: "text.placeholder"
+          color: "text.placeholder"
+        }
+      },
+      _disabled: {
+        cursor: "not-allowed",
+        color: "gray.400",
+        _nextTheme: {
+          color: "text.disabled"
         }
       }
     },
@@ -6059,7 +6073,7 @@ var textlinkRecipe = (0, import_dev43.defineRecipe)({
 // src/recipes/skeleton.ts
 var import_dev44 = require("@pandacss/dev");
 var skeletonRecipe = (0, import_dev44.defineRecipe)({
-  className: "skeleton",
+  className: "skeleton-component",
   jsx: ["MpSkeleton", "mp-skeleton"],
   base: {
     flexShrink: 0,
@@ -6135,6 +6149,133 @@ var scrollbarRecipe = (0, import_dev45.defineRecipe)({
   }
 });
 
+// src/recipes/airene-chat-input.ts
+var import_dev46 = require("@pandacss/dev");
+var aireneInputSlotRecipe = (0, import_dev46.defineSlotRecipe)({
+  className: "airene-chat-input",
+  jsx: ["MpAireneChatInput", "mp-airene-chat-input"],
+  slots: ["root", "wrapper", "input"],
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      alignItems: "flex-end",
+      gap: "2",
+      width: "full",
+      py: "xs",
+      px: "md",
+      rounded: "full",
+      borderWidth: "1px",
+      borderColor: "border.default",
+      backgroundColor: "background.neutral",
+      color: "text.default",
+      transitionDuration: "250ms",
+      transitionProperty: "border-color",
+      transitionTimingFunction: "linear",
+      _hover: {
+        borderColor: "border.focused"
+      },
+      _focusWithin: {
+        borderColor: "border.focused"
+      },
+      _invalid: {
+        borderColor: "border.danger",
+        _hover: {
+          borderColor: "border.danger"
+        }
+      },
+      _disabled: {
+        backgroundColor: "background.disabled",
+        borderColor: "border.disabled",
+        color: "text.disabled",
+        cursor: "not-allowed",
+        _hover: {
+          borderColor: "border.disabled"
+        }
+      }
+    },
+    wrapper: {
+      width: "full",
+      display: "flex",
+      flexDirection: "column",
+      gap: "2"
+    },
+    input: {
+      appearance: "none",
+      width: "full",
+      minHeight: "20px",
+      maxHeight: "136px",
+      outline: "none",
+      resize: "none",
+      caretColor: "border.selected",
+      fontSize: "md",
+      fontWeight: "regular",
+      lineHeight: "md",
+      scrollbarWidth: "none",
+      "-ms-overflow-style": "none",
+      "&::-webkit-scrollbar": {
+        display: "none"
+      },
+      "&::selection": {
+        background: "background.brand"
+      },
+      "&::-moz-selection": {
+        background: "background.brand"
+      }
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+
+// src/recipes/airene-chat-bubble.ts
+var import_dev47 = require("@pandacss/dev");
+var aireneBubbleSlotRecipe = (0, import_dev47.defineSlotRecipe)({
+  className: "airene-chat-bubble",
+  jsx: ["MpAireneChatBubble", "mp-airene-chat-bubble"],
+  slots: ["root", "header", "loading", "body", "text"],
+  base: {
+    root: {
+      position: "relative",
+      width: "full",
+      display: "flex",
+      flexDirection: "column",
+      gap: "xs",
+      py: "xs"
+    },
+    header: {
+      display: "flex",
+      alignItems: "center",
+      gap: "xs"
+    },
+    loading: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2xs"
+    },
+    body: {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      gap: "sm",
+      padding: "sm",
+      background: "lightPurple",
+      borderRadius: "lg",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "background.neutral.subtle"
+    },
+    text: {
+      display: "flex",
+      gap: "xs"
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+
 // src/recipes/index.ts
 var recipes = {
   buttonRecipe,
@@ -6212,12 +6353,14 @@ var slotRecipes = {
   colorPickerSlotRecipe,
   sliderSlotRecipe,
   tourSlotRecipe,
-  aireneButtonSlotRecipe
+  aireneButtonSlotRecipe,
+  aireneInputSlotRecipe,
+  aireneBubbleSlotRecipe
 };
 
 // src/text-styles.ts
-var import_dev46 = require("@pandacss/dev");
-var textStyles = (0, import_dev46.defineTextStyles)({
+var import_dev48 = require("@pandacss/dev");
+var textStyles = (0, import_dev48.defineTextStyles)({
   overline: {
     value: {
       fontFamily: "var(--font-inter)",
@@ -6260,11 +6403,11 @@ var textStyles = (0, import_dev46.defineTextStyles)({
 });
 
 // src/tokens/index.ts
-var import_dev57 = require("@pandacss/dev");
+var import_dev59 = require("@pandacss/dev");
 
 // src/tokens/borders.ts
-var import_dev47 = require("@pandacss/dev");
-var borderWidths = import_dev47.defineTokens.borderWidths({
+var import_dev49 = require("@pandacss/dev");
+var borderWidths = import_dev49.defineTokens.borderWidths({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -6272,8 +6415,8 @@ var borderWidths = import_dev47.defineTokens.borderWidths({
 });
 
 // src/tokens/colors.ts
-var import_dev48 = require("@pandacss/dev");
-var colors = import_dev48.defineTokens.colors({
+var import_dev50 = require("@pandacss/dev");
+var colors = import_dev50.defineTokens.colors({
   debug: { value: "blue" },
   currentcolor: { value: "currentcolor" },
   dark: { value: "#232933" },
@@ -6415,16 +6558,16 @@ var colors = import_dev48.defineTokens.colors({
 });
 
 // src/tokens/durations.ts
-var import_dev49 = require("@pandacss/dev");
-var durations = import_dev49.defineTokens.durations({
+var import_dev51 = require("@pandacss/dev");
+var durations = import_dev51.defineTokens.durations({
   slow: { value: "100ms" },
   normal: { value: "250ms" },
   fast: { value: "300ms" }
 });
 
 // src/tokens/opacity.ts
-var import_dev50 = require("@pandacss/dev");
-var opacity = import_dev50.defineTokens.opacity({
+var import_dev52 = require("@pandacss/dev");
+var opacity = import_dev52.defineTokens.opacity({
   0: { value: 0 },
   40: { value: 0.4 },
   60: { value: 0.6 },
@@ -6432,8 +6575,8 @@ var opacity = import_dev50.defineTokens.opacity({
 });
 
 // src/tokens/radii.ts
-var import_dev51 = require("@pandacss/dev");
-var radii = import_dev51.defineTokens.radii({
+var import_dev53 = require("@pandacss/dev");
+var radii = import_dev53.defineTokens.radii({
   none: { value: "0" },
   xs: { value: "0.125rem", description: "2px" },
   sm: { value: "0.25rem", description: "4px" },
@@ -6444,8 +6587,8 @@ var radii = import_dev51.defineTokens.radii({
 });
 
 // src/tokens/shadows.ts
-var import_dev52 = require("@pandacss/dev");
-var shadows = import_dev52.defineTokens.shadows({
+var import_dev54 = require("@pandacss/dev");
+var shadows = import_dev54.defineTokens.shadows({
   xs: {
     value: ["0px 0px 2px 0px rgba(0, 0, 0, 0.12)", "0px 2px 4px 0px rgba(0, 0, 0, 0.14)"]
   },
@@ -6485,8 +6628,8 @@ var shadows = import_dev52.defineTokens.shadows({
 });
 
 // src/tokens/sizes.ts
-var import_dev53 = require("@pandacss/dev");
-var sizes = import_dev53.defineTokens.sizes({
+var import_dev55 = require("@pandacss/dev");
+var sizes = import_dev55.defineTokens.sizes({
   0: { value: "0" },
   0.25: { value: "0.0625rem" },
   0.5: { value: "0.125rem" },
@@ -6515,8 +6658,8 @@ var sizes = import_dev53.defineTokens.sizes({
 });
 
 // src/tokens/spacing.ts
-var import_dev54 = require("@pandacss/dev");
-var spacing = import_dev54.defineTokens.spacing({
+var import_dev56 = require("@pandacss/dev");
+var spacing = import_dev56.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem", description: "2px" },
   1: { value: "0.25rem", description: "4px" },
@@ -6537,8 +6680,8 @@ var spacing = import_dev54.defineTokens.spacing({
 });
 
 // src/tokens/z-index.ts
-var import_dev55 = require("@pandacss/dev");
-var zIndex = import_dev55.defineTokens.zIndex({
+var import_dev57 = require("@pandacss/dev");
+var zIndex = import_dev57.defineTokens.zIndex({
   hide: { value: -1 },
   base: { value: 0 },
   docked: { value: 10 },
@@ -6550,8 +6693,8 @@ var zIndex = import_dev55.defineTokens.zIndex({
 });
 
 // src/tokens/typography.ts
-var import_dev56 = require("@pandacss/dev");
-var fonts = import_dev56.defineTokens.fonts({
+var import_dev58 = require("@pandacss/dev");
+var fonts = import_dev58.defineTokens.fonts({
   body: {
     value: '"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
   },
@@ -6559,7 +6702,7 @@ var fonts = import_dev56.defineTokens.fonts({
     value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'
   }
 });
-var fontSizes = import_dev56.defineTokens.fontSizes({
+var fontSizes = import_dev58.defineTokens.fontSizes({
   xs: { value: "0.625rem" },
   sm: { value: "0.75rem" },
   md: { value: "0.875rem" },
@@ -6567,12 +6710,12 @@ var fontSizes = import_dev56.defineTokens.fontSizes({
   xl: { value: "1.25rem" },
   "2xl": { value: "1.5rem" }
 });
-var fontWeights = import_dev56.defineTokens.fontWeights({
+var fontWeights = import_dev58.defineTokens.fontWeights({
   regular: { value: "400" },
   semiBold: { value: "600" },
   bold: { value: "800" }
 });
-var lineHeights = import_dev56.defineTokens.lineHeights({
+var lineHeights = import_dev58.defineTokens.lineHeights({
   xs: { value: 1.2 },
   sm: { value: 1.34 },
   md: { value: 1.43 },
@@ -6581,7 +6724,7 @@ var lineHeights = import_dev56.defineTokens.lineHeights({
   "2xl": { value: 1.67 },
   "3xl": { value: 1.71 }
 });
-var letterSpacings = import_dev56.defineTokens.letterSpacings({
+var letterSpacings = import_dev58.defineTokens.letterSpacings({
   tighter: { value: "-0.05em" },
   tight: { value: "-0.025em" },
   normal: { value: "0" },
@@ -6591,7 +6734,7 @@ var letterSpacings = import_dev56.defineTokens.letterSpacings({
 });
 
 // src/tokens/index.ts
-var tokens = (0, import_dev57.defineTokens)({
+var tokens = (0, import_dev59.defineTokens)({
   borderWidths,
   colors,
   durations,
@@ -6609,11 +6752,11 @@ var tokens = (0, import_dev57.defineTokens)({
 });
 
 // src/tokens-next/index.ts
-var import_dev63 = require("@pandacss/dev");
+var import_dev65 = require("@pandacss/dev");
 
 // src/tokens-next/borders.ts
-var import_dev58 = require("@pandacss/dev");
-var borderWidths2 = import_dev58.defineTokens.borderWidths({
+var import_dev60 = require("@pandacss/dev");
+var borderWidths2 = import_dev60.defineTokens.borderWidths({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -6623,12 +6766,15 @@ var borderWidths2 = import_dev58.defineTokens.borderWidths({
 });
 
 // src/tokens-next/colors.ts
-var import_dev59 = require("@pandacss/dev");
-var colors2 = import_dev59.defineTokens.colors({
+var import_dev61 = require("@pandacss/dev");
+var colors2 = import_dev61.defineTokens.colors({
   debug: { value: "red" },
   currentcolor: { value: "currentcolor" },
   white: { value: "#FFFFFF" },
   vibrantPurple: { value: "linear-gradient(98deg, #F8F9FB 0%, #B5A2EC 50.01%, #4B61DD 100%)" },
+  lightPurple: {
+    value: "radial-gradient(108.28% 139.29% at 0% 0%, {colors.background.brand} 0%, {colors.background.highlight} 100%)"
+  },
   dark: {
     "-100": {
       value: "#101214"
@@ -6796,8 +6942,8 @@ var colors2 = import_dev59.defineTokens.colors({
 });
 
 // src/tokens-next/radii.ts
-var import_dev60 = require("@pandacss/dev");
-var radii2 = import_dev60.defineTokens.radii({
+var import_dev62 = require("@pandacss/dev");
+var radii2 = import_dev62.defineTokens.radii({
   none: { value: "0" },
   sm: { value: "0.25rem", description: "4px" },
   md: { value: "0.375rem", description: "6px" },
@@ -6807,8 +6953,8 @@ var radii2 = import_dev60.defineTokens.radii({
 });
 
 // src/tokens-next/spacing.ts
-var import_dev61 = require("@pandacss/dev");
-var spacing2 = import_dev61.defineTokens.spacing({
+var import_dev63 = require("@pandacss/dev");
+var spacing2 = import_dev63.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem", description: "2px" },
   1: { value: "0.25rem", description: "4px" },
@@ -6824,8 +6970,8 @@ var spacing2 = import_dev61.defineTokens.spacing({
 });
 
 // src/tokens-next/shadows.ts
-var import_dev62 = require("@pandacss/dev");
-var shadows2 = import_dev62.defineTokens.shadows({
+var import_dev64 = require("@pandacss/dev");
+var shadows2 = import_dev64.defineTokens.shadows({
   xs: {
     value: [
       "0px 2px 4px 0px {colors.background.shadow}",
@@ -6865,7 +7011,7 @@ var shadows2 = import_dev62.defineTokens.shadows({
 });
 
 // src/tokens-next/index.ts
-var tokensNext = (0, import_dev63.defineTokens)({
+var tokensNext = (0, import_dev65.defineTokens)({
   borderWidths: borderWidths2,
   colors: colors2,
   durations,
@@ -6883,11 +7029,11 @@ var tokensNext = (0, import_dev63.defineTokens)({
 });
 
 // src/semanticTokens/index.ts
-var import_dev66 = require("@pandacss/dev");
+var import_dev68 = require("@pandacss/dev");
 
 // src/semanticTokens/colors.ts
-var import_dev64 = require("@pandacss/dev");
-var colors3 = import_dev64.defineSemanticTokens.colors({
+var import_dev66 = require("@pandacss/dev");
+var colors3 = import_dev66.defineSemanticTokens.colors({
   background: {
     surface: {
       value: {
@@ -7813,8 +7959,8 @@ var colors3 = import_dev64.defineSemanticTokens.colors({
 });
 
 // src/semanticTokens/spacing.ts
-var import_dev65 = require("@pandacss/dev");
-var spacing3 = import_dev65.defineSemanticTokens.spacing({
+var import_dev67 = require("@pandacss/dev");
+var spacing3 = import_dev67.defineSemanticTokens.spacing({
   "4xs": {
     value: {
       base: "0.125rem"
@@ -7873,7 +8019,7 @@ var spacing3 = import_dev65.defineSemanticTokens.spacing({
 });
 
 // src/semanticTokens/index.ts
-var semanticTokens = (0, import_dev66.defineSemanticTokens)({
+var semanticTokens = (0, import_dev68.defineSemanticTokens)({
   colors: colors3,
   spacing: spacing3
 });
@@ -7921,7 +8067,7 @@ var globalFontface = {
 };
 
 // src/index.ts
-var preset = (0, import_dev67.definePreset)({
+var preset = (0, import_dev69.definePreset)({
   name: "@mekari/pixel3-theme",
   // Main Theme
   theme: {

package/dist/index.mjs

@@ -3192,6 +3192,7 @@ var inputTagSlotRecipe = defineSlotRecipe14({
     },
     trigger: {
       overflowY: "auto",
+      overflowX: "hidden",
       position: "relative",
       display: "flex",
       alignItems: "center",
@@ -3263,13 +3264,26 @@ var inputTagSlotRecipe = defineSlotRecipe14({
       }
     },
     input: {
-      padding: "0 !important",
-      margin: "0 !important",
-      borderWidth: "0 !important",
+      appearance: "none",
+      outline: "none",
+      transition: "none",
+      width: "full",
+      textStyle: "label.md",
+      color: "dark",
+      _nextTheme: {
+        color: "text.default"
+      },
       _placeholder: {
         color: "gray.400",
         _nextTheme: {
-          borderColor: "text.placeholder"
+          color: "text.placeholder"
+        }
+      },
+      _disabled: {
+        cursor: "not-allowed",
+        color: "gray.400",
+        _nextTheme: {
+          color: "text.disabled"
         }
       }
     },
@@ -6033,7 +6047,7 @@ var textlinkRecipe = defineRecipe14({
 // src/recipes/skeleton.ts
 import { defineRecipe as defineRecipe15 } from "@pandacss/dev";
 var skeletonRecipe = defineRecipe15({
-  className: "skeleton",
+  className: "skeleton-component",
   jsx: ["MpSkeleton", "mp-skeleton"],
   base: {
     flexShrink: 0,
@@ -6109,6 +6123,133 @@ var scrollbarRecipe = defineRecipe16({
   }
 });
 
+// src/recipes/airene-chat-input.ts
+import { defineSlotRecipe as defineSlotRecipe32 } from "@pandacss/dev";
+var aireneInputSlotRecipe = defineSlotRecipe32({
+  className: "airene-chat-input",
+  jsx: ["MpAireneChatInput", "mp-airene-chat-input"],
+  slots: ["root", "wrapper", "input"],
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      alignItems: "flex-end",
+      gap: "2",
+      width: "full",
+      py: "xs",
+      px: "md",
+      rounded: "full",
+      borderWidth: "1px",
+      borderColor: "border.default",
+      backgroundColor: "background.neutral",
+      color: "text.default",
+      transitionDuration: "250ms",
+      transitionProperty: "border-color",
+      transitionTimingFunction: "linear",
+      _hover: {
+        borderColor: "border.focused"
+      },
+      _focusWithin: {
+        borderColor: "border.focused"
+      },
+      _invalid: {
+        borderColor: "border.danger",
+        _hover: {
+          borderColor: "border.danger"
+        }
+      },
+      _disabled: {
+        backgroundColor: "background.disabled",
+        borderColor: "border.disabled",
+        color: "text.disabled",
+        cursor: "not-allowed",
+        _hover: {
+          borderColor: "border.disabled"
+        }
+      }
+    },
+    wrapper: {
+      width: "full",
+      display: "flex",
+      flexDirection: "column",
+      gap: "2"
+    },
+    input: {
+      appearance: "none",
+      width: "full",
+      minHeight: "20px",
+      maxHeight: "136px",
+      outline: "none",
+      resize: "none",
+      caretColor: "border.selected",
+      fontSize: "md",
+      fontWeight: "regular",
+      lineHeight: "md",
+      scrollbarWidth: "none",
+      "-ms-overflow-style": "none",
+      "&::-webkit-scrollbar": {
+        display: "none"
+      },
+      "&::selection": {
+        background: "background.brand"
+      },
+      "&::-moz-selection": {
+        background: "background.brand"
+      }
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+
+// src/recipes/airene-chat-bubble.ts
+import { defineSlotRecipe as defineSlotRecipe33 } from "@pandacss/dev";
+var aireneBubbleSlotRecipe = defineSlotRecipe33({
+  className: "airene-chat-bubble",
+  jsx: ["MpAireneChatBubble", "mp-airene-chat-bubble"],
+  slots: ["root", "header", "loading", "body", "text"],
+  base: {
+    root: {
+      position: "relative",
+      width: "full",
+      display: "flex",
+      flexDirection: "column",
+      gap: "xs",
+      py: "xs"
+    },
+    header: {
+      display: "flex",
+      alignItems: "center",
+      gap: "xs"
+    },
+    loading: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2xs"
+    },
+    body: {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      gap: "sm",
+      padding: "sm",
+      background: "lightPurple",
+      borderRadius: "lg",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "background.neutral.subtle"
+    },
+    text: {
+      display: "flex",
+      gap: "xs"
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+
 // src/recipes/index.ts
 var recipes = {
   buttonRecipe,
@@ -6186,7 +6327,9 @@ var slotRecipes = {
   colorPickerSlotRecipe,
   sliderSlotRecipe,
   tourSlotRecipe,
-  aireneButtonSlotRecipe
+  aireneButtonSlotRecipe,
+  aireneInputSlotRecipe,
+  aireneBubbleSlotRecipe
 };
 
 // src/text-styles.ts
@@ -6603,6 +6746,9 @@ var colors2 = defineTokens13.colors({
   currentcolor: { value: "currentcolor" },
   white: { value: "#FFFFFF" },
   vibrantPurple: { value: "linear-gradient(98deg, #F8F9FB 0%, #B5A2EC 50.01%, #4B61DD 100%)" },
+  lightPurple: {
+    value: "radial-gradient(108.28% 139.29% at 0% 0%, {colors.background.brand} 0%, {colors.background.highlight} 100%)"
+  },
   dark: {
     "-100": {
       value: "#101214"

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

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

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

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

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

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

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

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

package/dist/recipes/index.d.mts

@@ -77,6 +77,8 @@ declare const slotRecipes: {
     sliderSlotRecipe: _pandacss_types.SlotRecipeConfig;
     tourSlotRecipe: _pandacss_types.SlotRecipeConfig;
     aireneButtonSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    aireneInputSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    aireneBubbleSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/recipes/index.d.ts

@@ -77,6 +77,8 @@ declare const slotRecipes: {
     sliderSlotRecipe: _pandacss_types.SlotRecipeConfig;
     tourSlotRecipe: _pandacss_types.SlotRecipeConfig;
     aireneButtonSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    aireneInputSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    aireneBubbleSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/tokens-next/colors.d.mts

@@ -11,6 +11,9 @@ declare const colors: {
     vibrantPurple: {
         value: string;
     };
+    lightPurple: {
+        value: string;
+    };
     dark: {
         '-100': {
             value: string;

package/dist/tokens-next/colors.d.ts

@@ -11,6 +11,9 @@ declare const colors: {
     vibrantPurple: {
         value: string;
     };
+    lightPurple: {
+        value: string;
+    };
     dark: {
         '-100': {
             value: string;

package/dist/tokens-next/index.d.mts

@@ -32,6 +32,9 @@ declare const tokensNext: {
         vibrantPurple: {
             value: string;
         };
+        lightPurple: {
+            value: string;
+        };
         dark: {
             '-100': {
                 value: string;

package/dist/tokens-next/index.d.ts

@@ -32,6 +32,9 @@ declare const tokensNext: {
         vibrantPurple: {
             value: string;
         };
+        lightPurple: {
+            value: string;
+        };
         dark: {
             '-100': {
                 value: string;

package/package.json

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

package/src/recipes/airene-chat-bubble.ts

@@ -0,0 +1,48 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const aireneBubbleSlotRecipe = defineSlotRecipe({
+  className: 'airene-chat-bubble',
+  jsx: ['MpAireneChatBubble', 'mp-airene-chat-bubble'],
+  slots: ['root', 'header', 'loading', 'body', 'text'],
+  base: {
+    root: {
+      position: 'relative',
+      width: 'full',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'xs',
+      py: 'xs'
+    },
+    header: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 'xs'
+    },
+    loading: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2xs'
+    },
+    body: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'sm',
+      padding: 'sm',
+      background: 'lightPurple',
+      borderRadius: 'lg',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'background.neutral.subtle'
+    },
+    text: {
+      display: 'flex',
+      gap: 'xs'
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+export { aireneBubbleSlotRecipe }

package/src/recipes/airene-chat-input.ts

@@ -0,0 +1,82 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const aireneInputSlotRecipe = defineSlotRecipe({
+  className: 'airene-chat-input',
+  jsx: ['MpAireneChatInput', 'mp-airene-chat-input'],
+  slots: ['root', 'wrapper', 'input'],
+  base: {
+    root: {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'flex-end',
+      gap: '2',
+      width: 'full',
+      py: 'xs',
+      px: 'md',
+      rounded: 'full',
+      borderWidth: '1px',
+      borderColor: 'border.default',
+      backgroundColor: 'background.neutral',
+      color: 'text.default',
+      transitionDuration: '250ms',
+      transitionProperty: 'border-color',
+      transitionTimingFunction: 'linear',
+
+      _hover: {
+        borderColor: 'border.focused'
+      },
+      _focusWithin: {
+        borderColor: 'border.focused'
+      },
+      _invalid: {
+        borderColor: 'border.danger',
+        _hover: {
+          borderColor: 'border.danger'
+        }
+      },
+      _disabled: {
+        backgroundColor: 'background.disabled',
+        borderColor: 'border.disabled',
+        color: 'text.disabled',
+        cursor: 'not-allowed',
+        _hover: {
+          borderColor: 'border.disabled'
+        }
+      }
+    },
+    wrapper: {
+      width: 'full',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2'
+    },
+    input: {
+      appearance: 'none',
+      width: 'full',
+      minHeight: '20px',
+      maxHeight: '136px',
+      outline: 'none',
+      resize: 'none',
+      caretColor: 'border.selected',
+      fontSize: 'md',
+      fontWeight: 'regular',
+      lineHeight: 'md',
+      scrollbarWidth: 'none',
+      '-ms-overflow-style': 'none',
+      '&::-webkit-scrollbar': {
+        display: 'none'
+      },
+      '&::selection': {
+        background: 'background.brand'
+      },
+      '&::-moz-selection': {
+        background: 'background.brand'
+      }
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+export { aireneInputSlotRecipe }

package/src/recipes/index.ts

@@ -67,6 +67,8 @@ import { tourSlotRecipe } from './tour'
 import { textlinkRecipe } from './textlink'
 import { skeletonRecipe } from './skeleton'
 import { scrollbarRecipe } from './scrollbar'
+import { aireneInputSlotRecipe } from './airene-chat-input'
+import { aireneBubbleSlotRecipe } from './airene-chat-bubble'
 
 export const recipes = {
   buttonRecipe,
@@ -145,5 +147,7 @@ export const slotRecipes = {
   colorPickerSlotRecipe,
   sliderSlotRecipe,
   tourSlotRecipe,
-  aireneButtonSlotRecipe
+  aireneButtonSlotRecipe,
+  aireneInputSlotRecipe,
+  aireneBubbleSlotRecipe
 }

package/src/recipes/input-tag.ts

@@ -23,6 +23,7 @@ const inputTagSlotRecipe = defineSlotRecipe({
     },
     trigger: {
       overflowY: 'auto',
+      overflowX: 'hidden',
       position: 'relative',
       display: 'flex',
       alignItems: 'center',
@@ -96,13 +97,29 @@ const inputTagSlotRecipe = defineSlotRecipe({
       }
     },
     input: {
-      padding: '0 !important',
-      margin: '0 !important',
-      borderWidth: '0 !important',
+      appearance: 'none',
+      outline: 'none',
+      transition: 'none',
+      width: 'full',
+      textStyle: 'label.md',
+      color: 'dark',
+      _nextTheme: {
+        color: 'text.default'
+      },
+
       _placeholder: {
         color: 'gray.400',
         _nextTheme: {
-          borderColor: 'text.placeholder'
+          color: 'text.placeholder'
+        }
+      },
+
+      _disabled: {
+        cursor: 'not-allowed',
+        color: 'gray.400',
+
+        _nextTheme: {
+          color: 'text.disabled'
         }
       }
     },

package/src/recipes/skeleton.ts

@@ -1,7 +1,7 @@
 import { defineRecipe } from '@pandacss/dev'
 
 const skeletonRecipe = defineRecipe({
-  className: 'skeleton',
+  className: 'skeleton-component',
   jsx: ['MpSkeleton', 'mp-skeleton'],
   base: {
     flexShrink: 0,

package/src/tokens-next/colors.ts

@@ -5,6 +5,10 @@ export const colors = defineTokens.colors({
   currentcolor: { value: 'currentcolor' },
   white: { value: '#FFFFFF' },
   vibrantPurple: { value: 'linear-gradient(98deg, #F8F9FB 0%, #B5A2EC 50.01%, #4B61DD 100%)' },
+  lightPurple: {
+    value:
+      'radial-gradient(108.28% 139.29% at 0% 0%, {colors.background.brand} 0%, {colors.background.highlight} 100%)'
+  },
   dark: {
     '-100': {
       value: '#101214'