@vvedantb/ui 0.28.0 → 0.29.1

package/README.md

@@ -874,7 +874,7 @@ links under a separator.
 | --- | --- |
 | `brand`, `tagline` | Nodes. |
 | `socials` | `{ href, icon, label? }[]`. `icon` is a component that takes `className`. Links open in a new tab. |
-| `columns` | `{ heading, links }[]`. A link is `{ href, label, external?, image?: { src, alt } }`. |
+| `columns` | `{ heading, links }[]`. A link is `{ href, label, external?, image?: { src, alt }, app?: AppName }`. `image` is a 20px round image before the label. `app` (0.29.0) is the 14px `APP_ICONS[app]` glyph before the label, in `currentColor` and `aria-hidden`. If both are set, `app` wins. |
 | `name`, `year` | "Copyright © {year} {name}". `year` defaults to the current year. |
 | `legalLinks` | `{ href, label }[]`, open in a new tab. |
 | `variant` | `"muted"` (default, `text-muted`), `"muted-foreground"`, or `"touch"` (`text-muted-foreground`, `max-sm:hit-target` links, safe-area bottom padding). |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.28.0",
+  "version": "0.29.1",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one main JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), a client entry without @vvedantb/server, convex or Clerk for Chrome extensions, design-token CSS, shared Tailwind v4 CSS, a Tailwind preset and packaged Instrument Sans fonts.",
   "type": "module",

package/src/marketing/SiteFooter.tsx

@@ -1,4 +1,5 @@
 import type { ComponentType, ReactNode } from "react";
+import { APP_ICONS, type AppName } from "../brand";
 import { Button } from "../ui/button";
 import { Separator } from "../ui/separator";
 import { siteFooterClasses, type SiteFooterVariant } from "./marketing-classes";
@@ -10,6 +11,8 @@ export type SiteFooterLink = {
   external?: boolean;
   /** 20px round image before the label. */
   image?: { src: string; alt: string };
+  /** 14px app glyph before the label, in `currentColor` and `aria-hidden`. Wins over `image`. */
+  app?: AppName;
 };
 
 export type SiteFooterSocial = {
@@ -78,25 +81,30 @@ export function SiteFooter({
                 <div key={column.heading} className="flex-1 sm:flex-none">
                   <h4 className={c.heading}>{column.heading}</h4>
                   <div className={c.links}>
-                    {column.links.map((link) => (
-                      <a
-                        key={link.label}
-                        href={link.href}
-                        {...(link.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
-                        className={link.image ? c.imageLink : c.link}
-                      >
-                        {link.image ? (
-                          <img
-                            src={link.image.src}
-                            alt={link.image.alt}
-                            width={20}
-                            height={20}
-                            className="rounded-full object-cover w-5 h-5 md:w-5 md:h-5"
-                          />
-                        ) : null}
-                        {link.label}
-                      </a>
-                    ))}
+                    {column.links.map((link) => {
+                      const AppIcon = link.app ? APP_ICONS[link.app] : null;
+                      return (
+                        <a
+                          key={link.label}
+                          href={link.href}
+                          {...(link.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                          className={AppIcon || link.image ? c.imageLink : c.link}
+                        >
+                          {AppIcon ? (
+                            <AppIcon size={14} />
+                          ) : link.image ? (
+                            <img
+                              src={link.image.src}
+                              alt={link.image.alt}
+                              width={20}
+                              height={20}
+                              className="rounded-full object-cover w-5 h-5 md:w-5 md:h-5"
+                            />
+                          ) : null}
+                          {link.label}
+                        </a>
+                      );
+                    })}
                   </div>
                 </div>
               ))}

package/src/ui/sonner-icons.tsx

@@ -8,7 +8,7 @@ function InfoIcon() {
     <svg
       aria-hidden="true"
       className="h-6 w-6 fill-current text-primary"
-      fill="none"
+      fill="currentColor"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -22,7 +22,7 @@ function SuccessIcon() {
     <svg
       aria-hidden="true"
       className="h-6 w-6 fill-current text-success"
-      fill="none"
+      fill="currentColor"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -36,7 +36,7 @@ function WarningIcon() {
     <svg
       aria-hidden="true"
       className="h-6 w-6 fill-current text-warning"
-      fill="none"
+      fill="currentColor"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -54,7 +54,7 @@ function ErrorIcon() {
     <svg
       aria-hidden="true"
       className="h-6 w-6 fill-current text-destructive"
-      fill="none"
+      fill="currentColor"
       viewBox="0 0 20 20"
       xmlns="http://www.w3.org/2000/svg"
     >