@mekari/pixel3-theme 0.0.11 → 0.1.0

package/src/recipes/slider.ts

@@ -0,0 +1,81 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const sliderSlotRecipe = defineSlotRecipe({
+  className: 'slider',
+  jsx: ['MpSlider', 'mp-slider'],
+  slots: [
+    'root',
+    'labelWrapper',
+    'sliderWrapper',
+    'progress',
+    'slider',
+    'inputWrapper',
+    'input',
+    'legendWrapper'
+  ],
+  base: {
+    root: {
+      position: 'relative',
+      width: 'full',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '10px'
+    },
+    labelWrapper: {
+      display: 'flex',
+      justifyContent: 'space-between'
+    },
+    sliderWrapper: {
+      position: 'relative',
+      width: 'full',
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    progress: {
+      position: 'relative',
+      height: '2',
+      borderRadius: '100px'
+    },
+    slider: {
+      position: 'absolute',
+      height: '2',
+      borderRadius: '100px'
+    },
+    inputWrapper: {
+      position: 'relative'
+    },
+    input: {
+      appearance: 'none',
+      position: 'absolute',
+      width: 'full',
+      height: '2',
+      top: '-8px',
+      background: 'none',
+      outline: 'none',
+
+      _focusVisible: {
+        borderRadius: '100px',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'blue.400',
+        boxShadow: 'focus'
+      },
+
+      '&::-webkit-slider-thumb': {
+        appearance: 'none',
+        width: '5',
+        height: '5',
+        borderRadius: 'full',
+        borderStyle: 'solid',
+        borderColor: 'gray.100',
+        boxShadow: 'sm',
+        filter:
+          'drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.05)) drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.10))',
+        transition: 'border-color 250ms',
+        pointerEvents: 'auto'
+      }
+    }
+  }
+})
+
+export { sliderSlotRecipe }

package/src/recipes/tabs.ts

@@ -1,19 +1,36 @@
-import { defineRecipe } from '@pandacss/dev'
+import { defineRecipe, defineSlotRecipe } from '@pandacss/dev'
 
-const tabListRecipe = defineRecipe({
+const tabListSlotRecipe = defineSlotRecipe({
   className: 'tab-list',
   jsx: ['MpTabList', 'mp-tab-list'],
+  slots: ['root', 'list'],
   base: {
-    display: 'flex',
-    overflow: 'auto',
-    gap: '1.5rem',
-    fontSize: 'md',
-    color: 'gray.600',
-    marginBottom: 6,
-    padding: 0.5,
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    maxWidth: 'full'
+    root: {
+      position: 'relative',
+      '&[data-border=true]': {
+        _before: {
+          content: '""',
+          height: '1px',
+          background: 'gray.100',
+          position: 'absolute',
+          right: 0,
+          left: 0,
+          bottom: '1px'
+        }
+      }
+    },
+    list: {
+      display: 'flex',
+      overflow: 'auto',
+      gap: '1.5rem',
+      fontSize: 'md',
+      color: 'gray.600',
+      marginBottom: 6,
+      padding: 0.5,
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      maxWidth: 'full'
+    }
   }
 })
 
@@ -201,4 +218,4 @@ const selectedBorderRecipe = defineRecipe({
   }
 })
 
-export { tabListRecipe, tabRecipe, selectedBorderRecipe }
+export { tabListSlotRecipe, tabRecipe, selectedBorderRecipe }

package/src/recipes/timeline.ts

@@ -0,0 +1,211 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const timelineSlotRecipe = defineSlotRecipe({
+  className: 'timeline',
+  jsx: [
+    'MpTimeline',
+    'MpTimelineBody',
+    'MpTimelineCaption',
+    'MpTimelineContent',
+    'MpTimelineItem',
+    'mp-timeline',
+    'mp-timeline-body',
+    'mp-timeline-caption',
+    'mp-timeline-content',
+    'mp-timeline-item'
+  ],
+  slots: ['root', 'body', 'caption', 'content', 'item'],
+  base: {
+    root: {
+      maxWidth: 'sm'
+    },
+    body: {
+      marginLeft: '3',
+      paddingTop: '6px',
+      paddingBottom: '3',
+      width: 'full'
+    },
+    caption: {
+      fontSize: 'sm',
+      color: 'gray.400',
+      lineHeight: 'sm',
+      marginTop: '0.5'
+    },
+    content: {
+      paddingTop: 3
+    },
+    item: {
+      display: 'flex'
+    }
+  }
+})
+
+const timelineDocumentSlotRecipe = defineSlotRecipe({
+  className: 'timelineDocument',
+  jsx: ['MpTimelineDocument', 'mp-timeline-document'],
+  slots: ['root', 'content', 'title', 'description', 'fileSize'],
+  base: {
+    root: {
+      display: 'flex',
+      alignItems: 'center',
+      paddingX: '3',
+      paddingY: '2',
+      borderRadius: 'lg',
+      borderWidth: '1px',
+      borderColor: 'gray.100',
+      width: 'full',
+      gap: '3'
+    },
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    title: {
+      fontSize: 'sm',
+      lineHeight: 'md',
+      fontWeight: 'regular',
+      letterSpacing: 'normal',
+      color: 'dark'
+    },
+    description: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    fileSize: {
+      fontSize: 'sm',
+      lineHeight: 'md',
+      fontWeight: 'regular',
+      letterSpacing: 'normal',
+      color: 'gray.400'
+    }
+  },
+  variants: {
+    icon: {
+      true: { content: { marginLeft: '3' } },
+      false: { content: { marginLeft: '0' } }
+    }
+  },
+  defaultVariants: {
+    icon: false
+  }
+})
+
+const timelineLogSlotRecipe = defineSlotRecipe({
+  className: 'timelineLog',
+  jsx: ['MpTimelineLog', 'MpTimelineLogItem', 'mp-timeline-log', 'mp-timeline-log-item'],
+  slots: ['root', 'log', 'logText', 'logIcon', 'content', 'logItem'],
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    log: {
+      display: 'flex',
+      cursor: 'pointer'
+    },
+    logText: {
+      color: 'gray.400',
+      _groupHover: {
+        color: 'blue.500'
+      }
+    },
+    logIcon: {
+      color: 'gray.400',
+      _groupHover: { color: 'blue.500' }
+    },
+    content: {
+      listStyleType: 'disc',
+      paddingLeft: 5
+    },
+    logItem: {
+      color: 'gray.600'
+    }
+  }
+})
+
+const timelineSeparatorSlotRecipe = defineSlotRecipe({
+  className: 'timelineSeparetor',
+  jsx: ['MpTimelineSeparator', 'mp-timeline-separator'],
+  slots: ['root', 'topConnector', 'bottomConnector'],
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    topConnector: {
+      height: '6px',
+      width: '2px',
+      backgroundColor: 'gray.100',
+      '&[data-position=first]': {
+        backgroundColor: 'transparent'
+      },
+    },
+    bottomConnector: {
+      height: '100%',
+      flexGrow: 1,
+      width: '2px',
+      roundedTop: '2px',
+      backgroundColor: 'gray.100',
+      '&[data-position=last]': {
+        backgroundColor: 'transparent'
+      },
+    }
+  }
+})
+
+const timelineAccordionSlotRecipe = defineSlotRecipe({
+  className: 'timelineAccordion',
+  jsx: ['MpTimelineAccordion', 'mp-timeline-accordion'],
+  slots: ['body', 'separator', 'icon', 'topConnector', 'bottomConnector', 'title', 'label'],
+  base: {
+    body: {
+      display: 'flex'
+    },
+    separator: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    icon: {
+      my: 1,
+      cursor: 'pointer'
+    },
+    topConnector: {
+      height: '4px',
+      width: '2px',
+      backgroundColor: 'gray.100',
+      '&[data-position=first]': {
+        backgroundColor: 'transparent'
+      },
+      roundedBottom: 'full'
+    },
+    bottomConnector: {
+      flexGrow: 1,
+      width: '2px',
+      backgroundColor: 'gray.100',
+      '&[data-position=last]': {
+        backgroundColor: 'transparent'
+      },
+      roundedTop: 'full'
+    },
+    title: {
+      paddingTop: 1
+    },
+    label: {
+      fontSize: 'md',
+      lineHeight: 'md',
+      color: 'dark',
+      fontWeight: 'semibold',
+      letterSpacing: 'normal'
+    }
+  }
+})
+
+export {
+  timelineSlotRecipe,
+  timelineDocumentSlotRecipe,
+  timelineLogSlotRecipe,
+  timelineSeparatorSlotRecipe,
+  timelineAccordionSlotRecipe
+}