@arolariu/components 0.4.2 → 1.0.0

package/src/components/ui/copy-button.module.css

@@ -0,0 +1,34 @@
+.copyButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ac-space-2);
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-sm);
+  background-color: transparent;
+  color: var(--ac-muted-foreground);
+  cursor: pointer;
+  transition: color var(--ac-transition-fast), background-color var(--ac-transition-fast);
+
+  &:focus-visible {
+    outline: 2px solid var(--ac-ring);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  @media (hover: hover) {
+    &:hover:not(:disabled) {
+      background-color: var(--ac-accent);
+      color: var(--ac-accent-foreground);
+    }
+  }
+}
+
+.icon {
+  width: 1rem;
+  height: 1rem;
+}

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

@@ -0,0 +1,116 @@
+"use client";
+
+import {Check, Copy} from "lucide-react";
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+import styles from "./copy-button.module.css";
+
+/**
+ * Represents the configurable props for the {@link CopyButton} component.
+ *
+ * @remarks
+ * Extends native `<button>` attributes while reserving `children` for the internal icon
+ * swap and exposing a required clipboard value.
+ */
+interface CopyButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  /**
+   * The text value copied to the clipboard when the button is activated.
+   */
+  value: string;
+  /**
+   * Duration in milliseconds to show the success state before restoring the copy icon.
+   *
+   * @default 2000
+   */
+  timeout?: number;
+}
+
+/**
+ * A compact icon button that copies text to the clipboard.
+ *
+ * @remarks
+ * **Rendering Context**: Client component.
+ *
+ * Uses `navigator.clipboard.writeText` when available and swaps from a copy icon to a
+ * confirmation icon for a configurable duration after a successful copy. If clipboard
+ * access fails, the button remains interactive without throwing to the UI.
+ *
+ * @example
+ * ```tsx
+ * <CopyButton value="npm install @arolariu/components" />
+ * ```
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText | MDN Clipboard.writeText}
+ */
+const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
+  ({value, timeout = 2000, className, onClick, disabled, ...props}, ref) => {
+    const [copied, setCopied] = React.useState(false);
+    const timeoutRef = React.useRef<ReturnType<typeof globalThis.setTimeout> | null>(null);
+
+    React.useEffect(
+      () => () => {
+        if (timeoutRef.current !== null) {
+          globalThis.clearTimeout(timeoutRef.current);
+        }
+      },
+      [],
+    );
+
+    const handleCopy = React.useCallback(
+      async (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event);
+
+        // eslint-disable-next-line n/no-unsupported-features/node-builtins -- Clipboard access is browser-only and required for this client component.
+        const {clipboard} = globalThis.navigator;
+
+        if (event.defaultPrevented || disabled || !clipboard?.writeText) {
+          return;
+        }
+
+        try {
+          await clipboard.writeText(value);
+          setCopied(true);
+
+          if (timeoutRef.current !== null) {
+            globalThis.clearTimeout(timeoutRef.current);
+          }
+
+          timeoutRef.current = globalThis.setTimeout(() => {
+            setCopied(false);
+          }, timeout);
+        } catch {
+          // Clipboard access can fail in unsupported or insecure contexts.
+        }
+      },
+      [disabled, onClick, timeout, value],
+    );
+
+    return (
+      <button
+        ref={ref}
+        type='button'
+        aria-label={copied ? "Copied" : "Copy to clipboard"}
+        className={cn(styles.copyButton, className)}
+        disabled={disabled}
+        onClick={handleCopy}
+        {...props}>
+        {copied ? (
+          <Check
+            aria-hidden='true'
+            className={styles.icon}
+          />
+        ) : (
+          <Copy
+            aria-hidden='true'
+            className={styles.icon}
+          />
+        )}
+      </button>
+    );
+  },
+);
+CopyButton.displayName = "CopyButton";
+
+export {CopyButton};
+export type {CopyButtonProps};

package/src/components/ui/counting-number.module.css

@@ -0,0 +1,4 @@
+.countingNumber {
+  display: inline-block;
+  font-variant-numeric: tabular-nums;
+}

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

@@ -1,20 +1,49 @@
 "use client";
 
-import {type SpringOptions, type UseInViewOptions, useInView, useMotionValue, useSpring} from "motion/react";
+import {useInView, useMotionValue, useSpring, type SpringOptions, type UseInViewOptions} from "motion/react";
 import * as React from "react";
 
-interface CountingNumberProps extends React.HTMLAttributes<HTMLSpanElement> {
+import {cn} from "@/lib/utilities";
+import styles from "./counting-number.module.css";
+
+/** Props accepted by {@link CountingNumber}. */
+export interface CountingNumberProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Final numeric value to animate toward. @default undefined */
   number: number;
+  /** Initial numeric value used before the spring animation starts. @default 0 */
   fromNumber?: number;
+  /** Pads the integer portion so it matches the target value width. @default false */
   padStart?: boolean;
+  /** Delays the animation until the element enters the viewport. @default false */
   inView?: boolean;
+  /** Margin passed to the in-view observer when `inView` is enabled. @default "0px" */
   inViewMargin?: UseInViewOptions["margin"];
+  /** Prevents the in-view animation from replaying after the first reveal. @default true */
   inViewOnce?: boolean;
+  /** Character used between the integer and decimal portions. @default "." */
   decimalSeparator?: string;
+  /** Spring physics applied to the counting animation. @default {stiffness: 90, damping: 50} */
   transition?: SpringOptions;
+  /** Number of decimal places rendered during the animation. @default 0 */
   decimalPlaces?: number;
 }
 
+/**
+ * Animates a number value with a spring and writes the formatted value into a span.
+ *
+ * @remarks
+ * - Animated component using the `motion` library
+ * - Renders a `<span>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Client-side only (`"use client"` directive)
+ *
+ * @example
+ * ```tsx
+ * <CountingNumber number={1250} />
+ * ```
+ *
+ * @see {@link CountingNumberProps} for available props
+ */
 const CountingNumber = React.forwardRef<HTMLSpanElement, CountingNumberProps>(
   (
     {
@@ -33,13 +62,15 @@ const CountingNumber = React.forwardRef<HTMLSpanElement, CountingNumberProps>(
     ref,
   ) => {
     const localRef = React.useRef<HTMLSpanElement>(null);
-    React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);
+
+    React.useImperativeHandle(ref, () => localRef.current!, []);
 
     const numberStr = number.toString();
-    const decimals = typeof decimalPlaces === "number" ? decimalPlaces : numberStr.includes(".") ? numberStr?.split(".")[1].length : 0;
+    const decimals = numberStr.includes(".") ? (numberStr.split(".")[1]?.length ?? 0) : 0;
+    const resolvedDecimalPlaces = typeof decimalPlaces === "number" ? decimalPlaces : decimals;
 
-    const motionVal = useMotionValue(fromNumber);
-    const springVal = useSpring(motionVal, transition);
+    const motionValue = useMotionValue(fromNumber);
+    const springValue = useSpring(motionValue, transition);
     const inViewResult = useInView(localRef, {
       once: inViewOnce,
       margin: inViewMargin,
@@ -47,39 +78,46 @@ const CountingNumber = React.forwardRef<HTMLSpanElement, CountingNumberProps>(
     const isInView = !inView || inViewResult;
 
     React.useEffect(() => {
-      if (isInView) motionVal.set(number);
-    }, [isInView, number, motionVal]);
+      if (isInView) {
+        motionValue.set(number);
+      }
+    }, [isInView, motionValue, number]);
 
     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;
+      const unsubscribe = springValue.on("change", (latest) => {
+        if (!localRef.current) {
+          return;
+        }
+
+        let formatted = resolvedDecimalPlaces > 0 ? latest.toFixed(resolvedDecimalPlaces) : Math.round(latest).toString();
+
+        if (resolvedDecimalPlaces > 0) {
+          formatted = formatted.replace(".", decimalSeparator);
         }
+
+        if (padStart) {
+          const finalIntegerLength = Math.floor(Math.abs(number)).toString().length;
+          const [integerPart, fractionPart] = formatted.split(decimalSeparator);
+          const paddedInteger = integerPart.padStart(finalIntegerLength, "0");
+          formatted = fractionPart ? `${paddedInteger}${decimalSeparator}${fractionPart}` : paddedInteger;
+        }
+
+        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 () => {
+        unsubscribe();
+      };
+    }, [decimalSeparator, number, padStart, resolvedDecimalPlaces, springValue]);
+
+    const finalIntegerLength = Math.floor(Math.abs(number)).toString().length;
+    const suffix = resolvedDecimalPlaces > 0 ? `${decimalSeparator}${"0".repeat(resolvedDecimalPlaces)}` : "";
+    const initialText = padStart ? `${"0".padStart(finalIntegerLength, "0")}${suffix}` : `0${suffix}`;
 
     return (
       <span
         ref={localRef}
-        className={className}
+        className={cn(styles.countingNumber, className)}
         {...props}>
         {initialText}
       </span>
@@ -89,4 +127,4 @@ const CountingNumber = React.forwardRef<HTMLSpanElement, CountingNumberProps>(
 
 CountingNumber.displayName = "CountingNumber";
 
-export {CountingNumber, type CountingNumberProps};
+export {CountingNumber};

package/src/components/ui/dialog.module.css

@@ -0,0 +1,113 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  min-height: 100dvh;
+  background-color: rgb(0 0 0 / 0.5);
+  transition: opacity var(--ac-transition-normal);
+  touch-action: none;
+
+  @supports (-webkit-touch-callout: none) {
+    position: absolute;
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+}
+
+.popup {
+  box-sizing: border-box;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 32rem;
+  max-width: calc(100vw - 2rem);
+  max-height: 85vh;
+  overflow-y: auto;
+  padding: var(--ac-space-6);
+  border-radius: var(--ac-radius-lg);
+  border: 1px solid var(--ac-border);
+  background-color: var(--ac-background);
+  color: var(--ac-foreground);
+  box-shadow: 0 10px 30px -5px rgb(0 0 0 / 0.1), 0 4px 10px -5px rgb(0 0 0 / 0.04);
+  transition: opacity var(--ac-transition-normal), transform var(--ac-transition-normal);
+  touch-action: none;
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ac-space-1);
+  text-align: center;
+}
+
+@media (min-width: 640px) {
+  .header {
+    text-align: left;
+  }
+}
+
+.footer {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--ac-space-2);
+  padding-top: var(--ac-space-4);
+}
+
+@media (min-width: 640px) {
+  .footer {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+
+.title {
+  font-size: var(--ac-text-lg);
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+}
+
+.description {
+  font-size: var(--ac-text-sm);
+  color: var(--ac-muted-foreground);
+}
+
+.close {
+  position: absolute;
+  top: var(--ac-space-3);
+  right: var(--ac-space-3);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--ac-radius-xs);
+  background: transparent;
+  color: var(--ac-muted-foreground);
+  cursor: pointer;
+  transition: background-color var(--ac-transition-fast), color var(--ac-transition-fast);
+  outline: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: color-mix(in oklch, var(--ac-muted), transparent 50%);
+      color: var(--ac-foreground);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ac-ring);
+    outline-offset: -1px;
+  }
+}