webcoreui 0.0.6 → 0.0.8

package/README.md

@@ -132,5 +132,9 @@ import { Accordion } from 'webcoreui/react'
 ## Components
 
 - [Accordion](https://github.com/Frontendland/webcoreui/tree/main/src/components/Accordion)
+- [Alert](https://github.com/Frontendland/webcoreui/tree/main/src/components/Alert)
+- [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)
+- [Badge](https://github.com/Frontendland/webcoreui/tree/main/src/components/Badge)
 - [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button)
 - [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card)
+- [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)

package/astro.d.ts

@@ -1,13 +1,19 @@
 
 declare module 'webcoreui/astro' {
     import type { AccordionProps } from './components/Accordion/accordion'
+	import type { AlertProps } from './components/Alert/alert'
+	import type { BadgeProps } from './components/Badge/badge'
 	import type { ButtonProps } from './components/Button/button'
 	import type { CardProps } from './components/Card/card'
+	import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
 	import type { IconProps } from './components/Icon/icon'
 
     export function Accordion(_props: AccordionProps): any
+	export function Alert(_props: AlertProps): any
+	export function Badge(_props: BadgeProps): any
 	export function Button(_props: ButtonProps): any
 	export function Card(_props: CardProps): any
+	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
 	export function Icon(_props: IconProps): any
 }
     

package/astro.js

@@ -1,9 +1,15 @@
 import AccordionComponent from './components/Accordion/Accordion.astro'
+import AlertComponent from './components/Alert/Alert.astro'
+import BadgeComponent from './components/Badge/Badge.astro'
 import ButtonComponent from './components/Button/Button.astro'
 import CardComponent from './components/Card/Card.astro'
+import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.astro'
 import IconComponent from './components/Icon/Icon.astro'
 
 export const Accordion = AccordionComponent
+export const Alert = AlertComponent
+export const Badge = BadgeComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
+export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent

package/components/Accordion/Accordion.astro

@@ -1,6 +1,7 @@
 ---
 import type { AccordionProps } from './accordion'
-import Icon from '../Icon/Icon.astro'
+import ArrowDown from '../../icons/arrow-down.svg?raw'
+import './accordion.scss'
 
 interface Props extends AccordionProps {}
 
@@ -9,12 +10,12 @@ const {
 } = Astro.props
 ---
 
-<ul data-id="accordion">
+<ul class="w-accordion" data-id="w-accordion">
     {items.map((item: AccordionProps['items'][0]) => (
         <li>
             <div class="accordion-title">
                 {item.title}
-                <Icon type="arrow-down" size={15} />
+                <Fragment set:html={ArrowDown} />
             </div>
             <div class="accordion-wrapper">
                 <div class="accordion-content">
@@ -26,7 +27,7 @@ const {
 </ul>
 
 <script>
-    const accordions = document.querySelectorAll('[data-id="accordion"]')
+    const accordions = document.querySelectorAll('[data-id="w-accordion"]')
 
     Array.from(accordions).forEach(element => {
         element.addEventListener('click', event => {
@@ -38,7 +39,3 @@ const {
         })
     })
 </script>
-
-<style lang="scss">
-    @import './accordion.scss';
-</style>

package/components/Accordion/Accordion.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { AccordionProps } from './accordion'
     import ArrowDown from '../../icons/arrow-down.svg?raw'
+    import './accordion.scss'
 
     export let items: AccordionProps['items']
 
@@ -14,7 +15,7 @@
     }
 </script>
 
-<ul>
+<ul class="w-accordion">
     {#each items as item, index}
         <li>
             <div
@@ -33,7 +34,3 @@
         </li>
     {/each}
 </ul>
-
-<style lang="scss">
-    @import './accordion.scss';
-</style>

package/components/Accordion/Accordion.tsx

@@ -14,7 +14,7 @@ const Accordion = ({ items }: AccordionProps) => {
     }
 
     return (
-        <ul data-id="accordion">
+        <ul className="w-accordion">
             {items.map((item, index) => (
                 <li key={index}>
                     <div

package/components/Accordion/accordion.scss

@@ -1,6 +1,6 @@
 @import '../../scss/config.scss';
 
-ul {
+.w-accordion {
     margin: 0;
     padding: 0;
     list-style-type: none;

package/components/Alert/Alert.astro

@@ -0,0 +1,64 @@
+---
+import type { AlertProps } from './alert'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+
+import info from '../../icons/info.svg?raw'
+import success from '../../icons/check.svg?raw'
+import warning from '../../icons/warning.svg?raw'
+import alert from '../../icons/alert.svg?raw'
+
+interface Props extends AlertProps {}
+
+const iconMap = {
+    info,
+    success,
+    warning,
+    alert
+}
+
+const {
+    element = 'section',
+    title,
+    titleTag = 'strong',
+    className,
+    theme,
+    ...rest
+} = Astro.props
+
+const Component = element
+const Title = titleTag
+const hasCustomIcon = Astro.slots.has('icon')
+
+const classes = [
+    'w-alert',
+    (!hasCustomIcon && !theme) && 'col',
+    theme,
+    className
+].filter(Boolean).join(' ')
+
+const props = {
+    class: classes
+}
+---
+
+<Component {...props} {...rest}>
+    <slot name="icon" />
+
+    {!hasCustomIcon && theme && <Fragment set:html={iconMap[theme]} />}
+
+    <ConditionalWrapper condition={!!(hasCustomIcon || theme)}>
+        <div class="alert-wrapper" slot="wrapper">
+            children
+        </div>
+        {title && (
+            <Title class:list="alert-title">{title}</Title>
+        )}
+        <div class="alert-body">
+            <slot />
+        </div>
+    </ConditionalWrapper>
+</Component>
+
+<style lang="scss">
+    @import './alert.scss';
+</style>

package/components/Alert/Alert.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    import type { AlertProps } from './alert'
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
+    import info from '../../icons/info.svg?raw'
+    import success from '../../icons/check.svg?raw'
+    import warning from '../../icons/warning.svg?raw'
+    import alert from '../../icons/alert.svg?raw'
+
+    export let element: AlertProps['element'] = 'section'
+    export let title: AlertProps['title'] = null
+    export let titleTag: AlertProps['title'] = 'strong'
+    export let className: AlertProps['className'] = null
+    export let theme: AlertProps['theme'] = null
+
+    const iconMap = {
+        info,
+        success,
+        warning,
+        alert
+    }
+
+    const hasCustomIcon = $$slots.icon
+
+    const classes = [
+        'w-alert',
+        (!hasCustomIcon && !theme) && 'col',
+        theme,
+        className
+    ].filter(Boolean).join(' ')
+</script>
+
+<svelte:element this={element} class={classes} {...$$restProps}>
+    <slot name="icon" />
+
+    {#if !hasCustomIcon && theme}
+        {@html iconMap[theme]}
+    {/if}
+    
+    <ConditionalWrapper
+        condition={!!(hasCustomIcon || theme)}
+        element="div"
+        class="alert-wrapper"
+    >
+        {#if title}
+            <svelte:element this={titleTag} class="alert-title">
+                {title}
+            </svelte:element>
+        {/if}
+        <div class="alert-body">
+            <slot />
+        </div>
+    </ConditionalWrapper>
+</svelte:element>
+
+<style lang="scss">
+    @import './alert.scss';
+</style>

package/components/Alert/Alert.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import type { AlertProps } from './alert'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import info from '../../icons/info.svg?raw'
+import success from '../../icons/check.svg?raw'
+import warning from '../../icons/warning.svg?raw'
+import alert from '../../icons/alert.svg?raw'
+
+import './alert.scss'
+
+const iconMap = {
+    info,
+    success,
+    warning,
+    alert
+}
+
+const Alert = ({
+    Element = 'section',
+    title,
+    TitleTag = 'strong',
+    className,
+    theme,
+    children,
+    icon,
+    ...rest
+}: AlertProps & { icon?: any }) => {
+    const classes = [
+        'w-alert',
+        (!icon && !theme) && 'col',
+        theme,
+        className
+    ].filter(Boolean).join(' ')
+
+    return (
+        <Element className={classes} {...rest}>
+            {icon && icon}
+            {!icon && theme && <div dangerouslySetInnerHTML={{ __html: iconMap[theme] }} />}
+
+            <ConditionalWrapper condition={!!(icon || theme)} wrapper={children => (
+                <div className="alert-wrapper">
+                    {children}
+                </div>
+            )}>
+                {title && (
+                    <TitleTag className="alert-title">{title}</TitleTag>
+                )}
+                <div className="alert-body">
+                    {children}
+                </div>
+            </ConditionalWrapper>
+        </Element>
+    )
+}
+
+export default Alert

package/components/Alert/alert.scss

@@ -0,0 +1,52 @@
+@import '../../scss/config.scss';
+
+.w-alert {
+    border: 1px solid #252525;
+    border-radius: 5px;
+    padding: 15px;
+    display: flex;
+
+    &.col {
+        flex-direction: column;
+    }
+
+    &:not(.col) {
+        gap: 10px;
+    }
+
+    &.info {
+        border: 1px solid #0abde3;
+        color: #0abde3;
+    }
+
+    &.success {
+        border: 1px solid #1dd1a1;
+        color: #1dd1a1;
+    }
+
+    &.warning {
+        border: 1px solid #ff9f43;
+        color: #ff9f43;
+    }
+
+    &.alert {
+        border: 1px solid #e73f40;
+        color: #e73f40;
+    }
+
+    svg {
+        width: 20px;
+        height: 20px;
+        margin-top: 1px;
+    }
+
+    .alert-title {
+        display: block;
+        margin-bottom: 5px;
+    }
+
+    .alert-body {
+        font-size: 16px;
+        color: #BBB;
+    }
+}

package/components/Alert/alert.ts

@@ -0,0 +1,13 @@
+export type AlertProps = {
+    element?: string
+    title?: string | null
+    titleTag?: string
+    icon?: string | null
+    className?: string | null
+    theme?: 'info'
+        | 'success'
+        | 'warning'
+        | 'alert'
+        | null
+    [key: string]: any
+}

package/components/Badge/Badge.astro

@@ -0,0 +1,27 @@
+---
+import type { BadgeProps } from './badge'
+
+interface Props extends BadgeProps {
+    interactive?: boolean
+}
+
+const {
+    theme,
+    interactive
+} = Astro.props
+
+const classes = [
+    'w-badge',
+    theme || null,
+    interactive && 'hover'
+]
+---
+
+<span class:list={classes}>
+    <slot />
+</span>
+
+
+<style lang="scss">
+    @import './badge.scss';
+</style>

package/components/Badge/Badge.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { BadgeProps } from './badge'
+    
+    export let theme: BadgeProps['theme'] = null
+    export let onClick: BadgeProps['onClick'] = () => {}
+    
+    const classes = [
+        'w-badge',
+        theme || null,
+        onClick && 'hover'
+    ].filter(Boolean).join(' ')
+</script>
+
+<span class={classes} on:click={onClick}>
+    <slot />
+</span>
+
+<style lang="scss">
+    @import './badge.scss';
+</style>

package/components/Badge/Badge.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import type { BadgeProps } from './badge'
+import './badge.scss'
+
+const Badge = ({ theme, onClick, children }: BadgeProps) => {
+    const classes = [
+        'w-badge',
+        theme || null,
+        onClick && 'hover'
+    ].filter(Boolean).join(' ')
+
+    return (
+        <span className={classes} onClick={onClick}>
+            {children}
+        </span>
+    )
+}
+
+export default Badge

package/components/Badge/badge.scss

@@ -0,0 +1,85 @@
+@import '../../scss/config.scss';
+
+.w-badge {
+    @include Transition();
+    padding: 5px 10px;
+    border-radius: 5px;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 12px;
+    background: #FFF;
+    color: #252525;
+
+    &.hover {
+        cursor: pointer;
+
+        &:hover {
+            background: #BBB;
+        }
+
+        &.secondary:hover {
+            background: #333;
+        }
+
+        &.outline:hover {
+            color: #FFF;
+            background: transparent;
+            box-shadow: inset 0px 0px 0px 1px #FFF;
+        }
+
+        &.flat:hover {
+            background: #333;
+        }
+
+        &.info:hover {
+            background: #48dbfb;
+        }
+
+        &.success:hover {
+            background: #1dd1a1;
+        }
+
+        &.warning:hover {
+            background: #f7aa61;
+        }
+
+        &.alert:hover {
+            background: #ee5253;
+        }
+    }
+
+    
+    &.secondary {
+        background: #252525;
+        color: #FFF;
+    }
+
+    &.outline {
+        background: #000;
+        color: #BBB;
+        box-shadow: inset 0px 0px 0px 1px #BBB;
+    }
+
+    &.flat {
+        background: #000;
+        color: #FFF;
+    }
+
+    &.info {
+        background: #0abde3;
+    }
+
+    &.success {
+        background: #10ac84;
+    }
+
+    &.warning {
+        background: #ff9f43;
+    }
+
+    &.alert {
+        background: #e73f40;
+        color: #fff;
+    }
+}

package/components/Badge/badge.ts

@@ -0,0 +1,12 @@
+export type BadgeProps = {
+    theme?: 'secondary'
+        | 'outline'
+        | 'flat'
+        | 'info'
+        | 'success'
+        | 'warning'
+        | 'alert'
+        | null
+    onClick?: () => any
+    [key: string]: any
+}

package/components/Button/button.scss

@@ -35,12 +35,12 @@
 
     &.outline {
         background: #000;
-        color: #FFF;
-        box-shadow: inset 0px 0px 0px 1px #FFF;
-
+        color: #BBB;
+        box-shadow: inset 0px 0px 0px 1px #BBB;
+        
         &:hover {
-            color: #BBB;
-            box-shadow: inset 0px 0px 0px 1px #BBB;
+            color: #FFF;
+            box-shadow: inset 0px 0px 0px 1px #FFF;
         }
     }
 

package/components/Card/Card.astro

@@ -1,12 +1,7 @@
 ---
-interface Props {
-    element?: string
-    title?: string
-    compact?: boolean
-    className?: string
-    secondary?: boolean
-    [key: string]: any
-}
+import type { CardProps } from './card'
+
+interface Props extends CardProps {}
 
 const {
     element = 'section',
@@ -19,9 +14,9 @@ const {
 } = Astro.props
 
 const classes = [
+    'w-card',
     className,
     secondary && 'secondary',
-    'card'
 ].filter(Boolean).join(' ')
 
 const props = {

package/components/Card/Card.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import type { CardProps } from './card'
+
+    export let element: CardProps['element'] = 'section'
+    export let title: CardProps['title'] = ''
+    export let titleTag: CardProps['titleTag'] = 'span'
+    export let compact: CardProps['compact'] = false
+    export let className: CardProps['className'] = ''
+    export let secondary: CardProps['secondary'] = false
+
+    const classes = [
+        'w-card',
+        className,
+        secondary && 'secondary'
+    ].filter(Boolean).join(' ')
+</script>
+
+<svelte:element this={element} class={classes} {...$$restProps}>
+    {#if title}
+        <svelte:element this={titleTag} class="card-title">
+            {title}
+        </svelte:element>
+    {/if}
+    <div class="card-body" class:compact>
+        {#if compact && !secondary}
+            <div class="card-wrapper"><slot /></div>
+        {:else}
+            <slot />
+        {/if}
+    </div>
+</svelte:element>
+
+<style lang="scss">
+    @import './card.scss';
+</style>

package/components/Card/Card.tsx

@@ -1,5 +1,36 @@
 import React from 'react'
+import type { CardProps } from './card'
+import './card.scss'
 
-const Card = () => <div />
+const Card = ({
+    Element = 'section',
+    title,
+    TitleTag = 'span',
+    compact,
+    className,
+    secondary,
+    children,
+    ...rest
+}: CardProps) => {
+    const classes = [
+        'w-card',
+        className,
+        secondary && 'secondary'
+    ].filter(Boolean).join(' ')
+
+    return (
+        <Element className={classes} {...rest}>
+            {title && (
+                <TitleTag className="card-title">{title}</TitleTag>
+            )}
+            <div className={compact ? 'card-body compact' : 'card-body'}>
+                {compact && !secondary
+                    ? <div className="card-wrapper">{children}</div>
+                    : children
+                }
+            </div>
+        </Element>
+    )
+}
 
 export default Card

package/components/Card/card.scss

@@ -1,4 +1,4 @@
-.card {
+.w-card {
     border: 1px solid #252525;
     border-radius: 5px;
     display: flex;

package/components/Card/card.ts

@@ -1 +1,8 @@
-export type CardProps = {}
+export type CardProps = {
+    element?: string
+    title?: string
+    compact?: boolean
+    className?: string
+    secondary?: boolean
+    [key: string]: any
+}

package/components/ConditionalWrapper/ConditionalWrapper.astro

@@ -0,0 +1,17 @@
+---
+import type { ConditionalWrapperProps } from './conditionalwrapper'
+
+interface Props extends ConditionalWrapperProps {}
+
+const { condition } = Astro.props
+
+const wrapper = await Astro.slots.render('wrapper')
+const children = await Astro.slots.render('default')
+const wrapped = wrapper?.replace('children', children)
+
+if (!Astro.slots.has('wrapper')) {
+  console.error('Missing wrapper. Add slot="wrapper" to one of the elements.')
+}
+---
+
+<Fragment set:html={condition ? wrapped : children} />

package/components/ConditionalWrapper/ConditionalWrapper.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import type { ConditionalWrapperProps } from './conditionalwrapper'
+
+    export let condition: ConditionalWrapperProps['condition']
+    export let element: string
+</script>
+
+{#if condition}
+    <svelte:element this={element} {...$$restProps}>
+        <slot />
+    </svelte:element>
+{:else}
+    <slot />
+{/if}

package/components/ConditionalWrapper/ConditionalWrapper.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import type { ConditionalWrapperProps } from './conditionalwrapper'
+
+type ExtendedConditionalWrapperProps = {
+  condition: ConditionalWrapperProps['condition']
+  wrapper: (_: React.ReactNode) => any
+  children: React.ReactNode
+};
+
+const ConditionalWrapper = ({ condition, wrapper, children }: ExtendedConditionalWrapperProps) =>
+  condition ? wrapper(children) : children
+
+export default ConditionalWrapper

package/components/ConditionalWrapper/conditionalwrapper.ts

@@ -0,0 +1,3 @@
+export type ConditionalWrapperProps = {
+    condition: boolean
+}

package/components/Icon/Icon.svelte

@@ -4,16 +4,16 @@
     import Github from '../../icons/github.svg?raw'
     import ArrowDown from '../../icons/arrow-down.svg?raw'
 
-    export let type: IconProps['type']
+    export let type: IconProps['type'] = ''
     export let size: IconProps['size'] = 24
-    export let color: IconProps['color']
+    export let color: IconProps['color'] = ''
 
     const iconMap = {
         'github': Github,
         'arrow-down': ArrowDown
     }
 
-    const icon = iconMap[type]
+    const icon = iconMap[type as keyof typeof iconMap]
         .replace('width="24"', `width=${size}`)
         .replace('height="24"', color
             ? `height=${size} color=${color}`

package/components/Icon/Icon.tsx

@@ -14,13 +14,13 @@ const Icon = ({
     size = 24,
     color
 }: IconProps) => {
-    const icon = iconMap[type]
+    const icon = iconMap[type as keyof typeof iconMap]
         .replace('width="24"', `width=${size}`)
         .replace('height="24"', color
             ? `height=${size} color=${color}`
             : `height=${size}`)
 
-    return <div dangerouslySetInnerHTML={{ __html: icon }} />
+    return <span dangerouslySetInnerHTML={{ __html: icon }} />
 }
 
 export default Icon

package/icons/alert.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.48872 2.15394C7.48856 2.1541 7.48888 2.15378 7.48872 2.15394L2.15302 7.48964C1.99269 7.64997 1.93416 7.74684 1.9045 7.81776C1.87504 7.88818 1.84615 7.99973 1.84615 8.23015V15.7698C1.84615 15.9963 1.8732 16.1054 1.90221 16.1759C1.93113 16.2463 1.9898 16.3459 2.15425 16.5104L7.48964 21.847C7.48966 21.847 7.48961 21.847 7.48964 21.847C7.64992 22.0073 7.74685 22.0658 7.81776 22.0955C7.88818 22.125 7.99973 22.1538 8.23015 22.1538H15.7698C15.9964 22.1538 16.1061 22.1268 16.1771 22.0976C16.2477 22.0687 16.3471 22.0102 16.5104 21.847L21.847 16.5104C22.0073 16.35 22.0658 16.2532 22.0955 16.1822C22.125 16.1118 22.1538 16.0003 22.1538 15.7698V8.23015C22.1538 8.00362 22.1268 7.89393 22.0976 7.82287C22.0687 7.75228 22.0102 7.65286 21.847 7.48964L16.5104 2.15302C16.3471 1.9898 16.2477 1.9313 16.1771 1.90235C16.1061 1.87321 15.9964 1.84615 15.7698 1.84615H8.23015C8.0037 1.84615 7.89439 1.87319 7.82354 1.90227C7.75298 1.93123 7.65289 1.99031 7.48872 2.15394ZM7.12261 0.194349C7.48962 0.0437307 7.85846 0 8.23015 0H15.7698C16.1415 0 16.5105 0.0437121 16.8776 0.194263C17.2452 0.345007 17.5433 0.575125 17.8158 0.847594L23.1524 6.18421C23.4249 6.45668 23.655 6.75479 23.8057 7.12236C23.9563 7.48946 24 7.85853 24 8.23015V15.7698C24 16.1548 23.952 16.5282 23.7987 16.8947C23.6455 17.2607 23.4155 17.5527 23.1524 17.8158L17.8158 23.1524C17.5433 23.4249 17.2452 23.655 16.8776 23.8057C16.5105 23.9563 16.1415 24 15.7698 24H8.23015C7.84519 24 7.47182 23.952 7.10532 23.7987C6.73932 23.6455 6.44726 23.4155 6.18421 23.1524L0.848825 17.8158C0.8488 17.8158 0.84885 17.8158 0.848825 17.8158C0.576388 17.5433 0.345783 17.2454 0.194714 16.8779C0.0437194 16.5106 0 16.1415 0 15.7698V8.23015C0 7.84519 0.0480391 7.47182 0.20135 7.10532C0.354452 6.73932 0.58454 6.44726 0.847594 6.18421L6.18513 0.846674C6.45759 0.574982 6.7554 0.345054 7.12261 0.194349ZM12 5.69477C12.5098 5.69477 12.9231 6.10804 12.9231 6.61785V13.3871C12.9231 13.8969 12.5098 14.3102 12 14.3102C11.4902 14.3102 11.0769 13.8969 11.0769 13.3871V6.61785C11.0769 6.10804 11.4902 5.69477 12 5.69477ZM12 15.8437C12.5098 15.8437 12.9231 16.257 12.9231 16.7668V17.3822C12.9231 17.892 12.5098 18.3052 12 18.3052C11.4902 18.3052 11.0769 17.892 11.0769 17.3822V16.7668C11.0769 16.257 11.4902 15.8437 12 15.8437Z" fill="currentColor"/>
+</svg>

package/icons/check.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6425 7.92858C17.0558 8.22704 17.1489 8.80404 16.8505 9.21734L12.4237 15.3474C12.4236 15.3475 12.4238 15.3473 12.4237 15.3474C12.2341 15.6102 11.9873 15.8271 11.7024 15.9814C11.4174 16.1357 11.1011 16.2237 10.7773 16.2389C10.4535 16.254 10.1304 16.1958 9.83224 16.0687C9.53413 15.9416 9.26855 15.7489 9.05527 15.5049C9.0552 15.5048 9.05534 15.505 9.05527 15.5049L7.20296 13.3867C6.86736 13.003 6.90641 12.4198 7.29017 12.0842C7.67393 11.7486 8.25709 11.7877 8.59268 12.1714L10.445 14.2896C10.4755 14.3245 10.5136 14.3522 10.5562 14.3704C10.5988 14.3886 10.645 14.3969 10.6912 14.3947C10.7375 14.3925 10.7827 14.38 10.8234 14.3579C10.8641 14.3359 10.8993 14.3049 10.9264 14.2674L15.3538 8.13651C15.6522 7.72321 16.2292 7.63012 16.6425 7.92858Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.84615C6.39219 1.84615 1.84615 6.39219 1.84615 12C1.84615 17.6078 6.39219 22.1538 12 22.1538C17.6078 22.1538 22.1538 17.6078 22.1538 12C22.1538 6.39219 17.6078 1.84615 12 1.84615ZM0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z" fill="currentColor"/>
+</svg>

package/icons/info.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6.15381C12.5098 6.15381 12.9231 6.56708 12.9231 7.07689V7.69227C12.9231 8.20207 12.5098 8.61535 12 8.61535C11.4902 8.61535 11.0769 8.20207 11.0769 7.69227V7.07689C11.0769 6.56708 11.4902 6.15381 12 6.15381ZM10.4615 10.7692C10.4615 10.2594 10.8748 9.84612 11.3846 9.84612H12C12.5098 9.84612 12.9231 10.2594 12.9231 10.7692V16.0525C13.2816 16.1792 13.5385 16.5211 13.5385 16.923C13.5385 17.4328 13.1252 17.8461 12.6154 17.8461H11.3846C10.8748 17.8461 10.4615 17.4328 10.4615 16.923C10.4615 16.5211 10.7184 16.1792 11.0769 16.0525V11.6397C10.7184 11.513 10.4615 11.1711 10.4615 10.7692Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5084 0.0701433C17.6498 -1.24757e-05 16.5847 -6.90184e-06 15.2406 1.40675e-07H8.75939C7.41534 -6.90184e-06 6.3502 -1.24757e-05 5.4916 0.0701433C4.61356 0.141887 3.87051 0.291634 3.192 0.63723C2.09202 1.19771 1.19765 2.09215 0.637165 3.19213C0.29157 3.87064 0.141887 4.61356 0.0701433 5.4916C-1.24757e-05 6.3502 -6.90184e-06 7.41534 1.40675e-07 8.75939V15.2406C-6.90184e-06 16.5847 -1.24757e-05 17.6498 0.0701433 18.5084C0.141887 19.3864 0.291634 20.1295 0.63723 20.808C1.19771 21.908 2.09215 22.8024 3.19213 23.3628C3.87064 23.7084 4.61356 23.8581 5.4916 23.9299C6.35019 24 7.41532 24 8.75937 24H15.2406C16.5847 24 17.6498 24 18.5084 23.9299C19.3864 23.8581 20.1295 23.7084 20.808 23.3628C21.908 22.8023 22.8024 21.9078 23.3628 20.8079C23.7084 20.1294 23.8581 19.3864 23.9299 18.5084C24 17.6498 24 16.5847 24 15.2406V8.75937C24 7.41532 24 6.35019 23.9299 5.4916C23.8581 4.61356 23.7084 3.87051 23.3628 3.192C22.8023 2.09202 21.9079 1.19765 20.8079 0.637165C20.1294 0.29157 19.3864 0.141887 18.5084 0.0701433ZM4.03016 2.28216C4.40516 2.09117 4.87822 1.97257 5.64194 1.91017C6.41655 1.84687 7.40631 1.84615 8.8 1.84615H15.2C16.5937 1.84615 17.5834 1.84687 18.3581 1.91017C19.1219 1.97258 19.5949 2.0912 19.97 2.28222C20.7225 2.66571 21.3344 3.27758 21.7178 4.03016C21.9088 4.40516 22.0274 4.87822 22.0898 5.64194C22.1531 6.41656 22.1538 7.40631 22.1538 8.8V15.2C22.1538 16.5937 22.1531 17.5834 22.0898 18.3581C22.0274 19.1218 21.9088 19.5948 21.7178 19.9698C21.3344 20.7225 20.7225 21.3344 19.9698 21.7178C19.5948 21.9088 19.1218 22.0274 18.3581 22.0898C17.5834 22.1531 16.5937 22.1538 15.2 22.1538H8.8C7.40631 22.1538 6.41656 22.1531 5.64194 22.0898C4.87822 22.0274 4.40516 21.9088 4.03016 21.7178C3.27758 21.3344 2.66571 20.7225 2.28222 19.97C2.0912 19.5949 1.97258 19.1219 1.91017 18.3581C1.84687 17.5834 1.84615 16.5937 1.84615 15.2V8.8C1.84615 7.40631 1.84687 6.41655 1.91017 5.64194C1.97257 4.87822 2.09117 4.40516 2.28216 4.03016C2.66563 3.27764 3.27764 2.66563 4.03016 2.28216Z" fill="currentColor"/>
+</svg>

package/icons/warning.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9222 8.23694C12.395 8.23694 12.7784 8.62029 12.7784 9.09318V15.3722C12.7784 15.8451 12.395 16.2284 11.9222 16.2284C11.4493 16.2284 11.0659 15.8451 11.0659 15.3722V9.09318C11.0659 8.62029 11.4493 8.23694 11.9222 8.23694ZM11.9222 17.652C12.395 17.652 12.7784 18.0354 12.7784 18.5083V19.0791C12.7784 19.552 12.395 19.9353 11.9222 19.9353C11.4493 19.9353 11.0659 19.552 11.0659 19.0791V18.5083C11.0659 18.0354 11.4493 17.652 11.9222 17.652Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8974 18.9385L13.639 3.83981C12.9304 2.54425 11.0696 2.54425 10.361 3.83981L2.10258 18.9385C1.42165 20.1834 2.32258 21.7031 3.74156 21.7031H20.2584C21.6774 21.7031 22.5784 20.1834 21.8974 18.9385ZM15.278 2.94334C13.8607 0.35222 10.1393 0.35222 8.72202 2.94334L0.463591 18.042C-0.898272 20.5319 0.903593 23.5712 3.74156 23.5712H20.2584C23.0964 23.5712 24.8983 20.5319 23.5364 18.042L15.278 2.94334Z" fill="currentColor"/>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.0.6",
+    "version": "0.0.8",
     "scripts": {
         "dev": "astro dev",
         "build": "astro check && astro build",

package/react.d.ts

@@ -1,13 +1,19 @@
 
 declare module 'webcoreui/react' {
     import type { AccordionProps } from './components/Accordion/accordion'
+	import type { AlertProps } from './components/Alert/alert'
+	import type { BadgeProps } from './components/Badge/badge'
 	import type { ButtonProps } from './components/Button/button'
 	import type { CardProps } from './components/Card/card'
+	import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
 	import type { IconProps } from './components/Icon/icon'
 
     export function Accordion(_props: AccordionProps): any
+	export function Alert(_props: AlertProps): any
+	export function Badge(_props: BadgeProps): any
 	export function Button(_props: ButtonProps): any
 	export function Card(_props: CardProps): any
+	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
 	export function Icon(_props: IconProps): any
 }
     

package/react.js

@@ -1,9 +1,15 @@
 import AccordionComponent from './components/Accordion/Accordion.tsx'
+import AlertComponent from './components/Alert/Alert.tsx'
+import BadgeComponent from './components/Badge/Badge.tsx'
 import ButtonComponent from './components/Button/Button.tsx'
 import CardComponent from './components/Card/Card.tsx'
+import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.tsx'
 import IconComponent from './components/Icon/Icon.tsx'
 
 export const Accordion = AccordionComponent
+export const Alert = AlertComponent
+export const Badge = BadgeComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
+export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent

package/svelte.d.ts

@@ -1,13 +1,19 @@
 
 declare module 'webcoreui/svelte' {
     import type { AccordionProps } from './components/Accordion/accordion'
+	import type { AlertProps } from './components/Alert/alert'
+	import type { BadgeProps } from './components/Badge/badge'
 	import type { ButtonProps } from './components/Button/button'
 	import type { CardProps } from './components/Card/card'
+	import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
 	import type { IconProps } from './components/Icon/icon'
 
     export function Accordion(_props: AccordionProps): any
+	export function Alert(_props: AlertProps): any
+	export function Badge(_props: BadgeProps): any
 	export function Button(_props: ButtonProps): any
 	export function Card(_props: CardProps): any
+	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
 	export function Icon(_props: IconProps): any
 }
     

package/svelte.js

@@ -1,9 +1,15 @@
 import AccordionComponent from './components/Accordion/Accordion.svelte'
+import AlertComponent from './components/Alert/Alert.svelte'
+import BadgeComponent from './components/Badge/Badge.svelte'
 import ButtonComponent from './components/Button/Button.svelte'
 import CardComponent from './components/Card/Card.svelte'
+import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.svelte'
 import IconComponent from './components/Icon/Icon.svelte'
 
 export const Accordion = AccordionComponent
+export const Alert = AlertComponent
+export const Badge = BadgeComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
+export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent