@mekari/pixel3-theme 0.0.11 → 0.1.0-dev.0

package/dist/recipes/accordion.d.mts

@@ -1,5 +1,5 @@
 import * as _pandacss_dev from '@pandacss/dev';
 
-declare const accordion: _pandacss_dev.SlotRecipeConfig;
+declare const accordionSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 
-export { accordion };
+export { accordionSlotRecipe };

package/dist/recipes/accordion.d.ts

@@ -1,5 +1,5 @@
 import * as _pandacss_dev from '@pandacss/dev';
 
-declare const accordion: _pandacss_dev.SlotRecipeConfig;
+declare const accordionSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 
-export { accordion };
+export { accordionSlotRecipe };

package/dist/recipes/autocomplete.d.mts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const autocompleteSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { autocompleteSlotRecipe };

package/dist/recipes/autocomplete.d.ts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const autocompleteSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { autocompleteSlotRecipe };

package/dist/recipes/color-picker.d.mts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const colorPickerSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { colorPickerSlotRecipe };

package/dist/recipes/color-picker.d.ts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const colorPickerSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { colorPickerSlotRecipe };

package/dist/recipes/date-picker.d.mts

@@ -2,6 +2,7 @@ import * as _pandacss_dev from '@pandacss/dev';
 
 declare const datePickerSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 declare const calendarPanelRangeRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const timePanelSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 declare const tableDateSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 declare const tableMonthSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 declare const tableYearSlotRecipe: _pandacss_dev.SlotRecipeConfig;
@@ -12,4 +13,4 @@ declare const monthItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVa
 declare const yearItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 declare const timeItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 
-export { calendarPanelRangeRecipe, dateItemRecipe, datePickerSlotRecipe, dayItemRecipe, monthItemRecipe, pinbarSlotRecipe, tableDateSlotRecipe, tableMonthSlotRecipe, tableYearSlotRecipe, timeItemRecipe, yearItemRecipe };
+export { calendarPanelRangeRecipe, dateItemRecipe, datePickerSlotRecipe, dayItemRecipe, monthItemRecipe, pinbarSlotRecipe, tableDateSlotRecipe, tableMonthSlotRecipe, tableYearSlotRecipe, timeItemRecipe, timePanelSlotRecipe, yearItemRecipe };

package/dist/recipes/date-picker.d.ts

@@ -2,6 +2,7 @@ import * as _pandacss_dev from '@pandacss/dev';
 
 declare const datePickerSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 declare const calendarPanelRangeRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const timePanelSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 declare const tableDateSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 declare const tableMonthSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 declare const tableYearSlotRecipe: _pandacss_dev.SlotRecipeConfig;
@@ -12,4 +13,4 @@ declare const monthItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVa
 declare const yearItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 declare const timeItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 
-export { calendarPanelRangeRecipe, dateItemRecipe, datePickerSlotRecipe, dayItemRecipe, monthItemRecipe, pinbarSlotRecipe, tableDateSlotRecipe, tableMonthSlotRecipe, tableYearSlotRecipe, timeItemRecipe, yearItemRecipe };
+export { calendarPanelRangeRecipe, dateItemRecipe, datePickerSlotRecipe, dayItemRecipe, monthItemRecipe, pinbarSlotRecipe, tableDateSlotRecipe, tableMonthSlotRecipe, tableYearSlotRecipe, timeItemRecipe, timePanelSlotRecipe, yearItemRecipe };

package/dist/recipes/index.d.mts

@@ -12,7 +12,6 @@ declare const recipes: {
     badgeRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     textareaRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tooltipRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
-    tabListRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tabRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     selectedBorderRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tableRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
@@ -31,7 +30,7 @@ declare const recipes: {
     timeItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
-    accordion: _pandacss_types.SlotRecipeConfig;
+    accordionSlotRecipe: _pandacss_types.SlotRecipeConfig;
     checkboxSlotRecipe: _pandacss_types.SlotRecipeConfig;
     radioSlotRecipe: _pandacss_types.SlotRecipeConfig;
     sharedSlotRecipe: _pandacss_types.SlotRecipeConfig;
@@ -57,12 +56,22 @@ declare const slotRecipes: {
     broadcastSlotRecipe: _pandacss_types.SlotRecipeConfig;
     richTextEditorSlotRecipe: _pandacss_types.SlotRecipeConfig;
     datePickerSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    timePanelSlotRecipe: _pandacss_types.SlotRecipeConfig;
     tableDateSlotRecipe: _pandacss_types.SlotRecipeConfig;
     tableMonthSlotRecipe: _pandacss_types.SlotRecipeConfig;
     tableYearSlotRecipe: _pandacss_types.SlotRecipeConfig;
     pinbarSlotRecipe: _pandacss_types.SlotRecipeConfig;
     carouselSlotRecipe: _pandacss_types.SlotRecipeConfig;
     chartSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    autocompleteSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    timelineSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    timelineDocumentSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    timelineLogSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    timelineSeparatorSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    timelineAccordionSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    tabListSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    colorPickerSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    sliderSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/recipes/index.d.ts

@@ -12,7 +12,6 @@ declare const recipes: {
     badgeRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     textareaRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tooltipRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
-    tabListRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tabRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     selectedBorderRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tableRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
@@ -31,7 +30,7 @@ declare const recipes: {
     timeItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
-    accordion: _pandacss_types.SlotRecipeConfig;
+    accordionSlotRecipe: _pandacss_types.SlotRecipeConfig;
     checkboxSlotRecipe: _pandacss_types.SlotRecipeConfig;
     radioSlotRecipe: _pandacss_types.SlotRecipeConfig;
     sharedSlotRecipe: _pandacss_types.SlotRecipeConfig;
@@ -57,12 +56,22 @@ declare const slotRecipes: {
     broadcastSlotRecipe: _pandacss_types.SlotRecipeConfig;
     richTextEditorSlotRecipe: _pandacss_types.SlotRecipeConfig;
     datePickerSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    timePanelSlotRecipe: _pandacss_types.SlotRecipeConfig;
     tableDateSlotRecipe: _pandacss_types.SlotRecipeConfig;
     tableMonthSlotRecipe: _pandacss_types.SlotRecipeConfig;
     tableYearSlotRecipe: _pandacss_types.SlotRecipeConfig;
     pinbarSlotRecipe: _pandacss_types.SlotRecipeConfig;
     carouselSlotRecipe: _pandacss_types.SlotRecipeConfig;
     chartSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    autocompleteSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    timelineSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    timelineDocumentSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    timelineLogSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    timelineSeparatorSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    timelineAccordionSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    tabListSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    colorPickerSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    sliderSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/recipes/slider.d.mts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const sliderSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { sliderSlotRecipe };

package/dist/recipes/slider.d.ts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const sliderSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { sliderSlotRecipe };

package/dist/recipes/tabs.d.mts

@@ -1,7 +1,7 @@
 import * as _pandacss_dev from '@pandacss/dev';
 
-declare const tabListRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const tabListSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 declare const tabRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 declare const selectedBorderRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 
-export { selectedBorderRecipe, tabListRecipe, tabRecipe };
+export { selectedBorderRecipe, tabListSlotRecipe, tabRecipe };

package/dist/recipes/tabs.d.ts

@@ -1,7 +1,7 @@
 import * as _pandacss_dev from '@pandacss/dev';
 
-declare const tabListRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const tabListSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 declare const tabRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 declare const selectedBorderRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 
-export { selectedBorderRecipe, tabListRecipe, tabRecipe };
+export { selectedBorderRecipe, tabListSlotRecipe, tabRecipe };

package/dist/recipes/timeline.d.mts

@@ -0,0 +1,9 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const timelineSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const timelineDocumentSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const timelineLogSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const timelineSeparatorSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const timelineAccordionSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { timelineAccordionSlotRecipe, timelineDocumentSlotRecipe, timelineLogSlotRecipe, timelineSeparatorSlotRecipe, timelineSlotRecipe };

package/dist/recipes/timeline.d.ts

@@ -0,0 +1,9 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const timelineSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const timelineDocumentSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const timelineLogSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const timelineSeparatorSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const timelineAccordionSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { timelineAccordionSlotRecipe, timelineDocumentSlotRecipe, timelineLogSlotRecipe, timelineSeparatorSlotRecipe, timelineSlotRecipe };

package/package.json

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

package/src/recipes/accordion.ts

@@ -1,57 +1,54 @@
-// import { accordionAnatomy } from "@ark-ui/anatomy";
 import { defineSlotRecipe } from '@pandacss/dev'
 
-export const accordion = defineSlotRecipe({
+export const accordionSlotRecipe = defineSlotRecipe({
   className: 'accordion',
-  slots: ['root', 'item', 'trigger', 'content'],
+  slots: ['header', 'item', 'panel'],
+  jsx: [
+    'MpAccordionHeader',
+    'MpAccordionItem',
+    'MpAccordionPanel',
+    'mp-accordion-header',
+    'mp-accordion-item',
+    'mp-accordion-panel'
+  ],
   base: {
-    root: {
-      divideY: '1px',
-      width: 'full'
-    },
-    trigger: {
-      alignItems: 'center',
-      color: 'fg.default',
-      cursor: 'pointer',
+    header: {
       display: 'flex',
-      fontWeight: 'normal',
-      justifyContent: 'space-between',
-      textStyle: 'lg',
-      width: 'full',
-      fontSize: 'lg'
+      alignItems: 'center',
+      width: '100%',
+      outline: 0,
+      gap: 4,
+      transition: 'all 0.2s',
+      py: 3,
+      fontWeight: 'semiBold',
+      fontSize: 'md',
+      color: 'dark',
+      _disabled: { opacity: '0.4', cursor: 'not-allowed' }
     },
-    content: {
-      color: 'fg.muted',
-      display: 'grid',
-      gridTemplateRows: '0fr',
-      transitionProperty: 'grid-template-rows, padding-bottom',
-      transitionDuration: 'normal',
-      transitionTimingFunction: 'default',
-      _open: {
-        gridTemplateRows: '1fr'
-      },
-      '& > div': {
-        overflow: 'hidden'
-      }
+    item: {
+      borderBottomWidth: '1px',
+      borderColor: 'gray.100',
+      _last: { borderBottomWidth: '1px', borderColor: 'gray.100' }
+    },
+    panel: {
+      py: 3
     }
   },
-  defaultVariants: {
-    size: 'md'
-  },
   variants: {
-    size: {
-      md: {
-        trigger: {
-          py: '4'
-        },
-        content: {
-          pb: '6',
-          pr: '8',
-          _closed: {
-            pb: '0'
-          }
+    isClickable: {
+      true: {
+        header: {
+          cursor: 'pointer'
+        }
+      },
+      false: {
+        header: {
+          cursor: 'default'
         }
       }
     }
+  },
+  defaultVariants: {
+    isClickable: true
   }
 })

package/src/recipes/autocomplete.ts

@@ -0,0 +1,47 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const autocompleteSlotRecipe = defineSlotRecipe({
+  className: 'autocomplete',
+  jsx: ['MpAutocomplete', 'mp-autocomplete'],
+  slots: ['groupText', 'popoverContent', 'buttonAction', 'emptyText', 'contentLoading'],
+  base: {
+    groupText: {
+      px: 3, py: 2 
+    },
+    popoverContent: {
+      maxHeight: '300px',
+      overflowY: 'auto',
+      position: 'relative'
+    },
+    buttonAction: {
+      cursor: 'pointer',
+      width: 'full',
+      textAlign: 'center',
+      roundedTop: '0',
+      borderTopWidth: '1px',
+      borderColor: 'blue.50',
+      color: 'blue.400',
+      position: 'sticky',
+      bottom: '0px',
+      bg: 'white',
+      fontSize: 'md',
+      zIndex: '999',
+      py: 2,
+      height: '9.5',
+      _hover: { color: 'blue.500' }
+    },
+    emptyText: {
+      px: 3, 
+      py: 2
+    },
+    contentLoading: {
+      px: 3, 
+      py: 2, 
+      display: 'flex', 
+      alignItems: 'center', 
+      gap: 3
+    }
+  },
+})
+
+export { autocompleteSlotRecipe }

package/src/recipes/color-picker.ts

@@ -0,0 +1,126 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const colorPickerSlotRecipe = defineSlotRecipe({
+  className: 'color-picker',
+  jsx: ['MpColorPicker', 'mp-color-picker'],
+  slots: [
+    'root',
+    'popoverTrigger',
+    'boxColor',
+    'inputTrigger',
+    'iconDropdown',
+    'popoverContent',
+    'wrapperAdvance',
+    'wrapperBasic',
+    'wrapperSaturation',
+    'wrapperHue',
+    'wrapperInput',
+    'boxPreset',
+    'wrapperPreset',
+    'wrapperBasicPreset'
+  ],
+  base: {
+    root: {
+      width: '280px',
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2'
+    },
+    popoverTrigger: {
+      display: 'flex',
+      alignItems: 'center',
+      cursor: 'pointer',
+      position: 'relative',
+      height: '38px',
+      pl: '2',
+      pr: '3',
+      borderRadius: 'md',
+      border: '1px solid',
+      _focus: {
+        boxShadow: 'outline !important',
+        borderColor: 'blue.400 !important',
+        outline: 'none'
+      }
+    },
+    boxColor: {
+      flex: 'none',
+      width: '6',
+      height: '6',
+      borderWidth: '1px',
+      borderColor: 'gray.50',
+      borderRadius: 'sm',
+      mr: '2'
+    },
+    inputTrigger: {
+      margin: '-12px',
+      textTransform: 'uppercase'
+    },
+    iconDropdown: {
+      position: 'absolute',
+      right: '3',
+      ml: '2',
+      _focus: {
+        outline: 'none'
+      }
+    },
+    popoverContent: {
+      bg: 'white',
+      rounded: 'md',
+      shadow: 'lg',
+      borderWidth: '1px',
+      borderColor: 'gray.400'
+    },
+    wrapperAdvance: {
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'relative',
+      width: '280px',
+      padding: '3',
+      gap: '3'
+    },
+    wrapperBasic: {
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'relative',
+      width: '188px',
+      padding: '3',
+      gap: '3'
+    },
+    wrapperSaturation: {
+      position: 'relative',
+      width: '100%',
+      height: '144px',
+      overflow: 'hidden'
+    },
+    wrapperHue: {
+      position: 'relative',
+      height: '28px'
+    },
+    wrapperInput: {
+      position: 'relative',
+      display: 'flex',
+      gap: '2'
+    },
+    boxPreset: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2',
+      position: 'relative'
+    },
+    wrapperPreset: {
+      position: 'relative',
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '5px'
+    },
+    wrapperBasicPreset: {
+      position: 'relative',
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '4px'
+    }
+  }
+})
+
+export { colorPickerSlotRecipe }

package/src/recipes/date-picker.ts

@@ -36,6 +36,27 @@ const calendarPanelRangeRecipe = defineRecipe({
   }
 })
 
+const timePanelSlotRecipe = defineSlotRecipe({
+  className: 'timePanel',
+  slots: ['root', 'column'],
+  jsx: ['TimePanel', 'time-panel'],
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: '0.5'
+    },
+    column: {
+      display: 'flex',
+      flexDirection: 'column',
+      height: '224px',
+      overflowY: 'scroll',
+      overflowX: 'hidden',
+      py: '10px',
+    }
+  }
+})
+
 const tableDateSlotRecipe = defineSlotRecipe({
   className: 'tableDate',
   jsx: ['TableDate', 'table-date'],
@@ -395,6 +416,7 @@ const timeItemRecipe = defineRecipe({
 export {
   datePickerSlotRecipe,
   calendarPanelRangeRecipe,
+  timePanelSlotRecipe,
   tableDateSlotRecipe,
   tableMonthSlotRecipe,
   tableYearSlotRecipe,

package/src/recipes/index.ts

@@ -6,12 +6,12 @@ import { selectSlotRecipe } from './select'
 import { textRecipe } from './text'
 import { iconRecipe } from './icon'
 import { spinnerRecipe } from './spinner'
-import { accordion } from './accordion'
+import { accordionSlotRecipe } 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 { tabListSlotRecipe, tabRecipe, selectedBorderRecipe } from './tabs'
 import { checkboxSlotRecipe } from './checkbox'
 import { radioSlotRecipe } from './radio'
 import { sharedSlotRecipe } from './shared'
@@ -31,6 +31,7 @@ import { richTextEditorSlotRecipe, RTEStyleProviderRecipe } from './rich-text-ed
 import {
   datePickerSlotRecipe,
   calendarPanelRangeRecipe,
+  timePanelSlotRecipe,
   tableDateSlotRecipe,
   tableMonthSlotRecipe,
   tableYearSlotRecipe,
@@ -43,7 +44,14 @@ import {
 } from './date-picker'
 import { carouselSlotRecipe } from './carousel'
 import { chartSlotRecipe } from './chart'
-
+import { autocompleteSlotRecipe } from './autocomplete'
+import {
+  timelineSlotRecipe,
+  timelineDocumentSlotRecipe,
+  timelineLogSlotRecipe,
+  timelineSeparatorSlotRecipe,
+  timelineAccordionSlotRecipe
+} from './timeline'
 import {
   bannerSlotRecipe,
   bannerTitleRecipe,
@@ -52,6 +60,8 @@ import {
   bannerLinkRecipe,
   bannerCloseButtonRecipe
 } from './banner'
+import { colorPickerSlotRecipe } from './color-picker'
+import { sliderSlotRecipe } from './slider'
 
 export const recipes = {
   buttonRecipe,
@@ -65,7 +75,6 @@ export const recipes = {
   badgeRecipe,
   textareaRecipe,
   tooltipRecipe,
-  tabListRecipe,
   tabRecipe,
   selectedBorderRecipe,
   tableRecipe,
@@ -85,7 +94,7 @@ export const recipes = {
 }
 
 export const slotRecipes = {
-  accordion,
+  accordionSlotRecipe,
   checkboxSlotRecipe,
   radioSlotRecipe,
   sharedSlotRecipe,
@@ -111,10 +120,20 @@ export const slotRecipes = {
   broadcastSlotRecipe,
   richTextEditorSlotRecipe,
   datePickerSlotRecipe,
+  timePanelSlotRecipe,
   tableDateSlotRecipe,
   tableMonthSlotRecipe,
   tableYearSlotRecipe,
   pinbarSlotRecipe,
   carouselSlotRecipe,
-  chartSlotRecipe
+  chartSlotRecipe,
+  autocompleteSlotRecipe,
+  timelineSlotRecipe,
+  timelineDocumentSlotRecipe,
+  timelineLogSlotRecipe,
+  timelineSeparatorSlotRecipe,
+  timelineAccordionSlotRecipe,
+  tabListSlotRecipe,
+  colorPickerSlotRecipe,
+  sliderSlotRecipe
 }