@cntyclub/ui-react 0.1.0

package/src/components/upload/avatar-upload-base.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { Progress as ProgressPrimitive } from "@base-ui/react";
+import { Transition } from "@headlessui/react";
+import clsx from "clsx";
+import { CloudUploadIcon, TrashIcon, UserIcon } from "lucide-react";
+import { useDropzone } from "react-dropzone";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { Button } from "../ui/button";
+import { SpinnerOnDemand } from "../ui/spinner-on-demand";
+
+export interface AvatarUploadBaseProps
+  extends Omit<React.ComponentProps<typeof Avatar>, "onDrop" | "children"> {
+  onDrop: (file: File) => void;
+  onDelete?: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  progress: number;
+  imageUrl: string | undefined;
+  initials: React.ReactNode;
+  alt: string;
+  avatarClassName?: string;
+  mode?: "image" | "image&video";
+}
+
+export function AvatarUploadBase({
+  onDrop,
+  onDelete,
+  disabled,
+  loading = false,
+  progress,
+  imageUrl,
+  initials,
+  alt,
+  className,
+  avatarClassName,
+  mode = "image",
+  ...props
+}: AvatarUploadBaseProps) {
+  const {
+    getRootProps,
+    getInputProps,
+    open: onDropOpen,
+    isDragActive,
+  } = useDropzone({
+    onDrop: ([file]) => file && onDrop(file),
+    noClick: true,
+    accept: {
+      "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"],
+      ...(mode === "image&video"
+        ? { "video/*": [".webm", ".mp4"] }
+        : undefined),
+    },
+    multiple: false,
+    disabled: disabled || loading,
+  });
+  const progressValue = Math.trunc(100 * Math.min(1, progress));
+
+  return (
+    <div
+      {...getRootProps()}
+      tabIndex={undefined}
+      className={clsx(
+        "relative flex items-center gap-3 rounded-full",
+        className,
+      )}
+    >
+      <input {...getInputProps()} />
+      <Avatar className={avatarClassName} key={imageUrl} {...props}>
+        <AvatarImage src={imageUrl} alt={alt} />
+        <AvatarFallback className="text-xl">
+          {initials || <UserIcon />}
+        </AvatarFallback>
+      </Avatar>
+      <div className="relative flex items-center gap-3 transition">
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={loading || disabled}
+          onClick={onDropOpen}
+          className="grow relative max-w-55 mx-auto"
+        >
+          <SpinnerOnDemand icon={<CloudUploadIcon />} isLoading={loading} />
+          Upload
+          <Transition
+            show={loading}
+            as={ProgressPrimitive.Root}
+            className="absolute inset-0 grow overflow-hidden rounded-[inherit] pointer-events-none"
+            style={{
+              // Fix overflow clipping in Safari
+              // https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0
+              transform: "translateZ(0)",
+            }}
+            value={progressValue}
+          >
+            <ProgressPrimitive.Track className="size-full">
+              <ProgressPrimitive.Indicator
+                className="duration-660 ease-[cubic-bezier(0.65,0,0.35,1)] size-full bg-accent/8 transition-transform"
+                style={{ transform: `translateX(-${100 - progressValue}%)` }}
+              />
+            </ProgressPrimitive.Track>
+          </Transition>
+        </Button>
+        {imageUrl && onDelete && (
+          <Button
+            disabled={disabled || loading}
+            size="icon-sm"
+            variant="outline"
+            onClick={onDelete}
+          >
+            <TrashIcon />
+            <span className="sr-only">Remove</span>
+          </Button>
+        )}
+      </div>
+      <Transition
+        as="div"
+        show={isDragActive}
+        className={clsx(
+          "pointer-events-none absolute inset-0 flex flex-col items-center justify-center rounded-2xl transition duration-200 [--opacity:1] data-closed:[--opacity:0]",
+          "bg-accent/[calc(var(--opacity)*8%)] ring-1 ring-border/[calc(var(--opacity)*100%)] backdrop-blur-[calc(var(--opacity)*var(--blur-sm))]",
+        )}
+      >
+        <CloudUploadIcon className="size-8 text-foreground/[calc(var(--opacity)*100%)] transition-colors" />
+        <p className="text-sm font-medium text-foreground/[calc(var(--opacity)*100%)] transition-colors">
+          Drop files here
+        </p>
+      </Transition>
+    </div>
+  );
+}

package/src/components/upload/image-upload-base.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { Progress as ProgressPrimitive } from "@base-ui/react";
+import { Transition } from "@headlessui/react";
+import clsx from "clsx";
+import { CloudUploadIcon, TrashIcon } from "lucide-react";
+import { useDropzone } from "react-dropzone";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { Button } from "../ui/button";
+import { SpinnerOnDemand } from "../ui/spinner-on-demand";
+
+export interface ImageUploadBaseProps
+  extends Omit<React.ComponentProps<"div">, "onDrop"> {
+  onDrop: (file: File) => void;
+  onDelete?: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  progress: number;
+  imageUrl: string | null;
+  alt: string;
+}
+
+export function ImageUploadBase({
+  onDrop,
+  onDelete,
+  disabled,
+  loading = false,
+  progress,
+  imageUrl,
+  alt,
+  className,
+  ...props
+}: ImageUploadBaseProps) {
+  const {
+    getRootProps,
+    getInputProps,
+    open: onDropOpen,
+    isDragActive,
+  } = useDropzone({
+    onDrop: ([file]) => file && onDrop(file),
+    noClick: true,
+    accept: {
+      "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"],
+    },
+    multiple: false,
+    disabled: disabled || loading,
+  });
+  const progressValue = Math.trunc(100 * Math.min(1, progress));
+
+  return (
+    <div
+      {...getRootProps()}
+      tabIndex={undefined}
+      data-slot="image-upload-root"
+      className={clsx(
+        "group/image-upload-root flex flex-col rounded-lg border-2 p-0.5 border-dashed border-input bg-muted/30 text-center transition-colors hover:border-muted-foreground/40 hover:bg-muted/50 has-data-[active=true]:border-primary/60 has-data-[active=true]:bg-primary/5",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex flex-col relative rounded-md">
+        <input {...getInputProps()} />
+        <Avatar
+          key={imageUrl ?? "none"}
+          className="peer/avatar absolute size-full inset-0 rounded-[inherit]"
+        >
+          {imageUrl && (
+            <AvatarImage key={imageUrl ?? "none"} src={imageUrl} alt={alt} />
+          )}
+          <AvatarFallback className="bg-linear-to-br from-muted to-background" />
+        </Avatar>
+        <div
+          data-active={loading || isDragActive}
+          className="flex justify-center items-center [--opacity:0] p-8 data-[active=true]:[--opacity:1] peer-has-data-[slot=avatar-fallback]/avatar:[--opacity:1] group-hover/image-upload-root:[--opacity:1] relative z-10 rounded-[inherit] bg-background/[calc(55%*var(--opacity))] backdrop-blur-[calc(var(--blur-xs)*var(--opacity))] gap-3 transition"
+        >
+          <Button
+            size="sm"
+            variant="outline"
+            disabled={loading || disabled}
+            onClick={onDropOpen}
+            className="grow relative max-w-32 opacity-(--opacity)"
+          >
+            <SpinnerOnDemand icon={<CloudUploadIcon />} isLoading={loading} />
+            {isDragActive ? "Drop files here" : "Upload"}
+            <Transition
+              show={loading}
+              as={ProgressPrimitive.Root}
+              className="absolute inset-0 opacity-(--opacity) grow overflow-hidden rounded-[inherit] pointer-events-none"
+              value={progressValue}
+            >
+              <ProgressPrimitive.Track className="size-full">
+                <ProgressPrimitive.Indicator className="duration-660 ease-[cubic-bezier(0.65,0,0.35,1)] size-full bg-accent/8 transition-all" />
+              </ProgressPrimitive.Track>
+            </Transition>
+          </Button>
+          {imageUrl && onDelete && !isDragActive && (
+            <Button
+              disabled={disabled || loading}
+              size="icon-sm"
+              variant="outline"
+              onClick={onDelete}
+              className="opacity-(--opacity)"
+              aria-label="Remove"
+            >
+              <TrashIcon />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/form.ts

@@ -0,0 +1,17 @@
+// Country Club UI Kit — TanStack Form bindings.
+// Import from "@countryclub/ui-react/form".
+
+export * from "./components/form/checkbox-group-field";
+export * from "./components/form/date-field";
+export * from "./components/form/date-range-field";
+export * from "./components/form/form";
+export {
+  appFieldContext,
+  appFormContext,
+  useAppFieldContext,
+  useAppFormContext,
+} from "./components/form/form-context";
+export * from "./components/form/number-field";
+export * from "./components/form/select-field";
+export * from "./components/form/submit-button";
+export * from "./components/form/text-field";

package/src/index.ts

@@ -0,0 +1,125 @@
+// Country Club UI Kit — React component library.
+// Design tokens live in ./styles.css (Tailwind CSS v4).
+
+// Core UI components
+export * from "./components/ui/accordion";
+export * from "./components/ui/alert";
+export * from "./components/ui/alert-dialog";
+export * from "./components/ui/animated-theme-toggler";
+export * from "./components/ui/app-store-buttons";
+export * from "./components/ui/aspect-ratio";
+export * from "./components/ui/autocomplete";
+export * from "./components/ui/avatar";
+export * from "./components/ui/avatar-group";
+export * from "./components/ui/badge";
+export * from "./components/ui/badge-group";
+export * from "./components/ui/breadcrumb";
+export * from "./components/ui/button";
+export * from "./components/ui/calendar";
+export * from "./components/ui/card";
+export * from "./components/ui/carousel";
+export * from "./components/ui/chart";
+export * from "./components/ui/checkbox";
+export * from "./components/ui/checkbox-group";
+export * from "./components/ui/collapsible";
+export * from "./components/ui/combobox";
+export * from "./components/ui/command";
+export * from "./components/ui/credit-card";
+export * from "./components/ui/drawer";
+export * from "./components/ui/context-menu";
+export * from "./components/ui/dialog";
+export * from "./components/ui/empty";
+export * from "./components/ui/featured-icon";
+export * from "./components/ui/field";
+export * from "./components/ui/fieldset";
+export * from "./components/ui/form";
+export * from "./components/ui/frame";
+export * from "./components/ui/generic-empty";
+export * from "./components/ui/group";
+export * from "./components/ui/horizontal-scroll-fader";
+export * from "./components/ui/input";
+export * from "./components/ui/input-group";
+export * from "./components/ui/input-otp";
+export * from "./components/ui/item";
+export * from "./components/ui/kbd";
+export * from "./components/ui/label";
+export * from "./components/ui/menu";
+export * from "./components/ui/menubar";
+export * from "./components/ui/meter";
+export * from "./components/ui/multi-select";
+export * from "./components/ui/navigation-menu";
+export * from "./components/ui/number-field";
+export * from "./components/ui/pagination";
+export * from "./components/ui/pagination-controls";
+export * from "./components/ui/popover";
+export * from "./components/ui/preview-card";
+export * from "./components/ui/progress";
+export * from "./components/ui/qr-code";
+export * from "./components/ui/radio-group";
+export * from "./components/ui/resizable";
+export * from "./components/ui/scroll-area";
+export * from "./components/ui/scroller";
+export * from "./components/ui/section-header";
+export * from "./components/ui/smooth-scroll";
+export * from "./components/ui/social-button";
+export * from "./components/ui/stepper";
+export * from "./components/ui/select";
+export * from "./components/ui/separator";
+export * from "./components/ui/sheet";
+export * from "./components/ui/sidebar";
+export * from "./components/ui/skeleton";
+export * from "./components/ui/slider";
+export * from "./components/ui/spinner";
+export * from "./components/ui/spinner-on-demand";
+export * from "./components/ui/stat";
+export * from "./components/ui/switch";
+export * from "./components/ui/table";
+export * from "./components/ui/tabs";
+export * from "./components/ui/tag";
+export { default as TargetCountdown } from "./components/ui/target-countdown";
+export * from "./components/ui/timeline";
+export * from "./components/ui/text-editor";
+export * from "./components/ui/textarea";
+export * from "./components/ui/toast";
+export * from "./components/ui/toggle";
+export {
+  ToggleGroup,
+  ToggleGroupItem,
+  ToggleGroupSeparator,
+} from "./components/ui/toggle-group";
+export * from "./components/ui/toolbar";
+export * from "./components/ui/tooltip";
+export * from "./components/ui/vertical-scroll-fader";
+export * from "./components/ui/video-player";
+
+// Layout components
+export * from "./components/layout/dashboard-header";
+export * from "./components/layout/dashboard-panel";
+
+// Theme
+export * from "./components/theme-provider";
+
+// Upload
+export * from "./components/upload/avatar-upload-base";
+export * from "./components/upload/image-upload-base";
+
+// Utilities
+export { cn } from "./lib/utils/css";
+
+// Hooks
+export { default as useCallbackRef } from "./lib/hooks/use-callback-ref";
+export { useFirstRender } from "./lib/hooks/use-first-render";
+export { useHover } from "./lib/hooks/use-hover";
+export { default as useIsTabActive } from "./lib/hooks/use-is-tab-active";
+export {
+  useIs2xl,
+  useIsLg,
+  useIsMd,
+  useIsSm,
+  useIsXl,
+  useMediaQuery,
+  useSubscribeBreakpoints,
+} from "./lib/hooks/use-media-query";
+
+// Type helpers
+export type * from "./types/helpers";

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));
+}