@app-studio/web 0.9.36 → 0.9.38

package/docs/components/Accordion.mdx

@@ -11,7 +11,7 @@ A component that displays collapsible content panels for presenting information
 ```tsx
 import React from 'react';
 import { Accordion } from '../Accordion';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const DefaultAccordion = () => {
   return (
@@ -48,7 +48,7 @@ Allow multiple items to be expanded at once.
 ```tsx
 import React from 'react';
 import { Accordion } from '../Accordion';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const MultipleAccordion = () => {
   return (
@@ -85,7 +85,7 @@ Different visual styles for the accordion.
 ```tsx
 import React from 'react';
 import { Accordion } from '../Accordion';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const AccordionVariants = () => {
   return (
@@ -126,7 +126,7 @@ Disable specific accordion items.
 ```tsx
 import React from 'react';
 import { Accordion } from '../Accordion';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const DisabledAccordion = () => {
   return (

package/docs/components/Alert.mdx

@@ -96,7 +96,7 @@ The Alert component supports both light and dark themes through the `themeMode`
 import React from 'react';
 import { Alert } from '../Alert';
 import { Vertical } from 'app-studio';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const DarkModeDemo = () => {
   return (

package/docs/components/Background.mdx

@@ -13,7 +13,7 @@ Creates a beautiful animated aurora gradient background effect.
 ```tsx
 import React from 'react';
 import { Background } from '../Background';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const AuroraDemo = () => (
   <Background.Aurora height="300px" showRadialGradient={true}>
@@ -30,7 +30,7 @@ Animated falling meteors effect with customizable count.
 ```tsx
 import React from 'react';
 import { Background } from '../Background';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const MeteorsDemo = () => (
   <Background.Meteors number={20} height="300px">
@@ -106,7 +106,7 @@ Display images as backgrounds with overlay support and blend modes.
 ```tsx
 import React from 'react';
 import { Background } from '../Background';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const BackgroundImageDemo = () => (
   <Background.Image
@@ -129,7 +129,7 @@ Create beautiful gradient backgrounds with animation support.
 ```tsx
 import React from 'react';
 import { Background } from '../Background';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 // Simple two-color gradient
 export const SimpleGradientDemo = () => (
@@ -228,7 +228,7 @@ Multiple background effects can be combined for rich visual experiences.
 ```tsx
 import React from 'react';
 import { Background } from '../Background';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { Vertical, Horizontal } from 'app-studio';
 
 // Aurora with content

package/docs/components/Badge.mdx

@@ -182,7 +182,7 @@ The Badge component supports both light and dark themes through the `themeMode`
 import React from 'react';
 import { Badge } from '../Badge';
 import { Vertical, Horizontal } from 'app-studio';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { Variant } from '../Badge/Badge.type';
 
 export const DarkModeDemo = () => {

package/docs/components/Calendar.mdx

@@ -114,6 +114,9 @@ Customize the appearance of calendar elements using the `views` prop.
 | `onEventDrop` | `(event: CalendarEvent) => void` | Callback when an event is moved to a new date. | - |
 | `onEventResize` | `(event: CalendarEvent) => void` | Callback when an event is resized. | - |
 | `onEventAdd` | `(start: string, end: string) => void` | Callback when a date is double-clicked to add an event. | - |
+| `onEventTitleChange` | `(event: CalendarEvent, newTitle: string) => void` | Callback when an event's title is changed. | - |
+| `onEventDescriptionChange` | `(event: CalendarEvent, newDescription: string) => void` | Callback when an event's description is changed. | - |
+| `onEventDelete` | `(event: CalendarEvent) => void` | Callback when an event is deleted. | - |
 | `onDateClick` | `(date: string) => void` | Callback when a date is clicked. | - |
 | `onDateChange` | `(date: Date) => void` | Callback when the visible date range changes. | - |
 | `onViewChange` | `(view: CalendarView) => void` | Callback when the active view changes. | - |

package/docs/components/Card.mdx

@@ -11,7 +11,7 @@ A flexible container component for organizing and displaying content.
 ```tsx
 import React from 'react';
 import { Card } from '../Card';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const DefaultDemo = () => {
   return (
@@ -28,7 +28,7 @@ Different visual styles for the card.
 ```tsx
 import React from 'react';
 import { Card } from '../Card';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { Vertical } from 'app-studio';
 
 export const VariantsDemo = () => {
@@ -65,7 +65,7 @@ Using Card.Header, Card.Content, and Card.Footer for structured layout.
 ```tsx
 import React from 'react';
 import { Card } from '../Card';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { Horizontal } from 'app-studio';
 import { Button } from '../../Button/Button';
 
@@ -100,7 +100,7 @@ Different corner styles for the card.
 ```tsx
 import React from 'react';
 import { Card } from '../Card';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { Vertical } from 'app-studio';
 import { Shape } from '../Card/Card.type';
 
@@ -128,7 +128,7 @@ Different padding sizes for the card.
 ```tsx
 import React from 'react';
 import { Card } from '../Card';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { Vertical } from 'app-studio';
 import { Size } from '../Card/Card.type';
 
@@ -156,7 +156,7 @@ Customize the appearance of the card.
 ```tsx
 import React from 'react';
 import { Card } from '../Card';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { Horizontal } from 'app-studio';
 import { Button } from '../../Button/Button';
 
@@ -215,7 +215,7 @@ The Card component uses a context-based styling system that allows styles to be
 ```tsx
 import React from 'react';
 import { Card } from '../Card';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { Button } from '../../Button/Button';
 import { Horizontal } from 'app-studio';
 
@@ -275,7 +275,7 @@ The Card component supports both light and dark themes through the `themeMode` p
 ```tsx
 import React from 'react';
 import { Card } from '../Card';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { Horizontal, Vertical } from 'app-studio';
 import { Button } from '../../Button/Button';
 

package/docs/components/Carousel.mdx

@@ -15,7 +15,7 @@ A component for displaying a series of content items that can be navigated throu
 import React from 'react';
 import { Carousel } from '../Carousel';
 import { View } from 'app-studio';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const DefaultDemo = () => {
   // Create an array of slides with different background colors
@@ -56,7 +56,7 @@ Use the compound component pattern for more flexibility and control over the car
 import React from 'react';
 import { Carousel } from '../Carousel';
 import { View } from 'app-studio';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const CompoundDemo = () => {
   const slides = [
@@ -182,7 +182,7 @@ Automatically advance through slides with customizable interval.
 import React from 'react';
 import { Carousel } from '../Carousel';
 import { View } from 'app-studio';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const AutoPlayDemo = () => {
   const slides = [
@@ -226,7 +226,7 @@ Different styles of indicators to show the current slide position.
 import React from 'react';
 import { Carousel } from '../Carousel';
 import { View } from 'app-studio';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const IndicatorsDemo = () => {
   const slides = [
@@ -269,7 +269,7 @@ Customize the navigation controls.
 import React from 'react';
 import { Carousel } from '../Carousel';
 import { View } from 'app-studio';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { Button } from '../../Button/Button';
 
 export const NavigationDemo = () => {
@@ -322,7 +322,7 @@ Customize the appearance of the carousel.
 import React from 'react';
 import { Carousel } from '../Carousel';
 import { View } from 'app-studio';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { Card } from '../../Card/Card';
 
 export const CustomDemo = () => {

package/docs/components/ColorInput.mdx

@@ -122,7 +122,7 @@ import React, { useState } from 'react';
 import { Vertical, Horizontal } from 'app-studio';
 import { ColorInput } from '../ColorInput';
 import { Button } from '../../Button/Button';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const ColorInputForm = () => {
   const [backgroundColor, setBackgroundColor] = useState('color.blue.500');

package/docs/components/Drawer.mdx

@@ -0,0 +1,164 @@
+# Drawer
+
+A drawer is a panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.
+
+### **Import**
+```tsx
+import { Drawer } from '@app-studio/web';
+```
+
+### **Default**
+```tsx
+import React, { useState } from 'react';
+import { Drawer } from '../Drawer';
+import { Button } from '../Button';
+import { Vertical } from 'app-studio';
+
+export const DefaultDrawer = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
+      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        <Drawer.Header>Drawer Title</Drawer.Header>
+        <Drawer.Body>
+          <p>This is the content of the drawer.</p>
+        </Drawer.Body>
+        <Drawer.Footer>
+          <Button onClick={() => setIsOpen(false)}>Close</Button>
+        </Drawer.Footer>
+      </Drawer>
+    </>
+  );
+};
+```
+
+### **Placement**
+The `placement` prop determines which side of the screen the drawer will appear from. It can be `top`, `right`, `bottom`, or `left`.
+
+```tsx
+import React, { useState } from 'react';
+import { Drawer } from '../Drawer';
+import { Button } from '../Button';
+import { Horizontal } from 'app-studio';
+
+export const PlacementDrawer = () => {
+  const [placement, setPlacement] = useState('right');
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openDrawer = (p) => {
+    setPlacement(p);
+    setIsOpen(true);
+  };
+
+  return (
+    <Horizontal gap={10}>
+      <Button onClick={() => openDrawer('top')}>Top</Button>
+      <Button onClick={() => openDrawer('right')}>Right</Button>
+      <Button onClick={() => openDrawer('bottom')}>Bottom</Button>
+      <Button onClick={() => openDrawer('left')}>Left</Button>
+      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} placement={placement}>
+        <Drawer.Header>Drawer Title</Drawer.Header>
+        <Drawer.Body>
+          <p>This is the content of the drawer.</p>
+        </Drawer.Body>
+      </Drawer>
+    </Horizontal>
+  );
+};
+```
+
+### **Size**
+The `size` prop controls the width or height of the drawer, depending on the placement.
+
+```tsx
+import React, { useState } from 'react';
+import { Drawer } from '../Drawer';
+import { Button } from '../Button';
+import { Horizontal } from 'app-studio';
+
+export const SizeDrawer = () => {
+  const [size, setSize] = useState('md');
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openDrawer = (s) => {
+    setSize(s);
+    setIsOpen(true);
+  };
+
+  return (
+    <Horizontal gap={10}>
+      <Button onClick={() => openDrawer('xs')}>xs</Button>
+      <Button onClick={() => openDrawer('sm')}>sm</Button>
+      <Button onClick={() => openDrawer('md')}>md</Button>
+      <Button onClick={() => openDrawer('lg')}>lg</Button>
+      <Button onClick={() => openDrawer('xl')}>xl</Button>
+      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} size={size}>
+        <Drawer.Header>Drawer Title</Drawer.Header>
+        <Drawer.Body>
+          <p>This is the content of the drawer.</p>
+        </Drawer.Body>
+      </Drawer>
+    </Horizontal>
+  );
+};
+```
+
+### **Prevent Closing**
+The `isClosePrevented` prop prevents the drawer from closing when the overlay is clicked.
+
+```tsx
+import React, { useState } from 'react';
+import { Drawer } from '../Drawer';
+import { Button } from '../Button';
+
+export const PreventCloseDrawer = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
+      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} isClosePrevented>
+        <Drawer.Header>Drawer Title</Drawer.Header>
+        <Drawer.Body>
+          <p>This drawer cannot be closed by clicking the overlay.</p>
+        </Drawer.Body>
+        <Drawer.Footer>
+          <Button onClick={() => setIsOpen(false)}>Close</Button>
+        </Drawer.Footer>
+      </Drawer>
+    </>
+  );
+};
+```
+
+### **Props**
+
+#### **Drawer**
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `placement` | `top` \| `right` \| `bottom` \| `left` | `right` | The placement of the drawer. |
+| `size` | `xs` \| `sm` \| `md` \| `lg` \| `xl` | `md` | The size of the drawer. |
+| `isOpen` | `boolean` | - | If `true`, the drawer will be open. |
+| `onClose` | `() => void` | - | Callback fired when the drawer closes. |
+| `isClosePrevented` | `boolean` | `false` | If `true`, the drawer will not close when clicking the overlay. |
+| `children` | `React.ReactNode` | - | The children of the drawer. |
+
+#### **Drawer.Header**
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `onClose` | `() => void` | - | Callback fired when the close button is clicked. |
+| `buttonPosition` | `left` \| `right` | `right` | The position of the close button. |
+| `children` | `React.ReactNode` | - | The content of the drawer header. |
+
+#### **Drawer.Body**
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` | - | The content of the drawer body. |
+
+#### **Drawer.Footer**
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` | - | The content of the drawer footer. |
+

package/docs/components/Gradient.mdx

@@ -29,7 +29,7 @@ Specifies the type of gradient to render.
 import React from 'react';
 import { Gradient } from '../Gradient';
 import { Vertical } from 'app-studio';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const TypesDemo = () => (
   <Vertical gap={16}>
@@ -82,7 +82,7 @@ import React from 'react';
 import { Gradient } from '../Gradient';
 import { Vertical } from 'app-studio';
 import { Horizontal } from 'app-studio';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const DirectionsDemo = () => (
   <Vertical gap={16}>
@@ -130,7 +130,7 @@ Specifies an array of color stops for multi-color gradients.
 import React from 'react';
 import { Gradient } from '../Gradient';
 import { Vertical } from 'app-studio';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const MulticolorDemo = () => (
   <Vertical gap={16}>
@@ -178,7 +178,7 @@ Enables animation for the gradient.
 import React from 'react';
 import { Gradient } from '../Gradient';
 import { Vertical } from 'app-studio';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const AnimatedDemo = () => (
   <Vertical gap={16}>
@@ -207,7 +207,7 @@ Content to render inside the gradient.
 import React from 'react';
 import { Gradient } from '../Gradient';
 import { Vertical } from 'app-studio';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { Button } from '../../Button/Button';
 import { Center } from 'app-studio';
 
@@ -241,7 +241,7 @@ Custom styling that overrides default views.
 import React from 'react';
 import { Gradient } from '../Gradient';
 import { Center } from 'app-studio';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const StylesDemo = () => (
   <Gradient 

package/docs/components/HoverCard.mdx

@@ -12,7 +12,7 @@ A floating card that appears when hovering over a trigger element. Supports conf
 import React from 'react';
 import { HoverCard } from '../HoverCard';
 import { Button } from '../../Button/Button';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const DefaultHoverCard = () => {
   return (
@@ -37,7 +37,7 @@ You can control the position of the HoverCard content using the `side` and `alig
 import React from 'react';
 import { HoverCard } from '../HoverCard';
 import { Button } from '../../Button/Button';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const PositionedHoverCard = () => {
   return (
@@ -62,7 +62,7 @@ You can customize the appearance of the HoverCard using the `views` prop.
 import React from 'react';
 import { HoverCard } from '../HoverCard';
 import { Button } from '../../Button/Button';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const StyledHoverCard = () => {
   return (
@@ -96,7 +96,7 @@ You can control the timing of when the HoverCard opens and closes using the `ope
 import React from 'react';
 import { HoverCard } from '../HoverCard';
 import { Button } from '../../Button/Button';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const DelayedHoverCard = () => {
   return (
@@ -121,7 +121,7 @@ You can use the `asChild` prop on the Trigger to apply hover behavior directly t
 import React from 'react';
 import { HoverCard } from '../HoverCard';
 import { Link } from '../../Link/Link';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const LinkHoverCard = () => {
   return (

package/docs/components/KanbanBoard.mdx

@@ -2,12 +2,23 @@
 
 A flexible Kanban board component for managing tasks and workflows. Features drag-and-drop functionality for cards between columns, customizable card and column rendering, and comprehensive styling options.
 
+## When to use
+Use the Kanban Board component to:
+- Visualize a workflow or process.
+- Manage tasks or items as they move through different stages.
+- Allow users to reorder and re-categorize items using drag-and-drop.
+- Build project management tools, task trackers, or any workflow-based UI.
+
 ### **Import**
   ```tsx
   import { KanbanBoard } from '@app-studio/web';
   ```
 
 ### **Default**
+A basic Kanban board with three columns and some cards.
+
+![Default Kanban Board](https://placehold.co/800x450)
+
 ```tsx
 import React, { useState } from 'react';
 import { KanbanBoard } from '../KanbanBoard';
@@ -44,7 +55,9 @@ export const DefaultKanbanBoard = () => {
 ```
 
 ### **Custom Card Rendering**
-Customize how cards are displayed using the `renderCard` prop.
+Customize how cards are displayed using the `renderCard` prop. This is useful for adding priority indicators, avatars, or other custom elements to your cards.
+
+![Kanban Board with custom cards](https://placehold.co/800x500)
 
 ```tsx
 import React, { useState } from 'react';
@@ -109,12 +122,129 @@ export const CustomRenderKanbanBoard = () => {
 };
 ```
 
+### **Custom Column Header and Adding Cards**
+Use `renderColumnHeader` to create a custom header, for example to add an "Add Card" button. The `onCardCreate` prop can then be used to handle the creation of new cards.
+
+![Kanban Board with custom column header](https://placehold.co/800x450)
+
+```tsx
+import React, { useState } from 'react';
+import { KanbanBoard } from '../KanbanBoard';
+import { Button } from '../Button';
+import { KanbanBoardColumn, KanbanBoardCard } from '../KanbanBoard/KanbanBoard.props';
+import { View, Text, Horizontal } from 'app-studio';
+
+export const CustomHeaderKanbanBoard = () => {
+  const [columns, setColumns] = useState<KanbanBoardColumn[]>([
+    { id: 'todo', title: 'To Do', cards: [] },
+  ]);
+
+  const handleCardCreate = (card, column) => {
+    const newCard = {
+      id: `${Date.now()}`,
+      title: 'New Card',
+      description: 'A new card was added.',
+    };
+    const newColumns = columns.map(col => {
+      if (col.id === column.id) {
+        return { ...col, cards: [...col.cards, newCard] };
+      }
+      return col;
+    });
+    setColumns(newColumns);
+  };
+
+  const renderColumnHeader = (column: KanbanBoardColumn) => {
+    return (
+      <Horizontal justifyContent="space-between" alignItems="center">
+        <Text fontWeight="bold">{column.title}</Text>
+        <Button size="sm" onClick={() => handleCardCreate(null, column)}>+ Add</Button>
+      </Horizontal>
+    );
+  };
+
+  return <KanbanBoard columns={columns} onChange={setColumns} onCardCreate={handleCardCreate} renderColumnHeader={renderColumnHeader} />;
+};
+```
+
+### **Inline Editing**
+You can implement inline editing of card titles by using the `onCardTitleChange` prop and a custom `renderCard` function that displays an input field on double click.
+
+![Kanban Board with inline editing](https://placehold.co/800x450)
+
+```tsx
+import React, { useState } from 'react';
+import { KanbanBoard } from '../KanbanBoard';
+import { KanbanBoardColumn, KanbanBoardCard } from '../KanbanBoard/KanbanBoard.props';
+import { Input, Text } from 'app-studio';
+
+export const EditableKanbanBoard = () => {
+  const [columns, setColumns] = useState<KanbanBoardColumn[]>([
+    {
+      id: 'todo',
+      title: 'To Do',
+      cards: [{ id: '1', title: 'Editable Card' }],
+    },
+  ]);
+  const [editingCardId, setEditingCardId] = useState<string | null>(null);
+
+  const handleTitleChange = (card, column, newTitle) => {
+    const newColumns = columns.map(col => {
+      if (col.id === column.id) {
+        const newCards = col.cards.map(c => c.id === card.id ? { ...c, title: newTitle } : c);
+        return { ...col, cards: newCards };
+      }
+      return col;
+    });
+    setColumns(newColumns);
+    setEditingCardId(null);
+  };
+
+  const renderCard = (card, column) => {
+    if (editingCardId === card.id) {
+      return (
+        <Input
+          autoFocus
+          defaultValue={card.title}
+          onBlur={(e) => handleTitleChange(card, column, e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              handleTitleChange(card, column, e.currentTarget.value);
+            }
+          }}
+        />
+      );
+    }
+    return <Text onDoubleClick={() => setEditingCardId(card.id)}>{card.title}</Text>;
+  };
+
+  return (
+    <KanbanBoard
+      columns={columns}
+      onChange={setColumns}
+      onCardTitleChange={handleTitleChange}
+      renderCard={renderCard}
+    />
+  );
+};
+```
+
+## Live Demo
+A live demo of the Kanban Board component with all its features is available [here](https://app-studio-web.vercel.app/components/kanban-board).
+
 ## Props
 
 | Prop | Type | Description | Default |
 | --- | --- | --- | --- |
 | `columns` | `KanbanBoardColumn[]` | Array of columns to display. | `[]` |
-| `onChange` | `(columns: KanbanBoardColumn[]) => void` | Callback when columns or cards are changed. | - |
+| `onChange` | `(columns: KanbanBoardColumn[]) => void` | Callback when columns or cards are changed (e.g., after drag-and-drop). | - |
+| `onCardMove` | `(card: KanbanBoardCard, fromColumn: KanbanBoardColumn, toColumn: KanbanBoardColumn) => void` | Callback when a card is moved to a different column. | - |
+| `onCardCreate` | `(card: KanbanBoardCard, column: KanbanBoardColumn) => void` | Callback when a card is created. | - |
+| `onCardDelete` | `(card: KanbanBoardCard, column: KanbanBoardColumn) => void` | Callback when a card is deleted. | - |
+| `onCardClick` | `(card: KanbanBoardCard, column: KanbanBoardColumn) => void` | Callback when a card is clicked. | - |
+| `onCardDoubleClick` | `(card: KanbanBoardCard, column: KanbanBoardColumn) => void` | Callback when a card is double-clicked. | - |
+| `onCardTitleChange` | `(card: KanbanBoardCard, column: KanbanBoardColumn, newTitle: string) => void` | Callback when a card's title is changed. | - |
+| `onCardDescriptionChange` | `(card: KanbanBoardCard, column: KanbanBoardColumn, newDescription: string) => void` | Callback when a card's description is changed. | - |
 | `renderCard` | `(card: KanbanBoardCard, column: KanbanBoardColumn) => React.ReactNode` | Custom render method for cards. | - |
 | `renderColumnHeader` | `(column: KanbanBoardColumn) => React.ReactNode` | Custom render method for column headers. | - |
 | `renderEmptyState` | `(column: KanbanBoardColumn) => React.ReactNode` | Custom render method for empty column state. | - |