@vygruppen/spor-react 13.0.0 → 13.0.2

package/src/input/Switch.tsx

@@ -49,7 +49,7 @@ export const Switch = ({
   ref,
   ...props
 }: SwitchProps & {
-  ref?: React.RefObject<HTMLInputElement>;
+  ref?: React.Ref<HTMLInputElement>;
 }) => {
   const {
     rootRef,
@@ -59,6 +59,9 @@ export const Switch = ({
     errorText,
     helperText,
     css,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
     ...rest
   } = props;
   const recipe = useSlotRecipe({ key: "switch" });
@@ -80,7 +83,12 @@ export const Switch = ({
         checked={props.checked}
         css={styles.root}
       >
-        <ChakraSwitch.HiddenInput ref={ref} />
+        <ChakraSwitch.HiddenInput
+          ref={ref}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledby}
+          aria-describedby={ariaDescribedby}
+        />
         <ChakraSwitch.Control css={styles.control}>
           <ChakraSwitch.Thumb />
         </ChakraSwitch.Control>

package/src/input/Textarea.tsx

@@ -60,7 +60,7 @@ export const Textarea = ({
   ref,
   ...props
 }: TextareaProps & {
-  ref?: React.RefObject<HTMLTextAreaElement>;
+  ref?: React.Ref<HTMLTextAreaElement>;
 }) => {
   const {
     label,

package/src/input/useFLoatingInputState.tsx

@@ -8,7 +8,7 @@ export type UseFloatingInputStateProps<
   onFocus?: (event: FocusEvent<T>) => void;
   onBlur?: (event: FocusEvent<T>) => void;
   onChange?: (event: ChangeEvent<T>) => void;
-  inputRef?: React.RefObject<T>;
+  inputRef?: React.Ref<T>;
 };
 
 export function useFloatingInputState<

package/src/layout/PressableCard.tsx

@@ -45,7 +45,7 @@ export const PressableCard = ({
   ref,
   ...props
 }: PressableCardProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const recipe = useRecipe({ key: "pressableCard" });
   const [recipeProps, restProps] = recipe.splitVariantProps(props);

package/src/layout/RadioCard.tsx

@@ -42,7 +42,7 @@ export const RadioCard = ({
   ref,
   ...props
 }: RadioCardItemProps & {
-  ref?: React.RefObject<HTMLInputElement>;
+  ref?: React.Ref<HTMLInputElement>;
 }) => {
   const { inputProps, children } = props;
   const uniqueId = useId();
@@ -79,7 +79,7 @@ export const RadioCardGroup = ({
   ref,
   ...props
 }: RadioCardRootProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const {
     children,

package/src/layout/Separator.tsx

@@ -9,7 +9,7 @@ export const Separator = ({
   ref,
   ...props
 }: ChakraSeparatorProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
-  return <ChakraSeparator {...props} ref={ref} data- />;
+  return <ChakraSeparator aria-hidden="true" {...props} ref={ref} data- />;
 };

package/src/layout/StaticCard.tsx

@@ -47,7 +47,7 @@ export const StaticCard = ({
   ref,
   ...props
 }: StaticCardProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const recipe = useRecipe({ key: "staticCard" });
   const [recipeProps, restProps] = recipe.splitVariantProps(props);

package/src/linjetag/LineIcon.tsx

@@ -74,7 +74,7 @@ export const LineIcon = function LineIcon({
   label,
   ...rest
 }: LineIconProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) {
   const recipe = useSlotRecipe({ key: "lineIcon" });
   const styles = recipe({ variant, size, ...rest });

package/src/linjetag/TravelTag.tsx

@@ -141,7 +141,7 @@ export const TravelTag = function TravelTag({
   customIconVariant,
   ...rest
 }: TravelTagProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) {
   const recipie = useSlotRecipe({ key: "travelTag" });
   const styles = recipie({

package/src/link/TextLink.tsx

@@ -58,7 +58,7 @@ export const TextLink = ({
   href,
   ...props
 }: LinkProps & {
-  ref?: React.RefObject<HTMLAnchorElement>;
+  ref?: React.Ref<HTMLAnchorElement>;
 }) => {
   const { t } = useTranslation();
 

package/src/loader/ProgressBar.tsx

@@ -86,7 +86,7 @@ export const ProgressBar = ({
   css,
   ...rest
 }: ProgressBarProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const recipe = useSlotRecipe({ key: "progressbar" });
   const styles = recipe({});

package/src/loader/ProgressLoader.tsx

@@ -96,7 +96,7 @@ export const ProgressLoader = ({
   width,
   ...rest
 }: ProgressLoaderProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const { t } = useTranslation();
   const currentLoadingText = useRotatingLabel({

package/src/loader/Skeleton.tsx

@@ -25,7 +25,7 @@ export const SkeletonCircle = function SkeletonCircle({
   ref,
   ...props
 }: SkeletonCircleProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) {
   const recipe = useRecipe({ key: "skeleton" });
 

package/src/logo/CargonetLogo.tsx

@@ -13,7 +13,7 @@ export const CargonetLogo = ({
   ref,
   ...props
 }: CargonetLogoProps & {
-  ref?: React.RefObject<SVGSVGElement>;
+  ref?: React.Ref<SVGSVGElement>;
 }) => {
   const { colorPalette } = props;
   // These colors should not be tokenized, as they are logo specific.

package/src/logo/VyLogo.tsx

@@ -32,7 +32,7 @@ export const VyLogo = ({
   variant = "default",
   ...props
 }: VyLogoProps & {
-  ref?: React.RefObject<SVGSVGElement>;
+  ref?: React.Ref<SVGSVGElement>;
 }) => {
   const id = useId();
 

package/src/logo/VyLogoPride.tsx

@@ -8,7 +8,7 @@ export const VyLogoPride = ({
   ref,
   ...props
 }: VyLogoPrideProps & {
-  ref?: React.RefObject<SVGSVGElement>;
+  ref?: React.Ref<SVGSVGElement>;
 }) => {
   // These colors should not be tokenized, as they are logo specific.
 

package/src/media-controller/JumpButton.tsx

@@ -42,7 +42,7 @@ export const JumpButton = ({
   ref,
   ...props
 }: JumpButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const { direction, disabled, size = "sm" } = props;
   const { t } = useTranslation();

package/src/media-controller/PlayPauseButton.tsx

@@ -32,7 +32,7 @@ export const PlayPauseButton = ({
   ref,
   ...props
 }: PlayPauseButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const { playing, disabled, size = "sm" } = props;
 

package/src/media-controller/SkipButton.tsx

@@ -31,7 +31,7 @@ export const SkipButton = ({
   ref,
   ...props
 }: SkipButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const { direction, disabled, size = "sm" } = props;
 

package/src/nudge/Nudge.tsx

@@ -70,7 +70,7 @@ export const NudgeTrigger = ({
   ref,
   ...props
 }: ChakraPopover.TriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   return <PopoverTrigger {...props} ref={ref} />;
 };
@@ -81,7 +81,7 @@ export const NudgeContent = ({
   children,
   ...props
 }: PopoverProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const [currentStep, setCurrentStep] = useState(1);
   const childrenArray = React.Children.toArray(children); // Convert children to an array
@@ -206,7 +206,7 @@ export const NudgeCloseTrigger = ({
   children,
   ...props
 }: ChakraPopover.TriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const isStringChild = typeof children === "string";
 

package/src/pagination/Pagination.tsx

@@ -41,7 +41,7 @@ export const Pagination = ({
   ref,
   ...props
 }: PaginationRootProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const { getHref, children, ...rest } = props;
   const recipe = useSlotRecipe({ key: "pagination" });
@@ -68,7 +68,7 @@ export const PaginationEllipsis = ({
   ref,
   ...props
 }: ChakraPagination.EllipsisProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   return (
     <ListItem>
@@ -83,7 +83,7 @@ export const PaginationItem = ({
   ref,
   ...props
 }: ChakraPagination.ItemProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const rootProps = useRootProps();
   const { t } = useTranslation();
@@ -128,7 +128,7 @@ export const PaginationPrevTrigger = ({
   ref,
   ...props
 }: ChakraPagination.PrevTriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const { page } = usePaginationContext();
   const recipe = useSlotRecipe({ key: "pagination" });
@@ -178,7 +178,7 @@ export const PaginationNextTrigger = ({
   ref,
   ...props
 }: ChakraPagination.NextTriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const { page, totalPages } = usePaginationContext();
   const recipe = useSlotRecipe({ key: "pagination" });

package/src/popover/index.tsx

@@ -17,7 +17,7 @@ export const PopoverTrigger = ({
   children,
   ...props
 }: ChakraPopover.TriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const isStringChild = typeof children === "string";
 
@@ -39,7 +39,7 @@ export const PopoverContent = ({
   showCloseButton = false,
   ...props
 }: PopoverProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const { colorMode } = useColorMode();
 

package/src/progress-indicator/ProgressIndicator.tsx

@@ -44,7 +44,7 @@ export const ProgressIndicator = ({
   activeStep,
   css,
 }: ProgressIndicatorProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const { t } = useTranslation();
   const recipe = useSlotRecipe({

package/src/stepper/Stepper.tsx

@@ -62,7 +62,7 @@ export const Stepper = function Stepper({
   ref,
   ...props
 }: StepperProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) {
   const {
     onClick = () => {},

package/src/tab/Tabs.tsx

@@ -62,7 +62,7 @@ export const Tabs = ({
   ref,
   ...props
 }: TabsProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const { variant = "core", size = "sm" } = props;
   return <ChakraTabs.Root {...props} ref={ref} variant={variant} size={size} />;

package/src/theme/recipes/link.ts

@@ -15,6 +15,7 @@ export const linkRecipe = defineRecipe({
     paddingX: "0.5",
     whiteSpace: "normal",
     wordBreak: "break-word",
+    paddingInline: 0,
 
     _hover: {
       textDecoration: "none",

package/src/toast/toast.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {
+  BoxProps,
   createToaster,
   Portal,
   Stack,
@@ -22,19 +23,21 @@ type ToastProps = {
   text: string;
   variant: Variant;
   id?: string;
-};
+} & Pick<BoxProps, "width">;
 
 export const createToast = ({
   text,
   variant,
   id,
   duration = 6000,
+  width = "sm",
 }: ToastProps) =>
   toaster.create({
     description: text,
     type: variant,
     id: id ?? crypto.randomUUID(),
     duration,
+    meta: { width },
   });
 
 export const Toaster = () => {
@@ -42,7 +45,7 @@ export const Toaster = () => {
     <Portal>
       <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
         {(toast) => (
-          <Toast.Root width={{ md: "sm" }} role="alert">
+          <Toast.Root width={{ md: toast.meta?.width }} role="alert">
             <AlertIcon variant={toast.type as Variant} />
             <Stack gap="1" flex="1" maxWidth="100%">
               <Toast.Description>{toast.description}</Toast.Description>

package/src/tooltip.tsx

@@ -9,7 +9,7 @@ export const TooltipTrigger = ({
   children,
   ...props
 }: ChakraTooltip.TriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const isStringChild = typeof children === "string";
 
@@ -27,7 +27,7 @@ export const TooltipContent = ({
   children,
   ...props
 }: TooltipProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   return (
     <Portal>

package/src/typography/Badge.tsx

@@ -16,7 +16,7 @@ export const Badge = function Badge({
   children,
   ...props
 }: BadgeProps & {
-  ref?: React.RefObject<HTMLSpanElement>;
+  ref?: React.Ref<HTMLSpanElement>;
 }) {
   return (
     <ChakraBadge ref={ref} {...props}>

package/src/typography/Code.tsx

@@ -18,7 +18,7 @@ export const Code = function Code({
   ref,
   ...props
 }: CodeVariantProps & {
-  ref?: React.RefObject<HTMLElement>;
+  ref?: React.Ref<HTMLElement>;
 }) {
   return <StyledCode {...props} ref={ref} />;
 };

package/src/typography/Heading.tsx

@@ -46,7 +46,7 @@ export const Heading = function Heading({
   ref,
   ...props
 }: HeadingProps & {
-  ref?: React.RefObject<HTMLHeadingElement>;
+  ref?: React.Ref<HTMLHeadingElement>;
 }) {
   const {
     as,

package/src/typography/Text.tsx

@@ -48,7 +48,7 @@ export const Text = function Text({
   ref,
   ...props
 }: TextProps & {
-  ref?: React.RefObject<HTMLParagraphElement>;
+  ref?: React.Ref<HTMLParagraphElement>;
 }) {
   const { variant, lineHeight, fontSize, ...rest } = props;
   const resolvedProps = resolveTextProps({ variant, fontSize, lineHeight });