@tendaui/components 1.2.4 → 1.3.0

package/badge/_example/size.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Badge } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function Size() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge count={8} size="medium">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={8} size="small">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={88} size="medium">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={88} size="small">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge dot count={1} size="medium">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge dot count={1} size="small">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+    </div>
+  );
+}

package/badge/_example/standalone.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Badge } from "@tendaui/react";
+
+export default function Standalone() {
+  return (
+    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+      <Badge count={8} />
+      <Badge count={88} />
+      <Badge count={888} />
+      <Badge count="new" shape="round" />
+      <Badge dot count={1} />
+    </div>
+  );
+}

package/badge/_example/text-count.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Badge, Button } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function TextCount() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge count="new">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count="hot">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count="NEW">
+        <Button>新品</Button>
+      </Badge>
+    </div>
+  );
+}

package/badge/_example/with-button.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Badge, Button } from "@tendaui/react";
+
+export default function WithButton() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge count={5}>
+        <Button>消息</Button>
+      </Badge>
+      <Badge count={12}>
+        <Button theme="primary">通知</Button>
+      </Badge>
+      <Badge dot count={1}>
+        <Button variant="outline">提醒</Button>
+      </Badge>
+      <Badge count="new" shape="round" color="var(--td-success-color)">
+        <Button theme="success" variant="outline">
+          新功能
+        </Button>
+      </Badge>
+    </div>
+  );
+}

package/button/_example/block.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function Block() {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "12px", width: "300px" }}>
+      <Button block theme="primary">
+        主要按钮
+      </Button>
+      <Button block variant="outline" theme="primary">
+        描边按钮
+      </Button>
+      <Button block variant="dashed">
+        虚线按钮
+      </Button>
+    </div>
+  );
+}

package/button/_example/disabled.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function Disabled() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button disabled>默认禁用</Button>
+      <Button disabled theme="primary">
+        主要禁用
+      </Button>
+      <Button disabled variant="outline" theme="primary">
+        描边禁用
+      </Button>
+      <Button disabled variant="dashed" theme="primary">
+        虚线禁用
+      </Button>
+      <Button disabled variant="text" theme="primary">
+        文字禁用
+      </Button>
+    </div>
+  );
+}

package/button/_example/ghost.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function Ghost() {
+  return (
+    <div style={{ display: "flex", gap: "12px", padding: "24px", flexWrap: "wrap", backgroundColor: "#f5f5f5" }}>
+      <Button ghost theme="default">
+        默认
+      </Button>
+      <Button ghost theme="primary">
+        主要
+      </Button>
+      <Button ghost theme="success">
+        成功
+      </Button>
+      <Button ghost theme="warning">
+        警告
+      </Button>
+      <Button ghost theme="danger">
+        危险
+      </Button>
+    </div>
+  );
+}

package/button/_example/link.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function Link() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button href="https://www.example.com" target="_blank" theme="primary">
+        跳转链接
+      </Button>
+      <Button href="https://www.example.com" target="_blank" variant="text" theme="primary">
+        文字链接
+      </Button>
+    </div>
+  );
+}

package/button/_example/loading.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function Loading() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button loading>加载中</Button>
+      <Button loading theme="primary">
+        加载中
+      </Button>
+      <Button loading variant="outline" theme="primary">
+        加载中
+      </Button>
+      <Button loading variant="dashed" theme="success">
+        加载中
+      </Button>
+    </div>
+  );
+}

package/button/_example/shape.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+import { IconPlus } from "@tendaui/icons";
+
+export default function Shape() {
+  return (
+    <div style={{ display: "flex", gap: "12px", alignItems: "center", flexWrap: "wrap" }}>
+      <Button shape="rectangle" theme="primary">
+        长方形
+      </Button>
+      <Button shape="round" theme="primary">
+        圆角
+      </Button>
+      <Button shape="square" theme="primary" icon={<IconPlus />} />
+      <Button shape="circle" theme="primary" icon={<IconPlus />} />
+    </div>
+  );
+}

package/button/_example/size.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function Size() {
+  return (
+    <div style={{ display: "flex", gap: "12px", alignItems: "center", flexWrap: "wrap" }}>
+      <Button size="small" theme="primary">
+        小按钮
+      </Button>
+      <Button size="medium" theme="primary">
+        中按钮
+      </Button>
+      <Button size="large" theme="primary">
+        大按钮
+      </Button>
+    </div>
+  );
+}

package/button/_example/suffix.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+import { IconDownload, IconSearch } from "@tendaui/icons";
+
+export default function Suffix() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button suffix={<IconDownload />} theme="primary">
+        下载
+      </Button>
+      <Button icon={<IconSearch />} suffix={<IconDownload />} theme="primary">
+        搜索并下载
+      </Button>
+    </div>
+  );
+}

package/button/_example/theme.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function Theme() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button theme="default">默认</Button>
+      <Button theme="primary">主要</Button>
+      <Button theme="success">成功</Button>
+      <Button theme="warning">警告</Button>
+      <Button theme="danger">危险</Button>
+    </div>
+  );
+}

package/button/_example/variant-base.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function VariantBase() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button variant="base" theme="default">
+        默认
+      </Button>
+      <Button variant="base" theme="primary">
+        主要
+      </Button>
+      <Button variant="base" theme="success">
+        成功
+      </Button>
+      <Button variant="base" theme="warning">
+        警告
+      </Button>
+      <Button variant="base" theme="danger">
+        危险
+      </Button>
+    </div>
+  );
+}

package/button/_example/variant-dashed.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function VariantDashed() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button variant="dashed" theme="default">
+        默认
+      </Button>
+      <Button variant="dashed" theme="primary">
+        主要
+      </Button>
+      <Button variant="dashed" theme="success">
+        成功
+      </Button>
+      <Button variant="dashed" theme="warning">
+        警告
+      </Button>
+      <Button variant="dashed" theme="danger">
+        危险
+      </Button>
+    </div>
+  );
+}

package/button/_example/variant-outline.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function VariantOutline() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button variant="outline" theme="default">
+        默认
+      </Button>
+      <Button variant="outline" theme="primary">
+        主要
+      </Button>
+      <Button variant="outline" theme="success">
+        成功
+      </Button>
+      <Button variant="outline" theme="warning">
+        警告
+      </Button>
+      <Button variant="outline" theme="danger">
+        危险
+      </Button>
+    </div>
+  );
+}

package/button/_example/variant-text.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function VariantText() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button variant="text" theme="default">
+        默认
+      </Button>
+      <Button variant="text" theme="primary">
+        主要
+      </Button>
+      <Button variant="text" theme="success">
+        成功
+      </Button>
+      <Button variant="text" theme="warning">
+        警告
+      </Button>
+      <Button variant="text" theme="danger">
+        危险
+      </Button>
+    </div>
+  );
+}

package/checkbox/_example/base.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Checkbox } from "@tendaui/react";
+
+export default function Base() {
+  return (
+    <Checkbox>复选框</Checkbox>
+  );
+}

package/checkbox/_example/controlled.tsx

@@ -0,0 +1,11 @@
+import React, { useState } from "react";
+import { Checkbox } from "@tendaui/react";
+
+export default function Controlled() {
+  const [checked, setChecked] = useState(true);
+  return (
+    <Checkbox checked={checked} onChange={(val) => setChecked(val)}>
+      受控复选框（点击切换）
+    </Checkbox>
+  );
+}

package/checkbox/_example/group-disabled.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Checkbox } from "@tendaui/react";
+
+export default function GroupDisabled() {
+  return (
+    <Checkbox.Group defaultValue={["北京", "深圳"]} disabled>
+      <Checkbox value="北京">北京</Checkbox>
+      <Checkbox value="上海">上海</Checkbox>
+      <Checkbox value="广州">广州</Checkbox>
+      <Checkbox value="深圳">深圳</Checkbox>
+    </Checkbox.Group>
+  );
+}

package/checkbox/_example/group-with-check-all.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+import { Checkbox } from "@tendaui/react";
+
+export default function GroupWithCheckAll() {
+  const [value, setValue] = useState<string[]>(["上海"]);
+  const handleValueChange = (val) => {
+    console.log(val);
+    setValue(val);
+  };
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div>当前选中：{value.filter((item) => item).join(", ")}</div>
+      <Checkbox.Group value={value} onChange={(val) => handleValueChange(val)}>
+        <Checkbox checkAll>全选</Checkbox>
+        <Checkbox value="北京">北京</Checkbox>
+        <Checkbox value="上海">上海</Checkbox>
+        <Checkbox value="广州">广州</Checkbox>
+        <Checkbox value="深圳">深圳</Checkbox>
+      </Checkbox.Group>
+    </div>
+  );
+}

package/checkbox/_example/group-with-max.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import { Checkbox } from "@tendaui/react";
+
+export default function GroupWithMax() {
+  const [value, setValue] = useState<string[]>(["北京"]);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div>最多选择 2 项，当前选中：{value.join(", ") || "无"}</div>
+      <Checkbox.Group value={value} onChange={(val) => setValue(val as string[])} max={2}>
+        <Checkbox value="北京">北京</Checkbox>
+        <Checkbox value="上海">上海</Checkbox>
+        <Checkbox value="广州">广州</Checkbox>
+        <Checkbox value="深圳">深圳</Checkbox>
+      </Checkbox.Group>
+    </div>
+  );
+}

package/checkbox/_example/group-with-options.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+import { Checkbox } from "@tendaui/react";
+
+export default function GroupWithOptions() {
+  const [value, setValue] = useState<(string | number)[]>([2]);
+  const options = [
+    { label: "选项一", value: 1 },
+    { label: "选项二", value: 2 },
+    { label: "选项三", value: 3, disabled: true },
+    { label: "选项四", value: 4 }
+  ];
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div>当前选中值：{JSON.stringify(value)}</div>
+      <Checkbox.Group options={options} value={value} onChange={(val) => setValue(val as (string | number)[])} />
+    </div>
+  );
+}

package/checkbox/_example/group.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import { Checkbox } from "@tendaui/react";
+
+export default function Group() {
+  const [value, setValue] = useState<string[]>(["北京"]);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div>当前选中：{value.join(", ") || "无"}</div>
+      <Checkbox.Group value={value} onChange={(val) => setValue(val as string[])}>
+        <Checkbox value="北京">北京</Checkbox>
+        <Checkbox value="上海">上海</Checkbox>
+        <Checkbox value="广州">广州</Checkbox>
+        <Checkbox value="深圳">深圳</Checkbox>
+      </Checkbox.Group>
+    </div>
+  );
+}

package/checkbox/_example/states.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Checkbox } from "@tendaui/react";
+
+export default function States() {
+  return (
+    <div style={{ display: "flex", gap: "16px", flexWrap: "wrap" }}>
+      <Checkbox>未选中项</Checkbox>
+      <Checkbox defaultChecked>选中项</Checkbox>
+      <Checkbox indeterminate>半选状态</Checkbox>
+      <Checkbox disabled>未选禁用项</Checkbox>
+      <Checkbox disabled defaultChecked>
+        选中禁用项
+      </Checkbox>
+      <Checkbox readonly defaultChecked>
+        只读选中项
+      </Checkbox>
+    </div>
+  );
+}

package/color-picker/ColorPicker.tsx

@@ -11,8 +11,18 @@ import useDefaultProps from "../hooks/useDefaultProps";
 
 const ColorPicker: React.FC<ColorPickerProps> = (props) => {
   const baseClassName = useClassName();
-  const { popupProps, clearable, disabled, borderless, inputProps, onChange, onClear, ...panelProps } =
-    useDefaultProps<ColorPickerProps>(props, colorPickerDefaultProps);
+  const {
+    popupProps,
+    clearable,
+    disabled,
+    borderless,
+    inputProps,
+    format,
+    enableAlpha,
+    onChange,
+    onClear,
+    ...panelProps
+  } = useDefaultProps<ColorPickerProps>(props, colorPickerDefaultProps);
   const { overlayClassName, overlayInnerStyle = {}, ...restPopupProps } = popupProps || {};
 
   const [innerValue, setInnerValue] = useControlled(props, "value", onChange);
@@ -40,6 +50,8 @@ const ColorPicker: React.FC<ColorPickerProps> = (props) => {
             {...panelProps}
             clearable={clearable}
             disabled={disabled}
+            format={format}
+            enableAlpha={enableAlpha}
             value={innerValue}
             onChange={(value: string, context: TdColorContext) => setInnerValue(value, context)}
             ref={colorPanelRef}
@@ -53,6 +65,8 @@ const ColorPicker: React.FC<ColorPickerProps> = (props) => {
           disabled={disabled}
           borderless={borderless}
           inputProps={inputProps}
+          format={format}
+          enableAlpha={enableAlpha}
           value={innerValue}
           onChange={setInnerValue}
           onClear={onClear}

package/color-picker/_example/base.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from "react";
+import { ColorPicker } from "@tendaui/react";
+
+export default function Base() {
+  const [color, setColor] = useState("#0052d9");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <ColorPicker format="HEX" value={color} onChange={(v) => setColor(v)} />
+      <div>当前颜色值：{color}</div>
+    </div>
+  );
+}

package/color-picker/_example/borderless.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { ColorPicker } from "@tendaui/react";
+
+export default function Borderless() {
+  return (
+    <div style={{ display: "flex", gap: "24px" }}>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>有边框</div>
+        <ColorPicker defaultValue="#0052d9" />
+      </div>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>无边框</div>
+        <ColorPicker borderless defaultValue="#0052d9" />
+      </div>
+    </div>
+  );
+}

package/color-picker/_example/clearable.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from "react";
+import { ColorPicker } from "@tendaui/react";
+
+export default function Clearable() {
+  const [color, setColor] = useState("#0052d9");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <ColorPicker clearable value={color} onChange={(v) => setColor(v)} onClear={() => setColor("")} />
+      <div>当前颜色值：{color || "(空)"}</div>
+    </div>
+  );
+}

package/color-picker/_example/disabled.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { ColorPicker } from "@tendaui/react";
+
+export default function Disabled() {
+  return (
+    <div style={{ display: "flex", gap: "24px" }}>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>正常状态</div>
+        <ColorPicker defaultValue="#0052d9" />
+      </div>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>禁用状态</div>
+        <ColorPicker disabled defaultValue="#0052d9" />
+      </div>
+    </div>
+  );
+}

package/color-picker/_example/formats.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import { ColorPicker } from "@tendaui/react";
+
+export default function Formats() {
+  const [hexColor, setHexColor] = useState("#0052d9");
+  const [rgbColor, setRgbColor] = useState("rgb(0, 82, 217)");
+  const [hslColor, setHslColor] = useState("hsl(217, 100%, 43%)");
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>HEX 格式</div>
+        <ColorPicker format="HEX" value={hexColor} onChange={(v) => setHexColor(v)} />
+        <div style={{ marginTop: "8px", fontSize: "12px", color: "#999" }}>值：{hexColor}</div>
+      </div>
+
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>RGB 格式</div>
+        <ColorPicker format="RGB" value={rgbColor} onChange={(v) => setRgbColor(v)} />
+        <div style={{ marginTop: "8px", fontSize: "12px", color: "#999" }}>值：{rgbColor}</div>
+      </div>
+
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>HSL 格式</div>
+        <ColorPicker format="HSL" value={hslColor} onChange={(v) => setHslColor(v)} />
+        <div style={{ marginTop: "8px", fontSize: "12px", color: "#999" }}>值：{hslColor}</div>
+      </div>
+    </div>
+  );
+}