@bouko/react 0.2.5 → 0.2.7

package/dist/components/button.d.ts

@@ -1,8 +1,9 @@
 import type { ReactNode } from "react";
 type Props = {
+    variant?: "ghost";
     style?: string;
     onClick?: () => void;
     children: ReactNode;
 };
-export default function Button({ style, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Button({ variant, style, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/button.js

@@ -1,5 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "@bouko/style";
-export default function Button({ style, ...props }) {
-    return (_jsx("button", { className: cn("px-4 py-2 duration-200 cursor-pointer", "bg-accent hover:bg-accent-dark border border-accent-dark rounded", "font-semibold text-slate-100", style), ...props }));
+import { cn, tv } from "@bouko/style";
+export default function Button({ variant, style, ...props }) {
+    return (_jsx("button", { className: cn(styles({ variant }), style), ...props }));
 }
+const styles = tv({
+    base: "px-4 py-2 bg-accent hover:bg-accent-dark border border-accent-dark rounded font-semibold text-primary duration-200 cursor-pointer",
+    variants: {
+        variant: {
+            ghost: "bg-transparent border-transparent"
+        }
+    }
+});

package/dist/components/heading.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+type Props = {
+    container?: string;
+    title: ReactNode;
+    subtitle: ReactNode;
+    reverse?: boolean;
+};
+export default function Heading({ container, title, subtitle, reverse }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/heading.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColumnBox } from "./flex";
+import { cn } from "@bouko/style";
+export default function Heading({ container, title, subtitle, reverse }) {
+    return (_jsxs(ColumnBox, { style: cn(container, reverse && "flex-col-reverse"), children: [_jsx("span", { className: styles.title, children: title }), _jsx("span", { className: styles.subtitle, children: subtitle })] }));
+}
+const styles = {
+    title: "flex items-center gap-2 font-bold",
+    subtitle: "text-sm font-semibold"
+};

package/dist/core/format.d.ts

@@ -0,0 +1 @@
+export declare const formatText: (text: string) => import("react/jsx-runtime").JSX.Element;

package/dist/core/format.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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) },
+    { delimiter: "^^", render: (text, key) => _jsx("span", { className: "text-accent", children: text }, key) },
+];
+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 formatText = (text) => {
+    const parts = text
+        .split(WRAPPED_TEXT_REGEX)
+        .filter(Boolean);
+    const formatted = parts.map((x, i) => {
+        if (isWrapped(x, "**")) {
+            // Remove only the first and last occurrence of the delimiter
+            const content = x.slice(2, -2);
+            return _jsx("span", { className: "font-bold", children: content }, i);
+        }
+        else if (isWrapped(x, "~~")) {
+            const content = x.slice(2, -2);
+            return _jsx("span", { className: "font-semibold", children: content }, i);
+        }
+        else if (isWrapped(x, "^^")) {
+            const content = x.slice(2, -2);
+            return _jsx("span", { className: "text-accent", children: content }, i);
+        }
+        return x;
+    });
+    return _jsx("span", { children: formatted });
+};

package/dist/index.d.ts

@@ -8,3 +8,4 @@ export { default as CheckBox } from "./components/checkbox";
 export * from "./components/flex";
 export * from "./core/types";
 export * from "./core/functions";
+export * from "./core/format";

package/dist/index.js

@@ -8,3 +8,4 @@ export { default as CheckBox } from "./components/checkbox";
 export * from "./components/flex";
 export * from "./core/types";
 export * from "./core/functions";
+export * from "./core/format";

package/package.json

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