webcoreui 0.0.9 → 0.0.11

package/components/TimelineItem/timelineitem.scss

@@ -0,0 +1,31 @@
+@import '../../scss/config.scss';
+
+.w-timeline-item {
+    position: relative;
+    font-size: 16px;
+
+    &::before {
+        content: counter(item, var(--w-timeline-counter));
+        counter-increment: item;
+        position: absolute;
+        top: -5px;
+        width: 25px;
+        height: 25px;
+        border-radius: 100%;
+        background: var(--w-timeline-color);
+        color: var(--w-timeline-text-color);
+        font-size: 14px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 2px solid #000;
+        margin-left: -40px;
+    }
+
+    .timeline-title {
+        display: block;
+        margin-bottom: 10px;
+        font-family: Bold;
+        font-size: 18px;
+    }
+}

package/components/TimelineItem/timelineitem.ts

@@ -0,0 +1,5 @@
+export type TimelineItemProps = {
+    title?: string
+    titleTag?: string
+    className?: string
+}

package/components/Toast/Toast.astro

@@ -0,0 +1,30 @@
+---
+import type { ToastProps } from './toast'
+import Alert from '../Alert/Alert.astro'
+
+import './toast.scss'
+
+interface Props extends ToastProps {}
+
+const {
+    position,
+    className
+} = Astro.props
+
+const classes = [
+    'w-toast',
+    position,
+    className
+].filter(Boolean).join(' ')
+---
+
+{Astro.slots.has('icon') ? (
+    <Alert {...Astro.props} className={classes}>
+        <slot slot="icon" name="icon" />
+        <slot />
+    </Alert>
+) : (
+    <Alert {...Astro.props} className={classes}>
+        <slot />
+    </Alert>
+)}

package/components/Toast/Toast.svelte

@@ -0,0 +1,21 @@
+<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>

package/components/Toast/Toast.tsx

@@ -0,0 +1,28 @@
+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

package/components/Toast/toast.scss

@@ -0,0 +1,43 @@
+@import '../../scss/config.scss';
+
+.w-toast {
+    background: #000;
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    transform: translateY(calc(100% + 25px));
+
+    &:not(.no-anim) {
+        @include Transition(transform);
+    }
+
+    &.show {
+        transform: translateY(0);
+    }
+
+    &.bottom-left,
+    &.top-left {
+        right: auto;
+        left: 20px;
+    }
+
+    &.top-left,
+    &.top-right,
+    &.top-full {
+        bottom: auto;
+        top: 20px;
+        transform: translateY(calc(-100% - 25px));
+
+        &.show {
+            transform: translateY(0);
+        }
+    }
+
+    &.bottom-full {
+        left: 20px;
+    }
+
+    &.top-full {
+        left: 20px;
+    }
+}

package/components/Toast/toast.ts

@@ -0,0 +1,11 @@
+import type { AlertProps } from '../Alert/alert'
+
+export type ToastProps = {
+    position?: string
+    [key: string]: any
+} & AlertProps
+
+export type ReactToastProps = {
+    children: React.ReactNode
+    icon?: string
+} & ToastProps

package/index.js

@@ -0,0 +1 @@
+export * from './utils/toast.ts'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.0.9",
+    "version": "0.0.11",
     "scripts": {
         "dev": "astro dev",
         "build": "astro check && astro build",
@@ -31,12 +31,14 @@
         "components",
         "icons",
         "scss",
+        "utils",
         "astro.d.ts",
         "astro.js",
         "svelte.d.ts",
         "svelte.js",
         "react.d.ts",
         "react.js",
+        "index.js",
         "README.md",
         "LICENSE"
     ],

package/react.d.ts

@@ -1,29 +1,44 @@
+import { FC } from 'react'
+import type { AccordionProps } from './components/Accordion/accordion'
+import type { ReactAlertProps } from './components/Alert/alert'
+import type { AvatarProps } from './components/Avatar/avatar'
+import type { ReactBadgeProps } from './components/Badge/badge'
+import type { ReactButtonProps } from './components/Button/button'
+import type { ReactCardProps } from './components/Card/card'
+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 { ProgressProps } from './components/Progress/progress'
+import type { ReactRadioProps } from './components/Radio/radio'
+import type { RatingProps } from './components/Rating/rating'
+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 { ReactTimelineProps } from './components/Timeline/timeline'
+import type { TimelineItemProps } from './components/TimelineItem/timelineitem'
+import type { ReactToastProps } from './components/Toast/toast'
 
 declare module 'webcoreui/react' {
-    import type { AccordionProps } from './components/Accordion/accordion'
-	import type { AlertProps } from './components/Alert/alert'
-	import type { AvatarProps } from './components/Avatar/avatar'
-	import type { BadgeProps } from './components/Badge/badge'
-	import type { ButtonProps } from './components/Button/button'
-	import type { CardProps } from './components/Card/card'
-	import type { CheckboxProps } from './components/Checkbox/checkbox'
-	import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
-	import type { IconProps } from './components/Icon/icon'
-	import type { RadioProps } from './components/Radio/radio'
-	import type { RatingProps } from './components/Rating/rating'
-	import type { SwitchProps } from './components/Switch/switch'
-
-    export function Accordion(_props: AccordionProps): any
-	export function Alert(_props: AlertProps): any
-	export function Avatar(_props: AvatarProps): any
-	export function Badge(_props: BadgeProps): any
-	export function Button(_props: ButtonProps): any
-	export function Card(_props: CardProps): any
-	export function Checkbox(_props: CheckboxProps): any
-	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
-	export function Icon(_props: IconProps): any
-	export function Radio(_props: RadioProps): any
-	export function Rating(_props: RatingProps): any
-	export function Switch(_props: SwitchProps): any
-}
-    
+    export const Accordion: FC<AccordionProps>
+	export const Alert: FC<ReactAlertProps>
+	export const Avatar: FC<AvatarProps>
+	export const Badge: FC<ReactBadgeProps>
+	export const Button: FC<ReactButtonProps>
+	export const Card: FC<ReactCardProps>
+	export const Checkbox: FC<ReactCheckboxProps>
+	export const ConditionalWrapper: FC<ReactConditionalWrapperProps>
+	export const Icon: FC<IconProps>
+	export const Input: FC<ReactInputProps>
+	export const Progress: FC<ProgressProps>
+	export const Radio: FC<ReactRadioProps>
+	export const Rating: FC<RatingProps>
+	export const Spinner: FC<SpinnerProps>
+	export const Switch: FC<ReactSwitchProps>
+	export const Table: FC<TableProps>
+	export const Tabs: FC<ReactTabsProps>
+	export const Timeline: FC<ReactTimelineProps>
+	export const TimelineItem: FC<TimelineItemProps>
+	export const Toast: FC<ReactToastProps>
+}

package/react.js

@@ -7,9 +7,17 @@ import CardComponent from './components/Card/Card.tsx'
 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 ProgressComponent from './components/Progress/Progress.tsx'
 import RadioComponent from './components/Radio/Radio.tsx'
 import RatingComponent from './components/Rating/Rating.tsx'
+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 TimelineComponent from './components/Timeline/Timeline.tsx'
+import TimelineItemComponent from './components/TimelineItem/TimelineItem.tsx'
+import ToastComponent from './components/Toast/Toast.tsx'
 
 export const Accordion = AccordionComponent
 export const Alert = AlertComponent
@@ -20,6 +28,14 @@ export const Card = CardComponent
 export const Checkbox = CheckboxComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent
+export const Input = InputComponent
+export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
-export const Switch = SwitchComponent
+export const Spinner = SpinnerComponent
+export const Switch = SwitchComponent
+export const Table = TableComponent
+export const Tabs = TabsComponent
+export const Timeline = TimelineComponent
+export const TimelineItem = TimelineItemComponent
+export const Toast = ToastComponent

package/scss/global/tooltip.scss

@@ -0,0 +1,133 @@
+@import '../config';
+
+@mixin Tooltip() {
+    [data-tooltip] {
+        display: inline-block;
+        position: relative;
+
+        &::before,
+        &::after {
+            @include Transition();
+            opacity: 0;
+            left: 50%;
+            transform: translate(-50%, 5px);
+        }
+
+        &::before {
+            content: attr(data-tooltip);
+            border-radius: 5px;
+            font-size: 14px;
+            position: absolute;
+            background: var(--w-tooltip-background);
+            color: var(--w-tooltip-color);
+            padding: 0 5px;
+            top: -30px;
+            width: max-content;
+            line-height: 1.8;
+            max-width: 300px;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            width: 0; 
+            height: 0; 
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-top: 5px solid var(--w-tooltip-background);
+            top: -5px;
+        }
+
+        &:hover::before,
+        &:hover::after {
+            opacity: 1;
+            transform: translate(-50%, 0);
+        }
+
+        &[data-position="bottom"] {
+            &::before,
+            &::after {
+                transform: translate(-50%, -5px);
+            }
+
+            &::before {
+                top: auto;
+                bottom: -30px;
+            }
+
+            &::after {
+                border-left: 5px solid transparent;
+                border-right: 5px solid transparent;
+                border-top: 5px solid transparent;
+                border-bottom: 5px solid var(--w-tooltip-background);
+                top: auto;
+                bottom: -5px;
+            }
+
+            &:hover::before,
+            &:hover::after {
+                transform: translate(-50%, 0);
+            }
+        }
+
+        &[data-position="left"] {
+            &::before,
+            &::after {
+                transform: translate(0, 0);
+                left: auto;
+                right: 105%;
+            }
+
+            &::before {
+                top: auto;
+            }
+
+            &::after {
+                border-left: 5px solid var(--w-tooltip-background);
+                border-right: 5px solid transparent;
+                border-top: 5px solid transparent;
+                border-bottom: 5px solid transparent;
+                top: 50%;
+                transform: translate(10px, -40%);
+            }
+
+            &:hover::before {
+                transform: translate(-5px, 0);
+            }
+
+            &:hover::after {
+                transform: translate(5px, -40%);
+            }
+        }
+
+        &[data-position="right"] {
+            &::before,
+            &::after {
+                transform: translate(0, 0);
+                left: 105%;
+            }
+
+            &::before {
+                top: auto;
+            }
+
+            &::after {
+                border-left: 5px solid transparent;
+                border-right: 5px solid var(--w-tooltip-background);
+                border-top: 5px solid transparent;
+                border-bottom: 5px solid transparent;
+                top: 50%;
+                transform: translate(-10px, -40%);
+            }
+
+            &:hover::before {
+                transform: translate(5px, 0);
+            }
+
+            &:hover::after {
+                transform: translate(-5px, -40%);
+            }
+        }
+    }
+}
+

package/scss/global/utility.scss

@@ -12,6 +12,23 @@
         gap: 20px;
     }
 
+    .flex {
+        display: flex;
+        gap: 20px;
+
+        &.xs {
+            gap: 5px;
+        }
+
+        &.wrap {
+            flex-wrap: wrap;
+        }
+    }
+
+    .my {
+        margin: 20px auto;
+    }
+
     @include Media('md') {
         .grid.md-2 {
             grid-template-columns: repeat(2, minmax(0, 1fr));

package/scss/global.scss

@@ -1,2 +1,3 @@
 @import './global/elements.scss';
+@import './global/tooltip.scss';
 @import './global/utility.scss';

package/scss/resets.scss

@@ -41,4 +41,8 @@
         color: #FFF;
         text-decoration: none;
     }
+
+    button {
+        font-family: Regular;
+    }
 }    

package/scss/setup.scss

@@ -3,7 +3,8 @@
 $config: (
     includeResets: true,
     includeHelperClasses: true,
-    includeElementStyles: true
+    includeElementStyles: true,
+    includeTooltip: true
 );
 
 :root {
@@ -15,6 +16,20 @@ $config: (
     --w-switch-on-color: #FFF;
     --w-checkbox-color: #FFF;
     --w-radio-color: #FFF;
+    --w-spinner-color: #FFF;
+    --w-spinner-width: 2px;
+    --w-spinner-speed: 2s;
+    --w-spinner-size: 30px;
+    --w-spinner-dash: 8;
+    --w-tooltip-background: #FFF;
+    --w-tooltip-color: #000;
+    --w-timeline-color: #252525;
+    --w-timeline-text-color: #FFF;
+    --w-timeline-counter: decimal;
+    --w-progress-color: #FFF;
+    --w-progress-background: #252525;
+    --w-progress-stripe-light: #FFF;
+    --w-progress-stripe-dark: #DDD;
 }
 
 @function config($key) {
@@ -35,4 +50,8 @@ $config: (
     @if (config('includeElementStyles')) {
         @include Elements();
     }
+
+    @if (config('includeTooltip')) {
+        @include Tooltip();
+    }
 }

package/svelte.d.ts

@@ -1,18 +1,25 @@
-
+import type { AccordionProps } from './components/Accordion/accordion'
+import type { AlertProps } from './components/Alert/alert'
+import type { AvatarProps } from './components/Avatar/avatar'
+import type { BadgeProps } from './components/Badge/badge'
+import type { ButtonProps } from './components/Button/button'
+import type { CardProps } from './components/Card/card'
+import type { CheckboxProps } from './components/Checkbox/checkbox'
+import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+import type { IconProps } from './components/Icon/icon'
+import type { InputProps } from './components/Input/input'
+import type { ProgressProps } from './components/Progress/progress'
+import type { RadioProps } from './components/Radio/radio'
+import type { RatingProps } from './components/Rating/rating'
+import type { SpinnerProps } from './components/Spinner/spinner'
+import type { SwitchProps } from './components/Switch/switch'
+import type { TableProps } from './components/Table/table'
+import type { TabsProps } from './components/Tabs/tabs'
+import type { TimelineProps } from './components/Timeline/timeline'
+import type { TimelineItemProps } from './components/TimelineItem/timelineitem'
+import type { ToastProps } from './components/Toast/toast'
+    
 declare module 'webcoreui/svelte' {
-    import type { AccordionProps } from './components/Accordion/accordion'
-	import type { AlertProps } from './components/Alert/alert'
-	import type { AvatarProps } from './components/Avatar/avatar'
-	import type { BadgeProps } from './components/Badge/badge'
-	import type { ButtonProps } from './components/Button/button'
-	import type { CardProps } from './components/Card/card'
-	import type { CheckboxProps } from './components/Checkbox/checkbox'
-	import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
-	import type { IconProps } from './components/Icon/icon'
-	import type { RadioProps } from './components/Radio/radio'
-	import type { RatingProps } from './components/Rating/rating'
-	import type { SwitchProps } from './components/Switch/switch'
-
     export function Accordion(_props: AccordionProps): any
 	export function Alert(_props: AlertProps): any
 	export function Avatar(_props: AvatarProps): any
@@ -22,8 +29,15 @@ declare module 'webcoreui/svelte' {
 	export function Checkbox(_props: CheckboxProps): any
 	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
 	export function Icon(_props: IconProps): any
+	export function Input(_props: InputProps): any
+	export function Progress(_props: ProgressProps): any
 	export function Radio(_props: RadioProps): any
 	export function Rating(_props: RatingProps): any
+	export function Spinner(_props: SpinnerProps): any
 	export function Switch(_props: SwitchProps): any
-}
-    
+	export function Table(_props: TableProps): any
+	export function Tabs(_props: TabsProps): any
+	export function Timeline(_props: TimelineProps): any
+	export function TimelineItem(_props: TimelineItemProps): any
+	export function Toast(_props: ToastProps): any
+}

package/svelte.js

@@ -7,9 +7,17 @@ import CardComponent from './components/Card/Card.svelte'
 import CheckboxComponent from './components/Checkbox/Checkbox.svelte'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.svelte'
 import IconComponent from './components/Icon/Icon.svelte'
+import InputComponent from './components/Input/Input.svelte'
+import ProgressComponent from './components/Progress/Progress.svelte'
 import RadioComponent from './components/Radio/Radio.svelte'
 import RatingComponent from './components/Rating/Rating.svelte'
+import SpinnerComponent from './components/Spinner/Spinner.svelte'
 import SwitchComponent from './components/Switch/Switch.svelte'
+import TableComponent from './components/Table/Table.svelte'
+import TabsComponent from './components/Tabs/Tabs.svelte'
+import TimelineComponent from './components/Timeline/Timeline.svelte'
+import TimelineItemComponent from './components/TimelineItem/TimelineItem.svelte'
+import ToastComponent from './components/Toast/Toast.svelte'
 
 export const Accordion = AccordionComponent
 export const Alert = AlertComponent
@@ -20,6 +28,14 @@ export const Card = CardComponent
 export const Checkbox = CheckboxComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent
+export const Input = InputComponent
+export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
-export const Switch = SwitchComponent
+export const Spinner = SpinnerComponent
+export const Switch = SwitchComponent
+export const Table = TableComponent
+export const Tabs = TabsComponent
+export const Timeline = TimelineComponent
+export const TimelineItem = TimelineItemComponent
+export const Toast = ToastComponent