webcoreui 0.0.11 → 0.1.0

package/components/Toast/Toast.svelte

@@ -1,21 +1,32 @@
-<script lang="ts">
-    import type { ToastProps } from './toast'
-    import Alert from '../Alert/Alert.svelte'
-    import './toast.scss'
-
-    export let position: ToastProps['position'] = ''
-    export let className: ToastProps['className'] = ''
-
-    const classes = [
-        'w-toast',
-        position,
-        className
-    ].filter(Boolean).join(' ')
-</script>
-
-<Alert {...$$restProps} className={classes}>
-    {#if $$slots.icon}
-        <slot name="icon" />
-    {/if}
-    <slot />
-</Alert>
+<script lang="ts">
+    import type { ToastProps } from './toast'
+    import Alert from '../Alert/Alert.svelte'
+
+    import styles from './toast.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let position: ToastProps['position'] = null
+    export let className: ToastProps['className'] = ''
+
+    const classes = classNames([
+        styles.toast,
+        className
+    ])
+
+    const additionalProps = {
+        ...(position && { 'data-position': position }),
+        titleProps: {
+            'data-id': 'title'
+        },
+        bodyProps: {
+            'data-id': 'body'
+        }
+    }
+</script>
+
+<Alert {...$$restProps} className={classes} {...additionalProps}>
+    {#if $$slots.icon}
+        <slot name="icon" />
+    {/if}
+    <slot />
+</Alert>

package/components/Toast/Toast.tsx

@@ -1,28 +1,38 @@
-import React from 'react'
-import type { ReactToastProps } from './toast'
-import Alert from '../Alert/Alert.tsx'
-
-import './toast.scss'
-
-const Toast = ({
-    icon,
-    position,
-    className,
-    children,
-    ...rest
-}: ReactToastProps) => {
-    const classes = [
-        'w-toast',
-        position,
-        className
-    ].filter(Boolean).join(' ')
-
-    return (
-        <Alert {...rest} className={classes} icon={icon}>
-            {children}
-        </Alert>
-
-    )
-}
-
-export default Toast
+import React from 'react'
+import type { ReactToastProps } from './toast'
+import Alert from '../Alert/Alert.tsx'
+
+import styles from './toast.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Toast = ({
+    icon,
+    position,
+    className,
+    children,
+    ...rest
+}: ReactToastProps) => {
+    const classes = classNames([
+        styles.toast,
+        className
+    ])
+
+    const additionalProps = {
+        ...(position && { 'data-position': position }),
+        titleProps: {
+            'data-id': 'title'
+        },
+        bodyProps: {
+            'data-id': 'body'
+        }
+    }
+
+    return (
+        <Alert {...rest} className={classes} icon={icon} {...additionalProps}>
+            {children}
+        </Alert>
+
+    )
+}
+
+export default Toast

package/components/Toast/toast.module.scss

@@ -0,0 +1,40 @@
+@use '../../scss/config.scss' as *;
+
+.toast {
+    @include background(primary-70);
+    @include position(fixed, r20px, b20px);
+    @include layer(header);
+
+    transform: translateY(calc(100% + 25px));
+
+    &[data-show] {
+        @include transition(transform);
+    }
+
+    &[data-show="true"] {
+        transform: translateY(0);
+    }
+
+    &[data-position="bottom-left"],
+    &[data-position="top-left"] {
+        @include position(l20px);
+        right: auto;
+    }
+
+    &[data-position="top-left"],
+    &[data-position="top-right"],
+    &[data-position="top-full"] {
+        @include position(t20px);
+        bottom: auto;
+        transform: translateY(calc(-100% - 25px));
+
+        &[data-show="true"] {
+            transform: translateY(0);
+        }
+    }
+
+    &[data-position="bottom-full"],
+    &[data-position="top-full"] {
+        @include position(l20px);
+    }
+}

package/components/Toast/toast.ts

@@ -1,11 +1,13 @@
-import type { AlertProps } from '../Alert/alert'
+import type { AlertProps, ReactAlertProps } from '../Alert/alert'
 
 export type ToastProps = {
-    position?: string
+    position?: 'bottom-left'
+        | 'top-left'
+        | 'top-right'
+        | 'bottom-full'
+        | 'top-full'
+        | null
     [key: string]: any
 } & AlertProps
 
-export type ReactToastProps = {
-    children: React.ReactNode
-    icon?: string
-} & ToastProps
+export type ReactToastProps = ToastProps & ReactAlertProps

package/icons/moon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 12.9878C22.3889 19.5232 15.8512 24.1592 9.42483 22.745C-2.76068 20.0671 -1.26102 2.11102 10.9147 1C5.14829 8.69528 15.1998 18.6762 23 12.9878Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/sun.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 12H4.66667M3.44444 3.44444L6.03678 6.03678M20.5556 3.44444L17.9632 6.03678M3.44444 20.5556L6.03678 17.9632M20.5556 20.5556L17.9632 17.9632M12 1V4.66667M12 23V19.3333M19.3333 12H23M15.6667 12C15.6667 12.9725 15.2804 13.9051 14.5927 14.5927C13.9051 15.2804 12.9725 15.6667 12 15.6667C11.0275 15.6667 10.0949 15.2804 9.40727 14.5927C8.71964 13.9051 8.33333 12.9725 8.33333 12C8.33333 11.0275 8.71964 10.0949 9.40727 9.40727C10.0949 8.71964 11.0275 8.33333 12 8.33333C12.9725 8.33333 13.9051 8.71964 14.5927 9.40727C15.2804 10.0949 15.6667 11.0275 15.6667 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons.d.ts

@@ -0,0 +1,11 @@
+declare module 'webcoreui/icons' {
+    export const alert: string
+	export const arrowDown: string
+	export const check: string
+	export const circleCheck: string
+	export const github: string
+	export const info: string
+	export const moon: string
+	export const sun: string
+	export const warning: string
+}

package/icons.js

@@ -0,0 +1,9 @@
+export { default as alert } from './icons/alert.svg?raw'
+export { default as arrowDown } from './icons/arrow-down.svg?raw'
+export { default as check } from './icons/check.svg?raw'
+export { default as circleCheck } from './icons/circle-check.svg?raw'
+export { default as github } from './icons/github.svg?raw'
+export { default as info } from './icons/info.svg?raw'
+export { default as moon } from './icons/moon.svg?raw'
+export { default as sun } from './icons/sun.svg?raw'
+export { default as warning } from './icons/warning.svg?raw'

package/index.js

@@ -1 +1,4 @@
+export * from './utils/classNames.ts'
+export * from './utils/cookies.ts'
+export * from './utils/event.ts'
 export * from './utils/toast.ts'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.0.11",
+    "version": "0.1.0",
     "scripts": {
         "dev": "astro dev",
         "build": "astro check && astro build",
@@ -21,10 +21,12 @@
         "typescript": "5.4.5"
     },
     "exports": {
+        ".": "./index.js",
         "./astro": "./astro.js",
         "./svelte": "./svelte.js",
         "./react": "./react.js",
         "./styles": "./scss/index.scss",
+        "./icons": "./icons.js",
         "./config": "./scss/config.scss"
     },
     "files": [
@@ -34,6 +36,8 @@
         "utils",
         "astro.d.ts",
         "astro.js",
+        "icons.d.ts",
+        "icons.js",
         "svelte.d.ts",
         "svelte.js",
         "react.d.ts",

package/react.d.ts

@@ -9,6 +9,7 @@ import type { ReactCheckboxProps } from './components/Checkbox/checkbox'
 import type { ReactConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
 import type { IconProps } from './components/Icon/icon'
 import type { ReactInputProps } from './components/Input/input'
+import type { ReactMenuProps } from './components/Menu/menu'
 import type { ProgressProps } from './components/Progress/progress'
 import type { ReactRadioProps } from './components/Radio/radio'
 import type { RatingProps } from './components/Rating/rating'
@@ -16,6 +17,7 @@ import type { SpinnerProps } from './components/Spinner/spinner'
 import type { ReactSwitchProps } from './components/Switch/switch'
 import type { TableProps } from './components/Table/table'
 import type { ReactTabsProps } from './components/Tabs/tabs'
+import type { ReactThemeSwitcherProps } from './components/ThemeSwitcher/themeswitcher'
 import type { ReactTimelineProps } from './components/Timeline/timeline'
 import type { TimelineItemProps } from './components/TimelineItem/timelineitem'
 import type { ReactToastProps } from './components/Toast/toast'
@@ -31,6 +33,7 @@ declare module 'webcoreui/react' {
 	export const ConditionalWrapper: FC<ReactConditionalWrapperProps>
 	export const Icon: FC<IconProps>
 	export const Input: FC<ReactInputProps>
+	export const Menu: FC<ReactMenuProps>
 	export const Progress: FC<ProgressProps>
 	export const Radio: FC<ReactRadioProps>
 	export const Rating: FC<RatingProps>
@@ -38,6 +41,7 @@ declare module 'webcoreui/react' {
 	export const Switch: FC<ReactSwitchProps>
 	export const Table: FC<TableProps>
 	export const Tabs: FC<ReactTabsProps>
+	export const ThemeSwitcher: FC<ReactThemeSwitcherProps>
 	export const Timeline: FC<ReactTimelineProps>
 	export const TimelineItem: FC<TimelineItemProps>
 	export const Toast: FC<ReactToastProps>

package/react.js

@@ -8,6 +8,7 @@ import CheckboxComponent from './components/Checkbox/Checkbox.tsx'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.tsx'
 import IconComponent from './components/Icon/Icon.tsx'
 import InputComponent from './components/Input/Input.tsx'
+import MenuComponent from './components/Menu/Menu.tsx'
 import ProgressComponent from './components/Progress/Progress.tsx'
 import RadioComponent from './components/Radio/Radio.tsx'
 import RatingComponent from './components/Rating/Rating.tsx'
@@ -15,6 +16,7 @@ import SpinnerComponent from './components/Spinner/Spinner.tsx'
 import SwitchComponent from './components/Switch/Switch.tsx'
 import TableComponent from './components/Table/Table.tsx'
 import TabsComponent from './components/Tabs/Tabs.tsx'
+import ThemeSwitcherComponent from './components/ThemeSwitcher/ThemeSwitcher.tsx'
 import TimelineComponent from './components/Timeline/Timeline.tsx'
 import TimelineItemComponent from './components/TimelineItem/TimelineItem.tsx'
 import ToastComponent from './components/Toast/Toast.tsx'
@@ -29,6 +31,7 @@ export const Checkbox = CheckboxComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent
 export const Input = InputComponent
+export const Menu = MenuComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
@@ -36,6 +39,7 @@ export const Spinner = SpinnerComponent
 export const Switch = SwitchComponent
 export const Table = TableComponent
 export const Tabs = TabsComponent
+export const ThemeSwitcher = ThemeSwitcherComponent
 export const Timeline = TimelineComponent
 export const TimelineItem = TimelineItemComponent
 export const Toast = ToastComponent

package/scss/config/color-palette.scss

@@ -0,0 +1,23 @@
+$colorPalette: (
+    'primary': var(--w-color-primary),
+    'primary-10': var(--w-color-primary-10),
+    'primary-20': var(--w-color-primary-20),
+    'primary-30': var(--w-color-primary-30),
+    'primary-40': var(--w-color-primary-40),
+    'primary-50': var(--w-color-primary-50),
+    'primary-60': var(--w-color-primary-60),
+    'primary-70': var(--w-color-primary-70),
+
+    'info': var(--w-color-info),
+    'info-accent': var(--w-color-info-accent),
+    'info-fg': var(--w-color-info-fg),
+    'success': var(--w-color-success),
+    'success-accent': var(--w-color-success-accent),
+    'success-fg': var(--w-color-success-fg),
+    'warning': var(--w-color-warning),
+    'warning-accent': var(--w-color-warning-accent),
+    'warning-fg': var(--w-color-warning-fg),
+    'alert': var(--w-color-alert),
+    'alert-accent': var(--w-color-alert-accent),
+    'alert-fg': var(--w-color-alert-fg),
+) !default;

package/scss/config/css-values.scss

@@ -0,0 +1,44 @@
+$overflowValues: auto,
+    hidden,
+    overlay,
+    scroll,
+    visible !default;
+
+$displayValues: inline,
+    block,
+    contents,
+    flex,
+    flow,
+    flow-root,
+    grid,
+    inline-block,
+    inline-flex,
+    inline-grid,
+    inline-table,
+    list-item,
+    run-in,
+    table,
+    table-caption,
+    table-column-group,
+    table-header-group,
+    table-footer-group,
+    table-row-group,
+    table-cell,
+    table-column,
+    table-row,
+    none !default;
+
+$positionValues: absolute,
+    fixed,
+    relative,
+    static,
+    sticky !default;
+
+$flexDirectionValues: row
+    column
+    row-reverse
+    column-reverse !default;
+
+$flexWrapValues: wrap
+    nowrap
+    wrap-reverse !default;

package/scss/config/layout.scss

@@ -0,0 +1,41 @@
+$breakpoints: (
+    'xs': 600px,
+    'sm': 800px,
+    'md': 1024px,
+    'lg': 1200px
+) !default;
+
+$layers: (
+    'bg': -1,
+    'default': 0,
+    'fg': 1,
+    'overlay': 2,
+    'popup': 3,
+    'top':  98,
+    'header': 99,
+    'modal': 100
+) !default;
+
+$radius: (
+    'none': 0,
+    'sm': var(--w-sm-radius),
+    'md': var(--w-md-radius),
+    'lg': var(--w-lg-radius),
+    'xl': var(--w-xl-radius),
+    'max': 100%
+) !default;
+
+$spacing: (
+    'none':    0,
+    'xxs':     2px,
+    'xs':      5px,
+    'sm':      10px,
+    'md':      15px,
+    'default': 20px,
+    'lg':      25px,
+    'xl':      30px,
+    '2xl':     35px,
+    '3xl':     40px,
+    '4xl':     45px,
+    '5xl':     50px
+) !default;