trix-ui 0.2.1 → 0.2.3

package/templates/composites/music-player-card.tsx

@@ -0,0 +1,571 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import {
+  Shuffle,
+  SkipBack,
+  Play,
+  Pause,
+  SkipForward,
+  Repeat,
+} from "lucide-react";
+
+export type MusicTrack = {
+  src: string;
+  title: string;
+  subtitle?: string;
+  imageSrc?: string;
+};
+
+export type MusicPlayerCardProps = {
+  imageSrc: string;
+  title: string;
+  subtitle?: string;
+
+  /** Audio source for single-track playback */
+  audioSrc?: string;
+
+  /** Optional playlist */
+  tracks?: MusicTrack[];
+
+  /** Optional File object for local playback */
+  audioFile?: File;
+
+  /** Initial index when using tracks (default 0) */
+  initialTrackIndex?: number;
+
+  /** Auto play on load (default false) */
+  autoPlay?: boolean;
+
+  /** Show file input to pick a local audio file */
+  showFileInput?: boolean;
+
+  /** 0 to 100 */
+  progress?: number;
+  currentTime?: string;
+  totalTime?: string;
+
+  onShuffle?: () => void;
+  onPrev?: () => void;
+  onPlay?: () => void;
+  onNext?: () => void;
+  onRepeat?: () => void;
+
+  onShuffleChange?: (enabled: boolean) => void;
+  onRepeatChange?: (enabled: boolean) => void;
+  onPlayStateChange?: (playing: boolean) => void;
+  onTrackChange?: (track: MusicTrack, index: number) => void;
+  onFileSelect?: (file: File) => void;
+
+  /** Toggle states */
+  isPlaying?: boolean;
+  isShuffleOn?: boolean;
+  isRepeatOn?: boolean;
+
+  /** Styling overrides */
+  className?: string;
+  imageWrapClassName?: string;
+  titleClassName?: string;
+  subtitleClassName?: string;
+
+  progressTrackClassName?: string;
+  progressFillClassName?: string;
+
+  controlsClassName?: string;
+  sideButtonClassName?: string;
+  midButtonClassName?: string;
+
+  accentClassName?: string; // default rose
+} & React.HTMLAttributes<HTMLDivElement>;
+
+const clamp = (n: number, min: number, max: number) => Math.max(min, Math.min(max, n));
+
+function formatTime(value: number): string {
+  if (!Number.isFinite(value) || value <= 0) return "0:00";
+  const minutes = Math.floor(value / 60);
+  const seconds = Math.floor(value % 60);
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+
+function useObjectUrl(file?: File): string | null {
+  const [url, setUrl] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    if (!file) {
+      setUrl(null);
+      return undefined;
+    }
+
+    const nextUrl = URL.createObjectURL(file);
+    setUrl(nextUrl);
+
+    return () => {
+      URL.revokeObjectURL(nextUrl);
+    };
+  }, [file]);
+
+  return url;
+}
+
+const MusicPlayerCardBase = React.forwardRef<HTMLDivElement, MusicPlayerCardProps>(
+  (
+    {
+      imageSrc,
+      title,
+      subtitle = "Unknown Artist",
+
+      audioSrc,
+      tracks,
+      audioFile,
+      initialTrackIndex = 0,
+      autoPlay = false,
+      showFileInput = false,
+
+      progress,
+      currentTime,
+      totalTime,
+
+      onShuffle,
+      onPrev,
+      onPlay,
+      onNext,
+      onRepeat,
+
+      onShuffleChange,
+      onRepeatChange,
+      onPlayStateChange,
+      onTrackChange,
+      onFileSelect,
+
+      isPlaying,
+      isShuffleOn,
+      isRepeatOn,
+
+      className,
+      imageWrapClassName,
+      titleClassName,
+      subtitleClassName,
+
+      progressTrackClassName,
+      progressFillClassName,
+
+      controlsClassName,
+      sideButtonClassName,
+      midButtonClassName,
+
+      accentClassName = "bg-rose-500",
+
+      ...props
+    },
+    ref
+  ) => {
+    const [internalPlaying, setInternalPlaying] = React.useState(false);
+    const [internalShuffle, setInternalShuffle] = React.useState(false);
+    const [internalRepeat, setInternalRepeat] = React.useState(false);
+    const [trackIndex, setTrackIndex] = React.useState(
+      clamp(initialTrackIndex, 0, Math.max((tracks?.length ?? 1) - 1, 0))
+    );
+    const [uploadedFile, setUploadedFile] = React.useState<File | null>(null);
+    const [currentTimeSec, setCurrentTimeSec] = React.useState(0);
+    const [durationSec, setDurationSec] = React.useState(0);
+    const audioRef = React.useRef<HTMLAudioElement | null>(null);
+    const shuffleHistoryRef = React.useRef<number[]>([]);
+
+    const isShuffle = isShuffleOn ?? internalShuffle;
+    const isRepeat = isRepeatOn ?? internalRepeat;
+    const playing = isPlaying ?? internalPlaying;
+
+    const playlist = tracks?.length ? tracks : [];
+    const fallbackTrack: MusicTrack = {
+      src: audioSrc ?? "",
+      title,
+      subtitle,
+      imageSrc,
+    };
+
+    const activeTrack = playlist.length
+      ? playlist[clamp(trackIndex, 0, playlist.length - 1)]
+      : fallbackTrack;
+
+    const propFileUrl = useObjectUrl(audioFile);
+    const uploadedFileUrl = useObjectUrl(uploadedFile ?? undefined);
+    const resolvedSrc = propFileUrl ?? uploadedFileUrl ?? activeTrack.src;
+    const isPlayable = Boolean(resolvedSrc);
+
+    const derivedProgress =
+      durationSec > 0 ? clamp((currentTimeSec / durationSec) * 100, 0, 100) : 0;
+    const pct = clamp(progress ?? derivedProgress, 0, 100);
+    const resolvedCurrentTime = currentTime ?? formatTime(currentTimeSec);
+    const resolvedTotalTime = totalTime ?? formatTime(durationSec);
+
+    const requestPlay = React.useCallback(
+      async (nextPlaying: boolean): Promise<void> => {
+        const audio = audioRef.current;
+        if (!audio || !resolvedSrc) {
+          return;
+        }
+
+        try {
+          if (nextPlaying) {
+            await audio.play();
+          } else {
+            audio.pause();
+          }
+        } catch {
+          if (isPlaying === undefined) {
+            setInternalPlaying(false);
+          }
+          onPlayStateChange?.(false);
+        }
+      },
+      [isPlaying, onPlayStateChange, resolvedSrc]
+    );
+
+    React.useEffect(() => {
+      const audio = audioRef.current;
+      if (!audio) return;
+
+      if (!resolvedSrc) {
+        audio.removeAttribute("src");
+        audio.load();
+        setCurrentTimeSec(0);
+        setDurationSec(0);
+        return;
+      }
+
+      audio.src = resolvedSrc;
+      audio.load();
+      setCurrentTimeSec(0);
+      setDurationSec(0);
+
+      if (autoPlay || playing) {
+        requestPlay(true);
+      }
+    }, [autoPlay, playing, requestPlay, resolvedSrc]);
+
+    React.useEffect(() => {
+      if (!resolvedSrc) return;
+      requestPlay(playing);
+    }, [playing, requestPlay, resolvedSrc]);
+
+    React.useEffect(() => {
+      if (!playlist.length) return;
+      const clampedIndex = clamp(trackIndex, 0, playlist.length - 1);
+      if (clampedIndex !== trackIndex) {
+        setTrackIndex(clampedIndex);
+      }
+    }, [playlist.length, trackIndex]);
+
+    React.useEffect(() => {
+      if (!playlist.length) return;
+      const nextTrack = playlist[clamp(trackIndex, 0, playlist.length - 1)];
+      onTrackChange?.(nextTrack, clamp(trackIndex, 0, playlist.length - 1));
+    }, [onTrackChange, playlist, trackIndex]);
+
+    const handleShuffleToggle = (): void => {
+      const next = !isShuffle;
+      if (isShuffleOn === undefined) {
+        setInternalShuffle(next);
+      }
+      if (!next) {
+        shuffleHistoryRef.current = [];
+      }
+      onShuffle?.();
+      onShuffleChange?.(next);
+    };
+
+    const handleRepeatToggle = (): void => {
+      const next = !isRepeat;
+      if (isRepeatOn === undefined) {
+        setInternalRepeat(next);
+      }
+      onRepeat?.();
+      onRepeatChange?.(next);
+    };
+
+    const handlePlayToggle = (): void => {
+      const next = !playing;
+      if (isPlaying === undefined) {
+        setInternalPlaying(next);
+      }
+      onPlay?.();
+      onPlayStateChange?.(next);
+    };
+
+    const moveToTrack = (index: number): void => {
+      if (!playlist.length) return;
+      const nextIndex = clamp(index, 0, playlist.length - 1);
+      setTrackIndex(nextIndex);
+      shuffleHistoryRef.current.push(trackIndex);
+    };
+
+    const pickRandomTrack = (): number => {
+      if (playlist.length <= 1) return trackIndex;
+      let nextIndex = trackIndex;
+      while (nextIndex === trackIndex) {
+        nextIndex = Math.floor(Math.random() * playlist.length);
+      }
+      return nextIndex;
+    };
+
+    const handleNext = (): void => {
+      if (!playlist.length) {
+        const audio = audioRef.current;
+        if (audio) {
+          audio.currentTime = 0;
+          if (playing) {
+            requestPlay(true);
+          }
+        }
+        onNext?.();
+        return;
+      }
+
+      if (isShuffle) {
+        moveToTrack(pickRandomTrack());
+      } else if (trackIndex < playlist.length - 1) {
+        moveToTrack(trackIndex + 1);
+      } else if (isRepeat) {
+        moveToTrack(0);
+      } else if (isPlaying === undefined) {
+        setInternalPlaying(false);
+      }
+
+      onNext?.();
+    };
+
+    const handlePrev = (): void => {
+      const audio = audioRef.current;
+      if (audio && audio.currentTime > 3) {
+        audio.currentTime = 0;
+        onPrev?.();
+        return;
+      }
+
+      if (!playlist.length) {
+        if (audio) {
+          audio.currentTime = 0;
+          if (playing) {
+            requestPlay(true);
+          }
+        }
+        onPrev?.();
+        return;
+      }
+
+      if (isShuffle && shuffleHistoryRef.current.length > 0) {
+        const previous = shuffleHistoryRef.current.pop();
+        if (previous !== undefined) {
+          setTrackIndex(previous);
+        }
+      } else if (trackIndex > 0) {
+        setTrackIndex(trackIndex - 1);
+      } else {
+        setTrackIndex(0);
+      }
+
+      onPrev?.();
+    };
+
+    const handleEnded = (): void => {
+      if (playlist.length === 0 && !resolvedSrc) {
+        return;
+      }
+
+      if (isRepeat) {
+        const audio = audioRef.current;
+        if (audio) {
+          audio.currentTime = 0;
+          requestPlay(true);
+        }
+        return;
+      }
+
+      if (playlist.length > 0) {
+        if (isShuffle) {
+          moveToTrack(pickRandomTrack());
+          return;
+        }
+
+        if (trackIndex < playlist.length - 1) {
+          moveToTrack(trackIndex + 1);
+          return;
+        }
+      }
+
+      if (isPlaying === undefined) {
+        setInternalPlaying(false);
+      }
+      onPlayStateChange?.(false);
+    };
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+      const file = event.target.files?.[0];
+      if (!file) return;
+      setUploadedFile(file);
+      onFileSelect?.(file);
+      if (isPlaying === undefined) {
+        setInternalPlaying(true);
+      }
+      onPlayStateChange?.(true);
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "bg-white p-5 rounded-3xl border border-stone-100 flex flex-col h-full",
+          "shadow-lg transition-all duration-500 ease-out",
+          "hover:-translate-y-1 hover:shadow-2xl",
+          className
+        )}
+        {...props}
+      >
+        <audio
+          ref={audioRef}
+          preload="metadata"
+          onTimeUpdate={(event) => {
+            const audio = event.currentTarget;
+            setCurrentTimeSec(audio.currentTime);
+          }}
+          onLoadedMetadata={(event) => {
+            const audio = event.currentTarget;
+            setDurationSec(audio.duration || 0);
+          }}
+          onEnded={handleEnded}
+        />
+        {/* Album Art */}
+        <div
+          className={cn(
+            "relative aspect-square rounded-2xl overflow-hidden mb-5 shadow-inner",
+            "ring-1 ring-black/5",
+            imageWrapClassName
+          )}
+        >
+          <img
+            src={activeTrack.imageSrc ?? imageSrc}
+            alt="Album Art"
+            loading="lazy"
+            decoding="async"
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-black/10" />
+
+          {/* Premium Glow */}
+          <div className="pointer-events-none absolute inset-0 opacity-0 hover:opacity-100 transition-opacity duration-700 bg-[radial-gradient(circle_at_30%_20%,rgba(255,255,255,0.18),transparent_55%)]" />
+        </div>
+
+        {showFileInput ? (
+          <label className="mb-4 inline-flex cursor-pointer items-center gap-2 text-[10px] font-semibold uppercase tracking-[0.2em] text-stone-400">
+            <span>Load audio</span>
+            <input
+              type="file"
+              accept="audio/*"
+              className="sr-only"
+              onChange={handleFileChange}
+            />
+          </label>
+        ) : null}
+
+        {/* Text */}
+        <div className="mb-4">
+          <h3 className={cn("text-lg font-bold text-stone-800 truncate", titleClassName)}>
+            {activeTrack.title ?? title}
+          </h3>
+          <p
+            className={cn(
+              "text-stone-400 text-xs font-medium uppercase tracking-wide truncate",
+              subtitleClassName
+            )}
+          >
+            {activeTrack.subtitle ?? subtitle}
+          </p>
+        </div>
+
+        {/* Progress Bar */}
+        <div
+          className={cn(
+            "w-full bg-stone-100 h-1.5 rounded-full mb-2 overflow-hidden",
+            progressTrackClassName
+          )}
+        >
+          <div
+            className={cn(
+              "h-full rounded-full transition-all duration-500 ease-out",
+              accentClassName,
+              progressFillClassName
+            )}
+            style={{ width: `${pct}%` }}
+          />
+        </div>
+
+        <div className="flex justify-between text-[10px] text-stone-400 font-mono mb-4">
+          <span>{resolvedCurrentTime}</span>
+          <span>{resolvedTotalTime}</span>
+        </div>
+
+        {/* Controls */}
+        <div className={cn("flex justify-between items-center mt-auto px-2", controlsClassName)}>
+          <button
+            type="button"
+            onClick={handleShuffleToggle}
+            disabled={!playlist.length}
+            className={cn(
+              "text-stone-400 transition-colors hover:text-stone-800",
+              isShuffle && "text-stone-800",
+              sideButtonClassName
+            )}
+          >
+            <Shuffle className="h-5 w-5" />
+          </button>
+
+          <button
+            type="button"
+            onClick={handlePrev}
+            disabled={!isPlayable}
+            className={cn("text-stone-800 transition-colors hover:text-rose-500", midButtonClassName)}
+          >
+            <SkipBack className="h-8 w-8" />
+          </button>
+
+          <button
+            type="button"
+            onClick={handlePlayToggle}
+            disabled={!isPlayable}
+            className={cn(
+              "w-12 h-12 text-white rounded-full flex items-center justify-center shadow-lg",
+              "transition-all duration-300 ease-out hover:scale-105 active:scale-95",
+              accentClassName
+            )}
+          >
+            {playing ? <Pause className="h-6 w-6" /> : <Play className="h-6 w-6" />}
+          </button>
+
+          <button
+            type="button"
+            onClick={handleNext}
+            disabled={!isPlayable}
+            className={cn("text-stone-800 transition-colors hover:text-rose-500", midButtonClassName)}
+          >
+            <SkipForward className="h-8 w-8" />
+          </button>
+
+          <button
+            type="button"
+            onClick={handleRepeatToggle}
+            disabled={!isPlayable}
+            className={cn(
+              "text-stone-400 transition-colors hover:text-stone-800",
+              isRepeat && "text-stone-800",
+              sideButtonClassName
+            )}
+          >
+            <Repeat className="h-5 w-5" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+);
+
+MusicPlayerCardBase.displayName = "MusicPlayerCard";
+export const MusicPlayerCard = React.memo(MusicPlayerCardBase);

package/templates/composites/user-profile-card.tsx

@@ -0,0 +1,145 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { ArrowRight } from "lucide-react";
+
+type UserProfileCardTag = {
+  label: string;
+};
+
+export type UserProfileCardProps = {
+  name: string;
+  role: string;
+  avatarSrc: string;
+  avatarAlt?: string;
+
+  /** Example: [{ label: "Figma" }, { label: "Design Ops" }] */
+  tags?: UserProfileCardTag[];
+
+  /** You can pass "1.2k" directly OR number like 1200 */
+  followers?: string | number;
+
+  /** Online green dot */
+  online?: boolean;
+
+  /** Right action (arrow button) */
+  onActionClick?: () => void;
+  actionAriaLabel?: string;
+
+  className?: string;
+};
+
+function formatFollowers(value: string | number | undefined) {
+  if (value === undefined || value === null) return "";
+  if (typeof value === "string") return value;
+
+  // number formatting like 1200 -> 1.2k
+  const n = value;
+  if (n < 1000) return `${n}`;
+  if (n < 1_000_000) return `${(n / 1000).toFixed(n % 1000 === 0 ? 0 : 1)}k`;
+  return `${(n / 1_000_000).toFixed(n % 1_000_000 === 0 ? 0 : 1)}M`;
+}
+
+export function UserProfileCard({
+  name,
+  role,
+  avatarSrc,
+  avatarAlt = name,
+  tags = [],
+  followers = "1.2k",
+  online = true,
+  onActionClick,
+  actionAriaLabel = "Open profile",
+  className,
+}: UserProfileCardProps) {
+  return (
+    <Card
+      className={cn(
+        "w-[280px] rounded-[28px] bg-white shadow-[0_18px_60px_-35px_rgba(15,23,42,0.35)]",
+        "border border-neutral-100",
+        className
+      )}
+    >
+      <div className="px-6 pt-6 pb-5">
+        {/* Avatar */}
+        <div className="flex justify-center">
+          <div className="relative">
+            {/* Gradient ring */}
+            <div className="grid place-items-center rounded-full p-[3px] bg-gradient-to-br from-violet-500 to-indigo-500">
+              <div className="rounded-full bg-white p-[3px]">
+                <img
+                  src={avatarSrc}
+                  alt={avatarAlt}
+                  className="h-[74px] w-[74px] rounded-full object-cover"
+                  draggable={false}
+                />
+              </div>
+            </div>
+
+            {/* Online dot */}
+            {online && (
+              <span className="absolute bottom-[7px] right-[7px] h-3.5 w-3.5 rounded-full bg-emerald-500 ring-4 ring-white" />
+            )}
+          </div>
+        </div>
+
+        {/* Name + Role */}
+        <div className="mt-4 text-center">
+          <div className="text-[18px] font-semibold leading-tight text-slate-900">
+            {name}
+          </div>
+          <div className="mt-1 text-[11px] font-semibold tracking-[0.18em] text-indigo-500">
+            {role.toUpperCase()}
+          </div>
+        </div>
+
+        {/* Tags */}
+        {tags.length > 0 && (
+          <div className="mt-4 flex justify-center gap-2">
+            {tags.map((t, idx) => (
+              <Badge
+                key={`${t.label}-${idx}`}
+                variant="secondary"
+                className={cn(
+                  "rounded-full px-3 py-1 text-[10px] font-semibold tracking-widest",
+                  "bg-neutral-100 text-neutral-700 shadow-none border border-neutral-200"
+                )}
+              >
+                {t.label.toUpperCase()}
+              </Badge>
+            ))}
+          </div>
+        )}
+
+        {/* Bottom section */}
+        <div className="mt-6 flex items-end justify-between">
+          <div>
+            <div className="text-[10px] font-semibold tracking-[0.18em] text-neutral-300">
+              FOLLOWERS
+            </div>
+            <div className="mt-1 text-[16px] font-semibold text-slate-900">
+              {formatFollowers(followers)}
+            </div>
+          </div>
+
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={onActionClick}
+            aria-label={actionAriaLabel}
+            className={cn(
+              "h-10 w-10 rounded-full",
+              "text-violet-600 hover:text-violet-700",
+              "hover:bg-violet-50 active:bg-violet-100"
+            )}
+          >
+            <ArrowRight className="h-5 w-5" />
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+}