@mdigital_ui/ui 0.1.4 → 0.2.1

package/README.md

@@ -16,76 +16,45 @@ Modern React component library built with Tailwind CSS v4, designed for multi-br
 ## Installation
 
 ```bash
-npm install @mdigital/ui
+npm install @mdigital_ui/ui
 ```
 
-### Peer Dependencies
-
-Required dependencies:
+**That's it!** All dependencies and styles are included. Tree-shaking ensures only the components you import end up in your production bundle.
 
-```bash
-npm install react react-dom tailwindcss
-```
+### Peer Dependencies
 
-Optional dependencies (install only what you need based on components you use):
+You need to have these in your project:
 
 ```bash
-# For advanced components (Modal, Tooltip, Dropdown, Popover)
-npm install @radix-ui/react-dialog @radix-ui/react-popover @radix-ui/react-tooltip
-
-# For icons
-npm install lucide-react
-
-# For DatePicker
-npm install react-datepicker dayjs
-
-# For Table
-npm install @tanstack/react-table @tanstack/react-virtual
-
-# For Carousel
-npm install swiper
-
-# For Command
-npm install cmdk
-
-# For Charts
-npm install recharts
-
-# For Drawer
-npm install vaul
+npm install react react-dom
 ```
 
-See [TREE_SHAKING_GUIDE.md](./TREE_SHAKING_GUIDE.md) for detailed information on optimizing your bundle.
-
 ## Quick Start
 
-### 1. Configure Tailwind
+### 1. Import Styles
 
-Add the package path to your `tailwind.config.js`:
+In your main application entry point (e.g., `app/layout.tsx` or `src/main.tsx`):
 
-```javascript
-export default {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@mdigital/ui/dist/**/*.{js,ts,jsx,tsx}',
-  ],
-}
+```tsx
+// Import the base styles
+import '@mdigital_ui/ui/styles/base.css'
+// Import light theme (default)
+import '@mdigital_ui/ui/styles/themes/light.css'
+// Optional: Import dark theme for dark mode support
+import '@mdigital_ui/ui/styles/themes/dark.css'
 ```
 
-### 2. Import Styles
-
-In your main CSS file or layout:
+**Or** import in your CSS file:
 
 ```css
 /* app/globals.css or src/index.css */
-@import '@mdigital/ui/styles/base.css';
-@import '@mdigital/ui/styles/themes/light.css';
-
+@import '@mdigital_ui/ui/styles/base.css';
+@import '@mdigital_ui/ui/styles/themes/light.css';
 /* Optional: Dark mode */
-@import '@mdigital/ui/styles/themes/dark.css';
+@import '@mdigital_ui/ui/styles/themes/dark.css';
 ```
 
-### 3. Use Components
+### 2. Use Components
 
 ```tsx
 import { Button, Input, Card } from '@mdigital/ui'
@@ -104,39 +73,33 @@ function App() {
 
 ## Import Patterns
 
-### Subpath Imports (Recommended for Tree-Shaking)
-
-For optimal bundle size and to avoid installing unnecessary dependencies:
+### Subpath Imports (Recommended)
 
 ```tsx
-import Button from '@mdigital/ui/button'
-import Input from '@mdigital/ui/input'
-import Select from '@mdigital/ui/select'
+import Button from '@mdigital_ui/ui/button'
+import Input from '@mdigital_ui/ui/input'
+import Table from '@mdigital_ui/ui/table'
 ```
 
-**Benefits:**
-- Only bundles the components you use
-- Avoids peer dependency warnings for unused components
-- Fastest build times
+**Tree-shaking works automatically:**
+- Import only `Button`? Only Button code ends up in your bundle
+- Import `Table`? Table + @tanstack/react-table are bundled
+- Don't import `Carousel`? Swiper never touches your bundle
 
-### Named Imports (Requires All Peer Dependencies)
-
-If you've installed all optional peer dependencies, you can use named imports:
+### Named Imports
 
 ```tsx
-import { Button, Input, Select, Table, DatePicker } from '@mdigital/ui'
+import { Button, Input, Select } from '@mdigital_ui/ui'
 ```
 
-**Note:** This requires installing all optional peer dependencies, even for components you don't use. Your bundler may fail if dependencies for unused components aren't installed.
+Both import styles work identically. Use whichever you prefer.
 
 ### Type Imports
 
 ```tsx
-import type { ButtonProps, InputProps } from '@mdigital/ui'
+import type { ButtonProps, InputProps } from '@mdigital_ui/ui'
 ```
 
-**See [TREE_SHAKING_GUIDE.md](./TREE_SHAKING_GUIDE.md) for detailed import strategies.**
-
 ## Theming
 
 ### CSS Variable Overrides

package/dist/index.js

@@ -1,16 +1,16 @@
-export { tooltip_default as Tooltip } from './chunk-D3JWPGCA.js';
 export { Transfer } from './chunk-EYTOKUBM.js';
+export { tooltip_default as Tooltip } from './chunk-D3JWPGCA.js';
 export { tree_select_default as TreeSelect } from './chunk-JZCHZ4B3.js';
 export { tree_default as Tree } from './chunk-SAVE5ACL.js';
 export { upload_default as Upload } from './chunk-I5ANSIDK.js';
 export { slider_default as Slider } from './chunk-NNSS366W.js';
 export { stepper_default as Stepper } from './chunk-MLDX3Z67.js';
 export { switch_default as Switch } from './chunk-AOITJRSV.js';
-export { table_default as Table } from './chunk-L3SP7GHC.js';
-export { toggle_group_default as ToggleGroup } from './chunk-SK5ECBBK.js';
-export { tabs_default as Tabs } from './chunk-OW5A5IIF.js';
 export { textarea_default as Textarea } from './chunk-FPOXTCYV.js';
+export { tabs_default as Tabs } from './chunk-OW5A5IIF.js';
 export { toggle_default as Toggle } from './chunk-DPOSWW22.js';
+export { table_default as Table } from './chunk-L3SP7GHC.js';
+export { toggle_group_default as ToggleGroup } from './chunk-SK5ECBBK.js';
 export { progress_default as Progress } from './chunk-RQBXZKTH.js';
 export { radio_default as Radio } from './chunk-KTBPIEP2.js';
 export { radio_group_default as RadioGroup } from './chunk-DOKTHDG3.js';