@bouko/react 2.0.3 → 2.0.5

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

@@ -11,13 +11,6 @@ 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;
-export declare const ColumnBox: ({ style, children, ...opts }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const RowBox: ({ style, children, ...opts }: Props) => import("react/jsx-runtime").JSX.Element | undefined;
+export declare const ColumnBox: ({ style, children, ...opts }: Props) => import("react/jsx-runtime").JSX.Element | undefined;
 export {};
-/**
- * Problems
- *
- * - Perfect `Component`
- * - Perfect `cn`
- * - Perfect `tv`
-**/ 

package/dist/components/layout/flex.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cn, tv } from "@bouko/style";
 /**
  * Flex containers with configurable alignment and styling.
@@ -8,14 +8,12 @@ import { cn, tv } from "@bouko/style";
  * @param {Props} opts - Variant options for styling.
 **/
 export const RowBox = ({ style, children, ...opts }) => {
-    if (!children)
-        return _jsx(_Fragment, {});
-    return (_jsx("div", { className: cn(row(opts), style), children: children }));
+    if (children)
+        return (_jsx("div", { className: cn(row(opts), style), children: children }));
 };
 export const ColumnBox = ({ style, children, ...opts }) => {
-    if (!children)
-        return _jsx(_Fragment, {});
-    return (_jsx("div", { className: cn(column(opts), style), children: children }));
+    if (children)
+        return (_jsx("div", { className: cn(column(opts), style), children: children }));
 };
 /**
  * Styling variants for flex options.

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

@@ -1,3 +1 @@
-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,5 +1,4 @@
 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) },
@@ -9,7 +8,6 @@ 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");
 const isWrapped = (x, wrapper) => x.startsWith(wrapper) && x.endsWith(wrapper);
-export const rn = (...elements) => (_jsx(Fragment, { children: elements.map((x, i) => (_jsx(Fragment, { children: x }, i))) }));
 export const formatText = (text) => {
     const parts = text
         .split(WRAPPED_TEXT_REGEX)

package/dist/core/types.d.ts

@@ -1,11 +1,11 @@
-import { ReactNode, ReactElement } from "react";
-export type Renderable = ReactElement | string | null;
+import { ReactNode } from "react";
+/**
+ * Common props for React components.
+ *
+ * @property style - Tailwind class name(s) (optional)
+ * @property children - React children nodes (optional)
+**/
 export type Component = {
     style?: string;
     children?: ReactNode;
 };
-export type Attachment = {
-    filename: string;
-    mimetype: string;
-    data: string;
-};

package/dist/core/types.js

@@ -1 +1,2 @@
 export {};
+// clean

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

@@ -2,7 +2,7 @@
 
   "name": "@bouko/react",
 
-  "version": "2.0.3",
+  "version": "2.0.5",
 
   "main": "./dist/index.js",
 
@@ -36,13 +36,13 @@
 
   "dependencies": {
 
-    "@bouko/style": "^0.1.5",
+    "@bouko/style": "^0.1.6",
 
     "clsx": "^2.1.1",
 
     "framer-motion": "^12.23.6",
 
-    "tailwind-merge": "^3.3.0",
+    "tailwind-merge": "^3.3.1",
 
     "tailwind-variants": "^1.0.0",