Merge branch 'themesberg:main' into main

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnPaste": false,

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Bergside Inc.
+Copyright (c) 2024 Bergside Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -104,22 +104,25 @@ Add Tailwind CSS to a CSS file:
 
 ### Install Flowbite React
 
-1. Install Flowbite and Flowbite React:
+1. Run the following command to install `flowbite-react`:
 
 ```bash
-npm i flowbite flowbite-react # or yarn add flowbite flowbite-react
+npm i flowbite-react
 ```
 
 2. Add the Flowbite plugin to `tailwind.config.js`, and include content from `flowbite-react`:
 
-```javascript
-module.exports = {
+```js
+/** @type {import('tailwindcss').Config} */
+export default {
   content: [
-    ...,
-    'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'
+    // ...
+    'node_modules/flowbite-react/lib/esm/**/*.js',
+  ],
+  plugins: [
+    // ...
+    require('flowbite/plugin'),
   ],
-  plugins: [..., require('flowbite/plugin')],
-  ...
 };
 ```
 
@@ -143,7 +146,7 @@ export default function MyPage() {
 
 #### Next.js
 
-If you're using Next.js, you can follow the [Next.js install guide](https://flowbite.com/docs/getting-started/next-js/), which includes a [Next.js starter project](https://github.com/tulupinc/flowbite-next-starter) with Flowbite React already set up.
+If you're using Next.js, you can follow the [Next.js install guide](https://flowbite.com/docs/guides/next-js/), which includes a [Next.js starter project](https://github.com/tulupinc/flowbite-next-starter) with Flowbite React already set up.
 
 #### Dark mode
 

app/docs/[[...slug]]/page.tsx

@@ -238,7 +238,7 @@ function DocFooter() {
           <Footer.Copyright
             by="All Rights Reserved. Flowbite™ is a registered trademark."
             href="/"
-            year={2023}
+            year={new Date().getFullYear()}
             className="text-base"
           />
         </div>

components/homepage/components-section.tsx

@@ -25,7 +25,7 @@ export const ComponentsSection: FC = () => {
           ))}
         </div>
         <div className="mb-4 flex w-full justify-center text-center">
-          <Button href="/docs/components/accordion" color="light">
+          <Button as={Link} href="/docs/components/accordion" color="light">
             View all components
           </Button>
         </div>

components/homepage/hero-section/hero-section.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react';
 import { HiOutlineArrowRight } from 'react-icons/hi';
 import { Button } from '~/src';
 import { CopyPackageInput } from './copy-package-input';
+import Link from 'next/link';
 
 export const HeroSection: FC = () => {
   return (
@@ -23,7 +24,12 @@ export const HeroSection: FC = () => {
                 <CopyPackageInput value="npm i flowbite-react" />
                 <div className="justify-center sm:flex sm:justify-start">
                   <div className="mx-0 flex flex-row items-center gap-4 sm:gap-6">
-                    <Button href="/docs/getting-started/introduction" size="lg" className="w-full whitespace-nowrap">
+                    <Button
+                      as={Link}
+                      size="lg"
+                      href="/docs/getting-started/introduction"
+                      className="w-full whitespace-nowrap"
+                    >
                       Get started <HiOutlineArrowRight className="ml-2 mt-1 h-4 w-4" />
                     </Button>
                   </div>

components/homepage/main-footer.tsx

@@ -91,7 +91,7 @@ export const MainFooter: FC = () => {
           <Footer.Copyright
             by="All Rights Reserved. Flowbite™ is a registered trademark."
             href="/"
-            year={2023}
+            year={new Date().getFullYear()}
             className="text-base"
           />
         </div>

components/homepage/react-section.tsx

@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import Link from 'next/link';
 import type { FC } from 'react';
 import { HiOutlineArrowRight } from 'react-icons/hi';
 import { Button } from '~/src';
@@ -75,10 +76,10 @@ export const ReactSection: FC = () => {
                 ))}
               </ul>
               <div className="flex flex-row gap-4">
-                <Button href="/docs/getting-started/quickstart">
+                <Button as={Link} href="/docs/getting-started/quickstart">
                   Start building <HiOutlineArrowRight className="ml-2 h-5 w-5" />
                 </Button>
-                <Button href="https://github.com/themesberg/flowbite-react" color="gray">
+                <Button as={Link} href="https://github.com/themesberg/flowbite-react" color="gray">
                   View on GitHub
                 </Button>
               </div>

components/mdx.tsx

@@ -1,11 +1,24 @@
 import type { MDXComponents } from 'mdx/types';
 import { getMDXComponent } from 'next-contentlayer/hooks';
+import Link from 'next/link';
 import * as examples from '~/examples';
 import { theme } from '~/src';
 import { CodeDemo, type CodeData } from './code-demo';
 import { CodeHighlight } from './code-highlight';
 
 const components: MDXComponents = {
+  a: ({ ref, href = '', ...props }) => {
+    const isLocal = href.startsWith('/');
+
+    return (
+      <Link
+        {...props}
+        href={href}
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        {...(!isLocal && { target: '_blank', rel: 'noreferrer' })}
+      />
+    );
+  },
   // TODO: revisit
   h2: (props) => (
     <h2 className="group relative z-20 scroll-mt-20 text-2xl font-bold text-gray-900" {...props}>

content/docs/components/popover.mdx

@@ -0,0 +1,76 @@
+---
+title: React Popover - Flowbite
+description: Use the popover component to show detailed information inside a pop-up box relative to the element that is being clicked or hovered based on multiple styles
+---
+
+Use the popover component to show detailed information inside a pop-up box relative to the element that is being clicked or hovered based on multiple styles
+
+Get started with the popover component to show any type of content inside a pop-up box when hovering or clicking over a trigger element. There are multiple examples that you can choose from, such as showing more information about a user profile, company profile, password strength, and more.
+
+Before using the popover component, make sure to import the component in your React project:
+
+```jsx
+import { Popover } from 'flowbite-react';
+```
+
+## Default popover
+
+Wrap the trigger component with the `<Popover>` component and pass the popover content to the `content` prop of the `<Popover>` component.
+
+This will render the popover whenever you click the trigger component.
+
+<Example name="popover.root" />
+
+## Company profile
+
+This example can be used to show more information about a company profile.
+
+<Example name="popover.profile" />
+
+## Image popover
+
+Use this example to trigger a popover component with detailed information and an image when hovering over a portion of highlighted text inspired by Wikipedia and other large news outlets.
+
+<Example name="popover.image" />
+
+## Password strength
+
+Dynamically show the password strength progress when creating a new password positioned relative to the input element.
+
+<Example name="popover.password" />
+
+## Controlled
+
+Manages visibility via `open` and `openOnChange` props, allowing fine-tuned control over its display. Ideal for scenarios where Popover behavior needs to align with specific application logic or user interactions.
+
+<Example name="popover.controlled" />
+
+## Placement
+
+Update the placement of the popover using the `placement` prop. The default placement is `bottom` and you can also use `right`, `top`, and `left`.
+
+<Example name="popover.placement" />
+
+## Trigger type
+
+Use the `trigger` prop to change the trigger type of the popover if you want to show the popover when clicking on the hover element instead of clicking on it.
+
+The default trigger type is `hover` and you can also use `click`.
+
+<Example name="popover.trigger" />
+
+## Disable arrow
+
+You can disable the arrow of the popover component by passing the `arrow` prop with a value of `false`.
+
+<Example name="popover.disableArrow" />
+
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<Theme name="popover" />
+
+## References
+
+- [Flowbite Popover](https://flowbite.com/docs/components/popover/)

content/docs/getting-started/introduction.mdx

@@ -44,22 +44,25 @@ Add Tailwind CSS to a CSS file:
 
 ### Install Flowbite React
 
-1. Install Flowbite and Flowbite React:
+1. Run the following command to install `flowbite-react`:
 
 ```bash
-npm i flowbite flowbite-react # or yarn add flowbite flowbite-react
+npm i flowbite-react
 ```
 
 2. Add the Flowbite plugin to `tailwind.config.js`, and include content from `flowbite-react`:
 
-```javascript
-module.exports = {
+```js
+/** @type {import('tailwindcss').Config} */
+export default {
   content: [
-    ...,
+    // ...
     'node_modules/flowbite-react/lib/esm/**/*.js',
   ],
-  plugins: [..., require('flowbite/plugin')],
-  ...
+  plugins: [
+    // ...
+    require('flowbite/plugin'),
+  ],
 };
 ```
 
@@ -83,7 +86,7 @@ export default function MyPage() {
 
 #### Next.js
 
-If you're using Next.js, you can follow the [Next.js install guide](/docs/getting-started/nextjs), which includes a [Next.js starter project](https://github.com/tulupinc/flowbite-next-starter) with Flowbite React already set up.
+If you're using Next.js, you can follow the [Next.js install guide](/docs/guides/next-js), which includes a [Next.js starter project](https://github.com/tulupinc/flowbite-next-starter) with Flowbite React already set up.
 
 #### Dark mode
 

content/docs/getting-started/license.mdx

@@ -5,7 +5,7 @@ description: Learn more about the open-source licensing rights of the Flowbite R
 
 ## MIT License
 
-Copyright © 2023 Bergside Inc.
+Copyright © 2024 Bergside Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

content/docs/getting-started/quickstart.mdx

@@ -40,22 +40,25 @@ Add Tailwind CSS to a CSS file:
 
 ## Install Flowbite React
 
-1. Install Flowbite and Flowbite React:
+1. Run the following command to install `flowbite-react`:
 
 ```bash
-npm i flowbite-react # or yarn add flowbite flowbite-react
+npm i flowbite-react
 ```
 
 2. Add the Flowbite plugin to `tailwind.config.js`, and include content from `flowbite-react`:
 
-```javascript
-module.exports = {
+```js
+/** @type {import('tailwindcss').Config} */
+export default {
   content: [
-    ...,
-    'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'
+    // ...
+    'node_modules/flowbite-react/lib/esm/**/*.js',
+  ],
+  plugins: [
+    // ...
+    require('flowbite/plugin'),
   ],
-  plugins: [..., require('flowbite/plugin')],
-  ...
 };
 ```
 
@@ -79,7 +82,7 @@ export default function MyPage() {
 
 #### Next.js
 
-If you're using Next.js, you can follow the [Next.js install guide](/docs/getting-started/nextjs), which includes a [Next.js starter project](https://github.com/tulupinc/flowbite-next-starter) with Flowbite React already set up.
+If you're using Next.js, you can follow the [Next.js install guide](/docs/guides/next-js), which includes a [Next.js starter project](https://github.com/tulupinc/flowbite-next-starter) with Flowbite React already set up.
 
 #### Dark mode