@momentumworld/ui-react 0.17.0

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 };

package/src/components/ui/input.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+type InputProps = Omit<
+  InputPrimitive.Props & React.RefAttributes<HTMLInputElement>,
+  "size"
+> & {
+  size?: "sm" | "default" | "lg" | number;
+  unstyled?: boolean;
+  nativeInput?: boolean;
+};
+
+function Input({
+  className,
+  size = "default",
+  unstyled = false,
+  nativeInput = false,
+  ...props
+}: InputProps) {
+  const inputClassName = cn(
+    "h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5",
+    size === "sm" &&
+      "h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5",
+    size === "lg" && "h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5",
+    props.type === "search" &&
+      "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none",
+    props.type === "file" &&
+      "text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm",
+  );
+
+  return (
+    <span
+      className={
+        cn(
+          !unstyled &&
+            "relative inline-flex w-full 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-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/6%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+          className,
+        ) || undefined
+      }
+      data-size={size}
+      data-slot="input-control"
+    >
+      {nativeInput ? (
+        <input
+          className={inputClassName}
+          data-slot="input"
+          size={typeof size === "number" ? size : undefined}
+          {...props}
+        />
+      ) : (
+        <InputPrimitive
+          className={inputClassName}
+          data-slot="input"
+          size={typeof size === "number" ? size : undefined}
+          {...props}
+        />
+      )}
+    </span>
+  );
+}
+
+export { Input, type InputProps };

package/src/components/ui/item.tsx

@@ -0,0 +1,198 @@
+"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 { cn } from "../../lib/utils/css";
+import { Separator } from "./separator";
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("group/item-group flex flex-col", className)}
+      data-slot="item-group"
+      role="list"
+      {...props}
+    />
+  );
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      className={cn("my-0", className)}
+      data-slot="item-separator"
+      orientation="horizontal"
+      {...props}
+    />
+  );
+}
+
+const itemVariants = cva(
+  "group/item flex flex-wrap items-center rounded-lg border border-transparent text-base outline-none transition-colors duration-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background sm:text-sm [a]:transition-colors [a]:hover:bg-accent/50",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default: "gap-4 p-4",
+        sm: "gap-2.5 px-4 py-3",
+      },
+      variant: {
+        default: "bg-transparent",
+        muted: "bg-muted/50",
+        outline:
+          "border-border bg-card not-dark:bg-clip-padding shadow-xs/5 dark:bg-input/32",
+      },
+    },
+  },
+);
+
+interface ItemProps extends useRender.ComponentProps<"div"> {
+  variant?: VariantProps<typeof itemVariants>["variant"];
+  size?: VariantProps<typeof itemVariants>["size"];
+}
+
+function Item({ className, variant, size, render, ...props }: ItemProps) {
+  const defaultProps = {
+    className: cn(itemVariants({ className, size, variant })),
+    "data-size": size ?? "default",
+    "data-slot": "item",
+    "data-variant": variant ?? "default",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
+  {
+    defaultVariants: {
+      variant: "default",
+    },
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+  },
+);
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      className={cn(itemMediaVariants({ className, variant }))}
+      data-slot="item-media"
+      data-variant={variant}
+      {...props}
+    />
+  );
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
+        className,
+      )}
+      data-slot="item-content"
+      {...props}
+    />
+  );
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex w-fit items-center gap-2 font-medium leading-snug",
+        className,
+      )}
+      data-slot="item-title"
+      {...props}
+    />
+  );
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      className={cn(
+        "line-clamp-2 text-balance font-normal text-muted-foreground text-sm leading-normal sm:text-xs",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      data-slot="item-description"
+      {...props}
+    />
+  );
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex items-center gap-2", className)}
+      data-slot="item-actions"
+      {...props}
+    />
+  );
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className,
+      )}
+      data-slot="item-header"
+      {...props}
+    />
+  );
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className,
+      )}
+      data-slot="item-footer"
+      {...props}
+    />
+  );
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+  itemVariants,
+};