@bouku/core 0.0.6 → 0.0.8

package/dist/assets/icons/arrow-down.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 566.6C309.9 579.1 330.2 579.1 342.7 566.6L502.7 406.6C515.2 394.1 515.2 373.8 502.7 361.3C490.2 348.8 469.9 348.8 457.4 361.3L352 466.7L352 96C352 78.3 337.7 64 320 64C302.3 64 288 78.3 288 96L288 466.7L182.6 361.3C170.1 348.8 149.8 348.8 137.3 361.3C124.8 373.8 124.8 394.1 137.3 406.6L297.3 566.6z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/assets/icons/arrow-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="M342.6 73.4C330.1 60.9 309.8 60.9 297.3 73.4L137.3 233.4C124.8 245.9 124.8 266.2 137.3 278.7C149.8 291.2 170.1 291.2 182.6 278.7L288 173.3L288 544C288 561.7 302.3 576 320 576C337.7 576 352 561.7 352 544L352 173.3L457.4 278.7C469.9 291.2 490.2 291.2 502.7 278.7C515.2 266.2 515.2 245.9 502.7 233.4L342.7 73.4z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/assets/icons/check-circle.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1em" height="1em">
+    <path 
+        d="M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM438 209.7C427.3 201.9 412.3 204.3 404.5 215L285.1 379.2L233 327.1C223.6 317.7 208.4 317.7 199.1 327.1C189.8 336.5 189.7 351.7 199.1 361L271.1 433C276.1 438 282.9 440.5 289.9 440C296.9 439.5 303.3 435.9 307.4 430.2L443.3 243.2C451.1 232.5 448.7 217.5 438 209.7z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/assets/icons/x-circle.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1em" height="1em">
+    <path 
+        d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM231 231C240.4 221.6 255.6 221.6 264.9 231L319.9 286L374.9 231C384.3 221.6 399.5 221.6 408.8 231C418.1 240.4 418.2 255.6 408.8 264.9L353.8 319.9L408.8 374.9C418.2 384.3 418.2 399.5 408.8 408.8C399.4 418.1 384.2 418.2 374.9 408.8L319.9 353.8L264.9 408.8C255.5 418.2 240.3 418.2 231 408.8C221.7 399.4 221.6 384.2 231 374.9L286 319.9L231 264.9C221.6 255.5 221.6 240.3 231 231z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Accordion } from "./accordion";
+export { default as Table } from "./table";
 export { default as Separator } from "./layout/separator";
 export { default as FadeBox } from "./layout/fade";
 export { default as AbsoluteBox } from "./layout/absolute";
@@ -17,4 +18,3 @@ export * from "./date/_";
 export * from "./information/_";
 export * from "./progress/_";
 export * from "./text/_";
-export * from "./table/_";

package/dist/components/index.js

@@ -17,9 +17,11 @@ 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 = exports.Accordion = void 0;
+exports.Dropdown = exports.Section = exports.Pagination = exports.AbsoluteBox = exports.FadeBox = exports.Separator = 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 separator_1 = require("./layout/separator");
 Object.defineProperty(exports, "Separator", { enumerable: true, get: function () { return __importDefault(separator_1).default; } });
 var fade_1 = require("./layout/fade");
@@ -44,4 +46,3 @@ __exportStar(require("./date/_"), exports);
 __exportStar(require("./information/_"), exports);
 __exportStar(require("./progress/_"), exports);
 __exportStar(require("./text/_"), exports);
-__exportStar(require("./table/_"), exports);

package/dist/components/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/table/header.js

@@ -0,0 +1,19 @@
+"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("../layout/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/table/index.d.ts

@@ -0,0 +1,14 @@
+import { type Row } 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[];
+};
+export default function Table<T extends Row>({ style, title, config: initConfig, items }: Props<T>): import("react").JSX.Element;
+export {};

package/dist/components/table/index.js

@@ -0,0 +1,32 @@
+"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 flex_1 = require("../layout/flex");
+const header_1 = require("./header");
+const row_1 = require("./row");
+const ts_helper_kit_1 = require("ts-helper-kit");
+const style_1 = require("@bouko/style");
+function Table({ style, title, config: initConfig, items }) {
+    const { sortedItems, ...sortOptions } = (0, sorter_1.useSort)(items);
+    const config = parseConfig(initConfig);
+    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, style_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 }, i))) })] })] }));
+}
+function parseConfig(config) {
+    return 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;
+    }, {});
+}
+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/table/row.d.ts

@@ -0,0 +1,15 @@
+export declare const isDateLike: (val: string) => boolean;
+type ColumnOptions = {
+    label: string;
+    pad?: number;
+    link?: string;
+};
+interface Props<T> {
+    config: Record<string, ColumnOptions>;
+    data: T;
+    count: number;
+}
+export type Row = Record<string, CellValue>;
+export type CellValue = string | number | boolean;
+export declare function TableRow<T extends Row>({ config, data, count }: Props<T>): import("react").JSX.Element;
+export {};

package/dist/components/table/row.js

@@ -0,0 +1,31 @@
+"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("../layout/flex");
+const ts_helper_kit_1 = require("ts-helper-kit");
+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 isDateLike = (val) => !isNaN(Date.parse(val)) && isNaN(Number(val));
+exports.isDateLike = isDateLike;
+function TableRow({ config, data, count }) {
+    return ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: s.container, children: [Object.keys(config).map((key, 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" }) : 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/table/sorter.d.ts

@@ -0,0 +1,10 @@
+type CellValue = string | number | boolean;
+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/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/utils/types/element.d.ts

@@ -18,3 +18,7 @@ export type Hoverable = {
 export type ListItem = {
     index: number;
 };
+export interface NavItem {
+    label: string;
+    href: string;
+}

package/dist/utils/types/element.js

@@ -1,3 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+;
 // 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bouku/core",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -29,7 +29,8 @@
     "framer-motion": "^12.23.6",
     "react-rnd": "^10.5.2",
     "react-time-ago": "^7.4.4",
-    "tailwind-variants": "^1.0.0"
+    "tailwind-variants": "^1.0.0",
+    "ts-helper-kit": "^0.0.6"
   },
   "devDependencies": {
     "@types/node": "^24.3.1",