Merge pull request #71 from creativetimofficial/npm-david-ai-1.0.4

Npm david ai 1.0.4

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## [1.0.4] 2024-12-19
+
+### Added for NPM
+
+- Fixed Cleanup functions `clear()` replaced with `delete()`
+- Global init for all components via `initDavidAI()`
+- Fixed Popover custom content animation breaking
+
 ## [1.0.3] 2024-12-19
 
 ### Added for NPM

components/collapse/collapse-list.html

@@ -3,9 +3,9 @@
      data-dui-target="#collapseList" 
      aria-expanded="false" 
      aria-controls="collapseList" 
-     class="flex items-center min-w-60 cursor-pointer py-1.5 px-2.5 rounded-md align-middle transition-all duration-300 ease-in text-stone-600 hover:text-stone-800 dark:text-stone-300 dark:hover:text-white hover:bg-stone-200 dark:hover:bg-stone-700 focus:bg-stone-200 dark:focus:bg-stone-700 focus:text-stone-800 dark:focus:text-white">
+     class="flex items-center justify-between min-w-60 cursor-pointer py-1.5 px-2.5 rounded-md align-middle transition-all duration-300 ease-in text-stone-600 hover:text-stone-800 dark:text-stone-300 dark:hover:text-white hover:bg-stone-200 dark:hover:bg-stone-700 focus:bg-stone-200 dark:focus:bg-stone-700 focus:text-stone-800 dark:focus:text-white">
   Components 
-  <span data-dui-icon class="grid place-items-center shrink-0 ps-2.5 ms-auto">
+  <span data-dui-icon class="grid place-items-center shrink-0">
     <svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-5 w-5 stroke-[1.5] dark:stroke-stone-300">
       <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
     </svg>

components/popover/popover-demo.html

@@ -1,8 +1,9 @@
 
 <div class="min-h-28">
   <button type="button" class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased" 
-    data-dui-toggle="popover" data-dui-placement="bottom" data-dui-content="This is a very beautiful popover, show some love." 
+    data-dui-toggle="popover" data-dui-placement="bottom"
     data-dui-popover-class="bg-white text-stone-800 border border-stone-200 rounded-md shadow-sm p-2 text-sm z-50">
     Open
   </button>
+  <div data-dui-popover-content class="hidden">This is a very beautiful popover, show some love.</div>
 </div>

components/popover/popover-with-description.html

@@ -1,6 +1,6 @@
 
 <div class="min-h-48">
-  <button type="button" class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased" data-dui-toggle="popover" data-dui-placement="bottom" data-dui-popover-class="bg-white w-6/12 text-stone-800 border border-stone-200 rounded-lg shadow-sm p-2 z-50"> Repository Info </button>
+  <button type="button" class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased" data-dui-toggle="popover" data-dui-placement="bottom" data-dui-popover-class="bg-white w-5/12 md:w-3/12 text-stone-800 border border-stone-200 rounded-lg shadow-sm p-2 z-50"> Repository Info </button>
   <div data-dui-popover-content class="hidden">
     <div class="mb-1 flex items-center gap-2">
       <a href="#" class="font-sans antialiased text-base text-stone-800 dark:text-white font-bold">@material-tailwind</a>

components/popover/popover-with-image.html

@@ -1,8 +1,8 @@
 
 <div class="min-h-80">
-  <button type="button" class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased" data-dui-toggle="popover" data-dui-placement="bottom" data-dui-popover-class="bg-white w-8/12 text-stone-800 border border-stone-200 rounded-lg shadow-sm p-2 z-50"> More Info </button>
+  <button type="button" class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased" data-dui-toggle="popover" data-dui-placement="bottom" data-dui-popover-class="bg-white w-8/12 md:w-4/12 text-stone-800 border border-stone-200 rounded-lg shadow-sm p-2 z-50"> More Info </button>
   <div data-dui-popover-content class="hidden grid grid-cols-2">
-    <div>
+    <div class="pr-2">
       <p class="font-sans text-base text-stone-800 dark:text-white mb-1 font-semibold">David UI</p>
       <small class="font-sans text-sm mb-4 block text-stone-500">David UI is an easy to use components library for Tailwind CSS and Material Design. It features multiple React and HTML components, all written with Tailwind CSS classes and Material Design guidelines.</small>
       <a href="#popover-with-image" class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased">

components/popover/profile-info-popover.html

@@ -1,6 +1,6 @@
 
 <div class="min-h-72">
-  <button type="button" class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased" data-dui-toggle="popover" data-dui-placement="bottom" data-dui-popover-class="bg-white w-6/12 text-stone-800 border border-stone-200 rounded-lg shadow-sm p-2 z-50"> Profile Info </button>
+  <button type="button" class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased" data-dui-toggle="popover" data-dui-placement="bottom" data-dui-popover-class="bg-white w-5/12 md:w-3/12 text-stone-800 border border-stone-200 rounded-lg shadow-sm p-2 z-50"> Profile Info </button>
   <div data-dui-popover-content class="hidden">
     <div class="mb-2 flex items-center justify-between gap-4">
       <img src="https://dub.sh/TdSBP0D" alt="profile-picture" class="inline-block object-cover object-center data-[shape=square]:rounded-none data-[shape=circular]:rounded-full data-[shape=rounded]:rounded-[current] w-11 h-11 rounded-md" data-shape="circular">

components/popover/subscription-popover.html

@@ -1,11 +1,11 @@
 
 <div class="min-h-40">
-  <button type="button" data-dui-toggle="popover" data-dui-placement="bottom" data-dui-popover-class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased"> Contact Info </button>
+  <button type="button" class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased" data-dui-toggle="popover" data-dui-placement="bottom" data-dui-popover-class="bg-white p-2 text-stone-800 border border-stone-200 rounded-lg shadow-sm p-1 z-50"> Contact Info </button>
   <div data-dui-popover-content class="hidden">
     <h2 class="font-semibold">Newsletter Subscription</h2>
     <div class="flex items-center gap-2 mt-2">
-      <input placeholder="[email protected]" class="w-full aria-disabled:cursor-not-allowed outline-none focus:outline-none text-stone-800 dark:text-white placeholder:text-stone-600/60 ring-transparent border border-stone-200 transition-all ease-in disabled:opacity-50 disabled:pointer-events-none select-none text-sm py-2 px-2.5 ring shadow-sm bg-white rounded-lg duration-100 hover:border-stone-300 hover:ring-none focus:border-stone-400 focus:ring-none peer" type="email">
+      <input placeholder="[email protected]" class="w-full aria-disabled:cursor-not-allowed outline-none focus:outline-none text-stone-800 dark:text-white placeholder:text-stone-600/60 ring-transparent border border-stone-200 transition-all ease-in disabled:opacity-50 disabled:pointer-events-none select-none text-sm py-2 px-2.5 ring shadow-sm bg-white rounded-lg duration-100 hover:border-stone-300 hover:ring-none focus:border-stone-400 focus:ring-none peer" type="email" />
       <button class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased">Subscribe</button>
-    <div>
+    </div>
   </div>
 </div>

components/tooltip/tooltip-custom-styles.html

@@ -1,6 +1,6 @@
 
 <div class="flex items-center justify-center">
-  <button type="button" data-dui-toggle="tooltip" data-dui-placement="right" data-dui-tooltip-class="bg-white w-4/12 border border-stone-200 text-stone-800 text-xs rounded-md py-1 px-2 shadow-sm z-50" class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased"> Custom HTML Tooltip </button>
+  <button type="button" data-dui-toggle="tooltip" data-dui-placement="right" data-dui-tooltip-class="bg-white w-4/12 md:w-2/12 border border-stone-200 text-stone-800 text-xs rounded-md py-1 px-2 shadow-sm z-50" class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased"> Custom HTML Tooltip </button>
   <div data-dui-tooltip-content class="hidden">
     <h3 class="font-semibold text-sm">David UI</h3>
     <p class="text-xs mt-1 text-stone-500">David UI is an easy to use components library for TailwindCSS</p>

components/tooltip/tooltip-demo.html

@@ -1,7 +1,7 @@
 
 <div class="flex items-center justify-center">
   <button type="button" class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased""
-    data-dui-toggle="tooltip" data-dui-placement="top" data-dui-title="David UI" data-dui-tooltip-class="bg-gray-900 text-white text-xs rounded-md py-1 px-2 shadow-md z-50">
+    data-dui-toggle="tooltip" data-dui-placement="top" data-dui-title="David UI" data-dui-tooltip-class="bg-stone-800 text-white text-xs rounded-md py-1 px-2 shadow-md z-50">
     Hover
   </button>
 </div>