divhunt 2.0.0

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

@@ -0,0 +1,108 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'card-list',
+	icon: 'list',
+	name: 'Card List',
+	description: 'List item card with icon, title, description, meta info, badge, status, and checkbox.',
+	category: 'Cards',
+	author: 'Divhunt',
+	config: {
+		icon: {
+			type: 'string',
+			value: 'description'
+		},
+		title: {
+			type: 'string',
+			value: 'Project Requirements.pdf'
+		},
+		description: {
+			type: 'string',
+			value: 'Technical specification document for Q1 release'
+		},
+		badge: {
+			type: 'string',
+			value: 'New'
+		},
+		status: {
+			type: 'string',
+			value: 'success',
+			options: ['', 'success', 'warning', 'error', 'info']
+		},
+		meta: {
+			type: 'array',
+			value: [
+				{ label: '2.4 MB', icon: '' },
+				{ label: 'Modified 2h ago', icon: 'schedule' }
+			],
+			each: {
+				type: 'object',
+				config: {
+					label: { type: 'string', value: '' },
+					icon: { type: 'string', value: '' }
+				}
+			}
+		},
+		checkbox: {
+			type: 'boolean',
+			value: false
+		},
+		checked: {
+			type: 'boolean',
+			value: false
+		},
+		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'
+		},
+		onCheck: {
+			type: 'function'
+		}
+	},
+	render: function()
+	{
+		this.handleClick = () =>
+		{
+			if (this.onClick)
+			{
+				this.onClick();
+			}
+		};
+
+		this.handleCheck = (e) =>
+		{
+			e.stopPropagation();
+			this.checked = !this.checked;
+
+			if (this.onCheck)
+			{
+				this.onCheck({ checked: this.checked });
+			}
+		};
+
+		return `
+			<div class="holder" :variant="variant.join(' ')" dh-click="handleClick">
+				<e-checkbox dh-if="checkbox" :checked="checked" :onChange="handleCheck"></e-checkbox>
+				<i dh-if="icon && !checkbox" :status="status">{{ icon }}</i>
+				<div class="content">
+					<div class="header">
+						<strong>{{ title }}</strong>
+						<e-tag dh-if="badge" :text="badge" :variant="['brand', 'size-s']"></e-tag>
+					</div>
+					<span dh-if="description">{{ description }}</span>
+					<div dh-if="meta.length" class="meta">
+						<small dh-for="item in meta">
+							<i dh-if="item.icon">{{ item.icon }}</i>
+							{{ item.label }}
+						</small>
+					</div>
+				</div>
+				<slot name="end"></slot>
+			</div>
+		`;
+	}
+});

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

@@ -0,0 +1,96 @@
+.e-523d241b > .holder
+{
+	display: flex;
+	align-items: center;
+	border-radius: var(--dh-radius-m);
+	transition: all 0.2s;
+}
+
+.e-523d241b > .holder:hover
+{
+	transform: translateY(-2px);
+}
+
+.e-523d241b > .holder > i
+{
+	flex-shrink: 0;
+	font-size: var(--dh-size-l);
+	color: var(--dh-text-2);
+	transition: all 0.2s;
+}
+
+.e-523d241b > .holder:hover > i
+{
+	color: var(--dh-text-1);
+}
+
+.e-523d241b > .holder > i[status="success"]
+{
+	color: var(--dh-green);
+}
+
+.e-523d241b > .holder > i[status="warning"]
+{
+	color: var(--dh-orange);
+}
+
+.e-523d241b > .holder > i[status="error"]
+{
+	color: var(--dh-red);
+}
+
+.e-523d241b > .holder > i[status="info"]
+{
+	color: var(--dh-blue);
+}
+
+.e-523d241b > .holder > .content
+{
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-width: 0;
+	gap: var(--dh-spacing-x);
+}
+
+.e-523d241b > .holder > .content > .header
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-s);
+}
+
+.e-523d241b > .holder > .content > .header > strong
+{
+	font-size: var(--dh-size-m);
+	font-weight: 500;
+	color: var(--dh-text-1);
+}
+
+.e-523d241b > .holder > .content > span
+{
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+	line-height: 1.4;
+}
+
+.e-523d241b > .holder > .content > .meta
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-m);
+}
+
+.e-523d241b > .holder > .content > .meta > small
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-x);
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+}
+
+.e-523d241b > .holder > .content > .meta > small > i
+{
+	font-size: var(--dh-size-s);
+}

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

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

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

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

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

@@ -0,0 +1,116 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'card-media',
+	icon: 'image',
+	name: 'Card Media',
+	description: 'Media card with image, title, description, tags, and author metadata.',
+	category: 'Cards',
+	author: 'Divhunt',
+	config: {
+		src: {
+			type: 'string',
+			value: 'https://placehold.co/600x400'
+		},
+		alt: {
+			type: 'string',
+			value: 'Featured Image'
+		},
+		ratio: {
+			type: 'string',
+			value: '16/9',
+			options: ['1/1', '4/3', '16/9', '21/9']
+		},
+		badge: {
+			type: 'string',
+			value: 'Featured'
+		},
+		title: {
+			type: 'string',
+			value: 'Getting Started with Modern Web Development'
+		},
+		description: {
+			type: 'string',
+			value: 'Learn the fundamentals of building fast, responsive web applications using the latest tools and techniques.'
+		},
+		tags: {
+			type: 'array',
+			value: ['Development', 'Tutorial', 'Web'],
+			each: {
+				type: 'string'
+			}
+		},
+		author: {
+			type: 'object',
+			value: {
+				name: 'Jane Smith',
+				avatar: ''
+			},
+			config: {
+				name: { type: 'string', value: '' },
+				avatar: { type: 'string', value: '' }
+			}
+		},
+		date: {
+			type: 'string',
+			value: 'Jan 15, 2026'
+		},
+		readTime: {
+			type: 'string',
+			value: '5 min read'
+		},
+		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'
+		}
+	},
+	render: function()
+	{
+		this.handleClick = () =>
+		{
+			if (this.onClick)
+			{
+				this.onClick();
+			}
+		};
+
+		this.getInitials = () =>
+		{
+			if (!this.author?.name) return '';
+			return this.author.name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
+		};
+
+		return `
+			<div class="holder" :variant="variant.join(' ')" dh-click="handleClick">
+				<div dh-if="src" class="media" :style="'aspect-ratio: ' + ratio">
+					<img :src="src" :alt="alt">
+					<e-tag dh-if="badge" :text="badge" :variant="['bg-2', 'size-s']"></e-tag>
+					<slot name="overlay"></slot>
+				</div>
+				<div class="content">
+					<div dh-if="tags.length" class="tags">
+						<e-tag dh-for="tag in tags" :text="tag" :variant="['transparent', 'size-s']"></e-tag>
+					</div>
+					<h3 dh-if="title">{{ title }}</h3>
+					<p dh-if="description">{{ description }}</p>
+				</div>
+				<div dh-if="author?.name || date || readTime" class="meta">
+					<div dh-if="author?.name" class="author">
+						<div class="avatar">
+							<img dh-if="author.avatar" :src="author.avatar" :alt="author.name">
+							<span dh-if="!author.avatar">{{ getInitials() }}</span>
+						</div>
+						<span>{{ author.name }}</span>
+					</div>
+					<span dh-if="date">{{ date }}</span>
+					<span dh-if="readTime">{{ readTime }}</span>
+				</div>
+				<slot name="footer"></slot>
+			</div>
+		`;
+	}
+});

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

@@ -0,0 +1,126 @@
+.e-aa4ad7d > .holder
+{
+	display: flex;
+	flex-direction: column;
+	border-radius: var(--dh-radius-m);
+	overflow: hidden;
+	transition: all 0.2s;
+}
+
+.e-aa4ad7d > .holder:hover
+{
+	transform: translateY(-2px);
+}
+
+.e-aa4ad7d > .holder > .media
+{
+	position: relative;
+	overflow: hidden;
+}
+
+.e-aa4ad7d > .holder > .media > img
+{
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	transition: all 0.2s;
+}
+
+.e-aa4ad7d > .holder:hover > .media > img
+{
+	transform: scale(1.05);
+}
+
+.e-aa4ad7d > .holder > .media > .e-c1b33c5
+{
+	position: absolute;
+	top: var(--dh-spacing-s);
+	left: var(--dh-spacing-s);
+}
+
+.e-aa4ad7d > .holder > .content
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-s);
+}
+
+.e-aa4ad7d > .holder > .content > .tags
+{
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--dh-spacing-x);
+}
+
+.e-aa4ad7d > .holder > .content > h3
+{
+	font-size: var(--dh-size-m);
+	font-weight: 600;
+	color: var(--dh-text-1);
+	margin: 0;
+	line-height: 1.4;
+}
+
+.e-aa4ad7d > .holder > .content > p
+{
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+	margin: 0;
+	line-height: 1.5;
+}
+
+.e-aa4ad7d > .holder > .meta
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-m);
+	border-top: 1px solid var(--dh-bg-3-border);
+}
+
+.e-aa4ad7d > .holder > .meta > .author
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-s);
+}
+
+.e-aa4ad7d > .holder > .meta > .author > .avatar
+{
+	width: var(--dh-height-s);
+	height: var(--dh-height-s);
+	border-radius: 50%;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--dh-bg-3);
+	font-size: var(--dh-size-s);
+	font-weight: 600;
+	color: var(--dh-text-2);
+}
+
+.e-aa4ad7d > .holder > .meta > .author > .avatar > img
+{
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.e-aa4ad7d > .holder > .meta > .author > span
+{
+	font-size: var(--dh-size-s);
+	font-weight: 500;
+	color: var(--dh-text-1);
+}
+
+.e-aa4ad7d > .holder > .meta > span
+{
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+}
+
+.e-aa4ad7d > .holder > .meta > span + span::before
+{
+	content: '·';
+	margin-right: var(--dh-spacing-s);
+}

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

@@ -0,0 +1,49 @@
+.e-aa4ad7d > .holder[variant*="size-s"]
+{
+	gap: var(--dh-spacing-s);
+}
+
+.e-aa4ad7d > .holder[variant*="size-s"] > .content
+{
+	padding: var(--dh-spacing-s);
+}
+
+.e-aa4ad7d > .holder[variant*="size-s"] > .meta
+{
+	padding: var(--dh-spacing-s);
+}
+
+.e-aa4ad7d > .holder[variant*="size-m"]
+{
+	gap: var(--dh-spacing-m);
+}
+
+.e-aa4ad7d > .holder[variant*="size-m"] > .content
+{
+	padding: 0 var(--dh-spacing-m);
+}
+
+.e-aa4ad7d > .holder[variant*="size-m"] > .meta
+{
+	padding: var(--dh-spacing-m);
+}
+
+.e-aa4ad7d > .holder[variant*="size-l"]
+{
+	gap: var(--dh-spacing-l);
+}
+
+.e-aa4ad7d > .holder[variant*="size-l"] > .content
+{
+	padding: 0 var(--dh-spacing-l);
+}
+
+.e-aa4ad7d > .holder[variant*="size-l"] > .meta
+{
+	padding: var(--dh-spacing-l);
+}
+
+.e-aa4ad7d > .holder[variant*="size-l"] > .content > h3
+{
+	font-size: var(--dh-size-l);
+}

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

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