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

package/dist/components/Box/Box.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,37 +0,0 @@
-import { keyframes, styleVariants } from "@vanilla-extract/css";
-import { styleWithLayer } from "../../styles/utils.js";
-const collapseIn = keyframes({
-    from: {
-        height: 0,
-        opacity: 0
-    },
-    to: {
-        height: 'auto',
-        opacity: 1
-    }
-});
-const collapseOut = keyframes({
-    from: {
-        height: 'auto',
-        opacity: 1
-    },
-    to: {
-        height: 0,
-        opacity: 0
-    }
-});
-const collapseContainer = styleWithLayer({
-    overflow: 'hidden'
-});
-const collapseContent = styleWithLayer({
-    width: '100%'
-});
-const collapseAnimation = styleVariants({
-    in: {
-        animation: `${collapseIn} 0.3s ease-out forwards`
-    },
-    out: {
-        animation: `${collapseOut} 0.3s ease-out forwards`
-    }
-});
-export { collapseAnimation, collapseContainer, collapseContent };

package/dist/components/Combobox/Combobox.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-export interface ComboboxOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-}
-export interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
-    label?: string;
-    options: ComboboxOption[];
-    value?: string;
-    onChange?: (value: string, option: ComboboxOption | null) => void;
-    onInputChange?: (inputValue: string) => void;
-    placeholder?: string;
-    hint?: string;
-    error?: boolean;
-    errorMessage?: string;
-    fullWidth?: boolean;
-    clearable?: boolean;
-    disabled?: boolean;
-    filterFn?: (option: ComboboxOption, inputValue: string) => boolean;
-}
-declare const Combobox: ({ label, options, value, onChange, onInputChange, placeholder, hint, error, errorMessage, fullWidth, clearable, disabled, filterFn, className, ...props }: ComboboxProps) => React.JSX.Element;
-export default Combobox;