@kinetixui/ui 0.7.0 → 0.9.0

package/dist/index.d.ts

@@ -1217,7 +1217,85 @@ 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>>;
+
+/**
+ * ButtonGroup — visually joins adjacent buttons into a connected cluster
+ * (segmented-control style): inner corners squared off, shared borders
+ * overlapped by 1px so they don't double up, the focused child raised
+ * above its neighbours so its ring isn't clipped. Gap-fill addition (not
+ * in the original Figma source) — matches the shadcn/ui ButtonGroup API
+ * shape. Works with any child that renders its own border/radius (Button,
+ * ButtonGroupText, a Select trigger, …), not just `<Button>`.
+ */
+interface ButtonGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical";
+}
+declare const ButtonGroup: React$1.ForwardRefExoticComponent<ButtonGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ButtonGroupSeparatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical";
+}
+/** A thin divider between segments — useful between non-outline buttons, where the group's own overlap trick has no shared border to lean on. */
+declare const ButtonGroupSeparator: React$1.ForwardRefExoticComponent<ButtonGroupSeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
+/** A static, non-interactive label segment inside a group — e.g. a unit or a prefix next to steppers. */
+declare const ButtonGroupText: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLSpanElement> & React$1.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * NativeSelect — a styled wrapper around the native `<select>` element,
+ * for when a form should submit synchronously without JS (or just prefers
+ * the OS-native picker on mobile) instead of Select's Radix popover.
+ * Matches Input's `inputVariants` styling 1:1 so the two are drop-in
+ * interchangeable in a Field. Gap-fill addition (not in the original
+ * Figma source) — matches the shadcn/ui Native Select API shape.
+ */
+declare const nativeSelectVariants: (props?: ({
+    state?: "Default" | "Focus" | "Disabled" | "Error" | null | undefined;
+    corners?: "sharp" | "default" | "pill" | "rounded" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface NativeSelectProps extends Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "size">, VariantProps<typeof nativeSelectVariants> {
+}
+declare const NativeSelect: React$1.ForwardRefExoticComponent<NativeSelectProps & React$1.RefAttributes<HTMLSelectElement>>;
+interface NativeSelectOptionProps extends React$1.OptionHTMLAttributes<HTMLOptionElement> {
+}
+declare const NativeSelectOption: React$1.ForwardRefExoticComponent<NativeSelectOptionProps & React$1.RefAttributes<HTMLOptionElement>>;
+interface NativeSelectOptGroupProps extends React$1.OptgroupHTMLAttributes<HTMLOptGroupElement> {
+}
+declare const NativeSelectOptGroup: React$1.ForwardRefExoticComponent<NativeSelectOptGroupProps & React$1.RefAttributes<HTMLOptGroupElement>>;
+
 /** 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, ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, 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, NativeSelect, NativeSelectOptGroup, type NativeSelectOptGroupProps, NativeSelectOption, type NativeSelectOptionProps, type NativeSelectProps, 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, nativeSelectVariants, navigationMenuTriggerStyle, spinnerVariants, tagVariants, textareaVariants, toggleVariants, useAppBar, useFormField, useSidebar };

package/dist/index.js

@@ -3867,6 +3867,182 @@ 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";
+
+// src/components/button-group.tsx
+import * as React68 from "react";
+import { jsx as jsx73 } from "react/jsx-runtime";
+var ButtonGroup = React68.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx73(
+    "div",
+    {
+      ref,
+      role: "group",
+      "data-orientation": orientation,
+      className: cn(
+        "flex w-fit items-stretch [&>*]:relative [&>*]:focus-visible:z-10",
+        orientation === "horizontal" ? "flex-row [&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none" : "flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ButtonGroup.displayName = "ButtonGroup";
+var ButtonGroupSeparator = React68.forwardRef(
+  ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx73(
+    "div",
+    {
+      ref,
+      role: "separator",
+      "aria-orientation": orientation,
+      className: cn("shrink-0 self-stretch bg-border", orientation === "vertical" ? "my-1.5 w-px" : "mx-1.5 h-px", className),
+      ...props
+    }
+  )
+);
+ButtonGroupSeparator.displayName = "ButtonGroupSeparator";
+var ButtonGroupText = React68.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx73(
+    "span",
+    {
+      ref,
+      className: cn(
+        "flex items-center gap-1.5 rounded-md border border-input bg-muted px-3 text-label-md text-foreground",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ButtonGroupText.displayName = "ButtonGroupText";
+
+// src/components/native-select.tsx
+import * as React69 from "react";
+import { ChevronDown as ChevronDown4 } from "lucide-react";
+import { cva as cva19 } from "class-variance-authority";
+import { jsx as jsx74, jsxs as jsxs41 } from "react/jsx-runtime";
+var nativeSelectVariants = cva19(
+  [
+    "flex w-full appearance-none border border-input bg-background px-3 py-3 pr-9",
+    "font-sans text-[14px] leading-5 tracking-[0.25px] text-foreground",
+    "outline-none transition-colors",
+    "focus-visible:border-primary focus-visible:shadow-focus",
+    "disabled:cursor-not-allowed disabled:opacity-disabled",
+    "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive aria-[invalid=true]:focus-visible:shadow-focus-destructive"
+  ],
+  {
+    variants: {
+      state: {
+        Default: "",
+        Focus: "border-primary shadow-focus",
+        Error: "border-destructive",
+        Disabled: "opacity-disabled pointer-events-none"
+      },
+      corners: {
+        sharp: "rounded-none",
+        default: "rounded-sm",
+        rounded: "rounded-md",
+        pill: "rounded-full px-4"
+      }
+    },
+    defaultVariants: { state: "Default", corners: "default" }
+  }
+);
+var NativeSelect = React69.forwardRef(
+  ({ className, state, corners, disabled, "aria-invalid": ariaInvalid, children, ...props }, ref) => /* @__PURE__ */ jsxs41("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx74(
+      "select",
+      {
+        ref,
+        "data-slot": "native-select",
+        "data-state": state ? state.toLowerCase() : void 0,
+        "aria-invalid": ariaInvalid ?? (state === "Error" || void 0),
+        disabled: disabled || state === "Disabled",
+        className: cn(nativeSelectVariants({ state, corners }), className),
+        ...props,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx74(ChevronDown4, { className: "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" })
+  ] })
+);
+NativeSelect.displayName = "NativeSelect";
+var NativeSelectOption = React69.forwardRef(
+  ({ ...props }, ref) => /* @__PURE__ */ jsx74("option", { ref, ...props })
+);
+NativeSelectOption.displayName = "NativeSelectOption";
+var NativeSelectOptGroup = React69.forwardRef(
+  ({ ...props }, ref) => /* @__PURE__ */ jsx74("optgroup", { ref, ...props })
+);
+NativeSelectOptGroup.displayName = "NativeSelectOptGroup";
 export {
   Accordion,
   AccordionContent,
@@ -3906,6 +4082,9 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   Button,
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
   Calendar,
   Card,
   CardContent,
@@ -3991,6 +4170,12 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
   Fab,
   Field,
   FieldControl,
@@ -4025,6 +4210,8 @@ export {
   InputOTPGroup,
   InputOTPSeparator,
   InputOTPSlot,
+  Kbd,
+  KbdGroup,
   Label2 as Label,
   List3 as List,
   ListItem,
@@ -4046,6 +4233,9 @@ export {
   MenubarTrigger,
   Metric,
   Modal,
+  NativeSelect,
+  NativeSelectOptGroup,
+  NativeSelectOption,
   NavigationBar,
   NavigationMenu,
   NavigationMenuContent,
@@ -4146,11 +4336,13 @@ export {
   badgeVariants,
   buttonVariants,
   cn,
+  emptyMediaVariants,
   fabVariants,
   formatBytes,
   informVariants,
   inputVariants,
   messageVariants,
+  nativeSelectVariants,
   navigationMenuTriggerStyle,
   spinnerVariants,
   tagVariants,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.7.0",
+  "version": "0.9.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.9.0",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",

package/src/components/button-group.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * ButtonGroup — visually joins adjacent buttons into a connected cluster
+ * (segmented-control style): inner corners squared off, shared borders
+ * overlapped by 1px so they don't double up, the focused child raised
+ * above its neighbours so its ring isn't clipped. Gap-fill addition (not
+ * in the original Figma source) — matches the shadcn/ui ButtonGroup API
+ * shape. Works with any child that renders its own border/radius (Button,
+ * ButtonGroupText, a Select trigger, …), not just `<Button>`.
+ */
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical";
+}
+
+const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+  ({ className, orientation = "horizontal", ...props }, ref) => (
+    <div
+      ref={ref}
+      role="group"
+      data-orientation={orientation}
+      className={cn(
+        "flex w-fit items-stretch [&>*]:relative [&>*]:focus-visible:z-10",
+        orientation === "horizontal"
+          ? "flex-row [&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none"
+          : "flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+ButtonGroup.displayName = "ButtonGroup";
+
+export interface ButtonGroupSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical";
+}
+
+/** A thin divider between segments — useful between non-outline buttons, where the group's own overlap trick has no shared border to lean on. */
+const ButtonGroupSeparator = React.forwardRef<HTMLDivElement, ButtonGroupSeparatorProps>(
+  ({ className, orientation = "vertical", ...props }, ref) => (
+    <div
+      ref={ref}
+      role="separator"
+      aria-orientation={orientation}
+      className={cn("shrink-0 self-stretch bg-border", orientation === "vertical" ? "my-1.5 w-px" : "mx-1.5 h-px", className)}
+      {...props}
+    />
+  ),
+);
+ButtonGroupSeparator.displayName = "ButtonGroupSeparator";
+
+/** A static, non-interactive label segment inside a group — e.g. a unit or a prefix next to steppers. */
+const ButtonGroupText = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(
+        "flex items-center gap-1.5 rounded-md border border-input bg-muted px-3 text-label-md text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+ButtonGroupText.displayName = "ButtonGroupText";
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };

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/components/native-select.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+/**
+ * NativeSelect — a styled wrapper around the native `<select>` element,
+ * for when a form should submit synchronously without JS (or just prefers
+ * the OS-native picker on mobile) instead of Select's Radix popover.
+ * Matches Input's `inputVariants` styling 1:1 so the two are drop-in
+ * interchangeable in a Field. Gap-fill addition (not in the original
+ * Figma source) — matches the shadcn/ui Native Select API shape.
+ */
+const nativeSelectVariants = cva(
+  [
+    "flex w-full appearance-none border border-input bg-background px-3 py-3 pr-9",
+    "font-sans text-[14px] leading-5 tracking-[0.25px] text-foreground",
+    "outline-none transition-colors",
+    "focus-visible:border-primary focus-visible:shadow-focus",
+    "disabled:cursor-not-allowed disabled:opacity-disabled",
+    "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive aria-[invalid=true]:focus-visible:shadow-focus-destructive",
+  ],
+  {
+    variants: {
+      state: {
+        Default: "",
+        Focus: "border-primary shadow-focus",
+        Error: "border-destructive",
+        Disabled: "opacity-disabled pointer-events-none",
+      },
+      corners: {
+        sharp: "rounded-none",
+        default: "rounded-sm",
+        rounded: "rounded-md",
+        pill: "rounded-full px-4",
+      },
+    },
+    defaultVariants: { state: "Default", corners: "default" },
+  },
+);
+
+export interface NativeSelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size">,
+    VariantProps<typeof nativeSelectVariants> {}
+
+const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+  ({ className, state, corners, disabled, "aria-invalid": ariaInvalid, children, ...props }, ref) => (
+    <div className="relative">
+      <select
+        ref={ref}
+        data-slot="native-select"
+        data-state={state ? state.toLowerCase() : undefined}
+        aria-invalid={ariaInvalid ?? (state === "Error" || undefined)}
+        disabled={disabled || state === "Disabled"}
+        className={cn(nativeSelectVariants({ state, corners }), className)}
+        {...props}
+      >
+        {children}
+      </select>
+      <ChevronDown className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+    </div>
+  ),
+);
+NativeSelect.displayName = "NativeSelect";
+
+export interface NativeSelectOptionProps extends React.OptionHTMLAttributes<HTMLOptionElement> {}
+
+const NativeSelectOption = React.forwardRef<HTMLOptionElement, NativeSelectOptionProps>(
+  ({ ...props }, ref) => <option ref={ref} {...props} />,
+);
+NativeSelectOption.displayName = "NativeSelectOption";
+
+export interface NativeSelectOptGroupProps extends React.OptgroupHTMLAttributes<HTMLOptGroupElement> {}
+
+const NativeSelectOptGroup = React.forwardRef<HTMLOptGroupElement, NativeSelectOptGroupProps>(
+  ({ ...props }, ref) => <optgroup ref={ref} {...props} />,
+);
+NativeSelectOptGroup.displayName = "NativeSelectOptGroup";
+
+export { NativeSelect, NativeSelectOption, NativeSelectOptGroup, nativeSelectVariants };

package/src/index.ts

@@ -311,4 +311,33 @@ 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 {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  type ButtonGroupProps,
+  type ButtonGroupSeparatorProps,
+} from "./components/button-group";
+export {
+  NativeSelect,
+  NativeSelectOption,
+  NativeSelectOptGroup,
+  nativeSelectVariants,
+  type NativeSelectProps,
+  type NativeSelectOptionProps,
+  type NativeSelectOptGroupProps,
+} from "./components/native-select";
+
 export { cn } from "./lib/utils";

package/src/stories/ButtonGroup.stories.tsx

@@ -0,0 +1,32 @@
+/* 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, ButtonGroup } from "@kinetixui/ui";
+import { Bold, Italic, Underline } from "lucide-react";
+
+const Demo = () => (
+    <ButtonGroup>
+      <Button variant="Outline" size="icon" aria-label="Bold">
+        <Bold />
+      </Button>
+      <Button variant="Outline" size="icon" aria-label="Italic">
+        <Italic />
+      </Button>
+      <Button variant="Outline" size="icon" aria-label="Underline">
+        <Underline />
+      </Button>
+    </ButtonGroup>
+  );
+
+const meta = {
+  title: "Controls & Actions/ButtonGroup",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<ButtonGroup>\\n  <Button variant=\"Outline\" size=\"icon\"><Bold /></Button>\\n  <Button variant=\"Outline\" size=\"icon\"><Italic /></Button>\\n  <Button variant=\"Outline\" size=\"icon\"><Underline /></Button>\\n</ButtonGroup>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

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 /> };

package/src/stories/NativeSelect.stories.tsx

@@ -0,0 +1,33 @@
+/* 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 { NativeSelect, NativeSelectOptGroup, NativeSelectOption, Select } from "@kinetixui/ui";
+
+const Demo = () => (
+    <NativeSelect className="max-w-xs" defaultValue="">
+      <NativeSelectOption value="" disabled>
+        Select a fruit…
+      </NativeSelectOption>
+      <NativeSelectOptGroup label="Citrus">
+        <NativeSelectOption value="orange">Orange</NativeSelectOption>
+        <NativeSelectOption value="lemon">Lemon</NativeSelectOption>
+      </NativeSelectOptGroup>
+      <NativeSelectOptGroup label="Stone fruit">
+        <NativeSelectOption value="peach">Peach</NativeSelectOption>
+        <NativeSelectOption value="plum">Plum</NativeSelectOption>
+      </NativeSelectOptGroup>
+    </NativeSelect>
+  );
+
+const meta = {
+  title: "Form Inputs/NativeSelect",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<NativeSelect defaultValue=\"\">\\n  <NativeSelectOption value=\"\" disabled>Select a fruit…</NativeSelectOption>\\n  <NativeSelectOptGroup label=\"Citrus\">\\n    <NativeSelectOption value=\"orange\">Orange</NativeSelectOption>\\n  </NativeSelectOptGroup>\\n</NativeSelect>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };