@ptengine/design-components 0.7.0 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/dist/components/ui/search-input.d.ts +1 -1
- package/dist/components/ui/select.d.ts +1 -1
- package/dist/components/ui/select.d.ts.map +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.js +90 -90
- package/package.json +1 -1
- package/src/components/ui/alert-dialog.tsx +2 -2
- package/src/components/ui/alert.tsx +1 -1
- package/src/components/ui/attachment.tsx +4 -4
- package/src/components/ui/bubble.tsx +1 -1
- package/src/components/ui/button-group.tsx +1 -1
- package/src/components/ui/button.tsx +7 -7
- package/src/components/ui/calendar.tsx +3 -3
- package/src/components/ui/chart.tsx +1 -1
- package/src/components/ui/checkbox.tsx +1 -1
- package/src/components/ui/command.tsx +3 -3
- package/src/components/ui/context-menu.tsx +6 -6
- package/src/components/ui/dialog.tsx +4 -4
- package/src/components/ui/drawer.tsx +1 -1
- package/src/components/ui/dropdown-menu.tsx +6 -6
- package/src/components/ui/empty.tsx +2 -2
- package/src/components/ui/hover-card.tsx +1 -1
- package/src/components/ui/input-group.tsx +1 -1
- package/src/components/ui/input-otp.tsx +1 -1
- package/src/components/ui/input.tsx +1 -1
- package/src/components/ui/item.tsx +3 -3
- package/src/components/ui/kbd.tsx +1 -1
- package/src/components/ui/menubar.tsx +8 -8
- package/src/components/ui/native-select.tsx +1 -1
- package/src/components/ui/navigation-menu.tsx +3 -3
- package/src/components/ui/popover.tsx +1 -1
- package/src/components/ui/prompt-picker.tsx +7 -7
- package/src/components/ui/resizable.tsx +1 -1
- package/src/components/ui/search-input.tsx +1 -1
- package/src/components/ui/select.tsx +3 -3
- package/src/components/ui/sheet.tsx +2 -2
- package/src/components/ui/sidebar.tsx +9 -9
- package/src/components/ui/skeleton.tsx +1 -1
- package/src/components/ui/tabs.tsx +2 -2
- package/src/components/ui/textarea.tsx +1 -1
- package/src/components/ui/toggle.tsx +2 -2
- package/src/components/ui/tooltip.tsx +1 -1
|
@@ -130,7 +130,7 @@ export interface PromptPickerProps extends Omit<React.HTMLAttributes<HTMLDivElem
|
|
|
130
130
|
按下自动切 press)+ `[--pt-state-layer-border:1px]` 把叠层外扩到 border box,
|
|
131
131
|
否则叠层缩在边框内侧、圆角与边框内圆弧不同心(错位约 1px)。 */
|
|
132
132
|
const CHIP_BASE =
|
|
133
|
-
'ptx-inline-flex ptx-h-[32px] ptx-max-w-full ptx-items-center ptx-gap-[8px] ptx-rounded-[var(--
|
|
133
|
+
'ptx-inline-flex ptx-h-[32px] ptx-max-w-full ptx-items-center ptx-gap-[8px] ptx-rounded-[var(--ptx-radius-md)] ptx-border ' +
|
|
134
134
|
'ptx-px-[12px] ptx-text-left ptx-text-xs ptx-transition-colors ' +
|
|
135
135
|
'[&>svg]:ptx-size-[16px] [&>svg]:ptx-shrink-0 ' +
|
|
136
136
|
'focus-visible:ptx-outline-none focus-visible:ptx-ring-2 focus-visible:ptx-ring-ring focus-visible:ptx-ring-offset-2';
|
|
@@ -141,15 +141,15 @@ const CHIP_IDLE =
|
|
|
141
141
|
|
|
142
142
|
/* 未上线/不可选的条目:整条降辅助色,**不挂 state-layer、不给 hover** ——
|
|
143
143
|
灰着不给反馈,好过给了反馈却什么都不发生。 */
|
|
144
|
-
const CHIP_DISABLED = 'ptx-border-input ptx-bg-background ptx-text-[rgb(var(--
|
|
144
|
+
const CHIP_DISABLED = 'ptx-border-input ptx-bg-background ptx-text-[rgb(var(--ptx-text-tage))]';
|
|
145
145
|
|
|
146
146
|
/* 条目右端的小徽标。扁平 chip,不是库 Badge(理由见 PromptPickerItem.badge 的注释)。
|
|
147
147
|
用 `2xs`(12/16)——比条目正文 `xs`(13/20) 低一档,不与之争夺注意力。
|
|
148
148
|
⚠️ 原先写的是 `ptx-text-[11px] ptx-leading-[16px]`,**11px 不在字阶表里**(表里最小是 2xs 12)。
|
|
149
149
|
字阶来自 Figma Text Styles,自造档位会让「组件跟着规范走」这件事从这里开始漏。 */
|
|
150
150
|
const CHIP_BADGE =
|
|
151
|
-
'ptx-ml-[8px] ptx-shrink-0 ptx-whitespace-nowrap ptx-rounded-[var(--
|
|
152
|
-
'ptx-px-[6px] ptx-text-2xs ptx-text-[rgb(var(--
|
|
151
|
+
'ptx-ml-[8px] ptx-shrink-0 ptx-whitespace-nowrap ptx-rounded-[var(--ptx-radius-sm)] ptx-bg-muted ' +
|
|
152
|
+
'ptx-px-[6px] ptx-text-2xs ptx-text-[rgb(var(--ptx-text-tage))]';
|
|
153
153
|
|
|
154
154
|
/* 第二层顶部的分类项 —— 面包屑,不是选中态(见头注释规则 2)。
|
|
155
155
|
持久态底色 = 中性 8%(库规范:选中/激活用 --pt-bg-selected,不用彩色);
|
|
@@ -221,8 +221,8 @@ const PromptPicker = React.forwardRef<HTMLDivElement, PromptPickerProps>(
|
|
|
221
221
|
aria-label={backLabel}
|
|
222
222
|
onClick={handleBack}
|
|
223
223
|
className={
|
|
224
|
-
'ptx-flex ptx-size-[24px] ptx-shrink-0 ptx-items-center ptx-justify-center ptx-rounded-[var(--
|
|
225
|
-
'ptx-text-[rgb(var(--
|
|
224
|
+
'ptx-flex ptx-size-[24px] ptx-shrink-0 ptx-items-center ptx-justify-center ptx-rounded-[var(--ptx-radius-sm)] ' +
|
|
225
|
+
'ptx-text-[rgb(var(--ptx-text-tage))] ptx-transition-colors hover:ptx-text-foreground ' +
|
|
226
226
|
'focus-visible:ptx-outline-none focus-visible:ptx-ring-2 focus-visible:ptx-ring-ring'
|
|
227
227
|
}
|
|
228
228
|
>
|
|
@@ -244,7 +244,7 @@ const PromptPicker = React.forwardRef<HTMLDivElement, PromptPickerProps>(
|
|
|
244
244
|
)}
|
|
245
245
|
>
|
|
246
246
|
{lead && (
|
|
247
|
-
<p className="ptx-text-xs ptx-text-[rgb(var(--
|
|
247
|
+
<p className="ptx-text-xs ptx-text-[rgb(var(--ptx-text-tage))]">
|
|
248
248
|
{lead}
|
|
249
249
|
</p>
|
|
250
250
|
)}
|
|
@@ -30,7 +30,7 @@ const ResizableHandle = ({
|
|
|
30
30
|
{...props}
|
|
31
31
|
>
|
|
32
32
|
{withHandle && (
|
|
33
|
-
<div className="ptx-z-10 ptx-flex ptx-h-[16px] ptx-w-[12px] ptx-items-center ptx-justify-center ptx-rounded-[var(--
|
|
33
|
+
<div className="ptx-z-10 ptx-flex ptx-h-[16px] ptx-w-[12px] ptx-items-center ptx-justify-center ptx-rounded-[var(--ptx-radius-sm)] ptx-border ptx-bg-border">
|
|
34
34
|
<GripVertical className="ptx-h-[10px] ptx-w-[10px]" />
|
|
35
35
|
</div>
|
|
36
36
|
)}
|
|
@@ -6,7 +6,7 @@ import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '
|
|
|
6
6
|
|
|
7
7
|
/* 三档:高 24/32/40 · 字 12/13/14 · 辅助图标 12/16/16 · 左右间距 8/10/12(带 icon 组件档) */
|
|
8
8
|
const SIZE_CLASSES = {
|
|
9
|
-
sm: 'ptx-h-[24px] ptx-px-[8px] ptx-rounded-[var(--
|
|
9
|
+
sm: 'ptx-h-[24px] ptx-px-[8px] ptx-rounded-[var(--ptx-radius-sm)] [&_input]:ptx-text-2xs',
|
|
10
10
|
default: 'ptx-h-[32px] ptx-px-[10px]',
|
|
11
11
|
lg: 'ptx-h-[40px] ptx-px-[12px] [&_input]:ptx-text-sm'
|
|
12
12
|
} as const;
|
|
@@ -25,7 +25,7 @@ const SelectValue = SelectPrimitive.Value;
|
|
|
25
25
|
* `ptx-w-full` 不在里面：Select 自己要撑满容器，而筛选器通常按内容宽。各自加。
|
|
26
26
|
*/
|
|
27
27
|
export const selectTriggerClassName =
|
|
28
|
-
'ptx-flex ptx-h-[32px] ptx-items-center ptx-justify-between ptx-whitespace-nowrap ptx-rounded-[var(--
|
|
28
|
+
'ptx-flex ptx-h-[32px] ptx-items-center ptx-justify-between ptx-whitespace-nowrap ptx-rounded-[var(--ptx-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';
|
|
29
29
|
|
|
30
30
|
const SelectTrigger = React.forwardRef<
|
|
31
31
|
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
|
@@ -81,7 +81,7 @@ const SelectContent = React.forwardRef<
|
|
|
81
81
|
<SelectPrimitive.Content
|
|
82
82
|
ref={ref}
|
|
83
83
|
className={cn(
|
|
84
|
-
'ptx-relative ptx-z-[var(--pt-z-popup,50)] ptx-max-h-[384px] ptx-min-w-[8rem] ptx-overflow-hidden ptx-rounded-[var(--
|
|
84
|
+
'ptx-relative ptx-z-[var(--pt-z-popup,50)] ptx-max-h-[384px] ptx-min-w-[8rem] ptx-overflow-hidden ptx-rounded-[var(--ptx-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',
|
|
85
85
|
position === 'popper' &&
|
|
86
86
|
'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]',
|
|
87
87
|
className
|
|
@@ -124,7 +124,7 @@ const SelectItem = React.forwardRef<
|
|
|
124
124
|
<SelectPrimitive.Item
|
|
125
125
|
ref={ref}
|
|
126
126
|
className={cn(
|
|
127
|
-
'ptx-relative ptx-flex ptx-w-full ptx-cursor-default ptx-select-none ptx-items-center ptx-rounded-[var(--
|
|
127
|
+
'ptx-relative ptx-flex ptx-w-full ptx-cursor-default ptx-select-none ptx-items-center ptx-rounded-[var(--ptx-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',
|
|
128
128
|
className
|
|
129
129
|
)}
|
|
130
130
|
{...props}
|
|
@@ -22,7 +22,7 @@ const SheetOverlay = React.forwardRef<
|
|
|
22
22
|
/* 稳定钩子，供消费方测试查询遮罩层；勿改名。 */
|
|
23
23
|
data-slot="sheet-overlay"
|
|
24
24
|
className={cn(
|
|
25
|
-
'ptx-fixed ptx-inset-0 ptx-z-[var(--pt-z-overlay,50)] ptx-bg-[rgb(var(--
|
|
25
|
+
'ptx-fixed ptx-inset-0 ptx-z-[var(--pt-z-overlay,50)] ptx-bg-[rgb(var(--ptx-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',
|
|
26
26
|
className
|
|
27
27
|
)}
|
|
28
28
|
{...props}
|
|
@@ -66,7 +66,7 @@ const SheetContent = React.forwardRef<
|
|
|
66
66
|
{...props}
|
|
67
67
|
>
|
|
68
68
|
{children}
|
|
69
|
-
<SheetPrimitive.Close className="ptx-absolute ptx-right-[16px] ptx-top-[16px] ptx-rounded-[var(--
|
|
69
|
+
<SheetPrimitive.Close className="ptx-absolute ptx-right-[16px] ptx-top-[16px] ptx-rounded-[var(--ptx-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">
|
|
70
70
|
<X className="ptx-h-[16px] ptx-w-[16px]" />
|
|
71
71
|
<span className="ptx-sr-only">{closeLabel}</span>
|
|
72
72
|
</SheetPrimitive.Close>
|
|
@@ -223,7 +223,7 @@ const Sidebar = React.forwardRef<
|
|
|
223
223
|
{...props}
|
|
224
224
|
data-sidebar="sidebar"
|
|
225
225
|
>
|
|
226
|
-
<div className="ptx-flex ptx-h-full ptx-w-full ptx-flex-col ptx-bg-sidebar group-data-[variant=floating]:ptx-rounded-[var(--
|
|
226
|
+
<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">
|
|
227
227
|
{children}
|
|
228
228
|
</div>
|
|
229
229
|
</div>
|
|
@@ -407,7 +407,7 @@ const SidebarGroupLabel = React.forwardRef<
|
|
|
407
407
|
ref={ref}
|
|
408
408
|
data-sidebar="group-label"
|
|
409
409
|
className={cn(
|
|
410
|
-
'ptx-flex ptx-h-[32px] ptx-shrink-0 ptx-items-center ptx-rounded-[var(--
|
|
410
|
+
'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',
|
|
411
411
|
'group-data-[collapsible=icon]:-ptx-mt-[32px] group-data-[collapsible=icon]:ptx-opacity-0',
|
|
412
412
|
className
|
|
413
413
|
)}
|
|
@@ -428,7 +428,7 @@ const SidebarGroupAction = React.forwardRef<
|
|
|
428
428
|
ref={ref}
|
|
429
429
|
data-sidebar="group-action"
|
|
430
430
|
className={cn(
|
|
431
|
-
'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(--
|
|
431
|
+
'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',
|
|
432
432
|
'after:ptx-absolute after:-ptx-inset-[8px] after:md:ptx-hidden',
|
|
433
433
|
'group-data-[collapsible=icon]:ptx-hidden',
|
|
434
434
|
className
|
|
@@ -476,7 +476,7 @@ const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li
|
|
|
476
476
|
SidebarMenuItem.displayName = 'SidebarMenuItem';
|
|
477
477
|
|
|
478
478
|
const sidebarMenuButtonVariants = cva(
|
|
479
|
-
'peer/menu-button ptx-flex ptx-w-full ptx-items-center ptx-gap-[8px] ptx-overflow-hidden ptx-rounded-[var(--
|
|
479
|
+
'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',
|
|
480
480
|
{
|
|
481
481
|
variants: {
|
|
482
482
|
variant: {
|
|
@@ -557,7 +557,7 @@ const SidebarMenuAction = React.forwardRef<
|
|
|
557
557
|
ref={ref}
|
|
558
558
|
data-sidebar="menu-action"
|
|
559
559
|
className={cn(
|
|
560
|
-
'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(--
|
|
560
|
+
'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',
|
|
561
561
|
'after:ptx-absolute after:-ptx-inset-[8px] after:md:ptx-hidden',
|
|
562
562
|
'peer-data-[size=sm]/menu-button:ptx-top-[4px]',
|
|
563
563
|
'peer-data-[size=default]/menu-button:ptx-top-[6px]',
|
|
@@ -579,7 +579,7 @@ const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<'
|
|
|
579
579
|
ref={ref}
|
|
580
580
|
data-sidebar="menu-badge"
|
|
581
581
|
className={cn(
|
|
582
|
-
'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(--
|
|
582
|
+
'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',
|
|
583
583
|
'peer-hover/menu-button:ptx-text-sidebar-accent-foreground peer-data-[active=true]/menu-button:ptx-text-sidebar-accent-foreground',
|
|
584
584
|
'peer-data-[size=sm]/menu-button:ptx-top-[4px]',
|
|
585
585
|
'peer-data-[size=default]/menu-button:ptx-top-[6px]',
|
|
@@ -607,10 +607,10 @@ const SidebarMenuSkeleton = React.forwardRef<
|
|
|
607
607
|
<div
|
|
608
608
|
ref={ref}
|
|
609
609
|
data-sidebar="menu-skeleton"
|
|
610
|
-
className={cn('ptx-flex ptx-h-[32px] ptx-items-center ptx-gap-[8px] ptx-rounded-[var(--
|
|
610
|
+
className={cn('ptx-flex ptx-h-[32px] ptx-items-center ptx-gap-[8px] ptx-rounded-[var(--ptx-radius-md)] ptx-px-[8px]', className)}
|
|
611
611
|
{...props}
|
|
612
612
|
>
|
|
613
|
-
{showIcon && <Skeleton className="ptx-size-[16px] ptx-rounded-[var(--
|
|
613
|
+
{showIcon && <Skeleton className="ptx-size-[16px] ptx-rounded-[var(--ptx-radius-md)]" data-sidebar="menu-skeleton-icon" />}
|
|
614
614
|
<Skeleton
|
|
615
615
|
className="ptx-h-[16px] ptx-max-w-[--skeleton-width] ptx-flex-1"
|
|
616
616
|
data-sidebar="menu-skeleton-text"
|
|
@@ -663,7 +663,7 @@ const SidebarMenuSubButton = React.forwardRef<
|
|
|
663
663
|
data-size={size}
|
|
664
664
|
data-active={isActive}
|
|
665
665
|
className={cn(
|
|
666
|
-
'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(--
|
|
666
|
+
'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',
|
|
667
667
|
'data-[active=true]:ptx-bg-selected data-[active=true]:ptx-text-sidebar-accent-foreground',
|
|
668
668
|
size === 'sm' && 'ptx-text-xs',
|
|
669
669
|
size === 'md' && 'ptx-text-sm',
|
|
@@ -11,7 +11,7 @@ function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>)
|
|
|
11
11
|
不带前缀的规则，check:css 会报出来。） */
|
|
12
12
|
<div
|
|
13
13
|
data-slot="skeleton"
|
|
14
|
-
className={cn('ptx-animate-pulse ptx-rounded-[var(--
|
|
14
|
+
className={cn('ptx-animate-pulse ptx-rounded-[var(--ptx-radius-md)] ptx-bg-muted', className)}
|
|
15
15
|
{...props}
|
|
16
16
|
/>
|
|
17
17
|
);
|
|
@@ -63,7 +63,7 @@ const TabsList = React.forwardRef<
|
|
|
63
63
|
ref={ref}
|
|
64
64
|
className={cn(
|
|
65
65
|
'ptx-inline-flex ptx-items-center ptx-text-muted-foreground',
|
|
66
|
-
variant === 'segmented' && 'ptx-justify-center ptx-rounded-[var(--
|
|
66
|
+
variant === 'segmented' && 'ptx-justify-center ptx-rounded-[var(--ptx-radius)] ptx-bg-muted',
|
|
67
67
|
/* line:整宽 + 底部分隔线,标签左对齐 */
|
|
68
68
|
variant === 'line' && 'ptx-w-full ptx-justify-start ptx-border-b ptx-border-border',
|
|
69
69
|
LIST_SIZE[variant][size],
|
|
@@ -89,7 +89,7 @@ const TabsTrigger = React.forwardRef<
|
|
|
89
89
|
/* segmented:选中项白底浮起。按设计铁律不加阴影——白底与灰底容器的
|
|
90
90
|
明度差已足够表达选中,阴影在暗色模式下还会失效。 */
|
|
91
91
|
variant === 'segmented' &&
|
|
92
|
-
'ptx-h-full ptx-rounded-[var(--
|
|
92
|
+
'ptx-h-full ptx-rounded-[var(--ptx-radius-sm)] ptx-px-[12px] data-[state=active]:ptx-bg-background data-[state=active]:ptx-text-foreground',
|
|
93
93
|
/* line:选中项底部 2px 实线,-mb-px 让它压住 List 的分隔线 */
|
|
94
94
|
variant === 'line' &&
|
|
95
95
|
'-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',
|
|
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
|
9
9
|
return (
|
|
10
10
|
<textarea
|
|
11
11
|
className={cn(
|
|
12
|
-
'ptx-flex ptx-min-h-[60px] ptx-w-full ptx-rounded-[var(--
|
|
12
|
+
'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',
|
|
13
13
|
className
|
|
14
14
|
)}
|
|
15
15
|
ref={ref}
|
|
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
|
|
|
5
5
|
import { cn } from '../../lib/utils';
|
|
6
6
|
|
|
7
7
|
const toggleVariants = cva(
|
|
8
|
-
'ptx-state-layer ptx-inline-flex ptx-items-center ptx-justify-center ptx-gap-[8px] ptx-rounded-[var(--
|
|
8
|
+
'ptx-state-layer ptx-inline-flex ptx-items-center ptx-justify-center ptx-gap-[8px] ptx-rounded-[var(--ptx-radius-md)] ptx-text-sm ptx-font-medium ptx-text-foreground ptx-transition-colors focus-visible:ptx-outline-none focus-visible:ptx-ring-1 focus-visible:ptx-ring-ring disabled:ptx-cursor-not-allowed disabled:ptx-opacity-50 data-[state=on]:ptx-bg-selected data-[state=on]:ptx-text-accent-foreground [&_svg]:ptx-pointer-events-none [&_svg]:ptx-size-[16px] [&_svg]:ptx-shrink-0',
|
|
9
9
|
{
|
|
10
10
|
variants: {
|
|
11
11
|
variant: {
|
|
@@ -14,7 +14,7 @@ const toggleVariants = cva(
|
|
|
14
14
|
},
|
|
15
15
|
size: {
|
|
16
16
|
default: 'ptx-h-[32px] ptx-min-w-[36px] ptx-px-[8px] ptx-text-xs',
|
|
17
|
-
sm: 'ptx-h-[24px] ptx-min-w-[32px] ptx-rounded-[var(--
|
|
17
|
+
sm: 'ptx-h-[24px] ptx-min-w-[32px] ptx-rounded-[var(--ptx-radius-sm)] ptx-px-[6px] ptx-text-2xs',
|
|
18
18
|
lg: 'ptx-h-[40px] ptx-min-w-[40px] ptx-px-[10px] ptx-text-sm [&_svg]:ptx-size-[20px]'
|
|
19
19
|
}
|
|
20
20
|
},
|
|
@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
|
|
|
18
18
|
ref={ref}
|
|
19
19
|
sideOffset={sideOffset}
|
|
20
20
|
className={cn(
|
|
21
|
-
'ptx-z-[var(--pt-z-tooltip,50)] ptx-overflow-hidden ptx-rounded-[var(--
|
|
21
|
+
'ptx-z-[var(--pt-z-tooltip,50)] ptx-overflow-hidden ptx-rounded-[var(--ptx-radius-md)] ptx-bg-primary ptx-px-[12px] ptx-py-[6px] ptx-text-xs ptx-text-primary-foreground ptx-animate-in ptx-fade-in-0 ptx-zoom-in-95 data-[state=closed]:ptx-animate-out data-[state=closed]:ptx-fade-out-0 data-[state=closed]:ptx-zoom-out-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',
|
|
22
22
|
className
|
|
23
23
|
)}
|
|
24
24
|
{...props}
|