@codefast/ui 0.0.7 → 0.0.9

package/src/data-table.tsx

@@ -36,11 +36,12 @@ import { cn } from "./utils";
  * Component: DataTableViewOptions
  * -------------------------------------------------------------------------- */
 
+interface DataTableViewOptionsProps<TData> {
+  table: ReactTable.Table<TData>;
+}
 function DataTableViewOptions<TData>({
   table,
-}: {
-  table: ReactTable.Table<TData>;
-}): React.JSX.Element {
+}: DataTableViewOptionsProps<TData>): React.JSX.Element {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -85,13 +86,15 @@ function DataTableViewOptions<TData>({
  * Component: DataTablePagination
  * -------------------------------------------------------------------------- */
 
+interface DataTablePaginationProps<TData>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  table: ReactTable.Table<TData>;
+}
 function DataTablePagination<TData>({
   table,
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement> & {
-  table: ReactTable.Table<TData>;
-}): React.JSX.Element {
+}: DataTablePaginationProps<TData>): React.JSX.Element {
   return (
     <div
       className={cn("flex items-center justify-between px-2", className)}
@@ -183,14 +186,16 @@ function DataTablePagination<TData>({
  * Component: DataTableColumnHeader
  * -------------------------------------------------------------------------- */
 
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: ReactTable.Column<TData, TValue>;
+  title: string;
+}
 function DataTableColumnHeader<TData, TValue>({
   column,
   title,
   className,
-}: React.HTMLAttributes<HTMLDivElement> & {
-  column: ReactTable.Column<TData, TValue>;
-  title: string;
-}): React.JSX.Element {
+}: DataTableColumnHeaderProps<TData, TValue>): React.JSX.Element {
   if (!column.getCanSort()) {
     return <div className={cn(className)}>{title}</div>;
   }
@@ -250,6 +255,13 @@ function DataTableColumnHeader<TData, TValue>({
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { DataTableViewOptions, DataTablePagination, DataTableColumnHeader };
+export {
+  DataTableViewOptions,
+  DataTablePagination,
+  DataTableColumnHeader,
+  type DataTableViewOptionsProps,
+  type DataTablePaginationProps,
+  type DataTableColumnHeaderProps,
+};
 
 export * from "@tanstack/react-table";

package/src/dialog.tsx

@@ -9,27 +9,31 @@ import { cn } from "./utils";
  * Component: Dialog
  * -------------------------------------------------------------------------- */
 
+type DialogProps = DialogPrimitive.DialogProps;
 const Dialog = DialogPrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: DialogTrigger
  * -------------------------------------------------------------------------- */
 
+type DialogTriggerProps = DialogPrimitive.DialogTriggerProps;
 const DialogTrigger = DialogPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: DialogClose
  * -------------------------------------------------------------------------- */
 
+type DialogCloseProps = DialogPrimitive.DialogCloseProps;
 const DialogClose = DialogPrimitive.Close;
 
 /* -----------------------------------------------------------------------------
  * Component: DialogContent
  * -------------------------------------------------------------------------- */
 
+type DialogContentProps = DialogPrimitive.DialogContentProps;
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  DialogPrimitive.DialogContentProps
+  DialogContentProps
 >(({ className, children, ...props }, ref) => (
   <DialogPrimitive.Portal>
     <DialogPrimitive.Overlay
@@ -63,10 +67,11 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
  * Component: DialogHeader
  * -------------------------------------------------------------------------- */
 
+type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 function DialogHeader({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+}: DialogHeaderProps): React.JSX.Element {
   return (
     <div
       className={cn(
@@ -82,10 +87,11 @@ function DialogHeader({
  * Component: DialogFooter
  * -------------------------------------------------------------------------- */
 
+type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
 function DialogFooter({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+}: DialogFooterProps): React.JSX.Element {
   return (
     <div
       className={cn(
@@ -101,9 +107,10 @@ function DialogFooter({
  * Component: DialogTitle
  * -------------------------------------------------------------------------- */
 
+type DialogTitleProps = DialogPrimitive.DialogTitleProps;
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
-  DialogPrimitive.DialogTitleProps
+  DialogTitleProps
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
@@ -120,9 +127,10 @@ DialogTitle.displayName = DialogPrimitive.Title.displayName;
  * Component: DialogDescription
  * -------------------------------------------------------------------------- */
 
+type DialogDescriptionProps = DialogPrimitive.DialogDescriptionProps;
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
-  DialogPrimitive.DialogDescriptionProps
+  DialogDescriptionProps
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
@@ -145,4 +153,12 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
+  type DialogProps,
+  type DialogTriggerProps,
+  type DialogCloseProps,
+  type DialogContentProps,
+  type DialogHeaderProps,
+  type DialogFooterProps,
+  type DialogTitleProps,
+  type DialogDescriptionProps,
 };

package/src/drawer.tsx

@@ -8,10 +8,11 @@ import { cn } from "./utils";
  * Component: Drawer
  * -------------------------------------------------------------------------- */
 
+type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;
 function Drawer({
   shouldScaleBackground = true,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>): React.JSX.Element {
+}: DrawerProps): React.JSX.Element {
   return (
     <DrawerPrimitive.Root
       shouldScaleBackground={shouldScaleBackground}
@@ -24,21 +25,26 @@ function Drawer({
  * Component: DrawerTrigger
  * -------------------------------------------------------------------------- */
 
+type DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>;
 const DrawerTrigger = DrawerPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: DrawerClose
  * -------------------------------------------------------------------------- */
 
+type DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>;
 const DrawerClose = DrawerPrimitive.Close;
 
 /* -----------------------------------------------------------------------------
  * Component: DrawerContent
  * -------------------------------------------------------------------------- */
 
+type DrawerContentProps = React.ComponentPropsWithoutRef<
+  typeof DrawerPrimitive.Content
+>;
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+  DrawerContentProps
 >(({ className, children, ...props }, ref) => (
   <DrawerPrimitive.Portal>
     <DrawerPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80" />
@@ -61,10 +67,11 @@ DrawerContent.displayName = "DrawerContent";
  * Component: DrawerHeader
  * -------------------------------------------------------------------------- */
 
+type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 function DrawerHeader({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+}: DrawerHeaderProps): React.JSX.Element {
   return (
     <div
       className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
@@ -77,10 +84,11 @@ function DrawerHeader({
  * Component: DrawerFooter
  * -------------------------------------------------------------------------- */
 
+type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;
 function DrawerFooter({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+}: DrawerFooterProps): React.JSX.Element {
   return (
     <div
       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
@@ -93,9 +101,12 @@ function DrawerFooter({
  * Component: DrawerTitle
  * -------------------------------------------------------------------------- */
 
+type DrawerTitleProps = React.ComponentPropsWithoutRef<
+  typeof DrawerPrimitive.Title
+>;
 const DrawerTitle = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+  DrawerTitleProps
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Title
     ref={ref}
@@ -112,9 +123,12 @@ DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
  * Component: DrawerDescription
  * -------------------------------------------------------------------------- */
 
+type DrawerDescriptionProps = React.ComponentPropsWithoutRef<
+  typeof DrawerPrimitive.Description
+>;
 const DrawerDescription = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+  DrawerDescriptionProps
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Description
     ref={ref}
@@ -137,4 +151,12 @@ export {
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
+  type DrawerProps,
+  type DrawerTriggerProps,
+  type DrawerCloseProps,
+  type DrawerContentProps,
+  type DrawerHeaderProps,
+  type DrawerFooterProps,
+  type DrawerTitleProps,
+  type DrawerDescriptionProps,
 };

package/src/dropdown-menu.tsx

@@ -13,41 +13,49 @@ import { cn } from "./utils";
  * Component: DropdownMenu
  * -------------------------------------------------------------------------- */
 
+type DropdownMenuProps = DropdownMenuPrimitive.DropdownMenuProps;
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuTrigger
  * -------------------------------------------------------------------------- */
 
+type DropdownMenuTriggerProps = DropdownMenuPrimitive.DropdownMenuTriggerProps;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuGroup
  * -------------------------------------------------------------------------- */
 
+type DropdownMenuGroupProps = DropdownMenuPrimitive.DropdownMenuGroupProps;
 const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuSub
  * -------------------------------------------------------------------------- */
 
+type DropdownMenuSubProps = DropdownMenuPrimitive.DropdownMenuSubProps;
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuSubTrigger
  * -------------------------------------------------------------------------- */
 
+type DropdownMenuRadioGroupProps =
+  DropdownMenuPrimitive.DropdownMenuRadioGroupProps;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuSubTrigger
  * -------------------------------------------------------------------------- */
 
+interface DropdownMenuSubTriggerProps
+  extends DropdownMenuPrimitive.DropdownMenuSubTriggerProps {
+  inset?: boolean;
+}
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  DropdownMenuPrimitive.DropdownMenuSubTriggerProps & {
-    inset?: boolean;
-  }
+  DropdownMenuSubTriggerProps
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
@@ -69,9 +77,11 @@ DropdownMenuSubTrigger.displayName =
  * Component: DropdownMenuSubContent
  * -------------------------------------------------------------------------- */
 
+type DropdownMenuSubContentProps =
+  DropdownMenuPrimitive.DropdownMenuSubContentProps;
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  DropdownMenuPrimitive.DropdownMenuSubContentProps
+  DropdownMenuSubContentProps
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.SubContent
@@ -91,9 +101,10 @@ DropdownMenuSubContent.displayName =
  * Component: DropdownMenuContent
  * -------------------------------------------------------------------------- */
 
+type DropdownMenuContentProps = DropdownMenuPrimitive.DropdownMenuContentProps;
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  DropdownMenuPrimitive.DropdownMenuContentProps
+  DropdownMenuContentProps
 >(({ className, sideOffset = 4, ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
@@ -113,11 +124,13 @@ DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
  * Component: DropdownMenuItem
  * -------------------------------------------------------------------------- */
 
+interface DropdownMenuItemProps
+  extends DropdownMenuPrimitive.DropdownMenuItemProps {
+  inset?: boolean;
+}
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  DropdownMenuPrimitive.DropdownMenuItemProps & {
-    inset?: boolean;
-  }
+  DropdownMenuItemProps
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
@@ -135,9 +148,11 @@ DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
  * Component: DropdownMenuCheckboxItem
  * -------------------------------------------------------------------------- */
 
+type DropdownMenuCheckboxItemProps =
+  DropdownMenuPrimitive.DropdownMenuCheckboxItemProps;
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  DropdownMenuPrimitive.DropdownMenuCheckboxItemProps
+  DropdownMenuCheckboxItemProps
 >(({ className, children, checked, ...props }, ref) => (
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
@@ -163,9 +178,11 @@ DropdownMenuCheckboxItem.displayName =
  * Component: DropdownMenuRadioItem
  * -------------------------------------------------------------------------- */
 
+type DropdownMenuRadioItemProps =
+  DropdownMenuPrimitive.DropdownMenuRadioItemProps;
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  DropdownMenuPrimitive.DropdownMenuRadioItemProps
+  DropdownMenuRadioItemProps
 >(({ className, children, ...props }, ref) => (
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
@@ -189,11 +206,13 @@ DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
  * Component: DropdownMenuLabel
  * -------------------------------------------------------------------------- */
 
+interface DropdownMenuLabelProps
+  extends DropdownMenuPrimitive.DropdownMenuLabelProps {
+  inset?: boolean;
+}
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  DropdownMenuPrimitive.DropdownMenuLabelProps & {
-    inset?: boolean;
-  }
+  DropdownMenuLabelProps
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
@@ -211,9 +230,11 @@ DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
  * Component: DropdownMenuSeparator
  * -------------------------------------------------------------------------- */
 
+type DropdownMenuSeparatorProps =
+  DropdownMenuPrimitive.DropdownMenuSeparatorProps;
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  DropdownMenuPrimitive.DropdownMenuSeparatorProps
+  DropdownMenuSeparatorProps
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
@@ -227,10 +248,11 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
  * Component: DropdownMenuShortcut
  * -------------------------------------------------------------------------- */
 
+type DropdownMenuShortcutProps = React.HTMLAttributes<HTMLSpanElement>;
 function DropdownMenuShortcut({
   className,
   ...props
-}: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element {
+}: DropdownMenuShortcutProps): React.JSX.Element {
   return (
     <span
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
@@ -258,4 +280,18 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
+  type DropdownMenuProps,
+  type DropdownMenuTriggerProps,
+  type DropdownMenuContentProps,
+  type DropdownMenuItemProps,
+  type DropdownMenuCheckboxItemProps,
+  type DropdownMenuRadioItemProps,
+  type DropdownMenuLabelProps,
+  type DropdownMenuSeparatorProps,
+  type DropdownMenuShortcutProps,
+  type DropdownMenuGroupProps,
+  type DropdownMenuSubProps,
+  type DropdownMenuSubContentProps,
+  type DropdownMenuSubTriggerProps,
+  type DropdownMenuRadioGroupProps,
 };

package/src/em.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+/* -----------------------------------------------------------------------------
+ * Component: Em
+ * -------------------------------------------------------------------------- */
+
+interface EmProps extends React.HTMLAttributes<HTMLElement> {
+  asChild?: boolean;
+}
+const Em = React.forwardRef<HTMLElement, EmProps>(
+  ({ asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "em";
+
+    return <Comp ref={ref} {...props} />;
+  },
+);
+Em.displayName = "Em";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Em, type EmProps };

package/src/form.tsx

@@ -78,16 +78,21 @@ const useFormField = (): {
  * Component: Form
  * -------------------------------------------------------------------------- */
 
+type FormProps = React.ComponentProps<typeof FormProvider>;
 const Form = FormProvider;
 
 /* -----------------------------------------------------------------------------
  * Component: FormField
  * -------------------------------------------------------------------------- */
 
+type FormFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = ControllerProps<TFieldValues, TName>;
 function FormField<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({ ...props }: ControllerProps<TFieldValues, TName>): React.JSX.Element {
+>({ ...props }: FormFieldProps<TFieldValues, TName>): React.JSX.Element {
   return (
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
@@ -99,27 +104,30 @@ function FormField<
  * Component: FormItem
  * -------------------------------------------------------------------------- */
 
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId();
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
-  );
-});
+type FormItemProps = React.HTMLAttributes<HTMLDivElement>;
+const FormItem = React.forwardRef<HTMLDivElement, FormItemProps>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  },
+);
 FormItem.displayName = "FormItem";
 
 /* -----------------------------------------------------------------------------
  * Component: FormLabel
  * -------------------------------------------------------------------------- */
 
+type FormLabelProps = React.ComponentPropsWithoutRef<
+  typeof LabelPrimitive.Root
+>;
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+  FormLabelProps
 >(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
 
@@ -138,9 +146,10 @@ FormLabel.displayName = "FormLabel";
  * Component: FormControl
  * -------------------------------------------------------------------------- */
 
+type FormControlProps = React.ComponentPropsWithoutRef<typeof Slot>;
 const FormControl = React.forwardRef<
   React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
+  FormControlProps
 >(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } =
     useFormField();
@@ -163,9 +172,10 @@ FormControl.displayName = "FormControl";
  * Component: FormDescription
  * -------------------------------------------------------------------------- */
 
+type FormDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+  FormDescriptionProps
 >(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
 
@@ -184,28 +194,28 @@ FormDescription.displayName = "FormDescription";
  * Component: FormMessage
  * -------------------------------------------------------------------------- */
 
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error.message) : children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-destructive text-[0.8rem] font-medium", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  );
-});
+type FormMessageProps = React.HTMLAttributes<HTMLParagraphElement>;
+const FormMessage = React.forwardRef<HTMLParagraphElement, FormMessageProps>(
+  ({ className, children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error.message) : children;
+
+    if (!body) {
+      return null;
+    }
+
+    return (
+      <p
+        ref={ref}
+        id={formMessageId}
+        className={cn("text-destructive text-[0.8rem] font-medium", className)}
+        {...props}
+      >
+        {body}
+      </p>
+    );
+  },
+);
 FormMessage.displayName = "FormMessage";
 
 /* -----------------------------------------------------------------------------
@@ -221,4 +231,11 @@ export {
   FormDescription,
   FormMessage,
   FormField,
+  type FormProps,
+  type FormItemProps,
+  type FormLabelProps,
+  type FormControlProps,
+  type FormDescriptionProps,
+  type FormMessageProps,
+  type FormFieldProps,
 };

package/src/heading.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+/* -----------------------------------------------------------------------------
+ * Component: Heading
+ * -------------------------------------------------------------------------- */
+
+interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  asChild?: boolean;
+}
+const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
+  ({ asChild, as: Tag = "h1", ...props }, ref) => {
+    const Com = asChild ? Slot : Tag;
+
+    return <Com ref={ref} {...props} />;
+  },
+);
+Heading.displayName = "Heading";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Heading, type HeadingProps };