webcoreui 0.3.0 → 0.4.1

package/components/Slider/Slider.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { SvelteSliderProps } from './slider'
 
-    import styles from './slider.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './slider.module.scss'
+
     export let min: SvelteSliderProps['min'] = 0
     export let max: SvelteSliderProps['max'] = 100
     export let value: SvelteSliderProps['value'] = 0

package/components/Slider/Slider.tsx

@@ -1,48 +1,49 @@
-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
+import React from 'react'
+import type { ReactSliderProps } from './slider'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './slider.module.scss'
+
+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/Spinner/Spinner.astro

@@ -1,9 +1,10 @@
 ---
 import type { SpinnerProps } from './spinner'
 
-import styles from './spinner.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './spinner.module.scss'
+
 interface Props extends SpinnerProps {}
 
 const {
@@ -11,7 +12,7 @@ const {
     width,
     speed,
     size,
-    dashArray,
+    dashArray
 } = Astro.props
 
 const classes = [
@@ -24,7 +25,7 @@ const styleVariables = classNames([
     width && `--w-spinner-width: ${width}px;`,
     speed && `--w-spinner-speed: ${speed}s;`,
     size && `--w-spinner-size: ${size}px;`,
-    dashArray && `--w-spinner-dash: ${dashArray}`,
+    dashArray && `--w-spinner-dash: ${dashArray}`
 ])
 ---
 

package/components/Spinner/Spinner.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { SpinnerProps } from './spinner'
 
-    import styles from './spinner.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './spinner.module.scss'
+
     export let color: SpinnerProps['color'] = ''
     export let width: SpinnerProps['width'] = 0
     export let speed: SpinnerProps['speed'] = 0
@@ -20,7 +21,7 @@
         width && `--w-spinner-width: ${width}px;`,
         speed && `--w-spinner-speed: ${speed}s;`,
         size && `--w-spinner-size: ${size}px;`,
-        dashArray && `--w-spinner-dash: ${dashArray}`,
+        dashArray && `--w-spinner-dash: ${dashArray}`
     ])
 </script>
 

package/components/Spinner/Spinner.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import type { SpinnerProps } from './spinner'
 
-import styles from './spinner.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './spinner.module.scss'
+
 const Spinner = ({
     color,
     width,
@@ -15,13 +16,13 @@ const Spinner = ({
         styles.spinner,
         dashArray && styles.dashed
     ])
-    
+
     const stylesVariable = {
         ...(color && { '--w-spinner-color': color }),
         ...(width && { '--w-spinner-width': `${width}px;` }),
         ...(speed && { '--w-spinner-speed': `${speed}s;` }),
         ...(size && { '--w-spinner-size': `${size}px;` }),
-        ...(dashArray && { '--w-spinner-dash': dashArray }),
+        ...(dashArray && { '--w-spinner-dash': dashArray })
     } as React.CSSProperties
 
     return (

package/components/Switch/Switch.astro

@@ -1,9 +1,10 @@
 ---
 import type { SwitchProps } from './switch'
 
-import styles from './switch.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './switch.module.scss'
+
 interface Props extends SwitchProps {}
 
 const {

package/components/Switch/Switch.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { SvelteSwitchProps } from './switch'
 
-    import styles from './switch.module.scss'
     import { classNames } from '../../utils/classNames'
-    
+
+    import styles from './switch.module.scss'
+
     export let label: SvelteSwitchProps['label'] = ''
     export let toggled: SvelteSwitchProps['toggled'] = false
     export let offColor: SvelteSwitchProps['offColor'] = ''
@@ -14,7 +15,7 @@
     export let disabled: SvelteSwitchProps['disabled'] = false
     export let className: SvelteSwitchProps['className'] = ''
     export let onClick: SvelteSwitchProps['onClick'] = () => {}
-    
+
     const classes = classNames([
         styles.switch,
         reverse && styles.reverse,
@@ -23,7 +24,7 @@
         disabled && styles.disabled,
         className
     ])
-    
+
     const styleVariables = classNames([
         offColor && `--w-switch-off-color: ${offColor};`,
         onColor && `--w-switch-on-color: ${onColor};`

package/components/Switch/Switch.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import type { ReactSwitchProps } from './switch'
 
-import styles from './switch.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './switch.module.scss'
+
 const Switch = ({
     label,
     toggled,
@@ -42,7 +43,6 @@ const Switch = ({
             {label && <span className={styles.label}>{label}</span>}
         </label>
     )
-    
 }
 
 export default Switch

package/components/Switch/switch.module.scss

@@ -68,13 +68,13 @@ body {
         @include background(var(--w-switch-off-color));
 
         &::before {
+            @include transition(transform);
             @include position(absolute, l3px, b3px);
             @include size(24px);
             @include border-radius(max);
             @include background(primary-70);
 
             content: '';
-            transition: 0.3s;
         }
     }
 }

package/components/Table/Table.astro

@@ -1,5 +1,6 @@
 ---
 import type { TableProps } from './table'
+
 import styles from './table.module.scss'
 
 interface Props extends TableProps {}

package/components/Table/Table.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { TableProps } from './table'
 
-    import styles from './table.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './table.module.scss'
+
     export let headings: TableProps['headings'] = []
     export let footer: TableProps['footer'] = []
     export let data: TableProps['data'] = []

package/components/Table/Table.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import type { TableProps } from './table'
 
-import styles from './table.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './table.module.scss'
+
 const Table = ({
     headings,
     footer,

package/components/Tabs/Tabs.astro

@@ -1,5 +1,6 @@
 ---
 import type { TabsProps } from './tabs'
+
 import styles from './tabs.module.scss'
 
 interface Props extends TabsProps {}
@@ -59,7 +60,7 @@ const classes = [
                         } else {
                             element.dataset.active = false
                         }
-                })
+                    })
 
                 const tabs = target.parentElement?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>
 

package/components/Tabs/Tabs.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { TabsProps } from './tabs'
 
-    import styles from './tabs.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './tabs.module.scss'
+
     export let items: TabsProps['items'] = []
     export let theme: TabsProps['theme'] = null
     export let vertical: TabsProps['vertical'] = false

package/components/Tabs/Tabs.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useRef } from 'react'
+import React, { useRef,useState } from 'react'
 import type { ReactTabsProps } from './tabs'
 
-import styles from './tabs.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './tabs.module.scss'
+
 const Tabs = ({
     items,
     theme,
@@ -33,7 +34,7 @@ const Tabs = ({
                 item.dataset.active = true
             }
         })
-    
+
         setActive(tab)
     }
 

package/components/Textarea/Textarea.astro

@@ -1,5 +1,6 @@
 ---
 import type { TextareaProps } from './textarea'
+
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
 
 import styles from './textarea.module.scss'

package/components/Textarea/Textarea.svelte

@@ -1,10 +1,12 @@
 <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'
 
+    import styles from './textarea.module.scss'
+
     export let label: SvelteTextareaProps['label'] = ''
     export let placeholder: SvelteTextareaProps['placeholder'] = ''
     export let subText: SvelteTextareaProps['subText'] = ''

package/components/Textarea/Textarea.tsx

@@ -1,50 +1,52 @@
-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
+import React from 'react'
+import type { ReactTextareaProps } from './textarea'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './textarea.module.scss'
+
+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