@mekari/pixel3-theme 0.1.0 → 0.1.1-dev.1

package/dist/index.js

@@ -632,6 +632,14 @@ var inputSlotRecipe = (0, import_dev6.defineSlotRecipe)({
       alignItems: "center",
       _isFullWidth: {
         width: "full"
+      },
+      "&[data-with-clearable=true]": {
+        "& > [data-pixel-component=MpInputControl]": {
+          paddingRight: "44px"
+        },
+        "& > [data-pixel-component=MpInputClear]": {
+          "--mp-input--right": "12px"
+        }
       }
     },
     control: {
@@ -646,8 +654,7 @@ var inputSlotRecipe = (0, import_dev6.defineSlotRecipe)({
       borderWidth: "1px",
       borderColor: "inherit",
       borderRadius: "sm",
-      paddingRight: "var(--mp-input--padding-right)",
-      paddingLeft: "var(--mp-input--padding-left)",
+      paddingInline: "12px",
       appearance: "none",
       transition: "all 250ms",
       _isFullWidth: {
@@ -687,7 +694,10 @@ var inputSlotRecipe = (0, import_dev6.defineSlotRecipe)({
           backgroundColor: "white",
           borderColor: "gray.100",
           _hover: {
-            borderColor: "gray.400"
+            borderColor: "gray.400",
+            _invalid: {
+              borderColor: "red.400"
+            }
           },
           _focus: {
             borderColor: "blue.500",
@@ -749,7 +759,51 @@ var inputGroupSlotRecipe = (0, import_dev6.defineSlotRecipe)({
       position: "relative",
       display: "inline-flex",
       alignItems: "center",
-      width: "full"
+      width: "full",
+      "&[data-with-left-addon=true]": {
+        "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+          paddingLeft: "calc(var(--mp-input-offset--left) + 24px)"
+        }
+      },
+      "&[data-with-clearable=true]": {
+        "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+          paddingRight: "44px"
+        },
+        "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
+          "--mp-input--right": "12px"
+        }
+      },
+      "&[data-with-left-bg-addon=true]": {
+        "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+          paddingLeft: "calc(var(--mp-input-offset--left) + 12px)"
+        }
+      },
+      "&[data-with-right-addon=true]": {
+        "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+          paddingRight: "calc(var(--mp-input-offset--right) + 24px)"
+        },
+        "&[data-with-clearable=true]": {
+          "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+            paddingRight: "calc(var(--mp-input-offset--right) + 54px)"
+          },
+          "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
+            "--mp-input--right": "calc(var(--mp-input-offset--right) + 24px)"
+          }
+        }
+      },
+      "&[data-with-right-bg-addon=true]": {
+        "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+          paddingRight: "calc(var(--mp-input-offset--right) + 24px)"
+        },
+        "&[data-with-clearable=true]": {
+          "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+            paddingRight: "calc(var(--mp-input-offset--right) + 46px)"
+          },
+          "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
+            "--mp-input--right": "calc(var(--mp-input-offset--right) + 16px)"
+          }
+        }
+      }
     }
   },
   variants: {},
@@ -2301,6 +2355,14 @@ var dividerRecipe = (0, import_dev25.defineRecipe)({
     color: "rgb(208, 214, 221)"
   },
   variants: {
+    variant: {
+      solid: {
+        borderStyle: "solid"
+      },
+      dashed: {
+        borderStyle: "dashed"
+      }
+    },
     orientation: {
       horizontal: {
         borderBottom: "0.0625rem solid",
@@ -3575,7 +3637,7 @@ var import_dev36 = require("@pandacss/dev");
 var autocompleteSlotRecipe = (0, import_dev36.defineSlotRecipe)({
   className: "autocomplete",
   jsx: ["MpAutocomplete", "mp-autocomplete"],
-  slots: ["groupText", "popoverContent", "buttonAction", "emptyText", "contentLoading"],
+  slots: ["groupText", "popoverContent", "buttonAction", "emptyText", "contentLoading", "input"],
   base: {
     groupText: {
       px: 3,
@@ -3613,6 +3675,9 @@ var autocompleteSlotRecipe = (0, import_dev36.defineSlotRecipe)({
       display: "flex",
       alignItems: "center",
       gap: 3
+    },
+    input: {
+      cursor: "pointer"
     }
   }
 });

package/dist/index.mjs

@@ -606,6 +606,14 @@ var inputSlotRecipe = defineSlotRecipe3({
       alignItems: "center",
       _isFullWidth: {
         width: "full"
+      },
+      "&[data-with-clearable=true]": {
+        "& > [data-pixel-component=MpInputControl]": {
+          paddingRight: "44px"
+        },
+        "& > [data-pixel-component=MpInputClear]": {
+          "--mp-input--right": "12px"
+        }
       }
     },
     control: {
@@ -620,8 +628,7 @@ var inputSlotRecipe = defineSlotRecipe3({
       borderWidth: "1px",
       borderColor: "inherit",
       borderRadius: "sm",
-      paddingRight: "var(--mp-input--padding-right)",
-      paddingLeft: "var(--mp-input--padding-left)",
+      paddingInline: "12px",
       appearance: "none",
       transition: "all 250ms",
       _isFullWidth: {
@@ -661,7 +668,10 @@ var inputSlotRecipe = defineSlotRecipe3({
           backgroundColor: "white",
           borderColor: "gray.100",
           _hover: {
-            borderColor: "gray.400"
+            borderColor: "gray.400",
+            _invalid: {
+              borderColor: "red.400"
+            }
           },
           _focus: {
             borderColor: "blue.500",
@@ -723,7 +733,51 @@ var inputGroupSlotRecipe = defineSlotRecipe3({
       position: "relative",
       display: "inline-flex",
       alignItems: "center",
-      width: "full"
+      width: "full",
+      "&[data-with-left-addon=true]": {
+        "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+          paddingLeft: "calc(var(--mp-input-offset--left) + 24px)"
+        }
+      },
+      "&[data-with-clearable=true]": {
+        "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+          paddingRight: "44px"
+        },
+        "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
+          "--mp-input--right": "12px"
+        }
+      },
+      "&[data-with-left-bg-addon=true]": {
+        "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+          paddingLeft: "calc(var(--mp-input-offset--left) + 12px)"
+        }
+      },
+      "&[data-with-right-addon=true]": {
+        "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+          paddingRight: "calc(var(--mp-input-offset--right) + 24px)"
+        },
+        "&[data-with-clearable=true]": {
+          "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+            paddingRight: "calc(var(--mp-input-offset--right) + 54px)"
+          },
+          "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
+            "--mp-input--right": "calc(var(--mp-input-offset--right) + 24px)"
+          }
+        }
+      },
+      "&[data-with-right-bg-addon=true]": {
+        "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+          paddingRight: "calc(var(--mp-input-offset--right) + 24px)"
+        },
+        "&[data-with-clearable=true]": {
+          "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+            paddingRight: "calc(var(--mp-input-offset--right) + 46px)"
+          },
+          "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
+            "--mp-input--right": "calc(var(--mp-input-offset--right) + 16px)"
+          }
+        }
+      }
     }
   },
   variants: {},
@@ -2275,6 +2329,14 @@ var dividerRecipe = defineRecipe11({
     color: "rgb(208, 214, 221)"
   },
   variants: {
+    variant: {
+      solid: {
+        borderStyle: "solid"
+      },
+      dashed: {
+        borderStyle: "dashed"
+      }
+    },
     orientation: {
       horizontal: {
         borderBottom: "0.0625rem solid",
@@ -3549,7 +3611,7 @@ import { defineSlotRecipe as defineSlotRecipe24 } from "@pandacss/dev";
 var autocompleteSlotRecipe = defineSlotRecipe24({
   className: "autocomplete",
   jsx: ["MpAutocomplete", "mp-autocomplete"],
-  slots: ["groupText", "popoverContent", "buttonAction", "emptyText", "contentLoading"],
+  slots: ["groupText", "popoverContent", "buttonAction", "emptyText", "contentLoading", "input"],
   base: {
     groupText: {
       px: 3,
@@ -3587,6 +3649,9 @@ var autocompleteSlotRecipe = defineSlotRecipe24({
       display: "flex",
       alignItems: "center",
       gap: 3
+    },
+    input: {
+      cursor: "pointer"
     }
   }
 });

package/package.json

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

package/src/recipes/autocomplete.ts

@@ -3,7 +3,7 @@ import { defineSlotRecipe } from '@pandacss/dev'
 const autocompleteSlotRecipe = defineSlotRecipe({
   className: 'autocomplete',
   jsx: ['MpAutocomplete', 'mp-autocomplete'],
-  slots: ['groupText', 'popoverContent', 'buttonAction', 'emptyText', 'contentLoading'],
+  slots: ['groupText', 'popoverContent', 'buttonAction', 'emptyText', 'contentLoading', 'input'],
   base: {
     groupText: {
       px: 3, py: 2 
@@ -40,6 +40,9 @@ const autocompleteSlotRecipe = defineSlotRecipe({
       display: 'flex', 
       alignItems: 'center', 
       gap: 3
+    },
+    input: {
+      cursor: 'pointer'
     }
   },
 })

package/src/recipes/divider.ts

@@ -9,6 +9,14 @@ const dividerRecipe = defineRecipe({
     color: 'rgb(208, 214, 221)'
   },
   variants: {
+    variant: {
+      solid: {
+        borderStyle: 'solid',
+      },
+      dashed: {
+        borderStyle: 'dashed'
+      }
+    },
     orientation: {
       horizontal: {
         borderBottom: '0.0625rem solid',

package/src/recipes/input.ts

@@ -11,7 +11,15 @@ const inputSlotRecipe = defineSlotRecipe({
       alignItems: 'center',
       _isFullWidth: {
         width: 'full'
-      }
+      },
+      '&[data-with-clearable=true]': {
+        '& > [data-pixel-component=MpInputControl]': {
+          paddingRight: '44px'
+        },
+        '& > [data-pixel-component=MpInputClear]': {
+          '--mp-input--right': '12px'
+        }
+      },
     },
     control: {
       minWidth: '22',
@@ -25,13 +33,12 @@ const inputSlotRecipe = defineSlotRecipe({
       borderWidth: '1px',
       borderColor: 'inherit',
       borderRadius: 'sm',
-      paddingRight: 'var(--mp-input--padding-right)',
-      paddingLeft: 'var(--mp-input--padding-left)',
+      paddingInline: '12px',
       appearance: 'none',
       transition: 'all 250ms',
       _isFullWidth: {
         width: 'full'
-      }
+      },
     },
     clear: {
       position: 'absolute!',
@@ -66,7 +73,10 @@ const inputSlotRecipe = defineSlotRecipe({
           backgroundColor: 'white',
           borderColor: 'gray.100',
           _hover: {
-            borderColor: 'gray.400'
+            borderColor: 'gray.400',
+            _invalid: {
+              borderColor: 'red.400'
+            }
           },
           _focus: {
             borderColor: 'blue.500',
@@ -129,7 +139,51 @@ const inputGroupSlotRecipe = defineSlotRecipe({
       position: 'relative',
       display: 'inline-flex',
       alignItems: 'center',
-      width: 'full'
+      width: 'full',
+      '&[data-with-left-addon=true]': {
+        '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
+          paddingLeft: 'calc(var(--mp-input-offset--left) + 24px)'
+        },
+      },
+      '&[data-with-clearable=true]': {
+        '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
+          paddingRight: '44px'
+        },
+        '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]': {
+          '--mp-input--right': '12px'
+        }
+      },
+      '&[data-with-left-bg-addon=true]': {
+        '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
+          paddingLeft: 'calc(var(--mp-input-offset--left) + 12px)'
+        },
+      },
+      '&[data-with-right-addon=true]': {
+        '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
+          paddingRight: 'calc(var(--mp-input-offset--right) + 24px)'
+        },
+        '&[data-with-clearable=true]': {
+          '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
+            paddingRight: 'calc(var(--mp-input-offset--right) + 54px)'
+          },
+          '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]': {
+            '--mp-input--right': 'calc(var(--mp-input-offset--right) + 24px)'
+          }
+        }
+      },
+      '&[data-with-right-bg-addon=true]': {
+        '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
+          paddingRight: 'calc(var(--mp-input-offset--right) + 24px)'
+        },
+        '&[data-with-clearable=true]': {
+          '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
+            paddingRight: 'calc(var(--mp-input-offset--right) + 46px)'
+          },
+          '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]': {
+            '--mp-input--right': 'calc(var(--mp-input-offset--right) + 16px)'
+          }
+        }
+      },
     }
   },
   variants: {},