rsuite 6.0.0-canary-20250103 → 6.0.0-canary-2025011413

package/esm/Tabs/Tabs.js

@@ -4,9 +4,9 @@ import React from 'react';
 import Nav from "../Nav/index.js";
 import Tab from "./Tab.js";
 import TabPanel from "./TabPanel.js";
+import { forwardRef, ReactChildren } from "../internals/utils/index.js";
 import { useClassNames, useControlled, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
-import { ReactChildren } from "../internals/utils/index.js";
 
 /**
  * Props for the Tabs component.
@@ -98,6 +98,9 @@ const renderTabs = (children, tabPanelProps) => {
     }, title);
   });
 };
+const Subcomponents = {
+  Tab
+};
 
 /**
  * Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.
@@ -105,7 +108,7 @@ const renderTabs = (children, tabPanelProps) => {
  * @version 5.53.0
  * @see https://rsuitejs.com/components/tabs
  */
-const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
+const Tabs = forwardRef((props, ref) => {
   const {
     propsWithDefaults,
     rtl
@@ -202,7 +205,6 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
     id,
     activeKey
   })));
-});
-Tabs.Tab = Tab;
+}, Subcomponents);
 Tabs.displayName = 'Tabs';
 export default Tabs;

package/esm/Tabs/index.d.ts

@@ -1,3 +1,6 @@
 import Tabs from './Tabs';
+import Tab from './Tab';
 export type { TabsProps } from './Tabs';
+export type { TabProps } from './Tab';
+export { Tabs, Tab };
 export default Tabs;

package/esm/Tabs/index.js

@@ -1,3 +1,9 @@
 'use client';
 import Tabs from "./Tabs.js";
+import Tab from "./Tab.js";
+
+// export types
+
+// export components
+export { Tabs, Tab };
 export default Tabs;

package/esm/Tag/Tag.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { WithAsProps, Color, RsRefForwardingComponent } from '../internals/types';
+import type { WithAsProps, Color } from '../internals/types';
 import type { CommonLocale } from '../locales';
 export interface TagProps extends WithAsProps {
     /** Different sizes */
@@ -21,5 +21,5 @@ export interface TagProps extends WithAsProps {
  *
  * @see https://rsuitejs.com/components/tag
  */
-declare const Tag: RsRefForwardingComponent<'div', TagProps>;
+declare const Tag: import("../internals/types").InternalRefForwardingComponent<"div", TagProps, never> & Record<string, never>;
 export default Tag;

package/esm/Tag/Tag.js

@@ -4,14 +4,14 @@ import React, { useMemo } from 'react';
 import CloseButton from "../internals/CloseButton/index.js";
 import { useClassNames } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
-import { mergeStyles, isPresetColor, createColorVariables } from "../internals/utils/index.js";
+import { forwardRef, mergeStyles, isPresetColor, createColorVariables } from "../internals/utils/index.js";
 /**
  * The `Tag` component is used to label and categorize.
  * It can be used to mark the status of an object or classify it into different categories.
  *
  * @see https://rsuitejs.com/components/tag
  */
-const Tag = /*#__PURE__*/React.forwardRef((props, ref) => {
+const Tag = forwardRef((props, ref) => {
   const {
     propsWithDefaults,
     getLocale

package/esm/Tag/index.d.ts

@@ -1,3 +1,4 @@
 import Tag from './Tag';
 export type { TagProps } from './Tag';
+export { Tag };
 export default Tag;

package/esm/Tag/index.js

@@ -1,3 +1,8 @@
 'use client';
 import Tag from "./Tag.js";
+
+// export types
+
+// export components
+export { Tag };
 export default Tag;

package/esm/TagGroup/TagGroup.d.ts

@@ -5,5 +5,7 @@ export type TagGroupProps = ComponentProps;
  *
  * @see https://rsuitejs.com/components/tag/
  */
-declare const TagGroup: import("../internals/types").RsRefForwardingComponent<"div", ComponentProps, false>;
+declare const TagGroup: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
+    name: string;
+}>, never> & Record<string, never>;
 export default TagGroup;

package/esm/TagGroup/index.d.ts

@@ -1,3 +1,4 @@
 import TagGroup from './TagGroup';
 export type { TagGroupProps } from './TagGroup';
+export { TagGroup };
 export default TagGroup;

package/esm/TagGroup/index.js

@@ -1,3 +1,8 @@
 'use client';
 import TagGroup from "./TagGroup.js";
+
+// export types
+
+// export components
+export { TagGroup };
 export default TagGroup;

package/esm/TagInput/TagInput.d.ts

@@ -0,0 +1,10 @@
+import { InputPickerProps } from '../InputPicker/InputPicker';
+import { TagOnlyProps } from '../InputPicker/InputPickerContext';
+export type TagInputProps = Omit<InputPickerProps<readonly string[]>, 'data'> & Partial<TagOnlyProps>;
+/**
+ * The `TagInput` component is an enhancement of Input and supports input tags and management tags.
+ *
+ * @see https://rsuitejs.com/components/tag-input
+ */
+declare const TagInput: import("../internals/types").InternalRefForwardingComponent<"div", TagInputProps, never> & Record<string, never>;
+export default TagInput;

package/esm/TagInput/TagInput.js

@@ -0,0 +1,52 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useMemo } from 'react';
+import InputPicker from "../InputPicker/InputPicker.js";
+import { forwardRef } from "../internals/utils/index.js";
+import { TagProvider } from "../InputPicker/InputPickerContext.js";
+import { useCustom } from "../CustomProvider/index.js";
+/**
+ * The `TagInput` component is an enhancement of Input and supports input tags and management tags.
+ *
+ * @see https://rsuitejs.com/components/tag-input
+ */
+const TagInput = forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('TagInput', props);
+  const {
+    tagProps = {},
+    trigger = 'Enter',
+    value,
+    defaultValue,
+    onTagRemove,
+    ...rest
+  } = propsWithDefaults;
+  const contextValue = useMemo(() => ({
+    multi: true,
+    disabledOptions: true,
+    trigger,
+    tagProps,
+    onTagRemove
+  }), [onTagRemove, tagProps, trigger]);
+  const data = useMemo(() => (value || defaultValue || []).map(v => ({
+    value: v,
+    label: v
+  })), [defaultValue, value]);
+  return /*#__PURE__*/React.createElement(TagProvider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(InputPicker, _extends({}, rest, {
+    "aria-haspopup": false,
+    "aria-expanded": undefined,
+    "aria-controls": undefined,
+    "aria-keyshortcuts": trigger,
+    value: value,
+    defaultValue: defaultValue,
+    data: data,
+    placement: undefined,
+    creatable: true,
+    ref: ref
+  })));
+});
+TagInput.displayName = 'TagInput';
+export default TagInput;

package/esm/TagInput/index.d.ts

@@ -1,11 +1,4 @@
-import { InputPickerProps } from '../InputPicker/InputPicker';
-import { TagOnlyProps } from '../InputPicker/InputPickerContext';
-import type { PickerComponent } from '../internals/Picker/types';
-export type TagInputProps = Omit<InputPickerProps<readonly string[]>, 'data'> & Partial<TagOnlyProps>;
-/**
- * The `TagInput` component is an enhancement of Input and supports input tags and management tags.
- *
- * @see https://rsuitejs.com/components/tag-input
- */
-declare const TagInput: PickerComponent<TagInputProps>;
+import TagInput from './TagInput';
+export type { TagInputProps } from './TagInput';
+export { TagInput };
 export default TagInput;

package/esm/TagInput/index.js

@@ -1,51 +1,8 @@
 'use client';
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useMemo } from 'react';
-import InputPicker from "../InputPicker/InputPicker.js";
-import { TagProvider } from "../InputPicker/InputPickerContext.js";
-import { useCustom } from "../CustomProvider/index.js";
-/**
- * The `TagInput` component is an enhancement of Input and supports input tags and management tags.
- *
- * @see https://rsuitejs.com/components/tag-input
- */
-const TagInput = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    propsWithDefaults
-  } = useCustom('TagInput', props);
-  const {
-    tagProps = {},
-    trigger = 'Enter',
-    value,
-    defaultValue,
-    onTagRemove,
-    ...rest
-  } = propsWithDefaults;
-  const contextValue = useMemo(() => ({
-    multi: true,
-    disabledOptions: true,
-    trigger,
-    tagProps,
-    onTagRemove
-  }), [onTagRemove, tagProps, trigger]);
-  const data = useMemo(() => (value || defaultValue || []).map(v => ({
-    value: v,
-    label: v
-  })), [defaultValue, value]);
-  return /*#__PURE__*/React.createElement(TagProvider, {
-    value: contextValue
-  }, /*#__PURE__*/React.createElement(InputPicker, _extends({}, rest, {
-    "aria-haspopup": false,
-    "aria-expanded": undefined,
-    "aria-controls": undefined,
-    "aria-keyshortcuts": trigger,
-    value: value,
-    defaultValue: defaultValue,
-    data: data,
-    placement: undefined,
-    creatable: true,
-    ref: ref
-  })));
-});
-TagInput.displayName = 'TagInput';
+import TagInput from "./TagInput.js";
+
+// export types
+
+// export components
+export { TagInput };
 export default TagInput;

package/esm/TagPicker/TagPicker.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { InputPickerProps } from '../InputPicker/InputPicker';
+import { TagOnlyProps } from '../InputPicker/InputPickerContext';
+import type { CheckboxProps } from '../Checkbox';
+export interface TagPickerProps extends InputPickerProps, Partial<TagOnlyProps> {
+    /**
+     * Custom render checkbox on menu item
+     * @version 5.47.0
+     **/
+    renderMenuItemCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;
+}
+/**
+ * `TagPicker` component enables multi-selection by tags and supports new options.
+ *
+ * @see https://rsuitejs.com/components/tag-picker/
+ */
+declare const TagPicker: import("../internals/types").InternalRefForwardingComponent<"div", TagPickerProps, never> & Record<string, never>;
+export default TagPicker;

package/esm/TagPicker/TagPicker.js

@@ -0,0 +1,38 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useMemo } from 'react';
+import InputPicker from "../InputPicker/InputPicker.js";
+import { TagProvider } from "../InputPicker/InputPickerContext.js";
+import { useCustom } from "../CustomProvider/index.js";
+import { forwardRef } from "../internals/utils/index.js";
+/**
+ * `TagPicker` component enables multi-selection by tags and supports new options.
+ *
+ * @see https://rsuitejs.com/components/tag-picker/
+ */
+const TagPicker = forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('TagPicker', props);
+  const {
+    tagProps = {},
+    trigger = 'Enter',
+    onTagRemove,
+    renderMenuItemCheckbox,
+    ...rest
+  } = propsWithDefaults;
+  const contextValue = useMemo(() => ({
+    multi: true,
+    trigger,
+    tagProps,
+    onTagRemove,
+    renderCheckbox: renderMenuItemCheckbox
+  }), [onTagRemove, renderMenuItemCheckbox, tagProps, trigger]);
+  return /*#__PURE__*/React.createElement(TagProvider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(InputPicker, _extends({}, rest, {
+    ref: ref
+  })));
+});
+TagPicker.displayName = 'TagPicker';
+export default TagPicker;

package/esm/TagPicker/index.d.ts

@@ -1,19 +1,4 @@
-import React from 'react';
-import { InputPickerProps } from '../InputPicker/InputPicker';
-import { TagOnlyProps } from '../InputPicker/InputPickerContext';
-import type { PickerComponent } from '../internals/Picker/types';
-import type { CheckboxProps } from '../Checkbox';
-export interface TagPickerProps extends InputPickerProps, Partial<TagOnlyProps> {
-    /**
-     * Custom render checkbox on menu item
-     * @version 5.47.0
-     **/
-    renderMenuItemCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;
-}
-/**
- * `TagPicker` component enables multi-selection by tags and supports new options.
- *
- * @see https://rsuitejs.com/components/tag-picker/
- */
-declare const TagPicker: PickerComponent<TagPickerProps>;
+import TagPicker from './TagPicker';
+export type { TagPickerProps } from './TagPicker';
+export { TagPicker };
 export default TagPicker;

package/esm/TagPicker/index.js

@@ -1,37 +1,8 @@
 'use client';
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useMemo } from 'react';
-import InputPicker from "../InputPicker/InputPicker.js";
-import { TagProvider } from "../InputPicker/InputPickerContext.js";
-import { useCustom } from "../CustomProvider/index.js";
-/**
- * `TagPicker` component enables multi-selection by tags and supports new options.
- *
- * @see https://rsuitejs.com/components/tag-picker/
- */
-const TagPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    propsWithDefaults
-  } = useCustom('TagPicker', props);
-  const {
-    tagProps = {},
-    trigger = 'Enter',
-    onTagRemove,
-    renderMenuItemCheckbox,
-    ...rest
-  } = propsWithDefaults;
-  const contextValue = useMemo(() => ({
-    multi: true,
-    trigger,
-    tagProps,
-    onTagRemove,
-    renderCheckbox: renderMenuItemCheckbox
-  }), [onTagRemove, renderMenuItemCheckbox, tagProps, trigger]);
-  return /*#__PURE__*/React.createElement(TagProvider, {
-    value: contextValue
-  }, /*#__PURE__*/React.createElement(InputPicker, _extends({}, rest, {
-    ref: ref
-  })));
-});
-TagPicker.displayName = 'TagPicker';
+import TagPicker from "./TagPicker.js";
+
+// export types
+
+// export components
+export { TagPicker };
 export default TagPicker;

package/esm/Text/Text.d.ts

@@ -1,4 +1,5 @@
-import type { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../internals/types';
+import React from 'react';
+import type { WithAsProps, Color } from '../internals/types';
 declare const fontSizeMap: {
     sm: number;
     md: number;
@@ -9,8 +10,9 @@ declare const fontSizeMap: {
 export interface TextProps extends WithAsProps {
     /**
      * The font color of the text.
+     * Accepts preset colors or CSS color values
      */
-    color?: TypeAttributes.Color;
+    color?: Color | React.CSSProperties['color'];
     /**
      * The font size of the text.
      */
@@ -43,5 +45,5 @@ export interface TextProps extends WithAsProps {
  *
  * @see https://rsuitejs.com/components/text
  */
-declare const Text: RsRefForwardingComponent<'p', TextProps>;
+declare const Text: import("../internals/types").InternalRefForwardingComponent<"p", TextProps, never> & Record<string, never>;
 export default Text;

package/esm/Text/Text.js

@@ -1,8 +1,9 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useClassNames } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
+import { forwardRef, mergeStyles, isPresetColor, createColorVariables } from "../internals/utils/index.js";
 const fontSizeMap = {
   sm: 12,
   md: 14,
@@ -16,7 +17,7 @@ const fontSizeMap = {
  *
  * @see https://rsuitejs.com/components/text
  */
-const Text = /*#__PURE__*/React.forwardRef((props, ref) => {
+const Text = forwardRef((props, ref) => {
   const {
     propsWithDefaults
   } = useCustom('Text', props);
@@ -38,17 +39,16 @@ const Text = /*#__PURE__*/React.forwardRef((props, ref) => {
     withClassPrefix,
     merge
   } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix(color, align, weight, transform, {
+  const classes = merge(className, withClassPrefix(isPresetColor(color) && color, align, weight, transform, {
     muted,
     ellipsis: maxLines
   }));
-  const styles = {
+  const styles = useMemo(() => mergeStyles({
     fontSize: fontSizeMap[size] || size,
     ...(maxLines ? {
       WebkitLineClamp: maxLines
-    } : null),
-    ...style
-  };
+    } : null)
+  }, createColorVariables(color, '--rs-text-color'), style), [style, color, size, maxLines]);
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes,

package/esm/Text/index.d.ts

@@ -1,3 +1,4 @@
 import Text from './Text';
 export type { TextProps } from './Text';
+export { Text };
 export default Text;

package/esm/Text/index.js

@@ -1,3 +1,8 @@
 'use client';
 import Text from "./Text.js";
+
+// export types
+
+// export components
+export { Text };
 export default Text;

package/esm/TimePicker/TimePicker.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { RangeType } from '../DatePicker';
+import type { DateOptionPreset } from '../internals/types';
 import type { FormControlBaseProps, PickerBaseProps } from '../internals/types';
-import type { PickerComponent } from '../internals/Picker/types';
 import type { DatePickerLocale } from '../locales';
 export interface TimePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null> {
     /**
@@ -67,7 +66,7 @@ export interface TimePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     /**
      * Called after clicking the shortcut button
      */
-    onShortcutClick?: (range: RangeType<Date>, event: React.MouseEvent) => void;
+    onShortcutClick?: (range: DateOptionPreset<Date>, event: React.MouseEvent) => void;
     /**
      * Called when clean
      */
@@ -77,5 +76,5 @@ export interface TimePickerProps extends PickerBaseProps<DatePickerLocale>, Form
      */
     renderValue?: (value: Date, format: string) => string;
 }
-declare const TimePicker: PickerComponent<TimePickerProps>;
+declare const TimePicker: import("../internals/types").InternalRefForwardingComponent<"div", TimePickerProps, never> & Record<string, never>;
 export default TimePicker;

package/esm/TimePicker/TimePicker.js

@@ -2,8 +2,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
 import DatePicker from "../DatePicker/index.js";
+import { forwardRef } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
-const TimePicker = /*#__PURE__*/React.forwardRef((props, ref) => {
+const TimePicker = forwardRef((props, ref) => {
   const {
     propsWithDefaults,
     getLocale

package/esm/TimePicker/index.d.ts

@@ -1,3 +1,4 @@
 import TimePicker from './TimePicker';
 export type { TimePickerProps } from './TimePicker';
+export { TimePicker };
 export default TimePicker;

package/esm/TimePicker/index.js

@@ -1,3 +1,8 @@
 'use client';
 import TimePicker from "./TimePicker.js";
+
+// export types
+
+// export components
+export { TimePicker };
 export default TimePicker;

package/esm/TimeRangePicker/TimeRangePicker.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { RangeType, DateRange } from '../DateRangePicker';
+import { DateRange } from '../DateRangePicker';
+import type { DateOptionPreset } from '../internals/types';
 import type { FormControlBaseProps, PickerBaseProps } from '../internals/types';
-import type { PickerComponent } from '../internals/Picker/types';
 import type { DatePickerLocale } from '../locales';
 export interface TimeRangePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<DateRange | null> {
     /**
@@ -9,7 +9,7 @@ export interface TimeRangePickerProps extends PickerBaseProps<DatePickerLocale>,
      */
     caretAs?: React.ElementType | null;
     /** Predefined date ranges */
-    ranges?: RangeType[];
+    ranges?: DateOptionPreset<DateRange>[];
     /**
      * Format of the date displayed in the input box
      */
@@ -59,7 +59,7 @@ export interface TimeRangePickerProps extends PickerBaseProps<DatePickerLocale>,
     /**
      * Called after clicking the shortcut button
      */
-    onShortcutClick?: (range: RangeType, event: React.MouseEvent) => void;
+    onShortcutClick?: (range: DateOptionPreset<DateRange>, event: React.MouseEvent) => void;
     /**
      * Called when the value is cleared
      */
@@ -73,5 +73,5 @@ export interface TimeRangePickerProps extends PickerBaseProps<DatePickerLocale>,
      */
     renderTitle?: (date: Date) => React.ReactNode;
 }
-declare const TimeRangePicker: PickerComponent<TimeRangePickerProps>;
+declare const TimeRangePicker: import("../internals/types").InternalRefForwardingComponent<"div", TimeRangePickerProps, never> & Record<string, never>;
 export default TimeRangePicker;

package/esm/TimeRangePicker/TimeRangePicker.js

@@ -3,8 +3,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import DateRangePicker from "../DateRangePicker/index.js";
 import { useCustom } from "../CustomProvider/index.js";
+import { forwardRef } from "../internals/utils/index.js";
 const defaultRanges = [];
-const TimeRangePicker = /*#__PURE__*/React.forwardRef((props, ref) => {
+const TimeRangePicker = forwardRef((props, ref) => {
   const {
     propsWithDefaults,
     getLocale

package/esm/TimeRangePicker/index.d.ts

@@ -1,3 +1,4 @@
 import TimeRangePicker from './TimeRangePicker';
 export type { TimeRangePickerProps } from './TimeRangePicker';
+export { TimeRangePicker };
 export default TimeRangePicker;

package/esm/TimeRangePicker/index.js

@@ -1,3 +1,8 @@
 'use client';
 import TimeRangePicker from "./TimeRangePicker.js";
+
+// export types
+
+// export components
+export { TimeRangePicker };
 export default TimeRangePicker;

package/esm/Timeline/Timeline.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import TimelineItem from './TimelineItem';
-import type { WithAsProps, RsRefForwardingComponent } from '../internals/types';
+import type { WithAsProps } from '../internals/types';
 export interface TimelineProps extends WithAsProps {
     /** The content of the component */
     children?: React.ReactNode;
@@ -16,15 +15,14 @@ export interface TimelineProps extends WithAsProps {
      */
     isItemActive?: (index: number, totalItemsCount: number) => boolean;
 }
-interface TimelineComponent extends RsRefForwardingComponent<'div', TimelineProps> {
-    Item: typeof TimelineItem;
-    ACTIVE_FIRST: (index: number, totalItemsCount: number) => boolean;
-    ACTIVE_LAST: (index: number, totalItemsCount: number) => boolean;
-}
 /**
  * The `Timeline` component is used to display a list of items in chronological order.
  *
  * @see https://rsuitejs.com/components/timeline
  */
-declare const Timeline: TimelineComponent;
+declare const Timeline: import("../internals/types").InternalRefForwardingComponent<"div", TimelineProps, never> & {
+    Item: import("../internals/types").InternalRefForwardingComponent<"div", import("./TimelineItem").TimelineItemProps, never> & Record<string, never>;
+    ACTIVE_FIRST: (index: number) => boolean;
+    ACTIVE_LAST: (index: number, totalItemsCount: number) => boolean;
+};
 export default Timeline;