@codefast/ui 0.0.9 → 0.0.11

package/src/heading.tsx

@@ -5,17 +5,19 @@ import { Slot } from "@radix-ui/react-slot";
  * Component: Heading
  * -------------------------------------------------------------------------- */
 
+type HeadingElement = HTMLHeadingElement;
+
 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} />;
-  },
-);
+const Heading = React.forwardRef<HeadingElement, HeadingProps>(({ asChild, as: Tag = "h1", ...props }, ref) => {
+  const Component = asChild ? Slot : Tag;
+
+  return <Component ref={ref} {...props} />;
+});
+
 Heading.displayName = "Heading";
 
 /* -----------------------------------------------------------------------------

package/src/hover-card.tsx

@@ -8,38 +8,40 @@ import { cn } from "./utils";
  * Component: HoverCard
  * -------------------------------------------------------------------------- */
 
-type HoverCardProps = HoverCardPrimitive.HoverCardProps;
+type HoverCardProps = React.ComponentProps<typeof HoverCardPrimitive.Root>;
 const HoverCard = HoverCardPrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: HoverCardTrigger
  * -------------------------------------------------------------------------- */
 
-type HoverCardTriggerProps = HoverCardPrimitive.HoverCardTriggerProps;
+type HoverCardTriggerProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger>;
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: HoverCardContent
  * -------------------------------------------------------------------------- */
 
-type HoverCardContentProps = HoverCardPrimitive.HoverCardContentProps;
-const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  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;
 
 /* -----------------------------------------------------------------------------

package/src/input-otp.tsx

@@ -15,82 +15,84 @@ import { cn } from "./utils";
  * Component: InputOtp
  * -------------------------------------------------------------------------- */
 
+type InputOTPElement = React.ElementRef<typeof OTPInput>;
 type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput>;
-const InputOTP = React.forwardRef<
-  React.ElementRef<typeof OTPInput>,
-  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}
-  />
-));
+
+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
  * -------------------------------------------------------------------------- */
 
+type InputOTPGroupElement = HTMLDivElement;
 type InputOTPGroupProps = React.HTMLAttributes<HTMLDivElement>;
-const InputOTPGroup = React.forwardRef<HTMLDivElement, InputOTPGroupProps>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex items-center", className)} {...props} />
-  ),
-);
+
+const InputOTPGroup = React.forwardRef<InputOTPGroupElement, InputOTPGroupProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+));
+
 InputOTPGroup.displayName = "InputOTPGroup";
 
 /* -----------------------------------------------------------------------------
  * Component: InputOTPSlot
  * -------------------------------------------------------------------------- */
 
+type InputOTPSlotElement = HTMLDivElement;
+
 interface InputOTPSlotProps extends React.HTMLAttributes<HTMLDivElement> {
   index: number;
 }
-const InputOTPSlot = React.forwardRef<HTMLDivElement, InputOTPSlotProps>(
-  ({ index, className, ...props }, ref) => {
-    const inputOTPContext = React.useContext(OTPInputContext);
-    const slot = inputOTPContext.slots[index];
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "border-input relative flex size-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-          slot?.isActive && "ring-ring z-10 ring-2",
-          className,
-        )}
-        {...props}
-      >
-        {slot?.char}
-        {slot?.hasFakeCaret ? (
-          <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-            <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
-          </div>
-        ) : null}
-      </div>
-    );
-  },
-);
+
+const InputOTPSlot = React.forwardRef<InputOTPSlotElement, InputOTPSlotProps>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const slot = inputOTPContext.slots[index];
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "border-input relative flex size-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        slot?.isActive && "ring-ring z-10 ring-2",
+        className,
+      )}
+      {...props}
+    >
+      {slot?.char}
+      {slot?.hasFakeCaret ? (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      ) : null}
+    </div>
+  );
+});
+
 InputOTPSlot.displayName = "InputOTPSlot";
 
 /* -----------------------------------------------------------------------------
  * Component: InputOTPSeparator
  * -------------------------------------------------------------------------- */
 
+type InputOTPSeparatorElement = HTMLDivElement;
 type InputOTPSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
-const InputOTPSeparator = React.forwardRef<
-  HTMLDivElement,
-  InputOTPSeparatorProps
->(({ ...props }, ref) => (
+
+const InputOTPSeparator = React.forwardRef<InputOTPSeparatorElement, InputOTPSeparatorProps>(({ ...props }, ref) => (
   <div ref={ref} role="separator" {...props}>
     <DotFilledIcon />
   </div>
 ));
+
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 /* -----------------------------------------------------------------------------

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",
@@ -27,20 +33,13 @@ type InputVariantsProps = VariantProps<typeof inputVariants>;
  * Component: Input
  * -------------------------------------------------------------------------- */
 
-type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
-  InputVariantsProps;
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ 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";
 
 /* -----------------------------------------------------------------------------

package/src/kbd.tsx

@@ -6,25 +6,27 @@ import { cn } from "./utils";
  * Component: Kbd
  * -------------------------------------------------------------------------- */
 
+type KbdElement = HTMLElement;
+
 interface KbdProps extends React.HTMLAttributes<HTMLElement> {
   asChild?: boolean;
 }
-const Kbd = React.forwardRef<HTMLElement, KbdProps>(
-  ({ asChild, className, ...props }, ref) => {
-    const Comp = asChild ? Slot : "kbd";
-
-    return (
-      <Comp
-        ref={ref}
-        className={cn(
-          "bg-muted text-muted-foreground inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-xs font-medium",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
+
+const Kbd = React.forwardRef<KbdElement, KbdProps>(({ asChild, className, ...props }, ref) => {
+  const Component = asChild ? Slot : "kbd";
+
+  return (
+    <Component
+      ref={ref}
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-xs font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
 Kbd.displayName = "Kbd";
 
 /* -----------------------------------------------------------------------------

package/src/label.tsx

@@ -7,11 +7,10 @@ import { cn } from "./utils";
  * Component: Label
  * -------------------------------------------------------------------------- */
 
-type LabelProps = LabelPrimitive.LabelProps;
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  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(
@@ -21,6 +20,7 @@ const Label = React.forwardRef<
     {...props}
   />
 ));
+
 Label.displayName = LabelPrimitive.Root.displayName;
 
 /* -----------------------------------------------------------------------------