@vygruppen/spor-react 12.8.2 → 12.8.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.8.2",
+  "version": "12.8.3",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,9 +46,9 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
+    "@vygruppen/spor-design-tokens": "4.0.7",
     "@vygruppen/spor-icon-react": "4.2.1",
-    "@vygruppen/spor-loader": "0.7.0",
-    "@vygruppen/spor-design-tokens": "4.0.7"
+    "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/index.tsx

@@ -26,6 +26,7 @@ export * from "./table";
 export * from "./theme";
 export * from "./theme/brand";
 export * from "./toast";
+export * from "./tooltip";
 export * from "./transition";
 export * from "./typography";
 export * from "./util";

package/src/theme/slot-recipes/index.ts

@@ -66,4 +66,5 @@ export const slotRecipes = {
   toast: toastSlotRecipe,
   checkboxCard: choiceChipSlotRecipe,
   collapsible: collapsibleSlotRecipe,
+  tooltip: popoverSlotRecipe,
 };

package/src/theme/slot-recipes/popover.ts

@@ -10,6 +10,8 @@ export const popoverSlotRecipe = defineSlotRecipe({
       position: "relative",
       display: "flex",
       flexDirection: "row-reverse",
+      color: "text.inverted",
+
       gap: "0.625rem",
       padding: "0.563rem 0.75rem",
 

package/src/tooltip.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Portal, Tooltip as ChakraTooltip } from "@chakra-ui/react";
+import { forwardRef } from "react";
+
+export const Tooltip = ChakraTooltip.Root;
+
+export const TooltipTrigger = forwardRef<
+  HTMLButtonElement,
+  ChakraTooltip.TriggerProps
+>(({ children, ...props }, ref) => {
+  const isStringChild = typeof children === "string";
+
+  return (
+    <ChakraTooltip.Trigger {...props} ref={ref} asChild={!isStringChild}>
+      {children}
+    </ChakraTooltip.Trigger>
+  );
+});
+TooltipTrigger.displayName = "TooltipTrigger";
+
+export type TooltipProps = ChakraTooltip.ContentProps;
+
+export const TooltipContent = forwardRef<HTMLDivElement, TooltipProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <Portal>
+        <ChakraTooltip.Positioner>
+          <ChakraTooltip.Content ref={ref} {...props}>
+            <ChakraTooltip.Arrow />
+            <ChakraTooltip.Content {...props}>{children}</ChakraTooltip.Content>
+          </ChakraTooltip.Content>
+        </ChakraTooltip.Positioner>
+      </Portal>
+    );
+  },
+);
+TooltipContent.displayName = "TooltipContent";