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

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

@@ -1,17 +0,0 @@
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const kbd = styleWithLayer({
-    display: 'inline-block',
-    padding: '0.125rem 0.375rem',
-    fontFamily: 'monospace',
-    fontSize: '0.85em',
-    fontWeight: '600',
-    lineHeight: '1.5',
-    color: vars.colors.textPrimary,
-    backgroundColor: vars.colors.backgroundMuted,
-    border: `1px solid ${vars.colors.borderDefault}`,
-    borderRadius: '4px',
-    boxShadow: '0 2px 0 rgba(0, 0, 0, 0.1)',
-    whiteSpace: 'nowrap'
-});
-export { kbd };

package/dist/components/List/List.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-declare const List: ({ children }: {
-    children: React.ReactNode;
-}) => React.JSX.Element;
-export default List;

package/dist/components/List/List.js

@@ -1,11 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import { list } from "./styles.css.js";
-import Box from "../Box/index.js";
-const List = ({ children })=>/*#__PURE__*/ jsx(Box, {
-        as: "ul",
-        className: list,
-        children: children
-    });
-const List_List = List;
-export { List_List as default };

package/dist/components/List/ListItem.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-declare const ListItem: ({ children }: {
-    children: React.ReactNode;
-}) => React.JSX.Element;
-export default ListItem;

package/dist/components/List/ListItem.js

@@ -1,11 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import { listItem } from "./styles.css.js";
-import Box from "../Box/index.js";
-const ListItem = ({ children })=>/*#__PURE__*/ jsx(Box, {
-        as: "li",
-        className: listItem,
-        children: children
-    });
-const List_ListItem = ListItem;
-export { List_ListItem as default };

package/dist/components/List/index.js

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

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

@@ -1,2 +0,0 @@
-export declare const list: string;
-export declare const listItem: string;

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

@@ -1,12 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-const list = style({
-    listStyle: 'none',
-    padding: 0,
-    margin: 0
-});
-const listItem = style({
-    padding: '0.5rem 0',
-    borderBottom: `1px solid ${vars.colors.listBorder}`
-});
-export { list, listItem };

package/dist/components/Modal/Modal.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-export type ModalSize = 'small' | 'medium' | 'large' | 'full';
-export interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
-    isOpen: boolean;
-    onClose: () => void;
-    title?: string;
-    size?: ModalSize;
-    children?: React.ReactNode;
-    footer?: React.ReactNode;
-    showCloseButton?: boolean;
-}
-declare const Modal: ({ isOpen, onClose, title, size, children, footer, showCloseButton, ...props }: ModalProps) => React.JSX.Element;
-export default Modal;

package/dist/components/Modal/Modal.js

@@ -1,71 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { modal, modalBody, modalCloseButton, modalFooter, modalHeader, modalTitle, modalVariants } from "./styles.css.js";
-import { useEffect, useRef } from "react";
-import Box from "../Box/index.js";
-const Modal = ({ isOpen, onClose, title, size = 'medium', children, footer, showCloseButton = true, ...props })=>{
-    const dialogRef = useRef(null);
-    useEffect(()=>{
-        const dialog = dialogRef.current;
-        if (!dialog) return;
-        if (isOpen) {
-            dialog.showModal();
-            dialog.classList.add('open');
-        } else {
-            dialog.close();
-            dialog.classList.remove('open');
-        }
-        const handleClose = ()=>{
-            onClose();
-        };
-        dialog.addEventListener('close', handleClose);
-        return ()=>{
-            dialog.removeEventListener('close', handleClose);
-        };
-    }, [
-        isOpen,
-        onClose
-    ]);
-    return /*#__PURE__*/ jsxs(Box, {
-        as: "dialog",
-        ref: dialogRef,
-        className: clsx(modal, modalVariants[size]),
-        onClick: (e)=>{
-            if (e.target === dialogRef.current) onClose();
-        },
-        ...props,
-        children: [
-            title && /*#__PURE__*/ jsxs(Box, {
-                as: "div",
-                className: modalHeader,
-                children: [
-                    /*#__PURE__*/ jsx(Box, {
-                        as: "h2",
-                        className: modalTitle,
-                        children: title
-                    }),
-                    showCloseButton && /*#__PURE__*/ jsx(Box, {
-                        as: "button",
-                        className: modalCloseButton,
-                        onClick: onClose,
-                        "aria-label": "Close modal",
-                        type: "button",
-                        children: "\xd7"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(Box, {
-                as: "div",
-                className: modalBody,
-                children: children
-            }),
-            footer && /*#__PURE__*/ jsx(Box, {
-                as: "div",
-                className: modalFooter,
-                children: footer
-            })
-        ]
-    });
-};
-const Modal_Modal = Modal;
-export { Modal_Modal as default };

package/dist/components/Modal/index.js

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

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

@@ -1,7 +0,0 @@
-export declare const modalVariants: Record<"medium" | "large" | "small" | "full", string>;
-export declare const modal: string;
-export declare const modalHeader: string;
-export declare const modalTitle: string;
-export declare const modalCloseButton: string;
-export declare const modalBody: string;
-export declare const modalFooter: string;

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

@@ -1,93 +0,0 @@
-import { styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const modalVariants = styleVariants({
-    small: {
-        maxWidth: '400px'
-    },
-    medium: {
-        maxWidth: '600px'
-    },
-    large: {
-        maxWidth: '800px'
-    },
-    full: {
-        maxWidth: '95vw'
-    }
-});
-const modal = styleWithLayer({
-    background: vars.colors.backgroundDefault,
-    borderRadius: '0.75rem',
-    boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-    border: '1px solid var(--modal-border, transparent)',
-    color: vars.colors.textPrimary,
-    fontFamily: vars.fontFamily.body,
-    maxWidth: '90vw',
-    maxHeight: '90vh',
-    flexDirection: 'column',
-    overflow: 'hidden',
-    selectors: {
-        '&:not([open])': {
-            display: 'none'
-        },
-        '[open] &': {
-            display: 'flex'
-        },
-        '&::backdrop': {
-            backgroundColor: 'rgba(0, 0, 0, 0.5)'
-        }
-    }
-});
-const modalHeader = styleWithLayer({
-    padding: '1.25rem',
-    borderBottom: `1px solid ${vars.colors.borderMuted}`,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: '1rem'
-});
-const modalTitle = styleWithLayer({
-    fontFamily: vars.fontFamily.heading,
-    fontSize: '1.25rem',
-    fontWeight: '600',
-    color: vars.colors.textPrimary,
-    margin: 0
-});
-const modalCloseButton = styleWithLayer({
-    background: 'none',
-    border: 'none',
-    padding: '0.5rem',
-    cursor: 'pointer',
-    borderRadius: '0.375rem',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: vars.colors.textSecondary,
-    fontSize: '1.5rem',
-    lineHeight: '1',
-    transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out',
-    selectors: {
-        '&:hover': {
-            backgroundColor: vars.colors.borderMuted,
-            color: vars.colors.textPrimary
-        },
-        '&:focus-visible': {
-            outline: '2px solid var(--modal-focus-ring, currentColor)',
-            outlineOffset: '2px'
-        }
-    }
-});
-const modalBody = styleWithLayer({
-    padding: '1.25rem',
-    overflowY: 'auto',
-    flex: 1
-});
-const modalFooter = styleWithLayer({
-    padding: '1.25rem',
-    borderTop: `1px solid ${vars.colors.borderMuted}`,
-    display: 'flex',
-    gap: '0.75rem',
-    justifyContent: 'flex-end',
-    alignItems: 'center'
-});
-export { modal, modalBody, modalCloseButton, modalFooter, modalHeader, modalTitle, modalVariants };

package/dist/components/Navbar/Navbar.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-type NavbarProps = React.HTMLAttributes<HTMLElement> & {
-    children?: React.ReactNode;
-};
-declare const Navbar: (props: NavbarProps) => React.JSX.Element;
-export default Navbar;

package/dist/components/Navbar/Navbar.js

@@ -1,16 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import "react";
-import { navbarStyle } from "./styles.css.js";
-import Box from "../Box/index.js";
-const Navbar = (props)=>/*#__PURE__*/ jsx(Box, {
-        as: "nav",
-        width: "100%",
-        display: "flex",
-        flexDirection: "row",
-        gap: "medium",
-        className: clsx(navbarStyle, props.className),
-        ...props
-    });
-const Navbar_Navbar = Navbar;
-export { Navbar_Navbar as default };

package/dist/components/Navbar/NavbarItem.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-type NavbarItemProps = React.HTMLAttributes<HTMLDivElement> & {
-    children?: React.ReactNode;
-};
-declare const NavbarItem: (props: NavbarItemProps) => React.JSX.Element;
-export default NavbarItem;

package/dist/components/Navbar/NavbarItem.js

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import "react";
-import { navbarItemStyle } from "./styles.css.js";
-import Box from "../Box/index.js";
-const NavbarItem = (props)=>/*#__PURE__*/ jsx(Box, {
-        as: "div",
-        className: clsx(navbarItemStyle, props.className),
-        ...props
-    });
-const Navbar_NavbarItem = NavbarItem;
-export { Navbar_NavbarItem as default };

package/dist/components/Navbar/index.js

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

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

@@ -1,2 +0,0 @@
-export declare const navbarStyle: string;
-export declare const navbarItemStyle: string;

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

@@ -1,4 +0,0 @@
-import { styleWithLayer } from "../../styles/utils.js";
-const navbarStyle = styleWithLayer({});
-const navbarItemStyle = styleWithLayer({});
-export { navbarItemStyle, navbarStyle };

package/dist/components/NumberInput/NumberInput.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-export type NumberInputPosition = 'right' | 'left';
-export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'min' | 'max'> {
-    label?: string;
-    value?: number | '';
-    onChange?: (value: number | '') => void;
-    min?: number;
-    max?: number;
-    step?: number;
-    stepperPosition?: NumberInputPosition;
-    placeholder?: string;
-    hint?: string;
-    error?: boolean;
-    errorMessage?: string;
-    fullWidth?: boolean;
-    disabled?: boolean;
-    allowEmpty?: boolean;
-}
-declare const NumberInput: ({ label, value, onChange, min, max, step, stepperPosition, placeholder, hint, error, errorMessage, fullWidth, disabled, allowEmpty, className, ...props }: NumberInputProps) => React.JSX.Element;
-export default NumberInput;

package/dist/components/NumberInput/NumberInput.js

@@ -1,108 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useCallback } from "react";
-import { numberInput, numberInputButton, numberInputContainer, numberInputErrorMessage, numberInputHint, numberInputLabel, numberInputStepper, numberInputStepperLeft, numberInputVariants, numberInputWrapper } from "./styles.css.js";
-import Box from "../Box/index.js";
-const NumberInput = ({ label, value, onChange, min = -1 / 0, max = 1 / 0, step = 1, stepperPosition = 'right', placeholder = '0', hint, error = false, errorMessage, fullWidth = true, disabled = false, allowEmpty = true, className, ...props })=>{
-    const handleChange = (e)=>{
-        const inputValue = e.target.value;
-        if ('' === inputValue) {
-            if (allowEmpty) onChange?.('');
-            else onChange?.(0);
-            return;
-        }
-        const numValue = parseFloat(inputValue);
-        if (!isNaN(numValue)) {
-            const clampedValue = Math.min(Math.max(numValue, min), max);
-            onChange?.(clampedValue);
-        }
-    };
-    const increment = useCallback(()=>{
-        const currentValue = 'number' == typeof value ? value : 0;
-        const newValue = Math.min(currentValue + step, max);
-        onChange?.(newValue);
-    }, [
-        value,
-        step,
-        max,
-        onChange
-    ]);
-    const decrement = useCallback(()=>{
-        const currentValue = 'number' == typeof value ? value : 0;
-        const newValue = Math.max(currentValue - step, min);
-        onChange?.(newValue);
-    }, [
-        value,
-        step,
-        min,
-        onChange
-    ]);
-    const isIncrementDisabled = disabled || 'number' == typeof value && value >= max;
-    const isDecrementDisabled = disabled || 'number' == typeof value && value <= min;
-    const displayValue = '' === value ? '' : value;
-    return /*#__PURE__*/ jsxs(Box, {
-        className: numberInputWrapper,
-        width: fullWidth ? '100%' : void 0,
-        children: [
-            label && /*#__PURE__*/ jsx(Box, {
-                as: "label",
-                className: numberInputLabel,
-                children: label
-            }),
-            /*#__PURE__*/ jsxs(Box, {
-                className: numberInputContainer,
-                children: [
-                    /*#__PURE__*/ jsx(Box, {
-                        as: "input",
-                        type: "number",
-                        value: displayValue,
-                        onChange: handleChange,
-                        min: min,
-                        max: max,
-                        step: step,
-                        placeholder: placeholder,
-                        disabled: disabled,
-                        className: clsx(numberInput, numberInputVariants[error ? 'error' : 'default'], className),
-                        ...props
-                    }),
-                    /*#__PURE__*/ jsxs(Box, {
-                        className: clsx(numberInputStepper, 'left' === stepperPosition && numberInputStepperLeft),
-                        children: [
-                            /*#__PURE__*/ jsx(Box, {
-                                as: "button",
-                                className: numberInputButton,
-                                onClick: increment,
-                                disabled: isIncrementDisabled,
-                                type: "button",
-                                "aria-label": "Increase value",
-                                children: "+"
-                            }),
-                            /*#__PURE__*/ jsx(Box, {
-                                as: "button",
-                                className: numberInputButton,
-                                onClick: decrement,
-                                disabled: isDecrementDisabled,
-                                type: "button",
-                                "aria-label": "Decrease value",
-                                children: "−"
-                            })
-                        ]
-                    })
-                ]
-            }),
-            error && errorMessage && /*#__PURE__*/ jsx(Box, {
-                as: "div",
-                className: numberInputErrorMessage,
-                role: "alert",
-                children: errorMessage
-            }),
-            hint && !error && /*#__PURE__*/ jsx(Box, {
-                as: "div",
-                className: numberInputHint,
-                children: hint
-            })
-        ]
-    });
-};
-const NumberInput_NumberInput = NumberInput;
-export { NumberInput_NumberInput as default };

package/dist/components/NumberInput/index.js

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

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

@@ -1,10 +0,0 @@
-export declare const numberInputContainer: string;
-export declare const numberInput: string;
-export declare const numberInputVariants: Record<"default" | "error", string>;
-export declare const numberInputLabel: string;
-export declare const numberInputStepper: string;
-export declare const numberInputStepperLeft: string;
-export declare const numberInputButton: string;
-export declare const numberInputWrapper: string;
-export declare const numberInputHint: string;
-export declare const numberInputErrorMessage: string;

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

@@ -1,118 +0,0 @@
-import { styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const numberInputContainer = styleWithLayer({
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    width: '100%'
-});
-const numberInput = styleWithLayer({
-    width: '100%',
-    padding: '0.75rem 2.5rem',
-    fontSize: '14px',
-    fontFamily: vars.fontFamily.body,
-    color: vars.colors.textPrimary,
-    backgroundColor: vars.colors.inputBackground,
-    border: `1px solid ${vars.colors.inputBorder}`,
-    borderRadius: '8px',
-    outline: 'none',
-    textAlign: 'center',
-    transition: 'border-color 0.2s ease',
-    '::placeholder': {
-        color: vars.colors.inputPlaceholder
-    },
-    ':focus-visible': {
-        outline: `2px solid ${vars.colors.inputBorderFocused}`,
-        outlineOffset: '2px'
-    },
-    ':hover': {
-        borderColor: vars.colors.inputBorderFocused
-    },
-    selectors: {
-        '&:disabled': {
-            cursor: 'not-allowed',
-            opacity: 0.5,
-            backgroundColor: vars.colors.backgroundMuted
-        },
-        '&:disabled:hover': {
-            borderColor: vars.colors.inputBorder
-        }
-    }
-});
-const numberInputVariants = styleVariants({
-    default: {},
-    error: {
-        border: `1px solid ${vars.colors.alertErrorBorder}`,
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.alertErrorBorder}`
-        },
-        ':hover': {
-            borderColor: vars.colors.alertErrorBorder
-        }
-    }
-});
-const numberInputLabel = styleWithLayer({
-    display: 'block',
-    fontSize: '14px',
-    fontWeight: '500',
-    color: vars.colors.textPrimary,
-    marginBottom: '8px'
-});
-const numberInputStepper = styleWithLayer({
-    position: 'absolute',
-    display: 'flex',
-    flexDirection: 'column',
-    right: '0.5rem',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    gap: '2px'
-});
-const numberInputStepperLeft = styleWithLayer({
-    left: '0.5rem',
-    right: 'auto'
-});
-const numberInputButton = styleWithLayer({
-    width: '1.5rem',
-    height: '1.25rem',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: vars.colors.buttonBackgroundSecondary,
-    border: `1px solid ${vars.colors.borderDefault}`,
-    borderRadius: '4px',
-    cursor: 'pointer',
-    fontSize: '12px',
-    color: vars.colors.buttonTextSecondary,
-    transition: 'all 0.15s ease',
-    padding: 0,
-    ':hover': {
-        backgroundColor: vars.colors.buttonBackgroundFocusedSecondary
-    },
-    ':active': {
-        transform: 'scale(0.95)'
-    },
-    selectors: {
-        '&:disabled': {
-            cursor: 'not-allowed',
-            opacity: 0.5
-        },
-        '&:disabled:hover': {
-            backgroundColor: vars.colors.buttonBackgroundSecondary
-        }
-    }
-});
-const numberInputWrapper = styleWithLayer({
-    width: '100%'
-});
-const numberInputHint = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.textSecondary,
-    marginTop: '4px'
-});
-const numberInputErrorMessage = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.alertErrorText,
-    marginTop: '4px'
-});
-export { numberInput, numberInputButton, numberInputContainer, numberInputErrorMessage, numberInputHint, numberInputLabel, numberInputStepper, numberInputStepperLeft, numberInputVariants, numberInputWrapper };

package/dist/components/Pagination/Pagination.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export type PaginationProps = {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
-    siblingCount?: number;
-    showFirstLast?: boolean;
-    showPrevNext?: boolean;
-};
-declare const Pagination: ({ currentPage, totalPages, onPageChange, siblingCount, showFirstLast, showPrevNext, }: PaginationProps) => React.JSX.Element;
-export default Pagination;