@keenthemes/ktui 1.0.11 → 1.0.12

package/src/components/toast/types.ts

@@ -0,0 +1,169 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+
+/**
+ * Toast variant types
+ */
+export type KTToastVariantType =
+	| 'info'
+	| 'success'
+	| 'error'
+	| 'warning'
+	| 'primary'
+	| 'secondary'
+	| 'destructive'
+	| 'mono';
+
+/**
+ * Toast appearance types
+ */
+export type KTToastAppearanceType = 'solid' | 'outline' | 'light';
+
+/**
+ * Toast size types
+ */
+export type KTToastSizeType = 'sm' | 'md' | 'lg';
+
+/**
+ * Toast position types
+ */
+export type KTToastPosition =
+	| 'top-end'
+	| 'top-center'
+	| 'top-start'
+	| 'bottom-end'
+	| 'bottom-center'
+	| 'bottom-start';
+
+/**
+ * Toast action interface
+ */
+export interface KTToastAction {
+	label?: string; // Button label
+	onClick?: (toastId: string) => void; // Click handler
+	className?: string; // Button classes
+}
+
+/**
+ * Allows overriding all internal class names for headless usage.
+ * Each property corresponds to a slot in the toast UI.
+ */
+export interface KTToastClassNames {
+	container?: string; // Toast container
+	toast?: string; // Taast
+	icon?: string; // Icon
+	message?: string; // Message
+	toolbar?: string; // Toolbar
+	actions?: string; // Actions
+}
+
+/**
+ * Toast configuration
+ * @property offset - The vertical offset (in px) from the edge of the screen for stacking toasts.
+ */
+export interface KTToastConfigInterface {
+	classNames?: Partial<KTToastClassNames>; // Override internal class names
+	position?: KTToastPosition; // Toast position
+	duration?: number; // Auto-dismiss duration (ms)
+	className?: string; // Custom class for toast root
+	maxToasts?: number; // Max toasts at once
+	offset?: number; // Offset from edge (px)
+	message?: string | HTMLElement | (() => HTMLElement); // Main message
+	description?: string | HTMLElement | (() => HTMLElement); // Description
+	icon?: string | HTMLElement | (() => HTMLElement); // Icon
+	action?: KTToastAction; // Action button
+	cancel?: KTToastAction; // Cancel button
+	dismiss?: boolean; // Show close button
+	variant?: KTToastVariantType; // Toast color/variant
+	appearance?: KTToastAppearanceType; // Appearance style
+	size?: KTToastSizeType; // Toast size
+	important?: boolean;
+	onAutoClose?: (id: string) => void;
+	onDismiss?: (id: string) => void;
+	closeButton?: boolean;
+	style?: Partial<CSSStyleDeclaration>;
+	invert?: boolean;
+	role?: string;
+	id?: string;
+	progress?: boolean;
+}
+
+export interface KTToastInterface {}
+
+export interface KTToastOptions {
+	/** Custom content for the toast. HTMLElement, function returning HTMLElement, or string (DOM id). If set, replaces all default markup. */
+	content?: HTMLElement | (() => HTMLElement) | string; // Custom content (overrides default markup)
+	/** Override internal class names for headless usage */
+	classNames?: Partial<KTToastClassNames>;
+	/** Show/hide progress indicator */
+	progress?: boolean;
+	/** Main content of the toast */
+	message?: string | HTMLElement | (() => HTMLElement); // Main content/message
+	/** Leading icon or visual */
+	icon?: string | boolean; // Leading icon or visual
+	/** Primary action button */
+	action?: KTToastAction | boolean; // Primary action button
+	/** Cancel/secondary action button */
+	cancel?: KTToastAction | boolean; // Cancel/secondary action button
+	/** Close button */
+	dismiss?: KTToastAction | boolean; // Close button
+	/** Toast variant */
+	variant?: KTToastVariantType; // Toast variant
+	/** Toast appearance */
+	appearance?: KTToastAppearanceType; // Toast appearance
+	/** Toast size */
+	size?: KTToastSizeType; // Toast size
+	/** Auto-dismiss duration (ms) */
+	duration?: number; // Auto-dismiss duration (ms)
+	/** Prevents auto-dismiss if true */
+	important?: boolean; // Prevent auto-dismiss
+	/** Called when auto-dismiss fires */
+	onAutoClose?: (id: string) => void; // Called when auto-dismiss fires
+	/** Called when toast is dismissed (manual or auto) */
+	onDismiss?: (id: string) => void; // Called when toast is dismissed
+	/** Toast position */
+	position?: KTToastPosition; // Toast position
+	/** Toast maxToasts */
+	maxToasts?: number; // Max toasts allowed
+	/** Prevents auto-dismiss when toast is focused */
+	pauseOnHover?: boolean; // Pause auto-dismiss on hover
+	/** Custom class for toast */
+	className?: string; // Custom class for toast
+	/** ARIA role */
+	role?: string; // ARIA role
+	/** Beep sound */
+	beep?: boolean; // Beep sound
+}
+
+/**
+ * Example: Set global config for all toasts
+ *
+ * import { KTToast } from './toast';
+ *
+ * KTToast.configToast({
+ *   position: 'bottom-end', // Default position
+ *   duration: 5000,        // Default auto-dismiss duration (ms)
+ *   maxToasts: 3,          // Max toasts visible at once
+ *   className: 'my-toast-root', // Custom class
+ *   gap: 20,               // Gap between stacked toasts
+ *   dismiss: true          // Show close button by default
+ * });
+ */
+export interface KTToastConfig {
+	classNames?: Partial<KTToastClassNames>; // Override internal class names
+	position?: KTToastPosition; // Toast position
+	duration?: number; // Auto-dismiss duration (ms)
+	className?: string; // Custom class for toast root
+	maxToasts?: number; // Max toasts at once
+	offset?: number; // Offset from edge (px)
+	gap?: number; // Gap between toasts (px)
+	dismiss?: boolean; // Show close button
+}
+
+export interface KTToastInstance {
+	id: string; // Toast unique ID
+	element: HTMLElement; // Toast DOM element
+	timeoutId: number; // Timer ID for auto-dismiss
+}

package/src/helpers/dom.ts

@@ -391,6 +391,36 @@ const KTDom = {
 		return attributes;
 	},
 
+	getDataAttributesByJson(element: HTMLElement, prefix: string): object {
+		if (!element) {
+			return {};
+		}
+
+		const rawValue = element.dataset[prefix];
+
+		if (!rawValue) {
+			return {};
+		}
+
+		const parsedValue = KTUtils.parseDataAttribute(rawValue);
+
+		if (typeof parsedValue === 'string') {
+			try {
+				return JSON.parse(parsedValue);
+			} catch (e) {
+				console.error(`Invalid JSON format for '${prefix}': ${e instanceof Error ? e.message : e} ${rawValue}`);
+			}
+		}
+
+		// If it's already an object, return as is
+		if (typeof parsedValue === 'object' && parsedValue !== null) {
+			return parsedValue;
+		}
+
+		// For other types (number, boolean, null), return an empty object
+		return {};
+	},
+
 	ready(callback: CallableFunction): void {
 		if (document.readyState === 'loading') {
 			document.addEventListener('DOMContentLoaded', () => {

package/src/index.ts

@@ -27,6 +27,7 @@ import { KTTogglePassword } from './components/toggle-password';
 import { KTDataTable } from './components/datatable';
 import { KTDatepicker } from './components/datepicker';
 import { KTSelect } from './components/select';
+import { KTToast } from './components/toast';
 
 export { KTDropdown } from './components/dropdown';
 export { KTModal } from './components/modal';
@@ -49,6 +50,7 @@ export { KTTogglePassword } from './components/toggle-password';
 export { KTDataTable } from './components/datatable';
 export { KTDatepicker } from './components/datepicker';
 export { KTSelect } from './components/select';
+export { KTToast } from './components/toast';
 
 const KTComponents = {
 	init(): void {
@@ -73,6 +75,7 @@ const KTComponents = {
 		KTDataTable.init();
 		KTDatepicker.init();
 		KTSelect.init();
+		KTToast.init();
 	},
 };
 
@@ -102,6 +105,7 @@ declare global {
 		KTDataTable: typeof KTDataTable;
 		KTDatepicker: typeof KTDatepicker;
 		KTSelect: typeof KTSelect;
+		KTToast: typeof KTToast;
 		KTComponents: typeof KTComponents;
 	}
 }

package/styles/main.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@import "./vars.css";
+@import "../styles.css";

package/styles/vars.css

@@ -0,0 +1,138 @@
+/** Colors **/
+:root {
+	/** Base Colors **/
+	--background: oklch(1 0 0);
+	/* --color-white */
+	--foreground: oklch(14.1% 0.005 285.823);
+	/* --color-zinc-950 */
+	--card: oklch(1 0 0);
+	/* --color-white */
+	--card-foreground: oklch(14.1% 0.005 285.823);
+	/* --color-zinc-950 */
+	--popover: oklch(1 0 0);
+	/* --color-white */
+	--popover-foreground: oklch(14.1% 0.005 285.823);
+	/* --color-zinc-950 */
+	--primary: oklch(62.3% 0.214 259.815);
+	/* --color-blue-500 */
+	--primary-foreground: oklch(1 0 0);
+	/* --color-white */
+	--secondary: oklch(96.7% 0.003 264.542);
+	/* --color-zinc-100 */
+	--secondary-foreground: oklch(21% 0.006 285.885);
+	/* --color-zinc-900 */
+	--muted: oklch(96.7% 0.003 264.542);
+	/* --color-zinc-100 */
+	--muted-foreground: oklch(55.2% 0.016 285.938);
+	/* --color-zinc-500 */
+	--accent: oklch(96.7% 0.003 264.542);
+	/* --color-zinc-100 */
+	--accent-foreground: oklch(21% 0.006 285.885);
+	/* --color-zinc-900 */
+	--destructive: oklch(57.7% 0.245 27.325);
+	/* --color-red-600 */
+	--destructive-foreground: oklch(1 0 0);
+	/* --color-white */
+	--mono: oklch(14.1% 0.005 285.823);
+	/* --color-zinc-950 */
+	--mono-foreground: oklch(1 0 0);
+	/* --color-white */
+
+	/** Base Styles **/
+	--border: oklch(94% 0.004 286.32);
+	/* between --color-zinc-100 and --color-zinc-200 */
+	--input: oklch(92% 0.004 286.32);
+	/* --color-zinc-200 */
+	--ring: oklch(87.1% 0.006 286.286);
+	/* --color-zinc-400 */
+	--radius: 0.5rem;
+}
+
+.dark {
+	/** Base Colors **/
+	--background: oklch(14.1% 0.005 285.823);
+	/* --color-zinc-950 */
+	--foreground: oklch(98.5% 0 0);
+	/* --color-zinc-50 */
+	--card: oklch(14.1% 0.005 285.823);
+	/* --color-zinc-950 */
+	--card-foreground: oklch(98.5% 0 0);
+	/* --color-zinc-50 */
+	--popover: oklch(14.1% 0.005 285.823);
+	/* --color-zinc-950 */
+	--popover-foreground: oklch(98.5% 0 0);
+	/* --color-zinc-50 */
+	--primary: oklch(54.6% 0.245 262.881);
+	/* --color-blue-600 */
+	--primary-foreground: oklch(1 0 0);
+	/* --color-white */
+	--secondary: oklch(27.4% 0.006 286.033);
+	/* --color-zinc-800 */
+	--secondary-foreground: oklch(98.5% 0 0);
+	/* --color-zinc-50 */
+	--muted: oklch(21% 0.006 285.885);
+	/* --color-zinc-900 */
+	--muted-foreground: oklch(55.2% 0.016 285.938);
+	/* --color-zinc-500 */
+	--accent: oklch(21% 0.006 285.885);
+	/* --color-zinc-900 */
+	--accent-foreground: oklch(98.5% 0 0);
+	/* --color-zinc-50 */
+	--destructive: oklch(57.7% 0.245 27.325);
+	/* --color-red-600 */
+	--destructive-foreground: oklch(1 0 0);
+	/* --color-white */
+	--mono: oklch(87.1% 0.006 286.286);
+	/* --color-zinc-300 */
+	--mono-foreground: oklch(0 0 0);
+	/* --color-black */
+
+	/** Base Styles **/
+	--border: oklch(27.4% 0.006 286.033);
+	/* --color-zinc-800 */
+	--input: oklch(27.4% 0.006 286.033);
+	/* --color-zinc-800 */
+	--ring: oklch(27.4% 0.006 286.033);
+	/* --color-zinc-600 */
+}
+
+/** Theme Setup **/
+@theme inline {
+	/** Base Colors **/
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+
+	--color-mono: var(--mono);
+	--color-mono-foreground: var(--mono-foreground);
+
+	/** Base Styles **/
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+
+	--radius-xl: calc(var(--radius) + 4px);
+	--radius-lg: var(--radius);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-sm: calc(var(--radius) - 4px);
+}

package/styles.css

@@ -43,6 +43,7 @@
 @import './src/components/skeleton/skeleton.css';
 @import './src/components/kbd/kbd.css';
 @import './src/components/breadcrumb/breadcrumb.css';
+@import './src/components/toast/toast.css';
 
 /** Dark Mode Variant **/
 @custom-variant dark (&:is(.dark *));