Text

import { defineConfig, getSchema, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const { cva, cx: cn } = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };
export { getSchema };

import { mergeProps, useRender } from '@base-ui/react';
import { cva, type VariantProps } from '@/lib/utils';

// TODO: Use fluid typography
export const textVariants = cva({
  base: 'text-pretty text-current',
  variants: {
    size: {
      xs: 'text-xs',
      sm: 'text-sm tracking-[-0.005em]',
      md: 'text-base tracking-[-0.010em]',
      lg: 'text-lg/6 tracking-[-0.015em]',
      xl: 'text-xl/[30px] tracking-[-0.015em]',
    },

    weight: {
      regular: 'font-normal',
      medium: 'font-medium',
      semibold: 'font-semibold',
      bold: 'font-bold',
    },
  },

  defaultVariants: {
    size: 'md',
    weight: 'regular',
  },
});

/**
 * Documentation: [Caprice UI Text](https://caprice-ui.com/docs/foundations/typography/text)
 */
export namespace Text {
  export type Props = useRender.ComponentProps<'p'> & VariantProps<typeof textVariants>;
}

export function Text({
  size = 'md',
  weight = 'regular',
  className,
  children,
  render,
  ...props
}: Text.Props) {
  const defaultProps: useRender.ElementProps<'p'> & { 'data-slot'?: string } = {
    'data-slot': 'text',
    className: textVariants({
      size,
      weight,
      className,
    }),
  };

  return useRender({
    render,
    defaultTagName: 'p',
    props: mergeProps<'p'>(defaultProps, props),
  });
}