@codefast/ui 0.0.8 → 0.0.10

package/src/form.tsx

@@ -14,19 +14,7 @@ import { cn } from "./utils";
 import { Label } from "./label";
 
 /* -----------------------------------------------------------------------------
- * Context: FormItemContext
- * -------------------------------------------------------------------------- */
-
-interface FormItemContextValue {
-  id: string;
-}
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue,
-);
-
-/* -----------------------------------------------------------------------------
- * Context: FormFieldContext
+ * Context: Form
  * -------------------------------------------------------------------------- */
 
 interface FormFieldContextValue<
@@ -36,9 +24,13 @@ interface FormFieldContextValue<
   name: TName;
 }
 
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue,
-);
+interface FormItemContextValue {
+  id: string;
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);
+
+const FormItemContext = React.createContext<FormItemContextValue | null>(null);
 
 const useFormField = (): {
   invalid: boolean;
@@ -56,12 +48,12 @@ const useFormField = (): {
   const itemContext = React.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
+  if (!fieldContext || !itemContext) {
     throw new Error("useFormField should be used within <FormField>");
   }
 
+  const fieldState = getFieldState(fieldContext.name, formState);
+
   const { id } = itemContext;
 
   return {
@@ -78,16 +70,22 @@ 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,10 +97,10 @@ function FormField<
  * Component: FormItem
  * -------------------------------------------------------------------------- */
 
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
+type FormItemElement = HTMLDivElement;
+type FormItemProps = React.HTMLAttributes<HTMLDivElement>;
+
+const FormItem = React.forwardRef<FormItemElement, FormItemProps>(({ className, ...props }, ref) => {
   const id = React.useId();
 
   return (
@@ -111,83 +109,74 @@ const FormItem = React.forwardRef<
     </FormItemContext.Provider>
   );
 });
+
 FormItem.displayName = "FormItem";
 
 /* -----------------------------------------------------------------------------
  * Component: FormLabel
  * -------------------------------------------------------------------------- */
 
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
+type FormFieldElement = React.ElementRef<typeof LabelPrimitive.Root>;
+type FormLabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
+
+const FormLabel = React.forwardRef<FormFieldElement, FormLabelProps>(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
 
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
+  return <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} />;
 });
+
 FormLabel.displayName = "FormLabel";
 
 /* -----------------------------------------------------------------------------
  * Component: FormControl
  * -------------------------------------------------------------------------- */
 
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
+type FormControlElement = React.ElementRef<typeof Slot>;
+type FormControlProps = React.ComponentPropsWithoutRef<typeof Slot>;
+
+const FormControl = React.forwardRef<FormControlElement, FormControlProps>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 
   return (
     <Slot
       ref={ref}
       id={formItemId}
-      aria-describedby={
-        !error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`
-      }
+      aria-describedby={!error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`}
       aria-invalid={Boolean(error)}
       {...props}
     />
   );
 });
+
 FormControl.displayName = "FormControl";
 
 /* -----------------------------------------------------------------------------
  * Component: FormDescription
  * -------------------------------------------------------------------------- */
 
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
+type FormDescriptionElement = HTMLParagraphElement;
+type FormDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+
+const FormDescription = React.forwardRef<FormDescriptionElement, FormDescriptionProps>(
+  ({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
+
+    return (
+      <p ref={ref} id={formDescriptionId} className={cn("text-muted-foreground text-[0.8rem]", className)} {...props} />
+    );
+  },
+);
 
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-muted-foreground text-[0.8rem]", className)}
-      {...props}
-    />
-  );
-});
 FormDescription.displayName = "FormDescription";
 
 /* -----------------------------------------------------------------------------
  * Component: FormMessage
  * -------------------------------------------------------------------------- */
 
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
+type FormMessageElement = HTMLParagraphElement;
+type FormMessageProps = React.HTMLAttributes<HTMLParagraphElement>;
+
+const FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error.message) : children;
 
@@ -196,16 +185,12 @@ const FormMessage = React.forwardRef<
   }
 
   return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-destructive text-[0.8rem] font-medium", className)}
-      {...props}
-    >
+    <p ref={ref} id={formMessageId} className={cn("text-destructive text-[0.8rem] font-medium", className)} {...props}>
       {body}
     </p>
   );
 });
+
 FormMessage.displayName = "FormMessage";
 
 /* -----------------------------------------------------------------------------
@@ -221,4 +206,11 @@ export {
   FormDescription,
   FormMessage,
   FormField,
+  type FormProps,
+  type FormItemProps,
+  type FormLabelProps,
+  type FormControlProps,
+  type FormDescriptionProps,
+  type FormMessageProps,
+  type FormFieldProps,
 };

package/src/heading.tsx

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

package/src/hover-card.tsx

@@ -8,39 +8,51 @@ import { cn } from "./utils";
  * Component: HoverCard
  * -------------------------------------------------------------------------- */
 
+type HoverCardProps = React.ComponentProps<typeof HoverCardPrimitive.Root>;
 const HoverCard = HoverCardPrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: HoverCardTrigger
  * -------------------------------------------------------------------------- */
 
+type HoverCardTriggerProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger>;
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: HoverCardContent
  * -------------------------------------------------------------------------- */
 
-const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  HoverCardPrimitive.HoverCardContentProps
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Portal>
-    <HoverCardPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-[8rem] rounded-md border p-4 shadow-md focus:outline-none",
-        className,
-      )}
-      {...props}
-    />
-  </HoverCardPrimitive.Portal>
-));
+type HoverCardContentElement = React.ElementRef<typeof HoverCardPrimitive.Content>;
+type HoverCardContentProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>;
+
+const HoverCardContent = React.forwardRef<HoverCardContentElement, HoverCardContentProps>(
+  ({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+    <HoverCardPrimitive.Portal>
+      <HoverCardPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-[8rem] rounded-md border p-4 shadow-md focus:outline-none",
+          className,
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  ),
+);
+
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+export {
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+  type HoverCardProps,
+  type HoverCardTriggerProps,
+  type HoverCardContentProps,
+};

package/src/input-otp.tsx

@@ -5,6 +5,8 @@ import { DotFilledIcon } from "@radix-ui/react-icons";
 import {
   OTPInput,
   OTPInputContext,
+  REGEXP_ONLY_CHARS,
+  REGEXP_ONLY_DIGITS,
   REGEXP_ONLY_DIGITS_AND_CHARS,
 } from "input-otp";
 import { cn } from "./utils";
@@ -13,42 +15,46 @@ import { cn } from "./utils";
  * Component: InputOtp
  * -------------------------------------------------------------------------- */
 
-const InputOTP = React.forwardRef<
-  React.ElementRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
-  <OTPInput
-    ref={ref}
-    containerClassName={cn(
-      "flex items-center gap-2 has-[:disabled]:opacity-50",
-      containerClassName,
-    )}
-    className={cn("disabled:cursor-not-allowed", className)}
-    {...props}
-  />
-));
+type InputOTPElement = React.ElementRef<typeof OTPInput>;
+type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput>;
+
+const InputOTP = React.forwardRef<InputOTPElement, InputOTPProps>(
+  ({ className, containerClassName, ...props }, ref) => (
+    <OTPInput
+      ref={ref}
+      containerClassName={cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName)}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  ),
+);
+
 InputOTP.displayName = "InputOTP";
 
 /* -----------------------------------------------------------------------------
  * Component: InputOTPGroup
  * -------------------------------------------------------------------------- */
 
-const InputOTPGroup = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
+type InputOTPGroupElement = HTMLDivElement;
+type InputOTPGroupProps = React.HTMLAttributes<HTMLDivElement>;
+
+const InputOTPGroup = React.forwardRef<InputOTPGroupElement, InputOTPGroupProps>(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("flex items-center", className)} {...props} />
 ));
+
 InputOTPGroup.displayName = "InputOTPGroup";
 
 /* -----------------------------------------------------------------------------
  * Component: InputOTPSlot
  * -------------------------------------------------------------------------- */
 
-const InputOTPSlot = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & { index: number }
->(({ index, className, ...props }, ref) => {
+type InputOTPSlotElement = HTMLDivElement;
+
+interface InputOTPSlotProps extends React.HTMLAttributes<HTMLDivElement> {
+  index: number;
+}
+
+const InputOTPSlot = React.forwardRef<InputOTPSlotElement, InputOTPSlotProps>(({ index, className, ...props }, ref) => {
   const inputOTPContext = React.useContext(OTPInputContext);
   const slot = inputOTPContext.slots[index];
 
@@ -71,20 +77,22 @@ const InputOTPSlot = React.forwardRef<
     </div>
   );
 });
+
 InputOTPSlot.displayName = "InputOTPSlot";
 
 /* -----------------------------------------------------------------------------
  * Component: InputOTPSeparator
  * -------------------------------------------------------------------------- */
 
-const InputOTPSeparator = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ ...props }, ref) => (
+type InputOTPSeparatorElement = HTMLDivElement;
+type InputOTPSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
+
+const InputOTPSeparator = React.forwardRef<InputOTPSeparatorElement, InputOTPSeparatorProps>(({ ...props }, ref) => (
   <div ref={ref} role="separator" {...props}>
     <DotFilledIcon />
   </div>
 ));
+
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 /* -----------------------------------------------------------------------------
@@ -96,5 +104,11 @@ export {
   InputOTPGroup,
   InputOTPSlot,
   InputOTPSeparator,
+  type InputOTPProps,
+  type InputOTPGroupProps,
+  type InputOTPSlotProps,
+  type InputOTPSeparatorProps,
   REGEXP_ONLY_DIGITS_AND_CHARS,
+  REGEXP_ONLY_CHARS,
+  REGEXP_ONLY_DIGITS,
 };

package/src/input.tsx

@@ -7,7 +7,13 @@ import { cva } from "./utils";
  * -------------------------------------------------------------------------- */
 
 const inputVariants = cva({
-  base: "border-input focus-visible:ring-ring focus-visible:ring-offset-background placeholder:text-muted-foreground flex w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  base: [
+    "border-input flex w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm transition-colors",
+    "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "placeholder:text-muted-foreground",
+    "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+  ],
   variants: {
     inputSize: {
       default: "h-10",
@@ -21,28 +27,23 @@ const inputVariants = cva({
   },
 });
 
+type InputVariantsProps = VariantProps<typeof inputVariants>;
+
 /* -----------------------------------------------------------------------------
  * Component: Input
  * -------------------------------------------------------------------------- */
 
-const Input = React.forwardRef<
-  HTMLInputElement,
-  Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> &
-    VariantProps<typeof inputVariants>
->(({ className, inputSize, ...props }, ref) => {
-  return (
-    <input
-      type="text"
-      className={inputVariants({ className, inputSize })}
-      ref={ref}
-      {...props}
-    />
-  );
+type InputElement = HTMLInputElement;
+type InputProps = React.InputHTMLAttributes<HTMLInputElement> & InputVariantsProps;
+
+const Input = React.forwardRef<InputElement, InputProps>(({ className, inputSize, ...props }, ref) => {
+  return <input type="text" className={inputVariants({ className, inputSize })} ref={ref} {...props} />;
 });
+
 Input.displayName = "Input";
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Input };
+export { Input, type InputProps };

package/src/kbd.tsx

@@ -6,10 +6,13 @@ import { cn } from "./utils";
  * Component: Kbd
  * -------------------------------------------------------------------------- */
 
-const Kbd = React.forwardRef<
-  HTMLElement,
-  React.HTMLAttributes<HTMLElement> & { asChild?: boolean }
->(({ asChild, className, ...props }, ref) => {
+type KbdElement = HTMLElement;
+
+interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+  asChild?: boolean;
+}
+
+const Kbd = React.forwardRef<KbdElement, KbdProps>(({ asChild, className, ...props }, ref) => {
   const Comp = asChild ? Slot : "kbd";
 
   return (
@@ -23,10 +26,11 @@ const Kbd = React.forwardRef<
     />
   );
 });
+
 Kbd.displayName = "Kbd";
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Kbd };
+export { Kbd, type KbdProps };

package/src/label.tsx

@@ -7,10 +7,10 @@ import { cn } from "./utils";
  * Component: Label
  * -------------------------------------------------------------------------- */
 
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  LabelPrimitive.LabelProps
->(({ className, ...props }, ref) => (
+type LabelElement = React.ElementRef<typeof LabelPrimitive.Root>;
+type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
+
+const Label = React.forwardRef<LabelElement, LabelProps>(({ className, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}
     className={cn(
@@ -20,10 +20,11 @@ const Label = React.forwardRef<
     {...props}
   />
 ));
+
 Label.displayName = LabelPrimitive.Root.displayName;
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Label };
+export { Label, type LabelProps };