first commit

2026-07-17 21:48:37 +05:30
commit f85599dac5
124 changed files with 10775 additions and 0 deletions
@@ -0,0 +1,74 @@
+"use client";
+
+import { X } from "lucide-react";
+
+export function Modal({
+  title,
+  subtitle,
+  onClose,
+  children,
+  footer,
+  wide,
+}: {
+  title: string;
+  subtitle?: string;
+  onClose: () => void;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  wide?: boolean;
+}) {
+  return (
+    <div
+      className="fixed inset-0 z-[60] grid place-items-center bg-black/50 p-4 backdrop-blur-sm animate-fade-in"
+      onClick={onClose}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        onClick={(e) => e.stopPropagation()}
+        className={`flex max-h-[90dvh] w-full ${wide ? "max-w-xl" : "max-w-md"} flex-col overflow-hidden rounded-card border border-border bg-elevated shadow-pop animate-slide-up`}
+      >
+        <div className="flex shrink-0 items-start justify-between gap-3 border-b border-border px-5 py-4">
+          <div className="min-w-0">
+            <h2 className="truncate text-[16px] font-bold">{title}</h2>
+            {subtitle && <p className="mt-0.5 truncate text-[12.5px] text-muted">{subtitle}</p>}
+          </div>
+          <button onClick={onClose} className="focus-ring -mr-1 grid h-8 w-8 shrink-0 place-items-center rounded-control text-muted hover:bg-hover hover:text-ink" aria-label="Close">
+            <X size={18} />
+          </button>
+        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">{children}</div>
+        {footer && <div className="flex shrink-0 justify-end gap-2 border-t border-border px-5 py-3">{footer}</div>}
+      </div>
+    </div>
+  );
+}
+
+export function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <label className="mb-3 block">
+      <span className="mb-1 block text-[12px] font-semibold text-muted">{label}</span>
+      {children}
+    </label>
+  );
+}
+
+export const inputCls =
+  "w-full rounded-control border border-border bg-panel px-3 py-2 text-[14px] outline-none focus:border-border-strong placeholder:text-dim";
+
+export function PrimaryBtn({ children, onClick, disabled, type = "button" }: { children: React.ReactNode; onClick?: () => void; disabled?: boolean; type?: "button" | "submit" }) {
+  return (
+    <button type={type} onClick={onClick} disabled={disabled} className="focus-ring rounded-control bg-accent px-4 py-2 text-[13px] font-semibold text-accent-fg disabled:opacity-40">
+      {children}
+    </button>
+  );
+}
+
+export function GhostBtn({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) {
+  return (
+    <button onClick={onClick} className="focus-ring rounded-control border border-border px-4 py-2 text-[13px] font-semibold hover:bg-hover">
+      {children}
+    </button>
+  );
+}
@@ -0,0 +1,186 @@
+"use client";
+
+import clsx from "clsx";
+import type { PresenceState, User } from "@lynkd/messaging-inbox-sdk";
+
+/* ------------------------------ presence ------------------------------ */
+
+const presenceColor: Record<PresenceState, string> = {
+  active: "var(--c-success)",
+  away: "var(--c-warning)",
+  dnd: "var(--c-danger)",
+  offline: "var(--c-dim)",
+};
+
+export function PresenceDot({
+  state,
+  size = 10,
+  ring = "var(--c-surface)",
+}: {
+  state: PresenceState;
+  size?: number;
+  ring?: string;
+}) {
+  const filled = state === "active" || state === "dnd";
+  return (
+    <span
+      title={state}
+      style={{
+        width: size,
+        height: size,
+        boxShadow: `0 0 0 2px ${ring}`,
+        background: filled ? presenceColor[state] : "transparent",
+        border: filled ? "none" : `2px solid ${presenceColor[state]}`,
+      }}
+      className="inline-block rounded-full"
+    />
+  );
+}
+
+/* ------------------------------- avatar ------------------------------- */
+
+export function Avatar({
+  user,
+  size = 36,
+  showPresence = true,
+  rounded = "var(--r-control)",
+}: {
+  user: Pick<User, "avatarText" | "avatarColor" | "presence" | "name"> & { avatarUrl?: string };
+  size?: number;
+  showPresence?: boolean;
+  rounded?: string;
+}) {
+  return (
+    <span className="relative inline-flex shrink-0" style={{ width: size, height: size }}>
+      {user.avatarUrl ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={user.avatarUrl}
+          alt={user.name}
+          className="h-full w-full object-cover"
+          style={{ borderRadius: rounded }}
+        />
+      ) : (
+        <span
+          className="flex h-full w-full items-center justify-center font-semibold text-white"
+          style={{
+            background: user.avatarColor ?? "var(--c-elevated)",
+            borderRadius: rounded,
+            fontSize: size * 0.4,
+          }}
+        >
+          {user.avatarText}
+        </span>
+      )}
+      {showPresence && (
+        <span className="absolute -bottom-0.5 -right-0.5">
+          <PresenceDot state={user.presence} size={Math.max(9, size * 0.28)} />
+        </span>
+      )}
+    </span>
+  );
+}
+
+/* ------------------------------- badges ------------------------------- */
+
+export function CountBadge({ count, tone = "accent" }: { count: number; tone?: "accent" | "danger" }) {
+  if (!count) return null;
+  return (
+    <span
+      className={clsx(
+        "inline-flex min-w-[18px] items-center justify-center rounded-full px-1.5 text-[11px] font-bold leading-[18px]",
+        tone === "accent" ? "bg-accent text-accent-fg" : "bg-danger text-white",
+      )}
+    >
+      {count > 99 ? "99+" : count}
+    </span>
+  );
+}
+
+export function Chip({
+  children,
+  tone = "neutral",
+  className,
+}: {
+  children: React.ReactNode;
+  tone?: "neutral" | "accent" | "success" | "warning" | "danger" | "info";
+  className?: string;
+}) {
+  const tones: Record<string, string> = {
+    neutral: "bg-hover text-muted",
+    accent: "bg-accent-soft text-accent",
+    success: "text-success",
+    warning: "text-warning",
+    danger: "text-danger",
+    info: "text-info",
+  };
+  const bg: Record<string, string> = {
+    success: "rgba(62,207,142,0.12)",
+    warning: "rgba(245,181,68,0.12)",
+    danger: "rgba(242,85,90,0.12)",
+    info: "rgba(91,157,255,0.12)",
+    neutral: "",
+    accent: "",
+  };
+  return (
+    <span
+      className={clsx(
+        "inline-flex items-center gap-1 rounded-pill px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide",
+        tones[tone],
+        className,
+      )}
+      style={bg[tone] ? { background: bg[tone] } : undefined}
+    >
+      {children}
+    </span>
+  );
+}
+
+/* ---------------------------- icon button ----------------------------- */
+
+export function IconButton({
+  children,
+  label,
+  active,
+  onClick,
+  className,
+  badge,
+}: {
+  children: React.ReactNode;
+  label: string;
+  active?: boolean;
+  onClick?: () => void;
+  className?: string;
+  badge?: number;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      onClick={onClick}
+      className={clsx(
+        "focus-ring relative grid h-9 w-9 place-items-center rounded-control text-muted transition-colors hover:bg-hover hover:text-ink",
+        active && "bg-hover text-ink",
+        className,
+      )}
+    >
+      {children}
+      {!!badge && (
+        <span className="absolute -right-0.5 -top-0.5">
+          <CountBadge count={badge} tone="danger" />
+        </span>
+      )}
+    </button>
+  );
+}
+
+/* ------------------------------ tooltip-ish --------------------------- */
+
+export function SectionLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="px-3 pb-1 pt-3 text-[11px] font-bold uppercase tracking-[0.08em] text-dim">
+      {children}
+    </div>
+  );
+}