webcoreui 0.0.11 → 0.1.0

package/components/Checkbox/Checkbox.astro

@@ -4,7 +4,7 @@ import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
 
 import check from '../../icons/check.svg?raw'
 
-import './checkbox.scss'
+import styles from './checkbox.module.scss'
 
 interface Props extends CheckboxProps {}
 
@@ -13,14 +13,14 @@ const {
     label,
     subText,
     disabled,
-    boxed,
-    color
+    color,
+    className
 } = Astro.props
 
 const classes = [
-    'w-checkbox',
-    boxed && 'boxed',
-    label && subText && 'col'
+    styles.checkbox,
+    label && subText && styles.col,
+    className
 ]
 
 const style = color
@@ -30,21 +30,21 @@ const style = color
 
 <label class:list={classes} style={style}>
     <ConditionalWrapper condition={!!(label && subText)}>
-        <div class="checkbox-wrapper" slot="wrapper">
+        <div class={styles.wrapper} slot="wrapper">
             children
         </div>
         <input type="checkbox" checked={checked} disabled={disabled} />
-        <span class="check">
+        <span class={styles.check}>
             <Fragment set:html={check} />
         </span>
         {label && (
-            <span class="label">
+            <span class={styles.label}>
                 <Fragment set:html={label} />
             </span>
         )}
     </ConditionalWrapper>
     {label && subText && (
-        <span class="sub-text">
+        <span class={styles.text}>
             <Fragment set:html={subText} />
         </span>
     )}

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.module.scss

@@ -0,0 +1,70 @@
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-checkbox-color: var(--w-color-primary);
+}
+
+.checkbox {
+    @include layout(inline-flex, sm);
+    @include typography(md, hmd);
+
+    cursor: pointer;
+
+    &.col {
+        @include layout(column, h-start, v-start, none);
+
+        .wrapper {
+            @include layout(flex, sm);
+        }
+    }
+
+    input {
+        display: none;
+
+        &:checked + span {
+            @include background(var(--w-checkbox-color));
+
+            svg {
+                @include position(absolute, center);
+                @include typography(primary-50);
+                @include size(10px);
+
+                display: block;
+            }
+        }
+
+        &:disabled + span {
+            @include background(primary-40);
+            @include border(primary-40);
+            cursor: no-drop;
+        }
+    }
+
+    .check {
+        @include size(15px);
+        @include position(relative);
+        @include border-radius(sm);
+        @include spacing(mt-xs);
+
+        display: inline-block;
+        min-width: 15px;
+        border: 1px solid var(--w-checkbox-color);
+
+        svg {
+            @include visibility(none);
+        }
+    }
+
+    .text {
+        @include spacing(ml-lg);
+        @include typography(sm, primary-20);
+
+        a {
+            @include typography(primary-20);
+
+            &:hover {
+                @include typography(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.astro

@@ -1,5 +1,6 @@
 ---
 import type { IconProps } from './icon'
+import iconMap from './map'
 
 interface Props extends IconProps {}
 
@@ -9,8 +10,7 @@ const {
     color
 } = Astro.props
 
-const { default: markup } = await import(`../../icons/${type}.svg?raw`)
-const icon = markup
+const icon = iconMap[type as keyof typeof iconMap]
     .replace('width="24"', `width=${size}`)
     .replace('height="24"', color
         ? `height=${size} color=${color}`

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>