@jordan-mace/chaser-design-system 1.1.0 → 1.2.0

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

@@ -0,0 +1,78 @@
+import { styleVariants } from "@vanilla-extract/css";
+import { vars } from "../../styles/theme.css.js";
+import { styleWithLayer } from "../../styles/utils.js";
+const badgeVariants = styleVariants({
+    default: {
+        backgroundColor: vars.colors.borderDefault,
+        color: vars.colors.textPrimary
+    },
+    success: {
+        backgroundColor: vars.colors.alertSuccessBackground,
+        color: vars.colors.alertSuccessText,
+        border: `1px solid ${vars.colors.alertSuccessBorder}`
+    },
+    warning: {
+        backgroundColor: vars.colors.alertWarningBackground,
+        color: vars.colors.alertWarningText,
+        border: `1px solid ${vars.colors.alertWarningBorder}`
+    },
+    error: {
+        backgroundColor: vars.colors.alertErrorBackground,
+        color: vars.colors.alertErrorText,
+        border: `1px solid ${vars.colors.alertErrorBorder}`
+    },
+    info: {
+        backgroundColor: vars.colors.alertInfoBackground,
+        color: vars.colors.alertInfoText,
+        border: `1px solid ${vars.colors.alertInfoBorder}`
+    }
+});
+const badgeSizes = styleVariants({
+    small: {
+        fontSize: '0.7rem',
+        padding: '0.125rem 0.375rem',
+        borderRadius: '0.25rem'
+    },
+    medium: {
+        fontSize: '0.75rem',
+        padding: '0.25rem 0.5rem',
+        borderRadius: '0.375rem'
+    },
+    large: {
+        fontSize: '0.875rem',
+        padding: '0.375rem 0.625rem',
+        borderRadius: '0.5rem'
+    }
+});
+const badge = styleWithLayer({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    whiteSpace: 'nowrap',
+    fontFamily: vars.fontFamily.body,
+    transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out'
+});
+const badgeDot = styleWithLayer({
+    width: '0.5rem',
+    height: '0.5rem',
+    borderRadius: '50%',
+    display: 'inline-block',
+    padding: 0,
+    minWidth: 'auto'
+});
+const badgeDotSizes = styleVariants({
+    small: {
+        width: '0.375rem',
+        height: '0.375rem'
+    },
+    medium: {
+        width: '0.5rem',
+        height: '0.5rem'
+    },
+    large: {
+        width: '0.625rem',
+        height: '0.625rem'
+    }
+});
+export { badge, badgeDot, badgeDotSizes, badgeSizes, badgeVariants };

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,11 @@
+import { type Sprinkles } from '../../styles/sprinkles.css';
+import React from 'react';
+type BoxProps = Sprinkles & {
+    as?: React.ElementType;
+    children?: React.ReactNode;
+    className?: string;
+    [key: string]: unknown;
+};
+declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export default Box;
+export type { BoxProps };

package/dist/components/Box/Box.js

@@ -0,0 +1,53 @@
+import clsx from "clsx";
+import { sprinkles } from "../../styles/sprinkles.css.js";
+import { reset as external_reset_css_js_reset } from "./reset.css.js";
+import react, { forwardRef } from "react";
+const Box = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { as: Component = 'div', className, children, ...rest } = props;
+    const sprinkleProps = {};
+    const otherProps = {
+        ref
+    };
+    const sprinkleKeys = new Set([
+        'display',
+        'width',
+        'height',
+        'flexDirection',
+        'justifyContent',
+        'alignItems',
+        'paddingTop',
+        'paddingBottom',
+        'paddingLeft',
+        'paddingRight',
+        'marginLeft',
+        'marginRight',
+        'marginTop',
+        'marginBottom',
+        'borderLeft',
+        'borderRight',
+        'borderTop',
+        'borderBottom',
+        'borderRadius',
+        'gap',
+        'padding',
+        'border',
+        'paddingX',
+        'paddingY',
+        'marginX',
+        'marginY',
+        'placeItems',
+        'color',
+        'background'
+    ]);
+    Object.entries(rest).forEach(([key, value])=>{
+        if (sprinkleKeys.has(key)) sprinkleProps[key] = value;
+        else otherProps[key] = value;
+    });
+    return /*#__PURE__*/ react.createElement(Component, {
+        className: clsx(external_reset_css_js_reset, sprinkles(sprinkleProps), className),
+        ...otherProps
+    }, children);
+});
+Box.displayName = 'Box';
+const Box_Box = Box;
+export { Box_Box as default };

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

@@ -0,0 +1,2 @@
+export { default } from './Box';
+export type { BoxProps } from './Box';

package/dist/components/Box/index.js

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

package/dist/components/Box/reset.css.d.ts

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

package/dist/components/Box/reset.css.js

@@ -0,0 +1,16 @@
+import { style } from "@vanilla-extract/css";
+import { componentsLayer } from "../../styles/layers.css.js";
+const reset_css_reset = style({
+    '@layer': {
+        [componentsLayer]: {
+            margin: 0,
+            padding: 0,
+            border: 0,
+            boxSizing: 'border-box',
+            fontSize: '100%',
+            font: 'inherit',
+            verticalAlign: 'baseline'
+        }
+    }
+});
+export { reset_css_reset as reset };

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type BreadcrumbItem = {
+    label: string;
+    href?: string;
+    current?: boolean;
+};
+type BreadcrumbProps = {
+    items: BreadcrumbItem[];
+    className?: string;
+    separator?: string;
+};
+declare const Breadcrumb: ({ items, className, separator, }: BreadcrumbProps) => React.JSX.Element;
+export default Breadcrumb;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import "react";
+import { breadcrumb, breadcrumbCurrent, breadcrumbItem, breadcrumbLink, breadcrumbList, breadcrumbSeparator } from "./styles.css.js";
+import Box from "../Box/index.js";
+const Breadcrumb = ({ items, className, separator = '/' })=>/*#__PURE__*/ jsx(Box, {
+        as: "nav",
+        "aria-label": "Breadcrumb",
+        className: clsx(breadcrumb, className),
+        display: "flex",
+        alignItems: "center",
+        gap: "small",
+        fontSize: "14px",
+        children: /*#__PURE__*/ jsx(Box, {
+            as: "ol",
+            className: breadcrumbList,
+            display: "flex",
+            alignItems: "center",
+            style: {
+                listStyle: 'none'
+            },
+            margin: "none",
+            padding: "none",
+            gap: "small",
+            children: items.map((item, index)=>/*#__PURE__*/ jsxs(Box, {
+                    as: "li",
+                    className: breadcrumbItem,
+                    display: "flex",
+                    alignItems: "center",
+                    children: [
+                        item.href && !item.current ? /*#__PURE__*/ jsx(Box, {
+                            as: "a",
+                            href: item.href,
+                            className: breadcrumbLink,
+                            display: "inline",
+                            alignItems: "center",
+                            color: "c5-600",
+                            fontSize: "14px",
+                            textDecoration: "none",
+                            children: item.label
+                        }) : /*#__PURE__*/ jsx(Box, {
+                            as: "span",
+                            className: breadcrumbCurrent,
+                            display: "inline",
+                            alignItems: "center",
+                            color: "c5-700",
+                            fontSize: "14px",
+                            fontWeight: "500",
+                            children: item.label
+                        }),
+                        index < items.length - 1 && /*#__PURE__*/ jsx(Box, {
+                            as: "span",
+                            className: breadcrumbSeparator,
+                            color: "c5-500",
+                            fontSize: "12px",
+                            style: {
+                                userSelect: 'none'
+                            },
+                            children: separator
+                        })
+                    ]
+                }, index))
+        })
+    });
+const Breadcrumb_Breadcrumb = Breadcrumb;
+export { Breadcrumb_Breadcrumb as default };

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

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

package/dist/components/Breadcrumb/index.js

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

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

@@ -0,0 +1,6 @@
+export declare const breadcrumb: string;
+export declare const breadcrumbList: string;
+export declare const breadcrumbItem: string;
+export declare const breadcrumbLink: string;
+export declare const breadcrumbSeparator: string;
+export declare const breadcrumbCurrent: string;

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

@@ -0,0 +1,51 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "../../styles/theme.css.js";
+import { styleWithLayer } from "../../styles/utils.js";
+const breadcrumb = styleWithLayer({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '4px',
+    fontFamily: vars.fontFamily.body,
+    fontSize: '14px'
+});
+const breadcrumbList = style({
+    display: 'flex',
+    alignItems: 'center',
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+    gap: '4px'
+});
+const breadcrumbItem = style({
+    display: 'flex',
+    alignItems: 'center'
+});
+const breadcrumbLink = style({
+    display: 'inline-flex',
+    alignItems: 'center',
+    color: vars.colors.textSecondary,
+    textDecoration: 'none',
+    fontSize: '14px',
+    ':hover': {
+        color: vars.colors.buttonBackgroundPrimary,
+        textDecoration: 'underline'
+    },
+    ':focus-visible': {
+        outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+        outlineOffset: '2px',
+        borderRadius: '4px'
+    }
+});
+const breadcrumbSeparator = style({
+    color: vars.colors.textDisabled,
+    fontSize: '12px',
+    userSelect: 'none'
+});
+const breadcrumbCurrent = style({
+    display: 'inline-flex',
+    alignItems: 'center',
+    color: vars.colors.textPrimary,
+    fontSize: '14px',
+    fontWeight: '500'
+});
+export { breadcrumb, breadcrumbCurrent, breadcrumbItem, breadcrumbLink, breadcrumbList, breadcrumbSeparator };

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant: 'primary' | 'secondary';
+    children?: React.ReactNode;
+    label?: string;
+    fullWidth?: boolean;
+};
+declare const Button: ({ label, ...props }: ButtonProps) => React.JSX.Element;
+export default Button;

package/dist/components/Button/Button.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { button as external_styles_css_js_button, buttonVariants } from "./styles.css.js";
+import "react";
+import Box from "../Box/index.js";
+const Button = ({ label, ...props })=>/*#__PURE__*/ jsx(Box, {
+        as: "button",
+        borderRadius: "large",
+        width: props.fullWidth ? '100%' : void 0,
+        className: clsx(buttonVariants[props.variant], external_styles_css_js_button, props.className),
+        ...props,
+        children: props.children || label
+    });
+const Button_Button = Button;
+export { Button_Button as default };

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

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

package/dist/components/Button/index.js

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

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

@@ -0,0 +1,2 @@
+export declare const buttonVariants: Record<"primary" | "secondary", string>;
+export declare const button: string;

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

@@ -0,0 +1,31 @@
+import { styleVariants } from "@vanilla-extract/css";
+import { vars } from "../../styles/theme.css.js";
+import { styleWithLayer } from "../../styles/utils.js";
+const buttonVariants = styleVariants({
+    primary: {
+        backgroundColor: vars.colors.buttonBackgroundPrimary,
+        color: vars.colors.buttonTextPrimary,
+        ':focus-visible': {
+            backgroundColor: vars.colors.buttonBackgroundFocusedPrimary
+        },
+        ':hover': {
+            backgroundColor: vars.colors.buttonBackgroundFocusedPrimary
+        }
+    },
+    secondary: {
+        backgroundColor: vars.colors.buttonBackgroundSecondary,
+        color: vars.colors.buttonTextSecondary,
+        ':focus-visible': {
+            backgroundColor: vars.colors.buttonBackgroundFocusedSecondary
+        },
+        ':hover': {
+            backgroundColor: vars.colors.buttonBackgroundFocusedSecondary
+        }
+    }
+});
+const styles_css_button = styleWithLayer({
+    padding: '1rem',
+    borderRadius: '1rem',
+    border: 0
+});
+export { styles_css_button as button, buttonVariants };

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+    variant?: 'elevated' | 'outlined' | 'filled';
+    children?: React.ReactNode;
+    padding?: 'none' | 'small' | 'medium' | 'large';
+};
+declare const Card: ({ variant, padding, ...props }: CardProps) => React.JSX.Element;
+export default Card;

package/dist/components/Card/Card.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { card, cardVariants } from "./styles.css.js";
+import "react";
+import Box from "../Box/index.js";
+const Card = ({ variant = 'elevated', padding = 'medium', ...props })=>/*#__PURE__*/ jsx(Box, {
+        as: "div",
+        borderRadius: "large",
+        padding: 'none' !== padding ? padding : void 0,
+        className: clsx(cardVariants[variant], card, props.className),
+        ...props,
+        children: props.children
+    });
+const Card_Card = Card;
+export { Card_Card as default };

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

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

package/dist/components/Card/index.js

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

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

@@ -0,0 +1,2 @@
+export declare const cardVariants: Record<"filled" | "elevated" | "outlined", string>;
+export declare const card: string;

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

@@ -0,0 +1,26 @@
+import { styleVariants } from "@vanilla-extract/css";
+import { vars } from "../../styles/theme.css.js";
+import { styleWithLayer } from "../../styles/utils.js";
+const cardVariants = styleVariants({
+    elevated: {
+        backgroundColor: vars.colors.backgroundDefault,
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+        border: 'none'
+    },
+    outlined: {
+        backgroundColor: vars.colors.backgroundDefault,
+        border: `1px solid ${vars.colors.borderDefault}`,
+        boxShadow: 'none'
+    },
+    filled: {
+        backgroundColor: vars.colors.backgroundMuted,
+        border: 'none',
+        boxShadow: 'none'
+    }
+});
+const card = styleWithLayer({
+    display: 'block',
+    position: 'relative',
+    transition: 'all 0.2s ease-in-out'
+});
+export { card, cardVariants };

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    label?: string;
+    indeterminate?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef, useEffect, useRef } from "react";
+import { checkboxContainer, checkboxInput, checkboxLabel } from "./styles.css.js";
+import Box from "../Box/index.js";
+const Checkbox = /*#__PURE__*/ forwardRef(({ label, className, indeterminate, ...props }, ref)=>{
+    const inputRef = useRef(null);
+    const combinedRef = (node)=>{
+        if ('function' == typeof ref) ref(node);
+        else if (ref) ref.current = node;
+        inputRef.current = node;
+    };
+    useEffect(()=>{
+        if (inputRef.current) inputRef.current.indeterminate = !!indeterminate;
+    }, [
+        indeterminate
+    ]);
+    return /*#__PURE__*/ jsxs(Box, {
+        as: "label",
+        className: clsx(checkboxContainer, className),
+        display: "flex",
+        alignItems: "center",
+        gap: "small",
+        cursor: "pointer",
+        style: {
+            userSelect: 'none'
+        },
+        children: [
+            /*#__PURE__*/ jsx(Box, {
+                as: "input",
+                type: "checkbox",
+                ref: combinedRef,
+                className: checkboxInput,
+                style: {
+                    width: '18px',
+                    height: '18px'
+                },
+                ...props
+            }),
+            label && /*#__PURE__*/ jsx(Box, {
+                as: "span",
+                className: checkboxLabel,
+                children: label
+            })
+        ]
+    });
+});
+Checkbox.displayName = 'Checkbox';
+const Checkbox_Checkbox = Checkbox;
+export { Checkbox_Checkbox as default };

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

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

package/dist/components/Checkbox/index.js

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

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

@@ -0,0 +1,3 @@
+export declare const checkboxContainer: string;
+export declare const checkboxInput: string;
+export declare const checkboxLabel: string;

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

@@ -0,0 +1,32 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "../../styles/theme.css.js";
+import { styleWithLayer } from "../../styles/utils.js";
+const checkboxContainer = styleWithLayer({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    cursor: 'pointer',
+    userSelect: 'none'
+});
+const checkboxInput = style({
+    width: '18px',
+    height: '18px',
+    border: `2px solid ${vars.colors.borderDefault}`,
+    borderRadius: '4px',
+    cursor: 'pointer',
+    accentColor: vars.colors.buttonBackgroundPrimary,
+    ':focus-visible': {
+        outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+        outlineOffset: '2px'
+    },
+    ':disabled': {
+        cursor: 'not-allowed',
+        opacity: 0.5
+    }
+});
+const checkboxLabel = styleWithLayer({
+    fontFamily: vars.fontFamily.body,
+    fontSize: '14px',
+    color: vars.colors.textPrimary
+});
+export { checkboxContainer, checkboxInput, checkboxLabel };

package/dist/components/Collapse/Collapse.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type CollapseAnimation = 'height' | 'opacity' | 'both';
+export interface CollapseProps {
+    isOpen: boolean;
+    children: React.ReactNode;
+    animation?: CollapseAnimation;
+    duration?: number;
+    className?: string;
+    onAnimationEnd?: () => void;
+}
+declare const Collapse: ({ isOpen, children, animation, duration, className, onAnimationEnd, }: CollapseProps) => React.JSX.Element | null;
+export default Collapse;

package/dist/components/Collapse/Collapse.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
+import { collapseContainer, collapseContent } from "./styles.css.js";
+import Box from "../Box/index.js";
+const Collapse = ({ isOpen, children, animation = 'both', duration = 300, className, onAnimationEnd })=>{
+    const [height, setHeight] = useState(isOpen ? void 0 : 0);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const contentRef = useRef(null);
+    useEffect(()=>{
+        if (isOpen) {
+            setIsAnimating(true);
+            if (contentRef.current) setHeight(contentRef.current.scrollHeight);
+        } else {
+            setIsAnimating(true);
+            setHeight(0);
+        }
+    }, [
+        isOpen
+    ]);
+    const handleTransitionEnd = ()=>{
+        setIsAnimating(false);
+        if (isOpen) setHeight(void 0);
+        onAnimationEnd?.();
+    };
+    const getAnimationStyles = ()=>{
+        const baseStyles = {
+            transition: `height ${duration}ms ease-out, opacity ${duration}ms ease-out`,
+            height: void 0 !== height ? `${height}px` : void 0,
+            opacity: isOpen || isAnimating ? 1 : 0
+        };
+        if ('height' === animation) return {
+            ...baseStyles,
+            transition: `height ${duration}ms ease-out`,
+            opacity: 1
+        };
+        if ('opacity' === animation) return {
+            ...baseStyles,
+            transition: `opacity ${duration}ms ease-out`,
+            height: void 0
+        };
+        return baseStyles;
+    };
+    if (!isOpen && !isAnimating && 'opacity' !== animation) return null;
+    return /*#__PURE__*/ jsx(Box, {
+        className: clsx(collapseContainer, className),
+        style: getAnimationStyles(),
+        onTransitionEnd: handleTransitionEnd,
+        "aria-hidden": !isOpen,
+        children: /*#__PURE__*/ jsx(Box, {
+            ref: contentRef,
+            className: collapseContent,
+            children: children
+        })
+    });
+};
+const Collapse_Collapse = Collapse;
+export { Collapse_Collapse as default };

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

@@ -0,0 +1,2 @@
+export { default as Collapse } from './Collapse';
+export type { CollapseProps, CollapseAnimation } from './Collapse';

package/dist/components/Collapse/index.js

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

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

@@ -0,0 +1,3 @@
+export declare const collapseContainer: string;
+export declare const collapseContent: string;
+export declare const collapseAnimation: Record<"in" | "out", string>;