diff --git a/.changeset/sour-spiders-melt.md b/.changeset/sour-spiders-melt.md
new file mode 100644
index 000000000..7938ee3d0
--- /dev/null
+++ b/.changeset/sour-spiders-melt.md
@@ -0,0 +1,6 @@
+---
+"create-flowbite-react": patch
+"flowbite-react": patch
+---
+
+update packages
diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml
index 3a4d0b032..e6b1f8531 100644
--- a/.github/actions/setup/action.yml
+++ b/.github/actions/setup/action.yml
@@ -7,7 +7,7 @@ runs:
- name: Setup Bun
uses: oven-sh/setup-bun@v1
with:
- bun-version: 1.1.0
+ bun-version: 1.1.14
- name: Setup Node
uses: actions/setup-node@v4
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
index 41effcf08..be4c03c81 100644
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@@ -11,26 +11,26 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
- "react": "18.2.0",
- "react-dom": "18.2.0"
+ "react": "18.3.1",
+ "react-dom": "18.3.1"
},
"devDependencies": {
- "@storybook/addon-essentials": "8.0.5",
- "@storybook/addon-interactions": "8.0.5",
- "@storybook/addon-links": "8.0.5",
- "@storybook/addon-themes": "8.0.5",
- "@storybook/blocks": "8.0.5",
- "@storybook/react": "8.0.5",
- "@storybook/react-vite": "8.0.5",
- "@storybook/test": "8.0.5",
- "@types/react": "18.2.73",
- "@types/react-dom": "18.2.23",
- "@vitejs/plugin-react": "4.2.1",
+ "@storybook/addon-essentials": "8.1.10",
+ "@storybook/addon-interactions": "8.1.10",
+ "@storybook/addon-links": "8.1.10",
+ "@storybook/addon-themes": "8.1.10",
+ "@storybook/blocks": "8.1.10",
+ "@storybook/react": "8.1.10",
+ "@storybook/react-vite": "8.1.10",
+ "@storybook/test": "8.1.10",
+ "@types/react": "18.3.3",
+ "@types/react-dom": "18.3.0",
+ "@vitejs/plugin-react": "4.3.1",
"autoprefixer": "10.4.19",
"postcss": "8.4.38",
- "storybook": "8.0.5",
- "tailwindcss": "3.4.3",
- "typescript": "5.4.3",
- "vite": "5.2.7"
+ "storybook": "8.1.10",
+ "tailwindcss": "3.4.4",
+ "typescript": "5.4.5",
+ "vite": "5.3.1"
}
}
diff --git a/apps/storybook/turbo.json b/apps/storybook/turbo.json
index 7df4d4ef4..5da1fb4c5 100644
--- a/apps/storybook/turbo.json
+++ b/apps/storybook/turbo.json
@@ -1,6 +1,6 @@
{
"extends": ["//"],
- "pipeline": {
+ "tasks": {
"build": {
"outputs": ["storybook-static/**"]
}
diff --git a/apps/web/components/banner.tsx b/apps/web/components/banner.tsx
index fa7aca399..d8bf6f479 100644
--- a/apps/web/components/banner.tsx
+++ b/apps/web/components/banner.tsx
@@ -1,7 +1,6 @@
import Link from "next/link";
-import type { FC } from "react";
-export const Banner: FC = () => {
+export function Banner() {
return (
{
);
-};
+}
diff --git a/apps/web/components/carbon-ads.tsx b/apps/web/components/carbon-ads.tsx
index f51c3a0f2..14603bb6e 100644
--- a/apps/web/components/carbon-ads.tsx
+++ b/apps/web/components/carbon-ads.tsx
@@ -1,7 +1,6 @@
"use client";
import { usePathname } from "next/navigation";
-import type { FC } from "react";
import { useEffect } from "react";
interface WindowWithCarbonAds extends Window {
@@ -10,7 +9,7 @@ interface WindowWithCarbonAds extends Window {
};
}
-export const CarbonAds: FC = () => {
+export function CarbonAds() {
const pathname = usePathname();
const isDevelopmentMode = process.env.NODE_ENV === "development";
@@ -38,4 +37,4 @@ export const CarbonAds: FC = () => {
);
-};
+}
diff --git a/apps/web/components/homepage/components-section.tsx b/apps/web/components/homepage/components-section.tsx
index 875eb62ef..97c2a3e0f 100644
--- a/apps/web/components/homepage/components-section.tsx
+++ b/apps/web/components/homepage/components-section.tsx
@@ -1,11 +1,11 @@
import { Button } from "flowbite-react";
import Image from "next/image";
import Link from "next/link";
-import type { ComponentProps, FC } from "react";
+import type { ComponentProps } from "react";
import { twMerge } from "tailwind-merge";
import { COMPONENTS_DATA } from "~/data/components";
-export const ComponentsSection: FC = () => {
+export function ComponentsSection() {
return (
@@ -34,7 +34,7 @@ export const ComponentsSection: FC = () => {
);
-};
+}
interface ComponentCardProps extends ComponentProps<"div"> {
link: string;
@@ -44,7 +44,7 @@ interface ComponentCardProps extends ComponentProps<"div"> {
classes: string;
}
-const ComponentCard: FC = ({ link, name, image, imageDark, classes }) => {
+function ComponentCard({ link, name, image, imageDark, classes }: ComponentCardProps) {
return (
= ({ link, name, image, imageDark, c
);
-};
+}
diff --git a/apps/web/components/homepage/contributors-section.tsx b/apps/web/components/homepage/contributors-section.tsx
index 13b38889e..6df3720b5 100644
--- a/apps/web/components/homepage/contributors-section.tsx
+++ b/apps/web/components/homepage/contributors-section.tsx
@@ -1,7 +1,6 @@
import { Tooltip } from "flowbite-react";
import Image from "next/image";
import Link from "next/link";
-import type { FC } from "react";
import { safeResJson } from "~/helpers/http";
interface Contributor {
@@ -21,7 +20,7 @@ async function fetchContributors(): Promise {
}
}
-export const ContributorsSection: FC = async () => {
+export async function ContributorsSection() {
const contributors = await fetchContributors();
return (
@@ -98,4 +97,4 @@ export const ContributorsSection: FC = async () => {
);
-};
+}
diff --git a/apps/web/components/homepage/dark-mode-section/dark-mode-section.tsx b/apps/web/components/homepage/dark-mode-section/dark-mode-section.tsx
index c2a8046c9..3a01612c2 100644
--- a/apps/web/components/homepage/dark-mode-section/dark-mode-section.tsx
+++ b/apps/web/components/homepage/dark-mode-section/dark-mode-section.tsx
@@ -1,6 +1,5 @@
import Image from "next/image";
import Link from "next/link";
-import type { FC } from "react";
import { DarkModeSwitcher } from "./dark-mode-switcher";
const feature_list = [
@@ -10,7 +9,7 @@ const feature_list = [
"High quality UI/UX design for modern applications",
];
-export const DarkModeSection: FC = () => {
+export function DarkModeSection() {
return (
@@ -95,4 +94,4 @@ export const DarkModeSection: FC = () => {
);
-};
+}
diff --git a/apps/web/components/homepage/dark-mode-section/dark-mode-switcher.tsx b/apps/web/components/homepage/dark-mode-section/dark-mode-switcher.tsx
index e006c6479..718dc3ada 100644
--- a/apps/web/components/homepage/dark-mode-section/dark-mode-switcher.tsx
+++ b/apps/web/components/homepage/dark-mode-section/dark-mode-switcher.tsx
@@ -1,9 +1,8 @@
"use client";
import { useThemeMode } from "flowbite-react";
-import type { FC } from "react";
-export const DarkModeSwitcher: FC = () => {
+export function DarkModeSwitcher() {
const { setMode } = useThemeMode();
return (
@@ -81,4 +80,4 @@ export const DarkModeSwitcher: FC = () => {
);
-};
+}
diff --git a/apps/web/components/homepage/featured-section.tsx b/apps/web/components/homepage/featured-section.tsx
index a6fa6c98b..63fef598b 100644
--- a/apps/web/components/homepage/featured-section.tsx
+++ b/apps/web/components/homepage/featured-section.tsx
@@ -1,7 +1,6 @@
import Link from "next/link";
-import type { FC } from "react";
-export const FeaturedSection: FC = () => {
+export function FeaturedSection() {
return (
@@ -143,4 +142,4 @@ export const FeaturedSection: FC = () => {
);
-};
+}
diff --git a/apps/web/components/homepage/figma-section.tsx b/apps/web/components/homepage/figma-section.tsx
index ab120ed4c..6153266f0 100644
--- a/apps/web/components/homepage/figma-section.tsx
+++ b/apps/web/components/homepage/figma-section.tsx
@@ -1,7 +1,6 @@
import Image from "next/image";
-import type { FC } from "react";
-export const FigmaSection: FC = () => {
+export function FigmaSection() {
return (
@@ -247,4 +246,4 @@ export const FigmaSection: FC = () => {
);
-};
+}
diff --git a/apps/web/components/homepage/hero-section/copy-package-input.tsx b/apps/web/components/homepage/hero-section/copy-package-input.tsx
index 53e12a919..c17f2c999 100644
--- a/apps/web/components/homepage/hero-section/copy-package-input.tsx
+++ b/apps/web/components/homepage/hero-section/copy-package-input.tsx
@@ -1,7 +1,6 @@
"use client";
import { TextInput, Tooltip } from "flowbite-react";
-import type { FC } from "react";
import { useState } from "react";
import { HiClipboardCopy } from "react-icons/hi";
@@ -9,7 +8,7 @@ interface Props {
value: string;
}
-export const CopyPackageInput: FC = ({ value }) => {
+export function CopyPackageInput({ value }: Props) {
const [isJustCopied, setJustCopied] = useState(false);
const copyToClipboard = () => {
@@ -43,4 +42,4 @@ export const CopyPackageInput: FC = ({ value }) => {
/>
);
-};
+}
diff --git a/apps/web/components/homepage/hero-section/hero-section.tsx b/apps/web/components/homepage/hero-section/hero-section.tsx
index 85ca7864d..57575d79e 100644
--- a/apps/web/components/homepage/hero-section/hero-section.tsx
+++ b/apps/web/components/homepage/hero-section/hero-section.tsx
@@ -1,11 +1,10 @@
import { Button } from "flowbite-react";
import Image from "next/image";
import Link from "next/link";
-import type { FC } from "react";
import { HiOutlineArrowRight } from "react-icons/hi";
import { CopyPackageInput } from "./copy-package-input";
-export const HeroSection: FC = () => {
+export function HeroSection() {
return (
@@ -55,4 +54,4 @@ export const HeroSection: FC = () => {
);
-};
+}
diff --git a/apps/web/components/homepage/home-navbar.tsx b/apps/web/components/homepage/home-navbar.tsx
index d1997095e..d6e3e8fd0 100644
--- a/apps/web/components/homepage/home-navbar.tsx
+++ b/apps/web/components/homepage/home-navbar.tsx
@@ -1,11 +1,10 @@
import { Navbar } from "flowbite-react";
import Image from "next/image";
import Link from "next/link";
-import type { FC } from "react";
import { DocSearchInput } from "../docsearch-input";
import { NavbarIcons, NavbarLinks } from "../navbar";
-export const HomeNavbar: FC = () => {
+export function HomeNavbar() {
return (
{
);
-};
+}
diff --git a/apps/web/components/homepage/main-footer.tsx b/apps/web/components/homepage/main-footer.tsx
index ef993f333..803ec1b48 100644
--- a/apps/web/components/homepage/main-footer.tsx
+++ b/apps/web/components/homepage/main-footer.tsx
@@ -1,9 +1,8 @@
import { Footer } from "flowbite-react";
import Image from "next/image";
import Link from "next/link";
-import type { FC } from "react";
-export const MainFooter: FC = () => {
+export function MainFooter() {
return (
);
-};
+}
diff --git a/apps/web/components/homepage/react-section.tsx b/apps/web/components/homepage/react-section.tsx
index 05069d8c9..2867c2d0c 100644
--- a/apps/web/components/homepage/react-section.tsx
+++ b/apps/web/components/homepage/react-section.tsx
@@ -1,7 +1,6 @@
import { Button } from "flowbite-react";
import Image from "next/image";
import Link from "next/link";
-import type { FC } from "react";
import { HiOutlineArrowRight } from "react-icons/hi";
const feature_list = [
@@ -13,7 +12,7 @@ const feature_list = [
"Fully accessible UI components",
];
-export const ReactSection: FC = () => {
+export function ReactSection() {
return (
@@ -89,4 +88,4 @@ export const ReactSection: FC = () => {
);
-};
+}
diff --git a/apps/web/components/homepage/social-proof-section.tsx b/apps/web/components/homepage/social-proof-section.tsx
index a4a141e3d..2c1ebd688 100644
--- a/apps/web/components/homepage/social-proof-section.tsx
+++ b/apps/web/components/homepage/social-proof-section.tsx
@@ -1,5 +1,4 @@
import Image from "next/image";
-import { type FC } from "react";
import { safeResJson } from "~/helpers/http";
async function fetchSafe(endpoint: string): Promise {
@@ -46,7 +45,7 @@ const numberWithCommas = (x: string | number) => {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
-export const SocialProofSection: FC = async () => {
+export async function SocialProofSection() {
const stargazers = numberWithCommas(await fetchStargazers());
const npmDownloads = numberWithCommas(await fetchNpmDownloads());
const discordMembers = numberWithCommas(await fetchDiscordMembers());
@@ -204,4 +203,4 @@ export const SocialProofSection: FC = async () => {
);
-};
+}
diff --git a/apps/web/components/homepage/tailwind-section.tsx b/apps/web/components/homepage/tailwind-section.tsx
index 4c1edcc76..c32e9a165 100644
--- a/apps/web/components/homepage/tailwind-section.tsx
+++ b/apps/web/components/homepage/tailwind-section.tsx
@@ -1,8 +1,7 @@
import Image from "next/image";
import Link from "next/link";
-import type { FC } from "react";
-export const TailwindSection: FC = () => {
+export function TailwindSection() {
return (
@@ -80,4 +79,4 @@ export const TailwindSection: FC = () => {
);
-};
+}
diff --git a/apps/web/components/mdx.tsx b/apps/web/components/mdx.tsx
index 6466e924e..ca79f554c 100644
--- a/apps/web/components/mdx.tsx
+++ b/apps/web/components/mdx.tsx
@@ -1,6 +1,6 @@
import { theme } from "flowbite-react";
import type { MDXComponents } from "mdx/types";
-import { getMDXComponent } from "next-contentlayer/hooks";
+import { getMDXComponent } from "next-contentlayer2/hooks";
import Link from "next/link";
import * as examples from "~/examples";
import { CodeDemo, type CodeData } from "./code-demo";
diff --git a/apps/web/components/navbar.tsx b/apps/web/components/navbar.tsx
index 76c9fb580..d788134e5 100644
--- a/apps/web/components/navbar.tsx
+++ b/apps/web/components/navbar.tsx
@@ -1,12 +1,11 @@
import { Badge, DarkThemeToggle, Tooltip } from "flowbite-react";
import Link from "next/link";
-import type { FC } from "react";
import { BsGithub } from "react-icons/bs";
import { SiDiscord, SiStorybook } from "react-icons/si";
import pkg from "../../../packages/ui/package.json";
import { DocSearchInput } from "./docsearch-input";
-export const NavbarLinks: FC = () => {
+export function NavbarLinks() {
return (
{
);
-};
+}
-export const NavbarIcons: FC = () => {
+export function NavbarIcons() {
const version = pkg?.version ?? "latest";
return (
@@ -74,11 +73,11 @@ export const NavbarIcons: FC = () => {
v{version}
);
-};
+}
diff --git a/apps/web/contentlayer.config.js b/apps/web/contentlayer.config.js
index 20a88871f..362237b99 100644
--- a/apps/web/contentlayer.config.js
+++ b/apps/web/contentlayer.config.js
@@ -1,4 +1,4 @@
-import { defineDocumentType, makeSource } from "contentlayer/source-files";
+import { defineDocumentType, makeSource } from "contentlayer2/source-files";
import toc from "markdown-toc";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
import rehypePrismPlus from "rehype-prism-plus";
diff --git a/apps/web/examples/megaMenu/megaMenu.icons.tsx b/apps/web/examples/megaMenu/megaMenu.icons.tsx
index 59cfe56f8..b6d723bdb 100644
--- a/apps/web/examples/megaMenu/megaMenu.icons.tsx
+++ b/apps/web/examples/megaMenu/megaMenu.icons.tsx
@@ -369,10 +369,7 @@ function Component() {
-
+