webcoreui 0.0.10 → 0.0.12

package/components/Progress/Progress.tsx

@@ -1,47 +1,48 @@
-import React from 'react'
-import type { ProgressProps } from './progress'
-
-import './progress.scss'
-
-const Progress = ({
-    value,
-    size,
-    label,
-    color,
-    background,
-    square,
-    striped,
-    stripeLight,
-    stripeDark,
-    className
-}: ProgressProps) => {
-    const classes = [
-        'w-progress',
-        size,
-        striped && 'striped',
-        square && 'square',
-        className
-    ].filter(Boolean).join(' ')
-
-    const styles = {
-        ...(color && { '--w-progress-color': color }),
-        ...(background && { '--w-progress-background': background }),
-        ...(stripeLight && { '--w-progress-stripe-light': stripeLight }),
-        ...(stripeDark && { '--w-progress-stripe-dark': stripeDark }),
-    } as React.CSSProperties
-
-    const percent = {
-        '--w-progress-width': `${value}%`
-    } as React.CSSProperties
-
-    return (
-        <div className={classes} style={styles}>
-            <div className="progress" style={percent}>
-                {label && `${value}%`}
-            </div>
-        </div>
-    )
-}
-
-export default Progress
-
+import React from 'react'
+import type { ProgressProps } from './progress'
+
+import styles from './progress.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Progress = ({
+    value,
+    size,
+    label,
+    color,
+    background,
+    square,
+    striped,
+    stripeLight,
+    stripeDark,
+    className
+}: ProgressProps) => {
+    const classes = classNames([
+        styles['w-progress'],
+        size && styles[size],
+        striped && styles.striped,
+        square && styles.square,
+        className
+    ])
+
+    const styleVariables = {
+        ...(color && { '--w-progress-color': color }),
+        ...(background && { '--w-progress-background': background }),
+        ...(stripeLight && { '--w-progress-stripe-light': stripeLight }),
+        ...(stripeDark && { '--w-progress-stripe-dark': stripeDark }),
+    } as React.CSSProperties
+
+    const percent = {
+        '--w-progress-width': `${value}%`
+    } as React.CSSProperties
+
+    return (
+        <div className={classes} style={styleVariables}>
+            <div className={styles.progress} style={percent}>
+                {label && `${value}%`}
+            </div>
+        </div>
+    )
+}
+
+export default Progress
+

package/components/Progress/{progress.scss → progress.module.scss}

@@ -1,66 +1,66 @@
-@import '../../scss/config.scss';
-
-.w-progress {
-    width: 100%;
-    height: 10px;
-    background: var(--w-progress-background);
-    border-radius: 20px;
-    overflow: hidden;
-    color: var(--w-progress-background);
-    font-family: Bold;
-    font-size: 10px;
-    
-    &.medium {
-        height: 15px;
-        font-size: 12px;
-    }
-
-    &.large {
-        height: 20px;
-        font-size: 14px;
-    }
-
-    &.square {
-        border-radius: 2px;
-
-        .progress {
-            border-radius: 2px;
-        }
-    }
-
-    &.striped {
-
-        .progress {
-            background-size: 10px 10px;
-            background-image: linear-gradient(
-                -45deg,
-                var(--w-progress-stripe-light) 25%,
-                var(--w-progress-stripe-dark) 25%,
-                var(--w-progress-stripe-dark) 50%,
-                var(--w-progress-stripe-light) 50%,
-                var(--w-progress-stripe-light) 75%,
-                var(--w-progress-stripe-dark) 75%,
-                var(--w-progress-stripe-dark)
-            );
-        }
-
-        &.medium .progress {
-            background-size: 15px 15px;
-        }
-
-        &.large .progress {
-            background-size: 20px 20px;
-        }
-    }
-
-    .progress {
-        @include Transition(width);
-        width: var(--w-progress-width);
-        height: 100%;
-        background: var(--w-progress-color);
-        border-radius: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-}
+@import '../../scss/config.scss';
+
+.w-progress {
+    width: 100%;
+    height: 10px;
+    background: var(--w-progress-background);
+    border-radius: 20px;
+    overflow: hidden;
+    color: var(--w-progress-background);
+    font-family: Bold;
+    font-size: 10px;
+    
+    &.medium {
+        height: 15px;
+        font-size: 12px;
+    }
+
+    &.large {
+        height: 20px;
+        font-size: 14px;
+    }
+
+    &.square {
+        border-radius: 2px;
+
+        .progress {
+            border-radius: 2px;
+        }
+    }
+
+    &.striped {
+
+        .progress {
+            background-size: 10px 10px;
+            background-image: linear-gradient(
+                -45deg,
+                var(--w-progress-stripe-light) 25%,
+                var(--w-progress-stripe-dark) 25%,
+                var(--w-progress-stripe-dark) 50%,
+                var(--w-progress-stripe-light) 50%,
+                var(--w-progress-stripe-light) 75%,
+                var(--w-progress-stripe-dark) 75%,
+                var(--w-progress-stripe-dark)
+            );
+        }
+
+        &.medium .progress {
+            background-size: 15px 15px;
+        }
+
+        &.large .progress {
+            background-size: 20px 20px;
+        }
+    }
+
+    .progress {
+        @include Transition(width);
+        width: var(--w-progress-width);
+        height: 100%;
+        background: var(--w-progress-color);
+        border-radius: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}

package/components/Radio/Radio.astro

@@ -1,57 +1,57 @@
----
-import type { RadioProps } from './radio'
-import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
-
-import './radio.scss'
-
-interface Props extends RadioProps {}
-
-const {
-    name,
-    items,
-    color,
-    inline,
-    className
-} = Astro.props
-
-const classes = [
-    'w-radio',
-    inline && 'inline',
-    className
-]
-
-const style = color
-    ? `--w-radio-color: ${color};`
-    : null
----
-
-<div class:list={classes} style={style}>
-    {items.map(item => (
-        <label class:list={[
-            item.subText && 'col',
-            item.disabled && 'disabled'
-        ]}>
-            <ConditionalWrapper condition={!!(item.subText)}>
-                <div class="radio-wrapper" slot="wrapper">
-                    children
-                </div>
-                <input
-                    type="radio"
-                    name={name}
-                    value={item.value}
-                    checked={item.selected}
-                    disabled={item.disabled}
-                />
-                <span class="radio" />
-                <span class="label">
-                    <Fragment set:html={item.label} />
-                </span>
-            </ConditionalWrapper>
-            {item.subText && (
-                <span class="sub-text">
-                    <Fragment set:html={item.subText} />
-                </span>
-            )}
-        </label>
-    ))}
-</div>
+---
+import type { RadioProps } from './radio'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+
+import styles from './radio.module.scss'
+
+interface Props extends RadioProps {}
+
+const {
+    name,
+    items,
+    color,
+    inline,
+    className
+} = Astro.props
+
+const classes = [
+    styles.radio,
+    inline && styles.inline,
+    className
+]
+
+const style = color
+    ? `--w-radio-color: ${color};`
+    : null
+---
+
+<div class:list={classes} style={style}>
+    {items.map(item => (
+        <label class:list={[
+            item.subText && styles.col,
+            item.disabled && styles.disabled
+        ]}>
+            <ConditionalWrapper condition={!!(item.subText)}>
+                <div class={styles.wrapper} slot="wrapper">
+                    children
+                </div>
+                <input
+                    type="radio"
+                    name={name}
+                    value={item.value}
+                    checked={item.selected}
+                    disabled={item.disabled}
+                />
+                <span class={styles.icon} />
+                <span class={styles.label}>
+                    <Fragment set:html={item.label} />
+                </span>
+            </ConditionalWrapper>
+            {item.subText && (
+                <span class={styles.subtext}>
+                    <Fragment set:html={item.subText} />
+                </span>
+            )}
+        </label>
+    ))}
+</div>

package/components/Radio/Radio.svelte

@@ -1,56 +1,58 @@
-<script lang="ts">
-    import type { RadioProps } from './radio'
-    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
-
-    import './radio.scss'
-
-    export let name: RadioProps['name'] = ''
-    export let items: RadioProps['items'] = []
-    export let color: RadioProps['color'] =  ''
-    export let inline: RadioProps['inline'] = false
-    export let className: RadioProps['className'] = ''
-    export let onChange: () => any = () => {}
-
-    const classes = [
-        'w-radio',
-        inline && 'inline',
-        className
-    ].filter(Boolean).join(' ')
-
-    const style = color
-        ? `--w-radio-color: ${color};`
-        : null
-</script>
-
-<div class={classes} style={style}>
-    {#each items as item}
-        <label
-            class:col={item.subText}
-            class:disabled={item.disabled}
-        >
-            <ConditionalWrapper
-                condition={!!(item.subText)}
-                element="div"
-                class="radio-wrapper"
-            >
-                <input
-                    type="radio"
-                    name={name}
-                    value={item.value}
-                    checked={item.selected}
-                    disabled={item.disabled}
-                    on:change={onChange}
-                />
-                <span class="radio" />
-                <span class="label">
-                    {@html item.label}
-                </span>
-            </ConditionalWrapper>
-            {#if item.subText}
-                <span class="sub-text">
-                    {@html item.subText}
-                </span>
-            {/if}
-        </label>
-    {/each}
-</div>
+<script lang="ts">
+    import type { SvelteRadioProps } from './radio'
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
+    import styles from './radio.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let name: SvelteRadioProps['name'] = ''
+    export let items: SvelteRadioProps['items'] = []
+    export let color: SvelteRadioProps['color'] =  ''
+    export let inline: SvelteRadioProps['inline'] = false
+    export let className: SvelteRadioProps['className'] = ''
+    export let onChange: SvelteRadioProps['onChange'] = () => {}
+
+    const classes = classNames([
+        styles.radio,
+        inline && styles.inline,
+        className
+    ])
+
+    const style = color
+        ? `--w-radio-color: ${color};`
+        : null
+</script>
+
+<div class={classes} style={style}>
+    {#each items as item}
+        <label class={[
+            item.subText && styles.col,
+            item.disabled && styles.disabled
+        ].filter(Boolean).join(' ')}
+        >
+            <ConditionalWrapper
+                condition={!!(item.subText)}
+                element="div"
+                class={styles.wrapper}
+            >
+                <input
+                    type="radio"
+                    name={name}
+                    value={item.value}
+                    checked={item.selected}
+                    disabled={item.disabled}
+                    on:change={onChange}
+                />
+                <span class={styles.icon} />
+                <span class={styles.label}>
+                    {@html item.label}
+                </span>
+            </ConditionalWrapper>
+            {#if item.subText}
+                <span class={styles.subtext}>
+                    {@html item.subText}
+                </span>
+            {/if}
+        </label>
+    {/each}
+</div>

package/components/Radio/Radio.tsx

@@ -1,68 +1,69 @@
-import React from 'react'
-import type { ReactRadioProps } from './radio'
-
-import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
-
-import './radio.scss'
-
-const Radio = ({
-    name,
-    items,
-    color,
-    inline,
-    className,
-    onChange
-}: ReactRadioProps) => {
-    const classes = [
-        'w-radio',
-        inline && 'inline',
-        className
-    ].filter(Boolean).join(' ')
-    
-    const style = color
-        ? { '--w-radio-color': color } as React.CSSProperties
-        : undefined
-
-    return (
-        <div className={classes} style={style}>
-            {items.map((item, index) => (
-                <label className={[
-                    item.subText && 'col',
-                    item.disabled && 'disabled'
-                ].filter(Boolean).join(' ')} key={index}>
-                    <ConditionalWrapper
-                        condition={!!(item.subText)}
-                        wrapper={children => (
-                            <div className="radio-wrapper">
-                                {children}
-                            </div>
-                        )}
-                    >
-                        <input
-                            type="radio"
-                            name={name}
-                            value={item.value}
-                            defaultChecked={item.selected}
-                            disabled={item.disabled}
-                            onChange={onChange}
-                        />
-                        <span className="radio" />
-                        <span
-                            className="label"
-                            dangerouslySetInnerHTML={{ __html: item.label }}
-                        />
-                    </ConditionalWrapper>
-                    {item.subText && (
-                        <span
-                            className="sub-text"
-                            dangerouslySetInnerHTML={{ __html: item.subText }}
-                        />
-                    )}
-                </label>
-            ))}
-        </div>
-    )
-}
-
-export default Radio
-
+import React from 'react'
+import type { ReactRadioProps } from './radio'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import styles from './radio.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Radio = ({
+    name,
+    items,
+    color,
+    inline,
+    className,
+    onChange
+}: ReactRadioProps) => {
+    const classes = classNames([
+        styles.radio,
+        inline && styles.inline,
+        className
+    ])
+    
+    const style = color
+        ? { '--w-radio-color': color } as React.CSSProperties
+        : undefined
+
+    return (
+        <div className={classes} style={style}>
+            {items.map((item, index) => (
+                <label className={[
+                    item.subText && styles.col,
+                    item.disabled && styles.disabled
+                ].filter(Boolean).join(' ')} key={index}>
+                    <ConditionalWrapper
+                        condition={!!(item.subText)}
+                        wrapper={children => (
+                            <div className={styles.wrapper}>
+                                {children}
+                            </div>
+                        )}
+                    >
+                        <input
+                            type="radio"
+                            name={name}
+                            value={item.value}
+                            defaultChecked={item.selected}
+                            disabled={item.disabled}
+                            onChange={onChange}
+                        />
+                        <span className={styles.icon} />
+                        <span
+                            className={styles.label}
+                            dangerouslySetInnerHTML={{ __html: item.label }}
+                        />
+                    </ConditionalWrapper>
+                    {item.subText && (
+                        <span
+                            className={styles.subtext}
+                            dangerouslySetInnerHTML={{ __html: item.subText }}
+                        />
+                    )}
+                </label>
+            ))}
+        </div>
+    )
+}
+
+export default Radio
+