@particle-academy/react-fancy 2.6.0 → 2.7.0

package/dist/index.cjs

@@ -2910,6 +2910,7 @@ function AccordionPanelSection({
   className,
   openClassName,
   closedClassName,
+  unstyled,
   children
 }) {
   const panel = useAccordionPanel();
@@ -2934,7 +2935,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
@@ -2980,10 +2982,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__ */ jsxRuntime.jsx(
@@ -3046,7 +3050,8 @@ function ChevronIcon({
 }
 function AccordionPanelContent({
   children,
-  className
+  className,
+  unstyled
 }) {
   const { open, orientation } = useAccordionSection();
   if (!open) return null;
@@ -3056,8 +3061,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
@@ -11418,11 +11423,13 @@ var KanbanColumnContext = react.createContext("");
 function useKanbanColumn() {
   return react.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] = react.useState(false);
@@ -11449,7 +11456,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
       ),
@@ -11461,7 +11469,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 = react.useCallback(() => {
@@ -11480,7 +11489,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