@majapisoftwares/ui 4.0.2

package/components/Pagination/Pagination.d.ts

@@ -0,0 +1,13 @@
+export interface PaginationProps {
+    totalItems?: number;
+    itemsPerPage?: number;
+    currentPage: number;
+    onChangePage?: (page: number) => void;
+    className?: string;
+    pageHref?: (page: number) => string;
+    paginationText?: string;
+    previousText?: string;
+    nextText?: string;
+    pagesToClickAmount?: number;
+}
+export default function Pagination({ totalItems, itemsPerPage, currentPage, onChangePage, className, pageHref, paginationText, previousText, nextText, pagesToClickAmount, }: PaginationProps): import("react").JSX.Element;

package/components/Pagination/Pagination.jsx

@@ -0,0 +1,64 @@
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import clsx from "../../utils/clsx";
+import { range } from "lodash-es";
+import UnstyledButton from "../Button/UnstyledButton";
+export default function Pagination({ totalItems, itemsPerPage, currentPage, onChangePage, className, pageHref, paginationText = "Pagination", previousText = "Previous", nextText = "Next", pagesToClickAmount = 7, }) {
+    const [page, setPage] = useState(currentPage);
+    useEffect(() => {
+        if (page !== currentPage) {
+            setPage(currentPage);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentPage]);
+    useEffect(() => {
+        if (onChangePage) {
+            onChangePage(page);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [page]);
+    const [previousTotalItems, setPreviousTotalItems] = useState(totalItems || 0);
+    useEffect(() => {
+        if (totalItems !== undefined) {
+            setPreviousTotalItems(totalItems);
+        }
+    }, [totalItems]);
+    const pageCount = itemsPerPage !== undefined
+        ? Math.ceil(previousTotalItems / itemsPerPage) || 1
+        : 0;
+    const pages = useMemo(() => {
+        if (pageCount < pagesToClickAmount) {
+            return range(1, pageCount + 1);
+        }
+        if (page < pagesToClickAmount - 2) {
+            return [...range(1, pagesToClickAmount - 1), "...1", pageCount];
+        }
+        if (page > pageCount - (pagesToClickAmount - 3)) {
+            return [
+                1,
+                "...1",
+                ...range(pageCount - (pagesToClickAmount - 3), pageCount + 1),
+            ];
+        }
+        return [1, "...1", page - 1, page, page + 1, "...2", pageCount];
+    }, [page, pageCount, pagesToClickAmount]);
+    const handlePageClick = useCallback((page) => (e) => {
+        e.preventDefault();
+        setPage(page);
+    }, []);
+    return (<nav className={clsx("ui-pagination", className)} aria-label={paginationText}>
+      <UnstyledButton disabled={page === 1} onClick={handlePageClick(page - 1)} href={page !== 1 && pageHref ? pageHref(page - 1) : undefined}>
+        <span className="sr-only">{previousText}</span>
+        <ChevronLeftIcon className="h-5 w-5" aria-hidden="true"/>
+      </UnstyledButton>
+      {pages.map((p) => typeof p === "number" ? (<UnstyledButton key={p} onClick={handlePageClick(p)} data-active={page === p ? "" : undefined} href={pageHref ? pageHref(p) : undefined}>
+            {p}
+          </UnstyledButton>) : (<button key={p} disabled>
+            ...
+          </button>))}
+      <UnstyledButton disabled={page === pageCount} onClick={handlePageClick(page + 1)} href={page !== pageCount && pageHref ? pageHref(page + 1) : undefined}>
+        <span className="sr-only">{nextText}</span>
+        <ChevronRightIcon className="h-5 w-5" aria-hidden="true"/>
+      </UnstyledButton>
+    </nav>);
+}

package/components/Pagination/index.d.ts

@@ -0,0 +1,3 @@
+import Pagination from "./Pagination";
+export * from "./Pagination";
+export default Pagination;

package/components/Pagination/index.jsx

@@ -0,0 +1,3 @@
+import Pagination from "./Pagination";
+export * from "./Pagination";
+export default Pagination;

package/components/Particles/Particles.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+interface ParticlesProps {
+    particleCount?: number;
+    particleSpread?: number;
+    speed?: number;
+    particleColors?: string[];
+    moveParticlesOnHover?: boolean;
+    particleHoverFactor?: number;
+    alphaParticles?: boolean;
+    particleBaseSize?: number;
+    sizeRandomness?: number;
+    cameraDistance?: number;
+    disableRotation?: boolean;
+    className?: string;
+    useWindowMouseMove?: boolean;
+}
+declare const Particles: React.FC<ParticlesProps>;
+export default Particles;

package/components/Particles/Particles.jsx

@@ -0,0 +1,205 @@
+import React, { useEffect, useRef } from "react";
+import { Camera, Geometry, Mesh, Program, Renderer } from "ogl";
+const defaultColors = ["#ffffff", "#ffffff", "#ffffff"];
+const hexToRgb = (hex) => {
+    hex = hex.replace(/^#/, "");
+    if (hex.length === 3) {
+        hex = hex
+            .split("")
+            .map((c) => c + c)
+            .join("");
+    }
+    const int = parseInt(hex, 16);
+    const r = ((int >> 16) & 255) / 255;
+    const g = ((int >> 8) & 255) / 255;
+    const b = (int & 255) / 255;
+    return [r, g, b];
+};
+const vertex = /* glsl */ `
+  attribute vec3 position;
+  attribute vec4 random;
+  attribute vec3 color;
+  
+  uniform mat4 modelMatrix;
+  uniform mat4 viewMatrix;
+  uniform mat4 projectionMatrix;
+  uniform float uTime;
+  uniform float uSpread;
+  uniform float uBaseSize;
+  uniform float uSizeRandomness;
+  
+  varying vec4 vRandom;
+  varying vec3 vColor;
+  
+  void main() {
+    vRandom = random;
+    vColor = color;
+    
+    vec3 pos = position * uSpread;
+    pos.z *= 10.0;
+    
+    vec4 mPos = modelMatrix * vec4(pos, 1.0);
+    float t = uTime;
+    mPos.x += sin(t * random.z + 6.28 * random.w) * mix(0.1, 1.5, random.x);
+    mPos.y += sin(t * random.y + 6.28 * random.x) * mix(0.1, 1.5, random.w);
+    mPos.z += sin(t * random.w + 6.28 * random.y) * mix(0.1, 1.5, random.z);
+    
+    vec4 mvPos = viewMatrix * mPos;
+    gl_PointSize = (uBaseSize * (1.0 + uSizeRandomness * (random.x - 0.5))) / length(mvPos.xyz);
+    gl_Position = projectionMatrix * mvPos;
+  }
+`;
+const fragment = /* glsl */ `
+  precision highp float;
+  
+  uniform float uTime;
+  uniform float uAlphaParticles;
+  varying vec4 vRandom;
+  varying vec3 vColor;
+  
+  void main() {
+    vec2 uv = gl_PointCoord.xy;
+    float d = length(uv - vec2(0.5));
+    
+    if(uAlphaParticles < 0.5) {
+      if(d > 0.5) {
+        discard;
+      }
+      gl_FragColor = vec4(vColor + 0.2 * sin(uv.yxx + uTime + vRandom.y * 6.28), 1.0);
+    } else {
+      float circle = smoothstep(0.5, 0.4, d) * 0.8;
+      gl_FragColor = vec4(vColor + 0.2 * sin(uv.yxx + uTime + vRandom.y * 6.28), circle);
+    }
+  }
+`;
+const Particles = ({ particleCount = 200, particleSpread = 10, speed = 0.1, particleColors, moveParticlesOnHover = false, particleHoverFactor = 1, alphaParticles = false, particleBaseSize = 100, sizeRandomness = 1, cameraDistance = 20, disableRotation = false, className, useWindowMouseMove = false, }) => {
+    const containerRef = useRef(null);
+    const mouseRef = useRef({ x: 0, y: 0 });
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const renderer = new Renderer({ depth: false, alpha: true });
+        const gl = renderer.gl;
+        container.appendChild(gl.canvas);
+        gl.clearColor(0, 0, 0, 0);
+        const camera = new Camera(gl, { fov: 15 });
+        camera.position.set(0, 0, cameraDistance);
+        const resize = () => {
+            const width = container.clientWidth;
+            const height = container.clientHeight;
+            renderer.setSize(width, height);
+            camera.perspective({ aspect: gl.canvas.width / gl.canvas.height });
+        };
+        window.addEventListener("resize", resize, false);
+        resize();
+        const handleMouseMove = (e) => {
+            const rect = container.getBoundingClientRect();
+            const x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+            const y = -(((e.clientY - rect.top) / rect.height) * 2 - 1);
+            mouseRef.current = { x, y };
+        };
+        if (moveParticlesOnHover) {
+            if (useWindowMouseMove) {
+                window.addEventListener("mousemove", handleMouseMove);
+            }
+            else {
+                container.addEventListener("mousemove", handleMouseMove);
+            }
+        }
+        const count = particleCount;
+        const positions = new Float32Array(count * 3);
+        const randoms = new Float32Array(count * 4);
+        const colors = new Float32Array(count * 3);
+        const palette = particleColors && particleColors.length > 0
+            ? particleColors
+            : defaultColors;
+        for (let i = 0; i < count; i++) {
+            let x, y, z, len;
+            do {
+                x = Math.random() * 2 - 1;
+                y = Math.random() * 2 - 1;
+                z = Math.random() * 2 - 1;
+                len = x * x + y * y + z * z;
+            } while (len > 1 || len === 0);
+            const r = Math.cbrt(Math.random());
+            positions.set([x * r, y * r, z * r], i * 3);
+            randoms.set([Math.random(), Math.random(), Math.random(), Math.random()], i * 4);
+            const col = hexToRgb(palette[Math.floor(Math.random() * palette.length)]);
+            colors.set(col, i * 3);
+        }
+        const geometry = new Geometry(gl, {
+            position: { size: 3, data: positions },
+            random: { size: 4, data: randoms },
+            color: { size: 3, data: colors },
+        });
+        const program = new Program(gl, {
+            vertex,
+            fragment,
+            uniforms: {
+                uTime: { value: 0 },
+                uSpread: { value: particleSpread },
+                uBaseSize: { value: particleBaseSize },
+                uSizeRandomness: { value: sizeRandomness },
+                uAlphaParticles: { value: alphaParticles ? 1 : 0 },
+            },
+            transparent: true,
+            depthTest: false,
+        });
+        const particles = new Mesh(gl, { mode: gl.POINTS, geometry, program });
+        let animationFrameId;
+        let lastTime = performance.now();
+        let elapsed = 0;
+        const update = (t) => {
+            animationFrameId = requestAnimationFrame(update);
+            const delta = t - lastTime;
+            lastTime = t;
+            elapsed += delta * speed;
+            program.uniforms.uTime.value = elapsed * 0.001;
+            if (moveParticlesOnHover) {
+                particles.position.x = -mouseRef.current.x * particleHoverFactor;
+                particles.position.y = -mouseRef.current.y * particleHoverFactor;
+            }
+            else {
+                particles.position.x = 0;
+                particles.position.y = 0;
+            }
+            if (!disableRotation) {
+                particles.rotation.x = Math.sin(elapsed * 0.0002) * 0.1;
+                particles.rotation.y = Math.cos(elapsed * 0.0005) * 0.15;
+                particles.rotation.z += 0.01 * speed;
+            }
+            renderer.render({ scene: particles, camera });
+        };
+        animationFrameId = requestAnimationFrame(update);
+        return () => {
+            window.removeEventListener("resize", resize);
+            if (moveParticlesOnHover) {
+                if (useWindowMouseMove) {
+                    window.removeEventListener("mousemove", handleMouseMove);
+                }
+                else {
+                    container.removeEventListener("mousemove", handleMouseMove);
+                }
+            }
+            cancelAnimationFrame(animationFrameId);
+            if (container.contains(gl.canvas)) {
+                container.removeChild(gl.canvas);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        particleCount,
+        particleSpread,
+        speed,
+        moveParticlesOnHover,
+        particleHoverFactor,
+        alphaParticles,
+        particleBaseSize,
+        sizeRandomness,
+        cameraDistance,
+        disableRotation,
+    ]);
+    return (<div ref={containerRef} className={`relative h-full w-full ${className}`}/>);
+};
+export default Particles;

package/components/Particles/index.d.ts

@@ -0,0 +1,3 @@
+import Particles from "./Particles";
+export * from "./Particles";
+export default Particles;

package/components/Particles/index.jsx

@@ -0,0 +1,3 @@
+import Particles from "./Particles";
+export * from "./Particles";
+export default Particles;

package/components/PictureCropInput/PictureCropInput.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from "react";
+import { PixelCrop } from "react-image-crop";
+export type PictureCropInputRef = {
+    handleCrop: () => Promise<void>;
+    completedCrop: PixelCrop | undefined;
+};
+export default function PictureCropInput({ value, onChange, loading, className, previewSizeClassNames, previewContainerClassName, cropButtonClassName, aspect, ref, }: {
+    value: string;
+    onChange: (value: string) => void;
+    loading?: boolean;
+    className?: string;
+    previewSizeClassNames?: string;
+    previewContainerClassName?: string;
+    cropButtonClassName?: string;
+    aspect?: number;
+    ref?: RefObject<PictureCropInputRef | null>;
+}): import("react").JSX.Element;

package/components/PictureCropInput/PictureCropInput.jsx

@@ -0,0 +1,153 @@
+import { useCallback, useEffect, useId, useRef, useState, } from "react";
+import ReactCrop from "react-image-crop";
+import useDebounceEffect from "../../hooks/useDebounceEffect";
+import { canvasPreview } from "./canvasPreview";
+import Skeleton from "../Skeleton";
+import Button from "../Button";
+import { PhotoIcon } from "@heroicons/react/24/outline";
+import clsx from "clsx";
+import { CheckIcon, TrashIcon } from "@heroicons/react/20/solid";
+import Tooltip from "../Tooltip";
+import { useLatest } from "react-use";
+export default function PictureCropInput({ value, onChange, loading, className, previewSizeClassNames = "h-52 w-52", previewContainerClassName, cropButtonClassName, aspect = 1, ref, }) {
+    const id = useId();
+    const [src, setSrc] = useState();
+    const [crop, setCrop] = useState();
+    const cropRef = useLatest(crop);
+    const [completedCrop, setCompletedCrop] = useState();
+    const previewCanvasRef = useRef(null);
+    const imgRef = useRef(null);
+    const parentRef = useRef(null);
+    const autoCrop = useCallback(() => {
+        const smallestSide = Math.min(imgRef.current?.getBoundingClientRect().width || 0, imgRef.current?.getBoundingClientRect().height || 0);
+        setCrop({
+            unit: "px",
+            x: 0,
+            y: 0,
+            width: smallestSide,
+            height: smallestSide,
+        });
+    }, []);
+    const onFileSelect = useCallback(async (event) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            setSrc(URL.createObjectURL(file));
+            setTimeout(() => {
+                autoCrop();
+            }, 100);
+        }
+    }, [autoCrop]);
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver(() => {
+            if (cropRef.current) {
+                autoCrop();
+            }
+        });
+        const el = parentRef.current;
+        if (el) {
+            resizeObserver.observe(el);
+        }
+        return () => {
+            if (el) {
+                resizeObserver.unobserve(el);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useDebounceEffect(async () => {
+        if (completedCrop?.width &&
+            completedCrop?.height &&
+            imgRef.current &&
+            previewCanvasRef.current) {
+            // We use canvasPreview as it's much faster than imgPreview.
+            await canvasPreview(imgRef.current, previewCanvasRef.current, completedCrop);
+        }
+    }, 100, [completedCrop]);
+    const cropToBlobUrl = useCallback(async () => {
+        const image = imgRef.current;
+        const previewCanvas = previewCanvasRef.current;
+        if (!image || !previewCanvas || !completedCrop) {
+            throw new Error("Crop canvas does not exist");
+        }
+        // This will size relative to the uploaded image
+        // size. If you want to size according to what they
+        // are looking at on screen, remove scaleX + scaleY
+        const scaleX = image.naturalWidth / image.width;
+        const scaleY = image.naturalHeight / image.height;
+        const offscreen = new OffscreenCanvas(completedCrop.width * scaleX, completedCrop.height * scaleY);
+        const ctx = offscreen.getContext("2d");
+        if (!ctx) {
+            throw new Error("No 2d context");
+        }
+        ctx.drawImage(previewCanvas, 0, 0, previewCanvas.width, previewCanvas.height, 0, 0, offscreen.width, offscreen.height);
+        // You might want { type: "image/jpeg", quality: <0 to 1> } to
+        // reduce image size
+        const blob = await offscreen.convertToBlob({
+            type: "image/png",
+        });
+        return URL.createObjectURL(blob);
+    }, [completedCrop]);
+    const handleCrop = useCallback(async () => {
+        onChange(await cropToBlobUrl());
+        setSrc(undefined);
+    }, [cropToBlobUrl, onChange]);
+    useEffect(() => {
+        if (ref) {
+            ref.current = {
+                handleCrop,
+                completedCrop,
+            };
+        }
+    }, [completedCrop, handleCrop, ref]);
+    const handleClear = useCallback(() => {
+        setCrop(undefined);
+        setSrc(undefined);
+    }, []);
+    return (<div ref={parentRef} className={clsx("flex gap-2", className)}>
+      {loading && <Skeleton className={previewSizeClassNames}/>}
+      {src && (<>
+          <ReactCrop crop={crop} onChange={(c) => setCrop(c)} onComplete={(c) => setCompletedCrop(c)} aspect={aspect} minWidth={50 * aspect} minHeight={50 * aspect} className="max-h-96 max-w-96" keepSelection>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img alt="Picture" src={src} 
+        // className="h-96 w-96 object-contain"
+        ref={imgRef}/>
+          </ReactCrop>
+          {completedCrop && (<div className={clsx("flex flex-col gap-2", previewContainerClassName)}>
+              <canvas ref={previewCanvasRef} className={previewSizeClassNames} style={{
+                    objectFit: "cover",
+                }}/>
+              <div className="flex gap-2">
+                <Button onClick={handleCrop} className={clsx("w-full", cropButtonClassName)} leading={<CheckIcon />}>
+                  Crop
+                </Button>
+                <Tooltip content="Clear">
+                  <Button onClick={handleClear} variant="text" icon>
+                    <TrashIcon />
+                  </Button>
+                </Tooltip>
+              </div>
+            </div>)}
+        </>)}
+      {!src && (<>
+          {value && (<div className={clsx("flex shrink-0 rounded-sm", previewSizeClassNames)} style={{
+                    background: value
+                        ? `center / cover url(${value})`
+                        : undefined,
+                }}/>)}
+          <input type="file" id={id} className="hidden" onChange={onFileSelect} accept=".jpg,.jpeg,.png"/>
+          <Button variant="outlined" className="mb-auto flex items-center gap-3 p-2" onClick={() => document.getElementById(id)?.click()}>
+            <div className="flex h-12 w-12 items-center justify-center rounded-sm border border-zinc-800 p-3">
+              <PhotoIcon />
+            </div>
+            <div className="flex flex-col items-start gap-1.5">
+              <div className="text-gray-10 text-sm font-medium">
+                {value ? "Change" : "Select"} picture
+              </div>
+              <div className="text-xs text-zinc-500">
+                JPG, PNG - Max size 10MB
+              </div>
+            </div>
+          </Button>
+        </>)}
+    </div>);
+}

package/components/PictureCropInput/canvasPreview.d.ts

@@ -0,0 +1,2 @@
+import { PixelCrop } from "react-image-crop";
+export declare function canvasPreview(image: HTMLImageElement, canvas: HTMLCanvasElement, crop: PixelCrop, scale?: number, rotate?: number): Promise<void>;

package/components/PictureCropInput/canvasPreview.js

@@ -0,0 +1,37 @@
+const TO_RADIANS = Math.PI / 180;
+export async function canvasPreview(image, canvas, crop, scale = 1, rotate = 0) {
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+        throw new Error("No 2d context");
+    }
+    const scaleX = image.naturalWidth / image.width;
+    const scaleY = image.naturalHeight / image.height;
+    // devicePixelRatio slightly increases sharpness on retina devices
+    // at the expense of slightly slower render times and needing to
+    // size the image back down if you want to download/upload and be
+    // true to the images natural size.
+    const pixelRatio = window.devicePixelRatio;
+    // const pixelRatio = 1
+    canvas.width = Math.floor(crop.width * scaleX * pixelRatio);
+    canvas.height = Math.floor(crop.height * scaleY * pixelRatio);
+    ctx.scale(pixelRatio, pixelRatio);
+    ctx.imageSmoothingQuality = "high";
+    const cropX = crop.x * scaleX;
+    const cropY = crop.y * scaleY;
+    const rotateRads = rotate * TO_RADIANS;
+    const centerX = image.naturalWidth / 2;
+    const centerY = image.naturalHeight / 2;
+    ctx.save();
+    // 5) Move the crop origin to the canvas origin (0,0)
+    ctx.translate(-cropX, -cropY);
+    // 4) Move the origin to the center of the original position
+    ctx.translate(centerX, centerY);
+    // 3) Rotate around the origin
+    ctx.rotate(rotateRads);
+    // 2) Scale the image
+    ctx.scale(scale, scale);
+    // 1) Move the center of the image to the origin (0,0)
+    ctx.translate(-centerX, -centerY);
+    ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight, 0, 0, image.naturalWidth, image.naturalHeight);
+    ctx.restore();
+}

package/components/PictureCropInput/index.d.ts

@@ -0,0 +1,3 @@
+import PictureCropInput from "./PictureCropInput";
+export * from "./PictureCropInput";
+export default PictureCropInput;

package/components/PictureCropInput/index.js

@@ -0,0 +1,3 @@
+import PictureCropInput from "./PictureCropInput";
+export * from "./PictureCropInput";
+export default PictureCropInput;

package/components/Popover/Popover.d.ts

@@ -0,0 +1,13 @@
+import * as RPopover from "@radix-ui/react-popover";
+import React, { ComponentProps } from "react";
+declare function PopoverContent({ className, sideOffset, collisionPadding, children, noArrow, ...props }: ComponentProps<typeof RPopover.Content> & {
+    noArrow?: boolean;
+}): React.JSX.Element;
+declare function PopoverArrow({ className, ...props }: ComponentProps<typeof RPopover.Arrow>): React.JSX.Element;
+declare const Popover: {
+    Content: typeof PopoverContent;
+    Root: React.FC<RPopover.PopoverProps>;
+    Trigger: React.ForwardRefExoticComponent<RPopover.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Arrow: typeof PopoverArrow;
+};
+export default Popover;

package/components/Popover/Popover.jsx

@@ -0,0 +1,22 @@
+import * as RPopover from "@radix-ui/react-popover";
+import React from "react";
+import clsx from "../../utils/clsx";
+import { modalArrowClassName, modalContentClassName, } from "../../styles/Modal.classNames";
+function PopoverContent({ className, sideOffset = 4, collisionPadding = 8, children, noArrow, ...props }) {
+    return (<RPopover.Portal>
+      <RPopover.Content {...props} className={clsx(modalContentClassName, "ui-popover-content", className)} sideOffset={sideOffset} collisionPadding={collisionPadding}>
+        {children}
+        {!noArrow && <PopoverArrow />}
+      </RPopover.Content>
+    </RPopover.Portal>);
+}
+function PopoverArrow({ className, ...props }) {
+    return (<RPopover.Arrow {...props} className={clsx(modalArrowClassName, "ui-popover-arrow", className)}/>);
+}
+const Popover = {
+    Content: PopoverContent,
+    Root: RPopover.Root,
+    Trigger: RPopover.Trigger,
+    Arrow: PopoverArrow,
+};
+export default Popover;

package/components/Popover/index.d.ts

@@ -0,0 +1,3 @@
+import Popover from "./Popover";
+export * from "./Popover";
+export default Popover;

package/components/Popover/index.jsx

@@ -0,0 +1,3 @@
+import Popover from "./Popover";
+export * from "./Popover";
+export default Popover;

package/components/Resizable/Resizable.d.ts

@@ -0,0 +1,12 @@
+import React, { CSSProperties, ReactElement, ReactNode } from "react";
+export default function Resizable({ children, minWidth, maxWidth, width, onResize, }: {
+    children: ReactElement;
+    minWidth?: number;
+    maxWidth?: number;
+    width?: number;
+    onResize: (width?: number) => void;
+}): React.ReactElement<{
+    className?: string;
+    children?: ReactNode;
+    style?: CSSProperties;
+}, string | React.JSXElementConstructor<any>>;

package/components/Resizable/Resizable.jsx

@@ -0,0 +1,54 @@
+import React, { cloneElement, useEffect, useRef, useState, } from "react";
+import { useLatest } from "react-use";
+import clsx from "clsx";
+export default function Resizable({ children, minWidth, maxWidth, width, onResize, }) {
+    const [internalWidth, setInternalWidth] = useState(width);
+    const [isResizing, setResizing] = useState(false);
+    const isResizingRef = useLatest(isResizing);
+    const initialMouseXPos = useRef(0);
+    const initialWidth = useRef(0);
+    useEffect(() => {
+        onResize(internalWidth);
+    }, [internalWidth, onResize]);
+    const onMouseDown = (e) => {
+        const parent = e.currentTarget?.parentNode;
+        const rect = parent.getBoundingClientRect();
+        initialWidth.current = rect.width;
+        initialMouseXPos.current = e.clientX;
+        setResizing(true);
+    };
+    useEffect(() => {
+        const onMouseMove = (e) => {
+            if (isResizingRef.current) {
+                let newWidth = initialWidth.current - (e.clientX - initialMouseXPos.current);
+                if (minWidth !== undefined && newWidth < minWidth) {
+                    newWidth = minWidth;
+                }
+                if (maxWidth !== undefined && newWidth > maxWidth) {
+                    newWidth = maxWidth;
+                }
+                setInternalWidth(newWidth);
+            }
+        };
+        const onMouseUp = () => {
+            setResizing(false);
+        };
+        window.addEventListener("mousemove", onMouseMove);
+        window.addEventListener("mouseup", onMouseUp);
+        return () => {
+            window.removeEventListener("mousemove", onMouseMove);
+            window.removeEventListener("mouseup", onMouseUp);
+        };
+    }, [isResizingRef, maxWidth, minWidth, onResize]);
+    const child = children;
+    return cloneElement(child, {
+        className: clsx("relative", child.props.className),
+        style: { width: internalWidth },
+        children: (<>
+        <div className={clsx("absolute bottom-0 left-0 top-0 z-10 w-1 cursor-e-resize select-none transition-colors hover:bg-zinc-700", {
+                "bg-zinc-700": isResizing,
+            })} onMouseDown={onMouseDown}/>
+        {child.props.children}
+      </>),
+    });
+}

package/components/Resizable/index.d.ts

@@ -0,0 +1,3 @@
+import Resizable from "./Resizable";
+export * from "./Resizable";
+export default Resizable;