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

package/src/recipes/checkbox.ts

@@ -0,0 +1,92 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const checkboxSlotRecipe = defineSlotRecipe({
+  className: 'checkbox',
+  jsx: ['MpCheckbox', 'mp-checkbox'],
+  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-checkbox__control': {
+          marginTop: '1'
+        }
+      },
+      '& .mp-shared__hidden': {
+        '&:focus + .mp-checkbox__control': {
+          borderColor: 'blue.400',
+          boxShadow: 'focus'
+        }
+      },
+      _hover: {
+        '& .mp-checkbox__control': {
+          borderColor: 'gray.400'
+        }
+      },
+      _disabled: {
+        cursor: 'not-allowed',
+        '& .mp-checkbox__control': {
+          borderColor: 'gray.100 !important',
+          background: 'gray.50 !important',
+          boxShadow: 'none !important'
+        }
+      },
+      _invalid: {
+        '& .mp-checkbox__control': {
+          borderColor: 'red.400',
+          background: 'white'
+        }
+      },
+      _checked: {
+        '& .mp-checkbox__control': {
+          borderColor: 'blue.400',
+          background: 'blue.400'
+        },
+        _hover: {
+          '& .mp-checkbox__control': {
+            borderColor: 'blue.400'
+          }
+        }
+      },
+      _indeterminate: {
+        '& .mp-checkbox__control': {
+          borderColor: 'blue.400',
+          background: 'blue.400'
+        },
+        _hover: {
+          '& .mp-checkbox__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: 'md',
+      background: 'white'
+    },
+    label: {
+      background: 'transparent'
+    }
+  }
+})
+
+export { checkboxSlotRecipe }

package/src/recipes/divider.ts

@@ -0,0 +1,31 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const dividerRecipe = defineRecipe({
+  className: 'divider',
+  jsx: ['MpDivider', 'mp-divider'],
+  base: {
+    border: 0,
+    opacity: 0.6,
+    color: 'rgb(208, 214, 221)'
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        borderBottom: '0.0625rem solid',
+        height: 'auto',
+        marginY: 2
+      },
+      vertical: {
+        borderLeft: '0.0625rem solid',
+        height: 'auto',
+        marginX: 2
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    orientation: 'horizontal'
+  }
+})
+
+export { dividerRecipe }

package/src/recipes/form-control.ts

@@ -0,0 +1,40 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const formControlSlotRecipe = defineSlotRecipe({
+  className: 'form-control',
+  jsx: ['MpFormControl', 'mp-form-control'],
+  slots: ['root', 'label', 'required', 'helpText', 'errorMessage'],
+  base: {
+    root: {},
+    label: {
+      fontSize: 'md',
+      fontWeight: 'semiBold',
+      marginBottom: '1',
+      textAlign: 'left',
+      verticalAlign: 'middle',
+      display: 'flex'
+    },
+    required: {
+      color: 'red.400',
+      marginLeft: '1'
+    },
+    helpText: {
+      color: 'gray.600',
+      fontSize: 'sm',
+      marginTop: '1'
+    },
+    errorMessage: {
+      color: 'red.400',
+      fontSize: 'sm',
+      marginTop: '1',
+      textAlign: 'left',
+      verticalAlign: 'middle',
+      display: 'flex'
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+export { formControlSlotRecipe }

package/src/recipes/icon.ts

@@ -0,0 +1,31 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const iconRecipe = defineRecipe({
+  className: 'icon',
+  jsx: ['MpIcon', 'mp-icon'],
+  base: {
+    color: 'var(--mp-icon-color)',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    backfaceVisibility: 'hidden',
+    flexShrink: 0,
+    '&:not(:root)': {
+      overflow: 'hidden'
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        width: '5',
+        height: '5'
+      },
+      md: {
+        width: '6',
+        height: '6'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+})

package/src/recipes/index.ts

@@ -0,0 +1,61 @@
+import { tagSlotRecipe } from './tag'
+import { avatarSlotRecipe, avatarGroupSlotRecipe } from './avatar'
+import { buttonRecipe, buttonGroupRecipe } from './button'
+import { inputSlotRecipe, inputGroupSlotRecipe, inputAddonSlotRecipe } from './input'
+import { selectSlotRecipe } from './select'
+import { textRecipe } from './text'
+import { iconRecipe } from './icon'
+import { spinnerRecipe } from './spinner'
+import { accordion } from './accordion'
+import { popoverContentRecipe, popoverListRecipe, popoverListItemRecipe } from './popover'
+import { badgeRecipe } from './badge'
+import { textareaRecipe } from './textarea'
+import { tooltipRecipe } from './tooltip'
+import { tabListRecipe, tabRecipe, selectedBorderRecipe } from './tabs'
+import { checkboxSlotRecipe } from './checkbox'
+import { radioSlotRecipe } from './radio'
+import { sharedSlotRecipe } from './shared'
+import { toggleSlotRecipe } from './toggle'
+import { tableRecipe, tableContainerRecipe } from './table'
+import { progressSlotRecipe } from './progress'
+import { formControlSlotRecipe } from './form-control'
+import { inputTagSlotRecipe } from './input-tag'
+import { dividerRecipe } from './divider'
+
+export const recipes = {
+  buttonRecipe,
+  buttonGroupRecipe,
+  textRecipe,
+  iconRecipe,
+  spinnerRecipe,
+  popoverContentRecipe,
+  popoverListRecipe,
+  popoverListItemRecipe,
+  badgeRecipe,
+  textareaRecipe,
+  tooltipRecipe,
+  tabListRecipe,
+  tabRecipe,
+  selectedBorderRecipe,
+  tableRecipe,
+  tableContainerRecipe,
+  dividerRecipe
+}
+
+export const slotRecipes = {
+  accordion,
+  checkboxSlotRecipe,
+  radioSlotRecipe,
+  sharedSlotRecipe,
+  progressSlotRecipe,
+  toggleSlotRecipe,
+  tagSlotRecipe,
+  inputSlotRecipe,
+  inputGroupSlotRecipe,
+  inputAddonSlotRecipe,
+  avatarSlotRecipe,
+  avatarGroupSlotRecipe,
+  selectSlotRecipe,
+  formControlSlotRecipe,
+  inputTagSlotRecipe
+}

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/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 }