fix(core): improve component style responsiveness

Author: hirotomoyamada

.changeset/new-yaks-roll.md

@@ -0,0 +1,7 @@
+---
+'@yamada-ui/core': patch
+---
+
+Adjusted minW calculation.
+Fixed types of componentVariants and componentSizes.
+Fixed did't support variant and size responsiveness and color mode.

packages/core/src/components/use-component-style.tsx

@@ -5,6 +5,9 @@ import {
   filterUndefined,
   omitObject,
   Dict,
+  isArray,
+  isObject,
+  keysFormObject,
 } from '@yamada-ui/utils'
 import { useRef } from 'react'
 import isEqual from 'react-fast-compare'
@@ -15,31 +18,143 @@ import {
   UIStyleProps,
   useTheme,
   useColorMode,
+  ResponsiveObject,
+  ColorModeArray,
+  ComponentSizes,
+  ComponentVariants,
+  ComponentMultiVariants,
+  ComponentMultiSizes,
+  pseudos,
 } from '..'
 
 type Styles<isMulti extends boolean = false> = isMulti extends false
   ? CSSUIObject
   : Record<string, CSSUIObject>
 
-const getStyles = <IsMulti extends boolean = false>(
-  valOrFunc: UIStyle | Record<string, UIStyle>,
-  props: UIStyleProps,
-  isMulti?: boolean,
-): Styles<IsMulti> => {
-  let styles = runIfFunc(valOrFunc, props)
+const getModifierStyles =
+  <IsMulti extends boolean = false>(
+    value: ResponsiveObject<string> | ColorModeArray<string> | string,
+    singleOrMultiStyles:
+      | ComponentVariants
+      | ComponentSizes
+      | ComponentMultiVariants
+      | ComponentMultiSizes,
+    props: UIStyleProps,
+  ) =>
+  ({ isMulti }: { isMulti: boolean }): Styles<IsMulti> => {
+    let styles: Styles<IsMulti> = {}
+
+    if (isArray(value)) {
+      const [lightValue, darkValue] = value
+
+      const lightStyles = getStyles<IsMulti>(
+        singleOrMultiStyles[lightValue],
+        props,
+      )({ isMulti, query: pseudos._light })
+
+      const darkStyles = getStyles<IsMulti>(
+        singleOrMultiStyles[darkValue],
+        props,
+      )({ isMulti, query: pseudos._dark })
+
+      styles = merge(lightStyles, darkStyles)
+    } else if (isObject(value)) {
+      if (keysFormObject(value).length === 1 && 'base' in value) {
+        styles = getStyles<IsMulti>(
+          singleOrMultiStyles[value.base],
+          props,
+        )({ isMulti })
+      } else {
+        const { queries = [] } = props.theme.__breakpoints ?? {}
+
+        const omitQueries = queries.filter(
+          ({ breakpoint }) =>
+            breakpoint !== 'base' && keysFormObject(value).includes(breakpoint),
+        )
+
+        const minQuery = omitQueries.sort(
+          (a, b) => (a.minW ?? 0) - (b.minW ?? 0),
+        )[0]
+        const maxQuery = omitQueries.sort(
+          (a, b) => (b.minW ?? 0) - (a.minW ?? 0),
+        )[0]
+        const nextMaxQuery = queries
+          .filter(({ minW }) => (minW ?? 0) > (maxQuery?.minW ?? 0))
+          .sort((a, b) => (a.minW ?? 0) - (b.minW ?? 0))[0]
+
+        styles = Object.entries(value).reduce(
+          (styles, [breakpointKey, breakpointValue = '']) => {
+            if (breakpointKey === 'base') {
+              const query = nextMaxQuery.minWQuery
+
+              const baseStyles = getStyles<IsMulti>(
+                singleOrMultiStyles[breakpointValue],
+                props,
+              )({ isMulti, query })
+
+              styles = merge(styles, baseStyles)
+            } else {
+              const isMin = breakpointKey === minQuery.breakpoint
+
+              const query = queries?.find(
+                ({ breakpoint }) => breakpoint === breakpointKey,
+              )?.[isMin ? 'maxWQuery' : 'minMaxQuery']
+
+              const queryStyles = getStyles<IsMulti>(
+                singleOrMultiStyles[breakpointValue],
+                props,
+              )({ isMulti, query })
+
+              styles = merge(styles, queryStyles)
+            }
+
+            return styles
+          },
+          {} as Styles<IsMulti>,
+        )
+      }
+    } else {
+      styles = getStyles<IsMulti>(
+        singleOrMultiStyles[value],
+        props,
+      )({ isMulti })
+    }
 
-  if (isMulti) {
-    for (const [key, valOrFunc] of Object.entries<UIStyle>(
-      styles as Record<string, UIStyle>,
-    )) {
-      const value = runIfFunc(valOrFunc, props)
+    return styles as Styles<IsMulti>
+  }
 
-      styles = merge(styles, { [key]: value })
+const getStyles =
+  <IsMulti extends boolean = false>(
+    stylesOrFunc: UIStyle | Record<string, UIStyle>,
+    props: UIStyleProps,
+  ) =>
+  ({
+    isMulti,
+    query,
+  }: {
+    isMulti: boolean
+    query?: string
+  }): Styles<IsMulti> => {
+    let styles = runIfFunc(stylesOrFunc, props)
+
+    if (isMulti) {
+      for (const [key, styleOrFunc] of Object.entries<UIStyle>(
+        styles as Record<string, UIStyle>,
+      )) {
+        const style = runIfFunc(styleOrFunc, props)
+
+        if (query) {
+          styles = merge(styles, { [key]: { [query]: style } })
+        } else {
+          styles = merge(styles, { [key]: style })
+        }
+      }
+    } else if (query) {
+      return { [query]: styles } as Styles<IsMulti>
     }
-  }
 
-  return styles as Styles<IsMulti>
-}
+    return styles as Styles<IsMulti>
+  }
 
 const setStyles = <Props extends Dict = Dict, IsMulti extends boolean = false>(
   name: string,
@@ -62,29 +177,25 @@ const setStyles = <Props extends Dict = Dict, IsMulti extends boolean = false>(
   if (componentStyle) {
     const args = omitObject(props, ['children'])
 
-    let styles = getStyles<IsMulti>(
-      componentStyle.baseStyle ?? {},
+    let styles = getStyles<IsMulti>(componentStyle.baseStyle ?? {}, {
+      theme,
+      colorMode,
+      ...args,
+    })({ isMulti })
+
+    const variantStyles = getModifierStyles<IsMulti>(
+      props.variant,
+      componentStyle.variants ?? {},
       { theme, colorMode, ...args },
-      isMulti,
-    )
-
-    const variant = getStyles<IsMulti>(
-      componentStyle.variants?.[props.variant] ?? {},
-      {
-        theme,
-        colorMode,
-        ...args,
-      },
-      isMulti,
-    )
-    const size = getStyles<IsMulti>(
-      componentStyle.sizes?.[props.size] ?? {},
+    )({ isMulti })
+    const sizeStyles = getModifierStyles<IsMulti>(
+      props.size,
+      componentStyle.sizes ?? {},
       { theme, colorMode, ...args },
-      isMulti,
-    )
+    )({ isMulti })
 
-    styles = merge(styles, size)
-    styles = merge(styles, variant)
+    styles = merge(styles, sizeStyles)
+    styles = merge(styles, variantStyles)
 
     const isStylesEqual = isEqual(stylesRef.current, styles)
 

packages/core/src/css/breakpoint.ts

@@ -32,6 +32,8 @@ const createQueries = (breakpoints: Dict): BreakpointQueries => {
 
     maxW = breakpoint !== 'base' ? maxW : undefined
 
+    if (minW) minW += 1
+
     return {
       breakpoint,
       minW,

packages/core/src/theme.types.ts

@@ -362,11 +362,8 @@ export type UsageTheme = {
 }
 
 export type ComponentBaseStyle = UIStyle | Record<string, UIStyle>
-export type ComponentVariants = Record<
-  string,
-  UIStyle | Record<string, UIStyle>
->
-export type ComponentSizes = Record<string, UIStyle | Record<string, UIStyle>>
+export type ComponentVariants = Record<string, UIStyle>
+export type ComponentSizes = Record<string, UIStyle>
 export type ComponentDefaultProps<
   Y extends Dict = Dict,
   M extends keyof Theme['components'] | unknown = unknown,