webcoreui 0.10.1 → 1.1.0-beta.0

package/README.md

@@ -34,10 +34,6 @@
     </a>
 </p>
 
-> [!IMPORTANT]
-> This library is still in early development. New changes can break existing functionality, and no functionality should be considered final at this stage. The library will be considered stable once it reaches v1.0.
-
----
 ## Table of Contents
 
 - [Table of Contents](#table-of-contents)
@@ -64,15 +60,15 @@ Webcore can be used as a standalone project, or it can be integrated into your e
 
 Webcore components use Sass for styling. To use the component library, you must have the following packages installed:
 
-- [Sass](https://www.npmjs.com/package/sass) - `v1.83`
-- [TypeScript](https://www.npmjs.com/package/typescript) - `v5.7`
+- [Sass](https://www.npmjs.com/package/sass) - `v1.86`
+- [TypeScript](https://www.npmjs.com/package/typescript) - `v5.8`
 
 Depending on your project setup, you'll also need the following packages:
 
 - **For Astro projects**
-    - [Astro](https://www.npmjs.com/package/astro) - `v5.1`
+    - [Astro](https://www.npmjs.com/package/astro) - `v5.5`
 - **For Svelte projects**
-    - [Svelte](https://www.npmjs.com/package/svelte) - `v5.19`
+    - [Svelte](https://www.npmjs.com/package/svelte) - `v5.25`
 - **For React projects**
     - [React](https://www.npmjs.com/package/react) - `v19.0`
     - [React DOM](https://www.npmjs.com/package/react-dom) -`v19.0`
@@ -170,6 +166,9 @@ html body {
     --w-slider-color: var(--w-color-primary);
     --w-slider-thumb: var(--w-color-primary-50);
 
+    // SpeedDial component
+    --w-speed-dial-size: 50px;
+
     // Spinner component
     --w-spinner-color: var(--w-color-primary);
     --w-spinner-width: 2px;
@@ -258,6 +257,7 @@ import { Accordion } from 'webcoreui/react'
 - [Masonry](https://github.com/Frontendland/webcoreui/tree/main/src/components/Masonry)
 - [Menu](https://github.com/Frontendland/webcoreui/tree/main/src/components/Menu)
 - [Modal](https://github.com/Frontendland/webcoreui/tree/main/src/components/Modal)
+- [OTPInput](https://github.com/Frontendland/webcoreui/tree/main/src/components/OTPInput)
 - [Pagination](https://github.com/Frontendland/webcoreui/tree/main/src/components/Pagination)
 - [Popover](https://github.com/Frontendland/webcoreui/tree/main/src/components/Popover)
 - [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
@@ -269,6 +269,7 @@ import { Accordion } from 'webcoreui/react'
 - [Sidebar](https://github.com/Frontendland/webcoreui/tree/main/src/components/Sidebar)
 - [Skeleton](https://github.com/Frontendland/webcoreui/tree/main/src/components/Skeleton)
 - [Slider](https://github.com/Frontendland/webcoreui/tree/main/src/components/Slider)
+- [SpeedDial](https://github.com/Frontendland/webcoreui/tree/main/src/components/SpeedDial)
 - [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)
 - [Spoiler](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spoiler)
 - [Stepper](https://github.com/Frontendland/webcoreui/tree/main/src/components/Stepper)
@@ -288,21 +289,27 @@ import { Accordion } from 'webcoreui/react'
 - [ComponentMap](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ComponentMap)
 - [DeviceMockup](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/DeviceMockup)
 - [ErrorPage](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ErrorPage)
+- [ExpandableTable](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ExpandableTable)
 - [FAQ](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/FAQ)
+- [Form](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Form)
 - [GridWithIcons](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/GridWithIcons)
 - [Hero](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Hero)
 - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Icon)
 - [IconList](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/IconList)
 - [Layout](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Layout)
+- [Maintenance](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Maintenance)
 - [SEO](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SEO)
 - [SettingCard](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SettingCard)
 - [SignUp](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SignUp)
 - [SocialProof](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SocialProof)
 - [Socials](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Socials)
+- [Team](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Team)
 - [Tiles](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Tiles)
 - [User](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/User)
 
 ## Templates
 
+- [Authentication](https://github.com/Frontendland/webcoreui/tree/main/src/templates/Authentication)
+- [Blog](https://github.com/Frontendland/webcoreui/tree/main/src/templates/Blog)
 - [Portfolio](https://github.com/Frontendland/webcoreui/tree/main/src/templates/Portfolio)
 - [ProductPage](https://github.com/Frontendland/webcoreui/tree/main/src/templates/ProductPage)

package/astro.d.ts

@@ -25,6 +25,7 @@ import type { ListProps as WListProps } from './components/List/list'
 import type { MasonryProps as WMasonryProps } from './components/Masonry/masonry'
 import type { MenuProps as WMenuProps } from './components/Menu/menu'
 import type { ModalProps as WModalProps } from './components/Modal/modal'
+import type { OTPInputProps as WOTPInputProps } from './components/OTPInput/otpinput'
 import type { PaginationProps as WPaginationProps } from './components/Pagination/pagination'
 import type { PopoverProps as WPopoverProps } from './components/Popover/popover'
 import type { ProgressProps as WProgressProps } from './components/Progress/progress'
@@ -36,6 +37,7 @@ import type { SheetProps as WSheetProps } from './components/Sheet/sheet'
 import type { SidebarProps as WSidebarProps } from './components/Sidebar/sidebar'
 import type { SkeletonProps as WSkeletonProps } from './components/Skeleton/skeleton'
 import type { SliderProps as WSliderProps } from './components/Slider/slider'
+import type { SpeedDialProps as WSpeedDialProps } from './components/SpeedDial/speeddial'
 import type { SpinnerProps as WSpinnerProps } from './components/Spinner/spinner'
 import type { SpoilerProps as WSpoilerProps } from './components/Spoiler/spoiler'
 import type { StepperProps as WStepperProps } from './components/Stepper/stepper'
@@ -81,6 +83,7 @@ declare module 'webcoreui/astro' {
 	export function Masonry(_props: WMasonryProps): any
 	export function Menu(_props: WMenuProps): any
 	export function Modal(_props: WModalProps): any
+	export function OTPInput(_props: WOTPInputProps): any
 	export function Pagination(_props: WPaginationProps): any
 	export function Popover(_props: WPopoverProps): any
 	export function Progress(_props: WProgressProps): any
@@ -92,6 +95,7 @@ declare module 'webcoreui/astro' {
 	export function Sidebar(_props: WSidebarProps): any
 	export function Skeleton(_props: WSkeletonProps): any
 	export function Slider(_props: WSliderProps): any
+	export function SpeedDial(_props: WSpeedDialProps): any
 	export function Spinner(_props: WSpinnerProps): any
 	export function Spoiler(_props: WSpoilerProps): any
 	export function Stepper(_props: WStepperProps): any
@@ -131,6 +135,7 @@ declare module 'webcoreui/astro' {
 	export type MasonryProps = WMasonryProps
 	export type MenuProps = WMenuProps
 	export type ModalProps = WModalProps
+	export type OTPInputProps = WOTPInputProps
 	export type PaginationProps = WPaginationProps
 	export type PopoverProps = WPopoverProps
 	export type ProgressProps = WProgressProps
@@ -142,6 +147,7 @@ declare module 'webcoreui/astro' {
 	export type SidebarProps = WSidebarProps
 	export type SkeletonProps = WSkeletonProps
 	export type SliderProps = WSliderProps
+	export type SpeedDialProps = WSpeedDialProps
 	export type SpinnerProps = WSpinnerProps
 	export type SpoilerProps = WSpoilerProps
 	export type StepperProps = WStepperProps

package/astro.js

@@ -25,6 +25,7 @@ import ListComponent from './components/List/List.astro'
 import MasonryComponent from './components/Masonry/Masonry.astro'
 import MenuComponent from './components/Menu/Menu.astro'
 import ModalComponent from './components/Modal/Modal.astro'
+import OTPInputComponent from './components/OTPInput/OTPInput.astro'
 import PaginationComponent from './components/Pagination/Pagination.astro'
 import PopoverComponent from './components/Popover/Popover.astro'
 import ProgressComponent from './components/Progress/Progress.astro'
@@ -36,6 +37,7 @@ import SheetComponent from './components/Sheet/Sheet.astro'
 import SidebarComponent from './components/Sidebar/Sidebar.astro'
 import SkeletonComponent from './components/Skeleton/Skeleton.astro'
 import SliderComponent from './components/Slider/Slider.astro'
+import SpeedDialComponent from './components/SpeedDial/SpeedDial.astro'
 import SpinnerComponent from './components/Spinner/Spinner.astro'
 import SpoilerComponent from './components/Spoiler/Spoiler.astro'
 import StepperComponent from './components/Stepper/Stepper.astro'
@@ -75,6 +77,7 @@ export const List = ListComponent
 export const Masonry = MasonryComponent
 export const Menu = MenuComponent
 export const Modal = ModalComponent
+export const OTPInput = OTPInputComponent
 export const Pagination = PaginationComponent
 export const Popover = PopoverComponent
 export const Progress = ProgressComponent
@@ -86,6 +89,7 @@ export const Sheet = SheetComponent
 export const Sidebar = SidebarComponent
 export const Skeleton = SkeletonComponent
 export const Slider = SliderComponent
+export const SpeedDial = SpeedDialComponent
 export const Spinner = SpinnerComponent
 export const Spoiler = SpoilerComponent
 export const Stepper = StepperComponent

package/components/Carousel/Carousel.svelte

@@ -13,25 +13,28 @@
 
     import type { PaginationEventType } from '../Pagination/pagination'
 
-    export let items: SvelteCarouselProps['items'] = 0
-    export let itemsPerSlide: SvelteCarouselProps['itemsPerSlide'] = 1
-    export let subText: SvelteCarouselProps['subText'] = ''
-    export let scrollSnap: SvelteCarouselProps['scrollSnap'] = true
-    export let progress: SvelteCarouselProps['progress'] = false
-    export let pagination: SvelteCarouselProps['pagination'] = {}
-    export let effect: SvelteCarouselProps['effect'] = null
-    export let debounce: SvelteCarouselProps['debounce'] = 20
-    export let className: SvelteCarouselProps['className'] = ''
-    export let wrapperClassName: SvelteCarouselProps['wrapperClassName'] = ''
-    export let paginationClassName: SvelteCarouselProps['paginationClassName'] = ''
-    export let onScroll: SvelteCarouselProps['onScroll'] = () => {}
+    let {
+        items = 0,
+        itemsPerSlide = 1,
+        subText,
+        scrollSnap = true,
+        progress,
+        pagination,
+        effect,
+        debounce = 20,
+        className,
+        wrapperClassName,
+        paginationClassName,
+        children,
+        onScroll
+    }: SvelteCarouselProps = $props()
 
     let carouselContainer: HTMLDivElement
     let carousel: HTMLUListElement
     let carouselItems: HTMLCollection | NodeListOf<HTMLLIElement>
-    let progressValue = 0
+    let progressValue = $state(0)
     let paginated = false
-    let currentPage = 1
+    let currentPage = $state(1)
 
     const classes = classNames([
         styles.carousel,
@@ -141,7 +144,7 @@
 <section class={classes}>
     <div class={containerClasses} bind:this={carouselContainer}>
         <ul class={wrapperClasses} style={style} bind:this={carousel}>
-            <slot />
+            {@render children?.()}
         </ul>
     </div>
     <ConditionalWrapper

package/components/OTPInput/OTPInput.astro

@@ -0,0 +1,96 @@
+---
+import type { OTPInputProps } from './otpinput'
+
+import Input from '../Input/Input.astro'
+
+import styles from './otpinput.module.scss'
+
+interface Props extends OTPInputProps {}
+
+const {
+    name,
+    disabled,
+    length = 6,
+    groupLength = 0,
+    separator = '•',
+    label,
+    subText,
+    className,
+    ...rest
+} = Astro.props
+
+const classes = [
+    styles.wrapper,
+    className
+]
+
+const inputPlaceholders = Array.from({ length }, (_, i) => i + 1)
+    .reduce<(number | string)[]>((acc, num, i) =>
+        groupLength > 0 && i % groupLength === 0 && i !== 0
+            ? [...acc, separator, num]
+            : [...acc, num]
+    , [])
+---
+
+<div class:list={classes}>
+    {label && (
+        <label
+            for={name}
+            class={styles.label}
+            set:html={label}
+        />
+    )}
+
+    <div class={styles['input-wrapper']}>
+        <Input
+            name={name || 'otp'}
+            data-id="w-input-otp"
+            disabled={disabled}
+            maxlength={length}
+            required={true}
+            {...rest}
+        />
+
+        <div class={styles.placeholders}>
+            {inputPlaceholders.map((placeholder, index) => (
+                <div
+                    class={typeof placeholder === 'string' ? styles.separator : styles.placeholder}
+                    data-active={index === 0 ? true : undefined}
+                    data-separator={typeof placeholder === 'string' ? true : undefined}
+                >
+                    {typeof placeholder === 'string' ? placeholder : ''}
+                </div>
+            ))}
+        </div>
+    </div>
+
+    {subText && (
+        <div class={styles.subtext} set:html={subText} />
+    )}
+</div>
+
+<script>
+    import { on } from '../../utils/DOMUtils'
+
+    const addEventListeners = () => {
+        on('[data-id="w-input-otp"]', 'input', (event: Event) => {
+            const target = event.target as HTMLInputElement
+            const value = target.value
+            const placeholders = Array.from(target.nextElementSibling!.children)
+                .filter(child => !(child as HTMLDivElement).dataset.separator)
+
+
+            placeholders.forEach((placeholder, index) => {
+                const placeholderElement = placeholder as HTMLDivElement
+
+                placeholderElement.innerText = value[index] || ''
+                placeholderElement.dataset.active = value.length === index
+                    ? 'true'
+                    : 'false'
+            })
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
+</script>

package/components/OTPInput/OTPInput.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+    import type { OTPInputProps } from './otpinput'
+
+    import Input from '../Input/Input.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './otpinput.module.scss'
+
+    let {
+        name,
+        disabled,
+        length = 6,
+        groupLength = 0,
+        separator = '•',
+        label,
+        subText,
+        className,
+        value = $bindable(''),
+        ...rest
+    }: OTPInputProps = $props()
+
+    const classes = classNames([
+        styles.wrapper,
+        className
+    ])
+
+    const inputPlaceholders = Array.from({ length }, (_, i) => i + 1)
+        .reduce<(number | string)[]>((acc, num, i) =>
+            groupLength > 0 && i % groupLength === 0 && i !== 0
+                ? [...acc, separator, num]
+                : [...acc, num]
+        , [])
+
+    const getAdjustedIndex = (index: number) => inputPlaceholders
+        .slice(0, index)
+        .filter(placeholder => typeof placeholder !== 'string')
+        .length
+</script>
+
+<div class={classes}>
+    {#if label}
+        <label for={name} class={styles.label}>{@html label}</label>
+    {/if}
+
+    <div class={styles['input-wrapper']}>
+        <Input
+            name={name || 'otp'}
+            disabled={disabled}
+            maxlength={length}
+            required={true}
+            bind:value
+            {...rest}
+        />
+
+        <div class={styles.placeholders}>
+            {#each inputPlaceholders as placeholder, index}
+                <div
+                    class={typeof placeholder === 'string' ? styles.separator : styles.placeholder}
+                    data-active={getAdjustedIndex(index) === value.length ? true : undefined}
+                >
+                    {typeof placeholder === 'string' ? placeholder : value[getAdjustedIndex(index)]}
+                </div>
+            {/each}
+        </div>
+    </div>
+
+    {#if subText}
+        <div class={styles.subtext}>
+            {@html subText}
+        </div>
+    {/if}
+</div>

package/components/OTPInput/OTPInput.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react'
+import type { OTPInputProps } from './otpinput'
+
+import Input from '../Input/Input.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './otpinput.module.scss'
+
+const OTPInput = ({
+    name,
+    disabled,
+    length = 6,
+    groupLength = 0,
+    separator = '•',
+    label,
+    subText,
+    className,
+    value,
+    onChange,
+    ...rest
+}: OTPInputProps) => {
+    const [inputValue, setValue] = useState(value || '')
+
+    const classes = classNames([
+        styles.wrapper,
+        className
+    ])
+
+    const inputPlaceholders = Array.from({ length }, (_, i) => i + 1)
+        .reduce<(number | string)[]>((acc, num, i) =>
+            groupLength > 0 && i % groupLength === 0 && i !== 0
+                ? [...acc, separator, num]
+                : [...acc, num]
+        , [])
+
+    const getAdjustedIndex = (index: number) => inputPlaceholders
+        .slice(0, index)
+        .filter(placeholder => typeof placeholder !== 'string')
+        .length
+
+    const updateInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setValue(event.target.value)
+        onChange?.(inputValue)
+    }
+
+    return (
+        <div className={classes}>
+            {label && (
+                <label
+                    htmlFor={name}
+                    className={styles.label}
+                    dangerouslySetInnerHTML={{ __html: label }}
+                />
+            )}
+
+            <div className={styles['input-wrapper']}>
+                <Input
+                    name={name || 'otp'}
+                    disabled={disabled}
+                    maxLength={length}
+                    required={true}
+                    value={inputValue}
+                    onChange={updateInput}
+                    {...rest}
+                />
+
+                <div className={styles.placeholders}>
+                    {inputPlaceholders.map((placeholder, index) => (
+                        <div
+                            key={index}
+                            className={typeof placeholder === 'string' ? styles.separator : styles.placeholder}
+                            data-active={getAdjustedIndex(index) === inputValue.length ? true : undefined}
+                        >
+                            {typeof placeholder === 'string'
+                                ? placeholder
+                                : inputValue[getAdjustedIndex(index)]}
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            {subText && (
+                <div
+                    className={styles.subtext}
+                    dangerouslySetInnerHTML={{ __html: subText }}
+                />
+            )}
+        </div>
+    )
+}
+
+export default OTPInput

package/components/OTPInput/otpinput.module.scss

@@ -0,0 +1,85 @@
+@use '../../scss/config.scss' as *;
+
+.wrapper {
+    @include layout(flex, column, xs);
+
+    .label {
+        @include typography(primary-20);
+        @include spacing(mb-xs);
+    }
+
+    .input-wrapper {
+        @include position(relative);
+
+        input {
+            @include visibility(0);
+            @include position(absolute, t0, l0);
+            @include size(h40px);
+        }
+    }
+
+    .placeholders {
+        @include layout(flex);
+    }
+
+    .placeholder {
+        @include layout(flex, center);
+        @include border(top, primary-50);
+        @include border(bottom, primary-50);
+        @include border(right, primary-50);
+        @include size(40px);
+
+        &:first-child {
+            @include border(primary-50);
+            @include border-radius(left);
+        }
+
+        &:last-child {
+            @include border(primary-50);
+            @include border(left, 0);
+            @include border-radius(right);
+        }
+
+        &[data-active="true"] {
+            @include border(primary);
+
+            &::before {
+                @include size(w1px, h15px);
+                @include background(primary);
+
+                content: '';
+                animation: flash 1s infinite forwards;
+            }
+        }
+    }
+
+    .separator {
+        @include size(40px);
+        @include layout(flex, center);
+
+        + .placeholder {
+            @include border(left, primary-50);
+
+            &[data-active="true"] {
+                @include border(left, primary);
+            }
+        }
+    }
+
+    .subtext {
+        @include typography(md, primary-30);
+        @include spacing(mt-xs);
+    }
+}
+
+@keyframes flash {
+    0% {
+        @include visibility(0);
+    }
+    50% {
+        @include visibility(1);
+    }
+    100% {
+        @include visibility(0);
+    }
+}

package/components/OTPInput/otpinput.ts

@@ -0,0 +1,11 @@
+export type OTPInputProps = {
+    name?: string
+    disabled?: boolean
+    length?: number
+    groupLength?: number
+    separator?: string
+    label?: string
+    subText?: string
+    className?: string
+    [key: string]: any
+}

package/components/Pagination/Pagination.svelte

@@ -66,7 +66,7 @@
         })
     }
 
-    let calculatedCurrentPage = $state(
+    let calculatedCurrentPage = $derived(
         currentPage
             || (pages?.findIndex(page => page.active) || -1) + 1
             || 1

package/components/Rating/Rating.svelte

@@ -61,7 +61,7 @@
     {/if}
 
     {#if reviewCount}
-        {'•'}
+        •
         <ConditionalWrapper
             condition={!!reviewLink}
             element="a"