diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx index 6023bf889..bb47f265b 100644 --- a/app/docs/layout.tsx +++ b/app/docs/layout.tsx @@ -48,9 +48,11 @@ function DocsNavbar({ isCollapsed, setCollapsed }: DocsLayoutState) { diff --git a/components/homepage/components-section.tsx b/components/homepage/components-section.tsx index c4c44fc9b..aaa2d4f4e 100644 --- a/components/homepage/components-section.tsx +++ b/components/homepage/components-section.tsx @@ -1,5 +1,5 @@ import Link from 'next/link'; -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { COMPONENTS_DATA } from '~/data/components'; import { Button } from '~/src'; @@ -34,7 +34,7 @@ export const ComponentsSection: FC = () => { ); }; -interface ComponentCardProps extends PropsWithChildren, ComponentProps<'div'> { +interface ComponentCardProps extends ComponentProps<'div'> { link: string; name?: string; image?: string; diff --git a/components/homepage/home-navbar.tsx b/components/homepage/home-navbar.tsx index 303855fa3..b807ba6a7 100644 --- a/components/homepage/home-navbar.tsx +++ b/components/homepage/home-navbar.tsx @@ -9,9 +9,11 @@ export const HomeNavbar: FC = () => { return ( diff --git a/examples/avatar/avatar.stackedLayout.tsx b/examples/avatar/avatar.stackedLayout.tsx index d35155c05..6ed3f7864 100644 --- a/examples/avatar/avatar.stackedLayout.tsx +++ b/examples/avatar/avatar.stackedLayout.tsx @@ -1,5 +1,5 @@ import { type CodeData } from '~/components/code-demo'; -import { Avatar } from '~/src'; +import { Avatar, AvatarGroup } from '~/src'; const code = ` 'use client'; @@ -29,25 +29,25 @@ function Component() { `; const codeRSC = ` -import { Avatar } from 'flowbite-react'; +import { Avatar, AvatarGroup } from 'flowbite-react'; function Component() { return (
- + - - + + - +
); } @@ -56,20 +56,20 @@ function Component() { function Component() { return (
- + - - + + - +
); } diff --git a/examples/rating/rating.advanced.tsx b/examples/rating/rating.advanced.tsx index bcd9f5eff..68db4fb24 100644 --- a/examples/rating/rating.advanced.tsx +++ b/examples/rating/rating.advanced.tsx @@ -37,7 +37,7 @@ function Component() { `; const codeRSC = ` -import { Rating, RatingStar } from 'flowbite-react'; +import { Rating, RatingAdvanced, RatingStar } from 'flowbite-react'; function Component() { return ( diff --git a/examples/timeline/timeline.horizontal.tsx b/examples/timeline/timeline.horizontal.tsx index 323cb5bd5..1bff44e64 100644 --- a/examples/timeline/timeline.horizontal.tsx +++ b/examples/timeline/timeline.horizontal.tsx @@ -65,62 +65,62 @@ function Component() { } `; -const codeRSC = ` -import { - Button, - Timeline, - TimelineBody, - TimelineContent, - TimelineItem, - TimelinePoint, - TimelineTime, - TimelineTitle, -} from 'flowbite-react'; -import { HiArrowNarrowRight, HiCalendar } from 'react-icons/hi'; +// const codeRSC = ` +// import { +// Button, +// Timeline, +// TimelineBody, +// TimelineContent, +// TimelineItem, +// TimelinePoint, +// TimelineTime, +// TimelineTitle, +// } from 'flowbite-react'; +// import { HiArrowNarrowRight, HiCalendar } from 'react-icons/hi'; -function Component() { - return ( - - - - - February 2022 - Application UI code in Tailwind CSS - - Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order - E-commerce & Marketing pages. - - - - - - - - March 2022 - Marketing UI design in Figma - - All of the pages and components are first designed in Figma and we keep a parity between the two versions - even as we update the project. - - - - - - - April 2022 - E-Commerce UI code in Tailwind CSS - - Get started with dozens of web components and interactive elements built on top of Tailwind CSS. - - - - - ); -} -`; +// function Component() { +// return ( +// +// +// +// +// February 2022 +// Application UI code in Tailwind CSS +// +// Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order +// E-commerce & Marketing pages. +// +// +// +// +// +// +// +// March 2022 +// Marketing UI design in Figma +// +// All of the pages and components are first designed in Figma and we keep a parity between the two versions +// even as we update the project. +// +// +// +// +// +// +// April 2022 +// E-Commerce UI code in Tailwind CSS +// +// Get started with dozens of web components and interactive elements built on top of Tailwind CSS. +// +// +// +// +// ); +// } +// `; function Component() { return ( @@ -173,11 +173,11 @@ export const horizontal: CodeData = { language: 'tsx', code, }, - { - fileName: 'server', - language: 'tsx', - code: codeRSC, - }, + // { + // fileName: 'server', + // language: 'tsx', + // code: codeRSC, + // }, ], githubSlug: 'timeline/timeline.horizontal.tsx', component: , diff --git a/examples/timeline/timeline.vertical.tsx b/examples/timeline/timeline.vertical.tsx index f3c495f18..d4d012893 100644 --- a/examples/timeline/timeline.vertical.tsx +++ b/examples/timeline/timeline.vertical.tsx @@ -65,62 +65,62 @@ function Component() { } `; -const codeRSC = ` -import { - Button, - Timeline, - TimelineBody, - TimelineContent, - TimelineItem, - TimelinePoint, - TimelineTime, - TimelineTitle, -} from 'flowbite-react'; -import { HiArrowNarrowRight, HiCalendar } from 'react-icons/hi'; +// const codeRSC = ` +// import { +// Button, +// Timeline, +// TimelineBody, +// TimelineContent, +// TimelineItem, +// TimelinePoint, +// TimelineTime, +// TimelineTitle, +// } from 'flowbite-react'; +// import { HiArrowNarrowRight, HiCalendar } from 'react-icons/hi'; -function Component() { - return ( - - - - - February 2022 - Application UI code in Tailwind CSS - - Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order - E-commerce & Marketing pages. - - - - - - - - March 2022 - Marketing UI design in Figma - - All of the pages and components are first designed in Figma and we keep a parity between the two versions - even as we update the project. - - - - - - - April 2022 - E-Commerce UI code in Tailwind CSS - - Get started with dozens of web components and interactive elements built on top of Tailwind CSS. - - - - - ); -} -`; +// function Component() { +// return ( +// +// +// +// +// February 2022 +// Application UI code in Tailwind CSS +// +// Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order +// E-commerce & Marketing pages. +// +// +// +// +// +// +// +// March 2022 +// Marketing UI design in Figma +// +// All of the pages and components are first designed in Figma and we keep a parity between the two versions +// even as we update the project. +// +// +// +// +// +// +// April 2022 +// E-Commerce UI code in Tailwind CSS +// +// Get started with dozens of web components and interactive elements built on top of Tailwind CSS. +// +// +// +// +// ); +// } +// `; function Component() { return ( @@ -173,11 +173,11 @@ export const vertical: CodeData = { language: 'tsx', code, }, - { - fileName: 'server', - language: 'tsx', - code: codeRSC, - }, + // { + // fileName: 'server', + // language: 'tsx', + // code: codeRSC, + // }, ], githubSlug: 'timeline/timeline.vertical.tsx', component: , diff --git a/package.json b/package.json index e5099b7a1..74337268b 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "react-icons": "^4.10.1", "react-indiana-drag-scroll": "^2.2.0", "react-markdown": "^9.0.0", + "sharp": "^0.32.6", "tailwind-merge": "^1.13.2" }, "devDependencies": { diff --git a/src/components/Accordion/Accordion.spec.tsx b/src/components/Accordion/Accordion.spec.tsx index 2a5be9b12..55141fe93 100644 --- a/src/components/Accordion/Accordion.spec.tsx +++ b/src/components/Accordion/Accordion.spec.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'; import type { FC } from 'react'; import { HiOutlineArrowCircleDown } from 'react-icons/hi'; import { describe, expect, it } from 'vitest'; -import { Flowbite } from '../Flowbite'; +import { Flowbite, type CustomFlowbiteTheme } from '../Flowbite'; import type { AccordionProps } from './Accordion'; import { Accordion } from './Accordion'; @@ -130,7 +130,7 @@ describe('Components / Accordion', () => { describe('Theme', () => { describe('`Accordion`', () => { it('should use custom `base` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { accordion: { root: { base: 'text-4xl', @@ -148,7 +148,7 @@ describe('Components / Accordion', () => { }); it('should use custom `flush` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { accordion: { root: { flush: { @@ -177,7 +177,7 @@ describe('Components / Accordion', () => { describe('`Accordion.Content`', () => { it('should use custom `content` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { accordion: { content: { base: 'text-4xl', @@ -199,7 +199,7 @@ describe('Components / Accordion', () => { describe('`Accordion.Title`', () => { it('should use custom `title` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { accordion: { title: { arrow: { diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 7ec87f629..a88af4ea0 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -1,6 +1,6 @@ 'use client'; -import type { ComponentProps, FC, PropsWithChildren, ReactElement } from 'react'; +import type { ComponentProps, FC, ReactElement } from 'react'; import { Children, cloneElement, useMemo, useState } from 'react'; import { HiChevronDown } from 'react-icons/hi'; import { twMerge } from 'tailwind-merge'; @@ -26,7 +26,7 @@ export interface FlowbiteAccordionRootTheme { flush: FlowbiteBoolean; } -export interface AccordionProps extends PropsWithChildren> { +export interface AccordionProps extends ComponentProps<'div'> { alwaysOpen?: boolean; arrowIcon?: FC>; children: ReactElement | ReactElement[]; diff --git a/src/components/Accordion/AccordionContent.tsx b/src/components/Accordion/AccordionContent.tsx index 6f2cbe155..6cdf8b75b 100644 --- a/src/components/Accordion/AccordionContent.tsx +++ b/src/components/Accordion/AccordionContent.tsx @@ -1,6 +1,6 @@ 'use client'; -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; @@ -11,7 +11,7 @@ export interface FlowbiteAccordionComponentTheme { base: string; } -export interface AccordionContentProps extends PropsWithChildren> { +export interface AccordionContentProps extends ComponentProps<'div'> { theme?: DeepPartial; } diff --git a/src/components/Accordion/AccordionPanel.tsx b/src/components/Accordion/AccordionPanel.tsx index c513a8d9f..75cd955d9 100644 --- a/src/components/Accordion/AccordionPanel.tsx +++ b/src/components/Accordion/AccordionPanel.tsx @@ -1,11 +1,11 @@ 'use client'; -import type { FC, PropsWithChildren } from 'react'; +import type { FC } from 'react'; import { useState } from 'react'; import type { AccordionProps } from './Accordion'; import { AccordionPanelContext } from './AccordionPanelContext'; -export interface AccordionPanelProps extends PropsWithChildren { +export interface AccordionPanelProps extends AccordionProps { isOpen?: boolean; setOpen?: () => void; } diff --git a/src/components/Accordion/index.ts b/src/components/Accordion/index.ts index cad8a636b..6c4f76119 100644 --- a/src/components/Accordion/index.ts +++ b/src/components/Accordion/index.ts @@ -1,4 +1,8 @@ -export * from './Accordion'; -export * from './AccordionContent'; -export * from './AccordionPanel'; -export * from './AccordionTitle'; +export { Accordion } from './Accordion'; +export type { AccordionProps, FlowbiteAccordionRootTheme, FlowbiteAccordionTheme } from './Accordion'; +export { AccordionContent } from './AccordionContent'; +export type { AccordionContentProps, FlowbiteAccordionComponentTheme } from './AccordionContent'; +export { AccordionPanel } from './AccordionPanel'; +export type { AccordionPanelProps } from './AccordionPanel'; +export { AccordionTitle } from './AccordionTitle'; +export type { AccordionTitleProps, FlowbiteAccordionTitleTheme } from './AccordionTitle'; diff --git a/src/components/Alert/Alert.spec.tsx b/src/components/Alert/Alert.spec.tsx index 51681983c..179b24ff0 100644 --- a/src/components/Alert/Alert.spec.tsx +++ b/src/components/Alert/Alert.spec.tsx @@ -4,7 +4,7 @@ import type { FC } from 'react'; import { useState } from 'react'; import { HiEye, HiHeart, HiInformationCircle } from 'react-icons/hi'; import { describe, expect, it, vi } from 'vitest'; -import { Flowbite } from '../Flowbite'; +import { Flowbite, type CustomFlowbiteTheme } from '../Flowbite'; import type { AlertProps } from './Alert'; import { Alert } from './Alert'; @@ -19,7 +19,7 @@ describe.concurrent('Components / Alert', () => { describe('Theme', () => { it('should use custom `base` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { alert: { color: { info: 'text-purple-100', @@ -36,7 +36,7 @@ describe.concurrent('Components / Alert', () => { }); it('should use custom `borderAccent` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { alert: { borderAccent: 'border-t-4 border-purple-500', }, @@ -51,7 +51,7 @@ describe.concurrent('Components / Alert', () => { }); it('should use custom `wrapper` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { alert: { wrapper: 'flex items-center', }, @@ -66,7 +66,7 @@ describe.concurrent('Components / Alert', () => { }); it('should use custom `color` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { alert: { closeButton: { color: { @@ -93,7 +93,7 @@ describe.concurrent('Components / Alert', () => { }); it('should use custom `icon`', () => { - const theme = { + const theme: CustomFlowbiteTheme = { alert: { icon: 'alert-custom-icon', }, @@ -108,7 +108,7 @@ describe.concurrent('Components / Alert', () => { }); it('should show custom `rounded` class', () => { - const theme = { + const theme: CustomFlowbiteTheme = { alert: { rounded: 'rounded', }, diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx index 7ae65c4c8..7eea6a794 100644 --- a/src/components/Alert/Alert.tsx +++ b/src/components/Alert/Alert.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react'; +import type { ComponentProps, FC, ReactNode } from 'react'; import { HiX } from 'react-icons/hi'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; @@ -22,7 +22,7 @@ export interface FlowbiteAlertCloseButtonTheme { icon: string; } -export interface AlertProps extends PropsWithChildren, 'color'>> { +export interface AlertProps extends Omit, 'color'> { additionalContent?: ReactNode; color?: keyof FlowbiteColors; icon?: FC>; diff --git a/src/components/Alert/index.ts b/src/components/Alert/index.ts index 79e3b155f..aef1d8b0a 100644 --- a/src/components/Alert/index.ts +++ b/src/components/Alert/index.ts @@ -1 +1,2 @@ -export * from './Alert'; +export { Alert } from './Alert'; +export type { AlertProps, FlowbiteAlertCloseButtonTheme, FlowbiteAlertTheme } from './Alert'; diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index e52961442..99bfbd4cc 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, PropsWithChildren, ReactElement } from 'react'; +import type { ComponentProps, FC, ReactElement } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; @@ -61,7 +61,7 @@ export interface AvatarImageProps { 'data-testid': string; } -export interface AvatarProps extends PropsWithChildren, 'color'>> { +export interface AvatarProps extends Omit, 'color'> { alt?: string; bordered?: boolean; img?: string | ((props: AvatarImageProps) => ReactElement); @@ -162,6 +162,7 @@ const AvatarComponent: FC = ({ }; AvatarComponent.displayName = 'Avatar'; + export const Avatar = Object.assign(AvatarComponent, { Group: AvatarGroup, Counter: AvatarGroupCounter, diff --git a/src/components/Avatar/AvatarGroup.tsx b/src/components/Avatar/AvatarGroup.tsx index c0d0674db..9fd1e22dc 100644 --- a/src/components/Avatar/AvatarGroup.tsx +++ b/src/components/Avatar/AvatarGroup.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, PropsWithChildren } from 'react'; +import type { ComponentProps } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; @@ -8,7 +8,7 @@ export interface FlowbiteAvatarGroupTheme { base: string; } -export interface AvatarGroupProps extends PropsWithChildren> { +export interface AvatarGroupProps extends ComponentProps<'div'> { theme?: DeepPartial; } diff --git a/src/components/Avatar/AvatarGroupCounter.tsx b/src/components/Avatar/AvatarGroupCounter.tsx index 3f166a5ee..ad28dcd21 100644 --- a/src/components/Avatar/AvatarGroupCounter.tsx +++ b/src/components/Avatar/AvatarGroupCounter.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; @@ -8,7 +8,7 @@ export interface FlowbiteAvatarGroupCounterTheme { base: string; } -export interface AvatarGroupCounterProps extends PropsWithChildren> { +export interface AvatarGroupCounterProps extends ComponentProps<'a'> { theme?: DeepPartial; total?: number; } diff --git a/src/components/Avatar/index.ts b/src/components/Avatar/index.ts index 2f3438387..467c73c3f 100644 --- a/src/components/Avatar/index.ts +++ b/src/components/Avatar/index.ts @@ -1,3 +1,16 @@ -export * from './Avatar'; +export { Avatar } from './Avatar'; +export type { + AvatarColors, + AvatarImageProps, + AvatarProps, + AvatarSizes, + FlowbiteAvatarImageTheme, + FlowbiteAvatarInitialsTheme, + FlowbiteAvatarRootTheme, + FlowbiteAvatarStatusTheme, + FlowbiteAvatarTheme, +} from './Avatar'; +export { AvatarGroup } from './AvatarGroup'; export type { AvatarGroupProps, FlowbiteAvatarGroupTheme } from './AvatarGroup'; +export { AvatarGroupCounter } from './AvatarGroupCounter'; export type { AvatarGroupCounterProps, FlowbiteAvatarGroupCounterTheme } from './AvatarGroupCounter'; diff --git a/src/components/Badge/Badge.spec.tsx b/src/components/Badge/Badge.spec.tsx index 5635fdfa4..a675e18d3 100644 --- a/src/components/Badge/Badge.spec.tsx +++ b/src/components/Badge/Badge.spec.tsx @@ -1,7 +1,7 @@ import { render, screen } from '@testing-library/react'; import { HiCheck } from 'react-icons/hi'; import { describe, expect, it } from 'vitest'; -import { Flowbite } from '../Flowbite'; +import { Flowbite, type CustomFlowbiteTheme } from '../Flowbite'; import { Badge } from './Badge'; describe('Components / Badge', () => { @@ -30,7 +30,7 @@ describe('Components / Badge', () => { describe('Theme', () => { it('should use custom colors', () => { - const theme = { + const theme: CustomFlowbiteTheme = { badge: { root: { color: { @@ -54,7 +54,7 @@ describe('Components / Badge', () => { }); it('should use custom sizes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { badge: { root: { size: { diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 2bf8c7e58..4d582da1f 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; @@ -25,7 +25,7 @@ export interface BadgeSizes extends Pick { [key: string]: string; } -export interface BadgeProps extends PropsWithChildren, 'color'>> { +export interface BadgeProps extends Omit, 'color'> { color?: keyof FlowbiteColors; href?: string; icon?: FC>; diff --git a/src/components/Badge/index.ts b/src/components/Badge/index.ts index 9c8edca28..6dda3e230 100644 --- a/src/components/Badge/index.ts +++ b/src/components/Badge/index.ts @@ -1 +1,8 @@ -export * from './Badge'; +export { Badge } from './Badge'; +export type { + BadgeProps, + BadgeSizes, + FlowbiteBadgeIconTheme, + FlowbiteBadgeRootTheme, + FlowbiteBadgeTheme, +} from './Badge'; diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx index 9888d202a..9f3fcd046 100644 --- a/src/components/Banner/Banner.tsx +++ b/src/components/Banner/Banner.tsx @@ -12,6 +12,7 @@ const BannerComponent: FC = ({ children, ...props }) => { }; BannerComponent.displayName = 'Banner'; + export const Banner = Object.assign(BannerComponent, { CollapseButton: BannerCollapseButton, }); diff --git a/src/components/Banner/index.ts b/src/components/Banner/index.ts index 5cb1f566f..178f13f74 100644 --- a/src/components/Banner/index.ts +++ b/src/components/Banner/index.ts @@ -1,2 +1,4 @@ -export * from './Banner'; -export * from './BannerCollapseButton'; +export { Banner } from './Banner'; +export type { BannerComponentProps } from './Banner'; +export { BannerCollapseButton } from './BannerCollapseButton'; +export type { BannerCollapseButtonProps } from './BannerCollapseButton'; diff --git a/src/components/Blockquote/Blockquote.spec.tsx b/src/components/Blockquote/Blockquote.spec.tsx index 8716a7431..f721b1d87 100644 --- a/src/components/Blockquote/Blockquote.spec.tsx +++ b/src/components/Blockquote/Blockquote.spec.tsx @@ -1,12 +1,12 @@ import { render, screen } from '@testing-library/react'; import { describe, expect, it } from 'vitest'; -import { Flowbite } from '../../'; +import { Flowbite, type CustomFlowbiteTheme } from '../Flowbite'; import { Blockquote } from './Blockquote'; describe('Components / Blockquote', () => { describe('Theme', () => { it('should use custom `base` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { blockquote: { root: { base: 'bg-yellow-400 dark:bg-yellow-40', diff --git a/src/components/Blockquote/Blockquote.tsx b/src/components/Blockquote/Blockquote.tsx index 9c31d2cb4..2f23bed12 100644 --- a/src/components/Blockquote/Blockquote.tsx +++ b/src/components/Blockquote/Blockquote.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; @@ -12,7 +12,7 @@ export interface FlowbiteBlockquoteRootTheme { base: string; } -export interface BlockquoteProps extends PropsWithChildren> { +export interface BlockquoteProps extends ComponentProps<'blockquote'> { theme?: DeepPartial; } diff --git a/src/components/Blockquote/index.ts b/src/components/Blockquote/index.ts index e16e2f06f..f624c82d9 100644 --- a/src/components/Blockquote/index.ts +++ b/src/components/Blockquote/index.ts @@ -1 +1,2 @@ -export * from './Blockquote'; +export { Blockquote } from './Blockquote'; +export type { BlockquoteProps, FlowbiteBlockquoteRootTheme, FlowbiteBlockquoteTheme } from './Blockquote'; diff --git a/src/components/Breadcrumb/Breadcrumb.spec.tsx b/src/components/Breadcrumb/Breadcrumb.spec.tsx index e91e31e97..8a9b5ea6e 100644 --- a/src/components/Breadcrumb/Breadcrumb.spec.tsx +++ b/src/components/Breadcrumb/Breadcrumb.spec.tsx @@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'; import type { FC } from 'react'; import { HiHome } from 'react-icons/hi'; import { describe, expect, it } from 'vitest'; -import { Flowbite } from '../Flowbite'; +import { Flowbite, type CustomFlowbiteTheme } from '../Flowbite'; import { Breadcrumb } from './Breadcrumb'; describe('Components / Breadcrumb', () => { @@ -40,7 +40,7 @@ describe('Components / Breadcrumb', () => { }); it('should use custom list classes via theme={}', () => { - const theme = { + const theme: CustomFlowbiteTheme = { breadcrumb: { root: { list: 'gap-6', @@ -57,7 +57,7 @@ describe('Components / Breadcrumb', () => { }); it('should use custom item classes via theme={}', () => { - const theme = { + const theme: CustomFlowbiteTheme = { breadcrumb: { item: { base: 'justify-center', diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx index 7f9654c99..0d11dcb71 100644 --- a/src/components/Breadcrumb/Breadcrumb.tsx +++ b/src/components/Breadcrumb/Breadcrumb.tsx @@ -36,4 +36,7 @@ const BreadcrumbComponent: FC = ({ }; BreadcrumbComponent.displayName = 'Breadcrumb'; -export const Breadcrumb = Object.assign(BreadcrumbComponent, { Item: BreadcrumbItem }); + +export const Breadcrumb = Object.assign(BreadcrumbComponent, { + Item: BreadcrumbItem, +}); diff --git a/src/components/Breadcrumb/BreadcrumbItem.tsx b/src/components/Breadcrumb/BreadcrumbItem.tsx index c87d192ac..a7f782283 100644 --- a/src/components/Breadcrumb/BreadcrumbItem.tsx +++ b/src/components/Breadcrumb/BreadcrumbItem.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { forwardRef } from 'react'; import { HiOutlineChevronRight } from 'react-icons/hi'; import { twMerge } from 'tailwind-merge'; @@ -14,7 +14,7 @@ export interface FlowbiteBreadcrumbItemTheme { icon: string; } -export interface BreadcrumbItemProps extends PropsWithChildren, 'ref'>> { +export interface BreadcrumbItemProps extends Omit, 'ref'> { href?: string; icon?: FC>; theme?: DeepPartial; diff --git a/src/components/Breadcrumb/index.ts b/src/components/Breadcrumb/index.ts index bbcf4456d..deb9b870e 100644 --- a/src/components/Breadcrumb/index.ts +++ b/src/components/Breadcrumb/index.ts @@ -1,2 +1,4 @@ -export * from './Breadcrumb'; -export * from './BreadcrumbItem'; +export { Breadcrumb } from './Breadcrumb'; +export type { BreadcrumbComponentProps, FlowbiteBreadcrumbRootTheme, FlowbiteBreadcrumbTheme } from './Breadcrumb'; +export { BreadcrumbItem } from './BreadcrumbItem'; +export type { BreadcrumbItemProps, FlowbiteBreadcrumbItemTheme } from './BreadcrumbItem'; diff --git a/src/components/Button/Button.spec.tsx b/src/components/Button/Button.spec.tsx index 933073686..1c7c56310 100644 --- a/src/components/Button/Button.spec.tsx +++ b/src/components/Button/Button.spec.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'; import type { PropsWithChildren } from 'react'; import { AiOutlineLoading } from 'react-icons/ai'; import { describe, expect, it, vi } from 'vitest'; -import { Flowbite } from '../Flowbite'; +import { Flowbite, type CustomFlowbiteTheme } from '../Flowbite'; import { Button } from './Button'; describe('Components / Button', () => { @@ -182,7 +182,7 @@ describe('Components / Button', () => { describe('Theme', () => { it('should use `base` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { button: { base: 'font-extralight', }, @@ -198,7 +198,7 @@ describe('Components / Button', () => { }); it('should use `color` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { button: { color: { primary: 'bg-red-300', @@ -216,7 +216,7 @@ describe('Components / Button', () => { }); it('should use `disabled` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { button: { disabled: 'opacity-10', }, @@ -232,7 +232,7 @@ describe('Components / Button', () => { }); it('should use `gradient` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { button: { gradient: { yellowToPink: 'font-extralight', @@ -250,7 +250,7 @@ describe('Components / Button', () => { }); it('should use `gradientDuoTone` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { button: { gradientDuoTone: { yellowToPink: 'font-extralight', @@ -268,7 +268,7 @@ describe('Components / Button', () => { }); it('should use `inner` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { button: { inner: { base: 'font-extralight', @@ -288,7 +288,7 @@ describe('Components / Button', () => { }); it('should use `label` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { button: { label: 'font-extralight', }, @@ -306,7 +306,7 @@ describe('Components / Button', () => { }); it('should use `outline` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { button: { outline: { off: 'font-extralight', @@ -339,7 +339,7 @@ describe('Components / Button', () => { }); it('should use `pill` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { button: { pill: { off: 'font-extralight', @@ -363,7 +363,7 @@ describe('Components / Button', () => { }); it('should use `size` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { button: { size: { xxl: 'font-extrabold', diff --git a/src/components/Button/ButtonGroup.spec.tsx b/src/components/Button/ButtonGroup.spec.tsx index c094f1d25..4c83bc530 100644 --- a/src/components/Button/ButtonGroup.spec.tsx +++ b/src/components/Button/ButtonGroup.spec.tsx @@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; import { theme } from '../../theme'; -import { Flowbite } from '../Flowbite'; +import { Flowbite, type CustomFlowbiteTheme } from '../Flowbite'; import { Button } from './Button'; describe('Components / Button group', () => { @@ -92,7 +92,7 @@ describe('Components / Button group', () => { describe('Theme', () => { it('should use `base` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { buttonGroup: { base: 'text-gray-400', }, @@ -112,7 +112,7 @@ describe('Components / Button group', () => { }); it('should use `position` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { buttonGroup: { base: 'text-gray-400', }, diff --git a/src/components/Button/ButtonGroup.tsx b/src/components/Button/ButtonGroup.tsx index 79b189b61..0016b6c77 100644 --- a/src/components/Button/ButtonGroup.tsx +++ b/src/components/Button/ButtonGroup.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, PropsWithChildren, ReactElement } from 'react'; +import type { ComponentProps, FC, ReactElement } from 'react'; import { Children, cloneElement, useMemo } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; @@ -18,10 +18,7 @@ export interface PositionInButtonGroup { end: string; } -export interface ButtonGroupProps - extends ComponentProps<'div'>, - PropsWithChildren, - Pick { +export interface ButtonGroupProps extends ComponentProps<'div'>, Pick { theme?: DeepPartial; } diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts index 8caf62b83..ed9dd76fa 100644 --- a/src/components/Button/index.ts +++ b/src/components/Button/index.ts @@ -1,2 +1,14 @@ -export * from './Button'; -export * from './ButtonGroup'; +export { Button } from './Button'; +export type { + ButtonColors, + ButtonGradientColors, + ButtonGradientDuoToneColors, + ButtonOutlineColors, + ButtonProps, + ButtonSizes, + FlowbiteButtonInnerTheme, + FlowbiteButtonOutlineTheme, + FlowbiteButtonTheme, +} from './Button'; +export { ButtonGroup } from './ButtonGroup'; +export type { ButtonGroupProps, FlowbiteButtonGroupTheme, PositionInButtonGroup } from './ButtonGroup'; diff --git a/src/components/Card/Card.spec.tsx b/src/components/Card/Card.spec.tsx index 40c59b0e3..354bb3d05 100644 --- a/src/components/Card/Card.spec.tsx +++ b/src/components/Card/Card.spec.tsx @@ -1,6 +1,6 @@ import { render, screen } from '@testing-library/react'; import { describe, expect, it, vi } from 'vitest'; -import { Flowbite } from '../Flowbite'; +import { Flowbite, type CustomFlowbiteTheme } from '../Flowbite'; import { Card } from './Card'; describe('Components / Card', () => { @@ -77,7 +77,7 @@ describe('Components / Card', () => { describe('Theme', () => { it('should use `base` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { card: { root: { base: 'text-cyan-100', @@ -94,7 +94,7 @@ describe('Components / Card', () => { }); it('should use `children` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { card: { root: { children: 'text-cyan-900', @@ -114,7 +114,7 @@ describe('Components / Card', () => { }); it('should use `horizontal` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { card: { root: { horizontal: { @@ -138,7 +138,7 @@ describe('Components / Card', () => { }); it('should use `href` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { card: { root: { href: 'text-cyan-700', @@ -155,7 +155,7 @@ describe('Components / Card', () => { }); it('should use `img` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { card: { img: { base: 'text-cyan-400', diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 6b132d0df..02e33bc3e 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { omit } from '../../helpers/omit'; @@ -23,7 +23,7 @@ export interface FlowbiteCardImageTheme { horizontal: FlowbiteBoolean; } -interface CommonCardProps extends PropsWithChildren> { +interface CommonCardProps extends ComponentProps<'div'> { horizontal?: boolean; href?: string; /** Overwrites the theme. Will be merged with the context theme. diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts index ca0b06047..66b3bd1a0 100644 --- a/src/components/Card/index.ts +++ b/src/components/Card/index.ts @@ -1 +1,2 @@ -export * from './Card'; +export { Card } from './Card'; +export type { CardProps, FlowbiteCardImageTheme, FlowbiteCardRootTheme, FlowbiteCardTheme } from './Card'; diff --git a/src/components/Carousel/Carousel.tsx b/src/components/Carousel/Carousel.tsx index 38b827121..11204aa65 100644 --- a/src/components/Carousel/Carousel.tsx +++ b/src/components/Carousel/Carousel.tsx @@ -1,6 +1,6 @@ 'use client'; -import type { ComponentProps, FC, PropsWithChildren, ReactElement, ReactNode } from 'react'; +import type { ComponentProps, FC, ReactElement, ReactNode } from 'react'; import { Children, cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { HiOutlineChevronLeft, HiOutlineChevronRight } from 'react-icons/hi'; import ScrollContainer from 'react-indiana-drag-scroll'; @@ -46,7 +46,7 @@ export interface FlowbiteCarouselScrollContainer { snap: string; } -export interface CarouselProps extends PropsWithChildren> { +export interface CarouselProps extends ComponentProps<'div'> { indicators?: boolean; leftControl?: ReactNode; rightControl?: ReactNode; @@ -57,7 +57,7 @@ export interface CarouselProps extends PropsWithChildren> pauseOnHover?: boolean; } -export interface DefaultLeftRightControlProps extends PropsWithChildren> { +export interface DefaultLeftRightControlProps extends ComponentProps<'div'> { theme?: DeepPartial; } diff --git a/src/components/Carousel/index.ts b/src/components/Carousel/index.ts index c0ab19964..cf27e7b78 100644 --- a/src/components/Carousel/index.ts +++ b/src/components/Carousel/index.ts @@ -1 +1,11 @@ -export * from './Carousel'; +export { Carousel } from './Carousel'; +export type { + CarouselProps, + DefaultLeftRightControlProps, + FlowbiteCarouselControlTheme, + FlowbiteCarouselIndicatorsTheme, + FlowbiteCarouselItemTheme, + FlowbiteCarouselRootTheme, + FlowbiteCarouselScrollContainer, + FlowbiteCarouselTheme, +} from './Carousel'; diff --git a/src/components/Checkbox/Checkbox.spec.tsx b/src/components/Checkbox/Checkbox.spec.tsx index 87da064f8..cbd4af414 100644 --- a/src/components/Checkbox/Checkbox.spec.tsx +++ b/src/components/Checkbox/Checkbox.spec.tsx @@ -1,6 +1,6 @@ import { render, screen } from '@testing-library/react'; import { describe, expect, it } from 'vitest'; -import { Flowbite } from '../Flowbite'; +import { Flowbite, type CustomFlowbiteTheme } from '../Flowbite'; import { Checkbox } from './Checkbox'; describe.concurrent('Components / Checkbox', () => { @@ -14,7 +14,7 @@ describe.concurrent('Components / Checkbox', () => { describe('Theme', () => { it('should use custom `base` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { checkbox: { root: { base: 'bg-yellow-400 dark:bg-yellow-40', diff --git a/src/components/Checkbox/index.ts b/src/components/Checkbox/index.ts index f5c939faf..1e25c5721 100644 --- a/src/components/Checkbox/index.ts +++ b/src/components/Checkbox/index.ts @@ -1 +1,2 @@ -export * from './Checkbox'; +export { Checkbox } from './Checkbox'; +export type { CheckboxProps, FlowbiteCheckboxRootTheme, FlowbiteCheckboxTheme } from './Checkbox'; diff --git a/src/components/DarkThemeToggle/index.ts b/src/components/DarkThemeToggle/index.ts index 34eec0ca9..c1a5d6667 100644 --- a/src/components/DarkThemeToggle/index.ts +++ b/src/components/DarkThemeToggle/index.ts @@ -1 +1,6 @@ -export * from './DarkThemeToggle'; +export { DarkThemeToggle } from './DarkThemeToggle'; +export type { + DarkThemeToggleProps, + FlowbiteDarkThemeToggleRootTheme, + FlowbiteDarkThemeToggleTheme, +} from './DarkThemeToggle'; diff --git a/src/components/Datepicker/Datepicker.tsx b/src/components/Datepicker/Datepicker.tsx index de5cd7676..a793bf46a 100644 --- a/src/components/Datepicker/Datepicker.tsx +++ b/src/components/Datepicker/Datepicker.tsx @@ -214,6 +214,7 @@ export const Datepicker: FC = ({ return ( = ({ theme: customTheme = {} }) => { - const theme = mergeDeep(getTheme().datepicker.views.days, customTheme); + const { + theme: rootTheme, + weekStart, + minDate, + maxDate, + viewDate, + selectedDate, + changeSelectedDate, + language, + } = useDatePickerContext(); - const { weekStart, minDate, maxDate, viewDate, selectedDate, changeSelectedDate, language } = useDatePickerContext(); + const theme = mergeDeep(rootTheme.views.days, customTheme); const weekDays = getWeekDays(language, weekStart); const startDate = getFirstDayOfTheMonth(viewDate, weekStart); diff --git a/src/components/Datepicker/Views/Decades.tsx b/src/components/Datepicker/Views/Decades.tsx index 134bddf42..3b78f360c 100644 --- a/src/components/Datepicker/Views/Decades.tsx +++ b/src/components/Datepicker/Views/Decades.tsx @@ -1,7 +1,6 @@ import type { FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../../helpers/merge-deep'; -import { getTheme } from '../../../theme-store'; import { useDatePickerContext } from '../DatepickerContext'; import { Views, addYears, isDateInDecade, isDateInRange, startOfYearPeriod } from '../helpers'; @@ -21,8 +20,9 @@ export interface DatepickerViewsDecadesProps { } export const DatepickerViewsDecades: FC = ({ theme: customTheme = {} }) => { - const theme = mergeDeep(getTheme().datepicker.views.decades, customTheme); - const { selectedDate, viewDate, setViewDate, setView } = useDatePickerContext(); + const { theme: rootTheme, selectedDate, viewDate, setViewDate, setView } = useDatePickerContext(); + + const theme = mergeDeep(rootTheme.views.decades, customTheme); return (
diff --git a/src/components/Datepicker/Views/Months.tsx b/src/components/Datepicker/Views/Months.tsx index dfb72428d..5c2163b9b 100644 --- a/src/components/Datepicker/Views/Months.tsx +++ b/src/components/Datepicker/Views/Months.tsx @@ -1,7 +1,6 @@ import type { FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../../helpers/merge-deep'; -import { getTheme } from '../../../theme-store'; import { useDatePickerContext } from '../DatepickerContext'; import { Views, getFormattedDate, isDateEqual, isDateInRange } from '../helpers'; @@ -21,9 +20,18 @@ export interface DatepickerViewsMonthsProps { } export const DatepickerViewsMonth: FC = ({ theme: customTheme = {} }) => { - const theme = mergeDeep(getTheme().datepicker.views.months, customTheme); + const { + theme: rootTheme, + minDate, + maxDate, + selectedDate, + viewDate, + language, + setViewDate, + setView, + } = useDatePickerContext(); - const { minDate, maxDate, selectedDate, viewDate, language, setViewDate, setView } = useDatePickerContext(); + const theme = mergeDeep(rootTheme.views.months, customTheme); return (
diff --git a/src/components/Datepicker/Views/Years.tsx b/src/components/Datepicker/Views/Years.tsx index 1ad723342..d64c81cb0 100644 --- a/src/components/Datepicker/Views/Years.tsx +++ b/src/components/Datepicker/Views/Years.tsx @@ -3,7 +3,6 @@ import type { FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../../helpers/merge-deep'; -import { getTheme } from '../../../theme-store'; import { useDatePickerContext } from '../DatepickerContext'; import { Views, isDateEqual, isDateInRange, startOfYearPeriod } from '../helpers'; @@ -23,8 +22,9 @@ export interface DatepickerViewsYearsProps { } export const DatepickerViewsYears: FC = ({ theme: customTheme = {} }) => { - const theme = mergeDeep(getTheme().datepicker.views.years, customTheme); - const { selectedDate, minDate, maxDate, viewDate, setViewDate, setView } = useDatePickerContext(); + const { theme: rootTheme, selectedDate, minDate, maxDate, viewDate, setViewDate, setView } = useDatePickerContext(); + + const theme = mergeDeep(rootTheme.views.years, customTheme); return (
diff --git a/src/components/Datepicker/index.ts b/src/components/Datepicker/index.ts index 51fab20a4..6202ebdab 100644 --- a/src/components/Datepicker/index.ts +++ b/src/components/Datepicker/index.ts @@ -1,2 +1,3 @@ -export * from './Datepicker'; +export { Datepicker } from './Datepicker'; +export type { DatepickerProps, FlowbiteDatepickerPopupTheme, FlowbiteDatepickerTheme } from './Datepicker'; export { WeekStart } from './helpers'; diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 6489038b5..8398785b1 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -8,7 +8,6 @@ import type { FC, HTMLProps, MutableRefObject, - PropsWithChildren, ReactElement, ReactNode, RefCallback, @@ -42,10 +41,7 @@ export interface FlowbiteDropdownTheme { arrowIcon: string; } -export interface DropdownProps - extends PropsWithChildren, - Pick, - Omit { +export interface DropdownProps extends Pick, Omit { arrowIcon?: boolean; dismissOnClick?: boolean; floatingArrow?: boolean; @@ -190,7 +186,7 @@ const DropdownComponent: FC = ({ }, [placement]); return ( - <> + = ({ {label} {arrowIcon && } - - {open && ( - -
- -
    - {children} -
- -
- - )} - - + {open && ( + +
+ +
    + {children} +
+ +
+ + )} + ); }; diff --git a/src/components/Dropdown/DropdownContext.tsx b/src/components/Dropdown/DropdownContext.tsx index 43a177d2c..a9032bea5 100644 --- a/src/components/Dropdown/DropdownContext.tsx +++ b/src/components/Dropdown/DropdownContext.tsx @@ -2,11 +2,10 @@ import type { useInteractions } from '@floating-ui/react'; import { createContext, useContext } from 'react'; -import type { DeepPartial } from '../../types'; import type { FlowbiteDropdownTheme } from './Dropdown'; type DropdownContext = { - theme?: DeepPartial; + theme: FlowbiteDropdownTheme; activeIndex: number | null; dismissOnClick?: boolean; getItemProps: ReturnType['getItemProps']; diff --git a/src/components/Dropdown/DropdownDivider.tsx b/src/components/Dropdown/DropdownDivider.tsx index c343a1046..6bf1175ac 100644 --- a/src/components/Dropdown/DropdownDivider.tsx +++ b/src/components/Dropdown/DropdownDivider.tsx @@ -14,9 +14,9 @@ export type DropdownDividerProps = { } & ComponentProps<'div'>; export const DropdownDivider: FC = ({ className, theme: customTheme = {}, ...props }) => { - const { theme: dropdownTheme } = useDropdownContext(); + const { theme: rootTheme } = useDropdownContext(); - const theme = customTheme.divider ?? dropdownTheme?.floating?.divider; + const theme = customTheme.divider ?? rootTheme.floating.divider; return
; }; diff --git a/src/components/Dropdown/DropdownHeader.tsx b/src/components/Dropdown/DropdownHeader.tsx index 27e627cda..e351c86ad 100644 --- a/src/components/Dropdown/DropdownHeader.tsx +++ b/src/components/Dropdown/DropdownHeader.tsx @@ -1,6 +1,6 @@ 'use client'; -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import type { DeepPartial } from '../../types'; import { useDropdownContext } from './DropdownContext'; @@ -10,15 +10,14 @@ export interface FlowbiteDropdownHeaderTheme { header: string; } -export type DropdownHeaderProps = { +export interface DropdownHeaderProps extends ComponentProps<'div'> { theme?: DeepPartial; -} & PropsWithChildren & - ComponentProps<'div'>; +} export const DropdownHeader: FC = ({ children, className, theme: customTheme = {}, ...props }) => { - const { theme: dropdownTheme } = useDropdownContext(); + const { theme: rootTheme } = useDropdownContext(); - const theme = customTheme.header ?? dropdownTheme?.floating?.header; + const theme = customTheme.header ?? rootTheme.floating.header; return ( <> diff --git a/src/components/Dropdown/DropdownItem.tsx b/src/components/Dropdown/DropdownItem.tsx index dc2d13d9e..673304c62 100644 --- a/src/components/Dropdown/DropdownItem.tsx +++ b/src/components/Dropdown/DropdownItem.tsx @@ -32,9 +32,9 @@ export const DropdownItem = ({ ...props }: DropdownItemProps) => { const { ref, index } = useListItem({ label: typeof children === 'string' ? children : undefined }); - const { theme: dropdownTheme, activeIndex, dismissOnClick, getItemProps, handleSelect } = useDropdownContext(); + const { theme: rootTheme, activeIndex, dismissOnClick, getItemProps, handleSelect } = useDropdownContext(); const isActive = activeIndex === index; - const theme = mergeDeep(dropdownTheme?.floating?.item ?? {}, customTheme); + const theme = mergeDeep(rootTheme.floating.item, customTheme); const theirProps = props as ButtonBaseProps; diff --git a/src/components/Dropdown/index.ts b/src/components/Dropdown/index.ts index 0afc46c04..aba5d9215 100644 --- a/src/components/Dropdown/index.ts +++ b/src/components/Dropdown/index.ts @@ -1,4 +1,8 @@ -export * from './Dropdown'; -export * from './DropdownDivider'; -export * from './DropdownHeader'; -export * from './DropdownItem'; +export { Dropdown } from './Dropdown'; +export type { DropdownProps, FlowbiteDropdownFloatingTheme, FlowbiteDropdownTheme, TriggerProps } from './Dropdown'; +export { DropdownDivider } from './DropdownDivider'; +export type { DropdownDividerProps, FlowbiteDropdownDividerTheme } from './DropdownDivider'; +export { DropdownHeader } from './DropdownHeader'; +export type { DropdownHeaderProps, FlowbiteDropdownHeaderTheme } from './DropdownHeader'; +export { DropdownItem } from './DropdownItem'; +export type { DropdownItemProps, FlowbiteDropdownItemTheme } from './DropdownItem'; diff --git a/src/components/FileInput/index.ts b/src/components/FileInput/index.ts index 660f279c4..5d22fe09c 100644 --- a/src/components/FileInput/index.ts +++ b/src/components/FileInput/index.ts @@ -1 +1,8 @@ -export * from './FileInput'; +export { FileInput } from './FileInput'; +export type { + FileInputProps, + FlowbiteFileInputFieldInputTheme, + FlowbiteFileInputFieldTheme, + FlowbiteFileInputRootTheme, + FlowbiteFileInputTheme, +} from './FileInput'; diff --git a/src/components/Floating/Floating.tsx b/src/components/Floating/Floating.tsx index 21e3d7bcf..00c5237e0 100644 --- a/src/components/Floating/Floating.tsx +++ b/src/components/Floating/Floating.tsx @@ -2,7 +2,7 @@ import type { Placement } from '@floating-ui/core'; import { autoUpdate, useFocus } from '@floating-ui/react'; -import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react'; +import type { ComponentProps, FC, ReactNode } from 'react'; import { useEffect, useRef, useState } from 'react'; import { twMerge } from 'tailwind-merge'; import { useBaseFLoating, useFloatingInteractions } from '../../hooks/use-floating'; @@ -34,7 +34,7 @@ export interface FlowbiteFloatingArrowTheme { export type FloatingStyle = 'dark' | 'light' | 'auto'; -export interface FloatingProps extends PropsWithChildren, Omit, 'content' | 'style'> { +export interface FloatingProps extends Omit, 'content' | 'style'> { animation?: false | `duration-${number}`; arrow?: boolean; content: ReactNode; diff --git a/src/components/Floating/index.ts b/src/components/Floating/index.ts index c1b773eaf..d3caa9746 100644 --- a/src/components/Floating/index.ts +++ b/src/components/Floating/index.ts @@ -1,2 +1,2 @@ -export * from './Floating'; -export type { FloatingProps } from './Floating'; +export { Floating } from './Floating'; +export type { FloatingProps, FloatingStyle, FlowbiteFloatingArrowTheme, FlowbiteFloatingTheme } from './Floating'; diff --git a/src/components/FloatingLabel/index.ts b/src/components/FloatingLabel/index.ts index cd636f863..d50eb7163 100644 --- a/src/components/FloatingLabel/index.ts +++ b/src/components/FloatingLabel/index.ts @@ -1 +1,2 @@ -export * from './FloatingLabel'; +export { FloatingLabel } from './FloatingLabel'; +export type { FloatingLabelProps, FlowbiteFloatingLabelSizes, FlowbiteFloatingLabelTheme } from './FloatingLabel'; diff --git a/src/components/Flowbite/index.ts b/src/components/Flowbite/index.ts index b10fc325b..3c8a5a524 100644 --- a/src/components/Flowbite/index.ts +++ b/src/components/Flowbite/index.ts @@ -1,4 +1,5 @@ -export * from './Flowbite'; +export { Flowbite } from './Flowbite'; +export type { ThemeProps } from './Flowbite'; export type { CustomFlowbiteTheme, FlowbiteBoolean, diff --git a/src/components/Footer/Footer.spec.tsx b/src/components/Footer/Footer.spec.tsx index 120acfec6..288b3fe99 100644 --- a/src/components/Footer/Footer.spec.tsx +++ b/src/components/Footer/Footer.spec.tsx @@ -2,7 +2,7 @@ import { cleanup, render, screen } from '@testing-library/react'; import type { FC } from 'react'; import { BsDribbble, BsFacebook, BsGithub, BsInstagram, BsTwitter } from 'react-icons/bs'; import { describe, expect, it } from 'vitest'; -import { Flowbite } from '../Flowbite'; +import { Flowbite, type CustomFlowbiteTheme } from '../Flowbite'; import { Footer } from './Footer'; describe('Components / Footer', () => { @@ -61,7 +61,7 @@ describe('Components / Footer', () => { describe('Theme', () => { it('should use `base` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { footer: { root: { base: 'text-gray-100', @@ -78,7 +78,7 @@ describe('Components / Footer', () => { }); it('should use `bgDark` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { footer: { root: { bgDark: 'text-gray-100', @@ -95,7 +95,7 @@ describe('Components / Footer', () => { }); it('should use `container` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { footer: { root: { container: 'text-gray-100', @@ -113,7 +113,7 @@ describe('Components / Footer', () => { describe('`Footer.Brand`', () => { it('should use `brand` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { footer: { brand: { base: 'text-gray-100', @@ -152,7 +152,7 @@ describe('Components / Footer', () => { describe('`Footer.Copyright`', () => { it('should use `copyright` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { footer: { copyright: { base: 'text-gray-100', @@ -191,7 +191,7 @@ describe('Components / Footer', () => { describe('`Footer.Icon`', () => { it('should use `icon` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { footer: { icon: { base: 'text-gray-800', @@ -224,7 +224,7 @@ describe('Components / Footer', () => { describe('`Footer.Title`', () => { it('should use `title` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { footer: { title: { base: 'text-gray-100', diff --git a/src/components/Footer/FooterCopyright.tsx b/src/components/Footer/FooterCopyright.tsx index 50afdccd0..e3036c253 100644 --- a/src/components/Footer/FooterCopyright.tsx +++ b/src/components/Footer/FooterCopyright.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; @@ -10,7 +10,7 @@ export interface FlowbiteFooterCopyrightTheme { span: string; } -export interface CopyrightProps extends PropsWithChildren, ComponentProps<'div'> { +export interface CopyrightProps extends ComponentProps<'div'> { by: string; href?: string; theme?: DeepPartial; diff --git a/src/components/Footer/FooterLink.tsx b/src/components/Footer/FooterLink.tsx index 4fd050f8c..80cac66bf 100644 --- a/src/components/Footer/FooterLink.tsx +++ b/src/components/Footer/FooterLink.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, ElementType, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, ElementType, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; @@ -9,7 +9,7 @@ export interface FlowbiteFooterLinkTheme { href: string; } -export interface FooterLinkProps extends PropsWithChildren, ComponentProps<'a'> { +export interface FooterLinkProps extends ComponentProps<'a'> { as?: ElementType; href: string; theme?: DeepPartial; diff --git a/src/components/Footer/FooterLinkGroup.tsx b/src/components/Footer/FooterLinkGroup.tsx index 827d6d57a..427d6004b 100644 --- a/src/components/Footer/FooterLinkGroup.tsx +++ b/src/components/Footer/FooterLinkGroup.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; @@ -11,7 +11,7 @@ export interface FlowbiteFooterLinkGroupTheme { col: string; } -export interface FooterLinkGroupProps extends PropsWithChildren, ComponentProps<'ul'> { +export interface FooterLinkGroupProps extends ComponentProps<'ul'> { col?: boolean; theme?: DeepPartial; } diff --git a/src/components/Footer/FooterTitle.tsx b/src/components/Footer/FooterTitle.tsx index 15a4983a0..96a3841d0 100644 --- a/src/components/Footer/FooterTitle.tsx +++ b/src/components/Footer/FooterTitle.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, ElementType, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, ElementType, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; @@ -8,7 +8,7 @@ export interface FlowbiteFooterTitleTheme { base: string; } -export interface FooterTitleProps extends PropsWithChildren> { +export interface FooterTitleProps extends ComponentProps<'h2'> { as?: ElementType; theme?: DeepPartial; title: string; diff --git a/src/components/Footer/index.ts b/src/components/Footer/index.ts index dfa89282a..6231b8564 100644 --- a/src/components/Footer/index.ts +++ b/src/components/Footer/index.ts @@ -1,8 +1,16 @@ -export * from './Footer'; -export * from './FooterBrand'; -export * from './FooterCopyright'; -export * from './FooterDivider'; -export * from './FooterIcon'; -export * from './FooterLink'; -export * from './FooterLinkGroup'; -export * from './FooterTitle'; +export { Footer } from './Footer'; +export type { FlowbiteFooterRootTheme, FlowbiteFooterTheme, FooterComponent, FooterProps } from './Footer'; +export { FooterBrand } from './FooterBrand'; +export type { FlowbiteFooterBrandTheme, FooterBrandProps } from './FooterBrand'; +export { FooterCopyright } from './FooterCopyright'; +export type { CopyrightProps, FlowbiteFooterCopyrightTheme } from './FooterCopyright'; +export { FooterDivider } from './FooterDivider'; +export type { FlowbiteFooterDividerTheme, FooterDividerProps } from './FooterDivider'; +export { FooterIcon } from './FooterIcon'; +export type { FlowbiteFooterIconTheme, FooterIconProps } from './FooterIcon'; +export { FooterLink } from './FooterLink'; +export type { FlowbiteFooterLinkTheme, FooterLinkProps } from './FooterLink'; +export { FooterLinkGroup } from './FooterLinkGroup'; +export type { FlowbiteFooterLinkGroupTheme, FooterLinkGroupProps } from './FooterLinkGroup'; +export { FooterTitle } from './FooterTitle'; +export type { FlowbiteFooterTitleTheme, FooterTitleProps } from './FooterTitle'; diff --git a/src/components/HelperText/HelperText.tsx b/src/components/HelperText/HelperText.tsx index c64d7956c..e0ad4f0f9 100644 --- a/src/components/HelperText/HelperText.tsx +++ b/src/components/HelperText/HelperText.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; @@ -18,7 +18,7 @@ export interface HelperColors extends Pick, 'color'>> { +export interface HelperTextProps extends Omit, 'color'> { color?: keyof HelperColors; theme?: DeepPartial; value?: string; diff --git a/src/components/HelperText/index.ts b/src/components/HelperText/index.ts index e361e7148..ec13c5bad 100644 --- a/src/components/HelperText/index.ts +++ b/src/components/HelperText/index.ts @@ -1 +1,2 @@ -export * from './HelperText'; +export { HelperText } from './HelperText'; +export type { FlowbiteHelperTextRootTheme, FlowbiteHelperTextTheme, HelperColors, HelperTextProps } from './HelperText'; diff --git a/src/components/Kbd/Kbd.spec.tsx b/src/components/Kbd/Kbd.spec.tsx index 341c2abe2..46531a367 100644 --- a/src/components/Kbd/Kbd.spec.tsx +++ b/src/components/Kbd/Kbd.spec.tsx @@ -1,13 +1,13 @@ import { render, screen } from '@testing-library/react'; import { MdKeyboardArrowLeft, MdKeyboardCommandKey } from 'react-icons/md'; import { describe, expect, it } from 'vitest'; -import { Flowbite } from '../Flowbite'; +import { Flowbite, type CustomFlowbiteTheme } from '../Flowbite'; import { Kbd } from './Kbd'; describe('Components / Kbd', () => { describe('Theme', () => { it('should use custom `base` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { kbd: { root: { base: 'bg-yellow-400 dark:bg-yellow-40', diff --git a/src/components/Kbd/Kbd.tsx b/src/components/Kbd/Kbd.tsx index 8872bc0db..fc3c4d072 100644 --- a/src/components/Kbd/Kbd.tsx +++ b/src/components/Kbd/Kbd.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; @@ -13,7 +13,7 @@ export interface FlowbiteKbdRootTheme { icon: string; } -export interface KbdProps extends PropsWithChildren> { +export interface KbdProps extends ComponentProps<'span'> { icon?: FC>; theme?: DeepPartial; } diff --git a/src/components/Kbd/index.ts b/src/components/Kbd/index.ts index 904df7ed3..d1fe52632 100644 --- a/src/components/Kbd/index.ts +++ b/src/components/Kbd/index.ts @@ -1 +1,2 @@ -export * from './Kbd'; +export { Kbd } from './Kbd'; +export type { FlowbiteKbdRootTheme, FlowbiteKbdTheme, KbdProps } from './Kbd'; diff --git a/src/components/Label/Label.spec.tsx b/src/components/Label/Label.spec.tsx index 48953a144..64da0c12e 100644 --- a/src/components/Label/Label.spec.tsx +++ b/src/components/Label/Label.spec.tsx @@ -4,7 +4,7 @@ import { describe, expect, it } from 'vitest'; import { Button } from '../Button'; import { Checkbox } from '../Checkbox'; import { FileInput } from '../FileInput'; -import { Flowbite } from '../Flowbite'; +import { Flowbite, type CustomFlowbiteTheme } from '../Flowbite'; import { Radio } from '../Radio'; import { RangeSlider } from '../RangeSlider'; import { Select } from '../Select'; @@ -34,7 +34,7 @@ describe.concurrent('Components / Label', () => { describe('Theme', () => { it('should use `disabled` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { label: { root: { disabled: 'opacity-50', diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index 38268f392..c85c85438 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; @@ -20,7 +20,7 @@ export interface LabelColors extends FlowbiteStateColors { default: string; } -export interface LabelProps extends PropsWithChildren, 'color'>> { +export interface LabelProps extends Omit, 'color'> { color?: keyof LabelColors; disabled?: boolean; theme?: DeepPartial; diff --git a/src/components/Label/index.ts b/src/components/Label/index.ts index ca58c61a2..1443d0cfb 100644 --- a/src/components/Label/index.ts +++ b/src/components/Label/index.ts @@ -1 +1,2 @@ -export * from './Label'; +export { Label } from './Label'; +export type { FlowbiteLabelRootTheme, FlowbiteLabelTheme, LabelColors, LabelProps } from './Label'; diff --git a/src/components/ListGroup/ListGroup.spec.tsx b/src/components/ListGroup/ListGroup.spec.tsx index 9b7411f8f..891ab28ac 100644 --- a/src/components/ListGroup/ListGroup.spec.tsx +++ b/src/components/ListGroup/ListGroup.spec.tsx @@ -56,7 +56,7 @@ describe('Components / List group', () => { describe('Theme', () => { it('should use custom classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { listGroup: { root: { base: 'text-gray-100', diff --git a/src/components/ListGroup/ListGroup.tsx b/src/components/ListGroup/ListGroup.tsx index 6f50c491e..8b69bd071 100644 --- a/src/components/ListGroup/ListGroup.tsx +++ b/src/components/ListGroup/ListGroup.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; @@ -15,7 +15,7 @@ export interface FlowbiteListGroupRootTheme { base: string; } -export interface ListGroupProps extends PropsWithChildren, ComponentProps<'ul'> { +export interface ListGroupProps extends ComponentProps<'ul'> { theme?: DeepPartial; } @@ -32,4 +32,6 @@ const ListGroupComponent: FC = ({ children, className, theme: cu ListGroupComponent.displayName = 'ListGroup'; ListGroupItem.displayName = 'ListGroup.Item'; -export const ListGroup = Object.assign(ListGroupComponent, { Item: ListGroupItem }); +export const ListGroup = Object.assign(ListGroupComponent, { + Item: ListGroupItem, +}); diff --git a/src/components/ListGroup/index.ts b/src/components/ListGroup/index.ts index 4d7cd660c..d822ea8b4 100644 --- a/src/components/ListGroup/index.ts +++ b/src/components/ListGroup/index.ts @@ -1,2 +1,4 @@ -export * from './ListGroup'; -export * from './ListGroupItem'; +export { ListGroup } from './ListGroup'; +export type { FlowbiteListGroupRootTheme, FlowbiteListGroupTheme, ListGroupProps } from './ListGroup'; +export { ListGroupItem } from './ListGroupItem'; +export type { FlowbiteListGroupItemTheme, ListGroupItemProps } from './ListGroupItem'; diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index 33166eb22..5a354821c 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -12,7 +12,7 @@ import { useRole, } from '@floating-ui/react'; import type { MutableRefObject } from 'react'; -import { forwardRef, useState, type ComponentPropsWithoutRef, type PropsWithChildren } from 'react'; +import { forwardRef, useState, type ComponentPropsWithoutRef } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; @@ -54,7 +54,7 @@ export interface ModalSizes extends Omit { [key: string]: string; } -export interface ModalProps extends PropsWithChildren> { +export interface ModalProps extends ComponentPropsWithoutRef<'div'> { onClose?: () => void; position?: keyof ModalPositions; popup?: boolean; @@ -105,7 +105,7 @@ const ModalComponent = forwardRef( } return ( - + > { +export interface ModalBodyProps extends ComponentProps<'div'> { theme?: DeepPartial; } export const ModalBody: FC = ({ children, className, theme: customTheme = {}, ...props }) => { - const theme = mergeDeep(getTheme().modal.body, customTheme); - const { popup } = useModalContext(); + const { theme: rootTheme, popup } = useModalContext(); + + const theme = mergeDeep(rootTheme.body, customTheme); return (
diff --git a/src/components/Modal/ModalContext.tsx b/src/components/Modal/ModalContext.tsx index f02c59736..df13a9488 100644 --- a/src/components/Modal/ModalContext.tsx +++ b/src/components/Modal/ModalContext.tsx @@ -1,8 +1,10 @@ 'use client'; import { createContext, useContext } from 'react'; +import type { FlowbiteModalTheme } from './Modal'; type ModalContext = { + theme: FlowbiteModalTheme; popup?: boolean; setHeaderId: (id: string | undefined) => void; onClose?: () => void; diff --git a/src/components/Modal/ModalFooter.tsx b/src/components/Modal/ModalFooter.tsx index 53afea7b2..facb3e7d3 100644 --- a/src/components/Modal/ModalFooter.tsx +++ b/src/components/Modal/ModalFooter.tsx @@ -1,9 +1,8 @@ 'use client'; -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; -import { getTheme } from '../../theme-store'; import type { DeepPartial } from '../../types'; import { useModalContext } from './ModalContext'; @@ -12,13 +11,14 @@ export interface FlowbiteModalFooterTheme { popup: string; } -export interface ModalFooterProps extends PropsWithChildren> { +export interface ModalFooterProps extends ComponentProps<'div'> { theme?: DeepPartial; } export const ModalFooter: FC = ({ children, className, theme: customTheme = {}, ...props }) => { - const theme = mergeDeep(getTheme().modal.footer, customTheme); - const { popup } = useModalContext(); + const { theme: rootTheme, popup } = useModalContext(); + + const theme = mergeDeep(rootTheme.footer, customTheme); return (
diff --git a/src/components/Modal/ModalHeader.tsx b/src/components/Modal/ModalHeader.tsx index 82ccc37ad..80b465716 100644 --- a/src/components/Modal/ModalHeader.tsx +++ b/src/components/Modal/ModalHeader.tsx @@ -1,10 +1,9 @@ 'use client'; -import { useId, useLayoutEffect, type ComponentProps, type ElementType, type FC, type PropsWithChildren } from 'react'; +import { useId, useLayoutEffect, type ComponentProps, type ElementType, type FC } from 'react'; import { HiOutlineX } from 'react-icons/hi'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; -import { getTheme } from '../../theme-store'; import type { DeepPartial } from '../../types'; import { useModalContext } from './ModalContext'; @@ -18,7 +17,7 @@ export interface FlowbiteModalHeaderTheme { }; } -export interface ModalHeaderProps extends PropsWithChildren> { +export interface ModalHeaderProps extends ComponentProps<'div'> { as?: ElementType; theme?: DeepPartial; } @@ -33,8 +32,10 @@ export const ModalHeader: FC = ({ }) => { const innerHeaderId = useId(); const headerId = id || innerHeaderId; - const theme = mergeDeep(getTheme().modal.header, customTheme); - const { popup, onClose, setHeaderId } = useModalContext(); + + const { theme: rootTheme, popup, onClose, setHeaderId } = useModalContext(); + + const theme = mergeDeep(rootTheme.header, customTheme); useLayoutEffect(() => { setHeaderId(headerId); diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts index 9933c5b8b..18507c7bf 100644 --- a/src/components/Modal/index.ts +++ b/src/components/Modal/index.ts @@ -1,4 +1,15 @@ -export * from './Modal'; -export type { ModalBodyProps } from './ModalBody'; -export type { ModalFooterProps } from './ModalFooter'; -export type { ModalHeaderProps } from './ModalHeader'; +export { Modal } from './Modal'; +export type { + FlowbiteModalContentTheme, + FlowbiteModalRootTheme, + FlowbiteModalTheme, + ModalPositions, + ModalProps, + ModalSizes, +} from './Modal'; +export { ModalBody } from './ModalBody'; +export type { FlowbiteModalBodyTheme, ModalBodyProps } from './ModalBody'; +export { ModalFooter } from './ModalFooter'; +export type { FlowbiteModalFooterTheme, ModalFooterProps } from './ModalFooter'; +export { ModalHeader } from './ModalHeader'; +export type { FlowbiteModalHeaderTheme, ModalHeaderProps } from './ModalHeader'; diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index 9840adaff..ffd17ed43 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -1,6 +1,6 @@ 'use client'; -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { useState } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; @@ -35,12 +35,12 @@ export interface FlowbiteNavbarRootTheme { }; } -export interface NavbarComponentProps extends PropsWithChildren, ComponentProps<'nav'> { +export interface NavbarComponentProps extends ComponentProps<'nav'> { menuOpen?: boolean; fluid?: boolean; rounded?: boolean; border?: boolean; - theme?: DeepPartial; + theme?: DeepPartial; } const NavbarComponent: FC = ({ @@ -55,20 +55,20 @@ const NavbarComponent: FC = ({ }) => { const [isOpen, setIsOpen] = useState(menuOpen); - const theme = mergeDeep(getTheme().navbar.root, customTheme); + const theme = mergeDeep(getTheme().navbar, customTheme); return ( - + ); diff --git a/src/components/Navbar/NavbarBrand.tsx b/src/components/Navbar/NavbarBrand.tsx index 05a6a752f..b5bfed26c 100644 --- a/src/components/Navbar/NavbarBrand.tsx +++ b/src/components/Navbar/NavbarBrand.tsx @@ -1,14 +1,16 @@ -import type { ComponentProps, ElementType, FC, PropsWithChildren } from 'react'; +'use client'; + +import type { ComponentProps, ElementType, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; -import { getTheme } from '../../theme-store'; import type { DeepPartial } from '../../types'; +import { useNavbarContext } from './NavbarContext'; export interface FlowbiteNavbarBrandTheme { base: string; } -export interface NavbarBrandProps extends PropsWithChildren, ComponentProps<'a'>, Record { +export interface NavbarBrandProps extends ComponentProps<'a'>, Record { as?: ElementType; href?: string; theme?: DeepPartial; @@ -21,7 +23,9 @@ export const NavbarBrand: FC = ({ theme: customTheme = {}, ...props }) => { - const theme = mergeDeep(getTheme().navbar.brand, customTheme); + const { theme: rootTheme } = useNavbarContext(); + + const theme = mergeDeep(rootTheme.brand, customTheme); return ( diff --git a/src/components/Navbar/NavbarCollapse.tsx b/src/components/Navbar/NavbarCollapse.tsx index b3fafc5b3..9cac9a485 100644 --- a/src/components/Navbar/NavbarCollapse.tsx +++ b/src/components/Navbar/NavbarCollapse.tsx @@ -1,9 +1,8 @@ 'use client'; -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; -import { getTheme } from '../../theme-store'; import type { DeepPartial } from '../../types'; import type { FlowbiteBoolean } from '../Flowbite'; import { useNavbarContext } from './NavbarContext'; @@ -14,13 +13,14 @@ export interface FlowbiteNavbarCollapseTheme { hidden: FlowbiteBoolean; } -export interface NavbarCollapseProps extends PropsWithChildren> { +export interface NavbarCollapseProps extends ComponentProps<'div'> { theme?: DeepPartial; } export const NavbarCollapse: FC = ({ children, className, theme: customTheme = {}, ...props }) => { - const { isOpen } = useNavbarContext(); - const theme = mergeDeep(getTheme().navbar.collapse, customTheme); + const { theme: rootTheme, isOpen } = useNavbarContext(); + + const theme = mergeDeep(rootTheme.collapse, customTheme); return (
void; }; diff --git a/src/components/Navbar/NavbarLink.tsx b/src/components/Navbar/NavbarLink.tsx index e5678a0ff..4858eef4d 100644 --- a/src/components/Navbar/NavbarLink.tsx +++ b/src/components/Navbar/NavbarLink.tsx @@ -1,9 +1,11 @@ -import type { ComponentProps, ElementType, FC, PropsWithChildren } from 'react'; +'use client'; + +import type { ComponentProps, ElementType, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; -import { getTheme } from '../../theme-store'; import type { DeepPartial } from '../../types'; import type { FlowbiteBoolean } from '../Flowbite'; +import { useNavbarContext } from './NavbarContext'; export interface FlowbiteNavbarLinkTheme { base: string; @@ -11,7 +13,7 @@ export interface FlowbiteNavbarLinkTheme { disabled: FlowbiteBoolean; } -export interface NavbarLinkProps extends PropsWithChildren, ComponentProps<'a'>, Record { +export interface NavbarLinkProps extends ComponentProps<'a'>, Record { active?: boolean; as?: ElementType; disabled?: boolean; @@ -28,7 +30,9 @@ export const NavbarLink: FC = ({ theme: customTheme = {}, ...props }) => { - const theme = mergeDeep(getTheme().navbar.link, customTheme); + const { theme: rootTheme } = useNavbarContext(); + + const theme = mergeDeep(rootTheme.link, customTheme); return (
  • diff --git a/src/components/Navbar/NavbarToggle.tsx b/src/components/Navbar/NavbarToggle.tsx index 847c2dda6..c7eb3b76c 100644 --- a/src/components/Navbar/NavbarToggle.tsx +++ b/src/components/Navbar/NavbarToggle.tsx @@ -4,7 +4,6 @@ import type { ComponentProps, FC } from 'react'; import { FaBars } from 'react-icons/fa'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; -import { getTheme } from '../../theme-store'; import type { DeepPartial } from '../../types'; import { useNavbarContext } from './NavbarContext'; @@ -24,8 +23,9 @@ export const NavbarToggle: FC = ({ theme: customTheme = {}, ...props }) => { - const { isOpen, setIsOpen } = useNavbarContext(); - const theme = mergeDeep(getTheme().navbar.toggle, customTheme); + const { theme: rootTheme, isOpen, setIsOpen } = useNavbarContext(); + + const theme = mergeDeep(rootTheme.toggle, customTheme); const handleClick = () => { setIsOpen(!isOpen); diff --git a/src/components/Navbar/index.ts b/src/components/Navbar/index.ts index 424840681..75dbf527a 100644 --- a/src/components/Navbar/index.ts +++ b/src/components/Navbar/index.ts @@ -1,5 +1,10 @@ -export * from './Navbar'; -export * from './NavbarBrand'; -export * from './NavbarCollapse'; -export * from './NavbarLink'; -export * from './NavbarToggle'; +export { Navbar } from './Navbar'; +export type { FlowbiteNavbarRootTheme, FlowbiteNavbarTheme, NavbarComponentProps } from './Navbar'; +export { NavbarBrand } from './NavbarBrand'; +export type { FlowbiteNavbarBrandTheme, NavbarBrandProps } from './NavbarBrand'; +export { NavbarCollapse } from './NavbarCollapse'; +export type { FlowbiteNavbarCollapseTheme, NavbarCollapseProps } from './NavbarCollapse'; +export { NavbarLink } from './NavbarLink'; +export type { FlowbiteNavbarLinkTheme, NavbarLinkProps } from './NavbarLink'; +export { NavbarToggle } from './NavbarToggle'; +export type { FlowbiteNavbarToggleTheme, NavbarToggleProps } from './NavbarToggle'; diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index 402100533..2f3d6c6b2 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react'; +import type { ComponentProps, FC, ReactNode } from 'react'; import { HiChevronLeft, HiChevronRight } from 'react-icons/hi'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; @@ -38,7 +38,7 @@ export interface FlowbitePaginationNavigationTheme { icon: string; } -export interface PaginationProps extends PropsWithChildren, ComponentProps<'nav'> { +export interface PaginationProps extends ComponentProps<'nav'> { currentPage: number; layout?: 'navigation' | 'pagination' | 'table'; nextLabel?: string; @@ -123,6 +123,7 @@ const PaginationComponent: FC = ({ }; PaginationComponent.displayName = 'Pagination'; + export const Pagination = Object.assign(PaginationComponent, { Button: PaginationButton, }); diff --git a/src/components/Pagination/index.ts b/src/components/Pagination/index.ts index 3fdfbaecc..6b33e7402 100644 --- a/src/components/Pagination/index.ts +++ b/src/components/Pagination/index.ts @@ -1,2 +1,16 @@ -export * from './Pagination'; -export type { PaginationButtonProps } from './PaginationButton'; +export { Pagination } from './Pagination'; +export type { + FlowbitePaginationLayoutTheme, + FlowbitePaginationNavigationTheme, + FlowbitePaginationPagesTheme, + FlowbitePaginationRootTheme, + FlowbitePaginationTheme, + PaginationProps, +} from './Pagination'; +export { PaginationButton } from './PaginationButton'; +export type { + FlowbitePaginationButtonTheme, + PaginationButtonProps, + PaginationNavigation, + PaginationPrevButtonProps, +} from './PaginationButton'; diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx index 03145921a..d91cc351e 100644 --- a/src/components/Progress/Progress.tsx +++ b/src/components/Progress/Progress.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { useId } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; @@ -23,7 +23,7 @@ export interface ProgressSizes extends Pick { +export interface ProgressProps extends ComponentProps<'div'> { labelProgress?: boolean; labelText?: boolean; progress: number; diff --git a/src/components/Progress/index.ts b/src/components/Progress/index.ts index 1803677d9..9f34f37fb 100644 --- a/src/components/Progress/index.ts +++ b/src/components/Progress/index.ts @@ -1 +1,2 @@ -export * from './Progress'; +export { Progress } from './Progress'; +export type { FlowbiteProgressTheme, ProgressColor, ProgressProps, ProgressSizes } from './Progress'; diff --git a/src/components/Radio/Radio.spec.tsx b/src/components/Radio/Radio.spec.tsx index 2fd171c48..f497206a9 100644 --- a/src/components/Radio/Radio.spec.tsx +++ b/src/components/Radio/Radio.spec.tsx @@ -1,6 +1,6 @@ import { render, screen } from '@testing-library/react'; import { describe, expect, it } from 'vitest'; -import { Flowbite } from '../Flowbite'; +import { Flowbite, type CustomFlowbiteTheme } from '../Flowbite'; import { Radio } from './Radio'; describe.concurrent('Components / Radio', () => { @@ -14,7 +14,7 @@ describe.concurrent('Components / Radio', () => { describe('Theme', () => { it('should use custom `base` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { radio: { root: { base: 'bg-yellow-400 dark:bg-yellow-40', diff --git a/src/components/Radio/index.ts b/src/components/Radio/index.ts index bfbe6d09b..2fd3b343f 100644 --- a/src/components/Radio/index.ts +++ b/src/components/Radio/index.ts @@ -1 +1,2 @@ -export * from './Radio'; +export { Radio } from './Radio'; +export type { FlowbiteRadioRootTheme, FlowbiteRadioTheme, RadioProps } from './Radio'; diff --git a/src/components/RangeSlider/RangeSlider.spec.tsx b/src/components/RangeSlider/RangeSlider.spec.tsx index ccc283d2d..4f25a6dbf 100644 --- a/src/components/RangeSlider/RangeSlider.spec.tsx +++ b/src/components/RangeSlider/RangeSlider.spec.tsx @@ -2,8 +2,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { createRef } from 'react'; import { describe, expect, it, vi } from 'vitest'; - -import { Flowbite } from '../Flowbite'; +import { Flowbite, type CustomFlowbiteTheme } from '../Flowbite'; import { RangeSlider } from './RangeSlider'; describe('Components / Button', () => { @@ -139,7 +138,7 @@ describe('Components / Button', () => { describe('Theme', () => { it('should use `base` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { rangeSlider: { root: { base: 'dummy-range-slider-base-classes', @@ -157,7 +156,7 @@ describe('Components / Button', () => { }); it('should use `base` classes of field', () => { - const theme = { + const theme: CustomFlowbiteTheme = { rangeSlider: { field: { base: 'dummy-range-slider-field-base-classes', @@ -175,7 +174,7 @@ describe('Components / Button', () => { }); it('should use `base` classes of input', () => { - const theme = { + const theme: CustomFlowbiteTheme = { rangeSlider: { field: { input: { @@ -195,7 +194,7 @@ describe('Components / Button', () => { }); it('should use `sizes` classes of input', () => { - const theme = { + const theme: CustomFlowbiteTheme = { rangeSlider: { field: { input: { @@ -219,7 +218,7 @@ describe('Components / Button', () => { describe('Theme as a prop', () => { it('should use `base` classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { root: { base: 'dummy-range-slider-base-classes', }, @@ -231,7 +230,7 @@ describe('Components / Button', () => { }); it('should use `base` classes of field', () => { - const theme = { + const theme: CustomFlowbiteTheme = { field: { base: 'dummy-range-slider-field-base-classes', }, @@ -243,7 +242,7 @@ describe('Components / Button', () => { }); it('should use `base` classes of input', () => { - const theme = { + const theme: CustomFlowbiteTheme = { field: { input: { base: 'dummy-range-slider-field-input-base-classes', @@ -257,7 +256,7 @@ describe('Components / Button', () => { }); it('should use `sizes` classes of input', () => { - const theme = { + const theme: CustomFlowbiteTheme = { field: { input: { sizes: { diff --git a/src/components/RangeSlider/index.ts b/src/components/RangeSlider/index.ts index 8bb8a4fbd..cd5cccbb2 100644 --- a/src/components/RangeSlider/index.ts +++ b/src/components/RangeSlider/index.ts @@ -1 +1,7 @@ -export * from './RangeSlider'; +export { RangeSlider } from './RangeSlider'; +export type { + FlowbiteRangeSliderFieldTheme, + FlowbiteRangeSliderRootTheme, + FlowbiteRangeSliderTheme, + RangeSliderProps, +} from './RangeSlider'; diff --git a/src/components/Rating/Rating.tsx b/src/components/Rating/Rating.tsx index 977ff73e4..1e76627e1 100644 --- a/src/components/Rating/Rating.tsx +++ b/src/components/Rating/Rating.tsx @@ -1,6 +1,6 @@ 'use client'; -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; @@ -19,7 +19,7 @@ export interface FlowbiteRatingTheme { advanced: FlowbiteRatingAdvancedTheme; } -export interface RatingProps extends PropsWithChildren> { +export interface RatingProps extends ComponentProps<'div'> { size?: keyof FlowbiteStarSizes; theme?: DeepPartial; } @@ -28,7 +28,7 @@ const RatingComponent: FC = ({ children, className, size = 'sm', th const theme = mergeDeep(getTheme().rating, customTheme); return ( - +
    {children}
    diff --git a/src/components/Rating/RatingAdvanced.tsx b/src/components/Rating/RatingAdvanced.tsx index 1ab71b64c..8c1ef97b5 100644 --- a/src/components/Rating/RatingAdvanced.tsx +++ b/src/components/Rating/RatingAdvanced.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; @@ -14,7 +14,7 @@ export interface FlowbiteRatingAdvancedTheme { }; } -export interface RatingAdvancedProps extends PropsWithChildren, ComponentProps<'div'> { +export interface RatingAdvancedProps extends ComponentProps<'div'> { percentFilled?: number; theme?: DeepPartial; } diff --git a/src/components/Rating/RatingContext.tsx b/src/components/Rating/RatingContext.tsx index 31fad6753..9c6c742f6 100644 --- a/src/components/Rating/RatingContext.tsx +++ b/src/components/Rating/RatingContext.tsx @@ -1,9 +1,11 @@ 'use client'; import { createContext, useContext } from 'react'; +import type { FlowbiteRatingTheme } from './Rating'; import type { FlowbiteStarSizes } from './RatingStar'; export type RatingContext = { + theme: FlowbiteRatingTheme; size?: keyof FlowbiteStarSizes; }; diff --git a/src/components/Rating/RatingStar.tsx b/src/components/Rating/RatingStar.tsx index 025831eff..d1321bd1b 100644 --- a/src/components/Rating/RatingStar.tsx +++ b/src/components/Rating/RatingStar.tsx @@ -4,7 +4,6 @@ import type { ComponentProps, FC } from 'react'; import { HiStar } from 'react-icons/hi'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; -import { getTheme } from '../../theme-store'; import type { DeepPartial } from '../../types'; import type { FlowbiteSizes } from '../Flowbite'; import { useRatingContext } from './RatingContext'; @@ -32,8 +31,9 @@ export const RatingStar: FC = ({ theme: customTheme = {}, ...props }) => { - const { size = 'sm' } = useRatingContext(); - const theme = mergeDeep(getTheme().rating.star, customTheme); + const { theme: rootTheme, size = 'sm' } = useRatingContext(); + + const theme = mergeDeep(rootTheme.star, customTheme); return ( { [key: string]: string; } -export interface SelectProps extends PropsWithChildren, Omit, 'color' | 'ref'> { +export interface SelectProps extends Omit, 'color' | 'ref'> { addon?: ReactNode; color?: keyof SelectColors; helperText?: ReactNode; diff --git a/src/components/Select/index.ts b/src/components/Select/index.ts index 7868ecbae..d2be3c2f4 100644 --- a/src/components/Select/index.ts +++ b/src/components/Select/index.ts @@ -1 +1,2 @@ -export * from './Select'; +export { Select } from './Select'; +export type { FlowbiteSelectTheme, SelectColors, SelectProps, SelectSizes } from './Select'; diff --git a/src/components/Sidebar/Sidebar.spec.tsx b/src/components/Sidebar/Sidebar.spec.tsx index 8a17fc8c1..d3881d90d 100644 --- a/src/components/Sidebar/Sidebar.spec.tsx +++ b/src/components/Sidebar/Sidebar.spec.tsx @@ -155,7 +155,7 @@ describe('Theme', () => { describe('`Sidebar.Collapse`', () => { it('should use custom classes', async () => { const user = userEvent.setup(); - const theme = { + const theme: CustomFlowbiteTheme = { sidebar: { collapse: { button: 'text-gray-100', @@ -203,7 +203,7 @@ describe('Theme', () => { describe('`Sidebar.CTA`', () => { it('should use custom classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { sidebar: { cta: { base: 'bg-gray-100', @@ -226,7 +226,7 @@ describe('Theme', () => { describe('`Sidebar.Item`', () => { it('should use custom classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { sidebar: { item: { active: 'text-gray-100', @@ -236,7 +236,6 @@ describe('Theme', () => { }, content: { base: 'bg-gray-200', - collapsed: 'text-gray-600', }, icon: { base: 'text-gray-400', @@ -272,9 +271,11 @@ describe('Theme', () => { describe('`Sidebar.Items`', () => { it('should use custom classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { sidebar: { - items: 'text-gray-100', + items: { + base: 'text-gray-100', + }, }, }; @@ -290,9 +291,11 @@ describe('Theme', () => { describe('`Sidebar.ItemGroup`', () => { it('should use custom classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { sidebar: { - itemGroup: 'text-gray-100', + itemGroup: { + base: 'text-gray-100', + }, }, }; @@ -307,7 +310,7 @@ describe('Theme', () => { describe('`Sidebar.Logo`', () => { it('should use custom classes', () => { - const theme = { + const theme: CustomFlowbiteTheme = { sidebar: { logo: { base: 'text-gray-100', diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index 8130353c6..f8b304bb4 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -1,22 +1,18 @@ 'use client'; -import type { ComponentProps, ElementType, FC, PropsWithChildren } from 'react'; +import type { ComponentProps, ElementType, FC } from 'react'; import { twMerge } from 'tailwind-merge'; import { mergeDeep } from '../../helpers/merge-deep'; import { getTheme } from '../../theme-store'; import type { DeepPartial } from '../../types'; import type { FlowbiteBoolean } from '../Flowbite'; -import type { FlowbiteSidebarCTATheme } from './SidebarCTA'; -import { SidebarCTA } from './SidebarCTA'; -import type { FlowbiteSidebarCollapseTheme } from './SidebarCollapse'; -import { SidebarCollapse } from './SidebarCollapse'; +import { SidebarCTA, type FlowbiteSidebarCTATheme } from './SidebarCTA'; +import { SidebarCollapse, type FlowbiteSidebarCollapseTheme } from './SidebarCollapse'; import { SidebarContext } from './SidebarContext'; -import type { FlowbiteSidebarItemTheme } from './SidebarItem'; -import { SidebarItem } from './SidebarItem'; -import { SidebarItemGroup } from './SidebarItemGroup'; -import { SidebarItems } from './SidebarItems'; -import type { FlowbiteSidebarLogoTheme } from './SidebarLogo'; -import SidebarLogo from './SidebarLogo'; +import { SidebarItem, type FlowbiteSidebarItemTheme } from './SidebarItem'; +import { SidebarItemGroup, type FlowbiteSidebarItemGroupTheme } from './SidebarItemGroup'; +import { SidebarItems, type FlowbiteSidebarItemsTheme } from './SidebarItems'; +import { SidebarLogo, type FlowbiteSidebarLogoTheme } from './SidebarLogo'; export interface FlowbiteSidebarTheme { root: { @@ -27,12 +23,12 @@ export interface FlowbiteSidebarTheme { collapse: FlowbiteSidebarCollapseTheme; cta: FlowbiteSidebarCTATheme; item: FlowbiteSidebarItemTheme; - items: string; - itemGroup: string; + items: FlowbiteSidebarItemsTheme; + itemGroup: FlowbiteSidebarItemGroupTheme; logo: FlowbiteSidebarLogoTheme; } -export interface SidebarProps extends PropsWithChildren, ComponentProps<'div'> { +export interface SidebarProps extends ComponentProps<'div'> { as?: ElementType; collapseBehavior?: 'collapse' | 'hide'; collapsed?: boolean; @@ -51,7 +47,7 @@ const SidebarComponent: FC = ({ const theme = mergeDeep(getTheme().sidebar, customTheme); return ( - +
  • {isCollapsed ? ( - {tooltipChildren}} placement="right"> + + {tooltipChildren} + + } + placement="right" + > {wrapperChildren} ) : ( @@ -61,13 +70,7 @@ const ListItem: FC<
    • ); -const TooltipContent: FC> = ({ id, children }) => ( - {children} -); - -const Children: FC> = ({ id, children }) => { - const theme = getTheme().sidebar.item; - +const Children: FC> = ({ id, theme, children }) => { return ( ( ref, ) => { const id = useId(); - const { isCollapsed } = useSidebarContext(); + const { theme: rootTheme, isCollapsed } = useSidebarContext(); const { isInsideCollapse } = useSidebarItemContext(); - const theme = mergeDeep(getTheme().sidebar.item, customTheme); + + const theme = mergeDeep(rootTheme.item, customTheme); return ( - + ( {isCollapsed && !Icon && ( {(children as string).charAt(0).toLocaleUpperCase() ?? '?'} )} - {!isCollapsed && {children}} + {!isCollapsed && ( + + {children} + + )} {!isCollapsed && label && (