@bouku/core 0.0.1 → 0.0.3

package/dist/assets/icons/chevron-up.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1em" height="1em">
+    <path 
+        d="M297.4 169.4C309.9 156.9 330.2 156.9 342.7 169.4L534.7 361.4C547.2 373.9 547.2 394.2 534.7 406.7C522.2 419.2 501.9 419.2 489.4 406.7L320 237.3L150.6 406.6C138.1 419.1 117.8 419.1 105.3 406.6C92.8 394.1 92.8 373.8 105.3 361.3L297.3 169.3z" 
+        fill="currentColor" 
+    />
+</svg>

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

@@ -0,0 +1,6 @@
+export declare function Accordion({ items }: {
+    items: {
+        label: string;
+        content: React.ReactNode;
+    }[];
+}): import("react").JSX.Element;

package/dist/components/accordion/index.js

@@ -0,0 +1,12 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = Accordion;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const flex_1 = require("../layout/flex");
+const tab_1 = require("./tab");
+function Accordion({ items }) {
+    const [activeItem, setActiveItem] = (0, react_1.useState)(0);
+    return ((0, jsx_runtime_1.jsx)(flex_1.ColumnBox, { style: "gap-5 overflow-y-auto scrollbar-none", children: items.map(({ label, content }, i) => ((0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: "gap-5", children: [(0, jsx_runtime_1.jsx)("div", { onClick: () => setActiveItem(i === activeItem ? null : i), children: (0, jsx_runtime_1.jsx)(tab_1.SectionHeader, { isActive: i === activeItem, label: label }) }), i === activeItem && ((0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: "w-full", center: true, children: content }))] }, i))) }));
+}

package/dist/components/accordion/tab.d.ts

@@ -0,0 +1,4 @@
+export declare function SectionHeader({ isActive, label }: {
+    isActive: boolean;
+    label: string;
+}): import("react").JSX.Element;

package/dist/components/accordion/tab.js

@@ -0,0 +1,35 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionHeader = SectionHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const chevron_up_svg_1 = __importDefault(require("@/assets/icons/chevron-up.svg"));
+const tailwind_variants_1 = require("tailwind-variants");
+function SectionHeader({ isActive, label }) {
+    const s = getStyles({ isActive });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: s.container(), children: [(0, jsx_runtime_1.jsx)("span", { className: s.label(), children: label }), (0, jsx_runtime_1.jsx)(chevron_up_svg_1.default, { className: s.chevron() })] }));
+}
+const getStyles = (0, tailwind_variants_1.tv)({
+    slots: {
+        container: "flex justify-between items-center gap-8 px-3 py-2 border rounded duration-200 cursor-pointer",
+        label: "font-bold",
+        chevron: "duration-200"
+    },
+    variants: {
+        isActive: {
+            true: {
+                container: "bg-surface-light border-border-light",
+                label: "text-primary",
+                chevron: "text-accent rotate-180"
+            },
+            false: {
+                container: "bg-surface hover:bg-surface-light border-border",
+                label: "text-primary-dark",
+                chevron: "text-primary-dark"
+            }
+        }
+    }
+});

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

@@ -0,0 +1,2 @@
+export { default as Button } from "./normal";
+export { default as CopyButton } from "./copy";

package/dist/components/button/_.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyButton = exports.Button = void 0;
+var normal_1 = require("./normal");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(normal_1).default; } });
+var copy_1 = require("./copy");
+Object.defineProperty(exports, "CopyButton", { enumerable: true, get: function () { return __importDefault(copy_1).default; } });

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

@@ -0,0 +1,6 @@
+import { ButtonProps } from "./normal";
+type Props = ButtonProps & {
+    value: string;
+};
+export default function CopyButton({ value, action, children, ...props }: Props): import("react").JSX.Element;
+export {};

package/dist/components/button/copy.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = CopyButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const normal_1 = require("./normal");
+const copy_svg_1 = __importDefault(require("../../assets/icons/copy.svg"));
+function CopyButton({ value, action, children, ...props }) {
+    const submit = async () => {
+        await navigator.clipboard.writeText(value);
+        await action?.();
+    };
+    return ((0, jsx_runtime_1.jsxs)(normal_1.Button, { action: submit, ...props, children: [(0, jsx_runtime_1.jsx)(copy_svg_1.default, {}), children] }));
+}

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+import type { Component } from "../../utils";
+export type ButtonProps = Component & {
+    size?: "xs" | "sm" | "md" | "lg";
+    variant?: "surface" | "accent" | "outline" | "ghost" | "error" | "future";
+    icon?: ReactNode;
+    action?: () => void;
+    disabled?: boolean;
+};
+export declare function Button({ style, size, variant, icon, children, disabled, action }: ButtonProps): import("react").JSX.Element;
+export default Button;

package/dist/components/button/normal.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = Button;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = require("@bouko/style");
+const tailwind_variants_1 = require("tailwind-variants");
+const spinner_svg_1 = __importDefault(require("../../assets/icons/spinner.svg"));
+function Button({ style, size, variant, icon, children, disabled, action }) {
+    const [isLoading, setLoading] = (0, react_1.useState)(false);
+    const handleClick = async () => {
+        if (action) {
+            setLoading(true);
+            await action();
+            setLoading(false);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("button", { className: (0, style_1.cn)(styles({ size, variant }), style), onClick: handleClick, disabled: disabled || isLoading, children: [icon && isLoading
+                ? (0, jsx_runtime_1.jsx)(spinner_svg_1.default, { className: "animate-spin" })
+                : icon, children] }));
+}
+const styles = (0, tailwind_variants_1.tv)({
+    base: "relative flex justify-center items-center border outline-none rounded font-semibold duration-200 cursor-pointer disabled:cursor-not-allowed hover:brightness-115",
+    defaultVariants: {
+        size: "md",
+        variant: "surface"
+    },
+    variants: {
+        size: {
+            xs: "gap-1 px-2 py-2 text-sm rounded-full",
+            sm: "gap-2 px-3 py-2 text-xs sm:text-sm",
+            md: "gap-2 px-4 py-2 text-xs sm:text-sm",
+            lg: "gap-3 px-5 py-3 text-base sm:text-lg"
+        },
+        variant: {
+            surface: "bg-surface border-border text-primary",
+            accent: "bg-accent border-accent-dark text-background",
+            outline: "bg-transparent border-accent text-accent",
+            ghost: "bg-transparent border-transparent text-primary",
+            error: "bg-error border-error-dark text-background",
+            future: "backdrop-blur-sm test-button"
+        }
+    }
+});
+exports.default = Button;

package/dist/components/date/_.d.ts

@@ -0,0 +1 @@
+export { default as TimeAgo } from "./time-ago";

package/dist/components/date/_.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeAgo = void 0;
+var time_ago_1 = require("./time-ago");
+Object.defineProperty(exports, "TimeAgo", { enumerable: true, get: function () { return __importDefault(time_ago_1).default; } });

package/dist/components/date/time-ago.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    style?: string;
+    prefix?: string;
+    date?: Date | null | undefined;
+};
+export default function TimeAgo({ style, prefix, date }: Props): import("react").JSX.Element | null;
+export {};

package/dist/components/date/time-ago.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TimeAgo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_time_ago_1 = __importDefault(require("react-time-ago"));
+function TimeAgo({ style, prefix, date }) {
+    if (!date)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("span", { className: style, children: [(0, jsx_runtime_1.jsx)("span", { className: "mr-1", children: prefix }), (0, jsx_runtime_1.jsx)(react_time_ago_1.default, { date: date, timeStyle: "mini-minute-now" })] }));
+}

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

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

package/dist/components/dropdown/normal.js

@@ -0,0 +1,22 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Dropdown;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const framer_motion_1 = require("framer-motion");
+function Dropdown({ options, children }) {
+    const [isOpen, setOpen] = (0, react_1.useState)(false);
+    const boom = (action) => {
+        action();
+        setOpen(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles.container, children: [(0, jsx_runtime_1.jsx)("div", { onClick: () => setOpen(true), children: children }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isOpen && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: styles.dropdown, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: options.map(({ label, action }, i) => ((0, jsx_runtime_1.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"
+};

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

@@ -0,0 +1 @@
+export { default as CircleFade } from "./circle";

package/dist/components/fade/_.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircleFade = void 0;
+var circle_1 = require("./circle");
+Object.defineProperty(exports, "CircleFade", { enumerable: true, get: function () { return __importDefault(circle_1).default; } });

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

@@ -0,0 +1,10 @@
+type Props = {
+    className?: string;
+    style?: {
+        top?: string;
+        left?: string;
+        transform?: string;
+    };
+};
+export default function CircleFade({ className, style }: Props): import("react").JSX.Element;
+export {};

package/dist/components/fade/circle.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = CircleFade;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = require("@bouko/style");
+function CircleFade({ className, style }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)("absolute size-24 bg-radial from-background", className), style: style }));
+}

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

@@ -0,0 +1,2 @@
+export { default as Heading } from "./normal";
+export { default as PageHeading } from "./page";

package/dist/components/heading/_.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageHeading = exports.Heading = void 0;
+var normal_1 = require("./normal");
+Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return __importDefault(normal_1).default; } });
+var page_1 = require("./page");
+Object.defineProperty(exports, "PageHeading", { enumerable: true, get: function () { return __importDefault(page_1).default; } });

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

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+type Props = {
+    badge?: string;
+    image?: 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, image, title, subtitle, style }: Props): import("react").JSX.Element;
+export {};

package/dist/components/heading/normal.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Heading;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = require("@bouko/style");
+const flex_1 = require("../layout/flex");
+const badge_1 = require("../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).
+**/
+function Heading({ badge, image, title, subtitle, style = {} }) {
+    const styles = (0, style_1.mergeStyles)(base, style);
+    return ((0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: styles.container, children: [(0, jsx_runtime_1.jsx)(badge_1.Badge, { style: styles.badge, children: badge }), image && (0, jsx_runtime_1.jsx)("img", { className: styles.logo, src: image, alt: "Logo" }), (0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: styles.title, children: title }), (0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: styles.subtitle, children: subtitle })] }));
+}
+const base = {
+    container: "items-center",
+    badge: "mb-2",
+    logo: "mb-5 w-12",
+    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

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+type Props = {
+    style?: Styles;
+    badge?: string;
+    icon?: ReactNode;
+    title: string;
+    subtitle?: string;
+};
+type Styles = {
+    container?: string;
+    badge?: string;
+    title?: string;
+    subtitle?: string;
+};
+/**
+ * Text heading with badge, title, subtitle.
+ *
+ * @param {Styles} style - Additional styles. (optional)
+ * @param {string} badge - Little note above the title. (optional)
+ * @param {ReactNode} icon - Component displayed left of title. (optional)
+ * @param {string} title - Main title content.
+ * @param {string} subtitle - Subtitle content. (optional)
+**/
+export default function PageHeading({ style, badge, icon, title, subtitle }: Props): import("react").JSX.Element;
+export {};

package/dist/components/heading/page.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = PageHeading;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = require("@bouko/style");
+const flex_1 = require("../layout/flex");
+const badge_1 = require("../text/badge");
+/**
+ * Text heading with badge, title, subtitle.
+ *
+ * @param {Styles} style - Additional styles. (optional)
+ * @param {string} badge - Little note above the title. (optional)
+ * @param {ReactNode} icon - Component displayed left of title. (optional)
+ * @param {string} title - Main title content.
+ * @param {string} subtitle - Subtitle content. (optional)
+**/
+function PageHeading({ style = {}, badge, icon, title, subtitle }) {
+    const styles = (0, style_1.mergeStyles)(base, style);
+    return ((0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: styles.container, children: [(0, jsx_runtime_1.jsx)(badge_1.Badge, { style: styles.badge, children: badge }), (0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: styles.title, children: [icon, title] }), (0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: styles.subtitle, children: subtitle })] }));
+}
+const base = {
+    container: "w-full items-center font-mono",
+    badge: "mb-2",
+    title: "items-center gap-2 mb-3 text-4xl sm:text-5xl 2xl:text-6xl text-center font-bold text-primary",
+    subtitle: "items-center gap-2 text-sm sm:text-base 2xl:text-lg text-center text-primary-light dark:text-primary-dark"
+};

package/dist/components/index.d.ts

@@ -0,0 +1,20 @@
+export * from "./accordion";
+export { default as Separator } from "./layout/separator";
+export { default as FadeBox } from "./layout/fade";
+export { default as AbsoluteBox } from "./layout/absolute";
+export * from "./layout/flex";
+export * from "./layout/_";
+export * from "./heading/_";
+export * from "./button/_";
+export { default as Pagination } from "./pagination";
+export { default as Section } from "./layout/section";
+export { default as Dropdown } from "./dropdown/normal";
+export * from "./fade/_";
+export * from "./list";
+export * from "./layout/media-row";
+export * from "./layout/scroll-box";
+export * from "./date/_";
+export * from "./information/_";
+export * from "./progress/_";
+export * from "./text/_";
+export * from "./table/_";

package/dist/components/index.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = exports.Section = exports.Pagination = exports.AbsoluteBox = exports.FadeBox = exports.Separator = void 0;
+__exportStar(require("./accordion"), exports);
+var separator_1 = require("./layout/separator");
+Object.defineProperty(exports, "Separator", { enumerable: true, get: function () { return __importDefault(separator_1).default; } });
+var fade_1 = require("./layout/fade");
+Object.defineProperty(exports, "FadeBox", { enumerable: true, get: function () { return __importDefault(fade_1).default; } });
+var absolute_1 = require("./layout/absolute");
+Object.defineProperty(exports, "AbsoluteBox", { enumerable: true, get: function () { return __importDefault(absolute_1).default; } });
+__exportStar(require("./layout/flex"), exports);
+__exportStar(require("./layout/_"), exports);
+__exportStar(require("./heading/_"), exports);
+__exportStar(require("./button/_"), exports);
+var pagination_1 = require("./pagination");
+Object.defineProperty(exports, "Pagination", { enumerable: true, get: function () { return __importDefault(pagination_1).default; } });
+var section_1 = require("./layout/section");
+Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return __importDefault(section_1).default; } });
+var normal_1 = require("./dropdown/normal");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return __importDefault(normal_1).default; } });
+__exportStar(require("./fade/_"), exports);
+__exportStar(require("./list"), exports);
+__exportStar(require("./layout/media-row"), exports);
+__exportStar(require("./layout/scroll-box"), exports);
+__exportStar(require("./date/_"), exports);
+__exportStar(require("./information/_"), exports);
+__exportStar(require("./progress/_"), exports);
+__exportStar(require("./text/_"), exports);
+__exportStar(require("./table/_"), exports);

package/dist/components/information/_.d.ts

@@ -0,0 +1 @@
+export { default as Card } from "./card";

package/dist/components/information/_.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+var card_1 = require("./card");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return __importDefault(card_1).default; } });

package/dist/components/information/card.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    label: string;
+    value: string | number;
+    note?: string;
+};
+export declare const Card: ({ label, value, note }: Props) => import("react").JSX.Element;
+export default Card;

package/dist/components/information/card.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const flex_1 = require("../layout/flex");
+const Card = ({ label, value, note }) => ((0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: s.card, children: [(0, jsx_runtime_1.jsx)("span", { className: s.label, children: label }), (0, jsx_runtime_1.jsx)("span", { className: s.value, children: formatValue(value) }), (0, jsx_runtime_1.jsx)("span", { className: s.note, children: note })] }));
+exports.Card = Card;
+const formatValue = (x) => {
+    if (typeof x === "string")
+        return x;
+    else if (typeof x === "number")
+        return x.toLocaleString("en-US");
+};
+const s = {
+    card: "gap-2 flex-1 p-5 bg-surface border border-border-light rounded-md shadow hover:brightness-120 duration-200",
+    label: "text-sm font-mono tracking-wide text-primary-dark uppercase",
+    value: "text-5xl font-bold",
+    note: "text-xs text-primary-dark"
+};
+exports.default = exports.Card;

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

@@ -0,0 +1,2 @@
+export { default as RnD } from "./rnd";
+export { default as Footer } from "./footer";

package/dist/components/layout/_.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = exports.RnD = void 0;
+var rnd_1 = require("./rnd");
+Object.defineProperty(exports, "RnD", { enumerable: true, get: function () { return __importDefault(rnd_1).default; } });
+var footer_1 = require("./footer");
+Object.defineProperty(exports, "Footer", { enumerable: true, get: function () { return __importDefault(footer_1).default; } });

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

@@ -0,0 +1,9 @@
+import { ReactNode, RefObject } from "react";
+type Props = {
+    pos?: string;
+    style?: string;
+    ref?: RefObject<HTMLDivElement | null>;
+    children: ReactNode;
+};
+export default function AbsoluteBox({ pos, style, ref, children }: Props): import("react").JSX.Element;
+export {};

package/dist/components/layout/absolute.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = AbsoluteBox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = require("@bouko/style");
+function AbsoluteBox({ pos, style, ref, children }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(styles.container, pos), ref: ref, children: (0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(styles.subcontainer, style), children: children }) }));
+}
+const styles = {
+    container: "absolute",
+    subcontainer: "relative w-full h-full"
+};

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

@@ -0,0 +1,7 @@
+import type { Component } from "../../utils/types/element";
+type Props = Component & {
+    direction?: "up" | "left" | "down";
+    gradient?: string;
+};
+export declare function FadeBox({ style, direction, gradient, children }: Props): import("react").JSX.Element;
+export default FadeBox;

package/dist/components/layout/fade.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FadeBox = FadeBox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = require("@bouko/style");
+const tailwind_variants_1 = require("tailwind-variants");
+function FadeBox({ style, direction = "up", gradient, children }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, style_1.cn)("relative", style), children: [children, (0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(styles({ direction }), gradient) })] }));
+}
+const styles = (0, tailwind_variants_1.tv)({
+    base: "absolute from-background",
+    variants: {
+        direction: {
+            up: "left-0 bottom-0 w-full h-full bg-gradient-to-t",
+            left: "top-0 right-0 w-12 h-full bg-gradient-to-l",
+            down: "top-0 left-0 w-full h-full bg-gradient-to-b"
+        }
+    }
+});
+exports.default = FadeBox;

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

@@ -0,0 +1,17 @@
+import { Component, Hoverable } from "../../utils";
+type Props = Component & Hoverable & {
+    center?: boolean;
+    centerX?: boolean;
+    centerY?: boolean;
+    equal?: 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 function RowBox({ style, children, onHover, onLeave, ...opts }: Props): import("react").JSX.Element | null;
+export declare function ColumnBox({ style, children, onHover, onLeave, ...opts }: Props): import("react").JSX.Element | null;
+export {};