@multiplatform.one/components 6.6.0 → 7.0.0

package/src/views/Kanban.native.tsx

@@ -1,5 +1,13 @@
 import { FlashList, type FlashListRef } from "@shopify/flash-list";
-import { animationConfig, radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  animationConfig,
+  hairlineWidth,
+  MIN_PRESS_TARGET,
+  radiusClassProps,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
+import { componentColors } from "../componentColors";
+import { EmptyState } from "../layouts/page";
 import React, {
   useCallback,
   useEffect,
@@ -9,7 +17,7 @@ import React, {
   useState,
   type ReactNode,
 } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import { AccessibilityInfo, Animated } from "react-native";
 import {
   Card,
@@ -94,6 +102,17 @@ export interface KanbanProps<T> extends Omit<YStackProps, "children"> {
   onCardReorder?: (item: T, columnId: string, fromIndex: number, toIndex: number) => void;
   /** Called when a card is selected via keyboard or click */
   onCardSelect?: (item: T, columnId: string) => void;
+  /**
+   * Per-column actions (quick-add, column menu…) anchored in the column
+   * header after the count. Icon-only actions must carry their own
+   * accessible names — the board renders the slot as-is.
+   */
+  renderColumnActions?: (column: KanbanColumn<T>) => ReactNode;
+  /**
+   * Rendered after the last column inside the horizontal scroller — the
+   * anchored home for board-level affordances like "Add column".
+   */
+  boardEnd?: ReactNode;
   /** Called when user scrolls near the bottom (infinite scroll) */
   onLoadMore?: () => void;
   /** Stable key extractor for virtualized cards (defaults to the item index) */
@@ -181,6 +200,8 @@ export function Kanban<T>({
   onCardMove,
   onCardReorder,
   onCardSelect,
+  renderColumnActions,
+  boardEnd,
   onLoadMore,
   hasMore = false,
   isLoading = false,
@@ -695,12 +716,14 @@ export function Kanban<T>({
                 hasMore={hasMore}
                 isLoading={isLoading}
                 onCardSelect={onCardSelect}
+                renderColumnActions={renderColumnActions}
                 getCardDragProps={canDrag ? getCardDragProps : undefined}
                 handle={getHandle(column.id)}
                 drag={drag}
                 scrollEnabled={!dragActive}
               />
             ))}
+            {boardEnd}
           </XStack>
         </ScrollView>
 
@@ -735,10 +758,11 @@ export function Kanban<T>({
             <View padding="$1">
               <Card
                 size={knobProps.sizeToken}
+                padding={0}
                 {...knobProps.borderRadius}
-                borderWidth={1}
+                borderWidth={knobProps.inputSurface.borderWidth}
                 borderColor="$borderColor"
-                backgroundColor="$background"
+                backgroundColor="$color1"
                 overflow="hidden"
                 {...LIFT_SHADOW}
               >
@@ -767,6 +791,7 @@ interface KanbanColumnViewProps<T> {
   hasMore?: boolean;
   isLoading?: boolean;
   onCardSelect?: (item: T, columnId: string) => void;
+  renderColumnActions?: (column: KanbanColumn<T>) => ReactNode;
   getCardDragProps?: (item: T, columnId: string, index: number) => Record<string, unknown>;
   handle: NativeColumnHandle;
   drag: NativeDragSession<T> | null;
@@ -788,6 +813,7 @@ function KanbanColumnView<T>({
   hasMore,
   isLoading,
   onCardSelect,
+  renderColumnActions,
   getCardDragProps,
   handle,
   drag,
@@ -822,17 +848,26 @@ function KanbanColumnView<T>({
       : null;
 
   return (
-    <Card
-      size={knobProps.sizeToken}
-      {...{ backgroundColor: isDropTarget ? "$color3" : "$color2" }}
-      transition={knobProps.transition}
+    <YStack
       width={columnWidth}
       minHeight={minColumnHeight}
-      borderWidth={1}
-      borderColor={isDropTarget ? "$color7" : "$borderColor"}
+      flexShrink={0}
       overflow="hidden"
+      transition={knobProps.transition}
+      {...knobProps.borderRadius}
+      backgroundColor={
+        isDropTarget
+          ? componentColors.interactive.background
+          : componentColors.surface.background
+      }
+      borderWidth={knobProps.inputSurface.borderWidth}
+      borderColor={
+        isDropTarget ? componentColors.interactive.border : componentColors.surface.border
+      }
     >
-      {/* Column Header */}
+      {column.color ? (
+        <View height={3} width="100%" backgroundColor={column.color as any} />
+      ) : null}
       <ListItem
         title={column.title}
         icon={
@@ -847,21 +882,24 @@ function KanbanColumnView<T>({
           ) : undefined
         }
         iconAfter={
-          itemCount !== undefined ? (
-            <Text
-              color="$color10"
-              fontSize={knobProps.sizeToken}
-              {...{ backgroundColor: "$color2" }}
-              paddingHorizontal="$2"
-              borderRadius={knobProps.borderRadius.borderRadius}
-              data-async-count
-            >
-              {itemCount}
-            </Text>
+          itemCount !== undefined || renderColumnActions ? (
+            <XStack alignItems="center" gap="$1">
+              {itemCount !== undefined && (
+                <Text
+                  color={componentColors.text.muted}
+                  {...knobProps.label}
+                  {...knobProps.textWeight}
+                  data-async-count
+                >
+                  {itemCount}
+                </Text>
+              )}
+              {renderColumnActions?.(column)}
+            </XStack>
           ) : undefined
         }
         size={knobProps.sizeToken}
-        borderBottomWidth={1}
+        borderBottomWidth={hairlineWidth}
         borderBottomColor="$borderColor"
       />
 
@@ -874,19 +912,7 @@ function KanbanColumnView<T>({
         }}
       >
         {column.items.length === 0 ? (
-          !isDropTarget && (
-            <YStack
-              {...knobProps.panelPadding}
-              alignItems="center"
-              justifyContent="center"
-              opacity={0.5}
-              flex={1}
-            >
-              <Text color="$color10" fontSize="$2">
-                {emptyColumnMessage}
-              </Text>
-            </YStack>
-          )
+          !isDropTarget && <EmptyState compact title={emptyColumnMessage} opacity={0.5} flex={1} />
         ) : (
           <FlashList
             ref={(list: any) => {
@@ -944,10 +970,15 @@ function KanbanColumnView<T>({
                   <Card
                     id={`${kanbanId}-col-${columnIndex}-card-${index}`}
                     size={knobProps.sizeToken}
+                    padding={0}
+                    {...knobProps.borderRadius}
                     elevation={knobProps.elevation}
-                    borderWidth={1}
-                    borderColor={ghost ? "$color7" : "$borderColor"}
+                    minHeight={MIN_PRESS_TARGET}
+                    borderWidth={knobProps.inputSurface.borderWidth}
+                    borderColor={ghost ? componentColors.interactive.border : "$borderColor"}
                     borderStyle={ghost ? ("dashed" as any) : undefined}
+                    backgroundColor="$color1"
+                    hoverStyle={{ backgroundColor: componentColors.interactive.background }}
                     pressStyle={{ scale: 0.98 }}
                     overflow="hidden"
                     onPress={
@@ -988,14 +1019,14 @@ function KanbanColumnView<T>({
               flex={1}
               {...knobProps.borderRadius}
               borderStyle="dashed"
-              borderColor="$color7"
-              backgroundColor="$color3"
+              borderColor={componentColors.interactive.border}
+              backgroundColor={componentColors.interactive.background}
               opacity={0.8}
               alignItems="center"
               justifyContent="center"
             >
               {column.items.length === 0 && (
-                <Text color="$color11" fontSize="$2">
+                <Text color={componentColors.text.muted} {...knobProps.label}>
                   {t("Drop here")}
                 </Text>
               )}
@@ -1003,6 +1034,6 @@ function KanbanColumnView<T>({
           </View>
         )}
       </View>
-    </Card>
+    </YStack>
   );
 }

package/src/views/Kanban.stories.tsx

@@ -1,9 +1,10 @@
 import { action } from "@multiplatform.one/storybook";
 // Catalog Button (LC-56 story honesty): stories compose catalog controls, never raw tamagui ones.
 import { Button } from "@multiplatform.one/forms";
+import { PlusIcon } from "@phosphor-icons/react";
 import type { Meta } from "@storybook/react-native-web-vite";
 import { useCallback, useState } from "react";
-import { Text, XStack } from "tamagui";
+import { Text, XStack, YStack } from "tamagui";
 import { Kanban, type KanbanColumn } from "./Kanban";
 
 interface Task {
@@ -16,6 +17,7 @@ const columns: KanbanColumn<Task>[] = [
   {
     id: "todo",
     title: "To Do",
+    color: "$blue9",
     items: [
       { id: "1", title: "Research new API", priority: "high" },
       { id: "2", title: "Write docs", priority: "medium" },
@@ -24,15 +26,41 @@ const columns: KanbanColumn<Task>[] = [
   {
     id: "in-progress",
     title: "In Progress",
+    color: "$orange9",
     items: [{ id: "3", title: "Implement auth", priority: "high" }],
   },
   {
     id: "done",
     title: "Done",
+    color: "$green9",
     items: [{ id: "4", title: "Setup CI/CD", priority: "low" }],
   },
 ];
 
+function TaskCard({ item }: { item: Task }) {
+  return (
+    <YStack padding="$2" gap="$1">
+      <Text fontSize="$3">{item.title}</Text>
+      <Text fontSize="$2" color="$color11" textTransform="capitalize">
+        {item.priority}
+      </Text>
+    </YStack>
+  );
+}
+
+function columnAdd(column: KanbanColumn<Task>) {
+  return (
+    <Button
+      size="$2"
+      circular
+      chromeless
+      icon={<PlusIcon size={14} />}
+      aria-label={`Add card to ${column.title}`}
+      onPress={action("add-card")}
+    />
+  );
+}
+
 const meta: Meta = {
   title: "Components/Kanban",
   parameters: {
@@ -48,11 +76,10 @@ export const Default = {
     <Kanban<Task>
       columns={columns}
       getItemKey={(item) => item.id}
-      renderCard={(item) => (
-        <Text fontSize="$3" padding="$2">
-          {item.title}
-        </Text>
-      )}
+      getItemLabel={(item) => item.title}
+      renderCard={(item) => <TaskCard item={item} />}
+      renderColumnActions={columnAdd}
+      onCardSelect={action("onCardSelect")}
       height={400}
     />
   ),
@@ -71,6 +98,7 @@ export const Interactive = {
       {
         id: "todo",
         title: "To Do",
+        color: "$blue9",
         items: [
           { id: "1", title: "Research new API", priority: "high" },
           { id: "2", title: "Write docs", priority: "medium" },
@@ -81,6 +109,7 @@ export const Interactive = {
       {
         id: "in-progress",
         title: "In Progress",
+        color: "$orange9",
         items: [
           { id: "3", title: "Implement auth", priority: "high" },
           { id: "7", title: "Design review", priority: "medium" },
@@ -89,11 +118,13 @@ export const Interactive = {
       {
         id: "blocked",
         title: "Blocked",
+        color: "$red9",
         items: [],
       },
       {
         id: "done",
         title: "Done",
+        color: "$green9",
         items: [{ id: "4", title: "Setup CI/CD", priority: "low" }],
       },
     ]);
@@ -176,11 +207,8 @@ export const Interactive = {
           columns={board}
           getItemKey={(item) => item.id}
           getItemLabel={(item) => item.title}
-          renderCard={(item) => (
-            <Text fontSize="$3" padding="$2">
-              {item.title}
-            </Text>
-          )}
+          renderCard={(item) => <TaskCard item={item} />}
+          renderColumnActions={columnAdd}
           onCardMove={moveCard}
           onCardReorder={reorderCard}
           onCardSelect={action("onCardSelect")}
@@ -197,11 +225,7 @@ export const Loading = {
     <Kanban<Task>
       columns={columns.map((c) => ({ ...c, items: [] }))}
       getItemKey={(item) => item.id}
-      renderCard={(item) => (
-        <Text fontSize="$3" padding="$2">
-          {item.title}
-        </Text>
-      )}
+      renderCard={(item) => <TaskCard item={item} />}
       isLoading
       height={400}
     />
@@ -214,11 +238,7 @@ export const Empty = {
     <Kanban<Task>
       columns={[]}
       getItemKey={(item) => item.id}
-      renderCard={(item) => (
-        <Text fontSize="$3" padding="$2">
-          {item.title}
-        </Text>
-      )}
+      renderCard={(item) => <TaskCard item={item} />}
       height={400}
     />
   ),
@@ -230,11 +250,7 @@ export const Error = {
     <Kanban<Task>
       columns={columns.map((c) => ({ ...c, items: [] }))}
       getItemKey={(item) => item.id}
-      renderCard={(item) => (
-        <Text fontSize="$3" padding="$2">
-          {item.title}
-        </Text>
-      )}
+      renderCard={(item) => <TaskCard item={item} />}
       error="Board failed to load."
       onRetry={action("onRetry")}
       height={400}

package/src/views/Kanban.tsx

@@ -2,7 +2,15 @@ import { componentColors } from "../componentColors";
 import { AsyncBoundary, useAsyncCount } from "../layouts/AsyncBoundary";
 import { EmptyState } from "../layouts/page";
 import { Spinner } from "@multiplatform.one/forms";
-import { radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  hairlineWidth,
+  keyboardFocusRingProps,
+  MIN_PRESS_TARGET,
+  radiusClassProps,
+  useResolvedKnobs,
+  ensureKeyboardModalityTracking,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
 import { useHotkey } from "@tanstack/react-hotkeys";
 import type { RegisterableHotkey } from "@tanstack/react-hotkeys";
 import { useVirtualizer } from "@tanstack/react-virtual";
@@ -15,7 +23,7 @@ import React, {
   useState,
   type ReactNode,
 } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import {
   AnimatePresence,
   Card,
@@ -290,6 +298,12 @@ export function Kanban<T>({
   const boardScrollRef = useRef<any>(null);
   const [focusedCol, setFocusedCol] = useState(-1);
   const [focusedCard, setFocusedCard] = useState(-1);
+  if (typeof document !== "undefined") ensureKeyboardModalityTracking();
+  const handleContainerFocus = useCallback(() => {
+    if (!wasKeyboardFocus()) return;
+    setFocusedCol((prev) => (prev < 0 ? 0 : prev));
+    setFocusedCard((prev) => (prev < 0 ? 0 : prev));
+  }, []);
 
   const canDrag = Boolean(onCardMove || onCardReorder);
 
@@ -945,6 +959,7 @@ export function Kanban<T>({
         role="grid"
         aria-label={t("Kanban board")}
         outlineWidth={0}
+        onFocus={handleContainerFocus}
         position="relative"
       >
         <ScrollView ref={boardScrollRef} horizontal showsHorizontalScrollIndicator={false}>
@@ -974,6 +989,10 @@ export function Kanban<T>({
                 getItemKey={getItemKey}
                 hasMore={hasMore}
                 isLoading={isLoading}
+                onCardFocus={(col, card) => {
+                  setFocusedCol(col);
+                  setFocusedCard(card);
+                }}
               />
             ))}
             {boardEnd}
@@ -1098,7 +1117,13 @@ function KanbanDragOverlay({
         overflow="hidden"
         height="100%"
       >
-        <Card size={sizeToken} borderWidth={0} backgroundColor="transparent" height="100%">
+        <Card
+          size={sizeToken}
+          padding={0}
+          borderWidth={0}
+          backgroundColor="transparent"
+          height="100%"
+        >
           {children}
         </Card>
       </View>
@@ -1131,6 +1156,7 @@ interface KanbanColumnViewProps<T> {
   getItemKey?: (item: T, index: number) => string | number;
   hasMore?: boolean;
   isLoading?: boolean;
+  onCardFocus?: (columnIndex: number, cardIndex: number) => void;
 }
 
 function KanbanColumnView<T>({
@@ -1156,6 +1182,7 @@ function KanbanColumnView<T>({
   getItemKey,
   hasMore,
   isLoading,
+  onCardFocus,
 }: KanbanColumnViewProps<T>) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
@@ -1318,29 +1345,27 @@ function KanbanColumnView<T>({
         : undefined;
 
   return (
-    <Card
-      size={knobProps.sizeToken}
-      {...knobProps.borderRadius}
-      {...{
-        backgroundColor: isDropTarget
-          ? componentColors.interactive.background
-          : componentColors.surface.background,
-      }}
-      transition={knobProps.transition}
+    <YStack
       width={columnWidth}
       minHeight={minColumnHeight}
-      borderWidth={isActiveColumn ? 2 : 1}
+      flexShrink={0}
+      overflow="hidden"
+      transition={knobProps.transition}
+      {...knobProps.borderRadius}
+      backgroundColor={
+        isDropTarget || isActiveColumn
+          ? componentColors.interactive.background
+          : componentColors.surface.background
+      }
+      borderWidth={knobProps.inputSurface.borderWidth}
       borderColor={
-        isDropTarget
-          ? componentColors.interactive.border
-          : isActiveColumn
-            ? "$accentBackground"
-            : "$borderColor"
+        isDropTarget ? componentColors.interactive.border : componentColors.surface.border
       }
-      overflow="hidden"
       data-kanban-column={column.id}
     >
-      {/* Column Header */}
+      {column.color ? (
+        <View height={3} width="100%" backgroundColor={column.color as any} />
+      ) : null}
       <ListItem
         title={column.title}
         icon={
@@ -1360,10 +1385,8 @@ function KanbanColumnView<T>({
               {itemCount !== undefined && (
                 <Text
                   color={componentColors.text.muted}
-                  fontSize={knobProps.sizeToken}
-                  {...{ backgroundColor: componentColors.surface.background }}
-                  paddingHorizontal="$2"
-                  borderRadius={knobProps.borderRadius.borderRadius}
+                  {...knobProps.label}
+                  {...knobProps.textWeight}
                   data-async-count
                 >
                   {itemCount}
@@ -1374,7 +1397,7 @@ function KanbanColumnView<T>({
           ) : undefined
         }
         size={knobProps.sizeToken}
-        borderBottomWidth={1}
+        borderBottomWidth={hairlineWidth}
         borderBottomColor="$borderColor"
       />
 
@@ -1461,30 +1484,33 @@ function KanbanColumnView<T>({
                   <Card
                     id={`${kanbanId}-col-${columnIndex}-card-${virtualItem.index}`}
                     size={knobProps.sizeToken}
+                    padding={0}
                     {...knobProps.borderRadius}
                     elevation={knobProps.elevation}
+                    minHeight={MIN_PRESS_TARGET}
                     transition={knobProps.transition}
                     {...(isNew && {
                       enterStyle: { opacity: 0, scale: 0.97 },
                     })}
-                    borderWidth={1}
+                    borderWidth={knobProps.inputSurface.borderWidth}
                     borderColor={ghost ? componentColors.interactive.border : "$borderColor"}
                     borderStyle={ghost ? ("dashed" as any) : undefined}
-                    backgroundColor={isFocused ? "$accentBackground" : undefined}
-                    hoverStyle={{ borderColor: "$accentBackground" }}
+                    backgroundColor={isFocused ? "$accentBackground" : "$color1"}
+                    {...(isFocused && wasKeyboardFocus()
+                      ? keyboardFocusRingProps
+                      : { outlineWidth: 0 })}
+                    hoverStyle={{ backgroundColor: componentColors.interactive.background }}
                     pressStyle={{ scale: 0.98 }}
                     overflow="hidden"
                     data-kanban-card={String(itemKey)}
+                    {...(isFocused && { "data-kanban-focused": "true" })}
                     {...(onCardPointerDown && { "data-kanban-draggable": "true" })}
-                    onPress={
-                      onCardSelect
-                        ? () => {
-                            if (suppressClickRef.current) return;
-                            onCardSelect(item, column.id);
-                          }
-                        : undefined
-                    }
-                    cursor={onCardPointerDown ? "grab" : onCardSelect ? "pointer" : undefined}
+                    onPress={() => {
+                      onCardFocus?.(columnIndex, virtualItem.index);
+                      if (suppressClickRef.current) return;
+                      onCardSelect?.(item, column.id);
+                    }}
+                    cursor={onCardPointerDown ? "grab" : "pointer"}
                     {...(onCardPointerDown && {
                       onPointerDown: (e: any) =>
                         onCardPointerDown(item, column.id, virtualItem.index, e),
@@ -1513,9 +1539,11 @@ function KanbanColumnView<T>({
                 >
                   <Card
                     size={knobProps.sizeToken}
+                    padding={0}
                     {...knobProps.borderRadius}
-                    borderWidth={1}
+                    borderWidth={knobProps.inputSurface.borderWidth}
                     borderColor="$borderColor"
+                    backgroundColor="$color1"
                     overflow="hidden"
                   >
                     {renderCard(l.item)}
@@ -1555,7 +1583,7 @@ function KanbanColumnView<T>({
                 justifyContent="center"
               >
                 {isEmpty && (
-                  <Text color={componentColors.text.muted} fontSize="$2">
+                  <Text color={componentColors.text.muted} {...knobProps.label}>
                     {t("Drop here")}
                   </Text>
                 )}
@@ -1570,6 +1598,6 @@ function KanbanColumnView<T>({
           <Spinner size="small" />
         </YStack>
       )}
-    </Card>
+    </YStack>
   );
 }