@bouko/react 1.9.3 → 1.9.5

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

@@ -1,12 +1,25 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
+type Styles = {
+    container?: string;
+    text?: string;
+    title?: string;
+    subtitle?: string;
+};
+type Options = {
+    size?: "md" | "lg";
+    align?: "left" | "center";
+};
 export type HeadingProps = {
-    styles?: Record<string, string>;
+    options?: Options;
+    styles?: Styles;
     container?: string;
     badge?: string;
     icon?: ReactNode;
     title: ReactNode;
+    size?: "md" | "lg";
     align?: "left" | "center";
     subtitle?: ReactNode;
     reverse?: boolean;
 };
-export default function Heading({ styles, container, badge, icon, title, align, subtitle, reverse }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export default function Heading({ styles, options, container, badge, icon, title, subtitle, reverse }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/layout/heading.js

@@ -1,14 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RowBox, ColumnBox } from "../flex";
-import { cn } from "@bouko/style";
 import Badge from "../text/badge";
-export default function Heading({ styles = {}, container, badge, icon, title, align = "left", subtitle, reverse }) {
-    return (_jsxs(RowBox, { style: cn(base.container, styles.container, container), children: [icon, _jsxs(ColumnBox, { style: cn(base.subcontainer, align === "center" && "items-center", reverse && "flex-col-reverse"), children: [badge && _jsx(Badge, { style: base.badge, children: badge }), _jsx("span", { className: cn(base.title, styles.title), children: title }), subtitle && _jsx("span", { className: cn(base.subtitle, styles.subtitle, align === "center" && "text-center"), children: subtitle })] })] }));
+import { cn, tv } from "@bouko/style";
+export default function Heading({ styles = {}, options = {}, container, badge, icon, title, subtitle, reverse }) {
+    const custom = test(options);
+    return (_jsxs(RowBox, { style: cn(base.container, styles.container, container), children: [icon, _jsxs(ColumnBox, { style: cn(custom.subcontainer(), reverse && "flex-col-reverse"), children: [badge && _jsx(Badge, { style: base.badge, children: badge }), _jsx(RowBox, { style: cn(custom.title(), styles.title, styles.text), children: title }), subtitle && _jsx(RowBox, { style: cn(custom.subtitle(), styles.subtitle, styles.text), children: subtitle })] })] }));
 }
 const base = {
     container: "gap-2 items-center",
-    subcontainer: "flex grow flex-col",
     badge: "mb-2",
-    title: "flex items-center gap-2 text-lg font-bold",
-    subtitle: "font-semibold text-primary-lighter"
 };
+const test = tv({
+    slots: {
+        subcontainer: "grow",
+        title: "items-center gap-2 text-xl font-bold text-primary",
+        subtitle: "items-center gap-2 font-semibold text-primary-light dark:text-primary-dark"
+    },
+    defaultVariants: {
+        size: "md",
+        align: "center"
+    },
+    variants: {
+        size: {
+            md: {
+                title: "text-xl 2xl:text-2xl",
+                subtitle: "text-base 2xl:text-lg"
+            },
+            lg: {
+                subcontainer: "gap-3",
+                title: "text-5xl 2xl:text-6xl",
+                subtitle: "text-sm sm:text-base 2xl:text-lg"
+            }
+        },
+        align: {
+            left: {
+                subcontainer: "items-start"
+            },
+            center: {
+                subcontainer: "items-center",
+                subtitle: "justify-center text-center"
+            }
+        }
+    }
+});

package/dist/core/format.d.ts

@@ -1 +1,3 @@
+import { ReactNode } from "react";
+export declare const rn: (...elements: ReactNode[]) => import("react/jsx-runtime").JSX.Element;
 export declare const formatText: (text: string) => import("react/jsx-runtime").JSX.Element;

package/dist/core/format.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
 const delimiterConfig = [
     { delimiter: "**", render: (text, key) => _jsx("span", { className: "font-bold", children: text }, key) },
     { delimiter: "~~", render: (text, key) => _jsx("span", { className: "font-semibold", children: text }, key) },
@@ -8,6 +9,7 @@ const escapeRegex = (str) => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
 const delimiters = delimiterConfig.map(({ delimiter }) => escapeRegex(delimiter) + ".*?" + escapeRegex(delimiter)).join("|");
 const WRAPPED_TEXT_REGEX = new RegExp(`(${delimiters})`, "g");
 const isWrapped = (x, wrapper) => x.startsWith(wrapper) && x.endsWith(wrapper);
+export const rn = (...elements) => (_jsx(Fragment, { children: elements.map((x, i) => (_jsx(Fragment, { children: x }, i))) }));
 export const formatText = (text) => {
     const parts = text
         .split(WRAPPED_TEXT_REGEX)

package/package.json

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