webcoreui 0.0.11 → 0.1.0

package/README.md

@@ -23,7 +23,7 @@
 </p>
 
 > [!IMPORTANT]
-> This library is still in early development. New changes can break existing functionality, and no functionality should be considered final. The library will be considered stable once it reaches v1.0.
+> This library is still in early development. New changes can break existing functionality, and no functionality should be considered final at this stage. The library will be considered stable once it reaches v1.0.
 
 ---
 ## Table of Contents
@@ -39,7 +39,7 @@
 
 ## Documentation
 
-Full documentation coming soon on [webcoreui.dev/docs](https://webcoreui.dev/docs).
+Full documentation available on [webcoreui.dev](https://webcoreui.dev).
 
 ## Getting Started
 
@@ -79,11 +79,11 @@ yarn add webcoreui
 
 ### Setup
 
-Setup default styles and fonts by calling the following in your global SCSS file:
+Create an empty `webcore.config.scss` file at the root of your project to setup CSS configurations. Setup default styles and fonts by calling the following in your global SCSS file:
 
 ```scss
 @import 'webcoreui/styles';
-@include Setup((
+@include setup((
     // Define paths for your fonts
     fontRegular: '/fonts/Inter-Regular.woff2',
     fontBold: '/fonts/Inter-Bold.woff2'
@@ -100,16 +100,45 @@ The `Setup` mixin can also accept the following options:
 |-----------|---------------|---------|
 | `includeResets` | `true` | Include reset styles. Set to `false` if you want to use your own CSS resets. |
 | `includeHelperClasses` | `true` | Adds global helper classes for CSS. All global helper classes are defined [here](https://github.com/Frontendland/webcoreui/tree/main/src/scss/global). |
-| `includeElementStyles` | `true` | Adds styles for native HTML elements, such as `code`, `pre`, or `ul`.
+| `includeTooltip` | `true` | Adds styles for using tooltips.
+| `includeScrollbarStyles` | `true` | Adds styles for scrollbars.
 
-Default component styles can also be changed by overriding the following CSS variables:
+Default component styles can be changed by overriding the following CSS variables:
 
-```css
-:root {
-    --w-avatar-border: #000;
-    --w-rating-color: #FFF;
-    --w-rating-empty-color: #BBB;
+```scss
+html body {
+    --w-avatar-border: var(--w-color-primary-70);
+    --w-checkbox-color: var(--w-color-primary);
+    --w-progress-color: var(--w-color-primary);
+    --w-progress-background: var(--w-color-primary-50);
+    --w-progress-stripe-light: var(--w-color-primary);
+    --w-progress-stripe-dark: var(--w-color-primary-10);
+    --w-radio-color: var(--w-color-primary);
+    --w-rating-color: var(--w-color-primary);
+    --w-rating-empty-color: var(--w-color-primary);
+    --w-rating-empty-background: var(--w-color-primary-70);
     --w-rating-size: 18px;
+    --w-scrollbar-bg: var(--w-color-primary-60);
+    --w-scrollbar-fg: var(--w-color-primary-50);
+    --w-spinner-color: var(--w-color-primary);
+    --w-spinner-width: 2px;
+    --w-spinner-speed: 2s;
+    --w-spinner-size: 30px;
+    --w-spinner-dash: 8;
+    --w-switch-off-color: var(--w-color-primary-50);
+    --w-switch-on-color: var(--w-color-primary);
+    --w-theme-switcher-size: 20px;
+    --w-timeline-color: var(--w-color-primary-50);
+    --w-timeline-text-color: var(--w-color-primary);
+    --w-timeline-counter: decimal;
+    --w-tooltip-background: var(--w-color-primary);
+    --w-tooltip-color: var(--w-color-primary-70);
+
+    // Override border-radius
+    --w-sm-radius: 2px;
+    --w-md-radius: 5px;
+    --w-lg-radius: 10px;
+    --w-xl-radius: 15px;
 }
 ```
 
@@ -145,6 +174,7 @@ import { Accordion } from 'webcoreui/react'
 - [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)
 - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
 - [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)
+- [Menu](https://github.com/Frontendland/webcoreui/tree/main/src/components/Menu)
 - [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)
@@ -152,6 +182,7 @@ import { Accordion } from 'webcoreui/react'
 - [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)
 - [Table](https://github.com/Frontendland/webcoreui/tree/main/src/components/Table)
 - [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs)
+- [ThemeSwitcher](https://github.com/Frontendland/webcoreui/tree/main/src/components/ThemeSwitcher)
 - [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)

package/astro.d.ts

@@ -8,6 +8,7 @@ import type { CheckboxProps } from './components/Checkbox/checkbox'
 import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
 import type { IconProps } from './components/Icon/icon'
 import type { InputProps } from './components/Input/input'
+import type { MenuProps } from './components/Menu/menu'
 import type { ProgressProps } from './components/Progress/progress'
 import type { RadioProps } from './components/Radio/radio'
 import type { RatingProps } from './components/Rating/rating'
@@ -15,6 +16,7 @@ import type { SpinnerProps } from './components/Spinner/spinner'
 import type { SwitchProps } from './components/Switch/switch'
 import type { TableProps } from './components/Table/table'
 import type { TabsProps } from './components/Tabs/tabs'
+import type { ThemeSwitcherProps } from './components/ThemeSwitcher/themeswitcher'
 import type { TimelineProps } from './components/Timeline/timeline'
 import type { TimelineItemProps } from './components/TimelineItem/timelineitem'
 import type { ToastProps } from './components/Toast/toast'
@@ -30,6 +32,7 @@ declare module 'webcoreui/astro' {
 	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
 	export function Icon(_props: IconProps): any
 	export function Input(_props: InputProps): any
+	export function Menu(_props: MenuProps): any
 	export function Progress(_props: ProgressProps): any
 	export function Radio(_props: RadioProps): any
 	export function Rating(_props: RatingProps): any
@@ -37,6 +40,7 @@ declare module 'webcoreui/astro' {
 	export function Switch(_props: SwitchProps): any
 	export function Table(_props: TableProps): any
 	export function Tabs(_props: TabsProps): any
+	export function ThemeSwitcher(_props: ThemeSwitcherProps): any
 	export function Timeline(_props: TimelineProps): any
 	export function TimelineItem(_props: TimelineItemProps): any
 	export function Toast(_props: ToastProps): any

package/astro.js

@@ -8,6 +8,7 @@ import CheckboxComponent from './components/Checkbox/Checkbox.astro'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.astro'
 import IconComponent from './components/Icon/Icon.astro'
 import InputComponent from './components/Input/Input.astro'
+import MenuComponent from './components/Menu/Menu.astro'
 import ProgressComponent from './components/Progress/Progress.astro'
 import RadioComponent from './components/Radio/Radio.astro'
 import RatingComponent from './components/Rating/Rating.astro'
@@ -15,6 +16,7 @@ import SpinnerComponent from './components/Spinner/Spinner.astro'
 import SwitchComponent from './components/Switch/Switch.astro'
 import TableComponent from './components/Table/Table.astro'
 import TabsComponent from './components/Tabs/Tabs.astro'
+import ThemeSwitcherComponent from './components/ThemeSwitcher/ThemeSwitcher.astro'
 import TimelineComponent from './components/Timeline/Timeline.astro'
 import TimelineItemComponent from './components/TimelineItem/TimelineItem.astro'
 import ToastComponent from './components/Toast/Toast.astro'
@@ -29,6 +31,7 @@ export const Checkbox = CheckboxComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent
 export const Input = InputComponent
+export const Menu = MenuComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
@@ -36,6 +39,7 @@ export const Spinner = SpinnerComponent
 export const Switch = SwitchComponent
 export const Table = TableComponent
 export const Tabs = TabsComponent
+export const ThemeSwitcher = ThemeSwitcherComponent
 export const Timeline = TimelineComponent
 export const TimelineItem = TimelineItemComponent
 export const Toast = ToastComponent

package/components/Accordion/Accordion.astro

@@ -1,7 +1,7 @@
 ---
 import type { AccordionProps } from './accordion'
 import ArrowDown from '../../icons/arrow-down.svg?raw'
-import './accordion.scss'
+import styles from './accordion.module.scss'
 
 interface Props extends AccordionProps {}
 
@@ -10,15 +10,15 @@ const {
 } = Astro.props
 ---
 
-<ul class="w-accordion" data-id="w-accordion">
+<ul class={styles.accordion} data-id="w-accordion">
     {items.map((item: AccordionProps['items'][0]) => (
         <li>
-            <div class="accordion-title">
+            <button class={styles.title} data-toggle="true">
                 {item.title}
                 <Fragment set:html={ArrowDown} />
-            </div>
-            <div class="accordion-wrapper">
-                <div class="accordion-content">
+            </button>
+            <div class={styles.wrapper}>
+                <div class={styles.content}>
                     <Fragment set:html={item.content} />
                 </div>
             </div>
@@ -33,8 +33,10 @@ const {
         element.addEventListener('click', event => {
             const target = event.target as HTMLDivElement
 
-            if (target.classList.contains('accordion-title')) {
-                target.classList.toggle('open')
+            if (target.dataset.toggle) {
+                target.dataset.open = target.dataset.open === 'true'
+                    ? 'false'
+                    : 'true'
             }
         })
     })

package/components/Accordion/Accordion.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { AccordionProps } from './accordion'
     import ArrowDown from '../../icons/arrow-down.svg?raw'
-    import './accordion.scss'
+    import styles from './accordion.module.scss'
 
     export let items: AccordionProps['items']
 
@@ -15,19 +15,19 @@
     }
 </script>
 
-<ul class="w-accordion">
+<ul class={styles.accordion}>
     {#each items as item, index}
         <li>
-            <div
-                class="accordion-title"
-                class:open={state[index]}
+            <button
+                class={styles.title}
+                data-open={state[index]}
                 on:click={() => toggle(index)}
             >
                 {item.title}
                 {@html ArrowDown}
-            </div>
-            <div class="accordion-wrapper">
-                <div class="accordion-content">
+            </button>
+            <div class={styles.wrapper}>
+                <div class={styles.content}>
                     {@html item.content}
                 </div>
             </div>

package/components/Accordion/Accordion.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import type { AccordionProps } from './accordion'
 import ArrowDown from '../../icons/arrow-down.svg?raw'
-import './accordion.scss'
+import styles from './accordion.module.scss'
 
 const Accordion = ({ items }: AccordionProps) => {
     const [state, setState] = useState(Array(items.length).fill(false))
@@ -14,16 +14,17 @@ const Accordion = ({ items }: AccordionProps) => {
     }
 
     return (
-        <ul className="w-accordion">
+        <ul className={styles.accordion}>
             {items.map((item, index) => (
                 <li key={index}>
-                    <div
-                        className={state[index] ? 'accordion-title open' : 'accordion-title'}
+                    <button
+                        className={styles.title}
+                        data-open={state[index]}
                         onClick={() => toggle(index)}
                         dangerouslySetInnerHTML={{ __html: `${item.title} ${ArrowDown}` }}
                     />
-                    <div className="accordion-wrapper">
-                        <div className="accordion-content">
+                    <div className={styles.wrapper}>
+                        <div className={styles.content}>
                             <div dangerouslySetInnerHTML={{ __html: item.content }} />
                         </div>
                     </div>

package/components/Accordion/accordion.module.scss

@@ -0,0 +1,65 @@
+@use '../../scss/config.scss' as *;
+
+.accordion {
+    @include spacing(0);
+    list-style-type: none;
+
+    li {
+        @include border(primary-50, bottom);
+        @include spacing(py-sm, px-none, m0);
+        @include typography(md);
+
+        &:first-child {
+            padding-top: 0;
+        }
+
+        &:last-child {
+            @include border(bottom, 0);
+            padding-bottom: 0;
+        }
+
+        .title {
+            @include layout(flex, h-between, v-center, sm);
+            @include typography(md, primary, left);
+            @include size('w100%');
+            @include spacing(p0);
+            @include border(0);
+
+            background: transparent;
+            cursor: pointer;
+
+            svg {
+                @include transition(transform);
+                @include size(15px);
+                @include typography(primary-20);
+                pointer-events: none;
+            }
+
+            &[data-open="true"] {
+                svg {
+                    transform: rotate(180deg);
+                }
+
+                + .wrapper {
+                    grid-template-rows: 1fr;
+        
+                    .content {
+                        @include spacing(py-sm, px-none);
+                    }
+                }
+            }
+        }
+
+        .wrapper {
+            @include transition(grid-template-rows);
+            @include layout(grid);
+            grid-template-rows: 0fr;
+        }
+
+        .content {
+            @include transition();
+            @include visibility(hidden);
+            @include typography(primary-20);
+        }
+    }
+}

package/components/Alert/Alert.astro

@@ -7,7 +7,7 @@ import success from '../../icons/circle-check.svg?raw'
 import warning from '../../icons/warning.svg?raw'
 import alert from '../../icons/alert.svg?raw'
 
-import './alert.scss'
+import styles from './alert.module.scss'
 
 interface Props extends AlertProps {}
 
@@ -22,6 +22,8 @@ const {
     element = 'section',
     title,
     titleTag = 'strong',
+    titleProps,
+    bodyProps,
     className,
     theme,
     ...rest
@@ -32,9 +34,9 @@ const Title = titleTag
 const hasCustomIcon = Astro.slots.has('icon')
 
 const classes = [
-    'w-alert',
-    (!hasCustomIcon && !theme) && 'col',
-    theme,
+    styles['w-alert'],
+    (!hasCustomIcon && !theme) && styles.col,
+    theme && styles[theme],
     className
 ].filter(Boolean).join(' ')
 
@@ -49,13 +51,15 @@ const props = {
     {!hasCustomIcon && theme && <Fragment set:html={iconMap[theme]} />}
 
     <ConditionalWrapper condition={!!(hasCustomIcon || theme)}>
-        <div class="alert-wrapper" slot="wrapper">
+        <div class={styles.wrapper} slot="wrapper">
             children
         </div>
         {title && (
-            <Title class:list="alert-title">{title}</Title>
+            <Title class:list={styles.title} {...titleProps}>
+                {title}
+            </Title>
         )}
-        <div class="alert-body">
+        <div class={styles.body} {...bodyProps}>
             <slot />
         </div>
     </ConditionalWrapper>

package/components/Alert/Alert.svelte

@@ -7,11 +7,13 @@
     import warning from '../../icons/warning.svg?raw'
     import alert from '../../icons/alert.svg?raw'
 
-    import './alert.scss'
+    import styles from './alert.module.scss'
 
     export let element: AlertProps['element'] = 'section'
     export let title: AlertProps['title'] = null
     export let titleTag: AlertProps['title'] = 'strong'
+    export let titleProps: AlertProps['titleProps'] = null
+    export let bodyProps: AlertProps['bodyProps'] = null
     export let className: AlertProps['className'] = null
     export let theme: AlertProps['theme'] = null
 
@@ -25,9 +27,9 @@
     const hasCustomIcon = $$slots.icon
 
     const classes = [
-        'w-alert',
-        (!hasCustomIcon && !theme) && 'col',
-        theme,
+        styles['w-alert'],
+        (!hasCustomIcon && !theme) && styles.col,
+        theme && styles[theme],
         className
     ].filter(Boolean).join(' ')
 </script>
@@ -42,14 +44,14 @@
     <ConditionalWrapper
         condition={!!(hasCustomIcon || theme)}
         element="div"
-        class="alert-wrapper"
+        class={styles.wrapper}
     >
         {#if title}
-            <svelte:element this={titleTag} class="alert-title">
+            <svelte:element this={titleTag} class={styles.title} {...titleProps}>
                 {title}
             </svelte:element>
         {/if}
-        <div class="alert-body">
+        <div class={styles.body} {...bodyProps}>
             <slot />
         </div>
     </ConditionalWrapper>

package/components/Alert/Alert.tsx

@@ -7,7 +7,7 @@ import success from '../../icons/circle-check.svg?raw'
 import warning from '../../icons/warning.svg?raw'
 import alert from '../../icons/alert.svg?raw'
 
-import './alert.scss'
+import styles from './alert.module.scss'
 
 const iconMap = {
     info,
@@ -20,6 +20,8 @@ const Alert = ({
     Element = 'section',
     title,
     TitleTag = 'strong',
+    titleProps,
+    bodyProps,
     className,
     theme,
     children,
@@ -27,9 +29,9 @@ const Alert = ({
     ...rest
 }: ReactAlertProps) => {
     const classes = [
-        'w-alert',
-        (!icon && !theme) && 'col',
-        theme,
+        styles['w-alert'],
+        (!icon && !theme) && styles.col,
+        theme && styles[theme],
         className
     ].filter(Boolean).join(' ')
 
@@ -39,14 +41,16 @@ const Alert = ({
             {!icon && theme && <div dangerouslySetInnerHTML={{ __html: iconMap[theme] }} />}
 
             <ConditionalWrapper condition={!!(icon || theme)} wrapper={children => (
-                <div className="alert-wrapper">
+                <div className={styles.wrapper}>
                     {children}
                 </div>
             )}>
                 {title && (
-                    <TitleTag className="alert-title">{title}</TitleTag>
+                    <TitleTag className={styles.title} {...titleProps}>
+                        {title}
+                    </TitleTag>
                 )}
-                <div className="alert-body">
+                <div className={styles.body} {...bodyProps}>
                     {children}
                 </div>
             </ConditionalWrapper>

package/components/Alert/alert.module.scss

@@ -0,0 +1,51 @@
+@use '../../scss/config.scss' as *;
+
+.w-alert {
+    @include border(primary-50);
+    @include border-radius(md);
+    @include spacing(p-md);
+    @include layout(flex);
+
+    &.col {
+        @include layout(column);
+    }
+
+    &:not(.col) {
+        @include layout(sm);
+    }
+
+    &.info {
+        @include border(info);
+        @include typography(info);
+    }
+
+    &.success {
+        @include border(success);
+        @include typography(success);
+    }
+
+    &.warning {
+        @include border(warning);
+        @include typography(warning);
+    }
+
+    &.alert {
+        @include border(alert);
+        @include typography(alert);
+    }
+
+    svg {
+        @include size(20px);
+        min-width: 20px;
+        margin-top: 1px;
+    }
+
+    .title {
+        @include spacing(mb-xs);
+        display: block;
+    }
+
+    .body {
+        @include typography(primary-20, md, hmd);
+    }
+}

package/components/Alert/alert.ts

@@ -2,7 +2,8 @@ export type AlertProps = {
     element?: string
     title?: string | null
     titleTag?: string
-    icon?: string | null
+    titleProps?: any
+    bodyProps?: any
     className?: string | null
     theme?: 'info'
         | 'success'
@@ -14,5 +15,6 @@ export type AlertProps = {
 export type ReactAlertProps = {
     Element?: keyof JSX.IntrinsicElements
     TitleTag?: keyof JSX.IntrinsicElements
+    icon?: React.ReactNode
     children: React.ReactNode
 } & Omit<AlertProps, 'titleTag' | 'element'>

package/components/Avatar/Avatar.astro

@@ -1,6 +1,6 @@
 ---
 import type { AvatarProps } from './avatar'
-import './avatar.scss'
+import styles from './avatar.module.scss'
 
 interface Props extends AvatarProps {}
 
@@ -16,14 +16,14 @@ const {
 } = Astro.props
 
 const classes = [
-    'w-avatar',
-    borderless && 'borderless',
+    styles.avatar,
+    borderless && styles.borderless,
     className
 ]
 ---
 
 {Array.isArray(img) ? (
-    <div class:list={['w-avatar-group', reverse && 'reverse']}
+    <div class:list={[styles.group, reverse && styles.reverse]}
         style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
     >
         {img.map((img, index) => (

package/components/Avatar/Avatar.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import type { AvatarProps } from './avatar'
-    import './avatar.scss'
+
+    import styles from './avatar.module.scss'
+    import { classNames } from '../../utils/classNames'
 
     export let img: AvatarProps['img'] = ''
     export let alt: AvatarProps['alt'] = 'Avatar'
@@ -11,16 +13,20 @@
     export let reverse: AvatarProps['reverse'] = false
     export let className: AvatarProps['className'] = ''
 
-    const classes = [
-        'w-avatar',
-        borderless && 'borderless',
+    const classes = classNames([
+        styles.avatar,
+        borderless && styles.borderless,
         className
-    ].filter(Boolean).join(' ')
+    ])
+
+    const groupStyles = classNames([
+        styles.group,
+        reverse && styles.reverse
+    ])
 </script>
 
 {#if Array.isArray(img)}
-    <div class="w-avatar-group"
-        class:reverse
+    <div class={groupStyles}
         style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
     >
         {#each img as img, index}

package/components/Avatar/Avatar.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import type { AvatarProps } from './avatar'
-import './avatar.scss'
+
+import styles from './avatar.module.scss'
+import { classNames } from '../../utils/classNames'
 
 const Avatar = ({
     img,
@@ -12,16 +14,16 @@ const Avatar = ({
     reverse,
     className,
 }: AvatarProps) => {
-    const classes = [
-        'w-avatar',
-        borderless && 'borderless',
+    const classes = classNames([
+        styles.avatar,
+        borderless && styles.borderless,
         className
-    ].filter(Boolean).join(' ')
+    ])
 
-    const groupStyles = [
-        'w-avatar-group',
-        reverse && 'reverse'
-    ].filter(Boolean).join(' ')
+    const groupStyles = classNames([
+        styles.group,
+        reverse && styles.reverse
+    ])
 
     const borderColorStyle = borderColor
         ? { '--w-avatar-border': borderColor } as React.CSSProperties