@lindaui/blocks 0.4.2 → 0.5.0

package/src/kanban/drop-utils.ts

@@ -0,0 +1,31 @@
+import type { UniqueIdentifier } from "@dnd-kit/core";
+
+export interface KanbanDropInput<Entity, ColumnId extends UniqueIdentifier> {
+  activeId: UniqueIdentifier;
+  overId: UniqueIdentifier | null;
+  entities: readonly Entity[];
+  columns: readonly { id: ColumnId }[];
+  getEntityId: (entity: Entity) => UniqueIdentifier;
+  getColumnId: (entity: Entity) => ColumnId;
+}
+
+/** Resolve column and card targets without mutating the controlled collection. */
+export function resolveKanbanDrop<Entity, ColumnId extends UniqueIdentifier>({
+  activeId,
+  overId,
+  entities,
+  columns,
+  getEntityId,
+  getColumnId,
+}: KanbanDropInput<Entity, ColumnId>) {
+  if (overId === null) return null;
+  const entity = entities.find((item) => getEntityId(item) === activeId);
+  if (entity === undefined) return null;
+
+  const targetEntity = entities.find((item) => getEntityId(item) === overId);
+  const targetColumn = columns.find((column) => column.id === overId);
+  const columnId = targetEntity !== undefined ? getColumnId(targetEntity) : targetColumn?.id;
+  if (columnId === undefined || columnId === getColumnId(entity)) return null;
+  if (!columns.some((column) => column.id === columnId)) return null;
+  return { entity, entityId: activeId, columnId };
+}

package/src/kanban/navigation-buttons.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { Button } from "@lindaui/ui/compound";
+import { cn } from "@lindaui/ui/cn";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useEffect, useState, type RefObject } from "react";
+
+export interface NavigationButtonsProps {
+  scrollRef: RefObject<HTMLElement | null>;
+  columnWidth?: number;
+  leftLabel?: string;
+  rightLabel?: string;
+}
+
+export function NavigationButtons({
+  scrollRef,
+  columnWidth = 320,
+  leftLabel = "Scroll left",
+  rightLabel = "Scroll right",
+}: NavigationButtonsProps) {
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  useEffect(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    const checkScroll = () => {
+      const { scrollLeft, scrollWidth, clientWidth } = element;
+      setCanScrollLeft(scrollLeft > 0);
+      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 1);
+    };
+    checkScroll();
+    element.addEventListener("scroll", checkScroll);
+    window.addEventListener("resize", checkScroll);
+    return () => {
+      element.removeEventListener("scroll", checkScroll);
+      window.removeEventListener("resize", checkScroll);
+    };
+  }, [scrollRef]);
+
+  const scroll = (direction: "left" | "right") => {
+    const element = scrollRef.current;
+    if (!element) return;
+    element.scrollTo({
+      behavior: "smooth",
+      left: element.scrollLeft + (direction === "left" ? -columnWidth : columnWidth),
+    });
+  };
+
+  return (
+    <>
+      <Button
+        aria-label={leftLabel}
+        className={cn(
+          "absolute top-1/2 left-4 z-20 -translate-y-1/2 rounded-full shadow-xl transition-opacity",
+          canScrollLeft ? "opacity-100" : "pointer-events-none opacity-0",
+        )}
+        isIconOnly
+        onPress={() => scroll("left")}
+        size="md"
+        variant="primary"
+      >
+        <ChevronLeft className="h-6 w-6" />
+      </Button>
+      <Button
+        aria-label={rightLabel}
+        className={cn(
+          "absolute top-1/2 right-4 z-20 -translate-y-1/2 rounded-full shadow-xl transition-opacity",
+          canScrollRight ? "opacity-100" : "pointer-events-none opacity-0",
+        )}
+        isIconOnly
+        onPress={() => scroll("right")}
+        size="md"
+        variant="primary"
+      >
+        <ChevronRight className="h-6 w-6" />
+      </Button>
+    </>
+  );
+}

package/src/kanban/scroll-indicators.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useState, type RefObject } from "react";
+import { cn } from "@lindaui/ui/cn";
+
+export interface ScrollIndicatorsProps {
+  scrollRef: RefObject<HTMLElement | null>;
+}
+
+export function ScrollIndicators({ scrollRef }: ScrollIndicatorsProps) {
+  const [showLeft, setShowLeft] = useState(false);
+  const [showRight, setShowRight] = useState(false);
+
+  useEffect(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    const checkScroll = () => {
+      const { scrollLeft, scrollWidth, clientWidth } = element;
+      setShowLeft(scrollLeft > 10);
+      setShowRight(scrollLeft < scrollWidth - clientWidth - 10);
+    };
+    checkScroll();
+    element.addEventListener("scroll", checkScroll);
+    window.addEventListener("resize", checkScroll);
+    return () => {
+      element.removeEventListener("scroll", checkScroll);
+      window.removeEventListener("resize", checkScroll);
+    };
+  }, [scrollRef]);
+
+  return (
+    <>
+      <div
+        className={cn(
+          "pointer-events-none absolute top-0 left-0 z-10 h-full w-12 bg-gradient-to-r from-background to-transparent transition-opacity duration-300",
+          showLeft ? "opacity-100" : "opacity-0",
+        )}
+      />
+      <div
+        className={cn(
+          "pointer-events-none absolute top-0 right-0 z-10 h-full w-12 bg-gradient-to-l from-background to-transparent transition-opacity duration-300",
+          showRight ? "opacity-100" : "opacity-0",
+        )}
+      />
+    </>
+  );
+}

package/src/kanban/use-keyboard-navigation.ts

@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect, type RefObject } from "react";
+
+/** Preserve horizontal board navigation, without intercepting text editing. */
+export function useKeyboardNavigation<T extends HTMLElement>(
+  scrollRef: RefObject<T | null>,
+  columnWidth = 320,
+) {
+  useEffect(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
+        return;
+      }
+
+      switch (event.key) {
+        case "ArrowLeft":
+          event.preventDefault();
+          element.scrollBy({ behavior: "smooth", left: -columnWidth });
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          element.scrollBy({ behavior: "smooth", left: columnWidth });
+          break;
+        case "Home":
+          event.preventDefault();
+          element.scrollTo({ behavior: "smooth", left: 0 });
+          break;
+        case "End":
+          event.preventDefault();
+          element.scrollTo({ behavior: "smooth", left: element.scrollWidth });
+          break;
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [scrollRef, columnWidth]);
+}

package/src/kanban-board.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import {
+  closestCorners,
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+  type UniqueIdentifier,
+} from "@dnd-kit/core";
+import { Skeleton } from "@lindaui/ui/compound";
+import { Fragment, useRef, useState, type ReactNode } from "react";
+import { KanbanColumn } from "./kanban-column";
+import { resolveKanbanDrop } from "./kanban/drop-utils";
+import { NavigationButtons } from "./kanban/navigation-buttons";
+import { ScrollIndicators } from "./kanban/scroll-indicators";
+import { useKeyboardNavigation } from "./kanban/use-keyboard-navigation";
+
+export { resolveKanbanDrop } from "./kanban/drop-utils";
+export { NavigationButtons, type NavigationButtonsProps } from "./kanban/navigation-buttons";
+export { ScrollIndicators, type ScrollIndicatorsProps } from "./kanban/scroll-indicators";
+export { useKeyboardNavigation } from "./kanban/use-keyboard-navigation";
+
+export interface KanbanColumnDefinition<ColumnId extends UniqueIdentifier = string> {
+  id: ColumnId;
+  title: ReactNode;
+  colorClassName?: string;
+}
+
+export interface KanbanCardState {
+  isDragging: boolean;
+}
+
+export interface KanbanBoardProps<Entity, ColumnId extends UniqueIdentifier = string> {
+  /** Entity and column IDs must be stable and unique across the whole board. */
+  entities: readonly Entity[];
+  columns: readonly KanbanColumnDefinition<ColumnId>[];
+  getEntityId: (entity: Entity) => UniqueIdentifier;
+  getColumnId: (entity: Entity) => ColumnId;
+  onColumnChange: (entityId: UniqueIdentifier, columnId: ColumnId, entity: Entity) => void;
+  renderCard: (entity: Entity, state: KanbanCardState) => ReactNode;
+  renderColumn?: (column: KanbanColumnDefinition<ColumnId>, entities: readonly Entity[]) => ReactNode;
+  isLoading?: boolean;
+  emptyContent?: ReactNode;
+  ariaLabel?: string;
+  scrollLeftLabel?: string;
+  scrollRightLabel?: string;
+}
+
+export function KanbanBoard<Entity, ColumnId extends UniqueIdentifier = string>({
+  entities,
+  columns,
+  getEntityId,
+  getColumnId,
+  onColumnChange,
+  renderCard,
+  renderColumn,
+  isLoading = false,
+  emptyContent,
+  ariaLabel = "Kanban board",
+  scrollLeftLabel,
+  scrollRightLabel,
+}: KanbanBoardProps<Entity, ColumnId>) {
+  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
+  const scrollRef = useRef<HTMLElement>(null);
+  useKeyboardNavigation(scrollRef);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
+    useSensor(TouchSensor, { activationConstraint: { delay: 200, tolerance: 5 } }),
+  );
+
+  const handleDragStart = (event: DragStartEvent) => setActiveId(event.active.id);
+  const handleDragEnd = (event: DragEndEvent) => {
+    setActiveId(null);
+    const drop = resolveKanbanDrop({
+      activeId: event.active.id,
+      overId: event.over?.id ?? null,
+      entities,
+      columns,
+      getEntityId,
+      getColumnId,
+    });
+    if (drop) onColumnChange(drop.entityId, drop.columnId, drop.entity);
+  };
+  const activeEntity = activeId !== null
+    ? entities.find((entity) => getEntityId(entity) === activeId)
+    : null;
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full gap-4 overflow-x-auto p-4 lg:p-6">
+        {columns.map((column) => (
+          <div className="flex w-80 flex-shrink-0 flex-col gap-3" key={column.id}>
+            <Skeleton className="h-8 w-24 rounded-lg" />
+            <div className="min-h-[500px] space-y-3 rounded-xl bg-surface-secondary/50 p-2">
+              {Array.from({ length: 3 }).map((_, index) => (
+                <Skeleton className="h-32 w-full rounded-xl" key={index} />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <DndContext
+      collisionDetection={closestCorners}
+      onDragEnd={handleDragEnd}
+      onDragStart={handleDragStart}
+      sensors={sensors}
+    >
+      <div className="relative h-full w-full overflow-hidden">
+        <ScrollIndicators scrollRef={scrollRef} />
+        <NavigationButtons
+          scrollRef={scrollRef}
+          leftLabel={scrollLeftLabel}
+          rightLabel={scrollRightLabel}
+        />
+        <section
+          aria-label={ariaLabel}
+          className="flex h-full gap-4 overflow-x-auto overflow-y-visible p-4 lg:p-6"
+          ref={scrollRef}
+        >
+          {columns.map((column) => {
+            const items = entities.filter((entity) => getColumnId(entity) === column.id);
+            return (
+              <Fragment key={column.id}>
+                {renderColumn ? (
+                  renderColumn(column, items)
+                ) : (
+                  <KanbanColumn
+                    id={column.id}
+                    title={column.title}
+                    entities={items}
+                    getEntityId={getEntityId}
+                    renderCard={(entity) => renderCard(entity, { isDragging: false })}
+                    colorClassName={column.colorClassName}
+                    emptyContent={emptyContent}
+                  />
+                )}
+              </Fragment>
+            );
+          })}
+        </section>
+      </div>
+      <DragOverlay>
+        {activeEntity !== null && activeEntity !== undefined ? (
+          <div className="rotate-3 opacity-80">
+            {renderCard(activeEntity, { isDragging: true })}
+          </div>
+        ) : null}
+      </DragOverlay>
+    </DndContext>
+  );
+}

package/src/kanban-column.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useDroppable, type UniqueIdentifier } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { cn } from "@lindaui/ui/cn";
+import { Fragment, type ReactNode } from "react";
+
+export interface KanbanColumnProps<Entity> {
+  id: UniqueIdentifier;
+  title: ReactNode;
+  entities: readonly Entity[];
+  getEntityId: (entity: Entity) => UniqueIdentifier;
+  renderCard: (entity: Entity) => ReactNode;
+  colorClassName?: string;
+  emptyContent?: ReactNode;
+}
+
+export function KanbanColumn<Entity>({
+  id,
+  title,
+  entities,
+  getEntityId,
+  renderCard,
+  colorClassName = "bg-accent/60",
+  emptyContent = "No items",
+}: KanbanColumnProps<Entity>) {
+  const { setNodeRef, isOver } = useDroppable({ id });
+
+  return (
+    <div className="flex h-full w-80 flex-shrink-0 flex-col">
+      <div className="flex h-full flex-col overflow-hidden rounded-2xl bg-surface/50">
+        <div className={cn("h-2.5", colorClassName)} />
+        <div className="flex items-center justify-between px-4 py-3">
+          <h3 className="font-semibold text-foreground">{title}</h3>
+          <span className="rounded-full bg-surface-secondary px-2 py-1 font-mono text-muted text-xs">
+            {entities.length}
+          </span>
+        </div>
+        <div
+          className={cn(
+            "min-h-[500px] flex-1 overflow-y-auto p-2 transition-colors",
+            isOver ? "bg-accent/10" : "",
+          )}
+          ref={setNodeRef}
+        >
+          <SortableContext items={entities.map(getEntityId)} strategy={verticalListSortingStrategy}>
+            <div className="space-y-3">
+              {entities.map((entity) => (
+                <Fragment key={getEntityId(entity)}>{renderCard(entity)}</Fragment>
+              ))}
+            </div>
+          </SortableContext>
+          {entities.length === 0 && (
+            <div className="flex h-32 items-center justify-center text-muted text-sm">
+              {emptyContent}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/legacy-kpi-card.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Card, Skeleton } from "@lindaui/ui/compound";
+import { cn } from "@lindaui/ui/cn";
+import type { LucideIcon } from "lucide-react";
+
+export type KPICardColor = "default" | "success" | "primary" | "warning";
+export interface KPICardProps {
+  color?: KPICardColor;
+  icon: LucideIcon;
+  isLoading?: boolean;
+  title: string;
+  trend?: { value: number; isPositive: boolean };
+  value: string | number;
+}
+const COLOR_CONFIG: Record<KPICardColor, { icon: string; value: string }> = {
+  default: { icon: "bg-surface-secondary text-muted", value: "text-foreground" },
+  primary: { icon: "bg-accent/10 text-accent", value: "text-accent" },
+  success: { icon: "bg-success/10 text-success", value: "text-success" },
+  warning: { icon: "bg-warning/10 text-warning", value: "text-warning" },
+};
+/** Exact legacy KPI anatomy; StatCard and its featured variant remain unchanged. */
+export function KPICard({ title, value, icon: Icon, trend, color = "default", isLoading = false }: KPICardProps) {
+  const colorConfig = COLOR_CONFIG[color];
+  if (isLoading) return <Card className="border-none bg-surface"><Card.Content className="p-4">
+    <div className="flex items-start justify-between"><Skeleton className="h-10 w-10 rounded-xl" /><Skeleton className="h-4 w-16 rounded" /></div>
+    <Skeleton className="mt-4 h-8 w-24 rounded" /><Skeleton className="mt-2 h-4 w-20 rounded" />
+  </Card.Content></Card>;
+  return <Card className="border-none bg-surface transition-colors hover:bg-surface-secondary"><Card.Content className="p-4">
+    <div className="flex items-start justify-between">
+      <div className={cn("rounded-xl p-2.5", colorConfig.icon)}><Icon size={20} /></div>
+      {!!trend && <span className={cn("rounded-full px-2 py-1 font-medium text-xs", trend.isPositive ? "bg-success/10 text-success" : "bg-danger/10 text-danger")}>
+        {trend.isPositive ? "+" : "-"}{Math.abs(trend.value)}%
+      </span>}
+    </div>
+    <div className="mt-4"><p className={cn("font-bold text-2xl", colorConfig.value)}>{value}</p><p className="mt-1 text-muted text-sm">{title}</p></div>
+  </Card.Content></Card>;
+}

package/src/line-chart.tsx

@@ -0,0 +1,58 @@
+"use client";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  type ChartConfig,
+} from "@lindaui/ui/chart";
+import {
+  LineChart as RLineChart,
+  Line,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+export interface LineChartProps {
+  data: Array<Record<string, string | number>>;
+  config: ChartConfig;
+  categoryKey: string;
+  series: string[];
+  variant?: "default" | "dots";
+  className?: string;
+}
+
+export function LineChart({
+  data,
+  config,
+  categoryKey,
+  series,
+  variant = "default",
+  className,
+}: LineChartProps) {
+  const showDots = variant === "dots";
+
+  return (
+    <ChartContainer config={config} className={className}>
+      <RLineChart data={data}>
+        <CartesianGrid vertical={false} />
+        <XAxis dataKey={categoryKey} tickLine={false} axisLine={false} />
+        <YAxis tickLine={false} axisLine={false} />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        {series.length > 1 && <ChartLegend content={<ChartLegendContent />} />}
+        {series.map((key) => (
+          <Line
+            key={key}
+            dataKey={key}
+            stroke={`var(--color-${key})`}
+            strokeWidth={2}
+            dot={showDots}
+            type="monotone"
+          />
+        ))}
+      </RLineChart>
+    </ChartContainer>
+  );
+}

package/src/list-item.tsx

@@ -0,0 +1,63 @@
+"use client";
+import type { ReactNode } from "react";
+import { ChevronRight } from "lucide-react";
+import { Badge } from "@lindaui/ui/badge";
+
+export interface ListItemProps {
+  title: string;
+  subtitle?: ReactNode;
+  meta?: ReactNode;
+  leading?: ReactNode;
+  badge?: { label: string; variant?: "default" | "success" | "warning" | "danger" | "info" };
+  selected?: boolean;
+  onSelect?: () => void;
+  showChevron?: boolean;
+}
+
+export function ListItem({
+  title,
+  subtitle,
+  meta,
+  leading,
+  badge,
+  selected = false,
+  onSelect,
+  showChevron = false,
+}: ListItemProps) {
+  return (
+    <button
+      type="button"
+      aria-pressed={selected}
+      onClick={onSelect}
+      className={[
+        "flex w-full items-center gap-3 border-b border-border px-3 py-3.5 text-left transition-colors sm:px-4",
+        "min-h-[72px] cursor-pointer font-[inherit] text-[inherit] active:bg-accent",
+        selected
+          ? "bg-primary/5 lg:border-l-2 lg:border-l-primary"
+          : "bg-card hover:bg-accent/50",
+      ].join(" ")}
+    >
+      {leading != null && (
+        <div className="flex-none">{leading}</div>
+      )}
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-semibold">{title}</div>
+        {subtitle != null && (
+          <div className="mt-0.5 truncate text-xs text-muted-foreground">{subtitle}</div>
+        )}
+        {meta != null && (
+          <div className="mt-0.5 text-xs text-muted-foreground tabular-nums">{meta}</div>
+        )}
+      </div>
+      {badge != null && (
+        <Badge variant={badge.variant ?? "default"}>{badge.label}</Badge>
+      )}
+      {showChevron && (
+        <ChevronRight
+          aria-hidden
+          className="-mr-1 size-4 flex-none text-muted-foreground/50 lg:hidden"
+        />
+      )}
+    </button>
+  );
+}