divhunt 2.0.0

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

@@ -0,0 +1,69 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'slider',
+	icon: 'linear_scale',
+	name: 'Slider',
+	description: 'Range slider input for selecting numeric values.',
+	category: 'Form',
+	author: 'Divhunt',
+	config: {
+		value: {
+			type: 'number',
+			value: 50
+		},
+		min: {
+			type: 'number',
+			value: 0
+		},
+		max: {
+			type: 'number',
+			value: 100
+		},
+		step: {
+			type: 'number',
+			value: 10
+		},
+		variant: {
+			type: 'array',
+			value: ['brand', 'size-m'],
+			options: ['brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
+		},
+		onChange: {
+			type: 'function'
+		}
+	},
+	render: function()
+	{
+		this.handleInput = (event) =>
+		{
+			this.value = parseFloat(event.target.value);
+			if (this.onChange)
+			{
+				this.onChange(this.value);
+			}
+		};
+
+		this.getPercentage = () =>
+		{
+			return ((this.value - this.min) / (this.max - this.min)) * 100;
+		};
+
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<div class="track">
+					<div class="fill" :style="'width: ' + getPercentage() + '%'"></div>
+				</div>
+				<input
+					type="range"
+					class="input"
+					:value="value"
+					:min="min"
+					:max="max"
+					:step="step"
+					dh-input="handleInput"
+				/>
+			</div>
+		`;
+	}
+});

package/addons/render/elements/front/items/self/form/textarea/textarea.css

@@ -0,0 +1,117 @@
+/* Base */
+.e-c6e9f50 > .holder
+{
+    position: relative;
+    width: 100%;
+    padding: var(--dh-spacing-s) var(--dh-spacing-m);
+    border-radius: var(--dh-radius-m);
+    border: none;
+    background: transparent;
+    transition: all 0.2s;
+}
+
+.e-c6e9f50 > .holder > textarea
+{
+    width: 100%;
+    background: transparent;
+    border: none;
+    outline: none;
+    min-height: 100px;
+    resize: none;
+    color: var(--dh-text-1);
+    padding: 0;
+}
+
+.e-c6e9f50 > .holder > textarea::placeholder
+{
+    color: var(--dh-text-2);
+}
+
+.e-c6e9f50 > .holder > textarea:disabled
+{
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Variants - Background */
+.e-c6e9f50 > .holder[variant*="transparent"]
+{
+    background: transparent;
+    padding: 0;
+}
+
+.e-c6e9f50 > .holder[variant*="border"]
+{
+    background: transparent;
+}
+
+.e-c6e9f50 > .holder[variant*="bg-1"]
+{
+    background: var(--dh-bg-1);
+}
+
+.e-c6e9f50 > .holder[variant*="bg-1"]:hover
+{
+    background: var(--dh-bg-1-hover);
+}
+
+.e-c6e9f50 > .holder[variant*="bg-2"]
+{
+    background: var(--dh-bg-2);
+}
+
+.e-c6e9f50 > .holder[variant*="bg-2"]:hover
+{
+    background: var(--dh-bg-2-hover);
+}
+
+.e-c6e9f50 > .holder[variant*="bg-3"]
+{
+    background: var(--dh-bg-3);
+}
+
+.e-c6e9f50 > .holder[variant*="bg-3"]:hover
+{
+    background: var(--dh-bg-3-hover);
+}
+
+.e-c6e9f50 > .holder[variant*="bg-4"]
+{
+    background: var(--dh-bg-4);
+}
+
+.e-c6e9f50 > .holder[variant*="bg-4"]:hover
+{
+    background: var(--dh-bg-4-hover);
+}
+
+/* Variants - Border */
+.e-c6e9f50 > .holder[variant*="border"]
+{
+    border: 1px solid var(--dh-bg-2-border);
+}
+
+.e-c6e9f50 > .holder[variant*="bg-1"][variant*="border"]
+{
+    border: 1px solid var(--dh-bg-1-border);
+}
+
+.e-c6e9f50 > .holder[variant*="bg-2"][variant*="border"]
+{
+    border: 1px solid var(--dh-bg-2-border);
+}
+
+.e-c6e9f50 > .holder[variant*="bg-3"][variant*="border"]
+{
+    border: 1px solid var(--dh-bg-3-border);
+}
+
+.e-c6e9f50 > .holder[variant*="bg-4"][variant*="border"]
+{
+    border: 1px solid var(--dh-bg-4-border);
+}
+
+.e-c6e9f50 > .holder[variant*="border"]:focus-within
+{
+    border-color: var(--dh-brand);
+}

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

@@ -0,0 +1,69 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+    id: 'textarea',
+    icon: 'notes',
+    name: 'Textarea',
+    description: 'Multi-line text input with auto-resize option, character counting, and variant support for different UI contexts.',
+    category: 'Form',
+    author: 'Divhunt',
+    config: {
+        value: {
+            type: 'string'
+        },
+        name: {
+            type: 'string'
+        },
+        placeholder: {
+            type: 'string'
+        },
+        rows: {
+            type: 'number',
+            value: 4
+        },
+        maxLength: {
+            type: 'number'
+        },
+        disabled: {
+            type: 'boolean'
+        },
+        readonly: {
+            type: 'boolean'
+        },
+        variant: {
+            type: 'array',
+            value: ['bg-2'],
+            options: ['transparent', 'border', 'bg-1', 'bg-2', 'bg-3', 'bg-4']
+        },
+        size: {
+            type: 'string',
+            value: 'm',
+            options: ['s', 'm', 'l']
+        },
+        onInput: {
+            type: 'function'
+        },
+        onChange: {
+            type: 'function'
+        }
+    },
+    render: function()
+    {
+        return `
+            <div class="holder" :variant="variant.join(' ')" :size="size">
+                <textarea
+                    :value="value"
+                    :placeholder="placeholder"
+                    :name="name"
+                    :rows="rows"
+                    :maxlength="maxLength"
+                    :disabled="disabled"
+                    :readonly="readonly"
+                    autocomplete="off"
+                    dh-input="onInput"
+                    dh-change="onChange"
+                ></textarea>
+            </div>
+        `;
+    }
+});

package/addons/render/elements/front/items/self/layout/empty/empty.css

@@ -0,0 +1,154 @@
+/* Base */
+.e-68a084f7 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: var(--dh-spacing-l);
+	gap: var(--dh-spacing-m);
+	text-align: center;
+}
+
+.e-68a084f7 > .holder > .icon
+{
+	font-size: 48px;
+	color: var(--dh-text-2);
+	opacity: 0.5;
+}
+
+.e-68a084f7 > .holder > .content
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-x);
+	max-width: 400px;
+}
+
+.e-68a084f7 > .holder > .content > .title
+{
+	font-size: var(--dh-size-l);
+	font-weight: 600;
+	color: var(--dh-text-1);
+}
+
+.e-68a084f7 > .holder > .content > .text
+{
+	font-size: var(--dh-size-m);
+	color: var(--dh-text-2);
+	line-height: 1.6;
+}
+
+/* Variants - Background */
+.e-68a084f7 > .holder[variant*="bg-1"]
+{
+	background: var(--dh-bg-1);
+	border: 1px solid var(--dh-bg-1-border);
+	border-radius: var(--dh-radius-l);
+}
+
+.e-68a084f7 > .holder[variant*="bg-2"]
+{
+	background: var(--dh-bg-2);
+	border: 1px solid var(--dh-bg-2-border);
+	border-radius: var(--dh-radius-l);
+}
+
+.e-68a084f7 > .holder[variant*="bg-3"]
+{
+	background: var(--dh-bg-3);
+	border: 1px solid var(--dh-bg-3-border);
+	border-radius: var(--dh-radius-l);
+}
+
+.e-68a084f7 > .holder[variant*="bg-4"]
+{
+	background: var(--dh-bg-4);
+	border: 1px solid var(--dh-bg-4-border);
+	border-radius: var(--dh-radius-l);
+}
+
+/* Variants - Border */
+.e-68a084f7 > .holder[variant*="border"]
+{
+	border-width: 2px;
+}
+
+/* Variants - Sizes */
+.e-68a084f7 > .holder[variant*="size-s"]
+{
+	padding: var(--dh-spacing-m);
+	gap: var(--dh-spacing-s);
+}
+
+.e-68a084f7 > .holder[variant*="size-s"] > .icon
+{
+	font-size: 36px;
+}
+
+.e-68a084f7 > .holder[variant*="size-s"] > .content
+{
+	max-width: 300px;
+}
+
+.e-68a084f7 > .holder[variant*="size-s"] > .content > .title
+{
+	font-size: var(--dh-size-m);
+}
+
+.e-68a084f7 > .holder[variant*="size-s"] > .content > .text
+{
+	font-size: var(--dh-size-s);
+}
+
+.e-68a084f7 > .holder[variant*="size-m"]
+{
+	padding: var(--dh-spacing-l);
+	gap: var(--dh-spacing-m);
+}
+
+.e-68a084f7 > .holder[variant*="size-m"] > .icon
+{
+	font-size: 48px;
+}
+
+.e-68a084f7 > .holder[variant*="size-m"] > .content
+{
+	max-width: 400px;
+}
+
+.e-68a084f7 > .holder[variant*="size-m"] > .content > .title
+{
+	font-size: var(--dh-size-l);
+}
+
+.e-68a084f7 > .holder[variant*="size-m"] > .content > .text
+{
+	font-size: var(--dh-size-m);
+}
+
+.e-68a084f7 > .holder[variant*="size-l"]
+{
+	padding: var(--dh-spacing-l);
+	gap: var(--dh-spacing-l);
+}
+
+.e-68a084f7 > .holder[variant*="size-l"] > .icon
+{
+	font-size: 64px;
+}
+
+.e-68a084f7 > .holder[variant*="size-l"] > .content
+{
+	max-width: 500px;
+}
+
+.e-68a084f7 > .holder[variant*="size-l"] > .content > .title
+{
+	font-size: 24px;
+}
+
+.e-68a084f7 > .holder[variant*="size-l"] > .content > .text
+{
+	font-size: var(--dh-size-l);
+}

package/addons/render/elements/front/items/self/layout/empty/empty.js

@@ -0,0 +1,43 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'empty',
+	icon: 'inbox',
+	name: 'Empty',
+	description: 'Empty state placeholder with icon, title, and message.',
+	category: 'Layout',
+	author: 'Divhunt',
+	config: {
+		icon: {
+			type: 'string',
+			value: 'inbox'
+		},
+		title: {
+			type: 'string',
+			value: 'No items found'
+		},
+		text: {
+			type: 'string',
+			value: 'Get started by creating your first item.'
+		},
+		variant: {
+			type: 'array',
+			value: ['size-m', 'bg-1', 'border'],
+			options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
+		}
+	},
+	render: function()
+	{
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<i dh-if="icon" class="icon">{{ icon }}</i>
+
+				<div class="content">
+					<div dh-if="title" class="title">{{ title }}</div>
+					<div dh-if="text" class="text">{{ text }}</div>
+					<slot></slot>
+				</div>
+			</div>
+		`;
+	}
+});

package/addons/render/elements/front/items/self/layout/heading/heading.css

@@ -0,0 +1,117 @@
+.e-52c43b2c > .holder
+{
+	display: flex;
+	gap: var(--dh-spacing-m);
+	padding-bottom: var(--dh-spacing-m);
+	border-bottom: 1px solid var(--dh-bg-2-border);
+}
+
+.e-52c43b2c > .holder > i
+{
+	width: 40px;
+	height: 40px;
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--dh-radius-m);
+	background: var(--dh-brand-opacity);
+	color: var(--dh-brand);
+	font-size: 20px;
+	transition: all 0.2s;
+}
+
+.e-52c43b2c > .holder > i:hover
+{
+	background: var(--dh-brand-hover);
+	transform: scale(1.05);
+}
+
+.e-52c43b2c > .holder > .content
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-x);
+	flex: 1;
+}
+
+.e-52c43b2c > .holder > .content > h2
+{
+	margin: 0;
+	color: var(--dh-text-1);
+	font-weight: 600;
+	font-size: 24px;
+	line-height: 1.2;
+	letter-spacing: -0.02em;
+}
+
+.e-52c43b2c > .holder > .content > p
+{
+	margin: 0;
+	color: var(--dh-text-2);
+	font-size: var(--dh-size-m);
+	line-height: 1.5;
+}
+
+.e-52c43b2c > .holder[variant*="align-center"]
+{
+	align-items: center;
+	text-align: center;
+}
+
+.e-52c43b2c > .holder[variant*="align-right"]
+{
+	align-items: flex-end;
+	text-align: right;
+}
+
+.e-52c43b2c > .holder[variant*="size-s"] > i
+{
+	width: 36px;
+	height: 36px;
+	font-size: 18px;
+}
+
+.e-52c43b2c > .holder[variant*="size-s"] > .content > h2
+{
+	font-size: 20px;
+}
+
+.e-52c43b2c > .holder[variant*="size-s"] > .content > p
+{
+	font-size: var(--dh-size-s);
+}
+
+.e-52c43b2c > .holder[variant*="size-m"] > i
+{
+	width: 40px;
+	height: 40px;
+	font-size: 20px;
+}
+
+.e-52c43b2c > .holder[variant*="size-m"] > .content > h2
+{
+	font-size: 24px;
+}
+
+.e-52c43b2c > .holder[variant*="size-m"] > .content > p
+{
+	font-size: var(--dh-size-m);
+}
+
+.e-52c43b2c > .holder[variant*="size-l"] > i
+{
+	width: 48px;
+	height: 48px;
+	font-size: 24px;
+}
+
+.e-52c43b2c > .holder[variant*="size-l"] > .content > h2
+{
+	font-size: 32px;
+}
+
+.e-52c43b2c > .holder[variant*="size-l"] > .content > p
+{
+	font-size: var(--dh-size-l);
+}

package/addons/render/elements/front/items/self/layout/heading/heading.js

@@ -0,0 +1,47 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'heading',
+	icon: 'title',
+	name: 'Heading',
+	description: 'Heading component with alignment options (left, center, right), and size variants for different hierarchy levels.',
+	category: 'Layout',
+	author: 'Divhunt',
+	config: {
+		icon: {
+			type: 'string',
+			value: ''
+		},
+		color: {
+			type: 'string',
+			value: ''
+		},
+		title: {
+			type: 'string',
+			value: 'Heading Title'
+		},
+		description: {
+			type: 'string',
+			value: 'This is a description text that provides additional context and information about the heading above.'
+		},
+		variant: {
+			type: 'array',
+			value: ['align-left', 'size-m'],
+			options: ['align-left', 'align-center', 'align-right', 'size-s', 'size-m', 'size-l']
+		}
+	},
+	render: function()
+	{
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<i dh-if="icon" :style="color ? 'color: ' + color : ''">{{ icon }}</i>
+				<div class="content">
+					<slot name="top"></slot>
+					<h2>{{ title }}</h2>
+					<p dh-if="description">{{ description }}</p>
+					<slot name="bottom"></slot>
+				</div>
+			</div>
+		`;
+	}
+});

package/addons/render/elements/front/items/self/layout/hero/hero.js

@@ -0,0 +1,88 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'hero',
+	icon: 'web',
+	name: 'Hero',
+	description: 'Hero section with headline, subtext, CTAs, and trust indicators for landing pages.',
+	category: 'Layout',
+	author: 'Divhunt',
+	config: {
+		badge: {
+			type: 'string',
+			value: 'New Release'
+		},
+		title: {
+			type: 'string',
+			value: 'Build faster with'
+		},
+		highlight: {
+			type: 'string',
+			value: 'Divhunt'
+		},
+		description: {
+			type: 'string',
+			value: 'The all-in-one platform for building modern web applications. Ship products faster with our intuitive tools and components.'
+		},
+		buttons: {
+			type: 'array',
+			value: [
+				{ text: 'Get Started', variant: ['brand', 'size-m'] },
+				{ text: 'Learn More', variant: ['border', 'size-m'] }
+			],
+			each: {
+				type: 'object',
+				config: {
+					text: { type: 'string', value: 'Button' },
+					href: { type: 'string', value: '' },
+					variant: { type: 'array', value: ['brand', 'size-m'] }
+				}
+			}
+		},
+		stats: {
+			type: 'array',
+			value: [
+				{ value: '10K+', label: 'Active Users', icon: 'group' },
+				{ value: '99.9%', label: 'Uptime', icon: 'check_circle' },
+				{ value: '24/7', label: 'Support', icon: 'support_agent' }
+			],
+			each: {
+				type: 'object',
+				config: {
+					value: { type: 'string', value: '100' },
+					label: { type: 'string', value: 'Label' },
+					icon: { type: 'string', value: '' }
+				}
+			}
+		},
+		variant: {
+			type: 'array',
+			value: ['center', 'size-m'],
+			options: ['left', 'center', 'right', 'size-s', 'size-m', 'size-l', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'border']
+		}
+	},
+	render: function()
+	{
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<slot name="top"></slot>
+				<div class="content">
+					<e-tag dh-if="badge" :text="badge" :variant="['border', 'size-s']"></e-tag>
+					<h1>{{ title }}<span dh-if="highlight">{{ highlight }}</span></h1>
+					<p dh-if="description">{{ description }}</p>
+					<div dh-if="buttons.length" class="actions">
+						<e-button dh-for="button in buttons" :text="button.text" :href="button.href" :variant="button.variant"></e-button>
+					</div>
+					<div dh-if="stats.length" class="stats">
+						<div dh-for="stat in stats" class="stat">
+							<i dh-if="stat.icon">{{ stat.icon }}</i>
+							<strong>{{ stat.value }}</strong>
+							<span>{{ stat.label }}</span>
+						</div>
+					</div>
+				</div>
+				<slot name="bottom"></slot>
+			</div>
+		`;
+	}
+});