@vvedantb/ui 0.8.0 → 0.10.0

package/shell/src/SidebarAccountMenu.tsx

@@ -1,14 +1,19 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { useState, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { IconLogout, IconMoon, IconSun } from "@tabler/icons-react";
+import { ConfirmSkipHint, skipConfirmTitle } from "../../app/src/confirm/ConfirmSkipHint";
+import { useRequestConfirm } from "../../app/src/confirm/useRequestConfirm";
 import { Button, type ButtonProps } from "../../src/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "../../src/ui/dropdown-menu";
 import { cn } from "../../src/utils/cn";
 import { accountEmailClass, railTileClass, railTileStateClass } from "./app-shell-classes";
+import { SignOutDialog } from "./SignOutDialog";
 
 type ContentProps = ComponentPropsWithoutRef<typeof DropdownMenuContent>;
 
@@ -45,6 +50,20 @@ export type SidebarAccountMenuProps = {
   >;
   /** Menu items after the label and separator. */
   children?: ReactNode;
+  /** Adds a "Light mode" / "Dark mode" item after `children`. */
+  themeToggle?: { isDark: boolean; onToggle: () => void };
+  /**
+   * Adds a separator and a danger "Sign out" item last. Selecting it opens
+   * `SignOutDialog` (Alt-click skips it, with `ConfirmSkipHint`). The menu owns
+   * the dialog state; `onSignOut` failing re-enables the dialog.
+   */
+  signOut?: {
+    onSignOut: () => Promise<void>;
+    /** Second line of the dialog. */
+    description?: string;
+  };
+  /** `size` of the theme and sign-out item icons. Default: the icon's own size (24). */
+  itemIconSize?: number;
 };
 
 /** Account menu on a rail tile: avatar trigger, identity label, then the app's items. Composed from `Sidebar.Account*` parts. */
@@ -62,8 +81,25 @@ export function SidebarAccountMenu({
   triggerProps,
   contentProps,
   children,
+  themeToggle,
+  signOut,
+  itemIconSize,
 }: SidebarAccountMenuProps) {
-  return (
+  const [signOutOpen, setSignOutOpen] = useState(false);
+  const [signingOut, setSigningOut] = useState(false);
+  const { request } = useRequestConfirm();
+
+  const handleSignOut = async () => {
+    if (!signOut) return;
+    setSigningOut(true);
+    try {
+      await signOut.onSignOut();
+    } catch {
+      setSigningOut(false);
+    }
+  };
+
+  const menu = (
     <AccountMenu badge={badge}>
       <AccountTrigger {...triggerProps} userName={name} imageUrl={imageUrl} />
       <AccountContent
@@ -77,9 +113,49 @@ export function SidebarAccountMenu({
         <AccountLabel userName={name} email={email} imageUrl={imageUrl} stacked={stackedLabel} />
         <AccountSeparator />
         {children}
+        {themeToggle ? (
+          <DropdownMenuItem onSelect={() => themeToggle.onToggle()}>
+            {themeToggle.isDark ? <IconSun size={itemIconSize} /> : <IconMoon size={itemIconSize} />}
+            {themeToggle.isDark ? "Light mode" : "Dark mode"}
+          </DropdownMenuItem>
+        ) : null}
+        {signOut ? (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={() =>
+                request(
+                  () => setSignOutOpen(true),
+                  () => {
+                    void handleSignOut();
+                  },
+                )
+              }
+              className="text-danger focus:text-danger data-[highlighted]:text-danger"
+              title={skipConfirmTitle("Sign out")}
+            >
+              <IconLogout size={itemIconSize} />
+              Sign out
+              <ConfirmSkipHint />
+            </DropdownMenuItem>
+          </>
+        ) : null}
       </AccountContent>
     </AccountMenu>
   );
+  if (!signOut) return menu;
+  return (
+    <>
+      {menu}
+      <SignOutDialog
+        open={signOutOpen}
+        onOpenChange={setSignOutOpen}
+        pending={signingOut}
+        onConfirm={handleSignOut}
+        description={signOut.description}
+      />
+    </>
+  );
 }
 
 export type SidebarAccountMenuRootProps = ComponentPropsWithoutRef<typeof DropdownMenu> & {

package/shell/src/SidebarRail.tsx

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { Slot, Slottable } from "@radix-ui/react-slot";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftExpandFilled } from "@tabler/icons-react";
 import { cn } from "../../src/utils/cn";
 import { railTileClass, railTileStateClass } from "./app-shell-classes";
 import { SidebarIconTooltip } from "./SidebarIconTooltip";
@@ -199,3 +200,22 @@ export type RailDividerProps = { className?: string };
 export function RailDivider({ className }: RailDividerProps) {
   return <RailSeparator className={className} />;
 }
+
+export type RailCollapseTileProps = {
+  /** Panel is collapsed: shows the expand icon and "Show sidebar". */
+  collapsed: boolean;
+  onToggle: () => void;
+};
+
+/** Rail tile that shows or hides the sidebar panel. */
+export function RailCollapseTile({ collapsed, onToggle }: RailCollapseTileProps) {
+  return (
+    <RailItem label={collapsed ? "Show sidebar" : "Hide sidebar"} onClick={onToggle}>
+      {collapsed ? (
+        <IconLayoutSidebarLeftExpandFilled className="size-[22px]" />
+      ) : (
+        <IconLayoutSidebarLeftCollapse className="size-[22px]" />
+      )}
+    </RailItem>
+  );
+}

package/shell/src/index.ts

@@ -22,8 +22,8 @@ export { AppSidebar } from "./AppSidebar.js";
 export type { AppSidebarProps } from "./AppSidebar.js";
 // Composable sidebar parts (`Sidebar.Root`, `Sidebar.Rail`, ...) and their prop types.
 export * from "./Sidebar.js";
-export { SidebarRail, RailTile, RailDivider } from "./SidebarRail.js";
-export type { SidebarRailProps, RailTileProps, RailDividerProps } from "./SidebarRail.js";
+export { SidebarRail, RailTile, RailDivider, RailCollapseTile } from "./SidebarRail.js";
+export type { SidebarRailProps, RailTileProps, RailDividerProps, RailCollapseTileProps } from "./SidebarRail.js";
 export { SidebarResizeHandle, useAppShellResize } from "./SidebarResize.js";
 export type {
   AppShellResize,

package/src/index.ts

@@ -135,8 +135,13 @@ export { AppSidebar } from "../shell/src/AppSidebar";
 export type { AppSidebarProps } from "../shell/src/AppSidebar";
 // Composable sidebar parts (`Sidebar.Root`, `Sidebar.Rail`, ...) and their prop types.
 export * from "../shell/src/Sidebar";
-export { SidebarRail, RailTile, RailDivider } from "../shell/src/SidebarRail";
-export type { SidebarRailProps, RailTileProps, RailDividerProps } from "../shell/src/SidebarRail";
+export { SidebarRail, RailTile, RailDivider, RailCollapseTile } from "../shell/src/SidebarRail";
+export type {
+  SidebarRailProps,
+  RailTileProps,
+  RailDividerProps,
+  RailCollapseTileProps,
+} from "../shell/src/SidebarRail";
 export { SidebarResizeHandle, useAppShellResize } from "../shell/src/SidebarResize";
 export type {
   AppShellResize,
@@ -172,7 +177,52 @@ export {
 } from "../shell/src/app-shell-classes";
 export type { SidebarNavItemClassOptions } from "../shell/src/app-shell-classes";
 
-// App helpers: confirm skip, update watcher, settings chrome, stable auth.
+// Marketing: landing kit, site footer and pricing dialog. Router- and Motion-free;
+// `createLandingKit` takes the app's `motion`. Styles: `@vvedantb/ui/landing.css`.
+export {
+  LandingFeatureCard,
+  LandingFooter,
+  LandingLattice,
+  LandingNavMenu,
+  LandingPageLayout,
+  LandingSection,
+  LandingSectionHeading,
+  landingItemVariants,
+} from "./marketing/landing";
+export type {
+  LandingFeature,
+  LandingFooterProps,
+  LandingLatticeProps,
+  LandingLink,
+  LandingNavMenuProps,
+  LandingPageLayoutProps,
+  LandingSectionHeadingProps,
+  LandingSectionProps,
+} from "./marketing/landing";
+export { createLandingKit } from "./marketing/createLandingKit";
+export type {
+  LandingCtaProps,
+  LandingHeroProps,
+  LandingKit,
+  LandingKitOptions,
+  LandingMotion,
+  LandingNavProps,
+  LandingRevealItemProps,
+  LandingRevealProps,
+} from "./marketing/createLandingKit";
+export {
+  landingFooterButtonClass,
+  landingFooterLinkClass,
+  landingPanelClass,
+  landingShellClass,
+} from "./marketing/marketing-classes";
+export type { PricingModalTone, SiteFooterVariant } from "./marketing/marketing-classes";
+export { SiteFooter } from "./marketing/SiteFooter";
+export type { SiteFooterLink, SiteFooterProps, SiteFooterSocial } from "./marketing/SiteFooter";
+export { PricingModal } from "./marketing/PricingModal";
+export type { PricingModalProps } from "./marketing/PricingModal";
+
+// App helpers: confirm skip, update watcher, settings chrome, stable auth, Convex provider, VITE env and ensure-user.
 export * from "../app/src/index";
 
 // Native tokens (JS values that match tokens.css).

package/src/marketing/PricingModal.tsx

@@ -0,0 +1,126 @@
+import type { ReactElement, ReactNode } from "react";
+import { IconCheck, IconX } from "@tabler/icons-react";
+import { Button } from "../ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../ui/dialog";
+import { VisuallyHidden } from "../ui/visually-hidden";
+import { pricingModalClasses, type PricingModalTone } from "./marketing-classes";
+
+export type PricingModalProps = {
+  open: boolean;
+  /** Called when the dialog asks to close and by the `closeButton`. */
+  onClose: () => void;
+  /** Accessible dialog title, for example "Pro". Not visible. */
+  title: string;
+  /** Accessible description. Not visible. When set, the title is an `sr-only` `DialogTitle` followed by this. */
+  description?: string;
+  /** Logo before the wordmark: `dark` shows in dark mode, `light` in light mode. 28px. */
+  logo: { dark: string; light: string };
+  /** Text after the logo, before the PRO badge. */
+  wordmark: string;
+  /** For example "$9". */
+  price: string;
+  tagline: ReactNode;
+  /** Extra font class on the tagline, placed after `max-w-[28ch]`. */
+  taglineFontClassName?: string;
+  /** Plan features under "What you get". */
+  features: readonly string[];
+  /** Label of the full-width checkout button. Default "Get Pro". */
+  ctaLabel?: string;
+  /** Wraps the checkout button, for example in the billing provider's checkout and signed-in gates. */
+  renderCheckout: (button: ReactElement) => ReactNode;
+  /** Second, compact close button in the top-right corner. Default `false`. */
+  closeButton?: boolean;
+  /** Secondary text colour class. Default `"muted"`. */
+  tone?: PricingModalTone;
+};
+
+/** Single-plan upgrade dialog: brand header with price and tagline, checkout button and feature list. */
+export function PricingModal({
+  open,
+  onClose,
+  title,
+  description,
+  logo,
+  wordmark,
+  price,
+  tagline,
+  taglineFontClassName,
+  features,
+  ctaLabel = "Get Pro",
+  renderCheckout,
+  closeButton = false,
+  tone = "muted",
+}: PricingModalProps) {
+  const c = pricingModalClasses[tone];
+  const taglineClass = ["mt-4 max-w-[28ch]", taglineFontClassName, c.tagline].filter(Boolean).join(" ");
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && onClose()}>
+      <DialogContent className="gap-0 overflow-hidden p-0 sm:max-w-md">
+        {description ? (
+          <>
+            <DialogTitle className="sr-only">{title}</DialogTitle>
+            <DialogDescription className="sr-only">{description}</DialogDescription>
+          </>
+        ) : (
+          <VisuallyHidden>
+            <DialogTitle>{title}</DialogTitle>
+          </VisuallyHidden>
+        )}
+
+        {closeButton ? (
+          <button
+            onClick={onClose}
+            className="absolute right-4 top-4 z-10 flex size-7 items-center justify-center rounded-md text-muted-foreground transition-[background-color,transform] duration-100 ease-out active:scale-[0.96] hover:bg-surface-tertiary hover:text-foreground"
+          >
+            <IconX className="size-4" />
+            <span className="sr-only">Close</span>
+          </button>
+        ) : null}
+
+        <div className="bg-surface-secondary px-8 pb-8 pt-10 dark:bg-surface-secondary/40">
+          <div className="flex items-center">
+            <img src={logo.dark} alt="" width={28} height={28} className="hidden dark:block" />
+            <img src={logo.light} alt="" width={28} height={28} className="block dark:hidden" />
+            <span className="font-michroma text-xl tracking-wider text-foreground">{wordmark}</span>
+            <span className="ml-2 rounded-md bg-segment px-2 py-0.5 font-michroma text-[10px] tracking-[0.25em] text-segment-foreground">
+              PRO
+            </span>
+          </div>
+
+          <div className="mt-8 flex items-end gap-2">
+            <span className="text-5xl font-medium tabular-nums leading-none tracking-tight text-foreground">
+              {price}
+            </span>
+            <span className={c.period}>/ month</span>
+          </div>
+
+          <p className={taglineClass}>{tagline}</p>
+        </div>
+
+        <div className="px-8 pb-8 pt-6">
+          {renderCheckout(
+            <Button size="lg" className="h-11 w-full rounded-xl">
+              {ctaLabel}
+            </Button>,
+          )}
+
+          <p className={c.note}>Cancel anytime. Billed monthly.</p>
+
+          <div className="mt-8">
+            <p className={c.featuresHeading}>What you get</p>
+            <ul className="space-y-3">
+              {features.map((feature) => (
+                <li key={feature} className="flex items-start gap-3">
+                  <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-md bg-default dark:bg-default/80">
+                    <IconCheck className="size-3 text-foreground" strokeWidth={2.5} />
+                  </span>
+                  <span className="text-sm leading-snug text-foreground">{feature}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/marketing/SiteFooter.tsx

@@ -0,0 +1,135 @@
+import type { ComponentType, ReactNode } from "react";
+import { Button } from "../ui/button";
+import { Separator } from "../ui/separator";
+import { siteFooterClasses, type SiteFooterVariant } from "./marketing-classes";
+
+export type SiteFooterLink = {
+  href: string;
+  label: string;
+  /** Opens in a new tab (`target="_blank" rel="noopener noreferrer"`). */
+  external?: boolean;
+  /** 20px round image before the label. */
+  image?: { src: string; alt: string };
+};
+
+export type SiteFooterSocial = {
+  href: string;
+  /** Rendered with the variant's `w-4 h-4` muted class, for example a Tabler brand icon. */
+  icon: ComponentType<{ className?: string }>;
+  /** `aria-label` on the link. */
+  label?: string;
+};
+
+export type SiteFooterProps = {
+  /** Wordmark text above the tagline. */
+  brand: ReactNode;
+  tagline: ReactNode;
+  /** Icon buttons under the tagline. Always open in a new tab. */
+  socials: readonly SiteFooterSocial[];
+  /** Link columns to the right of the brand block. */
+  columns: readonly { heading: string; links: readonly SiteFooterLink[] }[];
+  /** Name in "Copyright © {year} {name}". */
+  name: string;
+  /** Default: the current year. */
+  year?: number;
+  /** Bottom-right links, for example Privacy Policy and Terms of Service. Always open in a new tab. */
+  legalLinks: readonly { href: string; label: string }[];
+  /**
+   * `"muted"` (default) and `"muted-foreground"` pick the secondary text
+   * colour class. `"touch"` uses `text-muted-foreground`, `max-sm:hit-target`
+   * links and a safe-area bottom padding.
+   */
+  variant?: SiteFooterVariant;
+};
+
+/** Marketing site footer: brand, socials, link columns, then copyright and legal links under a separator. */
+export function SiteFooter({
+  brand,
+  tagline,
+  socials,
+  columns,
+  name,
+  year = new Date().getFullYear(),
+  legalLinks,
+  variant = "muted",
+}: SiteFooterProps) {
+  const c = siteFooterClasses[variant];
+  return (
+    <footer className={c.footer}>
+      <div className="relative z-10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8 lg:gap-12">
+            <div className="flex-1 lg:flex-none">
+              <div className="text-lg font-michroma font-normal tracking-wider mb-3 md:mb-4">{brand}</div>
+              <p className={c.tagline}>{tagline}</p>
+              <div className="flex gap-3 md:gap-4">
+                {socials.map(({ href, icon: Icon, label }) => (
+                  <a key={href} href={href} target="_blank" rel="noopener noreferrer" aria-label={label}>
+                    <Button variant="ghost" size="icon" className={c.socialButton}>
+                      <Icon className={c.socialIcon} />
+                    </Button>
+                  </a>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex flex-col sm:flex-row gap-8 md:gap-12 lg:gap-16 xl:gap-20">
+              {columns.map((column) => (
+                <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>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <Separator className="my-6 md:my-8 bg-separator" />
+
+          <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 sm:gap-0">
+            <div className="flex flex-col gap-1 text-center sm:text-left">
+              <p className={c.copyright}>
+                Copyright &copy; {year}
+                {` ${name}`}
+              </p>
+              <p className={c.rights}>All rights reserved.</p>
+            </div>
+
+            <div className="flex flex-col gap-1 text-center sm:text-right">
+              {legalLinks.map((link) => (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={c.legalLink}
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}