webcoreui 0.8.1 → 0.10.0

package/package.json

@@ -1,40 +1,49 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.8.1",
+    "version": "0.10.0",
     "scripts": {
         "prepare": "husky",
         "pre-commit": "lint-staged",
         "dev": "astro dev",
         "build": "astro check && astro build",
         "build:package": "node scripts/build.js",
-        "test": "echo \"Error: no test specified\"",
+        "build:local": "node scripts/build.js --local",
+        "compile": "node scripts/sass.js",
+        "test": "cd .. && vitest run && npm run test:sass",
+        "test:dev": "vitest",
+        "test:run": "vitest run",
+        "test:sass": "vitest run src/tests/scss.test.js --config astro.config.mjs",
         "create-component": "node scripts/createComponent.js",
         "lint": "eslint src/**/* --fix"
     },
     "devDependencies": {
         "@astrojs/check": "0.9.4",
-        "@astrojs/node": "8.3.4",
-        "@astrojs/react": "3.6.2",
-        "@astrojs/svelte": "5.5.0",
-        "@eslint/js": "9.9.1",
-        "@typescript-eslint/parser": "8.3.0",
-        "astro": "4.16.7",
-        "astro-eslint-parser": "1.0.2",
-        "eslint": "9.9.1",
-        "eslint-plugin-astro": "1.2.3",
-        "eslint-plugin-react": "7.35.0",
+        "@astrojs/node": "9.0.2",
+        "@astrojs/react": "4.1.6",
+        "@astrojs/svelte": "7.0.4",
+        "@eslint/js": "9.18.0",
+        "@typescript-eslint/parser": "8.21.0",
+        "astro": "5.1.10",
+        "astro-eslint-parser": "1.1.0",
+        "eslint": "9.18.0",
+        "eslint-plugin-astro": "1.3.1",
+        "eslint-plugin-react": "7.37.4",
         "eslint-plugin-simple-import-sort": "12.1.1",
-        "eslint-plugin-svelte": "2.43.0",
-        "husky": "9.1.5",
-        "lint-staged": "15.2.9",
-        "react": "18.3.1",
-        "react-dom": "18.3.1",
-        "sass": "1.80.6",
-        "svelte": "4.2.19",
-        "svelte-eslint-parser": "0.41.0",
-        "typescript": "5.4.5",
-        "typescript-eslint": "8.3.0"
+        "eslint-plugin-svelte": "2.46.1",
+        "husky": "9.1.7",
+        "jsdom": "26.0.0",
+        "lint-staged": "15.4.2",
+        "react": "19.0.0",
+        "react-dom": "19.0.0",
+        "sass": "1.83.4",
+        "sass-true": "8.1.0",
+        "svelte": "5.19.2",
+        "svelte-eslint-parser": "0.43.0",
+        "typescript": "5.7.3",
+        "typescript-eslint": "8.21.0",
+        "vite-tsconfig-paths": "5.1.4",
+        "vitest": "3.0.4"
     },
     "exports": {
         ".": "./index.js",

package/react.d.ts

@@ -5,6 +5,7 @@ import type { ReactAspectRatioProps as WReactAspectRatioProps } from './componen
 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'
@@ -12,8 +13,11 @@ import type { ReactCarouselProps as WReactCarouselProps } from './components/Car
 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 { ReactCopyProps as WReactCopyProps } from './components/Copy/copy'
 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 { ReactInputProps as WReactInputProps } from './components/Input/input'
@@ -45,6 +49,11 @@ import type { ReactTimelineProps as WReactTimelineProps } from './components/Tim
 import type { ReactTimelineItemProps as WReactTimelineItemProps } from './components/TimelineItem/timelineitem'
 import type { ReactToastProps as WReactToastProps } from './components/Toast/toast'
 
+import type { DataTableEventType as WDataTableEventType, HeadingObject as WHeadingObject } from './components/DataTable/datatable.ts'
+import type { ListEventType as WListEventType } from './components/List/list.ts'
+import type { PaginationEventType as WPaginationEventType } from './components/Pagination/pagination.ts'
+import type { SelectEventType as WSelectEventType } from './components/Select/select.ts'
+
 declare module 'webcoreui/react' {
     export const Accordion: FC<WAccordionProps>
 	export const Alert: FC<WReactAlertProps>
@@ -52,6 +61,7 @@ declare module 'webcoreui/react' {
 	export const Avatar: FC<WAvatarProps>
 	export const Badge: FC<WReactBadgeProps>
 	export const Banner: FC<WReactBannerProps>
+	export const BottomNavigation: FC<WBottomNavigationProps>
 	export const Breadcrumb: FC<WBreadcrumbProps>
 	export const Button: FC<WReactButtonProps>
 	export const Card: FC<WReactCardProps>
@@ -59,8 +69,11 @@ declare module 'webcoreui/react' {
 	export const Checkbox: FC<WReactCheckboxProps>
 	export const Collapsible: FC<WReactCollapsibleProps>
 	export const ConditionalWrapper: FC<WReactConditionalWrapperProps>
+	export const Copy: FC<WReactCopyProps>
 	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 Icon: FC<WIconProps>
 	export const Input: FC<WReactInputProps>
@@ -98,6 +111,7 @@ declare module 'webcoreui/react' {
 	export type AvatarProps = WAvatarProps
 	export type BadgeProps = WReactBadgeProps
 	export type BannerProps = WReactBannerProps
+	export type BottomNavigationProps = WBottomNavigationProps
 	export type BreadcrumbProps = WBreadcrumbProps
 	export type ButtonProps = WReactButtonProps
 	export type CardProps = WReactCardProps
@@ -105,8 +119,11 @@ declare module 'webcoreui/react' {
 	export type CheckboxProps = WReactCheckboxProps
 	export type CollapsibleProps = WReactCollapsibleProps
 	export type ConditionalWrapperProps = WReactConditionalWrapperProps
+	export type CopyProps = WReactCopyProps
 	export type DataTableProps = WReactDataTableProps
+	export type FlexProps = WReactFlexProps
 	export type FooterProps = WReactFooterProps
+	export type GridProps = WReactGridProps
 	export type GroupProps = WReactGroupProps
 	export type IconProps = WIconProps
 	export type InputProps = WReactInputProps
@@ -137,4 +154,10 @@ declare module 'webcoreui/react' {
 	export type TimelineProps = WReactTimelineProps
 	export type TimelineItemProps = WReactTimelineItemProps
 	export type ToastProps = WReactToastProps
+
+    export type DataTableEventType = WDataTableEventType
+	export type HeadingObject = WHeadingObject
+	export type ListEventType = WListEventType
+	export type PaginationEventType = WPaginationEventType
+	export type SelectEventType = WSelectEventType
 }

package/react.js

@@ -4,6 +4,7 @@ import AspectRatioComponent from './components/AspectRatio/AspectRatio.tsx'
 import AvatarComponent from './components/Avatar/Avatar.tsx'
 import BadgeComponent from './components/Badge/Badge.tsx'
 import BannerComponent from './components/Banner/Banner.tsx'
+import BottomNavigationComponent from './components/BottomNavigation/BottomNavigation.tsx'
 import BreadcrumbComponent from './components/Breadcrumb/Breadcrumb.tsx'
 import ButtonComponent from './components/Button/Button.tsx'
 import CardComponent from './components/Card/Card.tsx'
@@ -11,8 +12,11 @@ import CarouselComponent from './components/Carousel/Carousel.tsx'
 import CheckboxComponent from './components/Checkbox/Checkbox.tsx'
 import CollapsibleComponent from './components/Collapsible/Collapsible.tsx'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.tsx'
+import CopyComponent from './components/Copy/Copy.tsx'
 import DataTableComponent from './components/DataTable/DataTable.tsx'
+import FlexComponent from './components/Flex/Flex.tsx'
 import FooterComponent from './components/Footer/Footer.tsx'
+import GridComponent from './components/Grid/Grid.tsx'
 import GroupComponent from './components/Group/Group.tsx'
 import IconComponent from './components/Icon/Icon.tsx'
 import InputComponent from './components/Input/Input.tsx'
@@ -50,6 +54,7 @@ export const AspectRatio = AspectRatioComponent
 export const Avatar = AvatarComponent
 export const Badge = BadgeComponent
 export const Banner = BannerComponent
+export const BottomNavigation = BottomNavigationComponent
 export const Breadcrumb = BreadcrumbComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
@@ -57,8 +62,11 @@ export const Carousel = CarouselComponent
 export const Checkbox = CheckboxComponent
 export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
+export const Copy = CopyComponent
 export const DataTable = DataTableComponent
+export const Flex = FlexComponent
 export const Footer = FooterComponent
+export const Grid = GridComponent
 export const Group = GroupComponent
 export const Icon = IconComponent
 export const Input = InputComponent

package/scss/global/utility.scss

@@ -34,7 +34,7 @@ $alignments: (
     }
 
     .muted {
-        @include typography(primary-20, md);
+        @include typography(primary-20, md, hmd);
     }
 
     // Gaps
@@ -48,7 +48,13 @@ $alignments: (
               $class: string.slice($key, 2, -1) + $firstLetter;
             }
 
-            &.#{$class} { gap: $value; }        
+            &.#{$class} { gap: $value; }      
+
+            @each $key, $v in $breakpoints {
+                @include media($key) {
+                    &.#{$key}-#{$class} { gap: $value; }   
+                }
+            }
         }
     }
 
@@ -69,6 +75,27 @@ $alignments: (
         align-items: center;
     }
 
+    @each $key, $value in $breakpoints {
+        @include media($key) {
+            @each $alignmentKey, $alignmentValue in $alignments {
+                .#{$key}-#{$alignmentKey} {
+                    @if (string.index($alignmentKey, 'items')) {
+                        align-items: $alignmentValue;
+                    } @else {
+                        justify-content: $alignmentValue;
+                    } 
+                }
+            }
+
+            .flex.#{$key}-center,
+            .grid.#{$key}-center {
+                justify-content: center;
+                align-items: center;
+            }
+        }
+    }
+
+    // Flex directions & wraps
     .flex {
         @include layout(flex, default);
 
@@ -85,6 +112,25 @@ $alignments: (
         }
     }
 
+    @each $key, $value in $breakpoints {
+        @include media($key) {
+            .flex {
+                @each $direction in $flexDirectionValues {
+                    &.#{$key}-#{$direction} {
+                        flex-direction: $direction;
+                    }
+                }
+
+                @each $wrap in $flexWrapValues {
+                    &.#{$key}-#{$wrap} {
+                        flex-wrap: $wrap;
+                    }
+                }
+            }
+        }
+    }
+
+    // Grid columns
     .grid {
         @include layout(grid, default);
 
@@ -99,7 +145,6 @@ $alignments: (
         }
     }
 
-    // Grid columns
     @each $key, $value in $breakpoints {
         @include media($key) {
             @for $i from 2 to map.get($breakpointMap, $key) + 1 {

package/svelte.d.ts

@@ -1,140 +1,163 @@
-import type { SvelteComponent } from 'svelte'
+import type { Component } from 'svelte'
 import type { AccordionProps as WAccordionProps } from './components/Accordion/accordion'
-import type { AlertProps as WAlertProps } from './components/Alert/alert'
-import type { AspectRatioProps as WAspectRatioProps } from './components/AspectRatio/aspectratio'
+import type { SvelteAlertProps as WSvelteAlertProps } from './components/Alert/alert'
+import type { SvelteAspectRatioProps as WSvelteAspectRatioProps } from './components/AspectRatio/aspectratio'
 import type { AvatarProps as WAvatarProps } from './components/Avatar/avatar'
 import type { SvelteBadgeProps as WSvelteBadgeProps } from './components/Badge/badge'
-import type { BannerProps as WBannerProps } from './components/Banner/banner'
+import type { SvelteBannerProps as WSvelteBannerProps } from './components/Banner/banner'
+import type { BottomNavigationProps as WBottomNavigationProps } from './components/BottomNavigation/bottomnavigation'
 import type { BreadcrumbProps as WBreadcrumbProps } from './components/Breadcrumb/breadcrumb'
 import type { SvelteButtonProps as WSvelteButtonProps } from './components/Button/button'
-import type { CardProps as WCardProps } from './components/Card/card'
+import type { SvelteCardProps as WSvelteCardProps } from './components/Card/card'
 import type { SvelteCarouselProps as WSvelteCarouselProps } from './components/Carousel/carousel'
 import type { SvelteCheckboxProps as WSvelteCheckboxProps } from './components/Checkbox/checkbox'
-import type { CollapsibleProps as WCollapsibleProps } from './components/Collapsible/collapsible'
-import type { ConditionalWrapperProps as WConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+import type { SvelteCollapsibleProps as WSvelteCollapsibleProps } from './components/Collapsible/collapsible'
+import type { SvelteConditionalWrapperProps as WSvelteConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+import type { SvelteCopyProps as WSvelteCopyProps } from './components/Copy/copy'
 import type { SvelteDataTableProps as WSvelteDataTableProps } from './components/DataTable/datatable'
-import type { FooterProps as WFooterProps } from './components/Footer/footer'
-import type { GroupProps as WGroupProps } from './components/Group/group'
+import type { SvelteFlexProps as WSvelteFlexProps } from './components/Flex/flex'
+import type { SvelteFooterProps as WSvelteFooterProps } from './components/Footer/footer'
+import type { SvelteGridProps as WSvelteGridProps } from './components/Grid/grid'
+import type { SvelteGroupProps as WSvelteGroupProps } from './components/Group/group'
 import type { IconProps as WIconProps } from './components/Icon/icon'
 import type { SvelteInputProps as WSvelteInputProps } from './components/Input/input'
-import type { KbdProps as WKbdProps } from './components/Kbd/kbd'
+import type { SvelteKbdProps as WSvelteKbdProps } from './components/Kbd/kbd'
 import type { SvelteListProps as WSvelteListProps } from './components/List/list'
 import type { SvelteMasonryProps as WSvelteMasonryProps } from './components/Masonry/masonry'
-import type { MenuProps as WMenuProps } from './components/Menu/menu'
-import type { ModalProps as WModalProps } from './components/Modal/modal'
+import type { SvelteMenuProps as WSvelteMenuProps } from './components/Menu/menu'
+import type { SvelteModalProps as WSvelteModalProps } from './components/Modal/modal'
 import type { SveltePaginationProps as WSveltePaginationProps } from './components/Pagination/pagination'
-import type { PopoverProps as WPopoverProps } from './components/Popover/popover'
+import type { SveltePopoverProps as WSveltePopoverProps } from './components/Popover/popover'
 import type { ProgressProps as WProgressProps } from './components/Progress/progress'
 import type { SvelteRadioProps as WSvelteRadioProps } from './components/Radio/radio'
 import type { RatingProps as WRatingProps } from './components/Rating/rating'
-import type { RibbonProps as WRibbonProps } from './components/Ribbon/ribbon'
+import type { SvelteRibbonProps as WSvelteRibbonProps } from './components/Ribbon/ribbon'
 import type { SvelteSelectProps as WSvelteSelectProps } from './components/Select/select'
-import type { SheetProps as WSheetProps } from './components/Sheet/sheet'
-import type { SidebarProps as WSidebarProps } from './components/Sidebar/sidebar'
+import type { SvelteSheetProps as WSvelteSheetProps } from './components/Sheet/sheet'
+import type { SvelteSidebarProps as WSvelteSidebarProps } from './components/Sidebar/sidebar'
 import type { SkeletonProps as WSkeletonProps } from './components/Skeleton/skeleton'
 import type { SvelteSliderProps as WSvelteSliderProps } from './components/Slider/slider'
 import type { SpinnerProps as WSpinnerProps } from './components/Spinner/spinner'
-import type { SpoilerProps as WSpoilerProps } from './components/Spoiler/spoiler'
+import type { SvelteSpoilerProps as WSvelteSpoilerProps } from './components/Spoiler/spoiler'
 import type { StepperProps as WStepperProps } from './components/Stepper/stepper'
 import type { SvelteSwitchProps as WSvelteSwitchProps } from './components/Switch/switch'
 import type { TableProps as WTableProps } from './components/Table/table'
-import type { TabsProps as WTabsProps } from './components/Tabs/tabs'
+import type { SvelteTabsProps as WSvelteTabsProps } from './components/Tabs/tabs'
 import type { SvelteTextareaProps as WSvelteTextareaProps } from './components/Textarea/textarea'
-import type { ThemeSwitcherProps as WThemeSwitcherProps } from './components/ThemeSwitcher/themeswitcher'
-import type { TimelineProps as WTimelineProps } from './components/Timeline/timeline'
-import type { TimelineItemProps as WTimelineItemProps } from './components/TimelineItem/timelineitem'
-import type { ToastProps as WToastProps } from './components/Toast/toast'
+import type { SvelteThemeSwitcherProps as WSvelteThemeSwitcherProps } from './components/ThemeSwitcher/themeswitcher'
+import type { SvelteTimelineProps as WSvelteTimelineProps } from './components/Timeline/timeline'
+import type { SvelteTimelineItemProps as WSvelteTimelineItemProps } from './components/TimelineItem/timelineitem'
+import type { SvelteToastProps as WSvelteToastProps } from './components/Toast/toast'
+
+import type { DataTableEventType as WDataTableEventType, HeadingObject as WHeadingObject } from './components/DataTable/datatable.ts'
+import type { ListEventType as WListEventType } from './components/List/list.ts'
+import type { PaginationEventType as WPaginationEventType } from './components/Pagination/pagination.ts'
+import type { SelectEventType as WSelectEventType } from './components/Select/select.ts'
 
 declare module 'webcoreui/svelte' {
-    export class Accordion extends SvelteComponent<WAccordionProps> {}
-	export class Alert extends SvelteComponent<WAlertProps> {}
-	export class AspectRatio extends SvelteComponent<WAspectRatioProps> {}
-	export class Avatar extends SvelteComponent<WAvatarProps> {}
-	export class Badge extends SvelteComponent<WSvelteBadgeProps> {}
-	export class Banner extends SvelteComponent<WBannerProps> {}
-	export class Breadcrumb extends SvelteComponent<WBreadcrumbProps> {}
-	export class Button extends SvelteComponent<WSvelteButtonProps> {}
-	export class Card extends SvelteComponent<WCardProps> {}
-	export class Carousel extends SvelteComponent<WSvelteCarouselProps> {}
-	export class Checkbox extends SvelteComponent<WSvelteCheckboxProps> {}
-	export class Collapsible extends SvelteComponent<WCollapsibleProps> {}
-	export class ConditionalWrapper extends SvelteComponent<WConditionalWrapperProps> {}
-	export class DataTable extends SvelteComponent<WSvelteDataTableProps> {}
-	export class Footer extends SvelteComponent<WFooterProps> {}
-	export class Group extends SvelteComponent<WGroupProps> {}
-	export class Icon extends SvelteComponent<WIconProps> {}
-	export class Input extends SvelteComponent<WSvelteInputProps> {}
-	export class Kbd extends SvelteComponent<WKbdProps> {}
-	export class List extends SvelteComponent<WSvelteListProps> {}
-	export class Masonry extends SvelteComponent<WSvelteMasonryProps> {}
-	export class Menu extends SvelteComponent<WMenuProps> {}
-	export class Modal extends SvelteComponent<WModalProps> {}
-	export class Pagination extends SvelteComponent<WSveltePaginationProps> {}
-	export class Popover extends SvelteComponent<WPopoverProps> {}
-	export class Progress extends SvelteComponent<WProgressProps> {}
-	export class Radio extends SvelteComponent<WSvelteRadioProps> {}
-	export class Rating extends SvelteComponent<WRatingProps> {}
-	export class Ribbon extends SvelteComponent<WRibbonProps> {}
-	export class Select extends SvelteComponent<WSvelteSelectProps> {}
-	export class Sheet extends SvelteComponent<WSheetProps> {}
-	export class Sidebar extends SvelteComponent<WSidebarProps> {}
-	export class Skeleton extends SvelteComponent<WSkeletonProps> {}
-	export class Slider extends SvelteComponent<WSvelteSliderProps> {}
-	export class Spinner extends SvelteComponent<WSpinnerProps> {}
-	export class Spoiler extends SvelteComponent<WSpoilerProps> {}
-	export class Stepper extends SvelteComponent<WStepperProps> {}
-	export class Switch extends SvelteComponent<WSvelteSwitchProps> {}
-	export class Table extends SvelteComponent<WTableProps> {}
-	export class Tabs extends SvelteComponent<WTabsProps> {}
-	export class Textarea extends SvelteComponent<WSvelteTextareaProps> {}
-	export class ThemeSwitcher extends SvelteComponent<WThemeSwitcherProps> {}
-	export class Timeline extends SvelteComponent<WTimelineProps> {}
-	export class TimelineItem extends SvelteComponent<WTimelineItemProps> {}
-	export class Toast extends SvelteComponent<WToastProps> {}
+    export const Accordion: Component<WAccordionProps>
+	export const Alert: Component<WSvelteAlertProps>
+	export const AspectRatio: Component<WSvelteAspectRatioProps>
+	export const Avatar: Component<WAvatarProps>
+	export const Badge: Component<WSvelteBadgeProps>
+	export const Banner: Component<WSvelteBannerProps>
+	export const BottomNavigation: Component<WBottomNavigationProps>
+	export const Breadcrumb: Component<WBreadcrumbProps>
+	export const Button: Component<WSvelteButtonProps>
+	export const Card: Component<WSvelteCardProps>
+	export const Carousel: Component<WSvelteCarouselProps>
+	export const Checkbox: Component<WSvelteCheckboxProps>
+	export const Collapsible: Component<WSvelteCollapsibleProps>
+	export const ConditionalWrapper: Component<WSvelteConditionalWrapperProps>
+	export const Copy: Component<WSvelteCopyProps>
+	export const DataTable: Component<WSvelteDataTableProps>
+	export const Flex: Component<WSvelteFlexProps>
+	export const Footer: Component<WSvelteFooterProps>
+	export const Grid: Component<WSvelteGridProps>
+	export const Group: Component<WSvelteGroupProps>
+	export const Icon: Component<WIconProps>
+	export const Input: Component<WSvelteInputProps>
+	export const Kbd: Component<WSvelteKbdProps>
+	export const List: Component<WSvelteListProps>
+	export const Masonry: Component<WSvelteMasonryProps>
+	export const Menu: Component<WSvelteMenuProps>
+	export const Modal: Component<WSvelteModalProps>
+	export const Pagination: Component<WSveltePaginationProps>
+	export const Popover: Component<WSveltePopoverProps>
+	export const Progress: Component<WProgressProps>
+	export const Radio: Component<WSvelteRadioProps>
+	export const Rating: Component<WRatingProps>
+	export const Ribbon: Component<WSvelteRibbonProps>
+	export const Select: Component<WSvelteSelectProps>
+	export const Sheet: Component<WSvelteSheetProps>
+	export const Sidebar: Component<WSvelteSidebarProps>
+	export const Skeleton: Component<WSkeletonProps>
+	export const Slider: Component<WSvelteSliderProps>
+	export const Spinner: Component<WSpinnerProps>
+	export const Spoiler: Component<WSvelteSpoilerProps>
+	export const Stepper: Component<WStepperProps>
+	export const Switch: Component<WSvelteSwitchProps>
+	export const Table: Component<WTableProps>
+	export const Tabs: Component<WSvelteTabsProps>
+	export const Textarea: Component<WSvelteTextareaProps>
+	export const ThemeSwitcher: Component<WSvelteThemeSwitcherProps>
+	export const Timeline: Component<WSvelteTimelineProps>
+	export const TimelineItem: Component<WSvelteTimelineItemProps>
+	export const Toast: Component<WSvelteToastProps>
 
     export type AccordionProps = WAccordionProps
-	export type AlertProps = WAlertProps
-	export type AspectRatioProps = WAspectRatioProps
+	export type AlertProps = WSvelteAlertProps
+	export type AspectRatioProps = WSvelteAspectRatioProps
 	export type AvatarProps = WAvatarProps
 	export type BadgeProps = WSvelteBadgeProps
-	export type BannerProps = WBannerProps
+	export type BannerProps = WSvelteBannerProps
+	export type BottomNavigationProps = WBottomNavigationProps
 	export type BreadcrumbProps = WBreadcrumbProps
 	export type ButtonProps = WSvelteButtonProps
-	export type CardProps = WCardProps
+	export type CardProps = WSvelteCardProps
 	export type CarouselProps = WSvelteCarouselProps
 	export type CheckboxProps = WSvelteCheckboxProps
-	export type CollapsibleProps = WCollapsibleProps
-	export type ConditionalWrapperProps = WConditionalWrapperProps
+	export type CollapsibleProps = WSvelteCollapsibleProps
+	export type ConditionalWrapperProps = WSvelteConditionalWrapperProps
+	export type CopyProps = WSvelteCopyProps
 	export type DataTableProps = WSvelteDataTableProps
-	export type FooterProps = WFooterProps
-	export type GroupProps = WGroupProps
+	export type FlexProps = WSvelteFlexProps
+	export type FooterProps = WSvelteFooterProps
+	export type GridProps = WSvelteGridProps
+	export type GroupProps = WSvelteGroupProps
 	export type IconProps = WIconProps
 	export type InputProps = WSvelteInputProps
-	export type KbdProps = WKbdProps
+	export type KbdProps = WSvelteKbdProps
 	export type ListProps = WSvelteListProps
 	export type MasonryProps = WSvelteMasonryProps
-	export type MenuProps = WMenuProps
-	export type ModalProps = WModalProps
+	export type MenuProps = WSvelteMenuProps
+	export type ModalProps = WSvelteModalProps
 	export type PaginationProps = WSveltePaginationProps
-	export type PopoverProps = WPopoverProps
+	export type PopoverProps = WSveltePopoverProps
 	export type ProgressProps = WProgressProps
 	export type RadioProps = WSvelteRadioProps
 	export type RatingProps = WRatingProps
-	export type RibbonProps = WRibbonProps
+	export type RibbonProps = WSvelteRibbonProps
 	export type SelectProps = WSvelteSelectProps
-	export type SheetProps = WSheetProps
-	export type SidebarProps = WSidebarProps
+	export type SheetProps = WSvelteSheetProps
+	export type SidebarProps = WSvelteSidebarProps
 	export type SkeletonProps = WSkeletonProps
 	export type SliderProps = WSvelteSliderProps
 	export type SpinnerProps = WSpinnerProps
-	export type SpoilerProps = WSpoilerProps
+	export type SpoilerProps = WSvelteSpoilerProps
 	export type StepperProps = WStepperProps
 	export type SwitchProps = WSvelteSwitchProps
 	export type TableProps = WTableProps
-	export type TabsProps = WTabsProps
+	export type TabsProps = WSvelteTabsProps
 	export type TextareaProps = WSvelteTextareaProps
-	export type ThemeSwitcherProps = WThemeSwitcherProps
-	export type TimelineProps = WTimelineProps
-	export type TimelineItemProps = WTimelineItemProps
-	export type ToastProps = WToastProps
+	export type ThemeSwitcherProps = WSvelteThemeSwitcherProps
+	export type TimelineProps = WSvelteTimelineProps
+	export type TimelineItemProps = WSvelteTimelineItemProps
+	export type ToastProps = WSvelteToastProps
+
+    export type DataTableEventType = WDataTableEventType
+	export type HeadingObject = WHeadingObject
+	export type ListEventType = WListEventType
+	export type PaginationEventType = WPaginationEventType
+	export type SelectEventType = WSelectEventType
 }

package/svelte.js

@@ -4,6 +4,7 @@ import AspectRatioComponent from './components/AspectRatio/AspectRatio.svelte'
 import AvatarComponent from './components/Avatar/Avatar.svelte'
 import BadgeComponent from './components/Badge/Badge.svelte'
 import BannerComponent from './components/Banner/Banner.svelte'
+import BottomNavigationComponent from './components/BottomNavigation/BottomNavigation.svelte'
 import BreadcrumbComponent from './components/Breadcrumb/Breadcrumb.svelte'
 import ButtonComponent from './components/Button/Button.svelte'
 import CardComponent from './components/Card/Card.svelte'
@@ -11,8 +12,11 @@ import CarouselComponent from './components/Carousel/Carousel.svelte'
 import CheckboxComponent from './components/Checkbox/Checkbox.svelte'
 import CollapsibleComponent from './components/Collapsible/Collapsible.svelte'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.svelte'
+import CopyComponent from './components/Copy/Copy.svelte'
 import DataTableComponent from './components/DataTable/DataTable.svelte'
+import FlexComponent from './components/Flex/Flex.svelte'
 import FooterComponent from './components/Footer/Footer.svelte'
+import GridComponent from './components/Grid/Grid.svelte'
 import GroupComponent from './components/Group/Group.svelte'
 import IconComponent from './components/Icon/Icon.svelte'
 import InputComponent from './components/Input/Input.svelte'
@@ -50,6 +54,7 @@ export const AspectRatio = AspectRatioComponent
 export const Avatar = AvatarComponent
 export const Badge = BadgeComponent
 export const Banner = BannerComponent
+export const BottomNavigation = BottomNavigationComponent
 export const Breadcrumb = BreadcrumbComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
@@ -57,8 +62,11 @@ export const Carousel = CarouselComponent
 export const Checkbox = CheckboxComponent
 export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
+export const Copy = CopyComponent
 export const DataTable = DataTableComponent
+export const Flex = FlexComponent
 export const Footer = FooterComponent
+export const Grid = GridComponent
 export const Group = GroupComponent
 export const Icon = IconComponent
 export const Input = InputComponent

package/utils/DOMUtils.ts

@@ -1,9 +1,9 @@
-export const get = (selector: string, all: boolean = false) => all
+export const get = (selector: string, all?: boolean) => all
     ? document?.querySelectorAll(selector)
     : document?.querySelector(selector)
 
 export const on = (
-    selector: string | HTMLElement,
+    selector: string | HTMLElement | Document,
     event: string,
     callback: any,
     all?: boolean

package/utils/bodyFreeze.ts

@@ -0,0 +1,13 @@
+export const bodyFreeze = (freeze = true) => {
+    const scrollbarWidth = window.innerWidth - document.body.clientWidth
+
+    if (freeze) {
+        document.body.style.paddingRight = `${scrollbarWidth}px`
+        document.body.style.overflow = 'hidden'
+    } else {
+        setTimeout(() => {
+            document.body.style.paddingRight = ''
+            document.body.style.overflow = ''
+        }, 300)
+    }
+}

package/utils/classNames.ts

@@ -1,4 +1,4 @@
 export const classNames = (classes: any[]) => classes
-    .filter(Boolean)
     .flat(Infinity)
+    .filter(Boolean)
     .join(' ')