@bubo-squared/ui-framework 0.2.19 → 0.2.20

package/dist/index.cjs

@@ -93,10 +93,40 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 
+// src/lib/ripple.ts
+function removeExistingRipples(target) {
+  const ripples = target.querySelectorAll(".bubo-ripple");
+  ripples.forEach((node) => node.remove());
+}
+function spawnRipple(target, clientX, clientY, options = {}) {
+  if (typeof window === "undefined" || typeof document === "undefined") return;
+  const rect = target.getBoundingClientRect();
+  const x = clientX - rect.left;
+  const y = clientY - rect.top;
+  const radius = Math.sqrt(rect.width * rect.width + rect.height * rect.height);
+  const size = radius * 2;
+  removeExistingRipples(target);
+  const ripple = document.createElement("span");
+  ripple.className = "bubo-ripple";
+  ripple.style.width = `${size}px`;
+  ripple.style.height = `${size}px`;
+  ripple.style.left = `${x - radius}px`;
+  ripple.style.top = `${y - radius}px`;
+  const durationMs = options.durationMs ?? 500;
+  ripple.style.animationDuration = `${durationMs}ms`;
+  const cleanup = () => {
+    ripple.removeEventListener("animationend", cleanup);
+    ripple.remove();
+  };
+  ripple.addEventListener("animationend", cleanup);
+  target.appendChild(ripple);
+  window.setTimeout(cleanup, durationMs + 50);
+}
+
 // src/components/Buttons/Button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-4 transition-colors disabled:pointer-events-none overflow-hidden cursor-pointer",
+  "relative inline-flex items-center justify-center whitespace-nowrap rounded-4 transition-colors disabled:pointer-events-none overflow-hidden cursor-pointer",
   {
     variants: {
       variant: {
@@ -163,14 +193,23 @@ var Button = React.forwardRef(
       children,
       trailingIcon,
       leadingIcon,
+      onPointerDown,
       ...rest
     } = props;
     const Comp = asChild ? import_react_slot.Slot : "button";
+    const handlePointerDown = (e) => {
+      onPointerDown?.(e);
+      if (e.defaultPrevented) return;
+      if (rest.disabled) return;
+      if (e.button !== 0 || !e.isPrimary) return;
+      spawnRipple(e.currentTarget, e.clientX, e.clientY);
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       Comp,
       {
         className: cn(buttonVariants({ variant, size, className })),
         ref,
+        onPointerDown: handlePointerDown,
         ...rest,
         children: [
           leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn(buttonIconVariants({ size })), children: leadingIcon }),
@@ -223,7 +262,7 @@ var import_react_slot2 = require("@radix-ui/react-slot");
 var import_class_variance_authority3 = require("class-variance-authority");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var iconButtonVariants = (0, import_class_variance_authority3.cva)(
-  "inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none overflow-hidden p-2 cursor-pointer",
+  "relative inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none overflow-hidden p-2 cursor-pointer",
   {
     variants: {
       variant: {
@@ -269,14 +308,23 @@ var IconButton = React2.forwardRef(
       asChild = false,
       icon,
       round = false,
+      onPointerDown,
       ...rest
     } = props;
     const Comp = asChild ? import_react_slot2.Slot : "button";
+    const handlePointerDown = (e) => {
+      onPointerDown?.(e);
+      if (e.defaultPrevented) return;
+      if (rest.disabled) return;
+      if (e.button !== 0 || !e.isPrimary) return;
+      spawnRipple(e.currentTarget, e.clientX, e.clientY);
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Comp,
       {
         className: cn(iconButtonVariants({ variant, size }), round ? "rounded-full" : "rounded-4", className),
         ref,
+        onPointerDown: handlePointerDown,
         ...rest,
         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "buttonIcon flex items-center justify-center", children: icon })
       }
@@ -3213,10 +3261,11 @@ var Tooltip = (props) => {
     open,
     defaultOpen,
     onOpenChange,
-    children
+    children,
+    delayDuration = 200
   } = props;
   const { side, align } = mapPlacementToSideAndAlign(placement);
-  const tooltipClasses = "group bg-(--background-tooltip) max-w-[calc(100vw-2rem)] shadow-card-md border-none rounded-4 p-4 [&>span]:scale-200 data-[state=delayed-open]:animate-in data-[state=instant-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=instant-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
+  const tooltipClasses = "group bg-(--background-tooltip) max-w-[calc(100vw-2rem)] shadow-card-md border-none rounded-4 py-1.5 px-2.5 [&>span]:scale-200 data-[state=delayed-open]:animate-in data-[state=instant-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=instant-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
   const tooltipArrowClasses = "relative fill-(--background-tooltip) transition-[filter,transform] group-data-[side=top]:top-[-2px] group-data-[side=top]:drop-shadow-[0px_1px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=bottom]:drop-shadow-[0px_1px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=left]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=right]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)]";
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     TooltipPrimitive.Root,
@@ -3225,6 +3274,7 @@ var Tooltip = (props) => {
       defaultOpen,
       onOpenChange,
       disableHoverableContent,
+      delayDuration,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipPrimitive.Trigger, { asChild: true, children }),
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
@@ -3236,9 +3286,9 @@ var Tooltip = (props) => {
             className: cn(tooltipClasses, className),
             children: [
               showArrow && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipArrow, { className: tooltipArrowClasses }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "grid gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "grid", children: [
                 (strapline ?? "") !== "" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "caption text-secondary", children: strapline }),
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h4", { className: "subtitle-medium text-primary", children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h4", { className: "paragraph-md text-primary", children: title }),
                 (description ?? "") !== "" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "paragraph-sm text-primary", children: description })
               ] })
             ]
@@ -3698,10 +3748,10 @@ var TextArea = (props) => {
     success: "border-(--border-success)",
     error: "border-(--border-error)"
   };
-  const statusFocusClass = {
-    default: "focus-within:border-(--border-brand) focus-within:hover:border-(--border-brand) focus-within:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-primary)]",
-    success: "focus-within:border-(--border-success) focus-within:hover:border-(--border-success) focus-within:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-success)]",
-    error: "focus-within:border-(--border-error) focus-within:hover:border-(--border-error) focus-within:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-error)]"
+  const statusShellClass = {
+    default: "input-default",
+    success: "input-success",
+    error: "input-error"
   };
   const counterColorClass = disabled ? "text-primary-disabled" : status === "success" ? "text-(--color-success)" : status === "error" ? "text-(--color-error)" : "text-primary";
   const handleResizePointerDown = (event) => {
@@ -3741,11 +3791,11 @@ var TextArea = (props) => {
         "div",
         {
           className: cn(
-            "relative flex w-full rounded-4 border bg-(--background-primary) cursor-text transition-colors",
-            "border-(--border-secondary) hover:border-(--border-secondary-hover) hover:bg-(--background-primary-hover)",
+            "relative flex w-full rounded-4 border bg-(--background-primary) cursor-text",
+            "border-(--border-secondary)",
+            statusShellClass[status],
             disabled && "bg-(--background-primary-disabled) border-(--border-secondary-disabled) cursor-default",
             statusBorderClass[status],
-            !disabled && statusFocusClass[status],
             className
           ),
           ref: containerRef,