@jordan-mace/chaser-design-system 1.2.8 → 1.2.9

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

@@ -1,11 +0,0 @@
-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

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type ModalSize = 'small' | 'medium' | 'large' | 'full';
-type ModalPropsType = React.HTMLAttributes<HTMLDialogElement> & {
-    isOpen: boolean;
-    onClose: () => void;
-    title?: string;
-    size?: ModalSize;
-    children?: React.ReactNode;
-    footer?: React.ReactNode;
-    showCloseButton?: boolean;
-};
-export type ModalProps = ModalPropsType & Sprinkles;
-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

@@ -1,35 +0,0 @@
-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

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

package/dist/components/Modal/index.js

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

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

package/dist/components/Navbar/Navbar.js

@@ -1,8 +0,0 @@
-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

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

package/dist/components/Navbar/NavbarItem.js

@@ -1,8 +0,0 @@
-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

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

package/dist/components/Navbar/index.js

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

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

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

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

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

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

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type NumberInputPosition = 'right' | 'left';
-export type NumberInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'min' | 'max'> & Sprinkles & {
-    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

@@ -1,39 +0,0 @@
-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

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

package/dist/components/NumberInput/index.js

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type PaginationProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
-    siblingCount?: number;
-    showFirstLast?: boolean;
-    showPrevNext?: boolean;
-};
-declare const Pagination: ({ currentPage, totalPages, onPageChange, siblingCount, showFirstLast, showPrevNext, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
-export default Pagination;

package/dist/components/Pagination/Pagination.js

@@ -1,50 +0,0 @@
-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, ...props }) => {
-    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();
-    const { className, ...restProps } = props;
-    return (_jsxs(Box, { className: clsx(paginationContainer, className), ...restProps, 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

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

package/dist/components/Pagination/index.js

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type PopoverPosition = 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
-export type PopoverTriggerType = 'click' | 'hover';
-export type PopoverProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    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

@@ -1,56 +0,0 @@
-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

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

package/dist/components/Popover/index.js

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

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

@@ -1,11 +0,0 @@
-export declare const popoverContainer: string;
-export declare const popoverTrigger: string;
-export declare const popoverContent: string;
-export declare const popoverPositionVariants: Record<"bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight", string>;
-export declare const popoverArrow: string;
-export declare const popoverArrowPositionVariants: Record<"bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight", string>;
-export declare const popoverHeader: string;
-export declare const popoverTitle: string;
-export declare const popoverCloseButton: string;
-export declare const popoverBody: string;
-export declare const popoverFooter: string;