@kinetixui/ui 0.7.0 → 0.8.0

package/dist/index.d.ts

@@ -1217,7 +1217,42 @@ interface TableOfContentsProps extends React$1.HTMLAttributes<HTMLElement> {
 }
 declare const TableOfContents: React$1.ForwardRefExoticComponent<TableOfContentsProps & React$1.RefAttributes<HTMLElement>>;
 
+/**
+ * Kbd — a single keyboard key glyph, e.g. `<Kbd>⌘</Kbd>`. Wrap several in
+ * `KbdGroup` for a shortcut combo (`⌘` `K`). Gap-fill addition (not in the
+ * original Figma source) — matches the shadcn/ui Kbd/KbdGroup API shape.
+ */
+interface KbdProps extends React$1.HTMLAttributes<HTMLElement> {
+    /** render as the single child element (Radix Slot) instead of <kbd> */
+    asChild?: boolean;
+}
+declare const Kbd: React$1.ForwardRefExoticComponent<KbdProps & React$1.RefAttributes<HTMLElement>>;
+interface KbdGroupProps extends React$1.HTMLAttributes<HTMLElement> {
+}
+/** Lays out multiple `Kbd` for a shortcut combo — `<KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>` */
+declare const KbdGroup: React$1.ForwardRefExoticComponent<KbdGroupProps & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * Empty — a placeholder for a zero-results state (an empty table, an empty
+ * search, a fresh workspace with nothing in it yet). Composition-based, like
+ * Card: `Empty` is an unstyled-beyond-layout root so it composes cleanly
+ * inside whatever already has a border (a Table cell, a Card, a bare page
+ * section) instead of forcing its own. Gap-fill addition (not in the
+ * original Figma source) — matches the shadcn/ui Empty API shape.
+ */
+declare const Empty: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const EmptyHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const emptyMediaVariants: (props?: ({
+    variant?: "icon" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface EmptyMediaProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof emptyMediaVariants> {
+}
+declare const EmptyMedia: React$1.ForwardRefExoticComponent<EmptyMediaProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const EmptyTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const EmptyDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const EmptyContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+
 /** 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, 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 };
+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, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, EmptyTitle, 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, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, 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, emptyMediaVariants, fabVariants, formatBytes, informVariants, inputVariants, messageVariants, navigationMenuTriggerStyle, spinnerVariants, tagVariants, textareaVariants, toggleVariants, useAppBar, useFormField, useSidebar };

package/dist/index.js

@@ -3867,6 +3867,74 @@ var TableOfContents = React65.forwardRef(
   }) })
 );
 TableOfContents.displayName = "TableOfContents";
+
+// src/components/kbd.tsx
+import * as React66 from "react";
+import { Slot as Slot10 } from "@radix-ui/react-slot";
+import { jsx as jsx71 } from "react/jsx-runtime";
+var Kbd = React66.forwardRef(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot10 : "kbd";
+  return /* @__PURE__ */ jsx71(
+    Comp,
+    {
+      ref,
+      className: cn(
+        "inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-input bg-muted px-1.5 font-sans text-[11px] font-medium text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+});
+Kbd.displayName = "Kbd";
+var KbdGroup = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx71("kbd", { ref, className: cn("inline-flex items-center gap-1", className), ...props }));
+KbdGroup.displayName = "KbdGroup";
+
+// src/components/empty.tsx
+import * as React67 from "react";
+import { cva as cva18 } from "class-variance-authority";
+import { jsx as jsx72 } from "react/jsx-runtime";
+var Empty = React67.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx72(
+    "div",
+    {
+      ref,
+      className: cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 p-10 text-center font-sans", className),
+      ...props
+    }
+  )
+);
+Empty.displayName = "Empty";
+var EmptyHeader = React67.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx72("div", { ref, className: cn("flex max-w-sm flex-col items-center gap-2", className), ...props })
+);
+EmptyHeader.displayName = "EmptyHeader";
+var emptyMediaVariants = cva18("flex shrink-0 items-center justify-center", {
+  variants: {
+    /** `icon` gives a muted circular badge behind the icon; `default` renders the child as-is (an illustration, an avatar, …) */
+    variant: {
+      default: "",
+      icon: "size-10 rounded-full bg-muted text-muted-foreground [&_svg]:size-5"
+    }
+  },
+  defaultVariants: { variant: "default" }
+});
+var EmptyMedia = React67.forwardRef(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx72("div", { ref, className: cn(emptyMediaVariants({ variant }), className), ...props })
+);
+EmptyMedia.displayName = "EmptyMedia";
+var EmptyTitle = React67.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx72("p", { ref, className: cn("text-title-sm font-medium text-foreground", className), ...props })
+);
+EmptyTitle.displayName = "EmptyTitle";
+var EmptyDescription = React67.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx72("p", { ref, className: cn("text-body-sm text-muted-foreground", className), ...props })
+);
+EmptyDescription.displayName = "EmptyDescription";
+var EmptyContent = React67.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx72("div", { ref, className: cn("flex flex-col items-center gap-3", className), ...props })
+);
+EmptyContent.displayName = "EmptyContent";
 export {
   Accordion,
   AccordionContent,
@@ -3991,6 +4059,12 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
   Fab,
   Field,
   FieldControl,
@@ -4025,6 +4099,8 @@ export {
   InputOTPGroup,
   InputOTPSeparator,
   InputOTPSlot,
+  Kbd,
+  KbdGroup,
   Label2 as Label,
   List3 as List,
   ListItem,
@@ -4146,6 +4222,7 @@ export {
   badgeVariants,
   buttonVariants,
   cn,
+  emptyMediaVariants,
   fabVariants,
   formatBytes,
   informVariants,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.7.0",
+  "version": "0.8.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": [
@@ -90,7 +90,7 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@kinetixui/tokens": "0.7.0",
+    "@kinetixui/tokens": "0.8.0",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",

package/src/components/empty.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+/**
+ * Empty — a placeholder for a zero-results state (an empty table, an empty
+ * search, a fresh workspace with nothing in it yet). Composition-based, like
+ * Card: `Empty` is an unstyled-beyond-layout root so it composes cleanly
+ * inside whatever already has a border (a Table cell, a Card, a bare page
+ * section) instead of forcing its own. Gap-fill addition (not in the
+ * original Figma source) — matches the shadcn/ui Empty API shape.
+ */
+const Empty = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 p-10 text-center font-sans", className)}
+      {...props}
+    />
+  ),
+);
+Empty.displayName = "Empty";
+
+const EmptyHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex max-w-sm flex-col items-center gap-2", className)} {...props} />
+  ),
+);
+EmptyHeader.displayName = "EmptyHeader";
+
+const emptyMediaVariants = cva("flex shrink-0 items-center justify-center", {
+  variants: {
+    /** `icon` gives a muted circular badge behind the icon; `default` renders the child as-is (an illustration, an avatar, …) */
+    variant: {
+      default: "",
+      icon: "size-10 rounded-full bg-muted text-muted-foreground [&_svg]:size-5",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+export interface EmptyMediaProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof emptyMediaVariants> {}
+
+const EmptyMedia = React.forwardRef<HTMLDivElement, EmptyMediaProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div ref={ref} className={cn(emptyMediaVariants({ variant }), className)} {...props} />
+  ),
+);
+EmptyMedia.displayName = "EmptyMedia";
+
+const EmptyTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-title-sm font-medium text-foreground", className)} {...props} />
+  ),
+);
+EmptyTitle.displayName = "EmptyTitle";
+
+const EmptyDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-body-sm text-muted-foreground", className)} {...props} />
+  ),
+);
+EmptyDescription.displayName = "EmptyDescription";
+
+const EmptyContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col items-center gap-3", className)} {...props} />
+  ),
+);
+EmptyContent.displayName = "EmptyContent";
+
+export { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent, emptyMediaVariants };

package/src/components/kbd.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../lib/utils";
+
+/**
+ * Kbd — a single keyboard key glyph, e.g. `<Kbd>⌘</Kbd>`. Wrap several in
+ * `KbdGroup` for a shortcut combo (`⌘` `K`). Gap-fill addition (not in the
+ * original Figma source) — matches the shadcn/ui Kbd/KbdGroup API shape.
+ */
+export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+  /** render as the single child element (Radix Slot) instead of <kbd> */
+  asChild?: boolean;
+}
+
+const Kbd = React.forwardRef<HTMLElement, KbdProps>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "kbd";
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        "inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-input bg-muted px-1.5 font-sans text-[11px] font-medium text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+Kbd.displayName = "Kbd";
+
+export interface KbdGroupProps extends React.HTMLAttributes<HTMLElement> {}
+
+/** Lays out multiple `Kbd` for a shortcut combo — `<KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>` */
+const KbdGroup = React.forwardRef<HTMLElement, KbdGroupProps>(({ className, ...props }, ref) => (
+  <kbd ref={ref} className={cn("inline-flex items-center gap-1", className)} {...props} />
+));
+KbdGroup.displayName = "KbdGroup";
+
+export { Kbd, KbdGroup };

package/src/index.ts

@@ -311,4 +311,17 @@ export { Quote, type QuoteProps } from "./components/quote";
 export { Footer, FooterColumn, FooterLink, FooterBottom, type FooterColumnProps } from "./components/footer";
 export { TableOfContents, type TableOfContentsProps, type TocItem } from "./components/table-of-contents";
 
+/* Batch 6 — infra/design-system audit gap-fill components */
+export { Kbd, KbdGroup, type KbdProps, type KbdGroupProps } from "./components/kbd";
+export {
+  Empty,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  emptyMediaVariants,
+  type EmptyMediaProps,
+} from "./components/empty";
+
 export { cn } from "./lib/utils";

package/src/stories/Empty.stories.tsx

@@ -0,0 +1,35 @@
+/* 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 { Button, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@kinetixui/ui";
+import { Search } from "lucide-react";
+
+const Demo = () => (
+    <Empty className="w-full max-w-sm rounded-lg border border-dashed">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <Search />
+        </EmptyMedia>
+        <EmptyTitle>No results found</EmptyTitle>
+        <EmptyDescription>Try adjusting your search or filters.</EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button variant="Outline" size="sm">
+          Clear filters
+        </Button>
+      </EmptyContent>
+    </Empty>
+  );
+
+const meta = {
+  title: "Feedback/Empty",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<Empty>\\n  <EmptyHeader>\\n    <EmptyMedia variant=\"icon\"><Search /></EmptyMedia>\\n    <EmptyTitle>No results found</EmptyTitle>\\n    <EmptyDescription>Try adjusting your search or filters.</EmptyDescription>\\n  </EmptyHeader>\\n  <EmptyContent>\\n    <Button variant=\"Outline\" size=\"sm\">Clear filters</Button>\\n  </EmptyContent>\\n</Empty>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Kbd.stories.tsx

@@ -0,0 +1,27 @@
+/* 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 { Kbd, KbdGroup } from "@kinetixui/ui";
+
+const Demo = () => (
+    <div className="flex items-center gap-4">
+      <Kbd>⏎</Kbd>
+      <KbdGroup>
+        <Kbd>⌘</Kbd>
+        <Kbd>K</Kbd>
+      </KbdGroup>
+    </div>
+  );
+
+const meta = {
+  title: "Foundations/Kbd",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<Kbd>⏎</Kbd>\\n<KbdGroup>\\n  <Kbd>⌘</Kbd>\\n  <Kbd>K</Kbd>\\n</KbdGroup>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };