@bouko/react 2.4.2 → 2.4.3

package/dist/components/heading/page.d.ts

@@ -1 +1,25 @@
-export default function PageHeading(): import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from "react";
+declare type Props = {
+    style?: Styles;
+    badge?: string;
+    icon?: ReactNode;
+    title: string;
+    subtitle?: string;
+};
+declare type Styles = {
+    container?: string;
+    badge?: string;
+    title?: string;
+    subtitle?: string;
+};
+/**
+ * Text heading with badge, title, subtitle.
+ *
+ * @param {Styles} style - Additional styles. (optional)
+ * @param {string} badge - Little note above the title. (optional)
+ * @param {ReactNode} icon - Component displayed left of title. (optional)
+ * @param {string} title - Main title content.
+ * @param {string} subtitle - Subtitle content. (optional)
+**/
+export default function PageHeading({ style, badge, icon, title, subtitle }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/heading/page.js

@@ -1,5 +1,23 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-// bring from unvault
-export default function PageHeading() {
-    return (_jsx(_Fragment, {}, void 0));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeStyles } from "@bouko/style";
+import { RowBox, ColumnBox } from "../layout/flex";
+import { Badge } from "../text/badge";
+/**
+ * Text heading with badge, title, subtitle.
+ *
+ * @param {Styles} style - Additional styles. (optional)
+ * @param {string} badge - Little note above the title. (optional)
+ * @param {ReactNode} icon - Component displayed left of title. (optional)
+ * @param {string} title - Main title content.
+ * @param {string} subtitle - Subtitle content. (optional)
+**/
+export default function PageHeading({ style = {}, badge, icon, title, subtitle }) {
+    const styles = mergeStyles(base, style);
+    return (_jsxs(ColumnBox, { style: styles.container, children: [_jsx(Badge, { style: styles.badge, children: badge }, void 0), _jsxs(RowBox, { style: styles.title, children: [icon, title] }, void 0), _jsx(RowBox, { style: styles.subtitle, children: subtitle }, void 0)] }, void 0));
 }
+const base = {
+    container: "w-full items-center font-mono",
+    badge: "mb-2",
+    title: "items-center gap-2 mb-3 text-4xl sm:text-5xl 2xl:text-6xl text-center font-bold text-primary",
+    subtitle: "items-center gap-2 text-sm sm:text-base 2xl:text-lg text-center text-primary-light dark:text-primary-dark"
+};

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

@@ -2,10 +2,15 @@ import type { Component } from "../../core/types";
 declare type Props = Component & {
     color?: string;
 };
-export declare const Badge: ({ style, color, children }: Props) => import("react/jsx-runtime").JSX.Element | null;
-export default Badge;
 /**
- * Problems:
+ * Color-themed badge component.
+ *
+ * To use a CSS variable it must exist and be passed in the
+ * form `--variable-name`. Any other format may cause unexpected
+ * results. CSS variables use 'color-mix' which is not supported in
+ * some old browsers such as Safari 15.3 and Internet Explorer.
  *
- * - Perfect `opacitize`
-**/ 
+ * @param {string} color - Color of badge. (optional, default = accent)
+**/
+export declare function Badge({ style, color, children }: Props): import("react/jsx-runtime").JSX.Element | null;
+export default Badge;

package/dist/components/text/badge.js

@@ -1,15 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn, css, opacitize } from "@bouko/style";
-export const Badge = ({ style, color = "var(--color-accent)", children }) => {
+/**
+ * Color-themed badge component.
+ *
+ * To use a CSS variable it must exist and be passed in the
+ * form `--variable-name`. Any other format may cause unexpected
+ * results. CSS variables use 'color-mix' which is not supported in
+ * some old browsers such as Safari 15.3 and Internet Explorer.
+ *
+ * @param {string} color - Color of badge. (optional, default = accent)
+**/
+export function Badge({ style, color = "--color-accent", children }) {
     if (!children)
         return null;
     return (_jsx("span", { className: cn(styles(color), style), children: children }, void 0));
-};
+}
 const styles = (color) => css({
     width: "min-content",
     padding: "0.25rem 0.75rem",
     background: opacitize(color),
-    border: `1px solid ${color}`,
+    border: `1px solid var(${color})`,
     borderRadius: "100%",
     fontSize: "0.75rem",
     fontWeight: "600",

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",