{"version":"1.0.0","components":{"Autocomplete":{"name":"Autocomplete","type":"component","description":"Autocomplete — free-form text input with an optional filtered suggestion list.","importPath":"@lark-ui/core","category":"Other","props":{"items":{"type":"unknown[]","required":true,"description":"Array of items to display in the dropdown"},"value":{"type":"string | number | string[]","optional":true,"description":"The controlled input value"},"open":{"type":"boolean","optional":true,"description":"Whether the popup is open (controlled)"},"children":{"type":"ReactNode","optional":true,"description":"Autocomplete content (input group, popup content)"},"className":{"type":"string","optional":true,"description":"Additional CSS classes"},"label":{"type":"ReactNode","optional":true,"description":"Label content (enables Field wrapper)"},"required":{"type":"boolean","optional":true,"description":"Whether the field is required"},"labelTooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content to display next to the label"},"description":{"type":"ReactNode","optional":true,"description":"Helper text displayed below the field"},"error":{"type":"string | object","optional":true,"description":"Error message or validation error object"}},"examples":["<Autocomplete items={fruits}>\n      <Autocomplete.InputGroup placeholder=\"搜索水果…\" />\n      <Autocomplete.Content>\n        <Autocomplete.List>\n          {(item: string) => (\n            <Autocomplete.Item key={item} value={item}>\n              {item}\n            </Autocomplete.Item>\n          )}\n        </Autocomplete.List>\n      </Autocomplete.Content>\n    </Autocomplete>","<div className=\"w-80\">\n      <Autocomplete\n        items={languages}\n        label=\"语言\"\n        description=\"开始输入以筛选语言\"\n        filter={filter}\n      >\n        <Autocomplete.InputGroup placeholder=\"搜索语言…\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: Language) => (\n              <Autocomplete.Item key={item.value} value={item}>\n                {item.emoji} {item.label}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n    </div>","<div className=\"w-80\">\n      <Autocomplete\n        items={countries}\n        label=\"国家\"\n        error={{ message: \"请输入有效的国家\", match: true }}\n        filter={filter}\n      >\n        <Autocomplete.InputGroup placeholder=\"搜索国家…\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: Country) => (\n              <Autocomplete.Item key={item.code} value={item}>\n                {item.label}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n    </div>","<Autocomplete items={servers}>\n      <Autocomplete.InputGroup placeholder=\"选择区域…\" />\n      <Autocomplete.Content>\n        <Autocomplete.List>\n          {(group: ServerGroup) => (\n            <Autocomplete.Group key={group.value} items={group.items}>\n              <Autocomplete.GroupLabel>{group.value}</Autocomplete.GroupLabel>\n              <Autocomplete.Collection>\n                {(item: ServerLocation) => (\n                  <Autocomplete.Item key={item.value} value={item}>\n                    {item.label}\n                  </Autocomplete.Item>\n                )}\n              </Autocomplete.Collection>\n            </Autocomplete.Group>\n          )}\n        </Autocomplete.List>\n      </Autocomplete.Content>\n    </Autocomplete>","<div className=\"flex flex-wrap items-center gap-4\">\n      <Autocomplete items={fruits.slice(0, 10)}>\n        <Autocomplete.InputGroup size=\"xs\" placeholder=\"xs\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n      <Autocomplete items={fruits.slice(0, 10)}>\n        <Autocomplete.InputGroup size=\"sm\" placeholder=\"sm\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n      <Autocomplete items={fruits.slice(0, 10)}>\n        <Autocomplete.InputGroup size=\"base\" placeholder=\"base（默认）\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n      <Autocomplete items={fruits.slice(0, 10)}>\n        <Autocomplete.InputGroup size=\"lg\" placeholder=\"lg\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n    </div>","<div className=\"flex w-80 flex-col gap-3\">\n      <Autocomplete\n        items={fruits}\n        value={value}\n        onValueChange={(v) => setValue(v)}\n      >\n        <Autocomplete.InputGroup placeholder=\"输入水果名称…\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n      {value && (\n        <p className=\"text-sm text-lark-subtle\">\n          值：<span className=\"font-medium text-lark-default\">{value}</span>\n        </p>\n      )}\n    </div>"],"colors":["bg-lark-elevated","bg-lark-fill-hover","bg-lark-line","border-lark-line","ring-lark-line","text-lark-brand","text-lark-default","text-lark-placeholder"],"subComponents":{"InputGroup":{"name":"InputGroup","description":"InputGroup sub-component","props":{"className":{"type":"string","optional":true},"size":{"type":"LarkAutocompleteSize","optional":true},"placeholder":{"type":"string","optional":true}}},"Content":{"name":"Content","description":"Content sub-component","props":{"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true},"align":{"type":"AutocompleteBase.Positioner.Props[\"align\"]","optional":true},"alignOffset":{"type":"AutocompleteBase.Positioner.Props[\"alignOffset\"]","optional":true},"side":{"type":"AutocompleteBase.Positioner.Props[\"side\"]","optional":true},"sideOffset":{"type":"AutocompleteBase.Positioner.Props[\"sideOffset\"]","optional":true}}},"Item":{"name":"Item","description":"Item sub-component","props":{}},"GroupLabel":{"name":"GroupLabel","description":"GroupLabel sub-component","props":{}},"Group":{"name":"Group","description":"Group sub-component","props":{}},"Separator":{"name":"Separator","description":"Separator sub-component","props":{}},"List":{"name":"List","description":"List sub-component","props":{}},"Empty":{"name":"Empty","description":"Empty sub-component (wraps AutocompleteBase)","props":{},"isPassThrough":true,"baseComponent":"AutocompleteBase.Empty"},"Collection":{"name":"Collection","description":"Collection sub-component (wraps AutocompleteBase)","props":{},"isPassThrough":true,"baseComponent":"AutocompleteBase.Collection"}}},"Badge":{"name":"Badge","type":"component","description":"Small status label for categorizing or highlighting content.","importPath":"@lark-ui/core","category":"Display","props":{"variant":{"type":"enum","values":["primary","secondary","error","warning","success","destructive","info","beta","outline","red","green","neutral","orange","purple","teal","teal-subtle","blue"],"default":"primary","descriptions":{"primary":"Primary badge","secondary":"Secondary badge","error":"Error badge","warning":"Warning badge","success":"Success badge","destructive":"Deprecated. Use red instead.","info":"Info badge","beta":"Indicates beta or experimental features","outline":"Bordered badge with base background","red":"Red badge","green":"Green badge","neutral":"Neutral badge","orange":"Orange badge","purple":"Purple badge","teal":"Teal badge","teal-subtle":"Subtle teal badge","blue":"Blue badge"},"classes":{"primary":"bg-lark-badge-inverted text-lark-badge-inverted","secondary":"bg-lark-fill text-lark-subtle","error":"bg-lark-danger/20 text-lark-danger","warning":"bg-lark-warning/20 text-lark-warning","success":"bg-lark-success/20 text-lark-success","destructive":"bg-lark-badge-red text-white","info":"bg-lark-info/20 text-lark-info","beta":"border border-dashed border-lark-brand bg-transparent text-lark-link","outline":"border border-lark-border bg-transparent text-lark-default","red":"bg-lark-badge-red text-white","green":"bg-lark-badge-green text-white","neutral":"bg-lark-badge-neutral text-white","orange":"bg-lark-badge-orange text-white","purple":"bg-lark-badge-purple text-white","teal":"bg-lark-badge-teal text-white","teal-subtle":"bg-lark-badge-teal/20 text-lark-badge-teal-subtle","blue":"bg-lark-badge-blue text-white"}},"appearance":{"type":"enum","values":["filled","dot"],"default":"filled","descriptions":{"filled":"Filled badge with background color (default)","dot":"Outlined badge with a colored circle dot indicating status"},"classes":{"dot":"gap-1.5 bg-transparent text-lark-default ring ring-lark-border"}},"dotColor":{"type":"enum","values":["none","success","warning","error","neutral"],"default":"none","descriptions":{"none":"No dot indicator (used when appearance is not dot, or variant has no dot color)","success":"Green dot for success status","warning":"Orange dot for warning status","error":"Red dot for error status","neutral":"Neutral dot for informational status"},"classes":{"success":"bg-lark-success","warning":"bg-lark-badge-orange","error":"bg-lark-badge-red","neutral":"bg-lark-badge-neutral"}},"className":{"type":"string","description":"Additional CSS classes"},"children":{"type":"ReactNode","description":"Child elements"},"icon":{"type":"Icon | ReactNode","optional":true,"description":"Icon from `@phosphor-icons/react` or a React element. Rendered before children."}},"examples":["<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"primary\">主要</Badge>\n      <Badge variant=\"secondary\">次要</Badge>\n      <Badge variant=\"error\">错误</Badge>\n      <Badge variant=\"success\">成功</Badge>\n      <Badge variant=\"warning\">警告</Badge>\n      <Badge variant=\"info\">信息</Badge>\n      <Badge variant=\"outline\">轮廓</Badge>\n      <Badge variant=\"beta\">Beta</Badge>\n    </div>","<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"neutral\">中性</Badge>\n      <Badge variant=\"red\">红色</Badge>\n      <Badge variant=\"green\">绿色</Badge>\n      <Badge variant=\"orange\">橙色</Badge>\n      <Badge variant=\"teal\">青色</Badge>\n      <Badge variant=\"blue\">蓝色</Badge>\n      <Badge variant=\"purple\">紫色</Badge>\n    </div>","<p className=\"flex items-center gap-2\">\n      Workers\n      <Badge variant=\"secondary\">全新</Badge>\n    </p>","<Badge icon={CheckCircleIcon} variant=\"success\">\n      已验证\n    </Badge>","<Link href=\"/changelog\" variant=\"plain\">\n      <Badge variant=\"outline\">查看更新日志</Badge>\n    </Link>","<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"success\" appearance=\"dot\">\n        健康\n      </Badge>\n      <Badge variant=\"warning\" appearance=\"dot\">\n        警告\n      </Badge>\n      <Badge variant=\"error\" appearance=\"dot\">\n        错误\n      </Badge>\n      <Badge variant=\"neutral\" appearance=\"dot\">\n        中性\n      </Badge>\n    </div>"],"colors":["bg-lark-badge-blue","bg-lark-badge-green","bg-lark-badge-inverted","bg-lark-badge-neutral","bg-lark-badge-orange","bg-lark-badge-purple","bg-lark-badge-red","bg-lark-badge-teal","bg-lark-danger","bg-lark-fill","bg-lark-info","bg-lark-success","bg-lark-warning","border-lark-border","border-lark-brand","ring-lark-border","text-lark-badge-inverted","text-lark-badge-teal-subtle","text-lark-danger","text-lark-default","text-lark-info","text-lark-link","text-lark-subtle","text-lark-success","text-lark-warning"],"baseStyles":"inline-flex w-fit flex-none shrink-0 items-center justify-self-start gap-1 rounded-lg px-1 py-0.5 text-xs font-medium whitespace-nowrap [a:hover_&]:ring [a:hover_&]:ring-current"},"Banner":{"name":"Banner","type":"component","description":"Full-width message bar with an optional trailing CTA slot.","importPath":"@lark-ui/core","category":"Feedback","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"icon":{"type":"ReactNode","optional":true,"description":"Icon element rendered before the banner content (e.g. from `@phosphor-icons/react`)."},"title":{"type":"string","optional":true,"description":"Primary heading text for the banner. Use for i18n string injection."},"description":{"type":"ReactNode","optional":true,"description":"Secondary description text displayed below the title. Use for i18n string injection."},"action":{"type":"ReactNode","optional":true,"description":"Action slot for a CTA button or link. Compact banners render a Lark `Link` inline with the description; CTAs render at the trailing end. Use `Banner.Action` for accent-aware CTAs that self-style to the banner variant; other nodes are rendered as-is. Multiple actions can be passed in a Fragment. Only used in structured mode (with `title` or `description`)."},"text":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true},"variant":{"type":"enum","optional":true,"description":"Visual style of the banner.\n- `\"default\"` — Informational blue banner for general messages\n- `\"alert\"` — Warning yellow banner for cautionary messages\n- `\"error\"` — Error red banner for critical issues\n- `\"secondary\"` — Neutral banner for secondary messages","values":["default","alert","error","secondary"],"descriptions":{"default":"Informational banner for general messages","alert":"Warning banner for cautionary messages","error":"Error banner for critical issues","secondary":"Neutral banner for secondary messages"},"classes":{"default":"bg-lark-banner-info-solid text-lark-default data-[banner-theme=outlined]:bg-lark-banner-info-outlined data-[banner-theme=outlined]:border-lark-info-outline","alert":"bg-lark-banner-warning-solid text-lark-default data-[banner-theme=outlined]:bg-lark-banner-warning-outlined data-[banner-theme=outlined]:border-lark-warning-outline","error":"bg-lark-banner-danger-solid text-lark-default data-[banner-theme=outlined]:bg-lark-banner-danger-outlined data-[banner-theme=outlined]:border-lark-danger-outline","secondary":"bg-lark-contrast/5 text-lark-default data-[banner-theme=outlined]:border-lark-line"},"default":"default"},"size":{"type":"enum","optional":true,"description":"Size of the banner. A `\"sm\"` banner uses tighter spacing and `text-sm`, renders a Lark `Link` action inline with the description, and sets its `Banner.Action` children to the `\"xs\"` size — suited to dialogs and other tight spaces.","values":["base","sm"],"descriptions":{"base":"Default banner size","sm":"Compact banner for dialogs and tight spaces"},"classes":{"base":"items-start gap-2 rounded-md py-[9px] pl-4 text-base leading-[1.5715] overflow-hidden wrap-anywhere data-[banner-theme=outlined]:py-[15px] data-[banner-theme=outlined]:pl-[19px] data-[banner-theme=outlined]:pr-[3px]","sm":"items-center gap-2 rounded-md px-3 py-2 text-sm leading-[1.5715] overflow-hidden wrap-anywhere"},"default":"base"},"theme":{"type":"enum","optional":true,"description":"Surface treatment.\n- `\"filled\"` — Flat tinted surface\n- `\"outlined\"` — Pale tint with a 1px border in the status colour","values":["filled","outlined"],"descriptions":{"filled":"Flat tinted surface (Feishu `ud__notice--filled`)","outlined":"Pale tint with a 1px status border (Feishu `ud__notice--outlined`)"},"classes":{"outlined":"border"},"default":"filled"}},"examples":["<div className=\"w-full space-y-3\">\n      <Banner\n        icon={<Info weight=\"fill\" />}\n        title=\"有可用更新\"\n        description=\"新版本已可安装。\"\n      />\n      <Banner\n        icon={<Warning weight=\"fill\" />}\n        variant=\"alert\"\n        title=\"会话即将过期\"\n        description=\"您的会话将在 5 分钟后过期。\"\n      />\n      <Banner\n        icon={<WarningCircle weight=\"fill\" />}\n        variant=\"error\"\n        title=\"保存失败\"\n        description=\"无法保存您的更改，请重试。\"\n      />\n      <Banner\n        icon={<Info weight=\"fill\" />}\n        variant=\"secondary\"\n        title=\"已安排维护\"\n        description=\"此服务将中断 10 分钟。\"\n      />\n    </div>","<Banner\n      icon={<Info weight=\"fill\" />}\n      title=\"有可用更新\"\n      description=\"新版本已可安装。\"\n    />","<Banner\n      icon={<Warning weight=\"fill\" />}\n      variant=\"alert\"\n      title=\"会话即将过期\"\n      description=\"您的会话将在 5 分钟后过期。\"\n    />","<Banner\n      icon={<WarningCircle weight=\"fill\" />}\n      variant=\"error\"\n      title=\"保存失败\"\n      description=\"无法保存您的更改，请重试。\"\n    />","<Banner\n      icon={<Info weight=\"fill\" />}\n      variant=\"secondary\"\n      title=\"已安排维护\"\n      description=\"此服务将中断 10 分钟。\"\n    />","<Banner icon={<Info weight=\"fill\" />} title=\"您的更改已保存。\" />","<div className=\"w-full space-y-3\">\n      <Banner\n        theme=\"outlined\"\n        icon={<Info weight=\"fill\" />}\n        title=\"有可用更新\"\n        description=\"新版本已可安装。\"\n      />\n      <Banner\n        theme=\"outlined\"\n        variant=\"alert\"\n        icon={<Warning weight=\"fill\" />}\n        title=\"会话即将过期\"\n        description=\"您的会话将在 5 分钟后过期。\"\n      />\n      <Banner\n        theme=\"outlined\"\n        variant=\"error\"\n        icon={<WarningCircle weight=\"fill\" />}\n        title=\"保存失败\"\n        description=\"无法保存您的更改，请重试。\"\n      />\n      <Banner\n        theme=\"outlined\"\n        variant=\"secondary\"\n        icon={<Info weight=\"fill\" />}\n        title=\"已安排维护\"\n        description=\"此服务将中断 10 分钟。\"\n      />\n    </div>","<Banner\n      icon={<Warning weight=\"fill\" />}\n      variant=\"alert\"\n      title=\"需要复核\"\n      description=\"请在继续之前核对您的账单信息。\"\n    />","<Banner\n      icon={<Info weight=\"fill\" />}\n      title=\"支持自定义内容\"\n      description={\n        <Text DANGEROUS_className=\"text-inherit\">\n          此通告栏支持使用 Text 渲染<strong>自定义内容</strong>。\n        </Text>\n      }\n    />","<div className=\"w-full space-y-3\">\n      <Banner\n        icon={<Info weight=\"fill\" />}\n        title=\"有可用更新\"\n        description=\"新版本已可安装。\"\n        action={\n          <>\n            <Banner.Action>更新</Banner.Action>\n            <Banner.Action variant=\"ghost\" icon={<X />} aria-label=\"关闭\" />\n          </>\n        }\n      />\n      <Banner\n        variant=\"error\"\n        icon={<WarningCircle weight=\"fill\" />}\n        title=\"保存失败\"\n        description=\"无法保存您的更改，请重试。\"\n        action={\n          <>\n            <Banner.Action>重试</Banner.Action>\n            <Banner.Action variant=\"ghost\" icon={<X />} aria-label=\"关闭\" />\n          </>\n        }\n      />\n      <Banner\n        variant=\"alert\"\n        icon={<WarningCircle weight=\"fill\" />}\n        title=\"保存失败\"\n        description=\"无法保存您的更改，请重试。\"\n        action={\n          <>\n            <Banner.Action>重试</Banner.Action>\n            <Banner.Action variant=\"ghost\" icon={<X />} aria-label=\"关闭\" />\n          </>\n        }\n      />\n      <Banner\n        variant=\"secondary\"\n        icon={<WarningCircle weight=\"fill\" />}\n        title=\"保存失败\"\n        description=\"无法保存您的更改，请重试。\"\n        action={\n          <>\n            <Banner.Action>重试</Banner.Action>\n            <Banner.Action variant=\"ghost\" icon={<X />} aria-label=\"关闭\" />\n          </>\n        }\n      />\n    </div>","<div className=\"w-full space-y-3\">\n      <Banner\n        icon={<Warning weight=\"fill\" />}\n        variant=\"error\"\n        title=\"您的账户已逾期 90 天。\"\n        description=\"请立即支付以避免服务中断。\"\n        action={\n          <>\n            <Banner.Action>立即支付</Banner.Action>\n            <Banner.Action variant=\"secondary\">前往账单</Banner.Action>\n          </>\n        }\n      />\n    </div>","<div className=\"w-full space-y-3\">\n      <Banner\n        icon={<Info weight=\"fill\" />}\n        title=\"有可用更新\"\n        description=\"新版本已可安装。\"\n        action={\n          <>\n            <Banner.Action>更新</Banner.Action>\n            <Banner.Action variant=\"ghost\" icon={<X />} aria-label=\"关闭\" />\n          </>\n        }\n      />\n      <Banner\n        variant=\"alert\"\n        icon={<Warning weight=\"fill\" />}\n        title=\"会话即将过期\"\n        description=\"您的会话将在 5 分钟后过期。\"\n        action={\n          <>\n            <Banner.Action>延长</Banner.Action>\n            <Banner.Action variant=\"ghost\" icon={<X />} aria-label=\"关闭\" />\n          </>\n        }\n      />\n      <Banner\n        variant=\"error\"\n        icon={<WarningCircle weight=\"fill\" />}\n        title=\"保存失败\"\n        description=\"无法保存您的更改，请重试。\"\n        action={\n          <>\n            <Banner.Action>重试</Banner.Action>\n            <Banner.Action variant=\"ghost\" icon={<X />} aria-label=\"关闭\" />\n          </>\n        }\n      />\n      <Banner\n        variant=\"secondary\"\n        icon={<Info weight=\"fill\" />}\n        title=\"请注意\"\n        description=\"这是一个次要的信息类通告栏。\"\n        action={\n          <>\n            <Banner.Action>知道了</Banner.Action>\n            <Banner.Action variant=\"ghost\" icon={<X />} aria-label=\"关闭\" />\n          </>\n        }\n      />\n    </div>","<Banner\n      size=\"sm\"\n      description=\"此区域中已存在 puppies.cloudflare.dev 的 DNS 记录。\"\n      action={<Link href=\"#\">管理 puppies.cloudflare.dev 的 DNS</Link>}\n    />","<Banner\n      size=\"sm\"\n      description=\"此区域中已存在 puppies.cloudflare.dev 的 DNS 记录。\"\n      action={\n        <>\n          <Banner.Action>管理 DNS</Banner.Action>\n          <Banner.Action variant=\"ghost\">\n            <X />\n          </Banner.Action>\n        </>\n      }\n    />","<Banner\n      size=\"sm\"\n      description=\"此区域中已存在 puppies.cloudflare.dev 的 DNS 记录。\"\n    />","<Banner icon={<Info />}>这是一个使用 children 的简单通告栏。</Banner>"],"colors":["bg-lark-banner-danger-outlined","bg-lark-banner-danger-solid","bg-lark-banner-info-outlined","bg-lark-banner-info-solid","bg-lark-banner-warning-outlined","bg-lark-banner-warning-solid","bg-lark-contrast","border-lark-danger-outline","border-lark-info-outline","border-lark-line","border-lark-warning-outline","fill-lark-danger","fill-lark-info","fill-lark-warning","text-lark-danger","text-lark-default","text-lark-info","text-lark-subtle","text-lark-warning"],"baseStyles":"flex w-full","subComponents":{"Action":{"name":"Action","description":"Action sub-component","props":{}}}},"Breadcrumbs":{"name":"Breadcrumbs","type":"component","description":"Breadcrumbs component","importPath":"@lark-ui/core","category":"Display","props":{"size":{"type":"enum","optional":true,"description":"Size of the breadcrumbs.\n- `\"sm\"` — Compact breadcrumbs for dense UIs\n- `\"base\"` — Default breadcrumbs size","values":["sm","base"],"descriptions":{"sm":"Compact breadcrumbs for dense UIs","base":"Default breadcrumbs size"},"classes":{"sm":"text-sm h-10 gap-0.5","base":"text-base h-12 gap-1"},"default":"base"},"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."}},"examples":["<Breadcrumbs>\n      <Breadcrumbs.Link href=\"#\">首页</Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Link href=\"#\">文档</Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Current>面包屑导航</Breadcrumbs.Current>\n    </Breadcrumbs>","<Breadcrumbs>\n      <Breadcrumbs.Link href=\"#\" icon={<House size={16} />}>\n        首页\n      </Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Link href=\"#\">项目</Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Current>当前项目</Breadcrumbs.Current>\n    </Breadcrumbs>","<Breadcrumbs>\n      <Breadcrumbs.Link href=\"#\" icon={<House size={16} />}>\n        首页\n      </Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Link href=\"#\">文档</Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Current loading></Breadcrumbs.Current>\n    </Breadcrumbs>","<Breadcrumbs>\n      <Breadcrumbs.Current icon={<House size={16} />}>\n        Worker 分析\n      </Breadcrumbs.Current>\n    </Breadcrumbs>","<Breadcrumbs>\n      <Breadcrumbs.Link href=\"#\">首页</Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Current>面包屑导航</Breadcrumbs.Current>\n      <Breadcrumbs.Clipboard text=\"#\" />\n    </Breadcrumbs>"],"colors":["bg-lark-info","text-lark-brand","text-lark-brand-pressed","text-lark-default","text-lark-placeholder","text-lark-subtle","text-lark-success"],"subComponents":{"Link":{"name":"Link","description":"Link sub-component","props":{"href":{"type":"string","required":true},"icon":{"type":"React.ReactNode","optional":true}}},"Current":{"name":"Current","description":"Current sub-component","props":{"loading":{"type":"boolean","optional":true},"icon":{"type":"React.ReactNode","optional":true}}},"Separator":{"name":"Separator","description":"Separator sub-component","props":{}},"Clipboard":{"name":"Clipboard","description":"Clipboard sub-component","props":{"text":{"type":"string","required":true}}}}},"BubbleMap":{"name":"BubbleMap","type":"component","description":"BubbleMap component","importPath":"@lark-ui/core","category":"Data Visualization","props":{"echarts":{"type":"typeof echarts","required":true,"description":"The ECharts core instance imported by the consumer (passed in for tree-shaking). Requires `MapChart`, `ScatterChart`, `TooltipComponent`, and a renderer registered via `echarts.use([...])`."},"geoJson":{"type":"MapGeoJson","required":true,"description":"GeoJSON `FeatureCollection` for the land base."},"mapName":{"type":"string","optional":true,"description":"Optional stable ECharts map registry name. Set this when the same GeoJSON is parsed into new object instances across mounts and should reuse one global ECharts registration."},"data":{"type":"T[]","required":true,"description":"Raw data rows. Coordinates/value/name are read via the accessors below."},"lng":{"type":"MapAccessor<T, number>","required":true,"description":"Longitude accessor (key of `T` or `(row) => number`)."},"lat":{"type":"MapAccessor<T, number>","required":true,"description":"Latitude accessor (key of `T` or `(row) => number`)."},"value":{"type":"MapAccessor<T, number>","required":true,"description":"Value accessor — drives bubble size."},"name":{"type":"MapAccessor<T, string>","optional":true,"description":"Optional name accessor — used by the default tooltip."},"minRadius":{"type":"number","optional":true,"description":"Smallest bubble radius in px. Default: `6`."},"maxRadius":{"type":"number","optional":true,"description":"Largest bubble radius in px. Default: `26`."},"bubbleSize":{"type":"(value: number) => number","optional":true,"description":"Explicit bubble radius `(value) => px`. Overrides the default `minRadius`/`maxRadius` scaling."},"bubbleColor":{"type":"MapStyle<T, string>","optional":true,"description":"Bubble fill colour — constant or `(row) => color`. Defaults to the chart blue."},"bubbleBorderColor":{"type":"MapStyle<T, string>","optional":true,"description":"Bubble border colour — constant or `(row) => color`. Default: `transparent`."},"bubbleBorderWidth":{"type":"MapStyle<T, number>","optional":true,"description":"Bubble border width — constant or `(row) => px`. Default: `0`."},"center":{"type":"[number, number]","optional":true,"description":"Map center as `[longitude, latitude]`. Defaults to auto-fit."},"zoom":{"type":"number","optional":true,"description":"Zoom level — multiplies the auto-fit scale. Default: `1.25`."},"roam":{"type":"boolean","optional":true,"description":"Enable drag-to-pan and scroll-to-zoom. Default: `false`."},"projection":{"type":"MapProjection | null","optional":true,"description":"Geographic projection. Defaults to a latitude-clamped Mercator (flat 2D web-map look). Pass another d3-geo projection to override, or `null` for ECharts' raw equirectangular plotting. Use a stable reference (module-level or memoised): a new object each render rebuilds the view and resets a roamed/zoomed map."},"showTooltip":{"type":"boolean","optional":true,"description":"Show the tooltip. Default: `true`."},"valueFormat":{"type":"(value: number) => string","optional":true,"description":"Format the value for the default tooltip. Default: `toLocaleString()`."},"tooltipFormatter":{"type":"(row: T) => string","optional":true,"description":"Override the tooltip content for a row. Returns an HTML string rendered by ECharts' own tooltip. USE WITH CAUTION: the return value is injected as HTML. Escape any user-provided strings to avoid XSS."},"aspectRatio":{"type":"number | string","optional":true,"description":"Container aspect ratio as `width / height` (e.g. `1.7` or `\"16 / 9\"`). The height derives from the rendered width so the map fills the frame with no letterboxing. Defaults to the projected aspect of the displayed window, so the land fits edge-to-edge. Pass `height` to fix a pixel height instead."},"height":{"type":"number","optional":true,"description":"Fixed chart height in pixels. Overrides `aspectRatio` when set. Leave unset to size by aspect ratio (the default) so the map fills the container."},"className":{"type":"string","optional":true},"isDarkMode":{"type":"boolean","optional":true}},"examples":["<BubbleMap<CfLocation>\n      echarts={echarts}\n      geoJson={geoJson}\n      data={cloudflareLocations}\n      lng=\"lon\"\n      lat=\"lat\"\n      name=\"city\"\n      value={() => 1}\n      bubbleColor=\"#F6821F\"\n      minRadius={8}\n      maxRadius={8}\n      tooltipFormatter={(row) =>\n        `<span style=\"font-size:12px\"><strong>${row.city}</strong><span style=\"color:var(--text-color-lark-subtle);margin-left:8px\">${row.iata}</span></span>`\n      }\n      isDarkMode={isDarkMode}\n    />","<BubbleMap<Colo>\n      echarts={echarts}\n      geoJson={geoJson}\n      data={colos}\n      lng=\"lon\"\n      lat=\"lat\"\n      name=\"city\"\n      value=\"requests\"\n      valueFormat={fmt}\n      minRadius={8}\n      isDarkMode={isDarkMode}\n    />","<BubbleMap<Colo>\n      echarts={echarts}\n      geoJson={geoJson}\n      data={colos2}\n      lng=\"lon\"\n      lat=\"lat\"\n      name=\"city\"\n      value=\"requests\"\n      valueFormat={fmt}\n      isDarkMode={isDarkMode}\n    />"],"colors":[]},"Button":{"name":"Button","type":"component","description":"Primary action trigger. Supports multiple variants, sizes, shapes, icons, and loading state.","importPath":"@lark-ui/core","category":"Action","props":{"shape":{"type":"enum","values":["base","square","circle"],"default":"base","descriptions":{"base":"Default rectangular button shape","square":"Square button for icon-only actions","circle":"Circular button for icon-only actions"},"classes":{"base":"justify-center","square":"items-center justify-center p-0","circle":"items-center justify-center p-0 rounded-full"}},"size":{"type":"enum","values":["xs","sm","base","lg"],"default":"base","descriptions":{"xs":"Extra small button for compact UIs (24px)","sm":"Small button (28px, Feishu small control)","base":"Default button (32px, Feishu medium control)","lg":"Large button (40px, Feishu large control)"},"classes":{"xs":"h-6 min-w-[48px] gap-1 rounded-md px-[7px] text-xs","sm":"h-7 min-w-[48px] gap-1 rounded-md px-[7px] text-xs","base":"h-8 min-w-[80px] gap-1.5 rounded-md px-[11px] text-base","lg":"h-10 min-w-[96px] gap-2 rounded-md px-[15px] text-lg"}},"compactSize":{"type":"enum","values":["xs","sm","base","lg"],"classes":{"xs":"size-6 min-w-0","sm":"size-7 min-w-0","base":"size-8 min-w-0","lg":"size-10 min-w-0"}},"variant":{"type":"enum","values":["primary","secondary","ghost","destructive","secondary-destructive","outline"],"default":"secondary","descriptions":{"primary":"High-emphasis button for primary actions","secondary":"Default button style for most actions","ghost":"Minimal button with no background","destructive":"Danger button for destructive actions like delete","secondary-destructive":"Secondary button with destructive text for less prominent dangerous actions","outline":"Bordered button with transparent background"},"classes":{"primary":"bg-(--lark-button-emphasis-bg) !text-white ring-0 hover:bg-(--lark-button-emphasis-hover) focus-visible:bg-(--lark-button-emphasis-hover) active:bg-(--lark-button-emphasis-pressed) disabled:bg-lark-disabled disabled:text-white","secondary":"bg-lark-base !text-lark-default ring ring-lark-border not-disabled:hover:bg-lark-fill not-disabled:focus-visible:bg-lark-fill not-disabled:active:bg-lark-recessed disabled:bg-lark-base disabled:text-lark-inactive disabled:ring-lark-border data-[state=open]:bg-lark-fill","ghost":"text-lark-default hover:bg-lark-fill-hover focus-visible:bg-lark-fill-hover active:bg-lark-fill-pressed shadow-none bg-inherit ring-0 disabled:text-lark-inactive","destructive":"bg-(--lark-button-emphasis-bg) !text-white ring-0 hover:bg-(--lark-button-emphasis-hover) focus-visible:bg-(--lark-button-emphasis-hover) active:bg-(--lark-button-emphasis-pressed) disabled:bg-lark-disabled disabled:text-white","secondary-destructive":"bg-lark-base !text-lark-danger ring ring-lark-border not-disabled:hover:bg-lark-danger-tint not-disabled:focus-visible:bg-lark-danger-tint not-disabled:active:bg-lark-danger-tint not-disabled:hover:!text-lark-danger disabled:bg-lark-base disabled:text-lark-inactive disabled:ring-lark-border data-[state=open]:bg-lark-danger-tint","outline":"bg-transparent text-lark-default ring ring-lark-border not-disabled:hover:bg-lark-fill not-disabled:focus-visible:bg-lark-fill not-disabled:active:bg-lark-recessed not-disabled:hover:text-lark-strong disabled:bg-transparent disabled:text-lark-inactive disabled:ring-lark-border"},"stateClasses":{"primary":{"hover":"hover:bg-(--lark-button-emphasis-hover)","focus":"focus-visible:bg-(--lark-button-emphasis-hover)","active":"active:bg-(--lark-button-emphasis-pressed)","disabled":"disabled:bg-lark-disabled disabled:text-white"},"secondary":{"not-disabled":"not-disabled:hover:bg-lark-fill not-disabled:focus-visible:bg-lark-fill not-disabled:active:bg-lark-recessed","disabled":"disabled:bg-lark-base disabled:text-lark-inactive disabled:ring-lark-border","data-state":"data-[state=open]:bg-lark-fill"},"ghost":{"hover":"hover:bg-lark-fill-hover","focus":"focus-visible:bg-lark-fill-hover","active":"active:bg-lark-fill-pressed","disabled":"disabled:text-lark-inactive"},"destructive":{"hover":"hover:bg-(--lark-button-emphasis-hover)","focus":"focus-visible:bg-(--lark-button-emphasis-hover)","active":"active:bg-(--lark-button-emphasis-pressed)","disabled":"disabled:bg-lark-disabled disabled:text-white"},"secondary-destructive":{"not-disabled":"not-disabled:hover:bg-lark-danger-tint not-disabled:focus-visible:bg-lark-danger-tint not-disabled:active:bg-lark-danger-tint not-disabled:hover:!text-lark-danger","disabled":"disabled:bg-lark-base disabled:text-lark-inactive disabled:ring-lark-border","data-state":"data-[state=open]:bg-lark-danger-tint"},"outline":{"not-disabled":"not-disabled:hover:bg-lark-fill not-disabled:focus-visible:bg-lark-fill not-disabled:active:bg-lark-recessed not-disabled:hover:text-lark-strong","disabled":"disabled:bg-transparent disabled:text-lark-inactive disabled:ring-lark-border"}}},"className":{"type":"string","description":"Additional CSS classes"},"children":{"type":"ReactNode","description":"Child elements"},"icon":{"type":"Icon | ReactNode","optional":true,"description":"Icon from `@phosphor-icons/react` or a React element. Rendered before children."}},"examples":["<div className=\"flex flex-wrap items-center gap-2\">\n      <Button variant=\"secondary\">按钮</Button>\n      <Button\n        variant=\"secondary\"\n        shape=\"square\"\n        icon={<LarkIcon name=\"plus\" />}\n        aria-label=\"添加\"\n      />\n    </div>","<Button variant=\"primary\">主要</Button>","<Button variant=\"secondary\">次要</Button>","<Button variant=\"ghost\">幽灵</Button>","<Button variant=\"destructive\">危险</Button>","<Button variant=\"outline\">轮廓</Button>","<Button variant=\"secondary-destructive\">次要危险</Button>","<div className=\"flex flex-wrap items-center gap-3\">\n      <Button size=\"xs\" variant=\"secondary\">\n        极小\n      </Button>\n      <Button size=\"sm\" variant=\"secondary\">\n        小\n      </Button>\n      <Button size=\"base\" variant=\"secondary\">\n        标准\n      </Button>\n      <Button size=\"lg\" variant=\"secondary\">\n        大\n      </Button>\n    </div>","<Button variant=\"secondary\" icon={<LarkIcon name=\"plus\" />}>\n      新建文档\n    </Button>","<div className=\"flex flex-wrap items-center gap-3\">\n      <Button\n        variant=\"secondary\"\n        shape=\"square\"\n        icon={<LarkIcon name=\"plus\" />}\n        aria-label=\"添加项\"\n      />\n      <Button\n        variant=\"secondary\"\n        shape=\"circle\"\n        icon={<LarkIcon name=\"plus\" />}\n        aria-label=\"添加项\"\n      />\n    </div>","<Button variant=\"primary\" loading>\n      加载中...\n    </Button>","<Button variant=\"secondary\" disabled>\n      禁用\n    </Button>","<Button variant=\"secondary\">点击我</Button>","<div className=\"flex flex-wrap items-center gap-3\">\n      <Button variant=\"secondary\" title=\"新建文档\">\n        新建文档\n      </Button>\n      <Button\n        variant=\"secondary\"\n        shape=\"square\"\n        icon={<LarkIcon name=\"plus\" />}\n        aria-label=\"添加项\"\n        title=\"添加项\"\n      />\n      <Button variant=\"secondary\" title=\"你需要编辑权限才能创建文档\" disabled>\n        新建文档\n      </Button>\n    </div>","<div className=\"flex flex-wrap items-center gap-3\">\n      <LinkButton href=\"/components/link\" variant=\"secondary\">\n        阅读 Link 文档\n      </LinkButton>\n      <LinkButton\n        href=\"https://developers.cloudflare.com\"\n        variant=\"ghost\"\n        icon={<LarkIcon name=\"arrow-square-out\" />}\n        external\n      >\n        Lark 文档\n      </LinkButton>\n    </div>","<LinkButton\n      href=\"/components/link\"\n      variant=\"secondary\"\n      title=\"打开 Link 组件文档\"\n    >\n      阅读 Link 文档\n    </LinkButton>","<div className=\"flex flex-wrap items-center gap-3\">\n      <LinkButton href=\"/components/link\" variant=\"secondary\" disabled>\n        禁用的链接\n      </LinkButton>\n      <LinkButton\n        href=\"/components/link\"\n        variant=\"secondary\"\n        disabled\n        title=\"你需要编辑权限才能继续\"\n      >\n        带提示的禁用状态\n      </LinkButton>\n    </div>"],"colors":["bg-lark-base","bg-lark-danger-tint","bg-lark-disabled","bg-lark-fill","bg-lark-fill-hover","bg-lark-fill-pressed","bg-lark-recessed","ring-lark-border","text-lark-danger","text-lark-default","text-lark-inactive","text-lark-strong"]},"ButtonGroup":{"name":"ButtonGroup","type":"component","description":"Joins a small set of tightly-coupled buttons into a single control — most commonly a **split button**: a primary action next to a dropdown trigger for related, secondary actions.","importPath":"@lark-ui/core","category":"Action","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`. Use lark semantic tokens only."},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"title":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true,"description":"The tightly-coupled controls to join. Typically two `Button`s: a primary action and a dropdown trigger (a \"split button\")."}},"examples":["<ButtonGroup aria-label=\"部署\">\n      <Button variant=\"primary\">部署</Button>\n      <DropdownMenu>\n        <DropdownMenu.Trigger\n          render={\n            <Button variant=\"primary\" shape=\"square\" aria-label=\"更多部署选项\">\n              <CaretDownIcon />\n            </Button>\n          }\n        />\n        <DropdownMenu.Content>\n          <DropdownMenu.Item>部署到预发布环境</DropdownMenu.Item>\n          <DropdownMenu.Item>部署并跟踪日志</DropdownMenu.Item>\n          <DropdownMenu.Item>安排部署…</DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n    </ButtonGroup>","<ButtonGroup aria-label=\"保存\">\n      <Button variant=\"secondary\">保存</Button>\n      <DropdownMenu>\n        <DropdownMenu.Trigger\n          render={\n            <Button\n              variant=\"secondary\"\n              shape=\"square\"\n              aria-label=\"更多保存选项\"\n            >\n              <CaretDownIcon />\n            </Button>\n          }\n        />\n        <DropdownMenu.Content>\n          <DropdownMenu.Item>保存为草稿</DropdownMenu.Item>\n          <DropdownMenu.Item>保存并发布</DropdownMenu.Item>\n          <DropdownMenu.Item>保存副本…</DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n    </ButtonGroup>","<div className=\"flex flex-wrap items-center gap-4\">\n      {sizes.map((size) => (\n        <ButtonGroup key={size} aria-label=\"部署\">\n          <Button size={size} variant=\"primary\">\n            部署\n          </Button>\n          <DropdownMenu>\n            <DropdownMenu.Trigger\n              render={\n                <Button\n                  size={size}\n                  variant=\"primary\"\n                  shape=\"square\"\n                  aria-label=\"更多部署选项\"\n                >\n                  <CaretDownIcon />\n                </Button>\n              }\n            />\n            <DropdownMenu.Content>\n              <DropdownMenu.Item>部署到预发布环境</DropdownMenu.Item>\n              <DropdownMenu.Item>安排部署…</DropdownMenu.Item>\n            </DropdownMenu.Content>\n          </DropdownMenu>\n        </ButtonGroup>\n      ))}\n    </div>"],"colors":[]},"Chart":{"name":"Chart","type":"component","description":"Chart — a low-level wrapper around [Apache ECharts](https://echarts.apache.org).","importPath":"@lark-ui/core","category":"Data Visualization","props":{"echarts":{"type":"typeof echarts","required":true,"description":"The ECharts core instance imported by the consumer. Passed in rather than imported directly so the consumer controls which ECharts modules are bundled (tree-shaking)."},"options":{"type":"LarkChartOption","required":true,"description":"ECharts option object — passed through to `chart.setOption()`"},"optionUpdateBehavior":{"type":"SetOptionOpts","optional":true,"description":"Additional options passed as the second argument to `chart.setOption()`. Defaults to `{ notMerge: false, lazyUpdate: true }`."},"className":{"type":"string","optional":true,"description":"Additional CSS classes applied to the chart container `<div>`"},"isDarkMode":{"type":"boolean","optional":true,"description":"When `true`, initialises ECharts with its built-in dark theme. Changing this value after mount destroys and re-creates the chart instance."},"height":{"type":"number","optional":true,"description":"Height of the chart container in pixels. Defaults to `350`."},"aspectRatio":{"type":"number | string","optional":true,"description":"Container aspect ratio as `width / height` (e.g. `1.7` or `\"16 / 9\"`). When set, the height derives from the rendered width via CSS `aspect-ratio` and the `height` prop is ignored — useful for maps so the canvas matches the map's shape and fills the frame with no letterboxing."}},"examples":["<Chart\n      echarts={echarts}\n      options={options}\n      height={400}\n      isDarkMode={isDarkMode}\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"数量\"\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"请求数\"\n      yAxisMinInterval={1}\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      markers={markers}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"数量\"\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      thresholds={[\n        {\n          value: 55,\n          label: \"内存上限\",\n          color: ChartPalette.semantic(\"Attention\", isDarkMode),\n        },\n      ]}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"内存（MB）\"\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"请求数\"\n      xAxisTickFormat={(timestamp) =>\n        new Intl.DateTimeFormat(undefined, {\n          timeZone: \"UTC\",\n          hour: \"2-digit\",\n          minute: \"2-digit\",\n        }).format(timestamp)\n      }\n      yAxisTickFormat={(value) => {\n        if (value >= 1000) return `${value / 1000}k`;\n        return value.toString();\n      }}\n      tooltipValueFormat={(value) => `${(value / 1000).toFixed(1)}k 次请求`}\n      tooltipTimestampFormat={(timestamp) =>\n        new Intl.DateTimeFormat(undefined, {\n          timeZone: \"UTC\",\n          dateStyle: \"medium\",\n          timeStyle: \"medium\",\n        }).format(timestamp)\n      }\n    />","<TimeseriesChart\n      yAxisTickCount={2}\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      height={160}\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"数量\"\n      gradient\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"Mbps\"\n      incomplete={{ after: incompleteTimestamp }}\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"%\"\n      onTimeRangeChange={(from, to) => {\n        alert(\n          `已选时间范围：\\n起始：${new Date(from).toLocaleString()}\\n结束：${new Date(to).toLocaleString()}`,\n        );\n      }}\n    />","<Chart\n      echarts={echarts}\n      options={options}\n      height={160}\n      isDarkMode={isDarkMode}\n    />","<div className=\"space-y-4\">\n      <h3 className=\"text-sm font-medium\">激活状态</h3>\n\n      <div className=\"flex flex-wrap gap-4 divide-x divide-lark-hairline\">\n        <ChartLegend.LargeItem\n          name=\"请求数\"\n          color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n          value=\"1,234\"\n          unit=\"次/秒\"\n        />\n        <ChartLegend.LargeItem\n          name=\"存储\"\n          color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n          value=\"56\"\n          unit=\"GB\"\n        />\n        <ChartLegend.LargeItem\n          name=\"警告数\"\n          color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n          value=\"128\"\n        />\n      </div>\n\n      <h3 className=\"mt-12 text-sm font-medium\">未激活状态</h3>\n\n      <div className=\"flex flex-wrap gap-4 divide-x divide-lark-hairline\">\n        <ChartLegend.LargeItem\n          name=\"请求数\"\n          color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n          value=\"1,234\"\n          unit=\"次/秒\"\n          inactive\n        />\n        <ChartLegend.LargeItem\n          name=\"存储\"\n          color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n          value=\"56\"\n          unit=\"GB\"\n          inactive\n        />\n        <ChartLegend.LargeItem\n          name=\"警告数\"\n          color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n          value=\"128\"\n          inactive\n        />\n      </div>\n\n      <h3 className=\"mt-12 text-sm font-medium\">加载状态</h3>\n\n      <div className=\"flex flex-wrap gap-4 divide-x divide-lark-hairline\">\n        <ChartLegend.LargeItem loading />\n      </div>\n    </div>","<div className=\"space-y-4\">\n      <h3 className=\"text-sm font-medium\">激活状态</h3>\n      <div className=\"flex flex-wrap gap-4\">\n        <ChartLegend.SmallItem\n          name=\"请求数\"\n          color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n          value=\"1,234\"\n          unit=\"次/秒\"\n        />\n        <ChartLegend.SmallItem\n          name=\"存储\"\n          color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n          value=\"56\"\n          unit=\"GB\"\n        />\n        <ChartLegend.SmallItem\n          name=\"警告数\"\n          color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n          value=\"128\"\n        />\n      </div>\n\n      <h3 className=\"mt-12 text-sm font-medium\">未激活状态</h3>\n      <div className=\"flex flex-wrap gap-4\">\n        <ChartLegend.SmallItem\n          name=\"请求数\"\n          color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n          value=\"1,234\"\n          unit=\"次/秒\"\n          inactive\n        />\n        <ChartLegend.SmallItem\n          name=\"存储\"\n          color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n          value=\"56\"\n          unit=\"GB\"\n          inactive\n        />\n        <ChartLegend.SmallItem\n          name=\"警告数\"\n          color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n          value=\"128\"\n          inactive\n        />\n      </div>\n\n      <h3 className=\"mt-12 text-sm font-medium\">加载状态</h3>\n\n      <div className=\"flex flex-wrap gap-4\">\n        <ChartLegend.SmallItem loading />\n      </div>\n    </div>","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      type=\"bar\"\n      data={data}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"数量\"\n      tooltipValueFormat={(r) => r.toFixed(2)}\n    />","<div className=\"flex w-full flex-1 flex-col\">\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        xAxisName=\"时间（UTC）\"\n        yAxisName=\"数量\"\n        data={[]}\n        loading\n      />\n    </div>","<div className=\"flex w-full flex-1 flex-col\">\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        type=\"bar\"\n        xAxisName=\"时间（UTC）\"\n        yAxisName=\"数量\"\n        data={[]}\n        loading\n      />\n    </div>","<div className=\"flex w-full flex-1 flex-col gap-3\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex flex-wrap gap-4\">\n          {data.map((series) => (\n            <ChartLegend.SmallItem\n              loading={loading}\n              key={series.name}\n              name={series.name}\n              color={series.color}\n              value={Math.round(series.data.at(-1)?.[1] ?? 0).toLocaleString()}\n            />\n          ))}\n        </div>\n        <Switch label=\"加载中\" checked={loading} onCheckedChange={setLoading} />\n      </div>\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        xAxisName=\"时间（UTC）\"\n        yAxisName=\"数量\"\n        data={loading ? [] : data}\n        loading={loading}\n      />\n    </div>","<LayerCard>\n      <LayerCard.Secondary>读取延迟</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <div className=\"mb-2 flex gap-4 divide-x divide-lark-hairline px-2\">\n          <ChartLegend.LargeItem\n            name=\"P99\"\n            color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n            value=\"124\"\n            unit=\"ms\"\n          />\n          <ChartLegend.LargeItem\n            name=\"P95\"\n            color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n            value=\"76\"\n            unit=\"ms\"\n          />\n          <ChartLegend.LargeItem\n            name=\"P75\"\n            color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n            value=\"32\"\n            unit=\"ms\"\n          />\n          <ChartLegend.LargeItem\n            name=\"P50\"\n            color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n            value=\"10\"\n            unit=\"ms\"\n          />\n        </div>\n        <TimeseriesChart\n          xAxisName=\"时间（UTC）\"\n          echarts={echarts}\n          isDarkMode={isDarkMode}\n          data={data}\n          height={300}\n          tooltipFooter=\"百分位数采用 5 分钟滚动窗口计算。\"\n        />\n      </LayerCard.Primary>\n    </LayerCard>","<LayerCard>\n      <LayerCard.Secondary>读取延迟</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <div className=\"mb-2 flex divide-x divide-lark-line px-2\">\n          {series.map((s) => (\n            <ChartLegend.LargeItem\n              key={s.name}\n              name={s.name}\n              color={s.color}\n              value={s.value}\n              unit={s.unit}\n              inactive={hoveredSeries !== null && hoveredSeries !== s.name}\n              onPointerEnter={() => {\n                setHoveredSeries(s.name);\n                chartRef.current?.dispatchAction({\n                  type: \"highlight\",\n                  seriesName: s.name,\n                });\n              }}\n              onPointerLeave={() => {\n                setHoveredSeries(null);\n                chartRef.current?.dispatchAction({\n                  type: \"downplay\",\n                  seriesName: s.name,\n                });\n              }}\n              className=\"not-first:pl-4\"\n            />\n          ))}\n        </div>\n        <TimeseriesChart\n          ref={chartRef}\n          xAxisName=\"时间（UTC）\"\n          echarts={echarts}\n          isDarkMode={isDarkMode}\n          data={data}\n          height={300}\n        />\n      </LayerCard.Primary>\n    </LayerCard>","<LayerCard>\n      <LayerCard.Secondary>读取延迟</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <div className=\"mb-2 flex divide-x divide-lark-line px-2\">\n          {series.map((s) => (\n            <ChartLegend.LargeItem\n              key={s.name}\n              name={s.name}\n              color={s.color}\n              value={s.value}\n              unit={s.unit}\n              inactive={hiddenSeries[s.name] ?? false}\n              onClick={() => handleClick(s.name)}\n              className=\"not-first:pl-4\"\n            />\n          ))}\n        </div>\n        <TimeseriesChart\n          ref={chartRef}\n          xAxisName=\"时间（UTC）\"\n          echarts={echarts}\n          isDarkMode={isDarkMode}\n          data={data}\n          height={300}\n          enableLegendSelection\n        />\n      </LayerCard.Primary>\n    </LayerCard>","<Chart\n      echarts={echarts}\n      options={options}\n      height={400}\n      isDarkMode={isDarkMode}\n    />","<div className=\"flex w-full flex-col gap-4\">\n      <Select\n        label=\"工具提示跟随光标\"\n        value={selected}\n        onValueChange={(v) => {\n          if (v) setSelected(v);\n        }}\n        renderValue={(v) => v.label}\n      >\n        {FOLLOW_CURSOR_OPTIONS.map((opt) => (\n          <Select.Option key={opt.value} value={opt}>\n            {opt.label}\n          </Select.Option>\n        ))}\n      </Select>\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        data={data}\n        xAxisName=\"时间（UTC）\"\n        yAxisName=\"延迟（ms）\"\n        tooltipFollowCursor={selected.value}\n      />\n    </div>","<div\n      ref={boundaryRef}\n      className=\"w-full overflow-auto rounded-lg border border-lark-line\"\n      style={{ height: 300 }}\n    >\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        data={data}\n        xAxisName=\"时间（UTC）\"\n        yAxisName=\"数量\"\n        height={280}\n        tooltipBoundary={boundary ?? undefined}\n      />\n    </div>"],"colors":[]},"Checkbox":{"name":"Checkbox","type":"component","description":"Checkbox component","importPath":"@lark-ui/core","category":"Input","props":{"variant":{"type":"enum","optional":true,"description":"Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text)","values":["default","error"],"descriptions":{"default":"Default checkbox appearance","error":"Error state for validation failures"},"classes":{"default":"bg-lark-base ring-lark-outline hover:ring-lark-brand active:ring-lark-brand-pressed focus-visible:ring-lark-brand data-[checked]:bg-lark-brand data-[checked]:ring-transparent data-[checked]:hover:bg-lark-brand-hover data-[checked]:active:bg-lark-brand-pressed","error":"bg-lark-base ring-lark-danger data-[checked]:bg-lark-brand"},"stateClasses":{"default":{"hover":"hover:ring-lark-brand","active":"active:ring-lark-brand-pressed","focus":"focus-visible:ring-lark-brand"}},"default":"default"},"label":{"type":"ReactNode","optional":true,"description":"Label content for the checkbox (enables built-in Field wrapper) - can be a string or any React node"},"labelTooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content to display next to the label via an info icon"},"controlFirst":{"type":"boolean","optional":true,"description":"When true (default), checkbox appears before label. When false, label appears before checkbox."},"checked":{"type":"boolean","optional":true,"description":"Whether the checkbox is checked (controlled)"},"indeterminate":{"type":"boolean","optional":true,"description":"Whether the checkbox is in indeterminate state"},"disabled":{"type":"boolean","optional":true,"description":"Whether the checkbox is disabled"},"name":{"type":"string","optional":true,"description":"Name for form submission"},"required":{"type":"boolean","optional":true,"description":"Whether the field is required"},"className":{"type":"string","optional":true,"description":"Additional class name"}},"examples":["<Checkbox\n      label=\"接受服务条款\"\n      checked={checked}\n      onCheckedChange={setChecked}\n    />","<Checkbox label=\"启用通知\" checked={checked} onCheckedChange={setChecked} />","<Checkbox label=\"我同意\" checked={checked} onCheckedChange={setChecked} />","<Checkbox\n      label=\"全选\"\n      indeterminate={indeterminate}\n      onCheckedChange={setIndeterminate}\n    />","<Checkbox\n      label=\"记住我\"\n      controlFirst={false}\n      checked={checked}\n      onCheckedChange={setChecked}\n    />","<Checkbox label=\"禁用的选项\" disabled />","<Checkbox label=\"无效的选项\" variant=\"error\" />","<Checkbox.Group\n      legend=\"邮件通知偏好\"\n      description=\"选择你希望接收更新的方式\"\n      value={preferences}\n      onValueChange={setPreferences}\n    >\n      <Checkbox.Item value=\"email\" label=\"邮件通知\" />\n      <Checkbox.Item value=\"sms\" label=\"短信通知\" />\n      <Checkbox.Item value=\"push\" label=\"推送通知\" />\n    </Checkbox.Group>","<Checkbox.Group value={preferences} onValueChange={setPreferences}>\n      <Checkbox.Legend className=\"sr-only\">通知偏好</Checkbox.Legend>\n      <Checkbox.Item value=\"email\" label=\"邮件通知\" />\n      <Checkbox.Item value=\"sms\" label=\"短信通知\" />\n      <Checkbox.Item value=\"push\" label=\"推送通知\" />\n    </Checkbox.Group>","<Checkbox.Group value={preferences} onValueChange={setPreferences}>\n      <Checkbox.Legend className=\"text-sm font-normal text-lark-subtle\">\n        通知偏好\n      </Checkbox.Legend>\n      <Checkbox.Item value=\"email\" label=\"邮件通知\" />\n      <Checkbox.Item value=\"sms\" label=\"短信通知\" />\n      <Checkbox.Item value=\"push\" label=\"推送通知\" />\n    </Checkbox.Group>","<Checkbox.Group\n      legend=\"必填的通知方式\"\n      error=\"请至少选择一种通知方式\"\n      value={[]}\n      onValueChange={() => {}}\n    >\n      <Checkbox.Item value=\"email\" label=\"邮件\" variant=\"error\" />\n      <Checkbox.Item value=\"sms\" label=\"短信\" variant=\"error\" />\n    </Checkbox.Group>","<Checkbox.Group\n      legend=\"此配置文件应扫描哪些内容？\"\n      appearance=\"card\"\n      value={products}\n      onValueChange={setProducts}\n    >\n      <Checkbox.Item\n        value=\"gateway\"\n        label=\"Web 流量\"\n        description=\"通过 Gateway HTTP 策略进行的上传和下载。\"\n      />\n      <Checkbox.Item\n        value=\"ai\"\n        label=\"AI 提示词\"\n        description=\"发送给 AI 应用的提示词及其返回的响应。\"\n      />\n      <Checkbox.Item\n        value=\"casb\"\n        label=\"SaaS 与云存储\"\n        description=\"存储在已连接应用和云账户中的文件。\"\n      />\n      <Checkbox.Item\n        value=\"email\"\n        label=\"出站邮件\"\n        description=\"离开你所在组织的外发邮件。\"\n      />\n    </Checkbox.Group>","<Checkbox.Group\n      legend=\"此配置文件应扫描哪些内容？\"\n      appearance=\"card\"\n      orientation=\"horizontal\"\n      value={products}\n      onValueChange={setProducts}\n    >\n      <Checkbox.Item\n        value=\"gateway\"\n        label=\"Web 流量\"\n        description=\"通过 Gateway HTTP 策略进行的上传和下载。\"\n      />\n      <Checkbox.Item\n        value=\"ai\"\n        label=\"AI 提示词\"\n        description=\"发送给 AI 应用的提示词及其返回的响应。\"\n      />\n      <Checkbox.Item\n        value=\"casb\"\n        label=\"SaaS 与云存储\"\n        description=\"存储在已连接应用和云账户中的文件。\"\n      />\n      <Checkbox.Item\n        value=\"email\"\n        label=\"出站邮件\"\n        description=\"离开你所在组织的外发邮件。\"\n      />\n    </Checkbox.Group>"],"colors":["bg-lark-base","bg-lark-brand","bg-lark-brand-hover","bg-lark-brand-pressed","bg-lark-disabled","bg-lark-elevated","bg-lark-recessed","bg-lark-tint","border-lark-danger","border-lark-hairline","border-lark-interact","border-lark-line","ring-lark-brand","ring-lark-brand-pressed","ring-lark-danger","ring-lark-disabled","ring-lark-line","ring-lark-outline","text-lark-danger","text-lark-default","text-lark-inactive","text-lark-inverse","text-lark-subtle"],"subComponents":{"Item":{"name":"Item","description":"Item sub-component","props":{}},"Group":{"name":"Group","description":"Group sub-component","props":{"legend":{"type":"string","optional":true,"description":"Legend text for the group. For more control over legend styling, omit this prop and use `<Checkbox.Legend>` as a child instead."},"children":{"type":"ReactNode","required":true,"description":"Child Checkbox.Item components (and optionally a Checkbox.Legend)"},"error":{"type":"string","optional":true,"description":"Error message for the group (only appears in groups, not single checkboxes)"},"description":{"type":"ReactNode","optional":true,"description":"Helper text for the group"},"value":{"type":"string[]","optional":true,"description":"Values of checkboxes that should be checked (controlled)"},"allValues":{"type":"string[]","optional":true,"description":"All possible checkbox values (required for parent checkbox pattern)"},"disabled":{"type":"boolean","optional":true,"description":"Whether all checkboxes in the group are disabled"},"orientation":{"type":"\"vertical\" | \"horizontal\"","optional":true,"description":"Layout direction of the checkbox items"},"appearance":{"type":"LarkCheckboxAppearance","optional":true,"description":"Visual appearance applied to all Checkbox.Item children. - `\"default\"` — Standard inline checkbox items - `\"card\"` — Choice card with border, padding, and highlighted selection state Individual items can override this with their own `appearance` prop."},"controlFirst":{"type":"boolean","optional":true,"description":"When true, checkbox appears before label. When false, label appears before checkbox. Defaults to true for default appearance and false for card appearance."},"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"Legend":{"name":"Legend","description":"Legend sub-component","props":{"children":{"type":"ReactNode","required":true,"description":"Legend content"},"className":{"type":"string","optional":true,"description":"Additional CSS classes (e.g. \"sr-only\" to visually hide the legend)"}}}},"styling":{"dimensions":"h-4 w-4","borderRadius":"rounded-sm","baseTokens":["bg-lark-base","ring-lark-line"],"states":{"checked":["bg-lark-contrast","text-lark-inverse"],"indeterminate":["bg-lark-contrast","text-lark-inverse"],"error":["ring-lark-danger"],"hover":["ring-lark-hairline"],"focus":["ring-lark-hairline"],"disabled":["opacity-50","cursor-not-allowed"]},"icons":[{"name":"ph-check","state":"checked","size":12},{"name":"ph-minus","state":"indeterminate","size":12}]}},"ChoroplethMap":{"name":"ChoroplethMap","type":"component","description":"ChoroplethMap component","importPath":"@lark-ui/core","category":"Data Visualization","props":{"echarts":{"type":"typeof echarts","required":true,"description":"The ECharts core instance imported by the consumer (passed in for tree-shaking). Requires `MapChart`, `VisualMapComponent`, `TooltipComponent`, and a renderer registered via `echarts.use([...])`."},"geoJson":{"type":"MapGeoJson","required":true,"description":"GeoJSON `FeatureCollection` whose regions are shaded by value."},"mapName":{"type":"string","optional":true,"description":"Optional stable ECharts map registry name. Set this when the same GeoJSON is parsed into new object instances across mounts and should reuse one global ECharts registration."},"data":{"type":"T[]","required":true,"description":"Raw data rows. The region key and value are read via the accessors below."},"name":{"type":"MapAccessor<T, string>","required":true,"description":"Region-key accessor (key of `T` or `(row) => string`). Each row is joined to a GeoJSON feature whose `nameProperty` equals this value."},"value":{"type":"MapAccessor<T, number>","required":true,"description":"Value accessor — drives the region's fill colour."},"nameProperty":{"type":"string","optional":true,"description":"GeoJSON feature property to join on. Default: `\"name\"`. Real-world data is often more reliably matched on an ISO-code property (e.g. `\"iso_a2\"`)."},"colorRange":{"type":"string[]","optional":true,"description":"Sequential colour ramp (low → high). Defaults to the Lark choropleth blues, tuned to stay distinct from the no-data fill. Distributed across the continuous gradient."},"noDataColor":{"type":"string","optional":true,"description":"Fill for regions with no matching data row. Defaults to the neutral land grey."},"showLegend":{"type":"boolean","optional":true,"description":"Show the visualMap colour legend. Default: `false`."},"showTooltip":{"type":"boolean","optional":true,"description":"Show the tooltip. Default: `true`."},"valueFormat":{"type":"(value: number) => string","optional":true,"description":"Format the value for the default tooltip. Default: `toLocaleString()`."},"tooltipFormatter":{"type":"(row: T) => string","optional":true,"description":"Override the tooltip content for a row. Returns an HTML string rendered by ECharts' own tooltip. USE WITH CAUTION: the return value is injected as HTML. Escape any user-provided strings to avoid XSS."},"center":{"type":"[number, number]","optional":true,"description":"Map center as `[longitude, latitude]`. Defaults to auto-fit."},"zoom":{"type":"number","optional":true,"description":"Zoom level — multiplies the auto-fit scale. Default: `1.25`."},"roam":{"type":"boolean","optional":true,"description":"Enable drag-to-pan and scroll-to-zoom. Default: `false`."},"projection":{"type":"MapProjection | null","optional":true,"description":"Geographic projection. Defaults to a latitude-clamped Mercator (flat 2D web-map look). Pass another d3-geo projection to override, or `null` for ECharts' raw equirectangular plotting. Use a stable reference (module-level or memoised): a new object each render rebuilds the view and resets a roamed/zoomed map."},"aspectRatio":{"type":"number | string","optional":true,"description":"Container aspect ratio as `width / height` (e.g. `1.7` or `\"16 / 9\"`). The height derives from the rendered width so the map fills the frame with no letterboxing. Defaults to the projected aspect of the displayed window, so the regions fit edge-to-edge. Pass `height` to fix a pixel height instead."},"height":{"type":"number","optional":true,"description":"Fixed chart height in pixels. Overrides `aspectRatio` when set. Leave unset to size by aspect ratio (the default) so the map fills the container."},"className":{"type":"string","optional":true},"isDarkMode":{"type":"boolean","optional":true}},"examples":["<ChoroplethMap<CountryTraffic>\n      echarts={echarts}\n      geoJson={geoJson}\n      data={countries}\n      name=\"country\"\n      value=\"requests\"\n      valueFormat={fmt}\n      isDarkMode={isDarkMode}\n    />"],"colors":[]},"ClipboardText":{"name":"ClipboardText","type":"component","description":"Read-only text field with a one-click copy-to-clipboard button.","importPath":"@lark-ui/core","category":"Action","props":{"size":{"type":"enum","optional":true,"description":"Size of the clipboard text field.\n- `\"sm\"` — Small clipboard text for compact UIs\n- `\"base\"` — Default clipboard text size\n- `\"lg\"` — Large clipboard text for prominent display","values":["sm","base","lg"],"descriptions":{"sm":"Small clipboard text for compact UIs","base":"Default clipboard text size","lg":"Large clipboard text for prominent display"},"classes":{"sm":"text-xs","base":"text-base","lg":"text-lg"},"default":"lg"},"text":{"type":"string","required":true,"description":"The text to display and copy to clipboard."},"textToCopy":{"type":"string","optional":true,"description":"If provided, this text will be copied to clipboard instead of the `text` prop."},"masked":{"type":"boolean","optional":true,"description":"Masks the text initially and adds a control to reveal or hide it."},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"tooltip":{"type":"object","optional":true,"description":"Tooltip config. Shows tooltip on hover, anchored toast on click."},"labels":{"type":"object","optional":true,"description":"Accessible labels for i18n."}},"examples":["<ClipboardText text=\"0c239dd2\" />","<ClipboardText text=\"abc123\" />","<ClipboardText text=\"sk_live_51H8...\" />","<div className=\"w-full max-w-xs\">\n      <ClipboardText className=\"w-full\" text=\"sk_live_51H8_abc123\" masked />\n    </div>","<ClipboardText\n      text=\"sk_live_***********\"\n      textToCopy=\"sk_live_51H8_abc123\"\n    />","<ClipboardText text=\"https://example.com/very/long/url/path\" />","<ClipboardText\n      text=\"npx lark-ui add button\"\n      tooltip={{ text: \"复制\", copiedText: \"已复制！\", side: \"top\" }}\n    />"],"colors":["bg-lark-base","border-lark-line","ring-lark-border","ring-lark-line","text-lark-default"],"styling":{"baseTokens":["bg-lark-base","text-lark-default","ring-lark-line","border-lark-fill"],"states":{"input":["bg-lark-control","text-lark-default","ring-lark-line"],"text":["bg-lark-base","font-mono"],"button":["border-lark-fill"]},"inputStyles":{"base":"bg-lark-control text-lark-default ring ring-lark-line","sizes":{"xs":"h-5 gap-1 rounded-sm px-1.5 text-xs","sm":"h-6.5 gap-1 rounded-md px-2 text-xs","base":"h-9 gap-1.5 rounded-lg px-3 text-base","lg":"h-10 gap-2 rounded-lg px-4 text-base"}},"sizeVariants":{"sm":{"height":26,"classes":"text-xs","buttonSize":"sm","dimensions":{"paddingX":8,"gap":1,"borderRadius":6,"fontSize":12}},"base":{"height":36,"classes":"text-sm","buttonSize":"base","dimensions":{"paddingX":12,"gap":6,"borderRadius":8,"fontSize":14}},"lg":{"height":40,"classes":"text-sm","buttonSize":"lg","dimensions":{"paddingX":16,"gap":8,"borderRadius":8,"fontSize":14}}},"icons":[{"name":"ph-clipboard","state":"default","size":16},{"name":"ph-check","state":"copied","size":16}]}},"Code":{"name":"Code","type":"component","description":"Code component","importPath":"@lark-ui/core","category":"Display","props":{"lang":{"type":"enum","optional":true,"description":"Language hint for the code content.\n- `\"ts\"` — TypeScript code\n- `\"tsx\"` — TypeScript JSX code\n- `\"jsonc\"` — JSON with comments\n- `\"bash\"` — Shell/Bash commands\n- `\"css\"` — CSS styles","values":["ts","tsx","jsonc","bash","css"],"descriptions":{"ts":"TypeScript code","tsx":"TypeScript JSX code","jsonc":"JSON with comments","bash":"Shell/Bash commands","css":"CSS styles"},"default":"ts"},"code":{"type":"string","required":true,"description":"The code string to display."},"values":{"type":"Record<string, { value: string; highlight?: boolean }>","optional":true,"description":"Template values for `{{key}}` interpolation. Values with `highlight: true` are visually emphasized."},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."}},"examples":[],"colors":["bg-lark-base","bg-lark-code-surface","border-lark-hairline","text-lark-subtle"],"subComponents":{"Block":{"name":"Block","description":"Block sub-component","props":{"code":{"type":"string","required":true,"description":"The code string to display."},"lang":{"type":"CodeLang","optional":true,"description":"Language hint for the code content."}}}},"styling":{"baseTokens":["text-lark-subtle"],"typography":{"fontFamily":"font-mono","fontSize":"text-sm","lineHeight":"leading-[20px]"},"dimensions":{"margin":"m-0","padding":"p-0","width":"w-auto"},"appearance":{"borderRadius":"rounded-none","border":"border-none","background":"bg-transparent"}}},"Collapsible":{"name":"Collapsible","type":"component","description":"Collapsible — a composable disclosure component for showing/hiding content.","importPath":"@lark-ui/core","category":"Display","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes"},"onOpenChange":{"type":"(open: boolean) => void","description":"Callback when collapsed state changes"}},"examples":["<div className=\"w-full\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.DefaultTrigger>Lark 是什么？</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Lark 是飞书宇宙设计系统。</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>","<div className=\"w-full\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.DefaultTrigger>Lark 是什么？</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Lark 是飞书宇宙设计系统。</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>","<div className=\"w-full space-y-2\">\n      <Collapsible.Root open={open1} onOpenChange={setOpen1}>\n        <Collapsible.DefaultTrigger>Lark 是什么？</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Lark 是飞书宇宙设计系统。</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n      <Collapsible.Root open={open2} onOpenChange={setOpen2}>\n        <Collapsible.DefaultTrigger>我该如何使用？</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>安装组件并导入到你的项目中。</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n      <Collapsible.Root open={open3} onOpenChange={setOpen3}>\n        <Collapsible.DefaultTrigger>它是开源的吗？</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>查看仓库以了解许可证信息。</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>","<div className=\"w-full\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.Trigger render={<Button variant=\"secondary\" size=\"sm\" />}>\n          {isOpen ? \"隐藏详情\" : \"显示详情\"}\n        </Collapsible.Trigger>\n        <Collapsible.Panel className=\"mt-3 rounded-lg bg-lark-tint p-4\">\n          <Text>此面板使用自定义样式，而不是默认的左侧边框强调样式。</Text>\n        </Collapsible.Panel>\n      </Collapsible.Root>\n    </div>","<div className=\"w-full space-y-4\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.DefaultTrigger>编辑详情</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel keepMounted>\n          <Text>\n            在下方输入内容，然后折叠并重新展开——由于面板保持挂载，你的输入会被保留。\n          </Text>\n          <Input label=\"名称\" placeholder=\"在此输入…\" />\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>","<div className=\"w-full\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.DefaultTrigger>联系设置</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <form\n            className=\"flex max-w-sm flex-col gap-4\"\n            onSubmit={(event) => event.preventDefault()}\n          >\n            <Input label=\"邮箱\" placeholder=\"user@example.com\" type=\"email\" />\n            <Input label=\"团队名称\" placeholder=\"设计工程\" />\n            <Button type=\"submit\">保存设置</Button>\n          </form>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>","<div className=\"w-full space-y-2\">\n      {items.map((item, i) => (\n        <Collapsible.Root\n          key={i}\n          open={activeIndex === i}\n          onOpenChange={(open) => setActiveIndex(open ? i : null)}\n        >\n          <Collapsible.DefaultTrigger>{item.title}</Collapsible.DefaultTrigger>\n          <Collapsible.DefaultPanel>\n            <Text>{item.content}</Text>\n          </Collapsible.DefaultPanel>\n        </Collapsible.Root>\n      ))}\n    </div>"],"colors":["bg-lark-fill-hover","bg-lark-fill-selected","border-lark-line","text-lark-default","text-lark-inactive","text-lark-subtle"],"subComponents":{"Root":{"name":"Root","description":"Root sub-component","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"Trigger":{"name":"Trigger","description":"Trigger sub-component","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"Panel":{"name":"Panel","description":"Panel sub-component","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"DefaultTrigger":{"name":"DefaultTrigger","description":"DefaultTrigger sub-component","props":{"children":{"type":"ReactNode","required":true,"description":"Label text displayed in the trigger"},"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"DefaultPanel":{"name":"DefaultPanel","description":"DefaultPanel sub-component","props":{"children":{"type":"ReactNode","required":true,"description":"Panel content"},"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}}}},"Combobox":{"name":"Combobox","type":"component","description":"Combobox — autocomplete input with filterable dropdown list.","importPath":"@lark-ui/core","category":"Input","props":{"size":{"type":"enum","optional":true,"description":"Size of the combobox trigger. Matches Input component sizes.\n- `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n- `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n- `\"base\"` — Default size (h-9 / 36px)\n- `\"lg\"` — Large for prominent fields (h-10 / 40px)","values":["xs","sm","base","lg"],"default":"base"},"inputSide":{"type":"enum","optional":true,"description":"Position of the text input relative to chips in multi-select mode.\n- `\"right\"` — Input inline to the right of chips\n- `\"top\"` — Input above chips","values":["right","top"],"descriptions":{"right":"Input positioned inline to the right of chips","top":"Input positioned above chips"},"default":"right"},"items":{"type":"T[]","required":true,"description":"Array of items to display in the dropdown"},"value":{"type":"T | T[]","optional":true,"description":"Currently selected value(s)"},"children":{"type":"ReactNode","optional":true,"description":"Combobox content (trigger, content, items)"},"className":{"type":"string","optional":true,"description":"Additional CSS classes"},"label":{"type":"ReactNode","optional":true,"description":"Label content for the combobox (enables Field wrapper) - can be a string or any React node"},"required":{"type":"boolean","optional":true,"description":"Whether the combobox is required"},"labelTooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content to display next to the label via an info icon"},"description":{"type":"ReactNode","optional":true,"description":"Helper text displayed below the combobox"},"error":{"type":"string | object","optional":true,"description":"Error message or validation error object"},"onValueChange":{"type":"(value: T | T[]) => void","description":"Callback when selection changes"},"multiple":{"type":"boolean","description":"Allow multiple selections"},"isItemEqualToValue":{"type":"(item: T, value: T) => boolean","description":"Custom equality function for comparing items"}},"examples":["<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={fruits}\n    >\n      <Combobox.TriggerInput placeholder=\"请选择\" />\n      <Combobox.Content>\n        <Combobox.Empty />\n        <Combobox.List>\n          {(item: string) => (\n            <Combobox.Item key={item} value={item}>\n              {item}\n            </Combobox.Item>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>","<Combobox\n      value={value}\n      onValueChange={(nextValue) => setValue(nextValue as DatabaseItem | null)}\n      items={databaseItems}\n    >\n      <Combobox.TriggerValue className=\"w-[240px]\" placeholder=\"选择数据库\" />\n      <Combobox.Content>\n        <Combobox.Input placeholder=\"搜索数据库\" />\n        <Combobox.Empty>未找到数据库。</Combobox.Empty>\n        <Combobox.List>\n          {(database: DatabaseItem) => (\n            <Combobox.Item key={database.value} value={database}>\n              {database.label}\n            </Combobox.Item>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>","<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as Language)}\n      items={languages}\n    >\n      <Combobox.TriggerValue className=\"w-[200px]\" />\n      <Combobox.Content>\n        <Combobox.Input placeholder=\"搜索语言\" />\n        <Combobox.Empty />\n        <Combobox.List>\n          {(item: Language) => (\n            <Combobox.Item key={item.value} value={item}>\n              {item.emoji} {item.label}\n            </Combobox.Item>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>","<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as Language | null)}\n      items={languages}\n    >\n      <Combobox.TriggerValue className=\"w-[200px]\" placeholder=\"选择语言\" />\n      <Combobox.Content>\n        <Combobox.Input placeholder=\"搜索语言\" />\n        <Combobox.Empty />\n        <Combobox.List>\n          {(item: Language) => (\n            <Combobox.Item key={item.value} value={item}>\n              {item.emoji} {item.label}\n            </Combobox.Item>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>","<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as ServerLocation | null)}\n      items={servers}\n    >\n      <Combobox.TriggerInput className=\"w-[200px]\" placeholder=\"选择服务器\" />\n      <Combobox.Content>\n        <Combobox.Empty />\n        <Combobox.List>\n          {(group: ServerLocationGroup) => (\n            <Combobox.Group key={group.value} items={group.items}>\n              <Combobox.GroupLabel>{group.value}</Combobox.GroupLabel>\n              <Combobox.Collection>\n                {(item: ServerLocation) => (\n                  <Combobox.Item key={item.value} value={item}>\n                    {item.label}\n                  </Combobox.Item>\n                )}\n              </Combobox.Collection>\n            </Combobox.Group>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>","<div className=\"flex gap-2\">\n      <Combobox\n        value={value}\n        onValueChange={setValue}\n        items={bots}\n        isItemEqualToValue={(bot: BotItem, selected: BotItem) =>\n          bot.value === selected.value\n        }\n        multiple\n      >\n        <Combobox.TriggerMultipleWithInput\n          className=\"w-[400px]\"\n          placeholder=\"选择机器人\"\n          renderItem={(selected: BotItem) => (\n            <Combobox.Chip key={selected.value}>{selected.label}</Combobox.Chip>\n          )}\n          inputSide=\"right\"\n        />\n        <Combobox.Content className=\"max-h-[200px] min-w-auto overflow-y-auto\">\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: BotItem) => (\n              <Combobox.Item key={item.value} value={item}>\n                <div className=\"flex gap-2\">\n                  <Text>{item.label}</Text>\n                  <Text variant=\"secondary\">{item.author}</Text>\n                </div>\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n      <Button variant=\"primary\">提交</Button>\n    </div>","<div className=\"w-80\">\n      <Combobox\n        items={databases}\n        value={value}\n        onValueChange={setValue}\n        label=\"数据库\"\n        description=\"选择你偏好的数据库\"\n      >\n        <Combobox.TriggerInput placeholder=\"选择数据库\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: DatabaseItem) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>","<div className=\"flex flex-wrap items-start gap-4\">\n      <Combobox value=\"苹果\" items={fruits} disabled>\n        <Combobox.TriggerInput className=\"w-[200px]\" placeholder=\"选择水果\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: string) => (\n              <Combobox.Item key={item} value={item}>\n                {item}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n\n      <Combobox value={languages[0]} items={languages} disabled>\n        <Combobox.TriggerValue className=\"w-[200px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"搜索\" />\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: Language) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.emoji} {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>","<div className=\"w-80\">\n      <Combobox value={value} onValueChange={setValue} items={items}>\n        <Combobox.TriggerInput placeholder=\"选择数据库\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: DatabaseItemWithDisabled) => (\n              <Combobox.Item\n                key={item.value}\n                value={item}\n                disabled={item.disabled}\n              >\n                <span>\n                  {item.label}\n                  {item.reason && (\n                    <Text variant=\"secondary\" size=\"xs\" as=\"span\">\n                      {\" — \"}\n                      {item.reason}\n                    </Text>\n                  )}\n                </span>\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>","<div className=\"w-80\">\n      <Combobox\n        items={databases}\n        value={value}\n        onValueChange={setValue}\n        label=\"数据库\"\n        error={{ message: \"请选择一个数据库\", match: true }}\n      >\n        <Combobox.TriggerInput placeholder=\"选择数据库\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: DatabaseItem) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>","<div className=\"flex flex-wrap items-center gap-4\">\n      <Combobox\n        size=\"sm\"\n        value={smValue}\n        onValueChange={(v) => setSmValue(v as string | null)}\n        items={fruits.slice(0, 8)}\n      >\n        <Combobox.TriggerInput placeholder=\"小（sm）\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: string) => (\n              <Combobox.Item key={item} value={item}>\n                {item}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n      <Combobox\n        size=\"base\"\n        value={baseValue}\n        onValueChange={(v) => setBaseValue(v as string | null)}\n        items={fruits.slice(0, 8)}\n      >\n        <Combobox.TriggerInput placeholder=\"标准（默认）\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: string) => (\n              <Combobox.Item key={item} value={item}>\n                {item}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>","<div className=\"flex flex-wrap items-center gap-4\">\n      <Combobox\n        size=\"sm\"\n        value={smValue}\n        onValueChange={(v) => setSmValue(v as Language)}\n        items={languages}\n      >\n        <Combobox.TriggerValue className=\"w-[160px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"搜索\" />\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: Language) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.emoji} {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n      <Combobox\n        size=\"base\"\n        value={baseValue}\n        onValueChange={(v) => setBaseValue(v as Language)}\n        items={languages}\n      >\n        <Combobox.TriggerValue className=\"w-[180px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"搜索\" />\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: Language) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.emoji} {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>","<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as Language)}\n      items={languages}\n    >\n      <Combobox.Trigger render={<Button variant=\"ghost\" size=\"sm\" />}>\n        <Combobox.Value>\n          <span className=\"truncate\">\n            {value.emoji} {value.label}\n          </span>\n        </Combobox.Value>\n        <CaretUpDownIcon size={14} className=\"shrink-0 text-lark-subtle\" />\n      </Combobox.Trigger>\n      <Combobox.Content>\n        <Combobox.Input placeholder=\"搜索语言\" />\n        <Combobox.Empty />\n        <Combobox.List>\n          {(item: Language) => (\n            <Combobox.Item key={item.value} value={item}>\n              {item.emoji} {item.label}\n            </Combobox.Item>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>"],"colors":["bg-lark-control","bg-lark-elevated","bg-lark-fill-hover","bg-lark-overlay","border-lark-line","ring-lark-border","ring-lark-line","text-lark-brand","text-lark-brand-pressed","text-lark-default","text-lark-inactive","text-lark-placeholder","text-lark-subtle"],"subComponents":{"Content":{"name":"Content","description":"Content sub-component","props":{"className":{"type":"string","optional":true},"align":{"type":"ComboboxBase.Positioner.Props[\"align\"]","optional":true},"alignOffset":{"type":"ComboboxBase.Positioner.Props[\"alignOffset\"]","optional":true},"side":{"type":"ComboboxBase.Positioner.Props[\"side\"]","optional":true},"sideOffset":{"type":"ComboboxBase.Positioner.Props[\"sideOffset\"]","optional":true},"anchor":{"type":"ComboboxBase.Positioner.Props[\"anchor\"]","optional":true},"positionMethod":{"type":"ComboboxBase.Positioner.Props[\"positionMethod\"]","optional":true},"collisionAvoidance":{"type":"ComboboxBase.Positioner.Props[\"collisionAvoidance\"]","optional":true},"collisionBoundary":{"type":"ComboboxBase.Positioner.Props[\"collisionBoundary\"]","optional":true},"collisionPadding":{"type":"ComboboxBase.Positioner.Props[\"collisionPadding\"]","optional":true},"sticky":{"type":"ComboboxBase.Positioner.Props[\"sticky\"]","optional":true},"disableAnchorTracking":{"type":"ComboboxBase.Positioner.Props[\"disableAnchorTracking\"]","optional":true},"container":{"type":"PortalContainer","optional":true}}},"TriggerValue":{"name":"TriggerValue","description":"TriggerValue sub-component","props":{}},"TriggerInput":{"name":"TriggerInput","description":"TriggerInput sub-component","props":{}},"TriggerMultipleWithInput":{"name":"TriggerMultipleWithInput","description":"TriggerMultipleWithInput sub-component","props":{}},"Chip":{"name":"Chip","description":"Chip sub-component","props":{}},"Item":{"name":"Item","description":"Item sub-component","props":{}},"Input":{"name":"Input","description":"Input sub-component","props":{}},"Empty":{"name":"Empty","description":"Empty sub-component","props":{}},"GroupLabel":{"name":"GroupLabel","description":"GroupLabel sub-component","props":{}},"Group":{"name":"Group","description":"Group sub-component","props":{}},"List":{"name":"List","description":"List sub-component","props":{}},"Collection":{"name":"Collection","description":"Renders filtered list items. Use when you need more control over item rendering.","props":{"children":{"type":"(item: T, index: number) => ReactNode","required":true,"description":"Function that receives each filtered item and returns a node"}},"isPassThrough":true,"baseComponent":"ComboboxBase.Collection","usageExamples":["<Combobox.Collection>\n  {(item, index) => (\n    <Combobox.Item key={index} value={item}>\n      {item.label}\n    </Combobox.Item>\n  )}\n</Combobox.Collection>"]},"Trigger":{"name":"Trigger","description":"Trigger sub-component (wraps ComboboxBase)","props":{},"isPassThrough":true,"baseComponent":"ComboboxBase.Trigger"},"Value":{"name":"Value","description":"Value sub-component (wraps ComboboxBase)","props":{},"isPassThrough":true,"baseComponent":"ComboboxBase.Value"},"Icon":{"name":"Icon","description":"Icon sub-component (wraps ComboboxBase)","props":{},"isPassThrough":true,"baseComponent":"ComboboxBase.Icon"}}},"CommandPalette":{"name":"CommandPalette","type":"component","description":"CommandPalette — accessible command palette / spotlight search overlay.","importPath":"@lark-ui/core","category":"Navigation","props":{"open":{"type":"boolean","required":true,"description":"Whether the dialog is open"},"children":{"type":"ReactNode","optional":true,"description":"Child content - typically one or more Panel components"},"container":{"type":"PortalContainer","optional":true,"description":"Container element for the portal. Use this to render the command palette inside a Shadow DOM or custom container. Overrides `LarkPortalProvider` context."}},"examples":["<div className=\"flex flex-col items-start gap-4\">\n      <Button onClick={() => setOpen(true)}>打开命令面板</Button>\n      {selectedItem && (\n        <p className=\"text-sm text-lark-subtle\">\n          最近选择： <span className=\"text-lark-default\">{selectedItem}</span>\n        </p>\n      )}\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={filteredGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        onSelect={(item, { newTab }) => {\n          console.log(\"Selected:\", item.title, newTab ? \"(new tab)\" : \"\");\n          handleSelect(item);\n        }}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input placeholder=\"输入命令或搜索内容…\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(group: CommandGroup) => (\n              <CommandPalette.Group key={group.id} items={group.items}>\n                <CommandPalette.GroupLabel>\n                  {group.label}\n                </CommandPalette.GroupLabel>\n                <CommandPalette.Items>\n                  {(item: CommandItem) => (\n                    <CommandPalette.Item\n                      key={item.id}\n                      value={item}\n                      onClick={() => handleSelect(item)}\n                    >\n                      <span className=\"flex items-center gap-3\">\n                        {item.icon && (\n                          <span className=\"text-lark-subtle\">{item.icon}</span>\n                        )}\n                        <span>{item.title}</span>\n                      </span>\n                    </CommandPalette.Item>\n                  )}\n                </CommandPalette.Items>\n              </CommandPalette.Group>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>未找到命令</CommandPalette.Empty>\n        </CommandPalette.List>\n        <CommandPalette.Footer>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-lark-hairline bg-lark-base px-1.5 py-0.5 text-[10px]\">\n              ↑↓\n            </kbd>\n            <span>导航</span>\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-lark-hairline bg-lark-base px-1.5 py-0.5 text-[10px]\">\n              ↵\n            </kbd>\n            <span>选择</span>\n          </span>\n        </CommandPalette.Footer>\n      </CommandPalette.Root>\n    </div>","<div>\n      <Button onClick={() => setOpen(true)}>打开简易面板</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={simpleItems}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(item) => item.title}\n        onSelect={(item) => {\n          console.log(\"Selected:\", item.title);\n          setOpen(false);\n        }}\n        getSelectableItems={(items) => items}\n      >\n        <CommandPalette.Input placeholder=\"搜索操作…\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(item: SimpleItem) => (\n              <CommandPalette.Item\n                key={item.id}\n                value={item}\n                onClick={() => {\n                  console.log(\"Clicked:\", item.title);\n                  setOpen(false);\n                }}\n              >\n                {item.title}\n              </CommandPalette.Item>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>未找到操作</CommandPalette.Empty>\n        </CommandPalette.List>\n      </CommandPalette.Root>\n    </div>","<div>\n      <Button onClick={handleOpen}>打开（带加载状态）</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={loading ? [] : filteredGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input placeholder=\"搜索…\" />\n        <CommandPalette.List>\n          {loading ? (\n            <CommandPalette.Loading />\n          ) : (\n            <>\n              <CommandPalette.Results>\n                {(group: CommandGroup) => (\n                  <CommandPalette.Group key={group.id} items={group.items}>\n                    <CommandPalette.GroupLabel>\n                      {group.label}\n                    </CommandPalette.GroupLabel>\n                    <CommandPalette.Items>\n                      {(item: CommandItem) => (\n                        <CommandPalette.Item\n                          key={item.id}\n                          value={item}\n                          onClick={() => setOpen(false)}\n                        >\n                          <span className=\"flex items-center gap-3\">\n                            {item.icon && (\n                              <span className=\"text-lark-subtle\">\n                                {item.icon}\n                              </span>\n                            )}\n                            <span>{item.title}</span>\n                          </span>\n                        </CommandPalette.Item>\n                      )}\n                    </CommandPalette.Items>\n                  </CommandPalette.Group>\n                )}\n              </CommandPalette.Results>\n              <CommandPalette.Empty>未找到结果</CommandPalette.Empty>\n            </>\n          )}\n        </CommandPalette.List>\n      </CommandPalette.Root>\n    </div>","<div className=\"flex flex-col items-start gap-4\">\n      <Button onClick={() => setOpen(true)}>打开面板（禁用自动补全）</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={filteredGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        onSelect={(item) => {\n          console.log(\"Selected:\", item.title);\n          setOpen(false);\n          setSearch(\"\");\n        }}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input\n          placeholder=\"搜索命令…\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoCapitalize=\"none\"\n          spellCheck={false}\n          data-1p-ignore=\"true\"\n          data-lpignore=\"true\"\n        />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(group: CommandGroup) => (\n              <CommandPalette.Group key={group.id} items={group.items}>\n                <CommandPalette.GroupLabel>\n                  {group.label}\n                </CommandPalette.GroupLabel>\n                <CommandPalette.Items>\n                  {(item: CommandItem) => (\n                    <CommandPalette.Item\n                      key={item.id}\n                      value={item}\n                      onClick={() => {\n                        setOpen(false);\n                        setSearch(\"\");\n                      }}\n                    >\n                      <span className=\"flex items-center gap-3\">\n                        {item.icon && (\n                          <span className=\"text-lark-subtle\">{item.icon}</span>\n                        )}\n                        <span>{item.title}</span>\n                      </span>\n                    </CommandPalette.Item>\n                  )}\n                </CommandPalette.Items>\n              </CommandPalette.Group>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>未找到命令</CommandPalette.Empty>\n        </CommandPalette.List>\n      </CommandPalette.Root>\n    </div>","<div>\n      <Button onClick={() => setOpen(true)}>打开（带 ResultItem）</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={searchResults}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(item) => item.title}\n        getSelectableItems={(items) => items}\n      >\n        <CommandPalette.Input placeholder=\"搜索文档…\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(item: SearchResult) => (\n              <CommandPalette.ResultItem\n                key={item.id}\n                value={item}\n                title={item.title}\n                breadcrumbs={item.breadcrumbs}\n                icon={item.icon}\n                onClick={() => {\n                  console.log(\"Navigate to:\", item.title);\n                  setOpen(false);\n                }}\n              />\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>未找到页面</CommandPalette.Empty>\n        </CommandPalette.List>\n        <CommandPalette.Footer>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-lark-hairline bg-lark-base px-1.5 py-0.5 text-[10px]\">\n              ↑↓\n            </kbd>\n            <span>导航</span>\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-lark-hairline bg-lark-base px-1.5 py-0.5 text-[10px]\">\n              ⌘↵\n            </kbd>\n            <span>在新标签页打开</span>\n          </span>\n        </CommandPalette.Footer>\n      </CommandPalette.Root>\n    </div>"],"colors":["bg-lark-elevated","bg-lark-fill-hover","bg-lark-fill-pressed","bg-lark-mask","bg-lark-warning","ring-lark-brand","text-lark-default","text-lark-inactive","text-lark-placeholder","text-lark-subtle"]},"DatePicker":{"name":"DatePicker","type":"component","description":"DatePicker — a date selection calendar.","importPath":"@lark-ui/core","category":"Other","props":{"className":{"type":"string","description":"Additional CSS classes"},"children":{"type":"ReactNode","description":"Child elements"}},"examples":["<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        className=\"p-3\"\n        mode=\"single\"\n        selected={date}\n        onChange={(d) => {\n          if (d) {\n            setDate(d);\n          }\n        }}\n      />\n      <p className=\"text-sm text-lark-subtle\">\n        已选择：{date ? date.toLocaleDateString() : \"无\"}\n      </p>\n    </div>","<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        className=\"p-3\"\n        mode=\"multiple\"\n        selected={dates}\n        onChange={setDates}\n        max={5}\n      />\n      <p className=\"text-sm text-lark-subtle\">\n        已选择：{dates?.length ?? 0} 个日期\n      </p>\n    </div>","<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        className=\"p-3\"\n        mode=\"range\"\n        selected={range}\n        onChange={setRange}\n        numberOfMonths={2}\n      />\n      <p className=\"text-sm text-lark-subtle\">\n        范围：\n        {range?.from\n          ? `${range.from.toLocaleDateString()} - ${range.to?.toLocaleDateString() ?? \"...\"}`\n          : \"无\"}\n      </p>\n    </div>","<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        className=\"p-3\"\n        mode=\"range\"\n        selected={range}\n        onChange={setRange}\n        min={3}\n        max={7}\n        footer={<span className=\"text-xs text-lark-subtle\">选择 3-7 晚</span>}\n      />\n    </div>","<DatePicker\n      className=\"p-3\"\n      mode=\"single\"\n      selected={date}\n      onChange={setDate}\n      captionLayout=\"dropdown\"\n      startMonth={new Date(2020, 0)}\n      endMonth={new Date(2030, 11)}\n    />","<Popover>\n      <Popover.Trigger\n        render={<Button variant=\"outline\" icon={CalendarDotsIcon} />}\n      >\n        {date ? date.toLocaleDateString() : \"选择日期\"}\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker mode=\"single\" selected={date} onChange={setDate} />\n      </Popover.Content>\n    </Popover>","<Popover>\n      <Popover.Trigger\n        render={<Button variant=\"outline\" icon={CalendarDotsIcon} />}\n      >\n        {formatRange()}\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker\n          mode=\"range\"\n          selected={range}\n          onChange={setRange}\n          numberOfMonths={2}\n        />\n      </Popover.Content>\n    </Popover>","<Popover>\n      <Popover.Trigger\n        render={<Button variant=\"outline\" icon={CalendarDotsIcon} />}\n      >\n        {formatRange()}\n      </Popover.Trigger>\n      <Popover.Content className=\"p-0\">\n        <div className=\"flex\">\n          <div className=\"flex flex-col gap-1 border-r border-lark-hairline p-2 text-sm\">\n            {presets.map((preset) => {\n              const isActive = isPresetActive(preset);\n              return (\n                <button\n                  key={preset.label}\n                  type=\"button\"\n                  onClick={() => handlePresetClick(preset)}\n                  className={`rounded-md px-3 py-1.5 text-left whitespace-nowrap ${\n                    isActive\n                      ? \"bg-lark-contrast text-lark-inverse\"\n                      : \"text-lark-subtle hover:bg-lark-control\"\n                  }`}\n                >\n                  {preset.label}\n                </button>\n              );\n            })}\n          </div>\n          <div className=\"p-3\">\n            <DatePicker\n              mode=\"range\"\n              selected={range}\n              onChange={setRange}\n              month={month}\n              onMonthChange={setMonth}\n              numberOfMonths={2}\n            />\n          </div>\n        </div>\n      </Popover.Content>\n    </Popover>","<DatePicker\n      className=\"p-3\"\n      mode=\"multiple\"\n      selected={dates}\n      onChange={setDates}\n      max={maxDays}\n      disabled={unavailableDates}\n      fixedWeeks\n      footer={\n        <p className=\"w-full pt-2 text-xs text-lark-subtle\">\n          已选择 {selectedCount}/{maxDays} 天。灰色日期不可用。\n        </p>\n      }\n    />"],"colors":["bg-lark-base","bg-lark-brand","bg-lark-brand-tint","bg-lark-inactive","bg-lark-recessed","border-lark-line","ring-lark-border","ring-lark-brand","text-lark-brand","text-lark-default","text-lark-inactive","text-lark-placeholder","text-lark-subtle"]},"DateRangePicker":{"name":"DateRangePicker","type":"component","description":"DateRangePicker — dual-calendar date range selector.","importPath":"@lark-ui/core","category":"Input","props":{"size":{"type":"enum","optional":true,"description":"Calendar size.\n- `\"sm\"` — Compact calendar for tight spaces\n- `\"base\"` — Default calendar size\n- `\"lg\"` — Large calendar for prominent date selection","values":["sm","base","lg"],"descriptions":{"sm":"Compact calendar for tight spaces","base":"Default calendar size","lg":"Large calendar for prominent date selection"},"classes":{"sm":"p-3 gap-2","base":"p-4 gap-2.5","lg":"p-5 gap-3"},"default":"base"},"variant":{"type":"enum","optional":true,"description":"Visual variant.\n- `\"default\"` — Standard appearance with overlay background\n- `\"subtle\"` — Minimal background","values":["default","subtle"],"descriptions":{"default":"Default calendar appearance","subtle":"Subtle calendar with minimal background"},"classes":{"default":"bg-lark-elevated","subtle":"bg-lark-base"},"default":"default"},"timezone":{"type":"string","optional":true,"description":"Display timezone string shown in the footer."},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"onStartDateChange":{"type":"(date: Date | null) => void","description":"Callback when start date changes"},"onEndDateChange":{"type":"(date: Date | null) => void","description":"Callback when end date changes"}},"examples":[],"colors":["bg-lark-base","bg-lark-brand","bg-lark-brand-tint","bg-lark-elevated","border-lark-line","ring-lark-brand","text-lark-brand","text-lark-default","text-lark-placeholder","text-lark-subtle"],"styling":{"sizeVariants":{"sm":{"height":0,"classes":"p-3 gap-2","dimensions":{"calendarWidth":168,"cellHeight":22,"cellWidth":24,"textSize":12,"iconSize":14,"padding":12,"gap":8}},"base":{"height":0,"classes":"p-4 gap-2.5","dimensions":{"calendarWidth":196,"cellHeight":26,"cellWidth":28,"textSize":14,"iconSize":16,"padding":16,"gap":10}},"lg":{"height":0,"classes":"p-5 gap-3","dimensions":{"calendarWidth":252,"cellHeight":32,"cellWidth":36,"textSize":16,"iconSize":18,"padding":20,"gap":12}}}}},"Dialog":{"name":"Dialog","type":"component","description":"Dialog component","importPath":"@lark-ui/core","category":"Overlay","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"children":{"type":"ReactNode","optional":true,"description":"Dialog content (typically Title, Description, Close, and action buttons)."},"container":{"type":"PortalContainer","optional":true,"description":"Container element for the portal. Use this to render the dialog inside a Shadow DOM or custom container. Overrides `LarkPortalProvider` context."},"size":{"type":"enum","optional":true,"description":"Dialog width.\n- `\"sm\"` — Small (288px) for simple confirmations\n- `\"base\"` — Default (384px)\n- `\"lg\"` — Large (512px) for complex content\n- `\"xl\"` — Extra large (768px) for detailed views","values":["base","sm","lg","xl"],"descriptions":{"base":"Default dialog width (384px)","sm":"Small dialog for simple confirmations (288px)","lg":"Large dialog for complex content (512px)","xl":"Extra large dialog for detailed views (768px)"},"classes":{"base":"sm:w-96","sm":"sm:w-72","lg":"sm:w-[32rem]","xl":"sm:w-[48rem]"},"default":"base"}},"examples":["<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>点击我</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            模态框标题\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"关闭\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"关闭\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"text-lark-subtle\">\n          这是一段示例正文，用于展示对话框中的文字排版效果。\n        </Dialog.Description>\n      </Dialog>\n    </Dialog.Root>","<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>删除</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            模态框标题\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"关闭\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"关闭\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"text-lark-subtle\">\n          这是一段示例正文，用于展示对话框中的文字排版效果。\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                取消\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                删除\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>","<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>打开限宽对话框</Button>} />\n      <Dialog className=\"max-w-lg p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            覆盖最大宽度\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"关闭\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"关闭\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"text-lark-subtle\">\n          此对话框使用 <code>className=\"max-w-lg\"</code>，桌面端宽度应保持在\n          512px 左右。\n        </Dialog.Description>\n        <div className=\"mt-4 truncate rounded-md border border-lark-line bg-lark-recessed p-3 font-mono text-sm\">\n          abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\n        </div>\n      </Dialog>\n    </Dialog.Root>","<Dialog.Root disablePointerDismissal>\n      <Dialog.Trigger\n        render={(p) => (\n          <Button {...p} variant=\"destructive\">\n            删除项目\n          </Button>\n        )}\n      />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-center gap-3\">\n          <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-lark-danger/20\">\n            <Warning size={20} className=\"text-lark-danger\" />\n          </div>\n          <Dialog.Title className=\"text-xl font-semibold\">\n            删除项目？\n          </Dialog.Title>\n        </div>\n        <Dialog.Description className=\"text-lark-subtle\">\n          此操作无法撤销，将永久删除该项目及其所有关联数据。\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                取消\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                删除\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>","<Dialog.Root role=\"alertdialog\">\n      <Dialog.Trigger\n        render={(p) => (\n          <Button {...p} variant=\"destructive\">\n            删除账户\n          </Button>\n        )}\n      />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-center gap-3\">\n          <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-lark-danger/20\">\n            <Warning size={20} className=\"text-lark-danger\" weight=\"fill\" />\n          </div>\n          <Dialog.Title className=\"text-xl font-semibold\">\n            删除账户？\n          </Dialog.Title>\n        </div>\n        <Dialog.Description className=\"text-lark-subtle\">\n          你的所有数据将从我们的服务器上永久删除。确定要继续吗？\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                取消\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                删除账户\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>","<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>打开表单</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            创建资源\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"关闭\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"关闭\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-lark-subtle\">\n          为你的新资源选择一个区域。\n        </Dialog.Description>\n        <Select\n          className=\"w-full\"\n          placeholder=\"选择区域…\"\n          renderValue={(v) => regions.find((r) => r.value === v)?.label}\n        >\n          {regions.map((region) => (\n            <Select.Option key={region.value} value={region.value}>\n              {region.label}\n            </Select.Option>\n          ))}\n        </Select>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                取消\n              </Button>\n            )}\n          />\n          <Button variant=\"primary\">创建</Button>\n        </div>\n      </Dialog>\n    </Dialog.Root>","<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>打开表单</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            创建资源\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"关闭\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"关闭\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-lark-subtle\">\n          搜索并为你的新资源选择一个区域。\n        </Dialog.Description>\n        <Combobox value={value} onValueChange={setValue} items={regions}>\n          <Combobox.TriggerInput className=\"w-full\" placeholder=\"搜索区域…\" />\n          <Combobox.Content>\n            <Combobox.Empty>未找到区域</Combobox.Empty>\n            <Combobox.List>\n              {(item: { value: string; label: string }) => (\n                <Combobox.Item key={item.value} value={item}>\n                  {item.label}\n                </Combobox.Item>\n              )}\n            </Combobox.List>\n          </Combobox.Content>\n        </Combobox>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                取消\n              </Button>\n            )}\n          />\n          <Button variant=\"primary\">创建</Button>\n        </div>\n      </Dialog>\n    </Dialog.Root>","<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>打开表单</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            资源操作\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"关闭\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"关闭\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-lark-subtle\">\n          为选中的资源选择一项操作。\n        </Dialog.Description>\n        <DropdownMenu>\n          <DropdownMenu.Trigger render={<Button>操作</Button>} />\n          <DropdownMenu.Content>\n            <DropdownMenu.Item>编辑</DropdownMenu.Item>\n            <DropdownMenu.Item>创建副本</DropdownMenu.Item>\n            <DropdownMenu.Separator />\n            <DropdownMenu.Item variant=\"danger\">删除</DropdownMenu.Item>\n          </DropdownMenu.Content>\n        </DropdownMenu>\n        <div className=\"mt-8 flex justify-end\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                关闭\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>","<div className=\"flex flex-wrap gap-2\">\n      {sizes.map(({ size, label, width }) => (\n        <Dialog.Root key={size}>\n          <Dialog.Trigger\n            render={(p) => (\n              <Button variant=\"secondary\" {...p}>\n                {label} ({width})\n              </Button>\n            )}\n          />\n          <Dialog size={size} className=\"p-8\">\n            <div className=\"mb-4 flex items-start justify-between gap-4\">\n              <Dialog.Title className=\"text-2xl font-semibold\">\n                {label} 对话框\n              </Dialog.Title>\n              <Dialog.Close\n                aria-label=\"关闭\"\n                render={(props) => (\n                  <Button\n                    {...props}\n                    variant=\"secondary\"\n                    shape=\"square\"\n                    icon={<X />}\n                    aria-label=\"关闭\"\n                  />\n                )}\n              />\n            </div>\n            <Dialog.Description className=\"text-lark-subtle\">\n              此 <code>size=\"{size}\"</code> 对话框宽度应始终保持 {width}。\n            </Dialog.Description>\n            <div className=\"mt-4 overflow-auto rounded-md border border-lark-line\">\n              <table className=\"w-max text-sm\">\n                <thead className=\"bg-lark-elevated text-left\">\n                  <tr>\n                    <th className=\"px-3 py-2\">资源</th>\n                    <th className=\"px-3 py-2\">区域</th>\n                    <th className=\"px-3 py-2\">状态</th>\n                    <th className=\"px-3 py-2\">延迟</th>\n                    <th className=\"px-3 py-2\">请求数</th>\n                    <th className=\"px-3 py-2\">最后部署时间</th>\n                  </tr>\n                </thead>\n                <tbody className=\"divide-y divide-lark-hairline\">\n                  <tr>\n                    <td className=\"px-3 py-2\">api-gateway-prod</td>\n                    <td className=\"px-3 py-2\">us-east-1</td>\n                    <td className=\"px-3 py-2 text-lark-success\">健康</td>\n                    <td className=\"px-3 py-2\">12ms</td>\n                    <td className=\"px-3 py-2\">1,234,567</td>\n                    <td className=\"px-3 py-2\">2026-06-23</td>\n                  </tr>\n                  <tr>\n                    <td className=\"px-3 py-2\">worker-analytics</td>\n                    <td className=\"px-3 py-2\">eu-west-1</td>\n                    <td className=\"px-3 py-2 text-lark-warning\">降级</td>\n                    <td className=\"px-3 py-2\">89ms</td>\n                    <td className=\"px-3 py-2\">456,789</td>\n                    <td className=\"px-3 py-2\">2026-06-22</td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n            <div className=\"mt-6 flex justify-end gap-2\">\n              <Dialog.Close\n                render={(props) => (\n                  <Button variant=\"secondary\" {...props}>\n                    关闭\n                  </Button>\n                )}\n              />\n            </div>\n          </Dialog>\n        </Dialog.Root>\n      ))}\n    </div>"],"colors":["bg-lark-elevated","bg-lark-mask","ring-lark-line","text-lark-default","text-lark-subtle"],"subComponents":{"Root":{"name":"Root","description":"Root sub-component","props":{}},"Trigger":{"name":"Trigger","description":"Trigger sub-component","props":{}},"Title":{"name":"Title","description":"Title sub-component","props":{}},"Description":{"name":"Description","description":"Description sub-component","props":{}},"Close":{"name":"Close","description":"Close sub-component","props":{}}},"styling":{"dimensions":{"sm":{"width":350,"titleSize":16,"descSize":14,"padding":24,"gap":8,"buttonSize":"sm"},"base":{"width":384,"titleSize":16,"descSize":14,"padding":24,"gap":16,"buttonSize":"base"},"lg":{"width":512,"titleSize":16,"descSize":14,"padding":24,"gap":16,"buttonSize":"base"},"xl":{"width":768,"titleSize":16,"descSize":14,"padding":24,"gap":16,"buttonSize":"base"}},"baseTokens":{"background":"bg-lark-elevated","text":"text-lark-default","borderRadius":8,"shadow":"shadow-lark-modal"},"backdrop":{"background":"bg-lark-mask","opacity":1},"header":{"title":{"fontWeight":600,"color":"text-lark-default"},"closeIcon":{"name":"ph-x","size":20,"color":"text-lark-subtle"}},"description":{"fontWeight":400,"color":"text-lark-subtle"},"buttons":{"primary":{"background":"color-primary","text":"white"},"secondary":{"ring":"color-border","text":"text-color-surface"}}}},"DropdownMenu":{"name":"DropdownMenu","type":"component","description":"DropdownMenu — accessible dropdown menu anchored to a trigger.","importPath":"@lark-ui/core","category":"Overlay","props":{"variant":{"type":"enum","optional":true,"description":"Visual style of the dropdown item.\n- `\"default\"` — Standard item appearance\n- `\"danger\"` — Destructive action with red text","values":["default","danger"],"descriptions":{"default":"Default dropdown item appearance","danger":"Destructive action item"},"classes":{"danger":"text-lark-danger data-highlighted:bg-lark-danger/5 data-highlighted:text-lark-danger active:bg-lark-danger/10"},"stateClasses":{"danger":{"active":"active:bg-lark-danger/10"}},"default":"default"}},"examples":["<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button icon={PlusIcon}>添加</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.Item>Worker</DropdownMenu.Item>\n        <DropdownMenu.Item>Pages</DropdownMenu.Item>\n        <DropdownMenu.Item>KV 命名空间</DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>","<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button>查看选项</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.Group>\n          <DropdownMenu.Label>显示</DropdownMenu.Label>\n          <DropdownMenu.CheckboxItem\n            checked={showSidebar}\n            onCheckedChange={setShowSidebar}\n          >\n            显示侧边栏\n          </DropdownMenu.CheckboxItem>\n          <DropdownMenu.CheckboxItem\n            checked={showLineNumbers}\n            onCheckedChange={setShowLineNumbers}\n          >\n            显示行号\n          </DropdownMenu.CheckboxItem>\n          <DropdownMenu.CheckboxItem\n            checked={wordWrap}\n            onCheckedChange={setWordWrap}\n          >\n            自动换行\n          </DropdownMenu.CheckboxItem>\n        </DropdownMenu.Group>\n      </DropdownMenu.Content>\n    </DropdownMenu>","<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button icon={UserIcon}>账户</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.Item icon={UserIcon}>个人资料</DropdownMenu.Item>\n        <DropdownMenu.Item icon={CreditCardIcon}>账单</DropdownMenu.Item>\n        <DropdownMenu.Item icon={MoonIcon}>深色模式</DropdownMenu.Item>\n\n        {/* Language submenu with RadioGroup */}\n        <DropdownMenu.Sub>\n          <DropdownMenu.SubTrigger icon={GlobeIcon}>\n            语言\n          </DropdownMenu.SubTrigger>\n          <DropdownMenu.SubContent>\n            <DropdownMenu.Group>\n              <DropdownMenu.RadioGroup\n                value={language}\n                onValueChange={setLanguage}\n              >\n                {languages.map((lang) => (\n                  <DropdownMenu.RadioItem key={lang.code} value={lang.code}>\n                    {lang.label}\n                    <DropdownMenu.RadioItemIndicator />\n                  </DropdownMenu.RadioItem>\n                ))}\n              </DropdownMenu.RadioGroup>\n            </DropdownMenu.Group>\n          </DropdownMenu.SubContent>\n        </DropdownMenu.Sub>\n\n        {/* Timezone submenu with RadioGroup */}\n        <DropdownMenu.Sub>\n          <DropdownMenu.SubTrigger icon={<ClockIcon weight=\"duotone\" />}>\n            设置时区\n          </DropdownMenu.SubTrigger>\n          <DropdownMenu.SubContent>\n            <DropdownMenu.Group>\n              <DropdownMenu.RadioGroup\n                value={timezone}\n                onValueChange={setTimezone}\n              >\n                {timezones.map((tz) => (\n                  <DropdownMenu.RadioItem key={tz.value} value={tz.value}>\n                    {tz.label}\n                    <DropdownMenu.RadioItemIndicator />\n                  </DropdownMenu.RadioItem>\n                ))}\n              </DropdownMenu.RadioGroup>\n            </DropdownMenu.Group>\n          </DropdownMenu.SubContent>\n        </DropdownMenu.Sub>\n\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item icon={SignOutIcon} variant=\"danger\">\n          退出登录\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>","<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button>编辑</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.Item icon={PencilSimpleIcon}>重命名</DropdownMenu.Item>\n        <DropdownMenu.Item icon={CopyIcon}>创建副本</DropdownMenu.Item>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item>移动到文件夹</DropdownMenu.Item>\n        <DropdownMenu.Item>添加到收藏夹</DropdownMenu.Item>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item icon={TrashIcon} variant=\"danger\">\n          删除\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>","<div className=\"flex flex-col items-start gap-2\">\n      <DropdownMenu>\n        <DropdownMenu.Trigger render={<Button>操作</Button>} />\n        <DropdownMenu.Content>\n          <DropdownMenu.Item\n            icon={CopyIcon}\n            onClick={() => setLastAction(\"已创建副本\")}\n          >\n            创建副本\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={PencilSimpleIcon}\n            onClick={() => setLastAction(\"已重命名\")}\n          >\n            重命名\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={<ArrowsClockwiseIcon className=\"animate-spin\" />}\n            onClick={() => setLastAction(\"已刷新\")}\n          >\n            刷新\n          </DropdownMenu.Item>\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item\n            icon={TrashIcon}\n            variant=\"danger\"\n            onClick={() => setLastAction(\"已删除\")}\n          >\n            删除\n          </DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n      {lastAction && (\n        <p className=\"text-sm text-lark-subtle\">\n          最近操作：<span className=\"text-lark-default\">{lastAction}</span>\n        </p>\n      )}\n    </div>","<DropdownMenu>\n      <DropdownMenu.Trigger\n        render={<button type=\"button\" className=\"rounded-full\" />}\n      >\n        <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-lark-brand text-sm font-medium text-white\">\n          MR\n        </span>\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        <DropdownMenu.Item icon={UserIcon}>个人资料</DropdownMenu.Item>\n        <DropdownMenu.Item icon={GearIcon}>设置</DropdownMenu.Item>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item icon={SignOutIcon} variant=\"danger\">\n          退出登录\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>","<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button>打开长列表</Button>} />\n      <DropdownMenu.Content>\n        {items.map((item) => (\n          <DropdownMenu.Item key={item}>{item}</DropdownMenu.Item>\n        ))}\n      </DropdownMenu.Content>\n    </DropdownMenu>","<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button>资源</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.LinkItem href=\"/settings\" icon={GearIcon}>\n          设置\n        </DropdownMenu.LinkItem>\n        <DropdownMenu.LinkItem href=\"/docs\" icon={BookOpenIcon}>\n          文档\n        </DropdownMenu.LinkItem>\n        <DropdownMenu.Separator />\n        <DropdownMenu.LinkItem\n          href=\"https://developers.cloudflare.com\"\n          target=\"_blank\"\n          icon={ArrowSquareOutIcon}\n        >\n          开发者文档\n        </DropdownMenu.LinkItem>\n      </DropdownMenu.Content>\n    </DropdownMenu>"],"colors":["bg-lark-danger","bg-lark-elevated","bg-lark-fill-hover","bg-lark-fill-pressed","bg-lark-hairline","ring-lark-line","text-lark-brand","text-lark-danger","text-lark-default","text-lark-inactive","text-lark-placeholder","text-lark-subtle"],"subComponents":{"Trigger":{"name":"Trigger","description":"Trigger sub-component","props":{}},"Portal":{"name":"Portal","description":"Portal sub-component","props":{}},"Positioner":{"name":"Positioner","description":"Positioner sub-component","props":{}},"Popup":{"name":"Popup","description":"Popup sub-component","props":{}},"Sub":{"name":"Sub","description":"Sub sub-component (wraps DropdownMenuPrimitive)","props":{},"isPassThrough":true,"baseComponent":"DropdownMenuPrimitive.SubmenuRoot"},"SubTrigger":{"name":"SubTrigger","description":"SubTrigger sub-component","props":{"icon":{"type":"Icon","description":"Icon displayed before the label."},"inset":{"type":"boolean","description":"Adds left padding to align with items that have icons."}}},"SubContent":{"name":"SubContent","description":"SubContent sub-component","props":{}},"Content":{"name":"Content","description":"Content sub-component","props":{"sideOffset":{"type":"number","description":"Distance in pixels from the trigger.","default":"8"},"container":{"type":"PortalContainer","description":"Container element for the portal. Use this to render inside a Shadow DOM or custom container."}}},"Item":{"name":"Item","description":"Item sub-component","props":{"icon":{"type":"Icon | ReactNode","description":"Icon displayed before the label."},"variant":{"type":"\"default\" | \"danger\"","description":"Visual style of the item.","default":"\"default\""},"selected":{"type":"boolean","description":"Shows a check mark indicator when true."},"inset":{"type":"boolean","description":"Adds left padding to align with items that have icons."},"onClick":{"type":"(event: React.MouseEvent) => void","description":"Callback when the item is clicked."},"closeOnClick":{"type":"boolean","description":"Whether the menu closes after clicking this item.","default":"true"},"disabled":{"type":"boolean","description":"When true, the item cannot be interacted with."}}},"LinkItem":{"name":"LinkItem","description":"LinkItem sub-component","props":{"href":{"type":"string","description":"URL to navigate to when clicked."},"icon":{"type":"Icon | ReactNode","description":"Icon displayed before the label."},"variant":{"type":"\"default\" | \"danger\"","description":"Visual style of the item.","default":"\"default\""},"inset":{"type":"boolean","description":"Adds left padding to align with items that have icons."},"target":{"type":"string","description":"Link target attribute (e.g. \"_blank\" for new tab)."},"render":{"type":"ReactElement | ((props, state) => ReactElement)","description":"Custom element to render as the link. Use to integrate with framework routers (e.g. Next.js Link)."}}},"CheckboxItem":{"name":"CheckboxItem","description":"CheckboxItem sub-component","props":{"checked":{"type":"boolean","description":"Whether the item is checked."},"defaultChecked":{"type":"boolean","description":"Whether the item is initially checked (uncontrolled).","default":"false"},"onCheckedChange":{"type":"(checked: boolean, event: ChangeEventDetails) => void","description":"Callback when the checked state changes."},"closeOnClick":{"type":"boolean","description":"Whether the menu closes after clicking this item.","default":"false"},"disabled":{"type":"boolean","description":"When true, the item cannot be interacted with."}}},"RadioGroup":{"name":"RadioGroup","description":"RadioGroup sub-component (wraps DropdownMenuPrimitive)","props":{"value":{"type":"any","description":"The controlled value of the currently selected radio item."},"defaultValue":{"type":"any","description":"The initially selected value (uncontrolled)."},"onValueChange":{"type":"(value: any, event: ChangeEventDetails) => void","description":"Callback when the selected value changes."},"disabled":{"type":"boolean","description":"When true, all radio items in the group are disabled."}},"isPassThrough":true,"baseComponent":"DropdownMenuPrimitive.RadioGroup"},"RadioItem":{"name":"RadioItem","description":"RadioItem sub-component","props":{"value":{"type":"any","required":true,"description":"The value of this radio item."},"icon":{"type":"Icon | ReactNode","description":"Icon displayed before the label."},"inset":{"type":"boolean","description":"Adds left padding to align with items that have icons."},"closeOnClick":{"type":"boolean","description":"Whether the menu closes after clicking this item.","default":"false"},"disabled":{"type":"boolean","description":"When true, the item cannot be interacted with."}}},"RadioItemIndicator":{"name":"RadioItemIndicator","description":"RadioItemIndicator sub-component","props":{}},"Label":{"name":"Label","description":"Label sub-component","props":{"inset":{"type":"boolean","description":"Adds left padding to align with items that have icons."}}},"Separator":{"name":"Separator","description":"Separator sub-component","props":{}},"Shortcut":{"name":"Shortcut","description":"Shortcut sub-component","props":{}},"Group":{"name":"Group","description":"Group sub-component (wraps DropdownMenuPrimitive)","props":{},"isPassThrough":true,"baseComponent":"DropdownMenuPrimitive.Group"}}},"Empty":{"name":"Empty","type":"component","description":"Placeholder shown when a list, table, or page has no content to display.","importPath":"@lark-ui/core","category":"Display","props":{"size":{"type":"enum","optional":true,"description":"Size of the empty state container.\n- `\"sm\"` — Compact empty state for smaller containers\n- `\"base\"` — Default empty state size\n- `\"lg\"` — Large empty state for prominent placement","values":["sm","base","lg"],"descriptions":{"sm":"Compact empty state for smaller containers","base":"Default empty state size","lg":"Large empty state for prominent placement"},"classes":{"sm":"px-6 py-8 gap-4","base":"px-10 py-16 gap-4","lg":"px-12 py-20 gap-4"},"default":"base"},"icon":{"type":"ReactNode","optional":true,"description":"Decorative icon displayed above the title (e.g. from `@phosphor-icons/react`)."},"title":{"type":"string","required":true,"description":"Primary heading text for the empty state."},"description":{"type":"string","optional":true,"description":"Secondary description text displayed below the title."},"commandLine":{"type":"string","optional":true,"description":"Shell command displayed in a copyable code block."},"contents":{"type":"ReactNode","optional":true,"description":"Additional content (buttons, links) rendered below the description."},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."}},"examples":["<Empty\n      icon={<PackageIcon size={48} />}\n      title=\"未找到任何包\"\n      description=\"安装你的第一个包，立即开始使用。\"\n      commandLine=\"npm install @lark-ui/core\"\n      contents={\n        <div className=\"flex items-center gap-2\">\n          <Button icon={<CodeIcon />}>查看示例</Button>\n          <Button icon={<GlobeIcon />} variant=\"primary\">\n            查看文档\n          </Button>\n        </div>\n      }\n    />","<div className=\"flex flex-col gap-8\">\n      <div>\n        <p className=\"mb-2 text-sm text-lark-subtle\">小</p>\n        <Empty\n          size=\"sm\"\n          icon={<Database size={32} className=\"text-lark-inactive\" />}\n          title=\"暂无数据\"\n          description=\"没有可显示的数据。\"\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm text-lark-subtle\">基础</p>\n        <Empty\n          size=\"base\"\n          icon={<Database size={48} className=\"text-lark-inactive\" />}\n          title=\"暂无数据\"\n          description=\"没有可显示的数据。\"\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm text-lark-subtle\">大</p>\n        <Empty\n          size=\"lg\"\n          icon={<Database size={64} className=\"text-lark-inactive\" />}\n          title=\"暂无数据\"\n          description=\"没有可显示的数据。\"\n        />\n      </div>\n    </div>","<Empty\n      icon={<FolderOpen size={48} className=\"text-lark-inactive\" />}\n      title=\"未找到任何项目\"\n      description=\"使用下面的命令创建你的第一个项目，立即开始使用。\"\n      commandLine=\"npm create lark-project\"\n    />","<Empty\n      icon={<CloudSlash size={48} className=\"text-lark-inactive\" />}\n      title=\"无法连接\"\n      description=\"无法连接到服务器，请检查你的网络连接后重试。\"\n      contents={\n        <div className=\"flex gap-2\">\n          <Button variant=\"primary\">重试</Button>\n          <Button variant=\"secondary\">返回</Button>\n        </div>\n      }\n    />","<Empty title=\"暂无内容\" />","<Empty\n      title=\"未找到结果\"\n      description=\"试试调整搜索或筛选条件，以找到你想要的内容。\"\n    />"],"colors":["bg-lark-control","bg-lark-overlay","border-lark-line","ring-lark-line","text-lark-default","text-lark-subtle","text-lark-success"]},"Field":{"name":"Field","type":"component","description":"Form field wrapper that provides a label, optional description, and error display around any form control. Built on Base UI Field primitives.","importPath":"@lark-ui/core","category":"Input","props":{"controlFirst":{"type":"boolean","optional":true,"description":"When `true`, places the control before the label (for checkbox/switch layouts)."},"children":{"type":"ReactNode","optional":true,"description":"The form control element(s) to wrap (Input, Select, Checkbox, etc.)."},"label":{"type":"ReactNode","optional":true,"description":"The label content — can be a string or any React node."},"required":{"type":"boolean","optional":true,"description":"When `true`, marks the field as required with a red asterisk before the label (Feishu's `ud__form__item__required-mark`). When explicitly `false`, shows gray \"(optional)\" text after the label. When `undefined`, no indicator is shown."},"labelTooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content displayed next to the label via an info icon."},"error":{"type":"object","optional":true,"description":"Validation error with a message and a browser `ValidityState` match key."},"description":{"type":"ReactNode","optional":true,"description":"Helper text displayed below the control (hidden when `error` is present)."},"hideLabel":{"type":"boolean","optional":true,"description":"When `true`, Field renders layout, description, and error but skips the `<label>` element. Use when the child component provides its own accessible label (e.g. Select uses Base UI's `Select.Label` to avoid hover/focus coupling from native `<label>`)."}},"examples":[],"colors":["text-lark-danger","text-lark-default","text-lark-subtle"]},"GlobeMap":{"name":"GlobeMap","type":"component","description":"GlobeMap — an SVG orthographic globe with hatched land and geographic markers. Rendering is SVG-only and does not use WebGL.","importPath":"@lark-ui/core","category":"Data Visualization","props":{"landColor":{"type":"string","optional":true,"description":"Stroke color for the hatched land. Defaults to the neutral Lark map area color."},"landHatchSpacing":{"type":"number","optional":true,"description":"Spacing between land hatch lines in view-box pixels. Default: `10`."},"oceanColor":{"type":"string","optional":true,"description":"Fill behind the land and graticule. Default: the Lark base surface."},"markers":{"type":"GlobeMapMarker[]","optional":true,"description":"Geographic points drawn above the land. Points fade at the horizon and back-facing points are hidden."},"markerColor":{"type":"string","optional":true,"description":"Default marker fill. Defaults to the Lark chart blue."},"markerRadius":{"type":"number","optional":true,"description":"Default marker radius in view-box pixels. Default: `7`."},"defaultRotation":{"type":"number[]","optional":true,"description":"Initial globe rotation as `[longitude, latitude, roll]`."},"autoRotate":{"type":"boolean","optional":true,"description":"Continuously rotate the globe horizontally. Default: `false`."},"autoRotateSpeed":{"type":"number","optional":true,"description":"Horizontal auto-rotation speed in degrees per second. Default: `4`."},"showGraticule":{"type":"boolean","optional":true,"description":"Draw latitude and longitude guides. Default: `false`."},"showTooltip":{"type":"boolean","optional":true,"description":"Show the Lark-styled marker tooltip. Default: `true`."},"height":{"type":"number","optional":true,"description":"Fixed component height. Otherwise the globe uses a square aspect ratio."},"className":{"type":"string","optional":true},"isDarkMode":{"type":"boolean","optional":true}},"examples":["<div className=\"mx-auto max-w-xl\">\n      <GlobeMap\n        markers={cloudflareAvailabilityLocations}\n        landColor=\"var(--text-color-lark-inactive)\"\n        landHatchSpacing={8}\n        oceanColor=\"transparent\"\n        showGraticule\n        markerColor=\"var(--color-lark-brand)\"\n        markerRadius={8}\n        autoRotate\n        aria-label=\"Lark 可用性节点位置\"\n        isDarkMode={isDarkMode}\n      />\n    </div>"],"colors":["bg-lark-base","border-lark-line","text-lark-default","text-lark-subtle"]},"Grid":{"name":"Grid","type":"component","description":"Responsive CSS grid layout container with preset column configurations.","importPath":"@lark-ui/core","category":"Layout","props":{"children":{"type":"ReactNode","optional":true,"description":"Grid items to render."},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"title":{"type":"string","optional":true},"mobileDivider":{"type":"boolean","optional":true,"description":"Show dividers between grid items on mobile (only works with `\"4up\"` variant)."},"gap":{"type":"enum","optional":true,"description":"Gap size between grid items.\n- `\"none\"` — No gap\n- `\"sm\"` — 12px gap\n- `\"base\"` — Responsive gap (8px → 24px → 32px)\n- `\"lg\"` — 32px gap","values":["none","sm","base","lg"],"descriptions":{"none":"No gap between grid items","sm":"Small gap between grid items","base":"Default responsive gap between grid items","lg":"Large gap between grid items"},"classes":{"none":"gap-0","sm":"gap-3","base":"gap-2 md:gap-6 lg:gap-8","lg":"gap-8"},"default":"base"},"variant":{"type":"enum","optional":true,"description":"Responsive column layout variant.\n- `\"2up\"` — 1 col → 2 cols at md\n- `\"side-by-side\"` — Always 2 cols\n- `\"2-1\"` — 66%/33% split at md\n- `\"1-2\"` — 33%/66% split at md\n- `\"3up\"` — 1 → 2 → 3 cols\n- `\"4up\"` — 1 → 2 → 3 → 4 cols\n- `\"6up\"` — 2 → 3 → 4 → 6 cols\n- `\"1-2-4up\"` — 1 → 2 → 4 cols","values":["2up","side-by-side","2-1","1-2","1-3up","3up","4up","6up","1-2-4up"],"descriptions":{"2up":"Grid items stack on small screens, display side-by-side on medium screens and up","side-by-side":"Grid items always displayed side-by-side","2-1":"Two-thirds / one-third split (66%/33%) on medium screens and up","1-2":"One-third / two-thirds split (33%/66%) on medium screens and up","1-3up":"Grid items stack on small screens, expand to 3 across on large screens","3up":"Grid items stack on small screens, 2 across on medium, 3 across on large","4up":"Grid items stack on small screens, progressively increase columns at larger breakpoints","6up":"Grid items start at 2 across, expand to 6 across on XL","1-2-4up":"Grid items stack on small screens, 2 across on medium, 4 across on large"},"classes":{"2up":"grid-cols-1 md:grid-cols-2","side-by-side":"grid-cols-2","2-1":"grid-cols-1 md:grid-cols-[2fr_1fr]","1-2":"grid-cols-1 md:grid-cols-[1fr_2fr]","1-3up":"grid-cols-1 lg:grid-cols-3","3up":"grid-cols-1 md:grid-cols-2 lg:grid-cols-3","4up":"grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4","6up":"grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6","1-2-4up":"grid-cols-1 md:grid-cols-2 lg:grid-cols-4"}}},"examples":["<Grid variant=\"2up\" gap=\"base\">\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>项目 1</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">第一个栅格项</Text>\n          </div>\n        </Surface>\n      </GridItem>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>项目 2</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">第二个栅格项</Text>\n          </div>\n        </Surface>\n      </GridItem>\n    </Grid>","<div className=\"flex flex-col gap-8\">\n      <div>\n        <p className=\"mb-2 text-lark-subtle\">variant=\"2up\"</p>\n        <Grid variant=\"2up\" gap=\"sm\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>1</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>2</Text>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-lark-subtle\">variant=\"3up\"</p>\n        <Grid variant=\"3up\" gap=\"sm\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>1</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>2</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>3</Text>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-lark-subtle\">variant=\"4up\"</p>\n        <Grid variant=\"4up\" gap=\"sm\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>1</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>2</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>3</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>4</Text>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n    </div>","<div className=\"flex flex-col gap-8\">\n      <div>\n        <p className=\"mb-2 text-lark-subtle\">variant=\"2-1\"（66% / 33%）</p>\n        <Grid variant=\"2-1\" gap=\"sm\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4\">\n              <Text bold>主要内容</Text>\n              <div className=\"mt-1\">\n                <Text variant=\"secondary\">三分之二宽度</Text>\n              </div>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4\">\n              <Text bold>侧边栏</Text>\n              <div className=\"mt-1\">\n                <Text variant=\"secondary\">三分之一宽度</Text>\n              </div>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-lark-subtle\">variant=\"1-2\"（33% / 66%）</p>\n        <Grid variant=\"1-2\" gap=\"sm\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4\">\n              <Text bold>侧边栏</Text>\n              <div className=\"mt-1\">\n                <Text variant=\"secondary\">三分之一宽度</Text>\n              </div>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4\">\n              <Text bold>主要内容</Text>\n              <div className=\"mt-1\">\n                <Text variant=\"secondary\">三分之二宽度</Text>\n              </div>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n    </div>","<div className=\"flex flex-col gap-8\">\n      <div>\n        <p className=\"mb-2 text-lark-subtle\">gap=\"none\"</p>\n        <Grid variant=\"side-by-side\" gap=\"none\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>1</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>2</Text>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-lark-subtle\">gap=\"sm\"</p>\n        <Grid variant=\"side-by-side\" gap=\"sm\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>1</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>2</Text>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-lark-subtle\">gap=\"base\"（默认，自适应）</p>\n        <Grid variant=\"side-by-side\" gap=\"base\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>1</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>2</Text>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-lark-subtle\">gap=\"lg\"</p>\n        <Grid variant=\"side-by-side\" gap=\"lg\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>1</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>2</Text>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n    </div>","<Grid variant=\"4up\" gap=\"base\" mobileDivider>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>项目 1</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">移动端显示分隔线</Text>\n          </div>\n        </Surface>\n      </GridItem>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>项目 2</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">移动端显示分隔线</Text>\n          </div>\n        </Surface>\n      </GridItem>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>项目 3</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">移动端显示分隔线</Text>\n          </div>\n        </Surface>\n      </GridItem>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>项目 4</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">移动端显示分隔线</Text>\n          </div>\n        </Surface>\n      </GridItem>\n    </Grid>"],"colors":["border-lark-line"]},"InlineCopyText":{"name":"InlineCopyText","type":"component","description":"Compact, borderless copy control for IDs and other short values displayed inline or inside dense table cells.","importPath":"@lark-ui/core","category":"Action","props":{"labels":{"type":"InlineCopyTextLabels","optional":true,"description":"Accessible labels for localization."},"children":{"type":"ReactNode","optional":true,"description":"Content to display. String children are copied unless `value` is provided."},"value":{"type":"string","optional":true,"description":"The value to copy. Required when `children` is not a string."},"size":{"type":"\"xs\" | \"sm\" | \"base\" | \"lg\"","optional":true,"description":"Text size. Supported values depend on the text variant."},"bold":{"type":"boolean","optional":true,"description":"Whether to use medium font weight. Only applies to body text variants."},"as":{"type":"enum","optional":true,"description":"The HTML element to render. Accepts headings (`\"h1\"`–`\"h6\"`), block text (`\"p\"`, `\"pre\"`), inline text (`\"span\"`, `\"code\"`, `\"em\"`, `\"strong\"`, `\"small\"`, `\"abbr\"`, `\"time\"`), form-related (`\"label\"`, `\"legend\"`), list/definition (`\"dt\"`, `\"dd\"`, `\"li\"`), and `\"figcaption\"`.\n\n- **Optional** for `\"heading\"` (defaults to `\"span\"`). Pass the heading   element that reflects this text's place in the document outline.\n- **Required** for deprecated heading variants (`\"heading1\"`,   `\"heading2\"`, `\"heading3\"`).\n- **Optional** for body variants (defaults to `\"p\"`) and monospace   variants (defaults to `\"span\"`).","values":["h1","h2","h3","h4","h5","h6","p","span","label","dt","dd","li","figcaption","legend","pre","code","em","strong","small","abbr","time"]},"truncate":{"type":"boolean","optional":true,"description":"Whether to truncate overflowing text with an ellipsis. Adds `truncate min-w-0` classes."},"disabled":{"type":"boolean","optional":true},"name":{"type":"string","optional":true},"type":{"type":"enum","optional":true,"values":["submit","reset","button"]},"className":{"type":"string","optional":true},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"title":{"type":"string","optional":true},"variant":{"type":"\"body\" | \"secondary\" | \"success\" | \"error\" | \"mono\" | \"mono-secondary\"","optional":true,"description":"Text style variant. Supports every Text variant except heading variants.","values":["body","secondary","success","error","mono","mono-secondary"],"default":"\"mono-secondary\""}},"examples":["<InlineCopyText\n      labels={{ copyAction: \"复制数据库 ID\", copied: \"已复制数据库 ID\" }}\n    >\n      f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5\n    </InlineCopyText>","<div className=\"group flex w-full max-w-xl items-center justify-between gap-4 rounded-lg bg-lark-base px-4 py-3 ring ring-lark-line\">\n      <span className=\"min-w-0 truncate text-sm text-lark-default\">\n        生产环境数据库\n      </span>\n      <InlineCopyText\n        labels={{\n          copyAction: \"复制数据库 ID\",\n          copied: \"已复制数据库 ID\",\n        }}\n      >\n        f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5\n      </InlineCopyText>\n    </div>","<InlineCopyText\n      value=\"f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5\"\n      variant=\"body\"\n      labels={{ copyAction: \"复制数据库 ID\", copied: \"已复制数据库 ID\" }}\n    >\n      <span>\n        数据库 ID：<strong>f86b3f10…</strong>\n      </span>\n    </InlineCopyText>"],"colors":["text-lark-default","text-lark-subtle"],"styling":{"baseClasses":"group/inline-copy flex min-w-0 max-w-full cursor-pointer items-center gap-1 rounded-xs border-0 bg-transparent p-0 focus:outline-none focus-visible:outline-none"}},"Input":{"name":"Input","type":"component","description":"Input component","importPath":"@lark-ui/core","category":"Input","props":{"label":{"type":"ReactNode","optional":true,"description":"Label content for the input (enables Field wrapper) - can be a string or any React node"},"labelTooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content to display next to the label via an info icon"},"description":{"type":"ReactNode","optional":true,"description":"Helper text displayed below the input"},"error":{"type":"string | object","optional":true,"description":"Error message or validation error object"},"passwordManagerIgnore":{"type":"boolean","optional":true,"description":"Suppress browser extension password manager overlays on non-credential inputs."},"size":{"type":"enum","optional":true,"description":"Input size.\n- `\"xs\"` — Extra small for compact UIs\n- `\"sm\"` — Small for secondary fields\n- `\"base\"` — Default size\n- `\"lg\"` — Large for prominent fields","values":["xs","sm","base","lg"],"descriptions":{"xs":"Extra small input for compact UIs (24px)","sm":"Small input (28px, Feishu small control)","base":"Default input (32px, Feishu medium control)","lg":"Large input (40px, Feishu large control)"},"classes":{"xs":"h-6 gap-1 rounded-md pl-[7px] pr-[3px] text-xs","sm":"h-7 gap-1 rounded-md pl-[7px] pr-[3px] text-xs","base":"h-8 gap-1.5 rounded-md pl-[11px] pr-2 text-base","lg":"h-10 gap-2 rounded-md pl-[11px] pr-2 text-lg"},"default":"base"},"variant":{"type":"enum","optional":true,"description":"Visual variant.\n- `\"default\"` — Standard input\n- `\"error\"` — Error state for validation failures","values":["default","error"],"descriptions":{"default":"Default input appearance","error":"Error state for validation failures"},"classes":{"default":"bg-lark-base ring-lark-border hover:ring-lark-brand focus:ring-lark-brand","error":"!ring-lark-danger hover:!ring-lark-danger focus:!ring-lark-danger"},"stateClasses":{"default":{"hover":"hover:ring-lark-brand","focus":"focus:ring-lark-brand"},"error":{"hover":"hover:!ring-lark-danger","focus":"focus:!ring-lark-danger"}},"default":"default"}},"examples":["<Input\n      label=\"邮箱\"\n      placeholder=\"you@example.com\"\n      description=\"我们绝不会共享你的邮箱\"\n    />","<Input\n      label=\"用户名\"\n      placeholder=\"选择一个用户名\"\n      description=\"3-20 个字符，仅支持字母和数字\"\n    />","<Input\n      label=\"邮箱\"\n      placeholder=\"you@example.com\"\n      value=\"invalid-email\"\n      error=\"请输入有效的邮箱地址\"\n    />","<Input\n      label=\"密码\"\n      type=\"password\"\n      value=\"short\"\n      error={{\n        message: \"密码至少需要 8 个字符\",\n        match: \"tooShort\",\n      }}\n      minLength={8}\n    />","<div className=\"flex flex-col gap-4\">\n      <Input size=\"xs\" label=\"极小\" placeholder=\"极小尺寸输入框\" />\n      <Input size=\"sm\" label=\"小\" placeholder=\"小尺寸输入框\" />\n      <Input label=\"基础\" placeholder=\"基础尺寸输入框（默认）\" />\n      <Input size=\"lg\" label=\"大\" placeholder=\"大尺寸输入框\" />\n    </div>","<Input label=\"禁用字段\" placeholder=\"无法编辑\" disabled />","<Input placeholder=\"搜索…\" aria-label=\"搜索产品\" />","<div className=\"flex flex-col gap-4\">\n      <Input\n        aria-label=\"主机名\"\n        placeholder=\"example.com\"\n        value=\"not a host\"\n        error=\"请输入有效的主机名\"\n      />\n      <Input\n        aria-label=\"路径\"\n        placeholder=\"/api/v1/users\"\n        value=\"missing-slash\"\n        error={{ message: \"路径必须以 / 开头\", match: true }}\n      />\n    </div>","<div className=\"flex flex-col gap-4\">\n      <Input\n        label=\"API 密钥（默认）\"\n        type=\"password\"\n        placeholder=\"sk_live_...\"\n      />\n      <Input\n        label=\"API 密钥（passwordManagerIgnore）\"\n        type=\"password\"\n        placeholder=\"sk_live_...\"\n        passwordManagerIgnore\n      />\n    </div>","<div className=\"flex flex-col gap-4\">\n      <Input type=\"email\" label=\"邮箱\" placeholder=\"you@example.com\" />\n      <Input type=\"password\" label=\"密码\" placeholder=\"••••••••\" />\n      <Input type=\"number\" label=\"年龄\" placeholder=\"18\" />\n      <Input type=\"tel\" label=\"电话\" placeholder=\"+1 (555) 000-0000\" />\n    </div>","<Input label=\"电话号码\" required={false} placeholder=\"+1 (555) 000-0000\" />","<Input\n      label=\"API 密钥\"\n      labelTooltip=\"可在控制台的 设置 > API 密钥 中找到\"\n      placeholder=\"sk_live_...\"\n    />","<Input\n      label={\n        <span>\n          用于<strong>账单</strong>的邮箱\n        </span>\n      }\n      required\n      placeholder=\"billing@company.com\"\n      type=\"email\"\n    />","<Input\n      label=\"使用 onChange\"\n      placeholder=\"输入一些内容…\"\n      description={value ? `值：${value}` : \"使用 e.target.value\"}\n      value={value}\n      onChange={(e) => setValue(e.target.value)}\n    />","<Input\n      label=\"使用 onValueChange\"\n      placeholder=\"输入一些内容…\"\n      description={value ? `值：${value}` : \"直接接收值\"}\n      value={value}\n      onValueChange={(v) => setValue(v)}\n    />"],"colors":["bg-lark-base","bg-lark-control","ring-lark-border","ring-lark-brand","ring-lark-danger","text-lark-default","text-lark-placeholder"],"styling":{"dimensions":{"xs":{"height":24,"paddingX":7,"fontSize":12,"borderRadius":6,"width":160},"sm":{"height":28,"paddingX":7,"fontSize":12,"borderRadius":6,"width":200},"base":{"height":32,"paddingX":11,"fontSize":14,"borderRadius":6,"width":280},"lg":{"height":40,"paddingX":11,"fontSize":16,"borderRadius":6,"width":320}},"baseTokens":{"background":"color-lark-base","text":"text-color-lark-default","placeholder":"text-color-lark-placeholder","ring":"color-lark-border"},"stateTokens":{"hover":{"ring":"color-lark-brand"},"focus":{"ring":"color-lark-brand"},"error":{"ring":"color-lark-danger"},"disabled":{"background":"color-lark-control","ring":"color-lark-border"}}}},"InputGroup":{"name":"InputGroup","type":"component","description":"InputGroup component","importPath":"@lark-ui/core","category":"Input","props":{"label":{"type":"ReactNode","optional":true,"description":"The label content — can be a string or any React node."},"description":{"type":"ReactNode","optional":true,"description":"Helper text displayed below the control (hidden when `error` is present)."},"error":{"type":"object","optional":true,"description":"Validation error with a message and a browser `ValidityState` match key."},"required":{"type":"boolean","optional":true,"description":"When `true`, marks the field as required with a red asterisk before the label (Feishu's `ud__form__item__required-mark`). When explicitly `false`, shows gray \"(optional)\" text after the label. When `undefined`, no indicator is shown."},"labelTooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content displayed next to the label via an info icon."},"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"title":{"type":"string","optional":true},"size":{"type":"enum","optional":true,"values":["xs","sm","base","lg"],"descriptions":{"xs":"Extra small size.","sm":"Small size.","base":"Default size.","lg":"Large size."},"classes":{"xs":"h-6 text-xs","sm":"h-7 text-xs","base":"h-8 text-base","lg":"h-10 text-lg"},"default":"base"},"disabled":{"type":"boolean","optional":true}},"examples":["<div className=\"w-full max-w-2xs\">\n      <InputGroup>\n        <InputGroup.Input\n          maxLength={20}\n          onChange={handleChange}\n          value={value}\n        />\n        <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>\n        {status !== \"idle\" && (\n          <InputGroup.Addon align=\"end\">\n            {status === \"loading\" ? (\n              <Loader />\n            ) : (\n              <CheckCircleIcon weight=\"duotone\" className=\"text-lark-success\" />\n            )}\n          </InputGroup.Addon>\n        )}\n      </InputGroup>\n    </div>","<InputGroup className=\"w-full max-w-3xs\">\n      <InputGroup.Addon>\n        <LinkIcon />\n      </InputGroup.Addon>\n      <InputGroup.Input placeholder=\"粘贴链接…\" aria-label=\"链接\" />\n    </InputGroup>","<div className=\"flex flex-col gap-4\">\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Addon>@</InputGroup.Addon>\n        <InputGroup.Input placeholder=\"用户名\" aria-label=\"用户名\" />\n      </InputGroup>\n\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Input placeholder=\"邮箱\" aria-label=\"邮箱\" />\n        <InputGroup.Addon align=\"end\">@example.com</InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Addon>/api/</InputGroup.Addon>\n        <InputGroup.Input placeholder=\"端点\" aria-label=\"API 路径\" />\n        <InputGroup.Addon align=\"end\">.json</InputGroup.Addon>\n      </InputGroup>\n    </div>","<div className=\"flex flex-col gap-4\">\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Input\n          type={show ? \"text\" : \"password\"}\n          defaultValue=\"password\"\n          aria-label=\"密码\"\n        />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            shape=\"square\"\n            className=\"text-lark-subtle\"\n            icon={show ? EyeSlashIcon : EyeIcon}\n            aria-label={show ? \"隐藏密码\" : \"显示密码\"}\n            onClick={() => setShow(!show)}\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input\n          value={searchValue}\n          placeholder=\"搜索\"\n          aria-label=\"搜索\"\n          onChange={(e) => setSearchValue(e.target.value)}\n        />\n        {searchValue && (\n          <InputGroup.Addon align=\"end\" className=\"pr-1\">\n            <InputGroup.Button\n              shape=\"square\"\n              icon={XIcon}\n              aria-label=\"清除搜索\"\n              onClick={() => setSearchValue(\"\")}\n            />\n          </InputGroup.Addon>\n        )}\n        <InputGroup.Button variant=\"secondary\" onClick={() => {}}>\n          搜索\n        </InputGroup.Button>\n      </InputGroup>\n    </div>","<InputGroup className=\"w-full max-w-2xs\">\n      <InputGroup.Addon>\n        <MagnifyingGlassIcon />\n      </InputGroup.Addon>\n      <InputGroup.Input placeholder=\"使用查询语言搜索…\" aria-label=\"搜索\" />\n      <InputGroup.Addon align=\"end\">\n        <InputGroup.Button\n          shape=\"square\"\n          className=\"text-lark-subtle\"\n          icon={QuestionIcon}\n          aria-label=\"查询语言帮助\"\n          tooltip=\"查询语言帮助\"\n          onClick={() => {}}\n        />\n      </InputGroup.Addon>\n    </InputGroup>","<InputGroup className=\"w-full max-w-3xs\">\n      <InputGroup.Addon>\n        <MagnifyingGlassIcon />\n      </InputGroup.Addon>\n      <InputGroup.Input placeholder=\"搜索…\" aria-label=\"搜索\" />\n      <InputGroup.Addon align=\"end\">\n        <kbd className=\"border-none! bg-none!\">⌘K</kbd>\n      </InputGroup.Addon>\n    </InputGroup>","<InputGroup className=\"w-full max-w-3xs\">\n      <InputGroup.Input defaultValue=\"lark\" aria-label=\"lark\" />\n      <InputGroup.Addon align=\"end\">\n        <Loader />\n      </InputGroup.Addon>\n    </InputGroup>","<div className=\"flex w-full max-w-2xs flex-col gap-4\">\n      <InputGroup label=\"子域名\">\n        <InputGroup.Input\n          aria-label=\"子域名\"\n          defaultValue=\"lark\"\n          maxLength={20}\n        />\n        <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>\n        <InputGroup.Addon align=\"end\">\n          <CheckCircleIcon weight=\"duotone\" className=\"text-lark-success\" />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup\n        label=\"子域名\"\n        error={{ message: \"该子域名不可用\", match: true }}\n      >\n        <InputGroup.Input\n          aria-label=\"子域名\"\n          defaultValue=\"lark\"\n          maxLength={20}\n        />\n        <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>\n        <InputGroup.Addon align=\"end\">\n          <XCircleIcon weight=\"duotone\" className=\"text-lark-danger\" />\n        </InputGroup.Addon>\n      </InputGroup>\n    </div>","<div className=\"flex w-full max-w-3xs flex-col gap-4\">\n      <InputGroup size=\"xs\" label=\"超小\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"超小尺寸输入框\" />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-lark-subtle\"\n            icon={QuestionIcon}\n            shape=\"square\"\n            aria-label=\"帮助\"\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup size=\"sm\" label=\"小\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"小尺寸输入框\" />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-lark-subtle\"\n            icon={QuestionIcon}\n            shape=\"square\"\n            aria-label=\"帮助\"\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup label=\"基础（默认）\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"基础尺寸输入框\" />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-lark-subtle\"\n            icon={QuestionIcon}\n            shape=\"square\"\n            aria-label=\"帮助\"\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup size=\"lg\" label=\"大\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"大尺寸输入框\" />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-lark-subtle\"\n            icon={QuestionIcon}\n            shape=\"square\"\n            aria-label=\"帮助\"\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n    </div>","<div className=\"flex w-full max-w-3xs flex-col gap-4\">\n      <InputGroup\n        label=\"错误状态\"\n        error={{ message: \"请输入有效的邮箱地址\", match: true }}\n      >\n        <InputGroup.Input type=\"email\" defaultValue=\"invalid-email\" />\n        <InputGroup.Addon align=\"end\">@example.com</InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup label=\"禁用\" disabled>\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"搜索…\" />\n      </InputGroup>\n\n      <InputGroup label=\"可选字段\" required={false}>\n        <InputGroup.Addon>$</InputGroup.Addon>\n        <InputGroup.Input placeholder=\"0.00\" />\n      </InputGroup>\n\n      <InputGroup\n        label=\"带描述\"\n        description=\"至少需要 8 个字符\"\n        labelTooltip=\"你的密码会被安全存储\"\n      >\n        <InputGroup.Input\n          type={show ? \"text\" : \"password\"}\n          placeholder=\"密码\"\n        />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            shape=\"square\"\n            className=\"text-lark-subtle\"\n            icon={show ? EyeSlashIcon : EyeIcon}\n            aria-label={show ? \"隐藏密码\" : \"显示密码\"}\n            onClick={() => setShow(!show)}\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n    </div>"],"colors":["bg-lark-control","border-lark-border","border-lark-brand","ring-lark-border","ring-lark-brand","ring-lark-danger","text-lark-placeholder"],"subComponents":{"Input":{"name":"Input","description":"Input sub-component","props":{}},"Button":{"name":"Button","description":"Button sub-component","props":{"tooltip":{"type":"ReactNode","description":"When provided, wraps the button in a Tooltip. Automatically sets aria-label from a string value."},"tooltipSide":{"type":"\"top\" | \"right\" | \"bottom\" | \"left\"","description":"Preferred side for the tooltip popup.","default":"\"bottom\""},"variant":{"type":"\"primary\" | \"secondary\" | \"ghost\" | \"destructive\" | \"secondary-destructive\" | \"outline\"","description":"Button visual style. Defaults to ghost.","default":"\"ghost\""},"size":{"type":"\"xs\" | \"sm\" | \"base\" | \"lg\"","description":"Button size.","default":"\"sm\""}}},"Addon":{"name":"Addon","description":"Addon sub-component","props":{"align":{"type":"\"start\" | \"end\"","description":"Position relative to the input.","default":"\"start\""},"className":{"type":"string","description":"Additional CSS classes."}}},"Suffix":{"name":"Suffix","description":"Suffix sub-component","props":{"className":{"type":"string","description":"Additional CSS classes."}}},"Label":{"name":"Label","description":"Label sub-component","props":{}},"Description":{"name":"Description","description":"Description sub-component","props":{}}}},"Label":{"name":"Label","type":"component","description":"Label component for form fields.","importPath":"@lark-ui/core","category":"Other","props":{"children":{"type":"ReactNode","optional":true,"description":"The label content — can be a string or any React node."},"showOptional":{"type":"boolean","optional":true,"description":"When `true`, shows gray \"(optional)\" text after the label."},"optionalLabel":{"type":"ReactNode","optional":true,"description":"Content shown when `showOptional` is `true`."},"tooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content displayed next to the label via an info icon."},"tooltipAriaLabel":{"type":"string","optional":true,"description":"Accessible label for the tooltip button."},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"htmlFor":{"type":"string","optional":true,"description":"The id of the form element this label is associated with"},"asContent":{"type":"boolean","optional":true,"description":"When true, only renders the inline content (indicators, tooltip) without the outer label element with font styling. Useful when composed inside another label element that already provides the text styling."}},"examples":["<div className=\"flex flex-col gap-4\">\n      <Label>默认标签</Label>\n      <Label showOptional>可选标签</Label>\n      <Label tooltip=\"关于此字段的更多信息\">带工具提示的标签</Label>\n      <LarkLocaleProvider\n        translations={{\n          label: {\n            optional: \"（可选）\",\n            tooltip: \"更多信息\",\n          },\n        }}\n      >\n        <Label showOptional>翻译后的标签</Label>\n        <Label tooltip=\"关于此字段的更多信息\">带工具提示的标签</Label>\n      </LarkLocaleProvider>\n    </div>","<Input label=\"手机号码\" required={false} placeholder=\"+1 555-0000\" />","<Input\n      label=\"API 密钥\"\n      labelTooltip=\"可在仪表盘设置的 API > 密钥中找到\"\n      placeholder=\"sk_live_...\"\n    />","<Checkbox\n      label={\n        <span>\n          我同意 <strong>服务条款</strong>\n        </span>\n      }\n    />","<div className=\"flex max-w-md flex-col gap-4\">\n      <Input label=\"姓名\" placeholder=\"John Doe\" />\n      <Input\n        label=\"邮箱\"\n        labelTooltip=\"收据会发送到这个邮箱\"\n        placeholder=\"john@example.com\"\n        type=\"email\"\n      />\n      <Input label=\"公司\" required={false} placeholder=\"Acme Inc.\" />\n      <Select label=\"国家/地区\" placeholder=\"请选择国家/地区\">\n        <Select.Option value=\"us\">美国</Select.Option>\n        <Select.Option value=\"uk\">英国</Select.Option>\n        <Select.Option value=\"ca\">加拿大</Select.Option>\n      </Select>\n    </div>","<div className=\"flex flex-col gap-3\">\n      <Label>默认</Label>\n      <Label showOptional>可选</Label>\n      <Label tooltip=\"重要字段\">带工具提示</Label>\n    </div>"],"colors":["text-lark-default","text-lark-subtle"]},"LarkLogo":{"name":"LarkLogo","type":"component","description":"The Lark logomark.","importPath":"@lark-ui/core","category":"Other","props":{"className":{"type":"string","optional":true},"height":{"type":"number | string","optional":true},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"media":{"type":"string","optional":true},"method":{"type":"string","optional":true},"name":{"type":"string","optional":true},"target":{"type":"string","optional":true},"type":{"type":"string","optional":true},"width":{"type":"number | string","optional":true},"accentHeight":{"type":"number | string","optional":true},"accumulate":{"type":"enum","optional":true,"values":["none","sum"]},"additive":{"type":"enum","optional":true,"values":["replace","sum"]},"alignmentBaseline":{"type":"enum","optional":true,"values":["auto","baseline","before-edge","text-before-edge","middle","central","after-edge","text-after-edge","ideographic","alphabetic","hanging","mathematical","inherit"]},"allowReorder":{"type":"enum","optional":true,"values":["no","yes"]},"alphabetic":{"type":"number | string","optional":true},"amplitude":{"type":"number | string","optional":true},"arabicForm":{"type":"enum","optional":true,"values":["initial","medial","terminal","isolated"]},"ascent":{"type":"number | string","optional":true},"attributeName":{"type":"string","optional":true},"attributeType":{"type":"string","optional":true},"autoReverse":{"type":"Booleanish","optional":true},"azimuth":{"type":"number | string","optional":true},"baseFrequency":{"type":"number | string","optional":true},"baselineShift":{"type":"number | string","optional":true},"baseProfile":{"type":"number | string","optional":true},"bbox":{"type":"number | string","optional":true},"begin":{"type":"number | string","optional":true},"bias":{"type":"number | string","optional":true},"by":{"type":"number | string","optional":true},"calcMode":{"type":"number | string","optional":true},"capHeight":{"type":"number | string","optional":true},"clip":{"type":"number | string","optional":true},"clipPath":{"type":"string","optional":true},"clipPathUnits":{"type":"number | string","optional":true},"clipRule":{"type":"number | string","optional":true},"colorInterpolation":{"type":"number | string","optional":true},"colorInterpolationFilters":{"type":"enum","optional":true,"values":["auto","sRGB","linearRGB","inherit"]},"colorProfile":{"type":"number | string","optional":true},"colorRendering":{"type":"number | string","optional":true},"contentScriptType":{"type":"number | string","optional":true},"contentStyleType":{"type":"number | string","optional":true},"cursor":{"type":"number | string","optional":true},"cx":{"type":"number | string","optional":true},"cy":{"type":"number | string","optional":true},"d":{"type":"string","optional":true},"decelerate":{"type":"number | string","optional":true},"descent":{"type":"number | string","optional":true},"diffuseConstant":{"type":"number | string","optional":true},"direction":{"type":"number | string","optional":true},"display":{"type":"number | string","optional":true},"divisor":{"type":"number | string","optional":true},"dominantBaseline":{"type":"enum","optional":true,"values":["auto","use-script","no-change","reset-size","ideographic","alphabetic","hanging","mathematical","central","middle","text-after-edge","text-before-edge","inherit"]},"dur":{"type":"number | string","optional":true},"dx":{"type":"number | string","optional":true},"dy":{"type":"number | string","optional":true},"edgeMode":{"type":"number | string","optional":true},"elevation":{"type":"number | string","optional":true},"enableBackground":{"type":"number | string","optional":true},"end":{"type":"number | string","optional":true},"exponent":{"type":"number | string","optional":true},"externalResourcesRequired":{"type":"Booleanish","optional":true},"fill":{"type":"string","optional":true},"fillOpacity":{"type":"number | string","optional":true},"fillRule":{"type":"enum","optional":true,"values":["nonzero","evenodd","inherit"]},"filter":{"type":"string","optional":true},"filterRes":{"type":"number | string","optional":true},"filterUnits":{"type":"number | string","optional":true},"floodColor":{"type":"number | string","optional":true},"floodOpacity":{"type":"number | string","optional":true},"focusable":{"type":"Booleanish | string","optional":true},"fontFamily":{"type":"string","optional":true},"fontSize":{"type":"number | string","optional":true},"fontSizeAdjust":{"type":"number | string","optional":true},"fontStretch":{"type":"number | string","optional":true},"fontStyle":{"type":"number | string","optional":true},"fontVariant":{"type":"number | string","optional":true},"fontWeight":{"type":"number | string","optional":true},"format":{"type":"number | string","optional":true},"fr":{"type":"number | string","optional":true},"from":{"type":"number | string","optional":true},"fx":{"type":"number | string","optional":true},"fy":{"type":"number | string","optional":true},"g1":{"type":"number | string","optional":true},"g2":{"type":"number | string","optional":true},"glyphName":{"type":"number | string","optional":true},"glyphOrientationHorizontal":{"type":"number | string","optional":true},"glyphOrientationVertical":{"type":"number | string","optional":true},"glyphRef":{"type":"number | string","optional":true},"gradientTransform":{"type":"string","optional":true},"gradientUnits":{"type":"string","optional":true},"hanging":{"type":"number | string","optional":true},"horizAdvX":{"type":"number | string","optional":true},"horizOriginX":{"type":"number | string","optional":true},"href":{"type":"string","optional":true},"ideographic":{"type":"number | string","optional":true},"imageRendering":{"type":"number | string","optional":true},"in2":{"type":"number | string","optional":true},"in":{"type":"string","optional":true},"intercept":{"type":"number | string","optional":true},"k1":{"type":"number | string","optional":true},"k2":{"type":"number | string","optional":true},"k3":{"type":"number | string","optional":true},"k4":{"type":"number | string","optional":true},"k":{"type":"number | string","optional":true},"kernelMatrix":{"type":"number | string","optional":true},"kernelUnitLength":{"type":"number | string","optional":true},"kerning":{"type":"number | string","optional":true},"keyPoints":{"type":"number | string","optional":true},"keySplines":{"type":"number | string","optional":true},"keyTimes":{"type":"number | string","optional":true},"lengthAdjust":{"type":"number | string","optional":true},"letterSpacing":{"type":"number | string","optional":true},"lightingColor":{"type":"number | string","optional":true},"limitingConeAngle":{"type":"number | string","optional":true},"local":{"type":"number | string","optional":true},"markerEnd":{"type":"string","optional":true},"markerHeight":{"type":"number | string","optional":true},"markerMid":{"type":"string","optional":true},"markerStart":{"type":"string","optional":true},"markerUnits":{"type":"number | string","optional":true},"markerWidth":{"type":"number | string","optional":true},"mask":{"type":"string","optional":true},"maskContentUnits":{"type":"number | string","optional":true},"maskUnits":{"type":"number | string","optional":true},"mathematical":{"type":"number | string","optional":true},"mode":{"type":"number | string","optional":true},"numOctaves":{"type":"number | string","optional":true},"offset":{"type":"number | string","optional":true},"opacity":{"type":"number | string","optional":true},"operator":{"type":"number | string","optional":true},"order":{"type":"number | string","optional":true},"orient":{"type":"number | string","optional":true},"orientation":{"type":"number | string","optional":true},"origin":{"type":"number | string","optional":true},"overflow":{"type":"number | string","optional":true},"overlinePosition":{"type":"number | string","optional":true},"overlineThickness":{"type":"number | string","optional":true},"paintOrder":{"type":"number | string","optional":true},"panose1":{"type":"number | string","optional":true},"path":{"type":"string","optional":true},"pathLength":{"type":"number | string","optional":true},"patternContentUnits":{"type":"string","optional":true},"patternTransform":{"type":"number | string","optional":true},"patternUnits":{"type":"string","optional":true},"pointerEvents":{"type":"number | string","optional":true},"points":{"type":"string","optional":true},"pointsAtX":{"type":"number | string","optional":true},"pointsAtY":{"type":"number | string","optional":true},"pointsAtZ":{"type":"number | string","optional":true},"preserveAlpha":{"type":"Booleanish","optional":true},"preserveAspectRatio":{"type":"string","optional":true},"primitiveUnits":{"type":"number | string","optional":true},"r":{"type":"number | string","optional":true},"radius":{"type":"number | string","optional":true},"refX":{"type":"number | string","optional":true},"refY":{"type":"number | string","optional":true},"renderingIntent":{"type":"number | string","optional":true},"repeatCount":{"type":"number | string","optional":true},"repeatDur":{"type":"number | string","optional":true},"requiredExtensions":{"type":"number | string","optional":true},"requiredFeatures":{"type":"number | string","optional":true},"restart":{"type":"number | string","optional":true},"result":{"type":"string","optional":true},"rotate":{"type":"number | string","optional":true},"rx":{"type":"number | string","optional":true},"ry":{"type":"number | string","optional":true},"scale":{"type":"number | string","optional":true},"seed":{"type":"number | string","optional":true},"shapeRendering":{"type":"number | string","optional":true},"slope":{"type":"number | string","optional":true},"spacing":{"type":"number | string","optional":true},"specularConstant":{"type":"number | string","optional":true},"specularExponent":{"type":"number | string","optional":true},"speed":{"type":"number | string","optional":true},"spreadMethod":{"type":"string","optional":true},"startOffset":{"type":"number | string","optional":true},"stdDeviation":{"type":"number | string","optional":true},"stemh":{"type":"number | string","optional":true},"stemv":{"type":"number | string","optional":true},"stitchTiles":{"type":"number | string","optional":true},"stopColor":{"type":"string","optional":true},"stopOpacity":{"type":"number | string","optional":true},"strikethroughPosition":{"type":"number | string","optional":true},"strikethroughThickness":{"type":"number | string","optional":true},"string":{"type":"number | string","optional":true},"stroke":{"type":"string","optional":true},"strokeDasharray":{"type":"string | number","optional":true},"strokeDashoffset":{"type":"string | number","optional":true},"strokeLinecap":{"type":"enum","optional":true,"values":["butt","round","square","inherit"]},"strokeLinejoin":{"type":"enum","optional":true,"values":["miter","round","bevel","inherit"]},"strokeMiterlimit":{"type":"number | string","optional":true},"strokeOpacity":{"type":"number | string","optional":true},"strokeWidth":{"type":"number | string","optional":true},"surfaceScale":{"type":"number | string","optional":true},"systemLanguage":{"type":"number | string","optional":true},"tableValues":{"type":"number | string","optional":true},"targetX":{"type":"number | string","optional":true},"targetY":{"type":"number | string","optional":true},"textAnchor":{"type":"enum","optional":true,"values":["start","middle","end","inherit"]},"textDecoration":{"type":"number | string","optional":true},"textLength":{"type":"number | string","optional":true},"textRendering":{"type":"number | string","optional":true},"to":{"type":"number | string","optional":true},"transform":{"type":"string","optional":true},"u1":{"type":"number | string","optional":true},"u2":{"type":"number | string","optional":true},"underlinePosition":{"type":"number | string","optional":true},"underlineThickness":{"type":"number | string","optional":true},"unicode":{"type":"number | string","optional":true},"unicodeBidi":{"type":"number | string","optional":true},"unicodeRange":{"type":"number | string","optional":true},"unitsPerEm":{"type":"number | string","optional":true},"vAlphabetic":{"type":"number | string","optional":true},"values":{"type":"string","optional":true},"vectorEffect":{"type":"number | string","optional":true},"version":{"type":"string","optional":true},"vertAdvY":{"type":"number | string","optional":true},"vertOriginX":{"type":"number | string","optional":true},"vertOriginY":{"type":"number | string","optional":true},"vHanging":{"type":"number | string","optional":true},"vIdeographic":{"type":"number | string","optional":true},"viewBox":{"type":"string","optional":true},"viewTarget":{"type":"number | string","optional":true},"visibility":{"type":"number | string","optional":true},"vMathematical":{"type":"number | string","optional":true},"widths":{"type":"number | string","optional":true},"wordSpacing":{"type":"number | string","optional":true},"writingMode":{"type":"number | string","optional":true},"x1":{"type":"number | string","optional":true},"x2":{"type":"number | string","optional":true},"x":{"type":"number | string","optional":true},"xChannelSelector":{"type":"string","optional":true},"xHeight":{"type":"number | string","optional":true},"xlinkActuate":{"type":"string","optional":true},"xlinkArcrole":{"type":"string","optional":true},"xlinkHref":{"type":"string","optional":true},"xlinkRole":{"type":"string","optional":true},"xlinkShow":{"type":"string","optional":true},"xlinkTitle":{"type":"string","optional":true},"xlinkType":{"type":"string","optional":true},"xmlBase":{"type":"string","optional":true},"xmlLang":{"type":"string","optional":true},"xmlns":{"type":"string","optional":true},"xmlnsXlink":{"type":"string","optional":true},"xmlSpace":{"type":"string","optional":true},"y1":{"type":"number | string","optional":true},"y2":{"type":"number | string","optional":true},"y":{"type":"number | string","optional":true},"yChannelSelector":{"type":"string","optional":true},"z":{"type":"number | string","optional":true},"zoomAndPan":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true},"label":{"type":"string","optional":true,"description":"Accessible label. Omit for a decorative mark."}},"examples":["<LarkLogo className=\"size-16\" />","<div className=\"flex flex-wrap items-center gap-6\">\n      <LarkLogo className=\"size-12\" color=\"color\" />\n      <LarkLogo className=\"size-12\" color=\"teal\" />\n      <LarkLogo className=\"size-12\" color=\"dark\" />\n      <LarkLogo className=\"size-12\" color=\"blue\" />\n      <LarkLogo className=\"size-12\" color=\"black\" />\n      <div className=\"rounded-lg bg-lark-contrast p-3\">\n        <LarkLogo className=\"size-12\" color=\"white\" />\n      </div>\n    </div>","<div className=\"flex flex-wrap items-end gap-6\">\n      <LarkLogo className=\"size-6\" />\n      <LarkLogo className=\"size-10\" />\n      <LarkLogo className=\"size-16\" />\n      <LarkLogo className=\"size-24\" />\n    </div>"],"colors":[]},"LayerCard":{"name":"LayerCard","type":"component","description":"LayerCard component","importPath":"@lark-ui/core","category":"Display","props":{"render":{"type":"ReactNode","optional":true,"description":"Allows you to replace the component's HTML element with a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"title":{"type":"string","optional":true}},"examples":["<LayerCard>\n      <LayerCard.Secondary className=\"flex items-center justify-between\">\n        <div>后续步骤</div>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          shape=\"square\"\n          aria-label=\"前往后续步骤\"\n        >\n          <ArrowRightIcon size={16} />\n        </Button>\n      </LayerCard.Secondary>\n\n      <LayerCard.Primary>开始使用 Lark</LayerCard.Primary>\n    </LayerCard>","<LayerCard className=\"w-[250px]\">\n      <LayerCard.Secondary>快速上手</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <p className=\"text-sm text-lark-subtle\">面向新用户的快速上手指南</p>\n      </LayerCard.Primary>\n    </LayerCard>","<LayerCard className=\"w-[250px] p-4\">\n      <p className=\"text-sm text-lark-subtle\">面向新用户的快速上手指南</p>\n    </LayerCard>","<LayerCard className=\"w-[250px]\">\n      <LayerCard.Secondary data-testid=\"card-header\">\n        快速上手\n      </LayerCard.Secondary>\n      <LayerCard.Primary data-testid=\"card-body\">\n        <p className=\"text-sm text-lark-subtle\">面向新用户的快速上手指南</p>\n      </LayerCard.Primary>\n    </LayerCard>","<div className=\"flex gap-4\">\n      <LayerCard className=\"w-[200px]\">\n        <LayerCard.Secondary>组件</LayerCard.Secondary>\n        <LayerCard.Primary>\n          <p className=\"text-sm\">浏览所有组件</p>\n        </LayerCard.Primary>\n      </LayerCard>\n      <LayerCard className=\"w-[200px]\">\n        <LayerCard.Secondary>示例</LayerCard.Secondary>\n        <LayerCard.Primary>\n          <p className=\"text-sm\">查看代码示例</p>\n        </LayerCard.Primary>\n      </LayerCard>\n    </div>"],"colors":["bg-lark-base","bg-lark-elevated","bg-lark-overlay","ring-lark-fill","ring-lark-line","text-lark-subtle"],"subComponents":{"Primary":{"name":"Primary","description":"Primary sub-component","props":{}},"Secondary":{"name":"Secondary","description":"Secondary sub-component","props":{}}},"styling":{"container":{"width":280,"borderRadius":8},"secondary":{"paddingX":8,"paddingY":8,"gap":8,"fontSize":16,"fontWeight":500},"primary":{"paddingX":16,"paddingY":16,"paddingRight":12,"gap":8,"fontSize":16,"fontWeight":400,"borderRadius":8}}},"LayerDialog":{"name":"LayerDialog","type":"component","description":"LayerDialog component","importPath":"@lark-ui/core","category":"Overlay","props":{"dismissDisabled":{"type":"boolean","optional":true,"description":"Prevent every user-initiated dismissal while dialog work is pending."}},"examples":["<LayerDialog.Root>\n      <LayerDialog.Trigger\n        render={(props) => <Button {...props}>打开键盘快捷键</Button>}\n      />\n      <LayerDialog.Content>\n        <LayerDialog.Title>键盘快捷键</LayerDialog.Title>\n        <LayerDialog.Description>\n          查看可用快捷键，无需修改任何设置。\n        </LayerDialog.Description>\n        <LayerDialog.Body>\n          <LongContent />\n        </LayerDialog.Body>\n      </LayerDialog.Content>\n    </LayerDialog.Root>","<LayerDialog.Root>\n      <LayerDialog.Trigger\n        render={(props) => <Button {...props}>打开设置</Button>}\n      />\n      <LayerDialog.Content>\n        <LayerDialog.Title>配置自定义主机名</LayerDialog.Title>\n        <LayerDialog.Description>\n          将该主机名的请求路由到你的 Worker。\n        </LayerDialog.Description>\n        <LayerDialog.Body>\n          <div className=\"flex flex-col gap-5\">\n            <Input\n              label=\"主机名\"\n              onChange={(event) => setHostname(event.target.value)}\n              value={hostname}\n            />\n            <Input\n              label=\"显示名称\"\n              onChange={(event) => setName(event.target.value)}\n              value={name}\n            />\n          </div>\n        </LayerDialog.Body>\n        <LayerDialog.Actions>\n          <LayerDialog.Action\n            disabled={!hostname || !name}\n            onClick={() => undefined}\n          >\n            保存主机名\n          </LayerDialog.Action>\n        </LayerDialog.Actions>\n      </LayerDialog.Content>\n    </LayerDialog.Root>","<LayerDialog.Root>\n      <LayerDialog.Trigger\n        render={(props) => <Button {...props}>创建部署</Button>}\n      />\n      <LayerDialog.Content>\n        <LayerDialog.Title>创建部署</LayerDialog.Title>\n        <LayerDialog.Description>\n          表单原生的校验与提交状态由浏览器管理。\n        </LayerDialog.Description>\n        <LayerDialog.Body>\n          <form\n            id={formId}\n            className=\"flex flex-col gap-5\"\n            onSubmit={(event) => event.preventDefault()}\n          >\n            <Input\n              label=\"服务名称\"\n              name=\"serviceName\"\n              placeholder=\"production-api\"\n              required\n            />\n            <Input\n              label=\"兼容日期\"\n              name=\"compatibilityDate\"\n              required\n              type=\"date\"\n            />\n          </form>\n        </LayerDialog.Body>\n        <LayerDialog.Actions dismissLabel=\"取消\">\n          <LayerDialog.Action form={formId} type=\"submit\">\n            创建部署\n          </LayerDialog.Action>\n        </LayerDialog.Actions>\n      </LayerDialog.Content>\n    </LayerDialog.Root>","<LayerDialog.Root>\n      <LayerDialog.Trigger\n        render={(props) => <Button {...props}>选择 Worker</Button>}\n      />\n      <LayerDialog.Content>\n        <LayerDialog.Title>选择 Worker</LayerDialog.Title>\n        <LayerDialog.Description>\n          选择处理该路由请求的 Worker。\n        </LayerDialog.Description>\n        <LayerDialog.Body>\n          <div className=\"flex flex-col gap-3\">\n            <Input\n              aria-label=\"搜索 Worker\"\n              onChange={(event) => setQuery(event.target.value)}\n              placeholder=\"搜索 Worker\"\n              type=\"search\"\n              value={query}\n            />\n            {matches.length > 0 ? (\n              <ul className=\"flex flex-col divide-y divide-lark-hairline rounded-lg border border-lark-hairline\">\n                {matches.map((worker) => (\n                  <li key={worker} className=\"px-3 py-2 text-lark-default\">\n                    {worker}\n                  </li>\n                ))}\n              </ul>\n            ) : (\n              <Text variant=\"secondary\">没有匹配“{query}”的 Worker。</Text>\n            )}\n          </div>\n        </LayerDialog.Body>\n      </LayerDialog.Content>\n    </LayerDialog.Root>","<LayerDialog.Root>\n      <LayerDialog.Trigger\n        render={(props) => <Button {...props}>检查部署</Button>}\n      />\n      <LayerDialog.Content>\n        <LayerDialog.Title>部署摘要</LayerDialog.Title>\n        <LayerDialog.Description>部署前请检查配置。</LayerDialog.Description>\n        <LayerDialog.Body>\n          <Text variant=\"secondary\">production-api 将部署到全球网络。</Text>\n          <LayerDialog.Separator />\n          <Text variant=\"secondary\">本次部署使用兼容日期 2026-10-26。</Text>\n        </LayerDialog.Body>\n        <LayerDialog.Actions>\n          <LayerDialog.Action>部署</LayerDialog.Action>\n        </LayerDialog.Actions>\n      </LayerDialog.Content>\n    </LayerDialog.Root>","<div className=\"flex flex-wrap justify-center gap-3\">\n      <LayerDialog.Root>\n        <LayerDialog.Trigger\n          render={(props) => <Button {...props}>编辑部署</Button>}\n        />\n        <LayerDialog.Content>\n          <LayerDialog.Title>保存部署</LayerDialog.Title>\n          <LayerDialog.Description>\n            立即部署这些更改，或把它们保存为草稿。\n          </LayerDialog.Description>\n          <LayerDialog.Body>\n            <Text variant=\"secondary\">\n              另一种保存结果与主操作相关，因此它位于分裂按钮的菜单中，而不是作为无关的底部按钮。\n            </Text>\n          </LayerDialog.Body>\n          <LayerDialog.Actions>\n            <LayerDialog.Action\n              menu={[\n                <DropdownMenu.Item key=\"draft\">保存为草稿</DropdownMenu.Item>,\n              ]}\n              menuLabel=\"保存选项\"\n            >\n              保存并部署\n            </LayerDialog.Action>\n          </LayerDialog.Actions>\n        </LayerDialog.Content>\n      </LayerDialog.Root>\n\n      <LayerDialog.Alert>\n        <LayerDialog.Trigger\n          render={(props) => (\n            <Button {...props} variant=\"secondary\">\n              删除部署\n            </Button>\n          )}\n        />\n        <LayerDialog.Content>\n          <LayerDialog.Title>删除部署</LayerDialog.Title>\n          <LayerDialog.Description>\n            这将永久删除该部署，且无法撤销。\n          </LayerDialog.Description>\n          <LayerDialog.Body>\n            <Text variant=\"secondary\">\n              危险操作的分裂按钮让操作的各个部分（包括菜单触发器）保持视觉一致。\n            </Text>\n          </LayerDialog.Body>\n          <LayerDialog.Actions>\n            <LayerDialog.Action\n              menu={[\n                <DropdownMenu.Item key=\"delete-with-tokens\">\n                  删除并吊销令牌\n                </DropdownMenu.Item>,\n              ]}\n              menuLabel=\"删除选项\"\n              variant=\"destructive\"\n            >\n              删除部署\n            </LayerDialog.Action>\n          </LayerDialog.Actions>\n        </LayerDialog.Content>\n      </LayerDialog.Alert>\n    </div>","<LayerDialog.Root>\n      <LayerDialog.Trigger\n        render={(props) => <Button {...props}>编辑资料</Button>}\n      />\n      <LayerDialog.Content>\n        <LayerDialog.Title>编辑资料</LayerDialog.Title>\n        <LayerDialog.Description>\n          更新向团队成员展示的个人资料。确认后更改才会保存。\n        </LayerDialog.Description>\n        <LayerDialog.Body>\n          <div className=\"flex flex-col gap-5\">\n            <Input\n              label=\"显示名称\"\n              onChange={(event) => setName(event.target.value)}\n              value={name}\n            />\n            <Input\n              label=\"邮箱地址\"\n              onChange={(event) => setEmail(event.target.value)}\n              type=\"email\"\n              value={email}\n            />\n          </div>\n        </LayerDialog.Body>\n        <LayerDialog.Actions dismissLabel=\"取消\">\n          <LayerDialog.Action\n            disabled={!email || !name}\n            onClick={() => undefined}\n          >\n            保存更改\n          </LayerDialog.Action>\n        </LayerDialog.Actions>\n      </LayerDialog.Content>\n    </LayerDialog.Root>","<LayerDialog.Alert>\n      <LayerDialog.Trigger\n        render={(props) => (\n          <Button variant=\"secondary-destructive\" {...props}>\n            删除 Worker\n          </Button>\n        )}\n      />\n      <LayerDialog.Content>\n        <LayerDialog.Title>删除 Worker</LayerDialog.Title>\n        <LayerDialog.Description>\n          删除{\" \"}\n          <strong className=\"font-medium text-lark-default\">\n            {workerName}\n          </strong>{\" \"}\n          是永久性操作。\n        </LayerDialog.Description>\n        <LayerDialog.Body>\n          <div className=\"flex flex-col gap-5\">\n            <Text variant=\"secondary\">\n              这将删除该 Worker、部署和配置。如果该 Worker 使用了\n              Queues，会先移除这些连接。Queues、D1\n              数据库和消息仍保留在你的账户中。\n            </Text>\n            <Input\n              label={\n                <>\n                  输入{\" \"}\n                  <strong className=\"font-medium text-lark-default\">\n                    {workerName}\n                  </strong>{\" \"}\n                  以确认\n                </>\n              }\n              onChange={(event) => setConfirmation(event.target.value)}\n              placeholder={workerName}\n              value={confirmation}\n            />\n          </div>\n        </LayerDialog.Body>\n        <LayerDialog.Actions>\n          <LayerDialog.Action\n            disabled={confirmation !== workerName}\n            onClick={() => undefined}\n            variant=\"destructive\"\n          >\n            删除 Worker\n          </LayerDialog.Action>\n        </LayerDialog.Actions>\n      </LayerDialog.Content>\n    </LayerDialog.Alert>","<LayerDialog.Root dismissDisabled={pending}>\n      <LayerDialog.Trigger\n        render={(props) => <Button {...props}>保存设置</Button>}\n      />\n      <LayerDialog.Content>\n        <LayerDialog.Title>保存设置</LayerDialog.Title>\n        <LayerDialog.Description>\n          保存过程中，关闭按钮、Esc 键、背景点击和移动端滑动关闭会被一同阻止。\n        </LayerDialog.Description>\n        <LayerDialog.Body>\n          <Text variant=\"secondary\">\n            通过代码关闭仍然可用，因此保存成功后可以通过 `actionsRef` 或受控的\n            `open` 属性关闭对话框。\n          </Text>\n        </LayerDialog.Body>\n        <LayerDialog.Actions>\n          <LayerDialog.Action\n            loading={pending}\n            onClick={() => {\n              setPending(true);\n              window.setTimeout(() => setPending(false), 1500);\n            }}\n          >\n            保存更改\n          </LayerDialog.Action>\n        </LayerDialog.Actions>\n      </LayerDialog.Content>\n    </LayerDialog.Root>","<LayerDialog.Root\n      open={open}\n      onOpenChange={(nextOpen) => {\n        if (!nextOpen) setCleanupCount((count) => count + 1);\n        setOpen(nextOpen);\n      }}\n    >\n      <LayerDialog.Trigger\n        render={(props) => <Button {...props}>打开草稿</Button>}\n      />\n      <LayerDialog.Content>\n        <LayerDialog.Title>草稿设置</LayerDialog.Title>\n        <LayerDialog.Body>\n          <Text variant=\"secondary\">清理已执行 {cleanupCount} 次。</Text>\n        </LayerDialog.Body>\n      </LayerDialog.Content>\n    </LayerDialog.Root>","<LayerDialog.Root>\n      <LayerDialog.Trigger\n        render={(props) => <Button {...props}>编辑部署</Button>}\n      />\n      <LayerDialog.Content>\n        <LayerDialog.Title>编辑部署</LayerDialog.Title>\n        <LayerDialog.Description>\n          保存前请检查部署设置。\n        </LayerDialog.Description>\n        <LayerDialog.Body>\n          <div className=\"flex flex-col gap-4\">\n            <Text variant=\"secondary\">\n              在此正文中打开第二个对话框时，第一个对话框会保留在其下方，并在关闭时恢复焦点。\n            </Text>\n            <LayerDialog.Alert>\n              <LayerDialog.Trigger\n                render={(props) => (\n                  <Button variant=\"secondary-destructive\" {...props}>\n                    放弃更改\n                  </Button>\n                )}\n              />\n              <LayerDialog.Content size=\"sm\">\n                <LayerDialog.Title>放弃未保存的更改？</LayerDialog.Title>\n                <LayerDialog.Description>\n                  你对部署的修改将永久丢失。\n                </LayerDialog.Description>\n                <LayerDialog.Body>\n                  <Text variant=\"secondary\">\n                    这个嵌套告警会独立渲染到 portal，关闭后应返回编辑对话框。\n                  </Text>\n                </LayerDialog.Body>\n                <LayerDialog.Actions>\n                  <LayerDialog.Action variant=\"destructive\">\n                    放弃更改\n                  </LayerDialog.Action>\n                </LayerDialog.Actions>\n              </LayerDialog.Content>\n            </LayerDialog.Alert>\n          </div>\n        </LayerDialog.Body>\n        <LayerDialog.Actions>\n          <LayerDialog.Action>保存更改</LayerDialog.Action>\n        </LayerDialog.Actions>\n      </LayerDialog.Content>\n    </LayerDialog.Root>","<LayerDialog.Root>\n      <LayerDialog.Trigger\n        render={(props) => <Button {...props}>打开顶部对齐的对话框</Button>}\n      />\n      <LayerDialog.Content verticalAlign=\"top\">\n        <LayerDialog.Title>顶部对齐的对话框</LayerDialog.Title>\n        <LayerDialog.Body>\n          <Text variant=\"secondary\">移动端对话框仍为底部抽屉。</Text>\n        </LayerDialog.Body>\n      </LayerDialog.Content>\n    </LayerDialog.Root>","<>\n      <div className=\"flex flex-wrap gap-2\">\n        <Button onClick={() => openAt(\"center\")}>居中，长内容</Button>\n        <Button onClick={() => openAt(\"top\")}>顶部对齐，长内容</Button>\n      </div>\n      <LayerDialog.Root open={open} onOpenChange={setOpen}>\n        <LayerDialog.Content verticalAlign={verticalAlign}>\n          <LayerDialog.Title>审计日志</LayerDialog.Title>\n          <LayerDialog.Description>\n            对话框会随内容增高，直到达到视口上限，此后仅正文部分滚动。\n          </LayerDialog.Description>\n          <LayerDialog.Body>\n            <ol className=\"flex flex-col gap-2\">\n              {Array.from({ length: 40 }, (_, index) => (\n                <li\n                  key={index}\n                  className=\"rounded-lg border border-lark-line px-3 py-2 text-lark-subtle\"\n                >\n                  第 {index + 1} 条\n                </li>\n              ))}\n            </ol>\n          </LayerDialog.Body>\n          <LayerDialog.Actions>\n            <LayerDialog.Action>导出日志</LayerDialog.Action>\n          </LayerDialog.Actions>\n        </LayerDialog.Content>\n      </LayerDialog.Root>\n    </>","<>\n      <div className=\"flex flex-wrap gap-2\">\n        <Button onClick={() => openAtSize(\"sm\")}>小</Button>\n        <Button onClick={() => openAtSize(\"base\")}>默认</Button>\n        <Button onClick={() => openAtSize(\"lg\")}>大</Button>\n        <Button onClick={() => openAtSize(\"xl\")}>特大</Button>\n      </div>\n      <LayerDialog.Root open={open} onOpenChange={setOpen}>\n        <LayerDialog.Content size={size}>\n          <LayerDialog.Title>检查部署配置</LayerDialog.Title>\n          <LayerDialog.Description>\n            创建本次部署前，请确认服务信息和路由配置。\n          </LayerDialog.Description>\n          <LayerDialog.Body>\n            <div className=\"grid gap-5 sm:grid-cols-2\">\n              <Input label=\"服务名称\" defaultValue=\"production-api\" />\n              <Input label=\"环境\" defaultValue=\"生产环境\" />\n              <Input label=\"主机名\" defaultValue=\"api.example.com\" />\n              <Input label=\"兼容日期\" defaultValue=\"2026-09-09\" />\n            </div>\n          </LayerDialog.Body>\n          <LayerDialog.Actions>\n            <LayerDialog.Action>创建部署</LayerDialog.Action>\n          </LayerDialog.Actions>\n        </LayerDialog.Content>\n      </LayerDialog.Root>\n    </>"],"colors":["bg-lark-contrast","bg-lark-elevated","bg-lark-fill","bg-lark-hairline","bg-lark-mask","border-lark-hairline","border-lark-line","text-lark-subtle"],"subComponents":{"Root":{"name":"Root","description":"Root sub-component","props":{}},"Alert":{"name":"Alert","description":"Alert sub-component","props":{}},"Trigger":{"name":"Trigger","description":"Trigger sub-component","props":{}},"Content":{"name":"Content","description":"Content sub-component","props":{"children":{"type":"ReactNode","required":true},"container":{"type":"PortalContainer","optional":true,"description":"Container element for the portal. Overrides `LarkPortalProvider` context."},"size":{"type":"LarkLayerDialogSize","optional":true,"description":"Desktop-only width. Mobile dialogs always remain full-width."},"verticalAlign":{"type":"LarkLayerDialogVerticalAlign","optional":true,"description":"Desktop-only positioning. Mobile dialogs always remain bottom sheets."},"closeLabel":{"type":"string","optional":true,"description":"Accessible name of the automatic X button. Overrides the `close` translation from LarkLocaleProvider."}}},"Title":{"name":"Title","description":"Title sub-component","props":{"children":{"type":"ReactNode","required":true}}},"Description":{"name":"Description","description":"Description sub-component","props":{"children":{"type":"ReactNode","required":true}}},"Body":{"name":"Body","description":"Body sub-component","props":{"children":{"type":"ReactNode","required":true}}},"Separator":{"name":"Separator","description":"Separator sub-component","props":{}},"Action":{"name":"Action","description":"Action sub-component","props":{}},"Actions":{"name":"Actions","description":"Actions sub-component","props":{"children":{"type":"ReactNode","required":true,"description":"Exactly one action. Pass `menu` to LayerDialog.Action for related actions such as \"Save as draft\"."},"dismissLabel":{"type":"string","optional":true,"description":"Text of the automatic dismiss button. Say \"Cancel\" only when the workflow has a real cancel outcome. Translate it for non-English products."}}}}},"Link":{"name":"Link","type":"component","description":"Link component","importPath":"@lark-ui/core","category":"Other","props":{"variant":{"type":"enum","optional":true,"description":"Visual style of the link.\n- `\"inline\"` — Inline text link that flows with content\n- `\"current\"` — Link that inherits color from parent text\n- `\"plain\"` — Link without underline decoration","values":["inline","current","plain"],"descriptions":{"inline":"Inline text link that flows with content","current":"Link that inherits color from parent text","plain":"Link without underline decoration"},"classes":{"current":"text-current underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors"},"default":"inline"},"to":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"title":{"type":"string","optional":true},"download":{"type":"unknown","optional":true},"href":{"type":"string","optional":true},"hrefLang":{"type":"string","optional":true},"media":{"type":"string","optional":true},"ping":{"type":"string","optional":true},"target":{"type":"React.HTMLAttributeAnchorTarget","optional":true},"type":{"type":"string","optional":true},"referrerPolicy":{"type":"enum","optional":true,"values":["","no-referrer","no-referrer-when-downgrade","origin","origin-when-cross-origin","same-origin","strict-origin","strict-origin-when-cross-origin","unsafe-url"]},"render":{"type":"ReactNode","optional":true,"description":"Allows you to replace the component's HTML element with a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}},"examples":["<div className=\"grid gap-x-6 gap-y-4 text-base md:grid-cols-3\">\n      <Link href=\"#\">默认行内链接</Link>\n      <Link href=\"#\" variant=\"current\">\n        当前颜色链接\n      </Link>\n      <Link href=\"#\" variant=\"plain\">\n        纯文本行内链接\n      </Link>\n    </div>","<p className=\"mx-auto max-w-md text-base leading-relaxed text-lark-default\">\n      这是一段包含<Link href=\"#\">行内链接</Link>\n      的段落，链接与周围的文字自然衔接。链接保留了合适的下划线偏移量，便于阅读。\n    </p>","<Link\n      href=\"https://cloudflare.com\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"text-base\"\n    >\n      访问 Lark <Link.ExternalIcon />\n    </Link>","<p className=\"text-base text-lark-danger\">\n      这条错误信息包含一个{\" \"}\n      <Link href=\"#\" variant=\"current\">\n        链接\n      </Link>\n      ，它继承父级的红色样式。\n    </p>","<div className=\"flex flex-col gap-x-6 gap-y-4 text-base md:flex-row\">\n      <Link render={<CustomRouterLink href=\"/dashboard\" />} variant=\"inline\">\n        仪表板（通过 render）\n      </Link>\n      <Link\n        render={\n          <CustomRouterLink\n            href=\"https://developers.cloudflare.com\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          />\n        }\n        variant=\"inline\"\n      >\n        Lark 文档 <Link.ExternalIcon />\n      </Link>\n    </div>"],"colors":["text-lark-brand-hover","text-lark-brand-pressed","text-lark-link"],"subComponents":{"ExternalIcon":{"name":"ExternalIcon","description":"ExternalIcon sub-component","props":{}}}},"Loader":{"name":"Loader","type":"component","description":"Animated circular spinner for indicating loading states.","importPath":"@lark-ui/core","category":"Feedback","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"size":{"type":"enum","optional":true,"description":"Size of the spinner. Use a preset name or a custom pixel number.\n- `\"sm\"` — 14px, for inline use\n- `\"base\"` — 24px, default size\n- `\"lg\"` — 40px, for prominent loading states","values":["sm","base","lg"],"descriptions":{"sm":"Small loader for inline use","base":"Default loader size","lg":"Large loader for prominent loading states"},"default":"base"}},"examples":["<Loader />","<div className=\"flex items-center gap-4\">\n      <Loader size=\"sm\" />\n      <Loader size=\"base\" />\n      <Loader size=\"lg\" />\n    </div>","<Loader size={24} />","<Loader className=\"text-lark-subtle\" />"],"colors":["text-lark-brand"]},"MenuBar":{"name":"MenuBar","type":"component","description":"MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.","importPath":"@lark-ui/core","category":"Navigation","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"isActive":{"type":"number | boolean | string","optional":true,"description":"The currently active option value — matched against option index or `id`."},"options":{"type":"MenuOptionProps[]","required":true,"description":"Array of menu option configurations."},"optionIds":{"type":"boolean","optional":true,"description":"When true, each option's `id` field is used for matching instead of its array index."}},"examples":[],"colors":["bg-lark-base","bg-lark-fill-hover","bg-lark-recessed","border-lark-recessed","ring-lark-line"],"styling":{"container":{"height":32,"borderRadius":8,"padding":2,"gap":2},"button":{"width":36,"borderRadius":6,"iconSize":18}}},"Meter":{"name":"Meter","type":"component","description":"Progress bar showing a measured value within a known range (e.g. quota usage).","importPath":"@lark-ui/core","category":"Display","props":{"customValue":{"type":"string","optional":true,"description":"Custom formatted value text (e.g. \"750 / 1,000\") displayed instead of percentage."},"label":{"type":"string","required":true,"description":"Label text displayed above the meter track."},"showValue":{"type":"boolean","optional":true,"description":"Whether to display the percentage value next to the label."},"trackClassName":{"type":"string","optional":true,"description":"Additional CSS classes for the track (background bar)."},"indicatorClassName":{"type":"string","optional":true,"description":"Additional CSS classes for the indicator (filled bar)."},"value":{"type":"number","description":"Current value of the meter"},"max":{"type":"number","description":"Maximum value of the meter (default: 100)"},"min":{"type":"number","description":"Minimum value of the meter (default: 0)"}},"examples":["<Meter label=\"已用存储空间\" value={65} />","<Meter label=\"API 请求\" value={75} customValue=\"750 / 1,000\" />","<Meter label=\"进度\" value={40} showValue={false} />","<Meter label=\"配额已达上限\" value={100} />","<Meter label=\"内存使用量\" value={15} />","<Meter\n      label=\"上传进度\"\n      value={80}\n      indicatorClassName=\"from-lark-success via-lark-success to-lark-success\"\n    />"],"colors":["bg-lark-brand","bg-lark-line","text-lark-default","text-lark-placeholder"]},"Pagination":{"name":"Pagination","type":"component","description":"Pagination component","importPath":"@lark-ui/core","category":"Navigation","props":{"setPage":{"type":"(page: number) => void","required":true,"description":"Callback when page changes"},"page":{"type":"number","optional":true,"description":"Current page number (1-indexed)."},"perPage":{"type":"number","optional":true,"description":"Number of items displayed per page."},"totalCount":{"type":"number","optional":true,"description":"Total number of items across all pages."},"hasNextPage":{"type":"boolean","optional":true,"description":"Whether another page exists when the total count is unknown. Ignored when `totalCount` is provided. Unknown totals use sequential controls only."},"className":{"type":"string","optional":true,"description":"Additional CSS classes for the container"},"labels":{"type":"PaginationLabels","optional":true,"description":"Labels for internationalization of aria-labels. All labels have English defaults.\n\nFor visible text like \"Showing X of Y\", use render props on sub-components:\n- `Pagination.Info` children for the info text\n- `Pagination.PageSize` label prop for the \"Per page:\" text"},"children":{"type":"ReactNode","optional":true,"description":"Compound component children for custom layouts. Use Pagination.Info, Pagination.PageSize, Pagination.Controls, and Pagination.Separator."},"controls":{"type":"enum","optional":true,"values":["full","simple"],"descriptions":{"full":"Full pagination controls with first, previous, page input, next, and last buttons","simple":"Simple pagination controls with only previous and next buttons"},"default":"full"},"text":{"type":"object","optional":true}},"examples":["<Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />","<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={10}\n      totalCount={100}\n      controls=\"simple\"\n    />","<Pagination\n      text={() => `第 ${page} 页`}\n      page={page}\n      setPage={setPage}\n      hasNextPage={hasNextPage}\n    />","<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={10}\n      totalCount={100}\n      controls=\"full\"\n    />","<Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />","<Pagination page={page} setPage={setPage} perPage={10} totalCount={0} />","<Pagination page={page} setPage={setPage} perPage={25} totalCount={1250} />","<Pagination\n      text={({ perPage }: { perPage?: number }) =>\n        `第 ${page} 页 - 每页显示 ${perPage} 条`\n      }\n      page={page}\n      setPage={setPage}\n      perPage={25}\n      totalCount={100}\n    />","<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <Pagination.Separator />\n      <Pagination.PageSize\n        value={perPage}\n        onChange={(size) => {\n          setPerPage(size);\n          setPage(1);\n        }}\n      />\n      <Pagination.Controls />\n    </Pagination>","<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={200}\n    >\n      <Pagination.Info />\n      <Pagination.Separator />\n      <Pagination.PageSize\n        value={perPage}\n        onChange={(size) => {\n          setPerPage(size);\n          setPage(1);\n        }}\n        options={[10, 20, 50]}\n      />\n      <Pagination.Controls />\n    </Pagination>","<Pagination page={page} setPage={setPage} perPage={25} totalCount={100}>\n      <Pagination.Info>\n        {({ page, totalCount }) =>\n          `第 ${page} 页，共 ${Math.ceil((totalCount ?? 1) / 25)} 页`\n        }\n      </Pagination.Info>\n      <Pagination.Controls />\n    </Pagination>","<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <Pagination.Separator />\n      <Pagination.PageSize\n        value={perPage}\n        onChange={(size) => {\n          setPerPage(size);\n          setPage(1);\n        }}\n      />\n      <Pagination.Controls pageSelector=\"dropdown\" />\n    </Pagination>","<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <div className=\"flex items-center gap-2\">\n        <Pagination.Controls />\n        <Pagination.Separator />\n        <Pagination.PageSize\n          value={perPage}\n          onChange={(size) => {\n            setPerPage(size);\n            setPage(1);\n          }}\n        />\n      </div>\n    </Pagination>","<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={10}\n      totalCount={100}\n      labels={{\n        firstPage: \"首页\",\n        previousPage: \"上一页\",\n        nextPage: \"下一页\",\n        lastPage: \"末页\",\n        pageNumber: \"页码\",\n        pageSize: \"每页条数\",\n      }}\n    >\n      <Pagination.Info>\n        {({ pageShowingRange, totalCount }) => (\n          <>\n            显示 <span className=\"tabular-nums\">{pageShowingRange}</span> 条，共{\" \"}\n            <span className=\"tabular-nums\">{totalCount}</span> 条\n          </>\n        )}\n      </Pagination.Info>\n      <Pagination.Controls />\n    </Pagination>"],"colors":["bg-lark-base","bg-lark-brand","border-lark-border","border-lark-brand","border-lark-brand-pressed","border-lark-line","ring-lark-hairline","text-lark-brand","text-lark-brand-pressed","text-lark-inactive","text-lark-subtle"],"subComponents":{"Info":{"name":"Info","description":"Info sub-component","props":{"children":{"type":"(props: {\n    page: number;\n    perPage?: number;\n    totalCount?: number;\n    pageShowingRange: string;\n  }) => ReactNode","optional":true,"description":"Custom render function for the info text"},"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"PageSize":{"name":"PageSize","description":"PageSize sub-component","props":{"value":{"type":"number","required":true,"description":"Current page size value"},"options":{"type":"number[]","optional":true,"description":"Available page size options"},"label":{"type":"ReactNode","optional":true,"description":"Label text shown before the selector."},"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"Controls":{"name":"Controls","description":"Controls sub-component","props":{"pageSelector":{"type":"\"input\" | \"dropdown\"","optional":true,"description":"How the page number selector is rendered in \"full\" controls mode. - `\"input\"` (default): A text input where users type a page number. - `\"dropdown\"`: A dropdown select with all page numbers as options. **Note:** `\"dropdown\"` renders an option for every page, so it is best suited for small page counts. For large datasets (hundreds of pages or more) prefer `\"input\"` to avoid rendering performance overhead."},"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"Separator":{"name":"Separator","description":"Separator sub-component","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}}},"styling":{"layout":{"height":36,"buttonSize":36,"inputWidth":50,"iconSize":16,"gap":8,"borderRadius":6}}},"Popover":{"name":"Popover","type":"component","description":"Popover component for displaying accessible popup content anchored to a trigger.","importPath":"@lark-ui/core","category":"Overlay","props":{"side":{"type":"enum","optional":true,"description":"Which side of the trigger the popover appears on.\n- `\"top\"` — Above the trigger\n- `\"bottom\"` — Below the trigger\n- `\"left\"` — Left of the trigger\n- `\"right\"` — Right of the trigger","values":["top","bottom","left","right"],"descriptions":{"top":"Popover appears above the trigger","bottom":"Popover appears below the trigger","left":"Popover appears to the left of the trigger","right":"Popover appears to the right of the trigger"},"default":"bottom"}},"examples":["<Popover.Root>\n      <Popover.Trigger\n        render={<Button shape=\"square\" icon={BellIcon} aria-label=\"通知\" />}\n      />\n      <Popover.Portal>\n        <Popover.Positioner>\n          <Popover.Popup>\n            <Popover.Arrow />\n            <Popover.Title>通知</Popover.Title>\n            <Popover.Description>你已全部看完，干得漂亮！</Popover.Description>\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>","<Popover.Root>\n      <Popover.Trigger render={<Button />}>打开气泡卡片</Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner>\n          <Popover.Popup>\n            <Popover.Arrow />\n            <Popover.Title>气泡卡片标题</Popover.Title>\n            <Popover.Description>\n              这是一个包含标题和描述的基础气泡卡片。\n            </Popover.Description>\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>","<Popover>\n      <Popover.Trigger render={<Button variant=\"secondary\" />}>\n        打开旧版 Content\n      </Popover.Trigger>\n      <Popover.Content className=\"w-72\">\n        <Popover.Title>兼容模式</Popover.Title>\n        <Popover.Description>\n          这个旧版包装器只做淡入，不做缩放或变换。\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>","<Popover.Root>\n      <Popover.Trigger render={<Button variant=\"secondary\" />}>\n        打开可滚动的气泡卡片\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner>\n          <Popover.Popup className=\"w-72\">\n            <Popover.Arrow />\n            <Popover.Title>最近通知</Popover.Title>\n            <Popover.Description>\n              列表可滚动，标题和箭头保持固定。\n            </Popover.Description>\n            <div\n              aria-label=\"最近通知\"\n              className=\"mt-3 max-h-40 overflow-y-auto rounded-md border border-lark-hairline outline-none focus-visible:ring-2 focus-visible:ring-lark-brand\"\n              tabIndex={0}\n            >\n              {Array.from({ length: 10 }, (_, index) => (\n                <div\n                  key={index}\n                  className=\"border-b border-lark-hairline px-3 py-2 last:border-b-0\"\n                >\n                  通知 {index + 1}\n                </div>\n              ))}\n            </div>\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>","<Popover.Root>\n      <Popover.Trigger render={<Button />}>打开较高的气泡卡片</Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner>\n          <Popover.Popup className=\"h-80 max-h-[var(--available-height)] w-72\">\n            <Popover.Arrow />\n            <Popover.Title>自适应高度的浮层</Popover.Title>\n            <Popover.Description>\n              除非视口空间不足，否则该浮层高度为 320px。\n            </Popover.Description>\n            <div\n              aria-label=\"气泡卡片行\"\n              className=\"mt-3 min-h-0 flex-1 overflow-y-auto rounded-md border border-lark-hairline outline-none focus-visible:ring-2 focus-visible:ring-lark-brand\"\n              tabIndex={0}\n            >\n              {Array.from({ length: 12 }, (_, index) => (\n                <div\n                  key={index}\n                  className=\"border-b border-lark-hairline px-3 py-2 last:border-b-0\"\n                >\n                  第 {index + 1} 行\n                </div>\n              ))}\n            </div>\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>","<Popover.Root>\n      <Popover.Trigger render={<Button />}>打开设置</Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner>\n          <Popover.Popup>\n            <Popover.Arrow />\n            <Popover.Title>设置</Popover.Title>\n            <Popover.Description>在下方配置你的偏好设置。</Popover.Description>\n            <div className=\"mt-3\">\n              <Popover.Close render={<Button variant=\"secondary\" size=\"sm\" />}>\n                关闭\n              </Popover.Close>\n            </div>\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>","<div className=\"flex flex-wrap gap-4\">\n      <Popover.Root>\n        <Popover.Trigger render={<Button variant=\"secondary\" />}>\n          底部\n        </Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Positioner side=\"bottom\">\n            <Popover.Popup>\n              <Popover.Arrow />\n              <Popover.Title>底部</Popover.Title>\n              <Popover.Description>\n                气泡卡片显示在下方（默认）。\n              </Popover.Description>\n            </Popover.Popup>\n          </Popover.Positioner>\n        </Popover.Portal>\n      </Popover.Root>\n\n      <Popover.Root>\n        <Popover.Trigger render={<Button variant=\"secondary\" />}>\n          顶部\n        </Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Positioner side=\"top\">\n            <Popover.Popup>\n              <Popover.Arrow />\n              <Popover.Title>顶部</Popover.Title>\n              <Popover.Description>气泡卡片显示在上方。</Popover.Description>\n            </Popover.Popup>\n          </Popover.Positioner>\n        </Popover.Portal>\n      </Popover.Root>\n\n      <Popover.Root>\n        <Popover.Trigger render={<Button variant=\"secondary\" />}>\n          左侧\n        </Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Positioner side=\"left\">\n            <Popover.Popup>\n              <Popover.Arrow />\n              <Popover.Title>左侧</Popover.Title>\n              <Popover.Description>气泡卡片显示在左侧。</Popover.Description>\n            </Popover.Popup>\n          </Popover.Positioner>\n        </Popover.Portal>\n      </Popover.Root>\n\n      <Popover.Root>\n        <Popover.Trigger render={<Button variant=\"secondary\" />}>\n          右侧\n        </Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Positioner side=\"right\">\n            <Popover.Popup>\n              <Popover.Arrow />\n              <Popover.Title>右侧</Popover.Title>\n              <Popover.Description>气泡卡片显示在右侧。</Popover.Description>\n            </Popover.Popup>\n          </Popover.Positioner>\n        </Popover.Portal>\n      </Popover.Root>\n    </div>","<Popover.Root>\n      <Popover.Trigger render={<Button />}>用户资料</Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner>\n          <Popover.Popup className=\"w-64\">\n            <Popover.Arrow />\n            <div className=\"flex items-center gap-3\">\n              <div className=\"size-10 rounded-full bg-lark-recessed\" />\n              <div>\n                <Popover.Title>简·多伊</Popover.Title>\n                <p className=\"text-sm text-lark-subtle\">jane@example.com</p>\n              </div>\n            </div>\n            <div className=\"mt-3 flex gap-2 border-t border-lark-hairline pt-3\">\n              <Button variant=\"secondary\" size=\"sm\" className=\"flex-1\">\n                个人资料\n              </Button>\n              <Popover.Close\n                render={<Button variant=\"ghost\" size=\"sm\" className=\"flex-1\" />}\n              >\n                退出登录\n              </Popover.Close>\n            </div>\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>","<Popover.Root>\n      <Popover.Trigger\n        openOnHover\n        delay={200}\n        render={<Button variant=\"secondary\" />}\n      >\n        悬停试试\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner>\n          <Popover.Popup>\n            <Popover.Arrow />\n            <Popover.Title>悬停触发</Popover.Title>\n            <Popover.Description>\n              该气泡卡片在悬停时打开，延迟 200\n              毫秒。内部仍可包含按钮、链接等可交互内容。\n            </Popover.Description>\n            <div className=\"mt-3\">\n              <Popover.Close render={<Button variant=\"secondary\" size=\"sm\" />}>\n                知道了\n              </Popover.Close>\n            </div>\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>","<div className=\"w-full\">\n      <div className=\"overflow-hidden rounded-lg border border-lark-hairline\">\n        <table className=\"w-full text-sm\">\n          <thead className=\"bg-lark-elevated\">\n            <tr>\n              <th className=\"px-4 py-2 text-left font-medium\">名称</th>\n              <th className=\"px-4 py-2 text-left font-medium\">状态</th>\n              <th className=\"w-12 px-4 py-2\"></th>\n            </tr>\n          </thead>\n          <tbody className=\"divide-y divide-lark-hairline\">\n            {rows.map((row) => (\n              <tr\n                key={row.id}\n                ref={(el) => {\n                  if (el) rowRefs.current.set(row.id, el);\n                }}\n                className={\n                  selectedRow === row.id ? \"bg-lark-recessed\" : \"bg-lark-base\"\n                }\n              >\n                <td className=\"px-4 py-2 font-mono\">{row.name}</td>\n                <td className=\"px-4 py-2 text-lark-subtle\">{row.status}</td>\n                <td className=\"px-4 py-2\">\n                  <Button\n                    size=\"xs\"\n                    variant=\"ghost\"\n                    shape=\"square\"\n                    icon={DotsThree}\n                    aria-label={`${row.name} 的操作`}\n                    onClick={() => handleEdit(row.id)}\n                  />\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n      <Popover.Root\n        open={!!selectedRow}\n        onOpenChange={(open) => !open && setSelectedRow(null)}\n      >\n        <Popover.Portal>\n          <Popover.Positioner\n            side=\"left\"\n            anchor={\n              anchorRect\n                ? { getBoundingClientRect: () => anchorRect }\n                : undefined\n            }\n          >\n            <Popover.Popup>\n              <Popover.Arrow />\n              <Popover.Title>\n                编辑 {rows.find((r) => r.id === selectedRow)?.name}\n              </Popover.Title>\n              <Popover.Description>\n                气泡卡片以选中的行为锚点，而不是图标按钮。\n              </Popover.Description>\n              <div className=\"mt-3\">\n                <Popover.Close\n                  render={<Button size=\"sm\" variant=\"secondary\" />}\n                >\n                  关闭\n                </Popover.Close>\n              </div>\n            </Popover.Popup>\n          </Popover.Positioner>\n        </Popover.Portal>\n      </Popover.Root>\n    </div>"],"colors":["bg-lark-elevated","fill-lark-arrow-edge","fill-lark-arrow-stroke","fill-lark-elevated","ring-lark-line","text-lark-default","text-lark-subtle"],"subComponents":{"Root":{"name":"Root","description":"Root sub-component","props":{}},"Trigger":{"name":"Trigger","description":"Trigger sub-component","props":{}},"Portal":{"name":"Portal","description":"Portal sub-component","props":{}},"Backdrop":{"name":"Backdrop","description":"Backdrop sub-component","props":{}},"Positioner":{"name":"Positioner","description":"Positioner sub-component","props":{}},"Popup":{"name":"Popup","description":"Popup sub-component","props":{}},"Arrow":{"name":"Arrow","description":"Arrow sub-component","props":{}},"Viewport":{"name":"Viewport","description":"Viewport sub-component","props":{}},"Content":{"name":"Content","description":"Content sub-component","props":{}},"Title":{"name":"Title","description":"Title sub-component","props":{}},"Description":{"name":"Description","description":"Description sub-component","props":{}},"Close":{"name":"Close","description":"Close sub-component","props":{}}}},"Radio":{"name":"Radio","type":"component","description":"Radio — radio button group for single-select choices.","importPath":"@lark-ui/core","category":"Input","props":{"variant":{"type":"enum","values":["default","error"],"default":"default","descriptions":{"default":"Default radio appearance","error":"Error state for validation failures"},"classes":{"default":"bg-lark-base ring-lark-outline hover:ring-lark-brand active:ring-lark-brand-pressed focus-visible:ring-lark-brand data-checked:bg-lark-brand data-checked:ring-transparent data-checked:hover:bg-lark-brand-hover data-checked:active:bg-lark-brand-pressed","error":"bg-lark-base ring-lark-danger data-checked:bg-lark-brand"},"stateClasses":{"default":{"hover":"hover:ring-lark-brand","active":"active:ring-lark-brand-pressed","focus":"focus-visible:ring-lark-brand"}}},"appearance":{"type":"LarkRadioAppearance","optional":true,"description":"Visual appearance applied to all Radio.Item children. - `\"default\"` — Standard inline radio items - `\"card\"` — Choice card with border, padding, and highlighted selection state - `\"segmented\"` — Compact single-line group for short options Individual items can override default and card appearances. Segmented is group-only and cannot be overridden by individual items."},"legend":{"type":"string","optional":true,"description":"Legend text for the group (required for accessibility). For more control over legend styling, omit this prop and use `<Radio.Legend>` as a child instead."},"children":{"type":"ReactNode","required":true,"description":"Child Radio.Item components (and optionally a Radio.Legend)"},"orientation":{"type":"\"vertical\" | \"horizontal\"","optional":true,"description":"Layout direction of the radio items"},"error":{"type":"string","optional":true,"description":"Error message for the group"},"description":{"type":"ReactNode","optional":true,"description":"Helper text for the group"},"value":{"type":"T","optional":true,"description":"The controlled value of the selected radio item."},"disabled":{"type":"boolean","optional":true,"description":"Whether all radios in the group are disabled"},"controlPosition":{"type":"RadioControlPosition","optional":true,"description":"Position of radio control relative to label: \"start\" puts radio before label, \"end\" puts label before radio. Defaults to \"start\" for default appearance and \"end\" for card appearance."},"name":{"type":"string","optional":true,"description":"Form submission name for the radio group"},"className":{"type":"string","optional":true,"description":"Additional CSS classes"},"defaultValue":{"type":"T","description":"The uncontrolled initial value of the selected radio item."},"onValueChange":{"type":"(value: T, eventDetails: RadioGroupChangeEventDetails) => void","description":"Callback fired when the selected value changes. The second argument carries native event details about the interaction."}},"examples":["<Radio.Group legend=\"通知偏好\" value={value} onValueChange={setValue}>\n      <Radio.Item label=\"邮件\" value=\"email\" />\n      <Radio.Item label=\"短信\" value=\"sms\" />\n      <Radio.Item label=\"推送通知\" value=\"push\" />\n    </Radio.Group>","<Radio.Group legend=\"账户类型\" value={value} onValueChange={setValue}>\n      <Radio.Item label=\"个人\" value=\"personal\" />\n      <Radio.Item label=\"商业\" value=\"business\" />\n      <Radio.Item label=\"企业版\" value=\"enterprise\" />\n    </Radio.Group>","<Radio.Group\n      legend=\"尺寸\"\n      orientation=\"horizontal\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item label=\"小\" value=\"sm\" />\n      <Radio.Item label=\"中\" value=\"md\" />\n      <Radio.Item label=\"大\" value=\"lg\" />\n    </Radio.Group>","<Radio.Group\n      appearance=\"segmented\"\n      legend=\"时长预设\"\n      value={duration}\n      onValueChange={setDuration}\n    >\n      <Radio.Item label=\"1h\" value=\"1\" />\n      <Radio.Item label=\"12h\" value=\"12\" />\n      <Radio.Item label=\"24h\" value=\"24\" />\n    </Radio.Group>","<div className=\"flex flex-wrap gap-8\">\n      <Radio.Group legend=\"默认外观\" orientation=\"horizontal\" defaultValue=\"1\">\n        <Radio.Item label=\"1h\" value=\"1\" />\n        <Radio.Item label=\"12h\" value=\"12\" />\n        <Radio.Item label=\"24h\" value=\"24\" />\n      </Radio.Group>\n      <Radio.Group appearance=\"segmented\" legend=\"分段外观\" defaultValue=\"1\">\n        <Radio.Item label=\"1h\" value=\"1\" />\n        <Radio.Item label=\"12h\" value=\"12\" />\n        <Radio.Item label=\"24h\" value=\"24\" />\n      </Radio.Group>\n    </div>","<div className=\"flex flex-wrap gap-8\">\n      <Radio.Group\n        appearance=\"segmented\"\n        legend=\"禁用的单选组\"\n        defaultValue=\"12\"\n        disabled\n      >\n        <Radio.Item label=\"1h\" value=\"1\" />\n        <Radio.Item label=\"12h\" value=\"12\" />\n        <Radio.Item label=\"24h\" value=\"24\" />\n      </Radio.Group>\n      <Radio.Group appearance=\"segmented\" legend=\"禁用的选项\" defaultValue=\"1\">\n        <Radio.Item label=\"1h\" value=\"1\" />\n        <Radio.Item label=\"12h\" value=\"12\" disabled />\n        <Radio.Item label=\"24h\" value=\"24\" />\n      </Radio.Group>\n    </div>","<Radio.Group appearance=\"segmented\" defaultValue=\"automatic\">\n      <Radio.Legend className=\"text-sm font-normal text-lark-subtle\">\n        配置模式\n      </Radio.Legend>\n      <Radio.Item label=\"自动\" value=\"automatic\" />\n      <Radio.Item label=\"手动\" value=\"manual\" />\n    </Radio.Group>","<div className=\"w-48 max-w-full\">\n      <Radio.Group\n        appearance=\"segmented\"\n        legend=\"处理偏好\"\n        defaultValue=\"automatic\"\n      >\n        <Radio.Item label=\"自动处理\" value=\"automatic\" />\n        <Radio.Item label=\"手动配置\" value=\"manual\" />\n      </Radio.Group>\n    </div>","<Radio.Group\n      legend=\"配送方式\"\n      description=\"选择你希望接收订单的方式\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item label=\"标准（5-7 天）\" value=\"standard\" />\n      <Radio.Item label=\"加急（2-3 天）\" value=\"express\" />\n      <Radio.Item label=\"隔夜送达\" value=\"overnight\" />\n    </Radio.Group>","<div className=\"grid grid-cols-2 gap-6\">\n      <Radio.Group legend=\"支付方式\" error=\"请选择一种支付方式以继续\">\n        <Radio.Item label=\"信用卡\" value=\"card\" variant=\"error\" />\n        <Radio.Item label=\"PayPal\" value=\"paypal\" variant=\"error\" />\n      </Radio.Group>\n      <Radio.Group\n        legend=\"支付方式\"\n        appearance=\"card\"\n        error=\"请选择一种支付方式以继续\"\n      >\n        <Radio.Item\n          label=\"信用卡\"\n          description=\"可使用 Visa、Mastercard、美国运通或 Elo 支付。\"\n          value=\"card\"\n          variant=\"error\"\n        />\n        <Radio.Item\n          label=\"PayPal\"\n          description=\"使用你的 PayPal 账户支付。\"\n          value=\"paypal\"\n          variant=\"error\"\n        />\n      </Radio.Group>\n    </div>","<div className=\"grid grid-cols-2 gap-6\">\n      <Radio.Group legend=\"禁用的单选组\" disabled defaultValue=\"a\">\n        <Radio.Item label=\"选项 A\" value=\"a\" />\n        <Radio.Item label=\"选项 B\" value=\"b\" />\n      </Radio.Group>\n      <Radio.Group legend=\"单独禁用\" defaultValue=\"available\">\n        <Radio.Item label=\"可用\" value=\"available\" />\n        <Radio.Item label=\"不可用\" value=\"unavailable\" disabled />\n      </Radio.Group>\n      <Radio.Group\n        legend=\"禁用的卡片单选组\"\n        appearance=\"card\"\n        disabled\n        defaultValue=\"a\"\n      >\n        <Radio.Item label=\"选项 A\" description=\"该选项已禁用。\" value=\"a\" />\n        <Radio.Item label=\"选项 B\" description=\"该选项已禁用。\" value=\"b\" />\n      </Radio.Group>\n      <Radio.Group\n        legend=\"单独禁用的卡片\"\n        appearance=\"card\"\n        defaultValue=\"available\"\n      >\n        <Radio.Item\n          label=\"可用\"\n          description=\"该选项可以选择。\"\n          value=\"available\"\n        />\n        <Radio.Item\n          label=\"不可用\"\n          description=\"该选项不可用。\"\n          value=\"unavailable\"\n          disabled\n        />\n      </Radio.Group>\n    </div>","<Radio.Group legend=\"偏好设置\" controlPosition=\"end\" defaultValue=\"a\">\n      <Radio.Item label=\"标签在单选按钮之前\" value=\"a\" />\n      <Radio.Item label=\"另一个选项\" value=\"b\" />\n    </Radio.Group>","<Radio.Group\n      legend=\"选择套餐\"\n      appearance=\"card\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item\n        label=\"免费版\"\n        description=\"适合个人或业余项目，不适合关键业务场景。\"\n        value=\"free\"\n      />\n      <Radio.Item\n        label=\"专业版\"\n        description=\"适合专业网站，不适合关键业务场景。\"\n        value=\"pro\"\n      />\n      <Radio.Item\n        label=\"商业版\"\n        description=\"适合线上运营的小型企业。\"\n        value=\"business\"\n      />\n      <Radio.Item\n        label=\"合约版\"\n        description=\"适合作为业务核心的关键应用。\"\n        value=\"contract\"\n      />\n    </Radio.Group>","<Radio.Group defaultValue=\"all\" value={value} onValueChange={setValue}>\n      <Radio.Legend className=\"sr-only\">路径</Radio.Legend>\n      <Radio.Item label=\"允许所有路径\" value=\"all\" />\n      <Radio.Item label=\"限制为特定路径\" value=\"specific\" />\n    </Radio.Group>","<Radio.Group value={value} onValueChange={setValue}>\n      <Radio.Legend className=\"text-sm font-normal text-lark-subtle\">\n        通知偏好\n      </Radio.Legend>\n      <Radio.Item label=\"邮件\" value=\"email\" />\n      <Radio.Item label=\"短信\" value=\"sms\" />\n      <Radio.Item label=\"推送通知\" value=\"push\" />\n    </Radio.Group>","<Radio.Group\n      legend=\"选择套餐\"\n      appearance=\"card\"\n      controlPosition=\"start\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item\n        label=\"免费版\"\n        description=\"适合个人或业余项目，不适合关键业务场景。\"\n        value=\"free\"\n      />\n      <Radio.Item\n        label=\"专业版\"\n        description=\"适合专业网站，不适合关键业务场景。\"\n        value=\"pro\"\n      />\n    </Radio.Group>","<div className=\"grid grid-cols-2 gap-6\">\n      <Radio.Group<number>\n        legend=\"每页条数\"\n        value={pageSize}\n        onValueChange={setPageSize}\n      >\n        <Radio.Item<number> label=\"10\" value={10} />\n        <Radio.Item<number> label=\"25\" value={25} />\n        <Radio.Item<number> label=\"50\" value={50} />\n      </Radio.Group>\n      <Radio.Group<ThemeType>\n        legend=\"主题\"\n        value={theme}\n        onValueChange={setTheme}\n      >\n        <Radio.Item<ThemeType> label=\"浅色\" value={ThemeType.light} />\n        <Radio.Item<ThemeType> label=\"深色\" value={ThemeType.dark} />\n        <Radio.Item<ThemeType> label=\"跟随系统\" value={ThemeType.system} />\n      </Radio.Group>\n    </div>","<Radio.Group\n      legend=\"选择套餐\"\n      appearance=\"card\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item\n        label={\n          <span className=\"flex items-center gap-2\">\n            免费版\n            <Badge variant=\"neutral\">$0</Badge>\n          </span>\n        }\n        description=\"适合个人或业余项目。\"\n        value=\"free\"\n      />\n      <Radio.Item\n        label={\n          <span className=\"flex items-center gap-2\">\n            专业版\n            <Badge variant=\"primary\">热门</Badge>\n          </span>\n        }\n        description=\"适合专业网站。\"\n        value=\"pro\"\n      />\n    </Radio.Group>","<Radio.Group\n      legend=\"选择套餐\"\n      appearance=\"card\"\n      orientation=\"horizontal\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item\n        label=\"免费版\"\n        description=\"适合个人或业余项目，不适合关键业务场景。\"\n        value=\"free\"\n      />\n      <Radio.Item\n        label=\"专业版\"\n        description=\"适合专业网站，不适合关键业务场景。\"\n        value=\"pro\"\n      />\n      <Radio.Item\n        label=\"商业版\"\n        description=\"适合线上运营的小型企业。\"\n        value=\"business\"\n      />\n      <Radio.Item\n        label=\"合约版\"\n        description=\"适合作为业务核心的关键应用。\"\n        value=\"contract\"\n      />\n    </Radio.Group>"],"colors":["bg-lark-base","bg-lark-brand","bg-lark-brand-hover","bg-lark-brand-pressed","bg-lark-contrast","bg-lark-control","bg-lark-disabled","bg-lark-elevated","bg-lark-fill-selected","bg-lark-recessed","bg-lark-tint","border-lark-brand","border-lark-danger","border-lark-hairline","border-lark-interact","border-lark-line","ring-lark-brand","ring-lark-brand-pressed","ring-lark-danger","ring-lark-disabled","ring-lark-line","ring-lark-outline","text-lark-danger","text-lark-default","text-lark-inactive","text-lark-inverse","text-lark-subtle"],"subComponents":{"Item":{"name":"Item","description":"Item sub-component","props":{}},"Group":{"name":"Group","description":"Group sub-component","props":{"legend":{"type":"string","optional":true,"description":"Legend text for the group (required for accessibility). For more control over legend styling, omit this prop and use `<Radio.Legend>` as a child instead."},"children":{"type":"ReactNode","required":true,"description":"Child Radio.Item components (and optionally a Radio.Legend)"},"orientation":{"type":"\"vertical\" | \"horizontal\"","optional":true,"description":"Layout direction of the radio items"},"appearance":{"type":"LarkRadioAppearance","optional":true,"description":"Visual appearance applied to all Radio.Item children. - `\"default\"` — Standard inline radio items - `\"card\"` — Choice card with border, padding, and highlighted selection state - `\"segmented\"` — Compact single-line group for short options Individual items can override default and card appearances. Segmented is group-only and cannot be overridden by individual items."},"error":{"type":"string","optional":true,"description":"Error message for the group"},"description":{"type":"ReactNode","optional":true,"description":"Helper text for the group"},"value":{"type":"T","optional":true,"description":"The controlled value of the selected radio item."},"disabled":{"type":"boolean","optional":true,"description":"Whether all radios in the group are disabled"},"controlPosition":{"type":"RadioControlPosition","optional":true,"description":"Position of radio control relative to label: \"start\" puts radio before label, \"end\" puts label before radio. Defaults to \"start\" for default appearance and \"end\" for card appearance."},"name":{"type":"string","optional":true,"description":"Form submission name for the radio group"},"className":{"type":"string","optional":true,"description":"Additional CSS classes"},"defaultValue":{"type":"T","description":"The uncontrolled initial value of the selected radio item."},"onValueChange":{"type":"(value: T, eventDetails: RadioGroupChangeEventDetails) => void","description":"Callback fired when the selected value changes. The second argument carries native event details about the interaction."}}},"Legend":{"name":"Legend","description":"Legend sub-component","props":{"children":{"type":"ReactNode","required":true,"description":"Legend content"},"className":{"type":"string","optional":true,"description":"Additional CSS classes (e.g. \"sr-only\" to visually hide the legend)"}}}}},"SankeyChart":{"name":"SankeyChart","type":"component","description":"SankeyChart component","importPath":"@lark-ui/core","category":"Data Visualization","props":{"echarts":{"type":"typeof echarts","required":true,"description":"The ECharts core instance imported by the consumer. Passed in rather than imported directly so the consumer controls which ECharts modules are bundled (tree-shaking)."},"nodes":{"type":"SankeyNodeData[]","required":true,"description":"Array of nodes in the Sankey diagram"},"links":{"type":"SankeyLinkData[]","required":true,"description":"Array of links connecting nodes by index"},"height":{"type":"number","optional":true,"description":"Height of the chart in pixels"},"showNodeValues":{"type":"boolean","optional":true,"description":"Show node values above labels (default: true if any node has a value)"},"nodeLabelLayout":{"type":"\"stacked\" | \"inline\"","optional":true,"description":"Layout for node labels when showNodeValues is true. - 'stacked': value on top, name below (default) - 'inline': \"value name\" on a single line (better for small nodes)"},"formatValue":{"type":"(value: number) => string","optional":true,"description":"Format function for node values (default: toLocaleString)"},"tooltipFormatter":{"type":"(params: SankeyTooltipParams) => string","optional":true,"description":"Custom tooltip formatter. Return HTML string or empty string to hide tooltip."},"nodeWidth":{"type":"number","optional":true},"nodePadding":{"type":"number","optional":true},"showTooltip":{"type":"boolean","optional":true},"defaultNodeColor":{"type":"string","optional":true},"left":{"type":"number | string","optional":true,"description":"Left padding of the Sankey layout within the chart container. Accepts a number (px) or percentage string. ECharts default: '5%'."},"right":{"type":"number | string","optional":true,"description":"Right padding of the Sankey layout within the chart container. Accepts a number (px) or percentage string. ECharts default: '5%'."},"linkColor":{"type":"\"gradient\" | \"gray\"","optional":true,"description":"Link fill style: 'gradient' blends source to target colors, 'gray' uses flat gray"},"linkOpacity":{"type":"number","optional":true},"className":{"type":"string","optional":true},"isDarkMode":{"type":"boolean","optional":true}},"examples":["<SankeyChart\n      echarts={echarts}\n      nodes={basicNodes}\n      links={basicLinks}\n      height={350}\n      isDarkMode={isDarkMode}\n    />","<SankeyChart\n      echarts={echarts}\n      nodes={previewNodes}\n      links={previewLinks}\n      height={200}\n      showTooltip={false}\n      isDarkMode={isDarkMode}\n    />","<SankeyChart\n      echarts={echarts}\n      nodes={multiLevelNodes}\n      links={multiLevelLinks}\n      height={350}\n      nodeWidth={20}\n      nodePadding={15}\n      isDarkMode={isDarkMode}\n    />","<SankeyChart\n      echarts={echarts}\n      nodes={nodes}\n      links={links}\n      height={250}\n      linkOpacity={0.6}\n      isDarkMode={isDarkMode}\n    />","<SankeyChart\n      echarts={echarts}\n      nodes={nodes}\n      links={links}\n      height={300}\n      isDarkMode={isDarkMode}\n    />","<SankeyChart\n      echarts={echarts}\n      nodes={nodes}\n      links={links}\n      height={300}\n      tooltipFormatter={customTooltip}\n      isDarkMode={isDarkMode}\n    />","<SankeyChart\n      echarts={echarts}\n      nodes={basicNodes}\n      links={basicLinks}\n      height={350}\n      left={0}\n      right={0}\n      isDarkMode={isDarkMode}\n    />","<SankeyChart\n      echarts={echarts}\n      nodes={basicNodes}\n      links={basicLinks}\n      height={350}\n      onNodeClick={handleNodeClick}\n      onLinkClick={handleLinkClick}\n      isDarkMode={isDarkMode}\n    />","<div className=\"flex w-full flex-col gap-2\">\n      <div className=\"flex items-center gap-2 text-sm text-lark-subtle\">\n        <span>\n          {hasSelection\n            ? `显示：${[selectedSource, selectedTarget].filter(Boolean).join(\" → \")}`\n            : \"点击节点进行筛选\"}\n        </span>\n        {hasSelection && (\n          <button\n            onClick={resetFilters}\n            className=\"text-lark-brand hover:underline\"\n          >\n            重置\n          </button>\n        )}\n      </div>\n      <SankeyChart\n        echarts={echarts}\n        nodes={filteredNodes}\n        links={filteredLinks}\n        height={300}\n        onNodeClick={handleNodeClick}\n        isDarkMode={isDarkMode}\n      />\n    </div>","<SankeyChart\n      echarts={echarts}\n      nodes={nodes}\n      links={links}\n      height={300}\n      nodeLabelLayout=\"inline\"\n      isDarkMode={isDarkMode}\n    />"],"colors":[]},"Select":{"name":"Select","type":"component","description":"Select component","importPath":"@lark-ui/core","category":"Input","props":{"align":{"type":"enum","optional":true,"description":"How to align the popup relative to the specified side.","values":["start","center","end"]},"alignItemWithTrigger":{"type":"boolean","optional":true,"description":"Whether the positioner overlaps the trigger so the selected item's text is aligned with the trigger's value text. This only applies to mouse input and is automatically disabled if there is not enough space."},"alignOffset":{"type":"number | OffsetFunction","optional":true,"description":"Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side."},"anchor":{"type":"ReactNode","optional":true,"description":"An element to position the popup against. By default, the popup will be positioned against the trigger."},"arrowPadding":{"type":"number","optional":true,"description":"Minimum distance to maintain between the arrow and the edges of the popup.\n\nUse it to prevent the arrow element from hanging out of the rounded corners of a popup."},"collisionAvoidance":{"type":"CollisionAvoidance","optional":true,"description":"Determines how to handle collisions when positioning the popup.\n\n`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):\n- `'flip'`: keep the requested side when it fits; otherwise try the opposite side   (`top` and `bottom`, or `left` and `right`).\n- `'shift'`: never change side; keep the requested side and move the popup within   the clipping boundary so it stays visible.\n- `'none'`: do not correct side-axis overflow.\n\n`align` controls overflow on the alignment axis (`start`/`center`/`end`):\n- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.\n- `'shift'`: keep side and requested alignment, then nudge the popup along the   alignment axis to fit.\n- `'none'`: do not correct alignment-axis overflow.\n\n`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the preferred axis cannot fit:\n- `'start'`: allow perpendicular fallback and try the logical start side first   (`top` before `bottom`, or `left` before `right` in LTR).\n- `'end'`: allow perpendicular fallback and try the logical end side first   (`bottom` before `top`, or `right` before `left` in LTR).\n- `'none'`: do not fallback to the perpendicular axis.\n\nWhen `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`. If `align` is omitted, it defaults to `'flip'`."},"collisionBoundary":{"type":"Boundary","optional":true,"description":"An element or a rectangle that delimits the area that the popup is confined to."},"collisionPadding":{"type":"Padding","optional":true,"description":"Additional space to maintain from the edge of the collision boundary."},"disableAnchorTracking":{"type":"boolean","optional":true,"description":"Whether to disable the popup from tracking any layout shift of its positioning anchor."},"positionMethod":{"type":"enum","optional":true,"description":"Determines which CSS `position` property to use.","values":["absolute","fixed"]},"side":{"type":"enum","optional":true,"description":"Which side of the anchor element to align the popup against. May automatically change to avoid collisions.","values":["top","bottom","left","right","inline-end","inline-start"]},"sideOffset":{"type":"number | OffsetFunction","optional":true,"description":"Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side."},"sticky":{"type":"boolean","optional":true,"description":"Whether to maintain the popup in the viewport after the anchor element was scrolled out of view."},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"render":{"type":"ReactNode","optional":true,"description":"Replaces the trigger element while preserving Select behavior."},"size":{"type":"enum","optional":true,"description":"Size of the select trigger. Matches Input component sizes.","values":["xs","sm","base","lg"],"default":"base"},"label":{"type":"ReactNode","optional":true,"description":"Label content for the select. When provided, enables the Field wrapper with a visible label above the select. For accessibility without a visible label, use `aria-label` instead."},"hideLabel":{"type":"boolean","optional":true},"placeholder":{"type":"string","optional":true,"description":"Placeholder text shown when no value is selected."},"loading":{"type":"boolean","optional":true,"description":"When `true`, shows a skeleton loader in place of the selected value."},"disabled":{"type":"boolean","optional":true,"description":"Whether the select is disabled."},"required":{"type":"boolean","optional":true,"description":"Whether the select is required. When `false`, shows \"(optional)\" text."},"labelTooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content displayed next to the label via an info icon."},"value":{"type":"T","optional":true,"description":"Currently selected value (controlled mode)."},"children":{"type":"ReactNode","optional":true,"description":"`Select.Option` elements to render in the dropdown."},"description":{"type":"ReactNode","optional":true,"description":"Helper text displayed below the select."},"error":{"type":"string | object","optional":true,"description":"Error message string or validation error object with `match` key."},"onValueChange":{"type":"(value: T) => void","description":"Callback when selection changes"},"defaultValue":{"type":"T","description":"Initial value for uncontrolled mode"},"renderValue":{"type":"(value: T) => ReactNode","description":"A function that returns a ReactNode to format the selected value in the trigger. Required when using object values. Use `placeholder` for the empty state."},"items":{"type":"Record<string, string> | Array<{ label: ReactNode; value: T }>","description":"Data structure of items rendered in the popup. Accepts a plain object map (`{ key: \"Label\" }`) or an array of `{ label, value }` for object/complex values."},"isItemEqualToValue":{"type":"(item: T, value: T) => boolean","description":"Custom equality function for comparing items. Required when value is an object, since object identity (`===`) won't match across renders."}},"examples":["<Select\n      label=\"最喜爱的水果\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v ?? \"apple\")}\n      items={{ apple: \"苹果\", banana: \"香蕉\", cherry: \"樱桃\" }}\n    />","<div className=\"grid gap-4\">\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-lark-subtle\">xs</span>\n        <Select\n          aria-label=\"选择尺寸 xs\"\n          size=\"xs\"\n          className=\"w-[200px]\"\n          placeholder=\"请选择……\"\n          items={{ a: \"选项 A\", b: \"选项 B\" }}\n        />\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-lark-subtle\">sm</span>\n        <Select\n          aria-label=\"选择尺寸 sm\"\n          size=\"sm\"\n          className=\"w-[200px]\"\n          placeholder=\"请选择……\"\n          items={{ a: \"选项 A\", b: \"选项 B\" }}\n        />\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-lark-subtle\">base</span>\n        <Select\n          aria-label=\"选择尺寸 base\"\n          size=\"base\"\n          className=\"w-[200px]\"\n          placeholder=\"请选择……\"\n          items={{ a: \"选项 A\", b: \"选项 B\" }}\n        />\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-lark-subtle\">lg</span>\n        <Select\n          aria-label=\"选择尺寸 lg\"\n          size=\"lg\"\n          className=\"w-[200px]\"\n          placeholder=\"请选择……\"\n          items={{ a: \"选项 A\", b: \"选项 B\" }}\n        />\n      </div>\n    </div>","<Select\n      aria-label=\"选择一种水果\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v ?? \"apple\")}\n      items={{ apple: \"苹果\", banana: \"香蕉\", cherry: \"樱桃\" }}\n    />","<Select\n      label=\"问题类型\"\n      description=\"选择最能描述你问题的分类\"\n      className=\"w-[280px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        bug: \"缺陷\",\n        documentation: \"文档\",\n        feature: \"功能\",\n      }}\n    />","<Select\n      label=\"问题类型\"\n      error=\"请选择问题类型\"\n      className=\"w-[280px]\"\n      value={null}\n      items={{\n        bug: \"缺陷\",\n        documentation: \"文档\",\n        feature: \"功能\",\n      }}\n    />","<Select\n      label=\"分类\"\n      placeholder=\"请选择分类……\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        bug: \"缺陷\",\n        documentation: \"文档\",\n        feature: \"功能\",\n      }}\n    />","<Select\n      label=\"优先级\"\n      labelTooltip=\"优先级越高的问题越先得到处理\"\n      placeholder=\"选择优先级\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        low: \"低\",\n        medium: \"中\",\n        high: \"高\",\n        critical: \"紧急\",\n      }}\n    />","<Select\n      label=\"语言\"\n      className=\"w-[200px]\"\n      renderValue={(v) => (\n        <span>\n          {v.emoji} {v.label}\n        </span>\n      )}\n      value={value}\n      onValueChange={(v) => setValue(v as (typeof languages)[0])}\n    >\n      {languages.map((language) => (\n        <Select.Option key={language.value} value={language}>\n          {language.emoji} {language.label}\n        </Select.Option>\n      ))}\n    </Select>","<Select aria-label=\"加载中的选择器\" className=\"w-[200px]\" loading />","<Select\n      label=\"负责人\"\n      className=\"w-[200px]\"\n      loading={loading}\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      placeholder=\"选择负责人\"\n      items={items}\n    />","<Select\n      label=\"可见列\"\n      className=\"w-[250px]\"\n      multiple\n      renderValue={(value) => {\n        if (value.length > 3) {\n          return (\n            <span className=\"line-clamp-1\">\n              {value.slice(0, 2).join(\"、\") + ` 等 ${value.length - 2} 项`}\n            </span>\n          );\n        }\n        return <span>{value.join(\"、\")}</span>;\n      }}\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      <Select.Option value=\"Name\">名称</Select.Option>\n      <Select.Option value=\"Location\">位置</Select.Option>\n      <Select.Option value=\"Size\">大小</Select.Option>\n      <Select.Option value=\"Read\">读取</Select.Option>\n      <Select.Option value=\"Write\">写入</Select.Option>\n      <Select.Option value=\"CreatedAt\">创建时间</Select.Option>\n    </Select>","<Select\n      label=\"合规框架\"\n      className=\"w-[280px]\"\n      multiple\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      <Select.Option value=\"European Union Privacy Regulation\">\n        欧盟隐私条例\n      </Select.Option>\n      <Select.Option value=\"California Consumer Protection Act\">\n        加利福尼亚消费者保护法\n      </Select.Option>\n      <Select.Option value=\"Health Insurance Portability Act\">\n        健康保险可携性法案\n      </Select.Option>\n      <Select.Option value=\"Payment Card Industry Standard\">\n        支付卡行业标准\n      </Select.Option>\n    </Select>","<Select\n      label=\"问题类型\"\n      className=\"w-[220px]\"\n      multiple\n      renderValue={(selected) => (\n        <span className=\"flex items-center gap-2\">\n          <span>问题类型</span>\n          {selected.length > 0 && (\n            <Badge variant=\"neutral\">{selected.length}</Badge>\n          )}\n        </span>\n      )}\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      {allOptions.map((option) => (\n        <Select.Option key={option.value} value={option.value}>\n          {option.label}\n        </Select.Option>\n      ))}\n    </Select>","<Select\n      label=\"作者\"\n      description=\"选择本文档的主要作者\"\n      placeholder=\"选择作者\"\n      className=\"w-[200px]\"\n      onValueChange={(v) => setValue(v as (typeof authors)[0] | null)}\n      value={value}\n      isItemEqualToValue={(item, value) => item?.id === value?.id}\n      renderValue={(author) => author.name}\n    >\n      {authors.map((author) => (\n        <Select.Option key={author.id} value={author}>\n          <div className=\"flex w-[300px] items-center justify-between gap-2\">\n            <Text>{author.name}</Text>\n            <Text variant=\"secondary\">{author.title}</Text>\n          </div>\n        </Select.Option>\n      ))}\n    </Select>","<Select\n      label=\"部署区域\"\n      placeholder=\"请选择区域……\"\n      className=\"w-[250px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as Region | null)}\n      isItemEqualToValue={(item, val) => item.value === val.value}\n    >\n      {regions.map((region) => (\n        <Select.Option\n          key={region.value}\n          value={region}\n          disabled={region.disabled}\n        >\n          {region.label}\n        </Select.Option>\n      ))}\n    </Select>","<Select\n      label=\"套餐\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        free: \"免费版\",\n        pro: \"专业版\",\n        business: { label: \"商业版\", disabled: true },\n        enterprise: { label: \"企业版\", disabled: true },\n      }}\n    />","<Select\n      label=\"食物\"\n      placeholder=\"选择一种食物……\"\n      className=\"w-[220px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as Food | null)}\n      isItemEqualToValue={(item, val) => item.value === val.value}\n    >\n      <Select.Group>\n        <Select.GroupLabel>水果</Select.GroupLabel>\n        {foods.fruits.map((food) => (\n          <Select.Option key={food.value} value={food}>\n            {food.label}\n          </Select.Option>\n        ))}\n      </Select.Group>\n      <Select.Separator />\n      <Select.Group>\n        <Select.GroupLabel>蔬菜</Select.GroupLabel>\n        {foods.vegetables.map((food) => (\n          <Select.Option key={food.value} value={food}>\n            {food.label}\n          </Select.Option>\n        ))}\n      </Select.Group>\n    </Select>","<Select\n      label=\"服务器区域\"\n      placeholder=\"选择区域……\"\n      className=\"w-[260px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as ServerRegion | null)}\n      isItemEqualToValue={(item, val) => item.value === val.value}\n    >\n      <Select.Group>\n        <Select.GroupLabel>可用</Select.GroupLabel>\n        {serverRegions.available.map((region) => (\n          <Select.Option key={region.value} value={region}>\n            {region.label}\n          </Select.Option>\n        ))}\n      </Select.Group>\n      <Select.Separator />\n      <Select.Group>\n        <Select.GroupLabel>不可用</Select.GroupLabel>\n        {serverRegions.unavailable.map((region) => (\n          <Select.Option key={region.value} value={region} disabled>\n            {region.label}\n          </Select.Option>\n        ))}\n      </Select.Group>\n    </Select>","<Select\n      label=\"长列表选择器\"\n      description=\"测试大量选项时的滚动行为\"\n      placeholder=\"请选择一个选项……\"\n      className=\"w-[220px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as LongListItem | null)}\n      isItemEqualToValue={(item, val) => item.value === val.value}\n    >\n      {longListItems.map((item) => (\n        <Select.Option key={item.value} value={item}>\n          {item.label}\n        </Select.Option>\n      ))}\n    </Select>","<div className=\"grid gap-4 sm:grid-cols-2\">\n      <Select\n        label=\"side=bottom（默认）\"\n        className=\"w-[200px]\"\n        defaultValue=\"earth\"\n        items={planets}\n      />\n      <Select\n        label=\"side=top\"\n        side=\"top\"\n        className=\"w-[200px]\"\n        defaultValue=\"earth\"\n        items={planets}\n      />\n      <Select\n        label=\"align=end\"\n        align=\"end\"\n        className=\"w-[200px]\"\n        defaultValue=\"earth\"\n        items={planets}\n      />\n      <Select\n        label=\"sideOffset=12\"\n        sideOffset={12}\n        className=\"w-[200px]\"\n        defaultValue=\"earth\"\n        items={planets}\n      />\n    </div>","<div className=\"flex flex-wrap items-start gap-8\">\n      <Select\n        label=\"锚定（默认）\"\n        description=\"在触发器下方打开\"\n        className=\"w-[200px]\"\n        defaultValue=\"mars\"\n        items={planets}\n      />\n      <Select\n        label=\"与选中项对齐\"\n        description=\"选中的选项与触发器对齐\"\n        alignItemWithTrigger\n        className=\"w-[200px]\"\n        defaultValue=\"mars\"\n        items={planets}\n      />\n    </div>"],"colors":["bg-lark-base","bg-lark-control","bg-lark-elevated","bg-lark-fill-hover","bg-lark-hairline","border-lark-line","ring-lark-border","ring-lark-brand","ring-lark-danger","ring-lark-line","text-lark-brand","text-lark-danger","text-lark-default","text-lark-inactive","text-lark-placeholder","text-lark-subtle"],"subComponents":{"Option":{"name":"Option","description":"Option sub-component","props":{}},"Group":{"name":"Group","description":"Group sub-component","props":{}},"GroupLabel":{"name":"GroupLabel","description":"GroupLabel sub-component","props":{}},"Separator":{"name":"Separator","description":"Separator sub-component","props":{}}},"styling":{"trigger":{"height":32,"paddingX":11,"borderRadius":6,"background":"bg-lark-base","text":"text-color-lark-default","ring":"color-lark-border","fontSize":14,"fontWeight":400},"stateTokens":{"hover":{"ring":"color-lark-brand"},"focus":{"ring":"color-lark-brand"},"error":{"ring":"color-lark-danger"},"disabled":{"background":"color-lark-control"}},"icons":{"caret":{"name":"ph-caret-up-down","size":20},"check":{"name":"ph-check","size":12}},"popup":{"background":"bg-lark-elevated","ring":"border-lark-line","borderRadius":6,"padding":2},"option":{"paddingX":8,"paddingY":4,"borderRadius":4,"fontSize":14,"highlightBackground":"color-lark-fill-hover"}}},"SensitiveInput":{"name":"SensitiveInput","type":"component","description":"Password/secret input that masks its value by default and reveals on click. Includes a built-in copy-to-clipboard button on hover.","importPath":"@lark-ui/core","category":"Other","props":{"alt":{"type":"string","optional":true},"autoComplete":{"type":"React.HTMLInputAutoCompleteAttribute","optional":true},"checked":{"type":"boolean","optional":true},"disabled":{"type":"boolean","optional":true},"height":{"type":"number | string","optional":true},"list":{"type":"string","optional":true},"name":{"type":"string","optional":true},"placeholder":{"type":"string","optional":true},"readOnly":{"type":"boolean","optional":true},"required":{"type":"boolean","optional":true},"width":{"type":"number | string","optional":true},"className":{"type":"string","optional":true},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"title":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true},"value":{"type":"string","optional":true,"description":"Controlled value"},"size":{"type":"enum","optional":true,"description":"Size of the input.\n- `\"xs\"` — Extra small for compact UIs\n- `\"sm\"` — Small for secondary fields\n- `\"base\"` — Default input size\n- `\"lg\"` — Large for prominent fields","values":["xs","sm","base","lg"],"default":"base"},"variant":{"type":"enum","optional":true,"description":"Style variant of the input.\n- `\"default\"` — Default input appearance\n- `\"error\"` — Error state for validation failures","values":["default","error"],"default":"default"},"label":{"type":"ReactNode","optional":true,"description":"Label content for the input (enables Field wrapper and sets masked state label) - can be a string or any React node"},"labelTooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content to display next to the label via an info icon"},"description":{"type":"ReactNode","optional":true,"description":"Helper text displayed below the input"},"error":{"type":"string | object","optional":true,"description":"Error message or validation error object"}},"examples":["<div className=\"w-80\">\n      <SensitiveInput label=\"API 密钥\" defaultValue=\"sk_live_abc123xyz789\" />\n    </div>","<div className=\"flex flex-col gap-4\">\n      {sizes.map((size) => (\n        <div key={size} className=\"flex items-center gap-2\">\n          <span className=\"w-12 text-sm text-lark-subtle\">{size}</span>\n          <SensitiveInput\n            label={`${size} 尺寸`}\n            size={size}\n            defaultValue=\"secret-api-key-123\"\n          />\n        </div>\n      ))}\n    </div>","<div className=\"flex w-80 flex-col gap-4\">\n      <SensitiveInput label=\"受控密钥\" value={value} onValueChange={setValue} />\n      <div className=\"text-sm text-lark-subtle\">\n        当前值：<code className=\"text-lark-default\">{value}</code>\n      </div>\n      <div className=\"flex gap-2\">\n        <Button\n          onClick={() => setValue(\"new-secret-\" + Date.now())}\n          variant=\"primary\"\n          size=\"sm\"\n        >\n          修改值\n        </Button>\n        <Button onClick={() => setValue(\"\")} variant=\"secondary\" size=\"sm\">\n          清空\n        </Button>\n      </div>\n    </div>","<div className=\"flex w-80 flex-col gap-4\">\n      <SensitiveInput\n        label=\"错误状态\"\n        variant=\"error\"\n        defaultValue=\"invalid-key\"\n        error=\"此 API 密钥无效\"\n      />\n      <SensitiveInput label=\"禁用\" defaultValue=\"cannot-edit\" disabled />\n      <SensitiveInput\n        label=\"只读\"\n        defaultValue=\"view-only-secret-key\"\n        readOnly\n      />\n      <SensitiveInput\n        label=\"带说明\"\n        defaultValue=\"my-secret-value\"\n        description=\"请妥善保管此值，不要分享\"\n      />\n    </div>"],"colors":["bg-lark-brand","bg-lark-control","ring-lark-border","text-lark-brand","text-lark-brand-pressed","text-lark-default","text-lark-placeholder","text-lark-subtle"]},"Sidebar":{"name":"Sidebar","type":"component","description":"Sidebar — responsive navigation panel with expand/collapse support.","importPath":"@lark-ui/core","category":"Other","props":{"defaultOpen":{"type":"boolean","optional":true,"description":"Initial open state when uncontrolled."},"open":{"type":"boolean","optional":true,"description":"Controlled open state."},"variant":{"type":"enum","optional":true,"description":"Sidebar layout variant.","values":["sidebar","floating","inset"],"descriptions":{"sidebar":"Standard sidebar with border separator","floating":"Floating sidebar with shadow and rounded corners","inset":"Inset sidebar within the content area"},"default":"sidebar"},"side":{"type":"enum","optional":true,"description":"Which side the sidebar is on.","values":["left","right"],"descriptions":{"left":"Left-aligned sidebar","right":"Right-aligned sidebar"},"default":"left"},"collapsible":{"type":"enum","optional":true,"values":["icon","offcanvas","none"],"descriptions":{"icon":"Collapses to show icons only","offcanvas":"Slides off screen when collapsed","none":"Cannot be collapsed"},"default":"icon"},"resizable":{"type":"boolean","optional":true,"description":"Enable drag-to-resize on the sidebar edge."},"defaultWidth":{"type":"number","optional":true,"description":"Initial width in pixels when resizable."},"minWidth":{"type":"number","optional":true,"description":"Minimum width in pixels when resizing."},"maxWidth":{"type":"number","optional":true,"description":"Maximum width in pixels when resizing."},"contained":{"type":"boolean","optional":true,"description":"When true, the collapsed sidebar uses absolute positioning instead of fixed, keeping it scoped inside a bounded parent. Useful for demos and embedded sidebars."},"peekable":{"type":"boolean","optional":true,"description":"When true, hovering or focusing the collapsed sidebar temporarily expands it. The `state` will be `\"peeking\"` during the peek. Moving away collapses it back."},"animationDuration":{"type":"number","optional":true,"description":"Duration of sidebar expand/collapse animation in milliseconds."},"mobileBreakpoint":{"type":"number","optional":true,"description":"Viewport width (in px) below which the sidebar renders as a mobile dialog sheet instead of the desktop aside rail."},"children":{"type":"ReactNode","optional":true,"description":"Content — typically `<Sidebar>` + main content."},"className":{"type":"string","optional":true,"description":"Additional CSS classes for the wrapper div."}},"examples":["<DemoContainer>\n      <Sidebar.Provider contained defaultOpen className=\"h-full min-h-0!\">\n        <Sidebar>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>概览</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  首页\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  分析\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GlobeIcon}>域名</Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>构建</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuItem>\n                  <Sidebar.Collapsible defaultOpen>\n                    <Sidebar.CollapsibleTrigger\n                      render={\n                        <Sidebar.MenuButton icon={CodeIcon}>\n                          计算\n                          <Sidebar.MenuChevron />\n                        </Sidebar.MenuButton>\n                      }\n                    />\n                    <Sidebar.CollapsibleContent>\n                      <Sidebar.MenuSub>\n                        <Sidebar.MenuSubItem>\n                          <Sidebar.Collapsible>\n                            <Sidebar.CollapsibleTrigger\n                              render={\n                                <Sidebar.MenuSubButton>\n                                  Workers & Pages\n                                  <Sidebar.MenuChevron />\n                                </Sidebar.MenuSubButton>\n                              }\n                            />\n                            <Sidebar.CollapsibleContent>\n                              <Sidebar.MenuSub>\n                                <Sidebar.MenuSubButton>\n                                  概览\n                                </Sidebar.MenuSubButton>\n                                <Sidebar.MenuSubButton>\n                                  Workers\n                                </Sidebar.MenuSubButton>\n                                <Sidebar.MenuSubButton>\n                                  Pages\n                                </Sidebar.MenuSubButton>\n                              </Sidebar.MenuSub>\n                            </Sidebar.CollapsibleContent>\n                          </Sidebar.Collapsible>\n                        </Sidebar.MenuSubItem>\n                        <Sidebar.MenuSubButton>\n                          Durable Objects\n                        </Sidebar.MenuSubButton>\n                      </Sidebar.MenuSub>\n                    </Sidebar.CollapsibleContent>\n                  </Sidebar.Collapsible>\n                </Sidebar.MenuItem>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  存储\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>","<DemoContainer>\n      <Sidebar.Provider contained defaultOpen className=\"h-full min-h-0!\">\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} tooltip=\"首页\" active>\n                  首页\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon} tooltip=\"分析\">\n                  分析\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={CodeIcon} tooltip=\"计算\">\n                  计算\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={DatabaseIcon} tooltip=\"存储\">\n                  存储\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <DemoSidebarFooter>\n            <Sidebar.Trigger />\n          </DemoSidebarFooter>\n        </Sidebar>\n        <DemoMain>\n          <ToggleButton />\n          <p>点击按钮或侧边栏触发器可切换</p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>","<DemoContainer>\n      <Sidebar.Provider contained defaultOpen className=\"h-full min-h-0!\">\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          {loading ? (\n            <Sidebar.Loading />\n          ) : (\n            <Sidebar.Content>\n              <Sidebar.Group>\n                <Sidebar.Menu>\n                  <Sidebar.MenuButton icon={HouseIcon} active>\n                    首页\n                  </Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={ChartBarIcon}>\n                    分析\n                  </Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={CodeIcon}>计算</Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={DatabaseIcon}>\n                    存储\n                  </Sidebar.MenuButton>\n                </Sidebar.Menu>\n              </Sidebar.Group>\n            </Sidebar.Content>\n          )}\n          <DemoSidebarFooter>\n            <Sidebar.Trigger />\n          </DemoSidebarFooter>\n        </Sidebar>\n        <DemoMain>\n          <button\n            type=\"button\"\n            onClick={() => setLoading((l) => !l)}\n            className=\"cursor-pointer rounded-lg border border-lark-line bg-lark-base px-3 py-1.5 text-base text-lark-default transition-colors hover:bg-lark-tint\"\n          >\n            {loading ? \"显示已加载的导航\" : \"显示加载中\"}\n          </button>\n          <p>切换以对比加载状态与已加载的导航</p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>","<DemoContainer>\n      <Sidebar.Provider\n        contained\n        defaultOpen\n        resizable\n        defaultWidth={240}\n        minWidth={180}\n        maxWidth={400}\n        className=\"h-full min-h-0!\"\n      >\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  首页\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  分析\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  存储\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <DemoSidebarFooter>\n            <Sidebar.Trigger />\n          </DemoSidebarFooter>\n          <Sidebar.ResizeHandle />\n        </Sidebar>\n        <DemoMain>\n          <p>拖动侧边栏边缘可调整大小</p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>","<DemoContainer>\n      <Sidebar.Provider\n        contained\n        defaultOpen\n        side=\"right\"\n        className=\"h-full min-h-0!\"\n      >\n        <DemoMain />\n        <Sidebar>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>详情</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={GearIcon} active>\n                  属性\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  指标\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={BellIcon}>告警</Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n        </Sidebar>\n      </Sidebar.Provider>\n    </DemoContainer>","<DemoContainer>\n      <Sidebar.Provider\n        contained\n        defaultOpen\n        peekable\n        className=\"h-full min-h-0!\"\n      >\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} tooltip=\"首页\" active>\n                  首页\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon} tooltip=\"分析\">\n                  分析\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={CodeIcon} tooltip=\"计算\">\n                  计算\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={DatabaseIcon} tooltip=\"存储\">\n                  存储\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <DemoSidebarFooter>\n            <Sidebar.Trigger />\n          </DemoSidebarFooter>\n        </Sidebar>\n        <DemoMain>\n          <PeekStateIndicator />\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>","<div className=\"relative h-[420px] w-full overflow-hidden rounded-lg border border-lark-line bg-lark-base\">\n      <Sidebar.Provider contained defaultOpen className=\"h-full min-h-0!\">\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>概览</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  首页\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  分析\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GlobeIcon}>域名</Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>平台</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  存储\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                  安全\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={LockIcon}>\n                  Zero Trust\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GearIcon}>设置</Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>构建</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuItem>\n                  <Sidebar.Collapsible autoScrollOnOpen>\n                    <Sidebar.CollapsibleTrigger\n                      render={\n                        <Sidebar.MenuButton icon={CodeIcon}>\n                          Workers\n                          <Sidebar.MenuChevron />\n                        </Sidebar.MenuButton>\n                      }\n                    />\n                    <Sidebar.CollapsibleContent>\n                      <Sidebar.MenuSub>\n                        <Sidebar.MenuSubButton>概览</Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>部署</Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>可观测性</Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>设置</Sidebar.MenuSubButton>\n                      </Sidebar.MenuSub>\n                    </Sidebar.CollapsibleContent>\n                  </Sidebar.Collapsible>\n                </Sidebar.MenuItem>\n                <Sidebar.MenuButton icon={CubeIcon}>\n                  容器\n                  <Sidebar.MenuBadge>测试版</Sidebar.MenuBadge>\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <DemoSidebarFooter>\n            <Sidebar.Trigger />\n          </DemoSidebarFooter>\n        </Sidebar>\n        <DemoMain>\n          <p>打开列表底部附近的 Workers</p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </div>","<DemoContainer>\n      <Sidebar.Provider\n        contained\n        defaultOpen\n        className=\"h-full min-h-0!\"\n        onOpenChangeComplete={(open) => {\n          setCompletion(`侧边栏已${open ? \"展开\" : \"折叠\"}。`);\n        }}\n      >\n        <Sidebar>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>概览</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  首页\n                </Sidebar.MenuButton>\n                <Sidebar.MenuItem>\n                  <Sidebar.Collapsible\n                    onOpenChangeComplete={(open) => {\n                      setCompletion(`计算分区已${open ? \"展开\" : \"折叠\"}。`);\n                    }}\n                  >\n                    <Sidebar.CollapsibleTrigger\n                      render={\n                        <Sidebar.MenuButton icon={CodeIcon}>\n                          计算\n                          <Sidebar.MenuChevron />\n                        </Sidebar.MenuButton>\n                      }\n                    />\n                    <Sidebar.CollapsibleContent>\n                      <Sidebar.MenuSub>\n                        <Sidebar.MenuSubButton>Workers</Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>Pages</Sidebar.MenuSubButton>\n                      </Sidebar.MenuSub>\n                    </Sidebar.CollapsibleContent>\n                  </Sidebar.Collapsible>\n                </Sidebar.MenuItem>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <DemoSidebarFooter>\n            <Sidebar.Trigger />\n          </DemoSidebarFooter>\n        </Sidebar>\n        <DemoMain>\n          <p aria-live=\"polite\">{completion}</p>\n          <p>切换侧边栏或打开「计算」以查看完成回调。</p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>","<DemoContainer>\n      <Sidebar.Provider contained defaultOpen className=\"h-full min-h-0!\">\n        <Sidebar>\n          <Sidebar.Header>\n            <button\n              type=\"button\"\n              onClick={() =>\n                setSurface((s) => (s === \"account\" ? \"zone\" : \"account\"))\n              }\n              className=\"flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-lark-default transition-colors hover:bg-lark-tint\"\n            >\n              <ArrowsLeftRightIcon className=\"size-4 shrink-0 text-lark-brand\" />\n              <span className=\"flex-1 text-left font-semibold text-lark-strong\">\n                {surface === \"account\" ? \"账号导航\" : \"区域导航\"}\n              </span>\n            </button>\n          </Sidebar.Header>\n\n          <Sidebar.SlidingViews\n            activeKey={surface}\n            direction={surface === \"zone\" ? \"left\" : \"right\"}\n          >\n            <Sidebar.SlidingView value=\"account\">\n              <Sidebar.Content>\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>账号</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={HouseIcon} active>\n                      首页\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={UserIcon}>\n                      成员\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ChartBarIcon}>\n                      分析\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={GearIcon}>\n                      设置\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n              </Sidebar.Content>\n            </Sidebar.SlidingView>\n\n            <Sidebar.SlidingView value=\"zone\">\n              <Sidebar.Content>\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>区域</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={GlobeIcon} active>\n                      概览\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                      安全\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={LockIcon}>\n                      SSL/TLS\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={DatabaseIcon}>\n                      缓存\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n              </Sidebar.Content>\n            </Sidebar.SlidingView>\n          </Sidebar.SlidingViews>\n        </Sidebar>\n        <DemoMain>\n          <div className=\"flex flex-col items-center gap-2\">\n            <p className=\"font-medium text-lark-default\">\n              当前：{surface === \"account\" ? \"账号\" : \"区域\"}界面\n            </p>\n            <p>点击顶部按钮可在视图之间切换</p>\n          </div>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>","<DemoContainer>\n      <Sidebar.Provider\n        contained\n        defaultOpen\n        peekable\n        className=\"h-full min-h-0!\"\n      >\n        <Sidebar>\n          <Sidebar.Header>\n            <AccountSwitcher />\n          </Sidebar.Header>\n          <Sidebar.SlidingViews\n            activeKey={surface}\n            direction={surface === \"domain\" ? \"left\" : \"right\"}\n          >\n            <Sidebar.SlidingView value=\"account\">\n              <Sidebar.Content>\n                <Sidebar.Group>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton\n                      icon={MagnifyingGlassIcon}\n                      tooltip=\"搜索\"\n                      className=\"mb-3 ring ring-lark-line transition-[margin] duration-(--sidebar-animation-duration) group-data-[state=collapsed]/sidebar:mb-0 group-data-[state=collapsed]/sidebar:ring-transparent\"\n                    >\n                      快速搜索……\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n                <Sidebar.Group>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={HouseIcon} active>\n                      首页\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ChartBarIcon}>\n                      分析与日志\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton\n                      icon={GlobeIcon}\n                      onClick={() => setSurface(\"domain\")}\n                    >\n                      域名\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>构建</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuItem>\n                      <Sidebar.Collapsible defaultOpen>\n                        <Sidebar.CollapsibleTrigger\n                          render={\n                            <Sidebar.MenuButton icon={CodeIcon}>\n                              计算\n                              <Sidebar.MenuChevron />\n                            </Sidebar.MenuButton>\n                          }\n                        />\n                        <Sidebar.CollapsibleContent>\n                          <Sidebar.MenuSub>\n                            <Sidebar.MenuSubItem>\n                              <Sidebar.Collapsible>\n                                <Sidebar.CollapsibleTrigger\n                                  render={\n                                    <Sidebar.MenuSubButton>\n                                      Workers & Pages\n                                      <Sidebar.MenuChevron />\n                                    </Sidebar.MenuSubButton>\n                                  }\n                                />\n                                <Sidebar.CollapsibleContent>\n                                  <Sidebar.MenuSub>\n                                    <Sidebar.MenuSubButton>\n                                      概览\n                                    </Sidebar.MenuSubButton>\n                                    <Sidebar.MenuSubButton>\n                                      Workers\n                                    </Sidebar.MenuSubButton>\n                                    <Sidebar.MenuSubButton>\n                                      Pages\n                                    </Sidebar.MenuSubButton>\n                                  </Sidebar.MenuSub>\n                                </Sidebar.CollapsibleContent>\n                              </Sidebar.Collapsible>\n                            </Sidebar.MenuSubItem>\n                            <Sidebar.MenuSubButton>\n                              Durable Objects\n                            </Sidebar.MenuSubButton>\n                            <Sidebar.MenuSubButton>\n                              容器\n                              <Sidebar.MenuBadge>测试版</Sidebar.MenuBadge>\n                            </Sidebar.MenuSubButton>\n                          </Sidebar.MenuSub>\n                        </Sidebar.CollapsibleContent>\n                      </Sidebar.Collapsible>\n                    </Sidebar.MenuItem>\n                    <Sidebar.MenuButton icon={DatabaseIcon}>\n                      存储\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>防护与连接</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                      安全\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={LockIcon}>\n                      Zero Trust\n                      <Sidebar.MenuBadge>测试版</Sidebar.MenuBadge>\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n              </Sidebar.Content>\n            </Sidebar.SlidingView>\n\n            <Sidebar.SlidingView value=\"domain\">\n              <Sidebar.Content>\n                <Sidebar.Group>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton\n                      icon={ArrowLeftIcon}\n                      onClick={() => setSurface(\"account\")}\n                    >\n                      返回\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>example.com</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={GlobeIcon} active>\n                      概览\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                      安全\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={LockIcon}>\n                      SSL/TLS\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ChartBarIcon}>\n                      分析\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={DatabaseIcon}>\n                      缓存\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n              </Sidebar.Content>\n            </Sidebar.SlidingView>\n          </Sidebar.SlidingViews>\n\n          <DemoSidebarFooter>\n            <Sidebar.Trigger />\n          </DemoSidebarFooter>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>","<DemoContainer>\n      <Sidebar.Provider contained defaultOpen className=\"h-full min-h-0!\">\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.Menu>\n                {LONG_NAV_ITEMS.map((label, idx) => (\n                  <Sidebar.MenuButton\n                    key={label}\n                    icon={idx === 0 ? HouseIcon : GlobeIcon}\n                    active={idx === 0}\n                    itemId={ANCHOR_ID_BY_LABEL[label]}\n                  >\n                    {label}\n                  </Sidebar.MenuButton>\n                ))}\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <DemoSidebarFooter>\n            <Sidebar.Trigger />\n          </DemoSidebarFooter>\n        </Sidebar>\n        <DemoMain>\n          <ScrollToItemControls />\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>","<div className=\"relative h-[540px] w-full overflow-hidden rounded-lg border border-lark-line bg-lark-base\">\n      <Sidebar.Provider contained mobileBreakpoint={9999} className=\"h-full\">\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>概览</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  首页\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  分析\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GlobeIcon}>域名</Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>构建</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={CodeIcon}>计算</Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  存储\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <DemoSidebarFooter>\n            <Sidebar.Trigger />\n          </DemoSidebarFooter>\n        </Sidebar>\n        <DemoMain>\n          <MobileToggleButton />\n          <p>点击按钮打开移动端侧边栏</p>\n          <p className=\"text-sm text-lark-subtle\">按 Esc 键或点击遮罩层关闭</p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </div>","<div className=\"flex flex-col gap-3\">\n      {/* Width control — stands in for resizing a real phone viewport. */}\n      <label className=\"flex items-center gap-3 text-sm text-lark-subtle\">\n        <span className=\"shrink-0\">视口</span>\n        <input\n          type=\"range\"\n          min={280}\n          max={720}\n          value={width}\n          onChange={(e) => setWidth(Number(e.target.value))}\n          className=\"flex-1 cursor-pointer\"\n        />\n        <span className=\"w-14 shrink-0 text-right tabular-nums\">{width}px</span>\n      </label>\n\n      <div\n        className=\"relative h-[540px] overflow-hidden rounded-lg border border-lark-line bg-lark-base\"\n        style={{ width }}\n      >\n        <Sidebar.Provider contained mobileBreakpoint={9999} className=\"h-full\">\n          <Sidebar fullScreenOnMobile>\n            {/* Single row: avatar, then the trail takes the rest of the width.\n                Mirrors the product header — account mark, then breadcrumbs. */}\n            <Sidebar.Header className=\"gap-2 px-3.5\">\n              <CompactAccountSwitcher />\n              <div className=\"min-w-0 flex-1\">\n                <Breadcrumbs size=\"sm\">\n                  {trail.map((label) => (\n                    <Fragment key={label}>\n                      <Breadcrumbs.Link href=\"#\">{label}</Breadcrumbs.Link>\n                      <Breadcrumbs.Separator />\n                    </Fragment>\n                  ))}\n                  <Breadcrumbs.Current>{current}</Breadcrumbs.Current>\n                </Breadcrumbs>\n              </div>\n              <Sidebar.Close />\n            </Sidebar.Header>\n            <Sidebar.Content>\n              <div className=\"pt-1 pb-2\">\n                <QuickSearch />\n              </div>\n              <NavTree selected={selected} onSelect={setSelected} />\n            </Sidebar.Content>\n          </Sidebar>\n\n          <div className=\"flex min-w-0 flex-1 flex-col\">\n            <header className=\"flex h-12 shrink-0 items-center gap-2 border-b border-lark-line px-3\">\n              <Sidebar.Trigger />\n              <div className=\"min-w-0 flex-1\">\n                <Breadcrumbs size=\"sm\">\n                  {trail.map((label) => (\n                    <Fragment key={label}>\n                      <Breadcrumbs.Link href=\"#\">{label}</Breadcrumbs.Link>\n                      <Breadcrumbs.Separator />\n                    </Fragment>\n                  ))}\n                  <Breadcrumbs.Current>{current}</Breadcrumbs.Current>\n                </Breadcrumbs>\n              </div>\n            </header>\n            <DemoMain>\n              <p className=\"text-lark-default\">{current}</p>\n              <p className=\"text-sm text-lark-subtle\">\n                在导航中逐层进入 ——\n                面包屑由导航树推导，因此始终与你当前所在的位置一致。\n              </p>\n            </DemoMain>\n          </div>\n        </Sidebar.Provider>\n      </div>\n    </div>"],"colors":["bg-lark-border","bg-lark-brand","bg-lark-fill-pressed","bg-lark-line","bg-lark-recessed","border-lark-line","text-lark-brand","text-lark-default","text-lark-placeholder","text-lark-strong","text-lark-subtle"],"subComponents":{"Provider":{"name":"Provider","description":"Provider sub-component","props":{"defaultOpen":{"type":"boolean","optional":true,"description":"Initial open state when uncontrolled."},"open":{"type":"boolean","optional":true,"description":"Controlled open state."},"variant":{"type":"SidebarVariant","optional":true,"description":"Sidebar layout variant."},"side":{"type":"SidebarSide","optional":true,"description":"Which side the sidebar is on."},"collapsible":{"type":"\"icon\" | \"offcanvas\" | \"none\"","optional":true},"resizable":{"type":"boolean","optional":true,"description":"Enable drag-to-resize on the sidebar edge."},"defaultWidth":{"type":"number","optional":true,"description":"Initial width in pixels when resizable."},"minWidth":{"type":"number","optional":true,"description":"Minimum width in pixels when resizing."},"maxWidth":{"type":"number","optional":true,"description":"Maximum width in pixels when resizing."},"contained":{"type":"boolean","optional":true,"description":"When true, the collapsed sidebar uses absolute positioning instead of fixed, keeping it scoped inside a bounded parent. Useful for demos and embedded sidebars."},"peekable":{"type":"boolean","optional":true,"description":"When true, hovering or focusing the collapsed sidebar temporarily expands it. The `state` will be `\"peeking\"` during the peek. Moving away collapses it back."},"animationDuration":{"type":"number","optional":true,"description":"Duration of sidebar expand/collapse animation in milliseconds."},"mobileBreakpoint":{"type":"number","optional":true,"description":"Viewport width (in px) below which the sidebar renders as a mobile dialog sheet instead of the desktop aside rail."},"children":{"type":"ReactNode","required":true,"description":"Content — typically `<Sidebar>` + main content."},"className":{"type":"string","optional":true,"description":"Additional CSS classes for the wrapper div."}}},"Header":{"name":"Header","description":"Header sub-component","props":{"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."}}},"Content":{"name":"Content","description":"Content sub-component","props":{"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."}}},"Footer":{"name":"Footer","description":"Footer sub-component","props":{"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."}}},"Loading":{"name":"Loading","description":"Loading sub-component","props":{"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."}}},"Group":{"name":"Group","description":"Group sub-component","props":{"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."}}},"GroupLabel":{"name":"GroupLabel","description":"GroupLabel sub-component","props":{"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."}}},"Menu":{"name":"Menu","description":"Menu sub-component","props":{"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."}}},"MenuItem":{"name":"MenuItem","description":"MenuItem sub-component","props":{"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."}}},"MenuButton":{"name":"MenuButton","description":"MenuButton sub-component","props":{"icon":{"type":"React.ComponentType<{ className?: string }> | React.ReactNode","optional":true},"active":{"type":"boolean","optional":true},"size":{"type":"SidebarMenuButtonSize","optional":true,"description":"Button size. - `\"base\"` — Standard nav item - `\"sm\"` — Compact nav item"},"href":{"type":"string","optional":true},"target":{"type":"React.HTMLAttributeAnchorTarget","optional":true,"description":"Link target — only meaningful when `href` is provided."},"tooltip":{"type":"string","optional":true},"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."},"className":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true}}},"MenuBadge":{"name":"MenuBadge","description":"MenuBadge sub-component","props":{"active":{"type":"boolean","optional":true,"description":"Marks this sub-item as currently active/selected."},"href":{"type":"string","optional":true,"description":"Navigation URL. When set, renders as a link via LinkProvider."},"target":{"type":"React.HTMLAttributeAnchorTarget","optional":true,"description":"Link target — only meaningful when `href` is provided."}}},"MenuSub":{"name":"MenuSub","description":"MenuSub sub-component","props":{"active":{"type":"boolean","optional":true,"description":"Marks this sub-item as currently active/selected."},"href":{"type":"string","optional":true,"description":"Navigation URL. When set, renders as a link via LinkProvider."},"target":{"type":"React.HTMLAttributeAnchorTarget","optional":true,"description":"Link target — only meaningful when `href` is provided."}}},"MenuSubItem":{"name":"MenuSubItem","description":"MenuSubItem sub-component","props":{"active":{"type":"boolean","optional":true,"description":"Marks this sub-item as currently active/selected."},"href":{"type":"string","optional":true,"description":"Navigation URL. When set, renders as a link via LinkProvider."},"target":{"type":"React.HTMLAttributeAnchorTarget","optional":true,"description":"Link target — only meaningful when `href` is provided."}}},"MenuSubButton":{"name":"MenuSubButton","description":"MenuSubButton sub-component","props":{"active":{"type":"boolean","optional":true,"description":"Marks this sub-item as currently active/selected."},"href":{"type":"string","optional":true,"description":"Navigation URL. When set, renders as a link via LinkProvider."},"target":{"type":"React.HTMLAttributeAnchorTarget","optional":true,"description":"Link target — only meaningful when `href` is provided."}}},"Separator":{"name":"Separator","description":"Separator sub-component","props":{"defaultOpen":{"type":"boolean","optional":true,"description":"Initial open state (uncontrolled)."},"open":{"type":"boolean","optional":true,"description":"Controlled open state."},"autoScrollOnOpen":{"type":"boolean","optional":true,"description":"Scroll the expanded content into view after opening."}}},"Trigger":{"name":"Trigger","description":"Trigger sub-component","props":{"defaultOpen":{"type":"boolean","optional":true,"description":"Initial open state (uncontrolled)."},"open":{"type":"boolean","optional":true,"description":"Controlled open state."},"autoScrollOnOpen":{"type":"boolean","optional":true,"description":"Scroll the expanded content into view after opening."}}},"Close":{"name":"Close","description":"Close sub-component","props":{"defaultOpen":{"type":"boolean","optional":true,"description":"Initial open state (uncontrolled)."},"open":{"type":"boolean","optional":true,"description":"Controlled open state."},"autoScrollOnOpen":{"type":"boolean","optional":true,"description":"Scroll the expanded content into view after opening."}}},"Rail":{"name":"Rail","description":"Rail sub-component","props":{"defaultOpen":{"type":"boolean","optional":true,"description":"Initial open state (uncontrolled)."},"open":{"type":"boolean","optional":true,"description":"Controlled open state."},"autoScrollOnOpen":{"type":"boolean","optional":true,"description":"Scroll the expanded content into view after opening."}}},"ResizeHandle":{"name":"ResizeHandle","description":"ResizeHandle sub-component","props":{"defaultOpen":{"type":"boolean","optional":true,"description":"Initial open state (uncontrolled)."},"open":{"type":"boolean","optional":true,"description":"Controlled open state."},"autoScrollOnOpen":{"type":"boolean","optional":true,"description":"Scroll the expanded content into view after opening."}}},"MenuChevron":{"name":"MenuChevron","description":"MenuChevron sub-component","props":{"className":{"type":"string","optional":true}}},"Collapsible":{"name":"Collapsible","description":"Collapsible sub-component","props":{"defaultOpen":{"type":"boolean","optional":true,"description":"Initial open state (uncontrolled)."},"open":{"type":"boolean","optional":true,"description":"Controlled open state."},"autoScrollOnOpen":{"type":"boolean","optional":true,"description":"Scroll the expanded content into view after opening."}}},"CollapsibleTrigger":{"name":"CollapsibleTrigger","description":"CollapsibleTrigger sub-component","props":{"render":{"type":"React.ReactElement","required":true,"description":"Element to render as the trigger. Gets aria-expanded, aria-controls, and onClick merged."}}},"CollapsibleContent":{"name":"CollapsibleContent","description":"CollapsibleContent sub-component","props":{"activeKey":{"type":"string","required":true,"description":"Key of the currently active view. Must match a child `SlidingView` value."},"direction":{"type":"\"left\" | \"right\"","optional":true,"description":"Slide direction for the transition. - `\"left\"`: new view slides in from the right - `\"right\"`: new view slides in from the left"}}},"SlidingViews":{"name":"SlidingViews","description":"SlidingViews sub-component","props":{"activeKey":{"type":"string","required":true,"description":"Key of the currently active view. Must match a child `SlidingView` value."},"direction":{"type":"\"left\" | \"right\"","optional":true,"description":"Slide direction for the transition. - `\"left\"`: new view slides in from the right - `\"right\"`: new view slides in from the left"}}},"SlidingView":{"name":"SlidingView","description":"SlidingView sub-component","props":{"value":{"type":"string","required":true,"description":"Unique key matching this view. Must correspond to `activeKey` on `SlidingViews`."}}}},"styling":{"width":{"expanded":"16.25rem","icon":"57px"},"mobile":{"breakpoint":768}}},"Slider":{"name":"Slider","type":"component","description":"Slider component","importPath":"@lark-ui/core","category":"Input","props":{"size":{"type":"enum","values":["sm","base"],"default":"base","descriptions":{"sm":"Compact slider for dense layouts","base":"Default slider size"},"classes":{"sm":"h-6","base":"h-8"}},"label":{"type":"ReactNode","optional":true,"description":"Label displayed above the slider track."},"getAriaLabel":{"type":"(index: number) => string","optional":true,"description":"Accessible name for each thumb. Use it when there is no visible `label`, or to tell the thumbs of a range slider apart."},"value":{"type":"number | readonly number[]","description":"Controlled value. Pass an array to render one thumb per value (a range)."},"defaultValue":{"type":"number | readonly number[]","description":"Uncontrolled initial value. Pass an array to render one thumb per value (a range)."},"onValueChange":{"type":"(value: number | readonly number[], eventDetails: SliderRoot.ChangeEventDetails) => void","description":"Called when the value changes while dragging or from the keyboard"},"min":{"type":"number","description":"Minimum value of the slider (default: 0)"},"max":{"type":"number","description":"Maximum value of the slider (default: 100)"},"step":{"type":"number","description":"Amount the value changes per step (default: 1)"},"format":{"type":"Intl.NumberFormatOptions","description":"Formats the value badges, range labels, and the value announced to assistive technology"},"disabled":{"type":"boolean","description":"Whether the slider is disabled"}},"examples":["<Slider label=\"音量\" defaultValue={40} className=\"w-72\" />","<Slider\n      label=\"价格区间\"\n      defaultValue={[25, 75]}\n      getAriaLabel={(index) => (index === 0 ? \"最低价格\" : \"最高价格\")}\n      className=\"w-72\"\n    />","<Slider label=\"匹配数量\" defaultValue={2} max={5} className=\"w-72\" />","<Slider\n      label=\"采样率\"\n      defaultValue={0.25}\n      min={0}\n      max={1}\n      step={0.05}\n      format={{ style: \"percent\" }}\n      className=\"w-72\"\n    />","<div className=\"flex w-72 flex-col gap-6\">\n      <Slider label=\"小\" size=\"sm\" defaultValue={30} />\n      <Slider label=\"常规\" defaultValue={30} />\n    </div>","<div className=\"flex w-72 flex-col gap-3\">\n      <Slider\n        label=\"亮度\"\n        value={value}\n        onValueChange={(next) => setValue(next)}\n      />\n      <p className=\"text-sm text-lark-subtle\">亮度：{value}%</p>\n    </div>","<Slider label=\"已锁定\" defaultValue={70} disabled className=\"w-72\" />"],"colors":["bg-lark-border","bg-lark-brand","bg-lark-contrast","bg-lark-elevated","bg-lark-fill","bg-lark-hairline","bg-lark-line","ring-lark-border","ring-lark-brand","ring-lark-line","text-lark-default","text-lark-inverse","text-lark-subtle"]},"Surface":{"name":"Surface","type":"component","description":"Surface component","importPath":"@lark-ui/core","category":"Layout","props":{"as":{"type":"React.ElementType","optional":true},"render":{"type":"ReactNode","optional":true,"description":"Allows you to replace the component's HTML element with a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"title":{"type":"string","optional":true}},"examples":[],"colors":["bg-lark-base","bg-lark-elevated"]},"Switch":{"name":"Switch","type":"component","description":"Switch component","importPath":"@lark-ui/core","category":"Input","props":{"variant":{"type":"enum","optional":true,"description":"Visual variant: \"default\" (pill, brand color) or \"neutral\" (squircle, monochrome)","values":["default","neutral"],"descriptions":{"default":"Default switch with pill shape and brand blue color","neutral":"Monochrome switch with pill shape for subtle toggles"},"classes":{"default":"bg-lark-border data-[checked]:bg-lark-brand","neutral":"bg-lark-border data-[checked]:bg-lark-contrast"},"default":"default"},"label":{"type":"ReactNode","optional":true,"description":"Label content for the switch (Field wrapper is built-in) - can be a string or any React node. Optional when used standalone for visual-only purposes."},"labelTooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content to display next to the label via an info icon"},"required":{"type":"boolean","optional":true,"description":"Whether the switch is required. When explicitly false, shows \"(optional)\" text after the label."},"controlFirst":{"type":"boolean","optional":true,"description":"When true (default), switch appears before label. When false, label appears before switch."},"size":{"type":"enum","optional":true,"values":["sm","base","lg"],"descriptions":{"sm":"Small switch for compact UIs","base":"Default switch size","lg":"Large switch for prominent toggles"},"classes":{"sm":"h-4 w-7","base":"h-5.5 w-10","lg":"h-6 w-11"},"default":"base"},"checked":{"type":"boolean","optional":true},"disabled":{"type":"boolean","optional":true},"transitioning":{"type":"boolean","optional":true},"name":{"type":"string","optional":true},"type":{"type":"enum","optional":true,"values":["submit","reset","button"]},"value":{"type":"string | string[] | number","optional":true},"className":{"type":"string","optional":true},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"title":{"type":"string","optional":true},"onClick":{"type":"(event: React.MouseEvent) => void","required":true,"description":"Callback when switch is clicked"}},"examples":["<Switch label=\"开关\" checked={checked} onCheckedChange={setChecked} />","<Switch label=\"开关\" checked={false} onCheckedChange={() => {}} />","<Switch label=\"开关\" checked={true} onCheckedChange={() => {}} />","<Switch label=\"禁用\" checked={false} disabled />","<Switch\n      label=\"中性开关\"\n      variant=\"neutral\"\n      checked={checked}\n      onCheckedChange={setChecked}\n    />","<div className=\"flex flex-col gap-4\">\n      <Switch\n        label=\"中性关闭\"\n        variant=\"neutral\"\n        checked={false}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"中性开启\"\n        variant=\"neutral\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch label=\"中性禁用\" variant=\"neutral\" checked={false} disabled />\n    </div>","<div className=\"grid grid-cols-2 gap-x-8 gap-y-4\">\n      <Switch label=\"默认关闭\" checked={false} onCheckedChange={() => {}} />\n      <Switch label=\"默认开启\" checked={true} onCheckedChange={() => {}} />\n      <Switch\n        label=\"中性关闭\"\n        variant=\"neutral\"\n        checked={false}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"中性开启\"\n        variant=\"neutral\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n    </div>","<Switch\n      id=\"my-custom-switch\"\n      label=\"自定义 ID\"\n      checked={checked}\n      onCheckedChange={setChecked}\n    />","<Switch.Group legend=\"通知设置\">\n      <Switch.Item label=\"邮件通知\" />\n      <Switch.Item label=\"短信通知\" />\n      <Switch.Item label=\"推送通知\" />\n    </Switch.Group>","<Switch.Group>\n      <Switch.Legend className=\"sr-only\">通知设置</Switch.Legend>\n      <Switch.Item label=\"邮件通知\" />\n      <Switch.Item label=\"短信通知\" />\n      <Switch.Item label=\"推送通知\" />\n    </Switch.Group>","<Switch.Group>\n      <Switch.Legend className=\"text-sm font-normal text-lark-subtle\">\n        通知设置\n      </Switch.Legend>\n      <Switch.Item label=\"邮件通知\" />\n      <Switch.Item label=\"短信通知\" />\n      <Switch.Item label=\"推送通知\" />\n    </Switch.Group>","<div className=\"flex flex-col gap-4\">\n      <Switch label=\"小\" size=\"sm\" checked={true} onCheckedChange={() => {}} />\n      <Switch\n        label=\"常规（默认）\"\n        size=\"base\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch label=\"大\" size=\"lg\" checked={true} onCheckedChange={() => {}} />\n    </div>"],"colors":["bg-lark-base","bg-lark-border","bg-lark-brand","bg-lark-contrast","bg-lark-line","text-lark-danger","text-lark-default","text-lark-inactive","text-lark-subtle"],"subComponents":{"Item":{"name":"Item","description":"Item sub-component","props":{}},"Group":{"name":"Group","description":"Group sub-component","props":{"legend":{"type":"string","optional":true,"description":"Legend text for the group. For more control over legend styling, omit this prop and use `<Switch.Legend>` as a child instead."},"children":{"type":"ReactNode","required":true,"description":"Child Switch.Item components (and optionally a Switch.Legend)"},"error":{"type":"string","optional":true,"description":"Error message for the group (only appears in groups, not single switches)"},"description":{"type":"ReactNode","optional":true,"description":"Helper text for the group"},"disabled":{"type":"boolean","optional":true,"description":"Whether all switches in the group are disabled"},"controlFirst":{"type":"boolean","optional":true,"description":"When true (default), switch appears before label. When false, label appears before switch."},"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"Legend":{"name":"Legend","description":"Legend sub-component","props":{"children":{"type":"ReactNode","required":true,"description":"Legend content"},"className":{"type":"string","optional":true,"description":"Additional CSS classes (e.g. \"sr-only\" to visually hide the legend)"}}}}},"Table":{"name":"Table","type":"component","description":"Table — semantic HTML table with styled rows, cells, and selection support.","importPath":"@lark-ui/core","category":"Other","props":{"layout":{"type":"enum","values":["auto","fixed"],"default":"auto","descriptions":{"auto":"Auto table layout - columns resize based on content","fixed":"Fixed table layout - columns have equal width, controlled via colgroup"},"classes":{"fixed":"table-fixed"}},"variant":{"type":"enum","values":["default","selected"],"default":"default","descriptions":{"default":"Default row variant with Feishu hover highlight","selected":"Selected row variant"},"classes":{"default":"transition-colors duration-100 hover:bg-lark-table-row-hover hover:[--lark-table-row-bg:var(--color-lark-table-row-hover)] [--lark-table-row-bg:var(--color-lark-base)]","selected":"transition-colors duration-100 bg-lark-fill-selected [--lark-table-row-bg:var(--color-lark-fill-selected)]"},"stateClasses":{"default":{"hover":"hover:bg-lark-table-row-hover hover:[--lark-table-row-bg:var(--color-lark-table-row-hover)]"}}},"sticky":{"type":"enum","values":["left","right"],"descriptions":{"left":"Pin column to the left edge of the scroll container","right":"Pin column to the right edge of the scroll container"},"classes":{"left":"sticky left-0","right":"sticky right-0"}},"className":{"type":"string","description":"Additional CSS classes"},"children":{"type":"ReactNode","description":"Child elements"}},"examples":["<LayerCard className=\"p-0\">\n      <Table>\n        <Table.Header>\n          <Table.Row>\n            <Table.Head>主题</Table.Head>\n            <Table.Head>发件人</Table.Head>\n            <Table.Head>日期</Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.slice(0, 3).map((row) => (\n            <Table.Row key={row.id}>\n              <Table.Cell>{row.subject}</Table.Cell>\n              <Table.Cell>{row.from}</Table.Cell>\n              <Table.Cell>{row.date}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>","<LayerCard className=\"p-0\">\n      <Table>\n        <Table.Header>\n          <Table.Row>\n            <Table.CheckHead\n              checked={selectedIds.size === rows.length}\n              indeterminate={\n                selectedIds.size > 0 && selectedIds.size < rows.length\n              }\n              onCheckedChange={toggleAll}\n              aria-label=\"选择所有行\"\n            />\n            <Table.Head>主题</Table.Head>\n            <Table.Head>发件人</Table.Head>\n            <Table.Head>日期</Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {rows.map((row) => (\n            <Table.Row key={row.id}>\n              <Table.CheckCell\n                checked={selectedIds.has(row.id)}\n                onCheckedChange={() => toggleRow(row.id)}\n                aria-label={`选择 ${row.subject}`}\n              />\n              <Table.Cell>{row.subject}</Table.Cell>\n              <Table.Cell>{row.from}</Table.Cell>\n              <Table.Cell>{row.date}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>","<LayerCard className=\"p-0\">\n      <Table>\n        <Table.Header variant=\"compact\">\n          <Table.Row>\n            <Table.Head>主题</Table.Head>\n            <Table.Head>发件人</Table.Head>\n            <Table.Head>日期</Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.slice(0, 3).map((row) => (\n            <Table.Row key={row.id}>\n              <Table.Cell>{row.subject}</Table.Cell>\n              <Table.Cell>{row.from}</Table.Cell>\n              <Table.Cell>{row.date}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>","<LayerCard className=\"p-0\">\n      <Table>\n        <Table.Header>\n          <Table.Row>\n            <Table.CheckHead\n              checked={selectedIds.size === rows.length}\n              indeterminate={\n                selectedIds.size > 0 && selectedIds.size < rows.length\n              }\n              onCheckedChange={toggleAll}\n              aria-label=\"选择所有行\"\n            />\n            <Table.Head>主题</Table.Head>\n            <Table.Head>发件人</Table.Head>\n            <Table.Head>日期</Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {rows.map((row) => (\n            <Table.Row\n              key={row.id}\n              variant={selectedIds.has(row.id) ? \"selected\" : \"default\"}\n            >\n              <Table.CheckCell\n                checked={selectedIds.has(row.id)}\n                onCheckedChange={() => toggleRow(row.id)}\n                aria-label={`选择 ${row.subject}`}\n              />\n              <Table.Cell>{row.subject}</Table.Cell>\n              <Table.Cell>{row.from}</Table.Cell>\n              <Table.Cell>{row.date}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>","<LayerCard className=\"p-0\">\n      <Table layout=\"fixed\">\n        <colgroup>\n          <col />\n          <col className=\"w-[150px]\" />\n          <col className=\"w-[150px]\" />\n        </colgroup>\n        <Table.Header>\n          <Table.Row>\n            <Table.Head>主题</Table.Head>\n            <Table.Head>发件人</Table.Head>\n            <Table.Head>日期</Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.map((row) => (\n            <Table.Row key={row.id}>\n              <Table.Cell>{row.subject}</Table.Cell>\n              <Table.Cell>{row.from}</Table.Cell>\n              <Table.Cell>{row.date}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>","<LayerCard className=\"w-full max-w-md overflow-x-auto p-0\">\n      <Table>\n        <Table.Header variant=\"compact\">\n          <Table.Row>\n            <Table.Head>主题</Table.Head>\n            <Table.Head>发件人</Table.Head>\n            <Table.Head>日期</Table.Head>\n            <Table.Head>标签</Table.Head>\n            <Table.Head sticky=\"right\">\n              <span className=\"sr-only\">操作</span>\n            </Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.map((row) => (\n            <Table.Row key={row.id}>\n              <Table.Cell className=\"whitespace-nowrap\">\n                {row.subject}\n              </Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">{row.from}</Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">{row.date}</Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">\n                {row.tags ? (\n                  <div className=\"inline-flex gap-1\">\n                    {row.tags.map((tag) => (\n                      <Badge key={tag}>{tag}</Badge>\n                    ))}\n                  </div>\n                ) : (\n                  \"—\"\n                )}\n              </Table.Cell>\n              <Table.Cell sticky=\"right\" className=\"text-right\">\n                <DropdownMenu>\n                  <DropdownMenu.Trigger\n                    render={\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        shape=\"square\"\n                        aria-label=\"更多选项\"\n                      >\n                        <DotsThree weight=\"bold\" size={16} />\n                      </Button>\n                    }\n                  />\n                  <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={Eye}>查看</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={PencilSimple}>\n                      编辑\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Separator />\n                    <DropdownMenu.Item icon={Trash} variant=\"danger\">\n                      删除\n                    </DropdownMenu.Item>\n                  </DropdownMenu.Content>\n                </DropdownMenu>\n              </Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>","<LayerCard className=\"w-full max-w-md overflow-x-auto p-0\">\n      <Table>\n        <Table.Header>\n          <Table.Row>\n            <Table.Head>主题</Table.Head>\n            <Table.Head>发件人</Table.Head>\n            <Table.Head>日期</Table.Head>\n            <Table.Head>标签</Table.Head>\n            <Table.Head sticky=\"right\">\n              <span className=\"sr-only\">操作</span>\n            </Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.map((row) => (\n            <Table.Row key={row.id}>\n              <Table.Cell className=\"whitespace-nowrap\">\n                {row.subject}\n              </Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">{row.from}</Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">{row.date}</Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">\n                {row.tags ? (\n                  <div className=\"inline-flex gap-1\">\n                    {row.tags.map((tag) => (\n                      <Badge key={tag}>{tag}</Badge>\n                    ))}\n                  </div>\n                ) : (\n                  \"—\"\n                )}\n              </Table.Cell>\n              <Table.Cell sticky=\"right\" className=\"text-right\">\n                <DropdownMenu>\n                  <DropdownMenu.Trigger\n                    render={\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        shape=\"square\"\n                        aria-label=\"更多选项\"\n                      >\n                        <DotsThree weight=\"bold\" size={16} />\n                      </Button>\n                    }\n                  />\n                  <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={Eye}>查看</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={PencilSimple}>\n                      编辑\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Separator />\n                    <DropdownMenu.Item icon={Trash} variant=\"danger\">\n                      删除\n                    </DropdownMenu.Item>\n                  </DropdownMenu.Content>\n                </DropdownMenu>\n              </Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>","<LayerCard className=\"w-full overflow-x-auto p-0\">\n      <Table layout=\"fixed\">\n        <colgroup>\n          <col />{\" \"}\n          {/* Checkbox column - width handled by Table.CheckHead/CheckCell */}\n          <col />\n          <col style={{ width: \"150px\" }} />\n          <col style={{ width: \"120px\" }} />\n          <col style={{ width: \"50px\" }} />\n        </colgroup>\n        <Table.Header>\n          <Table.Row>\n            <Table.CheckHead\n              checked={selectedIds.size === emailData.length}\n              indeterminate={\n                selectedIds.size > 0 && selectedIds.size < emailData.length\n              }\n              onCheckedChange={toggleAll}\n              aria-label=\"选择所有行\"\n            />\n            <Table.Head>主题</Table.Head>\n            <Table.Head>发件人</Table.Head>\n            <Table.Head>日期</Table.Head>\n            <Table.Head></Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.map((row) => (\n            <Table.Row\n              key={row.id}\n              variant={selectedIds.has(row.id) ? \"selected\" : \"default\"}\n            >\n              <Table.CheckCell\n                checked={selectedIds.has(row.id)}\n                onCheckedChange={() => toggleRow(row.id)}\n                aria-label={`选择 ${row.subject}`}\n              />\n              <Table.Cell>\n                <div className=\"flex items-center gap-2\">\n                  <EnvelopeSimple size={16} />\n                  <span className=\"truncate\">{row.subject}</span>\n                  {row.tags && (\n                    <div className=\"ml-2 inline-flex gap-1\">\n                      {row.tags.map((tag) => (\n                        <Badge key={tag}>{tag}</Badge>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              </Table.Cell>\n              <Table.Cell>\n                <span className=\"truncate\">{row.from}</span>\n              </Table.Cell>\n              <Table.Cell>\n                <span className=\"truncate\">{row.date}</span>\n              </Table.Cell>\n              <Table.Cell className=\"text-right\">\n                <DropdownMenu>\n                  <DropdownMenu.Trigger\n                    render={\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        shape=\"square\"\n                        aria-label=\"更多选项\"\n                      >\n                        <DotsThree weight=\"bold\" size={16} />\n                      </Button>\n                    }\n                  />\n                  <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={Eye}>查看</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={PencilSimple}>\n                      编辑\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Separator />\n                    <DropdownMenu.Item icon={Trash} variant=\"danger\">\n                      删除\n                    </DropdownMenu.Item>\n                  </DropdownMenu.Content>\n                </DropdownMenu>\n              </Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>"],"colors":["bg-lark-base","bg-lark-brand","bg-lark-fill-selected","bg-lark-hairline","bg-lark-table-row-hover","bg-lark-tint","border-lark-line","text-lark-default","text-lark-strong","text-lark-subtle"],"subComponents":{"Header":{"name":"Header","description":"Header sub-component","props":{}},"Head":{"name":"Head","description":"Head sub-component","props":{}},"Row":{"name":"Row","description":"Row sub-component","props":{}},"Body":{"name":"Body","description":"Body sub-component","props":{}},"Cell":{"name":"Cell","description":"Cell sub-component","props":{}},"CheckCell":{"name":"CheckCell","description":"CheckCell sub-component","props":{}},"CheckHead":{"name":"CheckHead","description":"CheckHead sub-component","props":{}},"Footer":{"name":"Footer","description":"Footer sub-component","props":{}},"ResizeHandle":{"name":"ResizeHandle","description":"ResizeHandle sub-component","props":{}}}},"TableOfContents":{"name":"TableOfContents","type":"component","description":"TableOfContents — presentational compound component for section navigation.","importPath":"@lark-ui/core","category":"Other","props":{"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"title":{"type":"string","optional":true}},"examples":["<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.Title>本页内容</TableOfContents.Title>\n        <TableOfContents.List>\n          {headings.map((heading) => (\n            <TableOfContents.Item\n              key={heading.text}\n              active={heading.text === \"用法\"}\n              className=\"cursor-pointer\"\n            >\n              {heading.text}\n            </TableOfContents.Item>\n          ))}\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>","<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.Title>本页内容</TableOfContents.Title>\n        <TableOfContents.List>\n          {headings.map((heading) => (\n            <TableOfContents.Item\n              key={heading.text}\n              active={heading.text === active}\n              onClick={() => setActive(heading.text)}\n              className=\"cursor-pointer\"\n            >\n              {heading.text}\n            </TableOfContents.Item>\n          ))}\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>","<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.Title>本页内容</TableOfContents.Title>\n        <TableOfContents.List>\n          {headings.map((heading) => (\n            <TableOfContents.Item key={heading.text} className=\"cursor-pointer\">\n              {heading.text}\n            </TableOfContents.Item>\n          ))}\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>","<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.Title>本页内容</TableOfContents.Title>\n        <TableOfContents.List>\n          <TableOfContents.Item active className=\"cursor-pointer\">\n            概览\n          </TableOfContents.Item>\n          <TableOfContents.Group label=\"示例\" href=\"#examples-demo\">\n            <TableOfContents.Item className=\"cursor-pointer\">\n              基础示例\n            </TableOfContents.Item>\n            <TableOfContents.Item className=\"cursor-pointer\">\n              高级示例\n            </TableOfContents.Item>\n          </TableOfContents.Group>\n          <TableOfContents.Group label=\"快速开始\">\n            <TableOfContents.Item className=\"cursor-pointer\">\n              安装\n            </TableOfContents.Item>\n            <TableOfContents.Item className=\"cursor-pointer\">\n              配置\n            </TableOfContents.Item>\n          </TableOfContents.Group>\n          <TableOfContents.Group label=\"API\" href=\"#api-demo\">\n            <TableOfContents.Item className=\"cursor-pointer\">\n              属性\n            </TableOfContents.Item>\n            <TableOfContents.Item className=\"cursor-pointer\">\n              事件\n            </TableOfContents.Item>\n          </TableOfContents.Group>\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>","<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.List>\n          {headings.slice(0, 3).map((heading) => (\n            <TableOfContents.Item\n              key={heading.text}\n              active={heading.text === \"简介\"}\n              className=\"cursor-pointer\"\n            >\n              {heading.text}\n            </TableOfContents.Item>\n          ))}\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>","<div className=\"flex w-full max-w-xl gap-6\">\n      <div className=\"min-w-40\">\n        <TableOfContents>\n          <TableOfContents.Title>本页内容</TableOfContents.Title>\n          <TableOfContents.List>\n            {scrollspySections.map((section) => (\n              <TableOfContents.Item\n                key={section.id}\n                render={<button type=\"button\" />}\n                active={activeId === section.id}\n                onClick={() => {\n                  selectSection(section.id);\n                  root\n                    ?.querySelector(`#${section.id}`)\n                    ?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n                }}\n              >\n                {section.title}\n              </TableOfContents.Item>\n            ))}\n          </TableOfContents.List>\n        </TableOfContents>\n      </div>\n      <div\n        ref={setRoot}\n        className=\"h-64 flex-1 overflow-y-auto rounded-lg border border-lark-hairline p-4\"\n      >\n        {scrollspySections.map((section) => (\n          <section key={section.id}>\n            <h4\n              id={section.id}\n              className=\"mb-2 scroll-mt-2 text-sm font-semibold\"\n            >\n              {section.title}\n            </h4>\n            <p className=\"mb-6 text-sm text-lark-subtle\">\n              {Array.from(\n                { length: 6 },\n                () => `用于 ${section.title} 分区的可滚动占位文本。 `,\n              ).join(\"\")}\n            </p>\n          </section>\n        ))}\n        <div className=\"h-40\" />\n      </div>\n    </div>","<DemoWrapper>\n      <div className=\"space-y-3\">\n        <TableOfContents>\n          <TableOfContents.List>\n            {[\"简介\", \"安装\", \"用法\"].map((text) => (\n              <TableOfContents.Item\n                key={text}\n                render={<button type=\"button\" />}\n                onClick={() => setClicked(text)}\n                active={text === \"简介\"}\n              >\n                {text}\n              </TableOfContents.Item>\n            ))}\n          </TableOfContents.List>\n        </TableOfContents>\n        {clicked && (\n          <p className=\"text-xs text-lark-subtle\">已点击：{clicked}</p>\n        )}\n      </div>\n    </DemoWrapper>"],"colors":["border-lark-brand","border-lark-line","text-lark-brand","text-lark-brand-pressed","text-lark-subtle"],"subComponents":{"Title":{"name":"Title","description":"Title sub-component","props":{}},"List":{"name":"List","description":"List sub-component","props":{}},"Item":{"name":"Item","description":"Item sub-component","props":{"active":{"type":"boolean","optional":true,"description":"Whether this item represents the currently active section."},"render":{"type":"React.ReactElement","optional":true,"description":"Custom element to render as the link. Use this to integrate with framework routers (e.g., Next.js `<Link>`, React Router `<NavLink>`). The element receives all anchor props including `href`, `className`, and `children`."}}},"Group":{"name":"Group","description":"Group sub-component","props":{"label":{"type":"string","required":true,"description":"Label displayed above the group's items."},"href":{"type":"string","optional":true,"description":"URL the group label links to. When provided, the label renders as a clickable link with item styling."},"active":{"type":"boolean","optional":true,"description":"Whether this group's label represents the currently active section. Only applies when `href` is provided."}}}}},"Tabs":{"name":"Tabs","type":"component","description":"Tab navigation component with segmented or underline style. Built on Base UI Tabs with animated active indicator.","importPath":"@lark-ui/core","category":"Navigation","props":{"tabs":{"type":"TabsItem[]","optional":true,"description":"Array of tab items to render."},"value":{"type":"string","optional":true,"description":"Controlled value. When set, component becomes controlled."},"selectedValue":{"type":"string","optional":true,"description":"Default selected value for uncontrolled mode. Ignored when `value` is set."},"activateOnFocus":{"type":"boolean","optional":true,"description":"When `true`, tabs are activated immediately upon receiving focus via arrow keys. When `false` (default), tabs receive focus but require Enter/Space to activate."},"className":{"type":"string","optional":true,"description":"Additional CSS classes for the root element."},"listClassName":{"type":"string","optional":true,"description":"Additional CSS classes for the tab list element."},"indicatorClassName":{"type":"string","optional":true,"description":"Additional CSS classes for the indicator element."},"labels":{"type":"TabsLabels","optional":true,"description":"Labels for internationalization of aria-labels. All labels have English defaults."},"variant":{"type":"enum","optional":true,"description":"Tab style.\n- `\"segmented\"` — Pill-shaped indicator on a filled track\n- `\"underline\"` — Underline indicator below tab text","values":["segmented","underline"],"default":"segmented"},"size":{"type":"enum","optional":true,"description":"Tab size.\n- `\"base\"` — Default size (h-8, text-base)\n- `\"sm\"` — Compact size (h-6, text-xs) — matches Input size=\"sm\"","values":["base","sm"],"default":"base"},"onValueChange":{"type":"(value: string) => void","description":"Callback when active tab changes"}},"examples":["<div className=\"flex flex-col items-start gap-6\">\n      <div>\n        <p className=\"mb-2 text-sm text-lark-subtle\">分段（默认）</p>\n        <Tabs\n          variant=\"segmented\"\n          tabs={[\n            { value: \"tab1\", label: \"标签页 1\" },\n            { value: \"tab2\", label: \"标签页 2\" },\n            { value: \"tab3\", label: \"标签页 3\" },\n          ]}\n          selectedValue=\"tab1\"\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm text-lark-subtle\">下划线</p>\n        <Tabs\n          variant=\"underline\"\n          tabs={[\n            { value: \"tab1\", label: \"标签页 1\" },\n            { value: \"tab2\", label: \"标签页 2\" },\n            { value: \"tab3\", label: \"标签页 3\" },\n          ]}\n          selectedValue=\"tab1\"\n        />\n      </div>\n    </div>","<Tabs\n      variant=\"segmented\"\n      tabs={[\n        { value: \"tab1\", label: \"标签页 1\" },\n        { value: \"tab2\", label: \"标签页 2\" },\n        { value: \"tab3\", label: \"标签页 3\" },\n      ]}\n      selectedValue=\"tab1\"\n    />","<Tabs\n      variant=\"underline\"\n      tabs={[\n        { value: \"tab1\", label: \"标签页 1\" },\n        { value: \"tab2\", label: \"标签页 2\" },\n        { value: \"tab3\", label: \"标签页 3\" },\n      ]}\n      selectedValue=\"tab1\"\n    />","<div className=\"space-y-4\">\n      <Tabs\n        tabs={[\n          { value: \"tab1\", label: \"Tab 1\" },\n          { value: \"tab2\", label: \"Tab 2\" },\n          { value: \"tab3\", label: \"Tab 3\" },\n        ]}\n        value={activeTab}\n        onValueChange={setActiveTab}\n      />\n      <p className=\"text-sm text-lark-subtle\">\n        当前标签页：<code className=\"text-sm\">{activeTab}</code>\n      </p>\n    </div>","<div className=\"w-full max-w-md\">\n      <Tabs\n        tabs={[\n          { value: \"overview\", label: \"概览\" },\n          { value: \"analytics\", label: \"分析\" },\n          { value: \"reports\", label: \"报告\" },\n          { value: \"notifications\", label: \"通知\" },\n          { value: \"settings\", label: \"设置\" },\n          { value: \"billing\", label: \"计费\" },\n          { value: \"security\", label: \"安全\" },\n          { value: \"integrations\", label: \"集成\" },\n        ]}\n        selectedValue=\"overview\"\n      />\n    </div>","<div className=\"w-full max-w-xs\">\n      <Tabs\n        tabs={[\n          { value: \"overview\", label: \"概览\" },\n          { value: \"analytics\", label: \"分析\" },\n          { value: \"reports\", label: \"报告\" },\n          { value: \"notifications\", label: \"通知\" },\n          { value: \"settings\", label: \"设置\" },\n          { value: \"billing\", label: \"计费\" },\n          { value: \"security\", label: \"安全\" },\n          { value: \"integrations\", label: \"集成\" },\n        ]}\n        selectedValue=\"overview\"\n      />\n    </div>","<div className=\"space-y-3\">\n      <div className=\"w-full max-w-[588px]\">\n        <Tabs tabs={tabs} selectedValue=\"settings\" />\n      </div>\n      <div className=\"flex items-center gap-3 text-sm text-lark-subtle\">\n        <button\n          type=\"button\"\n          className=\"rounded-md border border-lark-line bg-lark-base px-2.5 py-1 text-lark-default hover:bg-lark-tint focus:ring-2 focus:ring-lark-brand focus:outline-none\"\n          onClick={() => setShowExtraTabs((current) => !current)}\n        >\n          切换额外标签页\n        </button>\n        <span>{showExtraTabs ? \"10 个标签页\" : \"7 个标签页\"}</span>\n      </div>\n    </div>","<div className=\"flex flex-col items-start gap-6\">\n      <div>\n        <p className=\"mb-2 text-sm text-lark-subtle\">分段 sm</p>\n        <Tabs\n          variant=\"segmented\"\n          size=\"sm\"\n          tabs={[\n            { value: \"tab1\", label: \"标签页 1\" },\n            { value: \"tab2\", label: \"标签页 2\" },\n            { value: \"tab3\", label: \"标签页 3\" },\n          ]}\n          selectedValue=\"tab1\"\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm text-lark-subtle\">下划线 sm</p>\n        <Tabs\n          variant=\"underline\"\n          size=\"sm\"\n          tabs={[\n            { value: \"tab1\", label: \"标签页 1\" },\n            { value: \"tab2\", label: \"标签页 2\" },\n            { value: \"tab3\", label: \"标签页 3\" },\n          ]}\n          selectedValue=\"tab1\"\n        />\n      </div>\n    </div>","<Tabs\n      tabs={[\n        {\n          value: \"tab1\",\n          label: \"普通标签页\",\n        },\n        {\n          value: \"tab2\",\n          label: \"链接标签页\",\n          nativeButton: false,\n          render: (props) => <a {...props} href=\"#tab2\" />,\n        },\n        {\n          value: \"tab3\",\n          label: \"Lark\",\n          nativeButton: false,\n          render: (props) => (\n            <a {...props} href=\"https://cloudflare.com\" target=\"_blank\" />\n          ),\n        },\n      ]}\n      selectedValue=\"tab1\"\n    />"],"colors":["bg-lark-base","bg-lark-brand","bg-lark-control","border-lark-line","ring-lark-hairline","ring-lark-line","text-lark-brand","text-lark-default","text-lark-subtle"],"styling":{"container":{"height":32,"borderRadius":8,"background":"color-accent","padding":1},"tab":{"paddingX":10,"verticalMargin":1,"fontSize":14,"fontWeight":500,"borderRadius":8,"activeColor":"text-color-brand","inactiveColor":"text-color-label"},"indicator":{"background":"color-surface-secondary","ring":"color-color-2","borderRadius":6,"shadow":"shadow-lark-xs"},"underline":{"activeColor":"text-color-brand","inactiveColor":"text-color-title","indicatorHeight":2,"indicatorColor":"color-brand","paddingY":8}}},"TagInput":{"name":"TagInput","type":"component","description":"TagInput component","importPath":"@lark-ui/core","category":"Other","props":{"alt":{"type":"string","optional":true},"autoComplete":{"type":"React.HTMLInputAutoCompleteAttribute","optional":true},"checked":{"type":"boolean","optional":true},"height":{"type":"number | string","optional":true},"list":{"type":"string","optional":true},"name":{"type":"string","optional":true,"description":"Submits each accepted tag as a separate form value under this name."},"placeholder":{"type":"string","optional":true},"readOnly":{"type":"boolean","optional":true,"description":"Prevents adding or removing tags while keeping the input focusable."},"required":{"type":"boolean","optional":true,"description":"Requires at least one accepted tag for native form validation. Like a native input, a `readOnly` TagInput is skipped by validation."},"type":{"type":"React.HTMLInputTypeAttribute","optional":true},"width":{"type":"number | string","optional":true},"className":{"type":"string","optional":true},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"title":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true},"value":{"type":"string[]","optional":true},"validateValue":{"type":"object","optional":true},"maxValues":{"type":"number","optional":true},"labels":{"type":"TagInputLabels","optional":true,"description":"Translated labels for generated input, action, and validation text."},"label":{"type":"ReactNode","optional":true},"labelTooltip":{"type":"ReactNode","optional":true},"description":{"type":"ReactNode","optional":true},"error":{"type":"string | object","optional":true},"variant":{"type":"enum","optional":true,"values":["default","error"],"descriptions":{"default":"Default tag input appearance.","error":"Error state for validation failures."},"default":"default"},"disabled":{"type":"boolean","optional":true}},"examples":["<TagInput\n      label=\"收件人\"\n      description=\"粘贴以逗号或换行分隔的电子邮件地址。\"\n      placeholder=\"name@example.com\"\n      autoComplete=\"off\"\n      value={recipients}\n      onValueChange={setRecipients}\n      validateValue={(value) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)}\n    />","<TagInput\n      defaultValue={[\"frontend\", \"priority\"]}\n      label=\"标签\"\n      description=\"接受任意非空值。\"\n      placeholder=\"添加标签\"\n    />","<TagInput\n      defaultValue={[\"alpha\"]}\n      label=\"访问组\"\n      maxValues={3}\n      description=\"最多三个组。\"\n      placeholder=\"输入组名\"\n    />","<form\n      className=\"flex w-full max-w-md flex-col gap-3\"\n      onSubmit={(event) => {\n        event.preventDefault();\n        const data = new FormData(event.currentTarget);\n        setSubmitted(data.getAll(\"topics\").map(String));\n      }}\n    >\n      <TagInput\n        name=\"topics\"\n        required\n        label=\"主题\"\n        description=\"至少添加一个主题，然后提交。\"\n        placeholder=\"添加主题\"\n      />\n      <div className=\"flex items-center gap-3\">\n        <Button type=\"submit\" variant=\"primary\">\n          提交\n        </Button>\n        {submitted ? (\n          <code className=\"text-sm text-lark-subtle\">\n            topics: {JSON.stringify(submitted)}\n          </code>\n        ) : null}\n      </div>\n    </form>","<TagInput\n      readOnly\n      defaultValue={[\"billing\", \"dns\", \"workers\"]}\n      label=\"已分配团队\"\n      description=\"由你所在组织的管理员管理。\"\n    />","<TagInput\n      defaultValue={[\"uno\"]}\n      label=\"Etiquetas\"\n      labels={{\n        input: \"Agregar etiqueta\",\n        removeValue: (value) => `Eliminar ${value}`,\n        invalidValue: (value) => `${value} no es valido.`,\n        maxValuesReached: (maxValues) => `Maximo de ${maxValues} etiquetas.`,\n      }}\n      maxValues={3}\n      placeholder=\"Agregar una etiqueta\"\n    />"],"colors":["bg-lark-control","bg-lark-overlay","ring-lark-border","text-lark-default","text-lark-placeholder","text-lark-subtle"],"styling":{"baseClasses":"flex h-auto min-h-8 flex-wrap items-center gap-x-1 gap-y-0.5 px-[3px] py-1","chipClasses":"h-6 rounded-sm bg-lark-overlay pr-[3px] pl-2 text-sm"}},"Text":{"name":"Text","type":"component","description":"Text component","importPath":"@lark-ui/core","category":"Display","props":{"variant":{"type":"enum","optional":true,"description":"Text style variant. Determines color, font, and weight.\n- `\"heading\"` — Heading text (16px by default, 20px with `size=\"lg\"`; semibold)\n- `\"heading1\"` — Deprecated; use `\"heading\"` (30px, semibold)\n- `\"heading2\"` — Deprecated; use `\"heading\"` (24px, semibold)\n- `\"heading3\"` — Deprecated; use `\"heading\"` (16px, semibold)\n- `\"body\"` — Default body text\n- `\"secondary\"` — Muted text for secondary information\n- `\"success\"` — Success state text\n- `\"error\"` — Error state text\n- `\"mono\"` — Monospace text for code\n- `\"mono-secondary\"` — Muted monospace text","values":["heading","heading1","heading2","heading3","body","secondary","success","error","mono","mono-secondary"],"descriptions":{"heading":"Heading text (16px by default, 20px at large size)","heading1":"Deprecated large heading for page titles; use heading instead","heading2":"Deprecated medium heading for section titles; use heading instead","heading3":"Deprecated small heading for subsections; use heading instead","body":"Default body text","secondary":"Muted text for secondary information","success":"Success state text","error":"Error state text","mono":"Monospace text for code","mono-secondary":"Muted monospace text"},"classes":{"heading":"text-lg font-semibold","heading1":"text-3xl font-semibold","heading2":"text-2xl font-semibold","heading3":"text-lg font-semibold","body":"text-lark-default","secondary":"text-lark-subtle","success":"text-lark-success","error":"text-lark-danger","mono":"font-mono","mono-secondary":"font-mono text-lark-subtle"},"default":"body"},"size":{"type":"enum","optional":true,"description":"Text size. Supported values depend on the variant:\n- `\"heading\"` — 16px when omitted, or 20px with `\"lg\"`\n- Body variants — `\"xs\"` (12px), `\"sm\"` (13px), `\"base\"` (14px),   or `\"lg\"` (16px)\n- Monospace variants — 13px when omitted, or 14px with `\"lg\"`","values":["xs","sm","base","lg"],"descriptions":{"xs":"Extra small text","sm":"Small text","base":"Default text size","lg":"Large text"},"classes":{"xs":"text-xs/[inherit]","sm":"text-sm/[inherit]","base":"text-base/[inherit]","lg":"text-lg/[inherit]"},"default":"base"},"bold":{"type":"boolean","optional":true,"description":"Whether to use bold font weight (only applies to body variants)."},"truncate":{"type":"boolean","optional":true,"description":"Whether to truncate overflowing text with an ellipsis. Adds `truncate min-w-0` classes."},"as":{"type":"enum","optional":true,"description":"The HTML element to render. Accepts headings (`\"h1\"`–`\"h6\"`), block text (`\"p\"`, `\"pre\"`), inline text (`\"span\"`, `\"code\"`, `\"em\"`, `\"strong\"`, `\"small\"`, `\"abbr\"`, `\"time\"`), form-related (`\"label\"`, `\"legend\"`), list/definition (`\"dt\"`, `\"dd\"`, `\"li\"`), and `\"figcaption\"`.\n\n- **Optional** for `\"heading\"` (defaults to `\"span\"`). Pass the heading   element that reflects this text's place in the document outline.\n- **Required** for deprecated heading variants (`\"heading1\"`,   `\"heading2\"`, `\"heading3\"`).\n- **Optional** for body variants (defaults to `\"p\"`) and monospace   variants (defaults to `\"span\"`).","values":["h1","h2","h3","h4","h5","h6","p","span","label","dt","dd","li","figcaption","legend","pre","code","em","strong","small","abbr","time"]},"children":{"type":"ReactNode","optional":true,"description":"Text content."}},"examples":["<div className=\"grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4\">\n        <Text variant=\"heading\">标题</Text>\n        <Text variant=\"mono-secondary\">text-lg (16px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4\">\n        <Text variant=\"heading\" size=\"lg\" as=\"h2\">\n          大号标题\n        </Text>\n        <Text variant=\"mono-secondary\">text-xl (20px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4\">\n        <Text>正文</Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4\">\n        <Text bold>加粗正文</Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4\">\n        <Text size=\"lg\">大号正文</Text>\n        <Text variant=\"mono-secondary\">text-lg (16px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4\">\n        <Text size=\"sm\">小号正文</Text>\n        <Text variant=\"mono-secondary\">text-sm (13px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4\">\n        <Text size=\"xs\">极小正文</Text>\n        <Text variant=\"mono-secondary\">text-xs (12px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4\">\n        <Text variant=\"secondary\">次要正文</Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4\">\n        <Text variant=\"mono\">等宽字体</Text>\n        <Text variant=\"mono-secondary\">text-sm (13px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4\">\n        <Text variant=\"mono\" size=\"lg\">\n          大号等宽字体\n        </Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4\">\n        <Text variant=\"mono-secondary\">次要等宽字体</Text>\n        <Text variant=\"mono-secondary\">text-sm (13px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4\">\n        <Text variant=\"success\">成功</Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4\">\n        <Text variant=\"error\">错误</Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n    </div>","<div className=\"w-64 rounded-lg border border-lark-hairline bg-lark-base p-4\">\n      <Text truncate>这是一段较长的文本，当它超出容器时会被省略号截断。</Text>\n    </div>"],"colors":["text-lark-danger","text-lark-default","text-lark-subtle","text-lark-success"],"styling":{"fontSizes":{"xs":12,"sm":14,"base":16,"lg":18,"xl":20,"2xl":24,"3xl":30},"fontWeights":{"normal":400,"medium":500,"semibold":600},"baseColor":"text-lark-default","variantColors":{"body":"text-lark-default","secondary":"text-lark-subtle","success":"text-lark-success","error":"text-lark-danger","mono":"text-lark-default","mono-secondary":"text-lark-subtle"},"fontFamilies":{"default":"sans-serif","mono":"monospace"}}},"TimeseriesChart":{"name":"TimeseriesChart","type":"component","description":"TimeseriesChart — a time-series line or bar chart.","importPath":"@lark-ui/core","category":"Data Visualization","props":{"echarts":{"type":"typeof echarts","required":true,"description":"The ECharts core instance imported by the consumer. Passed in rather than imported directly so the consumer controls which ECharts modules are bundled (tree-shaking)."},"type":{"type":"\"line\" | \"bar\"","optional":true,"description":"Visual style of each series. Defaults to `\"line\"`."},"data":{"type":"TimeseriesData[]","required":true,"description":"Array of time series data to display on the chart"},"markers":{"type":"TimeseriesMarker[]","optional":true,"description":"Vertical reference markers rendered on the time axis."},"thresholds":{"type":"TimeseriesThreshold[]","optional":true,"description":"Horizontal threshold lines rendered on the value axis."},"xAxisName":{"type":"string","optional":true,"description":"Label for the x-axis (time axis)"},"xAxisTickCount":{"type":"number","optional":true,"description":"Number of ticks to display on the x-axis"},"xAxisHideLabelOverlap":{"type":"boolean","optional":true,"description":"Whether overlapping x-axis labels are automatically hidden. Defaults to `true`."},"xAxisTickFormat":{"type":"(value: number) => string","optional":true,"description":"Custom formatter for x-axis tick labels. Receives the raw timestamp in milliseconds and returns a display string, overriding ECharts' built-in time formatting."},"yAxisTickFormat":{"type":"(value: number) => string","optional":true,"description":"Custom formatter for y-axis tick labels. Receives the raw value and returns a display string. When omitted, ECharts' built-in formatter is used."},"yAxisTickLabelFormat":{"type":"(value: number) => string","optional":true},"yAxisName":{"type":"string","optional":true,"description":"Label for the y-axis (value axis)"},"yAxisTickCount":{"type":"number","optional":true,"description":"Number of ticks to display on the y-axis"},"yAxisMinInterval":{"type":"number","optional":true,"description":"Minimum interval between y-axis ticks. Set to `1` for discrete count data so ECharts does not render fractional tick marks."},"tooltipValueFormat":{"type":"(value: number) => string","optional":true,"description":"Custom formatter for tooltip values. Receives the raw y-value and returns a display string. When omitted, the raw value is shown. Takes precedence over the deprecated `yAxisTickLabelFormat` prop."},"tooltipTimestampFormat":{"type":"(timestamp: number) => string","optional":true,"description":"Custom formatter for tooltip timestamps. Receives the raw timestamp in milliseconds and returns a display string. Applies to standard series and marker tooltips. When omitted, timestamps are formatted using the browser's locale and time zone."},"tooltipFooter":{"type":"string","optional":true,"description":"Footer text rendered below the series rows in the tooltip. Intended for brief context such as data freshness or aggregation details. Available for every `TimeseriesChart` configuration."},"tooltipMode":{"type":"\"all\" | \"single\"","optional":true,"description":"Controls which series are shown in the tooltip. - `\"all\"` — show all series at the hovered timestamp (default) - `\"single\"` — show only the series whose value is closest to the cursor"},"tooltipMaxItems":{"type":"number","optional":true,"description":"Maximum number of series rows shown in the tooltip when `tooltipMode` is `\"all\"`. Additional series are hidden with a `+N more` footer. Defaults to `10`."},"tooltipBoundary":{"type":"\"clipping-ancestors\" | Element | Element[]","optional":true,"description":"Constrains the tooltip to stay within a specific element or region. By default the tooltip avoids overflowing any clipping ancestor (scroll containers, viewports, etc.). Pass an `Element` or array of elements to restrict the tooltip to a specific container."},"tooltipFollowCursor":{"type":"\"both\" | \"x\"","optional":true,"description":"Which axis the tooltip follows the cursor on. - `\"both\"` — tooltip tracks the cursor on both axes, staying near the pointer at all times. This is the default and matches the behaviour of ECharts' built-in tooltip. - `\"x\"` — tooltip follows the cursor horizontally but is locked to a fixed vertical position relative to the chart. This keeps the tooltip out of the way of the data and avoids vertical jitter as series values change — the same approach used by Recharts and many dashboard UIs. Only these two modes are offered because the x-axis is always time in a `TimeseriesChart`: y-only tracking and fully-fixed positioning don't produce useful tooltip behaviour for time-series data. Powered by Base UI Tooltip's `trackCursorAxis` under the hood."},"incomplete":{"type":"{ before?: number; after?: number }","optional":true,"description":"Indicates incomplete data periods with optional before/after timestamps in ms"},"enableLegendSelection":{"type":"boolean","optional":true,"description":"When `true`, adds a hidden ECharts legend so consumers can drive series visibility imperatively via the `legendSelect` / `legendUnSelect` / `legendToggleSelect` actions (e.g. to build a custom interactive legend). Toggled-off series are also excluded from the tooltip. Requires the consumer to register ECharts' `LegendComponent` (`echarts.use([LegendComponent])`); otherwise the legend actions no-op and, in development, ECharts logs a \"component legend is used but not imported\" warning."},"height":{"type":"number","optional":true,"description":"Height of the chart in pixels. Defaults to `350`."},"isDarkMode":{"type":"boolean","optional":true,"description":"When `true`, switches the chart to ECharts' built-in dark theme"},"gradient":{"type":"boolean","optional":true,"description":"When `true`, renders a vertical gradient fill beneath each line series. The gradient fades from the series' color at the top to transparent at the bottom. Has no effect when `type` is `\"bar\"`."},"loading":{"type":"boolean","optional":true,"description":"When `true`, hides the chart and displays a skeleton matching the chart type with a subtle shimmer."},"ariaDescription":{"type":"string","optional":true,"description":"Accessible description for screen readers. When provided, it is passed to ECharts' `aria.label.description` and announced when the chart receives focus. Consumers are responsible for writing a meaningful description — see the W3C guidance on complex images for recommendations."},"optionUpdateBehavior":{"type":"SetOptionOpts","optional":true,"description":"Additional options passed as the second argument to `chart.setOption()`. Defaults to `{ notMerge: false, lazyUpdate: true }`."}},"examples":["<Chart\n      echarts={echarts}\n      options={options}\n      height={400}\n      isDarkMode={isDarkMode}\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"数量\"\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"请求数\"\n      yAxisMinInterval={1}\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      markers={markers}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"数量\"\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      thresholds={[\n        {\n          value: 55,\n          label: \"内存上限\",\n          color: ChartPalette.semantic(\"Attention\", isDarkMode),\n        },\n      ]}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"内存（MB）\"\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"请求数\"\n      xAxisTickFormat={(timestamp) =>\n        new Intl.DateTimeFormat(undefined, {\n          timeZone: \"UTC\",\n          hour: \"2-digit\",\n          minute: \"2-digit\",\n        }).format(timestamp)\n      }\n      yAxisTickFormat={(value) => {\n        if (value >= 1000) return `${value / 1000}k`;\n        return value.toString();\n      }}\n      tooltipValueFormat={(value) => `${(value / 1000).toFixed(1)}k 次请求`}\n      tooltipTimestampFormat={(timestamp) =>\n        new Intl.DateTimeFormat(undefined, {\n          timeZone: \"UTC\",\n          dateStyle: \"medium\",\n          timeStyle: \"medium\",\n        }).format(timestamp)\n      }\n    />","<TimeseriesChart\n      yAxisTickCount={2}\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      height={160}\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"数量\"\n      gradient\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"Mbps\"\n      incomplete={{ after: incompleteTimestamp }}\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"%\"\n      onTimeRangeChange={(from, to) => {\n        alert(\n          `已选时间范围：\\n起始：${new Date(from).toLocaleString()}\\n结束：${new Date(to).toLocaleString()}`,\n        );\n      }}\n    />","<Chart\n      echarts={echarts}\n      options={options}\n      height={160}\n      isDarkMode={isDarkMode}\n    />","<div className=\"space-y-4\">\n      <h3 className=\"text-sm font-medium\">激活状态</h3>\n\n      <div className=\"flex flex-wrap gap-4 divide-x divide-lark-hairline\">\n        <ChartLegend.LargeItem\n          name=\"请求数\"\n          color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n          value=\"1,234\"\n          unit=\"次/秒\"\n        />\n        <ChartLegend.LargeItem\n          name=\"存储\"\n          color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n          value=\"56\"\n          unit=\"GB\"\n        />\n        <ChartLegend.LargeItem\n          name=\"警告数\"\n          color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n          value=\"128\"\n        />\n      </div>\n\n      <h3 className=\"mt-12 text-sm font-medium\">未激活状态</h3>\n\n      <div className=\"flex flex-wrap gap-4 divide-x divide-lark-hairline\">\n        <ChartLegend.LargeItem\n          name=\"请求数\"\n          color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n          value=\"1,234\"\n          unit=\"次/秒\"\n          inactive\n        />\n        <ChartLegend.LargeItem\n          name=\"存储\"\n          color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n          value=\"56\"\n          unit=\"GB\"\n          inactive\n        />\n        <ChartLegend.LargeItem\n          name=\"警告数\"\n          color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n          value=\"128\"\n          inactive\n        />\n      </div>\n\n      <h3 className=\"mt-12 text-sm font-medium\">加载状态</h3>\n\n      <div className=\"flex flex-wrap gap-4 divide-x divide-lark-hairline\">\n        <ChartLegend.LargeItem loading />\n      </div>\n    </div>","<div className=\"space-y-4\">\n      <h3 className=\"text-sm font-medium\">激活状态</h3>\n      <div className=\"flex flex-wrap gap-4\">\n        <ChartLegend.SmallItem\n          name=\"请求数\"\n          color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n          value=\"1,234\"\n          unit=\"次/秒\"\n        />\n        <ChartLegend.SmallItem\n          name=\"存储\"\n          color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n          value=\"56\"\n          unit=\"GB\"\n        />\n        <ChartLegend.SmallItem\n          name=\"警告数\"\n          color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n          value=\"128\"\n        />\n      </div>\n\n      <h3 className=\"mt-12 text-sm font-medium\">未激活状态</h3>\n      <div className=\"flex flex-wrap gap-4\">\n        <ChartLegend.SmallItem\n          name=\"请求数\"\n          color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n          value=\"1,234\"\n          unit=\"次/秒\"\n          inactive\n        />\n        <ChartLegend.SmallItem\n          name=\"存储\"\n          color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n          value=\"56\"\n          unit=\"GB\"\n          inactive\n        />\n        <ChartLegend.SmallItem\n          name=\"警告数\"\n          color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n          value=\"128\"\n          inactive\n        />\n      </div>\n\n      <h3 className=\"mt-12 text-sm font-medium\">加载状态</h3>\n\n      <div className=\"flex flex-wrap gap-4\">\n        <ChartLegend.SmallItem loading />\n      </div>\n    </div>","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      type=\"bar\"\n      data={data}\n      xAxisName=\"时间（UTC）\"\n      yAxisName=\"数量\"\n      tooltipValueFormat={(r) => r.toFixed(2)}\n    />","<div className=\"flex w-full flex-1 flex-col\">\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        xAxisName=\"时间（UTC）\"\n        yAxisName=\"数量\"\n        data={[]}\n        loading\n      />\n    </div>","<div className=\"flex w-full flex-1 flex-col\">\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        type=\"bar\"\n        xAxisName=\"时间（UTC）\"\n        yAxisName=\"数量\"\n        data={[]}\n        loading\n      />\n    </div>","<div className=\"flex w-full flex-1 flex-col gap-3\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex flex-wrap gap-4\">\n          {data.map((series) => (\n            <ChartLegend.SmallItem\n              loading={loading}\n              key={series.name}\n              name={series.name}\n              color={series.color}\n              value={Math.round(series.data.at(-1)?.[1] ?? 0).toLocaleString()}\n            />\n          ))}\n        </div>\n        <Switch label=\"加载中\" checked={loading} onCheckedChange={setLoading} />\n      </div>\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        xAxisName=\"时间（UTC）\"\n        yAxisName=\"数量\"\n        data={loading ? [] : data}\n        loading={loading}\n      />\n    </div>","<LayerCard>\n      <LayerCard.Secondary>读取延迟</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <div className=\"mb-2 flex gap-4 divide-x divide-lark-hairline px-2\">\n          <ChartLegend.LargeItem\n            name=\"P99\"\n            color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n            value=\"124\"\n            unit=\"ms\"\n          />\n          <ChartLegend.LargeItem\n            name=\"P95\"\n            color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n            value=\"76\"\n            unit=\"ms\"\n          />\n          <ChartLegend.LargeItem\n            name=\"P75\"\n            color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n            value=\"32\"\n            unit=\"ms\"\n          />\n          <ChartLegend.LargeItem\n            name=\"P50\"\n            color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n            value=\"10\"\n            unit=\"ms\"\n          />\n        </div>\n        <TimeseriesChart\n          xAxisName=\"时间（UTC）\"\n          echarts={echarts}\n          isDarkMode={isDarkMode}\n          data={data}\n          height={300}\n          tooltipFooter=\"百分位数采用 5 分钟滚动窗口计算。\"\n        />\n      </LayerCard.Primary>\n    </LayerCard>","<LayerCard>\n      <LayerCard.Secondary>读取延迟</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <div className=\"mb-2 flex divide-x divide-lark-line px-2\">\n          {series.map((s) => (\n            <ChartLegend.LargeItem\n              key={s.name}\n              name={s.name}\n              color={s.color}\n              value={s.value}\n              unit={s.unit}\n              inactive={hoveredSeries !== null && hoveredSeries !== s.name}\n              onPointerEnter={() => {\n                setHoveredSeries(s.name);\n                chartRef.current?.dispatchAction({\n                  type: \"highlight\",\n                  seriesName: s.name,\n                });\n              }}\n              onPointerLeave={() => {\n                setHoveredSeries(null);\n                chartRef.current?.dispatchAction({\n                  type: \"downplay\",\n                  seriesName: s.name,\n                });\n              }}\n              className=\"not-first:pl-4\"\n            />\n          ))}\n        </div>\n        <TimeseriesChart\n          ref={chartRef}\n          xAxisName=\"时间（UTC）\"\n          echarts={echarts}\n          isDarkMode={isDarkMode}\n          data={data}\n          height={300}\n        />\n      </LayerCard.Primary>\n    </LayerCard>","<LayerCard>\n      <LayerCard.Secondary>读取延迟</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <div className=\"mb-2 flex divide-x divide-lark-line px-2\">\n          {series.map((s) => (\n            <ChartLegend.LargeItem\n              key={s.name}\n              name={s.name}\n              color={s.color}\n              value={s.value}\n              unit={s.unit}\n              inactive={hiddenSeries[s.name] ?? false}\n              onClick={() => handleClick(s.name)}\n              className=\"not-first:pl-4\"\n            />\n          ))}\n        </div>\n        <TimeseriesChart\n          ref={chartRef}\n          xAxisName=\"时间（UTC）\"\n          echarts={echarts}\n          isDarkMode={isDarkMode}\n          data={data}\n          height={300}\n          enableLegendSelection\n        />\n      </LayerCard.Primary>\n    </LayerCard>","<Chart\n      echarts={echarts}\n      options={options}\n      height={400}\n      isDarkMode={isDarkMode}\n    />","<div className=\"flex w-full flex-col gap-4\">\n      <Select\n        label=\"工具提示跟随光标\"\n        value={selected}\n        onValueChange={(v) => {\n          if (v) setSelected(v);\n        }}\n        renderValue={(v) => v.label}\n      >\n        {FOLLOW_CURSOR_OPTIONS.map((opt) => (\n          <Select.Option key={opt.value} value={opt}>\n            {opt.label}\n          </Select.Option>\n        ))}\n      </Select>\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        data={data}\n        xAxisName=\"时间（UTC）\"\n        yAxisName=\"延迟（ms）\"\n        tooltipFollowCursor={selected.value}\n      />\n    </div>","<div\n      ref={boundaryRef}\n      className=\"w-full overflow-auto rounded-lg border border-lark-line\"\n      style={{ height: 300 }}\n    >\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        data={data}\n        xAxisName=\"时间（UTC）\"\n        yAxisName=\"数量\"\n        height={280}\n        tooltipBoundary={boundary ?? undefined}\n      />\n    </div>"],"colors":["bg-lark-base","ring-lark-line"]},"Toasty":{"name":"Toasty","type":"component","description":"Toasty — toast notification provider and viewport.","importPath":"@lark-ui/core","category":"Feedback","props":{"variant":{"type":"enum","values":["default","success","error","warning","info"],"default":"default","descriptions":{"default":"Default toast style","success":"Success toast for confirmations and positive outcomes","error":"Error toast for critical issues","warning":"Warning toast for cautionary messages","info":"Info toast for neutral informational messages"},"classes":{"success":"[&_[data-toast-icon]]:text-lark-success","error":"[&_[data-toast-icon]]:text-lark-danger","warning":"[&_[data-toast-icon]]:text-lark-warning","info":"[&_[data-toast-icon]]:text-lark-info"}},"children":{"type":"React.ReactNode","required":true,"description":"Application content. Toasts render via a portal above this."},"container":{"type":"PortalContainer","optional":true,"description":"Container element for the portal. Use this to render toasts inside a Shadow DOM or custom container. Overrides `LarkPortalProvider` context."},"toastManager":{"type":"ReturnType<typeof createLarkToastManager>","optional":true,"description":"Optional toast manager created by `createLarkToastManager()`. When provided, allows code outside the React tree (timers, module-load callbacks, query-cache listeners) to dispatch toasts via the same dedupe-aware manager that `useLarkToastManager()` returns inside the tree. Forwarded to the underlying `@base-ui/react/toast` `Toast.Provider` `toastManager` prop — see https://base-ui.com/react/components/toast for the upstream primitive."}},"examples":["<Toasty>\n      <ToastTriggerButton />\n    </Toasty>","<Toasty>\n      <ToastFunctionalUpdateButton />\n    </Toasty>","<Toasty>\n      <ToastTitleOnlyButton />\n    </Toasty>","<Toasty>\n      <ToastDescriptionOnlyButton />\n    </Toasty>","<Toasty>\n      <ToastSuccessButton />\n    </Toasty>","<Toasty>\n      <ToastMultipleButton />\n    </Toasty>","<Toasty>\n      <ToastDeduplicatedButton />\n    </Toasty>","<Toasty>\n      <ToastErrorButton />\n    </Toasty>","<Toasty>\n      <ToastWarningButton />\n    </Toasty>","<Toasty>\n      <ToastInfoButton />\n    </Toasty>","<Toasty>\n      <ToastCustomContentButton />\n    </Toasty>","<Toasty>\n      <ToastActionsButton />\n    </Toasty>","<Toasty>\n      <ToastPromiseButton />\n    </Toasty>"],"colors":["bg-lark-elevated","bg-lark-notice-danger","bg-lark-notice-info","bg-lark-notice-success","bg-lark-notice-warning","ring-lark-line","text-lark-danger","text-lark-default","text-lark-info","text-lark-subtle","text-lark-success","text-lark-warning"],"styling":{"container":{"width":420,"padding":24,"borderRadius":8,"background":"bg-lark-elevated","border":"ring ring-lark-line","shadow":"shadow-lark-notification","gap":8},"title":{"fontSize":14,"fontWeight":500,"color":"text-lark-default"},"description":{"fontSize":14,"fontWeight":400,"color":"text-lark-subtle"},"closeButton":{"size":20,"iconSize":16,"iconName":"ph-x","iconColor":"text-lark-subtle","hoverBackground":"color-color-2","hoverColor":"text-color-label","borderRadius":4}}},"Toolbar":{"name":"Toolbar","type":"component","description":"Toolbar component","importPath":"@lark-ui/core","category":"Other","props":{"disabled":{"type":"boolean","optional":true},"orientation":{"type":"ToolbarRoot.Orientation","optional":true,"description":"The orientation of the toolbar."},"loopFocus":{"type":"boolean","optional":true,"description":"If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached."},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"title":{"type":"string","optional":true},"className":{"type":"string | object","optional":true,"description":"CSS class applied to the element, or a function that returns a class based on the component's state."},"render":{"type":"ReactNode","optional":true,"description":"Allows you to replace the component's HTML element with a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},"children":{"type":"ReactNode","optional":true,"description":"Toolbar controls rendered as one grouped card."},"size":{"type":"enum","optional":true,"description":"Locks every toolbar item to this size.","values":["xs","sm","base","lg"],"descriptions":{"xs":"Extra small toolbar for compact UIs","sm":"Small toolbar for secondary controls","base":"Default toolbar size","lg":"Large toolbar for prominent controls"},"classes":{"xs":"text-xs","sm":"text-xs","base":"text-base","lg":"text-base"},"default":"base"}},"examples":["<Toolbar className=\"w-full max-w-md\">\n      <Toolbar.InputGroup aria-label=\"搜索 DNS 记录\" className=\"flex-1\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"搜索 DNS 记录\" />\n      </Toolbar.InputGroup>\n      <Toolbar.Button icon={FunnelSimpleIcon} aria-label=\"筛选\" />\n      <Toolbar.Button icon={GearSixIcon} aria-label=\"设置\" />\n    </Toolbar>","<div className=\"grid gap-3\">\n      {([\"xs\", \"sm\", \"base\", \"lg\"] as const).map((size) => (\n        <div key={size} className=\"flex items-center gap-3\">\n          <span className=\"w-10 text-sm text-lark-subtle\">{size}</span>\n          <Toolbar size={size} className=\"w-fit\">\n            <Toolbar.Input aria-label={`${size} 搜索`} placeholder=\"搜索……\" />\n            <Toolbar.Button>应用</Toolbar.Button>\n          </Toolbar>\n        </div>\n      ))}\n    </div>","<Toolbar className=\"w-full max-w-md\">\n      <Toolbar.Input\n        aria-label=\"搜索 DNS 记录\"\n        placeholder=\"搜索 DNS 记录\"\n        className=\"flex-1\"\n      />\n      <Toolbar.Button icon={FunnelSimpleIcon} aria-label=\"筛选\" />\n      <Toolbar.Button icon={GearSixIcon} aria-label=\"设置\" />\n    </Toolbar>","<Toolbar className=\"w-full max-w-lg\">\n      <Toolbar.InputGroup aria-label=\"Worker 子域名\" className=\"flex-1\">\n        <InputGroup.Input placeholder=\"my-worker\" />\n        <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>\n      </Toolbar.InputGroup>\n      <Toolbar.Button>访问</Toolbar.Button>\n    </Toolbar>","<Toolbar>\n      <Toolbar.Button icon={UploadSimpleIcon}>上传</Toolbar.Button>\n      <Toolbar.Button icon={DownloadSimpleIcon}>下载</Toolbar.Button>\n    </Toolbar>","<Toolbar>\n      <Toolbar.Link href=\"/components/button\" icon={BookOpenIcon}>\n        按钮文档\n      </Toolbar.Link>\n      <Toolbar.Button icon={DownloadSimpleIcon}>下载</Toolbar.Button>\n    </Toolbar>","<Toolbar className=\"w-full max-w-lg\">\n      <Toolbar.Input\n        aria-label=\"搜索记录\"\n        className=\"flex-1\"\n        placeholder=\"搜索\"\n      />\n      <Toolbar.Button icon={MagnifyingGlassIcon} aria-label=\"搜索\" />\n    </Toolbar>","<Toolbar>\n      <Toolbar.Button icon={FunnelSimpleIcon}>筛选</Toolbar.Button>\n      <Select\n        aria-label=\"排序记录\"\n        defaultValue=\"name\"\n        items={{ name: \"名称\", created: \"创建日期\", status: \"状态\" }}\n        render={<Toolbar.Button />}\n      />\n      <Toolbar.Button icon={GearSixIcon} aria-label=\"查看设置\" />\n    </Toolbar>","<Toolbar className=\"w-full max-w-md\">\n      <Toolbar.Button icon={FunnelSimpleIcon}>状态</Toolbar.Button>\n      <Combobox items={toolbarComboboxItems}>\n        <Combobox.TriggerInput\n          aria-label=\"筛选状态\"\n          className=\"flex-1\"\n          placeholder=\"筛选状态……\"\n          render={<Toolbar.Input />}\n        />\n        <Combobox.Content>\n          <Combobox.List>\n            {(item: string) => (\n              <Combobox.Item key={item} value={item}>\n                {item}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n          <Combobox.Empty>没有匹配的状态。</Combobox.Empty>\n        </Combobox.Content>\n      </Combobox>\n    </Toolbar>"],"colors":["bg-lark-control","border-lark-line","ring-lark-brand","ring-lark-line"],"subComponents":{"Button":{"name":"Button","description":"Button sub-component","props":{}},"Link":{"name":"Link","description":"Link sub-component","props":{}},"Input":{"name":"Input","description":"Input sub-component","props":{}},"InputGroup":{"name":"InputGroup","description":"InputGroup sub-component","props":{}}}},"Tooltip":{"name":"Tooltip","type":"component","description":"Accessible popup that shows additional information on hover/focus. Wrap your app or section with `<TooltipProvider>` to enable delay grouping.","importPath":"@lark-ui/core","category":"Overlay","props":{"side":{"type":"enum","values":["top","bottom","left","right"],"default":"top","descriptions":{"top":"Tooltip appears above the trigger","bottom":"Tooltip appears below the trigger","left":"Tooltip appears to the left of the trigger","right":"Tooltip appears to the right of the trigger"}},"className":{"type":"string","description":"Additional CSS classes"},"children":{"type":"ReactNode","description":"Child elements"},"content":{"type":"ReactNode","required":true,"description":"Content to display in the tooltip"}},"examples":["<TooltipProvider>\n      <Tooltip\n        content=\"添加新条目\"\n        render={\n          <Button shape=\"square\" icon={PlusIcon} aria-label=\"添加新条目\" />\n        }\n      />\n    </TooltipProvider>","<TooltipProvider>\n      <Tooltip\n        content=\"添加\"\n        render={<Button shape=\"square\" icon={PlusIcon} aria-label=\"添加\" />}\n      />\n    </TooltipProvider>","<TooltipProvider>\n      <div className=\"flex gap-2\">\n        <Tooltip\n          content=\"添加\"\n          render={<Button shape=\"square\" icon={PlusIcon} aria-label=\"添加\" />}\n        />\n        <Tooltip\n          content=\"更改语言\"\n          render={\n            <Button shape=\"square\" icon={TranslateIcon} aria-label=\"更改语言\" />\n          }\n        />\n      </div>\n    </TooltipProvider>","<TooltipProvider>\n      <Tooltip\n        content=\"点击了解更多\"\n        className=\"inline-flex items-center gap-1.5 rounded-full bg-lark-brand px-3 py-1.5 text-sm font-medium text-white shadow-md transition-transform hover:scale-105 active:scale-95\"\n      >\n        <Info className=\"size-4\" />\n        <span>帮助</span>\n      </Tooltip>\n    </TooltipProvider>","<TooltipProvider>\n      <div className=\"flex w-full justify-between\">\n        <Tooltip\n          content={longContent}\n          side=\"bottom\"\n          render={<Button variant=\"secondary\" />}\n        >\n          靠近左边缘\n        </Tooltip>\n        <Tooltip\n          content={longContent}\n          side=\"bottom\"\n          render={<Button variant=\"secondary\" />}\n        >\n          居中\n        </Tooltip>\n        <Tooltip\n          content={longContent}\n          side=\"bottom\"\n          render={<Button variant=\"secondary\" />}\n        >\n          靠近右边缘\n        </Tooltip>\n      </div>\n    </TooltipProvider>","<TooltipProvider>\n      <div className=\"flex gap-4\">\n        <Tooltip\n          content=\"1 秒后打开\"\n          delay={1000}\n          render={<Button variant=\"secondary\" />}\n        >\n          1 秒打开延迟\n        </Tooltip>\n        <Tooltip\n          content=\"离开后保持打开 500 毫秒\"\n          closeDelay={500}\n          render={<Button variant=\"secondary\" />}\n        >\n          500 毫秒关闭延迟\n        </Tooltip>\n        <Tooltip\n          content=\"立即打开，保持 1 秒\"\n          delay={0}\n          closeDelay={1000}\n          render={<Button variant=\"secondary\" />}\n        >\n          立即打开 + 1 秒后关闭\n        </Tooltip>\n      </div>\n    </TooltipProvider>"],"colors":["bg-lark-contrast","fill-lark-contrast","text-lark-inverse"],"subComponents":{"Provider":{"name":"Provider","description":"Groups multiple tooltips so that after the first tooltip is shown, switching to another skips the open delay. Place once at your app root or layout.","props":{"delay":{"type":"number","description":"How long to wait (ms) before opening a tooltip once the pointer enters the trigger.","default":"600"},"closeDelay":{"type":"number","description":"How long to wait (ms) before closing a tooltip.","default":"0"},"timeout":{"type":"number","description":"Grace period (ms) during which a just-closed tooltip's delay is skipped when another tooltip opens.","default":"400"}},"isPassThrough":true,"baseComponent":"TooltipBase.Provider","usageExamples":["<TooltipProvider>\n  <App />\n</TooltipProvider>"]}}},"InputArea":{"name":"InputArea","type":"component","description":"Multi-line textarea input with Input variants and InputArea-specific dimensions","importPath":"@lark-ui/core (synthetic - uses Input component)","category":"Input","props":{"size":{"type":"enum","optional":true,"description":"Input size.\n- `\"xs\"` — Extra small for compact UIs\n- `\"sm\"` — Small for secondary fields\n- `\"base\"` — Default size\n- `\"lg\"` — Large for prominent fields","values":["xs","sm","base","lg"],"descriptions":{"xs":"Extra small for compact UIs","sm":"Small for secondary fields","base":"Default size","lg":"Large for prominent fields"},"default":"base"},"variant":{"type":"enum","optional":true,"description":"Visual variant of the textarea.","values":["default","error"],"default":"default"},"label":{"type":"ReactNode","optional":true,"description":"Label content for the textarea (enables Field wrapper) — can be a string or any React node."},"labelTooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content to display next to the label via an info icon."},"description":{"type":"ReactNode","optional":true,"description":"Helper text displayed below the textarea."},"error":{"type":"string | { message: ReactNode; match: FieldErrorMatch }","optional":true,"description":"Error message or validation error object."},"autoResize":{"type":"boolean","optional":true,"description":"Automatically resize the textarea based on its content.","default":"false"},"minRows":{"type":"number","optional":true,"description":"Minimum number of rows to display when `autoResize` is enabled.","default":"1"},"maxRows":{"type":"number","optional":true,"description":"Maximum number of rows to grow to when `autoResize` is enabled; content beyond this scrolls."},"onValueChange":{"type":"(value: string) => void","optional":true,"description":"Callback fired with the new string value on every change."}},"styling":{"sizeVariants":{"xs":{"minHeight":60,"width":200},"sm":{"minHeight":72,"width":240},"base":{"minHeight":88,"width":320},"lg":{"minHeight":100,"width":360}}},"examples":[],"colors":[]}},"blocks":{"DeleteResource":{"name":"DeleteResource","type":"block","description":"DeleteResource component","importPath":"@lark-ui/core","category":"Other","props":{"size":{"type":"enum","optional":true,"values":["sm","base"],"descriptions":{"sm":"Small dialog for simple delete confirmations","base":"Default delete confirmation dialog size"},"default":"base"},"open":{"type":"boolean","required":true,"description":"Whether the dialog is open"},"resourceType":{"type":"string","required":true,"description":"The type of resource being deleted (e.g., \"Zone\", \"Worker\", \"KV Namespace\")"},"resourceName":{"type":"string","required":true,"description":"The name of the specific resource being deleted"},"isDeleting":{"type":"boolean","optional":true,"description":"Whether the delete action is in progress"},"caseSensitive":{"type":"boolean","optional":true,"description":"Whether the confirmation input should be case-sensitive (default: true)"},"deleteButtonText":{"type":"string","optional":true,"description":"Custom delete button text (defaults to \"Delete {resourceType}\")"},"className":{"type":"string","optional":true,"description":"Additional className for the dialog"},"errorMessage":{"type":"string","optional":true,"description":"Error message to display if the delete action fails"}},"examples":["<>\n      <Button variant=\"destructive\" onClick={() => setOpen(true)}>\n        删除 Zone\n      </Button>\n      <DeleteResource\n        open={open}\n        onOpenChange={setOpen}\n        resourceType=\"Zone\"\n        resourceName=\"example.com\"\n        onDelete={handleDelete}\n        isDeleting={isDeleting}\n      />\n    </>","<>\n      <Button variant=\"destructive\" onClick={() => setOpen(true)}>\n        删除 Worker\n      </Button>\n      <DeleteResource\n        open={open}\n        onOpenChange={setOpen}\n        resourceType=\"Worker\"\n        resourceName=\"api-gateway-worker\"\n        onDelete={handleDelete}\n        isDeleting={isDeleting}\n      />\n    </>","<>\n      <Button variant=\"destructive\" onClick={() => setOpen(true)}>\n        删除 Zone\n      </Button>\n      <DeleteResource\n        open={open}\n        onOpenChange={setOpen}\n        resourceType=\"Zone\"\n        resourceName=\"example.com\"\n        onDelete={handleDelete}\n        isDeleting={isDeleting}\n        errorMessage={errorMsg}\n      />\n    </>"],"colors":["bg-lark-fill","bg-lark-tint","border-lark-line","text-lark-default","text-lark-subtle"],"files":["delete-resource/delete-resource.tsx","delete-resource/delete-resource.test.tsx"],"dependencies":["Banner","Button","Dialog","DialogClose","DialogRoot","DialogTitle","Input"]},"PageHeader":{"name":"PageHeader","type":"block","description":"PageHeader component","importPath":"@lark-ui/core","category":"Layout","props":{"spacing":{"type":"enum","optional":true,"values":["compact","base","relaxed"],"descriptions":{"compact":"Compact spacing between header elements","base":"Default spacing between header elements","relaxed":"Relaxed spacing for more prominent headers"},"classes":{"compact":"gap-1","base":"gap-2","relaxed":"gap-4"},"default":"base"},"breadcrumbs":{"type":"ReactNode","optional":true},"title":{"type":"string","optional":true},"description":{"type":"string","optional":true},"tabs":{"type":"TabsItem[]","optional":true},"defaultTab":{"type":"string","optional":true},"className":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true}},"examples":["<PageHeader\n      className=\"w-full\"\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link icon={<HouseIcon size={16} />} href=\"#\">\n            Workers 与 Pages\n          </Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>cloudflare-dev-platform</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n      tabs={[\n        { label: \"概览\", value: \"overview\" },\n        { label: \"指标\", value: \"metrics\" },\n        { label: \"部署\", value: \"deployments\" },\n        { label: \"绑定\", value: \"bindings\" },\n        { label: \"可观测性\", value: \"observability\" },\n        { label: \"设置\", value: \"settings\" },\n      ]}\n      defaultTab=\"overview\"\n      onValueChange={(v) => console.log(v)}\n    >\n      <Button icon={<CodeIcon />} className=\"h-8\">\n        编辑代码\n      </Button>\n      <Button icon={<GlobeIcon />} variant=\"primary\" className=\"h-8\">\n        访问\n      </Button>\n    </PageHeader>","<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">首页</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>仪表板</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n    />","<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link icon={<HouseIcon size={16} />} href=\"#\">\n            首页\n          </Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current icon={<GearIcon size={16} />}>\n            设置\n          </Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n    />","<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">首页</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>设置</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n      tabs={[\n        { label: \"常规\", value: \"general\" },\n        { label: \"安全\", value: \"security\" },\n        { label: \"通知\", value: \"notifications\" },\n      ]}\n      defaultTab=\"general\"\n    />","<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">首页</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Link href=\"#\">项目</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>我的项目</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n      tabs={[\n        { label: \"概览\", value: \"overview\" },\n        { label: \"设置\", value: \"settings\" },\n      ]}\n      defaultTab=\"overview\"\n    >\n      <Button variant=\"primary\" size=\"base\">\n        部署\n      </Button>\n    </PageHeader>","<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">首页</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Link href=\"#\">产品</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>页面标题</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n      title=\"页面标题\"\n    />","<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">首页</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Link href=\"#\">产品</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>页面标题</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n      title=\"页面标题\"\n      description=\"以行动为导向、强调价值的描述，说明本页面的用途。可选的第二句用于补充使用场景或前置条件。\"\n    />","<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">首页</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Link href=\"#\">产品</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>页面标题</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n      title=\"页面标题\"\n      description=\"以行动为导向、强调价值的描述，说明本页面的用途。\"\n      tabs={[\n        { label: \"概览\", value: \"overview\" },\n        { label: \"分析\", value: \"analytics\" },\n        { label: \"设置\", value: \"settings\" },\n      ]}\n      defaultTab=\"overview\"\n    >\n      <Button variant=\"outline\" size=\"sm\">\n        导出\n      </Button>\n      <Button variant=\"primary\" size=\"sm\" icon={<PlusIcon size={16} />}>\n        新建项\n      </Button>\n    </PageHeader>"],"colors":["border-lark-line","text-lark-default","text-lark-subtle"],"files":["page-header/page-header.tsx"],"dependencies":["Tabs"]},"ResourceListPage":{"name":"ResourceListPage","type":"block","description":"ResourceListPage - A layout component for resource list pages","importPath":"@lark-ui/core","category":"Layout","props":{"title":{"type":"string","optional":true},"description":{"type":"string","optional":true},"icon":{"type":"ReactNode","optional":true},"usage":{"type":"ReactNode","optional":true},"additionalContent":{"type":"ReactNode","optional":true},"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true}},"examples":["<ResourceListPage\n      title=\"数据库\"\n      description=\"管理你的数据库实例和配置\"\n      icon={<DatabaseIcon size={32} className=\"text-lark-subtle\" />}\n    >\n      <Surface className=\"p-6\">\n        <p>主要内容区域 —— 资源列表将显示在这里</p>\n      </Surface>\n    </ResourceListPage>","<ResourceListPage\n      title=\"API 密钥\"\n      description=\"为你的应用创建和管理 API 密钥\"\n      usage={\n        <Surface className=\"p-4\">\n          <h3 className=\"mb-2 font-semibold\">快速开始</h3>\n          <p className=\"mb-3 text-sm text-lark-subtle\">\n            生成 API 密钥来认证你的请求\n          </p>\n          <Code\n            className=\"overflow-x-auto\"\n            lang=\"bash\"\n            code='curl -H \"Authorization: Bearer YOUR_API_KEY\" https://api.example.com'\n          />\n        </Surface>\n      }\n    >\n      <Surface className=\"p-6\">\n        <p>API 密钥列表将显示在这里</p>\n      </Surface>\n    </ResourceListPage>","<ResourceListPage\n      title=\"KV 命名空间\"\n      description=\"以低延迟在全球范围存储键值数据\"\n      icon={<DatabaseIcon size={32} className=\"text-lark-subtle\" />}\n      usage={\n        <Surface className=\"p-4\">\n          <h3 className=\"mb-2 font-semibold\">使用示例</h3>\n          <Code\n            className=\"overflow-x-auto\"\n            lang=\"ts\"\n            code={`// Read from KV\nconst value = await KV.get('key');\n\n// Write to KV\nawait KV.put('key', 'value');`}\n          />\n        </Surface>\n      }\n      additionalContent={\n        <Surface className=\"p-4\">\n          <h3 className=\"mb-2 font-semibold\">了解更多</h3>\n          <p className=\"text-sm text-lark-subtle\">\n            查看我们的文档，了解更多关于 KV 存储的信息。\n          </p>\n        </Surface>\n      }\n    >\n      <div className=\"space-y-4\">\n        <Surface className=\"p-6\">\n          <h4 className=\"mb-2 truncate font-semibold\">production-kv</h4>\n          <p className=\"text-sm text-lark-subtle\">2 天前创建</p>\n        </Surface>\n        <Surface className=\"p-6\">\n          <h4 className=\"mb-2 truncate font-semibold\">staging-kv</h4>\n          <p className=\"text-sm text-lark-subtle\">1 周前创建</p>\n        </Surface>\n      </div>\n    </ResourceListPage>"],"colors":["bg-lark-overlay","text-lark-subtle"],"files":["resource-list/resource-list.tsx","resource-list/resource-list.test.tsx"],"dependencies":[]}},"search":{"byCategory":{"Other":["Autocomplete","DatePicker","Label","LarkLogo","Link","SensitiveInput","Sidebar","Table","TableOfContents","TagInput","Toolbar","DeleteResource"],"Display":["Badge","Breadcrumbs","Code","Collapsible","Empty","LayerCard","Meter","Text"],"Feedback":["Banner","Loader","Toasty"],"Data Visualization":["BubbleMap","Chart","ChoroplethMap","GlobeMap","SankeyChart","TimeseriesChart"],"Action":["Button","ButtonGroup","ClipboardText","InlineCopyText"],"Input":["Checkbox","Combobox","DateRangePicker","Field","Input","InputGroup","Radio","Select","Slider","Switch"],"Navigation":["CommandPalette","MenuBar","Pagination","Tabs"],"Overlay":["Dialog","DropdownMenu","LayerDialog","Popover","Tooltip"],"Layout":["Grid","Surface","PageHeader","ResourceListPage"]},"byName":["Autocomplete","Badge","Banner","Breadcrumbs","BubbleMap","Button","ButtonGroup","Chart","Checkbox","ChoroplethMap","ClipboardText","Code","Collapsible","Combobox","CommandPalette","DatePicker","DateRangePicker","DeleteResource","Dialog","DropdownMenu","Empty","Field","GlobeMap","Grid","InlineCopyText","Input","InputGroup","Label","LarkLogo","LayerCard","LayerDialog","Link","Loader","MenuBar","Meter","PageHeader","Pagination","Popover","Radio","ResourceListPage","SankeyChart","Select","SensitiveInput","Sidebar","Slider","Surface","Switch","Table","TableOfContents","Tabs","TagInput","Text","TimeseriesChart","Toasty","Toolbar","Tooltip"],"byType":{"component":["Autocomplete","Badge","Banner","Breadcrumbs","BubbleMap","Button","ButtonGroup","Chart","Checkbox","ChoroplethMap","ClipboardText","Code","Collapsible","Combobox","CommandPalette","DatePicker","DateRangePicker","Dialog","DropdownMenu","Empty","Field","GlobeMap","Grid","InlineCopyText","Input","InputGroup","Label","LarkLogo","LayerCard","LayerDialog","Link","Loader","MenuBar","Meter","Pagination","Popover","Radio","SankeyChart","Select","SensitiveInput","Sidebar","Slider","Surface","Switch","Table","TableOfContents","Tabs","TagInput","Text","TimeseriesChart","Toasty","Toolbar","Tooltip"],"block":["DeleteResource","PageHeader","ResourceListPage"]}}}