@ptengine/design-components 0.6.0 → 0.7.0

package/src/components/ui/alert-dialog.tsx

@@ -16,8 +16,10 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <AlertDialogPrimitive.Overlay
         ref={ref}
+        /* 稳定钩子，供消费方测试查询遮罩层；勿改名。 */
+        data-slot="alert-dialog-overlay"
         className={cn(
-            'fixed inset-0 z-[var(--pt-z-overlay,50)] bg-[rgb(var(--pt-black)/0.8)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'ptx-fixed ptx-inset-0 ptx-z-[var(--pt-z-overlay,50)] ptx-bg-[rgb(var(--pt-black)/0.8)] data-[state=open]:ptx-animate-in data-[state=closed]:ptx-animate-out data-[state=closed]:ptx-fade-out-0 data-[state=open]:ptx-fade-in-0',
             className
         )}
         {...props}
@@ -34,7 +36,7 @@ const AlertDialogContent = React.forwardRef<
         <AlertDialogPrimitive.Content
             ref={ref}
             className={cn(
-                'fixed left-[50%] top-[50%] z-[var(--pt-z-overlay,50)] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-[16px] border bg-background p-[24px] shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-[var(--pt-radius)]',
+                'ptx-fixed ptx-left-[50%] ptx-top-[50%] ptx-z-[var(--pt-z-overlay,50)] ptx-grid ptx-w-full ptx-max-w-lg ptx-translate-x-[-50%] ptx-translate-y-[-50%] ptx-gap-[16px] ptx-border ptx-bg-background ptx-p-[24px] ptx-shadow-lg ptx-duration-200 data-[state=open]:ptx-animate-in data-[state=closed]:ptx-animate-out data-[state=closed]:ptx-fade-out-0 data-[state=open]:ptx-fade-in-0 data-[state=closed]:ptx-zoom-out-95 data-[state=open]:ptx-zoom-in-95 data-[state=closed]:ptx-slide-out-to-left-1/2 data-[state=closed]:ptx-slide-out-to-top-[48%] data-[state=open]:ptx-slide-in-from-left-1/2 data-[state=open]:ptx-slide-in-from-top-[48%] sm:ptx-rounded-[var(--pt-radius)]',
                 className
             )}
             {...props}
@@ -44,13 +46,13 @@ const AlertDialogContent = React.forwardRef<
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div className={cn('flex flex-col space-y-[8px] text-center sm:text-left', className)} {...props} />
+    <div className={cn('ptx-flex ptx-flex-col ptx-space-y-[8px] ptx-text-center sm:ptx-text-left', className)} {...props} />
 );
 AlertDialogHeader.displayName = 'AlertDialogHeader';
 
 const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
     <div
-        className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-[8px]', className)}
+        className={cn('ptx-flex ptx-flex-col-reverse sm:ptx-flex-row sm:ptx-justify-end sm:ptx-space-x-[8px]', className)}
         {...props}
     />
 );
@@ -62,7 +64,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <AlertDialogPrimitive.Title
         ref={ref}
-        className={cn('text-lg font-semibold text-foreground', className)}
+        className={cn('ptx-text-lg ptx-font-semibold ptx-text-foreground', className)}
         {...props}
     />
 ));
@@ -74,7 +76,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <AlertDialogPrimitive.Description
         ref={ref}
-        className={cn('text-sm text-muted-foreground', className)}
+        className={cn('ptx-text-sm ptx-text-muted-foreground', className)}
         {...props}
     />
 ));
@@ -94,7 +96,7 @@ const AlertDialogCancel = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <AlertDialogPrimitive.Cancel
         ref={ref}
-        className={cn(buttonVariants({ variant: 'secondary' }), 'mt-[8px] sm:mt-0', className)}
+        className={cn(buttonVariants({ variant: 'secondary' }), 'ptx-mt-[8px] sm:ptx-mt-0', className)}
         {...props}
     />
 ));

package/src/components/ui/alert.tsx

@@ -4,12 +4,12 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
 
 const alertVariants = cva(
-    'relative w-full rounded-[var(--pt-radius)] border px-[16px] py-[12px] text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-[16px] [&>svg]:top-[16px] [&>svg]:size-[16px] [&>svg~*]:pl-[28px]',
+    'ptx-relative ptx-w-full ptx-rounded-[var(--pt-radius)] ptx-border ptx-px-[16px] ptx-py-[12px] ptx-text-sm [&>svg+div]:ptx-translate-y-[-3px] [&>svg]:ptx-absolute [&>svg]:ptx-left-[16px] [&>svg]:ptx-top-[16px] [&>svg]:ptx-size-[16px] [&>svg~*]:ptx-pl-[28px]',
     {
         variants: {
             variant: {
-                default: 'bg-background text-foreground [&>svg]:text-foreground',
-                destructive: 'border-destructive/50 text-destructive [&>svg]:text-destructive'
+                default: 'ptx-bg-background ptx-text-foreground [&>svg]:ptx-text-foreground',
+                destructive: 'ptx-border-destructive/50 ptx-text-destructive [&>svg]:ptx-text-destructive'
             }
         },
         defaultVariants: {
@@ -30,7 +30,7 @@ const AlertTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTM
     ({ className, ...props }, ref) => (
         <h5
             ref={ref}
-            className={cn('mb-[4px] font-medium leading-none tracking-tight', className)}
+            className={cn('ptx-mb-[4px] ptx-font-medium ptx-leading-none ptx-tracking-tight', className)}
             {...props}
         />
     )
@@ -41,7 +41,7 @@ const AlertDescription = React.forwardRef<
     HTMLParagraphElement,
     React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+    <div ref={ref} className={cn('ptx-text-sm [&_p]:ptx-leading-relaxed', className)} {...props} />
 ));
 AlertDescription.displayName = 'AlertDescription';
 

package/src/components/ui/attachment.tsx

@@ -6,18 +6,18 @@ 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',
+    'group/attachment ptx-relative ptx-isolate ptx-flex ptx-w-fit ptx-max-w-full ptx-min-w-0 ptx-shrink-0 ptx-flex-wrap ptx-rounded-[var(--pt-radius)] ptx-border ptx-bg-card ptx-text-card-foreground ptx-transition-colors focus-within:ptx-ring-1 focus-within:ptx-ring-ring data-[state=error]:ptx-border-destructive/30 data-[state=idle]:ptx-border-dashed after:ptx-pointer-events-none after:ptx-absolute after:ptx-inset-0 after:ptx-rounded-[inherit] after:ptx-bg-[rgb(var(--pt-interaction-hover))] after:ptx-opacity-0 after:ptx-transition-opacity has-[>a,>button]:hover:after:ptx-opacity-100 has-[>a,>button]:active:after:ptx-bg-[rgb(var(--pt-interaction-press))] has-[>a,>button]:active:after:ptx-opacity-100',
     {
         variants: {
             size: {
                 default:
-                    'gap-[8px] text-sm 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-xs 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-xs has-[[data-slot=attachment-content]]:px-[6px] has-[[data-slot=attachment-content]]:py-[4px] has-[[data-slot=attachment-media]]:p-[4px]'
+                    'ptx-gap-[8px] ptx-text-sm has-[[data-slot=attachment-content]]:ptx-px-[10px] has-[[data-slot=attachment-content]]:ptx-py-[8px] has-[[data-slot=attachment-media]]:ptx-p-[8px]',
+                sm: 'ptx-gap-[10px] ptx-text-xs has-[[data-slot=attachment-content]]:ptx-px-[8px] has-[[data-slot=attachment-content]]:ptx-py-[6px] has-[[data-slot=attachment-media]]:ptx-p-[6px]',
+                xs: 'ptx-gap-[6px] ptx-rounded-[var(--pt-radius-md)] ptx-text-xs has-[[data-slot=attachment-content]]:ptx-px-[6px] has-[[data-slot=attachment-content]]:ptx-py-[4px] has-[[data-slot=attachment-media]]:ptx-p-[4px]'
             },
             orientation: {
-                horizontal: 'min-w-[160px] items-center',
-                vertical: 'w-[96px] flex-col has-[[data-slot=attachment-content]]:w-[7.5rem]'
+                horizontal: 'ptx-min-w-[160px] ptx-items-center',
+                vertical: 'ptx-w-[96px] ptx-flex-col has-[[data-slot=attachment-content]]:ptx-w-[7.5rem]'
             }
         }
     }
@@ -46,12 +46,12 @@ function Attachment({
 }
 
 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]",
+    "ptx-relative ptx-flex ptx-aspect-square ptx-w-[40px] ptx-shrink-0 ptx-items-center ptx-justify-center ptx-overflow-hidden ptx-rounded-[var(--pt-radius-md)] ptx-bg-muted ptx-text-foreground group-data-[orientation=vertical]/attachment:ptx-w-full group-data-[size=sm]/attachment:ptx-w-[32px] group-data-[size=xs]/attachment:ptx-w-[28px] group-data-[size=xs]/attachment:ptx-rounded-[var(--pt-radius-sm)] group-data-[state=error]/attachment:ptx-bg-destructive/10 group-data-[state=error]/attachment:ptx-text-destructive group-data-[orientation=vertical]/attachment:[&>[data-slot=spinner]]:!ptx-size-[24px] [&_svg]:ptx-pointer-events-none [&_svg:not([class*='size-'])]:ptx-size-[16px] group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:ptx-size-[24px] group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:ptx-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'
+                image: 'ptx-opacity-60 group-data-[state=done]/attachment:ptx-opacity-100 group-data-[state=idle]/attachment:ptx-opacity-100 [&>img]:ptx-aspect-square [&>img]:ptx-w-full [&>img]:ptx-object-cover'
             }
         },
         defaultVariants: {
@@ -80,7 +80,7 @@ function AttachmentContent({ className, ...props }: React.HTMLAttributes<HTMLDiv
         <div
             data-slot="attachment-content"
             className={cn(
-                'max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-[4px]',
+                'ptx-max-w-full ptx-min-w-0 ptx-flex-1 ptx-leading-tight group-data-[orientation=vertical]/attachment:ptx-px-[4px]',
                 className
             )}
             {...props}
@@ -93,7 +93,7 @@ function AttachmentTitle({ className, ...props }: React.HTMLAttributes<HTMLSpanE
         <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',
+                'ptx-block ptx-max-w-full ptx-min-w-0 ptx-truncate ptx-font-medium group-data-[state=processing]/attachment:ptx-animate-pulse group-data-[state=uploading]/attachment:ptx-animate-pulse',
                 className
             )}
             {...props}
@@ -106,7 +106,7 @@ function AttachmentDescription({ className, ...props }: React.HTMLAttributes<HTM
         <span
             data-slot="attachment-description"
             className={cn(
-                'mt-[2px] block max-w-full min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80',
+                'ptx-mt-[2px] ptx-block ptx-max-w-full ptx-min-w-0 ptx-truncate ptx-text-xs ptx-text-muted-foreground group-data-[state=error]/attachment:ptx-text-destructive/80',
                 className
             )}
             {...props}
@@ -119,7 +119,7 @@ function AttachmentActions({ className, ...props }: React.HTMLAttributes<HTMLDiv
         <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]',
+                'ptx-relative ptx-z-20 ptx-flex ptx-shrink-0 ptx-items-center group-data-[orientation=vertical]/attachment:ptx-absolute group-data-[orientation=vertical]/attachment:ptx-right-[12px] group-data-[orientation=vertical]/attachment:ptx-top-[12px] group-data-[orientation=vertical]/attachment:ptx-gap-[4px]',
                 className
             )}
             {...props}
@@ -133,7 +133,7 @@ function AttachmentAction({ className, variant, size, ...props }: React.Componen
             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)}
+            className={cn('ptx-h-[24px] ptx-w-[24px] ptx-rounded-[var(--pt-radius-sm)] [&_svg]:ptx-size-[14px]', className)}
             {...props}
         />
     );
@@ -154,7 +154,7 @@ function AttachmentTrigger({
         <Comp
             data-slot="attachment-trigger"
             type={asChild ? undefined : (type ?? 'button')}
-            className={cn('absolute inset-0 z-10 cursor-pointer outline-none', className)}
+            className={cn('ptx-absolute ptx-inset-0 ptx-z-10 ptx-cursor-pointer ptx-outline-none', className)}
             {...props}
         />
     );
@@ -165,7 +165,7 @@ function AttachmentGroup({ className, ...props }: React.HTMLAttributes<HTMLDivEl
         <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',
+                'ptx-flex ptx-min-w-0 ptx-snap-x ptx-snap-mandatory ptx-scroll-px-[4px] ptx-gap-[12px] ptx-overflow-x-auto ptx-overscroll-x-contain ptx-py-[4px] [scrollbar-width:none] [&::-webkit-scrollbar]:ptx-hidden [&>[data-slot=attachment]]:ptx-flex-none [&>[data-slot=attachment]]:ptx-snap-start',
                 className
             )}
             {...props}

package/src/components/ui/avatar.tsx

@@ -5,12 +5,12 @@ 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', {
+const avatarVariants = cva('ptx-relative ptx-flex ptx-shrink-0 ptx-overflow-hidden ptx-rounded-full', {
     variants: {
         size: {
-            sm: 'h-[24px] w-[24px] text-2xs',
-            md: 'h-[32px] w-[32px] text-xs',
-            lg: 'h-[40px] w-[40px] text-sm'
+            sm: 'ptx-h-[24px] ptx-w-[24px] ptx-text-2xs',
+            md: 'ptx-h-[32px] ptx-w-[32px] ptx-text-xs',
+            lg: 'ptx-h-[40px] ptx-w-[40px] ptx-text-sm'
         }
     },
     defaultVariants: {
@@ -33,7 +33,7 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <AvatarPrimitive.Image
         ref={ref}
-        className={cn('aspect-square h-full w-full', className)}
+        className={cn('ptx-aspect-square ptx-h-full ptx-w-full', className)}
         {...props}
     />
 ));
@@ -46,7 +46,7 @@ const AvatarFallback = React.forwardRef<
     <AvatarPrimitive.Fallback
         ref={ref}
         className={cn(
-            'flex h-full w-full items-center justify-center rounded-full bg-secondary text-foreground',
+            'ptx-flex ptx-h-full ptx-w-full ptx-items-center ptx-justify-center ptx-rounded-full ptx-bg-secondary ptx-text-foreground',
             className
         )}
         {...props}

package/src/components/ui/badge.tsx

@@ -4,23 +4,23 @@ 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-xs 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',
+    'ptx-inline-flex ptx-items-center ptx-rounded-full ptx-border ptx-px-[10px] ptx-py-[2px] ptx-text-xs ptx-font-semibold ptx-transition-colors focus-visible:ptx-outline-none focus-visible:ptx-ring-2 focus-visible:ptx-ring-ring focus-visible:ptx-ring-offset-2 [--pt-state-layer-border:1px] [&:is(a,button)]:ptx-cursor-pointer',
     {
         variants: {
             variant: {
                 default:
-                    'border-transparent bg-primary text-primary-foreground [&:is(a,button)]:state-layer-inverse',
+                    'ptx-border-transparent ptx-bg-primary ptx-text-primary-foreground [&:is(a,button)]:ptx-state-layer-inverse',
                 secondary:
-                    'border-transparent bg-neutral-subtler text-neutral [&:is(a,button)]:state-layer',
+                    'ptx-border-transparent ptx-bg-neutral-subtler ptx-text-neutral [&:is(a,button)]:ptx-state-layer',
                 destructive:
-                    'border-transparent bg-danger-subtler text-danger [&:is(a,button)]:state-layer',
+                    'ptx-border-transparent ptx-bg-danger-subtler ptx-text-danger [&:is(a,button)]:ptx-state-layer',
                 success:
-                    'border-transparent bg-positive-subtler text-success [&:is(a,button)]:state-layer',
+                    'ptx-border-transparent ptx-bg-positive-subtler ptx-text-success [&:is(a,button)]:ptx-state-layer',
                 warning:
-                    'border-transparent bg-warning-subtler text-warning [&:is(a,button)]:state-layer',
+                    'ptx-border-transparent ptx-bg-warning-subtler ptx-text-warning [&:is(a,button)]:ptx-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'
+                    'ptx-border-transparent ptx-bg-information-subtler ptx-text-information [&:is(a,button)]:ptx-state-layer',
+                ai: 'ptx-border-transparent ptx-bg-ai-subtler ptx-text-ai [&:is(a,button)]:ptx-state-layer'
             }
         },
         defaultVariants: {

package/src/components/ui/breadcrumb.tsx

@@ -17,7 +17,7 @@ const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWi
             className={cn(
                 // 面包屑是导航辅助信息，不是正文 —— 字号走 13（lin 2026-08-28）。
                 // 原为 14，与页面正文同级，在标题下方读起来比实际权重更重。
-                'flex flex-wrap items-center gap-[6px] break-words text-xs text-muted-foreground sm:gap-[10px]',
+                'ptx-flex ptx-flex-wrap ptx-items-center ptx-gap-[6px] ptx-break-words ptx-text-xs ptx-text-muted-foreground sm:ptx-gap-[10px]',
                 className
             )}
             {...props}
@@ -28,7 +28,7 @@ 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} />
+        <li ref={ref} className={cn('ptx-inline-flex ptx-items-center ptx-gap-[6px]', className)} {...props} />
     )
 );
 BreadcrumbItem.displayName = 'BreadcrumbItem';
@@ -41,7 +41,7 @@ const BreadcrumbLink = React.forwardRef<
     return (
         <Comp
             ref={ref}
-            className={cn('transition-colors hover:text-foreground', className)}
+            className={cn('ptx-transition-colors hover:ptx-text-foreground', className)}
             {...props}
         />
     );
@@ -55,7 +55,7 @@ const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWit
             role="link"
             aria-disabled="true"
             aria-current="page"
-            className={cn('font-normal text-foreground', className)}
+            className={cn('ptx-font-normal ptx-text-foreground', className)}
             {...props}
         />
     )
@@ -66,7 +66,7 @@ const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentP
     <li
         role="presentation"
         aria-hidden="true"
-        className={cn('[&>svg]:size-[14px]', className)}
+        className={cn('[&>svg]:ptx-size-[14px]', className)}
         {...props}
     >
         {children ?? <ChevronRight />}
@@ -83,11 +83,11 @@ const BreadcrumbEllipsis = ({
     <span
         role="presentation"
         aria-hidden="true"
-        className={cn('flex h-[32px] w-[36px] items-center justify-center', className)}
+        className={cn('ptx-flex ptx-h-[32px] ptx-w-[36px] ptx-items-center ptx-justify-center', className)}
         {...props}
     >
-        <MoreHorizontal className="h-[16px] w-[16px]" />
-        <span className="sr-only">{label}</span>
+        <MoreHorizontal className="ptx-h-[16px] ptx-w-[16px]" />
+        <span className="ptx-sr-only">{label}</span>
     </span>
 );
 BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';

package/src/components/ui/bubble.tsx

@@ -8,27 +8,27 @@ function BubbleGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElemen
     return (
         <div
             data-slot="bubble-group"
-            className={cn('flex min-w-0 flex-col gap-[8px]', className)}
+            className={cn('ptx-flex ptx-min-w-0 ptx-flex-col ptx-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',
+    'group/bubble ptx-relative ptx-flex ptx-w-fit ptx-max-w-[80%] ptx-min-w-0 ptx-flex-col ptx-gap-[4px] group-data-[align=end]/message:ptx-self-end data-[align=end]:ptx-self-end data-[variant=ghost]:ptx-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)]',
+                    '[&>[data-slot=bubble-content]]:ptx-bg-primary [&>[data-slot=bubble-content]]:ptx-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',
+                    '[&>[data-slot=bubble-content]]:ptx-bg-secondary [&>[data-slot=bubble-content]]:ptx-text-secondary-foreground',
+                muted: '[&>[data-slot=bubble-content]]:ptx-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',
+                    '[&>[data-slot=bubble-content]]:ptx-border-input [&>[data-slot=bubble-content]]:ptx-bg-background [&>[data-slot=bubble-content]]:[--pt-state-layer-border:1px]',
+                ghost: 'ptx-border-none [&>[data-slot=bubble-content]]:ptx-rounded-none [&>[data-slot=bubble-content]]:ptx-bg-transparent [&>[data-slot=bubble-content]]:ptx-p-0',
                 destructive:
-                    '[&>[data-slot=bubble-content]]:bg-destructive/10 [&>[data-slot=bubble-content]]:text-destructive dark:[&>[data-slot=bubble-content]]:bg-destructive/20'
+                    '[&>[data-slot=bubble-content]]:ptx-bg-destructive/10 [&>[data-slot=bubble-content]]:ptx-text-destructive dark:[&>[data-slot=bubble-content]]:ptx-bg-destructive/20'
             }
         },
         defaultVariants: {
@@ -71,8 +71,8 @@ function BubbleContent({
         <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-sm 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',
+                'ptx-w-fit ptx-max-w-full ptx-min-w-0 ptx-overflow-hidden ptx-break-words ptx-rounded-[var(--pt-radius)] ptx-border ptx-border-transparent ptx-px-[12px] ptx-py-[8px] ptx-text-sm ptx-leading-relaxed group-data-[align=end]/bubble:ptx-self-end',
+                '[&:is(button,a)]:ptx-state-layer [&:is(button)]:ptx-text-left [&:is(button,a)]:ptx-cursor-pointer [&:is(button,a)]:focus-visible:ptx-outline-none [&:is(button,a)]:focus-visible:ptx-ring-1 [&:is(button,a)]:focus-visible:ptx-ring-ring',
                 className
             )}
             {...props}
@@ -81,16 +81,16 @@ function BubbleContent({
 }
 
 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-sm ring ring-card has-[button]:p-0',
+    'ptx-absolute ptx-z-10 ptx-flex ptx-w-fit ptx-shrink-0 ptx-items-center ptx-justify-center ptx-gap-[4px] ptx-rounded-full ptx-bg-muted ptx-px-[6px] ptx-py-[2px] ptx-text-sm ptx-ring ptx-ring-card has-[button]:ptx-p-0',
     {
         variants: {
             side: {
-                top: 'top-0 -translate-y-3/4',
-                bottom: 'bottom-0 translate-y-3/4'
+                top: 'ptx-top-0 -ptx-translate-y-3/4',
+                bottom: 'ptx-bottom-0 ptx-translate-y-3/4'
             },
             align: {
-                start: 'left-[12px]',
-                end: 'right-[12px]'
+                start: 'ptx-left-[12px]',
+                end: 'ptx-right-[12px]'
             }
         },
         defaultVariants: {

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

@@ -6,14 +6,14 @@ 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",
+    "ptx-flex ptx-w-fit ptx-items-stretch has-[>[data-slot=button-group]]:ptx-gap-[8px] [&>*]:focus-visible:ptx-relative [&>*]:focus-visible:ptx-z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:ptx-w-fit [&>input]:ptx-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',
+                    '[&>*:not(:first-child)]:ptx-rounded-l-none [&>*:not(:first-child)]:ptx-border-l-0 [&>*:not(:last-child)]:ptx-rounded-r-none [&>*:not(:first-child)]:after:ptx-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'
+                    'ptx-flex-col [&>*:not(:first-child)]:ptx-rounded-t-none [&>*:not(:first-child)]:ptx-border-t-0 [&>*:not(:last-child)]:ptx-rounded-b-none [&>*:not(:first-child)]:after:ptx-top-0'
             }
         },
         defaultVariants: {
@@ -48,7 +48,7 @@ function ButtonGroupText({
         <Comp
             data-slot="button-group-text"
             className={cn(
-                "flex items-center gap-[8px] rounded-[var(--pt-radius-md)] border bg-muted px-[16px] text-sm font-medium text-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-[16px]",
+                "ptx-flex ptx-items-center ptx-gap-[8px] ptx-rounded-[var(--pt-radius-md)] ptx-border ptx-bg-muted ptx-px-[16px] ptx-text-sm ptx-font-medium ptx-text-foreground [&_svg]:ptx-pointer-events-none [&_svg:not([class*='size-'])]:ptx-size-[16px]",
                 className
             )}
             {...props}
@@ -65,7 +65,7 @@ function ButtonGroupSeparator({
         <Separator
             data-slot="button-group-separator"
             orientation={orientation}
-            className={cn('relative !m-0 self-stretch bg-input data-[orientation=vertical]:h-auto', className)}
+            className={cn('ptx-relative !ptx-m-0 ptx-self-stretch ptx-bg-input data-[orientation=vertical]:ptx-h-auto', className)}
             {...props}
         />
     );

package/src/components/ui/button.tsx

@@ -5,32 +5,32 @@ 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-sm 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',
+    'ptx-inline-flex ptx-items-center ptx-justify-center ptx-gap-[8px] ptx-whitespace-nowrap ptx-rounded-[var(--pt-radius-md)] ptx-text-sm ptx-font-medium ptx-transition-colors focus-visible:ptx-outline-none focus-visible:ptx-ring-2 focus-visible:ptx-ring-ring focus-visible:ptx-ring-offset-2 disabled:ptx-cursor-not-allowed disabled:ptx-opacity-50 [&_svg]:ptx-pointer-events-none [&_svg]:ptx-size-[16px] [&_svg]:ptx-shrink-0',
     {
         variants: {
             variant: {
-                default: 'state-layer-inverse bg-primary text-primary-foreground',
-                brand: 'state-layer bg-brand text-brand-foreground',
+                default: 'ptx-state-layer-inverse ptx-bg-primary ptx-text-primary-foreground',
+                brand: 'ptx-state-layer ptx-bg-brand ptx-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',
+                    'ptx-state-layer ptx-border ptx-border-input ptx-bg-background ptx-text-foreground [--pt-state-layer-border:1px]',
+                tertiary: 'ptx-state-layer ptx-bg-secondary ptx-text-secondary-foreground',
+                destructive: 'ptx-state-layer ptx-bg-destructive ptx-text-destructive-foreground',
+                ghost: 'ptx-state-layer ptx-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))]',
+                    'ptx-state-layer ptx-text-foreground hover:ptx-text-[rgb(var(--pt-red))] active:ptx-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'
+                    'ptx-state-layer ptx-border ptx-border-input ptx-bg-background ptx-text-foreground [--pt-state-layer-border:1px] hover:ptx-text-[rgb(var(--pt-red))] active:ptx-text-[rgb(var(--pt-red))]',
+                link: 'ptx-text-primary ptx-underline-offset-4 hover:ptx-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-2xs',
-                default: 'h-[32px] rounded-[var(--pt-radius-md)] px-[12px] text-xs',
-                lg: 'h-[40px] rounded-[var(--pt-radius-md)] px-[16px] text-sm [&_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]'
+                sm: 'ptx-h-[24px] ptx-gap-[4px] ptx-rounded-[var(--pt-radius-sm)] ptx-px-[8px] ptx-text-2xs',
+                default: 'ptx-h-[32px] ptx-rounded-[var(--pt-radius-md)] ptx-px-[12px] ptx-text-xs',
+                lg: 'ptx-h-[40px] ptx-rounded-[var(--pt-radius-md)] ptx-px-[16px] ptx-text-sm [&_svg]:ptx-size-[20px]',
+                'icon-sm': 'ptx-h-[24px] ptx-w-[24px] ptx-rounded-[var(--pt-radius-sm)]',
+                icon: 'ptx-h-[32px] ptx-w-[32px]',
+                'icon-lg': 'ptx-h-[40px] ptx-w-[40px] [&_svg]:ptx-size-[20px]'
             }
         },
         defaultVariants: {

package/src/components/ui/calendar.tsx

@@ -11,47 +11,47 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
     return (
         <DayPicker
             showOutsideDays={showOutsideDays}
-            className={cn('p-[12px]', className)}
+            className={cn('ptx-p-[12px]', className)}
             classNames={{
-                months: 'relative flex flex-col gap-[16px] sm:flex-row',
-                month: 'flex flex-col gap-[16px]',
-                month_caption: 'flex h-[28px] items-center justify-center',
-                caption_label: 'text-sm font-medium text-foreground',
-                nav: 'absolute inset-x-0 top-0 z-10 flex items-center justify-between',
-                button_previous: cn(buttonVariants({ variant: 'ghost' }), 'h-[28px] w-[28px] p-0'),
-                button_next: cn(buttonVariants({ variant: 'ghost' }), 'h-[28px] w-[28px] p-0'),
-                month_grid: 'w-full border-collapse',
-                weekdays: 'flex',
+                months: 'ptx-relative ptx-flex ptx-flex-col ptx-gap-[16px] sm:ptx-flex-row',
+                month: 'ptx-flex ptx-flex-col ptx-gap-[16px]',
+                month_caption: 'ptx-flex ptx-h-[28px] ptx-items-center ptx-justify-center',
+                caption_label: 'ptx-text-sm ptx-font-medium ptx-text-foreground',
+                nav: 'ptx-absolute ptx-inset-x-0 ptx-top-0 ptx-z-10 ptx-flex ptx-items-center ptx-justify-between',
+                button_previous: cn(buttonVariants({ variant: 'ghost' }), 'ptx-h-[28px] ptx-w-[28px] ptx-p-0'),
+                button_next: cn(buttonVariants({ variant: 'ghost' }), 'ptx-h-[28px] ptx-w-[28px] ptx-p-0'),
+                month_grid: 'ptx-w-full ptx-border-collapse',
+                weekdays: 'ptx-flex',
                 weekday:
-                    'w-[32px] rounded-[var(--pt-radius-md)] text-2xs font-normal text-muted-foreground',
-                week: 'mt-[8px] flex w-full',
-                day: 'relative p-0 text-center text-sm focus-within:relative focus-within:z-20',
+                    'ptx-w-[32px] ptx-rounded-[var(--pt-radius-md)] ptx-text-2xs ptx-font-normal ptx-text-muted-foreground',
+                week: 'ptx-mt-[8px] ptx-flex ptx-w-full',
+                day: 'ptx-relative ptx-p-0 ptx-text-center ptx-text-sm focus-within:ptx-relative focus-within:ptx-z-20',
                 day_button: cn(
                     buttonVariants({ variant: 'ghost' }),
-                    'h-[32px] w-[32px] p-0 font-normal aria-selected:opacity-100'
+                    'ptx-h-[32px] ptx-w-[32px] ptx-p-0 ptx-font-normal aria-selected:ptx-opacity-100'
                 ),
                 /* range 端点:黑底白字按钮;格子层同时铺 8% 底带并只圆外侧角,
                    让中段底带连续延伸到端点下方不断开 */
                 range_start:
-                    'day-range-start bg-selected rounded-l-[var(--pt-radius-md)] [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:font-medium',
+                    'day-range-start ptx-bg-selected ptx-rounded-l-[var(--pt-radius-md)] [&>button]:ptx-bg-primary [&>button]:ptx-text-primary-foreground [&>button]:ptx-font-medium',
                 range_end:
-                    'day-range-end bg-selected rounded-r-[var(--pt-radius-md)] [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:font-medium',
+                    'day-range-end ptx-bg-selected ptx-rounded-r-[var(--pt-radius-md)] [&>button]:ptx-bg-primary [&>button]:ptx-text-primary-foreground [&>button]:ptx-font-medium',
                 /* 单选模式选中=黑底白字;range 模式交给 range_start/end/middle 三键,不在此重复设底 */
                 selected:
                     props.mode === 'range'
                         ? undefined
-                        : '[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:font-medium',
-                today: '[&>button]:bg-selected',
-                outside: 'day-outside text-muted-foreground aria-selected:text-muted-foreground',
-                disabled: 'text-muted-foreground opacity-50',
-                range_middle: 'bg-selected [&>button]:bg-transparent [&>button]:font-normal',
-                hidden: 'invisible',
+                        : '[&>button]:ptx-bg-primary [&>button]:ptx-text-primary-foreground [&>button]:ptx-font-medium',
+                today: '[&>button]:ptx-bg-selected',
+                outside: 'day-outside ptx-text-muted-foreground aria-selected:ptx-text-muted-foreground',
+                disabled: 'ptx-text-muted-foreground ptx-opacity-50',
+                range_middle: 'ptx-bg-selected [&>button]:ptx-bg-transparent [&>button]:ptx-font-normal',
+                hidden: 'ptx-invisible',
                 ...classNames
             }}
             components={{
                 Chevron: ({ orientation }) => {
                     const Icon = orientation === 'left' ? ChevronLeft : ChevronRight;
-                    return <Icon className="h-[16px] w-[16px]" />;
+                    return <Icon className="ptx-h-[16px] ptx-w-[16px]" />;
                 }
             }}
             {...props}