@chakra-ui/vue-system - npm Package Compare versions

Comparing version 2.0.0-beta.1 to 2.0.0-beta.2

dist/chakra-ui-vue-system.cjs.js

@@ -1,7 +0,412 @@
-'use strict';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+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))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./chakra-ui-vue-system.cjs.prod.js");
-} else {
-  module.exports = require("./chakra-ui-vue-system.cjs.dev.js");
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  StylesProvider: () => StylesProvider,
+  ___chakra___: () => ___chakra___,
+  _chakra: () => _chakra,
+  chakra: () => chakra,
+  createStylesContext: () => createStylesContext,
+  domElements: () => domElements,
+  injectGlobal: () => import_css.injectGlobal,
+  keyframes: () => import_css.keyframes,
+  resolveStyles: () => resolveStyles,
+  styled: () => styled,
+  toCSSObject: () => toCSSObject,
+  useChakra: () => useChakra,
+  useMultiStyleConfig: () => useMultiStyleConfig,
+  useStyleConfig: () => useStyleConfig,
+  useStyles: () => useStyles,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/chakra.tsx
+var import_vue7 = require("vue");
+var import_vue8 = require("vue");
+var import_styled_system2 = require("@chakra-ui/styled-system");
+var import_utils4 = require("@chakra-ui/utils");
+var import_css2 = require("@emotion/css");
+
+// src/system.utils.ts
+var import_utils = require("@chakra-ui/utils");
+var import_css = require("@emotion/css");
+var import_vue = require("vue");
+var domElements = ["a", "b", "article", "aside", "blockquote", "button", "caption", "cite", "circle", "code", "dd", "div", "dl", "dt", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hr", "iframe", "img", "input", "kbd", "label", "li", "mark", "main", "nav", "ol", "p", "path", "pre", "q", "rect", "s", "svg", "section", "select", "strong", "small", "span", "sub", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "tr", "ul"];
+
+// src/composables/use-chakra.ts
+var import_vue2 = require("vue");
+var import_c_color_mode = require("@chakra-ui/c-color-mode");
+var import_utils2 = require("@chakra-ui/utils");
+var useTheme = /* @__PURE__ */ __name(() => {
+  const theme = (0, import_vue2.inject)("$chakraTheme");
+  return theme;
+}, "useTheme");
+var useChakra = /* @__PURE__ */ __name(() => {
+  const theme = useTheme();
+  const {
+    colorMode,
+    forced
+  } = (0, import_c_color_mode.useColorMode)();
+  return {
+    theme,
+    colorMode,
+    forced
+  };
+}, "useChakra");
+
+// src/chakra.tsx
+var import_vue_utils = require("@chakra-ui/vue-utils");
+
+// src/system.types.ts
+var import_vue4 = require("vue");
+var import_styled_system = require("@chakra-ui/styled-system");
+
+// src/dom.types.ts
+var import_vue3 = require("vue");
+
+// src/system.types.ts
+var import_vue5 = require("vue");
+
+// src/chakra.forms.ts
+var import_vue6 = require("vue");
+var import_utils3 = require("@chakra-ui/utils");
+var formElements = {
+  input: {
+    emits: ["input", "change", "onUpdate:modelValue"],
+    props: {
+      modelValue: [Boolean, String]
+    },
+    handleValueChange(props, type) {
+      return (emit) => {
+        return {
+          ...type === "checkbox" && {
+            checked: props.modelValue
+          },
+          onChange: (event) => {
+            if (type === "checkbox") {
+              emit("change", !(event == null ? void 0 : event.target).checked, event);
+              emit("update:modelValue", !(event == null ? void 0 : event.target).checked, event);
+              return;
+            }
+          },
+          onInput: (event) => {
+            emit("input", (event == null ? void 0 : event.currentTarget).value, event);
+            emit("update:modelValue", (event == null ? void 0 : event.currentTarget).value, event);
+          }
+        };
+      };
+    }
+  },
+  textarea: {
+    emits: ["input", "change", "onUpdate:modelValue"],
+    props: {
+      modelValue: [Boolean, String]
+    },
+    handleValueChange(props, type) {
+      return (emit) => {
+        return {
+          onInput: (event) => {
+            emit("input", (event == null ? void 0 : event.currentTarget).value, event);
+            emit("update:modelValue", (event == null ? void 0 : event.currentTarget).value, event);
+          }
+        };
+      };
+    }
+  },
+  select: {
+    emits: ["input", "change", "onUpdate:modelValue"],
+    props: {
+      modelValue: [Boolean, String]
+    },
+    handleValueChange(props, type) {
+      return (emit) => {
+        return {
+          onChange: (event) => {
+            emit("input", (event == null ? void 0 : event.currentTarget).value, event);
+            emit("update:modelValue", (event == null ? void 0 : event.currentTarget).value, event);
+          }
+        };
+      };
+    }
+  }
+};
+
+// src/chakra.tsx
+var import_serialize = require("@emotion/serialize");
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, import_vue7.isVNode)(s);
 }
+__name(_isSlot, "_isSlot");
+var chakraProps = {
+  as: [String, Object],
+  __css: Object,
+  sx: Object,
+  css: Object,
+  noOfLines: [String, Number, Object, Array],
+  baseStyle: Object,
+  isTruncated: Boolean,
+  layerStyle: String,
+  textStyle: String,
+  apply: String,
+  label: String,
+  modelValue: [String, Number, Object, Array],
+  __chakraIsRaw: Boolean
+};
+function ___chakra___(tag, options = {}) {
+  const inputHandlers = formElements[typeof tag === "string" ? tag : ""];
+  const _props = inputHandlers && inputHandlers.props || {};
+  const handleValueChange = inputHandlers && inputHandlers.handleValueChange;
+  return (0, import_vue8.defineComponent)({
+    name: `chakra-factory-${String(tag)}`,
+    inheritAttrs: false,
+    props: {
+      ...chakraProps,
+      ..._props
+    },
+    setup(props, {
+      slots,
+      emit,
+      attrs
+    }) {
+      const {
+        theme,
+        colorMode,
+        forced
+      } = useChakra();
+      const layerStyle$ = (0, import_vue8.computed)(() => props.layerStyle || (options == null ? void 0 : options.layerStyle));
+      const textStyle$ = (0, import_vue8.computed)(() => props.textStyle || (options == null ? void 0 : options.textStyle));
+      const baseStyle$ = (0, import_vue8.computed)(() => props.baseStyle || (options == null ? void 0 : options.baseStyle));
+      const noOfLines$ = (0, import_vue8.computed)(() => props.noOfLines || (options == null ? void 0 : options.noOfLines));
+      const isTruncated$ = (0, import_vue8.computed)(() => props.isTruncated || (options == null ? void 0 : options.isTruncated));
+      const __css$ = (0, import_vue8.computed)(() => props.__css || (options == null ? void 0 : options.__css));
+      const css$ = (0, import_vue8.computed)(() => props.css || (options == null ? void 0 : options.css));
+      const sx$ = (0, import_vue8.computed)(() => props.sx || (options == null ? void 0 : options.sx));
+      const apply$ = (0, import_vue8.computed)(() => props.apply || (options == null ? void 0 : options.apply));
+      return () => {
+        const {
+          class: inheritedClass,
+          __label,
+          ...rest
+        } = attrs;
+        const {
+          layerStyle,
+          baseStyle,
+          textStyle,
+          noOfLines,
+          isTruncated,
+          __css,
+          css: css2,
+          sx,
+          apply,
+          label,
+          ...otherStyles
+        } = options;
+        const {
+          styles,
+          attrs: elementAttributes
+        } = (0, import_vue_utils.extractStyleAttrs)({
+          ...otherStyles,
+          ...rest
+        });
+        const resolvedComponentStyles = resolveStyles({
+          __css: __css$.value,
+          baseStyle: baseStyle$.value,
+          apply: apply$.value,
+          layerStyle: layerStyle$.value,
+          noOfLines: noOfLines$.value,
+          isTruncated: isTruncated$.value,
+          textStyle: textStyle$.value,
+          sx: sx$.value,
+          css: css$.value,
+          ...styles,
+          theme
+        });
+        const componentLabel = label || __label;
+        const _componentName = componentLabel ? `chakra-${componentLabel}` : "";
+        const className = (0, import_css2.css)(resolvedComponentStyles);
+        let componentOrTag = props.as || tag;
+        if (!(0, import_utils4.isObject)(componentOrTag) && !domElements.includes(componentOrTag)) {
+          componentOrTag = (0, import_vue8.resolveComponent)(componentOrTag);
+        }
+        const Tag = componentOrTag || props.as;
+        return (0, import_vue7.createVNode)(Tag, (0, import_vue7.mergeProps)({
+          "class": (0, import_css2.cx)(inheritedClass, _componentName, className)
+        }, elementAttributes, {
+          "data-theme": forced ? colorMode.value : void 0
+        }, !props.__chakraIsRaw && handleValueChange && handleValueChange(props, attrs.type)(emit)), _isSlot(slots) ? slots : {
+          default: () => [slots]
+        });
+      };
+    }
+  });
+}
+__name(___chakra___, "___chakra___");
+var chakra = Object.assign(___chakra___, domElements.reduce((acc, curr) => {
+  acc[curr] = ___chakra___(curr);
+  return acc;
+}, {}));
+var toCSSObject = /* @__PURE__ */ __name((options) => (props) => {
+  const {
+    theme,
+    css: cssProp,
+    __css,
+    sx,
+    ...rest
+  } = props;
+  const styleProps = (0, import_utils4.objectFilter)(rest, (_, prop) => (0, import_styled_system2.isStyleProp)(prop));
+  const finalStyles = resolveStyles(Object.assign(options, {
+    theme
+  }, styleProps));
+  const computedCSS = (0, import_styled_system2.css)(finalStyles)(props.theme);
+  return cssProp ? [computedCSS, cssProp] : computedCSS;
+}, "toCSSObject");
+function styled(component, options) {
+  const {
+    baseStyle,
+    ...styledOptions
+  } = options != null ? options : {};
+  const styleObject = toCSSObject(options);
+  return chakra(component, styledOptions);
+}
+__name(styled, "styled");
+var _chakra = styled;
+var resolveStyles = /* @__PURE__ */ __name((resolvers = {}) => {
+  const {
+    layerStyle,
+    baseStyle,
+    textStyle,
+    noOfLines,
+    isTruncated,
+    __css,
+    css: cssProp,
+    sx,
+    apply,
+    theme,
+    ...otherStyles
+  } = resolvers;
+  const _layerStyle = (0, import_utils4.memoizedGet)(theme, `layerStyles.${layerStyle}`, {});
+  const _textStyle = (0, import_utils4.memoizedGet)(theme, `textStyles.${textStyle}`, {});
+  let truncateStyle = {};
+  if (noOfLines != null) {
+    truncateStyle = {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      display: "-webkit-box",
+      WebkitBoxOrient: "vertical",
+      WebkitLineClamp: noOfLines
+    };
+  } else if (isTruncated) {
+    truncateStyle = {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    };
+  }
+  const finalStyles = (0, import_styled_system2.css)(Object.assign({}, __css, baseStyle, {
+    apply
+  }, _layerStyle, _textStyle, truncateStyle, otherStyles, sx))(theme);
+  const cssObject = Object.assign(finalStyles, (0, import_utils4.isFunction)(cssProp) ? cssProp(theme) : cssProp);
+  return cssObject;
+}, "resolveStyles");
+domElements.forEach((tag) => {
+  _chakra[tag] = _chakra(tag);
+});
+
+// src/providers.ts
+var import_vue_utils2 = require("@chakra-ui/vue-utils");
+var import_utils5 = require("@chakra-ui/utils");
+var import_styled_system3 = require("@chakra-ui/styled-system");
+var import_vue9 = require("vue");
+var [StylesProvider, useStyles] = (0, import_vue_utils2.createContext)({
+  name: "StylesContext",
+  errorMessage: "useStyles: `styles` is undefined. Seems you forgot to provide `StylesProvider(...)` "
+});
+var createStylesContext = /* @__PURE__ */ __name((componentName) => (0, import_vue_utils2.createContext)({
+  name: `${componentName}StylesContext`,
+  errorMessage: `useStyles: "styles" is undefined. Seems you forgot to wrap the components in "<${componentName} />" `
+}), "createStylesContext");
+
+// src/composables/use-style-config.ts
+var import_vue10 = require("vue");
+var import_styled_system4 = require("@chakra-ui/styled-system");
+var import_utils6 = require("@chakra-ui/utils");
+function useStyleConfig(themeKey, themingProps, options = {}) {
+  return (0, import_vue10.computed)(() => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const {
+      styleConfig: styleConfigProp,
+      ...rest
+    } = themingProps.value || themingProps;
+    const {
+      theme,
+      colorMode
+    } = useChakra();
+    const themeStyleConfig = (0, import_utils6.get)(theme, `components.${themeKey}`);
+    const styleConfig = styleConfigProp || themeStyleConfig;
+    const mergedProps = (0, import_utils6.mergeWith)({
+      theme,
+      colorMode: colorMode.value
+    }, (_a = styleConfig == null ? void 0 : styleConfig.defaultProps) != null ? _a : {}, (0, import_utils6.filterUndefined)(rest));
+    const baseStyles = (0, import_utils6.runIfFn)((_b = styleConfig == null ? void 0 : styleConfig.baseStyle) != null ? _b : {}, mergedProps);
+    const variants = (0, import_utils6.runIfFn)((_d = (_c = styleConfig == null ? void 0 : styleConfig.variants) == null ? void 0 : _c[mergedProps.variant]) != null ? _d : {}, mergedProps);
+    const sizes = (0, import_utils6.runIfFn)((_f = (_e = styleConfig == null ? void 0 : styleConfig.sizes) == null ? void 0 : _e[mergedProps.size]) != null ? _f : {}, mergedProps);
+    const styles = (0, import_utils6.mergeWith)({}, baseStyles, sizes, variants);
+    if (options.isMultiPart && (styleConfig == null ? void 0 : styleConfig.parts)) {
+      (_g = styleConfig == null ? void 0 : styleConfig.parts) == null ? void 0 : _g.forEach((part) => {
+        var _a2;
+        styles[part] = (_a2 = styles[part]) != null ? _a2 : {};
+      });
+    }
+    return styles;
+  });
+}
+__name(useStyleConfig, "useStyleConfig");
+function useMultiStyleConfig(themeKey, themingProps) {
+  return useStyleConfig(themeKey, themingProps, {
+    isMultiPart: true
+  });
+}
+__name(useMultiStyleConfig, "useMultiStyleConfig");
+
+// src/index.tsx
+__reExport(src_exports, require("@chakra-ui/styled-system"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StylesProvider,
+  ___chakra___,
+  _chakra,
+  chakra,
+  createStylesContext,
+  domElements,
+  injectGlobal,
+  keyframes,
+  resolveStyles,
+  styled,
+  toCSSObject,
+  useChakra,
+  useMultiStyleConfig,
+  useStyleConfig,
+  useStyles,
+  useTheme
+});

dist/chakra-ui-vue-system.esm.js

@@ -1,66 +0,54 @@
-import { inject, defineComponent, computed, resolveComponent, h } from 'vue';
-import { isStyleProp, css as css$1 } from '@chakra-ui/styled-system';
-export * from '@chakra-ui/styled-system';
-import _styled from '@chakra-ui/vue-styled';
-import { isObject, objectFilter, memoizedGet, isFunction, get, mergeWith, filterUndefined, runIfFn } from '@chakra-ui/utils';
-import { css, cx } from '@emotion/css';
-export { injectGlobal, keyframes } from '@emotion/css';
-import { useColorMode } from '@chakra-ui/c-color-mode';
-import { extractStyleAttrs, createContext } from '@chakra-ui/vue-utils';
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
+// src/chakra.tsx
+import { createVNode as _createVNode, isVNode as _isVNode, mergeProps as _mergeProps } from "vue";
+import { computed as computed2, defineComponent, resolveComponent } from "vue";
+import { css, isStyleProp } from "@chakra-ui/styled-system";
+import { isFunction, objectFilter, isObject, memoizedGet as get } from "@chakra-ui/utils";
+import { cx, css as _css } from "@emotion/css";
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-/**
- * Carefully selected html elements for chakra components.
- * This is mostly for `chakra.[element]` syntax.
- *
- * Adapted from React package
- */
+// src/system.utils.ts
+import "@chakra-ui/utils";
+import { keyframes, injectGlobal } from "@emotion/css";
+import "vue";
 var domElements = ["a", "b", "article", "aside", "blockquote", "button", "caption", "cite", "circle", "code", "dd", "div", "dl", "dt", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hr", "iframe", "img", "input", "kbd", "label", "li", "mark", "main", "nav", "ol", "p", "path", "pre", "q", "rect", "s", "svg", "section", "select", "strong", "small", "span", "sub", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "tr", "ul"];
 
-/** Provides theme object in component context */
-var useTheme = function useTheme() {
-  var theme = inject("$chakraTheme");
+// src/composables/use-chakra.ts
+import { inject } from "vue";
+import { useColorMode } from "@chakra-ui/c-color-mode";
+import "@chakra-ui/utils";
+var useTheme = /* @__PURE__ */ __name(() => {
+  const theme = inject("$chakraTheme");
   return theme;
-};
-
-/** Single hook to provide theme and color mode values */
-var useChakra = function useChakra() {
-  var theme = useTheme();
-  var _useColorMode = useColorMode(),
-    colorMode = _useColorMode.colorMode,
-    forced = _useColorMode.forced;
+}, "useTheme");
+var useChakra = /* @__PURE__ */ __name(() => {
+  const theme = useTheme();
+  const {
+    colorMode,
+    forced
+  } = useColorMode();
   return {
-    theme: theme,
-    colorMode: colorMode,
-    forced: forced
+    theme,
+    colorMode,
+    forced
   };
-};
+}, "useChakra");
 
+// src/chakra.tsx
+import { extractStyleAttrs } from "@chakra-ui/vue-utils";
+
+// src/system.types.ts
+import "vue";
+import "@chakra-ui/styled-system";
+
+// src/dom.types.ts
+import "vue";
+
+// src/system.types.ts
+import "vue";
+
+// src/chakra.forms.ts
+import { computed, getCurrentInstance } from "vue";
+import "@chakra-ui/utils";
 var formElements = {
@@ -72,9 +60,9 @@ input: {
     },
-    handleValueChange: function handleValueChange(props, type) {
-      return function (emit) {
-        return _extends({}, type === "checkbox" && {
-          checked: props.modelValue
-          // value: props.modelValue,
-        }, {
-          onChange: function onChange(event) {
+    handleValueChange(props, type) {
+      return (emit) => {
+        return {
+          ...type === "checkbox" && {
+            checked: props.modelValue
+          },
+          onChange: (event) => {
             if (type === "checkbox") {
@@ -86,7 +74,7 @@ emit("change", !(event == null ? void 0 : event.target).checked, event);
           },
-          onInput: function onInput(event) {
+          onInput: (event) => {
             emit("input", (event == null ? void 0 : event.currentTarget).value, event);
             emit("update:modelValue", (event == null ? void 0 : event.currentTarget).value, event);
           }
-        });
+        };
       };
@@ -100,6 +88,6 @@ }
     },
-    handleValueChange: function handleValueChange(props, type) {
-      return function (emit) {
+    handleValueChange(props, type) {
+      return (emit) => {
         return {
-          onInput: function onInput(event) {
+          onInput: (event) => {
             emit("input", (event == null ? void 0 : event.currentTarget).value, event);
@@ -117,6 +105,6 @@ emit("update:modelValue", (event == null ? void 0 : event.currentTarget).value, event);
     },
-    handleValueChange: function handleValueChange(props, type) {
-      return function (emit) {
+    handleValueChange(props, type) {
+      return (emit) => {
         return {
-          onChange: function onChange(event) {
+          onChange: (event) => {
             emit("input", (event == null ? void 0 : event.currentTarget).value, event);
@@ -131,7 +119,8 @@ emit("update:modelValue", (event == null ? void 0 : event.currentTarget).value, event);
 
-var _excluded$1 = ["class", "__label"],
-  _excluded2 = ["layerStyle", "baseStyle", "textStyle", "noOfLines", "isTruncated", "__css", "css", "sx", "apply", "label"],
-  _excluded3 = ["theme", "css", "__css", "sx"],
-  _excluded4 = ["baseStyle"],
-  _excluded5 = ["layerStyle", "baseStyle", "textStyle", "noOfLines", "isTruncated", "__css", "css", "sx", "apply", "theme"];
+// src/chakra.tsx
+import "@emotion/serialize";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !_isVNode(s);
+}
+__name(_isSlot, "_isSlot");
 var chakraProps = {
@@ -150,146 +139,61 @@ as: [String, Object],
   modelValue: [String, Number, Object, Array],
-  /**
-   * @warning
-   * @internal
-   * This internal is an internal ChakraFactoryFunction prop that
-   * is used to determine how events are handled on Chakra Factory
-   * components.
-   *
-   * For example, if a factory component is considered to be raw (i.e. `__chakraIsRaw: true`),
-   * then, we do not pass v-model event listeners onto the component. This means that
-   * `v-model` will not work in the template context.
-   *
-   * You can see how this prop is used in the `c-input` component.
-   *
-   * THIS PROP IS A NON-DOCUMENTED PROP, AND IS ONLY TO BE USED FOR INTERNAL DEVELOPMENT.
-   */
   __chakraIsRaw: Boolean
 };
-/**
- * Chakra factory serves as an object of chakra enabled HTML elements,
- * and also a function that can be used to enable custom component receive chakra's style props.
- * @param tag Tag or Component
- * @param options resolver options
- * 
- * How does it work?
- *
- * 1. Components returned from the chakra factory can be styled after consuming them
- *    @example
- *    ```js
- *    const Form = chakra('form') // returns a VNode you can use in the template directly
- *    ```
- * 
- * 2. Chakra components can directly be styled upon creation using the options object of type `StyleResolverProps`
- *    This resolves style object for component styles defined in the theme.
- * 
- *    Styling components using the chakra factory function can be done using the following keys from the theme:
- *    - `baseStyle`
- *    - `layerStyle`
- *    - `textStyle`
- * 
- *    @example
- *    ```js
- *    const MyCustomButton = chakra('button', {
- *     baseStyle: {
-         bg: 'papayawhip,
-         color: 'red.500,
-         px: 4,
-         py: 3
-       }
- *    })
- *    ```
- *    ```html
- *    <my-custom-button>Hello Papaya Button</my-custom-button>
- *    ```
- * 
- *    See more about the style resolution in the `resolveStyles` function.
- * 
- * 3. Chakra components created and styled using the `chakra` factory can be overriden in the template by applying
- *    style properties directly
- * 
- *    @example
- *    ```html
- *    <my-custom-button bg="blue.400">
- *      Papaya button goes blue
- *    </my-custom-button>
- *    ```
- */
-// @ts-expect-error
-var chakra = function chakra(tag, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  var inputHandlers = formElements[typeof tag === "string" ? tag : ""];
-  var _props = inputHandlers && inputHandlers.props || {};
-  var handleValueChange = inputHandlers && inputHandlers.handleValueChange;
+function ___chakra___(tag, options = {}) {
+  const inputHandlers = formElements[typeof tag === "string" ? tag : ""];
+  const _props = inputHandlers && inputHandlers.props || {};
+  const handleValueChange = inputHandlers && inputHandlers.handleValueChange;
   return defineComponent({
-    name: "chakra-factory-" + String(tag),
+    name: `chakra-factory-${String(tag)}`,
     inheritAttrs: false,
-    props: _extends({}, chakraProps, _props),
-    setup: function setup(props, _ref) {
-      var slots = _ref.slots,
-        emit = _ref.emit,
-        attrs = _ref.attrs;
-      var _useChakra = useChakra(),
-        theme = _useChakra.theme,
-        colorMode = _useChakra.colorMode,
-        forced = _useChakra.forced;
-      var layerStyle$ = computed(function () {
-        var _options;
-        return props.layerStyle || ((_options = options) == null ? void 0 : _options.layerStyle);
-      });
-      var textStyle$ = computed(function () {
-        var _options2;
-        return props.textStyle || ((_options2 = options) == null ? void 0 : _options2.textStyle);
-      });
-      var baseStyle$ = computed(function () {
-        var _options3;
-        return props.baseStyle || ((_options3 = options) == null ? void 0 : _options3.baseStyle);
-      });
-      var noOfLines$ = computed(function () {
-        var _options4;
-        return props.noOfLines || ((_options4 = options) == null ? void 0 : _options4.noOfLines);
-      });
-      var isTruncated$ = computed(function () {
-        var _options5;
-        return props.isTruncated || ((_options5 = options) == null ? void 0 : _options5.isTruncated);
-      });
-      var __css$ = computed(function () {
-        var _options6;
-        return props.__css || ((_options6 = options) == null ? void 0 : _options6.__css);
-      });
-      var css$ = computed(function () {
-        var _options7;
-        return props.css || ((_options7 = options) == null ? void 0 : _options7.css);
-      });
-      var sx$ = computed(function () {
-        var _options8;
-        return props.sx || ((_options8 = options) == null ? void 0 : _options8.sx);
-      });
-      var apply$ = computed(function () {
-        var _options9;
-        return props.apply || ((_options9 = options) == null ? void 0 : _options9.apply);
-      });
-      return function () {
-        var inheritedClass = attrs["class"],
-          __label = attrs.__label,
-          rest = _objectWithoutPropertiesLoose(attrs, _excluded$1);
-        var _options10 = options;
-          _options10.layerStyle;
-          _options10.baseStyle;
-          _options10.textStyle;
-          _options10.noOfLines;
-          _options10.isTruncated;
-          _options10.__css;
-          _options10.css;
-          _options10.sx;
-          _options10.apply;
-          var label = _options10.label,
-          otherStyles = _objectWithoutPropertiesLoose(_options10, _excluded2);
-
-        // Separate component style attributes from raw HTML attributes
-        var _extractStyleAttrs = extractStyleAttrs(_extends({}, otherStyles, rest)),
-          styles = _extractStyleAttrs.styles,
-          elementAttributes = _extractStyleAttrs.attrs;
-        var resolvedComponentStyles = resolveStyles(_extends({
+    props: {
+      ...chakraProps,
+      ..._props
+    },
+    setup(props, {
+      slots,
+      emit,
+      attrs
+    }) {
+      const {
+        theme,
+        colorMode,
+        forced
+      } = useChakra();
+      const layerStyle$ = computed2(() => props.layerStyle || (options == null ? void 0 : options.layerStyle));
+      const textStyle$ = computed2(() => props.textStyle || (options == null ? void 0 : options.textStyle));
+      const baseStyle$ = computed2(() => props.baseStyle || (options == null ? void 0 : options.baseStyle));
+      const noOfLines$ = computed2(() => props.noOfLines || (options == null ? void 0 : options.noOfLines));
+      const isTruncated$ = computed2(() => props.isTruncated || (options == null ? void 0 : options.isTruncated));
+      const __css$ = computed2(() => props.__css || (options == null ? void 0 : options.__css));
+      const css$ = computed2(() => props.css || (options == null ? void 0 : options.css));
+      const sx$ = computed2(() => props.sx || (options == null ? void 0 : options.sx));
+      const apply$ = computed2(() => props.apply || (options == null ? void 0 : options.apply));
+      return () => {
+        const {
+          class: inheritedClass,
+          __label,
+          ...rest
+        } = attrs;
+        const {
+          layerStyle,
+          baseStyle,
+          textStyle,
+          noOfLines,
+          isTruncated,
+          __css,
+          css: css2,
+          sx,
+          apply,
+          label,
+          ...otherStyles
+        } = options;
+        const {
+          styles,
+          attrs: elementAttributes
+        } = extractStyleAttrs({
+          ...otherStyles,
+          ...rest
+        });
+        const resolvedComponentStyles = resolveStyles({
           __css: __css$.value,
@@ -303,83 +207,72 @@ baseStyle: baseStyle$.value,
           sx: sx$.value,
-          css: css$.value
-        }, styles, {
-          theme: theme
-        }));
-        var componentLabel = label || __label;
-        var _componentName = componentLabel ? "chakra-" + componentLabel : "";
-        var className = css(resolvedComponentStyles);
-        var componentOrTag = props.as || tag;
-
-        // if tag is not a dom element like as="div" and an object (vue component as an object) like v-bind:as="RouterLink"
+          css: css$.value,
+          ...styles,
+          theme
+        });
+        const componentLabel = label || __label;
+        const _componentName = componentLabel ? `chakra-${componentLabel}` : "";
+        const className = _css(resolvedComponentStyles);
+        let componentOrTag = props.as || tag;
         if (!isObject(componentOrTag) && !domElements.includes(componentOrTag)) {
-          // it's a string like as="router-link"
           componentOrTag = resolveComponent(componentOrTag);
         }
-        return h(componentOrTag || props.as, _extends({
+        const Tag = componentOrTag || props.as;
+        return _createVNode(Tag, _mergeProps({
           "class": cx(inheritedClass, _componentName, className)
         }, elementAttributes, {
-          "data-theme": forced ? colorMode.value : undefined
-        }, !props.__chakraIsRaw && handleValueChange &&
-        // @ts-ignore
-        handleValueChange(props, attrs.type)(emit)), slots);
+          "data-theme": forced ? colorMode.value : void 0
+        }, !props.__chakraIsRaw && handleValueChange && handleValueChange(props, attrs.type)(emit)), _isSlot(slots) ? slots : {
+          default: () => [slots]
+        });
       };
     }
   });
-};
-
-// return h(
-//   _styled((componentOrTag as any) || props.as)({
-//     ...resolvedComponentStyles,
-//     ...elementAttributes,
-//   }) as unknown as DefineComponent<ChakraProps>,
-//   slots
-// )
-
-var toCSSObject = function toCSSObject(options) {
-  return function (props) {
-    var theme = props.theme,
-      cssProp = props.css;
-      props.__css;
-      props.sx;
-      var rest = _objectWithoutPropertiesLoose(props, _excluded3);
-    var styleProps = objectFilter(rest, function (_, prop) {
-      return isStyleProp(prop);
-    });
-    var finalStyles = resolveStyles(Object.assign(options, {
-      theme: theme
-    }, styleProps));
-    var computedCSS = css$1(finalStyles)(props.theme);
-    return cssProp ? [computedCSS, cssProp] : computedCSS;
-  };
-};
+}
+__name(___chakra___, "___chakra___");
+var chakra = Object.assign(___chakra___, domElements.reduce((acc, curr) => {
+  acc[curr] = ___chakra___(curr);
+  return acc;
+}, {}));
+var toCSSObject = /* @__PURE__ */ __name((options) => (props) => {
+  const {
+    theme,
+    css: cssProp,
+    __css,
+    sx,
+    ...rest
+  } = props;
+  const styleProps = objectFilter(rest, (_, prop) => isStyleProp(prop));
+  const finalStyles = resolveStyles(Object.assign(options, {
+    theme
+  }, styleProps));
+  const computedCSS = css(finalStyles)(props.theme);
+  return cssProp ? [computedCSS, cssProp] : computedCSS;
+}, "toCSSObject");
 function styled(component, options) {
-  var _ref2 = options != null ? options : {};
-    _ref2.baseStyle;
-    var styledOptions = _objectWithoutPropertiesLoose(_ref2, _excluded4);
-  var styleObject = toCSSObject(options);
-  return _styled(component, styledOptions)(styleObject);
+  const {
+    baseStyle,
+    ...styledOptions
+  } = options != null ? options : {};
+  const styleObject = toCSSObject(options);
+  return chakra(component, styledOptions);
 }
+__name(styled, "styled");
 var _chakra = styled;
-domElements.forEach(function (tag) {
-  chakra[tag] = chakra(tag);
-});
-var resolveStyles = function resolveStyles(resolvers) {
-  if (resolvers === void 0) {
-    resolvers = {};
-  }
-  var _resolvers = resolvers,
-    layerStyle = _resolvers.layerStyle,
-    baseStyle = _resolvers.baseStyle,
-    textStyle = _resolvers.textStyle,
-    noOfLines = _resolvers.noOfLines,
-    isTruncated = _resolvers.isTruncated,
-    __css = _resolvers.__css,
-    cssProp = _resolvers.css,
-    sx = _resolvers.sx,
-    apply = _resolvers.apply,
-    theme = _resolvers.theme,
-    otherStyles = _objectWithoutPropertiesLoose(_resolvers, _excluded5);
-  var _layerStyle = memoizedGet(theme, "layerStyles." + layerStyle, {});
-  var _textStyle = memoizedGet(theme, "textStyles." + textStyle, {});
-  var truncateStyle = {};
+var resolveStyles = /* @__PURE__ */ __name((resolvers = {}) => {
+  const {
+    layerStyle,
+    baseStyle,
+    textStyle,
+    noOfLines,
+    isTruncated,
+    __css,
+    css: cssProp,
+    sx,
+    apply,
+    theme,
+    ...otherStyles
+  } = resolvers;
+  const _layerStyle = get(theme, `layerStyles.${layerStyle}`, {});
+  const _textStyle = get(theme, `textStyles.${textStyle}`, {});
+  let truncateStyle = {};
   if (noOfLines != null) {
@@ -400,57 +293,55 @@ truncateStyle = {
   }
-  var finalStyles = css$1(Object.assign({}, __css, baseStyle, {
-    apply: apply
+  const finalStyles = css(Object.assign({}, __css, baseStyle, {
+    apply
   }, _layerStyle, _textStyle, truncateStyle, otherStyles, sx))(theme);
-  var cssObject = Object.assign(finalStyles, isFunction(cssProp) ? cssProp(theme) : cssProp);
+  const cssObject = Object.assign(finalStyles, isFunction(cssProp) ? cssProp(theme) : cssProp);
   return cssObject;
-};
-domElements.forEach(function (tag) {
-  chakra[tag] = chakra(tag, {});
+}, "resolveStyles");
+domElements.forEach((tag) => {
+  _chakra[tag] = _chakra(tag);
 });
-domElements.forEach(function (tag) {
-  _chakra[tag] = _chakra(tag, {});
+
+// src/providers.ts
+import { createContext } from "@chakra-ui/vue-utils";
+import "@chakra-ui/utils";
+import "@chakra-ui/styled-system";
+import "vue";
+var [StylesProvider, useStyles] = createContext({
+  name: "StylesContext",
+  errorMessage: "useStyles: `styles` is undefined. Seems you forgot to provide `StylesProvider(...)` "
 });
+var createStylesContext = /* @__PURE__ */ __name((componentName) => createContext({
+  name: `${componentName}StylesContext`,
+  errorMessage: `useStyles: "styles" is undefined. Seems you forgot to wrap the components in "<${componentName} />" `
+}), "createStylesContext");
 
-var _createContext = createContext({
-    name: "StylesContext",
-    errorMessage: "useStyles: `styles` is undefined. Seems you forgot to provide `StylesProvider(...)` "
-  }),
-  StylesProvider = _createContext[0],
-  useStyles = _createContext[1];
-var createStylesContext = function createStylesContext(componentName) {
-  return createContext({
-    name: componentName + "StylesContext",
-    errorMessage: "useStyles: \"styles\" is undefined. Seems you forgot to wrap the components in \"<" + componentName + " />\" "
-  });
-};
-
-var _excluded = ["styleConfig"];
-function useStyleConfig(themeKey, themingProps, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return computed(function () {
-    var _styleConfig$defaultP, _styleConfig$baseStyl, _styleConfig$variants, _styleConfig$variants2, _styleConfig$sizes$me, _styleConfig$sizes;
-    var _ref = themingProps.value || themingProps,
-      styleConfigProp = _ref.styleConfig,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-    var _useChakra = useChakra(),
-      theme = _useChakra.theme,
-      colorMode = _useChakra.colorMode;
-    var themeStyleConfig = get(theme, "components." + themeKey);
-    var styleConfig = styleConfigProp || themeStyleConfig;
-    var mergedProps = mergeWith({
-      theme: theme,
+// src/composables/use-style-config.ts
+import { computed as computed3 } from "vue";
+import "@chakra-ui/styled-system";
+import { filterUndefined, get as get2, mergeWith, runIfFn } from "@chakra-ui/utils";
+function useStyleConfig(themeKey, themingProps, options = {}) {
+  return computed3(() => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const {
+      styleConfig: styleConfigProp,
+      ...rest
+    } = themingProps.value || themingProps;
+    const {
+      theme,
+      colorMode
+    } = useChakra();
+    const themeStyleConfig = get2(theme, `components.${themeKey}`);
+    const styleConfig = styleConfigProp || themeStyleConfig;
+    const mergedProps = mergeWith({
+      theme,
       colorMode: colorMode.value
-    }, (_styleConfig$defaultP = styleConfig == null ? void 0 : styleConfig.defaultProps) != null ? _styleConfig$defaultP : {}, filterUndefined(rest));
-    var baseStyles = runIfFn((_styleConfig$baseStyl = styleConfig == null ? void 0 : styleConfig.baseStyle) != null ? _styleConfig$baseStyl : {}, mergedProps);
-    var variants = runIfFn((_styleConfig$variants = styleConfig == null ? void 0 : (_styleConfig$variants2 = styleConfig.variants) == null ? void 0 : _styleConfig$variants2[mergedProps.variant]) != null ? _styleConfig$variants : {}, mergedProps);
-    var sizes = runIfFn((_styleConfig$sizes$me = styleConfig == null ? void 0 : (_styleConfig$sizes = styleConfig.sizes) == null ? void 0 : _styleConfig$sizes[mergedProps.size]) != null ? _styleConfig$sizes$me : {}, mergedProps);
-    var styles = mergeWith({}, baseStyles, sizes, variants);
-    if (options.isMultiPart && styleConfig != null && styleConfig.parts) {
-      var _styleConfig$parts;
-      styleConfig == null ? void 0 : (_styleConfig$parts = styleConfig.parts) == null ? void 0 : _styleConfig$parts.forEach(function (part) {
-        var _styles$part;
-        //@ts-ignore
-        styles[part] = (_styles$part = styles[part]) != null ? _styles$part : {};
+    }, (_a = styleConfig == null ? void 0 : styleConfig.defaultProps) != null ? _a : {}, filterUndefined(rest));
+    const baseStyles = runIfFn((_b = styleConfig == null ? void 0 : styleConfig.baseStyle) != null ? _b : {}, mergedProps);
+    const variants = runIfFn((_d = (_c = styleConfig == null ? void 0 : styleConfig.variants) == null ? void 0 : _c[mergedProps.variant]) != null ? _d : {}, mergedProps);
+    const sizes = runIfFn((_f = (_e = styleConfig == null ? void 0 : styleConfig.sizes) == null ? void 0 : _e[mergedProps.size]) != null ? _f : {}, mergedProps);
+    const styles = mergeWith({}, baseStyles, sizes, variants);
+    if (options.isMultiPart && (styleConfig == null ? void 0 : styleConfig.parts)) {
+      (_g = styleConfig == null ? void 0 : styleConfig.parts) == null ? void 0 : _g.forEach((part) => {
+        var _a2;
+        styles[part] = (_a2 = styles[part]) != null ? _a2 : {};
       });
@@ -461,2 +352,3 @@ }
 }
+__name(useStyleConfig, "useStyleConfig");
 function useMultiStyleConfig(themeKey, themingProps) {
@@ -467,3 +359,23 @@ return useStyleConfig(themeKey, themingProps, {
 }
+__name(useMultiStyleConfig, "useMultiStyleConfig");
 
-export { StylesProvider, _chakra, chakra, createStylesContext, domElements, resolveStyles, styled, toCSSObject, useChakra, useMultiStyleConfig, useStyleConfig, useStyles, useTheme };
+// src/index.tsx
+export * from "@chakra-ui/styled-system";
+export {
+  StylesProvider,
+  ___chakra___,
+  _chakra,
+  chakra,
+  createStylesContext,
+  domElements,
+  injectGlobal,
+  keyframes,
+  resolveStyles,
+  styled,
+  toCSSObject,
+  useChakra,
+  useMultiStyleConfig,
+  useStyleConfig,
+  useStyles,
+  useTheme
+};

package.json

 {
   "name": "@chakra-ui/vue-system",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "main": "dist/chakra-ui-vue-system.cjs.js",
@@ -20,8 +20,8 @@ "module": "dist/chakra-ui-vue-system.esm.js",
   "dependencies": {
-    "@chakra-ui/c-color-mode": "2.0.0-beta.1",
+    "@chakra-ui/c-color-mode": "2.0.0-beta.2",
     "@chakra-ui/styled-system": "2.5.1",
     "@chakra-ui/utils": "2.0.14",
-    "@chakra-ui/vue-styled": "1.0.0-beta.1",
-    "@chakra-ui/vue-utils": "2.0.0-beta.1",
+    "@chakra-ui/vue-utils": "2.0.0-beta.2",
     "@emotion/css": "^11.9.0",
+    "@emotion/serialize": "1.1.1",
     "lodash.camelcase": "^4.3.0",
@@ -32,2 +32,3 @@ "lodash.kebabcase": "^4.1.1",
   "devDependencies": {
+    "@chakra-ui/theme": "^2.2.5",
     "@types/lodash.memoize": "^4.1.6",
@@ -43,4 +44,9 @@ "vue": "^3.2.37"
   "scripts": {
-    "clean": "rimraf dist"
+    "clean": "rimraf dist .turbo",
+    "build": "tsup && pnpm build:types",
+    "build:fast": "tsup",
+    "types:check": "tsc --noEmit",
+    "dev": "tsup --watch",
+    "build:types": "tsup src --dts-only"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

56773

decreased by-36.14%

Dev dependency count

3

increased by50%

Number of package files

13

decreased by-45.83%

Lines of code

1451

decreased by-23.51%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@emotion/serialize@1.1.1

• + Added@chakra-ui/c-color-mode@2.0.0-beta.2(transitive)

• + Added@chakra-ui/vue-utils@2.0.0-beta.2(transitive)

• + Added@emotion/memoize@0.8.1(transitive)

• + Added@emotion/serialize@1.1.1(transitive)

• + Added@emotion/unitless@0.8.1(transitive)

• - Removed@chakra-ui/vue-styled@1.0.0-beta.1

• - Removed@chakra-ui/c-color-mode@2.0.0-beta.1(transitive)

• - Removed@chakra-ui/vue-styled@1.0.0-beta.1(transitive)

• - Removed@chakra-ui/vue-utils@2.0.0-beta.1(transitive)

• - Removed@emotion/weak-memoize@0.2.5(transitive)

• - Removedclsx@1.2.1(transitive)

• Updated@chakra-ui/c-color-mode@2.0.0-beta.2

• Updated@chakra-ui/vue-utils@2.0.0-beta.2