@kinetixui/ui 0.8.0 → 0.10.0

package/dist/index.d.ts

@@ -1252,7 +1252,127 @@ declare const EmptyTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttribut
 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>>;
+
+/**
+ * DescriptionList — `<dl>` term/detail rows with the site's own spec-sheet
+ * skin (mono, uppercase, tracked term labels; a divided rounded shell).
+ * Lifted out of two hand-rolled call sites — `ComponentMeta`'s doc-page
+ * spec strip and the homepage's "spec" card — into a reusable component.
+ * Gap-fill addition (not in the original Figma source).
+ */
+declare const DescriptionList: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDListElement> & React$1.RefAttributes<HTMLDListElement>>;
+interface DescriptionListItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
+    term: React$1.ReactNode;
+    children: React$1.ReactNode;
+    /** `row` (default) puts the term and value side by side; `stacked` puts the value below a full-width term — better for long values. */
+    layout?: "row" | "stacked";
+}
+declare const DescriptionListItem: React$1.ForwardRefExoticComponent<DescriptionListItemProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Banner — a full-bleed, page-level notice (info/promo/maintenance),
+ * optionally dismissible and stickied to the top of the viewport. Distinct
+ * from `Alert` (in-flow, static) and `Sonner` (transient toast): Banner is
+ * edge-to-edge and persistent until dismissed. Distinct from `Inform`
+ * (contained, rounded inline card): Banner has no rounded corners or own
+ * width — it spans whatever it's placed in, typically the full viewport.
+ * Reuses `Inform`'s intent taxonomy and icon set for a consistent look.
+ * Gap-fill addition (not in the original Figma source).
+ */
+declare const bannerVariants: (props?: ({
+    variant?: "success" | "warning" | "error" | "information" | "action" | null | undefined;
+    sticky?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BannerProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof bannerVariants> {
+    hideIcon?: boolean;
+    onDismiss?: () => void;
+    /** optional CTA rendered inline after the message */
+    action?: {
+        label: React$1.ReactNode;
+        onClick?: () => void;
+    };
+}
+declare const Banner: React$1.ForwardRefExoticComponent<BannerProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * SegmentedControl — an iOS-style single-select strip. Functionally
+ * `ToggleGroup type="single"`: a thin, documented preset over the same
+ * Radix primitive with the segmented look (`Tabs`' `TabsList`/
+ * `TabsTrigger` visual treatment — filled track, raised active segment)
+ * instead of `Toggle`'s individually-outlined-button look. `type="single"`
+ * is fixed, not exposed — a segmented control that could go fully
+ * unselected or multi-select isn't the pattern. Gap-fill addition (not in
+ * the original Figma source).
+ */
+type SegmentedControlProps = Omit<ToggleGroupPrimitive.ToggleGroupSingleProps, "type">;
+declare const SegmentedControl: React$1.ForwardRefExoticComponent<SegmentedControlProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const SegmentedControlItem: React$1.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Timeline — ordered events down a rail (dot, connector, time, content).
+ * `alternating` lays content left/right of a centered rail (desktop);
+ * the default is a single left-aligned rail. Same rail/dot/connector
+ * technique as `Stepper`, but for a history/activity log rather than a
+ * progress indicator — no complete/current/upcoming states, an array of
+ * arbitrary events instead. Gap-fill addition (not in the original Figma
+ * source).
+ */
+interface TimelineItem {
+    time?: React$1.ReactNode;
+    title: React$1.ReactNode;
+    content?: React$1.ReactNode;
+    /** custom dot content — defaults to a filled circle */
+    icon?: React$1.ReactNode;
+}
+interface TimelineProps extends React$1.HTMLAttributes<HTMLOListElement> {
+    items: TimelineItem[];
+    alternating?: boolean;
+}
+declare const Timeline: React$1.ForwardRefExoticComponent<TimelineProps & React$1.RefAttributes<HTMLOListElement>>;
+
 /** 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, 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 };
+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, Banner, type BannerProps, 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, DescriptionList, DescriptionListItem, type DescriptionListItemProps, 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, SegmentedControl, SegmentedControlItem, type SegmentedControlProps, 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, Timeline, type TimelineItem, type TimelineProps, Toaster, type TocItem, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, badgeVariants, bannerVariants, buttonVariants, cn, emptyMediaVariants, fabVariants, formatBytes, informVariants, inputVariants, messageVariants, nativeSelectVariants, navigationMenuTriggerStyle, spinnerVariants, tagVariants, textareaVariants, toggleVariants, useAppBar, useFormField, useSidebar };

package/dist/index.js

@@ -3935,6 +3935,277 @@ 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";
+
+// src/components/description-list.tsx
+import * as React70 from "react";
+import { jsx as jsx75, jsxs as jsxs42 } from "react/jsx-runtime";
+var DescriptionList = React70.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx75(
+    "dl",
+    {
+      ref,
+      className: cn("divide-y divide-border rounded-lg border border-border bg-muted/20", className),
+      ...props
+    }
+  )
+);
+DescriptionList.displayName = "DescriptionList";
+var DescriptionListItem = React70.forwardRef(
+  ({ className, term, children, layout = "row", ...props }, ref) => /* @__PURE__ */ jsxs42(
+    "div",
+    {
+      ref,
+      className: cn("gap-3 px-3.5 py-2.5", layout === "row" ? "flex items-baseline" : "flex flex-col", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx75(
+          "dt",
+          {
+            className: cn(
+              "shrink-0 font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground",
+              layout === "row" && "w-24"
+            ),
+            children: term
+          }
+        ),
+        /* @__PURE__ */ jsx75("dd", { className: "min-w-0 text-body-sm text-foreground", children })
+      ]
+    }
+  )
+);
+DescriptionListItem.displayName = "DescriptionListItem";
+
+// src/components/banner.tsx
+import * as React71 from "react";
+import { cva as cva20 } from "class-variance-authority";
+import { CircleAlert as CircleAlert3, CircleCheck as CircleCheck3, Info as Info3, TriangleAlert as TriangleAlert4, X as X8 } from "lucide-react";
+import { jsx as jsx76, jsxs as jsxs43 } from "react/jsx-runtime";
+var bannerVariants = cva20(
+  "flex w-full items-start gap-2.5 border-b px-4 py-3 text-body-sm font-sans [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        information: "border-info/20 bg-info/10 text-info",
+        warning: "border-warning/25 bg-warning/15 text-warning",
+        success: "border-success/25 bg-success/15 text-success",
+        error: "border-destructive/20 bg-destructive/10 text-destructive",
+        action: "border-transparent bg-foreground text-background"
+      },
+      sticky: {
+        true: "sticky top-0 z-40",
+        false: ""
+      }
+    },
+    defaultVariants: { variant: "information", sticky: false }
+  }
+);
+var ICON2 = {
+  information: Info3,
+  warning: TriangleAlert4,
+  success: CircleCheck3,
+  error: CircleAlert3,
+  action: Info3
+};
+var Banner = React71.forwardRef(
+  ({ className, variant = "information", sticky, hideIcon, onDismiss, action, children, ...props }, ref) => {
+    const Icon2 = ICON2[variant ?? "information"];
+    return /* @__PURE__ */ jsxs43("div", { ref, role: "banner", className: cn(bannerVariants({ variant, sticky }), className), ...props, children: [
+      !hideIcon && /* @__PURE__ */ jsx76(Icon2, {}),
+      /* @__PURE__ */ jsxs43("div", { className: "mx-auto flex min-w-0 max-w-4xl flex-1 flex-wrap items-center justify-center gap-x-3 gap-y-1 text-center", children: [
+        /* @__PURE__ */ jsx76("span", { children }),
+        action && /* @__PURE__ */ jsx76(
+          "button",
+          {
+            type: "button",
+            onClick: action.onClick,
+            className: "inline-flex shrink-0 items-center gap-1.5 text-label-md font-medium underline-offset-2 outline-none hover:underline focus-visible:underline",
+            children: action.label
+          }
+        )
+      ] }),
+      onDismiss && /* @__PURE__ */ jsx76(
+        "button",
+        {
+          type: "button",
+          onClick: onDismiss,
+          "aria-label": "Dismiss",
+          className: "-m-0.5 shrink-0 rounded-[2px] p-0.5 opacity-muted outline-none transition-opacity hover:opacity-visible focus-visible:opacity-visible focus-visible:ring-1 focus-visible:ring-current",
+          children: /* @__PURE__ */ jsx76(X8, { className: "size-3.5" })
+        }
+      )
+    ] });
+  }
+);
+Banner.displayName = "Banner";
+
+// src/components/segmented-control.tsx
+import * as React72 from "react";
+import * as ToggleGroupPrimitive2 from "@radix-ui/react-toggle-group";
+import { jsx as jsx77 } from "react/jsx-runtime";
+var SegmentedControl = React72.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx77(
+  ToggleGroupPrimitive2.Root,
+  {
+    ref,
+    type: "single",
+    className: cn("inline-flex items-center rounded-lg bg-muted p-1 font-sans", className),
+    ...props
+  }
+));
+SegmentedControl.displayName = "SegmentedControl";
+var SegmentedControlItem = React72.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx77(
+  ToggleGroupPrimitive2.Item,
+  {
+    ref,
+    className: cn(
+      "inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-label-md font-medium text-muted-foreground transition-all",
+      "outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "disabled:pointer-events-none disabled:opacity-disabled",
+      "data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm",
+      className
+    ),
+    ...props
+  }
+));
+SegmentedControlItem.displayName = "SegmentedControlItem";
+
+// src/components/timeline.tsx
+import * as React73 from "react";
+import { jsx as jsx78, jsxs as jsxs44 } from "react/jsx-runtime";
+var Body = ({ item, align }) => /* @__PURE__ */ jsxs44("div", { className: cn("pb-6", align === "right" && "text-right"), children: [
+  item.time && /* @__PURE__ */ jsx78("p", { className: "text-label-sm text-muted-foreground", children: item.time }),
+  /* @__PURE__ */ jsx78("p", { className: "text-label-md font-medium text-foreground", children: item.title }),
+  item.content && /* @__PURE__ */ jsx78("div", { className: "text-body-sm text-muted-foreground", children: item.content })
+] });
+var Rail = ({ item, isLast }) => /* @__PURE__ */ jsxs44("div", { className: "flex flex-col items-center", children: [
+  /* @__PURE__ */ jsx78("span", { className: "flex size-2.5 shrink-0 items-center justify-center rounded-full bg-primary", children: item.icon }),
+  !isLast && /* @__PURE__ */ jsx78("span", { "aria-hidden": true, className: "my-1 w-px flex-1 bg-border" })
+] });
+var Timeline = React73.forwardRef(
+  ({ className, items, alternating = false, ...props }, ref) => /* @__PURE__ */ jsx78("ol", { ref, className: cn("flex flex-col font-sans", className), ...props, children: items.map((item, i) => {
+    const isLast = i === items.length - 1;
+    if (!alternating) {
+      return /* @__PURE__ */ jsxs44("li", { className: "grid grid-cols-[auto_1fr] gap-x-3", children: [
+        /* @__PURE__ */ jsx78(Rail, { item, isLast }),
+        /* @__PURE__ */ jsx78(Body, { item, align: "left" })
+      ] }, i);
+    }
+    const onRight = i % 2 === 0;
+    return /* @__PURE__ */ jsxs44("li", { className: "grid grid-cols-[1fr_auto_1fr] gap-x-4", children: [
+      onRight ? /* @__PURE__ */ jsx78("div", {}) : /* @__PURE__ */ jsx78(Body, { item, align: "right" }),
+      /* @__PURE__ */ jsx78(Rail, { item, isLast }),
+      onRight ? /* @__PURE__ */ jsx78(Body, { item, align: "left" }) : /* @__PURE__ */ jsx78("div", {})
+    ] }, i);
+  }) })
+);
+Timeline.displayName = "Timeline";
 export {
   Accordion,
   AccordionContent,
@@ -3966,6 +4237,7 @@ export {
   AvatarGroup,
   AvatarImage,
   Badge,
+  Banner,
   Breadcrumb,
   BreadcrumbEllipsis,
   BreadcrumbItem,
@@ -3974,6 +4246,9 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   Button,
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
   Calendar,
   Card,
   CardContent,
@@ -4024,6 +4299,8 @@ export {
   ContextMenuTrigger,
   DataTable,
   DatePicker,
+  DescriptionList,
+  DescriptionListItem,
   Dialog,
   DialogClose,
   DialogContent,
@@ -4122,6 +4399,9 @@ export {
   MenubarTrigger,
   Metric,
   Modal,
+  NativeSelect,
+  NativeSelectOptGroup,
+  NativeSelectOption,
   NavigationBar,
   NavigationMenu,
   NavigationMenuContent,
@@ -4154,6 +4434,8 @@ export {
   ResizablePanelGroup,
   ScrollArea,
   ScrollBar,
+  SegmentedControl,
+  SegmentedControlItem,
   Select,
   SelectContent,
   SelectGroup,
@@ -4211,6 +4493,7 @@ export {
   TabsTrigger,
   Tag,
   Textarea,
+  Timeline,
   Toaster,
   Toggle,
   ToggleGroup,
@@ -4220,6 +4503,7 @@ export {
   TooltipProvider,
   TooltipTrigger,
   badgeVariants,
+  bannerVariants,
   buttonVariants,
   cn,
   emptyMediaVariants,
@@ -4228,6 +4512,7 @@ export {
   informVariants,
   inputVariants,
   messageVariants,
+  nativeSelectVariants,
   navigationMenuTriggerStyle,
   spinnerVariants,
   tagVariants,

package/package.json

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

package/src/components/banner.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * Banner — a full-bleed, page-level notice (info/promo/maintenance),
+ * optionally dismissible and stickied to the top of the viewport. Distinct
+ * from `Alert` (in-flow, static) and `Sonner` (transient toast): Banner is
+ * edge-to-edge and persistent until dismissed. Distinct from `Inform`
+ * (contained, rounded inline card): Banner has no rounded corners or own
+ * width — it spans whatever it's placed in, typically the full viewport.
+ * Reuses `Inform`'s intent taxonomy and icon set for a consistent look.
+ * Gap-fill addition (not in the original Figma source).
+ */
+const bannerVariants = cva(
+  "flex w-full items-start gap-2.5 border-b px-4 py-3 text-body-sm font-sans [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        information: "border-info/20 bg-info/10 text-info",
+        warning: "border-warning/25 bg-warning/15 text-warning",
+        success: "border-success/25 bg-success/15 text-success",
+        error: "border-destructive/20 bg-destructive/10 text-destructive",
+        action: "border-transparent bg-foreground text-background",
+      },
+      sticky: {
+        true: "sticky top-0 z-40",
+        false: "",
+      },
+    },
+    defaultVariants: { variant: "information", sticky: false },
+  },
+);
+
+const ICON = {
+  information: Info,
+  warning: TriangleAlert,
+  success: CircleCheck,
+  error: CircleAlert,
+  action: Info,
+} as const;
+
+export interface BannerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof bannerVariants> {
+  hideIcon?: boolean;
+  onDismiss?: () => void;
+  /** optional CTA rendered inline after the message */
+  action?: { label: React.ReactNode; onClick?: () => void };
+}
+
+const Banner = React.forwardRef<HTMLDivElement, BannerProps>(
+  ({ className, variant = "information", sticky, hideIcon, onDismiss, action, children, ...props }, ref) => {
+    const Icon = ICON[variant ?? "information"];
+    return (
+      <div ref={ref} role="banner" className={cn(bannerVariants({ variant, sticky }), className)} {...props}>
+        {!hideIcon && <Icon />}
+        <div className="mx-auto flex min-w-0 max-w-4xl flex-1 flex-wrap items-center justify-center gap-x-3 gap-y-1 text-center">
+          <span>{children}</span>
+          {action && (
+            <button
+              type="button"
+              onClick={action.onClick}
+              className="inline-flex shrink-0 items-center gap-1.5 text-label-md font-medium underline-offset-2 outline-none hover:underline focus-visible:underline"
+            >
+              {action.label}
+            </button>
+          )}
+        </div>
+        {onDismiss && (
+          <button
+            type="button"
+            onClick={onDismiss}
+            aria-label="Dismiss"
+            className="-m-0.5 shrink-0 rounded-[2px] p-0.5 opacity-muted outline-none transition-opacity hover:opacity-visible focus-visible:opacity-visible focus-visible:ring-1 focus-visible:ring-current"
+          >
+            <X className="size-3.5" />
+          </button>
+        )}
+      </div>
+    );
+  },
+);
+Banner.displayName = "Banner";
+
+export { Banner, bannerVariants };

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/description-list.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * DescriptionList — `<dl>` term/detail rows with the site's own spec-sheet
+ * skin (mono, uppercase, tracked term labels; a divided rounded shell).
+ * Lifted out of two hand-rolled call sites — `ComponentMeta`'s doc-page
+ * spec strip and the homepage's "spec" card — into a reusable component.
+ * Gap-fill addition (not in the original Figma source).
+ */
+const DescriptionList = React.forwardRef<HTMLDListElement, React.HTMLAttributes<HTMLDListElement>>(
+  ({ className, ...props }, ref) => (
+    <dl
+      ref={ref}
+      className={cn("divide-y divide-border rounded-lg border border-border bg-muted/20", className)}
+      {...props}
+    />
+  ),
+);
+DescriptionList.displayName = "DescriptionList";
+
+export interface DescriptionListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  term: React.ReactNode;
+  children: React.ReactNode;
+  /** `row` (default) puts the term and value side by side; `stacked` puts the value below a full-width term — better for long values. */
+  layout?: "row" | "stacked";
+}
+
+const DescriptionListItem = React.forwardRef<HTMLDivElement, DescriptionListItemProps>(
+  ({ className, term, children, layout = "row", ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("gap-3 px-3.5 py-2.5", layout === "row" ? "flex items-baseline" : "flex flex-col", className)}
+      {...props}
+    >
+      <dt
+        className={cn(
+          "shrink-0 font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground",
+          layout === "row" && "w-24",
+        )}
+      >
+        {term}
+      </dt>
+      <dd className="min-w-0 text-body-sm text-foreground">{children}</dd>
+    </div>
+  ),
+);
+DescriptionListItem.displayName = "DescriptionListItem";
+
+export { DescriptionList, DescriptionListItem };

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/components/segmented-control.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { cn } from "../lib/utils";
+
+/**
+ * SegmentedControl — an iOS-style single-select strip. Functionally
+ * `ToggleGroup type="single"`: a thin, documented preset over the same
+ * Radix primitive with the segmented look (`Tabs`' `TabsList`/
+ * `TabsTrigger` visual treatment — filled track, raised active segment)
+ * instead of `Toggle`'s individually-outlined-button look. `type="single"`
+ * is fixed, not exposed — a segmented control that could go fully
+ * unselected or multi-select isn't the pattern. Gap-fill addition (not in
+ * the original Figma source).
+ */
+export type SegmentedControlProps = Omit<ToggleGroupPrimitive.ToggleGroupSingleProps, "type">;
+
+const SegmentedControl = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  SegmentedControlProps
+>(({ className, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    type="single"
+    className={cn("inline-flex items-center rounded-lg bg-muted p-1 font-sans", className)}
+    {...props}
+  />
+));
+SegmentedControl.displayName = "SegmentedControl";
+
+const SegmentedControlItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <ToggleGroupPrimitive.Item
+    ref={ref}
+    className={cn(
+      "inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-label-md font-medium text-muted-foreground transition-all",
+      "outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "disabled:pointer-events-none disabled:opacity-disabled",
+      "data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+SegmentedControlItem.displayName = "SegmentedControlItem";
+
+export { SegmentedControl, SegmentedControlItem };

package/src/components/timeline.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * Timeline — ordered events down a rail (dot, connector, time, content).
+ * `alternating` lays content left/right of a centered rail (desktop);
+ * the default is a single left-aligned rail. Same rail/dot/connector
+ * technique as `Stepper`, but for a history/activity log rather than a
+ * progress indicator — no complete/current/upcoming states, an array of
+ * arbitrary events instead. Gap-fill addition (not in the original Figma
+ * source).
+ */
+export interface TimelineItem {
+  time?: React.ReactNode;
+  title: React.ReactNode;
+  content?: React.ReactNode;
+  /** custom dot content — defaults to a filled circle */
+  icon?: React.ReactNode;
+}
+
+export interface TimelineProps extends React.HTMLAttributes<HTMLOListElement> {
+  items: TimelineItem[];
+  alternating?: boolean;
+}
+
+const Body = ({ item, align }: { item: TimelineItem; align: "left" | "right" }) => (
+  <div className={cn("pb-6", align === "right" && "text-right")}>
+    {item.time && <p className="text-label-sm text-muted-foreground">{item.time}</p>}
+    <p className="text-label-md font-medium text-foreground">{item.title}</p>
+    {item.content && <div className="text-body-sm text-muted-foreground">{item.content}</div>}
+  </div>
+);
+
+const Rail = ({ item, isLast }: { item: TimelineItem; isLast: boolean }) => (
+  <div className="flex flex-col items-center">
+    <span className="flex size-2.5 shrink-0 items-center justify-center rounded-full bg-primary">{item.icon}</span>
+    {!isLast && <span aria-hidden className="my-1 w-px flex-1 bg-border" />}
+  </div>
+);
+
+const Timeline = React.forwardRef<HTMLOListElement, TimelineProps>(
+  ({ className, items, alternating = false, ...props }, ref) => (
+    <ol ref={ref} className={cn("flex flex-col font-sans", className)} {...props}>
+      {items.map((item, i) => {
+        const isLast = i === items.length - 1;
+        if (!alternating) {
+          return (
+            <li key={i} className="grid grid-cols-[auto_1fr] gap-x-3">
+              <Rail item={item} isLast={isLast} />
+              <Body item={item} align="left" />
+            </li>
+          );
+        }
+        const onRight = i % 2 === 0;
+        return (
+          <li key={i} className="grid grid-cols-[1fr_auto_1fr] gap-x-4">
+            {onRight ? <div /> : <Body item={item} align="right" />}
+            <Rail item={item} isLast={isLast} />
+            {onRight ? <Body item={item} align="left" /> : <div />}
+          </li>
+        );
+      })}
+    </ol>
+  ),
+);
+Timeline.displayName = "Timeline";
+
+export { Timeline };

package/src/index.ts

@@ -323,5 +323,33 @@ export {
   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 {
+  DescriptionList,
+  DescriptionListItem,
+  type DescriptionListItemProps,
+} from "./components/description-list";
+export { Banner, bannerVariants, type BannerProps } from "./components/banner";
+export {
+  SegmentedControl,
+  SegmentedControlItem,
+  type SegmentedControlProps,
+} from "./components/segmented-control";
+export { Timeline, type TimelineItem, type TimelineProps } from "./components/timeline";
 
 export { cn } from "./lib/utils";

package/src/stories/Banner.stories.tsx

@@ -0,0 +1,28 @@
+/* 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 { Banner } from "@kinetixui/ui";
+
+const Demo = () => (
+    <div className="flex w-full flex-col gap-3">
+      <Banner variant="information" onDismiss={() => {}} action={{ label: "Learn more" }}>
+        A new version of KinetixUI is available.
+      </Banner>
+      <Banner variant="action" action={{ label: "Upgrade" }}>
+        You&rsquo;re on the free plan — upgrade for unlimited projects.
+      </Banner>
+    </div>
+  );
+
+const meta = {
+  title: "Feedback/Banner",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<Banner variant=\"information\" onDismiss={close} action={{ label: \"Learn more\" }}>\\n  A new version of KinetixUI is available.\\n</Banner>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

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/DescriptionList.stories.tsx

@@ -0,0 +1,26 @@
+/* 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 { Avatar, DescriptionList, DescriptionListItem } from "@kinetixui/ui";
+
+const Demo = () => (
+    <DescriptionList className="w-full max-w-sm">
+      <DescriptionListItem term="Category">Data Display</DescriptionListItem>
+      <DescriptionListItem term="Built on">Radix Avatar</DescriptionListItem>
+      <DescriptionListItem term="Platforms">React, SwiftUI, Compose, Flutter</DescriptionListItem>
+      <DescriptionListItem term="CLI">npx @kinetixui/cli add avatar</DescriptionListItem>
+    </DescriptionList>
+  );
+
+const meta = {
+  title: "Data Display/DescriptionList",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<DescriptionList>\\n  <DescriptionListItem term=\"Category\">Data Display</DescriptionListItem>\\n  <DescriptionListItem term=\"Built on\">Radix Avatar</DescriptionListItem>\\n</DescriptionList>", 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 /> };

package/src/stories/SegmentedControl.stories.tsx

@@ -0,0 +1,25 @@
+/* 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 { List, SegmentedControl, SegmentedControlItem } from "@kinetixui/ui";
+
+const Demo = () => (
+    <SegmentedControl defaultValue="grid" className="w-full max-w-xs">
+      <SegmentedControlItem value="list">List</SegmentedControlItem>
+      <SegmentedControlItem value="grid">Grid</SegmentedControlItem>
+      <SegmentedControlItem value="board">Board</SegmentedControlItem>
+    </SegmentedControl>
+  );
+
+const meta = {
+  title: "Controls & Actions/SegmentedControl",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<SegmentedControl defaultValue=\"grid\">\\n  <SegmentedControlItem value=\"list\">List</SegmentedControlItem>\\n  <SegmentedControlItem value=\"grid\">Grid</SegmentedControlItem>\\n  <SegmentedControlItem value=\"board\">Board</SegmentedControlItem>\\n</SegmentedControl>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Timeline.stories.tsx

@@ -0,0 +1,28 @@
+/* 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 { SegmentedControl, Timeline } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Timeline
+      className="w-full max-w-sm"
+      items={[
+        { time: "2 hours ago", title: "Deployed to production", content: "v0.9.0 shipped." },
+        { time: "Yesterday", title: "Opened PR #100", content: "feat(ui): add SegmentedControl" },
+        { time: "3 days ago", title: "Project created" },
+      ]}
+    />
+  );
+
+const meta = {
+  title: "Data Display/Timeline",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<Timeline\\n  items={[\\n    { time: \"2 hours ago\", title: \"Deployed to production\", content: \"v0.9.0 shipped.\" },\\n    { time: \"Yesterday\", title: \"Opened PR #100\" },\\n  ]}\\n/>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };