@vvedantb/ui 0.17.1 → 0.18.0

package/src/kibo/kanban.tsx

@@ -0,0 +1,338 @@
+"use client";
+
+import type {
+  Announcements,
+  CollisionDetection,
+  DragCancelEvent,
+  DragEndEvent,
+  DragOverEvent,
+  DragStartEvent,
+} from "@dnd-kit/core";
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  useDroppable,
+} from "@dnd-kit/core";
+import { SortableContext, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  createContext,
+  type HTMLAttributes,
+  type ReactNode,
+  useContext,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+import { useCn, useUiConfig } from "../ui/ui-config";
+import { SURFACE_RADIUS_CLASS } from "../utils/surface-radius";
+import { useDragSensors } from "../utils/useDragSensors";
+import { resolveOverColumnId } from "./kanbanDropTarget";
+
+export interface KanbanConfig {
+  /** Replaces the built-in classes of a part. */
+  classes?: {
+    /**
+     * `KanbanCard`: grab cursor, the transitions it runs itself and press
+     * feedback. The radius and the dragging state are added on top.
+     */
+    card?: string;
+  };
+  /**
+   * The transitions `KanbanCard` runs itself (press scale and drag fade),
+   * appended to the reorder transition dnd-kit writes inline. A CSS
+   * `transition` list.
+   */
+  cardTransition?: string;
+}
+
+const defaultClasses = {
+  card: "cursor-grab transition-[opacity,transform,scale] duration-150 active:scale-[0.98]",
+};
+
+const DEFAULT_CARD_TRANSITION =
+  "scale 150ms cubic-bezier(0.22, 1, 0.36, 1), opacity 150ms cubic-bezier(0.22, 1, 0.36, 1)";
+
+export type KanbanItem = {
+  id: string;
+  name: string;
+  column: string;
+};
+
+export type KanbanColumnDef = {
+  id: string;
+  name: string;
+};
+
+type KanbanContextValue = {
+  columns: KanbanColumnDef[];
+  data: KanbanItem[];
+  activeCardId: string | null;
+  /**
+   * Column the dragged card would land in. Distinct from a column's own
+   * `isOver`: pointing at a card resolves `over` to that card, so the column
+   * under the pointer never reports `isOver` once it holds any cards.
+   */
+  overColumnId: string | null;
+};
+
+const KanbanContext = createContext<KanbanContextValue>({
+  columns: [],
+  data: [],
+  activeCardId: null,
+  overColumnId: null,
+});
+
+export const useKanbanContext = () => useContext(KanbanContext);
+
+// --- KanbanBoard: droppable column zone ---
+
+export type KanbanBoardProps = {
+  id: string;
+  children: ReactNode;
+  className?: string;
+  disabled?: boolean;
+};
+
+export const KanbanBoard = ({
+  id,
+  children,
+  className,
+  disabled = false,
+}: KanbanBoardProps) => {
+  const { isOver, setNodeRef } = useDroppable({ id, disabled });
+  const { overColumnId } = useKanbanContext();
+  const merge = useCn();
+  const isDropTarget = !disabled && (isOver || overColumnId === id);
+
+  return (
+    <div
+      className={merge(
+        "flex size-full min-h-40 flex-col overflow-hidden bg-surface-secondary/40 text-xs transition-[background-color,border-color]",
+        SURFACE_RADIUS_CLASS,
+        className,
+        // After `className` on purpose: callers set a column background, and
+        // tailwind-merge keeps whichever `bg-*` / `border-*` comes last — so
+        // the drop highlight has to be the last word or it never shows.
+        isDropTarget && "border border-primary/40 bg-primary/10",
+      )}
+      ref={setNodeRef}
+    >
+      {children}
+    </div>
+  );
+};
+
+// --- KanbanCard: sortable item wrapper ---
+
+export type KanbanCardProps = {
+  id: string;
+  children: ReactNode;
+  className?: string;
+  onClick?: () => void;
+};
+
+export const KanbanCard = ({
+  id,
+  children,
+  className,
+  onClick,
+}: KanbanCardProps) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transition,
+    transform,
+    isDragging,
+  } = useSortable({ id });
+  const config = useUiConfig("Kanban");
+  const classes = { ...defaultClasses, ...config?.classes };
+  const merge = useCn();
+
+  const style = {
+    /**
+     * `useSortable` hands back a `transition` string, and putting it in inline
+     * style outranks every `transition-*` class on the element — the shorthand
+     * resets `transition-property`, so while a sort is animating the class below
+     * is not merely overridden on duration, it stops applying at all and the
+     * press scale snaps. dnd-kit's own entry only ever names `transform`.
+     *
+     * Appending the two properties the card animates itself keeps the reflow
+     * tween dnd-kit wants and the press and drag-fade the card wants. The value
+     * is `undefined` when nothing is sorting, which is why it is filtered rather
+     * than interpolated.
+     */
+    transition: [transition, config?.cardTransition ?? DEFAULT_CARD_TRANSITION]
+      .filter(Boolean)
+      .join(", "),
+    transform: CSS.Transform.toString(transform),
+  };
+
+  return (
+    <div
+      style={style}
+      {...listeners}
+      {...attributes}
+      ref={setNodeRef}
+      onClick={onClick}
+      className={merge(
+        // Press feedback on pointer-down, not on release — the card has to
+        // acknowledge the grab before the drag threshold is crossed, or the
+        // first few pixels of every drag read as a dead control.
+        //
+        // `scale` is named explicitly alongside `transform`: an arbitrary
+        // `transition-[…]` emits exactly the properties listed, and Tailwind
+        // compiles `scale-[0.98]` to the individual `scale` property, which
+        // `transform` does not match — so this press was a no-op. `transform`
+        // stays for the inline one `useSortable` writes below.
+        classes.card,
+        SURFACE_RADIUS_CLASS,
+        isDragging && "pointer-events-none cursor-grabbing opacity-30",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+// --- KanbanCards: SortableContext + auto-filter by column from context ---
+
+export type KanbanCardsProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "children" | "id"
+> & {
+  children: (item: KanbanItem) => ReactNode;
+  id: string;
+};
+
+export const KanbanCards = ({
+  children,
+  className,
+  id,
+  ...props
+}: KanbanCardsProps) => {
+  const { data } = useKanbanContext();
+  const filteredData = data.filter((item) => item.column === id);
+  const itemIds = filteredData.map((item) => item.id);
+  const merge = useCn();
+
+  return (
+    <SortableContext items={itemIds}>
+      <div className={merge("flex grow flex-col gap-1.5", className)} {...props}>
+        {filteredData.map(children)}
+      </div>
+    </SortableContext>
+  );
+};
+
+// --- KanbanHeader: simple styled header ---
+
+export type KanbanHeaderProps = HTMLAttributes<HTMLDivElement>;
+
+export const KanbanHeader = ({ className, ...props }: KanbanHeaderProps) => {
+  const merge = useCn();
+  return <div className={merge("m-0 p-2 font-semibold text-sm", className)} {...props} />;
+};
+
+// --- KanbanProvider: DnD context + Kanban context + a11y ---
+
+export type KanbanProviderProps = {
+  children: ReactNode;
+  columns: KanbanColumnDef[];
+  data: KanbanItem[];
+  overlay?: ReactNode;
+  className?: string;
+  onDragStart?: (event: DragStartEvent) => void;
+  onDragEnd?: (event: DragEndEvent) => void;
+  onDragOver?: (event: DragOverEvent) => void;
+  onDragCancel?: (event: DragCancelEvent) => void;
+  collisionDetection?: CollisionDetection;
+};
+
+export const KanbanProvider = ({
+  children,
+  columns,
+  data,
+  overlay,
+  className,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  onDragCancel,
+  collisionDetection = closestCenter,
+}: KanbanProviderProps) => {
+  const [activeCardId, setActiveCardId] = useState<string | null>(null);
+  const [overColumnId, setOverColumnId] = useState<string | null>(null);
+
+  const sensors = useDragSensors({ sortable: true });
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const card = data.find((item) => item.id === event.active.id);
+    if (card) {
+      setActiveCardId(String(event.active.id));
+    }
+    onDragStart?.(event);
+  };
+
+  const handleDragOver = (event: DragOverEvent) => {
+    const overId = event.over ? String(event.over.id) : null;
+    setOverColumnId(resolveOverColumnId(overId, columns, data));
+    onDragOver?.(event);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    setActiveCardId(null);
+    setOverColumnId(null);
+    onDragEnd?.(event);
+  };
+
+  const handleDragCancel = (event: DragCancelEvent) => {
+    setActiveCardId(null);
+    setOverColumnId(null);
+    onDragCancel?.(event);
+  };
+
+  const announcements: Announcements = {
+    onDragStart({ active }) {
+      const item = data.find((d) => d.id === active.id);
+      const col = columns.find((c) => c.id === item?.column);
+      return `Picked up card "${item?.name}" from "${col?.name}" column`;
+    },
+    onDragOver({ active, over }) {
+      const item = data.find((d) => d.id === active.id);
+      const col = columns.find((c) => c.id === over?.id);
+      return `Dragged card "${item?.name}" over "${col?.name}" column`;
+    },
+    onDragEnd({ active, over }) {
+      const item = data.find((d) => d.id === active.id);
+      const col = columns.find((c) => c.id === over?.id);
+      return `Dropped card "${item?.name}" into "${col?.name}" column`;
+    },
+    onDragCancel({ active }) {
+      const item = data.find((d) => d.id === active.id);
+      return `Cancelled dragging card "${item?.name}"`;
+    },
+  };
+
+  return (
+    <KanbanContext.Provider
+      value={{ columns, data, activeCardId, overColumnId }}
+    >
+      <DndContext
+        accessibility={{ announcements }}
+        collisionDetection={collisionDetection}
+        onDragEnd={handleDragEnd}
+        onDragOver={handleDragOver}
+        onDragStart={handleDragStart}
+        onDragCancel={handleDragCancel}
+        sensors={sensors}
+      >
+        {className ? <div className={className}>{children}</div> : children}
+        {typeof window !== "undefined" &&
+          createPortal(<DragOverlay>{overlay}</DragOverlay>, document.body)}
+      </DndContext>
+    </KanbanContext.Provider>
+  );
+};

package/src/kibo/kanbanDropTarget.ts

@@ -0,0 +1,25 @@
+import type { KanbanColumnDef, KanbanItem } from "./kanban";
+
+/**
+ * The column a dragged card would land in, given whatever dnd-kit reports as
+ * `over`.
+ *
+ * `over` is the column only while the pointer is on that column's empty space —
+ * once it is on a card, `over` is the card. A column that relies on its own
+ * `isOver` therefore stops highlighting the moment it holds anything, which is
+ * every column that matters. Resolving the card back to its column is what makes
+ * the drop target visible during a real drag.
+ */
+export function resolveOverColumnId(
+  overId: string | null,
+  columns: KanbanColumnDef[],
+  data: KanbanItem[],
+): string | null {
+  if (overId === null) {
+    return null;
+  }
+  if (columns.some((column) => column.id === overId)) {
+    return overId;
+  }
+  return data.find((item) => item.id === overId)?.column ?? null;
+}

package/src/kibo/list.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import {
+  DndContext,
+  type DragEndEvent,
+  rectIntersection,
+  useDraggable,
+  useDroppable,
+} from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import type { ReactNode } from "react";
+import { useCn } from "../ui/ui-config";
+import { useDragSensors } from "../utils/useDragSensors";
+
+export type { DragEndEvent as SortableListDragEndEvent } from "@dnd-kit/core";
+
+export type SortableListItemsProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const SortableListItems = ({ children, className }: SortableListItemsProps) => {
+  const merge = useCn();
+  return (
+    <div className={merge("flex flex-1 flex-col gap-0.5", className)}>
+      {children}
+    </div>
+  );
+};
+
+export type SortableListHeaderProps =
+  | {
+      children: ReactNode;
+    }
+  | {
+      name: string;
+      color: string;
+      className?: string;
+    };
+
+export const SortableListHeader = (props: SortableListHeaderProps) => {
+  const merge = useCn();
+  return "children" in props ? (
+    props.children
+  ) : (
+    <div
+      className={merge(
+        "flex shrink-0 items-center gap-2 bg-foreground/5 p-3",
+        props.className,
+      )}
+    >
+      <div
+        className="h-2 w-2 rounded-full"
+        style={{ backgroundColor: props.color }}
+      />
+      <p className="m-0 font-semibold text-sm">{props.name}</p>
+    </div>
+  );
+};
+
+export type SortableListGroupProps = {
+  id: string;
+  children: ReactNode;
+  className?: string;
+};
+
+export const SortableListGroup = ({ id, children, className }: SortableListGroupProps) => {
+  const { setNodeRef, isOver } = useDroppable({ id });
+  const merge = useCn();
+
+  return (
+    <div
+      className={merge(
+        "transition-colors",
+        isOver && "bg-surface-secondary/40",
+        className,
+      )}
+      ref={setNodeRef}
+    >
+      {children}
+    </div>
+  );
+};
+
+export type SortableListItemProps = {
+  readonly id: string;
+  readonly name: string;
+  readonly index: number;
+  readonly parent: string;
+  readonly children?: ReactNode;
+  readonly className?: string;
+};
+
+// Not built on `ListRow`: that row always wraps its children in a padded body
+// `<div>` and adds its own surface, radius and hover, so rendering through it
+// would change this item's DOM for every caller. This item is only the draggable box.
+export const SortableListItem = ({
+  id,
+  name,
+  index,
+  parent,
+  children,
+  className,
+}: SortableListItemProps) => {
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({
+      id,
+      data: { index, parent },
+    });
+  const merge = useCn();
+
+  return (
+    <div
+      className={merge(
+        "cursor-grab",
+        isDragging && "cursor-grabbing opacity-50",
+        className,
+      )}
+      style={{
+        transform: transform
+          ? `translateX(${transform.x}px) translateY(${transform.y}px)`
+          : "none",
+      }}
+      {...listeners}
+      {...attributes}
+      ref={setNodeRef}
+    >
+      {children ?? <p className="m-0 font-medium text-sm">{name}</p>}
+    </div>
+  );
+};
+
+export type SortableListProviderProps = {
+  children: ReactNode;
+  onDragEnd: (event: DragEndEvent) => void;
+  className?: string;
+};
+
+export const SortableListProvider = ({
+  children,
+  onDragEnd,
+  className,
+}: SortableListProviderProps) => {
+  // A lone `PointerSensor` armed on distance meant the list could not be
+  // reordered by touch at all: the whole row is the drag handle, the drag is
+  // restricted to the vertical axis, and that is the same axis the finger
+  // scrolls on — so the browser claimed the gesture and cancelled the pointer
+  // every time.
+  const sensors = useDragSensors();
+  const merge = useCn();
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={rectIntersection}
+      modifiers={[restrictToVerticalAxis]}
+      onDragEnd={onDragEnd}
+    >
+      <div className={merge("flex size-full flex-col", className)}>{children}</div>
+    </DndContext>
+  );
+};

package/src/kibo/theme-switcher.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { IconDeviceDesktop, IconMoon, IconSun } from "@tabler/icons-react";
+import { motion } from "motion/react";
+import { useCallback } from "react";
+import { springTransition } from "../motion/presets";
+import { useCn, useUiConfig } from "../ui/ui-config";
+
+const themes = [
+  {
+    key: "system",
+    icon: IconDeviceDesktop,
+    label: "System theme",
+  },
+  {
+    key: "light",
+    icon: IconSun,
+    label: "Light theme",
+  },
+  {
+    key: "dark",
+    icon: IconMoon,
+    label: "Dark theme",
+  },
+] as const;
+
+type ThemeKey = "light" | "dark" | "system";
+
+export interface ThemeSwitcherConfig {
+  /** Replaces the built-in classes of a part. */
+  classes?: {
+    /** Each theme button: size, shape and press feedback. */
+    button?: string;
+  };
+}
+
+const defaultClasses = {
+  button:
+    "relative h-6 w-6 rounded-full transition-[scale] duration-150 ease-out active:scale-[0.94] hit-target",
+};
+
+export type ThemeSwitcherProps = {
+  value?: ThemeKey;
+  onChange?: (theme: ThemeKey) => void;
+  defaultValue?: ThemeKey;
+  className?: string;
+};
+
+export const ThemeSwitcher = ({
+  value,
+  onChange,
+  defaultValue = "system",
+  className,
+}: ThemeSwitcherProps) => {
+  const classes = { ...defaultClasses, ...useUiConfig("ThemeSwitcher")?.classes };
+  const merge = useCn();
+  const [theme, setTheme] = useControllableState({
+    defaultProp: defaultValue,
+    prop: value,
+    onChange,
+  });
+  const handleThemeClick = useCallback(
+    (themeKey: ThemeKey) => {
+      setTheme(themeKey);
+    },
+    [setTheme],
+  );
+
+  // No mount gate: the selected theme comes from props rather than anything
+  // browser-only, so a client render has no hydration mismatch to skip the
+  // first paint for.
+  return (
+    <div
+      className={merge(
+        "relative isolate flex h-8 rounded-full bg-background p-1 ring-1 ring-border",
+        className,
+      )}
+    >
+      {themes.map(({ key, icon: Icon, label }) => {
+        const isActive = theme === key;
+
+        return (
+          <button
+            aria-label={label}
+            className={classes.button}
+            key={key}
+            onClick={() => handleThemeClick(key)}
+            type="button"
+          >
+            {isActive && (
+              <motion.div
+                className="absolute inset-0 rounded-full bg-secondary"
+                layoutId="activeTheme"
+                transition={springTransition}
+              />
+            )}
+            <Icon
+              className={merge(
+                "relative z-10 m-auto h-4 w-4",
+                isActive ? "text-foreground" : "text-muted-foreground",
+              )}
+            />
+          </button>
+        );
+      })}
+    </div>
+  );
+};