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

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

@@ -0,0 +1,6 @@
+export declare const tabsContainer: string;
+export declare const tabsList: string;
+export declare const tabsListHorizontal: string;
+export declare const tabsListVertical: string;
+export declare const tabItem: Record<"active" | "base" | "verticalActive", string>;
+export declare const tabContent: string;

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

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

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

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

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

package/dist/components/Tag/index.js

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

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

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

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

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

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

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

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

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

package/dist/components/Text/index.js

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

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

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

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

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

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

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

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

package/dist/components/TextArea/index.js

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

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

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

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

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

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

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

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

package/dist/components/Toast/index.js

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

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

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