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

package/dist/components/Radio/Radio.js

@@ -1,60 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { createContext, forwardRef, useContext } from "react";
-import { radioContainer, radioGroup, radioGroupHorizontal, radioInput, radioLabel } from "./styles.css.js";
-import Box from "../Box/index.js";
-const RadioContext = /*#__PURE__*/ createContext({});
-const Radio = /*#__PURE__*/ forwardRef(({ label, className, value, ...props }, ref)=>{
-    const context = useContext(RadioContext);
-    const name = context.name || props.name;
-    const isChecked = context.value === value;
-    const handleChange = ()=>{
-        if (context.onChange) context.onChange(value);
-    };
-    return /*#__PURE__*/ jsxs(Box, {
-        as: "label",
-        className: clsx(radioContainer, className),
-        display: "flex",
-        alignItems: "center",
-        gap: "small",
-        cursor: "pointer",
-        style: {
-            userSelect: 'none'
-        },
-        children: [
-            /*#__PURE__*/ jsx(Box, {
-                as: "input",
-                type: "radio",
-                ref: ref,
-                name: name,
-                value: value,
-                checked: isChecked,
-                onChange: handleChange,
-                className: radioInput,
-                ...props
-            }),
-            label && /*#__PURE__*/ jsx(Box, {
-                as: "span",
-                className: radioLabel,
-                children: label
-            })
-        ]
-    });
-});
-Radio.displayName = 'Radio';
-const RadioGroup = ({ children, name, value, onChange, layout = 'vertical', className })=>/*#__PURE__*/ jsx(RadioContext.Provider, {
-        value: {
-            name,
-            value,
-            onChange
-        },
-        children: /*#__PURE__*/ jsx(Box, {
-            className: clsx('horizontal' === layout ? radioGroupHorizontal : radioGroup, className),
-            children: children
-        })
-    });
-const RadioComponent = Object.assign(Radio, {
-    Group: RadioGroup
-});
-const Radio_Radio = RadioComponent;
-export { Radio_Radio as default };

package/dist/components/Radio/index.js

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

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

@@ -1,5 +0,0 @@
-export declare const radioContainer: string;
-export declare const radioInput: string;
-export declare const radioLabel: string;
-export declare const radioGroup: string;
-export declare const radioGroupHorizontal: string;

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

@@ -1,43 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const radioContainer = styleWithLayer({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '8px',
-    cursor: 'pointer',
-    userSelect: 'none'
-});
-const radioInput = style({
-    width: '18px',
-    height: '18px',
-    border: `2px solid ${vars.colors.borderDefault}`,
-    borderRadius: '50%',
-    cursor: 'pointer',
-    accentColor: vars.colors.buttonBackgroundPrimary,
-    ':focus-visible': {
-        outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-        outlineOffset: '2px'
-    },
-    ':disabled': {
-        cursor: 'not-allowed',
-        opacity: 0.5
-    }
-});
-const radioLabel = styleWithLayer({
-    fontFamily: vars.fontFamily.body,
-    fontSize: '14px',
-    color: vars.colors.textPrimary
-});
-const radioGroup = styleWithLayer({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '8px'
-});
-const radioGroupHorizontal = styleWithLayer({
-    display: 'flex',
-    flexDirection: 'row',
-    gap: '16px',
-    flexWrap: 'wrap'
-});
-export { radioContainer, radioGroup, radioGroupHorizontal, radioInput, radioLabel };

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export type ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
-export interface ScrollAreaProps {
-    children: React.ReactNode;
-    orientation?: ScrollAreaOrientation;
-    maxHeight?: string | number;
-    maxWidth?: string | number;
-    className?: string;
-}
-declare const ScrollArea: ({ children, orientation, maxHeight, maxWidth, className, ...props }: ScrollAreaProps) => React.JSX.Element;
-export default ScrollArea;

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,22 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import "react";
-import { scrollArea, scrollAreaOrientation, scrollAreaViewport } from "./styles.css.js";
-import Box from "../Box/index.js";
-const ScrollArea = ({ children, orientation = 'vertical', maxHeight, maxWidth, className, ...props })=>{
-    const style = {
-        maxHeight,
-        maxWidth
-    };
-    return /*#__PURE__*/ jsx(Box, {
-        className: clsx(scrollArea, scrollAreaOrientation[orientation], className),
-        style: style,
-        ...props,
-        children: /*#__PURE__*/ jsx(Box, {
-            className: scrollAreaViewport,
-            children: children
-        })
-    });
-};
-const ScrollArea_ScrollArea = ScrollArea;
-export { ScrollArea_ScrollArea as default };

package/dist/components/ScrollArea/index.js

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

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

@@ -1,3 +0,0 @@
-export declare const scrollArea: string;
-export declare const scrollAreaOrientation: Record<"both" | "horizontal" | "vertical", string>;
-export declare const scrollAreaViewport: string;

package/dist/components/ScrollArea/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 scrollArea = styleWithLayer({
-    overflow: 'auto',
-    scrollbarWidth: 'thin',
-    scrollbarColor: `${vars.colors.borderDefault} ${vars.colors.backgroundMuted}`
-});
-const scrollAreaOrientation = styleVariants({
-    vertical: {
-        overflowX: 'hidden',
-        overflowY: 'auto'
-    },
-    horizontal: {
-        overflowX: 'auto',
-        overflowY: 'hidden'
-    },
-    both: {
-        overflow: 'auto'
-    }
-});
-const scrollAreaViewport = styleWithLayer({
-    width: '100%',
-    height: '100%'
-});
-export { scrollArea, scrollAreaOrientation, scrollAreaViewport };

package/dist/components/Select/Select.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-type SelectOption = {
-    value: string;
-    label: string;
-    disabled?: boolean;
-};
-declare const Select: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & {
-    label?: string;
-    options: SelectOption[];
-    error?: boolean;
-    fullWidth?: boolean;
-} & React.RefAttributes<HTMLSelectElement>>;
-export default Select;

package/dist/components/Select/Select.js

@@ -1,36 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { forwardRef } from "react";
-import { select as external_styles_css_js_select, selectLabel, selectWrapper } from "./styles.css.js";
-import Box from "../Box/index.js";
-const Select = /*#__PURE__*/ forwardRef(({ label, options, error = false, fullWidth = true, className, ...props }, ref)=>/*#__PURE__*/ jsxs(Box, {
-        className: selectWrapper,
-        width: "100%",
-        children: [
-            label && /*#__PURE__*/ jsx(Box, {
-                as: "label",
-                className: selectLabel,
-                display: "block",
-                fontSize: "14px",
-                fontWeight: "500",
-                color: "c5-700",
-                marginBottom: "small",
-                children: label
-            }),
-            /*#__PURE__*/ jsx(Box, {
-                as: "select",
-                ref: ref,
-                className: clsx(external_styles_css_js_select[error ? 'error' : 'default'], className),
-                width: fullWidth ? '100%' : void 0,
-                ...props,
-                children: options.map((option)=>/*#__PURE__*/ jsx("option", {
-                        value: option.value,
-                        disabled: option.disabled,
-                        children: option.label
-                    }, option.value))
-            })
-        ]
-    }));
-Select.displayName = 'Select';
-const Select_Select = Select;
-export { Select_Select as default };

package/dist/components/Select/index.js

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

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

@@ -1,4 +0,0 @@
-export declare const selectContainer: string;
-export declare const select: Record<"default" | "error", string>;
-export declare const selectLabel: string;
-export declare const selectWrapper: string;

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

@@ -1,83 +0,0 @@
-import { styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const selectContainer = styleWithLayer({
-    width: '100%'
-});
-const styles_css_select = styleVariants({
-    default: {
-        width: '100%',
-        padding: '0.75rem 1rem',
-        fontSize: '14px',
-        fontFamily: vars.fontFamily.body,
-        color: vars.colors.textPrimary,
-        backgroundColor: vars.colors.inputBackground,
-        border: `1px solid ${vars.colors.inputBorder}`,
-        borderRadius: '8px',
-        cursor: 'pointer',
-        outline: 'none',
-        appearance: 'none',
-        backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23252525' d='M6 8L1 3h10z'/%3E%3C/svg%3E\")",
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'right 12px center',
-        transition: 'border-color 0.2s ease',
-        '::placeholder': {
-            color: vars.colors.inputPlaceholder
-        },
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.inputBorderFocused}`,
-            outlineOffset: '2px'
-        },
-        ':hover:not(:disabled)': {
-            borderColor: vars.colors.inputBorderFocused
-        },
-        ':disabled': {
-            cursor: 'not-allowed',
-            opacity: 0.5,
-            backgroundColor: vars.colors.backgroundMuted
-        }
-    },
-    error: {
-        width: '100%',
-        padding: '0.75rem 1rem',
-        fontSize: '14px',
-        fontFamily: vars.fontFamily.body,
-        color: vars.colors.textPrimary,
-        backgroundColor: vars.colors.inputBackground,
-        border: `1px solid ${vars.colors.alertErrorBorder}`,
-        borderRadius: '8px',
-        cursor: 'pointer',
-        outline: 'none',
-        appearance: 'none',
-        backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23252525' d='M6 8L1 3h10z'/%3E%3C/svg%3E\")",
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'right 12px center',
-        transition: 'border-color 0.2s ease',
-        '::placeholder': {
-            color: vars.colors.inputPlaceholder
-        },
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.alertErrorBorder}`,
-            outlineOffset: '2px'
-        },
-        ':hover:not(:disabled)': {
-            borderColor: vars.colors.alertErrorBorder
-        },
-        ':disabled': {
-            cursor: 'not-allowed',
-            opacity: 0.5,
-            backgroundColor: vars.colors.backgroundMuted
-        }
-    }
-});
-const selectLabel = styleWithLayer({
-    display: 'block',
-    fontSize: '14px',
-    fontWeight: '500',
-    color: vars.colors.textPrimary,
-    marginBottom: '8px'
-});
-const selectWrapper = styleWithLayer({
-    width: '100%'
-});
-export { styles_css_select as select, selectContainer, selectLabel, selectWrapper };

package/dist/components/Separator/Separator.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export type SeparatorOrientation = 'horizontal' | 'vertical';
-export interface SeparatorProps {
-    orientation?: SeparatorOrientation;
-    decorative?: boolean;
-    className?: string;
-}
-declare const Separator: ({ orientation, decorative, className, ...props }: SeparatorProps) => React.JSX.Element;
-export default Separator;

package/dist/components/Separator/Separator.js

@@ -1,13 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import "react";
-import { separator, separatorOrientation } from "./styles.css.js";
-import Box from "../Box/index.js";
-const Separator = ({ orientation = 'horizontal', decorative = false, className, ...props })=>/*#__PURE__*/ jsx(Box, {
-        as: "hr",
-        className: clsx(separator, separatorOrientation[orientation], className),
-        "aria-hidden": decorative,
-        ...props
-    });
-const Separator_Separator = Separator;
-export { Separator_Separator as default };

package/dist/components/Separator/index.js

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

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

@@ -1,4 +0,0 @@
-export declare const separator: string;
-export declare const separatorOrientation: Record<"horizontal" | "vertical", string>;
-export declare const separatorSize: Record<"medium" | "large" | "small", string>;
-export declare const separatorDecorative: string;

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

@@ -1,29 +0,0 @@
-import { styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const separator = styleWithLayer({
-    border: 'none',
-    margin: 0,
-    flexShrink: 0
-});
-const separatorOrientation = styleVariants({
-    horizontal: {
-        width: '100%',
-        height: '1px',
-        backgroundColor: vars.colors.borderDefault
-    },
-    vertical: {
-        width: '1px',
-        height: '100%',
-        backgroundColor: vars.colors.borderDefault
-    }
-});
-const separatorSize = styleVariants({
-    small: {},
-    medium: {},
-    large: {}
-});
-const separatorDecorative = styleWithLayer({
-    backgroundColor: vars.colors.borderMuted
-});
-export { separator, separatorDecorative, separatorOrientation, separatorSize };

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-export type SkeletonVariant = 'text' | 'circle' | 'rectangle';
-export type SkeletonSize = 'small' | 'medium' | 'large';
-export type SkeletonAnimation = 'shimmer' | 'pulse' | 'none';
-export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: SkeletonVariant;
-    size?: SkeletonSize;
-    animation?: SkeletonAnimation;
-    width?: string | number;
-    height?: string | number;
-    count?: number;
-}
-declare const Skeleton: ({ variant, size, animation, width, height, count, className, ...props }: SkeletonProps) => React.JSX.Element;
-export default Skeleton;

package/dist/components/Skeleton/Skeleton.js

@@ -1,28 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import "react";
-import { skeleton, skeletonAnimation, skeletonSizes, skeletonVariants } from "./styles.css.js";
-import Box from "../Box/index.js";
-const Skeleton = ({ variant = 'text', size = 'medium', animation = 'shimmer', width, height, count = 1, className, ...props })=>{
-    const style = {
-        width: width,
-        height: height
-    };
-    const skeletons = Array.from({
-        length: count
-    }, (_, index)=>/*#__PURE__*/ jsx(Box, {
-            as: "span",
-            className: clsx(skeleton, skeletonVariants[variant], skeletonSizes[size], skeletonAnimation[animation], className),
-            style: style,
-            "aria-hidden": "true",
-            ...props
-        }, index));
-    return /*#__PURE__*/ jsx(Box, {
-        display: "flex",
-        flexDirection: "column",
-        gap: "small",
-        children: skeletons
-    });
-};
-const Skeleton_Skeleton = Skeleton;
-export { Skeleton_Skeleton as default };

package/dist/components/Skeleton/index.js

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

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

@@ -1,4 +0,0 @@
-export declare const skeletonVariants: Record<"text" | "circle" | "rectangle", string>;
-export declare const skeletonSizes: Record<"medium" | "large" | "small", string>;
-export declare const skeletonAnimation: Record<"none" | "shimmer" | "pulse", string>;
-export declare const skeleton: string;

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

@@ -1,65 +0,0 @@
-import { keyframes, styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const shimmer = keyframes({
-    '0%': {
-        backgroundPosition: '-200% 0'
-    },
-    '100%': {
-        backgroundPosition: '200% 0'
-    }
-});
-const pulse = keyframes({
-    '0%, 100%': {
-        opacity: 1
-    },
-    '50%': {
-        opacity: 0.5
-    }
-});
-const skeletonVariants = styleVariants({
-    text: {
-        borderRadius: '0.25rem'
-    },
-    circle: {
-        borderRadius: '50%'
-    },
-    rectangle: {
-        borderRadius: '0.5rem'
-    }
-});
-const skeletonSizes = styleVariants({
-    small: {
-        height: '1rem'
-    },
-    medium: {
-        height: '1.5rem'
-    },
-    large: {
-        height: '2rem'
-    }
-});
-const skeletonAnimation = styleVariants({
-    shimmer: {
-        background: `linear-gradient(
-      90deg,
-      ${vars.colors.borderMuted} 25%,
-      ${vars.colors.borderDefault} 50%,
-      ${vars.colors.borderMuted} 75%
-    )`,
-        backgroundSize: '200% 100%',
-        animation: `${shimmer} 1.5s ease-in-out infinite`
-    },
-    pulse: {
-        backgroundColor: vars.colors.borderMuted,
-        animation: `${pulse} 2s ease-in-out infinite`
-    },
-    none: {
-        backgroundColor: vars.colors.borderMuted
-    }
-});
-const skeleton = styleWithLayer({
-    width: '100%',
-    display: 'inline-block'
-});
-export { skeleton, skeletonAnimation, skeletonSizes, skeletonVariants };

package/dist/components/Spinner/Spinner.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export type SpinnerColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
-export type SpinnerSize = 'small' | 'medium' | 'large';
-export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
-    color?: SpinnerColor;
-    size?: SpinnerSize;
-    role?: string;
-}
-declare const Spinner: ({ color, size, role, ...props }: SpinnerProps) => React.JSX.Element;
-export default Spinner;

package/dist/components/Spinner/Spinner.js

@@ -1,14 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { spinner, spinnerColors, spinnerSizes } from "./styles.css.js";
-import "react";
-import Box from "../Box/index.js";
-const Spinner = ({ color = 'primary', size = 'medium', role = 'status', ...props })=>/*#__PURE__*/ jsx(Box, {
-        as: "div",
-        className: clsx(spinner, spinnerColors[color], spinnerSizes[size], props.className),
-        role: role,
-        "aria-label": "Loading",
-        ...props
-    });
-const Spinner_Spinner = Spinner;
-export { Spinner_Spinner as default };

package/dist/components/Spinner/index.js

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

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

@@ -1,4 +0,0 @@
-export declare const spin: string;
-export declare const spinnerColors: Record<"success" | "warning" | "error" | "info" | "primary" | "secondary", string>;
-export declare const spinnerSizes: Record<"medium" | "large" | "small", string>;
-export declare const spinner: string;

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

@@ -1,60 +0,0 @@
-import { keyframes, style, styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-const spin = keyframes({
-    '0%': {
-        transform: 'rotate(0deg)'
-    },
-    '100%': {
-        transform: 'rotate(360deg)'
-    }
-});
-const spinnerColors = styleVariants({
-    primary: {
-        borderColor: vars.colors.borderDefault,
-        borderTopColor: vars.colors.buttonBackgroundPrimary
-    },
-    secondary: {
-        borderColor: vars.colors.borderDefault,
-        borderTopColor: vars.colors.buttonBackgroundSecondary
-    },
-    success: {
-        borderColor: vars.colors.borderDefault,
-        borderTopColor: vars.colors.alertSuccessBorder
-    },
-    warning: {
-        borderColor: vars.colors.borderDefault,
-        borderTopColor: vars.colors.alertWarningBorder
-    },
-    error: {
-        borderColor: vars.colors.borderDefault,
-        borderTopColor: vars.colors.alertErrorBorder
-    },
-    info: {
-        borderColor: vars.colors.borderDefault,
-        borderTopColor: vars.colors.alertInfoBorder
-    }
-});
-const spinnerSizes = styleVariants({
-    small: {
-        width: '1rem',
-        height: '1rem',
-        borderWidth: '2px'
-    },
-    medium: {
-        width: '1.5rem',
-        height: '1.5rem',
-        borderWidth: '3px'
-    },
-    large: {
-        width: '2rem',
-        height: '2rem',
-        borderWidth: '4px'
-    }
-});
-const spinner = style({
-    borderRadius: '50%',
-    borderStyle: 'solid',
-    animation: `${spin} 1s linear infinite`,
-    display: 'inline-block'
-});
-export { spin, spinner, spinnerColors, spinnerSizes };

package/dist/components/Stack/Stack.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-export type StackDirection = 'row' | 'column';
-export type StackAlign = 'start' | 'center' | 'end' | 'stretch';
-export type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-export interface StackProps {
-    direction?: StackDirection;
-    align?: StackAlign;
-    justify?: StackJustify;
-    gap?: 'none' | 'small' | 'medium' | 'large';
-    wrap?: boolean;
-    children?: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-}
-declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;
-export default Stack;