@bouku/core 0.2.4 → 0.2.6

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

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

package/dist/components/card/callout.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Card = void 0;
+exports.CalloutCard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const flex_1 = require("../container/flex");
-const Card = ({ label, value, units, 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.jsxs)("span", { className: s.value, children: [formatValue(value), " ", units] }), (0, jsx_runtime_1.jsx)("span", { className: s.note, children: note })] }));
-exports.Card = Card;
+const _1 = require("../container/_");
+const utils_1 = require("../../utils");
+const CalloutCard = ({ style, label, value, units, note }) => ((0, jsx_runtime_1.jsxs)(_1.ColumnBox, { style: (0, utils_1.cn)(s.card, style), children: [(0, jsx_runtime_1.jsx)("span", { className: s.label, children: label }), (0, jsx_runtime_1.jsxs)("span", { className: s.value, children: [formatValue(value), " ", units] }), (0, jsx_runtime_1.jsx)("span", { className: s.note, children: note })] }));
+exports.CalloutCard = CalloutCard;
 const formatValue = (x) => {
     if (!x)
         return "N/A";
@@ -14,9 +15,9 @@ const formatValue = (x) => {
         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"
+    card: "gap-1 flex-1 p-4 bg-surface border border-border rounded-md shadow hover:brightness-120 duration-200",
+    label: "text-sm font-mono text-primary-dark uppercase whitespace-nowrap",
+    value: "text-4xl font-bold whitespace-nowrap",
+    note: "text-xs text-primary-dark whitespace-nowrap"
 };
-exports.default = exports.Card;
+exports.default = exports.CalloutCard;

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/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/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.4",
+  "version": "0.2.6",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",