@bouko/react 2.1.2 → 2.1.4

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

@@ -3,7 +3,7 @@ export type SetState<T> = Dispatch<SetStateAction<T>>;
 export type FormSection<T> = {
     data: T;
     update: SetState<T>;
-    setField: (name: string, value: T) => void;
+    setField: (x: keyof T, value: unknown) => void;
     clear: () => void;
 };
 export type Field<T, K = string> = {

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

@@ -1,12 +1,11 @@
-import { Component } from "../../core/types";
+import type { Component } from "../../core/types";
 type Props = Component & {
-    variant?: "accent" | "background";
     color?: string;
 };
-export declare const Badge: ({ style, variant, color, children }: Props) => import("react/jsx-runtime").JSX.Element | undefined;
+export declare const Badge: ({ style, color, children }: Props) => import("react/jsx-runtime").JSX.Element | undefined;
 export default Badge;
 /**
  * Problems:
  *
- * - Ugly code
+ * - Perfect `opacitize`
 **/ 

package/dist/components/text/badge.js

@@ -1,24 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn, tv } from "@bouko/style";
-export const Badge = ({ style, variant, color, children }) => {
+import { cn, css, opacitize } from "@bouko/style";
+export const Badge = ({ style, color = "var(--color-accent)", children }) => {
     if (children)
-        return (_jsx("span", { className: cn(styles({ variant }), style), style: overrideStyle(color), children: children }));
+        return (_jsx("span", { className: cn(styles(color), style), children: children }));
 };
-const overrideStyle = (color) => {
-    if (color)
-        return {
-            background: color + "50",
-            borderColor: color
-        };
-};
-const styles = tv({
-    base: "w-min px-3 py-1 border rounded-full text-xs font-semibold text-primary",
-    defaultVariants: { variant: "accent" },
-    variants: {
-        variant: {
-            accent: "bg-accent-light/50 border-accent-light",
-            background: "bg-background-lighter/50 border-background-lighter"
-        }
-    }
+const styles = (color) => css({
+    width: "min-content",
+    padding: "0.25rem 0.75rem",
+    background: opacitize(color),
+    border: `1px solid ${color}`,
+    borderRadius: "100%",
+    fontSize: "0.75rem",
+    fontWeight: "600",
+    color: "var(--color-primary)"
 });
 export default Badge;

package/package.json

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