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

package/dist/components/Combobox/Combobox.js

@@ -1,171 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
-import { comboboxArrow, comboboxClearButton, comboboxContainer, comboboxDropdown, comboboxErrorMessage, comboboxHint, comboboxInput, comboboxInputVariants, comboboxLabel, comboboxNoResults, comboboxOption, comboboxOptionDisabled, comboboxOptionSelected } from "./styles.css.js";
-import Box from "../Box/index.js";
-const defaultFilterFn = (option, inputValue)=>option.label.toLowerCase().includes(inputValue.toLowerCase());
-const Combobox = ({ label, options, value, onChange, onInputChange, placeholder = 'Search...', hint, error = false, errorMessage, fullWidth = true, clearable = true, disabled = false, filterFn = defaultFilterFn, className, ...props })=>{
-    const [inputValue, setInputValue] = useState('');
-    const [isOpen, setIsOpen] = useState(false);
-    const [highlightedIndex, setHighlightedIndex] = useState(-1);
-    const containerRef = useRef(null);
-    const inputRef = useRef(null);
-    const selectedOption = options.find((opt)=>opt.value === value);
-    useEffect(()=>{
-        if (selectedOption) setInputValue(selectedOption.label);
-        else if (!isOpen) setInputValue('');
-    }, [
-        selectedOption,
-        isOpen
-    ]);
-    const filteredOptions = options.filter((option)=>filterFn(option, inputValue));
-    useEffect(()=>{
-        const handleClickOutside = (event)=>{
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
-                setIsOpen(false);
-                selectedOption ? setInputValue(selectedOption.label) : setInputValue('');
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return ()=>document.removeEventListener('mousedown', handleClickOutside);
-    }, [
-        selectedOption
-    ]);
-    const handleInputChange = (e)=>{
-        const newValue = e.target.value;
-        setInputValue(newValue);
-        setIsOpen(true);
-        setHighlightedIndex(-1);
-        onInputChange?.(newValue);
-        if (!newValue) onChange?.('', null);
-    };
-    const handleOptionClick = (option)=>{
-        if (option.disabled) return;
-        setInputValue(option.label);
-        setIsOpen(false);
-        onChange?.(option.value, option);
-    };
-    const handleClear = (e)=>{
-        e.stopPropagation();
-        setInputValue('');
-        setIsOpen(false);
-        onChange?.('', null);
-        inputRef.current?.focus();
-    };
-    const handleKeyDown = (e)=>{
-        if (disabled) return;
-        switch(e.key){
-            case 'ArrowDown':
-                e.preventDefault();
-                if (!isOpen) setIsOpen(true);
-                setHighlightedIndex((prev)=>prev < filteredOptions.length - 1 ? prev + 1 : prev);
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                setHighlightedIndex((prev)=>prev > 0 ? prev - 1 : prev);
-                break;
-            case 'Enter':
-                e.preventDefault();
-                if (isOpen && highlightedIndex >= 0 && filteredOptions[highlightedIndex]) handleOptionClick(filteredOptions[highlightedIndex]);
-                else setIsOpen(!isOpen);
-                break;
-            case 'Escape':
-                setIsOpen(false);
-                selectedOption ? setInputValue(selectedOption.label) : setInputValue('');
-                break;
-        }
-    };
-    const displayValue = selectedOption && !isOpen ? selectedOption.label : inputValue;
-    return /*#__PURE__*/ jsxs(Box, {
-        className: comboboxContainer,
-        ref: containerRef,
-        width: fullWidth ? '100%' : void 0,
-        children: [
-            label && /*#__PURE__*/ jsx(Box, {
-                as: "label",
-                className: comboboxLabel,
-                children: label
-            }),
-            /*#__PURE__*/ jsxs(Box, {
-                position: "relative",
-                children: [
-                    /*#__PURE__*/ jsx(Box, {
-                        as: "input",
-                        ref: inputRef,
-                        type: "text",
-                        value: displayValue,
-                        onChange: handleInputChange,
-                        onKeyDown: handleKeyDown,
-                        onFocus: ()=>setIsOpen(true),
-                        placeholder: placeholder,
-                        disabled: disabled,
-                        className: clsx(comboboxInput, comboboxInputVariants[error ? 'error' : 'default'], className),
-                        role: "combobox",
-                        "aria-expanded": isOpen,
-                        "aria-autocomplete": "list",
-                        "aria-controls": isOpen ? 'combobox-listbox' : void 0,
-                        "aria-activedescendant": highlightedIndex >= 0 ? `option-${filteredOptions[highlightedIndex]?.value}` : void 0,
-                        ...props
-                    }),
-                    clearable && inputValue && !disabled && /*#__PURE__*/ jsx(Box, {
-                        as: "button",
-                        className: comboboxClearButton,
-                        onClick: handleClear,
-                        type: "button",
-                        "aria-label": "Clear selection",
-                        children: "\xd7"
-                    }),
-                    /*#__PURE__*/ jsx(Box, {
-                        className: comboboxArrow,
-                        "aria-hidden": "true",
-                        children: /*#__PURE__*/ jsx("svg", {
-                            width: "12",
-                            height: "12",
-                            viewBox: "0 0 12 12",
-                            fill: "currentColor",
-                            children: /*#__PURE__*/ jsx("path", {
-                                d: "M6 8L1 3h10z"
-                            })
-                        })
-                    })
-                ]
-            }),
-            isOpen && /*#__PURE__*/ jsx(Box, {
-                as: "ul",
-                id: "combobox-listbox",
-                className: comboboxDropdown,
-                role: "listbox",
-                children: 0 === filteredOptions.length ? /*#__PURE__*/ jsx(Box, {
-                    as: "li",
-                    className: comboboxNoResults,
-                    children: "No results found"
-                }) : filteredOptions.map((option, index)=>/*#__PURE__*/ jsx(Box, {
-                        as: "li",
-                        id: `option-${option.value}`,
-                        className: clsx(comboboxOption, option.value === value && comboboxOptionSelected, option.disabled && comboboxOptionDisabled),
-                        onClick: ()=>handleOptionClick(option),
-                        role: "option",
-                        "aria-selected": option.value === value,
-                        "aria-disabled": option.disabled,
-                        style: {
-                            backgroundColor: index === highlightedIndex ? 'var(--highlight-color, #f3f4f6)' : void 0
-                        },
-                        children: option.label
-                    }, option.value))
-            }),
-            error && errorMessage && /*#__PURE__*/ jsx(Box, {
-                as: "div",
-                className: comboboxErrorMessage,
-                role: "alert",
-                children: errorMessage
-            }),
-            hint && !error && /*#__PURE__*/ jsx(Box, {
-                as: "div",
-                className: comboboxHint,
-                children: hint
-            })
-        ]
-    });
-};
-const Combobox_Combobox = Combobox;
-export { Combobox_Combobox as default };

package/dist/components/Combobox/index.js

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

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

@@ -1,13 +0,0 @@
-export declare const comboboxContainer: string;
-export declare const comboboxInput: string;
-export declare const comboboxInputVariants: Record<"default" | "error", string>;
-export declare const comboboxLabel: string;
-export declare const comboboxDropdown: string;
-export declare const comboboxOption: string;
-export declare const comboboxOptionSelected: string;
-export declare const comboboxOptionDisabled: string;
-export declare const comboboxClearButton: string;
-export declare const comboboxArrow: string;
-export declare const comboboxNoResults: string;
-export declare const comboboxHint: string;
-export declare const comboboxErrorMessage: string;

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

@@ -1,143 +0,0 @@
-import { styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const comboboxContainer = styleWithLayer({
-    position: 'relative',
-    width: '100%'
-});
-const comboboxInput = styleWithLayer({
-    width: '100%',
-    padding: '0.75rem 2.5rem 0.75rem 1rem',
-    fontSize: '14px',
-    fontFamily: vars.fontFamily.body,
-    color: vars.colors.textPrimary,
-    backgroundColor: vars.colors.inputBackground,
-    border: `1px solid ${vars.colors.inputBorder}`,
-    borderRadius: '8px',
-    outline: 'none',
-    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
-        }
-    }
-});
-const comboboxInputVariants = styleVariants({
-    default: {},
-    error: {
-        border: `1px solid ${vars.colors.alertErrorBorder}`,
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.alertErrorBorder}`
-        },
-        ':hover': {
-            borderColor: vars.colors.alertErrorBorder
-        }
-    }
-});
-const comboboxLabel = styleWithLayer({
-    display: 'block',
-    fontSize: '14px',
-    fontWeight: '500',
-    color: vars.colors.textPrimary,
-    marginBottom: '8px'
-});
-const comboboxDropdown = styleWithLayer({
-    position: 'absolute',
-    top: '100%',
-    left: 0,
-    right: 0,
-    backgroundColor: vars.colors.backgroundDefault,
-    border: `1px solid ${vars.colors.borderDefault}`,
-    borderRadius: '8px',
-    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-    maxHeight: '200px',
-    overflowY: 'auto',
-    zIndex: 50,
-    marginTop: '4px'
-});
-const comboboxOption = styleWithLayer({
-    padding: '0.75rem 1rem',
-    cursor: 'pointer',
-    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 comboboxOptionSelected = styleWithLayer({
-    backgroundColor: vars.colors.buttonBackgroundPrimary,
-    color: vars.colors.buttonTextPrimary,
-    ':hover': {
-        backgroundColor: vars.colors.buttonBackgroundFocusedPrimary
-    }
-});
-const comboboxOptionDisabled = styleWithLayer({
-    opacity: 0.5,
-    cursor: 'not-allowed',
-    ':hover': {
-        backgroundColor: 'transparent'
-    }
-});
-const comboboxClearButton = styleWithLayer({
-    position: 'absolute',
-    right: '2.5rem',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    background: 'none',
-    border: 'none',
-    cursor: 'pointer',
-    padding: '0.25rem',
-    color: vars.colors.textSecondary,
-    fontSize: '16px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    ':hover': {
-        color: vars.colors.textPrimary
-    }
-});
-const comboboxArrow = styleWithLayer({
-    position: 'absolute',
-    right: '0.75rem',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    pointerEvents: 'none',
-    color: vars.colors.textSecondary
-});
-const comboboxNoResults = styleWithLayer({
-    padding: '0.75rem 1rem',
-    fontSize: '14px',
-    color: vars.colors.textSecondary,
-    textAlign: 'center'
-});
-const comboboxHint = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.textSecondary,
-    marginTop: '4px'
-});
-const comboboxErrorMessage = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.alertErrorText,
-    marginTop: '4px'
-});
-export { comboboxArrow, comboboxClearButton, comboboxContainer, comboboxDropdown, comboboxErrorMessage, comboboxHint, comboboxInput, comboboxInputVariants, comboboxLabel, comboboxNoResults, comboboxOption, comboboxOptionDisabled, comboboxOptionSelected };

package/dist/components/Container/Container.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
-export interface ContainerProps {
-    size?: ContainerSize;
-    centerContent?: boolean;
-    children?: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-}
-declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLElement>>;
-export default Container;

package/dist/components/Container/Container.js

@@ -1,31 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import Box from "../Box/index.js";
-const sizeMap = {
-    sm: '640px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-    full: '100%'
-};
-const Container = /*#__PURE__*/ forwardRef(({ size = 'lg', centerContent = true, children, className, style }, ref)=>{
-    const sizeValue = size;
-    const containerStyle = {
-        maxWidth: sizeMap[sizeValue],
-        marginLeft: centerContent ? 'auto' : void 0,
-        marginRight: centerContent ? 'auto' : void 0
-    };
-    return /*#__PURE__*/ jsx(Box, {
-        ref: ref,
-        width: "100%",
-        className: className,
-        style: {
-            ...containerStyle,
-            ...style
-        },
-        children: children
-    });
-});
-Container.displayName = 'Container';
-const Container_Container = Container;
-export { Container_Container as default };

package/dist/components/Container/index.js

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

package/dist/components/Divider/Divider.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export type DividerOrientation = 'horizontal' | 'vertical';
-export type DividerSize = 'small' | 'medium' | 'large';
-export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
-    orientation?: DividerOrientation;
-    size?: DividerSize;
-}
-declare const Divider: ({ orientation, size, ...props }: DividerProps) => React.JSX.Element;
-export default Divider;

package/dist/components/Divider/Divider.js

@@ -1,14 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { divider, dividerOrientations, dividerSizes, dividerVerticalSizes } from "./styles.css.js";
-import "react";
-import Box from "../Box/index.js";
-const Divider = ({ orientation = 'horizontal', size = 'medium', ...props })=>/*#__PURE__*/ jsx(Box, {
-        as: "hr",
-        className: clsx(divider, dividerOrientations[orientation], 'vertical' === orientation ? dividerVerticalSizes[size] : dividerSizes[size], props.className),
-        role: "separator",
-        "aria-orientation": orientation,
-        ...props
-    });
-const Divider_Divider = Divider;
-export { Divider_Divider as default };

package/dist/components/Divider/index.js

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

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

@@ -1,4 +0,0 @@
-export declare const dividerOrientations: Record<"horizontal" | "vertical", string>;
-export declare const dividerSizes: Record<"medium" | "large" | "small", string>;
-export declare const divider: string;
-export declare const dividerVerticalSizes: Record<"medium" | "large" | "small", string>;

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

@@ -1,42 +0,0 @@
-import { styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const dividerOrientations = styleVariants({
-    horizontal: {
-        width: '100%',
-        height: '1px',
-        borderTop: `1px solid ${vars.colors.borderMuted}`
-    },
-    vertical: {
-        width: '1px',
-        height: '100%',
-        borderLeft: `1px solid ${vars.colors.borderMuted}`
-    }
-});
-const dividerSizes = styleVariants({
-    small: {
-        margin: '0.5rem 0'
-    },
-    medium: {
-        margin: '1rem 0'
-    },
-    large: {
-        margin: '1.5rem 0'
-    }
-});
-const divider = styleWithLayer({
-    border: 'none',
-    flexShrink: 0
-});
-const dividerVerticalSizes = styleVariants({
-    small: {
-        margin: '0 0.5rem'
-    },
-    medium: {
-        margin: '0 1rem'
-    },
-    large: {
-        margin: '0 1.5rem'
-    }
-});
-export { divider, dividerOrientations, dividerSizes, dividerVerticalSizes };

package/dist/components/Drawer/Drawer.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
-export type DrawerSize = 'small' | 'medium' | 'large' | 'full';
-export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
-    isOpen: boolean;
-    onClose: () => void;
-    title?: string;
-    position?: DrawerPosition;
-    size?: DrawerSize;
-    children?: React.ReactNode;
-    footer?: React.ReactNode;
-    showCloseButton?: boolean;
-    closeOnOverlayClick?: boolean;
-}
-declare const Drawer: ({ isOpen, onClose, title, position, size, children, footer, showCloseButton, closeOnOverlayClick, className, ...props }: DrawerProps) => React.JSX.Element | null;
-export default Drawer;

package/dist/components/Drawer/Drawer.js

@@ -1,113 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useEffect } from "react";
-import { drawer, drawerBody, drawerCloseButton, drawerFooter, drawerHeader, drawerOverlay, drawerPositionVariants, drawerTitle } from "./styles.css.js";
-import Box from "../Box/index.js";
-const sizeMap = {
-    left: {
-        small: '250px',
-        medium: '350px',
-        large: '450px',
-        full: '100vw'
-    },
-    right: {
-        small: '250px',
-        medium: '350px',
-        large: '450px',
-        full: '100vw'
-    },
-    top: {
-        small: '200px',
-        medium: '300px',
-        large: '400px',
-        full: '100vh'
-    },
-    bottom: {
-        small: '200px',
-        medium: '300px',
-        large: '400px',
-        full: '100vh'
-    }
-};
-const Drawer = ({ isOpen, onClose, title, position = 'right', size = 'medium', children, footer, showCloseButton = true, closeOnOverlayClick = true, className, ...props })=>{
-    useEffect(()=>{
-        if (isOpen) document.body.style.overflow = 'hidden';
-        else document.body.style.overflow = '';
-        return ()=>{
-            document.body.style.overflow = '';
-        };
-    }, [
-        isOpen
-    ]);
-    useEffect(()=>{
-        const handleEscape = (e)=>{
-            if ('Escape' === e.key && isOpen) onClose();
-        };
-        document.addEventListener('keydown', handleEscape);
-        return ()=>document.removeEventListener('keydown', handleEscape);
-    }, [
-        isOpen,
-        onClose
-    ]);
-    if (!isOpen) return null;
-    const dimensionStyle = {
-        ['--drawer-width']: [
-            'left',
-            'right'
-        ].includes(position) ? sizeMap[position][size] : void 0,
-        ['--drawer-height']: [
-            'top',
-            'bottom'
-        ].includes(position) ? sizeMap[position][size] : void 0
-    };
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx(Box, {
-                className: drawerOverlay,
-                onClick: closeOnOverlayClick ? onClose : void 0,
-                "aria-hidden": "true"
-            }),
-            /*#__PURE__*/ jsxs(Box, {
-                as: "div",
-                role: "dialog",
-                "aria-modal": "true",
-                className: clsx(drawer, drawerPositionVariants[position], className),
-                style: dimensionStyle,
-                ...props,
-                children: [
-                    title && /*#__PURE__*/ jsxs(Box, {
-                        as: "div",
-                        className: drawerHeader,
-                        children: [
-                            /*#__PURE__*/ jsx(Box, {
-                                as: "h2",
-                                className: drawerTitle,
-                                children: title
-                            }),
-                            showCloseButton && /*#__PURE__*/ jsx(Box, {
-                                as: "button",
-                                className: drawerCloseButton,
-                                onClick: onClose,
-                                "aria-label": "Close drawer",
-                                type: "button",
-                                children: "\xd7"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx(Box, {
-                        as: "div",
-                        className: drawerBody,
-                        children: children
-                    }),
-                    footer && /*#__PURE__*/ jsx(Box, {
-                        as: "div",
-                        className: drawerFooter,
-                        children: footer
-                    })
-                ]
-            })
-        ]
-    });
-};
-const Drawer_Drawer = Drawer;
-export { Drawer_Drawer as default };

package/dist/components/Drawer/index.js

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

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

@@ -1,8 +0,0 @@
-export declare const drawerPositionVariants: Record<"bottom" | "left" | "right" | "top", string>;
-export declare const drawerOverlay: string;
-export declare const drawer: string;
-export declare const drawerHeader: string;
-export declare const drawerTitle: string;
-export declare const drawerCloseButton: string;
-export declare const drawerBody: string;
-export declare const drawerFooter: string;