@arolariu/components 0.4.2 → 1.0.0

package/src/components/ui/breadcrumb.tsx

@@ -1,94 +1,276 @@
-"use client";
+/* eslint-disable jsx-a11y/label-has-associated-control */
 
-import {Slot} from "@radix-ui/react-slot";
 import {ChevronRight, MoreHorizontal} from "lucide-react";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./breadcrumb.module.css";
 
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode;
-  }
->(({...props}, ref) => (
-  <nav
-    ref={ref}
-    aria-label='breadcrumb'
-    {...props}
-  />
-));
-Breadcrumb.displayName = "Breadcrumb";
+/**
+ * Props for the {@link Breadcrumb} component.
+ */
+export interface BreadcrumbProps extends React.ComponentPropsWithoutRef<"nav"> {
+  /** Reserved separator content prop for custom breadcrumb compositions. @default undefined */
+  separator?: React.ReactNode;
+}
 
-const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(({className, ...props}, ref) => (
-  <ol
-    ref={ref}
-    className={cn("flex flex-wrap items-center gap-1.5 text-sm break-words text-neutral-500 sm:gap-2.5 dark:text-neutral-400", className)}
-    {...props}
-  />
-));
-BreadcrumbList.displayName = "BreadcrumbList";
+/**
+ * Props for the {@link BreadcrumbList} component.
+ */
+export type BreadcrumbListProps = React.ComponentPropsWithoutRef<"ol">;
 
-const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(({className, ...props}, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
-));
-BreadcrumbItem.displayName = "BreadcrumbItem";
+/**
+ * Props for the {@link BreadcrumbItem} component.
+ */
+export type BreadcrumbItemProps = React.ComponentPropsWithoutRef<"li">;
+
+/**
+ * Props for the {@link BreadcrumbLink} component.
+ */
+export interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<"a"> {
+  /** Enables rendering an existing anchor-compatible child element. @default false */
+  asChild?: boolean;
+}
+
+/**
+ * Props for the {@link BreadcrumbPage} component.
+ */
+export type BreadcrumbPageProps = React.ComponentPropsWithoutRef<"span">;
 
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean;
-  }
->(({asChild, className, ...props}, ref) => {
-  const Comp = asChild ? Slot : "a";
+/**
+ * Props for the {@link BreadcrumbSeparator} component.
+ */
+export type BreadcrumbSeparatorProps = React.ComponentPropsWithoutRef<"li">;
 
-  return (
-    <Comp
+/**
+ * Props for the {@link BreadcrumbEllipsis} component.
+ */
+export type BreadcrumbEllipsisProps = React.ComponentPropsWithoutRef<"span">;
+
+/**
+ * Provides semantic breadcrumb navigation for hierarchical page structures.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<nav>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href='/'>Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ * ```
+ *
+ * @see {@link BreadcrumbProps} for available props
+ */
+const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(
+  ({className, separator: _separator, ...props}: Readonly<BreadcrumbProps>, ref): React.JSX.Element => (
+    <nav
       ref={ref}
-      className={cn("transition-colors hover:text-neutral-950 dark:hover:text-neutral-50", className)}
+      aria-label='breadcrumb'
+      className={cn(styles.root, className)}
       {...props}
     />
-  );
-});
-BreadcrumbLink.displayName = "BreadcrumbLink";
+  ),
+);
 
-const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(({className, ...props}, ref) => (
-  <span
-    ref={ref}
-    role='link'
-    aria-disabled='true'
-    aria-current='page'
-    className={cn("font-normal text-neutral-950 dark:text-neutral-50", className)}
-    {...props}
-  />
-));
-BreadcrumbPage.displayName = "BreadcrumbPage";
+/**
+ * Groups breadcrumb items inside an ordered list.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders an `<ol>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbList>
+ *   <BreadcrumbItem />
+ * </BreadcrumbList>
+ * ```
+ *
+ * @see {@link BreadcrumbListProps} for available props
+ */
+const BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(
+  ({className, ...props}: Readonly<BreadcrumbListProps>, ref): React.JSX.Element => (
+    <ol
+      ref={ref}
+      className={cn(styles.list, className)}
+      {...props}
+    />
+  ),
+);
 
-const BreadcrumbSeparator = ({children, className, ...props}: React.ComponentProps<"li">) => (
-  <li
-    role='presentation'
-    aria-hidden='true'
-    className={cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
-    {...props}>
-    {children ?? <ChevronRight />}
-  </li>
+/**
+ * Wraps a single breadcrumb node within the list.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders an `<li>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbItem>
+ *   <BreadcrumbLink href='/docs'>Docs</BreadcrumbLink>
+ * </BreadcrumbItem>
+ * ```
+ *
+ * @see {@link BreadcrumbItemProps} for available props
+ */
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(
+  ({className, ...props}: Readonly<BreadcrumbItemProps>, ref): React.JSX.Element => (
+    <li
+      ref={ref}
+      className={cn(styles.item, className)}
+      {...props}
+    />
+  ),
 );
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 
-const BreadcrumbEllipsis = ({className, ...props}: React.ComponentProps<"span">) => (
-  <span
-    role='presentation'
-    aria-hidden='true'
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}>
-    <MoreHorizontal className='h-4 w-4' />
-    <span className='sr-only'>More</span>
-  </span>
+/**
+ * Renders a navigable breadcrumb link with optional child element composition.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders an `<a>` element by default
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbLink href='/settings'>Settings</BreadcrumbLink>
+ * ```
+ *
+ * @see {@link BreadcrumbLinkProps} for available props
+ */
+const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
+  ({asChild = false, className, children, ...props}: Readonly<BreadcrumbLinkProps>, ref): React.JSX.Element => {
+    const mergedClassName = cn(styles.link, className);
+
+    if (asChild && React.isValidElement(children)) {
+      const child = children as React.ReactElement<React.ComponentPropsWithoutRef<"a"> & {ref?: React.Ref<HTMLAnchorElement>}>;
+
+      // eslint-disable-next-line react-x/no-clone-element -- replaces Radix Slot while preserving asChild prop merging
+      return React.cloneElement(child, {
+        ...props,
+        ref,
+        className: cn(mergedClassName, child.props.className),
+      });
+    }
+
+    return (
+      <a
+        ref={ref}
+        className={mergedClassName}
+        {...props}>
+        {children}
+      </a>
+    );
+  },
+);
+
+/**
+ * Marks the current page within the breadcrumb trail.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<span>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbPage>Current page</BreadcrumbPage>
+ * ```
+ *
+ * @see {@link BreadcrumbPageProps} for available props
+ */
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, BreadcrumbPageProps>(
+  ({className, ...props}: Readonly<BreadcrumbPageProps>, ref): React.JSX.Element => (
+    <span
+      ref={ref}
+      role='link'
+      aria-current='page'
+      aria-disabled='true'
+      className={cn(styles.page, className)}
+      {...props}
+    />
+  ),
 );
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+/**
+ * Displays visual separation between breadcrumb items.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders an `<li>` element
+ * - Defaults to a `ChevronRight` separator icon when `children` is not provided
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbSeparator />
+ * ```
+ *
+ * @example Custom separator
+ * ```tsx
+ * <BreadcrumbSeparator>/</BreadcrumbSeparator>
+ * ```
+ *
+ * @see {@link BreadcrumbSeparatorProps} for available props
+ */
+const BreadcrumbSeparator = React.forwardRef<HTMLLIElement, BreadcrumbSeparatorProps>(
+  ({children, className, ...props}: Readonly<BreadcrumbSeparatorProps>, ref): React.JSX.Element => (
+    <li
+      ref={ref}
+      role='presentation'
+      aria-hidden='true'
+      className={cn(styles.separator, className)}
+      {...props}>
+      {children ?? <ChevronRight />}
+    </li>
+  ),
+);
+
+/**
+ * Indicates collapsed breadcrumb items in truncated navigation trails.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<span>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbEllipsis />
+ * ```
+ *
+ * @see {@link BreadcrumbEllipsisProps} for available props
+ */
+const BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, BreadcrumbEllipsisProps>(
+  ({className, ...props}: Readonly<BreadcrumbEllipsisProps>, ref): React.JSX.Element => (
+    <span
+      ref={ref}
+      role='presentation'
+      aria-hidden='true'
+      className={cn(styles.ellipsis, className)}
+      {...props}>
+      <MoreHorizontal />
+      <span className={styles.srOnly}>More</span>
+    </span>
+  ),
+);
+
+Breadcrumb.displayName = "Breadcrumb";
+BreadcrumbList.displayName = "BreadcrumbList";
+BreadcrumbItem.displayName = "BreadcrumbItem";
+BreadcrumbLink.displayName = "BreadcrumbLink";
+BreadcrumbPage.displayName = "BreadcrumbPage";
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
 
 export {Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator};

package/src/components/ui/bubble-background.module.css

@@ -0,0 +1,97 @@
+.root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: linear-gradient(135deg, #2e1065 0%, #1d4ed8 100%);
+}
+
+.hiddenSvg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+}
+
+.filterLayer {
+  position: absolute;
+  inset: 0;
+  filter: url(#goo) blur(40px);
+}
+
+.bubble {
+  position: absolute;
+  border-radius: 9999px;
+  mix-blend-mode: hard-light;
+}
+
+.bubbleFirst,
+.bubbleFourth {
+  top: 10%;
+  left: 10%;
+  width: 80%;
+  height: 80%;
+}
+
+.bubbleFirst {
+  background: radial-gradient(circle at center, rgb(var(--ac-bubble-first-color) / 0.8) 0%, rgb(var(--ac-bubble-first-color) / 0) 50%);
+}
+
+.rotator {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rotatorSecond {
+  transform-origin: calc(50% - 400px) 50%;
+}
+
+.bubbleSecond {
+  top: 10%;
+  left: 10%;
+  width: 80%;
+  height: 80%;
+  background: radial-gradient(circle at center, rgb(var(--ac-bubble-second-color) / 0.8) 0%, rgb(var(--ac-bubble-second-color) / 0) 50%);
+}
+
+.rotatorThird {
+  transform-origin: calc(50% + 400px) 50%;
+}
+
+.bubbleThird {
+  position: absolute;
+  top: calc(50% + 200px);
+  left: calc(50% - 500px);
+  width: 80%;
+  height: 80%;
+  background: radial-gradient(circle at center, rgb(var(--ac-bubble-third-color) / 0.8) 0%, rgb(var(--ac-bubble-third-color) / 0) 50%);
+}
+
+.bubbleFourth {
+  opacity: 0.7;
+  background: radial-gradient(circle at center, rgb(var(--ac-bubble-fourth-color) / 0.8) 0%, rgb(var(--ac-bubble-fourth-color) / 0) 50%);
+}
+
+.rotatorFifth {
+  transform-origin: calc(50% - 800px) calc(50% + 200px);
+}
+
+.bubbleFifth {
+  position: absolute;
+  top: calc(50% - 80%);
+  left: calc(50% - 80%);
+  width: 160%;
+  height: 160%;
+  background: radial-gradient(circle at center, rgb(var(--ac-bubble-fifth-color) / 0.8) 0%, rgb(var(--ac-bubble-fifth-color) / 0) 50%);
+}
+
+.bubbleInteractive {
+  width: 100%;
+  height: 100%;
+  opacity: 0.7;
+  background: radial-gradient(circle at center, rgb(var(--ac-bubble-sixth-color) / 0.8) 0%, rgb(var(--ac-bubble-sixth-color) / 0) 50%);
+}

package/src/components/ui/bubble-background.tsx

@@ -1,23 +1,62 @@
 "use client";
 
-import {motion, type SpringOptions, Transition, useMotionValue, useSpring} from "motion/react";
+import {motion, type SpringOptions, type Transition, useMotionValue, useSpring} from "motion/react";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./bubble-background.module.css";
+
+/** Configurable bubble color channels consumed by the CSS module. */
+export interface BubbleBackgroundColors {
+  /** Primary bubble RGB triplet. @default "18,113,255" */
+  first: string;
+  /** Secondary bubble RGB triplet. @default "221,74,255" */
+  second: string;
+  /** Tertiary bubble RGB triplet. @default "0,220,255" */
+  third: string;
+  /** Fourth bubble RGB triplet. @default "200,50,50" */
+  fourth: string;
+  /** Fifth bubble RGB triplet. @default "180,180,50" */
+  fifth: string;
+  /** Sixth bubble RGB triplet used by the interactive layer. @default "140,100,255" */
+  sixth: string;
+}
 
-interface BubbleBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
+/** Props accepted by {@link BubbleBackground}. */
+export interface BubbleBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Enables mouse-following motion for the interactive bubble layer. @default false */
   interactive?: boolean;
+  /** Spring configuration applied to the interactive bubble motion. @default {stiffness: 100, damping: 20} */
   transition?: SpringOptions;
-  colors?: {
-    first: string;
-    second: string;
-    third: string;
-    fourth: string;
-    fifth: string;
-    sixth: string;
-  };
+  /** Overrides the CSS custom property color palette for the bubbles. @default {first: "18,113,255", second: "221,74,255", third: "0,220,255", fourth: "200,50,50", fifth: "180,180,50", sixth: "140,100,255"} */
+  colors?: BubbleBackgroundColors;
 }
 
+type BubbleStyleProperties = React.CSSProperties & {
+  "--ac-bubble-first-color": string;
+  "--ac-bubble-second-color": string;
+  "--ac-bubble-third-color": string;
+  "--ac-bubble-fourth-color": string;
+  "--ac-bubble-fifth-color": string;
+  "--ac-bubble-sixth-color": string;
+};
+
+/**
+ * Renders drifting gradient bubbles with an optional interactive cursor follower.
+ *
+ * @remarks
+ * - Animated component using the `motion` library
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Client-side only (`"use client"` directive)
+ *
+ * @example
+ * ```tsx
+ * <BubbleBackground interactive />
+ * ```
+ *
+ * @see {@link BubbleBackgroundProps} for available props
+ */
 const BubbleBackground = React.forwardRef<HTMLDivElement, BubbleBackgroundProps>(
   (
     {
@@ -38,7 +77,8 @@ const BubbleBackground = React.forwardRef<HTMLDivElement, BubbleBackgroundProps>
     ref,
   ) => {
     const containerRef = React.useRef<HTMLDivElement>(null);
-    React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);
+
+    React.useImperativeHandle(ref, () => containerRef.current!, []);
 
     const mouseX = useMotionValue(0);
     const mouseY = useMotionValue(0);
@@ -46,44 +86,49 @@ const BubbleBackground = React.forwardRef<HTMLDivElement, BubbleBackgroundProps>
     const springY = useSpring(mouseY, transition);
 
     React.useEffect(() => {
-      if (!interactive) return;
+      if (!interactive) {
+        return;
+      }
 
       const currentContainer = containerRef.current;
-      if (!currentContainer) return;
+      if (!currentContainer) {
+        return;
+      }
 
-      const handleMouseMove = (e: MouseEvent) => {
+      const handleMouseMove = (event: MouseEvent): void => {
         const rect = currentContainer.getBoundingClientRect();
         const centerX = rect.left + rect.width / 2;
         const centerY = rect.top + rect.height / 2;
-        mouseX.set(e.clientX - centerX);
-        mouseY.set(e.clientY - centerY);
+        mouseX.set(event.clientX - centerX);
+        mouseY.set(event.clientY - centerY);
       };
 
-      currentContainer?.addEventListener("mousemove", handleMouseMove);
-      return () => currentContainer?.removeEventListener("mousemove", handleMouseMove);
+      currentContainer.addEventListener("mousemove", handleMouseMove);
+
+      return () => {
+        currentContainer.removeEventListener("mousemove", handleMouseMove);
+      };
     }, [interactive, mouseX, mouseY]);
 
+    const style: BubbleStyleProperties = {
+      "--ac-bubble-first-color": colors.first,
+      "--ac-bubble-second-color": colors.second,
+      "--ac-bubble-third-color": colors.third,
+      "--ac-bubble-fourth-color": colors.fourth,
+      "--ac-bubble-fifth-color": colors.fifth,
+      "--ac-bubble-sixth-color": colors.sixth,
+    };
+
     return (
       <div
         ref={containerRef}
-        className={cn("relative size-full overflow-hidden bg-gradient-to-br from-violet-900 to-blue-900", className)}
+        className={cn(styles.root, className)}
+        style={style}
         {...props}>
-        <style>
-          {`
-            :root {
-              --first-color: ${colors.first};
-              --second-color: ${colors.second};
-              --third-color: ${colors.third};
-              --fourth-color: ${colors.fourth};
-              --fifth-color: ${colors.fifth};
-              --sixth-color: ${colors.sixth};
-            }
-          `}
-        </style>
-
         <svg
           xmlns='http://www.w3.org/2000/svg'
-          className='absolute top-0 left-0 h-0 w-0'>
+          className={styles.hiddenSvg}
+          aria-hidden='true'>
           <defs>
             <filter id='goo'>
               <feGaussianBlur
@@ -105,17 +150,15 @@ const BubbleBackground = React.forwardRef<HTMLDivElement, BubbleBackgroundProps>
           </defs>
         </svg>
 
-        <div
-          className='absolute inset-0'
-          style={{filter: "url(#goo) blur(40px)"}}>
+        <div className={styles.filterLayer}>
           <motion.div
-            className='absolute top-[10%] left-[10%] size-[80%] rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--first-color),0.8)_0%,rgba(var(--first-color),0)_50%)] mix-blend-hard-light'
+            className={cn(styles.bubble, styles.bubbleFirst)}
             animate={{y: [-50, 50, -50]}}
             transition={{duration: 30, ease: "easeInOut", repeat: Infinity}}
           />
 
           <motion.div
-            className='absolute inset-0 flex origin-[calc(50%-400px)] items-center justify-center'
+            className={cn(styles.rotator, styles.rotatorSecond)}
             animate={{rotate: 360}}
             transition={
               {
@@ -125,38 +168,35 @@ const BubbleBackground = React.forwardRef<HTMLDivElement, BubbleBackgroundProps>
                 repeatType: "reverse",
               } satisfies Transition
             }>
-            <div className='top-[10%] left-[10%] size-[80%] rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--second-color),0.8)_0%,rgba(var(--second-color),0)_50%)] mix-blend-hard-light' />
+            <div className={cn(styles.bubble, styles.bubbleSecond)} />
           </motion.div>
 
           <motion.div
-            className='absolute inset-0 flex origin-[calc(50%+400px)] items-center justify-center'
+            className={cn(styles.rotator, styles.rotatorThird)}
             animate={{rotate: 360}}
             transition={{duration: 40, ease: "linear", repeat: Infinity}}>
-            <div className='absolute top-[calc(50%+200px)] left-[calc(50%-500px)] size-[80%] rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--third-color),0.8)_0%,rgba(var(--third-color),0)_50%)] mix-blend-hard-light' />
+            <div className={cn(styles.bubble, styles.bubbleThird)} />
           </motion.div>
 
           <motion.div
-            className='absolute top-[10%] left-[10%] size-[80%] rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--fourth-color),0.8)_0%,rgba(var(--fourth-color),0)_50%)] opacity-70 mix-blend-hard-light'
+            className={cn(styles.bubble, styles.bubbleFourth)}
             animate={{x: [-50, 50, -50]}}
             transition={{duration: 40, ease: "easeInOut", repeat: Infinity}}
           />
 
           <motion.div
-            className='absolute inset-0 flex origin-[calc(50%_-_800px)_calc(50%_+_200px)] items-center justify-center'
+            className={cn(styles.rotator, styles.rotatorFifth)}
             animate={{rotate: 360}}
             transition={{duration: 20, ease: "linear", repeat: Infinity}}>
-            <div className='absolute top-[calc(50%-80%)] left-[calc(50%-80%)] size-[160%] rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--fifth-color),0.8)_0%,rgba(var(--fifth-color),0)_50%)] mix-blend-hard-light' />
+            <div className={cn(styles.bubble, styles.bubbleFifth)} />
           </motion.div>
 
-          {Boolean(interactive) && (
+          {interactive ? (
             <motion.div
-              className='absolute size-full rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--sixth-color),0.8)_0%,rgba(var(--sixth-color),0)_50%)] opacity-70 mix-blend-hard-light'
-              style={{
-                x: springX,
-                y: springY,
-              }}
+              className={cn(styles.bubble, styles.bubbleInteractive)}
+              style={{x: springX, y: springY}}
             />
-          )}
+          ) : null}
         </div>
 
         {children}
@@ -167,4 +207,4 @@ const BubbleBackground = React.forwardRef<HTMLDivElement, BubbleBackgroundProps>
 
 BubbleBackground.displayName = "BubbleBackground";
 
-export {BubbleBackground, type BubbleBackgroundProps};
+export {BubbleBackground};