@mekari/pixel3-theme 0.3.0-dev.1 → 0.3.0-dev.3

package/dist/index.js

@@ -25,7 +25,7 @@ __export(theme_exports, {
 module.exports = __toCommonJS(theme_exports);
 
 // src/index.ts
-var import_dev66 = require("@pandacss/dev");
+var import_dev68 = 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,
@@ -6114,6 +6128,107 @@ var skeletonRecipe = (0, import_dev44.defineRecipe)({
   }
 });
 
+// src/recipes/scrollbar.ts
+var import_dev45 = require("@pandacss/dev");
+var scrollbarRecipe = (0, import_dev45.defineRecipe)({
+  className: "skeleton",
+  jsx: ["MpScrollbar", "mp-scrollbar"],
+  base: {
+    "& .os-scrollbar": {
+      "--os-handle-bg": "colors.gray.100!",
+      "--os-handle-bg-hover": "colors.gray.400!",
+      "--os-handle-bg-active": "colors.gray.400!"
+    },
+    _nextTheme: {
+      "& .os-scrollbar": {
+        "--os-handle-bg": "colors.icon.subtle!",
+        "--os-handle-bg-hover": "colors.icon.default!",
+        "--os-handle-bg-active": "colors.icon.default!"
+      }
+    }
+  }
+});
+
+// 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/index.ts
 var recipes = {
   buttonRecipe,
@@ -6143,7 +6258,8 @@ var recipes = {
   yearItemRecipe,
   timeItemRecipe,
   textlinkRecipe,
-  skeletonRecipe
+  skeletonRecipe,
+  scrollbarRecipe
 };
 var slotRecipes = {
   accordionSlotRecipe,
@@ -6190,12 +6306,13 @@ var slotRecipes = {
   colorPickerSlotRecipe,
   sliderSlotRecipe,
   tourSlotRecipe,
-  aireneButtonSlotRecipe
+  aireneButtonSlotRecipe,
+  aireneInputSlotRecipe
 };
 
 // src/text-styles.ts
-var import_dev45 = require("@pandacss/dev");
-var textStyles = (0, import_dev45.defineTextStyles)({
+var import_dev47 = require("@pandacss/dev");
+var textStyles = (0, import_dev47.defineTextStyles)({
   overline: {
     value: {
       fontFamily: "var(--font-inter)",
@@ -6238,11 +6355,11 @@ var textStyles = (0, import_dev45.defineTextStyles)({
 });
 
 // src/tokens/index.ts
-var import_dev56 = require("@pandacss/dev");
+var import_dev58 = require("@pandacss/dev");
 
 // src/tokens/borders.ts
-var import_dev46 = require("@pandacss/dev");
-var borderWidths = import_dev46.defineTokens.borderWidths({
+var import_dev48 = require("@pandacss/dev");
+var borderWidths = import_dev48.defineTokens.borderWidths({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -6250,8 +6367,8 @@ var borderWidths = import_dev46.defineTokens.borderWidths({
 });
 
 // src/tokens/colors.ts
-var import_dev47 = require("@pandacss/dev");
-var colors = import_dev47.defineTokens.colors({
+var import_dev49 = require("@pandacss/dev");
+var colors = import_dev49.defineTokens.colors({
   debug: { value: "blue" },
   currentcolor: { value: "currentcolor" },
   dark: { value: "#232933" },
@@ -6393,16 +6510,16 @@ var colors = import_dev47.defineTokens.colors({
 });
 
 // src/tokens/durations.ts
-var import_dev48 = require("@pandacss/dev");
-var durations = import_dev48.defineTokens.durations({
+var import_dev50 = require("@pandacss/dev");
+var durations = import_dev50.defineTokens.durations({
   slow: { value: "100ms" },
   normal: { value: "250ms" },
   fast: { value: "300ms" }
 });
 
 // src/tokens/opacity.ts
-var import_dev49 = require("@pandacss/dev");
-var opacity = import_dev49.defineTokens.opacity({
+var import_dev51 = require("@pandacss/dev");
+var opacity = import_dev51.defineTokens.opacity({
   0: { value: 0 },
   40: { value: 0.4 },
   60: { value: 0.6 },
@@ -6410,8 +6527,8 @@ var opacity = import_dev49.defineTokens.opacity({
 });
 
 // src/tokens/radii.ts
-var import_dev50 = require("@pandacss/dev");
-var radii = import_dev50.defineTokens.radii({
+var import_dev52 = require("@pandacss/dev");
+var radii = import_dev52.defineTokens.radii({
   none: { value: "0" },
   xs: { value: "0.125rem", description: "2px" },
   sm: { value: "0.25rem", description: "4px" },
@@ -6422,8 +6539,8 @@ var radii = import_dev50.defineTokens.radii({
 });
 
 // src/tokens/shadows.ts
-var import_dev51 = require("@pandacss/dev");
-var shadows = import_dev51.defineTokens.shadows({
+var import_dev53 = require("@pandacss/dev");
+var shadows = import_dev53.defineTokens.shadows({
   xs: {
     value: ["0px 0px 2px 0px rgba(0, 0, 0, 0.12)", "0px 2px 4px 0px rgba(0, 0, 0, 0.14)"]
   },
@@ -6463,8 +6580,8 @@ var shadows = import_dev51.defineTokens.shadows({
 });
 
 // src/tokens/sizes.ts
-var import_dev52 = require("@pandacss/dev");
-var sizes = import_dev52.defineTokens.sizes({
+var import_dev54 = require("@pandacss/dev");
+var sizes = import_dev54.defineTokens.sizes({
   0: { value: "0" },
   0.25: { value: "0.0625rem" },
   0.5: { value: "0.125rem" },
@@ -6493,8 +6610,8 @@ var sizes = import_dev52.defineTokens.sizes({
 });
 
 // src/tokens/spacing.ts
-var import_dev53 = require("@pandacss/dev");
-var spacing = import_dev53.defineTokens.spacing({
+var import_dev55 = require("@pandacss/dev");
+var spacing = import_dev55.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem", description: "2px" },
   1: { value: "0.25rem", description: "4px" },
@@ -6515,8 +6632,8 @@ var spacing = import_dev53.defineTokens.spacing({
 });
 
 // src/tokens/z-index.ts
-var import_dev54 = require("@pandacss/dev");
-var zIndex = import_dev54.defineTokens.zIndex({
+var import_dev56 = require("@pandacss/dev");
+var zIndex = import_dev56.defineTokens.zIndex({
   hide: { value: -1 },
   base: { value: 0 },
   docked: { value: 10 },
@@ -6528,8 +6645,8 @@ var zIndex = import_dev54.defineTokens.zIndex({
 });
 
 // src/tokens/typography.ts
-var import_dev55 = require("@pandacss/dev");
-var fonts = import_dev55.defineTokens.fonts({
+var import_dev57 = require("@pandacss/dev");
+var fonts = import_dev57.defineTokens.fonts({
   body: {
     value: '"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
   },
@@ -6537,7 +6654,7 @@ var fonts = import_dev55.defineTokens.fonts({
     value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'
   }
 });
-var fontSizes = import_dev55.defineTokens.fontSizes({
+var fontSizes = import_dev57.defineTokens.fontSizes({
   xs: { value: "0.625rem" },
   sm: { value: "0.75rem" },
   md: { value: "0.875rem" },
@@ -6545,12 +6662,12 @@ var fontSizes = import_dev55.defineTokens.fontSizes({
   xl: { value: "1.25rem" },
   "2xl": { value: "1.5rem" }
 });
-var fontWeights = import_dev55.defineTokens.fontWeights({
+var fontWeights = import_dev57.defineTokens.fontWeights({
   regular: { value: "400" },
   semiBold: { value: "600" },
   bold: { value: "800" }
 });
-var lineHeights = import_dev55.defineTokens.lineHeights({
+var lineHeights = import_dev57.defineTokens.lineHeights({
   xs: { value: 1.2 },
   sm: { value: 1.34 },
   md: { value: 1.43 },
@@ -6559,7 +6676,7 @@ var lineHeights = import_dev55.defineTokens.lineHeights({
   "2xl": { value: 1.67 },
   "3xl": { value: 1.71 }
 });
-var letterSpacings = import_dev55.defineTokens.letterSpacings({
+var letterSpacings = import_dev57.defineTokens.letterSpacings({
   tighter: { value: "-0.05em" },
   tight: { value: "-0.025em" },
   normal: { value: "0" },
@@ -6569,7 +6686,7 @@ var letterSpacings = import_dev55.defineTokens.letterSpacings({
 });
 
 // src/tokens/index.ts
-var tokens = (0, import_dev56.defineTokens)({
+var tokens = (0, import_dev58.defineTokens)({
   borderWidths,
   colors,
   durations,
@@ -6587,11 +6704,11 @@ var tokens = (0, import_dev56.defineTokens)({
 });
 
 // src/tokens-next/index.ts
-var import_dev62 = require("@pandacss/dev");
+var import_dev64 = require("@pandacss/dev");
 
 // src/tokens-next/borders.ts
-var import_dev57 = require("@pandacss/dev");
-var borderWidths2 = import_dev57.defineTokens.borderWidths({
+var import_dev59 = require("@pandacss/dev");
+var borderWidths2 = import_dev59.defineTokens.borderWidths({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -6601,8 +6718,8 @@ var borderWidths2 = import_dev57.defineTokens.borderWidths({
 });
 
 // src/tokens-next/colors.ts
-var import_dev58 = require("@pandacss/dev");
-var colors2 = import_dev58.defineTokens.colors({
+var import_dev60 = require("@pandacss/dev");
+var colors2 = import_dev60.defineTokens.colors({
   debug: { value: "red" },
   currentcolor: { value: "currentcolor" },
   white: { value: "#FFFFFF" },
@@ -6774,8 +6891,8 @@ var colors2 = import_dev58.defineTokens.colors({
 });
 
 // src/tokens-next/radii.ts
-var import_dev59 = require("@pandacss/dev");
-var radii2 = import_dev59.defineTokens.radii({
+var import_dev61 = require("@pandacss/dev");
+var radii2 = import_dev61.defineTokens.radii({
   none: { value: "0" },
   sm: { value: "0.25rem", description: "4px" },
   md: { value: "0.375rem", description: "6px" },
@@ -6785,8 +6902,8 @@ var radii2 = import_dev59.defineTokens.radii({
 });
 
 // src/tokens-next/spacing.ts
-var import_dev60 = require("@pandacss/dev");
-var spacing2 = import_dev60.defineTokens.spacing({
+var import_dev62 = require("@pandacss/dev");
+var spacing2 = import_dev62.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem", description: "2px" },
   1: { value: "0.25rem", description: "4px" },
@@ -6802,8 +6919,8 @@ var spacing2 = import_dev60.defineTokens.spacing({
 });
 
 // src/tokens-next/shadows.ts
-var import_dev61 = require("@pandacss/dev");
-var shadows2 = import_dev61.defineTokens.shadows({
+var import_dev63 = require("@pandacss/dev");
+var shadows2 = import_dev63.defineTokens.shadows({
   xs: {
     value: [
       "0px 2px 4px 0px {colors.background.shadow}",
@@ -6843,7 +6960,7 @@ var shadows2 = import_dev61.defineTokens.shadows({
 });
 
 // src/tokens-next/index.ts
-var tokensNext = (0, import_dev62.defineTokens)({
+var tokensNext = (0, import_dev64.defineTokens)({
   borderWidths: borderWidths2,
   colors: colors2,
   durations,
@@ -6861,11 +6978,11 @@ var tokensNext = (0, import_dev62.defineTokens)({
 });
 
 // src/semanticTokens/index.ts
-var import_dev65 = require("@pandacss/dev");
+var import_dev67 = require("@pandacss/dev");
 
 // src/semanticTokens/colors.ts
-var import_dev63 = require("@pandacss/dev");
-var colors3 = import_dev63.defineSemanticTokens.colors({
+var import_dev65 = require("@pandacss/dev");
+var colors3 = import_dev65.defineSemanticTokens.colors({
   background: {
     surface: {
       value: {
@@ -7791,8 +7908,8 @@ var colors3 = import_dev63.defineSemanticTokens.colors({
 });
 
 // src/semanticTokens/spacing.ts
-var import_dev64 = require("@pandacss/dev");
-var spacing3 = import_dev64.defineSemanticTokens.spacing({
+var import_dev66 = require("@pandacss/dev");
+var spacing3 = import_dev66.defineSemanticTokens.spacing({
   "4xs": {
     value: {
       base: "0.125rem"
@@ -7851,7 +7968,7 @@ var spacing3 = import_dev64.defineSemanticTokens.spacing({
 });
 
 // src/semanticTokens/index.ts
-var semanticTokens = (0, import_dev65.defineSemanticTokens)({
+var semanticTokens = (0, import_dev67.defineSemanticTokens)({
   colors: colors3,
   spacing: spacing3
 });
@@ -7899,7 +8016,7 @@ var globalFontface = {
 };
 
 // src/index.ts
-var preset = (0, import_dev66.definePreset)({
+var preset = (0, import_dev68.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,
@@ -6088,6 +6102,107 @@ var skeletonRecipe = defineRecipe15({
   }
 });
 
+// src/recipes/scrollbar.ts
+import { defineRecipe as defineRecipe16 } from "@pandacss/dev";
+var scrollbarRecipe = defineRecipe16({
+  className: "skeleton",
+  jsx: ["MpScrollbar", "mp-scrollbar"],
+  base: {
+    "& .os-scrollbar": {
+      "--os-handle-bg": "colors.gray.100!",
+      "--os-handle-bg-hover": "colors.gray.400!",
+      "--os-handle-bg-active": "colors.gray.400!"
+    },
+    _nextTheme: {
+      "& .os-scrollbar": {
+        "--os-handle-bg": "colors.icon.subtle!",
+        "--os-handle-bg-hover": "colors.icon.default!",
+        "--os-handle-bg-active": "colors.icon.default!"
+      }
+    }
+  }
+});
+
+// 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/index.ts
 var recipes = {
   buttonRecipe,
@@ -6117,7 +6232,8 @@ var recipes = {
   yearItemRecipe,
   timeItemRecipe,
   textlinkRecipe,
-  skeletonRecipe
+  skeletonRecipe,
+  scrollbarRecipe
 };
 var slotRecipes = {
   accordionSlotRecipe,
@@ -6164,7 +6280,8 @@ var slotRecipes = {
   colorPickerSlotRecipe,
   sliderSlotRecipe,
   tourSlotRecipe,
-  aireneButtonSlotRecipe
+  aireneButtonSlotRecipe,
+  aireneInputSlotRecipe
 };
 
 // src/text-styles.ts

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

@@ -29,6 +29,7 @@ declare const recipes: {
     timeItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     textlinkRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     skeletonRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    scrollbarRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
     accordionSlotRecipe: _pandacss_types.SlotRecipeConfig;
@@ -76,6 +77,7 @@ declare const slotRecipes: {
     sliderSlotRecipe: _pandacss_types.SlotRecipeConfig;
     tourSlotRecipe: _pandacss_types.SlotRecipeConfig;
     aireneButtonSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    aireneInputSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/recipes/index.d.ts

@@ -29,6 +29,7 @@ declare const recipes: {
     timeItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     textlinkRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     skeletonRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    scrollbarRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
     accordionSlotRecipe: _pandacss_types.SlotRecipeConfig;
@@ -76,6 +77,7 @@ declare const slotRecipes: {
     sliderSlotRecipe: _pandacss_types.SlotRecipeConfig;
     tourSlotRecipe: _pandacss_types.SlotRecipeConfig;
     aireneButtonSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    aireneInputSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/recipes/scrollbar.d.mts

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

package/dist/recipes/scrollbar.d.ts

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

package/package.json

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

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

@@ -66,6 +66,8 @@ import { sliderSlotRecipe } from './slider'
 import { tourSlotRecipe } from './tour'
 import { textlinkRecipe } from './textlink'
 import { skeletonRecipe } from './skeleton'
+import { scrollbarRecipe } from './scrollbar'
+import { aireneInputSlotRecipe } from './airene-chat-input'
 
 export const recipes = {
   buttonRecipe,
@@ -95,7 +97,8 @@ export const recipes = {
   yearItemRecipe,
   timeItemRecipe,
   textlinkRecipe,
-  skeletonRecipe
+  skeletonRecipe,
+  scrollbarRecipe
 }
 
 export const slotRecipes = {
@@ -143,5 +146,6 @@ export const slotRecipes = {
   colorPickerSlotRecipe,
   sliderSlotRecipe,
   tourSlotRecipe,
-  aireneButtonSlotRecipe
+  aireneButtonSlotRecipe,
+  aireneInputSlotRecipe
 }

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/scrollbar.ts

@@ -0,0 +1,22 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const scrollbarRecipe = defineRecipe({
+  className: 'skeleton',
+  jsx: ['MpScrollbar', 'mp-scrollbar'],
+  base: {
+    '& .os-scrollbar': {
+      '--os-handle-bg': 'colors.gray.100!',
+      '--os-handle-bg-hover': 'colors.gray.400!',
+      '--os-handle-bg-active': 'colors.gray.400!'
+    },
+    _nextTheme: {
+      '& .os-scrollbar': {
+        '--os-handle-bg': 'colors.icon.subtle!',
+        '--os-handle-bg-hover': 'colors.icon.default!',
+        '--os-handle-bg-active': 'colors.icon.default!'
+      }
+    }
+  }
+})
+
+export { scrollbarRecipe }

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,