@bouko/react 2.9.9 → 3.0.1

package/dist/components/button/normal.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import type { Component } from "../../core/types";
 export type ButtonProps = Component & {
-    variant?: "primary" | "outline" | "ghost" | "secondary" | "error";
+    variant?: "primary" | "outline" | "ghost" | "secondary" | "error" | "future";
     size?: "xs" | "sm" | "md" | "lg";
     icon?: ReactNode;
     action?: () => void;

package/dist/components/button/normal.js

@@ -13,18 +13,20 @@ export function Button({ size, variant, style, icon, action, disabled, children
         catch { }
         setLoading(false);
     };
-    return (_jsxs("button", { className: cn(styles({ variant, size }), variant === "ghost" && "p-0", style), onClick: submit, disabled: disabled || isLoading, children: [icon && isLoading
+    if (variant === "future")
+        return (_jsxs("button", { className: "test-button", onClick: action, disabled: disabled || isLoading, children: [children, _jsx("div", { className: "test-button-border" })] }));
+    return (_jsxs("button", { className: cn(styles({ variant, size }), style), onClick: submit, disabled: disabled || isLoading, children: [icon && isLoading
                 ? _jsx(Spinner, { className: "animate-spin" })
                 : icon, children] }));
 }
 const styles = tv({
-    base: "flex justify-center items-center gap-2 bg-accent border border-accent-darker rounded font-semibold text-background-light duration-200 cursor-pointer disabled:cursor-not-allowed hover:brightness-110",
+    base: "flex justify-center items-center gap-2 bg-accent border border-accent-darker rounded font-medium text-background-light duration-200 cursor-pointer disabled:cursor-not-allowed hover:brightness-110",
     defaultVariants: { size: "md" },
     variants: {
         variant: {
             primary: "bg-primary border-primary-dark",
             outline: "bg-transparent border-accent hover:border-accent-dark text-primary",
-            ghost: "bg-transparent border-transparent text-accent hover:brightness-110",
+            ghost: "bg-transparent border-transparent text-primary hover:brightness-110",
             secondary: "bg-background-dark dark:bg-background-light border-border-dark dark:border-border-light text-background-darker dark:text-primary",
             error: "bg-error border-error-dark"
         },
@@ -32,7 +34,7 @@ const styles = tv({
             xs: "gap-1 px-2 py-1 text-xs font-medium",
             circle: "px-2 py-2 text-xs rounded-full",
             sm: "px-3 py-2 text-xs sm:text-sm",
-            md: "px-4 py-2",
+            md: "px-4 py-1 text-sm",
             lg: "px-5 py-3 text-lg"
         }
     }

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

@@ -1,6 +1,7 @@
 import type { Component } from "../../core/types";
 type Props = Component & {
     color?: string;
+    icon?: React.ReactNode;
     size?: "xs" | "sm" | "md";
 };
 /**
@@ -13,5 +14,5 @@ type Props = Component & {
  *
  * @param {string} color - Color of badge. (optional, default = accent)
 **/
-export declare function Badge({ style, color, size, children }: Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function Badge({ style, color, size, icon, children }: Props): import("react/jsx-runtime").JSX.Element | null;
 export default Badge;

package/dist/components/text/badge.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { opacitize, cn, tv } from "@bouko/style";
 /**
  * Color-themed badge component.
@@ -10,9 +10,11 @@ import { opacitize, cn, tv } from "@bouko/style";
  *
  * @param {string} color - Color of badge. (optional, default = accent)
 **/
-export function Badge({ style, color = "--color-accent", size = "md", children }) {
+export function Badge({ style, color = "--color-accent", size = "md", icon, children }) {
     if (!children)
         return null;
+    if (color === "future")
+        return (_jsxs("div", { className: "flex items-center gap-2 test-badge", children: [icon && _jsx("div", { className: "text-primary-dark", children: icon }), _jsx("span", { children: children })] }));
     return (_jsx("span", { className: cn(base({ size }), style), style: styles(color), children: children }));
 }
 const styles = (color) => ({

package/dist/styles.css

@@ -0,0 +1,91 @@
+.test-button {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  width: max-content;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--color-primary);
+  backdrop-filter: blur(8px);
+  cursor: pointer;
+}
+
+.test-button::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background:
+    linear-gradient(
+      180deg,
+      rgba(20, 60, 140, 0) 0%,
+      rgba(20, 60, 140, .32) 100%
+    ),
+    rgba(60, 120, 255, .12);
+  border-radius: inherit;
+  box-shadow: inset 0 0 12px #7fb0ff3d;
+  transition: .2s opacity cubic-bezier(.6, .6, 0, 1);
+  z-index: -1;
+}
+
+.test-button::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background:
+    linear-gradient(
+      180deg,
+      rgba(20, 60, 140, 0) 0%,
+      rgba(20, 60, 140, .42) 100%
+    ),
+    rgba(60, 120, 255, .24);
+  border-radius: inherit;
+  box-shadow: inset 0 0 12px #7fb0ff70;
+  transition: .2s opacity cubic-bezier(.6, .6, 0, 1);
+  opacity: 0;
+  z-index: -1;
+}
+
+.test-button-border {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  z-index: -1;
+}
+
+.test-button-border::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  background:
+    linear-gradient(
+      180deg,
+      rgba(180, 210, 255, .24) 0%,
+      rgba(180, 210, 255, 0) 100%
+    ),
+    linear-gradient(
+      0deg,
+      rgba(180, 210, 255, .32),
+      rgba(180, 210, 255, .32)
+    );
+  border-radius: inherit;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "2.9.9",
+  "version": "3.0.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -16,10 +16,14 @@
   "peerDependencies": {
     "react-router-dom": "^7.12.0"
   },
+  "exports": {
+    "./styles.css": "./dist/styles.css"
+  },
   "engines": {},
 
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "postbuild": "node ./scripts/copy-styles.mjs"
   },
 
   "dependencies": {