divhunt 2.0.0

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

@@ -0,0 +1,96 @@
+/* Base */
+.e-2109a6b9 > .holder
+{
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--dh-spacing-l);
+	padding: var(--dh-spacing-m);
+}
+
+.e-2109a6b9 > .holder > .info
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-x);
+	flex: 1;
+	min-width: 0;
+}
+
+.e-2109a6b9 > .holder > .info > label
+{
+	font-size: var(--dh-size-m);
+	font-weight: 500;
+	color: var(--dh-text-1);
+	line-height: 1.3;
+}
+
+.e-2109a6b9 > .holder > .info > p
+{
+	margin: 0;
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+	line-height: 1.4;
+}
+
+.e-2109a6b9 > .holder > .input
+{
+	flex-shrink: 0;
+	min-width: 200px;
+	max-width: 280px;
+	width: 100%;
+}
+
+/* Variants - Border */
+.e-2109a6b9 > .holder[variant*="border-bottom"]
+{
+	border-bottom: 1px solid var(--dh-bg-2-border);
+}
+
+.e-2109a6b9 > .holder[variant*="border-bottom"]:last-child
+{
+	border-bottom: none;
+}
+
+/* Sizes */
+.e-2109a6b9 > .holder[variant*="size-s"]
+{
+	padding: var(--dh-spacing-s);
+}
+
+.e-2109a6b9 > .holder[variant*="size-s"] > .info > label
+{
+	font-size: var(--dh-size-s);
+}
+
+.e-2109a6b9 > .holder[variant*="size-s"] > .info > p
+{
+	font-size: var(--dh-size-x);
+}
+
+.e-2109a6b9 > .holder[variant*="size-s"] > .input
+{
+	min-width: 160px;
+	max-width: 220px;
+}
+
+.e-2109a6b9 > .holder[variant*="size-l"]
+{
+	padding: var(--dh-spacing-l);
+}
+
+.e-2109a6b9 > .holder[variant*="size-l"] > .info > label
+{
+	font-size: var(--dh-size-l);
+}
+
+.e-2109a6b9 > .holder[variant*="size-l"] > .info > p
+{
+	font-size: var(--dh-size-m);
+}
+
+.e-2109a6b9 > .holder[variant*="size-l"] > .input
+{
+	min-width: 240px;
+	max-width: 320px;
+}

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

@@ -0,0 +1,39 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'form-field',
+	icon: 'space_dashboard',
+	name: 'Form Field',
+	description: 'Form field row with label and description on left, input slot on right.',
+	category: 'Form',
+	author: 'Divhunt',
+	config: {
+		label: {
+			type: 'string',
+			value: 'Field Label'
+		},
+		description: {
+			type: 'string',
+			value: ''
+		},
+		variant: {
+			type: 'array',
+			value: [],
+			options: ['border-bottom', 'size-s', 'size-m', 'size-l']
+		}
+	},
+	render: function()
+	{
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<div class="info">
+					<label dh-if="label">{{ label }}</label>
+					<p dh-if="description">{{ description }}</p>
+				</div>
+				<div class="input">
+					<slot name="input"></slot>
+				</div>
+			</div>
+		`;
+	}
+});

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

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

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

@@ -0,0 +1,78 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+    id: 'input',
+    icon: 'input',
+    name: 'Input',
+    description: 'Text input field with variant support, placeholder, validation, and built-in error states. Supports all standard input types.',
+    category: 'Form',
+    author: 'Divhunt',
+    config: {
+        value: {
+            type: 'string'
+        },
+        name: {
+            type: 'string'
+        },
+        type: {
+            type: 'string',
+            value: 'text'
+        },
+        placeholder: {
+            type: 'string'
+        },
+        maxLength: {
+            type: 'number'
+        },
+        disabled: {
+            type: 'boolean'
+        },
+        readonly: {
+            type: 'boolean'
+        },
+        variant: {
+            type: 'array',
+            value: ['bg-2', 'border-full'],
+            options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border-full']
+        },
+        size: {
+            type: 'string',
+            value: 'm',
+            options: ['s', 'm', 'l']
+        },
+        onInput: {
+            type: 'function'
+        },
+        onChange: {
+            type: 'function'
+        },
+        onFocus: {
+            type: 'function'
+        },
+        onBlur: {
+            type: 'function'
+        }
+    },
+    render: function()
+    {
+        return `
+            <input
+                class="holder"
+                :variant="variant.join(' ')"
+                :size="size"
+                :value="value"
+                :type="type"
+                :placeholder="placeholder"
+                :name="name"
+                :maxlength="maxLength"
+                :disabled="disabled"
+                :readonly="readonly"
+                autocomplete="off"
+                dh-input="onInput"
+                dh-change="onChange"
+                dh-focus="onFocus"
+                dh-blur="onBlur"
+            />
+        `;
+    }
+});

package/addons/render/elements/front/items/self/form/input/styles/base.css

@@ -0,0 +1,26 @@
+.r538212a9 > .holder
+{
+    position: relative;
+}
+
+.r538212a9 input
+{
+    width: 100%;
+    padding: 0 var(--dh-spacing-m);
+    border-radius: var(--dh-radius-m);
+    border: 1px solid;
+    background: transparent;
+    transition: all 0.2s ease;
+    outline: none;
+}
+
+.r538212a9 input::placeholder
+{
+    color: var(--dh-text-2);
+}
+
+.r538212a9 input:disabled
+{
+    opacity: 0.5;
+    cursor: not-allowed;
+}

package/addons/render/elements/front/items/self/form/input/styles/sizes.css

@@ -0,0 +1,15 @@
+/* Sizes */
+.r538212a9 > .holder[size="s"] input
+{
+    height: var(--dh-height-s);
+}
+
+.r538212a9 > .holder[size="m"] input
+{
+    height: var(--dh-height-m);
+}
+
+.r538212a9 > .holder[size="l"] input
+{
+    height: var(--dh-height-l);
+}

package/addons/render/elements/front/items/self/form/input/styles/variants.css

@@ -0,0 +1,98 @@
+/* Variants */
+.r538212a9 > .holder[variant="transparent"] input
+{
+    background: transparent;
+    border-color: transparent;
+    padding: 0;
+}
+
+.r538212a9 > .holder[variant="transparent"] input:hover
+{
+    background: transparent;
+}
+
+.r538212a9 > .holder[variant="transparent"] input:focus
+{
+    border-color: transparent;
+}
+
+.r538212a9 > .holder[variant="border"] input
+{
+    background: transparent;
+    border-color: var(--dh-bg-1-border);
+}
+
+.r538212a9 > .holder[variant="border"] input:hover
+{
+    background: transparent;
+    border-color: var(--dh-bg-2-border);
+}
+
+.r538212a9 > .holder[variant="border"] input:focus
+{
+    border-color: var(--dh-brand);
+}
+
+.r538212a9 > .holder[variant="bg-1"] input
+{
+    background: var(--dh-bg-1);
+    border-color: var(--dh-bg-1-border);
+}
+
+.r538212a9 > .holder[variant="bg-1"] input:hover
+{
+    background: var(--dh-bg-1-hover);
+}
+
+.r538212a9 > .holder[variant="bg-1"] input:focus
+{
+    border-color: var(--dh-brand);
+}
+
+.r538212a9 > .holder[variant="bg-2"] input
+{
+    background: var(--dh-bg-2);
+    border-color: var(--dh-bg-2-border);
+}
+
+.r538212a9 > .holder[variant="bg-2"] input:hover
+{
+    background: var(--dh-bg-2-hover);
+}
+
+.r538212a9 > .holder[variant="bg-2"] input:focus
+{
+    border-color: var(--dh-brand);
+}
+
+.r538212a9 > .holder[variant="bg-3"] input
+{
+    background: var(--dh-bg-3);
+    border-color: var(--dh-bg-3-border);
+}
+
+.r538212a9 > .holder[variant="bg-3"] input:hover
+{
+    background: var(--dh-bg-3-hover);
+}
+
+.r538212a9 > .holder[variant="bg-3"] input:focus
+{
+    border-color: var(--dh-brand);
+}
+
+.r538212a9 > .holder[variant="bg-4"] input
+{
+    background: var(--dh-bg-4);
+    border-color: var(--dh-bg-4-border);
+}
+
+.r538212a9 > .holder[variant="bg-4"] input:hover
+{
+    background: var(--dh-bg-4-hover);
+}
+
+.r538212a9 > .holder[variant="bg-4"] input:focus
+{
+    border-color: var(--dh-brand);
+}

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

@@ -0,0 +1,57 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+    id: 'radio',
+    icon: 'radio_button_checked',
+    name: 'Radio',
+    description: 'Radio button input with custom styling, group support, and multiple size options for different form contexts.',
+    category: 'Form',
+    author: 'Divhunt',
+    config: {
+        name: {
+            type: 'string'
+        },
+        value: {
+            type: 'string'
+        },
+        checked: {
+            type: 'boolean'
+        },
+        disabled: {
+            type: 'boolean'
+        },
+        variant: {
+            type: 'array',
+            value: ['bg-1'],
+            options: ['transparent', 'border', 'bg-1', 'bg-2', 'bg-3', 'bg-4']
+        },
+        size: {
+            type: 'string',
+            value: 'm',
+            options: ['s', 'm', 'l']
+        },
+        onChange: {
+            type: 'function'
+        },
+        onClick: {
+            type: 'function'
+        }
+    },
+    render: function()
+    {
+        return `
+            <div class="holder" :variant="variant.join(' ')" :size="size">
+                <input
+                    type="radio"
+                    :name="name"
+                    :value="value"
+                    :checked="checked"
+                    :disabled="disabled"
+                    dh-change="onChange"
+                    dh-click="onClick"
+                />
+                <span class="radio-mark"></span>
+            </div>
+        `;
+    }
+});

package/addons/render/elements/front/items/self/form/radio/styles/base.css

@@ -0,0 +1,48 @@
+.r53095678 > .holder
+{
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.r53095678 input[type="radio"]
+{
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.r53095678 .radio-mark
+{
+    display: block;
+    border-radius: 50%;
+    border: 1px solid;
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.r53095678 .radio-mark::after
+{
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    border-radius: 50%;
+    transition: all 0.2s ease;
+}
+
+.r53095678 input[type="radio"]:checked ~ .radio-mark::after
+{
+    transform: translate(-50%, -50%) scale(1);
+}
+
+.r53095678 input[type="radio"]:disabled ~ .radio-mark
+{
+    opacity: 0.5;
+    cursor: not-allowed;
+}

package/addons/render/elements/front/items/self/form/radio/styles/sizes.css

@@ -0,0 +1,36 @@
+/* Sizes */
+.r53095678 > .holder[size="s"] .radio-mark
+{
+    width: 16px;
+    height: 16px;
+}
+
+.r53095678 > .holder[size="s"] .radio-mark::after
+{
+    width: 6px;
+    height: 6px;
+}
+
+.r53095678 > .holder[size="m"] .radio-mark
+{
+    width: 20px;
+    height: 20px;
+}
+
+.r53095678 > .holder[size="m"] .radio-mark::after
+{
+    width: 8px;
+    height: 8px;
+}
+
+.r53095678 > .holder[size="l"] .radio-mark
+{
+    width: 24px;
+    height: 24px;
+}
+
+.r53095678 > .holder[size="l"] .radio-mark::after
+{
+    width: 10px;
+    height: 10px;
+}