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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+type AccordionProps = {
+    children: React.ReactNode;
+    allowMultiple?: boolean;
+    className?: string;
+};
+type AccordionItemProps = {
+    value: string;
+    title: string;
+    children: React.ReactNode;
+    className?: string;
+};
+declare const AccordionComponent: (({ children, allowMultiple, className, }: AccordionProps) => React.JSX.Element) & {
+    Item: ({ value, title, children, className, }: AccordionItemProps) => React.JSX.Element;
+};
+export default AccordionComponent;

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,108 @@
+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.d.ts

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

package/dist/components/Accordion/index.js

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

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

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

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

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

@@ -0,0 +1,28 @@
+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.d.ts

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

package/dist/components/Alert/index.js

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

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

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

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

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

@@ -0,0 +1,27 @@
+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.d.ts

@@ -0,0 +1,2 @@
+export { default as AspectRatio } from './AspectRatio';
+export type { AspectRatioProps, AspectRatioValue } from './AspectRatio';

package/dist/components/AspectRatio/index.js

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

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

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

@@ -0,0 +1,27 @@
+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.d.ts

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

package/dist/components/Avatar/index.js

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge';
+export type { BadgeProps, BadgeVariant, BadgeSize } from './Badge';

package/dist/components/Badge/index.js

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

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

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