@mekari/pixel3-theme 0.0.1-alpha.0 → 0.0.1

package/dist/index.js

@@ -3,10 +3,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -17,13 +13,12 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// index.ts
+var theme_exports = {};
+module.exports = __toCommonJS(theme_exports);
+
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  default: () => src_default
-});
-module.exports = __toCommonJS(src_exports);
-var import_dev35 = require("@pandacss/dev");
+var import_dev38 = require("@pandacss/dev");
 
 // src/conditions.ts
 var conditions = {
@@ -37,7 +32,7 @@ var conditions = {
     hidden: "&:is([hidden])",
     collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
     loading: "& > [data-loading=true], &:is([data-loading], [aria-busy=true])",
-    hasIcon: "&[data-button-icon=true]",
+    hasIcon: "&[data-has-icon=true]",
     active: "&[data-active=true], [data-active]",
     highlight: "&[data-highlight=true], [data-highlight]",
     hasBorder: "&[data-has-border=true]",
@@ -308,6 +303,7 @@ var sizes = import_dev8.defineTokens.sizes({
   16: { value: "4rem", description: "64px" },
   20: { value: "5rem", description: "80px" },
   22: { value: "5.5rem", description: "96px" },
+  56: { value: "14rem", description: "224px" },
   65: { value: "17.5rem", description: "280px" },
   full: { value: "100%" }
 });
@@ -468,7 +464,7 @@ var tagSlotRecipe = (0, import_dev15.defineSlotRecipe)({
       position: "relative",
       display: "inline-flex",
       alignItems: "center",
-      userSelect: "none",
+      userSelect: "auto",
       outline: "0px solid transparent",
       borderWidth: "1px",
       borderColor: "transparent",
@@ -2448,6 +2444,193 @@ var progressSlotRecipe = (0, import_dev34.defineSlotRecipe)({
   }
 });
 
+// src/recipes/form-control.ts
+var import_dev35 = require("@pandacss/dev");
+var formControlSlotRecipe = (0, import_dev35.defineSlotRecipe)({
+  className: "form-control",
+  jsx: ["MpFormControl", "mp-form-control"],
+  slots: ["root", "label", "required", "helpText", "errorMessage"],
+  base: {
+    root: {},
+    label: {
+      fontSize: "md",
+      fontWeight: "semiBold",
+      marginBottom: "1",
+      textAlign: "left",
+      verticalAlign: "middle",
+      display: "flex"
+    },
+    required: {
+      color: "red.400",
+      marginLeft: "1"
+    },
+    helpText: {
+      color: "gray.600",
+      fontSize: "sm",
+      marginTop: "1"
+    },
+    errorMessage: {
+      color: "red.400",
+      fontSize: "sm",
+      marginTop: "1",
+      textAlign: "left",
+      verticalAlign: "middle",
+      display: "flex"
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+
+// src/recipes/input-tag.ts
+var import_dev36 = require("@pandacss/dev");
+var inputTagSlotRecipe = (0, import_dev36.defineSlotRecipe)({
+  className: "input-tag",
+  jsx: ["MpInputTag", "mp-input-tag"],
+  slots: [
+    "root",
+    "trigger",
+    "input",
+    "content",
+    "resetButton",
+    "dropdownButton",
+    "addButton",
+    "loading",
+    "empty",
+    "suggestionWrapper",
+    "suggestionLoading"
+  ],
+  base: {
+    root: {
+      position: "relative",
+      width: "full"
+    },
+    trigger: {
+      overflowY: "auto",
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: "2",
+      borderWidth: "1px",
+      borderColor: "gray.100",
+      borderRadius: "md",
+      paddingTop: "2",
+      paddingBottom: "2",
+      paddingLeft: "3",
+      paddingRight: "8",
+      backgroundColor: "white",
+      transition: "all 250ms",
+      _hover: {
+        borderColor: "gray.400"
+      },
+      _focusVisible: {
+        boxShadow: "focus",
+        borderColor: "blue.400",
+        _hover: {
+          borderColor: "blue.400"
+        }
+      },
+      _disabled: {
+        cursor: "not-allowed",
+        background: "gray.50"
+      },
+      _invalid: {
+        borderColor: "red.400",
+        _hover: {
+          borderColor: "red.400"
+        }
+      },
+      _hasIcon: {
+        paddingRight: "52px"
+      }
+    },
+    input: {
+      padding: "0 !important",
+      margin: "0 !important"
+    },
+    content: {
+      maxHeight: "300px",
+      overflowY: "auto"
+    },
+    resetButton: {
+      cursor: "pointer",
+      position: "absolute",
+      top: "2"
+    },
+    dropdownButton: {
+      cursor: "pointer",
+      position: "absolute",
+      top: "2",
+      right: "3"
+    },
+    addButton: {
+      cursor: "pointer",
+      width: "full",
+      px: "3",
+      py: "2",
+      wordBreak: "break-all",
+      textAlign: "center"
+    },
+    loading: {
+      position: "absolute",
+      top: "2",
+      right: "3"
+    },
+    empty: {
+      px: "3",
+      py: "2",
+      width: "full",
+      textAlign: "left"
+    },
+    suggestionWrapper: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%"
+    },
+    suggestionLoading: {
+      display: "flex",
+      justifyContent: "flex-start",
+      gap: "3",
+      width: "full",
+      height: "9",
+      py: "2",
+      px: "3"
+    }
+  }
+});
+
+// src/recipes/divider.ts
+var import_dev37 = require("@pandacss/dev");
+var dividerRecipe = (0, import_dev37.defineRecipe)({
+  className: "divider",
+  jsx: ["MpDivider", "mp-divider"],
+  base: {
+    border: 0,
+    opacity: 0.6,
+    color: "rgb(208, 214, 221)"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        borderBottom: "0.0625rem solid",
+        height: "auto",
+        marginY: 2
+      },
+      vertical: {
+        borderLeft: "0.0625rem solid",
+        height: "auto",
+        marginX: 2
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+
 // src/recipes/index.ts
 var recipes = {
   buttonRecipe,
@@ -2465,7 +2648,8 @@ var recipes = {
   tabRecipe,
   selectedBorderRecipe,
   tableRecipe,
-  tableContainerRecipe
+  tableContainerRecipe,
+  dividerRecipe
 };
 var slotRecipes = {
   accordion,
@@ -2480,7 +2664,9 @@ var slotRecipes = {
   inputAddonSlotRecipe,
   avatarSlotRecipe,
   avatarGroupSlotRecipe,
-  selectSlotRecipe
+  selectSlotRecipe,
+  formControlSlotRecipe,
+  inputTagSlotRecipe
 };
 
 // src/breakpoints.ts
@@ -2492,7 +2678,7 @@ var breakpoints = {
 };
 
 // src/index.ts
-var preset = (0, import_dev35.definePreset)({
+var preset = (0, import_dev38.definePreset)({
   theme: {
     extend: {
       breakpoints,
@@ -2506,4 +2692,3 @@ var preset = (0, import_dev35.definePreset)({
   conditions,
   globalCss
 });
-var src_default = preset;

package/dist/index.mjs

@@ -13,7 +13,7 @@ var conditions = {
     hidden: "&:is([hidden])",
     collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
     loading: "& > [data-loading=true], &:is([data-loading], [aria-busy=true])",
-    hasIcon: "&[data-button-icon=true]",
+    hasIcon: "&[data-has-icon=true]",
     active: "&[data-active=true], [data-active]",
     highlight: "&[data-highlight=true], [data-highlight]",
     hasBorder: "&[data-has-border=true]",
@@ -284,6 +284,7 @@ var sizes = defineTokens7.sizes({
   16: { value: "4rem", description: "64px" },
   20: { value: "5rem", description: "80px" },
   22: { value: "5.5rem", description: "96px" },
+  56: { value: "14rem", description: "224px" },
   65: { value: "17.5rem", description: "280px" },
   full: { value: "100%" }
 });
@@ -444,7 +445,7 @@ var tagSlotRecipe = defineSlotRecipe({
       position: "relative",
       display: "inline-flex",
       alignItems: "center",
-      userSelect: "none",
+      userSelect: "auto",
       outline: "0px solid transparent",
       borderWidth: "1px",
       borderColor: "transparent",
@@ -2424,6 +2425,193 @@ var progressSlotRecipe = defineSlotRecipe10({
   }
 });
 
+// src/recipes/form-control.ts
+import { defineSlotRecipe as defineSlotRecipe11 } from "@pandacss/dev";
+var formControlSlotRecipe = defineSlotRecipe11({
+  className: "form-control",
+  jsx: ["MpFormControl", "mp-form-control"],
+  slots: ["root", "label", "required", "helpText", "errorMessage"],
+  base: {
+    root: {},
+    label: {
+      fontSize: "md",
+      fontWeight: "semiBold",
+      marginBottom: "1",
+      textAlign: "left",
+      verticalAlign: "middle",
+      display: "flex"
+    },
+    required: {
+      color: "red.400",
+      marginLeft: "1"
+    },
+    helpText: {
+      color: "gray.600",
+      fontSize: "sm",
+      marginTop: "1"
+    },
+    errorMessage: {
+      color: "red.400",
+      fontSize: "sm",
+      marginTop: "1",
+      textAlign: "left",
+      verticalAlign: "middle",
+      display: "flex"
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+
+// src/recipes/input-tag.ts
+import { defineSlotRecipe as defineSlotRecipe12 } from "@pandacss/dev";
+var inputTagSlotRecipe = defineSlotRecipe12({
+  className: "input-tag",
+  jsx: ["MpInputTag", "mp-input-tag"],
+  slots: [
+    "root",
+    "trigger",
+    "input",
+    "content",
+    "resetButton",
+    "dropdownButton",
+    "addButton",
+    "loading",
+    "empty",
+    "suggestionWrapper",
+    "suggestionLoading"
+  ],
+  base: {
+    root: {
+      position: "relative",
+      width: "full"
+    },
+    trigger: {
+      overflowY: "auto",
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: "2",
+      borderWidth: "1px",
+      borderColor: "gray.100",
+      borderRadius: "md",
+      paddingTop: "2",
+      paddingBottom: "2",
+      paddingLeft: "3",
+      paddingRight: "8",
+      backgroundColor: "white",
+      transition: "all 250ms",
+      _hover: {
+        borderColor: "gray.400"
+      },
+      _focusVisible: {
+        boxShadow: "focus",
+        borderColor: "blue.400",
+        _hover: {
+          borderColor: "blue.400"
+        }
+      },
+      _disabled: {
+        cursor: "not-allowed",
+        background: "gray.50"
+      },
+      _invalid: {
+        borderColor: "red.400",
+        _hover: {
+          borderColor: "red.400"
+        }
+      },
+      _hasIcon: {
+        paddingRight: "52px"
+      }
+    },
+    input: {
+      padding: "0 !important",
+      margin: "0 !important"
+    },
+    content: {
+      maxHeight: "300px",
+      overflowY: "auto"
+    },
+    resetButton: {
+      cursor: "pointer",
+      position: "absolute",
+      top: "2"
+    },
+    dropdownButton: {
+      cursor: "pointer",
+      position: "absolute",
+      top: "2",
+      right: "3"
+    },
+    addButton: {
+      cursor: "pointer",
+      width: "full",
+      px: "3",
+      py: "2",
+      wordBreak: "break-all",
+      textAlign: "center"
+    },
+    loading: {
+      position: "absolute",
+      top: "2",
+      right: "3"
+    },
+    empty: {
+      px: "3",
+      py: "2",
+      width: "full",
+      textAlign: "left"
+    },
+    suggestionWrapper: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%"
+    },
+    suggestionLoading: {
+      display: "flex",
+      justifyContent: "flex-start",
+      gap: "3",
+      width: "full",
+      height: "9",
+      py: "2",
+      px: "3"
+    }
+  }
+});
+
+// src/recipes/divider.ts
+import { defineRecipe as defineRecipe11 } from "@pandacss/dev";
+var dividerRecipe = defineRecipe11({
+  className: "divider",
+  jsx: ["MpDivider", "mp-divider"],
+  base: {
+    border: 0,
+    opacity: 0.6,
+    color: "rgb(208, 214, 221)"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        borderBottom: "0.0625rem solid",
+        height: "auto",
+        marginY: 2
+      },
+      vertical: {
+        borderLeft: "0.0625rem solid",
+        height: "auto",
+        marginX: 2
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+
 // src/recipes/index.ts
 var recipes = {
   buttonRecipe,
@@ -2441,7 +2629,8 @@ var recipes = {
   tabRecipe,
   selectedBorderRecipe,
   tableRecipe,
-  tableContainerRecipe
+  tableContainerRecipe,
+  dividerRecipe
 };
 var slotRecipes = {
   accordion,
@@ -2456,7 +2645,9 @@ var slotRecipes = {
   inputAddonSlotRecipe,
   avatarSlotRecipe,
   avatarGroupSlotRecipe,
-  selectSlotRecipe
+  selectSlotRecipe,
+  formControlSlotRecipe,
+  inputTagSlotRecipe
 };
 
 // src/breakpoints.ts
@@ -2482,7 +2673,3 @@ var preset = definePreset({
   conditions,
   globalCss
 });
-var src_default = preset;
-export {
-  src_default as default
-};

package/dist/recipes/divider.d.mts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const dividerRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+
+export { dividerRecipe };

package/dist/recipes/divider.d.ts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const dividerRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+
+export { dividerRecipe };

package/dist/recipes/form-control.d.mts

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

package/dist/recipes/form-control.d.ts

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

package/dist/recipes/index.d.mts

@@ -17,6 +17,7 @@ declare const recipes: {
     selectedBorderRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tableRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tableContainerRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    dividerRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
     accordion: _pandacss_types.SlotRecipeConfig;
@@ -32,6 +33,8 @@ declare const slotRecipes: {
     avatarSlotRecipe: _pandacss_types.SlotRecipeConfig;
     avatarGroupSlotRecipe: _pandacss_types.SlotRecipeConfig;
     selectSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    formControlSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    inputTagSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/recipes/index.d.ts

@@ -17,6 +17,7 @@ declare const recipes: {
     selectedBorderRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tableRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tableContainerRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    dividerRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
     accordion: _pandacss_types.SlotRecipeConfig;
@@ -32,6 +33,8 @@ declare const slotRecipes: {
     avatarSlotRecipe: _pandacss_types.SlotRecipeConfig;
     avatarGroupSlotRecipe: _pandacss_types.SlotRecipeConfig;
     selectSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    formControlSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    inputTagSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/recipes/input-tag.d.mts

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

package/dist/recipes/input-tag.d.ts

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

package/dist/tokens/index.d.mts

@@ -538,6 +538,10 @@ declare const tokens: {
             value: string;
             description: string;
         };
+        56: {
+            value: string;
+            description: string;
+        };
         65: {
             value: string;
             description: string;

package/dist/tokens/index.d.ts

@@ -538,6 +538,10 @@ declare const tokens: {
             value: string;
             description: string;
         };
+        56: {
+            value: string;
+            description: string;
+        };
         65: {
             value: string;
             description: string;

package/dist/tokens/sizes.d.mts

@@ -83,6 +83,10 @@ declare const sizes: {
         value: string;
         description: string;
     };
+    56: {
+        value: string;
+        description: string;
+    };
     65: {
         value: string;
         description: string;

package/dist/tokens/sizes.d.ts

@@ -83,6 +83,10 @@ declare const sizes: {
         value: string;
         description: string;
     };
+    56: {
+        value: string;
+        description: string;
+    };
     65: {
         value: string;
         description: string;

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@mekari/pixel3-theme",
   "description": "Theme for mekari pixel 3",
-  "version": "0.0.1-alpha.0",
+  "version": "0.0.1",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@pandacss/dev": "0.20.1"
+    "@pandacss/dev": "0.22.1"
   },
   "peerDependencies": {
     "vue": "^3.3.7"
   },
   "devDependencies": {
-    "@pandacss/types": "0.20.1",
+    "@pandacss/types": "0.22.1",
     "vue": "^3.3.7"
   },
   "publishConfig": {

package/src/breakpoints.ts

@@ -0,0 +1,6 @@
+export const breakpoints = {
+  sm: '22.5em',
+  md: '48em',
+  lg: '64em',
+  xl: '80em'
+}