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

package/dist/index.mjs

@@ -2969,9 +2969,362 @@ var RTEStyleProviderRecipe = defineRecipe12({
   defaultVariants: {}
 });
 
+// src/recipes/date-picker.ts
+import { defineSlotRecipe as defineSlotRecipe20, defineRecipe as defineRecipe13 } from "@pandacss/dev";
+var datePickerSlotRecipe = defineSlotRecipe20({
+  className: "datepicker",
+  jsx: ["MpDatePicker", "mp-date-picker"],
+  slots: ["root", "popoverContent"],
+  base: {
+    "root": {
+      width: "100%",
+      position: "relative"
+    },
+    popoverContent: {
+      minWidth: "280px",
+      padding: 4
+    }
+  }
+});
+var calendarPanelRangeRecipe = defineRecipe13({
+  className: "calendarPanelRange",
+  base: {
+    display: "grid",
+    gap: 4,
+    gridTemplateColumns: "2"
+  }
+});
+var tableDateSlotRecipe = defineSlotRecipe20({
+  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 }
+  }
+});
+var tableMonthSlotRecipe = defineSlotRecipe20({
+  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 }
+  }
+});
+var tableYearSlotRecipe = defineSlotRecipe20({
+  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 }
+  }
+});
+var dayItemRecipe = defineRecipe13({
+  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"
+  }
+});
+var dateItemRecipe = defineRecipe13({
+  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: ["*"]
+});
+var pinbarSlotRecipe = defineSlotRecipe20({
+  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"
+    }
+  }
+});
+var monthItemRecipe = defineRecipe13({
+  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: ["*"]
+});
+var yearItemRecipe = defineRecipe13({
+  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: ["*"]
+});
+
+// src/recipes/carousel.ts
+import { defineSlotRecipe as defineSlotRecipe21 } from "@pandacss/dev";
+var carouselSlotRecipe = defineSlotRecipe21({
+  className: "carousel",
+  jsx: ["MpCarousel", "mp-carousel"],
+  slots: [
+    "root",
+    "buttonRight",
+    "buttonLeft"
+  ],
+  base: {
+    root: {
+      display: "block",
+      position: "relative",
+      width: "full",
+      background: "gray.50",
+      borderRadius: "md",
+      borderWidth: "1px",
+      borderColor: "gray.100",
+      overflow: "hidden",
+      boxSizing: "border-box"
+    },
+    buttonRight: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "absolute",
+      width: "9",
+      height: "9",
+      right: "6",
+      top: "50%",
+      transform: "translateY(-50%)",
+      borderRadius: "full"
+    },
+    buttonLeft: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "absolute",
+      width: "9",
+      height: "9",
+      left: "6",
+      top: "50%",
+      transform: "translateY(-50%)",
+      borderRadius: "full"
+    }
+  }
+});
+
 // src/recipes/banner.ts
-import { defineRecipe as defineRecipe13, defineSlotRecipe as defineSlotRecipe20 } from "@pandacss/dev";
-var bannerSlotRecipe = defineSlotRecipe20({
+import { defineRecipe as defineRecipe14, defineSlotRecipe as defineSlotRecipe22 } from "@pandacss/dev";
+var bannerSlotRecipe = defineSlotRecipe22({
   className: "banner",
   jsx: ["MpBanner", "mp-banner"],
   slots: ["root", "body"],
@@ -3012,7 +3365,7 @@ var bannerSlotRecipe = defineSlotRecipe20({
     variant: "info"
   }
 });
-var bannerTitleRecipe = defineRecipe13({
+var bannerTitleRecipe = defineRecipe14({
   className: "banner-title",
   jsx: ["MpBannerTitle", "mp-banner-title"],
   base: {
@@ -3029,7 +3382,7 @@ var bannerTitleRecipe = defineRecipe13({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerDescriptionRecipe = defineRecipe13({
+var bannerDescriptionRecipe = defineRecipe14({
   className: "banner-description",
   jsx: ["MpBannerDescription", "mp-banner-description"],
   base: {
@@ -3044,7 +3397,7 @@ var bannerDescriptionRecipe = defineRecipe13({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerIconSlotRecipe = defineSlotRecipe20({
+var bannerIconSlotRecipe = defineSlotRecipe22({
   className: "banner-icon",
   jsx: ["MpBannerIcon", "mp-banner-icon"],
   slots: ["root", "custom"],
@@ -3067,7 +3420,7 @@ var bannerIconSlotRecipe = defineSlotRecipe20({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerLinkRecipe = defineRecipe13({
+var bannerLinkRecipe = defineRecipe14({
   className: "banner-link",
   jsx: ["MpBannerLink", "mp-banner-link"],
   base: {
@@ -3080,7 +3433,7 @@ var bannerLinkRecipe = defineRecipe13({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerCloseButtonRecipe = defineRecipe13({
+var bannerCloseButtonRecipe = defineRecipe14({
   className: "banner-close-button",
   jsx: ["MpBannerCloseButton", "mp-banner-close-button"],
   base: {
@@ -3122,7 +3475,12 @@ var recipes = {
   bannerDescriptionRecipe,
   bannerLinkRecipe,
   bannerCloseButtonRecipe,
-  RTEStyleProviderRecipe
+  RTEStyleProviderRecipe,
+  calendarPanelRangeRecipe,
+  dayItemRecipe,
+  dateItemRecipe,
+  monthItemRecipe,
+  yearItemRecipe
 };
 var slotRecipes = {
   accordion,
@@ -3149,7 +3507,13 @@ var slotRecipes = {
   segmentedControlSlotRecipe,
   toastSlotRecipe,
   broadcastSlotRecipe,
-  richTextEditorSlotRecipe
+  richTextEditorSlotRecipe,
+  datePickerSlotRecipe,
+  tableDateSlotRecipe,
+  tableMonthSlotRecipe,
+  tableYearSlotRecipe,
+  pinbarSlotRecipe,
+  carouselSlotRecipe
 };
 
 // src/text-styles.ts

package/dist/recipes/carousel.d.mts

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

package/dist/recipes/carousel.d.ts

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

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

@@ -0,0 +1,14 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const datePickerSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const calendarPanelRangeRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const tableDateSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const tableMonthSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const tableYearSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const dayItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const dateItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const pinbarSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const monthItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const yearItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+
+export { calendarPanelRangeRecipe, dateItemRecipe, datePickerSlotRecipe, dayItemRecipe, monthItemRecipe, pinbarSlotRecipe, tableDateSlotRecipe, tableMonthSlotRecipe, tableYearSlotRecipe, yearItemRecipe };

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

@@ -0,0 +1,14 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const datePickerSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const calendarPanelRangeRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const tableDateSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const tableMonthSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const tableYearSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const dayItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const dateItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const pinbarSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const monthItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const yearItemRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+
+export { calendarPanelRangeRecipe, dateItemRecipe, datePickerSlotRecipe, dayItemRecipe, monthItemRecipe, pinbarSlotRecipe, tableDateSlotRecipe, tableMonthSlotRecipe, tableYearSlotRecipe, yearItemRecipe };

package/dist/recipes/index.d.mts

@@ -23,6 +23,11 @@ declare const recipes: {
     bannerLinkRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     bannerCloseButtonRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     RTEStyleProviderRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    calendarPanelRangeRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    dayItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    dateItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    monthItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    yearItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
     accordion: _pandacss_types.SlotRecipeConfig;
@@ -50,6 +55,12 @@ declare const slotRecipes: {
     toastSlotRecipe: _pandacss_types.SlotRecipeConfig;
     broadcastSlotRecipe: _pandacss_types.SlotRecipeConfig;
     richTextEditorSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    datePickerSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    tableDateSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    tableMonthSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    tableYearSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    pinbarSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    carouselSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/recipes/index.d.ts

@@ -23,6 +23,11 @@ declare const recipes: {
     bannerLinkRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     bannerCloseButtonRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     RTEStyleProviderRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    calendarPanelRangeRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    dayItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    dateItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    monthItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    yearItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
     accordion: _pandacss_types.SlotRecipeConfig;
@@ -50,6 +55,12 @@ declare const slotRecipes: {
     toastSlotRecipe: _pandacss_types.SlotRecipeConfig;
     broadcastSlotRecipe: _pandacss_types.SlotRecipeConfig;
     richTextEditorSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    datePickerSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    tableDateSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    tableMonthSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    tableYearSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    pinbarSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    carouselSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/package.json

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

package/src/recipes/carousel.ts

@@ -0,0 +1,50 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const carouselSlotRecipe = defineSlotRecipe({
+  className: 'carousel',
+  jsx: ['MpCarousel', 'mp-carousel'],
+  slots: [
+    'root',
+    'buttonRight',
+    'buttonLeft'
+  ],
+  base: {
+    root: {
+      display: 'block',
+      position: 'relative',
+      width: 'full',
+      background: 'gray.50',
+      borderRadius: 'md',
+      borderWidth: '1px',
+      borderColor: 'gray.100',
+      overflow: 'hidden',
+      boxSizing: 'border-box',
+    },
+    buttonRight: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'absolute',
+      width: '9',
+      height: '9',
+      right: '6',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      borderRadius: 'full'
+    },
+    buttonLeft: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'absolute',
+      width: '9',
+      height: '9',
+      left: '6',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      borderRadius: 'full'
+    }
+  }
+})
+
+export { carouselSlotRecipe }