From 969c1435df1baaab0228f8c8d93a5f8cca7faef3 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Thu, 20 Jun 2024 19:58:38 +0200
Subject: [PATCH 01/23] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20Bump=20package=20ver?=
 =?UTF-8?q?sion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9ab943e..551314f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.0.8",
+    "version": "0.0.9",
     "scripts": {
         "dev": "astro dev",
         "build": "astro check && astro build",

From 6f2a834a8a51e1ca42dfee4e0572d90e25161688 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Thu, 20 Jun 2024 22:46:22 +0200
Subject: [PATCH 02/23] =?UTF-8?q?=F0=9F=94=A8=20Improve=20build=20types=20?=
 =?UTF-8?q?script?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scripts/buildTypes.js | 53 +++++++++++++++++++++++++++++++++++--------
 1 file changed, 43 insertions(+), 10 deletions(-)

diff --git a/scripts/buildTypes.js b/scripts/buildTypes.js
index 3f1174b..abeb697 100644
--- a/scripts/buildTypes.js
+++ b/scripts/buildTypes.js
@@ -1,19 +1,52 @@
 import fs from 'fs'
 
+const format = template => template.trim().replace(new RegExp('^[ \\t]{12}', 'gm'), '')
+
 const buildTypes = type => {
     const components = fs.readdirSync('src/components')
 
-    return `
-declare module 'webcoreui/${type}' {
-    ${components.map(component => {
-        return `import type { ${component}Props } from './components/${component}/${component.toLowerCase()}'`
-    }).join('\n\t')}
+    if (type === 'astro') {
+        return format(`
+            ${components.map(component => {
+                return `import type { ${component}Props } from './components/${component}/${component.toLowerCase()}'`
+            }).join('\n')}
+    
+            declare module 'webcoreui/${type}' {
+                ${components.map(component => {
+                    return `export function ${component}(_props: ${component}Props): any`
+                }).join('\n\t')}
+            }
+        `)
+    }
 
-    ${components.map(component => {
-        return `export function ${component}(_props: ${component}Props): any`
-    }).join('\n\t')}
-}
-    `
+    if (type === 'svelte') {
+        return format(`
+            ${components.map(component => {
+                return `import type { ${component}Props } from './components/${component}/${component.toLowerCase()}'`
+            }).join('\n')}
+    
+            declare module 'webcoreui/${type}' {
+                ${components.map(component => {
+                    return `export function ${component}(_props: ${component}Props): any`
+                }).join('\n\t')}
+            }
+        `)
+    }
+
+    if (type === 'react') {
+        return format(`
+            import { FC } from 'react'
+            ${components.map(component => {
+                return `import type { ${component}Props } from './components/${component}/${component.toLowerCase()}'`
+            }).join('\n')}
+
+            declare module 'webcoreui/${type}' {
+                ${components.map(component => {
+                    return `export const ${component}: FC<${component}Props>`
+                }).join('\n\t')}
+            }
+        `)
+    }
 }
 
 export default buildTypes

From dcd164579f5f7a464214f3e18e718d8482e43bdc Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Thu, 20 Jun 2024 22:57:56 +0200
Subject: [PATCH 03/23] =?UTF-8?q?=F0=9F=90=9B=20Fix=20React=20bugs=20with?=
 =?UTF-8?q?=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Avatar/Avatar.tsx     | 1 +
 src/components/Checkbox/Checkbox.tsx | 2 +-
 src/components/Radio/Radio.tsx       | 2 +-
 src/components/Switch/Switch.tsx     | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index 74e5ed9..9a08a40 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -33,6 +33,7 @@ const Avatar = ({
         >
             {img.map((img, index) => (
                 <img
+                    key={index}
                     src={img}
                     alt={Array.isArray(alt) ? alt[index] : alt}
                     width={Array.isArray(size) ? size[index] : size}
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 55d80d9..7497a2d 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -41,7 +41,7 @@ const Checkbox = ({
             >
                 <input
                     type="checkbox"
-                    checked={checked}
+                    defaultChecked={checked}
                     disabled={disabled}
                     onClick={onClick}
                 />
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index bdf88e0..9d30c4e 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -46,7 +46,7 @@ const Radio = ({
                             type="radio"
                             name={name}
                             value={item.value}
-                            checked={item.selected}
+                            defaultChecked={item.selected}
                             disabled={item.disabled}
                             onChange={onChange}
                         />
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index 791d591..b843b69 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -36,7 +36,7 @@ const Switch = ({
         <label className={classes} style={styles || null}>
             <input
                 type="checkbox"
-                checked={toggled}
+                defaultChecked={toggled}
                 disabled={disabled}
                 onClick={onClick}
             />

From dc0d1dd6d108c87d0779f84b9f10aced3840452b Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Fri, 21 Jun 2024 12:55:41 +0200
Subject: [PATCH 04/23] =?UTF-8?q?=E2=9C=A8=20Add=20Tabs=20component=20for?=
 =?UTF-8?q?=20Astro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button/button.scss |   1 -
 src/components/Button/button.ts   |   1 +
 src/components/Tabs/Tabs.astro    |  72 ++++++++++++
 src/components/Tabs/Tabs.svelte   |  11 ++
 src/components/Tabs/Tabs.tsx      |  17 +++
 src/components/Tabs/tabs.scss     | 120 +++++++++++++++++++
 src/components/Tabs/tabs.ts       |  12 ++
 src/pages/index.astro             |  18 ++-
 src/pages/tabs.astro              | 185 ++++++++++++++++++++++++++++++
 src/scss/resets.scss              |   4 +
 10 files changed, 439 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Tabs/Tabs.astro
 create mode 100644 src/components/Tabs/Tabs.svelte
 create mode 100644 src/components/Tabs/Tabs.tsx
 create mode 100644 src/components/Tabs/tabs.scss
 create mode 100644 src/components/Tabs/tabs.ts
 create mode 100644 src/pages/tabs.astro

diff --git a/src/components/Button/button.scss b/src/components/Button/button.scss
index e8a8a9e..83f5380 100644
--- a/src/components/Button/button.scss
+++ b/src/components/Button/button.scss
@@ -9,7 +9,6 @@
     align-items: center;
     gap: 5px;
     font-size: 16px;
-    font-family: Regular;
     cursor: pointer;
     border: 0;
     background: #FFF;
diff --git a/src/components/Button/button.ts b/src/components/Button/button.ts
index 9b9fb42..c22ebd7 100644
--- a/src/components/Button/button.ts
+++ b/src/components/Button/button.ts
@@ -10,5 +10,6 @@ export type ButtonProps = {
     bold?: boolean
     href?: string
     target?: string
+    disabled?: boolean
     onClick?: () => any
 }
diff --git a/src/components/Tabs/Tabs.astro b/src/components/Tabs/Tabs.astro
new file mode 100644
index 0000000..46ef4c0
--- /dev/null
+++ b/src/components/Tabs/Tabs.astro
@@ -0,0 +1,72 @@
+---
+import type { TabsProps } from './tabs'
+import './tabs.scss'
+
+interface Props extends TabsProps {}
+
+const {
+    items,
+    theme,
+    vertical,
+    even,
+    className
+} = Astro.props
+
+const classes = [
+    'w-tabs',
+    theme && theme,
+    vertical && 'vertical',
+    even && 'even',
+    className
+]
+---
+
+<section class:list={classes} data-id="w-tabs">
+    <div class="tabs">
+        {items.map(item => (
+            <button
+                data-value={item.value}
+                class:list={[item.active && 'active']}
+                disabled={item.disabled}
+            >
+                <Fragment set:html={item.label} />
+            </button>
+        ))}
+    </div>
+    <div class="tab-content">
+        <slot />
+    </div>
+</section>
+
+<script>
+    const tabs = document.querySelectorAll('[data-id="w-tabs"]')
+
+    Array.from(tabs).forEach(element => {
+        element.addEventListener('click', event => {
+            const target = event.target as HTMLDivElement
+
+            if (target.dataset.value) {
+                const tabContent = target.parentElement?.nextElementSibling as HTMLDivElement
+
+                Array.from(tabContent.children)
+                    .forEach((element: any) => {
+                        if (element.dataset.tab === target.dataset.value) {
+                            element.dataset.active = true
+                        } else {
+                            element.dataset.active = false
+                        }
+                })
+
+                const tabs = target.parentElement?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>
+
+                Array.from(tabs).forEach((tab: any) => {
+                    tab.classList.remove('active')
+
+                    if (tab.dataset.value === target.dataset.value) {
+                        tab.classList.add('active')
+                    }
+                })
+            }
+        })
+    })
+</script>
diff --git a/src/components/Tabs/Tabs.svelte b/src/components/Tabs/Tabs.svelte
new file mode 100644
index 0000000..f17a6f2
--- /dev/null
+++ b/src/components/Tabs/Tabs.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { TabsProps } from './tabs'
+    import './tabs.scss'
+
+    export let className: TabsProps['className'] = ''
+
+    const classes = [
+        'w-tabs',
+        className
+    ].filter(Boolean).join(' ')
+</script>
\ No newline at end of file
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
new file mode 100644
index 0000000..66828bf
--- /dev/null
+++ b/src/components/Tabs/Tabs.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import type { TabsProps } from './tabs'
+
+import './tabs.scss'
+
+const Tabs = ({
+    className
+}: TabsProps) => {
+    const classes = [
+        'w-tabs',
+        className
+    ].filter(Boolean).join(' ')
+
+    return <div>Tabs</div>
+}
+
+export default Tabs
\ No newline at end of file
diff --git a/src/components/Tabs/tabs.scss b/src/components/Tabs/tabs.scss
new file mode 100644
index 0000000..e9cf94c
--- /dev/null
+++ b/src/components/Tabs/tabs.scss
@@ -0,0 +1,120 @@
+@import '../../scss/config.scss';
+
+.w-tabs {
+
+    &.boxed .tabs,
+    &.outline .tabs {
+        background: #252525;
+        border-radius: 5px;
+        padding: 5px;
+        width: fit-content;
+
+        button {
+            @include Transition();
+            border-radius: 5px;
+            padding: 10px;
+
+            &.active {
+                border: 0;
+                background: #000;
+                padding-bottom: 10px;
+            }
+        }
+    }
+
+    &.outline .tabs {
+        background: transparent;
+        border: 1px solid #252525;
+
+        button {
+            margin-bottom: 0;
+
+            &.active {
+                background: #252525;
+            }
+        }
+    }
+
+    &.even .tabs {
+        width: auto;
+
+        button {
+            flex: 1;
+            justify-content: center;
+        }
+    }
+
+    &.vertical {
+        display: flex;
+        gap: 20px;
+
+        &.boxed .tabs button,
+        &.outline .tabs button {
+            border-bottom: 0;
+        }
+        
+        .tabs {
+            flex-direction: column;
+            gap: 5px;
+            margin-bottom: 0;
+            
+            button {
+                padding: 10px;
+                border-bottom: 2px solid #252525;
+
+                &.active {
+                    padding-bottom: 10px;
+                }
+            }
+        }
+    }
+
+    .tabs {
+        border-bottom: 2px solid #252525;
+        margin-bottom: 20px;
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+
+        button {
+            @include Transition(color);
+            background: transparent;
+            cursor: pointer;
+            color: #FFF;
+            border: 0;
+            font-size: 16px;
+            padding: 0;
+            margin-bottom: -2px;
+            padding: 15px 15px;
+            color: #BBB;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+
+            svg {
+                pointer-events: none;
+                width: 20px;
+                height: 20px;
+            }
+
+            &[disabled] {
+                color: #555;
+                cursor: no-drop;
+            }
+            
+            &.active {
+                color: #FFF;
+                border-bottom: 2px solid #FFF;
+                padding-bottom: 13px;
+            }
+        }
+    }
+
+    [data-tab] {
+        display: none;
+
+        &[data-active="true"] {
+            display: block;
+        }
+    }
+}
diff --git a/src/components/Tabs/tabs.ts b/src/components/Tabs/tabs.ts
new file mode 100644
index 0000000..cb2d44d
--- /dev/null
+++ b/src/components/Tabs/tabs.ts
@@ -0,0 +1,12 @@
+export type TabsProps = {
+    items: {
+        label: string
+        value: string
+        active?: boolean
+        disabled?: boolean
+    }[]
+    theme?: 'boxed' | 'outline' | null
+    vertical?: boolean
+    even?: boolean
+    className?: string
+}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index dd3b222..60d100c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -7,11 +7,24 @@ import Alert from '@components/Alert/Alert.astro'
 import Avatar from '@components/Avatar/Avatar.astro'
 import Badge from '@components/Badge/Badge.astro'
 import Button from '@components/Button/Button.astro'
+import Checkbox from '@components/Checkbox/Checkbox.astro'
 import Icon from '@components/Icon/Icon.astro'
 import Radio from '@components/Radio/Radio.astro'
 import Rating from '@components/Rating/Rating.astro'
 import Switch from '@components/Switch/Switch.astro'
-import Checkbox from '@components/Checkbox/Checkbox.astro'
+import Tabs from '@components/Tabs/Tabs.astro'
+
+import infoIcon from '../icons/info.svg?raw'
+import gitHubIcon from '../icons/github.svg?raw'
+
+const tabItems = [{
+    label: `${infoIcon} Intro`,
+    value: 'intro',
+    active: true
+}, {
+    label: `${gitHubIcon} Setup`,
+    value: 'setup'
+}]
 ---
 
 <Layout>
@@ -121,6 +134,9 @@ import Checkbox from '@components/Checkbox/Checkbox.astro'
         <CardWrapper title="Switch" href="/switch">
             <Switch toggled={true} />
         </CardWrapper>
+        <CardWrapper title="Tabs" href="/tabs">
+            <Tabs items={tabItems} theme="boxed" />
+        </CardWrapper>
     </div>
 </Layout>
 
diff --git a/src/pages/tabs.astro b/src/pages/tabs.astro
new file mode 100644
index 0000000..88dafda
--- /dev/null
+++ b/src/pages/tabs.astro
@@ -0,0 +1,185 @@
+---
+import Layout from '@static/Layout.astro'
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+
+import AstroTabs from '@components/Tabs/Tabs.astro'
+import SvelteTabs from '@components/Tabs/Tabs.svelte'
+import ReactTabs from '@components/Tabs/Tabs.tsx'
+
+import infoIcon from '../icons/info.svg?raw'
+import gitHubIcon from '../icons/github.svg?raw'
+import successIcon from '../icons/circle-check.svg?raw'
+
+const sections = [
+    {
+        title: 'Astro tabs',
+        component: AstroTabs
+    },
+    {
+        title: 'Svelte tabs',
+        component: SvelteTabs
+    },
+    {
+        title: 'React tabs',
+        component: ReactTabs
+    }
+]
+
+const items = [{
+    label: 'Introduction',
+    value: 'intro',
+    active: true
+}, {
+    label: 'Setup',
+    value: 'setup'
+}, {
+    label: 'Conclusion',
+    value: 'conclusion'
+}]
+
+const tabsWithIcons = [
+    {...items[0], label: `${infoIcon} Introduction` },
+    {...items[1], label: `${gitHubIcon} Setup` },
+    {...items[2], label: `${successIcon} Conclusion`, disabled: true }
+]
+const inactiveTabs = items.map(item => ({...item, active: false}))
+const disabledTabs = [
+    {...items[0]},
+    {...items[1]},
+    {...items[2], disabled: true }
+]
+
+const overflowTabs = Array(10).fill({
+    label: '',
+    value: 0,
+}).map((_, index) => ({
+    label: `Tab ${index + 1}`,
+    value: `tab-${index + 1}`
+}))
+---
+
+<Layout>
+    <h1>Tabs</h1>
+    <div class="grid md-2 lg-3">
+        <ComponentWrapper type="Astro">
+            <AstroTabs items={items}>
+                <div data-tab="intro" data-active="true">Intro tab</div>
+                <div data-tab="setup">Setup tab</div>
+                <div data-tab="conclusion">Conclusion tab</div>
+            </AstroTabs>
+        </ComponentWrapper>
+
+        <ComponentWrapper type="Svelte">
+            <SvelteTabs items={items}>
+                <div data-tab="intro" data-active="true">Intro tab</div>
+                <div data-tab="setup">Setup tab</div>
+                <div data-tab="conclusion">Conclusion tab</div>
+            </SvelteTabs>
+        </ComponentWrapper>
+
+        <ComponentWrapper type="React">
+            <ReactTabs items={items}>
+                <div data-tab="intro" data-active="true">Intro tab</div>
+                <div data-tab="setup">Setup tab</div>
+                <div data-tab="conclusion">Conclusion tab</div>
+            </ReactTabs>
+        </ComponentWrapper>
+    </div>
+
+    {sections.map(section => (
+        <h1>{section.title}</h1>
+        <div class="grid md-2">
+            <ComponentWrapper title="Default">
+                <section.component items={items}>
+                    <div data-tab="intro" data-active="true">Intro tab</div>
+                    <div data-tab="setup">Setup tab</div>
+                    <div data-tab="conclusion">Conclusion tab</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Inactive tabs">
+                <section.component items={inactiveTabs}>
+                    <div data-tab="intro">Intro tab</div>
+                    <div data-tab="setup">Setup tab</div>
+                    <div data-tab="conclusion">Conclusion tab</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Disabled tab">
+                <section.component items={disabledTabs}>
+                    <div data-tab="intro" data-active="true">Intro tab</div>
+                    <div data-tab="setup">Setup tab</div>
+                    <div data-tab="conclusion">Conclusion tab</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Tabs with icons">
+                <section.component items={tabsWithIcons}>
+                    <div data-tab="intro" data-active="true">Intro tab</div>
+                    <div data-tab="setup">Setup tab</div>
+                    <div data-tab="conclusion">Conclusion tab</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Boxed tabs">
+                <section.component items={items} theme="boxed">
+                    <div data-tab="intro" data-active="true">Intro tab</div>
+                    <div data-tab="setup">Setup tab</div>
+                    <div data-tab="conclusion">Conclusion tab</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Boxed evenly with icons">
+                <section.component items={tabsWithIcons} theme="boxed" even={true}>
+                    <div data-tab="intro" data-active="true">Intro tab</div>
+                    <div data-tab="setup">Setup tab</div>
+                    <div data-tab="conclusion">Conclusion tab</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Outline tabs">
+                <section.component items={items} theme="outline">
+                    <div data-tab="intro" data-active="true">Intro tab</div>
+                    <div data-tab="setup">Setup tab</div>
+                    <div data-tab="conclusion">Conclusion tab</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Outline evenly with icons">
+                <section.component items={tabsWithIcons} theme="outline" even={true}>
+                    <div data-tab="intro" data-active="true">Intro tab</div>
+                    <div data-tab="setup">Setup tab</div>
+                    <div data-tab="conclusion">Conclusion tab</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Vertical tabs">
+                <section.component items={items} vertical={true}>
+                    <div data-tab="intro" data-active="true">Intro tab</div>
+                    <div data-tab="setup">Setup tab</div>
+                    <div data-tab="conclusion">Conclusion tab</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Vertical boxed with icons">
+                <section.component items={tabsWithIcons} vertical={true} theme="boxed">
+                    <div data-tab="intro" data-active="true">Intro tab</div>
+                    <div data-tab="setup">Setup tab</div>
+                    <div data-tab="conclusion">Conclusion tab</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Vertical outline with icons">
+                <section.component items={tabsWithIcons} vertical={true} theme="outline">
+                    <div data-tab="intro" data-active="true">Intro tab</div>
+                    <div data-tab="setup">Setup tab</div>
+                    <div data-tab="conclusion">Conclusion tab</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Overflown tabs">
+                <section.component items={overflowTabs} />
+            </ComponentWrapper>
+        </div>
+    ))}
+</Layout>
diff --git a/src/scss/resets.scss b/src/scss/resets.scss
index 4f81c26..63ebb3a 100644
--- a/src/scss/resets.scss
+++ b/src/scss/resets.scss
@@ -41,4 +41,8 @@
         color: #FFF;
         text-decoration: none;
     }
+
+    button {
+        font-family: Regular;
+    }
 }    

From a269841bbf357e83de7728ad120da3d8b8573529 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Fri, 21 Jun 2024 17:26:51 +0200
Subject: [PATCH 05/23] =?UTF-8?q?=E2=9C=A8=20Add=20Tabs=20component=20for?=
 =?UTF-8?q?=20Svelte=20+=20React?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                              |  1 +
 src/components/Tabs/Tabs.svelte        | 43 ++++++++++++++++-
 src/components/Tabs/Tabs.tsx           | 64 ++++++++++++++++++++++++--
 src/pages/tabs.astro                   |  9 +++-
 src/playground/ReactPlayground.tsx     | 29 ++++++++++++
 src/playground/SveltePlayground.svelte | 29 ++++++++++++
 src/static/Layout.astro                |  4 ++
 7 files changed, 171 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 8a8a2b9..4e9be4f 100644
--- a/README.md
+++ b/README.md
@@ -155,3 +155,4 @@ import { Accordion } from 'webcoreui/react'
 - [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
 - [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
 - [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)
+- [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs)
diff --git a/src/components/Tabs/Tabs.svelte b/src/components/Tabs/Tabs.svelte
index f17a6f2..e83a0e9 100644
--- a/src/components/Tabs/Tabs.svelte
+++ b/src/components/Tabs/Tabs.svelte
@@ -2,10 +2,51 @@
     import type { TabsProps } from './tabs'
     import './tabs.scss'
 
+    export let items: TabsProps['items'] = []
+    export let theme: TabsProps['theme'] = null
+    export let vertical: TabsProps['vertical'] = false
+    export let even: TabsProps['even'] = false
     export let className: TabsProps['className'] = ''
 
+    let active = ''
+    let tabContainer: HTMLDivElement
+
     const classes = [
         'w-tabs',
+        theme && theme,
+        vertical && 'vertical',
+        even && 'even',
         className
     ].filter(Boolean).join(' ')
-</script>
\ No newline at end of file
+
+    const setTab = (tab: string) => {
+        const tabs = tabContainer.querySelectorAll('[data-tab]')
+
+        active = tab
+
+        Array.from(tabs).forEach((item: any) => {
+            item.dataset.active = false
+
+            if (item.dataset.tab === active) {
+                item.dataset.active = true
+            }
+        })
+    }
+</script>
+
+<section class={classes}>
+    <div class="tabs">
+        {#each items as item}
+            <button
+                class:active={active ? active === item.value : item.active}
+                disabled={item.disabled}
+                on:click={() => setTab(item.value)}
+            >
+                {@html item.label}
+            </button>
+        {/each}
+    </div>
+    <div class="tab-content" bind:this={tabContainer}>
+        <slot />
+    </div>
+</section>
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 66828bf..425c125 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -1,17 +1,71 @@
-import React from 'react'
+import React, { useState, useRef } from 'react'
 import type { TabsProps } from './tabs'
 
 import './tabs.scss'
 
+type ReactTabsProps = {
+    children: React.ReactNode
+} & TabsProps
+
 const Tabs = ({
-    className
-}: TabsProps) => {
+    items,
+    theme,
+    vertical,
+    even,
+    className,
+    children
+}: ReactTabsProps) => {
+    const tabContainer = useRef<HTMLDivElement>(null)
+    const [active, setActive] = useState('')
+
     const classes = [
         'w-tabs',
+        theme && theme,
+        vertical && 'vertical',
+        even && 'even',
         className
     ].filter(Boolean).join(' ')
 
-    return <div>Tabs</div>
+    const setTab = (tab: string) => {
+        const tabs = tabContainer.current!.querySelectorAll('[data-tab]')
+
+        Array.from(tabs).forEach((item: any) => {
+            item.dataset.active = false
+
+            if (item.dataset.tab === tab) {
+                item.dataset.active = true
+            }
+        })
+    
+        setActive(tab)
+    }
+
+    const isActive = (item: TabsProps['items'][0]) => {
+        if (!active) {
+            return item.active ? 'active' : undefined
+        }
+
+        return active === item.value ? 'active' : undefined
+    }
+
+    return (
+        <section className={classes}>
+            <div className="tabs">
+                {items.map((item, index) => (
+                    <button
+                        key={index}
+                        disabled={item.disabled}
+                        dangerouslySetInnerHTML={{ __html: item.label }}
+                        onClick={() => setTab(item.value)}
+                        className={isActive(item)}
+                    />
+                ))}
+            </div>
+            <div className="tab-content" ref={tabContainer}>
+                {children}
+            </div>
+        </section>
+    )
 }
 
-export default Tabs
\ No newline at end of file
+export default Tabs
diff --git a/src/pages/tabs.astro b/src/pages/tabs.astro
index 88dafda..bd88a10 100644
--- a/src/pages/tabs.astro
+++ b/src/pages/tabs.astro
@@ -17,10 +17,12 @@ const sections = [
     },
     {
         title: 'Svelte tabs',
+        subTitle: 'For interactive examples, visit <a href="/svelte">Svelte Playground</a>',
         component: SvelteTabs
     },
     {
         title: 'React tabs',
+        subTitle: 'For interactive examples, visit <a href="/react">React Playground</a>',
         component: ReactTabs
     }
 ]
@@ -70,7 +72,7 @@ const overflowTabs = Array(10).fill({
         </ComponentWrapper>
 
         <ComponentWrapper type="Svelte">
-            <SvelteTabs items={items}>
+            <SvelteTabs items={items} client:visible>
                 <div data-tab="intro" data-active="true">Intro tab</div>
                 <div data-tab="setup">Setup tab</div>
                 <div data-tab="conclusion">Conclusion tab</div>
@@ -78,7 +80,7 @@ const overflowTabs = Array(10).fill({
         </ComponentWrapper>
 
         <ComponentWrapper type="React">
-            <ReactTabs items={items}>
+            <ReactTabs items={items} client:visible>
                 <div data-tab="intro" data-active="true">Intro tab</div>
                 <div data-tab="setup">Setup tab</div>
                 <div data-tab="conclusion">Conclusion tab</div>
@@ -88,6 +90,9 @@ const overflowTabs = Array(10).fill({
 
     {sections.map(section => (
         <h1>{section.title}</h1>
+        <Fragment>
+            {section.subTitle && <h2 set:html={section.subTitle} />}
+        </Fragment>
         <div class="grid md-2">
             <ComponentWrapper title="Default">
                 <section.component items={items}>
diff --git a/src/playground/ReactPlayground.tsx b/src/playground/ReactPlayground.tsx
index 2dd9327..2901101 100644
--- a/src/playground/ReactPlayground.tsx
+++ b/src/playground/ReactPlayground.tsx
@@ -7,6 +7,19 @@ import Button from '@components/Button/Button.tsx'
 import Checkbox from '@components/Checkbox/Checkbox.tsx'
 import Radio from '@components/Radio/Radio.tsx'
 import Switch from '@components/Switch/Switch.tsx'
+import Tabs from '@components/Tabs/Tabs.tsx'
+
+const tabItems = [{
+    label: 'Introduction',
+    value: 'intro',
+    active: true
+}, {
+    label: 'Setup',
+    value: 'setup'
+}, {
+    label: 'Conclusion',
+    value: 'conclusion'
+}]
 
 const ReactPlayground = () => {
     return (
@@ -55,6 +68,22 @@ const ReactPlayground = () => {
                     onClick={e => console.log(`switched: ${e.target.checked}`)}
                 />
             </Card>
+
+            <Card title="Tabs">
+                <Tabs items={tabItems}>
+                    <div data-tab="intro" data-active="true">Intro tab</div>
+                    <div data-tab="setup">Setup tab</div>
+                    <div data-tab="conclusion">Conclusion tab</div>
+                </Tabs>
+            </Card>
+
+            <Card title="Tabs - boxed">
+                <Tabs items={tabItems} theme="boxed" even={true}>
+                    <div data-tab="intro" data-active="true">Intro tab</div>
+                    <div data-tab="setup">Setup tab</div>
+                    <div data-tab="conclusion">Conclusion tab</div>
+                </Tabs>
+            </Card>
         </div>
     )
     
diff --git a/src/playground/SveltePlayground.svelte b/src/playground/SveltePlayground.svelte
index 85cbce6..2589589 100644
--- a/src/playground/SveltePlayground.svelte
+++ b/src/playground/SveltePlayground.svelte
@@ -7,6 +7,19 @@
     import Checkbox from '@components/Checkbox/Checkbox.svelte'
     import Radio from '@components/Radio/Radio.svelte'
     import Switch from '@components/Switch/Switch.svelte'
+    import Tabs from '@components/Tabs/Tabs.svelte'
+
+    const tabItems = [{
+        label: 'Introduction',
+        value: 'intro',
+        active: true
+    }, {
+        label: 'Setup',
+        value: 'setup'
+    }, {
+        label: 'Conclusion',
+        value: 'conclusion'
+    }]
 </script>
 
 <div class="grid md-2 lg-3">
@@ -54,4 +67,20 @@
             onClick={e => console.log(`switched: ${e.target.checked}`)}
         />
     </Card>
+
+    <Card title="Tabs">
+        <Tabs items={tabItems}>
+            <div data-tab="intro" data-active="true">Intro tab</div>
+            <div data-tab="setup">Setup tab</div>
+            <div data-tab="conclusion">Conclusion tab</div>
+        </Tabs>
+    </Card>
+
+    <Card title="Tabs - boxed">
+        <Tabs items={tabItems} theme="boxed" even={true}>
+            <div data-tab="intro" data-active="true">Intro tab</div>
+            <div data-tab="setup">Setup tab</div>
+            <div data-tab="conclusion">Conclusion tab</div>
+        </Tabs>
+    </Card>
 </div>
diff --git a/src/static/Layout.astro b/src/static/Layout.astro
index 40d7c08..178dcd3 100644
--- a/src/static/Layout.astro
+++ b/src/static/Layout.astro
@@ -50,6 +50,10 @@
         line-height: 1.5;
         font-size: 24px;
         margin: 0 0 20px;
+
+        a {
+            text-decoration: underline;
+        }
     }
 
     .container {

From c3386263bd81ebec81972922522bc7a7929f59f8 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Fri, 21 Jun 2024 17:41:33 +0200
Subject: [PATCH 06/23] =?UTF-8?q?=F0=9F=97=83=EF=B8=8F=20Outsource=20mock?=
 =?UTF-8?q?=20data?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/data.js                            | 54 ++++++++++++++++++++++++++
 src/pages/accordion.astro              | 11 +-----
 src/pages/avatar.astro                 | 22 ++++-------
 src/pages/index.astro                  | 23 ++---------
 src/pages/tabs.astro                   | 54 +++++++-------------------
 src/playground/ReactPlayground.tsx     | 12 +-----
 src/playground/SveltePlayground.svelte | 12 +-----
 tsconfig.json                          |  3 +-
 8 files changed, 86 insertions(+), 105 deletions(-)
 create mode 100644 src/data.js

diff --git a/src/data.js b/src/data.js
new file mode 100644
index 0000000..0782bd0
--- /dev/null
+++ b/src/data.js
@@ -0,0 +1,54 @@
+import infoIcon from './icons/info.svg?raw'
+import gitHubIcon from './icons/github.svg?raw'
+import successIcon from './icons/circle-check.svg?raw'
+
+export const accordionItems = [{
+    title: 'Do you offer support?',
+    content: 'We provide 30 days of support.'
+}, {
+    title: 'Can I request changes?',
+    content: 'Yes!'
+}, {
+    title: 'Are there any refunds?',
+    content: 'Hopefully.'
+}]
+
+export const avatarGroup = [
+    "/img/avatar0.png",
+    "/img/avatar1.png",
+    "/img/avatar2.png",
+    "/img/avatar3.png",
+    "/img/avatar4.png"
+]
+
+export const tabItems = [{
+    label: 'Introduction',
+    value: 'intro',
+    active: true
+}, {
+    label: 'Setup',
+    value: 'setup'
+}, {
+    label: 'Conclusion',
+    value: 'conclusion'
+}]
+
+export const tabsWithIcons = [
+    {...tabItems[0], label: `${infoIcon} Introduction` },
+    {...tabItems[1], label: `${gitHubIcon} Setup` },
+    {...tabItems[2], label: `${successIcon} Conclusion`, disabled: true }
+]
+export const inactiveTabs = tabItems.map(item => ({...item, active: false}))
+export const disabledTabs = [
+    {...tabItems[0]},
+    {...tabItems[1]},
+    {...tabItems[2], disabled: true }
+]
+
+export const overflowTabs = Array(10).fill({
+    label: '',
+    value: 0,
+}).map((_, index) => ({
+    label: `Tab ${index + 1}`,
+    value: `tab-${index + 1}`
+}))
diff --git a/src/pages/accordion.astro b/src/pages/accordion.astro
index 43c0c9c..91d75ab 100644
--- a/src/pages/accordion.astro
+++ b/src/pages/accordion.astro
@@ -6,16 +6,7 @@ import AstroAccordion from '@components/Accordion/Accordion.astro'
 import SvelteAccordion from '@components/Accordion/Accordion.svelte'
 import ReactAccordion from '@components/Accordion/Accordion.tsx'
 
-const accordionItems = [{
-    title: 'Do you offer support?',
-    content: 'We provide 30 days of support.'
-}, {
-    title: 'Can I request customizations?',
-    content: 'Yes!'
-}, {
-    title: 'Are there any refunds?',
-    content: 'Hopefully.'
-}]
+import { accordionItems } from '@data'
 ---
 
 <Layout>
diff --git a/src/pages/avatar.astro b/src/pages/avatar.astro
index 8272c67..8564c39 100644
--- a/src/pages/avatar.astro
+++ b/src/pages/avatar.astro
@@ -6,6 +6,8 @@ import AstroAvatar from '@components/Avatar/Avatar.astro'
 import SvelteAvatar from '@components/Avatar/Avatar.svelte'
 import ReactAvatar from '@components/Avatar/Avatar.tsx'
 
+import { avatarGroup } from '@data'
+
 const sections = [
     {
         title: 'Astro avatars',
@@ -20,14 +22,6 @@ const sections = [
         component: ReactAvatar
     }
 ]
-
-const group = [
-    "/img/avatar0.png",
-    "/img/avatar1.png",
-    "/img/avatar2.png",
-    "/img/avatar3.png",
-    "/img/avatar4.png"
-]
 ---
 
 <Layout>
@@ -75,41 +69,41 @@ const group = [
             </ComponentWrapper>
 
             <ComponentWrapper title="Avatar group">
-                <section.component img={group} />
+                <section.component img={avatarGroup} />
             </ComponentWrapper>
 
             <ComponentWrapper title="Borderless avatars">
                 <section.component
                     borderless={true}
-                    img={group}
+                    img={avatarGroup}
                 />
             </ComponentWrapper>
 
             <ComponentWrapper title="Avatars in reverse order">
                 <section.component
                     reverse={true}
-                    img={group}
+                    img={avatarGroup}
                 />
             </ComponentWrapper>
 
             <ComponentWrapper title="Avatars with increasing sizes">
                 <section.component
                     size={[35, 40, 45, 50, 55]}
-                    img={group}
+                    img={avatarGroup}
                 />
             </ComponentWrapper>
 
             <ComponentWrapper title="Avatars with decreasing sizes">
                 <section.component
                     size={[55, 50, 45, 40, 35]}
-                    img={group}
+                    img={avatarGroup}
                 />
             </ComponentWrapper>
 
             <ComponentWrapper title="Avatars with varying sizes">
                 <section.component
                     size={[30, 40, 50, 40, 30]}
-                    img={group}
+                    img={avatarGroup}
                 />
             </ComponentWrapper>
         </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 60d100c..ccfb64b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -17,6 +17,8 @@ import Tabs from '@components/Tabs/Tabs.astro'
 import infoIcon from '../icons/info.svg?raw'
 import gitHubIcon from '../icons/github.svg?raw'
 
+import { accordionItems, avatarGroup } from '@data'
+
 const tabItems = [{
     label: `${infoIcon} Intro`,
     value: 'intro',
@@ -54,18 +56,7 @@ const tabItems = [{
     </div>
     <div class="grid md-2 lg-3">
         <CardWrapper title="Accordion" href="/accordion">
-            <Accordion
-                items={[{
-                    title: 'Do you offer support?',
-                    content: 'We provide 30 days of support.'
-                }, {
-                    title: 'Can I request changes?',
-                    content: 'Yes!'
-                }, {
-                    title: 'Are there any refunds?',
-                    content: 'Hopefully.'
-                }]}
-            />
+            <Accordion items={accordionItems} />
         </CardWrapper>
         <CardWrapper title="Alert" href="/alert">
             <Alert title="💡 Note">You can create alert boxes.</Alert>
@@ -73,13 +64,7 @@ const tabItems = [{
         <CardWrapper title="Avatar" href="/avatar">
             <Avatar
                 size={[30, 40, 50, 40, 30]}
-                img={[
-                    '/img/avatar0.png',
-                    '/img/avatar1.png',
-                    '/img/avatar2.png',
-                    '/img/avatar3.png',
-                    '/img/avatar4.png'
-                ]}
+                img={avatarGroup}
             />
         </CardWrapper>
         <CardWrapper title="Badge" href="/badge">
diff --git a/src/pages/tabs.astro b/src/pages/tabs.astro
index bd88a10..ab06af7 100644
--- a/src/pages/tabs.astro
+++ b/src/pages/tabs.astro
@@ -10,6 +10,14 @@ import infoIcon from '../icons/info.svg?raw'
 import gitHubIcon from '../icons/github.svg?raw'
 import successIcon from '../icons/circle-check.svg?raw'
 
+import {
+    tabItems,
+    tabsWithIcons,
+    inactiveTabs,
+    disabledTabs,
+    overflowTabs
+} from '@data'
+
 const sections = [
     {
         title: 'Astro tabs',
@@ -26,45 +34,13 @@ const sections = [
         component: ReactTabs
     }
 ]
-
-const items = [{
-    label: 'Introduction',
-    value: 'intro',
-    active: true
-}, {
-    label: 'Setup',
-    value: 'setup'
-}, {
-    label: 'Conclusion',
-    value: 'conclusion'
-}]
-
-const tabsWithIcons = [
-    {...items[0], label: `${infoIcon} Introduction` },
-    {...items[1], label: `${gitHubIcon} Setup` },
-    {...items[2], label: `${successIcon} Conclusion`, disabled: true }
-]
-const inactiveTabs = items.map(item => ({...item, active: false}))
-const disabledTabs = [
-    {...items[0]},
-    {...items[1]},
-    {...items[2], disabled: true }
-]
-
-const overflowTabs = Array(10).fill({
-    label: '',
-    value: 0,
-}).map((_, index) => ({
-    label: `Tab ${index + 1}`,
-    value: `tab-${index + 1}`
-}))
 ---
 
 <Layout>
     <h1>Tabs</h1>
     <div class="grid md-2 lg-3">
         <ComponentWrapper type="Astro">
-            <AstroTabs items={items}>
+            <AstroTabs items={tabItems}>
                 <div data-tab="intro" data-active="true">Intro tab</div>
                 <div data-tab="setup">Setup tab</div>
                 <div data-tab="conclusion">Conclusion tab</div>
@@ -72,7 +48,7 @@ const overflowTabs = Array(10).fill({
         </ComponentWrapper>
 
         <ComponentWrapper type="Svelte">
-            <SvelteTabs items={items} client:visible>
+            <SvelteTabs items={tabItems} client:visible>
                 <div data-tab="intro" data-active="true">Intro tab</div>
                 <div data-tab="setup">Setup tab</div>
                 <div data-tab="conclusion">Conclusion tab</div>
@@ -80,7 +56,7 @@ const overflowTabs = Array(10).fill({
         </ComponentWrapper>
 
         <ComponentWrapper type="React">
-            <ReactTabs items={items} client:visible>
+            <ReactTabs items={tabItems} client:visible>
                 <div data-tab="intro" data-active="true">Intro tab</div>
                 <div data-tab="setup">Setup tab</div>
                 <div data-tab="conclusion">Conclusion tab</div>
@@ -95,7 +71,7 @@ const overflowTabs = Array(10).fill({
         </Fragment>
         <div class="grid md-2">
             <ComponentWrapper title="Default">
-                <section.component items={items}>
+                <section.component items={tabItems}>
                     <div data-tab="intro" data-active="true">Intro tab</div>
                     <div data-tab="setup">Setup tab</div>
                     <div data-tab="conclusion">Conclusion tab</div>
@@ -127,7 +103,7 @@ const overflowTabs = Array(10).fill({
             </ComponentWrapper>
 
             <ComponentWrapper title="Boxed tabs">
-                <section.component items={items} theme="boxed">
+                <section.component items={tabItems} theme="boxed">
                     <div data-tab="intro" data-active="true">Intro tab</div>
                     <div data-tab="setup">Setup tab</div>
                     <div data-tab="conclusion">Conclusion tab</div>
@@ -143,7 +119,7 @@ const overflowTabs = Array(10).fill({
             </ComponentWrapper>
 
             <ComponentWrapper title="Outline tabs">
-                <section.component items={items} theme="outline">
+                <section.component items={tabItems} theme="outline">
                     <div data-tab="intro" data-active="true">Intro tab</div>
                     <div data-tab="setup">Setup tab</div>
                     <div data-tab="conclusion">Conclusion tab</div>
@@ -159,7 +135,7 @@ const overflowTabs = Array(10).fill({
             </ComponentWrapper>
 
             <ComponentWrapper title="Vertical tabs">
-                <section.component items={items} vertical={true}>
+                <section.component items={tabItems} vertical={true}>
                     <div data-tab="intro" data-active="true">Intro tab</div>
                     <div data-tab="setup">Setup tab</div>
                     <div data-tab="conclusion">Conclusion tab</div>
diff --git a/src/playground/ReactPlayground.tsx b/src/playground/ReactPlayground.tsx
index 2901101..e2b32a8 100644
--- a/src/playground/ReactPlayground.tsx
+++ b/src/playground/ReactPlayground.tsx
@@ -9,17 +9,7 @@ import Radio from '@components/Radio/Radio.tsx'
 import Switch from '@components/Switch/Switch.tsx'
 import Tabs from '@components/Tabs/Tabs.tsx'
 
-const tabItems = [{
-    label: 'Introduction',
-    value: 'intro',
-    active: true
-}, {
-    label: 'Setup',
-    value: 'setup'
-}, {
-    label: 'Conclusion',
-    value: 'conclusion'
-}]
+import { tabItems } from '@data'
 
 const ReactPlayground = () => {
     return (
diff --git a/src/playground/SveltePlayground.svelte b/src/playground/SveltePlayground.svelte
index 2589589..3b47524 100644
--- a/src/playground/SveltePlayground.svelte
+++ b/src/playground/SveltePlayground.svelte
@@ -9,17 +9,7 @@
     import Switch from '@components/Switch/Switch.svelte'
     import Tabs from '@components/Tabs/Tabs.svelte'
 
-    const tabItems = [{
-        label: 'Introduction',
-        value: 'intro',
-        active: true
-    }, {
-        label: 'Setup',
-        value: 'setup'
-    }, {
-        label: 'Conclusion',
-        value: 'conclusion'
-    }]
+    import { tabItems } from '@data'
 </script>
 
 <div class="grid md-2 lg-3">
diff --git a/tsconfig.json b/tsconfig.json
index 7bfdd80..3bc1e00 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,8 @@
         "paths": {
             "@components/*": ["src/components/*"],
             "@static/*": ["src/static/*"],
-            "@playground/*": ["src/playground/*"]
+            "@playground/*": ["src/playground/*"],
+            "@data": ["src/data.js"]
         }
     }
 }

From 31f334e6f232091af25d99a586de929b04f489d1 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Sat, 22 Jun 2024 13:55:46 +0200
Subject: [PATCH 07/23] =?UTF-8?q?=E2=9C=A8=20Add=20Spinner=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                             |  3 +-
 src/components/Spinner/Spinner.astro  | 42 ++++++++++++++
 src/components/Spinner/Spinner.svelte | 38 ++++++++++++
 src/components/Spinner/Spinner.tsx    | 44 ++++++++++++++
 src/components/Spinner/spinner.scss   | 41 +++++++++++++
 src/components/Spinner/spinner.ts     |  7 +++
 src/pages/index.astro                 |  4 ++
 src/pages/spinner.astro               | 83 +++++++++++++++++++++++++++
 src/scss/setup.scss                   |  5 ++
 9 files changed, 266 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Spinner/Spinner.astro
 create mode 100644 src/components/Spinner/Spinner.svelte
 create mode 100644 src/components/Spinner/Spinner.tsx
 create mode 100644 src/components/Spinner/spinner.scss
 create mode 100644 src/components/Spinner/spinner.ts
 create mode 100644 src/pages/spinner.astro

diff --git a/README.md b/README.md
index 4e9be4f..156c066 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,7 @@ Full documentation coming soon on [webcoreui.dev/docs](https://webcoreui.dev/doc
 
 ## Getting Started
 
-Webcore can be used as a standalone project, or it can be integrated into your existing Astro, Svelte, or React ecosystems.
+Webcore can be used as a standalone project, or it can be integrated into your existing Astro, Svelte, or React ecosystems. The easiest way to get started is to clone the repository and run `npm run dev` to start building your pages with the components available.
 
 ### Prerequisites
 
@@ -154,5 +154,6 @@ import { Accordion } from 'webcoreui/react'
 - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
 - [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
 - [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
+- [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)
 - [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)
 - [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs)
diff --git a/src/components/Spinner/Spinner.astro b/src/components/Spinner/Spinner.astro
new file mode 100644
index 0000000..7530049
--- /dev/null
+++ b/src/components/Spinner/Spinner.astro
@@ -0,0 +1,42 @@
+---
+import type { SpinnerProps } from './spinner'
+import './spinner.scss'
+
+interface Props extends SpinnerProps {}
+
+const {
+    color,
+    width,
+    speed,
+    size,
+    dashArray,
+} = Astro.props
+
+const classes = [
+    'w-spinner',
+    dashArray && 'dashed'
+]
+
+const styles = [
+    color && `--w-spinner-color: ${color};`,
+    width && `--w-spinner-width: ${width}px;`,
+    speed && `--w-spinner-speed: ${speed}s;`,
+    size && `--w-spinner-size: ${size}px;`,
+    dashArray && `--w-spinner-dash: ${dashArray}`,
+].filter(Boolean).join(' ')
+---
+
+<svg
+    class:list={classes}
+    viewBox="25 25 50 50"
+    role="status"
+    style={styles}
+>
+    <circle
+        class="spinner-path"
+        cx="50"
+        cy="50"
+        r="20"
+        fill="none"
+    />
+</svg>
diff --git a/src/components/Spinner/Spinner.svelte b/src/components/Spinner/Spinner.svelte
new file mode 100644
index 0000000..1d31ff3
--- /dev/null
+++ b/src/components/Spinner/Spinner.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import type { SpinnerProps } from './spinner'
+    import './spinner.scss'
+
+    export let color: SpinnerProps['color'] = ''
+    export let width: SpinnerProps['width'] = 0
+    export let speed: SpinnerProps['speed'] = 0
+    export let size: SpinnerProps['size'] = 0
+    export let dashArray: SpinnerProps['dashArray'] = 0
+
+    const classes = [
+        'w-spinner',
+        dashArray && 'dashed'
+    ].filter(Boolean).join(' ')
+
+    const styles = [
+        color && `--w-spinner-color: ${color};`,
+        width && `--w-spinner-width: ${width}px;`,
+        speed && `--w-spinner-speed: ${speed}s;`,
+        size && `--w-spinner-size: ${size}px;`,
+        dashArray && `--w-spinner-dash: ${dashArray}`,
+    ].filter(Boolean).join(' ')
+</script>
+
+<svg
+    class={classes}
+    viewBox="25 25 50 50"
+    role="status"
+    style={styles}
+>
+    <circle
+        class="spinner-path"
+        cx="50"
+        cy="50"
+        r="20"
+        fill="none"
+    />
+</svg>
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
new file mode 100644
index 0000000..ccb6cb3
--- /dev/null
+++ b/src/components/Spinner/Spinner.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import type { SpinnerProps } from './spinner'
+
+import './spinner.scss'
+
+const Spinner = ({
+    color,
+    width,
+    speed,
+    size,
+    dashArray
+}: SpinnerProps) => {
+    const classes = [
+        'w-spinner',
+        dashArray && 'dashed'
+    ].filter(Boolean).join(' ')
+    
+    const styles = {
+        ...(color && { '--w-spinner-color': color }),
+        ...(width && { '--w-spinner-width': `${width}px;` }),
+        ...(speed && { '--w-spinner-speed': `${speed}s;` }),
+        ...(size && { '--w-spinner-size': `${size}px;` }),
+        ...(dashArray && { '--w-spinner-dash': dashArray }),
+    } as React.CSSProperties
+
+    return (
+        <svg
+            className={classes}
+            viewBox="25 25 50 50"
+            role="status"
+            style={styles}
+        >
+            <circle
+                className="spinner-path"
+                cx="50"
+                cy="50"
+                r="20"
+                fill="none"
+            />
+        </svg>
+    )
+}
+
+export default Spinner
diff --git a/src/components/Spinner/spinner.scss b/src/components/Spinner/spinner.scss
new file mode 100644
index 0000000..13d9800
--- /dev/null
+++ b/src/components/Spinner/spinner.scss
@@ -0,0 +1,41 @@
+@import '../../scss/config.scss';
+
+.w-spinner {
+    margin: 0px auto;
+    width: var(--w-spinner-size);
+    height: var(--w-spinner-size);
+    animation: rotate var(--w-spinner-speed) linear infinite;
+
+    &.dashed .spinner-path {
+        stroke-dasharray: var(--w-spinner-dash);
+        animation: none;
+    }
+
+    .spinner-path {
+        stroke: var(--w-spinner-color);
+        stroke-width: var(--w-spinner-width);
+        animation: dash 1.5s ease-in-out infinite;
+        stroke-linecap: round;
+    }
+}
+
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35;
+    }
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124;
+    }
+}
diff --git a/src/components/Spinner/spinner.ts b/src/components/Spinner/spinner.ts
new file mode 100644
index 0000000..c5a4776
--- /dev/null
+++ b/src/components/Spinner/spinner.ts
@@ -0,0 +1,7 @@
+export type SpinnerProps = {
+    color?: string
+    width?: number
+    speed?: number
+    size?: number
+    dashArray?: number
+}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ccfb64b..83c072e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -11,6 +11,7 @@ import Checkbox from '@components/Checkbox/Checkbox.astro'
 import Icon from '@components/Icon/Icon.astro'
 import Radio from '@components/Radio/Radio.astro'
 import Rating from '@components/Rating/Rating.astro'
+import Spinner from '@components/Spinner/Spinner.astro'
 import Switch from '@components/Switch/Switch.astro'
 import Tabs from '@components/Tabs/Tabs.astro'
 
@@ -116,6 +117,9 @@ const tabItems = [{
         <CardWrapper title="Rating" href="/rating">
             <Rating score={4} />
         </CardWrapper>
+        <CardWrapper title="Spinner" href="/spinner">
+            <Spinner />
+        </CardWrapper>
         <CardWrapper title="Switch" href="/switch">
             <Switch toggled={true} />
         </CardWrapper>
diff --git a/src/pages/spinner.astro b/src/pages/spinner.astro
new file mode 100644
index 0000000..0ba65d3
--- /dev/null
+++ b/src/pages/spinner.astro
@@ -0,0 +1,83 @@
+---
+import Layout from '@static/Layout.astro'
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+
+import AstroSpinner from '@components/Spinner/Spinner.astro'
+import SvelteSpinner from '@components/Spinner/Spinner.svelte'
+import ReactSpinner from '@components/Spinner/Spinner.tsx'
+
+const sections = [
+    {
+        title: 'Astro spinners',
+        component: AstroSpinner
+    },
+    {
+        title: 'Svelte spinners',
+        component: SvelteSpinner
+    },
+    {
+        title: 'React spinners',
+        component: ReactSpinner
+    }
+]
+---
+
+<Layout>
+    <h1>Spinner</h1>
+    <div class="grid md-2 lg-3">
+        <ComponentWrapper type="Astro">
+            <AstroSpinner />
+        </ComponentWrapper>
+
+        <ComponentWrapper type="Svelte">
+            <SvelteSpinner color="#ee5253" />
+        </ComponentWrapper>
+
+        <ComponentWrapper type="React">
+            <ReactSpinner color="#48dbfb" />
+        </ComponentWrapper>
+    </div>
+
+    {sections.map(section => (
+        <h1>{section.title}</h1>
+        <div class="grid md-2 lg-3">
+            <ComponentWrapper title="Default">
+                <section.component />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Colored spinner">
+                <section.component color="#48dbfb" />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Spinner width">
+                <section.component width={5} />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Custom speed in seconds">
+                <section.component speed={5} />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Custom size">
+                <section.component size={15} />
+                <section.component size={20} />
+                <section.component size={25} />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Dashed spinner">
+                <section.component dashArray={8} />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Small dashes">
+                <section.component dashArray={4} />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Four dashes">
+                <section.component dashArray={15} />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Three dashes">
+                <section.component dashArray={20} />
+            </ComponentWrapper>
+        </div>
+    ))}
+</Layout>
diff --git a/src/scss/setup.scss b/src/scss/setup.scss
index b162828..fb4d513 100644
--- a/src/scss/setup.scss
+++ b/src/scss/setup.scss
@@ -15,6 +15,11 @@ $config: (
     --w-switch-on-color: #FFF;
     --w-checkbox-color: #FFF;
     --w-radio-color: #FFF;
+    --w-spinner-color: #FFF;
+    --w-spinner-width: 2px;
+    --w-spinner-speed: 2s;
+    --w-spinner-size: 30px;
+    --w-spinner-dash: 8;
 }
 
 @function config($key) {

From 689d43023583cacf923821ab5d64ded7f263d54c Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Sat, 22 Jun 2024 13:58:25 +0200
Subject: [PATCH 08/23] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20Add=20type=20for?=
 =?UTF-8?q?=20callback=20function=20params=20for=20React?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Checkbox/Checkbox.tsx | 2 +-
 src/components/Radio/Radio.tsx       | 2 +-
 src/components/Switch/Switch.tsx     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 7497a2d..cfbf8cf 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -7,7 +7,7 @@ import check from '../../icons/check.svg?raw'
 import './checkbox.scss'
 
 type ReactCheckboxProps = {
-    onClick?: () => any
+    onClick?: (key: any) => any
 } & CheckboxProps
 
 const Checkbox = ({
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index 9d30c4e..66e2dc9 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -6,7 +6,7 @@ import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 import './radio.scss'
 
 type ReactRadioProps = {
-    onChange?: () => any
+    onChange?: (key: any) => any
 } & RadioProps
 
 const Radio = ({
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index b843b69..7491914 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -3,7 +3,7 @@ import type { SwitchProps } from './switch'
 import './switch.scss'
 
 type ReactSwitchProps = {
-    onClick?: () => any
+    onClick?: (key: any) => any
 } & SwitchProps
 
 const Switch = ({

From f55bf837159da293f07cb3815799f3f8276210ce Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Sat, 22 Jun 2024 15:01:44 +0200
Subject: [PATCH 09/23] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20Improve=20Tabs=20com?=
 =?UTF-8?q?ponent=20usability=20for=20mobile=20&=20overflow=20states?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Tabs/Tabs.astro  | 26 ++++++++++++++-----------
 src/components/Tabs/Tabs.svelte | 22 +++++++++++----------
 src/components/Tabs/Tabs.tsx    | 22 +++++++++++----------
 src/components/Tabs/tabs.scss   | 34 +++++++++++++++++++++++----------
 src/pages/tabs.astro            |  6 +++++-
 src/static/Layout.astro         |  2 +-
 6 files changed, 69 insertions(+), 43 deletions(-)

diff --git a/src/components/Tabs/Tabs.astro b/src/components/Tabs/Tabs.astro
index 46ef4c0..b4e556a 100644
--- a/src/components/Tabs/Tabs.astro
+++ b/src/components/Tabs/Tabs.astro
@@ -22,16 +22,18 @@ const classes = [
 ---
 
 <section class:list={classes} data-id="w-tabs">
-    <div class="tabs">
-        {items.map(item => (
-            <button
-                data-value={item.value}
-                class:list={[item.active && 'active']}
-                disabled={item.disabled}
-            >
-                <Fragment set:html={item.label} />
-            </button>
-        ))}
+    <div class="tabs-wrapper">
+        <div class="tabs">
+            {items.map(item => (
+                <button
+                    data-value={item.value}
+                    class:list={[item.active && 'active']}
+                    disabled={item.disabled}
+                >
+                    <Fragment set:html={item.label} />
+                </button>
+            ))}
+        </div>
     </div>
     <div class="tab-content">
         <slot />
@@ -46,7 +48,9 @@ const classes = [
             const target = event.target as HTMLDivElement
 
             if (target.dataset.value) {
-                const tabContent = target.parentElement?.nextElementSibling as HTMLDivElement
+                const tabContent = target.parentElement
+                    ?.parentElement
+                    ?.nextElementSibling as HTMLDivElement
 
                 Array.from(tabContent.children)
                     .forEach((element: any) => {
diff --git a/src/components/Tabs/Tabs.svelte b/src/components/Tabs/Tabs.svelte
index e83a0e9..7f5b2bf 100644
--- a/src/components/Tabs/Tabs.svelte
+++ b/src/components/Tabs/Tabs.svelte
@@ -35,16 +35,18 @@
 </script>
 
 <section class={classes}>
-    <div class="tabs">
-        {#each items as item}
-            <button
-                class:active={active ? active === item.value : item.active}
-                disabled={item.disabled}
-                on:click={() => setTab(item.value)}
-            >
-                {@html item.label}
-            </button>
-        {/each}
+    <div class="tabs-wrapper">
+        <div class="tabs">
+            {#each items as item}
+                <button
+                    class:active={active ? active === item.value : item.active}
+                    disabled={item.disabled}
+                    on:click={() => setTab(item.value)}
+                >
+                    {@html item.label}
+                </button>
+            {/each}
+        </div>
     </div>
     <div class="tab-content" bind:this={tabContainer}>
         <slot />
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 425c125..bc198f3 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -50,16 +50,18 @@ const Tabs = ({
 
     return (
         <section className={classes}>
-            <div className="tabs">
-                {items.map((item, index) => (
-                    <button
-                        key={index}
-                        disabled={item.disabled}
-                        dangerouslySetInnerHTML={{ __html: item.label }}
-                        onClick={() => setTab(item.value)}
-                        className={isActive(item)}
-                    />
-                ))}
+            <div className="tabs-wrapper">
+                <div className="tabs">
+                    {items.map((item, index) => (
+                        <button
+                            key={index}
+                            disabled={item.disabled}
+                            dangerouslySetInnerHTML={{ __html: item.label }}
+                            onClick={() => setTab(item.value)}
+                            className={isActive(item)}
+                        />
+                    ))}
+                </div>
             </div>
             <div className="tab-content" ref={tabContainer}>
                 {children}
diff --git a/src/components/Tabs/tabs.scss b/src/components/Tabs/tabs.scss
index e9cf94c..2689155 100644
--- a/src/components/Tabs/tabs.scss
+++ b/src/components/Tabs/tabs.scss
@@ -35,13 +35,9 @@
         }
     }
 
-    &.even .tabs {
-        width: auto;
-
-        button {
-            flex: 1;
-            justify-content: center;
-        }
+    &.even .tabs button {
+        flex: 1;
+        justify-content: center;
     }
 
     &.vertical {
@@ -56,7 +52,6 @@
         .tabs {
             flex-direction: column;
             gap: 5px;
-            margin-bottom: 0;
             
             button {
                 padding: 10px;
@@ -67,14 +62,20 @@
                 }
             }
         }
+
+        .tab-content {
+            margin-top: 0;
+        }
+    }
+
+    .tabs-wrapper {
+        overflow: auto;
     }
 
     .tabs {
         border-bottom: 2px solid #252525;
-        margin-bottom: 20px;
         display: flex;
         gap: 10px;
-        flex-wrap: wrap;
 
         button {
             @include Transition(color);
@@ -90,6 +91,7 @@
             display: flex;
             align-items: center;
             gap: 10px;
+            flex-shrink: 0;
 
             svg {
                 pointer-events: none;
@@ -110,6 +112,10 @@
         }
     }
 
+    .tab-content {
+        margin-top: 20px;
+    }
+
     [data-tab] {
         display: none;
 
@@ -118,3 +124,11 @@
         }
     }
 }
+
+@include Media('xs') {
+    .w-tabs {
+        &.even .tabs {
+            width: auto;
+        }
+    }
+}
diff --git a/src/pages/tabs.astro b/src/pages/tabs.astro
index ab06af7..c951fe9 100644
--- a/src/pages/tabs.astro
+++ b/src/pages/tabs.astro
@@ -159,7 +159,11 @@ const sections = [
             </ComponentWrapper>
 
             <ComponentWrapper title="Overflown tabs">
-                <section.component items={overflowTabs} />
+                <section.component items={overflowTabs}>
+                    <div data-tab="tab-1" data-active="true">Intro tab</div>
+                    <div data-tab="tab-2">Tab 2</div>
+                    <div data-tab="tab-3">Tab 3</div>
+                </section.component>
             </ComponentWrapper>
         </div>
     ))}
diff --git a/src/static/Layout.astro b/src/static/Layout.astro
index 178dcd3..84aead9 100644
--- a/src/static/Layout.astro
+++ b/src/static/Layout.astro
@@ -7,7 +7,7 @@
     <head>
         <meta charset="utf-8" />
         <link rel="icon" type="image/svg+xml" href="/img/favicon.svg" />
-        <meta name="viewport" content="width=device-width" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
         <title>Webcore</title>
             <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
     <body>

From e52c1f94176cb2e742b7e67fe3ddd128babf3e41 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Sat, 22 Jun 2024 18:20:45 +0200
Subject: [PATCH 10/23] =?UTF-8?q?=E2=9C=A8=20Make=20data=20attributes=20pa?=
 =?UTF-8?q?ssable=20to=20badges?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Badge/Badge.astro  | 5 +++--
 src/components/Badge/Badge.svelte | 2 +-
 src/components/Badge/Badge.tsx    | 4 ++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Badge/Badge.astro b/src/components/Badge/Badge.astro
index 433affb..ff07a9b 100644
--- a/src/components/Badge/Badge.astro
+++ b/src/components/Badge/Badge.astro
@@ -8,7 +8,8 @@ interface Props extends BadgeProps {
 
 const {
     theme,
-    interactive
+    interactive,
+    ...rest
 } = Astro.props
 
 const classes = [
@@ -18,6 +19,6 @@ const classes = [
 ]
 ---
 
-<span class:list={classes}>
+<span class:list={classes} {...rest}>
     <slot />
 </span>
diff --git a/src/components/Badge/Badge.svelte b/src/components/Badge/Badge.svelte
index d99a169..b5b0d5b 100644
--- a/src/components/Badge/Badge.svelte
+++ b/src/components/Badge/Badge.svelte
@@ -12,6 +12,6 @@
     ].filter(Boolean).join(' ')
 </script>
 
-<span class={classes} on:click={onClick}>
+<span class={classes} on:click={onClick} {...$$restProps}>
     <slot />
 </span>
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index d30722f..39ca115 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -6,7 +6,7 @@ type ReactBadgeProps = {
     children: React.ReactNode
 } & BadgeProps
 
-const Badge = ({ theme, onClick, children }: ReactBadgeProps) => {
+const Badge = ({ theme, onClick, children, ...rest }: ReactBadgeProps) => {
     const classes = [
         'w-badge',
         theme || null,
@@ -14,7 +14,7 @@ const Badge = ({ theme, onClick, children }: ReactBadgeProps) => {
     ].filter(Boolean).join(' ')
 
     return (
-        <span className={classes} onClick={onClick}>
+        <span className={classes} onClick={onClick} {...rest}>
             {children}
         </span>
     )

From cb0ca27f279b9ef5a99c2d16c8d3b639fff9150a Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Sat, 22 Jun 2024 18:20:54 +0200
Subject: [PATCH 11/23] =?UTF-8?q?=E2=9C=A8=20Add=20Tooltip=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index.astro        |   3 +
 src/pages/tooltip.astro      |  50 +++++++++++++
 src/scss/global.scss         |   1 +
 src/scss/global/tooltip.scss | 133 +++++++++++++++++++++++++++++++++++
 src/scss/setup.scss          |   9 ++-
 5 files changed, 195 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/tooltip.astro
 create mode 100644 src/scss/global/tooltip.scss

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 83c072e..3a6a103 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -126,6 +126,9 @@ const tabItems = [{
         <CardWrapper title="Tabs" href="/tabs">
             <Tabs items={tabItems} theme="boxed" />
         </CardWrapper>
+        <CardWrapper title="Tooltip" href="/tooltip">
+            <p>Tooltip<sup>?</sup></p>
+        </CardWrapper>
     </div>
 </Layout>
 
diff --git a/src/pages/tooltip.astro b/src/pages/tooltip.astro
new file mode 100644
index 0000000..1c5af9c
--- /dev/null
+++ b/src/pages/tooltip.astro
@@ -0,0 +1,50 @@
+---
+import Layout from '@static/Layout.astro'
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+
+import Button from '@components/Button/Button.astro'
+
+const tooltipStyle = [
+    '--w-tooltip-background: #10ac84',
+    '--w-tooltip-color:#000'
+].join(';')
+---
+
+<Layout>
+    <h1>Tooltip</h1>
+    <div class="grid md-2 lg-3">
+        <ComponentWrapper title="Default">
+            <p data-tooltip="Tooltip content">Default tooltip</p>
+        </ComponentWrapper>
+
+        <ComponentWrapper title="Custom color">
+            <p data-tooltip="Tooltip content" style={tooltipStyle}>
+                Colored tooltip
+            </p>
+        </ComponentWrapper>
+
+        <ComponentWrapper title="Tooltip on button">
+            <Button data-tooltip="Tooltip content">
+                Hover me
+            </Button>
+        </ComponentWrapper>
+
+        <ComponentWrapper title="Bottom position">
+            <p data-tooltip="Tooltip content" data-position="bottom">
+                Bottom tooltip
+            </p>
+        </ComponentWrapper>
+        
+        <ComponentWrapper title="Left position">
+            <p data-tooltip="Tooltip content" data-position="left">
+                Left tooltip
+            </p>
+        </ComponentWrapper>
+
+        <ComponentWrapper title="Right position">
+            <p data-tooltip="Tooltip content" data-position="right">
+                Right tooltip
+            </p>
+        </ComponentWrapper>
+    </div>
+</Layout>
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 329985b..6109cd5 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -1,2 +1,3 @@
 @import './global/elements.scss';
+@import './global/tooltip.scss';
 @import './global/utility.scss';
diff --git a/src/scss/global/tooltip.scss b/src/scss/global/tooltip.scss
new file mode 100644
index 0000000..8bcb304
--- /dev/null
+++ b/src/scss/global/tooltip.scss
@@ -0,0 +1,133 @@
+@import '../config';
+
+@mixin Tooltip() {
+    [data-tooltip] {
+        display: inline-block;
+        position: relative;
+
+        &::before,
+        &::after {
+            @include Transition();
+            opacity: 0;
+            left: 50%;
+            transform: translate(-50%, 5px);
+        }
+
+        &::before {
+            content: attr(data-tooltip);
+            border-radius: 5px;
+            font-size: 14px;
+            position: absolute;
+            background: var(--w-tooltip-background);
+            color: var(--w-tooltip-color);
+            padding: 0 5px;
+            top: -30px;
+            width: max-content;
+            line-height: 1.8;
+            max-width: 300px;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            width: 0; 
+            height: 0; 
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-top: 5px solid var(--w-tooltip-background);
+            top: -5px;
+        }
+
+        &:hover::before,
+        &:hover::after {
+            opacity: 1;
+            transform: translate(-50%, 0);
+        }
+
+        &[data-position="bottom"] {
+            &::before,
+            &::after {
+                transform: translate(-50%, -5px);
+            }
+
+            &::before {
+                top: auto;
+                bottom: -30px;
+            }
+
+            &::after {
+                border-left: 5px solid transparent;
+                border-right: 5px solid transparent;
+                border-top: 5px solid transparent;
+                border-bottom: 5px solid var(--w-tooltip-background);
+                top: auto;
+                bottom: -5px;
+            }
+
+            &:hover::before,
+            &:hover::after {
+                transform: translate(-50%, 0);
+            }
+        }
+
+        &[data-position="left"] {
+            &::before,
+            &::after {
+                transform: translate(0, 0);
+                left: auto;
+                right: 105%;
+            }
+
+            &::before {
+                top: auto;
+            }
+
+            &::after {
+                border-left: 5px solid var(--w-tooltip-background);
+                border-right: 5px solid transparent;
+                border-top: 5px solid transparent;
+                border-bottom: 5px solid transparent;
+                top: 50%;
+                transform: translate(10px, -40%);
+            }
+
+            &:hover::before {
+                transform: translate(-5px, 0);
+            }
+
+            &:hover::after {
+                transform: translate(5px, -40%);
+            }
+        }
+
+        &[data-position="right"] {
+            &::before,
+            &::after {
+                transform: translate(0, 0);
+                left: 105%;
+            }
+
+            &::before {
+                top: auto;
+            }
+
+            &::after {
+                border-left: 5px solid transparent;
+                border-right: 5px solid var(--w-tooltip-background);
+                border-top: 5px solid transparent;
+                border-bottom: 5px solid transparent;
+                top: 50%;
+                transform: translate(-10px, -40%);
+            }
+
+            &:hover::before {
+                transform: translate(5px, 0);
+            }
+
+            &:hover::after {
+                transform: translate(-5px, -40%);
+            }
+        }
+    }
+}
+
diff --git a/src/scss/setup.scss b/src/scss/setup.scss
index fb4d513..f2ce3b6 100644
--- a/src/scss/setup.scss
+++ b/src/scss/setup.scss
@@ -3,7 +3,8 @@
 $config: (
     includeResets: true,
     includeHelperClasses: true,
-    includeElementStyles: true
+    includeElementStyles: true,
+    includeTooltip: true
 );
 
 :root {
@@ -20,6 +21,8 @@ $config: (
     --w-spinner-speed: 2s;
     --w-spinner-size: 30px;
     --w-spinner-dash: 8;
+    --w-tooltip-background: #FFF;
+    --w-tooltip-color: #000;
 }
 
 @function config($key) {
@@ -40,4 +43,8 @@ $config: (
     @if (config('includeElementStyles')) {
         @include Elements();
     }
+
+    @if (config('includeTooltip')) {
+        @include Tooltip();
+    }
 }

From 5976d5ba3c9dd02e391e7e8e1a6b67b24547e901 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Sat, 22 Jun 2024 18:22:03 +0200
Subject: [PATCH 12/23] =?UTF-8?q?=F0=9F=93=9D=20Add=20Tooltip=20to=20READM?=
 =?UTF-8?q?E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 156c066..68459a4 100644
--- a/README.md
+++ b/README.md
@@ -157,3 +157,4 @@ import { Accordion } from 'webcoreui/react'
 - [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)
 - [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)
 - [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs)
+- [Tooltip](https://github.com/Frontendland/webcoreui/blob/main/src/pages/tooltip.astro)

From e819cebaf6709523aa0675382bf1a6e4ebc9d140 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Sun, 23 Jun 2024 09:11:57 +0200
Subject: [PATCH 13/23] =?UTF-8?q?=F0=9F=94=A5=20Remove=20unused=20imports?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore           |  3 ++-
 README.md            | 10 +---------
 src/pages/tabs.astro |  4 ----
 3 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/.gitignore b/.gitignore
index 6d4c0aa..90037c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 # build output
-dist/
+dist
+build
 
 # generated types
 .astro/
diff --git a/README.md b/README.md
index 68459a4..9c097ab 100644
--- a/README.md
+++ b/README.md
@@ -79,15 +79,7 @@ yarn add webcoreui
 
 ### Setup
 
-1. Add the following to your `tsconfig.json` to include TypeScript types:
-
-```json
-{
-  "include": ["webcoreui"]
-}
-```
-
-2. Setup default styles and fonts by calling the following in your global SCSS file:
+Setup default styles and fonts by calling the following in your global SCSS file:
 
 ```scss
 @import 'webcoreui/styles';
diff --git a/src/pages/tabs.astro b/src/pages/tabs.astro
index c951fe9..a7b1ebe 100644
--- a/src/pages/tabs.astro
+++ b/src/pages/tabs.astro
@@ -6,10 +6,6 @@ import AstroTabs from '@components/Tabs/Tabs.astro'
 import SvelteTabs from '@components/Tabs/Tabs.svelte'
 import ReactTabs from '@components/Tabs/Tabs.tsx'
 
-import infoIcon from '../icons/info.svg?raw'
-import gitHubIcon from '../icons/github.svg?raw'
-import successIcon from '../icons/circle-check.svg?raw'
-
 import {
     tabItems,
     tabsWithIcons,

From f9f1c973d3f3caa94fdb4584235f31b3b0637fd8 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Sun, 23 Jun 2024 14:34:19 +0200
Subject: [PATCH 14/23] Update issue templates

---
 .github/ISSUE_TEMPLATE/bug_report.md | 31 ++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 .github/ISSUE_TEMPLATE/bug_report.md

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 0000000..425ca3d
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,31 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Environment (please complete the following information):**
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

From fec229de66c0983aabf07c7e0b95483b2d9bda6c Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Sun, 23 Jun 2024 14:40:53 +0200
Subject: [PATCH 15/23] =?UTF-8?q?=E2=9C=A8=20Add=20Toast=20component=20to?=
 =?UTF-8?q?=20Astro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                      |   2 +
 scripts/build.js                  |   7 +-
 scripts/buildImports.js           |   8 +-
 src/components/Alert/alert.scss   |   1 +
 src/components/Button/button.ts   |   3 +-
 src/components/Toast/Toast.astro  |  28 ++++
 src/components/Toast/Toast.svelte |  11 ++
 src/components/Toast/Toast.tsx    |  17 ++
 src/components/Toast/toast.scss   |  14 ++
 src/components/Toast/toast.ts     |   5 +
 src/pages/index.astro             |   3 +
 src/pages/toast.astro             | 263 ++++++++++++++++++++++++++++++
 src/utils/toast.ts                |  56 +++++++
 tsconfig.json                     |   1 +
 14 files changed, 413 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Toast/Toast.astro
 create mode 100644 src/components/Toast/Toast.svelte
 create mode 100644 src/components/Toast/Toast.tsx
 create mode 100644 src/components/Toast/toast.scss
 create mode 100644 src/components/Toast/toast.ts
 create mode 100644 src/pages/toast.astro
 create mode 100644 src/utils/toast.ts

diff --git a/package.json b/package.json
index 551314f..da90690 100644
--- a/package.json
+++ b/package.json
@@ -31,12 +31,14 @@
         "components",
         "icons",
         "scss",
+        "utils",
         "astro.d.ts",
         "astro.js",
         "svelte.d.ts",
         "svelte.js",
         "react.d.ts",
         "react.js",
+        "index.js",
         "README.md",
         "LICENSE"
     ],
diff --git a/scripts/build.js b/scripts/build.js
index f37d3e1..db8fa06 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -1,11 +1,12 @@
 import fs from 'fs'
-import buildImports from './buildImports.js'
+import { buildImports, buildUtilImports } from './buildImports.js'
 import buildTypes from './buildTypes.js'
 
 const folders = {
     'src/icons': 'dist/icons',
     'src/components': 'dist/components',
-    'src/scss': 'dist/scss'
+    'src/scss': 'dist/scss',
+    'src/utils': 'dist/utils'
 }
 
 const files = {
@@ -44,4 +45,6 @@ fs.writeFileSync('dist/astro.d.ts', buildTypes('astro'))
 fs.writeFileSync('dist/svelte.d.ts', buildTypes('svelte'))
 fs.writeFileSync('dist/react.d.ts', buildTypes('react'))
 
+fs.writeFileSync('dist/index.js', buildUtilImports())
+
 console.log('✅ Package built')
diff --git a/scripts/buildImports.js b/scripts/buildImports.js
index b7c15c9..bb5ad98 100644
--- a/scripts/buildImports.js
+++ b/scripts/buildImports.js
@@ -1,6 +1,6 @@
 import fs from 'fs'
 
-const buildImports = extension => {
+export const buildImports = extension => {
     const components = fs.readdirSync('src/components')
 
     return components.map(component => {
@@ -10,4 +10,8 @@ const buildImports = extension => {
         + components.map(component => `export const ${component} = ${component}Component`).join('\n')
 }
 
-export default buildImports
+export const buildUtilImports = () => {
+    const utils = fs.readdirSync('src/utils')
+
+    return utils.map(util => `export * from './utils/${util}'`).join('\n')
+}
diff --git a/src/components/Alert/alert.scss b/src/components/Alert/alert.scss
index bc1bf0d..90c1fea 100644
--- a/src/components/Alert/alert.scss
+++ b/src/components/Alert/alert.scss
@@ -48,5 +48,6 @@
     .alert-body {
         font-size: 16px;
         color: #BBB;
+        line-height: 1.5;
     }
 }
diff --git a/src/components/Button/button.ts b/src/components/Button/button.ts
index c22ebd7..a06a896 100644
--- a/src/components/Button/button.ts
+++ b/src/components/Button/button.ts
@@ -9,7 +9,6 @@ export type ButtonProps = {
         | null
     bold?: boolean
     href?: string
-    target?: string
-    disabled?: boolean
     onClick?: () => any
+    [key: string]: any
 }
diff --git a/src/components/Toast/Toast.astro b/src/components/Toast/Toast.astro
new file mode 100644
index 0000000..ab9a0dd
--- /dev/null
+++ b/src/components/Toast/Toast.astro
@@ -0,0 +1,28 @@
+---
+import type { ToastProps } from './toast'
+import Alert from '../Alert/Alert.astro'
+
+import './toast.scss'
+
+interface Props extends ToastProps {}
+
+const {
+    className
+} = Astro.props
+
+const classes = [
+    'w-toast',
+    className
+].filter(Boolean).join(' ')
+---
+
+{Astro.slots.has('icon') ? (
+    <Alert {...Astro.props} className={classes}>
+        <slot slot="icon" name="icon" />
+        <slot />
+    </Alert>
+) : (
+    <Alert {...Astro.props} className={classes}>
+        <slot />
+    </Alert>
+)}
diff --git a/src/components/Toast/Toast.svelte b/src/components/Toast/Toast.svelte
new file mode 100644
index 0000000..4c67b47
--- /dev/null
+++ b/src/components/Toast/Toast.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { ToastProps } from './toast'
+    import './toast.scss'
+
+    export let className: ToastProps['className'] = ''
+
+    const classes = [
+        'w-toast',
+        className
+    ].filter(Boolean).join(' ')
+</script>
\ No newline at end of file
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
new file mode 100644
index 0000000..9978647
--- /dev/null
+++ b/src/components/Toast/Toast.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import type { ToastProps } from './toast'
+
+import './toast.scss'
+
+const Toast = ({
+    className
+}: ToastProps) => {
+    const classes = [
+        'w-toast',
+        className
+    ].filter(Boolean).join(' ')
+
+    return <div>Toast</div>
+}
+
+export default Toast
\ No newline at end of file
diff --git a/src/components/Toast/toast.scss b/src/components/Toast/toast.scss
new file mode 100644
index 0000000..e4e2022
--- /dev/null
+++ b/src/components/Toast/toast.scss
@@ -0,0 +1,14 @@
+@import '../../scss/config.scss';
+
+.w-toast {
+    @include Transition(transform);
+    background: #000;
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    transform: translateY(calc(100% + 25px));
+
+    &.show {
+        transform: translateY(0);
+    }
+}
diff --git a/src/components/Toast/toast.ts b/src/components/Toast/toast.ts
new file mode 100644
index 0000000..3f891a4
--- /dev/null
+++ b/src/components/Toast/toast.ts
@@ -0,0 +1,5 @@
+import type { AlertProps } from '../Alert/alert'
+
+export type ToastProps = {
+    [key: string]: any
+} & AlertProps
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3a6a103..a71a6d3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -126,6 +126,9 @@ const tabItems = [{
         <CardWrapper title="Tabs" href="/tabs">
             <Tabs items={tabItems} theme="boxed" />
         </CardWrapper>
+        <CardWrapper title="Toast" href="/toast">
+            <Alert theme="success">Post saved</Alert>
+        </CardWrapper>
         <CardWrapper title="Tooltip" href="/tooltip">
             <p>Tooltip<sup>?</sup></p>
         </CardWrapper>
diff --git a/src/pages/toast.astro b/src/pages/toast.astro
new file mode 100644
index 0000000..7ec6be7
--- /dev/null
+++ b/src/pages/toast.astro
@@ -0,0 +1,263 @@
+---
+import Layout from '@static/Layout.astro'
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+
+import Icon from '@components/Icon/Icon.astro'
+import Button from '@components/Button/Button.astro'
+import AstroToast from '@components/Toast/Toast.astro'
+import SvelteToast from '@components/Toast/Toast.svelte'
+import ReactToast from '@components/Toast/Toast.tsx'
+
+const sections = [
+    {
+        title: 'Astro toasts',
+        component: AstroToast
+    },
+    {
+        title: 'Svelte toasts',
+        component: SvelteToast
+    },
+    {
+        title: 'React toasts',
+        component: ReactToast
+    }
+]
+---
+
+<Layout>
+    <h1>Toast</h1>
+    <div class="grid md-2 lg-3">
+        <ComponentWrapper type="Astro">
+            <Button theme="secondary" id="toast-btn-astro">
+                Toast in Astro
+            </Button>
+
+            <AstroToast title="Astro toast" id="toast-astro">
+                Toast in Astro
+            </AstroToast>
+        </ComponentWrapper>
+
+        <ComponentWrapper type="Svelte">
+            <Button theme="alert" id="toast-btn-svelte">
+                Toast in Svelte
+            </Button>
+
+            <SvelteToast title="Svelte toast" theme="alert" id="toast-svelte">
+                Toast in Svelte
+            </SvelteToast>
+        </ComponentWrapper>
+
+        <ComponentWrapper type="React">
+            <Button theme="info" id="toast-btn-react">
+                Toast in React
+            </Button>
+
+            <ReactToast title="React toast" theme="info" id="toast-react">
+                Toast in React
+            </ReactToast>
+        </ComponentWrapper>
+    </div>
+
+    {sections.map((section, index) => (
+        <h1>{section.title}</h1>
+        <div class="grid md-2 lg-3">
+            <ComponentWrapper title="Toast with text only">
+                <Button theme="secondary" id={`toast-btn-0${index}`}>
+                    Show Toast
+                </Button>
+
+                <section.component id={`toast-0${index}`}>
+                    Toast with only text.
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Toast with text and title">
+                <Button theme="secondary" id={`toast-btn-1${index}`}>
+                    Show Toast
+                </Button>
+
+                <section.component title="Note" id={`toast-1${index}`}>
+                    Toast with text and title.
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Toast with emoji in title">
+                <Button theme="secondary" id={`toast-btn-2${index}`}>
+                    Show Toast
+                </Button>
+
+                <section.component title="💡 Note" id={`toast-2${index}`}>
+                    Toast with emoji in title
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Informational toast">
+                <Button theme="secondary" id={`toast-btn-3${index}`}>
+                    Show Toast
+                </Button>
+
+                <section.component title="Information" theme="info" id={`toast-3${index}`}>
+                    Toast with info theme.
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Success toast">
+                <Button theme="secondary" id={`toast-btn-4${index}`}>
+                    Show Toast
+                </Button>
+
+                <section.component title="Congratulations!" theme="success" id={`toast-4${index}`}>
+                    Toast with success theme.
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Warning toast">
+                <Button theme="secondary" id={`toast-btn-5${index}`}>
+                    Show Toast
+                </Button>
+
+                <section.component title="Important" theme="warning" id={`toast-5${index}`}>
+                    Toast with warning theme.
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Alert toast">
+                <Button theme="secondary" id={`toast-btn-6${index}`}>
+                    Show Toast
+                </Button>
+
+                <section.component title="Irreversible action" theme="alert" id={`toast-6${index}`}>
+                    Toast with alert theme.
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Toast with custom icon">
+                <Button theme="secondary" id={`toast-btn-7${index}`}>
+                    Show Toast
+                </Button>
+
+                <section.component title="Custom icons" id={`toast-7${index}`}>
+                    <Icon type="github" slot="icon" />
+                    Toast with custom icon.
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Themed toast with icon">
+                <Button theme="secondary" id={`toast-btn-8${index}`}>
+                    Show Toast
+                </Button>
+
+                <section.component title="Themed toast with icon" theme="success" id={`toast-8${index}`}>
+                    <Icon type="github" slot="icon" />
+                    Toast with theme and icon.
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Dismissable toast with long timeout">
+                <Button theme="secondary" id={`dismissable-show-${index}`}>
+                    Show Toast
+                </Button>
+
+                <Button theme="secondary" id={`dismissable-hide-${index}`}>
+                    Hide Toast
+                </Button>
+
+                <section.component title="Dismissable toast" id={`dismissable-toast-${index}`}>
+                    Toast shown for 10 seconds.<br />
+                    Trigger dismiss with "Hide Toast".
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Programmatically setting copy">
+                <Button theme="secondary" id={`programmatic-btn-${index}`}>
+                    Show Toast
+                </Button>
+
+                <section.component title="Original title" id={`programmatic-toast-${index}`}>
+                    Original content
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Programmatically setting theme">
+                <Button theme="secondary" id={`themed-btn-${index}`}>
+                    Show Toast
+                </Button>
+
+                <section.component title="Original title" id={`themed-toast-${index}`}>
+                    Original content
+                </section.component>
+            </ComponentWrapper>
+        </div>
+    ))}
+</Layout>
+
+<script>
+    import {
+        toast,
+        hideToast,
+        setDefaultTimeout
+    } from '@utils/toast'
+
+    setDefaultTimeout(3000)
+
+    const on = (element: string, callback: () => any) => {
+        document
+            .querySelector(element)
+            ?.addEventListener('click', callback)
+    }
+
+    const ids = Array(8).fill(10).map((x, index) => x * (index + 1))
+    const buttons = [
+        'astro',
+        'svelte',
+        'react',
+        '00',
+        '01',
+        '02',
+        ...ids,
+        ...ids.map(x => x + 1),
+        ...ids.map(x => x + 2)
+    ]
+
+    // Show toast functionaly
+    buttons.forEach(id => {
+        on(`#toast-btn-${id}`, () => toast(`#toast-${id}`))
+    });
+
+    // Dismissable functionality with long timeout
+    [0, 1, 2].forEach(x => {
+        on(`#dismissable-show-${x}`, () => {
+            toast({
+                element: `#dismissable-toast-${x}`,
+                timeout: 10_000
+            })
+        })
+
+        on(`#dismissable-hide-${x}`, () => {
+            hideToast(`#dismissable-toast-${x}`)
+        })
+    });
+
+    // Programmatically setting title & content
+    [0, 1, 2].forEach(x => {
+        on(`#programmatic-btn-${x}`, () => {
+            toast({
+                element: `#programmatic-toast-${x}`,
+                title: 'Title set through JS',
+                content: 'Content created in JS with <strong>HTML</strong>'
+            })
+        })
+    });
+
+    // Programmatically setting theme
+    [0, 1, 2].forEach(x => {
+        on(`#themed-btn-${x}`, () => {
+            toast({
+                element: `#themed-toast-${x}`,
+                title: 'Title set through JS',
+                content: 'Theme set to "success"',
+                theme: 'success'
+            })
+        })
+    })
+</script>
diff --git a/src/utils/toast.ts b/src/utils/toast.ts
new file mode 100644
index 0000000..f9c7747
--- /dev/null
+++ b/src/utils/toast.ts
@@ -0,0 +1,56 @@
+import type { AlertProps } from '../components/Alert/alert'
+
+type Toast = {
+    element: string
+    timeout?: number
+    title?: AlertProps['title']
+    content?: string
+    theme?: AlertProps['theme']
+}
+
+let defaultTimeout = 5000
+
+export let setDefaultTimeout = (time: number) => defaultTimeout = time
+
+export const toast = (config: Toast | string) => {
+    const element = typeof config === 'string'
+        ? config
+        : config.element
+
+    const {
+        timeout,
+        title,
+        content,
+        theme
+    } = (typeof config === 'string' ? {} : config) as Toast
+
+    const htmlElement = document.querySelector(element)
+
+    if (htmlElement) {
+        htmlElement.classList.add('show')
+
+        if (theme) {
+            htmlElement.classList.add(theme)
+        }
+
+        if (title) {
+            const titleElement = htmlElement.querySelector('.alert-title')
+
+            titleElement ? titleElement.innerHTML = title : null
+        }
+
+        if (content) {
+            const contentElement = htmlElement.querySelector('.alert-body')
+
+            contentElement ? contentElement.innerHTML = content : null
+        }
+
+        setTimeout(() => {
+            htmlElement.classList.remove('show')
+        }, timeout || defaultTimeout)
+    }
+}
+
+export const hideToast = (element: string) => {
+    document.querySelector(element)?.classList.remove('show')
+}
diff --git a/tsconfig.json b/tsconfig.json
index 3bc1e00..12f1aaf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,7 @@
             "@components/*": ["src/components/*"],
             "@static/*": ["src/static/*"],
             "@playground/*": ["src/playground/*"],
+            "@utils/*": ["src/utils/*"],
             "@data": ["src/data.js"]
         }
     }

From 1d3eaaf8b54fdae8de0f6f5c270ba6925d6f42a8 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Sun, 23 Jun 2024 15:05:47 +0200
Subject: [PATCH 16/23] =?UTF-8?q?=E2=9C=A8=20Add=20Toast=20component=20for?=
 =?UTF-8?q?=20Svelte=20&=20React?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                         |  1 +
 src/components/Toast/Toast.svelte | 10 +++++++++-
 src/components/Toast/Toast.tsx    | 22 ++++++++++++++++++----
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 9c097ab..95956c7 100644
--- a/README.md
+++ b/README.md
@@ -149,4 +149,5 @@ import { Accordion } from 'webcoreui/react'
 - [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)
 - [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)
 - [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs)
+- [Toast](https://github.com/Frontendland/webcoreui/tree/main/src/components/Toast)
 - [Tooltip](https://github.com/Frontendland/webcoreui/blob/main/src/pages/tooltip.astro)
diff --git a/src/components/Toast/Toast.svelte b/src/components/Toast/Toast.svelte
index 4c67b47..a965b80 100644
--- a/src/components/Toast/Toast.svelte
+++ b/src/components/Toast/Toast.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { ToastProps } from './toast'
+    import Alert from '../Alert/Alert.svelte'
     import './toast.scss'
 
     export let className: ToastProps['className'] = ''
@@ -8,4 +9,11 @@
         'w-toast',
         className
     ].filter(Boolean).join(' ')
-</script>
\ No newline at end of file
+</script>
+
+<Alert {...$$restProps} className={classes}>
+    {#if $$slots.icon}
+        <slot name="icon" />
+    {/if}
+    <slot />
+</Alert>
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index 9978647..bbff356 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -1,17 +1,31 @@
 import React from 'react'
 import type { ToastProps } from './toast'
+import Alert from '../Alert/Alert.tsx'
 
 import './toast.scss'
 
+type ReactToastProps = {
+    children: React.ReactNode
+    icon?: string
+} & ToastProps
+
 const Toast = ({
-    className
-}: ToastProps) => {
+    icon,
+    className,
+    children,
+    ...rest
+}: ReactToastProps) => {
     const classes = [
         'w-toast',
         className
     ].filter(Boolean).join(' ')
 
-    return <div>Toast</div>
+    return (
+        <Alert {...rest} className={classes} icon={icon}>
+            {children}
+        </Alert>
+
+    )
 }
 
-export default Toast
\ No newline at end of file
+export default Toast

From 9f116fdfe579ccfdc27bdd5a824d3a1013989c88 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Sun, 23 Jun 2024 15:31:45 +0200
Subject: [PATCH 17/23] =?UTF-8?q?=E2=9C=A8=20Make=20Toast=20positionable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Toast/Toast.astro  |  2 ++
 src/components/Toast/Toast.svelte |  2 ++
 src/components/Toast/Toast.tsx    |  2 ++
 src/components/Toast/toast.scss   | 31 +++++++++++++++++++++++-
 src/components/Toast/toast.ts     |  1 +
 src/pages/toast.astro             | 39 +++++++++++++++++++++++++++----
 src/utils/toast.ts                | 15 +++++++++---
 7 files changed, 84 insertions(+), 8 deletions(-)

diff --git a/src/components/Toast/Toast.astro b/src/components/Toast/Toast.astro
index ab9a0dd..ee009c6 100644
--- a/src/components/Toast/Toast.astro
+++ b/src/components/Toast/Toast.astro
@@ -7,11 +7,13 @@ import './toast.scss'
 interface Props extends ToastProps {}
 
 const {
+    position,
     className
 } = Astro.props
 
 const classes = [
     'w-toast',
+    position,
     className
 ].filter(Boolean).join(' ')
 ---
diff --git a/src/components/Toast/Toast.svelte b/src/components/Toast/Toast.svelte
index a965b80..7eccc1a 100644
--- a/src/components/Toast/Toast.svelte
+++ b/src/components/Toast/Toast.svelte
@@ -3,10 +3,12 @@
     import Alert from '../Alert/Alert.svelte'
     import './toast.scss'
 
+    export let position: ToastProps['position'] = ''
     export let className: ToastProps['className'] = ''
 
     const classes = [
         'w-toast',
+        position,
         className
     ].filter(Boolean).join(' ')
 </script>
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index bbff356..79004f3 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -11,12 +11,14 @@ type ReactToastProps = {
 
 const Toast = ({
     icon,
+    position,
     className,
     children,
     ...rest
 }: ReactToastProps) => {
     const classes = [
         'w-toast',
+        position,
         className
     ].filter(Boolean).join(' ')
 
diff --git a/src/components/Toast/toast.scss b/src/components/Toast/toast.scss
index e4e2022..cb71f73 100644
--- a/src/components/Toast/toast.scss
+++ b/src/components/Toast/toast.scss
@@ -1,14 +1,43 @@
 @import '../../scss/config.scss';
 
 .w-toast {
-    @include Transition(transform);
     background: #000;
     position: fixed;
     right: 20px;
     bottom: 20px;
     transform: translateY(calc(100% + 25px));
 
+    &:not(.no-anim) {
+        @include Transition(transform);
+    }
+
     &.show {
         transform: translateY(0);
     }
+
+    &.bottom-left,
+    &.top-left {
+        right: auto;
+        left: 20px;
+    }
+
+    &.top-left,
+    &.top-right,
+    &.top-full {
+        bottom: auto;
+        top: 20px;
+        transform: translateY(calc(-100% - 25px));
+
+        &.show {
+            transform: translateY(0);
+        }
+    }
+
+    &.bottom-full {
+        left: 20px;
+    }
+
+    &.top-full {
+        left: 20px;
+    }
 }
diff --git a/src/components/Toast/toast.ts b/src/components/Toast/toast.ts
index 3f891a4..10ca958 100644
--- a/src/components/Toast/toast.ts
+++ b/src/components/Toast/toast.ts
@@ -1,5 +1,6 @@
 import type { AlertProps } from '../Alert/alert'
 
 export type ToastProps = {
+    position?: string
     [key: string]: any
 } & AlertProps
diff --git a/src/pages/toast.astro b/src/pages/toast.astro
index 7ec6be7..deb0ce1 100644
--- a/src/pages/toast.astro
+++ b/src/pages/toast.astro
@@ -153,6 +153,36 @@ const sections = [
                 </section.component>
             </ComponentWrapper>
 
+            <ComponentWrapper title="Toast in bottom left">
+                <Button theme="secondary" id={`toast-btn-9${index}`}>
+                    Show Toast
+                </Button>
+
+                <section.component title="Bottom left" id={`toast-9${index}`} position="bottom-left">
+                    Toast in bottom left corner
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Toast in top left">
+                <Button theme="secondary" id={`toast-btn-10${index}`}>
+                    Show Toast
+                </Button>
+
+                <section.component title="Top left" id={`toast-10${index}`} position="top-left">
+                    Toast in top left corner
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Toast in top right">
+                <Button theme="secondary" id={`toast-btn-11${index}`}>
+                    Show Toast
+                </Button>
+
+                <section.component title="Top right" id={`toast-11${index}`} position="top-right">
+                    Toast in top right corner
+                </section.component>
+            </ComponentWrapper>
+
             <ComponentWrapper title="Dismissable toast with long timeout">
                 <Button theme="secondary" id={`dismissable-show-${index}`}>
                     Show Toast
@@ -178,9 +208,9 @@ const sections = [
                 </section.component>
             </ComponentWrapper>
 
-            <ComponentWrapper title="Programmatically setting theme">
+            <ComponentWrapper title="Programmatically setting theme & pos">
                 <Button theme="secondary" id={`themed-btn-${index}`}>
-                    Show Toast
+                    Show Toast in top-left corner
                 </Button>
 
                 <section.component title="Original title" id={`themed-toast-${index}`}>
@@ -206,7 +236,7 @@ const sections = [
             ?.addEventListener('click', callback)
     }
 
-    const ids = Array(8).fill(10).map((x, index) => x * (index + 1))
+    const ids = Array(11).fill(10).map((x, index) => x * (index + 1))
     const buttons = [
         'astro',
         'svelte',
@@ -256,7 +286,8 @@ const sections = [
                 element: `#themed-toast-${x}`,
                 title: 'Title set through JS',
                 content: 'Theme set to "success"',
-                theme: 'success'
+                theme: 'success',
+                position: 'top-left'
             })
         })
     })
diff --git a/src/utils/toast.ts b/src/utils/toast.ts
index f9c7747..129d1a7 100644
--- a/src/utils/toast.ts
+++ b/src/utils/toast.ts
@@ -6,6 +6,7 @@ type Toast = {
     title?: AlertProps['title']
     content?: string
     theme?: AlertProps['theme']
+    position?: string
 }
 
 let defaultTimeout = 5000
@@ -21,17 +22,20 @@ export const toast = (config: Toast | string) => {
         timeout,
         title,
         content,
-        theme
+        theme,
+        position
     } = (typeof config === 'string' ? {} : config) as Toast
 
     const htmlElement = document.querySelector(element)
 
     if (htmlElement) {
-        htmlElement.classList.add('show')
-
         if (theme) {
             htmlElement.classList.add(theme)
         }
+        
+        if (position) {
+            htmlElement.classList.add(position, 'no-anim')
+        }
 
         if (title) {
             const titleElement = htmlElement.querySelector('.alert-title')
@@ -45,6 +49,11 @@ export const toast = (config: Toast | string) => {
             contentElement ? contentElement.innerHTML = content : null
         }
 
+        setTimeout(() => {
+            htmlElement.classList.remove('no-anim')
+            htmlElement.classList.add('show')
+        }, 0)
+
         setTimeout(() => {
             htmlElement.classList.remove('show')
         }, timeout || defaultTimeout)

From 1bc285f68eaaebe6089b256bcc029f3798fd4578 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Sun, 23 Jun 2024 15:51:11 +0200
Subject: [PATCH 18/23] =?UTF-8?q?=F0=9F=92=84=20Improve=20example=20page?=
 =?UTF-8?q?=20for=20Toast?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/toast.astro        | 183 +++++++++++------------------------
 src/scss/global/utility.scss |  13 +++
 2 files changed, 69 insertions(+), 127 deletions(-)

diff --git a/src/pages/toast.astro b/src/pages/toast.astro
index deb0ce1..c55c668 100644
--- a/src/pages/toast.astro
+++ b/src/pages/toast.astro
@@ -60,131 +60,62 @@ const sections = [
 
     {sections.map((section, index) => (
         <h1>{section.title}</h1>
-        <div class="grid md-2 lg-3">
-            <ComponentWrapper title="Toast with text only">
-                <Button theme="secondary" id={`toast-btn-0${index}`}>
-                    Show Toast
-                </Button>
-
-                <section.component id={`toast-0${index}`}>
-                    Toast with only text.
-                </section.component>
-            </ComponentWrapper>
-
-            <ComponentWrapper title="Toast with text and title">
-                <Button theme="secondary" id={`toast-btn-1${index}`}>
-                    Show Toast
-                </Button>
-
-                <section.component title="Note" id={`toast-1${index}`}>
-                    Toast with text and title.
-                </section.component>
-            </ComponentWrapper>
-
-            <ComponentWrapper title="Toast with emoji in title">
-                <Button theme="secondary" id={`toast-btn-2${index}`}>
-                    Show Toast
-                </Button>
-
-                <section.component title="💡 Note" id={`toast-2${index}`}>
-                    Toast with emoji in title
-                </section.component>
-            </ComponentWrapper>
-
-            <ComponentWrapper title="Informational toast">
-                <Button theme="secondary" id={`toast-btn-3${index}`}>
-                    Show Toast
-                </Button>
-
-                <section.component title="Information" theme="info" id={`toast-3${index}`}>
-                    Toast with info theme.
-                </section.component>
-            </ComponentWrapper>
-
-            <ComponentWrapper title="Success toast">
-                <Button theme="secondary" id={`toast-btn-4${index}`}>
-                    Show Toast
-                </Button>
-
-                <section.component title="Congratulations!" theme="success" id={`toast-4${index}`}>
-                    Toast with success theme.
-                </section.component>
-            </ComponentWrapper>
-
-            <ComponentWrapper title="Warning toast">
-                <Button theme="secondary" id={`toast-btn-5${index}`}>
-                    Show Toast
-                </Button>
-
-                <section.component title="Important" theme="warning" id={`toast-5${index}`}>
-                    Toast with warning theme.
-                </section.component>
-            </ComponentWrapper>
-
-            <ComponentWrapper title="Alert toast">
-                <Button theme="secondary" id={`toast-btn-6${index}`}>
-                    Show Toast
-                </Button>
-
-                <section.component title="Irreversible action" theme="alert" id={`toast-6${index}`}>
-                    Toast with alert theme.
-                </section.component>
-            </ComponentWrapper>
-
-            <ComponentWrapper title="Toast with custom icon">
-                <Button theme="secondary" id={`toast-btn-7${index}`}>
-                    Show Toast
-                </Button>
-
-                <section.component title="Custom icons" id={`toast-7${index}`}>
-                    <Icon type="github" slot="icon" />
-                    Toast with custom icon.
-                </section.component>
-            </ComponentWrapper>
-
-            <ComponentWrapper title="Themed toast with icon">
-                <Button theme="secondary" id={`toast-btn-8${index}`}>
-                    Show Toast
-                </Button>
-
-                <section.component title="Themed toast with icon" theme="success" id={`toast-8${index}`}>
-                    <Icon type="github" slot="icon" />
-                    Toast with theme and icon.
-                </section.component>
-            </ComponentWrapper>
-
-            <ComponentWrapper title="Toast in bottom left">
-                <Button theme="secondary" id={`toast-btn-9${index}`}>
-                    Show Toast
-                </Button>
-
-                <section.component title="Bottom left" id={`toast-9${index}`} position="bottom-left">
-                    Toast in bottom left corner
-                </section.component>
-            </ComponentWrapper>
-
-            <ComponentWrapper title="Toast in top left">
-                <Button theme="secondary" id={`toast-btn-10${index}`}>
-                    Show Toast
-                </Button>
-
-                <section.component title="Top left" id={`toast-10${index}`} position="top-left">
-                    Toast in top left corner
-                </section.component>
-            </ComponentWrapper>
-
-            <ComponentWrapper title="Toast in top right">
-                <Button theme="secondary" id={`toast-btn-11${index}`}>
-                    Show Toast
-                </Button>
-
-                <section.component title="Top right" id={`toast-11${index}`} position="top-right">
-                    Toast in top right corner
-                </section.component>
-            </ComponentWrapper>
+        <div class="flex wrap">
+            <Button theme="secondary" id={`toast-btn-0${index}`} theme="outline">Toast with text only</Button>
+            <Button theme="secondary" id={`toast-btn-1${index}`}>Toast with text and title</Button>
+            <Button theme="secondary" id={`toast-btn-2${index}`}>💡 Toast with emoji in title</Button>
+            <Button theme="secondary" id={`toast-btn-3${index}`} theme="info">Informational toast</Button>
+            <Button theme="secondary" id={`toast-btn-4${index}`} theme="success">Success toast</Button>
+            <Button theme="secondary" id={`toast-btn-5${index}`} theme="warning">Warning toast</Button>
+            <Button theme="secondary" id={`toast-btn-6${index}`} theme="alert">Alert toast</Button>
+            <Button theme="secondary" id={`toast-btn-7${index}`}>🎨 Toast with custom icon</Button>
+            <Button theme="secondary" id={`toast-btn-8${index}`}>🎨 Themed toast with icon</Button>
+            <Button theme="secondary" id={`toast-btn-9${index}`}>↙️Toast in bottom left</Button>
+            <Button theme="secondary" id={`toast-btn-10${index}`}>↖️ Toast in top left</Button>
+            <Button theme="secondary" id={`toast-btn-11${index}`}>↗️Toast in top right</Button>
+        </div>
+        <div class="grid md-2 my">
+            <section.component id={`toast-0${index}`}>
+                Toast with only text.
+            </section.component>
+            <section.component title="Note" id={`toast-1${index}`}>
+                Toast with text and title.
+            </section.component>
+            <section.component title="💡 Note" id={`toast-2${index}`}>
+                Toast with emoji in title
+            </section.component>
+            <section.component title="Information" theme="info" id={`toast-3${index}`}>
+                Toast with info theme.
+            </section.component>
+            <section.component title="Congratulations!" theme="success" id={`toast-4${index}`}>
+                Toast with success theme.
+            </section.component>
+            <section.component title="Important" theme="warning" id={`toast-5${index}`}>
+                Toast with warning theme.
+            </section.component>
+            <section.component title="Irreversible action" theme="alert" id={`toast-6${index}`}>
+                Toast with alert theme.
+            </section.component>
+            <section.component title="Custom icons" id={`toast-7${index}`}>
+                <Icon type="github" slot="icon" />
+                Toast with custom icon.
+            </section.component>
+            <section.component title="Themed toast with icon" theme="success" id={`toast-8${index}`}>
+                <Icon type="github" slot="icon" />
+                Toast with theme and icon.
+            </section.component>
+            <section.component title="Bottom left" id={`toast-9${index}`} position="bottom-left">
+                Toast in bottom left corner
+            </section.component>
+            <section.component title="Top left" id={`toast-10${index}`} position="top-left">
+                Toast in top left corner
+            </section.component>
+            <section.component title="Top right" id={`toast-11${index}`} position="top-right">
+                Toast in top right corner
+            </section.component>
 
             <ComponentWrapper title="Dismissable toast with long timeout">
-                <Button theme="secondary" id={`dismissable-show-${index}`}>
+                <Button id={`dismissable-show-${index}`}>
                     Show Toast
                 </Button>
 
@@ -198,17 +129,15 @@ const sections = [
                 </section.component>
             </ComponentWrapper>
 
-            <ComponentWrapper title="Programmatically setting copy">
+            <ComponentWrapper title="Programmatically setting copy, theme & pos">
                 <Button theme="secondary" id={`programmatic-btn-${index}`}>
-                    Show Toast
+                    Programmatically setting copy
                 </Button>
 
                 <section.component title="Original title" id={`programmatic-toast-${index}`}>
                     Original content
                 </section.component>
-            </ComponentWrapper>
 
-            <ComponentWrapper title="Programmatically setting theme & pos">
                 <Button theme="secondary" id={`themed-btn-${index}`}>
                     Show Toast in top-left corner
                 </Button>
diff --git a/src/scss/global/utility.scss b/src/scss/global/utility.scss
index 080db70..6e96b1c 100644
--- a/src/scss/global/utility.scss
+++ b/src/scss/global/utility.scss
@@ -12,6 +12,19 @@
         gap: 20px;
     }
 
+    .flex {
+        display: flex;
+        gap: 20px;
+
+        &.wrap {
+            flex-wrap: wrap;
+        }
+    }
+
+    .my {
+        margin: 20px auto;
+    }
+
     @include Media('md') {
         .grid.md-2 {
             grid-template-columns: repeat(2, minmax(0, 1fr));

From f2a146e490642cb87a5221418047a00dc3d6034c Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Mon, 24 Jun 2024 09:00:56 +0200
Subject: [PATCH 19/23] =?UTF-8?q?=E2=9C=A8=20Add=20Timeline=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |   1 +
 src/components/Timeline/Timeline.astro        |  34 +++++
 src/components/Timeline/Timeline.svelte       |  30 ++++
 src/components/Timeline/Timeline.tsx          |  41 +++++
 src/components/Timeline/timeline.scss         |  71 +++++++++
 src/components/Timeline/timeline.ts           |  57 +++++++
 .../TimelineItem/TimelineItem.astro           |  26 ++++
 .../TimelineItem/TimelineItem.svelte          |  22 +++
 src/components/TimelineItem/TimelineItem.tsx  |  32 ++++
 src/components/TimelineItem/timelineitem.scss |  31 ++++
 src/components/TimelineItem/timelineitem.ts   |   5 +
 src/pages/index.astro                         |   8 +
 src/pages/timeline.astro                      | 143 ++++++++++++++++++
 src/scss/setup.scss                           |   3 +
 14 files changed, 504 insertions(+)
 create mode 100644 src/components/Timeline/Timeline.astro
 create mode 100644 src/components/Timeline/Timeline.svelte
 create mode 100644 src/components/Timeline/Timeline.tsx
 create mode 100644 src/components/Timeline/timeline.scss
 create mode 100644 src/components/Timeline/timeline.ts
 create mode 100644 src/components/TimelineItem/TimelineItem.astro
 create mode 100644 src/components/TimelineItem/TimelineItem.svelte
 create mode 100644 src/components/TimelineItem/TimelineItem.tsx
 create mode 100644 src/components/TimelineItem/timelineitem.scss
 create mode 100644 src/components/TimelineItem/timelineitem.ts
 create mode 100644 src/pages/timeline.astro

diff --git a/README.md b/README.md
index 95956c7..2c6acbc 100644
--- a/README.md
+++ b/README.md
@@ -149,5 +149,6 @@ import { Accordion } from 'webcoreui/react'
 - [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)
 - [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)
 - [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs)
+- [Timeline](https://github.com/Frontendland/webcoreui/blob/main/src/pages/timeline.astro)
 - [Toast](https://github.com/Frontendland/webcoreui/tree/main/src/components/Toast)
 - [Tooltip](https://github.com/Frontendland/webcoreui/blob/main/src/pages/tooltip.astro)
diff --git a/src/components/Timeline/Timeline.astro b/src/components/Timeline/Timeline.astro
new file mode 100644
index 0000000..f1e92ef
--- /dev/null
+++ b/src/components/Timeline/Timeline.astro
@@ -0,0 +1,34 @@
+---
+import type { TimelineProps } from './timeline'
+import './timeline.scss'
+
+interface Props extends TimelineProps {}
+
+const {
+    theme,
+    counter,
+    alternate,
+    centered,
+    color,
+    textColor,
+    className
+} = Astro.props
+
+const classes = [
+    'w-timeline',
+    theme,
+    alternate && 'alternate',
+    centered && 'centered',
+    className
+]
+
+const styles = [
+    color && `--w-timeline-color: ${color};`,
+    textColor && `--w-timeline-text-color: ${textColor};`,
+    counter && `--w-timeline-counter: ${counter};`,
+].join('')
+---
+
+<ul class:list={classes} style={styles}>
+    <slot />
+</ul>
diff --git a/src/components/Timeline/Timeline.svelte b/src/components/Timeline/Timeline.svelte
new file mode 100644
index 0000000..8e2d93f
--- /dev/null
+++ b/src/components/Timeline/Timeline.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import type { TimelineProps } from './timeline'
+    import './timeline.scss'
+
+    export let theme: TimelineProps['theme'] = null
+    export let counter: TimelineProps['counter'] = null
+    export let alternate: TimelineProps['alternate'] = false
+    export let centered: TimelineProps['centered'] = false
+    export let color: TimelineProps['color'] = ''
+    export let textColor: TimelineProps['textColor'] = ''
+    export let className: TimelineProps['className'] = ''
+
+    const classes = [
+        'w-timeline',
+        theme,
+        alternate && 'alternate',
+        centered && 'centered',
+        className
+    ].filter(Boolean).join(' ')
+
+    const styles = [
+        color && `--w-timeline-color: ${color};`,
+        textColor && `--w-timeline-text-color: ${textColor};`,
+        counter && `--w-timeline-counter: ${counter};`,
+    ].join('')
+</script>
+
+<ul class={classes} style={styles}>
+    <slot />
+</ul>
diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
new file mode 100644
index 0000000..68a3e75
--- /dev/null
+++ b/src/components/Timeline/Timeline.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import type { TimelineProps } from './timeline'
+
+import './timeline.scss'
+
+type ReactTimelineProps = {
+    children: React.ReactNode
+} & TimelineProps
+
+const Timeline = ({
+    theme,
+    counter,
+    alternate,
+    centered,
+    color,
+    textColor,
+    className,
+    children
+}: ReactTimelineProps) => {
+    const classes = [
+        'w-timeline',
+        theme,
+        alternate && 'alternate',
+        centered && 'centered',
+        className
+    ].filter(Boolean).join(' ')
+
+    const styles = {
+        ...(color && { '--w-timeline-color': color }),
+        ...(textColor && { '--w-timeline-text-color': textColor }),
+        ...(counter && { '--w-timeline-counter': counter }),
+    } as React.CSSProperties
+
+    return (
+        <ul className={classes} style={styles}>
+            {children}
+        </ul>
+    )
+}
+
+export default Timeline
diff --git a/src/components/Timeline/timeline.scss b/src/components/Timeline/timeline.scss
new file mode 100644
index 0000000..d1944fb
--- /dev/null
+++ b/src/components/Timeline/timeline.scss
@@ -0,0 +1,71 @@
+@import '../../scss/config.scss';
+
+// (circle width + border * 2) / 2 - line width
+$leftOffset: calc(((25px + 4px) / 2) - 1px);
+$rightOffset: calc((((25px + 4px) / 2) - 1px) * -1);
+
+.w-timeline {
+    display: flex;
+    gap: 20px;
+    flex-direction: column;
+    padding: 0 0 0 40px;
+    margin: 0;
+    list-style-type: none;
+    counter-reset: item;
+    position: relative;
+
+    &::before {
+        position: absolute;
+        content: '';
+        width: 1px;
+        background: var(--w-timeline-color);
+        height: 100%;
+        left: $leftOffset
+    }
+
+    &.fill li::before {
+        content: '';
+    }
+
+    &.stroke li::before {
+        background: #000;
+        border: 2px solid var(--w-timeline-color);
+    }
+}
+
+@include Media('xs') {
+    .w-timeline {
+        &.alternate {
+            padding: 0;
+    
+            &::before {
+                left: calc(50% - 1px);
+            }
+    
+            li {
+                width: 50%;
+    
+                &:nth-child(odd) {
+                    padding-right: 40px;
+                }
+    
+                &:nth-child(even) {
+                    align-self: flex-end;
+                    padding-left: 40px;
+    
+                    &::before {
+                        left: 25px;
+                    }
+                }
+    
+                &::before {
+                    right: $rightOffset;
+                }
+            }
+        }
+    
+        &.centered li:nth-child(odd) {
+            text-align: right;
+        }
+    }
+}
diff --git a/src/components/Timeline/timeline.ts b/src/components/Timeline/timeline.ts
new file mode 100644
index 0000000..6cfc8d4
--- /dev/null
+++ b/src/components/Timeline/timeline.ts
@@ -0,0 +1,57 @@
+export type TimelineProps = {
+    theme?: 'fill' | 'stroke' | 'stroke fill' | null
+    alternate?: boolean
+    centered?: boolean
+    color?: string
+    textColor?: string
+    className?: string
+    counter?: 'arabic-indic'
+    | 'armenian'
+    | 'bengali'
+    | 'cambodian'
+    | 'circle'
+    | 'cjk-decimal'
+    | 'cjk-earthly-branch'
+    | 'cjk-heavenly-stem'
+    | 'decimal-leading-zero'
+    | 'devanagari'
+    | 'disc'
+    | 'disclosure-closed'
+    | 'disclosure-open'
+    | 'ethiopic-numeric'
+    | 'georgian'
+    | 'gujarati'
+    | 'gurmukhi'
+    | 'hebrew'
+    | 'hiragana'
+    | 'hiragana-iroha'
+    | 'japanese-formal'
+    | 'kannada'
+    | 'katakana'
+    | 'katakana-iroha'
+    | 'khmer'
+    | 'korean-hangul-formal'
+    | 'korean-hanja-formal'
+    | 'lao'
+    | 'lower-alpha'
+    | 'lower-alpha'
+    | 'lower-armenian'
+    | 'lower-greek'
+    | 'lower-roman'
+    | 'malayalam'
+    | 'mongolian'
+    | 'myanmar'
+    | 'oriya'
+    | 'persian'
+    | 'simp-chinese-formal'
+    | 'square'
+    | 'tamil'
+    | 'telugu'
+    | 'thai'
+    | 'tibetan'
+    | 'trad-chinese-formal'
+    | 'upper-alpha'
+    | 'upper-armenian'
+    | 'upper-roman'
+    | null
+}
diff --git a/src/components/TimelineItem/TimelineItem.astro b/src/components/TimelineItem/TimelineItem.astro
new file mode 100644
index 0000000..0b55d76
--- /dev/null
+++ b/src/components/TimelineItem/TimelineItem.astro
@@ -0,0 +1,26 @@
+---
+import type { TimelineItemProps } from './timelineitem'
+import './timelineitem.scss'
+
+interface Props extends TimelineItemProps {}
+
+const {
+    title,
+    titleTag = 'span',
+    className
+} = Astro.props
+
+const classes = [
+    'w-timeline-item',
+    className
+]
+
+const Title = titleTag
+---
+
+<li class:list={classes}>
+    {title && (
+        <Title class:list="timeline-title">{title}</Title>
+    )}
+    <slot />
+</li>
diff --git a/src/components/TimelineItem/TimelineItem.svelte b/src/components/TimelineItem/TimelineItem.svelte
new file mode 100644
index 0000000..f996eaa
--- /dev/null
+++ b/src/components/TimelineItem/TimelineItem.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type { TimelineItemProps } from './timelineitem'
+    import './timelineitem.scss'
+
+    export let title: TimelineItemProps['title'] = ''
+    export let titleTag: TimelineItemProps['titleTag'] = 'span'
+    export let className: TimelineItemProps['className'] = ''
+
+    const classes = [
+        'w-timeline-item',
+        className
+    ].filter(Boolean).join(' ')
+</script>
+
+<li class={classes}>
+    {#if title}
+        <svelte:element this={titleTag} class="timeline-title">
+            {title}
+        </svelte:element>
+    {/if}
+    <slot />
+</li>
diff --git a/src/components/TimelineItem/TimelineItem.tsx b/src/components/TimelineItem/TimelineItem.tsx
new file mode 100644
index 0000000..f109b6a
--- /dev/null
+++ b/src/components/TimelineItem/TimelineItem.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import type { TimelineItemProps } from './timelineitem'
+
+import './timelineitem.scss'
+
+type ReactTimelineItemProps = {
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+} & Omit<TimelineItemProps, 'titleTag'>
+
+const TimelineItem = ({
+    title,
+    TitleTag = 'span',
+    className,
+    children
+}: ReactTimelineItemProps) => {
+    const classes = [
+        'w-timeline-item',
+        className
+    ].filter(Boolean).join(' ')
+
+    return (
+        <li className={classes}>
+            {title && (
+                <TitleTag className="timeline-title">{title}</TitleTag>
+            )}
+            {children}
+        </li>
+    )
+}
+
+export default TimelineItem
diff --git a/src/components/TimelineItem/timelineitem.scss b/src/components/TimelineItem/timelineitem.scss
new file mode 100644
index 0000000..7813be3
--- /dev/null
+++ b/src/components/TimelineItem/timelineitem.scss
@@ -0,0 +1,31 @@
+@import '../../scss/config.scss';
+
+.w-timeline-item {
+    position: relative;
+    font-size: 16px;
+
+    &::before {
+        content: counter(item, var(--w-timeline-counter));
+        counter-increment: item;
+        position: absolute;
+        top: -5px;
+        width: 25px;
+        height: 25px;
+        border-radius: 100%;
+        background: var(--w-timeline-color);
+        color: var(--w-timeline-text-color);
+        font-size: 14px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 2px solid #000;
+        margin-left: -40px;
+    }
+
+    .timeline-title {
+        display: block;
+        margin-bottom: 10px;
+        font-family: Bold;
+        font-size: 18px;
+    }
+}
diff --git a/src/components/TimelineItem/timelineitem.ts b/src/components/TimelineItem/timelineitem.ts
new file mode 100644
index 0000000..306d2a8
--- /dev/null
+++ b/src/components/TimelineItem/timelineitem.ts
@@ -0,0 +1,5 @@
+export type TimelineItemProps = {
+    title?: string
+    titleTag?: string
+    className?: string
+}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a71a6d3..2859fe7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -14,6 +14,8 @@ import Rating from '@components/Rating/Rating.astro'
 import Spinner from '@components/Spinner/Spinner.astro'
 import Switch from '@components/Switch/Switch.astro'
 import Tabs from '@components/Tabs/Tabs.astro'
+import Timeline from '@components/Timeline/Timeline.astro'
+import TimelineItem from '@components/TimelineItem/TimelineItem.astro'
 
 import infoIcon from '../icons/info.svg?raw'
 import gitHubIcon from '../icons/github.svg?raw'
@@ -126,6 +128,12 @@ const tabItems = [{
         <CardWrapper title="Tabs" href="/tabs">
             <Tabs items={tabItems} theme="boxed" />
         </CardWrapper>
+        <CardWrapper title="Timeline" href="/timeline">
+            <Timeline>
+                <TimelineItem>Getting Started</TimelineItem>
+                <TimelineItem>Setup</TimelineItem>
+            </Timeline>
+        </CardWrapper>
         <CardWrapper title="Toast" href="/toast">
             <Alert theme="success">Post saved</Alert>
         </CardWrapper>
diff --git a/src/pages/timeline.astro b/src/pages/timeline.astro
new file mode 100644
index 0000000..286ced0
--- /dev/null
+++ b/src/pages/timeline.astro
@@ -0,0 +1,143 @@
+---
+import Layout from '@static/Layout.astro'
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+
+import Button from '@components/Button/Button.astro'
+import AstroTimeline from '@components/Timeline/Timeline.astro'
+import SvelteTimeline from '@components/Timeline/Timeline.svelte'
+import ReactTimeline from '@components/Timeline/Timeline.tsx'
+
+import AstroTimelineItem from '@components/TimelineItem/TimelineItem.astro'
+import SvelteTimelineItem from '@components/TimelineItem/TimelineItem.svelte'
+import ReactTimelineItem from '@components/TimelineItem/TimelineItem.tsx'
+
+const sections = [
+    {
+        title: 'Astro timelines',
+        component: AstroTimeline,
+        item: AstroTimelineItem
+    },
+    {
+        title: 'Svelte timelines',
+        component: SvelteTimeline,
+        item: SvelteTimelineItem
+    },
+    {
+        title: 'React timelines',
+        component: ReactTimeline,
+        item: ReactTimelineItem
+    }
+]
+---
+
+<Layout>
+    <h1>Timeline</h1>
+    <div class="grid md-2 lg-3">
+        <ComponentWrapper type="Astro">
+            <AstroTimeline>
+                <AstroTimelineItem>Getting started</AstroTimelineItem>
+                <AstroTimelineItem>Setup</AstroTimelineItem>
+                <AstroTimelineItem>Conclusion</AstroTimelineItem>
+            </AstroTimeline>
+        </ComponentWrapper>
+
+        <ComponentWrapper type="Svelte">
+            <SvelteTimeline color="#e73f40" theme="stroke">
+                <SvelteTimelineItem>Getting started</SvelteTimelineItem>
+                <SvelteTimelineItem>Setup</SvelteTimelineItem>
+                <SvelteTimelineItem>Conclusion</SvelteTimelineItem>
+            </SvelteTimeline>
+        </ComponentWrapper>
+
+        <ComponentWrapper type="React">
+            <ReactTimeline color="#48dbfb" theme="stroke">
+                <ReactTimelineItem>Getting started</ReactTimelineItem>
+                <ReactTimelineItem>Setup</ReactTimelineItem>
+                <ReactTimelineItem>Conclusion</ReactTimelineItem>
+            </ReactTimeline>
+        </ComponentWrapper>
+    </div>
+
+    {sections.map(section => (
+        <h1>{section.title}</h1>
+        <div class="grid md-2 lg-3">
+            <ComponentWrapper title="Default with components">
+                <section.component>
+                    <section.item>Getting started</section.item>
+                    <section.item>Setup</section.item>
+                    <section.item>
+                        <ComponentWrapper title="Conclusion">
+                            <Button>Finish</Button>
+                        </ComponentWrapper>
+                    </section.item>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="With titles">
+                <section.component>
+                    <section.item title="Start here">Getting started</section.item>
+                    <section.item title="Prerequisites">Setup</section.item>
+                    <section.item title="Wrapping Up">Conclusion</section.item>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Fill only">
+                <section.component theme="fill">
+                    <section.item>Getting started</section.item>
+                    <section.item>Setup</section.item>
+                    <section.item>Conclusion</section.item>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Stroke">
+                <section.component theme="stroke">
+                    <section.item>Getting started</section.item>
+                    <section.item>Setup</section.item>
+                    <section.item>Conclusion</section.item>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Stroke only">
+                <section.component theme="stroke fill">
+                    <section.item>Getting started</section.item>
+                    <section.item>Setup</section.item>
+                    <section.item>Conclusion</section.item>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Custom counter">
+                <section.component counter="upper-alpha">
+                    <section.item>Getting started</section.item>
+                    <section.item>Setup</section.item>
+                    <section.item>Conclusion</section.item>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Custom color">
+                <section.component color="#1dd1a1" textColor="#000">
+                    <section.item>Getting started</section.item>
+                    <section.item>Setup</section.item>
+                    <section.item>Conclusion</section.item>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Alternate">
+                <section.component alternate={true}>
+                    <section.item>Getting started</section.item>
+                    <section.item>Setup</section.item>
+                    <section.item>Conclusion</section.item>
+                    <section.item>Resources</section.item>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Alternate centered">
+                <section.component alternate={true} centered={true}>
+                    <section.item>Getting started</section.item>
+                    <section.item>Setup</section.item>
+                    <section.item>Conclusion</section.item>
+                    <section.item>Resources</section.item>
+                </section.component>
+            </ComponentWrapper>
+        </div>
+    ))}
+</Layout>
diff --git a/src/scss/setup.scss b/src/scss/setup.scss
index f2ce3b6..bbcd16b 100644
--- a/src/scss/setup.scss
+++ b/src/scss/setup.scss
@@ -23,6 +23,9 @@ $config: (
     --w-spinner-dash: 8;
     --w-tooltip-background: #FFF;
     --w-tooltip-color: #000;
+    --w-timeline-color: #252525;
+    --w-timeline-text-color: #FFF;
+    --w-timeline-counter: decimal;
 }
 
 @function config($key) {

From 6505075ccd24786f244c5035e3f7089ab0d56a25 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Mon, 24 Jun 2024 09:11:14 +0200
Subject: [PATCH 20/23] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20Move=20React=20ty?=
 =?UTF-8?q?pe=20definitions=20to=20type=20files?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Alert/Alert.tsx                           | 9 +--------
 src/components/Alert/alert.ts                            | 6 ++++++
 src/components/Badge/Badge.tsx                           | 6 +-----
 src/components/Badge/badge.ts                            | 4 ++++
 src/components/Button/Button.tsx                         | 6 +-----
 src/components/Button/button.ts                          | 4 ++++
 src/components/Card/Card.tsx                             | 8 +-------
 src/components/Card/card.ts                              | 6 ++++++
 src/components/Checkbox/Checkbox.tsx                     | 6 +-----
 src/components/Checkbox/checkbox.ts                      | 4 ++++
 src/components/ConditionalWrapper/ConditionalWrapper.tsx | 7 +++----
 src/components/Radio/Radio.tsx                           | 6 +-----
 src/components/Radio/radio.ts                            | 4 ++++
 src/components/Switch/Switch.tsx                         | 6 +-----
 src/components/Switch/switch.ts                          | 4 ++++
 src/components/Tabs/Tabs.tsx                             | 8 ++------
 src/components/Tabs/tabs.ts                              | 4 ++++
 src/components/Timeline/Timeline.tsx                     | 6 +-----
 src/components/Timeline/timeline.ts                      | 4 ++++
 src/components/Toast/Toast.tsx                           | 7 +------
 src/components/Toast/toast.ts                            | 5 +++++
 21 files changed, 59 insertions(+), 61 deletions(-)

diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index bdc0a76..bd039ad 100644
--- a/src/components/Alert/Alert.tsx
+++ b/src/components/Alert/Alert.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import type { AlertProps } from './alert'
+import type { ReactAlertProps } from './alert'
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
 import info from '../../icons/info.svg?raw'
@@ -16,13 +16,6 @@ const iconMap = {
     alert
 }
 
-type ReactAlertProps = {
-    Element?: keyof JSX.IntrinsicElements
-    TitleTag?: keyof JSX.IntrinsicElements
-    children: React.ReactNode
-    icon?: string
-} & AlertProps
-
 const Alert = ({
     Element = 'section',
     title,
diff --git a/src/components/Alert/alert.ts b/src/components/Alert/alert.ts
index d76a8af..04bfcef 100644
--- a/src/components/Alert/alert.ts
+++ b/src/components/Alert/alert.ts
@@ -10,3 +10,9 @@ export type AlertProps = {
         | 'alert'
         | null
 }
+
+export type ReactAlertProps = {
+    Element?: keyof JSX.IntrinsicElements
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+} & Omit<AlertProps, 'titleTag' | 'element'>
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index 39ca115..f8c9788 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -1,11 +1,7 @@
 import React from 'react'
-import type { BadgeProps } from './badge'
+import type { ReactBadgeProps } from './badge'
 import './badge.scss'
 
-type ReactBadgeProps = {
-    children: React.ReactNode
-} & BadgeProps
-
 const Badge = ({ theme, onClick, children, ...rest }: ReactBadgeProps) => {
     const classes = [
         'w-badge',
diff --git a/src/components/Badge/badge.ts b/src/components/Badge/badge.ts
index fe737b2..63b8ec6 100644
--- a/src/components/Badge/badge.ts
+++ b/src/components/Badge/badge.ts
@@ -9,3 +9,7 @@ export type BadgeProps = {
         | null
     onClick?: () => any
 }
+
+export type ReactBadgeProps = {
+    children: React.ReactNode
+} & BadgeProps
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 497eb76..35a2fe5 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,11 +1,7 @@
 import React from 'react'
-import type { ButtonProps } from './button'
+import type { ReactButtonProps } from './button'
 import './button.scss'
 
-type ReactButtonProps = {
-    children: React.ReactNode
-} & ButtonProps
-
 const Button = ({
     theme,
     bold,
diff --git a/src/components/Button/button.ts b/src/components/Button/button.ts
index a06a896..2b0131a 100644
--- a/src/components/Button/button.ts
+++ b/src/components/Button/button.ts
@@ -12,3 +12,7 @@ export type ButtonProps = {
     onClick?: () => any
     [key: string]: any
 }
+
+export type ReactButtonProps = {
+    children: React.ReactNode
+} & ButtonProps
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 25f10dc..160a22c 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -1,13 +1,7 @@
 import React from 'react'
-import type { CardProps } from './card'
+import type { ReactCardProps } from './card'
 import './card.scss'
 
-type ReactCardProps = {
-    Element?: keyof JSX.IntrinsicElements
-    TitleTag?: keyof JSX.IntrinsicElements
-    children: React.ReactNode
-} & CardProps
-
 const Card = ({
     Element = 'section',
     title,
diff --git a/src/components/Card/card.ts b/src/components/Card/card.ts
index 34c6708..71af3eb 100644
--- a/src/components/Card/card.ts
+++ b/src/components/Card/card.ts
@@ -7,3 +7,9 @@ export type CardProps = {
     secondary?: boolean
     [key: string]: any
 }
+
+export type ReactCardProps = {
+    Element?: keyof JSX.IntrinsicElements
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+} & Omit<CardProps, 'titleTag' | 'element'>
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index cfbf8cf..829c745 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,15 +1,11 @@
 import React from 'react'
-import type { CheckboxProps } from './checkbox'
+import type { ReactCheckboxProps } from './checkbox'
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
 import check from '../../icons/check.svg?raw'
 
 import './checkbox.scss'
 
-type ReactCheckboxProps = {
-    onClick?: (key: any) => any
-} & CheckboxProps
-
 const Checkbox = ({
     checked,
     label,
diff --git a/src/components/Checkbox/checkbox.ts b/src/components/Checkbox/checkbox.ts
index 51b073f..1231b6e 100644
--- a/src/components/Checkbox/checkbox.ts
+++ b/src/components/Checkbox/checkbox.ts
@@ -6,3 +6,7 @@ export type CheckboxProps = {
     boxed?: boolean
     color?: string
 }
+
+export type ReactCheckboxProps = {
+    onClick?: (key: any) => any
+} & CheckboxProps
diff --git a/src/components/ConditionalWrapper/ConditionalWrapper.tsx b/src/components/ConditionalWrapper/ConditionalWrapper.tsx
index 3a0b2bf..359a1ce 100644
--- a/src/components/ConditionalWrapper/ConditionalWrapper.tsx
+++ b/src/components/ConditionalWrapper/ConditionalWrapper.tsx
@@ -1,13 +1,12 @@
 import React from 'react'
 import type { ConditionalWrapperProps } from './conditionalwrapper'
 
-type ExtendedConditionalWrapperProps = {
-  condition: ConditionalWrapperProps['condition']
+type ReactConditionalWrapperProps = {
   wrapper: (_: React.ReactNode) => any
   children: React.ReactNode
-};
+} & ConditionalWrapperProps
 
-const ConditionalWrapper = ({ condition, wrapper, children }: ExtendedConditionalWrapperProps) =>
+const ConditionalWrapper = ({ condition, wrapper, children }: ReactConditionalWrapperProps) =>
   condition ? wrapper(children) : children
 
 export default ConditionalWrapper
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index 66e2dc9..525e44d 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -1,14 +1,10 @@
 import React from 'react'
-import type { RadioProps } from './radio'
+import type { ReactRadioProps } from './radio'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
 import './radio.scss'
 
-type ReactRadioProps = {
-    onChange?: (key: any) => any
-} & RadioProps
-
 const Radio = ({
     name,
     items,
diff --git a/src/components/Radio/radio.ts b/src/components/Radio/radio.ts
index 2e3d764..d37f5df 100644
--- a/src/components/Radio/radio.ts
+++ b/src/components/Radio/radio.ts
@@ -11,3 +11,7 @@ export type RadioProps = {
     inline?: boolean
     className?: string
 }
+
+export type ReactRadioProps = {
+    onChange?: (key: any) => any
+} & RadioProps
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index 7491914..a0c9ca4 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -1,11 +1,7 @@
 import React from 'react'
-import type { SwitchProps } from './switch'
+import type { ReactSwitchProps } from './switch'
 import './switch.scss'
 
-type ReactSwitchProps = {
-    onClick?: (key: any) => any
-} & SwitchProps
-
 const Switch = ({
     label,
     toggled,
diff --git a/src/components/Switch/switch.ts b/src/components/Switch/switch.ts
index 9706b4e..2e2e701 100644
--- a/src/components/Switch/switch.ts
+++ b/src/components/Switch/switch.ts
@@ -9,3 +9,7 @@ export type SwitchProps = {
     disabled?: boolean
     className?: string
 }
+
+export type ReactSwitchProps = {
+    onClick?: (key: any) => any
+} & SwitchProps
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index bc198f3..1325680 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -1,12 +1,8 @@
 import React, { useState, useRef } from 'react'
-import type { TabsProps } from './tabs'
+import type { ReactTabsProps } from './tabs'
 
 import './tabs.scss'
 
-type ReactTabsProps = {
-    children: React.ReactNode
-} & TabsProps
-
 const Tabs = ({
     items,
     theme,
@@ -40,7 +36,7 @@ const Tabs = ({
         setActive(tab)
     }
 
-    const isActive = (item: TabsProps['items'][0]) => {
+    const isActive = (item: ReactTabsProps['items'][0]) => {
         if (!active) {
             return item.active ? 'active' : undefined
         }
diff --git a/src/components/Tabs/tabs.ts b/src/components/Tabs/tabs.ts
index cb2d44d..d2f59d2 100644
--- a/src/components/Tabs/tabs.ts
+++ b/src/components/Tabs/tabs.ts
@@ -10,3 +10,7 @@ export type TabsProps = {
     even?: boolean
     className?: string
 }
+
+export type ReactTabsProps = {
+    children: React.ReactNode
+} & TabsProps
diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
index 68a3e75..4a083b4 100644
--- a/src/components/Timeline/Timeline.tsx
+++ b/src/components/Timeline/Timeline.tsx
@@ -1,12 +1,8 @@
 import React from 'react'
-import type { TimelineProps } from './timeline'
+import type { ReactTimelineProps } from './timeline'
 
 import './timeline.scss'
 
-type ReactTimelineProps = {
-    children: React.ReactNode
-} & TimelineProps
-
 const Timeline = ({
     theme,
     counter,
diff --git a/src/components/Timeline/timeline.ts b/src/components/Timeline/timeline.ts
index 6cfc8d4..4e11e8f 100644
--- a/src/components/Timeline/timeline.ts
+++ b/src/components/Timeline/timeline.ts
@@ -55,3 +55,7 @@ export type TimelineProps = {
     | 'upper-roman'
     | null
 }
+
+export type ReactTimelineProps = {
+    children: React.ReactNode
+} & TimelineProps
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index 79004f3..02b9c4d 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -1,14 +1,9 @@
 import React from 'react'
-import type { ToastProps } from './toast'
+import type { ReactToastProps } from './toast'
 import Alert from '../Alert/Alert.tsx'
 
 import './toast.scss'
 
-type ReactToastProps = {
-    children: React.ReactNode
-    icon?: string
-} & ToastProps
-
 const Toast = ({
     icon,
     position,
diff --git a/src/components/Toast/toast.ts b/src/components/Toast/toast.ts
index 10ca958..1483e39 100644
--- a/src/components/Toast/toast.ts
+++ b/src/components/Toast/toast.ts
@@ -4,3 +4,8 @@ export type ToastProps = {
     position?: string
     [key: string]: any
 } & AlertProps
+
+export type ReactToastProps = {
+    children: React.ReactNode
+    icon?: string
+} & ToastProps

From e5aff0947f36d1873cf5c11c206294290fd5c8fd Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Mon, 24 Jun 2024 12:19:19 +0200
Subject: [PATCH 21/23] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20Include=20right?=
 =?UTF-8?q?=20types=20for=20built=20packages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scripts/buildTypes.js                         | 19 +++++++++++++++++--
 .../ConditionalWrapper/ConditionalWrapper.tsx |  7 +------
 .../ConditionalWrapper/conditionalwrapper.ts  |  5 +++++
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/scripts/buildTypes.js b/scripts/buildTypes.js
index abeb697..33615e6 100644
--- a/scripts/buildTypes.js
+++ b/scripts/buildTypes.js
@@ -34,15 +34,30 @@ const buildTypes = type => {
     }
 
     if (type === 'react') {
+        const getTypeName = component => {
+            const componentsWithoutReactSpecificTypes = [
+                'Accordion',
+                'Avatar',
+                'Icon',
+                'Rating',
+                'Spinner',
+                'TimelineItem'
+            ]
+    
+            return componentsWithoutReactSpecificTypes.includes(component)
+                ? `${component}Props`
+                : `React${component}Props`
+        }
+
         return format(`
             import { FC } from 'react'
             ${components.map(component => {
-                return `import type { ${component}Props } from './components/${component}/${component.toLowerCase()}'`
+                return `import type { ${getTypeName(component)} } from './components/${component}/${component.toLowerCase()}'`
             }).join('\n')}
 
             declare module 'webcoreui/${type}' {
                 ${components.map(component => {
-                    return `export const ${component}: FC<${component}Props>`
+                    return `export const ${component}: FC<${getTypeName(component)}>`
                 }).join('\n\t')}
             }
         `)
diff --git a/src/components/ConditionalWrapper/ConditionalWrapper.tsx b/src/components/ConditionalWrapper/ConditionalWrapper.tsx
index 359a1ce..6208004 100644
--- a/src/components/ConditionalWrapper/ConditionalWrapper.tsx
+++ b/src/components/ConditionalWrapper/ConditionalWrapper.tsx
@@ -1,10 +1,5 @@
 import React from 'react'
-import type { ConditionalWrapperProps } from './conditionalwrapper'
-
-type ReactConditionalWrapperProps = {
-  wrapper: (_: React.ReactNode) => any
-  children: React.ReactNode
-} & ConditionalWrapperProps
+import type { ReactConditionalWrapperProps } from './conditionalwrapper'
 
 const ConditionalWrapper = ({ condition, wrapper, children }: ReactConditionalWrapperProps) =>
   condition ? wrapper(children) : children
diff --git a/src/components/ConditionalWrapper/conditionalwrapper.ts b/src/components/ConditionalWrapper/conditionalwrapper.ts
index 82b2747..570f0d9 100644
--- a/src/components/ConditionalWrapper/conditionalwrapper.ts
+++ b/src/components/ConditionalWrapper/conditionalwrapper.ts
@@ -1,3 +1,8 @@
 export type ConditionalWrapperProps = {
     condition: boolean
 }
+
+export type ReactConditionalWrapperProps = {
+    wrapper: (_: React.ReactNode) => any
+    children: React.ReactNode
+} & ConditionalWrapperProps

From 1ff865303e73491cb3ba3e3a54a76e189ba37387 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Mon, 24 Jun 2024 16:20:14 +0200
Subject: [PATCH 22/23] =?UTF-8?q?=E2=9C=A8=20Add=20Progress=20bar=20compon?=
 =?UTF-8?q?ent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                               |   1 +
 scripts/buildTypes.js                   |   3 +-
 src/components/Card/card.scss           |   1 +
 src/components/Progress/Progress.astro  |  40 +++++
 src/components/Progress/Progress.svelte |  38 +++++
 src/components/Progress/Progress.tsx    |  47 ++++++
 src/components/Progress/progress.scss   |  66 ++++++++
 src/components/Progress/progress.ts     |  12 ++
 src/pages/index.astro                   |   4 +
 src/pages/progress.astro                | 206 ++++++++++++++++++++++++
 src/playground/ReactPlayground.tsx      |  51 +++++-
 src/playground/SveltePlayground.svelte  |  48 +++++-
 src/playground/playground.module.scss   |   7 +
 src/scss/global/utility.scss            |   4 +
 src/scss/setup.scss                     |   4 +
 15 files changed, 519 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Progress/Progress.astro
 create mode 100644 src/components/Progress/Progress.svelte
 create mode 100644 src/components/Progress/Progress.tsx
 create mode 100644 src/components/Progress/progress.scss
 create mode 100644 src/components/Progress/progress.ts
 create mode 100644 src/pages/progress.astro
 create mode 100644 src/playground/playground.module.scss

diff --git a/README.md b/README.md
index 2c6acbc..9627883 100644
--- a/README.md
+++ b/README.md
@@ -144,6 +144,7 @@ import { Accordion } from 'webcoreui/react'
 - [Checkbox](https://github.com/Frontendland/webcoreui/tree/main/src/components/Checkbox)
 - [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)
 - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
+- [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
 - [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
 - [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
 - [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)
diff --git a/scripts/buildTypes.js b/scripts/buildTypes.js
index 33615e6..a76389a 100644
--- a/scripts/buildTypes.js
+++ b/scripts/buildTypes.js
@@ -41,7 +41,8 @@ const buildTypes = type => {
                 'Icon',
                 'Rating',
                 'Spinner',
-                'TimelineItem'
+                'TimelineItem',
+                'Progress'
             ]
     
             return componentsWithoutReactSpecificTypes.includes(component)
diff --git a/src/components/Card/card.scss b/src/components/Card/card.scss
index 9b545a6..a06dc85 100644
--- a/src/components/Card/card.scss
+++ b/src/components/Card/card.scss
@@ -22,6 +22,7 @@
     .card-body {
         padding: 20px;
         height: 100%;
+        position: relative;
 
         &.compact {
             background: #111;
diff --git a/src/components/Progress/Progress.astro b/src/components/Progress/Progress.astro
new file mode 100644
index 0000000..a9545b4
--- /dev/null
+++ b/src/components/Progress/Progress.astro
@@ -0,0 +1,40 @@
+---
+import type { ProgressProps } from './progress'
+import './progress.scss'
+
+interface Props extends ProgressProps {}
+
+const {
+    value,
+    size,
+    label,
+    color,
+    background,
+    square,
+    striped,
+    stripeLight,
+    stripeDark,
+    className
+} = Astro.props
+
+const classes = [
+    'w-progress',
+    size,
+    striped && 'striped',
+    square && 'square',
+    className
+]
+
+const styles = [
+    color && `--w-progress-color: ${color};`,
+    background && `--w-progress-background: ${background};`,
+    stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
+    stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
+].filter(Boolean).join('')
+---
+
+<div class:list={classes} style={styles}>
+    <div class="progress" style={`--w-progress-width: ${value}%;`}>
+        {label && `${value}%`}
+    </div>
+</div>
diff --git a/src/components/Progress/Progress.svelte b/src/components/Progress/Progress.svelte
new file mode 100644
index 0000000..acfcb9f
--- /dev/null
+++ b/src/components/Progress/Progress.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import type { ProgressProps } from './progress'
+    import './progress.scss'
+
+    export let value: ProgressProps['value'] = 0
+    export let size: ProgressProps['size'] = null
+    export let label: ProgressProps['label'] = false
+    export let color: ProgressProps['color'] = ''
+    export let background: ProgressProps['background'] = ''
+    export let square: ProgressProps['square'] = false
+    export let striped: ProgressProps['striped'] = false
+    export let stripeLight: ProgressProps['stripeLight'] = ''
+    export let stripeDark: ProgressProps['stripeDark'] = ''
+    export let className: ProgressProps['className'] = ''
+
+    const classes = [
+        'w-progress',
+        size,
+        striped && 'striped',
+        square && 'square',
+        className
+    ].filter(Boolean).join(' ')
+
+    const styles = [
+        color && `--w-progress-color: ${color};`,
+        background && `--w-progress-background: ${background};`,
+        stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
+        stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
+    ].filter(Boolean).join('')
+</script>
+
+<div class={classes} style={styles}>
+    <div class="progress" style={`--w-progress-width: ${value}%;`}>
+        {#if label}
+            {`${value}%`}
+        {/if}
+    </div>
+</div>
diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
new file mode 100644
index 0000000..44696c6
--- /dev/null
+++ b/src/components/Progress/Progress.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import type { ProgressProps } from './progress'
+
+import './progress.scss'
+
+const Progress = ({
+    value,
+    size,
+    label,
+    color,
+    background,
+    square,
+    striped,
+    stripeLight,
+    stripeDark,
+    className
+}: ProgressProps) => {
+    const classes = [
+        'w-progress',
+        size,
+        striped && 'striped',
+        square && 'square',
+        className
+    ].filter(Boolean).join(' ')
+
+    const styles = {
+        ...(color && { '--w-progress-color': color }),
+        ...(background && { '--w-progress-background': background }),
+        ...(stripeLight && { '--w-progress-stripe-light': stripeLight }),
+        ...(stripeDark && { '--w-progress-stripe-dark': stripeDark }),
+    } as React.CSSProperties
+
+    const percent = {
+        '--w-progress-width': `${value}%`
+    } as React.CSSProperties
+
+    return (
+        <div className={classes} style={styles}>
+            <div className="progress" style={percent}>
+                {label && `${value}%`}
+            </div>
+        </div>
+    )
+}
+
+export default Progress
+
diff --git a/src/components/Progress/progress.scss b/src/components/Progress/progress.scss
new file mode 100644
index 0000000..83aac40
--- /dev/null
+++ b/src/components/Progress/progress.scss
@@ -0,0 +1,66 @@
+@import '../../scss/config.scss';
+
+.w-progress {
+    width: 100%;
+    height: 10px;
+    background: var(--w-progress-background);
+    border-radius: 20px;
+    overflow: hidden;
+    color: var(--w-progress-background);
+    font-family: Bold;
+    font-size: 10px;
+    
+    &.medium {
+        height: 15px;
+        font-size: 12px;
+    }
+
+    &.large {
+        height: 20px;
+        font-size: 14px;
+    }
+
+    &.square {
+        border-radius: 2px;
+
+        .progress {
+            border-radius: 2px;
+        }
+    }
+
+    &.striped {
+
+        .progress {
+            background-size: 10px 10px;
+            background-image: linear-gradient(
+                -45deg,
+                var(--w-progress-stripe-light) 25%,
+                var(--w-progress-stripe-dark) 25%,
+                var(--w-progress-stripe-dark) 50%,
+                var(--w-progress-stripe-light) 50%,
+                var(--w-progress-stripe-light) 75%,
+                var(--w-progress-stripe-dark) 75%,
+                var(--w-progress-stripe-dark)
+            );
+        }
+
+        &.medium .progress {
+            background-size: 15px 15px;
+        }
+
+        &.large .progress {
+            background-size: 20px 20px;
+        }
+    }
+
+    .progress {
+        @include Transition(width);
+        width: var(--w-progress-width);
+        height: 100%;
+        background: var(--w-progress-color);
+        border-radius: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
diff --git a/src/components/Progress/progress.ts b/src/components/Progress/progress.ts
new file mode 100644
index 0000000..f53c67c
--- /dev/null
+++ b/src/components/Progress/progress.ts
@@ -0,0 +1,12 @@
+export type ProgressProps = {
+    value: number
+    size?: 'medium' | 'large' | null
+    label?: boolean
+    color?: string
+    background?: string
+    square?: boolean
+    striped?: boolean
+    stripeLight?: string
+    stripeDark?: string
+    className?: string
+}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2859fe7..d949453 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,6 +9,7 @@ import Badge from '@components/Badge/Badge.astro'
 import Button from '@components/Button/Button.astro'
 import Checkbox from '@components/Checkbox/Checkbox.astro'
 import Icon from '@components/Icon/Icon.astro'
+import Progress from '@components/Progress/Progress.astro'
 import Radio from '@components/Radio/Radio.astro'
 import Rating from '@components/Rating/Rating.astro'
 import Spinner from '@components/Spinner/Spinner.astro'
@@ -110,6 +111,9 @@ const tabItems = [{
                 color="#f2c262"
             />
         </CardWrapper>
+        <CardWrapper title="Progress" href="/progress">
+            <Progress value={33} />
+        </CardWrapper>
         <CardWrapper title="Radio" href="/radio">
             <Radio
                 items={[{ label: 'Radio', selected: true, value: '1' }]}
diff --git a/src/pages/progress.astro b/src/pages/progress.astro
new file mode 100644
index 0000000..16bfe96
--- /dev/null
+++ b/src/pages/progress.astro
@@ -0,0 +1,206 @@
+---
+import Layout from '@static/Layout.astro'
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+
+import AstroProgress from '@components/Progress/Progress.astro'
+import SvelteProgress from '@components/Progress/Progress.svelte'
+import ReactProgress from '@components/Progress/Progress.tsx'
+
+const sections = [
+    {
+        title: 'Astro progress',
+        component: AstroProgress,
+    },
+    {
+        title: 'Svelte progress',
+        component: SvelteProgress,
+        subTitle: 'For interactive examples, visit <a href="/svelte">Svelte Playground</a>',
+    },
+    {
+        title: 'React progress',
+        component: ReactProgress,
+        subTitle: 'For interactive examples, visit <a href="/react">React Playground</a>',
+    }
+]
+---
+
+<Layout>
+    <h1>Progress</h1>
+    <div class="grid md-2 lg-3">
+        <ComponentWrapper type="Astro">
+            <AstroProgress value={25} />
+        </ComponentWrapper>
+
+        <ComponentWrapper type="Svelte">
+            <SvelteProgress value={50} color="#ee5253" />
+        </ComponentWrapper>
+
+        <ComponentWrapper type="React">
+            <ReactProgress value={75} color="#48dbfb" />
+        </ComponentWrapper>
+    </div>
+
+    {sections.map(section => (
+        <h1>{section.title}</h1>
+        <Fragment>
+            {section.subTitle && <h2 set:html={section.subTitle} />}
+        </Fragment>
+        <div class="grid md-2 lg-3">
+            <ComponentWrapper title="Default">
+                <section.component value={33} />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Different sizes">
+                <section.component value={25} /><br />
+                <section.component value={50} size="medium" /><br />
+                <section.component value={75} size="large" />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Square">
+                <section.component value={25} square={true} /><br />
+                <section.component
+                    value={50}
+                    size="medium"
+                    square={true}
+                /><br />
+                <section.component
+                    value={75}
+                    size="large"
+                    square={true}
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Custom color">
+                <section.component
+                    value={33}
+                    color="#1dd1a1"
+                    background="#333"
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Striped">
+                <section.component value={25} striped={true} /><br />
+                <section.component
+                    value={50}
+                    striped={true}
+                    size="medium"
+                /><br />
+                <section.component
+                    value={75}
+                    striped={true}
+                    size="large"
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Custom striped colors">
+                <section.component
+                    value={25}
+                    striped={true}
+                    stripeLight="#92CE72"
+                    stripeDark="#70C542"
+                /><br />
+                <section.component
+                    value={50}
+                    striped={true}
+                    stripeLight="#92CE72"
+                    stripeDark="#70C542"
+                    size="medium"
+                /><br />
+                <section.component
+                    value={75}
+                    striped={true}
+                    stripeLight="#92CE72"
+                    stripeDark="#70C542"
+                    size="large"
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Striped square">
+                <section.component
+                    value={25}
+                    striped={true}
+                    square={true}
+                /><br />
+                <section.component
+                    value={50}
+                    striped={true}
+                    size="medium"
+                    square={true}
+                /><br />
+                <section.component
+                    value={75}
+                    striped={true}
+                    size="large"
+                    square={true}
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="With label inside">
+                <section.component value={25} label={true} /><br />
+                <section.component
+                    value={50}
+                    label={true}
+                    size="medium"
+                /><br />
+                <section.component
+                    value={75}
+                    label={true}
+                    size="large"
+                    striped={true}
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="With label outside">
+                <p>
+                    <span>Progress</span>
+                    <span>{33}%</span>
+                </p>
+                <section.component value={33} />
+            </ComponentWrapper>
+        </div>
+    ))}
+</Layout>
+
+<style lang="scss">
+    p {
+        display: flex;
+        justify-content: space-between;
+        margin: 0 0 5px 0;
+        font-size: 14px;
+        color: #BBB;
+    }
+</style>
+
+<script>
+    const animate = false
+
+    const simulateProgress = (progress: number): any => {
+        return new Promise((resolve, reject) => {
+            setTimeout(() => {
+                resolve(progress + 1)
+            }, 50)
+        }).then(res => res)
+    }
+
+    if (animate) {
+        Array.from(document.querySelectorAll('.progress'))
+            .forEach(async progress => {
+                let percent = Number((progress as HTMLElement).style
+                    .getPropertyValue('--w-progress-width')
+                    .split('%')[0])
+    
+                while (true) {
+                    percent = await simulateProgress(percent);
+    
+                    (progress as HTMLElement)
+                        .style
+                        .setProperty('--w-progress-width', `${percent}%`)
+                    
+                            
+                    if (percent === 100) {
+                        percent = 0
+                    }
+                }
+            })
+    }
+</script>
diff --git a/src/playground/ReactPlayground.tsx b/src/playground/ReactPlayground.tsx
index e2b32a8..5ca51fb 100644
--- a/src/playground/ReactPlayground.tsx
+++ b/src/playground/ReactPlayground.tsx
@@ -1,17 +1,30 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import Card from '@components/Card/Card.tsx'
+
 import Accordion from '@components/Accordion/Accordion.tsx'
 import Badge from '@components/Badge/Badge.tsx'
 import Button from '@components/Button/Button.tsx'
 import Checkbox from '@components/Checkbox/Checkbox.tsx'
+import Progress from '@components/Progress/Progress.tsx'
 import Radio from '@components/Radio/Radio.tsx'
 import Switch from '@components/Switch/Switch.tsx'
 import Tabs from '@components/Tabs/Tabs.tsx'
+import Toast from '@components/Toast/Toast.tsx'
 
 import { tabItems } from '@data'
+import { toast } from '@utils/toast'
+
+import styles from './playground.module.scss'
+
+console.log(styles)
 
 const ReactPlayground = () => {
+    const [progress, setProgress] = useState(33)
+    const [checkbox, setCheckbox] = useState(false)
+    const [radio, setRadio] = useState('')
+    const [toggle, setToggle] = useState(false)
+
     return (
         <div className="grid md-2 lg-3">
             <Card title="Accordion">
@@ -25,11 +38,11 @@ const ReactPlayground = () => {
             </Card>
 
             <Card title="Badge">
-                <Badge onClick={() => console.log('👋')}>Click me</Badge>
+                <Badge onClick={() => toast('#badgeToast')}>Click me</Badge>
             </Card>
 
             <Card title="Button">
-                <Button onClick={() => console.log('👋')} theme="alert">
+                <Button onClick={() => toast('#buttonToast')} theme="alert">
                     Click me
                 </Button>
             </Card>
@@ -37,8 +50,22 @@ const ReactPlayground = () => {
             <Card title="Checkbox">
                 <Checkbox
                     label="Accept"
-                    onClick={e => console.log(`checked: ${e.target.checked}`)}
+                    onClick={e => setCheckbox(e.target.checked)}
                 />
+
+                <span className={styles.span}>{`${checkbox}`}</span>
+            </Card>
+
+            <Card title="Progress">
+                <Progress value={progress} />
+
+                <div className="flex xs my">
+                    <Button onClick={() => setProgress(0)}>0%</Button>
+                    <Button onClick={() => setProgress(25)}>25%</Button>
+                    <Button onClick={() => setProgress(50)}>50%</Button>
+                    <Button onClick={() => setProgress(75)}>75%</Button>
+                    <Button onClick={() => setProgress(100)}>100%</Button>
+                </div>
             </Card>
 
             <Card title="Radio">
@@ -49,14 +76,18 @@ const ReactPlayground = () => {
                         { label: 'Large', value: 'lg' }
                     ]}
                     name="radio"
-                    onChange={e => console.log('changed to:', e.target.value)}
+                    onChange={e => setRadio(e.target.value)}
                 />
+
+                <span className={styles.span}>{radio}</span>
             </Card>
 
             <Card title="Switch">
                 <Switch
-                    onClick={e => console.log(`switched: ${e.target.checked}`)}
+                    onClick={e => setToggle(e.target.checked)}
                 />
+
+                <span className={styles.span}>{`${toggle}`}</span>
             </Card>
 
             <Card title="Tabs">
@@ -74,6 +105,14 @@ const ReactPlayground = () => {
                     <div data-tab="conclusion">Conclusion tab</div>
                 </Tabs>
             </Card>
+
+            <Toast title="Badge toast" id="badgeToast">
+                👋 Clicked on badge toast
+            </Toast>
+
+            <Toast title="Button toast" id="buttonToast" theme="alert">
+                👋 Clicked on button toast
+            </Toast>
         </div>
     )
     
diff --git a/src/playground/SveltePlayground.svelte b/src/playground/SveltePlayground.svelte
index 3b47524..cd331ee 100644
--- a/src/playground/SveltePlayground.svelte
+++ b/src/playground/SveltePlayground.svelte
@@ -5,14 +5,24 @@
     import Badge from '@components/Badge/Badge.svelte'
     import Button from '@components/Button/Button.svelte'
     import Checkbox from '@components/Checkbox/Checkbox.svelte'
+    import Progress from '@components/Progress/Progress.svelte'
     import Radio from '@components/Radio/Radio.svelte'
     import Switch from '@components/Switch/Switch.svelte'
     import Tabs from '@components/Tabs/Tabs.svelte'
+    import Toast from '@components/Toast/Toast.svelte'
 
     import { tabItems } from '@data'
+    import { toast } from '@utils/toast'
+    
+    import styles from './playground.module.scss'
+
+    let progress = 33
+    let checkbox = false
+    let radio = ''
+    let toggle = false
 </script>
 
-<div class="grid md-2 lg-3">
+<div class="playground grid md-2 lg-3">
     <Card title="Accordion">
         <Accordion items={[{
             title: 'Do you offer support?',
@@ -24,11 +34,11 @@
     </Card>
 
     <Card title="Badge">
-        <Badge onClick={() => console.log('👋')}>Click me</Badge>
+        <Badge onClick={() => toast('#badgeToast')}>Click me</Badge>
     </Card>
 
     <Card title="Button">
-        <Button onClick={() => console.log('👋')} theme="alert">
+        <Button onClick={() => toast('#buttonToast')} theme="alert">
             Click me
         </Button>
     </Card>
@@ -36,8 +46,22 @@
     <Card title="Checkbox">
         <Checkbox
             label="Accept"
-            onClick={e => console.log(`checked: ${e.target.checked}`)}
+            onClick={e => checkbox = e.target.checked}
         />
+
+        <span class={styles.span}>{checkbox}</span>
+    </Card>
+
+    <Card title="Progress">
+        <Progress value={progress} />
+
+        <div class="flex xs my">
+            <Button onClick={() => progress = 0}>0%</Button>
+            <Button onClick={() => progress = 25}>25%</Button>
+            <Button onClick={() => progress = 50}>50%</Button>
+            <Button onClick={() => progress = 75}>75%</Button>
+            <Button onClick={() => progress = 100}>100%</Button>
+        </div>
     </Card>
 
     <Card title="Radio">
@@ -48,14 +72,18 @@
                 { label: 'Large', value: 'lg' }
             ]}
             name="radio"
-            onChange={e => console.log('changed to:', e.target.value)}
+            onChange={e => radio =  e.target.value}
         />
+
+        <span class={styles.span}>{radio}</span>
     </Card>
 
     <Card title="Switch">
         <Switch
-            onClick={e => console.log(`switched: ${e.target.checked}`)}
+            onClick={e => toggle = e.target.checked}
         />
+
+        <span class={styles.span}>{toggle}</span>
     </Card>
 
     <Card title="Tabs">
@@ -74,3 +102,11 @@
         </Tabs>
     </Card>
 </div>
+
+<Toast title="Badge toast" id="badgeToast">
+    👋 Clicked on badge toast
+</Toast>
+
+<Toast title="Button toast" id="buttonToast" theme="alert">
+    👋 Clicked on button toast
+</Toast>
diff --git a/src/playground/playground.module.scss b/src/playground/playground.module.scss
new file mode 100644
index 0000000..dad3bd1
--- /dev/null
+++ b/src/playground/playground.module.scss
@@ -0,0 +1,7 @@
+.span {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: #BBB;
+    font-size: 14px;
+}
diff --git a/src/scss/global/utility.scss b/src/scss/global/utility.scss
index 6e96b1c..ad03cbe 100644
--- a/src/scss/global/utility.scss
+++ b/src/scss/global/utility.scss
@@ -16,6 +16,10 @@
         display: flex;
         gap: 20px;
 
+        &.xs {
+            gap: 5px;
+        }
+
         &.wrap {
             flex-wrap: wrap;
         }
diff --git a/src/scss/setup.scss b/src/scss/setup.scss
index bbcd16b..d199db5 100644
--- a/src/scss/setup.scss
+++ b/src/scss/setup.scss
@@ -26,6 +26,10 @@ $config: (
     --w-timeline-color: #252525;
     --w-timeline-text-color: #FFF;
     --w-timeline-counter: decimal;
+    --w-progress-color: #FFF;
+    --w-progress-background: #252525;
+    --w-progress-stripe-light: #FFF;
+    --w-progress-stripe-dark: #DDD;
 }
 
 @function config($key) {

From 8dd8a5b735df0c733aea5fefefe964a4018b577d Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Mon, 24 Jun 2024 16:26:49 +0200
Subject: [PATCH 23/23] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20Bump=20package=20ver?=
 =?UTF-8?q?sion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index da90690..a684fe3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.0.9",
+    "version": "0.0.10",
     "scripts": {
         "dev": "astro dev",
         "build": "astro check && astro build",