webcoreui 0.0.9 → 0.0.10

package/components/Timeline/timeline.ts

@@ -0,0 +1,61 @@
+export type TimelineProps = {
+    theme?: 'fill' | 'stroke' | 'stroke fill' | null
+    alternate?: boolean
+    centered?: boolean
+    color?: string
+    textColor?: string
+    className?: string
+    counter?: 'arabic-indic'
+    | 'armenian'
+    | 'bengali'
+    | 'cambodian'
+    | 'circle'
+    | 'cjk-decimal'
+    | 'cjk-earthly-branch'
+    | 'cjk-heavenly-stem'
+    | 'decimal-leading-zero'
+    | 'devanagari'
+    | 'disc'
+    | 'disclosure-closed'
+    | 'disclosure-open'
+    | 'ethiopic-numeric'
+    | 'georgian'
+    | 'gujarati'
+    | 'gurmukhi'
+    | 'hebrew'
+    | 'hiragana'
+    | 'hiragana-iroha'
+    | 'japanese-formal'
+    | 'kannada'
+    | 'katakana'
+    | 'katakana-iroha'
+    | 'khmer'
+    | 'korean-hangul-formal'
+    | 'korean-hanja-formal'
+    | 'lao'
+    | 'lower-alpha'
+    | 'lower-alpha'
+    | 'lower-armenian'
+    | 'lower-greek'
+    | 'lower-roman'
+    | 'malayalam'
+    | 'mongolian'
+    | 'myanmar'
+    | 'oriya'
+    | 'persian'
+    | 'simp-chinese-formal'
+    | 'square'
+    | 'tamil'
+    | 'telugu'
+    | 'thai'
+    | 'tibetan'
+    | 'trad-chinese-formal'
+    | 'upper-alpha'
+    | 'upper-armenian'
+    | 'upper-roman'
+    | null
+}
+
+export type ReactTimelineProps = {
+    children: React.ReactNode
+} & TimelineProps

package/components/TimelineItem/TimelineItem.astro

@@ -0,0 +1,26 @@
+---
+import type { TimelineItemProps } from './timelineitem'
+import './timelineitem.scss'
+
+interface Props extends TimelineItemProps {}
+
+const {
+    title,
+    titleTag = 'span',
+    className
+} = Astro.props
+
+const classes = [
+    'w-timeline-item',
+    className
+]
+
+const Title = titleTag
+---
+
+<li class:list={classes}>
+    {title && (
+        <Title class:list="timeline-title">{title}</Title>
+    )}
+    <slot />
+</li>

package/components/TimelineItem/TimelineItem.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type { TimelineItemProps } from './timelineitem'
+    import './timelineitem.scss'
+
+    export let title: TimelineItemProps['title'] = ''
+    export let titleTag: TimelineItemProps['titleTag'] = 'span'
+    export let className: TimelineItemProps['className'] = ''
+
+    const classes = [
+        'w-timeline-item',
+        className
+    ].filter(Boolean).join(' ')
+</script>
+
+<li class={classes}>
+    {#if title}
+        <svelte:element this={titleTag} class="timeline-title">
+            {title}
+        </svelte:element>
+    {/if}
+    <slot />
+</li>

package/components/TimelineItem/TimelineItem.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import type { TimelineItemProps } from './timelineitem'
+
+import './timelineitem.scss'
+
+type ReactTimelineItemProps = {
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+} & Omit<TimelineItemProps, 'titleTag'>
+
+const TimelineItem = ({
+    title,
+    TitleTag = 'span',
+    className,
+    children
+}: ReactTimelineItemProps) => {
+    const classes = [
+        'w-timeline-item',
+        className
+    ].filter(Boolean).join(' ')
+
+    return (
+        <li className={classes}>
+            {title && (
+                <TitleTag className="timeline-title">{title}</TitleTag>
+            )}
+            {children}
+        </li>
+    )
+}
+
+export default TimelineItem

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.10",
     "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,40 @@
+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 { 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 { 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 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 Tabs: FC<ReactTabsProps>
+	export const Timeline: FC<ReactTimelineProps>
+	export const TimelineItem: FC<TimelineItemProps>
+	export const Toast: FC<ReactToastProps>
+}

package/react.js

@@ -7,9 +7,15 @@ 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 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 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 +26,12 @@ export const Card = CardComponent
 export const Checkbox = CheckboxComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent
+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 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();
+    }
 }