Merge branch 'main' into introduce/add-right-icon-textfield

.eslintrc.js

@@ -7,7 +7,14 @@ module.exports = {
     'plugin:storybook/recommended',
     'plugin:tailwindcss/recommended',
   ],
-  ignorePatterns: ['.eslintrc.js', 'config-overrides.js', 'lint-staged.js', 'postcss.config.js', 'tailwind.config.js'],
+  ignorePatterns: [
+    '.eslintrc.js',
+    'config-overrides.js',
+    'lint-staged.js',
+    'postcss.config.js',
+    'tailwind.config.js',
+    'commitlint.config.js',
+  ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn prettier && yarn lint && yarn test run && yarn build
+yarn prettier:fix && yarn lint && yarn test run && yarn build

commitlint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+};

package.json

@@ -51,7 +51,6 @@
     "@floating-ui/react-dom": "^1.0.0",
     "@floating-ui/react-dom-interactions": "^0.9.1",
     "classnames": "^2.3.2",
-    "commitizen": "^4.2.5",
     "react-icons": "^4.6.0",
     "react-indiana-drag-scroll": "^2.2.0"
   },
@@ -100,6 +99,7 @@
     "autoprefixer": "^10.4.8",
     "axe-core": "^4.4.3",
     "babel-loader": "^8.2.5",
+    "commitizen": "^4.2.6",
     "cypress": "^10.4.0",
     "cypress-axe": "^1.0.0",
     "cz-conventional-changelog": "3.3.0",

src/lib/components/Checkbox/Checkbox.tsx

@@ -1,17 +1,24 @@
 import classNames from 'classnames';
 import type { ComponentProps } from 'react';
 import { forwardRef } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 
 export interface FlowbiteCheckboxTheme {
   base: string;
 }
 
-export type CheckboxProps = Omit<ComponentProps<'input'>, 'type' | 'ref'>;
+export interface CheckboxProps extends Omit<ComponentProps<'input'>, 'type' | 'ref'> {
+  theme?: DeepPartial<FlowbiteCheckboxTheme>;
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ theme: customTheme = {}, className, ...props }, ref) => {
+    const theme = mergeDeep(useTheme().theme.checkbox, customTheme);
 
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({ className, ...props }, ref) => {
-  const theme = useTheme().theme.checkbox;
-  return <input ref={ref} className={classNames(theme.base, className)} type="checkbox" {...props} />;
-});
+    return <input ref={ref} className={classNames(theme.base, className)} type="checkbox" {...props} />;
+  },
+);
 
 Checkbox.displayName = 'Checkbox';

src/lib/components/FileInput/FileInput.tsx

@@ -1,6 +1,8 @@
 import classNames from 'classnames';
 import type { ComponentProps, ReactNode } from 'react';
 import { forwardRef } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 import { HelperText } from '../HelperText';
 import type { TextInputColors, TextInputSizes } from '../TextInput';
@@ -21,11 +23,13 @@ export interface FileInputProps extends Omit<ComponentProps<'input'>, 'type' | '
   sizing?: keyof TextInputSizes;
   helperText?: ReactNode;
   color?: keyof TextInputColors;
+  theme?: DeepPartial<FlowbiteFileInputTheme>;
 }
 
 export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
-  ({ sizing = 'md', helperText, color = 'gray', className, ...props }, ref) => {
-    const theme = useTheme().theme.fileInput;
+  ({ theme: customTheme = {}, sizing = 'md', helperText, color = 'gray', className, ...props }, ref) => {
+    const theme = mergeDeep(useTheme().theme.fileInput, customTheme);
+
     return (
       <>
         <div className={classNames(theme.base, className)}>

src/lib/components/Navbar/Navbar.tsx

@@ -1,44 +1,40 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import { useState } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
-import { NavbarBrand } from './NavbarBrand';
-import { NavbarCollapse } from './NavbarCollapse';
+import { FlowbiteNavbarBrandTheme, NavbarBrand } from './NavbarBrand';
+import { FlowbiteNavbarCollapseTheme, NavbarCollapse } from './NavbarCollapse';
 import { NavbarContext } from './NavbarContext';
-import { NavbarLink } from './NavbarLink';
-import { NavbarToggle } from './NavbarToggle';
+import { FlowbiteNavbarLinkTheme, NavbarLink } from './NavbarLink';
+import { FlowbiteNavbarToggleTheme, NavbarToggle } from './NavbarToggle';
 
 export interface FlowbiteNavbarTheme {
+  root: FlowbiteNavbarRootTheme;
+  brand: FlowbiteNavbarBrandTheme;
+  collapse: FlowbiteNavbarCollapseTheme;
+  link: FlowbiteNavbarLinkTheme;
+  toggle: FlowbiteNavbarToggleTheme;
+}
+
+export interface FlowbiteNavbarRootTheme {
   base: string;
   rounded: FlowbiteBoolean;
   bordered: FlowbiteBoolean;
   inner: {
     base: string;
     fluid: FlowbiteBoolean;
   };
-  brand: string;
-  collapse: {
-    base: string;
-    list: string;
-    hidden: FlowbiteBoolean;
-  };
-  link: {
-    base: string;
-    active: FlowbiteBoolean;
-    disabled: FlowbiteBoolean;
-  };
-  toggle: {
-    base: string;
-    icon: string;
-  };
 }
 
 export interface NavbarComponentProps extends PropsWithChildren<ComponentProps<'nav'>> {
   menuOpen?: boolean;
   fluid?: boolean;
   rounded?: boolean;
   border?: boolean;
+  theme?: DeepPartial<FlowbiteNavbarRootTheme>;
 }
 
 const NavbarComponent: FC<NavbarComponentProps> = ({
@@ -48,11 +44,12 @@ const NavbarComponent: FC<NavbarComponentProps> = ({
   rounded,
   border,
   className,
+  theme: customTheme = {},
   ...props
 }) => {
   const [isOpen, setIsOpen] = useState(menuOpen);
 
-  const theme = useTheme().theme.navbar;
+  const theme = mergeDeep(useTheme().theme.navbar.root, customTheme);
 
   return (
     <NavbarContext.Provider value={{ isOpen, setIsOpen }}>

src/lib/components/Navbar/NavbarBrand.tsx

@@ -1,13 +1,22 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 
-export type NavbarBrandProps = PropsWithChildren<ComponentProps<'a'>>;
+export interface FlowbiteNavbarBrandTheme {
+  base: string;
+}
+
+export interface NavbarBrandProps extends PropsWithChildren<ComponentProps<'a'>> {
+  theme?: DeepPartial<FlowbiteNavbarBrandTheme>;
+}
+
+export const NavbarBrand: FC<NavbarBrandProps> = ({ theme: customTheme = {}, children, href, className, ...props }) => {
+  const theme = mergeDeep(useTheme().theme.navbar.brand, customTheme);
 
-export const NavbarBrand: FC<NavbarBrandProps> = ({ children, href, className, ...props }) => {
-  const theme = useTheme().theme.navbar;
   return (
-    <a href={href} className={classNames(theme.brand, className)} {...props}>
+    <a href={href} className={classNames(theme.base, className)} {...props}>
       {children}
     </a>
   );

src/lib/components/Navbar/NavbarCollapse.tsx

@@ -1,14 +1,30 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
+import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 import { useNavbarContext } from './NavbarContext';
 
-export type NavbarCollapseProps = PropsWithChildren<ComponentProps<'div'>>;
+export interface FlowbiteNavbarCollapseTheme {
+  base: string;
+  list: string;
+  hidden: FlowbiteBoolean;
+}
 
-export const NavbarCollapse: FC<NavbarCollapseProps> = ({ children, className, ...props }): JSX.Element => {
+export interface NavbarCollapseProps extends PropsWithChildren<ComponentProps<'div'>> {
+  theme?: DeepPartial<FlowbiteNavbarCollapseTheme>;
+}
+
+export const NavbarCollapse: FC<NavbarCollapseProps> = ({
+  theme: customTheme = {},
+  children,
+  className,
+  ...props
+}): JSX.Element => {
   const { isOpen } = useNavbarContext();
 
-  const theme = useTheme().theme.navbar.collapse;
+  const theme = mergeDeep(useTheme().theme.navbar.collapse, customTheme);
 
   return (
     <div

src/lib/components/Navbar/NavbarLink.tsx

@@ -1,15 +1,33 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
+import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 
+export interface FlowbiteNavbarLinkTheme {
+  base: string;
+  active: FlowbiteBoolean;
+  disabled: FlowbiteBoolean;
+}
+
 export interface NavbarLinkProps extends PropsWithChildren<ComponentProps<'a'>> {
   active?: boolean;
   disabled?: boolean;
   href?: string;
+  theme?: DeepPartial<FlowbiteNavbarLinkTheme>;
 }
 
-export const NavbarLink: FC<NavbarLinkProps> = ({ active, disabled, href, children, className, ...props }) => {
-  const theme = useTheme().theme.navbar.link;
+export const NavbarLink: FC<NavbarLinkProps> = ({
+  active,
+  disabled,
+  href,
+  theme: customTheme = {},
+  children,
+  className,
+  ...props
+}) => {
+  const theme = mergeDeep(useTheme().theme.navbar.link, customTheme);
 
   return (
     <li>

src/lib/components/Navbar/NavbarToggle.tsx

@@ -1,21 +1,34 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
 import { GoThreeBars } from 'react-icons/go';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 import { useNavbarContext } from './NavbarContext';
 
+export interface FlowbiteNavbarToggleTheme {
+  base: string;
+  icon: string;
+}
+
 export interface NavbarToggleProps extends ComponentProps<'button'> {
   barIcon?: FC<ComponentProps<'svg'>>;
+  theme?: DeepPartial<FlowbiteNavbarToggleTheme>;
 }
 
-export const NavbarToggle: FC<NavbarToggleProps> = ({ barIcon: BarIcon = GoThreeBars, className, ...props }) => {
+export const NavbarToggle: FC<NavbarToggleProps> = ({
+  barIcon: BarIcon = GoThreeBars,
+  theme: customTheme = {},
+  className,
+  ...props
+}) => {
   const { isOpen, setIsOpen } = useNavbarContext();
 
   const handleClick = () => {
     setIsOpen(!isOpen);
   };
 
-  const theme = useTheme().theme.navbar.toggle;
+  const theme = mergeDeep(useTheme().theme.navbar.toggle, customTheme);
 
   return (
     <button

src/lib/components/Radio/Radio.tsx

@@ -1,17 +1,24 @@
 import classNames from 'classnames';
 import type { ComponentProps } from 'react';
 import { forwardRef } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 
 export interface FlowbiteRadioTheme {
   base: string;
 }
 
-export type RadioProps = Omit<ComponentProps<'input'>, 'type' | 'ref'>;
+export interface RadioProps extends Omit<ComponentProps<'input'>, 'type' | 'ref'> {
+  theme?: DeepPartial<FlowbiteRadioTheme>;
+}
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  ({ theme: customTheme = {}, className, ...props }, ref) => {
+    const theme = mergeDeep(useTheme().theme.radio, customTheme);
 
-export const Radio = forwardRef<HTMLInputElement, RadioProps>(({ className, ...props }, ref) => {
-  const theme = useTheme().theme.radio;
-  return <input ref={ref} className={classNames(theme.base, className)} type="radio" {...props} />;
-});
+    return <input ref={ref} className={classNames(theme.base, className)} type="radio" {...props} />;
+  },
+);
 
 Radio.displayName = 'Radio';

src/lib/components/TextInput/TextInput.tsx

@@ -1,6 +1,8 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, ReactNode } from 'react';
 import { forwardRef } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 import { HelperText } from '../HelperText';
@@ -46,14 +48,27 @@ export interface TextInputProps extends Omit<ComponentProps<'input'>, 'ref' | 'c
   icon?: FC<ComponentProps<'svg'>>;
   rightIcon?: FC<ComponentProps<'svg'>>;
   color?: keyof TextInputColors;
+  theme?: DeepPartial<FlowbiteTextInputTheme>;
 }
 
 export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
   (
-    { sizing = 'md', shadow, helperText, addon, icon: Icon, rightIcon: RightIcon, color = 'gray', className, ...props },
+    {
+      sizing = 'md',
+      shadow,
+      helperText,
+      addon,
+      icon: Icon,
+      rightIcon: RightIcon
+      color = 'gray',
+      className,
+      theme: customTheme = {},
+      ...props
+    },
     ref,
   ) => {
-    const theme = useTheme().theme.textInput;
+    const theme = mergeDeep(useTheme().theme.textInput, customTheme);
+
     return (
       <>
         <div className={classNames(theme.base, className)}>