@arolariu/components 0.1.2 → 0.3.0

package/src/components/ui/progress.tsx

@@ -1,31 +1,24 @@
-"use client";
-
-import * as React from "react";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
-
-import { cn } from "@/lib/utils";
-
-function Progress({
-  className,
-  value,
-  ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
-  return (
-    <ProgressPrimitive.Root
-      data-slot="progress"
-      className={cn(
-        "bg-neutral-900/20 relative h-2 w-full overflow-hidden rounded-full dark:bg-neutral-50/20",
-        className,
-      )}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        data-slot="progress-indicator"
-        className="bg-neutral-900 h-full w-full flex-1 transition-all dark:bg-neutral-50"
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  );
-}
-
-export { Progress };
+"use client";
+
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({className, value, ...props}, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-neutral-900/20 dark:bg-neutral-50/20", className)}
+    {...props}>
+    <ProgressPrimitive.Indicator
+      className='h-full w-full flex-1 bg-neutral-900 transition-all dark:bg-neutral-50'
+      style={{transform: `translateX(-${100 - (value || 0)}%)`}}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export {Progress};

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

@@ -1,45 +1,43 @@
-"use client";
-
-import * as React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { CircleIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-function RadioGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
-  return (
-    <RadioGroupPrimitive.Root
-      data-slot="radio-group"
-      className={cn("grid gap-3", className)}
-      {...props}
-    />
-  );
-}
-
-function RadioGroupItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
-  return (
-    <RadioGroupPrimitive.Item
-      data-slot="radio-group-item"
-      className={cn(
-        "border-neutral-200 text-neutral-900 focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:bg-neutral-200/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:text-neutral-50 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 dark:dark:bg-neutral-800/30",
-        className,
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator
-        data-slot="radio-group-indicator"
-        className="relative flex items-center justify-center"
-      >
-        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
-}
-
-export { RadioGroup, RadioGroupItem };
+"use client";
+
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import {Circle} from "lucide-react";
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({className, ...props}, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({className, ...props}, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-neutral-200 border-neutral-900 text-neutral-900 shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-50 dark:border-neutral-800 dark:text-neutral-50 dark:focus-visible:ring-neutral-300",
+        className,
+      )}
+      {...props}>
+      <RadioGroupPrimitive.Indicator className='flex items-center justify-center'>
+        <Circle className='fill-primary h-3.5 w-3.5' />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export {RadioGroup, RadioGroupItem};

package/src/components/ui/resizable.tsx

@@ -1,56 +1,38 @@
-"use client";
-
-import * as React from "react";
-import { GripVerticalIcon } from "lucide-react";
-import * as ResizablePrimitive from "react-resizable-panels";
-
-import { cn } from "@/lib/utils";
-
-function ResizablePanelGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
-  return (
-    <ResizablePrimitive.PanelGroup
-      data-slot="resizable-panel-group"
-      className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
-}
-
-function ResizableHandle({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean;
-}) {
-  return (
-    <ResizablePrimitive.PanelResizeHandle
-      data-slot="resizable-handle"
-      className={cn(
-        "bg-neutral-200 focus-visible:ring-neutral-950 relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90 dark:bg-neutral-800 dark:focus-visible:ring-neutral-300",
-        className,
-      )}
-      {...props}
-    >
-      {withHandle && (
-        <div className="bg-neutral-200 z-10 flex h-4 w-3 items-center justify-center rounded-xs border dark:bg-neutral-800">
-          <GripVerticalIcon className="size-2.5" />
-        </div>
-      )}
-    </ResizablePrimitive.PanelResizeHandle>
-  );
-}
-
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
+"use client";
+
+import {GripVertical} from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import {cn} from "@/lib/utilities";
+
+const ResizablePanelGroup = ({className, ...props}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
+    {...props}
+  />
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-neutral-200 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:ring-offset-1 focus-visible:outline-none data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 dark:bg-neutral-800 dark:focus-visible:ring-neutral-300 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className,
+    )}
+    {...props}>
+    {withHandle && (
+      <div className='z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-neutral-200 bg-neutral-200 dark:border-neutral-800 dark:bg-neutral-800'>
+        <GripVertical className='h-2.5 w-2.5' />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+);
+
+export {ResizableHandle, ResizablePanel, ResizablePanelGroup};

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

@@ -1,111 +1,90 @@
-"use client";
-
-import * as React from "react";
-import { type HTMLMotionProps, motion, type Transition } from "motion/react";
-
-import { cn } from "@/lib/utils";
-
-interface Ripple {
-  id: number;
-  x: number;
-  y: number;
-}
-
-interface RippleButtonProps extends HTMLMotionProps<"button"> {
-  children: React.ReactNode;
-  rippleClassName?: string;
-  scale?: number;
-  transition?: Transition;
-}
-
-const RippleButton = React.forwardRef<HTMLButtonElement, RippleButtonProps>(
-  (
-    {
-      children,
-      onClick,
-      className,
-      rippleClassName,
-      scale = 10,
-      transition = { duration: 0.6, ease: "easeOut" },
-      ...props
-    },
-    ref,
-  ) => {
-    const [ripples, setRipples] = React.useState<Ripple[]>([]);
-    const buttonRef = React.useRef<HTMLButtonElement>(null);
-    React.useImperativeHandle(
-      ref,
-      () => buttonRef.current as HTMLButtonElement,
-    );
-
-    const createRipple = React.useCallback(
-      (event: React.MouseEvent<HTMLButtonElement>) => {
-        const button = buttonRef.current;
-        if (!button) return;
-
-        const rect = button.getBoundingClientRect();
-        const x = event.clientX - rect.left;
-        const y = event.clientY - rect.top;
-
-        const newRipple: Ripple = {
-          id: Date.now(),
-          x,
-          y,
-        };
-
-        setRipples((prev) => [...prev, newRipple]);
-
-        setTimeout(() => {
-          setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));
-        }, 600);
-      },
-      [],
-    );
-
-    const handleClick = React.useCallback(
-      (event: React.MouseEvent<HTMLButtonElement>) => {
-        createRipple(event);
-        if (onClick) {
-          onClick(event);
-        }
-      },
-      [createRipple, onClick],
-    );
-
-    return (
-      <motion.button
-        ref={buttonRef}
-        onClick={handleClick}
-        whileTap={{ scale: 0.95 }}
-        whileHover={{ scale: 1.05 }}
-        className={cn(
-          "relative h-10 px-4 py-2 text-sm font-medium text-primary-foreground overflow-hidden bg-primary cursor-pointer rounded-lg focus:outline-none",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {ripples.map((ripple) => (
-          <motion.span
-            key={ripple.id}
-            initial={{ scale: 0, opacity: 0.5 }}
-            animate={{ scale, opacity: 0 }}
-            transition={transition}
-            className={cn(
-              "absolute bg-primary-foreground rounded-full size-5 pointer-events-none",
-              rippleClassName,
-            )}
-            style={{
-              top: ripple.y - 10,
-              left: ripple.x - 10,
-            }}
-          />
-        ))}
-      </motion.button>
-    );
-  },
-);
-
-RippleButton.displayName = "RippleButton";
-
-export { RippleButton, type RippleButtonProps };
+"use client";
+
+import {type HTMLMotionProps, motion, type Transition} from "motion/react";
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+
+interface Ripple {
+  id: number;
+  x: number;
+  y: number;
+}
+
+interface RippleButtonProps extends HTMLMotionProps<"button"> {
+  children: React.ReactNode;
+  rippleClassName?: string;
+  scale?: number;
+  transition?: Transition;
+}
+
+const RippleButton = React.forwardRef<HTMLButtonElement, RippleButtonProps>(
+  ({children, onClick, className, rippleClassName, scale = 10, transition = {duration: 0.6, ease: "easeOut"}, ...props}, ref) => {
+    const [ripples, setRipples] = React.useState<Ripple[]>([]);
+    const buttonRef = React.useRef<HTMLButtonElement>(null);
+    React.useImperativeHandle(ref, () => buttonRef.current as HTMLButtonElement);
+
+    const createRipple = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+      const button = buttonRef.current;
+      if (!button) return;
+
+      const rect = button.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+
+      const newRipple: Ripple = {
+        id: Date.now(),
+        x,
+        y,
+      };
+
+      setRipples((prev) => [...prev, newRipple]);
+
+      setTimeout(() => {
+        setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));
+      }, 600);
+    }, []);
+
+    const handleClick = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        createRipple(event);
+        if (onClick) {
+          onClick(event);
+        }
+      },
+      [createRipple, onClick],
+    );
+
+    return (
+      <motion.button
+        ref={buttonRef}
+        onClick={handleClick}
+        whileTap={{scale: 0.95}}
+        whileHover={{scale: 1.05}}
+        className={cn(
+          "text-primary-foreground bg-primary relative h-10 cursor-pointer overflow-hidden rounded-lg px-4 py-2 text-sm font-medium focus:outline-none",
+          className,
+        )}
+        {...props}>
+        {children}
+        {ripples.map((ripple) => (
+          <motion.span
+            key={ripple.id}
+            initial={{scale: 0, opacity: 0.5}}
+            animate={{scale, opacity: 0}}
+            transition={transition}
+            className={cn("bg-primary-foreground pointer-events-none absolute size-5 rounded-full", rippleClassName)}
+            style={{
+              top: ripple.y - 10,
+              left: ripple.x - 10,
+            }}
+          />
+        ))}
+      </motion.button>
+    );
+  },
+);
+
+RippleButton.displayName = "RippleButton";
+
+export {RippleButton, type RippleButtonProps};