@kinetixui/ui 0.5.1 → 0.6.0

package/dist/index.d.ts

@@ -1050,6 +1050,40 @@ interface NavigationBarProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "
 }
 declare const NavigationBar: React$1.ForwardRefExoticComponent<NavigationBarProps & React$1.RefAttributes<HTMLElement>>;
 
+/**
+ * AppBar — a web application top bar: a brand slot, a row of primary nav
+ * links, and a trailing actions slot inside a sticky bordered header. Below
+ * the `md` breakpoint the nav collapses behind a menu toggle into a panel
+ * under the bar.
+ *
+ * <AppBar>
+ *   <AppBarBrand>Acme</AppBarBrand>
+ *   <AppBarNav>
+ *     <AppBarLink href="/" active>Overview</AppBarLink>
+ *     <AppBarLink href="/reports">Reports</AppBarLink>
+ *   </AppBarNav>
+ *   <AppBarActions><Button size="sm">New</Button></AppBarActions>
+ * </AppBar>
+ *
+ * `NavigationBar` is the mobile back-button bar; this is the desktop app shell.
+ */
+interface AppBarCtx {
+    open: boolean;
+    setOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
+}
+declare const useAppBar: () => AppBarCtx;
+declare const AppBar: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
+declare const AppBarBrand: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const AppBarNav: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
+interface AppBarLinkProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Marks the current destination — sets `aria-current="page"` and the active style. */
+    active?: boolean;
+    /** Render as the child element (e.g. a framework `<Link>`), forwarding props. */
+    asChild?: boolean;
+}
+declare const AppBarLink: React$1.ForwardRefExoticComponent<AppBarLinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
+declare const AppBarActions: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+
 /**
  * FileUpload — a drag-and-drop zone plus file list, single or multiple.
  * Upload logic (network, storage) is the consumer's — this component is
@@ -1198,4 +1232,4 @@ declare const TableOfContents: React$1.ForwardRefExoticComponent<TableOfContents
 /** Merges Tailwind class names, resolving conflicts (clsx + tailwind-merge). */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, AudioPlayer, type AudioPlayerProps, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, type CircularProgressProps, CodeBlock, type CodeBlockFile, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Fab, type FabProps, Field, FieldControl, FieldDescription, FieldLabel, FieldMessage, FileUpload, FileUploadItem, type FileUploadItemProps, type FileUploadProps, Footer, FooterBottom, FooterColumn, type FooterColumnProps, FooterLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Image, type ImageProps, Inform, type InformProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, List, ListItem, type ListItemProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Metric, type MetricProps, Modal, type ModalProps, type ModalType, NavigationBar, type NavigationBarProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberInput, type NumberInputProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Quote, type QuoteProps, RadioGroup, RadioGroupItem, Rating, type RatingProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarProvider, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, type SpinnerProps, Stepper, type StepperProps, type StepperStep, Switch, TabBar, TabBarItem, type TabBarItemProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Textarea, type TextareaProps, Toaster, type TocItem, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, badgeVariants, buttonVariants, cn, fabVariants, formatBytes, informVariants, inputVariants, messageVariants, navigationMenuTriggerStyle, spinnerVariants, tagVariants, textareaVariants, toggleVariants, useFormField, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBar, AppBarActions, AppBarBrand, AppBarLink, type AppBarLinkProps, AppBarNav, AspectRatio, AudioPlayer, type AudioPlayerProps, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, type CircularProgressProps, CodeBlock, type CodeBlockFile, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Fab, type FabProps, Field, FieldControl, FieldDescription, FieldLabel, FieldMessage, FileUpload, FileUploadItem, type FileUploadItemProps, type FileUploadProps, Footer, FooterBottom, FooterColumn, type FooterColumnProps, FooterLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Image, type ImageProps, Inform, type InformProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, List, ListItem, type ListItemProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Metric, type MetricProps, Modal, type ModalProps, type ModalType, NavigationBar, type NavigationBarProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberInput, type NumberInputProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Quote, type QuoteProps, RadioGroup, RadioGroupItem, Rating, type RatingProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarProvider, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, type SpinnerProps, Stepper, type StepperProps, type StepperStep, Switch, TabBar, TabBarItem, type TabBarItemProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Textarea, type TextareaProps, Toaster, type TocItem, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, badgeVariants, buttonVariants, cn, fabVariants, formatBytes, informVariants, inputVariants, messageVariants, navigationMenuTriggerStyle, spinnerVariants, tagVariants, textareaVariants, toggleVariants, useAppBar, useFormField, useSidebar };

package/dist/index.js

@@ -3304,10 +3304,103 @@ var NavigationBar = React55.forwardRef(
 );
 NavigationBar.displayName = "NavigationBar";
 
-// src/components/file-upload.tsx
+// src/components/app-bar.tsx
 import * as React56 from "react";
-import { File, Loader2, TriangleAlert as TriangleAlert3, Upload, X as X6 } from "lucide-react";
+import { Slot as Slot7 } from "@radix-ui/react-slot";
+import { Menu as Menu2, X as X6 } from "lucide-react";
 import { jsx as jsx62, jsxs as jsxs33 } from "react/jsx-runtime";
+var Ctx = React56.createContext(null);
+var useAppBar = () => {
+  const ctx = React56.useContext(Ctx);
+  if (!ctx) throw new Error("AppBar parts must be used within <AppBar>");
+  return ctx;
+};
+var AppBar = React56.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const [open, setOpen] = React56.useState(false);
+    const nav = React56.Children.toArray(children).find(
+      (c) => React56.isValidElement(c) && c.type === AppBarNav
+    );
+    return /* @__PURE__ */ jsx62(Ctx.Provider, { value: { open, setOpen }, children: /* @__PURE__ */ jsxs33(
+      "header",
+      {
+        ref,
+        className: cn(
+          "sticky top-0 z-40 w-full border-b border-border bg-background/95 font-sans",
+          "backdrop-blur supports-[backdrop-filter]:bg-background/75",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs33("div", { className: "mx-auto flex h-14 max-w-screen-2xl items-center gap-4 px-4", children: [
+            children,
+            nav && /* @__PURE__ */ jsx62(
+              "button",
+              {
+                type: "button",
+                "aria-label": open ? "Close menu" : "Open menu",
+                "aria-expanded": open,
+                onClick: () => setOpen((o) => !o),
+                className: cn(
+                  "ml-auto inline-flex size-9 items-center justify-center rounded-md text-foreground outline-none transition-colors md:hidden",
+                  "hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+                ),
+                children: open ? /* @__PURE__ */ jsx62(X6, { className: "size-5" }) : /* @__PURE__ */ jsx62(Menu2, { className: "size-5" })
+              }
+            )
+          ] }),
+          nav && open && /* @__PURE__ */ jsx62("nav", { className: "flex flex-col gap-1 border-t border-border p-2 md:hidden", children: nav.props.children })
+        ]
+      }
+    ) });
+  }
+);
+AppBar.displayName = "AppBar";
+var AppBarBrand = React56.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx62(
+    "div",
+    {
+      ref,
+      className: cn("flex shrink-0 items-center gap-2 text-[15px] font-semibold text-foreground", className),
+      ...props
+    }
+  )
+);
+AppBarBrand.displayName = "AppBarBrand";
+var AppBarNav = React56.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx62("nav", { ref, className: cn("hidden items-center gap-1 md:flex", className), ...props })
+);
+AppBarNav.displayName = "AppBarNav";
+var AppBarLink = React56.forwardRef(
+  ({ className, active, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot7 : "a";
+    return /* @__PURE__ */ jsx62(
+      Comp,
+      {
+        ref,
+        "data-active": active ? "" : void 0,
+        "aria-current": active ? "page" : void 0,
+        className: cn(
+          "inline-flex items-center rounded-md px-3 py-1.5 text-sm font-medium outline-none transition-colors",
+          "text-muted-foreground hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+          "data-[active]:bg-accent data-[active]:text-foreground",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+AppBarLink.displayName = "AppBarLink";
+var AppBarActions = React56.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx62("div", { ref, className: cn("ml-auto flex shrink-0 items-center gap-2", className), ...props })
+);
+AppBarActions.displayName = "AppBarActions";
+
+// src/components/file-upload.tsx
+import * as React57 from "react";
+import { File, Loader2, TriangleAlert as TriangleAlert3, Upload, X as X7 } from "lucide-react";
+import { jsx as jsx63, jsxs as jsxs34 } from "react/jsx-runtime";
 function formatBytes(bytes) {
   if (!bytes) return "";
   const units = ["B", "KB", "MB", "GB"];
@@ -3319,16 +3412,16 @@ function formatBytes(bytes) {
   }
   return `${v.toFixed(v < 10 && i > 0 ? 1 : 0)} ${units[i]}`;
 }
-var FileUpload = React56.forwardRef(
+var FileUpload = React57.forwardRef(
   ({ className, multiple, accept, disabled, helperText, buttonLabel = "Browse files", files = [], onFilesSelected, onRemove, onRetry, ...props }, ref) => {
-    const inputRef = React56.useRef(null);
-    const [dragging, setDragging] = React56.useState(false);
+    const inputRef = React57.useRef(null);
+    const [dragging, setDragging] = React57.useState(false);
     const pick = (list) => {
       if (!list || !list.length) return;
       onFilesSelected?.(Array.from(list));
     };
-    return /* @__PURE__ */ jsxs33("div", { ref, className: cn("flex w-full flex-col gap-3 font-sans", className), ...props, children: [
-      /* @__PURE__ */ jsxs33(
+    return /* @__PURE__ */ jsxs34("div", { ref, className: cn("flex w-full flex-col gap-3 font-sans", className), ...props, children: [
+      /* @__PURE__ */ jsxs34(
         "div",
         {
           role: "button",
@@ -3358,13 +3451,13 @@ var FileUpload = React56.forwardRef(
             disabled && "pointer-events-none opacity-50"
           ),
           children: [
-            /* @__PURE__ */ jsx62(Upload, { className: "size-6 text-muted-foreground", "aria-hidden": true }),
-            /* @__PURE__ */ jsxs33("p", { className: "text-body-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx63(Upload, { className: "size-6 text-muted-foreground", "aria-hidden": true }),
+            /* @__PURE__ */ jsxs34("p", { className: "text-body-sm text-muted-foreground", children: [
               "Drag & drop ",
               multiple ? "files" : "a file",
               " here, or"
             ] }),
-            /* @__PURE__ */ jsx62(
+            /* @__PURE__ */ jsx63(
               Button,
               {
                 type: "button",
@@ -3378,8 +3471,8 @@ var FileUpload = React56.forwardRef(
                 children: buttonLabel
               }
             ),
-            helperText && /* @__PURE__ */ jsx62("p", { className: "text-body-sm text-muted-foreground", children: helperText }),
-            /* @__PURE__ */ jsx62(
+            helperText && /* @__PURE__ */ jsx63("p", { className: "text-body-sm text-muted-foreground", children: helperText }),
+            /* @__PURE__ */ jsx63(
               "input",
               {
                 ref: inputRef,
@@ -3397,7 +3490,7 @@ var FileUpload = React56.forwardRef(
           ]
         }
       ),
-      files.length > 0 && /* @__PURE__ */ jsx62("ul", { className: "flex flex-col gap-2", children: files.map((f) => /* @__PURE__ */ jsx62(FileUploadItem, { file: f, onRemove, onRetry }, f.id)) })
+      files.length > 0 && /* @__PURE__ */ jsx63("ul", { className: "flex flex-col gap-2", children: files.map((f) => /* @__PURE__ */ jsx63(FileUploadItem, { file: f, onRemove, onRetry }, f.id)) })
     ] });
   }
 );
@@ -3405,14 +3498,14 @@ FileUpload.displayName = "FileUpload";
 function FileUploadItem({ file, onRemove, onRetry }) {
   const isError = file.status === "error";
   const isLoading = file.status === "loading";
-  return /* @__PURE__ */ jsxs33("li", { className: cn("flex items-center gap-2.5 rounded-md border p-2.5 text-body-sm", isError ? "border-destructive bg-destructive/5" : "border-input"), children: [
-    isLoading ? /* @__PURE__ */ jsx62(Loader2, { className: "size-4 shrink-0 animate-spin text-muted-foreground", "aria-hidden": true }) : isError ? /* @__PURE__ */ jsx62(TriangleAlert3, { className: "size-4 shrink-0 text-destructive", "aria-hidden": true }) : /* @__PURE__ */ jsx62(File, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
-    /* @__PURE__ */ jsxs33("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx62("p", { className: "truncate text-foreground", children: file.name }),
-      isError && file.error ? /* @__PURE__ */ jsx62("p", { className: "text-destructive", children: file.error }) : /* @__PURE__ */ jsx62("p", { className: "text-muted-foreground", children: formatBytes(file.size) }),
-      isLoading && typeof file.progress === "number" && /* @__PURE__ */ jsx62("div", { className: "mt-1 h-1 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx62("div", { className: "h-full bg-primary transition-[width]", style: { width: `${Math.max(0, Math.min(100, file.progress))}%` } }) })
+  return /* @__PURE__ */ jsxs34("li", { className: cn("flex items-center gap-2.5 rounded-md border p-2.5 text-body-sm", isError ? "border-destructive bg-destructive/5" : "border-input"), children: [
+    isLoading ? /* @__PURE__ */ jsx63(Loader2, { className: "size-4 shrink-0 animate-spin text-muted-foreground", "aria-hidden": true }) : isError ? /* @__PURE__ */ jsx63(TriangleAlert3, { className: "size-4 shrink-0 text-destructive", "aria-hidden": true }) : /* @__PURE__ */ jsx63(File, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+    /* @__PURE__ */ jsxs34("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx63("p", { className: "truncate text-foreground", children: file.name }),
+      isError && file.error ? /* @__PURE__ */ jsx63("p", { className: "text-destructive", children: file.error }) : /* @__PURE__ */ jsx63("p", { className: "text-muted-foreground", children: formatBytes(file.size) }),
+      isLoading && typeof file.progress === "number" && /* @__PURE__ */ jsx63("div", { className: "mt-1 h-1 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx63("div", { className: "h-full bg-primary transition-[width]", style: { width: `${Math.max(0, Math.min(100, file.progress))}%` } }) })
     ] }),
-    isError && onRetry && /* @__PURE__ */ jsx62(
+    isError && onRetry && /* @__PURE__ */ jsx63(
       "button",
       {
         type: "button",
@@ -3421,14 +3514,14 @@ function FileUploadItem({ file, onRemove, onRetry }) {
         children: "Retry"
       }
     ),
-    onRemove && /* @__PURE__ */ jsx62(
+    onRemove && /* @__PURE__ */ jsx63(
       "button",
       {
         type: "button",
         onClick: () => onRemove(file.id),
         "aria-label": `Remove ${file.name}`,
         className: "shrink-0 rounded-[2px] p-0.5 text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-current",
-        children: /* @__PURE__ */ jsx62(X6, { className: "size-3.5" })
+        children: /* @__PURE__ */ jsx63(X7, { className: "size-3.5" })
       }
     )
   ] });
@@ -3436,17 +3529,17 @@ function FileUploadItem({ file, onRemove, onRetry }) {
 FileUploadItem.displayName = "FileUploadItem";
 
 // src/components/date-picker.tsx
-import * as React57 from "react";
+import * as React58 from "react";
 import { CalendarIcon } from "lucide-react";
 import { format } from "date-fns";
-import { jsx as jsx63, jsxs as jsxs34 } from "react/jsx-runtime";
-var DatePicker = React57.forwardRef(
+import { jsx as jsx64, jsxs as jsxs35 } from "react/jsx-runtime";
+var DatePicker = React58.forwardRef(
   ({ value, onChange, placeholder = "Select date", label, helperText, error, disabled, className, formatStr = "PP", calendarProps }, ref) => {
-    const [open, setOpen] = React57.useState(false);
-    return /* @__PURE__ */ jsxs34("div", { className: cn("flex flex-col gap-1.5 font-sans", className), children: [
-      label && /* @__PURE__ */ jsx63("label", { className: "text-label-md font-medium text-foreground", children: label }),
-      /* @__PURE__ */ jsxs34(Popover, { open, onOpenChange: setOpen, children: [
-        /* @__PURE__ */ jsx63(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs34(
+    const [open, setOpen] = React58.useState(false);
+    return /* @__PURE__ */ jsxs35("div", { className: cn("flex flex-col gap-1.5 font-sans", className), children: [
+      label && /* @__PURE__ */ jsx64("label", { className: "text-label-md font-medium text-foreground", children: label }),
+      /* @__PURE__ */ jsxs35(Popover, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx64(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs35(
           Button,
           {
             ref,
@@ -3455,12 +3548,12 @@ var DatePicker = React57.forwardRef(
             disabled,
             className: cn("w-full justify-start px-3 font-normal", !value && "text-muted-foreground", error && "border-destructive text-destructive"),
             children: [
-              /* @__PURE__ */ jsx63(CalendarIcon, { className: "size-4" }),
+              /* @__PURE__ */ jsx64(CalendarIcon, { className: "size-4" }),
               value ? format(value, formatStr) : placeholder
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx63(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx63(
+        /* @__PURE__ */ jsx64(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx64(
           Calendar,
           {
             mode: "single",
@@ -3473,21 +3566,21 @@ var DatePicker = React57.forwardRef(
           }
         ) })
       ] }),
-      helperText && /* @__PURE__ */ jsx63("p", { className: cn("text-body-sm", error ? "text-destructive" : "text-muted-foreground"), children: helperText })
+      helperText && /* @__PURE__ */ jsx64("p", { className: cn("text-body-sm", error ? "text-destructive" : "text-muted-foreground"), children: helperText })
     ] });
   }
 );
 DatePicker.displayName = "DatePicker";
 
 // src/components/code-block.tsx
-import * as React58 from "react";
+import * as React59 from "react";
 import { Check as Check7, Copy } from "lucide-react";
-import { jsx as jsx64, jsxs as jsxs35 } from "react/jsx-runtime";
-var CodeBlock = React58.forwardRef(
+import { jsx as jsx65, jsxs as jsxs36 } from "react/jsx-runtime";
+var CodeBlock = React59.forwardRef(
   ({ className, code, language, filename, files, hideCopy, ...props }, ref) => {
     const tabs = files && files.length > 0 ? files : [{ name: filename ?? language ?? "", code: code ?? "" }];
-    const [active, setActive] = React58.useState(0);
-    const [copied, setCopied] = React58.useState(false);
+    const [active, setActive] = React59.useState(0);
+    const [copied, setCopied] = React59.useState(false);
     const current = tabs[active] ?? tabs[0];
     const hasHeader = tabs.length > 1 || !!current.name;
     const copy = async () => {
@@ -3498,9 +3591,9 @@ var CodeBlock = React58.forwardRef(
       } catch {
       }
     };
-    return /* @__PURE__ */ jsxs35("div", { ref, className: cn("overflow-hidden rounded-md border border-input bg-muted font-sans", className), ...props, children: [
-      hasHeader && /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between border-b border-input bg-background px-2", children: [
-        /* @__PURE__ */ jsx64("div", { className: "flex", children: tabs.map((t, i) => /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsxs36("div", { ref, className: cn("overflow-hidden rounded-md border border-input bg-muted font-sans", className), ...props, children: [
+      hasHeader && /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between border-b border-input bg-background px-2", children: [
+        /* @__PURE__ */ jsx65("div", { className: "flex", children: tabs.map((t, i) => /* @__PURE__ */ jsx65(
           "button",
           {
             type: "button",
@@ -3513,29 +3606,29 @@ var CodeBlock = React58.forwardRef(
           },
           t.name || i
         )) }),
-        !hideCopy && /* @__PURE__ */ jsx64(
+        !hideCopy && /* @__PURE__ */ jsx65(
           "button",
           {
             type: "button",
             onClick: copy,
             "aria-label": "Copy code",
             className: "rounded-[2px] p-1.5 text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-current",
-            children: copied ? /* @__PURE__ */ jsx64(Check7, { className: "size-4" }) : /* @__PURE__ */ jsx64(Copy, { className: "size-4" })
+            children: copied ? /* @__PURE__ */ jsx65(Check7, { className: "size-4" }) : /* @__PURE__ */ jsx65(Copy, { className: "size-4" })
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs35("div", { className: "relative", children: [
-        !hasHeader && !hideCopy && /* @__PURE__ */ jsx64(
+      /* @__PURE__ */ jsxs36("div", { className: "relative", children: [
+        !hasHeader && !hideCopy && /* @__PURE__ */ jsx65(
           "button",
           {
             type: "button",
             onClick: copy,
             "aria-label": "Copy code",
             className: "absolute right-2 top-2 rounded-[2px] p-1.5 text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-current",
-            children: copied ? /* @__PURE__ */ jsx64(Check7, { className: "size-4" }) : /* @__PURE__ */ jsx64(Copy, { className: "size-4" })
+            children: copied ? /* @__PURE__ */ jsx65(Check7, { className: "size-4" }) : /* @__PURE__ */ jsx65(Copy, { className: "size-4" })
           }
         ),
-        /* @__PURE__ */ jsx64("pre", { className: "overflow-x-auto p-4 text-body-sm text-foreground", children: /* @__PURE__ */ jsx64("code", { children: current.code }) })
+        /* @__PURE__ */ jsx65("pre", { className: "overflow-x-auto p-4 text-body-sm text-foreground", children: /* @__PURE__ */ jsx65("code", { children: current.code }) })
       ] })
     ] });
   }
@@ -3543,18 +3636,18 @@ var CodeBlock = React58.forwardRef(
 CodeBlock.displayName = "CodeBlock";
 
 // src/components/metric.tsx
-import * as React59 from "react";
+import * as React60 from "react";
 import { ArrowDown, ArrowUp } from "lucide-react";
-import { jsx as jsx65, jsxs as jsxs36 } from "react/jsx-runtime";
-var Metric = React59.forwardRef(
-  ({ className, label, value, trend, change, icon, chart, ...props }, ref) => /* @__PURE__ */ jsxs36("div", { ref, className: cn("flex flex-col gap-2 rounded-md border border-input p-4 font-sans", className), ...props, children: [
-    /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx65("p", { className: "text-body-sm text-muted-foreground", children: label }),
-      icon && /* @__PURE__ */ jsx65("span", { className: "text-muted-foreground [&_svg]:size-5", children: icon })
+import { jsx as jsx66, jsxs as jsxs37 } from "react/jsx-runtime";
+var Metric = React60.forwardRef(
+  ({ className, label, value, trend, change, icon, chart, ...props }, ref) => /* @__PURE__ */ jsxs37("div", { ref, className: cn("flex flex-col gap-2 rounded-md border border-input p-4 font-sans", className), ...props, children: [
+    /* @__PURE__ */ jsxs37("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx66("p", { className: "text-body-sm text-muted-foreground", children: label }),
+      icon && /* @__PURE__ */ jsx66("span", { className: "text-muted-foreground [&_svg]:size-5", children: icon })
     ] }),
-    /* @__PURE__ */ jsxs36("div", { className: "flex items-end justify-between gap-2", children: [
-      /* @__PURE__ */ jsx65("p", { className: "text-headline-sm font-medium text-foreground", children: value }),
-      trend && /* @__PURE__ */ jsxs36(
+    /* @__PURE__ */ jsxs37("div", { className: "flex items-end justify-between gap-2", children: [
+      /* @__PURE__ */ jsx66("p", { className: "text-headline-sm font-medium text-foreground", children: value }),
+      trend && /* @__PURE__ */ jsxs37(
         "span",
         {
           className: cn(
@@ -3564,25 +3657,25 @@ var Metric = React59.forwardRef(
             trend === "neutral" && "text-muted-foreground"
           ),
           children: [
-            trend === "up" && /* @__PURE__ */ jsx65(ArrowUp, { className: "size-3.5" }),
-            trend === "down" && /* @__PURE__ */ jsx65(ArrowDown, { className: "size-3.5" }),
+            trend === "up" && /* @__PURE__ */ jsx66(ArrowUp, { className: "size-3.5" }),
+            trend === "down" && /* @__PURE__ */ jsx66(ArrowDown, { className: "size-3.5" }),
             change
           ]
         }
       )
     ] }),
-    chart && /* @__PURE__ */ jsx65("div", { className: "mt-1", children: chart })
+    chart && /* @__PURE__ */ jsx66("div", { className: "mt-1", children: chart })
   ] })
 );
 Metric.displayName = "Metric";
 
 // src/components/number-input.tsx
-import * as React60 from "react";
+import * as React61 from "react";
 import { Minus as Minus3, Plus } from "lucide-react";
-import { jsx as jsx66, jsxs as jsxs37 } from "react/jsx-runtime";
-var NumberInput = React60.forwardRef(
+import { jsx as jsx67, jsxs as jsxs38 } from "react/jsx-runtime";
+var NumberInput = React61.forwardRef(
   ({ className, value, defaultValue = 0, min, max, step = 1, onChange, disabled, ...props }, ref) => {
-    const [internal, setInternal] = React60.useState(defaultValue);
+    const [internal, setInternal] = React61.useState(defaultValue);
     const current = value ?? internal;
     const clamp = (n) => {
       let v = n;
@@ -3595,7 +3688,7 @@ var NumberInput = React60.forwardRef(
       setInternal(v);
       onChange?.(v);
     };
-    return /* @__PURE__ */ jsxs37(
+    return /* @__PURE__ */ jsxs38(
       "div",
       {
         className: cn(
@@ -3604,7 +3697,7 @@ var NumberInput = React60.forwardRef(
           className
         ),
         children: [
-          /* @__PURE__ */ jsx66(
+          /* @__PURE__ */ jsx67(
             "button",
             {
               type: "button",
@@ -3612,10 +3705,10 @@ var NumberInput = React60.forwardRef(
               disabled: disabled || min != null && current <= min,
               onClick: () => set(current - step),
               className: "flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-              children: /* @__PURE__ */ jsx66(Minus3, { className: "size-4" })
+              children: /* @__PURE__ */ jsx67(Minus3, { className: "size-4" })
             }
           ),
-          /* @__PURE__ */ jsx66(
+          /* @__PURE__ */ jsx67(
             "input",
             {
               ref,
@@ -3634,7 +3727,7 @@ var NumberInput = React60.forwardRef(
               ...props
             }
           ),
-          /* @__PURE__ */ jsx66(
+          /* @__PURE__ */ jsx67(
             "button",
             {
               type: "button",
@@ -3642,7 +3735,7 @@ var NumberInput = React60.forwardRef(
               disabled: disabled || max != null && current >= max,
               onClick: () => set(current + step),
               className: "flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-              children: /* @__PURE__ */ jsx66(Plus, { className: "size-4" })
+              children: /* @__PURE__ */ jsx67(Plus, { className: "size-4" })
             }
           )
         ]
@@ -3653,20 +3746,20 @@ var NumberInput = React60.forwardRef(
 NumberInput.displayName = "NumberInput";
 
 // src/components/quote.tsx
-import * as React61 from "react";
-import { jsx as jsx67, jsxs as jsxs38 } from "react/jsx-runtime";
-var Quote = React61.forwardRef(
-  ({ className, author, authorTitle, avatar, children, ...props }, ref) => /* @__PURE__ */ jsxs38("figure", { ref, className: cn("flex flex-col gap-4 font-sans", className), ...props, children: [
-    /* @__PURE__ */ jsxs38("blockquote", { className: "text-title-md font-medium text-foreground", children: [
+import * as React62 from "react";
+import { jsx as jsx68, jsxs as jsxs39 } from "react/jsx-runtime";
+var Quote = React62.forwardRef(
+  ({ className, author, authorTitle, avatar, children, ...props }, ref) => /* @__PURE__ */ jsxs39("figure", { ref, className: cn("flex flex-col gap-4 font-sans", className), ...props, children: [
+    /* @__PURE__ */ jsxs39("blockquote", { className: "text-title-md font-medium text-foreground", children: [
       "\u201C",
       children,
       "\u201D"
     ] }),
-    (author || authorTitle) && /* @__PURE__ */ jsxs38("figcaption", { className: "flex items-center gap-3", children: [
+    (author || authorTitle) && /* @__PURE__ */ jsxs39("figcaption", { className: "flex items-center gap-3", children: [
       avatar,
-      /* @__PURE__ */ jsxs38("div", { children: [
-        author && /* @__PURE__ */ jsx67("p", { className: "text-body-md font-medium text-foreground", children: author }),
-        authorTitle && /* @__PURE__ */ jsx67("p", { className: "text-body-sm text-muted-foreground", children: authorTitle })
+      /* @__PURE__ */ jsxs39("div", { children: [
+        author && /* @__PURE__ */ jsx68("p", { className: "text-body-md font-medium text-foreground", children: author }),
+        authorTitle && /* @__PURE__ */ jsx68("p", { className: "text-body-sm text-muted-foreground", children: authorTitle })
       ] })
     ] })
   ] })
@@ -3674,21 +3767,21 @@ var Quote = React61.forwardRef(
 Quote.displayName = "Quote";
 
 // src/components/footer.tsx
-import * as React62 from "react";
-import { jsx as jsx68, jsxs as jsxs39 } from "react/jsx-runtime";
-var Footer = React62.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx68("footer", { ref, className: cn("w-full border-t border-border bg-background px-6 py-10 font-sans", className), ...props, children })
+import * as React63 from "react";
+import { jsx as jsx69, jsxs as jsxs40 } from "react/jsx-runtime";
+var Footer = React63.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx69("footer", { ref, className: cn("w-full border-t border-border bg-background px-6 py-10 font-sans", className), ...props, children })
 );
 Footer.displayName = "Footer";
-var FooterColumn = React62.forwardRef(
-  ({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsxs39("div", { ref, className: cn("flex flex-col gap-3", className), ...props, children: [
-    /* @__PURE__ */ jsx68("p", { className: "text-label-md font-medium text-foreground", children: title }),
-    /* @__PURE__ */ jsx68("div", { className: "flex flex-col gap-2", children })
+var FooterColumn = React63.forwardRef(
+  ({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsxs40("div", { ref, className: cn("flex flex-col gap-3", className), ...props, children: [
+    /* @__PURE__ */ jsx69("p", { className: "text-label-md font-medium text-foreground", children: title }),
+    /* @__PURE__ */ jsx69("div", { className: "flex flex-col gap-2", children })
   ] })
 );
 FooterColumn.displayName = "FooterColumn";
-var FooterLink = React62.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx68(
+var FooterLink = React63.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx69(
     "a",
     {
       ref,
@@ -3701,8 +3794,8 @@ var FooterLink = React62.forwardRef(
   )
 );
 FooterLink.displayName = "FooterLink";
-var FooterBottom = React62.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx68(
+var FooterBottom = React63.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx69(
     "div",
     {
       ref,
@@ -3717,12 +3810,12 @@ var FooterBottom = React62.forwardRef(
 FooterBottom.displayName = "FooterBottom";
 
 // src/components/table-of-contents.tsx
-import * as React63 from "react";
-import { jsx as jsx69 } from "react/jsx-runtime";
-var TableOfContents = React63.forwardRef(
-  ({ className, items, active, ...props }, ref) => /* @__PURE__ */ jsx69("nav", { ref, "aria-label": "Table of contents", className: cn("flex flex-col gap-0.5 font-sans", className), ...props, children: items.map((item) => {
+import * as React64 from "react";
+import { jsx as jsx70 } from "react/jsx-runtime";
+var TableOfContents = React64.forwardRef(
+  ({ className, items, active, ...props }, ref) => /* @__PURE__ */ jsx70("nav", { ref, "aria-label": "Table of contents", className: cn("flex flex-col gap-0.5 font-sans", className), ...props, children: items.map((item) => {
     const isActive = item.id === active;
-    return /* @__PURE__ */ jsx69(
+    return /* @__PURE__ */ jsx70(
       "a",
       {
         href: `#${item.id}`,
@@ -3758,6 +3851,11 @@ export {
   AlertDialogTitle,
   AlertDialogTrigger,
   AlertTitle,
+  AppBar,
+  AppBarActions,
+  AppBarBrand,
+  AppBarLink,
+  AppBarNav,
   AspectRatio,
   AudioPlayer,
   Avatar,
@@ -4024,6 +4122,7 @@ export {
   textareaVariants,
   toast,
   toggleVariants,
+  useAppBar,
   useFormField,
   useSidebar
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "private": false,
   "description": "KinetixUI React components — CVA + Radix + Tailwind on the KinetixUI token contract. Also distributed via the kinetixui CLI as a component registry.",
   "keywords": [
@@ -89,7 +89,7 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@kinetixui/tokens": "0.5.1",
+    "@kinetixui/tokens": "0.6.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/src/components/app-bar.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { Menu, X } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * AppBar — a web application top bar: a brand slot, a row of primary nav
+ * links, and a trailing actions slot inside a sticky bordered header. Below
+ * the `md` breakpoint the nav collapses behind a menu toggle into a panel
+ * under the bar.
+ *
+ * <AppBar>
+ *   <AppBarBrand>Acme</AppBarBrand>
+ *   <AppBarNav>
+ *     <AppBarLink href="/" active>Overview</AppBarLink>
+ *     <AppBarLink href="/reports">Reports</AppBarLink>
+ *   </AppBarNav>
+ *   <AppBarActions><Button size="sm">New</Button></AppBarActions>
+ * </AppBar>
+ *
+ * `NavigationBar` is the mobile back-button bar; this is the desktop app shell.
+ */
+
+interface AppBarCtx {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+const Ctx = React.createContext<AppBarCtx | null>(null);
+const useAppBar = () => {
+  const ctx = React.useContext(Ctx);
+  if (!ctx) throw new Error("AppBar parts must be used within <AppBar>");
+  return ctx;
+};
+
+const AppBar = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ className, children, ...props }, ref) => {
+    const [open, setOpen] = React.useState(false);
+
+    const nav = React.Children.toArray(children).find(
+      (c): c is React.ReactElement<React.ComponentProps<typeof AppBarNav>> =>
+        React.isValidElement(c) && c.type === AppBarNav,
+    );
+
+    return (
+      <Ctx.Provider value={{ open, setOpen }}>
+        <header
+          ref={ref}
+          className={cn(
+            "sticky top-0 z-40 w-full border-b border-border bg-background/95 font-sans",
+            "backdrop-blur supports-[backdrop-filter]:bg-background/75",
+            className,
+          )}
+          {...props}
+        >
+          <div className="mx-auto flex h-14 max-w-screen-2xl items-center gap-4 px-4">
+            {children}
+            {nav && (
+              <button
+                type="button"
+                aria-label={open ? "Close menu" : "Open menu"}
+                aria-expanded={open}
+                onClick={() => setOpen((o) => !o)}
+                className={cn(
+                  "ml-auto inline-flex size-9 items-center justify-center rounded-md text-foreground outline-none transition-colors md:hidden",
+                  "hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring",
+                )}
+              >
+                {open ? <X className="size-5" /> : <Menu className="size-5" />}
+              </button>
+            )}
+          </div>
+          {nav && open && (
+            <nav className="flex flex-col gap-1 border-t border-border p-2 md:hidden">
+              {nav.props.children}
+            </nav>
+          )}
+        </header>
+      </Ctx.Provider>
+    );
+  },
+);
+AppBar.displayName = "AppBar";
+
+const AppBarBrand = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex shrink-0 items-center gap-2 text-[15px] font-semibold text-foreground", className)}
+      {...props}
+    />
+  ),
+);
+AppBarBrand.displayName = "AppBarBrand";
+
+const AppBarNav = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ className, ...props }, ref) => (
+    <nav ref={ref} className={cn("hidden items-center gap-1 md:flex", className)} {...props} />
+  ),
+);
+AppBarNav.displayName = "AppBarNav";
+
+export interface AppBarLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Marks the current destination — sets `aria-current="page"` and the active style. */
+  active?: boolean;
+  /** Render as the child element (e.g. a framework `<Link>`), forwarding props. */
+  asChild?: boolean;
+}
+
+const AppBarLink = React.forwardRef<HTMLAnchorElement, AppBarLinkProps>(
+  ({ className, active, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return (
+      <Comp
+        ref={ref}
+        data-active={active ? "" : undefined}
+        aria-current={active ? "page" : undefined}
+        className={cn(
+          "inline-flex items-center rounded-md px-3 py-1.5 text-sm font-medium outline-none transition-colors",
+          "text-muted-foreground hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+          "data-[active]:bg-accent data-[active]:text-foreground",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+AppBarLink.displayName = "AppBarLink";
+
+const AppBarActions = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("ml-auto flex shrink-0 items-center gap-2", className)} {...props} />
+  ),
+);
+AppBarActions.displayName = "AppBarActions";
+
+export { AppBar, AppBarBrand, AppBarNav, AppBarLink, AppBarActions, useAppBar };

package/src/index.ts

@@ -284,6 +284,15 @@ export { Stepper, type StepperProps, type StepperStep } from "./components/stepp
 export { Fab, fabVariants, type FabProps } from "./components/fab";
 export { TabBar, TabBarItem, type TabBarItemProps } from "./components/tab-bar";
 export { NavigationBar, type NavigationBarProps } from "./components/navigation-bar";
+export {
+  AppBar,
+  AppBarBrand,
+  AppBarNav,
+  AppBarLink,
+  AppBarActions,
+  useAppBar,
+  type AppBarLinkProps,
+} from "./components/app-bar";
 export {
   FileUpload,
   FileUploadItem,

package/src/stories/AppBar.stories.tsx

@@ -0,0 +1,46 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AppBar, AppBarActions, AppBarBrand, AppBarLink, AppBarNav } from "@kinetixui/ui";
+import { Bell } from "lucide-react";
+
+const Demo = () => (
+    <AppBar className="w-full max-w-2xl rounded-md border">
+      <AppBarBrand>
+        <span className="grid size-6 place-items-center rounded bg-primary text-[11px] font-bold text-primary-foreground">
+          A
+        </span>
+        Acme
+      </AppBarBrand>
+      <AppBarNav>
+        <AppBarLink href="#" active>
+          Overview
+        </AppBarLink>
+        <AppBarLink href="#">Reports</AppBarLink>
+        <AppBarLink href="#">Team</AppBarLink>
+      </AppBarNav>
+      <AppBarActions>
+        <button
+          type="button"
+          aria-label="Notifications"
+          className="flex size-9 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+        >
+          <Bell className="size-4" />
+        </button>
+        <span className="grid size-8 place-items-center rounded-full bg-muted text-xs font-medium">KZ</span>
+      </AppBarActions>
+    </AppBar>
+  );
+
+const meta = {
+  title: "Components/AppBar",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<AppBar>\\n  <AppBarBrand>Acme</AppBarBrand>\\n  <AppBarNav>\\n    <AppBarLink href=\"/\" active>Overview</AppBarLink>\\n    <AppBarLink href=\"/reports\">Reports</AppBarLink>\\n    <AppBarLink href=\"/team\">Team</AppBarLink>\\n  </AppBarNav>\\n  <AppBarActions>\\n    <Button variant=\"Ghost\" size=\"icon\"><Bell /></Button>\\n    <Avatar>…</Avatar>\\n  </AppBarActions>\\n</AppBar>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };