@bouku/core 0.1.2 → 0.1.4

package/dist/components/button/normal.js

@@ -6,7 +6,7 @@ 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 style_1 = require("../../utils/functions/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 }) {
@@ -39,7 +39,7 @@ const styles = (0, tailwind_variants_1.tv)({
             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",
+            ghost: "bg-transparent border-transparent text-primary-dark",
             error: "bg-error border-error-dark text-background",
             future: "backdrop-blur-sm test-button"
         }

package/dist/components/fade/circle.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = CircleFade;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const style_1 = require("@bouko/style");
+const style_1 = require("../../utils/functions/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/normal.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Heading;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const style_1 = require("@bouko/style");
+const style_1 = require("../../utils/functions/style");
 const flex_1 = require("../layout/flex");
 const badge_1 = require("../text/badge");
 /**

package/dist/components/heading/page.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = PageHeading;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const style_1 = require("@bouko/style");
+const style_1 = require("../../utils/functions/style");
 const flex_1 = require("../layout/flex");
 const badge_1 = require("../text/badge");
 /**

package/dist/components/layout/absolute.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = AbsoluteBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const style_1 = require("@bouko/style");
+const style_1 = require("../../utils/functions/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 }) }));
 }

package/dist/components/layout/fade.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FadeBox = FadeBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const style_1 = require("@bouko/style");
+const style_1 = require("../../utils/functions/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) })] }));

package/dist/components/layout/flex.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowBox = RowBox;
 exports.ColumnBox = ColumnBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const style_1 = require("@bouko/style");
+const style_1 = require("../../utils/functions/style");
 const tailwind_variants_1 = require("tailwind-variants");
 /**
  * Flex containers with configurable alignment and styling.

package/dist/components/layout/footer.js

@@ -3,7 +3,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 style_1 = require("@bouko/style");
+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;
 const style = (0, style_1.css)({

package/dist/components/layout/rnd.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = RnD;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_rnd_1 = require("react-rnd");
-const style_1 = require("@bouko/style");
+const style_1 = require("../../utils/functions/style");
 function RnD({ style, min, max, minWidth, update, children }) {
     const gapSize = max - min;
     const handleResize = (x, width) => {

package/dist/components/layout/scroll-box.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScrollBox = ScrollBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const style_1 = require("@bouko/style");
+const style_1 = require("../../utils/functions/style");
 const flex_1 = require("./flex");
 function ScrollBox({ style, items, element: Row }) {
     const [hoveredIndex, setHoveredIndex] = (0, react_1.useState)(null);

package/dist/components/layout/section.js

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

package/dist/components/layout/separator.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Separator = Separator;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const style_1 = require("@bouko/style");
+const style_1 = require("../../utils/functions/style");
 function Separator({ style }) {
     return (0, jsx_runtime_1.jsx)("hr", { className: (0, style_1.cn)("w-full text-border-dark", style) });
 }

package/dist/components/list/item.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Item;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const style_1 = require("@bouko/style");
+const style_1 = require("../../utils/functions/style");
 ;
 function Item({ marker, content, centerMarker, index }) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, style_1.cn)("flex items-start text-sm", centerMarker && "items-center"), children: [marker, content] }, index));

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

@@ -7,11 +7,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchBar = SearchBar;
 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 normal_1 = __importDefault(require("../button/normal"));
-const style_1 = require("@bouko/style");
 function SearchBar({ style = {}, placeholder, trigger, submit, oops = console.log }) {
     const [query, setQuery] = (0, react_1.useState)("");
     const styles = (0, style_1.mergeStyles)(base, style);

package/dist/components/list/variants/bullet.d.ts

@@ -1,9 +1,9 @@
-import React, { type ReactNode } from "react";
+import { type ReactNode } from "react";
 interface Props {
     style?: string;
     title?: string;
     items: ReactNode[];
     centerMarker?: boolean;
 }
-export default function BulletList({ style, title, items, centerMarker }: Props): React.JSX.Element;
+export default function BulletList({ style, title, items, centerMarker }: Props): import("react").JSX.Element;
 export {};

package/dist/components/list/variants/bullet.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = BulletList;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const item_1 = __importDefault(require("../item"));
-const style_1 = require("@bouko/style");
+const style_1 = require("../../../utils/functions/style");
 ;
 function BulletList({ style, title, items, centerMarker }) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, style_1.cn)(styles.base, style), children: [!!title && (0, jsx_runtime_1.jsx)("span", { className: styles.title, children: title }), (0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(styles.base, style, !!title && "ml-2"), children: items.map((x, i) => ((0, jsx_runtime_1.jsx)(item_1.default, { marker: (0, jsx_runtime_1.jsx)(Marker, {}), content: x, index: i, centerMarker: centerMarker }, i))) })] }, title));

package/dist/components/list/variants/number.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = NumberList;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const item_1 = __importDefault(require("../item"));
-const style_1 = require("@bouko/style");
+const style_1 = require("../../../utils/functions/style");
 ;
 function NumberList({ style, marker, title, items, centerMarker }) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, style_1.cn)(styles.base, style), children: [!!title && (0, jsx_runtime_1.jsx)("span", { className: styles.title, children: title }), (0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(styles.base, style, !!title && "ml-2"), children: items.map((x, i) => ((0, jsx_runtime_1.jsx)(item_1.default, { marker: (0, jsx_runtime_1.jsx)(Marker, { style: marker, x: i + 1 }), content: x, index: i, centerMarker: centerMarker }, i))) }, "content")] }, "list"));

package/dist/components/pagination/index.js

@@ -9,7 +9,7 @@ const chevron_left_svg_1 = __importDefault(require("../../assets/icons/chevron-l
 const chevron_right_svg_1 = __importDefault(require("../../assets/icons/chevron-right.svg"));
 const flex_1 = require("../layout/flex");
 const normal_1 = require("../button/normal");
-const style_1 = require("@bouko/style");
+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;

package/dist/components/progress/bar.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ProgressBar;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const style_1 = require("@bouko/style");
+const style_1 = require("../../utils/functions/style");
 function ProgressBar({ value, style }) {
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(s.container, style), children: (0, jsx_runtime_1.jsx)("div", { className: s.filled, style: { width: (value * 100) + "%" } }) }));
 }

package/dist/components/table/index.js

@@ -8,7 +8,7 @@ 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");
+const style_1 = require("../../utils/functions/style");
 function Table({ style, title, config: initConfig, items }) {
     const { sortedItems, ...sortOptions } = (0, sorter_1.useSort)(items);
     const config = parseConfig(initConfig);

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

@@ -10,6 +10,6 @@ interface Props<T> {
     count: number;
 }
 export type Row = Record<string, CellValue>;
-export type CellValue = string | number | boolean | object;
+export type CellValue = string | number | boolean | object | null;
 export declare function TableRow<T extends Row>({ config, data, count }: Props<T>): import("react").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-type CellValue = string | number | boolean | object;
+import type { CellValue } from "./row";
 type SortDirection = "asc" | "desc";
 export declare function useSort<T extends Record<string, CellValue>>(items: T[]): {
     sortedItems: T[];

package/dist/components/text/badge.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = Badge;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const style_1 = require("@bouko/style");
+const style_1 = require("../../utils/functions/style");
 const tailwind_variants_1 = require("tailwind-variants");
 /**
  * Color-themed badge component.

package/dist/components/text/input.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Input;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const style_1 = require("@bouko/style");
+const style_1 = require("../../utils/functions/style");
 const tailwind_variants_1 = require("tailwind-variants");
 function Field({ style, label, required = true, note, children }) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, style_1.cn)(fieldStyles.container, style), children: [label && (0, jsx_runtime_1.jsxs)("span", { className: fieldStyles.label, children: [label, " ", !required ? (0, jsx_runtime_1.jsx)("span", { className: "italic text-slate-400", children: "(optional)" }) : ""] }), children, note && (0, jsx_runtime_1.jsx)("span", { className: fieldStyles.note, children: note })] }));

package/dist/utils/functions/_.d.ts

@@ -1,2 +1,3 @@
 export * from "./element";
+export * from "./style";
 export * from "./text";

package/dist/utils/functions/_.js

@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./element"), exports);
+__exportStar(require("./style"), exports);
 __exportStar(require("./text"), exports);

package/dist/utils/functions/style.d.ts

@@ -0,0 +1,31 @@
+import type { StringMap } from "ts-helper-kit";
+import type { ClassValue } from "clsx";
+/**
+ * Combines Tailwind styles into a properly merged
+ * and formatted string using `clsx` and `twMerge`.
+ *
+ * @param styles - Class values to combine.
+ * @returns A single merged class string.
+**/
+export declare const cn: (...styles: ClassValue[]) => string;
+/**
+ * Converts an object of Tailwind styles into a merged
+ * class string. Useful for breaking up long styles.
+ *
+ * @param styles - A map of keys to class strings.
+ * @returns A single merged class string.
+**/
+export declare const css: (styles: StringMap) => string;
+/**
+ * Merges two style objects by combining matching
+ * keys with `cn`. Useful for components that receive
+ * custom styles as a prop.
+ *
+ * @param a - The base styles.
+ * @param b - The styles to merge into the base.
+ * @returns A new style object with merged class values.
+**/
+export declare const mergeStyles: (a: StringMap, b: StringMap) => {
+    [x: string]: string;
+};
+export declare function opacitize(color: string, opacity?: number): string;

package/dist/utils/functions/style.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeStyles = exports.css = exports.cn = void 0;
+exports.opacitize = opacitize;
+const clsx_1 = require("clsx");
+const tailwind_merge_1 = require("tailwind-merge");
+/**
+ * Combines Tailwind styles into a properly merged
+ * and formatted string using `clsx` and `twMerge`.
+ *
+ * @param styles - Class values to combine.
+ * @returns A single merged class string.
+**/
+const cn = (...styles) => (0, tailwind_merge_1.twMerge)((0, clsx_1.clsx)(styles));
+exports.cn = cn;
+/**
+ * Converts an object of Tailwind styles into a merged
+ * class string. Useful for breaking up long styles.
+ *
+ * @param styles - A map of keys to class strings.
+ * @returns A single merged class string.
+**/
+const css = (styles) => (0, exports.cn)(...Object.values(styles));
+exports.css = css;
+/**
+ * Merges two style objects by combining matching
+ * keys with `cn`. Useful for components that receive
+ * custom styles as a prop.
+ *
+ * @param a - The base styles.
+ * @param b - The styles to merge into the base.
+ * @returns A new style object with merged class values.
+**/
+const mergeStyles = (a, b) => {
+    const merged = { ...a };
+    for (const [key, value] of Object.entries(b)) {
+        if (merged[key])
+            merged[key] = (0, exports.cn)(merged[key], value);
+        else
+            merged[key] = value;
+    }
+    return merged;
+};
+exports.mergeStyles = mergeStyles;
+function opacitize(color, opacity = 0.5) {
+    if (color.startsWith("var("))
+        return `
+            color-mix(
+                in srgb, 
+                ${color} ${opacity * 100}%, 
+                transparent
+            )
+        `;
+    const { r, g, b } = parseHex(color);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+;
+const parseHex = (input) => {
+    let hex = input.replace("#", "");
+    if (hex.length === 3)
+        hex = palindrome(hex);
+    return {
+        r: parseInt(hex.substring(0, 2), 16),
+        g: parseInt(hex.substring(2, 4), 16),
+        b: parseInt(hex.substring(4, 6), 16)
+    };
+};
+const palindrome = (str) => str
+    .split("")
+    .map(c => c + c)
+    .join("");

package/dist/utils/functions/text.js

@@ -4,7 +4,7 @@ exports.linkify = void 0;
 exports.formatText = formatText;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_router_dom_1 = require("react-router-dom");
-const ts_1 = require("@bouko/ts");
+const ts_helper_kit_1 = require("ts-helper-kit");
 const delimiterConfig = [
     {
         key: "**",
@@ -20,7 +20,7 @@ const delimiterConfig = [
     },
 ];
 const delimiterPattern = delimiterConfig.map(({ key }) => {
-    const escaped = (0, ts_1.escapeRegex)(key);
+    const escaped = (0, ts_helper_kit_1.escapeRegex)(key);
     return `${escaped}.*?${escaped}`;
 }).join("|");
 const linkPattern = String.raw `\[[^\]]+\]\([^)]+\)`;

package/dist/utils/hooks/router.d.ts

@@ -2,4 +2,5 @@ export declare function useRouter<T>(): {
     navigate: import("react-router").NavigateFunction;
     params: T;
 };
-export declare const useSearchParam: (key: string) => string | null;
+export declare function useUrlParam<T = string>(key: string): T;
+export declare function useSearchParam<T>(key: string): T;

package/dist/utils/hooks/router.js

@@ -1,15 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSearchParam = void 0;
 exports.useRouter = useRouter;
+exports.useUrlParam = useUrlParam;
+exports.useSearchParam = useSearchParam;
 const react_router_dom_1 = require("react-router-dom");
 function useRouter() {
     const navigate = (0, react_router_dom_1.useNavigate)();
     const params = (0, react_router_dom_1.useParams)();
     return { navigate, params };
 }
-const useSearchParam = (key) => {
+function useUrlParam(key) {
+    const params = (0, react_router_dom_1.useParams)();
+    const value = params[key];
+    if (!value)
+        throw new Error("Missing URL param: " + key);
+    return value;
+}
+function useSearchParam(key) {
     const [params] = (0, react_router_dom_1.useSearchParams)();
-    return params.get(key);
-};
-exports.useSearchParam = useSearchParam;
+    const value = params.get(key);
+    if (!value)
+        throw new Error("Missing URL search param: " + key);
+    return value;
+}

package/dist/utils/hooks/state.d.ts

@@ -1,11 +1,4 @@
-type Options<T> = {
-    fetcher: () => Promise<T>;
-    updater: (x?: T) => Promise<T | null>;
-};
-export declare function useValue<T>({ fetcher, updater }: Options<T>): {
-    value: T | null;
-    update: (x?: T) => Promise<void>;
-};
+export declare function useValue<T>(getValue: () => Promise<T>): T | null;
 export declare function useList<T extends {
     id?: string;
 }>(initial?: T[]): {

package/dist/utils/hooks/state.js

@@ -4,17 +4,13 @@ exports.useValue = useValue;
 exports.useList = useList;
 exports.useMap = useMap;
 const react_1 = require("react");
-function useValue({ fetcher, updater }) {
+function useValue(getValue) {
     const [value, setValue] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
-        fetcher()
-            .then(setValue);
-    }, []);
-    const update = async (x) => {
-        const res = await updater(x);
-        setValue(res || null);
-    };
-    return { value, update };
+        if (!value)
+            getValue().then(setValue);
+    }, [value]);
+    return value;
 }
 function useList(initial = []) {
     const [items, setItems] = (0, react_1.useState)(initial);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bouku/core",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -24,12 +24,12 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@bouko/style": "^0.2.1",
-    "@bouko/ts": "^0.5.0",
+    "clsx": "^2.1.1",
     "framer-motion": "^12.23.6",
     "react-rnd": "^10.5.2",
     "react-time-ago": "^7.4.4",
     "snatch-http": "^0.0.1",
+    "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^1.0.0",
     "ts-helper-kit": "^0.0.6"
   },