@particle-academy/react-fancy 2.6.0 → 2.7.1

package/dist/index.d.cts

@@ -96,6 +96,14 @@ interface AccordionPanelSectionProps {
     openClassName?: string;
     /** Class applied only when the section is collapsed */
     closedClassName?: string;
+    /**
+     * Skip the default flex layout (items-center + gap-1 + flex-row/col).
+     * Use this for full-bleed panel sections that need their children
+     * to stretch (e.g. a chat sidebar where the trigger should fill
+     * full panel height). The data attributes, section context, and
+     * conditional render of children stay in place.
+     */
+    unstyled?: boolean;
     /**
      * Children. Compose with `<AccordionPanel.Trigger>` and
      * `<AccordionPanel.Content>` — Trigger always renders, Content only
@@ -125,7 +133,7 @@ interface AccordionPanelTriggerProps {
  *
  * Pinned sections never collapse and don't need a Trigger.
  */
-declare function AccordionPanelSection({ id, pinned, className, openClassName, closedClassName, children, }: AccordionPanelSectionProps): react_jsx_runtime.JSX.Element;
+declare function AccordionPanelSection({ id, pinned, className, openClassName, closedClassName, unstyled, children, }: AccordionPanelSectionProps): react_jsx_runtime.JSX.Element;
 declare namespace AccordionPanelSection {
     var displayName: string;
 }
@@ -153,16 +161,28 @@ declare namespace AccordionPanelTrigger {
 interface AccordionPanelContentProps {
     children: ReactNode;
     className?: string;
+    /**
+     * Skip the default flex-row/flex-col + items-center + gap classes so the
+     * consumer can lay out the open-state content however they want (e.g. a
+     * full-height chat panel with header/scroll/input rows). The
+     * `data-react-fancy-accordion-content` attribute and conditional render
+     * (only when the section is open) are kept.
+     */
+    unstyled?: boolean;
 }
 /**
  * Wrapper for the open-state content of a Section. Renders its children
  * only when the parent Section is open; returns `null` otherwise.
  *
  * Use this so siblings of `<AccordionPanel.Trigger>` inside a section can
- * cleanly toggle in/out of the DOM. Layout style flows through the
- * `className` prop (defaults to a flex row/column matching orientation).
+ * cleanly toggle in/out of the DOM.
+ *
+ * The default styling assumes an inline cluster — flex row (horizontal
+ * orientation) or column (vertical), centered, with a small gap. For panel
+ * use cases where the content needs full-bleed layout (chat panes, canvas
+ * surfaces, etc.), pass `unstyled` and supply your own className.
  */
-declare function AccordionPanelContent({ children, className, }: AccordionPanelContentProps): react_jsx_runtime.JSX.Element | null;
+declare function AccordionPanelContent({ children, className, unstyled, }: AccordionPanelContentProps): react_jsx_runtime.JSX.Element | null;
 declare namespace AccordionPanelContent {
     var displayName: string;
 }
@@ -2049,19 +2069,31 @@ interface KanbanColumnProps {
     id: string;
     title?: string;
     className?: string;
+    /**
+     * Skip the column's default visuals (background, padding, min-height, fixed
+     * width) so the consumer can render their own surface around the children.
+     * Drop-target behaviour, drag-over ring, and column id wiring are kept.
+     */
+    unstyled?: boolean;
 }
 interface KanbanCardProps {
     children: ReactNode;
     id: string;
     className?: string;
+    /**
+     * Skip the card's default visuals (border, padding, shadow, hover styles).
+     * Drag handlers and the `draggable` attribute remain so a consumer can
+     * wrap their own Card / Surface inside.
+     */
+    unstyled?: boolean;
 }
 
-declare function KanbanColumn({ children, id, title, className, }: KanbanColumnProps): react_jsx_runtime.JSX.Element;
+declare function KanbanColumn({ children, id, title, className, unstyled, }: KanbanColumnProps): react_jsx_runtime.JSX.Element;
 declare namespace KanbanColumn {
     var displayName: string;
 }
 
-declare function KanbanCard({ children, id, className }: KanbanCardProps): react_jsx_runtime.JSX.Element;
+declare function KanbanCard({ children, id, className, unstyled }: KanbanCardProps): react_jsx_runtime.JSX.Element;
 declare namespace KanbanCard {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -96,6 +96,14 @@ interface AccordionPanelSectionProps {
     openClassName?: string;
     /** Class applied only when the section is collapsed */
     closedClassName?: string;
+    /**
+     * Skip the default flex layout (items-center + gap-1 + flex-row/col).
+     * Use this for full-bleed panel sections that need their children
+     * to stretch (e.g. a chat sidebar where the trigger should fill
+     * full panel height). The data attributes, section context, and
+     * conditional render of children stay in place.
+     */
+    unstyled?: boolean;
     /**
      * Children. Compose with `<AccordionPanel.Trigger>` and
      * `<AccordionPanel.Content>` — Trigger always renders, Content only
@@ -125,7 +133,7 @@ interface AccordionPanelTriggerProps {
  *
  * Pinned sections never collapse and don't need a Trigger.
  */
-declare function AccordionPanelSection({ id, pinned, className, openClassName, closedClassName, children, }: AccordionPanelSectionProps): react_jsx_runtime.JSX.Element;
+declare function AccordionPanelSection({ id, pinned, className, openClassName, closedClassName, unstyled, children, }: AccordionPanelSectionProps): react_jsx_runtime.JSX.Element;
 declare namespace AccordionPanelSection {
     var displayName: string;
 }
@@ -153,16 +161,28 @@ declare namespace AccordionPanelTrigger {
 interface AccordionPanelContentProps {
     children: ReactNode;
     className?: string;
+    /**
+     * Skip the default flex-row/flex-col + items-center + gap classes so the
+     * consumer can lay out the open-state content however they want (e.g. a
+     * full-height chat panel with header/scroll/input rows). The
+     * `data-react-fancy-accordion-content` attribute and conditional render
+     * (only when the section is open) are kept.
+     */
+    unstyled?: boolean;
 }
 /**
  * Wrapper for the open-state content of a Section. Renders its children
  * only when the parent Section is open; returns `null` otherwise.
  *
  * Use this so siblings of `<AccordionPanel.Trigger>` inside a section can
- * cleanly toggle in/out of the DOM. Layout style flows through the
- * `className` prop (defaults to a flex row/column matching orientation).
+ * cleanly toggle in/out of the DOM.
+ *
+ * The default styling assumes an inline cluster — flex row (horizontal
+ * orientation) or column (vertical), centered, with a small gap. For panel
+ * use cases where the content needs full-bleed layout (chat panes, canvas
+ * surfaces, etc.), pass `unstyled` and supply your own className.
  */
-declare function AccordionPanelContent({ children, className, }: AccordionPanelContentProps): react_jsx_runtime.JSX.Element | null;
+declare function AccordionPanelContent({ children, className, unstyled, }: AccordionPanelContentProps): react_jsx_runtime.JSX.Element | null;
 declare namespace AccordionPanelContent {
     var displayName: string;
 }
@@ -2049,19 +2069,31 @@ interface KanbanColumnProps {
     id: string;
     title?: string;
     className?: string;
+    /**
+     * Skip the column's default visuals (background, padding, min-height, fixed
+     * width) so the consumer can render their own surface around the children.
+     * Drop-target behaviour, drag-over ring, and column id wiring are kept.
+     */
+    unstyled?: boolean;
 }
 interface KanbanCardProps {
     children: ReactNode;
     id: string;
     className?: string;
+    /**
+     * Skip the card's default visuals (border, padding, shadow, hover styles).
+     * Drag handlers and the `draggable` attribute remain so a consumer can
+     * wrap their own Card / Surface inside.
+     */
+    unstyled?: boolean;
 }
 
-declare function KanbanColumn({ children, id, title, className, }: KanbanColumnProps): react_jsx_runtime.JSX.Element;
+declare function KanbanColumn({ children, id, title, className, unstyled, }: KanbanColumnProps): react_jsx_runtime.JSX.Element;
 declare namespace KanbanColumn {
     var displayName: string;
 }
 
-declare function KanbanCard({ children, id, className }: KanbanCardProps): react_jsx_runtime.JSX.Element;
+declare function KanbanCard({ children, id, className, unstyled }: KanbanCardProps): react_jsx_runtime.JSX.Element;
 declare namespace KanbanCard {
     var displayName: string;
 }

package/dist/index.js

@@ -2600,6 +2600,7 @@ function AccordionPanelSection({
   className,
   openClassName,
   closedClassName,
+  unstyled,
   children
 }) {
   const panel = useAccordionPanel();
@@ -2624,7 +2625,8 @@ function AccordionPanelSection({
       "data-pinned": pinned ? "" : void 0,
       "data-orientation": orientation,
       className: cn(
-        "flex shrink-0 items-center gap-1",
+        "flex shrink-0",
+        !unstyled && "items-center gap-1",
         orientation === "horizontal" ? "flex-row" : "flex-col",
         className,
         open ? openClassName : closedClassName
@@ -2670,10 +2672,12 @@ function AccordionPanelTrigger({
           "group relative flex shrink-0 items-center justify-center cursor-pointer",
           "text-zinc-500 dark:text-zinc-500",
           "hover:text-zinc-900 dark:hover:text-zinc-100",
-          orientation === "horizontal" ? "w-px self-stretch hover:w-3 mx-1" : "h-px self-stretch hover:h-3 my-1",
-          "before:absolute before:inset-0 before:bg-zinc-200 dark:before:bg-zinc-700",
-          orientation === "horizontal" ? "before:w-px before:left-1/2 before:-translate-x-1/2" : "before:h-px before:top-1/2 before:-translate-y-1/2",
-          "transition-all duration-150",
+          // Wide hitbox + thin visible line (drawn via ::before).
+          orientation === "horizontal" ? "w-3 self-stretch" : "h-3 self-stretch",
+          "before:absolute before:bg-zinc-200 dark:before:bg-zinc-700",
+          "before:transition-colors group-hover:before:bg-zinc-400 dark:group-hover:before:bg-zinc-500",
+          orientation === "horizontal" ? "before:top-0 before:bottom-0 before:w-px before:left-1/2 before:-translate-x-1/2" : "before:left-0 before:right-0 before:h-px before:top-1/2 before:-translate-y-1/2",
+          "transition-colors",
           className
         ),
         children: /* @__PURE__ */ jsx(
@@ -2736,7 +2740,8 @@ function ChevronIcon({
 }
 function AccordionPanelContent({
   children,
-  className
+  className,
+  unstyled
 }) {
   const { open, orientation } = useAccordionSection();
   if (!open) return null;
@@ -2746,8 +2751,8 @@ function AccordionPanelContent({
       "data-react-fancy-accordion-content": "",
       "data-orientation": orientation,
       className: cn(
-        "flex items-center gap-1",
-        orientation === "horizontal" ? "flex-row" : "flex-col",
+        !unstyled && "flex items-center gap-1",
+        !unstyled && (orientation === "horizontal" ? "flex-row" : "flex-col"),
         className
       ),
       children
@@ -11108,11 +11113,13 @@ var KanbanColumnContext = createContext("");
 function useKanbanColumn() {
   return useContext(KanbanColumnContext);
 }
+var DEFAULT_COLUMN_CLASSES = "min-h-[200px] w-72 rounded-xl bg-zinc-50 p-3 dark:bg-zinc-800/50";
 function KanbanColumn({
   children,
   id,
   title,
-  className
+  className,
+  unstyled
 }) {
   const { onCardMove, draggedCard, dragSource } = useKanban();
   const [dragOver, setDragOver] = useState(false);
@@ -11139,7 +11146,8 @@ function KanbanColumn({
       onDragOver: handleDragOver,
       onDragLeave: handleDragLeave,
       className: cn(
-        "flex min-h-[200px] w-72 flex-col rounded-xl bg-zinc-50 p-3 dark:bg-zinc-800/50",
+        "flex flex-col",
+        !unstyled && DEFAULT_COLUMN_CLASSES,
         dragOver && "ring-2 ring-blue-400 ring-inset",
         className
       ),
@@ -11151,7 +11159,8 @@ function KanbanColumn({
   ) });
 }
 KanbanColumn.displayName = "KanbanColumn";
-function KanbanCard({ children, id, className }) {
+var DEFAULT_CARD_CLASSES = "rounded-lg border border-zinc-200 bg-white p-3 shadow-sm transition-shadow hover:shadow-md dark:border-zinc-700 dark:bg-zinc-900";
+function KanbanCard({ children, id, className, unstyled }) {
   const { setDraggedCard, setDragSource } = useKanban();
   const columnId = useKanbanColumn();
   const handleDragStart = useCallback(() => {
@@ -11170,7 +11179,9 @@ function KanbanCard({ children, id, className }) {
       onDragStart: handleDragStart,
       onDragEnd: handleDragEnd,
       className: cn(
-        "cursor-grab rounded-lg border border-zinc-200 bg-white p-3 shadow-sm transition-shadow hover:shadow-md active:cursor-grabbing dark:border-zinc-700 dark:bg-zinc-900",
+        // Drag affordance — kept even when unstyled so users still see grab cursors.
+        "cursor-grab active:cursor-grabbing",
+        !unstyled && DEFAULT_CARD_CLASSES,
         className
       ),
       children