@hexclave/ui 1.0.3 → 1.0.6

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,245 @@
+"use client";
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
+import { forwardRefIfNeeded } from "@hexclave/shared/dist/utils/react";
+import React from "react";
+
+import { useAsyncCallback } from "@hexclave/shared/dist/hooks/use-async-callback";
+import { throwErr } from "@hexclave/shared/dist/utils/errors";
+import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { cn } from "../../lib/utils";
+import { Spinner } from "./spinner";
+
+const DropdownMenuContext = React.createContext<{
+  open: boolean,
+  setOpen: (open: boolean) => void,
+} | undefined>(undefined);
+
+const DropdownMenu = forwardRefIfNeeded<
+  never,
+  DropdownMenuPrimitive.DropdownMenuProps
+>(({ ...props }, ref) => {
+  const [open, setOpen] = React.useState(!!props.open);
+
+  return (
+    <DropdownMenuContext.Provider value={{
+      open,
+      setOpen: (o) => {
+        props.onOpenChange?.(o);
+        setOpen(o);
+      }
+    }}>
+      <DropdownMenuPrimitive.Root
+        {...props}
+        open={props.open ?? open}
+        onOpenChange={o => {
+          props.onOpenChange?.(o);
+          setOpen(o);
+        }}
+      />
+    </DropdownMenuContext.Provider>
+  );
+});
+DropdownMenu.displayName = DropdownMenuPrimitive.Root.displayName;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = forwardRefIfNeeded<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean,
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "stack-scope flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = forwardRefIfNeeded<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "stack-scope z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = forwardRefIfNeeded<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "stack-scope z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = forwardRefIfNeeded<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, "onClick"> & {
+    inset?: boolean,
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void | Promise<void>,
+  }
+>(({ className, inset, ...props }, ref) => {
+  const { setOpen } = React.useContext(DropdownMenuContext) ?? throwErr("No DropdownMenuContext found");
+  const [handleClick, isLoading] = useAsyncCallback(async (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    await props.onClick?.(e);
+    setOpen(false);
+  }, [props.onClick]);
+
+  return <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "stack-scope relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+    disabled={isLoading || props.disabled}
+    onClick={props.onClick ? (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      runAsynchronouslyWithAlert(handleClick(e));
+    } : undefined}
+  >
+    <div style={{ visibility: isLoading ? "visible" : "hidden", position: "absolute", inset: 0, display: "flex", justifyContent: "center", alignItems: "center" }}>
+      <Spinner />
+    </div>
+    <div style={{ visibility: isLoading ? "hidden" : "visible" }}>
+      {props.children}
+    </div>
+  </DropdownMenuPrimitive.Item>;
+});
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = forwardRefIfNeeded<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = forwardRefIfNeeded<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = forwardRefIfNeeded<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean,
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = forwardRefIfNeeded<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("stack-scope ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator,
+  DropdownMenuShortcut, DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger, DropdownMenuTrigger
+};

package/src/components/ui/form.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import React from "react";
+import { forwardRefIfNeeded } from "@hexclave/shared/dist/utils/react";
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form";
+
+import { HexclaveAssertionError } from "@hexclave/shared/dist/utils/errors";
+import { cn } from "../../lib/utils";
+import { SpanLabel } from "./label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName,
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+    ...props
+  }: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  if (!fieldContext) {
+    throw new HexclaveAssertionError("useFormField should be used within <FormField>");
+  }
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  const { id } = itemContext;
+  const formItemId = React.useId();
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${formItemId}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string,
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+);
+
+const FormItem = forwardRefIfNeeded<
+  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>
+  );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = forwardRefIfNeeded<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error } = useFormField();
+
+  return (
+    <SpanLabel
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = forwardRefIfNeeded<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = forwardRefIfNeeded<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = forwardRefIfNeeded<
+  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-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  Form, FormControl,
+  FormDescription, FormField, FormItem,
+  FormLabel, FormMessage, useFormField
+};

package/src/components/ui/hover-card.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import React from "react";
+import { forwardRefIfNeeded } from "@hexclave/shared/dist/utils/react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "../../lib/utils";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = forwardRefIfNeeded<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "stack-scope z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

package/src/components/ui/inline-code.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { cn } from "../../lib/utils";
+import React from "react";
+import { forwardRefIfNeeded } from "@hexclave/shared/dist/utils/react";
+import { hasClickableParent } from "@hexclave/shared/dist/utils/dom";
+import { getNodeText } from "@hexclave/shared/dist/utils/react";
+import { runAsynchronously } from "@hexclave/shared/dist/utils/promises";
+import { useToast } from "./use-toast";
+
+const InlineCode = forwardRefIfNeeded<
+  React.ElementRef<"code">,
+  React.ComponentPropsWithoutRef<"code">
+>((props, ref) => {
+  const { toast }  = useToast();
+
+  return <code
+    ref={ref}
+    {...props}
+    className={cn("stack-scope bg-zinc-200 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 rounded-sm px-1 cursor-pointer", props.className)}
+    onClick={(e: React.MouseEvent<HTMLElement>) => {
+      props.onClick?.(e);
+      if (!hasClickableParent(e.currentTarget)) {
+        e.stopPropagation();
+        e.preventDefault();
+        runAsynchronously(async () => {
+          try {
+            await navigator.clipboard.writeText(getNodeText(props.children));
+            toast({ description: 'Copied to clipboard!', variant: 'success' });
+          } catch (e) {
+            toast({ description: 'Failed to copy to clipboard', variant: 'destructive' });
+          }
+        });
+      }
+    }}
+  />;
+});
+InlineCode.displayName = "Code";
+
+export { InlineCode };

package/src/components/ui/input-otp.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import React from "react";
+import { forwardRefIfNeeded } from "@hexclave/shared/dist/utils/react";
+import { DashIcon } from "@radix-ui/react-icons";
+import { OTPInput, OTPInputContext } from "input-otp";
+
+import { cn } from "../../lib/utils";
+
+const InputOTP: React.FC<React.ComponentPropsWithoutRef<typeof OTPInput>> = forwardRefIfNeeded<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "stack-scope flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+));
+InputOTP.displayName = "InputOTP";
+
+const InputOTPGroup = forwardRefIfNeeded<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center gap-1", className)} {...props} />
+));
+InputOTPGroup.displayName = "InputOTPGroup";
+
+const InputOTPSlot = forwardRefIfNeeded<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number, size?: 'default' | 'lg' }
+>(({ index, className, size = 'default', ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-9 w-9 items-center justify-center border border-input text-sm rounded-md",
+        size === 'lg' ? 'h-10 w-10 text-lg font-medium' : '',
+        isActive && "z-10 ring-1 ring-ring",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+
+const InputOTPSeparator = forwardRefIfNeeded<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <DashIcon />
+  </div>
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/src/components/ui/input.tsx

@@ -0,0 +1,68 @@
+import { forwardRefIfNeeded } from "@hexclave/shared/dist/utils/react";
+import React from "react";
+
+import { cn } from "../../lib/utils";
+
+export type InputProps = {
+  prefixItem?: React.ReactNode,
+} & React.InputHTMLAttributes<HTMLInputElement>
+
+export const Input = forwardRefIfNeeded<HTMLInputElement, InputProps>(
+  ({ className, type, prefixItem, ...props }, ref) => {
+    const baseClasses =  "stack-scope flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+
+    if (prefixItem) {
+      return (
+        <div className="flex flex-row items-center backdrop-blur-md bg-white/20 dark:bg-black/20 flex-1">
+          <div className={'flex self-stretch justify-center items-center text-muted-foreground pl-3 select-none bg-muted/70 pr-3 border-r border-input rounded-l-md'}>
+            {prefixItem}
+          </div>
+          <input
+            type={type}
+            className={cn(baseClasses, 'rounded-l-none', className)}
+            ref={ref}
+            {...props}
+          />
+        </div>
+      );
+    } else {
+      return (
+        <div className="flex flex-row items-center backdrop-blur-md bg-white/20 dark:bg-black/20 flex-1">
+          <input
+            type={type}
+            className={cn(baseClasses, className)}
+            ref={ref}
+            {...props}
+          />
+        </div>
+      );
+    }
+  }
+);
+Input.displayName = "Input";
+
+
+export type DelayedInputProps = {
+  delay?: number,
+} & InputProps
+
+export const DelayedInput = forwardRefIfNeeded<HTMLInputElement, DelayedInputProps>(
+  ({ delay = 500, defaultValue, ...props }, ref) => {
+    const [value, setValue] = React.useState(defaultValue ?? "");
+
+    const timeout = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value);
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+      timeout.current = setTimeout(() => {
+        props.onChange?.(e);
+      }, delay);
+    };
+
+    return <Input ref={ref} {...props} value={value} onChange={onChange} />;
+  }
+);
+DelayedInput.displayName = "DelayedInput";

package/src/components/ui/label.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import React from "react";
+import { forwardRefIfNeeded } from "@hexclave/shared/dist/utils/react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const labelVariants = cva(
+  "stack-scope text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-gray-600 dark:text-gray-400",
+);
+
+const Label = forwardRefIfNeeded<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <label
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+const SpanLabel = forwardRefIfNeeded<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+SpanLabel.displayName = LabelPrimitive.Root.displayName;
+
+export { Label, SpanLabel };