mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
## What kind of change does this PR introduce? Feature / a11y polish ## What is the current behavior? Studio and Docs each had their own skip-to-content link (different styling and behaviour). www and design-system had none. ## What is the new behavior? Shared `SkipToContent` in `ui-patterns`, adopted by Studio, Docs, www, and design-system. Documented as a fragment with a short note under Accessibility → Jumping ahead. Tab once to reveal the button (top-left), Enter to jump to a content-only `<main>`. | After | | --- | | <img width="836" height="324" alt="CleanShot 2026-07-24 at 14 08 47@2x" src="https://github.com/user-attachments/assets/6df29452-e53a-4eca-8f64-946f2b9f605d" /> | ## To test Shared steps for every app: enable Tab key navigation if needed, load the preview, press **Tab** once — skip button should slide in top-left. Press **Enter** — focus jumps to main content (no blue ring on `<main>`). Press **Tab** again — first interactive control in the page body, not the sidebar/nav. Hover the skip button — solid fill, clear hover state, no chrome showing through. - **Studio** — [preview](https://studio-staging-git-dnywh-featskip-to-content-supabase.vercel.app) → sign in → any project page - **Docs** — [preview](https://docs-git-dnywh-featskip-to-content-supabase.vercel.app) → any docs page with sidebar - **www** — [preview](https://zone-www-dot-com-git-dnywh-featskip-to-content-supabase.vercel.app) → homepage or any marketing page with the default nav - **Design system** — [preview](https://design-system-git-dnywh-featskip-to-content-supabase.vercel.app) → any docs page (confirm Tab from content does **not** walk the sidebar), plus [Skip to Content fragment](https://design-system-git-dnywh-featskip-to-content-supabase.vercel.app/docs/fragments/skip-to-content) ## Additional context Follow-up to #47694 / #48303 (Studio) and #47515 (Docs). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added a reusable “Skip to content” accessibility link across key layouts and pages. - Updated main landmarks to support keyboard focus and skip-link navigation (`id="main"`). - **Accessibility** - Skip links now follow consistent landmark-target conventions and remain hidden until focused. - Improved documentation for skip links/jump shortcuts in persistent chrome layouts. - **Documentation** - Added a dedicated Skip to Content fragment, navigation entry, and expanded accessibility guidance. - Updated button description wording in component docs. - **Tests** - Added component tests for SkipToContent. - **Chores** - Exposed SkipToContent via additional public package entry points. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1864 lines
48 KiB
TypeScript
1864 lines
48 KiB
TypeScript
import { Registry } from './schema'
|
|
|
|
export const examples: Registry = [
|
|
{
|
|
name: 'accordion-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['accordion'],
|
|
files: ['example/accordion-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'admonition-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['admonition'],
|
|
files: ['example/admonition-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'admonition-responsive',
|
|
type: 'components:example',
|
|
registryDependencies: ['admonition'],
|
|
files: ['example/admonition-responsive.tsx'],
|
|
},
|
|
{
|
|
name: 'admonition-button',
|
|
type: 'components:example',
|
|
registryDependencies: ['admonition'],
|
|
files: ['example/admonition-button.tsx'],
|
|
},
|
|
{
|
|
name: 'admonition-button-split',
|
|
type: 'components:example',
|
|
registryDependencies: ['admonition', 'button', 'dropdown-menu'],
|
|
files: ['example/admonition-button-split.tsx'],
|
|
},
|
|
{
|
|
name: 'admonition-description-only',
|
|
type: 'components:example',
|
|
registryDependencies: ['admonition'],
|
|
files: ['example/admonition-description-only.tsx'],
|
|
},
|
|
{
|
|
name: 'admonition-warning',
|
|
type: 'components:example',
|
|
registryDependencies: ['admonition'],
|
|
files: ['example/admonition-warning.tsx'],
|
|
},
|
|
{
|
|
name: 'admonition-success',
|
|
type: 'components:example',
|
|
registryDependencies: ['admonition'],
|
|
files: ['example/admonition-success.tsx'],
|
|
},
|
|
{
|
|
name: 'admonition-destructive',
|
|
type: 'components:example',
|
|
registryDependencies: ['admonition'],
|
|
files: ['example/admonition-destructive.tsx'],
|
|
},
|
|
{
|
|
name: 'admonition-sandwiched',
|
|
type: 'components:example',
|
|
registryDependencies: ['admonition'],
|
|
files: ['example/admonition-sandwiched.tsx'],
|
|
},
|
|
{
|
|
name: 'alert-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['alert'],
|
|
files: ['example/alert-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'collapsible-alert-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['collapsible-alert'],
|
|
files: ['example/collapsible-alert-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'collapsible-card-section-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['collapsible-card-section'],
|
|
files: ['example/collapsible-card-section-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'alert-dialog-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['alert-dialog', 'button'],
|
|
files: ['example/alert-dialog-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'alert-dialog-close-only',
|
|
type: 'components:example',
|
|
registryDependencies: ['alert-dialog', 'button'],
|
|
files: ['example/alert-dialog-close-only.tsx'],
|
|
},
|
|
{
|
|
name: 'alert-dialog-async',
|
|
type: 'components:example',
|
|
registryDependencies: ['alert-dialog', 'button'],
|
|
files: ['example/alert-dialog-async.tsx'],
|
|
},
|
|
{
|
|
name: 'alert-dialog-async-error',
|
|
type: 'components:example',
|
|
registryDependencies: ['alert-dialog', 'button', 'admonition'],
|
|
files: ['example/alert-dialog-async-error.tsx'],
|
|
},
|
|
{
|
|
name: 'alert-dialog-destructive',
|
|
type: 'components:example',
|
|
registryDependencies: ['alert-dialog', 'button'],
|
|
files: ['example/alert-dialog-destructive.tsx'],
|
|
},
|
|
{
|
|
name: 'alert-dialog-warning',
|
|
type: 'components:example',
|
|
registryDependencies: ['alert-dialog', 'button'],
|
|
files: ['example/alert-dialog-warning.tsx'],
|
|
},
|
|
{
|
|
name: 'aspect-ratio-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['aspect-ratio'],
|
|
files: ['example/aspect-ratio-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'avatar-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['avatar'],
|
|
files: ['example/avatar-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'badge-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['badge'],
|
|
files: ['example/badge-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'badge-state',
|
|
type: 'components:example',
|
|
registryDependencies: ['badge'],
|
|
files: ['example/badge-state.tsx'],
|
|
},
|
|
{
|
|
name: 'badge-secondary',
|
|
type: 'components:example',
|
|
registryDependencies: ['badge'],
|
|
files: ['example/badge-secondary.tsx'],
|
|
},
|
|
{
|
|
name: 'breadcrumb-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['breadcrumb'],
|
|
files: ['example/breadcrumb-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'breadcrumb-separator',
|
|
type: 'components:example',
|
|
registryDependencies: ['breadcrumb'],
|
|
files: ['example/breadcrumb-separator.tsx'],
|
|
},
|
|
{
|
|
name: 'breadcrumb-dropdown',
|
|
type: 'components:example',
|
|
registryDependencies: ['breadcrumb', 'dropdown-menu'],
|
|
files: ['example/breadcrumb-dropdown.tsx'],
|
|
},
|
|
{
|
|
name: 'breadcrumb-ellipsis',
|
|
type: 'components:example',
|
|
registryDependencies: ['breadcrumb'],
|
|
files: ['example/breadcrumb-ellipsis.tsx'],
|
|
},
|
|
{
|
|
name: 'breadcrumb-link',
|
|
type: 'components:example',
|
|
registryDependencies: ['breadcrumb'],
|
|
files: ['example/breadcrumb-link.tsx'],
|
|
},
|
|
{
|
|
name: 'breadcrumb-responsive',
|
|
type: 'components:example',
|
|
registryDependencies: ['breadcrumb', 'button', 'drawer', 'dropdown-menu'],
|
|
files: ['example/breadcrumb-responsive.tsx'],
|
|
},
|
|
{
|
|
name: 'button-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['button'],
|
|
files: ['example/button-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'button-sizes',
|
|
type: 'components:example',
|
|
registryDependencies: ['button'],
|
|
files: ['example/button-sizes.tsx'],
|
|
},
|
|
{
|
|
name: 'button-default',
|
|
type: 'components:example',
|
|
registryDependencies: ['button'],
|
|
files: ['example/button-default.tsx'],
|
|
},
|
|
{
|
|
name: 'button-warning',
|
|
type: 'components:example',
|
|
registryDependencies: ['button'],
|
|
files: ['example/button-warning.tsx'],
|
|
},
|
|
{
|
|
name: 'button-secondary',
|
|
type: 'components:example',
|
|
registryDependencies: ['button'],
|
|
files: ['example/button-secondary.tsx'],
|
|
},
|
|
{
|
|
name: 'button-destructive',
|
|
type: 'components:example',
|
|
registryDependencies: ['button'],
|
|
files: ['example/button-destructive.tsx'],
|
|
},
|
|
{
|
|
name: 'button-outline',
|
|
type: 'components:example',
|
|
registryDependencies: ['button'],
|
|
files: ['example/button-outline.tsx'],
|
|
},
|
|
{
|
|
name: 'button-ghost',
|
|
type: 'components:example',
|
|
registryDependencies: ['button'],
|
|
files: ['example/button-ghost.tsx'],
|
|
},
|
|
{
|
|
name: 'button-link',
|
|
type: 'components:example',
|
|
registryDependencies: ['button'],
|
|
files: ['example/button-link.tsx'],
|
|
},
|
|
{
|
|
name: 'button-with-icon',
|
|
type: 'components:example',
|
|
registryDependencies: ['button'],
|
|
files: ['example/button-with-icon.tsx'],
|
|
},
|
|
{
|
|
name: 'button-loading',
|
|
type: 'components:example',
|
|
registryDependencies: ['button'],
|
|
files: ['example/button-loading.tsx'],
|
|
},
|
|
{
|
|
name: 'button-icon',
|
|
type: 'components:example',
|
|
registryDependencies: ['button'],
|
|
files: ['example/button-icon.tsx'],
|
|
},
|
|
{
|
|
name: 'button-as-child',
|
|
type: 'components:example',
|
|
registryDependencies: ['button'],
|
|
files: ['example/button-as-child.tsx'],
|
|
},
|
|
{
|
|
name: 'button-split-dropdown',
|
|
type: 'components:example',
|
|
registryDependencies: ['button', 'dropdown-menu'],
|
|
files: ['example/button-split-dropdown.tsx'],
|
|
},
|
|
{
|
|
name: 'calendar-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['calendar'],
|
|
files: ['example/calendar-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'calendar-form',
|
|
type: 'components:example',
|
|
registryDependencies: ['calendar', 'form', 'popover'],
|
|
files: ['example/calendar-form.tsx'],
|
|
},
|
|
{
|
|
name: 'calendar-disabled-days-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['calendar', 'form', 'popover'],
|
|
files: ['example/calendar-disabled-days-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'single-value-field-array-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['button', 'form', 'input'],
|
|
files: ['example/single-value-field-array-demo.tsx'],
|
|
},
|
|
// {
|
|
// name: 'card-demo',
|
|
// type: 'components:example',
|
|
// registryDependencies: ['card', 'button', 'switch'],
|
|
// files: ['example/card-demo.tsx'],
|
|
// },
|
|
// {
|
|
// name: 'card-with-form',
|
|
// type: 'components:example',
|
|
// registryDependencies: ['button', 'card', 'input', 'label', 'select'],
|
|
// files: ['example/card-with-form.tsx'],
|
|
// },
|
|
// {
|
|
// name: 'carousel-demo',
|
|
// type: 'components:example',
|
|
// registryDependencies: ['carousel'],
|
|
// files: ['example/carousel-demo.tsx'],
|
|
// },
|
|
// {
|
|
// name: 'carousel-size',
|
|
// type: 'components:example',
|
|
// registryDependencies: ['carousel'],
|
|
// files: ['example/carousel-size.tsx'],
|
|
// },
|
|
// {
|
|
// name: 'carousel-spacing',
|
|
// type: 'components:example',
|
|
// registryDependencies: ['carousel'],
|
|
// files: ['example/carousel-spacing.tsx'],
|
|
// },
|
|
// {
|
|
// name: 'carousel-orientation',
|
|
// type: 'components:example',
|
|
// registryDependencies: ['carousel'],
|
|
// files: ['example/carousel-orientation.tsx'],
|
|
// },
|
|
// {
|
|
// name: 'carousel-api',
|
|
// type: 'components:example',
|
|
// registryDependencies: ['carousel'],
|
|
// files: ['example/carousel-api.tsx'],
|
|
// },
|
|
// {
|
|
// name: 'carousel-plugin',
|
|
// type: 'components:example',
|
|
// registryDependencies: ['carousel'],
|
|
// files: ['example/carousel-plugin.tsx'],
|
|
// },
|
|
{
|
|
name: 'checkbox-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['checkbox'],
|
|
files: ['example/checkbox-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'checkbox-disabled',
|
|
type: 'components:example',
|
|
registryDependencies: ['checkbox'],
|
|
files: ['example/checkbox-disabled.tsx'],
|
|
},
|
|
{
|
|
name: 'checkbox-form-multiple',
|
|
type: 'components:example',
|
|
registryDependencies: ['checkbox', 'form'],
|
|
files: ['example/checkbox-form-multiple.tsx'],
|
|
},
|
|
{
|
|
name: 'checkbox-form-single',
|
|
type: 'components:example',
|
|
registryDependencies: ['checkbox', 'form'],
|
|
files: ['example/checkbox-form-single.tsx'],
|
|
},
|
|
{
|
|
name: 'checkbox-with-text',
|
|
type: 'components:example',
|
|
registryDependencies: ['checkbox'],
|
|
files: ['example/checkbox-with-text.tsx'],
|
|
},
|
|
{
|
|
name: 'collapsible-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['collapsible'],
|
|
files: ['example/collapsible-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'combobox-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['command'],
|
|
files: ['example/combobox-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'combobox-dropdown-menu',
|
|
type: 'components:example',
|
|
registryDependencies: ['command', 'dropdown-menu', 'button'],
|
|
files: ['example/combobox-dropdown-menu.tsx'],
|
|
},
|
|
{
|
|
name: 'combobox-form',
|
|
type: 'components:example',
|
|
registryDependencies: ['command', 'form'],
|
|
files: ['example/combobox-form.tsx'],
|
|
},
|
|
{
|
|
name: 'combobox-popover',
|
|
type: 'components:example',
|
|
registryDependencies: ['combobox', 'popover'],
|
|
files: ['example/combobox-popover.tsx'],
|
|
},
|
|
{
|
|
name: 'combobox-responsive',
|
|
type: 'components:example',
|
|
registryDependencies: ['combobox', 'popover', 'drawer'],
|
|
files: ['example/combobox-responsive.tsx'],
|
|
},
|
|
{
|
|
name: 'command-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['command'],
|
|
files: ['example/command-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'command-dialog',
|
|
type: 'components:example',
|
|
registryDependencies: ['command', 'dialog'],
|
|
files: ['example/command-dialog.tsx'],
|
|
},
|
|
{
|
|
name: 'commandmenu-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['commandmenu'],
|
|
files: ['example/commandmenu-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'commandmenu-badge',
|
|
type: 'components:example',
|
|
registryDependencies: ['commandmenu'],
|
|
files: ['example/commandmenu-badge.tsx'],
|
|
},
|
|
{
|
|
name: 'commandmenu-icon',
|
|
type: 'components:example',
|
|
registryDependencies: ['commandmenu'],
|
|
files: ['example/commandmenu-icon.tsx'],
|
|
},
|
|
{
|
|
name: 'commandmenu-hidden',
|
|
type: 'components:example',
|
|
registryDependencies: ['commandmenu'],
|
|
files: ['example/commandmenu-hidden.tsx'],
|
|
},
|
|
{
|
|
name: 'commandmenu-force',
|
|
type: 'components:example',
|
|
registryDependencies: ['commandmenu'],
|
|
files: ['example/commandmenu-force.tsx'],
|
|
},
|
|
{
|
|
name: 'commandmenu-conditional',
|
|
type: 'components:example',
|
|
registryDependencies: ['commandmenu'],
|
|
files: ['example/commandmenu-conditional.tsx'],
|
|
},
|
|
{
|
|
name: 'commandmenu-subpage',
|
|
type: 'components:example',
|
|
registryDependencies: ['commandmenu'],
|
|
files: ['example/commandmenu-subpage.tsx'],
|
|
},
|
|
{
|
|
name: 'commandmenu-subpage-custom',
|
|
type: 'components:example',
|
|
registryDependencies: ['commandmenu'],
|
|
files: ['example/commandmenu-subpage-custom.tsx'],
|
|
},
|
|
{
|
|
name: 'context-menu-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['context-menu'],
|
|
files: ['example/context-menu-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'data-input-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['data-input'],
|
|
files: ['example/data-input-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'data-input-with-copy',
|
|
type: 'components:example',
|
|
registryDependencies: ['data-input'],
|
|
files: ['example/data-input-with-copy.tsx'],
|
|
},
|
|
{
|
|
name: 'data-input-with-copy-secret',
|
|
type: 'components:example',
|
|
registryDependencies: ['data-input'],
|
|
files: ['example/data-input-with-copy-secret.tsx'],
|
|
},
|
|
{
|
|
name: 'data-input-with-reveal-copy',
|
|
type: 'components:example',
|
|
registryDependencies: ['data-input'],
|
|
files: ['example/data-input-with-reveal-copy.tsx'],
|
|
},
|
|
{
|
|
name: 'data-input-with-reveal-copy-editable',
|
|
type: 'components:example',
|
|
registryDependencies: ['data-input'],
|
|
files: ['example/data-input-with-reveal-copy-editable.tsx'],
|
|
},
|
|
{
|
|
name: 'data-input-with-reveal-copy-editable-empty',
|
|
type: 'components:example',
|
|
registryDependencies: ['data-input'],
|
|
files: ['example/data-input-with-reveal-copy-editable-empty.tsx'],
|
|
},
|
|
{
|
|
name: 'date-picker-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['button', 'calendar', 'popover'],
|
|
files: ['example/date-picker-demo.tsx'],
|
|
dependencies: ['date-fns'],
|
|
},
|
|
{
|
|
name: 'date-picker-form',
|
|
type: 'components:example',
|
|
registryDependencies: ['button', 'calendar', 'form', 'popover'],
|
|
files: ['example/date-picker-form.tsx'],
|
|
dependencies: ['date-fns'],
|
|
},
|
|
{
|
|
name: 'date-picker-with-presets',
|
|
type: 'components:example',
|
|
registryDependencies: ['button', 'calendar', 'popover', 'select'],
|
|
files: ['example/date-picker-with-presets.tsx'],
|
|
dependencies: ['date-fns'],
|
|
},
|
|
{
|
|
name: 'date-picker-with-range',
|
|
type: 'components:example',
|
|
registryDependencies: ['button', 'calendar', 'popover'],
|
|
files: ['example/date-picker-with-range.tsx'],
|
|
dependencies: ['date-fns'],
|
|
},
|
|
{
|
|
name: 'dialog-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['dialog'],
|
|
files: ['example/dialog-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'dialog-close-button',
|
|
type: 'components:example',
|
|
registryDependencies: ['dialog', 'button'],
|
|
files: ['example/dialog-close-button.tsx'],
|
|
},
|
|
{
|
|
name: 'dialog-centered-off',
|
|
type: 'components:example',
|
|
registryDependencies: ['dialog', 'button'],
|
|
files: ['example/dialog-centered-off.tsx'],
|
|
},
|
|
{
|
|
name: 'drawer-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['drawer'],
|
|
files: ['example/drawer-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'drawer-dialog',
|
|
type: 'components:example',
|
|
registryDependencies: ['drawer', 'dialog'],
|
|
files: ['example/drawer-dialog.tsx'],
|
|
},
|
|
{
|
|
name: 'dropdown-menu-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['dropdown-menu'],
|
|
files: ['example/dropdown-menu-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'dropdown-menu-checkboxes',
|
|
type: 'components:example',
|
|
registryDependencies: ['dropdown-menu', 'checkbox'],
|
|
files: ['example/dropdown-menu-checkboxes.tsx'],
|
|
},
|
|
{
|
|
name: 'dropdown-menu-radio-group',
|
|
type: 'components:example',
|
|
registryDependencies: ['dropdown-menu', 'radio-group'],
|
|
files: ['example/dropdown-menu-radio-group.tsx'],
|
|
},
|
|
{
|
|
name: 'filter-bar-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['filter-bar'],
|
|
files: ['example/filter-bar-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'hover-card-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['hover-card'],
|
|
files: ['example/hover-card-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'input-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['input'],
|
|
files: ['example/input-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'input-disabled',
|
|
type: 'components:example',
|
|
registryDependencies: ['input'],
|
|
files: ['example/input-disabled.tsx'],
|
|
},
|
|
{
|
|
name: 'input-file',
|
|
type: 'components:example',
|
|
registryDependencies: ['input'],
|
|
files: ['example/input-file.tsx'],
|
|
},
|
|
{
|
|
name: 'input-form',
|
|
type: 'components:example',
|
|
registryDependencies: ['input', 'button', 'form'],
|
|
files: ['example/input-form.tsx'],
|
|
},
|
|
{
|
|
name: 'input-with-button',
|
|
type: 'components:example',
|
|
registryDependencies: ['input', 'button'],
|
|
files: ['example/input-with-button.tsx'],
|
|
},
|
|
{
|
|
name: 'input-with-label',
|
|
type: 'components:example',
|
|
registryDependencies: ['input', 'button', 'label'],
|
|
files: ['example/input-with-label.tsx'],
|
|
},
|
|
{
|
|
name: 'input-with-text',
|
|
type: 'components:example',
|
|
registryDependencies: ['input', 'button', 'label'],
|
|
files: ['example/input-with-text.tsx'],
|
|
},
|
|
{
|
|
name: 'input-otp-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['input-otp'],
|
|
files: ['example/input-otp-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'input-otp-pattern',
|
|
type: 'components:example',
|
|
registryDependencies: ['input-otp'],
|
|
files: ['example/input-otp-pattern.tsx'],
|
|
},
|
|
{
|
|
name: 'input-otp-separator',
|
|
type: 'components:example',
|
|
registryDependencies: ['input-otp'],
|
|
files: ['example/input-otp-separator.tsx'],
|
|
},
|
|
{
|
|
name: 'input-otp-controlled',
|
|
type: 'components:example',
|
|
registryDependencies: ['input-otp'],
|
|
files: ['example/input-otp-controlled.tsx'],
|
|
},
|
|
{
|
|
name: 'input-otp-form',
|
|
type: 'components:example',
|
|
registryDependencies: ['input-otp', 'form'],
|
|
files: ['example/input-otp-form.tsx'],
|
|
},
|
|
{
|
|
name: 'keyboard-shortcut-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['button'],
|
|
files: ['example/keyboard-shortcut-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'keyboard-shortcut-pill',
|
|
type: 'components:example',
|
|
files: ['example/keyboard-shortcut-pill.tsx'],
|
|
},
|
|
{
|
|
name: 'keyboard-shortcut-inline',
|
|
type: 'components:example',
|
|
registryDependencies: ['button'],
|
|
files: ['example/keyboard-shortcut-inline.tsx'],
|
|
},
|
|
{
|
|
name: 'label-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['label'],
|
|
files: ['example/label-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'menubar-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['menubar'],
|
|
files: ['example/menubar-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'navigation-menu-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['navigation-menu'],
|
|
files: ['example/navigation-menu-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'navigation-menu-responsive',
|
|
type: 'components:example',
|
|
registryDependencies: ['navigation-menu'],
|
|
files: ['example/navigation-menu-responsive.tsx'],
|
|
},
|
|
{
|
|
name: 'nav-menu-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['nav-menu'],
|
|
files: ['example/nav-menu-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'nav-menu-badges',
|
|
type: 'components:example',
|
|
registryDependencies: ['nav-menu'],
|
|
files: ['example/nav-menu-badges.tsx'],
|
|
},
|
|
{
|
|
name: 'nav-menu-icons',
|
|
type: 'components:example',
|
|
registryDependencies: ['nav-menu'],
|
|
files: ['example/nav-menu-icons.tsx'],
|
|
},
|
|
// {
|
|
// name: 'pagination-demo',
|
|
// type: 'components:example',
|
|
// registryDependencies: ['pagination'],
|
|
// files: ['example/pagination-demo.tsx'],
|
|
// },
|
|
{
|
|
name: 'popover-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['popover'],
|
|
files: ['example/popover-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'progress-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['progress'],
|
|
files: ['example/progress-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'radio-group-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['radio-group'],
|
|
files: ['example/radio-group-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'radio-group-form',
|
|
type: 'components:example',
|
|
registryDependencies: ['radio-group', 'form'],
|
|
files: ['example/radio-group-form.tsx'],
|
|
},
|
|
{
|
|
name: 'radio-group-stacked-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['radio-group'],
|
|
files: ['example/radio-group-stacked-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'radio-group-stacked-form',
|
|
type: 'components:example',
|
|
registryDependencies: ['radio-group', 'form'],
|
|
files: ['example/radio-group-stacked-form.tsx'],
|
|
},
|
|
{
|
|
name: 'radio-group-card-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['radio-group'],
|
|
files: ['example/radio-group-card-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'radio-group-card-form',
|
|
type: 'components:example',
|
|
registryDependencies: ['radio-group', 'form'],
|
|
files: ['example/radio-group-card-form.tsx'],
|
|
},
|
|
{
|
|
name: 'radio-group-card-with-children',
|
|
type: 'components:example',
|
|
registryDependencies: ['radio-group', 'form'],
|
|
files: ['example/radio-group-card-with-children.tsx'],
|
|
},
|
|
{
|
|
name: 'resizable-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['resizable'],
|
|
files: ['example/resizable-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'resizable-demo-with-handle',
|
|
type: 'components:example',
|
|
registryDependencies: ['resizable'],
|
|
files: ['example/resizable-demo-with-handle.tsx'],
|
|
},
|
|
{
|
|
name: 'resizable-vertical',
|
|
type: 'components:example',
|
|
registryDependencies: ['resizable'],
|
|
files: ['example/resizable-vertical.tsx'],
|
|
},
|
|
{
|
|
name: 'resizable-handle',
|
|
type: 'components:example',
|
|
registryDependencies: ['resizable'],
|
|
files: ['example/resizable-handle.tsx'],
|
|
},
|
|
{
|
|
name: 'scroll-area-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['scroll-area'],
|
|
files: ['example/scroll-area-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'scroll-area-horizontal-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['scroll-area'],
|
|
files: ['example/scroll-area-horizontal-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'select-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['select'],
|
|
files: ['example/select-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'select-scrollable',
|
|
type: 'components:example',
|
|
registryDependencies: ['select'],
|
|
files: ['example/select-scrollable.tsx'],
|
|
},
|
|
{
|
|
name: 'select-form',
|
|
type: 'components:example',
|
|
registryDependencies: ['select'],
|
|
files: ['example/select-form.tsx'],
|
|
},
|
|
{
|
|
name: 'separator-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['separator'],
|
|
files: ['example/separator-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'sheet-confirm-on-close-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['alert-dialog', 'button', 'input', 'label', 'separator', 'sheet'],
|
|
files: ['example/sheet-confirm-on-close-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'sheet-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['sheet'],
|
|
files: ['example/sheet-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'sheet-nonmodal',
|
|
type: 'components:example',
|
|
registryDependencies: ['sheet'],
|
|
files: ['example/sheet-nonmodal.tsx'],
|
|
},
|
|
{
|
|
name: 'sheet-side',
|
|
type: 'components:example',
|
|
registryDependencies: ['sheet'],
|
|
files: ['example/sheet-side.tsx'],
|
|
},
|
|
{
|
|
name: 'skeleton-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['skeleton'],
|
|
files: ['example/skeleton-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'skeleton-card',
|
|
type: 'components:example',
|
|
registryDependencies: ['skeleton'],
|
|
files: ['example/skeleton-card.tsx'],
|
|
},
|
|
{
|
|
name: 'slider-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['slider'],
|
|
files: ['example/slider-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'slider-minMax-range',
|
|
type: 'components:example',
|
|
registryDependencies: ['slider'],
|
|
files: ['example/slider-minMax-range.tsx'],
|
|
},
|
|
{
|
|
name: 'sonner-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['sonner'],
|
|
files: ['example/sonner-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'sonner-types',
|
|
type: 'components:example',
|
|
registryDependencies: ['sonner'],
|
|
files: ['example/sonner-types.tsx'],
|
|
},
|
|
{
|
|
name: 'sonner-upload',
|
|
type: 'components:example',
|
|
registryDependencies: ['sonner'],
|
|
files: ['example/sonner-upload.tsx'],
|
|
},
|
|
{
|
|
name: 'success-check-demo',
|
|
type: 'components:example',
|
|
files: ['example/success-check-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'success-check-selected',
|
|
type: 'components:example',
|
|
files: ['example/success-check-selected.tsx'],
|
|
},
|
|
{
|
|
name: 'success-check-progress',
|
|
type: 'components:example',
|
|
files: ['example/success-check-progress.tsx'],
|
|
},
|
|
{
|
|
name: 'switch-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['switch'],
|
|
files: ['example/switch-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'switch-form',
|
|
type: 'components:example',
|
|
registryDependencies: ['switch', 'form'],
|
|
files: ['example/switch-form.tsx'],
|
|
},
|
|
{
|
|
name: 'table-cross-link',
|
|
type: 'components:example',
|
|
registryDependencies: ['table'],
|
|
files: ['example/table-cross-link.tsx'],
|
|
},
|
|
{
|
|
name: 'table-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['table'],
|
|
files: ['example/table-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'table-actions',
|
|
type: 'components:example',
|
|
registryDependencies: ['table'],
|
|
files: ['example/table-actions.tsx'],
|
|
},
|
|
{
|
|
name: 'table-icons',
|
|
type: 'components:example',
|
|
registryDependencies: ['table'],
|
|
files: ['example/table-icons.tsx'],
|
|
},
|
|
{
|
|
name: 'table-row-link',
|
|
type: 'components:example',
|
|
registryDependencies: ['table'],
|
|
files: ['example/table-row-link.tsx'],
|
|
},
|
|
{
|
|
name: 'table-row-link-actions',
|
|
type: 'components:example',
|
|
registryDependencies: ['table'],
|
|
files: ['example/table-row-link-actions.tsx'],
|
|
},
|
|
{
|
|
name: 'table-sort',
|
|
type: 'components:example',
|
|
registryDependencies: ['table'],
|
|
files: ['example/table-sort.tsx'],
|
|
},
|
|
{
|
|
name: 'tabs-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['tabs'],
|
|
files: ['example/tabs-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'textarea-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['textarea'],
|
|
files: ['example/textarea-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'textarea-disabled',
|
|
type: 'components:example',
|
|
registryDependencies: ['textarea'],
|
|
files: ['example/textarea-disabled.tsx'],
|
|
},
|
|
{
|
|
name: 'textarea-form',
|
|
type: 'components:example',
|
|
registryDependencies: ['textarea', 'form'],
|
|
files: ['example/textarea-form.tsx'],
|
|
},
|
|
{
|
|
name: 'textarea-with-button',
|
|
type: 'components:example',
|
|
registryDependencies: ['textarea', 'button'],
|
|
files: ['example/textarea-with-button.tsx'],
|
|
},
|
|
{
|
|
name: 'textarea-with-label',
|
|
type: 'components:example',
|
|
registryDependencies: ['textarea', 'label'],
|
|
files: ['example/textarea-with-label.tsx'],
|
|
},
|
|
{
|
|
name: 'textarea-with-text',
|
|
type: 'components:example',
|
|
registryDependencies: ['textarea', 'label'],
|
|
files: ['example/textarea-with-text.tsx'],
|
|
},
|
|
{
|
|
name: 'toggle-group-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['toggle-group'],
|
|
files: ['example/toggle-group-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'toggle-group-disabled',
|
|
type: 'components:example',
|
|
registryDependencies: ['toggle-group'],
|
|
files: ['example/toggle-group-disabled.tsx'],
|
|
},
|
|
{
|
|
name: 'toggle-group-lg',
|
|
type: 'components:example',
|
|
registryDependencies: ['toggle-group'],
|
|
files: ['example/toggle-group-lg.tsx'],
|
|
},
|
|
{
|
|
name: 'toggle-group-outline',
|
|
type: 'components:example',
|
|
registryDependencies: ['toggle-group'],
|
|
files: ['example/toggle-group-outline.tsx'],
|
|
},
|
|
{
|
|
name: 'toggle-group-sm',
|
|
type: 'components:example',
|
|
registryDependencies: ['toggle-group'],
|
|
files: ['example/toggle-group-sm.tsx'],
|
|
},
|
|
{
|
|
name: 'toggle-group-single',
|
|
type: 'components:example',
|
|
registryDependencies: ['toggle-group'],
|
|
files: ['example/toggle-group-single.tsx'],
|
|
},
|
|
{
|
|
name: 'toggle-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['toggle'],
|
|
files: ['example/toggle-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'toggle-disabled',
|
|
type: 'components:example',
|
|
registryDependencies: ['toggle'],
|
|
files: ['example/toggle-disabled.tsx'],
|
|
},
|
|
{
|
|
name: 'toggle-lg',
|
|
type: 'components:example',
|
|
registryDependencies: ['toggle'],
|
|
files: ['example/toggle-lg.tsx'],
|
|
},
|
|
{
|
|
name: 'toggle-outline',
|
|
type: 'components:example',
|
|
registryDependencies: ['toggle'],
|
|
files: ['example/toggle-outline.tsx'],
|
|
},
|
|
{
|
|
name: 'toggle-sm',
|
|
type: 'components:example',
|
|
registryDependencies: ['toggle'],
|
|
files: ['example/toggle-sm.tsx'],
|
|
},
|
|
{
|
|
name: 'toggle-with-text',
|
|
type: 'components:example',
|
|
registryDependencies: ['toggle'],
|
|
files: ['example/toggle-with-text.tsx'],
|
|
},
|
|
{
|
|
name: 'tooltip-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['tooltip'],
|
|
files: ['example/tooltip-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'typography-blockquote',
|
|
type: 'components:example',
|
|
files: ['example/typography-blockquote.tsx'],
|
|
},
|
|
{
|
|
name: 'typography-demo',
|
|
type: 'components:example',
|
|
files: ['example/typography-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'typography-h1',
|
|
type: 'components:example',
|
|
files: ['example/typography-h1.tsx'],
|
|
},
|
|
{
|
|
name: 'typography-h2',
|
|
type: 'components:example',
|
|
files: ['example/typography-h2.tsx'],
|
|
},
|
|
{
|
|
name: 'typography-h3',
|
|
type: 'components:example',
|
|
files: ['example/typography-h3.tsx'],
|
|
},
|
|
{
|
|
name: 'typography-h4',
|
|
type: 'components:example',
|
|
files: ['example/typography-h4.tsx'],
|
|
},
|
|
{
|
|
name: 'typography-inline-code',
|
|
type: 'components:example',
|
|
files: ['example/typography-inline-code.tsx'],
|
|
},
|
|
{
|
|
name: 'typography-large',
|
|
type: 'components:example',
|
|
files: ['example/typography-large.tsx'],
|
|
},
|
|
{
|
|
name: 'typography-lead',
|
|
type: 'components:example',
|
|
files: ['example/typography-lead.tsx'],
|
|
},
|
|
{
|
|
name: 'typography-list',
|
|
type: 'components:example',
|
|
files: ['example/typography-list.tsx'],
|
|
},
|
|
{
|
|
name: 'typography-muted',
|
|
type: 'components:example',
|
|
files: ['example/typography-muted.tsx'],
|
|
},
|
|
{
|
|
name: 'typography-p',
|
|
type: 'components:example',
|
|
files: ['example/typography-p.tsx'],
|
|
},
|
|
{
|
|
name: 'typography-small',
|
|
type: 'components:example',
|
|
files: ['example/typography-small.tsx'],
|
|
},
|
|
{
|
|
name: 'typography-table',
|
|
type: 'components:example',
|
|
files: ['example/typography-table.tsx'],
|
|
},
|
|
{
|
|
name: 'mode-toggle',
|
|
type: 'components:example',
|
|
files: ['example/mode-toggle.tsx'],
|
|
},
|
|
// {
|
|
// name: 'cards',
|
|
// type: 'components:example',
|
|
// files: ['example/cards/cards.tsx'],
|
|
// },
|
|
// fragments
|
|
{
|
|
name: 'text-confirm-dialog-demo',
|
|
type: 'components:example',
|
|
files: ['example/text-confirm-dialog-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'text-confirm-dialog-with-size',
|
|
type: 'components:example',
|
|
files: ['example/text-confirm-dialog-with-size.tsx'],
|
|
},
|
|
{
|
|
name: 'text-confirm-dialog-with-children',
|
|
type: 'components:example',
|
|
files: ['example/text-confirm-dialog-with-children.tsx'],
|
|
},
|
|
{
|
|
name: 'text-confirm-dialog-with-cancel-button',
|
|
type: 'components:example',
|
|
files: ['example/text-confirm-dialog-with-cancel-button.tsx'],
|
|
},
|
|
{
|
|
name: 'form-item-layout-demo',
|
|
type: 'components:example',
|
|
files: ['example/form-item-layout-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'key-value-field-array-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['button', 'form', 'input'],
|
|
files: ['example/key-value-field-array-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'field-choice-card',
|
|
type: 'components:example',
|
|
files: ['example/field-choice-card.tsx'],
|
|
},
|
|
{
|
|
name: 'field-checkbox',
|
|
type: 'components:example',
|
|
files: ['example/field-checkbox.tsx'],
|
|
},
|
|
{
|
|
name: 'field-demo',
|
|
type: 'components:example',
|
|
files: ['example/field-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'field-fieldset',
|
|
type: 'components:example',
|
|
files: ['example/field-fieldset.tsx'],
|
|
},
|
|
{
|
|
name: 'field-input',
|
|
type: 'components:example',
|
|
files: ['example/field-input.tsx'],
|
|
},
|
|
{
|
|
name: 'field-group',
|
|
type: 'components:example',
|
|
files: ['example/field-group.tsx'],
|
|
},
|
|
{
|
|
name: 'field-radio',
|
|
type: 'components:example',
|
|
files: ['example/field-radio.tsx'],
|
|
},
|
|
{
|
|
name: 'field-responsive',
|
|
type: 'components:example',
|
|
files: ['example/field-responsive.tsx'],
|
|
},
|
|
{
|
|
name: 'field-select',
|
|
type: 'components:example',
|
|
files: ['example/field-select.tsx'],
|
|
},
|
|
{
|
|
name: 'field-slider',
|
|
type: 'components:example',
|
|
files: ['example/field-slider.tsx'],
|
|
},
|
|
{
|
|
name: 'field-switch',
|
|
type: 'components:example',
|
|
files: ['example/field-switch.tsx'],
|
|
},
|
|
{
|
|
name: 'field-textarea',
|
|
type: 'components:example',
|
|
files: ['example/field-textarea.tsx'],
|
|
},
|
|
{
|
|
name: 'form-patterns-pagelayout',
|
|
type: 'components:example',
|
|
registryDependencies: [
|
|
'form',
|
|
'card',
|
|
'input',
|
|
'button',
|
|
'select',
|
|
'switch',
|
|
'checkbox',
|
|
'textarea',
|
|
'radio-group',
|
|
'calendar',
|
|
'popover',
|
|
'multi-select',
|
|
],
|
|
files: ['example/form-patterns-pagelayout.tsx'],
|
|
dependencies: ['date-fns'],
|
|
},
|
|
{
|
|
name: 'form-patterns-sidepanel',
|
|
type: 'components:example',
|
|
registryDependencies: [
|
|
'form',
|
|
'sheet',
|
|
'input',
|
|
'button',
|
|
'select',
|
|
'switch',
|
|
'checkbox',
|
|
'textarea',
|
|
'radio-group',
|
|
'calendar',
|
|
'popover',
|
|
'multi-select',
|
|
],
|
|
files: ['example/form-patterns-sidepanel.tsx'],
|
|
dependencies: ['date-fns'],
|
|
},
|
|
{
|
|
name: 'form-item-layout-with-select',
|
|
type: 'components:example',
|
|
files: ['example/form-item-layout-with-select.tsx'],
|
|
},
|
|
{
|
|
name: 'form-item-layout-with-horizontal',
|
|
type: 'components:example',
|
|
files: ['example/form-item-layout-with-horizontal.tsx'],
|
|
},
|
|
{
|
|
name: 'form-item-layout-with-switch',
|
|
type: 'components:example',
|
|
files: ['example/form-item-layout-with-switch.tsx'],
|
|
},
|
|
{
|
|
name: 'form-item-layout-with-checkbox',
|
|
type: 'components:example',
|
|
files: ['example/form-item-layout-with-switch.tsx'],
|
|
},
|
|
{
|
|
name: 'form-item-layout-with-checkbox-list',
|
|
type: 'components:example',
|
|
files: ['example/form-item-layout-with-switch.tsx'],
|
|
},
|
|
{
|
|
name: 'form-item-layout-before-label',
|
|
type: 'components:example',
|
|
files: ['example/form-item-layout-before-label.tsx'],
|
|
},
|
|
{
|
|
name: 'form-item-layout-after-label',
|
|
type: 'components:example',
|
|
files: ['example/form-item-layout-after-label.tsx'],
|
|
},
|
|
{
|
|
name: 'info-tooltip-demo',
|
|
type: 'components:example',
|
|
files: ['example/info-tooltip-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'skip-to-content-demo',
|
|
type: 'components:example',
|
|
files: ['example/skip-to-content-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'page-container-demo',
|
|
type: 'components:example',
|
|
files: ['example/page-container-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'page-breadcrumbs-demo',
|
|
type: 'components:example',
|
|
files: ['example/page-breadcrumbs-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'page-nav-demo',
|
|
type: 'components:example',
|
|
files: ['example/page-nav-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'page-layout-detail',
|
|
type: 'components:example',
|
|
files: ['example/page-layout-detail.tsx'],
|
|
},
|
|
{
|
|
name: 'page-layout-edge-function',
|
|
type: 'components:example',
|
|
registryDependencies: ['filter-bar'],
|
|
files: ['example/page-layout-edge-function.tsx', 'example/page-layout-logs-content.tsx'],
|
|
},
|
|
{
|
|
name: 'page-layout-full-width',
|
|
type: 'components:example',
|
|
registryDependencies: ['filter-bar'],
|
|
files: ['example/page-layout-full-width.tsx', 'example/page-layout-logs-content.tsx'],
|
|
},
|
|
{
|
|
name: 'page-layout-list',
|
|
type: 'components:example',
|
|
files: ['example/page-layout-list.tsx'],
|
|
},
|
|
{
|
|
name: 'page-layout-list-simple',
|
|
type: 'components:example',
|
|
files: ['example/page-layout-list-simple.tsx'],
|
|
},
|
|
{
|
|
name: 'page-layout-settings',
|
|
type: 'components:example',
|
|
files: ['example/page-layout-settings.tsx'],
|
|
},
|
|
{
|
|
name: 'connect-interstitial-demo',
|
|
type: 'components:example',
|
|
files: ['example/connect-interstitial-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'connect-interstitial-logo-pair',
|
|
type: 'components:example',
|
|
files: ['example/connect-interstitial-logo-pair.tsx'],
|
|
},
|
|
{
|
|
name: 'connect-interstitial-logo-single',
|
|
type: 'components:example',
|
|
files: ['example/connect-interstitial-logo-single.tsx'],
|
|
},
|
|
{
|
|
name: 'connect-interstitial-logo-unknown',
|
|
type: 'components:example',
|
|
files: ['example/connect-interstitial-logo-unknown.tsx'],
|
|
},
|
|
{
|
|
name: 'connect-interstitial-logo-uploaded',
|
|
type: 'components:example',
|
|
files: ['example/connect-interstitial-logo-uploaded.tsx'],
|
|
},
|
|
{
|
|
name: 'page-layout-auth-emails',
|
|
type: 'components:example',
|
|
files: ['example/page-layout-auth-emails.tsx'],
|
|
},
|
|
{
|
|
name: 'page-header-demo',
|
|
type: 'components:example',
|
|
files: ['example/page-header-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'page-section-demo',
|
|
type: 'components:example',
|
|
files: ['example/page-section-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'page-section-horizontal',
|
|
type: 'components:example',
|
|
files: ['example/page-section-horizontal.tsx'],
|
|
},
|
|
{
|
|
name: 'page-section-title-only',
|
|
type: 'components:example',
|
|
files: ['example/page-section-title-only.tsx'],
|
|
},
|
|
{
|
|
name: 'page-section-with-aside',
|
|
type: 'components:example',
|
|
files: ['example/page-section-with-aside.tsx'],
|
|
},
|
|
{
|
|
name: 'inner-side-menu-demo',
|
|
type: 'components:example',
|
|
files: ['example/inner-side-menu-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'inner-side-menu-static-titles',
|
|
type: 'components:example',
|
|
files: ['example/inner-side-menu-static-titles.tsx'],
|
|
},
|
|
{
|
|
name: 'inner-side-menu-loading',
|
|
type: 'components:example',
|
|
files: ['example/inner-side-menu-loading.tsx'],
|
|
},
|
|
{
|
|
name: 'inner-side-menu-multiple-sections',
|
|
type: 'components:example',
|
|
files: ['example/inner-side-menu-multiple-sections.tsx'],
|
|
},
|
|
{
|
|
name: 'inner-side-menu-empty',
|
|
type: 'components:example',
|
|
files: ['example/inner-side-menu-empty.tsx'],
|
|
},
|
|
{
|
|
name: 'inner-side-menu-with-search',
|
|
type: 'components:example',
|
|
files: ['example/inner-side-menu-with-search.tsx'],
|
|
},
|
|
{
|
|
name: 'toc-demo',
|
|
type: 'components:example',
|
|
files: ['example/toc-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'toc-single-demo',
|
|
type: 'components:example',
|
|
files: ['example/toc-single-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'multi-select-demo',
|
|
type: 'components:example',
|
|
files: ['example/multi-select-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'multi-select-disabled',
|
|
type: 'components:example',
|
|
files: ['example/multi-select-disabled.tsx'],
|
|
},
|
|
{
|
|
name: 'multi-select-badge-limit-wrap',
|
|
type: 'components:example',
|
|
files: ['example/multi-select-badge-limit-wrap.tsx'],
|
|
},
|
|
{
|
|
name: 'multi-select-badge-limit',
|
|
type: 'components:example',
|
|
files: ['example/multi-select-badge-limit.tsx'],
|
|
},
|
|
{
|
|
name: 'multi-select-combobox',
|
|
type: 'components:example',
|
|
files: ['example/multi-select-combobox.tsx'],
|
|
},
|
|
{
|
|
name: 'multi-select-combobox-creatable',
|
|
type: 'components:example',
|
|
files: ['example/multi-select-combobox-creatable.tsx'],
|
|
},
|
|
{
|
|
name: 'multi-select-deletable-badge',
|
|
type: 'components:example',
|
|
files: ['example/multi-select-deletable-badge.tsx'],
|
|
},
|
|
{
|
|
name: 'multi-select-inline-search-input',
|
|
type: 'components:example',
|
|
files: ['example/multi-select-inline-search-input.tsx'],
|
|
},
|
|
{
|
|
name: 'multi-select-in-dialog',
|
|
type: 'components:example',
|
|
files: ['example/multi-select-in-dialog.tsx'],
|
|
},
|
|
{
|
|
name: 'tree-view-demo',
|
|
type: 'components:example',
|
|
files: ['example/tree-view-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'tree-view-edit',
|
|
type: 'components:example',
|
|
files: ['example/tree-view-edit.tsx'],
|
|
},
|
|
{
|
|
name: 'tree-view-directories',
|
|
type: 'components:example',
|
|
files: ['example/tree-view-directories.tsx'],
|
|
},
|
|
{
|
|
name: 'tree-view-multi-select',
|
|
type: 'components:example',
|
|
files: ['example/tree-view-multi-select.tsx'],
|
|
},
|
|
{
|
|
name: 'confirmation-modal-demo',
|
|
type: 'components:example',
|
|
files: ['example/confirmation-modal-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'assistant-chat-demo',
|
|
type: 'components:example',
|
|
files: ['example/assistant-chat-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'assistant-chat-commands',
|
|
type: 'components:example',
|
|
files: ['example/assistant-chat-commands.tsx'],
|
|
},
|
|
{
|
|
name: 'color-usage-surface-www-and-docs',
|
|
type: 'docs:example',
|
|
files: ['example/color-usage-surface-www-and-docs.tsx'],
|
|
},
|
|
{
|
|
name: 'color-usage-surface-studio',
|
|
type: 'docs:example',
|
|
files: ['example/color-usage-surface-studio.tsx'],
|
|
},
|
|
{
|
|
name: 'color-usage-surface-studio-frame',
|
|
type: 'docs:example',
|
|
files: ['example/color-usage-surface-studio-frame.tsx'],
|
|
},
|
|
{
|
|
name: 'chart-bar-demo',
|
|
type: 'components:example',
|
|
files: ['example/chart-bar-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'chart-bar-demo-grid',
|
|
type: 'components:example',
|
|
files: ['example/chart-bar-demo-grid.tsx'],
|
|
},
|
|
{
|
|
name: 'chart-bar-demo-axis',
|
|
type: 'components:example',
|
|
files: ['example/chart-bar-demo-axis.tsx'],
|
|
},
|
|
{
|
|
name: 'chart-bar-demo-tooltip',
|
|
type: 'components:example',
|
|
files: ['example/chart-bar-demo-tooltip.tsx'],
|
|
},
|
|
{
|
|
name: 'chart-bar-demo-legend',
|
|
type: 'components:example',
|
|
files: ['example/chart-bar-demo-legend.tsx'],
|
|
},
|
|
{
|
|
name: 'chart-tooltip-demo',
|
|
type: 'components:example',
|
|
files: ['example/chart-tooltip-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'expanding-textarea-demo',
|
|
type: 'docs:example',
|
|
files: ['example/expanding-textarea-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'error-display-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['error-display'],
|
|
files: ['example/error-display-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'error-display-with-children',
|
|
type: 'components:example',
|
|
registryDependencies: ['error-display'],
|
|
files: ['example/error-display-with-children.tsx'],
|
|
},
|
|
{
|
|
name: 'logs-bar-chart',
|
|
type: 'components:example',
|
|
files: ['example/logs-bar-chart.tsx'],
|
|
},
|
|
{
|
|
name: 'empty-state-missing-route',
|
|
type: 'components:example',
|
|
files: ['example/empty-state-missing-route.tsx'],
|
|
},
|
|
{
|
|
name: 'empty-state-zero-items-table',
|
|
type: 'components:example',
|
|
files: ['example/empty-state-zero-items-table.tsx'],
|
|
},
|
|
{
|
|
name: 'empty-state-presentational-demo',
|
|
type: 'components:example',
|
|
files: ['example/empty-state-presentational-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'empty-state-presentational-buttons',
|
|
type: 'components:example',
|
|
files: ['example/empty-state-presentational-buttons.tsx'],
|
|
},
|
|
{
|
|
name: 'empty-state-presentational-icon',
|
|
type: 'components:example',
|
|
files: ['example/empty-state-presentational-icon.tsx'],
|
|
},
|
|
{
|
|
name: 'empty-state-initial-state-informational',
|
|
type: 'components:example',
|
|
files: ['example/empty-state-initial-state-informational.tsx'],
|
|
},
|
|
{
|
|
name: 'data-grid-demo',
|
|
type: 'components:example',
|
|
files: ['example/data-grid-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'data-grid-empty-state',
|
|
type: 'components:example',
|
|
files: ['example/data-grid-empty-state.tsx'],
|
|
},
|
|
{
|
|
name: 'data-table-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['table'],
|
|
files: ['example/data-table-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'metric-card',
|
|
type: 'components:example',
|
|
files: ['example/metric-card.tsx'],
|
|
},
|
|
{
|
|
name: 'metric-card-minimal',
|
|
type: 'components:example',
|
|
files: ['example/metric-card-minimal.tsx'],
|
|
},
|
|
{
|
|
name: 'metric-card-minimal-horizontal',
|
|
type: 'components:example',
|
|
files: ['example/metric-card-minimal-horizontal.tsx'],
|
|
},
|
|
{
|
|
name: 'metric-card-with-icon-link-tooltip',
|
|
type: 'components:example',
|
|
files: ['example/metric-card-with-icon-link-tooltip.tsx'],
|
|
},
|
|
{
|
|
name: 'mermaid-demo',
|
|
type: 'components:example',
|
|
registryDependencies: ['mermaid'],
|
|
files: ['example/mermaid-demo.tsx'],
|
|
},
|
|
{
|
|
name: 'mermaid-flowchart',
|
|
type: 'components:example',
|
|
registryDependencies: ['mermaid'],
|
|
files: ['example/mermaid-flowchart.tsx'],
|
|
},
|
|
{
|
|
name: 'mermaid-er-diagram',
|
|
type: 'components:example',
|
|
registryDependencies: ['mermaid'],
|
|
files: ['example/mermaid-er-diagram.tsx'],
|
|
},
|
|
{
|
|
name: 'mermaid-sequence-async',
|
|
type: 'components:example',
|
|
registryDependencies: ['mermaid'],
|
|
files: ['example/mermaid-sequence-async.tsx'],
|
|
},
|
|
{
|
|
name: 'mermaid-sequence-sync',
|
|
type: 'components:example',
|
|
registryDependencies: ['mermaid'],
|
|
files: ['example/mermaid-sequence-sync.tsx'],
|
|
},
|
|
{
|
|
name: 'mermaid-oauth-flow',
|
|
type: 'components:example',
|
|
registryDependencies: ['mermaid'],
|
|
files: ['example/mermaid-oauth-flow.tsx'],
|
|
},
|
|
{
|
|
name: 'mermaid-flowchart-subgraph',
|
|
type: 'components:example',
|
|
registryDependencies: ['mermaid'],
|
|
files: ['example/mermaid-flowchart-subgraph.tsx'],
|
|
},
|
|
{
|
|
name: 'mermaid-sequence-api',
|
|
type: 'components:example',
|
|
registryDependencies: ['mermaid'],
|
|
files: ['example/mermaid-sequence-api.tsx'],
|
|
},
|
|
{
|
|
name: 'mermaid-er-simple',
|
|
type: 'components:example',
|
|
registryDependencies: ['mermaid'],
|
|
files: ['example/mermaid-er-simple.tsx'],
|
|
},
|
|
{
|
|
name: 'mermaid-basic',
|
|
type: 'components:example',
|
|
registryDependencies: ['mermaid'],
|
|
files: ['example/mermaid-basic.tsx'],
|
|
},
|
|
{
|
|
name: 'markdown-full-example',
|
|
type: 'components:example',
|
|
registryDependencies: ['markdown'],
|
|
files: ['example/markdown-full-example.tsx'],
|
|
},
|
|
{
|
|
name: 'markdown-customization',
|
|
type: 'components:example',
|
|
registryDependencies: ['markdown'],
|
|
files: ['example/markdown-customization.tsx'],
|
|
},
|
|
{
|
|
name: 'markdown-headings',
|
|
type: 'components:example',
|
|
registryDependencies: ['markdown'],
|
|
files: ['example/markdown-headings.tsx'],
|
|
},
|
|
{
|
|
name: 'markdown-paragraphs',
|
|
type: 'components:example',
|
|
registryDependencies: ['markdown'],
|
|
files: ['example/markdown-paragraphs.tsx'],
|
|
},
|
|
{
|
|
name: 'markdown-lists',
|
|
type: 'components:example',
|
|
registryDependencies: ['markdown'],
|
|
files: ['example/markdown-lists.tsx'],
|
|
},
|
|
{
|
|
name: 'markdown-links',
|
|
type: 'components:example',
|
|
registryDependencies: ['markdown'],
|
|
files: ['example/markdown-links.tsx'],
|
|
},
|
|
{
|
|
name: 'markdown-inline-code',
|
|
type: 'components:example',
|
|
registryDependencies: ['markdown'],
|
|
files: ['example/markdown-inline-code.tsx'],
|
|
},
|
|
{
|
|
name: 'markdown-blockquotes',
|
|
type: 'components:example',
|
|
registryDependencies: ['markdown'],
|
|
files: ['example/markdown-blockquotes.tsx'],
|
|
},
|
|
{
|
|
name: 'markdown-code-blocks',
|
|
type: 'components:example',
|
|
registryDependencies: ['markdown'],
|
|
files: ['example/markdown-code-blocks.tsx'],
|
|
},
|
|
{
|
|
name: 'markdown-tables',
|
|
type: 'components:example',
|
|
registryDependencies: ['markdown'],
|
|
files: ['example/markdown-tables.tsx'],
|
|
},
|
|
{
|
|
name: 'markdown-images',
|
|
type: 'components:example',
|
|
registryDependencies: ['markdown'],
|
|
files: ['example/markdown-images.tsx'],
|
|
},
|
|
{
|
|
name: 'markdown-horizontal-rules',
|
|
type: 'components:example',
|
|
registryDependencies: ['markdown'],
|
|
files: ['example/markdown-horizontal-rules.tsx'],
|
|
},
|
|
{
|
|
name: 'markdown-quote-component',
|
|
type: 'components:example',
|
|
registryDependencies: ['markdown'],
|
|
files: ['example/markdown-quote-component.tsx'],
|
|
},
|
|
{
|
|
name: 'markdown-avatar-component',
|
|
type: 'components:example',
|
|
registryDependencies: ['markdown'],
|
|
files: ['example/markdown-avatar-component.tsx'],
|
|
},
|
|
{
|
|
name: 'status-code-demo',
|
|
type: 'components:example',
|
|
files: ['example/status-code-demo.tsx'],
|
|
},
|
|
]
|