@bouko/react 2.4.8 → 2.5.0

package/dist/components/button/normal.d.ts

@@ -1,12 +1,11 @@
 import { ReactNode } from "react";
-export declare type ButtonProps = {
+import { Component } from "../../core/types";
+export declare type ButtonProps = Component & {
     variant?: "primary" | "outline" | "ghost";
     size?: "xs" | "sm" | "md" | "lg";
-    style?: string;
     icon?: ReactNode;
     action?: () => void;
     disabled?: boolean;
-    children: ReactNode;
 };
 export declare function Button({ size, variant, style, icon, action, disabled, children }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/components/layout/fade.d.ts

@@ -2,5 +2,5 @@ import { Component } from "../../core/types";
 declare type Props = Component & {
     gradient?: string;
 };
-export default function FadeBox({ style, gradient, children }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function FadeBox({ style, gradient, children }: Props): import("react/jsx-runtime").JSX.Element;
+export default FadeBox;

package/dist/components/layout/fade.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, tv } from "@bouko/style";
-export default function FadeBox({ style, gradient, children }) {
+export function FadeBox({ style, gradient, children }) {
     const direction = "left";
     return (_jsxs("div", { className: cn("relative", style), children: [children, _jsx("div", { className: cn(styles({ direction }), gradient) }, void 0)] }, void 0));
 }
@@ -12,3 +12,4 @@ const styles = tv({
         }
     }
 });
+export default FadeBox;

package/dist/components/layout/flex.d.ts

@@ -1,4 +1,4 @@
-import { Component } from "../../core/types";
+import type { Component } from "../../core/types";
 declare type Props = Component & {
     center?: boolean;
     centerX?: boolean;
@@ -11,6 +11,6 @@ declare type Props = Component & {
  * @param {ReactNode} children - Child elements to render inside the row.
  * @param {Props} opts - Variant options for styling.
 **/
-export declare const RowBox: ({ style, children, ...opts }: Props) => import("react/jsx-runtime").JSX.Element | null;
-export declare const ColumnBox: ({ style, children, ...opts }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export declare function RowBox({ style, children, ...opts }: Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function ColumnBox({ style, children, ...opts }: Props): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/layout/flex.js

@@ -7,16 +7,16 @@ import { cn, tv } from "@bouko/style";
  * @param {ReactNode} children - Child elements to render inside the row.
  * @param {Props} opts - Variant options for styling.
 **/
-export const RowBox = ({ style, children, ...opts }) => {
+export function RowBox({ style, children, ...opts }) {
     if (!children)
         return null;
     return (_jsx("div", { className: cn(row(opts), style), children: children }, void 0));
-};
-export const ColumnBox = ({ style, children, ...opts }) => {
+}
+export function ColumnBox({ style, children, ...opts }) {
     if (!children)
         return null;
     return (_jsx("div", { className: cn(column(opts), style), children: children }, void 0));
-};
+}
 /**
  * Styling variants for flex options.
  *

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

@@ -1,12 +1,14 @@
-declare type Props = {
+/// <reference types="react" />
+declare type Props<T> = {
     style?: Styles;
     placeholder?: string;
-    action: (query: string) => void;
+    trigger?: React.ReactNode;
+    submit: (query: string) => Promise<T>;
 };
 declare type Styles = {
     container?: string;
     input?: string;
-    trigger: string;
+    trigger?: string;
 };
-export declare function SearchBar({ style, placeholder, action }: Props): import("react/jsx-runtime").JSX.Element;
+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,14 +1,28 @@
 "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 { FadeBox } from "./layout/fade";
 import { Button } from "./button/normal";
-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), action: () => action(query), children: ["GO ", _jsx(AnglesRight, {}, void 0)] }, void 0)] }, void 0));
+import { Input } from "@bouko/form";
+import { mergeStyles } from "@bouko/style";
+import { toast } from "@bouko/notify";
+export function SearchBar({ style = {}, placeholder, trigger, submit }) {
+    const [query, setQuery] = useState("");
+    const styles = mergeStyles(base, style);
+    const search = async () => {
+        if (query === "")
+            return;
+        try {
+            await submit(query);
+        }
+        catch (err) {
+            toast.error(err.message);
+        }
+    };
+    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 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"
+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/waveform/index.d.ts

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

package/dist/components/waveform/index.js

@@ -0,0 +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));
+}

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

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

package/dist/components/waveform/patterns.js

@@ -0,0 +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();
+}

package/dist/core/types.d.ts

@@ -1,10 +1,9 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 /**
  * Common props for React components.
  *
- * @property style - Tailwind class name(s)
- * @property children - React children nodes
- * @property action - Executes on click
+ * @property `Component` - Component with Tailwind style(s) and children.
+ * @property `Clickable` - Component that executes a callback when clicked.
 **/
 export declare type Component = {
     style?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "2.4.8",
+  "version": "2.5.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -21,13 +21,16 @@
 
   "dependencies": {
     "@bouko/audio": "^0.1.0",
+    "@bouko/form": "^0.5.7",
     "@bouko/style": "^0.1.7",
+    "@wavesurfer/react": "^1.0.11",
     "clsx": "^2.1.1",
     "file-type": "^21.0.0",
     "framer-motion": "^12.23.6",
     "ms": "^2.1.3",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^1.0.0",
+    "wavesurfer.js": "^7.10.1",
     "zod": "^4.0.13"
   },