@bouko/react 2.4.2 → 2.4.4

package/dist/components/search-bar.d.ts

@@ -1,12 +1,12 @@
-declare type Props = {
-    style?: Styles;
-    placeholder?: string;
-    action: (query: string) => void;
-};
-declare type Styles = {
-    container?: string;
-    input?: string;
-    trigger: string;
-};
-export declare function SearchBar({ style, placeholder, action }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+type Props = {
+    style?: Styles;
+    placeholder?: string;
+    action: (query: string) => void;
+};
+type Styles = {
+    container?: string;
+    input?: string;
+    trigger: string;
+};
+export declare function SearchBar({ style, placeholder, action }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/search-bar.js

@@ -1,14 +1,14 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { cn } from "@bouko/style";
-import AnglesRight from "../assets/icons/angles-right.svg";
-import { RowBox } from "./layout/flex";
-import { Button } from "./button";
-export function SearchBar({ style, placeholder, action }) {
-    const [query, search] = useState("");
-    return (_jsxs(RowBox, { style: cn(styles.container, style?.container), children: [_jsxs("div", { className: "relative grow", children: [_jsx("input", { className: cn("w-full outline-none text-lg placeholder-slate-500 tracking-wide", style?.input), placeholder: placeholder, value: query, onChange: (e) => search(e.target.value), onKeyUp: (e) => e.key === "Enter" ? action(query) : null }, void 0), _jsx("div", { className: "absolute top-0 right-0 w-12 h-full bg-gradient-to-l from-slate-950" }, void 0)] }, void 0), _jsxs(Button, { size: "xs", style: cn("font-mono text-sm font-extrabold", style?.trigger), onClick: () => action(query), children: ["GO ", _jsx(AnglesRight, {}, void 0)] }, void 0)] }, void 0));
-}
-const styles = {
-    container: "items-center gap-6 w-xl max-w-full pl-5 pr-4 py-3 bg-slate-950 border border-border rounded-md"
-};
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "@bouko/style";
+import AnglesRight from "../assets/icons/angles-right.svg";
+import { RowBox } from "./layout/flex";
+import { Button } from "./button";
+export function SearchBar({ style, placeholder, action }) {
+    const [query, search] = useState("");
+    return (_jsxs(RowBox, { style: cn(styles.container, style?.container), children: [_jsxs("div", { className: "relative grow", children: [_jsx("input", { className: cn("w-full outline-none text-lg placeholder-slate-500 tracking-wide", style?.input), placeholder: placeholder, value: query, onChange: (e) => search(e.target.value), onKeyUp: (e) => e.key === "Enter" ? action(query) : null }), _jsx("div", { className: "absolute top-0 right-0 w-12 h-full bg-gradient-to-l from-slate-950" })] }), _jsxs(Button, { size: "xs", style: cn("font-mono text-sm font-extrabold", style?.trigger), onClick: () => action(query), children: ["GO ", _jsx(AnglesRight, {})] })] }));
+}
+const styles = {
+    container: "items-center gap-6 w-xl max-w-full pl-5 pr-4 py-3 bg-slate-950 border border-border rounded-md"
+};

package/dist/components/select.d.ts

@@ -1,6 +1,6 @@
-import { type OptionField } from "./form/types";
-declare type Props<T> = OptionField<T> & {
-    placeholder?: string;
-};
-export default function Select({ id, style, label, required, value, options, update, note }: Props<string>): import("react/jsx-runtime").JSX.Element;
-export {};
+import { type OptionField } from "./form/types";
+type Props<T> = OptionField<T> & {
+    placeholder?: string;
+};
+export default function Select({ id, style, label, required, value, options, update, note }: Props<string>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/select.js

@@ -1,24 +1,24 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import Chevron from "../assets/icons/chevron.svg";
-import { cn } from "@bouko/style";
-export default function Select({ id, style, label, required = true, value, options, update, note }) {
-    const [isOpen, setOpen] = useState(false);
-    const active = options.find(x => x.id === value);
-    const select = (x) => {
-        if (id)
-            update(x);
-        setOpen(false);
-    };
-    return (_jsxs("div", { className: cn(styles.container, style), children: [_jsxs("div", { className: styles.subcontainer, children: [label && _jsxs("span", { className: styles.label, children: [label, " ", !required ? _jsx("span", { className: "italic text-slate-400", children: "(optional)" }, void 0) : ""] }, void 0), _jsxs("div", { className: cn(styles.trigger, !active?.label && "capitalize"), onClick: () => setOpen(x => !x), children: [active ? active.label ?? active.id : "None", _jsx(Chevron, { className: cn("text-xs text-slate-400 duration-200", isOpen && "rotate-180") }, void 0)] }, void 0), note && !isOpen && _jsx("span", { className: styles.note, children: note }, void 0)] }, void 0), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: styles.dropdown, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: options.map(({ id, label }) => (_jsx("span", { className: cn("w-full p-2 border-l-3 border-transparent hover:text-blue-600 duration-200 cursor-pointer", active?.id === id && "border-blue-600 bg-blue-500/10", !label && "capitalize"), onClick: () => select(id), children: label ?? id }, id))) }, "dropdown")) }, void 0)] }, void 0));
-}
-const styles = {
-    container: "relative shrink-0 w-full",
-    subcontainer: "flex flex-col gap-1 w-full",
-    label: "text-xs text-slate-600",
-    trigger: "flex justify-between items-center px-3 py-2 bg-slate-200/50 hover:bg-slate-200/80 border border-slate-300 outline-blue-500 rounded text-sm duration-200 cursor-pointer",
-    dropdown: "absolute mt-2 z-50 flex flex-col gap-1 w-full bg-slate-100 rounded border border-slate-300 py-1 text-xs max-h-46 overflow-y-auto",
-    note: "mt-1 text-xs text-slate-500"
-};
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import Chevron from "../assets/icons/chevron.svg";
+import { cn } from "@bouko/style";
+export default function Select({ id, style, label, required = true, value, options, update, note }) {
+    const [isOpen, setOpen] = useState(false);
+    const active = options.find(x => x.id === value);
+    const select = (x) => {
+        if (id)
+            update(x);
+        setOpen(false);
+    };
+    return (_jsxs("div", { className: cn(styles.container, style), children: [_jsxs("div", { className: styles.subcontainer, children: [label && _jsxs("span", { className: styles.label, children: [label, " ", !required ? _jsx("span", { className: "italic text-slate-400", children: "(optional)" }) : ""] }), _jsxs("div", { className: cn(styles.trigger, !active?.label && "capitalize"), onClick: () => setOpen(x => !x), children: [active ? active.label ?? active.id : "None", _jsx(Chevron, { className: cn("text-xs text-slate-400 duration-200", isOpen && "rotate-180") })] }), note && !isOpen && _jsx("span", { className: styles.note, children: note })] }), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: styles.dropdown, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: options.map(({ id, label }) => (_jsx("span", { className: cn("w-full p-2 border-l-3 border-transparent hover:text-blue-600 duration-200 cursor-pointer", active?.id === id && "border-blue-600 bg-blue-500/10", !label && "capitalize"), onClick: () => select(id), children: label ?? id }, id))) }, "dropdown")) })] }));
+}
+const styles = {
+    container: "relative shrink-0 w-full",
+    subcontainer: "flex flex-col gap-1 w-full",
+    label: "text-xs text-slate-600",
+    trigger: "flex justify-between items-center px-3 py-2 bg-slate-200/50 hover:bg-slate-200/80 border border-slate-300 outline-blue-500 rounded text-sm duration-200 cursor-pointer",
+    dropdown: "absolute mt-2 z-50 flex flex-col gap-1 w-full bg-slate-100 rounded border border-slate-300 py-1 text-xs max-h-46 overflow-y-auto",
+    note: "mt-1 text-xs text-slate-500"
+};

package/dist/components/text/badge.d.ts

@@ -1,11 +1,16 @@
-import type { Component } from "../../core/types";
-declare type Props = Component & {
-    color?: string;
-};
-export declare const Badge: ({ style, color, children }: Props) => import("react/jsx-runtime").JSX.Element | null;
-export default Badge;
-/**
- * Problems:
- *
- * - Perfect `opacitize`
-**/ 
+import type { Component } from "../../core/types";
+type Props = Component & {
+    color?: string;
+};
+/**
+ * Color-themed badge component.
+ *
+ * To use a CSS variable it must exist and be passed in the
+ * form `--variable-name`. Any other format may cause unexpected
+ * results. CSS variables use 'color-mix' which is not supported in
+ * some old browsers such as Safari 15.3 and Internet Explorer.
+ *
+ * @param {string} color - Color of badge. (optional, default = accent)
+**/
+export declare function Badge({ style, color, children }: Props): import("react/jsx-runtime").JSX.Element | null;
+export default Badge;

package/dist/components/text/badge.js

@@ -1,18 +1,28 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn, css, opacitize } from "@bouko/style";
-export const Badge = ({ style, color = "var(--color-accent)", children }) => {
-    if (!children)
-        return null;
-    return (_jsx("span", { className: cn(styles(color), style), children: children }, void 0));
-};
-const styles = (color) => css({
-    width: "min-content",
-    padding: "0.25rem 0.75rem",
-    background: opacitize(color),
-    border: `1px solid ${color}`,
-    borderRadius: "100%",
-    fontSize: "0.75rem",
-    fontWeight: "600",
-    color: "var(--color-primary)"
-});
-export default Badge;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, css, opacitize } from "@bouko/style";
+/**
+ * Color-themed badge component.
+ *
+ * To use a CSS variable it must exist and be passed in the
+ * form `--variable-name`. Any other format may cause unexpected
+ * results. CSS variables use 'color-mix' which is not supported in
+ * some old browsers such as Safari 15.3 and Internet Explorer.
+ *
+ * @param {string} color - Color of badge. (optional, default = accent)
+**/
+export function Badge({ style, color = "--color-accent", children }) {
+    if (!children)
+        return null;
+    return (_jsx("span", { className: cn(styles(color), style), children: children }));
+}
+const styles = (color) => css({
+    width: "min-content",
+    padding: "0.25rem 0.75rem",
+    background: opacitize(color),
+    border: `1px solid var(${color})`,
+    borderRadius: "100%",
+    fontSize: "0.75rem",
+    fontWeight: "600",
+    color: "var(--color-primary)"
+});
+export default Badge;

package/dist/components/textarea.d.ts

@@ -1,7 +1,7 @@
-import { type Field as FieldProps } from "./form/types";
-declare type Props<T> = FieldProps<T> & {
-    rows?: number;
-    placeholder?: string;
-};
-export default function TextArea({ id, style, label, required, note, value, update, ...props }: Props<string>): import("react/jsx-runtime").JSX.Element;
-export {};
+import { type Field as FieldProps } from "./form/types";
+type Props<T> = FieldProps<T> & {
+    rows?: number;
+    placeholder?: string;
+};
+export default function TextArea({ id, style, label, required, note, value, update, ...props }: Props<string>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/textarea.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Field from "./field";
-export default function TextArea({ id, style, label, required = true, note, value, update, ...props }) {
-    return (_jsx(Field, { style: style, label: label, required: required, note: note, children: _jsx("textarea", { className: styles.textarea, onChange: ({ target: { value } }) => update(value), value: value ?? "", ...props }, void 0) }, void 0));
-}
-const styles = {
-    container: "flex flex-col gap-1 overflow-hidden",
-    label: "text-xs text-slate-600",
-    textarea: "px-3 py-2 bg-input border border-outline focus:border-outline-light rounded text-sm resize-none",
-    note: "mt-1 text-xs text-slate-500"
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Field from "./field";
+export default function TextArea({ id, style, label, required = true, note, value, update, ...props }) {
+    return (_jsx(Field, { style: style, label: label, required: required, note: note, children: _jsx("textarea", { className: styles.textarea, onChange: ({ target: { value } }) => update(value), value: value ?? "", ...props }) }));
+}
+const styles = {
+    container: "flex flex-col gap-1 overflow-hidden",
+    label: "text-xs text-slate-600",
+    textarea: "px-3 py-2 bg-input border border-outline focus:border-outline-light rounded text-sm resize-none",
+    note: "mt-1 text-xs text-slate-500"
+};

package/dist/components/upload/file.d.ts

@@ -1,8 +1,8 @@
-import type { SetState } from "../form/types";
-declare type Props = {
-    style?: string;
-    accept?: string[];
-    update: SetState<File>;
-};
-export default function FileUploader({ style, accept, update }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+import type { SetState } from "../form/types";
+type Props = {
+    style?: string;
+    accept?: string[];
+    update: SetState<File>;
+};
+export default function FileUploader({ style, accept, update }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/upload/file.js

@@ -1,15 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
-import { cn } from "@bouko/style";
-import PaperClip from "../../assets/icons/paperclip.svg";
-export default function FileUploader({ style, accept = [], update }) {
-    const ref = useRef(null);
-    const upload = () => ref.current?.click();
-    const save = (e) => update((e.target.files ?? [])[0]);
-    return (_jsxs("div", { className: cn(styles.container, style), onClick: upload, children: [_jsxs("span", { className: styles.title, children: [_jsx(PaperClip, {}, void 0), "Drag and drop a file, or"] }, void 0), _jsx("span", { className: styles.subtitle, children: "browse" }, void 0), _jsx("input", { type: "file", className: "hidden", onChange: save, accept: accept.join(","), multiple: false, ref: ref }, void 0)] }, void 0));
-}
-const styles = {
-    container: "flex flex-col justify-center items-center gap-1 w-full py-3 hover:bg-background-light/40 border-2 border-dashed border-border hover:border-border-light rounded overflow-hidden duration-200 cursor-pointer",
-    title: "flex gap-2 items-center font-semibold text-sm",
-    subtitle: "text-xs text-primary-darker"
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { cn } from "@bouko/style";
+import PaperClip from "../../assets/icons/paperclip.svg";
+export default function FileUploader({ style, accept = [], update }) {
+    const ref = useRef(null);
+    const upload = () => ref.current?.click();
+    const save = (e) => update((e.target.files ?? [])[0]);
+    return (_jsxs("div", { className: cn(styles.container, style), onClick: upload, children: [_jsxs("span", { className: styles.title, children: [_jsx(PaperClip, {}), "Drag and drop a file, or"] }), _jsx("span", { className: styles.subtitle, children: "browse" }), _jsx("input", { type: "file", className: "hidden", onChange: save, accept: accept.join(","), multiple: false, ref: ref })] }));
+}
+const styles = {
+    container: "flex flex-col justify-center items-center gap-1 w-full py-3 hover:bg-background-light/40 border-2 border-dashed border-border hover:border-border-light rounded overflow-hidden duration-200 cursor-pointer",
+    title: "flex gap-2 items-center font-semibold text-sm",
+    subtitle: "text-xs text-primary-darker"
+};

package/dist/core/format.d.ts

@@ -1,3 +1,3 @@
-import { ReactNode } from "react";
-export declare const rn: (...elements: ReactNode[]) => import("react/jsx-runtime").JSX.Element;
-export declare const formatText: (text: string) => import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from "react";
+export declare const rn: (...elements: ReactNode[]) => import("react/jsx-runtime").JSX.Element;
+export declare const formatText: (text: string) => import("react/jsx-runtime").JSX.Element;

package/dist/core/format.js

@@ -1,34 +1,34 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment } from "react";
-const delimiterConfig = [
-    { delimiter: "**", render: (text, key) => _jsx("span", { className: "font-bold", children: text }, key) },
-    { delimiter: "~~", render: (text, key) => _jsx("span", { className: "font-semibold", children: text }, key) },
-    { delimiter: "^^", render: (text, key) => _jsx("span", { className: "text-accent", children: text }, key) },
-];
-const escapeRegex = (str) => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
-const delimiters = delimiterConfig.map(({ delimiter }) => escapeRegex(delimiter) + ".*?" + escapeRegex(delimiter)).join("|");
-const WRAPPED_TEXT_REGEX = new RegExp(`(${delimiters})`, "g");
-export const rn = (...elements) => (_jsx(Fragment, { children: elements.map((x, i) => (_jsx(Fragment, { children: x }, i))) }, void 0));
-const isWrapped = (x, wrapper) => x.startsWith(wrapper) && x.endsWith(wrapper);
-export const formatText = (text) => {
-    const parts = text
-        .split(WRAPPED_TEXT_REGEX)
-        .filter(Boolean);
-    const formatted = parts.map((x, i) => {
-        if (isWrapped(x, "**")) {
-            // Remove only the first and last occurrence of the delimiter
-            const content = x.slice(2, -2);
-            return _jsx("span", { className: "font-bold", children: content }, i);
-        }
-        else if (isWrapped(x, "~~")) {
-            const content = x.slice(2, -2);
-            return _jsx("span", { className: "font-semibold", children: content }, i);
-        }
-        else if (isWrapped(x, "^^")) {
-            const content = x.slice(2, -2);
-            return _jsx("span", { className: "text-accent", children: content }, i);
-        }
-        return x;
-    });
-    return _jsx("span", { children: formatted }, void 0);
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+const delimiterConfig = [
+    { delimiter: "**", render: (text, key) => _jsx("span", { className: "font-bold", children: text }, key) },
+    { delimiter: "~~", render: (text, key) => _jsx("span", { className: "font-semibold", children: text }, key) },
+    { delimiter: "^^", render: (text, key) => _jsx("span", { className: "text-accent", children: text }, key) },
+];
+const escapeRegex = (str) => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+const delimiters = delimiterConfig.map(({ delimiter }) => escapeRegex(delimiter) + ".*?" + escapeRegex(delimiter)).join("|");
+const WRAPPED_TEXT_REGEX = new RegExp(`(${delimiters})`, "g");
+export const rn = (...elements) => (_jsx(Fragment, { children: elements.map((x, i) => (_jsx(Fragment, { children: x }, i))) }));
+const isWrapped = (x, wrapper) => x.startsWith(wrapper) && x.endsWith(wrapper);
+export const formatText = (text) => {
+    const parts = text
+        .split(WRAPPED_TEXT_REGEX)
+        .filter(Boolean);
+    const formatted = parts.map((x, i) => {
+        if (isWrapped(x, "**")) {
+            // Remove only the first and last occurrence of the delimiter
+            const content = x.slice(2, -2);
+            return _jsx("span", { className: "font-bold", children: content }, i);
+        }
+        else if (isWrapped(x, "~~")) {
+            const content = x.slice(2, -2);
+            return _jsx("span", { className: "font-semibold", children: content }, i);
+        }
+        else if (isWrapped(x, "^^")) {
+            const content = x.slice(2, -2);
+            return _jsx("span", { className: "text-accent", children: content }, i);
+        }
+        return x;
+    });
+    return _jsx("span", { children: formatted });
+};

package/dist/core/functions.d.ts

@@ -1,13 +1,13 @@
-export declare const getFilesData: (files: File[]) => Promise<{
-    filename: string;
-    mimetype: string;
-    data?: string | undefined;
-}[]>;
-export declare const getFileData: (file: File) => Promise<{
-    filename: string;
-    mimetype: string;
-    data?: string | undefined;
-}>;
-export declare const bufferToFile: (buffer: ArrayBuffer, name?: string | undefined) => Promise<File>;
-export declare const getAudioDuration: (file: File) => Promise<number>;
-export declare function getBase64(image: string): Promise<string>;
+export declare const getFilesData: (files: File[]) => Promise<{
+    filename: string;
+    mimetype: string;
+    data?: string;
+}[]>;
+export declare const getFileData: (file: File) => Promise<{
+    filename: string;
+    mimetype: string;
+    data?: string;
+}>;
+export declare const bufferToFile: (buffer: ArrayBuffer, name?: string) => Promise<File>;
+export declare const getAudioDuration: (file: File) => Promise<number>;
+export declare function getBase64(image: string): Promise<string>;

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 {};