divhunt 2.0.0

package/addons/render/elements/front/items/self/base/menu/styles/sizes.css

@@ -0,0 +1,27 @@
+.e-4de878b > .holder[variant*="size-s"]
+{
+	min-height: 24px;
+	padding: 2px var(--dh-spacing-x);
+	font-size: var(--dh-size-s);
+}
+
+.e-4de878b > .holder[variant*="size-s"] > i
+{
+	font-size: var(--dh-size-s);
+}
+
+.e-4de878b > .holder[variant*="size-m"]
+{
+	min-height: 36px;
+}
+
+.e-4de878b > .holder[variant*="size-l"]
+{
+	min-height: 38px;
+	font-size: var(--dh-size-l);
+}
+
+.e-4de878b > .holder[variant*="size-l"] > i
+{
+	font-size: var(--dh-size-l);
+}

package/addons/render/elements/front/items/self/base/menu/styles/variants.css

@@ -0,0 +1,99 @@
+.e-4de878b > .holder[variant*="bg-1"]
+{
+	background: var(--dh-bg-1);
+}
+
+.e-4de878b > .holder[variant*="bg-1"]:hover
+{
+	background: var(--dh-bg-1-hover);
+}
+
+.e-4de878b > .holder[variant*="bg-2"]
+{
+	background: var(--dh-bg-2);
+}
+
+.e-4de878b > .holder[variant*="bg-2"]:hover
+{
+	background: var(--dh-bg-2-hover);
+}
+
+.e-4de878b > .holder[variant*="bg-3"]
+{
+	background: var(--dh-bg-3);
+}
+
+.e-4de878b > .holder[variant*="bg-3"]:hover
+{
+	background: var(--dh-bg-3-hover);
+}
+
+.e-4de878b > .holder[variant*="bg-4"]
+{
+	background: var(--dh-bg-4);
+}
+
+.e-4de878b > .holder[variant*="bg-4"]:hover
+{
+	background: var(--dh-bg-4-hover);
+}
+
+.e-4de878b > .holder[variant*="border"]
+{
+	border: 1px solid var(--dh-bg-3-border);
+}
+
+.e-4de878b > .holder[variant*="brand"]
+{
+	background: var(--dh-brand-opacity);
+	color: var(--dh-brand);
+}
+
+.e-4de878b > .holder[variant*="brand"] > i
+{
+	color: var(--dh-brand);
+}
+
+.e-4de878b > .holder[variant*="blue"]
+{
+	background: var(--dh-blue-opacity);
+	color: var(--dh-blue);
+}
+
+.e-4de878b > .holder[variant*="blue"] > i
+{
+	color: var(--dh-blue);
+}
+
+.e-4de878b > .holder[variant*="red"]
+{
+	background: var(--dh-red-opacity);
+	color: var(--dh-red);
+}
+
+.e-4de878b > .holder[variant*="red"] > i
+{
+	color: var(--dh-red);
+}
+
+.e-4de878b > .holder[variant*="orange"]
+{
+	background: var(--dh-orange-opacity);
+	color: var(--dh-orange);
+}
+
+.e-4de878b > .holder[variant*="orange"] > i
+{
+	color: var(--dh-orange);
+}
+
+.e-4de878b > .holder[variant*="green"]
+{
+	background: var(--dh-green-opacity);
+	color: var(--dh-green);
+}
+
+.e-4de878b > .holder[variant*="green"] > i
+{
+	color: var(--dh-green);
+}

package/addons/render/elements/front/items/self/base/tag/tag.css

@@ -0,0 +1,199 @@
+.e-21305e3c > .holder
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--dh-spacing-x);
+	padding: var(--dh-spacing-x) var(--dh-spacing-s);
+	border-radius: var(--dh-radius-s);
+	border: 1px solid;
+	font-weight: 500;
+	font-size: var(--dh-size-s);
+	transition: all 0.2s;
+	cursor: pointer;
+	background: transparent;
+	border-color: transparent;
+	color: var(--dh-text-1);
+}
+
+.e-21305e3c > .holder:hover
+{
+	background: var(--dh-bg-2);
+}
+
+.e-21305e3c > .holder i
+{
+	font-size: 14px;
+}
+
+.e-21305e3c > .holder > .text
+{
+	line-height: 1;
+}
+
+/* Variants - Background */
+.e-21305e3c > .holder[variant*="transparent"]
+{
+    background: transparent;
+    border-color: transparent;
+    color: var(--dh-text-1);
+}
+
+.e-21305e3c > .holder[variant*="transparent"]:hover
+{
+    background: var(--dh-bg-2);
+}
+
+.e-21305e3c > .holder[variant*="border"]
+{
+    background: transparent;
+    border-color: var(--dh-bg-1-border);
+    color: var(--dh-text-1);
+}
+
+.e-21305e3c > .holder[variant*="border"]:hover
+{
+    background: var(--dh-bg-2);
+    border-color: var(--dh-bg-2-border);
+}
+
+.e-21305e3c > .holder[variant*="bg-1"]
+{
+    background: var(--dh-bg-1);
+    border-color: var(--dh-bg-1-border);
+    color: var(--dh-text-1);
+}
+
+.e-21305e3c > .holder[variant*="bg-1"]:hover
+{
+    background: var(--dh-bg-1-hover);
+}
+
+.e-21305e3c > .holder[variant*="bg-2"]
+{
+    background: var(--dh-bg-2);
+    border-color: var(--dh-bg-2-border);
+    color: var(--dh-text-1);
+}
+
+.e-21305e3c > .holder[variant*="bg-2"]:hover
+{
+    background: var(--dh-bg-2-hover);
+}
+
+.e-21305e3c > .holder[variant*="bg-3"]
+{
+    background: var(--dh-bg-3);
+    border-color: var(--dh-bg-3-border);
+    color: var(--dh-text-1);
+}
+
+.e-21305e3c > .holder[variant*="bg-3"]:hover
+{
+    background: var(--dh-bg-3-hover);
+}
+
+.e-21305e3c > .holder[variant*="bg-4"]
+{
+    background: var(--dh-bg-4);
+    border-color: var(--dh-bg-4-border);
+    color: var(--dh-text-1);
+}
+
+.e-21305e3c > .holder[variant*="bg-4"]:hover
+{
+    background: var(--dh-bg-4-hover);
+}
+
+.e-21305e3c > .holder[variant*="brand"]
+{
+    background: var(--dh-brand);
+    border-color: var(--dh-brand-border);
+    color: white;
+}
+
+.e-21305e3c > .holder[variant*="brand"]:hover
+{
+    background: var(--dh-brand-hover);
+}
+
+.e-21305e3c > .holder[variant*="blue"]
+{
+    background: var(--dh-blue);
+    border-color: var(--dh-blue-border);
+    color: white;
+}
+
+.e-21305e3c > .holder[variant*="blue"]:hover
+{
+    background: var(--dh-blue-hover);
+}
+
+.e-21305e3c > .holder[variant*="red"]
+{
+    background: var(--dh-red);
+    border-color: var(--dh-red-border);
+    color: white;
+}
+
+.e-21305e3c > .holder[variant*="red"]:hover
+{
+    background: var(--dh-red-hover);
+}
+
+.e-21305e3c > .holder[variant*="orange"]
+{
+    background: var(--dh-orange);
+    border-color: var(--dh-orange-border);
+    color: white;
+}
+
+.e-21305e3c > .holder[variant*="orange"]:hover
+{
+    background: var(--dh-orange-hover);
+}
+
+.e-21305e3c > .holder[variant*="green"]
+{
+    background: var(--dh-green);
+    border-color: var(--dh-green-border);
+    color: white;
+}
+
+.e-21305e3c > .holder[variant*="green"]:hover
+{
+    background: var(--dh-green-hover);
+}
+
+.e-21305e3c > .holder[variant*="size-s"]
+{
+	padding: 2px var(--dh-spacing-x);
+	font-size: 11px;
+}
+
+.e-21305e3c > .holder[variant*="size-s"] i
+{
+	font-size: 12px;
+}
+
+.e-21305e3c > .holder[variant*="size-m"]
+{
+	padding: var(--dh-spacing-x) var(--dh-spacing-s);
+	font-size: var(--dh-size-s);
+}
+
+.e-21305e3c > .holder[variant*="size-m"] i
+{
+	font-size: 14px;
+}
+
+.e-21305e3c > .holder[variant*="size-l"]
+{
+	padding: var(--dh-spacing-s) var(--dh-spacing-m);
+	font-size: var(--dh-size-m);
+}
+
+.e-21305e3c > .holder[variant*="size-l"] i
+{
+	font-size: 16px;
+}

package/addons/render/elements/front/items/self/base/tag/tag.js

@@ -0,0 +1,37 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'tag',
+	icon: 'label',
+	name: 'Tag',
+	description: 'Label/badge component with icon, color variants, sizes, and click handler support.',
+	category: 'Base',
+	author: 'Divhunt',
+	config: {
+		icon: {
+			type: 'string',
+			value: ''
+		},
+		text: {
+			type: 'string',
+			value: 'Tag'
+		},
+		variant: {
+			type: 'array',
+			value: ['bg-3', 'size-m'],
+			options: ['transparent', 'border', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
+		},
+		onClick: {
+			type: 'function'
+		}
+	},
+	render: function()
+	{
+		return `
+			<div class="holder" :variant="variant.join(' ')" dh-click="onClick">
+				<i dh-if="icon">{{ icon }}</i>
+				<span class="text">{{ text }}</span>
+			</div>
+		`;
+	}
+});

package/addons/render/elements/front/items/self/cards/basic/basic.js

@@ -0,0 +1,89 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'card-basic',
+	icon: 'crop_square',
+	name: 'Card Basic',
+	description: 'Base card with icon, title, description, badge, and action buttons.',
+	category: 'Cards',
+	author: 'Divhunt',
+	config: {
+		icon: {
+			type: 'string',
+			value: 'folder'
+		},
+		title: {
+			type: 'string',
+			value: 'Project Alpha'
+		},
+		description: {
+			type: 'string',
+			value: 'A comprehensive project management solution for modern teams.'
+		},
+		badge: {
+			type: 'string',
+			value: 'Active'
+		},
+		actions: {
+			type: 'array',
+			value: [
+				{ text: 'Edit', icon: 'edit', variant: ['border', 'size-s'] },
+				{ text: 'Delete', icon: 'delete', variant: ['border', 'size-s'] }
+			],
+			each: {
+				type: 'object',
+				config: {
+					text: { type: 'string', value: '' },
+					icon: { type: 'string', value: '' },
+					variant: { type: 'array', value: ['border', 'size-s'] }
+				}
+			}
+		},
+		variant: {
+			type: 'array',
+			value: ['bg-2', 'border', 'size-m'],
+			options: ['border', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
+		},
+		onClick: {
+			type: 'function'
+		},
+		onAction: {
+			type: 'function'
+		}
+	},
+	render: function()
+	{
+		this.handleClick = () =>
+		{
+			if (this.onClick)
+			{
+				this.onClick();
+			}
+		};
+
+		this.handleAction = (action, index) =>
+		{
+			if (this.onAction)
+			{
+				this.onAction({ action, index });
+			}
+		};
+
+		return `
+			<div class="holder" :variant="variant.join(' ')" dh-click="handleClick">
+				<div class="header">
+					<i dh-if="icon">{{ icon }}</i>
+					<e-tag dh-if="badge" :text="badge" :variant="['bg-3', 'size-s']"></e-tag>
+				</div>
+				<div class="content">
+					<h3 dh-if="title">{{ title }}</h3>
+					<p dh-if="description">{{ description }}</p>
+				</div>
+				<div dh-if="actions.length" class="actions">
+					<e-button dh-for="action, index in actions" :text="action.text" :icon="action.icon" :variant="action.variant" :onClick="() => handleAction(action, index)"></e-button>
+				</div>
+				<slot name="footer"></slot>
+			</div>
+		`;
+	}
+});

package/addons/render/elements/front/items/self/cards/basic/styles/base.css

@@ -0,0 +1,66 @@
+.e-a0811c7 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	border-radius: var(--dh-radius-m);
+	overflow: hidden;
+	transition: all 0.2s;
+	height: 100%;
+}
+
+.e-a0811c7 > .holder:hover
+{
+	transform: translateY(-2px);
+}
+
+.e-a0811c7 > .holder > .header
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-s);
+}
+
+.e-a0811c7 > .holder > .header > i
+{
+	font-size: var(--dh-size-l);
+	color: var(--dh-text-2);
+	transition: all 0.2s;
+}
+
+.e-a0811c7 > .holder:hover > .header > i
+{
+	color: var(--dh-text-1);
+}
+
+.e-a0811c7 > .holder > .content
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-x);
+}
+
+.e-a0811c7 > .holder > .content > h3
+{
+	font-size: var(--dh-size-m);
+	font-weight: 600;
+	color: var(--dh-text-1);
+	margin: 0;
+}
+
+.e-a0811c7 > .holder > .content > p
+{
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+	margin: 0;
+	line-height: 1.5;
+}
+
+.e-a0811c7 > .holder > .actions
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-s);
+	margin-top: auto;
+	padding-top: var(--dh-spacing-s);
+	border-top: 1px solid var(--dh-bg-3-border);
+}

package/addons/render/elements/front/items/self/cards/basic/styles/sizes.css

@@ -0,0 +1,32 @@
+.e-a0811c7 > .holder[variant*="size-s"]
+{
+	padding: var(--dh-spacing-s);
+	gap: var(--dh-spacing-s);
+}
+
+.e-a0811c7 > .holder[variant*="size-s"] > .header > i
+{
+	font-size: var(--dh-size-m);
+}
+
+.e-a0811c7 > .holder[variant*="size-m"]
+{
+	padding: var(--dh-spacing-m);
+	gap: var(--dh-spacing-m);
+}
+
+.e-a0811c7 > .holder[variant*="size-l"]
+{
+	padding: var(--dh-spacing-l);
+	gap: var(--dh-spacing-l);
+}
+
+.e-a0811c7 > .holder[variant*="size-l"] > .header > i
+{
+	font-size: 28px;
+}
+
+.e-a0811c7 > .holder[variant*="size-l"] > .content > h3
+{
+	font-size: var(--dh-size-l);
+}

package/addons/render/elements/front/items/self/cards/basic/styles/variants.css

@@ -0,0 +1,99 @@
+.e-a0811c7 > .holder[variant*="bg-1"]
+{
+	background: var(--dh-bg-1);
+}
+
+.e-a0811c7 > .holder[variant*="bg-2"]
+{
+	background: var(--dh-bg-2);
+}
+
+.e-a0811c7 > .holder[variant*="bg-3"]
+{
+	background: var(--dh-bg-3);
+}
+
+.e-a0811c7 > .holder[variant*="bg-4"]
+{
+	background: var(--dh-bg-4);
+}
+
+.e-a0811c7 > .holder[variant*="bg-1"]:hover
+{
+	background: var(--dh-bg-1-hover);
+}
+
+.e-a0811c7 > .holder[variant*="bg-2"]:hover
+{
+	background: var(--dh-bg-2-hover);
+}
+
+.e-a0811c7 > .holder[variant*="bg-3"]:hover
+{
+	background: var(--dh-bg-3-hover);
+}
+
+.e-a0811c7 > .holder[variant*="bg-4"]:hover
+{
+	background: var(--dh-bg-4-hover);
+}
+
+.e-a0811c7 > .holder[variant*="border"]
+{
+	border: 1px solid var(--dh-bg-3-border);
+}
+
+.e-a0811c7 > .holder[variant*="brand"]
+{
+	border-color: var(--dh-brand-border);
+	background: var(--dh-brand-opacity);
+}
+
+.e-a0811c7 > .holder[variant*="brand"] > .header > i
+{
+	color: var(--dh-brand);
+}
+
+.e-a0811c7 > .holder[variant*="blue"]
+{
+	border-color: var(--dh-blue-border);
+	background: var(--dh-blue-opacity);
+}
+
+.e-a0811c7 > .holder[variant*="blue"] > .header > i
+{
+	color: var(--dh-blue);
+}
+
+.e-a0811c7 > .holder[variant*="red"]
+{
+	border-color: var(--dh-red-border);
+	background: var(--dh-red-opacity);
+}
+
+.e-a0811c7 > .holder[variant*="red"] > .header > i
+{
+	color: var(--dh-red);
+}
+
+.e-a0811c7 > .holder[variant*="orange"]
+{
+	border-color: var(--dh-orange-border);
+	background: var(--dh-orange-opacity);
+}
+
+.e-a0811c7 > .holder[variant*="orange"] > .header > i
+{
+	color: var(--dh-orange);
+}
+
+.e-a0811c7 > .holder[variant*="green"]
+{
+	border-color: var(--dh-green-border);
+	background: var(--dh-green-opacity);
+}
+
+.e-a0811c7 > .holder[variant*="green"] > .header > i
+{
+	color: var(--dh-green);
+}