1import { cva, type VariantProps } from 'class-variance-authority';
2import React from 'react';
3
4import { classNames } from '../../../lib/utils';
5
6const paragraphVariants = cva('', {
7  variants: {
8    variant: {
9      small: 'text-sm leading-6 font-normal',
10      medium: 'text-sm md:text-base leading-6 md:leading-7 font-normal',
11      large: 'text-sm md:text-lg leading-6 md:leading-7 font-normal',
12      extralarge: 'text-lg md:text-2xl text-neutral-400 leading-7',
13    },
14  },
15  defaultVariants: {
16    variant: 'medium',
17  },
18  compoundVariants: [
19    {
20      variant: ['small', 'medium', 'large'],
21      className: 'text-alpha-700',
22    },
23  ],
24});
25
26type ParagraphProps = VariantProps<typeof paragraphVariants> & {
27  className?: string;
28  children: React.ReactNode;
29};
30
31const Paragraph: React.FC<ParagraphProps> = ({
32  className,
33  variant,
34  children,
35  ...props
36}) => {
37  const classes = classNames(paragraphVariants({ variant, className }));
38
39  return (
40    <p className={classes} {...props}>
41      {children}
42    </p>
43  );
44};
45
46Paragraph.displayName = 'Paragraph';
47
48export { Paragraph, paragraphVariants };
49

1import { cva, type VariantProps } from 'class-variance-authority';
2import React from 'react';
3
4import { classNames } from '../../../lib/utils';
5
6const paragraphVariants = cva('', {
7  variants: {
8    variant: {
9      small: 'text-sm leading-6 font-normal',
10      medium: 'text-sm md:text-base leading-6 md:leading-7 font-normal',
11      large: 'text-sm md:text-lg leading-6 md:leading-7 font-normal',
12      extralarge: 'text-lg md:text-2xl text-neutral-400 leading-7',
13    },
14  },
15  defaultVariants: {
16    variant: 'medium',
17  },
18  compoundVariants: [
19    {
20      variant: ['small', 'medium', 'large'],
21      className: 'text-alpha-700',
22    },
23  ],
24});
25
26type ParagraphProps = VariantProps<typeof paragraphVariants> & {
27  className?: string;
28  children: React.ReactNode;
29};
30
31const Paragraph: React.FC<ParagraphProps> = ({
32  className,
33  variant,
34  children,
35  ...props
36}) => {
37  const classes = classNames(paragraphVariants({ variant, className }));
38
39  return (
40    <p className={classes} {...props}>
41      {children}
42    </p>
43  );
44};
45
46Paragraph.displayName = 'Paragraph';
47
48export { Paragraph, paragraphVariants };
49