@codefast/ui 0.0.50 → 0.0.53

package/src/react/hover-card.tsx

@@ -15,39 +15,32 @@ const HoverCard = HoverCardPrimitive.Root;
  * Component: HoverCardTrigger
  * -------------------------------------------------------------------------- */
 
-type HoverCardTriggerProps = React.ComponentPropsWithoutRef<
-  typeof HoverCardPrimitive.Trigger
->;
+type HoverCardTriggerProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger>;
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: HoverCardContent
  * -------------------------------------------------------------------------- */
 
-type HoverCardContentElement = React.ElementRef<
-  typeof HoverCardPrimitive.Content
->;
-type HoverCardContentProps = React.ComponentPropsWithoutRef<
-  typeof HoverCardPrimitive.Content
->;
+type HoverCardContentElement = React.ElementRef<typeof HoverCardPrimitive.Content>;
+type HoverCardContentProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>;
 
-const HoverCardContent = React.forwardRef<
-  HoverCardContentElement,
-  HoverCardContentProps
->(({ className, align = 'center', sideOffset = 6, ...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 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 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-32 rounded-md border p-4 shadow-md',
-        className,
-      )}
-      {...props}
-    />
-  </HoverCardPrimitive.Portal>
-));
+const HoverCardContent = React.forwardRef<HoverCardContentElement, HoverCardContentProps>(
+  ({ className, align = 'center', sideOffset = 6, ...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 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 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-32 rounded-md border p-4 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  ),
+);
 
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
@@ -56,19 +49,10 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
  * -------------------------------------------------------------------------- */
 
 type HoverCardArrowElement = React.ElementRef<typeof HoverCardPrimitive.Arrow>;
-type HoverCardArrowProps = React.ComponentPropsWithoutRef<
-  typeof HoverCardPrimitive.Arrow
->;
+type HoverCardArrowProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Arrow>;
 
-const HoverCardArrow = React.forwardRef<
-  HoverCardArrowElement,
-  HoverCardArrowProps
->(({ className, ...props }, ref) => (
-  <HoverCardPrimitive.Arrow
-    ref={ref}
-    className={cn('fill-popover', className)}
-    {...props}
-  />
+const HoverCardArrow = React.forwardRef<HoverCardArrowElement, HoverCardArrowProps>(({ className, ...props }, ref) => (
+  <HoverCardPrimitive.Arrow ref={ref} className={cn('fill-popover', className)} {...props} />
 ));
 
 HoverCardArrow.displayName = HoverCardPrimitive.Arrow.displayName;

package/src/react/input-otp.tsx

@@ -22,10 +22,7 @@ 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,
-      )}
+      containerClassName={cn('flex items-center gap-2 has-[:disabled]:opacity-50', containerClassName)}
       className={cn('disabled:cursor-not-allowed', className)}
       {...props}
     />
@@ -41,10 +38,7 @@ InputOTP.displayName = 'InputOTP';
 type InputOTPGroupElement = HTMLDivElement;
 type InputOTPGroupProps = React.HTMLAttributes<HTMLDivElement>;
 
-const InputOTPGroup = React.forwardRef<
-  InputOTPGroupElement,
-  InputOTPGroupProps
->(({ className, ...props }, ref) => (
+const InputOTPGroup = React.forwardRef<InputOTPGroupElement, InputOTPGroupProps>(({ className, ...props }, ref) => (
   <div ref={ref} className={cn('flex items-center', className)} {...props} />
 ));
 
@@ -60,31 +54,29 @@ 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];
-
-    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 && 'z-10 outline outline-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 animate-duration-1000 h-4 w-px" />
-          </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 && 'z-10 outline outline-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 animate-duration-1000 h-4 w-px" />
+        </div>
+      ) : null}
+    </div>
+  );
+});
 
 InputOTPSlot.displayName = 'InputOTPSlot';
 
@@ -95,10 +87,7 @@ InputOTPSlot.displayName = 'InputOTPSlot';
 type InputOTPSeparatorElement = HTMLDivElement;
 type InputOTPSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
 
-const InputOTPSeparator = React.forwardRef<
-  InputOTPSeparatorElement,
-  InputOTPSeparatorProps
->(({ ...props }, ref) => (
+const InputOTPSeparator = React.forwardRef<InputOTPSeparatorElement, InputOTPSeparatorProps>(({ ...props }, ref) => (
   <div ref={ref} role="separator" {...props}>
     <DotFilledIcon />
   </div>

package/src/react/input.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type VariantProps } from 'cva';
 import { cva } from '../lib/utils';
+import type { VariantProps } from 'cva';
 
 /* -----------------------------------------------------------------------------
  * Variant: Input
@@ -28,21 +28,11 @@ type InputVariantsProps = VariantProps<typeof inputVariants>;
  * -------------------------------------------------------------------------- */
 
 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}
-      />
-    );
-  },
-);
+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/react/kbd.tsx

@@ -12,22 +12,20 @@ interface KbdProps extends React.HTMLAttributes<HTMLElement> {
   asChild?: boolean;
 }
 
-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}
-      />
-    );
-  },
-);
+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/react/label.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cn } from '../lib/utils';
@@ -10,18 +11,16 @@ import { cn } from '../lib/utils';
 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(
-        'text-sm font-medium leading-none peer-disabled:pointer-events-none peer-disabled:opacity-70',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
+const Label = React.forwardRef<LabelElement, LabelProps>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      'text-sm font-medium leading-none peer-disabled:pointer-events-none peer-disabled:opacity-70',
+      className,
+    )}
+    {...props}
+  />
+));
 
 Label.displayName = LabelPrimitive.Root.displayName;