@jordan-mace/chaser-design-system 1.2.3 → 1.2.6

package/dist/components/List/ListItem.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { listItem } from './styles.css';
+import Box from '../Box';
+const ListItem = ({ children }) => {
+    return (_jsx(Box, { as: "li", className: listItem, children: children }));
+};
+export default ListItem;

package/dist/components/List/index.d.ts

@@ -0,0 +1,2 @@
+export { default as List } from './List';
+export { default as ListItem } from './ListItem';

package/dist/components/List/index.js

@@ -0,0 +1,2 @@
+export { default as List } from './List';
+export { default as ListItem } from './ListItem';

package/dist/components/List/styles.css.d.ts

@@ -0,0 +1,2 @@
+export declare const list: string;
+export declare const listItem: string;

package/dist/components/List/styles.css.js

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+export const list = style({
+    listStyle: 'none',
+    padding: 0,
+    margin: 0,
+});
+export const listItem = style({
+    padding: '0.5rem 0',
+    borderBottom: `1px solid ${vars.colors.listBorder}`,
+});

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type ModalSize = 'small' | 'medium' | 'large' | 'full';
+export interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    size?: ModalSize;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    showCloseButton?: boolean;
+}
+declare const Modal: ({ isOpen, onClose, title, size, children, footer, showCloseButton, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export default Modal;

package/dist/components/Modal/Modal.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { modal, modalVariants, modalHeader, modalTitle, modalCloseButton, modalBody, modalFooter, } from './styles.css';
+import { useEffect, useRef } from 'react';
+import Box from '../Box';
+const Modal = ({ isOpen, onClose, title, size = 'medium', children, footer, showCloseButton = true, ...props }) => {
+    const dialogRef = useRef(null);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (isOpen) {
+            dialog.showModal();
+            dialog.classList.add('open');
+        }
+        else {
+            dialog.close();
+            dialog.classList.remove('open');
+        }
+        const handleClose = () => {
+            onClose();
+        };
+        dialog.addEventListener('close', handleClose);
+        return () => {
+            dialog.removeEventListener('close', handleClose);
+        };
+    }, [isOpen, onClose]);
+    return (_jsxs(Box, { as: "dialog", ref: dialogRef, className: clsx(modal, modalVariants[size]), onClick: (e) => {
+            // Close when clicking the backdrop
+            if (e.target === dialogRef.current) {
+                onClose();
+            }
+        }, ...props, children: [title && (_jsxs(Box, { as: "div", className: modalHeader, children: [_jsx(Box, { as: "h2", className: modalTitle, children: title }), showCloseButton && (_jsx(Box, { as: "button", className: modalCloseButton, onClick: onClose, "aria-label": "Close modal", type: "button", children: "\u00D7" }))] })), _jsx(Box, { as: "div", className: modalBody, children: children }), footer && _jsx(Box, { as: "div", className: modalFooter, children: footer })] }));
+};
+export default Modal;

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Modal } from './Modal';
+export type { ModalProps, ModalSize } from './Modal';

package/dist/components/Modal/index.js

@@ -0,0 +1 @@
+export { default as Modal } from './Modal';

package/dist/components/Modal/styles.css.d.ts

@@ -0,0 +1,7 @@
+export declare const modalVariants: Record<"medium" | "large" | "small" | "full", string>;
+export declare const modal: string;
+export declare const modalHeader: string;
+export declare const modalTitle: string;
+export declare const modalCloseButton: string;
+export declare const modalBody: string;
+export declare const modalFooter: string;

package/dist/components/Modal/styles.css.js

@@ -0,0 +1,92 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const modalVariants = styleVariants({
+    small: {
+        maxWidth: '400px',
+    },
+    medium: {
+        maxWidth: '600px',
+    },
+    large: {
+        maxWidth: '800px',
+    },
+    full: {
+        maxWidth: '95vw',
+    },
+});
+export const modal = styleWithLayer({
+    background: vars.colors.backgroundDefault,
+    borderRadius: '0.75rem',
+    boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+    border: '1px solid var(--modal-border, transparent)',
+    color: vars.colors.textPrimary,
+    fontFamily: vars.fontFamily.body,
+    maxWidth: '90vw',
+    maxHeight: '90vh',
+    flexDirection: 'column',
+    overflow: 'hidden',
+    selectors: {
+        '&:not([open])': {
+            display: 'none',
+        },
+        '[open] &': {
+            display: 'flex',
+        },
+        '&::backdrop': {
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        },
+    },
+});
+export const modalHeader = styleWithLayer({
+    padding: '1.25rem',
+    borderBottom: `1px solid ${vars.colors.borderMuted}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: '1rem',
+});
+export const modalTitle = styleWithLayer({
+    fontFamily: vars.fontFamily.heading,
+    fontSize: '1.25rem',
+    fontWeight: '600',
+    color: vars.colors.textPrimary,
+    margin: 0,
+});
+export const modalCloseButton = styleWithLayer({
+    background: 'none',
+    border: 'none',
+    padding: '0.5rem',
+    cursor: 'pointer',
+    borderRadius: '0.375rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: vars.colors.textSecondary,
+    fontSize: '1.5rem',
+    lineHeight: '1',
+    transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out',
+    selectors: {
+        '&:hover': {
+            backgroundColor: vars.colors.borderMuted,
+            color: vars.colors.textPrimary,
+        },
+        '&:focus-visible': {
+            outline: '2px solid var(--modal-focus-ring, currentColor)',
+            outlineOffset: '2px',
+        },
+    },
+});
+export const modalBody = styleWithLayer({
+    padding: '1.25rem',
+    overflowY: 'auto',
+    flex: 1,
+});
+export const modalFooter = styleWithLayer({
+    padding: '1.25rem',
+    borderTop: `1px solid ${vars.colors.borderMuted}`,
+    display: 'flex',
+    gap: '0.75rem',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+});

package/dist/components/Navbar/Navbar.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type NavbarProps = React.HTMLAttributes<HTMLElement> & {
+    children?: React.ReactNode;
+};
+declare const Navbar: (props: NavbarProps) => import("react/jsx-runtime").JSX.Element;
+export default Navbar;

package/dist/components/Navbar/Navbar.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { navbarStyle } from './styles.css';
+import Box from '../Box';
+const Navbar = (props) => {
+    return (_jsx(Box, { as: "nav", width: "100%", display: "flex", flexDirection: "row", gap: "medium", className: clsx(navbarStyle, props.className), ...props }));
+};
+export default Navbar;

package/dist/components/Navbar/NavbarItem.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type NavbarItemProps = React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+};
+declare const NavbarItem: (props: NavbarItemProps) => import("react/jsx-runtime").JSX.Element;
+export default NavbarItem;

package/dist/components/Navbar/NavbarItem.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { navbarItemStyle } from './styles.css';
+import Box from '../Box';
+const NavbarItem = (props) => {
+    return _jsx(Box, { as: "div", className: clsx(navbarItemStyle, props.className), ...props });
+};
+export default NavbarItem;

package/dist/components/Navbar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Navbar } from './Navbar';
+export { default as NavbarItem } from './NavbarItem';

package/dist/components/Navbar/index.js

@@ -0,0 +1,2 @@
+export { default as Navbar } from './Navbar';
+export { default as NavbarItem } from './NavbarItem';

package/dist/components/Navbar/styles.css.d.ts

@@ -0,0 +1,2 @@
+export declare const navbarStyle: string;
+export declare const navbarItemStyle: string;

package/dist/components/Navbar/styles.css.js

@@ -0,0 +1,3 @@
+import { styleWithLayer } from '../../styles/utils';
+export const navbarStyle = styleWithLayer({});
+export const navbarItemStyle = styleWithLayer({});

package/dist/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export type NumberInputPosition = 'right' | 'left';
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'min' | 'max'> {
+    label?: string;
+    value?: number | '';
+    onChange?: (value: number | '') => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    stepperPosition?: NumberInputPosition;
+    placeholder?: string;
+    hint?: string;
+    error?: boolean;
+    errorMessage?: string;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    allowEmpty?: boolean;
+}
+declare const NumberInput: ({ label, value, onChange, min, max, step, stepperPosition, placeholder, hint, error, errorMessage, fullWidth, disabled, allowEmpty, className, ...props }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
+export default NumberInput;

package/dist/components/NumberInput/NumberInput.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useCallback } from 'react';
+import { numberInputContainer, numberInput, numberInputVariants, numberInputLabel, numberInputStepper, numberInputStepperLeft, numberInputButton, numberInputWrapper, numberInputHint, numberInputErrorMessage, } from './styles.css';
+import Box from '../Box';
+const NumberInput = ({ label, value, onChange, min = -Infinity, max = Infinity, step = 1, stepperPosition = 'right', placeholder = '0', hint, error = false, errorMessage, fullWidth = true, disabled = false, allowEmpty = true, className, ...props }) => {
+    const handleChange = (e) => {
+        const inputValue = e.target.value;
+        if (inputValue === '') {
+            if (allowEmpty) {
+                onChange?.('');
+            }
+            else {
+                onChange?.(0);
+            }
+            return;
+        }
+        const numValue = parseFloat(inputValue);
+        if (!isNaN(numValue)) {
+            const clampedValue = Math.min(Math.max(numValue, min), max);
+            onChange?.(clampedValue);
+        }
+    };
+    const increment = useCallback(() => {
+        const currentValue = typeof value === 'number' ? value : 0;
+        const newValue = Math.min(currentValue + step, max);
+        onChange?.(newValue);
+    }, [value, step, max, onChange]);
+    const decrement = useCallback(() => {
+        const currentValue = typeof value === 'number' ? value : 0;
+        const newValue = Math.max(currentValue - step, min);
+        onChange?.(newValue);
+    }, [value, step, min, onChange]);
+    const isIncrementDisabled = disabled || (typeof value === 'number' && value >= max);
+    const isDecrementDisabled = disabled || (typeof value === 'number' && value <= min);
+    const displayValue = value === '' ? '' : value;
+    return (_jsxs(Box, { className: numberInputWrapper, width: fullWidth ? '100%' : undefined, children: [label && (_jsx(Box, { as: "label", className: numberInputLabel, children: label })), _jsxs(Box, { className: numberInputContainer, children: [_jsx(Box, { as: "input", type: "number", value: displayValue, onChange: handleChange, min: min, max: max, step: step, placeholder: placeholder, disabled: disabled, className: clsx(numberInput, numberInputVariants[error ? 'error' : 'default'], className), ...props }), _jsxs(Box, { className: clsx(numberInputStepper, stepperPosition === 'left' && numberInputStepperLeft), children: [_jsx(Box, { as: "button", className: numberInputButton, onClick: increment, disabled: isIncrementDisabled, type: "button", "aria-label": "Increase value", children: "+" }), _jsx(Box, { as: "button", className: numberInputButton, onClick: decrement, disabled: isDecrementDisabled, type: "button", "aria-label": "Decrease value", children: "\u2212" })] })] }), error && errorMessage && (_jsx(Box, { as: "div", className: numberInputErrorMessage, role: "alert", children: errorMessage })), hint && !error && (_jsx(Box, { as: "div", className: numberInputHint, children: hint }))] }));
+};
+export default NumberInput;

package/dist/components/NumberInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NumberInput } from './NumberInput';
+export type { NumberInputProps, NumberInputPosition } from './NumberInput';

package/dist/components/NumberInput/index.js

@@ -0,0 +1 @@
+export { default as NumberInput } from './NumberInput';

package/dist/components/NumberInput/styles.css.d.ts

@@ -0,0 +1,10 @@
+export declare const numberInputContainer: string;
+export declare const numberInput: string;
+export declare const numberInputVariants: Record<"default" | "error", string>;
+export declare const numberInputLabel: string;
+export declare const numberInputStepper: string;
+export declare const numberInputStepperLeft: string;
+export declare const numberInputButton: string;
+export declare const numberInputWrapper: string;
+export declare const numberInputHint: string;
+export declare const numberInputErrorMessage: string;

package/dist/components/NumberInput/styles.css.js

@@ -0,0 +1,117 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const numberInputContainer = styleWithLayer({
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+});
+export const numberInput = styleWithLayer({
+    width: '100%',
+    padding: '0.75rem 2.5rem',
+    fontSize: '14px',
+    fontFamily: vars.fontFamily.body,
+    color: vars.colors.textPrimary,
+    backgroundColor: vars.colors.inputBackground,
+    border: `1px solid ${vars.colors.inputBorder}`,
+    borderRadius: '8px',
+    outline: 'none',
+    textAlign: 'center',
+    transition: 'border-color 0.2s ease',
+    '::placeholder': {
+        color: vars.colors.inputPlaceholder,
+    },
+    ':focus-visible': {
+        outline: `2px solid ${vars.colors.inputBorderFocused}`,
+        outlineOffset: '2px',
+    },
+    ':hover': {
+        borderColor: vars.colors.inputBorderFocused,
+    },
+    selectors: {
+        '&:disabled': {
+            cursor: 'not-allowed',
+            opacity: 0.5,
+            backgroundColor: vars.colors.backgroundMuted,
+        },
+        '&:disabled:hover': {
+            borderColor: vars.colors.inputBorder,
+        },
+    },
+});
+export const numberInputVariants = styleVariants({
+    default: {},
+    error: {
+        border: `1px solid ${vars.colors.alertErrorBorder}`,
+        ':focus-visible': {
+            outline: `2px solid ${vars.colors.alertErrorBorder}`,
+        },
+        ':hover': {
+            borderColor: vars.colors.alertErrorBorder,
+        },
+    },
+});
+export const numberInputLabel = styleWithLayer({
+    display: 'block',
+    fontSize: '14px',
+    fontWeight: '500',
+    color: vars.colors.textPrimary,
+    marginBottom: '8px',
+});
+export const numberInputStepper = styleWithLayer({
+    position: 'absolute',
+    display: 'flex',
+    flexDirection: 'column',
+    right: '0.5rem',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    gap: '2px',
+});
+export const numberInputStepperLeft = styleWithLayer({
+    left: '0.5rem',
+    right: 'auto',
+});
+export const numberInputButton = styleWithLayer({
+    width: '1.5rem',
+    height: '1.25rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: vars.colors.buttonBackgroundSecondary,
+    border: `1px solid ${vars.colors.borderDefault}`,
+    borderRadius: '4px',
+    cursor: 'pointer',
+    fontSize: '12px',
+    color: vars.colors.buttonTextSecondary,
+    transition: 'all 0.15s ease',
+    padding: 0,
+    ':hover': {
+        backgroundColor: vars.colors.buttonBackgroundFocusedSecondary,
+    },
+    ':active': {
+        transform: 'scale(0.95)',
+    },
+    selectors: {
+        '&:disabled': {
+            cursor: 'not-allowed',
+            opacity: 0.5,
+        },
+        '&:disabled:hover': {
+            backgroundColor: vars.colors.buttonBackgroundSecondary,
+        },
+    },
+});
+export const numberInputWrapper = styleWithLayer({
+    width: '100%',
+});
+export const numberInputHint = styleWithLayer({
+    fontSize: '12px',
+    color: vars.colors.textSecondary,
+    marginTop: '4px',
+});
+export const numberInputErrorMessage = styleWithLayer({
+    fontSize: '12px',
+    color: vars.colors.alertErrorText,
+    marginTop: '4px',
+});

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,10 @@
+export type PaginationProps = {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    siblingCount?: number;
+    showFirstLast?: boolean;
+    showPrevNext?: boolean;
+};
+declare const Pagination: ({ currentPage, totalPages, onPageChange, siblingCount, showFirstLast, showPrevNext, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export default Pagination;

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { paginationContainer, pageButton, pageButtonVariants, ellipsis } from './styles.css';
+import Box from '../Box';
+const Pagination = ({ currentPage, totalPages, onPageChange, siblingCount = 1, showFirstLast = true, showPrevNext = true, }) => {
+    const generatePageNumbers = () => {
+        const pages = [];
+        const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+        const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+        const shouldShowLeftEllipsis = leftSiblingIndex > 2;
+        const shouldShowRightEllipsis = rightSiblingIndex < totalPages - 1;
+        if (totalPages <= 7) {
+            for (let i = 1; i <= totalPages; i++) {
+                pages.push(i);
+            }
+        }
+        else {
+            pages.push(1);
+            if (shouldShowLeftEllipsis) {
+                pages.push('left-ellipsis');
+            }
+            else if (currentPage > 3) {
+                for (let i = 2; i < leftSiblingIndex; i++) {
+                    pages.push(i);
+                }
+            }
+            for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+                if (i !== 1 && i !== totalPages) {
+                    pages.push(i);
+                }
+            }
+            if (shouldShowRightEllipsis) {
+                pages.push('right-ellipsis');
+            }
+            else if (currentPage < totalPages - 2) {
+                for (let i = rightSiblingIndex + 1; i < totalPages; i++) {
+                    pages.push(i);
+                }
+            }
+            pages.push(totalPages);
+        }
+        return pages;
+    };
+    const pages = generatePageNumbers();
+    return (_jsxs(Box, { className: paginationContainer, children: [showFirstLast && (_jsx(Box, { as: "button", className: clsx(pageButton, pageButtonVariants.default), onClick: () => onPageChange(1), disabled: currentPage === 1, children: '<<' })), showPrevNext && (_jsx(Box, { as: "button", className: clsx(pageButton, pageButtonVariants.default), onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, children: '<' })), pages.map((page, index) => (typeof page === 'number' ? (_jsx(Box, { as: "button", className: clsx(pageButton, page === currentPage ? pageButtonVariants.active : pageButtonVariants.default), onClick: () => onPageChange(page), children: page }, `page-${page}`)) : (_jsx(Box, { className: ellipsis, children: "..." }, `${page}-${index}`)))), showPrevNext && (_jsx(Box, { as: "button", className: clsx(pageButton, pageButtonVariants.default), onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, children: '>' })), showFirstLast && (_jsx(Box, { as: "button", className: clsx(pageButton, pageButtonVariants.default), onClick: () => onPageChange(totalPages), disabled: currentPage === totalPages, children: '>>' }))] }));
+};
+export default Pagination;

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination';

package/dist/components/Pagination/index.js

@@ -0,0 +1 @@
+export { default as Pagination } from './Pagination';

package/dist/components/Pagination/styles.css.d.ts

@@ -0,0 +1,4 @@
+export declare const paginationContainer: string;
+export declare const pageButton: string;
+export declare const pageButtonVariants: Record<"default" | "active", string>;
+export declare const ellipsis: string;

package/dist/components/Pagination/styles.css.js

@@ -0,0 +1,44 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const paginationContainer = styleWithLayer({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+});
+export const pageButton = styleWithLayer({
+    padding: '0.5rem 0.75rem',
+    borderRadius: '0.5rem',
+    border: `1px solid ${vars.colors.borderDefault}`,
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+    minWidth: '2.5rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ':disabled': {
+        cursor: 'not-allowed',
+        opacity: 0.5,
+    },
+});
+export const pageButtonVariants = styleVariants({
+    default: {
+        color: vars.colors.textPrimary,
+        ':hover': {
+            backgroundColor: vars.colors.buttonBackgroundSecondary,
+        },
+    },
+    active: {
+        backgroundColor: vars.colors.buttonBackgroundPrimary,
+        color: vars.colors.buttonTextPrimary,
+        borderColor: vars.colors.buttonBackgroundPrimary,
+        ':hover': {
+            backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
+        },
+    },
+});
+export const ellipsis = styleWithLayer({
+    padding: '0.5rem',
+    color: vars.colors.textPrimary,
+    userSelect: 'none',
+});

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export type PopoverPosition = 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+export type PopoverTriggerType = 'click' | 'hover';
+export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    position?: PopoverPosition;
+    title?: string;
+    footer?: React.ReactNode;
+    showArrow?: boolean;
+    triggerType?: PopoverTriggerType;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+}
+declare const Popover: ({ trigger, children, position, title, footer, showArrow, triggerType, closeOnClickOutside, closeOnEscape, defaultOpen, onOpenChange, className, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export default Popover;

package/dist/components/Popover/Popover.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useState, useRef, useEffect } from 'react';
+import { popoverContainer, popoverTrigger, popoverContent, popoverPositionVariants, popoverArrow, popoverArrowPositionVariants, popoverHeader, popoverTitle, popoverCloseButton, popoverBody, popoverFooter, } from './styles.css';
+import Box from '../Box';
+const Popover = ({ trigger, children, position = 'bottom', title, footer, showArrow = true, triggerType = 'click', closeOnClickOutside = true, closeOnEscape = true, defaultOpen = false, onOpenChange, className, ...props }) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        onOpenChange?.(isOpen);
+    }, [isOpen, onOpenChange]);
+    useEffect(() => {
+        if (!closeOnClickOutside)
+            return;
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen, closeOnClickOutside]);
+    useEffect(() => {
+        if (!closeOnEscape)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape' && isOpen) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [isOpen, closeOnEscape]);
+    const handleTriggerClick = () => {
+        if (triggerType === 'click') {
+            setIsOpen(!isOpen);
+        }
+    };
+    const handleTriggerMouseEnter = () => {
+        if (triggerType === 'hover') {
+            setIsOpen(true);
+        }
+    };
+    const handleTriggerMouseLeave = () => {
+        if (triggerType === 'hover') {
+            setIsOpen(false);
+        }
+    };
+    return (_jsxs(Box, { ref: containerRef, className: clsx(popoverContainer, className), onMouseEnter: handleTriggerMouseEnter, onMouseLeave: handleTriggerMouseLeave, ...props, children: [_jsx(Box, { className: popoverTrigger, onClick: handleTriggerClick, "aria-expanded": isOpen, children: trigger }), isOpen && (_jsxs(Box, { className: clsx(popoverContent, popoverPositionVariants[position]), role: "dialog", "aria-modal": "false", children: [showArrow && (_jsx(Box, { as: "span", className: clsx(popoverArrow, popoverArrowPositionVariants[position]) })), (title || triggerType === 'click') && (_jsxs(Box, { as: "div", className: popoverHeader, children: [title && (_jsx(Box, { as: "h3", className: popoverTitle, children: title })), triggerType === 'click' && (_jsx(Box, { as: "button", className: popoverCloseButton, onClick: () => setIsOpen(false), "aria-label": "Close popover", type: "button", children: "\u00D7" }))] })), _jsx(Box, { as: "div", className: popoverBody, children: children }), footer && (_jsx(Box, { as: "div", className: popoverFooter, children: footer }))] }))] }));
+};
+export default Popover;

package/dist/components/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Popover } from './Popover';
+export type { PopoverProps, PopoverPosition, PopoverTriggerType } from './Popover';

package/dist/components/Popover/index.js

@@ -0,0 +1 @@
+export { default as Popover } from './Popover';