Feat/treeshake single components

.gitignore

@@ -13,4 +13,5 @@ tsconfig.tsbuildinfo
 yarn-debug.log*
 yarn-error.log*
 dist
-.contentlayer
+.contentlayer
+.yalc

.vscode/settings.json

@@ -13,7 +13,7 @@
     ".vercel/": true,
     "build/": true,
     "coverage/": true,
-    "lib/": true,
+
     "node_modules": true,
     "storybook-static/": true,
     "tsconfig.tsbuildinfo": true,

package.json

@@ -15,8 +15,16 @@
   "bugs": "https://github.com/themesberg/flowbite-react/issues",
   "license": "MIT",
   "files": [
-    "./lib/"
+    "lib"
   ],
+  "exports": {
+    "./*": {
+      "import": "./lib/esm/components/*/index.js",
+      "require": "./lib/cjs/components/*/index.js",
+      "default": "./lib/esm/components/*/index.js",
+      "types": "./lib/esm/components/*/index.d.ts"
+    }
+  },
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
   "types": "./lib/esm/index.d.ts",
@@ -57,6 +65,7 @@
     "@floating-ui/react": "^0.26.2",
     "contentlayer": "^0.3.4",
     "flowbite": "^2.0.0",
+    "flowbite-react": "file:.yalc/flowbite-react",
     "markdown-toc": "^1.2.0",
     "next-contentlayer": "^0.3.4",
     "react-icons": "^4.11.0",

src/components/List/List.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import { twMerge } from 'tailwind-merge';
-import type { FlowbiteStateColors } from '../..';
+import type { FlowbiteStateColors } from '../Flowbite';
 import { mergeDeep } from '../../helpers/merge-deep';
 import { getTheme } from '../../theme-store';
 import type { DeepPartial } from '../../types';

src/components/TextInput/theme.ts

@@ -22,8 +22,8 @@ export const textInputTheme: FlowbiteTextInputTheme = {
         lg: 'sm:text-md p-4',
       },
       colors: {
-        gray: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-cyan-500 focus:ring-cyan-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-cyan-500 dark:focus:ring-cyan-500',
-        info: 'border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 focus:border-cyan-500 focus:ring-cyan-500 dark:border-cyan-400 dark:bg-cyan-100 dark:focus:border-cyan-500 dark:focus:ring-cyan-500',
+        gray: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-cyan-500 focus:ring-red-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-cyan-500 dark:focus:ring-red-500',
+        info: 'border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 focus:border-cyan-500 focus:ring-red-500 dark:border-cyan-400 dark:bg-cyan-100 dark:focus:border-cyan-500 dark:focus:ring-red-500',
         failure:
           'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500',
         warning:

src/index.ts

@@ -1,48 +1,5 @@
-export * from './components/Accordion';
-export * from './components/Alert';
-export * from './components/Avatar';
-export * from './components/Badge';
-export * from './components/Banner';
-export * from './components/Blockquote';
-export * from './components/Breadcrumb';
-export * from './components/Button';
-export * from './components/Card';
-export * from './components/Carousel';
-export * from './components/Checkbox';
-export * from './components/DarkThemeToggle';
-export * from './components/Datepicker';
-export * from './components/Dropdown';
-export * from './components/FileInput';
-export * from './components/FloatingLabel';
-export * from './components/Flowbite';
-export type { CustomFlowbiteTheme } from './components/Flowbite/FlowbiteTheme';
-export * from './components/Footer';
-export * from './components/HelperText';
-export * from './components/Kbd';
-export * from './components/Label';
-export * from './components/List';
-export * from './components/ListGroup';
-export * from './components/Modal';
-export * from './components/Navbar';
-export * from './components/Pagination';
-export * from './components/Progress';
-export * from './components/Radio';
-export * from './components/RangeSlider';
-export * from './components/Rating';
-export * from './components/Select';
-export * from './components/Sidebar';
-export * from './components/Spinner';
-export * from './components/Table';
-export * from './components/Tabs';
-export * from './components/TextInput';
-export * from './components/Textarea';
-export * from './components/ThemeModeScript';
-export * from './components/Timeline';
-export * from './components/Toast';
-export * from './components/ToggleSwitch';
-export * from './components/Tooltip';
-
 export * from './hooks/use-theme-mode';
 
 export * from './theme';
 export { getTheme, getThemeMode } from './theme-store';
+export type { CustomFlowbiteTheme } from './components/Flowbite/FlowbiteTheme';

src/theme.ts

@@ -1,4 +1,4 @@
-import type { FlowbiteTheme } from '.';
+import type { FlowbiteTheme } from './components/Flowbite';
 import { accordionTheme } from './components/Accordion/theme';
 import { alertTheme } from './components/Alert/theme';
 import { avatarTheme } from './components/Avatar/theme';

tsconfig.json

@@ -6,7 +6,7 @@
     "forceConsistentCasingInFileNames": true,
     "incremental": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "module": "ESNext",
     "moduleResolution": "node",

yalc.lock

@@ -0,0 +1,10 @@
+{
+  "version": "v1",
+  "packages": {
+    "flowbite-react": {
+      "version": "0.7.2",
+      "signature": "ce9643f5e772797e48ef26e980e7d754",
+      "file": true
+    }
+  }
+}