diff --git a/canon-docs/package.json b/canon-docs/package.json
index 5a4affc45b..05d46df217 100644
--- a/canon-docs/package.json
+++ b/canon-docs/package.json
@@ -8,19 +8,25 @@
"lint": "next lint",
"start": "npm run build:css && next dev"
},
+ "resolutions": {
+ "@types/react": "19.1.7",
+ "@types/react-dom": "19.1.6"
+ },
"dependencies": {
"@codemirror/lang-sass": "^6.0.2",
"@lezer/highlight": "^1.2.1",
"@mdx-js/loader": "^3.1.0",
"@mdx-js/react": "^3.1.0",
- "@next/mdx": "^15.1.4",
+ "@next/mdx": "15.3.3",
"@storybook/react": "^8.6.8",
"@uiw/codemirror-themes": "^4.23.7",
"@uiw/react-codemirror": "^4.23.7",
+ "html-react-parser": "^5.2.5",
"motion": "^12.4.1",
- "next": "14.2.26",
- "react": "^18.0.2",
- "react-dom": "^18.0.2",
+ "next": "15.3.3",
+ "next-mdx-remote-client": "^2.1.2",
+ "react": "19.1.0",
+ "react-dom": "19.1.0",
"react-frame-component": "^5.2.7",
"shiki": "^1.26.1",
"storybook": "^8.6.8"
@@ -28,10 +34,10 @@
"devDependencies": {
"@types/mdx": "^2.0.13",
"@types/node": "^20",
- "@types/react": "^18.0.0",
- "@types/react-dom": "^18.0.0",
+ "@types/react": "19.1.7",
+ "@types/react-dom": "19.1.6",
"eslint": "^8",
- "eslint-config-next": "14.2.23",
+ "eslint-config-next": "15.3.3",
"lightningcss": "^1.28.2",
"typescript": "^5"
}
diff --git a/canon-docs/public/header.png b/canon-docs/public/header.png
index 507bd05ca7..8d11151a3e 100644
Binary files a/canon-docs/public/header.png and b/canon-docs/public/header.png differ
diff --git a/canon-docs/src/app/(docs)/changelog/page.mdx b/canon-docs/src/app/(docs)/changelog/page.mdx
new file mode 100644
index 0000000000..7cc0b2bf3e
--- /dev/null
+++ b/canon-docs/src/app/(docs)/changelog/page.mdx
@@ -0,0 +1,13 @@
+import { Changelog } from '@/components/Changelog';
+
+# Changelog
+
+
+
+## Version 0.1.0
+
+We're excited to share the initial release of Canon đź’š In this first alpha version,
+you'll find the foundation of our design system: a set of versatile layout components
+and a handful of essential atomic elements to help you get started. While Canon is
+still in its early stages, it's ready for exploration and we'd love for you to give
+it a try and share your feedback.
diff --git a/canon-docs/src/app/(docs)/components/[slug]/page.tsx b/canon-docs/src/app/(docs)/components/[slug]/page.tsx
new file mode 100644
index 0000000000..d6f98c8f93
--- /dev/null
+++ b/canon-docs/src/app/(docs)/components/[slug]/page.tsx
@@ -0,0 +1,25 @@
+import { components, layoutComponents } from '@/utils/data';
+
+export default async function Page({
+ params,
+}: {
+ params: Promise<{ slug: string }>;
+}) {
+ const { slug } = await params;
+
+ const { default: Component } = await import(
+ `@/content/components/${slug}.mdx`
+ );
+
+ return ;
+}
+
+export function generateStaticParams() {
+ const list = [...components, ...layoutComponents];
+
+ return list.map(component => ({
+ slug: component.slug,
+ }));
+}
+
+export const dynamicParams = false;
diff --git a/canon-docs/src/app/(docs)/components/avatar/page.mdx b/canon-docs/src/app/(docs)/components/avatar/page.mdx
deleted file mode 100644
index b46caf8d62..0000000000
--- a/canon-docs/src/app/(docs)/components/avatar/page.mdx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import { AvatarSnippet } from '@/snippets/stories-snippets';
-import { avatarPropDefs } from './props';
-
-# Avatar
-
-An avatar component with a fallback for initials.
-
-}
- code={``}
-/>
-
-
-
- Usage
- Theming
-
-
- `}
- />
-
-
- We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
- your brand. For additional flexibility, you can use the provided class names for each element listed below.
- - `canon-AvatarRoot`
- - `canon-AvatarRoot[data-size='small']`
- - `canon-AvatarRoot[data-size='medium']`
- - `canon-AvatarRoot[data-size='large']`
- - `canon-AvatarImage`
- - `canon-AvatarFallback`
-
-
-
-## API reference
-
-
-
-## Examples
-
-### Sizes
-
-Avatar sizes can be set using the `size` prop.
-
-}
- code={`
-
-
-
- `}
-/>
-
-### Fallback
-
-If the image is not available, the avatar will show the initials of the name.
-
-}
- code={``}
-/>
diff --git a/canon-docs/src/app/(docs)/components/avatar/props.ts b/canon-docs/src/app/(docs)/components/avatar/props.ts
deleted file mode 100644
index e86c67a41e..0000000000
--- a/canon-docs/src/app/(docs)/components/avatar/props.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { classNamePropDefs, stylePropDefs } from '@/utils/propDefs';
-import type { PropDef } from '@/utils/propDefs';
-
-export const avatarPropDefs: Record = {
- src: {
- type: 'string',
- },
- name: {
- type: 'string',
- },
- size: {
- type: 'enum',
- values: ['small', 'medium', 'large'],
- default: 'medium',
- responsive: true,
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/box/props.ts b/canon-docs/src/app/(docs)/components/box/props.ts
deleted file mode 100644
index f3e38984dd..0000000000
--- a/canon-docs/src/app/(docs)/components/box/props.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {
- classNamePropDefs,
- displayPropDefs,
- heightPropDefs,
- positionPropDefs,
- stylePropDefs,
- widthPropDefs,
-} from '../../../../utils/propDefs';
-import type { PropDef } from '../../../../utils/propDefs';
-
-export const boxPropDefs: Record = {
- as: {
- type: 'enum',
- values: ['div', 'span'],
- default: 'div',
- responsive: true,
- },
- ...widthPropDefs,
- ...heightPropDefs,
- ...positionPropDefs,
- ...displayPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/button/page.mdx b/canon-docs/src/app/(docs)/components/button/page.mdx
deleted file mode 100644
index 3554ee39f9..0000000000
--- a/canon-docs/src/app/(docs)/components/button/page.mdx
+++ /dev/null
@@ -1,150 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import { ButtonSnippet } from '@/snippets/stories-snippets';
-import { buttonVariants } from '@/snippets/code-snippets';
-import { buttonPropDefs } from './props';
-
-# Button
-
-A button component that can be used to trigger actions.
-
-}
- code={`
-
-
-
-`}
-/>
-
-
-
- Usage
- Theming
-
-
-
-`}
- />
-
-
- We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
- your brand. For additional flexibility, you can use the provided class names for each element listed below.
- `}
- />
-
-
-
-
-## API reference
-
-
-
-## Examples
-
-### Variants
-
-Here's a view when buttons have different variants.
-
-}
- code={buttonVariants}
-/>
-
-### Sizes
-
-Here's a view when buttons have different sizes.
-
-}
- code={`
-
-
-`}
-/>
-
-### With Icons
-
-Here's a view when buttons have icons.
-
-}
- code={`
-
-
-
-`}
-/>
-
-### Full width
-
-Here's a view when buttons are full width.
-
-}
- code={`
-
-`}
-/>
-
-### Disabled
-
-Here's a view when buttons are disabled.
-
-}
- code={``}
-/>
-
-### As Link
-
-Here's a view when buttons are rendered as a link.
-
-}
- code={`}>
- I am a link
- `}
-/>
-
-### Responsive
-
-Here's a view when buttons are responsive.
-
-
- Responsive Button
- `}
-/>
diff --git a/canon-docs/src/app/(docs)/components/button/props.ts b/canon-docs/src/app/(docs)/components/button/props.ts
deleted file mode 100644
index 36b0f73066..0000000000
--- a/canon-docs/src/app/(docs)/components/button/props.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
-import type { PropDef } from '../../../../utils/propDefs';
-
-export const buttonPropDefs: Record = {
- variant: {
- type: 'enum',
- values: ['primary', 'secondary'],
- default: 'primary',
- responsive: true,
- },
- size: {
- type: 'enum',
- values: ['small', 'medium'],
- default: 'medium',
- responsive: true,
- },
- render: {
- type: 'enum',
- values: ['ReactNode'],
- responsive: false,
- default: '',
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/checkbox/page.mdx b/canon-docs/src/app/(docs)/components/checkbox/page.mdx
deleted file mode 100644
index 413636dc9a..0000000000
--- a/canon-docs/src/app/(docs)/components/checkbox/page.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { CheckboxSnippet } from '@/snippets/stories-snippets';
-import { Snippet } from '@/components/Snippet';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
-import { checkboxPropDefs } from './props';
-
-# Checkbox
-
-A checkbox component that can be used to trigger actions.
-
-}
- code={``}
-/>
-
-
-
- Usage
- Theming
-
-
-
-`}
- />
-
-
- We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
- your brand. For additional flexibility, you can use the provided class names for each element listed below.
- `}
- />
-
-
-
-
-## API reference
-
-
-
-
-
-## Examples
-
-### All variants
-
-Here's a view when checkboxes have different variants.
-
-}
- code={`
-
-
-
-
- `}
-/>
diff --git a/canon-docs/src/app/(docs)/components/collapsible/page.mdx b/canon-docs/src/app/(docs)/components/collapsible/page.mdx
deleted file mode 100644
index e013dff89c..0000000000
--- a/canon-docs/src/app/(docs)/components/collapsible/page.mdx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import { CollapsibleSnippet } from '@/snippets/stories-snippets';
-import {
- collapsibleRootPropDefs,
- collapsibleTriggerPropDefs,
- collapsiblePanelPropDefs,
-} from './props';
-
-# Collapsible
-
-An avatar component with a fallback for initials.
-
-}
- code={`
- (
-
- )} />
-
-
- It's the edge of the world and all of Western civilization
- The sun may rise in the East, at least it settled in a final location
- It's understood that Hollywood sells Californication
-
-
-`}
-/>
-
-
-
- Usage
- Theming
-
-
-
- (
-
- )} />
- Your content
-`}
- />
-
-
- We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
- your brand. For additional flexibility, you can use the provided class names for each element listed below.
- - `canon-CollapsibleRoot`
- - `canon-CollapsibleTrigger`
- - `canon-CollapsiblePanel`
-
-
-
-## API reference
-
-### Collapsible.Root
-
-Groups all parts of the collapsible. Renders a `
` element.
-
-
-
-### Collapsible.Trigger
-
-The trigger by default render a simple unstyled button. Because menus can be rendered in different ways, we recommend
-using the `render` prop to render a custom trigger.
-
- } />`}
-/>
-
-
-
-### Collapsible.Panel
-
-A panel with the collapsible contents. Renders a `
` element.
-
-
-
-## Examples
-
-Open the panel by default by setting the `defaultOpen` prop to `true`.
-
-}
- code={`
- (
-
- )} />
-
-
- It's the edge of the world and all of Western civilization
- The sun may rise in the East, at least it settled in a final location
- It's understood that Hollywood sells Californication
-
-
-`}
-/>
diff --git a/canon-docs/src/app/(docs)/components/collapsible/props.ts b/canon-docs/src/app/(docs)/components/collapsible/props.ts
deleted file mode 100644
index 02c62dc89e..0000000000
--- a/canon-docs/src/app/(docs)/components/collapsible/props.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import {
- classNamePropDefs,
- stylePropDefs,
- renderPropDefs,
-} from '@/utils/propDefs';
-import type { PropDef } from '@/utils/propDefs';
-
-export const collapsibleRootPropDefs: Record = {
- defaultOpen: {
- type: 'boolean',
- default: 'false',
- },
- open: {
- type: 'boolean',
- },
- onOpenChange: {
- type: 'enum',
- values: ['(open) => void'],
- },
- ...renderPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const collapsibleTriggerPropDefs: Record = {
- ...renderPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const collapsiblePanelPropDefs: Record = {
- hiddenUntilFound: {
- type: 'boolean',
- default: 'false',
- },
- keepMounted: {
- type: 'boolean',
- default: 'false',
- },
- ...renderPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/container/props.ts b/canon-docs/src/app/(docs)/components/container/props.ts
deleted file mode 100644
index 4a3410ec12..0000000000
--- a/canon-docs/src/app/(docs)/components/container/props.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {
- classNamePropDefs,
- stylePropDefs,
- gapPropDefs,
-} from '../../../../utils/propDefs';
-import type { PropDef } from '../../../../utils/propDefs';
-
-export const containerPropDefs: Record = {
- ...gapPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/flex/page.mdx b/canon-docs/src/app/(docs)/components/flex/page.mdx
deleted file mode 100644
index 8150f3e3c5..0000000000
--- a/canon-docs/src/app/(docs)/components/flex/page.mdx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import {
- flexFAQ1,
- flexSimple,
- flexResponsive,
- flexAlign,
-} from '@/snippets/code-snippets';
-import { Snippet } from '@/components/Snippet';
-import { FlexSnippet } from '@/snippets/stories-snippets';
-import { flexPropDefs } from './props';
-import { spacingPropDefs } from '../../../../utils/propDefs';
-
-# Flex
-
-This is the flex container component. It will help to define the number of
-columns that will be used in the grid. You can also define the gap between the
-columns. All values are responsive.
-
-}
- code={`
-
-
-
-`}
-/>
-
-
-
- Usage
-
-
-
-`}
- />
-
-
-
-## API reference
-
-
-
-The grid component also accepts all the spacing props from the Box component.
-
-
-
-## Common questions
-
-### Can I stack horizontally?
-
-The Flex component only allows for stacking elements vertically. If you want
-to create a column layout, please use the Grid component.
-
-
-
-## Examples
-
-### Simple
-
-A simple example of how to use the Flex component.
-
-
-
-### Responsive
-
-The Flex component also supports responsive values, making it easy to create
-responsive designs.
-
-
-
-### Align
-
-The Flex component also supports responsive alignment, making it easy to
-create responsive designs.
-
-
diff --git a/canon-docs/src/app/(docs)/components/flex/props.ts b/canon-docs/src/app/(docs)/components/flex/props.ts
deleted file mode 100644
index 2268a6909d..0000000000
--- a/canon-docs/src/app/(docs)/components/flex/props.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import {
- PropDef,
- childrenPropDefs,
- classNamePropDefs,
- stylePropDefs,
-} from '../../../../utils/propDefs';
-
-export const flexPropDefs: Record = {
- align: {
- type: 'enum',
- values: ['start', 'center', 'end', 'baseline', 'stretch'],
- responsive: true,
- },
- direction: {
- type: 'enum',
- values: ['row', 'column', 'row-reverse', 'column-reverse'],
- responsive: true,
- },
- justify: {
- type: 'enum',
- values: ['start', 'center', 'end', 'between'],
- responsive: true,
- },
- ...childrenPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/grid/props.ts b/canon-docs/src/app/(docs)/components/grid/props.ts
deleted file mode 100644
index a9e8717fa1..0000000000
--- a/canon-docs/src/app/(docs)/components/grid/props.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import {
- PropDef,
- childrenPropDefs,
- classNamePropDefs,
- stylePropDefs,
-} from '../../../../utils/propDefs';
-
-const columnsValues = [
- '1',
- '2',
- '3',
- '4',
- '5',
- '6',
- '7',
- '8',
- '9',
- '10',
- '11',
- '12',
-];
-
-export const gridPropDefs: Record = {
- columns: {
- type: 'enum | string',
- values: [...columnsValues, 'auto'],
- responsive: true,
- default: 'auto',
- },
- ...childrenPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const gridItemPropDefs: Record = {
- colSpan: {
- type: 'enum | string',
- values: [...columnsValues, 'full'],
- responsive: true,
- },
- rowSpan: {
- type: 'enum | string',
- values: [...columnsValues, 'full'],
- responsive: true,
- },
- start: {
- type: 'enum | string',
- values: [...columnsValues, 'auto'],
- responsive: true,
- },
- end: {
- type: 'enum | string',
- values: [...columnsValues, 'auto'],
- responsive: true,
- },
- ...childrenPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/heading/page.mdx b/canon-docs/src/app/(docs)/components/heading/page.mdx
deleted file mode 100644
index a5eb488411..0000000000
--- a/canon-docs/src/app/(docs)/components/heading/page.mdx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { HeadingSnippet } from '@/snippets/stories-snippets';
-import { Snippet } from '@/components/Snippet';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import { headingPropDefs } from './props';
-
-# Heading
-
-Headings are used to structure the content of your page.
-
-}
- code={`Hello World!`}
-/>
-
-
-
- Usage
- Theming
-
-
-
-`}
- />
-
-
- We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
- your brand. For additional flexibility, you can use the provided class names for each element listed below.
- `}
- />
-
-
-
-
-## API reference
-
-
-
-## Examples
-
-### All variants
-
-The `Heading` component has a `variant` prop that can be used to change the
-appearance of the heading.
-
-}
- code={`
- Display
- Title 1
- Title 2
- Title 3
- Title 4
- Title 5
-`}
-/>
-
-### Truncate
-
-The `Heading` component has a `truncate` prop that can be used to truncate the
-heading.
-
-}
- code={`
- A man looks at a painting in a museum and says, “Brothers and sisters I
- have none, but that man's father is my father's son.” Who is
- in the painting?
- `}
-/>
-
-### Custom render
-
-You can also use the `render` prop to render the heading as a different element.
-
-}
- code={`}>Custom render`}
-/>
-
-### Responsive
-
-You can also use the `variant` prop to change the appearance of the text based
-on the screen size.
-
-
- Responsive heading
- `}
-/>
diff --git a/canon-docs/src/app/(docs)/components/heading/props.ts b/canon-docs/src/app/(docs)/components/heading/props.ts
deleted file mode 100644
index 6d62d2dee1..0000000000
--- a/canon-docs/src/app/(docs)/components/heading/props.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
-import type { PropDef } from '../../../../utils/propDefs';
-
-export const headingPropDefs: Record = {
- variant: {
- type: 'enum',
- values: ['display', 'title1', 'title2', 'title3', 'title4', 'title5'],
- responsive: true,
- },
- children: {
- type: 'enum',
- values: ['ReactNode'],
- responsive: false,
- },
- truncate: {
- type: 'boolean',
- default: 'false',
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/icon-button/page.mdx b/canon-docs/src/app/(docs)/components/icon-button/page.mdx
deleted file mode 100644
index 60530ec9ea..0000000000
--- a/canon-docs/src/app/(docs)/components/icon-button/page.mdx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import { IconButtonSnippet } from '@/snippets/stories-snippets';
-import { iconButtonVariants } from '@/snippets/code-snippets';
-import { iconButtonPropDefs } from './props';
-
-# Icon Button
-
-A button component with a single icon that can be used to trigger actions.
-
-}
- code={`
-
-
- `}
-/>
-
-
-
- Usage
- Theming
-
-
-
-`}
- />
-
-
- We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
- your brand. For additional flexibility, you can use the provided class names for each element listed below.
- `}
- />
-
-
-
-
-## API reference
-
-
-
-## Examples
-
-### Variants
-
-Here's a view when buttons have different variants.
-
-}
- code={iconButtonVariants}
-/>
-
-### Sizes
-
-Here's a view when buttons have different sizes.
-
-}
- code={`
-
-
-`}
-/>
-
-### Disabled
-
-Here's a view when buttons are disabled.
-
-}
- code={``}
-/>
-
-### Responsive
-
-Here's a view when buttons are responsive.
-
-`}
-/>
diff --git a/canon-docs/src/app/(docs)/components/icon-button/props.ts b/canon-docs/src/app/(docs)/components/icon-button/props.ts
deleted file mode 100644
index bcb1580247..0000000000
--- a/canon-docs/src/app/(docs)/components/icon-button/props.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
-import type { PropDef } from '../../../../utils/propDefs';
-
-export const iconButtonPropDefs: Record = {
- variant: {
- type: 'enum',
- values: ['primary', 'secondary'],
- default: 'primary',
- responsive: true,
- },
- size: {
- type: 'enum',
- values: ['small', 'medium'],
- default: 'medium',
- responsive: true,
- },
- icon: { type: 'enum', values: 'icon', responsive: false },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/icon/page.mdx b/canon-docs/src/app/(docs)/components/icon/page.mdx
deleted file mode 100644
index 66be460d13..0000000000
--- a/canon-docs/src/app/(docs)/components/icon/page.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { IconSnippet } from '@/snippets/stories-snippets';
-import { Snippet } from '@/components/Snippet';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import { iconPropDefs } from './props';
-
-# Icon
-
-Icons are used to represent an action or a state.
-
-}
- code={``}
-/>
-
-
-
- Usage
- Theming
-
-
-
-`}
- />
-
-
- We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
- your brand. For additional flexibility, you can use the provided class names for each element listed below.
- `}
- />
-
-
-
-
-## API reference
-
-
diff --git a/canon-docs/src/app/(docs)/components/link/page.mdx b/canon-docs/src/app/(docs)/components/link/page.mdx
deleted file mode 100644
index 64a3261590..0000000000
--- a/canon-docs/src/app/(docs)/components/link/page.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import {
- MenuSnippet,
- ButtonSnippet,
- LinkSnippet,
-} from '@/snippets/stories-snippets';
-import { linkPropDefs } from './props';
-
-# Link
-
-A link component that renders a `` element.
-
-}
- code={`Sign up for Backstage`}
-/>
-
-
-
- Usage
- Theming
-
-
- Sign up for Backstage`}
- />
-
-
- We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
- your brand. For additional flexibility, you can use the provided class names for each element listed below.
- - `canon-Link`
- - `canon-Link[data-variant='body']`
- - `canon-Link[data-variant='subtitle']`
- - `canon-Link[data-variant='caption']`
- - `canon-Link[data-variant='label']`
- - `canon-Link[data-weight='regular']`
- - `canon-Link[data-weight='bold']`
-
-
-
-## API reference
-
-
-
-## Examples
-
-### Variants
-
-Here's a view when links have different variants.
-
-}
- code={`
-
-
-
-
- `}
-/>
-
-### Weights
-
-Here's a view when links have different weights.
-
-}
- code={`
-
-
- `}
-/>
diff --git a/canon-docs/src/app/(docs)/components/link/props.ts b/canon-docs/src/app/(docs)/components/link/props.ts
deleted file mode 100644
index 83507c5594..0000000000
--- a/canon-docs/src/app/(docs)/components/link/props.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { classNamePropDefs, stylePropDefs } from '@/utils/propDefs';
-import type { PropDef } from '@/utils/propDefs';
-
-export const linkPropDefs: Record = {
- to: {
- type: 'string',
- },
- variant: {
- type: 'enum',
- values: ['subtitle', 'body', 'caption', 'label'],
- default: 'body',
- responsive: true,
- },
- weight: {
- type: 'enum',
- values: ['regular', 'bold'],
- default: 'regular',
- responsive: true,
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/menu/page.mdx b/canon-docs/src/app/(docs)/components/menu/page.mdx
deleted file mode 100644
index 524db26cd1..0000000000
--- a/canon-docs/src/app/(docs)/components/menu/page.mdx
+++ /dev/null
@@ -1,202 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import { MenuSnippet } from '@/snippets/stories-snippets';
-import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
-import {
- menuRootPropDefs,
- menuTriggerPropDefs,
- menuPositionerPropDefs,
- menuItemPropDefs,
-} from './props';
-
-# Menu
-
-A list of actions in a dropdown, enhanced with keyboard navigation.
-
-}
- code={`
- (
-
- )}
- />
-
-
-
- Settings
- Invite new members
- Download app
- Log out
-
-
-
- `}
-/>
-
-
-
- Usage
- Theming
-
-
-
-
-
-
-
-
-
-
-
- `}
- />
-
-
- We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
- your brand. For additional flexibility, you can use the provided class names for each element listed below.
- - `canon-MenuTrigger`
- - `canon-MenuBackdrop`
- - `canon-MenuPositioner`
- - `canon-MenuPopup`
- - `canon-MenuArrow`
- - `canon-MenuItem`
- - `canon-MenuGroup`
- - `canon-MenuGroupLabel`
- - `canon-MenuRadioGroup`
- - `canon-MenuRadioItem`
- - `canon-MenuRadioItemIndicator`
- - `canon-MenuCheckboxItem`
- - `canon-MenuCheckboxItemIndicator`
- - `canon-MenuSubmenuTrigger`
- - `canon-MenuSeparator`
-
-
-
-## API reference
-
-
-
-### Menu.Root
-
-Groups all parts of the menu. Doesn't render its own HTML element.
-
-
-
-### Menu.Trigger
-
-The trigger by default render a simple unstyled button. Because menus can be rendered in different ways, we recommend
-using the `render` prop to render a custom trigger.
-
- } />`} />
-
-
-
-### Menu.Positioner
-
-Positions the menu popup against the trigger. Renders a `