@kinetixui/ui 0.10.0 → 0.11.0

package/dist/index.d.ts

@@ -1372,7 +1372,66 @@ interface TimelineProps extends React$1.HTMLAttributes<HTMLOListElement> {
 }
 declare const Timeline: React$1.ForwardRefExoticComponent<TimelineProps & React$1.RefAttributes<HTMLOListElement>>;
 
+/**
+ * Marquee — an auto-scrolling horizontal ticker (logo strip, testimonials),
+ * pausing on hover and respecting `prefers-reduced-motion`. Lifted out of
+ * the marketing site's `reveal.tsx` (`.kx-marquee`/`.kx-marquee-track` in
+ * its `globals.css`) into a portable component: the site version leaned on
+ * a hand-written CSS file a CLI-installed app wouldn't have, so this port
+ * moves the keyframe onto the shared Tailwind preset (`animate-marquee`,
+ * `motion-reduce:animate-none`) instead. Also fixes an accessibility gap
+ * in the site version, which marked *both* content copies `aria-hidden`
+ * (hiding the marquee from screen readers entirely) — only the duplicate
+ * copy needed for the seamless loop is hidden here; the first copy stays
+ * in the accessible DOM flow. Gap-fill addition (not in the original
+ * Figma source).
+ */
+interface MarqueeProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** seconds for one full loop */
+    durationSeconds?: number;
+    pauseOnHover?: boolean;
+}
+declare const Marquee: React$1.ForwardRefExoticComponent<MarqueeProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * ComparisonSlider — a drag handle wiping between two stacked layers
+ * (before/after image, redesign preview, …). Built on Radix's `Slider`
+ * for the drag + keyboard + ARIA behavior (a plain 0–100 value), but
+ * fully custom-drawn: Radix's own `Range` fill can't be reused as the
+ * divider line (it's Radix's own inline `width` style, which would win
+ * over any Tailwind width class), so the line is a separate element
+ * positioned from the same value instead. Gap-fill addition (not in the
+ * original Figma source).
+ */
+interface ComparisonSliderProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    before: React$1.ReactNode;
+    after: React$1.ReactNode;
+    beforeLabel?: React$1.ReactNode;
+    afterLabel?: React$1.ReactNode;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+}
+declare const ComparisonSlider: React$1.ForwardRefExoticComponent<ComparisonSliderProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * PageHeader — title + optional breadcrumb + description + action
+ * cluster + optional tabs row. A recipe every docs/app screen re-lays
+ * out by hand; `breadcrumb`/`actions`/`tabs` are plain slots so callers
+ * compose their own `Breadcrumb`/`Button`/`Tabs` (or `SegmentedControl`)
+ * into them rather than PageHeader re-implementing any of those. Gap-fill
+ * addition (not in the original Figma source).
+ */
+interface PageHeaderProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+    title: React$1.ReactNode;
+    description?: React$1.ReactNode;
+    breadcrumb?: React$1.ReactNode;
+    actions?: React$1.ReactNode;
+    tabs?: React$1.ReactNode;
+}
+declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
+
 /** Merges Tailwind class names, resolving conflicts (clsx + tailwind-merge). */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBar, AppBarActions, AppBarBrand, AppBarLink, type AppBarLinkProps, AppBarNav, AspectRatio, AudioPlayer, type AudioPlayerProps, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, 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 };
+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, ComparisonSlider, type ComparisonSliderProps, 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, Marquee, type MarqueeProps, 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, PageHeader, type PageHeaderProps, 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

@@ -4206,6 +4206,130 @@ var Timeline = React73.forwardRef(
   }) })
 );
 Timeline.displayName = "Timeline";
+
+// src/components/marquee.tsx
+import * as React74 from "react";
+import { jsx as jsx79, jsxs as jsxs45 } from "react/jsx-runtime";
+var Marquee = React74.forwardRef(
+  ({ className, children, durationSeconds = 32, pauseOnHover = true, style, ...props }, ref) => /* @__PURE__ */ jsx79(
+    "div",
+    {
+      ref,
+      className: cn(
+        "group relative flex overflow-hidden",
+        "[mask-image:linear-gradient(90deg,transparent,black_8%,black_92%,transparent)]",
+        className
+      ),
+      style: { ["--marquee-duration"]: `${durationSeconds}s`, ...style },
+      ...props,
+      children: /* @__PURE__ */ jsxs45(
+        "div",
+        {
+          className: cn(
+            "flex w-max animate-marquee motion-reduce:animate-none",
+            pauseOnHover && "group-hover:[animation-play-state:paused]"
+          ),
+          children: [
+            /* @__PURE__ */ jsx79("div", { className: "flex shrink-0 items-center", children }),
+            /* @__PURE__ */ jsx79("div", { "aria-hidden": "true", className: "flex shrink-0 items-center", children })
+          ]
+        }
+      )
+    }
+  )
+);
+Marquee.displayName = "Marquee";
+
+// src/components/comparison-slider.tsx
+import * as React75 from "react";
+import * as SliderPrimitive2 from "@radix-ui/react-slider";
+import { GripVertical as GripVertical2 } from "lucide-react";
+import { jsx as jsx80, jsxs as jsxs46 } from "react/jsx-runtime";
+var ComparisonSlider = React75.forwardRef(
+  ({ className, before, after, beforeLabel, afterLabel, value, defaultValue = 50, onValueChange, ...props }, ref) => {
+    const [internal, setInternal] = React75.useState(defaultValue);
+    const current = value ?? internal;
+    const handleChange = (vals) => {
+      const v = vals[0] ?? current;
+      setInternal(v);
+      onValueChange?.(v);
+    };
+    return /* @__PURE__ */ jsxs46(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative aspect-video w-full select-none overflow-hidden rounded-md bg-muted font-sans",
+          "[&_img]:size-full [&_img]:object-cover [&_video]:size-full [&_video]:object-cover",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx80("div", { className: "absolute inset-0", children: before }),
+          /* @__PURE__ */ jsx80("div", { className: "absolute inset-0 overflow-hidden", style: { clipPath: `inset(0 0 0 ${current}%)` }, children: after }),
+          /* @__PURE__ */ jsx80(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "absolute inset-y-0 w-0.5 -translate-x-1/2 bg-background shadow-sm",
+              style: { left: `${current}%` }
+            }
+          ),
+          beforeLabel && /* @__PURE__ */ jsx80("span", { className: "absolute left-2 top-2 rounded bg-background/80 px-2 py-0.5 text-label-sm text-foreground backdrop-blur-sm", children: beforeLabel }),
+          afterLabel && /* @__PURE__ */ jsx80("span", { className: "absolute right-2 top-2 rounded bg-background/80 px-2 py-0.5 text-label-sm text-foreground backdrop-blur-sm", children: afterLabel }),
+          /* @__PURE__ */ jsxs46(
+            SliderPrimitive2.Root,
+            {
+              value: [current],
+              onValueChange: handleChange,
+              max: 100,
+              step: 0.1,
+              className: "absolute inset-0 flex touch-none items-center",
+              children: [
+                /* @__PURE__ */ jsx80(SliderPrimitive2.Track, { className: "relative h-full w-full grow bg-transparent", children: /* @__PURE__ */ jsx80(SliderPrimitive2.Range, { className: "absolute h-full bg-transparent" }) }),
+                /* @__PURE__ */ jsx80(
+                  SliderPrimitive2.Thumb,
+                  {
+                    "aria-label": "Comparison position",
+                    className: "flex size-8 shrink-0 items-center justify-center rounded-full border-2 border-background bg-background/90 text-foreground shadow-md outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    children: /* @__PURE__ */ jsx80(GripVertical2, { className: "size-4" })
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ComparisonSlider.displayName = "ComparisonSlider";
+
+// src/components/page-header.tsx
+import * as React76 from "react";
+import { jsx as jsx81, jsxs as jsxs47 } from "react/jsx-runtime";
+var PageHeader = React76.forwardRef(
+  ({ className, title, description, breadcrumb, actions, tabs, ...props }, ref) => /* @__PURE__ */ jsxs47(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col gap-4 border-b border-border pb-6 font-sans", className),
+      ...props,
+      children: [
+        breadcrumb && /* @__PURE__ */ jsx81("div", { className: "text-body-sm", children: breadcrumb }),
+        /* @__PURE__ */ jsxs47("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs47("div", { className: "flex min-w-0 flex-col gap-1", children: [
+            /* @__PURE__ */ jsx81("h1", { className: "text-headline-sm font-medium text-foreground", children: title }),
+            description && /* @__PURE__ */ jsx81("p", { className: "text-body-md text-muted-foreground", children: description })
+          ] }),
+          actions && /* @__PURE__ */ jsx81("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })
+        ] }),
+        tabs && /* @__PURE__ */ jsx81("div", { className: "-mb-6", children: tabs })
+      ]
+    }
+  )
+);
+PageHeader.displayName = "PageHeader";
 export {
   Accordion,
   AccordionContent,
@@ -4282,6 +4406,7 @@ export {
   CommandList,
   CommandSeparator,
   CommandShortcut,
+  ComparisonSlider,
   ContextMenu,
   ContextMenuCheckboxItem,
   ContextMenuContent,
@@ -4381,6 +4506,7 @@ export {
   Label2 as Label,
   List3 as List,
   ListItem,
+  Marquee,
   Menubar,
   MenubarCheckboxItem,
   MenubarContent,
@@ -4412,6 +4538,7 @@ export {
   NavigationMenuTrigger,
   NavigationMenuViewport,
   NumberInput,
+  PageHeader,
   Pagination,
   PaginationContent,
   PaginationEllipsis,

package/package.json

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

package/src/components/comparison-slider.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { GripVertical } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * ComparisonSlider — a drag handle wiping between two stacked layers
+ * (before/after image, redesign preview, …). Built on Radix's `Slider`
+ * for the drag + keyboard + ARIA behavior (a plain 0–100 value), but
+ * fully custom-drawn: Radix's own `Range` fill can't be reused as the
+ * divider line (it's Radix's own inline `width` style, which would win
+ * over any Tailwind width class), so the line is a separate element
+ * positioned from the same value instead. Gap-fill addition (not in the
+ * original Figma source).
+ */
+export interface ComparisonSliderProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  before: React.ReactNode;
+  after: React.ReactNode;
+  beforeLabel?: React.ReactNode;
+  afterLabel?: React.ReactNode;
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+}
+
+const ComparisonSlider = React.forwardRef<HTMLDivElement, ComparisonSliderProps>(
+  (
+    { className, before, after, beforeLabel, afterLabel, value, defaultValue = 50, onValueChange, ...props },
+    ref,
+  ) => {
+    const [internal, setInternal] = React.useState(defaultValue);
+    const current = value ?? internal;
+
+    const handleChange = (vals: number[]) => {
+      const v = vals[0] ?? current;
+      setInternal(v);
+      onValueChange?.(v);
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative aspect-video w-full select-none overflow-hidden rounded-md bg-muted font-sans",
+          "[&_img]:size-full [&_img]:object-cover [&_video]:size-full [&_video]:object-cover",
+          className,
+        )}
+        {...props}
+      >
+        <div className="absolute inset-0">{before}</div>
+        <div className="absolute inset-0 overflow-hidden" style={{ clipPath: `inset(0 0 0 ${current}%)` }}>
+          {after}
+        </div>
+
+        <div
+          aria-hidden
+          className="absolute inset-y-0 w-0.5 -translate-x-1/2 bg-background shadow-sm"
+          style={{ left: `${current}%` }}
+        />
+
+        {beforeLabel && (
+          <span className="absolute left-2 top-2 rounded bg-background/80 px-2 py-0.5 text-label-sm text-foreground backdrop-blur-sm">
+            {beforeLabel}
+          </span>
+        )}
+        {afterLabel && (
+          <span className="absolute right-2 top-2 rounded bg-background/80 px-2 py-0.5 text-label-sm text-foreground backdrop-blur-sm">
+            {afterLabel}
+          </span>
+        )}
+
+        <SliderPrimitive.Root
+          value={[current]}
+          onValueChange={handleChange}
+          max={100}
+          step={0.1}
+          className="absolute inset-0 flex touch-none items-center"
+        >
+          <SliderPrimitive.Track className="relative h-full w-full grow bg-transparent">
+            <SliderPrimitive.Range className="absolute h-full bg-transparent" />
+          </SliderPrimitive.Track>
+          <SliderPrimitive.Thumb
+            aria-label="Comparison position"
+            className="flex size-8 shrink-0 items-center justify-center rounded-full border-2 border-background bg-background/90 text-foreground shadow-md outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <GripVertical className="size-4" />
+          </SliderPrimitive.Thumb>
+        </SliderPrimitive.Root>
+      </div>
+    );
+  },
+);
+ComparisonSlider.displayName = "ComparisonSlider";
+
+export { ComparisonSlider };

package/src/components/marquee.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * Marquee — an auto-scrolling horizontal ticker (logo strip, testimonials),
+ * pausing on hover and respecting `prefers-reduced-motion`. Lifted out of
+ * the marketing site's `reveal.tsx` (`.kx-marquee`/`.kx-marquee-track` in
+ * its `globals.css`) into a portable component: the site version leaned on
+ * a hand-written CSS file a CLI-installed app wouldn't have, so this port
+ * moves the keyframe onto the shared Tailwind preset (`animate-marquee`,
+ * `motion-reduce:animate-none`) instead. Also fixes an accessibility gap
+ * in the site version, which marked *both* content copies `aria-hidden`
+ * (hiding the marquee from screen readers entirely) — only the duplicate
+ * copy needed for the seamless loop is hidden here; the first copy stays
+ * in the accessible DOM flow. Gap-fill addition (not in the original
+ * Figma source).
+ */
+export interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** seconds for one full loop */
+  durationSeconds?: number;
+  pauseOnHover?: boolean;
+}
+
+const Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(
+  ({ className, children, durationSeconds = 32, pauseOnHover = true, style, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "group relative flex overflow-hidden",
+        "[mask-image:linear-gradient(90deg,transparent,black_8%,black_92%,transparent)]",
+        className,
+      )}
+      style={{ ["--marquee-duration" as string]: `${durationSeconds}s`, ...style }}
+      {...props}
+    >
+      {/* the track is 2x content width (two copies side by side); animating it
+          exactly -50% of its own width moves it one content-width, which is
+          what makes the loop seamless when it snaps back to 0. */}
+      <div
+        className={cn(
+          "flex w-max animate-marquee motion-reduce:animate-none",
+          pauseOnHover && "group-hover:[animation-play-state:paused]",
+        )}
+      >
+        <div className="flex shrink-0 items-center">{children}</div>
+        <div aria-hidden="true" className="flex shrink-0 items-center">
+          {children}
+        </div>
+      </div>
+    </div>
+  ),
+);
+Marquee.displayName = "Marquee";
+
+export { Marquee };

package/src/components/page-header.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * PageHeader — title + optional breadcrumb + description + action
+ * cluster + optional tabs row. A recipe every docs/app screen re-lays
+ * out by hand; `breadcrumb`/`actions`/`tabs` are plain slots so callers
+ * compose their own `Breadcrumb`/`Button`/`Tabs` (or `SegmentedControl`)
+ * into them rather than PageHeader re-implementing any of those. Gap-fill
+ * addition (not in the original Figma source).
+ */
+export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  breadcrumb?: React.ReactNode;
+  actions?: React.ReactNode;
+  tabs?: React.ReactNode;
+}
+
+const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
+  ({ className, title, description, breadcrumb, actions, tabs, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex flex-col gap-4 border-b border-border pb-6 font-sans", className)}
+      {...props}
+    >
+      {breadcrumb && <div className="text-body-sm">{breadcrumb}</div>}
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="flex min-w-0 flex-col gap-1">
+          <h1 className="text-headline-sm font-medium text-foreground">{title}</h1>
+          {description && <p className="text-body-md text-muted-foreground">{description}</p>}
+        </div>
+        {actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>}
+      </div>
+      {tabs && <div className="-mb-6">{tabs}</div>}
+    </div>
+  ),
+);
+PageHeader.displayName = "PageHeader";
+
+export { PageHeader };

package/src/index.ts

@@ -351,5 +351,8 @@ export {
   type SegmentedControlProps,
 } from "./components/segmented-control";
 export { Timeline, type TimelineItem, type TimelineProps } from "./components/timeline";
+export { Marquee, type MarqueeProps } from "./components/marquee";
+export { ComparisonSlider, type ComparisonSliderProps } from "./components/comparison-slider";
+export { PageHeader, type PageHeaderProps } from "./components/page-header";
 
 export { cn } from "./lib/utils";

package/src/stories/ComparisonSlider.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 { ComparisonSlider } from "@kinetixui/ui";
+
+const Demo = () => (
+    <ComparisonSlider
+      className="w-full max-w-md"
+      beforeLabel="Before"
+      afterLabel="After"
+      before={<div className="flex size-full items-center justify-center bg-muted text-body-sm text-muted-foreground">Original</div>}
+      after={<div className="flex size-full items-center justify-center bg-primary/15 text-body-sm text-primary">Redesign</div>}
+    />
+  );
+
+const meta = {
+  title: "Controls & Actions/ComparisonSlider",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<ComparisonSlider\\n  beforeLabel=\"Before\"\\n  afterLabel=\"After\"\\n  before={<img src=\"/before.jpg\" alt=\"\" />}\\n  after={<img src=\"/after.jpg\" alt=\"\" />}\\n/>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Marquee.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 { Marquee } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Marquee durationSeconds={18} className="w-full max-w-md">
+      {["React", "SwiftUI", "Jetpack Compose", "Flutter"].map((p) => (
+        <span key={p} className="flex items-center gap-2 px-4 text-body-sm text-muted-foreground">
+          <span className="size-1.5 rounded-full bg-primary" />
+          {p}
+        </span>
+      ))}
+    </Marquee>
+  );
+
+const meta = {
+  title: "Data Display/Marquee",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<Marquee durationSeconds={18}>\\n  {items.map((item) => (\\n    <span key={item}>{item}</span>\\n  ))}\\n</Marquee>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/PageHeader.stories.tsx

@@ -0,0 +1,47 @@
+/* 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 { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, PageHeader } from "@kinetixui/ui";
+import { Settings } from "lucide-react";
+
+const Demo = () => (
+    <PageHeader
+      className="w-full"
+      breadcrumb={
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">Projects</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>KinetixUI</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      }
+      title="KinetixUI"
+      description="One token architecture, in motion across every platform."
+      actions={
+        <>
+          <Button variant="Outline" size="sm">
+            Settings
+          </Button>
+          <Button size="sm">Deploy</Button>
+        </>
+      }
+    />
+  );
+
+const meta = {
+  title: "Navigation/PageHeader",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<PageHeader\\n  breadcrumb={<Breadcrumb>...</Breadcrumb>}\\n  title=\"KinetixUI\"\\n  description=\"One token architecture, in motion across every platform.\"\\n  actions={<><Button variant=\"Outline\" size=\"sm\">Settings</Button><Button size=\"sm\">Deploy</Button></>}\\n/>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/tailwind.config.ts

@@ -127,11 +127,13 @@ export default {
         "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" } },
         "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" } },
         "caret-blink": { "0%,70%,100%": { opacity: "1" }, "20%,50%": { opacity: "0" } },
+        marquee: { from: { transform: "translateX(0)" }, to: { transform: "translateX(-50%)" } },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         "caret-blink": "caret-blink 1.25s ease-out infinite",
+        marquee: "marquee var(--marquee-duration, 32s) linear infinite",
       },
     },
   },