@jordan-mace/chaser-design-system 1.2.7 → 1.2.9

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

@@ -1,65 +0,0 @@
-import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const accordion = styleWithLayer({
-    width: '100%',
-    fontFamily: vars.fontFamily.body,
-});
-export const accordionItem = style({
-    width: '100%',
-    marginBottom: '4px',
-    border: `1px solid ${vars.colors.borderDefault}`,
-    borderRadius: '8px',
-    overflow: 'hidden',
-});
-export 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',
-    },
-});
-export 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',
-    },
-});
-export const accordionIcon = style({
-    fontSize: '12px',
-    transition: 'transform 0.2s ease',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-});
-export const accordionIconExpanded = style({
-    transform: 'rotate(180deg)',
-});
-export const accordionGroup = styleWithLayer({
-    width: '100%',
-});

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) => import("react/jsx-runtime").JSX.Element;
-export default Alert;

package/dist/components/Alert/Alert.js

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

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

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

package/dist/components/Alert/index.js

@@ -1 +0,0 @@
-export { default as Alert } from './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,54 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export 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,
-    },
-});
-export const 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',
-});
-export const alertContent = styleWithLayer({
-    flex: 1,
-});
-export 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,
-    },
-});

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,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import Box from '../Box';
-const AspectRatio = forwardRef(({ ratio = '1/1', children, ...props }, ref) => {
-    const aspectRatio = typeof ratio === 'number' ? ratio : ratio;
-    return (_jsx(Box, { ref: ref, position: "relative", style: {
-            aspectRatio,
-            overflow: 'hidden',
-        }, ...props, children: _jsx(Box, { position: "absolute", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", children: children }) }));
-});
-AspectRatio.displayName = 'AspectRatio';
-export default AspectRatio;

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

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

package/dist/components/AspectRatio/index.js

@@ -1 +0,0 @@
-export { default as AspectRatio } from './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) => import("react/jsx-runtime").JSX.Element;
-export default Avatar;

package/dist/components/Avatar/Avatar.js

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

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

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

package/dist/components/Avatar/index.js

@@ -1 +0,0 @@
-export { default as Avatar } from './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,151 +0,0 @@
-import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export 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',
-        },
-    },
-});
-export const avatarImage = style({
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-});
-export 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',
-        },
-    },
-});
-export const avatarWrapper = styleWithLayer({
-    display: 'inline-flex',
-});

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) => import("react/jsx-runtime").JSX.Element;
-export default Badge;

package/dist/components/Badge/Badge.js

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

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

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

package/dist/components/Badge/index.js

@@ -1 +0,0 @@
-export { default as Badge } from './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,77 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export 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}`,
-    },
-});
-export 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',
-    },
-});
-export 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',
-});
-export const badgeDot = styleWithLayer({
-    width: '0.5rem',
-    height: '0.5rem',
-    borderRadius: '50%',
-    display: 'inline-block',
-    padding: 0,
-    minWidth: 'auto',
-});
-export const badgeDotSizes = styleVariants({
-    small: {
-        width: '0.375rem',
-        height: '0.375rem',
-    },
-    medium: {
-        width: '0.5rem',
-        height: '0.5rem',
-    },
-    large: {
-        width: '0.625rem',
-        height: '0.625rem',
-    },
-});

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 };

package/dist/components/Box/Box.js

@@ -1,54 +0,0 @@
-import clsx from 'clsx';
-import { sprinkles } from '../../styles/sprinkles.css';
-import { reset } from './reset.css';
-import React, { forwardRef } from 'react';
-const Box = 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 React.createElement(Component, {
-        className: clsx(reset, sprinkles(sprinkleProps), className),
-        ...otherProps,
-    }, children);
-});
-Box.displayName = 'Box';
-export default Box;

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

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

package/dist/components/Box/index.js

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

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

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

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

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

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

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

package/dist/components/Breadcrumb/Breadcrumb.js

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

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

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

package/dist/components/Breadcrumb/index.js

@@ -1 +0,0 @@
-export { default as Breadcrumb } from './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;