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

package/dist/components/Pagination/Pagination.js

@@ -1,70 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import "react";
-import { ellipsis, pageButton, pageButtonVariants, paginationContainer } from "./styles.css.js";
-import Box from "../Box/index.js";
-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 (1 !== i && 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 /*#__PURE__*/ jsxs(Box, {
-        className: paginationContainer,
-        children: [
-            showFirstLast && /*#__PURE__*/ jsx(Box, {
-                as: "button",
-                className: clsx(pageButton, pageButtonVariants["default"]),
-                onClick: ()=>onPageChange(1),
-                disabled: 1 === currentPage,
-                children: '<<'
-            }),
-            showPrevNext && /*#__PURE__*/ jsx(Box, {
-                as: "button",
-                className: clsx(pageButton, pageButtonVariants["default"]),
-                onClick: ()=>onPageChange(currentPage - 1),
-                disabled: 1 === currentPage,
-                children: '<'
-            }),
-            pages.map((page, index)=>'number' == typeof page ? /*#__PURE__*/ jsx(Box, {
-                    as: "button",
-                    className: clsx(pageButton, page === currentPage ? pageButtonVariants.active : pageButtonVariants["default"]),
-                    onClick: ()=>onPageChange(page),
-                    children: page
-                }, `page-${page}`) : /*#__PURE__*/ jsx(Box, {
-                    className: ellipsis,
-                    children: "..."
-                }, `${page}-${index}`)),
-            showPrevNext && /*#__PURE__*/ jsx(Box, {
-                as: "button",
-                className: clsx(pageButton, pageButtonVariants["default"]),
-                onClick: ()=>onPageChange(currentPage + 1),
-                disabled: currentPage === totalPages,
-                children: '>'
-            }),
-            showFirstLast && /*#__PURE__*/ jsx(Box, {
-                as: "button",
-                className: clsx(pageButton, pageButtonVariants["default"]),
-                onClick: ()=>onPageChange(totalPages),
-                disabled: currentPage === totalPages,
-                children: '>>'
-            })
-        ]
-    });
-};
-const Pagination_Pagination = Pagination;
-export { Pagination_Pagination as default };

package/dist/components/Pagination/index.js

@@ -1,2 +0,0 @@
-import Pagination from "./Pagination.js";
-export { 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,45 +0,0 @@
-import { styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const paginationContainer = styleWithLayer({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.5rem'
-});
-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
-    }
-});
-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
-        }
-    }
-});
-const ellipsis = styleWithLayer({
-    padding: '0.5rem',
-    color: vars.colors.textPrimary,
-    userSelect: 'none'
-});
-export { ellipsis, pageButton, pageButtonVariants, paginationContainer };

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

@@ -1,18 +0,0 @@
-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) => React.JSX.Element;
-export default Popover;

package/dist/components/Popover/Popover.js

@@ -1,105 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
-import { popoverArrow, popoverArrowPositionVariants, popoverBody, popoverCloseButton, popoverContainer, popoverContent, popoverFooter, popoverHeader, popoverPositionVariants, popoverTitle, popoverTrigger } from "./styles.css.js";
-import Box from "../Box/index.js";
-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 ('Escape' === e.key && isOpen) setIsOpen(false);
-        };
-        document.addEventListener('keydown', handleEscape);
-        return ()=>document.removeEventListener('keydown', handleEscape);
-    }, [
-        isOpen,
-        closeOnEscape
-    ]);
-    const handleTriggerClick = ()=>{
-        if ('click' === triggerType) setIsOpen(!isOpen);
-    };
-    const handleTriggerMouseEnter = ()=>{
-        if ('hover' === triggerType) setIsOpen(true);
-    };
-    const handleTriggerMouseLeave = ()=>{
-        if ('hover' === triggerType) setIsOpen(false);
-    };
-    return /*#__PURE__*/ jsxs(Box, {
-        ref: containerRef,
-        className: clsx(popoverContainer, className),
-        onMouseEnter: handleTriggerMouseEnter,
-        onMouseLeave: handleTriggerMouseLeave,
-        ...props,
-        children: [
-            /*#__PURE__*/ jsx(Box, {
-                className: popoverTrigger,
-                onClick: handleTriggerClick,
-                "aria-expanded": isOpen,
-                children: trigger
-            }),
-            isOpen && /*#__PURE__*/ jsxs(Box, {
-                className: clsx(popoverContent, popoverPositionVariants[position]),
-                role: "dialog",
-                "aria-modal": "false",
-                children: [
-                    showArrow && /*#__PURE__*/ jsx(Box, {
-                        as: "span",
-                        className: clsx(popoverArrow, popoverArrowPositionVariants[position])
-                    }),
-                    (title || 'click' === triggerType) && /*#__PURE__*/ jsxs(Box, {
-                        as: "div",
-                        className: popoverHeader,
-                        children: [
-                            title && /*#__PURE__*/ jsx(Box, {
-                                as: "h3",
-                                className: popoverTitle,
-                                children: title
-                            }),
-                            'click' === triggerType && /*#__PURE__*/ jsx(Box, {
-                                as: "button",
-                                className: popoverCloseButton,
-                                onClick: ()=>setIsOpen(false),
-                                "aria-label": "Close popover",
-                                type: "button",
-                                children: "\xd7"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx(Box, {
-                        as: "div",
-                        className: popoverBody,
-                        children: children
-                    }),
-                    footer && /*#__PURE__*/ jsx(Box, {
-                        as: "div",
-                        className: popoverFooter,
-                        children: footer
-                    })
-                ]
-            })
-        ]
-    });
-};
-const Popover_Popover = Popover;
-export { Popover_Popover as default };

package/dist/components/Popover/index.js

@@ -1,2 +0,0 @@
-import Popover from "./Popover.js";
-export { 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" | "bottomLeft" | "bottomRight" | "topLeft" | "topRight", string>;
-export declare const popoverArrow: string;
-export declare const popoverArrowPositionVariants: Record<"bottom" | "left" | "right" | "top" | "bottomLeft" | "bottomRight" | "topLeft" | "topRight", 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;

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

@@ -1,192 +0,0 @@
-import { keyframes, styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const fadeIn = keyframes({
-    from: {
-        opacity: 0,
-        transform: 'scale(0.95)'
-    },
-    to: {
-        opacity: 1,
-        transform: 'scale(1)'
-    }
-});
-const popoverContainer = styleWithLayer({
-    position: 'relative',
-    display: 'inline-block'
-});
-const popoverTrigger = styleWithLayer({
-    cursor: 'pointer'
-});
-const popoverContent = styleWithLayer({
-    position: 'absolute',
-    backgroundColor: vars.colors.backgroundDefault,
-    border: `1px solid ${vars.colors.borderDefault}`,
-    borderRadius: '0.75rem',
-    boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-    zIndex: 50,
-    padding: '1rem',
-    minWidth: '200px',
-    maxWidth: '400px',
-    animation: `${fadeIn} 0.15s ease-out`
-});
-const popoverPositionVariants = styleVariants({
-    top: {
-        bottom: '100%',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        marginBottom: '0.5rem'
-    },
-    bottom: {
-        top: '100%',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        marginTop: '0.5rem'
-    },
-    left: {
-        right: '100%',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        marginRight: '0.5rem'
-    },
-    right: {
-        left: '100%',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        marginLeft: '0.5rem'
-    },
-    topLeft: {
-        bottom: '100%',
-        right: 0,
-        marginBottom: '0.5rem'
-    },
-    topRight: {
-        bottom: '100%',
-        left: 0,
-        marginBottom: '0.5rem'
-    },
-    bottomLeft: {
-        top: '100%',
-        right: 0,
-        marginTop: '0.5rem'
-    },
-    bottomRight: {
-        top: '100%',
-        left: 0,
-        marginTop: '0.5rem'
-    }
-});
-const popoverArrow = styleWithLayer({
-    position: 'absolute',
-    width: '8px',
-    height: '8px',
-    backgroundColor: vars.colors.backgroundDefault,
-    border: `1px solid ${vars.colors.borderDefault}`,
-    transform: 'rotate(45deg)'
-});
-const popoverArrowPositionVariants = styleVariants({
-    top: {
-        bottom: '-5px',
-        left: '50%',
-        transform: 'translateX(-50%) rotate(45deg)',
-        borderTop: 'none',
-        borderLeft: 'none'
-    },
-    bottom: {
-        top: '-5px',
-        left: '50%',
-        transform: 'translateX(-50%) rotate(45deg)',
-        borderBottom: 'none',
-        borderRight: 'none'
-    },
-    left: {
-        right: '-5px',
-        top: '50%',
-        transform: 'translateY(-50%) rotate(45deg)',
-        borderLeft: 'none',
-        borderBottom: 'none'
-    },
-    right: {
-        left: '-5px',
-        top: '50%',
-        transform: 'translateY(-50%) rotate(45deg)',
-        borderRight: 'none',
-        borderTop: 'none'
-    },
-    topLeft: {
-        bottom: '-5px',
-        right: '1rem',
-        transform: 'rotate(45deg)',
-        borderTop: 'none',
-        borderLeft: 'none'
-    },
-    topRight: {
-        bottom: '-5px',
-        left: '1rem',
-        transform: 'rotate(45deg)',
-        borderTop: 'none',
-        borderLeft: 'none'
-    },
-    bottomLeft: {
-        top: '-5px',
-        right: '1rem',
-        transform: 'rotate(45deg)',
-        borderBottom: 'none',
-        borderRight: 'none'
-    },
-    bottomRight: {
-        top: '-5px',
-        left: '1rem',
-        transform: 'rotate(45deg)',
-        borderBottom: 'none',
-        borderRight: 'none'
-    }
-});
-const popoverHeader = styleWithLayer({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: '0.75rem',
-    paddingBottom: '0.75rem',
-    borderBottom: `1px solid ${vars.colors.borderMuted}`
-});
-const popoverTitle = styleWithLayer({
-    fontFamily: vars.fontFamily.heading,
-    fontSize: '1rem',
-    fontWeight: '600',
-    color: vars.colors.textPrimary,
-    margin: 0
-});
-const popoverCloseButton = styleWithLayer({
-    background: 'none',
-    border: 'none',
-    padding: '0.25rem',
-    cursor: 'pointer',
-    borderRadius: '0.25rem',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: vars.colors.textSecondary,
-    fontSize: '1.25rem',
-    lineHeight: '1',
-    marginLeft: '0.5rem',
-    transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out',
-    ':hover': {
-        backgroundColor: vars.colors.borderMuted,
-        color: vars.colors.textPrimary
-    }
-});
-const popoverBody = styleWithLayer({
-    fontSize: '14px',
-    color: vars.colors.textPrimary,
-    lineHeight: '1.5'
-});
-const popoverFooter = styleWithLayer({
-    display: 'flex',
-    gap: '0.5rem',
-    justifyContent: 'flex-end',
-    marginTop: '0.75rem',
-    paddingTop: '0.75rem',
-    borderTop: `1px solid ${vars.colors.borderMuted}`
-});
-export { popoverArrow, popoverArrowPositionVariants, popoverBody, popoverCloseButton, popoverContainer, popoverContent, popoverFooter, popoverHeader, popoverPositionVariants, popoverTitle, popoverTrigger };

package/dist/components/Progress/Progress.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-type ProgressProps = {
-    value: number;
-    max?: number;
-    label?: string;
-    showPercentage?: boolean;
-    variant?: 'default' | 'success' | 'warning' | 'error';
-    className?: string;
-};
-declare const Progress: ({ value, max, label, showPercentage, variant, className, }: ProgressProps) => React.JSX.Element;
-export default Progress;

package/dist/components/Progress/Progress.js

@@ -1,55 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import "react";
-import { progress, progressBar, progressFill, progressLabel } from "./styles.css.js";
-import Box from "../Box/index.js";
-const Progress = ({ value, max = 100, label, showPercentage = false, variant = 'default', className })=>{
-    const percentage = Math.min(Math.max(value / max * 100, 0), 100);
-    return /*#__PURE__*/ jsxs(Box, {
-        className: clsx(progress, className),
-        width: "100%",
-        children: [
-            (label || showPercentage) && /*#__PURE__*/ jsxs(Box, {
-                className: progressLabel,
-                display: "flex",
-                justifyContent: "space-between",
-                fontSize: "12px",
-                fontWeight: "500",
-                color: "c5-600",
-                marginBottom: "small",
-                fontFamily: "body",
-                children: [
-                    label && /*#__PURE__*/ jsx(Box, {
-                        as: "span",
-                        children: label
-                    }),
-                    showPercentage && /*#__PURE__*/ jsxs(Box, {
-                        as: "span",
-                        children: [
-                            percentage,
-                            "%"
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(Box, {
-                as: "div",
-                className: progressBar[variant],
-                role: "progressbar",
-                "aria-valuenow": value,
-                "aria-valuemin": 0,
-                "aria-valuemax": max,
-                children: /*#__PURE__*/ jsx(Box, {
-                    as: "div",
-                    className: progressFill[variant],
-                    style: {
-                        width: `${percentage}%`
-                    },
-                    role: "presentation"
-                })
-            })
-        ]
-    });
-};
-const Progress_Progress = Progress;
-export { Progress_Progress as default };

package/dist/components/Progress/index.js

@@ -1,2 +0,0 @@
-import Progress from "./Progress.js";
-export { Progress };

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

@@ -1,4 +0,0 @@
-export declare const progress: string;
-export declare const progressBar: Record<"default" | "success" | "warning" | "error", string>;
-export declare const progressFill: Record<"default" | "success" | "warning" | "error", string>;
-export declare const progressLabel: string;

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

@@ -1,72 +0,0 @@
-import { styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const progress = styleWithLayer({
-    width: '100%'
-});
-const progressBar = styleVariants({
-    default: {
-        width: '100%',
-        height: '8px',
-        backgroundColor: vars.colors.backgroundMuted,
-        borderRadius: '4px',
-        overflow: 'hidden'
-    },
-    success: {
-        width: '100%',
-        height: '8px',
-        backgroundColor: vars.colors.alertSuccessBackground,
-        borderRadius: '4px',
-        overflow: 'hidden'
-    },
-    warning: {
-        width: '100%',
-        height: '8px',
-        backgroundColor: vars.colors.alertWarningBackground,
-        borderRadius: '4px',
-        overflow: 'hidden'
-    },
-    error: {
-        width: '100%',
-        height: '8px',
-        backgroundColor: vars.colors.alertErrorBackground,
-        borderRadius: '4px',
-        overflow: 'hidden'
-    }
-});
-const progressFill = styleVariants({
-    default: {
-        height: '100%',
-        borderRadius: '4px',
-        transition: 'width 0.3s ease',
-        backgroundColor: vars.colors.buttonBackgroundPrimary
-    },
-    success: {
-        height: '100%',
-        borderRadius: '4px',
-        transition: 'width 0.3s ease',
-        backgroundColor: vars.colors.alertSuccessBorder
-    },
-    warning: {
-        height: '100%',
-        borderRadius: '4px',
-        transition: 'width 0.3s ease',
-        backgroundColor: vars.colors.alertWarningBorder
-    },
-    error: {
-        height: '100%',
-        borderRadius: '4px',
-        transition: 'width 0.3s ease',
-        backgroundColor: vars.colors.alertErrorBorder
-    }
-});
-const progressLabel = styleWithLayer({
-    display: 'flex',
-    justifyContent: 'space-between',
-    fontSize: '12px',
-    fontWeight: '500',
-    color: vars.colors.textSecondary,
-    marginBottom: '4px',
-    fontFamily: vars.fontFamily.body
-});
-export { progress, progressBar, progressFill, progressLabel };

package/dist/components/Radio/Radio.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-type RadioGroupProps = {
-    children: React.ReactNode;
-    name: string;
-    value?: string;
-    onChange?: (value: string) => void;
-    layout?: 'vertical' | 'horizontal';
-    className?: string;
-};
-declare const RadioComponent: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type"> & {
-    label?: string;
-    value: string;
-} & React.RefAttributes<HTMLInputElement>> & {
-    Group: ({ children, name, value, onChange, layout, className, }: RadioGroupProps) => React.JSX.Element;
-};
-export default RadioComponent;