Merge pull request #72 from creativetimofficial/npm-david-ai-1.0.5

Npm david ai 1.0.5

Author: dragosct

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## [1.0.5] 2024-12-24
+
+### Added for NPM
+
+- Added new functions for Accordion, Gallery and Stepper
+- Added cleanup functions for Accordion, Gallery and Stepper
+
 ## [1.0.4] 2024-12-19
 
 ### Added for NPM

components/accordion/accordion-all-open.html

@@ -1,13 +1,30 @@
 
-<div class="group block w-full items-center justify-between cursor-pointer border-b border-stone-200 aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:select-none" aria-disabled="false">
-  <button class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800">Material Tailwind React<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-4 w-4 group-data-[open=true]:rotate-180"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-  </button>
-</div>
-<div class="group block w-full items-center justify-between cursor-pointer border-b border-stone-200 aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:select-none" aria-disabled="false">
-  <button class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800">Material Tailwind HTML<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-4 w-4 group-data-[open=true]:rotate-180"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-  </button>
-</div>
-<div class="group block w-full items-center justify-between cursor-pointer border-b border-stone-200 aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:select-none" aria-disabled="false">
-  <button class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800">Material Tailwind Vue<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-4 w-4 group-data-[open=true]:rotate-180"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-  </button>
+<div class="group block w-full" aria-disabled="false" data-dui-accordion-container data-dui-accordion-mode="all-open">
+  <div 
+    class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800 cursor-pointer"
+    data-dui-accordion-toggle
+    data-dui-accordion-target="#allOpenAccordion1"
+    aria-expanded="true">
+    What is David UI?
+    <svg data-dui-accordion-icon width="1.5em" height="1.5em" strokeWidth="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-4 w-4 rotate-180">
+      <path d="M6 9L12 15L18 9" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path>
+    </svg>
+  </div>
+  <div id="allOpenAccordion1" class="overflow-hidden transition-all duration-300 border-b border-stone-200 dark:border-stone-700">
+    <p class="mb-5 text-sm text-stone-500 dark:text-stone-400">David UI is a comprehensive UI library built with Tailwind CSS, offering modern and customizable components for web development.</p>
+  </div>
+
+  <div 
+    class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800 cursor-pointer"
+    data-dui-accordion-toggle
+    data-dui-accordion-target="#allOpenAccordion2"
+    aria-expanded="true">
+    Why choose David UI?
+    <svg data-dui-accordion-icon width="1.5em" height="1.5em" strokeWidth="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-4 w-4">
+      <path d="M6 9L12 15L18 9" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path>
+    </svg>
+  </div>
+  <div id="allOpenAccordion2" class="overflow-hidden transition-all duration-300 border-b border-stone-200 dark:border-stone-700">
+    <p class="mb-5 text-sm text-stone-500 dark:text-stone-400">David UI provides an extensive collection of ready-to-use components with seamless integration and excellent developer experience.</p>
+  </div>
 </div>

components/accordion/accordion-custom-icon.html

@@ -1,13 +1,47 @@
 
-<div class="group block w-full items-center justify-between cursor-pointer border-b border-stone-200 aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:select-none" aria-disabled="false">
-  <button class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800">Material Tailwind React<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="block h-4 w-4 group-data-[open=true]:hidden"><path d="M6 12H12M18 12H12M12 12V6M12 12V18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><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="hidden h-4 w-4 group-data-[open=true]:block"><path d="M6 12H18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-  </button>
-</div>
-<div class="group block w-full items-center justify-between cursor-pointer border-b border-stone-200 aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:select-none" aria-disabled="false">
-  <button class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800">Material Tailwind HTML<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="block h-4 w-4 group-data-[open=true]:hidden"><path d="M6 12H12M18 12H12M12 12V6M12 12V18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><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="hidden h-4 w-4 group-data-[open=true]:block"><path d="M6 12H18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-  </button>
-</div>
-<div class="group block w-full items-center justify-between cursor-pointer border-b border-stone-200 aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:select-none" aria-disabled="false">
-  <button class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800">Material Tailwind Vue<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="block h-4 w-4 group-data-[open=true]:hidden"><path d="M6 12H12M18 12H12M12 12V6M12 12V18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><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="hidden h-4 w-4 group-data-[open=true]:block"><path d="M6 12H18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-  </button>
+<div class="group block w-full" 
+     aria-disabled="false" 
+     data-dui-accordion-container 
+     data-dui-accordion-mode="exclusive">
+
+  <div class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800 cursor-pointer"
+       data-dui-accordion-toggle
+       data-dui-accordion-target="#customIconAccordion1"
+       aria-expanded="false">
+    What is David UI?
+    <svg data-dui-accordion-icon-close xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+    </svg>
+    <svg data-dui-accordion-icon-open xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
+    </svg>
+  </div>
+
+  <div id="customIconAccordion1" 
+       class="overflow-hidden transition-all duration-300 border-b border-stone-200 dark:border-stone-700">
+    <p class="mb-5 text-sm text-stone-500 dark:text-stone-400">
+      David UI is a comprehensive UI library built with Tailwind CSS, offering modern and customizable components for web development.
+    </p>
+  </div>
+
+  <div class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800 cursor-pointer"
+       data-dui-accordion-toggle
+       data-dui-accordion-target="#customIconAccordion2"
+       aria-expanded="false">
+    Why choose David UI?
+    <svg data-dui-accordion-icon-close xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+    </svg>
+    <svg data-dui-accordion-icon-open xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
+    </svg>
+  </div>
+
+  <div id="customIconAccordion2"
+       class="overflow-hidden transition-all duration-300 border-b border-stone-200 dark:border-stone-700">
+    <p class="mb-5 text-sm text-stone-500 dark:text-stone-400">
+      David UI provides an extensive collection of ready-to-use components with seamless integration and excellent developer experience.
+    </p>
+  </div>
+
 </div>

components/accordion/accordion-custom-styles.html

@@ -1,13 +1,34 @@
 
-<div class="group block w-full items-center justify-between cursor-pointer aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:select-none mb-2 rounded-lg border border-stone-200 p-3" aria-disabled="false">
-  <button class="flex items-center justify-between w-full text-left font-medium dark:text-white text-stone-800 p-0">Material Tailwind React<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-4 w-4 group-data-[open=true]:rotate-180"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-  </button>
-</div>
-<div class="group block w-full items-center justify-between cursor-pointer aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:select-none mb-2 rounded-lg border border-stone-200 p-3" aria-disabled="false">
-  <button class="flex items-center justify-between w-full text-left font-medium dark:text-white text-stone-800 p-0">Material Tailwind HTML<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-4 w-4 group-data-[open=true]:rotate-180"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-  </button>
-</div>
-<div class="group block w-full items-center justify-between cursor-pointer aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:select-none rounded-lg border border-stone-200 p-3" aria-disabled="false">
-  <button class="flex items-center justify-between w-full text-left font-medium dark:text-white text-stone-800 p-0">Material Tailwind Vue<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-4 w-4 group-data-[open=true]:rotate-180"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-  </button>
+<div class="group block w-full" aria-disabled="false" data-dui-accordion-container data-dui-accordion-mode="exclusive">
+  <div class="border border-stone-200 dark:border-stone-700 rounded-lg mb-2 px-2">
+      <div 
+    class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800 cursor-pointer"
+    data-dui-accordion-toggle
+    data-dui-accordion-target="#customStylesAccordion1"
+    aria-expanded="false">
+    What is David UI?
+    <svg data-dui-accordion-icon width="1.5em" height="1.5em" strokeWidth="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-4 w-4 rotate-180">
+      <path d="M6 9L12 15L18 9" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path>
+    </svg>
+  </div>
+  <div id="customStylesAccordion1" class="overflow-hidden transition-all duration-300">
+    <p class="mb-5 text-sm text-stone-500 dark:text-stone-400">David UI is a comprehensive UI library built with Tailwind CSS, offering modern and customizable components for web development.</p>
+  </div>
+  </div>
+
+  <div class="border border-stone-200 dark:border-stone-700 rounded-lg px-2">
+      <div 
+    class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800 cursor-pointer"
+    data-dui-accordion-toggle
+    data-dui-accordion-target="#customStylesAccordion2"
+    aria-expanded="false">
+    Why choose David UI?
+    <svg data-dui-accordion-icon width="1.5em" height="1.5em" strokeWidth="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-4 w-4">
+      <path d="M6 9L12 15L18 9" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path>
+    </svg>
+  </div>
+  <div id="customStylesAccordion2" class="overflow-hidden transition-all duration-300">
+    <p class="mb-5 text-sm text-stone-500 dark:text-stone-400">David UI provides an extensive collection of ready-to-use components with seamless integration and excellent developer experience.</p>
+  </div>
+  </div>
 </div>

components/accordion/accordion-demo.html

@@ -1,13 +1,30 @@
 
-<div class="group block w-full items-center justify-between cursor-pointer border-b border-stone-200 aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:select-none" aria-disabled="false">
-  <button class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800">Material Tailwind React<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-4 w-4 group-data-[open=true]:rotate-180"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-  </button>
-</div>
-<div class="group block w-full items-center justify-between cursor-pointer border-b border-stone-200 aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:select-none" aria-disabled="false">
-  <button class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800">Material Tailwind HTML<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-4 w-4 group-data-[open=true]:rotate-180"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-  </button>
-</div>
-<div class="group block w-full items-center justify-between cursor-pointer border-b border-stone-200 aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:select-none" aria-disabled="false">
-  <button class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800">Material Tailwind Vue<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-4 w-4 group-data-[open=true]:rotate-180"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-  </button>
+<div class="group block w-full" aria-disabled="false" data-dui-accordion-container data-dui-accordion-mode="exclusive">
+  <div 
+    class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800 cursor-pointer"
+    data-dui-accordion-toggle
+    data-dui-accordion-target="#basicAccordion1"
+    aria-expanded="false">
+    What is David UI?
+    <svg data-dui-accordion-icon width="1.5em" height="1.5em" strokeWidth="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-4 w-4 rotate-180">
+      <path d="M6 9L12 15L18 9" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path>
+    </svg>
+  </div>
+  <div id="basicAccordion1" class="overflow-hidden transition-all duration-300 border-b border-stone-200 dark:border-stone-700">
+    <p class="mb-5 text-sm text-stone-500 dark:text-stone-400">David UI is a comprehensive UI library built with Tailwind CSS, offering modern and customizable components for web development.</p>
+  </div>
+
+  <div 
+    class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800 cursor-pointer"
+    data-dui-accordion-toggle
+    data-dui-accordion-target="#basicAccordion2"
+    aria-expanded="false">
+    Why choose David UI?
+    <svg data-dui-accordion-icon width="1.5em" height="1.5em" strokeWidth="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-4 w-4">
+      <path d="M6 9L12 15L18 9" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path>
+    </svg>
+  </div>
+  <div id="basicAccordion2" class="overflow-hidden transition-all duration-300 border-b border-stone-200 dark:border-stone-700">
+    <p class="mb-5 text-sm text-stone-500 dark:text-stone-400">David UI provides an extensive collection of ready-to-use components with seamless integration and excellent developer experience.</p>
+  </div>
 </div>