From bfe5541e56f68b74fd41974c804f8e7ac1ff9f2a Mon Sep 17 00:00:00 2001 From: shu Date: Thu, 22 Oct 2026 13:03:06 +0800 Subject: feat: 初始化 Astryx React 应用模板 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 基于 Vite 8、React 19、TypeScript 6、React Router 7 和 Astryx 0.7.2 搭建完整的中文应用起始模板，包含可直接运行的应用外壳与示例页面。 主要变更： - 使用 Astryx 构建 AppShell、顶部导航、可折叠侧边栏和响应式移动端抽屉。 - 接入 Astryx neutral 主题与中文语言包，支持明暗主题切换并持久化偏好。 - 新增概览、组件、图标、关于和 404 页面，统一使用共享页面框架。 - 将页面路由、侧边栏名称、图标和active状态合并到 app-routes.tsx， 路由与导航由同一份配置生成，避免重复维护。 - 新增根目录 app.config.ts，可在 browser/history 与 hash 路由模式之间切换； 当前保留 hash 模式配置。 - 组件页提供 14 个可交互组合场景，覆盖全部 173 个 Astryx 组件， 包含按钮、表单、表格、导航、聊天、对话框、菜单、命令面板和 Toast 等。 - 新增图标页面，支持浏览 29 个 Astryx 语义图标和 1903 个 Lucide 图标， 提供搜索、分页、图标集切换和点击复制用法。 - 对组件页和图标页实施路由级懒加载，并按 React、React Router 拆分 vendor chunk，降低首屏入口体积并改善长期缓存。 - 接入 React Router 的 LinkProvider，保证 Astryx 链接、导航和按钮在两种 路由模式下均使用客户端导航。 - 配置 pnpm 供应链策略例外与依赖构建许可，锁定可以正常安装的依赖版本。 - 补充 README，记录项目结构、脚本、组件展厅、图标页、路由模式与构建策略。 验证结果： - pnpm build 通过 - pnpm lint 0 warnings - browser 与 hash 两种路由模式的页面和侧边栏导航均已验证 --- src/App.tsx | 11 + src/app-routes.tsx | 56 ++ src/astryx-themes.ts | 15 + src/components/AppLayout.tsx | 79 +++ src/components/ComponentsRoute.tsx | 16 + src/components/IconsRoute.tsx | 16 + src/components/Page.tsx | 42 ++ src/components/PageLoading.tsx | 13 + src/data/astryxComponents.ts | 1223 ++++++++++++++++++++++++++++++++++++ src/demos/ActionsDemo.tsx | 83 +++ src/demos/ChatDemo.tsx | 50 ++ src/demos/CommandPaletteDemo.tsx | 46 ++ src/demos/DataDemo.tsx | 72 +++ src/demos/DialogsDemo.tsx | 95 +++ src/demos/FeedbackDemo.tsx | 35 ++ src/demos/InputsDemo.tsx | 58 ++ src/demos/LayoutDemo.tsx | 52 ++ src/demos/MenusDemo.tsx | 97 +++ src/demos/NavigationDemo.tsx | 35 ++ src/demos/ProvidersDemo.tsx | 29 + src/demos/SelectionDemo.tsx | 55 ++ src/demos/SelectorsDemo.tsx | 33 + src/demos/TypographyDemo.tsx | 36 ++ src/index.css | 2 + src/main.tsx | 19 + src/pages/AboutPage.tsx | 202 ++++++ src/pages/ComponentsPage.tsx | 422 +++++++++++++ src/pages/HomePage.tsx | 219 +++++++ src/pages/IconsPage.tsx | 334 ++++++++++ src/pages/NotFoundPage.tsx | 27 + src/router.tsx | 28 + src/theme/ThemeMode.tsx | 55 ++ src/theme/themeModeContext.ts | 10 + src/theme/useThemeMode.ts | 12 + 34 files changed, 3577 insertions(+) create mode 100644 src/App.tsx create mode 100644 src/app-routes.tsx create mode 100644 src/astryx-themes.ts create mode 100644 src/components/AppLayout.tsx create mode 100644 src/components/ComponentsRoute.tsx create mode 100644 src/components/IconsRoute.tsx create mode 100644 src/components/Page.tsx create mode 100644 src/components/PageLoading.tsx create mode 100644 src/data/astryxComponents.ts create mode 100644 src/demos/ActionsDemo.tsx create mode 100644 src/demos/ChatDemo.tsx create mode 100644 src/demos/CommandPaletteDemo.tsx create mode 100644 src/demos/DataDemo.tsx create mode 100644 src/demos/DialogsDemo.tsx create mode 100644 src/demos/FeedbackDemo.tsx create mode 100644 src/demos/InputsDemo.tsx create mode 100644 src/demos/LayoutDemo.tsx create mode 100644 src/demos/MenusDemo.tsx create mode 100644 src/demos/NavigationDemo.tsx create mode 100644 src/demos/ProvidersDemo.tsx create mode 100644 src/demos/SelectionDemo.tsx create mode 100644 src/demos/SelectorsDemo.tsx create mode 100644 src/demos/TypographyDemo.tsx create mode 100644 src/index.css create mode 100644 src/main.tsx create mode 100644 src/pages/AboutPage.tsx create mode 100644 src/pages/ComponentsPage.tsx create mode 100644 src/pages/HomePage.tsx create mode 100644 src/pages/IconsPage.tsx create mode 100644 src/pages/NotFoundPage.tsx create mode 100644 src/router.tsx create mode 100644 src/theme/ThemeMode.tsx create mode 100644 src/theme/themeModeContext.ts create mode 100644 src/theme/useThemeMode.ts (limited to 'src') diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..91e52c9 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,11 @@ +import { LinkProvider } from '@astryxdesign/core/Link' +import { Link as RouterLink, RouterProvider } from 'react-router-dom' +import { router } from './router' + +export function App() { + return ( + + + + ) +} diff --git a/src/app-routes.tsx b/src/app-routes.tsx new file mode 100644 index 0000000..58747bb --- /dev/null +++ b/src/app-routes.tsx @@ -0,0 +1,56 @@ +import type { ReactNode } from 'react' +import type { LucideIcon } from 'lucide-react' +import { Blocks, House, Info, Shapes } from 'lucide-react' +import { ComponentsRoute } from './components/ComponentsRoute' +import { IconsRoute } from './components/IconsRoute' +import { AboutPage } from './pages/AboutPage' +import { HomePage } from './pages/HomePage' + +export interface AppRoute { + path: string + label: string + icon: LucideIcon + element: ReactNode + showInNav?: boolean +} + +/** + * 页面、路由和侧边栏的唯一数据源。 + * 新增页面时只在这里增加一项，路由与菜单会同步更新。 + */ +export const appRoutes: AppRoute[] = [ + { + path: '/', + label: '概览', + icon: House, + element: , + }, + { + path: '/components', + label: '组件', + icon: Blocks, + element: , + }, + { + path: '/icons', + label: '图标', + icon: Shapes, + element: , + }, + { + path: '/about', + label: '关于', + icon: Info, + element: , + }, +] + +export const navRoutes = appRoutes.filter( + (route) => route.showInNav !== false, +) + +export function isRouteActive(routePath: string, pathname: string) { + return routePath === '/' + ? pathname === '/' + : pathname === routePath || pathname.startsWith(`${routePath}/`) +} diff --git a/src/astryx-themes.ts b/src/astryx-themes.ts new file mode 100644 index 0000000..9f253e2 --- /dev/null +++ b/src/astryx-themes.ts @@ -0,0 +1,15 @@ +/** + * @generated by `astryx theme` — do not edit manually. + * @astryx-theme-record {"themes":{"neutral":"@astryxdesign/theme-neutral"},"defaultThemeSlug":"neutral"} + */ + +import {neutralTheme as _astryxTheme0} from "@astryxdesign/theme-neutral/built"; +import "@astryxdesign/theme-neutral/theme.css"; +import "@astryxdesign/theme-neutral/fonts.css"; + +export const themes = { + "neutral": _astryxTheme0, +} as const; +export type ThemeSlug = keyof typeof themes; + +export const defaultThemeSlug: keyof typeof themes = "neutral"; diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx new file mode 100644 index 0000000..9c93302 --- /dev/null +++ b/src/components/AppLayout.tsx @@ -0,0 +1,79 @@ +import { useLayoutEffect, useState } from 'react' +import { Outlet, useLocation } from 'react-router-dom' +import { AppShell } from '@astryxdesign/core/AppShell' +import { Icon } from '@astryxdesign/core/Icon' +import { IconButton } from '@astryxdesign/core/IconButton' +import { NavIcon } from '@astryxdesign/core/NavIcon' +import { SideNav, SideNavItem, SideNavSection } from '@astryxdesign/core/SideNav' +import { TopNav, TopNavHeading } from '@astryxdesign/core/TopNav' +import { Moon, Sparkles, Sun } from 'lucide-react' +import { isRouteActive, navRoutes } from '../app-routes' +import { useThemeMode } from '../theme/useThemeMode' + +export function AppLayout() { + const { pathname } = useLocation() + const { mode, toggleMode } = useThemeMode() + const [isMobileNavOpen, setIsMobileNavOpen] = useState(false) + + useLayoutEffect(() => { + const main = document.getElementById('astryx-app-shell-main') + if (main) main.scrollTop = 0 + window.scrollTo(0, 0) + }, [pathname]) + + const nextMode = mode === 'light' ? 'dark' : 'light' + + return ( + } + /> + } + /> + } + endContent={ + } + onClick={toggleMode} + /> + } + /> + } + sideNav={ + + + {navRoutes.map(({ label, path, icon }) => ( + setIsMobileNavOpen(false)} + /> + ))} + + + }> + + + ) +} diff --git a/src/components/ComponentsRoute.tsx b/src/components/ComponentsRoute.tsx new file mode 100644 index 0000000..53db94a --- /dev/null +++ b/src/components/ComponentsRoute.tsx @@ -0,0 +1,16 @@ +import { lazy, Suspense } from 'react' +import { PageLoading } from './PageLoading' + +const ComponentsPage = lazy(() => + import('../pages/ComponentsPage').then((module) => ({ + default: module.ComponentsPage, + })), +) + +export function ComponentsRoute() { + return ( + }> + + + ) +} diff --git a/src/components/IconsRoute.tsx b/src/components/IconsRoute.tsx new file mode 100644 index 0000000..83c7690 --- /dev/null +++ b/src/components/IconsRoute.tsx @@ -0,0 +1,16 @@ +import { lazy, Suspense } from 'react' +import { PageLoading } from './PageLoading' + +const IconsPage = lazy(() => + import('../pages/IconsPage').then((module) => ({ + default: module.IconsPage, + })), +) + +export function IconsRoute() { + return ( + }> + + + ) +} diff --git a/src/components/Page.tsx b/src/components/Page.tsx new file mode 100644 index 0000000..4dd1248 --- /dev/null +++ b/src/components/Page.tsx @@ -0,0 +1,42 @@ +import type { ReactNode } from 'react' +import { Layout, LayoutContent } from '@astryxdesign/core/Layout' +import { Heading } from '@astryxdesign/core/Heading' +import { Text } from '@astryxdesign/core/Text' +import { VStack } from '@astryxdesign/core/VStack' + +export function Page({ children }: { children: ReactNode }) { + return ( + {children}} + /> + ) +} + +interface PageHeaderProps { + eyebrow?: string + title: string + description?: string +} + +export function PageHeader({ eyebrow, title, description }: PageHeaderProps) { + return ( + + {eyebrow ? ( + + {eyebrow} + + ) : null} + + {title} + + {description ? ( + + {description} + + ) : null} + + ) +} diff --git a/src/components/PageLoading.tsx b/src/components/PageLoading.tsx new file mode 100644 index 0000000..3e98fe8 --- /dev/null +++ b/src/components/PageLoading.tsx @@ -0,0 +1,13 @@ +import { Center } from '@astryxdesign/core/Center' +import { Spinner } from '@astryxdesign/core/Spinner' +import { Page } from './Page' + +export function PageLoading() { + return ( + +
+ +
+ + ) +} diff --git a/src/data/astryxComponents.ts b/src/data/astryxComponents.ts new file mode 100644 index 0000000..352b20d --- /dev/null +++ b/src/data/astryxComponents.ts @@ -0,0 +1,1223 @@ +export type AstryxComponentGroup = 'base' | 'form' | 'overlay' + +export interface AstryxComponentEntry { + name: string + importPath: string + family: string + group: AstryxComponentGroup + docsUrl: string +} + +export const ASTRYX_COMPONENTS: AstryxComponentEntry[] = [ + { + name: 'AlertDialog', + importPath: '@astryxdesign/core/AlertDialog', + family: 'Dialog', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/AlertDialog', + }, + { + name: 'AppShell', + importPath: '@astryxdesign/core/AppShell', + family: 'AppShell', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/AppShell', + }, + { + name: 'AspectRatio', + importPath: '@astryxdesign/core/AspectRatio', + family: 'AspectRatio', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/AspectRatio', + }, + { + name: 'Avatar', + importPath: '@astryxdesign/core/Avatar', + family: 'Avatar', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Avatar', + }, + { + name: 'AvatarGroup', + importPath: '@astryxdesign/core/AvatarGroup', + family: 'Avatar', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/AvatarGroup', + }, + { + name: 'AvatarGroupOverflow', + importPath: '@astryxdesign/core/AvatarGroup', + family: 'Avatar', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/AvatarGroupOverflow', + }, + { + name: 'AvatarStatusDot', + importPath: '@astryxdesign/core/Avatar', + family: 'Avatar', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/AvatarStatusDot', + }, + { + name: 'Badge', + importPath: '@astryxdesign/core/Badge', + family: 'Badge', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Badge', + }, + { + name: 'Banner', + importPath: '@astryxdesign/core/Banner', + family: 'Banner', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Banner', + }, + { + name: 'BaseTypeahead', + importPath: '@astryxdesign/core/Typeahead', + family: 'Typeahead', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/BaseTypeahead', + }, + { + name: 'Blockquote', + importPath: '@astryxdesign/core/Blockquote', + family: 'Blockquote', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Blockquote', + }, + { + name: 'BottomSheet', + importPath: '@astryxdesign/core/BottomSheet', + family: 'BottomSheet', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/BottomSheet', + }, + { + name: 'BottomSheetSwitcher', + importPath: '@astryxdesign/core/BottomSheet', + family: 'BottomSheet', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/BottomSheetSwitcher', + }, + { + name: 'BreadcrumbItem', + importPath: '@astryxdesign/core/Breadcrumbs', + family: 'Breadcrumbs', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/BreadcrumbItem', + }, + { + name: 'Breadcrumbs', + importPath: '@astryxdesign/core/Breadcrumbs', + family: 'Breadcrumbs', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Breadcrumbs', + }, + { + name: 'Button', + importPath: '@astryxdesign/core/Button', + family: 'Button', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Button', + }, + { + name: 'ButtonGroup', + importPath: '@astryxdesign/core/ButtonGroup', + family: 'Button', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ButtonGroup', + }, + { + name: 'Calendar', + importPath: '@astryxdesign/core/Calendar', + family: 'Calendar', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/Calendar', + }, + { + name: 'Card', + importPath: '@astryxdesign/core/Card', + family: 'Card', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Card', + }, + { + name: 'Carousel', + importPath: '@astryxdesign/core/Carousel', + family: 'Carousel', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Carousel', + }, + { + name: 'Center', + importPath: '@astryxdesign/core/Center', + family: 'Layout', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Center', + }, + { + name: 'ChatComposer', + importPath: '@astryxdesign/core/Chat', + family: 'Chat', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ChatComposer', + }, + { + name: 'ChatComposerDrawer', + importPath: '@astryxdesign/core/Chat', + family: 'Chat', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ChatComposerDrawer', + }, + { + name: 'ChatComposerInput', + importPath: '@astryxdesign/core/Chat', + family: 'Chat', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ChatComposerInput', + }, + { + name: 'ChatDictationButton', + importPath: '@astryxdesign/core/Chat', + family: 'Chat', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ChatDictationButton', + }, + { + name: 'ChatLayout', + importPath: '@astryxdesign/core/Chat', + family: 'Chat', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ChatLayout', + }, + { + name: 'ChatLayoutScrollButton', + importPath: '@astryxdesign/core/Chat', + family: 'Chat', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ChatLayoutScrollButton', + }, + { + name: 'ChatMessage', + importPath: '@astryxdesign/core/Chat', + family: 'Chat', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ChatMessage', + }, + { + name: 'ChatMessageBubble', + importPath: '@astryxdesign/core/Chat', + family: 'Chat', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ChatMessageBubble', + }, + { + name: 'ChatMessageList', + importPath: '@astryxdesign/core/Chat', + family: 'Chat', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ChatMessageList', + }, + { + name: 'ChatMessageMetadata', + importPath: '@astryxdesign/core/Chat', + family: 'Chat', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ChatMessageMetadata', + }, + { + name: 'ChatSendButton', + importPath: '@astryxdesign/core/Chat', + family: 'Chat', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ChatSendButton', + }, + { + name: 'ChatSystemMessage', + importPath: '@astryxdesign/core/Chat', + family: 'Chat', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ChatSystemMessage', + }, + { + name: 'ChatTokenizedText', + importPath: '@astryxdesign/core/Chat', + family: 'Chat', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ChatTokenizedText', + }, + { + name: 'ChatToolCalls', + importPath: '@astryxdesign/core/Chat', + family: 'Chat', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ChatToolCalls', + }, + { + name: 'CheckboxInput', + importPath: '@astryxdesign/core/CheckboxInput', + family: 'Checkbox', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/CheckboxInput', + }, + { + name: 'CheckboxList', + importPath: '@astryxdesign/core/CheckboxList', + family: 'Checkbox', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/CheckboxList', + }, + { + name: 'CheckboxListItem', + importPath: '@astryxdesign/core/CheckboxList', + family: 'Checkbox', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/CheckboxListItem', + }, + { + name: 'Citation', + importPath: '@astryxdesign/core/Citation', + family: 'Citation', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Citation', + }, + { + name: 'ClickableCard', + importPath: '@astryxdesign/core/ClickableCard', + family: 'Card', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ClickableCard', + }, + { + name: 'Code', + importPath: '@astryxdesign/core/Code', + family: 'Code', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Code', + }, + { + name: 'CodeBlock', + importPath: '@astryxdesign/core/CodeBlock', + family: 'CodeBlock', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/CodeBlock', + }, + { + name: 'Collapsible', + importPath: '@astryxdesign/core/Collapsible', + family: 'Collapsible', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Collapsible', + }, + { + name: 'CollapsibleGroup', + importPath: '@astryxdesign/core/Collapsible', + family: 'Collapsible', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/CollapsibleGroup', + }, + { + name: 'CommandPalette', + importPath: '@astryxdesign/core/CommandPalette', + family: 'CommandPalette', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/CommandPalette', + }, + { + name: 'CommandPaletteEmpty', + importPath: '@astryxdesign/core/CommandPalette', + family: 'CommandPalette', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/CommandPaletteEmpty', + }, + { + name: 'CommandPaletteFooter', + importPath: '@astryxdesign/core/CommandPalette', + family: 'CommandPalette', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/CommandPaletteFooter', + }, + { + name: 'CommandPaletteGroup', + importPath: '@astryxdesign/core/CommandPalette', + family: 'CommandPalette', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/CommandPaletteGroup', + }, + { + name: 'CommandPaletteInput', + importPath: '@astryxdesign/core/CommandPalette', + family: 'CommandPalette', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/CommandPaletteInput', + }, + { + name: 'CommandPaletteItem', + importPath: '@astryxdesign/core/CommandPalette', + family: 'CommandPalette', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/CommandPaletteItem', + }, + { + name: 'CommandPaletteList', + importPath: '@astryxdesign/core/CommandPalette', + family: 'CommandPalette', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/CommandPaletteList', + }, + { + name: 'ComplexSelector', + importPath: '@astryxdesign/core/ComplexSelector', + family: 'Selector', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/ComplexSelector', + }, + { + name: 'ContextMenu', + importPath: '@astryxdesign/core/ContextMenu', + family: 'ContextMenu', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/ContextMenu', + }, + { + name: 'DateInput', + importPath: '@astryxdesign/core/DateInput', + family: 'DateInput', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/DateInput', + }, + { + name: 'DateRangeInput', + importPath: '@astryxdesign/core/DateRangeInput', + family: 'DateInput', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/DateRangeInput', + }, + { + name: 'DateTimeInput', + importPath: '@astryxdesign/core/DateTimeInput', + family: 'DateInput', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/DateTimeInput', + }, + { + name: 'Dialog', + importPath: '@astryxdesign/core/Dialog', + family: 'Dialog', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/Dialog', + }, + { + name: 'DialogHeader', + importPath: '@astryxdesign/core/Dialog', + family: 'Dialog', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/DialogHeader', + }, + { + name: 'Divider', + importPath: '@astryxdesign/core/Divider', + family: 'Divider', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Divider', + }, + { + name: 'Drawer', + importPath: '@astryxdesign/core/Drawer', + family: 'Drawer', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/Drawer', + }, + { + name: 'DrawerHeader', + importPath: '@astryxdesign/core/Drawer', + family: 'Drawer', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/DrawerHeader', + }, + { + name: 'DropdownMenu', + importPath: '@astryxdesign/core/DropdownMenu', + family: 'DropdownMenu', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/DropdownMenu', + }, + { + name: 'DropdownMenuCheckboxItem', + importPath: '@astryxdesign/core/DropdownMenu', + family: 'DropdownMenu', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/DropdownMenuCheckboxItem', + }, + { + name: 'DropdownMenuDivider', + importPath: '@astryxdesign/core/DropdownMenu', + family: 'DropdownMenu', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/DropdownMenuDivider', + }, + { + name: 'DropdownMenuGroup', + importPath: '@astryxdesign/core/DropdownMenu', + family: 'DropdownMenu', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/DropdownMenuGroup', + }, + { + name: 'DropdownMenuItem', + importPath: '@astryxdesign/core/DropdownMenu', + family: 'DropdownMenu', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/DropdownMenuItem', + }, + { + name: 'DropdownMenuRadioGroup', + importPath: '@astryxdesign/core/DropdownMenu', + family: 'DropdownMenu', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/DropdownMenuRadioGroup', + }, + { + name: 'DropdownMenuRadioItem', + importPath: '@astryxdesign/core/DropdownMenu', + family: 'DropdownMenu', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/DropdownMenuRadioItem', + }, + { + name: 'DropdownMenuSubMenu', + importPath: '@astryxdesign/core/DropdownMenu', + family: 'DropdownMenu', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/DropdownMenuSubMenu', + }, + { + name: 'EmptyState', + importPath: '@astryxdesign/core/EmptyState', + family: 'EmptyState', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/EmptyState', + }, + { + name: 'Field', + importPath: '@astryxdesign/core/Field', + family: 'Field', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/Field', + }, + { + name: 'FieldLabel', + importPath: '@astryxdesign/core/Field', + family: 'Field', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/FieldLabel', + }, + { + name: 'FieldStatus', + importPath: '@astryxdesign/core/FieldStatus', + family: 'Field', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/FieldStatus', + }, + { + name: 'FileInput', + importPath: '@astryxdesign/core/FileInput', + family: 'FileInput', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/FileInput', + }, + { + name: 'FormLayout', + importPath: '@astryxdesign/core/FormLayout', + family: 'Layout', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/FormLayout', + }, + { + name: 'Grid', + importPath: '@astryxdesign/core/Grid', + family: 'Layout', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Grid', + }, + { + name: 'GridSpan', + importPath: '@astryxdesign/core/Grid', + family: 'Layout', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/GridSpan', + }, + { + name: 'Heading', + importPath: '@astryxdesign/core/Heading', + family: 'Heading', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Heading', + }, + { + name: 'HoverCard', + importPath: '@astryxdesign/core/HoverCard', + family: 'HoverCard', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/HoverCard', + }, + { + name: 'HStack', + importPath: '@astryxdesign/core/HStack', + family: 'Layout', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/HStack', + }, + { + name: 'Icon', + importPath: '@astryxdesign/core/Icon', + family: 'Icon', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Icon', + }, + { + name: 'IconButton', + importPath: '@astryxdesign/core/IconButton', + family: 'Button', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/IconButton', + }, + { + name: 'InputGroup', + importPath: '@astryxdesign/core/InputGroup', + family: 'Field', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/InputGroup', + }, + { + name: 'InputGroupText', + importPath: '@astryxdesign/core/InputGroup', + family: 'Field', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/InputGroupText', + }, + { + name: 'InternationalizationProvider', + importPath: '@astryxdesign/core/i18n', + family: 'Utilities', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/InternationalizationProvider', + }, + { + name: 'Item', + importPath: '@astryxdesign/core/Item', + family: 'Item', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Item', + }, + { + name: 'Kbd', + importPath: '@astryxdesign/core/Kbd', + family: 'Kbd', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Kbd', + }, + { + name: 'Layout', + importPath: '@astryxdesign/core/Layout', + family: 'Layout', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Layout', + }, + { + name: 'LayoutContent', + importPath: '@astryxdesign/core/Layout', + family: 'Layout', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/LayoutContent', + }, + { + name: 'LayoutFooter', + importPath: '@astryxdesign/core/Layout', + family: 'Layout', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/LayoutFooter', + }, + { + name: 'LayoutHeader', + importPath: '@astryxdesign/core/Layout', + family: 'Layout', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/LayoutHeader', + }, + { + name: 'LayoutPanel', + importPath: '@astryxdesign/core/Layout', + family: 'Layout', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/LayoutPanel', + }, + { + name: 'Lightbox', + importPath: '@astryxdesign/core/Lightbox', + family: 'Lightbox', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/Lightbox', + }, + { + name: 'Link', + importPath: '@astryxdesign/core/Link', + family: 'Link', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Link', + }, + { + name: 'LinkProvider', + importPath: '@astryxdesign/core/Link', + family: 'Utilities', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/LinkProvider', + }, + { + name: 'List', + importPath: '@astryxdesign/core/List', + family: 'List', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/List', + }, + { + name: 'ListItem', + importPath: '@astryxdesign/core/List', + family: 'List', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ListItem', + }, + { + name: 'Markdown', + importPath: '@astryxdesign/core/Markdown', + family: 'Markdown', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Markdown', + }, + { + name: 'MediaTheme', + importPath: '@astryxdesign/core/theme', + family: 'Utilities', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/MediaTheme', + }, + { + name: 'MetadataList', + importPath: '@astryxdesign/core/MetadataList', + family: 'MetadataList', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/MetadataList', + }, + { + name: 'MetadataListItem', + importPath: '@astryxdesign/core/MetadataList', + family: 'MetadataList', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/MetadataListItem', + }, + { + name: 'MobileNav', + importPath: '@astryxdesign/core/MobileNav', + family: 'Navigation', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/MobileNav', + }, + { + name: 'MoreMenu', + importPath: '@astryxdesign/core/MoreMenu', + family: 'MoreMenu', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/MoreMenu', + }, + { + name: 'MultiSelector', + importPath: '@astryxdesign/core/MultiSelector', + family: 'Selector', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/MultiSelector', + }, + { + name: 'NavIcon', + importPath: '@astryxdesign/core/NavIcon', + family: 'Navigation', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/NavIcon', + }, + { + name: 'NumberInput', + importPath: '@astryxdesign/core/NumberInput', + family: 'NumberInput', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/NumberInput', + }, + { + name: 'Outline', + importPath: '@astryxdesign/core/Outline', + family: 'Outline', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Outline', + }, + { + name: 'OverflowList', + importPath: '@astryxdesign/core/OverflowList', + family: 'OverflowList', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/OverflowList', + }, + { + name: 'Overlay', + importPath: '@astryxdesign/core/Overlay', + family: 'Overlay', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/Overlay', + }, + { + name: 'Pagination', + importPath: '@astryxdesign/core/Pagination', + family: 'Pagination', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Pagination', + }, + { + name: 'Popover', + importPath: '@astryxdesign/core/Popover', + family: 'Popover', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/Popover', + }, + { + name: 'PowerSearch', + importPath: '@astryxdesign/core/PowerSearch', + family: 'PowerSearch', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/PowerSearch', + }, + { + name: 'ProgressBar', + importPath: '@astryxdesign/core/ProgressBar', + family: 'ProgressBar', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ProgressBar', + }, + { + name: 'RadioList', + importPath: '@astryxdesign/core/RadioList', + family: 'Radio', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/RadioList', + }, + { + name: 'RadioListItem', + importPath: '@astryxdesign/core/RadioList', + family: 'Radio', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/RadioListItem', + }, + { + name: 'ScrollableArea', + importPath: '@astryxdesign/core/ScrollableArea', + family: 'ScrollableArea', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/ScrollableArea', + }, + { + name: 'Section', + importPath: '@astryxdesign/core/Section', + family: 'Layout', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Section', + }, + { + name: 'SegmentedControl', + importPath: '@astryxdesign/core/SegmentedControl', + family: 'SegmentedControl', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/SegmentedControl', + }, + { + name: 'SegmentedControlItem', + importPath: '@astryxdesign/core/SegmentedControl', + family: 'SegmentedControl', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/SegmentedControlItem', + }, + { + name: 'SelectableCard', + importPath: '@astryxdesign/core/SelectableCard', + family: 'Card', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/SelectableCard', + }, + { + name: 'Selector', + importPath: '@astryxdesign/core/Selector', + family: 'Selector', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/Selector', + }, + { + name: 'SelectorOption', + importPath: '@astryxdesign/core/Selector', + family: 'Selector', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/SelectorOption', + }, + { + name: 'SideNav', + importPath: '@astryxdesign/core/SideNav', + family: 'Navigation', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/SideNav', + }, + { + name: 'SideNavCollapseButton', + importPath: '@astryxdesign/core/SideNav', + family: 'Navigation', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/SideNavCollapseButton', + }, + { + name: 'SideNavHeading', + importPath: '@astryxdesign/core/SideNav', + family: 'Navigation', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/SideNavHeading', + }, + { + name: 'SideNavItem', + importPath: '@astryxdesign/core/SideNav', + family: 'Navigation', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/SideNavItem', + }, + { + name: 'SideNavSection', + importPath: '@astryxdesign/core/SideNav', + family: 'Navigation', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/SideNavSection', + }, + { + name: 'Skeleton', + importPath: '@astryxdesign/core/Skeleton', + family: 'Skeleton', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Skeleton', + }, + { + name: 'Slider', + importPath: '@astryxdesign/core/Slider', + family: 'Slider', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/Slider', + }, + { + name: 'Spinner', + importPath: '@astryxdesign/core/Spinner', + family: 'Spinner', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Spinner', + }, + { + name: 'Stack', + importPath: '@astryxdesign/core/Stack', + family: 'Layout', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Stack', + }, + { + name: 'StatusDot', + importPath: '@astryxdesign/core/StatusDot', + family: 'StatusDot', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/StatusDot', + }, + { + name: 'Step', + importPath: '@astryxdesign/core/Stepper', + family: 'Stepper', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Step', + }, + { + name: 'Stepper', + importPath: '@astryxdesign/core/Stepper', + family: 'Stepper', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Stepper', + }, + { + name: 'Switch', + importPath: '@astryxdesign/core/Switch', + family: 'Switch', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/Switch', + }, + { + name: 'Tab', + importPath: '@astryxdesign/core/TabList', + family: 'Tabs', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Tab', + }, + { + name: 'Table', + importPath: '@astryxdesign/core/Table', + family: 'Table', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Table', + }, + { + name: 'TableBody', + importPath: '@astryxdesign/core/Table', + family: 'Table', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/TableBody', + }, + { + name: 'TableCell', + importPath: '@astryxdesign/core/Table', + family: 'Table', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/TableCell', + }, + { + name: 'TableFooter', + importPath: '@astryxdesign/core/Table', + family: 'Table', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/TableFooter', + }, + { + name: 'TableHeader', + importPath: '@astryxdesign/core/Table', + family: 'Table', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/TableHeader', + }, + { + name: 'TableHeaderCell', + importPath: '@astryxdesign/core/Table', + family: 'Table', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/TableHeaderCell', + }, + { + name: 'TableRow', + importPath: '@astryxdesign/core/Table', + family: 'Table', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/TableRow', + }, + { + name: 'TableSelectionToolbar', + importPath: '@astryxdesign/core/Table', + family: 'Table', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/TableSelectionToolbar', + }, + { + name: 'TabList', + importPath: '@astryxdesign/core/TabList', + family: 'Tabs', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/TabList', + }, + { + name: 'TabMenu', + importPath: '@astryxdesign/core/TabList', + family: 'Tabs', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/TabMenu', + }, + { + name: 'Text', + importPath: '@astryxdesign/core/Text', + family: 'Text', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Text', + }, + { + name: 'TextArea', + importPath: '@astryxdesign/core/TextArea', + family: 'TextArea', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/TextArea', + }, + { + name: 'TextInput', + importPath: '@astryxdesign/core/TextInput', + family: 'TextInput', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/TextInput', + }, + { + name: 'Theme', + importPath: '@astryxdesign/core/theme', + family: 'Utilities', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Theme', + }, + { + name: 'Thumbnail', + importPath: '@astryxdesign/core/Thumbnail', + family: 'Thumbnail', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Thumbnail', + }, + { + name: 'TimeInput', + importPath: '@astryxdesign/core/TimeInput', + family: 'TimeInput', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/TimeInput', + }, + { + name: 'Timer', + importPath: '@astryxdesign/core/Timer', + family: 'Timer', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Timer', + }, + { + name: 'Timestamp', + importPath: '@astryxdesign/core/Timestamp', + family: 'Timestamp', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Timestamp', + }, + { + name: 'Toast', + importPath: '@astryxdesign/core/Toast', + family: 'Toast', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/Toast', + }, + { + name: 'ToggleButton', + importPath: '@astryxdesign/core/ToggleButton', + family: 'Button', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/ToggleButton', + }, + { + name: 'ToggleButtonGroup', + importPath: '@astryxdesign/core/ToggleButton', + family: 'Button', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/ToggleButtonGroup', + }, + { + name: 'Token', + importPath: '@astryxdesign/core/Token', + family: 'Token', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Token', + }, + { + name: 'Tokenizer', + importPath: '@astryxdesign/core/Tokenizer', + family: 'Tokenizer', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/Tokenizer', + }, + { + name: 'Toolbar', + importPath: '@astryxdesign/core/Toolbar', + family: 'Toolbar', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/Toolbar', + }, + { + name: 'Tooltip', + importPath: '@astryxdesign/core/Tooltip', + family: 'Tooltip', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/Tooltip', + }, + { + name: 'TopNav', + importPath: '@astryxdesign/core/TopNav', + family: 'Navigation', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/TopNav', + }, + { + name: 'TopNavHeading', + importPath: '@astryxdesign/core/TopNav', + family: 'Navigation', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/TopNavHeading', + }, + { + name: 'TopNavItem', + importPath: '@astryxdesign/core/TopNav', + family: 'Navigation', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/TopNavItem', + }, + { + name: 'TopNavMegaMenu', + importPath: '@astryxdesign/core/TopNav', + family: 'Navigation', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/TopNavMegaMenu', + }, + { + name: 'TopNavMegaMenuFeaturedCard', + importPath: '@astryxdesign/core/TopNav', + family: 'Navigation', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/TopNavMegaMenuFeaturedCard', + }, + { + name: 'TopNavMegaMenuItem', + importPath: '@astryxdesign/core/TopNav', + family: 'Navigation', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/TopNavMegaMenuItem', + }, + { + name: 'TopNavMenu', + importPath: '@astryxdesign/core/TopNav', + family: 'Navigation', + group: 'overlay', + docsUrl: 'https://astryx.atmeta.com/components/TopNavMenu', + }, + { + name: 'TreeList', + importPath: '@astryxdesign/core/TreeList', + family: 'TreeList', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/TreeList', + }, + { + name: 'Typeahead', + importPath: '@astryxdesign/core/Typeahead', + family: 'Typeahead', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/Typeahead', + }, + { + name: 'TypeaheadItem', + importPath: '@astryxdesign/core/Typeahead', + family: 'Typeahead', + group: 'form', + docsUrl: 'https://astryx.atmeta.com/components/TypeaheadItem', + }, + { + name: 'VisuallyHidden', + importPath: '@astryxdesign/core/VisuallyHidden', + family: 'VisuallyHidden', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/VisuallyHidden', + }, + { + name: 'VStack', + importPath: '@astryxdesign/core/VStack', + family: 'Layout', + group: 'base', + docsUrl: 'https://astryx.atmeta.com/components/VStack', + }, +] diff --git a/src/demos/ActionsDemo.tsx b/src/demos/ActionsDemo.tsx new file mode 100644 index 0000000..1f5f1ad --- /dev/null +++ b/src/demos/ActionsDemo.tsx @@ -0,0 +1,83 @@ +import { useState } from 'react' +import { Button } from '@astryxdesign/core/Button' +import { HStack } from '@astryxdesign/core/HStack' +import { Icon } from '@astryxdesign/core/Icon' +import { IconButton } from '@astryxdesign/core/IconButton' +import { Kbd } from '@astryxdesign/core/Kbd' +import { Link } from '@astryxdesign/core/Link' +import { + SegmentedControl, + SegmentedControlItem, +} from '@astryxdesign/core/SegmentedControl' +import { Text } from '@astryxdesign/core/Text' +import { ToggleButton, ToggleButtonGroup } from '@astryxdesign/core/ToggleButton' +import { Toolbar } from '@astryxdesign/core/Toolbar' +import { VStack } from '@astryxdesign/core/VStack' +import { Heart, List, LayoutGrid } from 'lucide-react' + +export function ActionsDemo() { + const [layout, setLayout] = useState('网格') + const [view, setView] = useState('概览') + + return ( + + +