@particle-academy/react-fancy 2.6.0 → 2.7.1

package/docs/AccordionPanel.md

@@ -118,6 +118,7 @@ const [open, setOpen] = useState<string[]>(["wishlist"]);
 | `pinned` | `boolean` | `false` | Never collapses; doesn't need a Trigger |
 | `className` | `string` | - | Class on the section's outer container |
 | `openClassName` / `closedClassName` | `string` | - | Class applied per state |
+| `unstyled` | `boolean` | `false` | Skip the default flex layout (`items-center`, `gap-1`, row/col by orientation). Use for full-bleed panel sections where the trigger should stretch to fill the panel. *Since v2.7.0.* |
 
 ### AccordionPanel.Trigger
 
@@ -133,3 +134,8 @@ const [open, setOpen] = useState<string[]>(["wishlist"]);
 |------|------|---------|-------------|
 | `children` | `ReactNode` | **required** | Open-state content |
 | `className` | `string` | - | Layout class on the content container |
+| `unstyled` | `boolean` | `false` | Skip the default flex layout. Same intent as `Section.unstyled` — for full-bleed panel content (chat panes, canvas surfaces). *Since v2.7.0.* |
+
+## Hitbox
+
+The default open-state Trigger renders as a thin 1px divider on the section's trailing edge, but the **clickable hitbox is 12px wide** (`w-3` / `h-3`) so users don't have to land pixel-perfect on the line. The visible 1px line darkens on hover and an inset chevron fades in. *Since v2.7.0.*

package/docs/Kanban.md

@@ -41,6 +41,7 @@ import { Kanban } from "@particle-academy/react-fancy";
 | id | `string` | - | Unique column identifier (required) |
 | title | `string` | - | Column header text |
 | className | `string` | - | Additional CSS classes |
+| unstyled | `boolean` | `false` | Skip the default visuals (background, padding, min-height, fixed `w-72`) so you can render your own surface around the children. The drop target, drag-over ring, and column id wiring are kept. *Since v2.7.0.* |
 
 ### Kanban.Card
 
@@ -49,6 +50,28 @@ import { Kanban } from "@particle-academy/react-fancy";
 | id | `string` | - | Unique card identifier (required) |
 | children | `ReactNode` | - | Card content |
 | className | `string` | - | Additional CSS classes |
+| unstyled | `boolean` | `false` | Skip the default border / padding / shadow so you can wrap your own `<Card>` (or any surface) inside. Drag handlers and `draggable` stay in place. *Since v2.7.0.* |
+
+## Composing custom card visuals
+
+When you want full control over the card body — e.g. wrapping a `<Card>` with avatars, badges, dropdown menus — pass `unstyled` so the Kanban wrapper just provides drag plumbing:
+
+```tsx
+<Kanban.Card id={card.id} unstyled>
+  <Card variant="elevated" padding="none" className="overflow-hidden">
+    {/* your fancy card body */}
+  </Card>
+</Kanban.Card>
+```
+
+Same pattern works for columns when you want a custom column shell:
+
+```tsx
+<Kanban.Column id="doing" unstyled className="w-80 rounded-xl bg-zinc-50 p-3 ring-1 ring-zinc-200">
+  <MyColumnHeader title="In progress" wipLimit={3} />
+  {cards.map((c) => <Kanban.Card key={c.id} id={c.id} unstyled>...</Kanban.Card>)}
+</Kanban.Column>
+```
 
 ## Stateful Example
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-academy/react-fancy",
-  "version": "2.6.0",
+  "version": "2.7.1",
   "description": "React UI component library — React port of the fancy-flux Blade component library",
   "repository": {
     "type": "git",