divhunt 2.0.0

package/addons/render/elements/front/items/self/navigation/stepper/stepper.css

@@ -0,0 +1,202 @@
+/* Base */
+.e-4d809c05 > .holder
+{
+	display: flex;
+	gap: 0;
+}
+
+.e-4d809c05 > .holder > .step
+{
+	display: flex;
+	align-items: center;
+	flex: 1;
+	cursor: pointer;
+	position: relative;
+}
+
+.e-4d809c05 > .holder > .step > .circle
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	background: var(--dh-bg-2);
+	border: 2px solid var(--dh-bg-2-border);
+	color: var(--dh-text-2);
+	font-weight: 600;
+	transition: all 0.2s ease;
+	flex-shrink: 0;
+	z-index: 1;
+}
+
+.e-4d809c05 > .holder > .step > .circle > .icon
+{
+	font-size: 20px;
+}
+
+.e-4d809c05 > .holder > .step > .circle > .number
+{
+	font-size: 16px;
+}
+
+.e-4d809c05 > .holder > .step > .content
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-x);
+	margin-left: var(--dh-spacing-s);
+	min-width: 0;
+}
+
+.e-4d809c05 > .holder > .step > .content > .label
+{
+	font-weight: 600;
+	color: var(--dh-text-1);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.e-4d809c05 > .holder > .step > .content > .description
+{
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.e-4d809c05 > .holder > .step > .connector
+{
+	flex: 1;
+	height: 2px;
+	background: var(--dh-bg-2-border);
+	margin: 0 var(--dh-spacing-m);
+	transition: background 0.2s ease;
+}
+
+.e-4d809c05 > .holder > .step[status="current"] > .circle
+{
+	background: var(--dh-brand);
+	border-color: var(--dh-brand-border);
+	color: white;
+}
+
+.e-4d809c05 > .holder > .step[status="completed"] > .circle
+{
+	background: var(--dh-brand);
+	border-color: var(--dh-brand-border);
+	color: white;
+}
+
+.e-4d809c05 > .holder > .step[status="completed"] > .connector
+{
+	background: var(--dh-brand);
+}
+
+.e-4d809c05 > .holder > .step[status="pending"] > .circle
+{
+	background: var(--dh-bg-2);
+	border-color: var(--dh-bg-2-border);
+	color: var(--dh-text-2);
+}
+
+.e-4d809c05 > .holder > .step[status="pending"] > .content > .label
+{
+	color: var(--dh-text-2);
+}
+
+/* Variants - Vertical */
+.e-4d809c05 > .holder[variant*="vertical"]
+{
+	flex-direction: column;
+	gap: var(--dh-spacing-l);
+}
+
+.e-4d809c05 > .holder[variant*="vertical"] > .step
+{
+	flex-direction: row;
+	align-items: flex-start;
+}
+
+.e-4d809c05 > .holder[variant*="vertical"] > .step > .content
+{
+	margin-left: var(--dh-spacing-s);
+	margin-top: 0;
+}
+
+.e-4d809c05 > .holder[variant*="vertical"] > .step > .connector
+{
+	position: absolute;
+	left: 20px;
+	top: 40px;
+	width: 2px;
+	height: calc(100% + var(--dh-spacing-l));
+	margin: 0;
+}
+
+/* Variants - Sizes */
+.e-4d809c05 > .holder[variant*="size-s"] > .step > .circle
+{
+	width: 32px;
+	height: 32px;
+}
+
+.e-4d809c05 > .holder[variant*="size-s"] > .step > .circle > .icon
+{
+	font-size: 16px;
+}
+
+.e-4d809c05 > .holder[variant*="size-s"] > .step > .circle > .number
+{
+	font-size: 14px;
+}
+
+.e-4d809c05 > .holder[variant*="size-s"] > .step > .content > .label
+{
+	font-size: var(--dh-size-s);
+}
+
+.e-4d809c05 > .holder[variant*="size-m"] > .step > .circle
+{
+	width: 40px;
+	height: 40px;
+}
+
+.e-4d809c05 > .holder[variant*="size-m"] > .step > .circle > .icon
+{
+	font-size: 20px;
+}
+
+.e-4d809c05 > .holder[variant*="size-m"] > .step > .circle > .number
+{
+	font-size: 16px;
+}
+
+.e-4d809c05 > .holder[variant*="size-m"] > .step > .content > .label
+{
+	font-size: var(--dh-size-m);
+}
+
+.e-4d809c05 > .holder[variant*="size-l"] > .step > .circle
+{
+	width: 48px;
+	height: 48px;
+}
+
+.e-4d809c05 > .holder[variant*="size-l"] > .step > .circle > .icon
+{
+	font-size: 24px;
+}
+
+.e-4d809c05 > .holder[variant*="size-l"] > .step > .circle > .number
+{
+	font-size: 18px;
+}
+
+.e-4d809c05 > .holder[variant*="size-l"] > .step > .content > .label
+{
+	font-size: var(--dh-size-l);
+}

package/addons/render/elements/front/items/self/navigation/stepper/stepper.js

@@ -0,0 +1,82 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'stepper',
+	icon: 'linear_scale',
+	name: 'Stepper',
+	description: 'Step-by-step progress indicator with customizable steps, icons, and completion states.',
+	category: 'Navigation',
+	author: 'Divhunt',
+	config: {
+		steps: {
+			type: 'array',
+			value: [
+				{ label: 'Step 1', description: 'First step', icon: 'looks_one' },
+				{ label: 'Step 2', description: 'Second step', icon: 'looks_two' },
+				{ label: 'Step 3', description: 'Third step', icon: 'looks_3' }
+			],
+			each: {
+				type: 'object',
+				config: {
+					label: ['string'],
+					description: ['string'],
+					icon: ['string']
+				}
+			}
+		},
+		step: {
+			type: 'number',
+			value: 1
+		},
+		variant: {
+			type: 'array',
+			value: ['horizontal', 'size-m'],
+			options: ['horizontal', 'vertical', 'size-s', 'size-m', 'size-l']
+		},
+		onChange: {
+			type: 'function'
+		}
+	},
+	render: function()
+	{
+		this.goToStep = (index) =>
+		{
+			if (index >= 0 && index < this.steps.length)
+			{
+				this.step = index;
+				if (this.onChange)
+				{
+					this.onChange(index);
+				}
+			}
+		};
+
+		this.getStatus = (index) =>
+		{
+			if (index < this.step) return 'completed';
+			if (index === this.step) return 'current';
+			return 'pending';
+		};
+
+		this.isCompleted = (index) => index < this.step;
+
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<div dh-for="step, index in steps" class="step" :status="getStatus(index)" dh-click="() => goToStep(index)">
+					<div class="circle">
+						<i dh-if="isCompleted(index)" class="icon check">check</i>
+						<i dh-if="!isCompleted(index) && step.icon" class="icon">{{ step.icon }}</i>
+						<span dh-if="!isCompleted(index) && !step.icon" class="number">{{ index + 1 }}</span>
+					</div>
+
+					<div class="content">
+						<div class="label">{{ step.label }}</div>
+						<div dh-if="step.description" class="description">{{ step.description }}</div>
+					</div>
+
+					<div dh-if="index < steps.length - 1" class="connector"></div>
+				</div>
+			</div>
+		`;
+	}
+});

package/addons/render/elements/front/items/self/navigation/tabs/addon.js

@@ -0,0 +1,32 @@
+const tabs = divhunt.Addon('tabs', (addon) =>
+{
+	addon.Field('id', ['string|number']);
+	addon.Field('order', ['number', 0]);
+	addon.Field('label', ['string']);
+	addon.Field('icon', ['string']);
+	addon.Field('badge', ['string|number']);
+	addon.Field('active', ['boolean', false]);
+	addon.Field('disabled', ['boolean', false]);
+	addon.Field('condition', ['function']);
+});
+
+tabs.Fn('get', function()
+{
+	let result = Object.values(this.Items());
+
+	result = result.filter(item =>
+	{
+		return !item.Get('condition') || item.Get('condition')(item);
+	});
+
+	result = result.sort((a, b) => a.Get('order') - b.Get('order'));
+
+	return result.map(item => ({
+		id: item.Get('id'),
+		label: item.Get('label'),
+		icon: item.Get('icon'),
+		badge: item.Get('badge'),
+		active: item.Get('active'),
+		disabled: item.Get('disabled')
+	}));
+});

package/addons/render/elements/front/items/self/navigation/tabs/tabs.css

@@ -0,0 +1,239 @@
+/* Base */
+.e-4db696c > .holder
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-m);
+	background: transparent;
+}
+
+.e-4db696c > .holder > .items
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-l);
+	flex: 1;
+}
+
+.e-4db696c > .holder > .items > div
+{
+	display: flex;
+}
+
+.e-4db696c > .holder > .items > div > .item
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-x);
+	padding: var(--dh-spacing-s) 0;
+	cursor: pointer;
+	user-select: none;
+	transition: all 0.2s ease;
+	border-bottom: 2px solid transparent;
+	color: var(--dh-text-2);
+}
+
+.e-4db696c > .holder > .items > div > .item:hover
+{
+	color: var(--dh-text-1);
+}
+
+.e-4db696c > .holder > .items > div > .item[active="true"]
+{
+	color: var(--dh-brand);
+	border-bottom-color: var(--dh-brand);
+}
+
+.e-4db696c > .holder > .items > div > .item[disabled="true"]
+{
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.e-4db696c > .holder > .items > div > .item[disabled="true"]:hover
+{
+	color: var(--dh-text-2);
+}
+
+.e-4db696c > .holder > .items > div > .item > .icon
+{
+	font-size: 18px;
+	color: inherit;
+}
+
+.e-4db696c > .holder > .items > div > .item > .label
+{
+	font-weight: 500;
+}
+
+.e-4db696c > .holder > .items > div > .item > .badge
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 18px;
+	height: 18px;
+	padding: 0 var(--dh-spacing-x);
+	background: var(--dh-bg-4);
+	color: var(--dh-text-1);
+	font-size: 11px;
+	font-weight: 600;
+	border-radius: 9px;
+}
+
+.e-4db696c > .holder > .items > div > .item[active="true"] > .badge
+{
+	background: var(--dh-brand);
+	color: white;
+}
+
+/* Variants - Orientation */
+.e-4db696c > .holder[variant*="vertical"]
+{
+	flex-direction: column;
+	align-items: stretch;
+}
+
+.e-4db696c > .holder[variant*="vertical"] > .items
+{
+	flex-direction: column;
+	gap: 0;
+}
+
+.e-4db696c > .holder[variant*="vertical"] > .items > div
+{
+	width: 100%;
+}
+
+.e-4db696c > .holder[variant*="vertical"] > .items > div > .item
+{
+	border-bottom: none;
+	border-left: 2px solid transparent;
+	justify-content: flex-start;
+	padding: var(--dh-spacing-s) var(--dh-spacing-m);
+}
+
+.e-4db696c > .holder[variant*="vertical"] > .items > div > .item[active="true"]
+{
+	border-left-color: var(--dh-brand);
+	border-bottom-color: transparent;
+}
+
+/* Variants - Background */
+.e-4db696c > .holder[variant*="bg-1"]
+{
+	background: var(--dh-bg-1);
+}
+
+.e-4db696c > .holder[variant*="bg-2"]
+{
+	background: var(--dh-bg-2);
+}
+
+.e-4db696c > .holder[variant*="bg-3"]
+{
+	background: var(--dh-bg-3);
+}
+
+.e-4db696c > .holder[variant*="bg-4"]
+{
+	background: var(--dh-bg-4);
+}
+
+.e-4db696c > .holder[variant*="bg-"]:not([variant*="vertical"])
+{
+	padding: 0 var(--dh-spacing-m);
+}
+
+/* Variants - Border */
+.e-4db696c > .holder[variant*="border"]:not([variant*="border-bottom"]):not([variant*="border-full"])
+{
+	border: 1px solid var(--dh-bg-2-border);
+}
+
+.e-4db696c > .holder[variant*="border-bottom"]
+{
+	border-bottom: 1px solid var(--dh-bg-2-border);
+}
+
+.e-4db696c > .holder[variant*="border-full"]
+{
+	border: 1px solid var(--dh-bg-2-border);
+}
+
+/* Variants - Radius */
+.e-4db696c > .holder[variant*="radius-s"]
+{
+	border-radius: var(--dh-radius-s);
+}
+
+.e-4db696c > .holder[variant*="radius-m"]
+{
+	border-radius: var(--dh-radius-m);
+}
+
+.e-4db696c > .holder[variant*="radius-l"]
+{
+	border-radius: var(--dh-radius-l);
+}
+
+/* Sizes */
+.e-4db696c > .holder[size="s"] > .items > div > .item
+{
+	font-size: var(--dh-size-s);
+}
+
+.e-4db696c > .holder[size="s"] > .items > div > .item > .icon
+{
+	font-size: 16px;
+}
+
+.e-4db696c > .holder[size="s"]:not([variant*="vertical"]) > .items > div > .item
+{
+	padding: var(--dh-spacing-x) 0;
+}
+
+.e-4db696c > .holder[size="s"][variant*="vertical"] > .items > div > .item
+{
+	padding: var(--dh-spacing-x) var(--dh-spacing-m);
+}
+
+.e-4db696c > .holder[size="m"] > .items > div > .item
+{
+	font-size: var(--dh-size-m);
+}
+
+.e-4db696c > .holder[size="m"] > .items > div > .item > .icon
+{
+	font-size: 18px;
+}
+
+.e-4db696c > .holder[size="m"]:not([variant*="vertical"]) > .items > div > .item
+{
+	padding: var(--dh-spacing-s) 0;
+}
+
+.e-4db696c > .holder[size="m"][variant*="vertical"] > .items > div > .item
+{
+	padding: var(--dh-spacing-s) var(--dh-spacing-m);
+}
+
+.e-4db696c > .holder[size="l"] > .items > div > .item
+{
+	font-size: var(--dh-size-l);
+}
+
+.e-4db696c > .holder[size="l"] > .items > div > .item > .icon
+{
+	font-size: 20px;
+}
+
+.e-4db696c > .holder[size="l"]:not([variant*="vertical"]) > .items > div > .item
+{
+	padding: var(--dh-spacing-m) 0;
+}
+
+.e-4db696c > .holder[size="l"][variant*="vertical"] > .items > div > .item
+{
+	padding: var(--dh-spacing-m) var(--dh-spacing-m);
+}

package/addons/render/elements/front/items/self/navigation/tabs/tabs.js

@@ -0,0 +1,76 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'tabs',
+	icon: 'tab',
+	name: 'Tabs',
+	description: 'Tab navigation component with support for icons, badges, and active state management.',
+	category: 'Navigation',
+	author: 'Divhunt',
+	config: {
+		variant: {
+			type: 'array',
+			value: ['border-bottom'],
+			options: ['horizontal', 'vertical', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'border-bottom', 'border-full', 'radius-s', 'radius-m', 'radius-l']
+		},
+		size: {
+			type: 'string',
+			value: 'm',
+			options: ['s', 'm', 'l']
+		},
+		onClick: {
+			type: 'function'
+		}
+	},
+	render: function()
+	{
+		this.items = tabs.Fn('get');
+
+		const update = () =>
+		{
+			this.items = tabs.Fn('get');
+		};
+
+		tabs.ItemOn('added', update, 'tabs');
+		tabs.ItemOn('removed', update, 'tabs');
+		tabs.ItemOn('modified', update, 'tabs');
+
+		this.handleTabClick = (item) =>
+		{
+			if(item.disabled)
+			{
+				return;
+			}
+
+			this.items.forEach(tab =>
+			{
+				tabs.Item(tab.id).Set('active', tab.id === item.id);
+			});
+
+			if(this.onClick)
+			{
+				this.onClick(tabs.Item(item.id));
+			}
+		};
+
+		return `
+			<div class="holder" :variant="variant.join(' ')" :size="size">
+				<slot name="start"></slot>
+				<div class="items" dh-if="items.length > 0">
+					<div dh-for="item in items">
+						<div
+							class="item"
+							:active="item.active ? 'true' : 'false'"
+							:disabled="item.disabled ? 'true' : 'false'"
+							dh-click="() => handleTabClick(item)">
+							<i dh-if="item.icon" class="icon">{{ item.icon }}</i>
+							<span dh-if="item.label" class="label">{{ item.label }}</span>
+							<span dh-if="item.badge" class="badge">{{ item.badge }}</span>
+						</div>
+					</div>
+				</div>
+				<slot name="end"></slot>
+			</div>
+		`;
+	}
+});