@kinetixui/ui 0.1.0

package/src/components/list.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * List — a composable list of rows: leading icon/avatar, title, optional
+ * description, trailing content. Distinct from `Table` (tabular data): List
+ * is single-column, built for mobile menus, settings screens and search
+ * results.
+ */
+const List = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} role="list" className={cn("flex flex-col divide-y divide-border", className)} {...props} />
+  ),
+);
+List.displayName = "List";
+
+export interface ListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  leading?: React.ReactNode;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  trailing?: React.ReactNode;
+  disabled?: boolean;
+  /** render as a pressable row */
+  onSelect?: () => void;
+}
+
+const ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(
+  ({ className, leading, title, description, trailing, disabled, onSelect, ...props }, ref) => {
+    const interactive = !!onSelect && !disabled;
+    return (
+      <div
+        ref={ref}
+        role={interactive ? "button" : "listitem"}
+        tabIndex={interactive ? 0 : undefined}
+        aria-disabled={disabled}
+        onClick={disabled ? undefined : onSelect}
+        onKeyDown={
+          interactive
+            ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onSelect?.();
+                }
+              }
+            : undefined
+        }
+        className={cn(
+          "flex items-center gap-3 px-3 py-3 font-sans outline-none",
+          interactive && "cursor-pointer hover:bg-accent focus-visible:bg-accent",
+          disabled && "pointer-events-none opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        {leading && <div className="flex shrink-0 items-center justify-center">{leading}</div>}
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-body-md text-foreground">{title}</div>
+          {description && <div className="truncate text-body-sm text-muted-foreground">{description}</div>}
+        </div>
+        {trailing && <div className="flex shrink-0 items-center gap-2">{trailing}</div>}
+      </div>
+    );
+  },
+);
+ListItem.displayName = "ListItem";
+
+export { List, ListItem };

package/src/components/menubar.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const MenubarMenu = (props: React.ComponentProps<typeof MenubarPrimitive.Menu>) => (
+  <MenubarPrimitive.Menu {...props} />
+);
+const MenubarGroup = (props: React.ComponentProps<typeof MenubarPrimitive.Group>) => (
+  <MenubarPrimitive.Group {...props} />
+);
+const MenubarPortal = (props: React.ComponentProps<typeof MenubarPrimitive.Portal>) => (
+  <MenubarPrimitive.Portal {...props} />
+);
+const MenubarSub = (props: React.ComponentProps<typeof MenubarPrimitive.Sub>) => (
+  <MenubarPrimitive.Sub {...props} />
+);
+const MenubarRadioGroup = (props: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) => (
+  <MenubarPrimitive.RadioGroup {...props} />
+);
+
+const itemCls =
+  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+const contentCls =
+  "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95";
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn("flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-sm font-sans", className)}
+    {...props}
+  />
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & { inset?: boolean }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger ref={ref} className={cn(itemCls, "data-[state=open]:bg-accent", inset && "pl-8", className)} {...props}>
+    {children}
+    <ChevronRight className="ml-auto size-4" />
+  </MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent ref={ref} className={cn(contentCls, className)} {...props} />
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+  <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Content
+      ref={ref}
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(contentCls, className)}
+      {...props}
+    />
+  </MenubarPrimitive.Portal>
+));
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item ref={ref} className={cn(itemCls, inset && "pl-8", className)} {...props} />
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem ref={ref} className={cn(itemCls, "pl-8", className)} checked={checked} {...props}>
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="size-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem ref={ref} className={cn(itemCls, "pl-8", className)} {...props}>
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="size-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)} {...props} />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />
+);
+MenubarShortcut.displayName = "MenubarShortcut";
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+};

package/src/components/metric.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import * as React from "react";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * Metric — a stat / KPI display: label, value, an optional trend indicator
+ * and an optional chart or icon slot (bring your own chart, e.g. compose
+ * with `ChartContainer`).
+ */
+export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  trend?: "up" | "down" | "neutral";
+  change?: React.ReactNode;
+  icon?: React.ReactNode;
+  chart?: React.ReactNode;
+}
+
+const Metric = React.forwardRef<HTMLDivElement, MetricProps>(
+  ({ className, label, value, trend, change, icon, chart, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col gap-2 rounded-md border border-input p-4 font-sans", className)} {...props}>
+      <div className="flex items-center justify-between">
+        <p className="text-body-sm text-muted-foreground">{label}</p>
+        {icon && <span className="text-muted-foreground [&_svg]:size-5">{icon}</span>}
+      </div>
+      <div className="flex items-end justify-between gap-2">
+        <p className="text-headline-sm font-medium text-foreground">{value}</p>
+        {trend && (
+          <span
+            className={cn(
+              "inline-flex items-center gap-0.5 text-label-md font-medium",
+              trend === "up" && "text-success",
+              trend === "down" && "text-destructive",
+              trend === "neutral" && "text-muted-foreground",
+            )}
+          >
+            {trend === "up" && <ArrowUp className="size-3.5" />}
+            {trend === "down" && <ArrowDown className="size-3.5" />}
+            {change}
+          </span>
+        )}
+      </div>
+      {chart && <div className="mt-1">{chart}</div>}
+    </div>
+  ),
+);
+Metric.displayName = "Metric";
+
+export { Metric };

package/src/components/modal.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { Dialog, DialogOverlay, DialogPortal, DialogTrigger } from "./dialog";
+
+/**
+ * Modal — reconciled 1:1 with the KinetixUI design source, node 54857:1322.
+ * A structured dialog: header (title + close) · divider · body (description) ·
+ * divider · right-aligned footer. `--radius-xl` corner, soft popup shadow.
+ *
+ * type:
+ *   Info          → one primary action ("Got it")
+ *   Confirmation  → Cancel + primary ("Confirm")
+ *   Warning       → Cancel + primary ("Proceed")
+ *   Destructive   → Cancel + destructive ("Delete")
+ */
+export type ModalType = "Info" | "Confirmation" | "Warning" | "Destructive";
+
+const DEFAULT_ACTION: Record<ModalType, string> = {
+  Info: "Got it",
+  Confirmation: "Confirm",
+  Warning: "Proceed",
+  Destructive: "Delete",
+};
+
+export interface ModalProps {
+  type?: ModalType;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** overrides the type's default action label */
+  actionLabel?: string;
+  cancelLabel?: string;
+  onAction?: () => void;
+  onCancel?: () => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+function Modal({
+  type = "Info",
+  title,
+  description,
+  actionLabel,
+  cancelLabel = "Cancel",
+  onAction,
+  onCancel,
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger,
+  children,
+  className,
+}: ModalProps) {
+  const showCancel = type !== "Info";
+
+  return (
+    <Dialog open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+      <DialogPortal>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+          className={cn(
+            "fixed left-1/2 top-1/2 z-50 flex w-full max-w-[480px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl bg-background font-sans",
+            "shadow-[0_4px_24px_rgba(0,0,0,0.12)]",
+            "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+            className,
+          )}
+        >
+          <header className="flex items-center justify-between px-6 pb-3 pt-5">
+            <DialogPrimitive.Title className="min-w-0 flex-1 text-[18px] font-semibold leading-6 text-foreground">
+              {title}
+            </DialogPrimitive.Title>
+            <DialogPrimitive.Close
+              className="rounded-sm opacity-70 outline-none transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label="Close"
+            >
+              <X className="size-5" />
+            </DialogPrimitive.Close>
+          </header>
+
+          <div className="h-px w-full bg-border" />
+
+          <div className="px-6 py-5">
+            {description && (
+              <DialogPrimitive.Description className="text-[14px] leading-5 tracking-[0.25px] text-muted-foreground">
+                {description}
+              </DialogPrimitive.Description>
+            )}
+            {children}
+          </div>
+
+          <div className="h-px w-full bg-border" />
+
+          <footer className="flex items-center justify-end gap-3 px-6 py-4">
+            {showCancel && (
+              <DialogPrimitive.Close asChild>
+                <Button variant="Outline" size="lg" onClick={onCancel}>
+                  {cancelLabel}
+                </Button>
+              </DialogPrimitive.Close>
+            )}
+            <DialogPrimitive.Close asChild>
+              <Button
+                variant={type === "Destructive" ? "Destructive" : "Primary"}
+                size="lg"
+                onClick={onAction}
+              >
+                {actionLabel ?? DEFAULT_ACTION[type]}
+              </Button>
+            </DialogPrimitive.Close>
+          </footer>
+        </DialogPrimitive.Content>
+      </DialogPortal>
+    </Dialog>
+  );
+}
+
+export { Modal };

package/src/components/navigation-bar.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * NavigationBar — a mobile top app bar. Leading back button (or a custom
+ * `leading` slot), title with optional info text, trailing actions.
+ */
+export interface NavigationBarProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  title: React.ReactNode;
+  infoText?: React.ReactNode;
+  onBack?: () => void;
+  leading?: React.ReactNode;
+  actions?: React.ReactNode;
+}
+
+const NavigationBar = React.forwardRef<HTMLElement, NavigationBarProps>(
+  ({ className, title, infoText, onBack, leading, actions, ...props }, ref) => (
+    <header
+      ref={ref}
+      className={cn("flex h-14 w-full items-center gap-2 border-b border-border bg-background px-2 font-sans", className)}
+      {...props}
+    >
+      <div className="flex min-w-9 shrink-0 items-center">
+        {leading ??
+          (onBack && (
+            <button
+              type="button"
+              onClick={onBack}
+              aria-label="Back"
+              className="flex size-9 items-center justify-center rounded-full text-foreground outline-none transition-colors hover:bg-accent focus-visible:bg-accent"
+            >
+              <ChevronLeft className="size-5" />
+            </button>
+          ))}
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-body-lg font-medium text-foreground">{title}</p>
+        {infoText && <p className="truncate text-body-sm text-muted-foreground">{infoText}</p>}
+      </div>
+      {actions && <div className="flex shrink-0 items-center gap-1">{actions}</div>}
+    </header>
+  ),
+);
+NavigationBar.displayName = "NavigationBar";
+
+export { NavigationBar };

package/src/components/navigation-menu.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center font-sans", className)}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn("group flex flex-1 list-none items-center justify-center gap-1", className)}
+    {...props}
+  />
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50",
+);
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger ref={ref} className={cn(navigationMenuTriggerStyle(), "group", className)} {...props}>
+    {children}
+    <ChevronDown
+      className="relative top-px ml-1 size-3 transition-transform duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden
+    />
+  </NavigationMenuPrimitive.Trigger>
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out md:absolute md:w-auto",
+      className,
+    )}
+    {...props}
+  />
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className="absolute left-0 top-full flex justify-center">
+    <NavigationMenuPrimitive.Viewport
+      ref={ref}
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className,
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+));
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+};

package/src/components/number-input.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import * as React from "react";
+import { Minus, Plus } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * NumberInput — a numeric field with increment / decrement controls.
+ */
+export interface NumberInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange"> {
+  value?: number;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  onChange?: (value: number) => void;
+}
+
+const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+  ({ className, value, defaultValue = 0, min, max, step = 1, onChange, disabled, ...props }, ref) => {
+    const [internal, setInternal] = React.useState(defaultValue);
+    const current = value ?? internal;
+
+    const clamp = (n: number) => {
+      let v = n;
+      if (min != null) v = Math.max(min, v);
+      if (max != null) v = Math.min(max, v);
+      return v;
+    };
+
+    const set = (n: number) => {
+      const v = clamp(n);
+      setInternal(v);
+      onChange?.(v);
+    };
+
+    return (
+      <div
+        className={cn(
+          "flex h-10 items-stretch overflow-hidden rounded-md border border-input font-sans focus-within:shadow-focus",
+          disabled && "pointer-events-none opacity-50",
+          className,
+        )}
+      >
+        <button
+          type="button"
+          aria-label="Decrease"
+          disabled={disabled || (min != null && current <= min)}
+          onClick={() => set(current - step)}
+          className="flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+        >
+          <Minus className="size-4" />
+        </button>
+        <input
+          ref={ref}
+          type="number"
+          inputMode="numeric"
+          value={current}
+          min={min}
+          max={max}
+          step={step}
+          disabled={disabled}
+          onChange={(e) => {
+            const n = e.target.valueAsNumber;
+            if (!Number.isNaN(n)) set(n);
+          }}
+          className="w-full min-w-0 flex-1 border-x border-input bg-transparent px-2 text-center text-body-md text-foreground outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+          {...props}
+        />
+        <button
+          type="button"
+          aria-label="Increase"
+          disabled={disabled || (max != null && current >= max)}
+          onClick={() => set(current + step)}
+          className="flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+        >
+          <Plus className="size-4" />
+        </button>
+      </div>
+    );
+  },
+);
+NumberInput.displayName = "NumberInput";
+
+export { NumberInput };