@q1travel/design-system 0.18.0 → 0.19.0

package/contracts/design.dark.md

@@ -448,7 +448,9 @@ These components ship in the package. Compose from this list before writing new
 - Tabs switch between peer views of the same subject. They are not a way to shorten a page.
 - ContextSwitcher is the two-level selection model; the consumer owns the state behind it.
 
-**Identity and media.** Avatar, AvatarGroup, Book, Browser, BrowserDots, BrowserControls, BrowserAddress, BrowserTabs, BrowserPlaceholder, Phone, Video, ThemeSwitcher.
+**Identity and media.** Avatar, AvatarGroup, Book, Browser, BrowserDots, BrowserControls, BrowserAddress, BrowserTabs, BrowserPlaceholder, Phone, Video, ThemeSwitcher, ProductLockup, Q1travelSymbol.
+
+- ProductLockup combines a product icon, product name, and brand endorsement into one identity mark. The endorsement is smaller and uses secondary text color.
 
 **Text utilities.** Code, CodeInline, CodeTokens, CodeBlock, Snippet, Kbd, MiddleTruncate, TextWithCopyButton.
 

package/contracts/design.md

@@ -448,7 +448,9 @@ These components ship in the package. Compose from this list before writing new
 - Tabs switch between peer views of the same subject. They are not a way to shorten a page.
 - ContextSwitcher is the two-level selection model; the consumer owns the state behind it.
 
-**Identity and media.** Avatar, AvatarGroup, Book, Browser, BrowserDots, BrowserControls, BrowserAddress, BrowserTabs, BrowserPlaceholder, Phone, Video, ThemeSwitcher.
+**Identity and media.** Avatar, AvatarGroup, Book, Browser, BrowserDots, BrowserControls, BrowserAddress, BrowserTabs, BrowserPlaceholder, Phone, Video, ThemeSwitcher, ProductLockup, Q1travelSymbol.
+
+- ProductLockup combines a product icon, product name, and brand endorsement into one identity mark. The endorsement is smaller and uses secondary text color.
 
 **Text utilities.** Code, CodeInline, CodeTokens, CodeBlock, Snippet, Kbd, MiddleTruncate, TextWithCopyButton.
 

package/dist-pkg/design-system.d.ts

@@ -16,6 +16,7 @@ import { Ref } from 'react';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { SelectHTMLAttributes } from 'react';
+import { SVGProps } from 'react';
 import { TableHTMLAttributes } from 'react';
 import { TextareaHTMLAttributes } from 'react';
 
@@ -1380,6 +1381,20 @@ export declare type PillProps = {
 
 export declare type PopoverLayout = 'vertical' | 'horizontal';
 
+export declare function ProductLockup({ name, icon, endorsement, size, className, 'aria-label': ariaLabel, ...rest }: ProductLockupProps): JSX.Element;
+
+export declare type ProductLockupProps = {
+    /** 产品名称，以文字渲染，随主题承色。 */
+    name: string;
+    /** 产品图标，视为装饰，不参与朗读。默认为品牌符号。 */
+    icon?: ReactNode;
+    /** 背书文字。 */
+    endorsement?: string;
+    size?: ProductLockupSize;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'role'>;
+
+export declare type ProductLockupSize = 'sm' | 'md';
+
 export declare function Progress({ value, max, tone, slim, stops, label, }: {
     value: number;
     max?: number;
@@ -1414,6 +1429,8 @@ export declare type ProjectBannerProps = {
     action: ProjectBannerAction;
 };
 
+export declare function Q1travelSymbol(props: SVGProps<SVGSVGElement>): JSX.Element;
+
 export declare function Radio({ ...props }: RadioProps): JSX.Element;
 
 /** Radio 的完整 props。 */