divhunt 2.0.0

package/addons/render/elements/front/items/self/feedback/alert/alert.js

@@ -0,0 +1,67 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'alert',
+	icon: 'info',
+	name: 'Alert',
+	description: 'Notification box with variants (info, success, warning, error), optional close button, and customizable content.',
+	category: 'Feedback',
+	author: 'Divhunt',
+	config: {
+		title: {
+			type: 'string',
+			value: 'Alert Title'
+		},
+		text: {
+			type: 'string',
+			value: 'This is an alert message.'
+		},
+		variant: {
+			type: 'array',
+			value: ['orange', 'size-m', 'animate-bounce'],
+			options: ['brand', 'blue', 'red', 'orange', 'green', 'border', 'animate-bounce', 'size-s', 'size-m', 'size-l']
+		},
+		icon: {
+			type: 'string',
+			value: 'info'
+		},
+		close: {
+			type: 'boolean',
+			value: true
+		},
+		visible: {
+			type: 'boolean',
+			value: true
+		},
+		onClose: {
+			type: 'function'
+		}
+	},
+	render: function()
+	{
+		this.handleClose = () =>
+		{
+			this.visible = false;
+			if (this.onClose)
+			{
+				this.onClose();
+			}
+		};
+
+		return `
+			<div dh-if="visible" class="holder" :variant="variant.join(' ')">
+				<i dh-if="icon" class="icon">{{ icon }}</i>
+
+				<div class="content">
+					<div dh-if="title" class="title">{{ title }}</div>
+					<div dh-if="text" class="text">{{ text }}</div>
+					<slot></slot>
+				</div>
+
+				<button dh-if="close" class="close" dh-click="handleClose">
+					<i class="icon">close</i>
+				</button>
+			</div>
+		`;
+	}
+});

package/addons/render/elements/front/items/self/feedback/confirm/confirm.css

@@ -0,0 +1,229 @@
+/* Base */
+.e-5c0da3ea> .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	max-width: 450px;
+	background: var(--dh-bg-2);
+	border: 1px solid var(--dh-bg-2-border);
+	border-radius: var(--dh-radius-l);
+	overflow: hidden;
+}
+
+.e-5c0da3ea> .holder > .header
+{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--dh-spacing-l);
+	border-bottom: 1px solid var(--dh-bg-2-border);
+}
+
+.e-5c0da3ea> .holder > .header > .title
+{
+	font-size: var(--dh-size-l);
+	font-weight: 600;
+	color: var(--dh-text-1);
+	flex: 1;
+}
+
+.e-5c0da3ea> .holder > .content
+{
+	padding: var(--dh-spacing-l);
+	color: var(--dh-text-2);
+	font-size: var(--dh-size-m);
+	line-height: 1.6;
+}
+
+.e-5c0da3ea> .holder > .content > .text
+{
+	color: var(--dh-text-2);
+	line-height: 1.6;
+}
+
+.e-5c0da3ea> .holder > .footer
+{
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding: var(--dh-spacing-l);
+	border-top: 1px solid var(--dh-bg-2-border);
+	gap: var(--dh-spacing-s);
+}
+
+/* Variants - Background */
+.e-5c0da3ea> .holder[variant*="bg-1"]
+{
+	background: var(--dh-bg-1);
+	border-color: var(--dh-bg-1-border);
+}
+
+.e-5c0da3ea> .holder[variant*="bg-1"] > .header
+{
+	border-bottom-color: var(--dh-bg-1-border);
+}
+
+.e-5c0da3ea> .holder[variant*="bg-1"] > .footer
+{
+	border-top-color: var(--dh-bg-1-border);
+}
+
+.e-5c0da3ea> .holder[variant*="bg-2"]
+{
+	background: var(--dh-bg-2);
+	border-color: var(--dh-bg-2-border);
+}
+
+.e-5c0da3ea> .holder[variant*="bg-2"] > .header
+{
+	border-bottom-color: var(--dh-bg-2-border);
+}
+
+.e-5c0da3ea> .holder[variant*="bg-2"] > .footer
+{
+	border-top-color: var(--dh-bg-2-border);
+}
+
+.e-5c0da3ea> .holder[variant*="bg-3"]
+{
+	background: var(--dh-bg-3);
+	border-color: var(--dh-bg-3-border);
+}
+
+.e-5c0da3ea> .holder[variant*="bg-3"] > .header
+{
+	border-bottom-color: var(--dh-bg-3-border);
+}
+
+.e-5c0da3ea> .holder[variant*="bg-3"] > .footer
+{
+	border-top-color: var(--dh-bg-3-border);
+}
+
+.e-5c0da3ea> .holder[variant*="bg-4"]
+{
+	background: var(--dh-bg-4);
+	border-color: var(--dh-bg-4-border);
+}
+
+.e-5c0da3ea> .holder[variant*="bg-4"] > .header
+{
+	border-bottom-color: var(--dh-bg-4-border);
+}
+
+.e-5c0da3ea> .holder[variant*="bg-4"] > .footer
+{
+	border-top-color: var(--dh-bg-4-border);
+}
+
+/* Variants - Border */
+.e-5c0da3ea> .holder[variant*="border"]
+{
+	border-width: 2px;
+}
+
+/* Variants - Animation */
+@keyframes bounce
+{
+	0%, 100%
+	{
+		transform: translateX(0);
+	}
+	25%
+	{
+		transform: translateX(-10px);
+	}
+	50%
+	{
+		transform: translateX(0);
+	}
+	75%
+	{
+		transform: translateX(-5px);
+	}
+}
+
+.e-5c0da3ea> .holder[variant*="animate-bounce"]
+{
+	animation: bounce 1s ease-in-out;
+}
+
+/* Variants - Sizes */
+.e-5c0da3ea> .holder[variant*="size-s"]
+{
+	max-width: 350px;
+}
+
+.e-5c0da3ea> .holder[variant*="size-s"] > .header
+{
+	padding: var(--dh-spacing-m);
+}
+
+.e-5c0da3ea> .holder[variant*="size-s"] > .header > .title
+{
+	font-size: var(--dh-size-m);
+}
+
+.e-5c0da3ea> .holder[variant*="size-s"] > .content
+{
+	padding: var(--dh-spacing-m);
+	font-size: var(--dh-size-s);
+}
+
+.e-5c0da3ea> .holder[variant*="size-s"] > .footer
+{
+	padding: var(--dh-spacing-m);
+}
+
+.e-5c0da3ea> .holder[variant*="size-m"]
+{
+	max-width: 450px;
+}
+
+.e-5c0da3ea> .holder[variant*="size-m"] > .header
+{
+	padding: var(--dh-spacing-l);
+}
+
+.e-5c0da3ea> .holder[variant*="size-m"] > .header > .title
+{
+	font-size: var(--dh-size-l);
+}
+
+.e-5c0da3ea> .holder[variant*="size-m"] > .content
+{
+	padding: var(--dh-spacing-l);
+	font-size: var(--dh-size-m);
+}
+
+.e-5c0da3ea> .holder[variant*="size-m"] > .footer
+{
+	padding: var(--dh-spacing-l);
+}
+
+.e-5c0da3ea> .holder[variant*="size-l"]
+{
+	max-width: 600px;
+}
+
+.e-5c0da3ea> .holder[variant*="size-l"] > .header
+{
+	padding: var(--dh-spacing-l);
+}
+
+.e-5c0da3ea> .holder[variant*="size-l"] > .header > .title
+{
+	font-size: 24px;
+}
+
+.e-5c0da3ea> .holder[variant*="size-l"] > .content
+{
+	padding: var(--dh-spacing-l);
+	font-size: var(--dh-size-l);
+}
+
+.e-5c0da3ea> .holder[variant*="size-l"] > .footer
+{
+	padding: var(--dh-spacing-l);
+}

package/addons/render/elements/front/items/self/feedback/confirm/confirm.js

@@ -0,0 +1,81 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'confirm',
+	icon: 'help',
+	name: 'Confirm',
+	description: 'Confirmation dialog with title, message, and action buttons.',
+	category: 'Feedback',
+	author: 'Divhunt',
+	config: {
+		title: {
+			type: 'string',
+			value: 'Confirm Action'
+		},
+		text: {
+			type: 'string',
+			value: 'Are you sure you want to proceed?'
+		},
+		confirm: {
+			type: 'string',
+			value: 'Confirm'
+		},
+		cancel: {
+			type: 'string',
+			value: 'Cancel'
+		},
+		variant: {
+			type: 'array',
+			value: ['bg-2', 'size-m', 'animate-bounce'],
+			options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'animate-bounce', 'size-s', 'size-m', 'size-l']
+		},
+		visible: {
+			type: 'boolean',
+			value: true
+		},
+		onConfirm: {
+			type: 'function'
+		},
+		onCancel: {
+			type: 'function'
+		}
+	},
+	render: function()
+	{
+		this.handleConfirm = () =>
+		{
+			this.visible = false;
+			if (this.onConfirm)
+			{
+				this.onConfirm();
+			}
+		};
+
+		this.handleCancel = () =>
+		{
+			this.visible = false;
+			if (this.onCancel)
+			{
+				this.onCancel();
+			}
+		};
+
+		return `
+			<div dh-if="visible" class="holder" :variant="variant.join(' ')">
+				<div dh-if="title" class="header">
+					<div class="title">{{ title }}</div>
+				</div>
+
+				<div class="content">
+					<div dh-if="text" class="text">{{ text }}</div>
+					<slot></slot>
+				</div>
+
+				<div class="footer">
+					<e-button dh-if="cancel" :variant="['ghost', 'size-m']" :text="cancel" :onClick="handleCancel"></e-button>
+					<e-button dh-if="confirm" :variant="['brand', 'size-m']" :text="confirm" :onClick="handleConfirm"></e-button>
+				</div>
+			</div>
+		`;
+	}
+});

package/addons/render/elements/front/items/self/feedback/loader/loader.css

@@ -0,0 +1,203 @@
+/* Base */
+.e-4888da57> .holder
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.e-4888da57> .holder > .spinner
+{
+	width: 40px;
+	height: 40px;
+	border: 3px solid var(--dh-bg-3);
+	border-top-color: var(--dh-text-1);
+	border-radius: 50%;
+}
+
+/* Variants - Spin */
+@keyframes spin
+{
+	to
+	{
+		transform: rotate(360deg);
+	}
+}
+
+.e-4888da57> .holder[variant*="spin"] > .spinner
+{
+	animation: spin 0.8s linear infinite;
+}
+
+/* Variants - Dots */
+@keyframes dots
+{
+	0%, 100%
+	{
+		background-position: 0% 50%, 50% 50%, 100% 0%;
+	}
+	33%
+	{
+		background-position: 0% 0%, 50% 50%, 100% 50%;
+	}
+	66%
+	{
+		background-position: 0% 50%, 50% 0%, 100% 100%;
+	}
+}
+
+.e-4888da57> .holder[variant*="dots"] > .spinner
+{
+	border: none;
+	background: radial-gradient(circle, var(--dh-text-1) 25%, transparent 26%),
+				radial-gradient(circle, var(--dh-text-1) 25%, transparent 26%),
+				radial-gradient(circle, var(--dh-text-1) 25%, transparent 26%);
+	background-size: 33% 33%;
+	background-position: 0% 50%, 50% 50%, 100% 0%;
+	background-repeat: no-repeat;
+	animation: dots 1.5s infinite ease-in-out;
+}
+
+/* Variants - Pulse */
+@keyframes pulse
+{
+	0%, 100%
+	{
+		transform: scale(1);
+		opacity: 1;
+	}
+	50%
+	{
+		transform: scale(1.5);
+		opacity: 0.5;
+	}
+}
+
+.e-4888da57> .holder[variant*="pulse"] > .spinner
+{
+	border: 3px solid var(--dh-text-1);
+	animation: pulse 1.5s ease-in-out infinite;
+}
+
+/* Variants - Colors */
+.e-4888da57> .holder[variant*="brand"] > .spinner
+{
+	border-top-color: var(--dh-brand);
+}
+
+.e-4888da57> .holder[variant*="brand"][variant*="dots"] > .spinner
+{
+	background: radial-gradient(circle, var(--dh-brand) 25%, transparent 26%),
+				radial-gradient(circle, var(--dh-brand) 25%, transparent 26%),
+				radial-gradient(circle, var(--dh-brand) 25%, transparent 26%);
+	background-size: 33% 33%;
+	background-position: 0% 0%, 50% 50%, 100% 50%;
+	background-repeat: no-repeat;
+}
+
+.e-4888da57> .holder[variant*="brand"][variant*="pulse"] > .spinner
+{
+	border-color: var(--dh-brand);
+}
+
+.e-4888da57> .holder[variant*="blue"] > .spinner
+{
+	border-top-color: var(--dh-blue);
+}
+
+.e-4888da57> .holder[variant*="blue"][variant*="dots"] > .spinner
+{
+	background: radial-gradient(circle, var(--dh-blue) 25%, transparent 26%),
+				radial-gradient(circle, var(--dh-blue) 25%, transparent 26%),
+				radial-gradient(circle, var(--dh-blue) 25%, transparent 26%);
+	background-size: 33% 33%;
+	background-position: 0% 0%, 50% 50%, 100% 50%;
+	background-repeat: no-repeat;
+}
+
+.e-4888da57> .holder[variant*="blue"][variant*="pulse"] > .spinner
+{
+	border-color: var(--dh-blue);
+}
+
+.e-4888da57> .holder[variant*="red"] > .spinner
+{
+	border-top-color: var(--dh-red);
+}
+
+.e-4888da57> .holder[variant*="red"][variant*="dots"] > .spinner
+{
+	background: radial-gradient(circle, var(--dh-red) 25%, transparent 26%),
+				radial-gradient(circle, var(--dh-red) 25%, transparent 26%),
+				radial-gradient(circle, var(--dh-red) 25%, transparent 26%);
+	background-size: 33% 33%;
+	background-position: 0% 0%, 50% 50%, 100% 50%;
+	background-repeat: no-repeat;
+}
+
+.e-4888da57> .holder[variant*="red"][variant*="pulse"] > .spinner
+{
+	border-color: var(--dh-red);
+}
+
+.e-4888da57> .holder[variant*="orange"] > .spinner
+{
+	border-top-color: var(--dh-orange);
+}
+
+.e-4888da57> .holder[variant*="orange"][variant*="dots"] > .spinner
+{
+	background: radial-gradient(circle, var(--dh-orange) 25%, transparent 26%),
+				radial-gradient(circle, var(--dh-orange) 25%, transparent 26%),
+				radial-gradient(circle, var(--dh-orange) 25%, transparent 26%);
+	background-size: 33% 33%;
+	background-position: 0% 0%, 50% 50%, 100% 50%;
+	background-repeat: no-repeat;
+}
+
+.e-4888da57> .holder[variant*="orange"][variant*="pulse"] > .spinner
+{
+	border-color: var(--dh-orange);
+}
+
+.e-4888da57> .holder[variant*="green"] > .spinner
+{
+	border-top-color: var(--dh-green);
+}
+
+.e-4888da57> .holder[variant*="green"][variant*="dots"] > .spinner
+{
+	background: radial-gradient(circle, var(--dh-green) 25%, transparent 26%),
+				radial-gradient(circle, var(--dh-green) 25%, transparent 26%),
+				radial-gradient(circle, var(--dh-green) 25%, transparent 26%);
+	background-size: 33% 33%;
+	background-position: 0% 0%, 50% 50%, 100% 50%;
+	background-repeat: no-repeat;
+}
+
+.e-4888da57> .holder[variant*="green"][variant*="pulse"] > .spinner
+{
+	border-color: var(--dh-green);
+}
+
+/* Variants - Sizes */
+.e-4888da57> .holder[variant*="size-s"] > .spinner
+{
+	width: 24px;
+	height: 24px;
+	border-width: 2px;
+}
+
+.e-4888da57> .holder[variant*="size-m"] > .spinner
+{
+	width: 40px;
+	height: 40px;
+	border-width: 3px;
+}
+
+.e-4888da57> .holder[variant*="size-l"] > .spinner
+{
+	width: 64px;
+	height: 64px;
+	border-width: 4px;
+}

package/addons/render/elements/front/items/self/feedback/loader/loader.js

@@ -0,0 +1,25 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'loader',
+	icon: 'progress_activity',
+	name: 'Loader',
+	description: 'Loading spinner with multiple animation styles (spin, dots, pulse).',
+	category: 'Feedback',
+	author: 'Divhunt',
+	config: {
+		variant: {
+			type: 'array',
+			value: ['dots', 'brand', 'size-m'],
+			options: ['spin', 'dots', 'pulse', 'brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
+		}
+	},
+	render: function()
+	{
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<div class="spinner"></div>
+			</div>
+		`;
+	}
+});