@rainbow-oh/yee-c 0.1.0 → 0.3.0

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/index.en-US.md

@@ -0,0 +1,47 @@
+---
+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>
+
+## 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 | - |
+| 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,47 @@
+---
+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>
+
+## 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'` | 尺寸 | - |
+| 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,87 @@
+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';
+  /**
+   * 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,134 @@
+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,
+      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}-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,104 @@
+@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);
+  }
+
+  &-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/Select/option.tsx

@@ -4,7 +4,7 @@ import React, { useContext } from 'react';
 import { OptionsCtx } from './options';
 
 const Option = (props: any) => {
-  const { label, value, disabled, title } = props;
+  const { label, value, disabled, title, dataTestId } = props;
   const { prefixCls, selectedKeys, focusedKey, onSelect } =
     useContext(OptionsCtx);
 
@@ -37,6 +37,7 @@ const Option = (props: any) => {
       role="option"
       tabIndex={disabled ? undefined : 0}
       title={htmlTitle}
+      data-testid={dataTestId}
     >
       {label}
     </div>

package/src/Select/options.tsx

@@ -16,6 +16,7 @@ const Options = forwardRef((props: any, ref: React.Ref<HTMLDivElement>) => {
     popupStyle,
     selectedKeys,
     focusedKey,
+    dataTestId,
     onSelect,
     ...rest
   } = props;
@@ -37,8 +38,12 @@ const Options = forwardRef((props: any, ref: React.Ref<HTMLDivElement>) => {
         <OptionsCtx.Provider
           value={{ prefixCls, selectedKeys, focusedKey, onSelect }}
         >
-          {options.map((option: any) => (
-            <Option {...option} key={option.value} />
+          {options.map((option: any, index: number) => (
+            <Option
+              {...option}
+              key={option.value}
+              dataTestId={`${dataTestId}-${index}`}
+            />
           ))}
         </OptionsCtx.Provider>
       )}

package/src/Select/select.tsx

@@ -140,6 +140,7 @@ const Select = (baseprops: SelectProps) => {
       options={filteredOpts}
       focusedKey={focusedKey}
       selectedKeys={mergedValue}
+      dataTestId={rest['data-testid']}
       onSelect={handleSelect}
       onClose={() => setOpen(false)}
       ref={popupRef}

package/src/Skeleton/demo/basic.tsx

@@ -1,9 +1,9 @@
-import { Card, Skeleton, Space } from '@rainbow-oh/yee-c';
+import { Card, Skeleton } from '@rainbow-oh/yee-c';
 import React from 'react';
 
 export default () => {
   return (
-    <Space direction="vertical" gap={16} style={{ width: '100%' }}>
+    <div>
       <Card title="Basic Placeholder">
         <Skeleton />
       </Card>
@@ -19,6 +19,6 @@ export default () => {
           paragraph={{ rows: 3, width: ['100%', '80%', '60%'] }}
         />
       </Card>
-    </Space>
+    </div>
   );
 };

package/src/Space/interface.ts

@@ -27,6 +27,10 @@ export interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {
    * Alignment
    */
   align?: 'center' | 'start' | 'end' | 'baseline' | 'flex-start';
+  /***
+   * Justify content
+   * */
+  justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
   /**
    * Whether to take up the entire row
    */

package/src/Space/space.tsx

@@ -14,6 +14,7 @@ const Space = forwardRef<HTMLDivElement, SpaceProps>((baseprops, ref) => {
     gap = 16,
     direction = 'horizontal',
     align = direction === 'horizontal' ? 'center' : undefined,
+    justify,
     wrap,
     className,
     style,
@@ -45,25 +46,47 @@ const Space = forwardRef<HTMLDivElement, SpaceProps>((baseprops, ref) => {
     if (!children) {
       return null;
     }
+
+    const loop = (childs: React.ReactNode[]) => {
+      let res = [] as React.ReactElement[];
+
+      childs.forEach((child, index) => {
+        const isItem =
+          React.isValidElement(child) && (child.type as any).isSpaceItem;
+        const itemClassName = isItem
+          ? (child.props as any).className
+          : undefined;
+        const itemStyle = isItem ? (child.props as any).style : undefined;
+        const itemChildren = isItem ? (child.props as any).children : child;
+
+        if (React.isValidElement(child) && child.type === React.Fragment) {
+          res = res.concat(
+            loop(React.Children.toArray((child.props as any).children)),
+          );
+        } else {
+          res.push(
+            <div
+              className={clsx(
+                `${prefixCls}-item`,
+                classNames?.item,
+                itemClassName,
+              )}
+              style={{ ...styles?.item, ...itemStyle }}
+              key={index}
+            >
+              {itemChildren}
+            </div>,
+          );
+        }
+      });
+      return res;
+    };
+
     const childs = React.Children.toArray(children).filter(
       (child) => child !== null && child !== undefined,
     );
-    return childs.map((child, index) => {
-      const isItem =
-        React.isValidElement(child) && (child.type as any).isSpaceItem;
-      const itemClassName = isItem ? (child.props as any).className : undefined;
-      const itemStyle = isItem ? (child.props as any).style : undefined;
-      const itemChildren = isItem ? (child.props as any).children : child;
-      return (
-        <div
-          className={clsx(`${prefixCls}-item`, classNames?.item, itemClassName)}
-          style={{ ...styles?.item, ...itemStyle }}
-          key={index}
-        >
-          {itemChildren}
-        </div>
-      );
-    });
+
+    return loop(childs);
   };
 
   const packed = pack();
@@ -76,6 +99,7 @@ const Space = forwardRef<HTMLDivElement, SpaceProps>((baseprops, ref) => {
         width: block ? '100%' : undefined,
         gap: gap + 'px',
         alignItems: getAlign(),
+        justifyContent: justify,
         ...style,
       }}
       ref={componentRef}

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/Splitter/demo/basic.tsx

@@ -6,12 +6,12 @@ export default () => {
     <div style={{ height: 300 }}>
       <Splitter>
         <Splitter.Item>
-          <div style={{ padding: 16, backgroundColor: '#f0f0f0' }}>
+          <div style={{ margin: 8, padding: 16, backgroundColor: '#f0f0f0' }}>
             Left Panel
           </div>
         </Splitter.Item>
         <Splitter.Item>
-          <div style={{ padding: 16, backgroundColor: '#e0e0e0' }}>
+          <div style={{ margin: 8, padding: 16, backgroundColor: '#e0e0e0' }}>
             Right Panel
           </div>
         </Splitter.Item>

package/src/Splitter/demo/vertical.tsx

@@ -3,15 +3,29 @@ import React from 'react';
 
 export default () => {
   return (
-    <div style={{ height: 300 }}>
+    <div style={{ height: 500 }}>
       <Splitter layout="vertical">
-        <Splitter.Item>
-          <div style={{ padding: 16, backgroundColor: '#f0f0f0' }}>
+        <Splitter.Item size={250}>
+          <div
+            style={{
+              marginBottom: 8,
+              padding: 16,
+              backgroundColor: '#f0f0f0',
+              height: '100%',
+            }}
+          >
             Top Panel
           </div>
         </Splitter.Item>
-        <Splitter.Item>
-          <div style={{ padding: 16, backgroundColor: '#e0e0e0' }}>
+        <Splitter.Item size={250}>
+          <div
+            style={{
+              marginTop: 8,
+              padding: 16,
+              backgroundColor: '#e0e0e0',
+              height: '100%',
+            }}
+          >
             Bottom Panel
           </div>
         </Splitter.Item>

package/src/Splitter/index.ts

@@ -1,7 +1,11 @@
 import InternalSplitter from './splitter';
 import Item from './splitter-item';
 
-export type { SplitterItemProps, SplitterProps } from './interface';
+export type {
+  SplitterItemProps,
+  PanelRect as SplitterPanelRect,
+  SplitterProps,
+} from './interface';
 
 type SplitterType = typeof InternalSplitter & {
   Item: typeof Item;