@onetype/framework 2.0.41 → 2.0.43

package/lib/items/elements/form/radio/radio.js

@@ -1,58 +0,0 @@
-onetype.AddonReady('elements', (elements) =>
-{
-    elements.ItemAdd({
-        id: 'form-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: 'OneType',
-        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"
-                        ot-change="onChange"
-                        ot-click="onClick"
-                    />
-                    <span class="radio-mark"></span>
-                </div>
-            `;
-        }
-	});
-});

package/lib/items/elements/form/radio/styles/base.css

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

package/lib/items/elements/form/radio/styles/sizes.css

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

package/lib/items/elements/form/radio/styles/variants.css

@@ -1,121 +0,0 @@
-/* Variants */
-.e-206433b8 > .holder[variant="transparent"] .radio-mark
-{
-    background: transparent;
-    border-color: transparent;
-}
-
-.e-206433b8 > .holder[variant="transparent"] .radio-mark::after
-{
-    background: var(--ot-text-1);
-}
-
-.e-206433b8 > .holder[variant="border"] .radio-mark
-{
-    background: transparent;
-    border-color: var(--ot-bg-1-border);
-}
-
-.e-206433b8 > .holder[variant="border"]:hover .radio-mark
-{
-    border-color: var(--ot-bg-2-border);
-}
-
-.e-206433b8 > .holder[variant="border"] input[type="radio"]:checked ~ .radio-mark
-{
-    border-color: var(--ot-brand);
-    background: var(--ot-brand);
-}
-
-.e-206433b8 > .holder[variant="border"] .radio-mark::after
-{
-    background: white;
-}
-
-.e-206433b8 > .holder[variant="bg-1"] .radio-mark
-{
-    background: var(--ot-bg-1);
-    border-color: var(--ot-bg-1-border);
-}
-
-.e-206433b8 > .holder[variant="bg-1"]:hover .radio-mark
-{
-    background: var(--ot-bg-1-hover);
-}
-
-.e-206433b8 > .holder[variant="bg-1"] input[type="radio"]:checked ~ .radio-mark
-{
-    border-color: var(--ot-brand);
-    background: var(--ot-brand);
-}
-
-.e-206433b8 > .holder[variant="bg-1"] .radio-mark::after
-{
-    background: white;
-}
-
-.e-206433b8 > .holder[variant="bg-2"] .radio-mark
-{
-    background: var(--ot-bg-2);
-    border-color: var(--ot-bg-2-border);
-}
-
-.e-206433b8 > .holder[variant="bg-2"]:hover .radio-mark
-{
-    background: var(--ot-bg-2-hover);
-}
-
-.e-206433b8 > .holder[variant="bg-2"] input[type="radio"]:checked ~ .radio-mark
-{
-    border-color: var(--ot-brand);
-    background: var(--ot-brand);
-}
-
-.e-206433b8 > .holder[variant="bg-2"] .radio-mark::after
-{
-    background: white;
-}
-
-.e-206433b8 > .holder[variant="bg-3"] .radio-mark
-{
-    background: var(--ot-bg-3);
-    border-color: var(--ot-bg-3-border);
-}
-
-.e-206433b8 > .holder[variant="bg-3"]:hover .radio-mark
-{
-    background: var(--ot-bg-3-hover);
-}
-
-.e-206433b8 > .holder[variant="bg-3"] input[type="radio"]:checked ~ .radio-mark
-{
-    border-color: var(--ot-brand);
-    background: var(--ot-brand);
-}
-
-.e-206433b8 > .holder[variant="bg-3"] .radio-mark::after
-{
-    background: white;
-}
-
-.e-206433b8 > .holder[variant="bg-4"] .radio-mark
-{
-    background: var(--ot-bg-4);
-    border-color: var(--ot-bg-4-border);
-}
-
-.e-206433b8 > .holder[variant="bg-4"]:hover .radio-mark
-{
-    background: var(--ot-bg-4-hover);
-}
-
-.e-206433b8 > .holder[variant="bg-4"] input[type="radio"]:checked ~ .radio-mark
-{
-    border-color: var(--ot-brand);
-    background: var(--ot-brand);
-}
-
-.e-206433b8 > .holder[variant="bg-4"] .radio-mark::after
-{
-    background: white;
-}

package/lib/items/elements/form/rating/rating.css

@@ -1,95 +0,0 @@
-/* Base */
-.e-13e502f0 > .holder
-{
-	display: inline-flex;
-	align-items: center;
-	gap: var(--ot-spacing-x);
-}
-
-.e-13e502f0 > .holder > .star
-{
-	font-size: 24px;
-	color: var(--ot-bg-3);
-	cursor: pointer;
-	transition: color 0.2s ease, transform 0.2s ease;
-	user-select: none;
-}
-
-.e-13e502f0 > .holder > .star.filled
-{
-	color: var(--ot-brand);
-}
-
-.e-13e502f0 > .holder > .star:hover
-{
-	transform: scale(1.1);
-}
-
-/* Variants - Readonly */
-.e-13e502f0 > .holder[variant*="readonly"] > .star
-{
-	cursor: default;
-	pointer-events: none;
-}
-
-.e-13e502f0 > .holder[variant*="readonly"] > .star:hover
-{
-	transform: none;
-}
-
-/* Variants - Colors */
-.e-13e502f0 > .holder[variant*="brand"] > .star.filled
-{
-	color: var(--ot-brand);
-}
-
-.e-13e502f0 > .holder[variant*="blue"] > .star.filled
-{
-	color: var(--ot-blue);
-}
-
-.e-13e502f0 > .holder[variant*="red"] > .star.filled
-{
-	color: var(--ot-red);
-}
-
-.e-13e502f0 > .holder[variant*="orange"] > .star.filled
-{
-	color: var(--ot-orange);
-}
-
-.e-13e502f0 > .holder[variant*="green"] > .star.filled
-{
-	color: var(--ot-green);
-}
-
-/* Variants - Sizes */
-.e-13e502f0 > .holder[variant*="size-s"]
-{
-	gap: 2px;
-}
-
-.e-13e502f0 > .holder[variant*="size-s"] > .star
-{
-	font-size: 16px;
-}
-
-.e-13e502f0 > .holder[variant*="size-m"]
-{
-	gap: var(--ot-spacing-x);
-}
-
-.e-13e502f0 > .holder[variant*="size-m"] > .star
-{
-	font-size: 24px;
-}
-
-.e-13e502f0 > .holder[variant*="size-l"]
-{
-	gap: var(--ot-spacing-s);
-}
-
-.e-13e502f0 > .holder[variant*="size-l"] > .star
-{
-	font-size: 32px;
-}

package/lib/items/elements/form/section/section.css

@@ -1,129 +0,0 @@
-/* Base */
-.e-5c75a80e
-{
-	display: flex;
-	width: 100%;
-}
-
-.e-5c75a80e > .holder
-{
-	display: flex;
-	flex-direction: column;
-	gap: var(--ot-spacing-m);
-	width: 100%;
-}
-
-.e-5c75a80e > .holder > .header
-{
-	display: flex;
-	flex-direction: column;
-	gap: var(--ot-spacing-x);
-}
-
-.e-5c75a80e > .holder > .header > h3
-{
-	margin: 0;
-	font-size: 18px;
-	font-weight: 600;
-	color: var(--ot-text-1);
-	line-height: 1.3;
-}
-
-.e-5c75a80e > .holder > .header > p
-{
-	margin: 0;
-	font-size: var(--ot-size-m);
-	color: var(--ot-text-2);
-	line-height: 1.5;
-}
-
-.e-5c75a80e > .holder > .content
-{
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-	border-radius: var(--ot-radius-m);
-	overflow: hidden;
-}
-
-.e-5c75a80e > .holder > .content div
-{
-	width: 100%;
-}
-
-/* Variants - Background */
-.e-5c75a80e > .holder[variant*="bg-1"] > .content
-{
-	background: var(--ot-bg-1);
-}
-
-.e-5c75a80e > .holder[variant*="bg-2"] > .content
-{
-	background: var(--ot-bg-2);
-}
-
-.e-5c75a80e > .holder[variant*="bg-3"] > .content
-{
-	background: var(--ot-bg-3);
-}
-
-.e-5c75a80e > .holder[variant*="bg-4"] > .content
-{
-	background: var(--ot-bg-4);
-}
-
-/* Variants - Border */
-.e-5c75a80e > .holder[variant*="border"] > .content
-{
-	border: 1px solid var(--ot-bg-2-border);
-}
-
-.e-5c75a80e > .holder[variant*="bg-1"][variant*="border"] > .content
-{
-	border-color: var(--ot-bg-1-border);
-}
-
-.e-5c75a80e > .holder[variant*="bg-2"][variant*="border"] > .content
-{
-	border-color: var(--ot-bg-2-border);
-}
-
-.e-5c75a80e > .holder[variant*="bg-3"][variant*="border"] > .content
-{
-	border-color: var(--ot-bg-3-border);
-}
-
-.e-5c75a80e > .holder[variant*="bg-4"][variant*="border"] > .content
-{
-	border-color: var(--ot-bg-4-border);
-}
-
-/* Actions */
-.e-5c75a80e .actions
-{
-	display: flex;
-	justify-content: flex-end;
-	padding: var(--ot-spacing-m);
-	border-top: 1px solid var(--ot-bg-2-border);
-}
-
-/* Sizes */
-.e-5c75a80e > .holder[variant*="size-s"] > .header > h3
-{
-	font-size: 16px;
-}
-
-.e-5c75a80e > .holder[variant*="size-s"] > .header > p
-{
-	font-size: var(--ot-size-s);
-}
-
-.e-5c75a80e > .holder[variant*="size-l"] > .header > h3
-{
-	font-size: 22px;
-}
-
-.e-5c75a80e > .holder[variant*="size-l"] > .header > p
-{
-	font-size: var(--ot-size-l);
-}