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

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

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

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,13 @@
+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

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

package/dist/components/Skeleton/index.js

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

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,8 @@
+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

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

package/dist/components/Spinner/index.js

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

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,24 @@
+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

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

package/dist/components/Stack/index.js

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

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,25 @@
+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

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

package/dist/components/Stepper/index.js

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

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,39 @@
+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

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

package/dist/components/Table/index.js

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

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,52 @@
+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

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

package/dist/components/Tabs/index.js

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