storybook-addon-design-system-docs 1.0.0 → 1.0.2

package/README.md

@@ -64,35 +64,163 @@ export default config;
 
 ### Options
 
-| Option           | Type           | Required | Default            | Description                                |
-| ---------------- | -------------- | -------- | ------------------ | ------------------------------------------ |
-| `tailwindConfig` | `string`       | **Yes**  | -                  | Path to `tailwind.config.js`               |
-| `sidebarGroup`   | `string`       | No       | `'Design System/'` | Sidebar group name for generated docs      |
-| `assets`         | `AssetGroup[]` | No       | `[]`               | List of asset groups to generate           |
-| `showOnlyCustom` | `boolean`      | No       | `false`            | If true, only shows custom Tailwind values |
+| Option           | Type            | Required | Default            | Description                                      |
+| ---------------- | --------------- | -------- | ------------------ | ------------------------------------------------ |
+| `tailwindConfig` | `string`        | **Yes**  | -                  | Path to `tailwind.config.js`                     |
+| `sidebarGroup`   | `string`        | No       | `'Design System/'` | Global sidebar group prefix for all docs         |
+| `sections`       | `Section[]`     | No       | Default sections   | Customize which theme sections to display        |
+| `assets`         | `AssetGroup[]`  | No       | `[]`               | Asset groups to generate galleries for           |
+| `showOnlyCustom` | `boolean`       | No       | `false`            | If true, only shows custom Tailwind values       |
+| `templates`      | `TemplateConfig`| No       | Built-in templates | Override default MDX templates                   |
+
+### Sidebar Organization
+
+The addon provides flexible control over where documentation pages appear in Storybook's sidebar through the `sidebarGroup` option and individual `path` properties.
+
+#### Understanding `sidebarGroup` and `path`
+
+- **`sidebarGroup`**: A global prefix applied to all generated documentation (both sections and assets)
+- **`path`**: An optional per-section or per-asset path that controls placement relative to the `sidebarGroup`
+
+#### Path Resolution Rules
+
+The final sidebar location is determined by combining `sidebarGroup` and `path`:
+
+1. **Absolute path** (starts with `/`): Ignores `sidebarGroup` entirely
+   ```ts
+   sidebarGroup: 'Design System/'
+   sections: [{ name: 'Colors', path: '/' }]
+   // Result: "Colors" (at root level)
+   ```
+
+2. **Relative path**: Appends to `sidebarGroup`
+   ```ts
+   sidebarGroup: 'Design System/'
+   sections: [{ name: 'Colors', path: 'Theme/' }]
+   // Result: "Design System/Theme/Colors"
+   ```
+
+3. **No path specified**: Uses `sidebarGroup` directly
+   ```ts
+   sidebarGroup: 'Design System/'
+   sections: [{ name: 'Colors' }]
+   // Result: "Design System/Colors"
+   ```
+
+4. **Empty `sidebarGroup`**: Uses only the `path` (or just the name if no path)
+   ```ts
+   sidebarGroup: ''
+   sections: [{ name: 'Colors', path: 'Theme/' }]
+   // Result: "Theme/Colors"
+   ```
+
+#### Examples
+
+```ts
+{
+    name: 'storybook-addon-design-system-docs',
+    options: {
+        tailwindConfig: '../tailwind.config.js',
+        sidebarGroup: 'Design System/',
+
+        // Customize section placement
+        sections: [
+            { name: 'Colors', path: '/' },           // → "Colors" (root level)
+            { name: 'Typography', path: '/' },       // → "Typography" (root level)
+            { name: 'Spacing', path: 'Layout/' },    // → "Design System/Layout/Spacing"
+            { name: 'Shadows', path: 'Layout/' },    // → "Design System/Layout/Shadows"
+        ],
+
+        // Asset paths work the same way
+        assets: [
+            {
+                name: 'Icons',
+                source: './src/icons',
+                path: '/Resources/',  // → "Resources/Icons" (absolute path, ignores sidebarGroup)
+            },
+            {
+                name: 'Illustrations',
+                source: './src/illustrations',
+                path: 'Assets/',      // → "Design System/Assets/Illustrations" (relative to sidebarGroup)
+            },
+        ],
+    }
+}
+```
+
+### Section Configuration
+
+Customize which Tailwind theme sections to display and where they appear:
+
+```ts
+sections: [
+    'Colors',  // Simple string uses defaults
+    {
+        name: 'Typography',
+        path: 'Theme/',  // Custom sidebar location
+    },
+    {
+        name: 'Spacing',
+        path: '/',       // Place at root level
+    },
+]
+```
+
+Available sections: `Colors`, `Typography`, `Spacing`, `Shadows`, `BorderRadius` (or `Radius`)
 
 ### Asset Configuration
 
+Generate asset galleries from your file system:
+
 ```ts
 assets: [
     {
-        name: 'Icons', // Display name
-        source: './src/icons', // Source directory (relative to project root)
-        staticPath: '/icons', // URL path (must match where you serve static files or let addon handle it)
+        name: 'Icons',                    // Display name
+        source: './src/icons',            // Source directory (relative to project root)
+        path: 'Assets/',                  // Optional: sidebar location (relative to sidebarGroup)
+        staticPath: '/icons',             // Optional: URL path to serve assets from
         variants: {
-            // Optional variants
-            enabled: true,
-            suffixes: ['.light', '.dark'],
+            enabled: true,                // Enable variant detection
+            suffixes: ['.light', '.dark'], // Filename suffixes for variants
         },
         display: {
-            // Optional display settings
-            layout: 'grid',
-            showFilename: true,
+            layout: 'grid',               // 'grid' or 'list'
+            showFilename: true,           // Show filenames below assets
         },
     },
 ];
 ```
 
+**Asset Path Resolution**: Works exactly like section paths - supports both absolute (`/`) and relative paths, combined with `sidebarGroup`.
+
+### Template Customization
+
+Override the default MDX templates for any section:
+
+```ts
+{
+    templates: {
+        directory: './.storybook/design-system-docs',  // Custom template directory
+    }
+}
+```
+
+Place custom MDX files in the specified directory with names matching sections (e.g., `colors.mdx`, `typography.mdx`).
+
+## Tailwind v4 Support
+
+The addon automatically detects and supports both Tailwind CSS v3 (config file) and v4 (CSS `@theme` directive):
+
+**Tailwind v3:**
+```ts
+{ tailwindConfig: './tailwind.config.js' }
+```
+
+**Tailwind v4:**
+```ts
+{ tailwindConfig: './src/app.css' }  // CSS file with @theme directive
+```
+
 ## Contributing
 
 We welcome contributions! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for details.

package/dist/TypographySection-D8HHJr-s.d.ts

@@ -0,0 +1,258 @@
+import { J as JSX } from './jsx-runtime.d-kG9JzmQF.js';
+import { d as NormalizedSection, e as TemplateConfig } from './types-BVOYHsBN.js';
+import react__default, { ReactNode } from 'react';
+
+/**
+ * Normalized configuration for the Design System Addon.
+ * This is the internal representation of the options after validation and defaults.
+ */
+interface NormalizedAddonOptions {
+    /** The validated Tailwind config path */
+    tailwindConfig: string;
+    /** The base sidebar group name (e.g., "Design System/") */
+    sidebarGroup: string;
+    /** The list of enabled and normalized primitive sections */
+    sections: NormalizedSection[];
+    /** Optional configuration for forcing all primitives into a single document */
+    forceSingleDoc?: NormalizedSection;
+    /** Whether to hide default Tailwind values */
+    showOnlyCustom: boolean;
+    /** Typography configuration */
+    typography?: {
+        example?: string;
+    };
+    /** Template engine configuration */
+    templates?: TemplateConfig;
+}
+/**
+ * Represents a single color definition in the theme.
+ */
+interface ColorData {
+    /** The base name of the color (e.g., 'blue') */
+    baseName: string;
+    /** A record of shades where key is the shade level (e.g., '500') and value is the hex code */
+    shades: Record<string, string>;
+    /** A descriptive subtitle for the color group */
+    subtitle: string;
+    /** Whether this color is a custom definition (not in base Tailwind) */
+    isCustom: boolean;
+    /** Whether this color extends an existing Tailwind color */
+    isExtended: boolean;
+    /** Whether this is a default Tailwind color */
+    isDefault: boolean;
+}
+/**
+ * Context data for rendering the colors section.
+ */
+interface ColorsContext {
+    /** All color definitions */
+    colors: ColorData[];
+    /** Colors marked as custom/extended */
+    customColors: ColorData[];
+    /** Colors from Tailwind defaults */
+    builtInColors: ColorData[];
+    /** Whether there are any colors to display */
+    hasColors: boolean;
+}
+/**
+ * Context data for rendering the typography section.
+ */
+interface TypographyContext {
+    /** Font family definitions as pairs of [label, fontFamily] */
+    fontFamilies: [string, string][];
+    /** Custom font families defined in the theme */
+    customFamilies: [string, string][];
+    /** Standard Tailwind built-in font families (sans, serif, mono) */
+    builtInFamilies: [string, string][];
+    /** Font weight definitions as pairs of [label, value] */
+    fontWeights: [string, string][];
+    /** Font size definitions as pairs of [label, value] */
+    fontSizes: [string, string][];
+    /** Whether there are any font families to display */
+    hasFontFamily: boolean;
+    /** All weight keys available for filter state initialization */
+    allWeightKeys: string[];
+    /** All size keys available for filter state initialization */
+    allSizeKeys: string[];
+}
+/**
+ * Context data for rendering the spacing section.
+ */
+interface SpacingContext {
+    /** Spacing value entries as pairs of [label, value] */
+    entries: [string, string][];
+    /** Whether there are any spacing values to display */
+    hasSpacing: boolean;
+    /** The maximum numeric value in the entries, used for bar chart scaling */
+    maxValue: number;
+}
+/**
+ * Context data for rendering the shadows section.
+ */
+interface ShadowsContext {
+    /** Shadow value entries as pairs of [label, value] */
+    entries: [string, string][];
+    /** Whether there are any shadow values to display */
+    hasShadows: boolean;
+}
+/**
+ * Context data for rendering the border radius section.
+ */
+interface RadiusContext {
+    /** Border radius entries as pairs of [label, value] */
+    entries: [string, string][];
+    /** Whether there are any border radius values to display */
+    hasRadius: boolean;
+}
+/**
+ * Main context for theme template rendering, combining all section contexts and global settings.
+ */
+interface DesignSystemData {
+    /** List of section names that are currently enabled */
+    enabledSections: string[];
+    /** Whether to show only custom values, hiding default Tailwind tokens */
+    showOnlyCustom: boolean;
+    /** Default text to use for typography samples */
+    defaultSampleText: string;
+    /** Whether to use optimized React components for rendering */
+    useReactComponents: boolean;
+    /** Whether to force generation of a single documentation story instead of individual ones */
+    forceSingleDoc: boolean;
+    /** The sanitized export name when in single-story mode */
+    exportName?: string;
+    /** Context for the colors documentation section */
+    colors: ColorsContext;
+    /** Context for the typography documentation section */
+    typography: TypographyContext;
+    /** Optional context for the spacing documentation section */
+    spacing?: SpacingContext;
+    /** Optional context for the shadows documentation section */
+    shadows?: ShadowsContext;
+    /** Optional context for the border radius documentation section */
+    borderRadius?: RadiusContext;
+}
+
+interface ColorSectionProps {
+    /** Custom/extended colors from user's Tailwind config */
+    customColors: ColorData[];
+    /** Built-in Tailwind colors */
+    builtInColors: ColorData[];
+    /** Whether to show only custom colors */
+    showOnlyCustom: boolean;
+}
+/**
+ * Renders a color palette section with search filtering.
+ */
+declare function ColorSection({ customColors, builtInColors, showOnlyCustom, }: ColorSectionProps): JSX.Element;
+/**
+ * Full page wrapper for Colors story.
+ */
+interface ColorsPageProps extends ColorSectionProps {
+}
+declare function ColorsPage(props: ColorsPageProps): JSX.Element;
+
+/**
+ * RadiusSection - Renders border radius values with preview cards.
+ */
+interface RadiusSectionProps {
+    /** Border radius entries: [label, value][] */
+    entries: [string, string][];
+}
+/**
+ * Renders border radius values with visual preview cards.
+ */
+declare function RadiusSection({ entries }: RadiusSectionProps): JSX.Element;
+/**
+ * Full page wrapper for Border Radius story.
+ */
+interface RadiusPageProps extends RadiusSectionProps {
+}
+declare function RadiusPage(props: RadiusPageProps): JSX.Element;
+
+/**
+ * ShadowsSection - Renders shadow values with preview cards.
+ */
+interface ShadowsSectionProps {
+    /** Shadow value entries: [label, value][] */
+    entries: [string, string][];
+}
+/**
+ * Renders shadow values with visual preview cards.
+ */
+declare function ShadowsSection({ entries }: ShadowsSectionProps): JSX.Element;
+/**
+ * Full page wrapper for Shadows story.
+ */
+interface ShadowsPageProps extends ShadowsSectionProps {
+}
+declare function ShadowsPage(props: ShadowsPageProps): JSX.Element;
+
+/**
+ * SpacingSection - Renders spacing values with visual bars.
+ */
+interface SpacingSectionProps {
+    /** Spacing value entries: [label, value][] */
+    entries: [string, string][];
+    /** Maximum numeric value (for bar scaling) */
+    maxValue: number;
+}
+/**
+ * Renders spacing values with visual bars showing relative sizes.
+ */
+declare function SpacingSection({ entries }: SpacingSectionProps): JSX.Element;
+/**
+ * Full page wrapper for Spacing story.
+ */
+interface SpacingPageProps extends SpacingSectionProps {
+}
+declare function SpacingPage(props: SpacingPageProps): JSX.Element;
+
+interface ThemeLayoutProps {
+    /** Title for the page */
+    title: string;
+    /** Child components */
+    children: ReactNode;
+}
+/**
+ * Wrapper component that provides Storybook theming and common layout.
+ * Used as the decorator for theme stories.
+ */
+declare function ThemeLayout({ title, children }: ThemeLayoutProps): JSX.Element;
+/**
+ * Storybook decorator function that wraps stories with ThemeLayout.
+ */
+declare function themeDecorator(Story: react__default.ComponentType): JSX.Element;
+
+/**
+ * TypographySection - Renders typography preview with weight/size filters.
+ */
+interface TypographySectionProps {
+    /** Custom font families */
+    customFamilies: [string, string][];
+    /** Built-in font families (sans, serif, mono) */
+    builtInFamilies: [string, string][];
+    /** Font weight definitions: [label, value][] */
+    fontWeights: [string, string][];
+    /** Font size definitions: [label, value][] */
+    fontSizes: [string, string][];
+    /** All weight keys for initial filter state */
+    allWeightKeys: string[];
+    /** All size keys for initial filter state */
+    allSizeKeys: string[];
+    /** Default sample text for typography preview */
+    defaultSampleText: string;
+    /** Whether to show only custom fonts */
+    showOnlyCustom: boolean;
+}
+/**
+ * Renders typography section with weight/size filter controls.
+ */
+declare function TypographySection({ customFamilies, builtInFamilies, fontWeights, fontSizes, allWeightKeys, allSizeKeys, defaultSampleText, showOnlyCustom, }: TypographySectionProps): JSX.Element;
+/**
+ * Full page wrapper for Typography story.
+ */
+interface TypographyPageProps extends TypographySectionProps {
+}
+declare function TypographyPage(props: TypographyPageProps): JSX.Element;
+
+export { ColorSection as C, type DesignSystemData as D, type NormalizedAddonOptions as N, RadiusPage as R, ShadowsPage as S, ThemeLayout as T, ColorsPage as a, RadiusSection as b, ShadowsSection as c, SpacingPage as d, SpacingSection as e, TypographyPage as f, TypographySection as g, type ColorData as h, type ColorsContext as i, type TypographyContext as j, type SpacingContext as k, type ShadowsContext as l, type RadiusContext as m, type ColorSectionProps as n, type ColorsPageProps as o, type RadiusPageProps as p, type RadiusSectionProps as q, type ShadowsPageProps as r, type ShadowsSectionProps as s, themeDecorator as t, type SpacingPageProps as u, type SpacingSectionProps as v, type ThemeLayoutProps as w, type TypographyPageProps as x, type TypographySectionProps as y };

package/dist/TypographySection-DsqZs5oA.d.cts

@@ -0,0 +1,258 @@
+import { J as JSX } from './jsx-runtime.d-kG9JzmQF.cjs';
+import { d as NormalizedSection, e as TemplateConfig } from './types-BVOYHsBN.cjs';
+import react__default, { ReactNode } from 'react';
+
+/**
+ * Normalized configuration for the Design System Addon.
+ * This is the internal representation of the options after validation and defaults.
+ */
+interface NormalizedAddonOptions {
+    /** The validated Tailwind config path */
+    tailwindConfig: string;
+    /** The base sidebar group name (e.g., "Design System/") */
+    sidebarGroup: string;
+    /** The list of enabled and normalized primitive sections */
+    sections: NormalizedSection[];
+    /** Optional configuration for forcing all primitives into a single document */
+    forceSingleDoc?: NormalizedSection;
+    /** Whether to hide default Tailwind values */
+    showOnlyCustom: boolean;
+    /** Typography configuration */
+    typography?: {
+        example?: string;
+    };
+    /** Template engine configuration */
+    templates?: TemplateConfig;
+}
+/**
+ * Represents a single color definition in the theme.
+ */
+interface ColorData {
+    /** The base name of the color (e.g., 'blue') */
+    baseName: string;
+    /** A record of shades where key is the shade level (e.g., '500') and value is the hex code */
+    shades: Record<string, string>;
+    /** A descriptive subtitle for the color group */
+    subtitle: string;
+    /** Whether this color is a custom definition (not in base Tailwind) */
+    isCustom: boolean;
+    /** Whether this color extends an existing Tailwind color */
+    isExtended: boolean;
+    /** Whether this is a default Tailwind color */
+    isDefault: boolean;
+}
+/**
+ * Context data for rendering the colors section.
+ */
+interface ColorsContext {
+    /** All color definitions */
+    colors: ColorData[];
+    /** Colors marked as custom/extended */
+    customColors: ColorData[];
+    /** Colors from Tailwind defaults */
+    builtInColors: ColorData[];
+    /** Whether there are any colors to display */
+    hasColors: boolean;
+}
+/**
+ * Context data for rendering the typography section.
+ */
+interface TypographyContext {
+    /** Font family definitions as pairs of [label, fontFamily] */
+    fontFamilies: [string, string][];
+    /** Custom font families defined in the theme */
+    customFamilies: [string, string][];
+    /** Standard Tailwind built-in font families (sans, serif, mono) */
+    builtInFamilies: [string, string][];
+    /** Font weight definitions as pairs of [label, value] */
+    fontWeights: [string, string][];
+    /** Font size definitions as pairs of [label, value] */
+    fontSizes: [string, string][];
+    /** Whether there are any font families to display */
+    hasFontFamily: boolean;
+    /** All weight keys available for filter state initialization */
+    allWeightKeys: string[];
+    /** All size keys available for filter state initialization */
+    allSizeKeys: string[];
+}
+/**
+ * Context data for rendering the spacing section.
+ */
+interface SpacingContext {
+    /** Spacing value entries as pairs of [label, value] */
+    entries: [string, string][];
+    /** Whether there are any spacing values to display */
+    hasSpacing: boolean;
+    /** The maximum numeric value in the entries, used for bar chart scaling */
+    maxValue: number;
+}
+/**
+ * Context data for rendering the shadows section.
+ */
+interface ShadowsContext {
+    /** Shadow value entries as pairs of [label, value] */
+    entries: [string, string][];
+    /** Whether there are any shadow values to display */
+    hasShadows: boolean;
+}
+/**
+ * Context data for rendering the border radius section.
+ */
+interface RadiusContext {
+    /** Border radius entries as pairs of [label, value] */
+    entries: [string, string][];
+    /** Whether there are any border radius values to display */
+    hasRadius: boolean;
+}
+/**
+ * Main context for theme template rendering, combining all section contexts and global settings.
+ */
+interface DesignSystemData {
+    /** List of section names that are currently enabled */
+    enabledSections: string[];
+    /** Whether to show only custom values, hiding default Tailwind tokens */
+    showOnlyCustom: boolean;
+    /** Default text to use for typography samples */
+    defaultSampleText: string;
+    /** Whether to use optimized React components for rendering */
+    useReactComponents: boolean;
+    /** Whether to force generation of a single documentation story instead of individual ones */
+    forceSingleDoc: boolean;
+    /** The sanitized export name when in single-story mode */
+    exportName?: string;
+    /** Context for the colors documentation section */
+    colors: ColorsContext;
+    /** Context for the typography documentation section */
+    typography: TypographyContext;
+    /** Optional context for the spacing documentation section */
+    spacing?: SpacingContext;
+    /** Optional context for the shadows documentation section */
+    shadows?: ShadowsContext;
+    /** Optional context for the border radius documentation section */
+    borderRadius?: RadiusContext;
+}
+
+interface ColorSectionProps {
+    /** Custom/extended colors from user's Tailwind config */
+    customColors: ColorData[];
+    /** Built-in Tailwind colors */
+    builtInColors: ColorData[];
+    /** Whether to show only custom colors */
+    showOnlyCustom: boolean;
+}
+/**
+ * Renders a color palette section with search filtering.
+ */
+declare function ColorSection({ customColors, builtInColors, showOnlyCustom, }: ColorSectionProps): JSX.Element;
+/**
+ * Full page wrapper for Colors story.
+ */
+interface ColorsPageProps extends ColorSectionProps {
+}
+declare function ColorsPage(props: ColorsPageProps): JSX.Element;
+
+/**
+ * RadiusSection - Renders border radius values with preview cards.
+ */
+interface RadiusSectionProps {
+    /** Border radius entries: [label, value][] */
+    entries: [string, string][];
+}
+/**
+ * Renders border radius values with visual preview cards.
+ */
+declare function RadiusSection({ entries }: RadiusSectionProps): JSX.Element;
+/**
+ * Full page wrapper for Border Radius story.
+ */
+interface RadiusPageProps extends RadiusSectionProps {
+}
+declare function RadiusPage(props: RadiusPageProps): JSX.Element;
+
+/**
+ * ShadowsSection - Renders shadow values with preview cards.
+ */
+interface ShadowsSectionProps {
+    /** Shadow value entries: [label, value][] */
+    entries: [string, string][];
+}
+/**
+ * Renders shadow values with visual preview cards.
+ */
+declare function ShadowsSection({ entries }: ShadowsSectionProps): JSX.Element;
+/**
+ * Full page wrapper for Shadows story.
+ */
+interface ShadowsPageProps extends ShadowsSectionProps {
+}
+declare function ShadowsPage(props: ShadowsPageProps): JSX.Element;
+
+/**
+ * SpacingSection - Renders spacing values with visual bars.
+ */
+interface SpacingSectionProps {
+    /** Spacing value entries: [label, value][] */
+    entries: [string, string][];
+    /** Maximum numeric value (for bar scaling) */
+    maxValue: number;
+}
+/**
+ * Renders spacing values with visual bars showing relative sizes.
+ */
+declare function SpacingSection({ entries }: SpacingSectionProps): JSX.Element;
+/**
+ * Full page wrapper for Spacing story.
+ */
+interface SpacingPageProps extends SpacingSectionProps {
+}
+declare function SpacingPage(props: SpacingPageProps): JSX.Element;
+
+interface ThemeLayoutProps {
+    /** Title for the page */
+    title: string;
+    /** Child components */
+    children: ReactNode;
+}
+/**
+ * Wrapper component that provides Storybook theming and common layout.
+ * Used as the decorator for theme stories.
+ */
+declare function ThemeLayout({ title, children }: ThemeLayoutProps): JSX.Element;
+/**
+ * Storybook decorator function that wraps stories with ThemeLayout.
+ */
+declare function themeDecorator(Story: react__default.ComponentType): JSX.Element;
+
+/**
+ * TypographySection - Renders typography preview with weight/size filters.
+ */
+interface TypographySectionProps {
+    /** Custom font families */
+    customFamilies: [string, string][];
+    /** Built-in font families (sans, serif, mono) */
+    builtInFamilies: [string, string][];
+    /** Font weight definitions: [label, value][] */
+    fontWeights: [string, string][];
+    /** Font size definitions: [label, value][] */
+    fontSizes: [string, string][];
+    /** All weight keys for initial filter state */
+    allWeightKeys: string[];
+    /** All size keys for initial filter state */
+    allSizeKeys: string[];
+    /** Default sample text for typography preview */
+    defaultSampleText: string;
+    /** Whether to show only custom fonts */
+    showOnlyCustom: boolean;
+}
+/**
+ * Renders typography section with weight/size filter controls.
+ */
+declare function TypographySection({ customFamilies, builtInFamilies, fontWeights, fontSizes, allWeightKeys, allSizeKeys, defaultSampleText, showOnlyCustom, }: TypographySectionProps): JSX.Element;
+/**
+ * Full page wrapper for Typography story.
+ */
+interface TypographyPageProps extends TypographySectionProps {
+}
+declare function TypographyPage(props: TypographyPageProps): JSX.Element;
+
+export { ColorSection as C, type DesignSystemData as D, type NormalizedAddonOptions as N, RadiusPage as R, ShadowsPage as S, ThemeLayout as T, ColorsPage as a, RadiusSection as b, ShadowsSection as c, SpacingPage as d, SpacingSection as e, TypographyPage as f, TypographySection as g, type ColorData as h, type ColorsContext as i, type TypographyContext as j, type SpacingContext as k, type ShadowsContext as l, type RadiusContext as m, type ColorSectionProps as n, type ColorsPageProps as o, type RadiusPageProps as p, type RadiusSectionProps as q, type ShadowsPageProps as r, type ShadowsSectionProps as s, themeDecorator as t, type SpacingPageProps as u, type SpacingSectionProps as v, type ThemeLayoutProps as w, type TypographyPageProps as x, type TypographySectionProps as y };