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

package/dist/index.mjs

@@ -2754,7 +2754,7 @@ var radioSlotRecipe = defineSlotRecipe9({
 import { defineSlotRecipe as defineSlotRecipe10 } from "@pandacss/dev";
 var sharedSlotRecipe = defineSlotRecipe10({
   className: "shared",
-  jsx: ["MpCheckbox", "mp-checkbox", "MpRadio", "mp-radio"],
+  jsx: ["MpCheckbox", "mp-checkbox", "MpRadio", "mp-radio", "MpToggle", "mp-toggle"],
   slots: ["hidden"],
   base: {
     hidden: {
@@ -2947,10 +2947,42 @@ var tableRecipe = defineRecipe10({
         _nextTheme: {
           boxShadow: "0px 2px var(--mp-colors-border-default)"
         }
+      },
+      "&[data-table-head-narrowed=true]": {
+        "& th": {
+          paddingY: "2",
+          paddingLeft: "2",
+          paddingRight: "4"
+        }
+      },
+      "&[data-table-head-bordered=true]": {
+        "& th:nth-last-child(n+2)": {
+          borderRightWidth: "sm",
+          borderColor: "gray.100",
+          _nextTheme: {
+            borderColor: "border.default"
+          }
+        }
       }
     },
     "& > tbody": {
-      width: "full"
+      width: "full",
+      "&[data-table-head-narrowed=true]": {
+        "& td": {
+          paddingY: "2",
+          paddingLeft: "2",
+          paddingRight: "4"
+        }
+      },
+      "&[data-table-head-bordered=true]": {
+        "& td:nth-last-child(n+2)": {
+          borderRightWidth: "sm",
+          borderColor: "gray.100",
+          _nextTheme: {
+            borderColor: "border.default"
+          }
+        }
+      }
     },
     "& > tr": {
       width: "full",
@@ -2959,9 +2991,9 @@ var tableRecipe = defineRecipe10({
     },
     "& th, & td": {
       cursor: "default",
+      paddingY: "4",
       paddingLeft: "2",
       paddingRight: "4",
-      height: "52px",
       textStyle: "label.md",
       textAlign: "left",
       color: "dark",
@@ -3192,7 +3224,6 @@ var inputTagSlotRecipe = defineSlotRecipe14({
     },
     trigger: {
       overflowY: "auto",
-      overflowX: "hidden",
       position: "relative",
       display: "flex",
       alignItems: "center",
@@ -3264,26 +3295,13 @@ var inputTagSlotRecipe = defineSlotRecipe14({
       }
     },
     input: {
-      appearance: "none",
-      outline: "none",
-      transition: "none",
-      width: "full",
-      textStyle: "label.md",
-      color: "dark",
-      _nextTheme: {
-        color: "text.default"
-      },
+      padding: "0 !important",
+      margin: "0 !important",
+      borderWidth: "0 !important",
       _placeholder: {
         color: "gray.400",
         _nextTheme: {
-          color: "text.placeholder"
-        }
-      },
-      _disabled: {
-        cursor: "not-allowed",
-        color: "gray.400",
-        _nextTheme: {
-          color: "text.disabled"
+          borderColor: "text.placeholder"
         }
       }
     },
@@ -6136,35 +6154,63 @@ var aireneInputSlotRecipe = defineSlotRecipe32({
       alignItems: "flex-end",
       gap: "2",
       width: "full",
-      py: "xs",
-      px: "md",
+      py: "2",
+      px: "4",
       rounded: "full",
       borderWidth: "1px",
-      borderColor: "border.default",
-      backgroundColor: "background.neutral",
-      color: "text.default",
+      borderColor: "gray.100",
+      backgroundColor: "white",
+      color: "dark",
       transitionDuration: "250ms",
       transitionProperty: "border-color",
       transitionTimingFunction: "linear",
+      _nextTheme: {
+        gap: "xs",
+        py: "xs",
+        px: "md",
+        borderColor: "border.default",
+        backgroundColor: "background.neutral",
+        color: "text.default"
+      },
       _hover: {
-        borderColor: "border.focused"
+        borderColor: "blue.400",
+        _nextTheme: {
+          borderColor: "border.focused"
+        }
       },
       _focusWithin: {
-        borderColor: "border.focused"
+        borderColor: "blue.400",
+        _nextTheme: {
+          borderColor: "border.focused"
+        }
       },
       _invalid: {
-        borderColor: "border.danger",
-        _hover: {
+        borderColor: "red.400",
+        _nextTheme: {
           borderColor: "border.danger"
+        },
+        _hover: {
+          borderColor: "border.danger",
+          _nextTheme: {
+            borderColor: "red.400"
+          }
         }
       },
       _disabled: {
-        backgroundColor: "background.disabled",
-        borderColor: "border.disabled",
-        color: "text.disabled",
+        backgroundColor: "gray,50",
+        borderColor: "gray.100",
+        color: "gray.400",
         cursor: "not-allowed",
+        _nextTheme: {
+          backgroundColor: "background.disabled",
+          borderColor: "border.disabled",
+          color: "text.disabled"
+        },
         _hover: {
-          borderColor: "border.disabled"
+          borderColor: "gray.100",
+          _nextTheme: {
+            borderColor: "border.disabled"
+          }
         }
       }
     },
@@ -6181,20 +6227,95 @@ var aireneInputSlotRecipe = defineSlotRecipe32({
       maxHeight: "136px",
       outline: "none",
       resize: "none",
-      caretColor: "border.selected",
+      caretColor: "blue.400",
       fontSize: "md",
       fontWeight: "regular",
       lineHeight: "md",
       scrollbarWidth: "none",
+      _nextTheme: {
+        caretColor: "border.selected"
+      },
       "-ms-overflow-style": "none",
       "&::-webkit-scrollbar": {
         display: "none"
       },
       "&::selection": {
-        background: "background.brand"
+        background: "ice.50",
+        _nextTheme: {
+          background: "background.brand"
+        }
       },
       "&::-moz-selection": {
-        background: "background.brand"
+        background: "ice.50",
+        _nextTheme: {
+          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: "2",
+      py: "2",
+      _nextTheme: {
+        gap: "xs",
+        py: "xs"
+      }
+    },
+    header: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      _nextTheme: {
+        gap: "xs"
+      }
+    },
+    loading: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1.5",
+      _nextTheme: {
+        gap: "2xs"
+      }
+    },
+    body: {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      gap: "3",
+      padding: "3",
+      background: "lightPurple",
+      borderRadius: "lg",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "blue.50",
+      _nextTheme: {
+        gap: "sm",
+        padding: "sm",
+        background: "lightPurple",
+        borderColor: "background.neutral.subtle"
+      }
+    },
+    text: {
+      display: "flex",
+      gap: "2",
+      _nextTheme: {
+        gap: "xs"
       }
     }
   },
@@ -6281,7 +6402,8 @@ var slotRecipes = {
   sliderSlotRecipe,
   tourSlotRecipe,
   aireneButtonSlotRecipe,
-  aireneInputSlotRecipe
+  aireneInputSlotRecipe,
+  aireneBubbleSlotRecipe
 };
 
 // src/text-styles.ts
@@ -6350,6 +6472,7 @@ var colors = defineTokens2.colors({
   overlay: { value: "rgba(22, 26, 32, 0.8)" },
   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%, #E9F1FD 0%, #F4F0FF 100%)" },
   whiteAlpha: {
     50: { value: "rgba(255, 255, 255, 0.04)" },
     100: { value: "rgba(255, 255, 255, 0.06)" },
@@ -6509,7 +6632,7 @@ var radii = defineTokens5.radii({
   md: { value: "0.375rem", description: "6px" },
   lg: { value: "0.5rem", description: "8px" },
   xl: { value: "0.75rem", description: "12px" },
-  full: { value: "50%" }
+  full: { value: "999px" }
 });
 
 // src/tokens/shadows.ts
@@ -6698,6 +6821,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/index.d.mts

@@ -78,6 +78,7 @@ declare const slotRecipes: {
     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

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

package/dist/tokens/colors.d.mts

@@ -20,6 +20,9 @@ declare const colors: {
     vibrantPurple: {
         value: string;
     };
+    lightPurple: {
+        value: string;
+    };
     whiteAlpha: {
         50: {
             value: string;

package/dist/tokens/colors.d.ts

@@ -20,6 +20,9 @@ declare const colors: {
     vibrantPurple: {
         value: string;
     };
+    lightPurple: {
+        value: string;
+    };
     whiteAlpha: {
         50: {
             value: string;

package/dist/tokens/index.d.mts

@@ -35,6 +35,9 @@ declare const tokens: {
         vibrantPurple: {
             value: string;
         };
+        lightPurple: {
+            value: string;
+        };
         whiteAlpha: {
             50: {
                 value: string;

package/dist/tokens/index.d.ts

@@ -35,6 +35,9 @@ declare const tokens: {
         vibrantPurple: {
             value: string;
         };
+        lightPurple: {
+            value: string;
+        };
         whiteAlpha: {
             50: {
                 value: string;

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.3",
+  "version": "0.3.0-dev.5",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [

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

@@ -0,0 +1,72 @@
+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: '2',
+      py: '2',
+
+      _nextTheme: {
+        gap: 'xs',
+        py: 'xs'
+      }
+    },
+    header: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '2',
+
+      _nextTheme: {
+        gap: 'xs'
+      }
+    },
+    loading: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1.5',
+
+      _nextTheme: {
+        gap: '2xs'
+      }
+    },
+    body: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '3',
+      padding: '3',
+      background: 'lightPurple',
+      borderRadius: 'lg',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'blue.50',
+
+      _nextTheme: {
+        gap: 'sm',
+        padding: 'sm',
+        background: 'lightPurple',
+        borderColor: 'background.neutral.subtle'
+      }
+    },
+    text: {
+      display: 'flex',
+      gap: '2',
+
+      _nextTheme: {
+        gap: 'xs'
+      }
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+export { aireneBubbleSlotRecipe }

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

@@ -11,36 +11,73 @@ const aireneInputSlotRecipe = defineSlotRecipe({
       alignItems: 'flex-end',
       gap: '2',
       width: 'full',
-      py: 'xs',
-      px: 'md',
+      py: '2',
+      px: '4',
       rounded: 'full',
       borderWidth: '1px',
-      borderColor: 'border.default',
-      backgroundColor: 'background.neutral',
-      color: 'text.default',
+      borderColor: 'gray.100',
+      backgroundColor: 'white',
+      color: 'dark',
       transitionDuration: '250ms',
       transitionProperty: 'border-color',
       transitionTimingFunction: 'linear',
 
+      _nextTheme: {
+        gap: 'xs',
+        py: 'xs',
+        px: 'md',
+        borderColor: 'border.default',
+        backgroundColor: 'background.neutral',
+        color: 'text.default'
+      },
+
       _hover: {
-        borderColor: 'border.focused'
+        borderColor: 'blue.400',
+
+        _nextTheme: {
+          borderColor: 'border.focused'
+        }
       },
       _focusWithin: {
-        borderColor: 'border.focused'
+        borderColor: 'blue.400',
+
+        _nextTheme: {
+          borderColor: 'border.focused'
+        }
       },
       _invalid: {
-        borderColor: 'border.danger',
-        _hover: {
+        borderColor: 'red.400',
+
+        _nextTheme: {
           borderColor: 'border.danger'
+        },
+
+        _hover: {
+          borderColor: 'border.danger',
+
+          _nextTheme: {
+            borderColor: 'red.400'
+          }
         }
       },
       _disabled: {
-        backgroundColor: 'background.disabled',
-        borderColor: 'border.disabled',
-        color: 'text.disabled',
+        backgroundColor: 'gray,50',
+        borderColor: 'gray.100',
+        color: 'gray.400',
         cursor: 'not-allowed',
+
+        _nextTheme: {
+          backgroundColor: 'background.disabled',
+          borderColor: 'border.disabled',
+          color: 'text.disabled'
+        },
+
         _hover: {
-          borderColor: 'border.disabled'
+          borderColor: 'gray.100',
+
+          _nextTheme: {
+            borderColor: 'border.disabled'
+          }
         }
       }
     },
@@ -57,20 +94,33 @@ const aireneInputSlotRecipe = defineSlotRecipe({
       maxHeight: '136px',
       outline: 'none',
       resize: 'none',
-      caretColor: 'border.selected',
+      caretColor: 'blue.400',
       fontSize: 'md',
       fontWeight: 'regular',
       lineHeight: 'md',
       scrollbarWidth: 'none',
+
+      _nextTheme: {
+        caretColor: 'border.selected'
+      },
+
       '-ms-overflow-style': 'none',
       '&::-webkit-scrollbar': {
         display: 'none'
       },
       '&::selection': {
-        background: 'background.brand'
+        background: 'ice.50',
+
+        _nextTheme: {
+          background: 'background.brand'
+        }
       },
       '&::-moz-selection': {
-        background: 'background.brand'
+        background: 'ice.50',
+
+        _nextTheme: {
+          background: 'background.brand'
+        }
       }
     }
   },

package/src/recipes/index.ts

@@ -68,6 +68,7 @@ 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,
@@ -147,5 +148,6 @@ export const slotRecipes = {
   sliderSlotRecipe,
   tourSlotRecipe,
   aireneButtonSlotRecipe,
-  aireneInputSlotRecipe
+  aireneInputSlotRecipe,
+  aireneBubbleSlotRecipe
 }