@doubao-dev/template 0.0.38 → 0.0.39

package/dist/components/route-section/index.js

@@ -19,11 +19,13 @@ function renderTemplateRouteSectionItem(item, index) {
     if (!hasTemplateRouteSectionItemContent(item)) return null;
     const titleNode = renderTemplateRouteSectionTextField(item.title, 'doubao-template-route-section__title-text');
     const descriptionNode = renderTemplateRouteSectionTextField(item.description, "doubao-template-route-section__description");
+    const tagNode = renderTemplateRouteSectionTextField(item.tagText, 'highlight' === item.tagTone ? 'doubao-template-route-section__tag doubao-template-route-section__tag--highlight' : 'doubao-template-route-section__tag');
     const showChevron = false !== item.showChevron && titleNode;
     return <view className="doubao-template-route-section__item" key={item.key ?? index} {...null != item.onClick ? {
         catchtap: item.onClick
     } : {}}>
       {titleNode && <view className="doubao-template-route-section__title">
+          {tagNode}
           {titleNode}
           {showChevron && <TemplateChevronRightIcon className="doubao-template-route-section__chevron"/>}
         </view>}

package/dist/components/route-section/styles.css

@@ -42,6 +42,30 @@
   margin-left: 5px;
 }
 
+.doubao-template-route-section__tag {
+  box-sizing: border-box;
+  height: 18px;
+  color: var(--neutral-70);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: var(--bg-base-2-overlay);
+  border-radius: 4px;
+  flex-shrink: 0;
+  margin-right: 4px;
+  padding: 2px 4px;
+  font-family: PingFang SC, sans-serif;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 14px;
+  overflow: hidden;
+}
+
+.doubao-template-route-section__tag--highlight {
+  color: var(--primary-60);
+  background-color: var(--primary-transparent-1);
+}
+
 .doubao-template-route-section__description {
   width: 100%;
   height: 20px;

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

@@ -12,7 +12,10 @@ export interface ContentCardProps {
     items?: ContentCardItem[];
     /** 底部操作区配置。 */
     footer?: TemplateCardFooterProps;
-    /** 自定义列表内容区域；传入后不再渲染默认列表内容，标题栏和底部操作区仍由模板渲染。 */
+    /**
+     * 自定义列表内容区域；传入后不再渲染默认列表内容，标题栏和底部操作区仍由模板渲染。
+     * @deprecated 仅为兼容旧代码保留。新代码请使用 items。
+     */
     children?: ReactNode;
     /** 卡片根节点自定义类名。 */
     className?: string;
@@ -28,9 +31,16 @@ export interface ContentCardItem {
     title?: ReactNode;
     /** 列表项副标题。字符串会按默认单行副标题样式渲染，传入节点时直接渲染自定义内容。 */
     subtitle?: ReactNode;
-    /** 列表项左侧缩略视觉内容。 */
+    /** 列表项补充描述。字符串会按默认单行描述样式渲染，传入节点时直接渲染自定义内容。 */
+    description?: ReactNode;
+    /** 列表项左侧缩略图地址。 */
+    thumbnailSrc?: string;
+    /** 列表项左侧缩略视觉内容；优先级高于 thumbnailSrc。 */
     thumbnail?: ReactNode;
-    /** 列表项自定义内容；传入后不再渲染默认图文结构。 */
+    /**
+     * 列表项自定义内容；传入后不再渲染默认图文结构。
+     * @deprecated 仅为兼容旧代码保留。新代码请使用 title、subtitle、description、thumbnail 和 action。
+     */
     children?: ReactNode;
     /** 列表项右侧操作区；传标准控件配置时使用模板样式，传节点时直接渲染自定义内容。 */
     action?: TemplateExtraAction | ReactNode;

package/dist/content-card/index.js

@@ -7,9 +7,13 @@ import "./styles.css";
 function isContentCardNodeEmpty(content) {
     return null == content || 'boolean' == typeof content || '' === content;
 }
-function ContentCardThumbnail({ thumbnail }) {
-    if (isContentCardNodeEmpty(thumbnail)) return null;
-    return <view className="doubao-content-card__thumbnail">{thumbnail}</view>;
+function ContentCardThumbnail({ thumbnail, thumbnailSrc }) {
+    const hasThumbnailNode = !isContentCardNodeEmpty(thumbnail);
+    const resolvedThumbnailSrc = thumbnailSrc && thumbnailSrc.length > 0 ? thumbnailSrc : null;
+    if (!hasThumbnailNode && null == resolvedThumbnailSrc) return null;
+    return <view className="doubao-content-card__thumbnail">
+      {hasThumbnailNode ? thumbnail : <image className="doubao-content-card__thumbnail-image" src={resolvedThumbnailSrc} mode="aspectFill"/>}
+    </view>;
 }
 function renderContentCardText(content, className) {
     if (isContentCardNodeEmpty(content)) return null;
@@ -37,19 +41,21 @@ function renderContentCardAction(action) {
     return action;
 }
 function ContentCardItemView({ item, isLast }) {
-    const { title, subtitle } = item;
-    const hasThumbnail = !isContentCardNodeEmpty(item.thumbnail);
+    const { title, subtitle, description } = item;
+    const hasThumbnail = !isContentCardNodeEmpty(item.thumbnail) || null != item.thumbnailSrc && item.thumbnailSrc.length > 0;
     const subtitleNode = renderContentCardText(subtitle, 'doubao-content-card__subtitle');
+    const descriptionNode = renderContentCardText(description, "doubao-content-card__description");
     const actionNode = renderContentCardAction(item.action);
     return <view className={clsx('doubao-content-card__item', isLast && 'doubao-content-card__item--last', !hasThumbnail && 'doubao-content-card__item--without-thumbnail', item.className)} style={item.style} {...null != item.onClick ? {
         catchtap: item.onClick
     } : {}}>
       {item.children ?? <view className="doubao-content-card__content">
           <view className="doubao-content-card__main">
-            {hasThumbnail && <ContentCardThumbnail thumbnail={item.thumbnail}/>}
+            {hasThumbnail && <ContentCardThumbnail thumbnail={item.thumbnail} thumbnailSrc={item.thumbnailSrc}/>}
             <view className="doubao-content-card__text">
               {renderContentCardText(title, 'doubao-content-card__title')}
               {subtitleNode && <view className="doubao-content-card__secondary">{subtitleNode}</view>}
+              {descriptionNode && <view className="doubao-content-card__tertiary">{descriptionNode}</view>}
             </view>
           </view>
           {actionNode && <view className="doubao-content-card__item-action" catchtap={stopTemplateExtraActionTap}>

package/dist/content-card/styles.css

@@ -70,17 +70,22 @@
   overflow: hidden;
 }
 
+.doubao-content-card__thumbnail-image {
+  width: 100%;
+  height: 100%;
+}
+
 .doubao-content-card__text {
   flex-direction: column;
   flex: 1 1 0;
   align-items: flex-start;
+  gap: 2px;
   min-width: 0;
   display: flex;
 }
 
 .doubao-content-card__title {
   width: 100%;
-  height: 24px;
   color: var(--neutral-100);
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -92,7 +97,7 @@
   overflow: hidden;
 }
 
-.doubao-content-card__title-custom, .doubao-content-card__subtitle-custom {
+.doubao-content-card__title-custom, .doubao-content-card__subtitle-custom, .doubao-content-card__description-custom {
   flex-direction: row;
   align-items: center;
   width: 100%;
@@ -101,17 +106,16 @@
   overflow: hidden;
 }
 
-.doubao-content-card__secondary {
+.doubao-content-card__secondary, .doubao-content-card__tertiary {
   flex-direction: row;
   align-items: center;
   width: 100%;
   min-width: 0;
-  height: 24px;
   display: flex;
   overflow: hidden;
 }
 
-.doubao-content-card__subtitle {
+.doubao-content-card__subtitle, .doubao-content-card__description {
   width: 100%;
   color: var(--neutral-70);
   text-overflow: ellipsis;

package/dist/index.d.ts

@@ -6,6 +6,6 @@ export { AskHumanCard, type AskHumanCardArrowPosition, type AskHumanCardItem, ty
 export { CheckoutCard, type CheckoutCardFeeItem, type CheckoutCardInfoItem, type CheckoutCardProductItem, type CheckoutCardProps } from './checkout-card/index.js';
 export { PriceActionCard, type PriceActionCardInfoRow, type PriceActionCardItem, type PriceActionCardProps } from './price-action-card/index.js';
 export { TransitCard, type TransitCardItem, type TransitCardProps } from './transit-card/index.js';
-export type { TemplateKey, TemplateText } from './types.js';
+export type { TemplateKey, TemplateTagTone, TemplateText } from './types.js';
 export { TicketOrderCard, type TicketOrderCardFeeItem, type TicketOrderCardInfoItem, type TicketOrderCardProps, type TicketOrderCardRouteItem } from './ticket-order-card/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/price-action-card/index.d.ts

@@ -11,7 +11,10 @@ export interface PriceActionCardProps {
     items?: PriceActionCardItem[];
     /** 底部操作区配置。 */
     footer?: TemplateCardFooterProps;
-    /** 自定义卡片内容；传入后不再渲染默认列表，标题栏和底部操作区仍由模板渲染。 */
+    /**
+     * 自定义卡片内容；传入后不再渲染默认列表，标题栏和底部操作区仍由模板渲染。
+     * @deprecated 仅为兼容旧代码保留。新代码请使用 items 的结构化字段。
+     */
     children?: ReactNode;
     /** 卡片根节点自定义类名。 */
     className?: string;
@@ -31,7 +34,10 @@ export interface PriceActionCardItem {
     infoRows?: PriceActionCardInfoRow[];
     /** 右侧操作按钮文案；不传或传空字符串时不展示。 */
     actionText?: string;
-    /** 列表项自定义内容；传入后不再渲染默认三列结构。 */
+    /**
+     * 列表项自定义内容；传入后不再渲染默认三列结构。
+     * @deprecated 仅为兼容旧代码保留。新代码请使用 price、badgeText、infoRows 和 actionText。
+     */
     children?: ReactNode;
     /** 列表项根节点自定义类名。 */
     className?: string;

package/dist/price-action-card/index.js

@@ -2,6 +2,7 @@ import { Button, 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 { Price } from "../primitives/price/index.js";
 import "./styles.css";
 const PRICE_ACTION_CARD_INFO_ROW_LIMIT = 2;
 const PRICE_ACTION_CARD_CURRENCY_PATTERN = /^([¥￥$€£])(.+)$/;
@@ -14,14 +15,7 @@ function isPriceActionCardNodeEmpty(content) {
 function PriceActionCardPrice({ price }) {
     const priceText = String(price);
     const [, currency, value] = priceText.match(PRICE_ACTION_CARD_CURRENCY_PATTERN) ?? [];
-    return <view className="doubao-price-action-card__price">
-      {null != currency && <text className="doubao-price-action-card__price-currency" text-maxline="1">
-          {currency}
-        </text>}
-      <text className="doubao-price-action-card__price-value" text-maxline="1">
-        {value ?? priceText}
-      </text>
-    </view>;
+    return <Price className="doubao-price-action-card__price" currency={currency ?? ''} value={value ?? priceText} tone="highlight"/>;
 }
 function PriceActionCardItemView({ item, isLast }) {
     const hasPrice = !isPriceActionCardTextEmpty(item.price);

package/dist/price-action-card/styles.css

@@ -28,7 +28,7 @@
   align-items: center;
   width: 100%;
   height: 82px;
-  padding: 14px 12px;
+  padding: 20px 12px;
   display: flex;
   position: relative;
 }
@@ -50,8 +50,8 @@
 .doubao-price-action-card__item-content {
   flex-direction: row;
   align-items: center;
+  gap: 12px;
   width: 100%;
-  padding-left: 4px;
   display: flex;
 }
 
@@ -59,44 +59,32 @@
   flex-direction: column;
   flex-shrink: 0;
   align-items: flex-start;
-  width: 67px;
+  width: 94px;
   min-width: 0;
+  padding: 0 4px;
   display: flex;
 }
 
-.doubao-price-action-card__price {
-  max-width: 100%;
-  height: 20px;
-  color: var(--pink-500);
-  white-space: nowrap;
-  flex-direction: row;
-  align-items: flex-end;
-  font-family: SF Pro, sans-serif;
-  font-style: normal;
-  display: flex;
+.doubao-price-action-card__price.doubao-price {
+  width: 100%;
+  min-width: 0;
   overflow: hidden;
 }
 
-.doubao-price-action-card__price-currency, .doubao-price-action-card__price-value {
+.doubao-price-action-card__price.doubao-price .doubao-price__amount, .doubao-price-action-card__price.doubao-price .doubao-price__main, .doubao-price-action-card__price.doubao-price .doubao-price__integer-group {
   min-width: 0;
-  color: var(--pink-500);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: SF Pro, sans-serif;
-  font-style: normal;
-  font-weight: 600;
+  max-width: 100%;
   overflow: hidden;
 }
 
-.doubao-price-action-card__price-currency {
-  flex-shrink: 0;
-  font-size: 13px;
-  line-height: 15px;
+.doubao-price-action-card__price.doubao-price .doubao-price__main, .doubao-price-action-card__price.doubao-price .doubao-price__integer-group, .doubao-price-action-card__price.doubao-price .doubao-price__integer {
+  flex-shrink: 1;
 }
 
-.doubao-price-action-card__price-value {
-  font-size: 17px;
-  line-height: 20px;
+.doubao-price-action-card__price.doubao-price .doubao-price__integer {
+  text-overflow: ellipsis;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .doubao-price-action-card__badge {
@@ -122,7 +110,6 @@
   flex: 1 1 0;
   justify-content: center;
   min-width: 0;
-  margin-left: 16px;
   display: flex;
 }
 
@@ -156,6 +143,5 @@
   flex-shrink: 0;
   width: 80px;
   height: 38px;
-  margin-left: 12px;
 }
 

package/dist/primitives/index.d.ts

@@ -0,0 +1,4 @@
+export { Price, type PriceProps, type PriceTone, type PriceValue } from './price/index.js';
+export { Tag, type TagProps, type TagTone, type TagValue } from './tag/index.js';
+export { Title, type TitleMaxLines, type TitleProps, type TitleValue } from './title/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/index.js

@@ -0,0 +1,3 @@
+export { Price } from "./price/index.js";
+export { Tag } from "./tag/index.js";
+export { Title } from "./title/index.js";

package/dist/primitives/price/index.d.ts

@@ -0,0 +1,5 @@
+import type { PriceProps } from './types.js';
+import './styles.scss';
+export type { PriceProps, PriceTone, PriceValue } from './types.js';
+export declare function Price({ value, currency, prefix, suffix, description, originalPrice, tone, loading, className, style }: PriceProps): any;
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/price/index.js

@@ -0,0 +1,56 @@
+import { useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import "./styles.css";
+function splitPriceValue(value) {
+    const price = String(value);
+    const decimalIndex = price.indexOf('.');
+    if (-1 === decimalIndex) return {
+        integer: price,
+        decimal: ''
+    };
+    return {
+        integer: price.slice(0, decimalIndex),
+        decimal: price.slice(decimalIndex)
+    };
+}
+function formatOriginalPrice(value, currency) {
+    const originalPrice = String(value);
+    return currency && originalPrice.startsWith(currency) ? originalPrice : `${currency}${originalPrice}`;
+}
+function Price({ value, currency = '¥', prefix, suffix, description, originalPrice, tone = 'default', loading = false, className, style }) {
+    const themedClassName = useThemeClassName(className);
+    const { integer, decimal } = splitPriceValue(value);
+    return <view className={clsx('doubao-price', `doubao-price--tone-${tone}`, {
+        'doubao-price--loading': loading
+    }, themedClassName)} style={style}>
+      {loading ? <view className="doubao-price__placeholder"/> : <>
+          <view className="doubao-price__amount">
+            {prefix ? <view className="doubao-price__affix">
+                <text className="doubao-price__prefix">{prefix}</text>
+              </view> : null}
+
+            <view className="doubao-price__main">
+              <view className="doubao-price__integer-group">
+                {currency ? <text className="doubao-price__currency">{currency}</text> : null}
+                <text className="doubao-price__integer">{integer}</text>
+              </view>
+              {decimal ? <view className="doubao-price__decimal-group">
+                  <text className="doubao-price__decimal">{decimal}</text>
+                </view> : null}
+            </view>
+
+            {suffix ? <view className="doubao-price__affix">
+                <text className="doubao-price__suffix">{suffix}</text>
+              </view> : null}
+          </view>
+
+          {void 0 !== originalPrice || description ? <view className="doubao-price__meta">
+              {void 0 !== originalPrice ? <text className="doubao-price__original-price">
+                  {formatOriginalPrice(originalPrice, currency)}
+                </text> : null}
+              {description ? <text className="doubao-price__description">{description}</text> : null}
+            </view> : null}
+        </>}
+    </view>;
+}
+export { Price };

package/dist/primitives/price/styles.css

@@ -0,0 +1,130 @@
+.doubao-price {
+  height: 22px;
+  color: var(--neutral-100);
+  white-space: nowrap;
+  flex-direction: row;
+  align-items: flex-end;
+  gap: 4px;
+  font-family: PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+  font-style: normal;
+  display: flex;
+}
+
+.doubao-price--tone-highlight .doubao-price__prefix, .doubao-price--tone-highlight .doubao-price__currency, .doubao-price--tone-highlight .doubao-price__integer, .doubao-price--tone-highlight .doubao-price__decimal, .doubao-price--tone-highlight .doubao-price__suffix {
+  color: #ff375f;
+}
+
+.doubao-price--loading {
+  align-items: center;
+  width: 100%;
+}
+
+.doubao-price__amount {
+  flex-direction: row;
+  flex-shrink: 0;
+  align-items: flex-end;
+  gap: 2px;
+  height: 22px;
+  display: flex;
+}
+
+.doubao-price__affix, .doubao-price__meta {
+  flex-direction: row;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 4px;
+  height: 19px;
+  display: flex;
+}
+
+.doubao-price__main {
+  flex-direction: row;
+  flex-shrink: 0;
+  align-items: flex-end;
+  height: 22px;
+  display: flex;
+}
+
+.doubao-price__integer-group {
+  flex-direction: row;
+  flex-shrink: 0;
+  align-items: center;
+  height: 22px;
+  display: flex;
+}
+
+.doubao-price__decimal-group {
+  flex-shrink: 0;
+  align-items: center;
+  height: 21px;
+  display: flex;
+}
+
+.doubao-price__prefix, .doubao-price__currency, .doubao-price__integer, .doubao-price__decimal, .doubao-price__suffix, .doubao-price__description, .doubao-price__original-price {
+  color: var(--neutral-100);
+  letter-spacing: 0;
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-family: PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+  font-style: normal;
+  display: block;
+}
+
+.doubao-price__prefix {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 11px;
+}
+
+.doubao-price__currency {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 11px;
+}
+
+.doubao-price__integer {
+  font-size: 17px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.doubao-price__decimal {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 11px;
+}
+
+.doubao-price__suffix, .doubao-price__description, .doubao-price__original-price {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 11px;
+}
+
+.doubao-price__description, .doubao-price__original-price {
+  color: var(--neutral-70);
+}
+
+.doubao-price__original-price {
+  text-decoration: line-through;
+}
+
+.doubao-price__placeholder {
+  background-image: linear-gradient(90deg, #f7f7f7 0%, #e6e6e6 30%, #f7f7f7 100%);
+  background-size: 200% 100%;
+  border-radius: 4px;
+  width: 100%;
+  max-width: 60%;
+  height: 16px;
+  animation: 1.4s ease-in-out infinite doubao-price-placeholder-shimmer;
+}
+
+@keyframes doubao-price-placeholder-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: -100% 0;
+  }
+}
+

package/dist/primitives/price/types.d.ts

@@ -0,0 +1,26 @@
+import type { CSSProperties } from '@lynx-js/types';
+export type PriceValue = string | number;
+export type PriceTone = 'default' | 'highlight';
+export interface PriceProps {
+    /** 价格值。传入字符串时会保留前导零和末尾小数位。 */
+    value: PriceValue;
+    /** 币种符号。@defaultValue '¥' */
+    currency?: string;
+    /** 价格前缀，例如“均”“起”。 */
+    prefix?: string;
+    /** 价格后缀，例如“券后价”“/10斤”。 */
+    suffix?: string;
+    /** 价格后的辅助说明，例如“销量100+”。 */
+    description?: string;
+    /** 原价。传入后会在辅助信息区域以删除线展示。 */
+    originalPrice?: PriceValue;
+    /** 价格色调。highlight 对应营销强调色。@defaultValue 'default' */
+    tone?: PriceTone;
+    /** 是否展示价格占位骨架。@defaultValue false */
+    loading?: boolean;
+    /** 组件类名。 */
+    className?: string;
+    /** 组件样式。 */
+    style?: CSSProperties;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/primitives/tag/index.d.ts

@@ -0,0 +1,5 @@
+import type { TagProps } from './types.js';
+import './styles.scss';
+export type { TagProps, TagTone, TagValue } from './types.js';
+export declare function Tag({ text, tone, className, style }: TagProps): any;
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/tag/index.js

@@ -0,0 +1,10 @@
+import { useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import "./styles.css";
+function Tag({ text: text1, tone = 'authority', className, style }) {
+    const themedClassName = useThemeClassName(className);
+    return <view className={clsx('doubao-tag', `doubao-tag--tone-${tone}`, themedClassName)} style={style}>
+      <text className="doubao-tag__text">{text1}</text>
+    </view>;
+}
+export { Tag };

package/dist/primitives/tag/styles.css

@@ -0,0 +1,70 @@
+.doubao-tag {
+  box-sizing: border-box;
+  border-radius: 4px;
+  flex-shrink: 0;
+  align-items: center;
+  height: 20px;
+  padding: 2px 3px;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-tag__text {
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-family: PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 14px;
+  display: block;
+}
+
+.doubao-tag--tone-marketing {
+  background-color: #fff3ee;
+}
+
+.doubao-tag--tone-marketing .doubao-tag__text {
+  color: #ff375f;
+}
+
+.doubao-tag--tone-authority {
+  background-color: #fff8e7;
+}
+
+.doubao-tag--tone-authority .doubao-tag__text {
+  color: #814300;
+}
+
+.doubao-tag--tone-neutral {
+  background-color: #f7f7f7;
+}
+
+.doubao-tag--tone-neutral .doubao-tag__text {
+  color: #666;
+}
+
+.doubao-tag.doubao-theme-dark.doubao-tag--tone-marketing {
+  background-color: #3f2b27;
+}
+
+.doubao-tag.doubao-theme-dark.doubao-tag--tone-marketing .doubao-tag__text {
+  color: #ff5c7c;
+}
+
+.doubao-tag.doubao-theme-dark.doubao-tag--tone-authority {
+  background-color: #3a3324;
+}
+
+.doubao-tag.doubao-theme-dark.doubao-tag--tone-authority .doubao-tag__text {
+  color: #e2a45c;
+}
+
+.doubao-tag.doubao-theme-dark.doubao-tag--tone-neutral {
+  background-color: #252525;
+}
+
+.doubao-tag.doubao-theme-dark.doubao-tag--tone-neutral .doubao-tag__text {
+  color: #bababa;
+}
+

package/dist/primitives/tag/types.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties } from '@lynx-js/types';
+export type TagValue = string | number;
+export type TagTone = 'marketing' | 'authority' | 'neutral';
+export interface TagProps {
+    /** 标签内容。 */
+    text: TagValue;
+    /** 标签色调。@defaultValue 'authority' */
+    tone?: TagTone;
+    /** 组件类名。 */
+    className?: string;
+    /** 组件样式。 */
+    style?: CSSProperties;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/primitives/title/index.d.ts

@@ -0,0 +1,5 @@
+import type { TitleProps } from './types.js';
+import './styles.scss';
+export type { TitleMaxLines, TitleProps, TitleValue } from './types.js';
+export declare function Title({ text, maxLines, showArrow, loading, className, style }: TitleProps): any;
+//# sourceMappingURL=index.d.ts.map