@viibestack/ui 0.7.6 → 0.7.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@viibestack/ui",
-  "version": "0.7.6",
-  "description": "Dependency-free React UI kit -- icons, core components (Button, Card, Input, Modal, etc.), gamification primitives (PointsDisplay, StreakCounter, Achievements, Leaderboard, fireReward), a real per-app data client for browser code (listRows/listRowsPage/getRow/upsertRow/deleteRow/captureClientError) plus server-safe variants for Route Handlers/Server Components (listRowsServer/listRowsPageServer/getRowServer/upsertRowServer/deleteRowServer/resolveAppIdByHostname), a real per-app end-user auth client (signUp/logIn/logOut/getCurrentUser/reportError), and a self-gating PoweredByBadge component -- backed by ViibeStack's own platform-managed data store.",
+  "version": "0.7.8",
+  "description": "Dependency-free React UI kit -- icons, core components (Button, Card, Input, Modal, etc.), a TeamGrid/TeamMemberCard people-grid pattern, gamification primitives (PointsDisplay, StreakCounter, Achievements, Leaderboard, fireReward), a real per-app data client for browser code (listRows/listRowsPage/getRow/upsertRow/deleteRow/captureClientError) plus server-safe variants for Route Handlers/Server Components (listRowsServer/listRowsPageServer/getRowServer/upsertRowServer/deleteRowServer/resolveAppIdByHostname), a real per-app end-user auth client (signUp/logIn/logOut/getCurrentUser/reportError), and a self-gating PoweredByBadge component -- backed by ViibeStack's own platform-managed data store.",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/badge.tsx

@@ -110,22 +110,43 @@ export function PoweredByBadge() {
           setDismissed(true);
         }}
         style={{
+          // Tap target is 2.75rem (44px, Apple's/Android's usual minimum
+          // recommendation) even though the visible glyph stays the same
+          // small size below -- was a literal 1rem (16px) box, reported as
+          // hard to hit on mobile. Negative margin cancels the extra size
+          // from the pill's own layout (this flex row centers on cross-axis
+          // with no fixed height, so a bigger child would otherwise stretch
+          // the whole badge taller) -- the button still visually reads as
+          // the same small pill, just easier to actually tap.
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          width: "1rem",
-          height: "1rem",
+          width: "2.75rem",
+          height: "2.75rem",
+          margin: "-0.875rem",
           padding: 0,
           border: "none",
           borderRadius: "9999px",
-          background: "rgba(255, 255, 255, 0.15)",
+          background: "transparent",
           color: "#fff",
           fontSize: "0.7rem",
           lineHeight: 1,
           cursor: "pointer",
         }}
       >
-        ✕
+        <span
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "1rem",
+            height: "1rem",
+            borderRadius: "9999px",
+            background: "rgba(255, 255, 255, 0.15)",
+          }}
+        >
+          &#x2715;
+        </span>
       </button>
     </span>
   );

package/src/index.ts

@@ -8,3 +8,4 @@ export * from "./gamification";
 export * from "./reward";
 export * from "./dashboard";
 export * from "./data-table";
+export * from "./team";

package/src/nav.tsx

@@ -115,20 +115,22 @@ export interface AppShellProps {
   /** Rendered at the bottom of the sidebar/drawer -- e.g. a user menu, sign-out button. */
   footer?: ReactNode;
   /**
-   * Set true to omit the built-in dark/light toggle row from the nav.
-   * Shown by default -- a real nav-integrated toggle beats every app
-   * reinventing one, and it doubles as the platform's recommended way to
-   * suppress the floating fallback toggle every app otherwise gets
-   * injected at build time (see template-patches.ts's THEME_TOGGLE_SCRIPT):
-   * both share the same data-vs="viibestack-theme-toggle" marker, so the
-   * fallback detects this one and backs off instead of adding a second,
-   * floating, duplicate button.
+   * Set true to render a dark/light toggle as a normal row in the nav.
+   * Off by default -- AppShell doesn't presume every app wants this
+   * specific row in this specific place; the platform's own dark/light
+   * requirement (every app must support both and let the end user switch)
+   * is satisfied independently by the floating fallback toggle every app
+   * gets at build time (see template-patches.ts's THEME_TOGGLE_SCRIPT)
+   * unless the app supplies its own. Pass true here for a nav-integrated
+   * toggle instead of that floating button -- it shares the exact same
+   * data-vs="viibestack-theme-toggle" marker, so the fallback detects it
+   * and backs off rather than adding a second, floating, duplicate one.
    */
-  hideThemeToggle?: boolean;
+  showThemeToggle?: boolean;
   children: ReactNode;
 }
 
-export function AppShell({ brand, nav, activeHref, renderLink, footer, hideThemeToggle, children }: AppShellProps) {
+export function AppShell({ brand, nav, activeHref, renderLink, footer, showThemeToggle, children }: AppShellProps) {
   const [mobileOpen, setMobileOpen] = useState(false);
   const [mounted, setMounted] = useState(false);
 
@@ -196,7 +198,7 @@ export function AppShell({ brand, nav, activeHref, renderLink, footer, hideTheme
         <div className="px-4 py-4 text-lg font-semibold text-gray-900 dark:text-gray-100">{brand}</div>
         <nav className="flex flex-col gap-1 overflow-y-auto px-3 pb-3">
           {nav.map((item, i) => renderItem(item, i))}
-          {!hideThemeToggle && mounted && <ThemeToggleItem />}
+          {showThemeToggle && mounted && <ThemeToggleItem />}
         </nav>
         {footer && <div className="mt-auto border-t border-gray-200 p-3 dark:border-gray-800">{footer}</div>}
       </aside>
@@ -241,7 +243,7 @@ export function AppShell({ brand, nav, activeHref, renderLink, footer, hideTheme
               </div>
               <nav className="flex flex-col gap-1 px-3 pb-3">
                 {nav.map((item, i) => renderItem(item, i, () => setMobileOpen(false)))}
-                {!hideThemeToggle && <ThemeToggleItem />}
+                {showThemeToggle && <ThemeToggleItem />}
               </nav>
               {footer && <div className="mt-auto border-t border-gray-200 p-3 dark:border-gray-800">{footer}</div>}
             </div>

package/src/team.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+// Team/people-grid building block -- TeamMemberCard, TeamGrid. A distinct,
+// later-added vocabulary (same rationale as dashboard.tsx) for "who's on
+// this" pages: about pages, staff directories, contributor/leaderboard-
+// adjacent listings. Original implementation -- conceptually informed by
+// the general "avatar + name + role + optional bio + optional links" shape
+// common to team-showcase page sections, not copied markup/CSS from any
+// one source (see packages/design-library's README for this platform's
+// design-provenance conventions). Deliberately no baked-in social-network
+// icon set -- `links` is a generic {label, href, icon?} array so this
+// doesn't force which platforms (or how many) a member's links cover.
+import type { ReactNode } from "react";
+import { Avatar } from "./components";
+
+function cx(...parts: (string | false | null | undefined)[]): string {
+  return parts.filter(Boolean).join(" ");
+}
+
+export interface TeamMemberLink {
+  label: string;
+  href: string;
+  icon?: ReactNode;
+}
+
+export interface TeamMember {
+  name: string;
+  role?: ReactNode;
+  avatarSrc?: string;
+  bio?: ReactNode;
+  links?: TeamMemberLink[];
+}
+
+export interface TeamMemberCardProps {
+  member: TeamMember;
+  className?: string;
+}
+
+export function TeamMemberCard({ member, className }: TeamMemberCardProps) {
+  return (
+    <div
+      className={cx(
+        "flex flex-col items-center gap-3 rounded-xl border border-gray-200 bg-white p-6 text-center dark:border-gray-800 dark:bg-gray-900",
+        className,
+      )}
+    >
+      <Avatar src={member.avatarSrc} name={member.name} size={72} />
+      <div>
+        <div className="text-base font-semibold text-gray-900 dark:text-gray-100">{member.name}</div>
+        {member.role && <div className="text-sm text-gray-500 dark:text-gray-400">{member.role}</div>}
+      </div>
+      {member.bio && <p className="text-sm text-gray-600 dark:text-gray-300">{member.bio}</p>}
+      {member.links && member.links.length > 0 && (
+        <div className="flex items-center gap-2">
+          {member.links.map((link, i) => (
+            <a
+              key={i}
+              href={link.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={link.label}
+              title={link.label}
+              className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-primary/10 hover:text-primary dark:bg-gray-800 dark:text-gray-300"
+            >
+              {link.icon ?? link.label[0]?.toUpperCase()}
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export interface TeamGridProps {
+  members: TeamMember[];
+  className?: string;
+}
+
+// 1/2/3-column responsive grid -- the columns step follows this package's
+// existing breakpoint convention (md for tablet, lg for desktop) rather
+// than a 4th column, since a wider member card reads better than a
+// cramped one on very large screens.
+export function TeamGrid({ members, className }: TeamGridProps) {
+  return (
+    <div className={cx("grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3", className)}>
+      {members.map((member, i) => (
+        <TeamMemberCard key={i} member={member} />
+      ))}
+    </div>
+  );
+}