@ptengine/design-components 0.5.3 → 0.7.0

package/src/components/ui/card.tsx

@@ -6,7 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
     ({ className, ...props }, ref) => (
         <div
             ref={ref}
-            className={cn('rounded-12 border bg-card text-card-foreground', className)}
+            className={cn('ptx-rounded-12 ptx-border ptx-bg-card ptx-text-card-foreground', className)}
             {...props}
         />
     )
@@ -15,7 +15,7 @@ Card.displayName = 'Card';
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
     ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn('flex flex-col space-y-[6px] p-[24px]', className)} {...props} />
+        <div ref={ref} className={cn('ptx-flex ptx-flex-col ptx-space-y-[6px] ptx-p-[24px]', className)} {...props} />
     )
 );
 CardHeader.displayName = 'CardHeader';
@@ -24,7 +24,7 @@ const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivE
     ({ className, ...props }, ref) => (
         <div
             ref={ref}
-            className={cn('font-semibold leading-none tracking-tight', className)}
+            className={cn('ptx-font-semibold ptx-leading-none ptx-tracking-tight', className)}
             {...props}
         />
     )
@@ -33,21 +33,21 @@ CardTitle.displayName = 'CardTitle';
 
 const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
     ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn('text-[14px] leading-[20px] text-muted-foreground', className)} {...props} />
+        <div ref={ref} className={cn('ptx-text-sm ptx-text-muted-foreground', className)} {...props} />
     )
 );
 CardDescription.displayName = 'CardDescription';
 
 const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
     ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn('p-[24px] pt-0', className)} {...props} />
+        <div ref={ref} className={cn('ptx-p-[24px] ptx-pt-0', className)} {...props} />
     )
 );
 CardContent.displayName = 'CardContent';
 
 const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
     ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn('flex items-center p-[24px] pt-0', className)} {...props} />
+        <div ref={ref} className={cn('ptx-flex ptx-items-center ptx-p-[24px] ptx-pt-0', className)} {...props} />
     )
 );
 CardFooter.displayName = 'CardFooter';

package/src/components/ui/carousel.tsx

@@ -120,7 +120,7 @@ const Carousel = React.forwardRef<
             <div
                 ref={ref}
                 onKeyDownCapture={handleKeyDown}
-                className={cn('relative', className)}
+                className={cn('ptx-relative', className)}
                 role="region"
                 aria-roledescription="carousel"
                 {...props}
@@ -137,12 +137,12 @@ const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HT
         const { carouselRef, orientation } = useCarousel();
 
         return (
-            <div ref={carouselRef} className="overflow-hidden">
+            <div ref={carouselRef} className="ptx-overflow-hidden">
                 <div
                     ref={ref}
                     className={cn(
-                        'flex',
-                        orientation === 'horizontal' ? '-ml-[16px]' : '-mt-[16px] flex-col',
+                        'ptx-flex',
+                        orientation === 'horizontal' ? '-ptx-ml-[16px]' : '-ptx-mt-[16px] ptx-flex-col',
                         className
                     )}
                     {...props}
@@ -163,8 +163,8 @@ const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLD
                 role="group"
                 aria-roledescription="slide"
                 className={cn(
-                    'min-w-0 shrink-0 grow-0 basis-full',
-                    orientation === 'horizontal' ? 'pl-[16px]' : 'pt-[16px]',
+                    'ptx-min-w-0 ptx-shrink-0 ptx-grow-0 ptx-basis-full',
+                    orientation === 'horizontal' ? 'ptx-pl-[16px]' : 'ptx-pt-[16px]',
                     className
                 )}
                 {...props}
@@ -190,18 +190,18 @@ const CarouselPrevious = React.forwardRef<
                 variant={variant}
                 size={size}
                 className={cn(
-                    'absolute h-[32px] w-[32px] rounded-full',
+                    'ptx-absolute ptx-h-[32px] ptx-w-[32px] ptx-rounded-full',
                     orientation === 'horizontal'
-                        ? '-left-[48px] top-1/2 -translate-y-1/2'
-                        : '-top-[48px] left-1/2 -translate-x-1/2 rotate-90',
+                        ? '-ptx-left-[48px] ptx-top-1/2 -ptx-translate-y-1/2'
+                        : '-ptx-top-[48px] ptx-left-1/2 -ptx-translate-x-1/2 ptx-rotate-90',
                     className
                 )}
                 disabled={!canScrollPrev}
                 onClick={scrollPrev}
                 {...props}
             >
-                <ArrowLeft className="h-[16px] w-[16px]" />
-                <span className="sr-only">{label}</span>
+                <ArrowLeft className="ptx-h-[16px] ptx-w-[16px]" />
+                <span className="ptx-sr-only">{label}</span>
             </Button>
         );
     }
@@ -224,18 +224,18 @@ const CarouselNext = React.forwardRef<
                 variant={variant}
                 size={size}
                 className={cn(
-                    'absolute h-[32px] w-[32px] rounded-full',
+                    'ptx-absolute ptx-h-[32px] ptx-w-[32px] ptx-rounded-full',
                     orientation === 'horizontal'
-                        ? '-right-[48px] top-1/2 -translate-y-1/2'
-                        : '-bottom-[48px] left-1/2 -translate-x-1/2 rotate-90',
+                        ? '-ptx-right-[48px] ptx-top-1/2 -ptx-translate-y-1/2'
+                        : '-ptx-bottom-[48px] ptx-left-1/2 -ptx-translate-x-1/2 ptx-rotate-90',
                     className
                 )}
                 disabled={!canScrollNext}
                 onClick={scrollNext}
                 {...props}
             >
-                <ArrowRight className="h-[16px] w-[16px]" />
-                <span className="sr-only">{label}</span>
+                <ArrowRight className="ptx-h-[16px] ptx-w-[16px]" />
+                <span className="ptx-sr-only">{label}</span>
             </Button>
         );
     }

package/src/components/ui/chart.tsx

@@ -47,7 +47,7 @@ const ChartContainer = React.forwardRef<
                 data-chart={chartId}
                 ref={ref}
                 className={cn(
-                    "flex aspect-video justify-center text-[13px] leading-[20px] [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+                    "ptx-flex ptx-aspect-video ptx-justify-center ptx-text-xs [&_.recharts-cartesian-axis-tick_text]:ptx-fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:ptx-stroke-border [&_.recharts-curve.recharts-tooltip-cursor]:ptx-stroke-border [&_.recharts-dot[stroke='#fff']]:ptx-stroke-transparent [&_.recharts-layer]:ptx-outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:ptx-stroke-border [&_.recharts-radial-bar-background-sector]:ptx-fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:ptx-fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:ptx-stroke-border [&_.recharts-sector[stroke='#fff']]:ptx-stroke-transparent [&_.recharts-sector]:ptx-outline-none [&_.recharts-surface]:ptx-outline-none",
                     className
                 )}
                 {...props}
@@ -137,7 +137,7 @@ const ChartTooltipContent = React.forwardRef<
 
             if (labelFormatter) {
                 return (
-                    <div className={cn('font-medium', labelClassName)}>
+                    <div className={cn('ptx-font-medium', labelClassName)}>
                         {labelFormatter(value, payload)}
                     </div>
                 );
@@ -147,7 +147,7 @@ const ChartTooltipContent = React.forwardRef<
                 return null;
             }
 
-            return <div className={cn('font-medium', labelClassName)}>{value}</div>;
+            return <div className={cn('ptx-font-medium', labelClassName)}>{value}</div>;
         }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
 
         if (!active || !payload?.length) {
@@ -160,12 +160,12 @@ const ChartTooltipContent = React.forwardRef<
             <div
                 ref={ref}
                 className={cn(
-                    'grid min-w-[8rem] items-start gap-[6px] rounded-[var(--pt-radius)] border bg-background px-[10px] py-[6px] text-[13px] leading-[20px] shadow-xl',
+                    'ptx-grid ptx-min-w-[8rem] ptx-items-start ptx-gap-[6px] ptx-rounded-[var(--pt-radius)] ptx-border ptx-bg-background ptx-px-[10px] ptx-py-[6px] ptx-text-xs ptx-shadow-xl',
                     className
                 )}
             >
                 {!nestLabel ? tooltipLabel : null}
-                <div className="grid gap-[6px]">
+                <div className="ptx-grid ptx-gap-[6px]">
                     {payload.map((item, index) => {
                         const key = `${nameKey || item.name || item.dataKey || 'value'}`;
                         const itemConfig = getPayloadConfigFromPayload(config, item, key);
@@ -175,8 +175,8 @@ const ChartTooltipContent = React.forwardRef<
                             <div
                                 key={item.dataKey}
                                 className={cn(
-                                    'flex w-full flex-wrap items-stretch gap-[8px] [&>svg]:h-[10px] [&>svg]:w-[10px] [&>svg]:text-muted-foreground',
-                                    indicator === 'dot' && 'items-center'
+                                    'ptx-flex ptx-w-full ptx-flex-wrap ptx-items-stretch ptx-gap-[8px] [&>svg]:ptx-h-[10px] [&>svg]:ptx-w-[10px] [&>svg]:ptx-text-muted-foreground',
+                                    indicator === 'dot' && 'ptx-items-center'
                                 )}
                             >
                                 {formatter && item?.value !== undefined && item.name ? (
@@ -189,13 +189,13 @@ const ChartTooltipContent = React.forwardRef<
                                             !hideIndicator && (
                                                 <div
                                                     className={cn(
-                                                        'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
+                                                        'ptx-shrink-0 ptx-rounded-[2px] ptx-border-[--color-border] ptx-bg-[--color-bg]',
                                                         {
-                                                            'h-[10px] w-[10px]': indicator === 'dot',
-                                                            'w-[4px]': indicator === 'line',
-                                                            'w-0 border-[1.5px] border-dashed bg-transparent':
+                                                            'ptx-h-[10px] ptx-w-[10px]': indicator === 'dot',
+                                                            'ptx-w-[4px]': indicator === 'line',
+                                                            'ptx-w-0 ptx-border-[1.5px] ptx-border-dashed ptx-bg-transparent':
                                                                 indicator === 'dashed',
-                                                            'my-[2px]': nestLabel && indicator === 'dashed'
+                                                            'ptx-my-[2px]': nestLabel && indicator === 'dashed'
                                                         }
                                                     )}
                                                     style={
@@ -209,18 +209,18 @@ const ChartTooltipContent = React.forwardRef<
                                         )}
                                         <div
                                             className={cn(
-                                                'flex flex-1 justify-between leading-none',
-                                                nestLabel ? 'items-end' : 'items-center'
+                                                'ptx-flex ptx-flex-1 ptx-justify-between ptx-leading-none',
+                                                nestLabel ? 'ptx-items-end' : 'ptx-items-center'
                                             )}
                                         >
-                                            <div className="grid gap-[6px]">
+                                            <div className="ptx-grid ptx-gap-[6px]">
                                                 {nestLabel ? tooltipLabel : null}
-                                                <span className="text-muted-foreground">
+                                                <span className="ptx-text-muted-foreground">
                                                     {itemConfig?.label || item.name}
                                                 </span>
                                             </div>
                                             {item.value && (
-                                                <span className="font-mono font-medium tabular-nums text-foreground">
+                                                <span className="ptx-font-mono ptx-font-medium ptx-tabular-nums ptx-text-foreground">
                                                     {item.value.toLocaleString()}
                                                 </span>
                                             )}
@@ -257,8 +257,8 @@ const ChartLegendContent = React.forwardRef<
         <div
             ref={ref}
             className={cn(
-                'flex items-center justify-center gap-[16px]',
-                verticalAlign === 'top' ? 'pb-[12px]' : 'pt-[12px]',
+                'ptx-flex ptx-items-center ptx-justify-center ptx-gap-[16px]',
+                verticalAlign === 'top' ? 'ptx-pb-[12px]' : 'ptx-pt-[12px]',
                 className
             )}
         >
@@ -269,13 +269,13 @@ const ChartLegendContent = React.forwardRef<
                 return (
                     <div
                         key={item.value}
-                        className="flex items-center gap-[6px] text-foreground [&>svg]:h-[12px] [&>svg]:w-[12px] [&>svg]:text-muted-foreground"
+                        className="ptx-flex ptx-items-center ptx-gap-[6px] ptx-text-foreground [&>svg]:ptx-h-[12px] [&>svg]:ptx-w-[12px] [&>svg]:ptx-text-muted-foreground"
                     >
                         {itemConfig?.icon && !hideIcon ? (
                             <itemConfig.icon />
                         ) : (
                             <div
-                                className="h-[8px] w-[8px] shrink-0 rounded-[2px]"
+                                className="ptx-h-[8px] ptx-w-[8px] ptx-shrink-0 ptx-rounded-[2px]"
                                 style={{ backgroundColor: item.color }}
                             />
                         )}

package/src/components/ui/checkbox.tsx

@@ -11,13 +11,13 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Root
         ref={ref}
         className={cn(
-            'peer h-[16px] w-[16px] shrink-0 rounded-[var(--pt-radius-sm)] border border-neutral transition-colors enabled:hover:border-strong data-[state=unchecked]:enabled:active:bg-press focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:border-weak disabled:bg-disable disabled:text-disabled enabled:data-[state=checked]:border-primary enabled:data-[state=checked]:bg-primary enabled:data-[state=checked]:text-primary-foreground',
+            'peer ptx-h-[16px] ptx-w-[16px] ptx-shrink-0 ptx-rounded-[var(--pt-radius-sm)] ptx-border ptx-border-neutral ptx-transition-colors enabled:hover:ptx-border-strong data-[state=unchecked]:enabled:active:ptx-bg-press focus-visible:ptx-outline-none focus-visible:ptx-ring-1 focus-visible:ptx-ring-ring disabled:ptx-cursor-not-allowed disabled:ptx-border-weak disabled:ptx-bg-disable disabled:ptx-text-disabled enabled:data-[state=checked]:ptx-border-primary enabled:data-[state=checked]:ptx-bg-primary enabled:data-[state=checked]:ptx-text-primary-foreground',
             className
         )}
         {...props}
     >
-        <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
-            <Check className="h-[16px] w-[16px]" />
+        <CheckboxPrimitive.Indicator className={cn('ptx-flex ptx-items-center ptx-justify-center ptx-text-current')}>
+            <Check className="ptx-h-[16px] ptx-w-[16px]" />
         </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
 ));

package/src/components/ui/command.tsx

@@ -13,7 +13,7 @@ const Command = React.forwardRef<
     <CommandPrimitive
         ref={ref}
         className={cn(
-            'flex h-full w-full flex-col overflow-hidden rounded-[var(--pt-radius-md)] bg-popover text-popover-foreground',
+            'ptx-flex ptx-h-full ptx-w-full ptx-flex-col ptx-overflow-hidden ptx-rounded-[var(--pt-radius-md)] ptx-bg-popover ptx-text-popover-foreground',
             className
         )}
         {...props}
@@ -24,8 +24,8 @@ Command.displayName = CommandPrimitive.displayName;
 const CommandDialog = ({ children, ...props }: DialogProps) => {
     return (
         <Dialog {...props}>
-            <DialogContent className="overflow-hidden p-0">
-                <Command className="[&_[cmdk-group-heading]]:px-[8px] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-[8px] [&_[cmdk-input-wrapper]_svg]:h-[20px] [&_[cmdk-input-wrapper]_svg]:w-[20px] [&_[cmdk-input]]:h-[48px] [&_[cmdk-item]]:px-[8px] [&_[cmdk-item]]:py-[12px] [&_[cmdk-item]_svg]:h-[20px] [&_[cmdk-item]_svg]:w-[20px]">
+            <DialogContent className="ptx-overflow-hidden ptx-p-0">
+                <Command className="[&_[cmdk-group-heading]]:ptx-px-[8px] [&_[cmdk-group-heading]]:ptx-font-medium [&_[cmdk-group-heading]]:ptx-text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:ptx-pt-0 [&_[cmdk-group]]:ptx-px-[8px] [&_[cmdk-input-wrapper]_svg]:ptx-h-[20px] [&_[cmdk-input-wrapper]_svg]:ptx-w-[20px] [&_[cmdk-input]]:ptx-h-[48px] [&_[cmdk-item]]:ptx-px-[8px] [&_[cmdk-item]]:ptx-py-[12px] [&_[cmdk-item]_svg]:ptx-h-[20px] [&_[cmdk-item]_svg]:ptx-w-[20px]">
                     {children}
                 </Command>
             </DialogContent>
@@ -37,12 +37,12 @@ const CommandInput = React.forwardRef<
     React.ElementRef<typeof CommandPrimitive.Input>,
     React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-    <div className="flex items-center border-b px-[12px]" cmdk-input-wrapper="">
-        <Search className="mr-[8px] h-[16px] w-[16px] shrink-0 text-muted-foreground" />
+    <div className="ptx-flex ptx-items-center ptx-border-b ptx-px-[12px]" cmdk-input-wrapper="">
+        <Search className="ptx-mr-[8px] ptx-h-[16px] ptx-w-[16px] ptx-shrink-0 ptx-text-muted-foreground" />
         <CommandPrimitive.Input
             ref={ref}
             className={cn(
-                'flex h-[40px] w-full rounded-[var(--pt-radius-md)] bg-transparent py-[12px] text-[14px] leading-[20px] text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+                'ptx-flex ptx-h-[40px] ptx-w-full ptx-rounded-[var(--pt-radius-md)] ptx-bg-transparent ptx-py-[12px] ptx-text-sm ptx-text-foreground ptx-outline-none placeholder:ptx-text-muted-foreground disabled:ptx-cursor-not-allowed disabled:ptx-opacity-50',
                 className
             )}
             {...props}
@@ -57,7 +57,7 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <CommandPrimitive.List
         ref={ref}
-        className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+        className={cn('ptx-max-h-[300px] ptx-overflow-y-auto ptx-overflow-x-hidden', className)}
         {...props}
     />
 ));
@@ -67,7 +67,7 @@ const CommandEmpty = React.forwardRef<
     React.ElementRef<typeof CommandPrimitive.Empty>,
     React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 >((props, ref) => (
-    <CommandPrimitive.Empty ref={ref} className="py-[24px] text-center text-[13px] leading-[20px]" {...props} />
+    <CommandPrimitive.Empty ref={ref} className="ptx-py-[24px] ptx-text-center ptx-text-xs" {...props} />
 ));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
@@ -78,7 +78,7 @@ const CommandGroup = React.forwardRef<
     <CommandPrimitive.Group
         ref={ref}
         className={cn(
-            'overflow-hidden p-[4px] text-foreground [&_[cmdk-group-heading]]:px-[8px] [&_[cmdk-group-heading]]:py-[6px] [&_[cmdk-group-heading]]:text-[13px] [&_[cmdk-group-heading]]:leading-[20px] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+            'ptx-overflow-hidden ptx-p-[4px] ptx-text-foreground [&_[cmdk-group-heading]]:ptx-px-[8px] [&_[cmdk-group-heading]]:ptx-py-[6px] [&_[cmdk-group-heading]]:ptx-text-xs [&_[cmdk-group-heading]]:ptx-font-medium [&_[cmdk-group-heading]]:ptx-text-muted-foreground',
             className
         )}
         {...props}
@@ -92,7 +92,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <CommandPrimitive.Separator
         ref={ref}
-        className={cn('-mx-[4px] h-px bg-border', className)}
+        className={cn('-ptx-mx-[4px] ptx-h-px ptx-bg-border', className)}
         {...props}
     />
 ));
@@ -105,7 +105,7 @@ const CommandItem = React.forwardRef<
     <CommandPrimitive.Item
         ref={ref}
         className={cn(
-            'relative flex cursor-default select-none items-center gap-[8px] rounded-[var(--pt-radius-sm)] px-[8px] py-[6px] text-[14px] leading-[20px] outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-[16px] [&_svg]:shrink-0',
+            'ptx-relative ptx-flex ptx-cursor-default ptx-select-none ptx-items-center ptx-gap-[8px] ptx-rounded-[var(--pt-radius-sm)] ptx-px-[8px] ptx-py-[6px] ptx-text-sm ptx-outline-none data-[disabled=true]:ptx-pointer-events-none data-[selected=true]:ptx-bg-accent data-[selected=true]:ptx-text-accent-foreground data-[disabled=true]:ptx-opacity-50 [&_svg]:ptx-pointer-events-none [&_svg]:ptx-size-[16px] [&_svg]:ptx-shrink-0',
             className
         )}
         {...props}
@@ -116,7 +116,7 @@ CommandItem.displayName = CommandPrimitive.Item.displayName;
 const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
     return (
         <span
-            className={cn('ml-auto text-[13px] leading-[20px] tracking-widest text-muted-foreground', className)}
+            className={cn('ptx-ml-auto ptx-text-xs ptx-tracking-widest ptx-text-muted-foreground', className)}
             {...props}
         />
     );

package/src/components/ui/context-menu.tsx

@@ -25,14 +25,14 @@ const ContextMenuSubTrigger = React.forwardRef<
     <ContextMenuPrimitive.SubTrigger
         ref={ref}
         className={cn(
-            'flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] px-[8px] py-[6px] text-[14px] leading-[20px] outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-            inset && 'pl-[32px]',
+            'ptx-flex ptx-cursor-default ptx-select-none ptx-items-center ptx-rounded-[var(--pt-radius-sm)] ptx-px-[8px] ptx-py-[6px] ptx-text-sm ptx-outline-none focus:ptx-bg-accent focus:ptx-text-accent-foreground data-[state=open]:ptx-bg-accent data-[state=open]:ptx-text-accent-foreground',
+            inset && 'ptx-pl-[32px]',
             className
         )}
         {...props}
     >
         {children}
-        <ChevronRight className="ml-auto h-[16px] w-[16px]" />
+        <ChevronRight className="ptx-ml-auto ptx-h-[16px] ptx-w-[16px]" />
     </ContextMenuPrimitive.SubTrigger>
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
@@ -44,7 +44,7 @@ const ContextMenuSubContent = React.forwardRef<
     <ContextMenuPrimitive.SubContent
         ref={ref}
         className={cn(
-            'z-[var(--pt-z-popup,50)] min-w-[8rem] overflow-hidden rounded-[var(--pt-radius-md)] border bg-popover p-[4px] text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+            'ptx-z-[var(--pt-z-popup,50)] ptx-min-w-[8rem] ptx-overflow-hidden ptx-rounded-[var(--pt-radius-md)] ptx-border ptx-bg-popover ptx-p-[4px] ptx-text-popover-foreground ptx-shadow-lg 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-[side=bottom]:ptx-slide-in-from-top-2 data-[side=left]:ptx-slide-in-from-right-2 data-[side=right]:ptx-slide-in-from-left-2 data-[side=top]:ptx-slide-in-from-bottom-2',
             className
         )}
         {...props}
@@ -60,7 +60,7 @@ const ContextMenuContent = React.forwardRef<
         <ContextMenuPrimitive.Content
             ref={ref}
             className={cn(
-                'z-[var(--pt-z-popup,50)] min-w-[8rem] overflow-hidden rounded-[var(--pt-radius-md)] border bg-popover p-[4px] text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                'ptx-z-[var(--pt-z-popup,50)] ptx-min-w-[8rem] ptx-overflow-hidden ptx-rounded-[var(--pt-radius-md)] ptx-border ptx-bg-popover ptx-p-[4px] ptx-text-popover-foreground ptx-shadow-md 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-[side=bottom]:ptx-slide-in-from-top-2 data-[side=left]:ptx-slide-in-from-right-2 data-[side=right]:ptx-slide-in-from-left-2 data-[side=top]:ptx-slide-in-from-bottom-2',
                 className
             )}
             {...props}
@@ -78,8 +78,8 @@ const ContextMenuItem = React.forwardRef<
     <ContextMenuPrimitive.Item
         ref={ref}
         className={cn(
-            'relative flex cursor-default select-none items-center gap-[8px] rounded-[var(--pt-radius-sm)] px-[8px] py-[6px] text-[14px] leading-[20px] outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-[16px] [&>svg]:shrink-0',
-            inset && 'pl-[32px]',
+            'ptx-relative ptx-flex ptx-cursor-default ptx-select-none ptx-items-center ptx-gap-[8px] ptx-rounded-[var(--pt-radius-sm)] ptx-px-[8px] ptx-py-[6px] ptx-text-sm ptx-outline-none ptx-transition-colors focus:ptx-bg-accent focus:ptx-text-accent-foreground data-[disabled]:ptx-pointer-events-none data-[disabled]:ptx-opacity-50 [&>svg]:ptx-size-[16px] [&>svg]:ptx-shrink-0',
+            inset && 'ptx-pl-[32px]',
             className
         )}
         {...props}
@@ -94,15 +94,15 @@ const ContextMenuCheckboxItem = React.forwardRef<
     <ContextMenuPrimitive.CheckboxItem
         ref={ref}
         className={cn(
-            'relative flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] py-[6px] pl-[32px] pr-[8px] text-[14px] leading-[20px] outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            'ptx-relative ptx-flex ptx-cursor-default ptx-select-none ptx-items-center ptx-rounded-[var(--pt-radius-sm)] ptx-py-[6px] ptx-pl-[32px] ptx-pr-[8px] ptx-text-sm ptx-outline-none ptx-transition-colors focus:ptx-bg-accent focus:ptx-text-accent-foreground data-[disabled]:ptx-pointer-events-none data-[disabled]:ptx-opacity-50',
             className
         )}
         checked={checked}
         {...props}
     >
-        <span className="absolute left-[8px] flex h-[14px] w-[14px] items-center justify-center">
+        <span className="ptx-absolute ptx-left-[8px] ptx-flex ptx-h-[14px] ptx-w-[14px] ptx-items-center ptx-justify-center">
             <ContextMenuPrimitive.ItemIndicator>
-                <Check className="h-[16px] w-[16px]" />
+                <Check className="ptx-h-[16px] ptx-w-[16px]" />
             </ContextMenuPrimitive.ItemIndicator>
         </span>
         {children}
@@ -117,14 +117,14 @@ const ContextMenuRadioItem = React.forwardRef<
     <ContextMenuPrimitive.RadioItem
         ref={ref}
         className={cn(
-            'relative flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] py-[6px] pl-[32px] pr-[8px] text-[14px] leading-[20px] outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            'ptx-relative ptx-flex ptx-cursor-default ptx-select-none ptx-items-center ptx-rounded-[var(--pt-radius-sm)] ptx-py-[6px] ptx-pl-[32px] ptx-pr-[8px] ptx-text-sm ptx-outline-none ptx-transition-colors focus:ptx-bg-accent focus:ptx-text-accent-foreground data-[disabled]:ptx-pointer-events-none data-[disabled]:ptx-opacity-50',
             className
         )}
         {...props}
     >
-        <span className="absolute left-[8px] flex h-[14px] w-[14px] items-center justify-center">
+        <span className="ptx-absolute ptx-left-[8px] ptx-flex ptx-h-[14px] ptx-w-[14px] ptx-items-center ptx-justify-center">
             <ContextMenuPrimitive.ItemIndicator>
-                <Circle className="h-[8px] w-[8px] fill-current" />
+                <Circle className="ptx-h-[8px] ptx-w-[8px] ptx-fill-current" />
             </ContextMenuPrimitive.ItemIndicator>
         </span>
         {children}
@@ -140,7 +140,7 @@ const ContextMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
     <ContextMenuPrimitive.Label
         ref={ref}
-        className={cn('px-[8px] py-[6px] text-[14px] leading-[20px] font-semibold text-foreground', inset && 'pl-[32px]', className)}
+        className={cn('ptx-px-[8px] ptx-py-[6px] ptx-text-sm ptx-font-semibold ptx-text-foreground', inset && 'ptx-pl-[32px]', className)}
         {...props}
     />
 ));
@@ -152,7 +152,7 @@ const ContextMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <ContextMenuPrimitive.Separator
         ref={ref}
-        className={cn('-mx-[4px] my-[4px] h-px bg-border', className)}
+        className={cn('-ptx-mx-[4px] ptx-my-[4px] ptx-h-px ptx-bg-border', className)}
         {...props}
     />
 ));
@@ -161,7 +161,7 @@ ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
     return (
         <span
-            className={cn('ml-auto text-[13px] leading-[20px] tracking-widest text-muted-foreground', className)}
+            className={cn('ptx-ml-auto ptx-text-xs ptx-tracking-widest ptx-text-muted-foreground', className)}
             {...props}
         />
     );

package/src/components/ui/dialog.tsx

@@ -19,8 +19,10 @@ const DialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <DialogPrimitive.Overlay
         ref={ref}
+        /* 稳定钩子，供消费方测试查询遮罩层；勿改名。 */
+        data-slot="dialog-overlay"
         className={cn(
-            'fixed inset-0 z-[var(--pt-z-overlay,50)] bg-[rgb(var(--pt-black)/0.45)] 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.45)] 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}
@@ -32,9 +34,9 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 type DialogSize = 'sm' | 'md' | 'lg';
 
 const dialogSizeClasses: Record<DialogSize, string> = {
-    sm: 'max-w-[480px]',
-    md: 'max-w-[640px]',
-    lg: 'max-w-[960px]'
+    sm: 'ptx-max-w-[480px]',
+    md: 'ptx-max-w-[640px]',
+    lg: 'ptx-max-w-[960px]'
 };
 
 /* closeLabel:关闭钮读屏文案,库不做 i18n,消费方传译文(默认英文) */
@@ -52,7 +54,7 @@ const DialogContent = React.forwardRef<
             className={cn(
                 // outline-none:打开时焦点落在本容器(onOpenAutoFocus),浏览器在"键盘型"
                 // 触发下会给焦点元素画默认蓝框 —— 容器是模态本体,遮罩+弹窗已是焦点指示,抑制之
-                'fixed left-[50%] top-[50%] z-[var(--pt-z-overlay,50)] grid w-full translate-x-[-50%] translate-y-[-50%] gap-[16px] border bg-background p-[24px] shadow-lg outline-none 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-translate-x-[-50%] ptx-translate-y-[-50%] ptx-gap-[16px] ptx-border ptx-bg-background ptx-p-[24px] ptx-shadow-lg ptx-outline-none 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)]',
                 dialogSizeClasses[size],
                 className
             )}
@@ -73,7 +75,7 @@ const DialogContent = React.forwardRef<
                 <Button
                     variant="ghost"
                     size="icon-sm"
-                    className="!absolute right-[16px] top-[16px]"
+                    className="!ptx-absolute ptx-right-[16px] ptx-top-[16px]"
                     aria-label={closeLabel}
                 >
                     <X />
@@ -85,13 +87,13 @@ const DialogContent = React.forwardRef<
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div className={cn('flex flex-col space-y-[6px] text-center sm:text-left', className)} {...props} />
+    <div className={cn('ptx-flex ptx-flex-col ptx-space-y-[6px] ptx-text-center sm:ptx-text-left', className)} {...props} />
 );
 DialogHeader.displayName = 'DialogHeader';
 
 const DialogFooter = ({ 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}
     />
 );
@@ -104,7 +106,7 @@ const DialogTitle = React.forwardRef<
     <DialogPrimitive.Title
         ref={ref}
         className={cn(
-            'text-[18px] font-semibold leading-none tracking-tight text-[rgb(var(--pt-text-strong))]',
+            'ptx-text-lg ptx-font-semibold ptx-leading-none ptx-tracking-tight ptx-text-[rgb(var(--pt-text-strong))]',
             className
         )}
         {...props}
@@ -118,7 +120,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <DialogPrimitive.Description
         ref={ref}
-        className={cn('text-[14px] leading-[20px] text-[rgb(var(--pt-text-standard))]', className)}
+        className={cn('ptx-text-sm ptx-text-[rgb(var(--pt-text-standard))]', className)}
         {...props}
     />
 ));

package/src/components/ui/drawer.tsx

@@ -23,7 +23,9 @@ const DrawerOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <DrawerPrimitive.Overlay
         ref={ref}
-        className={cn('fixed inset-0 z-[var(--pt-z-overlay,50)] bg-[rgb(var(--pt-black)/0.8)]', className)}
+        /* 稳定钩子，供消费方测试查询遮罩层；勿改名。 */
+        data-slot="drawer-overlay"
+        className={cn('ptx-fixed ptx-inset-0 ptx-z-[var(--pt-z-overlay,50)] ptx-bg-[rgb(var(--pt-black)/0.8)]', className)}
         {...props}
     />
 ));
@@ -38,12 +40,12 @@ const DrawerContent = React.forwardRef<
         <DrawerPrimitive.Content
             ref={ref}
             className={cn(
-                'fixed inset-x-0 bottom-0 z-[var(--pt-z-overlay,50)] mt-[96px] flex h-auto flex-col rounded-t-[10px] border bg-background',
+                'ptx-fixed ptx-inset-x-0 ptx-bottom-0 ptx-z-[var(--pt-z-overlay,50)] ptx-mt-[96px] ptx-flex ptx-h-auto ptx-flex-col ptx-rounded-t-[10px] ptx-border ptx-bg-background',
                 className
             )}
             {...props}
         >
-            <div className="mx-auto mt-[16px] h-[8px] w-[100px] rounded-full bg-muted" />
+            <div className="ptx-mx-auto ptx-mt-[16px] ptx-h-[8px] ptx-w-[100px] ptx-rounded-full ptx-bg-muted" />
             {children}
         </DrawerPrimitive.Content>
     </DrawerPortal>
@@ -51,12 +53,12 @@ const DrawerContent = React.forwardRef<
 DrawerContent.displayName = 'DrawerContent';
 
 const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div className={cn('grid gap-[6px] p-[16px] text-center sm:text-left', className)} {...props} />
+    <div className={cn('ptx-grid ptx-gap-[6px] ptx-p-[16px] ptx-text-center sm:ptx-text-left', className)} {...props} />
 );
 DrawerHeader.displayName = 'DrawerHeader';
 
 const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div className={cn('mt-auto flex flex-col gap-[8px] p-[16px]', className)} {...props} />
+    <div className={cn('ptx-mt-auto ptx-flex ptx-flex-col ptx-gap-[8px] ptx-p-[16px]', className)} {...props} />
 );
 DrawerFooter.displayName = 'DrawerFooter';
 
@@ -66,7 +68,7 @@ const DrawerTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <DrawerPrimitive.Title
         ref={ref}
-        className={cn('text-[18px] leading-[28px] font-semibold leading-none tracking-tight text-foreground', className)}
+        className={cn('ptx-text-lg ptx-font-semibold ptx-leading-none ptx-tracking-tight ptx-text-foreground', className)}
         {...props}
     />
 ));
@@ -78,7 +80,7 @@ const DrawerDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <DrawerPrimitive.Description
         ref={ref}
-        className={cn('text-[14px] leading-[20px] text-muted-foreground', className)}
+        className={cn('ptx-text-sm ptx-text-muted-foreground', className)}
         {...props}
     />
 ));