@nutui/nutui-react 3.0.0-beta.2 → 3.0.0-beta.4

package/dist/es/packages/button/style/button.scss

@@ -1,7 +1,6 @@
 .nut-button {
   position: relative;
   display: flex;
-  display: inline-block;
   /* #ifdef rn harmony*/
   width: 80px;
   /* #endif */
@@ -21,9 +20,9 @@
   text-align: center;
   cursor: pointer;
   transition: $button-transition;
-  -webkit-appearance: none;
   user-select: none;
   touch-action: manipulation;
+  -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   color: $button-default-color;
   background: $button-default-background-color;
@@ -99,6 +98,23 @@
     padding: 0;
   }
 
+  &-round {
+    border-radius: $button-border-radius;
+
+    &-xlarge,
+    &-large {
+      border-radius: $button-large-border-radius;
+    }
+
+    &-small {
+      border-radius: $button-small-border-radius;
+    }
+
+    &-mini {
+      border-radius: $button-mini-border-radius;
+    }
+  }
+
   &-default {
     padding: $button-default-padding;
     border-style: solid;
@@ -136,6 +152,14 @@
     padding: $button-xlarge-padding;
     font-size: $button-xlarge-font-size;
     font-weight: $button-large-font-weight;
+    border-radius: $radius-base;
+
+    .nut-button-text {
+      margin-left: $button-xlarge-text-icon-margin;
+      &-right {
+        margin-right: $button-xlarge-text-icon-margin;
+      }
+    }
 
     .nut-icon {
       font-size: $button-xlarge-font-size;
@@ -153,6 +177,14 @@
     padding: $button-large-padding;
     font-size: $button-large-font-size;
     font-weight: $button-large-font-weight;
+    border-radius: $radius-base;
+
+    .nut-button-text {
+      margin-left: $button-xlarge-text-icon-margin;
+      &-right {
+        margin-right: $button-xlarge-text-icon-margin;
+      }
+    }
 
     .nut-icon {
       font-size: $button-large-font-size;
@@ -170,6 +202,7 @@
     height: $button-small-height;
     padding: $button-small-padding;
     font-size: $button-small-font-size;
+    border-radius: $radius-s;
 
     .nut-icon {
       font-size: $button-small-font-size;
@@ -186,6 +219,7 @@
     height: $button-mini-height;
     padding: $button-mini-padding;
     font-size: $button-mini-font-size;
+    border-radius: $radius-s;
 
     .nut-icon {
       font-size: $button-mini-font-size;
@@ -412,23 +446,6 @@
     opacity: 0.9;
   }
 
-  &-round {
-    border-radius: $button-border-radius;
-
-    &-xlarge,
-    &-large {
-      border-radius: $button-large-border-radius;
-    }
-
-    &-small {
-      border-radius: $button-small-border-radius;
-    }
-
-    &-mini {
-      border-radius: $button-mini-border-radius;
-    }
-  }
-
   &-square {
     border-radius: $button-square-border-radius;
   }

package/dist/es/packages/button/style/style.css

@@ -1,7 +1,6 @@
 .nut-button {
   position: relative;
   display: flex;
-  display: inline-block;
   /* #ifdef rn harmony*/
   width: 80px;
   /* #endif */
@@ -16,14 +15,14 @@
   margin: 0;
   padding: 0;
   height: var(--nutui-button-default-height, 32px);
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
   font-weight: var(--nutui-button-default-font-weight, var(--nutui-font-weight, 400));
   text-align: center;
   cursor: pointer;
   transition: opacity 0.2s;
-  -webkit-appearance: none;
   user-select: none;
   touch-action: manipulation;
+  -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a));
   background: var(--nutui-button-default-background-color, transparent);
@@ -72,9 +71,9 @@
   /* #endif */
 }
 .nut-button-wrap .nut-icon {
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
-  width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
-  height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
+  width: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
+  height: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
 }
 .nut-button-loading::before, .nut-button-disabled::before {
   display: none;
@@ -87,6 +86,18 @@
   width: var(--nutui-button-default-height, 32px);
   padding: 0;
 }
+.nut-button-round {
+  border-radius: var(--nutui-button-border-radius, 8px);
+}
+.nut-button-round-xlarge, .nut-button-round-large {
+  border-radius: var(--nutui-button-large-border-radius, 12px);
+}
+.nut-button-round-small {
+  border-radius: var(--nutui-button-small-border-radius, 8px);
+}
+.nut-button-round-mini {
+  border-radius: var(--nutui-button-mini-border-radius, 6px);
+}
 .nut-button-default {
   padding: var(--nutui-button-default-padding, 0px 12px);
   border-style: solid;
@@ -111,37 +122,52 @@
 .nut-button-xlarge {
   height: var(--nutui-button-xlarge-height, 48px);
   padding: var(--nutui-button-xlarge-padding, 0px 24px);
-  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
+  border-radius: var(--nutui-radius-base, 8px);
+}
+.nut-button-xlarge .nut-button-text {
+  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-xlarge .nut-button-text-right {
+  margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
 }
 .nut-button-xlarge .nut-icon {
-  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
-  width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
-  height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-button-xlarge-children {
-  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-button-large {
   height: var(--nutui-button-large-height, 40px);
   padding: var(--nutui-button-large-padding, 0px 16px);
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
+  border-radius: var(--nutui-radius-base, 8px);
+}
+.nut-button-large .nut-button-text {
+  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-large .nut-button-text-right {
+  margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
 }
 .nut-button-large .nut-icon {
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
-  width: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
-  height: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
+  width: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
+  height: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
 }
 .nut-button-large-children {
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-button-small {
   height: var(--nutui-button-small-height, 28px);
   padding: var(--nutui-button-small-padding, 0px 8px);
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  border-radius: var(--nutui-radius-s, 6px);
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
@@ -154,15 +180,16 @@
 .nut-button-mini {
   height: var(--nutui-button-mini-height, 24px);
   padding: var(--nutui-button-mini-padding, 0px 8px);
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  border-radius: var(--nutui-radius-s, 6px);
 }
 .nut-button-mini .nut-icon {
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
-  width: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
-  height: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  width: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  height: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
 }
 .nut-button-mini-children {
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
 }
 .nut-button-primary {
   color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
@@ -173,7 +200,7 @@
   color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-button-primary-solid {
-  background: var(--nutui-color-primary, #ff0f23);
+  background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
   color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
   border-color: transparent;
 }
@@ -333,18 +360,6 @@
   cursor: default;
   opacity: 0.9;
 }
-.nut-button-round {
-  border-radius: var(--nutui-button-border-radius, 8px);
-}
-.nut-button-round-xlarge, .nut-button-round-large {
-  border-radius: var(--nutui-button-large-border-radius, 12px);
-}
-.nut-button-round-small {
-  border-radius: var(--nutui-button-small-border-radius, 8px);
-}
-.nut-button-round-mini {
-  border-radius: var(--nutui-button-mini-border-radius, 6px);
-}
 .nut-button-square {
   border-radius: var(--nutui-button-square-border-radius, 0);
 }

package/dist/es/packages/calendar/style/style.css

@@ -583,7 +583,7 @@
   height: 44px;
   margin: 10px 18px;
   border-radius: 22px;
-  background: var(--nutui-color-primary, #ff0f23);
+  background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
   color: var(--nutui-color-primary-text, #ffffff);
   text-align: center;
   line-height: 44px;

package/dist/es/packages/calendarcard/calendarcard.d.ts

@@ -2,70 +2,18 @@ import React, { ReactNode } from 'react';
 import { BasicComponent } from "../../utils/typings";
 import type { CalendarCardDay, CalendarCardMonth, CalendarCardRef, CalendarCardValue } from './types';
 export interface CalendarCardProps extends BasicComponent {
-    /**
-    * 类型，单个日期 single，多个日期 multiple，日期范围 range，周选择 week
-    * @default single
-    */
-    type: 'single' | 'multiple' | 'range' | 'week'
-    /**
-    * 受控模式下的值，与 onChange 搭配使用
-    * @default -
-    */
-    value?: CalendarCardValue
-    /**
-    * 默认值，单个日期 Date 格式，多个日期/范围选择 Date[] 格式
-    * @default -
-    */
-    defaultValue?: CalendarCardValue
-    /**
-    * 设置周起始日，0 为周日，1 为周一
-    * @default 1
-    */
-    firstDayOfWeek?: number
-    /**
-    * 限制范围开始日期
-    * @default -
-    */
-    startDate?: Date
-    /**
-    * 限制范围结束日期
-    * @default -
-    */
-    endDate?: Date
-    /**
-    * 设置不可选日期
-    * @default -
-    */
-    disableDay?: (day: CalendarCardDay) => boolean
-    /**
-    * 日期信息
-    * @default -
-    */
-    renderDay?: (day: CalendarCardDay) => ReactNode
-    /**
-    * 日期顶部信息
-    * @default -
-    */
-    renderDayTop?: (day: CalendarCardDay) => ReactNode
-    /**
-    * 日期底部信息
-    * @default -
-    */
-    renderDayBottom?: (day: CalendarCardDay) => ReactNode
-    /**
-    * 点击后触发
-    * @default -
-    */
-    onDayClick?: (day: CalendarCardDay) => void
-    /**
-    * 切换月份时触发
-    * @default -
-    */
-    onPageChange: (data: CalendarCardMonth) => void
-    /**
-    * 选择值发生变化时触发
-    * @default -
-    */
-    onChange: (value: CalendarCardValue) => void
+    type: 'single' | 'multiple' | 'range' | 'week';
+    value?: CalendarCardValue;
+    defaultValue?: CalendarCardValue;
+    firstDayOfWeek?: number;
+    startDate?: Date;
+    endDate?: Date;
+    disableDay?: (day: CalendarCardDay) => boolean;
+    renderDay?: (day: CalendarCardDay) => ReactNode;
+    renderDayTop?: (day: CalendarCardDay) => ReactNode;
+    renderDayBottom?: (day: CalendarCardDay) => ReactNode;
+    onDayClick?: (day: CalendarCardDay) => void;
+    onPageChange: (data: CalendarCardMonth) => void;
+    onChange: (value: CalendarCardValue) => void;
 }
 export declare const CalendarCard: React.ForwardRefExoticComponent<Partial<CalendarCardProps> & React.RefAttributes<CalendarCardRef>>;

package/dist/es/packages/calendarcard/calendarcard.js

@@ -2,7 +2,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import classNames from "classnames";
 import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from "./icon";
 import { ComponentDefaults } from "../../utils/typings";
@@ -70,7 +70,7 @@ export var CalendarCard = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             onChange === null || onChange === void 0 ? void 0 : onChange(val);
         }
     };
-    var getDays = function(month) {
+    var getDays = useCallback(function(month) {
         var y = month.year;
         var m = month.month;
         var days = _to_consumable_array(getPrevMonthDays(y, m, firstDayOfWeek)).concat(_to_consumable_array(getCurrentMonthDays(y, m)));
@@ -87,13 +87,18 @@ export var CalendarCard = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             });
         }
         return days;
-    };
+    }, [
+        firstDayOfWeek
+    ]);
     useEffect(function() {
         var newDays = getDays(month);
         setDays(newDays);
         onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(month);
     }, [
-        month
+        month,
+        getDays,
+        onPageChange,
+        firstDayOfWeek
     ]);
     var isSameDay = function(day1, day2) {
         return (day1 === null || day1 === void 0 ? void 0 : day1.year) === (day2 === null || day2 === void 0 ? void 0 : day2.year) && (day1 === null || day1 === void 0 ? void 0 : day1.month) === (day2 === null || day2 === void 0 ? void 0 : day2.month) && (day1 === null || day1 === void 0 ? void 0 : day1.date) === (day2 === null || day2 === void 0 ? void 0 : day2.date);

package/dist/es/packages/calendarcard/style/calendarcard.scss

@@ -55,6 +55,9 @@
 
     &-top,
     &-bottom {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
       height: 12px;
       font-size: 12px;
@@ -67,14 +70,22 @@
 
     &.active {
       background-color: $calendar-active-background-color;
-      color: $color-primary-text;
       border-radius: $calendar-day-active-border-radius;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $color-primary-text;
+      }
     }
 
     &.start,
     &.end {
       background-color: $calendar-active-background-color;
-      color: $color-primary-text;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $color-primary-text;
+      }
     }
 
     &.start {
@@ -89,7 +100,11 @@
 
     &.mid {
       background-color: $calendar-choose-background-color;
-      color: $calendar-choose-color;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $calendar-choose-color;
+      }
     }
 
     .nut-calendar-day-info {
@@ -100,7 +115,11 @@
     &.prev,
     &.next,
     &.disabled {
-      color: $calendar-disable-color;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $calendar-disable-color;
+      }
       cursor: not-allowed;
     }
   }
@@ -128,11 +147,13 @@
       }
     }
   }
+
   &-day {
     &.start,
     &.end {
       border-radius: 0;
     }
+
     &.start {
       border-top-right-radius: $calendar-day-active-border-radius;
       border-bottom-right-radius: $calendar-day-active-border-radius;

package/dist/es/packages/calendarcard/style/style.css

@@ -47,6 +47,9 @@
   cursor: auto;
 }
 .nut-calendarcard-day-top, .nut-calendarcard-day-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 12px;
   font-size: 12px;
@@ -57,11 +60,21 @@
 }
 .nut-calendarcard-day.active {
   background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23));
-  color: var(--nutui-color-primary-text, #ffffff);
   border-radius: var(--nutui-calendar-day-active-border-radius, 4px);
 }
+.nut-calendarcard-day.active .nut-calendarcard-day-top,
+.nut-calendarcard-day.active .nut-calendarcard-day-inner,
+.nut-calendarcard-day.active .nut-calendarcard-day-bottom {
+  color: var(--nutui-color-primary-text, #ffffff);
+}
 .nut-calendarcard-day.start, .nut-calendarcard-day.end {
   background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-calendarcard-day.start .nut-calendarcard-day-top,
+.nut-calendarcard-day.start .nut-calendarcard-day-inner,
+.nut-calendarcard-day.start .nut-calendarcard-day-bottom, .nut-calendarcard-day.end .nut-calendarcard-day-top,
+.nut-calendarcard-day.end .nut-calendarcard-day-inner,
+.nut-calendarcard-day.end .nut-calendarcard-day-bottom {
   color: var(--nutui-color-primary-text, #ffffff);
 }
 .nut-calendarcard-day.start {
@@ -74,15 +87,27 @@
 }
 .nut-calendarcard-day.mid {
   background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+}
+.nut-calendarcard-day.mid .nut-calendarcard-day-top,
+.nut-calendarcard-day.mid .nut-calendarcard-day-inner,
+.nut-calendarcard-day.mid .nut-calendarcard-day-bottom {
   color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-calendarcard-day .nut-calendar-day-info {
   color: var(--nutui-color-primary-text, #ffffff);
 }
 .nut-calendarcard-day.prev, .nut-calendarcard-day.next, .nut-calendarcard-day.disabled {
-  color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
   cursor: not-allowed;
 }
+.nut-calendarcard-day.prev .nut-calendarcard-day-top,
+.nut-calendarcard-day.prev .nut-calendarcard-day-inner,
+.nut-calendarcard-day.prev .nut-calendarcard-day-bottom, .nut-calendarcard-day.next .nut-calendarcard-day-top,
+.nut-calendarcard-day.next .nut-calendarcard-day-inner,
+.nut-calendarcard-day.next .nut-calendarcard-day-bottom, .nut-calendarcard-day.disabled .nut-calendarcard-day-top,
+.nut-calendarcard-day.disabled .nut-calendarcard-day-inner,
+.nut-calendarcard-day.disabled .nut-calendarcard-day-bottom {
+  color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
 
 [dir=rtl] .nut-calendarcard-header-left .left, [dir=rtl] .nut-calendarcard-header-right .left,
 .nut-rtl .nut-calendarcard-header-left .left,

package/dist/es/packages/card/style/style.css

@@ -61,6 +61,7 @@
 .nut-tag .nut-icon {
   vertical-align: middle;
   margin-left: 4px;
+  color: var(--nutui-tag-color, #ffffff);
 }
 .nut-tag-text {
   font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));

package/dist/es/packages/checkbox/checkbox.d.ts

@@ -1,5 +1,4 @@
 import React, { FunctionComponent, ReactNode } from 'react';
-import CheckboxGroup from "../checkboxgroup";
 import { BasicComponent } from "../../utils/typings";
 import { CheckboxLabelPosition } from "../checkboxgroup/types";
 export type CheckboxShape = 'button' | 'round';
@@ -17,6 +16,4 @@ export interface CheckboxProps extends BasicComponent {
     label: ReactNode;
     onChange: (value: boolean) => void;
 }
-export declare const Checkbox: FunctionComponent<Partial<CheckboxProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>> & {
-    Group: typeof CheckboxGroup;
-};
+export declare const Checkbox: FunctionComponent<Partial<CheckboxProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>>;

package/dist/es/packages/checkbox/checkbox.js

@@ -4,9 +4,8 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import React, { useContext, useEffect, useState } from "react";
-import { Checked, CheckDisabled, CheckNormal } from "@nutui/icons-react";
+import { CheckDisabled, Checked, CheckNormal } from "@nutui/icons-react";
 import classNames from "classnames";
-import CheckboxGroup from "../checkboxgroup";
 import { ComponentDefaults } from "../../utils/typings";
 import Context from "../checkboxgroup/context";
 import { usePropsValue } from "../../utils/use-props-value";
@@ -162,4 +161,3 @@ export var Checkbox = function(props) {
     }), renderCheckboxItem());
 };
 Checkbox.displayName = 'NutCheckBox';
-Checkbox.Group = CheckboxGroup;

package/dist/es/packages/checkbox/index.d.ts

@@ -1,3 +1,8 @@
-import { Checkbox } from './checkbox';
+import { CheckboxProps } from './checkbox';
+import { CheckboxGroup } from '../checkboxgroup/checkboxgroup';
 export type { CheckboxProps, CheckboxShape } from './checkbox';
-export default Checkbox;
+type CompoundedComponent = React.FC<Partial<CheckboxProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>> & {
+    Group: typeof CheckboxGroup;
+};
+declare const InnerCheckbox: CompoundedComponent;
+export default InnerCheckbox;

package/dist/es/packages/checkbox/index.js

@@ -1,2 +1,5 @@
 import { Checkbox } from "./checkbox";
-export default Checkbox;
+import { CheckboxGroup } from "../checkboxgroup/checkboxgroup";
+var InnerCheckbox = Checkbox;
+InnerCheckbox.Group = CheckboxGroup;
+export default InnerCheckbox;

package/dist/es/packages/checkbox/style/style.css

@@ -1,6 +1,10 @@
 .nut-checkboxgroup .nut-checkbox-button {
   background-color: var(--nutui-color-background, #f5f6fa);
 }
+.nut-checkboxgroup-vertical {
+  display: flex;
+  flex-direction: column;
+}
 .nut-checkboxgroup-vertical .nut-checkbox {
   margin-bottom: 5px;
 }
@@ -12,8 +16,14 @@
   border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
   background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
 }
+.nut-checkboxgroup-horizontal {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
 .nut-checkboxgroup-horizontal .nut-checkbox {
   display: inline-flex;
+  flex: 1;
   margin-right: 20px;
 }
 .nut-checkboxgroup-horizontal .nut-checkbox-button-active {