@ptengine/design-components 0.6.0 → 0.7.1

package/src/components/ui/sidebar.tsx

@@ -122,7 +122,7 @@ const SidebarProvider = React.forwardRef<
                             } as React.CSSProperties
                         }
                         className={cn(
-                            'group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar',
+                            'group/sidebar-wrapper ptx-flex ptx-min-h-svh ptx-w-full has-[[data-variant=inset]]:ptx-bg-sidebar',
                             className
                         )}
                         ref={ref}
@@ -155,7 +155,7 @@ const Sidebar = React.forwardRef<
             return (
                 <div
                     className={cn(
-                        'flex h-full w-[--pt-sidebar-width] flex-col bg-sidebar text-sidebar-foreground',
+                        'ptx-flex ptx-h-full ptx-w-[--pt-sidebar-width] ptx-flex-col ptx-bg-sidebar ptx-text-sidebar-foreground',
                         className
                     )}
                     ref={ref}
@@ -172,7 +172,7 @@ const Sidebar = React.forwardRef<
                     <SheetContent
                         data-sidebar="sidebar"
                         data-mobile="true"
-                        className="w-[--pt-sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+                        className="ptx-w-[--pt-sidebar-width] ptx-bg-sidebar ptx-p-0 ptx-text-sidebar-foreground [&>button]:ptx-hidden"
                         style={
                             {
                                 '--pt-sidebar-width': SIDEBAR_WIDTH_MOBILE
@@ -180,11 +180,11 @@ const Sidebar = React.forwardRef<
                         }
                         side={side}
                     >
-                        <SheetHeader className="sr-only">
+                        <SheetHeader className="ptx-sr-only">
                             <SheetTitle>Sidebar</SheetTitle>
                             <SheetDescription>Displays the mobile sidebar.</SheetDescription>
                         </SheetHeader>
-                        <div className="flex h-full w-full flex-col">{children}</div>
+                        <div className="ptx-flex ptx-h-full ptx-w-full ptx-flex-col">{children}</div>
                     </SheetContent>
                 </Sheet>
             );
@@ -193,7 +193,7 @@ const Sidebar = React.forwardRef<
         return (
             <div
                 ref={ref}
-                className="group peer hidden text-sidebar-foreground md:block"
+                className="group peer ptx-hidden ptx-text-sidebar-foreground md:ptx-block"
                 data-state={state}
                 data-collapsible={state === 'collapsed' ? collapsible : ''}
                 data-variant={variant}
@@ -201,29 +201,29 @@ const Sidebar = React.forwardRef<
             >
                 <div
                     className={cn(
-                        'relative w-[--pt-sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
-                        'group-data-[collapsible=offcanvas]:w-0',
-                        'group-data-[side=right]:rotate-180',
+                        'ptx-relative ptx-w-[--pt-sidebar-width] ptx-bg-transparent ptx-transition-[width] ptx-duration-200 ptx-ease-linear',
+                        'group-data-[collapsible=offcanvas]:ptx-w-0',
+                        'group-data-[side=right]:ptx-rotate-180',
                         variant === 'floating' || variant === 'inset'
-                            ? 'group-data-[collapsible=icon]:w-[calc(var(--pt-sidebar-width-icon)_+_theme(spacing.4))]'
-                            : 'group-data-[collapsible=icon]:w-[--pt-sidebar-width-icon]'
+                            ? 'group-data-[collapsible=icon]:ptx-w-[calc(var(--pt-sidebar-width-icon)_+_theme(spacing.4))]'
+                            : 'group-data-[collapsible=icon]:ptx-w-[--pt-sidebar-width-icon]'
                     )}
                 />
                 <div
                     className={cn(
-                        'fixed inset-y-0 z-10 hidden h-svh w-[--pt-sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
+                        'ptx-fixed ptx-inset-y-0 ptx-z-10 ptx-hidden ptx-h-svh ptx-w-[--pt-sidebar-width] ptx-transition-[left,right,width] ptx-duration-200 ptx-ease-linear md:ptx-flex',
                         side === 'left'
-                            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--pt-sidebar-width)*-1)]'
-                            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--pt-sidebar-width)*-1)]',
+                            ? 'ptx-left-0 group-data-[collapsible=offcanvas]:ptx-left-[calc(var(--pt-sidebar-width)*-1)]'
+                            : 'ptx-right-0 group-data-[collapsible=offcanvas]:ptx-right-[calc(var(--pt-sidebar-width)*-1)]',
                         variant === 'floating' || variant === 'inset'
-                            ? 'p-[8px] group-data-[collapsible=icon]:w-[calc(var(--pt-sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
-                            : 'group-data-[collapsible=icon]:w-[--pt-sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+                            ? 'ptx-p-[8px] group-data-[collapsible=icon]:ptx-w-[calc(var(--pt-sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+                            : 'group-data-[collapsible=icon]:ptx-w-[--pt-sidebar-width-icon] group-data-[side=left]:ptx-border-r group-data-[side=right]:ptx-border-l',
                         className
                     )}
                     {...props}
                     data-sidebar="sidebar"
                 >
-                    <div className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-[var(--pt-radius)] group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border">
+                    <div className="ptx-flex ptx-h-full ptx-w-full ptx-flex-col ptx-bg-sidebar group-data-[variant=floating]:ptx-rounded-[var(--ptx-radius)] group-data-[variant=floating]:ptx-border group-data-[variant=floating]:ptx-border-sidebar-border">
                         {children}
                     </div>
                 </div>
@@ -246,7 +246,7 @@ const SidebarTrigger = React.forwardRef<
             data-sidebar="trigger"
             variant="ghost"
             size="icon"
-            className={cn('h-[28px] w-[28px]', className)}
+            className={cn('ptx-h-[28px] ptx-w-[28px]', className)}
             onClick={event => {
                 onClick?.(event);
                 toggleSidebar();
@@ -254,7 +254,7 @@ const SidebarTrigger = React.forwardRef<
             {...props}
         >
             <PanelLeft />
-            <span className="sr-only">{label}</span>
+            <span className="ptx-sr-only">{label}</span>
         </Button>
     );
 });
@@ -275,12 +275,12 @@ const SidebarRail = React.forwardRef<
             onClick={toggleSidebar}
             title={label}
             className={cn(
-                'absolute inset-y-0 z-20 hidden w-[16px] -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-[16px] group-data-[side=right]:left-0 sm:flex',
-                '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
-                '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-                'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
-                '[[data-side=left][data-collapsible=offcanvas]_&]:-right-[8px]',
-                '[[data-side=right][data-collapsible=offcanvas]_&]:-left-[8px]',
+                'ptx-absolute ptx-inset-y-0 ptx-z-20 ptx-hidden ptx-w-[16px] -ptx-translate-x-1/2 ptx-transition-all ptx-ease-linear after:ptx-absolute after:ptx-inset-y-0 after:ptx-left-1/2 after:ptx-w-[2px] hover:after:ptx-bg-sidebar-border group-data-[side=left]:-ptx-right-[16px] group-data-[side=right]:ptx-left-0 sm:ptx-flex',
+                '[[data-side=left]_&]:ptx-cursor-w-resize [[data-side=right]_&]:ptx-cursor-e-resize',
+                '[[data-side=left][data-state=collapsed]_&]:ptx-cursor-e-resize [[data-side=right][data-state=collapsed]_&]:ptx-cursor-w-resize',
+                'group-data-[collapsible=offcanvas]:ptx-translate-x-0 group-data-[collapsible=offcanvas]:after:ptx-left-full group-data-[collapsible=offcanvas]:hover:ptx-bg-sidebar',
+                '[[data-side=left][data-collapsible=offcanvas]_&]:-ptx-right-[8px]',
+                '[[data-side=right][data-collapsible=offcanvas]_&]:-ptx-left-[8px]',
                 className
             )}
             {...props}
@@ -296,8 +296,8 @@ const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<'main
             <main
                 ref={ref}
                 className={cn(
-                    'relative flex w-full flex-1 flex-col bg-background',
-                    'md:peer-data-[variant=inset]:m-[8px] md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-[8px] md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-12',
+                    'ptx-relative ptx-flex ptx-w-full ptx-flex-1 ptx-flex-col ptx-bg-background',
+                    'md:peer-data-[variant=inset]:ptx-m-[8px] md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ptx-ml-[8px] md:peer-data-[variant=inset]:ptx-ml-0 md:peer-data-[variant=inset]:ptx-rounded-12',
                     className
                 )}
                 {...props}
@@ -315,7 +315,7 @@ const SidebarInput = React.forwardRef<
         <Input
             ref={ref}
             data-sidebar="input"
-            className={cn('h-[32px] w-full bg-background', className)}
+            className={cn('ptx-h-[32px] ptx-w-full ptx-bg-background', className)}
             {...props}
         />
     );
@@ -328,7 +328,7 @@ const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div
             <div
                 ref={ref}
                 data-sidebar="header"
-                className={cn('flex flex-col gap-[8px] p-[8px]', className)}
+                className={cn('ptx-flex ptx-flex-col ptx-gap-[8px] ptx-p-[8px]', className)}
                 {...props}
             />
         );
@@ -342,7 +342,7 @@ const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div
             <div
                 ref={ref}
                 data-sidebar="footer"
-                className={cn('flex flex-col gap-[8px] p-[8px]', className)}
+                className={cn('ptx-flex ptx-flex-col ptx-gap-[8px] ptx-p-[8px]', className)}
                 {...props}
             />
         );
@@ -358,7 +358,7 @@ const SidebarSeparator = React.forwardRef<
         <Separator
             ref={ref}
             data-sidebar="separator"
-            className={cn('mx-[8px] w-auto bg-sidebar-border', className)}
+            className={cn('ptx-mx-[8px] ptx-w-auto ptx-bg-sidebar-border', className)}
             {...props}
         />
     );
@@ -372,7 +372,7 @@ const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'di
                 ref={ref}
                 data-sidebar="content"
                 className={cn(
-                    'flex min-h-0 flex-1 flex-col gap-[8px] overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+                    'ptx-flex ptx-min-h-0 ptx-flex-1 ptx-flex-col ptx-gap-[8px] ptx-overflow-auto group-data-[collapsible=icon]:ptx-overflow-hidden',
                     className
                 )}
                 {...props}
@@ -388,7 +388,7 @@ const SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'
             <div
                 ref={ref}
                 data-sidebar="group"
-                className={cn('relative flex w-full min-w-0 flex-col p-[8px]', className)}
+                className={cn('ptx-relative ptx-flex ptx-w-full ptx-min-w-0 ptx-flex-col ptx-p-[8px]', className)}
                 {...props}
             />
         );
@@ -407,8 +407,8 @@ const SidebarGroupLabel = React.forwardRef<
             ref={ref}
             data-sidebar="group-label"
             className={cn(
-                'flex h-[32px] shrink-0 items-center rounded-[var(--pt-radius-md)] px-[8px] text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-[16px] [&>svg]:shrink-0',
-                'group-data-[collapsible=icon]:-mt-[32px] group-data-[collapsible=icon]:opacity-0',
+                'ptx-flex ptx-h-[32px] ptx-shrink-0 ptx-items-center ptx-rounded-[var(--ptx-radius-md)] ptx-px-[8px] ptx-text-xs ptx-font-medium ptx-text-sidebar-foreground/70 ptx-outline-none ptx-ring-sidebar-ring ptx-transition-[margin,opacity] ptx-duration-200 ptx-ease-linear focus-visible:ptx-ring-2 [&>svg]:ptx-size-[16px] [&>svg]:ptx-shrink-0',
+                'group-data-[collapsible=icon]:-ptx-mt-[32px] group-data-[collapsible=icon]:ptx-opacity-0',
                 className
             )}
             {...props}
@@ -428,9 +428,9 @@ const SidebarGroupAction = React.forwardRef<
             ref={ref}
             data-sidebar="group-action"
             className={cn(
-                'absolute right-[12px] top-[14px] flex aspect-square w-[20px] items-center justify-center rounded-[var(--pt-radius-md)] p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-[16px] [&>svg]:shrink-0',
-                'after:absolute after:-inset-[8px] after:md:hidden',
-                'group-data-[collapsible=icon]:hidden',
+                'ptx-absolute ptx-right-[12px] ptx-top-[14px] ptx-flex ptx-aspect-square ptx-w-[20px] ptx-items-center ptx-justify-center ptx-rounded-[var(--ptx-radius-md)] ptx-p-0 ptx-text-sidebar-foreground ptx-outline-none ptx-ring-sidebar-ring ptx-transition-transform hover:ptx-bg-sidebar-accent hover:ptx-text-sidebar-accent-foreground focus-visible:ptx-ring-2 [&>svg]:ptx-size-[16px] [&>svg]:ptx-shrink-0',
+                'after:ptx-absolute after:-ptx-inset-[8px] after:md:ptx-hidden',
+                'group-data-[collapsible=icon]:ptx-hidden',
                 className
             )}
             {...props}
@@ -444,7 +444,7 @@ const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProp
         <div
             ref={ref}
             data-sidebar="group-content"
-            className={cn('w-full text-sm', className)}
+            className={cn('ptx-w-full ptx-text-sm', className)}
             {...props}
         />
     )
@@ -456,7 +456,7 @@ const SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'
         <ul
             ref={ref}
             data-sidebar="menu"
-            className={cn('flex w-full min-w-0 flex-col gap-[4px]', className)}
+            className={cn('ptx-flex ptx-w-full ptx-min-w-0 ptx-flex-col ptx-gap-[4px]', className)}
             {...props}
         />
     )
@@ -468,7 +468,7 @@ const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li
         <li
             ref={ref}
             data-sidebar="menu-item"
-            className={cn('group/menu-item relative', className)}
+            className={cn('group/menu-item ptx-relative', className)}
             {...props}
         />
     )
@@ -476,18 +476,18 @@ const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li
 SidebarMenuItem.displayName = 'SidebarMenuItem';
 
 const sidebarMenuButtonVariants = cva(
-    'peer/menu-button flex w-full items-center gap-[8px] overflow-hidden rounded-[var(--pt-radius-md)] p-[8px] text-left text-sm text-sidebar-foreground outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-[32px] aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-selected data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-[32px] group-data-[collapsible=icon]:!p-[8px] [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0',
+    'peer/menu-button ptx-flex ptx-w-full ptx-items-center ptx-gap-[8px] ptx-overflow-hidden ptx-rounded-[var(--ptx-radius-md)] ptx-p-[8px] ptx-text-left ptx-text-sm ptx-text-sidebar-foreground ptx-outline-none ptx-ring-sidebar-ring ptx-transition-[width,height,padding] hover:ptx-bg-sidebar-accent hover:ptx-text-sidebar-accent-foreground focus-visible:ptx-ring-2 active:ptx-bg-sidebar-accent active:ptx-text-sidebar-accent-foreground disabled:ptx-pointer-events-none disabled:ptx-opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:ptx-pr-[32px] aria-disabled:ptx-pointer-events-none aria-disabled:ptx-opacity-50 data-[active=true]:ptx-bg-selected data-[active=true]:ptx-font-medium data-[active=true]:ptx-text-sidebar-accent-foreground data-[state=open]:hover:ptx-bg-sidebar-accent data-[state=open]:hover:ptx-text-sidebar-accent-foreground group-data-[collapsible=icon]:!ptx-size-[32px] group-data-[collapsible=icon]:!ptx-p-[8px] [&>span:last-child]:ptx-truncate [&>svg]:ptx-size-[16px] [&>svg]:ptx-shrink-0',
     {
         variants: {
             variant: {
-                default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                default: 'hover:ptx-bg-sidebar-accent hover:ptx-text-sidebar-accent-foreground',
                 outline:
-                    'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
+                    'ptx-bg-background hover:ptx-bg-sidebar-accent hover:ptx-text-sidebar-accent-foreground'
             },
             size: {
-                default: 'h-[32px] text-sm',
-                sm: 'h-[28px] text-xs',
-                lg: 'h-[48px] text-sm group-data-[collapsible=icon]:!p-0'
+                default: 'ptx-h-[32px] ptx-text-sm',
+                sm: 'ptx-h-[28px] ptx-text-xs',
+                lg: 'ptx-h-[48px] ptx-text-sm group-data-[collapsible=icon]:!ptx-p-0'
             }
         },
         defaultVariants: {
@@ -557,14 +557,14 @@ const SidebarMenuAction = React.forwardRef<
             ref={ref}
             data-sidebar="menu-action"
             className={cn(
-                'absolute right-[4px] top-[6px] flex aspect-square w-[20px] items-center justify-center rounded-[var(--pt-radius-md)] p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-[16px] [&>svg]:shrink-0',
-                'after:absolute after:-inset-[8px] after:md:hidden',
-                'peer-data-[size=sm]/menu-button:top-[4px]',
-                'peer-data-[size=default]/menu-button:top-[6px]',
-                'peer-data-[size=lg]/menu-button:top-[10px]',
-                'group-data-[collapsible=icon]:hidden',
+                'ptx-absolute ptx-right-[4px] ptx-top-[6px] ptx-flex ptx-aspect-square ptx-w-[20px] ptx-items-center ptx-justify-center ptx-rounded-[var(--ptx-radius-md)] ptx-p-0 ptx-text-sidebar-foreground ptx-outline-none ptx-ring-sidebar-ring ptx-transition-transform hover:ptx-bg-sidebar-accent hover:ptx-text-sidebar-accent-foreground focus-visible:ptx-ring-2 peer-hover/menu-button:ptx-text-sidebar-accent-foreground [&>svg]:ptx-size-[16px] [&>svg]:ptx-shrink-0',
+                'after:ptx-absolute after:-ptx-inset-[8px] after:md:ptx-hidden',
+                'peer-data-[size=sm]/menu-button:ptx-top-[4px]',
+                'peer-data-[size=default]/menu-button:ptx-top-[6px]',
+                'peer-data-[size=lg]/menu-button:ptx-top-[10px]',
+                'group-data-[collapsible=icon]:ptx-hidden',
                 showOnHover &&
-                    'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
+                    'group-focus-within/menu-item:ptx-opacity-100 group-hover/menu-item:ptx-opacity-100 data-[state=open]:ptx-opacity-100 peer-data-[active=true]/menu-button:ptx-text-sidebar-accent-foreground md:ptx-opacity-0',
                 className
             )}
             {...props}
@@ -579,12 +579,12 @@ const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<'
             ref={ref}
             data-sidebar="menu-badge"
             className={cn(
-                'pointer-events-none absolute right-[4px] flex h-[20px] min-w-[20px] select-none items-center justify-center rounded-[var(--pt-radius-md)] px-[4px] text-xs font-medium tabular-nums text-sidebar-foreground',
-                'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-                'peer-data-[size=sm]/menu-button:top-[4px]',
-                'peer-data-[size=default]/menu-button:top-[6px]',
-                'peer-data-[size=lg]/menu-button:top-[10px]',
-                'group-data-[collapsible=icon]:hidden',
+                'ptx-pointer-events-none ptx-absolute ptx-right-[4px] ptx-flex ptx-h-[20px] ptx-min-w-[20px] ptx-select-none ptx-items-center ptx-justify-center ptx-rounded-[var(--ptx-radius-md)] ptx-px-[4px] ptx-text-xs ptx-font-medium ptx-tabular-nums ptx-text-sidebar-foreground',
+                'peer-hover/menu-button:ptx-text-sidebar-accent-foreground peer-data-[active=true]/menu-button:ptx-text-sidebar-accent-foreground',
+                'peer-data-[size=sm]/menu-button:ptx-top-[4px]',
+                'peer-data-[size=default]/menu-button:ptx-top-[6px]',
+                'peer-data-[size=lg]/menu-button:ptx-top-[10px]',
+                'group-data-[collapsible=icon]:ptx-hidden',
                 className
             )}
             {...props}
@@ -607,12 +607,12 @@ const SidebarMenuSkeleton = React.forwardRef<
         <div
             ref={ref}
             data-sidebar="menu-skeleton"
-            className={cn('flex h-[32px] items-center gap-[8px] rounded-[var(--pt-radius-md)] px-[8px]', className)}
+            className={cn('ptx-flex ptx-h-[32px] ptx-items-center ptx-gap-[8px] ptx-rounded-[var(--ptx-radius-md)] ptx-px-[8px]', className)}
             {...props}
         >
-            {showIcon && <Skeleton className="size-[16px] rounded-[var(--pt-radius-md)]" data-sidebar="menu-skeleton-icon" />}
+            {showIcon && <Skeleton className="ptx-size-[16px] ptx-rounded-[var(--ptx-radius-md)]" data-sidebar="menu-skeleton-icon" />}
             <Skeleton
-                className="h-[16px] max-w-[--skeleton-width] flex-1"
+                className="ptx-h-[16px] ptx-max-w-[--skeleton-width] ptx-flex-1"
                 data-sidebar="menu-skeleton-text"
                 style={
                     {
@@ -631,8 +631,8 @@ const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<'
             ref={ref}
             data-sidebar="menu-sub"
             className={cn(
-                'mx-[14px] flex min-w-0 translate-x-px flex-col gap-[4px] border-l border-sidebar-border px-[10px] py-[2px]',
-                'group-data-[collapsible=icon]:hidden',
+                'ptx-mx-[14px] ptx-flex ptx-min-w-0 ptx-translate-x-px ptx-flex-col ptx-gap-[4px] ptx-border-l ptx-border-sidebar-border ptx-px-[10px] ptx-py-[2px]',
+                'group-data-[collapsible=icon]:ptx-hidden',
                 className
             )}
             {...props}
@@ -663,11 +663,11 @@ const SidebarMenuSubButton = React.forwardRef<
             data-size={size}
             data-active={isActive}
             className={cn(
-                'flex h-[28px] min-w-0 -translate-x-px items-center gap-[8px] overflow-hidden rounded-[var(--pt-radius-md)] px-[8px] text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
-                'data-[active=true]:bg-selected data-[active=true]:text-sidebar-accent-foreground',
-                size === 'sm' && 'text-xs',
-                size === 'md' && 'text-sm',
-                'group-data-[collapsible=icon]:hidden',
+                'ptx-flex ptx-h-[28px] ptx-min-w-0 -ptx-translate-x-px ptx-items-center ptx-gap-[8px] ptx-overflow-hidden ptx-rounded-[var(--ptx-radius-md)] ptx-px-[8px] ptx-text-sidebar-foreground ptx-outline-none ptx-ring-sidebar-ring hover:ptx-bg-sidebar-accent hover:ptx-text-sidebar-accent-foreground focus-visible:ptx-ring-2 active:ptx-bg-sidebar-accent active:ptx-text-sidebar-accent-foreground disabled:ptx-pointer-events-none disabled:ptx-opacity-50 aria-disabled:ptx-pointer-events-none aria-disabled:ptx-opacity-50 [&>span:last-child]:ptx-truncate [&>svg]:ptx-size-[16px] [&>svg]:ptx-shrink-0 [&>svg]:ptx-text-sidebar-accent-foreground',
+                'data-[active=true]:ptx-bg-selected data-[active=true]:ptx-text-sidebar-accent-foreground',
+                size === 'sm' && 'ptx-text-xs',
+                size === 'md' && 'ptx-text-sm',
+                'group-data-[collapsible=icon]:ptx-hidden',
                 className
             )}
             {...props}

package/src/components/ui/skeleton.tsx

@@ -3,7 +3,18 @@ import * as React from 'react';
 import { cn } from '../../lib/utils';
 
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-    return <div className={cn('animate-pulse rounded-[var(--pt-radius-md)] bg-muted', className)} {...props} />;
+    return (
+        /* `data-slot` 是本库的稳定钩子（沿用 shadcn 上游约定，另有 8 个组件在用）。
+           消费方的测试请查它，**不要查 class 名** —— 类名带 `ptx-` 前缀且随构建变化，
+           按类名查会在前缀调整时静默失配（选不到元素，断言变成假通过或假失败）。
+           （注释里也别写出具体类名：Tailwind 连注释都当候选扫，会凭空生成一条
+             不带前缀的规则，check:css 会报出来。） */
+        <div
+            data-slot="skeleton"
+            className={cn('ptx-animate-pulse ptx-rounded-[var(--ptx-radius-md)] ptx-bg-muted', className)}
+            {...props}
+        />
+    );
 }
 
 export { Skeleton };

package/src/components/ui/slider.tsx

@@ -19,18 +19,18 @@ const Slider = React.forwardRef<
             value={value}
             min={min}
             className={cn(
-                'relative flex w-full touch-none select-none items-center data-[disabled]:cursor-not-allowed',
+                'ptx-relative ptx-flex ptx-w-full ptx-touch-none ptx-select-none ptx-items-center data-[disabled]:ptx-cursor-not-allowed',
                 className
             )}
             {...props}
         >
-            <SliderPrimitive.Track className="relative h-[6px] w-full grow overflow-hidden rounded-full bg-secondary">
-                <SliderPrimitive.Range className="absolute h-full bg-primary" />
+            <SliderPrimitive.Track className="ptx-relative ptx-h-[6px] ptx-w-full ptx-grow ptx-overflow-hidden ptx-rounded-full ptx-bg-secondary">
+                <SliderPrimitive.Range className="ptx-absolute ptx-h-full ptx-bg-primary" />
             </SliderPrimitive.Track>
             {values.map((_, index) => (
                 <SliderPrimitive.Thumb
                     key={index}
-                    className="block h-[16px] w-[16px] shrink-0 rounded-full border border-neutral bg-background transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-[disabled]:opacity-50"
+                    className="ptx-block ptx-h-[16px] ptx-w-[16px] ptx-shrink-0 ptx-rounded-full ptx-border ptx-border-neutral ptx-bg-background ptx-transition-colors focus-visible:ptx-outline-none focus-visible:ptx-ring-1 focus-visible:ptx-ring-ring data-[disabled]:ptx-opacity-50"
                 />
             ))}
         </SliderPrimitive.Root>

package/src/components/ui/sonner.tsx

@@ -31,10 +31,10 @@ const Toaster = ({ ...props }: ToasterProps) => {
             className="toaster group"
             toastOptions={{
                 classNames: {
-                    toast: 'group toast group-[.toaster]:bg-popover group-[.toaster]:text-popover-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
-                    description: 'group-[.toast]:text-muted-foreground',
-                    actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
-                    cancelButton: 'group-[.toast]:bg-secondary group-[.toast]:text-secondary-foreground'
+                    toast: 'group toast group-[.toaster]:ptx-bg-popover group-[.toaster]:ptx-text-popover-foreground group-[.toaster]:ptx-border-border group-[.toaster]:ptx-shadow-lg',
+                    description: 'group-[.toast]:ptx-text-muted-foreground',
+                    actionButton: 'group-[.toast]:ptx-bg-primary group-[.toast]:ptx-text-primary-foreground',
+                    cancelButton: 'group-[.toast]:ptx-bg-secondary group-[.toast]:ptx-text-secondary-foreground'
                 }
             }}
             {...props}

package/src/components/ui/spinner.tsx

@@ -12,7 +12,7 @@ function Spinner({
         <Loader2
             role="status"
             aria-label={label}
-            className={cn('size-[16px] animate-spin text-foreground', className)}
+            className={cn('ptx-size-[16px] ptx-animate-spin ptx-text-foreground', className)}
             {...props}
         />
     );

package/src/components/ui/switch.tsx

@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <SwitchPrimitives.Root
         className={cn(
-            'peer state-layer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input [--pt-state-layer-border:2px]',
+            'peer ptx-state-layer ptx-inline-flex ptx-h-[20px] ptx-w-[36px] ptx-shrink-0 ptx-cursor-pointer ptx-items-center ptx-rounded-full ptx-border-2 ptx-border-transparent ptx-transition-colors focus-visible:ptx-outline-none focus-visible:ptx-ring-2 focus-visible:ptx-ring-ring focus-visible:ptx-ring-offset-2 focus-visible:ptx-ring-offset-background disabled:ptx-cursor-not-allowed disabled:ptx-opacity-50 data-[state=checked]:ptx-bg-primary data-[state=unchecked]:ptx-bg-input [--pt-state-layer-border:2px]',
             className
         )}
         {...props}
@@ -17,7 +17,7 @@ const Switch = React.forwardRef<
     >
         <SwitchPrimitives.Thumb
             className={cn(
-                'pointer-events-none block h-[16px] w-[16px] rounded-full border border-neutral bg-background ring-0 transition-transform data-[state=checked]:translate-x-[16px] data-[state=unchecked]:translate-x-0'
+                'ptx-pointer-events-none ptx-block ptx-h-[16px] ptx-w-[16px] ptx-rounded-full ptx-border ptx-border-neutral ptx-bg-background ptx-ring-0 ptx-transition-transform data-[state=checked]:ptx-translate-x-[16px] data-[state=unchecked]:ptx-translate-x-0'
             )}
         />
     </SwitchPrimitives.Root>

package/src/components/ui/table.tsx

@@ -4,10 +4,10 @@ import { cn } from '../../lib/utils';
 
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
     ({ className, ...props }, ref) => (
-        <div className="relative w-full overflow-auto">
+        <div className="ptx-relative ptx-w-full ptx-overflow-auto">
             <table
                 ref={ref}
-                className={cn('w-full caption-bottom text-sm text-foreground', className)}
+                className={cn('ptx-w-full ptx-caption-bottom ptx-text-sm ptx-text-foreground', className)}
                 {...props}
             />
         </div>
@@ -19,7 +19,7 @@ const TableHeader = React.forwardRef<
     HTMLTableSectionElement,
     React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-    <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+    <thead ref={ref} className={cn('[&_tr]:ptx-border-b', className)} {...props} />
 ));
 TableHeader.displayName = 'TableHeader';
 
@@ -27,7 +27,7 @@ const TableBody = React.forwardRef<
     HTMLTableSectionElement,
     React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-    <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+    <tbody ref={ref} className={cn('[&_tr:last-child]:ptx-border-0', className)} {...props} />
 ));
 TableBody.displayName = 'TableBody';
 
@@ -37,7 +37,7 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <tfoot
         ref={ref}
-        className={cn('border-t bg-secondary font-medium [&>tr]:last:border-b-0', className)}
+        className={cn('ptx-border-t ptx-bg-secondary ptx-font-medium [&>tr]:last:ptx-border-b-0', className)}
         {...props}
     />
 ));
@@ -48,7 +48,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
         <tr
             ref={ref}
             className={cn(
-                'state-layer border-b transition-colors data-[state=selected]:bg-selected',
+                'ptx-state-layer ptx-border-b ptx-transition-colors data-[state=selected]:ptx-bg-selected',
                 className
             )}
             {...props}
@@ -64,7 +64,7 @@ const TableHead = React.forwardRef<
     <th
         ref={ref}
         className={cn(
-            'h-[40px] px-[12px] text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+            'ptx-h-[40px] ptx-px-[12px] ptx-text-left ptx-align-middle ptx-font-medium ptx-text-muted-foreground [&:has([role=checkbox])]:ptx-pr-0',
             className
         )}
         {...props}
@@ -78,7 +78,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <td
         ref={ref}
-        className={cn('p-[12px] align-middle [&:has([role=checkbox])]:pr-0', className)}
+        className={cn('ptx-p-[12px] ptx-align-middle [&:has([role=checkbox])]:ptx-pr-0', className)}
         {...props}
     />
 ));
@@ -88,7 +88,7 @@ const TableCaption = React.forwardRef<
     HTMLTableCaptionElement,
     React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-    <caption ref={ref} className={cn('mt-[16px] text-sm text-muted-foreground', className)} {...props} />
+    <caption ref={ref} className={cn('ptx-mt-[16px] ptx-text-sm ptx-text-muted-foreground', className)} {...props} />
 ));
 TableCaption.displayName = 'TableCaption';
 

package/src/components/ui/tabs.tsx

@@ -20,21 +20,21 @@ const TabsContext = React.createContext<{ variant: TabsVariant; size: TabsSize }
 
 const LIST_SIZE: Record<TabsVariant, Record<TabsSize, string>> = {
     segmented: {
-        sm: 'h-[24px] p-[2px]',
-        default: 'h-[32px] p-[4px]',
-        lg: 'h-[40px] p-[4px]'
+        sm: 'ptx-h-[24px] ptx-p-[2px]',
+        default: 'ptx-h-[32px] ptx-p-[4px]',
+        lg: 'ptx-h-[40px] ptx-p-[4px]'
     },
     line: {
-        sm: 'h-[24px] gap-[12px]',
-        default: 'h-[32px] gap-[16px]',
-        lg: 'h-[40px] gap-[20px]'
+        sm: 'ptx-h-[24px] ptx-gap-[12px]',
+        default: 'ptx-h-[32px] ptx-gap-[16px]',
+        lg: 'ptx-h-[40px] ptx-gap-[20px]'
     }
 };
 
 const TRIGGER_TEXT: Record<TabsSize, string> = {
-    sm: 'text-2xs',
-    default: 'text-xs',
-    lg: 'text-sm'
+    sm: 'ptx-text-2xs',
+    default: 'ptx-text-xs',
+    lg: 'ptx-text-sm'
 };
 
 const Tabs = React.forwardRef<
@@ -62,10 +62,10 @@ const TabsList = React.forwardRef<
         <TabsPrimitive.List
             ref={ref}
             className={cn(
-                'inline-flex items-center text-muted-foreground',
-                variant === 'segmented' && 'justify-center rounded-[var(--pt-radius)] bg-muted',
+                'ptx-inline-flex ptx-items-center ptx-text-muted-foreground',
+                variant === 'segmented' && 'ptx-justify-center ptx-rounded-[var(--ptx-radius)] ptx-bg-muted',
                 /* line:整宽 + 底部分隔线,标签左对齐 */
-                variant === 'line' && 'w-full justify-start border-b border-border',
+                variant === 'line' && 'ptx-w-full ptx-justify-start ptx-border-b ptx-border-border',
                 LIST_SIZE[variant][size],
                 className
             )}
@@ -84,15 +84,15 @@ const TabsTrigger = React.forwardRef<
         <TabsPrimitive.Trigger
             ref={ref}
             className={cn(
-                'inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+                'ptx-inline-flex ptx-items-center ptx-justify-center ptx-whitespace-nowrap ptx-font-medium ptx-ring-offset-background ptx-transition-colors hover:ptx-text-foreground focus-visible:ptx-outline-none focus-visible:ptx-ring-2 focus-visible:ptx-ring-ring focus-visible:ptx-ring-offset-2 disabled:ptx-pointer-events-none disabled:ptx-opacity-50',
                 TRIGGER_TEXT[size],
                 /* segmented:选中项白底浮起。按设计铁律不加阴影——白底与灰底容器的
                    明度差已足够表达选中,阴影在暗色模式下还会失效。 */
                 variant === 'segmented' &&
-                    'h-full rounded-[var(--pt-radius-sm)] px-[12px] data-[state=active]:bg-background data-[state=active]:text-foreground',
+                    'ptx-h-full ptx-rounded-[var(--ptx-radius-sm)] ptx-px-[12px] data-[state=active]:ptx-bg-background data-[state=active]:ptx-text-foreground',
                 /* line:选中项底部 2px 实线,-mb-px 让它压住 List 的分隔线 */
                 variant === 'line' &&
-                    '-mb-px h-full border-b-2 border-transparent px-[2px] data-[state=active]:border-foreground data-[state=active]:text-foreground',
+                    '-ptx-mb-px ptx-h-full ptx-border-b-2 ptx-border-transparent ptx-px-[2px] data-[state=active]:ptx-border-foreground data-[state=active]:ptx-text-foreground',
                 className
             )}
             {...props}
@@ -108,7 +108,7 @@ const TabsContent = React.forwardRef<
     <TabsPrimitive.Content
         ref={ref}
         className={cn(
-            'mt-[8px] ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+            'ptx-mt-[8px] ptx-ring-offset-background focus-visible:ptx-outline-none focus-visible:ptx-ring-2 focus-visible:ptx-ring-ring focus-visible:ptx-ring-offset-2',
             className
         )}
         {...props}

package/src/components/ui/textarea.tsx

@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         return (
             <textarea
                 className={cn(
-                    'flex min-h-[60px] w-full rounded-[var(--pt-radius-md)] border border-input bg-transparent px-[12px] py-[8px] text-sm placeholder:text-muted-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-flex ptx-min-h-[60px] ptx-w-full ptx-rounded-[var(--ptx-radius-md)] ptx-border ptx-border-input ptx-bg-transparent ptx-px-[12px] ptx-py-[8px] ptx-text-sm placeholder:ptx-text-muted-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
                 )}
                 ref={ref}

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

@@ -17,7 +17,7 @@ const ToggleGroup = React.forwardRef<
 >(({ className, variant, size, children, ...props }, ref) => (
     <ToggleGroupPrimitive.Root
         ref={ref}
-        className={cn('flex items-center justify-center gap-[4px]', className)}
+        className={cn('ptx-flex ptx-items-center ptx-justify-center ptx-gap-[4px]', className)}
         {...props}
     >
         <ToggleGroupContext.Provider value={{ variant, size }}>