@arolariu/components 0.0.39 → 0.1.0

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

@@ -1,187 +1,189 @@
-"use client";
-
-import * as React from "react";
-import {
-  motion,
-  type SpringOptions,
-  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: "loop",
-              reverse: true,
-            }}
-          >
-            <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 * 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 };

package/src/components/ui/calendar.tsx

@@ -73,7 +73,10 @@ function Calendar({
           "relative has-focus:border-neutral-950 border border-neutral-200 shadow-xs has-focus:ring-neutral-950/50 has-focus:ring-[3px] rounded-md dark:has-focus:border-neutral-300 dark:border-neutral-800 dark:has-focus:ring-neutral-300/50",
           defaultClassNames.dropdown_root,
         ),
-        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        dropdown: cn(
+          "absolute bg-white inset-0 opacity-0 dark:bg-neutral-950",
+          defaultClassNames.dropdown,
+        ),
         caption_label: cn(
           "select-none font-medium",
           captionLayout === "label"

package/src/components/ui/chart.tsx

@@ -2,14 +2,6 @@
 
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
-import type { LegendPayload } from "recharts/types/component/DefaultLegendContent";
-import {
-  NameType,
-  Payload,
-  ValueType,
-} from "recharts/types/component/DefaultTooltipContent";
-import type { Props as LegendProps } from "recharts/types/component/Legend";
-import { TooltipContentProps } from "recharts/types/component/Tooltip";
 
 import { cn } from "@/lib/utils";
 
@@ -92,17 +84,17 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
         __html: Object.entries(THEMES)
           .map(
             ([theme, prefix]) => `
-            ${prefix} [data-chart=${id}] {
-            ${colorConfig
-              .map(([key, itemConfig]) => {
-                const color =
-                  itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-                  itemConfig.color;
-                return color ? `  --color-${key}: ${color};` : null;
-              })
-              .join("\n")}
-            }
-            `,
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
           )
           .join("\n"),
       }}
@@ -112,43 +104,28 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
 
-type CustomTooltipProps = TooltipContentProps<ValueType, NameType> & {
-  className?: string;
-  hideLabel?: boolean;
-  hideIndicator?: boolean;
-  indicator?: "line" | "dot" | "dashed";
-  nameKey?: string;
-  labelKey?: string;
-  labelFormatter?: (
-    label: TooltipContentProps<number, string>["label"],
-    payload: TooltipContentProps<number, string>["payload"],
-  ) => React.ReactNode;
-  formatter?: (
-    value: number | string,
-    name: string,
-    item: Payload<number | string, string>,
-    index: number,
-    payload: ReadonlyArray<Payload<number | string, string>>,
-  ) => React.ReactNode;
-  labelClassName?: string;
-  color?: string;
-};
-
 function ChartTooltipContent({
   active,
   payload,
-  label,
   className,
   indicator = "dot",
   hideLabel = false,
   hideIndicator = false,
+  label,
   labelFormatter,
-  formatter,
   labelClassName,
+  formatter,
   color,
   nameKey,
   labelKey,
-}: CustomTooltipProps) {
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+  }) {
   const { config } = useChart();
 
   const tooltipLabel = React.useMemo(() => {
@@ -196,7 +173,7 @@ function ChartTooltipContent({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "border-neutral-200/50 bg-white grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-neutral-200 px-2.5 py-1.5 text-xs shadow-xl dark:border-neutral-800/50 dark:bg-neutral-950 dark:border-neutral-800",
         className,
       )}
     >
@@ -211,7 +188,7 @@ function ChartTooltipContent({
             <div
               key={item.dataKey}
               className={cn(
-                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                "[&>svg]:text-neutral-500 flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 dark:[&>svg]:text-neutral-400",
                 indicator === "dot" && "items-center",
               )}
             >
@@ -251,12 +228,12 @@ function ChartTooltipContent({
                   >
                     <div className="grid gap-1.5">
                       {nestLabel ? tooltipLabel : null}
-                      <span className="text-muted-foreground">
+                      <span className="text-neutral-500 dark:text-neutral-400">
                         {itemConfig?.label || item.name}
                       </span>
                     </div>
                     {item.value && (
-                      <span className="text-foreground font-mono font-medium tabular-nums">
+                      <span className="text-neutral-950 font-mono font-medium tabular-nums dark:text-neutral-50">
                         {item.value.toLocaleString()}
                       </span>
                     )}
@@ -273,21 +250,17 @@ function ChartTooltipContent({
 
 const ChartLegend = RechartsPrimitive.Legend;
 
-type ChartLegendContentProps = {
-  className?: string;
-  hideIcon?: boolean;
-  verticalAlign?: LegendProps["verticalAlign"];
-  payload?: LegendPayload[];
-  nameKey?: string;
-};
-
 function ChartLegendContent({
   className,
   hideIcon = false,
   payload,
   verticalAlign = "bottom",
   nameKey,
-}: ChartLegendContentProps) {
+}: React.ComponentProps<"div"> &
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+  }) {
   const { config } = useChart();
 
   if (!payload?.length) {
@@ -310,7 +283,7 @@ function ChartLegendContent({
           <div
             key={item.value}
             className={cn(
-              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+              "[&>svg]:text-neutral-500 flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 dark:[&>svg]:text-neutral-400",
             )}
           >
             {itemConfig?.icon && !hideIcon ? (