@mekari/pixel3-theme 0.7.0 → 0.7.1-dev.0

package/dist/index.js

@@ -1141,7 +1141,7 @@ var inputSlotRecipe = (0, import_dev7.defineSlotRecipe)({
         width: "full"
       },
       "&[data-with-clearable=true]": {
-        "& > [data-pixel-component=MpInputControl]": {
+        "&:hover > [data-pixel-component=MpInputControl]": {
           paddingRight: "44px"
         },
         "& > [data-pixel-component=MpInputClear]": {
@@ -1316,7 +1316,7 @@ var inputGroupSlotRecipe = (0, import_dev7.defineSlotRecipe)({
         }
       },
       "&[data-with-clearable=true]": {
-        "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+        "& > [data-pixel-component=MpInput]:hover > [data-pixel-component=MpInputControl]": {
           paddingRight: "44px"
         },
         "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
@@ -1333,7 +1333,7 @@ var inputGroupSlotRecipe = (0, import_dev7.defineSlotRecipe)({
           paddingRight: "calc(var(--mp-input-offset--right) + 14px)"
         },
         "&[data-with-clearable=true]": {
-          "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+          "& > [data-pixel-component=MpInput]:hover > [data-pixel-component=MpInputControl]": {
             paddingRight: "calc(var(--mp-input-offset--right) + 54px)"
           },
           "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
@@ -1346,7 +1346,7 @@ var inputGroupSlotRecipe = (0, import_dev7.defineSlotRecipe)({
           paddingRight: "calc(var(--mp-input-offset--right) + 14px)"
         },
         "&[data-with-clearable=true]": {
-          "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+          "& > [data-pixel-component=MpInput]:hover > [data-pixel-component=MpInputControl]": {
             paddingRight: "calc(var(--mp-input-offset--right) + 46px)"
           },
           "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
@@ -1475,6 +1475,11 @@ var selectSlotRecipe = (0, import_dev8.defineSlotRecipe)({
       alignItems: "center",
       _isFullWidth: {
         width: "full"
+      },
+      "&[data-with-clearable=true]:hover": {
+        "& > [data-pixel-component=MpSelectControl]": {
+          paddingRight: "62px!"
+        }
       }
     },
     control: {
@@ -1491,7 +1496,7 @@ var selectSlotRecipe = (0, import_dev8.defineSlotRecipe)({
       paddingLeft: "3",
       paddingRight: "var(--mp-select--padding-right)",
       appearance: "none",
-      transition: "all 250ms",
+      transition: "border-color 250ms, background-color 250ms, box-shadow 250ms",
       backgroundColor: "white",
       borderColor: "gray.100",
       _hover: {
@@ -3206,7 +3211,7 @@ var import_dev24 = require("@pandacss/dev");
 var formControlSlotRecipe = (0, import_dev24.defineSlotRecipe)({
   className: "form-control",
   jsx: ["MpFormControl", "mp-form-control"],
-  slots: ["root", "label", "required", "helpText", "errorMessage"],
+  slots: ["root", "label", "required", "labelIcon", "helpText", "errorMessage"],
   base: {
     root: {},
     label: {
@@ -3215,7 +3220,8 @@ var formControlSlotRecipe = (0, import_dev24.defineSlotRecipe)({
       marginBottom: "1",
       textAlign: "left",
       verticalAlign: "middle",
-      display: "flex"
+      display: "flex",
+      alignItems: "center"
     },
     required: {
       color: "red.400",
@@ -3223,6 +3229,11 @@ var formControlSlotRecipe = (0, import_dev24.defineSlotRecipe)({
         color: "text.danger"
       }
     },
+    labelIcon: {
+      display: "inline-flex",
+      alignItems: "center",
+      marginLeft: "0.5"
+    },
     helpText: {
       color: "gray.600",
       fontSize: "sm",
@@ -3286,8 +3297,8 @@ var inputTagSlotRecipe = (0, import_dev25.defineSlotRecipe)({
       paddingTop: "2",
       paddingBottom: "2",
       paddingLeft: "3",
-      paddingRight: "8",
-      transition: "all 250ms",
+      paddingRight: "3",
+      transition: "border-color 250ms, background-color 250ms, box-shadow 250ms",
       _nextTheme: {
         borderRadius: "md",
         borderColor: "border.form",
@@ -3340,6 +3351,9 @@ var inputTagSlotRecipe = (0, import_dev25.defineSlotRecipe)({
           }
         }
       },
+      "&[data-show-clear=true]:not([data-has-icon=true])": {
+        paddingRight: "32px"
+      },
       _hasIcon: {
         paddingRight: "52px"
       }
@@ -3645,7 +3659,7 @@ var uploadSlotRecipe = (0, import_dev28.defineSlotRecipe)({
       borderRadius: "md",
       background: "white",
       outline: "none",
-      transition: "all 250ms",
+      transition: "border-color 250ms, background-color 250ms, box-shadow 250ms",
       _nextTheme: {
         borderRadius: "md",
         borderColor: "border.default",
@@ -3653,14 +3667,17 @@ var uploadSlotRecipe = (0, import_dev28.defineSlotRecipe)({
       },
       _hover: {
         borderColor: "gray.400",
-        "& .mp-upload__resetButton": {
-          display: "block"
-        },
         _nextTheme: {
           borderColor: "border.form",
           background: "background.neutral.hovered"
         }
       },
+      "&[data-has-reset=true]:hover": {
+        paddingRight: "44px",
+        "& [data-pixel-component=MpUploadResetButton]": {
+          display: "block"
+        }
+      },
       _focus: {
         boxShadow: "focus",
         borderColor: "blue.400",

package/dist/index.mjs

@@ -1115,7 +1115,7 @@ var inputSlotRecipe = defineSlotRecipe4({
         width: "full"
       },
       "&[data-with-clearable=true]": {
-        "& > [data-pixel-component=MpInputControl]": {
+        "&:hover > [data-pixel-component=MpInputControl]": {
           paddingRight: "44px"
         },
         "& > [data-pixel-component=MpInputClear]": {
@@ -1290,7 +1290,7 @@ var inputGroupSlotRecipe = defineSlotRecipe4({
         }
       },
       "&[data-with-clearable=true]": {
-        "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+        "& > [data-pixel-component=MpInput]:hover > [data-pixel-component=MpInputControl]": {
           paddingRight: "44px"
         },
         "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
@@ -1307,7 +1307,7 @@ var inputGroupSlotRecipe = defineSlotRecipe4({
           paddingRight: "calc(var(--mp-input-offset--right) + 14px)"
         },
         "&[data-with-clearable=true]": {
-          "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+          "& > [data-pixel-component=MpInput]:hover > [data-pixel-component=MpInputControl]": {
             paddingRight: "calc(var(--mp-input-offset--right) + 54px)"
           },
           "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
@@ -1320,7 +1320,7 @@ var inputGroupSlotRecipe = defineSlotRecipe4({
           paddingRight: "calc(var(--mp-input-offset--right) + 14px)"
         },
         "&[data-with-clearable=true]": {
-          "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+          "& > [data-pixel-component=MpInput]:hover > [data-pixel-component=MpInputControl]": {
             paddingRight: "calc(var(--mp-input-offset--right) + 46px)"
           },
           "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
@@ -1449,6 +1449,11 @@ var selectSlotRecipe = defineSlotRecipe5({
       alignItems: "center",
       _isFullWidth: {
         width: "full"
+      },
+      "&[data-with-clearable=true]:hover": {
+        "& > [data-pixel-component=MpSelectControl]": {
+          paddingRight: "62px!"
+        }
       }
     },
     control: {
@@ -1465,7 +1470,7 @@ var selectSlotRecipe = defineSlotRecipe5({
       paddingLeft: "3",
       paddingRight: "var(--mp-select--padding-right)",
       appearance: "none",
-      transition: "all 250ms",
+      transition: "border-color 250ms, background-color 250ms, box-shadow 250ms",
       backgroundColor: "white",
       borderColor: "gray.100",
       _hover: {
@@ -3180,7 +3185,7 @@ import { defineSlotRecipe as defineSlotRecipe13 } from "@pandacss/dev";
 var formControlSlotRecipe = defineSlotRecipe13({
   className: "form-control",
   jsx: ["MpFormControl", "mp-form-control"],
-  slots: ["root", "label", "required", "helpText", "errorMessage"],
+  slots: ["root", "label", "required", "labelIcon", "helpText", "errorMessage"],
   base: {
     root: {},
     label: {
@@ -3189,7 +3194,8 @@ var formControlSlotRecipe = defineSlotRecipe13({
       marginBottom: "1",
       textAlign: "left",
       verticalAlign: "middle",
-      display: "flex"
+      display: "flex",
+      alignItems: "center"
     },
     required: {
       color: "red.400",
@@ -3197,6 +3203,11 @@ var formControlSlotRecipe = defineSlotRecipe13({
         color: "text.danger"
       }
     },
+    labelIcon: {
+      display: "inline-flex",
+      alignItems: "center",
+      marginLeft: "0.5"
+    },
     helpText: {
       color: "gray.600",
       fontSize: "sm",
@@ -3260,8 +3271,8 @@ var inputTagSlotRecipe = defineSlotRecipe14({
       paddingTop: "2",
       paddingBottom: "2",
       paddingLeft: "3",
-      paddingRight: "8",
-      transition: "all 250ms",
+      paddingRight: "3",
+      transition: "border-color 250ms, background-color 250ms, box-shadow 250ms",
       _nextTheme: {
         borderRadius: "md",
         borderColor: "border.form",
@@ -3314,6 +3325,9 @@ var inputTagSlotRecipe = defineSlotRecipe14({
           }
         }
       },
+      "&[data-show-clear=true]:not([data-has-icon=true])": {
+        paddingRight: "32px"
+      },
       _hasIcon: {
         paddingRight: "52px"
       }
@@ -3619,7 +3633,7 @@ var uploadSlotRecipe = defineSlotRecipe17({
       borderRadius: "md",
       background: "white",
       outline: "none",
-      transition: "all 250ms",
+      transition: "border-color 250ms, background-color 250ms, box-shadow 250ms",
       _nextTheme: {
         borderRadius: "md",
         borderColor: "border.default",
@@ -3627,14 +3641,17 @@ var uploadSlotRecipe = defineSlotRecipe17({
       },
       _hover: {
         borderColor: "gray.400",
-        "& .mp-upload__resetButton": {
-          display: "block"
-        },
         _nextTheme: {
           borderColor: "border.form",
           background: "background.neutral.hovered"
         }
       },
+      "&[data-has-reset=true]:hover": {
+        paddingRight: "44px",
+        "& [data-pixel-component=MpUploadResetButton]": {
+          display: "block"
+        }
+      },
       _focus: {
         boxShadow: "focus",
         borderColor: "blue.400",

package/package.json

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

package/src/recipes/form-control.ts

@@ -3,7 +3,7 @@ import { defineSlotRecipe } from '@pandacss/dev'
 const formControlSlotRecipe = defineSlotRecipe({
   className: 'form-control',
   jsx: ['MpFormControl', 'mp-form-control'],
-  slots: ['root', 'label', 'required', 'helpText', 'errorMessage'],
+  slots: ['root', 'label', 'required', 'labelIcon', 'helpText', 'errorMessage'],
   base: {
     root: {},
     label: {
@@ -12,7 +12,8 @@ const formControlSlotRecipe = defineSlotRecipe({
       marginBottom: '1',
       textAlign: 'left',
       verticalAlign: 'middle',
-      display: 'flex'
+      display: 'flex',
+      alignItems: 'center'
     },
     required: {
       color: 'red.400',
@@ -20,6 +21,11 @@ const formControlSlotRecipe = defineSlotRecipe({
         color: 'text.danger'
       }
     },
+    labelIcon: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      marginLeft: '0.5'
+    },
     helpText: {
       color: 'gray.600',
       fontSize: 'sm',

package/src/recipes/input-tag.ts

@@ -36,8 +36,8 @@ const inputTagSlotRecipe = defineSlotRecipe({
       paddingTop: '2',
       paddingBottom: '2',
       paddingLeft: '3',
-      paddingRight: '8',
-      transition: 'all 250ms',
+      paddingRight: '3',
+      transition: 'border-color 250ms, background-color 250ms, box-shadow 250ms',
       _nextTheme: {
         borderRadius: 'md',
         borderColor: 'border.form',
@@ -92,6 +92,9 @@ const inputTagSlotRecipe = defineSlotRecipe({
           }
         }
       },
+      '&[data-show-clear=true]:not([data-has-icon=true])': {
+        paddingRight: '32px'
+      },
       _hasIcon: {
         paddingRight: '52px'
       }

package/src/recipes/input.ts

@@ -13,7 +13,7 @@ const inputSlotRecipe = defineSlotRecipe({
         width: 'full'
       },
       '&[data-with-clearable=true]': {
-        '& > [data-pixel-component=MpInputControl]': {
+        '&:hover > [data-pixel-component=MpInputControl]': {
           paddingRight: '44px'
         },
         '& > [data-pixel-component=MpInputClear]': {
@@ -189,7 +189,7 @@ const inputGroupSlotRecipe = defineSlotRecipe({
         }
       },
       '&[data-with-clearable=true]': {
-        '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
+        '& > [data-pixel-component=MpInput]:hover > [data-pixel-component=MpInputControl]': {
           paddingRight: '44px'
         },
         '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]': {
@@ -206,7 +206,7 @@ const inputGroupSlotRecipe = defineSlotRecipe({
           paddingRight: 'calc(var(--mp-input-offset--right) + 14px)'
         },
         '&[data-with-clearable=true]': {
-          '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
+          '& > [data-pixel-component=MpInput]:hover > [data-pixel-component=MpInputControl]': {
             paddingRight: 'calc(var(--mp-input-offset--right) + 54px)'
           },
           '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]': {
@@ -219,7 +219,7 @@ const inputGroupSlotRecipe = defineSlotRecipe({
           paddingRight: 'calc(var(--mp-input-offset--right) + 14px)'
         },
         '&[data-with-clearable=true]': {
-          '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
+          '& > [data-pixel-component=MpInput]:hover > [data-pixel-component=MpInputControl]': {
             paddingRight: 'calc(var(--mp-input-offset--right) + 46px)'
           },
           '& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]': {

package/src/recipes/select.ts

@@ -11,6 +11,11 @@ const selectSlotRecipe = defineSlotRecipe({
       alignItems: 'center',
       _isFullWidth: {
         width: 'full'
+      },
+      '&[data-with-clearable=true]:hover': {
+        '& > [data-pixel-component=MpSelectControl]': {
+          paddingRight: '62px!'
+        }
       }
     },
     control: {
@@ -27,7 +32,7 @@ const selectSlotRecipe = defineSlotRecipe({
       paddingLeft: '3',
       paddingRight: 'var(--mp-select--padding-right)',
       appearance: 'none',
-      transition: 'all 250ms',
+      transition: 'border-color 250ms, background-color 250ms, box-shadow 250ms',
       backgroundColor: 'white',
       borderColor: 'gray.100',
       _hover: {

package/src/recipes/upload.ts

@@ -20,7 +20,7 @@ const uploadSlotRecipe = defineSlotRecipe({
       borderRadius: 'md',
       background: 'white',
       outline: 'none',
-      transition: 'all 250ms',
+      transition: 'border-color 250ms, background-color 250ms, box-shadow 250ms',
       _nextTheme: {
         borderRadius: 'md',
         borderColor: 'border.default',
@@ -29,15 +29,17 @@ const uploadSlotRecipe = defineSlotRecipe({
 
       _hover: {
         borderColor: 'gray.400',
-        '& .mp-upload__resetButton': {
-          display: 'block'
-        },
-
         _nextTheme: {
           borderColor: 'border.form',
           background: 'background.neutral.hovered'
         }
       },
+      '&[data-has-reset=true]:hover': {
+        paddingRight: '44px',
+        '& [data-pixel-component=MpUploadResetButton]': {
+          display: 'block'
+        }
+      },
       _focus: {
         boxShadow: 'focus',
         borderColor: 'blue.400',