webcoreui 0.1.0 → 0.3.0

package/components/Sheet/sheet.module.scss

@@ -0,0 +1,68 @@
+@import '../../scss/config.scss';
+
+.sheet {
+    @include position(t0, 'r-100%', lauto);
+    @include visibility(1);
+    @include border-radius(none);
+    @include size(100%);
+    @include border(0);
+    @include border(left, primary-50);
+
+    transform: none;
+
+    &[data-show="true"] {
+        @include position(r0);
+
+        transform: none;
+    }
+
+    &.left {
+        @include position('l-100%', rauto);
+        @include border(0);
+        @include border(right, primary-50);
+
+        &[data-show="true"] {
+            @include position(l0);
+        }
+    }
+
+    &.top {
+        @include position(t0, l0);
+        @include size(hauto);
+        @include border(0);
+        @include border(bottom, primary-50);
+
+        transform: translateY(-100%);
+        min-width: 100%;
+
+        &[data-show="true"] {
+            transform: translateY(0);
+        }
+    }
+
+    &.bottom {
+        @include position(b0, l0);
+        @include size(hauto);
+        @include border(0);
+        @include border(top, primary-50);
+
+        transform: translateY(100%);
+        top: auto;
+        min-width: 100%;
+
+        &[data-show="true"] {
+            transform: translateY(0);
+        }
+    }
+}
+
+@include media(xs) {
+    .sheet {
+        @include position(r-500px);
+        @include size(w500px);
+
+        &.left {
+            @include position(l-500px);
+        }
+    }
+}

package/components/Sheet/sheet.ts

@@ -0,0 +1,10 @@
+import type { ModalProps, ReactModalProps } from '../Modal/modal'
+
+export type SheetProps = {
+    position?: 'left'
+        | 'top'
+        | 'bottom'
+        | null
+} & ModalProps
+
+export type ReactSheetProps = SheetProps & ReactModalProps

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/Textarea/Textarea.astro

@@ -0,0 +1,44 @@
+---
+import type { TextareaProps } from './textarea'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+
+import styles from './textarea.module.scss'
+
+interface Props extends TextareaProps {}
+
+const {
+    label,
+    placeholder,
+    subText,
+    value = '',
+    disabled,
+    className
+} = Astro.props
+
+const classes = [
+    styles.textarea,
+    className
+]
+
+const useLabel = !!(label || subText)
+---
+
+<ConditionalWrapper condition={useLabel}>
+    <label slot="wrapper" class={styles['label-wrapper']}>
+        {label && (
+            <div class={styles.label}>{label}</div>
+        )}
+        children
+        {subText && (
+            <div class={styles.subtext}>
+                <Fragment set:html={subText} />
+            </div>
+        )}
+    </label>
+
+    <textarea
+        placeholder={placeholder}
+        disabled={disabled}
+        class:list={classes}
+    >{value}</textarea>
+</ConditionalWrapper>

package/components/Textarea/Textarea.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import type { SvelteTextareaProps } from './textarea'
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
+    import styles from './textarea.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let label: SvelteTextareaProps['label'] = ''
+    export let placeholder: SvelteTextareaProps['placeholder'] = ''
+    export let subText: SvelteTextareaProps['subText'] = ''
+    export let value: SvelteTextareaProps['value'] = ''
+    export let disabled: SvelteTextareaProps['disabled'] = false
+    export let className: SvelteTextareaProps['className'] = ''
+    export let onChange: SvelteTextareaProps['onChange'] = () => {}
+    export let onKeyUp: SvelteTextareaProps['onKeyUp'] = () => {}
+
+    const classes = classNames([
+        styles.textarea,
+        className
+    ])
+
+    const useLabel = !!(label || subText)
+</script>
+
+<ConditionalWrapper
+    condition={useLabel}
+    element="label"
+    class={styles['label-wrapper']}
+>
+    {#if label}
+        <div class={styles.label}>{label}</div>
+    {/if}
+    <textarea
+        placeholder={placeholder}
+        disabled={disabled}
+        class={classes}
+        on:change={onChange}
+        on:keyup={onKeyUp}
+    >{value}</textarea>
+    {#if subText}
+        <div class={styles.subtext}>
+            {@html subText}
+        </div>
+    {/if}
+</ConditionalWrapper>

package/components/Textarea/Textarea.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import type { ReactTextareaProps } from './textarea'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import styles from './textarea.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Textarea = ({
+    label,
+    placeholder,
+    subText,
+    value = '',
+    disabled,
+    className,
+    ...rest
+}: ReactTextareaProps) => {
+    const classes = classNames([
+        styles.textarea,
+        className
+    ])
+
+    const useLabel = !!(label || subText)
+
+    return (
+        <ConditionalWrapper condition={useLabel} wrapper={children => (
+            <label className={styles['label-wrapper']}>
+                {label && (
+                    <div className={styles.label}>{label}</div>
+                )}
+                {children}
+                {subText && (
+                    <div
+                        className={styles.subtext}
+                        dangerouslySetInnerHTML={{ __html: subText }}
+                    />
+                )}
+            </label>
+        )}>
+            <textarea
+                placeholder={placeholder}
+                disabled={disabled}
+                className={classes}
+                defaultValue={value}
+                {...rest}
+            />
+        </ConditionalWrapper>
+    )
+}
+
+export default Textarea

package/components/Textarea/textarea.module.scss

@@ -0,0 +1,36 @@
+@import '../../scss/config.scss';
+
+.textarea {
+    @include size('w100%');
+    @include background(transparent);
+    @include border-radius(sm);
+    @include border(primary-50);
+    @include spacing(p-sm);
+    @include typography(regular, primary, hlg);
+
+    min-height: 50px;
+    resize: vertical;
+
+    &[disabled] {
+        @include typography(primary-30);
+        cursor: no-drop;
+    }
+
+    &::placeholder {
+        @include typography(primary-30);
+    }
+}
+
+.label-wrapper {
+    @include layout(flex, column);
+
+    .label {
+        @include typography(primary-20);
+        @include spacing(mb-xs);
+    }
+
+    .subtext {
+        @include typography(md, primary-30);
+        @include spacing(mt-xs);
+    }
+}

package/components/Textarea/textarea.ts

@@ -0,0 +1,18 @@
+export type TextareaProps = {
+    label?: string
+    placeholder?: string
+    subText?: string
+    value?: string
+    disabled?: boolean
+    className?: string
+}
+
+export type SvelteTextareaProps = {
+    onChange?: (e: any) => any
+    onKeyUp?: (e: any) => any
+} & TextareaProps
+
+export type ReactTextareaProps = {
+    onChange?: (e: any) => any
+    onKeyUp?: (e: any) => any
+} & TextareaProps

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,