doccupine 0.0.76 → 0.0.78

package/dist/templates/mdx/callouts.mdx.d.ts

@@ -1 +1 @@
-export declare const calloutsMdxTemplate = "---\ntitle: \"Callouts\"\ndescription: \"Make your content stand out by using callouts for extra emphasis.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 7\n---\n# Callouts\nMake your content stand out by using callouts for extra emphasis.\n\nYou can format them as Note, Warning, Info, Danger and Success.\n\n## Callouts Usage\nYou can use the Callouts component directly within your MDX files without any import. The following example shows a basic usage:\n\n~~~mdx\n<Callout type=\"note\">\n  This is a note callout\n</Callout>\n\n<Callout type=\"warning\">\n  This is a warning callout\n</Callout>\n\n<Callout type=\"info\">\n  This is an info callout\n</Callout>\n\n<Callout type=\"danger\">\n  This is a danger callout\n</Callout>\n\n<Callout type=\"success\">\n This is a success callout\n</Callout>\n~~~\n\n<Callout type=\"note\">\n  This is a note callout\n</Callout>\n\n<Callout type=\"warning\">\n  This is a warning callout\n</Callout>\n\n<Callout type=\"info\">\n  This is an info callout\n</Callout>\n\n<Callout type=\"danger\">\n  This is a danger callout\n</Callout>\n\n<Callout type=\"success\">\n This is a success callout\n</Callout>\n\n## Properties\n\n<Field value=\"type\" type=\"string\">\n  The type of the callout: `note`, `info`, `warning`, `danger`, or `success`.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  A custom [Lucide](https://lucide.dev/icons) icon name. Overrides the default icon for the callout type.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the callout.\n</Field>";
+export declare const calloutsMdxTemplate = "---\ntitle: \"Callouts\"\ndescription: \"Make your content stand out by using callouts for extra emphasis.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 8\n---\n# Callouts\nMake your content stand out by using callouts for extra emphasis.\n\nYou can format them as Note, Warning, Info, Danger and Success.\n\n## Callouts Usage\nYou can use the Callouts component directly within your MDX files without any import. The following example shows a basic usage:\n\n~~~mdx\n<Callout type=\"note\">\n  This is a note callout\n</Callout>\n\n<Callout type=\"warning\">\n  This is a warning callout\n</Callout>\n\n<Callout type=\"info\">\n  This is an info callout\n</Callout>\n\n<Callout type=\"danger\">\n  This is a danger callout\n</Callout>\n\n<Callout type=\"success\">\n This is a success callout\n</Callout>\n~~~\n\n<Callout type=\"note\">\n  This is a note callout\n</Callout>\n\n<Callout type=\"warning\">\n  This is a warning callout\n</Callout>\n\n<Callout type=\"info\">\n  This is an info callout\n</Callout>\n\n<Callout type=\"danger\">\n  This is a danger callout\n</Callout>\n\n<Callout type=\"success\">\n This is a success callout\n</Callout>\n\n## Properties\n\n<Field value=\"type\" type=\"string\">\n  The type of the callout: `note`, `info`, `warning`, `danger`, or `success`.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  A custom [Lucide](https://lucide.dev/icons) icon name. Overrides the default icon for the callout type.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the callout.\n</Field>";

package/dist/templates/mdx/callouts.mdx.js

@@ -4,7 +4,7 @@ description: "Make your content stand out by using callouts for extra emphasis."
 date: "2026-02-19"
 category: "Components"
 categoryOrder: 1
-order: 7
+order: 8
 ---
 # Callouts
 Make your content stand out by using callouts for extra emphasis.

package/dist/templates/mdx/color-swatches.mdx.d.ts

@@ -1 +1 @@
-export declare const colorSwatchesMdxTemplate = "---\ntitle: \"Color Swatches\"\ndescription: \"Display color palettes with labeled swatches to document your theme colors.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 8\n---\n# Color Swatches\nDisplay color palettes with labeled swatches to document your theme colors.\n\nThe `ColorSwatch` component renders a visual preview of a color alongside its token name, and `ColorSwatchGroup` arranges multiple swatches in a responsive grid.\n\n## Usage\nYou can use the ColorSwatch components directly within your MDX files without any import:\n\n~~~mdx\n<ColorSwatchGroup>\n  <ColorSwatch token=\"primary\" value=\"#6366F1\" />\n  <ColorSwatch token=\"secondary\" value=\"#EC4899\" />\n  <ColorSwatch token=\"success\" value=\"#10B981\" />\n  <ColorSwatch token=\"warning\" value=\"#F59E0B\" />\n  <ColorSwatch token=\"danger\" value=\"#EF4444\" />\n  <ColorSwatch token=\"info\" value=\"#3B82F6\" />\n</ColorSwatchGroup>\n~~~\n\n<ColorSwatchGroup>\n  <ColorSwatch token=\"primary\" value=\"#6366F1\" />\n  <ColorSwatch token=\"secondary\" value=\"#EC4899\" />\n  <ColorSwatch token=\"success\" value=\"#10B981\" />\n  <ColorSwatch token=\"warning\" value=\"#F59E0B\" />\n  <ColorSwatch token=\"danger\" value=\"#EF4444\" />\n  <ColorSwatch token=\"info\" value=\"#3B82F6\" />\n</ColorSwatchGroup>\n\n## Dark Colors\n\nText color automatically adapts based on the background luminance, so dark swatches display white text:\n\n~~~mdx\n<ColorSwatchGroup>\n  <ColorSwatch token=\"dark\" value=\"#1E1E2E\" />\n  <ColorSwatch token=\"grayDark\" value=\"#374151\" />\n  <ColorSwatch token=\"gray\" value=\"#6B7280\" />\n  <ColorSwatch token=\"grayLight\" value=\"#D1D5DB\" />\n  <ColorSwatch token=\"light\" value=\"#F9FAFB\" />\n  <ColorSwatch token=\"white\" value=\"#FFFFFF\" />\n</ColorSwatchGroup>\n~~~\n\n<ColorSwatchGroup>\n  <ColorSwatch token=\"dark\" value=\"#1E1E2E\" />\n  <ColorSwatch token=\"grayDark\" value=\"#374151\" />\n  <ColorSwatch token=\"gray\" value=\"#6B7280\" />\n  <ColorSwatch token=\"grayLight\" value=\"#D1D5DB\" />\n  <ColorSwatch token=\"light\" value=\"#F9FAFB\" />\n  <ColorSwatch token=\"white\" value=\"#FFFFFF\" />\n</ColorSwatchGroup>\n\n## ColorSwatch Properties\n\n<Field value=\"token\" type=\"string\" required>\n  The name or label displayed below the color preview (e.g. a design token name).\n</Field>\n\n<Field value=\"value\" type=\"string\" required>\n  A hex color value (e.g. `#6366F1`). Displayed inside the color preview and used as the background.\n</Field>\n\n## ColorSwatchGroup Properties\n\n<Field value=\"children\" type=\"node\" required>\n  One or more `ColorSwatch` components to display in a responsive grid.\n</Field>";
+export declare const colorSwatchesMdxTemplate = "---\ntitle: \"Color Swatches\"\ndescription: \"Display color palettes with labeled swatches to document your theme colors.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 15\n---\n# Color Swatches\nDisplay color palettes with labeled swatches to document your theme colors.\n\nThe `ColorSwatch` component renders a visual preview of a color alongside its token name, and `ColorSwatchGroup` arranges multiple swatches in a responsive grid.\n\n## Usage\nYou can use the ColorSwatch components directly within your MDX files without any import:\n\n~~~mdx\n<ColorSwatchGroup>\n  <ColorSwatch token=\"primary\" value=\"#6366F1\" />\n  <ColorSwatch token=\"secondary\" value=\"#EC4899\" />\n  <ColorSwatch token=\"success\" value=\"#10B981\" />\n  <ColorSwatch token=\"warning\" value=\"#F59E0B\" />\n  <ColorSwatch token=\"danger\" value=\"#EF4444\" />\n  <ColorSwatch token=\"info\" value=\"#3B82F6\" />\n</ColorSwatchGroup>\n~~~\n\n<ColorSwatchGroup>\n  <ColorSwatch token=\"primary\" value=\"#6366F1\" />\n  <ColorSwatch token=\"secondary\" value=\"#EC4899\" />\n  <ColorSwatch token=\"success\" value=\"#10B981\" />\n  <ColorSwatch token=\"warning\" value=\"#F59E0B\" />\n  <ColorSwatch token=\"danger\" value=\"#EF4444\" />\n  <ColorSwatch token=\"info\" value=\"#3B82F6\" />\n</ColorSwatchGroup>\n\n## Dark Colors\n\nText color automatically adapts based on the background luminance, so dark swatches display white text:\n\n~~~mdx\n<ColorSwatchGroup>\n  <ColorSwatch token=\"dark\" value=\"#1E1E2E\" />\n  <ColorSwatch token=\"grayDark\" value=\"#374151\" />\n  <ColorSwatch token=\"gray\" value=\"#6B7280\" />\n  <ColorSwatch token=\"grayLight\" value=\"#D1D5DB\" />\n  <ColorSwatch token=\"light\" value=\"#F9FAFB\" />\n  <ColorSwatch token=\"white\" value=\"#FFFFFF\" />\n</ColorSwatchGroup>\n~~~\n\n<ColorSwatchGroup>\n  <ColorSwatch token=\"dark\" value=\"#1E1E2E\" />\n  <ColorSwatch token=\"grayDark\" value=\"#374151\" />\n  <ColorSwatch token=\"gray\" value=\"#6B7280\" />\n  <ColorSwatch token=\"grayLight\" value=\"#D1D5DB\" />\n  <ColorSwatch token=\"light\" value=\"#F9FAFB\" />\n  <ColorSwatch token=\"white\" value=\"#FFFFFF\" />\n</ColorSwatchGroup>\n\n## ColorSwatch Properties\n\n<Field value=\"token\" type=\"string\" required>\n  The name or label displayed below the color preview (e.g. a design token name).\n</Field>\n\n<Field value=\"value\" type=\"string\" required>\n  A hex color value (e.g. `#6366F1`). Displayed inside the color preview and used as the background.\n</Field>\n\n## ColorSwatchGroup Properties\n\n<Field value=\"children\" type=\"node\" required>\n  One or more `ColorSwatch` components to display in a responsive grid.\n</Field>";

package/dist/templates/mdx/color-swatches.mdx.js

@@ -4,7 +4,7 @@ description: "Display color palettes with labeled swatches to document your them
 date: "2026-02-19"
 category: "Components"
 categoryOrder: 1
-order: 8
+order: 15
 ---
 # Color Swatches
 Display color palettes with labeled swatches to document your theme colors.

package/dist/templates/mdx/columns.mdx.d.ts

@@ -1 +1 @@
-export declare const columnsMdxTemplate = "---\ntitle: \"Columns\"\ndescription: \"Columns are used to organize content in a grid-like structure.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 12\n---\n# Columns\nArrange multiple cards neatly in a side-by-side grid layout.\n\nThe `Columns` component helps you organize several `Card` elements into a visually balanced grid. By choosing how many columns you want, you can control the layout and spacing of your cards.\n\n## Columns Usage\nYou can use the `Columns` component to create a grid of cards with a specified number of columns.\n\n```mdx\n<Columns cols={2}>\n  <Card title=\"Getting Started\" icon=\"rocket\">\n    Kick off your project using our easy quickstart guide.\n  </Card>\n\n  <Card title=\"API Reference\" icon=\"code\">\n    Browse all endpoints, parameters, and code examples for your API integration.\n  </Card>\n</Columns>\n```\n\n<Columns cols={2}>\n  <Card title=\"Getting Started\" icon=\"rocket\">\n    Kick off your project using our easy quickstart guide.\n  </Card>\n\n  <Card title=\"API Reference\" icon=\"code\">\n    Browse all endpoints, parameters, and code examples for your API integration.\n  </Card>\n</Columns>\n\n## Properties\n\n<Field value=\"cols\" type=\"number\">\n  The number of columns in the grid. Defaults to 1.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the columns.\n</Field>";
+export declare const columnsMdxTemplate = "---\ntitle: \"Columns\"\ndescription: \"Columns are used to organize content in a grid-like structure.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 13\n---\n# Columns\nArrange multiple cards neatly in a side-by-side grid layout.\n\nThe `Columns` component helps you organize several `Card` elements into a visually balanced grid. By choosing how many columns you want, you can control the layout and spacing of your cards.\n\n## Columns Usage\nYou can use the `Columns` component to create a grid of cards with a specified number of columns.\n\n```mdx\n<Columns cols={2}>\n  <Card title=\"Getting Started\" icon=\"rocket\">\n    Kick off your project using our easy quickstart guide.\n  </Card>\n\n  <Card title=\"API Reference\" icon=\"code\">\n    Browse all endpoints, parameters, and code examples for your API integration.\n  </Card>\n</Columns>\n```\n\n<Columns cols={2}>\n  <Card title=\"Getting Started\" icon=\"rocket\">\n    Kick off your project using our easy quickstart guide.\n  </Card>\n\n  <Card title=\"API Reference\" icon=\"code\">\n    Browse all endpoints, parameters, and code examples for your API integration.\n  </Card>\n</Columns>\n\n## Properties\n\n<Field value=\"cols\" type=\"number\">\n  The number of columns in the grid. Defaults to 1.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the columns.\n</Field>";

package/dist/templates/mdx/columns.mdx.js

@@ -4,7 +4,7 @@ description: "Columns are used to organize content in a grid-like structure."
 date: "2026-02-19"
 category: "Components"
 categoryOrder: 1
-order: 12
+order: 13
 ---
 # Columns
 Arrange multiple cards neatly in a side-by-side grid layout.

package/dist/templates/mdx/components.mdx.d.ts

@@ -1 +1 @@
-export declare const componentsMdxTemplate = "---\ntitle: \"Components\"\ndescription: \"Explore the full library of built-in components available in your documentation pages.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 0\n---\n# Components\n\nDoccupine includes a rich set of built-in components you can use directly in your MDX files - no imports needed. Browse the full library below.\n\n<Columns cols={3}>\n  <Card title=\"Headers and Text\" icon=\"heading\" href=\"/headers-and-text\">\n    Headings, paragraphs, bold, italic, links, and other text formatting.\n  </Card>\n  <Card title=\"Lists and Tables\" icon=\"list\" href=\"/lists-and-tables\">\n    Ordered lists, unordered lists, and data tables.\n  </Card>\n  <Card title=\"Code\" icon=\"code\" href=\"/code\">\n    Inline code, fenced code blocks, and syntax highlighting.\n  </Card>\n  <Card title=\"Accordion\" icon=\"chevrons-down\" href=\"/accordion\">\n    Collapsible sections for organizing lengthy content.\n  </Card>\n  <Card title=\"Tabs\" icon=\"panel-top\" href=\"/tabs\">\n    Tabbed interfaces for grouping related content.\n  </Card>\n  <Card title=\"Cards\" icon=\"square\" href=\"/cards\">\n    Visual containers for content, icons, and links.\n  </Card>\n  <Card title=\"Buttons\" icon=\"mouse-pointer-click\" href=\"/buttons\">\n    Action components with variants, sizes, and icons.\n  </Card>\n  <Card title=\"Callouts\" icon=\"megaphone\" href=\"/callouts\">\n    Highlighted blocks for tips, warnings, and important notes.\n  </Card>\n  <Card title=\"Images and Embeds\" icon=\"image\" href=\"/images-and-embeds\">\n    Images, videos, and embedded content.\n  </Card>\n  <Card title=\"Icons\" icon=\"smile\" href=\"/icons\">\n    Lucide icons you can use anywhere in your docs.\n  </Card>\n  <Card title=\"Fields\" icon=\"text-cursor-input\" href=\"/fields\">\n    Property and parameter documentation blocks.\n  </Card>\n  <Card title=\"Update\" icon=\"bell\" href=\"/update\">\n    Changelog and update announcement blocks.\n  </Card>\n  <Card title=\"Columns\" icon=\"columns-3\" href=\"/columns\">\n    Grid layouts for arranging cards and content side by side.\n  </Card>\n  <Card title=\"Steps\" icon=\"footprints\" href=\"/steps\">\n    Numbered step-by-step guides and walkthroughs.\n  </Card>\n</Columns>";
+export declare const componentsMdxTemplate = "---\ntitle: \"Components\"\ndescription: \"Explore the full library of built-in components available in your documentation pages.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 0\n---\n# Components\n\nDoccupine includes a rich set of built-in components you can use directly in your MDX files - no imports needed. Browse the full library below.\n\n<Columns cols={3}>\n  <Card title=\"Headers and Text\" icon=\"heading\" href=\"/headers-and-text\">\n    Headings, paragraphs, bold, italic, links, and other text formatting.\n  </Card>\n  <Card title=\"Lists and Tables\" icon=\"list\" href=\"/lists-and-tables\">\n    Ordered lists, unordered lists, and data tables.\n  </Card>\n  <Card title=\"Code\" icon=\"code\" href=\"/code\">\n    Inline code, fenced code blocks, and syntax highlighting.\n  </Card>\n  <Card title=\"Accordion\" icon=\"chevrons-down\" href=\"/accordion\">\n    Collapsible sections for organizing lengthy content.\n  </Card>\n  <Card title=\"Tabs\" icon=\"panel-top\" href=\"/tabs\">\n    Tabbed interfaces for grouping related content.\n  </Card>\n  <Card title=\"Cards\" icon=\"square\" href=\"/cards\">\n    Visual containers for content, icons, and links.\n  </Card>\n  <Card title=\"Buttons\" icon=\"mouse-pointer-click\" href=\"/buttons\">\n    Action components with variants, sizes, and icons.\n  </Card>\n  <Card title=\"Callouts\" icon=\"megaphone\" href=\"/callouts\">\n    Highlighted blocks for tips, warnings, and important notes.\n  </Card>\n  <Card title=\"Images and Embeds\" icon=\"image\" href=\"/images-and-embeds\">\n    Images, videos, and embedded content.\n  </Card>\n  <Card title=\"Icons\" icon=\"smile\" href=\"/icons\">\n    Lucide icons you can use anywhere in your docs.\n  </Card>\n  <Card title=\"Fields\" icon=\"text-cursor-input\" href=\"/fields\">\n    Property and parameter documentation blocks.\n  </Card>\n  <Card title=\"Update\" icon=\"bell\" href=\"/update\">\n    Changelog and update announcement blocks.\n  </Card>\n  <Card title=\"Columns\" icon=\"columns-3\" href=\"/columns\">\n    Grid layouts for arranging cards and content side by side.\n  </Card>\n  <Card title=\"Steps\" icon=\"footprints\" href=\"/steps\">\n    Numbered step-by-step guides and walkthroughs.\n  </Card>\n  <Card title=\"Color Swatches\" icon=\"palette\" href=\"/color-swatches\">\n    Visual color palette swatches to document your theme colors.\n  </Card>\n</Columns>";

package/dist/templates/mdx/components.mdx.js

@@ -53,4 +53,7 @@ Doccupine includes a rich set of built-in components you can use directly in you
   <Card title="Steps" icon="footprints" href="/steps">
     Numbered step-by-step guides and walkthroughs.
   </Card>
+  <Card title="Color Swatches" icon="palette" href="/color-swatches">
+    Visual color palette swatches to document your theme colors.
+  </Card>
 </Columns>`;

package/dist/templates/mdx/fields.mdx.d.ts

@@ -1 +1 @@
-export declare const fieldsMdxTemplate = "---\ntitle: \"Fields\"\ndescription: \"Configure parameters for your API or SDK documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 10\n---\n# Fields\nConfigure parameters for your API or SDK documentation.\n\nFields allow you to describe both the **inputs** (parameters) and **outputs** (responses) of your API. The main field component is available: `Field` for parameters and for responses.\n\n## Fields Usage\nUse the `<Field>` component to declare API or SDK parameters, or define the return values of an API.\n\n<Field value=\"param\" type=\"string\" required>\n  Example definition of a parameter field.\n</Field>\n\n```mdx\n<Field value=\"param\" type=\"string\" required>\n  Example definition of a parameter field.\n</Field>\n```\n\n## Properties\n\n<Field value=\"value\" type=\"string\" required>\n  The name of the field.\n</Field>\n\n<Field value=\"type\" type=\"string\" required>\n  The type of the field.\n</Field>\n\n<Field value=\"required\" type=\"boolean\">\n  Whether the field is required.\n</Field>";
+export declare const fieldsMdxTemplate = "---\ntitle: \"Fields\"\ndescription: \"Configure parameters for your API or SDK documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 11\n---\n# Fields\nConfigure parameters for your API or SDK documentation.\n\nFields allow you to describe both the **inputs** (parameters) and **outputs** (responses) of your API. The main field component is available: `Field` for parameters and for responses.\n\n## Fields Usage\nUse the `<Field>` component to declare API or SDK parameters, or define the return values of an API.\n\n<Field value=\"param\" type=\"string\" required>\n  Example definition of a parameter field.\n</Field>\n\n```mdx\n<Field value=\"param\" type=\"string\" required>\n  Example definition of a parameter field.\n</Field>\n```\n\n## Properties\n\n<Field value=\"value\" type=\"string\" required>\n  The name of the field.\n</Field>\n\n<Field value=\"type\" type=\"string\" required>\n  The type of the field.\n</Field>\n\n<Field value=\"required\" type=\"boolean\">\n  Whether the field is required.\n</Field>";

package/dist/templates/mdx/fields.mdx.js

@@ -4,7 +4,7 @@ description: "Configure parameters for your API or SDK documentation."
 date: "2026-02-19"
 category: "Components"
 categoryOrder: 1
-order: 10
+order: 11
 ---
 # Fields
 Configure parameters for your API or SDK documentation.

package/dist/templates/mdx/icons.mdx.d.ts

@@ -1 +1 @@
-export declare const iconsMdxTemplate = "---\ntitle: \"Icons\"\ndescription: \"Integrate visual icons from well-known libraries to enrich your documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 9\n---\n# Icons\nIntegrate visual icons from well-known libraries to enrich your documentation.\n\nIcons can be sourced from Lucide, SVG elements, external URLs, or local files within your project directory.\n\n<Icon name=\"flag\" size={32} />\n\n```mdx\n<Icon name=\"flag\" size={32} />\n```\n\n## Inline icons\nYou can use icons directly within text to highlight information or add visual context.\n\n<Icon name=\"flag\" size={16} /> Build your documentation seamlessly.\n\n```mdx\n<Icon name=\"flag\" size={16} /> Build your documentation seamlessly.\n```\n\n## Properties\n\n<Field value=\"name\" type=\"string\" required>\n  The icon to display.\n</Field>\n\n- [**Lucide icon**](https://lucide.dev/icons) name\n\n<Field value=\"size\" type=\"number\">\n  The size of the icon in pixels.\n</Field>\n\n<Field value=\"color\" type=\"string\">\n  The color of the icon as a hex code (for example, `#FF5733`).\n</Field>";
+export declare const iconsMdxTemplate = "---\ntitle: \"Icons\"\ndescription: \"Integrate visual icons from well-known libraries to enrich your documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 10\n---\n# Icons\nIntegrate visual icons from well-known libraries to enrich your documentation.\n\nIcons can be sourced from Lucide, SVG elements, external URLs, or local files within your project directory.\n\n<Icon name=\"flag\" size={32} />\n\n```mdx\n<Icon name=\"flag\" size={32} />\n```\n\n## Inline icons\nYou can use icons directly within text to highlight information or add visual context.\n\n<Icon name=\"flag\" size={16} /> Build your documentation seamlessly.\n\n```mdx\n<Icon name=\"flag\" size={16} /> Build your documentation seamlessly.\n```\n\n## Properties\n\n<Field value=\"name\" type=\"string\" required>\n  The icon to display.\n</Field>\n\n- [**Lucide icon**](https://lucide.dev/icons) name\n\n<Field value=\"size\" type=\"number\">\n  The size of the icon in pixels.\n</Field>\n\n<Field value=\"color\" type=\"string\">\n  The color of the icon as a hex code (for example, `#FF5733`).\n</Field>";

package/dist/templates/mdx/icons.mdx.js

@@ -4,7 +4,7 @@ description: "Integrate visual icons from well-known libraries to enrich your do
 date: "2026-02-19"
 category: "Components"
 categoryOrder: 1
-order: 9
+order: 10
 ---
 # Icons
 Integrate visual icons from well-known libraries to enrich your documentation.

package/dist/templates/mdx/image-and-embeds.mdx.d.ts

@@ -1 +1 @@
-export declare const imageAndEmbedsMdxTemplate = "---\ntitle: \"Images and embeds\"\ndescription: \"Enrich your documentation with visuals, videos, and interactive embeds.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 8\n---\n# Images and embeds\nEnrich your documentation with visuals, videos, and interactive embeds.\n\nDisplay images, embed video content, or add interactive frames via iframes to supplement your docs.\n\n![Demo Image](https://docs.doccupine.com/demo.png)\n\n## Images\nImages enhance documentation with context, illustration, or decorative visual cues.\n\n### Basic Image Syntax\nInclude an image in Markdown using the syntax below:\n\n```md\n![Alt text](https://docs.doccupine.com/demo.png)\n```\n\n<Callout type=\"note\">\n  Use clear, descriptive alt text for accessibility and better SEO. Alt text should describe the image\u2019s appearance or content.\n</Callout>\n\n### HTML image embeds\nEmbed images in your Markdown content using HTML syntax.\n\n```md\n<img src=\"https://docs.doccupine.com/demo.png\" alt=\"Alt text\">\n```\n\n### Theme-aware images\nShow different images depending on whether the user is in light or dark mode. Add the `light-only` or `dark-only` className to display an image exclusively in that theme.\n\n```md\n<img className=\"light-only\" src=\"/images/diagram-light.png\" alt=\"Diagram\">\n<img className=\"dark-only\" src=\"/images/diagram-dark.png\" alt=\"Diagram\">\n```\n\n<img className=\"light-only\" src=\"https://docs.doccupine.com/demo.png\" alt=\"This image is only visible in light mode\" />\n<img className=\"dark-only\" src=\"https://docs.doccupine.com/demo.png\" alt=\"This image is only visible in dark mode\" style={{ filter: \"invert(1)\" }} />\n\n<Callout type=\"note\">\n  The `light-only` and `dark-only` classes work on any element, not just images. You can use them on videos, iframes, or wrapper divs too.\n</Callout>\n\n## Videos\nVideos add a dynamic element to your documentation, engaging your audience and providing a more immersive experience.\n\n### YouTube Embed\nTo embed a YouTube video, use the following syntax:\n\n```html\n<iframe\n  className=\"aspect-video\"\n  src=\"https://www.youtube.com/embed/ResP_eVPYQo\"\n  title=\"YouTube video player\"\n  frameBorder=\"0\"\n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n  allowFullScreen\n></iframe>\n```\n\n<iframe\n  className=\"aspect-video\"\n  src=\"https://www.youtube.com/embed/ResP_eVPYQo\"\n  title=\"YouTube video player\"\n  frameBorder=\"0\"\n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n  allowFullScreen\n></iframe>\n\n### Self-hosted videos\nServe up your own video content using the `<video>` tag:\n\n```html\n<video\n  controls\n  className=\"aspect-video\"\n  src=\"https://samplelib.com/lib/preview/mp4/sample-20s.mp4\"\n></video>\n```\n\n<video\n  controls\n  className=\"aspect-video\"\n  src=\"https://samplelib.com/lib/preview/mp4/sample-20s.mp4\"\n></video>\n\n\n#### Autoplay and Looping\nFor demonstration videos that loop or start automatically, add attributes as shown:\n\n```html\n<video\n  controls\n  className=\"aspect-video\"\n  src=\"https://samplelib.com/lib/preview/mp4/sample-20s.mp4\"\n  autoPlay\n  muted\n  loop\n  playsInline\n></video>\n```\n";
+export declare const imageAndEmbedsMdxTemplate = "---\ntitle: \"Images and embeds\"\ndescription: \"Enrich your documentation with visuals, videos, and interactive embeds.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 9\n---\n# Images and embeds\nEnrich your documentation with visuals, videos, and interactive embeds.\n\nDisplay images, embed video content, or add interactive frames via iframes to supplement your docs.\n\n![Demo Image](https://docs.doccupine.com/demo.png)\n\n## Images\nImages enhance documentation with context, illustration, or decorative visual cues.\n\n### Basic Image Syntax\nInclude an image in Markdown using the syntax below:\n\n```md\n![Alt text](https://docs.doccupine.com/demo.png)\n```\n\n<Callout type=\"note\">\n  Use clear, descriptive alt text for accessibility and better SEO. Alt text should describe the image\u2019s appearance or content.\n</Callout>\n\n### HTML image embeds\nEmbed images in your Markdown content using HTML syntax.\n\n```md\n<img src=\"https://docs.doccupine.com/demo.png\" alt=\"Alt text\">\n```\n\n### Theme-aware images\nShow different images depending on whether the user is in light or dark mode. Add the `light-only` or `dark-only` className to display an image exclusively in that theme.\n\n```md\n<img className=\"light-only\" src=\"/images/diagram-light.png\" alt=\"Diagram\">\n<img className=\"dark-only\" src=\"/images/diagram-dark.png\" alt=\"Diagram\">\n```\n\n<img className=\"light-only\" src=\"https://docs.doccupine.com/demo.png\" alt=\"This image is only visible in light mode\" />\n<img className=\"dark-only\" src=\"https://docs.doccupine.com/demo.png\" alt=\"This image is only visible in dark mode\" style={{ filter: \"invert(1)\" }} />\n\n<Callout type=\"note\">\n  The `light-only` and `dark-only` classes work on any element, not just images. You can use them on videos, iframes, or wrapper divs too.\n</Callout>\n\n## Videos\nVideos add a dynamic element to your documentation, engaging your audience and providing a more immersive experience.\n\n### YouTube Embed\nTo embed a YouTube video, use the following syntax:\n\n```html\n<iframe\n  className=\"aspect-video\"\n  src=\"https://www.youtube.com/embed/ResP_eVPYQo\"\n  title=\"YouTube video player\"\n  frameBorder=\"0\"\n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n  allowFullScreen\n></iframe>\n```\n\n<iframe\n  className=\"aspect-video\"\n  src=\"https://www.youtube.com/embed/ResP_eVPYQo\"\n  title=\"YouTube video player\"\n  frameBorder=\"0\"\n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n  allowFullScreen\n></iframe>\n\n### Self-hosted videos\nServe up your own video content using the `<video>` tag:\n\n```html\n<video\n  controls\n  className=\"aspect-video\"\n  src=\"https://samplelib.com/lib/preview/mp4/sample-20s.mp4\"\n></video>\n```\n\n<video\n  controls\n  className=\"aspect-video\"\n  src=\"https://samplelib.com/lib/preview/mp4/sample-20s.mp4\"\n></video>\n\n\n#### Autoplay and Looping\nFor demonstration videos that loop or start automatically, add attributes as shown:\n\n```html\n<video\n  controls\n  className=\"aspect-video\"\n  src=\"https://samplelib.com/lib/preview/mp4/sample-20s.mp4\"\n  autoPlay\n  muted\n  loop\n  playsInline\n></video>\n```\n";

package/dist/templates/mdx/image-and-embeds.mdx.js

@@ -4,7 +4,7 @@ description: "Enrich your documentation with visuals, videos, and interactive em
 date: "2026-02-19"
 category: "Components"
 categoryOrder: 1
-order: 8
+order: 9
 ---
 # Images and embeds
 Enrich your documentation with visuals, videos, and interactive embeds.

package/dist/templates/mdx/steps.mdx.d.ts

@@ -1 +1 @@
-export declare const stepsMdxTemplate = "---\ntitle: \"Steps\"\ndescription: \"Guide readers step-by-step using the Steps component.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 13\n---\n# Steps\nGuide readers step-by-step using the Steps component.\n\nThe Steps component is perfect for organizing procedures or workflows in a clear sequence. Include as many individual steps as necessary to outline your process.\n\n## Steps Usage\nYou can use the `Steps` component to create a step-by-step guide. Each step is represented by a `Step` component, which includes a title and content.\n\n```mdx\n<Steps>\n  <Step title=\"Step 1\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 2\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 3\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n</Steps>\n```\n\n<Steps>\n  <Step title=\"Step 1\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 2\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 3\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n</Steps>\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the step.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  A [Lucide](https://lucide.dev/icons) icon name shown next to the step title.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the step.\n</Field>\n";
+export declare const stepsMdxTemplate = "---\ntitle: \"Steps\"\ndescription: \"Guide readers step-by-step using the Steps component.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 14\n---\n# Steps\nGuide readers step-by-step using the Steps component.\n\nThe Steps component is perfect for organizing procedures or workflows in a clear sequence. Include as many individual steps as necessary to outline your process.\n\n## Steps Usage\nYou can use the `Steps` component to create a step-by-step guide. Each step is represented by a `Step` component, which includes a title and content.\n\n```mdx\n<Steps>\n  <Step title=\"Step 1\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 2\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 3\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n</Steps>\n```\n\n<Steps>\n  <Step title=\"Step 1\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 2\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 3\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n</Steps>\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the step.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  A [Lucide](https://lucide.dev/icons) icon name shown next to the step title.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the step.\n</Field>\n";

package/dist/templates/mdx/steps.mdx.js

@@ -4,7 +4,7 @@ description: "Guide readers step-by-step using the Steps component."
 date: "2026-02-19"
 category: "Components"
 categoryOrder: 1
-order: 13
+order: 14
 ---
 # Steps
 Guide readers step-by-step using the Steps component.

package/dist/templates/mdx/update.mdx.d.ts

@@ -1 +1 @@
-export declare const updateMdxTemplate = "---\ntitle: \"Update\"\ndescription: \"Easily manage and present change history.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 11\n---\n# Update\nEasily manage and present change history.\n\nThe `Update` component helps you display release notes, version details, and changelogs in a standardized format.\n\n<Update label=\"Example\" description=\"v0.0.1\">\n  ## Example entry\n\n  You can include anything here\u2014images, code snippets, or a bullet list of modifications.\n\n  ![Demo Image](https://docs.doccupine.com/demo.png)\n\n  ### Key additions\n\n  - Fully responsive layout\n  - Individual anchor for each update\n  - Automatic RSS feed entry generation\n</Update>\n\n## Update Usage\nYou can combine multiple `Update` components to build complete changelogs.\n\n```mdx\n<Update label=\"Example\" description=\"v0.0.1\">\n  ## Example entry\n\n  You can include anything here\u2014images, code snippets, or a bullet list of modifications.\n\n  ![Demo Image](https://docs.doccupine.com/demo.png)\n\n  ### Key additions\n\n  - Fully responsive layout\n  - Individual anchor for each update\n  - Automatic RSS feed entry generation\n</Update>\n```\n\n## Properties\n\n<Field value=\"label\" type=\"string\" required>\n  The label of the update.\n</Field>\n\n<Field value=\"description\" type=\"string\" required>\n  The description of the update.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the update.\n</Field>";
+export declare const updateMdxTemplate = "---\ntitle: \"Update\"\ndescription: \"Easily manage and present change history.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 12\n---\n# Update\nEasily manage and present change history.\n\nThe `Update` component helps you display release notes, version details, and changelogs in a standardized format.\n\n<Update label=\"Example\" description=\"v0.0.1\">\n  ## Example entry\n\n  You can include anything here\u2014images, code snippets, or a bullet list of modifications.\n\n  ![Demo Image](https://docs.doccupine.com/demo.png)\n\n  ### Key additions\n\n  - Fully responsive layout\n  - Individual anchor for each update\n  - Automatic RSS feed entry generation\n</Update>\n\n## Update Usage\nYou can combine multiple `Update` components to build complete changelogs.\n\n```mdx\n<Update label=\"Example\" description=\"v0.0.1\">\n  ## Example entry\n\n  You can include anything here\u2014images, code snippets, or a bullet list of modifications.\n\n  ![Demo Image](https://docs.doccupine.com/demo.png)\n\n  ### Key additions\n\n  - Fully responsive layout\n  - Individual anchor for each update\n  - Automatic RSS feed entry generation\n</Update>\n```\n\n## Properties\n\n<Field value=\"label\" type=\"string\" required>\n  The label of the update.\n</Field>\n\n<Field value=\"description\" type=\"string\" required>\n  The description of the update.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the update.\n</Field>";

package/dist/templates/mdx/update.mdx.js

@@ -4,7 +4,7 @@ description: "Easily manage and present change history."
 date: "2026-02-19"
 category: "Components"
 categoryOrder: 1
-order: 11
+order: 12
 ---
 # Update
 Easily manage and present change history.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "description": "Free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.",
   "main": "dist/index.js",
   "bin": {