webcoreui 0.0.11 → 0.1.0

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

@@ -1,22 +1,25 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
-.w-avatar {
-    border-radius: 100%;
+body {
+    --w-avatar-border: var(--w-color-primary-70);
+}
+
+.avatar {
+    @include border-radius(max);
 
     &:not(.borderless) {
         border: 3px solid var(--w-avatar-border);
     }
 }
 
-.w-avatar-group {
-    display: inline-flex;
-    align-items: center;
+.group {
+    @include layout(inline-flex, v-center);
 
     &.reverse {
-        flex-direction: row-reverse;
+        @include layout(row-reverse);
 
         img {
-            z-index: 1;
+            @include layer(fg);
         }
 
         img:not(:first-child) {

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,86 @@
+@use '../../scss/config.scss' as *;
+
+.badge {
+    @include transition();
+    @include spacing(py-xs, px-sm);
+    @include border-radius(xs);
+    @include layout(inline-flex, v-center, xs);
+    @include typography(xs, primary-50);
+    @include border(0);
+    @include background(primary);
+
+    &.hover {
+        cursor: pointer;
+
+        &:hover {
+            @include background(primary-20);
+        }
+
+        &.secondary:hover {
+            @include background(primary-40);
+        }
+
+        &.outline:hover {
+            @include typography(primary);
+            @include background(transparent);
+            box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
+        }
+
+        &.flat:hover {
+            @include background(primary-40);
+        }
+
+        &.info:hover {
+            @include background(info-accent);
+        }
+
+        &.success:hover {
+            @include background(success-accent);
+        }
+
+        &.warning:hover {
+            @include background(warning-accent);
+        }
+
+        &.alert:hover {
+            @include background(alert-accent);
+        }
+    }
+
+    
+    &.secondary {
+        @include typography(primary);
+        @include background(primary-50);
+    }
+
+    &.outline {
+        @include typography(primary-20);
+        @include background(primary-70);
+        box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-20);
+    }
+
+    &.flat {
+        @include typography(primary);
+        @include background(primary-70);
+    }
+
+    &.info {
+        @include typography(info-fg);
+        @include background(info);
+    }
+
+    &.success {
+        @include typography(success-fg);
+        @include background(success);
+    }
+
+    &.warning {
+        @include typography(warning-fg);
+        @include background(warning);
+    }
+
+    &.alert {
+        @include typography(alert-fg);
+        @include background(alert);
+    }
+}

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,21 +1,23 @@
 ---
 import type { ButtonProps } from './button'
-import './button.scss'
+
+import styles from './button.module.scss'
+import { classNames } from '../../utils/classNames'
 
 interface Props extends ButtonProps {}
 
 const {
     theme,
-    bold,
     href,
+    className,
     ...rest
 } = Astro.props
 
-const classes = [
-    'w-button',
-    bold && 'bold',
-    theme
-].filter(Boolean).join(' ')
+const classes = classNames([
+    styles.button,
+    theme && styles[theme],
+    className
+])
 ---
 
 {href ? (

package/components/Button/Button.svelte

@@ -1,17 +1,19 @@
 <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 href: SvelteButtonProps['href'] = ''
+    export let className: SvelteButtonProps['className'] = ''
+    export let onClick: SvelteButtonProps['onClick'] = () => {}
+
+    const classes = classNames([
+        styles.button,
+        theme && styles[theme],
+        className
+    ])
 </script>
 
 

package/components/Button/Button.tsx

@@ -1,20 +1,22 @@
 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,
+        theme && styles[theme],
+        className
+    ])
 
     if (href) {
         return (

package/components/Button/button.module.scss

@@ -0,0 +1,87 @@
+@use '../../scss/config.scss' as *;
+
+.button {
+    @include layout(inline-flex, v-center, xs);
+    @include typography(md, primary-50, none);
+    @include spacing(py-sm, px-md);
+    @include border-radius(xs);
+    @include border(0);
+    @include transition();
+    @include background(primary);
+
+    cursor: pointer;
+
+    &[disabled] {
+        cursor: no-drop;
+        @include background(primary-20);
+    }
+
+    &:hover {
+        @include background(primary-20);
+    }
+    
+    &.secondary {
+        @include typography(primary);
+        @include background(primary-50);
+
+        &:hover {
+            @include background(primary-40);
+        }
+    }
+
+    &.outline {
+        @include typography(primary-20);
+        @include background(transparent);
+        box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-20);
+        
+        &:hover {
+            @include typography(primary);
+            box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
+        }
+    }
+
+    &.flat {
+        @include typography(primary);
+        @include background(transparent);
+
+        &:hover {
+            @include background(primary-40);
+        }
+    }
+
+    &.info {
+        @include typography(info-fg);
+        @include background(info);
+
+        &:hover {
+            @include background(info-accent);
+        }
+    }
+
+    &.success {
+        @include typography(success-fg);
+        @include background(success);
+
+        &:hover {
+            @include background(success-accent);
+        }
+    }
+
+    &.warning {
+        @include typography(warning-fg);
+        @include background(warning);
+
+        &:hover {
+            @include background(warning-accent);
+        }
+    }
+
+    &.alert {
+        @include typography(alert-fg);
+        @include background(alert);
+
+        &:hover {
+            @include background(alert-accent);
+        }
+    }
+}

package/components/Button/button.ts

@@ -7,12 +7,16 @@ export type ButtonProps = {
         | 'warning'
         | 'alert'
         | 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,38 @@
+@use '../../scss/config.scss' as *;
+
+.card {
+    @include border(primary-50);
+    @include border-radius(md);
+    @include layout(flex, column);
+
+    &.secondary {
+        @include background(primary-60);
+
+        .title {
+            @include background(primary-70);
+        }
+    }
+
+    .title {
+        @include spacing(p-default);
+        @include border(primary-50, bottom);
+        @include typography(md);
+        display: block;
+    }
+
+    .body {
+        @include spacing(p-default);
+        @include size('h100%');
+        @include position(relative);
+
+        &.compact {
+            @include border(20px, primary-60);
+            @include spacing(p-3xl);
+            @include background(primary-70);
+        }
+    }
+}
+
+a.card {
+    @include typography(none);
+}