@majapisoftwares/ui 4.3.16 → 5.0.0

package/components/PictureCropInput/PictureCropInput.d.ts

@@ -1,20 +0,0 @@
-import { type RefObject } from "react";
-import { type 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, minWidth, minHeight, ref, label, }: {
-    value?: string;
-    onChange: (value?: string) => void;
-    loading?: boolean;
-    className?: string;
-    previewSizeClassNames?: string;
-    previewContainerClassName?: string;
-    cropButtonClassName?: string;
-    aspect?: number;
-    minWidth?: number;
-    minHeight?: number;
-    ref?: RefObject<PictureCropInputRef | null>;
-    label?: string;
-}): import("react").JSX.Element;

package/components/PictureCropInput/PictureCropInput.jsx

@@ -1,174 +0,0 @@
-import { CheckIcon, TrashIcon } from "@heroicons/react/20/solid";
-import { PhotoIcon } from "@heroicons/react/24/outline";
-import clsx from "clsx";
-import { useCallback, useEffect, useId, useRef, useState, } from "react";
-import ReactCrop, {} from "react-image-crop";
-import { useLatest } from "react-use";
-import useDebounceEffect from "../../hooks/useDebounceEffect";
-import Button from "../Button";
-import { defaultLabelClassName } from "../Input";
-import Skeleton from "../Skeleton";
-import Tooltip from "../Tooltip";
-import { canvasPreview } from "./canvasPreview";
-export default function PictureCropInput({ value, onChange, loading, className, previewSizeClassNames = "size-52", previewContainerClassName, cropButtonClassName, aspect, minWidth, minHeight, ref, label, }) {
-    const id = useId();
-    const [src, setSrc] = useState();
-    const [crop, setCrop] = useState();
-    const cropRef = useLatest(crop);
-    const [completedCrop, setCompletedCrop] = useState();
-    const completedCropRef = useLatest(completedCrop);
-    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 handleClear = useCallback(() => {
-        setCrop(undefined);
-        setSrc(undefined);
-        setCompletedCrop(undefined);
-        onChange(undefined);
-    }, [onChange]);
-    const handleCrop = useCallback(async () => {
-        try {
-            onChange(await cropToBlobUrl());
-        }
-        catch (e) {
-            console.error(e);
-        }
-        setCrop(undefined);
-        setSrc(undefined);
-        setCompletedCrop(undefined);
-    }, [cropToBlobUrl, onChange]);
-    useEffect(() => {
-        if (ref) {
-            ref.current = {
-                handleCrop,
-                completedCrop,
-            };
-        }
-    }, [completedCrop, completedCropRef, handleCrop, ref]);
-    return (<div ref={parentRef} className={className}>
-      {label && (<label htmlFor={id} className={defaultLabelClassName}>
-          {label}
-        </label>)}
-      <div className="flex items-start gap-2">
-        {loading && <Skeleton className={previewSizeClassNames}/>}
-        {src && (<>
-            <ReactCrop crop={crop} onChange={(c) => setCrop(c)} onComplete={(c) => setCompletedCrop(c)} aspect={aspect} minWidth={minWidth} minHeight={minHeight} 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>
-            {value && (<Tooltip content="Clear">
-                <Button onClick={handleClear} variant="text" icon className="mb-auto">
-                  <TrashIcon />
-                </Button>
-              </Tooltip>)}
-          </>)}
-      </div>
-    </div>);
-}

package/components/PictureCropInput/canvasPreview.d.ts

@@ -1,2 +0,0 @@
-import type { 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

@@ -1,37 +0,0 @@
-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

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

package/components/PictureCropInput/index.js

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

package/components/Popover/Popover.d.ts

@@ -1,13 +0,0 @@
-import * as RPopover from "@radix-ui/react-popover";
-import React, { type 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

@@ -1,22 +0,0 @@
-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

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

package/components/Popover/index.jsx

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

package/components/Resizable/Resizable.d.ts

@@ -1,12 +0,0 @@
-import React, { type CSSProperties, type ReactElement, type 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

@@ -1,54 +0,0 @@
-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 top-0 bottom-0 left-0 z-10 w-1 cursor-e-resize transition-colors select-none hover:bg-zinc-700", {
-                "bg-zinc-700": isResizing,
-            })} onMouseDown={onMouseDown}/>
-        {child.props.children}
-      </>),
-    });
-}

package/components/Resizable/index.d.ts

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

package/components/Resizable/index.jsx

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

package/components/ScrollArea/ScrollArea.d.ts

@@ -1,9 +0,0 @@
-import type { ReactNode, Ref } from "react";
-export default function ScrollArea({ className, children, viewportClassName, ref, viewportRef, type, }: {
-    children: ReactNode;
-    className?: string;
-    viewportClassName?: string;
-    ref?: Ref<HTMLDivElement>;
-    viewportRef?: Ref<HTMLDivElement>;
-    type?: "auto" | "always" | "scroll" | "hover";
-}): import("react").JSX.Element;

package/components/ScrollArea/ScrollArea.jsx

@@ -1,16 +0,0 @@
-import { ScrollArea as RScrollArea } from "radix-ui";
-import clsx from "../../utils/clsx";
-export default function ScrollArea({ className, children, viewportClassName, ref, viewportRef, type, }) {
-    return (<RScrollArea.Root className={clsx("overflow-hidden", className)} ref={ref} type={type}>
-      <RScrollArea.Viewport className={clsx("h-full w-full", viewportClassName)} ref={viewportRef}>
-        {children}
-      </RScrollArea.Viewport>
-      <RScrollArea.Scrollbar className="flex touch-none bg-zinc-700 p-0.5 transition-colors duration-[160ms] ease-out select-none hover:bg-zinc-600 data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-2.5" orientation="vertical">
-        <RScrollArea.Thumb className="relative flex-1 rounded-[10px] bg-zinc-500 before:absolute before:top-1/2 before:left-1/2 before:size-full before:min-h-11 before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2 hover:bg-zinc-400"/>
-      </RScrollArea.Scrollbar>
-      <RScrollArea.Scrollbar className="flex touch-none bg-zinc-700 p-0.5 transition-colors duration-[160ms] ease-out select-none hover:bg-zinc-600 data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-2.5" orientation="horizontal">
-        <RScrollArea.Thumb className="relative flex-1 rounded-[10px] bg-zinc-500 before:absolute before:top-1/2 before:left-1/2 before:size-full before:min-h-[44px] before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2"/>
-      </RScrollArea.Scrollbar>
-      <RScrollArea.Corner className="bg-zinc-600"/>
-    </RScrollArea.Root>);
-}

package/components/ScrollArea/index.d.ts

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

package/components/ScrollArea/index.jsx

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

package/components/Select/Select.d.ts

@@ -1,25 +0,0 @@
-import type { ComponentProps } from "react";
-import * as RSelect from "@radix-ui/react-select";
-import Button from "../Button";
-declare function SelectContent({ className, children, ...props }: ComponentProps<typeof RSelect.Content>): import("react").JSX.Element;
-declare function SelectSeparator({ className, ...props }: ComponentProps<typeof RSelect.Separator>): import("react").JSX.Element;
-declare function SelectItem({ children, className, indicatorClassName, ...props }: ComponentProps<typeof RSelect.Item> & {
-    indicatorClassName?: string;
-}): import("react").JSX.Element;
-declare function SelectTrigger({ className, placeholder, children, readOnly, ref, buttonClassName, ...props }: ComponentProps<typeof RSelect.Trigger> & ComponentProps<typeof Button> & {
-    placeholder?: string;
-    buttonClassName?: string;
-}): import("react").JSX.Element;
-declare function SelectLabel({ className, ...props }: ComponentProps<typeof RSelect.Label>): import("react").JSX.Element;
-declare const Select: {
-    Root: import("react").FC<RSelect.SelectProps>;
-    Item: typeof SelectItem;
-    Trigger: typeof SelectTrigger;
-    Content: typeof SelectContent;
-    Group: import("react").ForwardRefExoticComponent<RSelect.SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-    Label: typeof SelectLabel;
-    Separator: typeof SelectSeparator;
-    Icon: import("react").ForwardRefExoticComponent<RSelect.SelectIconProps & import("react").RefAttributes<HTMLSpanElement>>;
-    Value: import("react").ForwardRefExoticComponent<RSelect.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
-};
-export default Select;

package/components/Select/Select.jsx

@@ -1,55 +0,0 @@
-import * as RSelect from "@radix-ui/react-select";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon, } from "@heroicons/react/16/solid";
-import Button from "../Button";
-import clsx from "../../utils/clsx";
-import { dropdownItemClassName, dropdownItemIndicatorClassName, dropdownLabelClassName, dropdownSeparatorClassName, } from "../../styles/Dropdown.classNames";
-import { modalContentClassName } from "../../styles/Modal.classNames";
-const selectScrollButtonClassName = clsx("ui-select-scroll-button", "flex h-6 cursor-default items-center justify-center", "bg-white", "dark:bg-zinc-900", "[&>svg]:w-4 [&>svg]:h-4");
-function SelectContent({ className, children, ...props }) {
-    return (<RSelect.Portal>
-      <RSelect.Content {...props} className={clsx(modalContentClassName, "ui-select-content -ml-[6px]", className)}>
-        <RSelect.ScrollUpButton className={selectScrollButtonClassName}>
-          <ChevronUpIcon />
-        </RSelect.ScrollUpButton>
-        <RSelect.Viewport>{children}</RSelect.Viewport>
-        <RSelect.ScrollDownButton className={selectScrollButtonClassName}>
-          <ChevronDownIcon />
-        </RSelect.ScrollDownButton>
-      </RSelect.Content>
-    </RSelect.Portal>);
-}
-function SelectSeparator({ className, ...props }) {
-    return (<RSelect.Separator {...props} className={clsx(dropdownSeparatorClassName, "ui-select-separator", className)}/>);
-}
-function SelectItem({ children, className, indicatorClassName, ...props }) {
-    return (<RSelect.Item className={clsx(dropdownItemClassName, "ui-select-item", className)} {...props}>
-      <RSelect.ItemIndicator className={clsx(dropdownItemIndicatorClassName, "ui-select-item-indicator", indicatorClassName)}>
-        <CheckIcon />
-      </RSelect.ItemIndicator>
-      <RSelect.ItemText>{children}</RSelect.ItemText>
-    </RSelect.Item>);
-}
-function SelectTrigger({ className, placeholder, children, readOnly, ref, buttonClassName, ...props }) {
-    return (<RSelect.Trigger asChild {...props} className={clsx("data-[placeholder]:text-zinc-500", className)} ref={children ? ref : undefined}>
-      {children || (<Button trailing={!readOnly ? (<RSelect.Icon>
-                <ChevronDownIcon />
-              </RSelect.Icon>) : undefined} ref={ref} disabled={readOnly} className={clsx("rounded-md opacity-100", buttonClassName)}>
-          <RSelect.Value placeholder={placeholder}/>
-        </Button>)}
-    </RSelect.Trigger>);
-}
-function SelectLabel({ className, ...props }) {
-    return (<RSelect.Label className={clsx(dropdownLabelClassName, "ui-select-label", className)} {...props}/>);
-}
-const Select = {
-    Root: RSelect.Root,
-    Item: SelectItem,
-    Trigger: SelectTrigger,
-    Content: SelectContent,
-    Group: RSelect.Group,
-    Label: SelectLabel,
-    Separator: SelectSeparator,
-    Icon: RSelect.Icon,
-    Value: RSelect.Value,
-};
-export default Select;

package/components/Select/index.d.ts

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

package/components/Select/index.jsx

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

package/components/Skeleton/Skeleton.d.ts

@@ -1,2 +0,0 @@
-import type { DetailedHTMLProps, HTMLAttributes } from "react";
-export default function Skeleton({ className, ...props }: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").JSX.Element;

package/components/Skeleton/Skeleton.jsx

@@ -1,8 +0,0 @@
-import clsx from "../../utils/clsx";
-export default function Skeleton({ className, ...props }) {
-    return (<div className={clsx("animate-pulse overflow-hidden rounded-sm text-transparent", "bg-zinc-300 text-zinc-300 dark:bg-zinc-700 dark:text-zinc-700", className)} {...props}>
-      <div className={clsx("animate-skeleton-shiny h-full w-full", "bg-[linear-gradient(120deg,rgba(255,255,255,0)_0%,#e4e4e7,rgba(255,255,255,0)_100%)]", "dark:bg-[linear-gradient(120deg,rgba(255,255,255,0)_20%,#52525b,rgba(255,255,255,0)_80%)]")} style={{
-            backgroundSize: "400% 100%",
-        }}/>
-    </div>);
-}

package/components/Skeleton/index.d.ts

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

package/components/Skeleton/index.jsx

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

package/components/Slider/Slider.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-export default function Slider({ step, max, min, className, value, onValueChange, thumbClassName, }: {
-    step?: number;
-    max?: number;
-    className?: string;
-    thumbClassName?: string;
-    min?: number;
-    value?: number[];
-    onValueChange?: (value: number[]) => void;
-}): React.JSX.Element;

package/components/Slider/Slider.jsx

@@ -1,21 +0,0 @@
-import React, { useState } from "react";
-import * as RSlider from "@radix-ui/react-slider";
-import fakeArray from "../../utils/fakeArray";
-import clsx from "../../utils/clsx";
-import { useUpdateEffect } from "react-use";
-export default function Slider({ step = 1, max = 100, min = 0, className, value, onValueChange, thumbClassName, }) {
-    const thumbs = value?.length || 1;
-    const [intervalValue, setInternalValue] = useState(fakeArray(thumbs).map((n) => 10 * n));
-    useUpdateEffect(() => {
-        setInternalValue(value || fakeArray(thumbs).map((n) => 10 * n));
-    }, [value]);
-    useUpdateEffect(() => {
-        onValueChange?.(intervalValue);
-    }, [intervalValue, onValueChange]);
-    return (<RSlider.Root className={clsx("relative flex h-5 touch-none select-none items-center", className)} value={intervalValue} max={max} onValueChange={setInternalValue} step={step} min={min}>
-      <RSlider.Track className="relative h-[3px] grow rounded-full bg-black/30">
-        <RSlider.Range className="absolute h-full rounded-full bg-primary-500"/>
-      </RSlider.Track>
-      {fakeArray(thumbs).map((n) => (<RSlider.Thumb key={n} className={clsx("block h-5 w-5 rounded-full bg-white shadow-md ring-primary-500 ring-offset-2 ring-offset-zinc-100 transition hover:bg-primary-500 focus:outline-hidden focus-visible:shadow-lg focus-visible:ring-2", thumbClassName)}/>))}
-    </RSlider.Root>);
-}

package/components/Slider/index.d.ts

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

package/components/Slider/index.jsx

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

package/components/Spotlight/Spotlight.d.ts

@@ -1,30 +0,0 @@
-export default function Spotlight<T extends object>({ recentSearchesId, open, setOpen, setQuery, query, onClickItem, results, loading, getItemId, getItemLabel, getItemPicture, getItemHref, onSeeMoreClick, seeMoreHref, overlayClassName, dialogContentClassName, className, contentClassName, iconClassName, inputClassName, buttonClassName, noResultsClassName, recentSearchClassName, seeMoreLabel, noRecentSearchLabel, recentlySearchedLabel, noResultsLabel, onSubmit, }: {
-    recentSearchesId: string;
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    setQuery: (search: string) => void;
-    query: string;
-    results?: T[];
-    loading: boolean;
-    getItemId?: (item: T) => string;
-    getItemLabel?: (item: T) => string;
-    getItemPicture?: (item: T) => string;
-    getItemHref?: (item: T) => string;
-    onClickItem?: (item: T) => void;
-    onSeeMoreClick?: () => void;
-    seeMoreHref?: string;
-    overlayClassName?: string;
-    dialogContentClassName?: string;
-    className?: string;
-    contentClassName?: string;
-    iconClassName?: string;
-    inputClassName?: string;
-    buttonClassName?: string;
-    noResultsClassName?: string;
-    recentSearchClassName?: string;
-    seeMoreLabel?: string;
-    noRecentSearchLabel?: string;
-    recentlySearchedLabel?: string;
-    noResultsLabel?: string;
-    onSubmit?: () => void;
-}): import("react").JSX.Element;