@bouko/react 1.8.0 → 1.8.2

package/dist/components/form/index.d.ts

@@ -10,6 +10,7 @@ type FormBuilderField<T> = (Omit<Field<T>, "value" | "update"> & {
 })[][];
 type Props<T> = FormSection<T> & {
     styles?: {
+        container?: string;
         submit?: string;
         cancel?: string;
     };

package/dist/components/form/index.js

@@ -22,7 +22,7 @@ export function FormBuilder({ fields, validator, data, styles, update, submit, c
         await submit.action(data);
         setLoading(false);
     };
-    return (_jsxs("div", { className: "flex flex-col w-full gap-4", children: [fields.map((row, i) => (_jsx(RowBox, { style: "w-full gap-5 overflow-hidden", children: row.map(({ element, id, rows, label, placeholder, options, required, note }) => {
+    return (_jsxs("div", { className: cn("flex flex-col w-full gap-4", styles?.container), children: [fields.map((row, i) => (_jsx(RowBox, { style: "w-full gap-5 overflow-hidden", children: row.map(({ element, id, rows, label, placeholder, options, required, note }) => {
                     if (element === "input")
                         return (_jsx(Input, { id: id, styles: { container: "flex-1" }, label: label, placeholder: placeholder, value: data[id], update: update, note: note, required: required }, id));
                     else if (element === "select")

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

@@ -1,5 +1,9 @@
 import type { ReactNode } from "react";
-export default function Badge({ style, children }: {
+type Color = "accent" | "orange" | "dark";
+type Props = {
     style?: string;
+    color?: Color;
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+};
+export default function Badge({ style, color, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/text/badge.js

@@ -1,4 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export default function Badge({ style, children }) {
-    return (_jsx("span", { className: "w-min px-3 py-1 bg-accent/20 border border-accent-dark rounded-full text-xs text-accent-dark font-semibold", children: children }));
+import { cn, tv } from "@bouko/style";
+export default function Badge({ style, color, children }) {
+    return (_jsx("span", { className: cn(styles({ color }), style), children: children }));
 }
+const styles = tv({
+    base: "w-min px-3 py-1 border rounded-full text-xs font-semibold",
+    defaultVariants: { color: "accent" },
+    variants: {
+        color: {
+            accent: "bg-accent/20 border-accent-dark text-accent-dark",
+            orange: "bg-orange-400/20 border-orange-500 text-orange-500",
+            dark: "bg-slate-700/20 border-slate-800 text-slate-800"
+        }
+    }
+});

package/package.json

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