webcoreui 1.4.0 → 1.5.0-beta.1

package/components/TimelineItem/timelineitem.module.scss

@@ -8,14 +8,14 @@
         @include position(absolute, t-5px);
         @include size(25px);
         @include border-radius(max);
-        @include background(var(--w-timeline-color));
+        @include background(var(--color));
         @include typography(md);
         @include layout(inline-flex, center);
         @include border(2px, primary-70);
 
-        content: counter(item, var(--w-timeline-counter));
+        content: counter(item, var(--counter));
         counter-increment: item;
-        color: var(--w-timeline-text-color);
+        color: var(--text-color);
         margin-left: -40px;
     }
 
@@ -25,7 +25,7 @@
         @include border(6px, primary-70);
         @include layout(flex);
         
-        color: var(--w-timeline-text-color);
+        color: var(--text-color);
         margin-left: -40px;
         margin-top: -4px;
         

package/components/TimelineItem/timelineitem.ts

@@ -1,6 +1,3 @@
-import type { JSX } from 'react'
-import type { Snippet } from 'svelte'
-
 import type { IconProps } from '../Icon/icon'
 
 export type TimelineItemProps = {
@@ -9,12 +6,3 @@ export type TimelineItemProps = {
     icon?: IconProps['type'] | string
     className?: string
 }
-
-export type SvelteTimelineItemProps = {
-    children: Snippet
-} & TimelineItemProps
-
-export type ReactTimelineItemProps = {
-    TitleTag?: keyof JSX.IntrinsicElements
-    children: React.ReactNode
-} & Omit<TimelineItemProps, 'titleTag'>

package/components/Toast/Toast.astro

@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { ToastProps } from './toast'
 
 import Alert from '../Alert/Alert.astro'
@@ -7,7 +8,7 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './toast.module.scss'
 
-interface Props extends ToastProps {}
+export type Props = ToastProps<HTMLAttributes<'section'>>
 
 const {
     position,

package/components/Toast/Toast.svelte

@@ -1,26 +1,28 @@
 <script lang="ts">
-    import type { SvelteToastProps } from './toast'
+    import type { ToastProps } from './toast'
 
-    import Alert from '../Alert/Alert.svelte'
+    import Alert, { type Props as AlertProps } from '../Alert/Alert.svelte'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './toast.module.scss'
 
+    export type Props = ToastProps<AlertProps>
+
     const {
         position,
         className,
         icon,
         children,
         ...rest
-    }: SvelteToastProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.toast,
         className
-    ])
+    ]))
 
-    const additionalProps = {
+    const additionalProps = $derived({
         ...(position && { 'data-position': position }),
         titleProps: {
             'data-id': 'title'
@@ -28,7 +30,7 @@
         bodyProps: {
             'data-id': 'body'
         }
-    }
+    })
 
     const iconRender = $derived(icon)
 </script>

package/components/Toast/Toast.tsx

@@ -1,19 +1,20 @@
-import React from 'react'
-import type { ReactToastProps } from './toast'
+import type { ToastProps } from './toast'
 
-import Alert from '../Alert/Alert.tsx'
+import Alert, { type Props as AlertProps } from '../Alert/Alert.tsx'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './toast.module.scss'
 
+export type Props = ToastProps<React.HTMLAttributes<HTMLElement>> & AlertProps
+
 const Toast = ({
     icon,
     position,
     className,
     children,
     ...rest
-}: ReactToastProps) => {
+}: Props) => {
     const classes = classNames([
         styles.toast,
         className

package/components/Toast/toast.ts

@@ -1,18 +1,10 @@
-import type {
-    AlertProps,
-    ReactAlertProps,
-    SvelteAlertProps
-} from '../Alert/alert'
+import type { AlertProps } from '../Alert/alert'
 
-export type ToastProps = {
+export type ToastProps<T extends object = object> = {
     position?: 'bottom-left'
         | 'top-left'
         | 'top-right'
         | 'bottom-full'
         | 'top-full'
         | null
-    [key: string]: any
-} & AlertProps
-
-export type SvelteToastProps = ToastProps & SvelteAlertProps
-export type ReactToastProps = ToastProps & ReactAlertProps
+} & AlertProps<T>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "1.4.0",
+    "version": "1.5.0-beta.1",
     "scripts": {
         "prepare": "husky",
         "pre-commit": "lint-staged",
@@ -22,33 +22,33 @@
     },
     "devDependencies": {
         "@astrojs/check": "0.9.6",
-        "@astrojs/node": "9.5.4",
+        "@astrojs/node": "9.5.5",
         "@astrojs/react": "4.4.2",
         "@astrojs/svelte": "7.2.5",
         "@eslint/js": "9.39.3",
-        "@playwright/test": "1.58.2",
-        "@types/node": "25.3.0",
-        "@typescript-eslint/parser": "8.56.1",
-        "astro": "5.17.3",
-        "astro-eslint-parser": "1.3.0",
+        "@playwright/test": "1.60.0",
+        "@types/node": "25.9.1",
+        "@typescript-eslint/parser": "8.59.4",
+        "astro": "5.18.1",
+        "astro-eslint-parser": "1.4.0",
         "eslint": "9.39.3",
-        "eslint-plugin-astro": "1.6.0",
+        "eslint-plugin-astro": "1.7.0",
         "eslint-plugin-react": "7.37.5",
-        "eslint-plugin-simple-import-sort": "12.1.1",
-        "eslint-plugin-svelte": "3.15.0",
+        "eslint-plugin-simple-import-sort": "13.0.0",
+        "eslint-plugin-svelte": "3.17.1",
         "husky": "9.1.7",
-        "jsdom": "28.1.0",
-        "lint-staged": "16.2.7",
-        "react": "19.2.4",
-        "react-dom": "19.2.4",
-        "sass": "1.97.3",
+        "jsdom": "29.1.1",
+        "lint-staged": "17.0.5",
+        "react": "19.2.6",
+        "react-dom": "19.2.6",
+        "sass": "1.100.0",
         "sass-true": "10.1.0",
-        "svelte": "5.53.3",
-        "svelte-eslint-parser": "1.5.1",
+        "svelte": "5.55.9",
+        "svelte-eslint-parser": "1.6.1",
         "typescript": "5.9.3",
-        "typescript-eslint": "8.56.1",
+        "typescript-eslint": "8.59.4",
         "vite-tsconfig-paths": "6.1.1",
-        "vitest": "4.0.18"
+        "vitest": "4.1.7"
     },
     "exports": {
         ".": "./index.js",

package/react.d.ts

@@ -1,60 +1,63 @@
 import { FC } from 'react'
-import type { AccordionProps as WAccordionProps } from './components/Accordion/accordion'
-import type { ReactAlertProps as WReactAlertProps } from './components/Alert/alert'
-import type { ReactAspectRatioProps as WReactAspectRatioProps } from './components/AspectRatio/aspectratio'
-import type { AvatarProps as WAvatarProps } from './components/Avatar/avatar'
-import type { ReactBadgeProps as WReactBadgeProps } from './components/Badge/badge'
-import type { ReactBannerProps as WReactBannerProps } from './components/Banner/banner'
-import type { BottomNavigationProps as WBottomNavigationProps } from './components/BottomNavigation/bottomnavigation'
-import type { BreadcrumbProps as WBreadcrumbProps } from './components/Breadcrumb/breadcrumb'
-import type { ReactButtonProps as WReactButtonProps } from './components/Button/button'
-import type { ReactCardProps as WReactCardProps } from './components/Card/card'
-import type { ReactCarouselProps as WReactCarouselProps } from './components/Carousel/carousel'
-import type { ReactCheckboxProps as WReactCheckboxProps } from './components/Checkbox/checkbox'
-import type { ReactCollapsibleProps as WReactCollapsibleProps } from './components/Collapsible/collapsible'
-import type { ReactConditionalWrapperProps as WReactConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
-import type { ReactContextMenuProps as WReactContextMenuProps } from './components/ContextMenu/contextmenu'
-import type { ReactCopyProps as WReactCopyProps } from './components/Copy/copy'
-import type { ReactCounterProps as WReactCounterProps } from './components/Counter/counter'
-import type { ReactDataTableProps as WReactDataTableProps } from './components/DataTable/datatable'
-import type { ReactFlexProps as WReactFlexProps } from './components/Flex/flex'
-import type { ReactFooterProps as WReactFooterProps } from './components/Footer/footer'
-import type { ReactGridProps as WReactGridProps } from './components/Grid/grid'
-import type { ReactGroupProps as WReactGroupProps } from './components/Group/group'
-import type { IconProps as WIconProps } from './components/Icon/icon'
-import type { ImageProps as WImageProps } from './components/Image/image'
-import type { ImageLoaderProps as WImageLoaderProps } from './components/ImageLoader/imageloader'
-import type { ReactInputProps as WReactInputProps } from './components/Input/input'
-import type { ReactKbdProps as WReactKbdProps } from './components/Kbd/kbd'
-import type { ReactListProps as WReactListProps } from './components/List/list'
-import type { ReactMasonryProps as WReactMasonryProps } from './components/Masonry/masonry'
-import type { ReactMenuProps as WReactMenuProps } from './components/Menu/menu'
-import type { ReactModalProps as WReactModalProps } from './components/Modal/modal'
-import type { OTPInputProps as WOTPInputProps } from './components/OTPInput/otpinput'
-import type { ReactPaginationProps as WReactPaginationProps } from './components/Pagination/pagination'
-import type { ReactPopoverProps as WReactPopoverProps } from './components/Popover/popover'
-import type { ProgressProps as WProgressProps } from './components/Progress/progress'
-import type { ReactRadioProps as WReactRadioProps } from './components/Radio/radio'
-import type { ReactRangeSliderProps as WReactRangeSliderProps } from './components/RangeSlider/rangeslider'
-import type { RatingProps as WRatingProps } from './components/Rating/rating'
-import type { ReactRibbonProps as WReactRibbonProps } from './components/Ribbon/ribbon'
-import type { ReactSelectProps as WReactSelectProps } from './components/Select/select'
-import type { ReactSheetProps as WReactSheetProps } from './components/Sheet/sheet'
-import type { ReactSidebarProps as WReactSidebarProps } from './components/Sidebar/sidebar'
-import type { SkeletonProps as WSkeletonProps } from './components/Skeleton/skeleton'
-import type { ReactSliderProps as WReactSliderProps } from './components/Slider/slider'
-import type { SpeedDialProps as WSpeedDialProps } from './components/SpeedDial/speeddial'
-import type { SpinnerProps as WSpinnerProps } from './components/Spinner/spinner'
-import type { ReactSpoilerProps as WReactSpoilerProps } from './components/Spoiler/spoiler'
-import type { StepperProps as WStepperProps } from './components/Stepper/stepper'
-import type { ReactSwitchProps as WReactSwitchProps } from './components/Switch/switch'
-import type { TableProps as WTableProps } from './components/Table/table'
-import type { ReactTabsProps as WReactTabsProps } from './components/Tabs/tabs'
-import type { ReactTextareaProps as WReactTextareaProps } from './components/Textarea/textarea'
-import type { ReactThemeSwitcherProps as WReactThemeSwitcherProps } from './components/ThemeSwitcher/themeswitcher'
-import type { ReactTimelineProps as WReactTimelineProps } from './components/Timeline/timeline'
-import type { ReactTimelineItemProps as WReactTimelineItemProps } from './components/TimelineItem/timelineitem'
-import type { ReactToastProps as WReactToastProps } from './components/Toast/toast'
+
+import type { Props as WAccordionProps } from './components/Accordion/Accordion.tsx'
+import type { Props as WAlertProps } from './components/Alert/Alert.tsx'
+import type { Props as WAspectRatioProps } from './components/AspectRatio/AspectRatio.tsx'
+import type { Props as WAvatarProps } from './components/Avatar/Avatar.tsx'
+import type { Props as WBadgeProps } from './components/Badge/Badge.tsx'
+import type { Props as WBannerProps } from './components/Banner/Banner.tsx'
+import type { Props as WBottomNavigationProps } from './components/BottomNavigation/BottomNavigation.tsx'
+import type { Props as WBreadcrumbProps } from './components/Breadcrumb/Breadcrumb.tsx'
+import type { Props as WButtonProps } from './components/Button/Button.tsx'
+import type { Props as WCardProps } from './components/Card/Card.tsx'
+import type { Props as WCarouselProps } from './components/Carousel/Carousel.tsx'
+import type { Props as WCarouselItemProps } from './components/CarouselItem/CarouselItem.tsx'
+import type { Props as WCheckboxProps } from './components/Checkbox/Checkbox.tsx'
+import type { Props as WCollapsibleProps } from './components/Collapsible/Collapsible.tsx'
+import type { Props as WConditionalWrapperProps } from './components/ConditionalWrapper/ConditionalWrapper.tsx'
+import type { Props as WContextMenuProps } from './components/ContextMenu/ContextMenu.tsx'
+import type { Props as WCopyProps } from './components/Copy/Copy.tsx'
+import type { Props as WCounterProps } from './components/Counter/Counter.tsx'
+import type { Props as WDataTableProps } from './components/DataTable/DataTable.tsx'
+import type { Props as WFlexProps } from './components/Flex/Flex.tsx'
+import type { Props as WFooterProps } from './components/Footer/Footer.tsx'
+import type { Props as WGridProps } from './components/Grid/Grid.tsx'
+import type { Props as WGroupProps } from './components/Group/Group.tsx'
+import type { Props as WIconProps } from './components/Icon/Icon.tsx'
+import type { Props as WImageProps } from './components/Image/Image.tsx'
+import type { Props as WImageLoaderProps } from './components/ImageLoader/ImageLoader.tsx'
+import type { Props as WInputProps } from './components/Input/Input.tsx'
+import type { Props as WKbdProps } from './components/Kbd/Kbd.tsx'
+import type { Props as WListProps } from './components/List/List.tsx'
+import type { Props as WMasonryProps } from './components/Masonry/Masonry.tsx'
+import type { Props as WMenuProps } from './components/Menu/Menu.tsx'
+import type { Props as WModalProps } from './components/Modal/Modal.tsx'
+import type { Props as WOTPInputProps } from './components/OTPInput/OTPInput.tsx'
+import type { Props as WPaginationProps } from './components/Pagination/Pagination.tsx'
+import type { Props as WPopoverProps } from './components/Popover/Popover.tsx'
+import type { Props as WProgressProps } from './components/Progress/Progress.tsx'
+import type { Props as WRadioProps } from './components/Radio/Radio.tsx'
+import type { Props as WRangeSliderProps } from './components/RangeSlider/RangeSlider.tsx'
+import type { Props as WRatingProps } from './components/Rating/Rating.tsx'
+import type { Props as WRibbonProps } from './components/Ribbon/Ribbon.tsx'
+import type { Props as WSelectProps } from './components/Select/Select.tsx'
+import type { Props as WSheetProps } from './components/Sheet/Sheet.tsx'
+import type { Props as WSidebarProps } from './components/Sidebar/Sidebar.tsx'
+import type { Props as WSkeletonProps } from './components/Skeleton/Skeleton.tsx'
+import type { Props as WSliderProps } from './components/Slider/Slider.tsx'
+import type { Props as WSpeedDialProps } from './components/SpeedDial/SpeedDial.tsx'
+import type { Props as WSpinnerProps } from './components/Spinner/Spinner.tsx'
+import type { Props as WSpoilerProps } from './components/Spoiler/Spoiler.tsx'
+import type { Props as WStepperProps } from './components/Stepper/Stepper.tsx'
+import type { Props as WSwitchProps } from './components/Switch/Switch.tsx'
+import type { Props as WTabProps } from './components/Tab/Tab.tsx'
+import type { Props as WTableProps } from './components/Table/Table.tsx'
+import type { Props as WTabsProps } from './components/Tabs/Tabs.tsx'
+import type { Props as WTextareaProps } from './components/Textarea/Textarea.tsx'
+import type { Props as WThemeSwitcherProps } from './components/ThemeSwitcher/ThemeSwitcher.tsx'
+import type { Props as WTimelineProps } from './components/Timeline/Timeline.tsx'
+import type { Props as WTimelineItemProps } from './components/TimelineItem/TimelineItem.tsx'
+import type { Props as WToastProps } from './components/Toast/Toast.tsx'
 
 import type { DataTableEventType as WDataTableEventType, HeadingObject as WHeadingObject } from './components/DataTable/datatable.ts'
 import type { ListEventType as WListEventType } from './components/List/list.ts'
@@ -64,118 +67,122 @@ import type { SelectEventType as WSelectEventType } from './components/Select/se
 
 declare module 'webcoreui/react' {
     export const Accordion: FC<WAccordionProps>
-	export const Alert: FC<WReactAlertProps>
-	export const AspectRatio: FC<WReactAspectRatioProps>
+	export const Alert: FC<WAlertProps>
+	export const AspectRatio: FC<WAspectRatioProps>
 	export const Avatar: FC<WAvatarProps>
-	export const Badge: FC<WReactBadgeProps>
-	export const Banner: FC<WReactBannerProps>
+	export const Badge: FC<WBadgeProps>
+	export const Banner: FC<WBannerProps>
 	export const BottomNavigation: FC<WBottomNavigationProps>
 	export const Breadcrumb: FC<WBreadcrumbProps>
-	export const Button: FC<WReactButtonProps>
-	export const Card: FC<WReactCardProps>
-	export const Carousel: FC<WReactCarouselProps>
-	export const Checkbox: FC<WReactCheckboxProps>
-	export const Collapsible: FC<WReactCollapsibleProps>
-	export const ConditionalWrapper: FC<WReactConditionalWrapperProps>
-	export const ContextMenu: FC<WReactContextMenuProps>
-	export const Copy: FC<WReactCopyProps>
-	export const Counter: FC<WReactCounterProps>
-	export const DataTable: FC<WReactDataTableProps>
-	export const Flex: FC<WReactFlexProps>
-	export const Footer: FC<WReactFooterProps>
-	export const Grid: FC<WReactGridProps>
-	export const Group: FC<WReactGroupProps>
+	export const Button: FC<WButtonProps>
+	export const Card: FC<WCardProps>
+	export const Carousel: FC<WCarouselProps>
+	export const CarouselItem: FC<WCarouselItemProps>
+	export const Checkbox: FC<WCheckboxProps>
+	export const Collapsible: FC<WCollapsibleProps>
+	export const ConditionalWrapper: FC<WConditionalWrapperProps>
+	export const ContextMenu: FC<WContextMenuProps>
+	export const Copy: FC<WCopyProps>
+	export const Counter: FC<WCounterProps>
+	export const DataTable: FC<WDataTableProps>
+	export const Flex: FC<WFlexProps>
+	export const Footer: FC<WFooterProps>
+	export const Grid: FC<WGridProps>
+	export const Group: FC<WGroupProps>
 	export const Icon: FC<WIconProps>
 	export const Image: FC<WImageProps>
 	export const ImageLoader: FC<WImageLoaderProps>
-	export const Input: FC<WReactInputProps>
-	export const Kbd: FC<WReactKbdProps>
-	export const List: FC<WReactListProps>
-	export const Masonry: FC<WReactMasonryProps>
-	export const Menu: FC<WReactMenuProps>
-	export const Modal: FC<WReactModalProps>
+	export const Input: FC<WInputProps>
+	export const Kbd: FC<WKbdProps>
+	export const List: FC<WListProps>
+	export const Masonry: FC<WMasonryProps>
+	export const Menu: FC<WMenuProps>
+	export const Modal: FC<WModalProps>
 	export const OTPInput: FC<WOTPInputProps>
-	export const Pagination: FC<WReactPaginationProps>
-	export const Popover: FC<WReactPopoverProps>
+	export const Pagination: FC<WPaginationProps>
+	export const Popover: FC<WPopoverProps>
 	export const Progress: FC<WProgressProps>
-	export const Radio: FC<WReactRadioProps>
-	export const RangeSlider: FC<WReactRangeSliderProps>
+	export const Radio: FC<WRadioProps>
+	export const RangeSlider: FC<WRangeSliderProps>
 	export const Rating: FC<WRatingProps>
-	export const Ribbon: FC<WReactRibbonProps>
-	export const Select: FC<WReactSelectProps>
-	export const Sheet: FC<WReactSheetProps>
-	export const Sidebar: FC<WReactSidebarProps>
+	export const Ribbon: FC<WRibbonProps>
+	export const Select: FC<WSelectProps>
+	export const Sheet: FC<WSheetProps>
+	export const Sidebar: FC<WSidebarProps>
 	export const Skeleton: FC<WSkeletonProps>
-	export const Slider: FC<WReactSliderProps>
+	export const Slider: FC<WSliderProps>
 	export const SpeedDial: FC<WSpeedDialProps>
 	export const Spinner: FC<WSpinnerProps>
-	export const Spoiler: FC<WReactSpoilerProps>
+	export const Spoiler: FC<WSpoilerProps>
 	export const Stepper: FC<WStepperProps>
-	export const Switch: FC<WReactSwitchProps>
+	export const Switch: FC<WSwitchProps>
+	export const Tab: FC<WTabProps>
 	export const Table: FC<WTableProps>
-	export const Tabs: FC<WReactTabsProps>
-	export const Textarea: FC<WReactTextareaProps>
-	export const ThemeSwitcher: FC<WReactThemeSwitcherProps>
-	export const Timeline: FC<WReactTimelineProps>
-	export const TimelineItem: FC<WReactTimelineItemProps>
-	export const Toast: FC<WReactToastProps>
+	export const Tabs: FC<WTabsProps>
+	export const Textarea: FC<WTextareaProps>
+	export const ThemeSwitcher: FC<WThemeSwitcherProps>
+	export const Timeline: FC<WTimelineProps>
+	export const TimelineItem: FC<WTimelineItemProps>
+	export const Toast: FC<WToastProps>
 
     export type AccordionProps = WAccordionProps
-	export type AlertProps = WReactAlertProps
-	export type AspectRatioProps = WReactAspectRatioProps
+	export type AlertProps = WAlertProps
+	export type AspectRatioProps = WAspectRatioProps
 	export type AvatarProps = WAvatarProps
-	export type BadgeProps = WReactBadgeProps
-	export type BannerProps = WReactBannerProps
+	export type BadgeProps = WBadgeProps
+	export type BannerProps = WBannerProps
 	export type BottomNavigationProps = WBottomNavigationProps
 	export type BreadcrumbProps = WBreadcrumbProps
-	export type ButtonProps = WReactButtonProps
-	export type CardProps = WReactCardProps
-	export type CarouselProps = WReactCarouselProps
-	export type CheckboxProps = WReactCheckboxProps
-	export type CollapsibleProps = WReactCollapsibleProps
-	export type ConditionalWrapperProps = WReactConditionalWrapperProps
-	export type ContextMenuProps = WReactContextMenuProps
-	export type CopyProps = WReactCopyProps
-	export type CounterProps = WReactCounterProps
-	export type DataTableProps = WReactDataTableProps
-	export type FlexProps = WReactFlexProps
-	export type FooterProps = WReactFooterProps
-	export type GridProps = WReactGridProps
-	export type GroupProps = WReactGroupProps
+	export type ButtonProps = WButtonProps
+	export type CardProps = WCardProps
+	export type CarouselProps = WCarouselProps
+	export type CarouselItemProps = WCarouselItemProps
+	export type CheckboxProps = WCheckboxProps
+	export type CollapsibleProps = WCollapsibleProps
+	export type ConditionalWrapperProps = WConditionalWrapperProps
+	export type ContextMenuProps = WContextMenuProps
+	export type CopyProps = WCopyProps
+	export type CounterProps = WCounterProps
+	export type DataTableProps = WDataTableProps
+	export type FlexProps = WFlexProps
+	export type FooterProps = WFooterProps
+	export type GridProps = WGridProps
+	export type GroupProps = WGroupProps
 	export type IconProps = WIconProps
 	export type ImageProps = WImageProps
 	export type ImageLoaderProps = WImageLoaderProps
-	export type InputProps = WReactInputProps
-	export type KbdProps = WReactKbdProps
-	export type ListProps = WReactListProps
-	export type MasonryProps = WReactMasonryProps
-	export type MenuProps = WReactMenuProps
-	export type ModalProps = WReactModalProps
+	export type InputProps = WInputProps
+	export type KbdProps = WKbdProps
+	export type ListProps = WListProps
+	export type MasonryProps = WMasonryProps
+	export type MenuProps = WMenuProps
+	export type ModalProps = WModalProps
 	export type OTPInputProps = WOTPInputProps
-	export type PaginationProps = WReactPaginationProps
-	export type PopoverProps = WReactPopoverProps
+	export type PaginationProps = WPaginationProps
+	export type PopoverProps = WPopoverProps
 	export type ProgressProps = WProgressProps
-	export type RadioProps = WReactRadioProps
-	export type RangeSliderProps = WReactRangeSliderProps
+	export type RadioProps = WRadioProps
+	export type RangeSliderProps = WRangeSliderProps
 	export type RatingProps = WRatingProps
-	export type RibbonProps = WReactRibbonProps
-	export type SelectProps = WReactSelectProps
-	export type SheetProps = WReactSheetProps
-	export type SidebarProps = WReactSidebarProps
+	export type RibbonProps = WRibbonProps
+	export type SelectProps = WSelectProps
+	export type SheetProps = WSheetProps
+	export type SidebarProps = WSidebarProps
 	export type SkeletonProps = WSkeletonProps
-	export type SliderProps = WReactSliderProps
+	export type SliderProps = WSliderProps
 	export type SpeedDialProps = WSpeedDialProps
 	export type SpinnerProps = WSpinnerProps
-	export type SpoilerProps = WReactSpoilerProps
+	export type SpoilerProps = WSpoilerProps
 	export type StepperProps = WStepperProps
-	export type SwitchProps = WReactSwitchProps
+	export type SwitchProps = WSwitchProps
+	export type TabProps = WTabProps
 	export type TableProps = WTableProps
-	export type TabsProps = WReactTabsProps
-	export type TextareaProps = WReactTextareaProps
-	export type ThemeSwitcherProps = WReactThemeSwitcherProps
-	export type TimelineProps = WReactTimelineProps
-	export type TimelineItemProps = WReactTimelineItemProps
-	export type ToastProps = WReactToastProps
+	export type TabsProps = WTabsProps
+	export type TextareaProps = WTextareaProps
+	export type ThemeSwitcherProps = WThemeSwitcherProps
+	export type TimelineProps = WTimelineProps
+	export type TimelineItemProps = WTimelineItemProps
+	export type ToastProps = WToastProps
 
     export type DataTableEventType = WDataTableEventType
 	export type HeadingObject = WHeadingObject

package/react.js

@@ -9,6 +9,7 @@ import BreadcrumbComponent from './components/Breadcrumb/Breadcrumb.tsx'
 import ButtonComponent from './components/Button/Button.tsx'
 import CardComponent from './components/Card/Card.tsx'
 import CarouselComponent from './components/Carousel/Carousel.tsx'
+import CarouselItemComponent from './components/CarouselItem/CarouselItem.tsx'
 import CheckboxComponent from './components/Checkbox/Checkbox.tsx'
 import CollapsibleComponent from './components/Collapsible/Collapsible.tsx'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.tsx'
@@ -47,6 +48,7 @@ import SpinnerComponent from './components/Spinner/Spinner.tsx'
 import SpoilerComponent from './components/Spoiler/Spoiler.tsx'
 import StepperComponent from './components/Stepper/Stepper.tsx'
 import SwitchComponent from './components/Switch/Switch.tsx'
+import TabComponent from './components/Tab/Tab.tsx'
 import TableComponent from './components/Table/Table.tsx'
 import TabsComponent from './components/Tabs/Tabs.tsx'
 import TextareaComponent from './components/Textarea/Textarea.tsx'
@@ -66,6 +68,7 @@ export const Breadcrumb = BreadcrumbComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
 export const Carousel = CarouselComponent
+export const CarouselItem = CarouselItemComponent
 export const Checkbox = CheckboxComponent
 export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
@@ -104,6 +107,7 @@ export const Spinner = SpinnerComponent
 export const Spoiler = SpoilerComponent
 export const Stepper = StepperComponent
 export const Switch = SwitchComponent
+export const Tab = TabComponent
 export const Table = TableComponent
 export const Tabs = TabsComponent
 export const Textarea = TextareaComponent

package/scss/config/functions.scss

@@ -0,0 +1,41 @@
+@use 'sass:math';
+@use 'sass:color';
+
+@function _linear-channel($c) {
+    $c: math.div($c, 255);
+
+    @if $c <= 0.04045 {
+        @return math.div($c, 12.92);
+    }
+
+    @return math.pow(math.div($c + 0.055, 1.055), 2.4);
+}
+
+@function luminance($color) {
+    $r: _linear-channel(color.channel($color, 'red', $space: rgb));
+    $g: _linear-channel(color.channel($color, 'green', $space: rgb));
+    $b: _linear-channel(color.channel($color, 'blue', $space: rgb));
+
+    @return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
+}
+
+@function contrast($c1, $c2) {
+    $l1: luminance($c1);
+    $l2: luminance($c2);
+
+    @if $l1 < $l2 {
+        $tmp: $l1;
+        $l1: $l2;
+        $l2: $tmp;
+    }
+
+    @return math.div($l1 + 0.05, $l2 + 0.05);
+}
+
+@function wcag-required($level) {
+    @if $level == AAA {
+        @return 7;
+    }
+
+    @return 4.5;
+}