webcoreui 0.1.0 → 0.2.0

package/components/Modal/modal.module.scss

@@ -0,0 +1,103 @@
+@import '../../scss/config.scss';
+
+.modal {
+    @include transition();
+    @include position(fixed, 't50%', 'l50%');
+    @include spacing(0, p-default);
+    @include layer(modal);
+    @include visibility(block, 0);
+    @include border(primary-50);
+    @include background(primary-70);
+    @include typography(primary);
+    @include border-radius(md);
+    @include size('w90%');
+
+    transform: translate(-50%, calc(-50% + 15px));
+    max-width: 500px;
+    pointer-events: none;
+
+    &[data-show="true"] {
+        @include visibility(1);
+
+        transform: translate(-50%, -50%);
+        pointer-events: all;
+
+        + .overlay {
+            @include visibility(1);
+            pointer-events: all;
+        }
+    }
+
+    .close {
+        @include position(absolute, t10px, r10px);
+        @include spacing(p-xs);
+
+        svg {
+            @include size(10px);
+        }
+    }
+
+    .title {
+        @include typography(lg);
+        @include spacing(mb-xs);
+        @include layout(flex, v-center, xs);
+
+        svg {
+            @include size(20px);
+        }
+    }
+
+    .subTitle {
+        @include typography(primary-20);
+        @include spacing(mb-xs);
+    }
+
+    &.info {
+        @include border(info);
+
+        .title {
+            @include typography(info);
+        }
+    }
+
+    &.success {
+        @include border(success);
+
+        .title {
+            @include typography(success);
+        }
+    }
+
+    &.warning {
+        @include border(warning);
+
+        .title {
+            @include typography(warning);
+        }
+    }
+
+    &.alert {
+        @include border(alert);
+
+        .title {
+            @include typography(alert);
+        }
+    }
+}
+
+.overlay {
+    @include transition(opacity);
+    @include position(fixed);
+    @include background(overlay);
+    @include layer(header);
+    @include visibility(0);
+
+    inset: 0;
+    pointer-events: none;
+}
+
+@include media(xs) {
+    .modal {
+        @include size('wauto');
+    }
+}

package/components/Modal/modal.ts

@@ -0,0 +1,18 @@
+export type ModalProps = {
+    title?: string
+    subTitle?: string
+    showCloseIcon?: boolean
+    closeOnEsc?: boolean
+    closeOnOverlay?: boolean
+    id?: string
+    className?: string
+    theme?: 'info'
+        | 'success'
+        | 'warning'
+        | 'alert'
+        | null
+}
+
+export type ReactModalProps = {
+    children?: React.ReactNode
+} & ModalProps

package/components/Progress/progress.module.scss

@@ -11,19 +11,19 @@ body {
     @include size('w100%', h10px);
     @include border-radius(xl);
     @include visibility(hidden);
-    @include typography(bold, xxs);
+    @include typography(bold, xs);
     @include background(var(--w-progress-background));
 
     color: var(--w-progress-background);
     
     &.medium {
         @include size(h15px);
-        @include typography(xs);
+        @include typography(sm);
     }
 
     &.large {
         @include size(h20px);
-        @include typography(sm);
+        @include typography(md);
     }
 
     &.square {

package/components/Radio/radio.module.scss

@@ -13,7 +13,6 @@ body {
 
     label {
         @include layout(flex, xs);
-        @include typography(md);
 
         cursor: pointer;
 
@@ -71,7 +70,7 @@ body {
 
     .subtext {
         @include spacing(ml-lg);
-        @include typography(sm, primary-20);
+        @include typography(md, primary-20);
 
         a {
             @include typography(primary-20);

package/components/Rating/Rating.astro

@@ -45,11 +45,11 @@ const translatedReviewText = reviewText.replace('{0}', `${reviewCount}`)
 
 <span class:list={classes} style={styleVariables}>
     {score > 0 && (
-        <span class={styles.score}>{Array(score).fill('★').join('')}</span>
+        <span class={styles.score}>{Array(Math.round(score)).fill('★').join('')}</span>
     )}
     {showEmpty && (
         <span class={styles.empty}>
-            {Array(total - score).fill('★').join('')}
+            {Array(total - Math.round(score)).fill('★').join('')}
         </span>
     )}
     {showText && (

package/components/Rating/Rating.svelte

@@ -42,11 +42,11 @@
 
 <span class={classes} style={styleVariables}>
     {#if score}
-        <span class={styles.score}>{Array(score).fill('★').join('')}</span>
+        <span class={styles.score}>{Array(Math.round(score)).fill('★').join('')}</span>
     {/if}
     {#if showEmpty}
     <span class={styles.empty}>
-            {Array((total || 5) - score).fill('★').join('')}
+            {Array((total || 5) - Math.round(score)).fill('★').join('')}
         </span>
     {/if}
 

package/components/Rating/Rating.tsx

@@ -43,12 +43,12 @@ const Rating = ({
         <span className={classes} style={styleVariables}>
             {score > 0 && (
                 <span className={styles.score}>
-                    {Array(score).fill('★').join('')}
+                    {Array(Math.round(score)).fill('★').join('')}
                 </span>
             )}
             {showEmpty && (
                 <span className={styles.empty}>
-                    {Array(total - score).fill('★').join('')}
+                    {Array(total - Math.round(score)).fill('★').join('')}
                 </span>
             )}
             {showText && (

package/components/Rating/rating.module.scss

@@ -35,7 +35,7 @@ body {
     
     .text {
         @include transition(color);
-        @include typography(md, primary-20);
+        @include typography(default, primary-20);
         @include spacing(ml-xs);
 
         &.m {

package/components/Slider/Slider.astro

@@ -0,0 +1,44 @@
+---
+import type { SliderProps } from './slider'
+
+import styles from './slider.module.scss'
+import { classNames } from '../../utils/classNames'
+
+interface Props extends SliderProps {}
+
+const {
+    min,
+    max,
+    value,
+    step,
+    disabled,
+    color,
+    background,
+    thumb,
+    id,
+    className
+} = Astro.props
+
+const classes = [
+    styles.slider,
+    className
+]
+
+const styleVariables = classNames([
+    color && `--w-slider-color: ${color};`,
+    background && `--w-slider-background: ${background};`,
+    thumb && `--w-slider-thumb: ${thumb};`
+])
+---
+
+<input
+    type="range"
+    min={min}
+    max={max}
+    value={value || min}
+    step={step}
+    disabled={disabled}
+    class:list={classes}
+    id={id}
+    style={styleVariables}
+/>

package/components/Slider/Slider.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import type { SvelteSliderProps } from './slider'
+
+    import styles from './slider.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let min: SvelteSliderProps['min'] = 0
+    export let max: SvelteSliderProps['max'] = 100
+    export let value: SvelteSliderProps['value'] = 0
+    export let step: SvelteSliderProps['step'] = 1
+    export let disabled: SvelteSliderProps['disabled'] = false
+    export let color: SvelteSliderProps['color'] = ''
+    export let background: SvelteSliderProps['background'] = ''
+    export let thumb: SvelteSliderProps['thumb'] = ''
+    export let id: SvelteSliderProps['id'] = ''
+    export let className: SvelteSliderProps['className'] = ''
+    export let onChange: SvelteSliderProps['onChange'] = () => {}
+
+    const classes = classNames([
+        styles.slider,
+        className
+    ])
+
+    const styleVariables = classNames([
+        color && `--w-slider-color: ${color};`,
+        background && `--w-slider-background: ${background};`,
+        thumb && `--w-slider-thumb: ${thumb};`
+    ])
+</script>
+
+<input
+    type="range"
+    min={min}
+    max={max}
+    value={value || min}
+    step={step}
+    disabled={disabled}
+    class={classes}
+    id={id || null}
+    style={styleVariables || null}
+    on:change={onChange}
+/>

package/components/Slider/Slider.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import type { ReactSliderProps } from './slider'
+
+import styles from './slider.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Slider = ({
+    min,
+    max,
+    value,
+    step,
+    disabled,
+    color,
+    background,
+    thumb,
+    id,
+    className,
+    onChange
+}: ReactSliderProps) => {
+    const classes = classNames([
+        styles.slider,
+        className
+    ])
+
+    const styleVariables = {
+        ...(color && { '--w-slider-color': color }),
+        ...(background && { '--w-slider-background': background }),
+        ...(thumb && { '--w-slider-thumb': thumb })
+    } as React.CSSProperties
+
+    return (
+        <input
+            type="range"
+            min={min}
+            max={max}
+            defaultValue={value || min}
+            step={step}
+            disabled={disabled}
+            className={classes}
+            id={id}
+            style={styleVariables}
+            onChange={onChange}
+        />
+
+    )
+}
+
+export default Slider

package/components/Slider/slider.module.scss

@@ -0,0 +1,68 @@
+@import '../../scss/config.scss';
+
+body {
+    --w-slider-background: var(--w-color-primary-50);
+    --w-slider-color: var(--w-color-primary);
+    --w-slider-thumb: var(--w-color-primary-50);
+}
+
+.slider {
+    @include border-radius(xl);
+    @include size('w100%');
+    @include visibility(hidden);
+    @include size(h10px);
+    @include spacing(m0);
+
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+
+    &[disabled]::-webkit-slider-runnable-track {
+        @include background(primary-50);
+    }
+    
+    &[disabled]::-moz-range-track {
+        @include background(primary-50);
+    }
+
+    &[disabled]::-webkit-slider-thumb {
+        @include background(primary-50);
+        @include border(primary-30);
+        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
+    }
+
+    &[disabled]::-moz-range-thumb {
+        @include background(primary-50);
+        @include border(primary-30);
+        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
+    }
+}
+
+.slider::-webkit-slider-runnable-track {
+    @include background(var(--w-slider-background));
+}
+
+.slider::-moz-range-track {
+    @include background(var(--w-slider-background));
+    @include size(h10px);
+}
+
+.slider::-webkit-slider-thumb {
+    @include background(var(--w-slider-thumb));
+    @include size(10px);
+    @include border-radius(max);
+    @include border(var(--w-slider-color));
+
+    -webkit-appearance: none;
+    appearance: none;
+    box-shadow: -995px 0 0 990px var(--w-slider-color);
+}
+
+.slider::-moz-range-thumb {
+    @include background(var(--w-slider-thumb));
+    @include size(9px);
+    @include border-radius(max);
+    @include border(var(--w-slider-color));
+
+    box-shadow: -995px 0 0 990px var(--w-slider-color);
+}

package/components/Slider/slider.ts

@@ -0,0 +1,20 @@
+export type SliderProps = {
+    min: number
+    max: number
+    value?: number
+    step?: number
+    disabled?: boolean
+    color?: string
+    background?: string
+    thumb?: string
+    id?: string
+    className?: string
+}
+
+export type SvelteSliderProps = {
+    onChange?: (e: any) => any
+} & SliderProps
+
+export type ReactSliderProps = {
+    onChange?: (e: any) => any
+} & SliderProps

package/components/Switch/switch.module.scss

@@ -36,7 +36,7 @@ body {
         }
 
         .label {
-            @include typography(sm);
+            @include typography(md);
         }
     }
 

package/components/Table/Table.astro

@@ -12,6 +12,7 @@ const {
     striped,
     offsetStripe,
     compact,
+    maxHeight,
     className
 } = Astro.props
 
@@ -21,11 +22,15 @@ const classes = [
     striped && styles[`striped-${striped}s`],
     offsetStripe && styles.offset,
     compact && styles.compact,
+    maxHeight && styles.scroll,
     className
 ]
 ---
 
-<div class:list={classes}>
+<div
+    class:list={classes}
+    style={maxHeight ? `max-height:${maxHeight}` : undefined}
+>
     <table>
         {headings?.length && (
             <thead>

package/components/Table/Table.svelte

@@ -11,6 +11,7 @@
     export let striped: TableProps['striped'] = null
     export let offsetStripe: TableProps['offsetStripe'] = false
     export let compact: TableProps['compact'] = false
+    export let maxHeight: TableProps['maxHeight'] = 0
     export let className: TableProps['className'] = ''
 
     const classes = classNames([
@@ -19,11 +20,12 @@
         striped && styles[`striped-${striped}s`],
         offsetStripe && styles.offset,
         compact && styles.compact,
+        maxHeight && styles.scroll,
         className
     ])
 </script>
 
-<div class={classes}>
+<div class={classes} style={maxHeight ? `max-height:${maxHeight}` : null}>
     <table>
         {#if headings?.length}
             <thead>

package/components/Table/Table.tsx

@@ -12,6 +12,7 @@ const Table = ({
     striped,
     offsetStripe,
     compact,
+    maxHeight,
     className
 }: TableProps) => {
     const classes = classNames([
@@ -20,11 +21,16 @@ const Table = ({
         striped && styles[`striped-${striped}s`],
         offsetStripe && styles.offset,
         compact && styles.compact,
+        maxHeight && styles.scroll,
         className
     ])
 
+    const styleVariables = {
+        ...(maxHeight && { 'max-height': maxHeight })
+    } as React.CSSProperties
+
     return (
-        <div className={classes}>
+        <div className={classes} style={styleVariables}>
             <table>
                 {headings?.length && (
                     <thead>

package/components/Table/table.module.scss

@@ -5,7 +5,7 @@
 
     table {
         @include size('w100%');
-        @include typography(md, left);
+        @include typography(left);
 
         border-collapse: collapse;
     }
@@ -57,4 +57,14 @@
             @include spacing(py-xxs, px-sm);
         }
     }
+
+    &.scroll {
+        @include spacing(pr-sm);
+
+        thead {
+            @include position(sticky, t0);
+            @include background(primary-70);
+            box-shadow: 0 .5px 0 var(--w-color-primary-50);
+        }
+    }
 }

package/components/Table/table.ts

@@ -6,5 +6,6 @@ export type TableProps = {
     striped?: 'column' | 'row' | null
     offsetStripe?: boolean
     compact?: boolean
+    maxHeight?: number
     className?: string
 }

package/components/Tabs/tabs.module.scss

@@ -7,6 +7,7 @@
         @include border-radius(md);
         @include spacing(p-xs);
         @include size(wmax-content);
+        @include border(0);
 
         button {
             @include transition();
@@ -46,6 +47,10 @@
         &.outline .items button {
             @include border(bottom, 0);
         }
+
+        &:not(.outline) .items {
+            @include border(0);
+        }
         
         .items {
             @include layout(column, xs);
@@ -76,7 +81,7 @@
         button {
             @include transition(color);
             @include background(transparent);
-            @include typography(md, primary-20);
+            @include typography(default, primary-20);
             @include border(0);
             @include spacing(p-md);
             @include layout(flex, v-center, sm);

package/components/ThemeSwitcher/ThemeSwitcher.astro

@@ -38,6 +38,7 @@ const buttonClasses = [
         <button
             style={!useIcons ? `background:${theme};` : undefined}
             data-theme={themes[theme]}
+            aria-label={themes[theme]}
             class:list={buttonClasses}
         >
             {index === 0 && <slot name="primaryIcon" />}

package/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -61,9 +61,10 @@
 >
     {#each Object.keys(themes) as theme, index}
         <button
+            on:click={() => setTheme(toggle ? index : themes[theme])}
             style={!useIcons ? `background:${theme};` : undefined}
             data-active={currentTheme === themes[theme]}
-            on:click={() => setTheme(toggle ? index : themes[theme])}
+            aria-label={themes[theme]}
             class={classNames([
                 styles.switch,
                 useIcons && styles.icons

package/components/ThemeSwitcher/ThemeSwitcher.tsx

@@ -70,8 +70,9 @@ const ThemeSwitcher = ({
             {Object.keys(themes as {}).map((theme, index) => (
                 <button
                     key={index}
-                    data-active={currentTheme === themes[theme]}
                     onClick={() => setTheme(toggle ? index : themes[theme])}
+                    data-active={currentTheme === themes[theme]}
+                    aria-label={themes[theme]}
                     style={!useIcons ? { background: theme } : undefined}
                     className={classNames([
                         styles.switch,

package/components/Timeline/timeline.module.scss

@@ -28,11 +28,11 @@ body {
         left: $leftOffset
     }
 
-    &.fill li::before {
+    &.fill > li::before {
         content: '';
     }
 
-    &.stroke li::before {
+    &.stroke > li::before {
         @include background(primary-70);
         border: 2px solid var(--w-timeline-color);
     }
@@ -47,7 +47,7 @@ body {
                 left: calc(50% - 1px);
             }
     
-            li {
+            > li {
                 @include size('w50%');
     
                 &:nth-child(odd) {
@@ -69,7 +69,7 @@ body {
             }
         }
     
-        &.centered li:nth-child(odd) {
+        &.centered > li:nth-child(odd) {
             @include typography(right);
         }
     }

package/components/TimelineItem/TimelineItem.tsx

@@ -1,14 +1,9 @@
 import React from 'react'
-import type { TimelineItemProps } from './timelineitem'
+import type { ReactTimelineItemProps } from './timelineitem'
 
 import styles from './timelineitem.module.scss'
 import { classNames } from '../../utils/classNames'
 
-type ReactTimelineItemProps = {
-    TitleTag?: keyof JSX.IntrinsicElements
-    children: React.ReactNode
-} & Omit<TimelineItemProps, 'titleTag'>
-
 const TimelineItem = ({
     title,
     TitleTag = 'span',