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

package/dist/index.js

@@ -25,7 +25,7 @@ __export(theme_exports, {
 module.exports = __toCommonJS(theme_exports);
 
 // src/index.ts
-var import_dev68 = require("@pandacss/dev");
+var import_dev69 = require("@pandacss/dev");
 
 // src/breakpoints.ts
 var breakpoints = {
@@ -2780,7 +2780,7 @@ var radioSlotRecipe = (0, import_dev19.defineSlotRecipe)({
 var import_dev20 = require("@pandacss/dev");
 var sharedSlotRecipe = (0, import_dev20.defineSlotRecipe)({
   className: "shared",
-  jsx: ["MpCheckbox", "mp-checkbox", "MpRadio", "mp-radio"],
+  jsx: ["MpCheckbox", "mp-checkbox", "MpRadio", "mp-radio", "MpToggle", "mp-toggle"],
   slots: ["hidden"],
   base: {
     hidden: {
@@ -2973,10 +2973,42 @@ var tableRecipe = (0, import_dev22.defineRecipe)({
         _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",
@@ -2985,9 +3017,9 @@ var tableRecipe = (0, import_dev22.defineRecipe)({
     },
     "& th, & td": {
       cursor: "default",
+      paddingY: "4",
       paddingLeft: "2",
       paddingRight: "4",
-      height: "52px",
       textStyle: "label.md",
       textAlign: "left",
       color: "dark",
@@ -3218,7 +3250,6 @@ var inputTagSlotRecipe = (0, import_dev25.defineSlotRecipe)({
     },
     trigger: {
       overflowY: "auto",
-      overflowX: "hidden",
       position: "relative",
       display: "flex",
       alignItems: "center",
@@ -3290,26 +3321,13 @@ var inputTagSlotRecipe = (0, import_dev25.defineSlotRecipe)({
       }
     },
     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"
         }
       }
     },
@@ -6162,35 +6180,63 @@ var aireneInputSlotRecipe = (0, import_dev46.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"
+          }
         }
       }
     },
@@ -6207,20 +6253,95 @@ var aireneInputSlotRecipe = (0, import_dev46.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"
+        }
+      }
+    }
+  },
+  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: "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"
       }
     }
   },
@@ -6307,12 +6428,13 @@ var slotRecipes = {
   sliderSlotRecipe,
   tourSlotRecipe,
   aireneButtonSlotRecipe,
-  aireneInputSlotRecipe
+  aireneInputSlotRecipe,
+  aireneBubbleSlotRecipe
 };
 
 // src/text-styles.ts
-var import_dev47 = require("@pandacss/dev");
-var textStyles = (0, import_dev47.defineTextStyles)({
+var import_dev48 = require("@pandacss/dev");
+var textStyles = (0, import_dev48.defineTextStyles)({
   overline: {
     value: {
       fontFamily: "var(--font-inter)",
@@ -6355,11 +6477,11 @@ var textStyles = (0, import_dev47.defineTextStyles)({
 });
 
 // src/tokens/index.ts
-var import_dev58 = require("@pandacss/dev");
+var import_dev59 = require("@pandacss/dev");
 
 // src/tokens/borders.ts
-var import_dev48 = require("@pandacss/dev");
-var borderWidths = import_dev48.defineTokens.borderWidths({
+var import_dev49 = require("@pandacss/dev");
+var borderWidths = import_dev49.defineTokens.borderWidths({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -6367,8 +6489,8 @@ var borderWidths = import_dev48.defineTokens.borderWidths({
 });
 
 // src/tokens/colors.ts
-var import_dev49 = require("@pandacss/dev");
-var colors = import_dev49.defineTokens.colors({
+var import_dev50 = require("@pandacss/dev");
+var colors = import_dev50.defineTokens.colors({
   debug: { value: "blue" },
   currentcolor: { value: "currentcolor" },
   dark: { value: "#232933" },
@@ -6376,6 +6498,7 @@ var colors = import_dev49.defineTokens.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)" },
@@ -6510,16 +6633,16 @@ var colors = import_dev49.defineTokens.colors({
 });
 
 // src/tokens/durations.ts
-var import_dev50 = require("@pandacss/dev");
-var durations = import_dev50.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_dev51 = require("@pandacss/dev");
-var opacity = import_dev51.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 },
@@ -6527,20 +6650,20 @@ var opacity = import_dev51.defineTokens.opacity({
 });
 
 // src/tokens/radii.ts
-var import_dev52 = require("@pandacss/dev");
-var radii = import_dev52.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" },
   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
-var import_dev53 = require("@pandacss/dev");
-var shadows = import_dev53.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)"]
   },
@@ -6580,8 +6703,8 @@ var shadows = import_dev53.defineTokens.shadows({
 });
 
 // src/tokens/sizes.ts
-var import_dev54 = require("@pandacss/dev");
-var sizes = import_dev54.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" },
@@ -6610,8 +6733,8 @@ var sizes = import_dev54.defineTokens.sizes({
 });
 
 // src/tokens/spacing.ts
-var import_dev55 = require("@pandacss/dev");
-var spacing = import_dev55.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" },
@@ -6632,8 +6755,8 @@ var spacing = import_dev55.defineTokens.spacing({
 });
 
 // src/tokens/z-index.ts
-var import_dev56 = require("@pandacss/dev");
-var zIndex = import_dev56.defineTokens.zIndex({
+var import_dev57 = require("@pandacss/dev");
+var zIndex = import_dev57.defineTokens.zIndex({
   hide: { value: -1 },
   base: { value: 0 },
   docked: { value: 10 },
@@ -6645,8 +6768,8 @@ var zIndex = import_dev56.defineTokens.zIndex({
 });
 
 // src/tokens/typography.ts
-var import_dev57 = require("@pandacss/dev");
-var fonts = import_dev57.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"'
   },
@@ -6654,7 +6777,7 @@ var fonts = import_dev57.defineTokens.fonts({
     value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'
   }
 });
-var fontSizes = import_dev57.defineTokens.fontSizes({
+var fontSizes = import_dev58.defineTokens.fontSizes({
   xs: { value: "0.625rem" },
   sm: { value: "0.75rem" },
   md: { value: "0.875rem" },
@@ -6662,12 +6785,12 @@ var fontSizes = import_dev57.defineTokens.fontSizes({
   xl: { value: "1.25rem" },
   "2xl": { value: "1.5rem" }
 });
-var fontWeights = import_dev57.defineTokens.fontWeights({
+var fontWeights = import_dev58.defineTokens.fontWeights({
   regular: { value: "400" },
   semiBold: { value: "600" },
   bold: { value: "800" }
 });
-var lineHeights = import_dev57.defineTokens.lineHeights({
+var lineHeights = import_dev58.defineTokens.lineHeights({
   xs: { value: 1.2 },
   sm: { value: 1.34 },
   md: { value: 1.43 },
@@ -6676,7 +6799,7 @@ var lineHeights = import_dev57.defineTokens.lineHeights({
   "2xl": { value: 1.67 },
   "3xl": { value: 1.71 }
 });
-var letterSpacings = import_dev57.defineTokens.letterSpacings({
+var letterSpacings = import_dev58.defineTokens.letterSpacings({
   tighter: { value: "-0.05em" },
   tight: { value: "-0.025em" },
   normal: { value: "0" },
@@ -6686,7 +6809,7 @@ var letterSpacings = import_dev57.defineTokens.letterSpacings({
 });
 
 // src/tokens/index.ts
-var tokens = (0, import_dev58.defineTokens)({
+var tokens = (0, import_dev59.defineTokens)({
   borderWidths,
   colors,
   durations,
@@ -6704,11 +6827,11 @@ var tokens = (0, import_dev58.defineTokens)({
 });
 
 // src/tokens-next/index.ts
-var import_dev64 = require("@pandacss/dev");
+var import_dev65 = require("@pandacss/dev");
 
 // src/tokens-next/borders.ts
-var import_dev59 = require("@pandacss/dev");
-var borderWidths2 = import_dev59.defineTokens.borderWidths({
+var import_dev60 = require("@pandacss/dev");
+var borderWidths2 = import_dev60.defineTokens.borderWidths({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -6718,12 +6841,15 @@ var borderWidths2 = import_dev59.defineTokens.borderWidths({
 });
 
 // src/tokens-next/colors.ts
-var import_dev60 = require("@pandacss/dev");
-var colors2 = import_dev60.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"
@@ -6891,8 +7017,8 @@ var colors2 = import_dev60.defineTokens.colors({
 });
 
 // src/tokens-next/radii.ts
-var import_dev61 = require("@pandacss/dev");
-var radii2 = import_dev61.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" },
@@ -6902,8 +7028,8 @@ var radii2 = import_dev61.defineTokens.radii({
 });
 
 // src/tokens-next/spacing.ts
-var import_dev62 = require("@pandacss/dev");
-var spacing2 = import_dev62.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" },
@@ -6919,8 +7045,8 @@ var spacing2 = import_dev62.defineTokens.spacing({
 });
 
 // src/tokens-next/shadows.ts
-var import_dev63 = require("@pandacss/dev");
-var shadows2 = import_dev63.defineTokens.shadows({
+var import_dev64 = require("@pandacss/dev");
+var shadows2 = import_dev64.defineTokens.shadows({
   xs: {
     value: [
       "0px 2px 4px 0px {colors.background.shadow}",
@@ -6960,7 +7086,7 @@ var shadows2 = import_dev63.defineTokens.shadows({
 });
 
 // src/tokens-next/index.ts
-var tokensNext = (0, import_dev64.defineTokens)({
+var tokensNext = (0, import_dev65.defineTokens)({
   borderWidths: borderWidths2,
   colors: colors2,
   durations,
@@ -6978,11 +7104,11 @@ var tokensNext = (0, import_dev64.defineTokens)({
 });
 
 // src/semanticTokens/index.ts
-var import_dev67 = require("@pandacss/dev");
+var import_dev68 = require("@pandacss/dev");
 
 // src/semanticTokens/colors.ts
-var import_dev65 = require("@pandacss/dev");
-var colors3 = import_dev65.defineSemanticTokens.colors({
+var import_dev66 = require("@pandacss/dev");
+var colors3 = import_dev66.defineSemanticTokens.colors({
   background: {
     surface: {
       value: {
@@ -7908,8 +8034,8 @@ var colors3 = import_dev65.defineSemanticTokens.colors({
 });
 
 // src/semanticTokens/spacing.ts
-var import_dev66 = require("@pandacss/dev");
-var spacing3 = import_dev66.defineSemanticTokens.spacing({
+var import_dev67 = require("@pandacss/dev");
+var spacing3 = import_dev67.defineSemanticTokens.spacing({
   "4xs": {
     value: {
       base: "0.125rem"
@@ -7968,7 +8094,7 @@ var spacing3 = import_dev66.defineSemanticTokens.spacing({
 });
 
 // src/semanticTokens/index.ts
-var semanticTokens = (0, import_dev67.defineSemanticTokens)({
+var semanticTokens = (0, import_dev68.defineSemanticTokens)({
   colors: colors3,
   spacing: spacing3
 });
@@ -8016,7 +8142,7 @@ var globalFontface = {
 };
 
 // src/index.ts
-var preset = (0, import_dev68.definePreset)({
+var preset = (0, import_dev69.definePreset)({
   name: "@mekari/pixel3-theme",
   // Main Theme
   theme: {