@bouko/react 2.4.4 → 2.4.6

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

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/element/container.d.ts

@@ -1,4 +1,5 @@
-export default function useContainer(): {
-    ref: import("react").RefObject<HTMLDivElement | null>;
-    container: HTMLElement | null | undefined;
-};
+/// <reference types="react" />
+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.4",
+  "version": "2.4.6",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",

package/dist/assets/icons/check copy.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em">
-    <path 
-        d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" 
-        fill="currentColor" 
-    />
-</svg>

package/dist/assets/icons/check-circle copy.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
-    <path 
-        d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z" 
-        fill="currentColor" 
-    />
-</svg>

package/dist/assets/icons/chevron copy.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
-    <path 
-        d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" 
-        fill="currentColor" 
-    />
-</svg>

package/dist/assets/icons/paperclip copy.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em">
-    <path 
-        d="M364.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z" 
-        fill="currentColor" 
-    />
-</svg>

package/dist/assets/icons/spinner copy.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
-    <path 
-        d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z" 
-        fill="currentColor" 
-    />
-</svg>

package/dist/assets/icons/x-circle copy.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
-    <path 
-        d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" 
-        fill="currentColor" 
-    />
-</svg>

package/dist/components/badge.d.ts

@@ -1,5 +0,0 @@
-import type { ReactNode } from "react";
-export default function Badge({ style, children }: {
-    style?: string;
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/components/badge.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function Badge({ style, children }) {
-    return (_jsx("span", { className: "w-min px-3 py-1 bg-accent/20 border border-accent-dark rounded-full text-xs text-accent-dark font-semibold", children: children }));
-}

package/dist/components/flex.d.ts

@@ -1,16 +0,0 @@
-import type { ReactNode } from "react";
-type Props = Position & {
-    style?: string;
-    children: ReactNode;
-};
-type Position = {
-    center?: boolean;
-    centerX?: boolean;
-    centerY?: boolean;
-};
-export declare function ColumnBox({ style, center, centerX, centerY, children }: Props): import("react/jsx-runtime").JSX.Element;
-export declare function RowBox({ style, children }: {
-    style?: string;
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/flex.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "@bouko/style";
-export function ColumnBox({ style, center, centerX, centerY, children }) {
-    return (_jsx("div", { className: cn("flex flex-col", center && "items-center justify-center", centerX && "items-center", centerY && "justify-center", style), children: children }));
-}
-export function RowBox({ style, children }) {
-    return (_jsx("div", { className: cn("flex", style), children: children }));
-}

package/dist/components/form/fields.d.ts

@@ -1,16 +0,0 @@
-import { Field, Option } from "./types";
-export type FormBuilderField<T = unknown> = (Omit<Field<T>, "value" | "update"> & {
-    id: string;
-    element: string;
-    rows?: number;
-    placeholder?: string;
-    options?: Option[];
-})[][];
-type Props<T> = {
-    id?: string;
-    fields: FormBuilderField<T>;
-    data: T;
-    setField: (x: string, y: unknown) => void;
-};
-export default function Fields<T>({ fields, data, setField }: Props<T>): Promise<import("react/jsx-runtime").JSX.Element[]>;
-export {};

package/dist/components/form/fields.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { RowBox } from "../layout/flex";
-import Input from "../input";
-import Select from "../select";
-import TextArea from "../textarea";
-import MultipleChoice from "../multiple-choice";
-import Attachment from "../attachment";
-export default async function Fields({ fields, data, setField }) {
-    return fields.map((row, i) => (_jsx(RowBox, { style: "w-full gap-5 overflow-hidden", children: row.map(({ element, id, rows, label, placeholder, disabled, options, required, note }) => {
-            if (element === "input")
-                return (_jsx(Input, { id: id, styles: { container: "flex-1" }, label: label, placeholder: placeholder, value: data[id], update: x => setField(id, x), disabled: disabled, note: note, required: required }, id));
-            else if (element === "select")
-                return (_jsx(Select, { id: id, label: label, placeholder: placeholder, options: options || [], value: data[id], update: x => setField(id, x), note: note, required: required }, id));
-            else if (element === "textarea")
-                return (_jsx(TextArea, { id: id, label: label, placeholder: placeholder, rows: rows, value: data[id], update: x => setField(id, x), note: note, required: required }, id));
-            else if (element === "multiple-choice")
-                return (_jsx(MultipleChoice, { id: id, label: label, options: options || [], value: data[id], update: x => setField(id, x), note: note, required: required }, id));
-            else if (element === "attachment")
-                return (_jsx(Attachment, { id: id, label: label, value: data[id], update: x => setField(id, x), note: note, required: required }, id));
-        }) }, i)));
-}

package/dist/components/form/loaders.d.ts

@@ -1,3 +0,0 @@
-import { FormBuilderField } from "./fields";
-export declare function loadJson<T>(name: string): Promise<T>;
-export declare function loadForm<T>(name?: string): Promise<FormBuilderField<T>>;

package/dist/components/form/loaders.js

@@ -1,11 +0,0 @@
-"use server";
-import { promises as fs } from "fs";
-export async function loadJson(name) {
-    const file = await fs.readFile(process.cwd() + "/assets/" + name + ".json", "utf-8");
-    return JSON.parse(file);
-}
-export async function loadForm(name) {
-    if (!name)
-        throw new Error("Form not found");
-    return loadJson(`forms/${name}`);
-}

package/dist/components/form/test-next.d.ts

@@ -1 +0,0 @@
-export declare function loadJson<T>(name: string): Promise<T>;

package/dist/components/form/test-next.js

@@ -1,6 +0,0 @@
-"use server";
-import { promises as fs } from "fs";
-export async function loadJson(name) {
-    const file = await fs.readFile(process.cwd() + "/assets/" + name + ".json", "utf-8");
-    return JSON.parse(file);
-}

package/dist/components/search/index.d.ts

@@ -1,6 +0,0 @@
-type Props = {
-    placeholder?: string;
-    action: (query: string) => void;
-};
-export default function SearchBar({ placeholder, action }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/search/index.js

@@ -1,12 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { RowBox } from "../flex";
-import { Button } from "../button";
-export default function SearchBar({ placeholder, action }) {
-    const [query, search] = useState("");
-    return (_jsxs(RowBox, { style: styles.container, children: [_jsxs("div", { className: "relative grow", children: [_jsx("input", { className: "w-full outline-none lowercase text-lg placeholder-slate-500 tracking-wide", 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" })] }), _jsx(Button, { size: "sm", style: "gap-[0.4rem] font-extrabold py-1 px-3 font-mono", onClick: () => action(query), children: "GO" })] }));
-}
-const styles = {
-    container: "items-center gap-6 w-xl pl-5 pr-4 py-3 bg-slate-950 border border-border rounded-md"
-};

package/dist/hooks/color.d.ts

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

package/dist/hooks/color.js

@@ -1,8 +0,0 @@
-"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);
-    }, []);
-}