divhunt 2.0.0

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

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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,176 @@
+.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;
+}

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

@@ -0,0 +1,78 @@
+/* Small */
+.e-593be338 > .holder[variant*="size-s"]
+{
+	height: var(--dh-height-s);
+	padding: 0 var(--dh-spacing-s);
+	font-size: var(--dh-size-s);
+	gap: var(--dh-spacing-x);
+}
+
+.e-593be338 > .holder[variant*="size-s"] > .content
+{
+	gap: var(--dh-spacing-x);
+}
+
+.e-593be338 > .holder[variant*="size-s"] > .content > i,
+.e-593be338 > .holder[variant*="size-s"] > .spinner > i
+{
+	font-size: 14px;
+}
+
+/* Medium (default) */
+.e-593be338 > .holder[variant*="size-m"]
+{
+	height: var(--dh-height-m);
+	padding: 0 var(--dh-spacing-m);
+	font-size: var(--dh-size-m);
+	gap: var(--dh-spacing-s);
+}
+
+.e-593be338 > .holder[variant*="size-m"] > .content
+{
+	gap: var(--dh-spacing-s);
+}
+
+.e-593be338 > .holder[variant*="size-m"] > .content > i,
+.e-593be338 > .holder[variant*="size-m"] > .spinner > i
+{
+	font-size: 18px;
+}
+
+/* Large */
+.e-593be338 > .holder[variant*="size-l"]
+{
+	height: var(--dh-height-l);
+	padding: 0 var(--dh-spacing-l);
+	font-size: var(--dh-size-l);
+	gap: var(--dh-spacing-m);
+}
+
+.e-593be338 > .holder[variant*="size-l"] > .content
+{
+	gap: var(--dh-spacing-m);
+}
+
+.e-593be338 > .holder[variant*="size-l"] > .content > i,
+.e-593be338 > .holder[variant*="size-l"] > .spinner > i
+{
+	font-size: 22px;
+}
+
+/* Icon-only size adjustments */
+.e-593be338 > .holder[variant*="icon-only"][variant*="size-s"]
+{
+	width: var(--dh-height-s);
+	padding: 0;
+}
+
+.e-593be338 > .holder[variant*="icon-only"][variant*="size-m"]
+{
+	width: var(--dh-height-m);
+	padding: 0;
+}
+
+.e-593be338 > .holder[variant*="icon-only"][variant*="size-l"]
+{
+	width: var(--dh-height-l);
+	padding: 0;
+}