divhunt 2.0.0

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

@@ -0,0 +1,95 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'card-profile',
+	icon: 'person',
+	name: 'Card Profile',
+	description: 'Profile card with avatar, name, role, status indicator, stats, and badge.',
+	category: 'Cards',
+	author: 'Divhunt',
+	config: {
+		avatar: {
+			type: 'string',
+			value: ''
+		},
+		name: {
+			type: 'string',
+			value: 'Sarah Johnson'
+		},
+		role: {
+			type: 'string',
+			value: 'Senior Product Designer'
+		},
+		badge: {
+			type: 'string',
+			value: 'Pro'
+		},
+		status: {
+			type: 'string',
+			value: 'online',
+			options: ['', 'online', 'offline', 'away', 'busy']
+		},
+		stats: {
+			type: 'array',
+			value: [
+				{ label: 'Projects', value: '48' },
+				{ label: 'Followers', value: '2.4k' },
+				{ label: 'Following', value: '186' }
+			],
+			each: {
+				type: 'object',
+				config: {
+					label: { type: 'string', value: '' },
+					value: { type: 'string', value: '' }
+				}
+			}
+		},
+		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', 'horizontal']
+		},
+		onClick: {
+			type: 'function'
+		}
+	},
+	render: function()
+	{
+		this.handleClick = () =>
+		{
+			if (this.onClick)
+			{
+				this.onClick();
+			}
+		};
+
+		this.getInitials = () =>
+		{
+			if (!this.name) return '';
+			return this.name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
+		};
+
+		return `
+			<div class="holder" :variant="variant.join(' ')" dh-click="handleClick">
+				<div class="header">
+					<div class="avatar" :status="status">
+						<img dh-if="avatar" :src="avatar" :alt="name">
+						<span dh-if="!avatar && name">{{ getInitials() }}</span>
+					</div>
+					<e-tag dh-if="badge" :text="badge" :variant="['brand', 'size-s']"></e-tag>
+				</div>
+				<div class="content">
+					<strong>{{ name }}</strong>
+					<span dh-if="role">{{ role }}</span>
+				</div>
+				<div dh-if="stats.length" class="stats">
+					<div dh-for="stat in stats" class="stat">
+						<strong>{{ stat.value }}</strong>
+						<span>{{ stat.label }}</span>
+					</div>
+				</div>
+				<slot name="actions"></slot>
+			</div>
+		`;
+	}
+});

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

@@ -0,0 +1,142 @@
+.e-56553afe > .holder
+{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	border-radius: var(--dh-radius-m);
+	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.e-56553afe > .holder:hover
+{
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+.e-56553afe > .holder > .header
+{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--dh-spacing-s);
+}
+
+.e-56553afe > .holder > .header > .avatar
+{
+	position: relative;
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	background: var(--dh-bg-3);
+	color: var(--dh-text-2);
+	font-weight: 600;
+	overflow: hidden;
+	border: 1px solid var(--dh-bg-4-border);
+}
+
+.e-56553afe > .holder > .header > .avatar > img
+{
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.e-56553afe > .holder > .header > .avatar::after
+{
+	content: '';
+	position: absolute;
+	bottom: 2px;
+	right: 2px;
+	width: 12px;
+	height: 12px;
+	border-radius: 50%;
+	border: 2px solid var(--dh-bg-2);
+	display: none;
+}
+
+.e-56553afe > .holder > .header > .avatar[status="online"]::after
+{
+	display: block;
+	background: var(--dh-green);
+}
+
+.e-56553afe > .holder > .header > .avatar[status="offline"]::after
+{
+	display: block;
+	background: var(--dh-text-2);
+}
+
+.e-56553afe > .holder > .header > .avatar[status="away"]::after
+{
+	display: block;
+	background: var(--dh-orange);
+}
+
+.e-56553afe > .holder > .header > .avatar[status="busy"]::after
+{
+	display: block;
+	background: var(--dh-red);
+}
+
+.e-56553afe > .holder > .content
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-x);
+}
+
+.e-56553afe > .holder > .content > strong
+{
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--dh-text-1);
+}
+
+.e-56553afe > .holder > .content > span
+{
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--dh-text-2);
+	opacity: 0.7;
+}
+
+.e-56553afe > .holder > .stats
+{
+	display: flex;
+	justify-content: center;
+	gap: var(--dh-spacing-l);
+	padding-top: var(--dh-spacing-s);
+	border-top: 1px solid var(--dh-bg-3-border);
+	opacity: 0.5;
+	width: 100%;
+}
+
+.e-56553afe > .holder > .stats > .stat
+{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--dh-spacing-x);
+	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.e-56553afe > .holder > .stats > .stat:hover
+{
+	transform: scale(1.05);
+}
+
+.e-56553afe > .holder > .stats > .stat > strong
+{
+	font-size: var(--dh-size-m);
+	font-weight: 600;
+	color: var(--dh-text-1);
+}
+
+.e-56553afe > .holder > .stats > .stat > span
+{
+	font-size: var(--dh-size-s);
+	font-weight: 500;
+	color: var(--dh-text-2);
+}

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

@@ -0,0 +1,43 @@
+.e-56553afe > .holder[variant*="size-s"]
+{
+	padding: var(--dh-spacing-s);
+	gap: var(--dh-spacing-s);
+}
+
+.e-56553afe > .holder[variant*="size-s"] > .header > .avatar
+{
+	width: var(--dh-height-l);
+	height: var(--dh-height-l);
+	font-size: var(--dh-size-m);
+}
+
+.e-56553afe > .holder[variant*="size-m"]
+{
+	padding: var(--dh-spacing-m);
+	gap: var(--dh-spacing-m);
+}
+
+.e-56553afe > .holder[variant*="size-m"] > .header > .avatar
+{
+	width: 64px;
+	height: 64px;
+	font-size: var(--dh-size-l);
+}
+
+.e-56553afe > .holder[variant*="size-l"]
+{
+	padding: var(--dh-spacing-l);
+	gap: var(--dh-spacing-l);
+}
+
+.e-56553afe > .holder[variant*="size-l"] > .header > .avatar
+{
+	width: 80px;
+	height: 80px;
+	font-size: 24px;
+}
+
+.e-56553afe > .holder[variant*="size-l"] > .content > strong
+{
+	font-size: var(--dh-size-l);
+}

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

@@ -0,0 +1,131 @@
+.e-56553afe > .holder[variant*="horizontal"]
+{
+	flex-direction: row;
+	text-align: left;
+}
+
+.e-56553afe > .holder[variant*="horizontal"] > .header
+{
+	flex-direction: row;
+}
+
+.e-56553afe > .holder[variant*="horizontal"] > .content
+{
+	flex: 1;
+	min-width: 0;
+}
+
+.e-56553afe > .holder[variant*="horizontal"] > .stats
+{
+	flex-direction: column;
+	width: auto;
+	padding-top: 0;
+	padding-left: var(--dh-spacing-m);
+	border-top: none;
+	border-left: 1px solid var(--dh-bg-3-border);
+}
+
+.e-56553afe > .holder[variant*="bg-1"]
+{
+	background: var(--dh-bg-1);
+}
+
+.e-56553afe > .holder[variant*="bg-2"]
+{
+	background: var(--dh-bg-2);
+}
+
+.e-56553afe > .holder[variant*="bg-3"]
+{
+	background: var(--dh-bg-3);
+}
+
+.e-56553afe > .holder[variant*="bg-4"]
+{
+	background: var(--dh-bg-4);
+}
+
+.e-56553afe > .holder[variant*="bg-1"]:hover
+{
+	background: var(--dh-bg-1-hover);
+}
+
+.e-56553afe > .holder[variant*="bg-2"]:hover
+{
+	background: var(--dh-bg-2-hover);
+}
+
+.e-56553afe > .holder[variant*="bg-3"]:hover
+{
+	background: var(--dh-bg-3-hover);
+}
+
+.e-56553afe > .holder[variant*="bg-4"]:hover
+{
+	background: var(--dh-bg-4-hover);
+}
+
+.e-56553afe > .holder[variant*="border"]
+{
+	border: 1px solid var(--dh-bg-3-border);
+}
+
+.e-56553afe > .holder[variant*="brand"]
+{
+	border-color: var(--dh-brand-border);
+	background: var(--dh-brand-opacity);
+}
+
+.e-56553afe > .holder[variant*="brand"] > .header > .avatar
+{
+	background: var(--dh-brand);
+	color: var(--dh-text-1);
+}
+
+.e-56553afe > .holder[variant*="blue"]
+{
+	border-color: var(--dh-blue-border);
+	background: var(--dh-blue-opacity);
+}
+
+.e-56553afe > .holder[variant*="blue"] > .header > .avatar
+{
+	background: var(--dh-blue);
+	color: var(--dh-text-1);
+}
+
+.e-56553afe > .holder[variant*="red"]
+{
+	border-color: var(--dh-red-border);
+	background: var(--dh-red-opacity);
+}
+
+.e-56553afe > .holder[variant*="red"] > .header > .avatar
+{
+	background: var(--dh-red);
+	color: var(--dh-text-1);
+}
+
+.e-56553afe > .holder[variant*="orange"]
+{
+	border-color: var(--dh-orange-border);
+	background: var(--dh-orange-opacity);
+}
+
+.e-56553afe > .holder[variant*="orange"] > .header > .avatar
+{
+	background: var(--dh-orange);
+	color: var(--dh-text-1);
+}
+
+.e-56553afe > .holder[variant*="green"]
+{
+	border-color: var(--dh-green-border);
+	background: var(--dh-green-opacity);
+}
+
+.e-56553afe > .holder[variant*="green"] > .header > .avatar
+{
+	background: var(--dh-green);
+	color: var(--dh-text-1);
+}

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

@@ -0,0 +1,117 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'card-stat',
+	icon: 'analytics',
+	name: 'Card Stat',
+	description: 'Metric card with value, trend indicator, comparison, and sparkline visualization.',
+	category: 'Cards',
+	author: 'Divhunt',
+	config: {
+		icon: {
+			type: 'string',
+			value: 'trending_up'
+		},
+		value: {
+			type: 'string',
+			value: '$12,847'
+		},
+		label: {
+			type: 'string',
+			value: 'Total Revenue'
+		},
+		subtitle: {
+			type: 'string',
+			value: 'Last 30 days'
+		},
+		change: {
+			type: 'string',
+			value: '+23.5%'
+		},
+		trend: {
+			type: 'string',
+			value: 'up',
+			options: ['', 'up', 'down']
+		},
+		comparison: {
+			type: 'object',
+			value: {
+				value: '$9,432',
+				label: 'vs last month'
+			},
+			config: {
+				value: { type: 'string', value: '' },
+				label: { type: 'string', value: '' }
+			}
+		},
+		sparkline: {
+			type: 'array',
+			value: [30, 45, 35, 50, 40, 60, 55, 70, 65, 80, 75, 90],
+			each: {
+				type: 'number'
+			}
+		},
+		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.getSparklinePath = () =>
+		{
+			if (!this.sparkline || !this.sparkline.length) return '';
+
+			const width = 80;
+			const height = 24;
+			const max = Math.max(...this.sparkline);
+			const min = Math.min(...this.sparkline);
+			const range = max - min || 1;
+			const step = width / (this.sparkline.length - 1);
+
+			const points = this.sparkline.map((val, i) =>
+			{
+				const x = i * step;
+				const y = height - ((val - min) / range) * height;
+				return `${x},${y}`;
+			});
+
+			return `M${points.join(' L')}`;
+		};
+
+		return `
+			<div class="holder" :variant="variant.join(' ')" dh-click="handleClick">
+				<div class="header">
+					<i dh-if="icon">{{ icon }}</i>
+					<e-tag dh-if="change" :text="change" :variant="[trend === 'up' ? 'green' : trend === 'down' ? 'red' : 'bg-3', 'size-s']"></e-tag>
+				</div>
+				<div class="content">
+					<strong>{{ value }}</strong>
+					<span dh-if="label">{{ label }}</span>
+					<small dh-if="subtitle">{{ subtitle }}</small>
+				</div>
+				<div dh-if="comparison?.value || sparkline.length" class="footer">
+					<div dh-if="comparison?.value" class="comparison">
+						<strong>{{ comparison.value }}</strong>
+						<span dh-if="comparison.label">{{ comparison.label }}</span>
+					</div>
+					<svg dh-if="sparkline.length" class="sparkline" viewBox="0 0 80 24" preserveAspectRatio="none">
+						<path :d="getSparklinePath()" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+					</svg>
+				</div>
+			</div>
+		`;
+	}
+});

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

@@ -0,0 +1,97 @@
+.e-5239ce65 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	border-radius: var(--dh-radius-m);
+	transition: all 0.2s;
+}
+
+.e-5239ce65 > .holder:hover
+{
+	transform: translateY(-2px);
+}
+
+.e-5239ce65 > .holder > .header
+{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.e-5239ce65 > .holder > .header > i
+{
+	font-size: var(--dh-size-l);
+	color: var(--dh-text-2);
+	transition: all 0.2s;
+}
+
+.e-5239ce65 > .holder:hover > .header > i
+{
+	color: var(--dh-text-1);
+}
+
+.e-5239ce65 > .holder > .content
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-x);
+}
+
+.e-5239ce65 > .holder > .content > strong
+{
+	font-size: var(--dh-size-l);
+	font-weight: 600;
+	color: var(--dh-text-1);
+	line-height: 1.2;
+}
+
+.e-5239ce65 > .holder > .content > span
+{
+	font-size: var(--dh-size-m);
+	font-weight: 500;
+	color: var(--dh-text-1);
+}
+
+.e-5239ce65 > .holder > .content > small
+{
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+}
+
+.e-5239ce65 > .holder > .footer
+{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--dh-spacing-m);
+	padding-top: var(--dh-spacing-s);
+	border-top: 1px solid var(--dh-bg-3-border);
+}
+
+.e-5239ce65 > .holder > .footer > .comparison
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-s);
+}
+
+.e-5239ce65 > .holder > .footer > .comparison > strong
+{
+	font-size: var(--dh-size-s);
+	font-weight: 500;
+	color: var(--dh-text-1);
+}
+
+.e-5239ce65 > .holder > .footer > .comparison > span
+{
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+}
+
+.e-5239ce65 > .holder > .footer > .sparkline
+{
+	width: 80px;
+	height: 24px;
+	color: var(--dh-brand);
+	flex-shrink: 0;
+}

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

@@ -0,0 +1,49 @@
+.e-5239ce65 > .holder[variant*="size-s"]
+{
+	padding: var(--dh-spacing-s);
+	gap: var(--dh-spacing-s);
+}
+
+.e-5239ce65 > .holder[variant*="size-s"] > .header > i
+{
+	font-size: var(--dh-size-m);
+}
+
+.e-5239ce65 > .holder[variant*="size-s"] > .content > strong
+{
+	font-size: var(--dh-size-m);
+}
+
+.e-5239ce65 > .holder[variant*="size-s"] > .footer > .sparkline
+{
+	width: 60px;
+	height: 18px;
+}
+
+.e-5239ce65 > .holder[variant*="size-m"]
+{
+	padding: var(--dh-spacing-m);
+	gap: var(--dh-spacing-m);
+}
+
+.e-5239ce65 > .holder[variant*="size-l"]
+{
+	padding: var(--dh-spacing-l);
+	gap: var(--dh-spacing-l);
+}
+
+.e-5239ce65 > .holder[variant*="size-l"] > .header > i
+{
+	font-size: 28px;
+}
+
+.e-5239ce65 > .holder[variant*="size-l"] > .content > strong
+{
+	font-size: 32px;
+}
+
+.e-5239ce65 > .holder[variant*="size-l"] > .footer > .sparkline
+{
+	width: 100px;
+	height: 32px;
+}