@mekari/pixel3-theme 0.0.1-alpha.0 → 0.0.2

package/src/recipes/input-tag.ts

@@ -0,0 +1,119 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const inputTagSlotRecipe = defineSlotRecipe({
+  className: 'input-tag',
+  jsx: ['MpInputTag', 'mp-input-tag'],
+  slots: [
+    'root',
+    'trigger',
+    'input',
+    'content',
+    'resetButton',
+    'dropdownButton',
+    'addButton',
+    'loading',
+    'empty',
+    'suggestionWrapper',
+    'suggestionLoading'
+  ],
+  base: {
+    root: {
+      position: 'relative',
+      width: 'full'
+    },
+    trigger: {
+      overflowY: 'auto',
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      gap: '2',
+      borderWidth: '1px',
+      borderColor: 'gray.100',
+      borderRadius: 'md',
+      paddingTop: '2',
+      paddingBottom: '2',
+      paddingLeft: '3',
+      paddingRight: '8',
+      backgroundColor: 'white',
+      transition: 'all 250ms',
+      _hover: {
+        borderColor: 'gray.400'
+      },
+      _focusVisible: {
+        boxShadow: 'focus',
+        borderColor: 'blue.400',
+        _hover: {
+          borderColor: 'blue.400'
+        }
+      },
+      _disabled: {
+        cursor: 'not-allowed',
+        background: 'gray.50'
+      },
+      _invalid: {
+        borderColor: 'red.400',
+        _hover: {
+          borderColor: 'red.400'
+        }
+      },
+      _hasIcon: {
+        paddingRight: '52px'
+      }
+    },
+    input: {
+      padding: '0 !important',
+      margin: '0 !important',
+    },
+    content: {
+      maxHeight: '300px',
+      overflowY: 'auto'
+    },
+    resetButton: {
+      cursor: 'pointer',
+      position: 'absolute',
+      top: '2'
+    },
+    dropdownButton: {
+      cursor: 'pointer',
+      position: 'absolute',
+      top: '2',
+      right: '3'
+    },
+    addButton: {
+      cursor: 'pointer',
+      width: 'full',
+      px: '3',
+      py: '2',
+      wordBreak: 'break-all',
+      textAlign: 'center'
+    },
+    loading: {
+      position: 'absolute',
+      top: '2',
+      right: '3'
+    },
+    empty: {
+      px: '3',
+      py: '2',
+      width: 'full',
+      textAlign: 'left'
+    },
+    suggestionWrapper: {
+      display: 'flex', 
+      flexDirection: 'column',
+      width: '100%'
+    },
+    suggestionLoading: {
+      display: 'flex',
+      justifyContent: 'flex-start',
+      gap: '3',
+      width: 'full',
+      height: '9',
+      py: '2',
+      px: '3',
+    }
+  }
+})
+
+export { inputTagSlotRecipe }

package/src/recipes/input.ts

@@ -0,0 +1,204 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const inputSlotRecipe = defineSlotRecipe({
+  className: 'input',
+  jsx: ['MpInput', 'mp-input'],
+  slots: ['root', 'control', 'clear'],
+  base: {
+    root: {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+      _isFullWidth: {
+        width: 'full'
+      }
+    },
+    control: {
+      minWidth: '22',
+      fontWeight: 'regular',
+      lineHeight: 'md',
+      color: 'dark',
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+      outline: '0',
+      borderWidth: '1px',
+      borderColor: 'inherit',
+      borderRadius: 'sm',
+      paddingRight: 'var(--mp-input--padding-right)',
+      paddingLeft: 'var(--mp-input--padding-left)',
+      appearance: 'none',
+      transition: 'all 250ms',
+      _isFullWidth: {
+        width: 'full'
+      }
+    },
+    clear: {
+      position: 'absolute!',
+      color: 'gray.600',
+      border: 'none',
+      top: '9px',
+      right: 'var(--mp-input--right)',
+      width: '5',
+      height: '5',
+      minWidth: '5',
+      padding: '0',
+      transition: 'all 250ms!',
+      visibility: 'hidden',
+      opacity: '0',
+      _groupHover: {
+        visibility: 'var(--mp-input--visibility)',
+        opacity: 'var(--mp-input--opacity)'
+      }
+    }
+  },
+  variants: {
+    variant: {
+      unstyled: {
+        control: {
+          backgroundColor: 'transparent',
+          borderWidth: '0',
+          borderRadius: 'none'
+        }
+      },
+      outline: {
+        control: {
+          backgroundColor: 'white',
+          borderColor: 'gray.100',
+          _hover: {
+            borderColor: 'gray.400'
+          },
+          _focus: {
+            borderColor: 'blue.500',
+            boxShadow: 'outer',
+            _hover: {
+              borderColor: 'blue.500'
+            },
+            _invalid: {
+              borderColor: 'red.400'
+            }
+          },
+          _disabled: {
+            color: 'gray.400',
+            backgroundColor: 'gray.50',
+            borderColor: 'gray.100',
+            cursor: 'not-allowed'
+          },
+          _invalid: {
+            borderColor: 'red.400'
+          },
+          _readOnly: {
+            boxShadow: 'none',
+            userSelect: 'all'
+          }
+        }
+      }
+    },
+    size: {
+      sm: {
+        control: {
+          height: '7.5',
+          fontSize: 'sm',
+          borderRadius: 'sm',
+          paddingY: '1'
+        }
+      },
+      md: {
+        control: {
+          height: '9.5',
+          fontSize: 'md',
+          borderRadius: 'md',
+          paddingY: '2'
+        }
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline'
+  }
+})
+
+const inputGroupSlotRecipe = defineSlotRecipe({
+  className: 'input-group',
+  jsx: ['MpInputGroup', 'mp-input-group'],
+  slots: ['root'],
+  base: {
+    root: {
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      width: 'full'
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+const inputAddonSlotRecipe = defineSlotRecipe({
+  className: 'input-addon',
+  jsx: ['MpInputAddon', 'mp-input-addon'],
+  slots: ['root'],
+  base: {
+    root: {
+      position: 'absolute',
+      display: 'flex',
+      alignItems: 'center',
+      paddingX: '0',
+      whiteSpace: 'nowrap',
+      zIndex: '2',
+      _hasBackground: {
+        backgroundColor: 'gray.50'
+      }
+    }
+  },
+  variants: {
+    placement: {
+      left: {
+        root: {
+          left: '3',
+          borderTopRightRadius: 'none!',
+          borderBottomRightRadius: 'none!'
+        }
+      },
+      right: {
+        root: {
+          right: '3',
+          borderTopLeftRadius: 'none!',
+          borderBottomLeftRadius: 'none!'
+        }
+      }
+    },
+    size: {
+      sm: {
+        root: {
+          height: '6.5',
+          borderRadius: '2xs',
+          _hasBackground: {
+            _placementLeft: { left: '0.5' },
+            _placementRight: { right: '0.5' }
+          }
+        }
+      },
+      md: {
+        root: {
+          height: '7.5',
+          borderRadius: 'sm',
+          _hasBackground: {
+            _placementLeft: { left: '1' },
+            _placementRight: { right: '1' }
+          }
+        }
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    size: 'md',
+    placement: 'left'
+  }
+})
+
+export { inputSlotRecipe, inputGroupSlotRecipe, inputAddonSlotRecipe }

package/src/recipes/modal.ts

@@ -0,0 +1,108 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const modalSlotRecipe = defineSlotRecipe({
+  className: 'modal',
+  description: 'The styles for the Modal component',
+  jsx: ['MpModal', 'mp-modal'],
+  slots: ['root', 'rootChild', 'body', 'contentRoot', 'contentChild', 'header', 'footer', 'body', 'overlay', 'closeButton'],
+  base: {
+    root: {
+      position: 'relative',
+      zIndex: 'modal'
+    },
+    rootChild: {
+      position: 'fixed',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    },
+    body: {
+      p: 4,
+      flex: 1,
+    },
+    contentRoot: {
+      pos: 'fixed',
+      left: '0',
+      w: '100%',
+      h: '100%',
+      zIndex: 'modal',
+    },
+    contentChild: {
+      outline: 0,
+      width: '100%',
+      position: 'relative',
+      display: 'flex',
+      flexDir: 'column',
+      zIndex: 'modal',
+      fontFamily: 'body',
+      borderColor: 'gray.100',
+      bg: 'white',
+      marginInline: 'auto',
+    },
+
+    header: {
+      px: 4,
+      py: 3,
+      position: 'relative',
+      fontSize: 'md',
+      fontWeight: 'semiBold',
+      bg: 'background',
+      borderTopLeftRadius: 'md',
+      borderTopRightRadius: 'md',
+      borderBottom: 'solid 1px',
+      borderBottomColor: 'gray.100'
+    },
+    closeButton: {
+      position: 'absolute',
+      top: '10px',
+      right: '12px',
+      bg: 'transparent',
+      borderColor: 'transparent'
+    },
+    footer: {
+      display: 'flex',
+      pt: 2,
+      px: 4,
+      pb: 4,
+      justifyContent: 'flex-end',
+    },
+    overlay: {
+      position: 'fixed',
+      bg: 'overlay',
+      left: '0',
+      top: '0',
+      w: '100vw',
+      h: '100vh',
+      zIndex: 'overlay',
+    }
+  },
+  variants: {
+    full: {
+      true: {
+        contentRoot: {
+          top: '0',
+        },
+        contentChild: {
+          height: '100vh',
+          border: 'none',
+          borderRadius: 'none'
+        }
+      },
+      false: {
+        contentRoot: {
+          top: '3.75rem',
+        },
+        contentChild: {
+          height: '100%',
+          borderWidth: '1px',
+          borderRadius: 'md'
+        }
+      }
+    }
+  },
+
+  defaultVariants: {
+    full: false
+  },
+})

package/src/recipes/popover.ts

@@ -0,0 +1,82 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const popoverContentRecipe = defineRecipe({
+  className: 'popover',
+  jsx: ['MpPopover', 'mp-popover'],
+  base: {},
+  variants: {
+    isUnstyled: {
+      true: {},
+      false: {
+        rounded: 'md',
+        shadow: 'lg',
+        borderWidth: '1px',
+        borderColor: 'gray.400',
+        zIndex: 'popover'
+      }
+    },
+    isDark: {
+      true: {
+        background: 'overlay',
+        color: 'white'
+      },
+      false: {
+        background: 'white'
+      }
+    }
+  },
+  defaultVariants: {
+    isDark: false,
+    isUnstyled: false
+  }
+})
+
+const popoverListRecipe = defineRecipe({
+  className: 'popover-list',
+  jsx: ['MpPopoverList', 'mp-popover-list'],
+  base: {
+    pt: 3,
+    pb: 2,
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'column'
+  }
+})
+
+const popoverListItemRecipe = defineRecipe({
+  className: 'popover-list-item',
+  jsx: ['MpPopoverListItem', 'mp-popover-list-item'],
+  base: {
+    px: 3,
+    py: 2,
+    width: 'full',
+    textDecoration: 'none',
+    alignItems: 'center',
+    textAlign: 'left',
+    outline: 'none',
+    fontSize: 'md',
+    flex: ' 0 0 auto',
+    userSelect: 'none',
+    cursor: 'pointer',
+    color: 'dark',
+    _disabled: {
+      color: 'gray.400',
+      bg: 'white',
+      cursor: 'not-allowed'
+    },
+    _highlight: {
+      background: 'white',
+      bg: 'gray.50',
+      color: 'dark',
+      outline: 0
+    },
+    _active: {
+      background: 'ice.50',
+      bg: 'ice.50',
+      color: 'dark',
+      outline: 0
+    }
+  }
+})
+
+export { popoverContentRecipe, popoverListRecipe, popoverListItemRecipe }

package/src/recipes/progress.ts

@@ -0,0 +1,76 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const progressSlotRecipe = defineSlotRecipe({
+  className: 'progress',
+  jsx: ['MpProgress', 'mp-progress'],
+  slots: ['root', 'linear', 'circularBase', 'circularTrack'],
+  base: {
+    root: {
+      position: 'relative',
+      width: 'full',
+      borderRadius: '100px',
+      background: 'gray.100',
+      transition: 'all 250ms linear'
+    },
+    linear: {
+      transition: 'all 250ms linear',
+      height: 'full',
+      borderRadius: '100px',
+      background: 'var(--mp-progress-color)',
+      width: 'var(--mp-progress-width)'
+    },
+    circularBase: {
+      width: 'full',
+      height: 'full',
+      borderRadius: 'full',
+      background:
+        'conic-gradient(var(--mp-progress-color) var(--mp-progress-width), var(--mp-colors-gray-100) 0deg)'
+    },
+    circularTrack: {
+      width: 'calc(100% - 6px)',
+      height: 'calc(100% - 6px)',
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      backgroundColor: 'white',
+      borderRadius: 'full'
+    }
+  },
+  variants: {
+    size: {
+      md: {
+        linear: {
+          height: '3'
+        }
+      },
+      sm: {
+        linear: {
+          height: '2'
+        }
+      }
+    },
+    variant: {
+      linear: {
+        root: {
+          borderRadius: '100px'
+        }
+      },
+      circular: {
+        root: {
+          borderRadius: 'full',
+          width: '22px',
+          height: '22px',
+          background: 'transparent',
+          alignSelf: 'start'
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: 'linear',
+    size: 'md'
+  }
+})
+
+export { progressSlotRecipe }

package/src/recipes/radio.ts

@@ -0,0 +1,103 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const radioSlotRecipe = defineSlotRecipe({
+  className: 'radio',
+  jsx: ['MpRadio', 'mp-radio'],
+  slots: ['root', 'control', 'label'],
+  base: {
+    root: {
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '2',
+      cursor: 'pointer',
+      outline: 'none',
+      '&[data-has-description=true]': {
+        alignItems: 'flex-start',
+        '& .mp-radio__control': {
+          marginTop: '1'
+        }
+      },
+      '& .mp-shared__hidden': {
+        '&:focus + .mp-radio__control': {
+          borderColor: 'blue.400',
+          boxShadow: 'focus'
+        }
+      },
+      _hover: {
+        '& .mp-radio__control': {
+          borderColor: 'gray.400'
+        }
+      },
+      _disabled: {
+        cursor: 'not-allowed',
+        '& .mp-radio__control': {
+          borderColor: 'gray.100 !important',
+          background: 'gray.50 !important',
+          boxShadow: 'none !important',
+
+          '& div': {
+            background: 'gray.400'
+          }
+        }
+      },
+      _invalid: {
+        '& .mp-radio__control': {
+          borderColor: 'red.400',
+          background: 'white'
+        }
+      },
+      _checked: {
+        '& .mp-radio__control': {
+          borderColor: 'blue.400',
+          background: 'blue.400'
+        },
+        _hover: {
+          '& .mp-radio__control': {
+            borderColor: 'blue.400'
+          }
+        }
+      },
+      _indeterminate: {
+        '& .mp-radio__control': {
+          borderColor: 'blue.400',
+          background: 'blue.400'
+        },
+        _hover: {
+          '& .mp-radio__control': {
+            borderColor: 'blue.400'
+          }
+        }
+      }
+    },
+    control: {
+      flex: 'none',
+      transitionDuration: '250ms',
+      transitionProperty: 'background, border-color, box-shadow',
+      transitionTimingFunction: 'linear',
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '18px',
+      height: '18px',
+      borderWidth: '2px',
+      borderColor: 'gray.100',
+      borderRadius: 'full',
+      background: 'white',
+
+      '& div': {
+        width: '2.5',
+        height: '2.5',
+        background: 'white',
+        borderRadius: 'full'
+      }
+    },
+    label: {
+      background: 'transparent'
+    }
+  }
+})
+
+export { radioSlotRecipe }