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

package/dist/index.js

@@ -3009,13 +3009,25 @@ var datePickerSlotRecipe = (0, import_dev33.defineSlotRecipe)({
   jsx: ["MpDatePicker", "mp-date-picker"],
   slots: ["root", "popoverContent"],
   base: {
-    "root": {
+    root: {
       width: "100%",
       position: "relative"
     },
-    popoverContent: {
-      minWidth: "280px",
-      padding: 4
+    popoverContent: {}
+  },
+  variants: {
+    variant: {
+      date: {
+        popoverContent: {
+          minWidth: "280px",
+          padding: 4
+        }
+      },
+      time: {
+        popoverContent: {
+          px: "2px"
+        }
+      }
     }
   }
 });
@@ -3029,14 +3041,26 @@ var calendarPanelRangeRecipe = (0, import_dev33.defineRecipe)({
 var tableDateSlotRecipe = (0, import_dev33.defineSlotRecipe)({
   className: "tableDate",
   jsx: ["TableDate", "table-date"],
-  slots: ["headerRoot", "headerLabel", "dayWrapper", "dateItemRoot", "dateItemWrapper", "shortcutLabelWrapper"],
+  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 }
+    shortcutLabelWrapper: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      marginTop: 3
+    }
   }
 });
 var tableMonthSlotRecipe = (0, import_dev33.defineSlotRecipe)({
@@ -3048,7 +3072,12 @@ var tableMonthSlotRecipe = (0, import_dev33.defineSlotRecipe)({
     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 }
+    shortcutLabelWrapper: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      marginTop: 3
+    }
   }
 });
 var tableYearSlotRecipe = (0, import_dev33.defineSlotRecipe)({
@@ -3060,7 +3089,12 @@ var tableYearSlotRecipe = (0, import_dev33.defineSlotRecipe)({
     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 }
+    shortcutLabelWrapper: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      marginTop: 3
+    }
   }
 });
 var dayItemRecipe = (0, import_dev33.defineRecipe)({
@@ -3304,6 +3338,52 @@ var yearItemRecipe = (0, import_dev33.defineRecipe)({
   },
   staticCss: ["*"]
 });
+var timeItemRecipe = (0, import_dev33.defineRecipe)({
+  className: "timeItem",
+  jsx: ["TimeItem", "time-item"],
+  base: {
+    width: "68px",
+    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"
+      }
+    }
+  },
+  staticCss: ["*"]
+});
 
 // src/recipes/carousel.ts
 var import_dev34 = require("@pandacss/dev");
@@ -3613,7 +3693,8 @@ var recipes = {
   dayItemRecipe,
   dateItemRecipe,
   monthItemRecipe,
-  yearItemRecipe
+  yearItemRecipe,
+  timeItemRecipe
 };
 var slotRecipes = {
   accordion,

package/dist/index.mjs

@@ -2983,13 +2983,25 @@ var datePickerSlotRecipe = defineSlotRecipe20({
   jsx: ["MpDatePicker", "mp-date-picker"],
   slots: ["root", "popoverContent"],
   base: {
-    "root": {
+    root: {
       width: "100%",
       position: "relative"
     },
-    popoverContent: {
-      minWidth: "280px",
-      padding: 4
+    popoverContent: {}
+  },
+  variants: {
+    variant: {
+      date: {
+        popoverContent: {
+          minWidth: "280px",
+          padding: 4
+        }
+      },
+      time: {
+        popoverContent: {
+          px: "2px"
+        }
+      }
     }
   }
 });
@@ -3003,14 +3015,26 @@ var calendarPanelRangeRecipe = defineRecipe13({
 var tableDateSlotRecipe = defineSlotRecipe20({
   className: "tableDate",
   jsx: ["TableDate", "table-date"],
-  slots: ["headerRoot", "headerLabel", "dayWrapper", "dateItemRoot", "dateItemWrapper", "shortcutLabelWrapper"],
+  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 }
+    shortcutLabelWrapper: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      marginTop: 3
+    }
   }
 });
 var tableMonthSlotRecipe = defineSlotRecipe20({
@@ -3022,7 +3046,12 @@ var tableMonthSlotRecipe = defineSlotRecipe20({
     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 }
+    shortcutLabelWrapper: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      marginTop: 3
+    }
   }
 });
 var tableYearSlotRecipe = defineSlotRecipe20({
@@ -3034,7 +3063,12 @@ var tableYearSlotRecipe = defineSlotRecipe20({
     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 }
+    shortcutLabelWrapper: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      marginTop: 3
+    }
   }
 });
 var dayItemRecipe = defineRecipe13({
@@ -3278,6 +3312,52 @@ var yearItemRecipe = defineRecipe13({
   },
   staticCss: ["*"]
 });
+var timeItemRecipe = defineRecipe13({
+  className: "timeItem",
+  jsx: ["TimeItem", "time-item"],
+  base: {
+    width: "68px",
+    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"
+      }
+    }
+  },
+  staticCss: ["*"]
+});
 
 // src/recipes/carousel.ts
 import { defineSlotRecipe as defineSlotRecipe21 } from "@pandacss/dev";
@@ -3587,7 +3667,8 @@ var recipes = {
   dayItemRecipe,
   dateItemRecipe,
   monthItemRecipe,
-  yearItemRecipe
+  yearItemRecipe,
+  timeItemRecipe
 };
 var slotRecipes = {
   accordion,

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

@@ -10,5 +10,6 @@ declare const dateItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVar
 declare const pinbarSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 declare const monthItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 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, yearItemRecipe };
+export { calendarPanelRangeRecipe, dateItemRecipe, datePickerSlotRecipe, dayItemRecipe, monthItemRecipe, pinbarSlotRecipe, tableDateSlotRecipe, tableMonthSlotRecipe, tableYearSlotRecipe, timeItemRecipe, yearItemRecipe };

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

@@ -10,5 +10,6 @@ declare const dateItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVar
 declare const pinbarSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 declare const monthItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 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, yearItemRecipe };
+export { calendarPanelRangeRecipe, dateItemRecipe, datePickerSlotRecipe, dayItemRecipe, monthItemRecipe, pinbarSlotRecipe, tableDateSlotRecipe, tableMonthSlotRecipe, tableYearSlotRecipe, timeItemRecipe, yearItemRecipe };

package/dist/recipes/index.d.mts

@@ -28,6 +28,7 @@ declare const recipes: {
     dateItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     monthItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     yearItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    timeItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
     accordion: _pandacss_types.SlotRecipeConfig;

package/dist/recipes/index.d.ts

@@ -28,6 +28,7 @@ declare const recipes: {
     dateItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     monthItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     yearItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    timeItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
     accordion: _pandacss_types.SlotRecipeConfig;

package/package.json

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

package/src/recipes/date-picker.ts

@@ -5,13 +5,25 @@ const datePickerSlotRecipe = defineSlotRecipe({
   jsx: ['MpDatePicker', 'mp-date-picker'],
   slots: ['root', 'popoverContent'],
   base: {
-    'root': {
+    root: {
       width: '100%',
       position: 'relative'
     },
-    popoverContent: {
-      minWidth: '280px',
-      padding: 4,
+    popoverContent: {}
+  },
+  variants: {
+    variant: {
+      date: {
+        popoverContent: {
+          minWidth: '280px',
+          padding: 4
+        }
+      },
+      time: {
+        popoverContent: {
+          px: '2px'
+        }
+      }
     }
   }
 })
@@ -27,14 +39,26 @@ const calendarPanelRangeRecipe = defineRecipe({
 const tableDateSlotRecipe = defineSlotRecipe({
   className: 'tableDate',
   jsx: ['TableDate', 'table-date'],
-  slots: ['headerRoot', 'headerLabel', 'dayWrapper', 'dateItemRoot', 'dateItemWrapper', 'shortcutLabelWrapper'],
+  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 }
+    shortcutLabelWrapper: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginTop: 3
+    }
   }
 })
 
@@ -47,7 +71,12 @@ const tableMonthSlotRecipe = defineSlotRecipe({
     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 }
+    shortcutLabelWrapper: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginTop: 3
+    }
   }
 })
 
@@ -60,7 +89,12 @@ const tableYearSlotRecipe = defineSlotRecipe({
     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 }
+    shortcutLabelWrapper: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginTop: 3
+    }
   }
 })
 
@@ -135,7 +169,7 @@ const dateItemRecipe = defineRecipe({
       today: {
         rounded: 'sm',
         borderColor: 'orange.50',
-        backgroundColor: 'orange.50',
+        backgroundColor: 'orange.50'
       },
       notThisMonth: {
         color: 'gray.600'
@@ -173,7 +207,7 @@ const dateItemRecipe = defineRecipe({
         borderColor: 'blue.400',
         background: 'blue.400',
         color: 'white'
-      },
+      }
     }
   },
   staticCss: ['*']
@@ -188,7 +222,7 @@ const pinbarSlotRecipe = defineSlotRecipe({
       bottom: 0,
       height: 1,
       display: 'flex',
-      justifyContent: 'center',
+      justifyContent: 'center'
     },
     pinbar: {
       width: 6,
@@ -248,9 +282,9 @@ const monthItemRecipe = defineRecipe({
       today: {
         rounded: 'sm',
         borderColor: 'orange.50',
-        backgroundColor: 'orange.50',
-      },
-    },
+        backgroundColor: 'orange.50'
+      }
+    }
   },
   staticCss: ['*']
 })
@@ -304,16 +338,70 @@ const yearItemRecipe = defineRecipe({
       today: {
         rounded: 'sm',
         borderColor: 'orange.50',
-        backgroundColor: 'orange.50',
+        backgroundColor: 'orange.50'
+      }
+    }
+  },
+  staticCss: ['*']
+})
+
+const timeItemRecipe = defineRecipe({
+  className: 'timeItem',
+  jsx: ['TimeItem', 'time-item'],
+  base: {
+    width: '68px',
+    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'
+      }
+    }
   },
   staticCss: ['*']
 })
 
-export { 
-  datePickerSlotRecipe, calendarPanelRangeRecipe, 
-  tableDateSlotRecipe, tableMonthSlotRecipe, tableYearSlotRecipe, 
-  dayItemRecipe , dateItemRecipe, monthItemRecipe, yearItemRecipe,
+export {
+  datePickerSlotRecipe,
+  calendarPanelRangeRecipe,
+  tableDateSlotRecipe,
+  tableMonthSlotRecipe,
+  tableYearSlotRecipe,
+  dayItemRecipe,
+  dateItemRecipe,
+  monthItemRecipe,
+  yearItemRecipe,
+  timeItemRecipe,
   pinbarSlotRecipe
 }

package/src/recipes/index.ts

@@ -38,6 +38,7 @@ import {
   dateItemRecipe,
   monthItemRecipe,
   yearItemRecipe,
+  timeItemRecipe,
   pinbarSlotRecipe
 } from './date-picker'
 import { carouselSlotRecipe } from './carousel'
@@ -79,7 +80,8 @@ export const recipes = {
   dayItemRecipe,
   dateItemRecipe,
   monthItemRecipe,
-  yearItemRecipe
+  yearItemRecipe,
+  timeItemRecipe
 }
 
 export const slotRecipes = {