@inspirecn/react 1.0.0

package/dist/hooks/use-debounce.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A custom hook that debounces a value.
+ *
+ * @param value - The value to debounce
+ * @param delay - The delay in milliseconds (default: 500ms)
+ * @returns The debounced value
+ *
+ * @example
+ * ```tsx
+ * const [searchTerm, setSearchTerm] = useState('');
+ * const debouncedSearchTerm = useDebounce(searchTerm, 300);
+ *
+ * // debouncedSearchTerm will only update 300ms after searchTerm stops changing
+ * useEffect(() => {
+ *   // Perform search or other expensive operation with debouncedSearchTerm
+ * }, [debouncedSearchTerm]);
+ * ```
+ */
+export declare function useDebounce<T>(value: T, delay?: number): T;
+//# sourceMappingURL=use-debounce.d.ts.map

package/dist/hooks/use-debounce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounce.d.ts","sourceRoot":"","sources":["../../src/hooks/use-debounce.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,SAAM,GAAG,CAAC,CAgBvD"}

package/dist/hooks/use-debounce.js

@@ -0,0 +1,15 @@
+import { useState as r, useEffect as c } from "react";
+function i(e, t = 500) {
+  const [o, u] = r(e);
+  return c(() => {
+    const n = setTimeout(() => {
+      u(e);
+    }, t);
+    return () => {
+      clearTimeout(n);
+    };
+  }, [e, t]), o;
+}
+export {
+  i as useDebounce
+};

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1,2 @@
+export declare function useIsMobile(): boolean;
+//# sourceMappingURL=use-mobile.d.ts.map

package/dist/hooks/use-mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,YAgB1B"}

package/dist/hooks/use-mobile.js

@@ -0,0 +1,14 @@
+import * as o from "react";
+const e = 768;
+function r() {
+  const [s, n] = o.useState(void 0);
+  return o.useEffect(() => {
+    const t = window.matchMedia(`(max-width: ${e - 1}px)`), i = () => {
+      n(window.innerWidth < e);
+    };
+    return t.addEventListener("change", i), n(window.innerWidth < e), () => t.removeEventListener("change", i);
+  }, []), !!s;
+}
+export {
+  r as useIsMobile
+};

package/dist/hooks/useDragScroll.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const useDragScroll: () => {
+    ref: React.RefObject<HTMLDivElement | null>;
+    onMouseDown: (e: React.MouseEvent) => void;
+};
+//# sourceMappingURL=useDragScroll.d.ts.map

package/dist/hooks/useDragScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragScroll.d.ts","sourceRoot":"","sources":["../../src/hooks/useDragScroll.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,aAAa;;qBAGA,KAAK,CAAC,UAAU;CA+BzC,CAAC"}

package/dist/hooks/useDragScroll.js

@@ -0,0 +1,26 @@
+import m from "react";
+const p = () => {
+  const t = m.useRef(null);
+  return {
+    ref: t,
+    onMouseDown: (n) => {
+      const e = t.current;
+      if (!e) return;
+      const o = {
+        left: e.scrollLeft,
+        top: e.scrollTop,
+        x: n.clientX,
+        y: n.clientY
+      }, s = (c) => {
+        const l = c.clientX - o.x, u = c.clientY - o.y;
+        e.scrollTop = o.top - u, e.scrollLeft = o.left - l, e.style.cursor = "grabbing", e.style.userSelect = "none";
+      }, r = () => {
+        e.style.cursor = "grab", e.style.removeProperty("user-select"), document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", r);
+      };
+      document.addEventListener("mousemove", s), document.addEventListener("mouseup", r);
+    }
+  };
+};
+export {
+  p as useDragScroll
+};

package/dist/hooks/useImageCrop.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import { type Crop, type PixelCrop } from "react-image-crop";
+import "react-image-crop/dist/ReactCrop.css";
+export type UseImageCropOptions = {
+    aspectRatio?: number;
+    minDimension?: number;
+    outputFormat?: "image/png" | "image/jpeg" | "image/webp";
+    quality?: number;
+    fileNamePrefix?: string;
+};
+/**
+ * The useImageCrop hook is used to crop images with configurable options
+ * @param options - Configuration options for the image crop hook
+ * @returns Object containing all crop-related state and functions
+ */
+export declare const useImageCrop: (options?: UseImageCropOptions) => {
+    imgSrc: string;
+    setImgSrc: React.Dispatch<React.SetStateAction<string>>;
+    imgRef: React.RefObject<HTMLImageElement | null>;
+    crop: Crop | undefined;
+    completedCrop: PixelCrop | undefined;
+    setCrop: React.Dispatch<React.SetStateAction<Crop | undefined>>;
+    setCompletedCrop: React.Dispatch<React.SetStateAction<PixelCrop | undefined>>;
+    onSelectFile: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onImageLoad: (e: React.SyntheticEvent<HTMLImageElement>) => void;
+    getCroppedImage: () => Promise<{
+        base64Image: string;
+        file: File;
+    } | null>;
+    aspectRatio: number;
+    minDimension: number;
+    originalFileName: string;
+    config: {
+        aspectRatio: number;
+        minDimension: number;
+        outputFormat: "image/png" | "image/jpeg" | "image/webp";
+        quality: number;
+        fileNamePrefix: string;
+    };
+};
+//# sourceMappingURL=useImageCrop.d.ts.map

package/dist/hooks/useImageCrop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImageCrop.d.ts","sourceRoot":"","sources":["../../src/hooks/useImageCrop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAEL,KAAK,IAAI,EAET,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAC;AAE1B,OAAO,qCAAqC,CAAC;AAE7C,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAUF;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,UAAS,mBAAwB;;;;;;;;sBActD,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;qBAoCnC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;2BAqBE,OAAO,CAAC;QACpD,WAAW,EAAE,MAAM,CAAC;QACpB,IAAI,EAAE,IAAI,CAAC;KACZ,GAAG,IAAI,CAAC;;;;;qBA9FK,MAAM;sBACL,MAAM;sBACN,WAAW,GAAG,YAAY,GAAG,YAAY;iBAC9C,MAAM;wBACC,MAAM;;CAiLxB,CAAC"}

package/dist/hooks/useImageCrop.js

@@ -0,0 +1,84 @@
+import { useMemo as R, useState as g, useRef as D, useCallback as p } from "react";
+import { makeAspectCrop as $, centerCrop as v } from "react-image-crop";
+import "react-image-crop/dist/ReactCrop.css";
+const L = {
+  aspectRatio: 1,
+  minDimension: 150,
+  outputFormat: "image/png",
+  quality: 0.9,
+  fileNamePrefix: "image"
+}, q = (f = {}) => {
+  const e = R(() => ({
+    ...L,
+    ...f
+  }), [f]), [x, h] = g(""), d = D(null), [y, w] = g(), [m, C] = g(), l = D(""), c = R(() => new FileReader(), []), F = p((n) => {
+    var r, i;
+    const t = (r = n.target.files) == null ? void 0 : r[0];
+    if (!t)
+      return;
+    if (!t.type.startsWith("image/")) {
+      console.warn("Selected file is not an image");
+      return;
+    }
+    const o = Date.now(), a = ((i = t.name) == null ? void 0 : i.split(".")[0]) || "unknown";
+    l.current = `${e.fileNamePrefix}_${a}_${o}`, c.onload = () => {
+      var s;
+      h(((s = c.result) == null ? void 0 : s.toString()) ?? "");
+    }, c.onerror = () => {
+      console.error("Error reading file");
+    }, c.readAsDataURL(t), n.target.value = "";
+  }, [e.fileNamePrefix, c]), S = p((n) => {
+    const {
+      width: t,
+      height: o
+    } = n.currentTarget, a = e.minDimension / t * 100, r = $({
+      unit: "%",
+      width: a
+    }, e.aspectRatio, t, o), i = v(r, t, o);
+    w(i);
+  }, [e.aspectRatio, e.minDimension]), I = p(async () => {
+    const n = d.current;
+    if (!n)
+      return null;
+    const t = m ?? {
+      x: 0,
+      y: 0,
+      width: e.minDimension,
+      height: e.minDimension
+    }, o = n.naturalWidth / n.width, a = n.naturalHeight / n.height, r = document.createElement("canvas"), i = r.getContext("2d");
+    if (!i)
+      return null;
+    const s = window.devicePixelRatio;
+    r.width = t.width * s * o, r.height = t.height * s * a, i.setTransform(s, 0, 0, s, 0, 0), i.imageSmoothingQuality = "high", i.imageSmoothingEnabled = !0, i.drawImage(n, t.x * o, t.y * a, t.width * o, t.height * a, 0, 0, t.width * o, t.height * a);
+    const u = r.toDataURL(e.outputFormat, e.quality);
+    if (u) {
+      const N = Buffer.from(u.replace(/^data:image\/\w+;base64,/, ""), "base64"), b = e.outputFormat.split("/")[1], P = `${l.current}.${b}`, A = new Uint8Array(N), E = new File([A], P, {
+        type: e.outputFormat
+      });
+      return {
+        base64Image: u,
+        file: E
+      };
+    }
+    return null;
+  }, [m, e.minDimension, e.outputFormat, e.quality]);
+  return {
+    imgSrc: x,
+    setImgSrc: h,
+    imgRef: d,
+    crop: y,
+    completedCrop: m,
+    setCrop: w,
+    setCompletedCrop: C,
+    onSelectFile: F,
+    onImageLoad: S,
+    getCroppedImage: I,
+    aspectRatio: e.aspectRatio,
+    minDimension: e.minDimension,
+    originalFileName: l.current,
+    config: e
+  };
+};
+export {
+  q as useImageCrop
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './hooks';
+export * from './lib';
+export * from './theme';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC"}