@bouku/core 0.2.5 → 0.2.7

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/layout/section.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const flex_1 = require("../container/flex");
+const _1 = require("../container/_");
 const separator_1 = require("./separator");
-const style_1 = require("../../utils/functions/style");
+const utils_1 = require("../../utils");
 /**
  * Layout Section Component.
  *
@@ -14,9 +14,11 @@ const style_1 = require("../../utils/functions/style");
  * @param title - The section title displayed at top.
  * @param content - Element(s) rendered below the separator.
 **/
-const Section = ({ style, title, children }) => ((0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: s.container, children: [(0, jsx_runtime_1.jsx)("span", { className: s.title, children: title }), (0, jsx_runtime_1.jsx)(separator_1.Separator, { style: "mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(s.content, style), children: children })] }));
+const Section = ({ style, title, children }) => ((0, jsx_runtime_1.jsxs)(_1.ColumnBox, { style: s.container, children: [(0, jsx_runtime_1.jsxs)(_1.RowBox, { style: s.header, children: [(0, jsx_runtime_1.jsx)("div", { className: s.marker }), (0, jsx_runtime_1.jsx)("span", { className: s.title, children: title })] }), (0, jsx_runtime_1.jsx)(separator_1.Separator, { style: "mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(s.content, style), children: children })] }));
 const s = {
-    container: "gap-3 w-full",
+    container: "relative gap-3 w-full",
+    header: "gap-3 items-center",
+    marker: "w-1 h-5 rounded bg-linear-to-t from-background to-accent",
     title: "text-xl font-bold text-primary",
     content: "w-full"
 };

package/package.json

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