@vygruppen/spor-react 13.1.3 → 13.2.0

package/dist/index.cjs

@@ -3757,31 +3757,69 @@ var CheckboxGroup = (props) => {
   const { direction = "row", children, gap = 1, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxGroup, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { direction, gap, children }) });
 };
+var ChoiceChipContext = React13.createContext({
+  variant: "core",
+  size: "sm"
+});
+var useChoiceChipContext = () => React13.useContext(ChoiceChipContext);
 var ChoiceChip = ({
   ref,
-  children,
-  icon,
-  onCheckedChange,
-  ...rootProps
+  ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react.CheckboxCard.Root,
+  const { children, inputProps, icon, variant, size, css, ...rest } = props;
+  const { variant: contextVariant, size: contextSize } = useChoiceChipContext();
+  const uniqueId = React13.useId();
+  const itemControlId = `radio-card-item-control-${uniqueId}`;
+  const inputHasAriaLabel = (inputProps == null ? void 0 : inputProps["aria-labelledby"]) || (inputProps == null ? void 0 : inputProps["aria-label"]);
+  const finalVariant = variant ?? contextVariant;
+  const finalSize = size ?? contextSize;
+  const recipe = react.useSlotRecipe({ key: "choiceChip" });
+  const styles = recipe({
+    variant: finalVariant,
+    size: finalSize
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.RadioCard.Item, { ...rest, css: { ...css, ...styles.item }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.RadioCard.ItemHiddenInput,
+      {
+        "aria-labelledby": inputHasAriaLabel ? inputProps == null ? void 0 : inputProps["aria-labelledby"] : itemControlId,
+        ref,
+        ...inputProps
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.RadioCard.ItemControl,
+      {
+        id: itemControlId,
+        "aria-hidden": true,
+        css: styles.itemControl,
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.RadioCard.ItemContext, { children: ({ checked }) => /* @__PURE__ */ jsxRuntime.jsxs(react.RadioCard.Label, { css: styles.label, children: [
+          checked ? (icon == null ? void 0 : icon.checked) && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { children: icon.checked }) : (icon == null ? void 0 : icon.default) && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { children: icon.default }),
+          children
+        ] }) })
+      }
+    )
+  ] });
+};
+var ChoiceChipGroup = ({
+  ref,
+  ...props
+}) => {
+  const { children, variant, size, css, ...rest } = props;
+  const recipe = react.useSlotRecipe({ key: "choiceChip" });
+  const styles = recipe({ variant, size });
+  return /* @__PURE__ */ jsxRuntime.jsx(ChoiceChipContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    react.RadioCard.Root,
     {
-      ...rootProps,
-      ...onCheckedChange && {
-        onCheckedChange: (details) => onCheckedChange(!!details.checked)
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Context, { children: ({ checked }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.HiddenInput, { ref }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.CheckboxCard.Label, { children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { width: "24px", children: checked ? icon.checked : icon.default }),
-          rootProps.chipType !== "icon" && children,
-          rootProps.chipType === "filter" && checked && /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CloseOutline24Icon, {})
-        ] }) }) })
-      ] }) })
+      css: { ...styles.root, ...css },
+      ref,
+      variant,
+      ...rest,
+      children
     }
-  );
+  ) });
 };
+var ChoiceChipLabel = react.RadioCard.Label;
 var Popover = ({
   ref,
   children,
@@ -4038,6 +4076,31 @@ var FieldsetLegend = react.Fieldset.Legend;
 var FieldsetContent = react.Fieldset.Content;
 var FieldsetHelperText = react.Fieldset.HelperText;
 var FieldsetErrorText = react.Fieldset.ErrorText;
+var FilterChip = ({
+  ref,
+  children,
+  icon,
+  onCheckedChange,
+  ...rootProps
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.CheckboxCard.Root,
+    {
+      ...rootProps,
+      ...onCheckedChange && {
+        onCheckedChange: (details) => onCheckedChange(!!details.checked)
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Context, { children: ({ checked }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.HiddenInput, { ref }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.CheckboxCard.Label, { children: [
+          checked ? (icon == null ? void 0 : icon.checked) && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { children: icon.checked }) : (icon == null ? void 0 : icon.default) && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { children: icon.default }),
+          rootProps.chipType !== "icon" && children,
+          rootProps.chipType === "filter" && checked && /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CloseOutline24Icon, {})
+        ] }) }) })
+      ] }) })
+    }
+  );
+};
 var InputChip = ({
   startIcon,
   endIcon,
@@ -4600,7 +4663,7 @@ var PasswordInput = ({
     Input,
     {
       ref,
-      startElement: startElement && startElement,
+      startElement,
       label,
       type: visible ? "text" : "password",
       endElement: /* @__PURE__ */ jsxRuntime.jsx(
@@ -6395,7 +6458,16 @@ var PopoverTrigger = ({
   ...props
 }) => {
   const isStringChild = typeof children === "string";
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Trigger, { ...props, ref, asChild: !isStringChild, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Popover.Trigger,
+    {
+      ref,
+      asChild: !isStringChild,
+      width: isStringChild ? void 0 : "fit-content",
+      ...props,
+      children: isStringChild ? children : /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children })
+    }
+  );
 };
 var PopoverContent = ({
   ref,
@@ -6413,14 +6485,14 @@ var PopoverContent = ({
   }, [showCloseButton, open]);
   return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Popover.Content, { ref, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Arrow, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Body, { ...props, children }),
     showCloseButton && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       CloseButton,
       {
         className: colorMode === "dark" ? "light" : "dark",
         ref: closeButtonRef
       }
-    ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Body, { ...props, children })
+    ) }) })
   ] }) }) });
 };
 var ProgressDot = ({ isActive }) => {
@@ -7823,7 +7895,8 @@ var radioCardAnatomy = anatomy.createAnatomy("radio-card").parts(
   "label",
   "itemText",
   "itemDescription",
-  "itemContent"
+  "itemContent",
+  "itemControl"
 );
 var radioAnatomy = anatomy.createAnatomy("radio").parts(
   "root",
@@ -8604,38 +8677,30 @@ var checkboxSlotRecipe = react.defineSlotRecipe({
   }
 });
 var choiceChipSlotRecipe = react.defineSlotRecipe({
-  slots: checkboxCardAnatomy.keys(),
-  className: "chakra-checkbox-card",
+  className: "spor-choice-chip",
+  slots: radioCardAnatomy.keys(),
   base: {
     root: {
-      display: "inline-flex",
-      alignItems: "center",
-      boxAlign: "center",
-      cursor: "pointer",
+      display: "flex",
+      flexDirection: "row",
+      gap: "1",
+      width: "fit-content"
+    },
+    item: {
+      display: "flex-inline",
       transitionProperty: "all",
-      borderRadius: "xl",
       transitionDuration: "fast",
-      paddingInlineStart: "2",
-      paddingInlineEnd: "2",
-      outline: "1px solid",
-      outlineColor: "outline.core",
       _checked: {
-        backgroundColor: "surface.brand",
-        borderRadius: "sm",
         outline: "none",
-        color: "text.brand",
+        _focusVisible: {
+          outline: "2px solid",
+          outlineColor: "outline.focus",
+          outlineOffset: "1px"
+        },
         _hover: {
-          backgroundColor: "surface.brand.hover",
-          _active: {
-            backgroundColor: "surface.brand.active"
-          }
+          outline: "none"
         }
       },
-      _focusVisible: {
-        outline: "2px solid",
-        outlineColor: "outline.focus",
-        outlineOffset: "1px"
-      },
       _disabled: {
         pointerEvents: "none",
         boxShadow: "none",
@@ -8660,32 +8725,44 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
         }
       }
     },
+    itemControl: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
     label: {
       display: "flex",
       alignItems: "center",
+      justifyContent: "center",
       gap: "1"
     }
   },
   variants: {
     size: {
       xs: {
-        root: {
+        item: {
+          borderRadius: "xl",
           _checked: {
-            borderRadius: "0.563rem"
-          },
+            borderRadius: "9px"
+          }
+        },
+        itemControl: {
           height: 5,
           paddingX: 1.5
         },
         label: {
           fontSize: { base: "mobile.sm", sm: "desktop.sm" },
-          fontWeight: "medium"
+          fontWeight: "regular"
         }
       },
       sm: {
-        root: {
+        item: {
+          borderRadius: "xl",
           _checked: {
             borderRadius: "sm"
-          },
+          }
+        },
+        itemControl: {
           height: 6,
           paddingX: 2
         },
@@ -8695,10 +8772,13 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
         }
       },
       md: {
-        root: {
+        item: {
+          borderRadius: "xl",
           _checked: {
             borderRadius: "sm"
-          },
+          }
+        },
+        itemControl: {
           height: 7,
           paddingX: 2
         },
@@ -8708,10 +8788,13 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
         }
       },
       lg: {
-        root: {
+        item: {
+          borderRadius: "xl",
           _checked: {
             borderRadius: "md"
-          },
+          }
+        },
+        itemControl: {
           height: 8,
           paddingX: 3
         },
@@ -8723,9 +8806,18 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
     },
     variant: {
       core: {
-        root: {
-          color: "text.core",
-          outlineColor: "outline.core",
+        itemControl: {
+          _checked: {
+            backgroundColor: "surface.brand",
+            color: "text.brand",
+            outline: "none",
+            _hover: {
+              backgroundColor: "surface.brand.hover",
+              _active: {
+                backgroundColor: "surface.brand.active"
+              }
+            }
+          },
           _hover: {
             outline: "2px solid",
             outlineColor: "outline.core.hover",
@@ -8738,10 +8830,22 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
         }
       },
       accent: {
-        root: {
+        itemControl: {
           backgroundColor: "surface.accent",
           color: "text.accent",
           outline: "none",
+          border: "none",
+          _checked: {
+            backgroundColor: "surface.brand",
+            color: "text.brand",
+            outline: "none",
+            _hover: {
+              backgroundColor: "surface.brand.hover",
+              _active: {
+                backgroundColor: "surface.brand.active"
+              }
+            }
+          },
           _hover: {
             backgroundColor: "surface.accent.hover",
             _active: {
@@ -8751,12 +8855,23 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
         }
       },
       floating: {
-        root: {
+        itemControl: {
           backgroundColor: "surface.floating",
           outline: "1px solid",
           outlineColor: "outline.floating",
           color: "text.floating",
           boxShadow: "sm",
+          _checked: {
+            backgroundColor: "surface.brand",
+            color: "text.brand",
+            outline: "none",
+            _hover: {
+              backgroundColor: "surface.brand.hover",
+              _active: {
+                backgroundColor: "surface.brand.active"
+              }
+            }
+          },
           _hover: {
             backgroundColor: "surface.floating.hover",
             outline: "1px solid",
@@ -8769,17 +8884,11 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
           }
         }
       }
-    },
-    chipType: {
-      icon: {},
-      choice: {},
-      filter: {}
     }
   },
   defaultVariants: {
     size: "sm",
-    variant: "core",
-    chipType: "choice"
+    variant: "core"
   }
 });
 var collapsibleSlotRecipe = react.defineSlotRecipe({
@@ -9501,6 +9610,186 @@ var fieldSlotRecipe = react.defineSlotRecipe({
     }
   }
 });
+var filterChipSlotRecipe = react.defineSlotRecipe({
+  slots: checkboxCardAnatomy.keys(),
+  className: "chakra-checkbox-card",
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      boxAlign: "center",
+      cursor: "pointer",
+      transitionProperty: "all",
+      borderRadius: "xl",
+      transitionDuration: "fast",
+      paddingInlineStart: "2",
+      paddingInlineEnd: "2",
+      outline: "1px solid",
+      outlineColor: "outline.core",
+      _checked: {
+        backgroundColor: "surface.brand",
+        borderRadius: "sm",
+        outline: "none",
+        color: "text.brand",
+        _hover: {
+          outline: "none",
+          backgroundColor: "surface.brand.hover",
+          _active: {
+            backgroundColor: "surface.brand.active"
+          }
+        }
+      },
+      _focusVisible: {
+        outline: "2px solid",
+        outlineColor: "outline.focus",
+        outlineOffset: "1px"
+      },
+      _disabled: {
+        pointerEvents: "none",
+        boxShadow: "none",
+        backgroundColor: "surface.disabled",
+        color: "text.disabled",
+        outline: "none",
+        _hover: {
+          backgroundColor: "surface.disabled",
+          boxShadow: "none",
+          color: "text.disabled"
+        },
+        _checked: {
+          cursor: "not-allowed",
+          boxShadow: "none",
+          color: "text.disabled",
+          backgroundColor: "surface.disabled",
+          _hover: {
+            backgroundColor: "surface.disabled",
+            boxShadow: "none",
+            color: "text.disabled"
+          }
+        }
+      }
+    },
+    label: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1"
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        root: {
+          _checked: {
+            borderRadius: "0.563rem"
+          },
+          height: 5,
+          paddingX: 1.5
+        },
+        label: {
+          fontSize: { base: "mobile.sm", sm: "desktop.sm" },
+          fontWeight: "medium"
+        }
+      },
+      sm: {
+        root: {
+          _checked: {
+            borderRadius: "sm"
+          },
+          height: 6,
+          paddingX: 2
+        },
+        label: {
+          fontSize: { base: "mobile.sm", sm: "desktop.sm" },
+          fontWeight: "bold"
+        }
+      },
+      md: {
+        root: {
+          _checked: {
+            borderRadius: "sm"
+          },
+          height: 7,
+          paddingX: 2
+        },
+        label: {
+          fontSize: { base: "mobile.md", sm: "desktop.md" },
+          fontWeight: "bold"
+        }
+      },
+      lg: {
+        root: {
+          _checked: {
+            borderRadius: "md"
+          },
+          height: 8,
+          paddingX: 3
+        },
+        label: {
+          fontSize: { base: "mobile.md", sm: "desktop.md" },
+          fontWeight: "bold"
+        }
+      }
+    },
+    variant: {
+      core: {
+        root: {
+          color: "text.core",
+          outlineColor: "outline.core",
+          _hover: {
+            outline: "2px solid",
+            outlineColor: "outline.core.hover",
+            _active: {
+              outline: "1px solid",
+              outlineColor: "outline.core",
+              backgroundColor: "surface.core.active"
+            }
+          }
+        }
+      },
+      accent: {
+        root: {
+          backgroundColor: "surface.accent",
+          color: "text.accent",
+          outline: "none",
+          _hover: {
+            backgroundColor: "surface.accent.hover",
+            _active: {
+              backgroundColor: "surface.accent.active"
+            }
+          }
+        }
+      },
+      floating: {
+        root: {
+          backgroundColor: "surface.floating",
+          outline: "1px solid",
+          outlineColor: "outline.floating",
+          color: "text.floating",
+          boxShadow: "sm",
+          _hover: {
+            backgroundColor: "surface.floating.hover",
+            outline: "1px solid",
+            outlineColor: "outline.floating.hover",
+            _active: {
+              backgroundColor: "surface.floating.active",
+              outline: "1px solid",
+              outlineColor: "outline.floating"
+            }
+          }
+        }
+      }
+    },
+    chipType: {
+      icon: {},
+      choice: {},
+      filter: {}
+    }
+  },
+  defaultVariants: {
+    size: "sm",
+    variant: "core",
+    chipType: "choice"
+  }
+});
 var floatingActionButtonSlotRecipe = react.defineSlotRecipe({
   slots: floatingActionButtonAnatomy.keys(),
   className: "spor-floating-action-button",
@@ -10380,6 +10669,7 @@ var menuSlotRecipe = react.defineSlotRecipe({
       display: "flex",
       justifyContent: "space-between",
       gap: 1.5,
+      cursor: "pointer",
       _hover: {
         backgroundColor: "surface.accent.hover"
       },
@@ -10407,19 +10697,22 @@ var menuSlotRecipe = react.defineSlotRecipe({
     radioItem: {
       display: "flex",
       justifyContent: "space-between",
-      gap: 2
+      gap: 2,
+      cursor: "pointer"
     },
     triggerItem: {
       display: "flex",
       justifyContent: "space-between",
       gap: 1.5,
-      alignItems: "center"
+      alignItems: "center",
+      cursor: "pointer"
     },
     checkboxItem: {
       display: "flex",
       gap: 2,
       alignItems: "center",
-      width: "full"
+      width: "full",
+      cursor: "pointer"
     }
   },
   variants: {
@@ -10617,7 +10910,7 @@ var popoverSlotRecipe = react.defineSlotRecipe({
     content: {
       position: "relative",
       display: "flex",
-      flexDirection: "row-reverse",
+      flexDirection: "row",
       color: "text.brand",
       gap: "0.625rem",
       padding: "0.563rem 0.75rem",
@@ -11402,8 +11695,7 @@ var tableSlotRecipe = react.defineSlotRecipe({
     cell: {
       ...numericStyles,
       paddingX: 1.5,
-      paddingY: 1,
-      width: "100%"
+      paddingY: 1
     },
     footer: {
       fontWeight: "medium"
@@ -11810,11 +12102,12 @@ var slotRecipes = {
   tabs: tabsSlotRecipe,
   travelTag: travelTagSlotRecipe,
   toast: toastSlotRecipe,
-  checkboxCard: choiceChipSlotRecipe,
+  checkboxCard: filterChipSlotRecipe,
   collapsible: collapsibleSlotRecipe,
   tooltip: popoverSlotRecipe,
   tag: inputChipSlotRecipe,
-  menu: menuSlotRecipe
+  menu: menuSlotRecipe,
+  choiceChip: choiceChipSlotRecipe
 };
 var animations = react.defineTokens.animations({
   spin: {
@@ -12648,16 +12941,17 @@ var TooltipTrigger = ({
   ...props
 }) => {
   const isStringChild = typeof children === "string";
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.Trigger, { ...props, ref, asChild: !isStringChild, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.Trigger, { ref, asChild: !isStringChild, ...props, children: isStringChild ? children : /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width: "fit-content", children }) });
 };
 var TooltipContent = ({
   ref,
   children,
+  showArrow = false,
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Tooltip.Content, { ref, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.Arrow, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.Content, { ...props, children })
+    showArrow && /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.Arrow, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.ArrowTip, {}) }),
+    children
   ] }) }) });
 };
 
@@ -12937,6 +13231,8 @@ exports.CargonetLogo = CargonetLogo;
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
 exports.ChoiceChip = ChoiceChip;
+exports.ChoiceChipGroup = ChoiceChipGroup;
+exports.ChoiceChipLabel = ChoiceChipLabel;
 exports.Clipboard = Clipboard;
 exports.ClipboardButton = ClipboardButton;
 exports.CloseButton = CloseButton;
@@ -12988,6 +13284,7 @@ exports.FieldsetContent = FieldsetContent;
 exports.FieldsetErrorText = FieldsetErrorText;
 exports.FieldsetHelperText = FieldsetHelperText;
 exports.FieldsetLegend = FieldsetLegend;
+exports.FilterChip = FilterChip;
 exports.FloatingActionButton = FloatingActionButton;
 exports.Heading = Heading;
 exports.IconButton = IconButton;