webcoreui 0.1.0 → 0.3.0

package/components/Timeline/timeline.module.scss

@@ -28,11 +28,11 @@ body {
         left: $leftOffset
     }
 
-    &.fill li::before {
+    &.fill > li::before {
         content: '';
     }
 
-    &.stroke li::before {
+    &.stroke > li::before {
         @include background(primary-70);
         border: 2px solid var(--w-timeline-color);
     }
@@ -47,7 +47,7 @@ body {
                 left: calc(50% - 1px);
             }
     
-            li {
+            > li {
                 @include size('w50%');
     
                 &:nth-child(odd) {
@@ -69,7 +69,7 @@ body {
             }
         }
     
-        &.centered li:nth-child(odd) {
+        &.centered > li:nth-child(odd) {
             @include typography(right);
         }
     }

package/components/TimelineItem/TimelineItem.tsx

@@ -1,14 +1,9 @@
 import React from 'react'
-import type { TimelineItemProps } from './timelineitem'
+import type { ReactTimelineItemProps } from './timelineitem'
 
 import styles from './timelineitem.module.scss'
 import { classNames } from '../../utils/classNames'
 
-type ReactTimelineItemProps = {
-    TitleTag?: keyof JSX.IntrinsicElements
-    children: React.ReactNode
-} & Omit<TimelineItemProps, 'titleTag'>
-
 const TimelineItem = ({
     title,
     TitleTag = 'span',

package/components/TimelineItem/timelineitem.module.scss

@@ -2,7 +2,6 @@
 
 .item {
     @include position(relative);
-    @include typography(md);
     @include spacing(m0);
 
     &::before {
@@ -10,7 +9,7 @@
         @include size(25px);
         @include border-radius(max);
         @include background(var(--w-timeline-color));
-        @include typography(sm);
+        @include typography(md);
         @include layout(inline-flex, center);
         @include border(2px, primary-70);
 
@@ -21,7 +20,7 @@
     }
 
     .title {
-        @include typography(bold, default);
+        @include typography(bold, lg);
         @include spacing(mb-sm);
 
         display: block;

package/components/TimelineItem/timelineitem.ts

@@ -3,3 +3,8 @@ export type TimelineItemProps = {
     titleTag?: string
     className?: string
 }
+
+export type ReactTimelineItemProps = {
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+} & Omit<TimelineItemProps, 'titleTag'>

package/components/Toast/Toast.svelte

@@ -24,9 +24,14 @@
     }
 </script>
 
-<Alert {...$$restProps} className={classes} {...additionalProps}>
-    {#if $$slots.icon}
-        <slot name="icon" />
-    {/if}
-    <slot />
-</Alert>
+{#if $$slots.icon}
+    <Alert {...$$restProps} className={classes} {...additionalProps}>
+        <slot slot="icon" name="icon" />
+        <slot />
+    </Alert>
+{:else}
+    <Alert {...$$restProps} className={classes} {...additionalProps}>
+        <slot />
+    </Alert>
+{/if}
+

package/icons/close.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.390524 0.390524C0.911223 -0.130175 1.75544 -0.130175 2.27614 0.390524L12 10.1144L21.7239 0.390524C22.2446 -0.130175 23.0888 -0.130175 23.6095 0.390524C24.1302 0.911223 24.1302 1.75544 23.6095 2.27614L13.8856 12L23.6095 21.7239C24.1302 22.2446 24.1302 23.0888 23.6095 23.6095C23.0888 24.1302 22.2446 24.1302 21.7239 23.6095L12 13.8856L2.27614 23.6095C1.75544 24.1302 0.911223 24.1302 0.390524 23.6095C-0.130175 23.0888 -0.130175 22.2446 0.390524 21.7239L10.1144 12L0.390524 2.27614C-0.130175 1.75544 -0.130175 0.911223 0.390524 0.390524Z" fill="currentColor"/>
+</svg>

package/icons.d.ts

@@ -3,6 +3,7 @@ declare module 'webcoreui/icons' {
 	export const arrowDown: string
 	export const check: string
 	export const circleCheck: string
+	export const close: string
 	export const github: string
 	export const info: string
 	export const moon: string

package/icons.js

@@ -2,6 +2,7 @@ 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 close } from './icons/close.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'

package/index.d.ts

@@ -0,0 +1,69 @@
+type PopoverPosition = 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+
+type Popover = {
+    trigger: string
+    popover: string
+    position?: PopoverPosition
+    offset?: number
+    closeOnBlur?: boolean
+}
+
+type Toast = {
+    element: string
+    timeout?: number
+    title?: string
+    content?: string
+    theme?: 'info' | 'success' | 'warning' | 'alert' | null
+    position?: 'bottom-left'
+        | 'top-left'
+        | 'top-right'
+        | 'bottom-full'
+        | 'top-full'
+}
+
+declare module 'webcoreui' {
+    export const classNames = (classes: any[]) => string
+    
+    export const setCookie = (name: string, value: string, days: number) => {}
+    export const getCookie = (name: string) => string | null
+    export const removeCookie = (name: string) => {}
+
+    export const debounce = (fn: any, waitFor: number) => any
+
+    export const dispatch = (event: string, detail: any) => {}
+    export const listen = (event: string, callback: (e: any) => any) => {
+        remove()
+    }
+
+    export const clamp = (num: number, min: number, max: number) => number
+    export const lerp = (start: number, end: number, value: number) => number
+    export const invlerp = (start: number, end: number, value: number) => number
+    export const interpolate = (
+        value: number,
+        input: [start: number, end: number],
+        output: [start: number, end: number],
+    ) => number
+
+    export const modal = (selector: string) => {}
+    export const closeModal = (selector: string) => {}
+
+    export const popover = (config: Popover) => {
+        remove()
+    }
+    export const closePopover = (selector: string) => {}
+
+    export const setDefaultTimeout = (time: number) => number
+    export const toast = (config: Toast | string) => {}
+    export const hideToast = (element: string) => {}
+}

package/index.js

@@ -1,4 +1,8 @@
 export * from './utils/classNames.ts'
 export * from './utils/cookies.ts'
+export * from './utils/debounce.ts'
 export * from './utils/event.ts'
+export * from './utils/interpolate.ts'
+export * from './utils/modal.ts'
+export * from './utils/popover.ts'
 export * from './utils/toast.ts'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.1.0",
+    "version": "0.3.0",
     "scripts": {
         "dev": "astro dev",
         "build": "astro check && astro build",
@@ -43,6 +43,7 @@
         "react.d.ts",
         "react.js",
         "index.js",
+        "index.d.ts",
         "README.md",
         "LICENSE"
     ],

package/react.d.ts

@@ -6,20 +6,26 @@ 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 { ReactCollapsibleProps } from './components/Collapsible/collapsible'
 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 { ReactModalProps } from './components/Modal/modal'
+import type { ReactPopoverProps } from './components/Popover/popover'
 import type { ProgressProps } from './components/Progress/progress'
 import type { ReactRadioProps } from './components/Radio/radio'
 import type { RatingProps } from './components/Rating/rating'
+import type { ReactSheetProps } from './components/Sheet/sheet'
+import type { ReactSliderProps } from './components/Slider/slider'
 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 { ReactTextareaProps } from './components/Textarea/textarea'
 import type { ReactThemeSwitcherProps } from './components/ThemeSwitcher/themeswitcher'
 import type { ReactTimelineProps } from './components/Timeline/timeline'
-import type { TimelineItemProps } from './components/TimelineItem/timelineitem'
+import type { ReactTimelineItemProps } from './components/TimelineItem/timelineitem'
 import type { ReactToastProps } from './components/Toast/toast'
 
 declare module 'webcoreui/react' {
@@ -30,19 +36,25 @@ declare module 'webcoreui/react' {
 	export const Button: FC<ReactButtonProps>
 	export const Card: FC<ReactCardProps>
 	export const Checkbox: FC<ReactCheckboxProps>
+	export const Collapsible: FC<ReactCollapsibleProps>
 	export const ConditionalWrapper: FC<ReactConditionalWrapperProps>
 	export const Icon: FC<IconProps>
 	export const Input: FC<ReactInputProps>
 	export const Menu: FC<ReactMenuProps>
+	export const Modal: FC<ReactModalProps>
+	export const Popover: FC<ReactPopoverProps>
 	export const Progress: FC<ProgressProps>
 	export const Radio: FC<ReactRadioProps>
 	export const Rating: FC<RatingProps>
+	export const Sheet: FC<ReactSheetProps>
+	export const Slider: FC<ReactSliderProps>
 	export const Spinner: FC<SpinnerProps>
 	export const Switch: FC<ReactSwitchProps>
 	export const Table: FC<TableProps>
 	export const Tabs: FC<ReactTabsProps>
+	export const Textarea: FC<ReactTextareaProps>
 	export const ThemeSwitcher: FC<ReactThemeSwitcherProps>
 	export const Timeline: FC<ReactTimelineProps>
-	export const TimelineItem: FC<TimelineItemProps>
+	export const TimelineItem: FC<ReactTimelineItemProps>
 	export const Toast: FC<ReactToastProps>
 }

package/react.js

@@ -5,17 +5,23 @@ import BadgeComponent from './components/Badge/Badge.tsx'
 import ButtonComponent from './components/Button/Button.tsx'
 import CardComponent from './components/Card/Card.tsx'
 import CheckboxComponent from './components/Checkbox/Checkbox.tsx'
+import CollapsibleComponent from './components/Collapsible/Collapsible.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 ModalComponent from './components/Modal/Modal.tsx'
+import PopoverComponent from './components/Popover/Popover.tsx'
 import ProgressComponent from './components/Progress/Progress.tsx'
 import RadioComponent from './components/Radio/Radio.tsx'
 import RatingComponent from './components/Rating/Rating.tsx'
+import SheetComponent from './components/Sheet/Sheet.tsx'
+import SliderComponent from './components/Slider/Slider.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 TextareaComponent from './components/Textarea/Textarea.tsx'
 import ThemeSwitcherComponent from './components/ThemeSwitcher/ThemeSwitcher.tsx'
 import TimelineComponent from './components/Timeline/Timeline.tsx'
 import TimelineItemComponent from './components/TimelineItem/TimelineItem.tsx'
@@ -28,17 +34,23 @@ export const Badge = BadgeComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
 export const Checkbox = CheckboxComponent
+export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent
 export const Input = InputComponent
 export const Menu = MenuComponent
+export const Modal = ModalComponent
+export const Popover = PopoverComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
+export const Sheet = SheetComponent
+export const Slider = SliderComponent
 export const Spinner = SpinnerComponent
 export const Switch = SwitchComponent
 export const Table = TableComponent
 export const Tabs = TabsComponent
+export const Textarea = TextareaComponent
 export const ThemeSwitcher = ThemeSwitcherComponent
 export const Timeline = TimelineComponent
 export const TimelineItem = TimelineItemComponent

package/scss/config/color-palette.scss

@@ -20,4 +20,5 @@ $colorPalette: (
     'alert': var(--w-color-alert),
     'alert-accent': var(--w-color-alert-accent),
     'alert-fg': var(--w-color-alert-fg),
+    'overlay': var(--w-color-overlay)
 ) !default;