@mekari/pixel3-theme 0.0.8 → 0.0.9-dev.1

package/src/recipes/date-picker.ts

@@ -0,0 +1,320 @@
+import { defineSlotRecipe, defineRecipe } from '@pandacss/dev'
+
+const datePickerSlotRecipe = defineSlotRecipe({
+  className: 'datepicker',
+  jsx: ['MpDatePicker', 'mp-date-picker'],
+  slots: ['root', 'popoverContent'],
+  base: {
+    'root': {
+      width: '100%',
+      position: 'relative'
+    },
+    popoverContent: {
+      minWidth: '280px',
+      padding: 4,
+    }
+  }
+})
+
+const calendarPanelRangeRecipe = defineRecipe({
+  className: 'calendarPanelRange',
+  base: {
+    display: 'grid',
+    gap: 4,
+    gridTemplateColumns: '2'
+  }
+})
+
+const tableDateSlotRecipe = defineSlotRecipe({
+  className: 'tableDate',
+  jsx: ['TableDate', 'table-date'],
+  slots: ['headerRoot', 'headerLabel', 'dayWrapper', 'dateItemRoot', 'dateItemWrapper', 'shortcutLabelWrapper'],
+  base: {
+    headerRoot: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
+    headerLabel: { cursor: 'pointer', fontWeight: 'semiBold' },
+    dayWrapper: { display: 'flex', marginTop: 3 },
+    dateItemRoot: { display: 'flex', flexDirection: 'column', gap: 1, marginTop: '1.5' },
+    dateItemWrapper: { display: 'flex' },
+    shortcutLabelWrapper: { display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 3 }
+  }
+})
+
+const tableMonthSlotRecipe = defineSlotRecipe({
+  className: 'tableMonth',
+  jsx: ['TableMonth', 'table-month'],
+  slots: ['headerRoot', 'headerLabel', 'monthItemRoot', 'monthItemWrapper', 'shortcutLabelWrapper'],
+  base: {
+    headerRoot: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
+    headerLabel: { cursor: 'pointer', fontWeight: 'semiBold' },
+    monthItemRoot: { display: 'flex', flexDirection: 'column', gap: 1, marginTop: '3' },
+    monthItemWrapper: { display: 'grid', gridTemplateColumns: '3' },
+    shortcutLabelWrapper: { display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 3 }
+  }
+})
+
+const tableYearSlotRecipe = defineSlotRecipe({
+  className: 'tableYear',
+  jsx: ['TableYear', 'table-year'],
+  slots: ['headerRoot', 'headerLabel', 'yearItemRoot', 'yearItemWrapper', 'shortcutLabelWrapper'],
+  base: {
+    headerRoot: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
+    headerLabel: { fontWeight: 'semiBold' },
+    yearItemRoot: { display: 'flex', flexDirection: 'column', gap: 1, marginTop: '3' },
+    yearItemWrapper: { display: 'grid', gridTemplateColumns: '4' },
+    shortcutLabelWrapper: { display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 3 }
+  }
+})
+
+const dayItemRecipe = defineRecipe({
+  className: 'day',
+  jsx: ['Day', 'day'],
+  base: {
+    width: '36px',
+    height: '36px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexShrink: 0,
+    borderWidth: '1px',
+    borderColor: 'transparent',
+    cursor: 'pointer',
+    color: 'gray.600',
+    fontSize: 'sm',
+    textAlign: 'center'
+  }
+})
+
+const dateItemRecipe = defineRecipe({
+  className: 'dateItem',
+  jsx: ['DateItem', 'date-item', 'Date', 'date'],
+  base: {
+    position: 'relative',
+    width: '36px',
+    height: '36px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexShrink: 0,
+    borderWidth: '1px',
+    borderColor: 'transparent',
+    cursor: 'pointer',
+    fontSize: 'md',
+    transition: 'box-shadow 300ms',
+    _disabled: {
+      color: 'gray.400',
+      cursor: 'not-allowed',
+      borderColor: 'transparent',
+      backgroundColor: 'transparent'
+    }
+  },
+  variants: {
+    status: {
+      default: {
+        rounded: 'sm',
+        _hover: {
+          borderColor: 'gray.50',
+          background: 'gray.50'
+        },
+        _focus: {
+          borderColor: 'blue.400',
+          background: 'transparent',
+          shadow: 'outer'
+        }
+      },
+      selected: {
+        rounded: 'sm',
+        borderColor: 'blue.400',
+        backgroundColor: 'blue.400',
+        color: 'white'
+      },
+      range: {
+        borderColor: 'ice.50',
+        backgroundColor: 'ice.50'
+      },
+      today: {
+        rounded: 'sm',
+        borderColor: 'orange.50',
+        backgroundColor: 'orange.50',
+      },
+      notThisMonth: {
+        color: 'gray.600'
+      },
+      disabled: {},
+
+      // Week
+      weekHoveredStart: {
+        roundedLeft: 'sm',
+        borderColor: 'gray.50',
+        background: 'gray.50'
+      },
+      weekHoveredMiddle: {
+        borderColor: 'gray.50',
+        background: 'gray.50'
+      },
+      weekHoveredEnd: {
+        roundedRight: 'sm',
+        borderColor: 'gray.50',
+        background: 'gray.50'
+      },
+      weekSelectedStart: {
+        roundedLeft: 'sm',
+        borderColor: 'blue.400',
+        background: 'blue.400',
+        color: 'white'
+      },
+      weekSelectedMiddle: {
+        borderColor: 'blue.400',
+        background: 'blue.400',
+        color: 'white'
+      },
+      weekSelectedEnd: {
+        roundedRight: 'sm',
+        borderColor: 'blue.400',
+        background: 'blue.400',
+        color: 'white'
+      },
+    }
+  },
+  staticCss: ['*']
+})
+
+const pinbarSlotRecipe = defineSlotRecipe({
+  className: 'pinbar',
+  slots: ['root', 'pinbar'],
+  base: {
+    root: {
+      position: 'absolute',
+      bottom: 0,
+      height: 1,
+      display: 'flex',
+      justifyContent: 'center',
+    },
+    pinbar: {
+      width: 6,
+      height: 1,
+      borderRadius: '2px',
+      background: 'orange.500'
+    }
+  }
+})
+
+const monthItemRecipe = defineRecipe({
+  className: 'monthItem',
+  jsx: ['MonthItem', 'month-item'],
+  base: {
+    width: 'full',
+    height: '36px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexShrink: 0,
+    borderWidth: '1px',
+    borderColor: 'transparent',
+    cursor: 'pointer',
+    _disabled: {
+      color: 'gray.400',
+      cursor: 'not-allowed',
+      borderColor: 'transparent',
+      backgroundColor: 'transparent'
+    }
+  },
+  variants: {
+    status: {
+      disabled: {},
+      default: {
+        rounded: 'sm',
+        _hover: {
+          borderColor: 'gray.50',
+          background: 'gray.50'
+        },
+        _focus: {
+          borderColor: 'blue.400',
+          background: 'transparent',
+          shadow: 'outer'
+        }
+      },
+      selected: {
+        rounded: 'sm',
+        borderColor: 'blue.400',
+        backgroundColor: 'blue.400',
+        color: 'white'
+      },
+      range: {
+        borderColor: 'ice.50',
+        backgroundColor: 'ice.50'
+      },
+      today: {
+        rounded: 'sm',
+        borderColor: 'orange.50',
+        backgroundColor: 'orange.50',
+      },
+    },
+  },
+  staticCss: ['*']
+})
+
+const yearItemRecipe = defineRecipe({
+  className: 'yearItem',
+  jsx: ['YearItem', 'year-item'],
+  base: {
+    width: 'full',
+    height: '36px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexShrink: 0,
+    borderWidth: '1px',
+    borderColor: 'transparent',
+    cursor: 'pointer',
+    _disabled: {
+      color: 'gray.400',
+      cursor: 'not-allowed',
+      borderColor: 'transparent',
+      backgroundColor: 'transparent'
+    }
+  },
+  variants: {
+    status: {
+      disabled: {},
+      default: {
+        rounded: 'sm',
+        _hover: {
+          borderColor: 'gray.50',
+          background: 'gray.50'
+        },
+        _focus: {
+          borderColor: 'blue.400',
+          background: 'transparent',
+          shadow: 'outer'
+        }
+      },
+      selected: {
+        rounded: 'sm',
+        borderColor: 'blue.400',
+        backgroundColor: 'blue.400',
+        color: 'white'
+      },
+      range: {
+        borderColor: 'ice.50',
+        backgroundColor: 'ice.50'
+      },
+      today: {
+        rounded: 'sm',
+        borderColor: 'orange.50',
+        backgroundColor: 'orange.50',
+      },
+    },
+  },
+  staticCss: ['*']
+})
+
+export { 
+  datePickerSlotRecipe, calendarPanelRangeRecipe, 
+  tableDateSlotRecipe, tableMonthSlotRecipe, tableYearSlotRecipe, 
+  dayItemRecipe , dateItemRecipe, monthItemRecipe, yearItemRecipe,
+  pinbarSlotRecipe
+}

package/src/recipes/index.ts

@@ -28,6 +28,19 @@ import { segmentedControlSlotRecipe } from './segmented-control'
 import { toastSlotRecipe } from './toast'
 import { broadcastSlotRecipe } from './broadcast'
 import { richTextEditorSlotRecipe, RTEStyleProviderRecipe } from './rich-text-editor'
+import {
+  datePickerSlotRecipe,
+  calendarPanelRangeRecipe,
+  tableDateSlotRecipe,
+  tableMonthSlotRecipe,
+  tableYearSlotRecipe,
+  dayItemRecipe,
+  dateItemRecipe,
+  monthItemRecipe,
+  yearItemRecipe,
+  pinbarSlotRecipe
+} from './date-picker'
+import { carouselSlotRecipe } from './carousel'
 
 import {
   bannerSlotRecipe,
@@ -60,7 +73,12 @@ export const recipes = {
   bannerDescriptionRecipe,
   bannerLinkRecipe,
   bannerCloseButtonRecipe,
-  RTEStyleProviderRecipe
+  RTEStyleProviderRecipe,
+  calendarPanelRangeRecipe,
+  dayItemRecipe,
+  dateItemRecipe,
+  monthItemRecipe,
+  yearItemRecipe
 }
 
 export const slotRecipes = {
@@ -88,5 +106,11 @@ export const slotRecipes = {
   segmentedControlSlotRecipe,
   toastSlotRecipe,
   broadcastSlotRecipe,
-  richTextEditorSlotRecipe
+  richTextEditorSlotRecipe,
+  datePickerSlotRecipe,
+  tableDateSlotRecipe,
+  tableMonthSlotRecipe,
+  tableYearSlotRecipe,
+  pinbarSlotRecipe,
+  carouselSlotRecipe
 }