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

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

@@ -1,146 +0,0 @@
-import { keyframes, styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const slideInFromLeft = keyframes({
-    from: {
-        transform: 'translateX(-100%)'
-    },
-    to: {
-        transform: 'translateX(0)'
-    }
-});
-const slideInFromRight = keyframes({
-    from: {
-        transform: 'translateX(100%)'
-    },
-    to: {
-        transform: 'translateX(0)'
-    }
-});
-const slideInFromTop = keyframes({
-    from: {
-        transform: 'translateY(-100%)'
-    },
-    to: {
-        transform: 'translateY(0)'
-    }
-});
-const slideInFromBottom = keyframes({
-    from: {
-        transform: 'translateY(100%)'
-    },
-    to: {
-        transform: 'translateY(0)'
-    }
-});
-const fadeIn = keyframes({
-    from: {
-        opacity: 0
-    },
-    to: {
-        opacity: 1
-    }
-});
-const drawerPositionVariants = styleVariants({
-    left: {
-        top: 0,
-        left: 0,
-        bottom: 0,
-        width: 'var(--drawer-width, 300px)',
-        maxWidth: '100vw',
-        animation: `${slideInFromLeft} 0.3s ease-out`
-    },
-    right: {
-        top: 0,
-        right: 0,
-        bottom: 0,
-        width: 'var(--drawer-width, 300px)',
-        maxWidth: '100vw',
-        animation: `${slideInFromRight} 0.3s ease-out`
-    },
-    top: {
-        top: 0,
-        left: 0,
-        right: 0,
-        height: 'var(--drawer-height, 300px)',
-        maxHeight: '100vh',
-        animation: `${slideInFromTop} 0.3s ease-out`
-    },
-    bottom: {
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: 'var(--drawer-height, 300px)',
-        maxHeight: '100vh',
-        animation: `${slideInFromBottom} 0.3s ease-out`
-    }
-});
-const drawerOverlay = styleWithLayer({
-    position: 'fixed',
-    inset: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    animation: `${fadeIn} 0.2s ease-out`,
-    zIndex: 40
-});
-const drawer = styleWithLayer({
-    position: 'fixed',
-    background: vars.colors.backgroundDefault,
-    boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-    zIndex: 50,
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'hidden'
-});
-const drawerHeader = styleWithLayer({
-    padding: '1.25rem',
-    borderBottom: `1px solid ${vars.colors.borderMuted}`,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: '1rem'
-});
-const drawerTitle = styleWithLayer({
-    fontFamily: vars.fontFamily.heading,
-    fontSize: '1.25rem',
-    fontWeight: '600',
-    color: vars.colors.textPrimary,
-    margin: 0
-});
-const drawerCloseButton = 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(--drawer-focus-ring, currentColor)',
-            outlineOffset: '2px'
-        }
-    }
-});
-const drawerBody = styleWithLayer({
-    padding: '1.25rem',
-    overflowY: 'auto',
-    flex: 1
-});
-const drawerFooter = styleWithLayer({
-    padding: '1.25rem',
-    borderTop: `1px solid ${vars.colors.borderMuted}`,
-    display: 'flex',
-    gap: '0.75rem',
-    justifyContent: 'flex-end',
-    alignItems: 'center'
-});
-export { drawer, drawerBody, drawerCloseButton, drawerFooter, drawerHeader, drawerOverlay, drawerPositionVariants, drawerTitle };

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-export type DropdownMenuPosition = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
-export type DropdownMenuItemVariant = 'default' | 'destructive' | 'disabled';
-export interface DropdownMenuItemProps {
-    label: string;
-    onClick?: () => void;
-    variant?: DropdownMenuItemVariant;
-    icon?: React.ReactNode;
-    disabled?: boolean;
-}
-export interface DropdownMenuGroupProps {
-    label?: string;
-    items: DropdownMenuItemProps[];
-}
-export interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
-    trigger: React.ReactNode;
-    items?: DropdownMenuItemProps[];
-    groups?: DropdownMenuGroupProps[];
-    position?: DropdownMenuPosition;
-    closeOnItemClick?: boolean;
-}
-declare const DropdownMenu: ({ trigger, items, groups, position, closeOnItemClick, className, ...props }: DropdownMenuProps) => React.JSX.Element;
-export default DropdownMenu;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,98 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import react, { useEffect, useRef, useState } from "react";
-import { dropdownMenuContainer, dropdownMenuContent, dropdownMenuGroup, dropdownMenuItem, dropdownMenuItemVariants, dropdownMenuLabel, dropdownMenuPositionVariants, dropdownMenuSeparator, dropdownMenuTrigger } from "./styles.css.js";
-import Box from "../Box/index.js";
-const DropdownMenu = ({ trigger, items = [], groups = [], position = 'bottomLeft', closeOnItemClick = true, className, ...props })=>{
-    const [isOpen, setIsOpen] = useState(false);
-    const containerRef = useRef(null);
-    useEffect(()=>{
-        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
-    ]);
-    useEffect(()=>{
-        const handleEscape = (e)=>{
-            if ('Escape' === e.key && isOpen) setIsOpen(false);
-        };
-        document.addEventListener('keydown', handleEscape);
-        return ()=>document.removeEventListener('keydown', handleEscape);
-    }, [
-        isOpen
-    ]);
-    const handleItemClick = (item)=>{
-        if (item.disabled || 'disabled' === item.variant) return;
-        item.onClick?.();
-        if (closeOnItemClick) setIsOpen(false);
-    };
-    const renderItem = (item, index)=>/*#__PURE__*/ jsxs(Box, {
-            as: "button",
-            className: clsx(dropdownMenuItem, dropdownMenuItemVariants[item.disabled || 'disabled' === item.variant ? 'disabled' : item.variant || 'default']),
-            onClick: ()=>handleItemClick(item),
-            disabled: item.disabled || 'disabled' === item.variant,
-            role: "menuitem",
-            type: "button",
-            children: [
-                item.icon && /*#__PURE__*/ jsx("span", {
-                    children: item.icon
-                }),
-                item.label
-            ]
-        }, index);
-    const renderGroup = (group, index)=>/*#__PURE__*/ jsxs(Box, {
-            className: dropdownMenuGroup,
-            role: "group",
-            children: [
-                group.label && /*#__PURE__*/ jsx(Box, {
-                    as: "div",
-                    className: dropdownMenuLabel,
-                    role: "presentation",
-                    children: group.label
-                }),
-                group.items.map((item, itemIndex)=>renderItem(item, itemIndex))
-            ]
-        }, index);
-    return /*#__PURE__*/ jsxs(Box, {
-        ref: containerRef,
-        className: clsx(dropdownMenuContainer, className),
-        ...props,
-        children: [
-            /*#__PURE__*/ jsx(Box, {
-                className: dropdownMenuTrigger,
-                onClick: ()=>setIsOpen(!isOpen),
-                "aria-expanded": isOpen,
-                "aria-haspopup": "true",
-                children: trigger
-            }),
-            isOpen && /*#__PURE__*/ jsxs(Box, {
-                className: clsx(dropdownMenuContent, dropdownMenuPositionVariants[position]),
-                role: "menu",
-                "aria-orientation": "vertical",
-                children: [
-                    items.length > 0 && /*#__PURE__*/ jsx(Box, {
-                        className: dropdownMenuGroup,
-                        children: items.map((item, index)=>renderItem(item, index))
-                    }),
-                    groups.map((group, index)=>/*#__PURE__*/ jsxs(react.Fragment, {
-                            children: [
-                                index > 0 && /*#__PURE__*/ jsx(Box, {
-                                    as: "div",
-                                    className: dropdownMenuSeparator,
-                                    role: "separator"
-                                }),
-                                renderGroup(group, index)
-                            ]
-                        }, index))
-                ]
-            })
-        ]
-    });
-};
-const DropdownMenu_DropdownMenu = DropdownMenu;
-export { DropdownMenu_DropdownMenu as default };

package/dist/components/DropdownMenu/index.js

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

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

@@ -1,9 +0,0 @@
-export declare const dropdownMenuContainer: string;
-export declare const dropdownMenuTrigger: string;
-export declare const dropdownMenuContent: string;
-export declare const dropdownMenuPositionVariants: Record<"bottomLeft" | "bottomRight" | "topLeft" | "topRight", string>;
-export declare const dropdownMenuItem: string;
-export declare const dropdownMenuItemVariants: Record<"default" | "disabled" | "destructive", string>;
-export declare const dropdownMenuSeparator: string;
-export declare const dropdownMenuGroup: string;
-export declare const dropdownMenuLabel: string;

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

@@ -1,94 +0,0 @@
-import { styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const dropdownMenuContainer = styleWithLayer({
-    position: 'relative',
-    display: 'inline-block'
-});
-const dropdownMenuTrigger = styleWithLayer({
-    cursor: 'pointer',
-    userSelect: 'none'
-});
-const dropdownMenuContent = styleWithLayer({
-    position: 'absolute',
-    backgroundColor: vars.colors.backgroundDefault,
-    border: `1px solid ${vars.colors.borderDefault}`,
-    borderRadius: '0.5rem',
-    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-    minWidth: '160px',
-    zIndex: 50,
-    overflow: 'hidden',
-    marginTop: '0.25rem'
-});
-const dropdownMenuPositionVariants = styleVariants({
-    bottomLeft: {
-        top: '100%',
-        left: 0
-    },
-    bottomRight: {
-        top: '100%',
-        right: 0
-    },
-    topLeft: {
-        bottom: '100%',
-        left: 0,
-        marginTop: 0,
-        marginBottom: '0.25rem'
-    },
-    topRight: {
-        bottom: '100%',
-        right: 0,
-        marginTop: 0,
-        marginBottom: '0.25rem'
-    }
-});
-const dropdownMenuItem = styleWithLayer({
-    padding: '0.75rem 1rem',
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.5rem',
-    fontSize: '14px',
-    color: vars.colors.textPrimary,
-    transition: 'background-color 0.15s ease',
-    ':hover': {
-        backgroundColor: vars.colors.backgroundMuted
-    },
-    ':focus-visible': {
-        outline: 'none',
-        backgroundColor: vars.colors.backgroundMuted
-    }
-});
-const dropdownMenuItemVariants = styleVariants({
-    default: {},
-    destructive: {
-        color: vars.colors.alertErrorText,
-        ':hover': {
-            backgroundColor: vars.colors.alertErrorBackground
-        }
-    },
-    disabled: {
-        opacity: 0.5,
-        cursor: 'not-allowed',
-        ':hover': {
-            backgroundColor: 'transparent'
-        }
-    }
-});
-const dropdownMenuSeparator = styleWithLayer({
-    height: '1px',
-    backgroundColor: vars.colors.borderMuted,
-    margin: '0.5rem 0'
-});
-const dropdownMenuGroup = styleWithLayer({
-    padding: '0.5rem 0'
-});
-const dropdownMenuLabel = styleWithLayer({
-    padding: '0.5rem 1rem',
-    fontSize: '12px',
-    fontWeight: '600',
-    color: vars.colors.textSecondary,
-    textTransform: 'uppercase',
-    letterSpacing: '0.05em'
-});
-export { dropdownMenuContainer, dropdownMenuContent, dropdownMenuGroup, dropdownMenuItem, dropdownMenuItemVariants, dropdownMenuLabel, dropdownMenuPositionVariants, dropdownMenuSeparator, dropdownMenuTrigger };

package/dist/components/EmptyState/EmptyState.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export interface EmptyStateProps {
-    icon?: React.ReactNode;
-    title?: string;
-    description?: string;
-    action?: React.ReactNode;
-    className?: string;
-}
-declare const EmptyState: ({ icon, title, description, action, className, }: EmptyStateProps) => React.JSX.Element;
-export default EmptyState;

package/dist/components/EmptyState/EmptyState.js

@@ -1,32 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import "react";
-import { emptyState, emptyStateAction, emptyStateDescription, emptyStateIcon, emptyStateTitle } from "./styles.css.js";
-import Box from "../Box/index.js";
-const EmptyState = ({ icon, title, description, action, className })=>/*#__PURE__*/ jsxs(Box, {
-        className: clsx(emptyState, className),
-        role: "status",
-        children: [
-            icon && /*#__PURE__*/ jsx(Box, {
-                className: emptyStateIcon,
-                "aria-hidden": "true",
-                children: icon
-            }),
-            title && /*#__PURE__*/ jsx(Box, {
-                as: "h3",
-                className: emptyStateTitle,
-                children: title
-            }),
-            description && /*#__PURE__*/ jsx(Box, {
-                as: "p",
-                className: emptyStateDescription,
-                children: description
-            }),
-            action && /*#__PURE__*/ jsx(Box, {
-                className: emptyStateAction,
-                children: action
-            })
-        ]
-    });
-const EmptyState_EmptyState = EmptyState;
-export { EmptyState_EmptyState as default };

package/dist/components/EmptyState/index.js

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

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

@@ -1,5 +0,0 @@
-export declare const emptyState: string;
-export declare const emptyStateIcon: string;
-export declare const emptyStateTitle: string;
-export declare const emptyStateDescription: string;
-export declare const emptyStateAction: string;

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

@@ -1,31 +0,0 @@
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const emptyState = styleWithLayer({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '2rem',
-    textAlign: 'center'
-});
-const emptyStateIcon = styleWithLayer({
-    fontSize: '48px',
-    marginBottom: '1rem',
-    color: vars.colors.textSecondary
-});
-const emptyStateTitle = styleWithLayer({
-    fontSize: '18px',
-    fontWeight: '600',
-    color: vars.colors.textPrimary,
-    margin: '0 0 0.5rem 0'
-});
-const emptyStateDescription = styleWithLayer({
-    fontSize: '14px',
-    color: vars.colors.textSecondary,
-    margin: '0 0 1rem 0',
-    maxWidth: '400px'
-});
-const emptyStateAction = styleWithLayer({
-    marginTop: '0.5rem'
-});
-export { emptyState, emptyStateAction, emptyStateDescription, emptyStateIcon, emptyStateTitle };

package/dist/components/FileUpload/FileUpload.d.ts

@@ -1,27 +0,0 @@
-import React from 'react';
-export interface FileUploadFile {
-    id: string;
-    file: File;
-    name: string;
-    size: number;
-    progress: number;
-    status: 'uploading' | 'success' | 'error';
-    errorMessage?: string;
-}
-export interface FileUploadProps extends React.HTMLAttributes<HTMLDivElement> {
-    label?: string;
-    files?: FileUploadFile[];
-    onFilesChange?: (files: FileUploadFile[]) => void;
-    onFileAdd?: (files: File[]) => void;
-    onFileRemove?: (fileId: string) => void;
-    accept?: string;
-    multiple?: boolean;
-    maxFileSize?: number;
-    maxFiles?: number;
-    disabled?: boolean;
-    dropzoneText?: string;
-    hint?: string;
-    showProgress?: boolean;
-}
-declare const FileUpload: ({ label, files, onFilesChange, onFileAdd, onFileRemove, accept, multiple, maxFileSize, maxFiles, disabled, dropzoneText, hint, showProgress, className, ...props }: FileUploadProps) => React.JSX.Element;
-export default FileUpload;