Merge pull request #819 from creativetimofficial/@material-tailwind/h…

…tml-v2.3.0 @Material tailwind/html v2.3.0
creativetimofficial · Aug 30, 2024 · 332e360 · 332e360
2 parents 97ff4c4 + 022e52b
commit 332e360
Show file tree

Hide file tree

Showing 60 changed files with 2,445 additions and 3,216 deletions.
diff --git a/docs-content/html/accordion/accordion-custom-icon.tsx b/docs-content/html/accordion/accordion-custom-icon.tsx
@@ -1,72 +1,112 @@
+import { useEffect, useRef, useState } from "react";
+
 export function AccordionCustomIcon() {
+  const [openIndex, setOpenIndex] = useState(null);
+  const contentRefs = useRef([]);
+
+  // Toggle the accordion item
+  const toggleAccordion = (index) => {
+    setOpenIndex((prevIndex) => (prevIndex === index ? null : index));
+  };
+
+  // Effect to adjust maxHeight for smooth transitions
+  useEffect(() => {
+    contentRefs.current.forEach((content, index) => {
+      if (content) {
+        if (openIndex === index) {
+          content.style.maxHeight = content.scrollHeight + 'px';
+        } else {
+          content.style.maxHeight = '0px';
+        }
+      }
+    });
+  }, [openIndex]);
+
+  const up = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="w-4 h-4">
+  <path fill-rule="evenodd" d="M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z" clip-rule="evenodd" />
+</svg>
+
+
+  const down = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="w-4 h-4">
+  <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+</svg>
+
+
+
+
   return (
-    <>
-      <div className="relative mb-3">
-        <h6 className="mb-0">
-          <button
-            className="border-slate-100 text-slate-700 rounded-t-1 group relative flex w-full cursor-pointer items-center border-b border-solid p-4 text-left font-semibold text-dark-500 transition-all ease-in"
-            data-collapse-target="animated-collapse-1"
+    <div className="accordion">
+      {/* Accordion Item 1 */}
+      <div className="border-b border-slate-200">
+        <button
+          onClick={() => toggleAccordion(0)}
+          className="w-full flex justify-between items-center py-5 text-slate-800"
+        >
+          <span>What is Material Tailwind?</span>
+          <span
+            className={`text-slate-800 transition-transform duration-300`}
           >
-            <span>What is Material Tailwind?</span>
-            <i className="fa fa-chevron-down absolute right-0 pt-1 text-base transition-transform group-open:rotate-180"></i>
-          </button>
-        </h6>
+            {openIndex === 0 ? up : down}
+          </span>
+        </button>
         <div
-          data-collapse="animated-collapse-1"
-          className="h-0 overflow-hidden transition-all duration-300 ease-in-out"
+          ref={(el) => (contentRefs.current[0] = el)}
+          className="overflow-hidden transition-all duration-300 ease-in-out"
+          style={{ maxHeight: '0px' }}
         >
-          <div className="p-4 text-sm leading-normal text-blue-gray-500/80">
-            We&apos;re not always in the position that we want to be at.
-            We&apos;re constantly growing. We&apos;re constantly making
-            mistakes. We&apos;re constantly trying to express ourselves and
-            actualize our dreams.
+          <div className="pb-5 text-sm text-slate-500">
+            Material Tailwind is a framework that enhances Tailwind CSS with additional styles and components.
           </div>
         </div>
       </div>
-      <div className="relative mb-3">
-        <h6 className="mb-0">
-          <button
-            className="border-slate-100 text-slate-700 rounded-t-1 group relative flex w-full cursor-pointer items-center border-b border-solid p-4 text-left font-semibold text-dark-500 transition-all ease-in"
-            data-collapse-target="animated-collapse-2"
+
+      {/* Accordion Item 2 */}
+      <div className="border-b border-slate-200">
+        <button
+          onClick={() => toggleAccordion(1)}
+          className="w-full flex justify-between items-center py-5 text-slate-800"
+        >
+          <span>How to use Material Tailwind?</span>
+          <span
+            className={`text-slate-800 transition-transform duration-300`}
           >
-            <span>How to use Material Tailwind?</span>
-            <i className="fa fa-chevron-down absolute right-0 pt-1 text-base transition-transform group-open:rotate-180"></i>
-          </button>
-        </h6>
+            {openIndex === 1 ? up : down}
+          </span>
+        </button>
         <div
-          data-collapse="animated-collapse-2"
-          className="h-0 overflow-hidden transition-all duration-300 ease-in-out"
+          ref={(el) => (contentRefs.current[1] = el)}
+          className="overflow-hidden transition-all duration-300 ease-in-out"
+          style={{ maxHeight: '0px' }}
         >
-          <div className="p-4 text-sm leading-normal text-blue-gray-500/80">
-            We&apos;re not always in the position that we want to be at.
-            We&apos;re constantly growing. We&apos;re constantly making
-            mistakes. We&apos;re constantly trying to express ourselves and
-            actualize our dreams.
+          <div className="pb-5 text-sm text-slate-500">
+            You can use Material Tailwind by importing its components into your Tailwind CSS project.
           </div>
         </div>
       </div>
-      <div className="relative mb-3">
-        <h6 className="mb-0">
-          <button
-            className="border-slate-100 text-slate-700 rounded-t-1 group relative flex w-full cursor-pointer items-center border-b border-solid p-4 text-left font-semibold text-dark-500 transition-all ease-in"
-            data-collapse-target="animated-collapse-3"
+
+      {/* Accordion Item 3 */}
+      <div className="border-b border-slate-200">
+        <button
+          onClick={() => toggleAccordion(2)}
+          className="w-full flex justify-between items-center py-5 text-slate-800"
+        >
+          <span>What can I do with Material Tailwind?</span>
+          <span
+            className={`text-slate-800 transition-transform duration-300`}
           >
-            <span>What can I do with Material Tailwind?</span>
-            <i className="fa fa-chevron-down absolute right-0 pt-1 text-base transition-transform group-open:rotate-180"></i>
-          </button>
-        </h6>
+            {openIndex === 2 ? up : down}
+          </span>
+        </button>
         <div
-          data-collapse="animated-collapse-3"
-          className="h-0 overflow-hidden transition-all duration-300 ease-in-out"
+          ref={(el) => (contentRefs.current[2] = el)}
+          className="overflow-hidden transition-all duration-300 ease-in-out"
+          style={{ maxHeight: '0px' }}
         >
-          <div className="p-4 text-sm leading-normal text-blue-gray-500/80">
-            We&apos;re not always in the position that we want to be at.
-            We&apos;re constantly growing. We&apos;re constantly making
-            mistakes. We&apos;re constantly trying to express ourselves and
-            actualize our dreams.
+          <div className="pb-5 text-sm text-slate-500">
+            Material Tailwind allows you to quickly build modern, responsive websites with a focus on design.
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/docs-content/html/accordion/accordion-disabled.tsx b/docs-content/html/accordion/accordion-disabled.tsx
@@ -1,75 +1,114 @@
+import { useEffect, useRef, useState } from "react";
+
 export function AccordionDisabled() {
+  const [openIndex, setOpenIndex] = useState(null);
+  const contentRefs = useRef([]);
+
+  // Toggle the accordion item
+  const toggleAccordion = (index) => {
+    setOpenIndex((prevIndex) => (prevIndex === index ? null : index));
+  };
+
+  // Effect to adjust maxHeight for smooth transitions
+  useEffect(() => {
+    contentRefs.current.forEach((content, index) => {
+      if (content) {
+        if (openIndex === index) {
+          content.style.maxHeight = content.scrollHeight + 'px';
+        } else {
+          content.style.maxHeight = '0px';
+        }
+      }
+    });
+  }, [openIndex]);
+
+  const plus = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="w-4 h-4">
+  <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+</svg>
+
+
+
+  const minus = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="w-4 h-4">
+  <path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
+</svg>
+
+
+
+
   return (
-    <>
-      <div className="relative mb-3">
-        <h6 className="pointer-events-none relative block w-full opacity-50">
-          <button
-            className="flex w-full select-none items-center justify-between border-b border-b-blue-gray-100 py-4 font-sans text-xl font-semibold leading-snug text-blue-gray-700 antialiased transition-colors hover:text-blue-gray-900"
-            data-collapse-target="disabled-collapse-1"
+    <div className="accordion">
+      {/* Accordion Item 1 */}
+      <div className="border-b border-slate-200">
+        <button
+          onClick={() => toggleAccordion(0)}
+          disabled
+          className="w-full flex justify-between items-center py-5 text-slate-400 cursor-not-allowed"
+        >
+          <span>What is Material Tailwind?</span>
+          <span
+            className={`text-slate-400 transition-transform duration-300`}
           >
-            <span>What is Material Tailwind?</span>
-            <i className="fa fa-plus absolute right-0 pt-1 text-xs group-open:opacity-0"></i>
-            <i className="fa fa-minus absolute right-0 pt-1 text-xs opacity-0 group-open:opacity-100"></i>
-          </button>
-        </h6>
+            {openIndex === 0 ? minus : plus}
+          </span>
+        </button>
         <div
-          data-collapse="disabled-collapse-1"
-          className="h-0 overflow-hidden transition-all duration-300 ease-in-out"
+          ref={(el) => (contentRefs.current[0] = el)}
+          className="overflow-hidden transition-all duration-300 ease-in-out"
+          style={{ maxHeight: '0px' }}
         >
-          <div className="p-4 text-sm leading-normal text-blue-gray-500/80">
-            We&apos;re not always in the position that we want to be at.
-            We&apos;re constantly growing. We&apos;re constantly making
-            mistakes. We&apos;re constantly trying to express ourselves and
-            actualize our dreams.
+          <div className="pb-5 text-sm text-slate-500">
+            Material Tailwind is a framework that enhances Tailwind CSS with additional styles and components.
           </div>
         </div>
       </div>
-      <div className="relative mb-3">
-        <h6 className="mb-0">
-          <button
-            className="border-slate-100 text-slate-700 rounded-t-1 group relative flex w-full cursor-pointer items-center border-b border-solid p-4 text-left font-semibold text-dark-500 transition-all ease-in"
-            data-collapse-target="disabled-collapse-2"
+
+      {/* Accordion Item 2 */}
+      <div className="border-b border-slate-200">
+        <button
+          onClick={() => toggleAccordion(1)}
+          className="w-full flex justify-between items-center py-5 text-slate-800"
+        >
+          <span>How to use Material Tailwind?</span>
+          <span
+            className={`text-slate-800 transition-transform duration-300`}
           >
-            <span>How to use Material Tailwind?</span>
-            <i className="fa fa-plus absolute right-0 pt-1 text-xs group-open:opacity-0"></i>
-            <i className="fa fa-minus absolute right-0 pt-1 text-xs opacity-0 group-open:opacity-100"></i>
-          </button>
-        </h6>
+            {openIndex === 1 ? minus : plus}
+          </span>
+        </button>
         <div
-          data-collapse="disabled-collapse-2"
-          className="h-0 overflow-hidden transition-all duration-300 ease-in-out"
+          ref={(el) => (contentRefs.current[1] = el)}
+          className="overflow-hidden transition-all duration-300 ease-in-out"
+          style={{ maxHeight: '0px' }}
         >
-          <div className="p-4 text-sm leading-normal text-blue-gray-500/80">
-            We&apos;re not always in the position that we want to be at.
-            We&apos;re constantly growing. We&apos;re constantly making
-            mistakes. We&apos;re constantly trying to express ourselves and
-            actualize our dreams.
+          <div className="pb-5 text-sm text-slate-500">
+            You can use Material Tailwind by importing its components into your Tailwind CSS project.
           </div>
         </div>
       </div>
-      <div className="relative mb-3">
-        <h6 className="mb-0">
-          <button
-            className="border-slate-100 text-slate-700 rounded-t-1 group relative flex w-full cursor-pointer items-center border-b border-solid p-4 text-left font-semibold text-dark-500 transition-all ease-in"
-            data-collapse-target="disabled-collapse-3"
+
+      {/* Accordion Item 3 */}
+      <div className="border-b border-slate-200">
+        <button
+          onClick={() => toggleAccordion(2)}
+          className="w-full flex justify-between items-center py-5 text-slate-800"
+        >
+          <span>What can I do with Material Tailwind?</span>
+          <span
+            className={`text-slate-800 transition-transform duration-300`}
           >
-            <span>What can I do with Material Tailwind?</span>
-            <i className="fa fa-plus absolute right-0 pt-1 text-xs group-open:opacity-0"></i>
-            <i className="fa fa-minus absolute right-0 pt-1 text-xs opacity-0 group-open:opacity-100"></i>
-          </button>
-        </h6>
+            {openIndex === 2 ? minus : plus}
+          </span>
+        </button>
         <div
-          data-collapse="disabled-collapse-3"
-          className="h-0 overflow-hidden transition-all duration-300 ease-in-out"
+          ref={(el) => (contentRefs.current[2] = el)}
+          className="overflow-hidden transition-all duration-300 ease-in-out"
+          style={{ maxHeight: '0px' }}
         >
-          <div className="p-4 text-sm leading-normal text-blue-gray-500/80">
-            We&apos;re not always in the position that we want to be at.
-            We&apos;re constantly growing. We&apos;re constantly making
-            mistakes. We&apos;re constantly trying to express ourselves and
-            actualize our dreams.
+          <div className="pb-5 text-sm text-slate-500">
+            Material Tailwind allows you to quickly build modern, responsive websites with a focus on design.
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }