@bouko/react 1.9.9 → 2.0.1

package/dist/components/badge.d.ts

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

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

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

@@ -0,0 +1,8 @@
+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/layout/heading.d.ts

@@ -1,24 +1,31 @@
 import { ReactNode } from "react";
-type Options = {
-    size?: "md" | "lg";
-    align?: "left" | "center";
+type Props = {
+    badge?: string;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    style?: Styles;
 };
 type Styles = {
     container?: string;
-    text?: string;
+    badge?: string;
     title?: string;
     subtitle?: string;
 };
-type Props = {
-    options?: Options;
-    styles?: Styles;
-    badge?: string;
-    icon?: ReactNode;
-    title: ReactNode;
-    size?: "md" | "lg";
-    align?: "left" | "center";
-    subtitle?: ReactNode;
-    reverse?: boolean;
-};
-export default function Heading({ styles, options, badge, icon, title, subtitle, reverse }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * Text heading with badge, title, subtitle.
+ *
+ * @param {string} badge - Little note above the title (optional).
+ * @param {ReactNode} title - Main title content.
+ * @param {ReactNode} subtitle - Subtitle content (optional).
+ * @param {Styles} style - Additional styles (optional).
+**/
+export default function Heading({ badge, title, subtitle, style }: Props): import("react/jsx-runtime").JSX.Element;
 export {};
+/**
+ * Problems
+ *
+ * - Perfect `mergeStyles`
+ * - Perfect `RowBox`
+ * - Perfect `ColumnBox`
+ * - Perfect `Badge`
+**/ 

package/dist/components/layout/heading.js

@@ -1,45 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, tv } from "@bouko/style";
-import { RowBox, ColumnBox } from "..";
-import Badge from "../text/badge";
-export default function Heading({ styles = {}, options = {}, badge, icon, title, subtitle, reverse }) {
-    const custom = test(options);
-    return (_jsxs(RowBox, { style: cn(base.container, styles.container), children: [icon, _jsxs(ColumnBox, { style: cn(custom.subcontainer(), reverse && "flex-col-reverse"), children: [badge && _jsx(Badge, { style: base.badge, children: badge }), _jsx(RowBox, { style: cn(custom.title(), styles.title, styles.text), children: title }), subtitle && _jsx(RowBox, { style: cn(custom.subtitle(), styles.subtitle, styles.text), children: subtitle })] })] }));
+import { mergeStyles } from "@bouko/style";
+import { RowBox, ColumnBox } from "./flex";
+import { default as Badge } from "../text/badge";
+/**
+ * Text heading with badge, title, subtitle.
+ *
+ * @param {string} badge - Little note above the title (optional).
+ * @param {ReactNode} title - Main title content.
+ * @param {ReactNode} subtitle - Subtitle content (optional).
+ * @param {Styles} style - Additional styles (optional).
+**/
+export default function Heading({ badge, title, subtitle, style = {} }) {
+    const styles = mergeStyles(base, style);
+    return (_jsxs(ColumnBox, { style: styles.container, children: [_jsx(Badge, { style: styles.badge, children: badge }), _jsx(RowBox, { style: styles.title, children: title }), _jsx(RowBox, { style: styles.subtitle, children: subtitle })] }));
 }
 const base = {
-    container: "gap-2 items-center",
+    container: "items-center",
     badge: "mb-2",
+    title: "items-center gap-2 text-xl sm:text-2xl 2xl:text-3xl font-bold text-primary",
+    subtitle: "items-center gap-2 max-sm:text-sm 2xl:text-lg text-primary-light dark:text-primary-dark"
 };
-const test = tv({
-    slots: {
-        subcontainer: "grow",
-        title: "items-center gap-2 text-xl font-bold text-primary",
-        subtitle: "items-center gap-2 font-semibold text-primary-light dark:text-primary-dark"
-    },
-    defaultVariants: {
-        size: "md",
-        align: "center"
-    },
-    variants: {
-        size: {
-            md: {
-                title: "text-xl 2xl:text-2xl",
-                subtitle: "text-base 2xl:text-lg"
-            },
-            lg: {
-                subcontainer: "gap-3",
-                title: "text-5xl 2xl:text-6xl",
-                subtitle: "text-sm sm:text-base 2xl:text-lg"
-            }
-        },
-        align: {
-            left: {
-                subcontainer: "items-start"
-            },
-            center: {
-                subcontainer: "items-center",
-                subtitle: "justify-center text-center"
-            }
-        }
-    }
-});

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/core/functions.d.ts

@@ -1,3 +1,4 @@
 export declare const getFileData: (files: File[]) => Promise<unknown[]>;
+export declare const getAudioDuration: (file: File) => Promise<number>;
 export declare const getEnv: (key: string) => string;
 export declare function getBase64(image: string): Promise<string>;

package/dist/core/functions.js

@@ -13,6 +13,21 @@ export const getFileData = (files) => Promise.all(files.map((file) => {
         reader.readAsDataURL(file);
     });
 }));
+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 const getEnv = (key) => {
     const value = process.env[key];
     if (!value)

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/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "1.9.9",
+  "version": "2.0.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -20,7 +20,7 @@
   },
 
   "dependencies": {
-    "@bouko/style": "^0.1.1",
+    "@bouko/style": "^0.1.3",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.6",
     "tailwind-merge": "^3.3.0",