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

…tml-new-comps-aa

@Material tailwind/html new comps aa

docs-content/html/card/card-with-placeholder.tsx

@@ -0,0 +1,22 @@
+export function CardWithPlaceholder() {
+  return (
+    <div className="relative min-h-60 w-full flex flex-col justify-center items-center my-6 bg-white shadow-sm border border-slate-200 rounded-lg p-2">
+      <div className="p-3 text-center">
+        <div className="flex justify-center mb-4">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="text-slate-400 w-10 h-10">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
+          </svg>
+        </div>
+        <div className="flex justify-center mb-2">
+          <h5 className="text-slate-800 text-2xl font-semibold">
+            No data sources linked.
+          </h5>
+        </div>
+        <p className="block text-slate-600 leading-normal font-light mb-4 max-w-lg">
+          No APIs created yet. Contact us for more details.
+        </p>
+      </div>
+    </div>
+
+  );
+}

docs-content/html/card/card-with-scroll-area.tsx

@@ -0,0 +1,28 @@
+export function CardWithScrollArea() {
+  return (
+    <div className="relative w-96 bg-white shadow-sm border border-slate-200 rounded-lg p-3 pb-6">
+      <div className="flex justify-center mb-4 mt-5">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="w-10 h-10 text-purple-500">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z" />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z" />
+          </svg>
+        </div>
+
+        <div className="flex justify-center mb-3">
+          <h5 className="text-slate-800 text-2xl font-semibold">
+            Scrollable Content
+          </h5>
+        </div>
+      <div className="p-3 mt-5 border-t border-slate-100 text-center max-h-60 overflow-y-auto [&::-webkit-scrollbar-thumb]:rounded-xl [&::-webkit-scrollbar-thumb]:bg-slate-300 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:rounded-xl [&::-webkit-scrollbar-track]:bg-slate-100">
+        <p className="block text-slate-600 leading-normal font-light mb-4 max-w-lg">
+          Because it&apos;s about motivating the doers. Because I&apos;m here to follow my dreams and inspire others. Here is some additional text to test the scrolling feature. Imagine this is a long article that you can scroll through.
+        </p> <br/>
+        <p className="block text-slate-600 leading-normal font-light mb-4 max-w-lg">
+          Still more content to keep the scroll active. Let's make sure the scrollbar styling is correct. Apple's scrollbar style is subtle, with a thin, sleek design. Scroll down for more! Keep adding more content to ensure the scroll is working. The card's content should now be scrollable. Test it out!
+          More text to fill the space, as we continue to check how scroll behaves.
+        </p>
+      </div>
+    </div>
+
+  );
+}

docs-content/html/card/index.ts

@@ -21,4 +21,6 @@ export * from "./card-with-bottom-image";
 export * from "./card-with-animation";
 export * from "./card-with-alert";
 export * from "./card-with-centered-content";
+export * from "./card-with-placeholder";
+export * from "./card-with-scroll-area";
 export * from "./card-with-hover";

docs-content/html/modal/index.ts

@@ -0,0 +1,7 @@
+export * from "./modal-default";
+export * from "./modal-sizes";
+export * from "./web-3-modal";
+export * from "./modal-custom-animation";
+export * from "./modal-with-form";
+export * from "./modal-with-image";
+

docs-content/html/modal/modal-custom-animation.tsx

@@ -0,0 +1,42 @@
+export function ModalCustomAnimation() {
+  return (
+    <>
+      <button 
+        data-dialog-target="animated-modal"
+        className="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">
+        Open Animation Modal
+      </button>
+      <div
+        data-dialog-backdrop="animated-modal"
+        data-dialog-backdrop-close="true"
+        className="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300"
+      >
+        <div
+          data-dialog="animated-modal"
+          data-dialog-mount="opacity-100 translate-y-0 scale-100"
+          data-dialog-unmount="opacity-0 -translate-y-28 scale-90 pointer-events-none"
+          data-dialog-transition="transition-all duration-300"
+          className="relative m-4 p-4 w-2/5 min-w-[40%] max-w-[40%] rounded-lg bg-white shadow-sm"
+        >
+          <div className="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800">
+            Custom Animation Modal
+          </div>
+          <div className="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light">
+            The key to more success is to have a lot of pillows. Put it this
+            way, it took me twenty five years to get these plants, twenty five
+            years of blood sweat and tears, and I&apos;m never giving up,
+            I&apos;m just getting started. I&apos;m up to something. Fan luv.
+          </div>
+          <div className="flex shrink-0 flex-wrap items-center pt-4 justify-end">
+            <button data-dialog-close="true" className="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
+              Cancel
+            </button>
+            <button data-dialog-close="true" className="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">
+              Confirm
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

docs-content/html/modal/modal-default.tsx

@@ -0,0 +1,39 @@
+export function ModalDefault() {
+  return (
+    <>
+      <button 
+        data-dialog-target="modal"
+        className="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">
+        Open Modal
+      </button>
+      <div
+        data-dialog-backdrop="modal"
+        data-dialog-backdrop-close="true"
+        className="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300"
+      >
+        <div
+          data-dialog="modal"
+          className="relative m-4 p-4 w-2/5 min-w-[40%] max-w-[40%] rounded-lg bg-white shadow-sm"
+        >
+          <div className="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800">
+            Its a simple Modal
+          </div>
+          <div className="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light">
+            The key to more success is to have a lot of pillows. Put it this
+            way, it took me twenty five years to get these plants, twenty five
+            years of blood sweat and tears, and I&apos;m never giving up,
+            I&apos;m just getting started. I&apos;m up to something. Fan luv.
+          </div>
+          <div className="flex shrink-0 flex-wrap items-center pt-4 justify-end">
+            <button data-dialog-close="true" className="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
+              Cancel
+            </button>
+            <button data-dialog-close="true" className="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">
+              Confirm
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}