@arolariu/components 0.5.0 → 1.0.0

package/src/motion/Collapse.module.css

@@ -0,0 +1,22 @@
+.collapse {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  transition: grid-template-rows var(--ac-transition-normal), opacity var(--ac-transition-normal);
+  opacity: 0;
+}
+
+.collapse[data-state="open"] {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+
+.inner {
+  min-height: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .collapse {
+    transition: none;
+  }
+}

package/src/motion/Collapse.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+import styles from "./Collapse.module.css";
+
+/**
+ * Represents the configurable props for the {@link Collapse} component.
+ *
+ * @remarks
+ * Extends native `<div>` attributes so consumers can provide ARIA metadata,
+ * testing hooks, and custom classes while keeping the animated container typed.
+ */
+interface CollapseProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Whether the content is expanded.
+   */
+  open: boolean;
+  /**
+   * Content to show or hide with animation.
+   */
+  children: React.ReactNode;
+}
+
+/**
+ * Animated height collapse and expand using CSS grid-template-rows.
+ *
+ * @remarks
+ * Supports reduced motion through a CSS `prefers-reduced-motion` media query and keeps
+ * content mounted so assistive technologies and measurement logic remain stable.
+ *
+ * @example
+ * ```tsx
+ * <Collapse open={isExpanded}>
+ *   <p>Collapsible content</p>
+ * </Collapse>
+ * ```
+ */
+const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(({open, children, className, ...props}, ref) => (
+  <div
+    ref={ref}
+    data-state={open ? "open" : "closed"}
+    className={cn(styles.collapse, className)}
+    {...props}>
+    <div className={styles.inner}>{children}</div>
+  </div>
+));
+Collapse.displayName = "Collapse";
+
+export {Collapse};
+export type {CollapseProps};

package/src/motion/Presence.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import {AnimatePresence} from "motion/react";
+import * as React from "react";
+
+/**
+ * Represents the configurable props for the {@link Presence} component.
+ */
+interface PresenceProps {
+  /**
+   * Whether the child should be mounted and visible.
+   */
+  present: boolean;
+  /**
+   * The animated child element.
+   */
+  children: React.ReactNode;
+  /**
+   * AnimatePresence mode.
+   * @default "sync"
+   */
+  mode?: "wait" | "sync" | "popLayout";
+}
+
+/**
+ * Simplified mount/unmount animation wrapper built on `AnimatePresence`.
+ *
+ * @example
+ * ```tsx
+ * <Presence present={isOpen}>
+ *   <motion.div {...fadeIn}>Content</motion.div>
+ * </Presence>
+ * ```
+ *
+ * @see {@link https://motion.dev/docs/react-animate-presence | motion AnimatePresence}
+ */
+function Presence({present, children, mode = "sync"}: Readonly<PresenceProps>): React.JSX.Element {
+  return <AnimatePresence mode={mode}>{present ? children : null}</AnimatePresence>;
+}
+
+Presence.displayName = "Presence";
+
+export {Presence};
+export type {PresenceProps};

package/src/motion/index.ts

@@ -0,0 +1,13 @@
+// Motion tokens
+export {durations, easings, type Duration, type Easing} from "./tokens";
+
+// Animation presets
+export {fadeIn, fadeInDown, fadeInUp, reducedMotion, scaleIn, slideInFromLeft, slideInFromRight} from "./presets";
+
+// Components
+export {Collapse, type CollapseProps} from "./Collapse";
+export {Presence, type PresenceProps} from "./Presence";
+
+// Re-exports from motion/react for convenience
+export {AnimatePresence, motion, stagger, useAnimate, useAnimation, useInView, useMotionValue, useSpring} from "motion/react";
+export type {HTMLMotionProps, SpringOptions, Transition, UseInViewOptions, Variant} from "motion/react";

package/src/motion/presets.ts

@@ -0,0 +1,77 @@
+import {durations, easings} from "./tokens";
+
+/**
+ * Reusable animation variant presets for common transitions.
+ * Each preset includes `initial`, `animate`, and `exit` states.
+ * All presets respect reduced-motion preferences when used with `useReducedMotion`.
+ */
+
+/**
+ * Fades content in and out without positional movement.
+ */
+export const fadeIn = {
+  initial: {opacity: 0},
+  animate: {opacity: 1},
+  exit: {opacity: 0},
+  transition: {duration: durations.normal, ease: easings.ease},
+} as const;
+
+/**
+ * Fades content upward into view.
+ */
+export const fadeInUp = {
+  initial: {opacity: 0, y: 8},
+  animate: {opacity: 1, y: 0},
+  exit: {opacity: 0, y: 8},
+  transition: {duration: durations.normal, ease: easings.easeOut},
+} as const;
+
+/**
+ * Fades content downward into view.
+ */
+export const fadeInDown = {
+  initial: {opacity: 0, y: -8},
+  animate: {opacity: 1, y: 0},
+  exit: {opacity: 0, y: -8},
+  transition: {duration: durations.normal, ease: easings.easeOut},
+} as const;
+
+/**
+ * Fades and scales content into view.
+ */
+export const scaleIn = {
+  initial: {opacity: 0, scale: 0.95},
+  animate: {opacity: 1, scale: 1},
+  exit: {opacity: 0, scale: 0.95},
+  transition: {duration: durations.fast, ease: easings.easeOut},
+} as const;
+
+/**
+ * Slides content in from the left.
+ */
+export const slideInFromLeft = {
+  initial: {opacity: 0, x: -16},
+  animate: {opacity: 1, x: 0},
+  exit: {opacity: 0, x: -16},
+  transition: {duration: durations.slow, ease: easings.easeOut},
+} as const;
+
+/**
+ * Slides content in from the right.
+ */
+export const slideInFromRight = {
+  initial: {opacity: 0, x: 16},
+  animate: {opacity: 1, x: 0},
+  exit: {opacity: 0, x: 16},
+  transition: {duration: durations.slow, ease: easings.easeOut},
+} as const;
+
+/**
+ * No-op preset for reduced motion — instant state change, no animation.
+ */
+export const reducedMotion = {
+  initial: {},
+  animate: {},
+  exit: {},
+  transition: {duration: 0},
+} as const;

package/src/motion/tokens.ts

@@ -0,0 +1,37 @@
+/**
+ * Standard motion duration constants in seconds.
+ * Aligned with `--ac-transition-*` CSS custom properties in `index.css`.
+ *
+ * @example
+ * ```tsx
+ * <motion.div animate={{opacity: 1}} transition={{duration: durations.normal}} />
+ * ```
+ */
+export const durations = {
+  fast: 0.1,
+  normal: 0.15,
+  slow: 0.2,
+  slower: 0.3,
+  slowest: 0.5,
+} as const;
+
+/**
+ * Standard easing curves for consistent motion across the library.
+ */
+export const easings = {
+  ease: [0.25, 0.1, 0.25, 1.0],
+  easeIn: [0.42, 0, 1.0, 1.0],
+  easeOut: [0, 0, 0.58, 1.0],
+  easeInOut: [0.42, 0, 0.58, 1.0],
+  spring: {type: "spring" as const, stiffness: 300, damping: 24},
+} as const;
+
+/**
+ * Represents a named motion duration token.
+ */
+export type Duration = keyof typeof durations;
+
+/**
+ * Represents a named motion easing token.
+ */
+export type Easing = keyof typeof easings;

package/src/hooks/useIsMobile.test.tsx

@@ -1,96 +0,0 @@
-import {act, renderHook} from "@testing-library/react";
-import {beforeEach, describe, expect, it, vi} from "vitest";
-import {useIsMobile} from "./useIsMobile";
-
-describe("useIsMobile", () => {
-  beforeEach(() => {
-    vi.stubGlobal("innerWidth", 1024);
-    vi.stubGlobal(
-      "matchMedia",
-      vi.fn().mockImplementation((query: string) => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addListener: vi.fn(), // Deprecated
-        removeListener: vi.fn(), // Deprecated
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-        dispatchEvent: vi.fn(),
-      })),
-    );
-  });
-
-  it("should return false initially on desktop", () => {
-    vi.stubGlobal("innerWidth", 1024);
-    const {result} = renderHook(() => useIsMobile());
-    expect(result.current).toBe(false);
-  });
-
-  it("should return true initially on mobile", () => {
-    vi.stubGlobal("innerWidth", 500);
-    const {result} = renderHook(() => useIsMobile());
-    expect(result.current).toBe(true);
-  });
-
-  it("should update when window is resized", () => {
-    let changeHandler: () => void = () => {};
-    const addEventListener = vi.fn((event: string, handler: () => void) => {
-      if (event === "change") changeHandler = handler;
-    });
-
-    vi.stubGlobal(
-      "matchMedia",
-      vi.fn().mockImplementation((query: string) => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addListener: vi.fn(),
-        removeListener: vi.fn(),
-        addEventListener,
-        removeEventListener: vi.fn(),
-        dispatchEvent: vi.fn(),
-      })),
-    );
-
-    const {result} = renderHook(() => useIsMobile());
-    expect(result.current).toBe(false);
-
-    // Simulate resize
-    vi.stubGlobal("innerWidth", 500);
-    act(() => {
-      changeHandler();
-    });
-
-    expect(result.current).toBe(true);
-
-    // Simulate resize back to desktop
-    vi.stubGlobal("innerWidth", 1024);
-    act(() => {
-      changeHandler();
-    });
-
-    expect(result.current).toBe(false);
-  });
-
-  it("should cleanup event listener on unmount", () => {
-    const removeEventListener = vi.fn();
-    vi.stubGlobal(
-      "matchMedia",
-      vi.fn().mockImplementation((query: string) => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addListener: vi.fn(),
-        removeListener: vi.fn(),
-        addEventListener: vi.fn(),
-        removeEventListener,
-        dispatchEvent: vi.fn(),
-      })),
-    );
-
-    const {unmount} = renderHook(() => useIsMobile());
-    unmount();
-
-    expect(removeEventListener).toHaveBeenCalledWith("change", expect.any(Function));
-  });
-});

package/src/hooks/useWindowSize.test.tsx

@@ -1,57 +0,0 @@
-import {act, renderHook} from "@testing-library/react";
-import {describe, expect, it, vi} from "vitest";
-import {useWindowSize} from "./useWindowSize";
-
-describe("useWindowSize", () => {
-  it("should return initial window size on mount", () => {
-    vi.stubGlobal("innerWidth", 1024);
-    vi.stubGlobal("innerHeight", 768);
-
-    const {result} = renderHook(() => useWindowSize());
-
-    expect(result.current.windowSize).toEqual({width: 1024, height: 768});
-    expect(result.current.isMobile).toBe(false);
-    expect(result.current.isDesktop).toBe(true);
-  });
-
-  it("should return mobile state when width is below breakpoint", () => {
-    vi.stubGlobal("innerWidth", 500);
-    vi.stubGlobal("innerHeight", 800);
-
-    const {result} = renderHook(() => useWindowSize());
-
-    expect(result.current.windowSize).toEqual({width: 500, height: 800});
-    expect(result.current.isMobile).toBe(true);
-    expect(result.current.isDesktop).toBe(false);
-  });
-
-  it("should update window size on resize", () => {
-    vi.stubGlobal("innerWidth", 1024);
-    vi.stubGlobal("innerHeight", 768);
-
-    const {result} = renderHook(() => useWindowSize());
-
-    expect(result.current.windowSize.width).toBe(1024);
-
-    // Simulate resize
-    vi.stubGlobal("innerWidth", 500);
-    vi.stubGlobal("innerHeight", 800);
-
-    act(() => {
-      globalThis.dispatchEvent(new Event("resize"));
-    });
-
-    expect(result.current.windowSize).toEqual({width: 500, height: 800});
-    expect(result.current.isMobile).toBe(true);
-    expect(result.current.isDesktop).toBe(false);
-  });
-
-  it("should cleanup event listener on unmount", () => {
-    const removeEventListenerSpy = vi.spyOn(globalThis, "removeEventListener");
-    const {unmount} = renderHook(() => useWindowSize());
-
-    unmount();
-
-    expect(removeEventListenerSpy).toHaveBeenCalledWith("resize", expect.any(Function));
-  });
-});