@rainbow-oh/yee-c 0.3.0 → 0.4.0

package/package.json

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

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/Menu/style/index.less

@@ -30,6 +30,7 @@
   // -------- item --------
   &-item {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     box-sizing: border-box;
     width: 100%;
@@ -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/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

@@ -18,6 +18,7 @@ Displays a group of mutually exclusive options, with the selected item highlight
 <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
 
@@ -36,6 +37,7 @@ Displays a group of mutually exclusive options, with the selected item highlight
 | 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 | - |
 

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

@@ -18,6 +18,7 @@ toc: 'content'
 <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
 
@@ -36,6 +37,7 @@ toc: 'content'
 | onChange | `(value: string \| number) => void` | 值改变时的回调 | - |
 | disabled | `boolean` | 是否禁用所有选项 | - |
 | size | `'small' \| 'default' \| 'large'` | 尺寸 | - |
+| variant | `'default' \| 'pill'` | 视觉风格变体，`pill` 为胶囊药丸风格 | `default` |
 | block | `boolean` | 是否撑满容器宽度，选项等分 | - |
 | name | `string` | 底层 radio input 的 name，用于表单分组 | - |
 

package/src/Segmented/interface.ts

@@ -76,6 +76,11 @@ export interface SegmentedProps extends DataAttributeProps {
    * 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
    */

package/src/Segmented/segmented.tsx

@@ -40,6 +40,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
       defaultValue,
       disabled,
       size,
+      variant = 'default',
       block,
       name = uid,
       onChange,
@@ -64,6 +65,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
       prefixCls,
       {
         [`${prefixCls}-${size}`]: size,
+        [`${prefixCls}-${variant}`]: variant && variant !== 'default',
         [`${prefixCls}-block`]: block,
         [`${prefixCls}-disabled`]: disabled,
       },

package/src/Segmented/style/index.less

@@ -88,6 +88,30 @@
     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);

package/src/Tag/demo/variant.tsx

@@ -0,0 +1,47 @@
+import { Space, Tag } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+export default () => {
+  return (
+    <Space direction="vertical">
+      <Space block>
+        <Tag variant="filled">Filled</Tag>
+        <Tag variant="solid">Solid</Tag>
+        <Tag variant="outlined">Outlined</Tag>
+      </Space>
+      <Space block>
+        <Tag variant="filled" status="success">
+          Success
+        </Tag>
+        <Tag variant="solid" status="success">
+          Success
+        </Tag>
+        <Tag variant="outlined" status="success">
+          Success
+        </Tag>
+      </Space>
+      <Space block>
+        <Tag variant="filled" status="warning">
+          Warning
+        </Tag>
+        <Tag variant="solid" status="warning">
+          Warning
+        </Tag>
+        <Tag variant="outlined" status="warning">
+          Warning
+        </Tag>
+      </Space>
+      <Space block>
+        <Tag variant="filled" status="error">
+          Error
+        </Tag>
+        <Tag variant="solid" status="error">
+          Error
+        </Tag>
+        <Tag variant="outlined" status="error">
+          Error
+        </Tag>
+      </Space>
+    </Space>
+  );
+};

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

@@ -16,6 +16,7 @@ Tag for categorizing or markup.
 
 <code src="./demo/basic.tsx" title="Basic" description="Basic usage of Tag"></code>
 <code src="./demo/type.tsx" title="Type" description="Different types of Tag"></code>
+<code src="./demo/variant.tsx" title="Variant" description="Three tag styles: filled, solid, outlined"></code>
 <code src="./demo/closable.tsx" title="Closable" description="Closable Tag"></code>
 <code src="./demo/size.tsx" title="Size" description="Different sizes of Tag"></code>
 <code src="./demo/checkable.tsx" title="Checkable" description="Checkable Tag"></code>
@@ -37,6 +38,7 @@ Tag for categorizing or markup.
 | closable | `boolean \| React.ReactNode` | Whether closable or custom close icon | - |
 | status | `TagType` | Built-in status | - |
 | dashed | `boolean` | Whether dashed border | - |
+| variant | `'filled' \| 'solid' \| 'outlined'` | Tag style variant | `filled` |
 | size | `'small' \| 'default' \| 'large'` | Size | `default` |
 | icon | `React.ReactNode` | Icon | - |
 | checkable | `boolean` | Whether checkable | - |

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

@@ -16,6 +16,7 @@ toc: 'content'
 
 <code src="./demo/basic.tsx" title="基础用法" description="Tag的基础用法"></code>
 <code src="./demo/type.tsx" title="类型" description="不同类型的标签"></code>
+<code src="./demo/variant.tsx" title="变体" description="三种风格的标签：filled、solid、outlined"></code>
 <code src="./demo/closable.tsx" title="可关闭" description="可关闭的标签"></code>
 <code src="./demo/size.tsx" title="尺寸" description="不同尺寸的标签"></code>
 <code src="./demo/checkable.tsx" title="可选择" description="可选择的标签"></code>
@@ -37,6 +38,7 @@ toc: 'content'
 | closable | `boolean \| React.ReactNode` | 是否可关闭，也可自定义关闭图标 | - |
 | status | `TagType` | 内置状态 | - |
 | dashed | `boolean` | 是否为虚线 | - |
+| variant | `'filled' \| 'solid' \| 'outlined'` | 标签风格变体 | `filled` |
 | size | `'small' \| 'default' \| 'large'` | 尺寸 | `default` |
 | icon | `React.ReactNode` | 设置图标 | - |
 | checkable | `boolean` | 是否可选中 | - |

package/src/Tag/interface.ts

@@ -59,6 +59,11 @@ export interface TagProps extends DataAttributeProps {
    * Whether checkable
    */
   checkable?: boolean;
+  /**
+   * tag variant
+   * @default filled
+   * */
+  variant?: 'filled' | 'solid' | 'outlined';
   /**
    * Set checked state
    */

package/src/Tag/style/index.less

@@ -8,45 +8,128 @@
   white-space: nowrap;
   height: var(--yee-tag-height);
   padding: var(--yee-tag-padding);
-  color: var(--yee-tag-color);
   font-size: var(--yee-tag-font-size);
   line-height: var(--yee-tag-line-height);
-  background-color: var(--yee-tag-item-bg-color);
   background-clip: padding-box;
   border: var(--yee-tag-border-width) solid var(--yee-tag-border-color);
   border-radius: var(--yee-tag-border-radius);
 
-  &-info {
-    color: var(--yee-tag-info-color);
-    background-color: var(--yee-tag-info-bg-color);
-    border-color: var(--yee-tag-info-border-color);
-  }
+  // ============ 变体 variant ============
+  // filled：浅色底 + 彩色字（默认）
+  &-filled {
+    color: var(--yee-tag-color);
+    background-color: var(--yee-tag-item-bg-color);
+    border-color: var(--yee-tag-border-color);
 
-  &-success {
-    color: var(--yee-tag-success-color);
-    background-color: var(--yee-tag-success-bg-color);
-    border-color: var(--yee-tag-success-border-color);
-  }
+    &@{pls}-info {
+      color: var(--yee-tag-info-color);
+      background-color: var(--yee-tag-info-bg-color);
+      border-color: var(--yee-tag-info-border-color);
+    }
+
+    &@{pls}-success {
+      color: var(--yee-tag-success-color);
+      background-color: var(--yee-tag-success-bg-color);
+      border-color: var(--yee-tag-success-border-color);
+    }
+
+    &@{pls}-warning {
+      color: var(--yee-tag-warning-color);
+      background-color: var(--yee-tag-warning-bg-color);
+      border-color: var(--yee-tag-warning-border-color);
+    }
 
-  &-warning {
-    color: var(--yee-tag-warning-color);
-    background-color: var(--yee-tag-warning-bg-color);
-    border-color: var(--yee-tag-warning-border-color);
+    &@{pls}-error {
+      color: var(--yee-tag-error-color);
+      background-color: var(--yee-tag-error-bg-color);
+      border-color: var(--yee-tag-error-border-color);
+    }
+
+    &@{pls}-disabled {
+      color: var(--yee-tag-disabled-color);
+      background-color: var(--yee-tag-disabled-bg-color);
+      border-color: var(--yee-tag-disabled-border-color);
+      cursor: not-allowed;
+    }
   }
 
-  &-error {
-    color: var(--yee-tag-error-color);
-    background-color: var(--yee-tag-error-bg-color);
-    border-color: var(--yee-tag-error-border-color);
+  // solid：纯色底 + 白字
+  &-solid {
+    color: var(--yee-tag-solid-color, #fff);
+    background-color: var(--yee-tag-color);
+    border-color: transparent;
+
+    &@{pls}-info {
+      color: var(--yee-tag-solid-color, #fff);
+      background-color: var(--yee-tag-info-color);
+      border-color: transparent;
+    }
+
+    &@{pls}-success {
+      color: var(--yee-tag-solid-color, #fff);
+      background-color: var(--yee-tag-success-color);
+      border-color: transparent;
+    }
+
+    &@{pls}-warning {
+      color: var(--yee-tag-solid-color, #fff);
+      background-color: var(--yee-tag-warning-color);
+      border-color: transparent;
+    }
+
+    &@{pls}-error {
+      color: var(--yee-tag-solid-color, #fff);
+      background-color: var(--yee-tag-error-color);
+      border-color: transparent;
+    }
+
+    &@{pls}-disabled {
+      color: var(--yee-tag-solid-color, #fff);
+      background-color: var(--yee-tag-disabled-color);
+      border-color: transparent;
+      cursor: not-allowed;
+    }
   }
 
-  &-disabled {
-    color: var(--yee-tag-disabled-color);
-    background-color: var(--yee-tag-disabled-bg-color);
-    border-color: var(--yee-tag-disabled-border-color);
-    cursor: not-allowed;
+  // outlined：透明底 + 彩色字 + 彩色描边
+  &-outlined {
+    color: var(--yee-tag-color);
+    background-color: transparent;
+    border-color: var(--yee-tag-border-color);
+
+    &@{pls}-info {
+      color: var(--yee-tag-info-color);
+      background-color: transparent;
+      border-color: var(--yee-tag-info-color);
+    }
+
+    &@{pls}-success {
+      color: var(--yee-tag-success-color);
+      background-color: transparent;
+      border-color: var(--yee-tag-success-color);
+    }
+
+    &@{pls}-warning {
+      color: var(--yee-tag-warning-color);
+      background-color: transparent;
+      border-color: var(--yee-tag-warning-color);
+    }
+
+    &@{pls}-error {
+      color: var(--yee-tag-error-color);
+      background-color: transparent;
+      border-color: var(--yee-tag-error-color);
+    }
+
+    &@{pls}-disabled {
+      color: var(--yee-tag-disabled-color);
+      background-color: transparent;
+      border-color: var(--yee-tag-disabled-color);
+      cursor: not-allowed;
+    }
   }
 
+  // ============ 其他修饰 ============
   &-dashed {
     background-color: var(--yee-tag-item-dashed-bg-color);
     border-style: dashed;

package/src/Tag/tag.tsx

@@ -24,6 +24,7 @@ const Tag = forwardRef(
       icon,
       classNames,
       styles,
+      variant = 'filled',
       onClose,
       onChange,
       ...rest
@@ -37,6 +38,7 @@ const Tag = forwardRef(
 
     const cls = clsx(
       prefixCls,
+      [`${prefixCls}-${variant}`],
       {
         [`${prefixCls}-${status}`]: status,
         [`${prefixCls}-dashed`]: dashed,

package/src/style/color.css

@@ -57,7 +57,7 @@
 
   /* --global-- */
   --yee-global-font-color: var(--yee-text-color);
-  --yee-placeholder-color: var(--yee-text-color-auxiliary);
+  --yee-placeholder-color: var(--yee-text-color-secondary);
   --yee-title-prefix-bg-color: var(--yee-primary-color);
   --yee-remove-icon: var(--yee-text-color-auxiliary);
   --yee-remove-icon-hover: var(--yee-text-color-auxiliary);
@@ -264,8 +264,8 @@
   --yee-menu-item-hover-color: var(--yee-color-option-hover);
   --yee-menu-item-selected-color: var(--yee-color-option-active);
   --yee-menu-item-selected-bg-color: var(--yee-color-option-active-bg);
-  --yee-menu-item-arrow-color: var(--yee-text-color-auxiliary);
-  --yee-menu-item-arrow-hover-color: var(--yee-text-color-auxiliary);
+  --yee-menu-item-arrow-color: var(--yee-text-color);
+  --yee-menu-item-arrow-hover-color: var(--yee-text-color-secondary);
   --yee-menu-item-arrow-selected-color: var(--yee-primary-color);
   --yee-menu-item-bg-color: #fff;
   --yee-menu-item-title-bg-color: #f0f0f0;

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.3.0";
+export const version = "0.4.0";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;