@vygruppen/spor-react 12.8.1 → 12.8.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.8.1",
+  "version": "12.8.3",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

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/input/CheckboxGroup.tsx

@@ -4,7 +4,7 @@ import React from "react";
 export type CheckboxGroupProps = React.ComponentProps<
   typeof ChakraCheckboxGroup
 > & {
-  direction: "row" | "column"; // Defaults to row
+  direction?: "row" | "column";
 };
 /**
  * Used to group several checkboxes together. You can pass the default value, as well as whether or not they're all disabled

package/src/input/Field.tsx

@@ -30,7 +30,7 @@ export type FieldBaseProps = {
 
 export type FieldProps = Omit<
   ChakraField.RootProps,
-  "label" | "onChange" | "onBlur" | "onFocus" | "onClick" | "children"
+  "label" | "onChange" | "onBlur"
 > &
   React.PropsWithChildren<FieldVariantProps> &
   FieldBaseProps;

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

@@ -31,7 +31,7 @@ export const fieldSlotRecipe = defineSlotRecipe({
       textStyle: "xs",
       width: "fit-content",
       position: "absolute",
-      top: "100%", // position below parent
+      top: "100%",
       left: 3,
       zIndex: "dropdown",
       maxWidth: "50ch",

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";