divhunt 2.0.4 → 2.0.6

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

@@ -1,203 +0,0 @@
-/* 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

@@ -1,25 +0,0 @@
-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>
-		`;
-	}
-});

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

@@ -1,136 +0,0 @@
-/* Base */
-.e-c8faa43
-{
-	width: 100%;
-	height: 8px;
-}
-
-.e-c8faa43 > .holder
-{
-	position: relative;
-	background: var(--dh-bg-3);
-	border-radius: var(--dh-radius-s);
-	overflow: hidden;
-}
-
-.e-c8faa43 > .holder > .bar
-{
-	height: 100%;
-	background: var(--dh-brand);
-	border-radius: var(--dh-radius-s);
-	transition: width 0.3s ease;
-}
-
-.e-c8faa43 > .holder > .text
-{
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	font-size: var(--dh-size-s);
-	font-weight: 600;
-	color: var(--dh-text-1);
-	white-space: nowrap;
-}
-
-/* Variants - Colors */
-.e-c8faa43 > .holder[variant*="brand"] > .bar
-{
-	background: var(--dh-brand);
-}
-
-.e-c8faa43 > .holder[variant*="blue"] > .bar
-{
-	background: var(--dh-blue);
-}
-
-.e-c8faa43 > .holder[variant*="red"] > .bar
-{
-	background: var(--dh-red);
-}
-
-.e-c8faa43 > .holder[variant*="orange"] > .bar
-{
-	background: var(--dh-orange);
-}
-
-.e-c8faa43 > .holder[variant*="green"] > .bar
-{
-	background: var(--dh-green);
-}
-
-/* Variants - Striped */
-.e-c8faa43 > .holder[variant*="striped"] > .bar
-{
-	background-image: linear-gradient(
-		45deg,
-		rgba(255, 255, 255, 0.15) 25%,
-		transparent 25%,
-		transparent 50%,
-		rgba(255, 255, 255, 0.15) 50%,
-		rgba(255, 255, 255, 0.15) 75%,
-		transparent 75%,
-		transparent
-	);
-	background-size: 20px 20px;
-}
-
-/* Variants - Animated */
-@keyframes progress-stripes
-{
-	0%
-	{
-		background-position: 0 0;
-	}
-	100%
-	{
-		background-position: 20px 0;
-	}
-}
-
-.e-c8faa43 > .holder[variant*="animated"] > .bar
-{
-	background-image: linear-gradient(
-		45deg,
-		rgba(255, 255, 255, 0.15) 25%,
-		transparent 25%,
-		transparent 50%,
-		rgba(255, 255, 255, 0.15) 50%,
-		rgba(255, 255, 255, 0.15) 75%,
-		transparent 75%,
-		transparent
-	);
-	background-size: 20px 20px;
-	animation: progress-stripes 1s linear infinite;
-}
-
-/* Variants - Sizes */
-.e-c8faa43 > .holder[variant*="size-s"]
-{
-	height: 4px;
-}
-
-.e-c8faa43 > .holder[variant*="size-s"] > .text
-{
-	font-size: 10px;
-}
-
-.e-c8faa43 > .holder[variant*="size-m"]
-{
-	height: 8px;
-}
-
-.e-c8faa43 > .holder[variant*="size-m"] > .text
-{
-	font-size: var(--dh-size-s);
-}
-
-.e-c8faa43 > .holder[variant*="size-l"]
-{
-	height: 16px;
-}
-
-.e-c8faa43 > .holder[variant*="size-l"] > .text
-{
-	font-size: var(--dh-size-m);
-}

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

@@ -1,40 +0,0 @@
-import elements from '#elements/load.js';
-
-elements.ItemAdd({
-	id: 'progress',
-	icon: 'progress_activity',
-	name: 'Progress',
-	description: 'Progress bar with percentage display and multiple styles.',
-	category: 'Feedback',
-	author: 'Divhunt',
-	config: {
-		value: {
-			type: 'number',
-			value: 60
-		},
-		max: {
-			type: 'number',
-			value: 100
-		},
-		text: {
-			type: 'string',
-			value: ''
-		},
-		variant: {
-			type: 'array',
-			value: ['striped', 'animated', 'size-m'],
-			options: ['brand', 'blue', 'red', 'orange', 'green', 'striped', 'animated', 'size-s', 'size-m', 'size-l']
-		}
-	},
-	render: function()
-	{
-		const percentage = Math.min(100, Math.max(0, (this.value / this.max) * 100));
-
-		return `
-			<div class="holder" :variant="variant.join(' ')">
-				<div class="bar" style="width: ${percentage}%"></div>
-				<div dh-if="text" class="text">{{ text }}</div>
-			</div>
-		`;
-	}
-});

package/addons/render/elements/front/items/self/form/button/button.js

@@ -1,105 +0,0 @@
-import elements from '#elements/load.js';
-
-elements.ItemAdd({
-	id: 'button',
-	icon: 'smart_button',
-	name: 'Button',
-	description: 'Premium button with icons, variants, animations, and ripple effects.',
-	category: 'Form',
-	author: 'Divhunt',
-	example: [
-		{ title: 'Solid', code: '<e-button text="Brand" icon="add"></e-button>' },
-		{ title: 'Soft', code: '<e-button text="Soft" icon="cloud" :variant="[\'soft-brand\']"></e-button>' },
-		{ title: 'Outline', code: '<e-button text="Outline" icon="edit" :variant="[\'outline-brand\']"></e-button>' },
-		{ title: 'Border', code: '<e-button text="Border" :variant="[\'border\']"></e-button>' },
-		{ title: 'Ghost', code: '<e-button text="Ghost" :variant="[\'ghost\']"></e-button>' },
-		{ title: 'Icon Only', code: '<e-button icon="add" :variant="[\'icon-only\']"></e-button>' }
-	],
-	config: {
-		icon: {
-			type: 'string',
-		},
-		iconRight: {
-			type: 'string',
-		},
-		text: {
-			type: 'string',
-			value: 'Button'
-		},
-		href: {
-			type: 'string',
-		},
-		target: {
-			type: 'string',
-			options: ['_blank', '_self', '_parent', '_top']
-		},
-		type: {
-			type: 'string',
-			value: 'button',
-			options: ['button', 'submit', 'reset']
-		},
-		disabled: {
-			type: 'boolean',
-			value: false
-		},
-		loading: {
-			type: 'boolean',
-			value: false
-		},
-		variant: {
-			type: 'array',
-			value: ['brand', 'size-m'],
-			options: [
-				'brand', 'blue', 'red', 'orange', 'green',
-				'soft-brand', 'soft-blue', 'soft-red', 'soft-orange', 'soft-green',
-				'outline-brand', 'outline-blue', 'outline-red', 'outline-orange', 'outline-green',
-				'bg-1', 'bg-2', 'bg-3', 'bg-4',
-				'ghost', 'glass', 'border', 'transparent',
-				'size-s', 'size-m', 'size-l',
-				'full', 'icon-only', 'rounded'
-			]
-		},
-		_click: {
-			type: 'function'
-		}
-	},
-	render: function()
-	{
-		this.handleClick = (e) =>
-		{
-			if(this.disabled || this.loading)
-			{
-				return;
-			}
-
-			if(this._click)
-			{
-				this._click(e);
-			}
-		};
-
-		const content = `
-			<span dh-if="loading" class="spinner"><i>progress_activity</i></span>
-			<span dh-if="!loading" class="content">
-				<i dh-if="icon" class="icon-left">{{ icon }}</i>
-				<span dh-if="text && !variant.includes('icon-only')" class="text">{{ text }}</span>
-				<i dh-if="iconRight" class="icon-right">{{ iconRight }}</i>
-			</span>
-		`;
-
-		if(this.href)
-		{
-			return `
-				<a class="holder" :href="href" :target="target" :variant="variant.join(' ')" :disabled="disabled" :loading="loading" dh-click="handleClick">
-					${content}
-				</a>
-			`;
-		}
-
-		return `
-			<button class="holder" :type="type" :variant="variant.join(' ')" :disabled="disabled" :loading="loading" dh-click="handleClick">
-				${content}
-			</button>
-		`;
-	}
-});

package/addons/render/elements/front/items/self/form/button/styles/base.css

@@ -1,176 +0,0 @@
-.e-593be338 
-{
-	display: flex;
-}
-
-/* Button Base */
-.e-593be338 > .holder
-{
-	position: relative;
-	border: 1px solid transparent;
-	border-radius: var(--dh-radius-m);
-	padding: 4px var(--dh-spacing-m);
-	cursor: pointer;
-	outline: none;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--dh-spacing-s);
-	background: transparent;
-	color: var(--dh-text-1);
-	font-size: var(--dh-size-m);
-	font-weight: 500;
-	text-decoration: none;
-	white-space: nowrap;
-	overflow: hidden;
-	user-select: none;
-	
-	-webkit-tap-highlight-color: transparent;
-	transition:
-		background 0.2s ease,
-		border-color 0.2s ease,
-		color 0.2s ease,
-		box-shadow 0.2s ease,
-		transform 0.15s ease;
-}
-
-/* Content wrapper */
-.e-593be338 > .holder > .content
-{
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--dh-spacing-s);
-	transition: transform 0.2s ease;
-}
-
-/* Text */
-.e-593be338 > .holder > .content > .text
-{
-	line-height: 1;
-}
-
-/* Icons */
-.e-593be338 > .holder > .content > i
-{
-	font-size: 18px;
-	transition: transform 0.2s ease;
-}
-
-.e-593be338 > .holder > .content > .icon-left
-{
-	margin-right: -2px;
-}
-
-.e-593be338 > .holder > .content > .icon-right
-{
-	margin-left: -2px;
-}
-
-/* Hover - subtle lift */
-.e-593be338 > .holder:hover
-{
-	transform: translateY(-1px);
-}
-
-.e-593be338 > .holder:hover > .content > .icon-right
-{
-	transform: translateX(2px);
-}
-
-/* Active - press down */
-.e-593be338 > .holder:active
-{
-	transform: translateY(0) scale(0.98);
-	transition-duration: 0.1s;
-}
-
-/* Focus visible - premium glow ring */
-.e-593be338 > .holder:focus-visible
-{
-	outline: none;
-	box-shadow:
-		0 0 0 2px var(--dh-bg-1),
-		0 0 0 4px var(--dh-brand);
-}
-
-/* Disabled */
-.e-593be338 > .holder[disabled="true"]
-{
-	opacity: 0.5;
-	cursor: not-allowed;
-	pointer-events: none;
-	transform: none;
-}
-
-/* Loading */
-.e-593be338 > .holder[loading="true"]
-{
-	cursor: wait;
-	pointer-events: none;
-}
-
-/* Spinner */
-.e-593be338 > .holder > .spinner
-{
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.e-593be338 > .holder > .spinner > i
-{
-	font-size: 18px;
-	animation: e-button-spin 0.8s linear infinite;
-}
-
-@keyframes e-button-spin
-{
-	from { transform: rotate(0deg); }
-	to { transform: rotate(360deg); }
-}
-
-/* Ripple effect */
-.e-593be338 > .holder > .ripple
-{
-	position: absolute;
-	border-radius: 50%;
-	background: currentColor;
-	opacity: 0.15;
-	transform: scale(0);
-	animation: e-button-ripple 0.6s ease-out forwards;
-	pointer-events: none;
-}
-
-@keyframes e-button-ripple
-{
-	to
-	{
-		transform: scale(2.5);
-		opacity: 0;
-	}
-}
-
-/* Full width */
-.e-593be338 > .holder[variant*="full"]
-{
-	width: 100%;
-}
-
-/* Rounded (pill) */
-.e-593be338 > .holder[variant*="rounded"]
-{
-	border-radius: 100px;
-}
-
-/* Icon only - square aspect */
-.e-593be338 > .holder[variant*="icon-only"]
-{
-	padding: 0;
-	aspect-ratio: 1;
-}
-
-.e-593be338 > .holder[variant*="icon-only"] > .content > i
-{
-	margin: 0;
-}