@ptengine/design-components 0.5.3 → 0.7.0

package/src/components/ui/menubar.tsx

@@ -22,7 +22,7 @@ const Menubar = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <MenubarPrimitive.Root
         ref={ref}
-        className={cn('flex h-[32px] items-center gap-[4px] rounded-[var(--pt-radius-md)] border bg-background p-[4px]', className)}
+        className={cn('ptx-flex ptx-h-[32px] ptx-items-center ptx-gap-[4px] ptx-rounded-[var(--pt-radius-md)] ptx-border ptx-bg-background ptx-p-[4px]', className)}
         {...props}
     />
 ));
@@ -35,7 +35,7 @@ const MenubarTrigger = React.forwardRef<
     <MenubarPrimitive.Trigger
         ref={ref}
         className={cn(
-            'flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] px-[12px] py-[4px] text-[14px] leading-[20px] font-medium text-foreground outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+            'ptx-flex ptx-cursor-default ptx-select-none ptx-items-center ptx-rounded-[var(--pt-radius-sm)] ptx-px-[12px] ptx-py-[4px] ptx-text-sm ptx-font-medium ptx-text-foreground 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',
             className
         )}
         {...props}
@@ -52,14 +52,14 @@ const MenubarSubTrigger = React.forwardRef<
     <MenubarPrimitive.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]" />
     </MenubarPrimitive.SubTrigger>
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
@@ -71,7 +71,7 @@ const MenubarSubContent = React.forwardRef<
     <MenubarPrimitive.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}
@@ -90,7 +90,7 @@ const MenubarContent = React.forwardRef<
             alignOffset={alignOffset}
             sideOffset={sideOffset}
             className={cn(
-                'z-[var(--pt-z-popup,50)] min-w-[12rem] 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]: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-[12rem] 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-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}
@@ -108,8 +108,8 @@ const MenubarItem = React.forwardRef<
     <MenubarPrimitive.Item
         ref={ref}
         className={cn(
-            'relative 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-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-            inset && 'pl-[32px]',
+            'ptx-relative 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-[disabled]:ptx-pointer-events-none data-[disabled]:ptx-opacity-50',
+            inset && 'ptx-pl-[32px]',
             className
         )}
         {...props}
@@ -124,15 +124,15 @@ const MenubarCheckboxItem = React.forwardRef<
     <MenubarPrimitive.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 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 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">
             <MenubarPrimitive.ItemIndicator>
-                <Check className="h-[16px] w-[16px]" />
+                <Check className="ptx-h-[16px] ptx-w-[16px]" />
             </MenubarPrimitive.ItemIndicator>
         </span>
         {children}
@@ -147,14 +147,14 @@ const MenubarRadioItem = React.forwardRef<
     <MenubarPrimitive.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 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 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">
             <MenubarPrimitive.ItemIndicator>
-                <Circle className="h-[8px] w-[8px] fill-current" />
+                <Circle className="ptx-h-[8px] ptx-w-[8px] ptx-fill-current" />
             </MenubarPrimitive.ItemIndicator>
         </span>
         {children}
@@ -170,7 +170,7 @@ const MenubarLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
     <MenubarPrimitive.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}
     />
 ));
@@ -182,7 +182,7 @@ const MenubarSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <MenubarPrimitive.Separator
         ref={ref}
-        className={cn('-mx-[4px] my-[4px] h-px bg-muted', className)}
+        className={cn('-ptx-mx-[4px] ptx-my-[4px] ptx-h-px ptx-bg-muted', className)}
         {...props}
     />
 ));
@@ -191,7 +191,7 @@ MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
 const MenubarShortcut = ({ 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/message-scroller.tsx

@@ -73,7 +73,7 @@ function MessageScroller({ className, ...props }: React.HTMLAttributes<HTMLDivEl
             <div
                 data-slot="message-scroller"
                 className={cn(
-                    'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',
+                    'group/message-scroller ptx-relative ptx-flex ptx-size-full ptx-min-h-0 ptx-flex-col ptx-overflow-hidden',
                     className
                 )}
                 {...props}
@@ -112,7 +112,7 @@ function MessageScrollerViewport({
             ref={viewportRef}
             data-slot="message-scroller-viewport"
             className={cn(
-                'size-full min-h-0 min-w-0 overflow-y-auto overscroll-contain [contain:content]',
+                'ptx-size-full ptx-min-h-0 ptx-min-w-0 ptx-overflow-y-auto ptx-overscroll-contain [contain:content]',
                 className
             )}
             onScroll={e => {
@@ -130,7 +130,7 @@ function MessageScrollerContent({ className, ...props }: React.HTMLAttributes<HT
     return (
         <div
             data-slot="message-scroller-content"
-            className={cn('flex h-max min-h-full flex-col gap-[32px]', className)}
+            className={cn('ptx-flex ptx-h-max ptx-min-h-full ptx-flex-col ptx-gap-[32px]', className)}
             {...props}
         />
     );
@@ -141,7 +141,7 @@ function MessageScrollerItem({ className, ...props }: React.HTMLAttributes<HTMLD
         <div
             data-slot="message-scroller-item"
             className={cn(
-                'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',
+                'ptx-min-w-0 ptx-shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',
                 className
             )}
             {...props}
@@ -174,7 +174,7 @@ function MessageScrollerButton({
             variant={variant}
             size={size}
             className={cn(
-                'absolute left-1/2 z-10 h-[32px] w-[32px] -translate-x-1/2 rounded-full transition-[opacity,transform] duration-200 data-[direction=end]:bottom-[16px] data-[direction=start]:top-[16px] data-[active=false]:pointer-events-none data-[active=false]:opacity-0 data-[active=true]:opacity-100 data-[direction=start]:[&_svg]:rotate-180',
+                'ptx-absolute ptx-left-1/2 ptx-z-10 ptx-h-[32px] ptx-w-[32px] -ptx-translate-x-1/2 ptx-rounded-full ptx-transition-[opacity,transform] ptx-duration-200 data-[direction=end]:ptx-bottom-[16px] data-[direction=start]:ptx-top-[16px] data-[active=false]:ptx-pointer-events-none data-[active=false]:ptx-opacity-0 data-[active=true]:ptx-opacity-100 data-[direction=start]:[&_svg]:ptx-rotate-180',
                 className
             )}
             onClick={e => {
@@ -186,7 +186,7 @@ function MessageScrollerButton({
             {children ?? (
                 <>
                     <ArrowDown />
-                    <span className="sr-only">
+                    <span className="ptx-sr-only">
                         {label ?? (direction === 'end' ? 'Scroll to end' : 'Scroll to start')}
                     </span>
                 </>

package/src/components/ui/message.tsx

@@ -6,7 +6,7 @@ function MessageGroup({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
     return (
         <div
             data-slot="message-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}
         />
     );
@@ -22,7 +22,7 @@ function Message({
             data-slot="message"
             data-align={align}
             className={cn(
-                'group/message relative flex w-full min-w-0 gap-[8px] text-[14px] leading-[20px] data-[align=end]:flex-row-reverse',
+                'group/message ptx-relative ptx-flex ptx-w-full ptx-min-w-0 ptx-gap-[8px] ptx-text-sm data-[align=end]:ptx-flex-row-reverse',
                 className
             )}
             {...props}
@@ -35,7 +35,7 @@ function MessageAvatar({ className, ...props }: React.HTMLAttributes<HTMLDivElem
         <div
             data-slot="message-avatar"
             className={cn(
-                'flex w-fit min-w-[32px] shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-[[data-slot=message-footer]]/message:-translate-y-[32px]',
+                'ptx-flex ptx-w-fit ptx-min-w-[32px] ptx-shrink-0 ptx-items-center ptx-justify-center ptx-self-end ptx-overflow-hidden ptx-rounded-full ptx-bg-muted group-has-[[data-slot=message-footer]]/message:-ptx-translate-y-[32px]',
                 className
             )}
             {...props}
@@ -48,7 +48,7 @@ function MessageContent({ className, ...props }: React.HTMLAttributes<HTMLDivEle
         <div
             data-slot="message-content"
             className={cn(
-                'flex w-full min-w-0 flex-col gap-[10px] break-words group-data-[align=end]/message:[&>[data-slot]]:self-end',
+                'ptx-flex ptx-w-full ptx-min-w-0 ptx-flex-col ptx-gap-[10px] ptx-break-words group-data-[align=end]/message:[&>[data-slot]]:ptx-self-end',
                 className
             )}
             {...props}
@@ -61,7 +61,7 @@ function MessageHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElem
         <div
             data-slot="message-header"
             className={cn(
-                'flex max-w-full min-w-0 items-center px-[12px] text-[13px] leading-[20px] font-medium text-muted-foreground group-has-[[data-variant=ghost]]/message:px-0',
+                'ptx-flex ptx-max-w-full ptx-min-w-0 ptx-items-center ptx-px-[12px] ptx-text-xs ptx-font-medium ptx-text-muted-foreground group-has-[[data-variant=ghost]]/message:ptx-px-0',
                 className
             )}
             {...props}
@@ -74,7 +74,7 @@ function MessageFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElem
         <div
             data-slot="message-footer"
             className={cn(
-                'flex max-w-full min-w-0 items-center px-[12px] text-[13px] leading-[20px] font-medium text-muted-foreground group-has-[[data-variant=ghost]]/message:px-0 group-data-[align=end]/message:justify-end',
+                'ptx-flex ptx-max-w-full ptx-min-w-0 ptx-items-center ptx-px-[12px] ptx-text-xs ptx-font-medium ptx-text-muted-foreground group-has-[[data-variant=ghost]]/message:ptx-px-0 group-data-[align=end]/message:ptx-justify-end',
                 className
             )}
             {...props}

package/src/components/ui/native-select.tsx

@@ -7,11 +7,11 @@ const NativeSelect = React.forwardRef<
     HTMLSelectElement,
     React.SelectHTMLAttributes<HTMLSelectElement>
 >(({ className, children, ...props }, ref) => (
-    <div className="relative w-full">
+    <div className="ptx-relative ptx-w-full">
         <select
             ref={ref}
             className={cn(
-                'h-[32px] w-full appearance-none rounded-[var(--pt-radius-md)] border border-input bg-transparent pl-[12px] pr-[32px] text-[13px] leading-[20px] text-foreground transition-colors enabled:hover:border-neutral focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:enabled:hover:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/30',
+                'ptx-h-[32px] ptx-w-full ptx-appearance-none ptx-rounded-[var(--pt-radius-md)] ptx-border ptx-border-input ptx-bg-transparent ptx-pl-[12px] ptx-pr-[32px] ptx-text-xs ptx-text-foreground ptx-transition-colors enabled:hover:ptx-border-neutral focus-visible:ptx-outline-none focus-visible:ptx-ring-1 focus-visible:ptx-ring-ring disabled:ptx-cursor-not-allowed disabled:ptx-opacity-50 aria-[invalid=true]:ptx-border-destructive aria-[invalid=true]:enabled:hover:ptx-border-destructive aria-[invalid=true]:focus-visible:ptx-ring-destructive/30',
                 className
             )}
             {...props}
@@ -19,7 +19,7 @@ const NativeSelect = React.forwardRef<
             {children}
         </select>
         <ChevronDown
-            className="pointer-events-none absolute right-[10px] top-1/2 size-[16px] -translate-y-1/2 text-muted-foreground"
+            className="ptx-pointer-events-none ptx-absolute ptx-right-[10px] ptx-top-1/2 ptx-size-[16px] -ptx-translate-y-1/2 ptx-text-muted-foreground"
             aria-hidden="true"
         />
     </div>

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

@@ -11,7 +11,7 @@ const NavigationMenu = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
     <NavigationMenuPrimitive.Root
         ref={ref}
-        className={cn('relative z-10 flex max-w-max flex-1 items-center justify-center', className)}
+        className={cn('ptx-relative ptx-z-10 ptx-flex ptx-max-w-max ptx-flex-1 ptx-items-center ptx-justify-center', className)}
         {...props}
     >
         {children}
@@ -26,7 +26,7 @@ const NavigationMenuList = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <NavigationMenuPrimitive.List
         ref={ref}
-        className={cn('group flex flex-1 list-none items-center justify-center gap-[4px]', className)}
+        className={cn('group ptx-flex ptx-flex-1 ptx-list-none ptx-items-center ptx-justify-center ptx-gap-[4px]', className)}
         {...props}
     />
 ));
@@ -35,7 +35,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-    'state-layer group inline-flex h-[32px] w-max items-center justify-center rounded-[var(--pt-radius-md)] bg-background px-[16px] py-[8px] text-[14px] leading-[20px] font-medium text-foreground transition-colors focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=open]:bg-accent'
+    'ptx-state-layer group ptx-inline-flex ptx-h-[32px] ptx-w-max ptx-items-center ptx-justify-center ptx-rounded-[var(--pt-radius-md)] ptx-bg-background ptx-px-[16px] ptx-py-[8px] ptx-text-sm ptx-font-medium ptx-text-foreground ptx-transition-colors focus:ptx-bg-accent focus:ptx-text-accent-foreground focus:ptx-outline-none disabled:ptx-cursor-not-allowed disabled:ptx-opacity-50 data-[state=open]:ptx-bg-accent'
 );
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -49,7 +49,7 @@ const NavigationMenuTrigger = React.forwardRef<
     >
         {children}{' '}
         <ChevronDown
-            className="relative top-[1px] ml-[4px] h-[12px] w-[12px] transition duration-300 group-data-[state=open]:rotate-180"
+            className="ptx-relative ptx-top-[1px] ptx-ml-[4px] ptx-h-[12px] ptx-w-[12px] ptx-transition ptx-duration-300 group-data-[state=open]:ptx-rotate-180"
             aria-hidden="true"
         />
     </NavigationMenuPrimitive.Trigger>
@@ -63,7 +63,7 @@ const NavigationMenuContent = React.forwardRef<
     <NavigationMenuPrimitive.Content
         ref={ref}
         className={cn(
-            'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+            'ptx-left-0 ptx-top-0 ptx-w-full data-[motion^=from-]:ptx-animate-in data-[motion^=to-]:ptx-animate-out data-[motion^=from-]:ptx-fade-in data-[motion^=to-]:ptx-fade-out data-[motion=from-end]:ptx-slide-in-from-right-52 data-[motion=from-start]:ptx-slide-in-from-left-52 data-[motion=to-end]:ptx-slide-out-to-right-52 data-[motion=to-start]:ptx-slide-out-to-left-52 md:ptx-absolute md:ptx-w-auto',
             className
         )}
         {...props}
@@ -77,10 +77,10 @@ const NavigationMenuViewport = React.forwardRef<
     React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
     React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-    <div className={cn('absolute left-0 top-full flex justify-center')}>
+    <div className={cn('ptx-absolute ptx-left-0 ptx-top-full ptx-flex ptx-justify-center')}>
         <NavigationMenuPrimitive.Viewport
             className={cn(
-                'origin-top-center relative mt-[6px] h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-[var(--pt-radius-md)] border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
+                'origin-top-center ptx-relative ptx-mt-[6px] ptx-h-[var(--radix-navigation-menu-viewport-height)] ptx-w-full ptx-overflow-hidden ptx-rounded-[var(--pt-radius-md)] ptx-border ptx-bg-popover ptx-text-popover-foreground ptx-shadow-md data-[state=open]:ptx-animate-in data-[state=closed]:ptx-animate-out data-[state=closed]:ptx-zoom-out-95 data-[state=open]:ptx-zoom-in-90 md:ptx-w-[var(--radix-navigation-menu-viewport-width)]',
                 className
             )}
             ref={ref}
@@ -97,12 +97,12 @@ const NavigationMenuIndicator = React.forwardRef<
     <NavigationMenuPrimitive.Indicator
         ref={ref}
         className={cn(
-            'top-full z-[1] flex h-[6px] items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
+            'ptx-top-full ptx-z-[1] ptx-flex ptx-h-[6px] ptx-items-end ptx-justify-center ptx-overflow-hidden data-[state=visible]:ptx-animate-in data-[state=hidden]:ptx-animate-out data-[state=hidden]:ptx-fade-out data-[state=visible]:ptx-fade-in',
             className
         )}
         {...props}
     >
-        <div className="relative top-[60%] h-[8px] w-[8px] rotate-45 rounded-tl-[var(--pt-radius-sm)] bg-border" />
+        <div className="ptx-relative ptx-top-[60%] ptx-h-[8px] ptx-w-[8px] ptx-rotate-45 ptx-rounded-tl-[var(--pt-radius-sm)] ptx-bg-border" />
     </NavigationMenuPrimitive.Indicator>
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;

package/src/components/ui/pagination.tsx

@@ -8,7 +8,7 @@ const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
     <nav
         role="navigation"
         aria-label="pagination"
-        className={cn('mx-auto flex w-full justify-center', className)}
+        className={cn('ptx-mx-auto ptx-flex ptx-w-full ptx-justify-center', className)}
         {...props}
     />
 );
@@ -16,7 +16,7 @@ Pagination.displayName = 'Pagination';
 
 const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
     ({ className, ...props }, ref) => (
-        <ul ref={ref} className={cn('flex flex-row items-center gap-[4px]', className)} {...props} />
+        <ul ref={ref} className={cn('ptx-flex ptx-flex-row ptx-items-center ptx-gap-[4px]', className)} {...props} />
     )
 );
 PaginationContent.displayName = 'PaginationContent';
@@ -55,10 +55,10 @@ const PaginationPrevious = ({
     <PaginationLink
         aria-label={label}
         size="default"
-        className={cn('gap-[4px] pl-[10px]', className)}
+        className={cn('ptx-gap-[4px] ptx-pl-[10px]', className)}
         {...props}
     >
-        <ChevronLeft className="h-[16px] w-[16px]" />
+        <ChevronLeft className="ptx-h-[16px] ptx-w-[16px]" />
         <span>{label}</span>
     </PaginationLink>
 );
@@ -72,11 +72,11 @@ const PaginationNext = ({
     <PaginationLink
         aria-label={label}
         size="default"
-        className={cn('gap-[4px] pr-[10px]', className)}
+        className={cn('ptx-gap-[4px] ptx-pr-[10px]', className)}
         {...props}
     >
         <span>{label}</span>
-        <ChevronRight className="h-[16px] w-[16px]" />
+        <ChevronRight className="ptx-h-[16px] ptx-w-[16px]" />
     </PaginationLink>
 );
 PaginationNext.displayName = 'PaginationNext';
@@ -88,11 +88,11 @@ const PaginationEllipsis = ({
 }: React.ComponentProps<'span'> & { label?: string }) => (
     <span
         aria-hidden
-        className={cn('flex h-[32px] w-[36px] items-center justify-center text-foreground', className)}
+        className={cn('ptx-flex ptx-h-[32px] ptx-w-[36px] ptx-items-center ptx-justify-center ptx-text-foreground', 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>
 );
 PaginationEllipsis.displayName = 'PaginationEllipsis';

package/src/components/ui/popover.tsx

@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
             align={align}
             sideOffset={sideOffset}
             className={cn(
-                'z-[var(--pt-z-popup,50)] w-[288px] rounded-[var(--pt-radius-md)] border bg-popover p-[16px] text-popover-foreground shadow-md outline-none 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-w-[288px] ptx-rounded-[var(--pt-radius-md)] ptx-border ptx-bg-popover ptx-p-[16px] ptx-text-popover-foreground ptx-shadow-md ptx-outline-none 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}

package/src/components/ui/progress.tsx

@@ -9,11 +9,11 @@ const Progress = React.forwardRef<
 >(({ className, value, ...props }, ref) => (
     <ProgressPrimitive.Root
         ref={ref}
-        className={cn('relative h-[8px] w-full overflow-hidden rounded-full bg-secondary', className)}
+        className={cn('ptx-relative ptx-h-[8px] ptx-w-full ptx-overflow-hidden ptx-rounded-full ptx-bg-secondary', className)}
         {...props}
     >
         <ProgressPrimitive.Indicator
-            className="h-full w-full flex-1 bg-primary transition-all"
+            className="ptx-h-full ptx-w-full ptx-flex-1 ptx-bg-primary ptx-transition-all"
             style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
         />
     </ProgressPrimitive.Root>

package/src/components/ui/prompt-picker.tsx

@@ -67,8 +67,8 @@ export interface PromptPickerItem {
      * 可选:条目右端的小徽标,如「即将上线」。**只放短枚举**(1-4 字),它是给整条加限定,
      * 不是第二行说明 —— 长说明走 `hint`(悬停)。
      *
-     * 用扁平 chip(`rounded-sm bg-muted`)而不是库的 `Badge` 组件:后者是
-     * `rounded-full font-semibold` 胶囊,在 32px 高的条目里显得过重,且 lin 已裁定
+     * 用扁平 chip(`ptx-rounded-sm ptx-bg-muted`)而不是库的 `Badge` 组件:后者是
+     * `ptx-rounded-full ptx-font-semibold` 胶囊,在 32px 高的条目里显得过重,且 lin 已裁定
      * Badge 只留给短枚举场景的独立标签。此处写法与 apps/x 的 ⋮ 菜单出口组一致。
      */
     badge?: string;
@@ -126,33 +126,35 @@ export interface PromptPickerProps extends Omit<React.HTMLAttributes<HTMLDivElem
    库规范(llms.txt 交互状态)是 **hover 在原底色上叠加中性 8%、边框加深黑 20%**,
    并且明文「禁止用品牌绿等彩色表达选中」。规格里那份 hover 色值来自旧的
    SuggestionCards 实测值,属于组件库成型前的写法 —— 以库规范为准。
-   机制:`state-layer` 类(preset 插件,::after 叠加 --pt-interaction-hover,
+   机制:`ptx-state-layer` 类(preset 插件,::after 叠加 --pt-interaction-hover,
    按下自动切 press)+ `[--pt-state-layer-border:1px]` 把叠层外扩到 border box,
    否则叠层缩在边框内侧、圆角与边框内圆弧不同心(错位约 1px)。 */
 const CHIP_BASE =
-    'inline-flex h-[32px] max-w-full items-center gap-[8px] rounded-[var(--pt-radius-md)] border ' +
-    'px-[12px] text-left text-[13px] leading-[20px] transition-colors ' +
-    '[&>svg]:size-[16px] [&>svg]:shrink-0 ' +
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2';
+    'ptx-inline-flex ptx-h-[32px] ptx-max-w-full ptx-items-center ptx-gap-[8px] ptx-rounded-[var(--pt-radius-md)] ptx-border ' +
+    'ptx-px-[12px] ptx-text-left ptx-text-xs ptx-transition-colors ' +
+    '[&>svg]:ptx-size-[16px] [&>svg]:ptx-shrink-0 ' +
+    'focus-visible:ptx-outline-none focus-visible:ptx-ring-2 focus-visible:ptx-ring-ring focus-visible:ptx-ring-offset-2';
 
 const CHIP_IDLE =
-    'state-layer [--pt-state-layer-border:1px] border-input bg-background text-foreground ' +
-    'hover:border-neutral';
+    'ptx-state-layer [--pt-state-layer-border:1px] ptx-border-input ptx-bg-background ptx-text-foreground ' +
+    'hover:ptx-border-neutral';
 
 /* 未上线/不可选的条目:整条降辅助色,**不挂 state-layer、不给 hover** ——
    灰着不给反馈,好过给了反馈却什么都不发生。 */
-const CHIP_DISABLED = 'border-input bg-background text-[rgb(var(--pt-text-tage))]';
+const CHIP_DISABLED = 'ptx-border-input ptx-bg-background ptx-text-[rgb(var(--pt-text-tage))]';
 
 /* 条目右端的小徽标。扁平 chip,不是库 Badge(理由见 PromptPickerItem.badge 的注释)。
-   11px/16 是辅助字号档,比条目正文 13px 低一档,不与之争夺注意力。 */
+   用 `2xs`(12/16)——比条目正文 `xs`(13/20) 低一档,不与之争夺注意力。
+   ⚠️ 原先写的是 `ptx-text-[11px] ptx-leading-[16px]`,**11px 不在字阶表里**(表里最小是 2xs 12)。
+   字阶来自 Figma Text Styles,自造档位会让「组件跟着规范走」这件事从这里开始漏。 */
 const CHIP_BADGE =
-    'ml-[8px] shrink-0 whitespace-nowrap rounded-[var(--pt-radius-sm)] bg-muted ' +
-    'px-[6px] text-[11px] leading-[16px] text-[rgb(var(--pt-text-tage))]';
+    'ptx-ml-[8px] ptx-shrink-0 ptx-whitespace-nowrap ptx-rounded-[var(--pt-radius-sm)] ptx-bg-muted ' +
+    'ptx-px-[6px] ptx-text-2xs ptx-text-[rgb(var(--pt-text-tage))]';
 
 /* 第二层顶部的分类项 —— 面包屑,不是选中态(见头注释规则 2)。
    持久态底色 = 中性 8%(库规范:选中/激活用 --pt-bg-selected,不用彩色);
    它自己不可点,所以不挂 state-layer。 */
-const CHIP_CRUMB = 'border-neutral bg-selected text-foreground';
+const CHIP_CRUMB = 'ptx-border-neutral ptx-bg-selected ptx-text-foreground';
 
 const PromptPicker = React.forwardRef<HTMLDivElement, PromptPickerProps>(
     (
@@ -200,7 +202,7 @@ const PromptPicker = React.forwardRef<HTMLDivElement, PromptPickerProps>(
         return (
             <div
                 ref={ref}
-                className={cn('flex w-full flex-col items-start gap-[10px]', className)}
+                className={cn('ptx-flex ptx-w-full ptx-flex-col ptx-items-start ptx-gap-[10px]', className)}
                 {...props}
             >
                 {/* 面包屑与列表同进同退:内容进了输入框,整个选项区(含这条分类)一起退场,
@@ -213,19 +215,19 @@ const PromptPicker = React.forwardRef<HTMLDivElement, PromptPickerProps>(
                 {branch && !hasContent && (
                     <div className={cn(CHIP_BASE, CHIP_CRUMB)}>
                         {branch.icon}
-                        <span className="min-w-0 flex-1 truncate">{branch.label}</span>
+                        <span className="ptx-min-w-0 ptx-flex-1 ptx-truncate">{branch.label}</span>
                         <button
                             type="button"
                             aria-label={backLabel}
                             onClick={handleBack}
                             className={
-                                'flex size-[24px] shrink-0 items-center justify-center rounded-[var(--pt-radius-sm)] ' +
-                                'text-[rgb(var(--pt-text-tage))] transition-colors hover:text-foreground ' +
-                                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+                                'ptx-flex ptx-size-[24px] ptx-shrink-0 ptx-items-center ptx-justify-center ptx-rounded-[var(--pt-radius-sm)] ' +
+                                'ptx-text-[rgb(var(--pt-text-tage))] ptx-transition-colors hover:ptx-text-foreground ' +
+                                'focus-visible:ptx-outline-none focus-visible:ptx-ring-2 focus-visible:ptx-ring-ring'
                             }
                         >
                             {/* 辅助图标(关闭叉)default 档 = 12px;点击区仍保 24×24 */}
-                            <X className="size-[12px]" />
+                            <X className="ptx-size-[12px]" />
                         </button>
                     </div>
                 )}
@@ -237,12 +239,12 @@ const PromptPicker = React.forwardRef<HTMLDivElement, PromptPickerProps>(
                     display:none 同时把它移出无障碍树与 Tab 序,不用额外处理焦点。 */}
                 <div
                     className={cn(
-                        'w-full flex-col items-start gap-[8px]',
-                        hasContent ? 'hidden' : 'flex'
+                        'ptx-w-full ptx-flex-col ptx-items-start ptx-gap-[8px]',
+                        hasContent ? 'ptx-hidden' : 'ptx-flex'
                     )}
                 >
                     {lead && (
-                        <p className="text-[13px] leading-[20px] text-[rgb(var(--pt-text-tage))]">
+                        <p className="ptx-text-xs ptx-text-[rgb(var(--pt-text-tage))]">
                             {lead}
                         </p>
                     )}
@@ -259,7 +261,7 @@ const PromptPicker = React.forwardRef<HTMLDivElement, PromptPickerProps>(
                                 className={cn(CHIP_BASE, CHIP_DISABLED)}
                             >
                                 {item.icon}
-                                <span className={cn('min-w-0 truncate', item.badge && 'flex-1')}>
+                                <span className={cn('ptx-min-w-0 ptx-truncate', item.badge && 'ptx-flex-1')}>
                                     {item.label}
                                 </span>
                                 {item.badge && <span className={CHIP_BADGE}>{item.badge}</span>}
@@ -273,7 +275,7 @@ const PromptPicker = React.forwardRef<HTMLDivElement, PromptPickerProps>(
                                 className={cn(CHIP_BASE, CHIP_IDLE)}
                             >
                                 {item.icon}
-                                <span className={cn('min-w-0 truncate', item.badge && 'flex-1')}>
+                                <span className={cn('ptx-min-w-0 ptx-truncate', item.badge && 'ptx-flex-1')}>
                                     {item.label}
                                 </span>
                                 {item.badge && <span className={CHIP_BADGE}>{item.badge}</span>}

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

@@ -8,7 +8,7 @@ const RadioGroup = React.forwardRef<
     React.ElementRef<typeof RadioGroupPrimitive.Root>,
     React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
 >(({ className, ...props }, ref) => {
-    return <RadioGroupPrimitive.Root className={cn('grid gap-[8px]', className)} {...props} ref={ref} />;
+    return <RadioGroupPrimitive.Root className={cn('ptx-grid ptx-gap-[8px]', className)} {...props} ref={ref} />;
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
@@ -20,13 +20,13 @@ const RadioGroupItem = React.forwardRef<
         <RadioGroupPrimitive.Item
             ref={ref}
             className={cn(
-                'aspect-square h-[16px] w-[16px] rounded-full border border-neutral text-primary transition-colors enabled:hover:border-strong data-[state=unchecked]:enabled:active:bg-press focus: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',
+                'ptx-aspect-square ptx-h-[16px] ptx-w-[16px] ptx-rounded-full ptx-border ptx-border-neutral ptx-text-primary ptx-transition-colors enabled:hover:ptx-border-strong data-[state=unchecked]:enabled:active:ptx-bg-press focus: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',
                 className
             )}
             {...props}
         >
-            <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-                <Circle className="h-[14px] w-[14px] fill-current" />
+            <RadioGroupPrimitive.Indicator className="ptx-flex ptx-items-center ptx-justify-center">
+                <Circle className="ptx-h-[14px] ptx-w-[14px] ptx-fill-current" />
             </RadioGroupPrimitive.Indicator>
         </RadioGroupPrimitive.Item>
     );

package/src/components/ui/resizable.tsx

@@ -8,7 +8,7 @@ const ResizablePanelGroup = ({
     ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
     <ResizablePrimitive.PanelGroup
-        className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
+        className={cn('ptx-flex ptx-h-full ptx-w-full data-[panel-group-direction=vertical]:ptx-flex-col', className)}
         {...props}
     />
 );
@@ -24,14 +24,14 @@ const ResizableHandle = ({
 }) => (
     <ResizablePrimitive.PanelResizeHandle
         className={cn(
-            'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-[4px] after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-[4px] data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+            'ptx-relative ptx-flex ptx-w-px ptx-items-center ptx-justify-center ptx-bg-border after:ptx-absolute after:ptx-inset-y-0 after:ptx-left-1/2 after:ptx-w-[4px] after:-ptx-translate-x-1/2 focus-visible:ptx-outline-none focus-visible:ptx-ring-1 focus-visible:ptx-ring-ring focus-visible:ptx-ring-offset-1 data-[panel-group-direction=vertical]:ptx-h-px data-[panel-group-direction=vertical]:ptx-w-full data-[panel-group-direction=vertical]:after:ptx-left-0 data-[panel-group-direction=vertical]:after:ptx-h-[4px] data-[panel-group-direction=vertical]:after:ptx-w-full data-[panel-group-direction=vertical]:after:-ptx-translate-y-1/2 data-[panel-group-direction=vertical]:after:ptx-translate-x-0 [&[data-panel-group-direction=vertical]>div]:ptx-rotate-90',
             className
         )}
         {...props}
     >
         {withHandle && (
-            <div className="z-10 flex h-[16px] w-[12px] items-center justify-center rounded-[var(--pt-radius-sm)] border bg-border">
-                <GripVertical className="h-[10px] w-[10px]" />
+            <div className="ptx-z-10 ptx-flex ptx-h-[16px] ptx-w-[12px] ptx-items-center ptx-justify-center ptx-rounded-[var(--pt-radius-sm)] ptx-border ptx-bg-border">
+                <GripVertical className="ptx-h-[10px] ptx-w-[10px]" />
             </div>
         )}
     </ResizablePrimitive.PanelResizeHandle>