@rainbow-oh/yee-c 0.2.0 → 0.4.0

package/src/Segmented/demo/disabled.tsx

@@ -0,0 +1,18 @@
+import { Segmented } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+export default () => (
+  <>
+    <Segmented
+      options={[
+        { label: 'A', value: 'a' },
+        { label: 'B', value: 'b', disabled: true },
+        { label: 'C', value: 'c' },
+      ]}
+      defaultValue="a"
+    />
+    <br />
+    <br />
+    <Segmented disabled options={['A', 'B', 'C']} defaultValue="A" />
+  </>
+);

package/src/Segmented/demo/size.tsx

@@ -0,0 +1,10 @@
+import { Segmented, Space } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+export default () => (
+  <Space direction="vertical">
+    <Segmented size="small" options={['Small', 'B', 'C']} />
+    <Segmented options={['Default', 'B', 'C']} />
+    <Segmented size="large" options={['Large', 'B', 'C']} />
+  </Space>
+);

package/src/Segmented/demo/variant.tsx

@@ -0,0 +1,28 @@
+import { Segmented, Space } from '@rainbow-oh/yee-c';
+import { LayoutGrid, List } from 'lucide-react';
+import React from 'react';
+
+export default () => (
+  <Space direction="vertical">
+    <Space block>
+      <Segmented options={['Daily', 'Weekly', 'Monthly']} />
+      <Segmented variant="pill" options={['Daily', 'Weekly', 'Monthly']} />
+    </Space>
+    <Space block>
+      <Segmented variant="pill" size="small" options={['Small', 'Default', 'Large']} />
+      <Segmented variant="pill" size="large" options={['Small', 'Default', 'Large']} />
+    </Space>
+    <div style={{ width: 480 }}>
+      <Segmented
+        variant="pill"
+        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>
+  </Space>
+);

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

@@ -0,0 +1,49 @@
+---
+category: Components
+title: Segmented
+subtitle: Segmented
+group:
+  title: Data Entry
+  order: 3
+toc: 'content'
+---
+
+# Segmented
+
+Displays a group of mutually exclusive options, with the selected item highlighted by a sliding thumb. Commonly used for view/mode switching.
+
+## Code Demo
+
+<code src="./demo/basic.tsx" title="Basic" description="Basic usage, supports controlled/uncontrolled, options accept config objects or primitive shorthand"></code>
+<code src="./demo/disabled.tsx" title="Disabled" description="Disable a single option or the whole group"></code>
+<code src="./demo/size.tsx" title="Size" description="small / default / large"></code>
+<code src="./demo/block.tsx" title="Block & Icon" description="block fills the container width, options can carry icons"></code>
+<code src="./demo/variant.tsx" title="Variant" description="pill style: selected item highlighted as a colored capsule, no container background"></code>
+
+## API
+
+### SegmentedProps
+
+| Property | Type | Description | Default |
+| --- | --- | --- | --- |
+| prefixCls | `string` | Custom class name prefix | - |
+| className | `string` | Custom root class name | - |
+| style | `React.CSSProperties` | Custom root style | - |
+| classNames | `Partial<Record<'item' \| 'thumb', string>>` | Semantic structure class names | - |
+| styles | `Partial<Record<'item' \| 'thumb', React.CSSProperties>>` | Semantic structure styles | - |
+| options | `Array<SegmentedOption>` | Options, supports config objects or `string \| number` shorthand | - |
+| value | `string \| number` | Controlled selected value | - |
+| defaultValue | `string \| number` | Default selected value | - |
+| onChange | `(value: string \| number) => void` | Callback when selected value changes | - |
+| disabled | `boolean` | Whether to disable all options | - |
+| size | `'small' \| 'default' \| 'large'` | Size | - |
+| variant | `'default' \| 'pill'` | Visual style variant, `pill` renders a capsule style | `default` |
+| block | `boolean` | Whether to fill the container width, options share the space equally | - |
+| name | `string` | Name of the underlying radio input, for form grouping | - |
+
+### SegmentedOption
+
+| Type | Description |
+| --- | --- |
+| `SegmentedLabeledOption` | `{ label?: ReactNode; value: string \| number; disabled?: boolean; icon?: ReactNode; className?: string }` |
+| `SegmentedRawOption` | `string \| number`, shorthand form, label is the value cast to string |

package/src/Segmented/index.ts

@@ -0,0 +1,12 @@
+import InternalSegmented from './segmented';
+
+export type {
+  SegmentedOption,
+  SegmentedLabeledOption,
+  SegmentedRawOption,
+  SegmentedSemanticDOM,
+  SegmentedValue,
+  SegmentedProps,
+} from './interface';
+
+export default InternalSegmented;

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

@@ -0,0 +1,49 @@
+---
+category: Components
+title: Segmented
+subtitle: 分段选择器
+group:
+  title: 数据录入
+  order: 3
+toc: 'content'
+---
+
+# Segmented 分段选择器
+
+展示一组互斥选项，选中项以高亮滑块（thumb）跟随切换，常用于视图切换、模式切换等场景。
+
+## 代码演示
+
+<code src="./demo/basic.tsx" title="基础用法" description="Segmented 的基础用法，支持受控与非受控，options 支持配置对象或原始值简写"></code>
+<code src="./demo/disabled.tsx" title="禁用" description="禁用单个选项或整组"></code>
+<code src="./demo/size.tsx" title="尺寸" description="small / default / large 三种尺寸"></code>
+<code src="./demo/block.tsx" title="撑满与图标" description="block 撑满容器宽度，选项可带图标"></code>
+<code src="./demo/variant.tsx" title="变体" description="pill 胶囊风格：选中项以主色胶囊高亮，容器无底色"></code>
+
+## API
+
+### SegmentedProps
+
+| 属性名 | 类型 | 描述 | 默认值 |
+| --- | --- | --- | --- |
+| prefixCls | `string` | 自定义类名前缀 | - |
+| className | `string` | 自定义根类名 | - |
+| style | `React.CSSProperties` | 自定义根样式 | - |
+| classNames | `Partial<Record<'item' \| 'thumb', string>>` | 语义化结构类名 | - |
+| styles | `Partial<Record<'item' \| 'thumb', React.CSSProperties>>` | 语义化结构样式 | - |
+| options | `Array<SegmentedOption>` | 选项，支持配置对象或 `string \| number` 简写 | - |
+| value | `string \| number` | 受控选中值 | - |
+| defaultValue | `string \| number` | 默认选中值 | - |
+| onChange | `(value: string \| number) => void` | 值改变时的回调 | - |
+| disabled | `boolean` | 是否禁用所有选项 | - |
+| size | `'small' \| 'default' \| 'large'` | 尺寸 | - |
+| variant | `'default' \| 'pill'` | 视觉风格变体，`pill` 为胶囊药丸风格 | `default` |
+| block | `boolean` | 是否撑满容器宽度，选项等分 | - |
+| name | `string` | 底层 radio input 的 name，用于表单分组 | - |
+
+### SegmentedOption
+
+| 类型 | 描述 |
+| --- | --- |
+| `SegmentedLabeledOption` | `{ label?: ReactNode; value: string \| number; disabled?: boolean; icon?: ReactNode; className?: string }` |
+| `SegmentedRawOption` | `string \| number`，简写形式，label 取值转字符串 |

package/src/Segmented/interface.ts

@@ -0,0 +1,92 @@
+import type { DataAttributeProps } from '../utils/types';
+
+export type SegmentedValue = string | number;
+
+export type SegmentedSemanticDOM = 'item' | 'thumb';
+
+export interface SegmentedLabeledOption {
+  /**
+   * Custom item class name
+   */
+  className?: string;
+  /**
+   * Item label
+   */
+  label?: React.ReactNode;
+  /**
+   * Item value
+   */
+  value: SegmentedValue;
+  /**
+   * Whether the item is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Item icon
+   */
+  icon?: React.ReactNode;
+}
+
+export type SegmentedRawOption = SegmentedValue;
+
+export type SegmentedOption = SegmentedLabeledOption | SegmentedRawOption;
+
+export interface SegmentedProps extends DataAttributeProps {
+  /**
+   * Custom prefix class name
+   */
+  prefixCls?: string;
+  /**
+   * Custom root class name
+   */
+  className?: string;
+  /**
+   * Custom root style
+   */
+  style?: React.CSSProperties;
+  /**
+   * Semantic structure class names
+   */
+  classNames?: Partial<Record<SegmentedSemanticDOM, string>>;
+  /**
+   * Semantic structure styles
+   */
+  styles?: Partial<Record<SegmentedSemanticDOM, React.CSSProperties>>;
+  /**
+   * Options, supports config objects or primitive shorthand (string/number)
+   */
+  options?: SegmentedOption[];
+  /**
+   * Controlled selected value
+   */
+  value?: SegmentedValue;
+  /**
+   * Default selected value
+   */
+  defaultValue?: SegmentedValue;
+  /**
+   * Callback when selected value changes
+   */
+  onChange?: (value: SegmentedValue) => void;
+  /**
+   * Whether to disable all options
+   */
+  disabled?: boolean;
+  /**
+   * Size
+   */
+  size?: 'small' | 'default' | 'large';
+  /**
+   * Visual style variant. `pill` renders the selected item as a colored capsule with no container background
+   * @default default
+   */
+  variant?: 'default' | 'pill';
+  /**
+   * Whether to fill the container width, options share the space equally
+   */
+  block?: boolean;
+  /**
+   * Group name for the underlying radio inputs
+   */
+  name?: string;
+}

package/src/Segmented/segmented.tsx

@@ -0,0 +1,136 @@
+import clsx from 'clsx';
+import React, { useContext, useId, useMemo } from 'react';
+import { motion } from 'motion/react';
+import { GlobalContext } from '../Config-Provider';
+import useMergedState from '../hooks/useMergedState';
+import mergeContextToProps from '../utils/mergeContextToProps';
+import type {
+  SegmentedLabeledOption,
+  SegmentedOption,
+  SegmentedProps,
+  SegmentedValue,
+} from './interface';
+
+import './style/index.less';
+
+const normalizeOption = (
+  option: SegmentedOption,
+): SegmentedLabeledOption => {
+  if (typeof option === 'string' || typeof option === 'number') {
+    return { label: String(option), value: option };
+  }
+  return option;
+};
+
+const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
+  (baseprops, ref) => {
+    const { segmented } = useContext(GlobalContext);
+    const props = mergeContextToProps<SegmentedProps>(baseprops, segmented);
+
+    const uid = useId();
+
+    const {
+      prefixCls = 'yee-segmented',
+      className,
+      style,
+      classNames,
+      styles,
+      options = [],
+      value,
+      defaultValue,
+      disabled,
+      size,
+      variant = 'default',
+      block,
+      name = uid,
+      onChange,
+      ...rest
+    } = props;
+
+    const items = useMemo(
+      () => options.map(normalizeOption),
+      [options],
+    );
+
+    const firstValue = items[0]?.value;
+
+    const [mergedValue, setMergedValue] = useMergedState<
+      SegmentedValue | undefined
+    >(firstValue, {
+      value,
+      defaultValue,
+    });
+
+    const cls = clsx(
+      prefixCls,
+      {
+        [`${prefixCls}-${size}`]: size,
+        [`${prefixCls}-${variant}`]: variant && variant !== 'default',
+        [`${prefixCls}-block`]: block,
+        [`${prefixCls}-disabled`]: disabled,
+      },
+      className,
+    );
+
+    const handleChange = (itemValue: SegmentedValue) => {
+      setMergedValue(itemValue);
+      onChange?.(itemValue);
+    };
+
+    return (
+      <div {...rest} ref={ref} className={cls} style={style} role="radiogroup">
+        {items.map((item) => {
+          const selected = item.value === mergedValue;
+          const itemDisabled = disabled || item.disabled;
+          return (
+            <label
+              key={item.value}
+              className={clsx(`${prefixCls}-item`, item.className, {
+                [`${prefixCls}-item-selected`]: selected,
+                [`${prefixCls}-item-disabled`]: itemDisabled,
+              })}
+            >
+              {selected ? (
+                <motion.span
+                  layoutId={`${prefixCls}-thumb-${uid}`}
+                  className={clsx(`${prefixCls}-thumb`, classNames?.thumb)}
+                  style={styles?.thumb}
+                  transition={{
+                    type: 'spring',
+                    visualDuration: 0.3,
+                    bounce: 0.2,
+                  }}
+                />
+              ) : null}
+              <span className={`${prefixCls}-item-inner`}>
+                {item.icon ? (
+                  <span className={`${prefixCls}-item-icon`}>
+                    {item.icon}
+                  </span>
+                ) : null}
+                {item.label !== undefined && item.label !== null ? (
+                  <span className={`${prefixCls}-item-label`}>
+                    {item.label}
+                  </span>
+                ) : null}
+              </span>
+              <input
+                type="radio"
+                className={`${prefixCls}-input`}
+                name={name}
+                value={item.value}
+                checked={selected}
+                disabled={itemDisabled}
+                onChange={() => handleChange(item.value)}
+              />
+            </label>
+          );
+        })}
+      </div>
+    );
+  },
+);
+
+Segmented.displayName = 'Segmented';
+
+export default Segmented;

package/src/Segmented/style/index.less

@@ -0,0 +1,128 @@
+@pls: .yee-segmented;
+
+@{pls} {
+  display: inline-flex;
+  box-sizing: border-box;
+  padding: var(--yee-segmented-padding);
+  border-radius: var(--yee-segmented-border-radius);
+  background-color: var(--yee-segmented-bg-color);
+
+  &-block {
+    display: flex;
+    width: 100%;
+
+    @{pls}-item {
+      flex: 1;
+      justify-content: center;
+    }
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+  }
+
+  &-item {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: var(--yee-segmented-item-padding);
+    border-radius: var(--yee-segmented-item-border-radius);
+    font-size: var(--yee-segmented-font-size);
+    color: var(--yee-segmented-item-color);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition: color var(--yee-segmented-transition-duration) linear;
+
+    &:hover:not(&-disabled):not(&-selected) {
+      color: var(--yee-segmented-item-hover-color);
+    }
+  }
+
+  &-item-inner {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--yee-segmented-item-gap);
+  }
+
+  &-item-icon {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &-item-selected {
+    color: var(--yee-segmented-item-selected-color);
+    cursor: default;
+  }
+
+  &-item-disabled {
+    color: var(--yee-segmented-item-disabled-color);
+    cursor: not-allowed;
+  }
+
+  &-thumb {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    border-radius: var(--yee-segmented-thumb-border-radius);
+    background-color: var(--yee-segmented-thumb-bg-color);
+    box-shadow: var(--yee-segmented-thumb-box-shadow);
+  }
+
+  &-input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+
+  &-item:has(&-input:focus-visible) {
+    box-shadow: 0 0 0 2px var(--yee-primary-color);
+  }
+
+  // 变体：胶囊风格，选中项以主色胶囊高亮，容器无底色
+  &-pill {
+    padding: 0;
+    background-color: transparent;
+    gap: var(--yee-segmented-item-gap);
+
+    @{pls}-item {
+      border-radius: 999px;
+    }
+
+    @{pls}-item-selected {
+      color: var(--yee-segmented-pill-color, #fff);
+    }
+
+    @{pls}-thumb {
+      border-radius: 999px;
+      background-color: var(
+        --yee-segmented-pill-bg-color,
+        var(--yee-primary-color)
+      );
+      box-shadow: none;
+    }
+  }
+
+  &-small {
+    @{pls}-item {
+      padding: var(--yee-segmented-item-small-padding);
+      font-size: var(--yee-segmented-font-small-size);
+    }
+  }
+
+  &-large {
+    @{pls}-item {
+      padding: var(--yee-segmented-item-large-padding);
+      font-size: var(--yee-segmented-font-large-size);
+    }
+  }
+}

package/src/Spin/spin.tsx

@@ -55,6 +55,7 @@ const Spin: FC<SpinProps> = (baseprops) => {
         styles={styles}
         size={size}
         variant={variant}
+        color={color}
       />
       {tip && (
         <span

package/src/Steps/step.tsx

@@ -64,7 +64,7 @@ const Step: React.FC<StepProps> = (props) => {
 
     return index < current ? (
       <span className={`${prefixCls}-item-serial ${prefixCls}-item-icon-check`}>
-        <Check />
+        <Check size={18} strokeWidth={3} />
       </span>
     ) : (
       <span className={`${prefixCls}-item-serial`}>{index + 1}</span>

package/src/Steps/style/index.less

@@ -142,7 +142,7 @@
         background-color: var(--yee-steps-serial-done-bg-color, #fff);
         background-clip: padding-box;
         border-color: var(--yee-steps-serial-done-border-color, #1890ff);
-        color: var(--yee-steps-serial-done-color, #1890ff);
+        color: var(--yee-steps-step-done-color);
       }
 
       @{pls}-item-title {
@@ -283,9 +283,15 @@
       margin-bottom: 8px;
       padding-left: 0;
 
+      &-title {
+        &::after {
+          display: none;
+        }
+      }
+
       &-content {
         align-items: flex-start;
-        margin-left: 8px;
+        margin-left: 12px;
       }
 
       &-icon {

package/src/Switch/demo/content.tsx

@@ -4,11 +4,21 @@ import React from 'react';
 export default () => {
   return (
     <Space direction="vertical">
-      <Switch checkedChildren="ON" unCheckedChildren="OFF" />
-
-      <Switch checkedChildren="On" unCheckedChildren="Off" />
-
-      <Switch checkedChildren="✅" unCheckedChildren="❌" />
+      <Switch
+        checkedChildren="ON"
+        unCheckedChildren="OFF"
+        style={{ width: 60 }}
+      />
+      <Switch
+        checkedChildren="On"
+        unCheckedChildren="OFF"
+        style={{ width: 60 }}
+      />
+      <Switch
+        checkedChildren="✅"
+        unCheckedChildren="❌"
+        style={{ width: 48 }}
+      />
     </Space>
   );
 };

package/src/Switch/style/index.less

@@ -15,6 +15,10 @@
   cursor: pointer;
   transition: background 0.2s linear;
 
+  &-spin {
+    position: absolute;
+  }
+
   &-handle {
     position: absolute;
     top: var(--yee-switch-handle-top);
@@ -67,6 +71,12 @@
         var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
       );
     }
+
+    @{pls}-spin {
+      inset-inline-end: calc(
+        var(--m-switch-handle-size) + var(--yee-switch-handle-offset)
+      );
+    }
   }
 
   &-unchecked {
@@ -77,6 +87,12 @@
         var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
       );
     }
+
+    @{pls}-spin {
+      padding-inline-start: calc(
+        var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
+      );
+    }
   }
 
   --m-switch-handle-size: var(--yee-switch-handle-size);

package/src/Switch/switch.tsx

@@ -58,7 +58,7 @@ const Switch = (baseprops: SwitchProps) => {
       role="switch"
       aria-checked={mergedChecked}
       className={cls}
-      disabled={disabled}
+      disabled={disabled || loading}
       onClick={onClick}
       style={style}
     >
@@ -71,11 +71,19 @@ const Switch = (baseprops: SwitchProps) => {
           bounce: 0.2,
         }}
       >
-        {loading ? (
-          <Spin size="small" />
-        ) : (
-          <span className={clsx(`${prefixCls}-handle-inner`)}></span>
-        )}
+        {/* {loading ? (
+          
+        ) : ( */}
+        <span className={clsx(`${prefixCls}-handle-inner`)}>
+          {loading ? (
+            <Spin
+              size="small"
+              className={`${prefixCls}-spin`}
+              color={checked ? '#fff' : undefined}
+            />
+          ) : null}
+        </span>
+        {/* )} */}
       </motion.span>
       <span
         className={clsx(`${prefixCls}-inner`, classNames?.inner)}

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

@@ -38,6 +38,7 @@ A table displays rows of data.
 | columns | `ColumnProps[]` | Table column configuration | - |
 | children | `Array<React.ReactElement<ColumnProps>> | React.ReactElement<ColumnProps>` | Children elements | - |
 | locale | `Record<string, string>` | Locale messages | - |
+| noData | `React.ReactNode` | Content displayed when no data is available | - |
 | dataSource | `Array<Record<string, any>>` | Data source | - |
 | footer | `React.ReactNode \| (() => React.ReactNode)` | Table footer | - |
 | loading | `boolean` | Loading state | - |