trix-ui 0.2.1 → 0.2.2

package/templates/composites/feature-collection-card.tsx

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type FeaturedCollectionCardProps = {
+    imageSrc: string;
+    title: string;
+
+    imageAlt?: string;
+    badgeText?: string;
+    description?: string;
+
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+
+    className?: string;
+    contentClassName?: string;
+
+    minHeightClassName?: string;
+    overlayClassName?: string;
+    imageHoverScaleClassName?: string;
+
+    badgeClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+
+    disableHoverReveal?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "onClick">;
+
+const FeaturedCollectionCardBase = React.forwardRef<HTMLDivElement, FeaturedCollectionCardProps>(
+    (
+        {
+            imageSrc,
+            title,
+            imageAlt = "Background",
+            badgeText = "Featured Collection",
+            description,
+            onClick,
+
+            minHeightClassName = "min-h-[300px]",
+            overlayClassName = "bg-gradient-to-t from-black/90 via-black/40 to-transparent",
+            imageHoverScaleClassName = "group-hover:scale-110",
+
+            badgeClassName = "text-cyan-400",
+            titleClassName,
+            descriptionClassName,
+
+            className,
+            contentClassName,
+            disableHoverReveal = false,
+
+            ...props
+        },
+        ref
+    ) => {
+        const motionWrap = disableHoverReveal
+            ? "translate-y-0"
+            : "translate-y-4 group-hover:translate-y-0 transition-transform duration-300";
+
+        return (
+            <div
+                ref={ref}
+                onClick={onClick}
+                className={cn(
+                    "group relative h-full rounded-2xl overflow-hidden shadow-lg cursor-pointer",
+                    minHeightClassName,
+                    className
+                )}
+                {...props}
+            >
+                <img
+                    src={imageSrc}
+                    alt={imageAlt}
+                    loading="lazy"
+                    decoding="async"
+                    className={cn(
+                        "absolute inset-0 h-full w-full object-cover transition-transform duration-700 will-change-transform",
+                        imageHoverScaleClassName
+                    )}
+                />
+
+                <div className={cn("absolute inset-0", overlayClassName)} />
+
+                <div className={cn("absolute bottom-0 left-0 w-full p-6", contentClassName)}>
+                    <div className={cn("transform", motionWrap)}>
+                        {badgeText && (
+                            <span className={cn("mb-2 block text-xs font-bold uppercase tracking-wider", badgeClassName)}>
+                                {badgeText}
+                            </span>
+                        )}
+
+                        <h3 className={cn("mb-2 text-2xl font-bold text-white", titleClassName)}>{title}</h3>
+
+                        {description && (
+                            <p
+                                className={cn(
+                                    "text-sm text-stone-400 overflow-hidden transition-all duration-300",
+                                    disableHoverReveal
+                                        ? "max-h-40 opacity-100"
+                                        : "max-h-0 opacity-0 group-hover:max-h-40 group-hover:opacity-100",
+                                    descriptionClassName
+                                )}
+                            >
+                                {description}
+                            </p>
+                        )}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+);
+
+FeaturedCollectionCardBase.displayName = "FeaturedCollectionCard";
+export const FeaturedCollectionCard = React.memo(FeaturedCollectionCardBase);

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

@@ -0,0 +1,221 @@
+  import * as React from "react";
+  import { cn } from "../../lib/utils";
+  import {
+    Shuffle,
+    SkipBack,
+    Play,
+    Pause,
+    SkipForward,
+    Repeat,
+  } from "lucide-react";
+
+  export type MusicPlayerCardProps = {
+    imageSrc: string;
+    title: string;
+    subtitle?: string;
+
+    /** 0 to 100 */
+    progress?: number;
+    currentTime?: string;
+    totalTime?: string;
+
+    onShuffle?: () => void;
+    onPrev?: () => void;
+    onPlay?: () => void;
+    onNext?: () => void;
+    onRepeat?: () => 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));
+
+  const MusicPlayerCardBase = React.forwardRef<HTMLDivElement, MusicPlayerCardProps>(
+    (
+      {
+        imageSrc,
+        title,
+        subtitle = "Unknown Artist",
+
+        progress = 0,
+        currentTime = "0:00",
+        totalTime = "0:00",
+
+        onShuffle,
+        onPrev,
+        onPlay,
+        onNext,
+        onRepeat,
+
+        isPlaying = false,
+        isShuffleOn = false,
+        isRepeatOn = false,
+
+        className,
+        imageWrapClassName,
+        titleClassName,
+        subtitleClassName,
+
+        progressTrackClassName,
+        progressFillClassName,
+
+        controlsClassName,
+        sideButtonClassName,
+        midButtonClassName,
+
+        accentClassName = "bg-rose-500",
+
+        ...props
+      },
+      ref
+    ) => {
+      const pct = clamp(progress, 0, 100);
+
+      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}
+        >
+          {/* Album Art */}
+          <div
+            className={cn(
+              "relative aspect-square rounded-2xl overflow-hidden mb-5 shadow-inner",
+              "ring-1 ring-black/5",
+              imageWrapClassName
+            )}
+          >
+            <img
+              src={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>
+
+          {/* Text */}
+          <div className="mb-4">
+            <h3 className={cn("text-lg font-bold text-stone-800 truncate", titleClassName)}>
+              {title}
+            </h3>
+            <p
+              className={cn(
+                "text-stone-400 text-xs font-medium uppercase tracking-wide truncate",
+                subtitleClassName
+              )}
+            >
+              {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>{currentTime}</span>
+            <span>{totalTime}</span>
+          </div>
+
+          {/* Controls */}
+          <div className={cn("flex justify-between items-center mt-auto px-2", controlsClassName)}>
+            <button
+              type="button"
+              onClick={onShuffle}
+              className={cn(
+                "text-stone-400 transition-colors hover:text-stone-800",
+                isShuffleOn && "text-stone-800",
+                sideButtonClassName
+              )}
+            >
+              <Shuffle className="h-5 w-5" />
+            </button>
+
+            <button
+              type="button"
+              onClick={onPrev}
+              className={cn("text-stone-800 transition-colors hover:text-rose-500", midButtonClassName)}
+            >
+              <SkipBack className="h-8 w-8" />
+            </button>
+
+            <button
+              type="button"
+              onClick={onPlay}
+              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
+              )}
+            >
+              {isPlaying ? <Pause className="h-6 w-6" /> : <Play className="h-6 w-6" />}
+            </button>
+
+            <button
+              type="button"
+              onClick={onNext}
+              className={cn("text-stone-800 transition-colors hover:text-rose-500", midButtonClassName)}
+            >
+              <SkipForward className="h-8 w-8" />
+            </button>
+
+            <button
+              type="button"
+              onClick={onRepeat}
+              className={cn(
+                "text-stone-400 transition-colors hover:text-stone-800",
+                isRepeatOn && "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>
+  );
+}