docs: add page for ng-primitives

Author: MGREMY

apps/docs/docs/getting-started/ng-primitives/index.md

@@ -0,0 +1,18 @@
+---
+keyword: NgPrimitivesPage
+---
+
+## What's angular primitives
+
+Angular Primitives is a low-level headless UI component library with a focus on accessibility,
+customization, and developer experience. Whether you're building a robust design system from scratch
+or looking to enhance your existing one, our primitives are here to support you every step of the
+way.
+
+## Special thanks
+
+We're using `NgPrimitivesDocumentation` to provide accessibility and behavior base so
+flowbite-angular can be on design part. We want to address a special thanks to the maintainer of
+ng-primitives which has provided a packages called
+<span class="text-primary-500">@ng-primitives/state</span> which provides a clean way to have state
+management of components.

apps/docs/docs/getting-started/ng-primitives/ng-doc.page.ts

@@ -0,0 +1,15 @@
+import GettingStartedCategory from '../ng-doc.category';
+
+import type { NgDocPage } from '@ng-doc/core';
+
+/**
+ * Special thanks to ng-primitives
+ */
+const NgPrimitives: NgDocPage = {
+  title: 'Ng Primitives',
+  mdFile: 'index.md',
+  category: GettingStartedCategory,
+  order: 4,
+};
+
+export default NgPrimitives;

apps/docs/ng-doc.config.ts

@@ -52,6 +52,10 @@ const config: NgDocConfiguration = {
         title: 'Tailwind CSS Theming documentation',
         url: 'https://tailwindcss.com/docs/theme',
       },
+      NgPrimitivesDocumentation: {
+        title: 'ng-primitives',
+        url: 'https://angularprimitives.com',
+      },
     },
     loaders: [ngKeywordsLoader(), rxjsKeywordsLoader()],
   },

apps/docs/src/app/app.component.html

@@ -13,6 +13,7 @@
           flowbiteNavbarIconItem
           class="inline-flex! lg:hidden!"
           (click)="sidebarService.toggle()">
+          <span class="sr-only">Sidebar toggle</span>
           <flowbite-icon
             name="bars"
             class="size-5 stroke-2" />
@@ -99,10 +100,16 @@
       </a>
 
       <button
+        type="button"
         flowbiteThemeToggle
-        color="primary"></button>
+        color="primary">
+        <span class="sr-only">Theme toggle</span>
+      </button>
 
-      <button flowbiteNavbarToggle>
+      <button
+        type="button"
+        flowbiteNavbarToggle>
+        <span class="sr-only">Navbar toggle</span>
         <flowbite-icon
           name="bars"
           class="size-5 stroke-2" />

libs/flowbite-angular/theme-toggle/src/theme-toggle/theme-toggle.component.ts

@@ -17,6 +17,8 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import { provideIcons } from '@ng-icons/core';
+import { NgpButton } from 'ng-primitives/button';
+import { NgpFocus } from 'ng-primitives/interactions';
 import { twMerge } from 'tailwind-merge';
 
 @Component({
@@ -31,6 +33,16 @@ import { twMerge } from 'tailwind-merge';
       inputs: ['color:color'],
       outputs: [],
     },
+    {
+      directive: NgpButton,
+      inputs: ['disabled:disabled'],
+      outputs: [],
+    },
+    {
+      directive: NgpFocus,
+      inputs: ['ngpFocusDisabled:focusDisabled'],
+      outputs: ['ngpFocus'],
+    },
   ],
   imports: [Icon],
   providers: [provideFlowbiteThemeToggleState(), provideIcons({ sun, moon })],

libs/flowbite-angular/theme-toggle/src/theme-toggle/theme.ts

@@ -28,28 +28,28 @@ export const flowbiteThemeToggleTheme: FlowbiteThemeToggleTheme = createTheme({
     pill: {} as FlowbiteBoolean,
     color: {
       default: {
-        light: 'text-gray-900',
-        dark: 'dark:text-gray-100',
+        light: 'text-gray-800 data-hover:text-gray-900',
+        dark: 'dark:text-white dark:data-hover:text-gray-100',
       },
       info: {
-        light: 'text-blue-900',
-        dark: 'dark:text-blue-100',
+        light: 'text-gray-800 data-hover:text-blue-900',
+        dark: 'dark:text-white dark:data-hover:text-blue-100',
       },
       failure: {
-        light: 'text-red-900',
-        dark: 'dark:text-red-100',
+        light: 'text-gray-800 data-hover:text-red-900',
+        dark: 'dark:text-white dark:data-hover:text-red-100',
       },
       success: {
-        light: 'text-green-900',
-        dark: 'dark:text-green-100',
+        light: 'text-gray-800 data-hover:text-green-900',
+        dark: 'dark:text-white dark:data-hover:text-green-100',
       },
       warning: {
-        light: 'text-yellow-900',
-        dark: 'dark:text-yellow-100',
+        light: 'text-gray-800 data-hover:text-yellow-900',
+        dark: 'dark:text-white dark:data-hover:text-yellow-100',
       },
       primary: {
-        light: 'text-primary-900',
-        dark: 'dark:text-primary-100',
+        light: 'data-hover:text-primary-900 text-gray-800',
+        dark: 'dark:data-hover:text-primary-100 dark:text-white',
       },
     },
     colorOutline: {} as FlowbiteBaseButtonColors,