@teamix-evo/ui 0.5.0 → 0.6.0

package/src/components/date-picker/index.tsx

@@ -29,7 +29,7 @@ import {
 } from 'date-fns';
 import { zhCN } from 'date-fns/locale';
 import {
-  Calendar as CalendarIcon,
+  CalendarDays as CalendarIcon,
   ChevronLeft,
   ChevronRight,
   ChevronsLeft,
@@ -578,6 +578,9 @@ function DatePicker({
     dateToParts(value),
   );
 
+  // Track pointer-down inside popover to suppress blur side-effects
+  const pointerInPanelRef = React.useRef(false);
+
   // input text
   const inputRef = React.useRef<HTMLInputElement>(null);
   const anchorRef = React.useRef<HTMLDivElement>(null);
@@ -611,6 +614,7 @@ function DatePicker({
   };
 
   const handleInputBlur = () => {
+    if (pointerInPanelRef.current) return;
     const parsed = tryParseDate(inputText, displayFormat);
     if (parsed) commitValue(parsed);
     else if (inputText.trim() === '') commitValue(undefined);
@@ -724,6 +728,7 @@ function DatePicker({
             <CalendarIcon
               data-slot="date-picker-icon"
               aria-hidden
+              strokeWidth={1.5}
               className="size-4 shrink-0 text-muted-foreground"
             />
           )}
@@ -732,6 +737,12 @@ function DatePicker({
       <PopoverContent
         data-slot="date-picker-content"
         className="w-auto rounded-md p-0"
+        onPointerDown={() => {
+          pointerInPanelRef.current = true;
+        }}
+        onPointerUp={() => {
+          pointerInPanelRef.current = false;
+        }}
         onOpenAutoFocus={(e) => e.preventDefault()}
         onInteractOutside={(e) => {
           const target = e.detail.originalEvent.target as Node | null;
@@ -806,7 +817,7 @@ function DatePicker({
             ) : (
               <Calendar
                 mode="single"
-                selected={value}
+                selected={draftDate}
                 onSelect={handleSelectDate}
                 disabled={disabledDates}
                 defaultMonth={value}
@@ -972,6 +983,9 @@ function DateRangePicker({
   const [hoveredDate, setHoveredDate] = React.useState<Date | undefined>();
   const [activeField, setActiveField] = React.useState<'from' | 'to'>('from');
 
+  // Track pointer-down inside popover to suppress blur side-effects
+  const pointerInPanelRef2 = React.useRef(false);
+
   const fromInputRef = React.useRef<HTMLInputElement>(null);
   const toInputRef = React.useRef<HTMLInputElement>(null);
   const anchorRef = React.useRef<HTMLDivElement>(null);
@@ -1115,6 +1129,7 @@ function DateRangePicker({
   };
 
   const handleFromBlur = () => {
+    if (pointerInPanelRef2.current) return;
     const t = fromText.trim();
     if (!t) {
       // 仅当之前已有起始值时，才视为用户主动清空。
@@ -1145,6 +1160,7 @@ function DateRangePicker({
   };
 
   const handleToBlur = () => {
+    if (pointerInPanelRef2.current) return;
     const t = toText.trim();
     if (!t) {
       // 同 handleFromBlur：仅当之前已有结束值时才主动清空，避免吞掉日历首次点击
@@ -1375,6 +1391,7 @@ function DateRangePicker({
             <CalendarIcon
               data-slot="date-range-picker-icon"
               aria-hidden
+              strokeWidth={1.5}
               className="size-4 shrink-0 text-muted-foreground"
             />
           )}
@@ -1383,6 +1400,12 @@ function DateRangePicker({
       <PopoverContent
         data-slot="date-range-picker-content"
         className={cn('w-auto rounded-md p-0', RANGE_PREVIEW_BASE_CLASS)}
+        onPointerDown={() => {
+          pointerInPanelRef2.current = true;
+        }}
+        onPointerUp={() => {
+          pointerInPanelRef2.current = false;
+        }}
         onPointerLeave={() => setHoveredDate(undefined)}
         onOpenAutoFocus={(e) => e.preventDefault()}
         onInteractOutside={(e) => {

package/src/components/field/index.tsx

@@ -209,7 +209,7 @@ function FieldInsetBox({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot="field-inset-box"
       className={cn(
         'flex h-8 w-full items-center rounded-md border border-input bg-card',
-        'focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
+        'focus-within:border-ring focus-within:ring-ring/20',
         'group-data-[invalid=true]/field:!border-destructive group-data-[invalid=true]/field:!shadow-none',
         'group-data-[invalid=true]/field:focus-within:!border-destructive group-data-[invalid=true]/field:focus-within:ring-destructive/20',
         INSET_INNER_RESET,

package/src/components/filter-bar/index.tsx

@@ -418,7 +418,7 @@ function FilterBarSearch({
         data-slot="filter-bar-search"
         className={cn(
           'flex h-8 items-center overflow-hidden rounded-md border border-input bg-card',
-          'focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
+          'focus-within:border-ring focus-within:ring-ring/20',
           className,
         )}
         {...props}

package/src/components/float-button/meta.md

@@ -35,16 +35,8 @@
 
 ```tsx
 <DemoContainer>
-  <FloatButton
-    icon={<MessageCircleIcon />}
-    aria-label="客服"
-    badge="3"
-  />
-  <FloatButton
-    variant="default"
-    icon={<PlusIcon />}
-    aria-label="新建"
-  />
+  <FloatButton icon={<MessageCircleIcon />} aria-label="客服" badge="3" />
+  <FloatButton variant="default" icon={<PlusIcon />} aria-label="新建" />
 </DemoContainer>
 ```
 
@@ -54,11 +46,7 @@
 
 ```tsx
 <DemoContainer>
-  <FloatButton
-    shape="square"
-    icon={<PlusIcon />}
-    aria-label="新建"
-  />
+  <FloatButton shape="square" icon={<PlusIcon />} aria-label="新建" />
 </DemoContainer>
 ```
 

package/src/components/icon/index.tsx

@@ -20,8 +20,7 @@
  * <span className="text-success"><SuccessFilledIcon /></span>
  * ```
  *
- * 尺寸：默认 `size-5`（20px），通过 `className` 覆盖（如 `size-3.5` / `size-4`）。
- * viewBox 采用 `-1 -1 22 22`，使图形在容器内自带 1px 内边距留白。
+ * 尺寸：默认 `size-4`（16px），通过 `className` 覆盖（如 `size-3.5` / `size-5`）。
  */
 import * as React from 'react';
 
@@ -37,9 +36,9 @@ function BaseFilledIcon({
   return (
     <svg
       data-slot="icon"
-      viewBox="-1 -1 22 22"
+      viewBox="0 0 20 20"
       aria-hidden="true"
-      className={cn('size-5 shrink-0', className)}
+      className={cn('size-4 shrink-0', className)}
       {...props}
     >
       {children}

package/src/components/icon/meta.md

@@ -22,8 +22,7 @@
 - ```tsx
 - <span className="text-success"><SuccessFilledIcon /></span>
 - ```
-- 尺寸：默认 `size-5`（20px），通过 `className` 覆盖（如 `size-3.5` / `size-4`）。
-- viewBox 采用 `-1 -1 22 22`，使图形在容器内自带 1px 内边距留白。
+- 尺寸：默认 `size-4`（16px），通过 `className` 覆盖（如 `size-3.5` / `size-5`）。
 
 ## 示例
 

package/src/components/input/index.tsx

@@ -17,7 +17,7 @@ import { cn } from '@/lib/utils';
 // ─── Input cva ──────────────────────────────────────────────────────────────
 
 const inputVariants = cva(
-  'w-full min-w-0 cursor-text rounded-md border border-input bg-transparent font-normal transition-colors outline-none file:inline-flex file:cursor-pointer file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20',
+  'w-full min-w-0 cursor-text rounded-md border border-input bg-transparent font-normal transition-colors outline-none file:inline-flex file:cursor-pointer file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/20 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20',
   {
     variants: {
       size: {
@@ -46,11 +46,19 @@ export interface InputProps
 // ─── Input ──────────────────────────────────────────────────────────────────
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, size, ...props }, ref) => {
+  ({ className, type, size, role: roleProp, ...props }, ref) => {
+    // <input type="search"> 会被浏览器渲染原生 clear / 放大镜 / IE Reveal 按钮，
+    // 与 Input 自带的 `clearable` / `suffix={<Search/>}` 视觉冲突。组件层透明屏蔽：
+    // 渲染为 type="text" + role="searchbox"，保留无障碍语义，免除业务侧 globals.css
+    // 补 webkit/ms 伪元素 reset（原 ADR 0023 §4 “手动加 CSS” 路径）。
+    const isSearch = type === 'search';
+    const safeType = isSearch ? 'text' : type;
+    const role = isSearch ? roleProp ?? 'searchbox' : roleProp;
     return (
       <input
         ref={ref}
-        type={type}
+        type={safeType}
+        role={role}
         data-slot="input"
         className={cn(inputVariants({ size, className }))}
         {...props}

package/src/components/input-group/index.tsx

@@ -32,7 +32,7 @@ const InputGroup = React.forwardRef<
       data-slot="input-group"
       role="group"
       className={cn(
-        'group/input-group relative flex h-8 w-full min-w-0 items-center rounded-md border border-input transition-colors outline-none has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
+        'group/input-group relative flex h-8 w-full min-w-0 items-center rounded-md border border-input transition-colors outline-none has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/20 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
         className,
       )}
       {...props}
@@ -136,7 +136,7 @@ function InputGroupInput({ className, ...props }: InputProps) {
     <Input
       data-slot="input-group-control"
       className={cn(
-        'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0',
+        'h-full flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0',
         className,
       )}
       {...props}
@@ -163,10 +163,7 @@ function InputGroupTextarea({
 // ─── InputGroupClear ──────────────────────────────────────────────────────────────
 
 export interface InputGroupClearProps
-  extends Omit<
-    React.ComponentProps<typeof InputGroupButton>,
-    'children' | 'aria-label'
-  > {
+  extends Omit<React.ComponentProps<'span'>, 'children'> {
   /** 是否显示。受控用法下一般绑定 `value.length > 0`。 @default true */
   visible?: boolean;
   /** 无障碍 label。 @default '清除' */
@@ -181,32 +178,36 @@ function InputGroupClear({
   visible = true,
   className,
   'aria-label': ariaLabel = '清除',
+  onClick,
   ...props
 }: InputGroupClearProps) {
   if (!visible) return null;
   return (
-    <InputGroupButton
-      data-slot="input-group-clear"
-      size="icon-xs"
+    <span
+      role="button"
       aria-label={ariaLabel}
+      tabIndex={-1}
+      data-slot="input-group-clear"
+      onPointerDown={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+      onClick={onClick}
       className={cn(
-        'text-muted-foreground hover:bg-transparent hover:text-foreground',
+        'inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground',
         className,
       )}
       {...props}
     >
-      <XIcon />
-    </InputGroupButton>
+      <XIcon className="size-3.5" />
+    </span>
   );
 }
 
 // ─── InputGroupPasswordToggle ───────────────────────────────────────────────────────
 
 export interface InputGroupPasswordToggleProps
-  extends Omit<
-    React.ComponentProps<typeof InputGroupButton>,
-    'children' | 'onClick'
-  > {
+  extends Omit<React.ComponentProps<'span'>, 'children' | 'onClick'> {
   /** 当前密码是否可见。 */
   visible: boolean;
   /** 切换可见性，由父级同步修改 `<InputGroupInput type>` 。 */
@@ -224,20 +225,29 @@ function InputGroupPasswordToggle({
   ...props
 }: InputGroupPasswordToggleProps) {
   return (
-    <InputGroupButton
-      data-slot="input-group-password-toggle"
-      size="icon-xs"
+    <span
+      role="button"
       aria-label={visible ? '隐藏密码' : '显示密码'}
       aria-pressed={visible}
+      tabIndex={-1}
+      data-slot="input-group-password-toggle"
+      onPointerDown={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
       onClick={() => onVisibleChange(!visible)}
       className={cn(
-        'text-muted-foreground hover:bg-transparent hover:text-foreground',
+        'inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground',
         className,
       )}
       {...props}
     >
-      {visible ? <EyeOffIcon /> : <EyeIcon />}
-    </InputGroupButton>
+      {visible ? (
+        <EyeOffIcon className="size-3.5" />
+      ) : (
+        <EyeIcon className="size-3.5" />
+      )}
+    </span>
   );
 }
 
@@ -268,7 +278,7 @@ function InputGroupShowCount({
       data-slot="input-group-show-count"
       data-overflow={overflow || undefined}
       className={cn(
-        'flex items-center text-xs tabular-nums text-muted-foreground select-none',
+        'flex items-center text-xs tabular-nums text-muted-foreground/60 select-none',
         'data-[overflow]:text-destructive',
         className,
       )}

package/src/components/input-group/meta.md

@@ -44,6 +44,21 @@
 </InputGroup>
 ```
 
+### WithTrailingIcon
+
+后置图标插槽：搜索图标在右侧。
+
+```tsx
+<InputGroup className="w-64">
+  <InputGroupInput placeholder="搜索..." />
+  <InputGroupAddon align="inline-end">
+    <InputGroupText>
+      <SearchIcon />
+    </InputGroupText>
+  </InputGroupAddon>
+</InputGroup>
+```
+
 ### Email
 
 邮箱输入：左侧邮件图标 + 右侧域名后缀文本。

package/src/components/input-group/stories.tsx

@@ -44,6 +44,20 @@ export const WithLeadingIcon: Story = {
   ),
 };
 
+/** 后置图标插槽：搜索图标在右侧。 */
+export const WithTrailingIcon: Story = {
+  render: () => (
+    <InputGroup className="w-64">
+      <InputGroupInput placeholder="搜索..." />
+      <InputGroupAddon align="inline-end">
+        <InputGroupText>
+          <SearchIcon />
+        </InputGroupText>
+      </InputGroupAddon>
+    </InputGroup>
+  ),
+};
+
 /**
  * 搜索场景：左侧 SearchIcon + 右侧 InputGroupClear 受控清除按钮。
  * 仅当 value 非空时显示清除按钮。

package/src/components/input-ip/index.tsx

@@ -27,7 +27,7 @@ const inputIpVariants = cva(
     // `w-fit` 显式锁定“宽度 = 内容”，避免被 flex/grid 父容器 cross-axis stretch 拉满。
     // 消费方需要铺满父容器时，可通过 className="w-full" 覆盖。
     'inline-flex w-fit items-center rounded-md border border-input bg-transparent transition-colors',
-    'focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
+    'focus-within:border-ring focus-within:ring-ring/20',
     'aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-1 aria-[invalid=true]:ring-destructive/20',
   ].join(' '),
   {

package/src/components/input-number/index.tsx

@@ -21,8 +21,8 @@ import { cn } from '@/lib/utils';
 
 const inputNumberVariants = cva(
   [
-    'inline-flex w-full min-w-0 items-stretch overflow-hidden rounded-md border border-input bg-transparent transition-colors',
-    'focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
+    'group/input-number inline-flex w-full min-w-0 items-stretch overflow-hidden rounded-md border border-input bg-transparent transition-colors',
+    'focus-within:border-ring focus-within:ring-ring/20',
     'has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-input/50 has-[input:disabled]:opacity-50',
     'has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]]:ring-1 has-[input[aria-invalid=true]]:ring-destructive/20',
   ].join(' '),
@@ -253,7 +253,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
     };
 
     const stepBtnClass =
-      'flex cursor-pointer items-center justify-center text-muted-foreground hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-muted-foreground';
+      'flex cursor-pointer items-center justify-center text-muted-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent';
 
     const upDisabled =
       disabled ||
@@ -325,7 +325,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
         {controls && variant === 'default' ? (
           <div
             data-slot="input-number-handlers"
-            className="flex flex-col border-l border-input"
+            className="flex flex-col divide-y divide-input border-l border-input opacity-0 transition-opacity group-hover/input-number:opacity-100 group-focus-within/input-number:opacity-100"
           >
             <button
               type="button"
@@ -345,7 +345,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
               onClick={() => stepBy(-1)}
               aria-label="减少"
               data-slot="input-number-decrement"
-              className={cn(stepBtnClass, 'h-1/2 border-t border-input px-1.5')}
+              className={cn(stepBtnClass, 'h-1/2 px-1.5')}
             >
               <ChevronDown className="size-3.5" />
             </button>

package/src/components/item/meta.md

@@ -127,18 +127,10 @@
       <span className="text-xs text-muted-foreground">3 小时前更新</span>
     </ItemContent>
     <ItemActions>
-      <Button
-        size="sm"
-        variant="ghost"
-        className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-      >
+      <Button size="sm" variant="link" className="text-muted-foreground">
         编辑
       </Button>
-      <Button
-        size="sm"
-        variant="ghost"
-        className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-      >
+      <Button size="sm" variant="link" className="text-muted-foreground">
         删除
       </Button>
     </ItemActions>
@@ -159,18 +151,10 @@
       <span className="text-xs text-muted-foreground">1 天前更新</span>
     </ItemContent>
     <ItemActions>
-      <Button
-        size="sm"
-        variant="ghost"
-        className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-      >
+      <Button size="sm" variant="link" className="text-muted-foreground">
         编辑
       </Button>
-      <Button
-        size="sm"
-        variant="ghost"
-        className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-      >
+      <Button size="sm" variant="link" className="text-muted-foreground">
         删除
       </Button>
     </ItemActions>
@@ -221,26 +205,18 @@ Actions 自动分隔
     <ItemDescription>点击操作按钮管理</ItemDescription>
   </ItemContent>
   <ItemActions separated>
-    <Button
-      size="sm"
-      variant="ghost"
-      className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-    >
+    <Button size="sm" variant="link" className="text-muted-foreground">
       <PencilIcon />
       编辑
     </Button>
-    <Button
-      size="sm"
-      variant="ghost"
-      className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-    >
+    <Button size="sm" variant="link" className="text-muted-foreground">
       <BookmarkIcon />
       收藏
     </Button>
     <Button
       size="sm"
-      variant="ghost"
-      className="text-destructive hover:bg-transparent hover:text-destructive/80"
+      variant="link"
+      className="text-destructive hover:text-destructive/80"
     >
       <TrashIcon />
       删除
@@ -314,11 +290,7 @@ Actions 自动分隔
   </Item>
   <ItemGroupFooter>
     <span>共 2 条通知</span>
-    <Button
-      size="sm"
-      variant="ghost"
-      className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-    >
+    <Button size="sm" variant="link" className="text-muted-foreground">
       查看全部
     </Button>
   </ItemGroupFooter>
@@ -344,11 +316,7 @@ Actions 自动分隔
   </ItemContent>
   <ItemFooter>
     <span>截止：2025-01-15</span>
-    <Button
-      size="sm"
-      variant="ghost"
-      className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-    >
+    <Button size="sm" variant="link" className="text-muted-foreground">
       查看
     </Button>
   </ItemFooter>

package/src/components/item/stories.tsx

@@ -51,7 +51,7 @@ export const Default: Story = {
           <Button
             size="icon-sm"
             variant="ghost"
-            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
+            className="text-muted-foreground"
           >
             <MoreHorizontalIcon />
           </Button>
@@ -69,7 +69,7 @@ export const Default: Story = {
           <Button
             size="icon-sm"
             variant="ghost"
-            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
+            className="text-muted-foreground"
           >
             <MoreHorizontalIcon />
           </Button>
@@ -169,18 +169,10 @@ export const Horizontal: Story = {
           <span className="text-xs text-muted-foreground">3 小时前更新</span>
         </ItemContent>
         <ItemActions>
-          <Button
-            size="sm"
-            variant="ghost"
-            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-          >
+          <Button size="sm" variant="link" className="text-muted-foreground">
             编辑
           </Button>
-          <Button
-            size="sm"
-            variant="ghost"
-            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-          >
+          <Button size="sm" variant="link" className="text-muted-foreground">
             删除
           </Button>
         </ItemActions>
@@ -201,18 +193,10 @@ export const Horizontal: Story = {
           <span className="text-xs text-muted-foreground">1 天前更新</span>
         </ItemContent>
         <ItemActions>
-          <Button
-            size="sm"
-            variant="ghost"
-            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-          >
+          <Button size="sm" variant="link" className="text-muted-foreground">
             编辑
           </Button>
-          <Button
-            size="sm"
-            variant="ghost"
-            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-          >
+          <Button size="sm" variant="link" className="text-muted-foreground">
             删除
           </Button>
         </ItemActions>
@@ -261,26 +245,18 @@ export const ActionsSeparated: Story = {
         <ItemDescription>点击操作按钮管理</ItemDescription>
       </ItemContent>
       <ItemActions separated>
-        <Button
-          size="sm"
-          variant="ghost"
-          className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-        >
+        <Button size="sm" variant="link" className="text-muted-foreground">
           <PencilIcon />
           编辑
         </Button>
-        <Button
-          size="sm"
-          variant="ghost"
-          className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-        >
+        <Button size="sm" variant="link" className="text-muted-foreground">
           <BookmarkIcon />
           收藏
         </Button>
         <Button
           size="sm"
-          variant="ghost"
-          className="text-destructive hover:bg-transparent hover:text-destructive/80"
+          variant="link"
+          className="text-destructive hover:text-destructive/80"
         >
           <TrashIcon />
           删除
@@ -352,11 +328,7 @@ export const GroupWithHeaderFooter: Story = {
       </Item>
       <ItemGroupFooter>
         <span>共 2 条通知</span>
-        <Button
-          size="sm"
-          variant="ghost"
-          className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-        >
+        <Button size="sm" variant="link" className="text-muted-foreground">
           查看全部
         </Button>
       </ItemGroupFooter>
@@ -381,11 +353,7 @@ export const WithHeaderFooter: Story = {
       </ItemContent>
       <ItemFooter>
         <span>截止：2025-01-15</span>
-        <Button
-          size="sm"
-          variant="ghost"
-          className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-        >
+        <Button size="sm" variant="link" className="text-muted-foreground">
           查看
         </Button>
       </ItemFooter>

package/src/components/radio-group/index.tsx

@@ -60,7 +60,7 @@ function RadioGroupItem({ className, ...props }: RadioGroupItemProps) {
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        'peer relative flex aspect-square size-4 shrink-0 cursor-pointer items-center justify-center rounded-full border border-input shadow-xs transition-[color,box-shadow] outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:text-primary',
+        'peer relative flex aspect-square size-4 shrink-0 cursor-pointer items-center justify-center rounded-full border border-input shadow-xs transition-[color,box-shadow] outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:text-primary',
         className,
       )}
       {...props}