@cntyclub/ui-react 0.1.0

package/src/components/ui/generic-empty.tsx

@@ -0,0 +1,142 @@
+import {
+  FileQuestionIcon,
+  ShieldAlertIcon,
+  ShieldXIcon,
+  TriangleAlertIcon,
+} from "lucide-react";
+import type React from "react";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "./empty";
+
+interface ErrorOrEmptyStateProps
+  extends Omit<React.ComponentProps<"div">, "title"> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  actions?: React.ReactNode;
+  media?: React.ReactNode;
+  mediaVariant?: "icon" | "default";
+  compact?: boolean;
+}
+
+function ErrorOrEmptyState({
+  title,
+  description,
+  actions,
+  className,
+  media,
+  mediaVariant = "default",
+  compact,
+  ...props
+}: ErrorOrEmptyStateProps) {
+  return (
+    <Empty {...props}>
+      <EmptyHeader>
+        {!compact && <EmptyMedia variant={mediaVariant}>{media}</EmptyMedia>}
+        <EmptyTitle>{title}</EmptyTitle>
+        <EmptyDescription>{description}</EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>{actions}</EmptyContent>
+    </Empty>
+  );
+}
+
+type ErrorTemplateProps = Omit<
+  ErrorOrEmptyStateProps,
+  "image" | "title" | "description"
+> & {
+  mediaClassName?: string;
+};
+
+function NotFoundErrorState({ mediaClassName, ...props }: ErrorTemplateProps) {
+  return (
+    <ErrorOrEmptyState
+      media={<FileQuestionIcon className={mediaClassName} />}
+      mediaVariant="icon"
+      title="Not found"
+      description="The requested resource was not found."
+      {...props}
+    />
+  );
+}
+
+function UnauthorizedErrorState({
+  mediaClassName,
+  ...props
+}: ErrorTemplateProps) {
+  return (
+    <ErrorOrEmptyState
+      media={<ShieldAlertIcon className={mediaClassName} />}
+      mediaVariant="icon"
+      title="Unauthorized"
+      description="You are not authorized to access this resource."
+      {...props}
+    />
+  );
+}
+
+function ForbiddenErrorState({ mediaClassName, ...props }: ErrorTemplateProps) {
+  return (
+    <ErrorOrEmptyState
+      media={<ShieldXIcon className={mediaClassName} />}
+      mediaVariant="icon"
+      title="Forbidden"
+      description="You are not allowed to access this resource."
+      {...props}
+    />
+  );
+}
+
+function InternalServerErrorState({
+  mediaClassName,
+  ...props
+}: ErrorTemplateProps) {
+  return (
+    <ErrorOrEmptyState
+      media={<ShieldXIcon className={mediaClassName} />}
+      mediaVariant="icon"
+      title="Internal server error"
+      description="An error occurred while processing your request."
+      {...props}
+    />
+  );
+}
+
+function OfflineErrorState({ mediaClassName, ...props }: ErrorTemplateProps) {
+  return (
+    <ErrorOrEmptyState
+      media={<ShieldXIcon className={mediaClassName} />}
+      mediaVariant="icon"
+      title="Offline"
+      description="Please check your internet connection and try again."
+      {...props}
+    />
+  );
+}
+
+function GeneralErrorState({ mediaClassName, ...props }: ErrorTemplateProps) {
+  return (
+    <ErrorOrEmptyState
+      media={<TriangleAlertIcon className={mediaClassName} />}
+      mediaVariant="icon"
+      title="Error"
+      description="An error occurred while processing your request."
+      {...props}
+    />
+  );
+}
+
+export {
+  ErrorOrEmptyState,
+  NotFoundErrorState,
+  UnauthorizedErrorState,
+  ForbiddenErrorState,
+  InternalServerErrorState,
+  OfflineErrorState,
+  GeneralErrorState,
+};

package/src/components/ui/group.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { Separator } from "./separator";
+import { cn } from "../../lib/utils/css";
+
+const groupVariants = cva(
+  "flex w-fit *:focus-visible:z-1 has-[>[data-slot=group]]:gap-2 *:has-focus-visible:z-1 dark:*:[[data-slot=button]:hover~[data-slot=separator]:not([data-slot]:hover~[data-slot=separator]~[data-slot=separator]),[data-slot][data-pressed]~[data-slot=separator]:not([data-slot][data-pressed]~[data-slot=separator]~[data-slot=separator])]:before:bg-input/64 dark:*:[[data-slot=separator]:has(~[data-slot=button]:hover):not(:has(~[data-slot=separator]~[data-slot]:hover)),[data-slot=separator]:has(~[data-slot][data-pressed]):not(:has(~[data-slot=separator]~[data-slot][data-pressed]))]:before:bg-input/64",
+  {
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+    variants: {
+      orientation: {
+        horizontal:
+          "*:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-start-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-end-[0.5px] *:pointer-coarse:after:min-w-auto *:data-slot:has-[~[data-slot]]:rounded-e-none *:data-slot:has-[~[data-slot]]:border-e-0 *:data-slot:has-[~[data-slot]]:before:rounded-e-none *:[[data-slot]~[data-slot]]:rounded-s-none *:[[data-slot]~[data-slot]]:border-s-0 *:[[data-slot]~[data-slot]]:before:rounded-s-none",
+        vertical:
+          "*:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-top-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-bottom-[0.5px] flex-col *:pointer-coarse:after:min-h-auto *:data-slot:has-[~[data-slot]]:rounded-b-none *:data-slot:has-[~[data-slot]]:border-b-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:hidden *:data-slot:has-[~[data-slot]]:before:rounded-b-none dark:*:last:before:hidden dark:*:first:before:block *:[[data-slot]~[data-slot]]:rounded-t-none *:[[data-slot]~[data-slot]]:border-t-0 *:[[data-slot]~[data-slot]]:before:rounded-t-none",
+      },
+    },
+  },
+);
+
+function Group({
+  className,
+  orientation,
+  children,
+  ...props
+}: {
+  className?: string;
+  orientation?: VariantProps<typeof groupVariants>["orientation"];
+  children: React.ReactNode;
+} & React.ComponentProps<"div">) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: Imported from library
+    <div
+      className={cn(groupVariants({ orientation }), className)}
+      data-orientation={orientation}
+      data-slot="group"
+      role="group"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+function GroupText({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn(
+      "relative inline-flex items-center whitespace-nowrap gap-2 rounded-lg border border-input bg-muted not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-muted-foreground text-base sm:text-sm shadow-xs/5 outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] dark:bg-input/64 dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 [&_svg]:-mx-0.5",
+      className,
+    ),
+    "data-slot": "group-text",
+  };
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps(defaultProps, props),
+    render,
+  });
+}
+
+function GroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: {
+  className?: string;
+} & React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      className={cn(
+        "[[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+input+&]:-translate-x-px pointer-events-none relative z-2 bg-input before:absolute before:inset-0 has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:translate-x-px has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:bg-ring dark:before:bg-input/32 [[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+&,[data-slot=number-field]:focus-within+input+&]:bg-ring",
+        className,
+      )}
+      orientation={orientation}
+      {...props}
+    />
+  );
+}
+
+export {
+  Group,
+  Group as ButtonGroup,
+  GroupText,
+  GroupText as ButtonGroupText,
+  GroupSeparator,
+  GroupSeparator as ButtonGroupSeparator,
+  groupVariants,
+};

package/src/components/ui/horizontal-scroll-fader.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import { Transition } from "@headlessui/react";
+import { Slot } from "@radix-ui/react-slot";
+import type React from "react";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import useResizeObserver from "use-resize-observer";
+import useCallbackRef from "../../lib/hooks/use-callback-ref";
+import { useHover } from "../../lib/hooks/use-hover";
+import { cn } from "../../lib/utils/css";
+import type { AsChildProps } from "../../types/helpers";
+
+interface HorizontalScrollFaderContextValue {
+  isLeftOverflowing: boolean;
+  isRightOverflowing: boolean;
+  containerRef: React.RefObject<HTMLElement | null>;
+  onScroll: () => void;
+}
+
+const HorizontalScrollFaderContext =
+  createContext<HorizontalScrollFaderContextValue>({
+    isLeftOverflowing: false,
+    isRightOverflowing: false,
+    containerRef: { current: null },
+    onScroll: () => {},
+  });
+
+function HorizontalScrollFaderInner(
+  { asChild, ...props }: AsChildProps<"div">,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const containerRef = useRef<HTMLElement>(null);
+
+  const [isLeftOverflowing, setIsLeftOverflowing] = useState(false);
+  const [isRightOverflowing, setIsRightOverflowing] = useState(false);
+
+  const onScroll = useCallbackRef(() => {
+    if (!containerRef.current) return;
+
+    const { scrollLeft, scrollWidth, clientWidth } = containerRef.current;
+    setIsLeftOverflowing(scrollLeft > 0);
+    setIsRightOverflowing(scrollLeft + clientWidth < scrollWidth);
+  });
+
+  const contextValue = useMemo(
+    () => ({ isLeftOverflowing, isRightOverflowing, containerRef, onScroll }),
+    [isLeftOverflowing, isRightOverflowing, onScroll],
+  );
+
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <HorizontalScrollFaderContext.Provider value={contextValue}>
+      <Slot className="relative" onScroll={onScroll}>
+        <Comp ref={ref} {...props} />
+      </Slot>
+    </HorizontalScrollFaderContext.Provider>
+  );
+}
+
+const HorizontalScrollFader = forwardRef(HorizontalScrollFaderInner);
+
+function HorizontalScrollFaderContentInner(
+  { asChild, ...props }: AsChildProps<"div">,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const Comp = asChild ? Slot : "div";
+  const { isLeftOverflowing, isRightOverflowing, containerRef, onScroll } =
+    useContext(HorizontalScrollFaderContext);
+
+  useResizeObserver({
+    ref: containerRef as React.RefObject<HTMLElement>,
+    onResize: onScroll,
+  });
+
+  // A single horizontal mask gradient fades each edge over its fader size.
+  // When an edge isn't overflowing its fader size is 0, so no fade shows.
+  // Inline styles (with the -webkit- prefix for Safari) keep this independent
+  // of Tailwind mask-utility emission.
+  const maskImage = `linear-gradient(to right, transparent 0, #000 var(--left-fader-size), #000 calc(100% - var(--right-fader-size)), transparent 100%)`;
+
+  return (
+    <Slot
+      onScroll={onScroll}
+      className={cn(
+        "overflow-auto [transition:--left-fader-size_150ms,--right-fader-size_150ms] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      )}
+      style={{
+        "--left-fader-size": isLeftOverflowing ? "3rem" : "0rem",
+        "--right-fader-size": isRightOverflowing ? "3rem" : "0rem",
+        maskImage,
+        WebkitMaskImage: maskImage,
+      }}
+      ref={containerRef}
+    >
+      <Comp ref={ref} {...props} />
+    </Slot>
+  );
+}
+
+const HorizontalScrollFaderContent = forwardRef(
+  HorizontalScrollFaderContentInner,
+);
+
+function HorizontalScrollFaderLeftScrollerInner(
+  { asChild, ...props }: AsChildProps<"button">,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const Comp = asChild ? Slot : "button";
+  const { containerRef, isLeftOverflowing } = useContext(
+    HorizontalScrollFaderContext,
+  );
+  const onClick = useCallbackRef(() => {
+    if (!containerRef.current) return;
+    containerRef.current.scrollBy({
+      left: -containerRef.current.clientWidth,
+      behavior: "smooth",
+    });
+  });
+
+  const [hoverRef, hovered] = useHover<HTMLElement>({
+    mounted: isLeftOverflowing,
+  });
+  useEffect(() => {
+    if (!hovered || !isLeftOverflowing) return;
+    let stopped = false;
+    let animationFrameId: number;
+    let startTime: DOMHighResTimeStamp;
+
+    const animate = (timestamp: DOMHighResTimeStamp) => {
+      if (stopped) return;
+      if (!startTime) startTime = timestamp;
+      const elapsed = Math.min(timestamp - startTime, 2000);
+      containerRef.current?.scrollBy({
+        left: -Math.log2(elapsed + 1),
+      });
+      animationFrameId = requestAnimationFrame(animate);
+    };
+    animationFrameId = requestAnimationFrame(animate);
+
+    return () => {
+      stopped = true;
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [hovered, isLeftOverflowing, containerRef.current?.scrollBy]);
+
+  return (
+    <Transition show={isLeftOverflowing}>
+      <Slot onClick={onClick} ref={hoverRef}>
+        <Comp {...(asChild ? {} : { type: "button" })} ref={ref} {...props} />
+      </Slot>
+    </Transition>
+  );
+}
+
+const HorizontalScrollFaderLeftScroller = forwardRef(
+  HorizontalScrollFaderLeftScrollerInner,
+);
+
+function HorizontalScrollFaderRightScrollerInner(
+  { asChild, ...props }: AsChildProps<"button">,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const Comp = asChild ? Slot : "button";
+  const { containerRef, isRightOverflowing } = useContext(
+    HorizontalScrollFaderContext,
+  );
+  const onClick = useCallbackRef(() => {
+    if (!containerRef.current) return;
+    containerRef.current.scrollBy({
+      left: containerRef.current.clientWidth,
+      behavior: "smooth",
+    });
+  });
+
+  const [hoverRef, hovered] = useHover({
+    mounted: isRightOverflowing,
+  });
+  useEffect(() => {
+    if (!hovered || !isRightOverflowing) return;
+    let stopped = false;
+    let animationFrameId: number;
+    let startTime: DOMHighResTimeStamp;
+
+    const animate = (timestamp: DOMHighResTimeStamp) => {
+      if (stopped) return;
+      if (!startTime) startTime = timestamp;
+      const elapsed = Math.min(timestamp - startTime, 2000);
+      containerRef.current?.scrollBy({
+        left: Math.log2(elapsed + 1),
+      });
+      animationFrameId = requestAnimationFrame(animate);
+    };
+    animationFrameId = requestAnimationFrame(animate);
+
+    return () => {
+      stopped = true;
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [hovered, isRightOverflowing, containerRef.current?.scrollBy]);
+
+  return (
+    <Transition show={isRightOverflowing}>
+      <Slot onClick={onClick} ref={hoverRef}>
+        <Comp {...(asChild ? {} : { type: "button" })} ref={ref} {...props} />
+      </Slot>
+    </Transition>
+  );
+}
+
+const HorizontalScrollFaderRightScroller = forwardRef(
+  HorizontalScrollFaderRightScrollerInner,
+);
+
+export {
+  HorizontalScrollFader,
+  HorizontalScrollFaderContent,
+  HorizontalScrollFaderLeftScroller,
+  HorizontalScrollFaderRightScroller,
+};

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

@@ -0,0 +1,102 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { Input, type InputProps } from "./input";
+import { Textarea, type TextareaProps } from "./textarea";
+import { cn } from "../../lib/utils/css";
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: Imported from library
+    <div
+      className={cn(
+        "relative inline-flex w-full min-w-0 items-center rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/6%)] has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)]",
+        className,
+      )}
+      data-slot="input-group"
+      role="group"
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "[&_svg]:-mx-0.5 flex h-auto cursor-text select-none items-center justify-center gap-2 leading-none [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80",
+  {
+    defaultVariants: {
+      align: "inline-start",
+    },
+    variants: {
+      align: {
+        "block-end":
+          "order-last w-full justify-start px-[calc(--spacing(3)-1px)] pb-[calc(--spacing(3)-1px)] [.border-t]:pt-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]",
+        "block-start":
+          "order-first w-full justify-start px-[calc(--spacing(3)-1px)] pt-[calc(--spacing(3)-1px)] [.border-b]:pb-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]",
+        "inline-end":
+          "has-[>:last-child[data-slot=badge]]:-me-1.5 has-[>button]:-me-2 order-last pe-[calc(--spacing(3)-1px)] has-[>kbd:last-child]:me-[-0.35rem] [[data-size=sm]+&]:pe-[calc(--spacing(2.5)-1px)]",
+        "inline-start":
+          "has-[>:last-child[data-slot=badge]]:-ms-1.5 has-[>button]:-ms-2 order-first ps-[calc(--spacing(3)-1px)] has-[>kbd:last-child]:ms-[-0.35rem] [[data-size=sm]+&]:ps-[calc(--spacing(2.5)-1px)]",
+      },
+    },
+  },
+);
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: Imported from library
+    <div
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      data-align={align}
+      data-slot="input-group-addon"
+      onMouseDown={(e) => {
+        const target = e.target as HTMLElement;
+        const isInteractive = target.closest(
+          "button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']",
+        );
+        if (isInteractive) return;
+        e.preventDefault();
+        const parent = e.currentTarget.parentElement;
+        const input = parent?.querySelector<
+          HTMLInputElement | HTMLTextAreaElement
+        >("input, textarea");
+        if (input && !parent?.querySelector("input:focus, textarea:focus")) {
+          input.focus();
+        }
+      }}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "[&_svg]:-mx-0.5 line-clamp-1 flex items-center gap-2 text-muted-foreground leading-none in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupInput({ className, ...props }: InputProps) {
+  return <Input className={className} unstyled {...props} />;
+}
+
+function InputGroupTextarea({ className, ...props }: TextareaProps) {
+  return <Textarea className={className} unstyled {...props} />;
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+};

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

@@ -0,0 +1,96 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { OTPInput, OTPInputContext, REGEXP_ONLY_DIGITS } from "input-otp";
+import { MinusIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+type InputOTPProps = React.ComponentProps<typeof OTPInput>;
+
+function InputOTP({
+  className,
+  containerClassName,
+  // Digits-only by default. Override `pattern`/`inputMode` to allow letters.
+  inputMode = "numeric",
+  pattern = REGEXP_ONLY_DIGITS,
+  ...props
+}: InputOTPProps) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "flex items-center gap-2 has-disabled:opacity-50",
+        containerClassName,
+      )}
+      className={cn("disabled:cursor-not-allowed", className)}
+      inputMode={inputMode}
+      pattern={pattern}
+      {...props}
+    />
+  );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn("flex items-center", className)}
+      {...props}
+    />
+  );
+}
+
+const inputOTPSlotVariants = cva(
+  "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex items-center justify-center border-y border-r shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+  {
+    variants: {
+      size: {
+        sm: "h-8 w-8 text-xs",
+        default: "h-9 w-9 text-sm",
+        lg: "h-11 w-11 text-base",
+      },
+    },
+    defaultVariants: { size: "default" },
+  },
+);
+
+function InputOTPSlot({
+  index,
+  className,
+  size,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number;
+} & VariantProps<typeof inputOTPSlotVariants>) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(inputOTPSlotVariants({ size }), className)}
+      {...props}
+    >
+      {char}
+      {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>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    // biome-ignore lint/a11y/useFocusableInteractive lint/a11y/useSemanticElements lint/a11y/useAriaPropsForRole: Installed from shadcn
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };