@vvedantb/ui 0.4.3 → 0.5.0

package/shell/src/SidebarRail.tsx

@@ -0,0 +1,130 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { Button } from "../../src/ui/button";
+import { cn } from "../../src/utils/cn";
+import { railTileClass, railTileStateClass } from "./app-shell-classes";
+import { SidebarIconTooltip } from "./SidebarIconTooltip";
+
+export type SidebarRailProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "className"> & {
+  /** Pinned at the top, above the scroll body. */
+  top?: ReactNode;
+  /** Scroll body. */
+  children?: ReactNode;
+  /** Pinned at the bottom. */
+  footer?: ReactNode;
+  /** Adds a right border between the rail and the panel. Default `false`. */
+  showDivider?: boolean;
+  /** Render the body as its single child element (for example a tabs list), with the body classes merged. */
+  bodyAsChild?: boolean;
+  className?: string;
+  topClassName?: string;
+  bodyClassName?: string;
+  footerClassName?: string;
+};
+
+/** Icon rail column. Width reads `--app-shell-rail-width`; override with `className`. Other props go to the root `<div>`. */
+export function SidebarRail({
+  top,
+  children,
+  footer,
+  showDivider = false,
+  bodyAsChild = false,
+  className,
+  topClassName,
+  bodyClassName,
+  footerClassName,
+  ...props
+}: SidebarRailProps) {
+  const Body = bodyAsChild ? Slot : "div";
+  return (
+    <div
+      {...props}
+      className={cn(
+        "flex h-full w-[var(--app-shell-rail-width)] shrink-0 flex-col items-center bg-background",
+        showDivider && "border-r border-separator",
+        className,
+      )}
+    >
+      {top == null ? null : (
+        <div className={cn("flex w-full flex-col items-center gap-1.5 px-0 pt-3", topClassName)}>
+          {top}
+        </div>
+      )}
+      <Body
+        className={cn(
+          "flex w-full flex-1 flex-col items-center gap-1.5 overflow-y-auto py-2",
+          bodyClassName,
+        )}
+      >
+        {children}
+      </Body>
+      {footer == null ? null : (
+        <div className={cn("flex w-full flex-col items-center gap-1.5 py-3", footerClassName)}>
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export type RailTileProps = Omit<ComponentPropsWithoutRef<"button">, "children"> & {
+  /** `aria-label`, and the tooltip unless `tooltip` is set. */
+  label: string;
+  /** Active state. With `asChild`, also sets `aria-current="page"`. */
+  active?: boolean;
+  /** Tooltip text. Default `label`. */
+  tooltip?: string;
+  /** Default `true`. */
+  showTooltip?: boolean;
+  /** Rendered after the children, inside the tile (for example a count with `railBadgeClass`). */
+  badge?: ReactNode;
+  /** Render the single child element (for example a router link) as the tile. */
+  asChild?: boolean;
+  children: ReactNode;
+};
+
+/** Rail tile with a right-side tooltip. Renders a ghost `Button`, or its child with `asChild`. */
+export function RailTile({
+  label,
+  active = false,
+  tooltip,
+  showTooltip = true,
+  badge,
+  asChild = false,
+  className,
+  children,
+  ...props
+}: RailTileProps) {
+  return (
+    <SidebarIconTooltip label={tooltip ?? label} enabled={showTooltip}>
+      {asChild ? (
+        <Slot
+          {...props}
+          aria-label={label}
+          aria-current={active ? "page" : undefined}
+          className={cn(railTileClass, "group", railTileStateClass(active), className)}
+        >
+          <Slottable>{children}</Slottable>
+          {badge}
+        </Slot>
+      ) : (
+        <Button
+          type="button"
+          variant="ghost"
+          {...props}
+          aria-label={label}
+          className={cn(railTileClass, "group h-11 w-11 p-0", railTileStateClass(active), className)}
+        >
+          {children}
+          {badge}
+        </Button>
+      )}
+    </SidebarIconTooltip>
+  );
+}
+
+export type RailDividerProps = { className?: string };
+
+export function RailDivider({ className }: RailDividerProps) {
+  return <div className={cn("h-px w-8 bg-separator", className)} aria-hidden />;
+}

package/shell/src/SignOutDialog.tsx

@@ -0,0 +1,93 @@
+import { IconAlertTriangle, IconLoader2 } from "@tabler/icons-react";
+import { Button } from "../../src/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../src/ui/dialog";
+import { cn } from "../../src/utils/cn";
+import { signOutCancelClass, signOutDescriptionClass } from "./app-shell-classes";
+
+export type SignOutDialogProps = {
+  open: boolean;
+  /** Not called with `false` while `pending`, so the dialog stays open during sign-out. */
+  onOpenChange: (open: boolean) => void;
+  /** Disables both buttons and shows "Signing out...". */
+  pending: boolean;
+  onConfirm: () => void | Promise<void>;
+  /** Second line under the question. */
+  description?: string;
+  /** Merged onto the dialog content after `sm:max-w-sm`. */
+  contentClassName?: string;
+  /** Dialog title and confirm button label. Default `"Sign out"`. */
+  title?: string;
+  /** Default `"Sign out of your account?"`. */
+  question?: string;
+};
+
+/** Sign-out confirmation. The app owns the state and the sign-out call. */
+export function SignOutDialog({
+  open,
+  onOpenChange,
+  pending,
+  onConfirm,
+  description,
+  contentClassName,
+  title = "Sign out",
+  question = "Sign out of your account?",
+}: SignOutDialogProps) {
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next && pending) return;
+        onOpenChange(next);
+      }}
+    >
+      <DialogContent className={cn("sm:max-w-sm", contentClassName)}>
+        <DialogHeader>
+          <DialogTitle className="text-foreground">{title}</DialogTitle>
+          <DialogDescription className="sr-only">
+            Confirm signing out of your account
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-start gap-3 py-4">
+          <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-danger/10">
+            <IconAlertTriangle size={20} className="text-danger" />
+          </div>
+          <div>
+            <p className="text-foreground">{question}</p>
+            {description ? <p className={signOutDescriptionClass}>{description}</p> : null}
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            disabled={pending}
+            className={signOutCancelClass}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={() => void onConfirm()}
+            disabled={pending}
+            className="bg-danger text-danger-foreground"
+          >
+            {pending ? (
+              <>
+                <IconLoader2 size={16} className="animate-spin" />
+                Signing out...
+              </>
+            ) : (
+              title
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/shell/src/app-shell-classes.ts

@@ -0,0 +1,44 @@
+import { cn } from "../../src/utils/cn";
+
+// Class strings for the app shell, copied from existing app markup so an app
+// that moves to these components renders the same classes. The bare muted and
+// accent colour names match that markup and are allow-listed for check:tokens
+// on the marked lines only.
+
+/** Rail tile: size-11, rounded-lg, press scale. */
+export const railTileClass =
+  "relative flex size-11 items-center justify-center rounded-lg border active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring";
+
+const railTileActiveClass = "border-transparent bg-surface-tertiary text-foreground";
+const railTileIdleClass = "border-transparent text-muted opacity-75 hover:bg-surface-tertiary/50 hover:opacity-100 hover:text-foreground"; // check-tokens-allow: text-muted
+
+export function railTileStateClass(active: boolean): string {
+  return active ? railTileActiveClass : railTileIdleClass;
+}
+
+/** Count badge pinned to the bottom-right of a rail tile. */
+export const railBadgeClass = "absolute -bottom-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-accent px-1 text-[10px] font-semibold leading-none text-accent-foreground"; // check-tokens-allow: accent
+
+/** Static section label, sentence case, padded to match nav rows. */
+export const sidebarSectionLabelClass =
+  "sidebar-section-label px-3 py-1 text-[11px] font-medium tracking-[-0.01em]";
+
+/** Nav link text: muted until active. */
+export function sidebarNavLinkTextClass(isActive: boolean): string {
+  return cn(isActive ? "text-foreground" : "text-muted hover:text-foreground"); // check-tokens-allow: text-muted
+}
+
+/** Padding for main sidebar nav rows. */
+export function sidebarNavRowClass(isIconOnly: boolean): string {
+  return cn(isIconOnly ? "justify-center px-0 py-1.5" : "gap-3 px-3 py-1.5");
+}
+
+export const mobileMenuButtonClass = "-ml-1 h-11 w-11 shrink-0 rounded-lg text-muted hover:bg-surface-tertiary/50 hover:text-foreground"; // check-tokens-allow: text-muted
+
+export const panelCloseButtonClass = "rounded-lg text-muted hover:bg-surface-tertiary/50 hover:text-foreground"; // check-tokens-allow: text-muted
+
+export const accountEmailClass = "block truncate text-xs font-normal text-muted"; // check-tokens-allow: text-muted
+
+export const signOutDescriptionClass = "mt-1 text-sm text-muted"; // check-tokens-allow: text-muted
+
+export const signOutCancelClass = "text-muted"; // check-tokens-allow: text-muted

package/shell/src/index.ts

@@ -10,3 +10,28 @@ export type {
   SessionsHoverCardProps,
   SessionsHoverCardSurface,
 } from "./SessionsHoverCard.js";
+export { AppShell } from "./AppShell.js";
+export type { AppShellProps } from "./AppShell.js";
+export { AppSidebar } from "./AppSidebar.js";
+export type { AppSidebarProps } from "./AppSidebar.js";
+export { SidebarRail, RailTile, RailDivider } from "./SidebarRail.js";
+export type { SidebarRailProps, RailTileProps, RailDividerProps } from "./SidebarRail.js";
+export { SidebarIconTooltip } from "./SidebarIconTooltip.js";
+export type { SidebarIconTooltipProps } from "./SidebarIconTooltip.js";
+export { SidebarPanel } from "./SidebarPanel.js";
+export type { SidebarPanelProps } from "./SidebarPanel.js";
+export { SidebarAccountMenu, SidebarAccountMenuPlaceholder } from "./SidebarAccountMenu.js";
+export type {
+  SidebarAccountMenuProps,
+  SidebarAccountMenuPlaceholderProps,
+} from "./SidebarAccountMenu.js";
+export { SignOutDialog } from "./SignOutDialog.js";
+export type { SignOutDialogProps } from "./SignOutDialog.js";
+export {
+  railBadgeClass,
+  railTileClass,
+  railTileStateClass,
+  sidebarNavLinkTextClass,
+  sidebarNavRowClass,
+  sidebarSectionLabelClass,
+} from "./app-shell-classes.js";

package/src/composer/input-area/FadePresence.tsx

@@ -1,29 +1,47 @@
 import type { ReactNode } from "react";
-import { AnimatePresence, domAnimation, LazyMotion, m } from "motion/react";
+import { AnimatePresence, domAnimation, LazyMotion, m, type Variants } from "motion/react";
 import { motionFast } from "./motion";
 
 export type FadePresenceProps = {
   show: boolean;
   children: ReactNode;
   className?: string;
+  /**
+   * Optional `hidden` / `show` / `exit` variants, for example `fadeUpSpring`.
+   * Omitted, the content fades opacity only.
+   */
+  variants?: Variants;
 };
 
 /** Fades children in and out as `show` changes. Does not animate on first mount. Brings its own `LazyMotion`, so `m` components animate without an app provider. */
-export function FadePresence({ show, children, className }: FadePresenceProps) {
+export function FadePresence({ show, children, className, variants }: FadePresenceProps) {
   return (
     <LazyMotion features={domAnimation}>
     <AnimatePresence initial={false}>
       {show ? (
-        <m.div
-          key="fade-presence"
-          className={className}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={motionFast}
-        >
-          {children}
-        </m.div>
+        variants ? (
+          <m.div
+            key="fade-presence"
+            className={className}
+            initial="hidden"
+            animate="show"
+            exit="exit"
+            variants={variants}
+          >
+            {children}
+          </m.div>
+        ) : (
+          <m.div
+            key="fade-presence"
+            className={className}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={motionFast}
+          >
+            {children}
+          </m.div>
+        )
       ) : null}
     </AnimatePresence>
     </LazyMotion>

package/src/index.ts

@@ -4,6 +4,8 @@ export { cn } from "./utils/cn";
 export { floatingSurfaceClass } from "./ui/_menu-classes";
 export * from "./ui/surface-classes";
 export * from "./motion/presets";
+export * from "./motion/panel-transition";
+export { restoreModalScrollLock } from "./ui/overlay-a11y";
 
 export * from "./ui/badge";
 export * from "./ui/breadcrumb";
@@ -40,6 +42,7 @@ export {
 } from "./ui/radix-select";
 export * from "./ui/search-input";
 export * from "./ui/select";
+export * from "./ui/select-field";
 export * from "./ui/separator";
 export * from "./ui/skeleton";
 export * from "./ui/slide-over-panel";
@@ -117,6 +120,34 @@ export type {
   SessionsHoverCardSurface,
 } from "../shell/src/SessionsHoverCard";
 
+// App shell: sidebar and main page layout. Widths come from the
+// `--app-shell-*` CSS variables that `AppShell` sets.
+export { AppShell } from "../shell/src/AppShell";
+export type { AppShellProps } from "../shell/src/AppShell";
+export { AppSidebar } from "../shell/src/AppSidebar";
+export type { AppSidebarProps } from "../shell/src/AppSidebar";
+export { SidebarRail, RailTile, RailDivider } from "../shell/src/SidebarRail";
+export type { SidebarRailProps, RailTileProps, RailDividerProps } from "../shell/src/SidebarRail";
+export { SidebarIconTooltip } from "../shell/src/SidebarIconTooltip";
+export type { SidebarIconTooltipProps } from "../shell/src/SidebarIconTooltip";
+export { SidebarPanel } from "../shell/src/SidebarPanel";
+export type { SidebarPanelProps } from "../shell/src/SidebarPanel";
+export { SidebarAccountMenu, SidebarAccountMenuPlaceholder } from "../shell/src/SidebarAccountMenu";
+export type {
+  SidebarAccountMenuProps,
+  SidebarAccountMenuPlaceholderProps,
+} from "../shell/src/SidebarAccountMenu";
+export { SignOutDialog } from "../shell/src/SignOutDialog";
+export type { SignOutDialogProps } from "../shell/src/SignOutDialog";
+export {
+  railBadgeClass,
+  railTileClass,
+  railTileStateClass,
+  sidebarNavLinkTextClass,
+  sidebarNavRowClass,
+  sidebarSectionLabelClass,
+} from "../shell/src/app-shell-classes";
+
 // App helpers: confirm skip, update watcher, settings chrome, stable auth.
 export * from "../app/src/index";
 

package/src/motion/panel-transition.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import type { ComponentType, ReactNode } from "react";
+
+/** The `ViewTransition` props used here. Typed locally so consumers on `@types/react` without `ViewTransition` still typecheck. */
+type ViewTransitionLikeProps = {
+  children?: ReactNode;
+  default?: string;
+  enter?: string;
+  exit?: string;
+};
+
+const ViewTransition: ComponentType<ViewTransitionLikeProps> = Reflect.get(React, "ViewTransition");
+
+export interface PanelTransitionProps {
+  children?: ReactNode;
+  /** View transition class on enter. */
+  enter?: string;
+  /** View transition class on exit. */
+  exit?: string;
+}
+
+/**
+ * Enter and exit view transition for a panel; updates inside it do not animate.
+ * Needs a React build that exports `ViewTransition`. The app supplies the
+ * `::view-transition-*` CSS for the class names (`vt-panel-in` and
+ * `vt-panel-out` by default).
+ */
+export function PanelTransition({
+  children,
+  enter = "vt-panel-in",
+  exit = "vt-panel-out",
+}: PanelTransitionProps) {
+  return (
+    <ViewTransition default="none" enter={enter} exit={exit}>
+      {children}
+    </ViewTransition>
+  );
+}

package/src/motion/presets.ts

@@ -33,3 +33,21 @@ export const fadeUp: Variants = {
     transition: { duration: motionDuration.fast, ease: motionEase },
   },
 };
+
+export const springTransition: Transition = {
+  type: "spring",
+  bounce: 0,
+  duration: 0.35,
+};
+
+export const springFastTransition: Transition = {
+  type: "spring",
+  bounce: 0,
+  duration: 0.25,
+};
+
+export const fadeUpSpring: Variants = {
+  hidden: { opacity: 0, y: motionDistance.pageY },
+  show: { opacity: 1, y: 0, transition: springTransition },
+  exit: { opacity: 0, y: 6, transition: springFastTransition },
+};

package/src/ui/_menu-parts.tsx

@@ -0,0 +1,59 @@
+import type * as React from "react";
+
+/** `--vv-height` is optional: apps may set it to the visual viewport height. */
+export const fitViewportClass =
+  "max-sm:max-h-[min(70dvh,var(--vv-height,70dvh))] max-sm:overflow-y-auto";
+
+/** Wraps a key handler so a bare Alt press does not move focus out of the menu. */
+export function suppressAltKeyDown<E extends HTMLElement>(
+  onKeyDown: React.KeyboardEventHandler<E> | undefined,
+): React.KeyboardEventHandler<E> {
+  return (event) => {
+    if (event.key === "Alt") event.preventDefault();
+    onKeyDown?.(event);
+  };
+}
+
+/** Item row with a growing label column, used once `endContent` (or context-menu slots) are set. */
+export function MenuItemRow({
+  startContent,
+  description,
+  endContent,
+  children,
+}: {
+  startContent?: React.ReactNode;
+  description?: React.ReactNode;
+  endContent?: React.ReactNode;
+  children?: React.ReactNode;
+}) {
+  return (
+    <>
+      {startContent}
+      <div className="min-w-0 flex-1 text-left">
+        <div className="flex items-center gap-2">{children}</div>
+        {description != null ? (
+          <p className="text-xs text-muted-foreground">{description}</p>
+        ) : null}
+      </div>
+      {endContent}
+    </>
+  );
+}
+
+/** Sub-trigger label with a leading slot; used only when `startContent` is set. */
+export function SubTriggerRow({
+  startContent,
+  children,
+}: {
+  startContent: React.ReactNode;
+  children?: React.ReactNode;
+}) {
+  return (
+    <>
+      {startContent}
+      <div className="flex min-w-0 flex-1 items-center gap-2 text-left">
+        {children}
+      </div>
+    </>
+  );
+}

package/src/ui/button.tsx

@@ -3,6 +3,9 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../utils/cn";
 
+const ghostClass =
+  "text-muted-foreground hover:bg-surface-tertiary hover:text-foreground";
+
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
   {
@@ -15,8 +18,12 @@ const buttonVariants = cva(
         outline:
           "border border-border bg-transparent text-foreground hover:bg-default",
         secondary: "bg-default text-default-foreground hover:bg-default/78",
-        ghost: "text-muted-foreground hover:bg-surface-tertiary hover:text-foreground",
+        ghost: ghostClass,
         link: "text-primary underline-offset-4 hover:underline active:scale-100",
+        // Ghost plus an override; tailwind-merge drops the clashing ghost classes.
+        flat: `${ghostClass} bg-transparent text-muted hover:bg-surface-tertiary hover:text-foreground`, // check-tokens-allow: text-muted
+        success: `${ghostClass} bg-success text-success-foreground hover:bg-success/90`,
+        warning: `${ghostClass} bg-warning text-warning-foreground hover:bg-warning/90`,
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -41,21 +48,39 @@ export interface ButtonProps
   asChild?: boolean;
   /** Rendered before the children. Ignored with `asChild`. */
   startContent?: React.ReactNode;
+  /** Rendered after the children. Ignored with `asChild`. */
+  endContent?: React.ReactNode;
+  /** Disables the button, sets `data-loading`, and shows a spinner in place of `startContent`. */
+  loading?: boolean;
+}
+
+function ButtonSpinner() {
+  return (
+    <svg className="h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c3.042 1.135 5.824 3 7.938l3-2.647z" />
+    </svg>
+  );
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, startContent, children, ...props }, ref) => {
+  (
+    { className, variant, size, asChild = false, startContent, endContent, loading, children, ...props },
+    ref,
+  ) => {
     const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
+        {...(loading ? { disabled: true, "data-loading": "true" } : null)}
       >
         {asChild ? children : (
           <>
-            {startContent}
+            {loading ? <ButtonSpinner /> : startContent}
             {children}
+            {endContent}
           </>
         )}
       </Comp>

package/src/ui/card.tsx

@@ -16,6 +16,18 @@ const Card = React.forwardRef<
 ));
 Card.displayName = "Card";
 
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
@@ -24,4 +36,4 @@ const CardContent = React.forwardRef<
 ));
 CardContent.displayName = "CardContent";
 
-export { Card, CardContent };
+export { Card, CardHeader, CardContent };