@bouko/react 2.5.6 → 2.5.8

package/dist/components/list/variants/number.d.ts

@@ -1,10 +1,10 @@
-import { type ReactNode } from "react";
-interface Props {
-    style?: string;
-    marker?: string;
-    title?: string;
-    items: ReactNode[];
-    centerMarker?: boolean;
-}
-export default function NumberList({ style, marker, title, items, centerMarker }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+import { type ReactNode } from "react";
+interface Props {
+    style?: string;
+    marker?: string;
+    title?: string;
+    items: ReactNode[];
+    centerMarker?: boolean;
+}
+export default function NumberList({ style, marker, title, items, centerMarker }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/list/variants/number.js

@@ -1,18 +1,18 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Item from "../item";
-import { Animation } from "../../animate";
-import { cn } from "@bouko/style";
-;
-export default function NumberList({ style, marker, title, items, centerMarker }) {
-    return (_jsxs(Animation, { style: cn(styles.base, style), children: [!!title && _jsx("span", { className: styles.title, children: title }, void 0), _jsx(Animation, { style: cn(styles.base, style, !!title && "ml-2"), children: items.map((x, i) => (_jsx(Item, { marker: _jsx(Marker, { style: marker, x: i + 1 }, void 0), content: x, index: i, centerMarker: centerMarker }, i))) }, "content")] }, "list"));
-}
-function Marker({ style, x }) {
-    return (_jsx("div", { className: cn(styles.marker, style), children: _jsx("span", { className: styles.label, children: x }, void 0) }, void 0));
-}
-const styles = {
-    base: "flex flex-col gap-6 w-full text-primary-dark",
-    title: "mb-1 text-base text-primary",
-    marker: "flex justify-center items-center mt-1 mr-6 min-w-7 w-7 aspect-square bg-radial-[at_50%_75%] from-accent-light to-accent to-accent-dark to-90% border border-accent-darker rounded-full shadow-glow-soft",
-    label: "font-bold text-background-lighter select-none"
-};
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Item from "../item";
+import { Animation } from "../../animate";
+import { cn } from "@bouko/style";
+;
+export default function NumberList({ style, marker, title, items, centerMarker }) {
+    return (_jsxs(Animation, { style: cn(styles.base, style), children: [!!title && _jsx("span", { className: styles.title, children: title }), _jsx(Animation, { style: cn(styles.base, style, !!title && "ml-2"), children: items.map((x, i) => (_jsx(Item, { marker: _jsx(Marker, { style: marker, x: i + 1 }), content: x, index: i, centerMarker: centerMarker }, i))) }, "content")] }, "list"));
+}
+function Marker({ style, x }) {
+    return (_jsx("div", { className: cn(styles.marker, style), children: _jsx("span", { className: styles.label, children: x }) }));
+}
+const styles = {
+    base: "flex flex-col gap-6 w-full text-primary-dark",
+    title: "mb-1 text-base text-primary",
+    marker: "flex justify-center items-center mt-1 mr-6 min-w-7 w-7 aspect-square bg-radial-[at_50%_75%] from-accent-light to-accent to-accent-dark to-90% border border-accent-darker rounded-full shadow-glow-soft",
+    label: "font-bold text-background-lighter select-none"
+};

package/dist/components/multiple-choice.d.ts

@@ -1,2 +1,2 @@
-import { type OptionField } from "./form/types";
-export default function MultipleChoice<T>({ id, label, options, style, value, update, required }: OptionField<string>): import("react/jsx-runtime").JSX.Element;
+import { type OptionField } from "./form/types";
+export default function MultipleChoice<T>({ id, label, options, style, value, update, required }: OptionField<string>): import("react/jsx-runtime").JSX.Element;

package/dist/components/multiple-choice.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Field from "./field";
-import { cn } from "@bouko/style";
-export default function MultipleChoice({ id, label, options, style, value, update, required = true }) {
-    return (_jsx(Field, { style: style, label: label, required: required, children: _jsx("div", { className: styles.options, children: options.map((x, i) => (_jsxs("div", { className: styles.item, children: [_jsx(Dot, { ...x, active: x.id === value, select: () => id ? update(x.id) : null }, void 0), x.label] }, i))) }, void 0) }, void 0));
-}
-const Dot = ({ active, select }) => (_jsx("div", { className: cn(styles.dot, active && "bg-accent border-accent-dark"), onClick: select }, void 0));
-const styles = {
-    options: "flex shrink-0 flex-col gap-1 mt-px w-full",
-    item: "flex items-center gap-3 text-sm",
-    dot: "size-3 bg-background-dark/50 hover:bg-background-dark duration-200 cursor-pointer border border-background-darker rounded-full"
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Field from "./field";
+import { cn } from "@bouko/style";
+export default function MultipleChoice({ id, label, options, style, value, update, required = true }) {
+    return (_jsx(Field, { style: style, label: label, required: required, children: _jsx("div", { className: styles.options, children: options.map((x, i) => (_jsxs("div", { className: styles.item, children: [_jsx(Dot, { ...x, active: x.id === value, select: () => id ? update(x.id) : null }), x.label] }, i))) }) }));
+}
+const Dot = ({ active, select }) => (_jsx("div", { className: cn(styles.dot, active && "bg-accent border-accent-dark"), onClick: select }));
+const styles = {
+    options: "flex shrink-0 flex-col gap-1 mt-px w-full",
+    item: "flex items-center gap-3 text-sm",
+    dot: "size-3 bg-background-dark/50 hover:bg-background-dark duration-200 cursor-pointer border border-background-darker rounded-full"
+};

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,12 @@
+"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/components/search-bar.d.ts

@@ -1,14 +1,13 @@
-/// <reference types="react" />
-declare type Props<T> = {
-    style?: Styles;
-    placeholder?: string;
-    trigger?: React.ReactNode;
-    submit: (query: string) => Promise<T>;
-};
-declare type Styles = {
-    container?: string;
-    input?: string;
-    trigger?: string;
-};
-export declare function SearchBar<T>({ style, placeholder, trigger, submit }: Props<T>): import("react/jsx-runtime").JSX.Element;
-export {};
+type Props<T> = {
+    style?: Styles;
+    placeholder?: string;
+    trigger?: React.ReactNode;
+    submit: (query: string) => Promise<T>;
+};
+type Styles = {
+    container?: string;
+    input?: string;
+    trigger?: string;
+};
+export declare function SearchBar<T>({ style, placeholder, trigger, submit }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/search-bar.js

@@ -1,22 +1,22 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { RowBox } from "./layout/flex";
-import { FadeBox } from "./layout/fade";
-import { Button } from "./button/normal";
-import Input from "./input";
-import { mergeStyles } from "@bouko/style";
-export function SearchBar({ style = {}, placeholder, trigger, submit }) {
-    const [query, setQuery] = useState("");
-    const styles = mergeStyles(base, style);
-    const search = async () => {
-        if (query === "")
-            return;
-        await submit(query);
-    };
-    return (_jsxs(RowBox, { style: styles.container, children: [_jsx(FadeBox, { style: "grow", gradient: "from-slate-950", children: _jsx(Input, { variant: "ghost", style: styles.input, placeholder: placeholder, value: query, update: setQuery, onEnter: search }, void 0) }, void 0), trigger && (_jsx(Button, { variant: "ghost", style: style?.trigger, action: search, children: trigger }, void 0))] }, void 0));
-}
-const base = {
-    container: "items-center gap-5 w-xl max-w-full pl-5 pr-4 py-3 bg-slate-950 border border-border rounded-md",
-    input: "text-lg tracking-wide"
-};
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { RowBox } from "./layout/flex";
+import { FadeBox } from "./layout/fade";
+import { Button } from "./button/normal";
+import Input from "./input";
+import { mergeStyles } from "@bouko/style";
+export function SearchBar({ style = {}, placeholder, trigger, submit }) {
+    const [query, setQuery] = useState("");
+    const styles = mergeStyles(base, style);
+    const search = async () => {
+        if (query === "")
+            return;
+        await submit(query);
+    };
+    return (_jsxs(RowBox, { style: styles.container, children: [_jsx(FadeBox, { style: "grow", gradient: "from-slate-950", children: _jsx(Input, { variant: "ghost", style: styles.input, placeholder: placeholder, value: query, update: setQuery, onEnter: search }) }), trigger && (_jsx(Button, { variant: "ghost", style: style?.trigger, action: search, children: trigger }))] }));
+}
+const base = {
+    container: "items-center gap-5 w-xl max-w-full pl-5 pr-4 py-3 bg-slate-950 border border-border rounded-md",
+    input: "text-lg tracking-wide"
+};

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,16 +1,16 @@
-import type { Component } from "../../core/types";
-declare 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;
+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,28 +1,28 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { 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: style, style: styles(color), children: children }, void 0));
-}
-const styles = (color) => ({
-    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;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { 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: style, style: styles(color), children: children }));
+}
+const styles = (color) => ({
+    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 "@bouko/form";
-declare type Props = {
-    style?: string;
-    accept?: string[];
-    update: SetState<File>;
-};
-export declare function FileUploader({ style, accept, update }: Props): import("react/jsx-runtime").JSX.Element;
-export default FileUploader;
+import type { SetState } from "@bouko/form";
+type Props = {
+    style?: string;
+    accept?: string[];
+    update: SetState<File>;
+};
+export declare function FileUploader({ style, accept, update }: Props): import("react/jsx-runtime").JSX.Element;
+export default FileUploader;

package/dist/components/upload/file.js

@@ -1,23 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { useDropzone } from "react-dropzone";
-import { cn } from "@bouko/style";
-import PaperClip from "../../assets/icons/paperclip.svg";
-export function FileUploader({ style, accept = [], update }) {
-    const onDrop = useCallback((files) => {
-        if (files.length > 0)
-            update(files[0]);
-    }, []);
-    const { getRootProps, getInputProps, isDragActive, inputRef } = useDropzone({
-        onDrop
-    });
-    const upload = () => inputRef.current?.click();
-    const save = (e) => update((e.target.files ?? [])[0]);
-    return (_jsxs("div", { className: cn(styles.container, isDragActive && "bg-background-light/40 border-border-light", style), onClick: upload, ...getRootProps(), 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, ...getInputProps() }, 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"
-};
-export default FileUploader;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+import { cn } from "@bouko/style";
+import PaperClip from "../../assets/icons/paperclip.svg";
+export function FileUploader({ style, accept = [], update }) {
+    const onDrop = useCallback((files) => {
+        if (files.length > 0)
+            update(files[0]);
+    }, []);
+    const { getRootProps, getInputProps, isDragActive, inputRef } = useDropzone({
+        onDrop
+    });
+    const upload = () => inputRef.current?.click();
+    const save = (e) => update((e.target.files ?? [])[0]);
+    return (_jsxs("div", { className: cn(styles.container, isDragActive && "bg-background-light/40 border-border-light", style), onClick: upload, ...getRootProps(), 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, ...getInputProps() })] }));
+}
+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"
+};
+export default FileUploader;

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

@@ -1,8 +1,8 @@
-import { type GenericPlugin } from "wavesurfer.js/dist/base-plugin";
-declare type Props = {
-    file: File;
-    height: number;
-    plugins: GenericPlugin[];
-};
-export default function Waveform({ file, height, plugins }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+import { type GenericPlugin } from "wavesurfer.js/dist/base-plugin";
+type Props = {
+    file: File;
+    height: number;
+    plugins: GenericPlugin[];
+};
+export default function Waveform({ file, height, plugins }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/waveform/index.js

@@ -1,11 +1,11 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { squiggly } from "./patterns";
-import { default as Player } from "@wavesurfer/react";
-export default function Waveform({ file, height, plugins }) {
-    const url = useMemo(() => URL.createObjectURL(file), [file]);
-    const plugins2 = useMemo(() => plugins, [plugins]);
-    const waves = useMemo(() => squiggly, []);
-    return (_jsx(Player, { height: height, url: url, waveColor: "#1c1d23", progressColor: "#0085e4", cursorWidth: 2, renderFunction: waves, plugins: plugins2 }, void 0));
-}
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { squiggly } from "./patterns";
+import { default as Player } from "@wavesurfer/react";
+export default function Waveform({ file, height, plugins }) {
+    const url = useMemo(() => URL.createObjectURL(file), [file]);
+    const plugins2 = useMemo(() => plugins, [plugins]);
+    const waves = useMemo(() => squiggly, []);
+    return (_jsx(Player, { height: height, url: url, waveColor: "#1c1d23", progressColor: "#0085e4", cursorWidth: 2, renderFunction: waves, plugins: plugins2 }));
+}

package/dist/components/waveform/patterns.d.ts

@@ -1 +1 @@
-export declare function squiggly(channels: (Float32Array | number[])[], ctx: CanvasRenderingContext2D): void;
+export declare function squiggly(channels: (Float32Array | number[])[], ctx: CanvasRenderingContext2D): void;

package/dist/components/waveform/patterns.js

@@ -1,27 +1,27 @@
-export function squiggly(channels, ctx) {
-    const { width, height } = ctx.canvas;
-    const scale = channels[0].length / width;
-    const step = 12;
-    ctx.translate(0, height / 2);
-    ctx.strokeStyle = ctx.fillStyle;
-    ctx.lineWidth = 3;
-    ctx.beginPath();
-    for (let i = 0; i < width; i += step * 2) {
-        const index = Math.floor(i * scale);
-        const value = Math.abs(channels[0][index]);
-        let x = i;
-        let y = value * height;
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, y);
-        ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, true);
-        ctx.lineTo(x + step, 0);
-        x = x + step;
-        y = -y;
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, y);
-        ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, false);
-        ctx.lineTo(x + step, 0);
-    }
-    ctx.stroke();
-    ctx.closePath();
-}
+export function squiggly(channels, ctx) {
+    const { width, height } = ctx.canvas;
+    const scale = channels[0].length / width;
+    const step = 12;
+    ctx.translate(0, height / 2);
+    ctx.strokeStyle = ctx.fillStyle;
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+    for (let i = 0; i < width; i += step * 2) {
+        const index = Math.floor(i * scale);
+        const value = Math.abs(channels[0][index]);
+        let x = i;
+        let y = value * height;
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, y);
+        ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, true);
+        ctx.lineTo(x + step, 0);
+        x = x + step;
+        y = -y;
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, y);
+        ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, false);
+        ctx.lineTo(x + step, 0);
+    }
+    ctx.stroke();
+    ctx.closePath();
+}

package/dist/core/classes.js

@@ -0,0 +1 @@
+"use strict";

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;