@vygruppen/spor-react 13.1.2 → 13.1.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.1.2",
+  "version": "13.1.4",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -47,9 +47,9 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "5.0.1",
-    "@vygruppen/spor-loader": "0.7.0",
-    "@vygruppen/spor-icon-react": "5.0.0"
+    "@vygruppen/spor-design-tokens": "5.0.2",
+    "@vygruppen/spor-icon-react": "5.0.0",
+    "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/input/PasswordInput.tsx

@@ -16,7 +16,8 @@ export interface PasswordVisibilityProps {
 }
 
 export interface PasswordInputProps
-  extends InputProps, PasswordVisibilityProps {
+  extends InputProps,
+    PasswordVisibilityProps {
   rootProps?: InputProps;
 }
 
@@ -68,7 +69,7 @@ export const PasswordInput = ({
   return (
     <Input
       ref={ref}
-      startElement={startElement && startElement}
+      startElement={startElement}
       label={label}
       type={visible ? "text" : "password"}
       endElement={

package/src/logo/VyLogo.tsx

@@ -77,6 +77,14 @@ export const VyLogo = ({
         clipRule="evenodd"
         d="M98.49.07h-1.82c-2.98 0-4.6 1.49-5.63 5.06l-6.52 21.79a18.22 18.22 0 0 1-1.67 3.96c.57.78 1.17 1.26 1.76 1.38 1.13-.96 2.06-2.75 2.89-5.46l6.49-21.67c.9-3.1 2.23-4.63 4.5-4.98a.04.04 0 0 0 0-.08Z"
         fill={fillForAccent}
+        display={{ _light: "block", _dark: "none" }}
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M98.49.07h-1.82c-2.98 0-4.6 1.49-5.63 5.06l-6.52 21.79a18.22 18.22 0 0 1-1.67 3.96c.57.78 1.17 1.26 1.76 1.38 1.13-.96 2.06-2.75 2.89-5.46l6.49-21.67c.9-3.1 2.23-4.63 4.5-4.98a.04.04 0 0 0 0-.08Z"
+        fill="main"
+        display={{ _light: "none", _dark: "block" }}
       />
       <Path
         fillRule="evenodd"
@@ -112,6 +120,12 @@ export const VyLogo = ({
         <Path
           d="M53.78 1.44a4.64 4.64 0 0 0-4.17.93A10.79 10.79 0 0 0 46.19 8L34.53 47.72c-.58 1.93-1.2 3.75-2.56 4.87-.62.5-1.4.86-2.39 1.01a.04.04 0 0 0 0 .08h1.8c1.57 0 2.69-.41 3.53-1.1 1.36-1.1 1.98-2.93 2.56-4.86L49.05 8.3c.73-2.74 1.95-4.63 3.43-5.9.43-.36.88-.68 1.35-.95l-.05-.01Z"
           fill={fillForAccent}
+          display={{ _light: "block", _dark: "none" }}
+        />
+        <Path
+          d="M53.78 1.44a4.64 4.64 0 0 0-4.17.93A10.79 10.79 0 0 0 46.19 8L34.53 47.72c-.58 1.93-1.2 3.75-2.56 4.87-.62.5-1.4.86-2.39 1.01a.04.04 0 0 0 0 .08h1.8c1.57 0 2.69-.41 3.53-1.1 1.36-1.1 1.98-2.93 2.56-4.86L49.05 8.3c.73-2.74 1.95-4.63 3.43-5.9.43-.36.88-.68 1.35-.95l-.05-.01Z"
+          fill="main"
+          display={{ _light: "none", _dark: "block" }}
         />
       </SVGGroup>
       <Path

package/src/popover/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {
+  Box,
   Popover as ChakraPopover,
   Portal,
   usePopoverContext,
@@ -22,8 +23,13 @@ export const PopoverTrigger = ({
   const isStringChild = typeof children === "string";
 
   return (
-    <ChakraPopover.Trigger {...props} ref={ref} asChild={!isStringChild}>
-      {children}
+    <ChakraPopover.Trigger
+      ref={ref}
+      asChild={!isStringChild}
+      width={isStringChild ? undefined : "fit-content"}
+      {...props}
+    >
+      {isStringChild ? children : <Box>{children}</Box>}
     </ChakraPopover.Trigger>
   );
 };
@@ -58,6 +64,7 @@ export const PopoverContent = ({
       <ChakraPopover.Positioner>
         <ChakraPopover.Content ref={ref} {...props}>
           <ChakraPopover.Arrow />
+          <ChakraPopover.Body {...props}>{children}</ChakraPopover.Body>
           {showCloseButton && (
             <div>
               <ChakraPopover.CloseTrigger asChild>
@@ -68,7 +75,6 @@ export const PopoverContent = ({
               </ChakraPopover.CloseTrigger>
             </div>
           )}
-          <ChakraPopover.Body {...props}>{children}</ChakraPopover.Body>
         </ChakraPopover.Content>
       </ChakraPopover.Positioner>
     </Portal>

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

@@ -36,6 +36,7 @@ export const menuSlotRecipe = defineSlotRecipe({
       display: "flex",
       justifyContent: "space-between",
       gap: 1.5,
+      cursor: "pointer",
 
       _hover: {
         backgroundColor: "surface.accent.hover",
@@ -68,18 +69,21 @@ export const menuSlotRecipe = defineSlotRecipe({
       display: "flex",
       justifyContent: "space-between",
       gap: 2,
+      cursor: "pointer",
     },
     triggerItem: {
       display: "flex",
       justifyContent: "space-between",
       gap: 1.5,
       alignItems: "center",
+      cursor: "pointer",
     },
     checkboxItem: {
       display: "flex",
       gap: 2,
       alignItems: "center",
       width: "full",
+      cursor: "pointer",
     },
   },
   variants: {

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

@@ -9,7 +9,7 @@ export const popoverSlotRecipe = defineSlotRecipe({
     content: {
       position: "relative",
       display: "flex",
-      flexDirection: "row-reverse",
+      flexDirection: "row",
       color: "text.brand",
 
       gap: "0.625rem",
@@ -35,7 +35,6 @@ export const popoverSlotRecipe = defineSlotRecipe({
     },
     body: {
       color: "text.brand",
-
       alignItems: "center",
       borderRadius: "sm",
       zIndex: "inherit",

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

@@ -34,7 +34,6 @@ export const tableSlotRecipe = defineSlotRecipe({
       ...numericStyles,
       paddingX: 1.5,
       paddingY: 1,
-      width: "100%",
     },
     footer: {
       fontWeight: "medium",

package/src/tooltip.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Portal, Tooltip as ChakraTooltip } from "@chakra-ui/react";
+import { Box, Portal, Tooltip as ChakraTooltip } from "@chakra-ui/react";
 
 export const Tooltip = ChakraTooltip.Root;
 
@@ -14,17 +14,20 @@ export const TooltipTrigger = ({
   const isStringChild = typeof children === "string";
 
   return (
-    <ChakraTooltip.Trigger {...props} ref={ref} asChild={!isStringChild}>
-      {children}
+    <ChakraTooltip.Trigger ref={ref} asChild={!isStringChild} {...props}>
+      {isStringChild ? children : <Box width="fit-content">{children}</Box>}
     </ChakraTooltip.Trigger>
   );
 };
 
-export type TooltipProps = ChakraTooltip.ContentProps;
+export type TooltipProps = ChakraTooltip.ContentProps & {
+  showArrow?: boolean;
+};
 
 export const TooltipContent = ({
   ref,
   children,
+  showArrow = false,
   ...props
 }: TooltipProps & {
   ref?: React.Ref<HTMLDivElement>;
@@ -33,8 +36,12 @@ export const TooltipContent = ({
     <Portal>
       <ChakraTooltip.Positioner>
         <ChakraTooltip.Content ref={ref} {...props}>
-          <ChakraTooltip.Arrow />
-          <ChakraTooltip.Content {...props}>{children}</ChakraTooltip.Content>
+          {showArrow && (
+            <ChakraTooltip.Arrow>
+              <ChakraTooltip.ArrowTip />
+            </ChakraTooltip.Arrow>
+          )}
+          {children}
         </ChakraTooltip.Content>
       </ChakraTooltip.Positioner>
     </Portal>