@bouko/react 2.3.7 → 2.3.8

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

@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
-export type CarouselProps<T = ReactNode> = {
-    container?: string;
-    items: T[];
-    style?: string;
-};
-export declare function Carousel({ container, items, style }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from "react";
+export declare type CarouselProps<T = ReactNode> = {
+    container?: string;
+    items: T[];
+    style?: string;
+};
+export declare function Carousel({ container, items, style }: CarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/carousel/index.js

@@ -1,15 +1,15 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { cn } from "@bouko/style";
-export function Carousel({ container, items, style }) {
-    const [index, setIndex] = useState(0);
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setIndex((prev) => (prev + 1) % items.length);
-        }, 3000);
-        return () => clearInterval(interval);
-    }, []);
-    return (_jsx("div", { className: cn("flex items-center", container), children: _jsx(AnimatePresence, { mode: "wait", children: _jsx(motion.div, { transition: { duration: 0.5 }, initial: { opacity: 0, y: 5 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -5 }, layout: true, children: _jsx("div", { className: cn("w-full h-full", style), children: items[index] }) }, index) }) }));
-}
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { cn } from "@bouko/style";
+export function Carousel({ container, items, style }) {
+    const [index, setIndex] = useState(0);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setIndex((prev) => (prev + 1) % items.length);
+        }, 3000);
+        return () => clearInterval(interval);
+    }, []);
+    return (_jsx("div", { className: cn("flex items-center", container), children: _jsx(AnimatePresence, { mode: "wait", children: _jsx(motion.div, { transition: { duration: 0.5 }, initial: { opacity: 0, y: 5 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -5 }, layout: true, children: _jsx("div", { className: cn("w-full h-full", style), children: items[index] }, void 0) }, index) }, void 0) }, void 0));
+}

package/dist/components/checkbox.d.ts

@@ -1,8 +1,8 @@
-type Props = {
-    style?: string;
-    label: string;
-    value: boolean;
-    update: (x: boolean) => void;
-};
-export default function Checkbox({ style, label, value, update }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+declare type Props = {
+    style?: string;
+    label: string;
+    value: boolean;
+    update: (x: boolean) => void;
+};
+export default function Checkbox({ style, label, value, update }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/checkbox.js

@@ -1,13 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Check from "../assets/icons/check.svg";
-import { cn } from "@bouko/style";
-export default function Checkbox({ style, label, value, update }) {
-    const isChecked = !!value;
-    return (_jsxs("div", { className: cn(styles.container, style), children: [_jsx("div", { className: cn(styles.box, isChecked && "bg-accent"), onClick: () => update(!isChecked), children: isChecked && _jsx(Check, { className: styles.check }) }), _jsx("span", { className: styles.label, children: label })] }));
-}
-const styles = {
-    container: "flex gap-3 items-center",
-    box: "flex justify-center items-center size-4 min-w-4 hover:bg-accent border rounded border-border-light duration-200 cursor-pointer",
-    check: "size-2 text-background",
-    label: "text-xs text-primary-dark"
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Check from "../assets/icons/check.svg";
+import { cn } from "@bouko/style";
+export default function Checkbox({ style, label, value, update }) {
+    const isChecked = !!value;
+    return (_jsxs("div", { className: cn(styles.container, style), children: [_jsx("div", { className: cn(styles.box, isChecked && "bg-accent"), onClick: () => update(!isChecked), children: isChecked && _jsx(Check, { className: styles.check }, void 0) }, void 0), _jsx("span", { className: styles.label, children: label }, void 0)] }, void 0));
+}
+const styles = {
+    container: "flex gap-3 items-center",
+    box: "flex justify-center items-center size-4 min-w-4 hover:bg-accent border rounded border-border-light duration-200 cursor-pointer",
+    check: "size-2 text-background",
+    label: "text-xs text-primary-dark"
+};

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

@@ -1,10 +1,10 @@
-import { ReactNode } from "react";
-type Option = {
-    label: ReactNode;
-    action: () => void;
-};
-export default function Dropdown({ options, children }: {
-    options: Option[];
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-export {};
+import { ReactNode } from "react";
+declare type Option = {
+    label: ReactNode;
+    action: () => void;
+};
+export default function Dropdown({ options, children }: {
+    options: Option[];
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/dropdown/normal.js

@@ -1,19 +1,19 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-export default function Dropdown({ options, children }) {
-    const [isOpen, setOpen] = useState(false);
-    const boom = (action) => {
-        action();
-        setOpen(false);
-    };
-    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { onClick: () => setOpen(true), children: children }), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: styles.dropdown, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: options.map(({ label, action }, i) => (_jsx("div", { className: "cursor-pointer duration-200 hover:brightness-115", onClick: () => boom(action), children: label }, i))) }, "dropdown")) })] }));
-}
-const styles = {
-    container: "relative shrink-0",
-    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 items-end justify-end gap-1 w-full bg-slate-950 rounded border border-border-dark p-3 pr-4 text-sm max-h-46 overflow-y-auto"
-};
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+export default function Dropdown({ options, children }) {
+    const [isOpen, setOpen] = useState(false);
+    const boom = (action) => {
+        action();
+        setOpen(false);
+    };
+    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { onClick: () => setOpen(true), children: children }, void 0), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: styles.dropdown, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: options.map(({ label, action }, i) => (_jsx("div", { className: "cursor-pointer duration-200 hover:brightness-115", onClick: () => boom(action), children: label }, i))) }, "dropdown")) }, void 0)] }, void 0));
+}
+const styles = {
+    container: "relative shrink-0",
+    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 items-end justify-end gap-1 w-full bg-slate-950 rounded border border-border-dark p-3 pr-4 text-sm max-h-46 overflow-y-auto"
+};

package/dist/components/fade-carousel.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
-export default function FadeCarousel({ items }: {
-    items: ReactNode[];
-}): import("react/jsx-runtime").JSX.Element;
+import { type ReactNode } from "react";
+export default function FadeCarousel({ items }: {
+    items: ReactNode[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/fade-carousel.js

@@ -1,14 +1,14 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-export default function FadeCarousel({ items }) {
-    const [index, setIndex] = useState(0);
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setIndex((prev) => (prev + 1) % items.length);
-        }, 2000);
-        return () => clearInterval(interval);
-    }, []);
-    return (_jsx(AnimatePresence, { mode: "wait", children: _jsx(motion.div, { className: "absolute", transition: { duration: 0.5 }, initial: { opacity: 0, y: 5 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -5 }, children: items[index] }, index) }));
-}
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+export default function FadeCarousel({ items }) {
+    const [index, setIndex] = useState(0);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setIndex((prev) => (prev + 1) % items.length);
+        }, 2000);
+        return () => clearInterval(interval);
+    }, []);
+    return (_jsx(AnimatePresence, { mode: "wait", children: _jsx(motion.div, { className: "absolute", transition: { duration: 0.5 }, initial: { opacity: 0, y: 5 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -5 }, children: items[index] }, index) }, void 0));
+}

package/dist/components/field.d.ts

@@ -1,10 +1,10 @@
-import type { InputHTMLAttributes, ReactNode } from "react";
-type Props = InputHTMLAttributes<HTMLInputElement> & {
-    label?: string;
-    style?: string;
-    required?: boolean;
-    note?: ReactNode;
-    children: ReactNode;
-};
-export default function Field({ style, label, required, note, children }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+import type { InputHTMLAttributes, ReactNode } from "react";
+declare type Props = InputHTMLAttributes<HTMLInputElement> & {
+    label?: string;
+    style?: string;
+    required?: boolean;
+    note?: ReactNode;
+    children: ReactNode;
+};
+export default function Field({ style, label, required, note, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/field.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "@bouko/style";
-export default function Field({ style, label, required = true, note, children }) {
-    return (_jsxs("div", { className: cn(styles.container, style), children: [label && _jsxs("span", { className: styles.label, children: [label, " ", !required ? _jsx("span", { className: "italic text-slate-400", children: "(optional)" }) : ""] }), children, note && _jsx("span", { className: styles.note, children: note })] }));
-}
-const styles = {
-    container: "flex flex-col shrink-0 gap-1 w-full overflow-hidden",
-    label: "text-xs text-primary-dark",
-    note: "mt-1 text-xs text-slate-500 whitespace-pre-line"
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@bouko/style";
+export default function Field({ style, label, required = true, note, children }) {
+    return (_jsxs("div", { className: cn(styles.container, style), children: [label && _jsxs("span", { className: styles.label, children: [label, " ", !required ? _jsx("span", { className: "italic text-slate-400", children: "(optional)" }, void 0) : ""] }, void 0), children, note && _jsx("span", { className: styles.note, children: note }, void 0)] }, void 0));
+}
+const styles = {
+    container: "flex flex-col shrink-0 gap-1 w-full overflow-hidden",
+    label: "text-xs text-primary-dark",
+    note: "mt-1 text-xs text-slate-500 whitespace-pre-line"
+};

package/dist/components/form/types.d.ts

@@ -1,38 +1,38 @@
-import type { ReactNode, Dispatch, SetStateAction } from "react";
-export type SetState<T> = Dispatch<SetStateAction<T>>;
-export type FormSection<T> = {
-    data: T;
-    update: SetState<T>;
-    setField: (x: string, value: unknown) => void;
-    clear: () => void;
-};
-export type FormBuilderField<T = unknown> = (Omit<Field<T>, "value" | "update"> & {
-    id: string;
-    element: string;
-    rows?: number;
-    placeholder?: string;
-    options?: Option[];
-})[][];
-export type Field<T, K = string> = {
-    id?: string;
-    label?: string;
-    style?: string;
-    value?: K;
-    update: SetState<T>;
-    required?: boolean;
-    disabled?: boolean;
-    note?: ReactNode;
-};
-export type Option = {
-    id: string;
-    label?: string;
-    active?: boolean;
-    select?: () => void;
-};
-export type OptionField<T> = Field<T> & {
-    options: Option[];
-};
-export type Form<T> = {
-    data: T;
-};
-export type FormSubmit<T> = (data: T, clear?: () => void) => Promise<void>;
+import type { ReactNode, Dispatch, SetStateAction } from "react";
+export declare type SetState<T> = Dispatch<SetStateAction<T>>;
+export declare type FormSection<T> = {
+    data: T;
+    update: SetState<T>;
+    setField: (x: string, value: unknown) => void;
+    clear: () => void;
+};
+export declare type FormBuilderField<T = unknown> = (Omit<Field<T>, "value" | "update"> & {
+    id: string;
+    element: string;
+    rows?: number;
+    placeholder?: string;
+    options?: Option[];
+})[][];
+export declare type Field<T, K = string> = {
+    id?: string;
+    label?: string;
+    style?: string;
+    value?: K;
+    update: SetState<T>;
+    required?: boolean;
+    disabled?: boolean;
+    note?: ReactNode;
+};
+export declare type Option = {
+    id: string;
+    label?: string;
+    active?: boolean;
+    select?: () => void;
+};
+export declare type OptionField<T> = Field<T> & {
+    options: Option[];
+};
+export declare type Form<T> = {
+    data: T;
+};
+export declare type FormSubmit<T> = (data: T, clear?: () => void) => Promise<void>;

package/dist/components/form/types.js

@@ -1 +1 @@
-export {};
+export {};

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

@@ -1,29 +1,29 @@
-import { ReactNode } from "react";
-type Props = {
-    badge?: string;
-    title: ReactNode;
-    subtitle?: ReactNode;
-    style?: Styles;
-};
-type Styles = {
-    container?: string;
-    badge?: string;
-    title?: string;
-    subtitle?: string;
-};
-/**
- * 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 `Badge`
- * - Long `subtitle` style
-**/ 
+import { ReactNode } from "react";
+declare type Props = {
+    badge?: string;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    style?: Styles;
+};
+declare type Styles = {
+    container?: string;
+    badge?: string;
+    title?: string;
+    subtitle?: string;
+};
+/**
+ * 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 `Badge`
+ * - Long `subtitle` style
+**/ 

package/dist/components/heading/normal.js

@@ -1,22 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { mergeStyles } from "@bouko/style";
-import { RowBox, ColumnBox } from "../layout/flex";
-import { 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: "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-center text-primary-light dark:text-primary-dark"
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeStyles } from "@bouko/style";
+import { RowBox, ColumnBox } from "../layout/flex";
+import { 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 }, void 0), _jsx(RowBox, { style: styles.title, children: title }, void 0), _jsx(RowBox, { style: styles.subtitle, children: subtitle }, void 0)] }, void 0));
+}
+const base = {
+    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-center text-primary-light dark:text-primary-dark"
+};

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

@@ -1 +1 @@
-export default function PageHeading(): import("react/jsx-runtime").JSX.Element;
+export default function PageHeading(): import("react/jsx-runtime").JSX.Element;

package/dist/components/heading/page.js

@@ -1,5 +1,5 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-// bring from unvault
-export default function PageHeading() {
-    return (_jsx(_Fragment, {}));
-}
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+// bring from unvault
+export default function PageHeading() {
+    return (_jsx(_Fragment, {}, void 0));
+}

package/dist/components/index.d.ts

@@ -1,12 +1,11 @@
-export { default as Separator } from "./layout/separator";
-export { default as FadeBox } from "./layout/fade";
-export { default as Heading } from "./heading/normal";
-export { default as PageHeading } from "./heading/page";
-export * from "./layout/flex";
-export { default as LoadButton } from "./button/load";
-export { default as Badge } from "./text/badge";
-export { default as Dropdown } from "./dropdown/normal";
-export { default as FileUploader } from "./upload/file";
-export * from "./list";
-export * from "./form";
-export * from "./carousel";
+export { default as Separator } from "./layout/separator";
+export { default as FadeBox } from "./layout/fade";
+export { default as Heading } from "./heading/normal";
+export { default as PageHeading } from "./heading/page";
+export * from "./layout/flex";
+export { default as LoadButton } from "./button/load";
+export { default as Badge } from "./text/badge";
+export { default as Dropdown } from "./dropdown/normal";
+export { default as FileUploader } from "./upload/file";
+export * from "./list";
+export * from "./carousel";

package/dist/components/index.js

@@ -1,12 +1,11 @@
-export { default as Separator } from "./layout/separator";
-export { default as FadeBox } from "./layout/fade";
-export { default as Heading } from "./heading/normal";
-export { default as PageHeading } from "./heading/page";
-export * from "./layout/flex";
-export { default as LoadButton } from "./button/load";
-export { default as Badge } from "./text/badge";
-export { default as Dropdown } from "./dropdown/normal";
-export { default as FileUploader } from "./upload/file";
-export * from "./list";
-export * from "./form";
-export * from "./carousel";
+export { default as Separator } from "./layout/separator";
+export { default as FadeBox } from "./layout/fade";
+export { default as Heading } from "./heading/normal";
+export { default as PageHeading } from "./heading/page";
+export * from "./layout/flex";
+export { default as LoadButton } from "./button/load";
+export { default as Badge } from "./text/badge";
+export { default as Dropdown } from "./dropdown/normal";
+export { default as FileUploader } from "./upload/file";
+export * from "./list";
+export * from "./carousel";

package/dist/components/input.d.ts

@@ -1,11 +1,11 @@
-import type { Field as FieldProps } from "./form/types";
-type Props<T> = FieldProps<T> & {
-    placeholder?: string;
-    styles?: {
-        container?: string;
-        input?: string;
-    };
-    disabled?: boolean;
-};
-export default function Input({ id, styles, label, required, note, style, value, update, ...props }: Props<string>): import("react/jsx-runtime").JSX.Element;
-export {};
+import type { Field as FieldProps } from "./form/types";
+declare type Props<T> = FieldProps<T> & {
+    placeholder?: string;
+    styles?: {
+        container?: string;
+        input?: string;
+    };
+    disabled?: boolean;
+};
+export default function Input({ id, styles, label, required, note, style, value, update, ...props }: Props<string>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/input.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Field from "./field";
-import { cn } from "@bouko/style";
-export default function Input({ id, styles, label, required = true, note, style, value, update, ...props }) {
-    return (_jsx(Field, { style: styles?.container, label: label, required: required, note: note, children: _jsx("input", { className: cn("px-3 py-2 bg-input border border-outline duration-200 focus:border-outline-light outline-none rounded text-sm disabled:brightness-90 disabled:cursor-not-allowed", styles?.input), onChange: ({ target: { value } }) => update(value), value: value ?? "", ...props }) }));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import Field from "./field";
+import { cn } from "@bouko/style";
+export default function Input({ id, styles, label, required = true, note, style, value, update, ...props }) {
+    return (_jsx(Field, { style: styles?.container, label: label, required: required, note: note, children: _jsx("input", { className: cn("px-3 py-2 bg-input border border-outline duration-200 focus:border-outline-light outline-none rounded text-sm disabled:brightness-90 disabled:cursor-not-allowed", styles?.input), onChange: ({ target: { value } }) => update(value), value: value ?? "", ...props }, void 0) }, void 0));
+}

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

@@ -1,6 +1,6 @@
-import { Component } from "../../core/types";
-type Props = Component & {
-    gradient?: string;
-};
-export default function FadeBox({ style, gradient, children }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+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 {};

package/dist/components/layout/fade.js

@@ -1,14 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, tv } from "@bouko/style";
-export default function FadeBox({ style, gradient, children }) {
-    const direction = "left";
-    return (_jsxs("div", { className: cn("relative", style), children: [children, _jsx("div", { className: cn(styles({ direction }), gradient) })] }));
-}
-const styles = tv({
-    base: "absolute from-background",
-    variants: {
-        direction: {
-            left: "top-0 right-0 w-12 h-full bg-gradient-to-l"
-        }
-    }
-});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, tv } from "@bouko/style";
+export default 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));
+}
+const styles = tv({
+    base: "absolute from-background",
+    variants: {
+        direction: {
+            left: "top-0 right-0 w-12 h-full bg-gradient-to-l"
+        }
+    }
+});

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

@@ -1,16 +1,16 @@
-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 | undefined;
-export declare const ColumnBox: ({ style, children, ...opts }: Props) => import("react/jsx-runtime").JSX.Element | undefined;
-export {};
+import { Component } from "../../core/types";
+declare 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 | null;
+export declare const ColumnBox: ({ style, children, ...opts }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};