divhunt 2.0.5 → 2.0.6

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

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

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

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

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

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

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

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

@@ -1,88 +0,0 @@
-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>
-		`;
-	}
-});