Merge branch 'main' into main

Author: lancegliser

.changeset/shiny-wolves-report.md

@@ -0,0 +1,5 @@
+---
+"flowbite-react": patch
+---
+
+Mega Menu - export all entities

.vscode/settings.json

@@ -11,8 +11,8 @@
     ["createTheme\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
   ],
   "tailwindCSS.experimental.configFile": {
-    "apps/web/tailwind.config.js": "apps/web/**",
-    "packages/ui/tailwind.config.js": "packages/ui/**"
+    "apps/web/tailwind.config.cjs": "apps/web/**",
+    "packages/ui/tailwind.config.cjs": "packages/ui/**"
   },
   "typescript.tsdk": "node_modules/typescript/lib"
 }

apps/web/app/examples/[name]/layout.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import type { PropsWithChildren } from "react";
+import { twMerge } from "tailwind-merge";
+
+export default function ExamplePageLayout({ children }: PropsWithChildren) {
+  const searchParams = useSearchParams();
+  const noPadding = searchParams.get("noPadding");
+
+  return <main className={twMerge(noPadding === null && "p-5")}>{children}</main>;
+}

apps/web/app/examples/[name]/page.tsx

@@ -0,0 +1,19 @@
+import { notFound } from "next/navigation";
+
+interface Props {
+  params: {
+    name: string;
+  };
+}
+
+export default async function ExamplePage({ params }: Props) {
+  try {
+    const [key] = params.name.split(".");
+
+    const { Component } = await import(`~/examples/${key}/${params.name}`);
+
+    return Component ? <Component /> : notFound();
+  } catch (e) {
+    notFound();
+  }
+}

apps/web/components/code-demo.tsx

@@ -2,7 +2,7 @@
 
 import { Select, Tooltip, useThemeMode } from "flowbite-react";
 import type { ComponentProps, PropsWithChildren } from "react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { IconType } from "react-icons";
 import { FaCopy } from "react-icons/fa";
 import { HiMoon, HiSun } from "react-icons/hi";
@@ -12,10 +12,18 @@ import { TfiMobile } from "react-icons/tfi";
 import { twMerge } from "tailwind-merge";
 import { CodeHighlight, type Language } from "./code-highlight";
 
+type IFrameData = number | IFrameOptions;
+
+interface IFrameOptions {
+  height: number;
+  noPadding?: boolean;
+}
+
 interface BaseCodeData<T extends "single" | "variant"> {
   type: T;
   githubSlug: string;
   component: React.ReactNode;
+  iframe?: IFrameData;
 }
 
 interface VariantCodeData<V extends Variant> extends BaseCodeData<"variant"> {
@@ -135,8 +143,8 @@ export function CodeDemo({ data }: CodeDemoProps) {
           </div>
         </div>
       </div>
-      <CodePreview view={view} isRTL={isRTL} isDarkMode={isDarkMode}>
-        {data.component}
+      <CodePreview view={view} isRTL={isRTL} isDarkMode={isDarkMode} iframe={data.iframe}>
+        {data.iframe ? <IFrame data={data} isRTL={isRTL} isDarkMode={isDarkMode} /> : data.component}
       </CodePreview>
       <div className="code-syntax-wrapper">
         <div
@@ -173,6 +181,40 @@ export function CodeDemo({ data }: CodeDemoProps) {
   );
 }
 
+function IFrame({ data, isRTL, isDarkMode }: { data: CodeData; isRTL: boolean; isDarkMode: boolean | null }) {
+  const ref = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    const document = ref.current?.contentDocument;
+
+    if (!document) return;
+
+    document.documentElement.setAttribute("dir", isRTL ? "rtl" : "ltr");
+
+    if (isDarkMode) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  }, [isRTL, isDarkMode]);
+
+  function getSrc() {
+    const base = "/examples";
+    const target = data.githubSlug.split("/")[1].replace(".tsx", "");
+    const noPadding = typeof data.iframe === "object" && data.iframe.noPadding ? `?noPadding` : "";
+
+    return `${base}/${target}${noPadding}`;
+  }
+
+  function getHeight(): number {
+    const payload = data.iframe!;
+
+    return typeof payload === "number" ? payload : payload.height;
+  }
+
+  return <iframe ref={ref} src={getSrc()} height={getHeight()} className="w-full" />;
+}
+
 function Tabs({ tabIndex, items, onSelect }: { tabIndex: number; items: CodeItem[]; onSelect(index: number): void }) {
   return (
     <ul className="flex flex-1 text-center text-sm font-medium text-gray-500 dark:text-gray-400">
@@ -198,20 +240,22 @@ function CodePreview({
   view,
   isRTL,
   isDarkMode,
+  iframe,
   children,
-}: PropsWithChildren<{ view: View; isRTL: boolean; isDarkMode: boolean | null }>) {
+}: PropsWithChildren<{ view: View; isRTL: boolean; isDarkMode: boolean | null; iframe?: IFrameData }>) {
   return (
     <div
       {...(isRTL && { dir: "rtl" })}
       className={twMerge("code-preview-wrapper", isDarkMode !== null && (isDarkMode ? "dark" : "light"))}
     >
-      <div className="code-preview flex border-x border-gray-200 bg-white bg-gradient-to-r p-0 dark:border-gray-600 dark:bg-gray-900">
+      <div className="flex border-x border-gray-200 bg-white bg-gradient-to-r p-0 dark:border-gray-600 dark:bg-gray-900">
         <div className="code-responsive-wrapper w-full">
           <div
             className={twMerge(
-              "mx-auto w-full bg-white bg-gradient-to-r p-5 dark:bg-gray-900",
+              "mx-auto w-full bg-white bg-gradient-to-r dark:bg-gray-900",
               view === "tablet" && "max-w-lg",
               view === "mobile" && "max-w-sm",
+              !iframe && "p-5",
             )}
           >
             {children}

apps/web/content/docs/components/drawer.mdx

@@ -0,0 +1,114 @@
+---
+title: React Drawer (offcanvas) - Flowbite
+description: The Drawer component can be used as a hidden off-canvas sidebar for navigation and to show other information based on multiple styles and placements
+---
+
+Use the Drawer component (or "off-canvas") to show a fixed element relative to the document page from any side for navigation, contact forms, informational purposes or other user actions.
+
+You can set multiple options such as the placement, activate body scrolling, show or hide the backdrop and even use the swipeable edge functionality to show a small part of the drawer when it is not shown completely.
+
+To start using the drawer component you need to import it from `flowbite-react`:
+
+```jsx
+import { Drawer } from "flowbite-react";
+```
+
+## Default drawer
+
+<Example name="drawer.root" />
+
+## Drawer navigation
+
+Use this example to show a navigational sidebar inside the drawer component.
+
+<Example name="drawer.navigation" />
+
+## Contact form
+
+Use this example to show a contact form inside the drawer component.
+
+<Example name="drawer.contactForm" />
+
+## Form elements
+
+Use this example if you want to add form elements inside the drawer component including datepickers.
+
+<Example name="drawer.formElements" />
+
+## Placement
+
+Use the placement options to position the drawer component either on the top, right, bottom, or left side of the document page. This can be done using the `position="{top|right|bottom|left}"` attribute where the default value is "left".
+
+### Left drawer
+
+Use this example where you can position the drawer component on the left side of the page.
+
+<Example name="drawer.left" />
+
+### Right drawer
+
+Use this example to show the drawer component on the right side of the page.
+
+<Example name="drawer.right" />
+
+### Top drawer
+
+Use this example to show the drawer on the top side of the page.
+
+<Example name="drawer.top" />
+
+### Bottom drawer
+
+Use this example to show the drawer on the bottom side of the page.
+
+<Example name="drawer.bottom" />
+
+## Body scrolling
+
+By default, body scrolling is disabled when the drawer is visible, however, you can choose to enable it using the `bodyScrolling="{true|false}"` attribute.
+
+### Disabled (default)
+
+This is an example where the body scrolling behaviour is disabled when the drawer is visible.
+
+<Example name="drawer.noBodyScrolling" />
+
+### Enabled
+
+Get started with this example in order to enable body scrolling even if the drawer component is visible by applying `overflow-y: auto` to your `<body>`.
+
+<Example name="drawer.bodyScrolling" />
+
+## Backdrop
+
+The backdrop element can be used to dim out the background elements when the drawer is visible and also automatically hide the component when clicking outside of it.
+
+Use the `backdrop="{true|false}"` attribute where you can disable or enable the backdrop element.
+
+### Enabled (default)
+
+Use this example to enable the backdrop element by default.
+
+<Example name="drawer.backdrop" />
+
+### Disabled
+
+Use the `backdrop="false"` attribute to disable the backdrop element when the drawer is shown.
+
+<Example name="drawer.noBackdrop" />
+
+## Swipeable edge
+
+The drawer edge functionality allows you to show a small part of the drawer when it is not shown completely by applying the `edge="{true|false}"` attribute, specifying the edge you'd like to set with, e.g., `theme={{ edge: "bottom-16" }}`, and adding `onClick={() => setIsOpen(!isOpen)}` to `<DrawerHeader/>`.
+
+<Example name="drawer.swipeableEdge" />
+
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<Theme name="drawer" />
+
+## References
+
+- [Flowbite Drawer](https://flowbite.com/docs/components/drawer/)

apps/web/content/docs/components/forms.mdx

@@ -125,7 +125,7 @@ Use the `<ToggleSwitch>` component to ask users to enable or disable an option s
 
 ## Range slider
 
-The `<RangeSlider>` component ca be used to allow users to select a number based on a minimum and maximum value.
+The `<RangeSlider>` component can be used to allow users to select a number based on a minimum and maximum value.
 
 <Example name="forms.rangeSlider" />
 

apps/web/content/docs/components/mega-menu.mdx

@@ -0,0 +1,55 @@
+---
+title: React Mega Menu - Flowbite
+description: Use the mega menu component as a full-width dropdown inside the navbar to show a list of menu items based on multiple sizes, variants, and styles.
+---
+
+The mega menu component is a full-width dropdown that can be triggered by clicking on the menu item and it shows a list of links that you can use to navigate through the pages on a website.
+
+To start using the mega menu component you need to import it from `flowbite-react`:
+
+```jsx
+import { MegaMenu } from "flowbite-react";
+```
+
+## Default mega menu
+
+Use this example to show a list of links aligned on three columns inside the mega menu dropdown.
+
+<Example name="megaMenu.root" />
+
+## Mega menu with icons
+
+This example of a mega menu dropdown can be used to also show an icon near the text of the link.
+
+<Example name="megaMenu.icons" />
+
+## Full width dropdown
+
+Use this example to show a mega menu dropdown that spans the entire width of the document page.
+
+<Example name="megaMenu.fullWidth" />
+
+## Full width with CTA
+
+This example can be used to also show a CTA button or link next to the menu items inside the dropdown.
+
+<Example name="megaMenu.fullWidthCTA" />
+
+## Full width with image
+
+This example can be used to also show a CTA with a background image inside the dropdown next to the other menu items and links.
+
+<Example name="megaMenu.fullWidthImage" />
+
+## Theme
+
+Note:
+
+- `<MegaMenu>`'s theme has all of the same options as [`<Navbar>`](https://flowbite-react.com/docs/components/navbar)'s, with slightly different defaults
+- `<MegaMenu.Dropdown toggle={..} />`'s theme, `megaMenu.dropdown.toggle`, is identical to [`<Dropdown>`](https://flowbite-react.com/docs/components/dropdown), with slightly different defaults
+
+<Theme name="megaMenu" />
+
+## References
+
+- [Flowbite Mega Menu](https://flowbite.com/docs/components/mega-menu/)

apps/web/data/docs-sidebar.ts

@@ -64,11 +64,13 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
       { title: "Card", href: "/docs/components/card" },
       { title: "Carousel", href: "/docs/components/carousel" },
       { title: "Datepicker", href: "/docs/components/datepicker", isNew: true },
+      { title: "Drawer", href: "/docs/components/drawer", isNew: true },
       { title: "Dropdown", href: "/docs/components/dropdown" },
       { title: "Footer", href: "/docs/components/footer" },
       { title: "Forms", href: "/docs/components/forms" },
       { title: "KBD", href: "/docs/components/kbd", isNew: true },
       { title: "List group", href: "/docs/components/list-group" },
+      { title: "Mega menu", href: "/docs/components/mega-menu", isNew: true },
       { title: "Modal", href: "/docs/components/modal" },
       { title: "Navbar", href: "/docs/components/navbar" },
       { title: "Pagination", href: "/docs/components/pagination" },

apps/web/examples/accordion/accordion.collapseAll.tsx

@@ -6,7 +6,7 @@ const code = `
 
 import { Accordion } from "flowbite-react";
 
-function Component() {
+export function Component() {
   return (
     <Accordion collapseAll>
       <Accordion.Panel>
@@ -83,7 +83,7 @@ function Component() {
 const codeRSC = `
 import { Accordion, AccordionContent, AccordionPanel, AccordionTitle } from "flowbite-react";
 
-function Component() {
+export function Component() {
   return (
     <Accordion collapseAll>
       <AccordionPanel>
@@ -157,7 +157,7 @@ function Component() {
 }
 `;
 
-function Component() {
+export function Component() {
   return (
     <Accordion collapseAll>
       <AccordionPanel>