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

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

@@ -1,100 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const tabsContainer = styleWithLayer({
-    width: '100%',
-});
-export const tabsList = styleWithLayer({
-    display: 'flex',
-    gap: '4px',
-    borderBottom: `2px solid ${vars.colors.borderDefault}`,
-    fontFamily: vars.fontFamily.body,
-});
-export const tabsListHorizontal = styleWithLayer({
-    flexDirection: 'row',
-    overflowX: 'auto',
-});
-export const tabsListVertical = styleWithLayer({
-    flexDirection: 'column',
-    borderBottom: 'none',
-    borderRight: `2px solid ${vars.colors.borderDefault}`,
-});
-export const tabItem = styleVariants({
-    base: {
-        padding: '0.75rem 1.5rem',
-        fontSize: '14px',
-        fontWeight: '500',
-        color: vars.colors.textSecondary,
-        cursor: 'pointer',
-        border: 'none',
-        backgroundColor: 'transparent',
-        whiteSpace: 'nowrap',
-        transition: 'all 0.2s ease',
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-            outlineOffset: '2px',
-        },
-        ':hover:not(:disabled)': {
-            color: vars.colors.textPrimary,
-            backgroundColor: vars.colors.backgroundMuted,
-        },
-        ':disabled': {
-            cursor: 'not-allowed',
-            opacity: 0.5,
-        },
-    },
-    active: {
-        padding: '0.75rem 1.5rem',
-        fontSize: '14px',
-        fontWeight: '500',
-        color: vars.colors.buttonBackgroundPrimary,
-        cursor: 'pointer',
-        border: 'none',
-        backgroundColor: 'transparent',
-        whiteSpace: 'nowrap',
-        transition: 'all 0.2s ease',
-        borderBottom: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-        marginBottom: '-2px',
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-            outlineOffset: '2px',
-        },
-        ':hover:not(:disabled)': {
-            backgroundColor: vars.colors.backgroundMuted,
-        },
-        ':disabled': {
-            cursor: 'not-allowed',
-            opacity: 0.5,
-        },
-    },
-    verticalActive: {
-        padding: '0.75rem 1.5rem',
-        fontSize: '14px',
-        fontWeight: '500',
-        color: vars.colors.buttonBackgroundPrimary,
-        cursor: 'pointer',
-        border: 'none',
-        backgroundColor: 'transparent',
-        whiteSpace: 'nowrap',
-        transition: 'all 0.2s ease',
-        borderRight: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-        marginRight: '-2px',
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-            outlineOffset: '2px',
-        },
-        ':hover:not(:disabled)': {
-            backgroundColor: vars.colors.backgroundMuted,
-        },
-        ':disabled': {
-            cursor: 'not-allowed',
-            opacity: 0.5,
-        },
-    },
-});
-export const tabContent = styleWithLayer({
-    padding: '1.5rem 0',
-    fontFamily: vars.fontFamily.body,
-    fontSize: '14px',
-    color: vars.colors.textPrimary,
-});

package/dist/components/Tag/Tag.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-type TagProps = {
-    children: React.ReactNode;
-    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
-    onRemove?: () => void;
-    removable?: boolean;
-    className?: string;
-};
-type TagGroupProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-declare const TagComponent: (({ children, variant, onRemove, removable, className, }: TagProps) => import("react/jsx-runtime").JSX.Element) & {
-    Group: ({ children, className }: TagGroupProps) => import("react/jsx-runtime").JSX.Element;
-};
-export default TagComponent;

package/dist/components/Tag/Tag.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { tag, removeButton, tagGroup } from './styles.css';
-import Box from '../Box';
-const Tag = ({ children, variant = 'default', onRemove, removable = false, className, }) => {
-    return (_jsxs(Box, { as: "span", className: clsx(tag[variant], className), display: "inline", alignItems: "center", children: [children, removable && (_jsx(Box, { as: "span", onClick: onRemove, className: removeButton, role: "button", tabIndex: 0, "aria-label": "Remove tag", onKeyDown: (e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                        onRemove?.();
-                    }
-                }, children: "\u00D7" }))] }));
-};
-const TagGroup = ({ children, className }) => {
-    return (_jsx(Box, { className: clsx(tagGroup, className), display: "flex", gap: "small", style: { flexWrap: 'wrap' }, children: children }));
-};
-const TagComponent = Object.assign(Tag, {
-    Group: TagGroup,
-});
-export default TagComponent;

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

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

package/dist/components/Tag/index.js

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

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

@@ -1,3 +0,0 @@
-export declare const tag: Record<"default" | "primary" | "base" | "success" | "warning" | "error", string>;
-export declare const removeButton: string;
-export declare const tagGroup: string;

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

@@ -1,93 +0,0 @@
-import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const tag = styleVariants({
-    base: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        padding: '4px 12px',
-        fontSize: '12px',
-        fontWeight: '500',
-        fontFamily: vars.fontFamily.body,
-        borderRadius: '16px',
-        transition: 'all 0.2s ease',
-    },
-    default: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        padding: '4px 12px',
-        fontSize: '12px',
-        fontWeight: '500',
-        fontFamily: vars.fontFamily.body,
-        color: vars.colors.textPrimary,
-        backgroundColor: vars.colors.backgroundMuted,
-        borderRadius: '16px',
-        transition: 'all 0.2s ease',
-    },
-    primary: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        padding: '4px 12px',
-        fontSize: '12px',
-        fontWeight: '500',
-        fontFamily: vars.fontFamily.body,
-        color: vars.colors.buttonTextPrimary,
-        backgroundColor: vars.colors.buttonBackgroundPrimary,
-        borderRadius: '16px',
-        transition: 'all 0.2s ease',
-    },
-    success: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        padding: '4px 12px',
-        fontSize: '12px',
-        fontWeight: '500',
-        fontFamily: vars.fontFamily.body,
-        color: vars.colors.alertSuccessText,
-        backgroundColor: vars.colors.alertSuccessBackground,
-        borderRadius: '16px',
-        transition: 'all 0.2s ease',
-    },
-    warning: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        padding: '4px 12px',
-        fontSize: '12px',
-        fontWeight: '500',
-        fontFamily: vars.fontFamily.body,
-        color: vars.colors.alertWarningText,
-        backgroundColor: vars.colors.alertWarningBackground,
-        borderRadius: '16px',
-        transition: 'all 0.2s ease',
-    },
-    error: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        padding: '4px 12px',
-        fontSize: '12px',
-        fontWeight: '500',
-        fontFamily: vars.fontFamily.body,
-        color: vars.colors.alertErrorText,
-        backgroundColor: vars.colors.alertErrorBackground,
-        borderRadius: '16px',
-        transition: 'all 0.2s ease',
-    },
-});
-export const removeButton = style({
-    cursor: 'pointer',
-    marginLeft: '8px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: vars.colors.textSecondary,
-    fontSize: '16px',
-    lineHeight: '1',
-    ':hover': {
-        color: vars.colors.textPrimary,
-    },
-});
-export const tagGroup = styleWithLayer({
-    display: 'flex',
-    flexWrap: 'wrap',
-    gap: '8px',
-});

package/dist/components/Text/Header.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-type HeaderProps = {
-    variant: 'h1' | 'h2' | 'h3';
-    className?: string;
-    children?: React.ReactNode;
-};
-declare const Header: ({ variant, children, className }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
-export default Header;

package/dist/components/Text/Header.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { heading, text } from './styles.css';
-import Box from '../Box';
-const Header = ({ variant, children, className }) => {
-    return (_jsx(Box, { as: variant, className: clsx(className, text, heading), children: children }));
-};
-export default Header;

package/dist/components/Text/P.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-type PProps = React.HTMLAttributes<HTMLParagraphElement> & {
-    children: React.ReactNode;
-    className?: string;
-};
-declare const P: (props: PProps) => import("react/jsx-runtime").JSX.Element;
-export default P;

package/dist/components/Text/P.js

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

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

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

package/dist/components/Text/index.js

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

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

@@ -1,2 +0,0 @@
-export declare const text: string;
-export declare const heading: string;

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

@@ -1,13 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-export const text = style({
-    color: vars.colors.textPrimary,
-    fontFamily: vars.fontFamily.body,
-    lineHeight: '24px',
-});
-export const heading = style({
-    color: vars.colors.textPrimary,
-    fontFamily: vars.fontFamily.heading,
-    lineHeight: '32px',
-    fontWeight: '700',
-});

package/dist/components/TextArea/TextArea.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
-    label?: string;
-    fullWidth?: boolean;
-};
-declare const TextArea: (props: TextAreaProps) => import("react/jsx-runtime").JSX.Element;
-export default TextArea;

package/dist/components/TextArea/TextArea.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { textAreaStyle, label } from './styles.css';
-import { text } from '../Text/styles.css';
-import Box from '../Box';
-const TextArea = (props) => {
-    return (_jsxs(Box, { display: "flex", flexDirection: { mobile: 'column', tablet: 'row' }, gap: "small", children: [props.label && (_jsx(Box, { as: "label", className: clsx(text, label), marginX: { mobile: 'auto', tablet: 'none' }, marginY: { mobile: 'none', tablet: 'auto' }, htmlFor: props.id, children: props.label })), _jsx(Box, { as: "textarea", className: clsx(textAreaStyle, props.className), width: props.fullWidth ? '100%' : undefined, ...props })] }));
-};
-export default TextArea;

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

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

package/dist/components/TextArea/index.js

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

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

@@ -1,2 +0,0 @@
-export declare const textAreaStyle: string;
-export declare const label: string;

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

@@ -1,10 +0,0 @@
-import { styleWithLayer } from '../../styles/utils';
-export const textAreaStyle = styleWithLayer({
-    padding: '0.5rem 1rem',
-    borderRadius: '0.5rem',
-    minHeight: '100px',
-    resize: 'vertical',
-});
-export const label = styleWithLayer({
-    paddingRight: '0.5rem',
-});

package/dist/components/Toast/Toast.d.ts

@@ -1,34 +0,0 @@
-import { ReactNode } from 'react';
-export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-export type ToastVariant = 'success' | 'error' | 'warning' | 'info';
-export type ToastOptions = {
-    duration?: number;
-    closable?: boolean;
-    position?: ToastPosition;
-    onClose?: () => void;
-};
-type ToastContextType = {
-    addToast: (message: string, variant?: ToastVariant, options?: ToastOptions) => string;
-    removeToast: (id: string) => void;
-    handleDismissAll: () => void;
-    handleResumeAll: () => void;
-};
-type ToastProviderProps = {
-    children: ReactNode;
-    position?: ToastPosition;
-    maxVisible?: number;
-    stacking?: 'stack' | 'replace';
-};
-export declare const ToastProvider: ({ children, position, maxVisible, stacking, }: ToastProviderProps) => import("react/jsx-runtime").JSX.Element;
-export declare const useToast: () => ToastContextType;
-export type ToastComponentProps = {
-    message: string;
-    variant?: ToastVariant;
-    options?: ToastOptions;
-    className?: string;
-};
-export declare const Toast: {
-    ({ message, variant, options, className }: ToastComponentProps): any;
-    displayName: string;
-};
-export {};

package/dist/components/Toast/Toast.js

@@ -1,177 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import clsx from 'clsx';
-import { toastContainer, toastWrapper, toastItem, toastCloseButton, toastProgressBarContainer, toastProgressBar, toastContent, fadeOutSuccess, fadeOutError, fadeOutWarning, fadeOutInfo, slideInRight, } from './styles.css';
-import { Icon } from '../Icon';
-const ToastContext = createContext({
-    addToast: () => '',
-    removeToast: () => { },
-    handleDismissAll: () => { },
-    handleResumeAll: () => { },
-});
-const getFadeOutForVariant = (variant) => {
-    const fadeOutMap = {
-        success: fadeOutSuccess,
-        error: fadeOutError,
-        warning: fadeOutWarning,
-        info: fadeOutInfo,
-    };
-    return fadeOutMap[variant] || fadeOutInfo;
-};
-const positionToClassKey = {
-    'top-left': 'topLeft',
-    'top-center': 'topCenter',
-    'top-right': 'topRight',
-    'bottom-left': 'bottomLeft',
-    'bottom-center': 'bottomCenter',
-    'bottom-right': 'bottomRight',
-};
-export const ToastProvider = ({ children, position = 'top-right', maxVisible = 5, stacking = 'stack', }) => {
-    const [toasts, setToasts] = useState([]);
-    const [pauseId, setPauseId] = useState(null);
-    const timeoutsRef = useRef(new Map());
-    const pauseTimeoutRef = useRef(null);
-    const toastsRef = useRef([]);
-    // Keep ref in sync with state
-    useEffect(() => {
-        toastsRef.current = toasts;
-    }, [toasts]);
-    const removeToastInternal = useCallback((id) => {
-        setToasts((prev) => {
-            const toast = prev.find((t) => t.id === id);
-            if (toast) {
-                toast.options.onClose?.();
-            }
-            return prev.filter((t) => t.id !== id);
-        });
-        const timeout = timeoutsRef.current.get(id);
-        if (timeout) {
-            clearTimeout(timeout);
-            timeoutsRef.current.delete(id);
-        }
-    }, []);
-    const addToast = useCallback((message, variant = 'info', options = {}) => {
-        const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        const duration = options.duration ?? 5000;
-        const startTime = Date.now();
-        const newToast = {
-            id,
-            message,
-            variant,
-            options: { ...options, duration, position: options.position ?? position },
-            startTime,
-            paused: false,
-            duration,
-        };
-        setToasts((prev) => {
-            if (stacking === 'replace') {
-                return [newToast];
-            }
-            const filtered = prev.filter((t) => {
-                const elapsed = Date.now() - t.startTime;
-                return elapsed < (t.options.duration ?? 5000);
-            });
-            return [...filtered, newToast].slice(-maxVisible);
-        });
-        const timeoutId = setTimeout(() => {
-            removeToastInternal(id);
-        }, duration);
-        timeoutsRef.current.set(id, timeoutId);
-        return id;
-    }, [maxVisible, stacking, position, removeToastInternal]);
-    const dismissInternal = useCallback((id) => {
-        const toast = toastsRef.current.find((t) => t.id === id);
-        if (!toast)
-            return;
-        setToasts((prev) => prev.map((t) => {
-            if (t.id === id) {
-                return { ...t, paused: true };
-            }
-            return t;
-        }));
-        if (pauseTimeoutRef.current) {
-            clearTimeout(pauseTimeoutRef.current);
-        }
-        setPauseId(id);
-        pauseTimeoutRef.current = setTimeout(() => {
-            setPauseId(null);
-            removeToastInternal(id);
-        }, 500);
-        const timeout = timeoutsRef.current.get(id);
-        if (timeout) {
-            clearTimeout(timeout);
-            timeoutsRef.current.delete(id);
-        }
-    }, [removeToastInternal]);
-    const dismissAllInternal = useCallback(() => {
-        setPauseId('all');
-        toastsRef.current.forEach((toast) => {
-            const timeout = timeoutsRef.current.get(toast.id);
-            if (timeout) {
-                clearTimeout(timeout);
-                timeoutsRef.current.delete(toast.id);
-            }
-        });
-    }, []);
-    const resumeAllInternal = useCallback(() => {
-        setPauseId(null);
-        toastsRef.current.forEach((toast) => {
-            if (toast.paused && toast.duration > 500) {
-                const timeout = setTimeout(() => {
-                    removeToastInternal(toast.id);
-                }, toast.duration - (Date.now() - toast.startTime));
-                timeoutsRef.current.set(toast.id, timeout);
-            }
-        });
-    }, [removeToastInternal]);
-    useEffect(() => {
-        return () => {
-            timeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
-            if (pauseTimeoutRef.current) {
-                clearTimeout(pauseTimeoutRef.current);
-            }
-        };
-    }, []);
-    const value = {
-        addToast,
-        removeToast: removeToastInternal,
-        handleDismissAll: dismissAllInternal,
-        handleResumeAll: resumeAllInternal,
-    };
-    return (_jsxs(ToastContext.Provider, { value: value, children: [children, _jsx(ToastContainer, { toasts: toasts, position: position, pauseId: pauseId, onDismiss: dismissInternal, onDismissAll: dismissAllInternal, onResumeAll: resumeAllInternal })] }));
-};
-const ToastContainer = ({ toasts, position, pauseId, onDismiss, onDismissAll, onResumeAll, }) => {
-    const [container, setContainer] = useState(null);
-    useEffect(() => {
-        const existingContainer = document.getElementById('toast-container');
-        if (existingContainer) {
-            setContainer(existingContainer);
-        }
-        else {
-            const el = document.createElement('div');
-            el.id = 'toast-container';
-            document.body.appendChild(el);
-            setContainer(el);
-        }
-    }, []);
-    if (!container)
-        return null;
-    return createPortal(_jsx("div", { className: clsx(toastContainer, toastWrapper[positionToClassKey[position]]), onMouseEnter: onDismissAll, onMouseLeave: onResumeAll, children: toasts.map((toast) => {
-            const elapsed = Date.now() - toast.startTime;
-            const progress = ((toast.duration - elapsed) / toast.duration) * 100;
-            const fadeOutAnimation = getFadeOutForVariant(toast.variant);
-            return (_jsx("div", { className: toastItem, style: {
-                    opacity: toast.paused || pauseId !== null ? 0.7 : 1,
-                    animation: `${slideInRight} 0.2s ease, 0.2s ease ${fadeOutAnimation} forwards`,
-                }, onMouseEnter: () => onDismiss(toast.id), children: _jsxs("div", { className: toastContent, children: [_jsx(Icon, { name: toast.variant === 'success' ? 'check' : toast.variant === 'error' ? 'error' : 'info' }), _jsx("span", { style: { marginLeft: '8px' }, children: toast.message }), toast.options.closable !== false && (_jsx("button", { type: "button", className: toastCloseButton, onClick: () => onDismiss(toast.id), "aria-label": "Close toast", children: _jsx(Icon, { name: "close" }) })), toast.duration > 0 && (_jsx("div", { className: toastProgressBarContainer, children: _jsx("div", { className: toastProgressBar, style: { width: `${progress}%` } }) }))] }) }, toast.id));
-        }) }), container);
-};
-export const useToast = () => {
-    const context = useContext(ToastContext);
-    return context;
-};
-export const Toast = ({ message, variant = 'info', options, className }) => {
-    return null;
-};
-Toast.displayName = 'Toast';

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

@@ -1 +0,0 @@
-export { ToastProvider, Toast, useToast, type ToastOptions, type ToastPosition, type ToastVariant, type ToastComponentProps, } from './Toast';

package/dist/components/Toast/index.js

@@ -1 +0,0 @@
-export { ToastProvider, Toast, useToast, } from './Toast';

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

@@ -1,21 +0,0 @@
-export declare const slideInRight: string;
-export declare const slideInLeft: string;
-export declare const slideInTop: string;
-export declare const slideOutRight: string;
-export declare const slideOutLeft: string;
-export declare const slideInBottom: string;
-export declare const slideOutBottom: string;
-export declare const fadeIn: string;
-export declare const fadeOut: string;
-export declare const fadeOutSuccess: string;
-export declare const fadeOutError: string;
-export declare const fadeOutWarning: string;
-export declare const fadeOutInfo: string;
-export declare const slideOut: string;
-export declare const toastContainer: string;
-export declare const toastWrapper: Record<"topLeft" | "topCenter" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight", string>;
-export declare const toastItem: string;
-export declare const toastCloseButton: string;
-export declare const toastProgressBarContainer: string;
-export declare const toastProgressBar: string;
-export declare const toastContent: string;