- Buttons
-
-
-
-
-
-
-
-
-
-
- {/* Card 2: Tags */}
-
- Tags
-
- Default
- #f50
- Success
- Warning
- Danger
- Info
-
+
-
@@ -379,25 +531,26 @@ const HomePage = (): React.ReactElement => {
+
+
{/* ─── CTA ─── */}
-
-
-
+
);
}
function MailPreview(): React.ReactElement {
return (
-
+
- Tiny UI for React
+ {s.home.badge}
@@ -330,6 +474,13 @@ const HomePage = (): React.ReactElement => {
onClick={() => navigate('/guide')}>
{s.home.getStarted}
+
))}
+
+
+
+
+ {s.home.preview.themeValue}
+ {s.home.preview.tokensValue}
+
+ {s.home.preview.themeHint}
+
+
+
- {/* Card 3: Toggle & Slider */}
-
+
+
+
+ Tiny UI
+ {s.home.preview.workspace}
+
+
+
+
+
+
+ {s.home.preview.activeTheme}
+
+
+
+
+
+
+
- Controls
-
-
-
);
};
+const ScenarioShowcase = ({ s }: { s: any }): React.ReactElement => (
+
+
- {/* Card 7: Tabs */}
-
+ }
+ className="home__product-search"
+ />
+
+
+ } />
+
+ DW
- setSliderVal(v as number)} />
-
-
-
- {/* Card 4: Avatars & Badge */}
-
- Avatars
-
-
- A
- B
- C
- D
- E
-
-
- U
-
-
-
-
- {/* Card 5: Input */}
-
- Input
- } />
-
-
- {/* Card 6: Progress & Rate */}
-
- Feedback
-
-
-
+
- Tabs
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- {/* Card 8: Checkbox & Radio */}
-
+ Stable
+ Typed
+
+
- Selection
-
- Remember me
-
- Option A
- Option B
-
-
-
+
+ {s.home.preview.live}}
+ variant="outlined">
+
+
+
+
+
+
+
+
+
+ {s.home.preview.form.updates}
+
+
+
+
+
- {/* Card 9: Keyboard & Tooltip */}
-
- Misc
-
- ⌘
- K
-
-
-
-
+ {s.home.preview.activityTag}}
+ variant="outlined">
+
+
+ {activityItems.map((item) => (
+
+
+ ))}
+
+
+
+ {item.title}
+ {item.desc}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+const CategoryCoverage = ({ s }: { s: any }): React.ReactElement => (
+
+ {s.home.scenarios.dashboard.kicker}
+ {s.home.scenarios.dashboard.title}
+ {s.home.scenarios.dashboard.desc}
+
+
+
+
+
+
+
+
+
+
+
+ {s.home.scenarios.forms.kicker}
+ {s.home.scenarios.forms.title}
+ {s.home.scenarios.forms.desc}
+
+
+
+ } />
+
+ Validated
+ Typed
+ Draft
+
+
+
+ {s.home.scenarios.content.kicker}
+ {s.home.scenarios.content.title}
+ {s.home.scenarios.content.desc}
+
+
+
+
+ A
+ B
+ C
+
+
+
+
+
+
+
+ {categoryGroups.map((group) => (
+
+
+ {group.title}
+ {group.items}
+
+
+ ))}
+
+);
+
// ─── Live Code Example Section ───
const INITIAL_CODE = `import { Button, Flex, Tag } from '@tiny-design/react';
@@ -315,11 +459,11 @@ const HomePage = (): React.ReactElement => {
+ {s.home.coverage.summary}
+
+
+ - Build beautiful interfaces - with less effort + {s.home.heroTitle} + {s.home.heroAccent}
{s.home.subtitle}
{s.home.showcase.title}
{s.home.showcase.subtitle}
{s.home.designPrinciple}
+{s.home.designPrincipleDesc}
+
+
+
+ {s.home.coverage.title}
+{s.home.coverage.subtitle}
+
-
-
-
+
+
-
-
-
@@ -301,7 +279,7 @@ function CardsPreview(): React.ReactElement {
-
I agree to the terms and conditions
Allow us to send you emails
-
-
+
+
+
+
-
+
$15,231.89
@@ -251,12 +229,12 @@ function CardsPreview(): React.ReactElement {
- +2,350
@@ -280,16 +258,16 @@ function CardsPreview(): React.ReactElement {
-
+
-
+
+
+
Total Revenue
+20.1% from last month
-
-
-
+
+
+
+
Subscriptions
+180.1% from last month
-
-
+
Upgrade your subscription
You are currently on the free plan. Upgrade to the pro plan to get access to all features.
-
+
+
-
+
@@ -318,26 +296,26 @@ function CardsPreview(): React.ReactElement {
+
-
+
+
Team Members
Invite your team members to collaborate.
-
-
+
+
{[
['Sofia Davis', 'm@example.com', 'Owner'],
['Jackson Lee', 'p@example.com', 'Developer'],
@@ -356,37 +334,37 @@ function CardsPreview(): React.ReactElement {
))}
-
- Cookie Settings
- Manage your cookie settings here.
-
-
-
+
-
-
+
+
+ Cookie Settings
+ Manage your cookie settings here.
+
+
+
Strictly Necessary
These cookies are essential in order to use the website and use its features.
-
+
-
+
-
+
+
+
Functional Cookies
These cookies allow the website to provide personalized functionality.
-
+
+
-
-
-
+
Move Goal
Set your daily activity goal.
-
-
+
+
-
-
+
+
350
CALORIES/DAY
-
+
+
-
OR CONTINUE WITH
+
+
);
}
@@ -533,13 +511,13 @@ function DashboardPreview(): React.ReactElement {
+
Create an account
Enter your email below to create your account
-
-
+
+
-
+
@@ -443,14 +421,14 @@ function CardsPreview(): React.ReactElement {
-
@@ -478,12 +456,12 @@ function CardsPreview(): React.ReactElement {
-
-
-
+
S
Sofia Davis
m@example.com
-
-
+
+
Hi, how can I help you today?
@@ -463,7 +441,7 @@ function CardsPreview(): React.ReactElement {
I can't log in.
-
+
+
Exercise Minutes
Your exercise minutes are ahead of where you normally are.
-
+
+
TD
Tiny Theme
Dashboard
-
+
Workspace
{['Overview', 'Themes', 'Revenue', 'Activity', 'Settings'].map((item, index) => (
-
@@ -620,10 +590,10 @@ function DashboardPreview(): React.ReactElement {
-
-
+
-
-
-
+
+
+
Dashboard
Revenue snapshot
-
-
+
Healthy
Synced
-
-
+
+
+
-
-
+
Accessibility
+
+
{[
['Direct', '42%', 'Stable'],
['Referral', '26%', '+4.2%'],
@@ -647,29 +617,29 @@ function DashboardPreview(): React.ReactElement {
{value}
))}
-
+
-
-
-
-
-
-
-
+
+
+
+
+
-
+
);
}
function PricingPreview(): React.ReactElement {
return (
-
-
+
-
+
+
Mailbox
Studio Mail
-
+
-
+
{[
['Inbox', '128'],
['Drafts', '9'],
@@ -686,32 +656,32 @@ function MailPreview(): React.ReactElement {
{count}
))}
-
+
-
+
Labels
Design
Work
Personal
-
+
+
-
-
+
+
All mail
Unread
Assigned
-
+
-
+
{[
['Sofia Davis', 'New message', 'Hi, how can I help you today?', '12m', true],
['Jackson Lee', 'Billing issue', 'I cannot update my card.', '1h', false],
@@ -732,27 +702,27 @@ function MailPreview(): React.ReactElement {
))}
-
+
-
+
+
-
+
+
S
Re: New message
support@tiny.design
-
-
+
+
Unread
-
-
+
Hi, how can I help you today?
@@ -765,36 +735,32 @@ function MailPreview(): React.ReactElement {
I can't log in after resetting my password.
-
+
-
-
-
-
-
-
{[
@@ -815,23 +781,23 @@ function PricingPreview(): React.ReactElement {
className={`theme-studio__pricing-card${plan.featured ? ' theme-studio__pricing-card_featured' : ''}`}
>
- {plan.description}
-
))}
@@ -840,34 +806,34 @@ function PricingPreview(): React.ReactElement {
-
-
-
+
);
}
@@ -885,9 +851,9 @@ export function renderPreview(
:
-
+
+
+
+
Pricing
Simple pricing for modern teams
Choose a plan that scales from solo work to multi-product organizations.
-
+
+
+
No setup fee
Cancel anytime
-
-
+
{plan.featured ? Popular : null}
{plan.name}
-
-
+
+
{plan.price}
Per workspace / month
-
+
+
{plan.features.map((feature) => (
{feature}
))}
-
-
+
+
-
+
-
+
+
+
+
Can I cancel anytime?
Yes. Plans can be changed or canceled without lock-in.
-
-
+
+
Do you offer team migration?
Pro and Scale include assisted import and onboarding.
-
-
-
+
+
+
+
Seats
-
+
+
Storage
-
+
{(template !== 'cards' && (section === 'colors' || section === 'typography' || section === 'other')) ?
+
);
}
diff --git a/apps/docs/src/containers/theme-studio/theme-studio.scss b/apps/docs/src/containers/theme-studio/theme-studio.scss
index 1ce00fa7e..ff9c824e4 100644
--- a/apps/docs/src/containers/theme-studio/theme-studio.scss
+++ b/apps/docs/src/containers/theme-studio/theme-studio.scss
@@ -123,7 +123,6 @@
.theme-studio__sidebar {
gap: 12px;
position: sticky;
- top: 88px;
}
.theme-studio__sidebar,
@@ -395,7 +394,6 @@
}
.theme-studio__response-panel {
- display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
padding: 7px;
@@ -464,7 +462,6 @@
}
.theme-studio__chart-strip {
- display: flex;
gap: 6px;
min-height: 34px;
align-items: center;
@@ -508,8 +505,6 @@
}
.theme-studio__type-inline {
- display: flex;
- flex-direction: column;
justify-content: center;
gap: 2px;
}
@@ -526,7 +521,6 @@
}
.theme-studio__surface-inline {
- display: flex;
gap: 8px;
}
@@ -590,23 +584,18 @@
}
.theme-studio__cards-scene {
- display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
gap: 14px;
align-items: start;
}
.theme-studio__cards-column {
- display: flex;
- flex-direction: column;
gap: 14px;
min-width: 0;
}
-.theme-studio__cards-top-grid,
.theme-studio__cards-top-pair,
.theme-studio__cards-bottom-pair {
- display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
align-items: stretch;
@@ -654,8 +643,6 @@
.theme-studio__cards-panel-head,
.theme-studio__cards-copy-block {
- display: flex;
- flex-direction: column;
gap: 4px;
}
@@ -693,10 +680,7 @@
}
.theme-studio__cards-actions-end,
-.theme-studio__cards-auth-actions,
-.theme-studio__cards-share-row,
-.theme-studio__cards-goal-actions {
- display: flex;
+.theme-studio__cards-auth-actions {
gap: 10px;
align-items: center;
}
@@ -727,37 +711,10 @@
border: 0;
}
-.theme-studio__preview-grid_cards > * {
- min-height: 188px;
-}
-
-.theme-studio__cards-waterfall {
- width: 100%;
- min-height: 1200px;
-}
-
-.theme-studio__cards-waterfall .ty-waterfall__item {
- min-width: 0;
-}
-
.theme-studio__preview-card {
overflow: hidden;
}
-.theme-studio__card-metric {
- min-height: 132px !important;
-}
-
-.theme-studio__card-tall {
- min-height: 332px !important;
-}
-
-.theme-studio__metric_preview {
- padding: 0;
- border: 0;
- background: transparent;
-}
-
.theme-studio__card-kicker-row {
display: flex;
align-items: center;
@@ -771,8 +728,6 @@
}
.theme-studio__goal-display {
- display: flex;
- flex-direction: column;
margin: 0;
align-items: center;
}
@@ -790,9 +745,6 @@
}
.theme-studio__cards-goal-header {
- display: grid;
- grid-template-columns: 28px minmax(0, 1fr) 28px;
- align-items: center;
gap: 8px;
}
@@ -808,69 +760,6 @@
justify-content: center;
}
-.theme-studio__goal-footer {
- margin-top: 10px;
-}
-
-.theme-studio__cards-table {
- display: flex;
- flex-direction: column;
-}
-
-.theme-studio__cards-table-head,
-.theme-studio__cards-table-row {
- display: grid;
- grid-template-columns: 18px 88px minmax(0, 1fr) auto;
- gap: 10px;
- align-items: center;
-}
-
-.theme-studio__cards-table-head {
- padding: 0 0 8px 0;
- font-size: 11px;
- color: var(--editor-muted-foreground);
-}
-
-.theme-studio__cards-table-row {
- padding: 9px 0;
- border-top: 1px solid var(--editor-border);
-}
-
-.theme-studio__cards-table-row .ty-checkbox {
- justify-self: start;
-}
-
-.theme-studio__cards-table-status,
-.theme-studio__cards-table-email {
- min-width: 0;
-}
-
-.theme-studio__cards-table-email {
- overflow: hidden;
- color: var(--editor-muted-foreground);
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.theme-studio__cards-people-list {
- display: flex;
- flex-direction: column;
-}
-
-.theme-studio__cards-people-list .theme-studio__member-row {
- padding-block: 10px;
- border-top: 1px solid var(--editor-border);
-}
-
-.theme-studio__cards-people-list .theme-studio__member-row:first-child {
- border-top: 0;
- padding-top: 0;
-}
-
-.theme-studio__cards-chat-head {
- margin-bottom: 2px;
-}
-
.theme-studio__member-row_compact {
padding: 0;
}
@@ -889,10 +778,7 @@
flex: 0 0 auto;
}
-.theme-studio__cards-member-select,
-.theme-studio__cards-inline-action,
-.theme-studio__cards-report-select,
-.theme-studio__cards-share-row .ty-btn {
+.theme-studio__cards-member-select {
width: auto !important;
flex: 0 0 auto;
}
@@ -901,15 +787,6 @@
min-width: 86px;
}
-.theme-studio__cards-report-select {
- flex: 1 1 0;
- min-width: 0;
-}
-
-.theme-studio__cards-inline-action.ty-btn {
- min-width: 78px;
-}
-
.theme-studio__cards-panel .ty-radio {
align-items: flex-start;
}
@@ -972,8 +849,7 @@
.theme-studio__dashboard-sidebar.ty-card,
.theme-studio__mail-sidebar.ty-card,
.theme-studio__mail-panel.ty-card,
-.theme-studio__mail-detail.ty-card,
-.theme-studio__mail-compose-card.ty-card {
+.theme-studio__mail-detail.ty-card {
border-radius: var(--theme-studio-panel-radius);
}
@@ -1039,18 +915,17 @@
}
.theme-studio__dashboard-main,
-.theme-studio__mail-list {
+.theme-studio__mail-panel,
+.theme-studio__mail-detail,
+.theme-studio__mail-sidebar {
min-width: 0;
}
.theme-studio__dashboard-main {
- display: flex;
- flex-direction: column;
gap: var(--theme-studio-block-gap);
}
.theme-studio__dashboard-top {
- display: flex;
justify-content: space-between;
gap: 14px;
align-items: center;
@@ -1064,8 +939,6 @@
.theme-studio__mail-folder-list,
.theme-studio__mail-thread-list,
.theme-studio__pricing-feature-list {
- display: flex;
- flex-direction: column;
gap: 10px;
}
@@ -1092,13 +965,6 @@
color: color-mix(in srgb, var(--editor-sidebar-foreground), transparent 28%);
}
-.theme-studio__mail-sidebar-head,
-.theme-studio__mail-panel,
-.theme-studio__mail-detail {
- display: flex;
- flex-direction: column;
-}
-
.theme-studio__mail-sidebar-head {
gap: 14px;
padding-bottom: 2px;
@@ -1148,8 +1014,6 @@
}
.theme-studio__mail-message-meta {
- display: flex;
- align-items: center;
gap: 12px;
min-width: 0;
}
@@ -1195,8 +1059,6 @@
}
.theme-studio__mail-labels {
- display: flex;
- flex-direction: column;
gap: 10px;
padding-top: 8px;
border-top: 1px solid color-mix(in srgb, var(--editor-sidebar-border), transparent 25%);
@@ -1247,7 +1109,6 @@
}
.theme-studio__mail-message-head {
- display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
@@ -1303,27 +1164,6 @@
color: var(--editor-primary-foreground);
}
-.theme-studio__mail-compose-card {
- margin-top: auto;
- padding-top: 18px;
- border-top: 1px solid var(--editor-border);
-}
-
-.theme-studio__mail-compose-card.ty-card {
- padding-top: 0;
- border-top: 0;
- background: color-mix(in srgb, var(--editor-card), var(--editor-base) 10%);
-}
-
-.theme-studio__mail-compose-card.ty-card > .ty-card__body {
- padding: 14px;
-}
-
-.theme-studio__mail-compose-card .ty-textarea,
-.theme-studio__mail-compose-card .ty-textarea__inner {
- margin-bottom: 12px;
-}
-
.theme-studio__pricing-grid,
.theme-studio__palette-grid,
.theme-studio__summary-grid {
@@ -1340,7 +1180,6 @@
}
.theme-studio__pricing-hero {
- display: flex;
justify-content: space-between;
gap: 18px;
align-items: flex-start;
@@ -1382,15 +1221,11 @@
}
.theme-studio__pricing-card-head {
- display: flex;
- align-items: center;
gap: 8px;
min-height: 24px;
}
.theme-studio__pricing-price {
- display: flex;
- flex-direction: column;
gap: 6px;
}
@@ -1399,8 +1234,6 @@
}
.theme-studio__pricing-feature-list {
- display: flex;
- flex-direction: column;
gap: 10px;
margin: 0;
}
@@ -1415,14 +1248,10 @@
}
.theme-studio__faq-list {
- display: flex;
- flex-direction: column;
gap: 14px;
}
.theme-studio__faq-item {
- display: flex;
- flex-direction: column;
gap: 6px;
padding-bottom: 14px;
border-bottom: 1px solid var(--editor-border);
@@ -1467,11 +1296,6 @@
justify-content: space-between;
}
-.theme-studio__chart-dot_large {
- width: 24px;
- height: 24px;
-}
-
.theme-studio__code-head {
justify-content: space-between;
align-items: center;
@@ -1538,7 +1362,8 @@
}
.theme-studio__cards-scene,
- .theme-studio__cards-top-grid {
+ .theme-studio__cards-top-pair,
+ .theme-studio__cards-bottom-pair {
grid-template-columns: 1fr;
}
}
@@ -1551,7 +1376,6 @@
.theme-studio__topbar-primary,
.theme-studio__topbar-actions {
align-items: flex-start;
- flex-direction: column;
}
.theme-studio__group-toolbar,
diff --git a/apps/docs/src/locale/en_US.ts b/apps/docs/src/locale/en_US.ts
index ac78208ab..b81cddc06 100644
--- a/apps/docs/src/locale/en_US.ts
+++ b/apps/docs/src/locale/en_US.ts
@@ -10,24 +10,29 @@ const en_US: SiteLocale = {
pro: 'Pro',
},
home: {
- subtitle: 'A Friendly UI Component Set for React',
+ badge: 'Tiny UI for React products',
+ heroTitle: 'Build polished React products',
+ heroAccent: 'not just component demos',
+ subtitle: 'A React design system for shipping polished products with flexible theming and reliable composability.',
getStarted: 'Get Started',
+ browseComponents: 'Browse Components',
github: 'GitHub',
- designPrinciple: 'Design Principle',
+ designPrinciple: 'Built for teams that ship',
+ designPrincipleDesc: 'Tiny UI is opinionated where consistency helps and flexible where product teams need room to move.',
componentCategories: 'Component Categories',
nComponents: (count) => `${count} components`,
features: {
- themeable: 'Themeable',
+ themeable: 'Ship faster',
themeableDesc:
- 'Quickly and easily reference values from your theme throughout your entire application with any components.',
- elegant: 'Elegant',
- elegantDesc: 'Thanks for React Hook, the source code is more light weight.',
- composable: 'Composable',
+ 'Consistent APIs across forms, navigation, data display, and feedback help teams move from first screen to shipped product with less friction.',
+ elegant: 'Theme visually',
+ elegantDesc: 'Preview presets instantly, adjust tokens in Theme Studio, and carry one visual system across the whole product surface.',
+ composable: 'Compose freely',
composableDesc:
- 'Completely customisable for all components. You can leverage any component to create new things.',
- accessible: 'Accessible',
+ 'Use components as reliable building blocks, then combine them into dashboards, admin flows, onboarding, and content-heavy screens.',
+ accessible: 'Accessible by default',
accessibleDesc:
- 'Strictly follows WAI-ARIA standards. All components come with proper attributes and keyboard interactions.',
+ 'Keyboard support, semantic structure, and sensible interaction defaults are built in so polish does not come at the cost of usability.',
},
stats: {
components: 'Components',
@@ -36,19 +41,79 @@ const en_US: SiteLocale = {
license: 'License',
},
themeShowcase: 'Make It Yours',
- themeShowcaseDesc: 'Choose a preset theme and watch the entire site transform instantly.',
+ themeShowcaseDesc: 'Choose a preset, preview the shift instantly, then fine-tune every token in Theme Studio.',
themeShowcaseCustomize: 'Customize in Theme Editor',
showcase: {
- title: 'Components in Action',
- subtitle: 'Real components, rendered live. What you see is what you ship.',
+ title: 'From primitives to product surfaces',
+ subtitle: 'Tiny UI is strongest when components work together inside real dashboards, forms, and operational screens.',
},
codeExample: {
- title: 'Delightful Developer Experience',
- subtitle: 'Clean APIs. Predictable patterns. Ship in minutes, not hours.',
+ title: 'A workflow that stays out of the way',
+ subtitle: 'Readable APIs, predictable patterns, and live feedback keep the path from install to shipped screen short.',
+ },
+ preview: {
+ workspace: 'Product workspace',
+ overview: 'Overview',
+ components: 'Components',
+ settings: 'Settings',
+ activeTheme: 'Active theme',
+ themeLabel: 'Preset',
+ themeValue: 'Studio Bloom',
+ tokensLabel: 'Tokens',
+ tokensValue: '148 synced',
+ themeHint: 'Switch presets quickly, then refine the details in Theme Studio.',
+ editTheme: 'Edit theme',
+ search: 'Search dashboards, forms, and docs',
+ metrics: {
+ velocity: 'Velocity',
+ velocitySuffix: 'releases',
+ adoption: 'Adoption',
+ satisfaction: 'Satisfaction',
+ },
+ pipeline: 'Release pipeline',
+ live: 'Live',
+ activity: 'Recent activity',
+ activityTag: 'Healthy',
+ analytics: 'Analytics',
+ checkout: 'Checkout flow',
+ table: {
+ project: 'Project',
+ owner: 'Owner',
+ status: 'Status',
+ },
+ form: {
+ name: 'Workspace name',
+ email: 'team@company.com',
+ updates: 'Email product updates',
+ submit: 'Launch workspace',
+ },
+ },
+ scenarios: {
+ dashboard: {
+ kicker: 'Dashboard',
+ title: 'Metrics that feel product-ready',
+ desc: 'Cards, charts, tables, tabs, and badges align into dashboards that look intentional from the first pass.',
+ },
+ forms: {
+ kicker: 'Forms',
+ title: 'Flows that stay consistent',
+ desc: 'Inputs, validation states, actions, and helper text follow the same logic across onboarding, settings, and checkout.',
+ },
+ content: {
+ kicker: 'Content',
+ title: 'Interfaces that still feel alive',
+ desc: 'Use overlays, keyboard patterns, progress, and avatar systems to add polish without sacrificing clarity.',
+ },
+ },
+ coverage: {
+ title: 'Coverage across the product surface',
+ subtitle: 'A broad component set matters most when the pieces share one visual and behavioral language.',
+ summary: 'More than a grab bag of isolated widgets. Tiny UI covers the common product surface area with one cohesive system.',
+ cta: 'Explore all components',
},
cta: {
- title: 'Start Building Today',
- subtitle: 'Install Tiny UI and have your first component on screen in under a minute.',
+ title: 'Start with the basics. Scale into a full design system.',
+ subtitle: 'Install Tiny UI, ship your first screen quickly, and keep growing without rebuilding your visual language.',
install: 'npm install @tiny-design/react',
copied: 'Copied!',
readDocs: 'Read the Docs',
diff --git a/apps/docs/src/locale/zh_CN.ts b/apps/docs/src/locale/zh_CN.ts
index 3b372edd5..45efb8b01 100644
--- a/apps/docs/src/locale/zh_CN.ts
+++ b/apps/docs/src/locale/zh_CN.ts
@@ -10,21 +10,26 @@ const zh_CN: SiteLocale = {
pro: 'Pro',
},
home: {
- subtitle: '一套友好的 React UI 组件库',
+ badge: '面向 React 产品界面的 Tiny UI',
+ heroTitle: '构建更完整的 React 产品界面',
+ heroAccent: '而不只是组件示例',
+ subtitle: '一套面向真实交付的 React 设计系统，兼顾主题定制、稳定组合能力与完成度。',
getStarted: '快速开始',
+ browseComponents: '浏览组件',
github: 'GitHub',
- designPrinciple: '设计理念',
+ designPrinciple: '为真正交付产品而设计',
+ designPrincipleDesc: '该统一的地方保持统一，该灵活的地方保留空间，让团队既能提速，也不会被框死。',
componentCategories: '组件分类',
nComponents: (count) => `${count} 个组件`,
features: {
- themeable: '可定制主题',
- themeableDesc: '轻松引用主题中的值，快速在整个应用中使用任何组件。',
- elegant: '优雅轻量',
- elegantDesc: '得益于 React Hook，源码更加轻量简洁。',
- composable: '灵活组合',
- composableDesc: '所有组件均可完全自定义，你可以利用任何组件创造新事物。',
- accessible: '无障碍',
- accessibleDesc: '严格遵循 WAI-ARIA 标准，所有组件都具备正确的属性和键盘交互。',
+ themeable: '更快交付',
+ themeableDesc: '表单、导航、数据展示与反馈组件拥有一致 API，让团队从首屏到上线都更顺滑。',
+ elegant: '可视化主题定制',
+ elegantDesc: '预设主题可即时预览，也能在 Theme Studio 里继续微调 token，把整套视觉语言统一起来。',
+ composable: '自由组合',
+ composableDesc: '组件不是孤立 demo，而是可以组合成仪表盘、后台流程、引导页和内容型界面的稳定积木。',
+ accessible: '默认无障碍',
+ accessibleDesc: '键盘交互、语义结构与合理的默认行为内建其中，让精致体验不以可用性为代价。',
},
stats: {
components: '组件',
@@ -33,19 +38,79 @@ const zh_CN: SiteLocale = {
license: '开源协议',
},
themeShowcase: '定制你的主题',
- themeShowcaseDesc: '选择一个预设主题，即刻改变整个网站的外观。',
+ themeShowcaseDesc: '选择一个预设主题立即预览变化，再进入 Theme Studio 微调每一个 token。',
themeShowcaseCustomize: '在主题编辑器中自定义',
showcase: {
- title: '组件实战',
- subtitle: '真实组件，实时渲染。所见即所得。',
+ title: '从基础组件到完整产品界面',
+ subtitle: 'Tiny UI 的价值不只在单个组件，而在于它们组合后能快速形成真实、统一的产品界面。',
},
codeExample: {
- title: '愉悦的开发体验',
- subtitle: '简洁的 API，可预测的模式。几分钟内即可交付。',
+ title: '不打断思路的开发体验',
+ subtitle: '清晰的 API、可预测的模式和即时反馈，让你从安装到交付保持顺手。',
+ },
+ preview: {
+ workspace: '产品工作区',
+ overview: '概览',
+ components: '组件',
+ settings: '设置',
+ activeTheme: '当前主题',
+ themeLabel: '预设',
+ themeValue: 'Studio Bloom',
+ tokensLabel: 'Tokens',
+ tokensValue: '148 项已同步',
+ themeHint: '先快速切换预设，再进入 Theme Studio 调整细节。',
+ editTheme: '编辑主题',
+ search: '搜索仪表盘、表单与文档',
+ metrics: {
+ velocity: '交付速度',
+ velocitySuffix: '次发布',
+ adoption: '采用率',
+ satisfaction: '满意度',
+ },
+ pipeline: '发布流程',
+ live: '实时',
+ activity: '最近动态',
+ activityTag: '稳定',
+ analytics: '分析',
+ checkout: '结算流程',
+ table: {
+ project: '项目',
+ owner: '负责人',
+ status: '状态',
+ },
+ form: {
+ name: '工作区名称',
+ email: 'team@company.com',
+ updates: '接收产品更新',
+ submit: '创建工作区',
+ },
+ },
+ scenarios: {
+ dashboard: {
+ kicker: '仪表盘',
+ title: '指标界面更像产品，不像 demo',
+ desc: '卡片、图表、表格、标签页与状态标签可以自然拼成有层次的后台界面。',
+ },
+ forms: {
+ kicker: '表单',
+ title: '流程前后一致',
+ desc: '输入框、校验状态、操作按钮与辅助信息遵循同一套逻辑，适合引导、设置与结算流程。',
+ },
+ content: {
+ kicker: '内容与交互',
+ title: '界面清楚，也足够生动',
+ desc: '覆盖浮层、快捷键、进度和头像等细节能力，在不牺牲清晰度的前提下提升完成度。',
+ },
+ },
+ coverage: {
+ title: '覆盖常见产品界面能力',
+ subtitle: '组件数量重要，但更重要的是它们共享同一套视觉与交互语言。',
+ summary: 'Tiny UI 不是一堆零散小部件，而是一套可以覆盖常见产品表面的统一系统。',
+ cta: '查看全部组件',
},
cta: {
- title: '立即开始构建',
- subtitle: '安装 Tiny UI，一分钟内即可在屏幕上看到你的第一个组件。',
+ title: '从基础开始，扩展成完整设计系统',
+ subtitle: '安装 Tiny UI，快速搭出第一屏，并在后续迭代中持续沿用同一套视觉语言。',
install: 'npm install @tiny-design/react',
copied: '已复制！',
readDocs: '阅读文档',
diff --git a/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-horizontal-popup-path-selected.png b/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-horizontal-popup-path-selected.png
new file mode 100644
index 000000000..9d31a898d
Binary files /dev/null and b/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-horizontal-popup-path-selected.png differ
diff --git a/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-inline-navigation.png b/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-inline-navigation.png
new file mode 100644
index 000000000..b707a5203
Binary files /dev/null and b/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-inline-navigation.png differ
diff --git a/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-local-contrast-theme.png b/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-local-contrast-theme.png
new file mode 100644
index 000000000..f78c43f77
Binary files /dev/null and b/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-local-contrast-theme.png differ
diff --git a/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-variants-default.png b/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-variants-default.png
new file mode 100644
index 000000000..2207d8614
Binary files /dev/null and b/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-variants-default.png differ
diff --git a/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-vertical-popup-selected.png b/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-vertical-popup-selected.png
new file mode 100644
index 000000000..5faa74c4f
Binary files /dev/null and b/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-vertical-popup-selected.png differ
diff --git a/apps/docs/tests/visual/menu.visual.spec.ts b/apps/docs/tests/visual/menu.visual.spec.ts
new file mode 100644
index 000000000..21b56eebd
--- /dev/null
+++ b/apps/docs/tests/visual/menu.visual.spec.ts
@@ -0,0 +1,59 @@
+import { expect, test } from '@playwright/test';
+import { gotoComponent, previewByTitle, scrollDemoIntoView } from './helpers';
+
+test.describe('menu visual states', () => {
+ test('inline navigation preserves leaf selection and parent path highlight', async ({ page }) => {
+ await gotoComponent(page, 'menu');
+ await scrollDemoIntoView(page, 'Inline Navigation');
+ await expect(previewByTitle(page, 'Inline Navigation')).toHaveScreenshot('menu-inline-navigation.png');
+ });
+
+ test('variants demo default state keeps path-selected in vertical mode', async ({ page }) => {
+ await gotoComponent(page, 'menu');
+ await scrollDemoIntoView(page, 'Variants And Selection Styles');
+ await expect(previewByTitle(page, 'Variants And Selection Styles')).toHaveScreenshot('menu-variants-default.png');
+ });
+
+ test('local contrast theme keeps selected contrast inside dark surface', async ({ page }) => {
+ await gotoComponent(page, 'menu');
+ await scrollDemoIntoView(page, 'Local Contrast Theme');
+ await expect(previewByTitle(page, 'Local Contrast Theme')).toHaveScreenshot('menu-local-contrast-theme.png');
+ });
+
+ test('horizontal popup keeps nested path and selected emphasis', async ({ page }) => {
+ await gotoComponent(page, 'menu');
+ const demo = await scrollDemoIntoView(page, 'Top Navigation');
+ const resources = demo.locator('.ty-menu-sub__title').filter({ hasText: 'Resources' });
+ const visiblePopup = () => page.locator('.ty-menu-sub__list_popup:visible');
+ const community = () =>
+ page.locator('.ty-menu-sub__list_popup:visible .ty-menu-sub__title').filter({ hasText: 'Community' }).last();
+ const showcase = () =>
+ page.locator('.ty-menu-sub__list_popup:visible .ty-menu-item').filter({ hasText: 'Showcase' }).last();
+
+ await resources.hover();
+ await expect(visiblePopup().first()).toBeVisible();
+ await community().hover();
+ await expect(showcase()).toBeVisible();
+ await showcase().click();
+
+ await page.mouse.move(8, 8);
+ await expect(visiblePopup()).toHaveCount(0);
+ await resources.hover();
+ await expect(visiblePopup().first()).toBeVisible();
+ await expect(community()).toBeVisible();
+ await community().hover();
+ await expect(showcase()).toBeVisible();
+ await expect(page).toHaveScreenshot('menu-horizontal-popup-path-selected.png');
+ });
+
+ test('vertical popup keeps reopened selected item highlight', async ({ page }) => {
+ await gotoComponent(page, 'menu');
+ const demo = await scrollDemoIntoView(page, 'Vertical Navigation');
+ await demo.locator('.ty-menu-sub__title').filter({ hasText: 'Customers' }).hover();
+ await page.waitForTimeout(200);
+ await page.locator('.ty-menu-sub__list_popup .ty-menu-item').filter({ hasText: 'Segments' }).click();
+ await demo.locator('.ty-menu-sub__title').filter({ hasText: 'Customers' }).hover();
+ await page.waitForTimeout(200);
+ await expect(page).toHaveScreenshot('menu-vertical-popup-selected.png');
+ });
+});
diff --git a/apps/pro/.next/trace b/apps/pro/.next/trace
new file mode 100644
index 000000000..03d64deda
--- /dev/null
+++ b/apps/pro/.next/trace
@@ -0,0 +1 @@
+[{"name":"next-dev","duration":3909621370,"timestamp":1210455661854,"id":1,"tags":{},"startTime":1775818145022,"traceId":"90f9ef1c40658dd9"}]
diff --git a/package.json b/package.json
index 0767032b2..fbe3fb3e4 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
"lint-staged": "^15.0.0",
"postcss": "^8.4.0",
"prettier": "^3.0.0",
+ "resolve": "^1.22.11",
"stylelint": "^16.0.0",
"stylelint-config-standard-scss": "^14.0.0",
"turbo": "^2.8.16",
diff --git a/packages/charts/src/__tests__/charts.test.tsx b/packages/charts/src/__tests__/charts.test.tsx
index 1df1ed99f..577925bed 100644
--- a/packages/charts/src/__tests__/charts.test.tsx
+++ b/packages/charts/src/__tests__/charts.test.tsx
@@ -79,7 +79,7 @@ describe('charts package', () => {
);
expect(warn).toHaveBeenCalledWith(
- 'ChartContainer already includes Recharts ResponsiveContainer. Pass the chart element directly instead of nesting another chart
+ chart
+ chart
+