@jordan-mace/chaser-design-system 1.2.8 → 2.0.0

package/dist/components/Toast/index.js

@@ -1 +0,0 @@
-export { ToastProvider, Toast, useToast, } from './Toast';

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

@@ -1,21 +0,0 @@
-export declare const slideInRight: string;
-export declare const slideInLeft: string;
-export declare const slideInTop: string;
-export declare const slideOutRight: string;
-export declare const slideOutLeft: string;
-export declare const slideInBottom: string;
-export declare const slideOutBottom: string;
-export declare const fadeIn: string;
-export declare const fadeOut: string;
-export declare const fadeOutSuccess: string;
-export declare const fadeOutError: string;
-export declare const fadeOutWarning: string;
-export declare const fadeOutInfo: string;
-export declare const slideOut: string;
-export declare const toastContainer: string;
-export declare const toastWrapper: Record<"topLeft" | "topCenter" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight", string>;
-export declare const toastItem: string;
-export declare const toastCloseButton: string;
-export declare const toastProgressBarContainer: string;
-export declare const toastProgressBar: string;
-export declare const toastContent: string;

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

@@ -1,192 +0,0 @@
-import { style, styleVariants, keyframes } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const slideInRight = keyframes({
-    '0%': {
-        transform: 'translateX(100%)',
-        opacity: '0',
-    },
-    '100%': {
-        transform: 'translateX(0)',
-        opacity: '1',
-    },
-});
-export const slideInLeft = keyframes({
-    '0%': {
-        transform: 'translateX(-100%)',
-        opacity: '0',
-    },
-    '100%': {
-        transform: 'translateX(0)',
-        opacity: '1',
-    },
-});
-export const slideInTop = keyframes({
-    '0%': {
-        transform: 'translateY(-100%)',
-        opacity: '0',
-    },
-    '100%': {
-        transform: 'translateY(0)',
-        opacity: '1',
-    },
-});
-export const slideOutRight = keyframes({
-    '0%': {
-        transform: 'translateX(0)',
-        opacity: '1',
-    },
-    '100%': {
-        transform: 'translateX(100%)',
-        opacity: '0',
-    },
-});
-export const slideOutLeft = keyframes({
-    '0%': {
-        transform: 'translateX(0)',
-        opacity: '1',
-    },
-    '100%': {
-        transform: 'translateX(-100%)',
-        opacity: '0',
-    },
-});
-export const slideInBottom = keyframes({
-    '0%': {
-        transform: 'translateY(100%)',
-        opacity: '0',
-    },
-    '100%': {
-        transform: 'translateY(0)',
-        opacity: '1',
-    },
-});
-export const slideOutBottom = keyframes({
-    '0%': {
-        transform: 'translateY(0)',
-        opacity: '1',
-    },
-    '100%': {
-        transform: 'translateY(100%)',
-        opacity: '0',
-    },
-});
-export const fadeIn = keyframes({
-    '0%': { opacity: '0' },
-    '100%': { opacity: '1' },
-});
-export const fadeOut = keyframes({
-    '0%': { opacity: '1' },
-    '100%': { opacity: '0' },
-});
-export const fadeOutSuccess = keyframes({
-    '0%': { opacity: '1' },
-    '100%': { opacity: '0' },
-});
-export const fadeOutError = keyframes({
-    '0%': { opacity: '1' },
-    '100%': { opacity: '0' },
-});
-export const fadeOutWarning = keyframes({
-    '0%': { opacity: '1' },
-    '100%': { opacity: '0' },
-});
-export const fadeOutInfo = keyframes({
-    '0%': { opacity: '1' },
-    '100%': { opacity: '0' },
-});
-export const slideOut = keyframes({
-    '0%': {
-        transform: 'translateX(0)',
-        opacity: '1',
-    },
-    '100%': {
-        transform: 'translateX(100%)',
-        opacity: '0',
-    },
-});
-export const toastContainer = style({
-    position: 'fixed',
-    zIndex: '9999',
-    pointerEvents: 'none',
-});
-export const toastWrapper = styleVariants({
-    topLeft: {
-        position: 'fixed',
-        top: '16px',
-        left: '16px',
-        zIndex: '9999',
-    },
-    topCenter: {
-        position: 'fixed',
-        top: '16px',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        zIndex: '9999',
-    },
-    topRight: {
-        position: 'fixed',
-        top: '16px',
-        right: '16px',
-        zIndex: '9999',
-    },
-    bottomLeft: {
-        position: 'fixed',
-        bottom: '16px',
-        left: '16px',
-        zIndex: '9999',
-    },
-    bottomCenter: {
-        position: 'fixed',
-        bottom: '16px',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        zIndex: '9999',
-    },
-    bottomRight: {
-        position: 'fixed',
-        bottom: '16px',
-        right: '16px',
-        zIndex: '9999',
-    },
-});
-export const toastItem = style({
-    width: '300px',
-    pointerEvents: 'auto',
-    marginBottom: '8px',
-});
-export const toastCloseButton = style({
-    background: 'none',
-    border: 'none',
-    cursor: 'pointer',
-    padding: '0',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: vars.colors.textSecondary,
-    fontSize: '16px',
-    lineHeight: '1',
-    ':hover': {
-        color: vars.colors.textPrimary,
-    },
-});
-export const toastProgressBarContainer = style({
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    height: '3px',
-    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-    borderRadius: '0 0 4px 4px',
-    overflow: 'hidden',
-});
-export const toastProgressBar = style({
-    height: '100%',
-    borderRadius: '0 0 4px 4px',
-    transition: 'width 0.1s linear',
-    animation: `progressBar 0.3s ease ${fadeIn} forwards`,
-});
-export const toastContent = styleWithLayer({
-    flex: 1,
-    minWidth: 0,
-});

package/dist/components/Toggle/Toggle.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type ToggleSize = 'small' | 'medium' | 'large';
-export type ToggleProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'checked' | 'onChange'> & Sprinkles & {
-    checked?: boolean;
-    onChange?: (checked: boolean) => void;
-    size?: ToggleSize;
-    label?: string;
-};
-declare const Toggle: ({ checked, onChange, size, label, disabled, id, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
-export default Toggle;

package/dist/components/Toggle/Toggle.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { toggle, toggleLabel, toggleInput, toggleTrack, toggleTrackChecked, toggleTrackUnchecked, toggleThumb, toggleThumbSizes, toggleThumbChecked, toggleThumbUnchecked, toggleFocusRing, toggleSizes, } from './styles.css';
-import { useState, useId } from 'react';
-import Box from '../Box';
-const Toggle = ({ checked = false, onChange, size = 'medium', label, disabled = false, id, ...props }) => {
-    const [isFocused, setIsFocused] = useState(false);
-    const generatedId = useId();
-    const toggleId = id || `toggle-${generatedId}`;
-    const handleChange = (e) => {
-        if (!disabled && onChange) {
-            onChange(e.target.checked);
-        }
-    };
-    return (_jsxs(Box, { as: "div", className: toggle, children: [_jsxs(Box, { as: "label", htmlFor: toggleId, className: toggleLabel, children: [_jsx(Box, { as: "input", type: "checkbox", id: toggleId, checked: checked, onChange: handleChange, disabled: disabled, className: toggleInput, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), "aria-checked": checked, role: "switch", ...props }), _jsx(Box, { as: "span", className: clsx(toggleTrack, toggleSizes[size], checked ? toggleTrackChecked : toggleTrackUnchecked), "data-size": size, children: _jsx(Box, { as: "span", className: clsx(toggleThumb, toggleThumbSizes[size], checked ? toggleThumbChecked : toggleThumbUnchecked) }) }), _jsx(Box, { as: "span", className: toggleFocusRing, "data-focused": isFocused, "aria-hidden": "true" })] }), label && (_jsx(Box, { as: "span", marginLeft: "small", children: label }))] }));
-};
-export default Toggle;

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

@@ -1,2 +0,0 @@
-export { default as Toggle } from './Toggle';
-export type { ToggleProps, ToggleSize } from './Toggle';

package/dist/components/Toggle/index.js

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

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

@@ -1,12 +0,0 @@
-export declare const toggleSizes: Record<"medium" | "large" | "small", string>;
-export declare const toggleLabel: string;
-export declare const toggle: string;
-export declare const toggleInput: string;
-export declare const toggleTrack: string;
-export declare const toggleTrackChecked: string;
-export declare const toggleTrackUnchecked: string;
-export declare const toggleThumb: string;
-export declare const toggleThumbSizes: Record<"medium" | "large" | "small", string>;
-export declare const toggleThumbChecked: string;
-export declare const toggleThumbUnchecked: string;
-export declare const toggleFocusRing: string;

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

@@ -1,118 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const toggleSizes = styleVariants({
-    small: {
-        width: '1.5rem',
-        height: '0.75rem',
-    },
-    medium: {
-        width: '2rem',
-        height: '1rem',
-    },
-    large: {
-        width: '2.5rem',
-        height: '1.25rem',
-    },
-});
-export const toggleLabel = styleWithLayer({
-    display: 'inline-flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-});
-export const toggle = styleWithLayer({
-    position: 'relative',
-    display: 'inline-flex',
-    alignItems: 'center',
-    selectors: {
-        '&:has(input:disabled)': {
-            cursor: 'not-allowed',
-            opacity: 0.5,
-        },
-    },
-});
-export const toggleInput = styleWithLayer({
-    position: 'absolute',
-    opacity: 0,
-    width: 0,
-    height: 0,
-    cursor: 'pointer',
-});
-export const toggleTrack = styleWithLayer({
-    borderRadius: '9999px',
-    transition: 'background-color 0.2s ease-in-out',
-    backgroundColor: vars.colors.borderDefault,
-    position: 'relative',
-    display: 'inline-flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    selectors: {
-        '&:hover': {
-            backgroundColor: vars.colors.borderMuted,
-        },
-    },
-});
-export const toggleTrackChecked = styleWithLayer({
-    backgroundColor: vars.colors.buttonBackgroundPrimary,
-    selectors: {
-        '&:hover': {
-            backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
-        },
-    },
-});
-export const toggleTrackUnchecked = styleWithLayer({
-    backgroundColor: vars.colors.borderDefault,
-});
-export const toggleThumb = styleWithLayer({
-    borderRadius: '50%',
-    backgroundColor: vars.colors.backgroundDefault,
-    position: 'absolute',
-    transition: 'transform 0.2s ease-in-out, background-color 0.2s ease-in-out',
-    top: '50%',
-    left: '0',
-    transform: 'translateY(-50%)',
-});
-export const toggleThumbSizes = styleVariants({
-    small: {
-        width: '0.5rem',
-        height: '0.5rem',
-    },
-    medium: {
-        width: '0.75rem',
-        height: '0.75rem',
-    },
-    large: {
-        width: '1rem',
-        height: '1rem',
-    },
-});
-export const toggleThumbChecked = styleWithLayer({
-    transform: 'translateY(-50%) translateX(1.25rem)',
-    backgroundColor: vars.colors.backgroundDefault,
-    selectors: {
-        '[data-size="small"] &': {
-            transform: 'translateY(-50%) translateX(1rem)',
-        },
-        '[data-size="large"] &': {
-            transform: 'translateY(-50%) translateX(1.5rem)',
-        },
-    },
-});
-export const toggleThumbUnchecked = styleWithLayer({
-    transform: 'translateY(-50%) translateX(0)',
-    backgroundColor: vars.colors.backgroundDefault,
-});
-export const toggleFocusRing = styleWithLayer({
-    position: 'absolute',
-    inset: '-0.25rem',
-    borderRadius: '0.5rem',
-    pointerEvents: 'none',
-    opacity: 0,
-    transition: 'opacity 0.2s ease-in-out',
-    boxShadow: `0 0 0 3px ${vars.colors.buttonBackgroundPrimary}`,
-    selectors: {
-        '[data-focused="true"] &': {
-            opacity: 1,
-        },
-    },
-});

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-export type TooltipProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    content: string;
-    position?: TooltipPosition;
-    showArrow?: boolean;
-    children: React.ReactNode;
-};
-declare const Tooltip: ({ content, position, showArrow, children, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
-export default Tooltip;

package/dist/components/Tooltip/Tooltip.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { tooltipContainer, tooltipContent, tooltipPositions, tooltipArrow, tooltipArrowTop, tooltipArrowBottom, tooltipArrowLeft, tooltipArrowRight, } from './styles.css';
-import { useState } from 'react';
-import Box from '../Box';
-const Tooltip = ({ content, position = 'top', showArrow = true, children, ...props }) => {
-    const [isVisible, setIsVisible] = useState(false);
-    const arrowStyle = {
-        top: position === 'bottom' ? tooltipArrowBottom : undefined,
-        bottom: position === 'top' ? tooltipArrowTop : undefined,
-        left: position === 'right' ? tooltipArrowLeft : undefined,
-        right: position === 'left' ? tooltipArrowRight : undefined,
-    };
-    return (_jsxs(Box, { as: "div", className: clsx(tooltipContainer, props.className), onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false), onFocus: () => setIsVisible(true), onBlur: () => setIsVisible(false), ...props, children: [children, _jsxs(Box, { as: "div", className: clsx(tooltipContent, tooltipPositions[position]), "data-visible": isVisible, role: "tooltip", children: [showArrow && (_jsx(Box, { as: "span", className: clsx(tooltipArrow, arrowStyle.top, arrowStyle.bottom, arrowStyle.left, arrowStyle.right) })), content] })] }));
-};
-export default Tooltip;

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

@@ -1,2 +0,0 @@
-export { default as Tooltip } from './Tooltip';
-export type { TooltipProps, TooltipPosition } from './Tooltip';

package/dist/components/Tooltip/index.js

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

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

@@ -1,8 +0,0 @@
-export declare const tooltipPositions: Record<"bottom" | "left" | "right" | "top", string>;
-export declare const tooltipContainer: string;
-export declare const tooltipContent: string;
-export declare const tooltipArrow: string;
-export declare const tooltipArrowTop: string;
-export declare const tooltipArrowBottom: string;
-export declare const tooltipArrowLeft: string;
-export declare const tooltipArrowRight: string;

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

@@ -1,86 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const tooltipPositions = styleVariants({
-    top: {
-        bottom: '100%',
-        marginBottom: '0.25rem',
-        left: '50%',
-        transform: 'translateX(-50%)',
-    },
-    bottom: {
-        top: '100%',
-        marginTop: '0.25rem',
-        left: '50%',
-        transform: 'translateX(-50%)',
-    },
-    left: {
-        right: '100%',
-        marginRight: '0.25rem',
-        top: '50%',
-        transform: 'translateY(-50%)',
-    },
-    right: {
-        left: '100%',
-        marginLeft: '0.25rem',
-        top: '50%',
-        transform: 'translateY(-50%)',
-    },
-});
-export const tooltipContainer = styleWithLayer({
-    position: 'relative',
-    display: 'inline-flex',
-});
-export const tooltipContent = styleWithLayer({
-    position: 'absolute',
-    backgroundColor: vars.colors.textPrimary,
-    color: vars.colors.backgroundDefault,
-    padding: '0.375rem 0.75rem',
-    borderRadius: '0.375rem',
-    fontSize: '0.75rem',
-    whiteSpace: 'nowrap',
-    zIndex: 1001,
-    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-    opacity: 0,
-    visibility: 'hidden',
-    transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
-    pointerEvents: 'none',
-    selectors: {
-        '&[data-visible="true"]': {
-            opacity: 1,
-            visibility: 'visible',
-        },
-    },
-});
-export const tooltipArrow = styleWithLayer({
-    position: 'absolute',
-    width: '0',
-    height: '0',
-    borderStyle: 'solid',
-    borderWidth: '0.25rem',
-    borderColor: 'transparent',
-});
-export const tooltipArrowTop = styleWithLayer({
-    bottom: '-0.25rem',
-    left: '50%',
-    transform: 'translateX(-50%)',
-    borderTopColor: vars.colors.textPrimary,
-});
-export const tooltipArrowBottom = styleWithLayer({
-    top: '-0.25rem',
-    left: '50%',
-    transform: 'translateX(-50%)',
-    borderBottomColor: vars.colors.textPrimary,
-});
-export const tooltipArrowLeft = styleWithLayer({
-    right: '-0.25rem',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    borderLeftColor: vars.colors.textPrimary,
-});
-export const tooltipArrowRight = styleWithLayer({
-    left: '-0.25rem',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    borderRightColor: vars.colors.textPrimary,
-});

package/dist/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type VisuallyHiddenProps = Sprinkles & {
-    children: React.ReactNode;
-    as?: React.ElementType;
-};
-declare const VisuallyHidden: ({ children, as: Component, ...props }: VisuallyHiddenProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-export default VisuallyHidden;

package/dist/components/VisuallyHidden/VisuallyHidden.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { visuallyHidden } from './styles.css';
-const VisuallyHidden = ({ children, as: Component = 'span', ...props }) => {
-    return React.createElement(Component, {
-        className: visuallyHidden,
-        ...props,
-    }, children);
-};
-export default VisuallyHidden;

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

@@ -1,2 +0,0 @@
-export { default as VisuallyHidden } from './VisuallyHidden';
-export type { VisuallyHiddenProps } from './VisuallyHidden';

package/dist/components/VisuallyHidden/index.js

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

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

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

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

@@ -1,12 +0,0 @@
-import { styleWithLayer } from '../../styles/utils';
-export const visuallyHidden = styleWithLayer({
-    position: 'absolute',
-    width: '1px',
-    height: '1px',
-    padding: 0,
-    margin: '-1px',
-    overflow: 'hidden',
-    clip: 'rect(0, 0, 0, 0)',
-    whiteSpace: 'nowrap',
-    border: 0,
-});

package/dist/components/index.d.ts

@@ -1,68 +0,0 @@
-export { Button } from './Button';
-export { List, ListItem } from './List';
-export { Input } from './Input';
-export { Form, FormInput } from './Form';
-export { Navbar, NavbarItem } from './Navbar';
-export { Card } from './Card';
-export { Alert } from './Alert';
-export { P, Header } from './Text';
-export { Modal } from './Modal';
-export { Badge } from './Badge';
-export { Divider } from './Divider';
-export { Spinner } from './Spinner';
-export { Tooltip } from './Tooltip';
-export { Toggle } from './Toggle';
-export { Checkbox } from './Checkbox';
-export { Radio } from './Radio';
-export { Select } from './Select';
-export { Tabs } from './Tabs';
-export { Avatar } from './Avatar';
-export { Tag } from './Tag';
-export { Breadcrumb } from './Breadcrumb';
-export { Accordion } from './Accordion';
-export { Progress } from './Progress';
-export { Icon } from './Icon';
-export { ToastProvider, Toast, useToast } from './Toast';
-export { default as Box } from './Box';
-export type { BoxProps } from './Box';
-export { Table } from './Table';
-export { TextArea } from './TextArea';
-export type { TextAreaProps } from './TextArea';
-export { Pagination } from './Pagination';
-export type { PaginationProps } from './Pagination';
-export { Skeleton } from './Skeleton';
-export type { SkeletonProps, SkeletonVariant, SkeletonSize, SkeletonAnimation } from './Skeleton';
-export { Drawer } from './Drawer';
-export type { DrawerProps, DrawerPosition, DrawerSize } from './Drawer';
-export { DropdownMenu } from './DropdownMenu';
-export type { DropdownMenuProps, DropdownMenuItemProps, DropdownMenuGroupProps, DropdownMenuPosition, DropdownMenuItemVariant } from './DropdownMenu';
-export { Popover } from './Popover';
-export type { PopoverProps, PopoverPosition, PopoverTriggerType } from './Popover';
-export { Stepper } from './Stepper';
-export type { StepperProps, Step, StepperOrientation, StepStatus } from './Stepper';
-export { Combobox } from './Combobox';
-export type { ComboboxProps, ComboboxOption } from './Combobox';
-export { NumberInput } from './NumberInput';
-export type { NumberInputProps, NumberInputPosition } from './NumberInput';
-export { FileUpload } from './FileUpload';
-export type { FileUploadProps, FileUploadFile } from './FileUpload';
-export { Stack } from './Stack';
-export type { StackProps, StackDirection, StackAlign, StackJustify } from './Stack';
-export { Grid } from './Grid';
-export type { GridProps, GridColumns, GridGap } from './Grid';
-export { Container } from './Container';
-export type { ContainerProps, ContainerSize } from './Container';
-export { AspectRatio } from './AspectRatio';
-export type { AspectRatioProps, AspectRatioValue } from './AspectRatio';
-export { Collapse } from './Collapse';
-export type { CollapseProps, CollapseAnimation } from './Collapse';
-export { VisuallyHidden } from './VisuallyHidden';
-export type { VisuallyHiddenProps } from './VisuallyHidden';
-export { EmptyState } from './EmptyState';
-export type { EmptyStateProps } from './EmptyState';
-export { Separator } from './Separator';
-export type { SeparatorProps, SeparatorOrientation } from './Separator';
-export { ScrollArea } from './ScrollArea';
-export type { ScrollAreaProps, ScrollAreaOrientation } from './ScrollArea';
-export { Kbd } from './Kbd';
-export type { KbdProps } from './Kbd';