@ptengine/design-components 0.5.3 → 0.6.0

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.
Files changed (51) hide show
  1. package/COMPONENTS-DESIGN-SYSTEM.md +329 -0
  2. package/README.md +11 -176
  3. package/dist/components/ui/prompt-picker.d.ts.map +1 -1
  4. package/dist/components/ui/search-input.d.ts +2 -2
  5. package/dist/components/ui/select.d.ts +1 -1
  6. package/dist/components/ui/select.d.ts.map +1 -1
  7. package/dist/index.cjs +2 -77
  8. package/dist/index.js +2082 -20894
  9. package/llms.txt +20 -0
  10. package/package.json +3 -2
  11. package/src/components/ui/accordion.tsx +2 -2
  12. package/src/components/ui/alert-dialog.tsx +2 -2
  13. package/src/components/ui/alert.tsx +2 -2
  14. package/src/components/ui/attachment.tsx +4 -4
  15. package/src/components/ui/avatar.tsx +3 -3
  16. package/src/components/ui/badge.tsx +1 -1
  17. package/src/components/ui/breadcrumb.tsx +1 -1
  18. package/src/components/ui/bubble.tsx +2 -2
  19. package/src/components/ui/button-group.tsx +1 -1
  20. package/src/components/ui/button.tsx +4 -4
  21. package/src/components/ui/calendar.tsx +3 -3
  22. package/src/components/ui/card.tsx +1 -1
  23. package/src/components/ui/chart.tsx +2 -2
  24. package/src/components/ui/command.tsx +5 -5
  25. package/src/components/ui/context-menu.tsx +6 -6
  26. package/src/components/ui/dialog.tsx +2 -2
  27. package/src/components/ui/drawer.tsx +2 -2
  28. package/src/components/ui/dropdown-menu.tsx +6 -6
  29. package/src/components/ui/empty.tsx +3 -3
  30. package/src/components/ui/field.tsx +6 -6
  31. package/src/components/ui/input-group.tsx +3 -3
  32. package/src/components/ui/input-otp.tsx +1 -1
  33. package/src/components/ui/input.tsx +1 -1
  34. package/src/components/ui/item.tsx +3 -3
  35. package/src/components/ui/kbd.tsx +1 -1
  36. package/src/components/ui/label.tsx +1 -1
  37. package/src/components/ui/marker.tsx +1 -1
  38. package/src/components/ui/menubar.tsx +7 -7
  39. package/src/components/ui/message.tsx +3 -3
  40. package/src/components/ui/native-select.tsx +1 -1
  41. package/src/components/ui/navigation-menu.tsx +1 -1
  42. package/src/components/ui/prompt-picker.tsx +6 -4
  43. package/src/components/ui/search-input.tsx +2 -2
  44. package/src/components/ui/select.tsx +3 -3
  45. package/src/components/ui/sheet.tsx +2 -2
  46. package/src/components/ui/sidebar.tsx +9 -9
  47. package/src/components/ui/table.tsx +2 -2
  48. package/src/components/ui/tabs.tsx +3 -3
  49. package/src/components/ui/textarea.tsx +1 -1
  50. package/src/components/ui/toggle.tsx +4 -4
  51. package/src/components/ui/tooltip.tsx +1 -1
package/llms.txt CHANGED
@@ -175,6 +175,26 @@ data-table = Table + @tanstack/react-table。
175
175
  <DialogContent closeLabel={t('关闭')}>…</DialogContent>
176
176
  ```
177
177
 
178
+ ## 行为契约(约束界面行为,不只是本库组件)
179
+
180
+ 适用范围:**用这套设计系统做出来的界面**,不只是"用到了本库组件的地方"。
181
+ 手写的加载态和用 Spinner 的加载态,对用户没区别,规则不因实现方式失效。
182
+
183
+ 1. **反馈** — 可操作元素必须有明确反馈(hover/focus/active/disabled 四态齐);
184
+ **无实际功能的元素不得产生交互暗示**(不给手型光标、不给 hover 变化)。
185
+ 2. **异步三态** — 进行中(按钮 loading 或区域 skeleton,**禁全屏遮罩 spinner**)/
186
+ 成功(toast,2-3 秒自动消失,不用弹框打断)/ 失败(必须说清**发生了什么 + 能做什么**,
187
+ 禁止只写"操作失败")。
188
+ 3. **空态** — `Empty` 至少回答两件事:为什么空(还没创建 / 筛选无结果 / 采集中,
189
+ 三种文案不同)+ 下一步做什么(创建 / 清筛选 / 看文档)。空白处不填装饰插画。
190
+ 4. **颜色不能单独承载含义** — 状态、涨跌、分类不得只靠颜色区分,必须配图标/文字/形状。
191
+ 语义色与 chart 色板最容易违反:拿掉颜色后信息还在不在?
192
+ 5. **破坏性操作分两档** — 不可逆(删除)= 二次确认 + 错误色确认钮 + 文案写明对象;
193
+ 可逆(移出、归档)= 不弹框,给带撤销的 toast。
194
+ 6. **权限三态** — 可编辑 / 只读 / 无权限三者必须可区分。⚠️ **只读不等于禁用**:
195
+ disabled 表达"有权用但条件不满足",只读表达"你没这个权限";用同一种灰会让用户
196
+ 一直等一个永远不会亮的按钮。
197
+
178
198
  ## 硬性禁令
179
199
 
180
200
  - 禁止硬编码色值 / 字体名 / 字阶之外的字号
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ptengine/design-components",
3
- "version": "0.5.3",
3
+ "version": "0.6.0",
4
4
  "description": "PT-AI-Components — PTEngine 基于 shadcn/ui 的 React 组件库",
5
5
  "license": "UNLICENSED",
6
6
  "private": false,
@@ -42,7 +42,8 @@
42
42
  "tailwind.preset.js",
43
43
  "components.json",
44
44
  "llms.txt",
45
- "README.md"
45
+ "README.md",
46
+ "COMPONENTS-DESIGN-SYSTEM.md"
46
47
  ],
47
48
  "scripts": {
48
49
  "dev": "vite --port 5199 --strictPort",
package/src/components/ui/accordion.tsx CHANGED
@@ -22,7 +22,7 @@ const AccordionTrigger = React.forwardRef<
22
22
  <AccordionPrimitive.Trigger
23
23
  ref={ref}
24
24
  className={cn(
25
- 'flex flex-1 items-center justify-between py-[16px] text-[14px] leading-[20px] font-medium text-foreground transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
25
+ 'flex flex-1 items-center justify-between py-[16px] text-sm font-medium text-foreground transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
26
26
  className
27
27
  )}
28
28
  {...props}
@@ -40,7 +40,7 @@ const AccordionContent = React.forwardRef<
40
40
  >(({ className, children, ...props }, ref) => (
41
41
  <AccordionPrimitive.Content
42
42
  ref={ref}
43
- className="overflow-hidden text-[14px] leading-[20px] text-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
43
+ className="overflow-hidden text-sm text-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
44
44
  {...props}
45
45
  >
46
46
  <div className={cn('pb-[16px] pt-0', className)}>{children}</div>
package/src/components/ui/alert-dialog.tsx CHANGED
@@ -62,7 +62,7 @@ const AlertDialogTitle = React.forwardRef<
62
62
  >(({ className, ...props }, ref) => (
63
63
  <AlertDialogPrimitive.Title
64
64
  ref={ref}
65
- className={cn('text-[18px] leading-[28px] font-semibold text-foreground', className)}
65
+ className={cn('text-lg font-semibold text-foreground', className)}
66
66
  {...props}
67
67
  />
68
68
  ));
@@ -74,7 +74,7 @@ const AlertDialogDescription = React.forwardRef<
74
74
  >(({ className, ...props }, ref) => (
75
75
  <AlertDialogPrimitive.Description
76
76
  ref={ref}
77
- className={cn('text-[14px] leading-[20px] text-muted-foreground', className)}
77
+ className={cn('text-sm text-muted-foreground', className)}
78
78
  {...props}
79
79
  />
80
80
  ));
package/src/components/ui/alert.tsx CHANGED
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
4
4
  import { cn } from '../../lib/utils';
5
5
 
6
6
  const alertVariants = cva(
7
- 'relative w-full rounded-[var(--pt-radius)] border px-[16px] py-[12px] text-[14px] leading-[20px] [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-[16px] [&>svg]:top-[16px] [&>svg]:size-[16px] [&>svg~*]:pl-[28px]',
7
+ 'relative w-full rounded-[var(--pt-radius)] border px-[16px] py-[12px] text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-[16px] [&>svg]:top-[16px] [&>svg]:size-[16px] [&>svg~*]:pl-[28px]',
8
8
  {
9
9
  variants: {
10
10
  variant: {
@@ -41,7 +41,7 @@ const AlertDescription = React.forwardRef<
41
41
  HTMLParagraphElement,
42
42
  React.HTMLAttributes<HTMLParagraphElement>
43
43
  >(({ className, ...props }, ref) => (
44
- <div ref={ref} className={cn('text-[14px] leading-[20px] [&_p]:leading-relaxed', className)} {...props} />
44
+ <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
45
45
  ));
46
46
  AlertDescription.displayName = 'AlertDescription';
47
47
 
package/src/components/ui/attachment.tsx CHANGED
@@ -11,9 +11,9 @@ const attachmentVariants = cva(
11
11
  variants: {
12
12
  size: {
13
13
  default:
14
- 'gap-[8px] text-[14px] leading-[20px] has-[[data-slot=attachment-content]]:px-[10px] has-[[data-slot=attachment-content]]:py-[8px] has-[[data-slot=attachment-media]]:p-[8px]',
15
- sm: 'gap-[10px] text-[13px] leading-[20px] has-[[data-slot=attachment-content]]:px-[8px] has-[[data-slot=attachment-content]]:py-[6px] has-[[data-slot=attachment-media]]:p-[6px]',
16
- xs: 'gap-[6px] rounded-[var(--pt-radius-md)] text-[13px] leading-[20px] has-[[data-slot=attachment-content]]:px-[6px] has-[[data-slot=attachment-content]]:py-[4px] has-[[data-slot=attachment-media]]:p-[4px]'
14
+ 'gap-[8px] text-sm has-[[data-slot=attachment-content]]:px-[10px] has-[[data-slot=attachment-content]]:py-[8px] has-[[data-slot=attachment-media]]:p-[8px]',
15
+ sm: 'gap-[10px] text-xs has-[[data-slot=attachment-content]]:px-[8px] has-[[data-slot=attachment-content]]:py-[6px] has-[[data-slot=attachment-media]]:p-[6px]',
16
+ xs: 'gap-[6px] rounded-[var(--pt-radius-md)] text-xs has-[[data-slot=attachment-content]]:px-[6px] has-[[data-slot=attachment-content]]:py-[4px] has-[[data-slot=attachment-media]]:p-[4px]'
17
17
  },
18
18
  orientation: {
19
19
  horizontal: 'min-w-[160px] items-center',
@@ -106,7 +106,7 @@ function AttachmentDescription({ className, ...props }: React.HTMLAttributes<HTM
106
106
  <span
107
107
  data-slot="attachment-description"
108
108
  className={cn(
109
- 'mt-[2px] block max-w-full min-w-0 truncate text-[13px] leading-[20px] text-muted-foreground group-data-[state=error]/attachment:text-destructive/80',
109
+ 'mt-[2px] block max-w-full min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80',
110
110
  className
111
111
  )}
112
112
  {...props}
package/src/components/ui/avatar.tsx CHANGED
@@ -8,9 +8,9 @@ import { cn } from '../../lib/utils';
8
8
  const avatarVariants = cva('relative flex shrink-0 overflow-hidden rounded-full', {
9
9
  variants: {
10
10
  size: {
11
- sm: 'h-[24px] w-[24px] text-[12px] leading-[16px]',
12
- md: 'h-[32px] w-[32px] text-[13px] leading-[20px]',
13
- lg: 'h-[40px] w-[40px] text-[14px] leading-[20px]'
11
+ sm: 'h-[24px] w-[24px] text-2xs',
12
+ md: 'h-[32px] w-[32px] text-xs',
13
+ lg: 'h-[40px] w-[40px] text-sm'
14
14
  }
15
15
  },
16
16
  defaultVariants: {
package/src/components/ui/badge.tsx CHANGED
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
4
4
  import { cn } from '../../lib/utils';
5
5
 
6
6
  const badgeVariants = cva(
7
- 'inline-flex items-center rounded-full border px-[10px] py-[2px] text-[13px] leading-[20px] font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [--pt-state-layer-border:1px] [&:is(a,button)]:cursor-pointer',
7
+ 'inline-flex items-center rounded-full border px-[10px] py-[2px] text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [--pt-state-layer-border:1px] [&:is(a,button)]:cursor-pointer',
8
8
  {
9
9
  variants: {
10
10
  variant: {
package/src/components/ui/breadcrumb.tsx CHANGED
@@ -17,7 +17,7 @@ const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWi
17
17
  className={cn(
18
18
  // 面包屑是导航辅助信息，不是正文 —— 字号走 13（lin 2026-08-28）。
19
19
  // 原为 14，与页面正文同级，在标题下方读起来比实际权重更重。
20
- 'flex flex-wrap items-center gap-[6px] break-words text-[13px] leading-[20px] text-muted-foreground sm:gap-[10px]',
20
+ 'flex flex-wrap items-center gap-[6px] break-words text-xs text-muted-foreground sm:gap-[10px]',
21
21
  className
22
22
  )}
23
23
  {...props}
package/src/components/ui/bubble.tsx CHANGED
@@ -71,7 +71,7 @@ function BubbleContent({
71
71
  <Comp
72
72
  data-slot="bubble-content"
73
73
  className={cn(
74
- 'w-fit max-w-full min-w-0 overflow-hidden break-words rounded-[var(--pt-radius)] border border-transparent px-[12px] py-[8px] text-[14px] leading-[20px] leading-relaxed group-data-[align=end]/bubble:self-end',
74
+ 'w-fit max-w-full min-w-0 overflow-hidden break-words rounded-[var(--pt-radius)] border border-transparent px-[12px] py-[8px] text-sm leading-relaxed group-data-[align=end]/bubble:self-end',
75
75
  '[&:is(button,a)]:state-layer [&:is(button)]:text-left [&:is(button,a)]:cursor-pointer [&:is(button,a)]:focus-visible:outline-none [&:is(button,a)]:focus-visible:ring-1 [&:is(button,a)]:focus-visible:ring-ring',
76
76
  className
77
77
  )}
@@ -81,7 +81,7 @@ function BubbleContent({
81
81
  }
82
82
 
83
83
  const bubbleReactionsVariants = cva(
84
- 'absolute z-10 flex w-fit shrink-0 items-center justify-center gap-[4px] rounded-full bg-muted px-[6px] py-[2px] text-[14px] leading-[20px] ring ring-card has-[button]:p-0',
84
+ 'absolute z-10 flex w-fit shrink-0 items-center justify-center gap-[4px] rounded-full bg-muted px-[6px] py-[2px] text-sm ring ring-card has-[button]:p-0',
85
85
  {
86
86
  variants: {
87
87
  side: {
package/src/components/ui/button-group.tsx CHANGED
@@ -48,7 +48,7 @@ function ButtonGroupText({
48
48
  <Comp
49
49
  data-slot="button-group-text"
50
50
  className={cn(
51
- "flex items-center gap-[8px] rounded-[var(--pt-radius-md)] border bg-muted px-[16px] text-[14px] leading-[20px] font-medium text-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-[16px]",
51
+ "flex items-center gap-[8px] rounded-[var(--pt-radius-md)] border bg-muted px-[16px] text-sm font-medium text-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-[16px]",
52
52
  className
53
53
  )}
54
54
  {...props}
package/src/components/ui/button.tsx CHANGED
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
5
5
  import { cn } from '../../lib/utils';
6
6
 
7
7
  const buttonVariants = cva(
8
- 'inline-flex items-center justify-center gap-[8px] whitespace-nowrap rounded-[var(--pt-radius-md)] text-[14px] leading-[20px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-[16px] [&_svg]:shrink-0',
8
+ 'inline-flex items-center justify-center gap-[8px] whitespace-nowrap rounded-[var(--pt-radius-md)] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-[16px] [&_svg]:shrink-0',
9
9
  {
10
10
  variants: {
11
11
  variant: {
@@ -25,9 +25,9 @@ const buttonVariants = cva(
25
25
  },
26
26
  /* 控件三档刻度:sm 24(字12/图16)· default 32(字13/图16)· lg 40(字14/图20);语义图标 16/16/20 */
27
27
  size: {
28
- sm: 'h-[24px] gap-[4px] rounded-[var(--pt-radius-sm)] px-[8px] text-[12px] leading-[16px]',
29
- default: 'h-[32px] rounded-[var(--pt-radius-md)] px-[12px] text-[13px] leading-[20px]',
30
- lg: 'h-[40px] rounded-[var(--pt-radius-md)] px-[16px] text-[14px] leading-[20px] [&_svg]:size-[20px]',
28
+ sm: 'h-[24px] gap-[4px] rounded-[var(--pt-radius-sm)] px-[8px] text-2xs',
29
+ default: 'h-[32px] rounded-[var(--pt-radius-md)] px-[12px] text-xs',
30
+ lg: 'h-[40px] rounded-[var(--pt-radius-md)] px-[16px] text-sm [&_svg]:size-[20px]',
31
31
  'icon-sm': 'h-[24px] w-[24px] rounded-[var(--pt-radius-sm)]',
32
32
  icon: 'h-[32px] w-[32px]',
33
33
  'icon-lg': 'h-[40px] w-[40px] [&_svg]:size-[20px]'
package/src/components/ui/calendar.tsx CHANGED
@@ -16,16 +16,16 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
16
16
  months: 'relative flex flex-col gap-[16px] sm:flex-row',
17
17
  month: 'flex flex-col gap-[16px]',
18
18
  month_caption: 'flex h-[28px] items-center justify-center',
19
- caption_label: 'text-[14px] leading-[20px] font-medium text-foreground',
19
+ caption_label: 'text-sm font-medium text-foreground',
20
20
  nav: 'absolute inset-x-0 top-0 z-10 flex items-center justify-between',
21
21
  button_previous: cn(buttonVariants({ variant: 'ghost' }), 'h-[28px] w-[28px] p-0'),
22
22
  button_next: cn(buttonVariants({ variant: 'ghost' }), 'h-[28px] w-[28px] p-0'),
23
23
  month_grid: 'w-full border-collapse',
24
24
  weekdays: 'flex',
25
25
  weekday:
26
- 'w-[32px] rounded-[var(--pt-radius-md)] text-[12px] leading-[16px] font-normal text-muted-foreground',
26
+ 'w-[32px] rounded-[var(--pt-radius-md)] text-2xs font-normal text-muted-foreground',
27
27
  week: 'mt-[8px] flex w-full',
28
- day: 'relative p-0 text-center text-[14px] leading-[20px] focus-within:relative focus-within:z-20',
28
+ day: 'relative p-0 text-center text-sm focus-within:relative focus-within:z-20',
29
29
  day_button: cn(
30
30
  buttonVariants({ variant: 'ghost' }),
31
31
  'h-[32px] w-[32px] p-0 font-normal aria-selected:opacity-100'
package/src/components/ui/card.tsx CHANGED
@@ -33,7 +33,7 @@ CardTitle.displayName = 'CardTitle';
33
33
 
34
34
  const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
35
35
  ({ className, ...props }, ref) => (
36
- <div ref={ref} className={cn('text-[14px] leading-[20px] text-muted-foreground', className)} {...props} />
36
+ <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
37
37
  )
38
38
  );
39
39
  CardDescription.displayName = 'CardDescription';
package/src/components/ui/chart.tsx CHANGED
@@ -47,7 +47,7 @@ const ChartContainer = React.forwardRef<
47
47
  data-chart={chartId}
48
48
  ref={ref}
49
49
  className={cn(
50
- "flex aspect-video justify-center text-[13px] leading-[20px] [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
50
+ "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
51
51
  className
52
52
  )}
53
53
  {...props}
@@ -160,7 +160,7 @@ const ChartTooltipContent = React.forwardRef<
160
160
  <div
161
161
  ref={ref}
162
162
  className={cn(
163
- 'grid min-w-[8rem] items-start gap-[6px] rounded-[var(--pt-radius)] border bg-background px-[10px] py-[6px] text-[13px] leading-[20px] shadow-xl',
163
+ 'grid min-w-[8rem] items-start gap-[6px] rounded-[var(--pt-radius)] border bg-background px-[10px] py-[6px] text-xs shadow-xl',
164
164
  className
165
165
  )}
166
166
  >
package/src/components/ui/command.tsx CHANGED
@@ -42,7 +42,7 @@ const CommandInput = React.forwardRef<
42
42
  <CommandPrimitive.Input
43
43
  ref={ref}
44
44
  className={cn(
45
- 'flex h-[40px] w-full rounded-[var(--pt-radius-md)] bg-transparent py-[12px] text-[14px] leading-[20px] text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
45
+ 'flex h-[40px] w-full rounded-[var(--pt-radius-md)] bg-transparent py-[12px] text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
46
46
  className
47
47
  )}
48
48
  {...props}
@@ -67,7 +67,7 @@ const CommandEmpty = React.forwardRef<
67
67
  React.ElementRef<typeof CommandPrimitive.Empty>,
68
68
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
69
69
  >((props, ref) => (
70
- <CommandPrimitive.Empty ref={ref} className="py-[24px] text-center text-[13px] leading-[20px]" {...props} />
70
+ <CommandPrimitive.Empty ref={ref} className="py-[24px] text-center text-xs" {...props} />
71
71
  ));
72
72
  CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
73
73
 
@@ -78,7 +78,7 @@ const CommandGroup = React.forwardRef<
78
78
  <CommandPrimitive.Group
79
79
  ref={ref}
80
80
  className={cn(
81
- 'overflow-hidden p-[4px] text-foreground [&_[cmdk-group-heading]]:px-[8px] [&_[cmdk-group-heading]]:py-[6px] [&_[cmdk-group-heading]]:text-[13px] [&_[cmdk-group-heading]]:leading-[20px] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
81
+ 'overflow-hidden p-[4px] text-foreground [&_[cmdk-group-heading]]:px-[8px] [&_[cmdk-group-heading]]:py-[6px] [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
82
82
  className
83
83
  )}
84
84
  {...props}
@@ -105,7 +105,7 @@ const CommandItem = React.forwardRef<
105
105
  <CommandPrimitive.Item
106
106
  ref={ref}
107
107
  className={cn(
108
- 'relative flex cursor-default select-none items-center gap-[8px] rounded-[var(--pt-radius-sm)] px-[8px] py-[6px] text-[14px] leading-[20px] outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-[16px] [&_svg]:shrink-0',
108
+ 'relative flex cursor-default select-none items-center gap-[8px] rounded-[var(--pt-radius-sm)] px-[8px] py-[6px] text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-[16px] [&_svg]:shrink-0',
109
109
  className
110
110
  )}
111
111
  {...props}
@@ -116,7 +116,7 @@ CommandItem.displayName = CommandPrimitive.Item.displayName;
116
116
  const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
117
117
  return (
118
118
  <span
119
- className={cn('ml-auto text-[13px] leading-[20px] tracking-widest text-muted-foreground', className)}
119
+ className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
120
120
  {...props}
121
121
  />
122
122
  );
package/src/components/ui/context-menu.tsx CHANGED
@@ -25,7 +25,7 @@ const ContextMenuSubTrigger = React.forwardRef<
25
25
  <ContextMenuPrimitive.SubTrigger
26
26
  ref={ref}
27
27
  className={cn(
28
- 'flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] px-[8px] py-[6px] text-[14px] leading-[20px] outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
28
+ 'flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] px-[8px] py-[6px] text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
29
29
  inset && 'pl-[32px]',
30
30
  className
31
31
  )}
@@ -78,7 +78,7 @@ const ContextMenuItem = React.forwardRef<
78
78
  <ContextMenuPrimitive.Item
79
79
  ref={ref}
80
80
  className={cn(
81
- 'relative flex cursor-default select-none items-center gap-[8px] rounded-[var(--pt-radius-sm)] px-[8px] py-[6px] text-[14px] leading-[20px] 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',
81
+ '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',
82
82
  inset && 'pl-[32px]',
83
83
  className
84
84
  )}
@@ -94,7 +94,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
94
94
  <ContextMenuPrimitive.CheckboxItem
95
95
  ref={ref}
96
96
  className={cn(
97
- 'relative flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] py-[6px] pl-[32px] pr-[8px] text-[14px] leading-[20px] outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
97
+ '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',
98
98
  className
99
99
  )}
100
100
  checked={checked}
@@ -117,7 +117,7 @@ const ContextMenuRadioItem = React.forwardRef<
117
117
  <ContextMenuPrimitive.RadioItem
118
118
  ref={ref}
119
119
  className={cn(
120
- 'relative flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] py-[6px] pl-[32px] pr-[8px] text-[14px] leading-[20px] outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
120
+ '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',
121
121
  className
122
122
  )}
123
123
  {...props}
@@ -140,7 +140,7 @@ const ContextMenuLabel = React.forwardRef<
140
140
  >(({ className, inset, ...props }, ref) => (
141
141
  <ContextMenuPrimitive.Label
142
142
  ref={ref}
143
- className={cn('px-[8px] py-[6px] text-[14px] leading-[20px] font-semibold text-foreground', inset && 'pl-[32px]', className)}
143
+ className={cn('px-[8px] py-[6px] text-sm font-semibold text-foreground', inset && 'pl-[32px]', className)}
144
144
  {...props}
145
145
  />
146
146
  ));
@@ -161,7 +161,7 @@ ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
161
161
  const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
162
162
  return (
163
163
  <span
164
- className={cn('ml-auto text-[13px] leading-[20px] tracking-widest text-muted-foreground', className)}
164
+ className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
165
165
  {...props}
166
166
  />
167
167
  );
package/src/components/ui/dialog.tsx CHANGED
@@ -104,7 +104,7 @@ const DialogTitle = React.forwardRef<
104
104
  <DialogPrimitive.Title
105
105
  ref={ref}
106
106
  className={cn(
107
- 'text-[18px] font-semibold leading-none tracking-tight text-[rgb(var(--pt-text-strong))]',
107
+ 'text-lg font-semibold leading-none tracking-tight text-[rgb(var(--pt-text-strong))]',
108
108
  className
109
109
  )}
110
110
  {...props}
@@ -118,7 +118,7 @@ const DialogDescription = React.forwardRef<
118
118
  >(({ className, ...props }, ref) => (
119
119
  <DialogPrimitive.Description
120
120
  ref={ref}
121
- className={cn('text-[14px] leading-[20px] text-[rgb(var(--pt-text-standard))]', className)}
121
+ className={cn('text-sm text-[rgb(var(--pt-text-standard))]', className)}
122
122
  {...props}
123
123
  />
124
124
  ));
package/src/components/ui/drawer.tsx CHANGED
@@ -66,7 +66,7 @@ const DrawerTitle = React.forwardRef<
66
66
  >(({ className, ...props }, ref) => (
67
67
  <DrawerPrimitive.Title
68
68
  ref={ref}
69
- className={cn('text-[18px] leading-[28px] font-semibold leading-none tracking-tight text-foreground', className)}
69
+ className={cn('text-lg font-semibold leading-none tracking-tight text-foreground', className)}
70
70
  {...props}
71
71
  />
72
72
  ));
@@ -78,7 +78,7 @@ const DrawerDescription = React.forwardRef<
78
78
  >(({ className, ...props }, ref) => (
79
79
  <DrawerPrimitive.Description
80
80
  ref={ref}
81
- className={cn('text-[14px] leading-[20px] text-muted-foreground', className)}
81
+ className={cn('text-sm text-muted-foreground', className)}
82
82
  {...props}
83
83
  />
84
84
  ));
package/src/components/ui/dropdown-menu.tsx CHANGED
@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
25
25
  <DropdownMenuPrimitive.SubTrigger
26
26
  ref={ref}
27
27
  className={cn(
28
- 'flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] px-[8px] py-[6px] text-[14px] leading-[20px] outline-none focus:bg-accent data-[state=open]:bg-accent',
28
+ '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',
29
29
  inset && 'pl-[32px]',
30
30
  className
31
31
  )}
@@ -80,7 +80,7 @@ const DropdownMenuItem = React.forwardRef<
80
80
  <DropdownMenuPrimitive.Item
81
81
  ref={ref}
82
82
  className={cn(
83
- 'relative flex cursor-default select-none items-center gap-[8px] rounded-[var(--pt-radius-sm)] px-[8px] py-[6px] text-[14px] leading-[20px] 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',
83
+ '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',
84
84
  inset && 'pl-[32px]',
85
85
  className
86
86
  )}
@@ -96,7 +96,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
96
96
  <DropdownMenuPrimitive.CheckboxItem
97
97
  ref={ref}
98
98
  className={cn(
99
- 'relative flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] py-[6px] pl-[32px] pr-[8px] text-[14px] leading-[20px] outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
99
+ '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',
100
100
  className
101
101
  )}
102
102
  checked={checked}
@@ -119,7 +119,7 @@ const DropdownMenuRadioItem = React.forwardRef<
119
119
  <DropdownMenuPrimitive.RadioItem
120
120
  ref={ref}
121
121
  className={cn(
122
- 'relative flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] py-[6px] pl-[32px] pr-[8px] text-[14px] leading-[20px] outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
122
+ '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',
123
123
  className
124
124
  )}
125
125
  {...props}
@@ -142,7 +142,7 @@ const DropdownMenuLabel = React.forwardRef<
142
142
  >(({ className, inset, ...props }, ref) => (
143
143
  <DropdownMenuPrimitive.Label
144
144
  ref={ref}
145
- className={cn('px-[8px] py-[6px] text-[14px] leading-[20px] font-semibold', inset && 'pl-[32px]', className)}
145
+ className={cn('px-[8px] py-[6px] text-sm font-semibold', inset && 'pl-[32px]', className)}
146
146
  {...props}
147
147
  />
148
148
  ));
@@ -162,7 +162,7 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
162
162
 
163
163
  const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
164
164
  return (
165
- <span className={cn('ml-auto text-[13px] leading-[20px] tracking-widest opacity-60', className)} {...props} />
165
+ <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
166
166
  );
167
167
  };
168
168
  DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
package/src/components/ui/empty.tsx CHANGED
@@ -45,14 +45,14 @@ function EmptyMedia({
45
45
  }
46
46
 
47
47
  function EmptyTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
48
- return <div className={cn('text-[18px] leading-[28px] font-medium tracking-tight', className)} {...props} />;
48
+ return <div className={cn('text-lg font-medium tracking-tight', className)} {...props} />;
49
49
  }
50
50
 
51
51
  function EmptyDescription({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
52
52
  return (
53
53
  <div
54
54
  className={cn(
55
- 'text-[14px] leading-[20px] leading-relaxed text-muted-foreground [&>a]:text-primary [&>a]:underline [&>a]:underline-offset-4',
55
+ 'text-sm leading-relaxed text-muted-foreground [&>a]:text-primary [&>a]:underline [&>a]:underline-offset-4',
56
56
  className
57
57
  )}
58
58
  {...props}
@@ -64,7 +64,7 @@ function EmptyContent({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
64
64
  return (
65
65
  <div
66
66
  className={cn(
67
- 'flex w-full max-w-sm min-w-0 flex-col items-center gap-[16px] text-balance text-[14px] leading-[20px]',
67
+ 'flex w-full max-w-sm min-w-0 flex-col items-center gap-[16px] text-balance text-sm',
68
68
  className
69
69
  )}
70
70
  {...props}
package/src/components/ui/field.tsx CHANGED
@@ -12,8 +12,8 @@ function FieldSet({ className, ...props }: React.FieldsetHTMLAttributes<HTMLFiel
12
12
  const fieldLegendVariants = cva('mb-[12px] font-medium text-foreground', {
13
13
  variants: {
14
14
  variant: {
15
- legend: 'text-[16px] leading-[24px]',
16
- label: 'text-[14px] leading-[20px]'
15
+ legend: 'text-base',
16
+ label: 'text-sm'
17
17
  }
18
18
  },
19
19
  defaultVariants: {
@@ -84,7 +84,7 @@ function FieldTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement
84
84
  return (
85
85
  <div
86
86
  className={cn(
87
- 'flex w-fit items-center gap-[8px] text-[14px] leading-[20px] font-medium leading-snug text-foreground',
87
+ 'flex w-fit items-center gap-[8px] text-sm font-medium leading-snug text-foreground',
88
88
  className
89
89
  )}
90
90
  {...props}
@@ -95,7 +95,7 @@ function FieldTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement
95
95
  function FieldDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
96
96
  return (
97
97
  <p
98
- className={cn('text-[14px] leading-[20px] font-normal leading-normal text-muted-foreground', className)}
98
+ className={cn('text-sm font-normal leading-normal text-muted-foreground', className)}
99
99
  {...props}
100
100
  />
101
101
  );
@@ -107,7 +107,7 @@ function FieldSeparator({
107
107
  ...props
108
108
  }: React.HTMLAttributes<HTMLDivElement>) {
109
109
  return (
110
- <div className={cn('relative -my-[8px] h-[20px] text-[14px] leading-[20px]', className)} {...props}>
110
+ <div className={cn('relative -my-[8px] h-[20px] text-sm', className)} {...props}>
111
111
  <Separator className="absolute inset-0 top-1/2" />
112
112
  {children && (
113
113
  <span className="relative mx-auto flex w-fit items-center justify-center bg-background px-[8px] text-muted-foreground">
@@ -153,7 +153,7 @@ function FieldError({
153
153
  return (
154
154
  <div
155
155
  role="alert"
156
- className={cn('text-[14px] leading-[20px] font-normal text-destructive', className)}
156
+ className={cn('text-sm font-normal text-destructive', className)}
157
157
  {...props}
158
158
  >
159
159
  {content}
package/src/components/ui/input-group.tsx CHANGED
@@ -28,7 +28,7 @@ const InputGroupInput = React.forwardRef<
28
28
  <input
29
29
  ref={ref}
30
30
  className={cn(
31
- 'h-full w-full flex-1 bg-transparent text-[13px] leading-[20px] text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed',
31
+ 'h-full w-full flex-1 bg-transparent text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed',
32
32
  className
33
33
  )}
34
34
  {...props}
@@ -37,7 +37,7 @@ const InputGroupInput = React.forwardRef<
37
37
  InputGroupInput.displayName = 'InputGroupInput';
38
38
 
39
39
  const inputGroupAddonVariants = cva(
40
- 'flex items-center gap-[8px] text-[14px] leading-[20px] text-muted-foreground [&_svg]:size-[16px] [&_svg]:shrink-0',
40
+ 'flex items-center gap-[8px] text-sm text-muted-foreground [&_svg]:size-[16px] [&_svg]:shrink-0',
41
41
  {
42
42
  variants: {
43
43
  align: {
@@ -62,7 +62,7 @@ function InputGroupAddon({
62
62
  function InputGroupText({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
63
63
  return (
64
64
  <span
65
- className={cn('flex items-center gap-[8px] text-[14px] leading-[20px] text-muted-foreground', className)}
65
+ className={cn('flex items-center gap-[8px] text-sm text-muted-foreground', className)}
66
66
  {...props}
67
67
  />
68
68
  );
package/src/components/ui/input-otp.tsx CHANGED
@@ -38,7 +38,7 @@ const InputOTPSlot = React.forwardRef<
38
38
  <div
39
39
  ref={ref}
40
40
  className={cn(
41
- 'relative flex h-[32px] w-[36px] items-center justify-center border-y border-r border-input text-[13px] leading-[20px] 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',
41
+ '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',
42
42
  isActive && 'z-10 ring-1 ring-ring',
43
43
  className
44
44
  )}
package/src/components/ui/input.tsx CHANGED
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
10
10
  <input
11
11
  type={type}
12
12
  className={cn(
13
- 'flex h-[32px] w-full rounded-[var(--pt-radius-md)] border border-input bg-transparent px-[12px] py-[4px] text-[13px] leading-[20px] transition-colors file:border-0 file:bg-transparent file:text-[14px] file:leading-[20px] 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',
13
+ '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',
14
14
  className
15
15
  )}
16
16
  ref={ref}
package/src/components/ui/item.tsx CHANGED
@@ -14,7 +14,7 @@ function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Sepa
14
14
  }
15
15
 
16
16
  const itemVariants = cva(
17
- 'group/item flex flex-wrap items-center rounded-[var(--pt-radius-md)] border text-[14px] leading-[20px] text-foreground outline-none transition-colors',
17
+ 'group/item flex flex-wrap items-center rounded-[var(--pt-radius-md)] border text-sm text-foreground outline-none transition-colors',
18
18
  {
19
19
  variants: {
20
20
  variant: {
@@ -73,7 +73,7 @@ function ItemContent({ className, ...props }: React.HTMLAttributes<HTMLDivElemen
73
73
  function ItemTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
74
74
  return (
75
75
  <div
76
- className={cn('flex w-fit items-center gap-[8px] text-[14px] leading-[20px] font-medium leading-snug', className)}
76
+ className={cn('flex w-fit items-center gap-[8px] text-sm font-medium leading-snug', className)}
77
77
  {...props}
78
78
  />
79
79
  );
@@ -82,7 +82,7 @@ function ItemTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>
82
82
  function ItemDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
83
83
  return (
84
84
  <p
85
- className={cn('line-clamp-2 text-[14px] leading-[20px] leading-normal text-muted-foreground', className)}
85
+ className={cn('line-clamp-2 text-sm leading-normal text-muted-foreground', className)}
86
86
  {...props}
87
87
  />
88
88
  );
package/src/components/ui/kbd.tsx CHANGED
@@ -6,7 +6,7 @@ function Kbd({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
6
6
  return (
7
7
  <kbd
8
8
  className={cn(
9
- '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-[12px] leading-[16px] font-medium text-muted-foreground [&_svg]:size-[12px]',
9
+ '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]',
10
10
  className
11
11
  )}
12
12
  {...props}