@bouko/react 2.4.3 → 2.4.5

package/dist/core/functions.js

@@ -1,79 +1,79 @@
-import { fileTypeFromBuffer } from "file-type";
-export const getFilesData = (files) => Promise.all(files.map((file) => {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => {
-            const base64 = reader.result?.toString().split(",")[1]; // Remove data prefix
-            return resolve({
-                filename: file.name,
-                mimetype: file.type,
-                data: base64,
-            });
-        };
-        reader.onerror = reject;
-        reader.readAsDataURL(file);
-    });
-}));
-export const getFileData = (file) => new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-        const base64 = reader.result?.toString().split(",")[1]; // Remove data prefix
-        return resolve({
-            filename: file.name,
-            mimetype: file.type,
-            data: base64,
-        });
-    };
-    reader.onerror = reject;
-    reader.readAsDataURL(file);
-});
-async function detectFileExtension(buffer) {
-    const type = await fileTypeFromBuffer(buffer);
-    if (!type)
-        return null;
-    return type;
-}
-export const bufferToFile = async (buffer, name) => {
-    const type = await detectFileExtension(buffer);
-    if (!type)
-        throw new Error("Couldn't get type from buffer");
-    return new File([buffer], `${name ?? "file"}.${type.ext}`, {
-        type: type.mime,
-        lastModified: Date.now()
-    });
-};
-export const getAudioDuration = (file) => {
-    return new Promise((resolve, reject) => {
-        const url = URL.createObjectURL(file);
-        const audio = new Audio(url);
-        audio.addEventListener("loadedmetadata", () => {
-            const durationMs = audio.duration * 1000;
-            URL.revokeObjectURL(url);
-            resolve(durationMs);
-        });
-        audio.addEventListener("error", (e) => {
-            URL.revokeObjectURL(url);
-            reject(new Error("Failed to load audio metadata"));
-        });
-    });
-};
-export async function getBase64(image) {
-    if (image.startsWith("data:")) {
-        return image; // already a base64 data URL
-    }
-    const res = await fetch(image);
-    const blob = await res.blob();
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-            if (typeof reader.result === "string") {
-                resolve(reader.result);
-            }
-            else {
-                reject(new Error("Failed to read image as base64"));
-            }
-        };
-        reader.onerror = reject;
-        reader.readAsDataURL(blob);
-    });
-}
+import { fileTypeFromBuffer } from "file-type";
+export const getFilesData = (files) => Promise.all(files.map((file) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            const base64 = reader.result?.toString().split(",")[1]; // Remove data prefix
+            return resolve({
+                filename: file.name,
+                mimetype: file.type,
+                data: base64,
+            });
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+}));
+export const getFileData = (file) => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+        const base64 = reader.result?.toString().split(",")[1]; // Remove data prefix
+        return resolve({
+            filename: file.name,
+            mimetype: file.type,
+            data: base64,
+        });
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+});
+async function detectFileExtension(buffer) {
+    const type = await fileTypeFromBuffer(buffer);
+    if (!type)
+        return null;
+    return type;
+}
+export const bufferToFile = async (buffer, name) => {
+    const type = await detectFileExtension(buffer);
+    if (!type)
+        throw new Error("Couldn't get type from buffer");
+    return new File([buffer], `${name ?? "file"}.${type.ext}`, {
+        type: type.mime,
+        lastModified: Date.now()
+    });
+};
+export const getAudioDuration = (file) => {
+    return new Promise((resolve, reject) => {
+        const url = URL.createObjectURL(file);
+        const audio = new Audio(url);
+        audio.addEventListener("loadedmetadata", () => {
+            const durationMs = audio.duration * 1000;
+            URL.revokeObjectURL(url);
+            resolve(durationMs);
+        });
+        audio.addEventListener("error", (e) => {
+            URL.revokeObjectURL(url);
+            reject(new Error("Failed to load audio metadata"));
+        });
+    });
+};
+export async function getBase64(image) {
+    if (image.startsWith("data:")) {
+        return image; // already a base64 data URL
+    }
+    const res = await fetch(image);
+    const blob = await res.blob();
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            if (typeof reader.result === "string") {
+                resolve(reader.result);
+            }
+            else {
+                reject(new Error("Failed to read image as base64"));
+            }
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+    });
+}

package/dist/core/types.d.ts

@@ -1,11 +1,15 @@
-import { ReactNode } from "react";
-/**
- * Common props for React components.
- *
- * @property style - Tailwind class name(s) (optional)
- * @property children - React children nodes (optional)
-**/
-export declare type Component = {
-    style?: string;
-    children?: ReactNode;
-};
+import { ReactNode } from "react";
+/**
+ * Common props for React components.
+ *
+ * @property style - Tailwind class name(s)
+ * @property children - React children nodes
+ * @property action - Executes on click
+**/
+export type Component = {
+    style?: string;
+    children?: ReactNode;
+};
+export type Clickable = {
+    action: () => void;
+};

package/dist/core/types.js

@@ -1,2 +1,2 @@
-export {};
-// clean
+export {};
+// clean

package/dist/hooks/audio/sound.d.ts

@@ -1 +1 @@
-export default function useSound(filename?: string): import("use-sound/dist/types").PlayFunction | undefined;
+export default function useSound(filename?: string): import("use-sound/dist/types").PlayFunction | undefined;

package/dist/hooks/audio/sound.js

@@ -1,6 +1,6 @@
-import { default as base } from "use-sound";
-export default function useSound(filename) {
-    if (!filename)
-        return;
-    return base(filename)[0];
-}
+import { default as base } from "use-sound";
+export default function useSound(filename) {
+    if (!filename)
+        return;
+    return base(filename)[0];
+}

package/dist/hooks/clock/interval.d.ts

@@ -1,8 +1,8 @@
-declare type Props = {
-    action: () => Promise<boolean | void>;
-    duration: number;
-    deps: unknown[];
-    oops?: (x: string) => void;
-};
-export default function useInterval({ action, duration, deps, oops }: Props): void;
-export {};
+type Props = {
+    action: () => Promise<boolean | void>;
+    duration: number;
+    deps: unknown[];
+    oops?: (x: string) => void;
+};
+export default function useInterval({ action, duration, deps, oops }: Props): void;
+export {};

package/dist/hooks/clock/interval.js

@@ -1,25 +1,25 @@
-"use client";
-import { useEffect, useRef } from "react";
-export default function useInterval({ action, duration, deps = [], oops }) {
-    const ref = useRef(async () => false);
-    useEffect(() => {
-        ref.current = action;
-    }, [action]);
-    useEffect(() => {
-        if (deps.some(v => v === undefined || v === null))
-            return;
-        const tick = async () => {
-            try {
-                const stop = await ref.current();
-                if (stop && id)
-                    clearInterval(id);
-            }
-            catch (err) {
-                oops?.(err.message);
-            }
-        };
-        const id = setInterval(tick, duration);
-        tick();
-        return () => clearInterval(id);
-    }, [duration, ...deps]);
-}
+"use client";
+import { useEffect, useRef } from "react";
+export default function useInterval({ action, duration, deps = [], oops }) {
+    const ref = useRef(async () => false);
+    useEffect(() => {
+        ref.current = action;
+    }, [action]);
+    useEffect(() => {
+        if (deps.some(v => v === undefined || v === null))
+            return;
+        const tick = async () => {
+            try {
+                const stop = await ref.current();
+                if (stop && id)
+                    clearInterval(id);
+            }
+            catch (err) {
+                oops?.(err.message);
+            }
+        };
+        const id = setInterval(tick, duration);
+        tick();
+        return () => clearInterval(id);
+    }, [duration, ...deps]);
+}

package/dist/hooks/color.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    variable: string;
+    color: string;
+    original: string;
+};
+export default function useColor({ variable, color, original }: Props): void;
+export {};

package/dist/hooks/color.js

@@ -0,0 +1,8 @@
+"use client";
+import { useEffect } from "react";
+export default function useColor({ variable, color, original }) {
+    useEffect(() => {
+        document.documentElement.style.setProperty(`--${variable}`, color);
+        return () => document.documentElement.style.setProperty(`--${variable}`, original);
+    }, []);
+}

package/dist/hooks/element/container.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-export default function useContainer(): {
-    ref: import("react").RefObject<HTMLDivElement | null>;
-    container: HTMLElement | null | undefined;
-};
+export default function useContainer(): {
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    container: HTMLElement | null | undefined;
+};

package/dist/hooks/element/container.js

@@ -1,7 +1,7 @@
-"use client";
-import { useRef } from "react";
-export default function useContainer() {
-    const ref = useRef(null);
-    const container = ref.current?.parentElement;
-    return { ref, container };
-}
+"use client";
+import { useRef } from "react";
+export default function useContainer() {
+    const ref = useRef(null);
+    const container = ref.current?.parentElement;
+    return { ref, container };
+}

package/dist/hooks/element/resize.d.ts

@@ -1 +1 @@
-export default function useResizeObserver(element: HTMLElement | null | undefined, action: () => void): void;
+export default function useResizeObserver(element: HTMLElement | null | undefined, action: () => void): void;

package/dist/hooks/element/resize.js

@@ -1,12 +1,12 @@
-"use client";
-import { useEffect } from "react";
-export default function useResizeObserver(element, action) {
-    useEffect(() => {
-        if (!element)
-            return;
-        const observer = new ResizeObserver(action);
-        observer.observe(element);
-        action();
-        return () => observer.disconnect();
-    }, [element, action]);
-}
+"use client";
+import { useEffect } from "react";
+export default function useResizeObserver(element, action) {
+    useEffect(() => {
+        if (!element)
+            return;
+        const observer = new ResizeObserver(action);
+        observer.observe(element);
+        action();
+        return () => observer.disconnect();
+    }, [element, action]);
+}

package/dist/hooks/index.d.ts

@@ -1,4 +1,4 @@
-export { default as useContainer } from "./element/container";
-export { default as useResize } from "./element/resize";
-export { default as useInterval } from "./clock/interval";
-export { default as useSound } from "./audio/sound";
+export { default as useContainer } from "./element/container";
+export { default as useResize } from "./element/resize";
+export { default as useInterval } from "./clock/interval";
+export { default as useSound } from "./audio/sound";

package/dist/hooks/index.js

@@ -1,4 +1,4 @@
-export { default as useContainer } from "./element/container";
-export { default as useResize } from "./element/resize";
-export { default as useInterval } from "./clock/interval";
-export { default as useSound } from "./audio/sound";
+export { default as useContainer } from "./element/container";
+export { default as useResize } from "./element/resize";
+export { default as useInterval } from "./clock/interval";
+export { default as useSound } from "./audio/sound";

package/dist/index.d.ts

@@ -1,15 +1,14 @@
-export { default as Input } from "./components/input";
-export { default as TextArea } from "./components/textarea";
-export { default as Select } from "./components/select";
-export { default as MultipleChoice } from "./components/multiple-choice";
-export { default as Attachment } from "./components/attachment";
-export { default as CheckBox } from "./components/checkbox";
-export { default as FadeCarousel } from "./components/fade-carousel";
-export * from "./components";
-export * from "./components/button";
-export * from "./components/search-bar";
-export * from "./core/types";
-export * from "./core/functions";
-export * from "./core/format";
-export * from "./components/form/functions";
-export * from "./hooks";
+export { default as Input } from "./components/input";
+export { default as TextArea } from "./components/textarea";
+export { default as Select } from "./components/select";
+export { default as MultipleChoice } from "./components/multiple-choice";
+export { default as Attachment } from "./components/attachment";
+export { default as CheckBox } from "./components/checkbox";
+export { default as FadeCarousel } from "./components/fade-carousel";
+export * from "./components";
+export * from "./components/search-bar";
+export * from "./core/types";
+export * from "./core/functions";
+export * from "./core/format";
+export * from "./components/form/functions";
+export * from "./hooks";

package/dist/index.js

@@ -1,15 +1,14 @@
-export { default as Input } from "./components/input";
-export { default as TextArea } from "./components/textarea";
-export { default as Select } from "./components/select";
-export { default as MultipleChoice } from "./components/multiple-choice";
-export { default as Attachment } from "./components/attachment";
-export { default as CheckBox } from "./components/checkbox";
-export { default as FadeCarousel } from "./components/fade-carousel";
-export * from "./components";
-export * from "./components/button";
-export * from "./components/search-bar";
-export * from "./core/types";
-export * from "./core/functions";
-export * from "./core/format";
-export * from "./components/form/functions";
-export * from "./hooks";
+export { default as Input } from "./components/input";
+export { default as TextArea } from "./components/textarea";
+export { default as Select } from "./components/select";
+export { default as MultipleChoice } from "./components/multiple-choice";
+export { default as Attachment } from "./components/attachment";
+export { default as CheckBox } from "./components/checkbox";
+export { default as FadeCarousel } from "./components/fade-carousel";
+export * from "./components";
+export * from "./components/search-bar";
+export * from "./core/types";
+export * from "./core/functions";
+export * from "./core/format";
+export * from "./components/form/functions";
+export * from "./hooks";

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "2.4.3",
+  "version": "2.4.5",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",