@onetype/framework 2.0.26 → 2.0.27

package/lib/items/elements/{global → navigation}/tabs/tabs.css

@@ -1,9 +1,9 @@
-.e-4a1d3792
+.e-1a8b6ac1
 {
 	display: flex;
 }
 
-.e-4a1d3792 > .holder
+.e-1a8b6ac1 > .holder
 {
 	display: flex;
 	align-items: center;
@@ -14,7 +14,7 @@
 	padding: 4px;
 }
 
-.e-4a1d3792 > .holder > .tab
+.e-1a8b6ac1 > .holder > .tab
 {
 	display: flex;
 	align-items: center;
@@ -30,18 +30,18 @@
 	transition: all 0.2s ease;
 }
 
-.e-4a1d3792 > .holder > .tab > i
+.e-1a8b6ac1 > .holder > .tab > i
 {
 	font-size: 16px;
 }
 
-.e-4a1d3792 > .holder > .tab.active
+.e-1a8b6ac1 > .holder > .tab.active
 {
 	background: var(--ot-bg-3);
 	color: var(--ot-text-1);
 }
 
-.e-4a1d3792 > .holder > .tab:hover:not(.active)
+.e-1a8b6ac1 > .holder > .tab:hover:not(.active)
 {
 	color: var(--ot-text-1);
 }

package/lib/items/elements/{global → navigation}/tabs/tabs.js

@@ -1,11 +1,11 @@
 onetype.AddonReady('elements', (elements) =>
 {
 	elements.ItemAdd({
-		id: 'global-tabs',
+		id: 'navigation-tabs',
 		icon: 'tab',
 		name: 'Tabs',
 		description: 'Pill-style tab switcher with optional icons.',
-		category: 'Global',
+		category: 'Navigation',
 		author: 'OneType',
 		config: {
 			active: {

package/lib/items/elements/sections/pricing/pricing.css

@@ -0,0 +1,148 @@
+.e-21efbac3
+{
+	display: flex;
+	width: 100%;
+}
+
+.e-21efbac3 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	padding: var(--ot-spacing-l) var(--ot-spacing-m);
+	gap: var(--ot-spacing-l);
+}
+
+.e-21efbac3 > .holder.highlighted
+{
+	border-top: 2px solid var(--ot-brand);
+}
+
+/* Header */
+
+.e-21efbac3 > .holder > .header
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+}
+
+.e-21efbac3 > .holder > .header > .badge
+{
+	display: inline-flex;
+	align-self: flex-start;
+	padding: 3px 10px;
+	border-radius: 100px;
+	background: color-mix(in srgb, var(--ot-brand) 12%, transparent);
+	font-size: 11px;
+	font-weight: 600;
+	color: var(--ot-brand);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.e-21efbac3 > .holder > .header > .name
+{
+	font-size: 20px;
+	font-weight: 700;
+	color: var(--ot-text-1);
+	margin: 0;
+}
+
+.e-21efbac3 > .holder > .header > .description
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+	line-height: 1.5;
+	margin: 0;
+}
+
+.e-21efbac3 > .holder > .header > .price
+{
+	display: flex;
+	align-items: baseline;
+	gap: 2px;
+	margin-top: var(--ot-spacing-x);
+}
+
+.e-21efbac3 > .holder > .header > .price > .currency
+{
+	font-size: 20px;
+	font-weight: 700;
+	color: var(--ot-text-1);
+}
+
+.e-21efbac3 > .holder > .header > .price > .amount
+{
+	font-size: 40px;
+	font-weight: 800;
+	color: var(--ot-text-1);
+	line-height: 1;
+}
+
+.e-21efbac3 > .holder > .header > .price > .period
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+	margin-left: 4px;
+}
+
+.e-21efbac3 > .holder > .header > .yearly
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+}
+
+/* Features */
+
+.e-21efbac3 > .holder > .features
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+	flex: 1;
+	padding-top: var(--ot-spacing-l);
+	border-top: 1px solid var(--ot-bg-2-border);
+}
+
+.e-21efbac3 > .holder > .features > .feature
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+}
+
+.e-21efbac3 > .holder > .features > .feature > .icon
+{
+	font-size: 18px;
+	flex-shrink: 0;
+	color: var(--ot-green);
+}
+
+.e-21efbac3 > .holder > .features > .feature > .text
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+}
+
+/* Disabled */
+
+.e-21efbac3 > .holder > .features > .feature.disabled > .icon
+{
+	color: var(--ot-text-2);
+	opacity: 0.4;
+}
+
+.e-21efbac3 > .holder > .features > .feature.disabled > .text
+{
+	color: var(--ot-text-2);
+	opacity: 0.4;
+}
+
+/* Action */
+
+.e-21efbac3 > .holder > .action
+{
+	display: flex;
+	margin-top: auto;
+}

package/lib/items/elements/sections/pricing/pricing.js

@@ -0,0 +1,76 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'sections-pricing',
+		icon: 'payments',
+		name: 'Pricing Card',
+		description: 'Pricing plan card with name, price, features list, and CTA button.',
+		category: 'Section',
+		author: 'OneType',
+		config: {
+			name: {
+				type: 'string',
+				value: 'Plan'
+			},
+			price: {
+				type: 'number',
+				value: 0
+			},
+			period: {
+				type: 'string',
+				value: '/mo'
+			},
+			yearly: {
+				type: 'string',
+				value: ''
+			},
+			badge: {
+				type: 'string',
+				value: ''
+			},
+			description: {
+				type: 'string',
+				value: ''
+			},
+			features: {
+				type: 'array',
+				value: []
+			},
+			highlighted: {
+				type: 'boolean',
+				value: false
+			},
+			href: {
+				type: 'string',
+				value: ''
+			}
+		},
+		render: function()
+		{
+			return `
+				<div :class="'holder' + (highlighted ? ' highlighted' : '')">
+					<div class="header">
+						<span ot-if="badge" class="badge">{{ badge }}</span>
+						<h3 class="name">{{ name }}</h3>
+						<p ot-if="description" class="description">{{ description }}</p>
+						<div class="price">
+							<span class="currency">$</span>
+							<span class="amount">{{ price }}</span>
+							<span class="period">{{ period }}</span>
+						</div>
+						<span ot-if="yearly" class="yearly">{{ yearly }}</span>
+					</div>
+					<div class="features">
+						<div ot-for="feature in features" :class="'feature' + (feature.included ? '' : ' disabled')">
+							<i class="icon">{{ feature.included ? 'check_circle' : 'remove' }}</i>
+							<span class="text">{{ feature.text }}</span>
+						</div>
+					</div>
+					<div class="action">
+						<e-form-button text="Get Started" icon="arrow_forward" :href="href" :variant="highlighted ? ['brand', 'size-m', 'full'] : ['bg-2', 'border', 'size-m', 'full']"></e-form-button>
+					</div>
+				</div>
+			`;
+		}
+	});
+});

package/lib/items/transforms/accordion/accordion.js

@@ -1,174 +1,172 @@
-onetype.AddonReady('transforms', (transforms) =>
-{
-    transforms.ItemAdd({
-        id: 'accordion',
-        icon: 'expand_more',
-        name: 'Accordion',
-        description: 'Collapsible accordion component with multiple items. Supports single or multiple open panels with smooth animations.',
-        config: {
-            'multiple': ['boolean', false],
-            'first-open': ['boolean', true],
-            'animation-duration': ['number', 300],
-            'icon': ['boolean', true],
-            'icon-position': ['string', 'right']
-        },
-        code: function(data, item, compile, node, identifier)
+transforms.ItemAdd({
+    id: 'accordion',
+    icon: 'expand_more',
+    name: 'Accordion',
+    description: 'Collapsible accordion component with multiple items. Supports single or multiple open panels with smooth animations.',
+    config: {
+        'multiple': ['boolean', false],
+        'first-open': ['boolean', true],
+        'animation-duration': ['number', 300],
+        'icon': ['boolean', true],
+        'icon-position': ['string', 'right']
+    },
+    code: function(data, node, transformer)
+    {
+        const id = 'accordion-' + onetype.Generate(8);
+
+        this.setup = () =>
         {
-            this.setup = () =>
-            {
-                node.classList.add('accordion');
-                node.classList.add('accordion-' + identifier);
+            node.classList.add('accordion');
+            node.classList.add(id);
+
+            const children = Array.from(node.children);
+            const items = [];
 
-                const children = Array.from(node.children);
-                const items = [];
+            for(let i = 0; i < children.length; i += 2)
+            {
+                const header = children[i];
+                const content = children[i + 1];
 
-                for(let i = 0; i < children.length; i += 2)
+                if(!header || !content)
                 {
-                    const header = children[i];
-                    const content = children[i + 1];
+                    continue;
+                }
 
-                    if(!header || !content)
-                    {
-                        continue;
-                    }
+                const wrapper = document.createElement('div');
+                const headerWrapper = document.createElement('div');
+                const contentWrapper = document.createElement('div');
 
-                    const wrapper = document.createElement('div');
-                    const headerWrapper = document.createElement('div');
-                    const contentWrapper = document.createElement('div');
+                wrapper.className = 'accordion-item';
+                headerWrapper.className = 'accordion-header';
+                contentWrapper.className = 'accordion-content';
 
-                    wrapper.className = 'accordion-item';
-                    headerWrapper.className = 'accordion-header';
-                    contentWrapper.className = 'accordion-content';
+                headerWrapper.appendChild(header);
+                contentWrapper.appendChild(content);
 
-                    headerWrapper.appendChild(header);
-                    contentWrapper.appendChild(content);
+                wrapper.appendChild(headerWrapper);
+                wrapper.appendChild(contentWrapper);
 
-                    wrapper.appendChild(headerWrapper);
-                    wrapper.appendChild(contentWrapper);
+                items.push(wrapper);
+            }
 
-                    items.push(wrapper);
-                }
+            node.innerHTML = '';
+            items.forEach(item => node.appendChild(item));
+        };
 
-                node.innerHTML = '';
-                items.forEach(item => node.appendChild(item));
-            };
+        this.icons = () =>
+        {
+            if(!data['icon'])
+            {
+                return;
+            }
+
+            const headers = node.querySelectorAll('.accordion-header');
 
-            this.icons = () =>
+            headers.forEach(header =>
             {
-                if(!data['icon'].value)
+                const icon = document.createElement('span');
+                icon.className = 'accordion-icon';
+                icon.innerHTML = '▼';
+
+                if(data['icon-position'] === 'left')
                 {
-                    return;
+                    header.insertBefore(icon, header.firstChild);
                 }
+                else
+                {
+                    header.appendChild(icon);
+                }
+            });
+        };
+
+        this.styles = () =>
+        {
+            const duration = data['animation-duration'];
+            const style = document.createElement('style');
+
+            style.textContent = `
+                .${id} .accordion-content {
+                    max-height: 0;
+                    overflow: hidden;
+                    transition: max-height ${duration}ms ease-in-out;
+                }
+                .${id} .accordion-item.active .accordion-content {
+                    max-height: 2000px;
+                }
+                .${id} .accordion-header {
+                    cursor: pointer;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                .${id} .accordion-icon {
+                    transition: transform ${duration}ms ease;
+                    display: inline-block;
+                }
+                .${id} .accordion-item.active .accordion-icon {
+                    transform: rotate(180deg);
+                }
+            `;
 
-                const headers = node.querySelectorAll('.accordion-header');
+            document.head.appendChild(style);
+        };
 
-                headers.forEach(header =>
-                {
-                    const icon = document.createElement('span');
-                    icon.className = 'accordion-icon';
-                    icon.innerHTML = '▼';
+        this.toggle = (item) =>
+        {
+            const isActive = item.classList.contains('active');
 
-                    if(data['icon-position'].value === 'left')
-                    {
-                        header.insertBefore(icon, header.firstChild);
-                    }
-                    else
+            if(!data['multiple'])
+            {
+                const items = node.querySelectorAll('.accordion-item');
+                items.forEach(otherItem =>
+                {
+                    if(otherItem !== item)
                     {
-                        header.appendChild(icon);
+                        otherItem.classList.remove('active');
                     }
                 });
-            };
+            }
 
-            this.styles = () =>
+            if(isActive)
             {
-                const duration = data['animation-duration'].value;
-                const style = document.createElement('style');
-
-                style.textContent = `
-                    .accordion-${identifier} .accordion-content {
-                        max-height: 0;
-                        overflow: hidden;
-                        transition: max-height ${duration}ms ease-in-out;
-                    }
-                    .accordion-${identifier} .accordion-item.active .accordion-content {
-                        max-height: 2000px;
-                    }
-                    .accordion-${identifier} .accordion-header {
-                        cursor: pointer;
-                        display: flex;
-                        justify-content: space-between;
-                        align-items: center;
-                    }
-                    .accordion-${identifier} .accordion-icon {
-                        transition: transform ${duration}ms ease;
-                        display: inline-block;
-                    }
-                    .accordion-${identifier} .accordion-item.active .accordion-icon {
-                        transform: rotate(180deg);
-                    }
-                `;
-
-                document.head.appendChild(style);
-            };
-
-            this.toggle = (item) =>
+                item.classList.remove('active');
+            }
+            else
             {
-                const isActive = item.classList.contains('active');
-                const content = item.querySelector('.accordion-content');
-
-                if(!data['multiple'].value)
-                {
-                    const items = node.querySelectorAll('.accordion-item');
-                    items.forEach(otherItem =>
-                    {
-                        if(otherItem !== item)
-                        {
-                            otherItem.classList.remove('active');
-                        }
-                    });
-                }
+                item.classList.add('active');
+            }
+        };
 
-                if(isActive)
-                {
-                    item.classList.remove('active');
-                }
-                else
-                {
-                    item.classList.add('active');
-                }
-            };
+        this.events = () =>
+        {
+            const headers = node.querySelectorAll('.accordion-header');
 
-            this.events = () =>
+            headers.forEach(header =>
             {
-                const headers = node.querySelectorAll('.accordion-header');
-
-                headers.forEach(header =>
+                header.addEventListener('click', () =>
                 {
-                    header.addEventListener('click', () =>
-                    {
-                        const item = header.parentElement;
-                        this.toggle(item);
-                    });
+                    const item = header.parentElement;
+                    this.toggle(item);
                 });
-            };
+            });
+        };
 
-            this.initialize = () =>
+        this.initialize = () =>
+        {
+            if(data['first-open'])
             {
-                if(data['first-open'].value)
+                const firstItem = node.querySelector('.accordion-item');
+                if(firstItem)
                 {
-                    const firstItem = node.querySelector('.accordion-item');
-                    if(firstItem)
-                    {
-                        firstItem.classList.add('active');
-                    }
+                    firstItem.classList.add('active');
                 }
-            };
-
-            this.setup();
-            this.icons();
-            this.styles();
-            this.events();
-            this.initialize();
-        }
-    });
-});
+            }
+        };
+
+        this.setup();
+        this.icons();
+        this.styles();
+        this.events();
+        this.initialize();
+    }
+});