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

package/dist/components/Stack/Stack.js

@@ -1,39 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import Box from "../Box/index.js";
-const alignMap = {
-    start: 'flex-start',
-    center: 'center',
-    end: 'flex-end',
-    stretch: 'stretch'
-};
-const justifyMap = {
-    start: 'flex-start',
-    center: 'center',
-    end: 'flex-end',
-    between: 'space-between',
-    around: 'space-around',
-    evenly: 'space-evenly'
-};
-const Stack = /*#__PURE__*/ forwardRef(({ direction = 'column', align, justify, gap, wrap, children, className, style, ...rest }, ref)=>{
-    const alignItems = align ? alignMap[align] : void 0;
-    const justifyContent = justify ? justifyMap[justify] : void 0;
-    return /*#__PURE__*/ jsx(Box, {
-        ref: ref,
-        display: "flex",
-        flexDirection: direction,
-        alignItems: alignItems,
-        justifyContent: justifyContent,
-        gap: gap,
-        className: className,
-        style: {
-            flexWrap: wrap ? 'wrap' : void 0,
-            ...style
-        },
-        ...rest,
-        children: children
-    });
-});
-Stack.displayName = 'Stack';
-const Stack_Stack = Stack;
-export { Stack_Stack as default };

package/dist/components/Stack/index.js

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

package/dist/components/Stepper/Stepper.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-export type StepperOrientation = 'horizontal' | 'vertical';
-export type StepStatus = 'pending' | 'current' | 'completed';
-export interface Step {
-    title: string;
-    description?: string;
-    status?: StepStatus;
-}
-export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
-    steps: Step[];
-    currentStep?: number;
-    orientation?: StepperOrientation;
-    showConnectors?: boolean;
-    onStepClick?: (stepIndex: number) => void;
-    clickable?: boolean;
-}
-declare const Stepper: ({ steps, currentStep, orientation, showConnectors, onStepClick, clickable, className, ...props }: StepperProps) => React.JSX.Element;
-export default Stepper;

package/dist/components/Stepper/Stepper.js

@@ -1,70 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import "react";
-import { step, stepConnector, stepConnectorCompleted, stepConnectorVertical, stepContent, stepContentVertical, stepDescription, stepIndicator, stepIndicatorVariants, stepTitle, stepVertical, stepperContainer, stepperHorizontal, stepperVertical } from "./styles.css.js";
-import Box from "../Box/index.js";
-const Stepper = ({ steps, currentStep = 0, orientation = 'horizontal', showConnectors = true, onStepClick, clickable = false, className, ...props })=>{
-    const getStepStatus = (index)=>{
-        if (index < currentStep) return 'completed';
-        if (index === currentStep) return 'current';
-        return 'pending';
-    };
-    const handleStepClick = (index)=>{
-        if (clickable && onStepClick) onStepClick(index);
-    };
-    return /*#__PURE__*/ jsx(Box, {
-        className: clsx(stepperContainer, 'horizontal' === orientation ? stepperHorizontal : stepperVertical, className),
-        role: "list",
-        "aria-label": "Step progress",
-        ...props,
-        children: steps.map((stepItem, index)=>{
-            const status = stepItem.status || getStepStatus(index);
-            const isLast = index === steps.length - 1;
-            const isCompleted = 'completed' === status;
-            return /*#__PURE__*/ jsxs(Box, {
-                className: clsx(step, 'vertical' === orientation && stepVertical),
-                role: "listitem",
-                "aria-current": 'current' === status ? 'step' : void 0,
-                children: [
-                    showConnectors && !isLast && 'horizontal' === orientation && /*#__PURE__*/ jsx(Box, {
-                        className: clsx(stepConnector, isCompleted && stepConnectorCompleted),
-                        "aria-hidden": "true"
-                    }),
-                    showConnectors && !isLast && 'vertical' === orientation && /*#__PURE__*/ jsx(Box, {
-                        className: stepConnectorVertical,
-                        style: {
-                            backgroundColor: isCompleted ? void 0 : void 0
-                        },
-                        "aria-hidden": "true"
-                    }),
-                    /*#__PURE__*/ jsx(Box, {
-                        className: clsx(stepIndicator, stepIndicatorVariants[status]),
-                        onClick: ()=>handleStepClick(index),
-                        style: {
-                            cursor: clickable ? 'pointer' : 'default'
-                        },
-                        "aria-label": `Step ${index + 1}: ${stepItem.title}`,
-                        children: 'completed' === status ? '✓' : index + 1
-                    }),
-                    /*#__PURE__*/ jsxs(Box, {
-                        className: clsx(stepContent, 'vertical' === orientation && stepContentVertical),
-                        children: [
-                            /*#__PURE__*/ jsx(Box, {
-                                as: "h4",
-                                className: stepTitle,
-                                children: stepItem.title
-                            }),
-                            stepItem.description && /*#__PURE__*/ jsx(Box, {
-                                as: "p",
-                                className: stepDescription,
-                                children: stepItem.description
-                            })
-                        ]
-                    })
-                ]
-            }, index);
-        })
-    });
-};
-const Stepper_Stepper = Stepper;
-export { Stepper_Stepper as default };

package/dist/components/Stepper/index.js

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

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

@@ -1,14 +0,0 @@
-export declare const stepperContainer: string;
-export declare const stepperHorizontal: string;
-export declare const stepperVertical: string;
-export declare const step: string;
-export declare const stepVertical: string;
-export declare const stepIndicator: string;
-export declare const stepIndicatorVariants: Record<"current" | "pending" | "completed", string>;
-export declare const stepContent: string;
-export declare const stepContentVertical: string;
-export declare const stepTitle: string;
-export declare const stepDescription: string;
-export declare const stepConnector: string;
-export declare const stepConnectorCompleted: string;
-export declare const stepConnectorVertical: string;

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

@@ -1,105 +0,0 @@
-import { styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const stepperContainer = styleWithLayer({
-    display: 'flex',
-    alignItems: 'flex-start',
-    width: '100%'
-});
-const stepperHorizontal = styleWithLayer({
-    flexDirection: 'row',
-    justifyContent: 'space-between'
-});
-const stepperVertical = styleWithLayer({
-    flexDirection: 'column',
-    gap: '1rem'
-});
-const step = styleWithLayer({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    position: 'relative',
-    flex: 1
-});
-const stepVertical = styleWithLayer({
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    gap: '1rem'
-});
-const stepIndicator = styleWithLayer({
-    width: '2.5rem',
-    height: '2.5rem',
-    borderRadius: '50%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontWeight: '600',
-    fontSize: '14px',
-    transition: 'all 0.3s ease',
-    zIndex: 1
-});
-const stepIndicatorVariants = styleVariants({
-    pending: {
-        backgroundColor: vars.colors.borderMuted,
-        color: vars.colors.textSecondary,
-        border: `2px solid ${vars.colors.borderMuted}`
-    },
-    current: {
-        backgroundColor: vars.colors.buttonBackgroundPrimary,
-        color: vars.colors.buttonTextPrimary,
-        border: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-        boxShadow: `0 0 0 4px ${vars.colors.alertInfoBackground}`
-    },
-    completed: {
-        backgroundColor: vars.colors.alertSuccessBorder,
-        color: vars.colors.buttonTextPrimary,
-        border: `2px solid ${vars.colors.alertSuccessBorder}`
-    }
-});
-const stepContent = styleWithLayer({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    marginTop: '0.5rem',
-    textAlign: 'center'
-});
-const stepContentVertical = styleWithLayer({
-    alignItems: 'flex-start',
-    marginTop: 0,
-    textAlign: 'left'
-});
-const stepTitle = styleWithLayer({
-    fontFamily: vars.fontFamily.heading,
-    fontSize: '14px',
-    fontWeight: '600',
-    color: vars.colors.textPrimary,
-    margin: 0
-});
-const stepDescription = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.textSecondary,
-    marginTop: '0.25rem',
-    maxWidth: '200px'
-});
-const stepConnector = styleWithLayer({
-    position: 'absolute',
-    top: '1.25rem',
-    left: 'calc(50% + 1.5rem)',
-    right: 'calc(-50% + 1.5rem)',
-    height: '2px',
-    backgroundColor: vars.colors.borderMuted,
-    zIndex: 0
-});
-const stepConnectorCompleted = styleWithLayer({
-    backgroundColor: vars.colors.alertSuccessBorder
-});
-const stepConnectorVertical = styleWithLayer({
-    position: 'absolute',
-    top: '2.5rem',
-    left: '1.25rem',
-    width: '2px',
-    height: 'calc(100% + 1rem)',
-    backgroundColor: vars.colors.borderMuted,
-    zIndex: 0
-});
-export { step, stepConnector, stepConnectorCompleted, stepConnectorVertical, stepContent, stepContentVertical, stepDescription, stepIndicator, stepIndicatorVariants, stepTitle, stepVertical, stepperContainer, stepperHorizontal, stepperVertical };

package/dist/components/Table/Table.d.ts

@@ -1,42 +0,0 @@
-import React from 'react';
-type TableProps = {
-    children: React.ReactNode;
-    className?: string;
-    striped?: boolean;
-    containerClassName?: string;
-};
-type TheadProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-type TbodyProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-type TfootProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-type TrProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-type ThProps = {
-    children?: React.ReactNode;
-    className?: string;
-};
-type TdProps = {
-    children?: React.ReactNode;
-    className?: string;
-    colSpan?: number;
-    rowSpan?: number;
-};
-declare const Table: (({ children, className, striped, containerClassName, }: TableProps) => React.JSX.Element) & {
-    Thead: ({ children, className }: TheadProps) => React.JSX.Element;
-    Tbody: ({ children, className }: TbodyProps) => React.JSX.Element;
-    Tfoot: ({ children, className }: TfootProps) => React.JSX.Element;
-    Tr: ({ children, className }: TrProps) => React.JSX.Element;
-    Th: ({ children, className }: ThProps) => React.JSX.Element;
-    Td: ({ children, className, colSpan, rowSpan }: TdProps) => React.JSX.Element;
-};
-export default Table;

package/dist/components/Table/Table.js

@@ -1,65 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { createContext, useContext } from "react";
-import { table, tableContainer, tbody, td, tfoot, th, thead, tr } from "./styles.css.js";
-import Box from "../Box/index.js";
-const TableContext = /*#__PURE__*/ createContext({});
-const TableComponent = ({ children, className, striped = false, containerClassName })=>/*#__PURE__*/ jsx(TableContext.Provider, {
-        value: {
-            striped
-        },
-        children: /*#__PURE__*/ jsx(Box, {
-            className: clsx(tableContainer, containerClassName),
-            width: "100%",
-            children: /*#__PURE__*/ jsx(Box, {
-                as: "table",
-                className: clsx(table, className),
-                children: children
-            })
-        })
-    });
-const Thead = ({ children, className })=>/*#__PURE__*/ jsx(Box, {
-        as: "thead",
-        className: clsx(thead, className),
-        children: children
-    });
-const Tbody = ({ children, className })=>/*#__PURE__*/ jsx(Box, {
-        as: "tbody",
-        className: clsx(tbody, className),
-        children: children
-    });
-const Tfoot = ({ children, className })=>/*#__PURE__*/ jsx(Box, {
-        as: "tfoot",
-        className: clsx(tfoot, className),
-        children: children
-    });
-const Tr = ({ children, className })=>{
-    const { striped } = useContext(TableContext);
-    return /*#__PURE__*/ jsx(Box, {
-        as: "tr",
-        className: clsx(tr[striped ? 'striped' : 'default'], className),
-        children: children
-    });
-};
-const Th = ({ children, className })=>/*#__PURE__*/ jsx(Box, {
-        as: "th",
-        className: clsx(th, className),
-        children: children
-    });
-const Td = ({ children, className, colSpan, rowSpan })=>/*#__PURE__*/ jsx(Box, {
-        as: "td",
-        className: clsx(td, className),
-        colSpan: colSpan,
-        rowSpan: rowSpan,
-        children: children
-    });
-const Table = Object.assign(TableComponent, {
-    Thead,
-    Tbody,
-    Tfoot,
-    Tr,
-    Th,
-    Td
-});
-const Table_Table = Table;
-export { Table_Table as default };

package/dist/components/Table/index.js

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

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

@@ -1,8 +0,0 @@
-export declare const table: string;
-export declare const thead: string;
-export declare const tbody: string;
-export declare const tfoot: string;
-export declare const tr: Record<"default" | "striped", string>;
-export declare const th: string;
-export declare const td: string;
-export declare const tableContainer: string;

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

@@ -1,50 +0,0 @@
-import { styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const table = styleWithLayer({
-    width: '100%',
-    borderCollapse: 'collapse',
-    borderSpacing: 0,
-    fontFamily: vars.fontFamily.body
-});
-const thead = styleWithLayer({
-    backgroundColor: vars.colors.backgroundDefault,
-    borderBottom: `2px solid ${vars.colors.borderDefault}`
-});
-const tbody = styleWithLayer({
-    backgroundColor: 'transparent'
-});
-const tfoot = styleWithLayer({
-    backgroundColor: vars.colors.backgroundMuted,
-    borderTop: `2px solid ${vars.colors.borderDefault}`,
-    fontWeight: 'bold'
-});
-const tr = styleVariants({
-    default: {
-        borderBottom: `1px solid ${vars.colors.borderMuted}`,
-        ':hover': {
-            backgroundColor: vars.colors.backgroundMuted
-        }
-    },
-    striped: {
-        borderBottom: `1px solid ${vars.colors.borderMuted}`
-    }
-});
-const th = styleWithLayer({
-    padding: '12px 16px',
-    textAlign: 'left',
-    fontWeight: '600',
-    color: vars.colors.textPrimary,
-    whiteSpace: 'nowrap'
-});
-const td = styleWithLayer({
-    padding: '12px 16px',
-    color: vars.colors.textPrimary,
-    borderBottom: `1px solid ${vars.colors.borderMuted}`
-});
-const tableContainer = styleWithLayer({
-    overflowX: 'auto',
-    border: `1px solid ${vars.colors.borderDefault}`,
-    borderRadius: '8px'
-});
-export { table, tableContainer, tbody, td, tfoot, th, thead, tr };

package/dist/components/Tabs/Tabs.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-type TabsProps = {
-    children: React.ReactNode;
-    defaultValue?: string;
-    orientation?: 'horizontal' | 'vertical';
-    className?: string;
-    onChange?: (value: string) => void;
-};
-type TabListProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-type TabProps = {
-    value: string;
-    children: React.ReactNode;
-    disabled?: boolean;
-    className?: string;
-};
-type TabPanelProps = {
-    value: string;
-    children: React.ReactNode;
-    className?: string;
-};
-declare const TabsComponent: (({ children, defaultValue, orientation, className, onChange, }: TabsProps) => React.JSX.Element) & {
-    List: ({ children, className }: TabListProps) => React.JSX.Element;
-    Tab: ({ value, children, disabled, className }: TabProps) => React.JSX.Element;
-    Panel: ({ value, children, className }: TabPanelProps) => React.JSX.Element | null;
-};
-export default TabsComponent;

package/dist/components/Tabs/Tabs.js

@@ -1,71 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { createContext, useContext, useState } from "react";
-import { tabContent, tabItem, tabsContainer, tabsList, tabsListHorizontal, tabsListVertical } from "./styles.css.js";
-import Box from "../Box/index.js";
-const TabsContext = /*#__PURE__*/ createContext({
-    activeTab: '',
-    setActiveTab: ()=>{}
-});
-const Tabs = ({ children, defaultValue = '', orientation = 'horizontal', className, onChange })=>{
-    const [activeTab, setActiveTab] = useState(defaultValue);
-    const handleTabChange = (value)=>{
-        setActiveTab(value);
-        if (onChange) onChange(value);
-    };
-    return /*#__PURE__*/ jsx(TabsContext.Provider, {
-        value: {
-            activeTab,
-            setActiveTab: handleTabChange,
-            orientation
-        },
-        children: /*#__PURE__*/ jsx(Box, {
-            className: clsx(tabsContainer, className),
-            width: "100%",
-            children: children
-        })
-    });
-};
-const TabList = ({ children, className })=>{
-    const { orientation } = useContext(TabsContext);
-    return /*#__PURE__*/ jsx(Box, {
-        as: "div",
-        role: "tablist",
-        className: clsx(tabsList, 'vertical' === orientation ? tabsListVertical : tabsListHorizontal, className),
-        children: children
-    });
-};
-const Tab = ({ value, children, disabled = false, className })=>{
-    const { activeTab, setActiveTab, orientation } = useContext(TabsContext);
-    const isActive = activeTab === value;
-    const handleClick = ()=>{
-        if (!disabled) setActiveTab(value);
-    };
-    return /*#__PURE__*/ jsx(Box, {
-        as: "button",
-        role: "tab",
-        "aria-selected": isActive,
-        disabled: disabled,
-        onClick: handleClick,
-        className: clsx(tabItem['vertical' === orientation ? isActive ? 'verticalActive' : 'base' : isActive ? 'active' : 'base'], className),
-        children: children
-    });
-};
-const TabPanel = ({ value, children, className })=>{
-    const { activeTab } = useContext(TabsContext);
-    const isActive = activeTab === value;
-    if (!isActive) return null;
-    return /*#__PURE__*/ jsx(Box, {
-        as: "div",
-        role: "tabpanel",
-        className: clsx(tabContent, className),
-        children: children
-    });
-};
-const TabsComponent = Object.assign(Tabs, {
-    List: TabList,
-    Tab,
-    Panel: TabPanel
-});
-const Tabs_Tabs = TabsComponent;
-export { Tabs_Tabs as default };

package/dist/components/Tabs/index.js

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

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

@@ -1,6 +0,0 @@
-export declare const tabsContainer: string;
-export declare const tabsList: string;
-export declare const tabsListHorizontal: string;
-export declare const tabsListVertical: string;
-export declare const tabItem: Record<"active" | "base" | "verticalActive", string>;
-export declare const tabContent: string;

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

@@ -1,101 +0,0 @@
-import { styleVariants } from "@vanilla-extract/css";
-import { vars } from "../../styles/theme.css.js";
-import { styleWithLayer } from "../../styles/utils.js";
-const tabsContainer = styleWithLayer({
-    width: '100%'
-});
-const tabsList = styleWithLayer({
-    display: 'flex',
-    gap: '4px',
-    borderBottom: `2px solid ${vars.colors.borderDefault}`,
-    fontFamily: vars.fontFamily.body
-});
-const tabsListHorizontal = styleWithLayer({
-    flexDirection: 'row',
-    overflowX: 'auto'
-});
-const tabsListVertical = styleWithLayer({
-    flexDirection: 'column',
-    borderBottom: 'none',
-    borderRight: `2px solid ${vars.colors.borderDefault}`
-});
-const tabItem = styleVariants({
-    base: {
-        padding: '0.75rem 1.5rem',
-        fontSize: '14px',
-        fontWeight: '500',
-        color: vars.colors.textSecondary,
-        cursor: 'pointer',
-        border: 'none',
-        backgroundColor: 'transparent',
-        whiteSpace: 'nowrap',
-        transition: 'all 0.2s ease',
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-            outlineOffset: '2px'
-        },
-        ':hover:not(:disabled)': {
-            color: vars.colors.textPrimary,
-            backgroundColor: vars.colors.backgroundMuted
-        },
-        ':disabled': {
-            cursor: 'not-allowed',
-            opacity: 0.5
-        }
-    },
-    active: {
-        padding: '0.75rem 1.5rem',
-        fontSize: '14px',
-        fontWeight: '500',
-        color: vars.colors.buttonBackgroundPrimary,
-        cursor: 'pointer',
-        border: 'none',
-        backgroundColor: 'transparent',
-        whiteSpace: 'nowrap',
-        transition: 'all 0.2s ease',
-        borderBottom: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-        marginBottom: '-2px',
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-            outlineOffset: '2px'
-        },
-        ':hover:not(:disabled)': {
-            backgroundColor: vars.colors.backgroundMuted
-        },
-        ':disabled': {
-            cursor: 'not-allowed',
-            opacity: 0.5
-        }
-    },
-    verticalActive: {
-        padding: '0.75rem 1.5rem',
-        fontSize: '14px',
-        fontWeight: '500',
-        color: vars.colors.buttonBackgroundPrimary,
-        cursor: 'pointer',
-        border: 'none',
-        backgroundColor: 'transparent',
-        whiteSpace: 'nowrap',
-        transition: 'all 0.2s ease',
-        borderRight: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-        marginRight: '-2px',
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-            outlineOffset: '2px'
-        },
-        ':hover:not(:disabled)': {
-            backgroundColor: vars.colors.backgroundMuted
-        },
-        ':disabled': {
-            cursor: 'not-allowed',
-            opacity: 0.5
-        }
-    }
-});
-const tabContent = styleWithLayer({
-    padding: '1.5rem 0',
-    fontFamily: vars.fontFamily.body,
-    fontSize: '14px',
-    color: vars.colors.textPrimary
-});
-export { tabContent, tabItem, tabsContainer, tabsList, tabsListHorizontal, tabsListVertical };

package/dist/components/Tag/Tag.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-type TagProps = {
-    children: React.ReactNode;
-    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
-    onRemove?: () => void;
-    removable?: boolean;
-    className?: string;
-};
-type TagGroupProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-declare const TagComponent: (({ children, variant, onRemove, removable, className, }: TagProps) => React.JSX.Element) & {
-    Group: ({ children, className }: TagGroupProps) => React.JSX.Element;
-};
-export default TagComponent;