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

package/dist/components/Tag/Tag.js

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

package/dist/components/Tag/index.js

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

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

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

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

@@ -1,94 +0,0 @@
-import { style, styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-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'
-    }
-});
-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
-    }
-});
-const tagGroup = styleWithLayer({
-    display: 'flex',
-    flexWrap: 'wrap',
-    gap: '8px'
-});
-export { removeButton, tag, tagGroup };

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) => React.JSX.Element;
-export default Header;

package/dist/components/Text/Header.js

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { heading, text as external_styles_css_js_text } from "./styles.css.js";
-import "react";
-import Box from "../Box/index.js";
-const Header = ({ variant, children, className })=>/*#__PURE__*/ jsx(Box, {
-        as: variant,
-        className: clsx(className, external_styles_css_js_text, heading),
-        children: children
-    });
-const Text_Header = Header;
-export { Text_Header as default };

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) => React.JSX.Element;
-export default P;

package/dist/components/Text/P.js

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { text as external_styles_css_js_text } from "./styles.css.js";
-import "react";
-import Box from "../Box/index.js";
-const P = (props)=>/*#__PURE__*/ jsx(Box, {
-        as: "p",
-        className: clsx(props.className, external_styles_css_js_text),
-        children: props.children
-    });
-const Text_P = P;
-export { Text_P as default };

package/dist/components/Text/index.js

@@ -1,3 +0,0 @@
-import P from "./P.js";
-import Header from "./Header.js";
-export { Header, P };

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,14 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-const styles_css_text = style({
-    color: vars.colors.textPrimary,
-    fontFamily: vars.fontFamily.body,
-    lineHeight: '24px'
-});
-const heading = style({
-    color: vars.colors.textPrimary,
-    fontFamily: vars.fontFamily.heading,
-    lineHeight: '32px',
-    fontWeight: '700'
-});
-export { heading, styles_css_text as text };

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) => React.JSX.Element;
-export default TextArea;

package/dist/components/TextArea/TextArea.js

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

package/dist/components/TextArea/index.js

@@ -1,2 +0,0 @@
-import TextArea from "./TextArea.js";
-export { 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,11 +0,0 @@
-import { styleWithLayer } from "../../styles/utils.js";
-const textAreaStyle = styleWithLayer({
-    padding: '0.5rem 1rem',
-    borderRadius: '0.5rem',
-    minHeight: '100px',
-    resize: 'vertical'
-});
-const label = styleWithLayer({
-    paddingRight: '0.5rem'
-});
-export { label, textAreaStyle };

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

@@ -1,34 +0,0 @@
-import React, { 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) => React.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): null;
-    displayName: string;
-};
-export {};

package/dist/components/Toast/Toast.js

@@ -1,236 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import clsx from "clsx";
-import { fadeOutError, fadeOutInfo, fadeOutSuccess, fadeOutWarning, slideInRight, toastCloseButton, toastContainer, toastContent, toastItem, toastProgressBar, toastProgressBarContainer, toastWrapper } from "./styles.css.js";
-import { Icon } from "../Icon/index.js";
-const ToastContext = /*#__PURE__*/ 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'
-};
-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([]);
-    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 ('replace' === stacking) 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(()=>()=>{
-            timeoutsRef.current.forEach((timeout)=>clearTimeout(timeout));
-            if (pauseTimeoutRef.current) clearTimeout(pauseTimeoutRef.current);
-        }, []);
-    const value = {
-        addToast,
-        removeToast: removeToastInternal,
-        handleDismissAll: dismissAllInternal,
-        handleResumeAll: resumeAllInternal
-    };
-    return /*#__PURE__*/ jsxs(ToastContext.Provider, {
-        value: value,
-        children: [
-            children,
-            /*#__PURE__*/ 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 /*#__PURE__*/ createPortal(/*#__PURE__*/ 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 /*#__PURE__*/ jsx("div", {
-                className: toastItem,
-                style: {
-                    opacity: toast.paused || null !== pauseId ? 0.7 : 1,
-                    animation: `${slideInRight} 0.2s ease, 0.2s ease ${fadeOutAnimation} forwards`
-                },
-                onMouseEnter: ()=>onDismiss(toast.id),
-                children: /*#__PURE__*/ jsxs("div", {
-                    className: toastContent,
-                    children: [
-                        /*#__PURE__*/ jsx(Icon, {
-                            name: 'success' === toast.variant ? 'check' : 'error' === toast.variant ? 'error' : 'info'
-                        }),
-                        /*#__PURE__*/ jsx("span", {
-                            style: {
-                                marginLeft: '8px'
-                            },
-                            children: toast.message
-                        }),
-                        false !== toast.options.closable && /*#__PURE__*/ jsx("button", {
-                            type: "button",
-                            className: toastCloseButton,
-                            onClick: ()=>onDismiss(toast.id),
-                            "aria-label": "Close toast",
-                            children: /*#__PURE__*/ jsx(Icon, {
-                                name: "close"
-                            })
-                        }),
-                        toast.duration > 0 && /*#__PURE__*/ jsx("div", {
-                            className: toastProgressBarContainer,
-                            children: /*#__PURE__*/ jsx("div", {
-                                className: toastProgressBar,
-                                style: {
-                                    width: `${progress}%`
-                                }
-                            })
-                        })
-                    ]
-                })
-            }, toast.id);
-        })
-    }), container);
-};
-const useToast = ()=>{
-    const context = useContext(ToastContext);
-    return context;
-};
-const Toast = ({ message, variant = 'info', options, className })=>null;
-Toast.displayName = 'Toast';
-export { Toast, ToastProvider, useToast };

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,2 +0,0 @@
-import { Toast, ToastProvider, useToast } from "./Toast.js";
-export { Toast, ToastProvider, useToast };

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<"bottomLeft" | "bottomRight" | "topLeft" | "topRight" | "topCenter" | "bottomCenter", 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;