@docubook/create 2.3.0 → 2.5.0

package/src/dist/components/ui/icon-cloud.tsx

@@ -0,0 +1,353 @@
+"use client";
+
+import React, { useEffect, useRef, useState, useMemo } from "react";
+import { renderToString } from "react-dom/server";
+
+interface Icon {
+  x: number;
+  y: number;
+  z: number;
+  scale: number;
+  opacity: number;
+  id: number;
+}
+
+interface IconCloudProps {
+  icons?: React.ReactNode[];
+  images?: string[];
+}
+
+function easeOutCubic(t: number): number {
+  return 1 - Math.pow(1 - t, 3);
+}
+
+export function IconCloud({ icons, images }: IconCloudProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  // const [iconPositions, setIconPositions] = useState<Icon[]>([]);
+  const iconPositions = useMemo<Icon[]>(() => {
+    const items = icons || images || [];
+    const newIcons: Icon[] = [];
+    const numIcons = items.length || 20;
+
+    // Fibonacci sphere parameters
+    const offset = 2 / numIcons;
+    const increment = Math.PI * (3 - Math.sqrt(5));
+
+    for (let i = 0; i < numIcons; i++) {
+      const y = i * offset - 1 + offset / 2;
+      const r = Math.sqrt(1 - y * y);
+      const phi = i * increment;
+
+      const x = Math.cos(phi) * r;
+      const z = Math.sin(phi) * r;
+
+      newIcons.push({
+        x: x * 100,
+        y: y * 100,
+        z: z * 100,
+        scale: 1,
+        opacity: 1,
+        id: i,
+      });
+    }
+    return newIcons;
+  }, [icons, images]);
+  const [rotation] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [lastMousePos, setLastMousePos] = useState({ x: 0, y: 0 });
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+  const [targetRotation, setTargetRotation] = useState<{
+    x: number;
+    y: number;
+    startX: number;
+    startY: number;
+    distance: number;
+    startTime: number;
+    duration: number;
+  } | null>(null);
+  const animationFrameRef = useRef<number>(undefined);
+  const rotationRef = useRef(rotation);
+  const iconCanvasesRef = useRef<HTMLCanvasElement[]>([]);
+  const imagesLoadedRef = useRef<boolean[]>([]);
+
+  // Create icon canvases once when icons/images change
+  useEffect(() => {
+    if (!icons && !images) return;
+
+    const items = icons || images || [];
+    imagesLoadedRef.current = new Array(items.length).fill(false);
+
+    const newIconCanvases = items.map((item, index) => {
+      const offscreen = document.createElement("canvas");
+      offscreen.width = 40;
+      offscreen.height = 40;
+      const offCtx = offscreen.getContext("2d");
+
+      if (offCtx) {
+        if (images) {
+          // Handle image URLs directly
+          const img = new Image();
+          img.crossOrigin = "anonymous";
+          img.src = items[index] as string;
+          img.onload = () => {
+            offCtx.clearRect(0, 0, offscreen.width, offscreen.height);
+
+            // Create circular clipping path
+            offCtx.beginPath();
+            offCtx.arc(20, 20, 20, 0, Math.PI * 2);
+            offCtx.closePath();
+            offCtx.clip();
+
+            // Draw the image
+            offCtx.drawImage(img, 0, 0, 40, 40);
+
+            imagesLoadedRef.current[index] = true;
+          };
+        } else {
+          // Handle SVG icons
+          offCtx.scale(0.4, 0.4);
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const svgString = renderToString(item as React.ReactElement<any>);
+          const img = new Image();
+          img.src = "data:image/svg+xml;base64," + btoa(svgString);
+          img.onload = () => {
+            offCtx.clearRect(0, 0, offscreen.width, offscreen.height);
+            offCtx.drawImage(img, 0, 0);
+            imagesLoadedRef.current[index] = true;
+          };
+        }
+      }
+      return offscreen;
+    });
+
+    iconCanvasesRef.current = newIconCanvases;
+  }, [icons, images]);
+
+  // Generate initial icon positions on a sphere
+  // useEffect(() => {
+  //   const items = icons || images || [];
+  //   const newIcons: Icon[] = [];
+  //   const numIcons = items.length || 20;
+
+  //   // Fibonacci sphere parameters
+  //   const offset = 2 / numIcons;
+  //   const increment = Math.PI * (3 - Math.sqrt(5));
+
+  //   for (let i = 0; i < numIcons; i++) {
+  //     const y = i * offset - 1 + offset / 2;
+  //     const r = Math.sqrt(1 - y * y);
+  //     const phi = i * increment;
+
+  //     const x = Math.cos(phi) * r;
+  //     const z = Math.sin(phi) * r;
+
+  //     newIcons.push({
+  //       x: x * 100,
+  //       y: y * 100,
+  //       z: z * 100,
+  //       scale: 1,
+  //       opacity: 1,
+  //       id: i,
+  //     });
+  //   }
+  //   setIconPositions(newIcons);
+  // }, [icons, images]);
+
+  // Handle mouse events
+  const handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (!rect || !canvasRef.current) return;
+
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    const ctx = canvasRef.current.getContext("2d");
+    if (!ctx) return;
+
+    iconPositions.forEach((icon) => {
+      const cosX = Math.cos(rotationRef.current.x);
+      const sinX = Math.sin(rotationRef.current.x);
+      const cosY = Math.cos(rotationRef.current.y);
+      const sinY = Math.sin(rotationRef.current.y);
+
+      const rotatedX = icon.x * cosY - icon.z * sinY;
+      const rotatedZ = icon.x * sinY + icon.z * cosY;
+      const rotatedY = icon.y * cosX + rotatedZ * sinX;
+
+      const screenX = canvasRef.current!.width / 2 + rotatedX;
+      const screenY = canvasRef.current!.height / 2 + rotatedY;
+
+      const scale = (rotatedZ + 200) / 300;
+      const radius = 20 * scale;
+      const dx = x - screenX;
+      const dy = y - screenY;
+
+      if (dx * dx + dy * dy < radius * radius) {
+        const targetX = -Math.atan2(
+          icon.y,
+          Math.sqrt(icon.x * icon.x + icon.z * icon.z),
+        );
+        const targetY = Math.atan2(icon.x, icon.z);
+
+        const currentX = rotationRef.current.x;
+        const currentY = rotationRef.current.y;
+        const distance = Math.sqrt(
+          Math.pow(targetX - currentX, 2) + Math.pow(targetY - currentY, 2),
+        );
+
+        const duration = Math.min(2000, Math.max(800, distance * 1000));
+
+        setTargetRotation({
+          x: targetX,
+          y: targetY,
+          startX: currentX,
+          startY: currentY,
+          distance,
+          startTime: performance.now(),
+          duration,
+        });
+        return;
+      }
+    });
+
+    setIsDragging(true);
+    setLastMousePos({ x: e.clientX, y: e.clientY });
+  };
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (rect) {
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      setMousePos({ x, y });
+    }
+
+    if (isDragging) {
+      const deltaX = e.clientX - lastMousePos.x;
+      const deltaY = e.clientY - lastMousePos.y;
+
+      rotationRef.current = {
+        x: rotationRef.current.x + deltaY * 0.002,
+        y: rotationRef.current.y + deltaX * 0.002,
+      };
+
+      setLastMousePos({ x: e.clientX, y: e.clientY });
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  // Animation and rendering
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !ctx) return;
+
+    const animate = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      const centerX = canvas.width / 2;
+      const centerY = canvas.height / 2;
+      const maxDistance = Math.sqrt(centerX * centerX + centerY * centerY);
+      const dx = mousePos.x - centerX;
+      const dy = mousePos.y - centerY;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      const speed = 0.003 + (distance / maxDistance) * 0.01;
+
+      if (targetRotation) {
+        const elapsed = performance.now() - targetRotation.startTime;
+        const progress = Math.min(1, elapsed / targetRotation.duration);
+        const easedProgress = easeOutCubic(progress);
+
+        rotationRef.current = {
+          x:
+            targetRotation.startX +
+            (targetRotation.x - targetRotation.startX) * easedProgress,
+          y:
+            targetRotation.startY +
+            (targetRotation.y - targetRotation.startY) * easedProgress,
+        };
+
+        if (progress >= 1) {
+          setTargetRotation(null);
+        }
+      } else if (!isDragging) {
+        rotationRef.current = {
+          x: rotationRef.current.x + (dy / canvas.height) * speed,
+          y: rotationRef.current.y + (dx / canvas.width) * speed,
+        };
+      }
+
+      iconPositions.forEach((icon, index) => {
+        const cosX = Math.cos(rotationRef.current.x);
+        const sinX = Math.sin(rotationRef.current.x);
+        const cosY = Math.cos(rotationRef.current.y);
+        const sinY = Math.sin(rotationRef.current.y);
+
+        const rotatedX = icon.x * cosY - icon.z * sinY;
+        const rotatedZ = icon.x * sinY + icon.z * cosY;
+        const rotatedY = icon.y * cosX + rotatedZ * sinX;
+
+        const scale = (rotatedZ + 200) / 300;
+        const opacity = Math.max(0.2, Math.min(1, (rotatedZ + 150) / 200));
+
+        ctx.save();
+        ctx.translate(
+          canvas.width / 2 + rotatedX,
+          canvas.height / 2 + rotatedY,
+        );
+        ctx.scale(scale, scale);
+        ctx.globalAlpha = opacity;
+
+        if (icons || images) {
+          // Only try to render icons/images if they exist
+          if (
+            iconCanvasesRef.current[index] &&
+            imagesLoadedRef.current[index]
+          ) {
+            ctx.drawImage(iconCanvasesRef.current[index], -20, -20, 40, 40);
+          }
+        } else {
+          // Show numbered circles if no icons/images are provided
+          ctx.beginPath();
+          ctx.arc(0, 0, 20, 0, Math.PI * 2);
+          ctx.fillStyle = "#4444ff";
+          ctx.fill();
+          ctx.fillStyle = "white";
+          ctx.textAlign = "center";
+          ctx.textBaseline = "middle";
+          ctx.font = "16px Arial";
+          ctx.fillText(`${icon.id + 1}`, 0, 0);
+        }
+
+        ctx.restore();
+      });
+      animationFrameRef.current = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [icons, images, iconPositions, isDragging, mousePos, targetRotation]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={400}
+      height={400}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+      className="rounded-full"
+      aria-label="Interactive 3D Icon Cloud"
+      role="img"
+    />
+  );
+}

package/src/dist/components/ui/scroll-area.tsx

@@ -33,9 +33,9 @@ const ScrollBar = React.forwardRef<
     className={cn(
       "flex touch-none select-none transition-colors",
       orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      "h-full w-2.5 border-l border-l-transparent p-px",
       orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      "h-2.5 flex-col border-t border-t-transparent p-px",
       className
     )}
     {...props}

package/src/dist/components/ui/sheet.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
+import { PanelRightClose } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -51,7 +51,7 @@ const sheetVariants = cva(
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+  VariantProps<typeof sheetVariants> { }
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
@@ -65,8 +65,8 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-7 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
+      <SheetPrimitive.Close className="absolute top-7 right-4 z-50 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <PanelRightClose className="w-6 h-6 shrink-0 text-muted-foreground" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>

package/src/dist/components/ui/toggle.tsx

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-1 rounded-md text-xs font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -18,7 +18,7 @@ const toggleVariants = cva(
       size: {
         default: "h-9 px-2 min-w-9",
         sm: "h-8 px-1.5 min-w-8",
-        xs: "h-7 px-1 min-w-7",
+        xs: "h-6 px-1.5 min-w-6",
         lg: "h-10 px-2.5 min-w-10",
       },
     },
@@ -32,7 +32,7 @@ const toggleVariants = cva(
 const Toggle = React.forwardRef<
   React.ElementRef<typeof TogglePrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+  VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
   <TogglePrimitive.Root
     ref={ref}

package/src/dist/docs/components/accordion-group.mdx

@@ -0,0 +1,68 @@
+---
+title : Accordion Group
+description: for writing multiple accordions and grouping them together
+date : 10-08-2025
+---
+
+An accordion is like a button that opens and closes information. To avoid clutter, long information can be hidden first and then revealed when clicked.
+
+<Note type="note" title="Note">
+  Group related accordions together using `<AccordionGroup>`. This creates a cohesive section of accordions that can be individually expanded or collapsed.
+</Note>
+
+## Usage
+
+<AccordionGroup>
+<Accordion title="Basic Usage">
+    example of using regular paragraph content inside the accordion component
+</Accordion>
+
+<Accordion title="With icon props" icon="MousePointerClick">
+    This accordion includes a [Lucide Icon](https://lucide.dev/icons/) because the `icon` prop is provided.
+</Accordion>
+
+<Accordion title="Expanded by Default" defaultOpen>
+    You can put other components inside Accordions.
+```jsx:helloword.jsx
+class HelloWorld {
+public static void main(String[] args) {
+        System.out.println("Hello, World!");
+        }
+}
+```
+</Accordion>
+</AccordionGroup>
+
+## Writing Markdown
+
+````plaintext
+<AccordionGroup>
+<Accordion title="Basic Usage">
+    This accordion includes a [Lucide Icon](https://lucide.dev/icons/) because the `icon` prop is provided.
+</Accordion>
+
+<Accordion title="With icon props" icon="MousePointerClick">
+    This accordion includes a Lucide icon because the `icon` prop is provided.
+</Accordion>
+
+<Accordion title="Expanded by Default" defaultOpen>
+    You can put other components inside Accordions.
+```jsx:helloword.jsx
+class HelloWorld {
+public static void main(String[] args) {
+        System.out.println("Hello, World!");
+        }
+}
+```
+</Accordion>
+</AccordionGroup>
+````
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | string | - | **Required**. The text displayed in the accordion header. |
+| `children` | ReactNode | null | The content to be displayed when the accordion is expanded. Can be plain text, markdown, or React components. |
+| `defaultOpen` | boolean | false | When true, the accordion will be expanded by default. |
+| `icon` | string | undefined | Optional. Adds a Lucide icon before the title in the accordion header. |

package/src/dist/docs/components/accordion.mdx

@@ -0,0 +1,59 @@
+---
+title: Accordion
+description: A component used to create collapsible content that can be hidden and shown again.
+date: 22-12-2024
+---
+
+## Preview
+
+### Basic Usage
+
+```plaintext
+<Accordion title="Click to expand">
+    This is a simple accordion component that can be toggled by clicking the header. The content can include any valid React nodes, including text, components, and markdown.
+</Accordion>
+```
+
+Render as :
+
+<Accordion title="Click to expand">
+    This is a simple accordion component that can be toggled by clicking the header. The content can include any valid React nodes, including text, components, and markdown.
+</Accordion>
+
+### With Code Block
+
+````plaintext
+<Accordion title="Code Block" defaultOpen={true} icon="Code">
+    ```javascript:main.js showLineNumbers {3-4}
+    function isRocketAboutToCrash() {
+        // Check if the rocket is stable
+        if (!isStable()) {
+            NoCrash(); // Prevent the crash
+        }
+    }
+    ```
+</Accordion>
+````
+
+Render as :
+
+<Accordion title="Code Block" defaultOpen={true} icon="Code">
+    ```javascript:main.js showLineNumbers {3-4}
+    function isRocketAboutToCrash() {
+        // Check if the rocket is stable
+        if (!isStable()) {
+            NoCrash(); // Prevent the crash
+        }
+    }
+    ```
+</Accordion>
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | string | - | **Required**. The text displayed in the accordion header. |
+| `children` | ReactNode | null | The content to be displayed when the accordion is expanded. Can be plain text, markdown, or React components. |
+| `defaultOpen` | boolean | false | When true, the accordion will be expanded by default. |
+| `icon` | string | undefined | Optional. Adds a Lucide icon before the title in the accordion header. |
+

package/src/dist/docs/components/button.mdx

@@ -0,0 +1,40 @@
+---
+title: Button
+description: A component used to create buttons that can be used to trigger actions or navigate to other pages.
+date: 14-12-2024
+---
+
+## Preview
+
+<Button
+  text="Learn More"
+  href="https://learn.example.com"
+  icon="MoveUpRight"
+  size="md"
+  target="_blank"
+  variation="primary"
+/>
+
+## Props
+
+| Prop        | Type     | Default     | Description                                  |
+| ----------- | -------- | ----------- | -------------------------------------------- |
+| `text`      | string   | undefined   | The button text                              |
+| `href`      | string   | **required**| The URL to navigate to                       |
+| `icon`      | string   | undefined   | Lucide icon name (e.g. "MoveUpRight")       |
+| `size`      | string   | "md"        | Button size: `"sm"`, `"md"`, or `"lg"`      |
+| `target`    | string   | undefined   | Link target (e.g. "_blank")                 |
+| `variation` | string   | "primary"   | Button style: `"primary"`, `"accent"`, or `"outline"` |
+
+## Output Markdown
+
+```markdown
+<Button
+  text="Learn More"
+  href="https://learn.example.com"
+  icon="MoveUpRight"
+  size="md"
+  target="_blank"
+  variation="primary"
+/>
+```

package/src/dist/docs/components/card-group.mdx

@@ -0,0 +1,47 @@
+---
+title: Card Group
+description: A component used to create card groups that can be used to display multiple cards in a compact and organized way.
+date: 20-02-2025
+---
+
+## Preview
+
+<CardGroup cols={2}>
+<Card title="Heading 1" icon="Heading1">
+  This is an example of card content with columns.
+</Card>
+<Card title="Heading 2" icon="Heading2">
+  This is an example of card content with columns.
+</Card>
+<Card title="Grid Card" icon="Grid" horizontal>
+    This is a horizontal card layout.
+</Card>
+<Card title="Horizontal Card" icon="Layout" horizontal>
+    This is a horizontal card layout.
+</Card>
+</CardGroup>
+
+## Props
+
+| Prop          | Type     | Default | Description                                             |
+| ------------- | -------- | ------- | ------------------------------------------------------- |
+| `cols`       | number | `{2}`   | By default 2 The number of columns per row                                |
+
+## Output Markdown
+
+```markdown
+<CardGroup cols={2}>
+<Card title="Heading 1" icon="Heading1">
+  This is an example of card content with columns.
+</Card>
+<Card title="Heading 2" icon="Heading2">
+  This is an example of card content with columns.
+</Card>
+<Card title="Grid Card" icon="Grid" horizontal>
+    This is a horizontal card layout.
+</Card>
+<Card title="Horizontal Card" icon="Layout" horizontal>
+    This is a horizontal card layout.
+</Card>
+</CardGroup>
+```