feat(react): redesign quick actions (#125)

* refactor: rename component

* feat(react): redesign quick actions

* chore: add changeset for quick actions redesign

* chore: lint

Author: wangdicoder

.changeset/quick-actions-product-redesign.md

@@ -0,0 +1,5 @@
+---
+"@tiny-design/react": patch
+---
+
+Redesign QuickActions with a new product-grade API, richer action content, and improved keyboard and hover interactions.

.changeset/skeleton-animation-api-refresh.md

@@ -1,6 +1,6 @@
 ---
-"@tiny-design/react": major
-"@tiny-design/tokens": major
+"@tiny-design/react": patch
+"@tiny-design/tokens": patch
 ---
 
 Redesign Skeleton animation APIs, component structure, and related configuration.

apps/docs/public/llms-full.txt

@@ -1874,29 +1874,29 @@ export interface SpaceProps extends BaseProps, React.PropsWithRef<JSX.IntrinsicE
 
 ```
 
-### speed-dial
+### quick-actions
 ```typescript
 import React from 'react';
 import { BaseProps } from '../_utils/props';
 
-export type SpeedDialDirection = 'up' | 'down' | 'left' | 'right';
-export type SpeedDialTrigger = 'hover' | 'click';
+export type QuickActionsDirection = 'up' | 'down' | 'left' | 'right';
+export type QuickActionsTrigger = 'hover' | 'click';
 
-export interface SpeedDialProps
+export interface QuickActionsProps
   extends BaseProps,
     Omit<React.PropsWithoutRef<JSX.IntrinsicElements['div']>, 'children'> {
   icon?: React.ReactNode;
   openIcon?: React.ReactNode;
-  direction?: SpeedDialDirection;
+  direction?: QuickActionsDirection;
   open?: boolean;
-  trigger?: SpeedDialTrigger;
+  trigger?: QuickActionsTrigger;
   onOpen?: () => void;
   onClose?: () => void;
   disabled?: boolean;
   children?: React.ReactNode;
 }
 
-export interface SpeedDialActionProps
+export interface QuickActionsActionProps
   extends BaseProps,
     Omit<React.PropsWithoutRef<JSX.IntrinsicElements['button']>, 'children'> {
   icon: React.ReactNode;

apps/docs/public/llms.txt

@@ -81,7 +81,7 @@ Components that accept sizes use: `'sm' | 'md' | 'lg'`
 - **Dropdown** — Drop-down list with menu items.
 - **Menu** — Navigation menu with dropdown support. Props: `mode` (`'horizontal'|'vertical'|'inline'`).
 - **Pagination** — Page through data sets. Props: `total`, `current`, `pageSize`, `onChange`.
-- **SpeedDial** — Floating action button expanding to actions.
+- **QuickActions** — Floating action button expanding to actions.
 - **Steps** — Wizard-like numbered step navigation.
 
 ### Data Display

apps/docs/src/containers/components/component-icons.tsx

@@ -29,7 +29,7 @@ const icons: Record<string, IconFn> = {
   dropdown: () => <svg viewBox="0 0 24 24" fill="none"><rect x="4" y="4" width="16" height="5" rx="1.5" {...s} /><polyline points="9,15 12,18 15,15" {...s} /><rect x="4" y="12" width="16" height="9" rx="1.5" {...s} strokeDasharray="3 2" /></svg>,
   menu: () => <svg viewBox="0 0 24 24" fill="none"><line x1="4" y1="6" x2="20" y2="6" {...s} /><line x1="4" y1="12" x2="20" y2="12" {...s} /><line x1="4" y1="18" x2="20" y2="18" {...s} /></svg>,
   pagination: () => <svg viewBox="0 0 24 24" fill="none"><polyline points="3,12 6,9 6,15" {...s} /><rect x="8" y="9" width="3" height="6" rx="1" fill="currentColor" opacity="0.2" {...s} /><rect x="13" y="9" width="3" height="6" rx="1" {...s} /><rect x="18" y="9" width="3" height="6" rx="1" {...s} /></svg>,
-  'speed-dial': () => <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="18" r="3" {...s} /><line x1="12" y1="15" x2="12" y2="13" {...s} /><circle cx="12" cy="11" r="1.5" {...s} /><circle cx="12" cy="6" r="1.5" {...s} /></svg>,
+  'quick-actions': () => <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="18" r="3" {...s} /><line x1="12" y1="15" x2="12" y2="13" {...s} /><circle cx="12" cy="11" r="1.5" {...s} /><circle cx="12" cy="6" r="1.5" {...s} /></svg>,
   steps: () => <svg viewBox="0 0 24 24" fill="none"><circle cx="5" cy="12" r="2.5" fill="currentColor" opacity="0.2" {...s} /><line x1="7.5" y1="12" x2="10" y2="12" {...s} /><circle cx="12" cy="12" r="2.5" {...s} /><line x1="14.5" y1="12" x2="17" y2="12" {...s} /><circle cx="19" cy="12" r="2.5" {...s} /></svg>,
 
   // Data Display

apps/docs/src/routers.tsx

@@ -161,7 +161,7 @@ const c = {
   keyboard: ll(() => import('../../../packages/react/src/keyboard/index.md'), () => import('../../../packages/react/src/keyboard/index.zh_CN.md')),
   sticky: ll(() => import('../../../packages/react/src/sticky/index.md'), () => import('../../../packages/react/src/sticky/index.zh_CN.md')),
   select: ll(() => import('../../../packages/react/src/select/index.md'), () => import('../../../packages/react/src/select/index.zh_CN.md')),
-  speedDial: ll(() => import('../../../packages/react/src/speed-dial/index.md'), () => import('../../../packages/react/src/speed-dial/index.zh_CN.md')),
+  quickActions: ll(() => import('../../../packages/react/src/quick-actions/index.md'), () => import('../../../packages/react/src/quick-actions/index.zh_CN.md')),
   anchor: ll(() => import('../../../packages/react/src/anchor/index.md'), () => import('../../../packages/react/src/anchor/index.zh_CN.md')),
   autoComplete: ll(() => import('../../../packages/react/src/auto-complete/index.md'), () => import('../../../packages/react/src/auto-complete/index.zh_CN.md')),
   inputOTP: ll(() => import('../../../packages/react/src/input-otp/index.md'), () => import('../../../packages/react/src/input-otp/index.zh_CN.md')),
@@ -251,7 +251,7 @@ export const getComponentMenu = (s: SiteLocale): RouterItem[] => {
         { title: 'Dropdown', route: 'dropdown', component: pick(c.dropdown, z) },
         { title: 'Menu', route: 'menu', component: pick(c.menu, z) },
         { title: 'Pagination', route: 'pagination', component: pick(c.pagination, z) },
-        { title: 'SpeedDial', route: 'speed-dial', component: pick(c.speedDial, z) },
+        { title: 'QuickActions', route: 'quick-actions', component: pick(c.quickActions, z) },
         { title: 'Steps', route: 'steps', component: pick(c.steps, z) },
       ],
     },

packages/extract/src/extract-components.ts

@@ -18,7 +18,7 @@ export const CATEGORY_MAP: Record<string, string> = {
   waterfall: 'Layout',
 
   anchor: 'Navigation', breadcrumb: 'Navigation', dropdown: 'Navigation',
-  menu: 'Navigation', pagination: 'Navigation', 'speed-dial': 'Navigation',
+  menu: 'Navigation', pagination: 'Navigation', 'quick-actions': 'Navigation',
   steps: 'Navigation',
 
   avatar: 'Data Display', badge: 'Data Display', calendar: 'Data Display',