@arolariu/components 0.1.2 → 0.3.0

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

@@ -1,189 +1,170 @@
-"use client";
-
-import * as React from "react";
-import {
-  motion,
-  type SpringOptions,
-  Transition,
-  useMotionValue,
-  useSpring,
-} from "motion/react";
-
-import { cn } from "@/lib/utils";
-
-interface BubbleBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
-  interactive?: boolean;
-  transition?: SpringOptions;
-  colors?: {
-    first: string;
-    second: string;
-    third: string;
-    fourth: string;
-    fifth: string;
-    sixth: string;
-  };
-}
-
-const BubbleBackground = React.forwardRef<
-  HTMLDivElement,
-  BubbleBackgroundProps
->(
-  (
-    {
-      className,
-      children,
-      interactive = false,
-      transition = { stiffness: 100, damping: 20 },
-      colors = {
-        first: "18,113,255",
-        second: "221,74,255",
-        third: "0,220,255",
-        fourth: "200,50,50",
-        fifth: "180,180,50",
-        sixth: "140,100,255",
-      },
-      ...props
-    },
-    ref,
-  ) => {
-    const containerRef = React.useRef<HTMLDivElement>(null);
-    React.useImperativeHandle(
-      ref,
-      () => containerRef.current as HTMLDivElement,
-    );
-
-    const mouseX = useMotionValue(0);
-    const mouseY = useMotionValue(0);
-    const springX = useSpring(mouseX, transition);
-    const springY = useSpring(mouseY, transition);
-
-    React.useEffect(() => {
-      if (!interactive) return;
-
-      const currentContainer = containerRef.current;
-      if (!currentContainer) return;
-
-      const handleMouseMove = (e: MouseEvent) => {
-        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);
-      };
-
-      currentContainer?.addEventListener("mousemove", handleMouseMove);
-      return () =>
-        currentContainer?.removeEventListener("mousemove", handleMouseMove);
-    }, [interactive, mouseX, mouseY]);
-
-    return (
-      <div
-        ref={containerRef}
-        className={cn(
-          "relative size-full overflow-hidden bg-gradient-to-br from-violet-900 to-blue-900",
-          className,
-        )}
-        {...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 w-0 h-0"
-        >
-          <defs>
-            <filter id="goo">
-              <feGaussianBlur
-                in="SourceGraphic"
-                stdDeviation="10"
-                result="blur"
-              />
-              <feColorMatrix
-                in="blur"
-                mode="matrix"
-                values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8"
-                result="goo"
-              />
-              <feBlend in="SourceGraphic" in2="goo" />
-            </filter>
-          </defs>
-        </svg>
-
-        <div
-          className="absolute inset-0"
-          style={{ filter: "url(#goo) blur(40px)" }}
-        >
-          <motion.div
-            className="absolute rounded-full size-[80%] top-[10%] left-[10%] mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--first-color),0.8)_0%,rgba(var(--first-color),0)_50%)]"
-            animate={{ y: [-50, 50, -50] }}
-            transition={{ duration: 30, ease: "easeInOut", repeat: Infinity }}
-          />
-
-          <motion.div
-            className="absolute inset-0 flex justify-center items-center origin-[calc(50%-400px)]"
-            animate={{ rotate: 360 }}
-            transition={
-              {
-                duration: 20,
-                ease: "linear",
-                repeat: Infinity,
-                repeatType: "reverse",
-              } satisfies Transition
-            }
-          >
-            <div className="rounded-full size-[80%] top-[10%] left-[10%] mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--second-color),0.8)_0%,rgba(var(--second-color),0)_50%)]" />
-          </motion.div>
-
-          <motion.div
-            className="absolute inset-0 flex justify-center items-center origin-[calc(50%+400px)]"
-            animate={{ rotate: 360 }}
-            transition={{ duration: 40, ease: "linear", repeat: Infinity }}
-          >
-            <div className="absolute rounded-full size-[80%] bg-[radial-gradient(circle_at_center,rgba(var(--third-color),0.8)_0%,rgba(var(--third-color),0)_50%)] mix-blend-hard-light top-[calc(50%+200px)] left-[calc(50%-500px)]" />
-          </motion.div>
-
-          <motion.div
-            className="absolute rounded-full size-[80%] top-[10%] left-[10%] mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--fourth-color),0.8)_0%,rgba(var(--fourth-color),0)_50%)] opacity-70"
-            animate={{ x: [-50, 50, -50] }}
-            transition={{ duration: 40, ease: "easeInOut", repeat: Infinity }}
-          />
-
-          <motion.div
-            className="absolute inset-0 flex justify-center items-center origin-[calc(50%_-_800px)_calc(50%_+_200px)]"
-            animate={{ rotate: 360 }}
-            transition={{ duration: 20, ease: "linear", repeat: Infinity }}
-          >
-            <div className="absolute rounded-full size-[160%] mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--fifth-color),0.8)_0%,rgba(var(--fifth-color),0)_50%)] top-[calc(50%-80%)] left-[calc(50%-80%)]" />
-          </motion.div>
-
-          {interactive && (
-            <motion.div
-              className="absolute rounded-full size-full mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--sixth-color),0.8)_0%,rgba(var(--sixth-color),0)_50%)] opacity-70"
-              style={{
-                x: springX,
-                y: springY,
-              }}
-            />
-          )}
-        </div>
-
-        {children}
-      </div>
-    );
-  },
-);
-
-BubbleBackground.displayName = "BubbleBackground";
-
-export { BubbleBackground, type BubbleBackgroundProps };
+"use client";
+
+import {motion, type SpringOptions, Transition, useMotionValue, useSpring} from "motion/react";
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+
+interface BubbleBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
+  interactive?: boolean;
+  transition?: SpringOptions;
+  colors?: {
+    first: string;
+    second: string;
+    third: string;
+    fourth: string;
+    fifth: string;
+    sixth: string;
+  };
+}
+
+const BubbleBackground = React.forwardRef<HTMLDivElement, BubbleBackgroundProps>(
+  (
+    {
+      className,
+      children,
+      interactive = false,
+      transition = {stiffness: 100, damping: 20},
+      colors = {
+        first: "18,113,255",
+        second: "221,74,255",
+        third: "0,220,255",
+        fourth: "200,50,50",
+        fifth: "180,180,50",
+        sixth: "140,100,255",
+      },
+      ...props
+    },
+    ref,
+  ) => {
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);
+
+    const mouseX = useMotionValue(0);
+    const mouseY = useMotionValue(0);
+    const springX = useSpring(mouseX, transition);
+    const springY = useSpring(mouseY, transition);
+
+    React.useEffect(() => {
+      if (!interactive) return;
+
+      const currentContainer = containerRef.current;
+      if (!currentContainer) return;
+
+      const handleMouseMove = (e: MouseEvent) => {
+        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);
+      };
+
+      currentContainer?.addEventListener("mousemove", handleMouseMove);
+      return () => currentContainer?.removeEventListener("mousemove", handleMouseMove);
+    }, [interactive, mouseX, mouseY]);
+
+    return (
+      <div
+        ref={containerRef}
+        className={cn("relative size-full overflow-hidden bg-gradient-to-br from-violet-900 to-blue-900", className)}
+        {...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'>
+          <defs>
+            <filter id='goo'>
+              <feGaussianBlur
+                in='SourceGraphic'
+                stdDeviation='10'
+                result='blur'
+              />
+              <feColorMatrix
+                in='blur'
+                mode='matrix'
+                values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8'
+                result='goo'
+              />
+              <feBlend
+                in='SourceGraphic'
+                in2='goo'
+              />
+            </filter>
+          </defs>
+        </svg>
+
+        <div
+          className='absolute inset-0'
+          style={{filter: "url(#goo) blur(40px)"}}>
+          <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'
+            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'
+            animate={{rotate: 360}}
+            transition={
+              {
+                duration: 20,
+                ease: "linear",
+                repeat: Infinity,
+                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' />
+          </motion.div>
+
+          <motion.div
+            className='absolute inset-0 flex origin-[calc(50%+400px)] items-center justify-center'
+            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' />
+          </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'
+            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'
+            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' />
+          </motion.div>
+
+          {Boolean(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,
+              }}
+            />
+          )}
+        </div>
+
+        {children}
+      </div>
+    );
+  },
+);
+
+BubbleBackground.displayName = "BubbleBackground";
+
+export {BubbleBackground, type BubbleBackgroundProps};

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

@@ -0,0 +1,69 @@
+"use client";
+
+import {Slot} from "@radix-ui/react-slot";
+import {cva, type VariantProps} from "class-variance-authority";
+import * as React from "react";
+
+import {Separator} from "@/components/ui/separator";
+import {cn} from "@/lib/utilities";
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+function ButtonGroup({className, orientation, ...props}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role='group'
+      data-slot='button-group'
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({orientation}), className)}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      className={cn(
+        "flex items-center gap-2 rounded-md border border-neutral-200 bg-neutral-100 px-4 text-sm font-medium shadow-xs dark:border-neutral-800 dark:bg-neutral-800 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupSeparator({className, orientation = "vertical", ...props}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot='button-group-separator'
+      orientation={orientation}
+      className={cn("relative !m-0 self-stretch bg-neutral-200 data-[orientation=vertical]:h-auto dark:bg-neutral-800", className)}
+      {...props}
+    />
+  );
+}
+
+export {ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants};

package/src/components/ui/button.tsx

@@ -1,61 +1,55 @@
-"use client";
-
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 focus-visible:ring-[3px] aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-neutral-900 text-neutral-50 shadow-xs hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90",
-        destructive:
-          "bg-red-500 text-white shadow-xs hover:bg-red-500/90 focus-visible:ring-red-500/20 dark:focus-visible:ring-red-500/40 dark:bg-red-500/60 dark:bg-red-900 dark:hover:bg-red-900/90 dark:focus-visible:ring-red-900/20 dark:dark:focus-visible:ring-red-900/40 dark:dark:bg-red-900/60",
-        outline:
-          "border bg-white shadow-xs hover:bg-neutral-100 hover:text-neutral-900 dark:bg-neutral-200/30 dark:border-neutral-200 dark:hover:bg-neutral-200/50 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50 dark:dark:bg-neutral-800/30 dark:dark:border-neutral-800 dark:dark:hover:bg-neutral-800/50",
-        secondary:
-          "bg-neutral-100 text-neutral-900 shadow-xs hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
-        ghost:
-          "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-100/50 dark:hover:bg-neutral-800 dark:hover:text-neutral-50 dark:dark:hover:bg-neutral-800/50",
-        link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants };
+"use client";
+
+import {Slot} from "@radix-ui/react-slot";
+import {cva, type VariantProps} from "class-variance-authority";
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:focus-visible:ring-neutral-300",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90",
+        destructive:
+          "bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90",
+        outline:
+          "border border-neutral-200 bg-white shadow-sm hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
+        secondary:
+          "bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
+        ghost: "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
+        link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({className, variant, size, asChild = false, ...props}, ref) => {
+  const Comp = asChild ? Slot : "button";
+  return (
+    <Comp
+      className={cn(buttonVariants({variant, size, className}))}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Button.displayName = "Button";
+
+export {Button, buttonVariants};