@yamada-ui/core - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

dist/generated-theme.types.d.ts

 import { UITheme } from './ui-theme.types.js';
 
 interface GeneratedTheme extends UITheme {
+    animations: string & {};
     borders: string & {};
@@ -5,0 +6,0 @@ breakpoints: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | (string & {});

dist/index.js

@@ -192,5 +192,5 @@ "use strict";
 var tokenToCSSVar = (token, value) => (theme) => {
-  token = `${token}.${value}`;
-  if ((0, import_utils2.isObject)(theme.__cssMap) && token in theme.__cssMap) {
-    return theme.__cssMap[token].ref;
+  const resolvedToken = `${token}.${value}`;
+  if ((0, import_utils2.isObject)(theme.__cssMap) && resolvedToken in theme.__cssMap) {
+    return theme.__cssMap[resolvedToken].ref;
   } else {
@@ -242,7 +242,7 @@ return value;
   compose,
-  transform: transform2
+  transform: transform4
 }) => (value, theme) => {
   var _a2;
   value = tokenToCSSVar(token, value)(theme);
-  let result = (_a2 = transform2 == null ? void 0 : transform2(value, theme)) != null ? _a2 : value;
+  let result = (_a2 = transform4 == null ? void 0 : transform4(value, theme)) != null ? _a2 : value;
   if (compose)
@@ -252,8 +252,8 @@ result = compose(result, theme);
 };
-var createConfig = (token, transform2) => (property) => ({
+var createConfig = (token, transform4) => (properties) => ({
   token,
-  property,
+  properties,
   transform: createTransform({
     token,
-    transform: transform2
+    transform: transform4
   })
@@ -310,13 +310,13 @@ });
   sizeTransform: createConfig("sizes", transforms.fraction),
-  prop: (property, token, transform2) => token ? {
-    property,
+  prop: (properties, token, transform4) => token ? {
+    properties,
     token,
-    transform: createTransform({ token, transform: transform2 })
+    transform: createTransform({ token, transform: transform4 })
   } : {
-    property,
+    properties,
     token
   },
-  propTransform: (property, transform2) => ({
-    property,
-    transform: transform2
+  propTransform: (properties, transform4) => ({
+    properties,
+    transform: transform4
   }),
@@ -796,24 +796,24 @@ gradient: createConfig("gradients", transforms.gradient)
 var import_utils5 = require("@yamada-ui/utils");
-var getPriority = (theme, token, css2 = {}) => {
-  const result = {};
-  const obj = (0, import_utils5.getMemoizedObject)(theme, `styles.${token}`, {});
-  for (const prop in obj) {
+var transform = (value, theme, css2 = {}) => {
+  const resolvedCSS = {};
+  const style = (0, import_utils5.getMemoizedObject)(theme, `styles.${value}`, {});
+  for (const prop in style) {
     const done = prop in css2 && css2[prop] != null;
     if (!done)
-      result[prop] = obj[prop];
+      resolvedCSS[prop] = style[prop];
   }
-  return result;
+  return resolvedCSS;
 };
 var others = {
   layerStyle: {
-    processResult: true,
-    transform: (value, theme, css2) => getPriority(theme, `layerStyles.${value}`, css2)
+    isProcessResult: true,
+    transform: (value, ...rest) => transform(`layerStyles.${value}`, ...rest)
   },
   textStyle: {
-    processResult: true,
-    transform: (value, theme, css2) => getPriority(theme, `textStyles.${value}`, css2)
+    isProcessResult: true,
+    transform: (value, ...rest) => transform(`textStyles.${value}`, ...rest)
   },
   apply: {
-    processResult: true,
-    transform: (value, theme, css2) => getPriority(theme, value, css2)
+    isProcessResult: true,
+    transform
   }
@@ -923,3 +923,3 @@ };
 // src/styles/transform.ts
-var transform = {
+var transform2 = {
   clipPath: true,
@@ -931,2 +931,21 @@ transform: true,
 // src/styles/transition.ts
+var import_utils6 = require("@yamada-ui/utils");
+var transform3 = (value, theme) => {
+  if (value == null || globalValues.has(value))
+    return value;
+  if (value.includes(",")) {
+    const values = value.split(",");
+    return values.map((value2) => {
+      value2 = value2.trim();
+      const style = (0, import_utils6.getMemoizedObject)(
+        theme,
+        `animations.${value2}`
+      );
+      return style != null ? style : value2;
+    });
+  } else {
+    const style = (0, import_utils6.getMemoizedObject)(theme, `animations.${value}`);
+    return style != null ? style : value;
+  }
+};
 var transition = {
@@ -947,3 +966,3 @@ transitionDelay: true,
   ),
-  animation: true,
+  animation: { isAnimation: true, transform: transform3 },
   animationName: true,
@@ -992,3 +1011,3 @@ animationDuration: configs.prop("animationDuration", "transitions.duration"),
     },
-    property: "--ui-line-clamp"
+    properties: "--ui-line-clamp"
   },
@@ -1015,3 +1034,3 @@ isTruncated: {
   ...space,
-  ...transform,
+  ...transform2,
   ...transition,
@@ -1036,7 +1055,7 @@ ...filter,
 var import_styled = __toESM(require("@emotion/styled"));
-var import_utils11 = require("@yamada-ui/utils");
+var import_utils13 = require("@yamada-ui/utils");
 var import_react6 = require("react");
 
 // src/css/breakpoint.ts
-var import_utils6 = require("@yamada-ui/utils");
+var import_utils8 = require("@yamada-ui/utils");
 var createQuery = (min, max) => {
@@ -1066,3 +1085,3 @@ const query = ["@media screen"];
 var transformBreakpoints = (breakpoints) => {
-  const isBrowser = (0, import_utils6.createdDom)();
+  const isBrowser = (0, import_utils8.createdDom)();
   const fontSize = isBrowser ? parseFloat(window.getComputedStyle(document.documentElement).fontSize) : 16;
@@ -1087,3 +1106,3 @@ return Object.fromEntries(
   breakpoints = transformBreakpoints(breakpoints);
-  const keys = (0, import_utils6.keysFormObject)(breakpoints);
+  const keys = (0, import_utils8.keysFormObject)(breakpoints);
   const queries2 = createQueries(breakpoints);
@@ -1101,5 +1120,5 @@ return {
 // src/css/var.ts
-var import_utils7 = require("@yamada-ui/utils");
+var import_utils9 = require("@yamada-ui/utils");
 var createVar = (token, prefix) => {
-  const variable = `--${[prefix, (0, import_utils7.escape)(token, "-")].filter(Boolean).join("-")}`;
+  const variable = `--${[prefix, (0, import_utils9.escape)(token, "-")].filter(Boolean).join("-")}`;
   const reference = `var(${variable})`;
@@ -1117,3 +1136,3 @@ return { variable, reference };
     const { variable, reference } = tokenToVar(token, prefix);
-    let [lightValue, darkValue] = (0, import_utils7.isArray)(value) ? [...value] : [value];
+    let [lightValue, darkValue] = (0, import_utils9.isArray)(value) ? [...value] : [value];
     if (token.startsWith("gradients")) {
@@ -1132,4 +1151,4 @@ lightValue = createGradient(lightValue, {
         const negativeToken = `${firstKey}.-${restKeys.join(".")}`;
-        const negativeValue = import_utils7.calc.negate(lightValue);
-        const negativeReference = import_utils7.calc.negate(reference);
+        const negativeValue = import_utils9.calc.negate(lightValue);
+        const negativeReference = import_utils9.calc.negate(reference);
         cssMap[negativeToken] = {
@@ -1143,3 +1162,3 @@ value: negativeValue,
       if (darkValue)
-        cssVars = (0, import_utils7.merge)(cssVars, { [pseudos._dark]: { [variable]: darkValue } });
+        cssVars = (0, import_utils9.merge)(cssVars, { [pseudos._dark]: { [variable]: darkValue } });
       cssMap[token] = {
@@ -1162,6 +1181,6 @@ value: lightValue,
     const [parentVar, parentRef] = fetchParent(lightValue);
-    cssVars = (0, import_utils7.merge)(cssVars, { [variable]: parentRef });
+    cssVars = (0, import_utils9.merge)(cssVars, { [variable]: parentRef });
     if (darkValue) {
       const [, parentRef2] = fetchParent(darkValue);
-      cssVars = (0, import_utils7.merge)(cssVars, { [pseudos._dark]: { [variable]: parentRef2 } });
+      cssVars = (0, import_utils9.merge)(cssVars, { [pseudos._dark]: { [variable]: parentRef2 } });
     }
@@ -1178,3 +1197,16 @@ cssMap[token] = {
 // src/css/css.ts
-var import_utils8 = require("@yamada-ui/utils");
+var import_utils10 = require("@yamada-ui/utils");
+var expandAnimation = ({
+  keyframes: keyframes2,
+  duration = "0s",
+  timingFunction = "ease",
+  delay = "0s",
+  iterationCount = "1",
+  direction = "normal",
+  fillMode = "none",
+  playState = "running"
+}) => {
+  const name = keyframes(keyframes2);
+  return `${name} ${duration} ${timingFunction} ${delay} ${iterationCount} ${direction} ${fillMode} ${playState}`;
+};
 var expandColorMode = (key, value) => ({
@@ -1205,11 +1237,11 @@ [key]: value[0],
   for (let [key, value] of Object.entries(css2)) {
-    value = (0, import_utils8.runIfFunc)(value, theme);
+    value = (0, import_utils10.runIfFunc)(value, theme);
     if (value == null)
       continue;
-    if ((0, import_utils8.isArray)(value)) {
-      computedCSS = (0, import_utils8.merge)(computedCSS, expandColorMode(key, value));
+    if ((0, import_utils10.isArray)(value)) {
+      computedCSS = (0, import_utils10.merge)(computedCSS, expandColorMode(key, value));
       continue;
     }
-    if ((0, import_utils8.isObject)(value) && isResponsive(value)) {
-      computedCSS = (0, import_utils8.merge)(computedCSS, expandResponsive(key, value, queries2));
+    if ((0, import_utils10.isObject)(value) && isResponsive(value)) {
+      computedCSS = (0, import_utils10.merge)(computedCSS, expandResponsive(key, value, queries2));
       continue;
@@ -1223,9 +1255,9 @@ }
   const { theme, styles: styles2 = {}, pseudos: pseudos2 = {} } = options;
-  const createCSS = (cssOrFunc, nested = false) => {
+  const createCSS = (cssOrFunc, isNested = false) => {
     var _a2, _b, _c;
-    const _css = (0, import_utils8.runIfFunc)(cssOrFunc, theme);
-    const css2 = expandCSS(_css)(theme);
-    let computedCSS = {};
-    for (let [key, value] of Object.entries(css2)) {
-      value = (0, import_utils8.runIfFunc)(value, theme);
+    const css2 = (0, import_utils10.runIfFunc)(cssOrFunc, theme);
+    const computedCSS = expandCSS(css2)(theme);
+    let resolvedCSS = {};
+    for (let [key, value] of Object.entries(computedCSS)) {
+      value = (0, import_utils10.runIfFunc)(value, theme);
       if (value == null)
@@ -1237,36 +1269,48 @@ continue;
       if (style === true)
-        style = { property: key };
-      if ((0, import_utils8.isObject)(value)) {
-        computedCSS[key] = (_a2 = computedCSS[key]) != null ? _a2 : {};
-        computedCSS[key] = (0, import_utils8.merge)(computedCSS[key], createCSS(value, true));
+        style = { properties: key };
+      if ((0, import_utils10.isObject)(value)) {
+        resolvedCSS[key] = (_a2 = resolvedCSS[key]) != null ? _a2 : {};
+        resolvedCSS[key] = (0, import_utils10.merge)(resolvedCSS[key], createCSS(value, true));
         continue;
       }
       value = (_c = (_b = style == null ? void 0 : style.transform) == null ? void 0 : _b.call(style, value, theme)) != null ? _c : value;
-      value = (style == null ? void 0 : style.processResult) ? createCSS(value, true) : value;
-      if (!nested && (style == null ? void 0 : style.static)) {
-        const staticStyles = (0, import_utils8.runIfFunc)(style.static, theme);
-        computedCSS = (0, import_utils8.merge)(computedCSS, staticStyles);
+      if (style == null ? void 0 : style.isAnimation) {
+        if ((0, import_utils10.isObject)(value)) {
+          value = expandAnimation(createCSS(value, true));
+        }
+        if ((0, import_utils10.isArray)(value)) {
+          value = value.flat().map(
+            (nestedValue) => (0, import_utils10.isObject)(nestedValue) ? expandAnimation(createCSS(nestedValue, true)) : nestedValue
+          ).join(", ");
+        }
       }
-      const property = (0, import_utils8.runIfFunc)(style == null ? void 0 : style.property, theme);
-      if (property) {
-        if ((0, import_utils8.isArray)(property)) {
-          for (const _property of property) {
-            computedCSS[_property] = value;
+      if (style == null ? void 0 : style.isProcessResult) {
+        value = createCSS(value, true);
+      }
+      if (!isNested && (style == null ? void 0 : style.static)) {
+        const staticStyles = (0, import_utils10.runIfFunc)(style.static, theme);
+        resolvedCSS = (0, import_utils10.merge)(resolvedCSS, staticStyles);
+      }
+      const properties = (0, import_utils10.runIfFunc)(style == null ? void 0 : style.properties, theme);
+      if (properties) {
+        if ((0, import_utils10.isArray)(properties)) {
+          for (const property of properties) {
+            resolvedCSS[property] = value;
           }
           continue;
-        } else if ((0, import_utils8.isObject)(value)) {
-          computedCSS = (0, import_utils8.merge)(computedCSS, value);
+        } else if ((0, import_utils10.isObject)(value)) {
+          resolvedCSS = (0, import_utils10.merge)(resolvedCSS, value);
           continue;
         } else {
-          computedCSS[property] = value;
+          resolvedCSS[properties] = value;
           continue;
         }
       }
-      if ((0, import_utils8.isObject)(value)) {
-        computedCSS = (0, import_utils8.merge)(computedCSS, value);
+      if ((0, import_utils10.isObject)(value)) {
+        resolvedCSS = (0, import_utils10.merge)(resolvedCSS, value);
         continue;
       }
-      computedCSS[key] = value;
+      resolvedCSS[key] = value;
     }
-    return computedCSS;
+    return resolvedCSS;
   };
@@ -1306,3 +1350,3 @@ return createCSS;
 var import_react3 = require("@emotion/react");
-var import_utils9 = require("@yamada-ui/utils");
+var import_utils11 = require("@yamada-ui/utils");
 var import_react4 = require("react");
@@ -1401,3 +1445,3 @@
   const theme = (0, import_react4.useMemo)(
-    () => (0, import_utils9.isUndefined)(themeScheme) ? initialTheme : initialTheme[themeScheme],
+    () => (0, import_utils11.isUndefined)(themeScheme) ? initialTheme : initialTheme[themeScheme],
     [initialTheme, themeScheme]
@@ -1451,4 +1495,4 @@ );
       styles: (theme) => {
-        let style = (0, import_utils9.getMemoizedObject)(theme, "styles.resetStyle", {});
-        const computedStyle = (0, import_utils9.runIfFunc)(style, { theme, colorMode });
+        let style = (0, import_utils11.getMemoizedObject)(theme, "styles.resetStyle", {});
+        const computedStyle = (0, import_utils11.runIfFunc)(style, { theme, colorMode });
         if (!computedStyle)
@@ -1467,4 +1511,4 @@ return void 0;
       styles: (theme) => {
-        let style = (0, import_utils9.getMemoizedObject)(theme, "styles.globalStyle", {});
-        const computedStyle = (0, import_utils9.runIfFunc)(style, { theme, colorMode });
+        let style = (0, import_utils11.getMemoizedObject)(theme, "styles.globalStyle", {});
+        const computedStyle = (0, import_utils11.runIfFunc)(style, { theme, colorMode });
         if (!computedStyle)
@@ -1510,3 +1554,3 @@ return void 0;
 // src/providers/color-mode-provider.tsx
-var import_utils10 = require("@yamada-ui/utils");
+var import_utils12 = require("@yamada-ui/utils");
 var import_react5 = require("react");
@@ -1718,3 +1762,3 @@
   }, [changeColorMode, resolvedColorMode]);
-  (0, import_utils10.useSafeLayoutEffect)(() => {
+  (0, import_utils12.useSafeLayoutEffect)(() => {
     setSystemColorMode(getSystemColorMode());
@@ -1734,4 +1778,4 @@ }, [initialColorMode, addListener, changeColorMode]);
       internalColorMode: colorMode,
-      changeColorMode: defaultColorMode ? import_utils10.noop : changeColorMode,
-      toggleColorMode: defaultColorMode ? import_utils10.noop : toggleColorMode,
+      changeColorMode: defaultColorMode ? import_utils12.noop : changeColorMode,
+      toggleColorMode: defaultColorMode ? import_utils12.noop : toggleColorMode,
       forced: defaultColorMode !== void 0
@@ -1766,9 +1810,9 @@ }),
   const { theme, css: customCSS, __css, sx, ...rest } = props;
-  const propsCSS = (0, import_utils11.filterObject)(
+  const propsCSS = (0, import_utils13.filterObject)(
     rest,
     (prop) => prop in styleProps
   );
-  const baseCSS = (0, import_utils11.runIfFunc)(baseStyle, props);
+  const baseCSS = (0, import_utils13.runIfFunc)(baseStyle, props);
   const computedCSS = css(
-    (0, import_utils11.assignAfter)({}, __css, baseCSS, (0, import_utils11.filterUndefined)(propsCSS), sx)
+    (0, import_utils13.assignAfter)({}, __css, baseCSS, (0, import_utils13.filterUndefined)(propsCSS), sx)
   )(theme);
@@ -1814,9 +1858,10 @@ return customCSS ? [computedCSS, customCSS] : computedCSS;
 // src/theme.ts
-var import_utils12 = require("@yamada-ui/utils");
+var import_utils14 = require("@yamada-ui/utils");
 var tokens = [
   "borders",
+  "breakpoints",
   "colors",
-  "fonts",
   "fontSizes",
   "fontWeights",
+  "fonts",
   "gradients",
@@ -1850,7 +1895,6 @@ "letterSpacings",
   var _a2, _b, _c;
-  const keys = tokens;
-  const defaultTokens = (0, import_utils12.pickObject)(theme, keys);
+  const defaultTokens = (0, import_utils14.pickObject)(theme, tokens);
   const semanticTokens = (_a2 = theme.semantics) != null ? _a2 : {};
   const defaultTokenEntries = Object.entries(
-    (_b = (0, import_utils12.flattenObject)(defaultTokens)) != null ? _b : {}
+    (_b = (0, import_utils14.flattenObject)(defaultTokens)) != null ? _b : {}
   ).map(([token, value]) => {
@@ -1861,3 +1905,3 @@ const enhancedToken = { isSemantic: false, value };
   const semanticTokenEntries = Object.entries(
-    (_c = (0, import_utils12.flattenObject)(semanticTokens)) != null ? _c : {}
+    (_c = (0, import_utils14.flattenObject)(semanticTokens)) != null ? _c : {}
   ).map(([token, value]) => {
@@ -1867,3 +1911,3 @@ const enhancedToken = { isSemantic: true, value };
   });
-  return (0, import_utils12.objectFromEntries)([
+  return (0, import_utils14.objectFromEntries)([
     ...defaultTokenEntries,
@@ -1873,4 +1917,4 @@ ...semanticTokenEntries
 };
-var omitTheme = (theme) => (0, import_utils12.omitObject)(theme, ["__cssMap", "__cssVar", "__breakpoints"]);
-var omitThemeProps = (props) => (0, import_utils12.omitObject)(props, ["size", "variant", "colorScheme"]);
+var omitTheme = (theme) => (0, import_utils14.omitObject)(theme, ["__cssMap", "__cssVar", "__breakpoints"]);
+var omitThemeProps = (props) => (0, import_utils14.omitObject)(props, ["size", "variant", "colorScheme"]);
 // Annotate the CommonJS export names for ESM import in node:
@@ -1877,0 +1921,0 @@ 0 && (module.exports = {

dist/ui-theme.types.d.ts

@@ -19,2 +19,3 @@ type UITheme = {
     zIndices: string;
+    animations: string;
     transitionProperty: string;
@@ -21,0 +22,0 @@ transitionDuration: string;

package.json

 {
   "name": "@yamada-ui/core",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Yamada UI core",
@@ -5,0 +5,0 @@ "keywords": [

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

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

Improved metrics

Total package byte prevSize

312500

increased by1.71%

Lines of code

6307

increased by1.71%

No dependency changes