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

package/dist/components/FileUpload/FileUpload.js

@@ -1,214 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useCallback, useRef, useState } from "react";
-import { fileUploadContainer, fileUploadDropzone, fileUploadDropzoneVariants, fileUploadError, fileUploadHint, fileUploadIcon, fileUploadInput, fileUploadItem, fileUploadItemInfo, fileUploadItemName, fileUploadItemSize, fileUploadLabel, fileUploadList, fileUploadProgressBar, fileUploadProgressFill, fileUploadProgressFillVariants, fileUploadRemoveButton, fileUploadText } from "./styles.css.js";
-import Box from "../Box/index.js";
-const formatFileSize = (bytes)=>{
-    if (0 === bytes) return '0 Bytes';
-    const k = 1024;
-    const sizes = [
-        'Bytes',
-        'KB',
-        'MB',
-        'GB'
-    ];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-};
-const FileUpload = ({ label, files = [], onFilesChange, onFileAdd, onFileRemove, accept, multiple = false, maxFileSize, maxFiles, disabled = false, dropzoneText = 'Drag and drop files here, or click to browse', hint, showProgress = true, className, ...props })=>{
-    const [isDragOver, setIsDragOver] = useState(false);
-    const [error, setError] = useState(null);
-    const inputRef = useRef(null);
-    const validateFile = (file)=>{
-        if (maxFileSize && file.size > maxFileSize) return `File size exceeds ${formatFileSize(maxFileSize)}`;
-        if (accept) {
-            const acceptedTypes = accept.split(',').map((type)=>type.trim());
-            const isAccepted = acceptedTypes.some((type)=>{
-                if (type.includes('*')) return file.type.startsWith(type.replace('/*', ''));
-                return file.type === type || file.name.endsWith(type);
-            });
-            if (!isAccepted) return `File type not accepted. Allowed: ${accept}`;
-        }
-        return null;
-    };
-    const handleFiles = useCallback((fileList)=>{
-        if (!fileList || disabled) return;
-        const newFiles = [];
-        const errors = [];
-        Array.from(fileList).forEach((file)=>{
-            const validationError = validateFile(file);
-            if (validationError) errors.push(`${file.name}: ${validationError}`);
-            else newFiles.push(file);
-        });
-        if (maxFiles && files.length + newFiles.length > maxFiles) {
-            errors.push(`Maximum ${maxFiles} files allowed`);
-            newFiles.splice(maxFiles - files.length);
-        }
-        errors.length > 0 ? setError(errors.join(', ')) : setError(null);
-        if (newFiles.length > 0) onFileAdd?.(newFiles);
-    }, [
-        disabled,
-        files.length,
-        maxFileSize,
-        maxFiles,
-        accept,
-        onFileAdd
-    ]);
-    const handleDragOver = (e)=>{
-        e.preventDefault();
-        if (!disabled) setIsDragOver(true);
-    };
-    const handleDragLeave = (e)=>{
-        e.preventDefault();
-        setIsDragOver(false);
-    };
-    const handleDrop = (e)=>{
-        e.preventDefault();
-        setIsDragOver(false);
-        handleFiles(e.dataTransfer.files);
-    };
-    const handleClick = ()=>{
-        if (!disabled) inputRef.current?.click();
-    };
-    const handleInputChange = (e)=>{
-        handleFiles(e.target.files);
-        e.target.value = '';
-    };
-    const handleRemove = (fileId)=>{
-        onFileRemove?.(fileId);
-    };
-    const getVariant = ()=>{
-        if (disabled) return 'disabled';
-        if (error) return 'error';
-        if (isDragOver) return 'dragOver';
-        return 'default';
-    };
-    return /*#__PURE__*/ jsxs(Box, {
-        className: clsx(fileUploadContainer, className),
-        ...props,
-        children: [
-            label && /*#__PURE__*/ jsx(Box, {
-                as: "label",
-                className: fileUploadLabel,
-                children: label
-            }),
-            /*#__PURE__*/ jsxs(Box, {
-                as: "div",
-                className: clsx(fileUploadDropzone, fileUploadDropzoneVariants[getVariant()]),
-                onDragOver: handleDragOver,
-                onDragLeave: handleDragLeave,
-                onDrop: handleDrop,
-                onClick: handleClick,
-                role: "button",
-                tabIndex: disabled ? -1 : 0,
-                "aria-disabled": disabled,
-                children: [
-                    /*#__PURE__*/ jsx(Box, {
-                        className: fileUploadIcon,
-                        "aria-hidden": "true",
-                        children: /*#__PURE__*/ jsxs("svg", {
-                            width: "48",
-                            height: "48",
-                            viewBox: "0 0 24 24",
-                            fill: "none",
-                            stroke: "currentColor",
-                            strokeWidth: "2",
-                            children: [
-                                /*#__PURE__*/ jsx("path", {
-                                    d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
-                                }),
-                                /*#__PURE__*/ jsx("polyline", {
-                                    points: "17,8 12,3 7,8"
-                                }),
-                                /*#__PURE__*/ jsx("line", {
-                                    x1: "12",
-                                    y1: "3",
-                                    x2: "12",
-                                    y2: "15"
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(Box, {
-                        as: "p",
-                        className: fileUploadText,
-                        children: dropzoneText
-                    }),
-                    hint && /*#__PURE__*/ jsx(Box, {
-                        as: "p",
-                        className: fileUploadHint,
-                        children: hint
-                    }),
-                    /*#__PURE__*/ jsx(Box, {
-                        as: "input",
-                        ref: inputRef,
-                        type: "file",
-                        className: fileUploadInput,
-                        onChange: handleInputChange,
-                        accept: accept,
-                        multiple: multiple,
-                        disabled: disabled,
-                        "aria-label": "File upload input"
-                    })
-                ]
-            }),
-            error && /*#__PURE__*/ jsx(Box, {
-                as: "p",
-                className: fileUploadError,
-                role: "alert",
-                children: error
-            }),
-            files.length > 0 && /*#__PURE__*/ jsx(Box, {
-                as: "ul",
-                className: fileUploadList,
-                "aria-label": "Uploaded files",
-                children: files.map((file)=>/*#__PURE__*/ jsxs(Box, {
-                        as: "li",
-                        className: fileUploadItem,
-                        children: [
-                            /*#__PURE__*/ jsxs(Box, {
-                                className: fileUploadItemInfo,
-                                children: [
-                                    /*#__PURE__*/ jsx(Box, {
-                                        as: "p",
-                                        className: fileUploadItemName,
-                                        title: file.name,
-                                        children: file.name
-                                    }),
-                                    /*#__PURE__*/ jsxs(Box, {
-                                        as: "p",
-                                        className: fileUploadItemSize,
-                                        children: [
-                                            formatFileSize(file.size),
-                                            'uploading' === file.status && showProgress && ' • Uploading...',
-                                            'success' === file.status && ' • Complete',
-                                            'error' === file.status && file.errorMessage && ` • ${file.errorMessage}`
-                                        ]
-                                    }),
-                                    showProgress && 'uploading' === file.status && /*#__PURE__*/ jsx(Box, {
-                                        className: fileUploadProgressBar,
-                                        children: /*#__PURE__*/ jsx(Box, {
-                                            className: clsx(fileUploadProgressFill, fileUploadProgressFillVariants[file.status]),
-                                            style: {
-                                                width: `${file.progress}%`
-                                            }
-                                        })
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsx(Box, {
-                                as: "button",
-                                className: fileUploadRemoveButton,
-                                onClick: ()=>handleRemove(file.id),
-                                type: "button",
-                                "aria-label": `Remove ${file.name}`,
-                                children: "\xd7"
-                            })
-                        ]
-                    }, file.id))
-            })
-        ]
-    });
-};
-const FileUpload_FileUpload = FileUpload;
-export { FileUpload_FileUpload as default };

package/dist/components/FileUpload/index.js

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

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

@@ -1,19 +0,0 @@
-export declare const fileUploadContainer: string;
-export declare const fileUploadDropzone: string;
-export declare const fileUploadDropzoneVariants: Record<"default" | "disabled" | "error" | "dragOver", string>;
-export declare const fileUploadLabel: string;
-export declare const fileUploadText: string;
-export declare const fileUploadHint: string;
-export declare const fileUploadInput: string;
-export declare const fileUploadList: string;
-export declare const fileUploadItem: string;
-export declare const fileUploadItemInfo: string;
-export declare const fileUploadItemName: string;
-export declare const fileUploadItemSize: string;
-export declare const fileUploadItemProgress: string;
-export declare const fileUploadRemoveButton: string;
-export declare const fileUploadError: string;
-export declare const fileUploadIcon: string;
-export declare const fileUploadProgressBar: string;
-export declare const fileUploadProgressFill: string;
-export declare const fileUploadProgressFillVariants: Record<"success" | "error" | "uploading", string>;

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

@@ -1,146 +0,0 @@
-import { styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const fileUploadContainer = styleWithLayer({
-    width: '100%'
-});
-const fileUploadDropzone = styleWithLayer({
-    border: `2px dashed ${vars.colors.borderDefault}`,
-    borderRadius: '12px',
-    padding: '2rem',
-    textAlign: 'center',
-    cursor: 'pointer',
-    transition: 'all 0.2s ease',
-    backgroundColor: vars.colors.backgroundMuted,
-    ':hover': {
-        borderColor: vars.colors.inputBorderFocused,
-        backgroundColor: vars.colors.alertInfoBackground
-    }
-});
-const fileUploadDropzoneVariants = styleVariants({
-    default: {},
-    dragOver: {
-        borderColor: vars.colors.buttonBackgroundPrimary,
-        backgroundColor: vars.colors.alertInfoBackground,
-        borderStyle: 'solid'
-    },
-    error: {
-        borderColor: vars.colors.alertErrorBorder,
-        backgroundColor: vars.colors.alertErrorBackground
-    },
-    disabled: {
-        cursor: 'not-allowed',
-        opacity: 0.6,
-        ':hover': {
-            borderColor: vars.colors.borderDefault,
-            backgroundColor: vars.colors.backgroundMuted
-        }
-    }
-});
-const fileUploadLabel = styleWithLayer({
-    display: 'block',
-    fontSize: '14px',
-    fontWeight: '500',
-    color: vars.colors.textPrimary,
-    marginBottom: '8px'
-});
-const fileUploadText = styleWithLayer({
-    fontSize: '14px',
-    color: vars.colors.textSecondary,
-    marginTop: '0.5rem'
-});
-const fileUploadHint = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.textSecondary,
-    marginTop: '0.5rem'
-});
-const fileUploadInput = styleWithLayer({
-    display: 'none'
-});
-const fileUploadList = styleWithLayer({
-    marginTop: '1rem',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '0.75rem'
-});
-const fileUploadItem = styleWithLayer({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.75rem',
-    padding: '0.75rem',
-    backgroundColor: vars.colors.backgroundDefault,
-    border: `1px solid ${vars.colors.borderMuted}`,
-    borderRadius: '8px'
-});
-const fileUploadItemInfo = styleWithLayer({
-    flex: 1,
-    minWidth: 0
-});
-const fileUploadItemName = styleWithLayer({
-    fontSize: '14px',
-    fontWeight: '500',
-    color: vars.colors.textPrimary,
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-});
-const fileUploadItemSize = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.textSecondary,
-    marginTop: '2px'
-});
-const fileUploadItemProgress = styleWithLayer({
-    flex: 1,
-    maxWidth: '200px'
-});
-const fileUploadRemoveButton = styleWithLayer({
-    background: 'none',
-    border: 'none',
-    cursor: 'pointer',
-    padding: '0.25rem',
-    color: vars.colors.textSecondary,
-    fontSize: '18px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '4px',
-    transition: 'all 0.15s ease',
-    ':hover': {
-        color: vars.colors.alertErrorText,
-        backgroundColor: vars.colors.alertErrorBackground
-    }
-});
-const fileUploadError = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.alertErrorText,
-    marginTop: '0.5rem'
-});
-const fileUploadIcon = styleWithLayer({
-    fontSize: '24px',
-    color: vars.colors.textSecondary
-});
-const fileUploadProgressBar = styleWithLayer({
-    width: '100%',
-    height: '4px',
-    backgroundColor: vars.colors.borderMuted,
-    borderRadius: '2px',
-    overflow: 'hidden',
-    marginTop: '0.5rem'
-});
-const fileUploadProgressFill = styleWithLayer({
-    height: '100%',
-    backgroundColor: vars.colors.buttonBackgroundPrimary,
-    transition: 'width 0.3s ease'
-});
-const fileUploadProgressFillVariants = styleVariants({
-    uploading: {
-        backgroundColor: vars.colors.buttonBackgroundPrimary
-    },
-    success: {
-        backgroundColor: vars.colors.alertSuccessBorder
-    },
-    error: {
-        backgroundColor: vars.colors.alertErrorBorder
-    }
-});
-export { fileUploadContainer, fileUploadDropzone, fileUploadDropzoneVariants, fileUploadError, fileUploadHint, fileUploadIcon, fileUploadInput, fileUploadItem, fileUploadItemInfo, fileUploadItemName, fileUploadItemProgress, fileUploadItemSize, fileUploadLabel, fileUploadList, fileUploadProgressBar, fileUploadProgressFill, fileUploadProgressFillVariants, fileUploadRemoveButton, fileUploadText };

package/dist/components/Form/Form.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {
-    className?: string;
-    children?: React.ReactNode;
-};
-declare const Form: (props: FormProps) => React.JSX.Element;
-export default Form;

package/dist/components/Form/Form.js

@@ -1,15 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import "react";
-import { formStyle } from "./styles.css.js";
-import Box from "../Box/index.js";
-const Form = (props)=>/*#__PURE__*/ jsx(Box, {
-        as: "form",
-        gap: "medium",
-        paddingX: "large",
-        className: clsx(formStyle, props.className),
-        ...props,
-        children: props.children
-    });
-const Form_Form = Form;
-export { Form_Form as default };

package/dist/components/Form/FormInput.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { InputProps } from '../Input/Input';
-type FormInputProps = React.InputHTMLAttributes<HTMLInputElement> & InputProps;
-declare const FormInput: (props: FormInputProps) => React.JSX.Element;
-export default FormInput;

package/dist/components/Form/FormInput.js

@@ -1,15 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import "react";
-import { formInputStyle } from "./styles.css.js";
-import { Input } from "../../index.js";
-import Box from "../Box/index.js";
-const FormInput = (props)=>/*#__PURE__*/ jsx(Box, {
-        as: Input,
-        padding: "small",
-        className: clsx(formInputStyle, props.className),
-        label: props.label,
-        ...props
-    });
-const Form_FormInput = FormInput;
-export { Form_FormInput as default };

package/dist/components/Form/index.js

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

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

@@ -1,2 +0,0 @@
-export declare const formStyle: string;
-export declare const formInputStyle: string;

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

@@ -1,12 +0,0 @@
-import { styleWithLayer } from "../../styles/utils.js";
-const formStyle = styleWithLayer({
-    display: 'grid',
-    gridTemplateRows: 'min-content 1fr min-content'
-});
-const formInputStyle = styleWithLayer({
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-});
-export { formInputStyle, formStyle };

package/dist/components/Grid/Grid.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 12;
-export type GridGap = 'none' | 'small' | 'medium' | 'large';
-export interface GridProps {
-    columns?: GridColumns;
-    gap?: GridGap;
-    minChildWidth?: string;
-    children?: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-}
-declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
-export default Grid;

package/dist/components/Grid/Grid.js

@@ -1,30 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import Box from "../Box/index.js";
-const gapMap = {
-    none: '0',
-    small: '0.5rem',
-    medium: '1rem',
-    large: '2rem'
-};
-const Grid = /*#__PURE__*/ forwardRef(({ columns, gap = 'medium', minChildWidth, children, className, style }, ref)=>{
-    const gapValue = gap;
-    const gridStyle = {
-        display: 'grid',
-        gap: gapMap[gapValue]
-    };
-    if (minChildWidth) gridStyle.gridTemplateColumns = `repeat(auto-fit, minmax(${minChildWidth}, 1fr))`;
-    else if (columns) gridStyle.gridTemplateColumns = `repeat(${columns}, 1fr)`;
-    return /*#__PURE__*/ jsx(Box, {
-        ref: ref,
-        className: className,
-        style: {
-            ...gridStyle,
-            ...style
-        },
-        children: children
-    });
-});
-Grid.displayName = 'Grid';
-const Grid_Grid = Grid;
-export { Grid_Grid as default };

package/dist/components/Grid/index.js

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

package/dist/components/Icon/Icon.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-type IconProps = {
-    name?: string;
-    children?: React.ReactNode;
-    className?: string;
-    color?: string;
-};
-declare const IconComponent: {
-    ({ name, children, className, color }: IconProps): React.JSX.Element | null;
-    displayName: string;
-};
-export default IconComponent;

package/dist/components/Icon/Icon.js

@@ -1,29 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import "react";
-import { icon } from "./styles.css.js";
-import Box from "../Box/index.js";
-const IconComponent = ({ name, children, className, color })=>{
-    const iconMap = {
-        check: '✓',
-        error: '✗',
-        warning: '⚠',
-        info: 'i',
-        success: '✓',
-        close: '×'
-    };
-    const displayContent = children || (name ? iconMap[name] : void 0);
-    if (!displayContent) return null;
-    return /*#__PURE__*/ jsx(Box, {
-        as: "span",
-        className: clsx(icon, className),
-        style: {
-            color
-        },
-        "aria-hidden": "true",
-        children: displayContent
-    });
-};
-IconComponent.displayName = 'Icon';
-const Icon = IconComponent;
-export { Icon as default };

package/dist/components/Icon/index.js

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

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

@@ -1 +0,0 @@
-export declare const icon: string;

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

@@ -1,10 +0,0 @@
-import { styleWithLayer } from "../../styles/utils.js";
-const icon = styleWithLayer({
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: '16px',
-    lineHeight: '1',
-    userSelect: 'none'
-});
-export { icon };

package/dist/components/Input/Input.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-    label?: string;
-    fullWidth?: boolean;
-};
-declare const Input: (props: InputProps) => React.JSX.Element;
-export default Input;

package/dist/components/Input/Input.js

@@ -1,38 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import "react";
-import { inputStyle, label } from "./styles.css.js";
-import { text as styles_css_js_text } from "../Text/styles.css.js";
-import Box from "../Box/index.js";
-const Input = (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: "input",
-                className: clsx(inputStyle, props.className),
-                width: props.fullWidth ? '100%' : void 0,
-                ...props
-            })
-        ]
-    });
-const Input_Input = Input;
-export { Input_Input as default };

package/dist/components/Input/index.js

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

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

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

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

@@ -1,9 +0,0 @@
-import { styleWithLayer } from "../../styles/utils.js";
-const inputStyle = styleWithLayer({
-    padding: '0.5rem 1rem',
-    borderRadius: '0.5rem'
-});
-const label = styleWithLayer({
-    paddingRight: '0.5rem'
-});
-export { inputStyle, label };

package/dist/components/Kbd/Kbd.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export interface KbdProps {
-    children: React.ReactNode;
-    className?: string;
-}
-declare const Kbd: ({ children, className, ...props }: KbdProps) => React.JSX.Element;
-export default Kbd;

package/dist/components/Kbd/Kbd.js

@@ -1,10 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import { kbd } from "./styles.css.js";
-const Kbd = ({ children, className, ...props })=>/*#__PURE__*/ jsx("kbd", {
-        className: `${kbd} ${className || ''}`,
-        ...props,
-        children: children
-    });
-const Kbd_Kbd = Kbd;
-export { Kbd_Kbd as default };

package/dist/components/Kbd/index.js

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

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

@@ -1 +0,0 @@
-export declare const kbd: string;