@rainbow-oh/yee-c 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Button/button.tsx

@@ -42,7 +42,7 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
     if (type) {
       switch (type) {
         case 'default':
-          mergedColor = 'primary';
+          mergedColor = 'default';
           mergedVariant = 'outlined';
           break;
         case 'primary':
@@ -50,7 +50,7 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
           mergedVariant = 'solid';
           break;
         case 'dashed':
-          mergedColor = 'primary';
+          mergedColor = 'default';
           mergedVariant = 'dashed';
           break;
         case 'link':

package/src/Button/style/index.less

@@ -41,18 +41,18 @@
     border: none;
 
     &:not(@{pls}-disabled):hover {
-      background-color: var(--m-btn-hover-color);
+      background-color: var(--m-btn-hover-bg-color);
     }
 
     &:not(@{pls}-disabled):active {
-      background-color: var(--m-btn-active-color);
+      background-color: var(--m-btn-active-bg-color);
     }
   }
 
   &-dashed {
     color: var(--m-btn-color);
     background-color: transparent;
-    border: var(--yee-btn-border-width) dashed var(--m-btn-color);
+    border: var(--yee-btn-border-width) dashed var(--m-btn-border-color);
 
     &:not(@{pls}-disabled):hover {
       color: var(--m-btn-hover-color);
@@ -84,7 +84,19 @@
   &-outlined {
     color: var(--m-btn-color);
     background-color: transparent;
-    border: var(--yee-btn-border-width) solid var(--m-btn-color);
+    border: var(--yee-btn-border-width) solid var(--m-btn-border-color);
+
+    &:not(@{pls}-disabled) {
+      &:hover {
+        color: var(--m-btn-hover-color);
+        border-color: var(--m-btn-border-hover-color);
+      }
+
+      &:active {
+        color: var(--m-btn-active-color);
+        border-color: var(--m-btn-border-active-color);
+      }
+    }
   }
 
   &-ghost {
@@ -134,11 +146,14 @@
   // ---- color ------
   &-default {
     --m-btn-color: var(--yee-text-color);
-    --m-btn-hover-color: var(--yee-text-color-auxiliary);
-    --m-btn-active-color: var(--yee-btn-default-active-color);
+    --m-btn-hover-color: var(--yee-primary-color);
+    --m-btn-border-color: var(--yee-border-color);
+    --m-btn-border-hover-color: var(--yee-primary-color);
     --m-btn-bg-color: var(--yee-btn-default-bg-color);
-    --m-btn-hover-bg-color: var(--yee-btn-default-bg-color);
-    --m-btn-active-bg-color: var(--yee-btn-default-bg-color);
+    --m-btn-hover-bg-color: var(--yee-text-color-auxiliary);
+    --m-btn-border-active-color: var(--yee-primary-color-active);
+    --m-btn-active-color: var(--yee-primary-color-active);
+    --m-btn-active-bg-color: var(--yee-text-color-auxiliary);
   }
 
   &-primary {

package/src/Card/demo/collapsible.tsx

@@ -8,6 +8,7 @@ export default () => {
       expanded={false}
       extra={<a href="#">More</a>}
       style={{ width: 300 }}
+      bordered
     >
       <p>Card content</p>
       <p>Card content</p>

package/src/Carousel/demo/arrows.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 export default () => {
   return (
-    <Carousel style={{ width: '500px', height: '300px' }} arrows="always">
+    <Carousel style={{ width: '100%', height: '300px' }} arrows="always">
       <div
         style={{
           backgroundColor: '#f5f5f5',

package/src/Carousel/demo/autoplay.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 export default () => {
   return (
     <Carousel
-      style={{ width: '500px', height: '300px' }}
+      style={{ width: '100%', height: '300px' }}
       autoplay
       autoplaySpeed={1000}
     >

package/src/Carousel/demo/effect.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 export default () => {
   return (
     <Carousel
-      style={{ width: '500px', height: '300px' }}
+      style={{ width: '100%', height: '300px' }}
       effect="fade"
       autoplay
       autoplaySpeed={2000}

package/src/Carousel/demo/position.tsx

@@ -5,7 +5,7 @@ export default () => {
   return (
     <div>
       <Carousel
-        style={{ width: '500px', height: '300px', marginBottom: '20px' }}
+        style={{ width: '100%', height: '300px', marginBottom: '20px' }}
         dotPosition="top"
         dots
       >

package/src/Config-Provider/index.en-US.md

@@ -72,6 +72,7 @@ GlobalCtxType contains configuration for all components. Here are some examples:
 | rate | [RateProps](/components/rate) | Rate component configuration |
 | search | [SearchProps](/components/search) | Search component configuration |
 | select | [SelectProps](/components/select) | Select component configuration |
+| segmented | [SegmentedProps](/components/segmented) | Segmented component configuration |
 | skeleton | [SkeletonProps](/components/skeleton) | Skeleton component configuration |
 | slider | [SliderProps](/components/slider) | Slider component configuration |
 | space | [SpaceProps](/components/space) | Space component configuration |
@@ -88,6 +89,7 @@ GlobalCtxType contains configuration for all components. Here are some examples:
 | timeline | [TimelineProps](/components/timeline) | Timeline component configuration |
 | highlight | [HighlightProps](/components/highlight) | Highlight component configuration |
 | tooltip | [TooltipProps](/components/tooltip) | Tooltip component configuration |
+| tour | [TourProps](/components/tour) | Tour component configuration |
 | tree | [TreeProps](/components/tree) | Tree component configuration |
 | treeselect | [TreeSelectProps](/components/tree-select) | TreeSelect component configuration |
 | trigger | [TriggerProps](/components/trigger) | Trigger component configuration |

package/src/Config-Provider/index.zh-CN.md

@@ -72,6 +72,7 @@ GlobalCtxType 包含所有组件的配置。以下是一些示例：
 | rate | [RateProps](/components/rate) | Rate 组件配置 |
 | search | [SearchProps](/components/search) | Search 组件配置 |
 | select | [SelectProps](/components/select) | Select 组件配置 |
+| segmented | [SegmentedProps](/components/segmented) | Segmented 组件配置 |
 | skeleton | [SkeletonProps](/components/skeleton) | Skeleton 组件配置 |
 | slider | [SliderProps](/components/slider) | Slider 组件配置 |
 | space | [SpaceProps](/components/space) | Space 组件配置 |
@@ -88,6 +89,7 @@ GlobalCtxType 包含所有组件的配置。以下是一些示例：
 | timeline | [TimelineProps](/components/timeline) | Timeline 组件配置 |
 | highlight | [HighlightProps](/components/highlight) | Highlight 组件配置 |
 | tooltip | [TooltipProps](/components/tooltip) | Tooltip 组件配置 |
+| tour | [TourProps](/components/tour) | Tour 组件配置 |
 | tree | [TreeProps](/components/tree) | Tree 组件配置 |
 | treeselect | [TreeSelectProps](/components/tree-select) | TreeSelect 组件配置 |
 | trigger | [TriggerProps](/components/trigger) | Trigger 组件配置 |

package/src/Config-Provider/interface.ts

@@ -40,6 +40,7 @@ import { RadioGroupProps, RadioProps } from '../Radio';
 import { RangePickerProps } from '../RangePicker';
 import { RateProps } from '../Rate';
 import { SearchProps } from '../Search';
+import { SegmentedProps } from '../Segmented';
 import { SelectProps } from '../Select';
 import { SkeletonProps } from '../Skeleton';
 import { SliderProps } from '../Slider';
@@ -56,6 +57,7 @@ import { TextAreaProps } from '../TextArea';
 import { SpinProps } from '../Spin';
 import { TimelineProps } from '../Timeline';
 import { TooltipProps } from '../Tooltip';
+import { TourProps } from '../Tour';
 import { TransferProps } from '../Transfer';
 import { TreeProps } from '../Tree';
 import { TreeSelectProps } from '../TreeSelect';
@@ -112,6 +114,7 @@ export type GlobalCtxType = {
   rate?: RateProps;
   search?: SearchProps;
   select?: SelectProps;
+  segmented?: SegmentedProps;
   skeleton?: SkeletonProps;
   slider?: SliderProps;
   space?: SpaceProps;
@@ -129,6 +132,7 @@ export type GlobalCtxType = {
   highlight?: HighlightProps;
   //   timepicker?: TimePickerProps;
   tooltip?: TooltipProps;
+  tour?: TourProps;
   transfer?: TransferProps;
   tree?: TreeProps<unknown>;
   treeselect?: TreeSelectProps;

package/src/Form/Field.tsx

@@ -27,6 +27,10 @@ function stringifyPath(path: InternalNamePath): string {
 
 const Field: React.FC<FieldProps> = (props) => {
   const {
+    style,
+    className,
+    styles,
+    classNames,
     children,
     name,
     rules,
@@ -89,10 +93,10 @@ const Field: React.FC<FieldProps> = (props) => {
   // Normalize tooltip into { icon, ...tooltipProps }, or null when not provided.
   // Everything except `icon` is forwarded to <Tooltip>, so any Tooltip prop
   // (title, color, placement, ...) is supported automatically.
-  const tooltipConfig = useMemo<
-    | { icon: React.ReactNode; tooltipProps: Omit<FieldConfigurableTooltip, 'icon'> }
-    | null
-  >(() => {
+  const tooltipConfig = useMemo<{
+    icon: React.ReactNode;
+    tooltipProps: Omit<FieldConfigurableTooltip, 'icon'>;
+  } | null>(() => {
     if (tooltip === undefined || tooltip === null || tooltip === false)
       return null;
     if (
@@ -145,17 +149,29 @@ const Field: React.FC<FieldProps> = (props) => {
   };
   return (
     <div
-      className={clsx(`${prefixCls}-item`, `${prefixCls}-item-${layout}`, {
-        [`${prefixCls}-item-${validate?.status}`]: validate && validate.status,
-      })}
+      className={clsx(
+        `${prefixCls}-item`,
+        `${prefixCls}-item-${layout}`,
+        {
+          [`${prefixCls}-item-${validate?.status}`]:
+            validate && validate.status,
+        },
+        className,
+      )}
+      style={style}
     >
       <div className={clsx(`${prefixCls}-item-row`)}>
         {label || tooltipConfig ? (
           <label
             htmlFor={normalizedName}
-            className={clsx(`${prefixCls}-item-label`, {
-              [`${prefixCls}-item-required`]: isRequired(),
-            })}
+            className={clsx(
+              `${prefixCls}-item-label`,
+              {
+                [`${prefixCls}-item-required`]: isRequired(),
+              },
+              classNames?.label,
+            )}
+            style={styles?.label}
           >
             {label}
             {isRequired() ? (
@@ -170,7 +186,10 @@ const Field: React.FC<FieldProps> = (props) => {
             ) : null}
           </label>
         ) : null}
-        <div className={`${prefixCls}-item-control`}>
+        <div
+          className={clsx(`${prefixCls}-item-control`, classNames?.control)}
+          style={styles?.control}
+        >
           {React.isValidElement(children) ? (
             React.cloneElement(
               children as React.ReactElement,

package/src/Form/demo/basic.tsx

@@ -8,7 +8,7 @@ import {
   Space,
   TextArea,
 } from '@rainbow-oh/yee-c';
-import React, { useEffect } from 'react';
+import React from 'react';
 
 export default () => {
   const [form] = Form.useForm();
@@ -17,30 +17,8 @@ export default () => {
     console.log('Received values:', values);
   };
 
-  const [, setState] = React.useState({});
-
-  useEffect(() => {
-    setTimeout(() => {
-      form.setFieldsValue({
-        address: [
-          {
-            one: '123 Main St',
-          },
-        ],
-      });
-    }, 2000);
-  }, []);
-
   return (
-    <Form
-      form={form}
-      onFinish={onFinish}
-      layout="vertical"
-      data-testid="basic-form"
-      onValuesChange={(field) => {
-        setState(field);
-      }}
-    >
+    <Form form={form} onFinish={onFinish} data-testid="basic-form">
       <Grid>
         <Grid.Item>
           <Form.Field

package/src/Form/demo/form-table.tsx

@@ -1,5 +1,13 @@
 import type { ColumnProps } from '@rainbow-oh/yee-c';
-import { Button, Form, Input, Space, Table } from '@rainbow-oh/yee-c';
+import {
+  Button,
+  Form,
+  Input,
+  InputNumber,
+  Space,
+  Table,
+  TextArea,
+} from '@rainbow-oh/yee-c';
 import React from 'react';
 
 export default () => {
@@ -13,16 +21,7 @@ export default () => {
     <div style={{ padding: '24px' }}>
       <h2>Form + Table Dynamic Form Example</h2>
       <Form form={form} onFinish={onFinish} layout="vertical">
-        <Form.List
-          name="users"
-          // initialValue={[
-          //   {
-          //     name: '',
-          //     age: '',
-          //     address: '',
-          //   },
-          // ]}
-        >
+        <Form.List name="users">
           {(fields, operations) => {
             // Define column config - operations are accessible here
             const columns: ColumnProps[] = [
@@ -44,7 +43,11 @@ export default () => {
                 width: '20%',
                 render: (_record, index) => (
                   <Form.Field name={[index, 'age']} required>
-                    <Input placeholder="Please enter age" type="number" />
+                    <InputNumber
+                      controls={false}
+                      placeholder="Please enter age"
+                      type="number"
+                    />
                   </Form.Field>
                 ),
               },
@@ -55,7 +58,7 @@ export default () => {
                 width: '40%',
                 render: (_record, index) => (
                   <Form.Field name={[index, 'address']}>
-                    <Input placeholder="Please enter address" />
+                    <TextArea placeholder="Please enter address" />
                   </Form.Field>
                 ),
               },

package/src/Form/index.en-US.md

@@ -89,6 +89,10 @@ High performance form component with data scope management.
 
 | Property | Type                  | Description      | Default |
 | -------- | --------------------- | ---------------- | ------- |
+| className | `string`             | Custom field root class name | -       |
+| style | `React.CSSProperties` | Custom field root style | -       |
+| classNames | `Partial<Record<'label' \| 'control', string>>` | Semantic structure class names | -       |
+| styles | `Partial<Record<'label' \| 'control', React.CSSProperties>>` | Semantic structure styles | -       |
 | children | `React.ReactElement`  | Child element    | -       |
 | name     | `NamePath` | Field name       | -       |
 | rules    | [Rule\[\]](#rule)     | Validation rules | -       |

package/src/Form/index.zh-CN.md

@@ -88,6 +88,10 @@ toc: 'content'
 
 | 属性名        | 类型                 | 描述                 | 默认值    |
 | ------------- | -------------------- | -------------------- | --------- |
+| className     | `string`             | 自定义字段根类名     | -         |
+| style         | `React.CSSProperties` | 自定义字段根样式    | -         |
+| classNames    | `Partial<Record<'label' \| 'control', string>>` | 语义化结构类名 | -  |
+| styles        | `Partial<Record<'label' \| 'control', React.CSSProperties>>` | 语义化结构样式 | - |
 | children      | `React.ReactElement` | 子元素               | -         |
 | name          | `NamePath`           | 字段名               | -         |
 | rules         | [Rule\[\]](#rule)    | 校验规则             | -         |

package/src/Form/interface.ts

@@ -6,7 +6,7 @@ export type Store = Record<string, StoreValue>;
 export type Name = string;
 export type NamePath = string | string[] | number | (string | number)[];
 
-export type SemanticDOM = 'label' | 'control';
+export type FieldSemanticDOM = 'label' | 'control';
 
 // Internal name path type, always a string array
 export type InternalNamePath = (string | number)[];
@@ -264,6 +264,22 @@ export type FieldConfigurableTooltip = Omit<TooltipProps, 'children'> & {
 export type FieldTooltip = React.ReactNode | FieldConfigurableTooltip;
 
 export type FieldProps = {
+  /**
+   * custom field root className
+   * */
+  className?: string;
+  /**
+   * custom field root style
+   * */
+  style?: React.CSSProperties;
+  /**
+   * Semantic DOM className
+   * */
+  classNames?: Partial<Record<FieldSemanticDOM, string>>;
+  /**
+   * Semantic DOM style
+   * */
+  styles?: Partial<Record<FieldSemanticDOM, React.CSSProperties>>;
   /**
    * Child nodes
    * */

package/src/Menu/style/index.less

@@ -30,6 +30,7 @@
   // -------- item --------
   &-item {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     box-sizing: border-box;
     width: 100%;
@@ -82,7 +83,7 @@
     list-style: none;
 
     &-title {
-      padding: var(--yee-menu-item-group-title-padding, 8px 16px);
+      padding: var(--yee-menu-item-group-title-padding, 4px 12px);
       color: var(
         --yee-menu-item-group-title-color,
         var(--yee-color-text-secondary)
@@ -106,7 +107,7 @@
     margin: var(--yee-menu-item-divider-margin, 4px 0);
     border-top: var(
       --yee-menu-item-divider-border,
-      1px solid var(--yee-color-border)
+      1px solid var(--yee-border-color)
     );
   }
 
@@ -119,6 +120,7 @@
     &-title {
       display: flex;
       align-items: center;
+      flex-shrink: 0;
       justify-content: space-between;
       padding: var(--yee-menu-item-padding);
       border-radius: var(--yee-menu-item-border-radius);

package/src/Radio/demo/button.tsx

@@ -26,6 +26,7 @@ export default () => {
         value={value2}
         onChange={(e) => setValue2(e)}
         buttonStyle="solid"
+        gap={8}
         options={[
           { value: 'a', label: 'Hangzhou' },
           { value: 'b', label: 'Shanghai' },

package/src/Radio/index.en-US.md

@@ -54,4 +54,6 @@ Radio button for selecting one option from a set of options.
 | disabled | `boolean` | Disable all options | - |
 | buttonStyle | `'outline' \| 'solid' \| 'cornermark'` | Button style | - |
 | options | `Array<RadioProps & { label: React.ReactNode }>` | Options in configuration form | - |
+| toggleable | `boolean` | Whether selection can be toggled (click again to deselect) | - |
+| gap | `number` | Set the interval between radios | - |
 | onChange | `(value: string, event: React.ChangeEvent<HTMLInputElement>) => void` | Callback when value changes | - |

package/src/Radio/index.zh-CN.md

@@ -54,4 +54,6 @@ toc: 'content'
 | disabled | `boolean` | 是否禁用所有选项 | - |
 | buttonStyle | `'outline' \| 'solid' \| 'cornermark'` | 按钮风格 | - |
 | options | `Array<RadioProps & { label: React.ReactNode }>` | 选项，以配置形式 | - |
+| toggleable | `boolean` | 是否允许切换选中状态（再次点击取消选中） | - |
+| gap | `number` | 设置单选框之间的间距 | - |
 | onChange | `(value: string, event: React.ChangeEvent<HTMLInputElement>) => void` | 值改变时的回调 | - |

package/src/Radio/interface.ts

@@ -96,6 +96,10 @@ export interface RadioGroupProps {
    * Whether to toggle checked state
    */
   toggleable?: boolean;
+  /**
+   * Set the interval between radios
+   * */
+  gap?: number;
   /**
    * Callback when value changes
    */

package/src/Radio/radio-group.tsx

@@ -22,6 +22,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
     const {
       prefixCls = 'yee-radio-group',
       className,
+      style,
       name = uid,
       value,
       defaultValue,
@@ -29,6 +30,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
       buttonStyle,
       disabled,
       size,
+      gap,
       onChange,
       ...rest
     } = props;
@@ -43,6 +45,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
       {
         [`${prefixCls}-${buttonStyle}`]: buttonStyle,
         [`${prefixCls}-${size}`]: size,
+        [`${prefixCls}-with-gap`]: gap,
       },
       className,
     );
@@ -53,7 +56,12 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
     };
 
     return (
-      <div className={cls} ref={ref} role="radiogroup">
+      <div
+        className={cls}
+        style={{ ...style, gap: gap }}
+        ref={ref}
+        role="radiogroup"
+      >
         <GroupCtx.Provider
           value={{ name, buttonStyle, onChange: handleChange }}
         >

package/src/Radio/radio.tsx

@@ -16,6 +16,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
       prefixCls = 'yee-radio',
       className,
       classNames,
+      style,
       styles,
       label,
       children,
@@ -66,7 +67,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
     );
 
     return (
-      <label className={cls} onClick={handleClick}>
+      <label className={cls} style={style} onClick={handleClick}>
         <span
           className={clsx(prefixCls, {
             [`${prefixCls}-disabled`]: disabled,

package/src/Radio/style/index.less

@@ -9,9 +9,17 @@
     gap: var(--yee-radio-group-gap);
 
     &-small {
+      @{pls}-button-wrapper {
+        font-size: var(--yee-radio-font-small-size);
+        padding: var(--yee-radio-small-padding);
+      }
     }
 
     &-large {
+      @{pls}-button-wrapper {
+        font-size: var(--yee-radio-font-large-size);
+        padding: var(--yee-radio-large-padding);
+      }
     }
 
     &-solid {
@@ -55,7 +63,7 @@
           bottom: 0;
           border-color: transparent;
           border-style: solid;
-          border-width: var(--yee-radio-cornermark-border-width);
+          border-width: calc(var(--yee-radio-cornermark-border-width) / 3 * 2);
           border-right-color: var(--yee-radio-inner-checked-border-color);
           border-bottom-color: var(--yee-radio-inner-checked-border-color);
           content: '';
@@ -64,10 +72,10 @@
         &::before {
           position: absolute;
           z-index: 1;
-          right: 5px;
-          top: 14px;
-          width: 4px;
-          height: 8px;
+          right: 3px;
+          top: 18px;
+          width: 3px;
+          height: 7px;
           border: 2px solid #fff;
           border-width: 0 2px 2px 0;
           transform: rotate(45deg);
@@ -81,6 +89,12 @@
         margin-left: -1px;
       }
     }
+
+    &-with-gap {
+      @{pls}-button-wrapper {
+        border-radius: var(--yee-radio-button-wrapper-border-radius);
+      }
+    }
   }
 
   &-wrapper {

package/src/Segmented/demo/basic.tsx

@@ -0,0 +1,24 @@
+import { Segmented, Space } from '@rainbow-oh/yee-c';
+import React, { useState } from 'react';
+
+export default () => {
+  const [value, setValue] = useState<string | number>('daily');
+
+  return (
+    <Space direction="vertical">
+      <Segmented
+        options={[
+          { label: 'Daily', value: 'daily' },
+          { label: 'Weekly', value: 'weekly' },
+          { label: 'Monthly', value: 'monthly' },
+        ]}
+        value={value}
+        onChange={setValue}
+      />
+
+      <Segmented options={['List', 'Table', 'Chart']} defaultValue="List" />
+
+      <div>Selected: {value}</div>
+    </Space>
+  );
+};

package/src/Segmented/demo/block.tsx

@@ -0,0 +1,17 @@
+import { Segmented } from '@rainbow-oh/yee-c';
+import { LayoutGrid, List } from 'lucide-react';
+import React from 'react';
+
+export default () => (
+  <div style={{ width: 480 }}>
+    <Segmented
+      block
+      defaultValue="list"
+      options={[
+        { label: 'List', value: 'list', icon: <List size={16} /> },
+        { label: 'Grid', value: 'grid', icon: <LayoutGrid size={16} /> },
+        { label: 'Detail', value: 'detail' },
+      ]}
+    />
+  </div>
+);