docs: add theme section

apps/docs/docs/components/accordion/index.md

@@ -61,3 +61,6 @@ keyword: AccordionPage
 ```angular-ts file="./_icon.component.ts" group="icon" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}

apps/docs/docs/components/accordion/ng-doc.page.ts

@@ -1,10 +1,19 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteAlwaysOpenComponent } from './_always-open.component';
 import { FlowbiteColorComponent } from './_color.component';
 import { FlowbiteDefaultComponent } from './_default.component';
 import { FlowbiteFlushComponent } from './_flush.component';
 import { FlowbiteIconComponent } from './_icon.component';
 
+import {
+  flowbiteAccordionContentTheme,
+  flowbiteAccordionItemTheme,
+  flowbiteAccordionTheme,
+  flowbiteAccordionTitleTheme,
+} from 'flowbite-angular/accordion';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -21,6 +30,14 @@ const Accordion: NgDocPage = {
     flowbiteFlushComponent: FlowbiteFlushComponent,
     flowbiteIconComponent: FlowbiteIconComponent,
   },
+  data: {
+    themes: [
+      { title: 'Accordion theme', content: toIndentedJson(flowbiteAccordionTheme) },
+      { title: 'Accordion item content', content: toIndentedJson(flowbiteAccordionItemTheme) },
+      { title: 'Accordion title theme', content: toIndentedJson(flowbiteAccordionTitleTheme) },
+      { title: 'Accordion content', content: toIndentedJson(flowbiteAccordionContentTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Accordion;

apps/docs/docs/components/alert/index.md

@@ -61,3 +61,6 @@ keyword: AlertPage
 ```angular-ts file="./_border-accent.component.ts" group="borderAccent" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}

apps/docs/docs/components/alert/ng-doc.page.ts

@@ -1,10 +1,18 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteBorderAccentComponent } from './_border-accent.component';
 import { FlowbiteBorderComponent } from './_border.component';
 import { FlowbiteDefaultComponent } from './_default.component';
 import { FlowbiteDismissableComponent } from './_dismissable.component';
 import { FlowbiteIconComponent } from './_icon.component';
 
+import {
+  flowbiteAlertButtonTheme,
+  flowbiteAlertContentTheme,
+  flowbiteAlertTheme,
+} from 'flowbite-angular/alert';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -21,6 +29,13 @@ const Alert: NgDocPage = {
     flowbiteBorderAccentComponent: FlowbiteBorderAccentComponent,
     flowbiteDismissableComponent: FlowbiteDismissableComponent,
   },
+  data: {
+    themes: [
+      { title: 'Alert theme', content: toIndentedJson(flowbiteAlertTheme) },
+      { title: 'Alert content theme', content: toIndentedJson(flowbiteAlertContentTheme) },
+      { title: 'Alert button theme', content: toIndentedJson(flowbiteAlertButtonTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Alert;

apps/docs/docs/components/badge/index.md

@@ -61,3 +61,6 @@ keyword: BadgePage
 ```angular-ts file="./_dismiss.component.ts" group="dismiss" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}

apps/docs/docs/components/badge/ng-doc.page.ts

@@ -1,10 +1,18 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteBorderComponent } from './_border.component';
 import { FlowbiteDefaultComponent } from './_default.component';
 import { FlowbiteDismissComponent } from './_dismiss.component';
 import { FlowbiteIconComponent } from './_icon.component';
 import { FlowbiteLinkComponent } from './_link.component';
 
+import {
+  flowbiteBadgeButtonTheme,
+  flowbiteBadgeLinkTheme,
+  flowbiteBadgeTheme,
+} from 'flowbite-angular/badge';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -21,6 +29,13 @@ const Badge: NgDocPage = {
     flowbiteIconComponent: FlowbiteIconComponent,
     flowbiteDismissComponent: FlowbiteDismissComponent,
   },
+  data: {
+    themes: [
+      { title: 'Badge', content: toIndentedJson(flowbiteBadgeTheme) },
+      { title: 'Badge link', content: toIndentedJson(flowbiteBadgeLinkTheme) },
+      { title: 'Badge button', content: toIndentedJson(flowbiteBadgeButtonTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Badge;

apps/docs/docs/components/breadcrumb/index.md

@@ -13,3 +13,6 @@ keyword: BreadcrumbPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}

apps/docs/docs/components/breadcrumb/ng-doc.page.ts

@@ -1,6 +1,14 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import {
+  flowbiteBreadcrumbContentTheme,
+  flowbiteBreadcrumbItemTheme,
+  flowbiteBreadcrumbTheme,
+} from 'flowbite-angular/breadcrumb';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +21,13 @@ const Breadcrumb: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Breadcrumb', content: toIndentedJson(flowbiteBreadcrumbTheme) },
+      { title: 'Breadcrumb content', content: toIndentedJson(flowbiteBreadcrumbContentTheme) },
+      { title: 'Breadcrumb item', content: toIndentedJson(flowbiteBreadcrumbItemTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Breadcrumb;

apps/docs/docs/components/button/index.md

@@ -85,3 +85,6 @@ keyword: ButtonPage
 ```angular-ts file="./_group.component.ts" group="group" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}

apps/docs/docs/components/button/ng-doc.page.ts

@@ -1,3 +1,5 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 import { FlowbiteDisabledComponent } from './_disabled.component';
@@ -7,6 +9,8 @@ import { FlowbiteOutlineComponent } from './_outline.component';
 import { FlowbitePillComponent } from './_pill.component';
 import { FlowbiteSizeComponent } from './_size.component';
 
+import { flowbiteButtonTheme } from 'flowbite-angular/button';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -25,6 +29,9 @@ const Button: NgDocPage = {
     flowbiteDisabledComponent: FlowbiteDisabledComponent,
     flowbiteGroupComponent: FlowbiteGroupComponent,
   },
+  data: {
+    themes: [{ title: 'Button', content: toIndentedJson(flowbiteButtonTheme) }] satisfies DocThemes,
+  },
 };
 
 export default Button;

apps/docs/docs/components/card/index.md

@@ -13,3 +13,6 @@ keyword: CardPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}

apps/docs/docs/components/card/ng-doc.page.ts

@@ -1,6 +1,14 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import {
+  flowbiteCardContentTheme,
+  flowbiteCardHeaderTheme,
+  flowbiteCardTheme,
+} from 'flowbite-angular/card';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +21,13 @@ const Card: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Card content', content: toIndentedJson(flowbiteCardContentTheme) },
+      { title: 'Card header', content: toIndentedJson(flowbiteCardHeaderTheme) },
+      { title: 'Card', content: toIndentedJson(flowbiteCardTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Card;

apps/docs/docs/components/clipboard/index.md

@@ -13,3 +13,6 @@ keyword: ClipboardPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}

apps/docs/docs/components/clipboard/ng-doc.page.ts

@@ -1,6 +1,10 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import { flowbiteClipboardTheme } from 'flowbite-angular/clipboard';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +17,11 @@ const Clipboard: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Clipboard', content: toIndentedJson(flowbiteClipboardTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Clipboard;

apps/docs/docs/components/dropdown/index.md

@@ -13,3 +13,6 @@ keyword: DropdownPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}

apps/docs/docs/components/dropdown/ng-doc.page.ts

@@ -1,6 +1,14 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import {
+  flowbiteDropdownContentTheme,
+  flowbiteDropdownItemTheme,
+  flowbiteDropdownTheme,
+} from 'flowbite-angular/dropdown';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +21,13 @@ const Dropdown: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Dropdown content', content: toIndentedJson(flowbiteDropdownContentTheme) },
+      { title: 'Dropdown item', content: toIndentedJson(flowbiteDropdownItemTheme) },
+      { title: 'Dropdown', content: toIndentedJson(flowbiteDropdownTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Dropdown;

apps/docs/docs/components/icon/index.md

@@ -13,3 +13,6 @@ keyword: IconPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}

apps/docs/docs/components/icon/ng-doc.page.ts

@@ -1,6 +1,10 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import { flowbiteIconTheme } from 'flowbite-angular/icon';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +17,9 @@ const Icon: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [{ title: 'Icon', content: toIndentedJson(flowbiteIconTheme) }] satisfies DocThemes,
+  },
 };
 
 export default Icon;

apps/docs/docs/components/indicator/index.md

@@ -13,3 +13,6 @@ keyword: IndicatorPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}

apps/docs/docs/components/indicator/ng-doc.page.ts

@@ -1,6 +1,10 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import { flowbiteIndicatorTheme } from 'flowbite-angular/indicator';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +17,11 @@ const Indicator: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Indicator', content: toIndentedJson(flowbiteIndicatorTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Indicator;

apps/docs/docs/components/input/index.md

@@ -13,3 +13,6 @@ keyword: InputFieldPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}

apps/docs/docs/components/input/ng-doc.page.ts

@@ -1,6 +1,15 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import {
+  flowbiteFormControlTheme,
+  flowbiteFormFieldTheme,
+  flowbiteHelperTheme,
+  flowbiteLabelTheme,
+} from 'flowbite-angular/form';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +22,14 @@ const Input: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Form control', content: toIndentedJson(flowbiteFormControlTheme) },
+      { title: 'Form field', content: toIndentedJson(flowbiteFormFieldTheme) },
+      { title: 'Helper', content: toIndentedJson(flowbiteHelperTheme) },
+      { title: 'Label', content: toIndentedJson(flowbiteLabelTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Input;

apps/docs/docs/components/modal/index.md

@@ -37,3 +37,6 @@ keyword: ModalPage
 ```angular-ts file="./_position.component.ts" group="position" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}