@momentumworld/ui-react 0.17.0

package/src/lib/hooks/use-callback-ref.ts

@@ -0,0 +1,15 @@
+"use client";
+
+import { useRef } from "react";
+
+// biome-ignore lint/suspicious/noExplicitAny: Generic shinanigans
+function useCallbackRef<T extends (...args: Array<any>) => any>(fn: T): T {
+  const fnRef = useRef(fn);
+  fnRef.current = fn;
+
+  // biome-ignore lint/suspicious/noExplicitAny: Generic shinanigans
+  const ref = useRef((...args: Array<any>) => fnRef.current(...args));
+  return ref.current as T;
+}
+
+export default useCallbackRef;

package/src/lib/hooks/use-first-render.ts

@@ -0,0 +1,11 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function useFirstRender() {
+  const [firstRender, setFirstRender] = useState(true);
+  useEffect(() => {
+    setFirstRender(false);
+  }, []);
+  return firstRender;
+}

package/src/lib/hooks/use-hover.ts

@@ -0,0 +1,53 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+
+export function useHover<T extends Element>({
+  mounted = true,
+}: {
+  mounted?: boolean;
+} = {}): readonly [(node: T | null) => void, boolean] {
+  const [hovering, setHovering] = useState(false);
+  const previousNode = useRef<T | null>(null);
+
+  const [prevMounted, setPrevMounted] = useState(mounted);
+  if (mounted !== prevMounted) {
+    setPrevMounted(mounted);
+    if (!mounted) {
+      setHovering(false);
+    }
+  }
+
+  const handleMouseEnter = useCallback(() => {
+    setHovering(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setHovering(false);
+  }, []);
+
+  const customRef = useCallback<React.RefCallback<T>>(
+    (node) => {
+      if (previousNode.current?.nodeType === Node.ELEMENT_NODE) {
+        previousNode.current.removeEventListener(
+          "mouseenter",
+          handleMouseEnter,
+        );
+        previousNode.current.removeEventListener(
+          "mouseleave",
+          handleMouseLeave,
+        );
+      }
+
+      if (node?.nodeType === Node.ELEMENT_NODE) {
+        node.addEventListener("mouseenter", handleMouseEnter);
+        node.addEventListener("mouseleave", handleMouseLeave);
+      }
+
+      previousNode.current = node;
+    },
+    [handleMouseEnter, handleMouseLeave],
+  );
+
+  return [customRef, hovering] as const;
+}

package/src/lib/hooks/use-is-tab-active.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+const subscribe = (onVisibilityChange: () => void) => {
+  window.addEventListener("visibilitychange", onVisibilityChange);
+  return () =>
+    window.removeEventListener("visibilitychange", onVisibilityChange);
+};
+const getSnapshot = () => !document.hidden;
+const getServerSnapshot = () => true;
+
+function useIsTabActive() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+export default useIsTabActive;

package/src/lib/hooks/use-media-query.ts

@@ -0,0 +1,164 @@
+"use client";
+
+import { useCallback, useLayoutEffect, useSyncExternalStore } from "react";
+import { create } from "zustand";
+import { useFirstRender } from "./use-first-render";
+
+const breakpoints = ["sm", "md", "lg", "xl", "2xl"] as const;
+type Breakpoints = (typeof breakpoints)[number];
+
+const useBreakpointsStore = create<
+  {
+    [breakpoint in Breakpoints as `is${Capitalize<breakpoint>}`]: boolean;
+  } & {
+    [breakpoint in Breakpoints as `setIs${Capitalize<breakpoint>}`]: (
+      value: boolean,
+    ) => void;
+  }
+>((set) => ({
+  isSm: false,
+  isMd: false,
+  isLg: false,
+  isXl: false,
+  is2xl: false,
+  setIsSm: (value: boolean) => set({ isSm: value }),
+  setIsMd: (value: boolean) => set({ isMd: value }),
+  setIsLg: (value: boolean) => set({ isLg: value }),
+  setIsXl: (value: boolean) => set({ isXl: value }),
+  setIs2xl: (value: boolean) => set({ is2xl: value }),
+}));
+
+const getBreakpointValue = (breakpoint: Breakpoints) =>
+  getComputedStyle(document.documentElement).getPropertyValue(
+    `--breakpoint-${breakpoint}`,
+  );
+
+const setters = {
+  sm: "setIsSm" as const,
+  md: "setIsMd" as const,
+  lg: "setIsLg" as const,
+  xl: "setIsXl" as const,
+  "2xl": "setIs2xl" as const,
+};
+
+function useSyncWithStore(breakpoint: Breakpoints) {
+  const setBreakpoint = useBreakpointsStore(
+    (state) => state[setters[breakpoint]],
+  );
+  useLayoutEffect(() => {
+    const matchMedia = window.matchMedia(
+      `(min-width: ${getBreakpointValue(breakpoint)})`,
+    );
+    matchMedia.addEventListener("change", () => {
+      setBreakpoint(matchMedia.matches);
+    });
+    setBreakpoint(matchMedia.matches);
+    return () => {
+      matchMedia.removeEventListener("change", () => {
+        setBreakpoint(matchMedia.matches);
+      });
+    };
+  }, [breakpoint, setBreakpoint]);
+}
+
+// It could be lazy
+export function useSubscribeBreakpoints() {
+  useSyncWithStore("sm");
+  useSyncWithStore("md");
+  useSyncWithStore("lg");
+  useSyncWithStore("xl");
+  useSyncWithStore("2xl");
+}
+
+interface UseMediaQueryOptions {
+  ssr?: boolean;
+  defaultSSRValue?: boolean;
+}
+
+export function useMediaQuery(
+  query: string,
+  { ssr = false, defaultSSRValue = false }: UseMediaQueryOptions = {},
+) {
+  const subscribe = useCallback(
+    (callback: (m: MediaQueryListEvent) => void) => {
+      const matchMedia = window.matchMedia(query);
+
+      matchMedia.addEventListener("change", callback);
+      return () => {
+        matchMedia.removeEventListener("change", callback);
+      };
+    },
+    [query],
+  );
+
+  const getSnapshot = () => window.matchMedia(query).matches;
+
+  const getServerSnapshot = () => defaultSSRValue;
+
+  const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const isFirstRender = useFirstRender();
+  if (ssr && isFirstRender) {
+    return defaultSSRValue;
+  }
+  return value;
+}
+
+export function useIsSm({
+  ssr = false,
+  defaultSSRValue = false,
+}: UseMediaQueryOptions = {}) {
+  const isFirstRender = useFirstRender();
+  const isSm = useBreakpointsStore((state) => state.isSm);
+  if (ssr && isFirstRender) {
+    return defaultSSRValue;
+  }
+  return isSm;
+}
+
+export function useIsMd({
+  ssr = false,
+  defaultSSRValue = false,
+}: UseMediaQueryOptions = {}) {
+  const isFirstRender = useFirstRender();
+  const isMd = useBreakpointsStore((state) => state.isMd);
+  if (ssr && isFirstRender) {
+    return defaultSSRValue;
+  }
+  return isMd;
+}
+
+export function useIsLg({
+  ssr = false,
+  defaultSSRValue = false,
+}: UseMediaQueryOptions = {}) {
+  const isFirstRender = useFirstRender();
+  const isLg = useBreakpointsStore((state) => state.isLg);
+  if (ssr && isFirstRender) {
+    return defaultSSRValue;
+  }
+  return isLg;
+}
+
+export function useIsXl({
+  ssr = false,
+  defaultSSRValue = false,
+}: UseMediaQueryOptions = {}) {
+  const isFirstRender = useFirstRender();
+  const isXl = useBreakpointsStore((state) => state.isXl);
+  if (ssr && isFirstRender) {
+    return defaultSSRValue;
+  }
+  return isXl;
+}
+
+export function useIs2xl({
+  ssr = false,
+  defaultSSRValue = false,
+}: UseMediaQueryOptions = {}) {
+  const isFirstRender = useFirstRender();
+  const is2xl = useBreakpointsStore((state) => state.is2xl);
+  if (ssr && isFirstRender) {
+    return defaultSSRValue;
+  }
+  return is2xl;
+}

package/src/lib/utils/css.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/styles.css

@@ -0,0 +1,329 @@
+/*
+ * Country Club UI Kit — design system stylesheet (Tailwind CSS v4).
+ *
+ * Usage (in your app's global CSS):
+ *
+ *   @import "tailwindcss";
+ *   @import "@countryclub/ui-react/styles.css";
+ *   @source "../node_modules/@countryclub/ui-react/src";
+ *
+ * Dark mode is driven by the `data-theme="dark"` attribute on <html>.
+ */
+
+@import "tw-animate-css";
+
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+/*
+ * Emitted unconditionally (NOT inside @theme) so AuroraText's gradient sweep
+ * runs in every consumer — even when their Tailwind build doesn't generate the
+ * `animate-aurora` utility from the theme token (keyframes declared inside
+ * @theme are dropped unless that utility is scanned/used). AuroraText applies
+ * this keyframe via an inline `animation`, so it no longer depends on the
+ * utility class existing at all.
+ */
+@keyframes aurora {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+@theme inline {
+  --animate-skeleton: skeleton 2s -1s infinite linear;
+  --animate-qr-scan: qr-scan 2.6s ease-in-out infinite alternate;
+  --animate-aurora: aurora 10s ease infinite;
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning: var(--warning);
+  --color-success-foreground: var(--success-foreground);
+  --color-success: var(--success);
+  --color-info-foreground: var(--info-foreground);
+  --color-info: var(--info);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --color-brand: var(--brand);
+  --color-page-bg: var(--color-page-bg);
+  --radius-xs: calc(var(--radius) - 8px);
+  --radius-sm: calc(var(--radius) - 6px);
+  --radius-md: calc(var(--radius) - 4px);
+  --radius-lg: calc(var(--radius) - 2px);
+  --radius: var(--radius);
+  --radius-xl: calc(var(--radius) + 2px);
+  --radius-2xl: calc(var(--radius) + 6px);
+  --radius-3xl: calc(var(--radius) + 14px);
+  --radius-4xl: calc(var(--radius) + 22px);
+  @keyframes skeleton {
+    to {
+      background-position: -200% 0;
+    }
+  }
+  /* The scan band is half the overlay tall with its line at its own center;
+     -50% → 150% makes that line sweep exactly edge-to-edge. */
+  @keyframes qr-scan {
+    from {
+      transform: translateY(-50%);
+    }
+    to {
+      transform: translateY(150%);
+    }
+  }
+  /* AuroraText: sweep the oversized gradient back and forth across the glyphs. */
+  @keyframes aurora {
+    0%,
+    100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
+  --font-sans: "DM Sans", sans-serif;
+  --font-serif: "Fraunces", sans-serif;
+}
+
+@utility text-xl {
+  @apply font-serif;
+
+  &.font-sans {
+    @apply font-sans;
+  }
+}
+
+@utility text-2xl {
+  @apply font-serif;
+
+  &.font-sans {
+    @apply font-sans;
+  }
+}
+
+@utility text-3xl {
+  @apply font-serif;
+
+  &.font-sans {
+    @apply font-sans;
+  }
+}
+
+@utility text-4xl {
+  @apply font-serif;
+
+  &.font-sans {
+    @apply font-sans;
+  }
+}
+
+@utility text-5xl {
+  @apply font-serif;
+
+  &.font-sans {
+    @apply font-sans;
+  }
+}
+
+@utility text-6xl {
+  @apply font-serif;
+
+  &.font-sans {
+    @apply font-sans;
+  }
+}
+
+@utility text-7xl {
+  @apply font-serif;
+
+  &.font-sans {
+    @apply font-sans;
+  }
+}
+
+@utility text-8xl {
+  @apply font-serif;
+
+  &.font-sans {
+    @apply font-sans;
+  }
+}
+
+@utility text-9xl {
+  @apply font-serif;
+
+  &.font-sans {
+    @apply font-sans;
+  }
+}
+
+:root,
+[data-theme="light"] {
+  --radius: 0.625rem;
+  --accent: rgb(12 10 9 / 0.04);
+  --accent-foreground: #120f0e;
+  --background: #fffefc;
+  --border: rgb(12 10 9 / 0.08);
+  --card: #fffefc;
+  --card-foreground: #120f0e;
+  --destructive: #bf4a37;
+  --foreground: #120f0e;
+  --info: #4a6fa5;
+  --info-foreground: #355280;
+  --input: rgb(12 10 9 / 0.1);
+  --muted: rgb(12 10 9 / 0.04);
+  --muted-foreground: #78716c;
+  --popover: #fffefc;
+  --popover-foreground: #120f0e;
+  --primary: #120f0e;
+  --primary-foreground: #fffefc;
+  --ring: rgb(12 10 9 / 0.25);
+  --secondary: rgb(12 10 9 / 0.04);
+  --secondary-foreground: #44403c;
+  --success: #3d7a4f;
+  --success-foreground: #2d5a3a;
+  --warning: #c48a1a;
+  --warning-foreground: #92600a;
+  --destructive-foreground: #943728;
+  --chart-1: #ea580c;
+  --chart-2: #0d9488;
+  --chart-3: #164e63;
+  --chart-4: #fbbf24;
+  --chart-5: #f59e0b;
+  --sidebar: #f6f4ef;
+  --sidebar-foreground: #78716c;
+  --sidebar-primary: #92600a;
+  --sidebar-primary-foreground: #fffefc;
+  --sidebar-accent: rgb(12 10 9 / 0.04);
+  --sidebar-accent-foreground: #120f0e;
+  --sidebar-border: rgb(12 10 9 / 0.06);
+  --sidebar-ring: #d4a84b;
+  --brand: #d4a84b;
+  --color-page-bg: #f6f4ef;
+}
+
+[data-theme="dark"] {
+  --destructive-foreground: #e8877a;
+  --accent: rgb(250 249 246 / 0.04);
+  --accent-foreground: #e7e5e4;
+  --background: #0c0a09;
+  --border: rgb(250 249 246 / 0.06);
+  --card: #120f0e;
+  --card-foreground: #faf9f6;
+  --destructive: #d4644f;
+  --foreground: #faf9f6;
+  --info: #7ba3d4;
+  --info-foreground: #a3c1e8;
+  --input: rgb(250 249 246 / 0.08);
+  --muted: rgb(250 249 246 / 0.04);
+  --muted-foreground: #a8a29e;
+  --popover: #120f0e;
+  --popover-foreground: #faf9f6;
+  --primary: #faf9f6;
+  --primary-foreground: #0c0a09;
+  --ring: rgb(250 249 246 / 0.25);
+  --secondary: rgb(250 249 246 / 0.04);
+  --secondary-foreground: #e7e5e4;
+  --success: #5aad6b;
+  --success-foreground: #7bc98a;
+  --warning: #e5b84a;
+  --warning-foreground: #f0cc6d;
+  --chart-1: #1d4ed8;
+  --chart-2: #10b981;
+  --chart-3: #f59e0b;
+  --chart-4: #a855f7;
+  --chart-5: #f43f5e;
+  --sidebar: #141110;
+  --sidebar-foreground: #a8a29e;
+  --sidebar-primary: #d4a84b;
+  --sidebar-primary-foreground: #0c0a09;
+  --sidebar-accent: rgb(250 249 246 / 0.04);
+  --sidebar-accent-foreground: #faf9f6;
+  --sidebar-border: rgb(250 249 246 / 0.05);
+  --sidebar-ring: #d4a84b;
+  --brand: #92600a;
+  --color-page-bg: #141110;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply relative m-0 font-sans text-foreground;
+    background-color: var(--color-page-bg);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  iframe {
+    color-scheme: normal;
+    @apply rounded-lg outline-border;
+  }
+}
+
+@layer utilities {
+  /* Forces Tailwind to emit the breakpoint variables that
+     `useSubscribeBreakpoints` reads at runtime. Do not remove. */
+  .__force-breakpoints {
+    content: var(--breakpoint-sm) var(--breakpoint-md) var(--breakpoint-lg)
+      var(--breakpoint-xl) var(--breakpoint-2xl);
+  }
+}
+
+/*
+ * Animated theme toggle (View Transitions API), used by <AnimatedThemeToggler>.
+ * Everything is scoped to `html[data-theme-vt="active"]`, which the component
+ * sets only while a toggle is in flight — so any other root view transitions
+ * in a consuming app (e.g. route transitions) are left untouched.
+ */
+html[data-theme-vt="active"]::view-transition-old(root),
+html[data-theme-vt="active"]::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+/*
+ * Start the incoming (new theme) snapshot fully clipped at the toggle origin.
+ * Without this there's a one-frame flash of the new theme between the
+ * pseudo-elements being created and the JS clip-path animation attaching on
+ * `transition.ready`. The component sets --theme-vt-x / --theme-vt-y; the WAAPI
+ * animation then takes over from this same collapsed origin (no visible seam).
+ */
+html[data-theme-vt="active"]::view-transition-new(root) {
+  clip-path: circle(0 at var(--theme-vt-x, 50%) var(--theme-vt-y, 50%));
+}
+
+html[data-theme-vt="active"]::view-transition-group(root) {
+  animation-duration: var(--theme-toggle-vt-duration, 400ms);
+}

package/src/types/helpers.ts

@@ -0,0 +1,24 @@
+export type AsChildProps<T extends keyof React.JSX.IntrinsicElements> = {
+  asChild?: boolean;
+  children?: React.ReactNode;
+} & React.PropsWithoutRef<React.JSX.IntrinsicElements[T]>;
+
+export type OmitUnknown<T> = {
+  [K in keyof T as unknown extends T[K] ? never : K]: T[K];
+};
+
+export type TailOptional<P extends any[]> = P extends [...infer H, infer T]
+  ? [...H] | [...H, T]
+  : never[];
+
+export type RequiredSubset<T, K extends keyof T> = Required<Pick<T, K>> &
+  Omit<T, K>;
+export type Tail<P extends any[], H extends any[]> = P extends H
+  ? void
+  : P extends [...H, infer T]
+    ? T
+    : void;
+
+export type NotNullValues<T> = {
+  [K in keyof T]: Exclude<T[K], null>;
+};

package/src/types/react.d.ts

@@ -0,0 +1,7 @@
+import "react";
+
+declare module "react" {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number | undefined;
+  }
+}