@bouku/core 0.1.9 → 0.2.1

package/dist/components/layout/footer.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Footer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const flex_1 = require("./flex");
+const flex_1 = require("../container/flex");
 const style_1 = require("../../utils/functions/style");
 const Footer = ({ Left, Center, Right }) => ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: style, equal: true, children: [(0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: "justify-start items-center", children: Left }), (0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: "justify-center items-center", children: Center }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center", children: Right })] }));
 exports.Footer = Footer;

package/dist/components/layout/section.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const flex_1 = require("./flex");
+const flex_1 = require("../container/flex");
 const separator_1 = require("./separator");
 const style_1 = require("../../utils/functions/style");
 /**

package/dist/components/list/search-bar.js

@@ -9,8 +9,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const style_1 = require("../../utils/functions/style");
 const input_1 = __importDefault(require("../text/input"));
-const fade_1 = __importDefault(require("../layout/fade"));
-const flex_1 = require("../layout/flex");
+const fade_1 = __importDefault(require("../container/fade"));
+const flex_1 = require("../container/flex");
 const normal_1 = __importDefault(require("../button/normal"));
 function SearchBar({ style = {}, placeholder, trigger, submit, oops = console.log }) {
     const [query, setQuery] = (0, react_1.useState)("");

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

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+type Item = {
+    label: string;
+    content: ReactNode;
+};
+export default function Accordion({ items }: {
+    items: Item[];
+}): import("react").JSX.Element;
+export {};

package/dist/components/miscellaneous/accordion/index.js

@@ -0,0 +1,22 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Accordion;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const flex_1 = require("../../container/flex");
+const tab_1 = require("./tab");
+function Accordion({ items }) {
+    const [activeItem, setActiveItem] = (0, react_1.useState)(0);
+    const handleClick = (index) => {
+        if (index === activeItem)
+            setActiveItem(null);
+        else
+            setActiveItem(index);
+    };
+    return ((0, jsx_runtime_1.jsx)(flex_1.ColumnBox, { style: s.container, children: items.map(({ label, content }, i) => ((0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { children: [(0, jsx_runtime_1.jsx)("div", { onClick: () => handleClick(i), children: (0, jsx_runtime_1.jsx)(tab_1.ItemHeader, { isActive: i === activeItem, label: label }) }), i === activeItem && ((0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: s.item, children: content }))] }, i))) }));
+}
+const s = {
+    container: "gap-5 max-h-full overflow-y-auto scrollbar-none",
+    item: "justify-center items-center mt-5 w-full"
+};

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

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

package/dist/components/miscellaneous/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.ItemHeader = ItemHeader;
+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 ItemHeader({ 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/miscellaneous/dropdown/index.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/miscellaneous/dropdown/index.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/miscellaneous/glow/index.d.ts

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

package/dist/components/miscellaneous/glow/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Glow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = require("../../../utils/functions/style");
+function Glow({ 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/miscellaneous/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Accordion } from "./accordion";
+export { default as Table } from "./table";
+export { default as Pagination } from "./pagination";
+export { default as ProgressBar } from "./progress";
+export { default as Glow } from "./glow";
+export { default as Dropdown } from "./dropdown";

package/dist/components/miscellaneous/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = exports.Glow = exports.ProgressBar = exports.Pagination = exports.Table = exports.Accordion = void 0;
+var accordion_1 = require("./accordion");
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return __importDefault(accordion_1).default; } });
+var table_1 = require("./table");
+Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(table_1).default; } });
+var pagination_1 = require("./pagination");
+Object.defineProperty(exports, "Pagination", { enumerable: true, get: function () { return __importDefault(pagination_1).default; } });
+var progress_1 = require("./progress");
+Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return __importDefault(progress_1).default; } });
+var glow_1 = require("./glow");
+Object.defineProperty(exports, "Glow", { enumerable: true, get: function () { return __importDefault(glow_1).default; } });
+var dropdown_1 = require("./dropdown");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return __importDefault(dropdown_1).default; } });

package/dist/components/miscellaneous/pagination/index.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    style?: string;
+    page: number;
+    prev: () => void;
+    next: () => void;
+    totalPages: number;
+};
+export default function Pagination({ style, page, prev, next, totalPages }: Props): import("react").JSX.Element;
+export {};

package/dist/components/miscellaneous/pagination/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Pagination;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const chevron_left_svg_1 = __importDefault(require("../../../assets/icons/chevron-left.svg"));
+const chevron_right_svg_1 = __importDefault(require("../../../assets/icons/chevron-right.svg"));
+const flex_1 = require("../../container/flex");
+const normal_1 = require("../../button/normal");
+const style_1 = require("../../../utils/functions/style");
+function Pagination({ style, page, prev, next, totalPages = 99 }) {
+    const canPrev = page > 1;
+    const canNext = totalPages > 0 ? page < totalPages : true;
+    return ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: (0, style_1.cn)(s.container, style), children: [(0, jsx_runtime_1.jsx)(normal_1.Button, { size: "xs", style: "rounded-none rounded-l-sm", action: prev, disabled: !canPrev, children: (0, jsx_runtime_1.jsx)(chevron_left_svg_1.default, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-px justify-center items-center w-11 h-6 px-2 bg-border-dark/20 border-y border-border-dark text-xs font-medium", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-primary", children: page }), "/", (0, jsx_runtime_1.jsx)("span", { className: "text-primary-darker", children: totalPages || 99 })] }), (0, jsx_runtime_1.jsx)(normal_1.Button, { size: "xs", style: "rounded-none rounded-r-sm", action: next, disabled: !canNext, children: (0, jsx_runtime_1.jsx)(chevron_right_svg_1.default, {}) })] }));
+}
+const s = {
+    container: "justify-center items-center text-primary-darker select-none",
+    subcontainer: "gap-2",
+};

package/dist/components/miscellaneous/progress/index.d.ts

@@ -0,0 +1,4 @@
+export default function ProgressBar({ value, style }: {
+    value: number;
+    style?: string;
+}): import("react").JSX.Element;

package/dist/components/miscellaneous/progress/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ProgressBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../utils");
+function ProgressBar({ value, style }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(s.container, style), children: (0, jsx_runtime_1.jsx)("div", { className: s.filled, style: { width: (value * 100) + "%" } }) }));
+}
+const s = {
+    container: "flex grow h-1 rounded-full bg-surface overflow-hidden",
+    filled: "h-full bg-accent"
+};

package/dist/components/miscellaneous/table/header.d.ts

@@ -0,0 +1,10 @@
+import type { CellValue } from "./row";
+type Props<T> = {
+    columnLabels: Record<string, string>;
+    sortColumn: keyof T | null;
+    sortDirection: "asc" | "desc";
+    sortBy: (x: string | null) => void;
+    toggleSortDirection: () => void;
+};
+export declare const Header: <T extends Record<keyof T, CellValue>>({ columnLabels, sortColumn, sortDirection, sortBy, toggleSortDirection }: Props<T>) => import("react").JSX.Element;
+export {};

package/dist/components/miscellaneous/table/header.js

@@ -0,0 +1,20 @@
+"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.Header = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const flex_1 = require("../../container/flex");
+const arrow_up_svg_1 = __importDefault(require("../../../assets/icons/arrow-up.svg"));
+const arrow_down_svg_1 = __importDefault(require("../../../assets/icons/arrow-down.svg"));
+const Header = ({ columnLabels, sortColumn, sortDirection, sortBy, toggleSortDirection }) => ((0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: s.container, children: Object.entries(columnLabels).map(([col, label], i) => ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: s.column, children: [(0, jsx_runtime_1.jsx)("span", { className: s.label, onClick: () => sortBy(col), children: label }), col === sortColumn && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [sortDirection === "desc" && (0, jsx_runtime_1.jsx)(arrow_down_svg_1.default, { className: s.sorter, onClick: () => toggleSortDirection() }), sortDirection === "asc" && (0, jsx_runtime_1.jsx)(arrow_up_svg_1.default, { className: s.sorter, onClick: () => toggleSortDirection() })] }))] }, i))) }));
+exports.Header = Header;
+const s = {
+    container: "w-full px-4 py-3 bg-background-light border-b border-border",
+    column: "flex-1 gap-1 first:justify-start justify-center last:justify-end items-center uppercase text-primary-dark font-light text-sm",
+    label: "hover:brightness-120 duration-200 cursor-pointer",
+    sorter: "hover:text-primary cursor-pointer duration-200"
+};

package/dist/components/miscellaneous/table/index.d.ts

@@ -0,0 +1,15 @@
+import { type Row, type Action } from "./row";
+type ColumnOptions = {
+    label?: string;
+    pad?: number;
+    link?: string;
+};
+type Props<T extends Row> = {
+    style?: string;
+    title?: string;
+    config: Partial<Record<keyof T, boolean | ColumnOptions>>;
+    items: T[];
+    actions?: Action<T>[];
+};
+export default function Table<T extends Row>({ style, title, config: initConfig, items, actions }: Props<T>): import("react").JSX.Element;
+export {};

package/dist/components/miscellaneous/table/index.js

@@ -0,0 +1,37 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Table;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sorter_1 = require("./sorter");
+const ts_helper_kit_1 = require("ts-helper-kit");
+const _1 = require("../../../utils/functions/_");
+const flex_1 = require("../../container/flex");
+const header_1 = require("./header");
+const row_1 = require("./row");
+function Table({ style, title, config: initConfig, items, actions }) {
+    const { sortedItems, ...sortOptions } = (0, sorter_1.useSort)(items);
+    const config = parseConfig(initConfig, !!actions?.length);
+    const columns = Object.keys(config);
+    const condensedItems = (0, ts_helper_kit_1.condenseArray)(sortedItems, columns);
+    return ((0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: (0, _1.cn)(s.container, style), children: [title && ((0, jsx_runtime_1.jsx)("span", { className: s.title, children: title })), (0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: s.subcontainer, children: [(0, jsx_runtime_1.jsx)(header_1.Header, { ...sortOptions, columnLabels: Object.fromEntries(columns.map(c => [c, config[c].label])) }), (0, jsx_runtime_1.jsx)(flex_1.ColumnBox, { style: s.rows, children: condensedItems.map(({ item, count }, i) => ((0, jsx_runtime_1.jsx)(row_1.TableRow, { config: config, data: item, count: count, actions: actions }, i))) })] })] }));
+}
+function parseConfig(config, hasActions) {
+    const parsed = Object.entries(config).reduce((acc, [key, value]) => {
+        const label = String(key).replaceAll("_", " ");
+        const isObject = typeof value === "object" && value !== null;
+        acc[key] = isObject ? { label, ...value } : { label };
+        return acc;
+    }, {});
+    // Automatically append an actions column if actions exist
+    if (hasActions) {
+        parsed["actions"] = { label: "Actions" };
+    }
+    return parsed;
+}
+const s = {
+    container: "gap-3 overflow-hidden",
+    title: "text-xl font-bold text-primary",
+    subcontainer: "grow w-full border border-border rounded-md overflow-hidden",
+    rows: "grow overflow-y-auto no-scrollbar"
+};

package/dist/components/miscellaneous/table/row.d.ts

@@ -0,0 +1,22 @@
+export declare const isDateLike: (val: string) => boolean;
+type ColumnOptions = {
+    label: string;
+    pad?: number;
+    link?: string;
+};
+export type Action<T> = {
+    variant?: "accent" | "surface" | "error";
+    icon?: React.ReactNode;
+    style?: string;
+    handler: (row: T) => void;
+};
+interface Props<T> {
+    config: Record<string, ColumnOptions>;
+    data: T;
+    count: number;
+    actions?: Action<T>[];
+}
+export type Row = Record<string, CellValue>;
+export type CellValue = string | number | boolean | object | null;
+export declare function TableRow<T extends Row>({ config, data, actions, count }: Props<T>): import("react").JSX.Element;
+export {};

package/dist/components/miscellaneous/table/row.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isDateLike = void 0;
+exports.TableRow = TableRow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const flex_1 = require("../../container/flex");
+const _1 = require("../../button/_");
+const check_circle_svg_1 = __importDefault(require("../../../assets/icons/check-circle.svg"));
+const x_circle_svg_1 = __importDefault(require("../../../assets/icons/x-circle.svg"));
+const ts_helper_kit_1 = require("ts-helper-kit");
+const isDateLike = (val) => !isNaN(Date.parse(val)) && isNaN(Number(val));
+exports.isDateLike = isDateLike;
+function TableRow({ config, data, actions, count }) {
+    return ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: s.container, children: [Object.keys(config).map((key, i) => {
+                if (key === "actions" && actions) {
+                    return ((0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: s.cell, children: (0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: "gap-2 items-center", children: actions.map((action, actionIdx) => {
+                                const variantStyles = action.variant === "error" ? "bg-error/10 text-error hover:bg-error/20" :
+                                    action.variant === "accent" ? "bg-accent/10 text-accent hover:bg-accent/20" :
+                                        "bg-surface-light text-primary hover:bg-surface-light/80";
+                                return ((0, jsx_runtime_1.jsx)(_1.Button, { size: "xs", variant: "surface", style: action.style, icon: action.icon, action: () => action.handler(data) }, actionIdx));
+                            }) }) }, i));
+                }
+                const rawValue = data[key];
+                const value = rawValue === 0 ? 0 : (data[key] ?? "N/A");
+                const options = config[key];
+                let cellValue = value;
+                if (options && options.pad)
+                    cellValue = (0, ts_helper_kit_1.padNum)(cellValue, options.pad);
+                else if ((0, exports.isDateLike)(cellValue.toString()))
+                    cellValue = new Date(cellValue.toString()).toLocaleDateString();
+                return ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: s.cell, children: [options && options?.link && (0, jsx_runtime_1.jsx)("a", { className: "text-primary underline duration-200 hover:text-accent", href: options.link?.replace("[x]", rawValue), children: cellValue }), options && !options?.link && ((0, jsx_runtime_1.jsx)("span", { className: "truncate", children: value === true ? (0, jsx_runtime_1.jsx)(check_circle_svg_1.default, { className: "text-success" }) : value === false ? (0, jsx_runtime_1.jsx)(x_circle_svg_1.default, { className: "text-error" }) : (typeof cellValue === "object" ? JSON.stringify(cellValue) : cellValue) }))] }, i));
+            }), count > 1 && ((0, jsx_runtime_1.jsx)("span", { className: "absolute top-0 left-0 pb-px px-1 bg-surface-light border-b border-r rounded-br border-border-light font-bold font-mono text-px text-accent", children: count }))] }));
+}
+const s = {
+    container: "relative w-full px-4 py-4 even:bg-surface border-b border-border last:border-b-0",
+    cell: "flex-1 first-of-type:justify-start justify-center last-of-type:justify-end items-center gap-2 font-mono overflow-hidden"
+};

package/dist/components/miscellaneous/table/sorter.d.ts

@@ -0,0 +1,10 @@
+import type { CellValue } from "./row";
+type SortDirection = "asc" | "desc";
+export declare function useSort<T extends Record<string, CellValue>>(items: T[]): {
+    sortedItems: T[];
+    sortBy: (col: keyof T | null) => void;
+    toggleSortDirection: () => void;
+    sortColumn: keyof T | null;
+    sortDirection: SortDirection;
+};
+export {};

package/dist/components/miscellaneous/table/sorter.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSort = useSort;
+const react_1 = require("react");
+function useSort(items) {
+    const [column, setColumn] = (0, react_1.useState)(null);
+    const [isDescending, setDescending] = (0, react_1.useState)(true);
+    const sortBy = (col) => {
+        if (col === column)
+            return setColumn(null);
+        setDescending(true);
+        setColumn(col);
+    };
+    const sortedItems = (0, react_1.useMemo)(() => {
+        if (!column)
+            return items;
+        return [...items].sort((a, b) => {
+            const valA = a[column];
+            const valB = b[column];
+            if (valA === undefined || valA === null)
+                return 1;
+            if (valB === undefined || valB === null)
+                return -1;
+            let comparison = 0;
+            // 2. Date detection & comparison
+            const isDateLike = (val) => val instanceof Date ||
+                (typeof val === "string" && !isNaN(Date.parse(val)) && isNaN(Number(val)));
+            if (isDateLike(valA) && isDateLike(valB)) {
+                const timeA = new Date(valA).getTime();
+                const timeB = new Date(valB).getTime();
+                // Swap this to timeB - timeA so the base comparison defaults to descending
+                comparison = timeA - timeB;
+            }
+            // 3. Number comparison
+            else if (typeof valA === "number" && typeof valB === "number")
+                comparison = valA - valB;
+            // 4. String / Fallback comparison (case-insensitive)
+            else {
+                const strA = String(valA).toLowerCase();
+                const strB = String(valB).toLowerCase();
+                comparison = strA.localeCompare(strB);
+            }
+            return isDescending ? -comparison : comparison;
+        });
+    }, [items, column, isDescending]);
+    return {
+        sortedItems,
+        sortBy,
+        toggleSortDirection: () => setDescending(p => !p),
+        sortColumn: column,
+        sortDirection: isDescending ? "desc" : "asc"
+    };
+}

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

@@ -1,2 +1,3 @@
 export { default as Badge } from "./badge";
+export { default as Heading } from "./heading";
 export { default as Input } from "./input";

package/dist/components/text/_.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = exports.Badge = void 0;
+exports.Input = exports.Heading = exports.Badge = void 0;
 var badge_1 = require("./badge");
 Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return __importDefault(badge_1).default; } });
+var heading_1 = require("./heading");
+Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return __importDefault(heading_1).default; } });
 var input_1 = require("./input");
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return __importDefault(input_1).default; } });

package/dist/components/text/heading.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/text/heading.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("../../utils/functions/style");
+const flex_1 = require("../container/flex");
+const badge_1 = require("./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-2xl sm:text-3xl 2xl:text-4xl 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/utils/hooks/clock.d.ts

@@ -1,8 +1,8 @@
-type Props = {
+interface Options {
     action: () => Promise<boolean | void>;
+    oops?: (x: string) => void;
     duration: number;
     deps: unknown[];
-    oops?: (x: string) => void;
-};
-export default function useInterval({ action, duration, deps, oops }: Props): void;
+}
+export declare function useInterval({ action, oops, duration, deps }: Options): void;
 export {};

package/dist/utils/hooks/clock.js

@@ -1,15 +1,18 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = useInterval;
+exports.useInterval = useInterval;
 const react_1 = require("react");
-function useInterval({ action, duration, deps = [], oops }) {
-    const ref = (0, react_1.useRef)(async () => false);
+;
+function useInterval({ action, oops = console.error, duration, deps = [] }) {
+    const ref = (0, react_1.useRef)(async () => {
+        return false;
+    });
     (0, react_1.useEffect)(() => {
         ref.current = action;
     }, [action]);
     (0, react_1.useEffect)(() => {
-        if (deps.some(v => v === undefined || v === null))
+        if (deps.some(v => v === null || v === undefined))
             return;
         const tick = async () => {
             try {
@@ -21,8 +24,8 @@ function useInterval({ action, duration, deps = [], oops }) {
                 oops?.(err.message);
             }
         };
-        const id = setInterval(tick, duration);
         tick();
+        const id = setInterval(tick, duration);
         return () => clearInterval(id);
     }, [duration, ...deps]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bouku/core",
-  "version": "0.1.9",
+  "version": "0.2.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",