I don't know what that word means. I'm happy. But success, that goes back to what in somebody's eyes success means. For me, success is inner peace. That's a good day for me.
Like so many organizations these days, Autodesk is a company in transition. It was until recently a traditional boxed software company selling licenses. Yet its own business model disruption is only part of the story
Material Tailwind is an easy to use components library for Tailwind CSS and Material Design. It provides a simple way to customize your components, you can change the colors, fonts, breakpoints and everything you need.
Material Tailwind is an easy to use components library for Tailwind CSS and Material Design. It provides a simple way to customize your components, you can change the colors, fonts, breakpoints and everything you need.
3 |
--------------------------------------------------------------------------------
/components/typography/small-text.html:
--------------------------------------------------------------------------------
1 |
2 | Material Tailwind is an easy to use components library for Tailwind CSS and Material Design. It provides a simple way to customize your components, you can change the colors, fonts, breakpoints and everything you need.
3 |
--------------------------------------------------------------------------------
/components/typography/typography-colors.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Material Tailwind
4 |
Material Tailwind
5 |
Material Tailwind
6 |
Material Tailwind
7 |
Material Tailwind
8 |
Material Tailwind
9 |
10 |
--------------------------------------------------------------------------------
/components/video/video-autoplay.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/components/video/video-demo.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/components/video/video-muted.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/docs/breadcrumb.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Tailwind CSS Breadcrumb - Components Library @David UI
3 | description: Simplify navigation with Tailwind CSS breadcrumb components. Create clear, responsive paths for your pages with customizable styles at David UI.
4 | github: Breadcrumb
5 | prev: docs/react/inputs
6 | next: docs/react/Breadcrumb-group
7 | ---
8 |
9 | # Tailwind CSS Breadcrumb
10 |
11 | Improve and optimize navigation with the breadcrumb component in the David UI components library.
12 |
13 | Designed with Tailwind CSS, it creates a clear and intuitive path display for your pages. Fully responsive and customizable, it ensures seamless integration.
14 |
15 | Explore our component examples to improve user experience in your Tailwind CSS apps and websites.
16 |
17 | ---
18 |
19 | ## Basic Breadcrumb
20 |
21 | This example showcases a responsive breadcrumb navigation component with a clean design, providing links for seamless navigation between hierarchical pages. It features hover effects for improved user interaction and supports both light and dark modes for accessibility.
22 |
23 |
24 |
25 | ---
26 |
27 | ## Breadcrumb With Icon
28 |
29 | Easily incorporate icons into your breadcrumb component for added visual context, using standard HTML icon elements.
30 |
31 |
32 |
33 | ---
34 |
35 | ## Breadcrumb Custom Separator
36 |
37 | Personalize the appearance of your breadcrumbs by modifying the separators. Refer to the example below to see how it’s done.
38 |
39 |
40 |
41 | ---
42 |
43 | ## Breadcrumb Custom Styles
44 |
45 | Apply custom styles to your breadcrumb component to match your design preferences. Explore the example below to see tailored styling options.
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/docs/footer.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Tailwind CSS Footer - Components Library @David UI
3 | description: Design polished footers with Tailwind CSS components from David UI. Explore responsive layouts for links, text, and icons with ease.
4 | github: Footer
5 | prev: docs/react/inputs
6 | next: docs/react/Footer-group
7 | ---
8 |
9 | # Tailwind CSS Footer
10 |
11 | David UI’s footer component helps you implement fast visually appealing footers for your site. Tailwind CSS ensures flexibility for layouts, including text, links, and icons.
12 |
13 | Browse our component examples to create polished and functional footers for any Tailwind CSS application.
14 |
15 | ---
16 |
17 | ## Basic Footer
18 |
19 | This straightforward footer design includes essential navigation links—About Us, License, Contribute, and Contact Us—ensuring easy user access.
20 |
21 |
22 |
23 | ---
24 |
25 | ## Footer with Logo
26 |
27 | Incorporate your company logo into this sleek, minimalistic footer styled with Tailwind CSS. The design features a transparent background and a flexbox layout for a polished, professional appearance.
28 |
29 |
30 |
31 | ---
32 |
33 | ## Footer with Social Link
34 |
35 | Explore this footer for a detailed layout. It uses a grid system to organize links and resources, complemented by styled social media icons that integrate seamlessly into the overall design.
36 |
37 |
38 |
39 | ---
40 |
41 | ## Footer with Sitemap
42 |
43 | Create a structured footer with this example, ideal for larger websites or platforms. It employs a grid layout to divide content into clear sections, improving navigation and readability for users.
44 |
45 |
46 |
47 | ---
48 |
--------------------------------------------------------------------------------
/docs/license.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: License - Components Library @David UI
3 | description: Explore Tailwind CSS alert components at David UI. Build notifications for success, error, or warnings with accessible, responsive, and stylish designs.
4 | github: license
5 | prev: docs/html/installation
6 | next: docs/html/release-notes
7 | ---
8 |
9 | # License
10 |
11 | ---
12 |
13 | ## MIT License
14 |
15 | Copyright (c) 2020- David UI by Creative Tim
16 |
17 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
18 |
19 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
20 |
21 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/docs/release-notes.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: License - Material Tailwind
3 | description: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software when using Material Tailwind.
4 | github: release-notes
5 | prev: docs/html/license
6 | next: docs/html/accordion
7 | ---
8 |
9 | # Release Notes
10 |
11 | See what's new added, changed, fixed, improved or updated.
12 |
13 | ---
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/docs/video.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Tailwind CSS Video - Components Library @David UI
3 | description: Embed and style videos with Tailwind CSS video components. Responsive, customizable designs fit seamlessly into any web application.
4 | github: Video
5 | prev: docs/react/inputs
6 | next: docs/react/Video-group
7 | ---
8 |
9 | # Tailwind CSS Video
10 |
11 | Seamlessly embed and style videos with the video component in David UI. Tailwind CSS ensures responsive designs that fit any screen size.
12 |
13 | Explore our video component examples to create stunning multimedia experiences in your Tailwind application.
14 |
15 | ---
16 |
17 | ## Simple video
18 |
19 | A responsive video component with a rounded border design. The video includes player controls for playback, volume adjustment, and scrubbing, ensuring accessibility and user control. Ideal for embedding video content in web pages.
20 |
21 |
22 |
23 | ---
24 |
25 | ## Video Autoplay
26 |
27 | A video component similar in design to the standard demo, with a rounded border for a polished look. This video begins playing automatically upon loading, making it suitable for showcasing content that requires immediate user engagement. Player controls remain accessible for manual adjustments.
28 |
29 |
30 |
31 | ---
32 |
33 | ## Video Muted
34 |
35 | A video component designed to play without sound by default, while still offering player controls. The muted functionality makes it ideal for environments where silent playback is preferred, such as background videos or contexts where the user might toggle sound manually. The rounded border adds a sophisticated touch.
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/david-ai/ec4794270d089175077e1724df2b806d9f016b7c/examples/README.md
--------------------------------------------------------------------------------
/packages/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 |
--------------------------------------------------------------------------------
/packages/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020-2025 Creative Tim (https://www.creative-tim.com)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/dist/accordion/ts/accordion-programmatic.d.ts:
--------------------------------------------------------------------------------
1 | import { AccordionConfig, IAccordion } from './accordion.types';
2 | export declare class Accordion implements IAccordion {
3 | private container;
4 | private options;
5 | private initialized;
6 | constructor(container: HTMLElement, options?: AccordionConfig);
7 | private init;
8 | private resolveElement;
9 | toggle(element: HTMLElement | string): void;
10 | show(element: HTMLElement | string): void;
11 | hide(element: HTMLElement | string): void;
12 | showAll(): void;
13 | hideAll(): void;
14 | cleanup(): void;
15 | private toggleHandler;
16 | private setAccordionState;
17 | }
18 |
--------------------------------------------------------------------------------
/packages/dist/accordion/ts/accordion.d.ts:
--------------------------------------------------------------------------------
1 | export declare function toggleAccordion(event: Event): void;
2 | export declare function toggleAccordionById(targetId: string): void;
3 | export declare function initAccordion(): void;
4 | export declare function cleanupAccordions(): void;
5 |
--------------------------------------------------------------------------------
/packages/dist/accordion/ts/accordion.types.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Configuration options for the Accordion component
3 | */
4 | export interface AccordionConfig {
5 | /** When true, only one section can be open at a time */
6 | exclusive?: boolean;
7 | /** When true, allows multiple sections to be open simultaneously */
8 | allOpen?: boolean;
9 | }
10 | /**
11 | * Interface defining the public API for controlling Accordion behavior
12 | */
13 | export interface IAccordion {
14 | /**
15 | * Toggles the open/closed state of an accordion section
16 | * @param element - The accordion section element or its ID
17 | */
18 | toggle: (element: HTMLElement | string) => void;
19 | /**
20 | * Opens an accordion section
21 | * @param element - The accordion section element or its ID
22 | */
23 | show: (element: HTMLElement | string) => void;
24 | /**
25 | * Closes an accordion section
26 | * @param element - The accordion section element or its ID
27 | */
28 | hide: (element: HTMLElement | string) => void;
29 | /**
30 | * Opens all accordion sections simultaneously
31 | */
32 | showAll: () => void;
33 | /**
34 | * Closes all accordion sections simultaneously
35 | */
36 | hideAll: () => void;
37 | /**
38 | * Removes all event listeners and cleans up the accordion instance
39 | */
40 | cleanup: () => void;
41 | }
42 |
--------------------------------------------------------------------------------
/packages/dist/alert/ts/alert.d.ts:
--------------------------------------------------------------------------------
1 | import { AlertEvent } from "./alert.types";
2 | export declare function closeAlert(event: AlertEvent): void;
3 | export declare function initAlert(): void;
4 |
--------------------------------------------------------------------------------
/packages/dist/alert/ts/alert.types.d.ts:
--------------------------------------------------------------------------------
1 | export interface AlertEvent extends Event {
2 | currentTarget: HTMLElement;
3 | }
4 |
--------------------------------------------------------------------------------
/packages/dist/collapse/ts/collapse-programmatic.d.ts:
--------------------------------------------------------------------------------
1 | import type { CollapseConfig, ICollapse } from "./collapse.types";
2 | /**
3 | * Class representing a programmatic Collapse component.
4 | */
5 | export declare class Collapse implements ICollapse {
6 | private button;
7 | private collapseElement;
8 | private config;
9 | /**
10 | * Creates an instance of Collapse.
11 | * @param button - The button element or its selector controlling the collapsible content.
12 | * @param collapseElement - The collapsible content element or its selector.
13 | * @param config - Configuration options for the collapse.
14 | */
15 | constructor(button: HTMLElement | string, collapseElement: HTMLElement | string, config?: CollapseConfig);
16 | /**
17 | * Resolves an element from an HTMLElement or selector string.
18 | * @param elementOrSelector - HTMLElement or a selector string.
19 | * @param errorMessage - Error message if the element is not found.
20 | * @returns The resolved HTMLElement.
21 | */
22 | private resolveElement;
23 | /**
24 | * Initializes the Collapse component by attaching event listeners.
25 | */
26 | private init;
27 | /**
28 | * Toggles the collapsible content visibility.
29 | */
30 | toggle(): void;
31 | /**
32 | * Expands the collapsible content.
33 | */
34 | expand(): void;
35 | /**
36 | * Collapses the collapsible content.
37 | */
38 | collapse(): void;
39 | }
40 |
--------------------------------------------------------------------------------
/packages/dist/collapse/ts/collapse.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Toggles the visibility of a collapsible element.
3 | * @param event - The click event triggering the toggle.
4 | */
5 | export declare function toggleCollapse(event: Event): void;
6 | /**
7 | * Initializes collapsible buttons by attaching event listeners.
8 | */
9 | export declare function initCollapse(): void;
10 |
--------------------------------------------------------------------------------
/packages/dist/collapse/ts/collapse.types.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Configuration options for the Collapse component.
3 | */
4 | export interface CollapseConfig {
5 | /**
6 | * Selector for the icon element to toggle rotation.
7 | * For example, you can pass "[data-icon]" to target specific icons.
8 | */
9 | iconSelector?: string;
10 | }
11 | /**
12 | * Interface for the Collapse component.
13 | */
14 | export interface ICollapse {
15 | /**
16 | * Toggles the collapsible content visibility.
17 | */
18 | toggle(): void;
19 | /**
20 | * Expands the collapsible content.
21 | */
22 | expand(): void;
23 | /**
24 | * Collapses the collapsible content.
25 | */
26 | collapse(): void;
27 | }
28 |
--------------------------------------------------------------------------------
/packages/dist/dropdown/ts/dropdown-programmatic.d.ts:
--------------------------------------------------------------------------------
1 | import type { DropdownConfig, IDropdown } from "./dropdown.types";
2 | /**
3 | * Class representing a programmatic Dropdown component.
4 | */
5 | export declare class Dropdown implements IDropdown {
6 | private menu;
7 | private referenceElement;
8 | private popperInstance;
9 | private config;
10 | private isOpen;
11 | private shouldIgnoreClick;
12 | private documentClickHandler;
13 | /**
14 | * Creates an instance of Dropdown.
15 | * @param reference - The element or selector to position the dropdown menu relative to.
16 | * @param menu - The menu element to display as the dropdown.
17 | * @param config - Configuration options for the dropdown.
18 | */
19 | constructor(reference: HTMLElement | string, menu: HTMLElement | string, config: DropdownConfig);
20 | /**
21 | * Resolves an element from an HTMLElement or selector string.
22 | * @param elementOrSelector - HTMLElement or a selector string.
23 | * @param errorMessage - Error message if the element is not found.
24 | * @returns The resolved HTMLElement.
25 | */
26 | private resolveElement;
27 | /**
28 | * Handles document click events for outside clicks
29 | */
30 | private handleDocumentClick;
31 | /**
32 | * Initializes the Dropdown component.
33 | */
34 | private init;
35 | /**
36 | * Set the prevent outside click flag to true.
37 | */
38 | preventOutsideClick(): void;
39 | /**
40 | * Toggles the dropdown menu visibility.
41 | */
42 | toggle(): void;
43 | /**
44 | * Opens the dropdown menu programmatically.
45 | */
46 | open(): void;
47 | /**
48 | * Closes the dropdown menu programmatically.
49 | */
50 | close(): void;
51 | /**
52 | * Destroys the Dropdown instance and cleans up resources.
53 | */
54 | destroy(): void;
55 | }
56 |
--------------------------------------------------------------------------------
/packages/dist/dropdown/ts/dropdown.d.ts:
--------------------------------------------------------------------------------
1 | import { Instance } from "@popperjs/core";
2 | export declare class Dropdown {
3 | dropdown: HTMLElement;
4 | button: HTMLElement;
5 | menu: HTMLElement;
6 | popperInstance: Instance | null;
7 | placement: string;
8 | constructor(dropdownElement: HTMLElement);
9 | init(): Promise;
10 | toggleDropdown(): void;
11 | openDropdown(): void;
12 | closeDropdown(): void;
13 | }
14 | export declare function initDropdowns(): void;
15 | export declare function cleanupDropdowns(): void;
16 | export declare function loadAndInitDropdowns(): Promise;
17 |
--------------------------------------------------------------------------------
/packages/dist/dropdown/ts/dropdown.types.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Configuration options for the Dropdown component.
3 | */
4 | export interface DropdownConfig {
5 | /**
6 | * Placement of the dropdown relative to the button (default: "bottom-start").
7 | */
8 | placement?: string;
9 | /**
10 | * Whether clicking outside the dropdown menu closes it (default: true).
11 | */
12 | closeOnOutsideClick?: boolean;
13 | /**
14 | * Offset of the dropdown menu relative to the button ([x, y]).
15 | */
16 | offset?: [number, number];
17 | }
18 | /**
19 | * Interface for the Dropdown component.
20 | */
21 | export interface IDropdown {
22 | /**
23 | * Toggles the dropdown menu visibility.
24 | */
25 | toggle(): void;
26 | /**
27 | * Opens the dropdown menu.
28 | */
29 | open(): void;
30 | /**
31 | * Closes the dropdown menu.
32 | */
33 | close(): void;
34 | /**
35 | * Destroys the Dropdown instance and cleans up resources.
36 | */
37 | destroy(): void;
38 | /**
39 | * Set the prevent outside click flag to true.
40 | */
41 | preventOutsideClick(): void;
42 | }
43 |
--------------------------------------------------------------------------------
/packages/dist/gallery/ts/gallery.d.ts:
--------------------------------------------------------------------------------
1 | export declare function changeMainImage(event: Event): void;
2 | export declare function initGallery(): void;
3 | export declare function cleanupGallery(): void;
4 |
--------------------------------------------------------------------------------
/packages/dist/modal/ts/modal-programmatic.d.ts:
--------------------------------------------------------------------------------
1 | import { ModalConfig, IModal } from './modal.types';
2 | /**
3 | * A class to handle programmatic modal behavior.
4 | * @implements {IModal}
5 | */
6 | export declare class Modal implements IModal {
7 | private _isVisible;
8 | private _config;
9 | private _modalElement;
10 | /**
11 | * Initialize the modal.
12 | * @param {HTMLElement} modalElement - The modal element.
13 | * @param {ModalConfig} [config={}] - Configuration options for the modal.
14 | */
15 | constructor(modalElement: HTMLElement, config?: ModalConfig);
16 | /**
17 | * Show the modal.
18 | */
19 | show(): void;
20 | /**
21 | * Hide the modal.
22 | */
23 | hide(): void;
24 | /**
25 | * Toggle the modal's visibility.
26 | */
27 | toggle(): void;
28 | /**
29 | * Check if the modal is currently visible.
30 | * @returns {boolean}
31 | */
32 | isVisible(): boolean;
33 | /**
34 | * Set up initial modal state.
35 | * Hides the modal if it's not already hidden.
36 | */
37 | private setupModal;
38 | /**
39 | * Handle keydown events (e.g., Escape to close the modal).
40 | * @param {KeyboardEvent} event
41 | */
42 | private handleKeydown;
43 | /**
44 | * Handle clicks outside the modal content to close the modal.
45 | * @param {MouseEvent} event
46 | */
47 | private handleOutsideClick;
48 | /**
49 | * Removes the hidden class from the modal element.
50 | * This is typically called before showing the modal.
51 | */
52 | private removeHiddenClass;
53 | }
54 |
--------------------------------------------------------------------------------
/packages/dist/modal/ts/modal.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Toggle the modal on or off.
3 | */
4 | export declare function toggleModal(event: Event): void;
5 | /**
6 | * Close the modal programmatically or via an event.
7 | * Accepts either an Event or a direct HTMLElement.
8 | */
9 | export declare function closeModal(input: Event | HTMLElement): void;
10 | /**
11 | * Initialize modal triggers and dismiss buttons.
12 | */
13 | export declare function initModal(): void;
14 | /**
15 | * Cleanup function to remove event listeners from active modals.
16 | */
17 | export declare function cleanupModals(): void;
18 |
--------------------------------------------------------------------------------
/packages/dist/modal/ts/modal.types.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Configuration options for the Modal component.
3 | */
4 | export interface ModalConfig {
5 | /**
6 | * Whether the Escape key should close the modal (default: true).
7 | */
8 | keyboard?: boolean;
9 | /**
10 | * Whether clicking outside the modal content should close the modal (default: true).
11 | */
12 | closeOnOutsideClick?: boolean;
13 | }
14 | /**
15 | * Interface for the Modal component.
16 | */
17 | export interface IModal {
18 | /**
19 | * Show the modal.
20 | */
21 | show(): void;
22 | /**
23 | * Hide the modal.
24 | */
25 | hide(): void;
26 | /**
27 | * Toggle the modal's visibility.
28 | */
29 | toggle(): void;
30 | /**
31 | * Check if the modal is currently visible.
32 | */
33 | isVisible(): boolean;
34 | }
35 |
--------------------------------------------------------------------------------
/packages/dist/popover/ts/popover-programmatic.d.ts:
--------------------------------------------------------------------------------
1 | import type { PopoverConfig, IPopover } from "./popover.types";
2 | /**
3 | * Class representing a programmatic Popover component.
4 | */
5 | export declare class Popover implements IPopover {
6 | private trigger;
7 | private config;
8 | private popperInstance;
9 | private popoverElement;
10 | /**
11 | * Creates an instance of Popover.
12 | * @param trigger - The element that triggers the popover.
13 | * @param config - Configuration options for the popover.
14 | */
15 | constructor(trigger: HTMLElement, config: PopoverConfig);
16 | /**
17 | * Initializes the Popover instance.
18 | */
19 | private init;
20 | /**
21 | * Handles the click event on the trigger element.
22 | * @param event - The click event.
23 | */
24 | private handleTriggerClick;
25 | /**
26 | * Opens the popover programmatically.
27 | */
28 | open(): Promise;
29 | /**
30 | * Closes the popover programmatically.
31 | */
32 | close(): void;
33 | /**
34 | * Toggles the popover's visibility programmatically.
35 | */
36 | toggle(): void;
37 | /**
38 | * Destroys the Popover instance and cleans up resources.
39 | */
40 | destroy(): void;
41 | }
42 |
--------------------------------------------------------------------------------
/packages/dist/popover/ts/popover.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Initializes all popovers in the DOM.
3 | */
4 | export declare function initPopovers(): void;
5 | /**
6 | * Cleans up all active popovers and their event listeners.
7 | */
8 | export declare function cleanupPopovers(): void;
9 | /**
10 | * Loads Popper.js dynamically and initializes popovers.
11 | */
12 | export declare function loadAndInitPopovers(): Promise;
13 |
--------------------------------------------------------------------------------
/packages/dist/popover/ts/popover.types.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Configuration options for the Popover component.
3 | */
4 | export interface PopoverConfig {
5 | /**
6 | * The placement of the popover relative to the trigger.
7 | */
8 | placement?: string;
9 | /**
10 | * Custom classes to apply to the popover element.
11 | */
12 | popoverClass?: string;
13 | /**
14 | * Plain text content for the popover.
15 | */
16 | content?: string | HTMLElement;
17 | /**
18 | * Whether the popover is open by default.
19 | */
20 | openByDefault?: boolean;
21 | /**
22 | * Offset for the popover position.
23 | */
24 | offset?: [number, number];
25 | }
26 | /**
27 | * Interface for the Popover instance.
28 | */
29 | export interface IPopover {
30 | /**
31 | * Opens the popover programmatically.
32 | */
33 | open(): void;
34 | /**
35 | * Closes the popover programmatically.
36 | */
37 | close(): void;
38 | /**
39 | * Toggles the popover's visibility programmatically.
40 | */
41 | toggle(): void;
42 | /**
43 | * Destroys the Popover instance and cleans up resources.
44 | */
45 | destroy(): void;
46 | }
47 |
--------------------------------------------------------------------------------
/packages/dist/stepper/ts/stepper-programmatic.d.ts:
--------------------------------------------------------------------------------
1 | import { StepperConfig, IStepper } from './stepper.types';
2 | export declare class Stepper implements IStepper {
3 | private steps;
4 | private contents;
5 | private prevButton;
6 | private nextButton;
7 | private currentStep;
8 | constructor(config: StepperConfig);
9 | private updateState;
10 | next(): void;
11 | prev(): void;
12 | goToStep(step: number): void;
13 | getCurrentStep(): number;
14 | destroy(): void;
15 | }
16 |
--------------------------------------------------------------------------------
/packages/dist/stepper/ts/stepper.d.ts:
--------------------------------------------------------------------------------
1 | export declare function initStepper(): void;
2 | export declare function cleanupSteppers(): void;
3 |
--------------------------------------------------------------------------------
/packages/dist/stepper/ts/stepper.types.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Configuration options for initializing a Stepper instance
3 | * @interface StepperConfig
4 | */
5 | export interface StepperConfig {
6 | /** Array of HTML elements representing the step indicators */
7 | stepElements: HTMLElement[];
8 | /** Array of HTML elements containing the content for each step */
9 | contentElements: HTMLElement[];
10 | /** HTML element for the "previous" navigation button */
11 | prevButton: HTMLElement;
12 | /** HTML element for the "next" navigation button */
13 | nextButton: HTMLElement;
14 | /** Optional initial step number (defaults to 1 if not provided) */
15 | initialStep?: number;
16 | }
17 | /**
18 | * Interface defining the public API for the Stepper component
19 | * @interface IStepper
20 | */
21 | export interface IStepper {
22 | /** Advances to the next step if available */
23 | next(): void;
24 | /** Returns to the previous step if available */
25 | prev(): void;
26 | /**
27 | * Jumps to a specific step number
28 | * @param step - The step number to navigate to
29 | */
30 | goToStep(step: number): void;
31 | /** Returns the current active step number */
32 | getCurrentStep(): number;
33 | /** Destroys the Stepper instance, cleaning up event listeners and references */
34 | destroy(): void;
35 | }
36 |
--------------------------------------------------------------------------------
/packages/dist/tabs/ts/tabs-programmatic.d.ts:
--------------------------------------------------------------------------------
1 | import type { TabsConfig, ITabs } from "./tabs.types";
2 | /**
3 | * A class for managing tabs programmatically.
4 | */
5 | export declare class Tabs implements ITabs {
6 | private tabGroup;
7 | private tabList;
8 | private tabLinks;
9 | private tabContents;
10 | private indicator;
11 | private orientation;
12 | private defaultTabId;
13 | /**
14 | * Creates a new Tabs instance.
15 | * @param tabGroup - The container element of the tab group.
16 | * @param options - Configuration options for the tabs.
17 | */
18 | constructor(tabGroup: HTMLElement, options?: TabsConfig);
19 | /**
20 | * Initializes the tab group by setting up event listeners and activating the initial tab.
21 | */
22 | private initialize;
23 | /**
24 | * Updates the position of the tab indicator dynamically.
25 | * @param link - The active tab link element.
26 | */
27 | private updateIndicator;
28 | /**
29 | * Activates the specified tab by its ID.
30 | * @param tabId - The ID of the tab to activate.
31 | */
32 | activateTab(tabId: string): void;
33 | /**
34 | * Cleans up the tab group by removing event listeners and resetting the DOM.
35 | */
36 | cleanup(): void;
37 | }
38 |
--------------------------------------------------------------------------------
/packages/dist/tabs/ts/tabs.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Initialize all tabs in the document.
3 | */
4 | export declare function initTabs(): void;
5 | /**
6 | * Cleans up all initialized tabs.
7 | */
8 | export declare function cleanupTabs(): void;
9 |
--------------------------------------------------------------------------------
/packages/dist/tabs/ts/tabs.types.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Configuration options for the Tabs component.
3 | */
4 | export interface TabsConfig {
5 | /**
6 | * Whether the tabs are oriented vertically or horizontally.
7 | * - `horizontal`: Tabs are arranged in a row.
8 | * - `vertical`: Tabs are arranged in a column.
9 | * @default "horizontal"
10 | */
11 | orientation?: "horizontal" | "vertical";
12 | /**
13 | * The ID of the tab to activate by default.
14 | * @default "tab-1"
15 | */
16 | defaultTabId?: string;
17 | }
18 | /**
19 | * Interface defining the programmatic API for the Tabs component.
20 | */
21 | export interface ITabs {
22 | /**
23 | * Activates the specified tab by ID.
24 | * @param tabId - The ID of the tab to activate.
25 | */
26 | activateTab(tabId: string): void;
27 | /**
28 | * Cleans up the tab group by removing event listeners and resetting the DOM.
29 | */
30 | cleanup(): void;
31 | }
32 |
--------------------------------------------------------------------------------
/packages/dist/tooltip/ts/tooltip-programmatic.d.ts:
--------------------------------------------------------------------------------
1 | import { TooltipConfig, ITooltip } from "./tooltip.types";
2 | import { Instance as PopperInstance } from "@popperjs/core";
3 | export declare class Tooltip implements ITooltip {
4 | triggerElement: HTMLElement;
5 | tooltipElement: HTMLElement | null;
6 | tooltipInstance: PopperInstance | null;
7 | options: TooltipConfig;
8 | constructor(triggerElement: HTMLElement, options?: TooltipConfig);
9 | private init;
10 | showTooltip(): Promise;
11 | hideTooltip(): void;
12 | destroy(): void;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/dist/tooltip/ts/tooltip.d.ts:
--------------------------------------------------------------------------------
1 | export declare function initTooltips(): void;
2 | export declare function cleanupTooltips(): void;
3 | export declare function loadAndInitTooltips(): Promise;
4 |
--------------------------------------------------------------------------------
/packages/dist/tooltip/ts/tooltip.types.d.ts:
--------------------------------------------------------------------------------
1 | import { Placement, Instance as PopperInstance } from "@popperjs/core";
2 | /**
3 | * Options for configuring a tooltip instance.
4 | */
5 | export interface TooltipConfig {
6 | /**
7 | * The placement of the tooltip relative to the trigger element.
8 | * Possible values include "top", "bottom", "left", "right", etc.
9 | * @see https://popper.js.org/docs/v2/constructors/#placement
10 | */
11 | placement?: Placement;
12 | /**
13 | * CSS classes to apply to the tooltip element for styling.
14 | */
15 | tooltipClass?: string;
16 | /**
17 | * The content to display inside the tooltip.
18 | * This can be a string or an HTML element.
19 | */
20 | content?: string | HTMLElement;
21 | }
22 | /**
23 | * Represents an active tooltip instance.
24 | */
25 | export interface ITooltip {
26 | /**
27 | * The HTML element that serves as the trigger for the tooltip.
28 | */
29 | triggerElement: HTMLElement;
30 | /**
31 | * The tooltip's HTML element.
32 | */
33 | tooltipElement: HTMLElement | null;
34 | /**
35 | * The Popper.js instance used for positioning.
36 | */
37 | tooltipInstance: PopperInstance | null;
38 | /**
39 | * Shows the tooltip.
40 | * @returns A promise that resolves once the tooltip is displayed.
41 | */
42 | showTooltip: () => Promise;
43 | /**
44 | * Hides the tooltip.
45 | */
46 | hideTooltip: () => void;
47 | /**
48 | * Destroys the tooltip instance, removing all event listeners and DOM elements.
49 | */
50 | destroy: () => void;
51 | }
52 |
--------------------------------------------------------------------------------
/packages/dist/utils/loadPopper.d.ts:
--------------------------------------------------------------------------------
1 | declare global {
2 | interface Window {
3 | Popper?: typeof import('@popperjs/core');
4 | }
5 | }
6 | export declare function loadPopperJs(): Promise;
7 |
--------------------------------------------------------------------------------
/packages/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "david-ai",
3 | "version": "1.0.6",
4 | "description": "David UI is a free and open-source collection of customizable, production-ready UI components built with Tailwind CSS",
5 | "main": "dist/david-ai.js",
6 | "module": "dist/david-ai.esm.js",
7 | "browser": "dist/david-ai.js",
8 | "unpkg": "dist/david-ai.min.js",
9 | "types": "dist/index.d.ts",
10 | "type": "module",
11 | "exports": {
12 | "import": "./dist/david-ai.esm.js",
13 | "require": "./dist/david-ai.js"
14 | },
15 | "files": [
16 | "dist",
17 | "src",
18 | "README.md",
19 | "LICENSE.md",
20 | "package.json",
21 | "rollup.config.mjs"
22 | ],
23 | "scripts": {
24 | "build": "rollup -c",
25 | "build:watch": "rollup -c --watch",
26 | "dev": "rollup -c -w",
27 | "test": "echo \"Error: no test specified\" && exit 1"
28 | },
29 | "repository": {
30 | "type": "git",
31 | "url": "git+https://github.com/creativetimofficial/david-ai.git"
32 | },
33 | "keywords": [
34 | "ui",
35 | "ai",
36 | "david-ai",
37 | "components",
38 | "tailwindcss",
39 | "javascript"
40 | ],
41 | "author": "Creative Tim",
42 | "license": "MIT",
43 | "bugs": {
44 | "url": "https://github.com/creativetimofficial/david-ai/issues"
45 | },
46 | "homepage": "https://creative-tim.com/david-ui",
47 | "devDependencies": {
48 | "@babel/core": "^7.22.5",
49 | "@babel/preset-env": "^7.22.5",
50 | "@babel/preset-typescript": "^7.26.0",
51 | "@rollup/plugin-babel": "^6.0.3",
52 | "@rollup/plugin-commonjs": "^25.0.2",
53 | "@rollup/plugin-node-resolve": "^15.1.0",
54 | "@rollup/plugin-terser": "^0.4.3",
55 | "rollup": "^3.25.1",
56 | "rollup-plugin-typescript2": "^0.36.0",
57 | "typescript": "^5.7.2"
58 | },
59 | "dependencies": {
60 | "@popperjs/core": "^2.11.8",
61 | "tslib": "^2.8.1"
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/packages/src/accordion/ts/accordion.types.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Configuration options for the Accordion component
3 | */
4 | export interface AccordionConfig {
5 | /** When true, only one section can be open at a time */
6 | exclusive?: boolean;
7 | /** When true, allows multiple sections to be open simultaneously */
8 | allOpen?: boolean;
9 | }
10 |
11 | /**
12 | * Interface defining the public API for controlling Accordion behavior
13 | */
14 | export interface IAccordion {
15 | /**
16 | * Toggles the open/closed state of an accordion section
17 | * @param element - The accordion section element or its ID
18 | */
19 | toggle: (element: HTMLElement | string) => void;
20 |
21 | /**
22 | * Opens an accordion section
23 | * @param element - The accordion section element or its ID
24 | */
25 | show: (element: HTMLElement | string) => void;
26 |
27 | /**
28 | * Closes an accordion section
29 | * @param element - The accordion section element or its ID
30 | */
31 | hide: (element: HTMLElement | string) => void;
32 |
33 | /**
34 | * Opens all accordion sections simultaneously
35 | */
36 | showAll: () => void;
37 |
38 | /**
39 | * Closes all accordion sections simultaneously
40 | */
41 | hideAll: () => void;
42 |
43 | /**
44 | * Removes all event listeners and cleans up the accordion instance
45 | */
46 | cleanup: () => void;
47 | }
--------------------------------------------------------------------------------
/packages/src/alert/alert.js:
--------------------------------------------------------------------------------
1 | // Alert component
2 | const initializedElements = new WeakSet();
3 |
4 | export function closeAlert(event) {
5 | const button = event.currentTarget;
6 | const alert = button.closest('[role="alert"]');
7 | if (alert) {
8 | alert.remove(); // Remove the alert
9 | }
10 | }
11 |
12 | export function initAlert() {
13 | document.querySelectorAll("[data-dui-dismiss='alert']").forEach((button) => {
14 | if (!initializedElements.has(button)) {
15 | button.addEventListener("click", closeAlert);
16 | initializedElements.add(button);
17 | }
18 | });
19 | }
20 |
21 | // Auto-initialize on DOMContentLoaded and observe dynamically added elements
22 | if (typeof window !== "undefined") {
23 | document.addEventListener("DOMContentLoaded", () => {
24 | initAlert(); // Initialize alerts after DOM is loaded
25 |
26 | // Observe the DOM for dynamically added alerts
27 | const observer = new MutationObserver(() => {
28 | initAlert(); // Re-initialize alerts when new elements are added
29 | });
30 | observer.observe(document.body, { childList: true, subtree: true });
31 | });
32 | }
--------------------------------------------------------------------------------
/packages/src/alert/ts/alert.ts:
--------------------------------------------------------------------------------
1 | import { AlertEvent } from "./alert.types";
2 |
3 | const initializedElements = new WeakSet();
4 |
5 | export function closeAlert(event: AlertEvent): void {
6 | const button = event.currentTarget; // No need for type assertion; AlertEvent ensures it's an HTMLElement
7 | const alert = button.closest('[role="alert"]') as HTMLElement | null;
8 | if (alert) {
9 | alert.remove(); // Remove the alert
10 | }
11 | }
12 |
13 | export function initAlert(): void {
14 | document.querySelectorAll("[data-dui-dismiss='alert']").forEach((button) => {
15 | if (!initializedElements.has(button as HTMLElement)) {
16 | // Cast the listener to ensure compatibility with AlertEvent
17 | button.addEventListener("click", closeAlert as EventListener);
18 | initializedElements.add(button as HTMLElement);
19 | }
20 | });
21 | }
22 |
23 | // Auto-initialize on DOMContentLoaded and observe dynamically added elements
24 | if (typeof window !== "undefined") {
25 | document.addEventListener("DOMContentLoaded", () => {
26 | initAlert(); // Initialize alerts after DOM is loaded
27 |
28 | // Observe the DOM for dynamically added alerts
29 | const observer = new MutationObserver(() => {
30 | initAlert(); // Re-initialize alerts when new elements are added
31 | });
32 | observer.observe(document.body, { childList: true, subtree: true });
33 | });
34 | }
35 |
--------------------------------------------------------------------------------
/packages/src/alert/ts/alert.types.ts:
--------------------------------------------------------------------------------
1 | export interface AlertEvent extends Event {
2 | currentTarget: HTMLElement;
3 | }
--------------------------------------------------------------------------------
/packages/src/collapse/collapse.js:
--------------------------------------------------------------------------------
1 | // Collapse component
2 | const initializedElements = new WeakSet();
3 |
4 | export function toggleCollapse(event) {
5 | const collapseID = event.currentTarget.getAttribute("data-dui-target");
6 |
7 | if (collapseID && collapseID.startsWith("#")) {
8 | const collapseElement = document.querySelector(collapseID);
9 | const isExpanded =
10 | event.currentTarget.getAttribute("aria-expanded") === "true";
11 |
12 | if (collapseElement) {
13 | // Toggle max-height for collapsible content
14 | collapseElement.style.maxHeight = isExpanded
15 | ? "0"
16 | : collapseElement.scrollHeight + "px";
17 |
18 | // Update aria-expanded attribute
19 | event.currentTarget.setAttribute("aria-expanded", !isExpanded);
20 |
21 | // Toggle rotate-180 class on the icon
22 | const icon = event.currentTarget.querySelector("[data-dui-icon]");
23 | if (icon) {
24 | icon.classList.toggle("rotate-180", !isExpanded);
25 | }
26 | }
27 | }
28 | }
29 |
30 | export function initCollapse() {
31 | document
32 | .querySelectorAll("[data-dui-toggle='collapse']")
33 | .forEach((button) => {
34 | if (!initializedElements.has(button)) {
35 | button.addEventListener("click", toggleCollapse);
36 | initializedElements.add(button); // Mark as initialized
37 | }
38 | });
39 | }
40 |
41 | // Auto-initialize on DOMContentLoaded and observe dynamically added elements
42 | if (typeof window !== "undefined") {
43 | document.addEventListener("DOMContentLoaded", () => {
44 | initCollapse(); // Initialize collapsibles after DOM is loaded
45 |
46 | // Observe the DOM for dynamically added collapsible elements
47 | const observer = new MutationObserver(() => {
48 | initCollapse(); // Re-initialize collapsibles when new elements are added
49 | });
50 | observer.observe(document.body, { childList: true, subtree: true });
51 | });
52 | }
53 |
--------------------------------------------------------------------------------
/packages/src/collapse/ts/collapse.types.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Configuration options for the Collapse component.
3 | */
4 | export interface CollapseConfig {
5 | /**
6 | * Selector for the icon element to toggle rotation.
7 | * For example, you can pass "[data-icon]" to target specific icons.
8 | */
9 | iconSelector?: string;
10 | }
11 |
12 | /**
13 | * Interface for the Collapse component.
14 | */
15 | export interface ICollapse {
16 | /**
17 | * Toggles the collapsible content visibility.
18 | */
19 | toggle(): void;
20 |
21 | /**
22 | * Expands the collapsible content.
23 | */
24 | expand(): void;
25 |
26 | /**
27 | * Collapses the collapsible content.
28 | */
29 | collapse(): void;
30 | }
31 |
--------------------------------------------------------------------------------
/packages/src/dropdown/ts/dropdown.types.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Configuration options for the Dropdown component.
3 | */
4 | export interface DropdownConfig {
5 | /**
6 | * Placement of the dropdown relative to the button (default: "bottom-start").
7 | */
8 | placement?: string;
9 |
10 | /**
11 | * Whether clicking outside the dropdown menu closes it (default: true).
12 | */
13 | closeOnOutsideClick?: boolean;
14 |
15 | /**
16 | * Offset of the dropdown menu relative to the button ([x, y]).
17 | */
18 | offset?: [number, number];
19 | }
20 |
21 | /**
22 | * Interface for the Dropdown component.
23 | */
24 | export interface IDropdown {
25 | /**
26 | * Toggles the dropdown menu visibility.
27 | */
28 | toggle(): void;
29 |
30 | /**
31 | * Opens the dropdown menu.
32 | */
33 | open(): void;
34 |
35 | /**
36 | * Closes the dropdown menu.
37 | */
38 | close(): void;
39 |
40 | /**
41 | * Destroys the Dropdown instance and cleans up resources.
42 | */
43 | destroy(): void;
44 |
45 | /**
46 | * Set the prevent outside click flag to true.
47 | */
48 | preventOutsideClick(): void;
49 | }
50 |
--------------------------------------------------------------------------------
/packages/src/gallery/gallery.js:
--------------------------------------------------------------------------------
1 | // Gallery component
2 | const initializedElements = new WeakSet();
3 |
4 | export function changeMainImage(event) {
5 | const thumbnail = event.currentTarget;
6 | const mainImage = document.querySelector('[data-main-image]');
7 |
8 | if (mainImage) {
9 | // Change the main image's src to the clicked thumbnail's src
10 | mainImage.src = thumbnail.src;
11 |
12 | // Optional: Add an "active" class to the clicked thumbnail
13 | document.querySelectorAll('[data-thumbnail]').forEach((thumb) => {
14 | thumb.classList.remove('active-thumbnail');
15 | });
16 | thumbnail.classList.add('active-thumbnail');
17 | }
18 | }
19 |
20 | export function initGallery() {
21 | document.querySelectorAll('[data-thumbnail]').forEach((thumbnail) => {
22 | if (!initializedElements.has(thumbnail)) {
23 | thumbnail.addEventListener('click', changeMainImage);
24 | initializedElements.add(thumbnail);
25 | }
26 | });
27 | }
28 |
29 | export function cleanupGallery() {
30 | document.querySelectorAll('[data-thumbnail]').forEach((thumbnail) => {
31 | if (initializedElements.has(thumbnail)) {
32 | thumbnail.removeEventListener('click', changeMainImage);
33 | initializedElements.delete(thumbnail);
34 | }
35 | });
36 | }
37 |
38 | // Auto-initialize on DOMContentLoaded and observe dynamically added elements
39 | if (typeof window !== "undefined") {
40 | document.addEventListener("DOMContentLoaded", () => {
41 | initGallery(); // Initialize gallery after DOM is loaded
42 |
43 | // Observe the DOM for dynamically added thumbnails
44 | const observer = new MutationObserver(() => {
45 | initGallery(); // Re-initialize gallery when new elements are added
46 | });
47 | observer.observe(document.body, { childList: true, subtree: true });
48 | });
49 | }
--------------------------------------------------------------------------------
/packages/src/gallery/ts/gallery.ts:
--------------------------------------------------------------------------------
1 | // Gallery component
2 | const initializedElements = new WeakSet();
3 |
4 | export function changeMainImage(event: Event): void {
5 | const thumbnail = event.currentTarget as HTMLImageElement;
6 | const mainImage = document.querySelector('[data-main-image]');
7 |
8 | if (mainImage) {
9 | // Change the main image's src to the clicked thumbnail's src
10 | mainImage.src = thumbnail.src;
11 |
12 | // Optional: Add an "active" class to the clicked thumbnail
13 | document.querySelectorAll('[data-thumbnail]').forEach((thumb) => {
14 | thumb.classList.remove('active-thumbnail');
15 | });
16 | thumbnail.classList.add('active-thumbnail');
17 | }
18 | }
19 |
20 | export function initGallery(): void {
21 | document.querySelectorAll('[data-thumbnail]').forEach((thumbnail) => {
22 | if (!initializedElements.has(thumbnail)) {
23 | thumbnail.addEventListener('click', changeMainImage);
24 | initializedElements.add(thumbnail);
25 | }
26 | });
27 | }
28 |
29 | export function cleanupGallery(): void {
30 | document.querySelectorAll('[data-thumbnail]').forEach((thumbnail) => {
31 | if (initializedElements.has(thumbnail)) {
32 | thumbnail.removeEventListener('click', changeMainImage);
33 | initializedElements.delete(thumbnail);
34 | }
35 | });
36 | }
37 |
38 | // Auto-initialize on DOMContentLoaded and observe dynamically added elements
39 | if (typeof window !== "undefined") {
40 | document.addEventListener("DOMContentLoaded", () => {
41 | initGallery(); // Initialize gallery after DOM is loaded
42 |
43 | // Observe the DOM for dynamically added thumbnails
44 | const observer = new MutationObserver(() => {
45 | initGallery(); // Re-initialize gallery when new elements are added
46 | });
47 | observer.observe(document.body, { childList: true, subtree: true });
48 | });
49 | }
--------------------------------------------------------------------------------
/packages/src/modal/ts/modal.types.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Configuration options for the Modal component.
3 | */
4 | export interface ModalConfig {
5 | /**
6 | * Whether the Escape key should close the modal (default: true).
7 | */
8 | keyboard?: boolean;
9 |
10 | /**
11 | * Whether clicking outside the modal content should close the modal (default: true).
12 | */
13 | closeOnOutsideClick?: boolean;
14 | }
15 |
16 | /**
17 | * Interface for the Modal component.
18 | */
19 | export interface IModal {
20 | /**
21 | * Show the modal.
22 | */
23 | show(): void;
24 |
25 | /**
26 | * Hide the modal.
27 | */
28 | hide(): void;
29 |
30 | /**
31 | * Toggle the modal's visibility.
32 | */
33 | toggle(): void;
34 |
35 | /**
36 | * Check if the modal is currently visible.
37 | */
38 | isVisible(): boolean;
39 | }
40 |
--------------------------------------------------------------------------------
/packages/src/popover/ts/popover.types.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Configuration options for the Popover component.
3 | */
4 | export interface PopoverConfig {
5 | /**
6 | * The placement of the popover relative to the trigger.
7 | */
8 | placement?: string;
9 |
10 | /**
11 | * Custom classes to apply to the popover element.
12 | */
13 | popoverClass?: string;
14 |
15 | /**
16 | * Plain text content for the popover.
17 | */
18 | content?: string | HTMLElement;
19 |
20 | /**
21 | * Whether the popover is open by default.
22 | */
23 | openByDefault?: boolean;
24 |
25 | /**
26 | * Offset for the popover position.
27 | */
28 | offset?: [number, number];
29 | }
30 |
31 | /**
32 | * Interface for the Popover instance.
33 | */
34 | export interface IPopover {
35 | /**
36 | * Opens the popover programmatically.
37 | */
38 | open(): void;
39 |
40 | /**
41 | * Closes the popover programmatically.
42 | */
43 | close(): void;
44 |
45 | /**
46 | * Toggles the popover's visibility programmatically.
47 | */
48 | toggle(): void;
49 |
50 | /**
51 | * Destroys the Popover instance and cleans up resources.
52 | */
53 | destroy(): void;
54 | }
55 |
--------------------------------------------------------------------------------
/packages/src/stepper/ts/stepper.types.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Configuration options for initializing a Stepper instance
3 | * @interface StepperConfig
4 | */
5 | export interface StepperConfig {
6 | /** Array of HTML elements representing the step indicators */
7 | stepElements: HTMLElement[];
8 | /** Array of HTML elements containing the content for each step */
9 | contentElements: HTMLElement[];
10 | /** HTML element for the "previous" navigation button */
11 | prevButton: HTMLElement;
12 | /** HTML element for the "next" navigation button */
13 | nextButton: HTMLElement;
14 | /** Optional initial step number (defaults to 1 if not provided) */
15 | initialStep?: number;
16 | }
17 |
18 | /**
19 | * Interface defining the public API for the Stepper component
20 | * @interface IStepper
21 | */
22 | export interface IStepper {
23 | /** Advances to the next step if available */
24 | next(): void;
25 | /** Returns to the previous step if available */
26 | prev(): void;
27 | /**
28 | * Jumps to a specific step number
29 | * @param step - The step number to navigate to
30 | */
31 | goToStep(step: number): void;
32 | /** Returns the current active step number */
33 | getCurrentStep(): number;
34 |
35 | /** Destroys the Stepper instance, cleaning up event listeners and references */
36 | destroy(): void;
37 | }
38 |
--------------------------------------------------------------------------------
/packages/src/tabs/ts/tabs.types.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Configuration options for the Tabs component.
3 | */
4 | export interface TabsConfig {
5 | /**
6 | * Whether the tabs are oriented vertically or horizontally.
7 | * - `horizontal`: Tabs are arranged in a row.
8 | * - `vertical`: Tabs are arranged in a column.
9 | * @default "horizontal"
10 | */
11 | orientation?: "horizontal" | "vertical";
12 |
13 | /**
14 | * The ID of the tab to activate by default.
15 | * @default "tab-1"
16 | */
17 | defaultTabId?: string;
18 | }
19 |
20 | /**
21 | * Interface defining the programmatic API for the Tabs component.
22 | */
23 | export interface ITabs {
24 | /**
25 | * Activates the specified tab by ID.
26 | * @param tabId - The ID of the tab to activate.
27 | */
28 | activateTab(tabId: string): void;
29 |
30 | /**
31 | * Cleans up the tab group by removing event listeners and resetting the DOM.
32 | */
33 | cleanup(): void;
34 | }
35 |
--------------------------------------------------------------------------------
/packages/src/tooltip/ts/tooltip.types.ts:
--------------------------------------------------------------------------------
1 | import { Placement, Instance as PopperInstance } from "@popperjs/core";
2 |
3 | /**
4 | * Options for configuring a tooltip instance.
5 | */
6 | export interface TooltipConfig {
7 | /**
8 | * The placement of the tooltip relative to the trigger element.
9 | * Possible values include "top", "bottom", "left", "right", etc.
10 | * @see https://popper.js.org/docs/v2/constructors/#placement
11 | */
12 | placement?: Placement;
13 |
14 | /**
15 | * CSS classes to apply to the tooltip element for styling.
16 | */
17 | tooltipClass?: string;
18 |
19 | /**
20 | * The content to display inside the tooltip.
21 | * This can be a string or an HTML element.
22 | */
23 | content?: string | HTMLElement;
24 | }
25 |
26 | /**
27 | * Represents an active tooltip instance.
28 | */
29 | export interface ITooltip{
30 | /**
31 | * The HTML element that serves as the trigger for the tooltip.
32 | */
33 | triggerElement: HTMLElement;
34 |
35 | /**
36 | * The tooltip's HTML element.
37 | */
38 | tooltipElement: HTMLElement | null;
39 |
40 | /**
41 | * The Popper.js instance used for positioning.
42 | */
43 | tooltipInstance: PopperInstance | null;
44 |
45 | /**
46 | * Shows the tooltip.
47 | * @returns A promise that resolves once the tooltip is displayed.
48 | */
49 | showTooltip: () => Promise;
50 |
51 | /**
52 | * Hides the tooltip.
53 | */
54 | hideTooltip: () => void;
55 |
56 | /**
57 | * Destroys the tooltip instance, removing all event listeners and DOM elements.
58 | */
59 | destroy: () => void;
60 | }
61 |
--------------------------------------------------------------------------------
/packages/src/utils/loadPopper.ts:
--------------------------------------------------------------------------------
1 | let popperLoaded = false; // Singleton flag to track loading state
2 | let popperReady: Promise | null = null; // Promise to handle loading Popper.js once
3 |
4 | declare global {
5 | interface Window {
6 | Popper?: typeof import('@popperjs/core');
7 | }
8 | }
9 |
10 | export function loadPopperJs(): Promise {
11 | if (popperLoaded) {
12 | return popperReady!; // Return the existing Promise if already loading or loaded
13 | }
14 |
15 | popperLoaded = true; // Mark Popper.js as being loaded
16 |
17 | popperReady = new Promise((resolve, reject) => {
18 | if (window.Popper) {
19 | resolve(window.Popper); // If already loaded globally, resolve immediately
20 | return;
21 | }
22 |
23 | const script = document.createElement('script');
24 | script.src = 'https://unpkg.com/@popperjs/core@2';
25 | script.defer = true;
26 |
27 | script.onload = () => {
28 | resolve(window.Popper); // Resolve once Popper.js is loaded
29 | };
30 |
31 | script.onerror = () => {
32 | reject(new Error('Failed to load Popper.js'));
33 | };
34 |
35 | document.head.appendChild(script);
36 | });
37 |
38 | return popperReady;
39 | }
40 |
--------------------------------------------------------------------------------
/packages/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "declaration": true,
4 | "declarationDir": "dist",
5 | "emitDeclarationOnly": false,
6 | "outDir": "dist",
7 | "module": "ESNext",
8 | "target": "ES6",
9 | "strict": true,
10 | "esModuleInterop": true,
11 | "moduleResolution": "node",
12 | "typeRoots": ["./node_modules/@types", "./types"],
13 | "lib": ["DOM", "ESNext"],
14 | },
15 | "include": ["src/**/*.ts", "types/**/*.d.ts"],
16 | "exclude": ["node_modules", "dist"]
17 | }
18 |
--------------------------------------------------------------------------------
12 | 
4 | 
4 | 
5 | 
12 | 
15 | 
18 | 
21 | 
11 |