improve README

README.md

@@ -1,30 +1,30 @@
 # Soda
 
-<a href="https://npm.im/soda-material" target="_blank"><img src="https://img.shields.io/badge/-soda--material-grey?logo=npm" alt="soda-material" /></a>&nbsp;
+<a href="https://github.com/YieldRay/soda" target="_blank"><img src="https://img.shields.io/badge/YieldRay/soda-grey?logo=github" alt="github" /></a>&nbsp;
 <a href="https://www.npmjs.com/package/soda-material" target="_blank"><img src="https://img.shields.io/npm/v/soda-material" alt="npm" /></a>&nbsp;
 <a href="https://packagephobia.com/result?p=soda-material" target="_blank"><img src="https://packagephobia.com/badge?p=soda-material" alt="install size" /></a>&nbsp;
 
-A React(>=18) component library that may follow
-[Material Design 3](https://m3.material.io/components) (a.k.a. Material You)
+A React (>=18) component library that follows
+[Material Design 3](https://m3.material.io/components) (a.k.a. Material You).
 
 Features:
 
--   Less dependencies (bundled in npm package)
--   Follow the Material You design
+-   Fewer dependencies (bundled in the npm package)
+-   Follows the Material You design
 -   Complete implementation of Material You components
 -   Keyboard accessibility
--   Support both controlled and uncontrolled
+-   Supports both controlled and uncontrolled components
 
 > [!WARNING]  
-> Working in progress, API is unstable and can be changed in any time.  
-> For production, you may want use the official
+> Work in progress, API is unstable and can change at any time.  
+> For production, you may want to use the official
 > [material web](https://github.com/material-components/material-web) component
 > library or the [MDUI](https://www.mdui.org/) library.
 
-This is an experimental project, (best) browser support:  
-Chrome>=105, Safari>=15.4, Firefox>=121
+This is an experimental project with the best browser support for:  
+Chrome >= 105, Safari >= 15.4, Firefox >= 121
 
-> The recommended browser is Chrome>=119
+> The recommended browser is Chrome >= 119
 
 # Installation
 
@@ -45,11 +45,11 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 )
 ```
 
-If bundle size is your concern, it's also possible to import only the specific
-component.
+If bundle size is your concern, it's also possible to import only specific
+components.
 
 ```tsx
-import 'soda-material/dist/style.css' // Still need to import the style in some where
+import 'soda-material/dist/style.css' // You still need to import the style somewhere
 import { Button } from 'soda-material/dist/components/button'
 import { Select } from 'soda-material/dist/composition/Select'
 
@@ -65,32 +65,32 @@ export default function App() {
 
 Next.js is also supported out of the box.
 
-> [!TIP]
+> [!TIP]  
 > This library is designed to maintain a small footprint, making it easy to integrate with other libraries in the ecosystem.
-> For instance, it pairs well with Tailwind CSS, although this does not depend on it.
+> For instance, it pairs well with Tailwind CSS, though it does not depend on it.
 
 # Documentation
 
 See: <https://soda.js.org>
 
 > [!IMPORTANT]  
 > Only components defined in the
-> [Material Design Docs](https://m3.material.io/components) will be put into
-> `src/components` directory, these components do NOT include heavy logic.  
-> Other necessary components or helpers can be found at `src/composition`
+> [Material Design Docs](https://m3.material.io/components) will be included in the
+> `src/components` directory. These components do NOT include heavy logic.  
+> Other necessary components or helpers can be found in the `src/composition`
 > directory.
 
 > [!NOTE]  
-> Most components in `src/components` forward `ref` attribute for library
+> Most components in `src/components` forward the `ref` attribute for library
 > interactivity.  
-> If has, it will be the root DOM node of the entire component.  
-> If not, it will be documented and will be checked if you use typescript.
+> If present, it will be the root DOM node of the entire component.  
+> If not, it will be documented and will be checked if you use TypeScript.
 
 # TODO
 
 -   [ ] More ARIA support
 
--   [ ] More customizable CSS vars
+-   [ ] More customizable CSS variables
 
 # Development
 
@@ -101,8 +101,8 @@ npm run storybook
 
 Naming convention:
 
--   A `.tsx` file with a capitalized beginning is a react component (exports the same
+-   A `.tsx` file with a capitalized beginning is a React component (exports the same
     name, no default export)
--   A `.scss` file will use _hyphen_ to separate component name in the file name
--   In any css code, use _underscore_ to separate component name, use _hyphen_ to
-    separate name segments
+-   A `.scss` file will use _hyphen_ to separate component names in the file name
+-   In any CSS code, use _underscore_ to separate component names, use _hyphen_ to
+    separate name segments.

package.json

@@ -24,7 +24,7 @@
         "@eslint/js": "^9.12.0",
         "@floating-ui/react": "^0.26.24",
         "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
-        "@material/material-color-utilities": "^0.2.7",
+        "@material/material-color-utilities": "^0.3.0",
         "@mdi/js": "^7.4.47",
         "@mdi/react": "^1.6.1",
         "@storybook/addon-essentials": "^8.3.5",
@@ -50,7 +50,7 @@
         "typescript": "^5.6.2",
         "typescript-eslint": "^8.8.0",
         "vite": "^5.4.8",
-        "vite-plugin-dts": "^3.9.1"
+        "vite-plugin-dts": "^4.2.3"
     },
     "publishConfig": {
         "registry": "https://registry.npmjs.org"