@arolariu/components 0.1.2 → 0.2.0

package/src/components/ui/counting-number.tsx

@@ -1,108 +1,92 @@
-"use client";
-
-import * as React from "react";
-import {
-  type SpringOptions,
-  type UseInViewOptions,
-  useInView,
-  useMotionValue,
-  useSpring,
-} from "motion/react";
-
-interface CountingNumberProps extends React.HTMLAttributes<HTMLSpanElement> {
-  number: number;
-  fromNumber?: number;
-  padStart?: boolean;
-  inView?: boolean;
-  inViewMargin?: UseInViewOptions["margin"];
-  inViewOnce?: boolean;
-  decimalSeparator?: string;
-  transition?: SpringOptions;
-  decimalPlaces?: number;
-}
-
-const CountingNumber = React.forwardRef<HTMLSpanElement, CountingNumberProps>(
-  (
-    {
-      number,
-      fromNumber = 0,
-      padStart = false,
-      inView = false,
-      inViewMargin = "0px",
-      inViewOnce = true,
-      decimalSeparator = ".",
-      transition = { stiffness: 90, damping: 50 },
-      decimalPlaces = 0,
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    const localRef = React.useRef<HTMLSpanElement>(null);
-    React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);
-
-    const numberStr = number.toString();
-    const decimals =
-      typeof decimalPlaces === "number"
-        ? decimalPlaces
-        : numberStr.includes(".")
-          ? numberStr.split(".")[1].length
-          : 0;
-
-    const motionVal = useMotionValue(fromNumber);
-    const springVal = useSpring(motionVal, transition);
-    const inViewResult = useInView(localRef, {
-      once: inViewOnce,
-      margin: inViewMargin,
-    });
-    const isInView = !inView || inViewResult;
-
-    React.useEffect(() => {
-      if (isInView) motionVal.set(number);
-    }, [isInView, number, motionVal]);
-
-    React.useEffect(() => {
-      const unsubscribe = springVal.on("change", (latest) => {
-        if (localRef.current) {
-          let formatted =
-            decimals > 0
-              ? latest.toFixed(decimals)
-              : Math.round(latest).toString();
-
-          if (decimals > 0) {
-            formatted = formatted.replace(".", decimalSeparator);
-          }
-
-          if (padStart) {
-            const finalIntLength = Math.floor(Math.abs(number)).toString()
-              .length;
-            const [intPart, fracPart] = formatted.split(decimalSeparator);
-            const paddedInt = intPart.padStart(finalIntLength, "0");
-            formatted = fracPart
-              ? `${paddedInt}${decimalSeparator}${fracPart}`
-              : paddedInt;
-          }
-
-          localRef.current.textContent = formatted;
-        }
-      });
-      return () => unsubscribe();
-    }, [springVal, decimals, padStart, number, decimalSeparator]);
-
-    const finalIntLength = Math.floor(Math.abs(number)).toString().length;
-    const initialText = padStart
-      ? "0".padStart(finalIntLength, "0") +
-        (decimals > 0 ? decimalSeparator + "0".repeat(decimals) : "")
-      : "0" + (decimals > 0 ? decimalSeparator + "0".repeat(decimals) : "");
-
-    return (
-      <span ref={localRef} className={className} {...props}>
-        {initialText}
-      </span>
-    );
-  },
-);
-
-CountingNumber.displayName = "CountingNumber";
-
-export { CountingNumber, type CountingNumberProps };
+"use client";
+
+import {type SpringOptions, type UseInViewOptions, useInView, useMotionValue, useSpring} from "motion/react";
+import * as React from "react";
+
+interface CountingNumberProps extends React.HTMLAttributes<HTMLSpanElement> {
+  number: number;
+  fromNumber?: number;
+  padStart?: boolean;
+  inView?: boolean;
+  inViewMargin?: UseInViewOptions["margin"];
+  inViewOnce?: boolean;
+  decimalSeparator?: string;
+  transition?: SpringOptions;
+  decimalPlaces?: number;
+}
+
+const CountingNumber = React.forwardRef<HTMLSpanElement, CountingNumberProps>(
+  (
+    {
+      number,
+      fromNumber = 0,
+      padStart = false,
+      inView = false,
+      inViewMargin = "0px",
+      inViewOnce = true,
+      decimalSeparator = ".",
+      transition = {stiffness: 90, damping: 50},
+      decimalPlaces = 0,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const localRef = React.useRef<HTMLSpanElement>(null);
+    React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);
+
+    const numberStr = number.toString();
+    const decimals = typeof decimalPlaces === "number" ? decimalPlaces : numberStr.includes(".") ? numberStr?.split(".")[1].length : 0;
+
+    const motionVal = useMotionValue(fromNumber);
+    const springVal = useSpring(motionVal, transition);
+    const inViewResult = useInView(localRef, {
+      once: inViewOnce,
+      margin: inViewMargin,
+    });
+    const isInView = !inView || inViewResult;
+
+    React.useEffect(() => {
+      if (isInView) motionVal.set(number);
+    }, [isInView, number, motionVal]);
+
+    React.useEffect(() => {
+      const unsubscribe = springVal.on("change", (latest) => {
+        if (localRef.current) {
+          let formatted = decimals > 0 ? latest.toFixed(decimals) : Math.round(latest).toString();
+
+          if (decimals > 0) {
+            formatted = formatted.replace(".", decimalSeparator);
+          }
+
+          if (padStart) {
+            const finalIntLength = Math.floor(Math.abs(number)).toString().length;
+            const [intPart, fracPart] = formatted.split(decimalSeparator);
+            const paddedInt = intPart.padStart(finalIntLength, "0");
+            formatted = fracPart ? `${paddedInt}${decimalSeparator}${fracPart}` : paddedInt;
+          }
+
+          localRef.current.textContent = formatted;
+        }
+      });
+      return () => unsubscribe();
+    }, [springVal, decimals, padStart, number, decimalSeparator]);
+
+    const finalIntLength = Math.floor(Math.abs(number)).toString().length;
+    const suffix = decimals > 0 ? `${decimalSeparator}${"0".repeat(decimals)}` : "";
+    const initialText = padStart ? `${"0".padStart(finalIntLength, "0")}${suffix}` : `0${suffix}`;
+
+    return (
+      <span
+        ref={localRef}
+        className={className}
+        {...props}>
+        {initialText}
+      </span>
+    );
+  },
+);
+
+CountingNumber.displayName = "CountingNumber";
+
+export {CountingNumber, type CountingNumberProps};

package/src/components/ui/dialog.tsx

@@ -1,146 +1,141 @@
-"use client";
-
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
-}
-
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}
-
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
-
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}
-
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
-}) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-white data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-neutral-200 p-6 shadow-lg duration-200 sm:max-w-lg dark:bg-neutral-950 dark:border-neutral-800",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-white focus:ring-neutral-950 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn(
-        "text-neutral-500 text-sm dark:text-neutral-400",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-};
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import {XIcon} from "lucide-react";
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+
+function Dialog({...props}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return (
+    <DialogPrimitive.Root
+      data-slot='dialog'
+      {...props}
+    />
+  );
+}
+
+function DialogTrigger({...props}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return (
+    <DialogPrimitive.Trigger
+      data-slot='dialog-trigger'
+      {...props}
+    />
+  );
+}
+
+function DialogPortal({...props}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return (
+    <DialogPrimitive.Portal
+      data-slot='dialog-portal'
+      {...props}
+    />
+  );
+}
+
+function DialogClose({...props}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return (
+    <DialogPrimitive.Close
+      data-slot='dialog-close'
+      {...props}
+    />
+  );
+}
+
+function DialogOverlay({className, ...props}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot='dialog-overlay'
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot='dialog-portal'>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot='dialog-content'
+        className={cn(
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-neutral-200 bg-white p-6 shadow-lg duration-200 sm:max-w-lg dark:border-neutral-800 dark:bg-neutral-950",
+          className,
+        )}
+        {...props}>
+        {children}
+        {Boolean(showCloseButton) && (
+          <DialogPrimitive.Close
+            data-slot='dialog-close'
+            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+            <XIcon />
+            <span className='sr-only'>Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({className, ...props}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot='dialog-header'
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({className, ...props}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot='dialog-footer'
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({className, ...props}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot='dialog-title'
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({className, ...props}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot='dialog-description'
+      className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};