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

package/dist/components/Skeleton/Skeleton.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { skeleton, skeletonVariants, skeletonSizes, skeletonAnimation, } from './styles.css';
-import Box from '../Box';
-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) => (_jsx(Box, { as: "span", className: clsx(skeleton, skeletonVariants[variant], skeletonSizes[size], skeletonAnimation[animation], className), style: style, "aria-hidden": "true", ...props }, index)));
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "small", children: skeletons }));
-};
-export default Skeleton;

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

@@ -1,2 +0,0 @@
-export { default as Skeleton } from './Skeleton';
-export type { SkeletonProps, SkeletonVariant, SkeletonSize, SkeletonAnimation } from './Skeleton';

package/dist/components/Skeleton/index.js

@@ -1 +0,0 @@
-export { default as Skeleton } from './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,56 +0,0 @@
-import { styleVariants, keyframes } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-const shimmer = keyframes({
-    '0%': { backgroundPosition: '-200% 0' },
-    '100%': { backgroundPosition: '200% 0' },
-});
-const pulse = keyframes({
-    '0%, 100%': { opacity: 1 },
-    '50%': { opacity: 0.5 },
-});
-export const skeletonVariants = styleVariants({
-    text: {
-        borderRadius: '0.25rem',
-    },
-    circle: {
-        borderRadius: '50%',
-    },
-    rectangle: {
-        borderRadius: '0.5rem',
-    },
-});
-export const skeletonSizes = styleVariants({
-    small: {
-        height: '1rem',
-    },
-    medium: {
-        height: '1.5rem',
-    },
-    large: {
-        height: '2rem',
-    },
-});
-export 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,
-    },
-});
-export const skeleton = styleWithLayer({
-    width: '100%',
-    display: 'inline-block',
-});

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

package/dist/components/Spinner/Spinner.js

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

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

@@ -1,2 +0,0 @@
-export { default as Spinner } from './Spinner';
-export type { SpinnerProps, SpinnerColor, SpinnerSize } from './Spinner';

package/dist/components/Spinner/index.js

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

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

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

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

@@ -1,55 +0,0 @@
-import { style, styleVariants, keyframes } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-export const spin = keyframes({
-    '0%': { transform: 'rotate(0deg)' },
-    '100%': { transform: 'rotate(360deg)' },
-});
-export 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,
-    },
-});
-export 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',
-    },
-});
-export const spinner = style({
-    borderRadius: '50%',
-    borderStyle: 'solid',
-    animation: `${spin} 1s linear infinite`,
-    display: 'inline-block',
-});

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;

package/dist/components/Stack/Stack.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import Box from '../Box';
-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 = forwardRef(({ direction = 'column', align, justify, gap, wrap, children, className, style, ...rest }, ref) => {
-    const alignItems = align ? alignMap[align] : undefined;
-    const justifyContent = justify ? justifyMap[justify] : undefined;
-    return (_jsx(Box, { ref: ref, display: "flex", flexDirection: direction, alignItems: alignItems, justifyContent: justifyContent, gap: gap, className: className, style: { flexWrap: wrap ? 'wrap' : undefined, ...style }, ...rest, children: children }));
-});
-Stack.displayName = 'Stack';
-export default Stack;

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

@@ -1,2 +0,0 @@
-export { default as Stack } from './Stack';
-export type { StackProps, StackDirection, StackAlign, StackJustify } from './Stack';

package/dist/components/Stack/index.js

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

package/dist/components/Stepper/Stepper.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { stepperContainer, stepperHorizontal, stepperVertical, step, stepVertical, stepIndicator, stepIndicatorVariants, stepContent, stepContentVertical, stepTitle, stepDescription, stepConnector, stepConnectorCompleted, stepConnectorVertical, } from './styles.css';
-import Box from '../Box';
-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 (_jsx(Box, { className: clsx(stepperContainer, orientation === 'horizontal' ? 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 = status === 'completed';
-            return (_jsxs(Box, { className: clsx(step, orientation === 'vertical' && stepVertical), role: "listitem", "aria-current": status === 'current' ? 'step' : undefined, children: [showConnectors && !isLast && orientation === 'horizontal' && (_jsx(Box, { className: clsx(stepConnector, isCompleted && stepConnectorCompleted), "aria-hidden": "true" })), showConnectors && !isLast && orientation === 'vertical' && (_jsx(Box, { className: stepConnectorVertical, style: { backgroundColor: isCompleted ? undefined : undefined }, "aria-hidden": "true" })), _jsx(Box, { className: clsx(stepIndicator, stepIndicatorVariants[status]), onClick: () => handleStepClick(index), style: { cursor: clickable ? 'pointer' : 'default' }, "aria-label": `Step ${index + 1}: ${stepItem.title}`, children: status === 'completed' ? '✓' : index + 1 }), _jsxs(Box, { className: clsx(stepContent, orientation === 'vertical' && stepContentVertical), children: [_jsx(Box, { as: "h4", className: stepTitle, children: stepItem.title }), stepItem.description && (_jsx(Box, { as: "p", className: stepDescription, children: stepItem.description }))] })] }, index));
-        }) }));
-};
-export default Stepper;

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

@@ -1,2 +0,0 @@
-export { default as Stepper } from './Stepper';
-export type { StepperProps, Step, StepperOrientation, StepStatus } from './Stepper';

package/dist/components/Stepper/index.js

@@ -1 +0,0 @@
-export { default as Stepper } from './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,104 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const stepperContainer = styleWithLayer({
-    display: 'flex',
-    alignItems: 'flex-start',
-    width: '100%',
-});
-export const stepperHorizontal = styleWithLayer({
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-});
-export const stepperVertical = styleWithLayer({
-    flexDirection: 'column',
-    gap: '1rem',
-});
-export const step = styleWithLayer({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    position: 'relative',
-    flex: 1,
-});
-export const stepVertical = styleWithLayer({
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    gap: '1rem',
-});
-export 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,
-});
-export 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}`,
-    },
-});
-export const stepContent = styleWithLayer({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    marginTop: '0.5rem',
-    textAlign: 'center',
-});
-export const stepContentVertical = styleWithLayer({
-    alignItems: 'flex-start',
-    marginTop: 0,
-    textAlign: 'left',
-});
-export const stepTitle = styleWithLayer({
-    fontFamily: vars.fontFamily.heading,
-    fontSize: '14px',
-    fontWeight: '600',
-    color: vars.colors.textPrimary,
-    margin: 0,
-});
-export const stepDescription = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.textSecondary,
-    marginTop: '0.25rem',
-    maxWidth: '200px',
-});
-export 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,
-});
-export const stepConnectorCompleted = styleWithLayer({
-    backgroundColor: vars.colors.alertSuccessBorder,
-});
-export const stepConnectorVertical = styleWithLayer({
-    position: 'absolute',
-    top: '2.5rem',
-    left: '1.25rem',
-    width: '2px',
-    height: 'calc(100% + 1rem)',
-    backgroundColor: vars.colors.borderMuted,
-    zIndex: 0,
-});

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) => import("react/jsx-runtime").JSX.Element) & {
-    Thead: ({ children, className }: TheadProps) => import("react/jsx-runtime").JSX.Element;
-    Tbody: ({ children, className }: TbodyProps) => import("react/jsx-runtime").JSX.Element;
-    Tfoot: ({ children, className }: TfootProps) => import("react/jsx-runtime").JSX.Element;
-    Tr: ({ children, className }: TrProps) => import("react/jsx-runtime").JSX.Element;
-    Th: ({ children, className }: ThProps) => import("react/jsx-runtime").JSX.Element;
-    Td: ({ children, className, colSpan, rowSpan }: TdProps) => import("react/jsx-runtime").JSX.Element;
-};
-export default Table;

package/dist/components/Table/Table.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { createContext, useContext } from 'react';
-import { table, thead, tbody, tfoot, tr, th, td, tableContainer, } from './styles.css';
-import Box from '../Box';
-// Context to pass striping info to rows
-const TableContext = createContext({});
-const TableComponent = ({ children, className, striped = false, containerClassName, }) => {
-    return (_jsx(TableContext.Provider, { value: { striped }, children: _jsx(Box, { className: clsx(tableContainer, containerClassName), width: "100%", children: _jsx(Box, { as: "table", className: clsx(table, className), children: children }) }) }));
-};
-const Thead = ({ children, className }) => {
-    return _jsx(Box, { as: "thead", className: clsx(thead, className), children: children });
-};
-const Tbody = ({ children, className }) => {
-    return _jsx(Box, { as: "tbody", className: clsx(tbody, className), children: children });
-};
-const Tfoot = ({ children, className }) => {
-    return _jsx(Box, { as: "tfoot", className: clsx(tfoot, className), children: children });
-};
-const Tr = ({ children, className }) => {
-    const { striped } = useContext(TableContext);
-    return (_jsx(Box, { as: "tr", className: clsx(tr[striped ? 'striped' : 'default'], className), children: children }));
-};
-const Th = ({ children, className }) => {
-    return _jsx(Box, { as: "th", className: clsx(th, className), children: children });
-};
-const Td = ({ children, className, colSpan, rowSpan }) => {
-    return (_jsx(Box, { as: "td", className: clsx(td, className), colSpan: colSpan, rowSpan: rowSpan, children: children }));
-};
-// Attach sub-components
-const Table = Object.assign(TableComponent, {
-    Thead,
-    Tbody,
-    Tfoot,
-    Tr,
-    Th,
-    Td,
-});
-export default Table;

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

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

package/dist/components/Table/index.js

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

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) => import("react/jsx-runtime").JSX.Element) & {
-    List: ({ children, className }: TabListProps) => import("react/jsx-runtime").JSX.Element;
-    Tab: ({ value, children, disabled, className }: TabProps) => import("react/jsx-runtime").JSX.Element;
-    Panel: ({ value, children, className }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
-};
-export default TabsComponent;

package/dist/components/Tabs/Tabs.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { createContext, useContext, useState } from 'react';
-import { tabsContainer, tabsList, tabsListHorizontal, tabsListVertical, tabItem, tabContent, } from './styles.css';
-import Box from '../Box';
-const TabsContext = 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 (_jsx(TabsContext.Provider, { value: { activeTab, setActiveTab: handleTabChange, orientation }, children: _jsx(Box, { className: clsx(tabsContainer, className), width: "100%", children: children }) }));
-};
-const TabList = ({ children, className }) => {
-    const { orientation } = useContext(TabsContext);
-    return (_jsx(Box, { as: "div", role: "tablist", className: clsx(tabsList, orientation === 'vertical' ? 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 (_jsx(Box, { as: "button", role: "tab", "aria-selected": isActive, disabled: disabled, onClick: handleClick, className: clsx(tabItem[orientation === 'vertical'
-            ? 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 (_jsx(Box, { as: "div", role: "tabpanel", className: clsx(tabContent, className), children: children }));
-};
-const TabsComponent = Object.assign(Tabs, {
-    List: TabList,
-    Tab,
-    Panel: TabPanel,
-});
-export default TabsComponent;

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

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

package/dist/components/Tabs/index.js

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