import { jsx as _jsx } from "react/jsx-runtime";
import Stack from '@mui/material/Stack/Stack';
import TextOverflowTip from './index';
const LONG_TEXT = 'This is a very long text that should overflow and show a tooltip with the full content when hovered.';
const meta = {
    title: 'Composed Components/TextOverflowTip',
    component: TextOverflowTip,
    tags: ['autodocs'],
    parameters: {
        layout: 'padded',
    },
    args: {
        primary: LONG_TEXT,
    },
    argTypes: {
        primary: { control: 'text' },
        length: { control: { type: 'number' } },
        lineClamp: { control: { type: 'number' } },
        slotProps: { control: false },
    },
};
export default meta;
const typographyProps = {
    variant: 'globalM',
    sx: { width: 200, border: '1px solid red' },
};
export const Default = {
    args: {
        slotProps: {
            typography: typographyProps,
        },
    },
};
export const LineClamp = {
    args: {
        lineClamp: 2,
        slotProps: {
            typography: typographyProps,
        },
    },
    render: args => (_jsx(Stack, { sx: {
            width: 200,
            p: 2,
            backgroundColor: 'oklch(86.9% 0.005 56.366)',
            borderRadius: '16px',
        }, children: _jsx(TextOverflowTip, { ...args }) })),
};
export const TruncateByLength = {
    args: {
        length: 40,
        slotProps: {
            typography: typographyProps,
        },
    },
};
