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

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

@@ -1,217 +0,0 @@
-import { keyframes, style, styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const slideInRight = keyframes({
-    '0%': {
-        transform: 'translateX(100%)',
-        opacity: '0'
-    },
-    '100%': {
-        transform: 'translateX(0)',
-        opacity: '1'
-    }
-});
-const slideInLeft = keyframes({
-    '0%': {
-        transform: 'translateX(-100%)',
-        opacity: '0'
-    },
-    '100%': {
-        transform: 'translateX(0)',
-        opacity: '1'
-    }
-});
-const slideInTop = keyframes({
-    '0%': {
-        transform: 'translateY(-100%)',
-        opacity: '0'
-    },
-    '100%': {
-        transform: 'translateY(0)',
-        opacity: '1'
-    }
-});
-const slideOutRight = keyframes({
-    '0%': {
-        transform: 'translateX(0)',
-        opacity: '1'
-    },
-    '100%': {
-        transform: 'translateX(100%)',
-        opacity: '0'
-    }
-});
-const slideOutLeft = keyframes({
-    '0%': {
-        transform: 'translateX(0)',
-        opacity: '1'
-    },
-    '100%': {
-        transform: 'translateX(-100%)',
-        opacity: '0'
-    }
-});
-const slideInBottom = keyframes({
-    '0%': {
-        transform: 'translateY(100%)',
-        opacity: '0'
-    },
-    '100%': {
-        transform: 'translateY(0)',
-        opacity: '1'
-    }
-});
-const slideOutBottom = keyframes({
-    '0%': {
-        transform: 'translateY(0)',
-        opacity: '1'
-    },
-    '100%': {
-        transform: 'translateY(100%)',
-        opacity: '0'
-    }
-});
-const fadeIn = keyframes({
-    '0%': {
-        opacity: '0'
-    },
-    '100%': {
-        opacity: '1'
-    }
-});
-const fadeOut = keyframes({
-    '0%': {
-        opacity: '1'
-    },
-    '100%': {
-        opacity: '0'
-    }
-});
-const fadeOutSuccess = keyframes({
-    '0%': {
-        opacity: '1'
-    },
-    '100%': {
-        opacity: '0'
-    }
-});
-const fadeOutError = keyframes({
-    '0%': {
-        opacity: '1'
-    },
-    '100%': {
-        opacity: '0'
-    }
-});
-const fadeOutWarning = keyframes({
-    '0%': {
-        opacity: '1'
-    },
-    '100%': {
-        opacity: '0'
-    }
-});
-const fadeOutInfo = keyframes({
-    '0%': {
-        opacity: '1'
-    },
-    '100%': {
-        opacity: '0'
-    }
-});
-const slideOut = keyframes({
-    '0%': {
-        transform: 'translateX(0)',
-        opacity: '1'
-    },
-    '100%': {
-        transform: 'translateX(100%)',
-        opacity: '0'
-    }
-});
-const toastContainer = style({
-    position: 'fixed',
-    zIndex: '9999',
-    pointerEvents: 'none'
-});
-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'
-    }
-});
-const toastItem = style({
-    width: '300px',
-    pointerEvents: 'auto',
-    marginBottom: '8px'
-});
-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
-    }
-});
-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'
-});
-const toastProgressBar = style({
-    height: '100%',
-    borderRadius: '0 0 4px 4px',
-    transition: 'width 0.1s linear',
-    animation: `progressBar 0.3s ease ${fadeIn} forwards`
-});
-const toastContent = styleWithLayer({
-    flex: 1,
-    minWidth: 0
-});
-export { fadeIn, fadeOut, fadeOutError, fadeOutInfo, fadeOutSuccess, fadeOutWarning, slideInBottom, slideInLeft, slideInRight, slideInTop, slideOut, slideOutBottom, slideOutLeft, slideOutRight, toastCloseButton, toastContainer, toastContent, toastItem, toastProgressBar, toastProgressBarContainer, toastWrapper };

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

@@ -1,10 +0,0 @@
-import React from 'react';
-export type ToggleSize = 'small' | 'medium' | 'large';
-export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'checked' | 'onChange'> {
-    checked?: boolean;
-    onChange?: (checked: boolean) => void;
-    size?: ToggleSize;
-    label?: string;
-}
-declare const Toggle: ({ checked, onChange, size, label, disabled, id, ...props }: ToggleProps) => React.JSX.Element;
-export default Toggle;

package/dist/components/Toggle/Toggle.js

@@ -1,62 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { toggle, toggleFocusRing, toggleInput, toggleLabel, toggleSizes, toggleThumb, toggleThumbChecked, toggleThumbSizes, toggleThumbUnchecked, toggleTrack, toggleTrackChecked, toggleTrackUnchecked } from "./styles.css.js";
-import { useId, useState } from "react";
-import Box from "../Box/index.js";
-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 /*#__PURE__*/ jsxs(Box, {
-        as: "div",
-        className: toggle,
-        children: [
-            /*#__PURE__*/ jsxs(Box, {
-                as: "label",
-                htmlFor: toggleId,
-                className: toggleLabel,
-                children: [
-                    /*#__PURE__*/ 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
-                    }),
-                    /*#__PURE__*/ jsx(Box, {
-                        as: "span",
-                        className: clsx(toggleTrack, toggleSizes[size], checked ? toggleTrackChecked : toggleTrackUnchecked),
-                        "data-size": size,
-                        children: /*#__PURE__*/ jsx(Box, {
-                            as: "span",
-                            className: clsx(toggleThumb, toggleThumbSizes[size], checked ? toggleThumbChecked : toggleThumbUnchecked)
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(Box, {
-                        as: "span",
-                        className: toggleFocusRing,
-                        "data-focused": isFocused,
-                        "aria-hidden": "true"
-                    })
-                ]
-            }),
-            label && /*#__PURE__*/ jsx(Box, {
-                as: "span",
-                marginLeft: "small",
-                children: label
-            })
-        ]
-    });
-};
-const Toggle_Toggle = Toggle;
-export { Toggle_Toggle as default };

package/dist/components/Toggle/index.js

@@ -1,2 +0,0 @@
-import Toggle from "./Toggle.js";
-export { 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,119 +0,0 @@
-import { styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const toggleSizes = styleVariants({
-    small: {
-        width: '1.5rem',
-        height: '0.75rem'
-    },
-    medium: {
-        width: '2rem',
-        height: '1rem'
-    },
-    large: {
-        width: '2.5rem',
-        height: '1.25rem'
-    }
-});
-const toggleLabel = styleWithLayer({
-    display: 'inline-flex',
-    alignItems: 'center',
-    cursor: 'pointer'
-});
-const toggle = styleWithLayer({
-    position: 'relative',
-    display: 'inline-flex',
-    alignItems: 'center',
-    selectors: {
-        '&:has(input:disabled)': {
-            cursor: 'not-allowed',
-            opacity: 0.5
-        }
-    }
-});
-const toggleInput = styleWithLayer({
-    position: 'absolute',
-    opacity: 0,
-    width: 0,
-    height: 0,
-    cursor: 'pointer'
-});
-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
-        }
-    }
-});
-const toggleTrackChecked = styleWithLayer({
-    backgroundColor: vars.colors.buttonBackgroundPrimary,
-    selectors: {
-        '&:hover': {
-            backgroundColor: vars.colors.buttonBackgroundFocusedPrimary
-        }
-    }
-});
-const toggleTrackUnchecked = styleWithLayer({
-    backgroundColor: vars.colors.borderDefault
-});
-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%)'
-});
-const toggleThumbSizes = styleVariants({
-    small: {
-        width: '0.5rem',
-        height: '0.5rem'
-    },
-    medium: {
-        width: '0.75rem',
-        height: '0.75rem'
-    },
-    large: {
-        width: '1rem',
-        height: '1rem'
-    }
-});
-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)'
-        }
-    }
-});
-const toggleThumbUnchecked = styleWithLayer({
-    transform: 'translateY(-50%) translateX(0)',
-    backgroundColor: vars.colors.backgroundDefault
-});
-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
-        }
-    }
-});
-export { toggle, toggleFocusRing, toggleInput, toggleLabel, toggleSizes, toggleThumb, toggleThumbChecked, toggleThumbSizes, toggleThumbUnchecked, toggleTrack, toggleTrackChecked, toggleTrackUnchecked };

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

@@ -1,10 +0,0 @@
-import React from 'react';
-export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
-    content: string;
-    position?: TooltipPosition;
-    showArrow?: boolean;
-    children: React.ReactNode;
-}
-declare const Tooltip: ({ content, position, showArrow, children, ...props }: TooltipProps) => React.JSX.Element;
-export default Tooltip;

package/dist/components/Tooltip/Tooltip.js

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

package/dist/components/Tooltip/index.js

@@ -1,2 +0,0 @@
-import Tooltip from "./Tooltip.js";
-export { 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,87 +0,0 @@
-import { styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-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%)'
-    }
-});
-const tooltipContainer = styleWithLayer({
-    position: 'relative',
-    display: 'inline-flex'
-});
-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'
-        }
-    }
-});
-const tooltipArrow = styleWithLayer({
-    position: 'absolute',
-    width: '0',
-    height: '0',
-    borderStyle: 'solid',
-    borderWidth: '0.25rem',
-    borderColor: 'transparent'
-});
-const tooltipArrowTop = styleWithLayer({
-    bottom: '-0.25rem',
-    left: '50%',
-    transform: 'translateX(-50%)',
-    borderTopColor: vars.colors.textPrimary
-});
-const tooltipArrowBottom = styleWithLayer({
-    top: '-0.25rem',
-    left: '50%',
-    transform: 'translateX(-50%)',
-    borderBottomColor: vars.colors.textPrimary
-});
-const tooltipArrowLeft = styleWithLayer({
-    right: '-0.25rem',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    borderLeftColor: vars.colors.textPrimary
-});
-const tooltipArrowRight = styleWithLayer({
-    left: '-0.25rem',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    borderRightColor: vars.colors.textPrimary
-});
-export { tooltipArrow, tooltipArrowBottom, tooltipArrowLeft, tooltipArrowRight, tooltipArrowTop, tooltipContainer, tooltipContent, tooltipPositions };

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

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

package/dist/components/VisuallyHidden/VisuallyHidden.js

@@ -1,8 +0,0 @@
-import react from "react";
-import { visuallyHidden } from "./styles.css.js";
-const VisuallyHidden = ({ children, as: Component = 'span', className, ...props })=>/*#__PURE__*/ react.createElement(Component, {
-        className: visuallyHidden,
-        ...props
-    }, children);
-const VisuallyHidden_VisuallyHidden = VisuallyHidden;
-export { VisuallyHidden_VisuallyHidden as default };

package/dist/components/VisuallyHidden/index.js

@@ -1,2 +0,0 @@
-import VisuallyHidden from "./VisuallyHidden.js";
-export { 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,13 +0,0 @@
-import { styleWithLayer } from "../../styles/utils.js";
-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
-});
-export { visuallyHidden };

package/dist/components/index.js

@@ -1,48 +0,0 @@
-import { Button } from "./Button/index.js";
-import { List, ListItem } from "./List/index.js";
-import { Input } from "./Input/index.js";
-import { Form, FormInput } from "./Form/index.js";
-import { Navbar, NavbarItem } from "./Navbar/index.js";
-import { Card } from "./Card/index.js";
-import { Alert } from "./Alert/index.js";
-import { Header, P } from "./Text/index.js";
-import { Modal } from "./Modal/index.js";
-import { Badge } from "./Badge/index.js";
-import { Divider } from "./Divider/index.js";
-import { Spinner } from "./Spinner/index.js";
-import { Tooltip } from "./Tooltip/index.js";
-import { Toggle } from "./Toggle/index.js";
-import { Checkbox } from "./Checkbox/index.js";
-import { Radio } from "./Radio/index.js";
-import { Select } from "./Select/index.js";
-import { Tabs } from "./Tabs/index.js";
-import { Avatar } from "./Avatar/index.js";
-import { Tag } from "./Tag/index.js";
-import { Breadcrumb } from "./Breadcrumb/index.js";
-import { Accordion } from "./Accordion/index.js";
-import { Progress } from "./Progress/index.js";
-import { Icon } from "./Icon/index.js";
-import { Toast, ToastProvider, useToast } from "./Toast/index.js";
-import Box from "./Box/index.js";
-import { Table } from "./Table/index.js";
-import { TextArea } from "./TextArea/index.js";
-import { Pagination } from "./Pagination/index.js";
-import { Skeleton } from "./Skeleton/index.js";
-import { Drawer } from "./Drawer/index.js";
-import { DropdownMenu } from "./DropdownMenu/index.js";
-import { Popover } from "./Popover/index.js";
-import { Stepper } from "./Stepper/index.js";
-import { Combobox } from "./Combobox/index.js";
-import { NumberInput } from "./NumberInput/index.js";
-import { FileUpload } from "./FileUpload/index.js";
-import { Stack } from "./Stack/index.js";
-import { Grid } from "./Grid/index.js";
-import { Container } from "./Container/index.js";
-import { AspectRatio } from "./AspectRatio/index.js";
-import { Collapse } from "./Collapse/index.js";
-import { VisuallyHidden } from "./VisuallyHidden/index.js";
-import { EmptyState } from "./EmptyState/index.js";
-import { Separator } from "./Separator/index.js";
-import { ScrollArea } from "./ScrollArea/index.js";
-import { Kbd } from "./Kbd/index.js";
-export { Accordion, Alert, AspectRatio, Avatar, Badge, Box, Breadcrumb, Button, Card, Checkbox, Collapse, Combobox, Container, Divider, Drawer, DropdownMenu, EmptyState, FileUpload, Form, FormInput, Grid, Header, Icon, Input, Kbd, List, ListItem, Modal, Navbar, NavbarItem, NumberInput, P, Pagination, Popover, Progress, Radio, ScrollArea, Select, Separator, Skeleton, Spinner, Stack, Stepper, Table, Tabs, Tag, TextArea, Toast, ToastProvider, Toggle, Tooltip, VisuallyHidden, useToast };

package/dist/index.d.ts

@@ -1 +0,0 @@
-export * from './components';

package/dist/index.js

@@ -1 +0,0 @@
-export * from "./components/index.js";