@bouko/react 1.9.5 → 1.9.7

package/dist/components/form/footer.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Button } from "../button";
-import { RowBox } from "../flex";
+import { RowBox } from "../layout/flex";
 import CheckCircle from "./assets/check-circle.svg";
 import Spinner from "./assets/spinner.svg";
 export default function FormFooter({ data, validator, submit, clear }) {

package/dist/components/form/index.js

@@ -7,7 +7,7 @@ import Spinner from "../../assets/icons/spinner.svg";
 import XCircle from "../../assets/icons/x-circle.svg";
 export * from "./functions";
 export * from "./types";
-import { RowBox } from "../flex";
+import { RowBox } from "../layout/flex";
 import Input from "../input";
 import Select from "../select";
 import TextArea from "../textarea";

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
-export { default as Heading, HeadingProps } from "./layout/heading";
+export { default as Heading } from "./layout/heading";
 export { default as Separator } from "./layout/separator";
+export * from "./layout/flex";
 export { default as Badge } from "./text/badge";
 export { default as Dropdown } from "./dropdown/normal";
 export { default as FileUploader } from "./upload/file";

package/dist/components/index.js

@@ -1,5 +1,6 @@
 export { default as Heading } from "./layout/heading";
 export { default as Separator } from "./layout/separator";
+export * from "./layout/flex";
 export { default as Badge } from "./text/badge";
 export { default as Dropdown } from "./dropdown/normal";
 export { default as FileUploader } from "./upload/file";

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

@@ -0,0 +1,23 @@
+import { Component } from "../../core/types";
+type Props = Component & {
+    center?: boolean;
+    centerX?: boolean;
+    centerY?: boolean;
+};
+/**
+ * Flex containers with configurable alignment and styling.
+ *
+ * @param {string} style - Additional styles for container.
+ * @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 {};
+/**
+ * Problems
+ *
+ * - Perfect `Component`
+ * - Perfect `cn`
+ * - Perfect `tv`
+**/ 

package/dist/components/layout/flex.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, tv } from "@bouko/style";
+/**
+ * Flex containers with configurable alignment and styling.
+ *
+ * @param {string} style - Additional styles for container.
+ * @param {ReactNode} children - Child elements to render inside the row.
+ * @param {Props} opts - Variant options for styling.
+**/
+export const RowBox = ({ style, children, ...opts }) => (_jsx("div", { className: cn(row(opts), style), children: children }));
+export const ColumnBox = ({ style, children, ...opts }) => (_jsx("div", { className: cn(column(opts), style), children: children }));
+/**
+ * Styling variants for flex options.
+ *
+ * @param {boolean} centerX - center children horizontally
+ * @param {boolean} centerY - center children vertically
+ * @param {boolean} center - center children on both axis
+**/
+const row = tv({
+    base: "flex",
+    variants: {
+        centerX: { true: "justify-center" },
+        centerY: { true: "items-center" },
+        center: { true: "items-center justify-center" }
+    }
+});
+const column = tv({
+    base: "flex flex-col",
+    variants: {
+        centerX: { true: "items-center" },
+        centerY: { true: "justify-center" },
+        center: { true: "items-center justify-center" }
+    }
+});

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

@@ -1,18 +1,17 @@
-import { type ReactNode } from "react";
+import { ReactNode } from "react";
+type Options = {
+    size?: "md" | "lg";
+    align?: "left" | "center";
+};
 type Styles = {
     container?: string;
     text?: string;
     title?: string;
     subtitle?: string;
 };
-type Options = {
-    size?: "md" | "lg";
-    align?: "left" | "center";
-};
-export type HeadingProps = {
+type Props = {
     options?: Options;
     styles?: Styles;
-    container?: string;
     badge?: string;
     icon?: ReactNode;
     title: ReactNode;
@@ -21,5 +20,5 @@ export type HeadingProps = {
     subtitle?: ReactNode;
     reverse?: boolean;
 };
-export default function Heading({ styles, options, container, badge, icon, title, subtitle, reverse }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export default function Heading({ styles, options, badge, icon, title, subtitle, reverse }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/layout/heading.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RowBox, ColumnBox } from "../flex";
-import Badge from "../text/badge";
 import { cn, tv } from "@bouko/style";
-export default function Heading({ styles = {}, options = {}, container, badge, icon, title, subtitle, reverse }) {
+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, 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 })] })] }));
+    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 })] })] }));
 }
 const base = {
     container: "gap-2 items-center",

package/dist/components/search-bar.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, useState } from "react";
-import { RowBox } from "./flex";
+import { RowBox } from "./layout/flex";
 import { Button } from "./button";
 export function SearchBar({ button, placeholder, action }) {
     const [query, search] = useState("");

package/dist/core/types.d.ts

@@ -1,3 +1,8 @@
+import { ReactNode } from "react";
+export type Component = {
+    style?: string;
+    children: ReactNode;
+};
 export type Attachment = {
     filename: string;
     mimetype: string;

package/dist/hooks/index.d.ts

@@ -1,3 +1,2 @@
 export { default as useContainer } from "./element/container";
 export { default as useResize } from "./element/resize";
-export { default as useColor } from "./color";

package/dist/hooks/index.js

@@ -1,3 +1,2 @@
 export { default as useContainer } from "./element/container";
 export { default as useResize } from "./element/resize";
-export { default as useColor } from "./color";

package/dist/index.d.ts

@@ -6,7 +6,6 @@ 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/flex";
 export * from "./components/button";
 export * from "./components/search-bar";
 export * from "./core/types";

package/dist/index.js

@@ -6,7 +6,6 @@ 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/flex";
 export * from "./components/button";
 export * from "./components/search-bar";
 export * from "./core/types";

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "1.9.5",
+  "version": "1.9.7",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",

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/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);
-    }, []);
-}