@momentumworld/ui-react 0.17.0

package/src/components/ui/video-player.tsx

@@ -0,0 +1,275 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  Maximize2Icon,
+  Minimize2Icon,
+  PauseIcon,
+  PlayIcon,
+  Volume2Icon,
+  VolumeXIcon,
+} from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+const videoPlayerVariants = cva(
+  "group relative overflow-hidden rounded-2xl bg-black ring-1 ring-inset ring-white/10",
+  {
+    defaultVariants: { size: "md" },
+    variants: {
+      size: {
+        sm: "w-full max-w-xs",
+        md: "w-full max-w-lg",
+        lg: "w-full max-w-2xl",
+      },
+    },
+  },
+);
+
+interface VideoPlayerProps
+  extends Omit<React.ComponentProps<"div">, "title">,
+    VariantProps<typeof videoPlayerVariants> {
+  src: string;
+  poster?: string;
+  title?: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+}
+
+function VideoPlayer({
+  className,
+  size,
+  src,
+  poster,
+  title,
+  autoPlay = false,
+  loop = false,
+  ...props
+}: VideoPlayerProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const videoRef = React.useRef<HTMLVideoElement>(null);
+  const hideTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const [playing, setPlaying] = React.useState(false);
+  const [currentTime, setCurrentTime] = React.useState(0);
+  const [duration, setDuration] = React.useState(0);
+  const [muted, setMuted] = React.useState(false);
+  const [fullscreen, setFullscreen] = React.useState(false);
+  const [controlsVisible, setControlsVisible] = React.useState(true);
+
+  const clearHideTimer = () => {
+    if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+  };
+
+  const scheduleHide = React.useCallback(() => {
+    clearHideTimer();
+    hideTimerRef.current = setTimeout(() => setControlsVisible(false), 2500);
+  }, []);
+
+  React.useEffect(() => () => clearHideTimer(), []);
+
+  React.useEffect(() => {
+    if (!playing) {
+      clearHideTimer();
+      setControlsVisible(true);
+    }
+  }, [playing]);
+
+  React.useEffect(() => {
+    const handler = () => setFullscreen(!!document.fullscreenElement);
+    document.addEventListener("fullscreenchange", handler);
+    return () => document.removeEventListener("fullscreenchange", handler);
+  }, []);
+
+  const handleMouseMove = () => {
+    setControlsVisible(true);
+    if (playing) scheduleHide();
+  };
+
+  const handleMouseLeave = () => {
+    if (playing) setControlsVisible(false);
+  };
+
+  const togglePlay = () => {
+    const v = videoRef.current;
+    if (!v) return;
+    if (v.paused) {
+      v.play();
+    } else {
+      v.pause();
+    }
+  };
+
+  const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const v = videoRef.current;
+    if (!v) return;
+    const t = Number(e.target.value);
+    v.currentTime = t;
+    setCurrentTime(t);
+  };
+
+  const toggleMute = () => {
+    const v = videoRef.current;
+    if (!v) return;
+    v.muted = !v.muted;
+    setMuted(v.muted);
+  };
+
+  const toggleFullscreen = () => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (!document.fullscreenElement) {
+      el.requestFullscreen().catch(() => {});
+    } else {
+      document.exitFullscreen().catch(() => {});
+    }
+  };
+
+  const formatTime = (s: number) => {
+    if (!isFinite(s) || s < 0) return "0:00";
+    const m = Math.floor(s / 60);
+    const sec = Math.floor(s % 60);
+    return `${m}:${sec.toString().padStart(2, "0")}`;
+  };
+
+  const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(videoPlayerVariants({ size }), className)}
+      data-slot="video-player"
+      onMouseLeave={handleMouseLeave}
+      onMouseMove={handleMouseMove}
+      {...props}
+    >
+      {/* Video */}
+      <video
+        ref={videoRef}
+        autoPlay={autoPlay}
+        className="aspect-video w-full object-cover"
+        loop={loop}
+        playsInline
+        poster={poster}
+        src={src}
+        onEnded={() => setPlaying(false)}
+        onLoadedMetadata={() => {
+          const v = videoRef.current;
+          if (v) setDuration(v.duration);
+        }}
+        onPause={() => setPlaying(false)}
+        onPlay={() => {
+          setPlaying(true);
+          scheduleHide();
+        }}
+        onTimeUpdate={() => {
+          const v = videoRef.current;
+          if (v) setCurrentTime(v.currentTime);
+        }}
+        onClick={togglePlay}
+      />
+
+      {/* Center play overlay — visible when paused */}
+      {!playing && (
+        <button
+          className="absolute inset-0 flex cursor-pointer items-center justify-center bg-black/20"
+          data-slot="video-player-overlay"
+          type="button"
+          onClick={togglePlay}
+        >
+          <span className="flex size-14 items-center justify-center rounded-full bg-white/90 text-black shadow-lg ring-1 ring-inset ring-white/20 backdrop-blur-sm transition-transform hover:scale-105">
+            <PlayIcon className="size-5 translate-x-0.5" />
+          </span>
+        </button>
+      )}
+
+      {/* Controls */}
+      <div
+        className={cn(
+          "absolute inset-x-0 bottom-0 flex flex-col gap-2 bg-gradient-to-t from-black/70 via-black/30 to-transparent px-3 pb-3 pt-10 transition-opacity duration-200",
+          controlsVisible ? "opacity-100" : "opacity-0",
+        )}
+        data-slot="video-player-controls"
+      >
+        {/* Scrubber */}
+        <div className="relative flex items-center">
+          <div className="relative h-1 w-full overflow-hidden rounded-full bg-white/25">
+            <div
+              className="pointer-events-none h-full rounded-full bg-white"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+          <input
+            aria-label="Seek"
+            className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+            max={duration || 100}
+            min={0}
+            step={0.1}
+            type="range"
+            value={currentTime}
+            onChange={handleSeek}
+          />
+        </div>
+
+        {/* Button row */}
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-0.5">
+            <button
+              aria-label={playing ? "Pause" : "Play"}
+              className="flex size-7 items-center justify-center rounded-md text-white/80 transition-colors hover:bg-white/10 hover:text-white"
+              type="button"
+              onClick={togglePlay}
+            >
+              {playing ? (
+                <PauseIcon className="size-4" />
+              ) : (
+                <PlayIcon className="size-4" />
+              )}
+            </button>
+
+            <button
+              aria-label={muted ? "Unmute" : "Mute"}
+              className="flex size-7 items-center justify-center rounded-md text-white/80 transition-colors hover:bg-white/10 hover:text-white"
+              type="button"
+              onClick={toggleMute}
+            >
+              {muted ? (
+                <VolumeXIcon className="size-4" />
+              ) : (
+                <Volume2Icon className="size-4" />
+              )}
+            </button>
+
+            <span className="select-none pl-1 text-[11px] tabular-nums text-white/60">
+              {formatTime(currentTime)} / {formatTime(duration)}
+            </span>
+          </div>
+
+          <div className="flex items-center gap-1.5">
+            {title ? (
+              <span className="max-w-28 truncate text-[11px] font-medium text-white/50">
+                {title}
+              </span>
+            ) : null}
+
+            <button
+              aria-label={fullscreen ? "Exit fullscreen" : "Enter fullscreen"}
+              className="flex size-7 items-center justify-center rounded-md text-white/80 transition-colors hover:bg-white/10 hover:text-white"
+              type="button"
+              onClick={toggleFullscreen}
+            >
+              {fullscreen ? (
+                <Minimize2Icon className="size-4" />
+              ) : (
+                <Maximize2Icon className="size-4" />
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { VideoPlayer, videoPlayerVariants };

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="grow 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="grow 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,143 @@
+// 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/aurora-orb";
+export * from "./components/ui/aurora-text";
+export * from "./components/ui/autocomplete";
+export * from "./components/ui/avatar";
+export * from "./components/ui/avatar-group";
+export * from "./components/ui/animated-counter";
+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/date-picker";
+export * from "./components/ui/time-picker";
+export * from "./components/ui/card";
+export * from "./components/ui/carousel";
+export * from "./components/ui/chart";
+export * from "./components/ui/chat";
+export * from "./components/ui/chat-divider";
+export * from "./components/ui/checkbox";
+export * from "./components/ui/checkbox-group";
+export * from "./components/ui/collapsible";
+export * from "./components/ui/color-picker";
+export * from "./components/ui/combobox";
+export * from "./components/ui/command";
+export * from "./components/ui/confetti";
+export * from "./components/ui/context-meter";
+export * from "./components/ui/credit-card";
+export * from "./components/ui/data-table-paged";
+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/fab";
+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/help-tip";
+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/markdown";
+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/pipeline";
+export * from "./components/ui/segmented-control";
+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/thinking-orb";
+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";
+export * from "./components/layout/dashboard-topbar";
+
+// 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";