webcoreui 0.0.10 → 0.0.12

package/components/Avatar/{avatar.scss → avatar.module.scss}

@@ -1,6 +1,6 @@
 @import '../../scss/config.scss';
 
-.w-avatar {
+.avatar {
     border-radius: 100%;
 
     &:not(.borderless) {
@@ -8,7 +8,7 @@
     }
 }
 
-.w-avatar-group {
+.group {
     display: inline-flex;
     align-items: center;
 

package/components/Badge/Badge.astro

@@ -1,21 +1,21 @@
 ---
 import type { BadgeProps } from './badge'
-import './badge.scss'
+import styles from './badge.module.scss'
 
-interface Props extends BadgeProps {
-    interactive?: boolean
-}
+interface Props extends BadgeProps {}
 
 const {
     theme,
-    interactive,
+    hover,
+    className,
     ...rest
 } = Astro.props
 
 const classes = [
-    'w-badge',
-    theme || null,
-    interactive && 'hover'
+    styles.badge,
+    theme && styles[theme],
+    hover && styles.hover,
+    className
 ]
 ---
 

package/components/Badge/Badge.svelte

@@ -1,17 +1,29 @@
 <script lang="ts">
-    import type { BadgeProps } from './badge'
-    import './badge.scss'
-    
-    export let theme: BadgeProps['theme'] = null
-    export let onClick: BadgeProps['onClick'] = () => {}
+    import type { SvelteBadgeProps } from './badge'
+
+    import styles from './badge.module.scss'
+    import { classNames } from '../../utils/classNames'
     
-    const classes = [
-        'w-badge',
-        theme || null,
-        onClick && 'hover'
-    ].filter(Boolean).join(' ')
+    export let theme: SvelteBadgeProps['theme'] = null
+    export let onClick: SvelteBadgeProps['onClick'] = null
+    export let hover: SvelteBadgeProps['hover'] = false
+    export let className: SvelteBadgeProps['className'] = ''
+
+    const classes = classNames([
+        styles.badge,
+        theme && styles[theme],
+        (onClick || hover) && styles.hover,
+        className
+    ])
 </script>
 
-<span class={classes} on:click={onClick} {...$$restProps}>
-    <slot />
-</span>
+{#if onClick}
+    <button class={classes} on:click={onClick} {...$$restProps}>
+        <slot />
+    </button>
+{:else}
+    <span class={classes} {...$$restProps}>
+        <slot />
+    </span>
+{/if}
+

package/components/Badge/Badge.tsx

@@ -1,16 +1,34 @@
 import React from 'react'
 import type { ReactBadgeProps } from './badge'
-import './badge.scss'
 
-const Badge = ({ theme, onClick, children, ...rest }: ReactBadgeProps) => {
-    const classes = [
-        'w-badge',
-        theme || null,
-        onClick && 'hover'
-    ].filter(Boolean).join(' ')
+import styles from './badge.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Badge = ({
+    theme,
+    onClick,
+    hover,
+    className,
+    children,
+    ...rest
+}: ReactBadgeProps) => {
+    const classes = classNames([
+        styles.badge,
+        theme && styles[theme],
+        (onClick || hover) && styles.hover,
+        className
+    ])
+
+    if (onClick) {
+        return (
+            <button className={classes} onClick={onClick} {...rest}>
+                {children}
+            </button>
+        )
+    }
 
     return (
-        <span className={classes} onClick={onClick} {...rest}>
+        <span className={classes} {...rest}>
             {children}
         </span>
     )

package/components/Badge/badge.module.scss

@@ -0,0 +1,89 @@
+@import '../../scss/config.scss';
+
+.badge {
+    @include Transition();
+    padding: 5px 10px;
+    border-radius: 5px;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 12px;
+    background: var(--w-color-primary);
+    color: var(--w-color-primary-50);
+    border: 0;
+
+    &.hover {
+        cursor: pointer;
+
+        &:hover {
+            background: var(--w-color-primary-20);
+        }
+
+        &.secondary:hover {
+            background: var(--w-color-primary-40);
+        }
+
+        &.outline:hover {
+            color: var(--w-color-primary);
+            background: transparent;
+            box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
+        }
+
+        &.flat:hover {
+            background: var(--w-color-primary-40);
+        }
+
+        &.info:hover {
+            background: var(--w-color-info-accent);
+        }
+
+        &.success:hover {
+            background: var(--w-color-success-accent);
+        }
+
+        &.warning:hover {
+            background: var(--w-color-warning-accent);
+        }
+
+        &.alert:hover {
+            background: var(--w-color-alert-accent);
+        }
+    }
+
+    
+    &.secondary {
+        background: var(--w-color-primary-50);
+        color: var(--w-color-primary);
+    }
+
+    &.outline {
+        background: var(--w-color-primary-70);
+        color: var(--w-color-primary-20);
+        box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-20);
+    }
+
+    &.flat {
+        background: var(--w-color-primary-70);
+        color: var(--w-color-primary);
+    }
+
+    &.info {
+        background: var(--w-color-info);
+        color: var(--w-color-info-fg);
+    }
+
+    &.success {
+        background: var(--w-color-success);
+        color: var(--w-color-success-fg);
+    }
+
+    &.warning {
+        background: var(--w-color-warning);
+        color: var(--w-color-warning-fg);
+    }
+
+    &.alert {
+        background: var(--w-color-alert);
+        color: var(--w-color-alert-fg);
+    }
+}

package/components/Badge/badge.ts

@@ -7,9 +7,16 @@ export type BadgeProps = {
         | 'warning'
         | 'alert'
         | null
-    onClick?: () => any
+    hover?: boolean
+    className?: string
+    [key: string]: any
 }
 
+export type SvelteBadgeProps = {
+    onClick?: (() => any) | null
+} & BadgeProps
+
 export type ReactBadgeProps = {
+    onClick?: (() => any) | null
     children: React.ReactNode
 } & BadgeProps

package/components/Button/Button.astro

@@ -1,6 +1,8 @@
 ---
 import type { ButtonProps } from './button'
-import './button.scss'
+
+import styles from './button.module.scss'
+import { classNames } from '../../utils/classNames'
 
 interface Props extends ButtonProps {}
 
@@ -8,14 +10,16 @@ const {
     theme,
     bold,
     href,
+    className,
     ...rest
 } = Astro.props
 
-const classes = [
-    'w-button',
-    bold && 'bold',
-    theme
-].filter(Boolean).join(' ')
+const classes = classNames([
+    styles.button,
+    bold && styles.bold,
+    theme && styles[theme],
+    className
+])
 ---
 
 {href ? (

package/components/Button/Button.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
-    import type { ButtonProps } from './button'
-    import './button.scss'
+    import type { SvelteButtonProps } from './button'
 
-    export let theme: ButtonProps['theme'] = null
-    export let bold: ButtonProps['bold'] = false
-    export let href: ButtonProps['href'] = ''
-    export let onClick: ButtonProps['onClick'] = () => {}
+    import styles from './button.module.scss'
+    import { classNames } from '../../utils/classNames'
 
-    const classes = [
-        'w-button',
-        bold && 'bold',
-        theme
-    ].filter(Boolean).join(' ')
+    export let theme: SvelteButtonProps['theme'] = null
+    export let bold: SvelteButtonProps['bold'] = false
+    export let href: SvelteButtonProps['href'] = ''
+    export let className: SvelteButtonProps['className'] = ''
+    export let onClick: SvelteButtonProps['onClick'] = () => {}
+
+    const classes = classNames([
+        styles.button,
+        bold && styles.bold,
+        theme && styles[theme],
+        className
+    ])
 </script>
 
 

package/components/Button/Button.tsx

@@ -1,20 +1,24 @@
 import React from 'react'
 import type { ReactButtonProps } from './button'
-import './button.scss'
+
+import styles from './button.module.scss'
+import { classNames } from '../../utils/classNames'
 
 const Button = ({
     theme,
     bold,
     href,
-    children,
+    className,
     onClick,
+    children,
     ...rest
 }: ReactButtonProps) => {
-    const classes = [
-        'w-button',
-        bold && 'bold',
-        theme
-    ].filter(Boolean).join(' ')
+    const classes = classNames([
+        styles.button,
+        bold && styles.bold,
+        theme && styles[theme],
+        className
+    ])
 
     if (href) {
         return (

package/components/Button/button.module.scss

@@ -0,0 +1,94 @@
+@import '../../scss/config.scss';
+
+.button {
+    @include Transition();
+    padding: 10px 15px;
+    border-radius: 5px;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 16px;
+    cursor: pointer;
+    border: 0;
+    background: var(--w-color-primary);
+    color: var(--w-color-primary-50);
+
+    &[disabled] {
+        cursor: no-drop;
+        background: var(--w-color-primary-20);
+    }
+
+    &:hover {
+        background: var(--w-color-primary-20);
+    }
+    
+    &.secondary {
+        background: var(--w-color-primary-50);
+        color: var(--w-color-primary);
+
+        &:hover {
+            background: var(--w-color-primary-40);
+        }
+    }
+
+    &.outline {
+        background: transparent;
+        color: var(--w-color-primary-20);
+        box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-20);
+        
+        &:hover {
+            color: var(--w-color-primary);
+            box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
+        }
+    }
+
+    &.flat {
+        background: transparent;
+        color: var(--w-color-primary);
+
+        &:hover {
+            background: var(--w-color-primary-40);
+        }
+    }
+
+    &.info {
+        background: var(--w-color-info);
+        color: var(--w-color-info-fg);
+
+        &:hover {
+            background: var(--w-color-info-accent);
+        }
+    }
+
+    &.success {
+        background: var(--w-color-success);
+        color: var(--w-color-success-fg);
+
+        &:hover {
+            background: var(--w-color-success-accent);
+        }
+    }
+
+    &.warning {
+        background: var(--w-color-warning);
+        color: var(--w-color-warning-fg);
+
+        &:hover {
+            background: var(--w-color-warning-accent);
+        }
+    }
+
+    &.alert {
+        background: var(--w-color-alert);
+        color: var(--w-color-alert-fg);
+
+        &:hover {
+            background: var(--w-color-alert-accent);
+        }
+    }
+
+    &.bold {
+        font-family: Bold;
+    }
+}

package/components/Button/button.ts

@@ -9,10 +9,15 @@ export type ButtonProps = {
         | null
     bold?: boolean
     href?: string
-    onClick?: () => any
+    className?: string
     [key: string]: any
 }
 
+export type SvelteButtonProps = {
+    onClick?: () => any
+} & ButtonProps
+
 export type ReactButtonProps = {
+    onClick?: () => any
     children: React.ReactNode
 } & ButtonProps

package/components/Card/Card.astro

@@ -1,6 +1,6 @@
 ---
 import type { CardProps } from './card'
-import './card.scss'
+import styles from './card.module.scss'
 
 interface Props extends CardProps {}
 
@@ -15,28 +15,20 @@ const {
 } = Astro.props
 
 const classes = [
-    'w-card',
+    styles.card,
+    secondary && styles.secondary,
     className,
-    secondary && 'secondary',
 ].filter(Boolean).join(' ')
 
-const props = {
-    class: classes
-}
-
 const Component = element
 const Title = titleTag
 ---
 
-<Component {...props} {...rest}>
+<Component class:list={classes} {...rest}>
     {title && (
-        <Title class:list="card-title">{title}</Title>
+        <Title class:list={styles.title}>{title}</Title>
     )}
-    <div class="card-body" class:list={[compact && 'compact']}>
-        {compact && !secondary ? (
-            <div class="card-wrapper"><slot /></div>
-        ) : (
-            <slot />
-        )}
+    <div class:list={[styles.body, compact && styles.compact]}>
+        <slot />
     </div>
 </Component>

package/components/Card/Card.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import type { CardProps } from './card'
-    import './card.scss'
+
+    import styles from './card.module.scss'
+    import { classNames } from '../../utils/classNames'
 
     export let element: CardProps['element'] = 'section'
     export let title: CardProps['title'] = ''
@@ -9,24 +11,25 @@
     export let className: CardProps['className'] = ''
     export let secondary: CardProps['secondary'] = false
 
-    const classes = [
-        'w-card',
-        className,
-        secondary && 'secondary'
-    ].filter(Boolean).join(' ')
+    const classes = classNames([
+        styles.card,
+        secondary && styles.secondary,
+        className
+    ])
+
+    const bodyClasses = classNames([
+        styles.body,
+        compact && styles.compact
+    ])
 </script>
 
 <svelte:element this={element} class={classes} {...$$restProps}>
     {#if title}
-        <svelte:element this={titleTag} class="card-title">
+        <svelte:element this={titleTag} class={styles.title}>
             {title}
         </svelte:element>
     {/if}
-    <div class="card-body" class:compact>
-        {#if compact && !secondary}
-            <div class="card-wrapper"><slot /></div>
-        {:else}
-            <slot />
-        {/if}
+    <div class={bodyClasses}>
+        <slot />
     </div>
 </svelte:element>

package/components/Card/Card.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import type { ReactCardProps } from './card'
-import './card.scss'
+
+import styles from './card.module.scss'
+import { classNames } from '../../utils/classNames'
 
 const Card = ({
     Element = 'section',
@@ -12,22 +14,24 @@ const Card = ({
     children,
     ...rest
 }: ReactCardProps) => {
-    const classes = [
-        'w-card',
+    const classes = classNames([
+        styles.card,
         className,
-        secondary && 'secondary'
-    ].filter(Boolean).join(' ')
+        secondary && styles.secondary
+    ])
+
+    const bodyClasses = classNames([
+        styles.body,
+        compact && styles.compact
+    ])
 
     return (
         <Element className={classes} {...rest}>
             {title && (
-                <TitleTag className="card-title">{title}</TitleTag>
+                <TitleTag className={styles.title}>{title}</TitleTag>
             )}
-            <div className={compact ? 'card-body compact' : 'card-body'}>
-                {compact && !secondary
-                    ? <div className="card-wrapper">{children}</div>
-                    : children
-                }
+            <div className={bodyClasses}>
+                {children}
             </div>
         </Element>
     )

package/components/Card/card.module.scss

@@ -0,0 +1,33 @@
+.card {
+    border: 1px solid var(--w-color-primary-50);
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+
+    &.secondary {
+        background: var(--w-color-primary-60);
+
+        .title {
+            background: var(--w-color-primary-70);
+        }
+    }
+
+    .title {
+        padding: 20px;
+        display: block;
+        border-bottom: 1px solid var(--w-color-primary-50);
+        font-size: 16px;
+    }
+
+    .body {
+        padding: 20px;
+        height: 100%;
+        position: relative;
+
+        &.compact {
+            border: 20px solid var(--w-color-primary-60);
+            background: var(--w-color-primary-70);
+            padding: 40px;
+        }
+    }
+}

package/components/Checkbox/Checkbox.astro

@@ -4,7 +4,7 @@ import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
 
 import check from '../../icons/check.svg?raw'
 
-import './checkbox.scss'
+import styles from './checkbox.module.scss'
 
 interface Props extends CheckboxProps {}
 
@@ -13,14 +13,14 @@ const {
     label,
     subText,
     disabled,
-    boxed,
-    color
+    color,
+    className
 } = Astro.props
 
 const classes = [
-    'w-checkbox',
-    boxed && 'boxed',
-    label && subText && 'col'
+    styles.checkbox,
+    label && subText && styles.col,
+    className
 ]
 
 const style = color
@@ -30,21 +30,21 @@ const style = color
 
 <label class:list={classes} style={style}>
     <ConditionalWrapper condition={!!(label && subText)}>
-        <div class="checkbox-wrapper" slot="wrapper">
+        <div class={styles.wrapper} slot="wrapper">
             children
         </div>
         <input type="checkbox" checked={checked} disabled={disabled} />
-        <span class="check">
+        <span class={styles.check}>
             <Fragment set:html={check} />
         </span>
         {label && (
-            <span class="label">
+            <span class={styles.label}>
                 <Fragment set:html={label} />
             </span>
         )}
     </ConditionalWrapper>
     {label && subText && (
-        <span class="sub-text">
+        <span class={styles.text}>
             <Fragment set:html={subText} />
         </span>
     )}