@bouku/core 0.2.3 → 0.2.5

package/dist/components/card/media.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const flex_1 = require("../container/flex");
 const badge_1 = __importDefault(require("../text/badge"));
-const MediaCard = ({ media, title, subtitle, badge, styles = {}, }) => ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: `items-center gap-3 ${styles.container ?? ""}`, children: [(0, jsx_runtime_1.jsx)("img", { src: media, className: "size-10 w-10 h-10 border border-border rounded", alt: title }), (0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: "gap-px min-w-0", children: [(0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: "items-center gap-2 min-w-0", children: [(0, jsx_runtime_1.jsx)("span", { className: `text-primary text-sm font-semibold truncate ${styles.title ?? ""}`, children: title }), badge && (0, jsx_runtime_1.jsx)(badge_1.default, { size: "xs", children: badge })] }), subtitle && ((0, jsx_runtime_1.jsx)("span", { className: `text-xs text-primary-dark ${styles.subtitle}`, children: subtitle }))] })] }));
+const MediaCard = ({ media, title, subtitle, badge, styles = {}, }) => ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: `items-center gap-3 ${styles.container ?? ""}`, children: [(0, jsx_runtime_1.jsx)("img", { src: media, className: "size-10 w-10 h-10 border border-border rounded", alt: title }), (0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: "gap-px min-w-0", children: [(0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: "items-center gap-2 min-w-0", children: [(0, jsx_runtime_1.jsx)("span", { className: `text-primary text-sm font-semibold truncate ${styles.title ?? ""}`, children: title }), badge && (0, jsx_runtime_1.jsx)(badge_1.default, { size: "sm", children: badge })] }), subtitle && ((0, jsx_runtime_1.jsx)("span", { className: `text-xs text-primary-dark ${styles.subtitle}`, children: subtitle }))] })] }));
 exports.default = MediaCard;

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

@@ -1,5 +1,5 @@
 export { default as AbsoluteBox } from "./absolute";
 export { default as FadeBox } from "./fade";
-export { default as Rnd } from "./rnd";
+export { default as RnD } from "./rnd";
 export { default as ScrollBox } from "./scroll";
 export * from "./flex";

package/dist/components/container/_.js

@@ -17,13 +17,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollBox = exports.Rnd = exports.FadeBox = exports.AbsoluteBox = void 0;
+exports.ScrollBox = exports.RnD = exports.FadeBox = exports.AbsoluteBox = void 0;
 var absolute_1 = require("./absolute");
 Object.defineProperty(exports, "AbsoluteBox", { enumerable: true, get: function () { return __importDefault(absolute_1).default; } });
 var fade_1 = require("./fade");
 Object.defineProperty(exports, "FadeBox", { enumerable: true, get: function () { return __importDefault(fade_1).default; } });
 var rnd_1 = require("./rnd");
-Object.defineProperty(exports, "Rnd", { enumerable: true, get: function () { return __importDefault(rnd_1).default; } });
+Object.defineProperty(exports, "RnD", { enumerable: true, get: function () { return __importDefault(rnd_1).default; } });
 var scroll_1 = require("./scroll");
 Object.defineProperty(exports, "ScrollBox", { enumerable: true, get: function () { return __importDefault(scroll_1).default; } });
 __exportStar(require("./flex"), exports);

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

@@ -2,7 +2,7 @@ import type { Component } from "../../utils";
 type Props = Component & {
     color?: string;
     icon?: React.ReactNode;
-    size?: "xs" | "sm" | "md";
+    size?: "sm" | "md" | "lg";
 };
 /**
  * Color-themed badge component.
@@ -14,5 +14,5 @@ type Props = Component & {
  *
  * @param {string} color - Color of badge. (optional, default = accent)
 **/
-export declare function Badge({ style, color, size, icon, children }: Props): import("react").JSX.Element | null;
+export declare function Badge({ style, color, size, children }: Props): import("react").JSX.Element | null;
 export default Badge;

package/dist/components/text/badge.js

@@ -14,11 +14,9 @@ const tailwind_variants_1 = require("tailwind-variants");
  *
  * @param {string} color - Color of badge. (optional, default = accent)
 **/
-function Badge({ style, color = "--color-accent", size = "md", icon, children }) {
+function Badge({ style, color = "--color-accent", size = "md", children }) {
     if (!children)
         return null;
-    if (color === "future")
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 test-badge", children: [icon && (0, jsx_runtime_1.jsx)("div", { className: "text-primary-dark", children: icon }), (0, jsx_runtime_1.jsx)("span", { children: children })] }));
     return ((0, jsx_runtime_1.jsx)("span", { className: (0, style_1.cn)(base({ size }), style), style: styles(color), children: children }));
 }
 const styles = (color) => ({
@@ -30,12 +28,12 @@ const styles = (color) => ({
     color: "var(--color-primary)"
 });
 const base = (0, tailwind_variants_1.tv)({
-    base: "w-min",
+    base: "w-min px-2 py-1",
     variants: {
         size: {
-            xs: "px-1 py-px text-[0.5rem]",
-            sm: "px-1 py-px text-xs",
-            md: "px-2 py-1 text-sm"
+            sm: "text-xs",
+            md: "text-sm",
+            lg: "text-base"
         }
     }
 });

package/dist/utils/functions/style.js

@@ -51,10 +51,17 @@ function opacitize(color, opacity = 0.5) {
                 transparent
             )
         `;
+    if (color.startsWith("--"))
+        return `
+            color-mix(
+                in srgb, 
+                var(${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)

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

@@ -1,4 +1,9 @@
-export declare function useValue<T>(getValue: () => Promise<T>): T | null;
+interface GetValueOptions<T> {
+    fetcher: () => Promise<T>;
+    callback?: () => void;
+    interval?: number;
+}
+export declare function useValue<T>({ fetcher, callback, interval }: GetValueOptions<T>): readonly [T | null | undefined, boolean];
 export declare function useList<T extends {
     id?: string;
 }>(initial?: T[]): {

package/dist/utils/hooks/state.js

@@ -4,13 +4,42 @@ exports.useValue = useValue;
 exports.useList = useList;
 exports.useMap = useMap;
 const react_1 = require("react");
-function useValue(getValue) {
-    const [value, setValue] = (0, react_1.useState)(null);
+function useValue({ fetcher, callback, interval }) {
+    const [value, setValue] = (0, react_1.useState)();
+    const [isLoading, setLoading] = (0, react_1.useState)(true);
+    const fetchValue = async (showLoading = false) => {
+        if (showLoading)
+            setLoading(true);
+        try {
+            console.log("fetching");
+            const result = await fetcher();
+            const nextValue = result ?? null;
+            setValue(current => Object.is(current, nextValue)
+                ? current
+                : nextValue);
+        }
+        catch (err) {
+            console.error(err);
+        }
+        finally {
+            if (showLoading)
+                setLoading(false);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        fetchValue(true);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!interval || value)
+            return;
+        const id = setInterval(() => fetchValue(), interval * 1000);
+        return () => clearInterval(id);
+    }, [interval, value]);
     (0, react_1.useEffect)(() => {
-        if (!value)
-            getValue().then(setValue);
-    }, [value]);
-    return value;
+        if (value && callback)
+            callback();
+    }, [value, callback]);
+    return [value, isLoading];
 }
 function useList(initial = []) {
     const [items, setItems] = (0, react_1.useState)(initial);

package/dist/utils/types/element.d.ts

@@ -23,6 +23,10 @@ export type Hoverable = {
 export type ListItem = {
     index: number;
 };
+export type LabeledItem = {
+    id: string;
+    label: string;
+};
 export interface NavItem {
     label: string;
     href: string;

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouku/core",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",