feat: added component style in theme

Author: hirotomoyamada

.changeset/curvy-rocks-tickle.md

@@ -0,0 +1,12 @@
+---
+'@yamada-ui/native-select': minor
+'@yamada-ui/autocomplete': minor
+'@yamada-ui/native-table': minor
+'@yamada-ui/file-input': minor
+'@yamada-ui/calendar': minor
+'@yamada-ui/select': minor
+'@yamada-ui/slider': minor
+'@yamada-ui/table': minor
+---
+
+Added component style in theme.

packages/components/autocomplete/src/autocomplete.tsx

@@ -57,7 +57,7 @@ export type AutocompleteProps = ThemeProps<'Select'> &
 
 export const Autocomplete = forwardRef<AutocompleteProps, 'input'>(
   (props, ref) => {
-    const [styles, mergedProps] = useMultiComponentStyle('Select', props)
+    const [styles, mergedProps] = useMultiComponentStyle('Autocomplete', props)
     let {
       className,
       defaultValue = '',

packages/components/autocomplete/src/multi-autocomplete.tsx

@@ -97,7 +97,10 @@ export type MultiAutocompleteProps = ThemeProps<'Select'> &
 
 export const MultiAutocomplete = forwardRef<MultiAutocompleteProps, 'div'>(
   (props, ref) => {
-    const [styles, mergedProps] = useMultiComponentStyle('Select', props)
+    const [styles, mergedProps] = useMultiComponentStyle(
+      'MultiAutocomplete',
+      props,
+    )
     let {
       className,
       defaultValue = [],

packages/components/calendar/src/month-picker.tsx

@@ -55,7 +55,7 @@ export type MonthPickerProps = Omit<
   UseMonthPickerProps
 
 export const MonthPicker = forwardRef<MonthPickerProps, 'div'>((props, ref) => {
-  const [styles, mergedProps] = useMultiComponentStyle('DatePicker', props)
+  const [styles, mergedProps] = useMultiComponentStyle('MonthPicker', props)
   let {
     className,
     isClearable = true,

packages/components/file-input/src/file-input.tsx

@@ -91,7 +91,7 @@ const defaultFormat: (value: File, index: number) => string = ({ name }) => name
 
 export const FileInput = forwardRef<FileInputProps, 'input'>(
   ({ children, ...props }, ref) => {
-    const [styles, mergedProps] = useMultiComponentStyle('Input', props)
+    const [styles, mergedProps] = useMultiComponentStyle('FileInput', props)
     const {
       className,
       id,

packages/components/native-select/src/native-select.tsx

@@ -91,7 +91,7 @@ export type NativeSelectProps = Omit<HTMLUIProps<'select'>, 'size'> &
 
 export const NativeSelect = forwardRef<NativeSelectProps, 'select'>(
   (props, ref) => {
-    const [styles, mergedProps] = useMultiComponentStyle('Select', props)
+    const [styles, mergedProps] = useMultiComponentStyle('NativeSelect', props)
     let {
       className,
       children,
@@ -102,7 +102,6 @@ export const NativeSelect = forwardRef<NativeSelectProps, 'select'>(
       minH,
       minHeight,
       options = [],
-      value,
       placeholder,
       containerProps,
       iconProps,
@@ -112,7 +111,7 @@ export const NativeSelect = forwardRef<NativeSelectProps, 'select'>(
     rest = useFormControlProps(rest)
 
     const formControlProps = pickObject(rest, formControlProperties)
-    const [layoutProps, selectPorps] = splitObject(rest, layoutStylesProperties)
+    const [layoutProps, selectProps] = splitObject(rest, layoutStylesProperties)
 
     let computedChildren: ReactElement[] = []
 
@@ -158,14 +157,13 @@ export const NativeSelect = forwardRef<NativeSelectProps, 'select'>(
           <ui.select
             ref={ref}
             className={cx('ui-native-select-field', className)}
-            value={value}
             __css={{
               paddingEnd: '2rem',
               h: h ?? height,
               minH: minH ?? minHeight,
               ...styles.field,
             }}
-            {...selectPorps}
+            {...selectProps}
           >
             {placeholder ? (
               <NativeOption value='' hidden={!placeholderInOptions}>

packages/components/native-table/src/native-table.tsx

@@ -48,7 +48,7 @@ export type NativeTableProps = HTMLUIProps<'table'> &
 
 export const NativeTable = forwardRef<NativeTableProps, 'table'>(
   (props, ref) => {
-    const [styles, mergedProps] = useMultiComponentStyle('Table', props)
+    const [styles, mergedProps] = useMultiComponentStyle('NativeTable', props)
     const { className, layout, ...rest } = omitThemeProps(mergedProps)
 
     const css: CSSUIObject = { tableLayout: layout, ...styles.table }
@@ -59,7 +59,11 @@ export const NativeTable = forwardRef<NativeTableProps, 'table'>(
           ref={ref}
           className={cx('ui-native-table', className)}
           __css={css}
-          {...omitObject(rest, ['withColumnBorders', 'highlightOnHover'])}
+          {...omitObject(rest, [
+            'withBorder',
+            'withColumnBorders',
+            'highlightOnHover',
+          ])}
         />
       </TableStyleProvider>
     )

packages/components/select/src/multi-select.tsx

@@ -85,7 +85,7 @@ export type MultiSelectProps = ThemeProps<'Select'> &
   MultiSelectOptions
 
 export const MultiSelect = forwardRef<MultiSelectProps, 'div'>((props, ref) => {
-  const [styles, mergedProps] = useMultiComponentStyle('Select', props)
+  const [styles, mergedProps] = useMultiComponentStyle('MultiSelect', props)
   let {
     className,
     defaultValue = [],

packages/components/select/src/select.tsx

@@ -139,7 +139,7 @@ export const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     w: '100%',
     h: 'fit-content',
     color,
-    ...styles.containerProps,
+    ...styles.container,
   }
 
   return (

packages/components/slider/src/range-slider.tsx

@@ -689,7 +689,7 @@ export type RangeSliderProps = Omit<
   RangeSliderOptions
 
 export const RangeSlider = forwardRef<RangeSliderProps, 'div'>((props, ref) => {
-  const [styles, mergedProps] = useMultiComponentStyle('Slider', props)
+  const [styles, mergedProps] = useMultiComponentStyle('RangeSlider', props)
   const {
     className,
     children,

packages/components/table/src/paging-table.tsx

@@ -136,11 +136,14 @@ export const PagingTable = forwardRef(
     { colorScheme, highlightOnSelected = true, ...props }: PagingTableProps<Y>,
     ref: ForwardedRef<HTMLTableElement>,
   ) => {
-    const [styles, { size, ...mergedProps }] = useMultiComponentStyle('Table', {
-      colorScheme,
-      highlightOnSelected,
-      ...props,
-    })
+    const [styles, { size, ...mergedProps }] = useMultiComponentStyle(
+      'PagingTable',
+      {
+        colorScheme,
+        highlightOnSelected,
+        ...props,
+      },
+    )
     const {
       className,
       containerProps,
@@ -175,6 +178,7 @@ export const PagingTable = forwardRef(
       ...omitObject(computedProps, [
         'highlightOnSelected',
         'highlightOnHover',
+        'withBorder',
         'withColumnBorders',
       ]),
       checkboxProps: { colorScheme, ...checkboxProps },

packages/components/table/src/table.tsx

@@ -118,6 +118,7 @@ export const Table = forwardRef(
       ...omitObject(computedProps, [
         'highlightOnSelected',
         'highlightOnHover',
+        'withBorder',
         'withColumnBorders',
       ]),
       checkboxProps: { colorScheme, ...checkboxProps },