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

package/dist/components/Accordion/Accordion.js

@@ -1,108 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { createContext, useCallback, useContext, useState } from "react";
-import { accordionContent, accordionGroup, accordionHeader, accordionIcon, accordionIconExpanded, accordionItem } from "./styles.css.js";
-import Box from "../Box/index.js";
-const AccordionContext = /*#__PURE__*/ createContext({
-    allowMultiple: false,
-    expandedItems: new Set(),
-    toggleItem: ()=>{}
-});
-const Accordion = ({ children, allowMultiple = false, className })=>{
-    const [expandedItems, setExpandedItems] = useState(new Set());
-    const toggleItem = (value)=>{
-        setExpandedItems((prev)=>{
-            const newSet = new Set(prev);
-            if (newSet.has(value)) newSet.delete(value);
-            else {
-                if (!allowMultiple) return new Set([
-                    value
-                ]);
-                newSet.add(value);
-            }
-            return newSet;
-        });
-    };
-    return /*#__PURE__*/ jsx(AccordionContext.Provider, {
-        value: {
-            allowMultiple,
-            expandedItems,
-            toggleItem
-        },
-        children: /*#__PURE__*/ jsx(Box, {
-            className: clsx(accordionGroup, className),
-            width: "100%",
-            children: children
-        })
-    });
-};
-const AccordionItem = ({ value, title, children, className })=>{
-    const { expandedItems, toggleItem } = useContext(AccordionContext);
-    const isExpanded = expandedItems.has(value);
-    const toggleExpanded = useCallback(()=>{
-        toggleItem(value);
-    }, [
-        value,
-        toggleItem
-    ]);
-    return /*#__PURE__*/ jsxs(Box, {
-        as: "div",
-        className: clsx(accordionItem, className),
-        width: "100%",
-        marginBottom: "small",
-        border: "small",
-        borderRadius: "large",
-        overflow: "hidden",
-        children: [
-            /*#__PURE__*/ jsxs(Box, {
-                as: "button",
-                onClick: toggleExpanded,
-                className: accordionHeader,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                padding: "small",
-                cursor: "pointer",
-                style: {
-                    userSelect: 'none'
-                },
-                fontSize: "14px",
-                fontWeight: "500",
-                color: "c5-700",
-                "aria-expanded": isExpanded,
-                "aria-controls": `accordion-content-${value}`,
-                children: [
-                    /*#__PURE__*/ jsx(Box, {
-                        as: "span",
-                        children: title
-                    }),
-                    /*#__PURE__*/ jsx(Box, {
-                        as: "span",
-                        className: clsx(accordionIcon, isExpanded && accordionIconExpanded),
-                        fontSize: "12px",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        "aria-hidden": "true",
-                        children: "▼"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(Box, {
-                as: "div",
-                id: `accordion-content-${value}`,
-                className: clsx(accordionContent[isExpanded ? 'expanded' : 'collapsed']),
-                padding: "small",
-                fontSize: "14px",
-                color: "c5-700",
-                role: "region",
-                children: children
-            })
-        ]
-    });
-};
-const AccordionComponent = Object.assign(Accordion, {
-    Item: AccordionItem
-});
-const Accordion_Accordion = AccordionComponent;
-export { Accordion_Accordion as default };

package/dist/components/Accordion/index.js

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

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

@@ -1,7 +0,0 @@
-export declare const accordion: string;
-export declare const accordionItem: string;
-export declare const accordionHeader: string;
-export declare const accordionContent: Record<"expanded" | "collapsed", string>;
-export declare const accordionIcon: string;
-export declare const accordionIconExpanded: string;
-export declare const accordionGroup: string;

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

@@ -1,66 +0,0 @@
-import { style, styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const accordion = styleWithLayer({
-    width: '100%',
-    fontFamily: vars.fontFamily.body
-});
-const accordionItem = style({
-    width: '100%',
-    marginBottom: '4px',
-    border: `1px solid ${vars.colors.borderDefault}`,
-    borderRadius: '8px',
-    overflow: 'hidden'
-});
-const accordionHeader = style({
-    width: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: '12px 16px',
-    backgroundColor: vars.colors.backgroundMuted,
-    cursor: 'pointer',
-    userSelect: 'none',
-    fontSize: '14px',
-    fontWeight: '500',
-    color: vars.colors.textPrimary,
-    transition: 'background-color 0.2s ease',
-    ':hover': {
-        backgroundColor: vars.colors.backgroundDefault
-    },
-    ':focus-visible': {
-        outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-        outlineOffset: '-2px'
-    }
-});
-const accordionContent = styleVariants({
-    collapsed: {
-        display: 'none',
-        padding: '0 16px',
-        fontSize: '14px',
-        color: vars.colors.textPrimary,
-        backgroundColor: vars.colors.backgroundDefault
-    },
-    expanded: {
-        display: 'block',
-        padding: '12px 16px',
-        fontSize: '14px',
-        color: vars.colors.textPrimary,
-        backgroundColor: vars.colors.backgroundDefault,
-        animation: 'slideDown 0.2s ease'
-    }
-});
-const accordionIcon = style({
-    fontSize: '12px',
-    transition: 'transform 0.2s ease',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-});
-const accordionIconExpanded = style({
-    transform: 'rotate(180deg)'
-});
-const accordionGroup = styleWithLayer({
-    width: '100%'
-});
-export { accordion, accordionContent, accordionGroup, accordionHeader, accordionIcon, accordionIconExpanded, accordionItem };

package/dist/components/Alert/Alert.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-type AlertProps = React.HTMLAttributes<HTMLDivElement> & {
-    severity?: 'success' | 'warning' | 'error' | 'info';
-    dismissible?: boolean;
-    onDismiss?: () => void;
-    children?: React.ReactNode;
-};
-declare const Alert: ({ severity, dismissible, onDismiss, children, ...props }: AlertProps) => React.JSX.Element;
-export default Alert;

package/dist/components/Alert/Alert.js

@@ -1,28 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { alert as external_styles_css_js_alert, alertContent, alertDismissButton, alertVariants } from "./styles.css.js";
-import "react";
-import Box from "../Box/index.js";
-const Alert = ({ severity = 'info', dismissible = false, onDismiss, children, ...props })=>/*#__PURE__*/ jsxs(Box, {
-        as: "div",
-        role: "alert",
-        className: clsx(external_styles_css_js_alert, alertVariants[severity], props.className),
-        ...props,
-        children: [
-            /*#__PURE__*/ jsx(Box, {
-                as: "div",
-                className: alertContent,
-                children: children
-            }),
-            dismissible && onDismiss && /*#__PURE__*/ jsx(Box, {
-                as: "button",
-                className: alertDismissButton,
-                onClick: onDismiss,
-                "aria-label": "Dismiss alert",
-                type: "button",
-                children: "\xd7"
-            })
-        ]
-    });
-const Alert_Alert = Alert;
-export { Alert_Alert as default };

package/dist/components/Alert/index.js

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

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

@@ -1,4 +0,0 @@
-export declare const alertVariants: Record<"success" | "warning" | "error" | "info", string>;
-export declare const alert: string;
-export declare const alertContent: string;
-export declare const alertDismissButton: string;

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

@@ -1,55 +0,0 @@
-import { styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const alertVariants = styleVariants({
-    success: {
-        backgroundColor: vars.colors.alertSuccessBackground,
-        borderLeftColor: vars.colors.alertSuccessBorder,
-        color: vars.colors.alertSuccessText
-    },
-    warning: {
-        backgroundColor: vars.colors.alertWarningBackground,
-        borderLeftColor: vars.colors.alertWarningBorder,
-        color: vars.colors.alertWarningText
-    },
-    error: {
-        backgroundColor: vars.colors.alertErrorBackground,
-        borderLeftColor: vars.colors.alertErrorBorder,
-        color: vars.colors.alertErrorText
-    },
-    info: {
-        backgroundColor: vars.colors.alertInfoBackground,
-        borderLeftColor: vars.colors.alertInfoBorder,
-        color: vars.colors.alertInfoText
-    }
-});
-const styles_css_alert = styleWithLayer({
-    padding: '1rem',
-    borderLeft: '4px solid',
-    borderRadius: '0.5rem',
-    display: 'flex',
-    alignItems: 'flex-start',
-    gap: '0.5rem',
-    fontFamily: vars.fontFamily.body,
-    fontSize: '0.875rem',
-    lineHeight: '1.5'
-});
-const alertContent = styleWithLayer({
-    flex: 1
-});
-const alertDismissButton = styleWithLayer({
-    background: 'none',
-    border: 'none',
-    padding: '0.25rem',
-    cursor: 'pointer',
-    borderRadius: '0.25rem',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    opacity: 0.7,
-    transition: 'opacity 0.2s ease-in-out',
-    ':hover': {
-        opacity: 1
-    }
-});
-export { styles_css_alert as alert, alertContent, alertDismissButton, alertVariants };

package/dist/components/AspectRatio/AspectRatio.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { type BoxProps } from '../Box';
-export type AspectRatioValue = '1/1' | '4/3' | '16/9' | '21/9' | number;
-export interface AspectRatioProps extends BoxProps {
-    ratio?: AspectRatioValue;
-    children?: React.ReactNode;
-}
-declare const AspectRatio: React.ForwardRefExoticComponent<Omit<AspectRatioProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export default AspectRatio;

package/dist/components/AspectRatio/AspectRatio.js

@@ -1,27 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import Box from "../Box/index.js";
-const AspectRatio = /*#__PURE__*/ forwardRef(({ ratio = '1/1', children, ...props }, ref)=>{
-    const aspectRatio = 'number' == typeof ratio ? ratio : ratio;
-    return /*#__PURE__*/ jsx(Box, {
-        ref: ref,
-        position: "relative",
-        style: {
-            aspectRatio,
-            overflow: 'hidden'
-        },
-        ...props,
-        children: /*#__PURE__*/ jsx(Box, {
-            position: "absolute",
-            width: "100%",
-            height: "100%",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            children: children
-        })
-    });
-});
-AspectRatio.displayName = 'AspectRatio';
-const AspectRatio_AspectRatio = AspectRatio;
-export { AspectRatio_AspectRatio as default };

package/dist/components/AspectRatio/index.js

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

package/dist/components/Avatar/Avatar.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-type AvatarProps = {
-    alt?: string;
-    className?: string;
-    src?: string;
-    size?: 'small' | 'medium' | 'large' | 'xlarge';
-    children?: React.ReactNode;
-    fallback?: string;
-};
-declare const Avatar: ({ alt, className, src, size, children, fallback, }: AvatarProps) => React.JSX.Element;
-export default Avatar;

package/dist/components/Avatar/Avatar.js

@@ -1,27 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import "react";
-import { avatar, avatarImage, avatarWithImage, avatarWrapper } from "./styles.css.js";
-import Box from "../Box/index.js";
-const Avatar = ({ alt, className, src, size = 'medium', children, fallback })=>{
-    const sizeClass = avatar[size];
-    if (src) return /*#__PURE__*/ jsx(Box, {
-        className: clsx(avatarWrapper, className),
-        display: "inline",
-        children: /*#__PURE__*/ jsx(Box, {
-            as: "img",
-            src: src,
-            alt: alt || 'Avatar',
-            className: clsx(avatarWithImage[size], avatarImage)
-        })
-    });
-    const initials = children || fallback;
-    return /*#__PURE__*/ jsx(Box, {
-        className: clsx(sizeClass, className),
-        role: "img",
-        "aria-label": alt,
-        children: initials
-    });
-};
-const Avatar_Avatar = Avatar;
-export { Avatar_Avatar as default };

package/dist/components/Avatar/index.js

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

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

@@ -1,4 +0,0 @@
-export declare const avatar: Record<"medium" | "large" | "small" | "base" | "xlarge", string>;
-export declare const avatarImage: string;
-export declare const avatarWithImage: Record<"medium" | "large" | "small" | "xlarge", string>;
-export declare const avatarWrapper: string;

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

@@ -1,152 +0,0 @@
-import { style, styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const avatar = styleVariants({
-    base: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: vars.colors.backgroundMuted,
-        color: vars.colors.textPrimary,
-        fontFamily: vars.fontFamily.body,
-        fontWeight: '500',
-        overflow: 'hidden',
-        userSelect: 'none',
-        textDecoration: 'none',
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-            outlineOffset: '2px'
-        }
-    },
-    small: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: vars.colors.backgroundMuted,
-        color: vars.colors.textPrimary,
-        fontFamily: vars.fontFamily.body,
-        fontWeight: '500',
-        overflow: 'hidden',
-        userSelect: 'none',
-        textDecoration: 'none',
-        width: '24px',
-        height: '24px',
-        fontSize: '12px',
-        borderRadius: '12px',
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-            outlineOffset: '2px'
-        }
-    },
-    medium: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: vars.colors.backgroundMuted,
-        color: vars.colors.textPrimary,
-        fontFamily: vars.fontFamily.body,
-        fontWeight: '500',
-        overflow: 'hidden',
-        userSelect: 'none',
-        textDecoration: 'none',
-        width: '32px',
-        height: '32px',
-        fontSize: '14px',
-        borderRadius: '16px',
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-            outlineOffset: '2px'
-        }
-    },
-    large: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: vars.colors.backgroundMuted,
-        color: vars.colors.textPrimary,
-        fontFamily: vars.fontFamily.body,
-        fontWeight: '500',
-        overflow: 'hidden',
-        userSelect: 'none',
-        textDecoration: 'none',
-        width: '40px',
-        height: '40px',
-        fontSize: '16px',
-        borderRadius: '20px',
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-            outlineOffset: '2px'
-        }
-    },
-    xlarge: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: vars.colors.backgroundMuted,
-        color: vars.colors.textPrimary,
-        fontFamily: vars.fontFamily.body,
-        fontWeight: '500',
-        overflow: 'hidden',
-        userSelect: 'none',
-        textDecoration: 'none',
-        width: '64px',
-        height: '64px',
-        fontSize: '24px',
-        borderRadius: '32px',
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-            outlineOffset: '2px'
-        }
-    }
-});
-const avatarImage = style({
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover'
-});
-const avatarWithImage = styleVariants({
-    small: {
-        width: '24px',
-        height: '24px',
-        borderRadius: '12px',
-        overflow: 'hidden',
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-            outlineOffset: '2px'
-        }
-    },
-    medium: {
-        width: '32px',
-        height: '32px',
-        borderRadius: '16px',
-        overflow: 'hidden',
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-            outlineOffset: '2px'
-        }
-    },
-    large: {
-        width: '40px',
-        height: '40px',
-        borderRadius: '20px',
-        overflow: 'hidden',
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-            outlineOffset: '2px'
-        }
-    },
-    xlarge: {
-        width: '64px',
-        height: '64px',
-        borderRadius: '32px',
-        overflow: 'hidden',
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-            outlineOffset: '2px'
-        }
-    }
-});
-const avatarWrapper = styleWithLayer({
-    display: 'inline-flex'
-});
-export { avatar, avatarImage, avatarWithImage, avatarWrapper };

package/dist/components/Badge/Badge.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
-export type BadgeSize = 'small' | 'medium' | 'large';
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-    variant?: BadgeVariant;
-    size?: BadgeSize;
-    dot?: boolean;
-    children?: React.ReactNode;
-}
-declare const Badge: ({ variant, size, dot, children, ...props }: BadgeProps) => React.JSX.Element;
-export default Badge;

package/dist/components/Badge/Badge.js

@@ -1,13 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { badge, badgeDot, badgeDotSizes, badgeSizes, badgeVariants } from "./styles.css.js";
-import "react";
-import Box from "../Box/index.js";
-const Badge = ({ variant = 'default', size = 'medium', dot = false, children, ...props })=>/*#__PURE__*/ jsx(Box, {
-        as: "span",
-        className: clsx(badge, badgeVariants[variant], dot ? badgeDot : badgeSizes[size], dot && badgeDotSizes[size], props.className),
-        ...props,
-        children: dot ? null : children
-    });
-const Badge_Badge = Badge;
-export { Badge_Badge as default };

package/dist/components/Badge/index.js

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

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

@@ -1,5 +0,0 @@
-export declare const badgeVariants: Record<"default" | "success" | "warning" | "error" | "info", string>;
-export declare const badgeSizes: Record<"medium" | "large" | "small", string>;
-export declare const badge: string;
-export declare const badgeDot: string;
-export declare const badgeDotSizes: Record<"medium" | "large" | "small", string>;

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

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

@@ -1,11 +0,0 @@
-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 };