@ptengine/design-components 0.6.0 → 0.7.0

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

@@ -25,14 +25,14 @@ const DropdownMenuSubTrigger = React.forwardRef<
     <DropdownMenuPrimitive.SubTrigger
         ref={ref}
         className={cn(
-            'flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] px-[8px] py-[6px] text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
-            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 data-[state=open]:ptx-bg-accent',
+            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]" />
     </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
@@ -44,7 +44,7 @@ const DropdownMenuSubContent = React.forwardRef<
     <DropdownMenuPrimitive.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}
@@ -61,8 +61,8 @@ const DropdownMenuContent = React.forwardRef<
             ref={ref}
             sideOffset={sideOffset}
             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}
@@ -80,8 +80,8 @@ const DropdownMenuItem = React.forwardRef<
     <DropdownMenuPrimitive.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-sm 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}
@@ -96,15 +96,15 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     <DropdownMenuPrimitive.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-sm 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">
             <DropdownMenuPrimitive.ItemIndicator>
-                <Check className="h-[16px] w-[16px]" />
+                <Check className="ptx-h-[16px] ptx-w-[16px]" />
             </DropdownMenuPrimitive.ItemIndicator>
         </span>
         {children}
@@ -119,14 +119,14 @@ const DropdownMenuRadioItem = React.forwardRef<
     <DropdownMenuPrimitive.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-sm 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">
             <DropdownMenuPrimitive.ItemIndicator>
-                <Circle className="h-[8px] w-[8px] fill-current" />
+                <Circle className="ptx-h-[8px] ptx-w-[8px] ptx-fill-current" />
             </DropdownMenuPrimitive.ItemIndicator>
         </span>
         {children}
@@ -142,7 +142,7 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
     <DropdownMenuPrimitive.Label
         ref={ref}
-        className={cn('px-[8px] py-[6px] text-sm font-semibold', inset && 'pl-[32px]', className)}
+        className={cn('ptx-px-[8px] ptx-py-[6px] ptx-text-sm ptx-font-semibold', inset && 'ptx-pl-[32px]', className)}
         {...props}
     />
 ));
@@ -154,7 +154,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <DropdownMenuPrimitive.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}
     />
 ));
@@ -162,7 +162,7 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
     return (
-        <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
+        <span className={cn('ptx-ml-auto ptx-text-xs ptx-tracking-widest ptx-opacity-60', className)} {...props} />
     );
 };
 DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';

package/src/components/ui/empty.tsx

@@ -7,7 +7,7 @@ function Empty({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
     return (
         <div
             className={cn(
-                'flex min-w-0 flex-1 flex-col items-center justify-center gap-[24px] text-balance rounded-[var(--pt-radius)] border border-dashed p-[24px] text-center text-foreground md:p-[48px]',
+                'ptx-flex ptx-min-w-0 ptx-flex-1 ptx-flex-col ptx-items-center ptx-justify-center ptx-gap-[24px] ptx-text-balance ptx-rounded-[var(--pt-radius)] ptx-border ptx-border-dashed ptx-p-[24px] ptx-text-center ptx-text-foreground md:ptx-p-[48px]',
                 className
             )}
             {...props}
@@ -18,17 +18,17 @@ function Empty({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
 function EmptyHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
     return (
         <div
-            className={cn('flex max-w-sm flex-col items-center gap-[8px] text-center', className)}
+            className={cn('ptx-flex ptx-max-w-sm ptx-flex-col ptx-items-center ptx-gap-[8px] ptx-text-center', className)}
             {...props}
         />
     );
 }
 
-const emptyMediaVariants = cva('flex shrink-0 items-center justify-center', {
+const emptyMediaVariants = cva('ptx-flex ptx-shrink-0 ptx-items-center ptx-justify-center', {
     variants: {
         variant: {
             default: '',
-            icon: 'size-[40px] rounded-[var(--pt-radius)] bg-secondary text-foreground [&_svg]:size-[24px]'
+            icon: 'ptx-size-[40px] ptx-rounded-[var(--pt-radius)] ptx-bg-secondary ptx-text-foreground [&_svg]:ptx-size-[24px]'
         }
     },
     defaultVariants: {
@@ -45,14 +45,14 @@ function EmptyMedia({
 }
 
 function EmptyTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-    return <div className={cn('text-lg font-medium tracking-tight', className)} {...props} />;
+    return <div className={cn('ptx-text-lg ptx-font-medium ptx-tracking-tight', className)} {...props} />;
 }
 
 function EmptyDescription({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
     return (
         <div
             className={cn(
-                'text-sm leading-relaxed text-muted-foreground [&>a]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+                'ptx-text-sm ptx-leading-relaxed ptx-text-muted-foreground [&>a]:ptx-text-primary [&>a]:ptx-underline [&>a]:ptx-underline-offset-4',
                 className
             )}
             {...props}
@@ -64,7 +64,7 @@ function EmptyContent({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
     return (
         <div
             className={cn(
-                'flex w-full max-w-sm min-w-0 flex-col items-center gap-[16px] text-balance text-sm',
+                'ptx-flex ptx-w-full ptx-max-w-sm ptx-min-w-0 ptx-flex-col ptx-items-center ptx-gap-[16px] ptx-text-balance ptx-text-sm',
                 className
             )}
             {...props}

package/src/components/ui/field.tsx

@@ -6,14 +6,14 @@ import { Label } from './label';
 import { Separator } from './separator';
 
 function FieldSet({ className, ...props }: React.FieldsetHTMLAttributes<HTMLFieldSetElement>) {
-    return <fieldset className={cn('flex flex-col gap-[24px]', className)} {...props} />;
+    return <fieldset className={cn('ptx-flex ptx-flex-col ptx-gap-[24px]', className)} {...props} />;
 }
 
-const fieldLegendVariants = cva('mb-[12px] font-medium text-foreground', {
+const fieldLegendVariants = cva('ptx-mb-[12px] ptx-font-medium ptx-text-foreground', {
     variants: {
         variant: {
-            legend: 'text-base',
-            label: 'text-sm'
+            legend: 'ptx-text-base',
+            label: 'ptx-text-sm'
         }
     },
     defaultVariants: {
@@ -30,15 +30,15 @@ function FieldLegend({
 }
 
 function FieldGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-    return <div className={cn('group/field-group flex w-full flex-col gap-[28px]', className)} {...props} />;
+    return <div className={cn('group/field-group ptx-flex ptx-w-full ptx-flex-col ptx-gap-[28px]', className)} {...props} />;
 }
 
-const fieldVariants = cva('group/field flex w-full gap-[8px] data-[invalid=true]:text-destructive', {
+const fieldVariants = cva('group/field ptx-flex ptx-w-full ptx-gap-[8px] data-[invalid=true]:ptx-text-destructive', {
     variants: {
         orientation: {
-            vertical: 'flex-col',
-            horizontal: 'flex-row items-center',
-            responsive: 'flex-col md:flex-row md:items-center'
+            vertical: 'ptx-flex-col',
+            horizontal: 'ptx-flex-row ptx-items-center',
+            responsive: 'ptx-flex-col md:ptx-flex-row md:ptx-items-center'
         }
     },
     defaultVariants: {
@@ -64,7 +64,7 @@ function Field({
 function FieldContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
     return (
         <div
-            className={cn('group/field-content flex flex-1 flex-col gap-[6px] leading-snug', className)}
+            className={cn('group/field-content ptx-flex ptx-flex-1 ptx-flex-col ptx-gap-[6px] ptx-leading-snug', className)}
             {...props}
         />
     );
@@ -74,7 +74,7 @@ function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>)
     return (
         <Label
             data-slot="field-label"
-            className={cn('flex w-fit gap-[8px] leading-snug', className)}
+            className={cn('ptx-flex ptx-w-fit ptx-gap-[8px] ptx-leading-snug', className)}
             {...props}
         />
     );
@@ -84,7 +84,7 @@ function FieldTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement
     return (
         <div
             className={cn(
-                'flex w-fit items-center gap-[8px] text-sm font-medium leading-snug text-foreground',
+                'ptx-flex ptx-w-fit ptx-items-center ptx-gap-[8px] ptx-text-sm ptx-font-medium ptx-leading-snug ptx-text-foreground',
                 className
             )}
             {...props}
@@ -95,7 +95,7 @@ function FieldTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement
 function FieldDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
     return (
         <p
-            className={cn('text-sm font-normal leading-normal text-muted-foreground', className)}
+            className={cn('ptx-text-sm ptx-font-normal ptx-leading-normal ptx-text-muted-foreground', className)}
             {...props}
         />
     );
@@ -107,10 +107,10 @@ function FieldSeparator({
     ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
     return (
-        <div className={cn('relative -my-[8px] h-[20px] text-sm', className)} {...props}>
-            <Separator className="absolute inset-0 top-1/2" />
+        <div className={cn('ptx-relative -ptx-my-[8px] ptx-h-[20px] ptx-text-sm', className)} {...props}>
+            <Separator className="ptx-absolute ptx-inset-0 ptx-top-1/2" />
             {children && (
-                <span className="relative mx-auto flex w-fit items-center justify-center bg-background px-[8px] text-muted-foreground">
+                <span className="ptx-relative ptx-mx-auto ptx-flex ptx-w-fit ptx-items-center ptx-justify-center ptx-bg-background ptx-px-[8px] ptx-text-muted-foreground">
                     {children}
                 </span>
             )}
@@ -138,7 +138,7 @@ function FieldError({
             return messages[0];
         }
         return (
-            <ul className="ml-[16px] flex list-disc flex-col gap-[4px]">
+            <ul className="ptx-ml-[16px] ptx-flex ptx-list-disc ptx-flex-col ptx-gap-[4px]">
                 {messages.map((message, index) => (
                     <li key={index}>{message}</li>
                 ))}
@@ -153,7 +153,7 @@ function FieldError({
     return (
         <div
             role="alert"
-            className={cn('text-sm font-normal text-destructive', className)}
+            className={cn('ptx-text-sm ptx-font-normal ptx-text-destructive', className)}
             {...props}
         >
             {content}

package/src/components/ui/hover-card.tsx

@@ -16,7 +16,7 @@ const HoverCardContent = React.forwardRef<
         align={align}
         sideOffset={sideOffset}
         className={cn(
-            'z-[var(--pt-z-popup,50)] w-[256px] 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-[256px] 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/input-group.tsx

@@ -9,11 +9,11 @@ function InputGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement
         <div
             role="group"
             className={cn(
-                'group/input-group relative flex h-[32px] w-full items-center gap-[8px] rounded-[var(--pt-radius-md)] border border-input px-[12px] transition-colors',
-                'hover:border-neutral',
-                'has-[input:focus-visible]:ring-1 has-[input:focus-visible]:ring-ring',
-                'has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]]:hover:border-destructive',
-                'has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50 has-[input:disabled]:hover:border-input',
+                'group/input-group ptx-relative ptx-flex ptx-h-[32px] ptx-w-full ptx-items-center ptx-gap-[8px] ptx-rounded-[var(--pt-radius-md)] ptx-border ptx-border-input ptx-px-[12px] ptx-transition-colors',
+                'hover:ptx-border-neutral',
+                'has-[input:focus-visible]:ptx-ring-1 has-[input:focus-visible]:ptx-ring-ring',
+                'has-[input[aria-invalid=true]]:ptx-border-destructive has-[input[aria-invalid=true]]:hover:ptx-border-destructive',
+                'has-[input:disabled]:ptx-cursor-not-allowed has-[input:disabled]:ptx-opacity-50 has-[input:disabled]:hover:ptx-border-input',
                 className
             )}
             {...props}
@@ -28,7 +28,7 @@ const InputGroupInput = React.forwardRef<
     <input
         ref={ref}
         className={cn(
-            'h-full w-full flex-1 bg-transparent text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed',
+            'ptx-h-full ptx-w-full ptx-flex-1 ptx-bg-transparent ptx-text-xs ptx-text-foreground placeholder:ptx-text-muted-foreground focus-visible:ptx-outline-none disabled:ptx-cursor-not-allowed',
             className
         )}
         {...props}
@@ -37,12 +37,12 @@ const InputGroupInput = React.forwardRef<
 InputGroupInput.displayName = 'InputGroupInput';
 
 const inputGroupAddonVariants = cva(
-    'flex items-center gap-[8px] text-sm text-muted-foreground [&_svg]:size-[16px] [&_svg]:shrink-0',
+    'ptx-flex ptx-items-center ptx-gap-[8px] ptx-text-sm ptx-text-muted-foreground [&_svg]:ptx-size-[16px] [&_svg]:ptx-shrink-0',
     {
         variants: {
             align: {
-                'inline-start': 'order-first',
-                'inline-end': 'order-last'
+                'inline-start': 'ptx-order-first',
+                'inline-end': 'ptx-order-last'
             }
         },
         defaultVariants: {
@@ -62,7 +62,7 @@ function InputGroupAddon({
 function InputGroupText({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
     return (
         <span
-            className={cn('flex items-center gap-[8px] text-sm text-muted-foreground', className)}
+            className={cn('ptx-flex ptx-items-center ptx-gap-[8px] ptx-text-sm ptx-text-muted-foreground', className)}
             {...props}
         />
     );
@@ -74,7 +74,7 @@ function InputGroupButton({
     variant = 'ghost',
     ...props
 }: React.ComponentProps<typeof Button>) {
-    return <Button size={size} variant={variant} className={cn('shrink-0', className)} {...props} />;
+    return <Button size={size} variant={variant} className={cn('ptx-shrink-0', className)} {...props} />;
 }
 
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText };

package/src/components/ui/input-otp.tsx

@@ -11,10 +11,10 @@ const InputOTP = React.forwardRef<
     <OTPInput
         ref={ref}
         containerClassName={cn(
-            'group/input-otp flex items-center gap-[8px] has-[:disabled]:opacity-50',
+            'group/input-otp ptx-flex ptx-items-center ptx-gap-[8px] has-[:disabled]:ptx-opacity-50',
             containerClassName
         )}
-        className={cn('disabled:cursor-not-allowed', className)}
+        className={cn('disabled:ptx-cursor-not-allowed', className)}
         {...props}
     />
 ));
@@ -22,7 +22,7 @@ InputOTP.displayName = 'InputOTP';
 
 const InputOTPGroup = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
     ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn('flex items-center', className)} {...props} />
+        <div ref={ref} className={cn('ptx-flex ptx-items-center', className)} {...props} />
     )
 );
 InputOTPGroup.displayName = 'InputOTPGroup';
@@ -38,16 +38,16 @@ const InputOTPSlot = React.forwardRef<
         <div
             ref={ref}
             className={cn(
-                'relative flex h-[32px] w-[36px] items-center justify-center border-y border-r border-input text-xs text-foreground transition-all first:rounded-l-[var(--pt-radius-md)] first:border-l last:rounded-r-[var(--pt-radius-md)] group-hover/input-otp:border-neutral',
-                isActive && 'z-10 ring-1 ring-ring',
+                'ptx-relative ptx-flex ptx-h-[32px] ptx-w-[36px] ptx-items-center ptx-justify-center ptx-border-y ptx-border-r ptx-border-input ptx-text-xs ptx-text-foreground ptx-transition-all first:ptx-rounded-l-[var(--pt-radius-md)] first:ptx-border-l last:ptx-rounded-r-[var(--pt-radius-md)] group-hover/input-otp:ptx-border-neutral',
+                isActive && 'ptx-z-10 ptx-ring-1 ptx-ring-ring',
                 className
             )}
             {...props}
         >
             {char}
             {hasFakeCaret && (
-                <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-                    <div className="h-[16px] w-px animate-caret-blink bg-foreground duration-1000" />
+                <div className="ptx-pointer-events-none ptx-absolute ptx-inset-0 ptx-flex ptx-items-center ptx-justify-center">
+                    <div className="ptx-h-[16px] ptx-w-px ptx-animate-caret-blink ptx-bg-foreground ptx-duration-1000" />
                 </div>
             )}
         </div>
@@ -57,8 +57,8 @@ InputOTPSlot.displayName = 'InputOTPSlot';
 
 const InputOTPSeparator = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
     ({ ...props }, ref) => (
-        <div ref={ref} role="separator" className="text-muted-foreground" {...props}>
-            <Minus className="h-[16px] w-[16px]" />
+        <div ref={ref} role="separator" className="ptx-text-muted-foreground" {...props}>
+            <Minus className="ptx-h-[16px] ptx-w-[16px]" />
         </div>
     )
 );

package/src/components/ui/input.tsx

@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             <input
                 type={type}
                 className={cn(
-                    'flex h-[32px] w-full rounded-[var(--pt-radius-md)] border border-input bg-transparent px-[12px] py-[4px] text-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground 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-h-[32px] ptx-w-full ptx-rounded-[var(--pt-radius-md)] ptx-border ptx-border-input ptx-bg-transparent ptx-px-[12px] ptx-py-[4px] ptx-text-xs ptx-transition-colors file:ptx-border-0 file:ptx-bg-transparent file:ptx-text-sm file:ptx-font-medium placeholder:ptx-text-muted-foreground 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/item.tsx

@@ -6,25 +6,25 @@ import { cn } from '../../lib/utils';
 import { Separator } from './separator';
 
 function ItemGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-    return <div role="list" className={cn('group/item-group flex flex-col', className)} {...props} />;
+    return <div role="list" className={cn('group/item-group ptx-flex ptx-flex-col', className)} {...props} />;
 }
 
 function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
-    return <Separator orientation="horizontal" className={cn('my-0', className)} {...props} />;
+    return <Separator orientation="horizontal" className={cn('ptx-my-0', className)} {...props} />;
 }
 
 const itemVariants = cva(
-    'group/item flex flex-wrap items-center rounded-[var(--pt-radius-md)] border text-sm text-foreground outline-none transition-colors',
+    'group/item ptx-flex ptx-flex-wrap ptx-items-center ptx-rounded-[var(--pt-radius-md)] ptx-border ptx-text-sm ptx-text-foreground ptx-outline-none ptx-transition-colors',
     {
         variants: {
             variant: {
-                default: 'border-transparent',
-                outline: 'border-border',
-                muted: 'border-transparent bg-muted'
+                default: 'ptx-border-transparent',
+                outline: 'ptx-border-border',
+                muted: 'ptx-border-transparent ptx-bg-muted'
             },
             size: {
-                default: 'gap-[16px] p-[16px]',
-                sm: 'gap-[10px] px-[16px] py-[12px]'
+                default: 'ptx-gap-[16px] ptx-p-[16px]',
+                sm: 'ptx-gap-[10px] ptx-px-[16px] ptx-py-[12px]'
             }
         },
         defaultVariants: {
@@ -45,12 +45,12 @@ function Item({
     return <Comp className={cn(itemVariants({ variant, size }), className)} {...props} />;
 }
 
-const itemMediaVariants = cva('flex shrink-0 items-center justify-center gap-[8px] [&_svg]:pointer-events-none', {
+const itemMediaVariants = cva('ptx-flex ptx-shrink-0 ptx-items-center ptx-justify-center ptx-gap-[8px] [&_svg]:ptx-pointer-events-none', {
     variants: {
         variant: {
-            default: 'bg-transparent [&_svg]:size-[20px] [&_svg]:text-muted-foreground',
-            icon: 'size-[32px] rounded-[var(--pt-radius-sm)] border bg-secondary [&_svg]:size-[16px] [&_svg]:text-foreground',
-            image: 'size-[40px] overflow-hidden rounded-[var(--pt-radius-sm)] [&_img]:size-full [&_img]:object-cover'
+            default: 'ptx-bg-transparent [&_svg]:ptx-size-[20px] [&_svg]:ptx-text-muted-foreground',
+            icon: 'ptx-size-[32px] ptx-rounded-[var(--pt-radius-sm)] ptx-border ptx-bg-secondary [&_svg]:ptx-size-[16px] [&_svg]:ptx-text-foreground',
+            image: 'ptx-size-[40px] ptx-overflow-hidden ptx-rounded-[var(--pt-radius-sm)] [&_img]:ptx-size-full [&_img]:ptx-object-cover'
         }
     },
     defaultVariants: {
@@ -67,13 +67,13 @@ function ItemMedia({
 }
 
 function ItemContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-    return <div className={cn('flex flex-1 flex-col gap-[4px]', className)} {...props} />;
+    return <div className={cn('ptx-flex ptx-flex-1 ptx-flex-col ptx-gap-[4px]', className)} {...props} />;
 }
 
 function ItemTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
     return (
         <div
-            className={cn('flex w-fit items-center gap-[8px] text-sm font-medium leading-snug', className)}
+            className={cn('ptx-flex ptx-w-fit ptx-items-center ptx-gap-[8px] ptx-text-sm ptx-font-medium ptx-leading-snug', className)}
             {...props}
         />
     );
@@ -82,25 +82,25 @@ function ItemTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>
 function ItemDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
     return (
         <p
-            className={cn('line-clamp-2 text-sm leading-normal text-muted-foreground', className)}
+            className={cn('ptx-line-clamp-2 ptx-text-sm ptx-leading-normal ptx-text-muted-foreground', className)}
             {...props}
         />
     );
 }
 
 function ItemActions({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-    return <div className={cn('flex items-center gap-[8px]', className)} {...props} />;
+    return <div className={cn('ptx-flex ptx-items-center ptx-gap-[8px]', className)} {...props} />;
 }
 
 function ItemHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
     return (
-        <div className={cn('flex basis-full items-center justify-between gap-[8px]', className)} {...props} />
+        <div className={cn('ptx-flex ptx-basis-full ptx-items-center ptx-justify-between ptx-gap-[8px]', className)} {...props} />
     );
 }
 
 function ItemFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
     return (
-        <div className={cn('flex basis-full items-center justify-between gap-[8px]', className)} {...props} />
+        <div className={cn('ptx-flex ptx-basis-full ptx-items-center ptx-justify-between ptx-gap-[8px]', className)} {...props} />
     );
 }
 

package/src/components/ui/kbd.tsx

@@ -6,7 +6,7 @@ function Kbd({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
     return (
         <kbd
             className={cn(
-                'pointer-events-none inline-flex h-[20px] w-fit min-w-[20px] select-none items-center justify-center gap-[4px] rounded-[var(--pt-radius-sm)] bg-muted px-[4px] font-sans text-2xs font-medium text-muted-foreground [&_svg]:size-[12px]',
+                'ptx-pointer-events-none ptx-inline-flex ptx-h-[20px] ptx-w-fit ptx-min-w-[20px] ptx-select-none ptx-items-center ptx-justify-center ptx-gap-[4px] ptx-rounded-[var(--pt-radius-sm)] ptx-bg-muted ptx-px-[4px] ptx-font-sans ptx-text-2xs ptx-font-medium ptx-text-muted-foreground [&_svg]:ptx-size-[12px]',
                 className
             )}
             {...props}
@@ -15,7 +15,7 @@ function Kbd({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
 }
 
 function KbdGroup({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
-    return <span className={cn('inline-flex items-center gap-[4px]', className)} {...props} />;
+    return <span className={cn('ptx-inline-flex ptx-items-center ptx-gap-[4px]', className)} {...props} />;
 }
 
 export { Kbd, KbdGroup };

package/src/components/ui/label.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
 
 const labelVariants = cva(
-    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50'
+    'ptx-text-sm ptx-font-medium ptx-leading-none peer-disabled:ptx-cursor-not-allowed peer-disabled:ptx-opacity-50'
 );
 
 const Label = React.forwardRef<

package/src/components/ui/marker.tsx

@@ -5,14 +5,14 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
 
 const markerVariants = cva(
-    "group/marker relative flex min-h-[16px] w-full items-center gap-[8px] text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-[16px] [&:is(a)]:underline [&:is(a)]:underline-offset-4 [&:is(a):hover]:text-foreground",
+    "group/marker ptx-relative ptx-flex ptx-min-h-[16px] ptx-w-full ptx-items-center ptx-gap-[8px] ptx-text-left ptx-text-sm ptx-text-muted-foreground [&_svg:not([class*='size-'])]:ptx-size-[16px] [&:is(a)]:ptx-underline [&:is(a)]:ptx-underline-offset-4 [&:is(a):hover]:ptx-text-foreground",
     {
         variants: {
             variant: {
                 default: '',
                 separator:
-                    'before:mr-[4px] before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-[4px] after:h-px after:min-w-0 after:flex-1 after:bg-border',
-                border: 'border-b border-border pb-[8px]'
+                    'before:ptx-mr-[4px] before:ptx-h-px before:ptx-min-w-0 before:ptx-flex-1 before:ptx-bg-border after:ptx-ml-[4px] after:ptx-h-px after:ptx-min-w-0 after:ptx-flex-1 after:ptx-bg-border',
+                border: 'ptx-border-b ptx-border-border ptx-pb-[8px]'
             }
         }
     }
@@ -45,7 +45,7 @@ function MarkerIcon({ className, ...props }: React.HTMLAttributes<HTMLSpanElemen
         <span
             data-slot="marker-icon"
             aria-hidden="true"
-            className={cn("size-[16px] shrink-0 [&_svg:not([class*='size-'])]:size-[16px]", className)}
+            className={cn("ptx-size-[16px] ptx-shrink-0 [&_svg:not([class*='size-'])]:ptx-size-[16px]", className)}
             {...props}
         />
     );
@@ -56,7 +56,7 @@ function MarkerContent({ className, ...props }: React.HTMLAttributes<HTMLSpanEle
         <span
             data-slot="marker-content"
             className={cn(
-                'min-w-0 break-words group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center [&_a]:underline [&_a]:underline-offset-4 [&_a:hover]:text-foreground',
+                'ptx-min-w-0 ptx-break-words group-data-[variant=separator]/marker:ptx-flex-none group-data-[variant=separator]/marker:ptx-text-center [&_a]:ptx-underline [&_a]:ptx-underline-offset-4 [&_a:hover]:ptx-text-foreground',
                 className
             )}
             {...props}