@ptengine/design-components 0.3.0

package/src/components/ui/attachment.tsx

@@ -0,0 +1,186 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+import { Button } from './button';
+
+const attachmentVariants = cva(
+    'group/attachment relative isolate flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-[var(--pt-radius)] border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[rgb(var(--pt-interaction-hover))] after:opacity-0 after:transition-opacity has-[>a,>button]:hover:after:opacity-100 has-[>a,>button]:active:after:bg-[rgb(var(--pt-interaction-press))] has-[>a,>button]:active:after:opacity-100',
+    {
+        variants: {
+            size: {
+                default:
+                    'gap-[8px] text-[14px] leading-[20px] has-[[data-slot=attachment-content]]:px-[10px] has-[[data-slot=attachment-content]]:py-[8px] has-[[data-slot=attachment-media]]:p-[8px]',
+                sm: 'gap-[10px] text-[13px] leading-[20px] has-[[data-slot=attachment-content]]:px-[8px] has-[[data-slot=attachment-content]]:py-[6px] has-[[data-slot=attachment-media]]:p-[6px]',
+                xs: 'gap-[6px] rounded-[var(--pt-radius-md)] text-[13px] leading-[20px] has-[[data-slot=attachment-content]]:px-[6px] has-[[data-slot=attachment-content]]:py-[4px] has-[[data-slot=attachment-media]]:p-[4px]'
+            },
+            orientation: {
+                horizontal: 'min-w-[160px] items-center',
+                vertical: 'w-[96px] flex-col has-[[data-slot=attachment-content]]:w-[7.5rem]'
+            }
+        }
+    }
+);
+
+function Attachment({
+    className,
+    state = 'done',
+    size = 'default',
+    orientation = 'horizontal',
+    ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+    VariantProps<typeof attachmentVariants> & {
+        state?: 'idle' | 'uploading' | 'processing' | 'error' | 'done';
+    }) {
+    return (
+        <div
+            data-slot="attachment"
+            data-state={state}
+            data-size={size}
+            data-orientation={orientation}
+            className={cn(attachmentVariants({ size, orientation }), className)}
+            {...props}
+        />
+    );
+}
+
+const attachmentMediaVariants = cva(
+    "relative flex aspect-square w-[40px] shrink-0 items-center justify-center overflow-hidden rounded-[var(--pt-radius-md)] bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-[32px] group-data-[size=xs]/attachment:w-[28px] group-data-[size=xs]/attachment:rounded-[var(--pt-radius-sm)] group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:[&>[data-slot=spinner]]:!size-[24px] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-[16px] group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-[24px] group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-[14px]",
+    {
+        variants: {
+            variant: {
+                icon: '',
+                image: 'opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 [&>img]:aspect-square [&>img]:w-full [&>img]:object-cover'
+            }
+        },
+        defaultVariants: {
+            variant: 'icon'
+        }
+    }
+);
+
+function AttachmentMedia({
+    className,
+    variant = 'icon',
+    ...props
+}: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof attachmentMediaVariants>) {
+    return (
+        <div
+            data-slot="attachment-media"
+            data-variant={variant}
+            className={cn(attachmentMediaVariants({ variant }), className)}
+            {...props}
+        />
+    );
+}
+
+function AttachmentContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            data-slot="attachment-content"
+            className={cn(
+                'max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-[4px]',
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function AttachmentTitle({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+    return (
+        <span
+            data-slot="attachment-title"
+            className={cn(
+                'block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:animate-pulse group-data-[state=uploading]/attachment:animate-pulse',
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function AttachmentDescription({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+    return (
+        <span
+            data-slot="attachment-description"
+            className={cn(
+                'mt-[2px] block max-w-full min-w-0 truncate text-[13px] leading-[20px] text-muted-foreground group-data-[state=error]/attachment:text-destructive/80',
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function AttachmentActions({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            data-slot="attachment-actions"
+            className={cn(
+                'relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:right-[12px] group-data-[orientation=vertical]/attachment:top-[12px] group-data-[orientation=vertical]/attachment:gap-[4px]',
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function AttachmentAction({ className, variant, size, ...props }: React.ComponentProps<typeof Button>) {
+    return (
+        <Button
+            data-slot="attachment-action"
+            variant={variant ?? 'ghost'}
+            size={size ?? 'icon'}
+            className={cn('h-[24px] w-[24px] rounded-[var(--pt-radius-sm)] [&_svg]:size-[14px]', className)}
+            {...props}
+        />
+    );
+}
+
+function AttachmentTrigger({
+    className,
+    asChild = false,
+    type,
+    ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Render the child element as the root (e.g. an <a>), keeping the hit area. */
+    asChild?: boolean;
+}) {
+    const Comp = asChild ? Slot : 'button';
+
+    return (
+        <Comp
+            data-slot="attachment-trigger"
+            type={asChild ? undefined : (type ?? 'button')}
+            className={cn('absolute inset-0 z-10 cursor-pointer outline-none', className)}
+            {...props}
+        />
+    );
+}
+
+function AttachmentGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            data-slot="attachment-group"
+            className={cn(
+                'flex min-w-0 snap-x snap-mandatory scroll-px-[4px] gap-[12px] overflow-x-auto overscroll-x-contain py-[4px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&>[data-slot=attachment]]:flex-none [&>[data-slot=attachment]]:snap-start',
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+export {
+    Attachment,
+    AttachmentGroup,
+    AttachmentMedia,
+    AttachmentContent,
+    AttachmentTitle,
+    AttachmentDescription,
+    AttachmentActions,
+    AttachmentAction,
+    AttachmentTrigger
+};

package/src/components/ui/avatar.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+/* 头像三档:sm 24(字12)· md 32(字13)· lg 40(字14,默认)。字号作用于 Fallback 首字母 */
+const avatarVariants = cva('relative flex shrink-0 overflow-hidden rounded-full', {
+    variants: {
+        size: {
+            sm: 'h-[24px] w-[24px] text-[12px] leading-[16px]',
+            md: 'h-[32px] w-[32px] text-[13px] leading-[20px]',
+            lg: 'h-[40px] w-[40px] text-[14px] leading-[20px]'
+        }
+    },
+    defaultVariants: {
+        size: 'lg'
+    }
+});
+
+const Avatar = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> &
+        VariantProps<typeof avatarVariants>
+>(({ className, size, ...props }, ref) => (
+    <AvatarPrimitive.Root ref={ref} className={cn(avatarVariants({ size }), className)} {...props} />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Image>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Image
+        ref={ref}
+        className={cn('aspect-square h-full w-full', className)}
+        {...props}
+    />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Fallback>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Fallback
+        ref={ref}
+        className={cn(
+            'flex h-full w-full items-center justify-center rounded-full bg-secondary text-foreground',
+            className
+        )}
+        {...props}
+    />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/components/ui/badge.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const badgeVariants = cva(
+    'inline-flex items-center rounded-full border px-[10px] py-[2px] text-[13px] leading-[20px] font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [--pt-state-layer-border:1px] [&:is(a,button)]:cursor-pointer',
+    {
+        variants: {
+            variant: {
+                default:
+                    'border-transparent bg-primary text-primary-foreground [&:is(a,button)]:state-layer-inverse',
+                secondary:
+                    'border-transparent bg-neutral-subtler text-neutral [&:is(a,button)]:state-layer',
+                destructive:
+                    'border-transparent bg-danger-subtler text-danger [&:is(a,button)]:state-layer',
+                success:
+                    'border-transparent bg-positive-subtler text-success [&:is(a,button)]:state-layer',
+                warning:
+                    'border-transparent bg-warning-subtler text-warning [&:is(a,button)]:state-layer',
+                information:
+                    'border-transparent bg-information-subtler text-information [&:is(a,button)]:state-layer',
+                ai: 'border-transparent bg-ai-subtler text-ai [&:is(a,button)]:state-layer'
+            }
+        },
+        defaultVariants: {
+            variant: 'default'
+        }
+    }
+);
+
+export interface BadgeProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+    return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const Breadcrumb = React.forwardRef<
+    HTMLElement,
+    React.ComponentPropsWithoutRef<'nav'> & { separator?: React.ReactNode }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = 'Breadcrumb';
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(
+    ({ className, ...props }, ref) => (
+        <ol
+            ref={ref}
+            className={cn(
+                'flex flex-wrap items-center gap-[6px] break-words text-[14px] leading-[20px] text-muted-foreground sm:gap-[10px]',
+                className
+            )}
+            {...props}
+        />
+    )
+);
+BreadcrumbList.displayName = 'BreadcrumbList';
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(
+    ({ className, ...props }, ref) => (
+        <li ref={ref} className={cn('inline-flex items-center gap-[6px]', className)} {...props} />
+    )
+);
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+const BreadcrumbLink = React.forwardRef<
+    HTMLAnchorElement,
+    React.ComponentPropsWithoutRef<'a'> & { asChild?: boolean }
+>(({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'a';
+    return (
+        <Comp
+            ref={ref}
+            className={cn('transition-colors hover:text-foreground', className)}
+            {...props}
+        />
+    );
+});
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(
+    ({ className, ...props }, ref) => (
+        <span
+            ref={ref}
+            role="link"
+            aria-disabled="true"
+            aria-current="page"
+            className={cn('font-normal text-foreground', className)}
+            {...props}
+        />
+    )
+);
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'li'>) => (
+    <li
+        role="presentation"
+        aria-hidden="true"
+        className={cn('[&>svg]:size-[14px]', className)}
+        {...props}
+    >
+        {children ?? <ChevronRight />}
+    </li>
+);
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+/* label:读屏文案,库不做 i18n,消费方传译文(默认英文) */
+const BreadcrumbEllipsis = ({
+    className,
+    label = 'More',
+    ...props
+}: React.ComponentProps<'span'> & { label?: string }) => (
+    <span
+        role="presentation"
+        aria-hidden="true"
+        className={cn('flex h-[32px] w-[36px] items-center justify-center', className)}
+        {...props}
+    >
+        <MoreHorizontal className="h-[16px] w-[16px]" />
+        <span className="sr-only">{label}</span>
+    </span>
+);
+BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';
+
+export {
+    Breadcrumb,
+    BreadcrumbList,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+    BreadcrumbEllipsis
+};

package/src/components/ui/bubble.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+function BubbleGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            data-slot="bubble-group"
+            className={cn('flex min-w-0 flex-col gap-[8px]', className)}
+            {...props}
+        />
+    );
+}
+
+const bubbleVariants = cva(
+    'group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-[4px] group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full',
+    {
+        variants: {
+            variant: {
+                default:
+                    '[&>[data-slot=bubble-content]]:bg-primary [&>[data-slot=bubble-content]]:text-primary-foreground [&>[data-slot=bubble-content]]:[--pt-interaction-hover:var(--pt-interaction-reversal-hover)] [&>[data-slot=bubble-content]]:[--pt-interaction-press:var(--pt-interaction-reversal-press)]',
+                secondary:
+                    '[&>[data-slot=bubble-content]]:bg-secondary [&>[data-slot=bubble-content]]:text-secondary-foreground',
+                muted: '[&>[data-slot=bubble-content]]:bg-muted',
+                outline:
+                    '[&>[data-slot=bubble-content]]:border-input [&>[data-slot=bubble-content]]:bg-background [&>[data-slot=bubble-content]]:[--pt-state-layer-border:1px]',
+                ghost: 'border-none [&>[data-slot=bubble-content]]:rounded-none [&>[data-slot=bubble-content]]:bg-transparent [&>[data-slot=bubble-content]]:p-0',
+                destructive:
+                    '[&>[data-slot=bubble-content]]:bg-destructive/10 [&>[data-slot=bubble-content]]:text-destructive dark:[&>[data-slot=bubble-content]]:bg-destructive/20'
+            }
+        },
+        defaultVariants: {
+            variant: 'default'
+        }
+    }
+);
+
+function Bubble({
+    variant = 'default',
+    align = 'start',
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+    VariantProps<typeof bubbleVariants> & {
+        align?: 'start' | 'end';
+    }) {
+    return (
+        <div
+            data-slot="bubble"
+            data-variant={variant}
+            data-align={align}
+            className={cn(bubbleVariants({ variant }), className)}
+            {...props}
+        />
+    );
+}
+
+function BubbleContent({
+    asChild = false,
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+    /** Render the child element as the root (e.g. a <button>), keeping Bubble styles. */
+    asChild?: boolean;
+}) {
+    const Comp = asChild ? Slot : 'div';
+
+    return (
+        <Comp
+            data-slot="bubble-content"
+            className={cn(
+                'w-fit max-w-full min-w-0 overflow-hidden break-words rounded-[var(--pt-radius)] border border-transparent px-[12px] py-[8px] text-[14px] leading-[20px] leading-relaxed group-data-[align=end]/bubble:self-end',
+                '[&:is(button,a)]:state-layer [&:is(button)]:text-left [&:is(button,a)]:cursor-pointer [&:is(button,a)]:focus-visible:outline-none [&:is(button,a)]:focus-visible:ring-1 [&:is(button,a)]:focus-visible:ring-ring',
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+const bubbleReactionsVariants = cva(
+    'absolute z-10 flex w-fit shrink-0 items-center justify-center gap-[4px] rounded-full bg-muted px-[6px] py-[2px] text-[14px] leading-[20px] ring ring-card has-[button]:p-0',
+    {
+        variants: {
+            side: {
+                top: 'top-0 -translate-y-3/4',
+                bottom: 'bottom-0 translate-y-3/4'
+            },
+            align: {
+                start: 'left-[12px]',
+                end: 'right-[12px]'
+            }
+        },
+        defaultVariants: {
+            side: 'bottom',
+            align: 'end'
+        }
+    }
+);
+
+function BubbleReactions({
+    side = 'bottom',
+    align = 'end',
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+    align?: 'start' | 'end';
+    side?: 'top' | 'bottom';
+}) {
+    return (
+        <div
+            data-slot="bubble-reactions"
+            data-align={align}
+            data-side={side}
+            className={cn(bubbleReactionsVariants({ side, align }), className)}
+            {...props}
+        />
+    );
+}
+
+export { BubbleGroup, Bubble, BubbleContent, BubbleReactions };

package/src/components/ui/button-group.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+import { Separator } from './separator';
+
+const buttonGroupVariants = cva(
+    "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-[8px] [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+    {
+        variants: {
+            orientation: {
+                horizontal:
+                    '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:after:left-0',
+                vertical:
+                    'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>*:not(:first-child)]:after:top-0'
+            }
+        },
+        defaultVariants: {
+            orientation: 'horizontal'
+        }
+    }
+);
+
+function ButtonGroup({
+    className,
+    orientation,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof buttonGroupVariants>) {
+    return (
+        <div
+            role="group"
+            data-slot="button-group"
+            data-orientation={orientation}
+            className={cn(buttonGroupVariants({ orientation }), className)}
+            {...props}
+        />
+    );
+}
+
+function ButtonGroupText({
+    className,
+    asChild = false,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement> & { asChild?: boolean }) {
+    const Comp = asChild ? Slot : 'div';
+    return (
+        <Comp
+            data-slot="button-group-text"
+            className={cn(
+                "flex items-center gap-[8px] rounded-[var(--pt-radius-md)] border bg-muted px-[16px] text-[14px] leading-[20px] font-medium text-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-[16px]",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function ButtonGroupSeparator({
+    className,
+    orientation = 'vertical',
+    ...props
+}: React.ComponentProps<typeof Separator>) {
+    return (
+        <Separator
+            data-slot="button-group-separator"
+            orientation={orientation}
+            className={cn('relative !m-0 self-stretch bg-input data-[orientation=vertical]:h-auto', className)}
+            {...props}
+        />
+    );
+}
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/src/components/ui/button.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+    'inline-flex items-center justify-center gap-[8px] whitespace-nowrap rounded-[var(--pt-radius-md)] text-[14px] leading-[20px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-[16px] [&_svg]:shrink-0',
+    {
+        variants: {
+            variant: {
+                default: 'state-layer-inverse bg-primary text-primary-foreground',
+                brand: 'state-layer bg-brand text-brand-foreground',
+                secondary:
+                    'state-layer border border-input bg-background text-foreground [--pt-state-layer-border:1px]',
+                tertiary: 'state-layer bg-secondary text-secondary-foreground',
+                destructive: 'state-layer bg-destructive text-destructive-foreground',
+                ghost: 'state-layer text-foreground',
+                /* 静默警示钮:常态同 ghost/secondary,hover/按下 内容变 --pt-red(删除等场景) */
+                'ghost-destructive':
+                    'state-layer text-foreground hover:text-[rgb(var(--pt-red))] active:text-[rgb(var(--pt-red))]',
+                'secondary-destructive':
+                    'state-layer border border-input bg-background text-foreground [--pt-state-layer-border:1px] hover:text-[rgb(var(--pt-red))] active:text-[rgb(var(--pt-red))]',
+                link: 'text-primary underline-offset-4 hover:underline'
+            },
+            /* 控件三档刻度:sm 24(字12/图16)· default 32(字13/图16)· lg 40(字14/图20);语义图标 16/16/20 */
+            size: {
+                sm: 'h-[24px] gap-[4px] rounded-[var(--pt-radius-sm)] px-[8px] text-[12px] leading-[16px]',
+                default: 'h-[32px] rounded-[var(--pt-radius-md)] px-[12px] text-[13px] leading-[20px]',
+                lg: 'h-[40px] rounded-[var(--pt-radius-md)] px-[16px] text-[14px] leading-[20px] [&_svg]:size-[20px]',
+                'icon-sm': 'h-[24px] w-[24px] rounded-[var(--pt-radius-sm)]',
+                icon: 'h-[32px] w-[32px]',
+                'icon-lg': 'h-[40px] w-[40px] [&_svg]:size-[20px]'
+            }
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default'
+        }
+    }
+);
+
+export interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+        VariantProps<typeof buttonVariants> {
+    /** Render the child element as the root (e.g. an <a>), keeping Button styles. */
+    asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
+        const Comp = asChild ? Slot : 'button';
+        return (
+            <Comp
+                className={cn(buttonVariants({ variant, size, className }))}
+                ref={ref}
+                {...props}
+            />
+        );
+    }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };