divhunt 2.0.4 → 2.0.6

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

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

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

package/addons/render/elements/front/items/self/preview/html/html.css

@@ -1,377 +0,0 @@
-/* ============================================
-   PREVIEW HTML - Premium component showcase
-   ============================================ */
-
-.e-dbe4fa6 > .holder
-{
-	display: flex;
-	flex-direction: column;
-	background: var(--dh-bg-1);
-	border-radius: var(--dh-radius-l);
-	overflow: hidden;
-	transition: box-shadow 0.2s ease;
-}
-
-.e-dbe4fa6 > .holder:hover
-{
-	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
-}
-
-
-/* ============================================
-   HEADER
-   ============================================ */
-
-.e-dbe4fa6 > .holder > .header
-{
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: var(--dh-spacing-s) var(--dh-spacing-m);
-	background: var(--dh-bg-2);
-	border-bottom: 1px solid var(--dh-bg-1-border);
-}
-
-.e-dbe4fa6 > .holder > .header > .title
-{
-	font-size: var(--dh-size-s);
-	font-weight: 600;
-	color: var(--dh-text-2);
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
-}
-
-.e-dbe4fa6 > .holder > .header > .actions
-{
-	display: flex;
-	align-items: center;
-	gap: var(--dh-spacing-x);
-}
-
-
-/* ============================================
-   PREVIEW AREA
-   ============================================ */
-
-.e-dbe4fa6 > .holder > .preview
-{
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 140px;
-	padding: var(--dh-spacing-l);
-	overflow: hidden;
-}
-
-/* Grid background - separate layer for animation */
-.e-dbe4fa6 > .holder > .preview > .grid
-{
-	position: absolute;
-	inset: 0;
-	background-image:
-		linear-gradient(var(--dh-bg-1-border) 1px, transparent 1px),
-		linear-gradient(90deg, var(--dh-bg-1-border) 1px, transparent 1px);
-	background-size: 24px 24px;
-	background-position: center center;
-	opacity: 0.6;
-	transition: opacity 0.3s ease;
-}
-
-.e-dbe4fa6 > .holder:hover > .preview > .grid
-{
-	opacity: 1;
-}
-
-/* Content container */
-.e-dbe4fa6 > .holder > .preview > .content
-{
-	position: relative;
-	z-index: 1;
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--dh-spacing-m);
-}
-
-/* Alignment */
-.e-dbe4fa6 > .holder > .preview[align="start"]
-{
-	justify-content: flex-start;
-}
-
-.e-dbe4fa6 > .holder > .preview[align="center"]
-{
-	justify-content: center;
-}
-
-.e-dbe4fa6 > .holder > .preview[align="end"]
-{
-	justify-content: flex-end;
-}
-
-/* Resize handle */
-.e-dbe4fa6 > .holder > .preview > .resize-handle
-{
-	position: absolute;
-	right: 0;
-	top: 50%;
-	transform: translateY(-50%);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 20px;
-	height: 40px;
-	background: var(--dh-bg-2);
-	border-left: 1px solid var(--dh-bg-1-border);
-	border-radius: var(--dh-radius-s) 0 0 var(--dh-radius-s);
-	cursor: ew-resize;
-	opacity: 0;
-	transition: opacity 0.2s ease;
-}
-
-.e-dbe4fa6 > .holder > .preview > .resize-handle > i
-{
-	font-size: 16px;
-	color: var(--dh-text-3);
-	transform: rotate(90deg);
-}
-
-.e-dbe4fa6 > .holder:hover > .preview > .resize-handle
-{
-	opacity: 1;
-}
-
-
-/* ============================================
-   CODE BLOCK
-   ============================================ */
-
-.e-dbe4fa6 > .holder > .code
-{
-	display: flex;
-	flex-direction: column;
-	background: var(--dh-bg-3);
-	border-top: 1px solid var(--dh-bg-1-border);
-}
-
-.e-dbe4fa6 > .holder > .code > .code-header
-{
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: var(--dh-spacing-s) var(--dh-spacing-m);
-	border-bottom: 1px solid var(--dh-bg-3-border);
-}
-
-.e-dbe4fa6 > .holder > .code > .code-header > .label
-{
-	font-size: 10px;
-	font-weight: 600;
-	color: var(--dh-text-3);
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
-}
-
-.e-dbe4fa6 > .holder > .code > pre
-{
-	margin: 0;
-	padding: var(--dh-spacing-m);
-	overflow-x: auto;
-}
-
-.e-dbe4fa6 > .holder > .code > pre > code
-{
-	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
-	font-size: 12px;
-	line-height: 1.6;
-	color: var(--dh-text-2);
-	white-space: pre-wrap;
-	word-break: break-word;
-}
-
-
-/* ============================================
-   VARIANTS - Backgrounds
-   ============================================ */
-
-/* bg-1 (default) */
-.e-dbe4fa6 > .holder[variant*="bg-1"]
-{
-	background: var(--dh-bg-1);
-}
-
-/* bg-2 */
-.e-dbe4fa6 > .holder[variant*="bg-2"]
-{
-	background: var(--dh-bg-2);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-2"] > .header
-{
-	background: var(--dh-bg-3);
-	border-bottom-color: var(--dh-bg-2-border);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-2"] > .preview > .grid
-{
-	background-image:
-		linear-gradient(var(--dh-bg-2-border) 1px, transparent 1px),
-		linear-gradient(90deg, var(--dh-bg-2-border) 1px, transparent 1px);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-2"] > .code
-{
-	background: var(--dh-bg-4);
-	border-top-color: var(--dh-bg-2-border);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-2"] > .code > .code-header
-{
-	border-bottom-color: var(--dh-bg-4-border);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-2"] > .preview > .resize-handle
-{
-	background: var(--dh-bg-3);
-	border-left-color: var(--dh-bg-2-border);
-}
-
-/* bg-3 */
-.e-dbe4fa6 > .holder[variant*="bg-3"]
-{
-	background: var(--dh-bg-3);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-3"] > .header
-{
-	background: var(--dh-bg-4);
-	border-bottom-color: var(--dh-bg-3-border);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-3"] > .preview > .grid
-{
-	background-image:
-		linear-gradient(var(--dh-bg-3-border) 1px, transparent 1px),
-		linear-gradient(90deg, var(--dh-bg-3-border) 1px, transparent 1px);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-3"] > .code
-{
-	background: var(--dh-bg-4);
-	border-top-color: var(--dh-bg-3-border);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-3"] > .code > .code-header
-{
-	border-bottom-color: var(--dh-bg-4-border);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-3"] > .preview > .resize-handle
-{
-	background: var(--dh-bg-4);
-	border-left-color: var(--dh-bg-3-border);
-}
-
-/* bg-4 */
-.e-dbe4fa6 > .holder[variant*="bg-4"]
-{
-	background: var(--dh-bg-4);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-4"] > .preview > .grid
-{
-	background-image:
-		linear-gradient(var(--dh-bg-4-border) 1px, transparent 1px),
-		linear-gradient(90deg, var(--dh-bg-4-border) 1px, transparent 1px);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-4"] > .header
-{
-	background: var(--dh-bg-3);
-	border-bottom-color: var(--dh-bg-4-border);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-4"] > .code
-{
-	background: var(--dh-bg-3);
-	border-top-color: var(--dh-bg-4-border);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-4"] > .code > .code-header
-{
-	border-bottom-color: var(--dh-bg-3-border);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-4"] > .preview > .resize-handle
-{
-	background: var(--dh-bg-3);
-	border-left-color: var(--dh-bg-4-border);
-}
-
-
-/* ============================================
-   VARIANTS - Border
-   ============================================ */
-
-.e-dbe4fa6 > .holder[variant*="border"]
-{
-	border: 1px solid var(--dh-bg-1-border);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-2"][variant*="border"]
-{
-	border-color: var(--dh-bg-2-border);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-3"][variant*="border"]
-{
-	border-color: var(--dh-bg-3-border);
-}
-
-.e-dbe4fa6 > .holder[variant*="bg-4"][variant*="border"]
-{
-	border-color: var(--dh-bg-4-border);
-}
-
-
-/* ============================================
-   VARIANTS - Compact
-   ============================================ */
-
-.e-dbe4fa6 > .holder[variant*="compact"] > .preview
-{
-	min-height: 80px;
-	padding: var(--dh-spacing-m);
-}
-
-.e-dbe4fa6 > .holder[variant*="compact"] > .code > pre
-{
-	padding: var(--dh-spacing-s) var(--dh-spacing-m);
-}
-
-
-/* ============================================
-   VARIANTS - Dots pattern
-   ============================================ */
-
-.e-dbe4fa6 > .holder[variant*="dots"] > .preview > .grid
-{
-	background-image: radial-gradient(circle, var(--dh-bg-1-border) 1px, transparent 1px);
-	background-size: 16px 16px;
-}
-
-.e-dbe4fa6 > .holder[variant*="dots"][variant*="bg-2"] > .preview > .grid
-{
-	background-image: radial-gradient(circle, var(--dh-bg-2-border) 1px, transparent 1px);
-}
-
-.e-dbe4fa6 > .holder[variant*="dots"][variant*="bg-3"] > .preview > .grid
-{
-	background-image: radial-gradient(circle, var(--dh-bg-3-border) 1px, transparent 1px);
-}
-
-.e-dbe4fa6 > .holder[variant*="dots"][variant*="bg-4"] > .preview > .grid
-{
-	background-image: radial-gradient(circle, var(--dh-bg-4-border) 1px, transparent 1px);
-}