webcoreui 0.0.11 → 0.0.12

package/components/Checkbox/Checkbox.svelte

@@ -1,24 +1,25 @@
 <script lang="ts">
-    import type { CheckboxProps } from './checkbox'
+    import type { SvelteCheckboxProps } from './checkbox'
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
     
     import check from '../../icons/check.svg?raw'
     
-    import './checkbox.scss'
+    import styles from './checkbox.module.scss'
+    import { classNames } from '../../utils/classNames'
     
-    export let checked: CheckboxProps['checked'] = false
-    export let label: CheckboxProps['label'] = ''
-    export let subText: CheckboxProps['subText'] = ''
-    export let disabled: CheckboxProps['disabled'] = false
-    export let boxed: CheckboxProps['boxed'] = false
-    export let color: CheckboxProps['color'] = ''
-    export let onClick: () => any = () => {}
+    export let checked: SvelteCheckboxProps['checked'] = false
+    export let label: SvelteCheckboxProps['label'] = ''
+    export let subText: SvelteCheckboxProps['subText'] = ''
+    export let disabled: SvelteCheckboxProps['disabled'] = false
+    export let color: SvelteCheckboxProps['color'] = ''
+    export let className: SvelteCheckboxProps['className'] = ''
+    export let onClick: SvelteCheckboxProps['onClick'] = () => {}
 
-    const classes = [
-        'w-checkbox',
-        boxed && 'boxed',
-        label && subText && 'col'
-    ].filter(Boolean).join(' ')
+    const classes = classNames([
+        styles.checkbox,
+        label && subText && styles.col,
+        className
+    ])
     
     const style = color
         ? `--w-checkbox-color: ${color};`
@@ -29,7 +30,7 @@
     <ConditionalWrapper
         condition={!!(label && subText)}
         element="div"
-        class="checkbox-wrapper"
+        class={styles.wrapper}
     >
         <input
             type="checkbox"
@@ -37,16 +38,16 @@
             disabled={disabled}
             on:click={onClick}
         />
-        <span class="check">
+        <span class={styles.check}>
             {@html check}
         </span>
         {#if label}
-            <span class="label">
+            <span class={styles.label}>
                 {@html label}
             </span>
         {/if}
     </ConditionalWrapper>
     {#if label && subText}
-        <span class="sub-text">{@html subText}</span>
+        <span class={styles.text}>{@html subText}</span>
     {/if}
 </label>

package/components/Checkbox/Checkbox.tsx

@@ -4,22 +4,23 @@ import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
 import check from '../../icons/check.svg?raw'
 
-import './checkbox.scss'
+import styles from './checkbox.module.scss'
+import { classNames } from '../../utils/classNames'
 
 const Checkbox = ({
     checked,
     label,
     subText,
     disabled,
-    boxed,
     color,
+    className,
     onClick
 }: ReactCheckboxProps) => {
-    const classes = [
-        'w-checkbox',
-        boxed && 'boxed',
-        label && subText && 'col'
-    ].filter(Boolean).join(' ')
+    const classes = classNames([
+        styles.checkbox,
+        label && subText && styles.col,
+        className
+    ])
     
     const style = color
         ? { '--w-checkbox-color': color } as React.CSSProperties
@@ -30,7 +31,7 @@ const Checkbox = ({
             <ConditionalWrapper
                 condition={!!(label && subText)}
                 wrapper={children => (
-                    <div className="checkbox-wrapper">
+                    <div className={styles.wrapper}>
                         {children}
                     </div>
                 )}
@@ -42,19 +43,19 @@ const Checkbox = ({
                     onClick={onClick}
                 />
                 <span
-                    className="check"
+                    className={styles.check}
                     dangerouslySetInnerHTML={{ __html: check }}
                 />
                 {label && (
                     <span
-                        className="label"
+                        className={styles.label}
                         dangerouslySetInnerHTML={{ __html: label }}
                     />
                 )}
             </ConditionalWrapper>
             {label && subText && (
                 <span
-                    className="sub-text"
+                    className={styles.text}
                     dangerouslySetInnerHTML={{ __html: subText }}
                 />
             )}

package/components/Checkbox/{checkbox.scss → checkbox.module.scss}

@@ -1,29 +1,27 @@
 @import '../../scss/config.scss';
 
-.w-checkbox {
+.checkbox {
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 16px;
+    line-height: 1.5;
 
     &.col {
         flex-direction: column;
         align-items: flex-start;
         justify-content: flex-start;
-        gap: 5px;
+        gap: 0;
 
-        .checkbox-wrapper {
+        .wrapper {
             display: flex;
-            align-items: center;
             gap: 10px;
-        }
-    }
 
-    &.boxed {
-        border: 1px solid #252525;
-        border-radius: 5px;
-        padding: 20px;
+            .check {
+                margin-top: 5px;
+            }
+        }
     }
 
     input {
@@ -38,15 +36,15 @@
                 left: 50%;
                 transform: translate(-50%, -50%);
                 display: block;
-                color: #252525;
+                color: var(--w-color-primary-50);
                 width: 10px;
                 height: 10px;
             }
         }
 
         &:disabled + span {
-            background-color: #333;
-            border-color: #333;
+            background-color: var(--w-color-primary-40);
+            border-color: var(--w-color-primary-40);
             cursor: no-drop;
         }
     }
@@ -59,6 +57,7 @@
         display: inline-block;
         width: 15px;
         height: 15px;
+        min-width: 15px;
         border: 1px solid var(--w-checkbox-color);
         border-radius: 2px;
         position: relative;
@@ -68,17 +67,17 @@
         }
     }
 
-    .sub-text {
+    .text {
         margin-left: 25px;
         font-size: 14px;
-        color: #BBB;
+        color: var(--w-color-primary-20);
 
         a {
             @include Transition(color);
-            color: #BBB;
+            color: var(--w-color-primary-20);
 
             &:hover {
-                color: #FFF;
+                color: var(--w-color-primary);
             }
         }
     }

package/components/Checkbox/checkbox.ts

@@ -3,10 +3,14 @@ export type CheckboxProps = {
     label?: string
     subText?: string
     disabled?: boolean
-    boxed?: boolean
     color?: string
+    className?: string
 }
 
+export type SvelteCheckboxProps = {
+    onClick?: (key: any) => any
+} & CheckboxProps
+
 export type ReactCheckboxProps = {
     onClick?: (key: any) => any
 } & CheckboxProps

package/components/ConditionalWrapper/ConditionalWrapper.svelte

@@ -2,7 +2,7 @@
     import type { ConditionalWrapperProps } from './conditionalwrapper'
 
     export let condition: ConditionalWrapperProps['condition']
-    export let element: string
+    export let element: string = 'div'
 </script>
 
 {#if condition}

package/components/Icon/Icon.svelte

@@ -1,18 +1,11 @@
 <script lang="ts">
     import type { IconProps } from './icon'
-
-    import Github from '../../icons/github.svg?raw'
-    import ArrowDown from '../../icons/arrow-down.svg?raw'
+    import iconMap from './map'
 
     export let type: IconProps['type'] = ''
     export let size: IconProps['size'] = 24
     export let color: IconProps['color'] = ''
 
-    const iconMap = {
-        'github': Github,
-        'arrow-down': ArrowDown
-    }
-
     const icon = iconMap[type as keyof typeof iconMap]
         .replace('width="24"', `width=${size}`)
         .replace('height="24"', color

package/components/Icon/Icon.tsx

@@ -1,13 +1,6 @@
 import React from 'react'
 import type { IconProps } from './icon'
-
-import Github from '../../icons/github.svg?raw'
-import ArrowDown from '../../icons/arrow-down.svg?raw'
-
-const iconMap = {
-    'github': Github,
-    'arrow-down': ArrowDown
-}
+import iconMap from './map'
 
 const Icon = ({
     type,

package/components/Icon/map.ts

@@ -0,0 +1,23 @@
+import Alert from '../../icons/alert.svg?raw'
+import ArrowDown from '../../icons/arrow-down.svg?raw'
+import Check from '../../icons/check.svg?raw'
+import CircleCheck from '../../icons/circle-check.svg?raw'
+import Github from '../../icons/github.svg?raw'
+import Info from '../../icons/info.svg?raw'
+import Moon from '../../icons/moon.svg?raw'
+import Sun from '../../icons/sun.svg?raw'
+import Warning from '../../icons/warning.svg?raw'
+
+const iconMap = {
+    'alert': Alert,
+    'arrow-down': ArrowDown,
+    'check': Check,
+    'circle-check': CircleCheck,
+    'github': Github,
+    'info': Info,
+    'moon': Moon,
+    'sun': Sun,
+    'warning': Warning
+}
+
+export default iconMap

package/components/Input/Input.astro

@@ -1,52 +1,50 @@
----
-import type { InputProps } from './input'
-import ConditionalWrapper from '@components/ConditionalWrapper/ConditionalWrapper.astro'
-
-import './input.scss'
-
-interface Props extends InputProps {}
-
-const {
-    type = 'text',
-    theme,
-    label,
-    subText,
-    fill,
-    className,
-    ...rest
-} = Astro.props
-
-const classes = [
-    'w-input',
-    theme,
-    fill && 'fill',
-    className
-]
-
-const useLabel = !!(label || subText || Astro.slots.has('icon'))
----
-
-<ConditionalWrapper condition={useLabel}>
-    <label slot="wrapper" class="w-input-label">
-        {label && (
-            <div class="label">{label}</div>
-        )}
-        <ConditionalWrapper condition={Astro.slots.has('icon')}>
-            <div class="input-wrapper" slot="wrapper">
-                children
-            </div>
-            <slot name="icon" />
-            children
-        </ConditionalWrapper>
-        {subText && (
-            <div class="subtext">
-                <Fragment set:html={subText} />
-            </div>
-        )}
-    </label>
-    <input
-        type={type}
-        class:list={classes}
-        {...rest}
-    />
-</ConditionalWrapper>
+---
+import type { InputProps } from './input'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+
+import styles from './input.module.scss'
+
+interface Props extends InputProps {}
+
+const {
+    type = 'text',
+    theme,
+    label,
+    subText,
+    className,
+    ...rest
+} = Astro.props
+
+const classes = [
+    styles.input,
+    theme && styles[theme],
+    className
+]
+
+const useLabel = !!(label || subText || Astro.slots.has('default'))
+---
+
+<ConditionalWrapper condition={useLabel}>
+    <label slot="wrapper" class={styles['input-label']}>
+        {label && (
+            <div class={styles.label}>{label}</div>
+        )}
+        <ConditionalWrapper condition={Astro.slots.has('default')}>
+            <div class={styles.wrapper} slot="wrapper">
+                children
+            </div>
+            <slot />
+            children
+        </ConditionalWrapper>
+        {subText && (
+            <div class={styles.subtext}>
+                <Fragment set:html={subText} />
+            </div>
+        )}
+    </label>
+    <input
+        type={type}
+        class:list={classes}
+        {...rest}
+    />
+</ConditionalWrapper>

package/components/Input/Input.svelte

@@ -1,52 +1,52 @@
-<script lang="ts">
-    import type { InputProps } from './input'
-    import ConditionalWrapper from '@components/ConditionalWrapper/ConditionalWrapper.svelte'
-    import './input.scss'
-
-    export let type: InputProps['type'] = 'text'
-    export let theme: InputProps['theme'] = null
-    export let label: InputProps['label'] = ''
-    export let subText: InputProps['subText'] = ''
-    export let fill: InputProps['fill'] = false
-    export let className: InputProps['className'] = ''
-    export let onChange: (e: any) => any = () => {}
-    export let onKeyUp: (e: any) => any = () => {}
-
-    const classes = [
-        'w-input',
-        theme,
-        fill && 'fill',
-        className
-    ].filter(Boolean).join(' ')
-
-    const useLabel = !!(label || subText || $$slots.icon)
-</script>
-
-<ConditionalWrapper
-    condition={useLabel}
-    element="label"
-    class="w-input-label"
->
-    {#if label}
-        <div class="label">{label}</div>
-    {/if}
-    <ConditionalWrapper
-        condition={$$slots.icon}
-        element="div"
-        class="input-wrapper"
-    >
-        <slot name="icon" />
-        <input
-            type={type}
-            class={classes}
-            on:change={onChange}
-            on:keyup={onKeyUp}
-            {...$$restProps}
-        />
-    </ConditionalWrapper>
-    {#if label}
-        <div class="subtext">
-            {@html subText}
-        </div>
-    {/if}
-</ConditionalWrapper>
+<script lang="ts">
+    import type { SvelteInputProps } from './input'
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
+    import styles from './input.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let type: SvelteInputProps['type'] = 'text'
+    export let theme: SvelteInputProps['theme'] = null
+    export let label: SvelteInputProps['label'] = ''
+    export let subText: SvelteInputProps['subText'] = ''
+    export let className: SvelteInputProps['className'] = ''
+    export let onChange: SvelteInputProps['onChange'] = () => {}
+    export let onKeyUp: SvelteInputProps['onKeyUp'] = () => {}
+
+    const classes = classNames([
+        styles.input,
+        theme && styles[theme],
+        className
+    ])
+
+    const useLabel = !!(label || subText || $$slots.default)
+</script>
+
+<ConditionalWrapper
+    condition={useLabel}
+    element="label"
+    class={styles['input-label']}
+>
+    {#if label}
+        <div class={styles.label}>{label}</div>
+    {/if}
+    <ConditionalWrapper
+        condition={$$slots.default}
+        element="div"
+        class={styles.wrapper}
+    >
+        <slot />
+        <input
+            type={type}
+            class={classes}
+            on:change={onChange}
+            on:keyup={onKeyUp}
+            {...$$restProps}
+        />
+    </ConditionalWrapper>
+    {#if label}
+        <div class={styles.subtext}>
+            {@html subText}
+        </div>
+    {/if}
+</ConditionalWrapper>

package/components/Input/Input.tsx

@@ -1,59 +1,59 @@
-import React from 'react'
-import type { ReactInputProps } from './input'
-import ConditionalWrapper from '@components/ConditionalWrapper/ConditionalWrapper.tsx'
-
-import './input.scss'
-
-const Input = ({
-    type = 'text',
-    theme,
-    label,
-    subText,
-    fill,
-    icon,
-    value,
-    className,
-    ...rest
-}: ReactInputProps) => {
-    const classes = [
-        'w-input',
-        theme,
-        fill && 'fill',
-        className
-    ].filter(Boolean).join(' ')
-
-    const useLabel = !!(label || subText || icon)
-
-    return (
-        <ConditionalWrapper condition={useLabel} wrapper={children => (
-            <label className="w-input-label">
-                {children}
-            </label>
-        )}>
-            {label && (
-                <div className="label">{label}</div>
-            )}
-            <ConditionalWrapper condition={!!icon} wrapper={children => (
-                <div className="input-wrapper">
-                    {children}
-                </div>
-            )}>
-                {icon && icon}
-                <input
-                    type={type}
-                    className={classes}
-                    defaultValue={value}
-                    {...rest}
-                />
-            </ConditionalWrapper>
-            {subText && (
-                <div
-                    className="subtext"
-                    dangerouslySetInnerHTML={{ __html: subText }}
-                />
-            )}
-        </ConditionalWrapper>
-    )
-}
-
-export default Input
+import React from 'react'
+import type { ReactInputProps } from './input'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import styles from './input.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Input = ({
+    type = 'text',
+    theme,
+    label,
+    subText,
+    icon,
+    value,
+    className,
+    children,
+    ...rest
+}: ReactInputProps) => {
+    const classes = classNames([
+        styles.input,
+        theme && styles[theme],
+        className
+    ])
+
+    const useLabel = !!(label || subText || children)
+
+    return (
+        <ConditionalWrapper condition={useLabel} wrapper={children => (
+            <label className={styles['input-label']}>
+                {children}
+            </label>
+        )}>
+            {label && (
+                <div className={styles.label}>{label}</div>
+            )}
+            <ConditionalWrapper condition={!!children} wrapper={children => (
+                <div className={styles.wrapper}>
+                    {children}
+                </div>
+            )}>
+                {children}
+                <input
+                    type={type}
+                    className={classes}
+                    defaultValue={value}
+                    {...rest}
+                />
+            </ConditionalWrapper>
+            {subText && (
+                <div
+                    className={styles.subtext}
+                    dangerouslySetInnerHTML={{ __html: subText }}
+                />
+            )}
+        </ConditionalWrapper>
+    )
+}
+
+export default Input