@demokit-ui/demokit 0.1.0 → 0.1.2

package/dist/kit/components/form/form/form.examples.js

@@ -0,0 +1,77 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useForm as h } from "react-hook-form";
+import { Form as u, FormField as l, FormItem as t, FormLabel as i, FormControl as m, FormMessage as c, FormDescription as p } from "./form.js";
+import { Input as a } from "../input/input.js";
+import { Textarea as f } from "../textarea/textarea.js";
+import { Button as s } from "../button/button.js";
+function x() {
+  const o = h({
+    defaultValues: { name: "", email: "", note: "" }
+  }), d = (n) => {
+    alert(JSON.stringify(n, null, 2));
+  };
+  return /* @__PURE__ */ e(u, { ...o, children: /* @__PURE__ */ r("form", { onSubmit: o.handleSubmit(d), className: "space-y-4 w-80", children: [
+    /* @__PURE__ */ e(
+      l,
+      {
+        control: o.control,
+        name: "name",
+        rules: { required: "姓名必填" },
+        render: ({ field: n }) => /* @__PURE__ */ r(t, { children: [
+          /* @__PURE__ */ r(i, { children: [
+            "姓名 ",
+            /* @__PURE__ */ e("span", { className: "text-destructive", children: "*" })
+          ] }),
+          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(a, { placeholder: "请输入姓名", ...n }) }),
+          /* @__PURE__ */ e(c, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e(
+      l,
+      {
+        control: o.control,
+        name: "email",
+        rules: {
+          required: "邮箱必填",
+          pattern: { value: /.+@.+\..+/, message: "邮箱格式不正确" }
+        },
+        render: ({ field: n }) => /* @__PURE__ */ r(t, { children: [
+          /* @__PURE__ */ r(i, { children: [
+            "邮箱 ",
+            /* @__PURE__ */ e("span", { className: "text-destructive", children: "*" })
+          ] }),
+          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(a, { type: "email", placeholder: "you@example.com", ...n }) }),
+          /* @__PURE__ */ e(p, { children: "用于接收通知" }),
+          /* @__PURE__ */ e(c, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e(
+      l,
+      {
+        control: o.control,
+        name: "note",
+        render: ({ field: n }) => /* @__PURE__ */ r(t, { children: [
+          /* @__PURE__ */ e(i, { children: "备注" }),
+          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(f, { rows: 3, ...n }) }),
+          /* @__PURE__ */ e(c, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ r("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ e(s, { type: "submit", children: "保存" }),
+      /* @__PURE__ */ e(s, { type: "button", variant: "outline", onClick: () => o.reset(), children: "重置" })
+    ] })
+  ] }) });
+}
+function S() {
+  return /* @__PURE__ */ e("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ r("section", { children: [
+    /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "带校验的完整表单" }),
+    /* @__PURE__ */ e(x, {})
+  ] }) });
+}
+export {
+  x as FormBasic,
+  S as FormShowcase
+};

package/dist/kit/components/form/input/input.examples.d.ts

@@ -0,0 +1,5 @@
+export declare function InputBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function InputTypes(): import("react/jsx-runtime").JSX.Element;
+export declare function InputWithIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function InputStates(): import("react/jsx-runtime").JSX.Element;
+export declare function InputShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/form/input/input.examples.js

@@ -0,0 +1,64 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { RiSearchLine as r } from "@remixicon/react";
+import { Label as c } from "../label/label.js";
+import { Input as s } from "./input.js";
+function a() {
+  return /* @__PURE__ */ t("div", { className: "space-y-1.5 w-80", children: [
+    /* @__PURE__ */ e(c, { htmlFor: "email", children: "邮箱" }),
+    /* @__PURE__ */ e(s, { id: "email", type: "email", placeholder: "you@example.com" })
+  ] });
+}
+function n() {
+  return /* @__PURE__ */ e("div", { className: "w-80 space-y-4", children: [
+    ["text", "文本"],
+    ["password", "密码"],
+    ["number", "数字"],
+    ["url", "URL"]
+  ].map(([i, l]) => /* @__PURE__ */ t("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ e(c, { children: l }),
+    /* @__PURE__ */ e(s, { type: i, placeholder: `${l}输入` })
+  ] }, i)) });
+}
+function d() {
+  return /* @__PURE__ */ t("div", { className: "relative w-80", children: [
+    /* @__PURE__ */ e(r, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" }),
+    /* @__PURE__ */ e(s, { placeholder: "搜索...", className: "ps-8" })
+  ] });
+}
+function o() {
+  return /* @__PURE__ */ t("div", { className: "w-80 space-y-3", children: [
+    /* @__PURE__ */ e(s, { placeholder: "默认" }),
+    /* @__PURE__ */ e(s, { placeholder: "禁用", disabled: !0 }),
+    /* @__PURE__ */ t("div", { children: [
+      /* @__PURE__ */ e(s, { placeholder: "错误态", "aria-invalid": !0, className: "border-destructive focus-visible:ring-destructive/30" }),
+      /* @__PURE__ */ e("div", { className: "text-xs text-destructive mt-1", children: "必填字段" })
+    ] })
+  ] });
+}
+function f() {
+  return /* @__PURE__ */ t("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "基础" }),
+      /* @__PURE__ */ e(a, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "类型" }),
+      /* @__PURE__ */ e(n, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "带图标" }),
+      /* @__PURE__ */ e(d, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "状态" }),
+      /* @__PURE__ */ e(o, {})
+    ] })
+  ] });
+}
+export {
+  a as InputBasic,
+  f as InputShowcase,
+  o as InputStates,
+  n as InputTypes,
+  d as InputWithIcon
+};

package/dist/kit/components/form/label/label.examples.d.ts

@@ -0,0 +1,4 @@
+export declare function LabelBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function LabelRequired(): import("react/jsx-runtime").JSX.Element;
+export declare function LabelWithHint(): import("react/jsx-runtime").JSX.Element;
+export declare function LabelShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/form/label/label.examples.js

@@ -0,0 +1,49 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { Label as l } from "./label.js";
+import { Input as s } from "../input/input.js";
+function t() {
+  return /* @__PURE__ */ i("div", { className: "space-y-1.5 w-64", children: [
+    /* @__PURE__ */ e(l, { htmlFor: "name", children: "姓名" }),
+    /* @__PURE__ */ e(s, { id: "name", placeholder: "请输入姓名" })
+  ] });
+}
+function n() {
+  return /* @__PURE__ */ i("div", { className: "space-y-1.5 w-64", children: [
+    /* @__PURE__ */ i(l, { htmlFor: "email", children: [
+      "邮箱 ",
+      /* @__PURE__ */ e("span", { className: "text-destructive", children: "*" })
+    ] }),
+    /* @__PURE__ */ e(s, { id: "email", type: "email", required: !0 })
+  ] });
+}
+function r() {
+  return /* @__PURE__ */ i("div", { className: "space-y-1.5 w-64", children: [
+    /* @__PURE__ */ i("div", { className: "flex items-baseline justify-between", children: [
+      /* @__PURE__ */ e(l, { htmlFor: "id", children: "员工工号" }),
+      /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: "6 位数字" })
+    ] }),
+    /* @__PURE__ */ e(s, { id: "id" })
+  ] });
+}
+function m() {
+  return /* @__PURE__ */ i("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ i("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "基础" }),
+      /* @__PURE__ */ e(t, {})
+    ] }),
+    /* @__PURE__ */ i("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "带必填 *" }),
+      /* @__PURE__ */ e(n, {})
+    ] }),
+    /* @__PURE__ */ i("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "带辅助说明" }),
+      /* @__PURE__ */ e(r, {})
+    ] })
+  ] });
+}
+export {
+  t as LabelBasic,
+  n as LabelRequired,
+  m as LabelShowcase,
+  r as LabelWithHint
+};

package/dist/kit/components/form/radio-group/radio-group.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function RadioGroupBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function RadioGroupHorizontal(): import("react/jsx-runtime").JSX.Element;
+export declare function RadioGroupShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/form/radio-group/radio-group.examples.js

@@ -0,0 +1,40 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { RadioGroup as l, RadioGroupItem as o } from "./radio-group.js";
+import { Label as s } from "../label/label.js";
+function t() {
+  return /* @__PURE__ */ e(l, { defaultValue: "weekly", className: "space-y-2", children: [
+    ["daily", "每日"],
+    ["weekly", "每周"],
+    ["monthly", "每月"]
+  ].map(([r, i]) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ e(o, { value: r, id: `r-${r}` }),
+    /* @__PURE__ */ e(s, { htmlFor: `r-${r}`, className: "cursor-pointer", children: i })
+  ] }, r)) });
+}
+function c() {
+  return /* @__PURE__ */ e(l, { defaultValue: "time", className: "flex gap-6", children: [
+    ["time", "按时间"],
+    ["priority", "按优先级"],
+    ["name", "按名称"]
+  ].map(([r, i]) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ e(o, { value: r, id: `h-${r}` }),
+    /* @__PURE__ */ e(s, { htmlFor: `h-${r}`, className: "cursor-pointer", children: i })
+  ] }, r)) });
+}
+function h() {
+  return /* @__PURE__ */ a("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "纵向" }),
+      /* @__PURE__ */ e(t, {})
+    ] }),
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "横向" }),
+      /* @__PURE__ */ e(c, {})
+    ] })
+  ] });
+}
+export {
+  t as RadioGroupBasic,
+  c as RadioGroupHorizontal,
+  h as RadioGroupShowcase
+};

package/dist/kit/components/form/select/select.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function SelectBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function SelectGrouped(): import("react/jsx-runtime").JSX.Element;
+export declare function SelectShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/form/select/select.examples.js

@@ -0,0 +1,58 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { Label as n } from "../label/label.js";
+import { Select as t, SelectTrigger as d, SelectValue as a, SelectContent as h, SelectItem as c, SelectGroup as r, SelectLabel as i, SelectSeparator as m } from "./select.js";
+function p() {
+  const [o, s] = u();
+  return /* @__PURE__ */ l("div", { className: "space-y-1.5 w-48", children: [
+    /* @__PURE__ */ e(n, { children: "优先级" }),
+    /* @__PURE__ */ l(t, { value: o, onValueChange: s, children: [
+      /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(a, { placeholder: "选择优先级" }) }),
+      /* @__PURE__ */ l(h, { children: [
+        /* @__PURE__ */ e(c, { value: "critical", children: "Critical" }),
+        /* @__PURE__ */ e(c, { value: "high", children: "High" }),
+        /* @__PURE__ */ e(c, { value: "medium", children: "Medium" }),
+        /* @__PURE__ */ e(c, { value: "low", children: "Low" }),
+        /* @__PURE__ */ e(c, { value: "none", children: "None" })
+      ] })
+    ] })
+  ] });
+}
+function v() {
+  return /* @__PURE__ */ l("div", { className: "space-y-1.5 w-48", children: [
+    /* @__PURE__ */ e(n, { children: "选择团队" }),
+    /* @__PURE__ */ l(t, { children: [
+      /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(a, { placeholder: "选择团队" }) }),
+      /* @__PURE__ */ l(h, { children: [
+        /* @__PURE__ */ l(r, { children: [
+          /* @__PURE__ */ e(i, { children: "工程部门" }),
+          /* @__PURE__ */ e(c, { value: "frontend", children: "前端" }),
+          /* @__PURE__ */ e(c, { value: "backend", children: "后端" })
+        ] }),
+        /* @__PURE__ */ e(m, {}),
+        /* @__PURE__ */ l(r, { children: [
+          /* @__PURE__ */ e(i, { children: "业务部门" }),
+          /* @__PURE__ */ e(c, { value: "sales", children: "销售" }),
+          /* @__PURE__ */ e(c, { value: "support", children: "客服" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function g() {
+  return /* @__PURE__ */ l("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ l("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "基础" }),
+      /* @__PURE__ */ e(p, {})
+    ] }),
+    /* @__PURE__ */ l("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "带分组" }),
+      /* @__PURE__ */ e(v, {})
+    ] })
+  ] });
+}
+export {
+  p as SelectBasic,
+  v as SelectGrouped,
+  g as SelectShowcase
+};

package/dist/kit/components/form/slider/slider.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function SliderBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function SliderRange(): import("react/jsx-runtime").JSX.Element;
+export declare function SliderShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/form/slider/slider.examples.js

@@ -0,0 +1,46 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useState as i } from "react";
+import { Label as l } from "../label/label.js";
+import { Slider as r } from "./slider.js";
+function a() {
+  const [s, n] = i([50]);
+  return /* @__PURE__ */ t("div", { className: "w-80 space-y-2", children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ e(l, { children: "音量" }),
+      /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground font-mono", children: s[0] })
+    ] }),
+    /* @__PURE__ */ e(r, { value: s, onValueChange: n, max: 100, step: 1 })
+  ] });
+}
+function c() {
+  const [s, n] = i([20, 80]);
+  return /* @__PURE__ */ t("div", { className: "w-80 space-y-2", children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ e(l, { children: "价格区间" }),
+      /* @__PURE__ */ t("span", { className: "text-sm text-muted-foreground font-mono", children: [
+        "¥",
+        s[0],
+        " ~ ¥",
+        s[1]
+      ] })
+    ] }),
+    /* @__PURE__ */ e(r, { value: s, onValueChange: n, max: 100, step: 5 })
+  ] });
+}
+function h() {
+  return /* @__PURE__ */ t("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "单值" }),
+      /* @__PURE__ */ e(a, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "区间" }),
+      /* @__PURE__ */ e(c, {})
+    ] })
+  ] });
+}
+export {
+  a as SliderBasic,
+  c as SliderRange,
+  h as SliderShowcase
+};

package/dist/kit/components/form/switch/switch.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function SwitchBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function SwitchList(): import("react/jsx-runtime").JSX.Element;
+export declare function SwitchShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/form/switch/switch.examples.js

@@ -0,0 +1,37 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { Switch as d } from "./switch.js";
+import { Label as i } from "../label/label.js";
+function c() {
+  return /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ e(d, { id: "s1" }),
+    /* @__PURE__ */ e(i, { htmlFor: "s1", className: "cursor-pointer", children: "桌面通知" })
+  ] });
+}
+function t() {
+  return /* @__PURE__ */ e("div", { className: "space-y-3 w-72", children: [
+    { id: "ss-auto", label: "自动保存草稿", defaultChecked: !0 },
+    { id: "ss-notify", label: "桌面通知", defaultChecked: !1 },
+    { id: "ss-compact", label: "紧凑布局", defaultChecked: !1 },
+    { id: "ss-sound", label: "操作音效", disabled: !0 }
+  ].map((s) => /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ e(i, { htmlFor: s.id, className: s.disabled ? "text-muted-foreground" : "cursor-pointer", children: s.label }),
+    /* @__PURE__ */ e(d, { id: s.id, defaultChecked: s.defaultChecked, disabled: s.disabled })
+  ] }, s.id)) });
+}
+function m() {
+  return /* @__PURE__ */ l("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ l("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "基础" }),
+      /* @__PURE__ */ e(c, {})
+    ] }),
+    /* @__PURE__ */ l("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "设置项列表" }),
+      /* @__PURE__ */ e(t, {})
+    ] })
+  ] });
+}
+export {
+  c as SwitchBasic,
+  t as SwitchList,
+  m as SwitchShowcase
+};

package/dist/kit/components/form/textarea/textarea.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function TextareaBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function TextareaWithCounter(): import("react/jsx-runtime").JSX.Element;
+export declare function TextareaShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/form/textarea/textarea.examples.js

@@ -0,0 +1,49 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { Label as o } from "../label/label.js";
+import { Textarea as n } from "./textarea.js";
+function l() {
+  return /* @__PURE__ */ t("div", { className: "space-y-1.5 w-96", children: [
+    /* @__PURE__ */ e(o, { htmlFor: "note", children: "备注" }),
+    /* @__PURE__ */ e(n, { id: "note", rows: 4, placeholder: "请输入备注..." })
+  ] });
+}
+function i() {
+  const [r, a] = c("");
+  return /* @__PURE__ */ t("div", { className: "space-y-1.5 w-96", children: [
+    /* @__PURE__ */ e(o, { htmlFor: "desc", children: "变更说明" }),
+    /* @__PURE__ */ e(
+      n,
+      {
+        id: "desc",
+        rows: 4,
+        maxLength: 200,
+        value: r,
+        onChange: (s) => a(s.target.value),
+        placeholder: "请描述变更原因..."
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "text-xs text-muted-foreground text-right font-mono", children: [
+      r.length,
+      " / ",
+      200
+    ] })
+  ] });
+}
+function u() {
+  return /* @__PURE__ */ t("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "基础" }),
+      /* @__PURE__ */ e(l, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "带字数计数" }),
+      /* @__PURE__ */ e(i, {})
+    ] })
+  ] });
+}
+export {
+  l as TextareaBasic,
+  u as TextareaShowcase,
+  i as TextareaWithCounter
+};

package/dist/kit/components/form/toggle/toggle.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function ToggleBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleText(): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/form/toggle/toggle.examples.js

@@ -0,0 +1,33 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { RiBold as s, RiItalic as a, RiUnderline as r } from "@remixicon/react";
+import { Toggle as i } from "./toggle.js";
+function c() {
+  return /* @__PURE__ */ l("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ e(i, { "aria-label": "加粗", children: /* @__PURE__ */ e(s, { className: "size-4" }) }),
+    /* @__PURE__ */ e(i, { "aria-label": "斜体", defaultPressed: !0, children: /* @__PURE__ */ e(a, { className: "size-4" }) }),
+    /* @__PURE__ */ e(i, { "aria-label": "下划线", children: /* @__PURE__ */ e(r, { className: "size-4" }) })
+  ] });
+}
+function n() {
+  return /* @__PURE__ */ l("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ e(i, { children: "仅显示我的" }),
+    /* @__PURE__ */ e(i, { defaultPressed: !0, children: "只看未读" })
+  ] });
+}
+function m() {
+  return /* @__PURE__ */ l("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ l("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "图标切换" }),
+      /* @__PURE__ */ e(c, {})
+    ] }),
+    /* @__PURE__ */ l("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "文字切换" }),
+      /* @__PURE__ */ e(n, {})
+    ] })
+  ] });
+}
+export {
+  c as ToggleBasic,
+  m as ToggleShowcase,
+  n as ToggleText
+};

package/dist/kit/components/form/toggle-group/toggle-group.examples.d.ts

@@ -0,0 +1,4 @@
+export declare function ToggleGroupSingle(): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleGroupMultiple(): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleGroupView(): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleGroupShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/form/toggle-group/toggle-group.examples.js

@@ -0,0 +1,46 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { ToggleGroup as i, ToggleGroupItem as l } from "./toggle-group.js";
+function r() {
+  return /* @__PURE__ */ n(i, { type: "single", defaultValue: "center", children: [
+    /* @__PURE__ */ e(l, { value: "left", children: "左" }),
+    /* @__PURE__ */ e(l, { value: "center", children: "中" }),
+    /* @__PURE__ */ e(l, { value: "right", children: "右" }),
+    /* @__PURE__ */ e(l, { value: "justify", children: "两端" })
+  ] });
+}
+function t() {
+  return /* @__PURE__ */ n(i, { type: "multiple", defaultValue: ["bold"], children: [
+    /* @__PURE__ */ e(l, { value: "bold", children: "粗" }),
+    /* @__PURE__ */ e(l, { value: "italic", children: "斜" }),
+    /* @__PURE__ */ e(l, { value: "underline", children: "下划线" })
+  ] });
+}
+function c() {
+  return /* @__PURE__ */ n(i, { type: "single", defaultValue: "list", children: [
+    /* @__PURE__ */ e(l, { value: "list", children: "列表" }),
+    /* @__PURE__ */ e(l, { value: "card", children: "卡片" }),
+    /* @__PURE__ */ e(l, { value: "kanban", children: "看板" })
+  ] });
+}
+function d() {
+  return /* @__PURE__ */ n("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ n("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "互斥单选（对齐）" }),
+      /* @__PURE__ */ e(r, {})
+    ] }),
+    /* @__PURE__ */ n("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "多选（格式）" }),
+      /* @__PURE__ */ e(t, {})
+    ] }),
+    /* @__PURE__ */ n("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "视图切换" }),
+      /* @__PURE__ */ e(c, {})
+    ] })
+  ] });
+}
+export {
+  t as ToggleGroupMultiple,
+  d as ToggleGroupShowcase,
+  r as ToggleGroupSingle,
+  c as ToggleGroupView
+};