@ptengine/design-components 0.5.3 → 0.7.0

package/src/components/ui/scroll-area.tsx

@@ -9,10 +9,10 @@ const ScrollArea = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
     <ScrollAreaPrimitive.Root
         ref={ref}
-        className={cn('relative overflow-hidden', className)}
+        className={cn('ptx-relative ptx-overflow-hidden', className)}
         {...props}
     >
-        <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+        <ScrollAreaPrimitive.Viewport className="ptx-h-full ptx-w-full ptx-rounded-[inherit]">
             {children}
         </ScrollAreaPrimitive.Viewport>
         <ScrollBar />
@@ -29,14 +29,14 @@ const ScrollBar = React.forwardRef<
         ref={ref}
         orientation={orientation}
         className={cn(
-            'flex touch-none select-none transition-colors',
-            orientation === 'vertical' && 'h-full w-[10px] border-l border-l-transparent p-[1px]',
-            orientation === 'horizontal' && 'h-[10px] flex-col border-t border-t-transparent p-[1px]',
+            'ptx-flex ptx-touch-none ptx-select-none ptx-transition-colors',
+            orientation === 'vertical' && 'ptx-h-full ptx-w-[10px] ptx-border-l ptx-border-l-transparent ptx-p-[1px]',
+            orientation === 'horizontal' && 'ptx-h-[10px] ptx-flex-col ptx-border-t ptx-border-t-transparent ptx-p-[1px]',
             className
         )}
         {...props}
     >
-        <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+        <ScrollAreaPrimitive.ScrollAreaThumb className="ptx-relative ptx-flex-1 ptx-rounded-full ptx-bg-border" />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

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

@@ -6,29 +6,29 @@ import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '
 
 /* 三档:高 24/32/40 · 字 12/13/14 · 辅助图标 12/16/16 · 左右间距 8/10/12(带 icon 组件档) */
 const SIZE_CLASSES = {
-    sm: 'h-[24px] px-[8px] rounded-[var(--pt-radius-sm)] [&_input]:text-[12px] [&_input]:leading-[16px]',
-    default: 'h-[32px] px-[10px]',
-    lg: 'h-[40px] px-[12px] [&_input]:text-[14px] [&_input]:leading-[20px]'
+    sm: 'ptx-h-[24px] ptx-px-[8px] ptx-rounded-[var(--pt-radius-sm)] [&_input]:ptx-text-2xs',
+    default: 'ptx-h-[32px] ptx-px-[10px]',
+    lg: 'ptx-h-[40px] ptx-px-[12px] [&_input]:ptx-text-sm'
 } as const;
 
 /* 放大镜(寓意图标):16 / 16 / 20 */
 const ICON_CLASSES = {
-    sm: '[&_svg]:size-[16px]',
-    default: '[&_svg]:size-[16px]',
-    lg: '[&_svg]:size-[20px]'
+    sm: '[&_svg]:ptx-size-[16px]',
+    default: '[&_svg]:ptx-size-[16px]',
+    lg: '[&_svg]:ptx-size-[20px]'
 } as const;
 
 /* 清空钮(按钮里的辅助图标):sm 12 · default 12 · lg 16;容器与按钮同值,避免跨元素层叠打架 */
 const CLEAR_ADDON_CLASSES = {
-    sm: '[&_svg]:size-[12px]',
-    default: '[&_svg]:size-[12px]',
-    lg: '[&_svg]:size-[16px]'
+    sm: '[&_svg]:ptx-size-[12px]',
+    default: '[&_svg]:ptx-size-[12px]',
+    lg: '[&_svg]:ptx-size-[16px]'
 } as const;
 
 const CLEAR_BUTTON_CLASSES = {
-    sm: 'size-[20px] p-0 [&_svg]:size-[12px]',
-    default: 'size-[24px] p-0 [&_svg]:size-[12px]',
-    lg: 'size-[24px] p-0 [&_svg]:size-[16px]'
+    sm: 'ptx-size-[20px] ptx-p-0 [&_svg]:ptx-size-[12px]',
+    default: 'ptx-size-[24px] ptx-p-0 [&_svg]:ptx-size-[12px]',
+    lg: 'ptx-size-[24px] ptx-p-0 [&_svg]:ptx-size-[16px]'
 } as const;
 
 export interface SearchInputProps

package/src/components/ui/select.tsx

@@ -22,10 +22,10 @@ const SelectValue = SelectPrimitive.Value;
  * 而高度 / 圆角 / 字号是上一轮手工对齐的 —— 手工对齐的东西下次改库时又会散开。
  * 所以样式收在这里一处，多选触发器 `cn(selectTriggerClassName, …)` 复用。
  *
- * `w-full` 不在里面：Select 自己要撑满容器，而筛选器通常按内容宽。各自加。
+ * `ptx-w-full` 不在里面：Select 自己要撑满容器，而筛选器通常按内容宽。各自加。
  */
 export const selectTriggerClassName =
-    'flex h-[32px] items-center justify-between whitespace-nowrap rounded-[var(--pt-radius-md)] border border-input bg-transparent px-[12px] py-[8px] text-[13px] leading-[20px] ring-offset-background transition-colors 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]:text-destructive aria-[invalid=true]:enabled:hover:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/30 [&>span]:line-clamp-1';
+    'ptx-flex ptx-h-[32px] ptx-items-center ptx-justify-between ptx-whitespace-nowrap ptx-rounded-[var(--pt-radius-md)] ptx-border ptx-border-input ptx-bg-transparent ptx-px-[12px] ptx-py-[8px] ptx-text-xs ptx-ring-offset-background ptx-transition-colors 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]:ptx-text-destructive aria-[invalid=true]:enabled:hover:ptx-border-destructive aria-[invalid=true]:focus-visible:ptx-ring-destructive/30 [&>span]:ptx-line-clamp-1';
 
 const SelectTrigger = React.forwardRef<
     React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -34,12 +34,12 @@ const SelectTrigger = React.forwardRef<
     <SelectPrimitive.Trigger
         ref={ref}
         data-slot="select-trigger"
-        className={cn(selectTriggerClassName, 'w-full', className)}
+        className={cn(selectTriggerClassName, 'ptx-w-full', className)}
         {...props}
     >
         {children}
         <SelectPrimitive.Icon asChild>
-            <ChevronDown className="h-[16px] w-[16px] opacity-50" />
+            <ChevronDown className="ptx-h-[16px] ptx-w-[16px] ptx-opacity-50" />
         </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
 ));
@@ -51,10 +51,10 @@ const SelectScrollUpButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <SelectPrimitive.ScrollUpButton
         ref={ref}
-        className={cn('flex cursor-default items-center justify-center py-[4px]', className)}
+        className={cn('ptx-flex ptx-cursor-default ptx-items-center ptx-justify-center ptx-py-[4px]', className)}
         {...props}
     >
-        <ChevronUp className="h-[16px] w-[16px]" />
+        <ChevronUp className="ptx-h-[16px] ptx-w-[16px]" />
     </SelectPrimitive.ScrollUpButton>
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -65,10 +65,10 @@ const SelectScrollDownButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <SelectPrimitive.ScrollDownButton
         ref={ref}
-        className={cn('flex cursor-default items-center justify-center py-[4px]', className)}
+        className={cn('ptx-flex ptx-cursor-default ptx-items-center ptx-justify-center ptx-py-[4px]', className)}
         {...props}
     >
-        <ChevronDown className="h-[16px] w-[16px]" />
+        <ChevronDown className="ptx-h-[16px] ptx-w-[16px]" />
     </SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
@@ -81,9 +81,9 @@ const SelectContent = React.forwardRef<
         <SelectPrimitive.Content
             ref={ref}
             className={cn(
-                'relative z-[var(--pt-z-popup,50)] max-h-[384px] min-w-[8rem] 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]: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-relative ptx-z-[var(--pt-z-popup,50)] ptx-max-h-[384px] ptx-min-w-[8rem] 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-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',
                 position === 'popper' &&
-                    'data-[side=bottom]:translate-y-[4px] data-[side=left]:-translate-x-[4px] data-[side=right]:translate-x-[4px] data-[side=top]:-translate-y-[4px]',
+                    'data-[side=bottom]:ptx-translate-y-[4px] data-[side=left]:-ptx-translate-x-[4px] data-[side=right]:ptx-translate-x-[4px] data-[side=top]:-ptx-translate-y-[4px]',
                 className
             )}
             position={position}
@@ -92,9 +92,9 @@ const SelectContent = React.forwardRef<
             <SelectScrollUpButton />
             <SelectPrimitive.Viewport
                 className={cn(
-                    'p-[4px]',
+                    'ptx-p-[4px]',
                     position === 'popper' &&
-                        'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+                        'ptx-h-[var(--radix-select-trigger-height)] ptx-w-full ptx-min-w-[var(--radix-select-trigger-width)]'
                 )}
             >
                 {children}
@@ -111,7 +111,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <SelectPrimitive.Label
         ref={ref}
-        className={cn('px-[8px] py-[6px] text-[14px] leading-[20px] font-semibold', className)}
+        className={cn('ptx-px-[8px] ptx-py-[6px] ptx-text-sm ptx-font-semibold', className)}
         {...props}
     />
 ));
@@ -124,14 +124,14 @@ const SelectItem = React.forwardRef<
     <SelectPrimitive.Item
         ref={ref}
         className={cn(
-            'relative flex w-full cursor-default select-none items-center rounded-[var(--pt-radius-sm)] py-[6px] pl-[8px] pr-[32px] 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-w-full ptx-cursor-default ptx-select-none ptx-items-center ptx-rounded-[var(--pt-radius-sm)] ptx-py-[6px] ptx-pl-[8px] ptx-pr-[32px] 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 right-[8px] flex h-[14px] w-[14px] items-center justify-center">
+        <span className="ptx-absolute ptx-right-[8px] ptx-flex ptx-h-[14px] ptx-w-[14px] ptx-items-center ptx-justify-center">
             <SelectPrimitive.ItemIndicator>
-                <Check className="h-[16px] w-[16px]" />
+                <Check className="ptx-h-[16px] ptx-w-[16px]" />
             </SelectPrimitive.ItemIndicator>
         </span>
         <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
@@ -145,7 +145,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <SelectPrimitive.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}
     />
 ));

package/src/components/ui/separator.tsx

@@ -12,8 +12,8 @@ const Separator = React.forwardRef<
         decorative={decorative}
         orientation={orientation}
         className={cn(
-            'shrink-0 bg-border',
-            orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+            'ptx-shrink-0 ptx-bg-border',
+            orientation === 'horizontal' ? 'ptx-h-px ptx-w-full' : 'ptx-h-full ptx-w-px',
             className
         )}
         {...props}

package/src/components/ui/sheet.tsx

@@ -19,8 +19,10 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <SheetPrimitive.Overlay
         ref={ref}
+        /* 稳定钩子，供消费方测试查询遮罩层；勿改名。 */
+        data-slot="sheet-overlay"
         className={cn(
-            'fixed inset-0 z-[var(--pt-z-overlay,50)] bg-[rgb(var(--pt-black)/0.8)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'ptx-fixed ptx-inset-0 ptx-z-[var(--pt-z-overlay,50)] ptx-bg-[rgb(var(--pt-black)/0.8)] data-[state=open]:ptx-animate-in data-[state=closed]:ptx-animate-out data-[state=closed]:ptx-fade-out-0 data-[state=open]:ptx-fade-in-0',
             className
         )}
         {...props}
@@ -29,14 +31,14 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-    'fixed z-[var(--pt-z-overlay,50)] gap-[16px] bg-background p-[24px] shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
+    'ptx-fixed ptx-z-[var(--pt-z-overlay,50)] ptx-gap-[16px] ptx-bg-background ptx-p-[24px] ptx-shadow-lg ptx-transition ptx-ease-in-out data-[state=closed]:ptx-duration-300 data-[state=open]:ptx-duration-500 data-[state=open]:ptx-animate-in data-[state=closed]:ptx-animate-out',
     {
         variants: {
             side: {
-                top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-                bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-                left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-                right: 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm'
+                top: 'ptx-inset-x-0 ptx-top-0 ptx-border-b data-[state=closed]:ptx-slide-out-to-top data-[state=open]:ptx-slide-in-from-top',
+                bottom: 'ptx-inset-x-0 ptx-bottom-0 ptx-border-t data-[state=closed]:ptx-slide-out-to-bottom data-[state=open]:ptx-slide-in-from-bottom',
+                left: 'ptx-inset-y-0 ptx-left-0 ptx-h-full ptx-w-3/4 ptx-border-r data-[state=closed]:ptx-slide-out-to-left data-[state=open]:ptx-slide-in-from-left sm:ptx-max-w-sm',
+                right: 'ptx-inset-y-0 ptx-right-0 ptx-h-full ptx-w-3/4 ptx-border-l data-[state=closed]:ptx-slide-out-to-right data-[state=open]:ptx-slide-in-from-right sm:ptx-max-w-sm'
             }
         },
         defaultVariants: {
@@ -64,9 +66,9 @@ const SheetContent = React.forwardRef<
             {...props}
         >
             {children}
-            <SheetPrimitive.Close className="absolute right-[16px] top-[16px] rounded-[var(--pt-radius-sm)] opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent">
-                <X className="h-[16px] w-[16px]" />
-                <span className="sr-only">{closeLabel}</span>
+            <SheetPrimitive.Close className="ptx-absolute ptx-right-[16px] ptx-top-[16px] ptx-rounded-[var(--pt-radius-sm)] ptx-opacity-70 ptx-ring-offset-background ptx-transition-opacity hover:ptx-opacity-100 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 data-[state=open]:ptx-bg-accent">
+                <X className="ptx-h-[16px] ptx-w-[16px]" />
+                <span className="ptx-sr-only">{closeLabel}</span>
             </SheetPrimitive.Close>
         </SheetPrimitive.Content>
     </SheetPortal>
@@ -74,13 +76,13 @@ const SheetContent = React.forwardRef<
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div className={cn('flex flex-col space-y-[8px] text-center sm:text-left', className)} {...props} />
+    <div className={cn('ptx-flex ptx-flex-col ptx-space-y-[8px] ptx-text-center sm:ptx-text-left', className)} {...props} />
 );
 SheetHeader.displayName = 'SheetHeader';
 
 const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
     <div
-        className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-[8px]', className)}
+        className={cn('ptx-flex ptx-flex-col-reverse sm:ptx-flex-row sm:ptx-justify-end sm:ptx-space-x-[8px]', className)}
         {...props}
     />
 );
@@ -92,7 +94,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <SheetPrimitive.Title
         ref={ref}
-        className={cn('text-[18px] leading-[28px] font-semibold text-foreground', className)}
+        className={cn('ptx-text-lg ptx-font-semibold ptx-text-foreground', className)}
         {...props}
     />
 ));
@@ -104,7 +106,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <SheetPrimitive.Description
         ref={ref}
-        className={cn('text-[14px] leading-[20px] text-muted-foreground', className)}
+        className={cn('ptx-text-sm ptx-text-muted-foreground', className)}
         {...props}
     />
 ));