@kinetixui/ui 0.10.0 → 0.12.0

package/src/components/multi-select.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import * as React from "react";
+import { Check } from "lucide-react";
+import { Popover, PopoverAnchor, PopoverContent } from "./popover";
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "./command";
+import { Tag } from "./tag";
+import { cn } from "../lib/utils";
+
+/**
+ * MultiSelect — a `Combobox` that keeps multiple chips; a free-entry
+ * token field with `creatable`. `Combobox` (the existing Popover +
+ * Command recipe) is single-value and `Tag` is display-only, so this
+ * composes both into an actual shippable component rather than another
+ * "recipe" doc page. The trigger is `role="combobox"` on a plain `div`,
+ * not a `<button>` — `Tag`'s own remove control is a real `<button>`,
+ * and a `<button>` can't nest inside a `<button>` (invalid HTML); using
+ * `PopoverAnchor` + manual open-state instead of `PopoverTrigger` avoids
+ * that while keeping the whole thing keyboard-operable. Gap-fill
+ * addition (not in the original Figma source).
+ */
+export interface MultiSelectOption {
+  value: string;
+  label: string;
+}
+
+export interface MultiSelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  options: MultiSelectOption[];
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  placeholder?: string;
+  /** allow adding free-entry tags that aren't in `options` */
+  creatable?: boolean;
+}
+
+const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
+  (
+    { className, options, value, defaultValue = [], onValueChange, placeholder = "Select…", creatable = false, ...props },
+    ref,
+  ) => {
+    const [internal, setInternal] = React.useState(defaultValue);
+    const current = value ?? internal;
+    const [open, setOpen] = React.useState(false);
+    const [query, setQuery] = React.useState("");
+
+    const set = (next: string[]) => {
+      setInternal(next);
+      onValueChange?.(next);
+    };
+    const toggle = (v: string) => set(current.includes(v) ? current.filter((x) => x !== v) : [...current, v]);
+    const remove = (v: string) => set(current.filter((x) => x !== v));
+    const labelFor = (v: string) => options.find((o) => o.value === v)?.label ?? v;
+
+    const trimmed = query.trim();
+    const canCreate = creatable && trimmed.length > 0 && !options.some((o) => o.label.toLowerCase() === trimmed.toLowerCase());
+    const visibleOptions = creatable
+      ? options.filter((o) => o.label.toLowerCase().includes(trimmed.toLowerCase()))
+      : options;
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverAnchor asChild>
+          <div
+            ref={ref}
+            role="combobox"
+            aria-expanded={open}
+            aria-haspopup="listbox"
+            tabIndex={0}
+            onClick={() => setOpen(true)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setOpen(true);
+              }
+            }}
+            className={cn(
+              "flex min-h-11 w-full flex-wrap items-center gap-1.5 border border-input bg-background px-3 py-2 font-sans",
+              "outline-none focus-visible:border-primary focus-visible:shadow-focus",
+              "aria-expanded:border-primary aria-expanded:shadow-focus",
+              className,
+            )}
+            {...props}
+          >
+            {current.length === 0 && <span className="text-body-sm text-muted-foreground">{placeholder}</span>}
+            {current.map((v) => (
+              <Tag key={v} variant="secondary" onRemove={() => remove(v)} onClick={(e) => e.stopPropagation()}>
+                {labelFor(v)}
+              </Tag>
+            ))}
+          </div>
+        </PopoverAnchor>
+        <PopoverContent
+          align="start"
+          className="w-[var(--radix-popover-trigger-width)] p-0"
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          <Command shouldFilter={!creatable}>
+            <CommandInput placeholder="Search…" value={query} onValueChange={setQuery} />
+            <CommandList>
+              <CommandEmpty>
+                {canCreate ? (
+                  <button
+                    type="button"
+                    className="flex w-full items-center px-2 py-1.5 text-left text-body-sm text-foreground hover:bg-accent"
+                    onClick={() => {
+                      toggle(trimmed);
+                      setQuery("");
+                    }}
+                  >
+                    Create “{trimmed}”
+                  </button>
+                ) : (
+                  "No results."
+                )}
+              </CommandEmpty>
+              <CommandGroup>
+                {visibleOptions.map((option) => (
+                  <CommandItem key={option.value} value={option.label} onSelect={() => toggle(option.value)}>
+                    <Check className={cn("size-4", current.includes(option.value) ? "opacity-100" : "opacity-0")} />
+                    {option.label}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+MultiSelect.displayName = "MultiSelect";
+
+export { MultiSelect };

package/src/components/notification-center.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import * as React from "react";
+import { Bell } from "lucide-react";
+import { Popover, PopoverTrigger, PopoverContent } from "./popover";
+import { Button } from "./button";
+import { cn } from "../lib/utils";
+
+/**
+ * NotificationCenter — a bell trigger opening a popover list of
+ * read/unread items with a "mark all read" action. Composed directly
+ * from `Popover` (re-exported as the root — no new open-state logic)
+ * and `Button`; `NotificationItem` follows `ListItem`'s interactive-row
+ * convention. `unreadCount`/`unread`/`onMarkAllRead` are plain props —
+ * the read-state itself stays the caller's, same as every other
+ * controlled/stateless component in this library. Gap-fill addition
+ * (not in the original Figma source).
+ */
+const NotificationCenter = Popover;
+
+export interface NotificationCenterTriggerProps extends React.ComponentPropsWithoutRef<typeof Button> {
+  unreadCount?: number;
+}
+
+const NotificationCenterTrigger = React.forwardRef<HTMLButtonElement, NotificationCenterTriggerProps>(
+  ({ className, unreadCount = 0, children, ...props }, ref) => (
+    <PopoverTrigger asChild>
+      <Button
+        ref={ref}
+        variant="Ghost"
+        size="icon"
+        aria-label={unreadCount > 0 ? `Notifications, ${unreadCount} unread` : "Notifications"}
+        className={cn("relative", className)}
+        {...props}
+      >
+        {children ?? <Bell className="size-5" />}
+        {unreadCount > 0 && (
+          <span className="absolute right-1.5 top-1.5 flex size-2 rounded-full bg-destructive ring-2 ring-background" />
+        )}
+      </Button>
+    </PopoverTrigger>
+  ),
+);
+NotificationCenterTrigger.displayName = "NotificationCenterTrigger";
+
+export interface NotificationCenterContentProps extends React.ComponentPropsWithoutRef<typeof PopoverContent> {
+  onMarkAllRead?: () => void;
+}
+
+const NotificationCenterContent = React.forwardRef<HTMLDivElement, NotificationCenterContentProps>(
+  ({ className, onMarkAllRead, children, align = "end", ...props }, ref) => (
+    <PopoverContent ref={ref} align={align} className={cn("w-80 p-0", className)} {...props}>
+      <div className="flex items-center justify-between border-b border-border px-4 py-3">
+        <p className="text-title-sm font-medium text-foreground">Notifications</p>
+        {onMarkAllRead && (
+          <button
+            type="button"
+            onClick={onMarkAllRead}
+            className="text-label-md font-medium text-primary outline-none hover:underline focus-visible:underline"
+          >
+            Mark all read
+          </button>
+        )}
+      </div>
+      <div className="flex max-h-80 flex-col divide-y divide-border overflow-y-auto">{children}</div>
+    </PopoverContent>
+  ),
+);
+NotificationCenterContent.displayName = "NotificationCenterContent";
+
+export interface NotificationItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  time?: React.ReactNode;
+  unread?: boolean;
+  onSelect?: () => void;
+}
+
+const NotificationItem = React.forwardRef<HTMLDivElement, NotificationItemProps>(
+  ({ className, title, description, time, unread, onSelect, ...props }, ref) => {
+    const interactive = !!onSelect;
+    return (
+      <div
+        ref={ref}
+        role={interactive ? "button" : undefined}
+        tabIndex={interactive ? 0 : undefined}
+        onClick={onSelect}
+        onKeyDown={
+          interactive
+            ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onSelect?.();
+                }
+              }
+            : undefined
+        }
+        className={cn(
+          "flex items-start gap-3 px-4 py-3 font-sans outline-none",
+          interactive && "cursor-pointer hover:bg-accent focus-visible:bg-accent",
+          className,
+        )}
+        {...props}
+      >
+        <span className={cn("mt-1.5 size-2 shrink-0 rounded-full", unread ? "bg-primary" : "bg-transparent")} />
+        <div className="min-w-0 flex-1">
+          <p className={cn("truncate text-body-sm", unread ? "font-medium text-foreground" : "text-muted-foreground")}>
+            {title}
+          </p>
+          {description && <p className="truncate text-body-sm text-muted-foreground">{description}</p>}
+          {time && <p className="mt-0.5 text-label-sm text-muted-foreground">{time}</p>}
+        </div>
+      </div>
+    );
+  },
+);
+NotificationItem.displayName = "NotificationItem";
+
+export { NotificationCenter, NotificationCenterTrigger, NotificationCenterContent, NotificationItem };

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

@@ -0,0 +1,156 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { Button } from "./button";
+
+/**
+ * Tour — sequenced spotlight popovers over real elements (onboarding
+ * walkthroughs), with dismiss/skip/next. `target` is a CSS selector
+ * resolved against the live DOM on every step change (and on resize/
+ * scroll, so the spotlight tracks a target that moves or resizes) rather
+ * than a ref, since steps are authored as plain data ahead of the
+ * elements existing. The spotlight itself is a single positioned `div`
+ * with a `box-shadow: 0 0 0 9999px` — a well-known CSS-only cutout
+ * technique, no SVG mask or second overlay layer needed. No focus trap:
+ * a tour narrates the page rather than blocking interaction with it, so
+ * the underlying page stays operable while a step is shown. Gap-fill
+ * addition (not in the original Figma source).
+ */
+export interface TourStep {
+  /** CSS selector for the element this step spotlights */
+  target: string;
+  title: React.ReactNode;
+  content: React.ReactNode;
+}
+
+export interface TourProps {
+  steps: TourStep[];
+  open: boolean;
+  stepIndex: number;
+  onStepIndexChange: (index: number) => void;
+  onOpenChange: (open: boolean) => void;
+  nextLabel?: React.ReactNode;
+  backLabel?: React.ReactNode;
+  skipLabel?: React.ReactNode;
+  doneLabel?: React.ReactNode;
+}
+
+const SPOTLIGHT_PADDING = 8;
+
+const Tour: React.FC<TourProps> = ({
+  steps,
+  open,
+  stepIndex,
+  onStepIndexChange,
+  onOpenChange,
+  nextLabel = "Next",
+  backLabel = "Back",
+  skipLabel = "Skip",
+  doneLabel = "Done",
+}) => {
+  const [mounted, setMounted] = React.useState(false);
+  const [rect, setRect] = React.useState<DOMRect | null>(null);
+  const step = steps[stepIndex];
+
+  React.useEffect(() => setMounted(true), []);
+
+  React.useEffect(() => {
+    if (!open || !step) return;
+    const update = () => {
+      const el = document.querySelector(step.target);
+      if (el) {
+        setRect(el.getBoundingClientRect());
+        el.scrollIntoView({ behavior: "smooth", block: "center" });
+      } else {
+        setRect(null);
+      }
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [open, step]);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onOpenChange(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, onOpenChange]);
+
+  if (!mounted || !open || !step) return null;
+
+  const isFirst = stepIndex === 0;
+  const isLast = stepIndex === steps.length - 1;
+
+  const spotlightStyle: React.CSSProperties = rect
+    ? {
+        top: rect.top - SPOTLIGHT_PADDING,
+        left: rect.left - SPOTLIGHT_PADDING,
+        width: rect.width + SPOTLIGHT_PADDING * 2,
+        height: rect.height + SPOTLIGHT_PADDING * 2,
+        boxShadow: "0 0 0 9999px rgb(0 0 0 / 0.6)",
+      }
+    : { inset: 0, background: "rgb(0 0 0 / 0.6)" };
+
+  const cardStyle: React.CSSProperties = rect
+    ? {
+        top: Math.min(rect.bottom + SPOTLIGHT_PADDING + 8, window.innerHeight - 220),
+        left: Math.min(Math.max(rect.left, 16), window.innerWidth - 336),
+      }
+    : { top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
+
+  return createPortal(
+    <>
+      <div
+        aria-hidden
+        className="pointer-events-none fixed z-overlay rounded-lg transition-all duration-fast"
+        style={spotlightStyle}
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        className="fixed z-overlay w-80 rounded-lg border border-border bg-popover p-4 font-sans text-popover-foreground shadow-lg transition-all duration-fast"
+        style={cardStyle}
+      >
+        <p className="text-title-sm font-medium text-foreground">{step.title}</p>
+        <div className="mt-1.5 text-body-sm text-muted-foreground">{step.content}</div>
+        <div className="mt-4 flex items-center justify-between">
+          <span className="text-label-sm text-muted-foreground">
+            {stepIndex + 1} / {steps.length}
+          </span>
+          <div className="flex items-center gap-2">
+            {!isFirst && (
+              <Button variant="Ghost" size="sm" onClick={() => onStepIndexChange(stepIndex - 1)}>
+                {backLabel}
+              </Button>
+            )}
+            {!isLast ? (
+              <>
+                <Button variant="Link" size="sm" onClick={() => onOpenChange(false)}>
+                  {skipLabel}
+                </Button>
+                <Button size="sm" onClick={() => onStepIndexChange(stepIndex + 1)}>
+                  {nextLabel}
+                </Button>
+              </>
+            ) : (
+              <Button size="sm" onClick={() => onOpenChange(false)}>
+                {doneLabel}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </>,
+    document.body,
+  );
+};
+
+export { Tour };