@doubao-dev/template 0.0.38-canary-22dd4cbf-20260720020201

package/README.md

@@ -0,0 +1,282 @@
+# @doubao-dev/template
+
+Doubao Apps Widget 模板库，用于快速开发卡片类 widget。模板把标题栏、内容区、信息区和操作区组合成稳定的卡片结构，开发者在 `defineWidget` 里选择模板并传入业务数据即可。
+
+推荐一个 widget 直接返回一张模板卡片，不额外包裹无意义的 `view` / `scroll-view`：
+
+```tsx
+import { defineWidget } from '@doubao-dev/framework';
+import { ContentCard, type ContentCardItem } from '@doubao-dev/template';
+
+const items: ContentCardItem[] = [
+  {
+    key: 'a',
+    title: '主标题',
+    subtitle: '4199 元 | 商品描述',
+    thumbnail: <image src="https://example.com/product.png" mode="aspectFill" />
+  }
+];
+
+export default defineWidget({
+  render() {
+    return (
+      <ContentCard
+        items={items}
+        header={{
+          actionText: '更多',
+          onActionClick: () => console.log('more')
+        }}
+        footer={{
+          secondaryActionButton: {
+            text: '查看更多',
+            onClick: () => console.log('view more')
+          },
+          primaryActionButton: {
+            text: '立即下单',
+            onClick: () => console.log('submit')
+          }
+        }}
+      />
+    );
+  }
+});
+```
+
+## 通用约定
+
+- `header` 配置标题栏右侧操作，类型为 `TemplateCardHeaderProps`，包含 `actionText` / `showAction` / `onActionClick`。
+- `footer` 配置底部操作区，类型为 `TemplateCardFooterProps`，包含 `primaryActionButton` / `secondaryActionButton`。只传一个按钮时占据整行。
+- `header`、`footer` 和内容区相互独立。footer 不会影响 `items` 展示数量，内容区也不负责渲染 header/footer。
+- `children` 只接管内容区；模板仍保留卡片外壳、header 和 footer。
+- `className` / `style` / `onClick` 作用在卡片根节点。
+- 样式使用组件根 class 内声明的 `--doubao-*` CSS 变量，不把模板变量挂到 `:root`。
+
+## ContentCard
+
+<img src="https://unpkg.com/@doubao-dev/template@0.0.38-canary-22dd4cbf-20260720020201/assets/content-card.png" alt="ContentCard 示例" width="400" />
+
+通用列表卡，由标题栏、列表内容和底部操作区组成，适合商品、服务、内容入口等可重复条目。
+
+```tsx
+import { ContentCard } from '@doubao-dev/template';
+
+<ContentCard
+  items={[
+    {
+      title: '蓝牙降噪耳机 Pro',
+      subtitle: '799 元 | 主动降噪 | 现货',
+      thumbnail: <image src="https://example.com/product.png" mode="aspectFill" />,
+      action: {
+        type: 'button',
+        text: '下单',
+        onClick: () => console.log('order')
+      }
+    },
+    {
+      title: '便携冲牙器',
+      subtitle: '189 元 | 三档水压 | 今日达'
+    }
+  ]}
+  footer={{
+    primaryActionButton: {
+      text: '立即下单'
+    }
+  }}
+/>
+```
+
+说明：
+
+- `title` / `subtitle` 支持字符串、数字或自定义节点。字符串和数字使用模板默认单行样式。
+- `thumbnail` 是列表项左侧缩略视觉内容，可传图片、图标或自定义节点。
+- `action` 是列表项右侧操作区，支持 `{ type: 'button' }`、`{ type: 'switch' }`、`{ type: 'playback' }` 或自定义节点。
+- `children` 会替换列表内容区，不包含 header/footer。
+
+## PriceActionCard
+
+<img src="https://unpkg.com/@doubao-dev/template@0.0.38-canary-22dd4cbf-20260720020201/assets/price-action-card.png" alt="PriceActionCard 示例" width="400" />
+
+价格操作卡，由多条"价格 + 信息 + 右侧按钮"组成，适合报价、权益、服务方案等结果列表。
+
+```tsx
+import { PriceActionCard } from '@doubao-dev/template';
+
+<PriceActionCard
+  items={[
+    {
+      price: '¥128',
+      badgeText: '推荐',
+      infoRows: [{ text: '专车接送' }, { text: '免费等待 30 分钟' }],
+      actionText: '预订',
+      onActionClick: () => console.log('select')
+    }
+  ]}
+  footer={{
+    primaryActionButton: {
+      text: '查看全部报价'
+    }
+  }}
+/>
+```
+
+说明：
+
+- `items` 用于配置价格列表，每条最多展示前 2 行 `infoRows`。
+- `actionText` 为空时不展示列表项右侧按钮。
+- `footer` 使用通用底部操作区，不再使用旧的 `footerActionText`。
+
+## CheckoutCard
+
+<img src="https://unpkg.com/@doubao-dev/template@0.0.38-canary-22dd4cbf-20260720020201/assets/checkout-card.png" alt="CheckoutCard 示例" width="400" />
+
+通用提单卡，由商品摘要、提单信息、费用汇总和底部操作区组成，适合下单确认、支付确认等场景。
+
+```tsx
+import { CheckoutCard } from '@doubao-dev/template';
+
+<CheckoutCard
+  productItems={[
+    {
+      title: '双人下午茶套餐',
+      spec: '含 2 杯饮品 + 2 款甜点',
+      price: '¥68',
+      quantity: '1'
+    },
+    {
+      title: '榛果拿铁',
+      spec: '少糖 | 热饮',
+      price: '¥28',
+      quantity: '2',
+      showChevron: false
+    }
+  ]}
+  infoItems={[
+    { label: '提单门店', value: '朝阳大悦城店' },
+    { label: '预计时间', value: '今天 15:30', valueExtra: '请到店自取' }
+  ]}
+  feeItems={[
+    { label: '包装费', value: '¥2' },
+    { label: '服务费', value: '¥0' }
+  ]}
+  discountText="共优惠 ¥12"
+  totalPrice="¥126"
+  footer={{
+    secondaryActionButton: { text: '修改' },
+    primaryActionButton: { text: '提交订单' }
+  }}
+/>
+```
+
+说明：
+
+- `productItems` 支持单个或多个商品。单项字段复用商品摘要能力，包括 `title`、`spec`、`imageSrc`、`image`、`pricePrefix`、`price`、`quantity`、`showChevron`、`onClick`。
+- `infoItems` 配置提单信息列表。
+- `feeItems`、`discountText`、`totalLabel`、`totalPrice` 配置费用汇总。
+- 底部按钮使用 `footer.primaryActionButton` / `footer.secondaryActionButton`。
+
+## TicketOrderCard
+
+<img src="https://unpkg.com/@doubao-dev/template@0.0.38-canary-22dd4cbf-20260720020201/assets/ticket-checkout-card.png" alt="TicketOrderCard 示例" width="400" />
+
+票务提单卡，由航程信息、订单信息、费用汇总和底部操作区组成，适合机票、火车票等出行确认场景。
+
+```tsx
+import { TicketOrderCard } from '@doubao-dev/template';
+
+<TicketOrderCard
+  routeItems={[
+    {
+      title: '北京 - 上海',
+      description: '7月1日 周三 08:00-10:10 MU5101 经济舱'
+    },
+    {
+      title: '上海 - 北京',
+      description: '7月3日 周五 19:20-21:35 MU5162 经济舱'
+    }
+  ]}
+  infoItems={[
+    { label: '乘机人', value: '张三' },
+    { label: '联系电话', value: '138****8888' }
+  ]}
+  feeItems={[
+    { label: '机票', value: '¥1064' },
+    { label: '机建燃油', value: '¥440' }
+  ]}
+  totalLabel="合计"
+  totalPrice="¥1504"
+  footer={{
+    secondaryActionButton: { text: '修改' },
+    primaryActionButton: { text: '提交' }
+  }}
+/>
+```
+
+说明：
+
+- `routeItems` 配置航程列表，单项可通过 `showChevron={false}` 隐藏标题右侧箭头。
+- `totalContent` 可以接管合计区域，优先级高于 `totalLabel` / `totalPrice`。
+- 底部按钮使用通用 `footer`。
+
+## TransitCard
+
+<img src="https://unpkg.com/@doubao-dev/template@0.0.38-canary-22dd4cbf-20260720020201/assets/transit-card.png" alt="TransitCard 示例" width="400" />
+
+交通票务列表卡，由多条出发、中转、到达和价格信息组成，适合展示机票、火车票、大巴等推荐列表。
+
+```tsx
+import { TransitCard } from '@doubao-dev/template';
+
+<TransitCard
+  items={[
+    {
+      title: '北京南 - 上海虹桥',
+      departureMain: '08:00',
+      departureSub: '北京南',
+      transferTop: '直达',
+      arrivalMain: '12:32',
+      arrivalDayOffset: '+1',
+      arrivalSub: '上海虹桥',
+      price: '¥553'
+    }
+  ]}
+  footer={{
+    primaryActionButton: {
+      text: '查看更多车次'
+    }
+  }}
+/>
+```
+
+说明：
+
+- `items` 会全量展示，模板不做"最多 4 条"的截断。
+- `title`、`transfer`、`price` 接收 `ReactNode`，适合需要自定义整块区域的场景。
+- `departureMain`、`departureSub`、`transferTop`、`transferBottom`、`arrivalMain`、`arrivalDayOffset`、`arrivalSub` 接收字符串或数字。
+
+## AskHumanCard
+
+<img src="https://unpkg.com/@doubao-dev/template@0.0.38-canary-22dd4cbf-20260720020201/assets/ask-human-card.png" alt="AskHumanCard 示例" width="400" />
+
+人工确认选项卡，由一组选项组成，适合让用户在多个候选项中确认选择。
+
+```tsx
+import { AskHumanCard } from '@doubao-dev/template';
+
+<AskHumanCard
+  items={[
+    { text: '朝阳大悦城店 | 0.8km' },
+    { text: '三里屯太古里店 | 2.1km' },
+    { text: '国贸商城店 | 3.4km' },
+    {
+      text: '都不是',
+      showArrow: 'right',
+      onClick: () => console.log('skip')
+    }
+  ]}
+/>
+```
+
+说明：
+
+- `items` 配置选项列表，每项可用 `text` 或 `children`。
+- `items[].showArrow` 支持 `'left'`、`'right'`、`'none'`，默认不展示；跳过、固定跳转等入口也通过 `items` 表达。

package/dist/ask-human-card/index.d.ts

@@ -0,0 +1,44 @@
+import type { CSSProperties, TouchEvent } from '@lynx-js/types';
+import { type ReactElement, type ReactNode } from 'react';
+import type { TemplateKey, TemplateText } from '../types.js';
+import './styles.scss';
+/** 卡片行为语义。 */
+export type AskHumanCardVariant = 'suggestion' | 'jump';
+/** 选项箭头展示位置。 */
+export type AskHumanCardArrowPosition = 'left' | 'right' | 'none';
+export interface AskHumanCardProps {
+    /** 选项列表。 */
+    items?: AskHumanCardItem[];
+    /**
+     * 选项的行为语义，决定排列方式。
+     * - `'suggestion'`（默认）：点击向模型发消息；纵向、居左。
+     * - `'jump'`：固定跳转；拉通横排（1 项占满、2 项平分，≥3 项回退纵向）。
+     */
+    variant?: AskHumanCardVariant;
+    /** 卡片根节点自定义类名。 */
+    className?: string;
+    /** 卡片根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击卡片根节点时触发。 */
+    onClick?: (event: TouchEvent) => void;
+}
+export interface AskHumanCardItem {
+    /** 选项唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 选项文案。 */
+    text?: TemplateText;
+    /** 选项自定义内容；优先级高于 text。 */
+    children?: ReactNode;
+    /** 是否显示加载状态；为 true 时选项内展示 loading 动画并禁用点击。 */
+    loading?: boolean;
+    /** 箭头展示位置；默认 `'none'` 不展示。 */
+    showArrow?: AskHumanCardArrowPosition;
+    /** 选项根节点自定义类名。 */
+    className?: string;
+    /** 选项根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击选项时触发。 */
+    onClick?: (event?: TouchEvent) => void;
+}
+export declare function AskHumanCard(props: AskHumanCardProps): ReactElement;
+//# sourceMappingURL=index.d.ts.map

package/dist/ask-human-card/index.js

@@ -0,0 +1,79 @@
+import { Button, useTheme, useThemeClassName } from "@byted-doubao-apps/components";
+import { createEvent, reportEvent } from "@byted-doubao-apps/framework/api";
+import { clsx } from "clsx";
+import { useEffect } from "react";
+import { getAppInfo } from "../utils/app-info.js";
+import "./styles.css";
+const onShow = createEvent('onShow');
+function reportAskHumanCardEvent(eventName) {
+    const appInfo = getAppInfo();
+    reportEvent({
+        eventName,
+        data: {
+            current_page: 'chat',
+            app_name: appInfo.appName
+        }
+    });
+}
+function getAskHumanCardArrowIconContent(color) {
+    return `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5652 3.96967C10.8581 3.67678 11.3328 3.67678 11.6257 3.96967L15.594 7.93794C16.1778 8.52186 16.183 9.4729 15.5955 10.0605L11.6257 14.0302C11.3329 14.323 10.8581 14.323 10.5652 14.0302C10.2723 13.7374 10.2724 13.2626 10.5652 12.9697L13.7849 9.74996H2.47046C2.05631 9.74996 1.72056 9.41408 1.72046 8.99996C1.72046 8.58574 2.05625 8.24996 2.47046 8.24996H13.7849L10.5652 5.03022C10.2723 4.73736 10.2724 4.26257 10.5652 3.96967Z" fill="${color}"/>
+</svg>`;
+}
+function isAskHumanCardTextEmpty(content) {
+    return null == content || '' === content;
+}
+function isAskHumanCardNodeEmpty(content) {
+    return null == content || 'boolean' == typeof content || '' === content;
+}
+function renderAskHumanCardItem({ item, index, optionBg, arrowColor }) {
+    const isLoading = true === item.loading;
+    const hasCustomContent = !isAskHumanCardNodeEmpty(item.children);
+    const arrowPosition = 'left' === item.showArrow || 'right' === item.showArrow ? item.showArrow : void 0;
+    const arrowNode = arrowPosition ? <svg className="doubao-ask-human-card__option-icon" content={getAskHumanCardArrowIconContent(arrowColor)}/> : null;
+    if (!isLoading && !hasCustomContent && isAskHumanCardTextEmpty(item.text)) return null;
+    return <Button key={item.key ?? index} className={clsx('doubao-ask-human-card__option', {
+        'doubao-ask-human-card__option--with-arrow': null != arrowPosition
+    }, item.className)} style={{
+        backgroundColor: optionBg,
+        ...item.style
+    }} type="default" loading={isLoading} onClick={(event)=>{
+        reportAskHumanCardEvent('doubao_apps_taxi_follow_up_click');
+        item.onClick?.(event);
+    }}>
+      {'left' === arrowPosition && arrowNode}
+      {hasCustomContent ? item.children : <text className="doubao-ask-human-card__option-text" text-maxline="1">
+          {item.text}
+        </text>}
+      {'right' === arrowPosition && arrowNode}
+    </Button>;
+}
+function AskHumanCard(props) {
+    const { items = [], variant = 'suggestion', className, style, onClick } = props;
+    const theme = useTheme();
+    const arrowColor = 'dark' === theme ? '#ffffff' : '#000000';
+    const optionBg = 'dark' === theme ? '#000000' : '#ffffff';
+    const optionNodes = items.map((item, index)=>renderAskHumanCardItem({
+            item,
+            index,
+            optionBg,
+            arrowColor
+        })).filter((node)=>null != node);
+    const isRow = 'jump' === variant && optionNodes.length > 0 && optionNodes.length <= 2;
+    useEffect(()=>{
+        const unregisterShow = onShow(()=>{
+            reportAskHumanCardEvent('doubao_apps_taxi_follow_up_show');
+        });
+        return ()=>{
+            unregisterShow?.();
+        };
+    }, []);
+    return <view className={useThemeClassName(clsx('doubao-ask-human-card', className))} style={style} bindtap={onClick}>
+      {optionNodes.length > 0 && <view className={clsx('doubao-ask-human-card__options', {
+        'doubao-ask-human-card__options--row': isRow
+    })}>
+          {optionNodes}
+        </view>}
+    </view>;
+}
+export { AskHumanCard };

package/dist/ask-human-card/styles.css

@@ -0,0 +1,66 @@
+.doubao-ask-human-card {
+  --doubao-ask-human-card-gap: 8px;
+  --doubao-ask-human-card-option-height: 44px;
+  --doubao-ask-human-card-option-radius: 8px;
+  align-items: flex-start;
+  gap: var(--doubao-ask-human-card-gap);
+  box-sizing: border-box;
+  background-color: var(--bg-base-2-overlay);
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.doubao-ask-human-card__options {
+  align-items: flex-start;
+  gap: var(--doubao-ask-human-card-gap);
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.doubao-ask-human-card__options--row {
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.doubao-ask-human-card__options--row > .doubao-button {
+  flex: 1 1 0;
+}
+
+.doubao-ask-human-card .doubao-button {
+  min-width: 0;
+  max-width: 100%;
+  height: var(--doubao-ask-human-card-option-height);
+  --doubao-button-default-height: var(--doubao-ask-human-card-option-height);
+  --doubao-button-border-radius: var(--doubao-ask-human-card-option-radius);
+  --doubao-button-default-border-radius: var(--doubao-ask-human-card-option-radius);
+  --doubao-button-default-padding-x: 12px;
+  --doubao-button-default-padding-y: 11px;
+  --doubao-button-default-bg: var(--bg-base-1);
+}
+
+.doubao-ask-human-card__option--with-arrow {
+  gap: 4px;
+}
+
+.doubao-ask-human-card__option-text {
+  min-width: 0;
+  color: var(--neutral-100);
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px;
+  overflow: hidden;
+}
+
+.doubao-ask-human-card__option-icon {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+}
+

package/dist/checkout-card/index.d.ts

@@ -0,0 +1,55 @@
+import type { CSSProperties, TouchEvent } from '@lynx-js/types';
+import type { ReactElement, ReactNode } from 'react';
+import { type TemplateCardFooterProps } from '../components/footer/index.js';
+import { type TemplateCardHeaderProps } from '../components/header/index.js';
+import { type TemplateProductSummaryProps } from '../components/product-summary/index.js';
+import type { TemplateKey, TemplateText } from '../types.js';
+import './styles.scss';
+export interface CheckoutCardProps {
+    /** 标题栏配置。 */
+    header?: TemplateCardHeaderProps;
+    /** 商品列表。 */
+    productItems?: CheckoutCardProductItem[];
+    /** 提单信息列表。 */
+    infoItems?: CheckoutCardInfoItem[];
+    /** 费用明细列表。 */
+    feeItems?: CheckoutCardFeeItem[];
+    /** 优惠信息文案；传空字符串时不展示。 */
+    discountText?: string;
+    /** 合计价格前的标签文案。 */
+    totalLabel?: string;
+    /** 合计价格。 */
+    totalPrice?: TemplateText;
+    /** 底部操作区配置。 */
+    footer?: TemplateCardFooterProps;
+    /** 卡片根节点自定义类名。 */
+    className?: string;
+    /** 卡片根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击卡片根节点时触发。 */
+    onClick?: (event: TouchEvent) => void;
+}
+export interface CheckoutCardProductItem extends TemplateProductSummaryProps {
+    /** 商品唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+}
+export interface CheckoutCardInfoItem {
+    /** 信息项唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 信息项标签。 */
+    label: string;
+    /** 信息项主内容。 */
+    value: ReactNode;
+    /** 信息项补充内容。 */
+    valueExtra?: ReactNode;
+}
+export interface CheckoutCardFeeItem {
+    /** 费用项唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 费用项标签。 */
+    label: string;
+    /** 费用项金额或数值。 */
+    value: TemplateText;
+}
+export declare function CheckoutCard(props: CheckoutCardProps): ReactElement;
+//# sourceMappingURL=index.d.ts.map

package/dist/checkout-card/index.js

@@ -0,0 +1,40 @@
+import { useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import { TemplateCardFooter } from "../components/footer/index.js";
+import { TemplateCardHeader } from "../components/header/index.js";
+import { TemplateInfoSection } from "../components/info-section/index.js";
+import { TemplateProductSummary } from "../components/product-summary/index.js";
+import "./styles.css";
+function isCheckoutCardTextEmpty(content) {
+    return null == content || '' === content;
+}
+function isCheckoutCardNodeEmpty(content) {
+    return null == content || 'boolean' == typeof content || '' === content;
+}
+function hasCheckoutCardProductItemContent(item) {
+    return null != item.title && item.title.length > 0 || null != item.spec && item.spec.length > 0 || null != item.imageSrc && item.imageSrc.length > 0 || !isCheckoutCardNodeEmpty(item.image) || null != item.pricePrefix && item.pricePrefix.length > 0 || !isCheckoutCardTextEmpty(item.price) || !isCheckoutCardTextEmpty(item.quantity);
+}
+function renderCheckoutCardProductItem({ item, index }) {
+    if (!hasCheckoutCardProductItemContent(item)) return null;
+    const { key, onClick, ...productSummaryProps } = item;
+    return <view className="doubao-checkout-card__product" key={key ?? index}>
+      <TemplateProductSummary {...productSummaryProps} onClick={onClick}/>
+    </view>;
+}
+function CheckoutCard(props) {
+    const { header, productItems = [], infoItems = [], feeItems = [], discountText, totalLabel, totalPrice, footer, className, style, onClick } = props;
+    const productNodes = productItems.map((item, index)=>renderCheckoutCardProductItem({
+            item,
+            index
+        })).filter((node)=>null != node);
+    return <view className={useThemeClassName(clsx('doubao-checkout-card', className))} style={style} bindtap={onClick} clip-radius="true">
+      <TemplateCardHeader actionText={header?.actionText} showAction={header?.showAction} onActionClick={header?.onActionClick}/>
+
+      {productNodes.length > 0 && <view className="doubao-checkout-card__products">{productNodes}</view>}
+
+      <TemplateInfoSection infoItems={infoItems} feeItems={feeItems} discountText={discountText} totalLabel={totalLabel} totalPrice={totalPrice} valueLayout="column"/>
+
+      <TemplateCardFooter secondaryActionButton={footer?.secondaryActionButton} primaryActionButton={footer?.primaryActionButton}/>
+    </view>;
+}
+export { CheckoutCard };

package/dist/checkout-card/styles.css

@@ -0,0 +1,34 @@
+.doubao-checkout-card {
+  box-sizing: border-box;
+  background-color: var(--bg-base-1);
+  border: 1px solid var(--bg-base-2-overlay);
+  border-radius: 8px;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-checkout-card__products {
+  background-color: var(--bg-base-1);
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  display: flex;
+}
+
+.doubao-checkout-card__product {
+  position: relative;
+}
+
+.doubao-checkout-card__product + .doubao-checkout-card__product:before {
+  background-color: var(--neutral-transparent-1);
+  content: "";
+  height: 1px;
+  position: absolute;
+  top: 0;
+  left: 16px;
+  right: 16px;
+}
+

package/dist/components/chevron-right-icon/index.d.ts

@@ -0,0 +1,6 @@
+import type { ReactElement } from 'react';
+export interface TemplateChevronRightIconProps {
+    className?: string;
+}
+export declare function TemplateChevronRightIcon(props: TemplateChevronRightIconProps): ReactElement;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/chevron-right-icon/index.js

@@ -0,0 +1,13 @@
+import { useTheme } from "@byted-doubao-apps/components";
+function getTemplateChevronRightIconContent(color) {
+    return `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.51458 11.3743C4.99729 11.6423 5.60576 11.4682 5.87396 10.9856L7.99601 7.16575C8.23233 6.74036 8.35049 6.52766 8.39681 6.30241C8.43781 6.10305 8.43781 5.89744 8.39681 5.69808C8.35049 5.47283 8.23233 5.26013 7.99601 4.83474L5.87396 1.01489C5.60577 0.532166 4.99734 0.358141 4.51458 0.626222C4.03188 0.894415 3.85783 1.50285 4.12591 1.9856L6.22599 5.76721C6.27322 5.85226 6.29684 5.89479 6.3061 5.93983C6.31429 5.97969 6.31429 6.0208 6.3061 6.06066C6.29684 6.1057 6.27322 6.14823 6.22598 6.23328L4.12591 10.0149C3.85791 10.4976 4.03189 11.1061 4.51458 11.3743Z" fill="${color}"/>
+</svg>`;
+}
+function TemplateChevronRightIcon(props) {
+    const { className } = props;
+    const theme = useTheme();
+    const color = 'dark' === theme ? '#666666' : '#cccccc';
+    return <svg className={className} content={getTemplateChevronRightIconContent(color)}/>;
+}
+export { TemplateChevronRightIcon };