Merge pull request #19 from mezh-hq/patch/react-19

Patch/react 19

Author: Akalanka47000

CHANGELOG.md

@@ -1,5 +1,12 @@
 Changelog
 
+# v3.2.6 [2025-03-18]
+
+## Patch Release
+
+### Fixes 
+- Fixed usage with React 19
+
 # v3.2.5 [2025-03-11]
 
 ## Patch Release

bun.lockb

@@ -63,13 +63,12 @@
     "@interactjs/auto-start": "1.10.26",
     "@interactjs/interact": "1.10.26",
     "@mezh-hq/react-gridlines": "1.0.1",
-    "@radix-ui/react-label": "2.0.2",
-    "@radix-ui/react-popover": "1.0.7",
-    "@radix-ui/react-select": "2.0.0",
-    "@radix-ui/react-switch": "1.1.0",
-    "@radix-ui/react-tooltip": "1.0.6",
+    "@radix-ui/react-popover": "1.1.6",
+    "@radix-ui/react-select": "2.1.6",
+    "@radix-ui/react-switch": "1.1.3",
+    "@radix-ui/react-tooltip": "1.1.8",
     "@reduxjs/toolkit": "2.1.0",
-    "class-variance-authority": "0.7.0",
+    "class-variance-authority": "0.7.1",
     "d3": "7.8.5",
     "lodash": "4.17.21",
     "lucide-react": "0.316.0",
@@ -78,8 +77,8 @@
     "uuid": "9.0.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "17.4.2",
@@ -126,4 +125,4 @@
   "patchedDependencies": {
     "[email protected]": "patches/[email protected]"
   }
-}
+}

package.json

@@ -1,16 +1,19 @@
 import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { type VariantProps, cva } from "class-variance-authority";
 import { twMerge } from "tailwind-merge";
 
-const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={twMerge(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed select-none peer-disabled:opacity-70",
+        className
+      )}
+      {...props}
+    />
+  )
+);
 
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={twMerge(labelVariants(), className)} {...props} />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
+Label.displayName = "Label";
 
 export { Label };

src/components/core/label.tsx

@@ -1,11 +1,10 @@
 import { useState } from "react";
 import { Copy } from "lucide-react";
 import { twMerge } from "tailwind-merge";
-import { useBreakpoint } from "@/hooks";
 import { ISTKData } from "@/types";
 import { IStyles } from "@/types/styles";
 import { stateToJSON } from "@/utils";
-import { Button, IconButton } from "../core";
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from "../core";
 
 interface IExportActionProps {
   text?: string;
@@ -15,7 +14,6 @@ interface IExportActionProps {
 
 const ExportAction: React.FC<IExportActionProps> = ({ text = "Export JSON", onExport, styles }) => {
   const [loading, setLoading] = useState(false);
-  const { md } = useBreakpoint();
 
   const onExportJson = () => {
     const json = stateToJSON();
@@ -34,29 +32,21 @@ const ExportAction: React.FC<IExportActionProps> = ({ text = "Export JSON", onEx
     }
   };
 
-  if (md)
-    return (
-      <Button
-        loading={loading}
-        className={twMerge(styles?.core?.button?.className)}
-        style={styles?.core?.button?.properties}
-        onClick={onExportJson}
-        variant="secondary"
-      >
-        {text}
-      </Button>
-    );
-
   return (
-    <IconButton
-      icon={<Copy className="w-5 h-5" />}
-      label={text}
-      onClick={onExportJson}
-      loading={loading}
-      className={twMerge("w-10", styles?.core?.button?.className)}
-      style={styles?.core?.button?.properties}
-      variant="secondary"
-    />
+    <Tooltip>
+      <TooltipTrigger>
+        <Button
+          loading={loading}
+          className={twMerge("w-10 md:w-auto px-2 md:px-4 transition-none", styles?.core?.button?.className)}
+          style={styles?.core?.button?.properties}
+          onClick={onExportJson}
+          variant="secondary"
+        >
+          <Copy className="w-5 h-5 md:hidden" /> <span className="hidden md:block">{text}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent className="md:hidden">{text}</TooltipContent>
+    </Tooltip>
   );
 };
 

src/components/operations/export-button.tsx

@@ -1,4 +1,3 @@
-export { default as useBreakpoint } from "./breakpoint";
 export { default as useInteractions } from "./interactions";
 export { default as useResize } from "./resize";
 export { default as useSkipFirstRender } from "./skip-first-render";