@ptengine/design-components 0.5.2 → 0.6.0

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-[14px] leading-[20px] font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50'
+    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50'
 );
 
 const Label = React.forwardRef<

package/src/components/ui/marker.tsx

@@ -5,7 +5,7 @@ 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-[14px] leading-[20px] text-muted-foreground [&_svg:not([class*='size-'])]:size-[16px] [&:is(a)]:underline [&:is(a)]:underline-offset-4 [&:is(a):hover]:text-foreground",
+    "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",
     {
         variants: {
             variant: {

package/src/components/ui/menubar.tsx

@@ -35,7 +35,7 @@ const MenubarTrigger = React.forwardRef<
     <MenubarPrimitive.Trigger
         ref={ref}
         className={cn(
-            'flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] px-[12px] py-[4px] text-[14px] leading-[20px] font-medium text-foreground outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+            'flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] px-[12px] py-[4px] text-sm font-medium text-foreground outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
             className
         )}
         {...props}
@@ -52,7 +52,7 @@ const MenubarSubTrigger = React.forwardRef<
     <MenubarPrimitive.SubTrigger
         ref={ref}
         className={cn(
-            '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',
+            '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',
             inset && 'pl-[32px]',
             className
         )}
@@ -108,7 +108,7 @@ const MenubarItem = React.forwardRef<
     <MenubarPrimitive.Item
         ref={ref}
         className={cn(
-            'relative 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-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            'relative 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-[disabled]:pointer-events-none data-[disabled]:opacity-50',
             inset && 'pl-[32px]',
             className
         )}
@@ -124,7 +124,7 @@ const MenubarCheckboxItem = React.forwardRef<
     <MenubarPrimitive.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-[14px] leading-[20px] outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            'relative flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] py-[6px] pl-[32px] pr-[8px] text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
             className
         )}
         checked={checked}
@@ -147,7 +147,7 @@ const MenubarRadioItem = React.forwardRef<
     <MenubarPrimitive.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-[14px] leading-[20px] outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            'relative flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] py-[6px] pl-[32px] pr-[8px] text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
             className
         )}
         {...props}
@@ -170,7 +170,7 @@ const MenubarLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
     <MenubarPrimitive.Label
         ref={ref}
-        className={cn('px-[8px] py-[6px] text-[14px] leading-[20px] font-semibold text-foreground', inset && 'pl-[32px]', className)}
+        className={cn('px-[8px] py-[6px] text-sm font-semibold text-foreground', inset && 'pl-[32px]', className)}
         {...props}
     />
 ));
@@ -191,7 +191,7 @@ MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
 const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
     return (
         <span
-            className={cn('ml-auto text-[13px] leading-[20px] tracking-widest text-muted-foreground', className)}
+            className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
             {...props}
         />
     );

package/src/components/ui/message.tsx

@@ -22,7 +22,7 @@ function Message({
             data-slot="message"
             data-align={align}
             className={cn(
-                'group/message relative flex w-full min-w-0 gap-[8px] text-[14px] leading-[20px] data-[align=end]:flex-row-reverse',
+                'group/message relative flex w-full min-w-0 gap-[8px] text-sm data-[align=end]:flex-row-reverse',
                 className
             )}
             {...props}
@@ -61,7 +61,7 @@ function MessageHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElem
         <div
             data-slot="message-header"
             className={cn(
-                'flex max-w-full min-w-0 items-center px-[12px] text-[13px] leading-[20px] font-medium text-muted-foreground group-has-[[data-variant=ghost]]/message:px-0',
+                'flex max-w-full min-w-0 items-center px-[12px] text-xs font-medium text-muted-foreground group-has-[[data-variant=ghost]]/message:px-0',
                 className
             )}
             {...props}
@@ -74,7 +74,7 @@ function MessageFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElem
         <div
             data-slot="message-footer"
             className={cn(
-                'flex max-w-full min-w-0 items-center px-[12px] text-[13px] leading-[20px] font-medium text-muted-foreground group-has-[[data-variant=ghost]]/message:px-0 group-data-[align=end]/message:justify-end',
+                'flex max-w-full min-w-0 items-center px-[12px] text-xs font-medium text-muted-foreground group-has-[[data-variant=ghost]]/message:px-0 group-data-[align=end]/message:justify-end',
                 className
             )}
             {...props}

package/src/components/ui/native-select.tsx

@@ -11,7 +11,7 @@ const NativeSelect = React.forwardRef<
         <select
             ref={ref}
             className={cn(
-                'h-[32px] w-full appearance-none rounded-[var(--pt-radius-md)] border border-input bg-transparent pl-[12px] pr-[32px] text-[13px] leading-[20px] text-foreground transition-colors enabled:hover:border-neutral focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:enabled:hover:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/30',
+                'h-[32px] w-full appearance-none rounded-[var(--pt-radius-md)] border border-input bg-transparent pl-[12px] pr-[32px] text-xs text-foreground transition-colors enabled:hover:border-neutral focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:enabled:hover:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/30',
                 className
             )}
             {...props}

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

@@ -35,7 +35,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-    'state-layer group inline-flex h-[32px] w-max items-center justify-center rounded-[var(--pt-radius-md)] bg-background px-[16px] py-[8px] text-[14px] leading-[20px] font-medium text-foreground transition-colors focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=open]:bg-accent'
+    'state-layer group inline-flex h-[32px] w-max items-center justify-center rounded-[var(--pt-radius-md)] bg-background px-[16px] py-[8px] text-sm font-medium text-foreground transition-colors focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=open]:bg-accent'
 );
 
 const NavigationMenuTrigger = React.forwardRef<

package/src/components/ui/prompt-picker.tsx

@@ -63,6 +63,21 @@ export interface PromptPickerItem {
      * **只支持两层,不要做递归多层。**
      */
     children?: PromptPickerItem[];
+    /**
+     * 可选:条目右端的小徽标,如「即将上线」。**只放短枚举**(1-4 字),它是给整条加限定,
+     * 不是第二行说明 —— 长说明走 `hint`(悬停)。
+     *
+     * 用扁平 chip(`rounded-sm bg-muted`)而不是库的 `Badge` 组件:后者是
+     * `rounded-full font-semibold` 胶囊,在 32px 高的条目里显得过重,且 lin 已裁定
+     * Badge 只留给短枚举场景的独立标签。此处写法与 apps/x 的 ⋮ 菜单出口组一致。
+     */
+    badge?: string;
+    /**
+     * 可选:该条不可选(常与 `badge: '即将上线'` 搭配)。
+     * 整条降到辅助色、不响应点击、不进 Tab 序,也不给 hover 反馈 ——
+     * **点了没反应比灰着更伤**,所以连状态层都不挂。
+     */
+    disabled?: boolean;
     /**
      * 可选图标。⚠️ **一组条目全用同一个图标时不要传** —— 它不携带任何用于选择的信息,
      * 只会在每行左边留一段空白。只有各条图标不同、且图标在编码类别时才传。
@@ -116,7 +131,7 @@ export interface PromptPickerProps extends Omit<React.HTMLAttributes<HTMLDivElem
    否则叠层缩在边框内侧、圆角与边框内圆弧不同心(错位约 1px)。 */
 const CHIP_BASE =
     'inline-flex h-[32px] max-w-full items-center gap-[8px] rounded-[var(--pt-radius-md)] border ' +
-    'px-[12px] text-left text-[13px] leading-[20px] transition-colors ' +
+    'px-[12px] text-left text-xs transition-colors ' +
     '[&>svg]:size-[16px] [&>svg]:shrink-0 ' +
     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2';
 
@@ -124,6 +139,18 @@ const CHIP_IDLE =
     'state-layer [--pt-state-layer-border:1px] border-input bg-background text-foreground ' +
     'hover:border-neutral';
 
+/* 未上线/不可选的条目:整条降辅助色,**不挂 state-layer、不给 hover** ——
+   灰着不给反馈,好过给了反馈却什么都不发生。 */
+const CHIP_DISABLED = 'border-input bg-background text-[rgb(var(--pt-text-tage))]';
+
+/* 条目右端的小徽标。扁平 chip,不是库 Badge(理由见 PromptPickerItem.badge 的注释)。
+   用 `2xs`(12/16)——比条目正文 `xs`(13/20) 低一档,不与之争夺注意力。
+   ⚠️ 原先写的是 `text-[11px] leading-[16px]`,**11px 不在字阶表里**(表里最小是 2xs 12)。
+   字阶来自 Figma Text Styles,自造档位会让「组件跟着规范走」这件事从这里开始漏。 */
+const CHIP_BADGE =
+    'ml-[8px] shrink-0 whitespace-nowrap rounded-[var(--pt-radius-sm)] bg-muted ' +
+    'px-[6px] text-2xs text-[rgb(var(--pt-text-tage))]';
+
 /* 第二层顶部的分类项 —— 面包屑,不是选中态(见头注释规则 2)。
    持久态底色 = 中性 8%(库规范:选中/激活用 --pt-bg-selected,不用彩色);
    它自己不可点,所以不挂 state-layer。 */
@@ -217,22 +244,44 @@ const PromptPicker = React.forwardRef<HTMLDivElement, PromptPickerProps>(
                     )}
                 >
                     {lead && (
-                        <p className="text-[13px] leading-[20px] text-[rgb(var(--pt-text-tage))]">
+                        <p className="text-xs text-[rgb(var(--pt-text-tage))]">
                             {lead}
                         </p>
                     )}
-                    {visibleItems.map(item => (
-                        <button
-                            key={item.id}
-                            type="button"
-                            title={item.hint ?? item.label}
-                            onClick={() => handleChipClick(item)}
-                            className={cn(CHIP_BASE, CHIP_IDLE)}
-                        >
-                            {item.icon}
-                            <span className="min-w-0 truncate">{item.label}</span>
-                        </button>
-                    ))}
+                    {visibleItems.map(item =>
+                        item.disabled ? (
+                            /* 不可选:用 div + aria-disabled,不是 <button disabled> ——
+                               后者仍会被读屏念成「命令,已禁用」且占 Tab 序。
+                               有 badge 时 label 撑开、badge 贴右;无 badge 时不加 flex-1,
+                               胶囊仍按内容收窄(不撑满)。 */
+                            <div
+                                key={item.id}
+                                aria-disabled="true"
+                                title={item.hint ?? item.label}
+                                className={cn(CHIP_BASE, CHIP_DISABLED)}
+                            >
+                                {item.icon}
+                                <span className={cn('min-w-0 truncate', item.badge && 'flex-1')}>
+                                    {item.label}
+                                </span>
+                                {item.badge && <span className={CHIP_BADGE}>{item.badge}</span>}
+                            </div>
+                        ) : (
+                            <button
+                                key={item.id}
+                                type="button"
+                                title={item.hint ?? item.label}
+                                onClick={() => handleChipClick(item)}
+                                className={cn(CHIP_BASE, CHIP_IDLE)}
+                            >
+                                {item.icon}
+                                <span className={cn('min-w-0 truncate', item.badge && 'flex-1')}>
+                                    {item.label}
+                                </span>
+                                {item.badge && <span className={CHIP_BADGE}>{item.badge}</span>}
+                            </button>
+                        )
+                    )}
                 </div>
             </div>
         );

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

@@ -6,9 +6,9 @@ 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]',
+    sm: 'h-[24px] px-[8px] rounded-[var(--pt-radius-sm)] [&_input]:text-2xs',
     default: 'h-[32px] px-[10px]',
-    lg: 'h-[40px] px-[12px] [&_input]:text-[14px] [&_input]:leading-[20px]'
+    lg: 'h-[40px] px-[12px] [&_input]:text-sm'
 } as const;
 
 /* 放大镜(寓意图标):16 / 16 / 20 */

package/src/components/ui/select.tsx

@@ -25,7 +25,7 @@ const SelectValue = SelectPrimitive.Value;
  * `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';
+    'flex h-[32px] items-center justify-between whitespace-nowrap rounded-[var(--pt-radius-md)] border border-input bg-transparent px-[12px] py-[8px] text-xs 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';
 
 const SelectTrigger = React.forwardRef<
     React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -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('px-[8px] py-[6px] text-sm font-semibold', className)}
         {...props}
     />
 ));
@@ -124,7 +124,7 @@ 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',
+            'relative flex w-full cursor-default select-none items-center rounded-[var(--pt-radius-sm)] py-[6px] pl-[8px] pr-[32px] text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
             className
         )}
         {...props}

package/src/components/ui/sheet.tsx

@@ -92,7 +92,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('text-lg font-semibold text-foreground', className)}
         {...props}
     />
 ));
@@ -104,7 +104,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <SheetPrimitive.Description
         ref={ref}
-        className={cn('text-[14px] leading-[20px] text-muted-foreground', className)}
+        className={cn('text-sm text-muted-foreground', className)}
         {...props}
     />
 ));

package/src/components/ui/sidebar.tsx

@@ -407,7 +407,7 @@ const SidebarGroupLabel = React.forwardRef<
             ref={ref}
             data-sidebar="group-label"
             className={cn(
-                'flex h-[32px] shrink-0 items-center rounded-[var(--pt-radius-md)] px-[8px] text-[13px] leading-[20px] font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-[16px] [&>svg]:shrink-0',
+                'flex h-[32px] shrink-0 items-center rounded-[var(--pt-radius-md)] px-[8px] text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-[16px] [&>svg]:shrink-0',
                 'group-data-[collapsible=icon]:-mt-[32px] group-data-[collapsible=icon]:opacity-0',
                 className
             )}
@@ -444,7 +444,7 @@ const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProp
         <div
             ref={ref}
             data-sidebar="group-content"
-            className={cn('w-full text-[14px] leading-[20px]', className)}
+            className={cn('w-full text-sm', className)}
             {...props}
         />
     )
@@ -476,7 +476,7 @@ const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li
 SidebarMenuItem.displayName = 'SidebarMenuItem';
 
 const sidebarMenuButtonVariants = cva(
-    'peer/menu-button flex w-full items-center gap-[8px] overflow-hidden rounded-[var(--pt-radius-md)] p-[8px] text-left text-[14px] leading-[20px] text-sidebar-foreground outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-[32px] aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-selected data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-[32px] group-data-[collapsible=icon]:!p-[8px] [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0',
+    'peer/menu-button flex w-full items-center gap-[8px] overflow-hidden rounded-[var(--pt-radius-md)] p-[8px] text-left text-sm text-sidebar-foreground outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-[32px] aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-selected data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-[32px] group-data-[collapsible=icon]:!p-[8px] [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0',
     {
         variants: {
             variant: {
@@ -485,9 +485,9 @@ const sidebarMenuButtonVariants = cva(
                     'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
             },
             size: {
-                default: 'h-[32px] text-[14px] leading-[20px]',
-                sm: 'h-[28px] text-[13px] leading-[20px]',
-                lg: 'h-[48px] text-[14px] leading-[20px] group-data-[collapsible=icon]:!p-0'
+                default: 'h-[32px] text-sm',
+                sm: 'h-[28px] text-xs',
+                lg: 'h-[48px] text-sm group-data-[collapsible=icon]:!p-0'
             }
         },
         defaultVariants: {
@@ -579,7 +579,7 @@ const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<'
             ref={ref}
             data-sidebar="menu-badge"
             className={cn(
-                'pointer-events-none absolute right-[4px] flex h-[20px] min-w-[20px] select-none items-center justify-center rounded-[var(--pt-radius-md)] px-[4px] text-[13px] leading-[20px] font-medium tabular-nums text-sidebar-foreground',
+                'pointer-events-none absolute right-[4px] flex h-[20px] min-w-[20px] select-none items-center justify-center rounded-[var(--pt-radius-md)] px-[4px] text-xs font-medium tabular-nums text-sidebar-foreground',
                 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
                 'peer-data-[size=sm]/menu-button:top-[4px]',
                 'peer-data-[size=default]/menu-button:top-[6px]',
@@ -665,8 +665,8 @@ const SidebarMenuSubButton = React.forwardRef<
             className={cn(
                 'flex h-[28px] min-w-0 -translate-x-px items-center gap-[8px] overflow-hidden rounded-[var(--pt-radius-md)] px-[8px] text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
                 'data-[active=true]:bg-selected data-[active=true]:text-sidebar-accent-foreground',
-                size === 'sm' && 'text-[13px] leading-[20px]',
-                size === 'md' && 'text-[14px] leading-[20px]',
+                size === 'sm' && 'text-xs',
+                size === 'md' && 'text-sm',
                 'group-data-[collapsible=icon]:hidden',
                 className
             )}

package/src/components/ui/table.tsx

@@ -7,7 +7,7 @@ const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableE
         <div className="relative w-full overflow-auto">
             <table
                 ref={ref}
-                className={cn('w-full caption-bottom text-[14px] leading-[20px] text-foreground', className)}
+                className={cn('w-full caption-bottom text-sm text-foreground', className)}
                 {...props}
             />
         </div>
@@ -88,7 +88,7 @@ const TableCaption = React.forwardRef<
     HTMLTableCaptionElement,
     React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-    <caption ref={ref} className={cn('mt-[16px] text-[14px] leading-[20px] text-muted-foreground', className)} {...props} />
+    <caption ref={ref} className={cn('mt-[16px] text-sm text-muted-foreground', className)} {...props} />
 ));
 TableCaption.displayName = 'TableCaption';
 

package/src/components/ui/tabs.tsx

@@ -32,9 +32,9 @@ const LIST_SIZE: Record<TabsVariant, Record<TabsSize, string>> = {
 };
 
 const TRIGGER_TEXT: Record<TabsSize, string> = {
-    sm: 'text-[12px] leading-[16px]',
-    default: 'text-[13px] leading-[20px]',
-    lg: 'text-[14px] leading-[20px]'
+    sm: 'text-2xs',
+    default: 'text-xs',
+    lg: 'text-sm'
 };
 
 const Tabs = React.forwardRef<

package/src/components/ui/textarea.tsx

@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         return (
             <textarea
                 className={cn(
-                    'flex min-h-[60px] w-full rounded-[var(--pt-radius-md)] border border-input bg-transparent px-[12px] py-[8px] text-[14px] leading-[20px] placeholder:text-muted-foreground transition-colors enabled:hover:border-neutral focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:enabled:hover:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/30',
+                    'flex min-h-[60px] w-full rounded-[var(--pt-radius-md)] border border-input bg-transparent px-[12px] py-[8px] text-sm placeholder:text-muted-foreground transition-colors enabled:hover:border-neutral focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:enabled:hover:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/30',
                     className
                 )}
                 ref={ref}

package/src/components/ui/toggle.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
 
 const toggleVariants = cva(
-    'state-layer inline-flex items-center justify-center gap-[8px] rounded-[var(--pt-radius-md)] text-[14px] leading-[20px] font-medium text-foreground transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:bg-selected data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-[16px] [&_svg]:shrink-0',
+    'state-layer inline-flex items-center justify-center gap-[8px] rounded-[var(--pt-radius-md)] text-sm font-medium text-foreground transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:bg-selected data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-[16px] [&_svg]:shrink-0',
     {
         variants: {
             variant: {
@@ -13,9 +13,9 @@ const toggleVariants = cva(
                 outline: 'border border-input bg-transparent [--pt-state-layer-border:1px]'
             },
             size: {
-                default: 'h-[32px] min-w-[36px] px-[8px] text-[13px] leading-[20px]',
-                sm: 'h-[24px] min-w-[32px] rounded-[var(--pt-radius-sm)] px-[6px] text-[12px] leading-[16px]',
-                lg: 'h-[40px] min-w-[40px] px-[10px] text-[14px] leading-[20px] [&_svg]:size-[20px]'
+                default: 'h-[32px] min-w-[36px] px-[8px] text-xs',
+                sm: 'h-[24px] min-w-[32px] rounded-[var(--pt-radius-sm)] px-[6px] text-2xs',
+                lg: 'h-[40px] min-w-[40px] px-[10px] text-sm [&_svg]:size-[20px]'
             }
         },
         defaultVariants: {

package/src/components/ui/tooltip.tsx

@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
             ref={ref}
             sideOffset={sideOffset}
             className={cn(
-                'z-[var(--pt-z-tooltip,50)] overflow-hidden rounded-[var(--pt-radius-md)] bg-primary px-[12px] py-[6px] text-[13px] leading-[20px] text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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',
+                'z-[var(--pt-z-tooltip,50)] overflow-hidden rounded-[var(--pt-radius-md)] bg-primary px-[12px] py-[6px] text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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',
                 className
             )}
             {...props}