love-ui 1.2.13 → 1.2.15

package/packages/gradient-mesh/package.json

@@ -1,62 +0,0 @@
-{
-  "name": "@loveui/gradient-mesh",
-  "description": "Animated gradient mesh background with water effects built with OGL WebGL library.",
-  "version": "1.0.0",
-  "type": "module",
-  "license": "AGPL-3.0-or-later",
-  "keywords": [
-    "react",
-    "ogl",
-    "background",
-    "gradient",
-    "mesh",
-    "water",
-    "animation",
-    "loveui"
-  ],
-  "files": [
-    "dist",
-    "*.ts",
-    "*.tsx",
-    "*.css",
-    "*.mdx"
-  ],
-  "sideEffects": false,
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
-  },
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "clean": "rm -rf dist",
-    "prepublishOnly": "npm run clean && npm run build"
-  },
-  "dependencies": {
-    "ogl": "^1.0.6"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0 || ^19.0.0-0",
-    "react-dom": "^18.2.0 || ^19.0.0-0"
-  },
-  "peerDependenciesMeta": {
-    "react-dom": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@loveui/typescript-config": "^0.1.0",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "typescript": "^5.9.3"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}

package/packages/gradient-mesh/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "@loveui/typescript-config/react-library.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "module": "ESNext",
-    "moduleResolution": "Node"
-  },
-  "include": ["**/*.ts", "**/*.tsx", "**/*.d.ts"],
-  "exclude": ["node_modules", "dist"]
-}

package/packages/image-crop/index.tsx

@@ -1,368 +0,0 @@
-"use client";
-
-import { Button } from "../ui/src/ui/button";
-import { CropIcon, RotateCcwIcon } from "lucide-react";
-import { Slot } from "radix-ui";
-import {
-  type ComponentProps,
-  type CSSProperties,
-  createContext,
-  type MouseEvent,
-  type ReactNode,
-  type RefObject,
-  type SyntheticEvent,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import ReactCrop, {
-  centerCrop,
-  makeAspectCrop,
-  type PercentCrop,
-  type PixelCrop,
-  type ReactCropProps,
-} from "react-image-crop";
-import { cn } from "../ui/src/lib/utils";
-
-import "react-image-crop/dist/ReactCrop.css";
-
-const centerAspectCrop = (
-  mediaWidth: number,
-  mediaHeight: number,
-  aspect: number | undefined
-): PercentCrop =>
-  centerCrop(
-    aspect
-      ? makeAspectCrop(
-          {
-            unit: "%",
-            width: 90,
-          },
-          aspect,
-          mediaWidth,
-          mediaHeight
-        )
-      : { x: 0, y: 0, width: 90, height: 90, unit: "%" },
-    mediaWidth,
-    mediaHeight
-  );
-
-const getCroppedPngImage = async (
-  imageSrc: HTMLImageElement,
-  scaleFactor: number,
-  pixelCrop: PixelCrop,
-  maxImageSize: number
-): Promise<string> => {
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
-
-  if (!ctx) {
-    throw new Error("Context is null, this should never happen.");
-  }
-
-  const scaleX = imageSrc.naturalWidth / imageSrc.width;
-  const scaleY = imageSrc.naturalHeight / imageSrc.height;
-
-  ctx.imageSmoothingEnabled = false;
-  canvas.width = pixelCrop.width;
-  canvas.height = pixelCrop.height;
-
-  ctx.drawImage(
-    imageSrc,
-    pixelCrop.x * scaleX,
-    pixelCrop.y * scaleY,
-    pixelCrop.width * scaleX,
-    pixelCrop.height * scaleY,
-    0,
-    0,
-    canvas.width,
-    canvas.height
-  );
-
-  const croppedImageUrl = canvas.toDataURL("image/png");
-  const response = await fetch(croppedImageUrl);
-  const blob = await response.blob();
-
-  if (blob.size > maxImageSize) {
-    return await getCroppedPngImage(
-      imageSrc,
-      scaleFactor * 0.9,
-      pixelCrop,
-      maxImageSize
-    );
-  }
-
-  return croppedImageUrl;
-};
-
-type ImageCropContextType = {
-  file: File;
-  maxImageSize: number;
-  imgSrc: string;
-  crop: PercentCrop | undefined;
-  completedCrop: PixelCrop | null;
-  imgRef: RefObject<HTMLImageElement | null>;
-  onCrop?: (croppedImage: string) => void;
-  reactCropProps: Omit<ReactCropProps, "onChange" | "onComplete" | "children">;
-  handleChange: (pixelCrop: PixelCrop, percentCrop: PercentCrop) => void;
-  handleComplete: (
-    pixelCrop: PixelCrop,
-    percentCrop: PercentCrop
-  ) => Promise<void>;
-  onImageLoad: (e: SyntheticEvent<HTMLImageElement>) => void;
-  applyCrop: () => Promise<void>;
-  resetCrop: () => void;
-};
-
-const ImageCropContext = createContext<ImageCropContextType | null>(null);
-
-const useImageCrop = () => {
-  const context = useContext(ImageCropContext);
-  if (!context) {
-    throw new Error("ImageCrop components must be used within ImageCrop");
-  }
-  return context;
-};
-
-export type ImageCropProps = {
-  file: File;
-  maxImageSize?: number;
-  onCrop?: (croppedImage: string) => void;
-  children: ReactNode;
-  onChange?: ReactCropProps["onChange"];
-  onComplete?: ReactCropProps["onComplete"];
-} & Omit<ReactCropProps, "onChange" | "onComplete" | "children">;
-
-export const ImageCrop = ({
-  file,
-  maxImageSize = 1024 * 1024 * 5,
-  onCrop,
-  children,
-  onChange,
-  onComplete,
-  ...reactCropProps
-}: ImageCropProps) => {
-  const imgRef = useRef<HTMLImageElement | null>(null);
-  const [imgSrc, setImgSrc] = useState<string>("");
-  const [crop, setCrop] = useState<PercentCrop>();
-  const [completedCrop, setCompletedCrop] = useState<PixelCrop | null>(null);
-  const [initialCrop, setInitialCrop] = useState<PercentCrop>();
-
-  useEffect(() => {
-    const reader = new FileReader();
-    reader.addEventListener("load", () =>
-      setImgSrc(reader.result?.toString() || "")
-    );
-    reader.readAsDataURL(file);
-  }, [file]);
-
-  const onImageLoad = useCallback(
-    (e: SyntheticEvent<HTMLImageElement>) => {
-      const { width, height } = e.currentTarget;
-      const newCrop = centerAspectCrop(width, height, reactCropProps.aspect);
-      setCrop(newCrop);
-      setInitialCrop(newCrop);
-    },
-    [reactCropProps.aspect]
-  );
-
-  const handleChange = (pixelCrop: PixelCrop, percentCrop: PercentCrop) => {
-    setCrop(percentCrop);
-    onChange?.(pixelCrop, percentCrop);
-  };
-
-  // biome-ignore lint/suspicious/useAwait: "onComplete is async"
-  const handleComplete = async (
-    pixelCrop: PixelCrop,
-    percentCrop: PercentCrop
-  ) => {
-    setCompletedCrop(pixelCrop);
-    onComplete?.(pixelCrop, percentCrop);
-  };
-
-  const applyCrop = async () => {
-    if (!(imgRef.current && completedCrop)) {
-      return;
-    }
-
-    const croppedImage = await getCroppedPngImage(
-      imgRef.current,
-      1,
-      completedCrop,
-      maxImageSize
-    );
-
-    onCrop?.(croppedImage);
-  };
-
-  const resetCrop = () => {
-    if (initialCrop) {
-      setCrop(initialCrop);
-      setCompletedCrop(null);
-    }
-  };
-
-  const contextValue: ImageCropContextType = {
-    file,
-    maxImageSize,
-    imgSrc,
-    crop,
-    completedCrop,
-    imgRef,
-    onCrop,
-    reactCropProps,
-    handleChange,
-    handleComplete,
-    onImageLoad,
-    applyCrop,
-    resetCrop,
-  };
-
-  return (
-    <ImageCropContext.Provider value={contextValue}>
-      {children}
-    </ImageCropContext.Provider>
-  );
-};
-
-export type ImageCropContentProps = {
-  style?: CSSProperties;
-  className?: string;
-};
-
-export const ImageCropContent = ({
-  style,
-  className,
-}: ImageCropContentProps) => {
-  const {
-    imgSrc,
-    crop,
-    handleChange,
-    handleComplete,
-    onImageLoad,
-    imgRef,
-    reactCropProps,
-  } = useImageCrop();
-
-  const shadcnStyle = {
-    "--rc-border-color": "var(--color-border)",
-    "--rc-focus-color": "var(--color-primary)",
-  } as CSSProperties;
-
-  return (
-    <ReactCrop
-      className={cn("max-h-[277px] max-w-full", className)}
-      crop={crop}
-      onChange={handleChange}
-      onComplete={handleComplete}
-      style={{ ...shadcnStyle, ...style }}
-      {...reactCropProps}
-    >
-      {imgSrc && (
-        <img
-          alt="crop"
-          className="size-full"
-          onLoad={onImageLoad}
-          ref={imgRef}
-          src={imgSrc}
-        />
-      )}
-    </ReactCrop>
-  );
-};
-
-export type ImageCropApplyProps = ComponentProps<"button"> & {
-  asChild?: boolean;
-};
-
-export const ImageCropApply = ({
-  asChild = false,
-  children,
-  onClick,
-  ...props
-}: ImageCropApplyProps) => {
-  const { applyCrop } = useImageCrop();
-
-  const handleClick = async (e: MouseEvent<HTMLButtonElement>) => {
-    await applyCrop();
-    onClick?.(e);
-  };
-
-  if (asChild) {
-    return (
-      <Slot.Root onClick={handleClick} {...props}>
-        {children}
-      </Slot.Root>
-    );
-  }
-
-  return (
-    <Button onClick={handleClick} size="icon" variant="ghost" {...props}>
-      {children ?? <CropIcon className="size-4" />}
-    </Button>
-  );
-};
-
-export type ImageCropResetProps = ComponentProps<"button"> & {
-  asChild?: boolean;
-};
-
-export const ImageCropReset = ({
-  asChild = false,
-  children,
-  onClick,
-  ...props
-}: ImageCropResetProps) => {
-  const { resetCrop } = useImageCrop();
-
-  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
-    resetCrop();
-    onClick?.(e);
-  };
-
-  if (asChild) {
-    return (
-      <Slot.Root onClick={handleClick} {...props}>
-        {children}
-      </Slot.Root>
-    );
-  }
-
-  return (
-    <Button onClick={handleClick} size="icon" variant="ghost" {...props}>
-      {children ?? <RotateCcwIcon className="size-4" />}
-    </Button>
-  );
-};
-
-// Keep the original Cropper component for backward compatibility
-export type CropperProps = Omit<ReactCropProps, "onChange"> & {
-  file: File;
-  maxImageSize?: number;
-  onCrop?: (croppedImage: string) => void;
-  onChange?: ReactCropProps["onChange"];
-};
-
-export const Cropper = ({
-  onChange,
-  onComplete,
-  onCrop,
-  style,
-  className,
-  file,
-  maxImageSize,
-  ...props
-}: CropperProps) => (
-  <ImageCrop
-    file={file}
-    maxImageSize={maxImageSize}
-    onChange={onChange}
-    onComplete={onComplete}
-    onCrop={onCrop}
-    {...props}
-  >
-    <ImageCropContent className={className} style={style} />
-  </ImageCrop>
-);

package/packages/image-crop/package.json

@@ -1,26 +0,0 @@
-{
-  "name": "@loveui/image-crop",
-  "description": "Helps you crop images to a specific size or aspect ratio.",
-  "version": "0.1.0",
-  "dependencies": {
-    "@loveui/shadcn-ui": "^0.1.0",
-    "lucide-react": "^0.545.0",
-    "radix-ui": "^1.4.3",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-image-crop": "^11.0.10"
-  },
-  "devDependencies": {
-    "@loveui/typescript-config": "^0.1.0",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.1",
-    "typescript": "^5.9.3"
-  },
-  "files": [
-    "dist",
-    "*.ts",
-    "*.tsx",
-    "*.css",
-    "*.mdx"
-  ]
-}

package/packages/image-crop/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "@loveui/typescript-config/nextjs.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@loveui/*": ["../*"],
-      "@/components/*": ["../shadcn-ui/components/*"],
-      "@/lib/*": ["../shadcn-ui/lib/*"]
-    }
-  },
-  "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}

package/packages/image-zoom/index.tsx

@@ -1,52 +0,0 @@
-"use client";
-
-import Zoom, {
-  type ControlledProps,
-  type UncontrolledProps,
-} from "react-medium-image-zoom";
-import { cn } from "../ui/src/lib/utils";
-
-export type ImageZoomProps = UncontrolledProps & {
-  isZoomed?: ControlledProps["isZoomed"];
-  onZoomChange?: ControlledProps["onZoomChange"];
-  className?: string;
-  backdropClassName?: string;
-};
-
-export const ImageZoom = ({
-  className,
-  backdropClassName,
-  ...props
-}: ImageZoomProps) => (
-  <div
-    className={cn(
-      "relative",
-      "[&_[data-rmiz-ghost]]:pointer-events-none [&_[data-rmiz-ghost]]:absolute",
-      "[&_[data-rmiz-btn-zoom]]:m-0 [&_[data-rmiz-btn-zoom]]:size-10 [&_[data-rmiz-btn-zoom]]:touch-manipulation [&_[data-rmiz-btn-zoom]]:appearance-none [&_[data-rmiz-btn-zoom]]:rounded-[50%] [&_[data-rmiz-btn-zoom]]:border-none [&_[data-rmiz-btn-zoom]]:bg-foreground/70 [&_[data-rmiz-btn-zoom]]:p-2 [&_[data-rmiz-btn-zoom]]:text-background [&_[data-rmiz-btn-zoom]]:outline-offset-2",
-      "[&_[data-rmiz-btn-unzoom]]:m-0 [&_[data-rmiz-btn-unzoom]]:size-10 [&_[data-rmiz-btn-unzoom]]:touch-manipulation [&_[data-rmiz-btn-unzoom]]:appearance-none [&_[data-rmiz-btn-unzoom]]:rounded-[50%] [&_[data-rmiz-btn-unzoom]]:border-none [&_[data-rmiz-btn-unzoom]]:bg-foreground/70 [&_[data-rmiz-btn-unzoom]]:p-2 [&_[data-rmiz-btn-unzoom]]:text-background [&_[data-rmiz-btn-unzoom]]:outline-offset-2",
-      "[&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:pointer-events-none [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:absolute [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:size-px [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:overflow-hidden [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:whitespace-nowrap [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:[clip-path:inset(50%)] [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:[clip:rect(0_0_0_0)]",
-      "[&_[data-rmiz-btn-zoom]]:absolute [&_[data-rmiz-btn-zoom]]:top-2.5 [&_[data-rmiz-btn-zoom]]:right-2.5 [&_[data-rmiz-btn-zoom]]:bottom-auto [&_[data-rmiz-btn-zoom]]:left-auto [&_[data-rmiz-btn-zoom]]:cursor-zoom-in",
-      "[&_[data-rmiz-btn-unzoom]]:absolute [&_[data-rmiz-btn-unzoom]]:top-5 [&_[data-rmiz-btn-unzoom]]:right-5 [&_[data-rmiz-btn-unzoom]]:bottom-auto [&_[data-rmiz-btn-unzoom]]:left-auto [&_[data-rmiz-btn-unzoom]]:z-[1] [&_[data-rmiz-btn-unzoom]]:cursor-zoom-out",
-      '[&_[data-rmiz-content="found"]_img]:cursor-zoom-in',
-      '[&_[data-rmiz-content="found"]_svg]:cursor-zoom-in',
-      '[&_[data-rmiz-content="found"]_[role="img"]]:cursor-zoom-in',
-      '[&_[data-rmiz-content="found"]_[data-zoom]]:cursor-zoom-in',
-      className
-    )}
-  >
-    <Zoom
-      classDialog={cn(
-        "[&::backdrop]:hidden",
-        "[&[open]]:fixed [&[open]]:m-0 [&[open]]:h-dvh [&[open]]:max-h-none [&[open]]:w-dvw [&[open]]:max-w-none [&[open]]:overflow-hidden [&[open]]:border-0 [&[open]]:bg-transparent [&[open]]:p-0",
-        "[&_[data-rmiz-modal-overlay]]:absolute [&_[data-rmiz-modal-overlay]]:inset-0 [&_[data-rmiz-modal-overlay]]:transition-all",
-        '[&_[data-rmiz-modal-overlay="hidden"]]:bg-transparent',
-        '[&_[data-rmiz-modal-overlay="visible"]]:bg-background/80 [&_[data-rmiz-modal-overlay="visible"]]:backdrop-blur-md',
-        "[&_[data-rmiz-modal-content]]:relative [&_[data-rmiz-modal-content]]:size-full",
-        "[&_[data-rmiz-modal-img]]:absolute [&_[data-rmiz-modal-img]]:origin-top-left [&_[data-rmiz-modal-img]]:cursor-zoom-out [&_[data-rmiz-modal-img]]:transition-transform",
-        "motion-reduce:[&_[data-rmiz-modal-img]]:transition-none motion-reduce:[&_[data-rmiz-modal-overlay]]:transition-none",
-        backdropClassName
-      )}
-      {...props}
-    />
-  </div>
-);

package/packages/image-zoom/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "@loveui/image-zoom",
-  "description": "Image zoom is a component that allows you to zoom in on an image.",
-  "version": "0.1.0",
-  "dependencies": {
-    "@loveui/shadcn-ui": "^0.1.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-medium-image-zoom": "^5.4.0"
-  },
-  "devDependencies": {
-    "@loveui/typescript-config": "^0.1.0",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.1",
-    "typescript": "^5.9.3"
-  },
-  "files": [
-    "dist",
-    "*.ts",
-    "*.tsx",
-    "*.css",
-    "*.mdx"
-  ]
-}

package/packages/image-zoom/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "@loveui/typescript-config/nextjs.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@loveui/*": ["../*"],
-      "@/components/*": ["../shadcn-ui/components/*"],
-      "@/lib/*": ["../shadcn-ui/lib/*"]
-    }
-  },
-  "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}