update @material-tailwind/react

README.md

@@ -11,7 +11,7 @@
     <img src="https://img.shields.io/npm/dt/@material-tailwind/react.svg" alt="Total Downloads">
   </a>
   <a href="https://github.com/creativetimofficial/material-tailwind/releases">
-    <img src="https://img.shields.io/badge/version-2.1.9-blue.svg" alt="Version" />
+    <img src="https://img.shields.io/badge/version-2.1.10-blue.svg" alt="Version" />
   </a>
 </p>
 <p align="center">

docs-content/react/releases.ts

@@ -1,4 +1,19 @@
 export const releases = [
+  {
+    version: "2.1.10",
+    date: "September 3, 2024",
+    name: "@material-tailwind/react",
+    description: "Material Tailwind v2.1.10",
+    content: [
+      {
+        title: "patch changes",
+        data: [
+          "Update the input design for black and white colors.",
+          "Add black and white colors support for textarea component.",
+        ],
+      },
+    ],
+  },
   {
     version: "2.1.9",
     date: "February 8, 2024",

documentation/react/release-notes.mdx

@@ -2,6 +2,7 @@
 title: Release Notes - Material Tailwind
 description: Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
 navigation: [
+              "v2.1.10",
               "v2.1.9",
               "v2.1.8",
               "v2.1.7",

packages/material-tailwind-react/README.md

@@ -8,7 +8,7 @@
     <img src="https://img.shields.io/npm/dt/@material-tailwind/react.svg" alt="Total Downloads">
   </a>
   <a href="https://github.com/creativetimofficial/material-tailwind/releases">
-    <img src="https://img.shields.io/badge/version-2.1.9-blue.svg" alt="Version" />
+    <img src="https://img.shields.io/badge/version-2.1.10-blue.svg" alt="Version" />
   </a>
   <a href="https://www.material-tailwind.com/docs/react/license">
     <img src="https://img.shields.io/badge/license-MIT-blue" alt="Licenese">

packages/material-tailwind-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@material-tailwind/react",
   "homepage": "https://material-tailwind.com",
-  "version": "2.1.9",
+  "version": "2.1.10",
   "description": "@material-tailwind/react is an easy-to-use components library for ReactJS & Tailwind CSS inspired by Material Design.",
   "repository": "https://github.com/creativetimofficial/material-tailwind",
   "license": "MIT",

packages/material-tailwind-react/src/theme/components/input/inputStatic/inputStaticLabelColors.ts

@@ -1,10 +1,10 @@
 const inputStaticLabelColors: object = {
   black: {
-    color: "!text-black peer-focus:black",
+    color: "!text-black peer-focus:!text-black",
     after: "after:border-black peer-focus:after:border-black",
   },
   white: {
-    color: "!text-white peer-focus:white",
+    color: "!text-white peer-focus:!text-white",
     after: "after:border-white peer-focus:after:border-white",
   },
   "blue-gray": {

packages/material-tailwind-react/src/theme/components/textarea/textareaOutlined/textareaOutlinedColors.ts

@@ -1,4 +1,14 @@
 const textareaOutlinedColors: object = {
+  black: {
+    color: "!text-black",
+    borderColor: "!border-black",
+    borderColorFocused: "focus:!border-black",
+  },
+  white: {
+    color: "!text-white",
+    borderColor: "!border-white",
+    borderColorFocused: "focus:!border-white",
+  },
   "blue-gray": {
     borderColor: "border-blue-gray-200",
     borderColorFocused: "focus:border-blue-gray-500",

packages/material-tailwind-react/src/theme/components/textarea/textareaOutlined/textareaOutlinedLabelColors.ts

@@ -1,4 +1,14 @@
 const textareaOutlinedLabelColors: object = {
+  black: {
+    color: "!text-black peer-focus:!text-black",
+    before: "before:!border-black peer-focus:before:!border-black",
+    after: "after:!border-black peer-focus:after:!border-black",
+  },
+  white: {
+    color: "!text-white peer-focus:!text-white",
+    before: "before:!border-white peer-focus:before:!border-white",
+    after: "after:!border-white peer-focus:after:!border-white",
+  },
   "blue-gray": {
     color: "text-blue-gray-400 peer-focus:text-blue-gray-500",
     before: "before:border-blue-gray-200 peer-focus:before:!border-blue-gray-500",

packages/material-tailwind-react/src/theme/components/textarea/textareaStandard/textareaStandardColors.ts

@@ -1,4 +1,14 @@
 const textareaStandardColors: object = {
+  black: {
+    color: "!text-black",
+    borderColor: "!border-black",
+    borderColorFocused: "focus:!border-black",
+  },
+  white: {
+    color: "!text-white",
+    borderColor: "!border-white",
+    borderColorFocused: "focus:!border-white",
+  },
   "blue-gray": {
     borderColor: "border-blue-gray-200",
     borderColorFocused: "focus:border-blue-gray-500",

packages/material-tailwind-react/src/theme/components/textarea/textareaStandard/textareaStandardLabelColors.ts

@@ -1,4 +1,12 @@
 const textareaStandardLabelColors: object = {
+  black: {
+    color: "!text-black peer-focus:!text-black",
+    after: "after:!border-black peer-focus:after:!border-black",
+  },
+  white: {
+    color: "!text-white peer-focus:!text-white",
+    after: "after:!border-white peer-focus:after:!border-white",
+  },
   "blue-gray": {
     color: "text-blue-gray-500 peer-focus:text-blue-gray-500",
     after: "after:border-blue-gray-500 peer-focus:after:!border-blue-gray-500",

packages/material-tailwind-react/src/theme/components/textarea/textareaStatic/textareaStaticColors.ts

@@ -1,4 +1,14 @@
 const textareaStaticColors: object = {
+  black: {
+    color: "!text-black",
+    borderColor: "!border-black",
+    borderColorFocused: "focus:!border-black",
+  },
+  white: {
+    color: "!text-white",
+    borderColor: "!border-white",
+    borderColorFocused: "focus:!border-white",
+  },
   "blue-gray": {
     borderColor: "border-blue-gray-200",
     borderColorFocused: "focus:border-blue-gray-500",

packages/material-tailwind-react/src/theme/components/textarea/textareaStatic/textareaStaticLabelColors.ts

@@ -1,4 +1,12 @@
 const textareaStaticLabelColors: object = {
+  black: {
+    color: "!text-black peer-focus:!text-black",
+    after: "after:!border-black peer-focus:after:!border-black",
+  },
+  white: {
+    color: "!text-white peer-focus:!text-white",
+    after: "after:!border-white peer-focus:after:!border-white",
+  },
   "blue-gray": {
     color: "text-blue-gray-500 peer-focus:text-blue-gray-500",
     after: "after:border-blue-gray-500 peer-focus:after:border-blue-gray-500",