@peerbots/core 0.2.6 → 1.0.0

package/src/ui/foundations/CodeBlock.tsx

@@ -0,0 +1,148 @@
+import React, { useState } from "react";
+import { cn } from "../utils";
+import { Icon } from "./Icon";
+
+export interface CodeBlockProps {
+  /** The code string to display */
+  code: string;
+  /** Programming language for syntax/badge (e.g. bash, tsx, json) */
+  language?: string;
+  /** Optional file name displayed in the window header */
+  fileName?: string;
+  /** Whether to show line numbers */
+  showLineNumbers?: boolean;
+  /** Style variant: 'default' (clean block) or 'window' (macOS window with colored dots) */
+  variant?: "default" | "window" | "flat";
+  /** Whether to show the copy button */
+  showCopyButton?: boolean;
+  className?: string;
+}
+
+export const CodeBlock: React.FC<CodeBlockProps> = ({
+  code = "",
+  language,
+  fileName,
+  showLineNumbers = false,
+  variant = "default",
+  showCopyButton = true,
+  className,
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy code to clipboard", err);
+    }
+  };
+
+  const codeLines = code.trim().split("\n");
+  const isWindow = variant === "window";
+
+  return (
+    <div
+      className={cn(
+        "pb:relative pb:group pb:rounded-xl pb:overflow-hidden pb:font-mono pb:text-sm pb:transition-all",
+        isWindow
+          ? "pb:shadow-xl pb:border pb:border-gray-800 pb:bg-[#1e222b] pb:text-gray-100"
+          : variant === "flat"
+            ? "pb:bg-[#1e222b]/90 pb:text-gray-100"
+            : "pb:border pb:border-gray-800 pb:bg-[#1e222b] pb:text-gray-100 pb:shadow-md",
+        className,
+      )}
+    >
+      {/* Window Header Bar (Only in window variant) */}
+      {isWindow ? (
+        <div className="pb:flex pb:items-center pb:justify-between pb:px-4 pb:py-3 pb:bg-[#161920] pb:border-b pb:border-gray-800/80">
+          <div className="pb:flex pb:items-center pb:gap-2">
+            <span className="pb:w-3 pb:h-3 pb:rounded-full pb:bg-red-500/80 pb:inline-block" />
+            <span className="pb:w-3 pb:h-3 pb:rounded-full pb:bg-yellow-500/80 pb:inline-block" />
+            <span className="pb:w-3 pb:h-3 pb:rounded-full pb:bg-green-500/80 pb:inline-block" />
+            {fileName && (
+              <span className="pb:ml-2 pb:text-xs pb:text-gray-300 pb:font-sans pb:font-medium">
+                {fileName}
+              </span>
+            )}
+          </div>
+
+          <div className="pb:flex pb:items-center pb:gap-3">
+            {language && (
+              <span className="pb:text-xs pb:uppercase pb:font-bold pb:text-gray-200 pb:bg-gray-800/80 pb:px-2.5 pb:py-0.5 pb:rounded-md">
+                {language}
+              </span>
+            )}
+            {showCopyButton && (
+              <button
+                type="button"
+                onClick={handleCopy}
+                className="pb:flex pb:items-center pb:gap-1.5 pb:px-3 pb:py-1 pb:text-xs pb:font-semibold pb:text-gray-200 pb:hover:text-white pb:bg-gray-800 pb:hover:bg-gray-700 pb:rounded-lg pb:transition-colors pb:cursor-pointer"
+                aria-label="Copy code to clipboard"
+              >
+                {copied ? (
+                  <>
+                    <Icon name="check" className="pb:w-3.5 pb:h-3.5 pb:text-peerbots-teal" />
+                    <span className="pb:text-peerbots-teal">Copied!</span>
+                  </>
+                ) : (
+                  <>
+                    <Icon name="clipboard" className="pb:w-3.5 pb:h-3.5" />
+                    <span>Copy</span>
+                  </>
+                )}
+              </button>
+            )}
+          </div>
+        </div>
+      ) : (
+        /* Floating Copy & Language badge for default / simple variant */
+        (showCopyButton || language) && (
+          <div className="pb:absolute pb:top-3 pb:right-3 pb:flex pb:items-center pb:gap-2 pb:z-10">
+            {language && (
+              <span className="pb:text-[11px] pb:uppercase pb:font-bold pb:text-gray-200 pb:bg-gray-800/80 pb:px-2 pb:py-0.5 pb:rounded-md pb:select-none">
+                {language}
+              </span>
+            )}
+            {showCopyButton && (
+              <button
+                type="button"
+                onClick={handleCopy}
+                className="pb:p-1.5 pb:rounded-md pb:bg-gray-800/70 pb:hover:bg-gray-700 pb:text-gray-300 pb:hover:text-white pb:transition-all pb:duration-150 pb:cursor-pointer pb:border pb:border-gray-700/50"
+                aria-label="Copy code to clipboard"
+                title={copied ? "Copied!" : "Copy code"}
+              >
+                {copied ? (
+                  <Icon name="check" className="pb:w-4 pb:h-4 pb:text-peerbots-teal" />
+                ) : (
+                  <Icon name="clipboard" className="pb:w-4 pb:h-4" />
+                )}
+              </button>
+            )}
+          </div>
+        )
+      )}
+
+      {/* Code Block Body */}
+      <div className="pb:p-4 sm:pb:p-5 pb:overflow-x-auto pb:text-sm sm:pb:text-base pb:leading-relaxed">
+        <pre className="pb:font-mono pb:m-0">
+          <code>
+            {showLineNumbers ? (
+              codeLines.map((line, idx) => (
+                <div key={idx} className="pb:table-row">
+                  <span className="pb:table-cell pb:pr-4 pb:text-right pb:select-none pb:text-gray-400 pb:text-xs">
+                    {idx + 1}
+                  </span>
+                  <span className="pb:table-cell">{line}</span>
+                </div>
+              ))
+            ) : (
+              code
+            )}
+          </code>
+        </pre>
+      </div>
+    </div>
+  );
+};

package/src/ui/foundations/Colors.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta = {
+  title: "Foundations/Colors",
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+export const Variations: StoryObj = {
+  render: () => (
+    <div className="pb:flex pb:flex-col pb:gap-8 pb:p-6 pb:bg-white pb:max-w-5xl">
+      <div>
+        <h3 className="pb:text-sm pb:font-bold pb:text-black pb:uppercase pb:tracking-wider pb:border-b pb:pb-2 pb:mb-4">
+          Peerbots Canonical Brand Palette
+        </h3>
+        <p className="pb:text-xs pb:text-gray-700 pb:mb-4">
+          Primary brand colors used across the marketing website, competition runner, and core apps.
+        </p>
+        <div className="pb:grid pb:grid-cols-2 pb:sm:grid-cols-3 pb:md:grid-cols-4 pb:gap-4">
+          <ColorItem name="Peerbots Teal" hex="#5fc7cc" variable="var(--pb-color-peerbots-teal)" role="Primary brand accent" />
+          <ColorItem name="Peerbots Pink" hex="#e96c8a" variable="var(--pb-color-peerbots-pink)" role="Secondary brand accent & highlights" />
+          <ColorItem name="Dark Teal" hex="#3f8588" variable="var(--pb-color-peerbots-darkteal)" role="High-contrast interactive teal" />
+          <ColorItem name="Dark Blue" hex="#2e3a59" variable="var(--pb-color-peerbots-darkblue)" role="Deep brand background / headings" />
+          <ColorItem name="Olive" hex="#82871f" variable="var(--pb-color-peerbots-olive)" role="Tertiary earth accent" />
+          <ColorItem name="Dark Neutral" hex="#1a1a1a" variable="var(--pb-color-peerbots-dark)" role="Headings and dark surfaces" />
+          <ColorItem name="Light Neutral" hex="#f8f9fa" variable="var(--pb-color-peerbots-light)" role="Page & card subtle fills" />
+        </div>
+      </div>
+
+      <div>
+        <h3 className="pb:text-sm pb:font-bold pb:text-black pb:uppercase pb:tracking-wider pb:border-b pb:pb-2 pb:mb-4">
+          Application & Controller Tokens
+        </h3>
+        <p className="pb:text-xs pb:text-gray-700 pb:mb-4">
+          High-energy functional tokens used for controller buttons, sliders, and form active states.
+        </p>
+        <div className="pb:grid pb:grid-cols-2 pb:sm:grid-cols-3 pb:md:grid-cols-4 pb:gap-4">
+          <ColorItem name="Primary (Electric)" hex="#46d9d9" variable="var(--pb-color-primary)" role="Controller buttons & active toggles" />
+          <ColorItem name="Dark Primary" hex="#0f766e" variable="var(--pb-color-dark-primary)" role="Hover state for electric primary" />
+          <ColorItem name="Secondary (Pink)" hex="#e86e8a" variable="var(--pb-color-secondary)" role="Secondary actions & badges" />
+          <ColorItem name="Accent Lime" hex="#d9e021" variable="var(--pb-color-accent)" role="High-energy accent" />
+          <ColorItem name="Accent Two (Blue)" hex="#4273ff" variable="var(--pb-color-accent-two)" role="Interactive blue accent" />
+          <ColorItem name="Danger" hex="#e86e8a" variable="var(--pb-color-danger)" role="Destructive alerts and buttons" />
+          <ColorItem name="Sidebar BG" hex="#f9ffff" variable="var(--pb-sidebar-bg)" role="App shell sidebar background" />
+          <ColorItem name="Light BG" hex="#d8e7eb" variable="var(--pb-color-light-bg)" role="Soft container backdrop" />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+function ColorItem({
+  name,
+  hex,
+  variable,
+  role,
+}: {
+  name: string;
+  hex: string;
+  variable: string;
+  role: string;
+}) {
+  return (
+    <div className="pb:flex pb:flex-col pb:gap-2 pb:p-3 pb:rounded-xl pb:border pb:border-gray-100 pb:bg-gray-50/50">
+      <div
+        className="pb:h-16 pb:w-full pb:rounded-lg pb:shadow-xs pb:border pb:border-black/5"
+        style={{ backgroundColor: variable }}
+      />
+      <div className="pb:flex pb:flex-col">
+        <div className="pb:flex pb:items-center pb:justify-between">
+          <span className="pb:text-xs pb:font-bold pb:text-gray-900">{name}</span>
+          <span className="pb:text-[10px] pb:font-mono pb:text-gray-600">{hex}</span>
+        </div>
+        <span className="pb:text-[11px] pb:text-gray-700 pb:mt-0.5">{role}</span>
+        <code className="pb:text-[10px] pb:text-gray-600 pb:font-mono pb:mt-1 truncate">{variable}</code>
+      </div>
+    </div>
+  );
+}

package/src/ui/{Icon.stories.tsx → foundations/Icon.stories.tsx}

@@ -3,7 +3,7 @@ import { Icon, IconName } from "./Icon";
 import { Text } from "./Typography";
 
 const meta: Meta<typeof Icon> = {
-  title: "UI/Icon",
+  title: "Foundations/Icon",
   component: Icon,
   tags: ["autodocs"],
   argTypes: {

package/src/ui/{Icon.tsx → foundations/Icon.tsx}

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "./utils";
+import { cn } from "../utils";
 import { IconName, icons } from "./IconRegistry";
 
 export type { IconName };

package/src/ui/{IconRegistry.tsx → foundations/IconRegistry.tsx}

@@ -90,6 +90,9 @@ export const iconPaths = {
     "M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15",
   home: "m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25",
   play: "M5 3l14 9-14 9V3z",
+  star: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+  shield: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
+  chat: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",
 };
 
 /**
@@ -126,64 +129,265 @@ export const complexIcons = {
       />
     </g>
   ),
+  face: (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <path d="M8 14s1.5 2 4 2 4-2 4-2" />
+      <line x1="9" y1="9" x2="9.01" y2="9" strokeWidth="3" />
+      <line x1="15" y1="9" x2="15.01" y2="9" strokeWidth="3" />
+    </>
+  ),
+  mic: (
+    <>
+      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+      <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+      <line x1="12" y1="19" x2="12" y2="22" />
+    </>
+  ),
+  brain: (
+    <>
+      <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 4.44-2.04Z" />
+      <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-4.44-2.04Z" />
+    </>
+  ),
+  user: (
+    <>
+      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+      <circle cx="12" cy="7" r="4" />
+    </>
+  ),
+  users: (
+    <>
+      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+      <circle cx="9" cy="7" r="4" />
+      <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+    </>
+  ),
+  globe: (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <line x1="2" y1="12" x2="22" y2="12" />
+      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+    </>
+  ),
+  devices: (
+    <>
+      <rect width="16" height="10" x="2" y="3" rx="2" />
+      <path d="M12 17v4" />
+      <path d="M8 21h8" />
+    </>
+  ),
+  volume: (
+    <>
+      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+      <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
+      <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
+    </>
+  ),
+  sliders: (
+    <>
+      <line x1="4" x2="4" y1="21" y2="14" />
+      <line x1="4" x2="4" y1="10" y2="3" />
+      <line x1="12" x2="12" y1="21" y2="12" />
+      <line x1="12" x2="12" y1="8" y2="3" />
+      <line x1="20" x2="20" y1="21" y2="16" />
+      <line x1="20" x2="20" y1="12" y2="3" />
+      <line x1="1" x2="7" y1="14" y2="14" />
+      <line x1="9" x2="15" y1="8" y2="8" />
+      <line x1="17" x2="23" y1="16" y2="16" />
+    </>
+  ),
+  joystick: (
+    <>
+      <circle cx="12" cy="7" r="3" />
+      <path d="M12 10v7" />
+      <rect width="18" height="4" x="3" y="17" rx="2" />
+    </>
+  ),
+  book: (
+    <>
+      <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z" />
+      <path d="M6 6h10" />
+      <path d="M6 10h10" />
+    </>
+  ),
+  store: (
+    <>
+      <path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7" />
+      <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
+      <path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4" />
+      <path d="M2 7h20" />
+    </>
+  ),
+  award: (
+    <>
+      <circle cx="12" cy="8" r="7" />
+      <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" />
+    </>
+  ),
+  headset: (
+    <>
+      <path d="M3 18v-6a9 9 0 0 1 18 0v6" />
+      <path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" />
+    </>
+  ),
+  layout: (
+    <>
+      <rect width="18" height="18" x="3" y="3" rx="2" />
+      <path d="M3 9h18" />
+      <path d="M9 21V9" />
+    </>
+  ),
+  video: (
+    <>
+      <polygon points="23 7 16 12 23 17 23 7" />
+      <rect width="14" height="12" x="1" y="6" rx="2" />
+    </>
+  ),
+  facebook: (
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+      clipRule="evenodd"
+    />
+  ),
+  instagram: (
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
+      clipRule="evenodd"
+    />
+  ),
+  linkedin: (
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"
+      clipRule="evenodd"
+    />
+  ),
+  twitter: (
+    <path
+      fill="currentColor"
+      d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+    />
+  ),
+  youtube: (
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M21.582 6.186a2.806 2.806 0 0 0-1.974-1.986C17.868 3.75 12 3.75 12 3.75s-5.868 0-7.608.45A2.806 2.806 0 0 0 2.418 6.186C2 7.94 2 12 2 12s0 4.06.418 5.814a2.806 2.806 0 0 0 1.974 1.986c1.74.45 7.608.45 7.608.45s5.868 0 7.608-.45a2.806 2.806 0 0 0 1.974-1.986C22 16.06 22 12 22 12s0-4.06-.418-5.814zM9.75 15.568V8.432L15.818 12 9.75 15.568z"
+      clipRule="evenodd"
+    />
+  ),
+  bluesky: (
+    <path
+      fill="currentColor"
+      d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566 1.01 1.5 1.97 1.5 4.5c0 2.054.675 6.643 1.05 7.995.675 2.43 2.7 3.375 4.5 3.375-3.375.9-4.875 3.15-2.7 6.3 3.675 5.325 6.9-2.025 7.65-4.275.75 2.25 3.975 9.6 7.65 4.275 2.175-3.15.675-5.4-2.7-6.3 1.8 0 3.825-.945 4.5-3.375.375-1.352 1.05-5.941 1.05-7.995 0-2.53-1.066-3.49-3.702-1.695C16.046 4.747 13.087 8.686 12 10.8z"
+    />
+  ),
+  github: (
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+      clipRule="evenodd"
+    />
+  ),
 } as const;
 
-export type IconName = keyof typeof iconPaths | keyof typeof complexIcons;
+export type IconName =
+  | keyof typeof iconPaths
+  | keyof typeof complexIcons
+  | "smile"
+  | "avatar"
+  | "voice"
+  | "audio"
+  | "speech"
+  | "expert"
+  | "profile"
+  | "world"
+  | "language"
+  | "screen"
+  | "laptop"
+  | "sound"
+  | "speaker"
+  | "tune"
+  | "adjust"
+  | "message"
+  | "team"
+  | "group"
+  | "motion"
+  | "gamepad"
+  | "curriculum"
+  | "learning"
+  | "education"
+  | "marketplace"
+  | "security"
+  | "privacy"
+  | "badge"
+  | "certificate"
+  | "support"
+  | "help"
+  | "x-brand"
+  | "bsky";
 
-export const icons: Record<IconName, React.ReactNode> = {
-  check: <path d={iconPaths.check} />,
-  x: <path d={iconPaths.x} />,
-  edit: <path d={iconPaths.edit} />,
-  close: <path d={iconPaths.close} />,
-  plus: <path d={iconPaths.plus} />,
-  arrowDown: <path d={iconPaths.arrowDown} />,
-  arrowUp: <path d={iconPaths.arrowUp} />,
-  clipboard: <path d={iconPaths.clipboard} />,
-  cloudArrowUp: <path d={iconPaths.cloudArrowUp} />,
-  arrowDownToLine: <path d={iconPaths.arrowDownToLine} />,
-  folder: <path d={iconPaths.folder} />,
-  arrowUpFromLine: <path d={iconPaths.arrowUpFromLine} />,
-  arrowRightOnRectangle: <path d={iconPaths.arrowRightOnRectangle} />,
-  squares: <path d={iconPaths.squares} />,
-  tableCells: <path d={iconPaths.tableCells} />,
-  arrowsRightLeft: <path d={iconPaths.arrowsRightLeft} />,
-  document: <path d={iconPaths.document} />,
-  externalLink: <path d={iconPaths.externalLink} />,
-  lock: <path d={iconPaths.lock} />,
-  shoppingCart: <path d={iconPaths.shoppingCart} />,
-  minus: <path d={iconPaths.minus} />,
-  pencilSquare: <path d={iconPaths.pencilSquare} />,
-  pencilSquareContinued: <path d={iconPaths.pencilSquareContinued} />,
-  chevronDownSmall: <path d={iconPaths.chevronDownSmall} />,
-  chevronUpSmall: <path d={iconPaths.chevronUpSmall} />,
-  chevronDownTable: <path d={iconPaths.chevronDownTable} />,
-  chevronUpTable: <path d={iconPaths.chevronUpTable} />,
-  speakerWave: <path d={iconPaths.speakerWave} />,
-  zap: <path d={iconPaths.zap} />,
-  code: <path d={iconPaths.code} />,
-  questionMarkCircle: <path d={iconPaths.questionMarkCircle} />,
-  search: <path d={iconPaths.search} />,
-  exclamationCircle: <path d={iconPaths.exclamationCircle} />,
-  exclamationTriangle: <path d={iconPaths.exclamationTriangle} />,
-  checkCircle: <path d={iconPaths.checkCircle} />,
-  megaphone: <path d={iconPaths.megaphone} />,
-  xCircle: <path d={iconPaths.xCircle} />,
-  arrowsPointingIn: <path d={iconPaths.arrowsPointingIn} />,
-  arrowsPointingOut: <path d={iconPaths.arrowsPointingOut} />,
-  arrowPath: <path d={iconPaths.arrowPath} />,
-  arrowUturnLeft: <path d={iconPaths.arrowUturnLeft} />,
-  magnifyingGlassPlus: <path d={iconPaths.magnifyingGlassPlus} />,
-  arrowsUpDown: <path d={iconPaths.arrowsUpDown} />,
-  envelope: <path d={iconPaths.envelope} />,
-  lockClosed: <path d={iconPaths.lockClosed} />,
-  userCircle: <path d={iconPaths.userCircle} />,
-  chevronRight: <path d={iconPaths.chevronRight} />,
-  arrowDownTray: <path d={iconPaths.arrowDownTray} />,
-  arrowUpTray: <path d={iconPaths.arrowUpTray} />,
-  import: <path d={iconPaths.import} />,
-  export: <path d={iconPaths.export} />,
-  home: <path d={iconPaths.home} />,
-  play: <path d={iconPaths.play} />,
-  eye: complexIcons.eye,
-  google: complexIcons.google,
+const iconAliases: Record<string, keyof typeof iconPaths | keyof typeof complexIcons> = {
+  smile: "face",
+  avatar: "face",
+  voice: "mic",
+  audio: "mic",
+  speech: "mic",
+  expert: "brain",
+  profile: "user",
+  world: "globe",
+  language: "globe",
+  screen: "devices",
+  laptop: "devices",
+  sound: "volume",
+  speaker: "volume",
+  tune: "sliders",
+  adjust: "sliders",
+  message: "chat",
+  team: "users",
+  group: "users",
+  motion: "joystick",
+  gamepad: "joystick",
+  curriculum: "book",
+  learning: "book",
+  education: "book",
+  marketplace: "store",
+  security: "shield",
+  privacy: "shield",
+  badge: "award",
+  certificate: "award",
+  support: "headset",
+  help: "headset",
+  "x-brand": "twitter",
+  bsky: "bluesky",
 };
+
+export const getIconNode = (name: IconName): React.ReactNode => {
+  const resolvedName = (iconAliases[name] || name) as
+    | keyof typeof iconPaths
+    | keyof typeof complexIcons;
+
+  if (resolvedName in complexIcons) {
+    return complexIcons[resolvedName as keyof typeof complexIcons];
+  }
+  if (resolvedName in iconPaths) {
+    return <path d={iconPaths[resolvedName as keyof typeof iconPaths]} />;
+  }
+  return null;
+};
+
+export const icons: Record<string, React.ReactNode> = new Proxy(
+  {},
+  {
+    get: (_, prop: string) => getIconNode(prop as IconName),
+    has: () => true,
+  },
+);

package/src/ui/foundations/SocialLinks.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SocialLinks, DEFAULT_PEERBOTS_SOCIAL_LINKS } from "./SocialLinks";
+import React from "react";
+
+const meta: Meta<typeof SocialLinks> = {
+  title: "Foundations/SocialLinks",
+  component: SocialLinks,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SocialLinks>;
+
+export const Default: Story = {
+  args: {
+    links: DEFAULT_PEERBOTS_SOCIAL_LINKS,
+    size: "md",
+    variant: "default",
+  },
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="pb:flex pb:flex-col pb:gap-6 pb:p-6 pb:bg-slate-900 pb:rounded-2xl">
+      <div>
+        <p className="pb:text-white/60 pb:text-xs pb:mb-2">White Variant (for dark headers/footers)</p>
+        <SocialLinks variant="white" size="md" />
+      </div>
+      <div>
+        <p className="pb:text-white/60 pb:text-xs pb:mb-2">Teal Variant</p>
+        <SocialLinks variant="teal" size="md" />
+      </div>
+    </div>
+  ),
+};