Text

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

import { mergeProps, useRender } from '@base-ui/react';import { cva, type VariantProps } from '@/lib/utils';// TODO: Use fluid typographyexport const textVariants = cva({  base: '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 = <p />,  ...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),  });}