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

package/dist/index.js

@@ -25,7 +25,7 @@ __export(theme_exports, {
 module.exports = __toCommonJS(theme_exports);
 
 // src/index.ts
-var import_dev46 = require("@pandacss/dev");
+var import_dev48 = require("@pandacss/dev");
 
 // src/breakpoints.ts
 var breakpoints = {
@@ -2995,9 +2995,362 @@ var RTEStyleProviderRecipe = (0, import_dev32.defineRecipe)({
   defaultVariants: {}
 });
 
-// src/recipes/banner.ts
+// src/recipes/date-picker.ts
 var import_dev33 = require("@pandacss/dev");
-var bannerSlotRecipe = (0, import_dev33.defineSlotRecipe)({
+var datePickerSlotRecipe = (0, import_dev33.defineSlotRecipe)({
+  className: "datepicker",
+  jsx: ["MpDatePicker", "mp-date-picker"],
+  slots: ["root", "popoverContent"],
+  base: {
+    "root": {
+      width: "100%",
+      position: "relative"
+    },
+    popoverContent: {
+      minWidth: "280px",
+      padding: 4
+    }
+  }
+});
+var calendarPanelRangeRecipe = (0, import_dev33.defineRecipe)({
+  className: "calendarPanelRange",
+  base: {
+    display: "grid",
+    gap: 4,
+    gridTemplateColumns: "2"
+  }
+});
+var tableDateSlotRecipe = (0, import_dev33.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 }
+  }
+});
+var tableMonthSlotRecipe = (0, import_dev33.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 }
+  }
+});
+var tableYearSlotRecipe = (0, import_dev33.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 }
+  }
+});
+var dayItemRecipe = (0, import_dev33.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"
+  }
+});
+var dateItemRecipe = (0, import_dev33.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: ["*"]
+});
+var pinbarSlotRecipe = (0, import_dev33.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"
+    }
+  }
+});
+var monthItemRecipe = (0, import_dev33.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: ["*"]
+});
+var yearItemRecipe = (0, import_dev33.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: ["*"]
+});
+
+// src/recipes/carousel.ts
+var import_dev34 = require("@pandacss/dev");
+var carouselSlotRecipe = (0, import_dev34.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"
+    }
+  }
+});
+
+// src/recipes/banner.ts
+var import_dev35 = require("@pandacss/dev");
+var bannerSlotRecipe = (0, import_dev35.defineSlotRecipe)({
   className: "banner",
   jsx: ["MpBanner", "mp-banner"],
   slots: ["root", "body"],
@@ -3038,7 +3391,7 @@ var bannerSlotRecipe = (0, import_dev33.defineSlotRecipe)({
     variant: "info"
   }
 });
-var bannerTitleRecipe = (0, import_dev33.defineRecipe)({
+var bannerTitleRecipe = (0, import_dev35.defineRecipe)({
   className: "banner-title",
   jsx: ["MpBannerTitle", "mp-banner-title"],
   base: {
@@ -3055,7 +3408,7 @@ var bannerTitleRecipe = (0, import_dev33.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerDescriptionRecipe = (0, import_dev33.defineRecipe)({
+var bannerDescriptionRecipe = (0, import_dev35.defineRecipe)({
   className: "banner-description",
   jsx: ["MpBannerDescription", "mp-banner-description"],
   base: {
@@ -3070,7 +3423,7 @@ var bannerDescriptionRecipe = (0, import_dev33.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerIconSlotRecipe = (0, import_dev33.defineSlotRecipe)({
+var bannerIconSlotRecipe = (0, import_dev35.defineSlotRecipe)({
   className: "banner-icon",
   jsx: ["MpBannerIcon", "mp-banner-icon"],
   slots: ["root", "custom"],
@@ -3093,7 +3446,7 @@ var bannerIconSlotRecipe = (0, import_dev33.defineSlotRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerLinkRecipe = (0, import_dev33.defineRecipe)({
+var bannerLinkRecipe = (0, import_dev35.defineRecipe)({
   className: "banner-link",
   jsx: ["MpBannerLink", "mp-banner-link"],
   base: {
@@ -3106,7 +3459,7 @@ var bannerLinkRecipe = (0, import_dev33.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerCloseButtonRecipe = (0, import_dev33.defineRecipe)({
+var bannerCloseButtonRecipe = (0, import_dev35.defineRecipe)({
   className: "banner-close-button",
   jsx: ["MpBannerCloseButton", "mp-banner-close-button"],
   base: {
@@ -3148,7 +3501,12 @@ var recipes = {
   bannerDescriptionRecipe,
   bannerLinkRecipe,
   bannerCloseButtonRecipe,
-  RTEStyleProviderRecipe
+  RTEStyleProviderRecipe,
+  calendarPanelRangeRecipe,
+  dayItemRecipe,
+  dateItemRecipe,
+  monthItemRecipe,
+  yearItemRecipe
 };
 var slotRecipes = {
   accordion,
@@ -3175,12 +3533,18 @@ var slotRecipes = {
   segmentedControlSlotRecipe,
   toastSlotRecipe,
   broadcastSlotRecipe,
-  richTextEditorSlotRecipe
+  richTextEditorSlotRecipe,
+  datePickerSlotRecipe,
+  tableDateSlotRecipe,
+  tableMonthSlotRecipe,
+  tableYearSlotRecipe,
+  pinbarSlotRecipe,
+  carouselSlotRecipe
 };
 
 // src/text-styles.ts
-var import_dev34 = require("@pandacss/dev");
-var textStyles = (0, import_dev34.defineTextStyles)({
+var import_dev36 = require("@pandacss/dev");
+var textStyles = (0, import_dev36.defineTextStyles)({
   overline: { value: { fontSize: "xs", lineHeight: "xs" } },
   body: {
     sm: { value: { fontSize: "sm", lineHeight: "2xl" } },
@@ -3214,11 +3578,11 @@ var textStyles = (0, import_dev34.defineTextStyles)({
 });
 
 // src/tokens/index.ts
-var import_dev45 = require("@pandacss/dev");
+var import_dev47 = require("@pandacss/dev");
 
 // src/tokens/borders.ts
-var import_dev35 = require("@pandacss/dev");
-var borders = import_dev35.defineTokens.borders({
+var import_dev37 = require("@pandacss/dev");
+var borders = import_dev37.defineTokens.borders({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -3226,8 +3590,8 @@ var borders = import_dev35.defineTokens.borders({
 });
 
 // src/tokens/colors.ts
-var import_dev36 = require("@pandacss/dev");
-var colors = import_dev36.defineTokens.colors({
+var import_dev38 = require("@pandacss/dev");
+var colors = import_dev38.defineTokens.colors({
   currentcolor: {
     value: "currentcolor"
   },
@@ -3373,16 +3737,16 @@ var colors = import_dev36.defineTokens.colors({
 });
 
 // src/tokens/durations.ts
-var import_dev37 = require("@pandacss/dev");
-var durations = import_dev37.defineTokens.durations({
+var import_dev39 = require("@pandacss/dev");
+var durations = import_dev39.defineTokens.durations({
   slow: { value: "100ms" },
   normal: { value: "250ms" },
   fast: { value: "300ms" }
 });
 
 // src/tokens/opacity.ts
-var import_dev38 = require("@pandacss/dev");
-var opacity = import_dev38.defineTokens.opacity({
+var import_dev40 = require("@pandacss/dev");
+var opacity = import_dev40.defineTokens.opacity({
   0: { value: 0 },
   40: { value: 0.4 },
   60: { value: 0.6 },
@@ -3390,8 +3754,8 @@ var opacity = import_dev38.defineTokens.opacity({
 });
 
 // src/tokens/radii.ts
-var import_dev39 = require("@pandacss/dev");
-var radii = import_dev39.defineTokens.radii({
+var import_dev41 = require("@pandacss/dev");
+var radii = import_dev41.defineTokens.radii({
   none: { value: "0" },
   xs: { value: "0.125rem" },
   sm: { value: "0.25rem" },
@@ -3402,8 +3766,8 @@ var radii = import_dev39.defineTokens.radii({
 });
 
 // src/tokens/shadows.ts
-var import_dev40 = require("@pandacss/dev");
-var shadows = import_dev40.defineTokens.shadows({
+var import_dev42 = require("@pandacss/dev");
+var shadows = import_dev42.defineTokens.shadows({
   xs: {
     value: ["0px 0px 2px 0px rgba(0, 0, 0, 0.12)", "0px 2px 4px 0px rgba(0, 0, 0, 0.14)"]
   },
@@ -3443,8 +3807,8 @@ var shadows = import_dev40.defineTokens.shadows({
 });
 
 // src/tokens/sizes.ts
-var import_dev41 = require("@pandacss/dev");
-var sizes = import_dev41.defineTokens.sizes({
+var import_dev43 = require("@pandacss/dev");
+var sizes = import_dev43.defineTokens.sizes({
   0: { value: "0" },
   0.25: { value: "0.0625rem" },
   0.5: { value: "0.125rem" },
@@ -3473,8 +3837,8 @@ var sizes = import_dev41.defineTokens.sizes({
 });
 
 // src/tokens/spacing.ts
-var import_dev42 = require("@pandacss/dev");
-var spacing = import_dev42.defineTokens.spacing({
+var import_dev44 = require("@pandacss/dev");
+var spacing = import_dev44.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem" },
   1: { value: "0.25rem" },
@@ -3495,8 +3859,8 @@ var spacing = import_dev42.defineTokens.spacing({
 });
 
 // src/tokens/z-index.ts
-var import_dev43 = require("@pandacss/dev");
-var zIndex = import_dev43.defineTokens.zIndex({
+var import_dev45 = require("@pandacss/dev");
+var zIndex = import_dev45.defineTokens.zIndex({
   hide: { value: -1 },
   base: { value: 0 },
   docked: { value: 10 },
@@ -3508,8 +3872,8 @@ var zIndex = import_dev43.defineTokens.zIndex({
 });
 
 // src/tokens/typography.ts
-var import_dev44 = require("@pandacss/dev");
-var fonts = import_dev44.defineTokens.fonts({
+var import_dev46 = require("@pandacss/dev");
+var fonts = import_dev46.defineTokens.fonts({
   body: {
     value: '"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
   },
@@ -3517,7 +3881,7 @@ var fonts = import_dev44.defineTokens.fonts({
     value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'
   }
 });
-var fontSizes = import_dev44.defineTokens.fontSizes({
+var fontSizes = import_dev46.defineTokens.fontSizes({
   xs: { value: "0.625rem" },
   sm: { value: "0.75rem" },
   md: { value: "0.875rem" },
@@ -3525,12 +3889,12 @@ var fontSizes = import_dev44.defineTokens.fontSizes({
   xl: { value: "1.25rem" },
   "2xl": { value: "1.5rem" }
 });
-var fontWeights = import_dev44.defineTokens.fontWeights({
+var fontWeights = import_dev46.defineTokens.fontWeights({
   regular: { value: "400" },
   semiBold: { value: "600" },
   bold: { value: "800" }
 });
-var lineHeights = import_dev44.defineTokens.lineHeights({
+var lineHeights = import_dev46.defineTokens.lineHeights({
   xs: { value: 1.2 },
   sm: { value: 1.34 },
   md: { value: 1.4 },
@@ -3539,7 +3903,7 @@ var lineHeights = import_dev44.defineTokens.lineHeights({
   "2xl": { value: 1.67 },
   "3xl": { value: 1.71 }
 });
-var letterSpacings = import_dev44.defineTokens.letterSpacings({
+var letterSpacings = import_dev46.defineTokens.letterSpacings({
   tighter: { value: "-0.05em" },
   tight: { value: "-0.025em" },
   normal: { value: "0" },
@@ -3549,7 +3913,7 @@ var letterSpacings = import_dev44.defineTokens.letterSpacings({
 });
 
 // src/tokens/index.ts
-var tokens = (0, import_dev45.defineTokens)({
+var tokens = (0, import_dev47.defineTokens)({
   borders,
   colors,
   durations,
@@ -3567,7 +3931,7 @@ var tokens = (0, import_dev45.defineTokens)({
 });
 
 // src/index.ts
-var preset = (0, import_dev46.definePreset)({
+var preset = (0, import_dev48.definePreset)({
   theme: {
     extend: {
       breakpoints,