webcoreui 0.8.0 → 0.9.0

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 { ReactBottomNavigationProps as WReactBottomNavigationProps } 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<WReactBottomNavigationProps>
 	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 = WReactBottomNavigationProps
 	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/config/color-palette.scss

@@ -1,4 +1,4 @@
-@use 'webcore.config.scss' as *;
+@use '../../../../webcore.config.scss' as *;
 
 $colorPalette: (
     'primary': var(--w-color-primary),

package/scss/config/css-values.scss

@@ -1,4 +1,4 @@
-@use 'webcore.config.scss' as *;
+@use '../../../../webcore.config.scss' as *;
 
 $overflowValues: auto,
     hidden,

package/scss/config/layout.scss

@@ -1,4 +1,4 @@
-@use 'webcore.config.scss' as *;
+@use '../../../../webcore.config.scss' as *;
 
 $breakpoints: (
     'xs': 600px,

package/scss/config/mixins.scss

@@ -3,7 +3,7 @@
 @use 'sass:list';
 @use 'sass:string';
 
-@use 'webcore.config.scss' as *;
+@use '../../../../webcore.config.scss' as *;
 @use './color-palette.scss' as *;
 @use './css-values.scss' as *;
 @use './layout.scss' as *;

package/scss/config/typography.scss

@@ -1,4 +1,4 @@
-@use 'webcore.config.scss' as *;
+@use '../../../../webcore.config.scss' as *;
 
 $fontTypes: (
     'regular':  (Regular, sans-serif),

package/scss/config/variables.scss

@@ -1,3 +1,3 @@
-@use 'webcore.config.scss' as *;
+@use '../../../../webcore.config.scss' as *;
 
 $disableAnimations: false !default;

package/scss/config.scss

@@ -1,4 +1,4 @@
-@forward 'webcore.config.scss';
+@forward '../../../webcore.config.scss';
 @forward './config/color-palette';
 @forward './config/css-values';
 @forward './config/typography';

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

@@ -5,6 +5,7 @@ import type { AspectRatioProps as WAspectRatioProps } from './components/AspectR
 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 { 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'
@@ -12,8 +13,11 @@ import type { SvelteCarouselProps as WSvelteCarouselProps } from './components/C
 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 { CopyProps as WCopyProps } from './components/Copy/copy'
 import type { SvelteDataTableProps as WSvelteDataTableProps } from './components/DataTable/datatable'
+import type { FlexProps as WFlexProps } from './components/Flex/flex'
 import type { FooterProps as WFooterProps } from './components/Footer/footer'
+import type { GridProps as WGridProps } from './components/Grid/grid'
 import type { GroupProps as WGroupProps } from './components/Group/group'
 import type { IconProps as WIconProps } from './components/Icon/icon'
 import type { SvelteInputProps as WSvelteInputProps } from './components/Input/input'
@@ -45,6 +49,11 @@ import type { TimelineProps as WTimelineProps } from './components/Timeline/time
 import type { TimelineItemProps as WTimelineItemProps } from './components/TimelineItem/timelineitem'
 import type { ToastProps as WToastProps } 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> {}
@@ -52,6 +61,7 @@ declare module 'webcoreui/svelte' {
 	export class Avatar extends SvelteComponent<WAvatarProps> {}
 	export class Badge extends SvelteComponent<WSvelteBadgeProps> {}
 	export class Banner extends SvelteComponent<WBannerProps> {}
+	export class BottomNavigation extends SvelteComponent<WBottomNavigationProps> {}
 	export class Breadcrumb extends SvelteComponent<WBreadcrumbProps> {}
 	export class Button extends SvelteComponent<WSvelteButtonProps> {}
 	export class Card extends SvelteComponent<WCardProps> {}
@@ -59,8 +69,11 @@ declare module 'webcoreui/svelte' {
 	export class Checkbox extends SvelteComponent<WSvelteCheckboxProps> {}
 	export class Collapsible extends SvelteComponent<WCollapsibleProps> {}
 	export class ConditionalWrapper extends SvelteComponent<WConditionalWrapperProps> {}
+	export class Copy extends SvelteComponent<WCopyProps> {}
 	export class DataTable extends SvelteComponent<WSvelteDataTableProps> {}
+	export class Flex extends SvelteComponent<WFlexProps> {}
 	export class Footer extends SvelteComponent<WFooterProps> {}
+	export class Grid extends SvelteComponent<WGridProps> {}
 	export class Group extends SvelteComponent<WGroupProps> {}
 	export class Icon extends SvelteComponent<WIconProps> {}
 	export class Input extends SvelteComponent<WSvelteInputProps> {}
@@ -98,6 +111,7 @@ declare module 'webcoreui/svelte' {
 	export type AvatarProps = WAvatarProps
 	export type BadgeProps = WSvelteBadgeProps
 	export type BannerProps = WBannerProps
+	export type BottomNavigationProps = WBottomNavigationProps
 	export type BreadcrumbProps = WBreadcrumbProps
 	export type ButtonProps = WSvelteButtonProps
 	export type CardProps = WCardProps
@@ -105,8 +119,11 @@ declare module 'webcoreui/svelte' {
 	export type CheckboxProps = WSvelteCheckboxProps
 	export type CollapsibleProps = WCollapsibleProps
 	export type ConditionalWrapperProps = WConditionalWrapperProps
+	export type CopyProps = WCopyProps
 	export type DataTableProps = WSvelteDataTableProps
+	export type FlexProps = WFlexProps
 	export type FooterProps = WFooterProps
+	export type GridProps = WGridProps
 	export type GroupProps = WGroupProps
 	export type IconProps = WIconProps
 	export type InputProps = WSvelteInputProps
@@ -137,4 +154,10 @@ declare module 'webcoreui/svelte' {
 	export type TimelineProps = WTimelineProps
 	export type TimelineItemProps = WTimelineItemProps
 	export type ToastProps = WToastProps
+
+    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/classNames.ts

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

package/utils/getLayoutClasses.ts

@@ -0,0 +1,141 @@
+import { classNames } from './classNames'
+
+export type Gap = 'none'
+    | 'xxs'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'default'
+    | 'lg'
+    | 'xl'
+    | 'xl2'
+    | 'xl3'
+    | 'xl4'
+    | 'xl5'
+    | ''
+
+export type VerticalAlignment = 'center'
+    | 'start'
+    | 'end'
+    | 'baseline'
+    | 'stretch'
+    | ''
+
+export type HorizontalAlignment = 'center'
+    | 'start'
+    | 'end'
+    | 'between'
+    | 'around'
+    | 'evenly'
+    | 'stretch'
+    | ''
+
+export type Direction = 'row'
+    | 'column'
+    | 'row-reverse'
+    | 'column-reverse'
+    | ''
+
+export type Wrap = 'wrap'
+    | 'nowrap'
+    | 'wrap-reverse'
+    | ''
+
+export type Column = (2 | 3) | {
+    default?: 2 | 3
+    xs?: 2 | 3 | 4
+    sm?: 2 | 3 | 4
+    md?: 2 | 3 | 4 | 5 | 6
+    lg?: 2 | 3 | 4 | 5 | 6 | 7 | 8
+} | null
+
+export type Responsive<T> = T | {
+    default?: T
+    xs?: T
+    sm?: T
+    md?: T
+    lg?: T
+}
+
+export type Alignment = {
+    horizontal?: HorizontalAlignment
+    vertical?: VerticalAlignment
+}
+
+export type getLayoutClassesConfig = {
+    gap?: Responsive<Gap>
+    alignment?: Responsive<Alignment>
+    direction?: Responsive<Direction>
+    wrap?: Responsive<Wrap>
+    column?: Responsive<Column>
+}
+
+export const getLayoutClasses = ({
+    gap,
+    alignment,
+    direction,
+    wrap,
+    column
+}: getLayoutClassesConfig) => {
+    const gaps = typeof gap === 'string'
+        ? gap
+        : Object.entries(gap || {}).map(([key, value]) => key === 'default'
+            ? value
+            : `${key}-${value}`)
+
+    const directions = typeof direction === 'string'
+        ? direction
+        : Object.entries(direction || {}).map(([key, value]) => key === 'default'
+            ? value
+            : `${key}-${value}`)
+
+    const wraps = typeof wrap === 'string'
+        ? wrap
+        : Object.entries(wrap || {}).map(([key, value]) => key === 'default'
+            ? value
+            : `${key}-${value}`)
+
+    const columns = typeof column === 'number'
+        ? `col-${column}`
+        : Object.entries(column || {}).map(([key, value]) => key === 'default'
+            ? `col-${value}`
+            : `${key}-${value}`)
+
+    // Flatten alignments, eg.: { xs: { horizontal: 'center' } } to { xs-justify: 'center' }
+    const flattenAlignments = (obj: Responsive<Alignment>, prefix = ''): Responsive<Alignment> => {
+        return Object.entries(obj).reduce((acc, [key, value]) => {
+            const newKey = (prefix ? `${prefix}-${key}` : key)
+                .replace('horizontal', 'justify')
+                .replace('vertical', 'items')
+
+            if (typeof value === 'object') {
+                return { ...acc, ...flattenAlignments(value, newKey) }
+            }
+
+            return { ...acc, [newKey.replace('default-', '')]: value }
+        }, {})
+    }
+
+    const alignments = [...new Set(
+        Object.entries(flattenAlignments(alignment || {}))
+            .map(([key, value]) => `${key}-${value}`) // Turn key-value pairs into strings
+            .map((item, _, array) => { // Simplify center alignments
+                const hasDuplicate = array.filter(entry => {
+                    return entry.includes('justify-center') || entry.includes('items-center')
+                }).length > 1
+
+                return hasDuplicate ? item
+                    .replace('justify-center', 'center')
+                    .replace('items-center', 'center')
+                    : item
+            })
+    )]
+
+    return classNames([
+        gaps,
+        alignments,
+        directions,
+        wraps,
+        columns
+    ])
+}

package/utils/modal.ts

@@ -1,13 +1,13 @@
-type Callback = {
+export type ModalCallback = {
     trigger: Element | null
     modal: HTMLElement
 }
 
-type Modal = {
+export type Modal = {
     trigger: string
     modal: string
-    onOpen?: (args: Callback) => unknown
-    onClose?: (args: Callback) => unknown
+    onOpen?: (args: ModalCallback) => unknown
+    onClose?: (args: ModalCallback) => unknown
 }
 
 export const modal = (config: Modal | string) => {

package/utils/popover.ts

@@ -14,20 +14,21 @@ export type PopoverPosition = 'top'
     | 'bottom-start'
     | 'bottom-end'
 
-type Callback = {
+export type PopoverCallback = {
     trigger: HTMLElement
     popover: HTMLElement
     position: PopoverPosition | undefined
 }
 
-type Popover = {
+export type Popover = {
     trigger: string
     popover: string
     position?: PopoverPosition
     offset?: number
     closeOnBlur?: boolean
-    onOpen?: (args: Callback) => unknown
-    onClose?: (args: Callback) => unknown
+    closeOnEsc?: boolean
+    onOpen?: (args: PopoverCallback) => unknown
+    onClose?: (args: PopoverCallback) => unknown
 }
 
 export const popover = ({
@@ -36,6 +37,7 @@ export const popover = ({
     position,
     offset = 10,
     closeOnBlur = true,
+    closeOnEsc = true,
     onOpen,
     onClose
 }: Popover) => {
@@ -184,6 +186,22 @@ export const popover = ({
             }, 300)
         }
 
+        const handleCloseOnEsc = (event: KeyboardEvent) => {
+            if (event.key === 'Escape' && popoverDOM.dataset.show) {
+                popoverDOM.dataset.show = ''
+
+                onClose?.({
+                    trigger: triggerDOM,
+                    popover: popoverDOM,
+                    position
+                })
+
+                setTimeout(() => {
+                    popoverDOM.removeAttribute('data-show')
+                }, 300)
+            }
+        }
+
         const removeOnResize = debounce(() => {
             popoverDOM.dataset.show = ''
 
@@ -207,6 +225,10 @@ export const popover = ({
             document.addEventListener('click', handleClose)
         }
 
+        if (closeOnEsc) {
+            document.addEventListener('keydown', handleCloseOnEsc)
+        }
+
         return {
             remove() {
                 triggerDOM.removeEventListener('click', handleOpen)
@@ -215,6 +237,10 @@ export const popover = ({
                 if (closeOnBlur) {
                     document.removeEventListener('click', handleClose)
                 }
+
+                if (closeOnEsc) {
+                    document.removeEventListener('keydown', handleCloseOnEsc)
+                }
             }
         }
     }